Kevin204816 单页研究报告 HTML（编辑研究风）
把一次研究/调研的结果，变成一份读者 10 分钟内能读完、且读得下去的单页 HTML：
浅纸底、国际蓝、Mono 编号、细边框卡片、Chart.js 图表；零构建依赖，一个 .html 文件直接分享。
核心原则
- 结论先行：每一屏回答一个问题，标题就是结论，正文是证据。不允许"背景-过程-结论"式汇报顺序。
- 事实与推测分离：年报/官网/公告 = 事实，可直接写；市占率/口碑/预测 = 口径，必须标注来源或"公司口径/推测"。页脚固定有来源与免责区。
- 数字优先：能用 KPI 卡和图表说的，不用段落。每张图只表达一个观点，图题就是结论句。
- 信息密度高但克制：细边框、无阴影堆砌、无 emoji、无渐变装饰；深色卡（
.dark/.insight-box/.script-box）全篇不超过 3 处，只用于"必须让读者停下来读"的结论。 - 研究材料可以有犀利判断（如"决策者此刻在焦虑什么"），但措辞对事不对人。
工作流
- 明确受众与用途（自己看 / 老板看 / 会前准备），确定全篇唯一的核心问题。
- 收集事实并标注来源；信息不足时先检索，不得编造数字。区分：已核实事实 / 对方宣传口径 / 分析推测。
cp assets/template.html "<输出目录>/<主题>-<报告类型>-<YYYYMMDD>.html"，在模板上改，不要从零写 CSS。- 按下方"标准结构"取舍章节（不是每份报告都要全部组件，删掉用不上的 section）。
- 填完自查（见文末清单），然后
open文件确认渲染（macOS；其他系统提示用户打开），再向用户汇报。
标准结构（按需取舍）
- Hero：kicker（英文小标签）+ 大标题（可两行，第二行
<em>）+ 副标题（一句话定位，加粗关键词）+ meta 行（成立/总部/关键人物/来源等 4-7 项） - 一句话定位 + KPI 数字带：1 段定位文字 + 4-6 个
.kpi-cell；数字下滑/亏损用.neg - 洞察框（insight-box）：紧接 KPI，回答"所以呢"——这是全篇第一个深色停顿点
- 业务/现状拆解：
.grid-3卡片（板块）+.biz-table（产品/业务表）+ 图表 + 深色案例卡 - 痛点/问题：
.pain-grid五连格，每格"标题判断 + 证据"，关键数字用.hl标红 - 机会/方案/发现：分组卡片（如 A/B/C 三类），重点卡加
.reco+ 角标；可配气泡优先级矩阵图 - 路径/节奏：
.cut-timeline三刀式（近期快赢 → 中期 → 长期），每步写目标、动作、为什么这个顺序 - 证据弹药：
.case-table（同行案例要有硬数据列）+.policy-card（政策/预算，通用场景可换成"标准/规范/对标"） - 行动建议/话术（当报告是为某次沟通准备时）：
.script-box深色话术框 +.talk-steps节奏 + DO/DON'T 双卡 - Footer：来源（具体到文件/网站）+ 免责与可信度说明（哪些是事实、哪些未核实）+ 日期
设计规范（已固化在模板 CSS 里，不要改）
- 底色
#fafaf8（纸张色），正文墨色#0a0a0a，辅助文字#525252/#737373；细边框#e0e0e0/#d4d4d2 - 主色国际蓝
#002FA7；强调色通过<body data-theme="...">切换：default国际蓝（通用研究）｜fire消防橙#c2410c（安全/应急/能源等）｜green墨绿#15803d（制造/ESG）｜wine酒红#9f1239（消费/品牌）- 换主题只改 body 上一个属性，不要手改各组件颜色
- 语义色固定：风险/下滑
#dc2626，警告#f59e0b，正向#16a34a - 字体：标题/正文 Inter + PingFang SC；数字与编号 JetBrains Mono；标题用细字重 200-300 配大字号，这是"编辑感"的来源
- 编号：章节
01/02…mono 字距 0.2em；表格首列也是 mono 小编号 - 图表（Chart.js）：柱图单色不彩虹（正负值分红蓝/绿红）；tooltip 带中文单位；端点直接标数值；禁双轴；气泡矩阵必须画象限标签
- 图表加载有 jsdelivr → unpkg 双源 fallback，不要删那段 loader
- 响应式与 @media print 已内置；新增组件记得在 900px 断点里补单列降级
常用组件速查
模板中都有现成示例，复制改字即可：kpi-row / card(.dark) / biz-table / pain-grid /
opp-card(.reco)+难度圆点 / cut-timeline / case-table（含 num-cell 硬数据列）/
policy-card / script-box（话术）/ talk-steps / insight-box / chip-row。
需要模板里没有的组件时：先用现有组件组合；必须新写时遵守同一套 token（间距用 --sp-*、边框不用阴影、 标签用 mono 大写字距），并把可复用的新组件回补到模板里。
图表代码注意
- 柱状图背景色函数判断负值（模板已写好），财务图万元为单位、Y 轴回调成"亿"
- 气泡标签插件写法（注意运算符优先级，曾踩坑）：
直接
ctx.fillText(d.name, el.x, el.y - r - 4)用整名，不要写split(' ')[0] + ' ' + split(' ')[1] || name，名字没空格时会打出 "undefined" - 气泡坐标：x=落地难度（越大越难），y=业务价值；r=对读者/决策的重要性；三个 dataset 分组着色
完成前自查清单
- 标题/副标题是否一句话说清了结论？读者只看 hero 和各 insight 框能否拿走全部核心判断？
- 每个数字是否有出处？宣传口径与官方口径是否分别标注？页脚来源是否具体可追溯？
- 图表是否真的支持结论（不是凑数）？本地打开后图表是否渲染、标签有无 undefined/重叠？
- 深色块是否 ≤3 处？是否有 emoji/渐变/阴影等风格违规？主题色是否与主题匹配？
- 用不上的章节与
{{}}占位符、示例文案是否已删干净（模板自带示例内容不得残留）？ - 文件名是否含日期、是否已自动打开？
- 打印一份试试（Cmd+P）：深色块反色是否可读、是否有内容被截断。