企业官网建设流程全解析

Tags：Pythonaiohttp开源项目AI工具前端工程全栈工具分享

一、痛点：AI 时代的文档散落病

（对比传统文档管理 vs AI 生成文档的区别，说明为什么 VSCode/Notion 都不合适）

二、技术选型：为什么是单 Python 文件 + vanilla JS

• 选 aiohttp 而不是 FastAPI：单进程够用、冷启动快、无 pydantic 开销
• 选 vanilla JS 而不是 React：这是工作台不是产品，零构建 = 零心智负担
• 选 iframe 而不是 SPA 路由：让被编辑 HTML 保持完整上下文（包括它的 JS 动画）

（附 server.py 的三段式结构图）

三、核心架构三段式

1. aiohttp 后端：路径安全、目录缓存、快照清理
2. saver-runtime.js 注入层：检测原生编辑器、MutationObserver 脏状态监听
3. 前端 app.js：目录树、iframe 承载、三选一对话框

（每段贴 20-50 行关键代码 + 解释）

四、5 条反 Bug 铁律（核心价值）

（把 ITERATION-SOP.md 那 5 条逐条展开，每条配一个真实 Bug 案例）

• 铁律 1 真实浏览器演练 —— 举例：v1.11.10 三 Tab 显示空白
• 铁律 2 守卫表达式 —— 举例：window.sidebarTabsCtl 永远 false
• 铁律 3 CSS vs inline —— 举例：.active 干不过 display:none
• 铁律 4 rAF —— 举例：scrollToPath 在旧布局上算位置
• 铁律 5 用户视角 —— 举例：CHANGELOG 写得漂亮不等于能用

五、Quick Start & 下一步

Quick Start 3 行命令
v1.12 Roadmap（列几条计划中功能）

仓库地址

https://github.com/louisecxqiu-glitch/html-doc-center

⭐ 喜欢就 star，Issue / PR 都欢迎。
配套深度文章在「一深思AI」同步更新。