feat: 用户固件操作日志列表切换到 t-table

src/views/FirmwaresView/FirmwaresView.vue

@@ -30,38 +30,31 @@
       </div>
 
       <div class="asset-table-wrap">
-        <table class="asset-table">
-          <thead>
-            <tr>
-              <th style="width:12%">版本</th>
-              <th style="width:14%">组件</th>
-              <th style="width:22%">描述</th>
-              <th style="width:9%">大小</th>
-              <th style="width:8%">升级方式</th>
-              <th style="width:9%">状态</th>
-              <th style="width:16%">创建时间</th>
-              <th style="width:10%">操作</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="f in list" :key="f.id">
-              <td><strong>{{ f.version }}</strong></td>
-              <td>{{ f.component }}</td>
-              <td><span :title="f.description">{{ f.description || '—' }}</span></td>
-              <td>{{ f.sizeText }}</td>
-              <td>{{ f.mandatory ? '强制' : '普通' }}</td>
-              <td><span class="table-status" :class="f.statusClass"><i></i>{{ f.statusName }}</span></td>
-              <td>{{ f.createdAt }}</td>
-              <td>
+        <t-table
+          row-key="id"
+          :data="list"
+          :columns="columns"
+          empty="暂无固件版本"
+        >
+          <template #version="{ row }">
+            <strong>{{ row.version }}</strong>
+          </template>
+          <template #description="{ row }">
+            <span :title="row.description">{{ row.description || '—' }}</span>
+          </template>
+          <template #mandatory="{ row }">
+            {{ row.mandatory ? '强制' : '普通' }}
+          </template>
+          <template #status="{ row }">
+            <span class="table-status" :class="row.statusClass"><i></i>{{ row.statusName }}</span>
+          </template>
+          <template #actions="{ row }">
             <div class="row-actions">
-                  <t-button variant="text" theme="primary" @click="openEdit(f)">编辑</t-button>
-                  <t-button variant="text" theme="danger" shape="square" @click="remove(f)"><svg><use href="#i-trash" /></svg></t-button>
+              <t-button variant="text" theme="primary" @click="openEdit(row)">编辑</t-button>
+              <t-button variant="text" theme="danger" shape="square" @click="remove(row)"><svg><use href="#i-trash" /></svg></t-button>
             </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div v-if="!list.length" class="table-empty">暂无固件版本</div>
+          </template>
+        </t-table>
       </div>
 
       <div class="table-footer">
@@ -147,6 +140,17 @@ const statusOptions = [
   { label: '已弃用', value: 'deprecated' }
 ]
 
+const columns = [
+  { colKey: 'version', title: '版本', width: '12%' },
+  { colKey: 'component', title: '组件', width: '14%' },
+  { colKey: 'description', title: '描述', width: '22%', ellipsis: true },
+  { colKey: 'sizeText', title: '大小', width: '9%' },
+  { colKey: 'mandatory', title: '升级方式', width: '8%' },
+  { colKey: 'status', title: '状态', width: '9%' },
+  { colKey: 'createdAt', title: '创建时间', width: '16%' },
+  { colKey: 'actions', title: '操作', width: '10%' }
+]
+
 const STATUS = {
   draft: { name: '草稿', cls: 'pending' },
   released: { name: '已发布', cls: 'online' },

src/views/OperationLogsView/OperationLogsView.vue

@@ -27,29 +27,19 @@
       </div>
 
       <div class="asset-table-wrap">
-        <table class="asset-table">
-          <thead>
-            <tr>
-              <th style="width:18%">目标机巢</th>
-              <th style="width:20%">控制指令</th>
-              <th style="width:18%">目标飞机</th>
-              <th style="width:12%">执行状态</th>
-              <th style="width:14%">应答结果</th>
-              <th style="width:18%">下发时间</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="c in list" :key="c.id">
-              <td>{{ c.dockId }}</td>
-              <td><strong>{{ c.commandName }}</strong><small>{{ c.commandType }}</small></td>
-              <td>{{ c.droneSn }}</td>
-              <td><span class="table-status" :class="c.statusClass"><i></i>{{ c.statusName }}</span></td>
-              <td>{{ c.result }}</td>
-              <td>{{ c.createdAt }}</td>
-            </tr>
-          </tbody>
-        </table>
-        <div v-if="!list.length" class="table-empty">暂无设备操作记录</div>
+        <t-table
+          row-key="id"
+          :data="list"
+          :columns="columns"
+          empty="暂无设备操作记录"
+        >
+          <template #command="{ row }">
+            <strong>{{ row.commandName }}</strong><small>{{ row.commandType }}</small>
+          </template>
+          <template #status="{ row }">
+            <span class="table-status" :class="row.statusClass"><i></i>{{ row.statusName }}</span>
+          </template>
+        </t-table>
       </div>
 
       <div class="table-footer">
@@ -86,6 +76,15 @@ const statusFilterOptions = [
   { label: '执行失败', value: 'terminal' }
 ]
 
+const columns = [
+  { colKey: 'dockId', title: '目标机巢', width: '18%' },
+  { colKey: 'command', title: '控制指令', width: '20%' },
+  { colKey: 'droneSn', title: '目标飞机', width: '18%' },
+  { colKey: 'status', title: '执行状态', width: '12%' },
+  { colKey: 'result', title: '应答结果', width: '14%' },
+  { colKey: 'createdAt', title: '下发时间', width: '18%' }
+]
+
 const COMMAND_NAMES = {
   'dock.open': '打开舱门',
   'dock.close': '关闭舱门',

src/views/UsersView/UsersView.vue

@@ -27,34 +27,28 @@
       </div>
 
       <div class="asset-table-wrap">
-        <table class="asset-table">
-          <thead>
-            <tr>
-              <th style="width:24%">用户</th>
-              <th style="width:16%">手机号</th>
-              <th style="width:20%">邮箱</th>
-              <th style="width:12%">角色</th>
-              <th style="width:10%">状态</th>
-              <th style="width:18%">注册时间</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="u in users" :key="u.id">
-              <td>
+        <t-table
+          row-key="id"
+          :data="users"
+          :columns="columns"
+          empty="暂无用户"
+        >
+          <template #user="{ row }">
             <div class="asset-name-cell">
-                  <span class="table-asset-icon" :class="u.role === 'admin' ? 'pending' : 'drone'">{{ u.initial }}</span>
-                  <span><strong>{{ u.name }}</strong><small>ID {{ u.id }}</small></span>
+              <span class="table-asset-icon" :class="row.role === 'admin' ? 'pending' : 'drone'">{{ row.initial }}</span>
+              <span><strong>{{ row.name }}</strong><small>ID {{ row.id }}</small></span>
             </div>
-              </td>
-              <td>{{ u.phone }}</td>
-              <td>{{ u.email || '—' }}</td>
-              <td><span class="table-status" :class="u.role === 'admin' ? 'mission' : 'online'"><i></i>{{ u.roleName }}</span></td>
-              <td><span class="table-status" :class="u.statusClass"><i></i>{{ u.statusName }}</span></td>
-              <td>{{ u.createdAt }}</td>
-            </tr>
-          </tbody>
-        </table>
-        <div v-if="!users.length" class="table-empty">暂无用户</div>
+          </template>
+          <template #email="{ row }">
+            {{ row.email || '—' }}
+          </template>
+          <template #role="{ row }">
+            <span class="table-status" :class="row.role === 'admin' ? 'mission' : 'online'"><i></i>{{ row.roleName }}</span>
+          </template>
+          <template #status="{ row }">
+            <span class="table-status" :class="row.statusClass"><i></i>{{ row.statusName }}</span>
+          </template>
+        </t-table>
       </div>
 
       <div class="table-footer">
@@ -91,6 +85,15 @@ const roleFilterOptions = [
   { label: '普通用户', value: 'user' }
 ]
 
+const columns = [
+  { colKey: 'user', title: '用户', width: '24%' },
+  { colKey: 'phone', title: '手机号', width: '16%' },
+  { colKey: 'email', title: '邮箱', width: '20%' },
+  { colKey: 'role', title: '角色', width: '12%' },
+  { colKey: 'status', title: '状态', width: '10%' },
+  { colKey: 'createdAt', title: '注册时间', width: '18%' }
+]
+
 function fmtTime(t) {
   if (!t) return '--'
   const d = new Date(t)