diff --git a/apps/frontend/src/views/admin/AdminFulfillmentBindings.css b/apps/frontend/src/views/admin/AdminFulfillmentBindings.css
new file mode 100644
index 00000000..a6898ddb
--- /dev/null
+++ b/apps/frontend/src/views/admin/AdminFulfillmentBindings.css
@@ -0,0 +1,415 @@
+.admin-panel {
+  display: grid;
+  gap: 12px;
+}
+
+.panel-header,
+.section-title-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.panel-header h1,
+.section-title-row h3 {
+  margin: 0;
+  color: var(--text-primary);
+}
+
+.panel-header p,
+.section-title-row p {
+  margin: 6px 0 0;
+  color: var(--text-secondary);
+}
+
+.panel-header {
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.panel-header-copy {
+  min-width: 280px;
+  flex: 1;
+}
+
+.header-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.header-tag,
+.section-note-chip,
+.mini-stat-chip,
+.summary-label,
+.overview-label {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: var(--radius-full);
+  background: rgba(37, 89, 167, 0.08);
+  border: 1px solid rgba(37, 89, 167, 0.12);
+  color: var(--color-primary-dark);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.overview-card,
+.table-card,
+.empty-block,
+.error-copy {
+  padding: 16px;
+  border-radius: var(--radius-xl);
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(86, 108, 138, 0.1);
+}
+
+.table-card--dense {
+  padding: 14px 16px 16px;
+}
+
+.overview-card {
+  display: grid;
+  gap: 12px;
+}
+
+.overview-file {
+  display: grid;
+  gap: 6px;
+}
+
+.overview-file code {
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  padding: 8px 12px;
+  border-radius: 14px;
+  background: rgba(15, 23, 42, 0.05);
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.overview-stats {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.overview-stat {
+  display: grid;
+  gap: 4px;
+  padding: 12px 14px;
+  border-radius: var(--radius-lg);
+  background: #f8fafc;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+}
+
+.overview-stat span {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.overview-stat strong {
+  color: var(--text-primary);
+  font-size: 22px;
+  line-height: 1.1;
+}
+
+.overview-notes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.overview-note {
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 12px;
+  border-radius: var(--radius-full);
+  background: rgba(15, 23, 42, 0.04);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.section-title-row--tight {
+  align-items: center;
+}
+
+.section-header-tools {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.section-mini-stats,
+.section-action-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.lookup-toolbar,
+.lookup-summary {
+  display: grid;
+  gap: 12px;
+}
+
+.lookup-toolbar {
+  grid-template-columns: 96px 110px minmax(140px, 1fr) minmax(180px, 1.2fr) 136px;
+  align-items: end;
+}
+
+.field-block--action :deep(.el-button) {
+  width: 100%;
+}
+
+.toolbar-hint {
+  margin: 10px 0 0;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+}
+
+.lookup-summary {
+  margin-top: 14px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.lookup-summary-item {
+  display: grid;
+  gap: 6px;
+  padding: 12px 14px;
+  border-radius: var(--radius-lg);
+  background: #f8fafc;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+}
+
+.lookup-summary-item strong {
+  color: var(--text-primary);
+}
+
+.binding-card {
+  margin-top: 12px;
+  padding: 14px;
+  border-radius: var(--radius-lg);
+  background: #f8fafc;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.binding-card--invalid {
+  border-color: rgba(220, 38, 38, 0.3);
+  box-shadow: 0 0 0 4px rgba(254, 226, 226, 0.85);
+}
+
+.binding-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: flex-start;
+  margin-bottom: 10px;
+}
+
+.binding-summary {
+  display: grid;
+  gap: 4px;
+}
+
+.binding-title-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+  color: var(--text-primary);
+}
+
+.binding-subtle {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+}
+
+.binding-status-chip {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-full);
+  padding: 2px 10px;
+  background: #fff1f2;
+  color: #be123c;
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.binding-status-chip--done {
+  background: #ecfdf3;
+  color: #027a48;
+}
+
+.collapse-button {
+  border: 1px solid rgba(86, 108, 138, 0.18);
+  background: rgba(255, 255, 255, 0.96);
+  color: var(--text-primary);
+  border-radius: var(--radius-full);
+  padding: 7px 12px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.binding-collapsed-preview {
+  display: grid;
+  gap: 6px;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+}
+
+.binding-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 12px;
+}
+
+.validation-banner {
+  margin: 12px 0 0;
+  padding: 10px 12px;
+  border-radius: 14px;
+  background: #fff4f2;
+  border: 1px solid rgba(244, 63, 94, 0.18);
+  color: var(--color-danger);
+  font-weight: 600;
+}
+
+.field-block {
+  display: grid;
+  gap: 6px;
+}
+
+.field-block span {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.field-help {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+}
+
+.field-wide {
+  grid-column: 1 / -1;
+}
+
+.text-input {
+  width: 100%;
+  min-height: 40px;
+  padding: 0 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(86, 108, 138, 0.18);
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.text-input--invalid {
+  border-color: rgba(220, 38, 38, 0.45);
+  background: #fff8f8;
+}
+
+.text-input--invalid:focus {
+  outline: none;
+  border-color: rgba(220, 38, 38, 0.6);
+  box-shadow: 0 0 0 3px rgba(254, 226, 226, 0.95);
+}
+
+.text-input--readonly {
+  color: var(--text-secondary);
+  background: rgba(148, 163, 184, 0.08);
+}
+
+.binding-inline-error {
+  margin: 10px 0 0;
+  color: var(--color-danger);
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.binding-actions {
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+
+.checkbox-line {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--text-secondary);
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 12px;
+}
+
+.data-table th,
+.data-table td {
+  padding: 12px 10px;
+  text-align: left;
+  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
+  color: var(--text-primary);
+  vertical-align: top;
+}
+
+.data-table th {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+}
+
+.cell-stack {
+  display: grid;
+  gap: 4px;
+}
+
+.cell-subtle {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+}
+
+.empty-block,
+.empty-inline {
+  color: var(--text-secondary);
+}
+
+.error-copy {
+  color: var(--color-danger);
+}
+
+@media (max-width: 900px) {
+  .panel-header,
+  .section-title-row,
+  .section-header-tools,
+  .binding-actions,
+  .binding-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .overview-stats,
+  .lookup-toolbar,
+  .lookup-summary,
+  .binding-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/apps/frontend/src/views/admin/AdminFulfillmentBindingsView.vue b/apps/frontend/src/views/admin/AdminFulfillmentBindingsView.vue
index 4cebc7c5..93a4d806 100644
--- a/apps/frontend/src/views/admin/AdminFulfillmentBindingsView.vue
+++ b/apps/frontend/src/views/admin/AdminFulfillmentBindingsView.vue
@@ -902,420 +902,4 @@ onMounted(loadConfigs)
   </section>
 </template>
 
-<style scoped>
-.admin-panel {
-  display: grid;
-  gap: 12px;
-}
-
-.panel-header,
-.section-title-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  align-items: flex-start;
-}
-
-.panel-header h1,
-.section-title-row h3 {
-  margin: 0;
-  color: var(--text-primary);
-}
-
-.panel-header p,
-.section-title-row p {
-  margin: 6px 0 0;
-  color: var(--text-secondary);
-}
-
-.panel-header {
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.panel-header-copy {
-  min-width: 280px;
-  flex: 1;
-}
-
-.header-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.header-tag,
-.section-note-chip,
-.mini-stat-chip,
-.summary-label,
-.overview-label {
-  display: inline-flex;
-  align-items: center;
-  min-height: 28px;
-  padding: 0 10px;
-  border-radius: var(--radius-full);
-  background: rgba(37, 89, 167, 0.08);
-  border: 1px solid rgba(37, 89, 167, 0.12);
-  color: var(--color-primary-dark);
-  font-size: var(--text-xs);
-  font-weight: 700;
-  letter-spacing: 0.04em;
-}
-
-.header-actions {
-  display: flex;
-  gap: 10px;
-}
-
-.overview-card,
-.table-card,
-.empty-block,
-.error-copy {
-  padding: 16px;
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-}
-
-.table-card--dense {
-  padding: 14px 16px 16px;
-}
-
-.overview-card {
-  display: grid;
-  gap: 12px;
-}
-
-.overview-file {
-  display: grid;
-  gap: 6px;
-}
-
-.overview-file code {
-  display: inline-flex;
-  width: 100%;
-  max-width: 100%;
-  padding: 8px 12px;
-  border-radius: 14px;
-  background: rgba(15, 23, 42, 0.05);
-  color: var(--text-primary);
-  word-break: break-all;
-}
-
-.overview-stats {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 10px;
-}
-
-.overview-stat {
-  display: grid;
-  gap: 4px;
-  padding: 12px 14px;
-  border-radius: var(--radius-lg);
-  background: #f8fafc;
-  border: 1px solid rgba(148, 163, 184, 0.14);
-}
-
-.overview-stat span {
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-
-.overview-stat strong {
-  color: var(--text-primary);
-  font-size: 22px;
-  line-height: 1.1;
-}
-
-.overview-notes {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.overview-note {
-  display: inline-flex;
-  align-items: center;
-  min-height: 32px;
-  padding: 0 12px;
-  border-radius: var(--radius-full);
-  background: rgba(15, 23, 42, 0.04);
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  font-weight: 600;
-}
-
-.section-title-row--tight {
-  align-items: center;
-}
-
-.section-header-tools {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.section-mini-stats,
-.section-action-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.lookup-toolbar,
-.lookup-summary {
-  display: grid;
-  gap: 12px;
-}
-
-.lookup-toolbar {
-  grid-template-columns: 96px 110px minmax(140px, 1fr) minmax(180px, 1.2fr) 136px;
-  align-items: end;
-}
-
-.field-block--action :deep(.el-button) {
-  width: 100%;
-}
-
-.toolbar-hint {
-  margin: 10px 0 0;
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-}
-
-.lookup-summary {
-  margin-top: 14px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.lookup-summary-item {
-  display: grid;
-  gap: 6px;
-  padding: 12px 14px;
-  border-radius: var(--radius-lg);
-  background: #f8fafc;
-  border: 1px solid rgba(148, 163, 184, 0.14);
-}
-
-.lookup-summary-item strong {
-  color: var(--text-primary);
-}
-
-.binding-card {
-  margin-top: 12px;
-  padding: 14px;
-  border-radius: var(--radius-lg);
-  background: #f8fafc;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-}
-
-.binding-card--invalid {
-  border-color: rgba(220, 38, 38, 0.3);
-  box-shadow: 0 0 0 4px rgba(254, 226, 226, 0.85);
-}
-
-.binding-header {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: flex-start;
-  margin-bottom: 10px;
-}
-
-.binding-summary {
-  display: grid;
-  gap: 4px;
-}
-
-.binding-title-row {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
-  color: var(--text-primary);
-}
-
-.binding-subtle {
-  color: var(--text-secondary);
-  font-size: var(--text-sm);
-}
-
-.binding-status-chip {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--radius-full);
-  padding: 2px 10px;
-  background: #fff1f2;
-  color: #be123c;
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-
-.binding-status-chip--done {
-  background: #ecfdf3;
-  color: #027a48;
-}
-
-.collapse-button {
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.96);
-  color: var(--text-primary);
-  border-radius: var(--radius-full);
-  padding: 7px 12px;
-  font: inherit;
-  cursor: pointer;
-}
-
-.binding-collapsed-preview {
-  display: grid;
-  gap: 6px;
-  color: var(--text-secondary);
-  font-size: var(--text-sm);
-}
-
-.binding-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 12px;
-}
-
-.validation-banner {
-  margin: 12px 0 0;
-  padding: 10px 12px;
-  border-radius: 14px;
-  background: #fff4f2;
-  border: 1px solid rgba(244, 63, 94, 0.18);
-  color: var(--color-danger);
-  font-weight: 600;
-}
-
-.field-block {
-  display: grid;
-  gap: 6px;
-}
-
-.field-block span {
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-
-.field-help {
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  line-height: 1.5;
-}
-
-.field-wide {
-  grid-column: 1 / -1;
-}
-
-.text-input {
-  width: 100%;
-  min-height: 40px;
-  padding: 0 12px;
-  border-radius: 14px;
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.96);
-}
-
-.text-input--invalid {
-  border-color: rgba(220, 38, 38, 0.45);
-  background: #fff8f8;
-}
-
-.text-input--invalid:focus {
-  outline: none;
-  border-color: rgba(220, 38, 38, 0.6);
-  box-shadow: 0 0 0 3px rgba(254, 226, 226, 0.95);
-}
-
-.text-input--readonly {
-  color: var(--text-secondary);
-  background: rgba(148, 163, 184, 0.08);
-}
-
-.binding-inline-error {
-  margin: 10px 0 0;
-  color: var(--color-danger);
-  font-size: var(--text-sm);
-  font-weight: 600;
-}
-
-.binding-actions {
-  margin-top: 10px;
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: center;
-}
-
-.checkbox-line {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  color: var(--text-secondary);
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 12px;
-}
-
-.data-table th,
-.data-table td {
-  padding: 12px 10px;
-  text-align: left;
-  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
-  color: var(--text-primary);
-  vertical-align: top;
-}
-
-.data-table th {
-  color: var(--text-secondary);
-  font-size: var(--text-sm);
-}
-
-.cell-stack {
-  display: grid;
-  gap: 4px;
-}
-
-.cell-subtle {
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-}
-
-.empty-block,
-.empty-inline {
-  color: var(--text-secondary);
-}
-
-.error-copy {
-  color: var(--color-danger);
-}
-
-@media (max-width: 900px) {
-  .panel-header,
-  .section-title-row,
-  .section-header-tools,
-  .binding-actions,
-  .binding-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .overview-stats,
-  .lookup-toolbar,
-  .lookup-summary,
-  .binding-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
+<style scoped src="./AdminFulfillmentBindings.css"></style>
diff --git a/apps/frontend/src/views/admin/AdminInventoryView.vue b/apps/frontend/src/views/admin/AdminInventoryView.vue
index 41348d2d..a889b329 100644
--- a/apps/frontend/src/views/admin/AdminInventoryView.vue
+++ b/apps/frontend/src/views/admin/AdminInventoryView.vue
@@ -281,20 +281,15 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
   <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>
+        <span class="total-badge">共 {{ pagination.total }} 条库存</span>
       </template>
     </AdminPageHeader>
 
-    <!-- 查询筛选 -->
     <el-card shadow="never" class="section-card">
       <template #header>
-        <div>
+        <div class="card-header">
           <span class="card-title">查询库存池</span>
-          <p class="card-desc">按内部履约 SKU、凭据类型、批次和状态快速定位库存。</p>
+          <span class="card-desc">按内部履约 SKU、凭据类型、批次和状态快速定位库存。</span>
         </div>
       </template>
       <div class="form-grid">
@@ -314,12 +309,11 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
       </div>
     </el-card>
 
-    <!-- 入库与导入 -->
     <el-card shadow="never" class="section-card">
       <template #header>
-        <div>
+        <div class="card-header">
           <span class="card-title">入库与导入</span>
-          <p class="card-desc">填写内部履约 SKU，不是平台侧 sku_code。建议同类商品长期复用同一个内部名称。</p>
+          <span class="card-desc">填写内部履约 SKU，不是平台侧 sku_code。建议同类商品长期复用同一个内部名称。</span>
         </div>
       </template>
 
@@ -385,42 +379,39 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
 
     <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
 
-    <!-- 库存列表 -->
     <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>
 
       <template v-else>
-        <!-- 摘要 -->
         <div class="summary-grid">
-          <el-card shadow="never" class="stat-card">
+          <div 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">
+          </div>
+          <div 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">
+          </div>
+          <div 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">
+          </div>
+          <div class="stat-card">
             <span class="stat-label">预占中</span>
             <strong class="stat-value">{{ pageSummary.reservedCount }}</strong>
             <span class="stat-meta">当前页已经被任务锁定的库存项</span>
-          </el-card>
+          </div>
         </div>
 
-        <!-- 库存池概览 -->
         <div class="pool-section">
-          <div style="margin-bottom: 14px">
-            <h3 class="card-title">当前页库存池概览</h3>
-            <p class="card-desc">先看哪组内部履约 SKU 还有量，再决定补库存、查任务，还是切去人工履约。</p>
+          <div class="card-header" style="margin-bottom: 14px">
+            <span class="card-title">当前页库存池概览</span>
+            <span class="card-desc">先看哪组内部履约 SKU 还有量，再决定补库存、查任务，还是切去人工履约。</span>
           </div>
           <div class="pool-grid">
             <article v-for="group in inventoryGroups" :key="group.key" class="pool-card">
@@ -454,19 +445,17 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
           </div>
         </div>
 
-        <!-- 表格 -->
         <div class="table-toolbar">
           当前筛选共 {{ pagination.total }} 条，本页可用 {{ pageSummary.availableCount }} 条，预占 {{ pageSummary.reservedCount }} 条，已发放 {{ pageSummary.deliveredCount }} 条，作废 {{ pageSummary.invalidCount }} 条。
         </div>
 
-        <el-table :data="items" stripe size="small">
+        <el-table :data="items" stripe size="small" class="inventory-table">
           <el-table-column label="库存项" min-width="200">
             <template #default="{ row }">
               <div class="item-cell">
-                <span class="item-title">#{{ row.inventoryItemId }}</span>
+                <RouterLink v-if="row.reservedByTaskNo" :to="`/admin/tasks/${row.reservedByTaskNo}`" class="item-title">#{{ row.inventoryItemId }}</RouterLink>
+                <span v-else 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>
             </template>
           </el-table-column>
@@ -475,27 +464,32 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
               <div class="sku-cell">
                 <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>
             </template>
           </el-table-column>
-          <el-table-column label="状态 / 绑定" min-width="180">
+          <el-table-column label="批次 / 库存组" min-width="160">
             <template #default="{ row }">
-              <div class="status-cell">
-                <div class="status-stack">
-                  <AdminStatusTag :status="row.status" />
-                  <AdminStatusTag :status="row.systemBindingStatus" />
-                  <AdminStatusTag :status="row.userBindingStatus" />
-                </div>
+              <div class="info-cell">
+                <span class="info-subline">批次 {{ row.batchNo || '未分批' }}</span>
+                <span class="info-subline">库存组 {{ row.inventoryGroupCode || '未分组' }}</span>
                 <span class="status-copy">{{ formatInventoryStatus(row) }}</span>
                 <span v-if="row.invalidReason" class="status-warning">原因：{{ row.invalidReason }}</span>
               </div>
             </template>
           </el-table-column>
+          <el-table-column label="状态 / 绑定" min-width="180">
+            <template #default="{ row }">
+              <div class="status-stack">
+                <AdminStatusTag :status="row.status" />
+                <AdminStatusTag :status="row.systemBindingStatus" />
+                <AdminStatusTag :status="row.userBindingStatus" />
+              </div>
+            </template>
+          </el-table-column>
           <el-table-column label="关联任务 / 订单" min-width="160">
             <template #default="{ row }">
-              <div class="link-cell">
+              <div class="info-cell">
                 <span class="link-title">{{ row.reservedByTaskNo || '-' }}</span>
                 <span class="link-subline">任务号</span>
                 <span class="link-title">{{ row.platformOrderId || '-' }}</span>
@@ -503,9 +497,9 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="时间" min-width="160">
+          <el-table-column label="时间" min-width="180">
             <template #default="{ row }">
-              <div class="time-cell">
+              <div class="info-cell">
                 <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>
@@ -515,12 +509,11 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
           <el-table-column label="操作" width="120" align="center">
             <template #default="{ row }">
               <div class="action-stack">
-                <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>
+                <el-button v-if="hasAdminRole('admin') && row.status === 'reserved'" :loading="actionLoadingId === row.inventoryItemId" size="small" @click="runRowAction(row.inventoryItemId, () => releaseAdminInventoryItem(row.inventoryItemId), '库存项已释放', `确认释放库存项 #${row.inventoryItemId} 吗？释放后任务需要重新分配库存。`)">释放</el-button>
+                <el-button v-if="hasAdminRole('admin') && row.status === 'available'" :loading="actionLoadingId === row.inventoryItemId" size="small" type="danger" plain @click="runRowAction(row.inventoryItemId, () => invalidateAdminInventoryItem(row.inventoryItemId, { reason: '后台手动作废' }), '库存项已作废', `确认作废库存项 #${row.inventoryItemId} 吗？作废后不会再参与自动分配。`)">作废</el-button>
               </div>
             </template>
           </el-table-column>
-          <template #empty><el-empty :image-size="60" description="暂无库存项" /></template>
         </el-table>
 
         <el-pagination
@@ -540,118 +533,268 @@ onMounted(async () => { await Promise.all([loadInventoryItems(), loadInventorySk
 <style scoped>
 .inventory-page { display: grid; gap: 0; }
 
-.header-tags { display: flex; flex-wrap: wrap; gap: 10px; }
-.header-tag {
+.total-badge {
   display: inline-flex;
   align-items: center;
   min-height: 32px;
   padding: 0 12px;
+  border: 1px solid rgba(37, 89, 167, 0.14);
+  border-radius: var(--radius-full);
+  background: rgba(37, 89, 167, 0.08);
+  color: #2559a7;
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.section-card { margin-top: var(--space-4); }
+
+.card-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-end; }
+.card-title { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
+.card-desc { color: var(--text-secondary); font-size: var(--text-sm); }
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1.3fr 0.95fr 0.85fr 1fr 1fr;
+  gap: var(--space-3);
+}
+
+.sku-input-wrap { display: grid; min-width: 0; }
+
+.native-input {
+  width: 100%;
+  min-width: 0;
+  min-height: 40px;
+  padding: 0 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+  background: rgba(255, 255, 255, 0.74);
+  color: var(--text-primary);
+  font-size: var(--text-sm);
+  outline: none;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.native-input:focus {
+  border-color: rgba(37, 89, 167, 0.38);
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 0 3px rgba(37, 89, 167, 0.08);
+}
+
+.single-row,
+.action-row {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  margin-top: 14px;
+}
+.single-row :deep(.el-input) { min-width: 0; }
+
+.helper-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-3);
+  margin-top: 14px;
+}
+
+.helper-item {
+  display: grid;
+  gap: 6px;
+  padding: 12px 14px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: var(--radius-md);
+  background: rgba(248, 250, 252, 0.72);
+}
+
+.helper-title { color: #2559a7; font-size: var(--text-xs); font-weight: 700; }
+.helper-copy { min-width: 0; color: #334155; line-height: 1.6; word-break: break-word; }
+
+.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;
+  max-width: 100%;
+  padding: 10px 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(86, 108, 138, 0.16);
+  background: rgba(248, 250, 252, 0.78);
+  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 { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sku-chip-meta { min-width: 0; color: var(--text-secondary); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+.stat-card {
+  min-width: 0;
+  padding: 14px 16px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: var(--radius-md);
+  background: rgba(248, 250, 252, 0.72);
+}
+.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); }
+
+.pool-section { margin-bottom: 18px; }
+.pool-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+
+.pool-card {
+  display: grid;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(248, 250, 252, 0.68);
+}
+
+.pool-topline { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
+.pool-title-block { display: grid; gap: 6px; min-width: 0; }
+.pool-title { min-width: 0; margin: 0; color: var(--text-primary); font-size: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pool-subtitle { min-width: 0; color: var(--text-secondary); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pool-total {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 10px;
   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;
 }
-
-.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);
-}
-
-.single-row, .action-row { display: flex; gap: var(--space-3); align-items: center; margin-top: 14px; }
-
-.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; }
-
-.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;
-  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: 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); }
-
-.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); }
-
-.pool-section { margin-bottom: 18px; }
-.pool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
-.pool-card {
-  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-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; min-width: 0; color: var(--text-secondary); font-size: var(--text-xs); word-break: break-word; }
 .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; }
 
-.table-toolbar { margin-bottom: 10px; color: var(--text-secondary); font-size: var(--text-xs); }
+.table-toolbar {
+  margin-bottom: var(--space-2);
+  padding-top: var(--space-2);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.inventory-table {
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: rgba(239, 246, 255, 0.72);
+  --el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
+  --el-table-border-color: rgba(86, 108, 138, 0.1);
+}
+.inventory-table :deep(.el-table__inner-wrapper::before) { display: none; }
+.inventory-table :deep(th.el-table__cell) {
+  height: 42px;
+  background: var(--el-table-header-bg-color);
+  color: var(--text-secondary);
+  font-weight: 700;
+}
+
+.item-cell, .sku-cell, .info-cell {
+  display: grid;
+  gap: 6px;
+}
+
+.item-title, .sku-title, .link-title {
+  color: var(--text-primary);
+  font-weight: 700;
+}
+
+.item-value {
+  display: inline-flex;
+  max-width: 100%;
+  width: fit-content;
+  padding: 6px 8px;
+  border-radius: var(--radius-sm);
+  background: rgba(15, 23, 42, 0.06);
+  color: #0f172a;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.info-subline, .sku-subline, .link-subline, .time-line, .status-copy {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+}
 
-.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-stack, .action-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+}
+.action-stack { justify-content: 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)); }
 }
 @media (max-width: 900px) {
-  .form-grid, .summary-grid, .pool-grid, .helper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .form-grid,
+  .summary-grid,
+  .pool-grid,
+  .helper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .card-header { flex-direction: column; align-items: flex-start; }
 }
 @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; }
+  .form-grid,
+  .summary-grid,
+  .pool-grid,
+  .helper-grid { grid-template-columns: 1fr; }
+  .single-row,
+  .action-row,
+  .sku-helper-bar { flex-direction: column; align-items: stretch; }
+  .status-stack, .action-stack { justify-content: flex-start; }
 }
 </style>
diff --git a/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillment.css b/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillment.css
new file mode 100644
index 00000000..e3d1ceef
--- /dev/null
+++ b/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillment.css
@@ -0,0 +1,1141 @@
+.admin-panel {
+  --panel-ink: var(--text-primary);
+  --panel-muted: var(--text-secondary);
+  --panel-border: var(--border-default);
+  --panel-soft: #f6f8fb;
+  --panel-line: #dce3ec;
+  --accent: var(--color-primary);
+  --accent-strong: var(--color-primary-dark);
+  --warn: var(--color-warning);
+  --danger: var(--color-danger);
+
+  display: grid;
+  gap: var(--space-4);
+}
+
+.hero-card,
+.work-section,
+.rule-card,
+.empty-block,
+.message-box {
+  border: 1px solid var(--panel-border);
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
+}
+
+.hero-card {
+  display: grid;
+  gap: 18px;
+  padding: 22px;
+  border-radius: 10px;
+  background:
+    linear-gradient(135deg, rgba(15, 107, 95, 0.1), rgba(255, 255, 255, 0) 34%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 251, 0.96));
+}
+
+.hero-main,
+.section-heading,
+.rule-head,
+.pane-heading,
+.rule-footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.hero-copy,
+.section-heading > div:first-child {
+  display: grid;
+  gap: 6px;
+}
+
+.eyebrow {
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.hero-copy h1,
+.section-heading h2,
+.pane-heading h3 {
+  margin: 0;
+  color: var(--panel-ink);
+  letter-spacing: 0;
+}
+
+.hero-copy h1 {
+  font-size: var(--text-2xl);
+  line-height: 1.2;
+}
+
+.section-heading h2 {
+  font-size: 18px;
+}
+
+.pane-heading h3 {
+  font-size: var(--text-base);
+}
+
+.hero-copy p {
+  max-width: 720px;
+  margin: 0;
+  color: var(--panel-muted);
+  line-height: 1.65;
+}
+
+.hero-actions,
+.toolbar-actions,
+.sample-metrics,
+.rule-head-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.inline-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 34px;
+  padding: 0 10px;
+  border: 1px solid var(--panel-border);
+  border-radius: var(--radius-sm);
+  background: #fff;
+  color: var(--panel-ink);
+  font-size: var(--text-sm);
+  font-weight: 700;
+}
+
+.status-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(112px, 1fr)) minmax(240px, 2fr);
+  gap: 10px;
+}
+
+.status-strip article {
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid rgba(31, 42, 55, 0.08);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.82);
+}
+
+.status-strip span,
+.label,
+.field-block > span,
+.pane-heading span,
+.rule-footer,
+.field-help {
+  color: var(--panel-muted);
+  font-size: var(--text-xs);
+}
+
+.status-strip strong {
+  display: block;
+  margin-top: 5px;
+  color: var(--panel-ink);
+  font-size: var(--text-2xl);
+  line-height: 1;
+}
+
+.status-strip code {
+  display: block;
+  margin-top: 7px;
+  overflow: hidden;
+  color: var(--panel-ink);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.work-section {
+  display: grid;
+  gap: 16px;
+  padding: 18px;
+  border-radius: 10px;
+}
+
+.section-heading {
+  align-items: center;
+}
+
+.sample-metrics span {
+  padding: 6px 10px;
+  border-radius: var(--radius-full);
+  background: #eef7f5;
+  color: var(--accent-strong);
+  font-size: var(--text-xs);
+  font-weight: 800;
+}
+
+.lookup-console {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid var(--panel-line);
+  border-radius: var(--radius-sm);
+  background: linear-gradient(180deg, #f8fafc, #ffffff);
+}
+
+.lookup-grid,
+.grid,
+.switch-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.lookup-grid {
+  grid-template-columns: 1.4fr 1.4fr 1fr 1fr 92px 92px 92px 132px;
+  align-items: end;
+}
+
+.field-span-2 {
+  grid-column: span 2;
+}
+
+.cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.field-block {
+  min-width: 0;
+  display: grid;
+  gap: 7px;
+}
+
+.field-block > span {
+  color: #344054;
+  font-weight: 800;
+}
+
+.action-field {
+  align-content: end;
+}
+
+.action-field :deep(.el-button),
+.sample-import-button {
+  width: 100%;
+}
+
+.sample-results {
+  display: grid;
+  gap: 10px;
+}
+
+.sample-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 112px;
+  align-items: center;
+  gap: 14px;
+  padding: 14px;
+  border: 1px solid var(--panel-line);
+  border-radius: var(--radius-sm);
+  background: #fff;
+}
+
+.sample-card[data-imported='true'] {
+  background: #f8fafc;
+}
+
+.sample-main {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 1.1fr 1.7fr 1.25fr 0.8fr;
+  gap: 14px;
+}
+
+.sample-main > div,
+.rule-title-group,
+.order-cell,
+.product-cell,
+.shop-cell,
+.amount-cell {
+  min-width: 0;
+}
+
+.label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 800;
+}
+
+.sample-main strong {
+  display: block;
+  overflow: hidden;
+  color: var(--panel-ink);
+  font-size: var(--text-base);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sample-main small,
+.rule-title-group small,
+.field-help {
+  display: block;
+  margin-top: 4px;
+  overflow: hidden;
+  color: var(--panel-muted);
+  font-size: var(--text-xs);
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.imported-mark {
+  display: inline-flex;
+  justify-content: center;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  background: #eaf7f0;
+  color: #067647;
+  font-size: var(--text-sm);
+  font-weight: 800;
+}
+
+.rules-section {
+  gap: 14px;
+}
+
+.rule-filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.filter-chip,
+.collapse-button {
+  border: 1px solid var(--panel-border);
+  border-radius: var(--radius-sm);
+  background: #fff;
+  color: var(--panel-ink);
+  cursor: pointer;
+  font: inherit;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 34px;
+  padding: 0 11px;
+  font-size: var(--text-sm);
+  font-weight: 800;
+}
+
+.filter-chip strong {
+  color: var(--panel-muted);
+  font-size: var(--text-xs);
+}
+
+.filter-chip--active {
+  border-color: rgba(15, 107, 95, 0.32);
+  background: #eef7f5;
+  color: var(--accent-strong);
+}
+
+.filter-chip--active strong {
+  color: var(--accent-strong);
+}
+
+.rule-card {
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+}
+
+.rule-card[data-invalid='true'] {
+  border-color: rgba(180, 35, 24, 0.36);
+  box-shadow: 0 0 0 3px rgba(254, 228, 226, 0.9);
+}
+
+.rule-head {
+  padding: 12px 14px;
+  background: #f8fafc;
+  border-bottom: 1px solid var(--panel-line);
+}
+
+.rule-summary-button {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.rule-index {
+  display: inline-grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border-radius: var(--radius-sm);
+  background: #182230;
+  color: #fff;
+  font-size: var(--text-sm);
+  font-weight: 900;
+}
+
+.rule-title-group strong {
+  display: block;
+  overflow: hidden;
+  color: var(--panel-ink);
+  font-size: 15px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.summary-pill,
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  max-width: 220px;
+  min-height: 28px;
+  padding: 0 9px;
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.summary-pill {
+  background: #fff;
+  color: #475467;
+  border: 1px solid var(--panel-border);
+}
+
+.status-pill[data-tone='success'] {
+  color: #067647;
+  background: #eaf7f0;
+}
+
+.status-pill[data-tone='warning'] {
+  color: var(--warn);
+  background: #fff4e5;
+}
+
+.status-pill[data-tone='muted'] {
+  color: #475467;
+  background: #eef2f6;
+}
+
+.collapse-button {
+  min-height: 28px;
+  padding: 0 9px;
+  color: var(--accent-strong);
+  font-size: var(--text-xs);
+  font-weight: 800;
+}
+
+.rule-body {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  background: #fff;
+}
+
+.rule-pane {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid var(--panel-line);
+  border-radius: var(--radius-sm);
+  background: #fbfcfe;
+}
+
+.pane-heading {
+  align-items: center;
+}
+
+.switch-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.switch-tile,
+.switch-field {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+}
+
+.switch-tile {
+  min-height: 72px;
+  padding: 11px;
+  border: 1px solid var(--panel-line);
+  border-radius: var(--radius-sm);
+  background: #fff;
+}
+
+.switch-tile > span {
+  color: #344054;
+  font-size: var(--text-xs);
+  font-weight: 800;
+}
+
+.rule-footer {
+  align-items: center;
+  color: var(--panel-muted);
+}
+
+.empty-block,
+.message-box,
+.loading-band {
+  padding: 14px 16px;
+  border-radius: var(--radius-sm);
+  color: var(--panel-muted);
+}
+
+.empty-block--soft,
+.loading-band {
+  border: 1px dashed rgba(31, 42, 55, 0.18);
+  background: #f8fafc;
+  box-shadow: none;
+}
+
+.message-box {
+  margin: 0;
+  font-weight: 700;
+}
+
+.message-box--error {
+  border-color: rgba(180, 35, 24, 0.22);
+  background: #fff5f4;
+  color: var(--danger);
+}
+
+.message-box--warning {
+  border-color: rgba(181, 71, 8, 0.2);
+  background: #fff8eb;
+  color: var(--warn);
+}
+
+.field-block :deep(.el-input-number),
+.field-block :deep(.el-select) {
+  width: 100%;
+}
+
+.admin-panel :deep(.el-button) {
+  min-height: 34px;
+  border-radius: var(--radius-sm);
+  font-weight: 800;
+}
+
+.admin-panel :deep(.el-button--primary) {
+  --el-button-bg-color: var(--accent);
+  --el-button-border-color: var(--accent);
+  --el-button-hover-bg-color: var(--accent-strong);
+  --el-button-hover-border-color: var(--accent-strong);
+}
+
+.admin-panel :deep(.el-input__wrapper),
+.admin-panel :deep(.el-textarea__inner),
+.admin-panel :deep(.el-select__wrapper) {
+  min-height: 36px;
+  border-radius: var(--radius-sm);
+  background: #fff;
+  box-shadow: 0 0 0 1px var(--panel-line) inset;
+}
+
+.admin-panel :deep(.el-input__wrapper:hover),
+.admin-panel :deep(.el-textarea__inner:hover),
+.admin-panel :deep(.el-select__wrapper:hover) {
+  box-shadow: 0 0 0 1px rgba(15, 107, 95, 0.38) inset;
+}
+
+.admin-panel :deep(.el-input__wrapper.is-focus),
+.admin-panel :deep(.el-textarea__inner:focus),
+.admin-panel :deep(.el-select__wrapper.is-focused) {
+  box-shadow:
+    0 0 0 1px var(--accent) inset,
+    0 0 0 3px rgba(15, 107, 95, 0.12);
+}
+
+.admin-panel :deep(.el-input-number .el-input__wrapper) {
+  padding-left: 8px;
+}
+
+.admin-panel :deep(.el-input-number__decrease),
+.admin-panel :deep(.el-input-number__increase) {
+  border-color: var(--panel-line);
+  background: #f8fafc;
+}
+
+.admin-panel :deep(.el-switch.is-checked .el-switch__core) {
+  border-color: var(--accent);
+  background-color: var(--accent);
+}
+
+@media (max-width: 1200px) {
+  .lookup-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .field-span-2 {
+    grid-column: span 2;
+  }
+
+  .sample-main {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 900px) {
+  .hero-main,
+  .section-heading,
+  .rules-heading,
+  .rule-head,
+  .pane-heading,
+  .rule-footer {
+    display: grid;
+  }
+
+  .hero-actions,
+  .toolbar-actions,
+  .sample-metrics,
+  .rule-head-meta {
+    justify-content: flex-start;
+  }
+
+  .status-strip,
+  .lookup-grid,
+  .cols-4,
+  .cols-3,
+  .switch-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .file-status,
+  .field-span-2 {
+    grid-column: 1 / -1;
+  }
+
+  .sample-card {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .hero-card,
+  .work-section {
+    padding: 14px;
+  }
+
+  .status-strip,
+  .lookup-grid,
+  .cols-4,
+  .cols-3,
+  .switch-grid,
+  .sample-main {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-actions :deep(.el-button),
+  .toolbar-actions :deep(.el-button),
+  .sample-import-button {
+    width: 100%;
+  }
+}
+
+
+.panel-header,
+.section-title-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+.panel-header {
+  flex-wrap: wrap;
+}
+
+.panel-header-copy h1,
+.section-title-row h3 {
+  margin: 0;
+  color: #1d3555;
+}
+
+.panel-header-copy p,
+.section-title-row p {
+  margin: 6px 0 0;
+  color: #64748b;
+  line-height: 1.55;
+}
+
+.header-tags,
+.header-actions,
+.section-header-tools,
+.section-mini-stats,
+.section-action-group,
+.binding-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.header-actions,
+.section-header-tools {
+  justify-content: flex-end;
+}
+
+.header-tag,
+.mini-stat-chip,
+.overview-note {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 12px;
+  border-radius: var(--radius-full);
+  background: rgba(15, 93, 216, 0.08);
+  color: #175cd3;
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.mini-stat-chip--button {
+  border: 1px solid rgba(15, 93, 216, 0.12);
+  cursor: pointer;
+  font: inherit;
+}
+
+.mini-stat-chip--active {
+  border-color: rgba(15, 93, 216, 0.32);
+  background: rgba(15, 93, 216, 0.14);
+}
+
+.overview-card,
+.table-card,
+.empty-block,
+.error-copy {
+  padding: 16px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(86, 108, 138, 0.1);
+  box-shadow: none;
+}
+
+.table-card--dense {
+  padding: 14px 16px 16px;
+}
+
+.overview-card {
+  display: grid;
+  gap: 12px;
+}
+
+.overview-file {
+  display: grid;
+  gap: 6px;
+}
+
+.overview-label {
+  color: #64748b;
+  font-size: var(--text-xs);
+}
+
+.overview-file code {
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  padding: 8px 12px;
+  border-radius: 14px;
+  background: rgba(15, 23, 42, 0.05);
+  color: #1d3555;
+  word-break: break-all;
+}
+
+.overview-stats {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.overview-stat {
+  display: grid;
+  gap: 4px;
+  padding: 12px 14px;
+  border-radius: 16px;
+  background: #f8fafc;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+}
+
+.overview-stat span {
+  color: #64748b;
+  font-size: var(--text-xs);
+}
+
+.overview-stat strong {
+  color: #1d3555;
+  font-size: var(--text-2xl);
+  line-height: 1;
+}
+
+.overview-notes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.section-title-row--tight {
+  align-items: center;
+}
+
+.lookup-toolbar {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) 110px 130px 180px;
+  gap: 12px;
+  align-items: end;
+}
+
+.field-wide {
+  grid-column: span 2;
+}
+
+.field-block {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+}
+
+.field-block span {
+  color: #1d3555;
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.field-block--action {
+  align-content: end;
+}
+
+.field-block--action :deep(.el-button) {
+  width: 100%;
+}
+
+.text-input {
+  width: 100%;
+  min-height: 36px;
+  padding: 8px 12px;
+  border: 1px solid rgba(86, 108, 138, 0.22);
+  border-radius: 14px;
+  background: #fff;
+  color: #1d3555;
+  outline: none;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.text-input:focus {
+  border-color: rgba(15, 93, 216, 0.42);
+  box-shadow: 0 0 0 4px rgba(15, 93, 216, 0.08);
+}
+
+.text-input--readonly,
+.text-input:disabled {
+  background: #f8fafc;
+  color: #64748b;
+}
+
+.textarea-input {
+  min-height: 72px;
+  resize: vertical;
+}
+
+.field-help,
+.toolbar-hint,
+.cell-subtle {
+  color: #64748b;
+  font-size: var(--text-xs);
+  line-height: 1.45;
+}
+
+.toolbar-hint {
+  margin: 10px 0 0;
+}
+
+.error-copy,
+.validation-banner,
+.binding-inline-error {
+  color: #b42318;
+}
+
+.validation-banner,
+.binding-inline-error {
+  margin: 10px 0 0;
+  padding: 10px 12px;
+  border-radius: 14px;
+  background: #fff5f4;
+  border: 1px solid rgba(180, 35, 24, 0.14);
+  font-size: var(--text-sm);
+}
+
+.data-table {
+  width: 100%;
+  margin-top: 12px;
+  border-collapse: collapse;
+}
+
+.data-table th,
+.data-table td {
+  padding: 11px 10px;
+  text-align: left;
+  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
+  vertical-align: top;
+}
+
+.data-table th {
+  color: #64748b;
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.cell-stack {
+  display: grid;
+  gap: 4px;
+}
+
+.cell-stack strong {
+  color: #1d3555;
+}
+
+.empty-inline {
+  padding: 14px;
+  color: #64748b;
+  text-align: center;
+}
+
+.binding-card {
+  margin-top: 12px;
+  padding: 14px;
+  border-radius: 16px;
+  background: #f8fafc;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  box-shadow: none;
+}
+
+.binding-card--invalid {
+  border-color: rgba(220, 38, 38, 0.3);
+  box-shadow: 0 0 0 4px rgba(254, 226, 226, 0.85);
+}
+
+.binding-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: flex-start;
+  margin-bottom: 10px;
+}
+
+.binding-summary {
+  display: grid;
+  gap: 4px;
+}
+
+.binding-title-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+  color: #1d3555;
+}
+
+.binding-subtle {
+  color: #64748b;
+  font-size: var(--text-sm);
+}
+
+.binding-status-chip {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-full);
+  padding: 2px 10px;
+  background: #fff1f2;
+  color: #be123c;
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.binding-status-chip--done {
+  background: #ecfdf3;
+  color: #027a48;
+}
+
+.collapse-button {
+  border: 1px solid rgba(86, 108, 138, 0.18);
+  background: rgba(255, 255, 255, 0.96);
+  color: #1d3555;
+  border-radius: var(--radius-full);
+  padding: 7px 12px;
+  cursor: pointer;
+}
+
+.binding-collapsed-preview {
+  display: grid;
+  gap: 6px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.78);
+  color: #64748b;
+  font-size: var(--text-xs);
+}
+
+.binding-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.mapping-editor {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
+  gap: 12px;
+  align-items: stretch;
+}
+
+.mapping-panel {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.mapping-panel--external {
+  background: rgba(239, 246, 255, 0.72);
+}
+
+.mapping-panel--internal {
+  background: rgba(255, 255, 255, 0.86);
+  border-color: rgba(15, 93, 216, 0.16);
+}
+
+.mapping-panel-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: baseline;
+}
+
+.mapping-panel-head strong {
+  color: #1d3555;
+  font-size: 15px;
+}
+
+.mapping-panel-head span {
+  color: #64748b;
+  font-size: var(--text-xs);
+}
+
+.mapping-grid,
+.mapping-extra {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 12px;
+}
+
+.mapping-arrow {
+  display: grid;
+  place-items: center;
+  color: #175cd3;
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.mapping-arrow span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 30px;
+  min-width: 54px;
+  padding: 0 10px;
+  border-radius: var(--radius-full);
+  background: rgba(15, 93, 216, 0.08);
+  border: 1px solid rgba(15, 93, 216, 0.14);
+}
+
+.mapping-extra {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed rgba(86, 108, 138, 0.18);
+}
+
+.checkbox-line {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #1d3555;
+  font-size: var(--text-sm);
+}
+
+.binding-actions {
+  justify-content: space-between;
+  margin-top: 12px;
+}
+
+.admin-panel :deep(.el-button) {
+  min-height: 34px;
+  border-radius: var(--radius-full);
+}
+
+.admin-panel :deep(.el-button--primary) {
+  --el-button-bg-color: #3a91f7;
+  --el-button-border-color: #3a91f7;
+  --el-button-hover-bg-color: #0f5dd8;
+  --el-button-hover-border-color: #0f5dd8;
+}
+
+@media (max-width: 900px) {
+  .overview-stats,
+  .lookup-toolbar,
+  .binding-grid,
+  .mapping-editor {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .mapping-arrow {
+    display: none;
+  }
+
+  .field-wide {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 640px) {
+  .panel-header,
+  .section-title-row,
+  .section-header-tools,
+  .binding-actions,
+  .binding-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .overview-stats,
+  .lookup-toolbar,
+  .binding-grid,
+  .mapping-editor,
+  .mapping-grid,
+  .mapping-extra {
+    grid-template-columns: 1fr;
+  }
+
+  .field-wide {
+    grid-column: auto;
+  }
+}
diff --git a/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillmentView.vue b/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillmentView.vue
index 64c1ec30..b4b3b79e 100644
--- a/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillmentView.vue
+++ b/apps/frontend/src/views/admin/AdminKuaishouCloudFulfillmentView.vue
@@ -1083,1146 +1083,4 @@ onMounted(loadConfigs)
   </section>
 </template>
 
-<style scoped>
-.admin-panel {
-  --panel-ink: var(--text-primary);
-  --panel-muted: var(--text-secondary);
-  --panel-border: var(--border-default);
-  --panel-soft: #f6f8fb;
-  --panel-line: #dce3ec;
-  --accent: var(--color-primary);
-  --accent-strong: var(--color-primary-dark);
-  --warn: var(--color-warning);
-  --danger: var(--color-danger);
-
-  display: grid;
-  gap: var(--space-4);
-}
-
-.hero-card,
-.work-section,
-.rule-card,
-.empty-block,
-.message-box {
-  border: 1px solid var(--panel-border);
-  background: rgba(255, 255, 255, 0.96);
-  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
-}
-
-.hero-card {
-  display: grid;
-  gap: 18px;
-  padding: 22px;
-  border-radius: 10px;
-  background:
-    linear-gradient(135deg, rgba(15, 107, 95, 0.1), rgba(255, 255, 255, 0) 34%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 251, 0.96));
-}
-
-.hero-main,
-.section-heading,
-.rule-head,
-.pane-heading,
-.rule-footer {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.hero-copy,
-.section-heading > div:first-child {
-  display: grid;
-  gap: 6px;
-}
-
-.eyebrow {
-  color: var(--accent);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-
-.hero-copy h1,
-.section-heading h2,
-.pane-heading h3 {
-  margin: 0;
-  color: var(--panel-ink);
-  letter-spacing: 0;
-}
-
-.hero-copy h1 {
-  font-size: var(--text-2xl);
-  line-height: 1.2;
-}
-
-.section-heading h2 {
-  font-size: 18px;
-}
-
-.pane-heading h3 {
-  font-size: var(--text-base);
-}
-
-.hero-copy p {
-  max-width: 720px;
-  margin: 0;
-  color: var(--panel-muted);
-  line-height: 1.65;
-}
-
-.hero-actions,
-.toolbar-actions,
-.sample-metrics,
-.rule-head-meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.inline-switch {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  min-height: 34px;
-  padding: 0 10px;
-  border: 1px solid var(--panel-border);
-  border-radius: var(--radius-sm);
-  background: #fff;
-  color: var(--panel-ink);
-  font-size: var(--text-sm);
-  font-weight: 700;
-}
-
-.status-strip {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(112px, 1fr)) minmax(240px, 2fr);
-  gap: 10px;
-}
-
-.status-strip article {
-  min-width: 0;
-  padding: 12px;
-  border: 1px solid rgba(31, 42, 55, 0.08);
-  border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.82);
-}
-
-.status-strip span,
-.label,
-.field-block > span,
-.pane-heading span,
-.rule-footer,
-.field-help {
-  color: var(--panel-muted);
-  font-size: var(--text-xs);
-}
-
-.status-strip strong {
-  display: block;
-  margin-top: 5px;
-  color: var(--panel-ink);
-  font-size: var(--text-2xl);
-  line-height: 1;
-}
-
-.status-strip code {
-  display: block;
-  margin-top: 7px;
-  overflow: hidden;
-  color: var(--panel-ink);
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.work-section {
-  display: grid;
-  gap: 16px;
-  padding: 18px;
-  border-radius: 10px;
-}
-
-.section-heading {
-  align-items: center;
-}
-
-.sample-metrics span {
-  padding: 6px 10px;
-  border-radius: var(--radius-full);
-  background: #eef7f5;
-  color: var(--accent-strong);
-  font-size: var(--text-xs);
-  font-weight: 800;
-}
-
-.lookup-console {
-  display: grid;
-  gap: 12px;
-  padding: 14px;
-  border: 1px solid var(--panel-line);
-  border-radius: var(--radius-sm);
-  background: linear-gradient(180deg, #f8fafc, #ffffff);
-}
-
-.lookup-grid,
-.grid,
-.switch-grid {
-  display: grid;
-  gap: 12px;
-}
-
-.lookup-grid {
-  grid-template-columns: 1.4fr 1.4fr 1fr 1fr 92px 92px 92px 132px;
-  align-items: end;
-}
-
-.field-span-2 {
-  grid-column: span 2;
-}
-
-.cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.field-block {
-  min-width: 0;
-  display: grid;
-  gap: 7px;
-}
-
-.field-block > span {
-  color: #344054;
-  font-weight: 800;
-}
-
-.action-field {
-  align-content: end;
-}
-
-.action-field :deep(.el-button),
-.sample-import-button {
-  width: 100%;
-}
-
-.sample-results {
-  display: grid;
-  gap: 10px;
-}
-
-.sample-card {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 112px;
-  align-items: center;
-  gap: 14px;
-  padding: 14px;
-  border: 1px solid var(--panel-line);
-  border-radius: var(--radius-sm);
-  background: #fff;
-}
-
-.sample-card[data-imported='true'] {
-  background: #f8fafc;
-}
-
-.sample-main {
-  min-width: 0;
-  display: grid;
-  grid-template-columns: 1.1fr 1.7fr 1.25fr 0.8fr;
-  gap: 14px;
-}
-
-.sample-main > div,
-.rule-title-group,
-.order-cell,
-.product-cell,
-.shop-cell,
-.amount-cell {
-  min-width: 0;
-}
-
-.label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 800;
-}
-
-.sample-main strong {
-  display: block;
-  overflow: hidden;
-  color: var(--panel-ink);
-  font-size: var(--text-base);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sample-main small,
-.rule-title-group small,
-.field-help {
-  display: block;
-  margin-top: 4px;
-  overflow: hidden;
-  color: var(--panel-muted);
-  font-size: var(--text-xs);
-  line-height: 1.45;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.imported-mark {
-  display: inline-flex;
-  justify-content: center;
-  padding: 8px 10px;
-  border-radius: var(--radius-sm);
-  background: #eaf7f0;
-  color: #067647;
-  font-size: var(--text-sm);
-  font-weight: 800;
-}
-
-.rules-section {
-  gap: 14px;
-}
-
-.rule-filter-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.filter-chip,
-.collapse-button {
-  border: 1px solid var(--panel-border);
-  border-radius: var(--radius-sm);
-  background: #fff;
-  color: var(--panel-ink);
-  cursor: pointer;
-  font: inherit;
-}
-
-.filter-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 34px;
-  padding: 0 11px;
-  font-size: var(--text-sm);
-  font-weight: 800;
-}
-
-.filter-chip strong {
-  color: var(--panel-muted);
-  font-size: var(--text-xs);
-}
-
-.filter-chip--active {
-  border-color: rgba(15, 107, 95, 0.32);
-  background: #eef7f5;
-  color: var(--accent-strong);
-}
-
-.filter-chip--active strong {
-  color: var(--accent-strong);
-}
-
-.rule-card {
-  overflow: hidden;
-  border-radius: var(--radius-sm);
-}
-
-.rule-card[data-invalid='true'] {
-  border-color: rgba(180, 35, 24, 0.36);
-  box-shadow: 0 0 0 3px rgba(254, 228, 226, 0.9);
-}
-
-.rule-head {
-  padding: 12px 14px;
-  background: #f8fafc;
-  border-bottom: 1px solid var(--panel-line);
-}
-
-.rule-summary-button {
-  min-width: 0;
-  display: grid;
-  grid-template-columns: 34px minmax(0, 1fr);
-  align-items: center;
-  gap: 10px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  text-align: left;
-}
-
-.rule-index {
-  display: inline-grid;
-  width: 34px;
-  height: 34px;
-  place-items: center;
-  border-radius: var(--radius-sm);
-  background: #182230;
-  color: #fff;
-  font-size: var(--text-sm);
-  font-weight: 900;
-}
-
-.rule-title-group strong {
-  display: block;
-  overflow: hidden;
-  color: var(--panel-ink);
-  font-size: 15px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.summary-pill,
-.status-pill {
-  display: inline-flex;
-  align-items: center;
-  max-width: 220px;
-  min-height: 28px;
-  padding: 0 9px;
-  overflow: hidden;
-  border-radius: var(--radius-full);
-  font-size: var(--text-xs);
-  font-weight: 800;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.summary-pill {
-  background: #fff;
-  color: #475467;
-  border: 1px solid var(--panel-border);
-}
-
-.status-pill[data-tone='success'] {
-  color: #067647;
-  background: #eaf7f0;
-}
-
-.status-pill[data-tone='warning'] {
-  color: var(--warn);
-  background: #fff4e5;
-}
-
-.status-pill[data-tone='muted'] {
-  color: #475467;
-  background: #eef2f6;
-}
-
-.collapse-button {
-  min-height: 28px;
-  padding: 0 9px;
-  color: var(--accent-strong);
-  font-size: var(--text-xs);
-  font-weight: 800;
-}
-
-.rule-body {
-  display: grid;
-  gap: 12px;
-  padding: 14px;
-  background: #fff;
-}
-
-.rule-pane {
-  display: grid;
-  gap: 12px;
-  padding: 14px;
-  border: 1px solid var(--panel-line);
-  border-radius: var(--radius-sm);
-  background: #fbfcfe;
-}
-
-.pane-heading {
-  align-items: center;
-}
-
-.switch-grid {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.switch-tile,
-.switch-field {
-  display: grid;
-  align-content: start;
-  gap: 8px;
-}
-
-.switch-tile {
-  min-height: 72px;
-  padding: 11px;
-  border: 1px solid var(--panel-line);
-  border-radius: var(--radius-sm);
-  background: #fff;
-}
-
-.switch-tile > span {
-  color: #344054;
-  font-size: var(--text-xs);
-  font-weight: 800;
-}
-
-.rule-footer {
-  align-items: center;
-  color: var(--panel-muted);
-}
-
-.empty-block,
-.message-box,
-.loading-band {
-  padding: 14px 16px;
-  border-radius: var(--radius-sm);
-  color: var(--panel-muted);
-}
-
-.empty-block--soft,
-.loading-band {
-  border: 1px dashed rgba(31, 42, 55, 0.18);
-  background: #f8fafc;
-  box-shadow: none;
-}
-
-.message-box {
-  margin: 0;
-  font-weight: 700;
-}
-
-.message-box--error {
-  border-color: rgba(180, 35, 24, 0.22);
-  background: #fff5f4;
-  color: var(--danger);
-}
-
-.message-box--warning {
-  border-color: rgba(181, 71, 8, 0.2);
-  background: #fff8eb;
-  color: var(--warn);
-}
-
-.field-block :deep(.el-input-number),
-.field-block :deep(.el-select) {
-  width: 100%;
-}
-
-.admin-panel :deep(.el-button) {
-  min-height: 34px;
-  border-radius: var(--radius-sm);
-  font-weight: 800;
-}
-
-.admin-panel :deep(.el-button--primary) {
-  --el-button-bg-color: var(--accent);
-  --el-button-border-color: var(--accent);
-  --el-button-hover-bg-color: var(--accent-strong);
-  --el-button-hover-border-color: var(--accent-strong);
-}
-
-.admin-panel :deep(.el-input__wrapper),
-.admin-panel :deep(.el-textarea__inner),
-.admin-panel :deep(.el-select__wrapper) {
-  min-height: 36px;
-  border-radius: var(--radius-sm);
-  background: #fff;
-  box-shadow: 0 0 0 1px var(--panel-line) inset;
-}
-
-.admin-panel :deep(.el-input__wrapper:hover),
-.admin-panel :deep(.el-textarea__inner:hover),
-.admin-panel :deep(.el-select__wrapper:hover) {
-  box-shadow: 0 0 0 1px rgba(15, 107, 95, 0.38) inset;
-}
-
-.admin-panel :deep(.el-input__wrapper.is-focus),
-.admin-panel :deep(.el-textarea__inner:focus),
-.admin-panel :deep(.el-select__wrapper.is-focused) {
-  box-shadow:
-    0 0 0 1px var(--accent) inset,
-    0 0 0 3px rgba(15, 107, 95, 0.12);
-}
-
-.admin-panel :deep(.el-input-number .el-input__wrapper) {
-  padding-left: 8px;
-}
-
-.admin-panel :deep(.el-input-number__decrease),
-.admin-panel :deep(.el-input-number__increase) {
-  border-color: var(--panel-line);
-  background: #f8fafc;
-}
-
-.admin-panel :deep(.el-switch.is-checked .el-switch__core) {
-  border-color: var(--accent);
-  background-color: var(--accent);
-}
-
-@media (max-width: 1200px) {
-  .lookup-grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .field-span-2 {
-    grid-column: span 2;
-  }
-
-  .sample-main {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 900px) {
-  .hero-main,
-  .section-heading,
-  .rules-heading,
-  .rule-head,
-  .pane-heading,
-  .rule-footer {
-    display: grid;
-  }
-
-  .hero-actions,
-  .toolbar-actions,
-  .sample-metrics,
-  .rule-head-meta {
-    justify-content: flex-start;
-  }
-
-  .status-strip,
-  .lookup-grid,
-  .cols-4,
-  .cols-3,
-  .switch-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .file-status,
-  .field-span-2 {
-    grid-column: 1 / -1;
-  }
-
-  .sample-card {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 640px) {
-  .hero-card,
-  .work-section {
-    padding: 14px;
-  }
-
-  .status-strip,
-  .lookup-grid,
-  .cols-4,
-  .cols-3,
-  .switch-grid,
-  .sample-main {
-    grid-template-columns: 1fr;
-  }
-
-  .hero-actions :deep(.el-button),
-  .toolbar-actions :deep(.el-button),
-  .sample-import-button {
-    width: 100%;
-  }
-}
-
-
-.panel-header,
-.section-title-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  align-items: flex-start;
-}
-
-.panel-header {
-  flex-wrap: wrap;
-}
-
-.panel-header-copy h1,
-.section-title-row h3 {
-  margin: 0;
-  color: #1d3555;
-}
-
-.panel-header-copy p,
-.section-title-row p {
-  margin: 6px 0 0;
-  color: #64748b;
-  line-height: 1.55;
-}
-
-.header-tags,
-.header-actions,
-.section-header-tools,
-.section-mini-stats,
-.section-action-group,
-.binding-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.header-actions,
-.section-header-tools {
-  justify-content: flex-end;
-}
-
-.header-tag,
-.mini-stat-chip,
-.overview-note {
-  display: inline-flex;
-  align-items: center;
-  min-height: 30px;
-  padding: 0 12px;
-  border-radius: var(--radius-full);
-  background: rgba(15, 93, 216, 0.08);
-  color: #175cd3;
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-
-.mini-stat-chip--button {
-  border: 1px solid rgba(15, 93, 216, 0.12);
-  cursor: pointer;
-  font: inherit;
-}
-
-.mini-stat-chip--active {
-  border-color: rgba(15, 93, 216, 0.32);
-  background: rgba(15, 93, 216, 0.14);
-}
-
-.overview-card,
-.table-card,
-.empty-block,
-.error-copy {
-  padding: 16px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-  box-shadow: none;
-}
-
-.table-card--dense {
-  padding: 14px 16px 16px;
-}
-
-.overview-card {
-  display: grid;
-  gap: 12px;
-}
-
-.overview-file {
-  display: grid;
-  gap: 6px;
-}
-
-.overview-label {
-  color: #64748b;
-  font-size: var(--text-xs);
-}
-
-.overview-file code {
-  display: inline-flex;
-  width: 100%;
-  max-width: 100%;
-  padding: 8px 12px;
-  border-radius: 14px;
-  background: rgba(15, 23, 42, 0.05);
-  color: #1d3555;
-  word-break: break-all;
-}
-
-.overview-stats {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 10px;
-}
-
-.overview-stat {
-  display: grid;
-  gap: 4px;
-  padding: 12px 14px;
-  border-radius: 16px;
-  background: #f8fafc;
-  border: 1px solid rgba(148, 163, 184, 0.14);
-}
-
-.overview-stat span {
-  color: #64748b;
-  font-size: var(--text-xs);
-}
-
-.overview-stat strong {
-  color: #1d3555;
-  font-size: var(--text-2xl);
-  line-height: 1;
-}
-
-.overview-notes {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.section-title-row--tight {
-  align-items: center;
-}
-
-.lookup-toolbar {
-  display: grid;
-  grid-template-columns: minmax(180px, 1fr) 110px 130px 180px;
-  gap: 12px;
-  align-items: end;
-}
-
-.field-wide {
-  grid-column: span 2;
-}
-
-.field-block {
-  min-width: 0;
-  display: grid;
-  gap: 6px;
-}
-
-.field-block span {
-  color: #1d3555;
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-
-.field-block--action {
-  align-content: end;
-}
-
-.field-block--action :deep(.el-button) {
-  width: 100%;
-}
-
-.text-input {
-  width: 100%;
-  min-height: 36px;
-  padding: 8px 12px;
-  border: 1px solid rgba(86, 108, 138, 0.22);
-  border-radius: 14px;
-  background: #fff;
-  color: #1d3555;
-  outline: none;
-  transition: border-color 0.16s ease, box-shadow 0.16s ease;
-}
-
-.text-input:focus {
-  border-color: rgba(15, 93, 216, 0.42);
-  box-shadow: 0 0 0 4px rgba(15, 93, 216, 0.08);
-}
-
-.text-input--readonly,
-.text-input:disabled {
-  background: #f8fafc;
-  color: #64748b;
-}
-
-.textarea-input {
-  min-height: 72px;
-  resize: vertical;
-}
-
-.field-help,
-.toolbar-hint,
-.cell-subtle {
-  color: #64748b;
-  font-size: var(--text-xs);
-  line-height: 1.45;
-}
-
-.toolbar-hint {
-  margin: 10px 0 0;
-}
-
-.error-copy,
-.validation-banner,
-.binding-inline-error {
-  color: #b42318;
-}
-
-.validation-banner,
-.binding-inline-error {
-  margin: 10px 0 0;
-  padding: 10px 12px;
-  border-radius: 14px;
-  background: #fff5f4;
-  border: 1px solid rgba(180, 35, 24, 0.14);
-  font-size: var(--text-sm);
-}
-
-.data-table {
-  width: 100%;
-  margin-top: 12px;
-  border-collapse: collapse;
-}
-
-.data-table th,
-.data-table td {
-  padding: 11px 10px;
-  text-align: left;
-  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
-  vertical-align: top;
-}
-
-.data-table th {
-  color: #64748b;
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-
-.cell-stack {
-  display: grid;
-  gap: 4px;
-}
-
-.cell-stack strong {
-  color: #1d3555;
-}
-
-.empty-inline {
-  padding: 14px;
-  color: #64748b;
-  text-align: center;
-}
-
-.binding-card {
-  margin-top: 12px;
-  padding: 14px;
-  border-radius: 16px;
-  background: #f8fafc;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  box-shadow: none;
-}
-
-.binding-card--invalid {
-  border-color: rgba(220, 38, 38, 0.3);
-  box-shadow: 0 0 0 4px rgba(254, 226, 226, 0.85);
-}
-
-.binding-header {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: flex-start;
-  margin-bottom: 10px;
-}
-
-.binding-summary {
-  display: grid;
-  gap: 4px;
-}
-
-.binding-title-row {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
-  color: #1d3555;
-}
-
-.binding-subtle {
-  color: #64748b;
-  font-size: var(--text-sm);
-}
-
-.binding-status-chip {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--radius-full);
-  padding: 2px 10px;
-  background: #fff1f2;
-  color: #be123c;
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-
-.binding-status-chip--done {
-  background: #ecfdf3;
-  color: #027a48;
-}
-
-.collapse-button {
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.96);
-  color: #1d3555;
-  border-radius: var(--radius-full);
-  padding: 7px 12px;
-  cursor: pointer;
-}
-
-.binding-collapsed-preview {
-  display: grid;
-  gap: 6px;
-  padding: 10px 12px;
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.78);
-  color: #64748b;
-  font-size: var(--text-xs);
-}
-
-.binding-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.mapping-editor {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
-  gap: 12px;
-  align-items: stretch;
-}
-
-.mapping-panel {
-  display: grid;
-  align-content: start;
-  gap: 12px;
-  padding: 14px;
-  border-radius: 16px;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-}
-
-.mapping-panel--external {
-  background: rgba(239, 246, 255, 0.72);
-}
-
-.mapping-panel--internal {
-  background: rgba(255, 255, 255, 0.86);
-  border-color: rgba(15, 93, 216, 0.16);
-}
-
-.mapping-panel-head {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  align-items: baseline;
-}
-
-.mapping-panel-head strong {
-  color: #1d3555;
-  font-size: 15px;
-}
-
-.mapping-panel-head span {
-  color: #64748b;
-  font-size: var(--text-xs);
-}
-
-.mapping-grid,
-.mapping-extra {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 12px;
-}
-
-.mapping-arrow {
-  display: grid;
-  place-items: center;
-  color: #175cd3;
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-
-.mapping-arrow span {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 30px;
-  min-width: 54px;
-  padding: 0 10px;
-  border-radius: var(--radius-full);
-  background: rgba(15, 93, 216, 0.08);
-  border: 1px solid rgba(15, 93, 216, 0.14);
-}
-
-.mapping-extra {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px dashed rgba(86, 108, 138, 0.18);
-}
-
-.checkbox-line {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: #1d3555;
-  font-size: var(--text-sm);
-}
-
-.binding-actions {
-  justify-content: space-between;
-  margin-top: 12px;
-}
-
-.admin-panel :deep(.el-button) {
-  min-height: 34px;
-  border-radius: var(--radius-full);
-}
-
-.admin-panel :deep(.el-button--primary) {
-  --el-button-bg-color: #3a91f7;
-  --el-button-border-color: #3a91f7;
-  --el-button-hover-bg-color: #0f5dd8;
-  --el-button-hover-border-color: #0f5dd8;
-}
-
-@media (max-width: 900px) {
-  .overview-stats,
-  .lookup-toolbar,
-  .binding-grid,
-  .mapping-editor {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .mapping-arrow {
-    display: none;
-  }
-
-  .field-wide {
-    grid-column: span 2;
-  }
-}
-
-@media (max-width: 640px) {
-  .panel-header,
-  .section-title-row,
-  .section-header-tools,
-  .binding-actions,
-  .binding-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .overview-stats,
-  .lookup-toolbar,
-  .binding-grid,
-  .mapping-editor,
-  .mapping-grid,
-  .mapping-extra {
-    grid-template-columns: 1fr;
-  }
-
-  .field-wide {
-    grid-column: auto;
-  }
-}
-</style>
+<style scoped src="./AdminKuaishouCloudFulfillment.css"></style>
diff --git a/apps/frontend/src/views/admin/AdminOrdersView.vue b/apps/frontend/src/views/admin/AdminOrdersView.vue
index 77c9e7f1..7d908e57 100644
--- a/apps/frontend/src/views/admin/AdminOrdersView.vue
+++ b/apps/frontend/src/views/admin/AdminOrdersView.vue
@@ -114,28 +114,22 @@ onMounted(loadOrders)
       </template>
     </AdminPageHeader>
 
-    <section class="filter-panel">
+    <el-card shadow="never" class="section-card">
+      <template #header>
+        <div class="card-header">
+          <span class="card-title">查询订单</span>
+          <span class="card-desc">按平台订单号、支付状态、SKU 和日期范围筛选。</span>
+        </div>
+      </template>
       <div class="filter-grid">
-        <el-input
-          v-model="platformOrderId"
-          class="filter-control filter-control--order"
-          placeholder="平台订单号（模糊匹配）"
-          clearable
-          @keyup.enter="loadOrders(1)"
-        />
-        <el-select v-model="payStatus" class="filter-control filter-control--status" placeholder="支付状态" clearable>
+        <el-input v-model="platformOrderId" class="filter-control" placeholder="平台订单号（模糊匹配）" clearable @keyup.enter="loadOrders(1)" />
+        <el-select v-model="payStatus" class="filter-control" 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"
-          class="filter-control filter-control--sku"
-          placeholder="SKU，如 dnf-cdk-a"
-          clearable
-          @keyup.enter="loadOrders(1)"
-        />
+        <el-input v-model="skuCode" class="filter-control" placeholder="SKU，如 dnf-cdk-a" clearable @keyup.enter="loadOrders(1)" />
         <el-date-picker
           v-model="dateRange"
-          class="filter-control date-range-filter"
+          class="filter-control"
           type="daterange"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
@@ -147,9 +141,8 @@ onMounted(loadOrders)
           <el-button round type="primary" @click="loadOrders(1)">查询</el-button>
         </div>
       </div>
-    </section>
+    </el-card>
 
-    <!-- 摘要 -->
     <div v-if="!loading && items.length > 0" class="summary-strip">
       <span class="summary-title">当前页</span>
       <span class="summary-metric" data-tone="success">已支付 <strong>{{ summary.paidCount }}</strong></span>
@@ -160,7 +153,7 @@ onMounted(loadOrders)
 
     <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
 
-    <section class="orders-section" v-loading="loading" element-loading-text="订单列表加载中">
+    <el-card shadow="never" class="section-card" v-loading="loading" element-loading-text="订单列表加载中">
       <template v-if="items.length === 0 && !loading">
         <el-empty description="当前筛选条件下暂无订单" :image-size="60" />
       </template>
@@ -171,78 +164,74 @@ onMounted(loadOrders)
           <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
         </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="order-no" :title="item.platformOrderId">
-                  {{ item.platformOrderId }}
+        <el-table :data="items" stripe size="small" class="orders-table">
+          <el-table-column label="订单信息" min-width="220">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <RouterLink :to="`/admin/orders/${row.orderId}`" class="order-no" :title="row.platformOrderId">
+                  {{ row.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="cell-meta-row">
+                  <span class="compact-chip">{{ row.platform || '-' }}</span>
+                  <span class="compact-chip">{{ resolveShopLabel(row) }}</span>
+                  <span class="compact-chip compact-chip--muted">买家 {{ resolveBuyerLabel(row) }}</span>
                 </div>
               </div>
-              <div class="order-top-actions">
-                <AdminStatusTag :status="item.payStatus" :show-raw="false" />
-                <RouterLink :to="`/admin/orders/${item.orderId}`" class="detail-link">详情</RouterLink>
+            </template>
+          </el-table-column>
+          <el-table-column label="商品摘要" min-width="180">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-title" :title="resolveItemSummary(row)">{{ resolveItemSummary(row) }}</span>
+                <span class="cell-subline">{{ row.itemCount }} 项，合计 {{ row.totalQuantity }} 件</span>
+                <span class="cell-subline" :title="resolveBindingSummary(row)">{{ resolveBindingSummary(row) }}</span>
               </div>
-            </div>
-
-            <div class="order-row-grid">
-              <section class="order-field order-field--buyer">
-                <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>
-                </div>
-              </section>
-
-              <section class="order-field order-field--item">
-                <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-field order-field--status">
-                <span class="section-label">交付状态</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="支付/状态" min-width="140">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <AdminStatusTag :status="row.payStatus" :show-raw="false" />
                 <div class="status-stack">
-                  <AdminStatusTag :status="item.orderStatus" :show-raw="false" />
-                  <AdminStatusTag :status="item.systemBindingStatus" :show-raw="false" />
-                  <AdminStatusTag :status="item.userBindingStatus" :show-raw="false" />
-                  <span class="follow-up-chip" :data-tone="resolveFollowUpTone(item)">{{ resolveFollowUpText(item) }}</span>
+                  <AdminStatusTag :status="row.orderStatus" :show-raw="false" />
                 </div>
-              </section>
-
-              <section class="order-field order-field--amount">
-                <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>
-                  <span class="info-subline">更新 {{ formatAdminDateTime(item.updatedAt) }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="交付状态" min-width="230">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <div class="status-stack">
+                  <AdminStatusTag :status="row.systemBindingStatus" :show-raw="false" />
+                  <AdminStatusTag :status="row.userBindingStatus" :show-raw="false" />
                 </div>
-              </section>
-
-              <section class="order-field order-field--tasks">
-                <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 class="follow-up-chip" :data-tone="resolveFollowUpTone(row)">{{ resolveFollowUpText(row) }}</span>
+                <div class="progress-row-stack">
+                  <span class="progress-chip" :data-tone="resolveBindingTone(row.completedBindingTaskCount, row.taskCount)">
+                    完整 {{ row.completedBindingTaskCount }}/{{ row.taskCount }}
                   </span>
-                  <span class="progress-chip" :data-tone="resolveBindingTone(item.systemBoundTaskCount, item.taskCount)">
-                    系统绑定 {{ item.systemBoundTaskCount }}/{{ item.taskCount }}
+                  <span class="progress-chip" :data-tone="resolveBindingTone(row.systemBoundTaskCount, row.taskCount)">
+                    系统 {{ row.systemBoundTaskCount }}/{{ row.taskCount }}
                   </span>
                 </div>
-              </section>
-            </div>
-          </article>
-        </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="金额 / 时间" min-width="180">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-title amount-text">{{ row.totalAmount }} {{ row.currency }}</span>
+                <span class="cell-subline">支付 {{ formatAdminDateTime(row.paidAt) }}</span>
+                <span class="cell-subline">更新 {{ formatAdminDateTime(row.updatedAt) }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="80" align="center">
+            <template #default="{ row }">
+              <RouterLink :to="`/admin/orders/${row.orderId}`" class="detail-link">详情</RouterLink>
+            </template>
+          </el-table-column>
+        </el-table>
 
         <el-pagination
           v-if="pagination.total > 0"
@@ -254,7 +243,7 @@ onMounted(loadOrders)
           @current-change="loadOrders"
         />
       </template>
-    </section>
+    </el-card>
   </div>
 </template>
 
@@ -262,41 +251,33 @@ onMounted(loadOrders)
 .orders-page { display: grid; gap: 0; }
 
 .total-badge {
-  min-height: 34px;
-  padding: 0 14px;
-  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;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid rgba(37, 89, 167, 0.14);
+  border-radius: var(--radius-full);
+  background: rgba(37, 89, 167, 0.08);
+  color: #2559a7;
+  font-size: var(--text-xs);
+  font-weight: 700;
 }
 
-.filter-panel {
-  margin-top: var(--space-4);
-  padding: 0;
-}
+.section-card { margin-top: var(--space-4); }
+
+.card-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-end; }
+.card-title { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
+.card-desc { color: var(--text-secondary); font-size: var(--text-sm); }
 
 .filter-grid {
   display: grid;
-  grid-template-columns: minmax(220px, 1.25fr) minmax(136px, 0.6fr) minmax(220px, 1fr) minmax(390px, 1.55fr) auto;
+  grid-template-columns: minmax(200px, 1fr) minmax(130px, 0.6fr) minmax(180px, 0.9fr) minmax(320px, 1.4fr) minmax(150px, 0.55fr);
   gap: var(--space-3);
   align-items: center;
 }
 
 .filter-control { width: 100%; min-width: 0; }
-.date-range-filter {
-  width: 100%;
-  min-width: 0;
-}
-.filter-buttons {
-  display: flex;
-  gap: 10px;
-  min-width: 156px;
-  justify-content: flex-end;
-}
+.filter-buttons { display: flex; gap: 10px; min-width: 156px; justify-content: flex-end; }
 
 .summary-strip {
   display: flex;
@@ -308,13 +289,7 @@ onMounted(loadOrders)
   flex-wrap: wrap;
 }
 
-.summary-title {
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  font-weight: 700;
-  margin-right: 2px;
-}
-
+.summary-title { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; margin-right: 2px; }
 .summary-metric {
   display: inline-flex;
   align-items: center;
@@ -328,7 +303,6 @@ onMounted(loadOrders)
   font-size: var(--text-xs);
   font-weight: 700;
 }
-
 .summary-metric strong { color: var(--text-primary); font-size: var(--text-base); line-height: 1; }
 .summary-metric[data-tone='success'] { color: var(--color-success-dark); background: var(--color-success-light); border-color: #bbf7d0; }
 .summary-metric[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
@@ -336,47 +310,35 @@ onMounted(loadOrders)
 .summary-metric[data-tone='warning'] { color: var(--color-warning-dark); background: var(--color-warning-light); border-color: #fed7aa; }
 .summary-metric[data-tone='muted'] { color: var(--text-secondary); background: #f8fafc; border-color: var(--border-default); }
 
-.orders-section {
-  margin-top: var(--space-4);
-  overflow: visible;
-}
-
 .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); }
 
-.order-list { display: grid; gap: var(--space-3); }
-
-.order-card {
-  display: grid;
-  gap: 12px;
-  padding: 12px 14px;
-  border-radius: var(--radius-md);
-  background: rgba(247, 250, 255, 0.42);
+.orders-table {
+  width: 100%;
+  overflow: hidden;
   border: 1px solid var(--border-default);
-  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+  border-radius: var(--radius-sm);
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: rgba(239, 246, 255, 0.72);
+  --el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
+  --el-table-border-color: rgba(86, 108, 138, 0.1);
+}
+.orders-table :deep(.el-table__inner-wrapper::before) { display: none; }
+.orders-table :deep(th.el-table__cell) {
+  height: 42px;
+  background: var(--el-table-header-bg-color);
+  color: var(--text-secondary);
+  font-weight: 700;
 }
 
-.order-card:hover {
-  border-color: var(--border-hover);
-  background: rgba(247, 250, 255, 0.68);
-  box-shadow: 0 1px 4px rgba(30, 49, 78, 0.04);
-}
-
-.order-card-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-}
-
-.order-identity { min-width: 0; display: grid; gap: var(--space-2); }
+.cell-stack { display: grid; gap: 5px; }
 
 .order-no {
   display: inline-block;
   max-width: 100%;
-  font-size: var(--text-xl);
-  line-height: 1.1;
+  font-size: var(--text-base);
   font-weight: 800;
   color: var(--text-primary);
   overflow: hidden;
@@ -386,30 +348,7 @@ onMounted(loadOrders)
 }
 .order-no:hover { color: var(--color-primary-dark); }
 
-.order-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
-
-.order-top-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  flex-shrink: 0;
-}
-
-.detail-link {
-  display: inline-flex;
-  align-items: center;
-  min-height: 26px;
-  padding: 0 10px;
-  border-radius: var(--radius-full);
-  border: 1px solid var(--border-default);
-  color: var(--color-primary-dark);
-  background: var(--color-primary-light);
-  font-size: var(--text-xs);
-  font-weight: 700;
-  text-decoration: none;
-}
-
-.detail-link:hover { border-color: var(--border-hover); background: #dbeafe; }
+.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
 
 .compact-chip {
   display: inline-flex;
@@ -424,43 +363,21 @@ onMounted(loadOrders)
   font-size: var(--text-xs);
   font-weight: 600;
 }
-
 .compact-chip--muted { color: var(--text-muted); }
 
-.order-row-grid {
-  display: grid;
-  grid-template-columns: minmax(150px, 0.95fr) minmax(190px, 1.25fr) minmax(230px, 1.35fr) minmax(170px, 1fr) minmax(150px, 0.9fr);
-  column-gap: var(--space-4);
-  row-gap: var(--space-3);
-  min-width: 0;
-  align-items: start;
-}
-
-.order-field {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-  padding-top: 10px;
-  border-top: 1px solid rgba(86, 108, 138, 0.1);
-}
-
-.section-label {
-  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-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); }
+.cell-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
+.cell-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
 .amount-text { white-space: nowrap; }
 
 .status-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
 .status-stack :deep(.el-tag) { max-width: 100%; }
 
-.task-progress-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.progress-row-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-top: 2px;
+}
 
 .progress-chip,
 .follow-up-chip {
@@ -474,7 +391,6 @@ onMounted(loadOrders)
   border: 1px solid transparent;
   white-space: nowrap;
 }
-
 .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; }
@@ -482,27 +398,32 @@ onMounted(loadOrders)
 .follow-up-chip[data-tone='warning'] { color: #b54708; background: var(--color-warning-light); border-color: #fedf89; }
 .follow-up-chip[data-tone='danger'] { color: var(--color-danger-dark); background: var(--color-danger-light); border-color: #fecaca; }
 
+.detail-link {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--border-default);
+  color: var(--color-primary-dark);
+  background: var(--color-primary-light);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  text-decoration: none;
+}
+.detail-link:hover { border-color: var(--border-hover); background: #dbeafe; }
+
 @media (max-width: 1200px) {
-  .filter-grid {
-    grid-template-columns: minmax(200px, 1fr) minmax(132px, 0.56fr) minmax(200px, 0.9fr) minmax(340px, 1.25fr) auto;
-  }
-  .filter-buttons { justify-content: flex-end; }
-  .order-row-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 }
 @media (max-width: 900px) {
   .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .date-range-filter { grid-column: span 2; }
   .filter-buttons { justify-content: flex-start; }
-  .order-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 @media (max-width: 640px) {
   .filter-grid { grid-template-columns: 1fr; }
-  .date-range-filter { grid-column: auto; }
   .filter-buttons { width: 100%; }
   .filter-buttons :deep(.el-button) { flex: 1 1 auto; }
-  .order-card-top { flex-direction: column; align-items: flex-start; }
-  .order-top-actions { width: 100%; justify-content: space-between; }
-  .order-row-grid { grid-template-columns: 1fr; }
-  .order-no { font-size: 18px; }
+  .order-no { font-size: var(--text-base); }
 }
 </style>
diff --git a/apps/frontend/src/views/admin/AdminTaskDetail.css b/apps/frontend/src/views/admin/AdminTaskDetail.css
new file mode 100644
index 00000000..17ea470c
--- /dev/null
+++ b/apps/frontend/src/views/admin/AdminTaskDetail.css
@@ -0,0 +1,487 @@
+.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: var(--text-primary);
+}
+
+.info-card h3 {
+  margin: 0 0 var(--space-3);
+  color: var(--text-primary);
+}
+
+.hero-card {
+  display: grid;
+  gap: var(--space-4);
+  background:
+    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: var(--text-primary);
+  font-size: 30px;
+  line-height: 1.1;
+}
+
+.hero-copy p,
+.hero-inline span,
+.hero-link-row span {
+  color: var(--text-secondary);
+}
+
+.hero-eyebrow {
+  color: var(--color-primary);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.hero-meta-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: var(--space-3);
+}
+
+.hero-metric {
+  padding: 14px var(--space-4);
+  border-radius: 18px;
+  border: 1px solid var(--border-default);
+  background: rgba(255,255,255,.82);
+}
+
+.hero-metric span {
+  display: block;
+  margin-bottom: var(--space-2);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+}
+
+.hero-metric strong {
+  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: var(--space-3);
+  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 var(--space-4);
+  border-radius: var(--radius-md);
+  background: rgba(248,250,252,.92);
+  border: 1px solid var(--border-default);
+}
+
+.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: var(--space-3);
+  margin-bottom: 14px;
+}
+
+.redeem-summary-card,
+.redeem-attempt-card {
+  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: var(--text-secondary);
+  font-size: var(--text-xs);
+  margin-bottom: 6px;
+}
+
+.redeem-summary-card strong,
+.redeem-attempt-grid strong {
+  color: var(--text-primary);
+}
+
+.redeem-attempts {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.redeem-attempt-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.redeem-outcome {
+  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: var(--space-3);
+  margin-top: var(--space-3);
+}
+
+.redeem-attempt-copy {
+  margin: var(--space-3) 0 0;
+  color: var(--text-primary);
+  line-height: 1.6;
+}
+
+.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: 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;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.flow-head-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.kuaishou-focus-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 14px;
+}
+
+.flow-block {
+  padding: var(--space-4);
+  border-radius: 18px;
+  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: var(--text-primary);
+}
+
+.flow-block p {
+  margin: 10px 0 0;
+  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: var(--text-secondary);
+  font-size: var(--text-xs);
+}
+
+.flow-meta-list strong {
+  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: var(--space-3);
+  align-items: flex-start;
+}
+
+.spotlight-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.flow-copy {
+  margin: var(--space-2) 0 0;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+.flow-collapse {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.checklist-grid {
+  display: grid;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
+}
+
+.checklist-item {
+  padding: 14px var(--space-4);
+  border-radius: var(--radius-md);
+  background: rgba(255,255,255,.84);
+  border: 1px solid var(--border-default);
+}
+
+.checklist-item-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-2);
+}
+
+.checklist-item-head span {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+}
+
+.checklist-item strong {
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+.role-hero {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: var(--space-3);
+  margin-top: var(--space-4);
+}
+
+.role-hero div {
+  padding: 14px var(--space-4);
+  border-radius: var(--radius-md);
+  background: rgba(255,255,255,.88);
+  border: 1px solid var(--border-default);
+}
+
+.role-hero span {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+}
+
+.role-hero strong {
+  color: var(--text-primary);
+  font-size: var(--text-lg);
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.role-warning {
+  margin: 14px 0 0;
+  padding: var(--space-3) 14px;
+  border-radius: 14px;
+  background: var(--color-warning-light);
+  color: #b54708;
+}
+
+.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 var(--border-default);
+  box-shadow: 0 20px 48px rgba(15,23,42,.08);
+}
+
+@media (max-width: 900px) {
+  .hero-inline,
+  .hero-link-row,
+  .flow-card-head,
+  .flow-head-actions,
+  .spotlight-head,
+  .spotlight-actions,
+  .checklist-item-head {
+    display: grid;
+  }
+}
diff --git a/apps/frontend/src/views/admin/AdminTaskDetailView.vue b/apps/frontend/src/views/admin/AdminTaskDetailView.vue
index da4a381c..da783b23 100644
--- a/apps/frontend/src/views/admin/AdminTaskDetailView.vue
+++ b/apps/frontend/src/views/admin/AdminTaskDetailView.vue
@@ -1100,492 +1100,4 @@ onBeforeUnmount(clearScreenshotPreview)
   </section>
 </template>
 
-<style scoped>
-.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: var(--text-primary);
-}
-
-.info-card h3 {
-  margin: 0 0 var(--space-3);
-  color: var(--text-primary);
-}
-
-.hero-card {
-  display: grid;
-  gap: var(--space-4);
-  background:
-    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: var(--text-primary);
-  font-size: 30px;
-  line-height: 1.1;
-}
-
-.hero-copy p,
-.hero-inline span,
-.hero-link-row span {
-  color: var(--text-secondary);
-}
-
-.hero-eyebrow {
-  color: var(--color-primary);
-  font-size: var(--text-xs);
-  font-weight: 700;
-  letter-spacing: .08em;
-  text-transform: uppercase;
-}
-
-.hero-meta-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: var(--space-3);
-}
-
-.hero-metric {
-  padding: 14px var(--space-4);
-  border-radius: 18px;
-  border: 1px solid var(--border-default);
-  background: rgba(255,255,255,.82);
-}
-
-.hero-metric span {
-  display: block;
-  margin-bottom: var(--space-2);
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-}
-
-.hero-metric strong {
-  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: var(--space-3);
-  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 var(--space-4);
-  border-radius: var(--radius-md);
-  background: rgba(248,250,252,.92);
-  border: 1px solid var(--border-default);
-}
-
-.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: var(--space-3);
-  margin-bottom: 14px;
-}
-
-.redeem-summary-card,
-.redeem-attempt-card {
-  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: var(--text-secondary);
-  font-size: var(--text-xs);
-  margin-bottom: 6px;
-}
-
-.redeem-summary-card strong,
-.redeem-attempt-grid strong {
-  color: var(--text-primary);
-}
-
-.redeem-attempts {
-  display: grid;
-  gap: var(--space-3);
-}
-
-.redeem-attempt-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-}
-
-.redeem-outcome {
-  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: var(--space-3);
-  margin-top: var(--space-3);
-}
-
-.redeem-attempt-copy {
-  margin: var(--space-3) 0 0;
-  color: var(--text-primary);
-  line-height: 1.6;
-}
-
-.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: 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;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-}
-
-.flow-head-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.kuaishou-focus-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 14px;
-}
-
-.flow-block {
-  padding: var(--space-4);
-  border-radius: 18px;
-  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: var(--text-primary);
-}
-
-.flow-block p {
-  margin: 10px 0 0;
-  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: var(--text-secondary);
-  font-size: var(--text-xs);
-}
-
-.flow-meta-list strong {
-  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: var(--space-3);
-  align-items: flex-start;
-}
-
-.spotlight-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.flow-copy {
-  margin: var(--space-2) 0 0;
-  color: var(--text-secondary);
-  line-height: 1.6;
-}
-
-.flow-collapse {
-  display: grid;
-  gap: var(--space-3);
-}
-
-.checklist-grid {
-  display: grid;
-  gap: var(--space-3);
-  margin-top: var(--space-4);
-}
-
-.checklist-item {
-  padding: 14px var(--space-4);
-  border-radius: var(--radius-md);
-  background: rgba(255,255,255,.84);
-  border: 1px solid var(--border-default);
-}
-
-.checklist-item-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  margin-bottom: var(--space-2);
-}
-
-.checklist-item-head span {
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-}
-
-.checklist-item strong {
-  color: var(--text-primary);
-  line-height: 1.5;
-}
-
-.role-hero {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: var(--space-3);
-  margin-top: var(--space-4);
-}
-
-.role-hero div {
-  padding: 14px var(--space-4);
-  border-radius: var(--radius-md);
-  background: rgba(255,255,255,.88);
-  border: 1px solid var(--border-default);
-}
-
-.role-hero span {
-  display: block;
-  margin-bottom: 6px;
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-}
-
-.role-hero strong {
-  color: var(--text-primary);
-  font-size: var(--text-lg);
-  line-height: 1.35;
-  word-break: break-word;
-}
-
-.role-warning {
-  margin: 14px 0 0;
-  padding: var(--space-3) 14px;
-  border-radius: 14px;
-  background: var(--color-warning-light);
-  color: #b54708;
-}
-
-.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 var(--border-default);
-  box-shadow: 0 20px 48px rgba(15,23,42,.08);
-}
-
-@media (max-width: 900px) {
-  .hero-inline,
-  .hero-link-row,
-  .flow-card-head,
-  .flow-head-actions,
-  .spotlight-head,
-  .spotlight-actions,
-  .checklist-item-head {
-    display: grid;
-  }
-}
-</style>
+<style scoped src="./AdminTaskDetail.css"></style>
diff --git a/apps/frontend/src/views/admin/AdminTasksView.vue b/apps/frontend/src/views/admin/AdminTasksView.vue
index 4f9064eb..3914e7e6 100644
--- a/apps/frontend/src/views/admin/AdminTasksView.vue
+++ b/apps/frontend/src/views/admin/AdminTasksView.vue
@@ -133,7 +133,13 @@ function resetFilters() {
       </template>
     </AdminPageHeader>
 
-    <section class="filter-panel">
+    <el-card shadow="never" class="section-card">
+      <template #header>
+        <div class="card-header">
+          <span class="card-title">查询任务</span>
+          <span class="card-desc">按状态、任务号、订单号、角色标识、SKU 和日期筛选。</span>
+        </div>
+      </template>
       <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" />
@@ -149,12 +155,12 @@ function resetFilters() {
           <el-button round type="primary" @click="loadTasks(1)">查询</el-button>
         </div>
       </div>
-    </section>
+    </el-card>
 
     <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" />
 
-    <section class="tasks-section" v-loading="loading" element-loading-text="任务列表加载中">
+    <el-card shadow="never" class="section-card" v-loading="loading" element-loading-text="任务列表加载中">
       <template v-if="items.length === 0 && !loading">
         <el-empty description="当前筛选条件下暂无任务" :image-size="60" />
       </template>
@@ -165,115 +171,106 @@ function resetFilters() {
           <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
         </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="task-no" :title="item.taskNo">
-                  {{ item.taskNo }}
+        <el-table :data="items" stripe size="small" class="tasks-table">
+          <el-table-column label="任务 / 商品" min-width="220">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <RouterLink :to="`/admin/tasks/${row.taskId}`" class="task-no" :title="row.taskNo">
+                  {{ row.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="cell-meta-row">
+                  <span class="compact-chip" :title="row.platformOrderId">订单 {{ row.platformOrderId }}</span>
+                  <span class="compact-chip compact-chip--muted">重试 {{ row.retryCount }} 次</span>
+                </div>
+                <span class="cell-title" :title="row.skuName || row.skuCode">{{ row.skuName || row.skuCode }}</span>
+                <span class="cell-subline">SKU {{ row.skuCode || '-' }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="进度" min-width="160">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <div class="progress-row">
+                  <span class="progress-label">任务</span>
+                  <AdminStatusTag :status="row.status" />
+                </div>
+                <div class="progress-row">
+                  <span class="progress-label">系统</span>
+                  <AdminStatusTag :status="row.systemBindingStatus" />
+                </div>
+                <div class="progress-row">
+                  <span class="progress-label">完整</span>
+                  <AdminStatusTag :status="row.userBindingStatus" />
                 </div>
               </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>
-                  <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>
+            </template>
+          </el-table-column>
+          <el-table-column label="角色 / 凭据" min-width="180">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-title" :title="row.roleName || row.roleId || '-'">{{ row.roleName || '-' }}</span>
+                <span class="cell-subline" :title="row.roleId || '-'">角色ID {{ row.roleId || '-' }}</span>
+                <span class="cell-subline">登录 {{ row.loginType || '-' }}</span>
+                <span class="cell-subline" :title="row.inventoryDisplayMasked || '-'">凭据 {{ row.inventoryDisplayMasked || '-' }}</span>
+                <span class="cell-subline" :title="formatBindingRoles(row)">绑定 {{ formatBindingRoles(row) }}</span>
+                <span class="cell-subline cell-subline--strong" :title="formatBindingCountSummary(row)">{{ formatBindingCountSummary(row) }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="时间" min-width="180">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-subline">创建 {{ formatAdminDateTime(row.createdAt) }}</span>
+                <span class="cell-subline">更新 {{ formatAdminDateTime(row.updatedAt) }}</span>
+                <span v-if="row.claimedAt" class="cell-subline">领取 {{ formatAdminDateTime(row.claimedAt) }}</span>
+                <span v-if="row.roleConfirmedAt" class="cell-subline">确认 {{ formatAdminDateTime(row.roleConfirmedAt) }}</span>
+                <span v-if="row.redeemedAt" class="cell-subline">兑换 {{ formatAdminDateTime(row.redeemedAt) }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="异常 / 操作" min-width="220">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-error" :title="row.lastError || '-'">{{ row.lastError || '当前无异常' }}</span>
+                <div class="action-stack">
+                  <el-button
+                    v-if="canManageTaskLifecycle"
+                    :disabled="row.executorKey === 'manual_dispatch' || !['retry_pending', 'manual_review', 'waiting_inventory'].includes(row.status)"
+                    :loading="actionLoadingId === row.taskId"
+                    size="small"
+                    type="danger"
+                    plain
+                    @click="runAction(row.taskId, () => retryAdminTask(row.taskId), '任务已重试', `确认重试任务 ${row.taskNo} 吗？`)"
+                  >
+                    重试
+                  </el-button>
+                  <el-button
+                    v-if="canManageTaskLifecycle && row.executorKey !== 'manual_dispatch'"
+                    size="small"
+                    @click="handleActionCommand('regenerate_claim_link', row)"
+                  >
+                    重发链接
+                  </el-button>
+                  <el-button
+                    v-if="canManageTaskLifecycle"
+                    size="small"
+                    @click="handleActionCommand('manual_review', row)"
+                  >
+                    转人工
+                  </el-button>
+                  <el-button
+                    v-if="canCloseTasks && !['redeemed', 'closed'].includes(row.status)"
+                    size="small"
+                    type="danger"
+                    @click="handleActionCommand('close', row)"
+                  >
+                    关闭任务
+                  </el-button>
                 </div>
-              </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 task-section--actions">
-                <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>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
 
         <el-pagination
           v-if="pagination.total > 0"
@@ -285,7 +282,7 @@ function resetFilters() {
           @current-change="loadTasks"
         />
       </template>
-    </section>
+    </el-card>
   </div>
 </template>
 
@@ -293,19 +290,23 @@ function resetFilters() {
 .tasks-page { display: grid; gap: 0; }
 
 .total-badge {
-  min-height: 34px;
-  padding: 0 14px;
-  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;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid rgba(37, 89, 167, 0.14);
+  border-radius: var(--radius-full);
+  background: rgba(37, 89, 167, 0.08);
+  color: #2559a7;
+  font-size: var(--text-xs);
+  font-weight: 700;
 }
 
-.filter-panel { margin-top: var(--space-4); }
+.section-card { margin-top: var(--space-4); }
+
+.card-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-end; }
+.card-title { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
+.card-desc { color: var(--text-secondary); font-size: var(--text-sm); }
 
 .filter-grid {
   display: grid;
@@ -313,54 +314,39 @@ function resetFilters() {
   gap: var(--space-3);
   align-items: center;
 }
-
 .filter-grid :deep(.el-date-editor) { width: 100%; }
 
-.filter-buttons {
-  display: flex;
-  gap: 10px;
-  justify-content: flex-end;
-  min-width: 156px;
-}
-
-.tasks-section { margin-top: var(--space-4); overflow: visible; }
+.filter-buttons { display: flex; gap: 10px; justify-content: flex-end; min-width: 156px; }
 
 .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); }
 
-.task-list { display: grid; gap: var(--space-3); }
-
-.task-card {
-  display: grid;
-  gap: 14px;
-  padding: 14px;
-  border-radius: var(--radius-md);
-  background: rgba(247, 250, 255, 0.42);
+.tasks-table {
+  width: 100%;
+  overflow: hidden;
   border: 1px solid var(--border-default);
-  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
+  border-radius: var(--radius-sm);
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: rgba(239, 246, 255, 0.72);
+  --el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
+  --el-table-border-color: rgba(86, 108, 138, 0.1);
+}
+.tasks-table :deep(.el-table__inner-wrapper::before) { display: none; }
+.tasks-table :deep(th.el-table__cell) {
+  height: 42px;
+  background: var(--el-table-header-bg-color);
+  color: var(--text-secondary);
+  font-weight: 700;
 }
 
-.task-card:hover {
-  border-color: var(--border-hover);
-  background: rgba(247, 250, 255, 0.68);
-  box-shadow: 0 1px 4px rgba(30, 49, 78, 0.04);
-}
-
-.task-card-top {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--space-3);
-}
-
-.task-identity { min-width: 0; display: grid; gap: var(--space-2); }
+.cell-stack { display: grid; gap: 5px; }
 
 .task-no {
   display: inline-block;
   max-width: 100%;
-  font-size: var(--text-xl);
-  line-height: 1.1;
+  font-size: var(--text-base);
   font-weight: 800;
   color: var(--text-primary);
   overflow: hidden;
@@ -370,14 +356,14 @@ function resetFilters() {
 }
 .task-no:hover { color: var(--color-primary-dark); }
 
-.task-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
 
 .compact-chip {
   display: inline-flex;
   align-items: center;
-  min-height: 28px;
+  min-height: 24px;
   max-width: 100%;
-  padding: 0 10px;
+  padding: 0 9px;
   border-radius: var(--radius-full);
   background: #f4f7fb;
   border: 1px solid var(--border-default);
@@ -385,51 +371,16 @@ function resetFilters() {
   font-size: var(--text-xs);
   font-weight: 600;
 }
-
 .compact-chip--muted { color: var(--text-muted); }
 
-.task-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.15fr);
-  gap: var(--space-3);
-  min-width: 0;
-}
+.cell-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
+.cell-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
+.cell-subline--strong { color: var(--text-primary); font-weight: 600; }
 
-.task-section {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-  padding-top: 10px;
-  border-top: 1px solid rgba(86, 108, 138, 0.1);
-}
-
-.task-section--actions {
-  grid-column: 1 / -1;
-  grid-template-columns: 112px minmax(0, 1fr);
-  align-items: center;
-  gap: var(--space-3);
-}
-
-.section-label {
-  color: var(--text-muted);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.progress-cell { display: grid; gap: var(--space-2); min-width: 0; }
 .progress-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
-.progress-row :deep(.el-tag) {
-  min-width: 0;
-  max-width: calc(100% - 42px);
-}
-.progress-row :deep(.el-tag__content) {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+.progress-row :deep(.el-tag) { min-width: 0; max-width: calc(100% - 42px); }
+.progress-row :deep(.el-tag__content) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
 .progress-label {
   display: inline-flex;
   align-items: center;
@@ -446,56 +397,22 @@ function resetFilters() {
   flex: 0 0 auto;
 }
 
-.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;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--space-3);
-  align-items: center;
-  min-width: 0;
-}
-.action-cell {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-  align-items: center;
-  justify-content: flex-end;
-  max-width: 360px;
-}
-.action-cell :deep(.el-button) {
-  flex: 0 0 auto;
-  margin-left: 0;
-}
+.action-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
+.action-stack :deep(.el-button) { flex: 0 0 auto; margin-left: 0; }
 
 @media (max-width: 1200px) {
-  .task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  .task-section--actions {
-    grid-template-columns: 1fr;
-    align-items: start;
-  }
-  .task-end { grid-template-columns: 1fr; }
-  .action-cell { justify-content: flex-start; max-width: none; }
   .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .filter-buttons { justify-content: flex-start; }
 }
 @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-buttons { justify-content: flex-start; }
 }
 @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; }
+  .task-no { font-size: var(--text-base); }
 }
 </style>