如何做一个知识库架构导航 HTML（保姆级）

先弄懂它是什么

一个 单文件 HTML：页面结构、样式、数据全部内嵌在一个 .html 里。双击本地文件就能打开，拷给别人也能开，挂到网站上也是原样跑。它和 PPT 架构图的区别：能点、能切换、数据好更新。

第 1 步：让 AI 生成骨架（发这段话）

帮我做一个「知识库架构导航」单文件 HTML，要求：
①三个视图：总览（全库地图）、公司机关（各岗位卡片）、各事业部（每厂一块，含车间明细）；
②数据全部内嵌在文件里的 js 数组中，禁止用 fetch 读外部 json——
  必须保证双击本地文件就能打开；
③深色大屏风格；卡片可点击：点事业部进入明细，有点击返回；
④顶部显示统计数字（几个部门、几个岗位、几个在运行）；
⑤零外部依赖：动画库要么不用，要么把库文件内容直接内嵌进 HTML，
  不许引用任何 CDN 网址。
数据我下一步贴给你。

第 2 步：喂数据

把你的组织结构贴给 AI：部门叫什么、每个岗位管什么、运行频率、在岗状态。让它填进数据数组。以后组织变了，也是改这份数组——结构不用动。

第 3 步：三关验收

第 4 步：放进网站或单独分发

• 进网站：拷进网站的 gallery 文件夹，图库页加一个入口链接即可；
• 单独分发：它就一个文件，微信里直接发，对方双击就能看。

三个坑（都是真实踩过的）

• 数据用 fetch 读外部 json → 本地双击会被浏览器安全策略拦住，页面空白。数据必须内嵌；
• 动画库走 CDN 网址 → 断网或网络不好时动效失效甚至脚本报错。要么不用动画，要么把库内容内嵌进文件；
• 数据大了怕文件大 → 几百 KB 到 1MB 都正常，单文件方案本来就该这么大，别为了"小"把数据外挂出去。