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 (主题适配约定)
2.3 KiB
2.3 KiB
技术实现方案：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 缺失时视觉不变（更安全）。