1 changed files with 180 additions and 0 deletions
@ -0,0 +1,180 @@ |
|||||
|
# TDesign Form Controls Migration (Wave 1) 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:** 将 Devices / Tasks / Firmwares 三页业务表单控件迁移到 TDesign,统一 select/input/number/time 体验,不改业务逻辑与后台。 |
||||
|
|
||||
|
**Architecture:** 页面内把原生控件替换为 `t-select` / `t-input` / `t-input-number` / `t-time-picker` / `t-switch`;选项提成 `options` 数组;保持现有 `v-model` 类型与提交校验。Vite 已配置 `TDesignResolver`,无需手动全局注册。 |
||||
|
|
||||
|
**Tech Stack:** Vue 3、`tdesign-vue-next`、现有 `prototype.css` 布局容器 |
||||
|
|
||||
|
**Spec:** `docs/superpowers/specs/2026-08-28-tdesign-form-controls-migration-design.md` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 1: DevicesView 表单控件迁移 |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `src/views/DevicesView/DevicesView.vue` |
||||
|
- Modify (若含原生 input): `src/components/DockEditModal.vue` |
||||
|
|
||||
|
- [ ] **Step 1: 增加 options 常量** |
||||
|
|
||||
|
```js |
||||
|
const statusOptions = [ |
||||
|
{ label: '全部状态', value: '' }, |
||||
|
{ label: '在线', value: 'online' }, |
||||
|
{ label: '任务中', value: 'mission' }, |
||||
|
{ label: '告警', value: 'alarm' }, |
||||
|
{ label: '离线', value: 'offline' }, |
||||
|
{ label: '待连接', value: 'pending' }, |
||||
|
] |
||||
|
const bindingOptions = [ |
||||
|
{ label: '全部绑定状态', value: '' }, |
||||
|
{ label: '已绑定', value: 'bound' }, |
||||
|
{ label: '未绑定', value: 'unbound' }, |
||||
|
] |
||||
|
``` |
||||
|
|
||||
|
升级固件 options 用 computed: |
||||
|
|
||||
|
```js |
||||
|
const upgradeFirmwareOptions = computed(() => |
||||
|
firmwareList.value.map((f) => ({ label: firmwareOptionLabel(f), value: f.id })) |
||||
|
) |
||||
|
``` |
||||
|
|
||||
|
- [ ] **Step 2: 工具栏替换** |
||||
|
|
||||
|
```vue |
||||
|
<div class="asset-search"> |
||||
|
<t-input v-model="search" clearable placeholder="搜索设备名称、编号或 SN"> |
||||
|
<template #prefix-icon><t-icon name="search" /></template> |
||||
|
</t-input> |
||||
|
</div> |
||||
|
<div class="toolbar-group"> |
||||
|
<t-select v-model="statusFilter" :options="statusOptions" placeholder="全部状态" style="width: 140px" /> |
||||
|
<t-select v-model="bindingFilter" :options="bindingOptions" placeholder="全部绑定状态" style="width: 160px" /> |
||||
|
<button class="plain-command" type="button" @click="resetFilters">重置</button> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
若去掉自定义 search SVG 后样式塌陷,给 `.asset-search .t-input` 补 `width:100%`(页面内 style 或复用现有 class)。 |
||||
|
|
||||
|
- [ ] **Step 3: 添加机巢弹窗 inputs** |
||||
|
|
||||
|
文本 → `t-input`(保留 `maxlength`);经纬度 → `t-input-number`(`min/max/step` 对齐现网;`theme="normal"` 或默认,避免过大步进器占宽)。 |
||||
|
|
||||
|
- [ ] **Step 4: 固件升级 select** |
||||
|
|
||||
|
```vue |
||||
|
<t-select |
||||
|
v-model="upgradeFirmwareId" |
||||
|
:options="upgradeFirmwareOptions" |
||||
|
:placeholder="firmwareList.length ? '选择目标版本' : '暂无已发布固件'" |
||||
|
:disabled="!firmwareList.length" |
||||
|
style="width: 100%" |
||||
|
/> |
||||
|
``` |
||||
|
|
||||
|
注意:原 `null` 占位;TDesign 空值可用 `null`/`undefined`,提交逻辑保持原校验。 |
||||
|
|
||||
|
- [ ] **Step 5: DockEditModal** |
||||
|
|
||||
|
若存在原生 input/select,同样替换;无则跳过。 |
||||
|
|
||||
|
- [ ] **Step 6: 冒烟 + commit** |
||||
|
|
||||
|
打开 `/devices`:筛选、搜索、添加机巢弹窗、固件升级下拉。 |
||||
|
|
||||
|
```bash |
||||
|
git add src/views/DevicesView/DevicesView.vue src/components/DockEditModal.vue |
||||
|
git commit -m "feat: 设备管理表单控件切换到 TDesign" |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 2: TasksView 表单控件迁移 |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `src/views/TasksView/TasksView.vue` |
||||
|
|
||||
|
- [ ] **Step 1: 列出所有 select/input/number/time/checkbox 并建 options** |
||||
|
|
||||
|
至少: |
||||
|
- `planFilter` / `execFilter` / `execResultFilter` / `taskForm.dockId` / `taskForm.routeId` / `taskForm.scheduleWeekday` |
||||
|
- 搜索框:`search` / `execSearch` / `routeSearch` |
||||
|
- 表单文本/number/time |
||||
|
- `taskForm.rawRecordingEnabled` → `t-switch` |
||||
|
|
||||
|
设备/航线 options 用 computed 从现有列表生成。 |
||||
|
|
||||
|
- [ ] **Step 2: 工具栏与记录头替换为 t-input / t-select** |
||||
|
|
||||
|
保持 `@change` 触发的过滤行为(Tasks 多为本地 filter,不必 reload API;对齐现逻辑)。 |
||||
|
|
||||
|
- [ ] **Step 3: 任务创建/航线/航点弹窗替换** |
||||
|
|
||||
|
- 文本:`t-input` |
||||
|
- number:`t-input-number`(高度/速度 min/max/step 不变) |
||||
|
- `type="time"` → `t-time-picker`(`format="HH:mm"`,`allowInput` 可开) |
||||
|
- 星期 select → `t-select`(value 为 number) |
||||
|
- 录制开关 → `t-switch` |
||||
|
|
||||
|
自定义 `.number-input` 单位后缀:可用 `t-input-number` + 旁注 `<em>m</em>`,或 `t-input` + `type` 数字若步进器破坏布局;优先 `t-input-number`,布局用 flex 保住单位。 |
||||
|
|
||||
|
- [ ] **Step 4: 冒烟 + commit** |
||||
|
|
||||
|
```bash |
||||
|
git add src/views/TasksView/TasksView.vue |
||||
|
git commit -m "feat: 任务管理表单控件切换到 TDesign" |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 3: FirmwaresView 表单控件迁移 |
||||
|
|
||||
|
**Files:** |
||||
|
- Modify: `src/views/FirmwaresView/FirmwaresView.vue` |
||||
|
|
||||
|
- [ ] **Step 1: statusFilter + 表单 selects → t-select** |
||||
|
|
||||
|
`mandatory` / `status` options 提常量;原 `@change="reload"` 接到 `t-select @change`。 |
||||
|
|
||||
|
- [ ] **Step 2: 搜索与表单 inputs** |
||||
|
|
||||
|
keyword → `t-input` clearable;版本/组件/描述/URL/SHA/签名 → `t-input`;`fileSizeMb` → `t-input-number`。 |
||||
|
|
||||
|
- [ ] **Step 3: 冒烟 + commit** |
||||
|
|
||||
|
```bash |
||||
|
git add src/views/FirmwaresView/FirmwaresView.vue |
||||
|
git commit -m "feat: 固件管理表单控件切换到 TDesign" |
||||
|
``` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
### Task 4: 总验收 |
||||
|
|
||||
|
- [ ] 三页 `rg '<select' src/views/DevicesView src/views/TasksView src/views/FirmwaresView` 应为 0(业务表单) |
||||
|
- [ ] 抽样:筛选变更、弹窗提交字段类型未变 |
||||
|
- [ ] 登录页未回归 |
||||
|
- [ ] 若有样式塌陷,补最小 CSS 后单独 commit:`fix: 调整 TDesign 表单在工具栏的宽度` |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 覆盖对照 |
||||
|
|
||||
|
| Spec | Task | |
||||
|
|------|------| |
||||
|
| Devices 控件 | Task 1 | |
||||
|
| Tasks 控件 | Task 2 | |
||||
|
| Firmwares 控件 | Task 3 | |
||||
|
| v-model/事件约定 | 各 Task | |
||||
|
| 不改后台/其它页 | 全程 | |
||||
|
|
||||
|
## 执行注意 |
||||
|
|
||||
|
- 不要 `git add -A`;只 stage 本任务文件。 |
||||
|
- 跳过全量测试套件;用浏览器冒烟。 |
||||
|
- 后台代码禁止修改。 |
||||
Loading…
Reference in new issue