交互汇报网页

把「发给别人看的表格」升级成「打开就想往下翻的页面」。交付物是一个单文件自包含 HTML（无外链、无 CDN），可以直接双击打开、可以发布成在线链接、可以用微信转发。

本技能自带的可执行脚本都放在技能目录的 scripts/ 下（probe.py、capture.py），需要用 python <技能目录>/scripts/probe.py 这样的完整路径调用，不要假设它们在当前项目目录里。

何时使用

• 手里有一份汇报表格 / 财务公示 / 经营分析，想做成能发链接、能转发的网页；
• 已有汇报网页，但版式不齐、屏宽不一致、分享卡片没有摘要或缩略图空白；
• 需要给一份对外材料配「转发标题 + 摘要 + 封面图」。

不适用：需要图表钻取与数据筛选的（用 数据看板汇报）、要 A4 打印归档或长图的（用 打印长图交付件）、整理合同批注与修订意见的（用 合同批注汇报）。

核心心法

一屏只讲一件事，一屏正好一屏高。 汇报网页不是把 Word 拉长，而是把「章节」切成「屏」。每屏一句话结论 + 一个证据（表/卡片/对比），观众不用滚动就能读完当前论点；想深入时自己往下翻。

数字是主角，装饰是配角。 金额大字、千分位、等宽数字（font-variant-numeric:tabular-nums）、克制的砖红强调色。不要图标库、不要渐变、不要圆角过大。

工作流

步骤 1 · 取材与口径定型

先读源文件，把「有哪几个期间 × 哪几列指标」定死，再动手排版。

• 期间维度优先（筹备期 / 年度 / 合计），指标维度通常是：收入、支出、结余、酬金、归业主结余。
• 口径差异必须在这一步解决，不能留给页面自圆其说：同一指标在不同版本用了不同基数，是返工的头号原因。
• 记录每个数字的来源（哪张表、哪一行、什么公式），后面自检要用。

步骤 2 · 规划屏序

默认七段式，按需增删（对外的正式版常删掉结论屏）：

1. 封面 — 主体名 + 报告名 + 3 个最关键数字 + 口径备注
2. 总览表 — 期间 × 收入/支出/结余/酬金/归业主
3. 分项明细 — 收入侧、支出侧各一屏，带占比列
4. 关键口径 — 2×2 卡片，每个口径一张卡
5. 方案对照 — 基准 vs 替代 vs 差异
6. 复核与披露 — 折叠（<details>）承载长文，默认收起
7. 结论 — 一句话 + 三条要点

屏数控制在 8–12 屏。少于 6 屏不叫汇报，多于 14 屏观众会放弃。

步骤 3 · 生成页面

复制 assets/template.html 作为起点，只替换内容，不要重写骨架 CSS。骨架已包含导航、滚动、数字动画、键盘翻屏、响应式与打印样式。

细节见 references/屏型与版式.md（配色变量、字号阶梯、表格/卡片/折叠的完整类名与写法）。

步骤 4 · 版式自检（必做，不许目测）

python scripts/probe.py <页面路径>

一次性输出：每屏内容宽度、左边缘 x、容器宽度、横向溢出元素、各屏高度、文档是否产生横向滚动。验收标准是「所有屏的内容宽度与左边缘完全一致」，差一个像素都算没做完。

再截单屏确认视觉：

python scripts/capture.py <页面路径> <屏id> <输出.png>      # 单屏
python scripts/capture.py <页面路径> --all <输出目录>       # 全部屏（约 6 秒/屏）

脚本已把「数字动画、CSS 过渡、其他屏」全部冻结，避免截到 0.00 或半张图。如果自己手写截图命令，必须一并禁用 transition，否则带占比条的那屏会让无头浏览器一直卡到超时（见 references/踩坑清单.md 第 10 条）。

步骤 5 · 微信转发卡片

四件套：标题、摘要、缩略图、meta 标签。写法与必备清单见 references/微信分享卡片.md。

三条硬约束：

• 摘要控制在 20 字以内，一行显示完，不重复标题已有的信息，不放会变的数据；
• 封面 800×800 正方形、不含任何金额（数据还会改，放了图和内容就对不上）；
• 站点需要 sharecode 时，og:image 必须写成带 ?sharecode=XXX 的绝对地址，否则微信抓图 403、缩略图必然空白。

步骤 6 · 发布与验收

发布后不要只说"已上线"，必须回抓验证：

curl -s -A "Mozilla/5.0 (iPhone) MicroMessenger" "<链接>" | grep -oE '<meta (name="description"|property="og:[a-z:]+") content="[^"]*"'
curl -s -A "Mozilla/5.0 (iPhone) MicroMessenger" -o /dev/null -w "%{http_code} %{size_download}\n" "<封面绝对地址>"

交付话术固定包含：链接、一句话说明改了什么、以及发布应用的管理入口。

三条不能破的版式铁律

这三条都是真实返工换来的，改页面之前先读一遍：

① 限宽交给容器，铺满交给阴影。
.slide{max-width:1240px;margin:0 auto} 让内容区等于 1240 − 2×padding（大屏约 1099px）。需要整屏底色的屏用 box-shadow:0 0 0 100vw <色> 向外扩，绝不能把容器放开成 max-width:100% 再给子元素限宽——两种写法一个算内边距一个不算，必然差 2×padding，屏幕一宽就露。

② 不要给 .slide>* 批量加 margin:auto。
看起来能让内容居中，实际会把自身带 max-width 的元素单独居中（如标题 max-width:30ch），导致标题和卡片左边界错开一百多像素，整屏看着散。左对齐一致性永远优先于"居中"。

③ 数字动画与截图要错开。
data-count 的滚动动画约 1 秒，无头截图常常截到半路（显示 0.00 或只跑到几十万）。截图前把 data-count 换成静态文本，或跳过数字区域做版式验收。不要因为截图里数字不对就以为页面坏了。

数字与表格规则

• 金额：千分位 + 固定 2 位小数，font-variant-numeric:tabular-nums；负数用 − 不用 -。
• 序号列：纯整数原样输出（1、2、3），不要补成 1.00，居中、灰色。
• 占比列：一位小数 + %，同屏合计对齐 100.0%。
• 差异列：用颜色标注方向，但不要用红绿表示"好坏"，只表示"增减"。
• 长表允许超出屏高，min-height:100vh 会自动撑高，不要为了塞进一屏而缩字号。
• 每个数字旁边的小字注释用 .sub（12–13px、次级色），不要在表格里塞长句。

常见返工信号

演示模式（本技能的产物天生自带，不用另加）

assets/template.html 骨架里已经把演示能力做完了：圆点导航、顶部进度条、右下角屏标题与页码、
全屏按钮、键盘翻屏。不需要再注入任何东西，也不要用另外三个技能的注入器（会多出一套导航）。

投屏前只需确认两件事：① 每屏高度等于视口高（铁律 ①）；② 屏标题写进该屏的 data-title，
否则右侧页码旁会露出空白。

> 另外三个交付物（数据看板汇报 / 合同批注汇报 / 打印长图交付件）不是分屏骨架，
> 它们的演示模式由 inject_present.py 注入，键位与本技能一致，差别只在于：
> 长屏会先屏内翻一屏、A4 纸页会自动缩放成一纸一屏。

资源索引