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 (主题适配约定)
21 lines
3.9 KiB
Markdown
21 lines
3.9 KiB
Markdown
# UI交互约束（UI & Interaction Constraints）
|
||
|
||
> UI 与交互层面的约束：视觉风格、组件、交互行为。后续迭代进行界面与交互实现时以此为依据。
|
||
>
|
||
> 记录格式：每条约束包含「编号 / 约束说明 / 添加日期 / 生效状态 / 失效日期 / 最后一次变更描述」。新增追加、变更更新、失效标记状态（不删除记录）。引用用编号，如 `UI约束-001`。
|
||
> **最后一次变更描述**：概括该约束最近一次变更（新增 / 变更 / 失效）讨论的最后一层结论；新增时写新增结论，变更/失效时更新为当次结论。
|
||
|
||
## 约束列表
|
||
|
||
| 编号 | 约束说明 | 添加日期 | 生效状态 | 失效日期 | 最后一次变更描述 |
|
||
|---|---|---|---|---|---|
|
||
| UI约束-001 | 会话头部 QMT 连接切换 chip：紧凑形态 `QMT: <激活配置名> ▾`，与 PTC 模式标签并排；下拉菜单列出全部配置（当前激活项勾选标记），点选即激活；操作结果用顶部轻提示反馈（成功绿/失败红，约 3s 消失，沿用现有 Toast 体系） | 2026-08-29 | 生效 | - | R-004 定稿（2026-08-29）：Q9/Q10 确认的头部控件形态 |
|
||
| UI约束-002 | 设置页「QMT 连接配置」子 tab：与「Tab 设置 / 策略分组」并列的第三个子 tab；配置以**卡片形式**展示（自适应网格 minmax(260px,1fr)，激活卡片绿色描边）：卡片含名称 + 激活/默认徽标 + HTTP 地址 + 行内操作（激活 / 设为默认 / 编辑 / 测试连接 / 删除）+ 新增/编辑表单（纵排两字段）；删除沿用现有确认弹窗模式，删除最后一条时给出禁止提示；超时不设输入框（Q5）；长文本（地址/错误信息）单行省略 + 悬停看全文，组件设 minWidth:0 防撑行 | 2026-08-29 | 生效 | - | 变更（2026-08-29 老师反馈）：列表形式改卡片形式，约束组件宽度、长文本省略不换行；原定稿：设置页子 tab 形态沿用现有设置交互体系；变更（2026-09-02 R-011 定稿）：「通用设置」更名为「Tab 设置」 |
|
||
| UI约束-003 | 设置页「Tab 设置」子 tab：表格列出**全部会话 tab（系统内置 + 策略分组）混排**，内置行带「内置」徽标、策略行带「策略」徽标；每行 = 拖动手柄（原生 HTML5 Drag & Drop）+ 名称 + 显示/隐藏开关；**任何行均无重命名/删除按钮**；拖动落点确认后**立即持久化**（每次 drop 提交整表，沿用「刷新页面后生效」提示机制）；「策略分组」子 tab 只保留 新增/重命名/删除，移除排序箭头与显隐开关，并提示「顺序与显示请在「Tab 设置」中调整」 | 2026-09-02 | 生效 | - | R-011 定稿（2026-09-02 Q1/Q4/Q5 确认）：拖动排序 + 显隐开关，禁重命名/删除 |
|
||
|
||
| UI约束-004 | 神之一手 UI 适配 DSH 主题：所有颜色引用宿主 `--dsw-*` token（带 fallback `var(--dsw-alias-xxx, #原色)`），随 DSH 浅色 / 深色 / 跟随系统自动切换，不自行维护主题偏好（跟随宿主）；语义映射：表面底→bg-layer-1、次级面→bg-layer-2、hover→interactive-bg-hover、主/次/弱文字→label-primary/secondary/tertiary、边框→border-l1..l4、红（涨/删/错）→state-error-primary、绿（跌/成/激活）→state-success-primary、蓝（信息/业务）→state-business-primary、实心按钮字→button-contrast-fill、遮罩→bg-mask-1、阴影→shadow-lv3；淡底用 color-mix(in srgb, var(--语义色) 10-12%, transparent)；禁止硬编码色值（#hex/rgb）进运行代码 | 2026-09-02 | 生效 | - | R-012 定稿（2026-09-02，暂定跟随系统）+ 迭代 10 实施：141 处硬编码色 token 化，宿主机制实证（body[data-ds-dark-theme] + alias token 双值定义） |
|
||
|
||
<!-- 示例条目（确认格式后删除）：
|
||
| UI约束-001 | 示例：求签页面必须保持单屏完整，不出现滚动 | 2026-08-26 | 生效 | - | 讨论确认：移动端优先，避免滚动打断仪式感 |
|
||
-->
|