feat(frontend): 统一页面视觉并完善 GitHub 代码主题 #6
@@ -71,6 +71,10 @@ Milkdown 自定义插件在写作模式中隐藏 HTML 标记,并通过 ProseMi
|
|||||||
|
|
||||||
代码高亮使用 Shiki 的 JavaScript 正则引擎,并只注册第一阶段常用语言:Markdown、HTML、CSS、JavaScript、TypeScript、JSON、Python、Shell 和 SQL。未知语言回退为 Markdown 语法展示,不阻塞整篇内容渲染。
|
代码高亮使用 Shiki 的 JavaScript 正则引擎,并只注册第一阶段常用语言:Markdown、HTML、CSS、JavaScript、TypeScript、JSON、Python、Shell 和 SQL。未知语言回退为 Markdown 语法展示,不阻塞整篇内容渲染。
|
||||||
|
|
||||||
|
Shiki 同时生成 `github-light` 与 `github-dark` 两套 CSS 变量。主题页提供“跟随主题 / GitHub Light / GitHub Dark”选项,通过根节点 `data-code-theme` 切换对应变量,无需重新执行高亮。偏好写入 `editor-appearance`,内置主题和后续主题包也可通过 `ThemeConfig.code_theme` 指定默认代码主题。
|
||||||
|
|
||||||
|
代码块容器使用 GitHub 风格的背景、边框、6px 圆角、16px 内边距和等宽字体;相关颜色由 `--color-code-*` Token 控制,方便主题商店覆盖。
|
||||||
|
|
||||||
高亮结果同时生成 `github-light` 和 `github-dark` 颜色变量。根节点的 `data-theme` 变化后由 CSS 选择对应颜色,因此切换主题无需重新解析整篇 Markdown。
|
高亮结果同时生成 `github-light` 和 `github-dark` 颜色变量。根节点的 `data-theme` 变化后由 CSS 选择对应颜色,因此切换主题无需重新解析整篇 Markdown。
|
||||||
|
|
||||||
写作编辑器中的普通代码块进入文档后直接展开 CodeMirror 编辑区,不再先显示 Shiki 预览,也不再提供“编辑代码/查看高亮”切换,减少一次多余操作。公式块仍由 Milkdown 的 LaTeX 功能负责编辑和渲染。
|
写作编辑器中的普通代码块进入文档后直接展开 CodeMirror 编辑区,不再先显示 Shiki 预览,也不再提供“编辑代码/查看高亮”切换,减少一次多余操作。公式块仍由 Milkdown 的 LaTeX 功能负责编辑和渲染。
|
||||||
@@ -109,7 +113,7 @@ pnpm test
|
|||||||
|
|
||||||
文件切换失效包含两层原因。第一层是旧实现先更新 `currentFilePath`、后等待文件内容,导致编辑器使用新路径和旧内容提前重建;现在改为文件读取成功后一次性提交路径和内容。第二层是工作区欢迎笔记的异步初始化结束后会无条件设为活动文件,可能覆盖用户在此期间的真实点击;现在点击文件时立即同步工作区活动路径,默认初始化仅在用户尚未选择文件且欢迎笔记确实加载成功时提交。文件读取失败时则恢复点击前的活动文件。
|
文件切换失效包含两层原因。第一层是旧实现先更新 `currentFilePath`、后等待文件内容,导致编辑器使用新路径和旧内容提前重建;现在改为文件读取成功后一次性提交路径和内容。第二层是工作区欢迎笔记的异步初始化结束后会无条件设为活动文件,可能覆盖用户在此期间的真实点击;现在点击文件时立即同步工作区活动路径,默认初始化仅在用户尚未选择文件且欢迎笔记确实加载成功时提交。文件读取失败时则恢复点击前的活动文件。
|
||||||
|
|
||||||
本地内置浏览器测试运行时因环境资源路径缺失未能启动,因此本次没有把自动化交互测试列为已通过项。合并前建议人工检查一次工具栏选区操作、文件切换同步和亮暗主题下的代码块显示。
|
本地内置浏览器测试运行时因环境资源路径缺失未能启动,因此本次没有把自动化交互测试列为已通过项。合并前建议人工检查一次工具栏选区操作、文件切换同步,以及跟随主题、GitHub Light、GitHub Dark 三种代码块设置下的显示效果。
|
||||||
|
|
||||||
## 5. 后续建议
|
## 5. 后续建议
|
||||||
|
|
||||||
|
|||||||
@@ -184,13 +184,13 @@ pnpm build
|
|||||||
|
|
||||||
```text
|
```text
|
||||||
pnpm build passed
|
pnpm build passed
|
||||||
pnpm test 18 passed
|
pnpm test 22 passed
|
||||||
uv run pytest 71 passed
|
uv run pytest 71 passed
|
||||||
preview smoke HTTP 200
|
preview smoke HTTP 200
|
||||||
git diff --check passed
|
git diff --check passed
|
||||||
```
|
```
|
||||||
|
|
||||||
当前前端使用 Vitest 执行 Store、Workspace、文件树、编辑器组件、智能体标签、轻量动效约束和 Markdown 对比度 Token 测试;`pnpm build` 同时执行 `vue-tsc -b` 与 Vite 生产构建。后端测试出现过 `.pytest_cache` 无法写入的 Windows 权限警告,不影响 71 项测试结果,也不涉及产品代码。
|
当前前端使用 Vitest 执行 Store、Workspace、文件树、编辑器组件、智能体标签、轻量动效约束、Markdown 对比度 Token 和 Shiki GitHub 双主题测试;`pnpm build` 同时执行 `vue-tsc -b` 与 Vite 生产构建。后端测试出现过 `.pytest_cache` 无法写入的 Windows 权限警告,不影响 71 项测试结果,也不涉及产品代码。
|
||||||
|
|
||||||
Vite 当前会提示 Chat 与 Workspace 的部分异步 Chunk 超过 500 kB,这是 Milkdown、CodeMirror、KaTeX 和 Shiki 等编辑/渲染依赖带来的性能优化项,不影响构建成功或功能正确性;进入桌面打包前应通过手动分包或更细粒度动态加载继续优化。
|
Vite 当前会提示 Chat 与 Workspace 的部分异步 Chunk 超过 500 kB,这是 Milkdown、CodeMirror、KaTeX 和 Shiki 等编辑/渲染依赖带来的性能优化项,不影响构建成功或功能正确性;进入桌面打包前应通过手动分包或更细粒度动态加载继续优化。
|
||||||
|
|
||||||
|
|||||||
@@ -89,6 +89,7 @@ backdrop-filter / filter 模糊
|
|||||||
- `--color-text-*`
|
- `--color-text-*`
|
||||||
- `--color-accent-*`
|
- `--color-accent-*`
|
||||||
- `--color-border-*`
|
- `--color-border-*`
|
||||||
|
- `--color-code-*`
|
||||||
- `--shadow-*`
|
- `--shadow-*`
|
||||||
- `--radius-*`
|
- `--radius-*`
|
||||||
- `--motion-*`
|
- `--motion-*`
|
||||||
@@ -102,7 +103,7 @@ backdrop-filter / filter 模糊
|
|||||||
当前验证结果:
|
当前验证结果:
|
||||||
|
|
||||||
```text
|
```text
|
||||||
pnpm test 7 files / 18 tests passed
|
pnpm test 9 files / 22 tests passed
|
||||||
pnpm build passed
|
pnpm build passed
|
||||||
git diff --check passed
|
git diff --check passed
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -83,11 +83,11 @@ pnpm test
|
|||||||
当前基线:
|
当前基线:
|
||||||
|
|
||||||
```text
|
```text
|
||||||
7 test files passed
|
9 test files passed
|
||||||
18 tests passed
|
22 tests passed
|
||||||
```
|
```
|
||||||
|
|
||||||
通过标准:退出码为 0、失败数为 0。测试覆盖 Provider Store、Workspace、文件树、文件切换、可视化编辑器、智能体中文标签、轻量动效性能约束和 Markdown 对比度 Token。
|
通过标准:退出码为 0、失败数为 0。测试覆盖 Provider Store、主题偏好、Workspace、文件树、文件切换、可视化编辑器、智能体中文标签、轻量动效性能约束、Markdown 对比度 Token 和 Shiki GitHub 双主题输出。
|
||||||
|
|
||||||
### 3.3 类型检查与生产构建
|
### 3.3 类型检查与生产构建
|
||||||
|
|
||||||
@@ -274,6 +274,7 @@ Invoke-RestMethod -Uri "$apiBase/providers/mock/models"
|
|||||||
- 选择文本后,顶部工具栏和浮动工具栏都对当前选区生效;
|
- 选择文本后,顶部工具栏和浮动工具栏都对当前选区生效;
|
||||||
- 正文不默认加粗,标题默认加粗;
|
- 正文不默认加粗,标题默认加粗;
|
||||||
- 代码块默认展开编辑,不显示额外 Shiki 预览;
|
- 代码块默认展开编辑,不显示额外 Shiki 预览;
|
||||||
|
- 主题页可在跟随主题、GitHub Light 和 GitHub Dark 间切换代码块样式,刷新后偏好仍保留;
|
||||||
- Chat 等只读 Markdown 区域的代码高亮能跟随亮暗主题;
|
- Chat 等只读 Markdown 区域的代码高亮能跟随亮暗主题;
|
||||||
- 表格、公式和 Markdown HTML 渲染正常,危险 HTML 被 DOMPurify 清理。
|
- 表格、公式和 Markdown HTML 渲染正常,危险 HTML 被 DOMPurify 清理。
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user