# Table Tip + Select Readonly Fix Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 流量运营三表长文本列启用 TDesign 内置 ellipsis tip；弹窗内 `t-select` 不再被 `.t-is-readonly` 全局灰样式误伤。

**Architecture:** 纯前端小改。表格只改 `TrafficOpsView.vue` 的列定义；样式在 `prototype.css` 保留原 readonly 灰规则，再追加一条 `.t-select` 覆盖恢复可交互外观。无后端、无新依赖。

**Tech Stack:** Vue 3、tdesign-vue-next `t-table` / `t-select`、现有 `prototype.css`

**Spec:** `docs/superpowers/specs/2026-09-01-table-tip-select-readonly-design.md`

---

## File map

| 文件 | 职责 |
|---|---|
| `src/views/TrafficOpsView/TrafficOpsView.vue` | 套餐/采购/流水列补齐 `ellipsis: true` |
| `src/styles/prototype.css` | 追加 Select 内 readonly input 覆盖样式 |

无测试框架；验收用 `npm run build` + 浏览器冒烟（流量运营表 tip、弹窗 Select 外观、机巢 SN 仍灰）。

---

### Task 1: TrafficOps 三表补齐 `ellipsis`

**Files:**
- Modify: `src/views/TrafficOpsView/TrafficOpsView.vue`（`pkgColumns` / `purchaseColumns` / `ledgerColumns`）

- [ ] **Step 1: 改 `pkgColumns`，给 `code` / `name` 加 ellipsis**

将：

```js
const pkgColumns = [
  { colKey: 'code', title: '编码', width: '12%' },
  { colKey: 'name', title: '名称', width: '14%' },
  { colKey: 'amountText', title: '额度', width: '10%' },
  { colKey: 'priceText', title: '价格', width: '8%' },
  { colKey: 'validityText', title: '有效期', width: '10%' },
  { colKey: 'status', title: '状态', width: '8%' },
  { colKey: 'sort', title: '排序', width: '6%' },
  { colKey: 'updatedAt', title: '更新时间', width: '16%' },
  { colKey: 'actions', title: '操作', width: '12%' }
]
```

改为：

```js
const pkgColumns = [
  { colKey: 'code', title: '编码', width: '12%', ellipsis: true },
  { colKey: 'name', title: '名称', width: '14%', ellipsis: true },
  { colKey: 'amountText', title: '额度', width: '10%' },
  { colKey: 'priceText', title: '价格', width: '8%' },
  { colKey: 'validityText', title: '有效期', width: '10%' },
  { colKey: 'status', title: '状态', width: '8%' },
  { colKey: 'sort', title: '排序', width: '6%' },
  { colKey: 'updatedAt', title: '更新时间', width: '16%' },
  { colKey: 'actions', title: '操作', width: '12%' }
]
```

- [ ] **Step 2: 改 `purchaseColumns`，给 `batchNo` / `provider` 加 ellipsis（`remark` 已有则保持）**

将：

```js
const purchaseColumns = [
  { colKey: 'batchNo', title: '批次号', width: '12%' },
  { colKey: 'provider', title: '供应商', width: '10%' },
  { colKey: 'totalText', title: '总量', width: '10%' },
  { colKey: 'costText', title: '成本', width: '10%' },
  { colKey: 'expiresAt', title: '到期', width: '14%' },
  { colKey: 'statusName', title: '状态', width: '8%' },
  { colKey: 'remark', title: '备注', width: '14%', ellipsis: true },
  { colKey: 'createdAt', title: '创建时间', width: '16%' }
]
```

改为：

```js
const purchaseColumns = [
  { colKey: 'batchNo', title: '批次号', width: '12%', ellipsis: true },
  { colKey: 'provider', title: '供应商', width: '10%', ellipsis: true },
  { colKey: 'totalText', title: '总量', width: '10%' },
  { colKey: 'costText', title: '成本', width: '10%' },
  { colKey: 'expiresAt', title: '到期', width: '14%' },
  { colKey: 'statusName', title: '状态', width: '8%' },
  { colKey: 'remark', title: '备注', width: '14%', ellipsis: true },
  { colKey: 'createdAt', title: '创建时间', width: '16%' }
]
```

- [ ] **Step 3: 改 `ledgerColumns`，给 `amountText` / `balanceText` / `sourceType` 加 ellipsis（`sourceId` / `idempotencyKey` 已有则保持）**

将：

```js
const ledgerColumns = [
  { colKey: 'createdAt', title: '时间', width: '14%' },
  { colKey: 'accountType', title: '账户类型', width: '8%' },
  { colKey: 'accountId', title: '账户ID', width: '10%' },
  { colKey: 'direction', title: '方向', width: '7%' },
  { colKey: 'amountText', title: '金额', width: '12%' },
  { colKey: 'balanceText', title: '余额前→后', width: '14%' },
  { colKey: 'sourceType', title: '来源', width: '10%' },
  { colKey: 'sourceId', title: '来源ID', width: '10%', ellipsis: true },
  { colKey: 'idempotencyKey', title: '幂等键', width: '12%', ellipsis: true }
]
```

改为：

```js
const ledgerColumns = [
  { colKey: 'createdAt', title: '时间', width: '14%' },
  { colKey: 'accountType', title: '账户类型', width: '8%' },
  { colKey: 'accountId', title: '账户ID', width: '10%' },
  { colKey: 'direction', title: '方向', width: '7%' },
  { colKey: 'amountText', title: '金额', width: '12%', ellipsis: true },
  { colKey: 'balanceText', title: '余额前→后', width: '14%', ellipsis: true },
  { colKey: 'sourceType', title: '来源', width: '10%', ellipsis: true },
  { colKey: 'sourceId', title: '来源ID', width: '10%', ellipsis: true },
  { colKey: 'idempotencyKey', title: '幂等键', width: '12%', ellipsis: true }
]
```

- [ ] **Step 4: 静态核对**

确认三处列定义里：

- 有 tip：`code` `name` `batchNo` `provider` `remark` `amountText` `balanceText` `sourceType` `sourceId` `idempotencyKey`
- 无 tip：`status` `actions` `sort` `priceText` `statusName` `direction` 等短列

- [ ] **Step 5: Commit**

```bash
git add src/views/TrafficOpsView/TrafficOpsView.vue
git commit -m "$(cat <<'EOF'
fix: enable table ellipsis tips on traffic ops columns

Turn on TDesign built-in ellipsis for long text columns in
package, purchase, and ledger tables.
EOF
)"
```

---

### Task 2: 修复弹窗 Select 被 readonly 灰样式误伤

**Files:**
- Modify: `src/styles/prototype.css`（约 L722）

- [ ] **Step 1: 在现有 readonly 灰规则后追加 Select 覆盖**

定位现有：

```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; }
```

在其后紧跟追加（保持原规则不动）：

```css
/* 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;
}
```

注意：若项目该处是压缩单行写法，覆盖规则可用同样风格写成两行或一块多行；不要改动其它 `.add-dock-dialog .t-input*` 规则。

- [ ] **Step 2: 核对选择器作用域**

- 命中：`.add-dock-dialog .t-select .t-input.t-is-readonly`（弹窗内可改下拉）
- 不命中：独立 `t-input` readonly（如机巢 SN / ICCID）
- 不抢真禁用：`.t-is-disabled` 仍由 TDesign 默认样式控制

- [ ] **Step 3: Commit**

```bash
git add src/styles/prototype.css
git commit -m "$(cat <<'EOF'
fix: stop styling selectable dialog selects as disabled

Override add-dock-dialog readonly input greying for t-select
inner inputs while keeping true readonly fields grey.
EOF
)"
```

---

### Task 3: 构建 + 浏览器冒烟

**Files:** 无代码改动

- [ ] **Step 1: 构建**

```bash
npm run build
```

Expected: 成功退出，无 Vue/CSS 语法错误。

- [ ] **Step 2: 本地冒烟（dev 或 preview）**

```bash
npm run dev
```

浏览器检查（管理员账号）：

1. `/traffic-ops` 套餐/采购/流水：缩窄窗口或找长文本列，悬停溢出单元格应出现 TDesign tip；未溢出不弹空 tip。
2. 打开「新建/编辑套餐」弹窗：状态 `t-select` 背景为白、光标 pointer，可展开选择；不再呈禁用灰。
3. 打开机巢编辑弹窗：SN / ICCID 只读输入仍为灰底 `not-allowed`。
4. （可选）固件/任务弹窗里的 `t-select` 同样不再误灰。

- [ ] **Step 3: 若用户要求上线，按既有部署流程发布**

本计划不强制部署；仅在用户明确要求时执行既有 frontend 部署命令。

---

## Spec coverage checklist

| Spec 要求 | Task |
|---|---|
| 套餐 `code`/`name` ellipsis | Task 1 Step 1 |
| 采购 `batchNo`/`provider`/`remark` ellipsis | Task 1 Step 2 |
| 流水 `amountText`/`balanceText`/`sourceType`/`sourceId`/`idempotencyKey` ellipsis | Task 1 Step 3 |
| 不手写 title / 不改短列 | Task 1 Step 4 |
| Select readonly 覆盖、真 readonly 仍灰 | Task 2 |
| build + 验收 | Task 3 |

## Risks

- 百分比列宽下组件溢出检测偶发不触发 tip：属 TDesign 特性；若验收仍不满，另开任务改 `minWidth` 或兜底 title，不在本计划扩大范围。