docs(frontend): 记录文件切换与代码块调整
This commit is contained in:
+11
-8
@@ -7,7 +7,7 @@
|
||||
- 将界面中的装饰性 Emoji 统一替换为 Element Plus 图标;
|
||||
- 将“写作”模式由 Markdown 源码与预览双栏改为单一可视化编辑区;
|
||||
- 为写作区增加标题、加粗、斜体、有序列表、无序列表工具栏;
|
||||
- 使用 Shiki 为 Markdown 代码块提供亮色、暗色双主题高亮。
|
||||
- 写作页代码块默认展开为可编辑状态;只读 Markdown 区域使用 Shiki 提供亮暗主题高亮。
|
||||
|
||||
## 2. 实现说明
|
||||
|
||||
@@ -65,15 +65,16 @@ Milkdown 自定义插件在写作模式中隐藏 HTML 标记,并通过 ProseMi
|
||||
|
||||
代码语言搜索、复制操作、链接编辑及公式确认浮层也统一使用中文文案。
|
||||
|
||||
### 2.4 Shiki 高亮与主题适配
|
||||
### 2.4 代码块编辑与 Shiki 高亮
|
||||
|
||||
代码高亮使用 Shiki 的 JavaScript 正则引擎,并只注册第一阶段常用语言:Markdown、HTML、CSS、JavaScript、TypeScript、JSON、Python、Shell 和 SQL。未知语言回退为 Markdown 语法展示,不阻塞整篇内容渲染。
|
||||
|
||||
高亮结果同时生成 `github-light` 和 `github-dark` 颜色变量。根节点的 `data-theme` 变化后由 CSS 选择对应颜色,因此切换主题无需重新解析整篇 Markdown。
|
||||
|
||||
Shiki 应用于:
|
||||
写作编辑器中的普通代码块进入文档后直接展开 CodeMirror 编辑区,不再先显示 Shiki 预览,也不再提供“编辑代码/查看高亮”切换,减少一次多余操作。公式块仍由 Milkdown 的 LaTeX 功能负责编辑和渲染。
|
||||
|
||||
Shiki 仅应用于:
|
||||
|
||||
- 写作编辑器中的代码块高亮预览;
|
||||
- AI 对话中的 Markdown 代码块。
|
||||
|
||||
Markdown HTML 仍在写入 DOM 前经过 DOMPurify 清理。
|
||||
@@ -93,20 +94,22 @@ pnpm build
|
||||
pnpm test
|
||||
```
|
||||
|
||||
验证结果:TypeScript 类型检查与 Vite 生产构建均通过。组件回归测试共 5 项,全部通过:
|
||||
验证结果:TypeScript 类型检查与 Vite 生产构建均通过。组件回归测试共 7 项,全部通过:
|
||||
|
||||
- 顶部工具栏对选区应用加粗;
|
||||
- 浮动工具栏对选区应用斜体;
|
||||
- 自定义字号输入写入 Markdown;
|
||||
- 标题恢复为普通正文;
|
||||
- 连续切换文件后渲染新文件内容。
|
||||
- 连续切换文件后渲染新文件内容;
|
||||
- 从文件树连续点击时,活动路径与编辑器内容同步切换;
|
||||
- 欢迎笔记的异步初始化不会覆盖用户刚点击的文件。
|
||||
|
||||
文件切换失效的原因是旧实现先更新 `currentFilePath`、后等待文件内容,导致编辑器使用新路径和旧内容提前重建。现在改为文件读取成功后一次性提交路径和内容;读取失败时保留原文件及其内容。
|
||||
文件切换失效包含两层原因。第一层是旧实现先更新 `currentFilePath`、后等待文件内容,导致编辑器使用新路径和旧内容提前重建;现在改为文件读取成功后一次性提交路径和内容。第二层是工作区欢迎笔记的异步初始化结束后会无条件设为活动文件,可能覆盖用户在此期间的真实点击;现在点击文件时立即同步工作区活动路径,默认初始化仅在用户尚未选择文件且欢迎笔记确实加载成功时提交。文件读取失败时则恢复点击前的活动文件。
|
||||
|
||||
本地内置浏览器测试运行时因环境资源路径缺失未能启动,因此本次没有把自动化交互测试列为已通过项。合并前建议人工检查一次工具栏选区操作、文件切换同步和亮暗主题下的代码块显示。
|
||||
|
||||
## 5. 后续建议
|
||||
|
||||
- 根据真实文档规模评估 Milkdown 与 Shiki 的懒加载拆包;
|
||||
- 根据真实文档规模评估 Milkdown 与只读 Markdown 高亮模块的懒加载拆包;
|
||||
- 为工具栏补充撤销、重做、引用、行内代码和链接;
|
||||
- 增加编辑器选区命令与文件切换的组件测试。
|
||||
|
||||
Reference in New Issue
Block a user