6.0 KiB

Raw Blame History

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 常量

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：

const upgradeFirmwareOptions = computed(() =>
  firmwareList.value.map((f) => ({ label: firmwareOptionLabel(f), value: f.id }))
)

Step 2: 工具栏替换

<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

<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：筛选、搜索、添加机巢弹窗、固件升级下拉。

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

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

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 本任务文件。
跳过全量测试套件；用浏览器冒烟。
后台代码禁止修改。

6.0 KiB Raw Blame History

TDesign Form Controls Migration (Wave 1) Implementation Plan

Task 1: DevicesView 表单控件迁移

Task 2: TasksView 表单控件迁移

Task 3: FirmwaresView 表单控件迁移

Task 4: 总验收

覆盖对照

执行注意

6.0 KiB

Raw Blame History