# 课程表打印版 · 交付说明

**交付物**：`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` 优先），未内嵌字体文件，离线可用