You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4.2 KiB
4.2 KiB
TDesign 全面替换 — Wave B(按钮体系 + 分页)
背景
Wave A 已完成全局 Toast/Confirm、业务 t-dialog、Monitor 搜索/勾选。全站仍以原生 <button> 为主(约 150+ 模板开口),仅 LoginView 使用 t-button;无 t-pagination,分页为手写 table-footer。
目标方向不变:基本上都使用组件库,除非特定。
目标
- 管理页与常规壳层的标准命令按钮迁到
t-button。 - 真分页迁到
t-pagination(Users / Firmwares / OpLogs / Account)。 - Devices 假分页换成
t-pagination展示形态(不改后端,不假装可翻页成功)。 TasksView删除任务的window.confirm收口到ui.confirm。
非目标
- 不改后台 API / pageSize 契约。
- 不做 Wave C(Tab/分段、
t-table)。 - 不做完整主题 token 重绘。
- 永久保留原生:
- Monitor 地图底图切换(
.map-type卫星/地图) - Monitor / Control 强定制飞行控制条(workflow / stage / quick-actions /
control-command) LivePlayer覆盖层play-control
- Monitor 地图底图切换(
- Login 方式切换 tab 若仍是分段按钮,本轮可暂留;正式 Tab 归 Wave C。
按钮映射
| 旧 class / 角色 | TDesign |
|---|---|
primary-command / 主操作 |
t-button theme="primary" |
plain-command / cancel / 次操作 |
t-button variant="outline"(或 theme="default") |
icon-command / 仅图标刷新等 |
t-button shape="square" variant="outline",内容保留原 SVG/t-icon |
table-text-action / text-button / 行内文字操作 |
t-button variant="text" theme="primary"(危险操作可用 theme="danger") |
| 弹窗 footer 取消/确认 | 同上 outline / primary;loading/disabled 对齐现逻辑 |
约定:
- 优先保留原
@click/:disabled/ 文案;不改业务语义。 - 不引入
AppButton封装层(避免本轮额外抽象)。 - 必要的密度/间距用页面
:deep或既有 class 挂在t-button上微调,不回退到原生 button。
分页映射
真分页(替换)
| 页面 | 现态 | 目标 |
|---|---|---|
UsersView |
table-footer,pageSize=20 |
t-pagination:v-model:current ↔ pageNum,:total,:page-size="pageSize",@change/@current-change 触发 load |
FirmwaresView |
pageSize=10 |
同上 |
OperationLogsView |
pageSize=20 |
同上 |
AccountView |
4 处「上一页/下一页」(orders/usage/sim/simRecharge) | 各一块 t-pagination,绑定既有 *PageNum / *Total / pageSize=10 |
假分页
DevicesView:现 footer 固定第 1 页且前后禁用。改为t-pagination:total用当前列表长度或接口 total(若无则列表 length),page-size足够大或disabled/page-size等于 total,不发假翻页请求。若体验上“只有一页”,可隐藏分页(v-if="total > pageSize");本轮允许直接隐藏。
无分页 UI(不动)
- Tasks / Alarms / Media 等
pageSize=100一次拉全:本轮不新增分页。
执行切分(按页并行)
- B1 Users + OpLogs + Firmwares:工具栏/行操作按钮 + 真分页
- B2 Devices + Account +
DockEditModal:标准按钮 + Devices 假分页处理 + Account 多段分页 - B3 Tasks / Alarms / Media / System / Replay / SideMenu / DeviceDetail / TopBar(常规按钮;不含飞行控制与 map-type)
- B4
TasksViewwindow.confirm→ui.confirm - 验收 浏览器抽检 + 静态扫描
Monitor/Control 飞行控制与 map-type 明确排除,不进入 B3。
验收
- 目标页常规
primary/plain/icon/text命令按钮为t-button;无对应旧 class 的原生 button(保留清单除外)。 - Users / Firmwares / OpLogs / Account 分页为
t-pagination,翻页仍拉数。 - Monitor
.map-type、Monitor/Control 飞行控制、LivePlayerplay-control 仍为原生。 - 删除任务走
ui.confirm,无window.confirm。 - 登录、监控指令下发主路径不回归。
后续
- Wave C: Tab/分段 +
t-table(含 Login 方式切换若仍原生)。 - 可选:Devices 真分页接后端;控制条视觉 token 化评估。