kyugao
ec02a791ee
- R-027 静态化：策略恒为内置两项（不可增删改名，保留显隐/排序）；设置页移除「策略分组」； 字段配置入口迁到策略 tab 内「列设置」旁（FieldConfigDialog + schema-update 单策略写入） - R-026 计算字段：自写公式引擎（中文变量、四则/括号/round·abs·min·max、缺值短路→—）+ 变量目录（行情/合约/持仓/自定义字段）+ strategy-positions 逐行现算（只读内存缓存，不落库、列只读） - R-028 判定型：比较运算 + and/or + inferResultKind + 结果类型一致性校验 + 判定列 ✓/— 渲染； 网格超市落地 可下空单=涨停价>基准值+网格大小、可下多单=跌停价<基准值-网格大小 - 变量选择改标签平铺（老师反馈）；公式手册 docs/99-其他材料/计算字段公式说明.md - 约束同步：产品约束-002/003/004/009/013/014、技术约束-014/015/022/023/024、UI约束-002/003/005/008 - 回归：新增 test-r026/test-r027，更新 r011/r013/r017，17 个脚本全绿；typecheck/build 通过
26 lines
9.2 KiB
Markdown
26 lines
9.2 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（R-027 后设置页仅此两个子 tab）；配置以**卡片形式**展示（自适应网格 minmax(260px,1fr)，激活卡片绿色描边）：卡片含名称 + 激活/默认徽标 + HTTP 地址 + 行内操作（激活 / 设为默认 / 编辑 / 测试连接 / 删除）+ 新增/编辑表单（纵排两字段）；删除沿用现有确认弹窗模式，删除最后一条时给出禁止提示；超时不设输入框（Q5）；长文本（地址/错误信息）单行省略 + 悬停看全文，组件设 minWidth:0 防撑行 | 2026-08-29 | 生效 | - | 变更（2026-08-29 老师反馈）：列表形式改卡片形式，约束组件宽度、长文本省略不换行；原定稿：设置页子 tab 形态沿用现有设置交互体系；变更（2026-09-02 R-011 定稿）：「通用设置」更名为「Tab 设置」；**变更（2026-09-10 R-027）**：移除「策略分组」子 tab，设置页子 tab 由三变二 |
|
||
| UI约束-003 | 设置页「Tab 设置」子 tab：表格列出**全部会话 tab（系统内置 + 策略分组）混排**，内置行带「内置」徽标、策略行带「策略」徽标；每行 = 拖动手柄（原生 HTML5 Drag & Drop）+ 名称 + 显示/隐藏开关；**任何行均无重命名/删除按钮**；拖动落点确认后**立即持久化**（每次 drop 提交整表，沿用「刷新页面后生效」提示机制）；**落点指示为行间间隙高亮线**（迭代 21，与列设置弹层一致，见 UI约束-007）；「策略分组」子 tab 已移除（R-027 策略静态化），设置页不再有任何策略增删改名入口 | 2026-09-02 | 生效 | - | R-011 定稿（2026-09-02 Q1/Q4/Q5 确认）：拖动排序 + 显隐开关，禁重命名/删除；变更（2026-09-10 R-025 老师指令）：落点从整行高亮改行间间隙高亮线；**变更（2026-09-10 R-027）**：策略 tab 静态化、策略分组子 tab 移除 |
|
||
|
||
| UI约束-005 | 策略自定义字段配置 UI（R-013 → **R-027 入口迁移 + 现状更正**）：**入口** = 策略 tab 顶部「列设置」**旁**的「字段配置」按钮 → 独立弹层（约 520px 宽、70vh 高、内部滚动，锚定弹层视觉同列设置）：字段列表（展示名 / key / 类型 / 公式或默认值 / 单位 / 操作）+ 添加/编辑/删除字段表单（名称/类型/枚举选项/默认值/单位）+ 底部 [关闭] + [保存字段]（保存走 strategies/schema-update 单策略写入）；有未保存改动时关闭需二次确认；**现状更正**：字段**值**不再是「持仓行展开区编辑」，而是**作为持仓表列展示 + 单元格点击内联编辑**（R-013 §4 演进：文本=输入框、数字=数字输入、布尔=开关、枚举=下拉，编辑即保存调 holdings/values-update + Toast）；列显隐/顺序由「列设置」弹层管理（每策略独立）；未配置字段定义的策略该列不存在 | 2026-09-02 | 生效 | - | 新增（2026-09-02 R-013 定稿 D6）；**变更（2026-09-10 R-027/R-026 实施）**：入口由设置页「策略分组」迁至策略 tab 内「字段配置」弹层；同时更正文案到现状（值编辑 = 表格列内联编辑，展开区仅保留交易明细） |
|
||
| 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约束-006 | 展开/收起箭头全站统一：使用共享组件 `ExpandChevron`（src/client/views/ExpandChevron.jsx）——14×14 chevron-right、描边圆角、主题 success 绿、展开时旋转 90°（0.15s 过渡）；适用：策略持仓 tab / 交易记录 tab 表格行、设置页「策略分组」行首箭头（原 ▸/▾ 文字箭头废弃）；不得再散落内联 SVG 或文字符号实现 | 2026-09-03 | 生效 | - | 新增（2026-09-03 老师反馈：设置页策略分组箭头与策略 tab 表格行展开图标一致；顺带消除两处内联 SVG 重复） |
|
||
| UI约束-007 | 列表/弹层排序交互：优先**原生 HTML5 拖拽排序**（draggable 行 + ≡ 拖拽手柄 + drop 重排 + 落点立即持久化，行之间允许 ↑↓ 箭头兜底微调）；**落点指示用间隙高亮线**（两行之间的主色线，指示精确插入位置/分清前与后，不做整行高亮）——策略 tab 列设置弹层（R-024）与设置页 Tab 设置（R-025）均已采用；不做表头直拖列排序（兼容成本高，需处理排序点击/固定列冲突） | 2026-09-10 | 生效 | - | 新增（2026-09-10 R-024 定稿：策略 tab 列设置弹层从 ↑↓ 升级为拖拽排序，复用 Tab 设置已验证模式，去掉「保存」按钮改立即持久化）；变更（2026-09-10 老师反馈：整行高亮无法判断插入前/后，落点改行间间隙高亮线）；变更（2026-09-10 R-025 老师指令：设置页「Tab 设置」落点统一为同款间隙线，整行高亮全站废止） |
|
||
|
||
| UI约束-008 | 计算字段 UI（R-026）：字段类型下拉含「计算」——选中后**隐藏默认值**，显示公式输入框（等宽字体）+ 变量**标签平铺**（行情 / 合约 / 持仓 / 自定义字段 分组成行，每组 = 灰色组名 + 胶囊形 tag，点选即插入光标处；不自弹下拉）+「试算」按钮（用该策略一行真实持仓数据算出结果行内展示：`试算：平安银行 000001.SZ → 6.67 %`；无持仓提示「暂无可试算的持仓数据」）+ **结果类型下拉（数字 / 判定，R-028）**：选「判定」时**隐藏小数位**、公式框 placeholder 切换为判定示例（如 `涨停价 > 基准值 + 网格大小`），公式框下方常驻运算符提示（`运算：+ - × ÷ 括号；判定：> < >= <= == != ，组合：and / or`）+ 判定型试算显示 `→ ✓ 满足 / — 不满足`；数字型仍为小数位输入（0-4，默认 2）；保存失败时公式框**描红**（state-error）+ 显示服务端提示，表单不关闭、改动保留；持仓表中计算列**只读**：表头列名前缀 `ƒ`（tertiary 色，title="计算字段（只读）"）、列头与单元格 title 显示公式原文（`= <公式>`）、**判定型（R-028）**：满足 → `✓ <字段展示名>`（success 绿），不满足或数据缺失 → `—`（tertiary 灰，两者同形以免把「缺数据」误读为「不可以」）；数字型按小数位 + 单位格式化（如 `6.67 %`、`700.00 元`）、缺数据/计算失败显示 `—`（tertiary 色）、点击不进内联编辑；历史持仓行显示 `—`；列设置弹层中该列名同样带 `ƒ` 前缀 | 2026-09-10 | 生效 | - | 新增（2026-09-10 R-026 定稿 + D-1~D-7 老师拍板：中文变量名 + 选择器插入、表头 ƒ 前缀 + 悬停看公式、本期做试算、已删变量 ⚠ 标记、小数位 0-4 默认 2、不做实时高亮）；**变更（2026-09-10 R-028）**：新增「结果类型（数字/判定）」下拉与判定列渲染（`✓ 字段名` / `—`）+ 判定试算；**变更（2026-09-10 老师反馈）**：变量选择从「+ 插入变量 ▾」下拉改为**标签平铺**（分组成行、点选插入），弃用下拉交互；判定型隐藏小数位 |
|
||
|
||
<!-- 示例条目（确认格式后删除）：
|
||
| UI约束-001 | 示例：求签页面必须保持单屏完整，不出现滚动 | 2026-08-26 | 生效 | - | 讨论确认：移动端优先，避免滚动打断仪式感 |
|
||
--> |