diff --git a/apps/frontend/src/components.d.ts b/apps/frontend/src/components.d.ts
index ede26fde..8fef90aa 100644
--- a/apps/frontend/src/components.d.ts
+++ b/apps/frontend/src/components.d.ts
@@ -11,6 +11,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AdminPageHeader: typeof import('./components/admin/AdminPageHeader.vue')['default']
     AdminPaginationBar: typeof import('./components/admin/AdminPaginationBar.vue')['default']
     AdminPlatformAgisoSection: typeof import('./components/admin/AdminPlatformAgisoSection.vue')['default']
     AdminPlatformCloudtentaclesSection: typeof import('./components/admin/AdminPlatformCloudtentaclesSection.vue')['default']
@@ -21,27 +22,35 @@ declare module 'vue' {
     AdminStatusTag: typeof import('./components/admin/AdminStatusTag.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElResult: typeof import('element-plus/es')['ElResult']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElStatistic: typeof import('element-plus/es')['ElStatistic']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
diff --git a/apps/frontend/src/components/admin/AdminPageHeader.vue b/apps/frontend/src/components/admin/AdminPageHeader.vue
new file mode 100644
index 00000000..f79b1fcc
--- /dev/null
+++ b/apps/frontend/src/components/admin/AdminPageHeader.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div class="page-header">
+    <div>
+      <h1>{{ title }}</h1>
+      <p v-if="description">{{ description }}</p>
+    </div>
+    <div v-if="$slots.extra" class="header-extra">
+      <slot name="extra" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+
+.page-header h1 {
+  margin: 0;
+  font-size: var(--text-3xl);
+  color: var(--text-primary);
+}
+
+.page-header p {
+  margin: var(--space-2) 0 0;
+  color: var(--text-secondary);
+}
+
+.header-extra {
+  display: flex;
+  gap: var(--space-2);
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+}
+
+@media (max-width: 900px) {
+  .page-header {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/apps/frontend/src/views/admin/AdminAuditLogsView.vue b/apps/frontend/src/views/admin/AdminAuditLogsView.vue
index 4041d838..3cf32f6b 100644
--- a/apps/frontend/src/views/admin/AdminAuditLogsView.vue
+++ b/apps/frontend/src/views/admin/AdminAuditLogsView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 
-import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
+import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
 import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
 import { fetchAdminAuditLogs } from '@/services/admin'
 import type { AdminAuditLogItem, AdminPagination } from '@/types/admin'
@@ -25,7 +25,7 @@ const pagination = ref<AdminPagination>({
   total: 0,
 })
 
-async function loadAuditLogs(page = pagination.value.page) {
+async function loadAuditLogs(page = 1) {
   if (!hasAdminRole('admin')) {
     loading.value = false
     return
@@ -53,6 +53,10 @@ async function loadAuditLogs(page = pagination.value.page) {
   }
 }
 
+function handlePageChange() {
+  loadAuditLogs(pagination.value.page)
+}
+
 function formatPayload(payload: Record<string, unknown>) {
   const text = stringifyDisplayJson(payload, 0)
   return text.length > 120 ? `${text.slice(0, 120)}...` : text
@@ -68,165 +72,133 @@ onMounted(loadAuditLogs)
 </script>
 
 <template>
-  <section class="admin-panel">
-    <header class="panel-header">
-      <div>
-        <h1>操作审计</h1>
-        <p>集中查看高风险后台动作，便于排查谁在什么时间改了什么。</p>
-      </div>
-      <span class="meta-copy">{{ totalLabel }}</span>
-    </header>
+  <div class="audit-page">
+    <AdminPageHeader title="操作审计" description="集中查看高风险后台动作，便于排查谁在什么时间改了什么。">
+      <template #extra>
+        <span class="total-label">{{ totalLabel }}</span>
+      </template>
+    </AdminPageHeader>
 
-    <div v-if="!hasAdminRole('admin')" class="empty-block">仅管理员可以访问操作审计。</div>
+    <!-- 权限检查 -->
+    <el-result
+      v-if="!hasAdminRole('admin')"
+      icon="warning"
+      title="仅管理员可以访问操作审计"
+    />
 
     <template v-else>
-      <section class="filter-bar">
-        <input v-model="actorUsername" class="text-input" placeholder="操作账号" />
-        <select v-model="action" class="text-input select-input">
-          <option v-for="option in adminAuditActionOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-        <select v-model="targetType" class="text-input select-input">
-          <option v-for="option in adminAuditTargetTypeOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-      </section>
+      <!-- 筛选栏 -->
+      <el-card shadow="never" class="filter-card">
+        <div class="filter-row">
+          <el-input
+            v-model="actorUsername"
+            placeholder="操作账号"
+            clearable
+            style="width: 160px"
+            @keyup.enter="handlePageChange"
+          />
+          <el-select v-model="action" placeholder="动作" clearable style="width: 160px">
+            <el-option v-for="opt in adminAuditActionOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+          </el-select>
+          <el-select v-model="targetType" placeholder="目标类型" clearable style="width: 160px">
+            <el-option v-for="opt in adminAuditTargetTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+          </el-select>
+          <el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" style="width: 160px" />
+          <el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 160px" />
+          <el-button type="primary" @click="handlePageChange">查询</el-button>
+        </div>
+      </el-card>
 
-      <section class="filter-bar">
-        <input v-model="dateFrom" class="text-input" type="date" placeholder="开始日期" />
-        <input v-model="dateTo" class="text-input" type="date" placeholder="结束日期" />
-        <el-button round type="primary" @click="() => loadAuditLogs()">查询</el-button>
-      </section>
+      <!-- 错误提示 -->
+      <el-alert
+        v-if="errorMessage"
+        :title="errorMessage"
+        type="error"
+        show-icon
+        :closable="false"
+        style="margin-top: 16px"
+      />
 
-      <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
-      <div v-if="loading" class="empty-block">审计日志加载中</div>
+      <!-- 表格 -->
+      <el-card shadow="never" class="table-card" style="margin-top: 16px">
+        <el-table
+          :data="items"
+          stripe
+          size="small"
+          v-loading="loading"
+          element-loading-text="审计日志加载中"
+        >
+          <el-table-column label="时间" width="180">
+            <template #default="{ row }">{{ formatAdminDateTime(row.createdAt) }}</template>
+          </el-table-column>
+          <el-table-column prop="actorUsername" label="操作人" width="120" />
+          <el-table-column label="角色" width="100">
+            <template #default="{ row }"><AdminStatusTag :status="row.actorRole" /></template>
+          </el-table-column>
+          <el-table-column label="动作" width="140">
+            <template #default="{ row }">
+              <strong>{{ formatAuditAction(row.action) }}</strong>
+            </template>
+          </el-table-column>
+          <el-table-column label="目标" min-width="160">
+            <template #default="{ row }">
+              <strong>{{ resolveTargetLabel(row.targetType, row.targetId) }}</strong>
+            </template>
+          </el-table-column>
+          <el-table-column label="摘要" min-width="200">
+            <template #default="{ row }">
+              <span class="payload-text">{{ formatPayload(row.payload) }}</span>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <el-empty :image-size="60" description="暂无审计记录" />
+          </template>
+        </el-table>
 
-      <div v-else class="table-card">
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th>时间</th>
-              <th>操作人</th>
-              <th>角色</th>
-              <th>动作</th>
-              <th>目标</th>
-              <th>摘要</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in items" :key="item.logId">
-              <td>{{ formatAdminDateTime(item.createdAt) }}</td>
-              <td>{{ item.actorUsername }}</td>
-              <td><AdminStatusTag :status="item.actorRole" /></td>
-              <td>
-                <strong>{{ formatAuditAction(item.action) }}</strong>
-              </td>
-              <td>
-                <strong>{{ resolveTargetLabel(item.targetType, item.targetId) }}</strong>
-              </td>
-              <td class="payload-cell">{{ formatPayload(item.payload) }}</td>
-            </tr>
-          </tbody>
-        </table>
-        <AdminPaginationBar
-          :page="pagination.page"
+        <!-- 分页 -->
+        <el-pagination
+          v-if="pagination.total > 0"
+          v-model:current-page="pagination.page"
           :page-size="pagination.pageSize"
           :total="pagination.total"
-          :loading="loading"
-          @change="loadAuditLogs"
+          layout="total, prev, pager, next"
+          @current-change="handlePageChange"
         />
-      </div>
+      </el-card>
     </template>
-  </section>
+  </div>
 </template>
 
 <style scoped>
-.admin-panel {
+.audit-page {
   display: grid;
-  gap: 16px;
+  gap: 0;
 }
 
-.panel-header {
+.total-label {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+}
+
+.filter-card {
+  margin-top: var(--space-4);
+}
+
+.filter-row {
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.panel-header h1 {
-  margin: 0;
-  color: #1d3555;
-}
-
-.panel-header p {
-  margin: 8px 0 0;
-  color: #64748b;
-}
-
-.meta-copy {
-  color: #64748b;
-  font-size: 13px;
-}
-
-.filter-bar,
-.table-card,
-.empty-block,
-.error-copy {
-  padding: 18px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-}
-
-.filter-bar {
-  display: flex;
-  gap: 12px;
+  gap: var(--space-3);
   align-items: center;
+  flex-wrap: wrap;
 }
 
-.error-copy {
-  color: #b42318;
+.table-card {
+  overflow: visible;
 }
 
-.text-input {
-  width: 100%;
-  min-height: 42px;
-  padding: 0 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.94);
-}
-
-.select-input {
-  appearance: none;
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.data-table th,
-.data-table td {
-  padding: 12px 10px;
-  text-align: left;
-  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
-  color: #334155;
-  vertical-align: top;
-}
-
-.data-table th {
-  color: #64748b;
-  font-size: 13px;
-}
-
-.payload-cell {
-  max-width: 420px;
-  word-break: break-all;
+.payload-text {
   font-family: var(--font-mono);
-  font-size: 12px;
+  font-size: var(--text-xs);
+  word-break: break-all;
+  color: var(--text-secondary);
 }
-
 </style>
diff --git a/apps/frontend/src/views/admin/AdminDashboardView.vue b/apps/frontend/src/views/admin/AdminDashboardView.vue
index d35409d6..65223764 100644
--- a/apps/frontend/src/views/admin/AdminDashboardView.vue
+++ b/apps/frontend/src/views/admin/AdminDashboardView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 
+import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
 import { fetchAdminDashboardSummary } from '@/services/admin'
 import type { AdminDashboardSummary } from '@/types/admin'
 
@@ -30,84 +31,57 @@ const cards = [
 </script>
 
 <template>
-  <section class="admin-panel">
-    <header class="panel-header">
-      <div>
-        <h1>系统概览</h1>
-        <p>快速查看订单和交付链路的运行状态。</p>
-      </div>
-    </header>
+  <div class="dashboard-page">
+    <AdminPageHeader title="系统概览" description="快速查看订单和交付链路的运行状态。" />
 
-    <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
+    <el-alert
+      v-if="errorMessage"
+      :title="errorMessage"
+      type="error"
+      show-icon
+      :closable="false"
+      style="margin-top: 16px"
+    />
+
+    <el-skeleton v-if="loading" :rows="12" animated style="margin-top: 16px" />
 
-    <div v-if="loading" class="empty-block">概览加载中</div>
     <div v-else class="summary-grid">
-      <article v-for="card in cards" :key="card.key" class="summary-card">
-        <span>{{ card.label }}</span>
-        <strong>{{ summary?.[card.key] ?? 0 }}</strong>
-      </article>
+      <el-card v-for="card in cards" :key="card.key" shadow="never" class="stat-card">
+        <span class="stat-label">{{ card.label }}</span>
+        <strong class="stat-value">{{ summary?.[card.key] ?? 0 }}</strong>
+      </el-card>
     </div>
-  </section>
+  </div>
 </template>
 
 <style scoped>
-.admin-panel {
-  display: grid;
-  gap: 18px;
-}
-
-.panel-header h1 {
-  margin: 0;
-  font-size: 28px;
-  color: #1d3555;
-}
-
-.panel-header p {
-  margin: 8px 0 0;
-  color: #64748b;
-}
+.dashboard-page { display: grid; gap: 0; }
 
 .summary-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
+  gap: var(--space-4);
+  margin-top: var(--space-4);
 }
 
-.summary-card {
-  padding: 18px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-  box-shadow: 0 18px 44px rgba(30, 49, 78, 0.08);
+.stat-card {
+  text-align: left;
 }
 
-.summary-card span {
+.stat-label {
   display: block;
-  color: #6a7a91;
-  font-size: 13px;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
 }
 
-.summary-card strong {
+.stat-value {
   display: block;
   margin-top: 10px;
-  font-size: 28px;
-  color: #1f324a;
+  font-size: var(--text-3xl);
+  color: var(--text-primary);
 }
 
-.empty-block,
-.error-copy {
-  padding: 16px 18px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.94);
-}
-
-.error-copy {
-  color: #b42318;
-}
-
-@media (max-width: 980px) {
-  .summary-grid {
-    grid-template-columns: 1fr;
-  }
+@media (max-width: 900px) {
+  .summary-grid { grid-template-columns: 1fr; }
 }
 </style>
diff --git a/apps/frontend/src/views/admin/AdminFulfillmentBindingsView.vue b/apps/frontend/src/views/admin/AdminFulfillmentBindingsView.vue
index 65f07361..ef9ba7e8 100644
--- a/apps/frontend/src/views/admin/AdminFulfillmentBindingsView.vue
+++ b/apps/frontend/src/views/admin/AdminFulfillmentBindingsView.vue
@@ -919,13 +919,13 @@ onMounted(loadConfigs)
 .panel-header h1,
 .section-title-row h3 {
   margin: 0;
-  color: #1d3555;
+  color: var(--text-primary);
 }
 
 .panel-header p,
 .section-title-row p {
   margin: 6px 0 0;
-  color: #64748b;
+  color: var(--text-secondary);
 }
 
 .panel-header {
@@ -957,7 +957,7 @@ onMounted(loadConfigs)
   border-radius: 999px;
   background: rgba(37, 89, 167, 0.08);
   border: 1px solid rgba(37, 89, 167, 0.12);
-  color: #2559a7;
+  color: var(--color-primary-dark);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.04em;
@@ -999,7 +999,7 @@ onMounted(loadConfigs)
   padding: 8px 12px;
   border-radius: 14px;
   background: rgba(15, 23, 42, 0.05);
-  color: #1d3555;
+  color: var(--text-primary);
   word-break: break-all;
 }
 
@@ -1019,13 +1019,13 @@ onMounted(loadConfigs)
 }
 
 .overview-stat span {
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 12px;
   font-weight: 700;
 }
 
 .overview-stat strong {
-  color: #1d3555;
+  color: var(--text-primary);
   font-size: 22px;
   line-height: 1.1;
 }
@@ -1043,7 +1043,7 @@ onMounted(loadConfigs)
   padding: 0 12px;
   border-radius: 999px;
   background: rgba(15, 23, 42, 0.04);
-  color: #475467;
+  color: var(--text-secondary);
   font-size: 12px;
   font-weight: 600;
 }
@@ -1084,7 +1084,7 @@ onMounted(loadConfigs)
 
 .toolbar-hint {
   margin: 10px 0 0;
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 12px;
 }
 
@@ -1103,7 +1103,7 @@ onMounted(loadConfigs)
 }
 
 .lookup-summary-item strong {
-  color: #1d3555;
+  color: var(--text-primary);
 }
 
 .binding-card {
@@ -1137,11 +1137,11 @@ onMounted(loadConfigs)
   gap: 10px;
   align-items: center;
   flex-wrap: wrap;
-  color: #1d3555;
+  color: var(--text-primary);
 }
 
 .binding-subtle {
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 13px;
 }
 
@@ -1164,7 +1164,7 @@ onMounted(loadConfigs)
 .collapse-button {
   border: 1px solid rgba(86, 108, 138, 0.18);
   background: rgba(255, 255, 255, 0.96);
-  color: #1d3555;
+  color: var(--text-primary);
   border-radius: 999px;
   padding: 7px 12px;
   font: inherit;
@@ -1174,7 +1174,7 @@ onMounted(loadConfigs)
 .binding-collapsed-preview {
   display: grid;
   gap: 6px;
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 13px;
 }
 
@@ -1190,7 +1190,7 @@ onMounted(loadConfigs)
   border-radius: 14px;
   background: #fff4f2;
   border: 1px solid rgba(244, 63, 94, 0.18);
-  color: #b42318;
+  color: var(--color-danger);
   font-weight: 600;
 }
 
@@ -1200,13 +1200,13 @@ onMounted(loadConfigs)
 }
 
 .field-block span {
-  color: #475467;
+  color: var(--text-secondary);
   font-size: 12px;
   font-weight: 700;
 }
 
 .field-help {
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 12px;
   line-height: 1.5;
 }
@@ -1236,13 +1236,13 @@ onMounted(loadConfigs)
 }
 
 .text-input--readonly {
-  color: #475467;
+  color: var(--text-secondary);
   background: rgba(148, 163, 184, 0.08);
 }
 
 .binding-inline-error {
   margin: 10px 0 0;
-  color: #b42318;
+  color: var(--color-danger);
   font-size: 13px;
   font-weight: 600;
 }
@@ -1259,7 +1259,7 @@ onMounted(loadConfigs)
   display: inline-flex;
   gap: 8px;
   align-items: center;
-  color: #475467;
+  color: var(--text-secondary);
 }
 
 .data-table {
@@ -1273,12 +1273,12 @@ onMounted(loadConfigs)
   padding: 12px 10px;
   text-align: left;
   border-bottom: 1px solid rgba(86, 108, 138, 0.08);
-  color: #334155;
+  color: var(--text-primary);
   vertical-align: top;
 }
 
 .data-table th {
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 13px;
 }
 
@@ -1288,17 +1288,17 @@ onMounted(loadConfigs)
 }
 
 .cell-subtle {
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 12px;
 }
 
 .empty-block,
 .empty-inline {
-  color: #64748b;
+  color: var(--text-secondary);
 }
 
 .error-copy {
-  color: #b42318;
+  color: var(--color-danger);
 }
 
 @media (max-width: 980px) {
diff --git a/apps/frontend/src/views/admin/AdminInventoryView.vue b/apps/frontend/src/views/admin/AdminInventoryView.vue
index 5bac0d07..41348d2d 100644
--- a/apps/frontend/src/views/admin/AdminInventoryView.vue
+++ b/apps/frontend/src/views/admin/AdminInventoryView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 
-import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
+import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
 import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
 import { showConfirm, showError, showSuccess } from '@/lib/feedback'
 import {
@@ -15,10 +15,7 @@ import {
 import type { AdminInventoryItemListItem, AdminInventorySkuSuggestion, AdminPagination } from '@/types/admin'
 import { hasAdminRole } from '@/utils/admin-auth'
 import { formatAdminDateTime } from '@/utils/admin-time'
-import {
-  adminInventoryCredentialTypeOptions,
-  adminInventoryStatusOptions,
-} from '@/utils/admin-options'
+import { adminInventoryCredentialTypeOptions, adminInventoryStatusOptions } from '@/utils/admin-options'
 
 type InventoryImportRow = {
   skuCode: string
@@ -75,27 +72,14 @@ const pageSummary = computed(() => {
   const reservedCount = items.value.filter((item) => item.status === 'reserved').length
   const deliveredCount = items.value.filter((item) => item.status === 'consumed').length
   const invalidCount = items.value.filter((item) => item.status === 'invalid').length
-
-  return {
-    availableCount,
-    reservedCount,
-    deliveredCount,
-    invalidCount,
-  }
+  return { availableCount, reservedCount, deliveredCount, invalidCount }
 })
 
 const inventoryGroups = computed<InventoryPoolGroup[]>(() => {
   const groupMap = new Map<string, {
-    skuCode: string
-    credentialType: string
-    inventoryGroupCode: string
-    totalCount: number
-    availableCount: number
-    reservedCount: number
-    deliveredCount: number
-    invalidCount: number
-    latestUpdatedAt: string
-    batches: Set<string>
+    skuCode: string; credentialType: string; inventoryGroupCode: string
+    totalCount: number; availableCount: number; reservedCount: number; deliveredCount: number; invalidCount: number
+    latestUpdatedAt: string; batches: Set<string>
   }>()
 
   for (const item of items.value) {
@@ -104,61 +88,34 @@ const inventoryGroups = computed<InventoryPoolGroup[]>(() => {
       skuCode: item.skuCode,
       credentialType: item.credentialType || 'tencent_code',
       inventoryGroupCode: item.inventoryGroupCode || '',
-      totalCount: 0,
-      availableCount: 0,
-      reservedCount: 0,
-      deliveredCount: 0,
-      invalidCount: 0,
+      totalCount: 0, availableCount: 0, reservedCount: 0, deliveredCount: 0, invalidCount: 0,
       latestUpdatedAt: item.updatedAt,
       batches: new Set<string>(),
     }
 
     current.totalCount += 1
+    if (item.status === 'available') current.availableCount += 1
+    else if (item.status === 'reserved') current.reservedCount += 1
+    else if (item.status === 'consumed') current.deliveredCount += 1
+    else if (item.status === 'invalid') current.invalidCount += 1
 
-    if (item.status === 'available') {
-      current.availableCount += 1
-    } else if (item.status === 'reserved') {
-      current.reservedCount += 1
-    } else if (item.status === 'consumed') {
-      current.deliveredCount += 1
-    } else if (item.status === 'invalid') {
-      current.invalidCount += 1
-    }
-
-    if (item.batchNo) {
-      current.batches.add(item.batchNo)
-    }
-
-    if (String(item.updatedAt || '') > String(current.latestUpdatedAt || '')) {
-      current.latestUpdatedAt = item.updatedAt
-    }
-
+    if (item.batchNo) current.batches.add(item.batchNo)
+    if (String(item.updatedAt || '') > String(current.latestUpdatedAt || '')) current.latestUpdatedAt = item.updatedAt
     groupMap.set(key, current)
   }
 
   return Array.from(groupMap.entries())
     .map(([key, value]) => ({
       key,
-      skuCode: value.skuCode,
-      credentialType: value.credentialType,
-      inventoryGroupCode: value.inventoryGroupCode,
-      totalCount: value.totalCount,
-      availableCount: value.availableCount,
-      reservedCount: value.reservedCount,
-      deliveredCount: value.deliveredCount,
-      invalidCount: value.invalidCount,
+      skuCode: value.skuCode, credentialType: value.credentialType, inventoryGroupCode: value.inventoryGroupCode,
+      totalCount: value.totalCount, availableCount: value.availableCount, reservedCount: value.reservedCount,
+      deliveredCount: value.deliveredCount, invalidCount: value.invalidCount,
       latestUpdatedAt: value.latestUpdatedAt,
       batchSummary: value.batches.size > 0 ? Array.from(value.batches).slice(0, 3).join(' / ') : '未分批',
     }))
     .sort((left, right) => {
-      if (right.availableCount !== left.availableCount) {
-        return right.availableCount - left.availableCount
-      }
-
-      if (right.reservedCount !== left.reservedCount) {
-        return right.reservedCount - left.reservedCount
-      }
-
+      if (right.availableCount !== left.availableCount) return right.availableCount - left.availableCount
+      if (right.reservedCount !== left.reservedCount) return right.reservedCount - left.reservedCount
       return left.skuCode.localeCompare(right.skuCode)
     })
 })
@@ -171,14 +128,8 @@ const pageOverview = computed(() => ({
 const entrySkuSuggestions = computed(() => {
   const keyword = entrySkuCode.value.trim().toLowerCase()
   const suggestions = inventorySkuSuggestions.value.filter((item) => item.credentialType === entryCredentialType.value)
-
-  if (!keyword) {
-    return suggestions.slice(0, 12)
-  }
-
-  return suggestions
-    .filter((item) => item.skuCode.toLowerCase().includes(keyword))
-    .slice(0, 12)
+  if (!keyword) return suggestions.slice(0, 12)
+  return suggestions.filter((item) => item.skuCode.toLowerCase().includes(keyword)).slice(0, 12)
 })
 
 function getCredentialTypeLabel(value: string) {
@@ -189,71 +140,31 @@ function getCredentialTypeLabel(value: string) {
 
 function getCredentialTypeHint(value: string) {
   const normalized = String(value || '').trim()
-
-  if (normalized === 'tencent_code') {
-    return '当前腾讯自动领取链路会优先预占这一类兑换码，三角洲行动这类场景就使用这个类型。内部 SKU 支持中文、英文和数字混用。'
-  }
-
-  if (normalized === 'card_password') {
-    return '适合卡号 / 卡密一体的库存项。'
-  }
-
-  if (normalized === 'account_password') {
-    return '适合账号密码、账号令牌等组合凭据。'
-  }
-
-  if (normalized === 'activation_link') {
-    return '适合直接发链接的激活类库存。'
-  }
-
-  if (normalized === 'text_credential') {
-    return '适合任意纯文本凭据。'
-  }
-
+  if (normalized === 'tencent_code') return '当前腾讯自动领取链路会优先预占这一类兑换码，三角洲行动这类场景就使用这个类型。内部 SKU 支持中文、英文和数字混用。'
+  if (normalized === 'card_password') return '适合卡号 / 卡密一体的库存项。'
+  if (normalized === 'account_password') return '适合账号密码、账号令牌等组合凭据。'
+  if (normalized === 'activation_link') return '适合直接发链接的激活类库存。'
+  if (normalized === 'text_credential') return '适合任意纯文本凭据。'
   return '库存预占时会按凭据类型与内部履约 SKU 一起匹配。'
 }
 
 function getSkuNamingHint() {
-  if (entrySkuSuggestions.value.length > 0) {
-    return `当前凭据类型下已有 ${entrySkuSuggestions.value.length} 个可复用的内部 SKU，也可以直接输入新的中文或英文名称。`
-  }
-
+  if (entrySkuSuggestions.value.length > 0) return `当前凭据类型下已有 ${entrySkuSuggestions.value.length} 个可复用的内部 SKU，也可以直接输入新的中文或英文名称。`
   return '内部 SKU 支持中文、英文、数字和常见连接符。建议同一类商品长期使用同一个命名，方便共用库存池。'
 }
 
 function formatInventoryStatus(item: AdminInventoryItemListItem) {
-  if (item.status === 'consumed') {
-    return '已完成发放'
-  }
-
-  if (item.status === 'reserved') {
-    return '已被任务预占'
-  }
-
-  if (item.status === 'invalid') {
-    return '已手动作废'
-  }
-
+  if (item.status === 'consumed') return '已完成发放'
+  if (item.status === 'reserved') return '已被任务预占'
+  if (item.status === 'invalid') return '已手动作废'
   return '可参与后续自动分配'
 }
 
 function getGroupSuggestion(group: InventoryPoolGroup) {
-  if (group.availableCount > 0) {
-    return `当前还有 ${group.availableCount} 条可直接分配的库存，可以继续承接订单。`
-  }
-
-  if (group.reservedCount > 0) {
-    return `当前没有可用库存，但有 ${group.reservedCount} 条正在被任务预占，建议优先检查任务进度。`
-  }
-
-  if (group.deliveredCount > 0 && group.invalidCount === 0) {
-    return '当前页看到的库存都已经发放完成，若继续售卖需要补新的库存项。'
-  }
-
-  if (group.invalidCount > 0 && group.totalCount === group.invalidCount) {
-    return '当前页这组库存都已作废，建议重新补充可用库存。'
-  }
-
+  if (group.availableCount > 0) return `当前还有 ${group.availableCount} 条可直接分配的库存，可以继续承接订单。`
+  if (group.reservedCount > 0) return `当前没有可用库存，但有 ${group.reservedCount} 条正在被任务预占，建议优先检查任务进度。`
+  if (group.deliveredCount > 0 && group.invalidCount === 0) return '当前页看到的库存都已经发放完成，若继续售卖需要补新的库存项。'
+  if (group.invalidCount > 0 && group.totalCount === group.invalidCount) return '当前页这组库存都已作废，建议重新补充可用库存。'
   return '当前页没有可立即分配的库存，建议补库存或检查对应履约任务。'
 }
 
@@ -268,22 +179,14 @@ function useGroupAsEntry(group: InventoryPoolGroup) {
   entrySkuCode.value = group.skuCode
   entryCredentialType.value = group.credentialType
   entryInventoryGroupCode.value = group.inventoryGroupCode
-  if (group.batchSummary !== '未分批' && !group.batchSummary.includes(' / ')) {
-    entryBatchNo.value = group.batchSummary
-  }
+  if (group.batchSummary !== '未分批' && !group.batchSummary.includes(' / ')) entryBatchNo.value = group.batchSummary
   showSuccess(`已把 ${group.skuCode} / ${group.credentialType} / ${group.inventoryGroupCode || '未分组'} 填入入库表单`)
 }
 
-function applySkuSuggestion(skuCode: string) {
-  entrySkuCode.value = String(skuCode || '').trim()
-}
+function applySkuSuggestion(skuCode: string) { entrySkuCode.value = String(skuCode || '').trim() }
 
 function buildImportRows() {
-  const lines = bulkText.value
-    .split('\n')
-    .map((line) => line.trim())
-    .filter(Boolean)
-
+  const lines = bulkText.value.split('\n').map((line) => line.trim()).filter(Boolean)
   const rows: InventoryImportRow[] = []
   const defaultSkuCode = entrySkuCode.value.trim()
   const defaultCredentialType = entryCredentialType.value.trim() || 'tencent_code'
@@ -293,285 +196,154 @@ function buildImportRows() {
     const line = lines[index]
     if (line.includes('|')) {
       const parts = line.split('|').map((part) => part.trim())
-
-      if (parts.length !== 4 && parts.length !== 5) {
-        throw new Error(`第 ${index + 1} 行格式不正确，请使用 内部SKU|凭据类型|批次号|库存组|凭据内容`)
-      }
-
-      const [skuCode, credentialType, batchNo, inventoryGroupCode, displayValue] = parts.length === 5
-        ? parts
-        : [parts[0], parts[1], parts[2], '', parts[3]]
-      if (!skuCode || !displayValue) {
-        throw new Error(`第 ${index + 1} 行缺少内部 SKU 或凭据内容`)
-      }
-
-      rows.push({
-        skuCode,
-        credentialType: credentialType || defaultCredentialType,
-        batchNo,
-        inventoryGroupCode: inventoryGroupCode || entryInventoryGroupCode.value.trim(),
-        displayValue,
-      })
+      if (parts.length !== 4 && parts.length !== 5) throw new Error(`第 ${index + 1} 行格式不正确，请使用 内部SKU|凭据类型|批次号|库存组|凭据内容`)
+      const [skuCode, credentialType, batchNo, inventoryGroupCode, displayValue] = parts.length === 5 ? parts : [parts[0], parts[1], parts[2], '', parts[3]]
+      if (!skuCode || !displayValue) throw new Error(`第 ${index + 1} 行缺少内部 SKU 或凭据内容`)
+      rows.push({ skuCode, credentialType: credentialType || defaultCredentialType, batchNo, inventoryGroupCode: inventoryGroupCode || entryInventoryGroupCode.value.trim(), displayValue })
       continue
     }
-
-    if (!defaultSkuCode) {
-      throw new Error('存在未带内部 SKU 的行，请先填写默认内部履约 SKU，或改用四列导入格式')
-    }
-
-    rows.push({
-      skuCode: defaultSkuCode,
-      credentialType: defaultCredentialType,
-      batchNo: defaultBatchNo,
-      inventoryGroupCode: entryInventoryGroupCode.value.trim(),
-      displayValue: line,
-    })
+    if (!defaultSkuCode) throw new Error('存在未带内部 SKU 的行，请先填写默认内部履约 SKU，或改用四列导入格式')
+    rows.push({ skuCode: defaultSkuCode, credentialType: defaultCredentialType, batchNo: defaultBatchNo, inventoryGroupCode: entryInventoryGroupCode.value.trim(), displayValue: line })
   }
-
   return rows
 }
 
 async function loadInventoryItems(page = pagination.value.page) {
-  loading.value = true
-  errorMessage.value = ''
-
+  loading.value = true; errorMessage.value = ''
   try {
     const response = await fetchAdminInventoryItems({
-      page,
-      pageSize: pagination.value.pageSize,
-      skuCode: filterSkuCode.value.trim(),
-      credentialType: filterCredentialType.value.trim(),
-      status: filterStatus.value.trim(),
-      batchNo: filterBatchNo.value.trim(),
+      page, pageSize: pagination.value.pageSize,
+      skuCode: filterSkuCode.value.trim(), credentialType: filterCredentialType.value.trim(),
+      status: filterStatus.value.trim(), batchNo: filterBatchNo.value.trim(),
       inventoryGroupCode: filterInventoryGroupCode.value.trim(),
     })
-    items.value = response.data.items
-    pagination.value = response.data.pagination
-  } catch (error) {
-    errorMessage.value = error instanceof Error ? error.message : '读取库存列表失败'
-  } finally {
-    loading.value = false
-  }
+    items.value = response.data.items; pagination.value = response.data.pagination
+  } catch (error) { errorMessage.value = error instanceof Error ? error.message : '读取库存列表失败' }
+  finally { loading.value = false }
 }
 
 async function loadInventorySkuSuggestions() {
   skuSuggestionsLoading.value = true
-
   try {
-    const response = await fetchAdminInventorySkuSuggestions({
-      credentialType: entryCredentialType.value.trim() || 'tencent_code',
-      inventoryGroupCode: entryInventoryGroupCode.value.trim(),
-      limit: 50,
-    })
+    const response = await fetchAdminInventorySkuSuggestions({ credentialType: entryCredentialType.value.trim() || 'tencent_code', inventoryGroupCode: entryInventoryGroupCode.value.trim(), limit: 50 })
     inventorySkuSuggestions.value = response.data.items
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '读取内部 SKU 建议失败')
-  } finally {
-    skuSuggestionsLoading.value = false
-  }
+  } catch (error) { showError(error instanceof Error ? error.message : '读取内部 SKU 建议失败') }
+  finally { skuSuggestionsLoading.value = false }
 }
 
 function resetFilters() {
-  filterSkuCode.value = ''
-  filterCredentialType.value = ''
-  filterStatus.value = ''
-  filterBatchNo.value = ''
-  filterInventoryGroupCode.value = ''
+  filterSkuCode.value = ''; filterCredentialType.value = ''; filterStatus.value = ''
+  filterBatchNo.value = ''; filterInventoryGroupCode.value = ''
   void loadInventoryItems(1)
 }
 
 async function submitCreate() {
-  if (!entrySkuCode.value.trim() || !singleDisplayValue.value.trim()) {
-    showError('请先填写内部履约 SKU 和凭据内容')
-    return
-  }
-
+  if (!entrySkuCode.value.trim() || !singleDisplayValue.value.trim()) { showError('请先填写内部履约 SKU 和凭据内容'); return }
   creating.value = true
-
   try {
-    await createAdminInventoryItem({
-      skuCode: entrySkuCode.value.trim(),
-      credentialType: entryCredentialType.value.trim() || 'tencent_code',
-      batchNo: entryBatchNo.value.trim(),
-      inventoryGroupCode: entryInventoryGroupCode.value.trim(),
-      displayValue: singleDisplayValue.value.trim(),
-    })
-
-    showSuccess('库存项已新增')
-    singleDisplayValue.value = ''
+    await createAdminInventoryItem({ skuCode: entrySkuCode.value.trim(), credentialType: entryCredentialType.value.trim() || 'tencent_code', batchNo: entryBatchNo.value.trim(), inventoryGroupCode: entryInventoryGroupCode.value.trim(), displayValue: singleDisplayValue.value.trim() })
+    showSuccess('库存项已新增'); singleDisplayValue.value = ''
     await loadInventoryItems(1)
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '新增库存项失败')
-  } finally {
-    creating.value = false
-  }
+  } catch (error) { showError(error instanceof Error ? error.message : '新增库存项失败') }
+  finally { creating.value = false }
 }
 
 async function submitImport() {
-  const rawLines = bulkText.value
-    .split('\n')
-    .map((line) => line.trim())
-    .filter(Boolean)
-
-  if (rawLines.length === 0) {
-    showError('请至少输入一条待导入库存')
-    return
-  }
-
+  const rawLines = bulkText.value.split('\n').map((line) => line.trim()).filter(Boolean)
+  if (rawLines.length === 0) { showError('请至少输入一条待导入库存'); return }
   importing.value = true
-
   try {
     const rows = buildImportRows()
     const response = await importAdminInventoryItems({ rows })
-
     showSuccess(`导入完成，新增 ${response.data.created} 条，重复 ${response.data.duplicated} 条`)
     bulkText.value = ''
     await loadInventoryItems(1)
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '导入失败')
-  } finally {
-    importing.value = false
-  }
+  } catch (error) { showError(error instanceof Error ? error.message : '导入失败') }
+  finally { importing.value = false }
 }
 
-async function runRowAction(
-  inventoryItemId: number,
-  action: () => Promise<unknown>,
-  successMessage: string,
-  confirmText: string,
-) {
-  try {
-    await showConfirm(confirmText, '确认操作', {
-      type: 'warning',
-      confirmButtonText: '继续执行',
-      cancelButtonText: '取消',
-    })
-  } catch {
-    return
-  }
-
+async function runRowAction(inventoryItemId: number, action: () => Promise<unknown>, successMessage: string, confirmText: string) {
+  try { await showConfirm(confirmText, '确认操作', { type: 'warning', confirmButtonText: '继续执行', cancelButtonText: '取消' }) }
+  catch { return }
   actionLoadingId.value = inventoryItemId
-
-  try {
-    await action()
-    showSuccess(successMessage)
-    await loadInventoryItems()
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '操作失败')
-  } finally {
-    actionLoadingId.value = null
-  }
+  try { await action(); showSuccess(successMessage); await loadInventoryItems() }
+  catch (error) { showError(error instanceof Error ? error.message : '操作失败') }
+  finally { actionLoadingId.value = null }
 }
 
-watch(entryCredentialType, () => {
-  void loadInventorySkuSuggestions()
-})
+watch(entryCredentialType, () => { void loadInventorySkuSuggestions() })
+watch(entryInventoryGroupCode, () => { void loadInventorySkuSuggestions() })
 
-watch(entryInventoryGroupCode, () => {
-  void loadInventorySkuSuggestions()
-})
-
-onMounted(async () => {
-  await Promise.all([
-    loadInventoryItems(),
-    loadInventorySkuSuggestions(),
-  ])
-})
+onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySkuSuggestions()]) })
 </script>
 
 <template>
-  <section class="admin-panel">
-    <header class="panel-header">
-      <div class="panel-header-copy">
-        <h1>库存管理</h1>
-        <p>按内部履约 SKU 和凭据类型管理库存、预占和发放。</p>
-      </div>
-      <div class="header-tags">
-        <span class="header-tag">按 SKU + 凭据类型入池</span>
-        <span class="header-tag">腾讯兑换优先使用 `tencent_code`</span>
-        <span class="header-tag">命中库存后自动流转或转人工</span>
-      </div>
-    </header>
-
-    <section class="filter-card">
-      <div class="card-head">
-        <div>
-          <h2>查询库存池</h2>
-          <p>按内部履约 SKU、凭据类型、批次和状态快速定位库存。</p>
+  <div class="inventory-page">
+    <AdminPageHeader title="库存管理" description="按内部履约 SKU 和凭据类型管理库存、预占和发放。">
+      <template #extra>
+        <div class="header-tags">
+          <span class="header-tag">按 SKU + 凭据类型入池</span>
+          <span class="header-tag">腾讯兑换优先使用 tencent_code</span>
+          <span class="header-tag">命中库存后自动流转或转人工</span>
         </div>
-      </div>
+      </template>
+    </AdminPageHeader>
+
+    <!-- 查询筛选 -->
+    <el-card shadow="never" class="section-card">
+      <template #header>
+        <div>
+          <span class="card-title">查询库存池</span>
+          <p class="card-desc">按内部履约 SKU、凭据类型、批次和状态快速定位库存。</p>
+        </div>
+      </template>
       <div class="form-grid">
-        <input v-model="filterSkuCode" class="text-input" placeholder="内部履约 SKU，例如 sjz_hdl_test01" />
-        <select v-model="filterCredentialType" class="text-input select-input">
-          <option v-for="option in adminInventoryCredentialTypeOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-        <select v-model="filterStatus" class="text-input select-input">
-          <option v-for="option in adminInventoryStatusOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-        <input v-model="filterBatchNo" class="text-input" placeholder="批次号" />
-        <input v-model="filterInventoryGroupCode" class="text-input" placeholder="库存组，例如 A组" />
+        <el-input v-model="filterSkuCode" placeholder="内部履约 SKU，例如 sjz_hdl_test01" clearable @keyup.enter="loadInventoryItems(1)" />
+        <el-select v-model="filterCredentialType" placeholder="凭据类型" clearable>
+          <el-option v-for="opt in adminInventoryCredentialTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+        </el-select>
+        <el-select v-model="filterStatus" placeholder="状态" clearable>
+          <el-option v-for="opt in adminInventoryStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+        </el-select>
+        <el-input v-model="filterBatchNo" placeholder="批次号" clearable @keyup.enter="loadInventoryItems(1)" />
+        <el-input v-model="filterInventoryGroupCode" placeholder="库存组，例如 A组" clearable @keyup.enter="loadInventoryItems(1)" />
       </div>
       <div class="action-row">
-        <el-button round type="primary" @click="() => loadInventoryItems(1)">查询列表</el-button>
+        <el-button round type="primary" @click="loadInventoryItems(1)">查询列表</el-button>
         <el-button round @click="resetFilters">清空筛选</el-button>
       </div>
-    </section>
+    </el-card>
 
-    <section class="import-card">
-      <div class="card-head">
+    <!-- 入库与导入 -->
+    <el-card shadow="never" class="section-card">
+      <template #header>
         <div>
-          <h2>入库与导入</h2>
-          <p>填写内部履约 SKU，不是平台侧 `sku_code`。建议同类商品长期复用同一个内部名称。</p>
+          <span class="card-title">入库与导入</span>
+          <p class="card-desc">填写内部履约 SKU，不是平台侧 sku_code。建议同类商品长期复用同一个内部名称。</p>
         </div>
-      </div>
+      </template>
 
       <div class="form-grid">
         <div class="sku-input-wrap">
-          <input
-            v-model="entrySkuCode"
-            list="inventory-sku-suggestions"
-            class="text-input"
-            placeholder="内部履约 SKU，可选已有同类型，也可自定义新的中文名"
-          />
+          <input v-model="entrySkuCode" list="inventory-sku-suggestions" class="native-input" placeholder="内部履约 SKU，可选已有同类型，也可自定义新的中文名" />
           <datalist id="inventory-sku-suggestions">
-            <option
-              v-for="suggestion in entrySkuSuggestions"
-              :key="`${suggestion.credentialType}-${suggestion.inventoryGroupCode}-${suggestion.skuCode}`"
-              :value="suggestion.skuCode"
-              :label="`${suggestion.skuCode} · ${suggestion.inventoryGroupCode || '未分组'} · 可用 ${suggestion.availableCount} / 共 ${suggestion.totalCount}`"
-            />
+            <option v-for="suggestion in entrySkuSuggestions" :key="`${suggestion.credentialType}-${suggestion.inventoryGroupCode}-${suggestion.skuCode}`" :value="suggestion.skuCode" :label="`${suggestion.skuCode} · ${suggestion.inventoryGroupCode || '未分组'} · 可用 ${suggestion.availableCount} / 共 ${suggestion.totalCount}`" />
           </datalist>
         </div>
-        <select v-model="entryCredentialType" class="text-input select-input">
-          <option
-            v-for="option in adminInventoryCredentialTypeOptions.filter((item) => item.value)"
-            :key="option.value"
-            :value="option.value"
-          >
-            {{ option.label }}
-          </option>
-        </select>
-        <input v-model="entryBatchNo" class="text-input" placeholder="批次号，可选" />
-        <input v-model="entryInventoryGroupCode" class="text-input" placeholder="库存组，例如 A组 / B组" />
+        <el-select v-model="entryCredentialType" placeholder="凭据类型">
+          <el-option v-for="opt in adminInventoryCredentialTypeOptions.filter((item) => item.value)" :key="opt.value" :label="opt.label" :value="opt.value" />
+        </el-select>
+        <el-input v-model="entryBatchNo" placeholder="批次号，可选" clearable />
+        <el-input v-model="entryInventoryGroupCode" placeholder="库存组，例如 A组 / B组" clearable />
       </div>
 
       <div class="sku-helper-bar">
-        <span class="section-tip sku-helper-copy">{{ getSkuNamingHint() }}</span>
-        <span v-if="skuSuggestionsLoading" class="section-tip">正在加载同类型内部 SKU…</span>
+        <span class="helper-text">{{ getSkuNamingHint() }}</span>
+        <span v-if="skuSuggestionsLoading" class="helper-text">正在加载同类型内部 SKU...</span>
       </div>
 
       <div v-if="entrySkuSuggestions.length > 0" class="sku-chip-row">
-        <button
-          v-for="suggestion in entrySkuSuggestions"
-          :key="`${suggestion.credentialType}-${suggestion.inventoryGroupCode}-${suggestion.skuCode}-chip`"
-          type="button"
-          class="sku-chip"
-          @click="applySkuSuggestion(suggestion.skuCode)"
-        >
+        <button v-for="suggestion in entrySkuSuggestions" :key="`${suggestion.credentialType}-${suggestion.inventoryGroupCode}-${suggestion.skuCode}-chip`" type="button" class="sku-chip" @click="applySkuSuggestion(suggestion.skuCode)">
           <span class="sku-chip-title">{{ suggestion.skuCode }}</span>
           <span class="sku-chip-meta">{{ suggestion.inventoryGroupCode || '未分组' }} · 可用 {{ suggestion.availableCount }} / 共 {{ suggestion.totalCount }}</span>
         </button>
@@ -593,630 +365,293 @@ onMounted(async () => {
       </div>
 
       <div class="single-row">
-        <input v-model="singleDisplayValue" class="text-input" placeholder="单条新增的凭据内容" />
+        <el-input v-model="singleDisplayValue" placeholder="单条新增的凭据内容" @keyup.enter="submitCreate" />
         <el-button :loading="creating" round type="success" @click="submitCreate">单条新增</el-button>
       </div>
 
-      <textarea
+      <el-input
         v-model="bulkText"
-        class="text-area"
+        type="textarea"
+        :rows="8"
         placeholder="批量导入支持两种格式：&#10;1. 每行一个凭据内容（使用上方默认内部 SKU / 凭据类型 / 批次 / 库存组）&#10;2. 每行一条：内部SKU|凭据类型|批次号|库存组|凭据内容"
+        style="margin-top: 14px"
       />
-      <p class="section-tip">示例：`sjz_hdl_test01|tencent_code|sjz-20260412|A组|DJQFf7HgXXXXXXXXXX`</p>
+      <p class="helper-text" style="margin-top: 8px">示例：sjz_hdl_test01|tencent_code|sjz-20260412|A组|DJQFf7HgXXXXXXXXXX</p>
 
       <div class="action-row">
         <el-button :loading="importing" round type="primary" @click="submitImport">批量导入</el-button>
       </div>
-    </section>
+    </el-card>
 
-    <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
-    <div v-if="loading" class="empty-block">库存列表加载中</div>
+    <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
 
-    <div v-else-if="items.length === 0" class="empty-block">
-      当前筛选下没有库存项，可以先在上方录入内部履约 SKU 对应的库存。
-    </div>
+    <!-- 库存列表 -->
+    <el-card shadow="never" class="section-card" v-loading="loading" element-loading-text="库存列表加载中">
+      <template v-if="items.length === 0 && !loading">
+        <el-empty description="当前筛选下没有库存项，可以先在上方录入内部履约 SKU 对应的库存。" :image-size="60" />
+      </template>
 
-    <div v-else class="table-card">
-      <div class="summary-grid">
-        <article class="summary-card">
-          <span class="summary-label">当前页内部 SKU</span>
-          <strong class="summary-value">{{ pageOverview.skuCount }}</strong>
-          <span class="summary-copy">当前页去重后的内部履约 SKU 数量</span>
-        </article>
-        <article class="summary-card">
-          <span class="summary-label">当前页库存池</span>
-          <strong class="summary-value">{{ pageOverview.groupCount }}</strong>
-          <span class="summary-copy">按 内部履约 SKU + 凭据类型 聚合后的池子数量</span>
-        </article>
-        <article class="summary-card">
-          <span class="summary-label">可立即分配</span>
-          <strong class="summary-value">{{ pageSummary.availableCount }}</strong>
-          <span class="summary-copy">当前页还能直接被任务预占的库存项</span>
-        </article>
-        <article class="summary-card">
-          <span class="summary-label">预占中</span>
-          <strong class="summary-value">{{ pageSummary.reservedCount }}</strong>
-          <span class="summary-copy">当前页已经被任务锁定的库存项</span>
-        </article>
-      </div>
+      <template v-else>
+        <!-- 摘要 -->
+        <div class="summary-grid">
+          <el-card shadow="never" class="stat-card">
+            <span class="stat-label">当前页内部 SKU</span>
+            <strong class="stat-value">{{ pageOverview.skuCount }}</strong>
+            <span class="stat-meta">当前页去重后的内部履约 SKU 数量</span>
+          </el-card>
+          <el-card shadow="never" class="stat-card">
+            <span class="stat-label">当前页库存池</span>
+            <strong class="stat-value">{{ pageOverview.groupCount }}</strong>
+            <span class="stat-meta">按 内部履约 SKU + 凭据类型 聚合后的池子数量</span>
+          </el-card>
+          <el-card shadow="never" class="stat-card">
+            <span class="stat-label">可立即分配</span>
+            <strong class="stat-value">{{ pageSummary.availableCount }}</strong>
+            <span class="stat-meta">当前页还能直接被任务预占的库存项</span>
+          </el-card>
+          <el-card shadow="never" class="stat-card">
+            <span class="stat-label">预占中</span>
+            <strong class="stat-value">{{ pageSummary.reservedCount }}</strong>
+            <span class="stat-meta">当前页已经被任务锁定的库存项</span>
+          </el-card>
+        </div>
 
-      <section class="pool-section">
-        <div class="card-head pool-head">
-          <div>
-            <h2>当前页库存池概览</h2>
-            <p>先看哪组内部履约 SKU 还有量，再决定补库存、查任务，还是切去人工履约。</p>
+        <!-- 库存池概览 -->
+        <div class="pool-section">
+          <div style="margin-bottom: 14px">
+            <h3 class="card-title">当前页库存池概览</h3>
+            <p class="card-desc">先看哪组内部履约 SKU 还有量，再决定补库存、查任务，还是切去人工履约。</p>
+          </div>
+          <div class="pool-grid">
+            <article v-for="group in inventoryGroups" :key="group.key" class="pool-card">
+              <div class="pool-topline">
+                <div class="pool-title-block">
+                  <h4 class="pool-title">{{ group.skuCode }}</h4>
+                  <span class="pool-subtitle">{{ getCredentialTypeLabel(group.credentialType) }} · {{ group.credentialType }} · {{ group.inventoryGroupCode || '未分组' }}</span>
+                </div>
+                <span class="pool-total">共 {{ group.totalCount }} 条</span>
+              </div>
+
+              <div class="pool-stats">
+                <span class="pool-stat">可用 {{ group.availableCount }}</span>
+                <span class="pool-stat">预占 {{ group.reservedCount }}</span>
+                <span class="pool-stat">发放 {{ group.deliveredCount }}</span>
+                <span class="pool-stat">作废 {{ group.invalidCount }}</span>
+              </div>
+
+              <div class="pool-meta">
+                <span>批次 {{ group.batchSummary }}</span>
+                <span>最近更新 {{ formatAdminDateTime(group.latestUpdatedAt) }}</span>
+              </div>
+
+              <p class="pool-suggestion">{{ getGroupSuggestion(group) }}</p>
+
+              <div class="pool-actions">
+                <el-button round @click="useGroupAsFilter(group)">只看这个池</el-button>
+                <el-button round type="primary" @click="useGroupAsEntry(group)">作为入库目标</el-button>
+              </div>
+            </article>
           </div>
         </div>
-        <div class="pool-grid">
-          <article v-for="group in inventoryGroups" :key="group.key" class="pool-card">
-            <div class="pool-topline">
-              <div class="pool-title-block">
-                <h3 class="pool-title">{{ group.skuCode }}</h3>
-                <span class="pool-subtitle">
-                  {{ getCredentialTypeLabel(group.credentialType) }} · {{ group.credentialType }} · {{ group.inventoryGroupCode || '未分组' }}
-                </span>
-              </div>
-              <span class="pool-total">共 {{ group.totalCount }} 条</span>
-            </div>
 
-            <div class="pool-stats">
-              <span class="pool-stat">可用 {{ group.availableCount }}</span>
-              <span class="pool-stat">预占 {{ group.reservedCount }}</span>
-              <span class="pool-stat">发放 {{ group.deliveredCount }}</span>
-              <span class="pool-stat">作废 {{ group.invalidCount }}</span>
-            </div>
-
-            <div class="pool-meta">
-              <span>批次 {{ group.batchSummary }}</span>
-              <span>最近更新 {{ formatAdminDateTime(group.latestUpdatedAt) }}</span>
-            </div>
-
-            <p class="pool-copy">{{ getGroupSuggestion(group) }}</p>
-
-            <div class="pool-actions">
-              <el-button round @click="useGroupAsFilter(group)">只看这个池</el-button>
-              <el-button round type="primary" @click="useGroupAsEntry(group)">作为入库目标</el-button>
-            </div>
-          </article>
-        </div>
-      </section>
-
-      <div class="table-toolbar">
-        <div class="toolbar-copy">
+        <!-- 表格 -->
+        <div class="table-toolbar">
           当前筛选共 {{ pagination.total }} 条，本页可用 {{ pageSummary.availableCount }} 条，预占 {{ pageSummary.reservedCount }} 条，已发放 {{ pageSummary.deliveredCount }} 条，作废 {{ pageSummary.invalidCount }} 条。
         </div>
-      </div>
 
-      <table class="data-table">
-        <colgroup>
-          <col class="col-item" />
-          <col class="col-sku" />
-          <col class="col-status" />
-          <col class="col-link" />
-          <col class="col-time" />
-          <col class="col-actions" />
-        </colgroup>
-        <thead>
-          <tr>
-            <th>库存项</th>
-            <th>内部履约 SKU</th>
-            <th>状态 / 绑定</th>
-            <th>关联任务 / 订单</th>
-            <th>时间</th>
-            <th>操作</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="item in items" :key="item.inventoryItemId">
-            <td>
+        <el-table :data="items" stripe size="small">
+          <el-table-column label="库存项" min-width="200">
+            <template #default="{ row }">
               <div class="item-cell">
-                <span class="item-title">#{{ item.inventoryItemId }}</span>
-                <code class="item-value">{{ item.displayValue }}</code>
-                <span class="item-subline">批次 {{ item.batchNo || '未分批' }}</span>
-                <span class="item-subline">库存组 {{ item.inventoryGroupCode || '未分组' }}</span>
+                <span class="item-title">#{{ row.inventoryItemId }}</span>
+                <code class="item-value">{{ row.displayValue }}</code>
+                <span class="item-subline">批次 {{ row.batchNo || '未分批' }}</span>
+                <span class="item-subline">库存组 {{ row.inventoryGroupCode || '未分组' }}</span>
               </div>
-            </td>
-            <td>
+            </template>
+          </el-table-column>
+          <el-table-column label="内部履约 SKU" min-width="160">
+            <template #default="{ row }">
               <div class="sku-cell">
-                <span class="sku-title">{{ item.skuCode }}</span>
-                <span class="sku-subline">{{ getCredentialTypeLabel(item.credentialType) }}</span>
-                <span class="sku-subline">库存组 {{ item.inventoryGroupCode || '未分组' }}</span>
-                <span class="sku-subline sku-raw">{{ item.credentialType || '-' }}</span>
+                <span class="sku-title">{{ row.skuCode }}</span>
+                <span class="sku-subline">{{ getCredentialTypeLabel(row.credentialType) }}</span>
+                <span class="sku-subline">库存组 {{ row.inventoryGroupCode || '未分组' }}</span>
+                <span class="sku-subline sku-raw">{{ row.credentialType || '-' }}</span>
               </div>
-            </td>
-            <td>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态 / 绑定" min-width="180">
+            <template #default="{ row }">
               <div class="status-cell">
                 <div class="status-stack">
-                  <AdminStatusTag :status="item.status" />
-                  <AdminStatusTag :status="item.systemBindingStatus" />
-                  <AdminStatusTag :status="item.userBindingStatus" />
+                  <AdminStatusTag :status="row.status" />
+                  <AdminStatusTag :status="row.systemBindingStatus" />
+                  <AdminStatusTag :status="row.userBindingStatus" />
                 </div>
-                <span class="status-copy">{{ formatInventoryStatus(item) }}</span>
-                <span v-if="item.invalidReason" class="status-warning">原因：{{ item.invalidReason }}</span>
+                <span class="status-copy">{{ formatInventoryStatus(row) }}</span>
+                <span v-if="row.invalidReason" class="status-warning">原因：{{ row.invalidReason }}</span>
               </div>
-            </td>
-            <td>
+            </template>
+          </el-table-column>
+          <el-table-column label="关联任务 / 订单" min-width="160">
+            <template #default="{ row }">
               <div class="link-cell">
-                <span class="link-title">{{ item.reservedByTaskNo || '-' }}</span>
+                <span class="link-title">{{ row.reservedByTaskNo || '-' }}</span>
                 <span class="link-subline">任务号</span>
-                <span class="link-title">{{ item.platformOrderId || '-' }}</span>
+                <span class="link-title">{{ row.platformOrderId || '-' }}</span>
                 <span class="link-subline">平台订单号</span>
               </div>
-            </td>
-            <td>
+            </template>
+          </el-table-column>
+          <el-table-column label="时间" min-width="160">
+            <template #default="{ row }">
               <div class="time-cell">
-                <span class="time-line">入库 {{ formatAdminDateTime(item.createdAt) }}</span>
-                <span class="time-line">更新 {{ formatAdminDateTime(item.updatedAt) }}</span>
-                <span v-if="item.deliveredAt" class="time-line">发放 {{ formatAdminDateTime(item.deliveredAt) }}</span>
+                <span class="time-line">入库 {{ formatAdminDateTime(row.createdAt) }}</span>
+                <span class="time-line">更新 {{ formatAdminDateTime(row.updatedAt) }}</span>
+                <span v-if="row.deliveredAt" class="time-line">发放 {{ formatAdminDateTime(row.deliveredAt) }}</span>
               </div>
-            </td>
-            <td>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="{ row }">
               <div class="action-stack">
-                <el-button
-                  v-if="hasAdminRole('admin') && item.status === 'reserved'"
-                  :loading="actionLoadingId === item.inventoryItemId"
-                  link
-                  @click="runRowAction(item.inventoryItemId, () => releaseAdminInventoryItem(item.inventoryItemId), '库存项已释放', `确认释放库存项 #${item.inventoryItemId} 吗？释放后任务需要重新分配库存。`)"
-                >
-                  释放
-                </el-button>
-                <el-button
-                  v-if="hasAdminRole('admin') && item.status === 'available'"
-                  :loading="actionLoadingId === item.inventoryItemId"
-                  link
-                  type="danger"
-                  @click="runRowAction(item.inventoryItemId, () => invalidateAdminInventoryItem(item.inventoryItemId, { reason: '后台手动作废' }), '库存项已作废', `确认作废库存项 #${item.inventoryItemId} 吗？作废后不会再参与自动分配。`)"
-                >
-                  作废
-                </el-button>
+                <el-button v-if="hasAdminRole('admin') && row.status === 'reserved'" :loading="actionLoadingId === row.inventoryItemId" link @click="runRowAction(row.inventoryItemId, () => releaseAdminInventoryItem(row.inventoryItemId), '库存项已释放', `确认释放库存项 #${row.inventoryItemId} 吗？释放后任务需要重新分配库存。`)">释放</el-button>
+                <el-button v-if="hasAdminRole('admin') && row.status === 'available'" :loading="actionLoadingId === row.inventoryItemId" link type="danger" @click="runRowAction(row.inventoryItemId, () => invalidateAdminInventoryItem(row.inventoryItemId, { reason: '后台手动作废' }), '库存项已作废', `确认作废库存项 #${row.inventoryItemId} 吗？作废后不会再参与自动分配。`)">作废</el-button>
               </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <AdminPaginationBar
-        :page="pagination.page"
-        :page-size="pagination.pageSize"
-        :total="pagination.total"
-        :loading="loading"
-        @change="loadInventoryItems"
-      />
-    </div>
-  </section>
+            </template>
+          </el-table-column>
+          <template #empty><el-empty :image-size="60" description="暂无库存项" /></template>
+        </el-table>
+
+        <el-pagination
+          v-if="pagination.total > 0"
+          v-model:current-page="pagination.page"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          layout="total, prev, pager, next"
+          style="margin-top: 16px; justify-content: center"
+          @current-change="loadInventoryItems"
+        />
+      </template>
+    </el-card>
+  </div>
 </template>
 
 <style scoped>
-.admin-panel {
-  display: grid;
-  gap: 14px;
-}
+.inventory-page { display: grid; gap: 0; }
 
-.panel-header h1,
-.card-head h2,
-.pool-title {
-  margin: 0;
-  color: #1d3555;
-}
-
-.panel-header p,
-.card-head p,
-.toolbar-copy,
-.section-tip {
-  margin: 8px 0 0;
-  color: #64748b;
-}
-
-.filter-card,
-.import-card,
-.table-card,
-.empty-block,
-.error-copy {
-  padding: 18px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-}
-
-.panel-header {
-  display: grid;
-  gap: 10px;
-}
-
-.panel-header-copy p {
-  margin-top: 6px;
-}
-
-.header-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.header-tag,
-.helper-title,
-.summary-label,
-.pool-total {
+.header-tags { display: flex; flex-wrap: wrap; gap: 10px; }
+.header-tag {
   display: inline-flex;
   align-items: center;
   min-height: 32px;
   padding: 0 12px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: rgba(37, 89, 167, 0.08);
   border: 1px solid rgba(37, 89, 167, 0.12);
   color: #2559a7;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 700;
   letter-spacing: 0.04em;
 }
 
-.card-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 12px;
-  margin-bottom: 14px;
+.section-card { margin-top: var(--space-4); }
+
+.card-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); }
+.card-desc { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
+
+.form-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
+.sku-input-wrap { display: grid; }
+
+.native-input {
+  width: 100%;
+  min-height: 40px;
+  padding: 0 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  font-size: var(--text-sm);
 }
 
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 12px;
-}
+.single-row, .action-row { display: flex; gap: var(--space-3); align-items: center; margin-top: 14px; }
 
-.sku-input-wrap {
-  display: grid;
+.helper-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: 14px; }
+.helper-item {
+  display: grid; gap: 6px;
+  padding: 14px 16px;
+  border-radius: var(--radius-lg);
+  background: rgba(244, 248, 255, 0.84);
+  border: 1px solid var(--border-default);
 }
+.helper-item-wide { grid-column: span 1; }
+.helper-title { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--radius-full); background: rgba(37, 89, 167, 0.08); border: 1px solid rgba(37, 89, 167, 0.12); color: #2559a7; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
+.helper-copy { color: #334155; line-height: 1.6; }
 
-.single-row,
-.action-row {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  margin-top: 14px;
-}
-
-.helper-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-  margin-top: 14px;
-}
-
-.sku-helper-bar {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: center;
-  margin-top: 12px;
-}
-
-.sku-helper-copy {
-  margin: 0;
-}
-
-.sku-chip-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 12px;
-}
+.sku-helper-bar { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; margin-top: var(--space-3); }
+.helper-text { color: var(--text-secondary); font-size: var(--text-xs); margin: 0; }
 
+.sku-chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-3); }
 .sku-chip {
-  display: inline-grid;
-  gap: 4px;
+  display: inline-grid; gap: 4px;
   padding: 10px 14px;
   border-radius: 14px;
   border: 1px solid rgba(86, 108, 138, 0.16);
   background: linear-gradient(180deg, rgba(244, 248, 255, 0.92), rgba(255, 255, 255, 0.98));
-  color: #1d3555;
+  color: var(--text-primary);
   cursor: pointer;
   transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
 }
+.sku-chip:hover { transform: translateY(-1px); border-color: rgba(37, 89, 167, 0.26); box-shadow: 0 12px 24px rgba(37, 89, 167, 0.08); }
+.sku-chip-title { font-weight: 700; }
+.sku-chip-meta { color: var(--text-secondary); font-size: var(--text-xs); }
 
-.sku-chip:hover {
-  transform: translateY(-1px);
-  border-color: rgba(37, 89, 167, 0.26);
-  box-shadow: 0 12px 24px rgba(37, 89, 167, 0.08);
-}
+.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
+.stat-card { text-align: left; }
+.stat-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
+.stat-value { font-size: 30px; line-height: 1; color: var(--text-primary); display: block; margin-top: var(--space-2); }
+.stat-meta { color: var(--text-secondary); font-size: var(--text-xs); display: block; margin-top: var(--space-1); }
 
-.sku-chip-title {
-  font-weight: 700;
-}
-
-.sku-chip-meta {
-  color: #64748b;
-  font-size: 12px;
-}
-
-.helper-item {
-  display: grid;
-  gap: 6px;
-  padding: 14px 16px;
-  border-radius: 16px;
-  background: rgba(244, 248, 255, 0.84);
-  border: 1px solid rgba(86, 108, 138, 0.08);
-}
-
-.helper-item-wide {
-  grid-column: span 1;
-}
-
-.helper-copy {
-  color: #334155;
-  line-height: 1.6;
-}
-
-.error-copy {
-  color: #b42318;
-}
-
-.text-input,
-.text-area {
-  width: 100%;
-  min-height: 42px;
-  padding: 0 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.94);
-}
-
-.select-input {
-  appearance: none;
-}
-
-.text-area {
-  min-height: 180px;
-  padding: 14px;
-  margin-top: 14px;
-  resize: vertical;
-  font-family: var(--font-mono);
-}
-
-.table-toolbar {
-  margin-bottom: 10px;
-}
-
-.summary-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.summary-card,
+.pool-section { margin-bottom: 18px; }
+.pool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
 .pool-card {
-  padding: 16px;
-  border-radius: 18px;
-  border: 1px solid rgba(86, 108, 138, 0.08);
+  display: grid; gap: var(--space-3);
+  padding: var(--space-4);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--border-default);
   background: rgba(248, 250, 252, 0.8);
 }
+.pool-topline { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
+.pool-title-block { display: grid; gap: 6px; }
+.pool-title { margin: 0; font-size: 18px; color: var(--text-primary); }
+.pool-subtitle { color: var(--text-secondary); font-size: var(--text-xs); }
+.pool-total { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--radius-full); background: rgba(37, 89, 167, 0.08); border: 1px solid rgba(37, 89, 167, 0.12); color: #2559a7; font-size: var(--text-xs); font-weight: 700; }
+.pool-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.pool-stat { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: var(--radius-full); background: rgba(37, 89, 167, 0.08); color: #1d4f91; font-size: var(--text-xs); font-weight: 700; }
+.pool-meta { display: grid; gap: 6px; color: var(--text-secondary); font-size: var(--text-xs); }
+.pool-suggestion { margin: 0; line-height: 1.6; color: var(--text-secondary); font-size: var(--text-sm); }
+.pool-actions { display: flex; flex-wrap: wrap; gap: 10px; }
 
-.summary-card {
-  display: grid;
-  gap: 8px;
+.table-toolbar { margin-bottom: 10px; color: var(--text-secondary); font-size: var(--text-xs); }
+
+.item-cell, .sku-cell, .status-cell, .link-cell, .time-cell { display: grid; gap: 6px; }
+.item-title, .sku-title, .link-title { font-weight: 700; color: var(--text-primary); }
+.item-value { display: inline-flex; width: fit-content; max-width: 100%; padding: 6px 8px; border-radius: 10px; background: rgba(15, 23, 42, 0.06); color: #0f172a; white-space: pre-wrap; word-break: break-all; }
+.item-subline, .sku-subline, .link-subline, .time-line, .status-copy { color: var(--text-secondary); font-size: var(--text-xs); }
+.sku-raw { font-family: var(--font-mono); font-size: var(--text-xs); }
+.status-stack, .action-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
+.status-warning { color: #b54708; font-size: var(--text-xs); }
+
+@media (max-width: 1200px) {
+  .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .pool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
-
-.summary-value {
-  font-size: 30px;
-  line-height: 1;
-  color: #1d3555;
+@media (max-width: 900px) {
+  .form-grid, .summary-grid, .pool-grid, .helper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
-
-.summary-copy {
-  color: #64748b;
-  line-height: 1.5;
-}
-
-.pool-section {
-  display: grid;
-  gap: 14px;
-  margin-bottom: 18px;
-}
-
-.pool-head {
-  margin-bottom: 0;
-}
-
-.pool-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.pool-card {
-  display: grid;
-  gap: 12px;
-}
-
-.pool-topline {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: flex-start;
-}
-
-.pool-title-block {
-  display: grid;
-  gap: 6px;
-}
-
-.pool-title {
-  margin: 0;
-  font-size: 18px;
-  color: #1d3555;
-}
-
-.pool-subtitle,
-.pool-meta,
-.pool-copy {
-  color: #64748b;
-}
-
-.pool-stats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.pool-stat {
-  display: inline-flex;
-  align-items: center;
-  min-height: 30px;
-  padding: 0 10px;
-  border-radius: 999px;
-  background: rgba(37, 89, 167, 0.08);
-  color: #1d4f91;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.pool-meta {
-  display: grid;
-  gap: 6px;
-}
-
-.pool-copy {
-  margin: 0;
-  line-height: 1.6;
-}
-
-.pool-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.data-table th,
-.data-table td {
-  padding: 12px 10px;
-  text-align: left;
-  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
-  color: #334155;
-  vertical-align: top;
-}
-
-.data-table th {
-  color: #64748b;
-  font-size: 13px;
-}
-
-.item-cell,
-.sku-cell,
-.status-cell,
-.link-cell,
-.time-cell {
-  display: grid;
-  gap: 6px;
-}
-
-.item-title,
-.sku-title,
-.link-title {
-  font-weight: 700;
-  color: #1d3555;
-}
-
-.item-value {
-  display: inline-flex;
-  width: fit-content;
-  max-width: 100%;
-  padding: 6px 8px;
-  border-radius: 10px;
-  background: rgba(15, 23, 42, 0.06);
-  color: #0f172a;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.item-subline,
-.sku-subline,
-.link-subline,
-.time-line,
-.status-copy {
-  color: #64748b;
-}
-
-.sku-raw {
-  font-family: var(--font-mono);
-  font-size: 12px;
-}
-
-.status-stack,
-.action-stack {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.status-warning {
-  color: #b54708;
-}
-
-.empty-block {
-  color: #64748b;
-}
-
-.col-item {
-  width: 24%;
-}
-
-.col-sku {
-  width: 18%;
-}
-
-.col-status {
-  width: 20%;
-}
-
-.col-link {
-  width: 14%;
-}
-
-.col-time {
-  width: 16%;
-}
-
-.col-actions {
-  width: 8%;
-}
-
-@media (max-width: 1180px) {
-  .summary-grid,
-  .pool-grid,
-  .form-grid,
-  .helper-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 860px) {
-  .summary-grid,
-  .pool-grid,
-  .form-grid,
-  .helper-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .header-tags,
-  .single-row,
-  .action-row,
-  .sku-helper-bar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .table-card {
-    overflow-x: auto;
-  }
-
-  .data-table {
-    min-width: 980px;
-  }
+@media (max-width: 640px) {
+  .form-grid, .summary-grid, .pool-grid, .helper-grid { grid-template-columns: 1fr; }
+  .header-tags, .single-row, .action-row, .sku-helper-bar { flex-direction: column; align-items: stretch; }
 }
 </style>
diff --git a/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillmentView.vue b/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillmentView.vue
index 9294ccd4..c0cb73e2 100644
--- a/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillmentView.vue
+++ b/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillmentView.vue
@@ -1085,18 +1085,18 @@ onMounted(loadConfigs)
 
 <style scoped>
 .admin-panel {
-  --panel-ink: #1f2a37;
-  --panel-muted: #667085;
-  --panel-border: rgba(31, 42, 55, 0.12);
+  --panel-ink: var(--text-primary);
+  --panel-muted: var(--text-secondary);
+  --panel-border: var(--border-default);
   --panel-soft: #f6f8fb;
   --panel-line: #dce3ec;
-  --accent: #0f6b5f;
-  --accent-strong: #0b5d53;
-  --warn: #b54708;
-  --danger: #b42318;
+  --accent: var(--color-primary);
+  --accent-strong: var(--color-primary-dark);
+  --warn: var(--color-warning);
+  --danger: var(--color-danger);
 
   display: grid;
-  gap: 18px;
+  gap: var(--space-4);
 }
 
 .hero-card,
@@ -1737,15 +1737,6 @@ onMounted(loadConfigs)
   }
 }
 
-.admin-panel {
-  --accent: #0f5dd8;
-  --accent-strong: #175cd3;
-  --panel-ink: #1d3555;
-  --panel-muted: #64748b;
-  --panel-border: rgba(86, 108, 138, 0.1);
-  display: grid;
-  gap: 12px;
-}
 
 .panel-header,
 .section-title-row {
diff --git a/apps/frontend/src/views/admin/AdminLayout.vue b/apps/frontend/src/views/admin/AdminLayout.vue
index d0207834..eeb90cb7 100644
--- a/apps/frontend/src/views/admin/AdminLayout.vue
+++ b/apps/frontend/src/views/admin/AdminLayout.vue
@@ -1,49 +1,74 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  Box,
+  Monitor,
+  Connection,
+  DataAnalysis,
+  Document,
+  List,
+  Message,
+  Service,
+  Setting,
+  Tickets,
+  User,
+} from '@element-plus/icons-vue'
 
 import { showSuccess } from '@/lib/feedback'
 import { logoutAdmin } from '@/services/admin'
 import { clearAdminSession, getAdminRole, getAdminTokenExpiresAt, getAdminUsername } from '@/utils/admin-auth'
 import { formatAdminDateTime } from '@/utils/admin-time'
 
+const route = useRoute()
 const router = useRouter()
+
 const currentRole = computed(() => getAdminRole())
 const isAdmin = computed(() => currentRole.value === 'admin')
 const isOperator = computed(() => currentRole.value === 'operator')
+
 const roleLabel = computed(() => {
-  if (currentRole.value === 'admin') {
-    return '管理员'
-  }
-
-  if (currentRole.value === 'support') {
-    return '客服'
-  }
-
+  if (currentRole.value === 'admin') return '管理员'
+  if (currentRole.value === 'support') return '客服'
   return '普通运营'
 })
+
 const navItems = computed(() => {
-  const baseItems = [
-    { to: '/admin/dashboard', label: '概览' },
-    { to: '/admin/orders', label: '订单' },
-    { to: '/admin/tasks', label: '任务' },
-    { to: '/admin/manual-redeem', label: '人工兑换' },
-    { to: '/admin/message-deliveries', label: '消息发送' },
+  const items: { to: string; label: string; icon: typeof DataAnalysis }[] = [
+    { to: '/admin/dashboard', label: '概览', icon: DataAnalysis },
   ]
 
+  if (isAdmin.value) {
+    items.push({ to: '/admin/users', label: '用户', icon: User })
+  }
+
+  items.push(
+    { to: '/admin/orders', label: '订单', icon: Document },
+    { to: '/admin/tasks', label: '任务', icon: List },
+  )
+
   if (isAdmin.value || isOperator.value) {
-    baseItems.splice(3, 0, { to: '/admin/inventory', label: '库存' })
-    baseItems.push({ to: '/admin/webhook-events', label: 'Webhook' })
+    items.push({ to: '/admin/inventory', label: '库存', icon: Box })
+  }
+
+  items.push(
+    { to: '/admin/manual-redeem', label: '人工兑换', icon: Service },
+    { to: '/admin/message-deliveries', label: '消息发送', icon: Message },
+  )
+
+  if (isAdmin.value || isOperator.value) {
+    items.push({ to: '/admin/webhook-events', label: 'Webhook', icon: Connection })
   }
 
   if (isAdmin.value) {
-    baseItems.splice(1, 0, { to: '/admin/users', label: '用户' })
-    baseItems.push({ to: '/admin/platform-shops', label: '平台配置' })
-    baseItems.push({ to: '/admin/platform-fulfillment', label: '履约配置' })
-    baseItems.push({ to: '/admin/audit-logs', label: '审计' })
+    items.push(
+      { to: '/admin/platform-shops', label: '平台配置', icon: Setting },
+      { to: '/admin/platform-fulfillment', label: '履约配置', icon: Tickets },
+      { to: '/admin/audit-logs', label: '审计', icon: Monitor },
+    )
   }
 
-  return baseItems
+  return items
 })
 
 async function submitLogout() {
@@ -60,32 +85,30 @@ async function submitLogout() {
 </script>
 
 <template>
-  <main class="admin-page">
+  <div class="admin-page">
     <aside class="admin-sidebar">
-      <div class="admin-brand">
+      <div class="sidebar-brand">
         <strong>运营后台</strong>
         <p>订单与交付管理</p>
       </div>
 
-      <div class="admin-meta">
-        <span>当前账号</span>
-        <strong>{{ getAdminUsername() || '未读取' }}</strong>
-        <span>当前角色</span>
-        <strong>{{ roleLabel }}</strong>
-        <span>登录有效期</span>
-        <strong>{{ formatAdminDateTime(getAdminTokenExpiresAt()) }}</strong>
+      <div class="sidebar-user">
+        <div class="user-name">{{ getAdminUsername() || '未读取' }}</div>
+        <div class="user-role">{{ roleLabel }}</div>
+        <div class="user-expiry">有效期至 {{ formatAdminDateTime(getAdminTokenExpiresAt()) }}</div>
       </div>
 
-      <nav class="admin-nav">
-        <RouterLink
-          v-for="item in navItems"
-          :key="item.to"
-          class="admin-nav-link"
-          :to="item.to"
-        >
-          {{ item.label }}
-        </RouterLink>
-      </nav>
+      <el-menu
+        :default-active="route.path"
+        router
+        class="sidebar-menu"
+        :ellipsis="false"
+      >
+        <el-menu-item v-for="item in navItems" :key="item.to" :index="item.to">
+          <el-icon><component :is="item.icon" /></el-icon>
+          <span>{{ item.label }}</span>
+        </el-menu-item>
+      </el-menu>
 
       <el-button round class="logout-btn" @click="submitLogout">退出登录</el-button>
     </aside>
@@ -93,95 +116,103 @@ async function submitLogout() {
     <section class="admin-content">
       <RouterView />
     </section>
-  </main>
+  </div>
 </template>
 
 <style scoped>
 .admin-page {
   height: 100vh;
   display: grid;
-  grid-template-columns: 240px minmax(0, 1fr);
+  grid-template-columns: 260px minmax(0, 1fr);
   overflow: hidden;
   background:
     radial-gradient(circle at top left, rgba(73, 136, 255, 0.1), transparent 30%),
-    linear-gradient(180deg, #f3f7fc 0%, #edf3fb 100%);
+    linear-gradient(180deg, var(--bg-page) 0%, #edf3fb 100%);
 }
 
 .admin-sidebar {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  padding: 24px 18px;
+  padding: var(--space-6) 0;
   overflow-y: auto;
-  border-right: 1px solid rgba(86, 108, 138, 0.12);
-  background: rgba(255, 255, 255, 0.92);
+  border-right: 1px solid var(--border-default);
+  background: var(--bg-sidebar);
   backdrop-filter: blur(18px);
 }
 
-.admin-brand strong {
+.sidebar-brand {
+  padding: 0 var(--space-5);
+  margin-bottom: var(--space-4);
+}
+
+.sidebar-brand strong {
   display: block;
-  font-size: 20px;
-  color: #203551;
+  font-size: var(--text-xl);
+  color: var(--text-primary);
 }
 
-.admin-brand p {
-  margin: 8px 0 0;
-  color: #6c7c92;
+.sidebar-brand p {
+  margin: var(--space-2) 0 0;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
 }
 
-.admin-nav {
-  margin-top: 28px;
-  display: grid;
-  gap: 10px;
-  align-content: start;
-}
-
-.admin-meta {
-  margin-top: 18px;
-  padding: 12px 14px;
-  border-radius: 14px;
+.sidebar-user {
+  margin: 0 var(--space-4) var(--space-4);
+  padding: var(--space-3);
+  border-radius: var(--radius-md);
   background: #f5f8fc;
-  color: #5f7289;
-  display: grid;
-  gap: 4px;
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 
-.admin-meta strong {
-  color: #1f3c5c;
-  word-break: break-all;
+.user-name {
+  color: var(--text-primary);
+  font-weight: 700;
 }
 
-.admin-nav-link {
-  display: block;
-  padding: 12px 14px;
-  border-radius: 14px;
-  text-decoration: none;
-  color: #304866;
-  background: #f5f8fc;
-  border: 1px solid transparent;
+.user-role {
+  color: var(--text-secondary);
+  margin-top: 2px;
 }
 
-.admin-nav-link.router-link-active {
-  color: #114899;
-  border-color: rgba(17, 72, 153, 0.14);
-  background: rgba(17, 72, 153, 0.08);
+.user-expiry {
+  color: var(--text-muted);
+  margin-top: 4px;
+  font-size: 11px;
+}
+
+.sidebar-menu {
+  border-right: none;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.sidebar-menu :deep(.el-menu-item) {
+  margin: 2px var(--space-2);
+  border-radius: var(--radius-md);
+  min-height: 44px;
+  line-height: 44px;
+}
+
+.sidebar-menu :deep(.el-menu-item.is-active) {
+  color: var(--color-primary);
+  background: var(--color-primary-light);
+}
+
+.logout-btn {
+  margin: var(--space-3) var(--space-4) 0;
+  flex-shrink: 0;
 }
 
 .admin-content {
   min-width: 0;
   height: 100vh;
-  padding: 24px;
+  padding: var(--space-6);
   overflow-y: auto;
 }
 
-.logout-btn {
-  margin-top: auto;
-  flex-shrink: 0;
-  width: 100%;
-}
-
-@media (max-width: 980px) {
+@media (max-width: 900px) {
   .admin-page {
     height: auto;
     min-height: 100vh;
@@ -193,16 +224,15 @@ async function submitLogout() {
     height: auto;
     overflow: visible;
     border-right: 0;
-    border-bottom: 1px solid rgba(86, 108, 138, 0.12);
+    border-bottom: 1px solid var(--border-default);
+    padding-bottom: var(--space-4);
   }
 
+  .sidebar-menu { overflow: visible; }
+
   .admin-content {
     height: auto;
     overflow: visible;
   }
-
-  .logout-btn {
-    margin-top: 18px;
-  }
 }
 </style>
diff --git a/apps/frontend/src/views/admin/AdminMessageDeliveriesView.vue b/apps/frontend/src/views/admin/AdminMessageDeliveriesView.vue
index e1d8330c..f907dcd1 100644
--- a/apps/frontend/src/views/admin/AdminMessageDeliveriesView.vue
+++ b/apps/frontend/src/views/admin/AdminMessageDeliveriesView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 
-import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
+import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
 import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
 import { fetchAdminMessageDeliveries } from '@/services/admin'
 import type { AdminMessageDeliveryListItem, AdminPagination } from '@/types/admin'
@@ -72,20 +72,11 @@ function resetFilters() {
 }
 
 function formatResponse(item: AdminMessageDeliveryListItem) {
-  if (item.responseStatus <= 0 && !item.errorMessage) {
-    return '-'
-  }
-
+  if (item.responseStatus <= 0 && !item.errorMessage) return '-'
   const parts = []
-  if (item.responseStatus > 0) {
-    parts.push(`HTTP ${item.responseStatus}`)
-  }
-
+  if (item.responseStatus > 0) parts.push(`HTTP ${item.responseStatus}`)
   const msg = String(item.response?.Error_Msg || item.response?.msg || item.response?.message || item.response?.error || '').trim()
-  if (msg) {
-    parts.push(msg)
-  }
-
+  if (msg) parts.push(msg)
   return parts.join(' · ') || item.errorMessage || '-'
 }
 
@@ -93,394 +84,227 @@ onMounted(loadMessageDeliveries)
 </script>
 
 <template>
-  <section class="admin-panel">
-    <header class="panel-header">
-      <div class="panel-header-copy">
-        <h1>消息发送记录</h1>
-        <p>查看领取链接消息是否真正发出、平台返回了什么、失败原因是什么。</p>
-      </div>
-      <div class="panel-header-badge">共 {{ pagination.total }} 条记录</div>
-    </header>
+  <div class="deliveries-page">
+    <AdminPageHeader title="消息发送记录" description="查看领取链接消息是否真正发出、平台返回了什么、失败原因是什么。">
+      <template #extra>
+        <span class="total-badge">共 {{ pagination.total }} 条记录</span>
+      </template>
+    </AdminPageHeader>
 
-    <section class="filters-card">
-      <div class="filters-grid">
-        <label class="filter-field">
-          <span>服务商</span>
-          <input v-model="provider" class="text-input" placeholder="如 agiso" />
-        </label>
-        <label class="filter-field">
-          <span>业务平台</span>
-          <input v-model="platform" class="text-input" placeholder="如 xianyu" />
-        </label>
-        <label class="filter-field">
-          <span>发送状态</span>
-          <select v-model="status" class="text-input select-input">
-            <option v-for="option in adminMessageDeliveryStatusOptions" :key="option.value" :value="option.value">
-              {{ option.label }}
-            </option>
-          </select>
-        </label>
-        <label class="filter-field">
-          <span>店铺 ID</span>
-          <input v-model="shopId" class="text-input" placeholder="支持精确匹配" />
-        </label>
-        <label class="filter-field">
-          <span>平台订单号</span>
-          <input v-model="platformOrderId" class="text-input" placeholder="平台订单号" />
-        </label>
-        <label class="filter-field">
-          <span>任务号</span>
-          <input v-model="taskNo" class="text-input" placeholder="任务编号" />
-        </label>
-        <label class="filter-field">
-          <span>开始日期</span>
-          <input v-model="dateFrom" class="text-input" type="date" />
-        </label>
-        <label class="filter-field">
-          <span>结束日期</span>
-          <input v-model="dateTo" class="text-input" type="date" />
-        </label>
+    <!-- 筛选 -->
+    <el-card shadow="never" class="filter-card">
+      <div class="filter-grid">
+        <el-input v-model="provider" placeholder="服务商，如 agiso" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-input v-model="platform" placeholder="业务平台，如 xianyu" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-select v-model="status" placeholder="发送状态" clearable>
+          <el-option v-for="opt in adminMessageDeliveryStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+        </el-select>
+        <el-input v-model="shopId" placeholder="店铺 ID（精确匹配）" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-input v-model="platformOrderId" placeholder="平台订单号" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-input v-model="taskNo" placeholder="任务编号" clearable @keyup.enter="loadMessageDeliveries(1)" />
+        <el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
+        <el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
       </div>
-      <div class="filters-actions">
-        <span class="filters-hint">消息体、Claim 链接、接口回执和失败原因都已经拆分展示，查问题会更直观。</span>
-        <div class="filters-button-row">
+      <div class="filter-actions">
+        <span class="filter-hint">消息体、Claim 链接、接口回执和失败原因都已经拆分展示，查问题会更直观。</span>
+        <div class="filter-buttons">
           <el-button round @click="resetFilters">重置</el-button>
-          <el-button round type="primary" @click="() => loadMessageDeliveries(1)">查询</el-button>
+          <el-button round type="primary" @click="loadMessageDeliveries(1)">查询</el-button>
         </div>
       </div>
-    </section>
+    </el-card>
 
-    <section v-if="!loading && items.length > 0" class="summary-grid">
-      <article class="summary-card summary-card-success">
+    <!-- 摘要 -->
+    <div v-if="!loading && items.length > 0" class="summary-grid">
+      <el-card shadow="never" class="summary-card summary-card--success">
         <span class="summary-label">当前页成功</span>
         <strong class="summary-value">{{ summary.successCount }}</strong>
         <span class="summary-meta">消息已被平台受理或发送完成</span>
-      </article>
-      <article class="summary-card summary-card-danger">
+      </el-card>
+      <el-card shadow="never" class="summary-card summary-card--danger">
         <span class="summary-label">当前页失败</span>
         <strong class="summary-value">{{ summary.failedCount }}</strong>
         <span class="summary-meta">优先查看失败原因和接口返回</span>
-      </article>
-      <article class="summary-card summary-card-warning">
+      </el-card>
+      <el-card shadow="never" class="summary-card summary-card--warning">
         <span class="summary-label">当前页等待</span>
         <strong class="summary-value">{{ summary.pendingCount }}</strong>
         <span class="summary-meta">等待发送或等待外部回调更新</span>
-      </article>
-    </section>
+      </el-card>
+    </div>
 
-    <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
-    <div v-if="loading" class="empty-block">消息发送记录加载中</div>
-    <div v-else-if="items.length === 0" class="empty-block">当前筛选下还没有消息发送记录。</div>
+    <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
 
-    <div v-else class="records-shell">
-      <div class="records-toolbar">
-        <div>
+    <!-- 列表 -->
+    <el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="消息发送记录加载中">
+      <template v-if="items.length === 0 && !loading">
+        <el-empty description="当前筛选下还没有消息发送记录。" :image-size="60" />
+      </template>
+
+      <template v-else>
+        <div class="records-toolbar">
           <strong>发送明细</strong>
           <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
         </div>
-      </div>
 
-      <div class="record-list">
-        <article v-for="item in items" :key="item.deliveryId" class="record-card">
-          <div class="record-top">
-            <div class="record-identity">
-              <span class="record-id">#{{ item.deliveryId }}</span>
-              <div class="record-source-line">
-                <span class="source-pill">{{ item.provider || '-' }}</span>
-                <span class="source-separator">/</span>
-                <span class="source-pill">{{ item.platform || '-' }}</span>
-                <span class="source-chip">{{ item.shopName || item.shopId || '-' }}</span>
-                <span class="source-chip source-chip--muted">{{ item.channel || '-' }}</span>
+        <div class="record-list">
+          <article v-for="item in items" :key="item.deliveryId" class="record-card">
+            <div class="record-top">
+              <div class="record-identity">
+                <span class="record-id">#{{ item.deliveryId }}</span>
+                <div class="record-source-line">
+                  <span class="source-pill">{{ item.provider || '-' }}</span>
+                  <span class="source-separator">/</span>
+                  <span class="source-pill">{{ item.platform || '-' }}</span>
+                  <span class="source-chip">{{ item.shopName || item.shopId || '-' }}</span>
+                  <span class="source-chip source-chip--muted">{{ item.channel || '-' }}</span>
+                </div>
               </div>
+              <AdminStatusTag :status="item.status" />
             </div>
-            <AdminStatusTag :status="item.status" />
-          </div>
 
-          <div class="record-grid">
-            <section class="record-section">
-              <span class="section-label">订单 / 任务</span>
-              <div class="cell-stack">
-                <div class="cell-title">{{ item.platformOrderId || '-' }}</div>
-                <div class="meta-chip-row">
-                  <span v-if="item.orderId" class="meta-chip">
-                    订单
-                    <RouterLink class="inline-link" :to="`/admin/orders/${item.orderId}`">{{ item.orderId }}</RouterLink>
-                  </span>
-                  <span v-if="item.taskId" class="meta-chip">
-                    任务
-                    <RouterLink class="inline-link" :to="`/admin/tasks/${item.taskId}`">{{ item.taskNo || item.taskId }}</RouterLink>
-                  </span>
+            <div class="record-grid">
+              <section class="record-section">
+                <span class="section-label">订单 / 任务</span>
+                <div class="cell-stack">
+                  <div class="cell-title">{{ item.platformOrderId || '-' }}</div>
+                  <div class="meta-chip-row">
+                    <span v-if="item.orderId" class="meta-chip">
+                      订单
+                      <RouterLink class="inline-link" :to="`/admin/orders/${item.orderId}`">{{ item.orderId }}</RouterLink>
+                    </span>
+                    <span v-if="item.taskId" class="meta-chip">
+                      任务
+                      <RouterLink class="inline-link" :to="`/admin/tasks/${item.taskId}`">{{ item.taskNo || item.taskId }}</RouterLink>
+                    </span>
+                  </div>
+                  <div v-if="item.taskStatus" class="tag-row">
+                    <AdminStatusTag :status="item.taskStatus" />
+                  </div>
                 </div>
-                <div v-if="item.taskStatus" class="tag-row">
-                  <AdminStatusTag :status="item.taskStatus" />
+              </section>
+
+              <section class="record-section record-section-message">
+                <span class="section-label">消息内容</span>
+                <div class="message-cell" :title="item.messageContent">{{ item.messageContent || '-' }}</div>
+                <a v-if="item.claimUrl" class="claim-link" :href="item.claimUrl" target="_blank" rel="noreferrer">打开 Claim 链接</a>
+              </section>
+
+              <section class="record-section">
+                <span class="section-label">接口结果</span>
+                <div class="cell-stack">
+                  <div class="cell-title">{{ formatResponse(item) }}</div>
+                  <div class="cell-subtle">HTTP {{ item.responseStatus || 0 }}</div>
+                  <div v-if="item.requestUrl" class="cell-subtle cell-subtle-break">{{ item.requestUrl }}</div>
+                  <div v-if="item.errorMessage" class="error-inline">{{ item.errorMessage }}</div>
                 </div>
-              </div>
-            </section>
+              </section>
 
-            <section class="record-section record-section-message">
-              <span class="section-label">消息内容</span>
-              <div class="message-cell" :title="item.messageContent">
-                {{ item.messageContent || '-' }}
-              </div>
-              <a v-if="item.claimUrl" class="claim-link claim-link-button" :href="item.claimUrl" target="_blank" rel="noreferrer">
-                打开 Claim 链接
-              </a>
-            </section>
+              <section class="record-section">
+                <span class="section-label">时间</span>
+                <div class="cell-stack">
+                  <div class="cell-title">创建 {{ formatAdminDateTime(item.createdAt) }}</div>
+                  <div class="cell-subtle">发送 {{ formatAdminDateTime(item.sentAt) }}</div>
+                  <div class="cell-subtle">更新 {{ formatAdminDateTime(item.updatedAt) }}</div>
+                </div>
+              </section>
+            </div>
+          </article>
+        </div>
 
-            <section class="record-section">
-              <span class="section-label">接口结果</span>
-              <div class="cell-stack">
-                <div class="cell-title">{{ formatResponse(item) }}</div>
-                <div class="cell-subtle">HTTP {{ item.responseStatus || 0 }}</div>
-                <div v-if="item.requestUrl" class="cell-subtle cell-subtle-break">{{ item.requestUrl }}</div>
-                <div v-if="item.errorMessage" class="error-inline">{{ item.errorMessage }}</div>
-              </div>
-            </section>
-
-            <section class="record-section">
-              <span class="section-label">时间</span>
-              <div class="cell-stack">
-                <div class="cell-title">创建 {{ formatAdminDateTime(item.createdAt) }}</div>
-                <div class="cell-subtle">发送 {{ formatAdminDateTime(item.sentAt) }}</div>
-                <div class="cell-subtle">更新 {{ formatAdminDateTime(item.updatedAt) }}</div>
-              </div>
-            </section>
-          </div>
-        </article>
-      </div>
-
-      <AdminPaginationBar
-        :page="pagination.page"
-        :page-size="pagination.pageSize"
-        :total="pagination.total"
-        :loading="loading"
-        @change="loadMessageDeliveries"
-      />
-    </div>
-  </section>
+        <el-pagination
+          v-if="pagination.total > 0"
+          v-model:current-page="pagination.page"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          layout="total, prev, pager, next"
+          style="margin-top: 16px; justify-content: center"
+          @current-change="loadMessageDeliveries"
+        />
+      </template>
+    </el-card>
+  </div>
 </template>
 
 <style scoped>
-.admin-panel {
-  display: grid;
-  gap: 14px;
-  min-width: 0;
-}
+.deliveries-page { display: grid; gap: 0; }
 
-.panel-header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.panel-header-copy {
-  min-width: 0;
-}
-
-.panel-header h1 {
-  margin: 0;
-  font-size: 34px;
-  line-height: 1.05;
-  letter-spacing: -0.04em;
-  color: #1d3555;
-}
-
-.panel-header p {
-  margin: 6px 0 0;
-  font-size: 14px;
-  color: #64748b;
-}
-
-.panel-header-badge {
-  flex: 0 0 auto;
+.total-badge {
   min-height: 34px;
   padding: 0 14px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.82);
-  border: 1px solid rgba(86, 108, 138, 0.12);
-  color: #38506e;
-  font-size: 12px;
+  border-radius: var(--radius-full);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
   font-weight: 700;
   display: inline-flex;
   align-items: center;
 }
 
-.filters-card,
-.summary-card,
-.records-shell,
-.empty-block,
-.error-copy {
-  padding: 16px 18px;
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-  box-shadow: 0 14px 36px rgba(30, 49, 78, 0.06);
-}
+.filter-card { margin-top: var(--space-4); }
 
-.filters-card {
-  display: grid;
-  gap: 14px;
-}
-
-.filters-grid {
+.filter-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
+  gap: var(--space-3);
 }
 
-.filter-field {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.filter-field span {
-  color: #5d6f87;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.filters-actions {
+.filter-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--space-3);
+  margin-top: var(--space-3);
 }
 
-.filters-hint {
-  color: #64748b;
-  font-size: 12px;
-}
-
-.filters-button-row {
-  display: flex;
-  gap: 10px;
-  flex-shrink: 0;
-}
+.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
+.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
 
 .summary-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.summary-card {
-  display: grid;
-  gap: 6px;
-  position: relative;
-  overflow: hidden;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
 }
 
+.summary-card { position: relative; overflow: hidden; }
 .summary-card::after {
   content: '';
   position: absolute;
   inset: auto -26px -26px auto;
   width: 96px;
   height: 96px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   opacity: 0.14;
 }
+.summary-card--success::after { background: var(--color-success); }
+.summary-card--danger::after { background: var(--color-danger); }
+.summary-card--warning::after { background: var(--color-warning); }
 
-.summary-card-success::after {
-  background: #12b76a;
-}
+.summary-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
+.summary-value { font-size: var(--text-3xl); line-height: 1; color: var(--text-primary); }
+.summary-meta { color: var(--text-muted); font-size: var(--text-xs); }
 
-.summary-card-danger::after {
-  background: #f04438;
-}
+.table-card { margin-top: var(--space-4); overflow: visible; }
 
-.summary-card-warning::after {
-  background: #f79009;
-}
+.records-toolbar { margin-bottom: var(--space-3); }
+.records-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
+.records-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
 
-.summary-label {
-  color: #51647d;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-}
-
-.summary-value {
-  font-size: 34px;
-  line-height: 1;
-  color: #1d3555;
-}
-
-.summary-meta {
-  color: #70829a;
-  font-size: 12px;
-}
-
-.error-copy {
-  color: #b42318;
-  margin: 0;
-}
-
-.empty-block {
-  color: #64748b;
-}
-
-.text-input {
-  width: 100%;
-  min-height: 38px;
-  padding: 0 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.94);
-  color: #24364e;
-  font-size: 13px;
-}
-
-.select-input {
-  appearance: none;
-}
-
-.records-shell {
-  display: grid;
-  gap: 14px;
-  min-width: 0;
-}
-
-.records-toolbar strong {
-  display: block;
-  color: #1f324a;
-  font-size: 14px;
-}
-
-.records-toolbar span {
-  display: block;
-  margin-top: 4px;
-  color: #64748b;
-  font-size: 12px;
-}
-
-.record-list {
-  display: grid;
-  gap: 12px;
-}
+.record-list { display: grid; gap: var(--space-3); }
 
 .record-card {
   display: grid;
   gap: 14px;
   padding: 14px;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
-  border: 1px solid rgba(86, 108, 138, 0.12);
+  border: 1px solid var(--border-default);
 }
 
-.record-top {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.record-identity {
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-}
+.record-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
+.record-identity { display: grid; gap: var(--space-2); min-width: 0; }
 
 .record-id {
   display: inline-flex;
@@ -488,210 +312,105 @@ onMounted(loadMessageDeliveries)
   width: fit-content;
   min-height: 24px;
   padding: 0 10px;
-  border-radius: 999px;
-  background: #eef4ff;
-  color: #2456a2;
-  font-size: 12px;
+  border-radius: var(--radius-full);
+  background: var(--color-primary-light);
+  color: var(--color-primary-dark);
+  font-size: var(--text-xs);
   font-weight: 800;
 }
 
-.record-source-line {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
+.record-source-line { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
 
-.source-pill,
-.source-chip {
+.source-pill, .source-chip {
   display: inline-flex;
   align-items: center;
   min-height: 28px;
   max-width: 100%;
   padding: 0 10px;
-  border-radius: 999px;
-  font-size: 12px;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
   font-weight: 600;
 }
-
-.source-pill {
-  background: #f1f6ff;
-  color: #2456a2;
-}
-
-.source-chip {
-  background: #f4f7fb;
-  color: #44556c;
-}
-
-.source-chip--muted {
-  color: #6b7c93;
-}
-
-.source-separator {
-  color: #8b9cb2;
-  font-size: 12px;
-  font-weight: 700;
-}
+.source-pill { background: #f1f6ff; color: var(--color-primary-dark); }
+.source-chip { background: #f4f7fb; color: var(--text-secondary); }
+.source-chip--muted { color: var(--text-muted); }
+.source-separator { color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
 
 .record-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
-  gap: 12px;
+  gap: var(--space-3);
 }
 
 .record-section {
   display: grid;
-  gap: 8px;
+  gap: var(--space-2);
   min-width: 0;
-  padding: 12px;
+  padding: var(--space-3);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.78);
-  border: 1px solid rgba(86, 108, 138, 0.08);
+  border: 1px solid var(--border-default);
 }
+.record-section-message { grid-column: span 2; }
 
-.record-section-message {
-  grid-column: span 2;
-}
+.section-label { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
 
-.section-label {
-  color: #71839b;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.cell-stack {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.cell-title {
-  color: #1d3555;
-  font-weight: 700;
-  word-break: break-word;
-}
-
-.cell-subtle {
-  color: #64748b;
-  font-size: 12px;
-}
-
-.cell-subtle-break {
-  word-break: break-all;
-}
+.cell-stack { display: grid; gap: 6px; min-width: 0; }
+.cell-title { color: var(--text-primary); font-weight: 700; word-break: break-word; }
+.cell-subtle { color: var(--text-secondary); font-size: var(--text-xs); }
+.cell-subtle-break { word-break: break-all; }
 
 .message-cell {
   white-space: pre-wrap;
   word-break: break-word;
   line-height: 1.6;
   color: #334155;
-  font-size: 13px;
+  font-size: var(--text-sm);
   min-height: 72px;
 }
 
-.claim-link,
-.inline-link {
-  color: #175cd3;
-  text-decoration: none;
-}
-
-.claim-link-button {
+.claim-link, .inline-link { color: var(--color-primary-dark); text-decoration: none; }
+.claim-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: fit-content;
   min-height: 34px;
   padding: 0 14px;
-  border-radius: 999px;
-  background: #eff6ff;
+  border-radius: var(--radius-full);
+  background: var(--color-primary-light);
   border: 1px solid rgba(23, 92, 211, 0.16);
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 700;
 }
 
-.meta-chip-row,
-.tag-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
+.meta-chip-row, .tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
 .meta-chip {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   min-height: 28px;
   padding: 0 10px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: #f5f8fc;
   color: #304866;
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 
-.error-inline {
-  color: #b42318;
-  line-height: 1.6;
-  font-size: 12px;
+.error-inline { color: var(--color-danger); line-height: 1.6; font-size: var(--text-xs); }
+
+@media (max-width: 1200px) { .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (max-width: 900px) {
+  .filter-grid,
+  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .record-section-message { grid-column: span 1; }
+  .filter-actions { flex-direction: column; align-items: flex-start; }
 }
-
-@media (max-width: 1400px) {
-  .filters-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 1180px) {
-  .summary-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .record-section-message {
-    grid-column: span 1;
-  }
-}
-
-@media (max-width: 980px) {
-  .panel-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .filters-grid,
-  .summary-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .filters-actions {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-
-@media (max-width: 720px) {
-  .panel-header h1 {
-    font-size: 28px;
-  }
-
-  .filters-grid,
-  .summary-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .filters-button-row {
-    width: 100%;
-  }
-
-  .filters-button-row :deep(.el-button) {
-    flex: 1 1 auto;
-  }
-
-  .record-top {
-    flex-direction: column;
-    align-items: flex-start;
-  }
+@media (max-width: 640px) {
+  .filter-grid,
+  .summary-grid { grid-template-columns: 1fr; }
+  .filter-buttons { width: 100%; }
+  .filter-buttons :deep(.el-button) { flex: 1 1 auto; }
+  .record-top { flex-direction: column; align-items: flex-start; }
 }
 </style>
diff --git a/apps/frontend/src/views/admin/AdminOrdersView.vue b/apps/frontend/src/views/admin/AdminOrdersView.vue
index a80cdda9..53140d3d 100644
--- a/apps/frontend/src/views/admin/AdminOrdersView.vue
+++ b/apps/frontend/src/views/admin/AdminOrdersView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 
-import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
+import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
 import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
 import { fetchAdminOrders } from '@/services/admin'
 import type { AdminOrderListItem, AdminPagination } from '@/types/admin'
@@ -77,10 +77,7 @@ function resolveItemSummary(item: AdminOrderListItem) {
 }
 
 function resolveBindingTone(completedCount: number, totalCount: number) {
-  if (completedCount <= 0) {
-    return 'warning'
-  }
-
+  if (completedCount <= 0) return 'warning'
   return completedCount === totalCount ? 'success' : 'primary'
 }
 
@@ -92,285 +89,193 @@ onMounted(loadOrders)
 </script>
 
 <template>
-  <section class="admin-panel">
-    <header class="panel-header">
-      <div class="panel-header-copy">
-        <h1>订单列表</h1>
-        <p>查看平台订单、支付状态、商品摘要和对应任务推进情况。</p>
-      </div>
-      <div class="panel-header-badge">共 {{ pagination.total }} 条订单</div>
-    </header>
+  <div class="orders-page">
+    <AdminPageHeader title="订单列表" description="查看平台订单、支付状态、商品摘要和对应任务推进情况。">
+      <template #extra>
+        <span class="total-badge">共 {{ pagination.total }} 条订单</span>
+      </template>
+    </AdminPageHeader>
 
-    <section class="filters-card">
-      <div class="filters-grid">
-        <label class="filter-field">
-          <span>平台订单号</span>
-          <input v-model="platformOrderId" class="text-input" placeholder="支持模糊匹配" />
-        </label>
-        <label class="filter-field">
-          <span>支付状态</span>
-          <select v-model="payStatus" class="text-input select-input">
-            <option v-for="option in adminPayStatusOptions" :key="option.value" :value="option.value">
-              {{ option.label }}
-            </option>
-          </select>
-        </label>
-        <label class="filter-field">
-          <span>SKU</span>
-          <input v-model="skuCode" class="text-input" placeholder="如 dnf-cdk-a" />
-        </label>
-        <label class="filter-field">
-          <span>开始日期</span>
-          <input v-model="dateFrom" class="text-input" type="date" />
-        </label>
-        <label class="filter-field">
-          <span>结束日期</span>
-          <input v-model="dateTo" class="text-input" type="date" />
-        </label>
+    <!-- 筛选 -->
+    <el-card shadow="never" class="filter-card">
+      <div class="filter-grid">
+        <el-input v-model="platformOrderId" placeholder="平台订单号（模糊匹配）" clearable @keyup.enter="loadOrders(1)" />
+        <el-select v-model="payStatus" placeholder="支付状态" clearable>
+          <el-option v-for="opt in adminPayStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+        </el-select>
+        <el-input v-model="skuCode" placeholder="SKU，如 dnf-cdk-a" clearable @keyup.enter="loadOrders(1)" />
+        <el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
+        <el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
       </div>
-      <div class="filters-actions">
-        <span class="filters-hint">订单信息、支付状态、绑定完成度和金额时间已拆成独立信息块，更方便排查。</span>
-        <div class="filters-button-row">
+      <div class="filter-actions">
+        <span class="filter-hint">订单信息、支付状态、绑定完成度和金额时间已拆成独立信息块，更方便排查。</span>
+        <div class="filter-buttons">
           <el-button round @click="resetFilters">重置</el-button>
-          <el-button round type="primary" @click="() => loadOrders(1)">查询</el-button>
+          <el-button round type="primary" @click="loadOrders(1)">查询</el-button>
         </div>
       </div>
-    </section>
+    </el-card>
 
-    <section v-if="!loading && items.length > 0" class="summary-grid">
-      <article class="summary-card summary-card-success">
+    <!-- 摘要 -->
+    <div v-if="!loading && items.length > 0" class="summary-grid">
+      <el-card shadow="never" class="summary-card summary-card--success">
         <span class="summary-label">当前页已支付</span>
         <strong class="summary-value">{{ summary.paidCount }}</strong>
         <span class="summary-meta">已完成付款，可继续跟进交付</span>
-      </article>
-      <article class="summary-card summary-card-danger">
+      </el-card>
+      <el-card shadow="never" class="summary-card summary-card--danger">
         <span class="summary-label">当前页已退款</span>
         <strong class="summary-value">{{ summary.refundedCount }}</strong>
         <span class="summary-meta">需要重点确认订单状态和任务收口</span>
-      </article>
-      <article class="summary-card summary-card-primary">
+      </el-card>
+      <el-card shadow="never" class="summary-card summary-card--primary">
         <span class="summary-label">当前页有完整绑定</span>
         <strong class="summary-value">{{ summary.bindingReadyCount }}</strong>
         <span class="summary-meta">至少有 1 个任务已完成完整绑定</span>
-      </article>
-    </section>
+      </el-card>
+    </div>
 
-    <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
-    <div v-if="loading" class="empty-block">订单列表加载中</div>
-    <div v-else-if="items.length === 0" class="empty-block">当前筛选条件下暂无订单</div>
+    <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
 
-    <div v-else class="orders-shell">
-      <div class="orders-toolbar">
-        <div>
+    <!-- 列表 -->
+    <el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="订单列表加载中">
+      <template v-if="items.length === 0 && !loading">
+        <el-empty description="当前筛选条件下暂无订单" :image-size="60" />
+      </template>
+
+      <template v-else>
+        <div class="orders-toolbar">
           <strong>订单明细</strong>
           <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
         </div>
-      </div>
 
-      <div class="order-list">
-        <article v-for="item in items" :key="item.orderId" class="order-card">
-          <div class="order-card-top">
-            <div class="order-identity">
-              <RouterLink :to="`/admin/orders/${item.orderId}`" class="cell-link order-no" :title="item.platformOrderId">
-                {{ item.platformOrderId }}
-              </RouterLink>
-              <div class="order-meta-row">
-                <span class="compact-chip">{{ item.platform || '-' }}</span>
-                <span class="compact-chip">{{ resolveShopLabel(item) }}</span>
-                <span class="compact-chip compact-chip--muted">买家 {{ resolveBuyerLabel(item) }}</span>
+        <div class="order-list">
+          <article v-for="item in items" :key="item.orderId" class="order-card">
+            <div class="order-card-top">
+              <div class="order-identity">
+                <RouterLink :to="`/admin/orders/${item.orderId}`" class="order-no" :title="item.platformOrderId">
+                  {{ item.platformOrderId }}
+                </RouterLink>
+                <div class="order-meta-row">
+                  <span class="compact-chip">{{ item.platform || '-' }}</span>
+                  <span class="compact-chip">{{ resolveShopLabel(item) }}</span>
+                  <span class="compact-chip compact-chip--muted">买家 {{ resolveBuyerLabel(item) }}</span>
+                </div>
               </div>
+              <AdminStatusTag :status="item.payStatus" />
             </div>
-            <AdminStatusTag :status="item.payStatus" />
-          </div>
 
-          <div class="order-grid">
-            <section class="order-section">
-              <span class="section-label">订单信息</span>
-              <div class="info-cell">
-                <span class="info-title">{{ resolveBuyerLabel(item) }}</span>
-                <span class="info-subline">联系方式 {{ resolveContactLabel(item) }}</span>
-                <span class="info-subline">店铺 {{ resolveShopLabel(item) }}</span>
-                <span class="info-subline">更新时间 {{ formatAdminDateTime(item.updatedAt) }}</span>
-              </div>
-            </section>
+            <div class="order-grid">
+              <section class="order-section">
+                <span class="section-label">订单信息</span>
+                <div class="info-cell">
+                  <span class="info-title">{{ resolveBuyerLabel(item) }}</span>
+                  <span class="info-subline">联系方式 {{ resolveContactLabel(item) }}</span>
+                  <span class="info-subline">店铺 {{ resolveShopLabel(item) }}</span>
+                  <span class="info-subline">更新时间 {{ formatAdminDateTime(item.updatedAt) }}</span>
+                </div>
+              </section>
 
-            <section class="order-section">
-              <span class="section-label">商品摘要</span>
-              <div class="info-cell">
-                <span class="info-title" :title="resolveItemSummary(item)">{{ resolveItemSummary(item) }}</span>
-                <span class="info-subline">{{ item.itemCount }} 项，合计 {{ item.totalQuantity }} 件</span>
-                <span class="info-subline" :title="resolveBindingSummary(item)">{{ resolveBindingSummary(item) }}</span>
-              </div>
-            </section>
+              <section class="order-section">
+                <span class="section-label">商品摘要</span>
+                <div class="info-cell">
+                  <span class="info-title" :title="resolveItemSummary(item)">{{ resolveItemSummary(item) }}</span>
+                  <span class="info-subline">{{ item.itemCount }} 项，合计 {{ item.totalQuantity }} 件</span>
+                  <span class="info-subline" :title="resolveBindingSummary(item)">{{ resolveBindingSummary(item) }}</span>
+                </div>
+              </section>
 
-            <section class="order-section">
-              <span class="section-label">订单进度</span>
-              <div class="status-stack">
-                <AdminStatusTag :status="item.payStatus" />
-                <AdminStatusTag :status="item.orderStatus" />
-                <AdminStatusTag :status="item.systemBindingStatus" />
-                <AdminStatusTag :status="item.userBindingStatus" />
-              </div>
-            </section>
+              <section class="order-section">
+                <span class="section-label">订单进度</span>
+                <div class="status-stack">
+                  <AdminStatusTag :status="item.payStatus" />
+                  <AdminStatusTag :status="item.orderStatus" />
+                  <AdminStatusTag :status="item.systemBindingStatus" />
+                  <AdminStatusTag :status="item.userBindingStatus" />
+                </div>
+              </section>
 
-            <section class="order-section">
-              <span class="section-label">金额 / 时间</span>
-              <div class="info-cell">
-                <span class="info-title amount-text">{{ item.totalAmount }} {{ item.currency }}</span>
-                <span class="info-subline">支付 {{ formatAdminDateTime(item.paidAt) }}</span>
-                <span class="info-subline">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
-              </div>
-            </section>
+              <section class="order-section">
+                <span class="section-label">金额 / 时间</span>
+                <div class="info-cell">
+                  <span class="info-title amount-text">{{ item.totalAmount }} {{ item.currency }}</span>
+                  <span class="info-subline">支付 {{ formatAdminDateTime(item.paidAt) }}</span>
+                  <span class="info-subline">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
+                </div>
+              </section>
 
-            <section class="order-section">
-              <span class="section-label">任务进度</span>
-              <div class="task-progress-inline">
-                <span class="progress-chip" :data-tone="resolveBindingTone(item.completedBindingTaskCount, item.taskCount)">
-                  完整绑定 {{ item.completedBindingTaskCount }}/{{ item.taskCount }}
-                </span>
-                <span class="progress-chip" :data-tone="resolveBindingTone(item.systemBoundTaskCount, item.taskCount)">
-                  系统绑定 {{ item.systemBoundTaskCount }}/{{ item.taskCount }}
-                </span>
-              </div>
-            </section>
-          </div>
-        </article>
-      </div>
+              <section class="order-section">
+                <span class="section-label">任务进度</span>
+                <div class="task-progress-inline">
+                  <span class="progress-chip" :data-tone="resolveBindingTone(item.completedBindingTaskCount, item.taskCount)">
+                    完整绑定 {{ item.completedBindingTaskCount }}/{{ item.taskCount }}
+                  </span>
+                  <span class="progress-chip" :data-tone="resolveBindingTone(item.systemBoundTaskCount, item.taskCount)">
+                    系统绑定 {{ item.systemBoundTaskCount }}/{{ item.taskCount }}
+                  </span>
+                </div>
+              </section>
+            </div>
+          </article>
+        </div>
 
-      <AdminPaginationBar
-        :page="pagination.page"
-        :page-size="pagination.pageSize"
-        :total="pagination.total"
-        :loading="loading"
-        @change="loadOrders"
-      />
-    </div>
-  </section>
+        <el-pagination
+          v-if="pagination.total > 0"
+          v-model:current-page="pagination.page"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          layout="total, prev, pager, next"
+          style="margin-top: 16px; justify-content: center"
+          @current-change="loadOrders"
+        />
+      </template>
+    </el-card>
+  </div>
 </template>
 
 <style scoped>
-.admin-panel {
-  display: grid;
-  gap: 14px;
-  min-width: 0;
-}
+.orders-page { display: grid; gap: 0; }
 
-.panel-header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.panel-header-copy {
-  min-width: 0;
-}
-
-.panel-header h1 {
-  margin: 0;
-  font-size: 34px;
-  line-height: 1.05;
-  letter-spacing: -0.04em;
-  color: #1d3555;
-}
-
-.panel-header p {
-  margin: 6px 0 0;
-  font-size: 14px;
-  color: #64748b;
-}
-
-.panel-header-badge {
-  flex: 0 0 auto;
+.total-badge {
   min-height: 34px;
   padding: 0 14px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.82);
-  border: 1px solid rgba(86, 108, 138, 0.12);
-  color: #38506e;
-  font-size: 12px;
+  border-radius: var(--radius-full);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
   font-weight: 700;
   display: inline-flex;
   align-items: center;
 }
 
-.filters-card,
-.summary-card,
-.orders-shell,
-.empty-block,
-.error-copy {
-  padding: 16px 18px;
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-  box-shadow: 0 14px 36px rgba(30, 49, 78, 0.06);
-}
+.filter-card { margin-top: var(--space-4); }
 
-.filters-card {
-  display: grid;
-  gap: 14px;
-}
-
-.filters-grid {
+.filter-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
+  gap: var(--space-3);
 }
 
-.filter-field {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.filter-field span {
-  color: #5d6f87;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.filters-actions {
+.filter-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--space-3);
+  margin-top: var(--space-3);
 }
 
-.filters-hint {
-  color: #64748b;
-  font-size: 12px;
-}
-
-.filters-button-row {
-  display: flex;
-  gap: 10px;
-  flex-shrink: 0;
-}
-
-.text-input {
-  width: 100%;
-  min-height: 38px;
-  padding: 0 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.94);
-  color: #24364e;
-  font-size: 13px;
-}
-
-.select-input {
-  appearance: none;
-}
+.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
+.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
 
 .summary-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
 }
 
 .summary-card {
-  display: grid;
-  gap: 6px;
   position: relative;
   overflow: hidden;
 }
@@ -381,121 +286,70 @@ onMounted(loadOrders)
   inset: auto -26px -26px auto;
   width: 96px;
   height: 96px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   opacity: 0.14;
 }
 
-.summary-card-success::after {
-  background: #12b76a;
-}
-
-.summary-card-danger::after {
-  background: #f04438;
-}
-
-.summary-card-primary::after {
-  background: #2563eb;
-}
+.summary-card--success::after { background: var(--color-success); }
+.summary-card--danger::after { background: var(--color-danger); }
+.summary-card--primary::after { background: var(--color-primary); }
 
 .summary-label {
-  color: #51647d;
-  font-size: 12px;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
   font-weight: 700;
   letter-spacing: 0.04em;
 }
 
 .summary-value {
-  font-size: 34px;
+  font-size: var(--text-3xl);
   line-height: 1;
-  color: #1d3555;
+  color: var(--text-primary);
 }
 
-.summary-meta {
-  color: #70829a;
-  font-size: 12px;
-}
+.summary-meta { color: var(--text-muted); font-size: var(--text-xs); }
 
-.error-copy {
-  margin: 0;
-  color: #b42318;
-}
+.table-card { margin-top: var(--space-4); overflow: visible; }
 
-.empty-block {
-  color: #64748b;
-}
+.orders-toolbar { margin-bottom: var(--space-3); }
+.orders-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
+.orders-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
 
-.orders-shell {
-  display: grid;
-  gap: 14px;
-  min-width: 0;
-}
-
-.orders-toolbar strong {
-  display: block;
-  color: #1f324a;
-  font-size: 14px;
-}
-
-.orders-toolbar span {
-  display: block;
-  margin-top: 4px;
-  color: #64748b;
-  font-size: 12px;
-}
-
-.order-list {
-  display: grid;
-  gap: 12px;
-}
+.order-list { display: grid; gap: var(--space-3); }
 
 .order-card {
   display: grid;
   gap: 14px;
   padding: 14px;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
-  border: 1px solid rgba(86, 108, 138, 0.12);
+  border: 1px solid var(--border-default);
 }
 
 .order-card-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--space-3);
 }
 
-.order-identity {
-  min-width: 0;
-  display: grid;
-  gap: 8px;
-}
-
-.cell-link {
-  color: inherit;
-  text-decoration: none;
-}
-
-.cell-link:hover {
-  color: #175cd3;
-}
+.order-identity { min-width: 0; display: grid; gap: var(--space-2); }
 
 .order-no {
   display: inline-block;
   max-width: 100%;
-  font-size: 20px;
+  font-size: var(--text-xl);
   line-height: 1.1;
   font-weight: 800;
-  color: #132238;
+  color: var(--text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-decoration: none;
 }
+.order-no:hover { color: var(--color-primary-dark); }
 
-.order-meta-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
+.order-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
 
 .compact-chip {
   display: inline-flex;
@@ -503,169 +357,78 @@ onMounted(loadOrders)
   min-height: 28px;
   max-width: 100%;
   padding: 0 10px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: #f4f7fb;
-  border: 1px solid rgba(86, 108, 138, 0.1);
-  color: #44556c;
-  font-size: 12px;
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
   font-weight: 600;
 }
 
-.compact-chip--muted {
-  color: #6b7c93;
-}
+.compact-chip--muted { color: var(--text-muted); }
 
 .order-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
-  gap: 12px;
+  gap: var(--space-3);
   min-width: 0;
 }
 
 .order-section {
   display: grid;
-  gap: 8px;
+  gap: var(--space-2);
   min-width: 0;
-  padding: 12px;
+  padding: var(--space-3);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.78);
-  border: 1px solid rgba(86, 108, 138, 0.08);
+  border: 1px solid var(--border-default);
 }
 
 .section-label {
-  color: #71839b;
+  color: var(--text-muted);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
 
-.info-cell {
-  display: grid;
-  gap: 5px;
-  min-width: 0;
-}
+.info-cell { display: grid; gap: 5px; min-width: 0; }
+.info-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
+.info-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
+.amount-text { white-space: nowrap; }
 
-.info-title {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #101828;
-  font-weight: 700;
-}
+.status-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
 
-.info-subline {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #475467;
-  font-size: 12px;
-}
-
-.amount-text {
-  white-space: nowrap;
-}
-
-.status-stack {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.task-progress-inline {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
+.task-progress-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
 
 .progress-chip {
   display: inline-flex;
   align-items: center;
   min-height: 28px;
   padding: 0 10px;
-  border-radius: 999px;
-  font-size: 12px;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
   font-weight: 700;
   border: 1px solid transparent;
   white-space: nowrap;
 }
 
-.progress-chip[data-tone='success'] {
-  color: #0f766e;
-  background: #ecfdf3;
-  border-color: #a6f4c5;
+.progress-chip[data-tone='success'] { color: #0f766e; background: var(--color-success-light); border-color: #a6f4c5; }
+.progress-chip[data-tone='primary'] { color: var(--color-primary-dark); background: var(--color-primary-light); border-color: #b2ddff; }
+.progress-chip[data-tone='warning'] { color: #b54708; background: var(--color-warning-light); border-color: #fedf89; }
+
+@media (max-width: 1200px) { .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (max-width: 900px) {
+  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .filter-actions { flex-direction: column; align-items: flex-start; }
 }
-
-.progress-chip[data-tone='primary'] {
-  color: #175cd3;
-  background: #eff8ff;
-  border-color: #b2ddff;
-}
-
-.progress-chip[data-tone='warning'] {
-  color: #b54708;
-  background: #fffaeb;
-  border-color: #fedf89;
-}
-
-@media (max-width: 1400px) {
-  .filters-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 1180px) {
-  .summary-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 980px) {
-  .panel-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .filters-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .filters-actions {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-
-@media (max-width: 720px) {
-  .panel-header h1 {
-    font-size: 28px;
-  }
-
-  .filters-grid,
-  .summary-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .filters-button-row {
-    width: 100%;
-  }
-
-  .filters-button-row :deep(.el-button) {
-    flex: 1 1 auto;
-  }
-
-  .order-card-top {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .order-no {
-    font-size: 18px;
-  }
+@media (max-width: 640px) {
+  .filter-grid,
+  .summary-grid { grid-template-columns: 1fr; }
+  .filter-buttons { width: 100%; }
+  .filter-buttons :deep(.el-button) { flex: 1 1 auto; }
+  .order-card-top { flex-direction: column; align-items: flex-start; }
+  .order-no { font-size: 18px; }
 }
 </style>
diff --git a/apps/frontend/src/views/admin/AdminTasksView.vue b/apps/frontend/src/views/admin/AdminTasksView.vue
index b6ff5533..75a1d40a 100644
--- a/apps/frontend/src/views/admin/AdminTasksView.vue
+++ b/apps/frontend/src/views/admin/AdminTasksView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 
-import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
+import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
 import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
 import { showConfirm, showError, showSuccess } from '@/lib/feedback'
 import {
@@ -65,11 +65,7 @@ async function loadTasks(page = pagination.value.page) {
 
 function formatBindingRoles(item: AdminTaskListItem) {
   const roles = item.bindingSummary.roleKeys
-
-  if (!Array.isArray(roles) || roles.length === 0) {
-    return '无绑定角色'
-  }
-
+  if (!Array.isArray(roles) || roles.length === 0) return '无绑定角色'
   return roles.join(' / ')
 }
 
@@ -78,9 +74,7 @@ function formatBindingCountSummary(item: AdminTaskListItem) {
   return `共 ${summary.totalBindingCount} 条 · 预占 ${summary.reservedBindingCount} · 已消费 ${summary.consumedBindingCount} · 已释放 ${summary.releasedBindingCount}`
 }
 
-onMounted(() => {
-  void loadTasks()
-})
+onMounted(() => { void loadTasks() })
 
 async function runAction(
   taskId: number,
@@ -89,29 +83,18 @@ async function runAction(
   confirmText: string,
 ) {
   try {
-    await showConfirm(confirmText, '确认操作', {
-      type: 'warning',
-      confirmButtonText: '继续执行',
-      cancelButtonText: '取消',
-    })
-  } catch {
-    return
-  }
+    await showConfirm(confirmText, '确认操作', { type: 'warning', confirmButtonText: '继续执行', cancelButtonText: '取消' })
+  } catch { return }
 
   actionLoadingId.value = taskId
-
   try {
     const response = await action()
-    if (response.data.claimUrl) {
-      lastClaimUrl.value = response.data.claimUrl
-    }
+    if (response.data.claimUrl) lastClaimUrl.value = response.data.claimUrl
     showSuccess(successMessage)
     await loadTasks()
   } catch (error) {
     showError(error instanceof Error ? error.message : '操作失败')
-  } finally {
-    actionLoadingId.value = null
-  }
+  } finally { actionLoadingId.value = null }
 }
 
 function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListItem) {
@@ -119,33 +102,15 @@ function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListI
     void runAction(item.taskId, () => retryAdminTask(item.taskId), '任务已重试', `确认重试任务 ${item.taskNo} 吗？`)
     return
   }
-
   if (actionKey === 'regenerate_claim_link') {
-    void runAction(
-      item.taskId,
-      () => regenerateAdminTaskClaimLink(item.taskId),
-      '领取链接已重新生成',
-      `确认重新生成任务 ${item.taskNo} 的领取链接吗？旧链接会失效。`,
-    )
+    void runAction(item.taskId, () => regenerateAdminTaskClaimLink(item.taskId), '领取链接已重新生成', `确认重新生成任务 ${item.taskNo} 的领取链接吗？旧链接会失效。`)
     return
   }
-
   if (actionKey === 'manual_review') {
-    void runAction(
-      item.taskId,
-      () => markAdminTaskManualReview(item.taskId),
-      '任务已转人工处理',
-      `确认将任务 ${item.taskNo} 转为人工处理吗？`,
-    )
+    void runAction(item.taskId, () => markAdminTaskManualReview(item.taskId), '任务已转人工处理', `确认将任务 ${item.taskNo} 转为人工处理吗？`)
     return
   }
-
-  void runAction(
-    item.taskId,
-    () => closeAdminTask(item.taskId),
-    '任务已关闭',
-    `确认关闭任务 ${item.taskNo} 吗？关闭后不会自动继续推进。`,
-  )
+  void runAction(item.taskId, () => closeAdminTask(item.taskId), '任务已关闭', `确认关闭任务 ${item.taskNo} 吗？关闭后不会自动继续推进。`)
 }
 
 function resetFilters() {
@@ -161,394 +126,250 @@ function resetFilters() {
 </script>
 
 <template>
-  <section class="admin-panel">
-    <header class="panel-header">
-      <div class="panel-header-copy">
-        <h1>交付任务</h1>
-        <p>更紧凑地查看任务状态、角色绑定、库存凭据和异常信息。</p>
-      </div>
-      <div class="panel-header-badge">共 {{ pagination.total }} 条任务</div>
-    </header>
+  <div class="tasks-page">
+    <AdminPageHeader title="交付任务" description="更紧凑地查看任务状态、角色绑定、库存凭据和异常信息。">
+      <template #extra>
+        <span class="total-badge">共 {{ pagination.total }} 条任务</span>
+      </template>
+    </AdminPageHeader>
 
-    <section class="filters-card">
-      <div class="filters-grid">
-        <label class="filter-field">
-          <span>状态</span>
-          <select v-model="status" class="text-input select-input">
-            <option v-for="option in adminTaskStatusOptions" :key="option.value" :value="option.value">
-              {{ option.label }}
-            </option>
-          </select>
-        </label>
-        <label class="filter-field">
-          <span>任务号</span>
-          <input v-model="taskNo" class="text-input" placeholder="支持模糊匹配" />
-        </label>
-        <label class="filter-field">
-          <span>订单号</span>
-          <input v-model="platformOrderId" class="text-input" placeholder="平台订单号" />
-        </label>
-        <label class="filter-field">
-          <span>角色 ID</span>
-          <input v-model="roleId" class="text-input" placeholder="角色唯一标识" />
-        </label>
-        <label class="filter-field">
-          <span>SKU</span>
-          <input v-model="skuCode" class="text-input" placeholder="商品 SKU" />
-        </label>
-        <label class="filter-field">
-          <span>开始日期</span>
-          <input v-model="dateFrom" class="text-input" type="date" />
-        </label>
-        <label class="filter-field">
-          <span>结束日期</span>
-          <input v-model="dateTo" class="text-input" type="date" />
-        </label>
+    <!-- 筛选 -->
+    <el-card shadow="never" class="filter-card">
+      <div class="filter-grid">
+        <el-select v-model="status" placeholder="状态" clearable>
+          <el-option v-for="opt in adminTaskStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+        </el-select>
+        <el-input v-model="taskNo" placeholder="任务号（模糊匹配）" clearable @keyup.enter="loadTasks(1)" />
+        <el-input v-model="platformOrderId" placeholder="平台订单号" clearable @keyup.enter="loadTasks(1)" />
+        <el-input v-model="roleId" placeholder="角色唯一标识" clearable @keyup.enter="loadTasks(1)" />
+        <el-input v-model="skuCode" placeholder="商品 SKU" clearable @keyup.enter="loadTasks(1)" />
+        <el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
+        <el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
       </div>
-      <div class="filters-actions">
-        <span class="filters-hint">桌面端已改为自适应卡片列表，不再出现横向滚动。</span>
-        <div class="filters-button-row">
+      <div class="filter-actions">
+        <span class="filter-hint">桌面端已改为自适应卡片列表，不再出现横向滚动。</span>
+        <div class="filter-buttons">
           <el-button round @click="resetFilters">重置</el-button>
-          <el-button round type="primary" @click="() => loadTasks(1)">查询</el-button>
+          <el-button round type="primary" @click="loadTasks(1)">查询</el-button>
         </div>
       </div>
-    </section>
+    </el-card>
 
-    <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
-    <p v-if="lastClaimUrl" class="info-copy">最近生成的领取链接：{{ lastClaimUrl }}</p>
-    <div v-if="loading" class="empty-block">任务列表加载中</div>
+    <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
+    <el-alert v-if="lastClaimUrl" :title="`最近生成的领取链接：${lastClaimUrl}`" type="info" show-icon :closable="false" style="margin-top: 16px" />
 
-    <div v-else-if="items.length === 0" class="empty-block">当前筛选条件下暂无任务</div>
+    <!-- 列表 -->
+    <el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="任务列表加载中">
+      <template v-if="items.length === 0 && !loading">
+        <el-empty description="当前筛选条件下暂无任务" :image-size="60" />
+      </template>
 
-    <div v-else class="tasks-shell">
-      <div class="tasks-toolbar">
-        <div>
+      <template v-else>
+        <div class="tasks-toolbar">
           <strong>任务列表</strong>
           <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
         </div>
-      </div>
 
-      <div class="task-list">
-        <article v-for="item in items" :key="item.taskId" class="task-card">
-          <div class="task-card-top">
-            <div class="task-identity">
-              <RouterLink :to="`/admin/tasks/${item.taskId}`" class="cell-link task-no" :title="item.taskNo">
-                {{ item.taskNo }}
-              </RouterLink>
-              <div class="task-meta-row">
-                <span class="compact-chip" :title="item.platformOrderId">订单 {{ item.platformOrderId }}</span>
-                <span class="compact-chip compact-chip--muted">重试 {{ item.retryCount }} 次</span>
+        <div class="task-list">
+          <article v-for="item in items" :key="item.taskId" class="task-card">
+            <div class="task-card-top">
+              <div class="task-identity">
+                <RouterLink :to="`/admin/tasks/${item.taskId}`" class="task-no" :title="item.taskNo">
+                  {{ item.taskNo }}
+                </RouterLink>
+                <div class="task-meta-row">
+                  <span class="compact-chip" :title="item.platformOrderId">订单 {{ item.platformOrderId }}</span>
+                  <span class="compact-chip compact-chip--muted">重试 {{ item.retryCount }} 次</span>
+                </div>
               </div>
+              <AdminStatusTag :status="item.status" />
             </div>
-            <AdminStatusTag :status="item.status" />
-          </div>
 
-          <div class="task-grid">
-            <section class="task-section">
-              <span class="section-label">任务进度</span>
-              <div class="progress-cell">
-                <div class="progress-row">
-                  <span class="progress-label">任务</span>
-                  <AdminStatusTag :status="item.status" />
+            <div class="task-grid">
+              <section class="task-section">
+                <span class="section-label">任务进度</span>
+                <div class="progress-cell">
+                  <div class="progress-row">
+                    <span class="progress-label">任务</span>
+                    <AdminStatusTag :status="item.status" />
+                  </div>
+                  <div class="progress-row">
+                    <span class="progress-label">系统</span>
+                    <AdminStatusTag :status="item.systemBindingStatus" />
+                  </div>
+                  <div class="progress-row">
+                    <span class="progress-label">完整</span>
+                    <AdminStatusTag :status="item.userBindingStatus" />
+                  </div>
                 </div>
-                <div class="progress-row">
-                  <span class="progress-label">系统</span>
-                  <AdminStatusTag :status="item.systemBindingStatus" />
+              </section>
+
+              <section class="task-section">
+                <span class="section-label">商品 / 凭据</span>
+                <div class="goods-cell">
+                  <span class="goods-title" :title="item.skuName || item.skuCode">{{ item.skuName || item.skuCode }}</span>
+                  <span class="goods-subline">SKU {{ item.skuCode || '-' }}</span>
+                  <span class="goods-subline" :title="item.inventoryDisplayMasked || '-'">凭据 {{ item.inventoryDisplayMasked || '-' }}</span>
+                  <span class="goods-subline" :title="formatBindingRoles(item)">绑定 {{ formatBindingRoles(item) }}</span>
+                  <span class="goods-subline goods-subline-strong" :title="formatBindingCountSummary(item)">{{ formatBindingCountSummary(item) }}</span>
                 </div>
-                <div class="progress-row">
-                  <span class="progress-label">完整</span>
-                  <AdminStatusTag :status="item.userBindingStatus" />
+              </section>
+
+              <section class="task-section">
+                <span class="section-label">角色绑定</span>
+                <div class="role-cell">
+                  <span class="role-title" :title="item.roleName || item.roleId || '-'">{{ item.roleName || '-' }}</span>
+                  <span class="role-subline" :title="item.roleId || '-'">角色ID {{ item.roleId || '-' }}</span>
+                  <span class="role-subline">登录 {{ item.loginType || '-' }}</span>
                 </div>
-              </div>
-            </section>
+              </section>
 
-            <section class="task-section">
-              <span class="section-label">商品 / 凭据</span>
-              <div class="goods-cell">
-                <span class="goods-title" :title="item.skuName || item.skuCode">{{ item.skuName || item.skuCode }}</span>
-                <span class="goods-subline">SKU {{ item.skuCode || '-' }}</span>
-                <span class="goods-subline" :title="item.inventoryDisplayMasked || '-'">
-                  凭据 {{ item.inventoryDisplayMasked || '-' }}
-                </span>
-                <span class="goods-subline" :title="formatBindingRoles(item)">
-                  绑定 {{ formatBindingRoles(item) }}
-                </span>
-                <span class="goods-subline goods-subline-strong" :title="formatBindingCountSummary(item)">
-                  {{ formatBindingCountSummary(item) }}
-                </span>
-              </div>
-            </section>
-
-            <section class="task-section">
-              <span class="section-label">角色绑定</span>
-              <div class="role-cell">
-                <span class="role-title" :title="item.roleName || item.roleId || '-'">{{ item.roleName || '-' }}</span>
-                <span class="role-subline" :title="item.roleId || '-'">角色ID {{ item.roleId || '-' }}</span>
-                <span class="role-subline">登录 {{ item.loginType || '-' }}</span>
-              </div>
-            </section>
-
-            <section class="task-section">
-              <span class="section-label">时间</span>
-              <div class="time-cell">
-                <span class="time-line">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
-                <span class="time-line">更新 {{ formatAdminDateTime(item.updatedAt) }}</span>
-                <span v-if="item.claimedAt" class="time-line">领取 {{ formatAdminDateTime(item.claimedAt) }}</span>
-                <span v-if="item.roleConfirmedAt" class="time-line">确认 {{ formatAdminDateTime(item.roleConfirmedAt) }}</span>
-                <span v-if="item.redeemedAt" class="time-line">兑换 {{ formatAdminDateTime(item.redeemedAt) }}</span>
-              </div>
-            </section>
-
-            <section class="task-section">
-              <span class="section-label">异常 / 操作</span>
-              <div class="task-end">
-                <span class="cell-error" :title="item.lastError || '-'">{{ item.lastError || '当前无异常' }}</span>
-                <div class="action-cell">
-                  <el-button
-                    v-if="canManageTaskLifecycle"
-                    :disabled="item.executorKey === 'manual_dispatch' || !['retry_pending', 'manual_review', 'waiting_inventory'].includes(item.status)"
-                    :loading="actionLoadingId === item.taskId"
-                    class="primary-action"
-                    plain
-                    type="danger"
-                    @click="runAction(item.taskId, () => retryAdminTask(item.taskId), '任务已重试', `确认重试任务 ${item.taskNo} 吗？`)"
-                  >
-                    重试
-                  </el-button>
-                  <el-button
-                    v-if="canManageTaskLifecycle && item.executorKey !== 'manual_dispatch'"
-                    class="secondary-action"
-                    @click="handleActionCommand('regenerate_claim_link', item)"
-                  >
-                    重发链接
-                  </el-button>
-                  <el-button
-                    v-if="canManageTaskLifecycle"
-                    class="secondary-action"
-                    @click="handleActionCommand('manual_review', item)"
-                  >
-                    转人工
-                  </el-button>
-                  <el-button
-                    v-if="canCloseTasks && !['redeemed', 'closed'].includes(item.status)"
-                    class="secondary-action secondary-action-danger"
-                    @click="handleActionCommand('close', item)"
-                  >
-                    关闭任务
-                  </el-button>
+              <section class="task-section">
+                <span class="section-label">时间</span>
+                <div class="time-cell">
+                  <span class="time-line">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
+                  <span class="time-line">更新 {{ formatAdminDateTime(item.updatedAt) }}</span>
+                  <span v-if="item.claimedAt" class="time-line">领取 {{ formatAdminDateTime(item.claimedAt) }}</span>
+                  <span v-if="item.roleConfirmedAt" class="time-line">确认 {{ formatAdminDateTime(item.roleConfirmedAt) }}</span>
+                  <span v-if="item.redeemedAt" class="time-line">兑换 {{ formatAdminDateTime(item.redeemedAt) }}</span>
                 </div>
-              </div>
-            </section>
-          </div>
-        </article>
-      </div>
+              </section>
 
-      <AdminPaginationBar
-        :page="pagination.page"
-        :page-size="pagination.pageSize"
-        :total="pagination.total"
-        :loading="loading"
-        @change="loadTasks"
-      />
-    </div>
-  </section>
+              <section class="task-section">
+                <span class="section-label">异常 / 操作</span>
+                <div class="task-end">
+                  <span class="cell-error" :title="item.lastError || '-'">{{ item.lastError || '当前无异常' }}</span>
+                  <div class="action-cell">
+                    <el-button
+                      v-if="canManageTaskLifecycle"
+                      :disabled="item.executorKey === 'manual_dispatch' || !['retry_pending', 'manual_review', 'waiting_inventory'].includes(item.status)"
+                      :loading="actionLoadingId === item.taskId"
+                      type="danger"
+                      plain
+                      size="small"
+                      @click="runAction(item.taskId, () => retryAdminTask(item.taskId), '任务已重试', `确认重试任务 ${item.taskNo} 吗？`)"
+                    >
+                      重试
+                    </el-button>
+                    <el-button
+                      v-if="canManageTaskLifecycle && item.executorKey !== 'manual_dispatch'"
+                      size="small"
+                      @click="handleActionCommand('regenerate_claim_link', item)"
+                    >
+                      重发链接
+                    </el-button>
+                    <el-button
+                      v-if="canManageTaskLifecycle"
+                      size="small"
+                      @click="handleActionCommand('manual_review', item)"
+                    >
+                      转人工
+                    </el-button>
+                    <el-button
+                      v-if="canCloseTasks && !['redeemed', 'closed'].includes(item.status)"
+                      size="small"
+                      type="danger"
+                      @click="handleActionCommand('close', item)"
+                    >
+                      关闭任务
+                    </el-button>
+                  </div>
+                </div>
+              </section>
+            </div>
+          </article>
+        </div>
+
+        <el-pagination
+          v-if="pagination.total > 0"
+          v-model:current-page="pagination.page"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          layout="total, prev, pager, next"
+          style="margin-top: 16px; justify-content: center"
+          @current-change="loadTasks"
+        />
+      </template>
+    </el-card>
+  </div>
 </template>
 
 <style scoped>
-.admin-panel {
-  display: grid;
-  gap: 14px;
-  min-width: 0;
-}
+.tasks-page { display: grid; gap: 0; }
 
-.panel-header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.panel-header-copy {
-  min-width: 0;
-}
-
-.panel-header h1 {
-  margin: 0;
-  font-size: 34px;
-  line-height: 1.05;
-  letter-spacing: -0.04em;
-  color: #1d3555;
-}
-
-.panel-header p {
-  margin: 6px 0 0;
-  font-size: 14px;
-  color: #64748b;
-}
-
-.panel-header-badge {
-  flex: 0 0 auto;
+.total-badge {
   min-height: 34px;
   padding: 0 14px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.82);
-  border: 1px solid rgba(86, 108, 138, 0.12);
-  color: #38506e;
-  font-size: 12px;
+  border-radius: var(--radius-full);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
   font-weight: 700;
   display: inline-flex;
   align-items: center;
 }
 
-.filters-card,
-.tasks-shell,
-.empty-block,
-.error-copy,
-.info-copy {
-  padding: 16px 18px;
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-  box-shadow: 0 14px 36px rgba(30, 49, 78, 0.06);
-}
+.filter-card { margin-top: var(--space-4); }
 
-.filters-card {
-  display: grid;
-  gap: 14px;
-}
-
-.filters-grid {
+.filter-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
+  gap: var(--space-3);
 }
 
-.filter-field {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.filter-field span {
-  color: #5d6f87;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.filters-actions {
+.filter-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--space-3);
+  margin-top: var(--space-3);
 }
 
-.filters-hint {
-  color: #64748b;
-  font-size: 12px;
-}
+.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
+.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
 
-.filters-button-row {
-  display: flex;
-  gap: 10px;
-  flex-shrink: 0;
-}
+.table-card { margin-top: var(--space-4); overflow: visible; }
 
-.text-input {
-  width: 100%;
-  min-height: 38px;
-  padding: 0 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.94);
-  color: #24364e;
-  font-size: 13px;
-}
+.tasks-toolbar { margin-bottom: var(--space-3); }
+.tasks-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
+.tasks-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
 
-.select-input {
-  appearance: none;
-}
-
-.error-copy {
-  margin: 0;
-  color: #b42318;
-}
-
-.info-copy {
-  margin: 0;
-  color: #175cd3;
-  word-break: break-all;
-}
-
-.tasks-shell {
-  display: grid;
-  gap: 14px;
-  min-width: 0;
-}
-
-.tasks-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.tasks-toolbar strong {
-  display: block;
-  color: #1f324a;
-  font-size: 14px;
-}
-
-.tasks-toolbar span {
-  display: block;
-  margin-top: 4px;
-  color: #64748b;
-  font-size: 12px;
-}
-
-.task-list {
-  display: grid;
-  gap: 12px;
-}
+.task-list { display: grid; gap: var(--space-3); }
 
 .task-card {
   display: grid;
   gap: 14px;
   padding: 14px;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
-  border: 1px solid rgba(86, 108, 138, 0.12);
+  border: 1px solid var(--border-default);
 }
 
 .task-card-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--space-3);
 }
 
-.task-identity {
-  min-width: 0;
-  display: grid;
-  gap: 8px;
-}
+.task-identity { min-width: 0; display: grid; gap: var(--space-2); }
 
 .task-no {
   display: inline-block;
   max-width: 100%;
-  font-size: 20px;
+  font-size: var(--text-xl);
   line-height: 1.1;
   font-weight: 800;
-  color: #132238;
+  color: var(--text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-decoration: none;
 }
+.task-no:hover { color: var(--color-primary-dark); }
 
-.task-meta-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
+.task-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
 
 .compact-chip {
   display: inline-flex;
@@ -556,55 +377,43 @@ function resetFilters() {
   min-height: 28px;
   max-width: 100%;
   padding: 0 10px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: #f4f7fb;
-  border: 1px solid rgba(86, 108, 138, 0.1);
-  color: #44556c;
-  font-size: 12px;
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
   font-weight: 600;
 }
 
-.compact-chip--muted {
-  color: #6b7c93;
-}
+.compact-chip--muted { color: var(--text-muted); }
 
 .task-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 12px;
+  gap: var(--space-3);
   min-width: 0;
 }
 
 .task-section {
   display: grid;
-  gap: 8px;
+  gap: var(--space-2);
   min-width: 0;
-  padding: 12px;
+  padding: var(--space-3);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.78);
-  border: 1px solid rgba(86, 108, 138, 0.08);
+  border: 1px solid var(--border-default);
 }
 
 .section-label {
-  color: #71839b;
+  color: var(--text-muted);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
 
-.progress-cell {
-  display: grid;
-  gap: 8px;
-}
-
-.progress-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  min-width: 0;
-}
-
+.progress-cell { display: grid; gap: var(--space-2); }
+.progress-row { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
 .progress-label {
   display: inline-flex;
   align-items: center;
@@ -612,224 +421,41 @@ function resetFilters() {
   min-width: 34px;
   min-height: 22px;
   padding: 0 7px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: #f7f9fc;
-  border: 1px solid rgba(86, 108, 138, 0.12);
-  color: #64748b;
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
   font-size: 11px;
   font-weight: 700;
   flex: 0 0 auto;
 }
 
-.cell-link {
-  color: inherit;
-  text-decoration: none;
+.goods-cell, .role-cell, .time-cell { display: grid; gap: 5px; min-width: 0; }
+.time-line { min-width: 0; color: #475467; font-size: var(--text-xs); line-height: 1.5; }
+.goods-title, .role-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
+.goods-subline, .role-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
+.goods-subline-strong { color: var(--text-primary); font-weight: 600; }
+
+.cell-error { display: block; min-width: 0; line-height: 1.55; color: #475467; word-break: break-word; font-size: var(--text-xs); }
+
+.task-end { display: grid; gap: var(--space-3); min-width: 0; }
+.action-cell { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
+
+@media (max-width: 1200px) {
+  .task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
-
-.cell-link:hover {
-  color: #175cd3;
+@media (max-width: 900px) {
+  .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .filter-actions { flex-direction: column; align-items: flex-start; }
 }
-
-.meta-cell,
-.goods-cell,
-.role-cell,
-.time-cell {
-  display: grid;
-  gap: 5px;
-  min-width: 0;
-}
-
-.time-line {
-  min-width: 0;
-  color: #475467;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.meta-title,
-.goods-title,
-.role-title {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #101828;
-  font-weight: 700;
-}
-
-.meta-subline,
-.goods-subline,
-.role-subline {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #475467;
-  font-size: 12px;
-}
-
-.meta-muted {
-  color: #98a2b3;
-}
-
-.goods-subline-strong {
-  color: #1d3555;
-  font-weight: 600;
-}
-
-.cell-error {
-  display: block;
-  min-width: 0;
-  line-height: 1.55;
-  color: #475467;
-  word-break: break-word;
-  font-size: 12px;
-}
-
-.task-end {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.action-cell {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: flex-start;
-}
-
-.primary-action,
-.secondary-action {
-  min-width: 82px;
-  min-height: 30px;
-  padding: 0 12px;
-  border-radius: 999px;
-  font-weight: 600;
-  font-size: 12px;
-}
-
-.primary-action {
-  background: #fff5f4;
-  border-color: #fda29b;
-  color: #d92d20;
-}
-
-.primary-action:hover,
-.primary-action:focus {
-  background: #fee4e2;
-  border-color: #f97066;
-  color: #b42318;
-}
-
-.secondary-action {
-  background: #ffffff;
-  border-color: rgba(86, 108, 138, 0.18);
-  color: #344054;
-}
-
-.secondary-action:hover,
-.secondary-action:focus {
-  border-color: rgba(23, 92, 211, 0.28);
-  color: #175cd3;
-  background: #f8fbff;
-}
-
-.secondary-action-danger {
-  border-color: rgba(217, 45, 32, 0.22);
-  color: #c43225;
-  background: #fff7f6;
-}
-
-.secondary-action-danger:hover,
-.secondary-action-danger:focus {
-  border-color: rgba(217, 45, 32, 0.34);
-  color: #a62c21;
-  background: #feeceb;
-}
-
-.action-cell :deep(.el-button > span) {
-  white-space: nowrap;
-}
-
-@media (max-width: 1400px) {
-  .task-grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 1180px) {
-  .task-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 980px) {
-  .task-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 720px) {
-  .task-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 1400px) {
-  .filters-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 980px) {
-  .panel-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .filters-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .filters-actions {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-
-@media (max-width: 720px) {
-  .panel-header h1 {
-    font-size: 28px;
-  }
-
-  .filters-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .filters-button-row,
-  .task-card-top,
-  .action-cell {
-    width: 100%;
-  }
-
-  .filters-button-row {
-    justify-content: stretch;
-  }
-
-  .filters-button-row :deep(.el-button),
-  .action-cell :deep(.el-button) {
-    flex: 1 1 auto;
-  }
-
-  .task-card-top {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .task-no {
-    font-size: 18px;
-  }
+@media (max-width: 640px) {
+  .task-grid,
+  .filter-grid { grid-template-columns: 1fr; }
+  .filter-buttons { width: 100%; }
+  .filter-buttons :deep(.el-button) { flex: 1 1 auto; }
+  .task-card-top { flex-direction: column; align-items: flex-start; }
+  .task-no { font-size: 18px; }
 }
 </style>
diff --git a/apps/frontend/src/views/admin/AdminUsersView.vue b/apps/frontend/src/views/admin/AdminUsersView.vue
index c54c7e17..3ca93442 100644
--- a/apps/frontend/src/views/admin/AdminUsersView.vue
+++ b/apps/frontend/src/views/admin/AdminUsersView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 
-import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
+import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
 import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
 import { isFeedbackDismissed, showConfirm, showError, showPrompt, showSuccess } from '@/lib/feedback'
 import {
@@ -28,464 +28,171 @@ const createUsername = ref('')
 const createPassword = ref('')
 const createRole = ref<AdminRole>('operator')
 const items = ref<AdminUserListItem[]>([])
-const pagination = ref<AdminPagination>({
-  page: 1,
-  pageSize: 20,
-  total: 0,
-})
+const pagination = ref<AdminPagination>({ page: 1, pageSize: 20, total: 0 })
 
-function isCurrentUser(userId: number) {
-  return getAdminUserId() === userId
-}
+function isCurrentUser(userId: number) { return getAdminUserId() === userId }
 
 function formatRoleLabel(role: AdminRole) {
-  if (role === 'admin') {
-    return '管理员'
-  }
-
-  if (role === 'support') {
-    return '客服'
-  }
-
+  if (role === 'admin') return '管理员'
+  if (role === 'support') return '客服'
   return '普通运营'
 }
 
 function formatInventoryGroups(item: AdminUserListItem) {
-  if (item.role !== 'support') {
-    return ['不限库存组']
-  }
-
-  if (item.inventoryGroupCodes.length === 0) {
-    return ['未绑定']
-  }
-
+  if (item.role !== 'support') return ['不限库存组']
+  if (item.inventoryGroupCodes.length === 0) return ['未绑定']
   return item.inventoryGroupCodes
 }
 
 async function loadUsers(page = pagination.value.page) {
-  if (!hasAdminRole('admin')) {
-    loading.value = false
-    return
-  }
-
-  loading.value = true
-  errorMessage.value = ''
-
+  if (!hasAdminRole('admin')) { loading.value = false; return }
+  loading.value = true; errorMessage.value = ''
   try {
-    const response = await fetchAdminUsers({
-      page,
-      pageSize: pagination.value.pageSize,
-      username: username.value.trim(),
-      role: role.value.trim(),
-      status: status.value.trim(),
-    })
-    items.value = response.data.items
-    pagination.value = response.data.pagination
+    const response = await fetchAdminUsers({ page, pageSize: pagination.value.pageSize, username: username.value.trim(), role: role.value.trim(), status: status.value.trim() })
+    items.value = response.data.items; pagination.value = response.data.pagination
   } catch (error) {
     errorMessage.value = error instanceof Error ? error.message : '读取后台用户失败'
-  } finally {
-    loading.value = false
-  }
+  } finally { loading.value = false }
 }
 
 async function submitCreate() {
-  if (!createUsername.value.trim() || !createPassword.value.trim()) {
-    showError('请填写账号和密码')
-    return
-  }
-
+  if (!createUsername.value.trim() || !createPassword.value.trim()) { showError('请填写账号和密码'); return }
   creating.value = true
-
   try {
-    await createAdminUser({
-      username: createUsername.value.trim(),
-      password: createPassword.value.trim(),
-      role: createRole.value,
-      status: 'active',
-    })
-    showSuccess('后台用户已创建')
-    createUsername.value = ''
-    createPassword.value = ''
-    createRole.value = 'operator'
+    await createAdminUser({ username: createUsername.value.trim(), password: createPassword.value.trim(), role: createRole.value, status: 'active' })
+    showSuccess('后台用户已创建'); createUsername.value = ''; createPassword.value = ''; createRole.value = 'operator'
     await loadUsers(1)
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '创建后台用户失败')
-  } finally {
-    creating.value = false
-  }
+  } catch (error) { showError(error instanceof Error ? error.message : '创建后台用户失败') }
+  finally { creating.value = false }
 }
 
 async function updateRole(item: AdminUserListItem, nextRole: AdminRole) {
-  if (item.role === nextRole) {
-    return
-  }
-
-  try {
-    await showConfirm(`确认将 ${item.username} 调整为${formatRoleLabel(nextRole)}吗？`, '确认操作', {
-      type: 'warning',
-      confirmButtonText: '继续执行',
-      cancelButtonText: '取消',
-    })
-  } catch {
-    return
-  }
-
+  if (item.role === nextRole) return
+  try { await showConfirm(`确认将 ${item.username} 调整为${formatRoleLabel(nextRole)}吗？`, '确认操作', { type: 'warning', confirmButtonText: '继续执行', cancelButtonText: '取消' }) } catch { return }
   actionLoadingId.value = item.userId
-
-  try {
-    await updateAdminUserRole(item.userId, { role: nextRole })
-    showSuccess('用户角色已更新')
-    await loadUsers()
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '更新用户角色失败')
-  } finally {
-    actionLoadingId.value = null
-  }
+  try { await updateAdminUserRole(item.userId, { role: nextRole }); showSuccess('用户角色已更新'); await loadUsers() }
+  catch (error) { showError(error instanceof Error ? error.message : '更新用户角色失败') }
+  finally { actionLoadingId.value = null }
 }
 
 async function toggleStatus(item: AdminUserListItem) {
   const nextStatus = item.status === 'active' ? 'disabled' : 'active'
-
-  try {
-    await showConfirm(`确认将 ${item.username}${nextStatus === 'active' ? '启用' : '停用'}吗？`, '确认操作', {
-      type: nextStatus === 'active' ? 'info' : 'warning',
-      confirmButtonText: '继续执行',
-      cancelButtonText: '取消',
-    })
-  } catch {
-    return
-  }
-
+  try { await showConfirm(`确认将 ${item.username}${nextStatus === 'active' ? '启用' : '停用'}吗？`, '确认操作', { type: nextStatus === 'active' ? 'info' : 'warning', confirmButtonText: '继续执行', cancelButtonText: '取消' }) } catch { return }
   actionLoadingId.value = item.userId
-
-  try {
-    await updateAdminUserStatus(item.userId, { status: nextStatus })
-    showSuccess('用户状态已更新')
-    await loadUsers()
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '更新用户状态失败')
-  } finally {
-    actionLoadingId.value = null
-  }
+  try { await updateAdminUserStatus(item.userId, { status: nextStatus }); showSuccess('用户状态已更新'); await loadUsers() }
+  catch (error) { showError(error instanceof Error ? error.message : '更新用户状态失败') }
+  finally { actionLoadingId.value = null }
 }
 
 async function promptResetPassword(item: AdminUserListItem) {
   try {
-    const result = await showPrompt(`请输入 ${item.username} 的新密码`, '重置密码', {
-      inputType: 'password',
-      inputPlaceholder: '至少 8 位',
-      confirmButtonText: '提交',
-      cancelButtonText: '取消',
-      inputValidator: (value) => value.trim().length >= 8 || '密码至少 8 位',
-    })
-
+    const result = await showPrompt(`请输入 ${item.username} 的新密码`, '重置密码', { inputType: 'password', inputPlaceholder: '至少 8 位', confirmButtonText: '提交', cancelButtonText: '取消', inputValidator: (value) => value.trim().length >= 8 || '密码至少 8 位' })
     actionLoadingId.value = item.userId
-    await resetAdminUserPassword(item.userId, { password: result.value.trim() })
-    showSuccess('用户密码已重置')
-    await loadUsers()
-  } catch (error) {
-    if (isFeedbackDismissed(error)) {
-      return
-    }
-    showError(error instanceof Error ? error.message : '重置密码失败')
-  } finally {
-    actionLoadingId.value = null
-  }
+    await resetAdminUserPassword(item.userId, { password: result.value.trim() }); showSuccess('用户密码已重置'); await loadUsers()
+  } catch (error) { if (isFeedbackDismissed(error)) return; showError(error instanceof Error ? error.message : '重置密码失败') }
+  finally { actionLoadingId.value = null }
 }
 
 async function promptUpdateInventoryGroups(item: AdminUserListItem) {
-  if (item.role !== 'support') {
-    showError('仅客服账号需要绑定库存组')
-    return
-  }
-
+  if (item.role !== 'support') { showError('仅客服账号需要绑定库存组'); return }
   try {
-    const result = await showPrompt(
-      `请输入 ${item.username} 可用的库存组，多个组用英文逗号分隔`,
-      '配置库存组',
-      {
-        inputType: 'text',
-        inputValue: item.inventoryGroupCodes.join(','),
-        inputPlaceholder: '例如 A组,B组,售后组',
-        confirmButtonText: '保存',
-        cancelButtonText: '取消',
-      },
-    )
-
-    const inventoryGroupCodes = String(result.value || '')
-      .split(',')
-      .map((value) => value.trim())
-      .filter(Boolean)
-
+    const result = await showPrompt(`请输入 ${item.username} 可用的库存组，多个组用英文逗号分隔`, '配置库存组', { inputType: 'text', inputValue: item.inventoryGroupCodes.join(','), inputPlaceholder: '例如 A组,B组,售后组', confirmButtonText: '保存', cancelButtonText: '取消' })
+    const inventoryGroupCodes = String(result.value || '').split(',').map((v) => v.trim()).filter(Boolean)
     actionLoadingId.value = item.userId
-    await updateAdminUserInventoryGroups(item.userId, {
-      inventoryGroupCodes,
-    })
-    showSuccess('用户库存组已更新')
-    await loadUsers()
-  } catch (error) {
-    if (isFeedbackDismissed(error)) {
-      return
-    }
-    showError(error instanceof Error ? error.message : '更新库存组失败')
-  } finally {
-    actionLoadingId.value = null
-  }
+    await updateAdminUserInventoryGroups(item.userId, { inventoryGroupCodes }); showSuccess('用户库存组已更新'); await loadUsers()
+  } catch (error) { if (isFeedbackDismissed(error)) return; showError(error instanceof Error ? error.message : '更新库存组失败') }
+  finally { actionLoadingId.value = null }
 }
 
 onMounted(loadUsers)
 </script>
 
 <template>
-  <section class="admin-panel">
-    <header class="panel-header">
-      <div>
-        <h1>后台用户</h1>
-        <p>管理员可维护后台账号、角色和启停状态，避免继续使用单一口令。</p>
-      </div>
-    </header>
+  <div class="users-page">
+    <AdminPageHeader title="后台用户" description="管理员可维护后台账号、角色和启停状态，避免继续使用单一口令。" />
 
-    <div v-if="!hasAdminRole('admin')" class="empty-block">仅管理员可以访问用户管理。</div>
+    <el-result v-if="!hasAdminRole('admin')" icon="warning" title="仅管理员可以访问用户管理。" />
 
     <template v-else>
-      <section class="form-card">
-        <div class="form-row">
-          <input v-model="username" class="text-input" placeholder="账号筛选" />
-          <select v-model="role" class="text-input select-input">
-            <option v-for="option in adminUserRoleOptions" :key="option.value" :value="option.value">
-              {{ option.label }}
-            </option>
-          </select>
-          <select v-model="status" class="text-input select-input">
-            <option v-for="option in adminUserStatusOptions" :key="option.value" :value="option.value">
-              {{ option.label }}
-            </option>
-          </select>
-          <el-button round @click="() => loadUsers()">查询列表</el-button>
+      <!-- 筛选 + 创建 -->
+      <el-card shadow="never" class="filter-card" style="margin-top: 16px">
+        <div class="filter-row">
+          <el-input v-model="username" placeholder="账号筛选" clearable style="width: 140px" @keyup.enter="loadUsers(1)" />
+          <el-select v-model="role" placeholder="角色" clearable style="width: 120px">
+            <el-option v-for="opt in adminUserRoleOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+          </el-select>
+          <el-select v-model="status" placeholder="状态" clearable style="width: 120px">
+            <el-option v-for="opt in adminUserStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+          </el-select>
+          <el-button @click="loadUsers(1)">查询列表</el-button>
         </div>
-
-        <div class="form-row form-row-top">
-          <input v-model="createUsername" class="text-input" placeholder="新账号" />
-          <input v-model="createPassword" class="text-input" type="password" placeholder="新密码，至少 8 位" />
-          <select v-model="createRole" class="text-input select-input">
-            <option value="operator">普通运营</option>
-            <option value="support">客服</option>
-            <option value="admin">管理员</option>
-          </select>
-          <el-button :loading="creating" round type="primary" @click="submitCreate">新增用户</el-button>
+        <el-divider />
+        <div class="filter-row">
+          <el-input v-model="createUsername" placeholder="新账号" style="width: 140px" />
+          <el-input v-model="createPassword" type="password" show-password placeholder="新密码，至少 8 位" style="width: 180px" />
+          <el-select v-model="createRole" style="width: 120px">
+            <el-option value="operator" label="普通运营" />
+            <el-option value="support" label="客服" />
+            <el-option value="admin" label="管理员" />
+          </el-select>
+          <el-button :loading="creating" type="primary" @click="submitCreate">新增用户</el-button>
         </div>
-      </section>
+      </el-card>
 
-      <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
-      <div v-if="loading" class="empty-block">用户列表加载中</div>
+      <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
 
-      <div v-else class="table-card">
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>账号</th>
-              <th>角色</th>
-              <th>库存组</th>
-              <th>状态</th>
-              <th>创建时间</th>
-              <th>更新时间</th>
-              <th>操作</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in items" :key="item.userId">
-              <td>{{ item.userId }}</td>
-              <td>{{ item.username }}</td>
-              <td>{{ formatRoleLabel(item.role) }}</td>
-              <td>
-                <div class="group-chip-row">
-                  <span
-                    v-for="groupCode in formatInventoryGroups(item)"
-                    :key="`${item.userId}-${groupCode}`"
-                    :class="['group-chip', { 'group-chip--muted': groupCode === '未绑定' || groupCode === '不限库存组' }]"
-                  >
-                    {{ groupCode }}
-                  </span>
-                </div>
-              </td>
-              <td><AdminStatusTag :status="item.status" /></td>
-              <td>{{ formatAdminDateTime(item.createdAt) }}</td>
-              <td>{{ formatAdminDateTime(item.updatedAt) }}</td>
-              <td>
-                <div class="action-stack">
-                  <el-button
-                    :loading="actionLoadingId === item.userId"
-                    link
-                    :disabled="isCurrentUser(item.userId)"
-                    @click="updateRole(item, 'admin')"
-                  >
-                    设为管理员
-                  </el-button>
-                  <el-button
-                    :loading="actionLoadingId === item.userId"
-                    link
-                    :disabled="isCurrentUser(item.userId)"
-                    @click="updateRole(item, 'operator')"
-                  >
-                    设为运营
-                  </el-button>
-                  <el-button
-                    :loading="actionLoadingId === item.userId"
-                    link
-                    :disabled="isCurrentUser(item.userId)"
-                    @click="updateRole(item, 'support')"
-                  >
-                    设为客服
-                  </el-button>
-                  <el-button
-                    :loading="actionLoadingId === item.userId"
-                    link
-                    :disabled="isCurrentUser(item.userId)"
-                    @click="toggleStatus(item)"
-                  >
-                    {{ item.status === 'active' ? '停用' : '启用' }}
-                  </el-button>
-                  <el-button
-                    :loading="actionLoadingId === item.userId"
-                    link
-                    :disabled="item.role !== 'support'"
-                    @click="promptUpdateInventoryGroups(item)"
-                  >
-                    配库存组
-                  </el-button>
-                  <el-button
-                    :loading="actionLoadingId === item.userId"
-                    link
-                    type="primary"
-                    @click="promptResetPassword(item)"
-                  >
-                    重置密码
-                  </el-button>
-                  <span v-if="isCurrentUser(item.userId)" class="self-copy">当前登录账号</span>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <AdminPaginationBar
-          :page="pagination.page"
+      <el-card shadow="never" style="margin-top: 16px">
+        <el-table :data="items" stripe size="small" v-loading="loading" element-loading-text="用户列表加载中">
+          <el-table-column prop="userId" label="ID" width="70" align="center" />
+          <el-table-column prop="username" label="账号" width="140" />
+          <el-table-column label="角色" width="100">
+            <template #default="{ row }">{{ formatRoleLabel(row.role) }}</template>
+          </el-table-column>
+          <el-table-column label="库存组" min-width="180">
+            <template #default="{ row }">
+              <el-tag v-for="(code, i) in formatInventoryGroups(row)" :key="i" size="small" :type="(code === '未绑定' || code === '不限库存组') ? 'info' : undefined" style="margin-right: 4px; margin-bottom: 2px">{{ code }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="90">
+            <template #default="{ row }"><AdminStatusTag :status="row.status" /></template>
+          </el-table-column>
+          <el-table-column label="创建时间" width="180">
+            <template #default="{ row }">{{ formatAdminDateTime(row.createdAt) }}</template>
+          </el-table-column>
+          <el-table-column label="更新时间" width="180">
+            <template #default="{ row }">{{ formatAdminDateTime(row.updatedAt) }}</template>
+          </el-table-column>
+          <el-table-column label="操作" min-width="300">
+            <template #default="{ row }">
+              <div class="action-stack">
+                <el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="updateRole(row, 'admin')">设为管理员</el-button>
+                <el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="updateRole(row, 'operator')">设为运营</el-button>
+                <el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="updateRole(row, 'support')">设为客服</el-button>
+                <el-button :loading="actionLoadingId === row.userId" size="small" :disabled="isCurrentUser(row.userId)" @click="toggleStatus(row)">{{ row.status === 'active' ? '停用' : '启用' }}</el-button>
+                <el-button :loading="actionLoadingId === row.userId" size="small" :disabled="row.role !== 'support'" @click="promptUpdateInventoryGroups(row)">配库存组</el-button>
+                <el-button :loading="actionLoadingId === row.userId" size="small" type="primary" @click="promptResetPassword(row)">重置密码</el-button>
+                <el-tag v-if="isCurrentUser(row.userId)" size="small" type="info">当前登录账号</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <template #empty><el-empty :image-size="60" description="暂无用户" /></template>
+        </el-table>
+        <el-pagination
+          v-if="pagination.total > 0"
+          v-model:current-page="pagination.page"
           :page-size="pagination.pageSize"
           :total="pagination.total"
-          :loading="loading"
-          @change="loadUsers"
+          layout="total, prev, pager, next"
+          style="margin-top: 16px; justify-content: center"
+          @current-change="loadUsers"
         />
-      </div>
+      </el-card>
     </template>
-  </section>
+  </div>
 </template>
 
 <style scoped>
-.admin-panel {
-  display: grid;
-  gap: 16px;
-}
-
-.panel-header h1 {
-  margin: 0;
-  color: #1d3555;
-}
-
-.panel-header p {
-  margin: 8px 0 0;
-  color: #64748b;
-}
-
-.form-card,
-.table-card,
-.empty-block,
-.error-copy {
-  padding: 18px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-}
-
-.error-copy {
-  color: #b42318;
-}
-
-.form-row {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.form-row-top {
-  margin-top: 12px;
-}
-
-.text-input {
-  width: 100%;
-  min-height: 42px;
-  padding: 0 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.94);
-}
-
-.select-input {
-  appearance: none;
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.data-table th,
-.data-table td {
-  padding: 12px 10px;
-  text-align: left;
-  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
-  color: #334155;
-  vertical-align: top;
-}
-
-.data-table th {
-  color: #64748b;
-  font-size: 13px;
-}
-
-.action-stack {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.group-chip-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.group-chip {
-  display: inline-flex;
-  align-items: center;
-  min-height: 28px;
-  padding: 0 10px;
-  border-radius: 999px;
-  background: rgba(37, 89, 167, 0.08);
-  border: 1px solid rgba(37, 89, 167, 0.12);
-  color: #2559a7;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.group-chip--muted {
-  background: rgba(148, 163, 184, 0.12);
-  border-color: rgba(148, 163, 184, 0.18);
-  color: #64748b;
-}
-
-.self-copy {
-  color: #64748b;
-  font-size: 12px;
-  line-height: 30px;
-}
+.users-page { display: grid; gap: 0; }
+.filter-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
+.action-stack { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
 </style>
diff --git a/apps/frontend/src/views/admin/AdminWebhookEventsView.vue b/apps/frontend/src/views/admin/AdminWebhookEventsView.vue
index ab0d92ed..e69fc660 100644
--- a/apps/frontend/src/views/admin/AdminWebhookEventsView.vue
+++ b/apps/frontend/src/views/admin/AdminWebhookEventsView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 
-import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
+import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
 import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
 import { showConfirm, showError, showSuccess } from '@/lib/feedback'
 import { fetchAdminWebhookEvents, replayAdminWebhookEvent } from '@/services/admin'
@@ -65,30 +65,17 @@ async function loadEvents(page = pagination.value.page) {
 
 async function submitReplay(item: AdminWebhookEventListItem) {
   try {
-    await showConfirm(
-      `确认重放 webhook #${item.eventId} 吗？`,
-      '确认重放',
-      {
-        type: 'warning',
-        confirmButtonText: '继续重放',
-        cancelButtonText: '取消',
-      },
-    )
-  } catch {
-    return
-  }
+    await showConfirm(`确认重放 webhook #${item.eventId} 吗？`, '确认重放', { type: 'warning', confirmButtonText: '继续重放', cancelButtonText: '取消' })
+  } catch { return }
 
   actionLoadingId.value = item.eventId
-
   try {
     await replayAdminWebhookEvent(item.eventId)
     showSuccess('Webhook 已重放')
     await loadEvents()
   } catch (error) {
     showError(error instanceof Error ? error.message : '重放 webhook 失败')
-  } finally {
-    actionLoadingId.value = null
-  }
+  } finally { actionLoadingId.value = null }
 }
 
 function resetFilters() {
@@ -105,11 +92,7 @@ function resetFilters() {
 
 function formatRequestTimestamp(value: string) {
   const normalized = String(value || '').trim()
-
-  if (!/^\d{10,13}$/.test(normalized)) {
-    return normalized || '-'
-  }
-
+  if (!/^\d{10,13}$/.test(normalized)) return normalized || '-'
   const epochMs = normalized.length === 13 ? Number(normalized) : Number(normalized) * 1000
   return formatAdminDateTime(new Date(epochMs).toISOString())
 }
@@ -126,463 +109,278 @@ onMounted(loadEvents)
 </script>
 
 <template>
-  <section class="admin-panel">
-    <header class="panel-header">
-      <div class="panel-header-copy">
-        <h1>Webhook 日志</h1>
-        <p>查看平台推送处理情况、验签结果、请求来源和错误信息。</p>
-      </div>
-      <div class="panel-header-badge">共 {{ pagination.total }} 条事件</div>
-    </header>
+  <div class="webhooks-page">
+    <AdminPageHeader title="Webhook 日志" description="查看平台推送处理情况、验签结果、请求来源和错误信息。">
+      <template #extra>
+        <span class="total-badge">共 {{ pagination.total }} 条事件</span>
+      </template>
+    </AdminPageHeader>
 
-    <section class="filters-card">
-      <div class="filters-grid">
-        <label class="filter-field">
-          <span>服务商</span>
-          <input v-model="provider" class="text-input" placeholder="如 agiso" />
-        </label>
-        <label class="filter-field">
-          <span>业务平台</span>
-          <input v-model="platform" class="text-input" placeholder="如 xianyu / taobao" />
-        </label>
-        <label class="filter-field">
-          <span>处理结果</span>
-          <select v-model="processed" class="text-input select-input">
-            <option v-for="option in adminWebhookProcessedOptions" :key="option.value" :value="option.value">
-              {{ option.label }}
-            </option>
-          </select>
-        </label>
-        <label class="filter-field">
-          <span>可见级别</span>
-          <select v-model="visibility" class="text-input select-input">
-            <option v-for="option in adminWebhookVisibilityOptions" :key="option.value" :value="option.value">
-              {{ option.label }}
-            </option>
-          </select>
-        </label>
-        <label class="filter-field">
-          <span>平台订单号</span>
-          <input v-model="platformOrderId" class="text-input" placeholder="平台订单号" />
-        </label>
-        <label class="filter-field">
-          <span>关联订单 ID</span>
-          <input v-model="relatedOrderId" class="text-input" placeholder="后台订单 ID" />
-        </label>
-        <label class="filter-field">
-          <span>开始日期</span>
-          <input v-model="dateFrom" class="text-input" type="date" />
-        </label>
-        <label class="filter-field">
-          <span>结束日期</span>
-          <input v-model="dateTo" class="text-input" type="date" />
-        </label>
+    <!-- 筛选 -->
+    <el-card shadow="never" class="filter-card">
+      <div class="filter-grid">
+        <el-input v-model="provider" placeholder="服务商，如 agiso" clearable @keyup.enter="loadEvents(1)" />
+        <el-input v-model="platform" placeholder="业务平台，如 xianyu / taobao" clearable @keyup.enter="loadEvents(1)" />
+        <el-select v-model="processed" placeholder="处理结果" clearable>
+          <el-option v-for="opt in adminWebhookProcessedOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+        </el-select>
+        <el-select v-model="visibility" placeholder="可见级别" clearable>
+          <el-option v-for="opt in adminWebhookVisibilityOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+        </el-select>
+        <el-input v-model="platformOrderId" placeholder="平台订单号" clearable @keyup.enter="loadEvents(1)" />
+        <el-input v-model="relatedOrderId" placeholder="后台订单 ID" clearable @keyup.enter="loadEvents(1)" />
+        <el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
+        <el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
       </div>
-      <div class="filters-actions">
-        <span class="filters-hint">Webhook 事件已拆成来源、摘要、订单、验签、请求来源几个信息块，排查会更直观。</span>
-        <div class="filters-button-row">
+      <div class="filter-actions">
+        <span class="filter-hint">Webhook 事件已拆成来源、摘要、订单、验签、请求来源几个信息块，排查会更直观。</span>
+        <div class="filter-buttons">
           <el-button round @click="resetFilters">重置</el-button>
-          <el-button round type="primary" @click="() => loadEvents(1)">查询</el-button>
+          <el-button round type="primary" @click="loadEvents(1)">查询</el-button>
         </div>
       </div>
-    </section>
+    </el-card>
 
-    <section v-if="!loading && items.length > 0" class="summary-grid">
-      <article class="summary-card summary-card-success">
+    <!-- 摘要 -->
+    <div v-if="!loading && items.length > 0" class="summary-grid">
+      <el-card shadow="never" class="summary-card summary-card--success">
         <span class="summary-label">当前页处理成功</span>
         <strong class="summary-value">{{ summary.processedCount }}</strong>
         <span class="summary-meta">已通过处理链路，通常无需人工介入</span>
-      </article>
-      <article class="summary-card summary-card-danger">
+      </el-card>
+      <el-card shadow="never" class="summary-card summary-card--danger">
         <span class="summary-label">当前页异常 / 失败</span>
         <strong class="summary-value">{{ summary.failedCount }}</strong>
         <span class="summary-meta">优先查看验签、处理错误和请求来源</span>
-      </article>
-      <article class="summary-card summary-card-primary">
+      </el-card>
+      <el-card shadow="never" class="summary-card summary-card--primary">
         <span class="summary-label">当前页重要事件</span>
         <strong class="summary-value">{{ summary.importantCount }}</strong>
         <span class="summary-meta">仅重要模式下更适合日常排查</span>
-      </article>
-    </section>
+      </el-card>
+    </div>
 
-    <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
-    <div v-if="loading" class="empty-block">Webhook 列表加载中</div>
-    <div v-else-if="items.length === 0" class="empty-block">当前筛选条件下暂无 Webhook 事件</div>
+    <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
 
-    <div v-else class="events-shell">
-      <div class="events-toolbar">
-        <div>
+    <!-- 列表 -->
+    <el-card shadow="never" class="table-card" v-loading="loading" element-loading-text="Webhook 列表加载中">
+      <template v-if="items.length === 0 && !loading">
+        <el-empty description="当前筛选条件下暂无 Webhook 事件" :image-size="60" />
+      </template>
+
+      <template v-else>
+        <div class="events-toolbar">
           <strong>Webhook 列表</strong>
           <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
         </div>
-      </div>
 
-      <div class="event-list">
-        <article v-for="item in items" :key="item.eventId" class="event-card">
-          <div class="event-card-top">
-            <div class="event-identity">
-              <RouterLink :to="`/admin/webhook-events/${item.eventId}`" class="cell-link event-no">
-                #{{ item.eventId }} · {{ formatAdminWebhookEventType(item.eventType) }}
-              </RouterLink>
-              <div class="event-meta-row">
-                <span class="compact-chip">{{ item.provider || '-' }}</span>
-                <span class="compact-chip">{{ item.platform || '-' }}</span>
-                <span v-if="item.shopName || item.shopId" class="compact-chip compact-chip--muted">
-                  {{ item.shopName || item.shopId }}
-                </span>
+        <div class="event-list">
+          <article v-for="item in items" :key="item.eventId" class="event-card">
+            <div class="event-card-top">
+              <div class="event-identity">
+                <RouterLink :to="`/admin/webhook-events/${item.eventId}`" class="event-no">
+                  #{{ item.eventId }} · {{ formatAdminWebhookEventType(item.eventType) }}
+                </RouterLink>
+                <div class="event-meta-row">
+                  <span class="compact-chip">{{ item.provider || '-' }}</span>
+                  <span class="compact-chip">{{ item.platform || '-' }}</span>
+                  <span v-if="item.shopName || item.shopId" class="compact-chip compact-chip--muted">{{ item.shopName || item.shopId }}</span>
+                </div>
+              </div>
+              <div class="event-top-actions">
+                <span class="compact-chip compact-chip--muted">{{ formatVisibilityLabel(item.visibilityLevel) }}</span>
+                <el-button v-if="canReplay" :loading="actionLoadingId === item.eventId" size="small" @click="submitReplay(item)">重放</el-button>
               </div>
             </div>
-            <div class="event-top-actions">
-              <span class="compact-chip compact-chip--muted">{{ formatVisibilityLabel(item.visibilityLevel) }}</span>
-              <el-button
-                v-if="canReplay"
-                :loading="actionLoadingId === item.eventId"
-                class="secondary-action"
-                @click="submitReplay(item)"
-              >
-                重放
-              </el-button>
+
+            <div class="event-grid">
+              <section class="event-section">
+                <span class="section-label">来源</span>
+                <div class="cell-stack">
+                  <div class="cell-title">{{ item.provider }} / {{ item.platform }}</div>
+                  <div v-if="item.platformRaw && item.platformRaw !== item.platform" class="cell-subtle">原始平台 {{ item.platformRaw }}</div>
+                  <div class="meta-chip-row">
+                    <span class="meta-chip">店铺 {{ item.shopName || item.shopId || '-' }}</span>
+                    <span v-if="item.shopId" class="meta-chip">ID {{ item.shopId }}</span>
+                  </div>
+                </div>
+              </section>
+
+              <section class="event-section">
+                <span class="section-label">事件摘要</span>
+                <div class="cell-stack">
+                  <div class="cell-title">{{ formatAdminWebhookEventType(item.eventType) }}</div>
+                  <div v-if="item.messageText" class="cell-subtle">{{ item.messageText }}</div>
+                  <div class="meta-chip-row">
+                    <span v-if="item.aopic" class="meta-chip">aopic {{ item.aopic }}</span>
+                    <span v-if="item.itemCount" class="meta-chip">商品 {{ item.itemCount }}</span>
+                  </div>
+                  <div class="mono-inline event-key" :title="item.eventKey">Key: {{ item.eventKey }}</div>
+                </div>
+              </section>
+
+              <section class="event-section">
+                <span class="section-label">订单与店铺</span>
+                <div class="cell-stack">
+                  <div class="cell-title">平台单 {{ item.platformOrderId || '-' }}</div>
+                  <div class="cell-subtle">买家 {{ item.buyerName || item.buyerId || '-' }}</div>
+                  <div class="cell-subtle">金额 {{ formatAmount(item) }}</div>
+                  <div class="meta-chip-row">
+                    <span class="meta-chip">
+                      关联订单
+                      <template v-if="item.relatedOrderId">
+                        <RouterLink class="inline-link" :to="`/admin/orders/${item.relatedOrderId}`">{{ item.relatedOrderId }}</RouterLink>
+                      </template>
+                      <template v-else>-</template>
+                    </span>
+                    <span class="meta-chip">任务 {{ item.taskCount }}</span>
+                  </div>
+                </div>
+              </section>
+
+              <section class="event-section">
+                <span class="section-label">验签与处理</span>
+                <div class="cell-stack">
+                  <div class="tag-row">
+                    <AdminStatusTag :status="item.signatureValid ? 'success' : 'failed'" />
+                    <AdminStatusTag :status="item.processed ? 'success' : 'failed'" />
+                  </div>
+                  <div class="cell-subtle" :title="item.requestSign || '-'">签名 {{ item.requestSign || '-' }}</div>
+                  <div v-if="item.processError" class="error-inline">{{ item.processError }}</div>
+                </div>
+              </section>
+
+              <section class="event-section">
+                <span class="section-label">请求来源</span>
+                <div class="cell-stack">
+                  <div class="cell-title">{{ item.sourceHost || '-' }}</div>
+                  <div class="cell-subtle">IP {{ item.sourceIp || '-' }}</div>
+                  <div class="cell-subtle line-clamp-2">UA {{ item.userAgent || '-' }}</div>
+                  <div class="cell-subtle">请求时间 {{ formatRequestTimestamp(item.requestTimestamp) }}</div>
+                </div>
+              </section>
+
+              <section class="event-section">
+                <span class="section-label">时间</span>
+                <div class="cell-stack">
+                  <div class="cell-title">{{ formatAdminDateTime(item.createdAt) }}</div>
+                  <div class="cell-subtle">事件 ID #{{ item.eventId }}</div>
+                </div>
+              </section>
             </div>
-          </div>
+          </article>
+        </div>
 
-          <div class="event-grid">
-            <section class="event-section">
-              <span class="section-label">来源</span>
-              <div class="cell-stack">
-                <div class="cell-title">{{ item.provider }} / {{ item.platform }}</div>
-                <div v-if="item.platformRaw && item.platformRaw !== item.platform" class="cell-subtle">
-                  原始平台 {{ item.platformRaw }}
-                </div>
-                <div class="meta-chip-row">
-                  <span class="meta-chip">店铺 {{ item.shopName || item.shopId || '-' }}</span>
-                  <span v-if="item.shopId" class="meta-chip">ID {{ item.shopId }}</span>
-                </div>
-              </div>
-            </section>
-
-            <section class="event-section">
-              <span class="section-label">事件摘要</span>
-              <div class="cell-stack">
-                <div class="cell-title">{{ formatAdminWebhookEventType(item.eventType) }}</div>
-                <div v-if="item.messageText" class="cell-subtle">{{ item.messageText }}</div>
-                <div class="meta-chip-row">
-                  <span v-if="item.aopic" class="meta-chip">aopic {{ item.aopic }}</span>
-                  <span v-if="item.itemCount" class="meta-chip">商品 {{ item.itemCount }}</span>
-                </div>
-                <div class="mono-inline event-key" :title="item.eventKey">Key: {{ item.eventKey }}</div>
-              </div>
-            </section>
-
-            <section class="event-section">
-              <span class="section-label">订单与店铺</span>
-              <div class="cell-stack">
-                <div class="cell-title">平台单 {{ item.platformOrderId || '-' }}</div>
-                <div class="cell-subtle">买家 {{ item.buyerName || item.buyerId || '-' }}</div>
-                <div class="cell-subtle">金额 {{ formatAmount(item) }}</div>
-                <div class="meta-chip-row">
-                  <span class="meta-chip">
-                    关联订单
-                    <template v-if="item.relatedOrderId">
-                      <RouterLink class="inline-link" :to="`/admin/orders/${item.relatedOrderId}`">{{ item.relatedOrderId }}</RouterLink>
-                    </template>
-                    <template v-else>-</template>
-                  </span>
-                  <span class="meta-chip">任务 {{ item.taskCount }}</span>
-                </div>
-              </div>
-            </section>
-
-            <section class="event-section">
-              <span class="section-label">验签与处理</span>
-              <div class="cell-stack">
-                <div class="tag-row">
-                  <AdminStatusTag :status="item.signatureValid ? 'success' : 'failed'" />
-                  <AdminStatusTag :status="item.processed ? 'success' : 'failed'" />
-                </div>
-                <div class="cell-subtle" :title="item.requestSign || '-'">签名 {{ item.requestSign || '-' }}</div>
-                <div v-if="item.processError" class="error-inline">{{ item.processError }}</div>
-              </div>
-            </section>
-
-            <section class="event-section">
-              <span class="section-label">请求来源</span>
-              <div class="cell-stack">
-                <div class="cell-title">{{ item.sourceHost || '-' }}</div>
-                <div class="cell-subtle">IP {{ item.sourceIp || '-' }}</div>
-                <div class="cell-subtle line-clamp-2">UA {{ item.userAgent || '-' }}</div>
-                <div class="cell-subtle">请求时间 {{ formatRequestTimestamp(item.requestTimestamp) }}</div>
-              </div>
-            </section>
-
-            <section class="event-section">
-              <span class="section-label">时间</span>
-              <div class="cell-stack">
-                <div class="cell-title">{{ formatAdminDateTime(item.createdAt) }}</div>
-                <div class="cell-subtle">事件 ID #{{ item.eventId }}</div>
-              </div>
-            </section>
-          </div>
-        </article>
-      </div>
-
-      <AdminPaginationBar
-        :page="pagination.page"
-        :page-size="pagination.pageSize"
-        :total="pagination.total"
-        :loading="loading"
-        @change="loadEvents"
-      />
-    </div>
-  </section>
+        <el-pagination
+          v-if="pagination.total > 0"
+          v-model:current-page="pagination.page"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          layout="total, prev, pager, next"
+          style="margin-top: 16px; justify-content: center"
+          @current-change="loadEvents"
+        />
+      </template>
+    </el-card>
+  </div>
 </template>
 
 <style scoped>
-.admin-panel {
-  display: grid;
-  gap: 14px;
-  min-width: 0;
-}
+.webhooks-page { display: grid; gap: 0; }
 
-.panel-header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.panel-header-copy {
-  min-width: 0;
-}
-
-.panel-header h1 {
-  margin: 0;
-  font-size: 34px;
-  line-height: 1.05;
-  letter-spacing: -0.04em;
-  color: #1d3555;
-}
-
-.panel-header p {
-  margin: 6px 0 0;
-  font-size: 14px;
-  color: #64748b;
-}
-
-.panel-header-badge {
-  flex: 0 0 auto;
+.total-badge {
   min-height: 34px;
   padding: 0 14px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.82);
-  border: 1px solid rgba(86, 108, 138, 0.12);
-  color: #38506e;
-  font-size: 12px;
+  border-radius: var(--radius-full);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
   font-weight: 700;
   display: inline-flex;
   align-items: center;
 }
 
-.filters-card,
-.summary-card,
-.events-shell,
-.empty-block,
-.error-copy {
-  padding: 16px 18px;
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-  box-shadow: 0 14px 36px rgba(30, 49, 78, 0.06);
-}
+.filter-card { margin-top: var(--space-4); }
 
-.filters-card {
+.filter-grid {
   display: grid;
-  gap: 14px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-3);
 }
 
-.filters-grid {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.filter-field {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.filter-field span {
-  color: #5d6f87;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.filters-actions {
+.filter-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--space-3);
+  margin-top: var(--space-3);
 }
 
-.filters-hint {
-  color: #64748b;
-  font-size: 12px;
-}
-
-.filters-button-row {
-  display: flex;
-  gap: 10px;
-  flex-shrink: 0;
-}
-
-.text-input {
-  width: 100%;
-  min-height: 38px;
-  padding: 0 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.94);
-  color: #24364e;
-  font-size: 13px;
-}
-
-.select-input {
-  appearance: none;
-}
+.filter-hint { color: var(--text-secondary); font-size: var(--text-xs); }
+.filter-buttons { display: flex; gap: 10px; flex-shrink: 0; }
 
 .summary-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.summary-card {
-  display: grid;
-  gap: 6px;
-  position: relative;
-  overflow: hidden;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
 }
 
+.summary-card { position: relative; overflow: hidden; }
 .summary-card::after {
   content: '';
   position: absolute;
   inset: auto -26px -26px auto;
   width: 96px;
   height: 96px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   opacity: 0.14;
 }
+.summary-card--success::after { background: var(--color-success); }
+.summary-card--danger::after { background: var(--color-danger); }
+.summary-card--primary::after { background: var(--color-primary); }
 
-.summary-card-success::after {
-  background: #12b76a;
-}
+.summary-label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
+.summary-value { font-size: var(--text-3xl); line-height: 1; color: var(--text-primary); }
+.summary-meta { color: var(--text-muted); font-size: var(--text-xs); }
 
-.summary-card-danger::after {
-  background: #f04438;
-}
+.table-card { margin-top: var(--space-4); overflow: visible; }
 
-.summary-card-primary::after {
-  background: #2563eb;
-}
+.events-toolbar { margin-bottom: var(--space-3); }
+.events-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
+.events-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
 
-.summary-label {
-  color: #51647d;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-}
-
-.summary-value {
-  font-size: 34px;
-  line-height: 1;
-  color: #1d3555;
-}
-
-.summary-meta {
-  color: #70829a;
-  font-size: 12px;
-}
-
-.error-copy {
-  margin: 0;
-  color: #b42318;
-}
-
-.empty-block {
-  color: #64748b;
-}
-
-.events-shell {
-  display: grid;
-  gap: 14px;
-  min-width: 0;
-}
-
-.events-toolbar strong {
-  display: block;
-  color: #1f324a;
-  font-size: 14px;
-}
-
-.events-toolbar span {
-  display: block;
-  margin-top: 4px;
-  color: #64748b;
-  font-size: 12px;
-}
-
-.event-list {
-  display: grid;
-  gap: 12px;
-}
+.event-list { display: grid; gap: var(--space-3); }
 
 .event-card {
   display: grid;
   gap: 14px;
   padding: 14px;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, #ffffff 100%);
-  border: 1px solid rgba(86, 108, 138, 0.12);
+  border: 1px solid var(--border-default);
 }
 
-.event-card-top {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.event-identity {
-  min-width: 0;
-  display: grid;
-  gap: 8px;
-}
+.event-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
+.event-identity { min-width: 0; display: grid; gap: var(--space-2); }
 
 .event-no {
   display: inline-block;
   max-width: 100%;
-  font-size: 20px;
+  font-size: var(--text-xl);
   line-height: 1.1;
   font-weight: 800;
-  color: #132238;
+  color: var(--text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-decoration: none;
 }
+.event-no:hover { color: var(--color-primary-dark); }
 
-.event-meta-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.event-top-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
+.event-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.event-top-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
 
 .compact-chip {
   display: inline-flex;
@@ -590,36 +388,14 @@ onMounted(loadEvents)
   min-height: 28px;
   max-width: 100%;
   padding: 0 10px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: #f4f7fb;
-  border: 1px solid rgba(86, 108, 138, 0.1);
-  color: #44556c;
-  font-size: 12px;
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
   font-weight: 600;
 }
-
-.compact-chip--muted {
-  color: #6b7c93;
-}
-
-.secondary-action {
-  min-width: 82px;
-  min-height: 30px;
-  padding: 0 12px;
-  border-radius: 999px;
-  font-weight: 600;
-  font-size: 12px;
-  background: #ffffff;
-  border-color: rgba(86, 108, 138, 0.18);
-  color: #344054;
-}
-
-.secondary-action:hover,
-.secondary-action:focus {
-  border-color: rgba(23, 92, 211, 0.28);
-  color: #175cd3;
-  background: #f8fbff;
-}
+.compact-chip--muted { color: var(--text-muted); }
 
 .event-grid {
   display: grid;
@@ -635,174 +411,55 @@ onMounted(loadEvents)
   padding: 10px 11px;
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.78);
-  border: 1px solid rgba(86, 108, 138, 0.08);
+  border: 1px solid var(--border-default);
 }
 
-.section-label {
-  color: #71839b;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
+.section-label { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
 
-.cell-stack {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.cell-title {
-  color: #0f172a;
-  font-weight: 700;
-  line-height: 1.4;
-  word-break: break-word;
-}
-
-.cell-subtle {
-  color: #64748b;
-  font-size: 12px;
-  line-height: 1.5;
-  word-break: break-word;
-}
-
-.meta-chip-row,
-.tag-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
-}
+.cell-stack { display: grid; gap: 6px; min-width: 0; }
+.cell-title { color: var(--text-primary); font-weight: 700; line-height: 1.4; word-break: break-word; }
+.cell-subtle { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; word-break: break-word; }
 
+.meta-chip-row, .tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
 .meta-chip {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   min-height: 24px;
   padding: 0 8px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   color: #475467;
   background: #f8fafc;
   border: 1px solid rgba(148, 163, 184, 0.24);
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 
-.inline-link {
-  color: #175cd3;
-  font-weight: 700;
-  text-decoration: none;
+.inline-link { color: var(--color-primary-dark); font-weight: 700; text-decoration: none; }
+
+.mono-inline { color: #344054; font-size: var(--text-xs); line-height: 1.6; font-family: var(--font-mono); overflow-wrap: anywhere; }
+.event-key { color: var(--text-muted); font-size: 10px; line-height: 1.4; }
+
+.error-inline { display: block; color: var(--color-danger); font-size: var(--text-xs); line-height: 1.5; }
+
+.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+@media (max-width: 1200px) {
+  .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
-
-.cell-link {
-  color: inherit;
-  text-decoration: none;
+@media (max-width: 900px) {
+  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .filter-actions { flex-direction: column; align-items: flex-start; }
 }
-
-.cell-link:hover {
-  color: #175cd3;
-}
-
-.mono-inline {
-  color: #344054;
-  font-size: 12px;
-  line-height: 1.6;
-  font-family: var(--font-mono);
-  overflow-wrap: anywhere;
-}
-
-.event-key {
-  color: #71839b;
-  font-size: 10px;
-  line-height: 1.4;
-}
-
-.error-inline {
-  display: block;
-  color: #b42318;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.event-top-actions :deep(.el-button > span) {
-  white-space: nowrap;
-}
-
-@media (max-width: 1400px) {
-  .filters-grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 1180px) {
-  .summary-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .event-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 980px) {
-  .panel-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .filters-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .filters-actions {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .event-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 720px) {
-  .panel-header h1 {
-    font-size: 28px;
-  }
-
-  .filters-grid,
+@media (max-width: 640px) {
+  .filter-grid,
   .summary-grid,
-  .event-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .filters-button-row,
-  .event-card-top,
-  .event-top-actions {
-    width: 100%;
-  }
-
-  .filters-button-row {
-    justify-content: stretch;
-  }
-
-  .filters-button-row :deep(.el-button),
-  .event-top-actions :deep(.el-button) {
-    flex: 1 1 auto;
-  }
-
-  .event-card-top {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .event-no {
-    font-size: 18px;
-  }
+  .event-grid { grid-template-columns: 1fr; }
+  .filter-buttons { width: 100%; }
+  .filter-buttons :deep(.el-button) { flex: 1 1 auto; }
+  .event-card-top { flex-direction: column; align-items: flex-start; }
+  .event-no { font-size: 18px; }
 }
 </style>