kyugao
a4902bb730
需求与文档: - R-013 策略自定义字段配置（定义随策略 configSchema 存 settings、值落 strategy_holdings.values JSON、类型化文本/数字/布尔/枚举）定稿并进入 PLAN-012 / 迭代 11（含目标数据模型 + 端到端示例 + 技术方案 + 验收标准） - R-011（Tab设置）/ R-012（UI主题适配）归档至 已完成/，索引标记已归档 - 沉淀约束: 产品约束-010 / 技术约束-015 / 技术约束-016 / UI约束-005 结构重构（技术约束-016）: - src/component/ 平铺还原为语义分域目录: data-source/ storage/ position/ market/ trades/（git rename 保留历史） - 清理死代码: 删除 AllocationStorage.js（0 引用）、DataStore setDataset/removeDataset（无调用方） - 同步更新 src/index.js / scripts/*.mjs / tsdown.config.ts 引用 - typecheck + build + test-r009 回归 14/14 通过
56 lines
4.6 KiB
Markdown
56 lines
4.6 KiB
Markdown
# R-012 UI 适配 DSH 主题（浅色 / 深色 / 跟随系统） · 已完成
|
||
|
||
> 归档日期：2026-09-02 ｜ 需求状态：**已完成**
|
||
> 原索引：docs/05-需求池/需求池索引.md（主索引保留 R-012 条目，指向本归档）
|
||
> 实现迭代：10-UI主题适配（验收通过，迭代复盘见 docs/04-迭代记录/10-UI主题适配/迭代复盘.md）
|
||
> 讨论记录：2026-09-02 定稿（暂定跟随系统，老师确认）；实现见迭代 10 技术实现方案/复盘
|
||
|
||
---
|
||
|
||
|
||
|
||
> 状态：**已定稿（暂定：跟随系统，语义色映射可再调）**（2026-09-02，老师确认方向「暂定跟随系统」）｜ 登记日期：2026-09-02
|
||
> 来源：老师指令（2026-09-02）
|
||
> 优先级：P1（UI 体验）
|
||
|
||
## 需求描述
|
||
|
||
神之一手插件 UI 适配 DSH 的浅色 / 深色 / 跟随系统主题：将客户端全部硬编码颜色替换为宿主主题 token（`--dsw-*` CSS 变量），插件各页面随 DSH 主题切换自动适配，不自行维护主题偏好（跟随宿主）。
|
||
|
||
## 现状（代码审查 2026-09-02）
|
||
|
||
- 客户端 10 个文件共 **141 处硬编码颜色**：SettingsSection.jsx 55 / StrategyTab.jsx 24 / TradeRecordsTab.jsx 21 / QmtConnectionChip.jsx 13 / RangeSelector.jsx 7 / PriceCell.jsx 5 / AllPositionsTab.jsx 4 / LoadState.jsx 3 / Toast.jsx 2 / PlaceholderTab.jsx 1；
|
||
- 宿主机制（已查明）：深色主题时宿主挂 `body[data-ds-dark-theme]`，并注入 `--dsw-*` token（`--dsw-alias-bg-base/layer-1/layer-2`、`label-primary/secondary/tertiary/caption`、`border-l1..l4`、`state-success/error/business-primary`、`brand-primary`、`button-primary-fill/hover`、`button-contrast-fill`、`interactive-bg-hover/active`、`bg-mask-1`、`tooltip-bg` 等），随 light/dark/system 自动切换；
|
||
- 先例：QmtConnectionChip 部分样式已引用 `var(--dsw-alias-label-secondary, #666)`，token 可用。
|
||
|
||
## 决策（2026-09-02 老师确认：暂定跟随系统）
|
||
|
||
- **D1** 主题偏好跟随宿主（light/dark/system），插件不自行监听/维护；
|
||
- **D2** 全部颜色映射到宿主 `--dsw-*` token（语义映射表见下）；涨跌色 A 股红涨绿跌 → 宿主语义：涨=红=`state-error-primary`、跌=绿=`state-success-primary`（宿主在深浅主题下保证可读）；
|
||
- **D3** 实心主按钮 / 徽标 / 提示底色等语义色（success/error/business）跟随宿主对应 token；淡色底用 `color-mix(in srgb, <primary> 10%, transparent)` 跟随主题；
|
||
- **D4** 仅做色值 token 化（最小改动），不动布局 / 间距 / 圆角；
|
||
- **D5** 若宿主 token 观感不满意，后续可加插件级 `--odl-*` 覆盖变量（本迭代不做，暂定）。
|
||
|
||
## 语义映射表（实施基准）
|
||
|
||
| 原色 | 语义 | 替换 |
|
||
|---|---|---|
|
||
| #fff（表面底） | 表格/卡片/弹窗/输入框/菜单/按钮白底 | var(--dsw-alias-bg-layer-1) |
|
||
| rgba(0,0,0,.4)（遮罩） | 弹窗遮罩 | var(--dsw-alias-bg-mask-1) |
|
||
| #f5f5f5（hover/静态行底） | 次级面/hover | var(--dsw-alias-interactive-bg-hover) 或 bg-layer-2（静态） |
|
||
| #e8f5e9/#f1f8f2（激活浅绿底） | 选中/激活 | color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent) |
|
||
| #fdecea（错误浅红底） | 错误提示底 | color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent) |
|
||
| #e3f2fd（信息浅蓝底） | 信息提示底 | color-mix(in srgb, var(--dsw-alias-state-business-primary) 10%, transparent) |
|
||
| #333/#222 | 主文字 | var(--dsw-alias-label-primary) |
|
||
| #555/#666 | 次文字 | var(--dsw-alias-label-secondary) |
|
||
| #888/#999/#aaa | 弱文字/caption | var(--dsw-alias-label-tertiary) |
|
||
| #1565c0（蓝字） | 业务/信息字 | var(--dsw-alias-state-business-primary) |
|
||
| #eee（细线） | 行分隔/表头细线 | var(--dsw-alias-border-l1) |
|
||
| #ddd/#ccc（描边/强调） | 控件描边/分隔 | var(--dsw-alias-border-l2) |
|
||
| #90caf9/#ce93d8（徽标淡描边） | 徽标描边 | var(--dsw-alias-border-l3)（描边中性化，文字保留语义色） |
|
||
| #d32f2f/#c62828（红字/实心红） | 涨/错误/删除/危险 | var(--dsw-alias-state-error-primary)；实心底同上，文字 var(--dsw-alias-button-contrast-fill) |
|
||
| #2e7d32（绿字/实心绿） | 跌/成功/激活/主按钮 | var(--dsw-alias-state-success-primary)；实心底同上，文字 var(--dsw-alias-button-contrast-fill) |
|
||
| #fff（实心按钮上文字） | 按钮文字 | var(--dsw-alias-button-contrast-fill) |
|
||
|
||
> 实施细则：仅 inline style / 变量赋值中的颜色字面量替换；注释中的色值可保留或同步（不影响运行）；个别语义不确定处保留原色并在迭代记录中列出待老师验收。
|