87 lines
4.9 KiB
Markdown
87 lines
4.9 KiB
Markdown
# 课程表页面 · 交付说明
|
||
|
||
## 交付物
|
||
|
||
| 文件 | 说明 |
|
||
|---|---|
|
||
| `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` 色板与渲染函数可直接复用。
|