Markdown → HTML

将 Markdown 转换为自包含 HTML 页面。你的工作是提取数据 + 选组件 + 调函数，不是拼 HTML。

步骤

时间：开始前先执行 Get-Date -Format 'yyyyMMdd-HHmm' 获取真实时间，后续文件名和页脚统一使用该值。

1. 提取数据

扫描 Markdown，识别可组件化的数据模式：数值对比、分步说明、正反对立、维度评分、层级结构、流程图表、代码片段、关键指标、洞察结论。

2. 选组件 & 调函数

读取 <skill-dir>/components.js 对照 when 字段选组件。渲染用 R.xxx()，不自创 HTML。

数值对比  → blockbars  → R.blockbars([{name, pct}])
分步说明  → steps      → R.steps([{title, description}])
正反对立  → signal     → R.signal({pos, neg})
维度评分  → radar/hbar → buildChart("k",id,()=>({...}),true)
层级结构  → filetree   → R.filetree({name,type,children})
占比分配  → donut      → buildChart("k",id,()=>({...}),true)
分类对比  → vbar/hbar  → buildChart("k",id,()=>({...}),true)
流程/架构 → mermaid → <div class="dpnl"><div class="mermaid">...</div></div><p class="dcap">标题</p>
代码片段  → codeblock   → R.codeblock({code, lang})
洞察要点  → takeaways  → R.takeaways([{type,prefix,text}])
知识分层  → layers     → R.layers([{tier,label,title,desc}])
能力网格  → ability    → R.ability([{icon,title,desc}])
压缩比例  → compress   → R.compress([{label,level,pct}])
展开详情  → drilldown  → R.drilldown([{amount,desc,body}])
行内进度条→ inlinebar  → R.inlinebar(value, max, color)

3. 组装 HTML

先完成步骤 1-2 确定组件列表，再按以下顺序执行。每步 Edit 后 Grep 确认落盘，old_string 只匹配要替换的几行，不跨标签。

复制骨架 — 读取 <skill-dir>/skeleton.html，复制为 源文件名-export-YYYYMMDD-HHmm.html（HHmm 为 24h 时分），后续所有 Edit 在此文件上操作
注入 CSS — 收集已选组件的 css，合并填入 。校验：每个组件的 CSS 首个 class（.tk、.sl 等）必须出现在 <style id="component-styles"> 中
填头部 — 替换 、、、、
写章节 — 每章 <section id="ch-N" class="chapter reveal">，组件位置放 <div id="comp-xxx"></div> 占位，mermaid 直接写 HTML 结构。保留 TOC 占位 
填页脚 & TOC — 替换 。<hr> 后写结论段落，末尾加 <p style="margin-top:16px;font-size:11px;color:var(--g500)">生成于 YYYY-MM-DD HH:mm</p>。 替换为静态 <a href="#ch-N"> 列表
依赖脚本 — 选中 radar/donut/hbar/vbar → 取消 echarts CDN 注释；含 mermaid → 保留 mermaid CDN
注入组件调用 — 替换  整行（含注释标记）为 R.xxx() 调用

4. 报告

告诉用户文件已生成，给出路径。

规则

内容互斥：凡是提取用于 R.xxx() 或 buildChart 的数据，其原始 Markdown 文本必须从 HTML 纯文本流中彻底删除。同一知识点在页面上有且仅能出现一次（要么是组件，要么是文本，绝不并存）。
页脚受控：#page-footer（含结语、总结区）只能使用原生标签（如 <p>, <ul>）。严禁在页脚内或通过挂载调用任何 JS 动态组件。
单次注入：所有 R.xxx() 脚本调用必须统一集中填入最后的 ``，正文 <section> 内严禁零散嵌入 <script>。JS 参数外层用单引号，内部中文双引号替换为 「」。
组件判定：纯链接、参考资料、名词/工具清单必须用原生<ul>/<ol>，其余符合when模式才用组件。
样式规范：每章必用 <section id="ch-N" class="chapter reveal">；颜色强制使用 CSS 变量（如 --clay），严禁硬编码。

文件

| 文件 | 用途 | | ------------------------ | -------------------------------------------------------- | | skeleton.html | HTML 骨架 + 主题系统 + R.xxx() 渲染函数库 + 图表初始化 | | components.js | 组件注册表，16 个组件的 CSS + 使用场景 |