8.5 KiB

Raw Blame History

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

将：

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%' }
]

改为：

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 已有则保持）

将：

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%' }
]

改为：

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 已有则保持）

将：

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 }
]

改为：

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

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 覆盖

定位现有：

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

注意：若项目该处是压缩单行写法，覆盖规则可用同样风格写成两行或一块多行；不要改动其它 .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

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: 构建

npm run build

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

Step 2: 本地冒烟（dev 或 preview）

npm run dev

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

/traffic-ops 套餐/采购/流水：缩窄窗口或找长文本列，悬停溢出单元格应出现 TDesign tip；未溢出不弹空 tip。
打开「新建/编辑套餐」弹窗：状态 t-select 背景为白、光标 pointer，可展开选择；不再呈禁用灰。
打开机巢编辑弹窗：SN / ICCID 只读输入仍为灰底 not-allowed。
（可选）固件/任务弹窗里的 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，不在本计划扩大范围。

8.5 KiB Raw Blame History