kyugao
f1e7e785a1
迭代09 (R-011 Tab 设置统一管理): - 需求 R-011 (定稿 Q1-Q5) + 需求池索引 - 计划 PLAN-010 + 迭代09 四件套 (目标/技术方案/验收/复盘) - 约束: 产品约束-009 / UI约束-003 / 技术约束-014 - UI约束-002 修订: 通用设置→Tab 设置 迭代10 (R-012 UI 适配 DSH 主题): - 需求 R-012 (定稿: 暂定跟随系统) + 需求池索引 - 计划 PLAN-011 + 迭代10 四件套 - 约束: UI约束-004 (主题适配约定)
56 lines
2.4 KiB
Markdown
56 lines
2.4 KiB
Markdown
# 计划：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 全部清理，注释可留）；
|
||
- 布局与交互不变（仅色值）。
|