文档转互动网页

要解决的问题

在团队协作或知识管理场景中，本地 .docx 或 .md 文件常因缺乏交互性而难以快速传递信息。用户需要反复打开原始文件、手动搜索内容，甚至依赖第三方工具才能实现目录跳转和关键词过滤。这种低效的阅读方式在处理长文档（如技术手册、产品说明书）时尤为明显。

核心能力与实现步骤

本技能通过自包含单文件HTML解决上述问题，具体流程分三步：

1. 文件解析：

- .md 文件直接渲染为HTML，自动提取 h1~h6 标题生成目录树；
- .docx 文件通过 python-docx 解析段落样式（如「标题 1」对应层级）、表格和图片，图片转为base64内联。

1. 模板套用：

- 顶部固定搜索框：纯JS实现关键词过滤与高亮；
- 左侧目录树：点击平滑滚动至对应章节；
- 响应式设计：窄屏下目录自动折叠，确保移动端可读性。

1. 自包含验证：

- 所有CSS/JS内联至 <style> 和 <script>；
- 图片以base64嵌入，禁止外部资源引用，确保单文件可独立部署。

适用边界与注意点

• 硬性限制：禁止外链CSS/JS/图片（G3自包含规则），否则部署后页面可能无法加载资源；
• 性能优化：超过2000段的文档建议分页或虚拟滚动，避免浏览器卡顿；
• 语义保留：仅调整排版样式，不修改原文内容；
• 部署联动：生成的HTML可直接对接「文档转公网互动页」技能实现公网访问。