feat: 主题切换性能优化 — View Transitions API + 0.15s 统一过渡 + 设置页增强

【问题】
  桌面端(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 — 新增主题系统架构章节(双轨颜色体系 / 时序 / 过渡策略)
This commit is contained in:
2026-06-09 11:02:40 +08:00
parent 59059caae7
commit eb12248a62
12 changed files with 356 additions and 128 deletions

View File

@@ -150,7 +150,7 @@ export function LeftPanel() {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'background 0.2s ease',
transition: 'background 0.15s linear',
zIndex: 10,
}}
onMouseEnter={() => setHovered(true)}
@@ -166,7 +166,7 @@ export function LeftPanel() {
: isHovered
? token.colorPrimary
: token.colorBorder,
transition: 'background 0.2s ease',
transition: 'background 0.15s linear',
}} />
</div>

View File

@@ -68,7 +68,7 @@ function ModelItem({ model, isSelected, onSelect }: ModelItemProps) {
alignItems: 'center',
justifyContent: 'space-between',
gap: 8,
transition: 'background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease',
transition: 'background 0.15s linear, border-color 0.15s linear, opacity 0.15s linear',
}}
>
<Text