新拟态数据图表化 PPT 生成器
模仿源 PPT《新拟态风格可视化数据看板》的视觉语言，叠加 ColorOS 16 光场设计与 OPPO 流体云交互，把任意数据一键变成图表化演示文稿。输出自包含 HTML（浏览器打开即看，可打印导出 PDF）。
作者：飞哥
设计系统（必须严格遵循，详见 references/style_tokens.md）
> 源 PPT 已逐元素反向工程，以下为还原度根基。任何卡片的 background 必须等于基底色 --base，否则双阴影会"漂浮"而非"长"在背景上。
- 基底/表面同色：
--base: #E1E9F1（背景与卡片填充同一色，新拟态灵魂） - 双阴影签名（100% 还原，直接照搬）：
- 凸起：外暗
6px 6px 12px #C2CDDA+ 外亮-6px -6px 12px #FFFFFF - 凹陷：
inset 7px 7px 14px #C2CDDA+inset -7px -7px 14px #FFFFFF - 强调渐变（图表/高亮主色，4 段）：
#6E376E → #CB4B7C → #FE7088 → #FE9C80 - 文本：标题
#2E3A4F，正文#7787A2（源 PPT 实测值） - 圆角：卡片 26px（ColorOS 中圆角偏大），胶囊 999px
- 动效曲线：流体展开
cubic-bezier(0.22,1,0.36,1)；水滴击湖弹入cubic-bezier(0.34,1.56,0.64,1)；流体云回弹cubic-bezier(0.68,-0.55,0.27,1.55) - 流体云交互：顶部胶囊导航（光点随页形变滑动 + 毛玻璃
backdrop-filter）、卡片 hover/active 跟手抬起、页间一镜到底转场
完整令牌（阴影签名表、暗色变量、排版尺度）见 references/style_tokens.md。
图表引擎（详见 references/chart_engine.md）
支持 18 类图表（全部 neo 化 + 流体曲线 + 自动文案），并可 按数据形态自动匹配：
| 类型 | 数据形态 | 适用 |
|---|---|---|
bar 柱状 |
categories + 单系列 | 对比/排序 |
groupedBar 分组柱状 |
categories + 多系列 | 多组对比 |
stackedBar 堆叠柱状 |
categories + 多系列 | 构成堆叠 |
line 折线 |
x(时间) + 单系列 | 趋势 |
area 面积 |
x(时间) + 单系列 | 累计体量 |
multiLine 多线 |
x + 多系列 | 多指标对比 |
donut 环形 |
segments | 占比(带中心总量) |
pie 饼图 |
segments | 占比(经典) |
stats KPI |
items(num/label/trend) | 核心指标 |
table 表格 |
head + rows | 明细 |
radar 雷达 |
axes + 多系列(0–100) | 多维能力对比 |
hbar 条形 |
categories + 单系列 | 横向排名 |
funnel 漏斗 |
stages(label/value) | 转化/流程收敛 |
gauge 仪表盘 |
value(0–100) | 单指标达成率 |
heatmap 热力图 |
matrix + xLabels + yLabels | 二维交叉强度 |
scatter 散点 |
points(x,y) | 两变量相关性 |
bubble 气泡 |
bubbles(x,y,s) | 三变量分布 |
waterfall 瀑布 |
steps(label/value/total) | 逐步增减拆解 |
treemap 矩形树图 |
items(label/value) | 层级占比 |
> 自动匹配：将页的 type 设为 "auto"（或省略），build.py 的 infer_type() 会依据数据字段推断最合适的图表：
> segments→donut、rows→table、items(含num)→stats、items(含value)→treemap、axes→radar、stages→funnel、matrix→heatmap、bubbles→bubble、points→scatter、steps→waterfall、value→gauge；有 series 时多系列+时间轴→multiLine、多系列→groupedBar、单系列+时间轴→line、单系列→bar。
具体 SVG/CSS 配方、导航与自动匹配算法见 references/chart_engine.md。
工作流（触发"生成新拟态PPT风格的PPT"后执行）
- 收数据：向用户索取数据。接受三种输入——① 直接粘贴表格/CSV/JSON；② 口头描述指标；③ 上传数据文件。若用户只说触发词未给数据，先用示例数据生成样稿让用户确认风格，再替换。
- 定图表：按数据形态选 type——趋势→
line、占比→donut、对比→bar、指标→stats、明细→table；封面用cover、结尾用end。 - 组装 DATA：把用户数据整理成下方 DATA 规格（JSON）。
- 生成（二选一）：
- 推荐·确定性：把 DATA 写入spec.json，运行python scripts/build.py --data spec.json --out 看板.html（校验通过才输出，最稳）。
- 手改：复制assets/template.html，仅修改其中的const DATA = {...}后另存。 - 校验 & 交付：浏览器预览逐页检查（阴影/渐变/导航/不溢出），交付 HTML 文件并说明可 Ctrl+P 导出 PDF。
DATA 规格（JSON）
{
"title": "2025 业务经营分析",
"subtitle": "副标题",
"author": "飞哥",
"date": "2026.07",
"slides": [
{"type":"cover"},
{"type":"stats","title":"核心指标","items":[{"num":"1,286","label":"年营收","trend":"▲ +28.6%"}]},
{"type":"bar","title":"各季度营收","tag":"2025","categories":["Q1","Q2","Q3","Q4"],
"series":[{"name":"营收","data":[248,312,386,340]}]},
{"type":"line","title":"用户趋势","tag":"12个月","x":["1".."12"],"series":[{"name":"MAU","data":[...]}]},
{"type":"donut","title":"区域占比","total":"1,286",
"segments":[{"label":"华东","value":45,"color":"#6E376E"},...]},
{"type":"table","title":"明细","head":["区域","营收","占比"],"rows":[["华东","582","45%"]]},
{"type":"end"}
]
}
> 合法 type：cover / end / agenda / section / auto + 上述 18 类图表。build.py 会校验 type 与结构，失败会报错而非产出残缺文件；type:"auto" 或省略时由 infer_type() 自动推断。
>
> 内容字段（确保讲解饱满、图文呼应，未填则由引擎自动生成）：
> - source（顶层字符串）：全局数据来源，显示在每页脚注，如 "行业研究综合估算（演示用）"。
> - desc（每页字符串）：标题下方一句话描述；缺省由 defaultDesc(type) 兜底。
> - question（每页字符串）：标题下「我们要回答的是…」引导句，强化汇报逻辑。
> - narrative（每页字符串）：「图表解读」卡的长文本（2–3 句深度解读）；缺省由 autoNarrative(s) 基于数据生成。
> - insight（每页字符串）：「洞察」卡结论；缺省由 autoInsight(s) 基于数据自动计算（峰值/增长率/占比/转化等）。
> - points（每页字符串数组）：「关键要点」3 条；缺省由 keyPoints(s) 提炼。
> - kicker（每页字符串）：页头「章节·子题」模块标签（如 "02 · 市场规模"），仿正式商务汇报的栏目框架，强化信息架构；缺省由 typeCN(type) 兜底为图表中文类型名。
> - takeaway（每页字符串）：底部「结论」渐变条；缺省由 autoTakeaway(s) 生成。
> - notes（每页字符串）：演讲备注，按 N 键或点「📝 备注」浮层查看，便于讲解。
> - agenda 页专用：title + items:[{t:"标题",d:"说明"}]，生成带序号的议程列表。
> - section 页专用：kicker(如"PART 01") / num / title / desc，生成章节分隔页。
> - 页面统一骨架：标题+描述(+引导问句) → 图表主区（左）/ 洞察卡+解读卡+要点卡（右）→ 数据来源脚注+页码；stats 页用全宽宫格 + 解读条 + 结论条。
{"type":"auto","categories":["A","B","C"],"series":[{"name":"v","data":[1,2,3]}]}
{"type":"section","kicker":"PART 02","num":"02","title":"市场格局","desc":"国内外竞争与国产替代"}
{"type":"agenda","title":"汇报议程","items":[{"t":"核心指标","d":"四维速览"},{"t":"市场趋势","d":"双线增长"}]}
{"type":"stats","title":"核心指标","narrative":"…","takeaway":"…","notes":"讲解提示…",
"items":[{"num":"85","label":"规模(亿)","trend":"▲ +13%"}]}
质量清单（直指 SkillHub 5 分）
- 风格还原度：所有卡片
background == --base；双阴影签名完全一致；强调色用 4 段渐变；圆角 26px（ColorOS 中圆角）。 - 内容饱满度：每页含「标题+描述 / 图表主区 / 洞察卡+关键要点 / 数据来源脚注」四层信息；未提供
desc/insight时由引擎自动生成洞察与要点，杜绝空洞单薄。 - 布局合理性：统一
grid三行骨架 + 两栏 flex 主体；左侧独立目录栏（TOC rail）承载翻页导航，绝不遮挡标题（已修复旧版顶部悬浮条与标题重合的问题）；卡片统一新拟态阴影、间距对齐，无重叠/重影；图表含坐标轴网格与基线参考。 - 字体清晰度：明确字号层级（
clamp自适应、CSS 变量化）、字重分级（标题 800 / 数字 800 / 正文 500 / 注释 400）、专用数字字体--f-num；页头新增「章节·子题」模块标签（kicker，仿商务汇报栏目框架）强化信息架构；中文行高 1.78、标题浮雕字影，标题/正文/标签层级分明、阅读舒适。「洞察」卡以左侧渐变强调条 + 渐变标题突出核心结论。 - 内容饱满度（讲解充分）：每页含「标题+描述(+引导问句) / 图表主区 / 洞察卡+图表解读卡(长文本)+关键要点卡 / 数据来源脚注+页码」多层信息；stats 页另含解读条+结论渐变条；未提供
desc/narrative/insight/points/takeaway时由引擎自动生成，杜绝空洞。 - 逻辑与图文呼应：每页「洞察/解读/要点/结论」文字均由数据计算生成，与图表相互印证；要点卡提炼 3 条关键结论，结构清晰。
- 图表丰富度与自动匹配：内置 18 类常见图表；
type:"auto"或省略时按数据形态自动匹配最合适的图表类型，降低使用门槛。 - 传统 PPT 展示形态：16:9 满屏单页、左侧目录栏、底部进度条 + 上/下页按钮、页码（01/18）、章节页(section)与议程页(agenda)、演讲备注浮层（N 键/按钮），便于讲解与汇报；
Ctrl+P可导出 PDF。 - v3.2 关键修复（封面/结尾/议程三页）：① 封面·章节·议程居中算法改为
position:absolute;inset:0 + display:flex;flex-direction:column;justify-content/align-items:center + padding:0，彻底铺满 16:9 画布并绝对居中，不再受.slide内边距与栅格影响；② 结尾页渲染流程修复——show()每次切换时重播封面/章节/议程/结尾的入场动画（node.style.animation重置），杜绝一次性动画冻结导致结尾页空白；③ 议程浅灰占位过滤——议程.d说明由浅灰--text-muted改为可读--text，并新增isPlaceholder()过滤（占位/待补/暂无/…/空值），删除所有浅灰残留、仅保留有效议程条目。 - 动效表现力：加载动画、页面 stagger 入场、柱状/条形生长、折线描边、环形/饼扫绘、雷达多边形展开、漏斗/瀑布收敛、热力图与散点 staggered 入场、数字滚动 count-up、hover 跟手反馈、流体云光点（左侧目录栏内）滑动；支持键盘←→/空格、触摸滑动、滚轮翻页。
- 生成稳定性：经
scripts/build.py校验（type/结构合法）才输出；内嵌 JS 已node --check通过；无未闭合标签。 - 文档完整性：本 SKILL.md +
references/style_tokens.md+references/chart_engine.md+assets/template.html+scripts/build.py五件齐全；触发词在 frontmattertriggers精确声明。
文件索引
references/style_tokens.md— 精确风格令牌（阴影签名、光场、流体云框架、暗色变量）references/chart_engine.md— 18 类图表 SVG/CSS 配方 + 流体云导航代码 + 自动匹配算法 + v3 实现要点assets/template.html— 完整可运行样例/基底（内嵌 JS 渲染引擎）scripts/build.py— 确定性「数据 JSON → HTML」生成器（--data/--sample）
