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 (主题适配约定)
44 lines
2.3 KiB
Markdown
44 lines
2.3 KiB
Markdown
# 技术实现方案：10-UI 适配 DSH 主题
|
||
|
||
> 迭代编号：10 ｜ 依据：PLAN-011、R-012
|
||
|
||
## 1. 主题机制（已查明）
|
||
|
||
- 宿主深色主题挂 `body[data-ds-dark-theme]`；
|
||
- 宿主注入 `--dsw-*` CSS 变量（定义在宿主 runtime，随 light/dark/system 切换）；
|
||
- 插件内联 style 直接引用 `var(--dsw-alias-xxx)` 即可自动适配。
|
||
|
||
## 2. 语义映射（实施基准，来自 R-012）
|
||
|
||
```
|
||
背景: #fff(表面) → var(--dsw-alias-bg-layer-1)
|
||
遮罩: rgba(0,0,0,.4) → var(--dsw-alias-bg-mask-1)
|
||
hover面: #f5f5f5 → var(--dsw-alias-interactive-bg-hover)
|
||
激活绿底: #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 → 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)
|
||
红(涨/错/删): #d32f2f/#c62828 → var(--dsw-alias-state-error-primary)
|
||
绿(跌/成/主): #2e7d32 → var(--dsw-alias-state-success-primary)
|
||
实心按钮字: #fff → var(--dsw-alias-button-contrast-fill)
|
||
```
|
||
|
||
## 3. 替换细则
|
||
|
||
- 替换范围：inline style 对象、模板字符串中的颜色字面量；
|
||
- `color-mix(in srgb, var(--xxx) 10%, transparent)` 用于需要「淡底 + 文字同色」的提示/激活态；
|
||
- 带透明度的原色（如 rgba(255,215,0,.5) 价格闪动高亮）保留动画语义，改 `color-mix(in srgb, var(--dsw-alias-state-warn-primary) 50%, transparent)`；
|
||
- 注释中色值仅作说明可保留（不影响运行，验收时以无运行色为准）；
|
||
- 每文件替换后 `node --check` 校验 JSX 语法。
|
||
|
||
## 4. 风险
|
||
|
||
- **语义偏差**：个别颜色无法精确定位语义 → 保留原色并在验收清单标注，交老师确认；
|
||
- **color-mix 兼容性**：现代浏览器（Chrome 111+/Safari 16.2+）支持，DSH 目标为 Chromium 系，可接受；
|
||
- **fallback**：`var(--xxx, <原色>)` 提供兜底，宿主 token 缺失时视觉不变（更安全）。
|