白色版 · 2026 HTML 汇报报告生成器
让 AI 生成一眼高级的 Apple 白玻璃质感汇报报告。三种典型场景全覆盖：投资决策报告（结论先行 + KPI 数字滚动 + 图表直观点位）、演示大屏（hero 玻璃面板 + 矩阵表 + media-live 点击激活动态图）、Keynote 风格汇报页（每屏焦点唯一、标题即结论、留白克制）。
不需要你懂 CSS，也不需要从零描述风格——所有视觉规格已固化为可直接引用的样式资产，AI 拿到内容就能产出排版整齐、动效到位、移动端自适应的单文件 HTML，双击即开、即打印即美观。
设计铁律（不可违反）
- 配色唯一定稿：Apple 白
#f5f5f7底 + 墨黑#1d1d1f+ 玻璃质感。层级靠字重、留白、材质表达。 - 禁止出现多主题配色（blue/graphite/terracotta/brass 等色系切换方案已废弃）。禁止深色背景、禁止主题切换器。
- 字体降级链：
SF Pro SC → PingFang SC → Microsoft YaHei UI → Noto Sans SC。 - h1 规格：
font-weight: 760; letter-spacing: -.055em; line-height: .98; font-size: clamp(42px, 7.2vw, 86px)。 - 玻璃材质：
rgba(255,255,255,.56)背景 +backdrop-filter: blur(28px) saturate(108%)+ 非对称边缘高光（多层 inset 阴影：inset 0 1px 0 rgba(255,255,255,.94)顶部 +inset 1px 0 0 rgba(255,255,255,.56)侧向 +inset 0 -1px 0 rgba(0,0,0,.025)底部）。 - 渐变描边：
mask-composite: xor+linear-gradient(135deg, ...)1px 描边。 - 每屏焦点唯一：标题即结论（陈述句），禁"分析与展望"式空题。
- 图表规范：直接标注取代图例、涨红跌绿（中国市场惯例）、图表色走灰阶序列。
资产使用
| 文件 | 用途 |
|---|---|
assets/tokens.css |
设计 token（色阶/字体/间距/圆角/阴影），直接 <link> 引入或内联到报告 <style> |
assets/components.css |
组件样式（玻璃条/KPI 卡/hero/media-live/矩阵表/reveal 动效），同上 |
assets/reference-report.html |
完整参考实现（6 章结构），作为版式与 JS 行为的唯一权威范例 |
生成流程
- 复制骨架：以
assets/reference-report.html为骨架，保留其<style>（tokens + components 已内联）与<script>（动画系统）。 - 替换内容：按目标主题重写各章节文案。章节结构：结论章（hero + KPI stats + conclusions）→ 主体分析章（每章一个
.glass.section）→ 验收/展望章。 - 数据可视化：SVG 图表直接内联，数值标注在图上；KPI 数字用
data-count属性驱动 countUp 动画。 - 图片排版：
.media-live卡片点击激活动态（静帧展示，点击才加载视频/GIF，零预载）。 - 保持间距体系：卡片间 22px / 组件组间 32-36px / 移动端(≤680px) 10px 卡间 + 22px 组间 + 26px 组后。禁止让父容器玻璃底边与子卡顶部高光紧贴（曾出现"贯穿亮带"缺陷，靠 margin-top ≥32px 断开）。
必须保留的 JS 行为（防缺陷）
countUp()动画必须带dataset.counted标志防竞态（forceShowAll 强制渲染后再触发动画会互相覆盖）。IntersectionObserver驱动.reveal之外，必须有forceShowAll()+setTimeout(500)+load事件双兜底（全页截图/headless 环境不触发 observer）。- SVG 图表路径动画
stroke-dashoffset需在 reveal 时同步触发。
验证流程（生成后必做）
- 启动本地静态服务器（如
python -m http.server 8660）。 - 用 agent-browser 截图验证（确保 node 已在 PATH 中）：
-agent-browser open <url>→wait --load networkidle→screenshot "body" <path>（Windows 下保存路径用C:/...格式）。
- 桌面端 1440 宽 + 移动端 390 宽各一张。 - 检查项：KPI 数字已渲染（非 0）、图表已绘制、卡片间无粘连亮带、章节分隔清晰。
- 发现丑/对不齐直接修复后重新截图，不要交付未验证的报告。
输出要求
- 单文件 HTML（CSS/JS 全内联，双击可开），命名如
xxx-report.html存入用户指定目录。 - 打印样式（
@media print）保留：A4、白底、玻璃转 1px 边框。 - 移动端响应式（900px / 680px 断点）保留。
