From e064422b4af97fd8e3fea8b0ff0f835421b3757f Mon Sep 17 00:00:00 2001 From: xiaosi <2652281683@qq.com> Date: Fri, 28 Aug 2026 16:40:57 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20TDesign=20?= =?UTF-8?q?=E8=A1=A8=E5=8D=95=E8=BF=81=E7=A7=BB=E7=AC=AC=E4=B8=80=E8=BD=AE?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E8=AE=A1=E5=88=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 按 Devices → Tasks → Firmwares 分任务替换 select/input/number/time。 --- ...6-08-28-tdesign-form-controls-migration.md | 180 ++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 docs/superpowers/plans/2026-08-28-tdesign-form-controls-migration.md diff --git a/docs/superpowers/plans/2026-08-28-tdesign-form-controls-migration.md b/docs/superpowers/plans/2026-08-28-tdesign-form-controls-migration.md new file mode 100644 index 0000000..69c779f --- /dev/null +++ b/docs/superpowers/plans/2026-08-28-tdesign-form-controls-migration.md @@ -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 +
+ + + +
+
+ + + +
+``` + +若去掉自定义 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 + +``` + +注意：原 `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` + 旁注 `m`，或 `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 '