feat: 新增 page3 演职员表并拆分多页资源

- 新增 page3.html：无「天」背景的演职员表与火山场景
- 重构为页面专属 CSS/JS 与共用的 text-scene 渲染引擎
- PDF 导出支持 --page 参数

README.md

@@ -1,6 +1,8 @@
 # 《关于「甲子」的虚构故事》公众号推送 Demo
 
-一个 28 列 × 44 行的汉字文字画单页。黑底、每格一个汉字，空白处由淡色「天」铺满；画面包含晚霞云、落日、飞鸟、天线与城市楼群，上方以整格扣出的黑色标题框居中呈现「关于「甲子」的虚构故事」。
+一个 28 列 × 44 行的汉字文字画 Demo。黑底、每格一个汉字，空白处由淡色「天」铺满；画面包含晚霞云、落日、飞鸟、天线与城市楼群，上方以整格扣出的黑色标题框居中呈现「关于「甲子」的虚构故事」。
+
+项目规划为三张类似页面，当前实现第 1 页（`page1.html`）与第 3 页（`page3.html`）。
 
 ## 效果概述
 
@@ -14,33 +16,56 @@
 
 ```
 .
-├─ index.html              # 页面骨架
+├─ page1.html              # 第 1 页入口
+├─ page3.html              # 第 3 页入口
 ├─ pyproject.toml          # uv 环境与导出依赖
 ├─ uv.lock                 # 依赖锁定
 ├─ scripts/export_pdf.py   # PDF 导出脚本
 ├─ assets/
-│  ├─ css/style.css        # 布局、字号与各元素配色
-│  ├─ js/scene.js          # 场景数据与网格渲染
+│  ├─ css/
+│  │  ├─ common.css        # 三页共用：字体、骨架、网格、标题框
+│  │  ├─ page1.css         # 第 1 页配色
+│  │  └─ page3.css         # 第 3 页配色与前景标题
+│  ├─ js/
+│  │  ├─ text-scene.js     # 共享文字画渲染引擎
+│  │  ├─ page1.js          # 第 1 页场景数据
+│  │  └─ page3.js          # 第 3 页场景数据
 │  └─ fonts/zpix.ttf       # Zpix 像素字体
 └─ references/a.html       # 原始参考页
 ```
 
 ## 运行
 
-直接打开 `index.html` 即可。若需通过本地服务器预览：
+直接打开 `page1.html` 即可。若需通过本地服务器预览：
 
 ```bash
 python -m http.server 8000
-# 浏览器访问 http://localhost:8000
+# 第 1 页 http://localhost:8000/page1.html
+# 第 3 页 http://localhost:8000/page3.html
 ```
 
+## 多页结构
+
+现有页面：
+
+- `page1.html`：完整日落城市文字画，空白处铺淡色「天」。
+- `page3.html`：无「天」背景的演职员表；前景标题「演职员表」，背景为电线、麻雀、枪、草、消防栓与下半屏火山。
+
+共用与专属：
+
+- `common.css`、`text-scene.js`：三页共用的页面骨架、网格、标题框与渲染引擎。
+- `pageN.html`、`pageN.css`、`pageN.js`：每一页的入口、配色与场景数据。
+
+新增页面时复制 `page1.*` 三件套，修改 `pageN.js` 中的数据与 `pageN.css` 配色，并按顺序引入 `common.css`、`pageN.css`、`text-scene.js`、`pageN.js`。
+
 ## 导出 PDF
 
 使用 Playwright（由 uv 管理）导出，页面尺寸为 30em × 46em：28 × 44 格的画面，四周各留恰好 1em。
 
 ```bash
 uv sync
-uv run python scripts/export_pdf.py              # 默认 1em = 24px，输出 dist/封面demo.pdf
+uv run python scripts/export_pdf.py                       # 默认导出 page1.html 到 dist/封面demo.pdf
+uv run python scripts/export_pdf.py --page page3.html -o dist/page3.pdf
 uv run python scripts/export_pdf.py --em 16 -o dist/封面demo-16.pdf
 ```
 
@@ -50,11 +75,11 @@ uv run python scripts/export_pdf.py --em 16 -o dist/封面demo-16.pdf
 uv run playwright install chromium
 ```
 
-导出页为黑底满幅，画面距上、下、左、右边界各 1em；脚本会在导出前校验该边距。默认 `--em 24` 时输出 720 × 1104px（约 190 × 292 mm）。
+导出页为黑底满幅，画面距上、下、左、右边界各 1em；脚本会在导出前校验该边距。默认 `--em 24` 时输出 720 × 1104 px（约 190 × 292 mm）。
 
 ## 调整指南
 
-### 构图（assets/js/scene.js）
+### 构图（assets/js/page1.js）
 
 | 数据 | 含义 |
 | --- | --- |
@@ -63,24 +88,33 @@ uv run playwright install chromium
 | `birds` | 飞鸟：每只占 2 格（麻雀 / 喜鹊 / 乌鸦） |
 | `antennas` | 天线：单列「线」，从 y 向下叠 h 格 |
 | `buildings` | 楼群：x/y/w/h，n 对应 `.bld-n` |
-| `TITLE` | 标题文案、起始行、行高、左右留格数 |
+| `title` | 标题文案、高亮词、起始行、行高、左右留格数 |
 
 坐标为 0–27 列、0–43 行；越界会直接抛错提示。
 
-### 样式（assets/css/style.css）
+### 样式
+
+共用样式（`assets/css/common.css`）：
 
 - 整体字号：`.scene` 的 `font-size`，所有元素统一继承。
+- 标题：`.title-panel`（黑色矩形）与 `.title-panel .title`（文字样式）。
+
+页面样式（`assets/css/page1.css`）：
+
 - 背景「天」：`.sky`。
 - 云：`.cloud` 的明度与 `.cloud-*` 的色相。
-- 落日：`.sun` 的整体明度（当前为原色 90%），`.sun-t1` 至 `.sun-t17` 为逐行色阶。
+- 落日：`.sun` 的整体明度（当前为原色 80%），`.sun-t1` 至 `.sun-t17` 为逐行色阶。
 - 飞鸟：`.bird-sparrow`、`.bird-magpie`、`.bird-crow`。
 - 天线：`.ant`（深色款为 `.ant-dark`）。
 - 楼群：`.bld` 与 `.bld-1` 至 `.bld-8`。
-- 标题：`.title-panel`（黑色矩形）与 `.title-panel .title`（白色文字及字号）。
+
+### 第 3 页（assets/js/page3.js）
+
+通过 `glyphs` 数组放置任意背景字：`{ text, x, y, cls, vertical }`，坐标仍按格对齐。前景标题 `.credits` 由页面脚本追加，可在 `page3.css` 中调整字号与位置。
 
 ## 实现说明
 
-- `scene.js` 先建立 28×44 网格并全部填「天」，再按数组覆盖元素；同 class 的连续字符合并为单个 `span` 输出。
+- `text-scene.js` 先建立 28×44 网格并全部填「天」，再按页面数据覆盖元素；同 class 的连续字符合并为单个 `span` 输出。
 - 标题区把对应格子清空，并在同一位置叠放绝对定位的黑色面板；边缘与字符整格对齐，不会出现半个字。
 - Zpix 单字步进为 13/12 em，因此 `.line` 使用 `letter-spacing: -0.083333em` 补偿，保证 28 列恰好落在 28em 宽内。