把知识体系做成可点击的单文件站点：交互教学网页工作流

一、场景：知识地图比文档更适合复习

备考面试那阵，笔记攒了一堆 Markdown，但复习效率极低——文档是线性的，知识是网状的。于是把整套 AI 面试知识做成了一套单文件 HTML 站点：12 个页面、深色浅色双主题、全局搜索、点开任何概念都有解释。后来这套工作流固化成了技能，短剧创作台、知识梳理图都复用同一套方法。

二、设计约束：单文件、零依赖、双击即用

第一条约束就毙掉了绝大多数现代前端方案：整个站点是一个 HTML 文件，零外部依赖，双击就能开。意味着：

• 不引框架、不引 CDN（断网、拷走、发人都在）；
• 全部视觉由 HTML/CSS 卡片构成，不用图表库；
• 单个文件 90KB 左右，12 页全站 ~1.1MB。

这条约束听着原始，但「发给任何人任何设备都能开」的价值，在面试前夜比什么都实在。

三、交互模型：Tab + 弹窗 + 全局搜索

三层交互覆盖所有使用场景：

1. Tab：每页顶部模块切换（如「架构 / 术语 / 面试题 / 课程题 / 周知识点」五大区）；
2. 弹窗：点任何词条弹出详情，分四类——术语（glos）、面试题（iv）、课程题（qa）、周知识点（kp），弹窗数据全站统一索引；
3. 全局搜索：注入式共享搜索栏，索引覆盖全站条目（知识地图最终是 288 条 = 11 模块节点 + 135 术语 + 68 面试题 + 55 课程题 + 19 周知识点），支持键盘直达和跨页深链（#goto=tab:modal 格式）。

深链是这个设计的隐藏加分项：任何一条知识都可以生成一个 URL 直接分享——「你问的这个概念，点开看」。

四、工程纪律：改共享块 = 12 页同构刷新

单文件站最大的工程风险是「共享片段漂移」：搜索栏、导航、主题切换这些块在 12 个文件里各存一份，改一处漏一处，站就裂了。

纪律是这样几条：

• 共享片段同构注入：改索引、改搜索栏，一律脚本扫描 12 页同构刷新，不信手工；
• 全站改动走 Node 脚本，不信编辑工具回执（真的遇到过一次「回执成功但只落地一半」）；
• 三重校验才许交付：new Function 语法校验 + stub-DOM 运行时校验 + 全条目回归（288 条逐条能打开）；
• 新状态统一前缀：localStorage 键全部 wb- 前缀（wb-theme 主题、wb-arch 折叠状态），不污染宿主环境；
• CRLF 陷阱：HTML 全 CRLF，Node 字符串匹配注意 \r\n——这个坑让一次全局替换静默失败过。

五、从知识地图到创作台

这套工作流后来复用在两个地方，验证了它的通用性：

• 短剧创作台 Dashboard：同样的单文件+Tab+弹窗结构，展示和编辑创作文件，--detach 脱离会话常驻；
• 各类知识梳理图：把「面试复习」场景的流程，搬到任何需要「体系化呈现 + 按需深入」的场景。

判断标准很简单：当信息的「网状」特性超过「线性」特性时，就该从文档升级成站点。

六、小结

交互教学网页的三件套：单文件零依赖（可分发性）、Tab+弹窗+搜索（网状访问）、同构注入+三重校验（工程可靠）。知识不该躺在文档里，该是点得开的。下一篇收个尾——聊聊我是怎么把反复做的工作流沉淀成技能的。