优化前端ui

apps/frontend/src/styles/admin-config-pages.css

@@ -146,25 +146,12 @@
   font-size: var(--text-sm);
 }
 
-/* ---------- 数据表 ---------- */
+/* ---------- 数据表 (用于 el-table，具体单元格样式见各页面 :deep() 规则) ---------- */
 .data-table {
   width: 100%;
-  border-collapse: collapse;
   margin-top: 12px;
 }
 
-.data-table th,
-.data-table td {
-  text-align: left;
-  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
-  vertical-align: top;
-}
-
-.data-table th {
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-
 .cell-stack {
   display: grid;
   gap: 4px;

apps/frontend/src/styles/element-overrides.css

@@ -116,4 +116,17 @@
   color: var(--text-muted);
 }
 
-.mt-4 { margin-top: 16px; }
+/* ---- 通用工具类 ---- */
+.mt-4 { margin-top: var(--space-4); }
+.mb-4 { margin-bottom: var(--space-4); }
+.w-full { width: 100%; }
+.text-muted-xs { font-size: var(--text-xs); color: var(--text-muted); }
+.fw-600 { font-weight: 600; }
+.text-danger { color: var(--color-danger); }
+.ml-2 { margin-left: var(--space-2); }
+.pagination-center {
+  margin-top: var(--space-4);
+  display: flex;
+  justify-content: center;
+}
+.filter-col-160 { width: 160px; }

apps/frontend/src/styles/main.css

@@ -3,7 +3,7 @@
   background:
     radial-gradient(circle at top left, rgba(44, 133, 247, 0.22), transparent 32%),
     radial-gradient(circle at top right, rgba(114, 184, 255, 0.18), transparent 26%),
-    linear-gradient(180deg, #eef4ff 0%, #f7fbff 100%);
+    linear-gradient(180deg, var(--bg-page) 0%, #f7fbff 100%);
   font-family: var(--font-sans);
   line-height: 1.5;
   font-weight: 400;

apps/frontend/src/views/admin/audit-logs/AdminAuditLogsView.vue

@@ -93,10 +93,10 @@ onMounted(loadAuditLogs)
             v-model="actorUsername"
             placeholder="操作账号"
             clearable
-            style="width: 160px"
+            class="filter-col-160"
             @keyup.enter="handlePageChange"
           />
-          <el-select v-model="action" placeholder="动作" clearable style="width: 160px">
+          <el-select v-model="action" placeholder="动作" clearable class="filter-col-160">
             <el-option
               v-for="opt in adminAuditActionOptions"
               :key="opt.value"
@@ -104,7 +104,7 @@ onMounted(loadAuditLogs)
               :value="opt.value"
             />
           </el-select>
-          <el-select v-model="targetType" placeholder="目标类型" clearable style="width: 160px">
+          <el-select v-model="targetType" placeholder="目标类型" clearable class="filter-col-160">
             <el-option
               v-for="opt in adminAuditTargetTypeOptions"
               :key="opt.value"
@@ -117,14 +117,14 @@ onMounted(loadAuditLogs)
             type="date"
             placeholder="开始日期"
             value-format="YYYY-MM-DD"
-            style="width: 160px"
+            class="filter-col-160"
           />
           <el-date-picker
             v-model="dateTo"
             type="date"
             placeholder="结束日期"
             value-format="YYYY-MM-DD"
-            style="width: 160px"
+            class="filter-col-160"
           />
           <el-button type="primary" @click="handlePageChange">查询</el-button>
         </div>

apps/frontend/src/views/admin/inventory/AdminInventoryView.vue

@@ -778,7 +778,7 @@ onMounted(async () => {
           :page-size="pagination.pageSize"
           :total="pagination.total"
           layout="total, prev, pager, next"
-          class="mt-4" style="justify-content: center"
+          class="pagination-center"
           @current-change="loadInventoryItems"
         />
       </template>

apps/frontend/src/views/admin/message-deliveries/AdminMessageDeliveriesView.vue

@@ -274,7 +274,7 @@ onMounted(loadMessageDeliveries)
           :page-size="pagination.pageSize"
           :total="pagination.total"
           layout="total, prev, pager, next"
-          class="mt-4" style="justify-content: center"
+          class="pagination-center"
           @current-change="loadMessageDeliveries"
         />
       </template>

apps/frontend/src/views/admin/orders/AdminOrderDetailView.vue

@@ -313,6 +313,9 @@ function formatTaskAutoDeliveryReason(task: AdminOrderDetail['tasks'][number]) {
         </details>
       </section>
     </template>
+
+    <el-empty v-else description="订单不存在或已被删除" />
+
   </section>
 </template>
 

apps/frontend/src/views/admin/orders/AdminOrdersView.vue

@@ -338,7 +338,7 @@ onMounted(() => {
           :page-size="pagination.pageSize"
           :total="pagination.total"
           layout="total, prev, pager, next"
-          class="mt-4" style="justify-content: center"
+          class="pagination-center"
           @current-change="applyFilters"
         />
       </template>

apps/frontend/src/views/admin/platform-shops/AdminPlatformShopsView.vue

@@ -232,7 +232,7 @@ onMounted(loadConfigs)
         type="error"
         show-icon
         :closable="false"
-        style="margin-bottom: 16px"
+        class="mb-4"
       />
 
       <!-- 加载态 -->

apps/frontend/src/views/admin/platform-shops/components/AdminPlatformAgisoSection.vue

@@ -168,7 +168,7 @@ defineProps<Props>()
           <template #default="{ row }">
             <div>
               <div>{{ row.displayShopName || row.shopId }}</div>
-              <div style="font-size: var(--text-xs); color: var(--text-muted)">
+              <div class="text-muted-xs">
                 ID: {{ row.shopId }}
               </div>
             </div>

apps/frontend/src/views/admin/platform-shops/components/AdminPlatformCloudtentaclesSection.vue

@@ -174,7 +174,7 @@ defineProps<Props>()
                 v-model="cloudtentaclesForm.vnId"
                 :min="0"
                 controls-position="right"
-                style="width: 100%"
+                class="w-full"
               />
             </el-form-item>
           </el-col>
@@ -186,7 +186,7 @@ defineProps<Props>()
                 v-model="cloudtentaclesForm.skuId"
                 :min="0"
                 controls-position="right"
-                style="width: 100%"
+                class="w-full"
               />
             </el-form-item>
           </el-col>
@@ -196,7 +196,7 @@ defineProps<Props>()
                 v-model="cloudtentaclesForm.skuCount"
                 :min="1"
                 controls-position="right"
-                style="width: 100%"
+                class="w-full"
               />
             </el-form-item>
           </el-col>
@@ -213,7 +213,7 @@ defineProps<Props>()
                 v-model="cloudtentaclesForm.deviceType"
                 :min="0"
                 controls-position="right"
-                style="width: 100%"
+                class="w-full"
               />
             </el-form-item>
           </el-col>

apps/frontend/src/views/admin/platform-shops/components/AdminPlatformKuaishouEticketSection.vue

@@ -332,7 +332,7 @@ defineProps<Props>()
               <el-select
                 v-model="kuaishouEticketForm.selectedShopId"
                 placeholder="请选择店铺"
-                style="width: 100%"
+                class="w-full"
               >
                 <el-option
                   v-for="shop in kuaishouEticketShops"
@@ -357,7 +357,7 @@ defineProps<Props>()
                     v-model="kuaishouEticketForm.num"
                     :min="1"
                     controls-position="right"
-                    style="width: 100%"
+                    class="w-full"
                   />
                 </el-form-item>
               </el-col>
@@ -374,7 +374,7 @@ defineProps<Props>()
           <template #header>
             <div>
               <span class="card-title">自动回填参数</span>
-              <span class="text-muted" style="margin-left: 8px">查询后生成</span>
+              <span class="text-muted ml-2">查询后生成</span>
             </div>
           </template>
           <el-form label-width="auto" label-position="top">

apps/frontend/src/views/admin/platform-shops/components/AdminPlatformNinetyoneSection.vue

@@ -82,7 +82,7 @@ defineProps<Props>()
         type="error"
         show-icon
         :closable="false"
-        style="margin-bottom: 16px"
+        class="mb-4"
       />
 
       <el-table
@@ -95,8 +95,8 @@ defineProps<Props>()
         <el-table-column label="订单" min-width="180">
           <template #default="{ row }">
             <div>
-              <div style="font-weight: 600">{{ row.orderNo }}</div>
+              <div class="fw-600">{{ row.orderNo }}</div>
-              <div style="font-size: var(--text-xs); color: var(--text-muted)">
+              <div class="text-muted-xs">
                 {{ row.outTradeNo || '-' }}
               </div>
             </div>
@@ -105,11 +105,11 @@ defineProps<Props>()
         <el-table-column label="商品" min-width="180">
           <template #default="{ row }">
             <div>
-              <div style="font-weight: 600">{{ row.productName || row.productNo || '-' }}</div>
+              <div class="fw-600">{{ row.productName || row.productNo || '-' }}</div>
-              <div style="font-size: var(--text-xs); color: var(--text-muted)">
+              <div class="text-muted-xs">
                 productNo: {{ row.productNo || '-' }}
               </div>
-              <div style="font-size: var(--text-xs); color: var(--text-muted)">
+              <div class="text-muted-xs">
                 数量：{{ row.buyNum || 0 }}
               </div>
             </div>
@@ -119,12 +119,12 @@ defineProps<Props>()
           <template #default="{ row }">
             <div>
               <el-tag size="small">{{ row.orderStatus }}</el-tag>
-              <div style="font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px">
+              <div class="text-muted-xs" style="margin-top: 4px">
                 任务 {{ row.taskCount }}
               </div>
               <div
                 v-if="row.failReason"
-                style="font-size: var(--text-xs); color: var(--color-danger)"
+                class="text-xs text-danger"
               >
                 {{ row.failReason }}
               </div>

apps/frontend/src/views/admin/platform-shops/components/AdminPlatformNotificationSection.vue

@@ -162,7 +162,7 @@ function bindDurationUnit(job: EditableScheduledJob, key: 'intervalSeconds' | 'c
         type="error"
         show-icon
         :closable="false"
-        style="margin-bottom: 16px"
+        class="mb-4"
       />
 
       <el-form label-width="auto" label-position="top" inline>
@@ -172,7 +172,7 @@ function bindDurationUnit(job: EditableScheduledJob, key: 'intervalSeconds' | 'c
         <el-form-item
           ><el-switch v-model="notificationForm.barkEnabled" active-text="启用 Bark 通道"
         /></el-form-item>
-        <el-form-item label="Bark 服务地址" style="width: 100%">
+        <el-form-item label="Bark 服务地址" class="w-full">
           <el-input v-model="notificationForm.barkServerUrl" placeholder="https://api.day.app" />
         </el-form-item>
       </el-form>
@@ -237,7 +237,7 @@ function bindDurationUnit(job: EditableScheduledJob, key: 'intervalSeconds' | 'c
         <el-table-column label="任务" min-width="200">
           <template #default="{ row: job }">
             <div>
-              <div style="font-weight: 600">{{ formatJobType(job.type) }}</div>
+              <div class="fw-600">{{ formatJobType(job.type) }}</div>
               <el-switch
                 v-model="job.enabled"
                 size="small"

apps/frontend/src/views/admin/tasks/AdminTaskDetailView.vue

@@ -998,6 +998,9 @@ onBeforeUnmount(clearScreenshotPreview)
         />
       </section>
     </template>
+
+    <el-empty v-else description="任务不存在或已被删除" />
+
   </section>
 </template>
 

apps/frontend/src/views/admin/tasks/AdminTasksView.vue

@@ -398,7 +398,7 @@ function resetFilters() {
           :page-size="pagination.pageSize"
           :total="pagination.total"
           layout="total, prev, pager, next"
-          class="mt-4" style="justify-content: center"
+          class="pagination-center"
           @current-change="loadTasks"
         />
       </template>

apps/frontend/src/views/admin/users/AdminUsersView.vue

@@ -300,8 +300,7 @@ onMounted(loadUsers)
           size="small"
           v-loading="loading"
           element-loading-text="用户列表加载中"
-          class="users-table data-table"
+          class="users-table data-table w-full"
-          style="width: 100%"
         >
           <el-table-column prop="userId" label="ID" width="52" align="center" />
           <el-table-column prop="username" label="账号" width="112" show-overflow-tooltip />
@@ -396,7 +395,7 @@ onMounted(loadUsers)
           :page-size="pagination.pageSize"
           :total="pagination.total"
           layout="total, prev, pager, next"
-          class="mt-4" style="justify-content: center"
+          class="pagination-center"
           @current-change="loadUsers"
         />
       </el-card>

apps/frontend/src/views/admin/webhook-events/AdminWebhookEventsView.vue

@@ -348,7 +348,7 @@ onMounted(() => {
           :page-size="pagination.pageSize"
           :total="pagination.total"
           layout="total, prev, pager, next"
-          class="mt-4" style="justify-content: center"
+          class="pagination-center"
           @current-change="applyFilters"
         />
       </template>