中国联通 HTML 汇报生成器 · 主索引
把汇报内容做成单文件 HTML，统一中国联通品牌视觉。两种模式产物形态不同，判定错了整份产出方向就错了。
S0 · 模式判定（每次任务第一件事，必做）
含 "滚动/往下看/长页/网页/手册/文档站/可打印/归档" → 【滚动长页模式】→ 读 04-scroll.md
含 "PPT/幻灯片/演示/翻页/投影/汇报/一页页/现场讲" → 【演示页模式】 → 读 03-deck.md
两者都出现，或都不出现 → 必须问用户，不要猜
| 滚动长页 | 演示页 | |
|---|---|---|
| 产物 | 报告名.html（单文件） |
报告名.html（单文件） |
| 画布 | 不限高，内容区 1152px 居中 | 锁死 1280×720，#stage 自适应缩放 |
| 导航 | 粘性 topnav + 锚点 + 阅读进度条 | 按钮/键盘翻页 + 顶部进度条 + 页码 |
| 编辑 | 不支持 | 双击改字 + 保存另存 |
| 结构 | header.hero / nav.topnav / section×N / footer |
.slide 序列：封面 / 分隔页 / 内容页 |
| 章节区隔 | section 分割线 + .sec-head 大号红序号 |
深红满版 .divider 分隔页 |
| 页脚 | 无（靠 section 分割线） | 每页 .footer（章节名 + 自动页码） |
品牌铁律（两种模式通用，违反即重做）
- 单一主色
#D90000联通红。禁止引入蓝/绿/紫等外来品牌色；图表只允许红系 + 中性灰#8A909B。 - 只用系统字体栈
"PingFang SC","Microsoft YaHei",...。禁止引入任何 Web Font / Google Fonts —— 内网环境会加载失败导致排版回退。 - 亮色底。页面底色纯白，卡片底
#F5F6F8。唯一深色是演示页的章节分隔页（深红满版）。 - Logo 必须 base64 内联，禁止
src="assets/..."外链（交付物是单文件）。用assets/unicom-logo.png转 base64。 - 产物必须是单个
.html文件，无外部依赖、无构建步骤。 - 数字用千分位 +
font-variant-numeric:tabular-nums。
生成流程
阶段零：S0 模式判定 → 分支
阶段一：读规范
├─ 必读 references/01-brand.md 色彩令牌 / 字号阶梯 / Logo 内联方式 / 禁止清单
├─ 必读 references/02-components.md 组件库（卡片/表格/统计/时间轴/标签/封面/分隔页）
└─ 按模式读 references/03-deck.md 或 references/04-scroll.md
阶段二：复制骨架
├─ 演示页 → 复制 assets/deck-shell.html
└─ 滚动页 → 复制 assets/scroll-shell.html
（两个外壳已含完整 CSS + 交互脚本，只需替换内容与占位符）
阶段三：填内容
· 替换 __TITLE__ / __LOGO_BASE64__ / __部门名__ / 日期 等全部 __XXX__ 占位符
· 演示页再读 references/05-editing.md 确认编辑范围（一般无需改动脚本）
· 演示页页脚页码写 <span>00</span> 占位，脚本会自动按页序编号
· 删除外壳顶部「使用说明」注释块
阶段四：质检
1) 静态质检 python scripts/validate.py <产物.html>
报 ERROR 必须修完再交付；WARN 按情况处理。
2) 布局实测（演示页必做）node scripts/check_layout.js <产物.html>
用无头 Chromium 真实渲染，逐页报「内容底 / 上限 / 超出 px / 填充率」。
必须零溢出且填充率 ≥ 80%。靠目测估算高度不可靠——曾出现预估 480px、
实测 595px（超 55px）的情况。
无依赖时先装：cd <node workspace> && npm i playwright-core
（浏览器复用本机 ms-playwright 缓存，用 CHROME_PATH 指定 chrome.exe）
> 布局实测发现溢出后，优先按序尝试：① 删掉非必要行/卡；② 把行内字号与
> padding 收紧（如 .issue{padding:13px 15px}）；③ 页面级 .content{gap:12px}；
> ④ 改密排 .dense-pad。不要压缩到字号 < 11px 或靠删数据硬塞，超限就拆页。
生成 Logo base64
python -c "import base64;print(base64.b64encode(open('<skill>/assets/unicom-logo.png','rb').read()).decode())"
文件索引
| 文件 | 职责 | 何时读 |
|---|---|---|
references/01-brand.md |
色彩令牌、字号阶梯、Logo 使用规范、署名页脚、禁止清单 | 每次 |
references/02-components.md |
组件库：页面骨架/卡片/数据/表格/标签/时间轴/栅格/封面/分隔页 | 每次 |
references/03-deck.md |
演示页：画布、高度预算、页面配比、翻页交互、图表几何参数、填充率 | 演示页模式 |
references/04-scroll.md |
滚动页：栅格、Hero、粘性导航、section 排版、打印归档 | 滚动页模式 |
references/05-editing.md |
双击编辑范围、编辑态样式、保存落盘实现、文件名约定 | 需改动编辑逻辑时 |
assets/deck-shell.html |
演示页完整外壳（CSS + JS + 按钮组），含 4 个示例页 | 演示页模式直接复制 |
assets/scroll-shell.html |
滚动页完整外壳（CSS + 滚动监听），含 3 个 PART 示例 | 滚动页模式直接复制 |
assets/unicom-logo.png |
联通标准 logo（白底红黑稿，236×80，15.6KB） | 转 base64 用 |
scripts/validate.py |
产物质检：占位符残留、Logo 内联、字体、画布尺寸、外壳完整性、溢出风险 | 交付前 |
scripts/check_layout.js |
演示页真实渲染布局实测：逐页溢出 px + 填充率（比静态估算可靠） | 演示页交付前 |
常见错误
| 错误 | 后果 |
|---|---|
| 引入 Google Fonts | 内网加载失败，字体回退，排版错乱 |
| Logo 用外链 | 单文件发出去后 Logo 丢失 |
| 演示页画布改成非 1280×720 | 内容裁切或留白，fit() 缩放比例失真 |
| 演示页内容只填半页 | 投影时大片空白（见 03-deck.md 填充率要求） |
滚动页用了 .divider 满版红块 |
截断阅读流，长页语境下很突兀 |
| 手写页脚页码 | 增删页后编号错乱（应写占位交给脚本） |
靠挪 active 类换演示页落地页 |
无效，show(0) 会覆盖（见 03-deck.md） |
| 只输出片段 HTML 不给完整文件 | 用户无法直接打开，交付不合格 |
