Browse Source

docs: 流量运营表格 tip 与弹窗 select 误伤修复设计

明确 TrafficOps 三表补齐内置 ellipsis,以及收窄
add-dock-dialog 对 t-select 内部 readonly input 的灰样式误伤。
main
xiaosi 2 weeks ago
parent
commit
940035c436
  1. 92
      docs/superpowers/specs/2026-09-01-table-tip-select-readonly-design.md

92
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(本项目弹窗筛选多为不可手输)。
Loading…
Cancel
Save