HTML Report — 可视化报告生成器

支持两种模式，根据场景自动选择：

模式选择规则

Simple 模式：快速响应式报告

技术栈

• 布局: Tailwind CSS (CDN)
• 图表: Mermaid.js (CDN)
• 输出: 单个 .html 文件，零依赖

核心组件

1. 执行摘要区 — 一段话总结报告核心发现
2. 核心发现卡片网格 — 响应式网格布局，带强度徽章
3. Mermaid 图表 — 架构图/流程图/时序图/类图
4. Before/After 对比 — 红绿双栏对比
5. 推荐列表 — 带 Strong/Worth/Speculative 徽章

强度徽章系统

Mermaid 图表类型

适用场景

模板文件

详见 templates/simple/base.html

Complex 模式：多页固定尺寸报告

技术栈

• 画布: 1017×720px 固定尺寸
• 四区结构: Header 72px + Content 580px + Summary 48px + Footer 20px
• 图表: 13+ SVG 图表（折线/柱状/雷达/甘特/圆环/散点/流程/树状/热力/瀑布/双轴等）
• 配色: 7套主题配色
• 截图: Chrome/Puppeteer

三条铁律

1. 画布锁定 1017×720px — 不得溢出
2. 四区高度精确求和 = 720px — 72+580+48+20
3. 不得使用 LibreOffice 渲染 — 必须使用 Chrome/Puppeteer 截图

10 个专项文件

图表选型速查

报告结构

P00  封面页（Cover）        → 07-special-pages.md CV变体
P01  目录页（可选）          → 07-special-pages.md TC变体
──── 章节分隔（可选）        → 07-special-pages.md CD变体
P01+ 内容页 × N            → 主流程
──── 章节分隔（可选）        → 07-special-pages.md CD变体
PN   结尾页（End）          → 07-special-pages.md EP变体

生成流程

阶段一：规划
├─ 读 02-design-system.md → 自创 Tc 专属模板
├─ 读 03-layout.md → 了解 Lc 自创布局机制
├─ 读 06-workflow.md → 拆解主题→12维度，规划每页三元素
└─ 读 07-special-pages.md → 确认是否需要封面/目录/章节/结尾页

阶段二：逐页生成
每页生成时：
├─ 读 01-canvas.md → 确定四区 CSS 骨架
├─ 读 02-design-system.md → 应用 Tc 模板的背景/卡片/页眉 CSS
├─ 读 03-layout.md → 自创本页 Lc 布局
├─ 读 04-color-font.md → 选配色方案 + 字体
├─ 读 05-content.md → 填内容，选基础SVG图表
├─ 读 08-svg-extended.md → 需要复杂图表时（可选）
├─ 读 09-components.md → 选择页眉变体/摘要栏/卡片变体
└─ 读 10-diagram-types.md → 用户要求业务图谱时（可选）

阶段三：验证与收尾
└─ 读 06-workflow.md → 运行截图验证，对照质量清单

质量清单

• 每页尺寸严格 1017×720px
• 四区高度求和 = 720px（72+580+48+20）
• 无内容溢出或截断
• 配色方案一致（使用同一主题变量）
• 摘要栏有实质内容（非空）
• 图表类型与数据特征匹配
• 中文字体正确渲染
• 页码连续且正确

文件结构

html-report/
├── SKILL.md                          # 本文档
├── templates/
│   ├── simple/
│   │   └── base.html                 # Simple 模式模板（Tailwind + Mermaid）
│   └── complex/
│       ├── 01-canvas.md              # 画布尺寸规范
│       ├── 02-design-system.md       # Tc 模板流程
│       ├── 03-layout.md              # Lc 布局流程
│       ├── 04-color-font.md          # 7套配色 + 字体
│       ├── 05-content.md             # 内容密度 + 基础SVG图表
│       ├── 06-workflow.md            # 生成流程 + 质量清单
│       ├── 07-special-pages.md       # 封面/目录/章节/结尾页
│       ├── 08-svg-extended.md        # 扩展SVG图表库
│       ├── 09-components.md          # 页眉/摘要栏/卡片变体
│       └── 10-diagram-types.md       # 业务图谱库

错误处理与降级策略

Simple 模式

Complex 模式

注意事项

• Simple 模式：报告必须是单个自包含 HTML 文件，所有样式通过 Tailwind CDN 内联
• Complex 模式：每页严格 1017×720px，四区高度精确求和
• 颜色语义一致：红色=问题/风险，绿色=改进/健康，黄色=警告/待观察
• 响应式布局（Simple 模式）：确保移动端可读
• 中文字体：Complex 模式必须指定 Microsoft YaHei

版本历史

Version 2.0.0 — 合并 html-report + html-report-generator，双模式输出