diff --git a/README.md b/README.md index b5c8405..f83380c 100644 --- a/README.md +++ b/README.md @@ -136,6 +136,7 @@ pnpm test | [前端页面需求](docs/前端页面需求说明-开发版.md) | 页面、交互、状态与验收基线 | | [前端实现说明](docs/前端壳子与接口层开发说明.md) | 当前前端目录、Service、SSE 和运行边界 | | [前端写作体验](docs/前端写作体验优化开发说明.md) | Milkdown、CodeMirror、格式栏和 Shiki | +| [前端视觉与轻量动效](docs/前端视觉与轻量动效优化开发说明.md) | Design Token、页面美化、性能边界与主题注入约定 | | [Git 使用细则](docs/Git使用细则-团队开发版.md) | 分支、提交、PR、Review 与合并流程 | | [后端审阅复盘](docs/后端全面审阅问题与修复复盘.md) | 后端问题原因、后果与修复方案 | | [Knowledge/Retrieval 复盘](docs/Knowledge与Retrieval-Core问题与修复复盘.md) | 检索与事务问题复盘 | diff --git a/docs/前端壳子与接口层开发说明.md b/docs/前端壳子与接口层开发说明.md index f5ad5a8..16df6c9 100644 --- a/docs/前端壳子与接口层开发说明.md +++ b/docs/前端壳子与接口层开发说明.md @@ -184,13 +184,13 @@ pnpm build ```text pnpm build passed -pnpm test 14 passed +pnpm test 17 passed uv run pytest 71 passed preview smoke HTTP 200 git diff --check passed ``` -当前前端使用 Vitest 执行 Store、Workspace、文件树和编辑器组件测试;`pnpm build` 同时执行 `vue-tsc -b` 与 Vite 生产构建。后端测试出现过 `.pytest_cache` 无法写入的 Windows 权限警告,不影响 71 项测试结果,也不涉及产品代码。 +当前前端使用 Vitest 执行 Store、Workspace、文件树、编辑器组件、智能体标签和轻量动效约束测试;`pnpm build` 同时执行 `vue-tsc -b` 与 Vite 生产构建。后端测试出现过 `.pytest_cache` 无法写入的 Windows 权限警告,不影响 71 项测试结果,也不涉及产品代码。 Vite 当前会提示 Chat 与 Workspace 的部分异步 Chunk 超过 500 kB,这是 Milkdown、CodeMirror、KaTeX 和 Shiki 等编辑/渲染依赖带来的性能优化项,不影响构建成功或功能正确性;进入桌面打包前应通过手动分包或更细粒度动态加载继续优化。 diff --git a/docs/前端视觉与轻量动效优化开发说明.md b/docs/前端视觉与轻量动效优化开发说明.md new file mode 100644 index 0000000..417798e --- /dev/null +++ b/docs/前端视觉与轻量动效优化开发说明.md @@ -0,0 +1,112 @@ +# 前端视觉与轻量动效优化开发说明 + +> 更新日期:2026-08-30 +> 适用范围:全局 Design Token、App Shell、功能页、卡片、表单、弹窗和轻量交互动效 + +## 1. 目标 + +本轮优化不改变页面功能和前后端契约,主要解决原界面层级偏平、组件间距不统一、交互反馈不足的问题,同时为后续主题商店 CSS 注入保留稳定边界。 + +设计原则: + +- 颜色、圆角、阴影、间距和速度继续使用 CSS 变量; +- 页面与弹窗动画只改变 `opacity` 和 `transform`; +- 不使用背景模糊、连续粒子、视差、复杂 SVG 或大范围布局动画; +- 不使用 `transition: all`,只声明需要变化的属性; +- 尊重系统 `prefers-reduced-motion` 设置; +- 主题只需覆盖现有 Token,不需要了解组件内部动画实现。 + +## 2. 全局视觉基线 + +更新 `tokens.css`: + +- 调整四级圆角和阴影,使卡片、弹窗与导航层次更清楚; +- 调整标题栏、状态栏和双侧栏尺寸; +- 统一更短的运动时间与缓动曲线; +- 增加键盘 `focus-visible` 焦点环; +- 为 checkbox、radio 和 range 使用主题强调色; +- 窄窗口下收缩辅助侧栏与展开导航宽度; +- 在减少动态效果模式下,把动画和过渡缩短到近似即时完成。 + +更新 `features.css`: + +- 功能页增加受控内容宽度、响应式留白和低强度主题渐变; +- 卡片增加边框、阴影与最多 2px 的悬浮位移; +- 按钮、输入框、Badge、空状态和通知统一交互反馈; +- 设置页导航改为分段式卡片导航; +- 弹窗与页面增加一次性淡入和轻微位移动画。 + +## 3. 页面与布局优化 + +### 3.1 App Shell + +- 主侧栏增加明确的 Active 标记、悬浮反馈和宽度过渡; +- 辅助侧栏统一为次级 Surface,并改善标题与标签层级; +- 标题栏应用名改为轻量胶囊标识; +- 状态栏强化状态点和窄窗口降级; +- 命令面板增加轻量入场、圆角、阴影和列表反馈。 + +### 3.2 业务页面 + +- Search 结果卡片增加左侧强调线和统一内容宽度; +- Chat 增加消息容器、头像层级、Citation 悬浮反馈和 Composer 顶部阴影; +- Agent Tool 选择卡增加选中状态,Trace 使用轻量时间线; +- Task 完成按钮增加主题化状态反馈; +- Settings 行在悬浮时提供背景提示; +- Workspace 空状态与 Vault 入口增加清晰的层级和一次性入场动画。 + +## 4. 动效性能边界 + +允许的常规动效: + +```text +opacity +transform: translate / scale / rotate +background-color +border-color +color +box-shadow +``` + +默认禁止: + +```text +transition: all +backdrop-filter / filter 模糊 +持续改变 width / height / margin / padding 的动画 +无限循环的装饰动画 +全屏高频渐变或粒子动画 +``` + +状态栏 Spinner 和 AI Core 检查状态点属于有明确状态含义的循环动画,并会被 `prefers-reduced-motion` 全局规则降级。 + +## 5. 主题商店接入约定 + +自定义主题优先覆盖以下 Token: + +- `--color-background-*` +- `--color-surface-*` +- `--color-text-*` +- `--color-accent-*` +- `--color-border-*` +- `--shadow-*` +- `--radius-*` +- `--motion-*` + +主题 CSS 不应给通配选择器增加动画,不应重新启用高成本滤镜,也不应覆盖 `prefers-reduced-motion` 的降级规则。若主题需要完全静态的界面,可把三个 `--motion-*` Token 设置为接近 0ms。 + +## 6. 验证 + +新增 `styles/motion.spec.ts`,防止全局样式重新引入 `transition: all`、高成本模糊滤镜或布局型页面入场动画。 + +当前验证结果: + +```text +pnpm test 7 files / 17 tests passed +pnpm build passed +git diff --check passed +``` + +生产构建仍有已有的大 Chunk 警告,主要来自 Milkdown、CodeMirror、KaTeX 和 Shiki;本轮样式及动效未增加 JavaScript 动画库或运行时依赖。 + +本轮已完成样式静态检查、自动化测试和生产构建。由于本机内置浏览器运行资源路径缺失,亮色/暗色主题的人工页面巡检需在 PR 验收环境补做。 diff --git a/docs/第一阶段测试验证操作手册.md b/docs/第一阶段测试验证操作手册.md index 344add0..a70afdd 100644 --- a/docs/第一阶段测试验证操作手册.md +++ b/docs/第一阶段测试验证操作手册.md @@ -83,11 +83,11 @@ pnpm test 当前基线: ```text -6 test files passed -14 tests passed +7 test files passed +17 tests passed ``` -通过标准:退出码为 0、失败数为 0。测试覆盖 Provider Store、Workspace、文件树、文件切换、可视化编辑器和智能体中文标签。 +通过标准:退出码为 0、失败数为 0。测试覆盖 Provider Store、Workspace、文件树、文件切换、可视化编辑器、智能体中文标签和轻量动效性能约束。 ### 3.3 类型检查与生产构建 @@ -373,4 +373,3 @@ Invoke-RestMethod -Method Delete -Uri "$apiBase/notes/$noteId" - 通过 / 有条件通过 / 不通过 ``` -