一、概述
1.1 文件概览
SeaChange·InkDoc1.0 是一个纯前端HTML模板，主打简约黑白风格，内置丰富交互：
- 顶部栏：项目标识、标题标签、移动端菜单、实时搜索框。
- 左侧导航：可折叠章节，支持鼠标拖拽调整宽度（桌面），移动端侧滑抽屉。
- 右侧内容区：报告正文容器，支持图文、表格、ECharts 图表。
- 浮动缩放按钮：1x / 2x 全局缩放 + 回到顶部按钮（移动端隐藏）。
- 交互脚本：搜索高亮、折叠、拖拽、移动端适配、图表初始化。
二、结构解剖
2.1 HTML 骨架
标准 HTML5 文档，<head> 引入 mark.js 和 ECharts CDN，所有样式内联于 <style>。<body> 分为 .top-bar、.main-layout（内含 .left-nav 和 .right-content）及 .float-buttons。
2.2 样式关键点
使用 CSS 变量 --base-size 驱动全局缩放。移动端通过媒体查询重排，左侧导航变为抽屉式。拖拽手柄 .resize-handle 实现宽度调整。所有间距、字体均基于 calc(... * var(--base-size))。
2.3 JavaScript 模块
脚本包含：导航折叠、移动端菜单、拖拽逻辑、基于 mark.js 的实时搜索与高亮、ECharts 图表初始化、缩放按钮控制、回到顶部功能。
三、使用指南
3.1 直接打开
下载 index.html，用 Chrome/Firefox/Edge/Safari等等打开即可，无需构建步骤。
3.2 交互功能介绍
- 折叠导航：点击章节标题展开/收起子项。
- 跳转：点击左侧链接平滑滚动到对应锚点。
- 搜索：输入关键词实时下拉显示匹配段落，点击后全文高亮并跳转。
- 宽度调整（桌面）：拖拽左侧栏右边缘改变宽度。
- 移动端菜单：点击 ☰ 打开侧边栏，点击遮罩关闭。
- 全局缩放：右下角 1x/2x 按钮调整整体大小。
- 回到顶部：点击 ↑ 按钮快速返回右侧内容顶部。
- 图表交互：ECharts 图表支持 tooltip、图例切换。
3.3 搜索细节
搜索范围：<h2>、<h3>、<h4>、<p>、<li>、<td>。忽略大小写，下拉列表展示匹配文本片段并高亮关键词。点击结果后页面滚动到元素，关键词被 <mark> 包裹并闪烁黄色背景。
四、部署指南
4.1 GitHub Pages
- 新建仓库，上传
index.html。 - 进入 Settings → Pages，选择 main 分支保存。
- 访问
https://<用户名>.github.io/<仓库名>。
4.2 其他平台
Vercel/Netlify：直接拖拽上传；阿里云 OSS/腾讯云 COS：开启静态网站；本地服务器：python -m http.server。
4.3 依赖说明
依赖 mark.js 和 ECharts，均通过 CDN 引入。可下载到本地修改路径以离线使用。
五、自定义修改
5.1 替换内容
正文位于 <div id="mainContent"> 内，直接替换文字、表格、图片。注意每个小标题的 id 需与左侧导航 href 对应。
5.2 修改图表
每个图表容器有唯一 id，在 <script> 中找到对应 initChart 调用，修改 option 即可。下图为示例饼图，你可以修改数据：
示例饼图：各章节关注度（可修改）
// 修改饼图数据示例
{
series: [{
data: [
{ name: '结构', value: 40 },
{ name: '使用', value: 30 },
{ name: '自定义', value: 30 }
]
}]
}5.3 调整样式
修改 :root 中的 --base-size 默认值，或覆盖颜色变量。移动端断点调整 @media (max-width: 768px) 的像素值。
5.4 修改导航
左侧导航结构位于 .left-nav 内，每个 .nav-section 对应一个折叠块，修改 <a href="#..."> 的文本与链接即可。
5.5 扩展搜索范围
修改 getSearchableElements 函数中的 querySelectorAll 参数，例如加入 'li' 或 'td'。
六、兼容性与注意事项
6.1 浏览器支持
现代桌面浏览器最新版，移动端 iOS Safari / Android Chrome。不支持 IE11（使用了 CSS 变量和 ES6）。
6.2 依赖库
mark.js v8.11.1，ECharts v5。若 CDN 被屏蔽，请替换为备用地址。
6.3 移动端注意
- 缩放按钮和回到顶部按钮在移动端隐藏（由浏览器双指缩放替代）。
- 拖拽功能禁用，导航通过侧滑抽屉打开。
6.4 已知限制
- 拖拽改变左侧栏宽度时，ECharts 不会自动 resize（刷新即可）。
- 搜索未做防抖，但性能足够。
七、结语与协议
7.1 开源协议
本文档模板采用 MIT 协议，可自由使用、修改、分发。保留作者信息非强制，但欢迎注明出处。
本文档原创作者：SeaChange