# 回答语言

- 所有交互、解释、代码注释与生成内容均使用简体中文，专有技术名词可保留英文，但需附带中文说明
- 进行任务时都需要考虑安全、性能、主题切换、业务自定义错误、事件总线驱动方式以及日志记录
- 进行系统级别的操作时，需要考虑系统差异，并处理兼容性。如WINDOWS、MAC OS。
- 有需要请自己调用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 仍走标签替换路径，过渡无效