4.8 KiB
2026-10-10
课程表 HTML 页面(course-schedule.html)
任务:根据 http://mepc.schsoft.cn/Syllabus/modular/HSchSyllabus 写一个课程表前端页面。
目标站点结论(重要,避免重复踩坑):
- 该地址经 CAS 重定向到
https://sso.bestsch.com/old/index.html - 提供的凭据
dngjxxadmin/Daning@2007被 SSO 拒绝,返回「错误的用户名或密码」 - 未继续重试以免锁定账号。故页面按通用课表业务范式构建,非 1:1 还原。
交付:course-schedule.html —— 单文件、零依赖,周视图(7×8 网格)+ 日视图 + 课程详情侧栏。
内置 DATA / OVERRIDES 演示数据,接入真实接口只需替换这两个常量。
设计令牌来源:沿用 src/assets/styles/utils/_varible.scss(主色 #5979ea、语义色
#45b972/#e9b954/#e8684a、分割线 #e9e9e9、页面底 #f3f3f3),学科色板 9 色相
× 3 层级(50/200/800),色相固定绑定学科。
实测修复的 4 个缺陷(浏览器真机验证,非静态检查):
minmax(104px,1fr)在宽度由内容决定的父级里会把轨道取到最小像素值,7 列撑爆后塌成 1 列 → 改repeat(7,1fr),可用性下限交给.week-wrap的min-width.week-wrap的min-width未计入边框像素 → 周末两列被裁,补+ var(--day-count) - 1- 日视图默认全空(基准日周六无课且无日期选择器)→ 加日期选择条 + 默认日落到「今天/首个有课日」
- 周次条出现半截周 → 按钮弹性收缩 +
min-width下限,启动时当前周滚入视野中部
课程表打印版(syllabus-print.html)—— 分电子版 / 照片版
任务:按用户提供的参考截图,做「电子版 + 照片版」两版课程表成品。
交付:syllabus-print.html —— 单文件零依赖,顶部页签切换两版,共用同一份数据源。
版式:A4 横向 297×210mm。题头(圆形校徽 +「上海市大宁国际小学教育集团」+ 剪纸风红 底「课程表」题头 + 班级标注)→ 正文(左侧栏:班主任/班级 + 照片位 + 英文短句;右侧课程表) → 底部。照片版 = 同一张纸贴在背景照片上,附纯 CSS 压膜光泽(斜向高光 + 暗角)。
设计令牌(取自参考图):框线 #8f2f28、表头 #9d332b;学科色 —— 主科 #dff0d8、
道法 #f0e5ef、艺体 #f8e6e9、校本 #f7f3e2、课后服务 #eceee0。
实测修复的 6 个缺陷:
- 星期表头竖排换行(列宽不足)→ 字距 2→1.4px +
nowrap,日列 51px→165px - 时间被裁成「8:2」→
c-day去掉width:20%改auto,c-time定 13mm,时间列 22→49px - 中午/下午段标签缺失 → 除独立分段行外,还要把课次行上的
r.seg也转成分段标记 - 残留多余
}导致整段不渲染 → 删重复括号,用new Function(script)验语法 for循环里误用return(应continue)→ 静默截断行内容- 课间行硬编码
colspan="5"与周五行尾 rowspan 空格冲突 → 由占位图occupy反算freeCols;独立通栏行另加freeSpan:true
表几何要诀:用 occupy["行-列"] 占位图 + 5 列全扫描渲染,markUsed 统一登记
colspan/rowspan,避免重叠与错位;时间不按 slots[row] 索引取(有 rowspan 会错行),
而是把 t:[start,end] 直接挂到每一行数据上。
照片版无溢出做法:.ph-scale 用固定尺寸 286×199mm(与 A4 内容框一致)+ zoom:.88,
父级 .ph-sheet 设 overflow:hidden + 居中。不要用 height:112.99% 这类百分比——
zoom 会让百分比解析基准失真,溢出量随内容高度漂移。
终测:A4 = 1123×794px(精确 297×210mm),overflowY:0;电子版/照片版表格结构逐行比对
identical:true(18 行,合并单元格正确);段标签 上午×8 / 中午×4 / 下午×3;控制台无报错。
环境备忘
agent-browser(0.27.0)首次 open 冷启动极慢(单次可超 8 分钟),首次调用务必run_in_background=true,否则会撞前台超时- 该浏览器 daemon 会话不稳定:多步命令链中途易丢页面变成
about:blank,@ref也会失效。稳妥做法是「一条命令链内完成 open→快照→操作→截图」,把结果写进日志文件再 Read - 该站点是 jQuery 页 + React 输入框混合,
fill会触发「错误的用户名或密码」误判, 须用click+keyboard type真实键盘输入 - Read 工具读不了 PNG(本机返回 "[图片无法显示]"),截图不可用该方式自查。改用
eval回读 DOM 几何 /getBoundingClientRect/scrollHeight做结构化验证,更可靠 - 照片版的
zoom百分比基准问题见上文「照片版无溢出做法」