laic-frontend/docs/superpowers/specs/2026-09-01-table-tip-select-readonly-design.md

流量运营表格 Tip + 弹窗 Select 误伤修复

日期：2026-09-01
状态：已确认（待实现计划）

背景

1. 流量运营表格：使用 TDesign t-table。组件对 column.ellipsis = true 的单元格自带溢出检测 + Tooltip；当前多数长文本列未开启，用户悬停看不到完整内容。
2. 弹窗下拉像禁用：TDesign t-select 在不允许手输时，内部 t-input 会带 t-is-readonly（仍可点开选择）。全局样式

.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 的可交互外观：

.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（本项目弹窗筛选多为不可手输）。