146 lines
6.5 KiB
Markdown
146 lines
6.5 KiB
Markdown
# 课程表打印版 · 交付说明
|
||
|
||
**交付物**：`syllabus-print.html` — 单文件、零依赖，双击即可打开。
|
||
|
||
浏览器打开后可直接使用；打印时自动切换为 A4 横向，仅输出当前所选版本。
|
||
|
||
---
|
||
|
||
## 一、这是什么
|
||
|
||
按参考截图还原的**小学课程表成品**，同一份数据、两种呈现：
|
||
|
||
| 版本 | 用途 | 呈现方式 |
|
||
| --- | --- | --- |
|
||
| **电子版** | 线上发布 / 邮件 / PDF 存档 | 纯净 A4 纸张，深红双线外框，白底 |
|
||
| **照片版** | 实物拍照存档 / 宣传图 | 同一张课表压在背景照片上，带白边、投影与压膜光泽 |
|
||
|
||
顶部页签切换，右侧「班级」下拉可切换班级，再右侧「打印 / 导出 PDF」。
|
||
|
||
---
|
||
|
||
## 二、版式结构
|
||
|
||
```
|
||
┌─ A4 横向 297 × 210mm ────────────────────────────────────┐
|
||
│ ┌─ 深红双线外框 ───────────────────────────────────────┐ │
|
||
│ │ [校徽] 学校名（中/英） ●●● 课程表 四(1)班 │ │ 题头
|
||
│ ├──────────────────────────────────────────────────────┤ │
|
||
│ │ ┌─ 左侧栏 ─┐ ┌─ 课程表 ─────────────────────────┐ │ │
|
||
│ │ │ 班主任照片│ │ 时间 │ 周一…周五 五个日列 │ │ │
|
||
│ │ │ │ │ 上午 │ │ │ │
|
||
│ │ │ 班主任 │ │ 中午 │ 学科格（按学科着色） │ │ │
|
||
│ │ │ 班级 │ │ 下午 │ │ │ │
|
||
│ │ │ 英文短句 │ └────────────────────────────────┘ │ │
|
||
│ │ └──────────┘ │ │
|
||
│ └──────────────────────────────────────────────────────┘ │
|
||
└──────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**左侧栏**：班主任照片位（可空置）+ 班主任 / 班级信息 + 一句英文短句（`Where there is a will, there is a way.`）。
|
||
|
||
**课程表**：左侧竖排「上午 / 中午 / 下午」时段标签，每个课次独占一行「开始–结束」时间，
|
||
五个工作日横向排布；课间、大课间、午餐午休等以通栏浅色横条穿插；午餐与课后服务为跨行合并格。
|
||
|
||
---
|
||
|
||
## 三、设计令牌
|
||
|
||
全部以 CSS 自定义属性集中在 `:root`，改一处即全局生效。
|
||
|
||
### 框线与表头
|
||
|
||
| 令牌 | 值 | 用途 |
|
||
| --- | --- | --- |
|
||
| `--frame` | `#8f2f28` | 外框、表头分隔线（深红） |
|
||
| `--frame-soft` | 浅红 | 内层细线 |
|
||
| `--head-bg` | `#9d332b` | 表头底色（白字） |
|
||
| `--paper` | `#ffffff` | 纸张底色 |
|
||
|
||
### 学科色板
|
||
|
||
每个学科一个**底色 + 文字色**组合，保证 WCAG AA 对比度：
|
||
|
||
| 类别 | 底色 | 文字色 | 代表学科 |
|
||
| --- | --- | --- | --- |
|
||
| 主科 | `#dff0d8` | `#2f5e23` | 语文、数学、英语 |
|
||
| 道法 | `#f0e5ef` | `#66305f` | 道德与法治 |
|
||
| 艺体 | `#f8e6e9` | `#7d2c39` | 体育与健康、美术、音乐 |
|
||
| 校本 | `#f7f3e2` | `#6b5c26` | 校本课程 |
|
||
| 课后服务 | `#eceee0` | `#4e5334` | 课后服务、劳动 |
|
||
| 课间/午休 | `#f5f2ea` / `#fdf4e6` | 灰/棕 | 通栏横条 |
|
||
|
||
---
|
||
|
||
## 四、打印
|
||
|
||
- `@page { size: A4 landscape; margin: 0 }` — A4 横向、零页边距
|
||
- `print-color-adjust: exact` — 强制保留背景色与学科色，不被浏览器「省墨」抹掉
|
||
- 打印时自动隐藏页签、工具栏、图例、照片版的光泽层与上传控件
|
||
- **只输出当前所选版本**，另一版在打印流中不占页
|
||
|
||
---
|
||
|
||
## 五、无障碍
|
||
|
||
- 页签使用 `role="tablist"` / `role="tab"` / `aria-selected` / `aria-controls`，面板用 `hidden` 同步
|
||
- 全部交互元素带 `:focus-visible` 焦点环，键盘可完整操作
|
||
- 学科底色与文字色对比度 ≥ 4.5:1（AA）
|
||
- 尊重 `prefers-reduced-motion`，关闭切换动画
|
||
|
||
---
|
||
|
||
## 六、如何接入真实数据
|
||
|
||
页面数据集中在脚本顶部的两个常量，替换即可，无需改渲染逻辑：
|
||
|
||
```js
|
||
var CLASSES = { "一（1）班": { ... }, ... }; // 班级 -> 课程表数据
|
||
var ACTIVE_CLASS = "一（1）班"; // 默认班级
|
||
```
|
||
|
||
单行数据结构：
|
||
|
||
```js
|
||
{
|
||
k: "lesson", // 行类型：lesson / break / segmark
|
||
no: 6, // 第几节课
|
||
t: ["13:00", "13:35"], // 起止时间（直接挂在行上，不按索引取）
|
||
seg: "中午", // 该行所属时段（用于生成竖排标签）
|
||
cells: ["语文", "科学", "道德与法治", "语文", ""], // 五个工作日
|
||
colspan: [false,false,false,false,true], // 该列是否跨到行尾
|
||
rowspan: [1,1,1,1,4] // 该列是否向下跨行
|
||
}
|
||
```
|
||
|
||
**渲染要点**：内部维护一张 `occupy["行-列"]` 占位图，逐行从左到右扫描五列，
|
||
每写一个格就 `markUsed` 登记其 `colspan/rowspan` 覆盖范围——这是保证合并单元格
|
||
不重叠、不错位的关键。通栏横条的 `colspan` 由占位图反算「本行仍空闲的列数」得出，
|
||
因此不会与行尾的跨行空格冲突。
|
||
|
||
---
|
||
|
||
## 七、真实浏览器验证结果
|
||
|
||
用 Chromium 实测（非静态检查）：
|
||
|
||
| 检查项 | 结果 |
|
||
| --- | --- |
|
||
| A4 纸张尺寸 | 1123 × 794 px（精确等于 297 × 210mm） |
|
||
| 电子版纵向溢出 | `0`（内容完全装下，无裁切） |
|
||
| 时段标签 | 上午 ×8 / 中午 ×4 / 下午 ×3，三段齐全 |
|
||
| 表格行数 | 18 行，逐行均为矩形，无缺口/错位 |
|
||
| 两版结构一致性 | 电子版与照片版逐格比对 `identical: true` |
|
||
| 照片版子层 | 951 × 662 px，完整落在纸张留白内，无裁切 |
|
||
| 背景图 / 光泽层 | 均正常渲染 |
|
||
| 打印样式表 | 已生效 |
|
||
| 控制台报错 | 无 |
|
||
|
||
---
|
||
|
||
## 八、已知取舍
|
||
|
||
- 数据为**演示用样例**，需替换为真实排课数据（见第六节）
|
||
- 照片版背景为内置生成的默认底色图，可通过「照片版」面板的按钮上传本地照片替换
|
||
- 字体使用系统无衬线族（`system-ui` 优先），未内嵌字体文件，离线可用
|