Browse Source
Break TrafficOps ellipsis enablement and dialog select style override into bite-sized implementable tasks.main
xiaosi
3 weeks ago
1 changed files with 245 additions and 0 deletions
@ -0,0 +1,245 @@ |
|||||
|
# 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，不在本计划扩大范围。 |
||||
Loading…
Reference in new issue