From 0288e8f578237ae5bb402c5afc168ccbd3e4385c Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Thu, 14 May 2026 20:16:04 +0800
Subject: [PATCH] =?UTF-8?q?ui=E4=BC=98=E5=8C=96-2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/frontend/src/components.d.ts             |   4 -
 .../components/admin/AdminPaginationBar.vue   |  62 ---
 .../src/components/admin/AdminStatusTag.vue   |  61 +--
 .../admin/AdminFulfillmentConfigHubView.vue   |  69 +--
 .../src/views/admin/AdminLoginView.vue        |  48 +-
 .../src/views/admin/AdminManualRedeemView.vue | 152 +++----
 .../src/views/admin/AdminOrderDetailView.vue  | 307 +++++++------
 .../src/views/admin/AdminTaskDetailView.vue   | 410 ++++++++++++------
 .../admin/AdminWebhookEventDetailView.vue     | 169 +++++---
 9 files changed, 665 insertions(+), 617 deletions(-)
 delete mode 100644 apps/frontend/src/components/admin/AdminPaginationBar.vue

diff --git a/apps/frontend/src/components.d.ts b/apps/frontend/src/components.d.ts
index 8fef90aa..2c30b9cc 100644
--- a/apps/frontend/src/components.d.ts
+++ b/apps/frontend/src/components.d.ts
@@ -12,7 +12,6 @@ export {}
 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']
     AdminPlatformKuaishouEticketSection: typeof import('./components/admin/AdminPlatformKuaishouEticketSection.vue')['default']
@@ -22,7 +21,6 @@ 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']
@@ -42,7 +40,6 @@ declare module 'vue' {
     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']
@@ -50,7 +47,6 @@ declare module 'vue' {
     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/AdminPaginationBar.vue b/apps/frontend/src/components/admin/AdminPaginationBar.vue
deleted file mode 100644
index 87acc10b..00000000
--- a/apps/frontend/src/components/admin/AdminPaginationBar.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  page: number
-  pageSize: number
-  total: number
-  loading?: boolean
-}>()
-
-const emit = defineEmits<{
-  (event: 'change', page: number): void
-}>()
-
-function goPrev() {
-  if (props.page <= 1 || props.loading) {
-    return
-  }
-
-  emit('change', props.page - 1)
-}
-
-function goNext() {
-  if (props.loading || props.page * props.pageSize >= props.total) {
-    return
-  }
-
-  emit('change', props.page + 1)
-}
-</script>
-
-<template>
-  <footer class="pagination-bar">
-    <span>第 {{ page }} 页，共 {{ Math.max(1, Math.ceil(total / pageSize)) }} 页，合计 {{ total }} 条</span>
-    <div class="actions">
-      <el-button :disabled="page <= 1 || loading" round @click="goPrev">上一页</el-button>
-      <el-button :disabled="page * pageSize >= total || loading" round @click="goNext">下一页</el-button>
-    </div>
-  </footer>
-</template>
-
-<style scoped>
-.pagination-bar {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: center;
-  margin-top: 14px;
-  color: #64748b;
-  font-size: 13px;
-}
-
-.actions {
-  display: flex;
-  gap: 8px;
-}
-
-@media (max-width: 780px) {
-  .pagination-bar {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/admin/AdminStatusTag.vue b/apps/frontend/src/components/admin/AdminStatusTag.vue
index 11e16d84..b036a90e 100644
--- a/apps/frontend/src/components/admin/AdminStatusTag.vue
+++ b/apps/frontend/src/components/admin/AdminStatusTag.vue
@@ -5,7 +5,9 @@ const props = defineProps<{
   status: string
 }>()
 
-function resolveTone(status: string) {
+type ElTagType = 'success' | 'primary' | 'warning' | 'danger' | 'info'
+
+function resolveType(status: string): ElTagType {
   const normalized = String(status || '').trim().toLowerCase()
 
   if (['paid', 'link_generated', 'redeemed', 'available', 'delivered', 'success', 'active', 'system_bound', 'binding_completed', 'completed'].includes(normalized)) {
@@ -24,15 +26,13 @@ function resolveTone(status: string) {
     return 'danger'
   }
 
-  return 'default'
+  return 'info'
 }
 
 function resolveLabel(status: string) {
   const normalized = String(status || '').trim()
 
-  if (!normalized) {
-    return '-'
-  }
+  if (!normalized) return '-'
 
   const labelMap: Record<string, string> = {
     created: '已创建',
@@ -90,54 +90,7 @@ function resolveLabel(status: string) {
 </script>
 
 <template>
-  <span class="status-tag" :data-tone="resolveTone(props.status)">
+  <el-tag :type="resolveType(props.status)" size="small">
     {{ resolveLabel(props.status) }}
-  </span>
+  </el-tag>
 </template>
-
-<style scoped>
-.status-tag {
-  display: inline-flex;
-  align-items: center;
-  min-height: 24px;
-  max-width: 100%;
-  padding: 4px 9px;
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 700;
-  border: 1px solid transparent;
-  line-height: 1.35;
-  white-space: normal;
-  word-break: break-word;
-}
-
-.status-tag[data-tone='success'] {
-  color: #0f766e;
-  background: #ecfdf3;
-  border-color: #a6f4c5;
-}
-
-.status-tag[data-tone='primary'] {
-  color: #175cd3;
-  background: #eff8ff;
-  border-color: #b2ddff;
-}
-
-.status-tag[data-tone='warning'] {
-  color: #b54708;
-  background: #fffaeb;
-  border-color: #fedf89;
-}
-
-.status-tag[data-tone='danger'] {
-  color: #b42318;
-  background: #fef3f2;
-  border-color: #fecdca;
-}
-
-.status-tag[data-tone='default'] {
-  color: #475467;
-  background: #f2f4f7;
-  border-color: #d0d5dd;
-}
-</style>
diff --git a/apps/frontend/src/views/admin/AdminFulfillmentConfigHubView.vue b/apps/frontend/src/views/admin/AdminFulfillmentConfigHubView.vue
index 37a23270..b5531149 100644
--- a/apps/frontend/src/views/admin/AdminFulfillmentConfigHubView.vue
+++ b/apps/frontend/src/views/admin/AdminFulfillmentConfigHubView.vue
@@ -39,17 +39,10 @@ const activeTab = computed<FulfillmentTabKey>({
 
 <template>
   <section class="hub-panel">
-    <header class="hub-hero">
-      <div>
-        <h1>履约配置中心</h1>
-        <p>旧规则和快手 Cloud 新流程都放在这里维护，不再拆成两个侧边栏入口。</p>
-      </div>
-      <div class="hero-tags">
-        <span>一个入口</span>
-        <span>两套配置并存</span>
-        <span>互不覆盖</span>
-      </div>
-    </header>
+    <AdminPageHeader
+      title="履约配置中心"
+      description="旧规则和快手 Cloud 新流程都放在这里维护，不再拆成两个侧边栏入口。"
+    />
 
     <section class="hub-card">
       <div class="tab-copy">
@@ -72,64 +65,28 @@ const activeTab = computed<FulfillmentTabKey>({
 <style scoped>
 .hub-panel {
   display: grid;
-  gap: 16px;
+  gap: var(--space-4);
 }
 
-.hub-hero,
 .hub-card {
-  padding: 20px;
-  border-radius: 24px;
-  border: 1px solid rgba(86, 108, 138, 0.12);
-  background: rgba(255, 255, 255, 0.94);
+  padding: var(--space-5);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--border-default);
+  background: var(--bg-surface);
 }
 
-.hub-hero {
-  display: grid;
-  gap: 14px;
-  background:
-    radial-gradient(circle at top right, rgba(26, 127, 255, 0.1), transparent 26%),
-    linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,247,255,.96));
-}
-
-.hub-hero h1,
 .tab-copy h3 {
   margin: 0;
-  color: #17324d;
+  color: var(--text-primary);
 }
 
-.hub-hero p,
 .tab-copy p {
-  margin: 8px 0 0;
-  color: #64748b;
+  margin: var(--space-2) 0 0;
+  color: var(--text-secondary);
   line-height: 1.6;
 }
 
-.hero-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.hero-tags span {
-  padding: 8px 12px;
-  border-radius: 999px;
-  background: rgba(23, 92, 211, 0.08);
-  color: #175cd3;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.hub-card {
-  display: grid;
-  gap: 16px;
-}
-
-.tab-copy {
-  display: grid;
-  gap: 4px;
-}
-
 :deep(.hub-tabs .el-tabs__content) {
-  padding-top: 12px;
+  padding-top: var(--space-3);
 }
 </style>
diff --git a/apps/frontend/src/views/admin/AdminLoginView.vue b/apps/frontend/src/views/admin/AdminLoginView.vue
index 5613f7c1..475a15f3 100644
--- a/apps/frontend/src/views/admin/AdminLoginView.vue
+++ b/apps/frontend/src/views/admin/AdminLoginView.vue
@@ -47,10 +47,8 @@ async function submitLogin() {
 
       <label class="field">
         <span>账号</span>
-        <input
+        <el-input
           v-model="username"
-          type="text"
-          class="text-input"
           placeholder="输入账号"
           @keyup.enter="submitLogin"
         />
@@ -58,11 +56,11 @@ async function submitLogin() {
 
       <label class="field">
         <span>密码</span>
-        <input
+        <el-input
           v-model="password"
           type="password"
-          class="text-input"
           placeholder="输入密码"
+          show-password
           @keyup.enter="submitLogin"
         />
       </label>
@@ -79,58 +77,50 @@ async function submitLogin() {
   min-height: 100vh;
   display: grid;
   place-items: center;
-  padding: 24px;
+  padding: var(--space-4);
   background:
-    radial-gradient(circle at top left, rgba(18, 102, 214, 0.18), transparent 28%),
-    radial-gradient(circle at bottom right, rgba(12, 74, 110, 0.16), transparent 26%),
-    linear-gradient(160deg, #eef5ff 0%, #f7fbff 42%, #edf6f3 100%);
+    radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 28%),
+    radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.08), transparent 26%),
+    linear-gradient(160deg, var(--color-primary-light) 0%, #f7fbff 42%, #edf6f3 100%);
 }
 
 .login-card {
   width: min(460px, 100%);
   padding: 28px;
-  border-radius: 28px;
-  border: 1px solid rgba(38, 88, 155, 0.14);
-  background: rgba(255, 255, 255, 0.92);
-  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.08);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--border-default);
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-lg);
 }
 
 .login-header h1 {
-  margin: 8px 0 0;
-  color: #17324f;
+  margin: var(--space-2) 0 0;
+  color: var(--text-primary);
 }
 
 .login-header p {
   margin: 10px 0 0;
-  color: #5f7289;
+  color: var(--text-secondary);
 }
 
 .eyebrow {
   margin: 0;
-  color: #1266d6;
+  color: var(--color-primary);
   text-transform: uppercase;
   letter-spacing: 0.12em;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 700;
 }
 
 .field {
-  margin-top: 24px;
+  margin-top: var(--space-6);
   display: grid;
   gap: 10px;
-  color: #334155;
-}
-
-.text-input {
-  min-height: 48px;
-  padding: 0 16px;
-  border-radius: 16px;
-  border: 1px solid rgba(86, 108, 138, 0.2);
-  background: rgba(255, 255, 255, 0.96);
+  color: var(--text-primary);
 }
 
 .submit-btn {
   width: 100%;
-  margin-top: 20px;
+  margin-top: var(--space-5);
 }
 </style>
diff --git a/apps/frontend/src/views/admin/AdminManualRedeemView.vue b/apps/frontend/src/views/admin/AdminManualRedeemView.vue
index ef9f1b65..3f0a573d 100644
--- a/apps/frontend/src/views/admin/AdminManualRedeemView.vue
+++ b/apps/frontend/src/views/admin/AdminManualRedeemView.vue
@@ -77,34 +77,31 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
 
 <template>
   <section class="admin-panel manual-redeem-panel">
-    <header class="panel-header">
-      <div>
-        <h1>人工兑换</h1>
-        <p>客服在后台创建唯一任务、发送二维码、复核角色并完成兑换。</p>
-      </div>
-      <div class="header-actions">
-        <RouterLink v-if="taskDetailLink" :to="taskDetailLink" class="task-link">
-          查看任务详情
-        </RouterLink>
-        <el-button
-          v-if="hasActiveTask"
-          :loading="closeLoading"
-          plain
-          type="danger"
-          @click="closeTaskNow"
-        >
-          关闭当前任务
-        </el-button>
-        <el-button
-          v-if="canStartNextTask"
-          plain
-          type="primary"
-          @click="resetCurrentTask"
-        >
-          开始下一单
-        </el-button>
-      </div>
-    </header>
+    <AdminPageHeader
+      title="人工兑换"
+      description="客服在后台创建唯一任务、发送二维码、复核角色并完成兑换。"
+    >
+      <template v-if="taskDetailLink">
+        <RouterLink :to="taskDetailLink" class="task-link">查看任务详情</RouterLink>
+      </template>
+      <el-button
+        v-if="hasActiveTask"
+        :loading="closeLoading"
+        plain
+        type="danger"
+        @click="closeTaskNow"
+      >
+        关闭当前任务
+      </el-button>
+      <el-button
+        v-if="canStartNextTask"
+        plain
+        type="primary"
+        @click="resetCurrentTask"
+      >
+        开始下一单
+      </el-button>
+    </AdminPageHeader>
 
     <section class="create-card">
       <div class="card-head">
@@ -117,19 +114,17 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
       <div class="form-grid">
         <div class="field">
           <span>唯一凭据</span>
-          <input
+          <el-input
             v-model="form.proofValue"
-            class="text-input"
             placeholder="输入订单号、客户名或其他唯一可追踪信息"
           />
         </div>
 
         <div class="field">
           <span>内部履约 SKU</span>
-          <input
+          <el-input
             v-model="form.skuCode"
             list="manual-redeem-sku-suggestions"
-            class="text-input"
             placeholder="选择或输入内部履约 SKU"
           />
           <datalist id="manual-redeem-sku-suggestions">
@@ -144,9 +139,10 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
 
         <div class="field field-remark">
           <span>备注</span>
-          <textarea
+          <el-input
             v-model="form.remark"
-            class="text-input text-area"
+            type="textarea"
+            :rows="3"
             placeholder="可选：记录客户补充信息、兑换要求或客服备注"
           />
         </div>
@@ -333,13 +329,12 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
   gap: 18px;
 }
 
-.panel-header,
 .header-actions,
 .card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
+  gap: var(--space-4);
 }
 
 .header-actions {
@@ -347,7 +342,7 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
 }
 
 .task-link {
-  color: #245db6;
+  color: var(--color-primary);
   text-decoration: none;
   font-weight: 600;
 }
@@ -355,22 +350,22 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
 .create-card,
 .summary-card,
 .review-card {
-  padding: 22px 24px;
-  border-radius: 24px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-  box-shadow: 0 20px 60px rgba(30, 49, 78, 0.08);
+  padding: 22px var(--space-6);
+  border-radius: var(--radius-xl);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  box-shadow: var(--shadow-lg);
 }
 
 .card-head h2 {
   margin: 0;
-  font-size: 18px;
-  color: #203551;
+  font-size: var(--text-lg);
+  color: var(--text-primary);
 }
 
 .card-head p {
   margin: 6px 0 0;
-  color: #64748b;
+  color: var(--text-secondary);
   line-height: 1.7;
 }
 
@@ -378,17 +373,17 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
   margin-top: 18px;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
+  gap: var(--space-4);
 }
 
 .field {
   display: grid;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .field span {
-  color: #4a607f;
-  font-size: 13px;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
   font-weight: 600;
 }
 
@@ -396,58 +391,41 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
   grid-column: 1 / -1;
 }
 
-.text-input {
-  width: 100%;
-  min-height: 46px;
-  padding: 0 14px;
-  border-radius: 14px;
-  border: 1px solid #dbe4ee;
-  background: #f8fbff;
-  color: #21344d;
-  font-size: 14px;
-}
-
-.text-area {
-  min-height: 96px;
-  padding: 12px 14px;
-  resize: vertical;
-}
-
 .action-row {
   margin-top: 18px;
   display: flex;
-  gap: 12px;
+  gap: var(--space-3);
 }
 
 .summary-card {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
+  gap: var(--space-3);
 }
 
 .summary-card article {
   padding: 14px;
-  border-radius: 16px;
-  background: #f7f9fc;
+  border-radius: var(--radius-md);
+  background: var(--bg-page);
 }
 
 .summary-card span {
   display: block;
-  font-size: 12px;
-  color: #708096;
+  font-size: var(--text-xs);
+  color: var(--text-muted);
 }
 
 .summary-card strong {
   display: block;
-  margin-top: 8px;
-  color: #203551;
+  margin-top: var(--space-2);
+  color: var(--text-primary);
   word-break: break-word;
 }
 
 .layout-grid {
   display: grid;
   grid-template-columns: minmax(340px, 392px) minmax(0, 1fr);
-  gap: 16px;
+  gap: var(--space-4);
   align-items: stretch;
 }
 
@@ -457,10 +435,10 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
 
 .review-stage {
   margin-top: 18px;
-  border-radius: 20px;
+  border-radius: var(--radius-lg);
   overflow: hidden;
-  border: 1px solid #dbe4ee;
-  background: #f8fbff;
+  border: 1px solid var(--border-default);
+  background: var(--bg-page);
 }
 
 .screenshot-button {
@@ -481,27 +459,27 @@ const taskDetailLink = computed(() => (task.value?.taskId ? `/admin/tasks/${task
 
 .empty-block {
   min-height: 180px;
-  padding: 24px;
-  border-radius: 24px;
+  padding: var(--space-6);
+  border-radius: var(--radius-xl);
   display: grid;
   place-items: center;
   text-align: center;
-  background: rgba(255, 255, 255, 0.92);
-  border: 1px dashed #d5dfec;
-  color: #64748b;
+  background: var(--bg-surface);
+  border: 1px dashed var(--border-default);
+  color: var(--text-secondary);
 }
 
 .empty-block strong {
-  color: #24384f;
-  font-size: 16px;
+  color: var(--text-primary);
+  font-size: var(--text-lg);
 }
 
 .empty-block p {
-  margin: 8px 0 0;
+  margin: var(--space-2) 0 0;
   line-height: 1.7;
 }
 
-@media (max-width: 1140px) {
+@media (max-width: 900px) {
   .summary-card,
   .layout-grid,
   .form-grid {
diff --git a/apps/frontend/src/views/admin/AdminOrderDetailView.vue b/apps/frontend/src/views/admin/AdminOrderDetailView.vue
index 07d5040c..e51f2cea 100644
--- a/apps/frontend/src/views/admin/AdminOrderDetailView.vue
+++ b/apps/frontend/src/views/admin/AdminOrderDetailView.vue
@@ -92,15 +92,14 @@ function formatTaskAutoDeliveryReason(task: AdminOrderDetail['tasks'][number]) {
 
 <template>
   <section class="admin-panel">
-    <header class="panel-header">
-      <div>
-        <h1>订单详情</h1>
-        <p>查看订单原始信息、商品子项和关联任务。</p>
-      </div>
-    </header>
+    <AdminPageHeader
+      title="订单详情"
+      description="查看订单原始信息、商品子项和关联任务。"
+    />
 
     <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
-    <div v-if="loading" class="empty-block">订单详情加载中</div>
+
+    <el-skeleton v-if="loading" :rows="8" animated />
 
     <template v-else-if="detail">
       <section class="info-card">
@@ -163,113 +162,124 @@ function formatTaskAutoDeliveryReason(task: AdminOrderDetail['tasks'][number]) {
           </article>
         </div>
 
-        <table class="meta-table">
-          <tbody>
-            <tr><th>内部订单 ID</th><td>{{ detail.order.orderId }}</td><th>提供方</th><td>{{ detail.order.provider }}</td></tr>
-            <tr><th>平台</th><td>{{ detail.order.platform }}</td><th>店铺 ID</th><td>{{ detail.order.shopId || '-' }}</td></tr>
-            <tr><th>创建时间</th><td>{{ formatAdminDateTime(detail.order.createdAt) }}</td><th>更新时间</th><td>{{ formatAdminDateTime(detail.order.updatedAt) }}</td></tr>
-          </tbody>
-        </table>
+        <el-table :data="[detail.order]" size="small" :show-header="false">
+          <el-table-column label="内部订单 ID" width="120">
+            <template #default="{ row }">{{ row.orderId }}</template>
+          </el-table-column>
+          <el-table-column label="提供方" width="120">
+            <template #default="{ row }">{{ row.provider }}</template>
+          </el-table-column>
+          <el-table-column label="平台" width="100">
+            <template #default="{ row }">{{ row.platform }}</template>
+          </el-table-column>
+          <el-table-column label="店铺 ID">
+            <template #default="{ row }">{{ row.shopId || '-' }}</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>
       </section>
 
-      <section class="table-card">
+      <section class="info-card">
         <h3>商品子项</h3>
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th>SKU</th>
-              <th>标题</th>
-              <th>商品</th>
-              <th>发放方式</th>
-              <th>数量</th>
-              <th>规格摘要</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in detail.items" :key="item.orderItemId">
-              <td>{{ item.skuCode }}</td>
-              <td>{{ item.itemTitle || '-' }}</td>
-              <td>{{ item.skuName }}</td>
-              <td>{{ item.deliveryMode }}</td>
-              <td>{{ item.quantity }}</td>
-              <td>{{ formatSpecSummary(item.spec) }}</td>
-            </tr>
-          </tbody>
-        </table>
+        <el-table :data="detail.items" size="small">
+          <el-table-column prop="skuCode" label="SKU" />
+          <el-table-column prop="itemTitle" label="标题">
+            <template #default="{ row }">{{ row.itemTitle || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="skuName" label="商品" />
+          <el-table-column prop="deliveryMode" label="发放方式" />
+          <el-table-column prop="quantity" label="数量" width="80" />
+          <el-table-column label="规格摘要">
+            <template #default="{ row }">{{ formatSpecSummary(row.spec) }}</template>
+          </el-table-column>
+        </el-table>
       </section>
 
-      <section class="table-card">
+      <section class="info-card">
         <h3>关联任务</h3>
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th>任务号</th>
-              <th>状态</th>
-              <th>系统绑定</th>
-              <th>完整绑定</th>
-              <th>自动发货</th>
-              <th>库存绑定</th>
-              <th>登录方式</th>
-              <th>错误</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="task in detail.tasks" :key="task.taskId">
-              <td>
-                <RouterLink :to="`/admin/tasks/${task.taskId}`">{{ task.taskNo }}</RouterLink>
-              </td>
-              <td><AdminStatusTag :status="task.status" /></td>
-              <td><AdminStatusTag :status="task.systemBindingStatus" /></td>
-              <td><AdminStatusTag :status="task.userBindingStatus" /></td>
-              <td>
-                <div class="tile-tag-line">
-                  <AdminStatusTag :status="resolveTaskAutoDeliveryStatus(task)" />
-                </div>
-                <div class="binding-copy">{{ formatTaskAutoDeliveryReason(task) }}</div>
-              </td>
-              <td>
-                <div>{{ formatTaskBindingCountSummary(task) }}</div>
-                <div class="binding-copy">角色 {{ formatBindingRoleSummary(task.bindingSummary.roleKeys) }}</div>
-              </td>
-              <td>{{ task.loginType || '-' }}</td>
-              <td>{{ task.lastError || '-' }}</td>
-            </tr>
-          </tbody>
-        </table>
+        <el-table :data="detail.tasks" size="small">
+          <el-table-column label="任务号">
+            <template #default="{ row }">
+              <RouterLink :to="`/admin/tasks/${row.taskId}`">{{ row.taskNo }}</RouterLink>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态">
+            <template #default="{ row }">
+              <AdminStatusTag :status="row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column label="系统绑定">
+            <template #default="{ row }">
+              <AdminStatusTag :status="row.systemBindingStatus" />
+            </template>
+          </el-table-column>
+          <el-table-column label="完整绑定">
+            <template #default="{ row }">
+              <AdminStatusTag :status="row.userBindingStatus" />
+            </template>
+          </el-table-column>
+          <el-table-column label="自动发货">
+            <template #default="{ row }">
+              <div class="tile-tag-line">
+                <AdminStatusTag :status="resolveTaskAutoDeliveryStatus(row)" />
+              </div>
+              <div class="binding-copy">{{ formatTaskAutoDeliveryReason(row) }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="库存绑定">
+            <template #default="{ row }">
+              <div>{{ formatTaskBindingCountSummary(row) }}</div>
+              <div class="binding-copy">角色 {{ formatBindingRoleSummary(row.bindingSummary.roleKeys) }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="登录方式">
+            <template #default="{ row }">{{ row.loginType || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="错误">
+            <template #default="{ row }">{{ row.lastError || '-' }}</template>
+          </el-table-column>
+        </el-table>
       </section>
 
-      <section class="table-card">
+      <section class="info-card">
         <h3>Webhook 摘要</h3>
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th>事件 ID</th>
-              <th>类型</th>
-              <th>平台 / 店铺</th>
-              <th>验签</th>
-              <th>处理</th>
-              <th>时间</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="event in detail.webhookEvents" :key="event.eventId">
-              <td>
-                <RouterLink :to="`/admin/webhook-events/${event.eventId}`">{{ event.eventId }}</RouterLink>
-              </td>
-              <td>{{ formatAdminWebhookEventType(event.eventType) }}</td>
-              <td>{{ event.platform }} / {{ event.shopName || event.shopId || '-' }}</td>
-              <td><AdminStatusTag :status="event.signatureValid ? 'success' : 'failed'" /></td>
-              <td><AdminStatusTag :status="event.processed ? 'success' : 'failed'" /></td>
-              <td>{{ formatAdminDateTime(event.createdAt) }}</td>
-            </tr>
-            <tr v-if="detail.webhookEvents.length === 0">
-              <td colspan="6">当前订单还没有关联的 webhook 记录。</td>
-            </tr>
-          </tbody>
-        </table>
+        <el-table :data="detail.webhookEvents" size="small">
+          <el-table-column label="事件 ID">
+            <template #default="{ row }">
+              <RouterLink :to="`/admin/webhook-events/${row.eventId}`">{{ row.eventId }}</RouterLink>
+            </template>
+          </el-table-column>
+          <el-table-column label="类型">
+            <template #default="{ row }">{{ formatAdminWebhookEventType(row.eventType) }}</template>
+          </el-table-column>
+          <el-table-column label="平台 / 店铺">
+            <template #default="{ row }">{{ row.platform }} / {{ row.shopName || row.shopId || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="验签">
+            <template #default="{ row }">
+              <AdminStatusTag :status="row.signatureValid ? 'success' : 'failed'" />
+            </template>
+          </el-table-column>
+          <el-table-column label="处理">
+            <template #default="{ row }">
+              <AdminStatusTag :status="row.processed ? 'success' : 'failed'" />
+            </template>
+          </el-table-column>
+          <el-table-column label="时间" width="180">
+            <template #default="{ row }">{{ formatAdminDateTime(row.createdAt) }}</template>
+          </el-table-column>
+          <template #empty>
+            <el-empty description="当前订单还没有关联的 webhook 记录" />
+          </template>
+        </el-table>
       </section>
 
-      <section class="table-card">
+      <section class="info-card">
         <h3>原始载荷</h3>
         <details class="payload-box">
           <summary>展开查看原始订单 JSON</summary>
@@ -281,99 +291,124 @@ function formatTaskAutoDeliveryReason(task: AdminOrderDetail['tasks'][number]) {
 </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; }
-.info-card,.table-card,.empty-block,.error-copy {
-  padding: 18px; border-radius: 20px; background: rgba(255,255,255,.94); border: 1px solid rgba(86,108,138,.1);
+.admin-panel {
+  display: grid;
+  gap: var(--space-4);
 }
-.error-copy { color: #b42318; }
+
+.info-card {
+  padding: 18px;
+  border-radius: var(--radius-lg);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+}
+
+.info-card h3 {
+  margin: 0 0 var(--space-4);
+  color: var(--text-primary);
+}
+
+.error-copy {
+  padding: 18px;
+  border-radius: var(--radius-lg);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  color: var(--color-danger);
+}
+
 .info-card-header {
   display: flex;
   justify-content: space-between;
-  gap: 16px;
+  gap: var(--space-4);
   align-items: flex-start;
-  margin-bottom: 16px;
+  margin-bottom: var(--space-4);
 }
+
 .info-card-header h2 {
   margin: 0;
-  color: #1d3555;
+  color: var(--text-primary);
 }
+
 .subtitle {
-  margin: 8px 0 0;
-  color: #64748b;
+  margin: var(--space-2) 0 0;
+  color: var(--text-secondary);
 }
+
 .status-stack {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   justify-content: flex-end;
 }
+
 .info-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-  margin-bottom: 16px;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
 }
+
 .info-tile {
-  padding: 14px 16px;
-  border-radius: 16px;
+  padding: 14px var(--space-4);
+  border-radius: var(--radius-md);
   background: linear-gradient(180deg, rgba(247, 250, 255, 0.98), rgba(241, 245, 249, 0.92));
-  border: 1px solid rgba(86,108,138,.08);
+  border: 1px solid var(--border-default);
   display: grid;
   gap: 6px;
 }
+
 .info-tile span,
 .info-tile small {
-  color: #64748b;
+  color: var(--text-secondary);
 }
+
 .info-tile strong {
-  color: #1d3555;
+  color: var(--text-primary);
 }
+
 .tile-tag-line {
   display: flex;
   align-items: center;
 }
+
 .binding-copy {
   margin-top: 6px;
-  color: #64748b;
-  font-size: 12px;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
 }
-.meta-table,
-.data-table { width: 100%; border-collapse: collapse; }
-.meta-table th,
-.meta-table td,
-.data-table th,
-.data-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid rgba(86,108,138,.08); }
-.meta-table th,
-.data-table th { color: #64748b; width: 120px; }
+
 .payload-box summary {
   cursor: pointer;
-  color: #1d4ed8;
+  color: var(--color-primary);
   font-weight: 600;
 }
+
 .payload-box pre {
-  margin: 12px 0 0;
+  margin: var(--space-3) 0 0;
   padding: 14px;
   overflow: auto;
-  border-radius: 16px;
+  border-radius: var(--radius-md);
   background: #0f172a;
   color: #dbeafe;
-  font-size: 12px;
+  font-size: var(--text-xs);
   line-height: 1.6;
 }
+
 @media (max-width: 1200px) {
   .info-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
-@media (max-width: 720px) {
+
+@media (max-width: 900px) {
   .info-card-header {
     flex-direction: column;
   }
+
   .status-stack {
     justify-content: flex-start;
   }
+
   .info-grid {
     grid-template-columns: 1fr;
   }
diff --git a/apps/frontend/src/views/admin/AdminTaskDetailView.vue b/apps/frontend/src/views/admin/AdminTaskDetailView.vue
index 4caf6966..da4a381c 100644
--- a/apps/frontend/src/views/admin/AdminTaskDetailView.vue
+++ b/apps/frontend/src/views/admin/AdminTaskDetailView.vue
@@ -283,7 +283,7 @@ async function submitKuaishouCloudDispatch() {
   await runAction(
     () => dispatchAdminTaskKuaishouCloudFulfillment(detail.value!.task.taskId),
     '已完成绑定确认并发货',
-    `确认客户已经完成绑定，并立即为任务 ${detail.value.task.taskNo} 执行发货吗？这个动作会把“确认绑定完成”和“发货”合并为一步。`,
+    `确认客户已经完成绑定，并立即为任务 ${detail.value.task.taskNo} 执行发货吗？这个动作会把"确认绑定完成"和"发货"合并为一步。`,
   )
 }
 
@@ -479,15 +479,14 @@ onBeforeUnmount(clearScreenshotPreview)
 
 <template>
   <section class="admin-panel">
-    <header class="panel-header">
-      <div>
-        <h1>任务详情</h1>
-        <p>查看任务全量信息并执行人工操作。</p>
-      </div>
-    </header>
+    <AdminPageHeader
+      title="任务详情"
+      description="查看任务全量信息并执行人工操作。"
+    />
 
     <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
-    <div v-if="loading" class="empty-block">任务详情加载中</div>
+
+    <el-skeleton v-if="loading" :rows="6" animated />
 
     <template v-else-if="detail">
       <section v-if="isKuaishouCloudTask && kuaishouCloudFlow" class="hero-card">
@@ -652,7 +651,7 @@ onBeforeUnmount(clearScreenshotPreview)
         </el-button>
       </section>
 
-      <section v-if="!isKuaishouCloudTask" class="table-card">
+      <section v-if="!isKuaishouCloudTask" class="info-card">
         <h3>任务信息</h3>
         <table class="data-table">
           <tbody>
@@ -686,7 +685,7 @@ onBeforeUnmount(clearScreenshotPreview)
         </table>
       </section>
 
-      <section v-if="isKuaishouCloudTask && kuaishouCloudFlow" class="table-card flow-card">
+      <section v-if="isKuaishouCloudTask && kuaishouCloudFlow" class="info-card flow-card">
         <div class="flow-card-head">
           <div>
             <h3>快手 Cloud 履约面板</h3>
@@ -827,7 +826,7 @@ onBeforeUnmount(clearScreenshotPreview)
               <div><span>商品标题</span><strong>{{ kuaishouCloudFlow.ticket.goodsTitle || '-' }}</strong></div>
               <div><span>剩余次数</span><strong>{{ kuaishouCloudFlow.ticket.leftCount || 0 }}</strong></div>
             </div>
-            <p class="manual-hint">“确认绑定完成并发货”已经合并为一个按钮，只有核销码通过校验后才能继续。</p>
+            <p class="manual-hint">"确认绑定完成并发货"已经合并为一个按钮，只有核销码通过校验后才能继续。</p>
           </el-collapse-item>
 
           <el-collapse-item name="cloud" title="Cloud 资源与发货">
@@ -871,7 +870,7 @@ onBeforeUnmount(clearScreenshotPreview)
 
       <section
         v-if="detail.order?.provider === 'agiso' && detail.order?.platform === 'xianyu'"
-        class="table-card"
+        class="info-card"
       >
         <h3>咸鱼自动发货</h3>
         <p class="section-copy">这里展示这条任务最近一次触发咸鱼自动发货的状态、原因和接口回执摘要。</p>
@@ -907,7 +906,7 @@ onBeforeUnmount(clearScreenshotPreview)
         </div>
       </section>
 
-	      <section v-if="detail.redeemResolution" class="table-card">
+      <section v-if="detail.redeemResolution" class="info-card">
         <h3>兑换重试链路</h3>
         <p class="section-copy">这里记录自动兑换时每次使用过的 CDK、判定结果，以及是否切换到了新的同类型凭据。</p>
 
@@ -963,7 +962,7 @@ onBeforeUnmount(clearScreenshotPreview)
         </div>
       </section>
 
-      <section v-if="!isKuaishouCloudTask" class="table-card">
+      <section v-if="!isKuaishouCloudTask" class="info-card">
         <h3>库存绑定</h3>
         <p class="section-copy">这里展示任务当前和历史绑定过的库存项，便于核对多库存任务的真实履约轨迹。</p>
         <table class="data-table">
@@ -1031,7 +1030,7 @@ onBeforeUnmount(clearScreenshotPreview)
         </table>
       </section>
 
-      <section v-if="detail.task.executorKey === 'manual_dispatch'" class="table-card">
+      <section v-if="detail.task.executorKey === 'manual_dispatch'" class="info-card">
         <h3>人工履约回写</h3>
         <div class="manual-grid">
           <label class="field-block">
@@ -1076,7 +1075,7 @@ onBeforeUnmount(clearScreenshotPreview)
         </div>
       </section>
 
-      <section v-if="detail.events.length > 0" class="table-card">
+      <section v-if="detail.events.length > 0" class="info-card">
         <h3>任务事件</h3>
         <table class="data-table">
           <tbody>
@@ -1091,7 +1090,7 @@ onBeforeUnmount(clearScreenshotPreview)
         </table>
       </section>
 
-      <section v-if="detail.screenshotUrl" class="table-card">
+      <section v-if="detail.screenshotUrl" class="info-card">
         <h3>{{ screenshotSectionTitle }}</h3>
         <p v-if="!screenshotPreviewUrl" class="screenshot-empty">截图加载中或当前不可读取。</p>
         <a v-else class="screenshot-link" :href="screenshotPreviewUrl" target="_blank" rel="noreferrer">打开原图</a>
@@ -1102,166 +1101,288 @@ onBeforeUnmount(clearScreenshotPreview)
 </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; }
-.claim-link { color: #175cd3; text-decoration: none; word-break: break-all; }
-.info-card,.hero-card,.table-card,.empty-block,.error-copy {
-  padding: 18px; border-radius: 20px; background: rgba(255,255,255,.94); border: 1px solid rgba(86,108,138,.1);
+.admin-panel {
+  display: grid;
+  gap: var(--space-4);
 }
+
+.claim-link {
+  color: var(--color-primary);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.info-card,
+.hero-card,
+.error-copy {
+  padding: 18px;
+  border-radius: var(--radius-lg);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+}
+
 .info-card p {
   margin: 10px 0 0;
-  color: #334155;
+  color: var(--text-primary);
 }
+
+.info-card h3 {
+  margin: 0 0 var(--space-3);
+  color: var(--text-primary);
+}
+
 .hero-card {
   display: grid;
-  gap: 16px;
+  gap: var(--space-4);
   background:
-    radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 26%),
+    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 26%),
     linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.96));
 }
+
 .hero-copy {
   display: grid;
   gap: 6px;
 }
+
 .hero-copy h2 {
   margin: 0;
-  color: #0f172a;
+  color: var(--text-primary);
   font-size: 30px;
   line-height: 1.1;
 }
+
 .hero-copy p,
 .hero-inline span,
 .hero-link-row span {
-  color: #475467;
+  color: var(--text-secondary);
 }
+
 .hero-eyebrow {
-  color: #175cd3;
-  font-size: 12px;
+  color: var(--color-primary);
+  font-size: var(--text-xs);
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
 }
-.hero-meta-grid,
-.overview-grid {
+
+.hero-meta-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
+  gap: var(--space-3);
 }
+
 .hero-metric {
-  padding: 14px 16px;
+  padding: 14px var(--space-4);
   border-radius: 18px;
-  border: 1px solid rgba(86,108,138,.1);
+  border: 1px solid var(--border-default);
   background: rgba(255,255,255,.82);
 }
+
 .hero-metric span {
   display: block;
-  margin-bottom: 8px;
-  color: #64748b;
-  font-size: 12px;
+  margin-bottom: var(--space-2);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
 }
+
 .hero-metric strong {
-  color: #0f172a;
-  font-size: 18px;
+  color: var(--text-primary);
+  font-size: var(--text-lg);
   line-height: 1.3;
   word-break: break-word;
 }
+
 .hero-metric--blue { box-shadow: inset 0 0 0 1px rgba(59,130,246,.08); }
 .hero-metric--green { box-shadow: inset 0 0 0 1px rgba(16,185,129,.08); }
 .hero-metric--amber { box-shadow: inset 0 0 0 1px rgba(245,158,11,.08); }
 .hero-metric--slate { box-shadow: inset 0 0 0 1px rgba(100,116,139,.08); }
+
 .hero-inline,
 .hero-link-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: var(--space-3);
   align-items: center;
 }
-.error-copy { color: #b42318; }
-.action-row { display: flex; flex-wrap: wrap; gap: 12px; }
-.table-card h3 { margin: 0 0 12px; color: #1d3555; }
-.compact-card { padding: 18px; }
-.section-copy { margin: 0 0 12px; color: #64748b; }
-.auto-delivery-tag-line { display: flex; align-items: center; }
+
+.error-copy {
+  color: var(--color-danger);
+}
+
+.action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.section-copy {
+  margin: 0 0 var(--space-3);
+  color: var(--text-secondary);
+}
+
+.auto-delivery-tag-line {
+  display: flex;
+  align-items: center;
+}
+
 .auto-delivery-note {
   margin-top: 14px;
-  padding: 14px 16px;
-  border-radius: 16px;
+  padding: 14px var(--space-4);
+  border-radius: var(--radius-md);
   background: rgba(248,250,252,.92);
-  border: 1px solid rgba(86,108,138,.08);
+  border: 1px solid var(--border-default);
 }
-.auto-delivery-note p { margin: 0 0 8px; color: #334155; }
-.auto-delivery-note p:last-child { margin-bottom: 0; }
-.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,.08); }
-.data-table th { width: 160px; color: #64748b; }
-.status-stack { display: flex; flex-wrap: wrap; gap: 8px; }
+
+.auto-delivery-note p {
+  margin: 0 0 var(--space-2);
+  color: var(--text-primary);
+}
+
+.auto-delivery-note p:last-child {
+  margin-bottom: 0;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th,
+.data-table td {
+  padding: var(--space-3) 10px;
+  text-align: left;
+  border-bottom: 1px solid var(--border-default);
+}
+
+.data-table th {
+  width: 160px;
+  color: var(--text-secondary);
+}
+
+.status-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
 .redeem-summary-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
+  gap: var(--space-3);
   margin-bottom: 14px;
 }
+
 .redeem-summary-card,
 .redeem-attempt-card {
-  padding: 14px 16px;
-  border-radius: 16px;
-  border: 1px solid rgba(86,108,138,.1);
+  padding: 14px var(--space-4);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
   background: rgba(248,250,252,.92);
 }
+
 .redeem-summary-card span,
 .redeem-attempt-grid span {
   display: block;
-  color: #64748b;
-  font-size: 12px;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
   margin-bottom: 6px;
 }
+
 .redeem-summary-card strong,
 .redeem-attempt-grid strong {
-  color: #1d3555;
+  color: var(--text-primary);
 }
+
 .redeem-attempts {
   display: grid;
-  gap: 12px;
+  gap: var(--space-3);
 }
+
 .redeem-attempt-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--space-3);
 }
+
 .redeem-outcome {
-  color: #175cd3;
-  font-size: 13px;
+  color: var(--color-primary);
+  font-size: var(--text-sm);
   font-weight: 600;
 }
+
 .redeem-attempt-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 12px;
-  margin-top: 12px;
+  gap: var(--space-3);
+  margin-top: var(--space-3);
 }
+
 .redeem-attempt-copy {
-  margin: 12px 0 0;
-  color: #334155;
+  margin: var(--space-3) 0 0;
+  color: var(--text-primary);
   line-height: 1.6;
 }
-.table-empty { text-align: center; color: #64748b; }
-.binding-primary { margin-top: 4px; color: #0f766e; font-size: 12px; font-weight: 600; }
-.binding-meta { margin-top: 4px; color: #64748b; font-size: 12px; }
-.manual-grid { display: grid; gap: 14px; }
-.field-block { display: grid; gap: 8px; color: #1d3555; font-weight: 600; }
-.manual-hint { margin: 14px 0 0; color: #64748b; }
-.manual-summary { margin-top: 16px; padding: 14px; border-radius: 16px; background: rgba(248,250,252,.9); }
-.manual-summary p { margin: 0 0 8px; color: #334155; }
-.manual-summary p:last-child { margin-bottom: 0; }
+
+.table-empty {
+  text-align: center;
+  color: var(--text-secondary);
+}
+
+.binding-primary {
+  margin-top: 4px;
+  color: var(--color-success);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.binding-meta {
+  margin-top: 4px;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+}
+
+.manual-grid {
+  display: grid;
+  gap: 14px;
+}
+
+.field-block {
+  display: grid;
+  gap: var(--space-2);
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.manual-hint {
+  margin: 14px 0 0;
+  color: var(--text-secondary);
+}
+
+.manual-summary {
+  margin-top: var(--space-4);
+  padding: 14px;
+  border-radius: var(--radius-md);
+  background: rgba(248,250,252,.9);
+}
+
+.manual-summary p {
+  margin: 0 0 var(--space-2);
+  color: var(--text-primary);
+}
+
+.manual-summary p:last-child {
+  margin-bottom: 0;
+}
+
 .flow-card {
   display: grid;
-  gap: 16px;
+  gap: var(--space-4);
   background:
     radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 28%),
     linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96));
 }
+
 .flow-card-head {
   display: flex;
   flex-wrap: wrap;
@@ -1269,151 +1390,194 @@ onBeforeUnmount(clearScreenshotPreview)
   justify-content: space-between;
   gap: 14px;
 }
+
 .flow-head-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
 }
-.kuaishou-focus-grid,
-.flow-grid {
+
+.kuaishou-focus-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 14px;
 }
-.flow-block,
-.flow-form-card {
-  padding: 16px;
+
+.flow-block {
+  padding: var(--space-4);
   border-radius: 18px;
-  border: 1px solid rgba(86,108,138,.1);
+  border: 1px solid var(--border-default);
   background: rgba(248,250,252,.9);
 }
+
 .flow-block--spotlight {
   background:
     linear-gradient(160deg, rgba(255,255,255,.98), rgba(239,246,255,.95)),
     rgba(248,250,252,.9);
 }
+
 .flow-block h4 {
   margin: 0;
-  color: #1d3555;
+  color: var(--text-primary);
 }
+
 .flow-block p {
   margin: 10px 0 0;
-  color: #64748b;
+  color: var(--text-secondary);
   line-height: 1.6;
 }
+
 .flow-meta-list {
   display: grid;
   gap: 10px;
   margin-top: 14px;
 }
+
 .flow-meta-list div {
   display: grid;
   gap: 4px;
 }
+
 .flow-meta-list span {
-  color: #64748b;
-  font-size: 12px;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
 }
+
 .flow-meta-list strong {
-  color: #1d3555;
+  color: var(--text-primary);
   word-break: break-all;
 }
+
 .flow-meta-list--dense {
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
 }
+
 .flow-meta-list--two-column {
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
+
 .spotlight-head {
   display: flex;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--space-3);
   align-items: flex-start;
 }
+
 .spotlight-actions {
   display: flex;
   align-items: center;
   gap: 10px;
 }
+
 .flow-copy {
-  margin: 8px 0 0;
-  color: #64748b;
+  margin: var(--space-2) 0 0;
+  color: var(--text-secondary);
   line-height: 1.6;
 }
+
 .flow-collapse {
   display: grid;
-  gap: 12px;
+  gap: var(--space-3);
 }
+
 .checklist-grid {
   display: grid;
-  gap: 12px;
-  margin-top: 16px;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
 }
+
 .checklist-item {
-  padding: 14px 16px;
-  border-radius: 16px;
+  padding: 14px var(--space-4);
+  border-radius: var(--radius-md);
   background: rgba(255,255,255,.84);
-  border: 1px solid rgba(86,108,138,.08);
+  border: 1px solid var(--border-default);
 }
+
 .checklist-item-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 8px;
+  gap: var(--space-3);
+  margin-bottom: var(--space-2);
 }
+
 .checklist-item-head span {
-  color: #64748b;
-  font-size: 12px;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
 }
+
 .checklist-item strong {
-  color: #0f172a;
+  color: var(--text-primary);
   line-height: 1.5;
 }
+
 .role-hero {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 12px;
-  margin-top: 16px;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
 }
+
 .role-hero div {
-  padding: 14px 16px;
-  border-radius: 16px;
+  padding: 14px var(--space-4);
+  border-radius: var(--radius-md);
   background: rgba(255,255,255,.88);
-  border: 1px solid rgba(86,108,138,.08);
+  border: 1px solid var(--border-default);
 }
+
 .role-hero span {
   display: block;
   margin-bottom: 6px;
-  color: #64748b;
-  font-size: 12px;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
 }
+
 .role-hero strong {
-  color: #0f172a;
-  font-size: 18px;
+  color: var(--text-primary);
+  font-size: var(--text-lg);
   line-height: 1.35;
   word-break: break-word;
 }
+
 .role-warning {
   margin: 14px 0 0;
-  padding: 12px 14px;
+  padding: var(--space-3) 14px;
   border-radius: 14px;
-  background: rgba(255, 244, 229, 0.9);
+  background: var(--color-warning-light);
   color: #b54708;
 }
-.event-copy { color: #334155; }
-.event-time { margin-top: 6px; color: #64748b; font-size: 12px; }
-.screenshot-link { display: inline-block; margin-bottom: 12px; color: #175cd3; text-decoration: none; }
-.screenshot-empty { margin: 0 0 12px; color: #64748b; }
+
+.event-copy {
+  color: var(--text-primary);
+}
+
+.event-time {
+  margin-top: 6px;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+}
+
+.screenshot-link {
+  display: inline-block;
+  margin-bottom: var(--space-3);
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.screenshot-empty {
+  margin: 0 0 var(--space-3);
+  color: var(--text-secondary);
+}
+
 .screenshot-preview {
   display: block;
   width: min(100%, 720px);
   border-radius: 18px;
-  border: 1px solid rgba(86,108,138,.12);
+  border: 1px solid var(--border-default);
   box-shadow: 0 20px 48px rgba(15,23,42,.08);
 }
 
-@media (max-width: 720px) {
+@media (max-width: 900px) {
   .hero-inline,
   .hero-link-row,
   .flow-card-head,
diff --git a/apps/frontend/src/views/admin/AdminWebhookEventDetailView.vue b/apps/frontend/src/views/admin/AdminWebhookEventDetailView.vue
index 64cf861d..9910ed3c 100644
--- a/apps/frontend/src/views/admin/AdminWebhookEventDetailView.vue
+++ b/apps/frontend/src/views/admin/AdminWebhookEventDetailView.vue
@@ -89,13 +89,12 @@ onMounted(loadDetail)
 
 <template>
   <section class="admin-panel">
-    <header class="panel-header">
-      <div>
-        <h1>Webhook 详情</h1>
-        <p>查看原始请求并手动重放处理流程。</p>
-      </div>
+    <AdminPageHeader
+      title="Webhook 详情"
+      description="查看原始请求并手动重放处理流程。"
+    >
       <el-button v-if="hasAdminRole('admin')" :loading="replayLoading" round type="primary" @click="submitReplay">重放处理</el-button>
-    </header>
+    </AdminPageHeader>
 
     <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
     <div v-if="loading" class="empty-block">Webhook 详情加载中</div>
@@ -172,7 +171,7 @@ onMounted(loadDetail)
         <div v-if="detail.processError" class="inline-error">{{ detail.processError }}</div>
       </section>
 
-      <section v-if="lastReplayResult" class="table-card">
+      <section v-if="lastReplayResult" class="info-card">
         <h3>最近一次重放结果</h3>
         <p class="result-copy">
           {{ lastReplayResult.provider }} / {{ lastReplayResult.platform }}
@@ -183,40 +182,33 @@ onMounted(loadDetail)
           · 事件 {{ formatAdminWebhookEventType(lastReplayResult.eventType) }}
           · 任务数 {{ lastReplayResult.taskCount }}
         </p>
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th>任务 ID</th>
-              <th>任务号</th>
-              <th>状态</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="task in lastReplayResult.tasks" :key="task.taskId">
-              <td>{{ task.taskId }}</td>
-              <td>{{ task.taskNo }}</td>
-              <td><AdminStatusTag :status="task.status" /></td>
-            </tr>
-          </tbody>
-        </table>
+        <el-table :data="lastReplayResult.tasks" size="small">
+          <el-table-column prop="taskId" label="任务 ID" />
+          <el-table-column prop="taskNo" label="任务号" />
+          <el-table-column label="状态">
+            <template #default="{ row }">
+              <AdminStatusTag :status="row.status" />
+            </template>
+          </el-table-column>
+        </el-table>
       </section>
 
-      <section class="table-card">
+      <section class="info-card">
         <h3>解析后的 Payload</h3>
         <pre class="json-block">{{ prettyJson(detail.payload) }}</pre>
       </section>
 
-      <section class="table-card">
+      <section class="info-card">
         <h3>Headers</h3>
         <pre class="json-block">{{ prettyJson(detail.headers) }}</pre>
       </section>
 
-      <section class="table-card">
+      <section class="info-card">
         <h3>Query</h3>
         <pre class="json-block">{{ prettyJson(detail.query) }}</pre>
       </section>
 
-      <section class="table-card">
+      <section class="info-card">
         <h3>Body</h3>
         <pre class="json-block">{{ prettyJson(detail.body) }}</pre>
       </section>
@@ -225,87 +217,132 @@ onMounted(loadDetail)
 </template>
 
 <style scoped>
-.admin-panel { display: grid; gap: 16px; }
-.panel-header { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
-.panel-header h1 { margin: 0; color: #1d3555; }
-.panel-header p { margin: 8px 0 0; color: #64748b; }
-.info-card,.table-card,.empty-block,.error-copy {
-  padding: 18px; border-radius: 20px; background: rgba(255,255,255,.94); border: 1px solid rgba(86,108,138,.1);
+.admin-panel {
+  display: grid;
+  gap: var(--space-4);
 }
-.overview-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
-.overview-top h3 { margin: 0; color: #0f172a; }
-.muted-copy { margin: 8px 0 0; color: #64748b; }
-.tag-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+
+.info-card,
+.empty-block,
+.error-copy {
+  padding: 18px;
+  border-radius: var(--radius-lg);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+}
+
+.overview-top {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-4);
+  align-items: flex-start;
+}
+
+.overview-top h3,
+.info-card h3 {
+  margin: 0;
+  color: var(--text-primary);
+}
+
+.muted-copy {
+  margin: var(--space-2) 0 0;
+  color: var(--text-secondary);
+}
+
+.tag-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+}
+
 .summary-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-  margin-top: 16px;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
 }
+
 .summary-item {
   display: grid;
   gap: 6px;
   padding: 14px;
-  border-radius: 16px;
-  background: #f8fafc;
-  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: var(--radius-md);
+  background: var(--bg-page);
+  border: 1px solid var(--border-default);
 }
+
 .summary-label {
-  color: #64748b;
-  font-size: 12px;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
   font-weight: 700;
 }
+
 .summary-item strong {
-  color: #0f172a;
+  color: var(--text-primary);
   word-break: break-all;
 }
+
 .summary-note {
-  color: #64748b;
-  font-size: 12px;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
   line-height: 1.5;
   word-break: break-all;
 }
+
 .event-key-block {
   display: grid;
-  gap: 8px;
-  margin-top: 16px;
+  gap: var(--space-2);
+  margin-top: var(--space-4);
   padding: 14px;
-  border-radius: 16px;
-  background: #f8fafc;
-  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: var(--radius-md);
+  background: var(--bg-page);
+  border: 1px solid var(--border-default);
 }
+
 .event-key-block code {
-  color: #334155;
-  font-size: 12px;
+  color: var(--text-primary);
+  font-size: var(--text-xs);
   line-height: 1.6;
   word-break: break-all;
   white-space: pre-wrap;
 }
-.error-copy { color: #b42318; }
+
+.error-copy {
+  color: var(--color-danger);
+}
+
 .inline-error {
-  margin-top: 16px;
-  padding: 12px 14px;
+  margin-top: var(--space-4);
+  padding: var(--space-3) 14px;
   border-radius: 14px;
-  color: #b42318;
-  background: #fef3f2;
+  color: var(--color-danger);
+  background: var(--color-danger-light);
   border: 1px solid #fecdca;
   line-height: 1.6;
 }
-.result-copy { margin: 0 0 12px; color: #64748b; }
-.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,.08); color: #334155; }
-.inline-link { color: #175cd3; }
+
+.result-copy {
+  margin: var(--space-3) 0;
+  color: var(--text-secondary);
+}
+
+.inline-link {
+  color: var(--color-primary);
+}
+
 .json-block {
-  margin: 12px 0 0;
+  margin: var(--space-3) 0 0;
   padding: 14px;
   border-radius: 14px;
   background: #0f172a;
   color: #e2e8f0;
   overflow: auto;
-  font-size: 12px;
+  font-size: var(--text-xs);
   line-height: 1.6;
 }
-@media (max-width: 960px) {
+
+@media (max-width: 900px) {
   .overview-top {
     flex-direction: column;
   }