初中英语词汇思维导图生成器
⚠️ CRITICAL
This skill MUST produce an HTML file as the final deliverable. Complete all steps from vocabulary extraction through HTML generation.
目的
将教材单元词汇按语义场自动分类，生成四分支交互式HTML思维导图，方便教师课堂展示和学生课后复习。
触发条件
- 用户提到"词汇思维导图""单词思维导图""vocabulary mind map"
- 用户要求按语义场给某单元词汇分类
- 用户说"像之前那个食物思维导图那样"
- 用户要求"按XX类整理词汇"
工作流程
步骤1：获取词汇数据
从教材或用户提供的词汇清单中提取该单元所有词汇。优先从教材提取：
- 路径：assets/data/{BOOK}英语教材文字稿_清爽编辑版.md
- 定位 ## Words and expressions 后的 ### Unit {N}
步骤2：按语义场分类
分析词汇清单，将词条归入 3−4 个语义场。分类原则：
- 主题名词类：与单元话题直接相关的名词（如食物单元→肉类/蔬菜/主食/调料）
- 动作动词类：描述行为的动词（如烹饪单元→beat/stir/slice）
- 描述形容词类：描述性质、状态的形容词（如delicious/plain/firm）
- 相关知识类：跨领域词汇（如食物单元→健康/医药/diet）
每个语义场下再细分 2−5 个子群，每个子群 2−6 个词。
步骤3：设定颜色方案
四个语义场使用 :root CSS 变量统一管理，每色三档（主色/浅底/边框）：
--c1:#d4604a;--c1t:#fcebe6;--c1b:#f0c5b8; /* 陶土赤 */
--c2:#c4922e;--c2t:#fbf4e3;--c2b:#e6d49c; /* 芥末金 */
--c3:#5e8a48;--c3t:#eef5e9;--c3b:#bdd4a8; /* 橄榄绿 */
--c4:#80547a;--c4t:#f6eff4;--c4b:#d2bfd8; /* 莓果紫 */
可根据单元主题微调色相，但保持三档结构不变。
步骤4：生成HTML文件
使用 assets/reference-example.html 作为模板，替换动态内容。
DOM 结构（必须严格保持此层级）：
.stage ← overflow-x:auto 横向滚动容器
.mm ← display:flex; min-width:max-content
svg.svg-layer ← 绝对定位曲线层，JS动态填充path
.ctr#ctr ← 中心节点（flex子项，flex-shrink:0）
.ic / .t1 / .t2 / .st
.bcol ← 分支列（flex子项，纵向堆叠4个分支）
.br.b1#b1 ← 分支1
.br-hd onclick="tg('b1')" ← 标题（可折叠）
.br-bd ← 分支体（折叠时 display:none）
.sg ← 子群
.sg-lb ← 子群标签
.wc ← 芯片容器
.chip data-w data-p data-pos data-m ← 单词芯片
.sg ...
.br.b2#b2 ... ← 分支2
.br.b3#b3 ... ← 分支3
.br.b4#b4 ... ← 分支4
需要替换的内容：
- 页面
<title>、.tb-title标题文字 .ctr中心节点的图标(emoji)、标题(.t1/.t2)、副标题(.st)- 四个
.br分支的data-c属性（对应颜色 hex 值） - 每个
.br-hd的标题文字和 emoji - 每个
.sg-lb的子群标签文字 - 每个
.chip的四个 data 属性：data-w(单词)data-p(音标)data-pos(词性)data-m(释义) #b1~#b4的 id 必须与tg('b1')等调用一致
不可修改的部分：
- CSS :root 变量结构（颜色值可微调，变量名不可改）
- .mm 的 display:flex + min-width:max-content 布局
- .stage 的 overflow-x:auto
- JS 中所有函数：draw() / tg() / expAll() / colAll() / setFS() / resetFS() / afs() / gs()
- SVG 曲线由 draw() 自动计算，无需手动设坐标
- @media print 规则
步骤5：验证
生成后必须在浏览器中检查以下项目：
- [ ] 中心节点 + 4 个分支，每个分支 2−5 个子群，每个子群 2−6 个词
- [ ] 每个单词芯片可点击，底部弹出 toast 显示音标+词性+释义（2.8秒消失）
- [ ] 分支标题可折叠/展开，折叠后
.br-bd隐藏，SVG 曲线重绘 - [ ] "展开全部"/"收起子节点"按钮正常工作
- [ ] SVG 贝塞尔曲线从中心节点右侧辐射到四个分支标题
- [ ] 字号控件 A⁻/A/A⁺ 正常，刷新页面后保持偏好（localStorage）
- [ ] 页面内容不被截断 — 容器宽度随内容自然撑开，超出视口时可横向滚动（不能出现右侧内容被裁切）
- [ ] 打印模式（
@media printA3 landscape + paged.js 自动分页+页码）可用，overflow:visible确保打印不截断
输出
生成单个 HTML 文件，保存在工作区根目录：
- 文件名：{BOOK}_U{UNIT}_{TOPIC_EN}_词汇思维导图.html
- 示例：7B_U3_Food_Matters_词汇思维导图.html、8A_U4_Digital_Life_词汇思维导图.html
生成后使用 present_files 展示给用户。
技术要点
- 布局核心：flexbox，
.mm为display:flex; align-items:center; gap:60px，中心节点.ctr+ 分支列.bcol水平排列 .bcol为display:flex; flex-direction:column; gap:24px，四个分支纵向堆叠- 绝对定位子元素不撑父容器，因此分支、子群、芯片全部用 flex 流式布局，容器自然撑开
.mm使用min-width:max-content确保内容不截断，.stage用overflow-x:auto; overflow-y:hidden提供横向滚动- SVG 贝塞尔曲线层
position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1覆盖在 flex 内容之上 - JS
draw()用getBoundingClientRect()动态计算中心节点右侧→分支标题左侧→子群标签左侧的坐标，绘制三阶贝塞尔曲线 - 折叠/展开后需
setTimeout(draw, 30)重绘曲线（等待 DOM 重排完成） - 字号控件通过 CSS 变量
--base-font-size（:root中声明，默认 16px）+localStorage持久化，5 档可调 [12,14,16,18,20] @media print设为 A3 landscape + paged.js 自动分页 +@bottom-center页码，.stage的overflow改为visible确保打印不截断- 字体：标题用 Fraunces（衬线），正文用 Noto Sans SC，均从 Google Fonts 加载
⚠️ 常见陷阱
-
不要用
position:absolute定位分支节点。 绝对定位的子元素不参与父容器宽度计算，会导致内容超出容器宽度时被截断而无法滚动。必须使用 flexbox 让容器自然撑开。 -
不要删除
--base-font-size变量。 字号控件 JS 依赖此变量，删除后 A⁻/A/A⁺ 按钮失效。 -
分支 id 必须与
tg()调用一致。#b1对应tg('b1')，改了 id 不改 onclick 会导致折叠功能失效。 -
.chip的四个 data 属性缺一不可。data-w/data-p/data-pos/data-m分别对应单词、音标、词性、释义，toast 弹窗依赖这四个属性。
