# 标题折叠与样式开发说明 日期:2026-09-06。范围为工作区写作模式的章节折叠,以及正文标题外观偏好。 ## 1. 章节边界与交互 H1–H6 标题旁在悬停时显示统一折叠箭头;键盘聚焦也显示,触摸设备保持可见。章节从标题之后开始,结束于同一容器内下一个同级或更高级标题;末尾没有后续内容的标题不显示按钮。引用等容器中的标题只影响所在容器,不折叠外部正文。 - 工具栏提供“折叠所有章节”和“展开所有章节”。 - 折叠父章节不会清空子章节的折叠状态。 - 折叠时若选区在将隐藏的正文中,光标先移到标题。 - 从大纲、查找或键盘跳到隐藏内容时,展开包含目标的章节,避免隐藏光标。 - 折叠只影响当前编辑器视图,不修改 Markdown,不触发文档脏状态,也不占用撤销历史。重开文件恢复展开;源码模式与静态预览不进行章节折叠。 实现位于 `headingFolding.ts`:插件状态保存标题位置,通过事务映射跟随文档编辑;删除或改成正文的标题会从状态中清理。Decoration 隐藏完整块,widget 提供可聚焦的折叠按钮。章节范围按标题栈计算,并按不可变文档缓存;隐藏范围合并后遍历节点,避免每个节点重复扫描全部标题。 ## 2. 标题样式设置 入口为“设置 → 编辑器 → 标题样式”,主题页“编辑器外观”中也提供同一组件。 - 默认跟随当前主题,不覆盖主题字号、字体与粗细。 - 启用自定义后,分别调整 H1–H6 字号(12–72 px)和字重(400–800 的五个档位)。 - 标题字体可跟随正文,或使用系统衬线、无衬线、等宽字体。 - 面板即时预览,工作区正文和静态 Markdown 预览使用同一偏好。 - 不影响笔记属性栏的标题、侧栏大纲字号或页面标题,不改写源文件中的标题级别。 - “恢复跟随主题”清除自定义覆盖;主题页“恢复默认”也重置标题设置。 偏好由 `headingAppearance` store 保存到本机 `editor-heading-appearance`。读取时校验字体枚举、字重与字号范围;应用 CSS 前再次规范化,避免空输入、无效存储或异常大数影响布局。刷新后恢复设置,切换主题保留自定义偏好。用户显式启用的覆盖只作用于 Markdown 标题,优先于主题规则;颜色继续跟随主题。 ## 3. 桌面命令预留 既有 `editorCommandService` v1 增加三个可执行 ID: | 命令 | 行为 | | --- | --- | | editor.heading.toggle-fold | 切换选区所在章节的折叠状态 | | editor.heading.fold-all | 折叠所有有内容的章节 | | editor.heading.unfold-all | 展开所有章节 | 均不需要参数,沿用活动文档、模式与冲突检查。原生快捷键仍由第三阶段容器绑定,此处不注册系统级快捷键。 ## 4. 验证 ```sh cd frontend npm run test -- src/features/editor/headingFolding.spec.ts src/features/editor/VisualMarkdownEditor.spec.ts src/features/editor/HeadingStyleSettings.spec.ts src/stores/headingAppearance.spec.ts npm run build ``` 自动检查覆盖章节边界、嵌套容器、隐藏选区迁移、父子折叠状态、大纲目标展开、序列化保持、设置保存恢复、输入校验和面板恢复默认。 手动检查:打开“功能演示 / 01 Markdown 与大纲”,依次折叠 H2 与 H1,再从大纲跳转;确认隐藏内容重新显示。打开设置调整 H1 字号与 H2 粗细,返回笔记检查外观,刷新后检查偏好仍在;关闭自定义后依次切换六个主题核对主题原有样式。