work-week-plan-front/overview.md

课程表页面 · 交付说明

交付物

文件	说明
course-schedule.html	课程表页面，单文件、零依赖，双击即可在浏览器打开

目标站点的情况（重要）

按提供的地址与账号尝试登录后，未能进入真实页面：

• 访问 http://mepc.schsoft.cn/Syllabus/modular/HSchSyllabus#/Home/HSchSyllabu 会被 CAS 重定向到 https://sso.bestsch.com/old/index.html
• 用 dngjxxadmin / Daning@2007 提交登录，SSO 返回 「错误的用户名或密码」（并提示剩余 2 次尝试机会）
• 为免触发账号锁定，未继续重试

因此本页是按课表业务域（HSchSyllabus 中学课表）的通用信息架构与交互范式构建的，并已对齐本仓库现有视觉语言。接入真实接口时只需替换页面底部的 DATA / OVERRIDES 常量，其余渲染逻辑无需改动。

若需要 1:1 还原线上界面，请在浏览器中手动登录后提供页面截图（或更新后的可用凭据），我再按实际版式调整。

设计系统

色彩

沿用仓库 _varible.scss 既有令牌，保证与本模块其它页面同源：

• 品牌主色 #5979ea（$color-primary），语义色 #45b972 / #e9b954 / #e8684a
• 中性文字 #404042 / #555 / #999，分割线 #e9e9e9，页面底 #f3f3f3
• 学科色板 9 色相 × 3 层级（50 底 / 200 边 / 800 字），每个色相固定绑定学科，跨周次配色一致
• 正文对比度按 WCAG AA 4.5:1 选取字色，未依赖透明度压低对比

排版与节奏

• 字号阶梯 10 / 11 / 12 / 13 / 14 / 15 / 18 / 19px，仅 400 与 500 两档字重
• 间距 8pt 栅格（4 / 8 / 12 / 16 / 20 / 24 / 32 / 40px）
• 圆角 6 / 8 / 12 / 16px；阴影三级海拔（--sh-1/2/3）
• 数字（节次、日期、时间）统一 tabular-nums，纵向对齐

组件

工具栏 / 周次条 / 表头 / 节次轴 / 课程块 / 时间指示线 / 图例 / 日视图行 / 日期选择条 / 详情侧栏 / 空状态 / Toast，均有 default、hover、selected、focus-visible 态。

信息架构

顶部工具栏（学期 · 班级 · 周/日视图切换 · 回到本周 · 打印）→ 周次条（20 周，当前周绿色标记并自动居中）→ 主区（周视图 7×8 网格 / 日视图 8 节次列表）→ 图例 → 详情侧栏。

课程块承载：学科、教室、教师；连堂课时合并为一个块并标注「连堂 N 节」；调课/停课在右上角打角标。

无障碍

• 全部交互元素为原生 button，可 Tab 聚焦，:focus-visible 统一 2px 焦点环
• 周次条 aria-current、日期条 aria-selected、侧栏 role="dialog" + aria-modal
• 课程块 aria-label 输出完整信息（学科/星期/节次/教师/教室），避免仅靠颜色传达状态
• Esc 关闭侧栏，← → 切换周次
• 尊重 prefers-reduced-motion

已修复的缺陷（实现过程中实测发现）

1. 7 列网格塌成 1 列：minmax(104px, 1fr) 在宽度由内容决定的父级中会让轨道取到最小像素值，7×min 撑爆容器后折叠。改为 repeat(7, 1fr) 比例轨道，改由 .week-wrap 的 min-width 提供可用性下限。
2. 周末两列被裁切：.week-wrap 的 min-width 未计入边框像素，补 + var(--day-count) - 1。
3. 日视图默认全空：基准日是周六（无课），且日视图没有日期选择器。新增日期选择条，并让默认日落到「今天（若有课）/ 本周第一个有课日」。
4. 周次条显示半截周：20 周按钮改为弹性收缩 + min-width 下限，并在启动时把当前周滚入视野中部。

验证方式与结果

以 file:/// 在真实 Chromium 中打开，逐项实测（非静态检查）：

检查项	结果
页面加载 / 控制台报错	通过，无未捕获错误
周视图：7 列表头、8 节次轴、39 个课程块	通过
课程块与背景网格对齐（left/top 像素级）	通过
周末列完整可见（周日 right=1222 < 视口边缘）	通过
点击课程打开详情侧栏（标题/8 行字段/色板）	通过
Esc 关闭侧栏	通过
周 / 日视图切换、日期选择条	通过
班级切换（高一1班→高二1班，课程数随之变化）	通过
第 5 周「调课」、第 11 周「停课」角标	通过
← → 周次键盘导航	通过
打印样式表存在	通过

后续接入建议

1. 用接口数据替换 DATA（结构：[星期索引, 起始节次, 连堂节数, 学科, 教师, 教室, 备注]）与 OVERRIDES（调课/停课）。
2. TERM_START / TOTAL_WEEKS / SLOTS 改为读取教务基础数据；NOW 去掉硬编码改用系统时间。
3. 若需并入 Vue 项目，把 <style> 拆到 src/assets/styles/components/_course.scss，模板迁为 views/syllabus/HSchSyllabus.vue，SUBJECTS 色板与渲染函数可直接复用。