YoungestSongMo
eb12248a62
【问题】
桌面端（Electron）切换主题时颜色变化速度不一致、明显卡顿。
根因分析（4 轮迭代）：
1. 过渡时长不统一（body 0.3s / 组件 0.15s）→ 统一到 0.2s
2. antd CSS-in-JS 标签替换导致瞬间变色 → 尝试 cssVar（无效，仍走标签替换）
3. applyHtmlTheme 在 updater 回调中执行，与 antd CSS 变更不同帧 → 移入 useLayoutEffect
4. html * 全局过渡在 Electron 中为数千 DOM 节点同步插值 → 合成器掉帧
终极方案：View Transitions API（GPU 合成器 1 次 cross-fade 替代 N 个 CSS 过渡）
+ 精准 CSS 过渡覆盖 ~80 个 antd 容器类（回退方案）
【修改】
ThemeProvider.tsx — 核心重构
- applyHtmlTheme 从 setIsDark updater → useLayoutEffect([isDark])
确保自定义 CSS 变量与 antd CSS-in-JS 在同一次 React 提交中生效
- View Transitions API：document.startViewTransition + flushSync
GPU 合成器截取旧/新两帧做单次 cross-fade，消除多元素插值卡顿
- 浏览器不支持时自动回退到 CSS transition 方案
globals.css — 过渡策略
- body: 0.3s ease → 0.15s linear
- View Transitions 动画：::view-transition-old/new(root) 0.15s linear
- ~80 个 antd 容器类精准过渡（Layout/Card/Modal/Table/Input/
Select/Picker/Menu/Tabs/Tag/Alert/Empty/Result/Skeleton 等）
按功能分组：布局 → 表格 → 表单 → 导航 → 反馈
不覆盖交互组件自有 transition（Button/Switch/Slider 等）
linear 替代 ease — 匀速插值，桌面应用更利落
Layout.tsx / HomeContent.tsx / LeftPanel.tsx / ModelSelector.tsx
- 过渡参数对齐：全部 0.2s → 0.15s linear
SettingsPage.tsx — 用户体验
- Modal 取消 keyboard={false}，Esc 键可关闭
- macOS：关闭按钮移至标题左侧（遵循 macOS HIG）
- afterClose 中 blur 当前焦点元素，防止聚焦跳到导航栏
【文档】
CHANGELOG.md — 新增 0.0.15 版本记录
CLAUDE.md — 新增主题系统架构章节（双轨颜色体系 / 时序 / 过渡策略）
27 lines
1.3 KiB
Markdown
27 lines
1.3 KiB
Markdown
# 回答语言
|
||
|
||
- 所有交互、解释、代码注释与生成内容均使用简体中文，专有技术名词可保留英文，但需附带中文说明
|
||
- 进行任务时都需要考虑安全、性能、主题切换、业务自定义错误、事件总线驱动方式以及日志记录
|
||
- 有需要请自己调用MCP服务
|
||
|
||
# 主题系统架构
|
||
|
||
## 双轨颜色体系
|
||
|
||
1. **自定义 CSS 变量**（`globals.css`）：`data-theme="light|dark"` → `var(--color-bg-base)` 等，用于 body 和自定义组件
|
||
2. **antd 令牌**（`antd-theme.ts`）：`ConfigProvider theme={algorithm}` → `useToken()` → inline style，用于 antd 组件
|
||
|
||
## 主题切换时序（关键）
|
||
|
||
```
|
||
ThemeProvider.useLayoutEffect([isDark])
|
||
→ applyHtmlTheme(isDark) ← data-theme 属性变更
|
||
(与 ConfigProvider 的 useInsertionEffect 同帧执行)
|
||
→ 浏览器绘制 ← 所有颜色变更在同一帧生效
|
||
```
|
||
|
||
## 过渡策略
|
||
|
||
- **Electron/Chromium**：View Transitions API（`document.startViewTransition` + `flushSync`），GPU 合成器单次 cross-fade
|
||
- **其他浏览器**：CSS `transition: color/bg/border/shadow 0.15s linear`，精准覆盖 ~80 个 antd 容器类（不覆盖交互组件自有 transition）
|
||
- **不启用 antd cssVar**：经实测 cssVar 模式下 CSS-in-JS 仍走标签替换路径，过渡无效 |