feat(frontend): 统一页面视觉并完善 GitHub 代码主题 #6

2026-08-30T22:39:08+08:00

Kronecker commented

2026-08-30 22:39:08 +08:00

变更说明

本 PR 对 NotesAgent 前端进行整体视觉优化，并完善 Markdown、代码块和主题自定义体验。本次变更不修改后端接口与数据结构。

页面与布局优化

统一页面、卡片、表单、按钮、导航和弹窗的视觉层级。
优化标题栏、状态栏、主侧栏和辅助侧栏。
优化 Chat、Agent、Search、Tasks、Settings、Workspace 和 Vault 等页面。
增加响应式尺寸与窄窗口显示处理。
将前端暂定品牌名统一为 NotesAgent。

轻量动效

增加页面、弹窗、消息和空状态的轻量入场效果。
增加按钮、卡片和导航的悬浮反馈。
动画仅使用 opacity 和 transform 等低成本属性。
禁止 transition: all、模糊滤镜和复杂布局动画。
支持 prefers-reduced-motion 降级。
保留后续主题商店 CSS 注入能力。

Markdown 显示优化

提升亮色、暗色和护眼主题下列表序号、项目符号与表格线的对比度。
为 Markdown 表格增加独立网格线和表头背景 Token。
编辑区与只读 Markdown 渲染区共用高对比度主题变量。

GitHub 代码块主题

代码块采用 GitHub 风格背景、边框、圆角、间距和等宽字体。
支持以下代码主题：
- 跟随当前应用主题
- GitHub Light
- GitHub Dark
Shiki 同时生成 github-light 与 github-dark 两套颜色变量。
代码主题切换通过 CSS 完成，无需重新执行 Shiki 高亮。
代码主题偏好会持久化保存。
ThemeConfig.code_theme 可供后续自定义主题指定默认代码主题。
主题设置页使用真实 Shiki TypeScript 示例展示当前效果。
写作页代码块仍默认展开编辑，不增加额外 Shiki 预览面板。

问题修复

修复 Vue scoped CSS 编译后丢失 Shiki 后代选择器的问题。
修复代码主题颜色错误泄漏到根节点的问题。
将通用 Markdown 样式收敛到明确的 .markdown-content 全局作用域。
新增回归约束，禁止再次引入有风险的 scoped/global 混合选择器。

文档

更新前端写作体验开发说明。
更新前端视觉与轻量动效开发说明。
更新前端壳子与接口层开发说明。
更新第一阶段测试验证操作手册。
README 增加视觉与轻量动效文档入口。

验证结果

pnpm test
9 test files passed
23 tests passed

pnpm build
passed

git diff --check
passed

production Shiki CSS selector check
passed

生产构建已确认：

GitHub Light 与 GitHub Dark 的 Shiki 后代选择器均正确生成。
不存在 [data-code-theme] 根节点颜色泄漏。
不存在 transition: all 或高成本模糊滤镜。
分支与远程状态同步，工作区干净。

非阻塞说明

Workspace、Milkdown、CodeMirror、KaTeX 和 Shiki 相关异步 Chunk 仍存在体积警告，不影响本次功能和合并。
主题页真实 Shiki 预览会加载 Shiki 异步 Chunk，这是实现真实高亮预览的预期成本。
建议合并前人工快速检查亮色、暗色、护眼主题，以及 GitHub Light/GitHub Dark 代码预览效果。

审阅结论

未发现阻塞合并的问题，可以合并至 main。

## 变更说明本 PR 对 NotesAgent 前端进行整体视觉优化，并完善 Markdown、代码块和主题自定义体验。本次变更不修改后端接口与数据结构。 ### 页面与布局优化 - 统一页面、卡片、表单、按钮、导航和弹窗的视觉层级。 - 优化标题栏、状态栏、主侧栏和辅助侧栏。 - 优化 Chat、Agent、Search、Tasks、Settings、Workspace 和 Vault 等页面。 - 增加响应式尺寸与窄窗口显示处理。 - 将前端暂定品牌名统一为 `NotesAgent`。 ### 轻量动效 - 增加页面、弹窗、消息和空状态的轻量入场效果。 - 增加按钮、卡片和导航的悬浮反馈。 - 动画仅使用 `opacity` 和 `transform` 等低成本属性。 - 禁止 `transition: all`、模糊滤镜和复杂布局动画。 - 支持 `prefers-reduced-motion` 降级。 - 保留后续主题商店 CSS 注入能力。 ### Markdown 显示优化 - 提升亮色、暗色和护眼主题下列表序号、项目符号与表格线的对比度。 - 为 Markdown 表格增加独立网格线和表头背景 Token。 - 编辑区与只读 Markdown 渲染区共用高对比度主题变量。 ### GitHub 代码块主题 - 代码块采用 GitHub 风格背景、边框、圆角、间距和等宽字体。 - 支持以下代码主题： - 跟随当前应用主题 - GitHub Light - GitHub Dark - Shiki 同时生成 `github-light` 与 `github-dark` 两套颜色变量。 - 代码主题切换通过 CSS 完成，无需重新执行 Shiki 高亮。 - 代码主题偏好会持久化保存。 - `ThemeConfig.code_theme` 可供后续自定义主题指定默认代码主题。 - 主题设置页使用真实 Shiki TypeScript 示例展示当前效果。 - 写作页代码块仍默认展开编辑，不增加额外 Shiki 预览面板。 ### 问题修复 - 修复 Vue scoped CSS 编译后丢失 Shiki 后代选择器的问题。 - 修复代码主题颜色错误泄漏到根节点的问题。 - 将通用 Markdown 样式收敛到明确的 `.markdown-content` 全局作用域。 - 新增回归约束，禁止再次引入有风险的 scoped/global 混合选择器。 ### 文档 - 更新前端写作体验开发说明。 - 更新前端视觉与轻量动效开发说明。 - 更新前端壳子与接口层开发说明。 - 更新第一阶段测试验证操作手册。 - README 增加视觉与轻量动效文档入口。 ## 验证结果 ```text pnpm test 9 test files passed 23 tests passed pnpm build passed git diff --check passed production Shiki CSS selector check passed ``` 生产构建已确认： - GitHub Light 与 GitHub Dark 的 Shiki 后代选择器均正确生成。 - 不存在 `[data-code-theme]` 根节点颜色泄漏。 - 不存在 `transition: all` 或高成本模糊滤镜。 - 分支与远程状态同步，工作区干净。 ## 非阻塞说明 - Workspace、Milkdown、CodeMirror、KaTeX 和 Shiki 相关异步 Chunk 仍存在体积警告，不影响本次功能和合并。 - 主题页真实 Shiki 预览会加载 Shiki 异步 Chunk，这是实现真实高亮预览的预期成本。 - 建议合并前人工快速检查亮色、暗色、护眼主题，以及 GitHub Light/GitHub Dark 代码预览效果。 ## 审阅结论未发现阻塞合并的问题，可以合并至 `main`。 ```

Kronecker added 8 commits 2026-08-30 22:39:08 +08:00

feat(frontend): 统一页面视觉与轻量动效 ef03a8f745

docs(frontend): 记录视觉优化与动效约束 7fa2e9c404

fix(frontend): 提升 Markdown 表格与列表对比度 668139706b

chore(frontend): 将暂定品牌名统一为 NotesAgent 7803ae5110

feat(frontend): 添加 GitHub 代码块主题设置 3595021d80

docs(frontend): 记录 GitHub 代码主题配置 206a8f5b0a

fix(frontend): 修复 Shiki 主题选择器并添加真实预览 9bcb3bf3a6

docs(frontend): 补充 Shiki 预览与选择器回归说明 df044d7888

Kronecker merged commit 8e4f4e6d1a into main

2026-08-30 22:39:16 +08:00

Sign in to join this conversation.