# 课程表页面 · 交付说明 ## 交付物 | 文件 | 说明 | |---|---| | `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 项目，把 `