# TDesign 全面替换 — Wave C(Tab / 分段 + t-table) ## 背景 Wave A/B 已完成反馈层、弹窗、表单、按钮、分页。全站页签与列表表仍为手写:`business-tabs` / `asset-tabs` / `full-detail-tabs`、`mode-segment`,以及 `asset-table` / `business-table` / `record-table` / `communication-table` / Account `.order-head` 伪表。尚无 `t-tabs` / `t-table` / `t-radio-group`。 ## 目标 1. 标准页签迁到 `t-tabs`。 2. 表单内二分段(执行方式 / 转弯方式等)迁到 `t-radio-group`。 3. 标准数据列表迁到 `t-table`(保留操作列与现有 `t-button`)。 4. Login 登录方式切换纳入本轮(`t-tabs` 或 `t-radio-group`)。 ## 非目标 - 不改后台。 - 不启用 `t-table` 内置分页(继续外置 `t-pagination`,避免双绑)。 - 不做完整主题 token 重绘。 - **保留(不换):** - Monitor 设备卡列表 / filter-row、地图 `.map-type` - Monitor / Control 飞行控制条、`LivePlayer` play-control - Alarms 卡片列表、Media 媒体卡栅格、Tasks 航线库卡片栅格 - DeviceDetail `value-table`(KV 布局,非数据网格) ## 映射 ### Tabs | 旧 | 新 | |----|----| | `business-tabs` / `asset-tabs` / `full-detail-tabs` + 原生 button | `t-tabs` `v-model` ↔ 既有 `tab`/`activeTab` 等字段 | | panel 数量角标(如「机巢 3」) | `t-tab-panel` `:label` 用字符串或 slot 拼角标 | | 内容区 `business-panel` 显隐 | `t-tab-panel` 内容,或 tabs 只切状态、原 panel `v-show` 保留——优先 panel 内容迁移,若结构过重可 tabs 控 `tab` + 原 panel | ### 分段 | 旧 | 新 | |----|----| | `mode-segment` 双按钮 | `t-radio-group` `variant="default-filled"`(或 `outline`)`v-model` 对齐原字段 | ### Table | 旧 | 新 | |----|----| | `` | `t-table` `:data` + `:columns` + `row-key` | | Account `.order-head` 伪表 | 同上 `t-table` | | 操作列 | `columns` 中 `cell` / 具名 slot,内嵌现有 `t-button` | | 空态 | `t-table` empty / 现文案 | | 外部分页 | 保持 `t-pagination`,不设 table `pagination` | ## 范围与切分 1. **C1** Users / Firmwares / OpLogs → `t-table` 2. **C2** Devices → `t-tabs` + `t-table` 3. **C3** Tasks → `t-tabs` + 计划/执行 `t-table` + `mode-segment`→`t-radio-group`(航线库卡片不换) 4. **C4** Account → `t-tabs` + 订单/用量/下载/通信卡/充值/会话等列表 `t-table` 5. **C5** Media / System / DeviceDetail / Login → tabs(Media/System 仅 tabs;DeviceDetail tabs + alarms/logs `t-table`;Login 方式切换) 6. **验收** ## 验收 1. 目标页无 `business-tabs`/`asset-tabs`/`full-detail-tabs` 原生 button 页签(保留清单除外)。 2. 目标标准列表为 `t-table`,操作可用。 3. Tasks/相关表单 `mode-segment` 为 `t-radio-group`。 4. Monitor map-type、飞行控制、卡列表、Alarms/Media 卡、航线库卡、value-table 仍非 `t-table` 强改。 5. 登录与列表翻页主路径不回归。 ## 后续 - Monitor/Alarms 卡列表是否组件化另评估。 - 可选 Devices 真分页、table 密度 token。