one_divine_lot/docs/02-计划/计划-UI主题适配.md

计划：UI 适配 DSH 主题（浅色 / 深色 / 跟随系统）（阶段航点）

编号：PLAN-011 ｜ 粒度：阶段航点 ｜ 创建：2026-09-02 ｜ 状态：执行中 派生自终极目标：目标-001（神之一手工具集） 依据需求：R-012（已定稿，2026-09-02，暂定跟随系统） —— 符合入范围门槛 设计约束：UI约束-003（Tab 设置）、UI约束-002（QMT 卡片）沿用；本次新增色值 token 化约定

目标

神之一手客户端 UI 全部硬编码色值替换为宿主 --dsw-* token，使各页面在 DSH 浅色 / 深色 / 跟随系统主题下均可读、协调，随主题切换自动适配，不自行维护主题偏好。

范围

做：

1. 客户端 10 个文件 141 处硬编码颜色按语义映射表替换为 var(--dsw-*) 或 color-mix（随主题淡色底）；
2. 确认 QmtConnectionChip 已用 token 与硬编码混杂处统一；
3. 涨跌色（红涨绿跌）→ 宿主 state-error/success；主按钮 / 徽标 / 提示底色 → 宿主语义 token + color-mix；
4. 构建 + typecheck + 深浅主题人工验收。

不做：

• 自定义 --odl-* 覆盖 token（D5 暂缓）；
• 布局 / 间距 / 圆角改动；
• 服务端 / API / 数据改动；
• 插件自维护主题偏好（跟随宿主）。

涉及文件

src/client/views/
├── SettingsSection.jsx    # 55 处（最大）
├── StrategyTab.jsx        # 24
├── TradeRecordsTab.jsx    # 21
├── QmtConnectionChip.jsx  # 13（部分已 token）
├── RangeSelector.jsx      # 7
├── PriceCell.jsx          # 5（涨跌色）
├── AllPositionsTab.jsx    # 4
├── LoadState.jsx          # 3
├── Toast.jsx              # 2
└── PlaceholderTab.jsx     # 1

实现步骤

1. 文档骨架：PLAN-011 + 迭代 10（本步）；
2. 批量替换：按文件逐处替换（先小文件确认模式，再大文件）；
3. 验证：build + typecheck；人工切 DSH 浅/深主题检查各页；
4. 验收 + 复盘。

验收要点

• 浅色主题下观感与现状基本一致（无突兀色差）；
• 深色主题下所有页面可读（背景/文字/边框/按钮/涨跌/徽标/提示/下拉菜单均协调）；
• 跟随系统切换实时生效；
• 无残留硬编码色（#xxx / rgb / rgba 全部清理，注释可留）；
• 布局与交互不变（仅色值）。