diff --git a/docs/superpowers/specs/2026-09-01-table-tip-select-readonly-design.md b/docs/superpowers/specs/2026-09-01-table-tip-select-readonly-design.md new file mode 100644 index 0000000..7c9b03f --- /dev/null +++ b/docs/superpowers/specs/2026-09-01-table-tip-select-readonly-design.md @@ -0,0 +1,92 @@ +# 流量运营表格 Tip + 弹窗 Select 误伤修复 + +日期:2026-09-01 +状态:已确认(待实现计划) + +## 背景 + +1. **流量运营表格**:使用 TDesign `t-table`。组件对 `column.ellipsis = true` 的单元格自带溢出检测 + Tooltip;当前多数长文本列未开启,用户悬停看不到完整内容。 +2. **弹窗下拉像禁用**:TDesign `t-select` 在不允许手输时,内部 `t-input` 会带 `t-is-readonly`(仍可点开选择)。全局样式 + +```css +.add-dock-dialog .t-input.t-is-readonly, +.add-dock-dialog .t-input.t-is-readonly .t-input__inner { + color: #77838d; + background: #f2f4f6; + cursor: not-allowed; +} +``` + +把弹窗内所有 Select 染成禁用灰,但功能仍可改,造成误导。该 class 被流量运营/固件/任务/机巢等弹窗共用。 + +## 目标 + +- 流量运营三表:可能被截断的列开启组件自带 ellipsis tip,悬停显示完整内容。 +- 弹窗内可编辑 Select 恢复正常可点样式;真正只读输入(如机巢 SN)仍保持灰样式。 + +## 非目标 + +- 不改表格组件库、不引入第三方 tip 库 +- 不给短字段(状态点、操作列、价格等紧凑列)强开 tip +- 不重做整套弹窗视觉 / 不更换 dialog class 体系 +- 本轮不顺手改其它页面表格 ellipsis(除非与同一 CSS 修复自然受益) + +## 方案 + +### A. 表格:补齐内置 `ellipsis` + +文件:`src/views/TrafficOpsView/TrafficOpsView.vue` + +对下列列设置 `ellipsis: true`(已有则保持): + +| Tab | 列 | +|---|---| +| 套餐 | `code`, `name` | +| 采购 | `batchNo`, `provider`, `remark`(`remark` 已有) | +| 流水 | `amountText`, `balanceText`, `sourceType`, `sourceId`, `idempotencyKey`(后两者已有) | + +说明: + +- Tip 内容由 TDesign 默认取单元格渲染结果;仅在检测到文本溢出时展示。 +- 不额外写原生 `title` / 自定义 slot tip。 +- 状态、操作、排序、短枚举列不开。 + +### B. Select:收窄 readonly 灰样式 + +文件:`src/styles/prototype.css`(约 L722) + +现有规则会把所有带 `t-is-readonly` 的输入染成灰。TDesign Select 内部 input 默认带该 class,但并非禁用。 + +落地写法:保留原灰样式,再追加一条更高优先级覆盖,仅恢复 `.t-select` 内 input 的可交互外观: + +```css +.add-dock-dialog .t-input.t-is-readonly, +.add-dock-dialog .t-input.t-is-readonly .t-input__inner { + color: #77838d; + background: #f2f4f6; + cursor: not-allowed; +} + +/* Select 内部 input 默认 readonly,但不是禁用;恢复可交互外观 */ +.add-dock-dialog .t-select .t-input.t-is-readonly, +.add-dock-dialog .t-select .t-input.t-is-readonly .t-input__inner { + color: var(--ink); + background: #fff; + cursor: pointer; +} +``` + +真 `disabled` 的 Select / Input 仍走 TDesign `.t-is-disabled`,不受影响。 +`DockEditModal` 等对 SN/ICCID 使用的独立 `t-input readonly` 继续吃第一条灰规则。 + +## 验收 + +1. 流量运营:长编码/名称/备注/幂等键等溢出后悬停出现 tip;未溢出不无故弹空 tip。 +2. 新建/编辑套餐、固件、任务等弹窗:状态等 `t-select` 不再呈现禁用灰,可正常展开选择。 +3. 机巢编辑弹窗 SN/ICCID 只读输入仍为灰色不可编辑外观。 +4. `npm run build` 通过;按既有流程部署(若用户要求上线)。 + +## 风险 + +- 百分比列宽下,偶发「视觉截断但 scrollWidth 未判定溢出」→ tip 不出现;属组件溢出检测特性。若验收仍不满意,再单开任务改固定 `minWidth` 或兜底 title。 +- 覆盖 Select readonly 样式时需确认未误伤 `allowInput` 可输入型 Select(本项目弹窗筛选多为不可手输)。