From 7b274d4ab8532445e53e00bc0a73c6251023bd98 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Thu, 20 Aug 2026 17:37:54 +0800
Subject: [PATCH] feat(admin): modernize business views including listings,
 review, users, orders, pickups, and mohong

---
 .../admin/views/AdminListingDetailView.vue    |  152 +-
 .../admin/views/AdminListingReviewView.vue    | 1290 +++++++++-----
 .../admin/views/AdminListingsView.vue         | 1341 ++++++++++-----
 .../admin/views/AdminMohongCategoriesView.vue |  518 +++++-
 .../admin/views/AdminMohongConfigView.vue     |  364 +++-
 .../admin/views/AdminMohongOrdersView.vue     |  857 ++++++++--
 .../admin/views/AdminMohongProductsView.vue   | 1014 ++++++++---
 .../admin/views/AdminOrderDetailView.vue      |  280 +--
 .../features/admin/views/AdminOrdersView.vue  |  872 ++++++++--
 .../admin/views/AdminPickupDetailView.vue     |  140 +-
 .../features/admin/views/AdminPickupView.vue  | 1282 +++++++++-----
 .../admin/views/AdminRefundReviewView.vue     |  753 +++++++--
 .../features/admin/views/AdminUsersView.vue   | 1503 ++++++++++++-----
 .../orders/composables/useOrderActions.ts     |    4 +-
 14 files changed, 7567 insertions(+), 2803 deletions(-)

diff --git a/frontend/src/features/admin/views/AdminListingDetailView.vue b/frontend/src/features/admin/views/AdminListingDetailView.vue
index e98b51b..c90cb71 100644
--- a/frontend/src/features/admin/views/AdminListingDetailView.vue
+++ b/frontend/src/features/admin/views/AdminListingDetailView.vue
@@ -587,51 +587,52 @@ async function openScreenshot(url: string) {
 </script>
 
 <template>
-  <section class="page" v-loading="loading">
-    <div v-if="listing" class="listing-detail-header">
-      <div class="listing-title-block">
-        <div class="listing-code-line">
-          <span>商品编号</span>
-          <strong>{{ formatListingCode(listing) }}</strong>
+  <div class="finance-page-container" v-loading="loading">
+    <!-- 头部卡片 -->
+    <header v-if="listing" class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <span>ITEM CODE: {{ formatListingCode(listing) }}</span>
+          </div>
+          <h1 class="page-title">{{ listing.title || '商品详情' }}</h1>
+          <p class="page-subtitle">
+            {{ listing.server_region || '-' }} · {{ listing.rank_level || '-' }} ·
+            {{ listing.login_platform || '-' }} · 账号 {{ listing.account_id }}
+            <span v-if="listing.is_external_upload">
+              · 外部 API ({{ listing.source_channel || '未填写' }})</span
+            >
+          </p>
         </div>
-        <h1>{{ listing.title || '商品详情' }}</h1>
-        <div class="listing-subtitle">
-          <span>{{ listing.server_region || '-' }}</span>
-          <span>{{ listing.rank_level || '-' }}</span>
-          <span>{{ listing.login_platform || '-' }}</span>
-          <span>账号 {{ listing.account_id }}</span>
-          <span v-if="listing.is_external_upload"
-            >外部 API · {{ listing.source_channel || '未填写' }}</span
+        <div class="toolbar-actions">
+          <el-button :icon="CopyDocument" @click="copyListingCode">复制编号</el-button>
+          <el-button @click="goBackToList">返回列表</el-button>
+          <el-button
+            v-if="canAdjustExternal"
+            type="primary"
+            :icon="EditPen"
+            :disabled="externalAdjustmentLocked"
+            @click="openExternalAdjustment"
           >
+            调整商品
+          </el-button>
+          <el-button
+            class="transfer-owner-trigger"
+            type="success"
+            :disabled="!canTransfer"
+            @click="openTransfer"
+          >
+            转移所有权
+          </el-button>
+          <el-button type="warning" :disabled="!canOperate" @click="openAction('offline')">
+            强制下架
+          </el-button>
+          <el-button type="danger" :disabled="!canOperate" @click="openAction('abnormal')">
+            标记异常
+          </el-button>
         </div>
       </div>
-      <div class="toolbar-actions">
-        <el-button :icon="CopyDocument" @click="copyListingCode">复制编号</el-button>
-        <el-button @click="goBackToList">返回列表</el-button>
-        <el-button
-          v-if="canAdjustExternal"
-          type="primary"
-          :icon="EditPen"
-          :disabled="externalAdjustmentLocked"
-          @click="openExternalAdjustment"
-        >
-          调整商品
-        </el-button>
-        <el-button
-          class="transfer-owner-trigger"
-          type="success"
-          :disabled="!canTransfer"
-          @click="openTransfer"
-          >转移所有权</el-button
-        >
-        <el-button type="warning" :disabled="!canOperate" @click="openAction('offline')"
-          >强制下架</el-button
-        >
-        <el-button type="danger" :disabled="!canOperate" @click="openAction('abnormal')"
-          >标记异常</el-button
-        >
-      </div>
-    </div>
+    </header>
 
     <el-dialog
       v-model="externalAdjustVisible"
@@ -1024,10 +1025,77 @@ async function openScreenshot(url: string) {
         </el-button>
       </template>
     </el-dialog>
-  </section>
+  </div>
 </template>
 
 <style scoped>
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
+}
+
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #2563eb;
+  background: #eff6ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
 .listing-detail-header {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
diff --git a/frontend/src/features/admin/views/AdminListingReviewView.vue b/frontend/src/features/admin/views/AdminListingReviewView.vue
index 6eed773..bd23802 100644
--- a/frontend/src/features/admin/views/AdminListingReviewView.vue
+++ b/frontend/src/features/admin/views/AdminListingReviewView.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { readError } from '@/shared/utils/error'
-import { Check, Close, Picture, Refresh, Search, WarningFilled } from '@element-plus/icons-vue'
+import {
+  Check,
+  Close,
+  Connection,
+  DocumentChecked,
+  Picture,
+  Refresh,
+  Search,
+  WarningFilled,
+} from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 
@@ -534,10 +543,6 @@ function extractObjectKey(url: string) {
 async function loadScreenshotPreviews(row: Listing) {
   for (const url of row.screenshot_urls || []) {
     if (previewURLs[url]) continue
-    if (isDefaultScreenshot(url) || !extractObjectKey(url)) {
-      previewURLs[url] = url
-      continue
-    }
     try {
       const blob = await fetchAdminFileBlob(extractObjectKey(url))
       const objectURL = URL.createObjectURL(blob)
@@ -569,71 +574,122 @@ async function openScreenshot(url: string) {
 </script>
 
 <template>
-  <section class="page review-page">
-    <div class="page-header-row review-header">
-      <div class="page-header">
-        <p class="eyebrow">Review</p>
-        <h1>商品审核</h1>
-        <p>集中核对账号资产、上传来源、价格、押金和截图风险。</p>
+  <div class="finance-page-container review-page">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><DocumentChecked /></el-icon>
+            <span>LISTING REVIEW WORKSTATION</span>
+          </div>
+          <h1 class="page-title">商品审核工作台</h1>
+          <p class="page-subtitle">
+            集中核对账号资产真实性、外部 API
+            上传渠道、平台加价规则与押金设置，快速排查截图及封禁风险。
+          </p>
+        </div>
+        <div class="toolbar-actions">
+          <el-button :icon="Refresh" :loading="loading" @click="loadListings">刷新队列</el-button>
+        </div>
       </div>
-      <div class="toolbar-actions">
-        <el-button :icon="Refresh" :loading="loading" @click="loadListings">刷新</el-button>
-      </div>
-    </div>
+    </header>
 
-    <div class="review-summary">
-      <button
-        class="summary-card"
+    <!-- 汇总指标卡片（支持点击切换快捷筛选） -->
+    <section class="summary-metric-grid">
+      <div
+        class="metric-card metric-card--total clickable"
         :class="{ active: filters.risk === 'all' }"
         @click="filters.risk = 'all'"
       >
-        <span>待审核</span>
-        <strong>{{ listings.length }}</strong>
-      </button>
-      <button
-        class="summary-card"
+        <div class="metric-icon-wrap indigo">
+          <el-icon><DocumentChecked /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">待审核商品</span>
+          <strong class="metric-val indigo-val">{{ listings.length }} 件</strong>
+          <span class="metric-sub-pill info">全量审核队列</span>
+        </div>
+      </div>
+
+      <div
+        class="metric-card metric-card--external clickable"
         :class="{ active: filters.risk === 'external' }"
         @click="filters.risk = 'external'"
       >
-        <span>外部上传</span>
-        <strong>{{ listings.filter(isExternalUpload).length }}</strong>
-      </button>
-      <button
-        class="summary-card"
+        <div class="metric-icon-wrap blue">
+          <el-icon><Connection /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">外部 API 上传</span>
+          <strong class="metric-val blue-val"
+            >{{ listings.filter(isExternalUpload).length }} 件</strong
+          >
+          <span class="metric-sub-pill primary">三方渠道入库</span>
+        </div>
+      </div>
+
+      <div
+        class="metric-card metric-card--default-img clickable"
         :class="{ active: filters.risk === 'defaultImage' }"
         @click="filters.risk = 'defaultImage'"
       >
-        <span>默认截图</span>
-        <strong>{{ listings.filter(hasDefaultScreenshot).length }}</strong>
-      </button>
-      <button
-        class="summary-card"
+        <div class="metric-icon-wrap amber">
+          <el-icon><Picture /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">默认截图待核</span>
+          <strong class="metric-val amber-val"
+            >{{ listings.filter(hasDefaultScreenshot).length }} 件</strong
+          >
+          <span class="metric-sub-pill warning">需核验真实图</span>
+        </div>
+      </div>
+
+      <div
+        class="metric-card metric-card--ban clickable"
         :class="{ active: filters.risk === 'ban' }"
         @click="filters.risk = 'ban'"
       >
-        <span>封禁风险</span>
-        <strong>{{ listings.filter(hasBanRecord).length }}</strong>
-      </button>
-    </div>
+        <div class="metric-icon-wrap rose">
+          <el-icon><WarningFilled /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">封禁风险标记</span>
+          <strong class="metric-val rose-val">{{ listings.filter(hasBanRecord).length }} 件</strong>
+          <span class="metric-sub-pill danger">存在历史处罚</span>
+        </div>
+      </div>
+    </section>
 
+    <!-- 审核工作区（左右双栏） -->
     <div class="review-workbench">
-      <aside class="review-queue">
-        <div class="queue-toolbar">
-          <el-input
-            v-model="filters.keyword"
-            :prefix-icon="Search"
-            clearable
-            placeholder="搜索编号、标题、客服、渠道、段位、皮肤"
-          />
-          <el-select v-model="filters.risk" placeholder="风险筛选">
-            <el-option label="全部待审" value="all" />
-            <el-option label="外部上传" value="external" />
-            <el-option label="默认截图" value="defaultImage" />
-            <el-option label="有封禁记录" value="ban" />
-          </el-select>
+      <!-- 左侧待审队列 -->
+      <aside class="review-queue-card">
+        <div class="queue-card-header">
+          <div class="queue-toolbar">
+            <el-input
+              v-model="filters.keyword"
+              :prefix-icon="Search"
+              clearable
+              placeholder="搜索编号/标题/客服/渠道"
+            />
+            <el-select v-model="filters.risk" class="risk-select" placeholder="风险类型">
+              <el-option label="全部待审" value="all" />
+              <el-option label="外部上传" value="external" />
+              <el-option label="默认截图" value="defaultImage" />
+              <el-option label="封禁记录" value="ban" />
+            </el-select>
+          </div>
+          <div class="queue-count-banner">
+            <span>待审列表</span>
+            <span class="font-mono text-primary font-bold"
+              >共 {{ filteredListings.length }} 项</span
+            >
+          </div>
         </div>
 
-        <div v-loading="loading" class="queue-list">
+        <div v-loading="loading" class="queue-list-container">
           <button
             v-for="item in filteredListings"
             :key="item.id"
@@ -642,37 +698,40 @@ async function openScreenshot(url: string) {
             type="button"
             @click="selectListing(item)"
           >
-            <div class="queue-title-row">
-              <div>
-                <span class="queue-code">编号 {{ formatListingCode(item) }}</span>
-                <strong>{{ item.title }}</strong>
+            <div class="queue-item-header">
+              <span class="queue-code font-mono">#{{ formatListingCode(item) }}</span>
+              <strong class="queue-coin font-mono text-amber"
+                >{{ formatHafCoinM(getCoinWan(item)) }}M</strong
+              >
+            </div>
+
+            <div class="queue-item-title">{{ item.title }}</div>
+
+            <div class="queue-meta-chips">
+              <span class="meta-chip">{{ item.server_region || '全区服' }}</span>
+              <span class="meta-chip">{{ item.rank_level || '段位未知' }}</span>
+              <span class="meta-chip">保 {{ assetText(item, 'season_insurance') }}</span>
+              <span class="meta-chip">KD {{ assetNumberText(item, 'secret_kd') }}</span>
+            </div>
+
+            <div class="queue-item-footer">
+              <div class="price-brief">
+                <span class="font-mono font-bold text-primary"
+                  >¥{{ formatCent(item.price_cent) }}</span
+                >
+                <small class="font-mono text-muted"
+                  >押 ¥{{ formatCent(item.deposit_amount_cent) }}</small
+                >
               </div>
-              <span>{{ formatHafCoinM(getCoinWan(item)) }}</span>
-            </div>
-            <div class="queue-meta">
-              <span>{{ item.rank_level || '-' }}</span>
-              <span>{{ assetText(item, 'season_insurance') }}</span>
-              <span
-                >{{ assetText(item, 'stamina_level') }}/{{ assetText(item, 'load_level') }}</span
-              >
-              <span>KD {{ assetNumberText(item, 'secret_kd') }}</span>
-            </div>
-            <div class="queue-footer">
-              <span
-                >¥{{ formatCent(item.price_cent) }} / 押 ¥{{
-                  formatCent(item.deposit_amount_cent)
-                }}</span
-              >
-              <div class="queue-tags">
+              <div class="queue-tag-group">
                 <el-tag size="small" type="primary" effect="plain">{{
                   sourceChannel(item)
                 }}</el-tag>
-                <el-tag v-if="isExternalUpload(item)" size="small" type="info">{{
-                  uploaderName(item)
-                }}</el-tag>
+                <el-tag v-if="isExternalUpload(item)" size="small" type="info">API</el-tag>
                 <el-tag v-if="hasDefaultScreenshot(item)" size="small" type="warning"
                   >默认图</el-tag
                 >
+                <el-tag v-if="hasBanRecord(item)" size="small" type="danger">封禁</el-tag>
               </div>
             </div>
           </button>
@@ -683,154 +742,195 @@ async function openScreenshot(url: string) {
         </div>
       </aside>
 
+      <!-- 右侧审核详情工作台 -->
       <main v-if="selectedListing" class="review-detail">
-        <section class="review-hero-panel">
-          <div class="hero-title">
-            <div>
-              <p>商品编号 {{ formatListingCode(selectedListing) }}</p>
-              <h2>{{ selectedListing.title }}</h2>
+        <!-- 审核主头部面板 -->
+        <section class="section-card review-hero-panel">
+          <div class="hero-title-row">
+            <div class="hero-title-group">
+              <div class="hero-eyebrow font-mono">
+                <span>ITEM ID: {{ selectedListing.id }}</span>
+                <span>CODE: {{ formatListingCode(selectedListing) }}</span>
+              </div>
+              <h2 class="hero-listing-title">{{ selectedListing.title }}</h2>
+              <div class="risk-strip">
+                <el-tag
+                  v-for="risk in activeRisks"
+                  :key="risk.label"
+                  :type="riskTagType(risk.level)"
+                  effect="light"
+                  class="risk-tag"
+                >
+                  {{ risk.label }}
+                </el-tag>
+                <span v-if="!activeRisks.length" class="no-risk-tag">未检测到明显风险</span>
+              </div>
             </div>
+
             <div class="hero-actions">
               <RouterLink :to="adminPath(`listings/${selectedListing.id}`)">
-                <el-button>详情页</el-button>
+                <el-button>商品详情</el-button>
               </RouterLink>
               <el-button
                 :icon="Close"
                 type="danger"
+                plain
                 :loading="submitting"
                 @click="openReject(selectedListing)"
-                >拒绝</el-button
               >
+                拒绝发布
+              </el-button>
               <el-button
                 :icon="Check"
                 type="primary"
                 :loading="submitting"
                 @click="handleApprove(selectedListing)"
-                >通过</el-button
               >
+                审核通过
+              </el-button>
             </div>
           </div>
-          <div class="risk-strip">
-            <el-tag
-              v-for="risk in activeRisks"
-              :key="risk.label"
-              :type="riskTagType(risk.level)"
-              effect="light"
-            >
-              {{ risk.label }}
-            </el-tag>
-          </div>
         </section>
 
-        <section class="review-panel price-review-panel">
-          <div class="panel-title price-panel-title">
-            <div>
-              <h3>价格审核</h3>
-              <p>核对卖家提交价格、平台加价规则和最终买家展示价。</p>
+        <!-- 价格决策面板 -->
+        <section class="section-card price-review-panel">
+          <div class="card-panel-header">
+            <div class="card-panel-title">
+              <span class="title-text">价格与加价决策</span>
+              <span class="subtitle-text">核对卖家提交价、平台加价规则及最终买家售价</span>
             </div>
-            <el-button type="primary" plain @click="openPriceAdjust(selectedListing)"
-              >调整价格</el-button
-            >
+            <el-button type="primary" plain size="small" @click="openPriceAdjust(selectedListing)">
+              调整价格
+            </el-button>
           </div>
+
           <div class="price-decision-grid">
             <div class="price-decision-card seller">
-              <span>卖家发布</span>
-              <strong>{{ money(sellerTotalPrice(selectedListing)) }}</strong>
-              <p>发布比例 {{ ratioText(sellerRatio(selectedListing)) }}</p>
-              <small
-                >纯币 {{ money(sellerCoinBasePrice(selectedListing)) }} / 物品
-                {{ money(getListingConsumablePrice(selectedListing)) }}</small
+              <span class="pd-label">号主提交价</span>
+              <strong class="pd-val font-mono">{{
+                money(sellerTotalPrice(selectedListing))
+              }}</strong>
+              <div class="pd-sub font-mono">
+                发布比例 {{ ratioText(sellerRatio(selectedListing)) }}
+              </div>
+              <small class="pd-detail font-mono">
+                纯币 {{ money(sellerCoinBasePrice(selectedListing)) }} / 物品
+                {{ money(getListingConsumablePrice(selectedListing)) }}
+              </small>
+            </div>
+
+            <div class="price-decision-card rule">
+              <span class="pd-label">当前加价规则</span>
+              <strong class="pd-val">{{ priceRuleLabel(selectedListing) }}</strong>
+              <div class="pd-sub">{{ priceRuleText(selectedListing) }}</div>
+              <small class="pd-detail font-mono"
+                >平台加价 {{ money(platformMarkupAmount(selectedListing)) }}</small
               >
             </div>
-            <div class="price-decision-card rule">
-              <span>当前加价规则</span>
-              <strong>{{ priceRuleLabel(selectedListing) }}</strong>
-              <p>{{ priceRuleText(selectedListing) }}</p>
-              <small>平台加价 {{ money(platformMarkupAmount(selectedListing)) }}</small>
-            </div>
+
             <div class="price-decision-card buyer">
-              <span>加价后展示</span>
-              <strong>{{ money(buyerTotalPrice(selectedListing)) }}</strong>
-              <p>加价后比例 {{ ratioText(buyerRatio(selectedListing)) }}</p>
-              <small>纯币 {{ money(buyerCoinBasePrice(selectedListing)) }} / 总价含物品</small>
+              <span class="pd-label">加价后展示售价</span>
+              <strong class="pd-val font-mono text-primary">{{
+                money(buyerTotalPrice(selectedListing))
+              }}</strong>
+              <div class="pd-sub font-mono">
+                加价后比例 {{ ratioText(buyerRatio(selectedListing)) }}
+              </div>
+              <small class="pd-detail font-mono"
+                >纯币 {{ money(buyerCoinBasePrice(selectedListing)) }} / 含物品</small
+              >
             </div>
+
             <div class="price-decision-card deposit">
-              <span>押金与损耗</span>
-              <strong>¥{{ formatCent(selectedListing.deposit_amount_cent) }}</strong>
-              <p>每日损耗 {{ dailyLossText(selectedListing) }}</p>
-              <small>哈夫币 {{ formatHafCoinM(getCoinWan(selectedListing)) }}</small>
+              <span class="pd-label">押金与预计损耗</span>
+              <strong class="pd-val font-mono text-emerald"
+                >¥{{ formatCent(selectedListing.deposit_amount_cent) }}</strong
+              >
+              <div class="pd-sub font-mono">每日损耗 {{ dailyLossText(selectedListing) }}</div>
+              <small class="pd-detail font-mono"
+                >哈夫币 {{ formatHafCoinM(getCoinWan(selectedListing)) }}</small
+              >
             </div>
           </div>
         </section>
 
-        <section class="review-grid">
-          <div class="review-panel">
-            <div class="panel-title">
-              <h3>账号属性</h3>
+        <!-- 账号属性与上传信息双栏 -->
+        <div class="review-grid-2col">
+          <!-- 账号属性 -->
+          <section class="section-card">
+            <div class="card-panel-header">
+              <div class="card-panel-title">
+                <span class="title-text">账号核心属性</span>
+              </div>
             </div>
-            <dl class="detail-list">
-              <div>
+            <dl class="detail-list-grid">
+              <div class="dl-item">
                 <dt>上号方式</dt>
                 <dd>{{ selectedListing.login_platform || '-' }}</dd>
               </div>
-              <div>
+              <div class="dl-item">
                 <dt>区服</dt>
                 <dd>{{ selectedListing.server_region || '-' }}</dd>
               </div>
-              <div>
+              <div class="dl-item">
                 <dt>段位</dt>
                 <dd>{{ selectedListing.rank_level || '-' }}</dd>
               </div>
-              <div>
+              <div class="dl-item">
                 <dt>烽火等级</dt>
-                <dd>{{ assetNumberText(selectedListing, 'fire_level') }}</dd>
+                <dd class="font-mono">{{ assetNumberText(selectedListing, 'fire_level') }}</dd>
               </div>
-              <div>
+              <div class="dl-item">
                 <dt>保险格数</dt>
-                <dd>{{ assetText(selectedListing, 'season_insurance') }}</dd>
+                <dd class="font-mono">{{ assetText(selectedListing, 'season_insurance') }}</dd>
               </div>
-              <div>
-                <dt>绝密KD</dt>
-                <dd>{{ assetNumberText(selectedListing, 'secret_kd') }}</dd>
+              <div class="dl-item">
+                <dt>绝密 KD</dt>
+                <dd class="font-mono">{{ assetNumberText(selectedListing, 'secret_kd') }}</dd>
               </div>
-              <div>
-                <dt>体力/负重</dt>
-                <dd>
+              <div class="dl-item">
+                <dt>体力 / 负重</dt>
+                <dd class="font-mono">
                   {{ assetText(selectedListing, 'stamina_level') }} /
                   {{ assetText(selectedListing, 'load_level') }}
                 </dd>
               </div>
-              <div>
+              <div class="dl-item">
                 <dt>封禁记录</dt>
-                <dd>{{ banRecordText(selectedListing) }}</dd>
+                <dd :class="{ 'text-danger font-bold': hasBanRecord(selectedListing) }">
+                  {{ banRecordText(selectedListing) }}
+                </dd>
               </div>
             </dl>
-          </div>
+          </section>
 
-          <div class="review-panel">
-            <div class="panel-title">
-              <h3>上传信息</h3>
+          <!-- 上传与号主信息 -->
+          <section class="section-card">
+            <div class="card-panel-header">
+              <div class="card-panel-title">
+                <span class="title-text">上传与号主信息</span>
+              </div>
               <div class="panel-tags">
                 <el-tag size="small" type="primary" effect="plain">{{
                   sourceChannel(selectedListing)
                 }}</el-tag>
                 <el-tag v-if="isExternalUpload(selectedListing)" size="small" type="info"
-                  >外部上传</el-tag
+                  >外部 API</el-tag
                 >
               </div>
             </div>
-            <dl class="detail-list">
-              <div>
+            <dl class="detail-list-grid">
+              <div class="dl-item">
                 <dt>来源渠道</dt>
                 <dd>{{ sourceChannel(selectedListing) }}</dd>
               </div>
-              <div>
-                <dt>上传人</dt>
+              <div class="dl-item">
+                <dt>上传客服/人</dt>
                 <dd>{{ uploaderName(selectedListing) }}</dd>
               </div>
-              <div>
-                <dt>号主</dt>
-                <dd>
+              <div class="dl-item">
+                <dt>号主标识</dt>
+                <dd class="font-mono">
                   {{
                     selectedListing.owner_phone ||
                     selectedListing.owner_nickname ||
@@ -838,65 +938,97 @@ async function openScreenshot(url: string) {
                   }}
                 </dd>
               </div>
-              <div>
+              <div class="dl-item">
                 <dt>联系电话</dt>
-                <dd>{{ contactPhone(selectedListing) }}</dd>
+                <dd class="font-mono">{{ contactPhone(selectedListing) }}</dd>
               </div>
-              <div>
+              <div class="dl-item">
                 <dt>常用地区</dt>
                 <dd>{{ commonRegionText(selectedListing) }}</dd>
               </div>
-              <div>
+              <div class="dl-item">
                 <dt>在线时间</dt>
                 <dd>{{ ownerOnlineText(selectedListing) }}</dd>
               </div>
-              <div>
+              <div class="dl-item">
                 <dt>提交时间</dt>
-                <dd>{{ formatDateTime(selectedListing.updated_at) }}</dd>
+                <dd class="font-mono text-muted">
+                  {{ formatDateTime(selectedListing.updated_at) }}
+                </dd>
               </div>
             </dl>
+          </section>
+        </div>
+
+        <!-- 消耗品库存与皮肤 -->
+        <section class="section-card">
+          <div class="card-panel-header">
+            <div class="card-panel-title">
+              <span class="title-text">库存消耗品与皮肤</span>
+              <span class="subtitle-text"
+                >额外消耗品估值约 {{ money(getListingConsumablePrice(selectedListing)) }}</span
+              >
+            </div>
+          </div>
+
+          <div class="inventory-stat-grid">
+            <div class="inv-stat-card">
+              <span class="inv-name">AWM 子弹</span>
+              <strong class="inv-val font-mono"
+                >{{ getResourceQuantity(selectedListing, 'awmAmmo') }} 发</strong
+              >
+            </div>
+            <div class="inv-stat-card">
+              <span class="inv-name">六级头盔</span>
+              <strong class="inv-val font-mono"
+                >{{ getResourceQuantity(selectedListing, 'helmet6') }} 顶</strong
+              >
+            </div>
+            <div class="inv-stat-card">
+              <span class="inv-name">六级护甲</span>
+              <strong class="inv-val font-mono"
+                >{{ getResourceQuantity(selectedListing, 'armor6') }} 件</strong
+              >
+            </div>
+          </div>
+
+          <div v-if="selectedResources.length" class="resource-pill-table">
+            <div v-for="resource in selectedResources" :key="resource.key" class="resource-pill">
+              <span class="res-label">{{ resource.label }}</span>
+              <strong class="res-qty font-mono">{{ resource.quantity }}</strong>
+              <em class="res-extra">{{ resource.mode }} · {{ resource.price }}</em>
+            </div>
+          </div>
+
+          <div class="skin-section">
+            <div class="skin-title">已登记皮肤清单：</div>
+            <div class="skin-chip-wrap">
+              <el-tag
+                v-for="skin in selectedSkins"
+                :key="skin"
+                type="success"
+                effect="plain"
+                class="skin-tag"
+              >
+                {{ skin }}
+              </el-tag>
+              <span v-if="!selectedSkins.length" class="text-muted">暂无登记皮肤</span>
+            </div>
           </div>
         </section>
 
-        <section class="review-panel">
-          <div class="panel-title">
-            <h3>库存资产</h3>
-            <span>额外消耗品约 {{ money(getListingConsumablePrice(selectedListing)) }}</span>
-          </div>
-          <div class="inventory-grid">
-            <div>
-              <span>AWM子弹</span
-              ><strong>{{ getResourceQuantity(selectedListing, 'awmAmmo') }}</strong>
-            </div>
-            <div>
-              <span>6头</span><strong>{{ getResourceQuantity(selectedListing, 'helmet6') }}</strong>
-            </div>
-            <div>
-              <span>6甲</span><strong>{{ getResourceQuantity(selectedListing, 'armor6') }}</strong>
+        <!-- 账号截图证据 -->
+        <section class="section-card">
+          <div class="card-panel-header">
+            <div class="card-panel-title">
+              <span class="title-text">账号资产截图</span>
+              <span class="subtitle-text">核验截图真实性，点击图片可放大查看</span>
             </div>
+            <el-button :icon="Picture" size="small" @click="openEvidence(selectedListing)">
+              查看大图弹窗
+            </el-button>
           </div>
-          <div v-if="selectedResources.length" class="resource-table">
-            <div v-for="resource in selectedResources" :key="resource.key">
-              <span>{{ resource.label }}</span>
-              <strong>{{ resource.quantity }}</strong>
-              <em>{{ resource.mode }} · {{ resource.price }}</em>
-            </div>
-          </div>
-          <div class="skin-list">
-            <el-tag v-for="skin in selectedSkins" :key="skin" type="success" effect="plain">{{
-              skin
-            }}</el-tag>
-            <span v-if="!selectedSkins.length">暂无皮肤数据</span>
-          </div>
-        </section>
 
-        <section class="review-panel">
-          <div class="panel-title">
-            <h3>账号截图</h3>
-            <el-button :icon="Picture" size="small" @click="openEvidence(selectedListing)"
-              >查看全部</el-button
-            >
-          </div>
           <div v-if="selectedListing.screenshot_urls?.length" class="screenshot-grid">
             <button
               v-for="url in selectedListing.screenshot_urls"
@@ -905,128 +1037,143 @@ async function openScreenshot(url: string) {
               class="screenshot-tile"
               @click="openScreenshot(url)"
             >
-              <img :src="previewURLs[url] || url" alt="账号截图" />
-              <span v-if="isDefaultScreenshot(url)">默认图片</span>
+              <img :src="previewURLs[url] || url" alt="账号截图" class="screenshot-thumb-img" />
+              <span v-if="isDefaultScreenshot(url)" class="default-badge">默认图片</span>
             </button>
           </div>
           <div v-else class="empty-warning">
             <el-icon><WarningFilled /></el-icon>
-            <span>暂无截图</span>
+            <span>此商品暂无任何截图</span>
           </div>
         </section>
       </main>
 
       <main v-else class="review-detail empty-detail">
-        <el-empty description="暂无待审核商品" />
+        <section class="section-card empty-card">
+          <el-empty description="当前筛选条件下暂无待审核商品" />
+        </section>
       </main>
     </div>
 
+    <!-- 拒绝发布弹窗 -->
     <el-dialog
       :model-value="!!activeListing"
-      title="拒绝发布"
-      width="620px"
+      title="拒绝发布商品"
+      width="580px"
       @update:model-value="activeListing = null"
     >
       <div v-if="activeListing" class="dialog-body reject-dialog">
-        <p>
+        <div class="target-title-box">
+          <span class="text-muted">当前商品：</span>
           <strong>{{ activeListing.title }}</strong>
-        </p>
-        <div class="reject-reasons">
-          <el-button
-            v-for="reason in rejectReasonOptions"
-            :key="reason"
-            size="small"
-            @click="appendRejectReason(reason)"
-          >
-            {{ reason }}
-          </el-button>
+        </div>
+        <div class="reject-quick-tags">
+          <span class="quick-title">快捷原因选择：</span>
+          <div class="quick-chips">
+            <el-button
+              v-for="reason in rejectReasonOptions"
+              :key="reason"
+              size="small"
+              @click="appendRejectReason(reason)"
+            >
+              {{ reason }}
+            </el-button>
+          </div>
         </div>
         <el-input
           v-model="rejectReason"
           type="textarea"
-          :rows="5"
-          placeholder="填写拒绝原因，号主会在通知中看到审核结果"
+          :rows="4"
+          placeholder="请详细填写拒绝原因，号主将在通知与商品状态中查看到此理由..."
         />
       </div>
       <template #footer>
-        <el-button @click="activeListing = null">取消</el-button>
-        <el-button type="danger" :loading="submitting" @click="handleReject">确认拒绝</el-button>
+        <div class="modal-footer">
+          <el-button @click="activeListing = null">取消</el-button>
+          <el-button type="danger" :loading="submitting" @click="handleReject">确认拒绝</el-button>
+        </div>
       </template>
     </el-dialog>
 
+    <!-- 调整价格弹窗 -->
     <el-dialog
       :model-value="!!priceAdjustListing"
-      title="调整审核价格"
-      width="560px"
+      title="调整审核商品价格"
+      width="540px"
       @update:model-value="priceAdjustListing = null"
     >
       <div v-if="priceAdjustListing" class="dialog-body price-adjust-dialog">
-        <div class="adjust-current">
-          <div>
+        <div class="adjust-current-grid">
+          <div class="adj-box">
             <span>卖家发布价</span>
-            <strong>{{ money(sellerTotalPrice(priceAdjustListing)) }}</strong>
+            <strong class="font-mono">{{ money(sellerTotalPrice(priceAdjustListing)) }}</strong>
           </div>
-          <div>
+          <div class="adj-box primary">
             <span>调整后买家价</span>
-            <strong class="preview-value">{{
-              previewMoney(priceAdjustPreview?.buyerTotalPrice || 0)
-            }}</strong>
+            <strong class="preview-value font-mono text-primary">
+              {{ previewMoney(priceAdjustPreview?.buyerTotalPrice || 0) }}
+            </strong>
           </div>
-          <div>
+          <div class="adj-box info">
             <span>调整后买家比例</span>
-            <strong class="preview-value">{{
-              ratioText(priceAdjustPreview?.buyerRatio || 0)
-            }}</strong>
+            <strong class="preview-value font-mono">
+              {{ ratioText(priceAdjustPreview?.buyerRatio || 0) }}
+            </strong>
           </div>
         </div>
-        <el-radio-group v-model="priceAdjustMode" class="adjust-mode">
-          <el-radio-button label="ratio">按加价后比例</el-radio-button>
-          <el-radio-button label="price">按加价后价格</el-radio-button>
+        <el-radio-group v-model="priceAdjustMode" class="adjust-mode-group">
+          <el-radio-button value="ratio">按加价后比例</el-radio-button>
+          <el-radio-button value="price">按加价后价格</el-radio-button>
         </el-radio-group>
-        <label v-if="priceAdjustMode === 'ratio'" class="adjust-field">
-          <span>加价后比例</span>
+        <div v-if="priceAdjustMode === 'ratio'" class="adjust-input-field">
+          <span class="field-label">加价后比例（如 1:1.5 输入 1.5）</span>
           <el-input-number
             v-model="priceAdjustForm.buyer_ratio"
             :min="0"
             :step="0.1"
-            :controls="false"
+            :precision="2"
+            class="full-control"
           />
-        </label>
-        <label v-else class="adjust-field">
-          <span>加价后价格</span>
+        </div>
+        <div v-else class="adjust-input-field">
+          <span class="field-label">加价后价格（元）</span>
           <el-input-number
             v-model="priceAdjustForm.buyer_total_price"
             :min="0"
             :step="1"
-            :controls="false"
+            :precision="2"
+            class="full-control"
           />
-        </label>
-        <label class="adjust-field">
-          <span>调价原因</span>
+        </div>
+        <div class="adjust-input-field">
+          <span class="field-label">调价原因说明（可选）</span>
           <el-input
             v-model="priceAdjustForm.reason"
             type="textarea"
             :rows="3"
-            placeholder="可填写调价原因，便于审计追踪"
+            placeholder="填写调价原因，便于后续财务审计追踪..."
           />
-        </label>
+        </div>
       </div>
       <template #footer>
-        <el-button @click="priceAdjustListing = null">取消</el-button>
-        <el-button type="primary" :loading="adjustingPrice" @click="handleSavePriceAdjust"
-          >保存调整</el-button
-        >
+        <div class="modal-footer">
+          <el-button @click="priceAdjustListing = null">取消</el-button>
+          <el-button type="primary" :loading="adjustingPrice" @click="handleSavePriceAdjust">
+            保存调整
+          </el-button>
+        </div>
       </template>
     </el-dialog>
 
+    <!-- 资产大图弹窗 -->
     <el-dialog
       :model-value="!!evidenceListing"
-      title="账号资产截图"
-      width="860px"
+      title="账号资产大图核查"
+      width="min(920px, calc(100vw - 32px))"
       @update:model-value="evidenceListing = null"
     >
       <div v-if="evidenceListing" class="dialog-body">
-        <p>
+        <p class="evidence-title">
           <strong>{{ evidenceListing.title }}</strong>
         </p>
         <div
@@ -1040,92 +1187,258 @@ async function openScreenshot(url: string) {
             class="screenshot-tile"
             @click="openScreenshot(url)"
           >
-            <img :src="previewURLs[url] || url" alt="账号截图" />
-            <span v-if="isDefaultScreenshot(url)">默认图片</span>
+            <img :src="previewURLs[url] || url" alt="账号截图" class="screenshot-thumb-img" />
+            <span v-if="isDefaultScreenshot(url)" class="default-badge">默认图片</span>
           </button>
         </div>
-        <p v-else>暂无截图</p>
+        <p v-else class="text-muted">暂无截图</p>
       </div>
       <template #footer>
-        <el-button @click="evidenceListing = null">关闭</el-button>
+        <div class="modal-footer">
+          <el-button @click="evidenceListing = null">关闭</el-button>
+        </div>
       </template>
     </el-dialog>
-  </section>
+  </div>
 </template>
 
 <style scoped>
-.review-page {
-  min-height: calc(100vh - 128px);
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
 }
 
-.review-header {
-  margin-bottom: 18px;
-}
-
-.review-summary {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(120px, 1fr));
-  gap: 12px;
-  margin-bottom: 14px;
-}
-
-.summary-card {
-  min-width: 0;
-  border: 1px solid #e8edf4;
-  border-radius: 8px;
+/* ================= 头部卡片 ================= */
+.page-header-card {
   background: #ffffff;
-  padding: 14px 16px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.2s ease;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
 }
 
-.summary-card:hover {
-  border-color: #1477ff;
-  box-shadow: 0 2px 8px rgba(20, 119, 255, 0.15);
-  transform: translateY(-1px);
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
 }
 
-.summary-card.active {
-  border-color: #1477ff;
-  background: #1477ff;
-  box-shadow: 0 2px 8px rgba(20, 119, 255, 0.25);
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.summary-card.active span {
-  color: #ffffff;
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #2563eb;
+  background: #eff6ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
 }
 
-.summary-card.active strong {
-  color: #ffffff;
-}
-
-.review-summary span,
-.queue-footer span,
-.panel-title span,
-.inventory-grid span,
-.resource-table span,
-.price-decision-card span,
-.adjust-current span,
-.adjust-field span {
-  color: #8f9bba;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.review-summary strong {
-  display: block;
-  margin-top: 5px;
-  color: #1b2559;
-  font-size: 24px;
+.page-title {
+  margin: 0;
+  font-size: 26px;
   font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
 }
 
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+}
+
+.metric-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 18px 20px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.metric-card.clickable {
+  cursor: pointer;
+}
+
+.metric-card.clickable:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.metric-card.active {
+  border-color: #3b82f6;
+  box-shadow:
+    0 0 0 2px rgba(59, 130, 246, 0.15),
+    0 8px 24px rgba(59, 130, 246, 0.1);
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+}
+
+.metric-card--total::before {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+.metric-card--external::before {
+  background: linear-gradient(90deg, #3b82f6, #60a5fa);
+}
+
+.metric-card--default-img::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.metric-card--ban::before {
+  background: linear-gradient(90deg, #f43f5e, #fb7185);
+}
+
+.metric-icon-wrap {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.metric-icon-wrap.indigo {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.metric-icon-wrap.blue {
+  background: #eff6ff;
+  color: #3b82f6;
+}
+
+.metric-icon-wrap.amber {
+  background: #fffbeb;
+  color: #f59e0b;
+}
+
+.metric-icon-wrap.rose {
+  background: #fff1f2;
+  color: #f43f5e;
+}
+
+.metric-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metric-label {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+.metric-val {
+  font-size: 22px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.3px;
+  line-height: 1.2;
+}
+
+.indigo-val {
+  color: #4f46e5;
+}
+
+.blue-val {
+  color: #2563eb;
+}
+
+.amber-val {
+  color: #d97706;
+}
+
+.rose-val {
+  color: #e11d48;
+}
+
+.metric-sub-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  width: fit-content;
+}
+
+.metric-sub-pill.info {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.metric-sub-pill.primary {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.metric-sub-pill.warning {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.metric-sub-pill.danger {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+/* ================= 审核工作台左右双栏 ================= */
 .review-workbench {
   display: grid;
-  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
-  gap: 16px;
+  grid-template-columns: 360px minmax(0, 1fr);
+  gap: 20px;
   align-items: start;
 }
 
@@ -1320,205 +1633,274 @@ async function openScreenshot(url: string) {
 
 .price-panel-title p {
   margin: 5px 0 0;
-  color: #8f9bba;
-  font-size: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.risk-tag {
   font-weight: 600;
 }
 
+.no-risk-tag {
+  font-size: 12px;
+  color: #059669;
+  background: #ecfdf5;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.hero-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* ================= 价格决策卡片 ================= */
+.card-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.card-panel-title {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.subtitle-text {
+  font-size: 12.5px;
+  color: #64748b;
+}
+
 .price-decision-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(150px, 1fr));
+  grid-template-columns: repeat(4, 1fr);
   gap: 12px;
 }
 
 .price-decision-card {
-  display: grid;
-  gap: 7px;
-  min-width: 0;
-  min-height: 128px;
-  border: 1px solid #e8ecf1;
-  border-radius: 8px;
-  background: #f8f9fe;
-  padding: 14px;
+  border-radius: 12px;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
 }
 
-.price-decision-card strong {
-  color: #1b2559;
-  font-size: 24px;
-  font-weight: 900;
-  line-height: 1.1;
-}
-
-.price-decision-card p,
-.price-decision-card small {
-  margin: 0;
-  color: #4b5563;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1.45;
-}
-
-.price-decision-card small {
-  color: #8f9bba;
-}
-
-.price-decision-card.buyer {
-  border-color: #bfdbfe;
-  background: #eff6ff;
-}
-
-.price-decision-card.buyer strong {
-  color: #2563eb;
+.price-decision-card.seller {
+  border-color: #cbd5e1;
 }
 
 .price-decision-card.rule {
-  border-color: #fed7aa;
-  background: #fff7ed;
+  background: #fdf4ff;
+  border-color: #f0abfc;
 }
 
-.price-decision-card.rule strong {
-  color: #ea580c;
+.price-decision-card.buyer {
+  background: #eff6ff;
+  border-color: #bfdbfe;
 }
 
 .price-decision-card.deposit {
-  border-color: #e0e7ff;
-  background: #f5f7ff;
+  background: #f0fdf4;
+  border-color: #bbf7d0;
 }
 
-.detail-list {
-  display: grid;
-  gap: 10px;
-  margin: 0;
+.pd-label {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: #64748b;
 }
 
-.detail-list div {
-  display: grid;
-  grid-template-columns: 86px minmax(0, 1fr);
-  gap: 10px;
-  align-items: start;
-}
-
-.detail-list dt {
-  color: #8f9bba;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.detail-list dd {
-  min-width: 0;
-  margin: 0;
-  color: #1f2937;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.45;
-  overflow-wrap: anywhere;
-}
-
-.inventory-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(110px, 1fr));
-  gap: 10px;
-  margin-bottom: 12px;
-}
-
-.inventory-grid div {
-  border-radius: 8px;
-  background: #f8f9fe;
-  padding: 12px;
-}
-
-.inventory-grid strong {
-  display: block;
-  margin-top: 4px;
-  color: #1b2559;
-  font-size: 22px;
-  font-weight: 900;
-}
-
-.resource-table {
-  display: grid;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.resource-table div {
-  display: grid;
-  grid-template-columns: minmax(120px, 1fr) 72px minmax(120px, 1fr);
-  gap: 10px;
-  align-items: center;
-  border-bottom: 1px solid #f0f2f5;
-  padding-bottom: 8px;
-}
-
-.resource-table strong {
-  color: #1f2937;
-  font-size: 13px;
+.pd-val {
+  font-size: 20px;
   font-weight: 800;
+  color: #0f172a;
+  line-height: 1.2;
 }
 
-.resource-table em {
-  color: #8f9bba;
+.pd-sub {
   font-size: 12px;
-  font-style: normal;
+  color: #475569;
   font-weight: 600;
 }
 
-.skin-list {
+.pd-detail {
+  font-size: 10.5px;
+  color: #94a3b8;
+}
+
+/* ================= 属性双栏 ================= */
+.review-grid-2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.detail-list-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px 14px;
+  margin: 0;
+}
+
+.dl-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.dl-item dt {
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.dl-item dd {
+  margin: 0;
+  font-size: 13.5px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+/* ================= 消耗品与皮肤 ================= */
+.inventory-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.inv-stat-card {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.inv-name {
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.inv-val {
+  font-size: 18px;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.resource-pill-table {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.resource-pill {
+  display: inline-flex;
   align-items: center;
+  gap: 8px;
+  background: #f1f5f9;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 12px;
 }
 
-.skin-list > span {
-  color: #8f9bba;
-  font-size: 13px;
+.res-qty {
+  color: #2563eb;
 }
 
+.res-extra {
+  color: #64748b;
+  font-style: normal;
+}
+
+.skin-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px dashed #e2e8f0;
+}
+
+.skin-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.skin-chip-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.skin-tag {
+  font-weight: 600;
+}
+
+/* ================= 截图画廊 ================= */
 .screenshot-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
   gap: 12px;
 }
 
 .screenshot-tile {
-  position: relative;
-  display: block;
-  width: 100%;
-  aspect-ratio: 16 / 9;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
   overflow: hidden;
-  border: 1px solid #e8ecf1;
-  border-radius: 8px;
-  background: #f8f9fe;
+  background: #f8fafc;
   padding: 0;
   cursor: pointer;
+  position: relative;
+  aspect-ratio: 16 / 9;
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease;
 }
 
-.screenshot-tile img {
-  display: block;
+.screenshot-tile:hover {
+  border-color: #3b82f6;
+  transform: scale(1.02);
+}
+
+.screenshot-thumb-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  display: block;
 }
 
-.screenshot-tile span {
+.default-badge {
   position: absolute;
-  top: 8px;
-  left: 8px;
-  border-radius: 6px;
-  background: rgba(245, 158, 11, 0.95);
-  padding: 3px 7px;
+  bottom: 4px;
+  right: 4px;
+  background: rgba(245, 158, 11, 0.9);
   color: #ffffff;
-  font-size: 12px;
-  font-weight: 800;
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-weight: 600;
 }
 
 .empty-warning {
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-height: 84px;
-  border-radius: 8px;
-  background: #fff7ed;
-  padding: 16px;
-  color: #c2410c;
   font-weight: 700;
 }
 
diff --git a/frontend/src/features/admin/views/AdminListingsView.vue b/frontend/src/features/admin/views/AdminListingsView.vue
index 964c40f..08b641b 100644
--- a/frontend/src/features/admin/views/AdminListingsView.vue
+++ b/frontend/src/features/admin/views/AdminListingsView.vue
@@ -1,8 +1,19 @@
 <script setup lang="ts">
-import { ArrowDown, Search } from '@element-plus/icons-vue'
+import {
+  ArrowDown,
+  Check,
+  Clock,
+  DocumentCopy,
+  Download,
+  Lock,
+  Refresh,
+  Search,
+  Shop,
+} from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 
+import AdminTablePagination from '../components/AdminTablePagination.vue'
 import {
   emptyListingPublishOptions,
   fetchAdminListings,
@@ -83,7 +94,6 @@ const rentedCount = computed(() => listings.value.filter(item => item.status ===
 const pendingCount = computed(
   () => listings.value.filter(item => item.review_status === 'pending').length
 )
-const totalPages = computed(() => Math.max(1, Math.ceil(totalListings.value / pageSize.value)))
 const insuranceOptions = computed(() =>
   publishOptions.value.insurance_options.length
     ? publishOptions.value.insurance_options
@@ -337,22 +347,6 @@ function setReviewStatusFilter(reviewStatus: string) {
   void queryListings()
 }
 
-async function handlePageSizeChange(size: number) {
-  pageSize.value = size
-  currentPage.value = 1
-  await loadListings()
-}
-
-async function prevPage() {
-  currentPage.value = Math.max(1, currentPage.value - 1)
-  await loadListings()
-}
-
-async function nextPage() {
-  currentPage.value = Math.min(totalPages.value, currentPage.value + 1)
-  await loadListings()
-}
-
 async function copyTableScreenshot() {
   try {
     const blob = await createTableScreenshotBlob()
@@ -618,397 +612,940 @@ function formatQuantity(value: number) {
 </script>
 
 <template>
-  <section class="page admin-listings-page">
-    <div class="page-header-row">
-      <div class="page-header">
-        <p class="eyebrow">Listings</p>
-        <h1>商品管理</h1>
-        <p>查看商品编码、地区、上号方式、账号资产、号主备注、租金押金、比例和预计租期。</p>
-      </div>
-    </div>
-
-    <div class="listing-control-panel">
-      <!-- 统计指标行 -->
-      <div class="listing-stats-row">
-        <div
-          class="stat-card clickable"
-          :class="{ active: !filters.status && !filters.review_status }"
-          @click="resetFilters"
-        >
-          <span class="stat-label">全部商品</span>
-          <strong class="stat-value">{{ totalListings }}</strong>
+  <div class="finance-page-container admin-listings-page">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><Shop /></el-icon>
+            <span>LISTINGS & INVENTORY</span>
+          </div>
+          <h1 class="page-title">商品管理</h1>
+          <p class="page-subtitle">
+            查看出租商品编码、区服、上号方式、账号资产（哈夫币/保险/体力/负重/皮肤）、租金押金与预计租期。
+          </p>
         </div>
-        <div
-          class="stat-card clickable"
-          :class="{ active: filters.status === 'published' }"
-          @click="setStatusFilter('published')"
-        >
-          <span class="stat-label">已上架</span>
-          <strong class="stat-value">{{ publishedCount }}</strong>
-        </div>
-        <div
-          class="stat-card clickable"
-          :class="{ active: filters.status === 'rented' }"
-          @click="setStatusFilter('rented')"
-        >
-          <span class="stat-label">已锁定</span>
-          <strong class="stat-value">{{ rentedCount }}</strong>
-        </div>
-        <div
-          class="stat-card clickable"
-          :class="{ active: filters.review_status === 'pending' }"
-          @click="setReviewStatusFilter('pending')"
-        >
-          <span class="stat-label">待审核</span>
-          <strong class="stat-value">{{ pendingCount }}</strong>
-        </div>
-      </div>
-
-      <!-- 筛选和操作行 -->
-      <div class="listing-filter-row">
-        <el-form class="listing-filter-bar" label-position="top">
-          <el-form-item class="filter-keyword" label="编号">
-            <el-input
-              v-model="filters.keyword"
-              clearable
-              placeholder="商品编号 / 订单编号"
-              @keyup.enter="queryListings"
-              @clear="queryListings"
-            />
-          </el-form-item>
-          <el-form-item class="filter-owner" label="号主 ID">
-            <el-input v-model="filters.owner_id" clearable placeholder="筛选号主" />
-          </el-form-item>
-          <el-form-item class="filter-range" label="纯币(M)">
-            <div class="admin-range-filter">
-              <el-input-number
-                v-model="filters.min_coin"
-                :min="0"
-                :precision="1"
-                :step="10"
-                :controls="false"
-                placeholder="最低"
-              />
-              <span class="admin-range-separator">-</span>
-              <el-input-number
-                v-model="filters.max_coin"
-                :min="0"
-                :precision="1"
-                :step="10"
-                :controls="false"
-                placeholder="最高"
-              />
-            </div>
-          </el-form-item>
-          <el-form-item class="filter-range" label="押金(元)">
-            <div class="admin-range-filter">
-              <el-input-number
-                v-model="filters.min_deposit"
-                :min="0"
-                :precision="1"
-                :step="100"
-                :controls="false"
-                placeholder="最低"
-              />
-              <span class="admin-range-separator">-</span>
-              <el-input-number
-                v-model="filters.max_deposit"
-                :min="0"
-                :precision="1"
-                :step="100"
-                :controls="false"
-                placeholder="最高"
-              />
-            </div>
-          </el-form-item>
-          <el-form-item class="filter-select" label="商品状态">
-            <el-select v-model="filters.status" clearable placeholder="全部状态">
-              <el-option label="草稿" value="draft" />
-              <el-option label="已上架" value="published" />
-              <el-option label="已锁定" value="rented" />
-              <el-option label="已下架" value="offline" />
-              <el-option label="已完成" value="completed" />
-              <el-option label="异常" value="abnormal" />
-            </el-select>
-          </el-form-item>
-          <el-form-item class="filter-select" label="审核状态">
-            <el-select v-model="filters.review_status" clearable placeholder="全部审核">
-              <el-option label="未提交" value="none" />
-              <el-option label="待审核" value="pending" />
-              <el-option label="已通过" value="approved" />
-              <el-option label="已拒绝" value="rejected" />
-            </el-select>
-          </el-form-item>
-          <el-form-item class="filter-select" label="资产">
-            <el-popover
-              :visible="activeFilterPopover === 'asset'"
-              trigger="click"
-              placement="bottom-start"
-              popper-class="admin-listing-filter-popover"
-              :width="360"
-              @update:visible="setFilterPopover('asset', $event)"
-            >
-              <template #reference>
-                <button
-                  class="admin-filter-chip"
-                  :class="{ active: assetFilterActive }"
-                  type="button"
-                >
-                  <span>{{ assetFilterLabel }}</span>
-                  <el-icon><ArrowDown /></el-icon>
-                </button>
-              </template>
-              <div class="admin-asset-filter-menu">
-                <div class="admin-filter-section">
-                  <span class="admin-filter-title">保险</span>
-                  <div class="admin-option-grid compact">
-                    <button
-                      type="button"
-                      :class="{ active: !filters.insurance }"
-                      @click="setAssetFilter('insurance', '')"
-                    >
-                      全部
-                    </button>
-                    <button
-                      v-for="item in insuranceOptions"
-                      :key="item"
-                      type="button"
-                      :class="{ active: filters.insurance === item }"
-                      @click="setAssetFilter('insurance', item)"
-                    >
-                      {{ insuranceSlotLabel(item) }}
-                    </button>
-                  </div>
-                </div>
-                <div class="admin-filter-section">
-                  <span class="admin-filter-title">体力</span>
-                  <div class="admin-option-grid">
-                    <button
-                      type="button"
-                      :class="{ active: !filters.stamina }"
-                      @click="setAssetFilter('stamina', '')"
-                    >
-                      全部
-                    </button>
-                    <button
-                      v-for="item in levelOptions"
-                      :key="`stamina-${item}`"
-                      type="button"
-                      :class="{ active: filters.stamina === item }"
-                      @click="setAssetFilter('stamina', item)"
-                    >
-                      {{ levelSlotLabel(item) }}
-                    </button>
-                  </div>
-                </div>
-                <div class="admin-filter-section">
-                  <span class="admin-filter-title">负重</span>
-                  <div class="admin-option-grid">
-                    <button
-                      type="button"
-                      :class="{ active: !filters.load }"
-                      @click="setAssetFilter('load', '')"
-                    >
-                      全部
-                    </button>
-                    <button
-                      v-for="item in levelOptions"
-                      :key="`load-${item}`"
-                      type="button"
-                      :class="{ active: filters.load === item }"
-                      @click="setAssetFilter('load', item)"
-                    >
-                      {{ levelSlotLabel(item) }}
-                    </button>
-                  </div>
-                </div>
-                <button
-                  v-if="assetFilterActive"
-                  class="admin-filter-reset"
-                  type="button"
-                  @click="clearAssetFilters()"
-                >
-                  清空资产筛选
-                </button>
-              </div>
-            </el-popover>
-          </el-form-item>
-          <el-form-item class="filter-skin" label="皮肤">
-            <el-popover
-              :visible="activeFilterPopover === 'skin'"
-              trigger="click"
-              placement="bottom-start"
-              popper-class="admin-listing-filter-popover"
-              :width="420"
-              @update:visible="setFilterPopover('skin', $event)"
-            >
-              <template #reference>
-                <button
-                  class="admin-filter-chip wide"
-                  :class="{ active: skinFilterActive }"
-                  type="button"
-                >
-                  <span>{{ skinFilterLabel }}</span>
-                  <el-icon><ArrowDown /></el-icon>
-                </button>
-              </template>
-              <div class="admin-skin-filter-menu">
-                <button
-                  class="admin-filter-reset"
-                  type="button"
-                  :class="{ active: !filters.skin_group && !filters.skin_name }"
-                  @click="clearSkinFilters()"
-                >
-                  全部皮肤
-                </button>
-                <div v-if="!skinFilterGroups.length" class="admin-filter-empty">暂无皮肤选项</div>
-                <div
-                  v-for="group in skinFilterGroups"
-                  :key="group.key"
-                  class="admin-filter-section"
-                >
-                  <div class="admin-skin-filter-title">
-                    <strong>{{ group.title }}</strong>
-                    <button
-                      type="button"
-                      :class="{ active: filters.skin_group === group.key && !filters.skin_name }"
-                      @click="selectSkinFilter(group.key)"
-                    >
-                      全部{{ group.title.replace('干员', '') }}
-                    </button>
-                  </div>
-                  <div class="admin-skin-option-grid">
-                    <button
-                      v-for="skin in group.options"
-                      :key="`${group.key}-${skin}`"
-                      type="button"
-                      :class="{
-                        active: filters.skin_group === group.key && filters.skin_name === skin,
-                      }"
-                      @click="selectSkinFilter(group.key, skin)"
-                    >
-                      {{ skin }}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </el-popover>
-          </el-form-item>
-        </el-form>
-        <div class="listing-action-strip">
-          <el-button @click="resetFilters">重置</el-button>
-          <el-button type="primary" :icon="Search" :loading="loading" @click="queryListings"
-            >查询</el-button
+        <div class="toolbar-actions">
+          <el-button :icon="Refresh" :loading="loading" @click="queryListings">刷新数据</el-button>
+          <el-button :disabled="!listings.length" :icon="DocumentCopy" @click="copyTableScreenshot"
+            >复制截图</el-button
           >
-          <el-button :disabled="!listings.length" @click="copyTableScreenshot">复制截图</el-button>
-          <el-button :disabled="!listings.length" @click="downloadTableScreenshot"
+          <el-button :disabled="!listings.length" :icon="Download" @click="downloadTableScreenshot"
             >下载截图</el-button
           >
         </div>
       </div>
-    </div>
+    </header>
 
-    <el-table
-      v-loading="loading"
-      class="table-panel admin-listings-table"
-      :data="listings"
-      row-key="id"
-      stripe
-      empty-text="暂无商品"
-    >
-      <el-table-column label="商品编码" width="88">
-        <template #default="{ row }">
-          <strong class="listing-code">{{ formatListingCode(row) }}</strong>
-        </template>
-      </el-table-column>
-      <el-table-column label="地区" width="86">
-        <template #default="{ row }">{{ regionText(row) }}</template>
-      </el-table-column>
-      <el-table-column prop="login_platform" label="上号方式" width="78" />
-      <el-table-column label="哈夫币(M)" width="82">
-        <template #default="{ row }">{{ listingCoinM(row) }}</template>
-      </el-table-column>
-      <el-table-column label="保险" width="54">
-        <template #default="{ row }">{{ assetText(row, 'season_insurance') }}</template>
-      </el-table-column>
-      <el-table-column label="体力(级)" width="68">
-        <template #default="{ row }">{{ levelText(row, 'stamina_level') }}</template>
-      </el-table-column>
-      <el-table-column label="负重(级)" width="68">
-        <template #default="{ row }">{{ levelText(row, 'load_level') }}</template>
-      </el-table-column>
-      <el-table-column label="账号等级" width="74">
-        <template #default="{ row }">{{ assetText(row, 'fire_level') }}</template>
-      </el-table-column>
-      <el-table-column label="绝密KD" width="66">
-        <template #default="{ row }">{{ assetText(row, 'secret_kd') }}</template>
-      </el-table-column>
-      <el-table-column label="awm子弹" width="72">
-        <template #default="{ row }">{{ resourceText(row, 'awmAmmo') }}</template>
-      </el-table-column>
-      <el-table-column label="六头" width="48">
-        <template #default="{ row }">{{ resourceText(row, 'helmet6') }}</template>
-      </el-table-column>
-      <el-table-column label="六甲" width="48">
-        <template #default="{ row }">{{ resourceText(row, 'armor6') }}</template>
-      </el-table-column>
-      <el-table-column label="特殊刀皮" width="104">
-        <template #default="{ row }">
-          {{ skinGroupText(row, 'melee') }}
-        </template>
-      </el-table-column>
-      <el-table-column label="人物红皮/人物金皮/武器皮肤" min-width="226">
-        <template #default="{ row }">
-          {{ characterAndWeaponSkinText(row) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="号主备注" min-width="150">
-        <template #default="{ row }">{{ ownerRemarkText(row) }}</template>
-      </el-table-column>
-      <el-table-column label="租金/押金" width="90">
-        <template #default="{ row }">{{ rentAndDepositText(row) }}</template>
-      </el-table-column>
-      <el-table-column label="比例" width="62">
-        <template #default="{ row }">{{ formatRatio(row) }}</template>
-      </el-table-column>
-      <el-table-column label="租期" width="82">
-        <template #default="{ row }">
-          <span :title="estimateTitle(row)">{{ formatEstimatedRentalDuration(row) }}</span>
-          <span v-if="getDailyLoss(row)" class="table-subtext">日耗 {{ getDailyLoss(row) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="详情" width="60">
-        <template #default="{ row }">
-          <RouterLink :to="adminPath(`listings/${row.id}`)">
-            <el-button size="small">详情</el-button>
-          </RouterLink>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <div class="table-pagination">
-      <span class="pagination-summary"
-        >当前页 {{ listings.length }} 条，共 {{ totalListings }} 条</span
+    <!-- 汇总指标卡片（支持点击切换快捷筛选） -->
+    <section class="summary-metric-grid">
+      <div
+        class="metric-card metric-card--total clickable"
+        :class="{ active: !filters.status && !filters.review_status }"
+        @click="resetFilters"
       >
-      <div class="pagination-controls">
-        <span class="pagination-size-label">每页</span>
-        <el-select
-          :model-value="pageSize"
-          class="page-size-select"
-          size="small"
-          @update:model-value="handlePageSizeChange"
-        >
-          <el-option :value="10" label="10条" />
-          <el-option :value="20" label="20条" />
-          <el-option :value="50" label="50条" />
-          <el-option :value="100" label="100条" />
-        </el-select>
-        <span class="pagination-page">{{ currentPage }}/{{ totalPages }}页</span>
-        <el-button size="small" :disabled="currentPage <= 1" @click="prevPage">上页</el-button>
-        <el-button size="small" :disabled="currentPage >= totalPages" @click="nextPage"
-          >下页</el-button
-        >
+        <div class="metric-icon-wrap indigo">
+          <el-icon><Shop /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">全量商品库</span>
+          <strong class="metric-val indigo-val">{{ totalListings }} 件</strong>
+          <span class="metric-sub-pill info">点击查看全部</span>
+        </div>
       </div>
-    </div>
-  </section>
+
+      <div
+        class="metric-card metric-card--published clickable"
+        :class="{ active: filters.status === 'published' }"
+        @click="setStatusFilter('published')"
+      >
+        <div class="metric-icon-wrap emerald">
+          <el-icon><Check /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">已上架出租</span>
+          <strong class="metric-val emerald-val">{{ publishedCount }} 件</strong>
+          <span class="metric-sub-pill success">正常对外出租</span>
+        </div>
+      </div>
+
+      <div
+        class="metric-card metric-card--rented clickable"
+        :class="{ active: filters.status === 'rented' }"
+        @click="setStatusFilter('rented')"
+      >
+        <div class="metric-icon-wrap amber">
+          <el-icon><Lock /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">已出租锁定</span>
+          <strong class="metric-val amber-val">{{ rentedCount }} 件</strong>
+          <span class="metric-sub-pill warning">履约租用中</span>
+        </div>
+      </div>
+
+      <div
+        class="metric-card metric-card--pending clickable"
+        :class="{ active: filters.review_status === 'pending' }"
+        @click="setReviewStatusFilter('pending')"
+      >
+        <div class="metric-icon-wrap rose">
+          <el-icon><Clock /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">待审核商品</span>
+          <strong class="metric-val rose-val">{{ pendingCount }} 件</strong>
+          <span class="metric-sub-pill danger">等待审核上线</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 筛选面板 -->
+    <section class="section-card filter-card">
+      <el-form class="filter-grid" label-position="top" @submit.prevent="queryListings">
+        <el-form-item label="商品/订单编号">
+          <el-input
+            v-model="filters.keyword"
+            clearable
+            placeholder="商品编号 / 订单编号"
+            @keyup.enter="queryListings"
+            @clear="queryListings"
+          />
+        </el-form-item>
+
+        <el-form-item label="号主 ID / 手机号">
+          <el-input
+            v-model="filters.owner_id"
+            clearable
+            placeholder="输入号主用户 ID"
+            @keyup.enter="queryListings"
+            @clear="queryListings"
+          />
+        </el-form-item>
+
+        <el-form-item label="纯币数量 (M)">
+          <div class="range-input-group">
+            <el-input-number
+              v-model="filters.min_coin"
+              :min="0"
+              :precision="1"
+              :step="10"
+              :controls="false"
+              placeholder="最低"
+              class="range-num-input"
+            />
+            <span class="range-sep">-</span>
+            <el-input-number
+              v-model="filters.max_coin"
+              :min="0"
+              :precision="1"
+              :step="10"
+              :controls="false"
+              placeholder="最高"
+              class="range-num-input"
+            />
+          </div>
+        </el-form-item>
+
+        <el-form-item label="押金金额 (元)">
+          <div class="range-input-group">
+            <el-input-number
+              v-model="filters.min_deposit"
+              :min="0"
+              :precision="1"
+              :step="100"
+              :controls="false"
+              placeholder="最低"
+              class="range-num-input"
+            />
+            <span class="range-sep">-</span>
+            <el-input-number
+              v-model="filters.max_deposit"
+              :min="0"
+              :precision="1"
+              :step="100"
+              :controls="false"
+              placeholder="最高"
+              class="range-num-input"
+            />
+          </div>
+        </el-form-item>
+
+        <el-form-item label="商品状态">
+          <el-select
+            v-model="filters.status"
+            clearable
+            placeholder="全部状态"
+            class="full-control"
+            @change="queryListings"
+          >
+            <el-option label="草稿" value="draft" />
+            <el-option label="已上架" value="published" />
+            <el-option label="已锁定" value="rented" />
+            <el-option label="已下架" value="offline" />
+            <el-option label="已完成" value="completed" />
+            <el-option label="异常" value="abnormal" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="审核状态">
+          <el-select
+            v-model="filters.review_status"
+            clearable
+            placeholder="全部审核"
+            class="full-control"
+            @change="queryListings"
+          >
+            <el-option label="未提交" value="none" />
+            <el-option label="待审核" value="pending" />
+            <el-option label="已通过" value="approved" />
+            <el-option label="已拒绝" value="rejected" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="资产规格">
+          <el-popover
+            :visible="activeFilterPopover === 'asset'"
+            trigger="click"
+            placement="bottom-start"
+            popper-class="admin-listing-filter-popover"
+            :width="360"
+            @update:visible="setFilterPopover('asset', $event)"
+          >
+            <template #reference>
+              <button
+                class="admin-filter-chip"
+                :class="{ active: assetFilterActive }"
+                type="button"
+              >
+                <span>{{ assetFilterLabel }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="admin-asset-filter-menu">
+              <div class="admin-filter-section">
+                <span class="admin-filter-title">保险</span>
+                <div class="admin-option-grid compact">
+                  <button
+                    type="button"
+                    :class="{ active: !filters.insurance }"
+                    @click="setAssetFilter('insurance', '')"
+                  >
+                    全部
+                  </button>
+                  <button
+                    v-for="item in insuranceOptions"
+                    :key="item"
+                    type="button"
+                    :class="{ active: filters.insurance === item }"
+                    @click="setAssetFilter('insurance', item)"
+                  >
+                    {{ insuranceSlotLabel(item) }}
+                  </button>
+                </div>
+              </div>
+              <div class="admin-filter-section">
+                <span class="admin-filter-title">体力</span>
+                <div class="admin-option-grid">
+                  <button
+                    type="button"
+                    :class="{ active: !filters.stamina }"
+                    @click="setAssetFilter('stamina', '')"
+                  >
+                    全部
+                  </button>
+                  <button
+                    v-for="item in levelOptions"
+                    :key="`stamina-${item}`"
+                    type="button"
+                    :class="{ active: filters.stamina === item }"
+                    @click="setAssetFilter('stamina', item)"
+                  >
+                    {{ levelSlotLabel(item) }}
+                  </button>
+                </div>
+              </div>
+              <div class="admin-filter-section">
+                <span class="admin-filter-title">负重</span>
+                <div class="admin-option-grid">
+                  <button
+                    type="button"
+                    :class="{ active: !filters.load }"
+                    @click="setAssetFilter('load', '')"
+                  >
+                    全部
+                  </button>
+                  <button
+                    v-for="item in levelOptions"
+                    :key="`load-${item}`"
+                    type="button"
+                    :class="{ active: filters.load === item }"
+                    @click="setAssetFilter('load', item)"
+                  >
+                    {{ levelSlotLabel(item) }}
+                  </button>
+                </div>
+              </div>
+              <button
+                v-if="assetFilterActive"
+                class="admin-filter-reset"
+                type="button"
+                @click="clearAssetFilters()"
+              >
+                清空资产筛选
+              </button>
+            </div>
+          </el-popover>
+        </el-form-item>
+
+        <el-form-item label="皮肤筛选">
+          <el-popover
+            :visible="activeFilterPopover === 'skin'"
+            trigger="click"
+            placement="bottom-start"
+            popper-class="admin-listing-filter-popover"
+            :width="420"
+            @update:visible="setFilterPopover('skin', $event)"
+          >
+            <template #reference>
+              <button
+                class="admin-filter-chip wide"
+                :class="{ active: skinFilterActive }"
+                type="button"
+              >
+                <span>{{ skinFilterLabel }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="admin-skin-filter-menu">
+              <button
+                class="admin-filter-reset"
+                type="button"
+                :class="{ active: !filters.skin_group && !filters.skin_name }"
+                @click="clearSkinFilters()"
+              >
+                全部皮肤
+              </button>
+              <div v-if="!skinFilterGroups.length" class="admin-filter-empty">暂无皮肤选项</div>
+              <div v-for="group in skinFilterGroups" :key="group.key" class="admin-filter-section">
+                <div class="admin-skin-filter-title">
+                  <strong>{{ group.title }}</strong>
+                  <button
+                    type="button"
+                    :class="{ active: filters.skin_group === group.key && !filters.skin_name }"
+                    @click="selectSkinFilter(group.key)"
+                  >
+                    全部{{ group.title.replace('干员', '') }}
+                  </button>
+                </div>
+                <div class="admin-skin-option-grid">
+                  <button
+                    v-for="skin in group.options"
+                    :key="`${group.key}-${skin}`"
+                    type="button"
+                    :class="{
+                      active: filters.skin_group === group.key && filters.skin_name === skin,
+                    }"
+                    @click="selectSkinFilter(group.key, skin)"
+                  >
+                    {{ skin }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </el-popover>
+        </el-form-item>
+
+        <el-form-item label=" " class="filter-actions-item">
+          <div class="filter-actions">
+            <el-button type="primary" :icon="Search" :loading="loading" @click="queryListings">
+              查询
+            </el-button>
+            <el-button @click="resetFilters">重置</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </section>
+
+    <!-- 商品列表表格卡片 -->
+    <section class="section-card table-section-card">
+      <div class="table-card-header">
+        <div class="table-header-title">
+          <el-icon class="header-icon"><Shop /></el-icon>
+          <span>出租商品清单</span>
+        </div>
+        <span class="count-badge">共 {{ totalListings }} 件商品</span>
+      </div>
+
+      <div class="table-container">
+        <el-table
+          v-loading="loading"
+          class="custom-enterprise-table"
+          :data="listings"
+          row-key="id"
+          stripe
+          empty-text="暂无匹配商品"
+        >
+          <el-table-column label="商品编码" width="100" fixed="left">
+            <template #default="{ row }">
+              <strong class="listing-code font-mono">{{ formatListingCode(row) }}</strong>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="地区" width="90">
+            <template #default="{ row }">
+              <el-tag size="small" type="info" effect="plain">{{ regionText(row) }}</el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="login_platform" label="上号方式" width="90">
+            <template #default="{ row }">
+              <span class="platform-tag">{{ row.login_platform || '-' }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="哈夫币(M)" width="95" align="right">
+            <template #default="{ row }">
+              <span class="font-mono font-bold text-amber">{{ listingCoinM(row) }}M</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="保险" width="65" align="center">
+            <template #default="{ row }">
+              <span class="font-mono">{{ assetText(row, 'season_insurance') }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="体力/负重" width="95" align="center">
+            <template #default="{ row }">
+              <span class="font-mono text-muted">
+                {{ levelText(row, 'stamina_level') }} / {{ levelText(row, 'load_level') }}
+              </span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="等级" width="65" align="center">
+            <template #default="{ row }">
+              <span class="font-mono">{{ assetText(row, 'fire_level') }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="KD" width="60" align="center">
+            <template #default="{ row }">
+              <span class="font-mono">{{ assetText(row, 'secret_kd') }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="AWM/6头/6甲" width="115" align="center">
+            <template #default="{ row }">
+              <span class="font-mono text-muted">
+                {{ resourceText(row, 'awmAmmo') }}/{{ resourceText(row, 'helmet6') }}/{{
+                  resourceText(row, 'armor6')
+                }}
+              </span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="特殊刀皮" width="110" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span class="skin-knife-text">{{ skinGroupText(row, 'melee') || '-' }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="人物红皮/金皮/枪皮" min-width="190" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span class="skin-summary-text">{{ characterAndWeaponSkinText(row) || '-' }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="号主备注" min-width="130" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span class="owner-remark text-muted">{{ ownerRemarkText(row) || '-' }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="租金 / 押金" width="125" align="right">
+            <template #default="{ row }">
+              <div class="price-stack">
+                <strong class="font-mono text-primary font-bold">{{
+                  rentAndDepositText(row).split('/')[0] || '-'
+                }}</strong>
+                <small class="font-mono text-muted"
+                  >押 {{ rentAndDepositText(row).split('/')[1] || '-' }}</small
+                >
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="比例" width="75" align="center">
+            <template #default="{ row }">
+              <span class="font-mono ratio-badge">{{ formatRatio(row) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="预计租期" width="105" align="center">
+            <template #default="{ row }">
+              <div class="duration-stack" :title="estimateTitle(row)">
+                <span class="duration-main font-mono">{{
+                  formatEstimatedRentalDuration(row)
+                }}</span>
+                <small v-if="getDailyLoss(row)" class="daily-loss font-mono"
+                  >日耗 {{ getDailyLoss(row) }}</small
+                >
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="80" fixed="right" align="center">
+            <template #default="{ row }">
+              <RouterLink :to="adminPath(`listings/${row.id}`)">
+                <el-button link type="primary" size="small">详情</el-button>
+              </RouterLink>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <AdminTablePagination
+        v-if="totalListings > 0"
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :total="totalListings"
+        @page-change="loadListings"
+      />
+    </section>
+  </div>
 </template>
+
+<style scoped>
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
+}
+
+/* ================= 头部卡片 ================= */
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #2563eb;
+  background: #eff6ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+}
+
+.metric-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 18px 20px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.metric-card.clickable {
+  cursor: pointer;
+}
+
+.metric-card.clickable:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.metric-card.active {
+  border-color: #3b82f6;
+  box-shadow:
+    0 0 0 2px rgba(59, 130, 246, 0.15),
+    0 8px 24px rgba(59, 130, 246, 0.1);
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+}
+
+.metric-card--total::before {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+.metric-card--published::before {
+  background: linear-gradient(90deg, #10b981, #34d399);
+}
+
+.metric-card--rented::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.metric-card--pending::before {
+  background: linear-gradient(90deg, #f43f5e, #fb7185);
+}
+
+.metric-icon-wrap {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.metric-icon-wrap.indigo {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.metric-icon-wrap.emerald {
+  background: #ecfdf5;
+  color: #10b981;
+}
+
+.metric-icon-wrap.amber {
+  background: #fffbeb;
+  color: #f59e0b;
+}
+
+.metric-icon-wrap.rose {
+  background: #fff1f2;
+  color: #f43f5e;
+}
+
+.metric-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metric-label {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+.metric-val {
+  font-size: 22px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.3px;
+  line-height: 1.2;
+}
+
+.indigo-val {
+  color: #4f46e5;
+}
+
+.emerald-val {
+  color: #059669;
+}
+
+.amber-val {
+  color: #d97706;
+}
+
+.rose-val {
+  color: #e11d48;
+}
+
+.metric-sub-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  width: fit-content;
+}
+
+.metric-sub-pill.info {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.metric-sub-pill.success {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.metric-sub-pill.warning {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.metric-sub-pill.danger {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+/* ================= 筛选面板 ================= */
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  align-items: flex-end;
+  gap: 14px 16px;
+}
+
+.filter-grid :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.filter-grid :deep(.el-form-item__label) {
+  padding-bottom: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+}
+
+.filter-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.range-input-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+}
+
+.range-num-input {
+  flex: 1;
+  width: 100% !important;
+}
+
+.range-sep {
+  color: #94a3b8;
+  font-size: 13px;
+}
+
+.full-control {
+  width: 100%;
+}
+
+.admin-filter-chip {
+  width: 100%;
+  height: 32px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #ffffff;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  color: #606266;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.admin-filter-chip:hover {
+  border-color: #409eff;
+  color: #409eff;
+}
+
+.admin-filter-chip.active {
+  border-color: #409eff;
+  background: #ecf5ff;
+  color: #409eff;
+  font-weight: 600;
+}
+
+/* ================= 表格卡片 ================= */
+.table-section-card {
+  padding-bottom: 16px;
+}
+
+.table-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.table-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.header-icon {
+  color: #2563eb;
+  font-size: 18px;
+}
+
+.count-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #2563eb;
+  background: #eff6ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+
+.table-container {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.custom-enterprise-table :deep(.el-table__header-wrapper th) {
+  background-color: #f8fafc !important;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 11px 0;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.custom-enterprise-table :deep(.el-table__body-wrapper td) {
+  padding: 10px 0;
+  font-size: 13px;
+  color: #334155;
+}
+
+.listing-code {
+  color: #2563eb;
+  font-size: 13px;
+}
+
+.platform-tag {
+  font-size: 12px;
+  color: #475569;
+}
+
+.price-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1px;
+}
+
+.ratio-badge {
+  font-size: 11.5px;
+  color: #0284c7;
+  background: #e0f2fe;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.duration-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+}
+
+.duration-main {
+  font-size: 12px;
+  color: #334155;
+}
+
+.daily-loss {
+  font-size: 10.5px;
+  color: #94a3b8;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.text-primary {
+  color: #2563eb;
+}
+
+.text-amber {
+  color: #d97706;
+}
+
+.text-muted {
+  color: #64748b;
+}
+</style>
diff --git a/frontend/src/features/admin/views/AdminMohongCategoriesView.vue b/frontend/src/features/admin/views/AdminMohongCategoriesView.vue
index 6c623b9..040e3ee 100644
--- a/frontend/src/features/admin/views/AdminMohongCategoriesView.vue
+++ b/frontend/src/features/admin/views/AdminMohongCategoriesView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Refresh } from '@element-plus/icons-vue'
+import { Check, Folder, Plus, Present, Refresh } from '@element-plus/icons-vue'
 import {
   createAdminMohongCategory,
   deleteAdminMohongCategory,
@@ -23,6 +23,11 @@ const form = reactive({
   status: 'enabled',
 })
 
+const enabledCount = computed(() => items.value.filter(i => i.status === 'enabled').length)
+const totalProductCount = computed(() =>
+  items.value.reduce((sum, i) => sum + Number(i.product_count || 0), 0)
+)
+
 onMounted(load)
 
 async function load() {
@@ -91,92 +96,483 @@ async function handleDelete(item: MohongCategory) {
 </script>
 
 <template>
-  <div class="admin-page">
-    <div class="page-head">
-      <div>
-        <h2>撞车分类</h2>
-        <p>大红 / 四格大红 / 炫彩等分类，前台左侧筛选使用</p>
-      </div>
-      <div class="actions">
-        <el-button :icon="Refresh" @click="load">刷新</el-button>
-        <el-button type="primary" :icon="Plus" @click="openCreate">新建分类</el-button>
-      </div>
-    </div>
+  <div class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><Present /></el-icon>
+            <span>CRASH MALL CATEGORIES</span>
+          </div>
+          <h1 class="page-title">撞车分类</h1>
+          <p class="page-subtitle">
+            大红 / 四格大红 / 炫彩等分类管理，用于前台撞车商城左侧导航、筛选与商品归类。
+          </p>
+        </div>
 
-    <el-table v-loading="loading" :data="items" border stripe>
-      <el-table-column prop="name" label="名称" min-width="140" />
-      <el-table-column prop="code" label="编码" width="140" />
-      <el-table-column prop="sort_order" label="排序" width="90" />
-      <el-table-column label="商品数" width="90">
-        <template #default="{ row }">{{ row.product_count }}</template>
-      </el-table-column>
-      <el-table-column label="状态" width="100">
-        <template #default="{ row }">
-          {{ row.status === 'enabled' ? '启用' : '停用' }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="160" fixed="right">
-        <template #default="{ row }">
-          <el-button link type="primary" @click="openEdit(row)">编辑</el-button>
-          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        <div class="toolbar-actions">
+          <el-button :icon="Refresh" @click="load">刷新</el-button>
+          <el-button type="primary" :icon="Plus" @click="openCreate">新建分类</el-button>
+        </div>
+      </div>
+    </header>
 
+    <!-- 汇总指标卡片 -->
+    <section class="summary-metric-grid">
+      <div class="metric-card metric-card--total">
+        <div class="metric-icon-wrap indigo">
+          <el-icon><Folder /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">分类总数</span>
+          <strong class="metric-val indigo-val">{{ items.length }} 个</strong>
+          <span class="metric-sub-pill info">全部品类</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--enabled">
+        <div class="metric-icon-wrap emerald">
+          <el-icon><Check /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">启用中分类</span>
+          <strong class="metric-val emerald-val">{{ enabledCount }} 个</strong>
+          <span class="metric-sub-pill success">前台可见</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--products">
+        <div class="metric-icon-wrap amber">
+          <el-icon><Present /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">覆盖撞车商品</span>
+          <strong class="metric-val amber-val">{{ totalProductCount }} 件</strong>
+          <span class="metric-sub-pill warning">挂载商品</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 表格卡片 -->
+    <section class="section-card table-section-card">
+      <div class="table-card-header">
+        <div class="table-header-title">
+          <el-icon class="header-icon"><Folder /></el-icon>
+          <span>分类列表</span>
+        </div>
+        <span class="count-badge">共 {{ items.length }} 个分类</span>
+      </div>
+
+      <div class="table-container">
+        <el-table
+          v-loading="loading"
+          class="custom-enterprise-table"
+          :data="items"
+          stripe
+          empty-text="暂无分类数据"
+        >
+          <el-table-column label="分类名称" min-width="160">
+            <template #default="{ row }">
+              <strong class="category-name">{{ row.name }}</strong>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="英文/标识编码" min-width="140">
+            <template #default="{ row }">
+              <span class="font-mono text-muted">{{ row.code || '-' }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="排序权重" width="110" align="center">
+            <template #default="{ row }">
+              <span class="font-mono font-semibold">{{ row.sort_order }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="关联商品数" width="130" align="center">
+            <template #default="{ row }">
+              <el-tag size="small" type="info" class="count-tag font-mono">
+                {{ row.product_count }} 件
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="状态" width="110" align="center">
+            <template #default="{ row }">
+              <el-tag
+                :type="row.status === 'enabled' ? 'success' : 'info'"
+                size="small"
+                class="status-pill"
+              >
+                {{ row.status === 'enabled' ? '启用中' : '已停用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="140" fixed="right" align="center">
+            <template #default="{ row }">
+              <div class="action-btn-group">
+                <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+                <el-button link type="danger" size="small" @click="handleDelete(row)"
+                  >删除</el-button
+                >
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </section>
+
+    <!-- 新建/编辑分类弹窗 -->
     <el-dialog
       v-model="dialogVisible"
-      :title="editingId ? '编辑分类' : '新建分类'"
+      :title="editingId ? '编辑撞车分类' : '新建撞车分类'"
       width="480px"
       destroy-on-close
     >
-      <el-form label-width="80px">
-        <el-form-item label="名称" required>
-          <el-input v-model="form.name" maxlength="64" />
+      <el-form label-position="top">
+        <el-form-item label="分类名称" required>
+          <el-input v-model="form.name" placeholder="例如：大红 / 炫彩" maxlength="32" />
         </el-form-item>
-        <el-form-item label="编码">
-          <el-input v-model="form.code" maxlength="64" placeholder="可选" />
+        <el-form-item label="分类标识编码（可选）">
+          <el-input v-model="form.code" placeholder="例如：da_hong / xuancai" maxlength="32" />
         </el-form-item>
-        <el-form-item label="排序">
-          <el-input-number v-model="form.sort_order" />
-          <span class="hint">越小越靠前</span>
+        <el-form-item label="排序权重（数字越大越靠前）">
+          <el-input-number v-model="form.sort_order" :min="0" :max="9999" class="full-control" />
         </el-form-item>
-        <el-form-item label="状态">
-          <el-select v-model="form.status" style="width: 160px">
-            <el-option label="启用" value="enabled" />
-            <el-option label="停用" value="disabled" />
-          </el-select>
+        <el-form-item label="启用状态">
+          <el-radio-group v-model="form.status" class="direction-group">
+            <el-radio-button value="enabled">启用展示</el-radio-button>
+            <el-radio-button value="disabled">停用隐藏</el-radio-button>
+          </el-radio-group>
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
+        <div class="modal-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="saving" @click="handleSave">确认保存</el-button>
+        </div>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <style scoped>
-.admin-page {
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
+}
+
+/* ================= 头部卡片 ================= */
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #db2777;
+  background: #fdf2f8;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
   display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 16px;
 }
-.page-head {
+
+.metric-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 18px 20px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
   display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+}
+
+.metric-card--total::before {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+.metric-card--enabled::before {
+  background: linear-gradient(90deg, #10b981, #34d399);
+}
+
+.metric-card--products::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.metric-icon-wrap {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.metric-icon-wrap.indigo {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.metric-icon-wrap.emerald {
+  background: #ecfdf5;
+  color: #10b981;
+}
+
+.metric-icon-wrap.amber {
+  background: #fffbeb;
+  color: #f59e0b;
+}
+
+.metric-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metric-label {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+.metric-val {
+  font-size: 22px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.3px;
+  line-height: 1.2;
+}
+
+.indigo-val {
+  color: #4f46e5;
+}
+
+.emerald-val {
+  color: #059669;
+}
+
+.amber-val {
+  color: #d97706;
+}
+
+.metric-sub-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  width: fit-content;
+}
+
+.metric-sub-pill.info {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.metric-sub-pill.success {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.metric-sub-pill.warning {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+/* ================= 表格卡片 ================= */
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.table-section-card {
+  padding-bottom: 16px;
+}
+
+.table-card-header {
+  display: flex;
+  align-items: center;
   justify-content: space-between;
-  align-items: flex-start;
-  gap: 12px;
+  margin-bottom: 16px;
 }
-.page-head h2 {
-  margin: 0 0 4px;
+
+.table-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
 }
-.page-head p {
-  margin: 0;
-  color: #6b7a90;
-  font-size: 13px;
+
+.header-icon {
+  color: #db2777;
+  font-size: 18px;
 }
-.hint {
-  margin-left: 8px;
-  color: #8a94a6;
+
+.count-badge {
   font-size: 12px;
+  font-weight: 600;
+  color: #db2777;
+  background: #fdf2f8;
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+
+.table-container {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.custom-enterprise-table :deep(.el-table__header-wrapper th) {
+  background-color: #f8fafc !important;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 12px 0;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.custom-enterprise-table :deep(.el-table__body-wrapper td) {
+  padding: 12px 0;
+  font-size: 13px;
+  color: #334155;
+}
+
+.category-name {
+  font-size: 13.5px;
+  color: #0f172a;
+}
+
+.count-tag {
+  font-weight: 600;
+}
+
+.status-pill {
+  font-weight: 600;
+}
+
+.text-muted {
+  color: #64748b;
+}
+
+.action-btn-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.full-control {
+  width: 100%;
+}
+
+.direction-group {
+  width: 100%;
+}
+
+.direction-group :deep(.el-radio-button) {
+  flex: 1;
+}
+
+.direction-group :deep(.el-radio-button__inner) {
+  width: 100%;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminMohongConfigView.vue b/frontend/src/features/admin/views/AdminMohongConfigView.vue
index 47023e6..460ee43 100644
--- a/frontend/src/features/admin/views/AdminMohongConfigView.vue
+++ b/frontend/src/features/admin/views/AdminMohongConfigView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Upload } from '@element-plus/icons-vue'
+import { Check, Setting, Upload } from '@element-plus/icons-vue'
 import {
   fetchAdminMohongConfig,
   updateAdminMohongConfig,
@@ -9,6 +9,7 @@ import {
 } from '@/features/mohong/api/mohong'
 import { uploadAdminFile } from '@/shared/api/files'
 import { readError } from '@/shared/utils/error'
+import AuthImage from '@/shared/components/business/AuthImage.vue'
 
 const loading = ref(false)
 const saving = ref(false)
@@ -17,6 +18,17 @@ const form = reactive<MohongConfig>({
   order_copy_template: '',
 })
 
+const templateVariables = [
+  { key: '{{order_no}}', label: '订单号' },
+  { key: '{{created_at}}', label: '下单时间' },
+  { key: '{{items}}', label: '商品清单明细' },
+  { key: '{{product_title}}', label: '商品主标题' },
+  { key: '{{quantity}}', label: '购买件数' },
+  { key: '{{amount}}', label: '实付总额' },
+  { key: '{{buyer_phone}}', label: '买家手机号' },
+  { key: '{{unit}}', label: '计价单位' },
+]
+
 onMounted(load)
 
 async function load() {
@@ -39,7 +51,7 @@ async function handleSave() {
       order_copy_template: form.order_copy_template,
     })
     Object.assign(form, config)
-    ElMessage.success('已保存')
+    ElMessage.success('撞车配置已成功保存')
   } catch (error) {
     ElMessage.error(readError(error, '保存失败'))
   } finally {
@@ -51,98 +63,304 @@ async function uploadQrcode(file: File) {
   try {
     const uploaded = await uploadAdminFile(file, 'crash')
     form.default_qrcode_url = uploaded.url
-    ElMessage.success('上传成功')
+    ElMessage.success('二维码上传成功')
   } catch (error) {
     ElMessage.error(readError(error, '上传失败'))
   }
   return false
 }
+
+function insertVariable(v: string) {
+  form.order_copy_template = (form.order_copy_template || '') + ` ${v}`
+}
 </script>
 
 <template>
-  <div v-loading="loading" class="admin-page">
-    <div class="page-head">
-      <div>
-        <h2>撞车配置</h2>
-        <p>
-          全局默认固定二维码与订单复制模板。商品可覆盖默认二维码；支付后用户在订单详情扫码并复制信息联系客服。
-        </p>
-      </div>
-      <el-button type="primary" :loading="saving" @click="handleSave">保存配置</el-button>
-    </div>
+  <div v-loading="loading" class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><Setting /></el-icon>
+            <span>CRASH MALL CONFIGURATION</span>
+          </div>
+          <h1 class="page-title">撞车配置</h1>
+          <p class="page-subtitle">配置撞车商城的全局默认接待二维码与订单一键复制通知文案模板。</p>
+        </div>
 
-    <el-form label-width="140px" class="config-form">
-      <el-form-item label="默认固定二维码">
-        <div class="qr-row">
-          <el-image
-            v-if="form.default_qrcode_url"
-            :src="form.default_qrcode_url"
-            fit="contain"
-            style="width: 160px; height: 160px; border-radius: 12px; background: #f7f9fc"
-          />
-          <div class="qr-actions">
-            <el-upload :show-file-list="false" accept="image/*" :before-upload="uploadQrcode">
-              <el-button :icon="Upload">上传二维码</el-button>
-            </el-upload>
-            <el-input v-model="form.default_qrcode_url" placeholder="或直接填写图片 URL" />
+        <div class="toolbar-actions">
+          <el-button type="primary" :icon="Check" :loading="saving" @click="handleSave">
+            保存配置
+          </el-button>
+        </div>
+      </div>
+    </header>
+
+    <!-- 配置面板 -->
+    <div class="config-grid-layout">
+      <!-- 二维码配置卡片 -->
+      <section class="section-card">
+        <div class="table-card-header">
+          <div class="table-header-title">
+            <el-icon class="header-icon"><Setting /></el-icon>
+            <span>默认客服接待二维码</span>
           </div>
         </div>
-      </el-form-item>
-      <el-form-item label="复制文案模板">
-        <el-input v-model="form.order_copy_template" type="textarea" :rows="8" />
-        <div class="hint">
-          可用变量：&#123;&#123;order_no&#125;&#125; &#123;&#123;created_at&#125;&#125;
-          &#123;&#123;items&#125;&#125;（多商品明细） &#123;&#123;product_title&#125;&#125;
-          &#123;&#123;quantity&#125;&#125; &#123;&#123;amount&#125;&#125;
-          &#123;&#123;buyer_name&#125;&#125; &#123;&#123;buyer_phone&#125;&#125;
-          &#123;&#123;unit&#125;&#125;
+        <p class="section-desc">
+          若具体撞车商品未配置专属接待码，前台订单支付后将默认向买家展示此全局二维码。
+        </p>
+
+        <div class="qr-upload-panel">
+          <div class="qr-preview-area">
+            <AuthImage
+              v-if="form.default_qrcode_url"
+              :source="form.default_qrcode_url"
+              fit="contain"
+              class="qr-img-box"
+            />
+            <div v-else class="qr-empty-box">暂未上传二维码</div>
+          </div>
+          <div class="qr-action-area">
+            <el-upload :show-file-list="false" accept="image/*" :before-upload="uploadQrcode">
+              <el-button :icon="Upload">上传新二维码图片</el-button>
+            </el-upload>
+            <el-input
+              v-model="form.default_qrcode_url"
+              clearable
+              placeholder="或直接粘贴图片存储 URL / 对象键"
+            />
+          </div>
         </div>
-      </el-form-item>
-    </el-form>
+      </section>
+
+      <!-- 模板文案配置卡片 -->
+      <section class="section-card">
+        <div class="table-card-header">
+          <div class="table-header-title">
+            <el-icon class="header-icon"><Setting /></el-icon>
+            <span>买家联系客服一键复制文案模板</span>
+          </div>
+        </div>
+        <p class="section-desc">
+          买家在订单完成支付后，点击「复制订单信息」时自动生成的格式化文本。
+        </p>
+
+        <el-input
+          v-model="form.order_copy_template"
+          type="textarea"
+          :rows="7"
+          placeholder="编写格式化订单文本模板..."
+        />
+
+        <div class="variables-box">
+          <span class="var-title">点击快速插入可用动态变量：</span>
+          <div class="var-chips">
+            <span
+              v-for="item in templateVariables"
+              :key="item.key"
+              class="var-chip"
+              @click="insertVariable(item.key)"
+            >
+              {{ item.label }} <small class="font-mono">{{ item.key }}</small>
+            </span>
+          </div>
+        </div>
+      </section>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.admin-page {
-  display: grid;
-  gap: 16px;
-}
-.page-head {
+.finance-page-container {
   display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
+}
+
+/* ================= 头部卡片 ================= */
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
+  display: flex;
+  align-items: flex-start;
   justify-content: space-between;
-  align-items: flex-start;
-  gap: 12px;
-}
-.page-head h2 {
-  margin: 0 0 4px;
-}
-.page-head p {
-  margin: 0;
-  color: #6b7a90;
-  font-size: 13px;
-}
-.config-form {
-  max-width: 820px;
-  padding: 20px;
-  border-radius: 12px;
-  background: #fff;
-  border: 1px solid #eef1f5;
-}
-.qr-row {
-  display: flex;
   gap: 16px;
-  align-items: flex-start;
-  width: 100%;
+  flex-wrap: wrap;
 }
-.qr-actions {
-  flex: 1;
-  display: grid;
-  gap: 10px;
+
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
-.hint {
-  margin-top: 8px;
-  color: #8a94a6;
-  font-size: 12px;
+
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #db2777;
+  background: #fdf2f8;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
   line-height: 1.5;
 }
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* ================= 卡片容器 ================= */
+.config-grid-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 900px;
+}
+
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.table-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.table-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.header-icon {
+  color: #db2777;
+  font-size: 18px;
+}
+
+.section-desc {
+  margin: 0 0 16px;
+  font-size: 13px;
+  color: #64748b;
+}
+
+.qr-upload-panel {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.qr-preview-area {
+  width: 150px;
+  height: 150px;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.qr-img-box {
+  width: 100%;
+  height: 100%;
+}
+
+.qr-empty-box {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.qr-action-area {
+  flex: 1;
+  min-width: 260px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.variables-box {
+  margin-top: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.var-title {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.var-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.var-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  font-size: 12px;
+  color: #334155;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.var-chip:hover {
+  background: #eef2ff;
+  border-color: #c7d2fe;
+  color: #4f46e5;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
 </style>
diff --git a/frontend/src/features/admin/views/AdminMohongOrdersView.vue b/frontend/src/features/admin/views/AdminMohongOrdersView.vue
index 5d39446..2fceebf 100644
--- a/frontend/src/features/admin/views/AdminMohongOrdersView.vue
+++ b/frontend/src/features/admin/views/AdminMohongOrdersView.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Money, Refresh } from '@element-plus/icons-vue'
+import {
+  Clock,
+  DocumentChecked,
+  Refresh,
+  Search,
+  Tickets,
+  UserFilled,
+} from '@element-plus/icons-vue'
 import {
   cancelAdminMohongOrder,
   completeAdminMohongOrder,
@@ -26,6 +33,10 @@ const status = ref('')
 const detail = ref<MohongOrder | null>(null)
 const refundingId = ref<number | null>(null)
 
+const paidCount = computed(() => items.value.filter(i => i.status === 'paid').length)
+const receivingCount = computed(() => items.value.filter(i => i.status === 'receiving').length)
+const completedCount = computed(() => items.value.filter(i => i.status === 'completed').length)
+
 onMounted(load)
 
 async function load() {
@@ -46,6 +57,18 @@ async function load() {
   }
 }
 
+function handleQuery() {
+  page.value = 1
+  void load()
+}
+
+function resetFilters() {
+  keyword.value = ''
+  status.value = ''
+  page.value = 1
+  void load()
+}
+
 async function handleReceive(row: MohongOrder) {
   try {
     await ElMessageBox.confirm(`确认接待订单 ${row.order_no}？标记后状态变为「接待中」。`, '提示', {
@@ -138,207 +161,703 @@ function canRefund(row: MohongOrder) {
 async function copyText(text: string) {
   try {
     await navigator.clipboard.writeText(text)
-    ElMessage.success('已复制')
+    ElMessage.success('已复制到剪贴板')
   } catch {
     ElMessage.error('复制失败')
   }
 }
+
+function statusTagType(status: string): 'success' | 'warning' | 'danger' | 'info' {
+  if (status === 'completed') return 'success'
+  if (status === 'receiving' || status === 'paid') return 'warning'
+  if (status === 'cancelled') return 'info'
+  return 'info'
+}
 </script>
 
 <template>
-  <div class="admin-page">
-    <div class="page-head">
-      <div>
-        <h2>撞车订单</h2>
-        <p>查看订单、接待买家、完成履约、复制用户订单信息</p>
+  <div class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><Tickets /></el-icon>
+            <span>CRASH MALL ORDERS</span>
+          </div>
+          <h1 class="page-title">撞车订单</h1>
+          <p class="page-subtitle">全量监控撞车商城订单流转、客服接待状态、履约进度与退款审核。</p>
+        </div>
+
+        <div class="toolbar-actions">
+          <el-button :icon="Refresh" @click="load">刷新</el-button>
+        </div>
       </div>
-      <el-button :icon="Refresh" @click="load">刷新</el-button>
-    </div>
+    </header>
 
-    <div class="filters">
-      <el-input
-        v-model="keyword"
-        clearable
-        placeholder="订单号"
-        style="width: 220px"
-        @keyup.enter="load"
-      />
-      <el-select v-model="status" clearable placeholder="状态" style="width: 140px">
-        <el-option label="待支付" value="pending_payment" />
-        <el-option label="已支付" value="paid" />
-        <el-option label="接待中" value="receiving" />
-        <el-option label="已完成" value="completed" />
-        <el-option label="已取消" value="cancelled" />
-        <el-option label="已退款" value="refunded" />
-      </el-select>
-      <el-button type="primary" @click=";((page = 1), load())">查询</el-button>
-    </div>
-
-    <el-table v-loading="loading" :data="items" border stripe>
-      <el-table-column prop="order_no" label="订单号" min-width="170" />
-      <el-table-column prop="product_title" label="商品" min-width="140" />
-      <el-table-column label="数量" width="70" prop="quantity" />
-      <el-table-column label="金额" width="100">
-        <template #default="{ row }">¥{{ row.amount || formatCent(row.amount_cent) }}</template>
-      </el-table-column>
-      <el-table-column label="买家" min-width="140">
-        <template #default="{ row }">
-          {{ row.buyer_nickname || '-' }}
-          <div class="sub">{{ row.buyer_phone || '' }}</div>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" width="100">
-        <template #default="{ row }">{{ mohongOrderStatusLabel(row.status) }}</template>
-      </el-table-column>
-      <el-table-column label="下单时间" min-width="160">
-        <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
-      </el-table-column>
-      <el-table-column label="操作" width="310" fixed="right">
-        <template #default="{ row }">
-          <el-button link type="primary" @click="detail = row">详情</el-button>
-          <el-button v-if="canReceive(row)" link type="warning" @click="handleReceive(row)">
-            接待
-          </el-button>
-          <el-button v-if="canComplete(row)" link type="success" @click="handleComplete(row)">
-            完成
-          </el-button>
-          <el-button v-if="canCancel(row)" link type="danger" @click="handleCancel(row)">
-            取消
-          </el-button>
-          <el-button
-            v-if="canRefund(row)"
-            link
-            type="warning"
-            :icon="Money"
-            :loading="refundingId === row.id"
-            @click="handleRefund(row)"
-          >
-            退款
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <AdminTablePagination
-      :current-page="page"
-      :page-size="pageSize"
-      :total="total"
-      @update:current-page="page = $event"
-      @update:page-size="pageSize = $event"
-      @page-change="load"
-    />
-
-    <el-drawer
-      :model-value="Boolean(detail)"
-      size="420px"
-      title="订单详情"
-      destroy-on-close
-      @update:model-value="(v: boolean) => !v && (detail = null)"
-    >
-      <template v-if="detail">
-        <el-descriptions :column="1" border>
-          <el-descriptions-item label="订单号">{{ detail.order_no }}</el-descriptions-item>
-          <el-descriptions-item label="状态">
-            {{ mohongOrderStatusLabel(detail.status) }}
-          </el-descriptions-item>
-          <el-descriptions-item label="商品">{{ detail.product_title }}</el-descriptions-item>
-          <el-descriptions-item label="数量">{{ detail.quantity }}</el-descriptions-item>
-          <el-descriptions-item label="金额">
-            ¥{{ detail.amount || formatCent(detail.amount_cent) }}
-          </el-descriptions-item>
-          <el-descriptions-item label="买家">
-            {{ detail.buyer_nickname }} {{ detail.buyer_phone }}
-          </el-descriptions-item>
-        </el-descriptions>
-        <div v-if="detail.items?.length" class="items-box">
-          <strong>商品明细</strong>
-          <div v-for="item in detail.items" :key="item.product_id" class="item-line">
-            <span>{{ item.title }} × {{ item.quantity }}</span>
-            <em>¥{{ item.amount || formatCent(item.amount_cent) }}</em>
-          </div>
+    <!-- 汇总指标卡片 -->
+    <section class="summary-metric-grid">
+      <div class="metric-card metric-card--total">
+        <div class="metric-icon-wrap indigo">
+          <el-icon><Tickets /></el-icon>
         </div>
-        <div v-if="detail.copy_text" class="copy-box">
-          <div class="copy-head">
-            <strong>复制文案</strong>
-            <el-button size="small" @click="copyText(detail.copy_text)">复制</el-button>
-          </div>
-          <pre>{{ detail.copy_text }}</pre>
+        <div class="metric-info">
+          <span class="metric-label">撞车全量订单</span>
+          <strong class="metric-val indigo-val">{{ total }} 笔</strong>
+          <span class="metric-sub-pill info">订单总数</span>
         </div>
-        <div v-if="detail.qrcode_url_snapshot" class="qr-box">
-          <strong>二维码快照</strong>
-          <el-image
-            :src="detail.qrcode_url_snapshot"
-            fit="contain"
-            style="width: 180px; height: 180px"
+      </div>
+
+      <div class="metric-card metric-card--paid">
+        <div class="metric-icon-wrap amber">
+          <el-icon><Clock /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页待接待订单</span>
+          <strong class="metric-val amber-val">{{ paidCount }} 笔</strong>
+          <span class="metric-sub-pill warning">等待客服接入</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--receiving">
+        <div class="metric-icon-wrap emerald">
+          <el-icon><UserFilled /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页接待中</span>
+          <strong class="metric-val emerald-val">{{ receivingCount }} 笔</strong>
+          <span class="metric-sub-pill success">正在履约</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--completed">
+        <div class="metric-icon-wrap rose">
+          <el-icon><DocumentChecked /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页已完结订单</span>
+          <strong class="metric-val rose-val">{{ completedCount }} 笔</strong>
+          <span class="metric-sub-pill danger">已完成履约</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 筛选面板 -->
+    <section class="section-card filter-card">
+      <el-form class="filter-grid" label-position="top" @submit.prevent="handleQuery">
+        <el-form-item label="关键词检索">
+          <el-input
+            v-model="keyword"
+            clearable
+            placeholder="搜索订单号 / 买家手机号 / 账号"
+            @keyup.enter="handleQuery"
+            @clear="handleQuery"
           />
+        </el-form-item>
+
+        <el-form-item label="订单状态">
+          <el-select
+            v-model="status"
+            clearable
+            placeholder="全部状态"
+            class="full-control"
+            @change="handleQuery"
+          >
+            <el-option label="待支付" value="pending_payment" />
+            <el-option label="已支付（待接待）" value="paid" />
+            <el-option label="接待中" value="receiving" />
+            <el-option label="已完成" value="completed" />
+            <el-option label="已取消" value="cancelled" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label=" ">
+          <div class="filter-actions">
+            <el-button type="primary" :icon="Search" :loading="loading" @click="handleQuery">
+              查询
+            </el-button>
+            <el-button @click="resetFilters">重置</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </section>
+
+    <!-- 订单数据表格 -->
+    <section class="section-card table-section-card">
+      <div class="table-card-header">
+        <div class="table-header-title">
+          <el-icon class="header-icon"><Tickets /></el-icon>
+          <span>撞车订单列表</span>
+        </div>
+        <span class="count-badge">共 {{ total }} 笔订单</span>
+      </div>
+
+      <div class="table-container">
+        <el-table
+          v-loading="loading"
+          class="custom-enterprise-table"
+          :data="items"
+          stripe
+          empty-text="未找到匹配的撞车订单"
+        >
+          <el-table-column label="订单号" min-width="190" fixed="left">
+            <template #default="{ row }">
+              <span class="font-mono text-primary font-bold">{{ row.order_no }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="购买商品" min-width="180" show-overflow-tooltip>
+            <template #default="{ row }">
+              <div class="product-info-cell">
+                <strong class="p-title">{{ row.product_title }}</strong>
+                <small class="p-qty font-mono">x {{ row.quantity }} 份</small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="买家手机" width="135">
+            <template #default="{ row }">
+              <span class="font-mono">{{ row.buyer_phone || '-' }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="订单金额" width="120" align="right">
+            <template #default="{ row }">
+              <strong class="font-mono text-emerald font-bold"
+                >¥{{ formatCent(row.amount_cent) }}</strong
+              >
+            </template>
+          </el-table-column>
+
+          <el-table-column label="订单状态" width="120" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusTagType(row.status)" size="small" class="status-pill">
+                {{ mohongOrderStatusLabel(row.status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="接待客服" width="120" align="center">
+            <template #default="{ row }">
+              <span class="text-muted">{{
+                row.receiver_admin_id ? `客服 ${row.receiver_admin_id}` : '未指派'
+              }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="下单时间" min-width="165">
+            <template #default="{ row }">
+              <span class="time-cell">{{ formatDateTime(row.created_at) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="230" fixed="right" align="center">
+            <template #default="{ row }">
+              <div class="action-btn-group">
+                <el-button link type="primary" size="small" @click="detail = row">详情</el-button>
+                <el-button
+                  v-if="canReceive(row)"
+                  link
+                  type="primary"
+                  size="small"
+                  @click="handleReceive(row)"
+                >
+                  接待
+                </el-button>
+                <el-button
+                  v-if="canComplete(row)"
+                  link
+                  type="success"
+                  size="small"
+                  @click="handleComplete(row)"
+                >
+                  完成
+                </el-button>
+                <el-button
+                  v-if="canCancel(row)"
+                  link
+                  type="danger"
+                  size="small"
+                  @click="handleCancel(row)"
+                >
+                  取消
+                </el-button>
+                <el-button
+                  v-if="canRefund(row)"
+                  link
+                  type="warning"
+                  size="small"
+                  :loading="refundingId === row.id"
+                  @click="handleRefund(row)"
+                >
+                  退款
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <AdminTablePagination
+        v-if="total > 0"
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        :total="total"
+        @change="load"
+      />
+    </section>
+
+    <!-- 订单详情弹窗 -->
+    <el-dialog v-model="detail" title="撞车订单详情" width="560px" destroy-on-close>
+      <div v-if="detail" class="detail-body">
+        <div class="detail-grid">
+          <div class="detail-item">
+            <span class="label">订单号</span>
+            <span class="val font-mono" @click="copyText(detail.order_no)">
+              {{ detail.order_no }} (点击复制)
+            </span>
+          </div>
+          <div class="detail-item">
+            <span class="label">商品名称</span>
+            <span class="val font-bold">{{ detail.product_title }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">购买数量</span>
+            <span class="val font-mono">{{ detail.quantity }} 份</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">实付总额</span>
+            <span class="val font-mono text-emerald font-bold"
+              >¥{{ formatCent(detail.amount_cent) }}</span
+            >
+          </div>
+          <div class="detail-item">
+            <span class="label">买家手机</span>
+            <span class="val font-mono">{{ detail.buyer_phone || '-' }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">订单状态</span>
+            <span class="val">
+              <el-tag :type="statusTagType(detail.status)" size="small">
+                {{ mohongOrderStatusLabel(detail.status) }}
+              </el-tag>
+            </span>
+          </div>
+          <div class="detail-item">
+            <span class="label">支付时间</span>
+            <span class="val">{{ formatDateTime(detail.paid_at, '-') }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">完成时间</span>
+            <span class="val">{{ formatDateTime(detail.completed_at, '-') }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">取消时间</span>
+            <span class="val">{{ formatDateTime(detail.cancelled_at, '-') }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">后台备注</span>
+            <span class="val">{{ detail.admin_remark || '无' }}</span>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="modal-footer">
+          <el-button @click="detail = null">关闭</el-button>
         </div>
       </template>
-    </el-drawer>
+    </el-dialog>
   </div>
 </template>
 
 <style scoped>
-.admin-page {
-  display: grid;
-  gap: 16px;
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
 }
-.page-head {
+
+/* ================= 头部卡片 ================= */
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
   display: flex;
-  justify-content: space-between;
   align-items: flex-start;
-}
-.page-head h2 {
-  margin: 0 0 4px;
-}
-.page-head p,
-.sub {
-  margin: 0;
-  color: #6b7a90;
-  font-size: 12px;
-}
-.filters {
-  display: flex;
-  gap: 10px;
+  justify-content: space-between;
+  gap: 16px;
   flex-wrap: wrap;
 }
-.items-box {
-  margin-top: 14px;
-  display: grid;
-  gap: 8px;
-}
-.item-line {
+
+.title-group {
   display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #db2777;
+  background: #fdf2f8;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 16px;
+}
+
+.metric-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 18px 20px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+}
+
+.metric-card--total::before {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+.metric-card--paid::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.metric-card--receiving::before {
+  background: linear-gradient(90deg, #10b981, #34d399);
+}
+
+.metric-card--completed::before {
+  background: linear-gradient(90deg, #f43f5e, #fb7185);
+}
+
+.metric-icon-wrap {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.metric-icon-wrap.indigo {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.metric-icon-wrap.amber {
+  background: #fffbeb;
+  color: #f59e0b;
+}
+
+.metric-icon-wrap.emerald {
+  background: #ecfdf5;
+  color: #10b981;
+}
+
+.metric-icon-wrap.rose {
+  background: #fff1f2;
+  color: #f43f5e;
+}
+
+.metric-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metric-label {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+.metric-val {
+  font-size: 22px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.3px;
+  line-height: 1.2;
+}
+
+.indigo-val {
+  color: #4f46e5;
+}
+
+.amber-val {
+  color: #d97706;
+}
+
+.emerald-val {
+  color: #059669;
+}
+
+.rose-val {
+  color: #e11d48;
+}
+
+.metric-sub-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  width: fit-content;
+}
+
+.metric-sub-pill.info {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.metric-sub-pill.warning {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.metric-sub-pill.success {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.metric-sub-pill.danger {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+/* ================= 筛选面板 ================= */
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: 260px 180px auto;
+  align-items: flex-end;
+  gap: 14px 16px;
+}
+
+.filter-grid :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.filter-grid :deep(.el-form-item__label) {
+  padding-bottom: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+}
+
+.filter-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.full-control {
+  width: 100%;
+}
+
+/* ================= 表格卡片 ================= */
+.table-section-card {
+  padding-bottom: 16px;
+}
+
+.table-card-header {
+  display: flex;
+  align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.table-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.header-icon {
+  color: #db2777;
+  font-size: 18px;
+}
+
+.count-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #db2777;
+  background: #fdf2f8;
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+
+.table-container {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.custom-enterprise-table :deep(.el-table__header-wrapper th) {
+  background-color: #f8fafc !important;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 12px 0;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.custom-enterprise-table :deep(.el-table__body-wrapper td) {
+  padding: 12px 0;
   font-size: 13px;
   color: #334155;
 }
-.item-line em {
-  font-style: normal;
-  color: #ff6a00;
+
+.product-info-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.p-title {
+  font-size: 13px;
+  color: #0f172a;
+}
+
+.p-qty {
+  font-size: 11px;
+  color: #64748b;
+}
+
+.status-pill {
   font-weight: 600;
 }
-.copy-box,
-.qr-box {
-  margin-top: 16px;
-}
-.copy-head {
+
+.action-btn-group {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 8px;
+  justify-content: center;
+  gap: 4px;
 }
-.copy-box pre {
-  margin: 0;
-  padding: 12px;
-  background: #f7f9fc;
-  border-radius: 8px;
-  white-space: pre-wrap;
-  font-size: 13px;
-  line-height: 1.6;
+
+.time-cell {
+  font-size: 12px;
+  color: #64748b;
 }
-.qr-box {
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.text-primary {
+  color: #2563eb;
+}
+
+.text-emerald {
+  color: #059669;
+}
+
+.text-muted {
+  color: #94a3b8;
+}
+
+/* ================= 弹窗样式 ================= */
+.detail-grid {
   display: grid;
-  gap: 8px;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px 16px;
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.detail-item .label {
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.detail-item .val {
+  font-size: 13px;
+  color: #1e293b;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminMohongProductsView.vue b/frontend/src/features/admin/views/AdminMohongProductsView.vue
index 7b9fb92..66a87cf 100644
--- a/frontend/src/features/admin/views/AdminMohongProductsView.vue
+++ b/frontend/src/features/admin/views/AdminMohongProductsView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Refresh, Upload } from '@element-plus/icons-vue'
+import { Check, Money, Plus, Present, Refresh, Search, Upload } from '@element-plus/icons-vue'
 import {
   createAdminMohongProduct,
   deleteAdminMohongProduct,
@@ -15,6 +15,7 @@ import {
 import { uploadAdminFile } from '@/shared/api/files'
 import { formatCent, yuanToCent } from '@/shared/utils/money'
 import { readError } from '@/shared/utils/error'
+import AuthImage from '@/shared/components/business/AuthImage.vue'
 import AdminTablePagination from '../components/AdminTablePagination.vue'
 
 const loading = ref(false)
@@ -45,6 +46,9 @@ const form = reactive({
   use_custom_qrcode: false,
 })
 
+const onSaleCount = computed(() => items.value.filter(i => i.status === 'on_sale').length)
+const unlimitedStockCount = computed(() => items.value.filter(i => i.stock < 0).length)
+
 onMounted(async () => {
   await loadCategories()
   await load()
@@ -77,6 +81,19 @@ async function load() {
   }
 }
 
+function handleQuery() {
+  page.value = 1
+  void load()
+}
+
+function resetFilters() {
+  keyword.value = ''
+  categoryId.value = undefined
+  status.value = ''
+  page.value = 1
+  void load()
+}
+
 function openCreate() {
   editingId.value = null
   Object.assign(form, {
@@ -188,254 +205,833 @@ async function uploadImage(file: File, target: 'cover' | 'gallery' | 'qrcode') {
   return false
 }
 
+const beforeUploadCover = (file: File) => uploadImage(file, 'cover')
+const beforeUploadQrcode = (file: File) => uploadImage(file, 'qrcode')
+const beforeUploadGallery = (file: File) => uploadImage(file, 'gallery')
+
 function removeGallery(url: string) {
   form.image_urls = form.image_urls.filter(item => item !== url)
 }
 </script>
 
 <template>
-  <div class="admin-page">
-    <div class="page-head">
-      <div>
-        <h2>撞车商品</h2>
-        <p>管理商品图片、价格、库存与专属二维码</p>
+  <div class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><Present /></el-icon>
+            <span>CRASH MALL PRODUCTS</span>
+          </div>
+          <h1 class="page-title">撞车商品</h1>
+          <p class="page-subtitle">
+            管理撞车商城的商品图集、售价与划线价、库存与专属客服接待二维码。
+          </p>
+        </div>
+
+        <div class="toolbar-actions">
+          <el-button :icon="Refresh" @click="load">刷新</el-button>
+          <el-button type="primary" :icon="Plus" @click="openCreate">新建商品</el-button>
+        </div>
       </div>
-      <div class="actions">
-        <el-button :icon="Refresh" @click="load">刷新</el-button>
-        <el-button type="primary" :icon="Plus" @click="openCreate">新建商品</el-button>
+    </header>
+
+    <!-- 汇总指标卡片 -->
+    <section class="summary-metric-grid">
+      <div class="metric-card metric-card--total">
+        <div class="metric-icon-wrap indigo">
+          <el-icon><Present /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">撞车商品总库</span>
+          <strong class="metric-val indigo-val">{{ total }} 件</strong>
+          <span class="metric-sub-pill info">商品总库</span>
+        </div>
       </div>
-    </div>
 
-    <div class="filters">
-      <el-input
-        v-model="keyword"
-        clearable
-        placeholder="搜索标题"
-        style="width: 220px"
-        @keyup.enter="load"
-      />
-      <el-select v-model="categoryId" clearable placeholder="分类" style="width: 140px">
-        <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id" />
-      </el-select>
-      <el-select v-model="status" clearable placeholder="状态" style="width: 140px">
-        <el-option label="草稿" value="draft" />
-        <el-option label="上架中" value="on_sale" />
-        <el-option label="已下架" value="off_sale" />
-      </el-select>
-      <el-button type="primary" @click=";((page = 1), load())">查询</el-button>
-    </div>
+      <div class="metric-card metric-card--onsale">
+        <div class="metric-icon-wrap emerald">
+          <el-icon><Check /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页在售商品</span>
+          <strong class="metric-val emerald-val">{{ onSaleCount }} 件</strong>
+          <span class="metric-sub-pill success">正常销售</span>
+        </div>
+      </div>
 
-    <el-table v-loading="loading" :data="items" border stripe>
-      <el-table-column label="封面" width="80">
-        <template #default="{ row }">
-          <el-image
-            v-if="row.cover_url"
-            :src="row.cover_url"
-            style="width: 48px; height: 48px; border-radius: 8px"
-            fit="cover"
-          />
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="title" label="标题" min-width="160" />
-      <el-table-column label="分类" width="110">
-        <template #default="{ row }">{{ row.category_name || '-' }}</template>
-      </el-table-column>
-      <el-table-column label="价格" width="100">
-        <template #default="{ row }">¥{{ row.price || formatCent(row.price_cent) }}</template>
-      </el-table-column>
-      <el-table-column label="库存" width="90">
-        <template #default="{ row }">{{ row.stock < 0 ? '不限' : row.stock }}</template>
-      </el-table-column>
-      <el-table-column label="状态" width="100">
-        <template #default="{ row }">{{ mohongProductStatusLabel(row.status) }}</template>
-      </el-table-column>
-      <el-table-column prop="sort_order" label="排序" width="80" />
-      <el-table-column label="专属码" width="90">
-        <template #default="{ row }">{{ row.qrcode_image_url ? '是' : '默认' }}</template>
-      </el-table-column>
-      <el-table-column label="操作" width="160" fixed="right">
-        <template #default="{ row }">
-          <el-button link type="primary" @click="openEdit(row)">编辑</el-button>
-          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+      <div class="metric-card metric-card--unlimited">
+        <div class="metric-icon-wrap amber">
+          <el-icon><Money /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页不限库存</span>
+          <strong class="metric-val amber-val">{{ unlimitedStockCount }} 件</strong>
+          <span class="metric-sub-pill warning">无限货源</span>
+        </div>
+      </div>
+    </section>
 
-    <AdminTablePagination
-      :current-page="page"
-      :page-size="pageSize"
-      :total="total"
-      @update:current-page="page = $event"
-      @update:page-size="pageSize = $event"
-      @page-change="load"
-    />
-
-    <el-dialog
-      v-model="dialogVisible"
-      :title="editingId ? '编辑商品' : '新建商品'"
-      width="640px"
-      destroy-on-close
-    >
-      <el-form label-width="100px">
-        <el-form-item label="分类">
-          <el-select
-            v-model="form.category_id"
+    <!-- 筛选面板 -->
+    <section class="section-card filter-card">
+      <el-form class="filter-grid" label-position="top" @submit.prevent="handleQuery">
+        <el-form-item label="关键词检索">
+          <el-input
+            v-model="keyword"
             clearable
-            placeholder="选择分类"
-            style="width: 100%"
+            placeholder="搜索商品标题"
+            @keyup.enter="handleQuery"
+            @clear="handleQuery"
+          />
+        </el-form-item>
+
+        <el-form-item label="商品分类">
+          <el-select
+            v-model="categoryId"
+            clearable
+            placeholder="全部分类"
+            class="full-control"
+            @change="handleQuery"
           >
             <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id" />
           </el-select>
         </el-form-item>
-        <el-form-item label="标题" required>
-          <el-input v-model="form.title" maxlength="128" />
-        </el-form-item>
-        <el-form-item label="封面">
-          <div class="upload-row">
-            <el-image
-              v-if="form.cover_url"
-              :src="form.cover_url"
-              style="width: 80px; height: 80px; border-radius: 8px"
-              fit="cover"
-            />
-            <el-upload
-              :show-file-list="false"
-              accept="image/*"
-              :before-upload="(f: File) => uploadImage(f, 'cover')"
-            >
-              <el-button :icon="Upload">上传封面</el-button>
-            </el-upload>
-          </div>
-        </el-form-item>
-        <el-form-item label="详情图">
-          <div class="gallery">
-            <div v-for="url in form.image_urls" :key="url" class="gallery-item">
-              <el-image :src="url" fit="cover" />
-              <button type="button" @click="removeGallery(url)">×</button>
-            </div>
-            <el-upload
-              :show-file-list="false"
-              accept="image/*"
-              :before-upload="(f: File) => uploadImage(f, 'gallery')"
-            >
-              <el-button :icon="Upload">添加图片</el-button>
-            </el-upload>
-          </div>
-        </el-form-item>
-        <el-form-item label="描述">
-          <el-input v-model="form.description" type="textarea" :rows="4" />
-        </el-form-item>
-        <el-form-item label="售价(元)" required>
-          <el-input-number v-model="form.price_yuan" :min="0.1" :step="0.1" :precision="1" />
-        </el-form-item>
-        <el-form-item label="原价(元)">
-          <el-input-number v-model="form.original_price_yuan" :min="0" :step="0.1" :precision="1" />
-        </el-form-item>
-        <el-form-item label="单位">
-          <el-input v-model="form.unit" style="width: 120px" />
-        </el-form-item>
-        <el-form-item label="库存">
-          <el-input-number v-model="form.stock" :min="-1" />
-          <span class="hint">-1 表示不限库存</span>
-        </el-form-item>
-        <el-form-item label="排序">
-          <el-input-number v-model="form.sort_order" />
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-select v-model="form.status" style="width: 160px">
+
+        <el-form-item label="商品状态">
+          <el-select
+            v-model="status"
+            clearable
+            placeholder="全部状态"
+            class="full-control"
+            @change="handleQuery"
+          >
+            <el-option label="在售" value="on_sale" />
             <el-option label="草稿" value="draft" />
-            <el-option label="上架" value="on_sale" />
-            <el-option label="下架" value="off_sale" />
+            <el-option label="已售罄" value="sold_out" />
           </el-select>
         </el-form-item>
-        <el-form-item label="专属二维码">
-          <el-switch
-            v-model="form.use_custom_qrcode"
-            active-text="覆盖默认"
-            inactive-text="用默认"
-          />
-          <div v-if="form.use_custom_qrcode" class="upload-row" style="margin-top: 8px">
-            <el-image
-              v-if="form.qrcode_image_url"
-              :src="form.qrcode_image_url"
-              style="width: 100px; height: 100px; border-radius: 8px"
-              fit="contain"
-            />
-            <el-upload
-              :show-file-list="false"
-              accept="image/*"
-              :before-upload="(f: File) => uploadImage(f, 'qrcode')"
-            >
-              <el-button :icon="Upload">上传二维码</el-button>
-            </el-upload>
+
+        <el-form-item label=" ">
+          <div class="filter-actions">
+            <el-button type="primary" :icon="Search" :loading="loading" @click="handleQuery">
+              查询
+            </el-button>
+            <el-button @click="resetFilters">重置</el-button>
           </div>
         </el-form-item>
       </el-form>
+    </section>
+
+    <!-- 商品数据表格 -->
+    <section class="section-card table-section-card">
+      <div class="table-card-header">
+        <div class="table-header-title">
+          <el-icon class="header-icon"><Present /></el-icon>
+          <span>商品明细列表</span>
+        </div>
+        <span class="count-badge">共 {{ total }} 件商品</span>
+      </div>
+
+      <div class="table-container">
+        <el-table
+          v-loading="loading"
+          class="custom-enterprise-table"
+          :data="items"
+          stripe
+          empty-text="未找到匹配的商品"
+        >
+          <el-table-column label="商品封面" width="88" align="center">
+            <template #default="{ row }">
+              <div class="product-thumb">
+                <AuthImage
+                  v-if="row.cover_url"
+                  :source="row.cover_url"
+                  :preview-src-list="[row.cover_url]"
+                  fit="cover"
+                  class="thumb-img"
+                />
+                <div v-else class="no-thumb">无图</div>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="商品标题" min-width="200">
+            <template #default="{ row }">
+              <strong class="product-title">{{ row.title }}</strong>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="分类" width="120" align="center">
+            <template #default="{ row }">
+              <el-tag size="small" type="info" effect="plain" class="category-tag">
+                {{ row.category_name || '未分类' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="售价 / 原价" width="150" align="right">
+            <template #default="{ row }">
+              <div class="price-stack">
+                <strong class="sell-price font-mono">¥{{ formatCent(row.price_cent) }}</strong>
+                <small v-if="row.original_price_cent" class="orig-price font-mono">
+                  ¥{{ formatCent(row.original_price_cent) }}
+                </small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="库存" width="110" align="center">
+            <template #default="{ row }">
+              <span v-if="row.stock < 0" class="stock-unlimited">不限</span>
+              <span v-else class="font-mono">{{ row.stock }} {{ row.unit || '份' }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="排序" width="90" align="center">
+            <template #default="{ row }">
+              <span class="font-mono font-semibold">{{ row.sort_order }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag
+                :type="
+                  row.status === 'on_sale'
+                    ? 'success'
+                    : row.status === 'sold_out'
+                      ? 'danger'
+                      : 'info'
+                "
+                size="small"
+                class="status-pill"
+              >
+                {{ mohongProductStatusLabel(row.status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="专属二维码" width="120" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.qrcode_image_url ? 'success' : 'info'" size="small" effect="plain">
+                {{ row.qrcode_image_url ? '已配置' : '使用全局' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="140" fixed="right" align="center">
+            <template #default="{ row }">
+              <div class="action-btn-group">
+                <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+                <el-button link type="danger" size="small" @click="handleDelete(row)"
+                  >删除</el-button
+                >
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <AdminTablePagination
+        v-if="total > 0"
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        :total="total"
+        @change="load"
+      />
+    </section>
+
+    <!-- 新建/编辑商品弹窗 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="editingId ? '编辑撞车商品' : '新建撞车商品'"
+      width="min(680px, calc(100vw - 32px))"
+      destroy-on-close
+    >
+      <el-form label-position="top">
+        <div class="form-row-2">
+          <el-form-item label="所属分类">
+            <el-select
+              v-model="form.category_id"
+              clearable
+              placeholder="选择分类（可留空）"
+              class="full-control"
+            >
+              <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="销售状态">
+            <el-select v-model="form.status" class="full-control">
+              <el-option label="在售（上架）" value="on_sale" />
+              <el-option label="草稿（隐藏）" value="draft" />
+              <el-option label="售罄" value="sold_out" />
+            </el-select>
+          </el-form-item>
+        </div>
+
+        <el-form-item label="商品标题" required>
+          <el-input v-model="form.title" placeholder="例如：大红 6格 / 炫彩套装" maxlength="128" />
+        </el-form-item>
+
+        <div class="form-row-3">
+          <el-form-item label="售价（元）" required>
+            <el-input-number
+              v-model="form.price_yuan"
+              :min="0.01"
+              :precision="2"
+              :step="5"
+              class="full-control"
+            />
+          </el-form-item>
+          <el-form-item label="原价（划线价）">
+            <el-input-number
+              v-model="form.original_price_yuan"
+              :min="0"
+              :precision="2"
+              :step="5"
+              class="full-control"
+            />
+          </el-form-item>
+          <el-form-item label="单位">
+            <el-input v-model="form.unit" placeholder="份 / 组" maxlength="16" />
+          </el-form-item>
+        </div>
+
+        <div class="form-row-2">
+          <el-form-item label="库存数量（-1 表示不限）">
+            <el-input-number
+              v-model="form.stock"
+              :min="-1"
+              :precision="0"
+              :step="1"
+              class="full-control"
+            />
+          </el-form-item>
+          <el-form-item label="排序权重（越大越靠前）">
+            <el-input-number v-model="form.sort_order" :min="0" :max="9999" class="full-control" />
+          </el-form-item>
+        </div>
+
+        <el-form-item label="封面图片">
+          <div class="uploader-wrap">
+            <div v-if="form.cover_url" class="img-preview-box">
+              <AuthImage :source="form.cover_url" fit="cover" class="preview-img" />
+              <el-button size="small" type="danger" link @click="form.cover_url = ''"
+                >移除</el-button
+              >
+            </div>
+            <el-upload
+              v-else
+              :show-file-list="false"
+              :before-upload="beforeUploadCover"
+              accept="image/*"
+            >
+              <el-button size="small" :icon="Upload">上传封面图</el-button>
+            </el-upload>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="专属客服二维码（选填）">
+          <div class="qrcode-section">
+            <el-switch v-model="form.use_custom_qrcode" active-text="启用此商品专属二维码" />
+            <div v-if="form.use_custom_qrcode" class="uploader-wrap" style="margin-top: 10px">
+              <div v-if="form.qrcode_image_url" class="img-preview-box">
+                <AuthImage
+                  :source="form.qrcode_image_url"
+                  fit="contain"
+                  class="preview-img qrcode"
+                />
+                <el-button size="small" type="danger" link @click="form.qrcode_image_url = ''"
+                  >移除</el-button
+                >
+              </div>
+              <el-upload
+                v-else
+                :show-file-list="false"
+                :before-upload="beforeUploadQrcode"
+                accept="image/*"
+              >
+                <el-button size="small" :icon="Upload">上传专属二维码</el-button>
+              </el-upload>
+            </div>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="商品图集（选填）">
+          <div class="gallery-wrap">
+            <div v-for="u in form.image_urls" :key="u" class="gallery-item">
+              <AuthImage :source="u" fit="cover" class="preview-img" />
+              <el-button size="small" type="danger" link @click="removeGallery(u)">删除</el-button>
+            </div>
+            <el-upload
+              :show-file-list="false"
+              :before-upload="beforeUploadGallery"
+              accept="image/*"
+            >
+              <div class="gallery-add-btn">
+                <el-icon><Plus /></el-icon>
+                <span>添加图片</span>
+              </div>
+            </el-upload>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="商品说明">
+          <el-input
+            v-model="form.description"
+            type="textarea"
+            :rows="3"
+            placeholder="商品详细说明或接待须知..."
+          />
+        </el-form-item>
+      </el-form>
       <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
+        <div class="modal-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="saving" @click="handleSave">确认保存</el-button>
+        </div>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <style scoped>
-.admin-page {
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
+}
+
+/* ================= 头部卡片 ================= */
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #db2777;
+  background: #fdf2f8;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
   display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 16px;
 }
-.page-head {
+
+.metric-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 18px 20px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
   display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+}
+
+.metric-card--total::before {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+.metric-card--onsale::before {
+  background: linear-gradient(90deg, #10b981, #34d399);
+}
+
+.metric-card--unlimited::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.metric-icon-wrap {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.metric-icon-wrap.indigo {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.metric-icon-wrap.emerald {
+  background: #ecfdf5;
+  color: #10b981;
+}
+
+.metric-icon-wrap.amber {
+  background: #fffbeb;
+  color: #f59e0b;
+}
+
+.metric-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metric-label {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+.metric-val {
+  font-size: 22px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.3px;
+  line-height: 1.2;
+}
+
+.indigo-val {
+  color: #4f46e5;
+}
+
+.emerald-val {
+  color: #059669;
+}
+
+.amber-val {
+  color: #d97706;
+}
+
+.metric-sub-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  width: fit-content;
+}
+
+.metric-sub-pill.info {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.metric-sub-pill.success {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.metric-sub-pill.warning {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+/* ================= 筛选面板 ================= */
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: 240px 180px 180px auto;
+  align-items: flex-end;
+  gap: 14px 16px;
+}
+
+.filter-grid :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.filter-grid :deep(.el-form-item__label) {
+  padding-bottom: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+}
+
+.filter-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.full-control {
+  width: 100%;
+}
+
+.form-row-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.form-row-3 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 16px;
+}
+
+/* ================= 表格卡片 ================= */
+.table-section-card {
+  padding-bottom: 16px;
+}
+
+.table-card-header {
+  display: flex;
+  align-items: center;
   justify-content: space-between;
-  align-items: flex-start;
+  margin-bottom: 16px;
+}
+
+.table-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.header-icon {
+  color: #db2777;
+  font-size: 18px;
+}
+
+.count-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #db2777;
+  background: #fdf2f8;
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+
+.table-container {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.custom-enterprise-table :deep(.el-table__header-wrapper th) {
+  background-color: #f8fafc !important;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 12px 0;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.custom-enterprise-table :deep(.el-table__body-wrapper td) {
+  padding: 12px 0;
+  font-size: 13px;
+  color: #334155;
+}
+
+.product-thumb {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.thumb-img {
+  width: 100%;
+  height: 100%;
+}
+
+.no-thumb {
+  font-size: 10px;
+  color: #94a3b8;
+}
+
+.product-title {
+  font-size: 13.5px;
+  color: #0f172a;
+}
+
+.category-tag {
+  font-weight: 600;
+}
+
+.price-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1px;
+}
+
+.sell-price {
+  font-size: 13.5px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.orig-price {
+  font-size: 11px;
+  color: #94a3b8;
+  text-decoration: line-through;
+}
+
+.stock-unlimited {
+  font-size: 12px;
+  font-weight: 600;
+  color: #059669;
+}
+
+.status-pill {
+  font-weight: 600;
+}
+
+.action-btn-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+/* ================= 弹窗样式 ================= */
+.img-preview-box {
+  display: flex;
+  align-items: center;
   gap: 12px;
 }
-.page-head h2 {
-  margin: 0 0 4px;
-}
-.page-head p {
-  margin: 0;
-  color: #6b7a90;
-  font-size: 13px;
-}
-.filters {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-.upload-row,
-.gallery {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-.gallery-item {
-  position: relative;
-  width: 72px;
-  height: 72px;
-}
-.gallery-item :deep(.el-image) {
+
+.preview-img {
   width: 72px;
   height: 72px;
   border-radius: 8px;
+  border: 1px solid #e2e8f0;
 }
-.gallery-item button {
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  width: 20px;
-  height: 20px;
-  border: 0;
-  border-radius: 50%;
-  background: #ef4444;
-  color: #fff;
+
+.preview-img.qrcode {
+  width: 80px;
+  height: 80px;
+}
+
+.gallery-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.gallery-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.gallery-add-btn {
+  width: 72px;
+  height: 72px;
+  border-radius: 8px;
+  border: 1px dashed #cbd5e1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 11px;
+  color: #64748b;
   cursor: pointer;
+  background: #f8fafc;
 }
-.hint {
-  margin-left: 8px;
-  color: #8a94a6;
-  font-size: 12px;
+
+.gallery-add-btn:hover {
+  border-color: #3b82f6;
+  color: #3b82f6;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminOrderDetailView.vue b/frontend/src/features/admin/views/AdminOrderDetailView.vue
index 9c0a5ce..b589ef5 100644
--- a/frontend/src/features/admin/views/AdminOrderDetailView.vue
+++ b/frontend/src/features/admin/views/AdminOrderDetailView.vue
@@ -899,110 +899,115 @@ function paymentPaidAt(record: AdminPayment) {
 </script>
 
 <template>
-  <section class="page" v-loading="loading">
-    <div v-if="order" class="page-header-row">
-      <div class="page-header">
-        <p class="eyebrow">{{ order.order_no }}</p>
-        <h1>订单详情</h1>
-        <p>
-          商品编号 {{ listingCode }} · {{ order.title }} · {{ order.server_region }} /
-          {{ order.login_platform }}
-        </p>
+  <div class="finance-page-container" v-loading="loading">
+    <!-- 头部卡片 -->
+    <header v-if="order" class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <span>ORDER: {{ order.order_no }}</span>
+          </div>
+          <h1 class="page-title">订单详情</h1>
+          <p class="page-subtitle">
+            商品编号 {{ listingCode }} · {{ order.title }} · {{ order.server_region }} /
+            {{ order.login_platform }}
+          </p>
+        </div>
+        <div class="toolbar-actions">
+          <RouterLink :to="returnTarget">
+            <el-button>{{ returnLabel }}</el-button>
+          </RouterLink>
+          <el-button v-if="canResetHandoff" type="success" @click="openAction('reset')">
+            {{ resetActionLabel }}
+          </el-button>
+          <el-button
+            v-if="canPlatformHandoff"
+            class="platform-handoff-button"
+            type="primary"
+            @click="openPlatformHandoff"
+          >
+            {{ platformHandoffAction?.label || '客服代交接' }}
+          </el-button>
+          <el-button v-if="canForceHandoff" type="warning" @click="openForceHandoff">
+            {{ forceHandoffAction?.label || '客服一键交接' }}
+          </el-button>
+          <el-button
+            v-if="canPlatformCheckoutConfirm"
+            type="primary"
+            @click="openAction('platform_checkout_confirm')"
+          >
+            {{ platformCheckoutConfirmAction?.label || '客服确认结账' }}
+          </el-button>
+          <el-button
+            v-if="canPlatformCheckoutCounter"
+            type="warning"
+            plain
+            @click="openPlatformCheckoutCounter"
+          >
+            {{ platformCheckoutCounterAction?.label || '客服修改结账方案' }}
+          </el-button>
+          <el-button
+            v-if="canPlatformCheckoutDispute"
+            type="warning"
+            @click="openAction('platform_checkout_dispute')"
+          >
+            {{ platformCheckoutDisputeAction?.label || '发起结账争议' }}
+          </el-button>
+          <el-button v-if="canOfflineSettlement" type="success" @click="openOfflineSettlement">
+            {{ offlineSettlementAction?.label || '确认线下结算' }}
+          </el-button>
+          <el-button v-if="canAdminCreateDispute" type="warning" plain @click="openAdminDispute">
+            发起申诉
+          </el-button>
+          <el-button type="warning" :disabled="!canOperate" @click="openAction('abnormal')"
+            >标记异常</el-button
+          >
+          <el-tooltip :content="closeActionTip" placement="top">
+            <span>
+              <el-button type="danger" :disabled="!canOperate" @click="confirmCloseAction"
+                >客服关闭</el-button
+              >
+            </span>
+          </el-tooltip>
+          <el-tooltip :content="sealActionTip" placement="top">
+            <span>
+              <el-button type="danger" plain :disabled="!canOperate" @click="confirmSealAction"
+                >封存订单</el-button
+              >
+            </span>
+          </el-tooltip>
+          <el-tooltip v-if="canHoldDeposit" :content="depositHoldActionTip" placement="top">
+            <span>
+              <el-button type="warning" plain @click="confirmHoldDeposit"> 暂扣押金 </el-button>
+            </span>
+          </el-tooltip>
+          <el-tooltip v-if="isDepositHeld" :content="depositReleaseActionTip" placement="top">
+            <span>
+              <el-button
+                type="success"
+                plain
+                :disabled="!canReleaseDeposit"
+                @click="confirmReleaseDeposit"
+              >
+                归还押金
+              </el-button>
+            </span>
+          </el-tooltip>
+          <el-tooltip :content="refundActionTip" placement="top">
+            <span>
+              <el-button
+                type="primary"
+                :loading="refunding"
+                :disabled="refundButtonDisabled"
+                @click="confirmRefund"
+              >
+                {{ refundButtonDisabled ? '已退款' : '人工退款' }}
+              </el-button>
+            </span>
+          </el-tooltip>
+        </div>
       </div>
-      <div class="toolbar-actions">
-        <RouterLink :to="returnTarget">
-          <el-button>{{ returnLabel }}</el-button>
-        </RouterLink>
-        <el-button v-if="canResetHandoff" type="success" @click="openAction('reset')">
-          {{ resetActionLabel }}
-        </el-button>
-        <el-button
-          v-if="canPlatformHandoff"
-          class="platform-handoff-button"
-          type="primary"
-          @click="openPlatformHandoff"
-        >
-          {{ platformHandoffAction?.label || '客服代交接' }}
-        </el-button>
-        <el-button v-if="canForceHandoff" type="warning" @click="openForceHandoff">
-          {{ forceHandoffAction?.label || '客服一键交接' }}
-        </el-button>
-        <el-button
-          v-if="canPlatformCheckoutConfirm"
-          type="primary"
-          @click="openAction('platform_checkout_confirm')"
-        >
-          {{ platformCheckoutConfirmAction?.label || '客服确认结账' }}
-        </el-button>
-        <el-button
-          v-if="canPlatformCheckoutCounter"
-          type="warning"
-          plain
-          @click="openPlatformCheckoutCounter"
-        >
-          {{ platformCheckoutCounterAction?.label || '客服修改结账方案' }}
-        </el-button>
-        <el-button
-          v-if="canPlatformCheckoutDispute"
-          type="warning"
-          @click="openAction('platform_checkout_dispute')"
-        >
-          {{ platformCheckoutDisputeAction?.label || '发起结账争议' }}
-        </el-button>
-        <el-button v-if="canOfflineSettlement" type="success" @click="openOfflineSettlement">
-          {{ offlineSettlementAction?.label || '确认线下结算' }}
-        </el-button>
-        <el-button v-if="canAdminCreateDispute" type="warning" plain @click="openAdminDispute">
-          发起申诉
-        </el-button>
-        <el-button type="warning" :disabled="!canOperate" @click="openAction('abnormal')"
-          >标记异常</el-button
-        >
-        <el-tooltip :content="closeActionTip" placement="top">
-          <span>
-            <el-button type="danger" :disabled="!canOperate" @click="confirmCloseAction"
-              >客服关闭</el-button
-            >
-          </span>
-        </el-tooltip>
-        <el-tooltip :content="sealActionTip" placement="top">
-          <span>
-            <el-button type="danger" plain :disabled="!canOperate" @click="confirmSealAction"
-              >封存订单</el-button
-            >
-          </span>
-        </el-tooltip>
-        <el-tooltip v-if="canHoldDeposit" :content="depositHoldActionTip" placement="top">
-          <span>
-            <el-button type="warning" plain @click="confirmHoldDeposit"> 暂扣押金 </el-button>
-          </span>
-        </el-tooltip>
-        <el-tooltip v-if="isDepositHeld" :content="depositReleaseActionTip" placement="top">
-          <span>
-            <el-button
-              type="success"
-              plain
-              :disabled="!canReleaseDeposit"
-              @click="confirmReleaseDeposit"
-            >
-              归还押金
-            </el-button>
-          </span>
-        </el-tooltip>
-        <el-tooltip :content="refundActionTip" placement="top">
-          <span>
-            <el-button
-              type="primary"
-              :loading="refunding"
-              :disabled="refundButtonDisabled"
-              @click="confirmRefund"
-            >
-              {{ refundButtonDisabled ? '已退款' : '人工退款' }}
-            </el-button>
-          </span>
-        </el-tooltip>
-      </div>
-    </div>
+    </header>
 
     <div v-if="order" class="metric-grid dashboard-metrics order-metrics">
       <div class="metric-card">
@@ -1652,10 +1657,77 @@ function paymentPaidAt(record: AdminPayment) {
         </el-button>
       </template>
     </el-dialog>
-  </section>
+  </div>
 </template>
 
 <style scoped>
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
+}
+
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #3b82f6;
+  background: #eff6ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
 .order-metrics {
   margin-bottom: 20px;
 }
diff --git a/frontend/src/features/admin/views/AdminOrdersView.vue b/frontend/src/features/admin/views/AdminOrdersView.vue
index 9fbac6b..27b1ac4 100644
--- a/frontend/src/features/admin/views/AdminOrdersView.vue
+++ b/frontend/src/features/admin/views/AdminOrdersView.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { ArrowLeft, Refresh, Search } from '@element-plus/icons-vue'
+import {
+  ArrowLeft,
+  Clock,
+  DocumentChecked,
+  Refresh,
+  Search,
+  Tickets,
+  Warning,
+} from '@element-plus/icons-vue'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -33,6 +41,7 @@ const router = useRouter()
 const canReturnToWithdrawals = computed(() => route.query.from === 'withdrawals')
 
 const orderStatusOptions = [
+  { label: '全部状态', value: '' },
   { label: '待支付', value: 'pending_payment' },
   { label: '待交接', value: 'pending_handoff' },
   { label: '使用中', value: 'renting' },
@@ -48,6 +57,7 @@ const orderStatusOptions = [
 ] as const
 
 const handoffStatusOptions = [
+  { label: '全部交接状态', value: '' },
   { label: '待号主交接', value: 'pending_owner' },
   { label: '号主交接超时', value: 'owner_timeout' },
   { label: '待租客确认', value: 'pending_renter_confirm' },
@@ -61,11 +71,13 @@ const handoffStatusOptions = [
 ] as const
 
 const handoffModeOptions = [
-  { label: '正常订单', value: 'owner' },
+  { label: '全部类型', value: '' },
+  { label: '普通订单', value: 'owner' },
   { label: '平台代管', value: 'platform' },
 ] as const
 
 const settlementStatusOptions = [
+  { label: '全部结算状态', value: '' },
   { label: '未结算', value: 'unsettled' },
   { label: '待结算', value: 'pending' },
   { label: '冻结中', value: 'frozen' },
@@ -77,8 +89,20 @@ const settlementStatusOptions = [
   { label: '已仲裁', value: 'arbitrated' },
 ] as const
 
+const rentingCount = computed(() => orders.value.filter(o => o.status === 'renting').length)
+const pendingHandoffCount = computed(
+  () =>
+    orders.value.filter(
+      o => o.status === 'pending_handoff' || o.handoff_status?.includes('pending')
+    ).length
+)
+const disputeCount = computed(
+  () =>
+    orders.value.filter(o => ['disputing', 'checkout_disputing', 'abnormal'].includes(o.status))
+      .length
+)
+
 onMounted(() => {
-  // 支持从提现审核等页面跳转预填号主/租客搜索
   const keyword = route.query.keyword
   if (typeof keyword === 'string' && keyword.trim()) {
     filters.keyword = keyword.trim()
@@ -156,42 +180,114 @@ function userText(value: string | number | undefined) {
 function isPlatformManaged(row: Order) {
   return row.handoff_mode === 'platform' || row.settlement_mode === 'platform_managed'
 }
+
+function orderStatusType(status: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' {
+  if (status === 'completed') return 'success'
+  if (status === 'renting') return 'primary'
+  if (['pending_payment', 'pending_handoff'].includes(status)) return 'warning'
+  if (['disputing', 'checkout_disputing', 'abnormal'].includes(status)) return 'danger'
+  return 'info'
+}
+
+function settlementStatusType(
+  status: string
+): 'success' | 'warning' | 'danger' | 'info' | 'primary' {
+  if (status === 'settled') return 'success'
+  if (['pending', 'frozen'].includes(status)) return 'warning'
+  if (['disputed', 'refunded'].includes(status)) return 'danger'
+  return 'info'
+}
 </script>
 
 <template>
-  <section class="page admin-orders-page">
-    <div class="page-header-row">
-      <div class="page-header">
-        <p class="eyebrow">Orders</p>
-        <h1>订单管理</h1>
-        <p>查看全量订单、交接状态、金额和结算状态。</p>
-      </div>
-      <div class="toolbar-actions">
-        <el-button v-if="canReturnToWithdrawals" :icon="ArrowLeft" @click="returnToWithdrawals">
-          返回提现审核
-        </el-button>
-        <el-button :icon="Refresh" @click="loadOrders">刷新</el-button>
-      </div>
-    </div>
+  <div class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><Tickets /></el-icon>
+            <span>ORDERS & TRANSACTIONS</span>
+          </div>
+          <h1 class="page-title">订单管理</h1>
+          <p class="page-subtitle">全量监控租号订单流转、交接履约状态、押金退还与号主结算分配。</p>
+        </div>
 
-    <div class="order-filter-bar">
-      <el-form inline @submit.prevent>
-        <el-form-item label="关键词">
+        <div class="toolbar-actions">
+          <el-button v-if="canReturnToWithdrawals" :icon="ArrowLeft" @click="returnToWithdrawals">
+            返回提现审核
+          </el-button>
+          <el-button :icon="Refresh" @click="loadOrders">刷新</el-button>
+        </div>
+      </div>
+    </header>
+
+    <!-- 汇总指标卡片 -->
+    <section class="summary-metric-grid">
+      <div class="metric-card metric-card--total">
+        <div class="metric-icon-wrap indigo">
+          <el-icon><Tickets /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">全量订单总数</span>
+          <strong class="metric-val indigo-val">{{ total }} 笔</strong>
+          <span class="metric-sub-pill info">平台累计订单</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--renting">
+        <div class="metric-icon-wrap emerald">
+          <el-icon><Clock /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页履约租用中</span>
+          <strong class="metric-val emerald-val">{{ rentingCount }} 笔</strong>
+          <span class="metric-sub-pill success">正在租用</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--handoff">
+        <div class="metric-icon-wrap amber">
+          <el-icon><DocumentChecked /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页待交接发货</span>
+          <strong class="metric-val amber-val">{{ pendingHandoffCount }} 笔</strong>
+          <span class="metric-sub-pill warning">等待交接</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--dispute">
+        <div class="metric-icon-wrap rose">
+          <el-icon><Warning /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页争议 / 异常</span>
+          <strong class="metric-val rose-val">{{ disputeCount }} 笔</strong>
+          <span class="metric-sub-pill danger">需客服介入</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 筛选面板 -->
+    <section class="section-card filter-card">
+      <el-form class="filter-grid" label-position="top" @submit.prevent="queryOrders">
+        <el-form-item label="关键词检索">
           <el-input
             v-model="filters.keyword"
             clearable
             placeholder="订单号 / 商品编号 / 账号 / 手机号"
-            style="width: 280px"
             @keyup.enter="queryOrders"
             @clear="queryOrders"
           />
         </el-form-item>
+
         <el-form-item label="订单状态">
           <el-select
             v-model="filters.status"
             clearable
-            placeholder="全部"
-            style="width: 150px"
+            placeholder="全部状态"
+            class="full-control"
             @change="queryOrders"
           >
             <el-option
@@ -202,12 +298,13 @@ function isPlatformManaged(row: Order) {
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="交接状态">
+
+        <el-form-item label="交接履约状态">
           <el-select
             v-model="filters.handoff_status"
             clearable
-            placeholder="全部"
-            style="width: 170px"
+            placeholder="全部交接状态"
+            class="full-control"
             @change="queryOrders"
           >
             <el-option
@@ -218,12 +315,13 @@ function isPlatformManaged(row: Order) {
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="订单类型">
+
+        <el-form-item label="订单交付模式">
           <el-select
             v-model="filters.handoff_mode"
             clearable
-            placeholder="全部"
-            style="width: 130px"
+            placeholder="全部类型"
+            class="full-control"
             @change="queryOrders"
           >
             <el-option
@@ -234,12 +332,13 @@ function isPlatformManaged(row: Order) {
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="结算状态">
+
+        <el-form-item label="资金结算状态">
           <el-select
             v-model="filters.settlement_status"
             clearable
-            placeholder="全部"
-            style="width: 140px"
+            placeholder="全部结算状态"
+            class="full-control"
             @change="queryOrders"
           >
             <el-option
@@ -250,210 +349,623 @@ function isPlatformManaged(row: Order) {
             />
           </el-select>
         </el-form-item>
+
         <el-form-item label="线下结算">
           <el-select
             v-model="filters.offline_settlement_status"
             clearable
             placeholder="全部"
-            style="width: 150px"
+            class="full-control"
             @change="queryOrders"
           >
+            <el-option label="全部" value="" />
             <el-option label="待确认线下结算" value="pending" />
             <el-option label="已确认线下结算" value="settled" />
           </el-select>
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary" :icon="Search" :loading="loading" @click="queryOrders"
-            >查询</el-button
-          >
-          <el-button @click="resetFilters">重置</el-button>
+
+        <el-form-item label=" ">
+          <div class="filter-actions">
+            <el-button type="primary" :icon="Search" :loading="loading" @click="queryOrders">
+              查询
+            </el-button>
+            <el-button @click="resetFilters">重置</el-button>
+          </div>
         </el-form-item>
       </el-form>
-    </div>
+    </section>
 
-    <el-table
-      v-loading="loading"
-      class="table-panel admin-orders-table"
-      :data="orders"
-      empty-text="未找到匹配的订单"
-    >
-      <el-table-column label="订单信息" min-width="230">
-        <template #default="{ row }">
-          <div class="order-main-cell">
-            <RouterLink class="order-link" :to="adminPath(`orders/${row.id}`)">
-              {{ row.order_no }}
-            </RouterLink>
-            <span>商品编号 {{ formatListingNo(row.listing_no, row.listing_id) }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="账号" min-width="170" show-overflow-tooltip>
-        <template #default="{ row }">
-          <div class="stacked-cell">
-            <strong>{{ row.title }}</strong>
-            <span>{{ row.server_region }} / {{ row.login_platform }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="用户" min-width="170">
-        <template #default="{ row }">
-          <div class="stacked-cell compact">
-            <span>租客 {{ userText(row.renter_phone || row.renter_id) }}</span>
-            <span v-if="isPlatformManaged(row)" class="platform-managed-owner">号主 平台代管</span>
-            <span v-else>号主 {{ userText(row.owner_phone || row.owner_id) }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" width="150">
-        <template #default="{ row }">
-          <div class="stacked-cell compact">
-            <strong>{{ orderStatusLabel(row.status) }}</strong>
-            <span>{{ orderHandoffStatusLabel(row) }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="结算" width="110">
-        <template #default="{ row }">{{ settlementStatusLabel(row.settlement_status) }}</template>
-      </el-table-column>
-      <el-table-column label="金额" width="130" align="right">
-        <template #default="{ row }">
-          <div class="stacked-cell money-cell">
-            <strong>¥{{ money(amountYuan(row.rent_amount_cent)) }}</strong>
-            <span>押金 ¥{{ money(amountYuan(row.deposit_amount_cent)) }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" width="170">
-        <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
-      </el-table-column>
-      <el-table-column label="操作" width="88" align="center">
-        <template #default="{ row }">
-          <RouterLink :to="adminPath(`orders/${row.id}`)">
-            <el-button size="small">详情</el-button>
-          </RouterLink>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 订单数据表格 -->
+    <section class="section-card table-section-card">
+      <div class="table-card-header">
+        <div class="table-header-title">
+          <el-icon class="header-icon"><Tickets /></el-icon>
+          <span>订单列表明细</span>
+        </div>
+        <span class="count-badge">共 {{ total }} 笔订单</span>
+      </div>
 
-    <AdminTablePagination
-      v-if="total > 0"
-      v-model:current-page="currentPage"
-      v-model:page-size="currentPageSize"
-      :total="total"
-      :loading="loading"
-      @page-change="handlePageChange"
-    />
-  </section>
+      <div class="table-container">
+        <el-table
+          v-loading="loading"
+          class="custom-enterprise-table"
+          :data="orders"
+          stripe
+          empty-text="未找到匹配的订单"
+        >
+          <el-table-column label="订单信息" min-width="210" fixed="left">
+            <template #default="{ row }">
+              <div class="order-info-cell">
+                <RouterLink class="order-link" :to="adminPath(`orders/${row.id}`)">
+                  {{ row.order_no }}
+                </RouterLink>
+                <small class="listing-no"
+                  >编号: {{ formatListingNo(row.listing_no, row.listing_id) }}</small
+                >
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="商品账号" min-width="190" show-overflow-tooltip>
+            <template #default="{ row }">
+              <div class="account-cell">
+                <strong class="account-title">{{ row.title }}</strong>
+                <div class="region-platform-tags">
+                  <span class="meta-tag">{{ row.server_region || '默认区' }}</span>
+                  <span class="meta-tag platform">{{ row.login_platform || '全平台' }}</span>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="租客 / 号主" min-width="190">
+            <template #default="{ row }">
+              <div class="parties-cell">
+                <div class="party-line renter-line">
+                  <span class="role-badge renter">租</span>
+                  <span class="phone-text">{{ userText(row.renter_phone || row.renter_id) }}</span>
+                </div>
+                <div class="party-line owner-line">
+                  <span class="role-badge owner">主</span>
+                  <span v-if="isPlatformManaged(row)" class="platform-managed-text"
+                    >平台代管资产</span
+                  >
+                  <span v-else class="phone-text">{{
+                    userText(row.owner_phone || row.owner_id)
+                  }}</span>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="状态" width="140">
+            <template #default="{ row }">
+              <div class="status-cell">
+                <el-tag :type="orderStatusType(row.status)" size="small" class="status-pill">
+                  {{ orderStatusLabel(row.status) }}
+                </el-tag>
+                <small class="handoff-text">{{ orderHandoffStatusLabel(row) }}</small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="结算状态" width="110" align="center">
+            <template #default="{ row }">
+              <el-tag
+                :type="settlementStatusType(row.settlement_status)"
+                size="small"
+                effect="plain"
+                class="settle-pill"
+              >
+                {{ settlementStatusLabel(row.settlement_status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="金额明细" min-width="140" align="right">
+            <template #default="{ row }">
+              <div class="amount-stack">
+                <strong class="rent-amount font-mono"
+                  >¥{{ money(amountYuan(row.rent_amount_cent)) }}</strong
+                >
+                <small class="deposit-text"
+                  >押金 ¥{{ money(amountYuan(row.deposit_amount_cent)) }}</small
+                >
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="下单时间" min-width="165">
+            <template #default="{ row }">
+              <span class="time-cell">{{ formatDateTime(row.created_at) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="90" fixed="right" align="center">
+            <template #default="{ row }">
+              <RouterLink :to="adminPath(`orders/${row.id}`)">
+                <el-button link type="primary" size="small">详情</el-button>
+              </RouterLink>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <AdminTablePagination
+        v-if="total > 0"
+        v-model:current-page="currentPage"
+        v-model:page-size="currentPageSize"
+        :total="total"
+        :loading="loading"
+        @page-change="handlePageChange"
+      />
+    </section>
+  </div>
 </template>
 
 <style scoped>
-.admin-orders-page {
-  min-width: 0;
-}
-
-.order-filter-bar {
-  margin-bottom: 16px;
-  border-radius: 12px;
-  background: #ffffff;
-  padding: 16px 18px 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-
-.order-filter-bar :deep(.el-form) {
+.finance-page-container {
   display: flex;
-  align-items: flex-end;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
+}
+
+/* ================= 头部卡片 ================= */
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
   flex-wrap: wrap;
-  gap: 0 14px;
 }
 
-.order-filter-bar :deep(.el-form-item) {
-  margin-right: 0;
-  margin-bottom: 16px;
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.order-filter-bar :deep(.el-form-item__label) {
-  color: #6b7785;
-  font-size: 12px;
-  font-weight: 600;
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #3b82f6;
+  background: #eff6ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
 }
 
-.admin-orders-table {
-  --el-table-fixed-right-column: #ffffff;
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
 }
 
-.admin-orders-table :deep(.el-table__inner-wrapper) {
-  min-width: 0;
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
 }
 
-.admin-orders-table :deep(.el-scrollbar__wrap) {
-  overflow-x: hidden !important;
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-.admin-orders-table :deep(.el-scrollbar__bar.is-horizontal) {
-  display: none;
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 16px;
 }
 
-.order-main-cell,
-.stacked-cell {
+.metric-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 18px 20px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+}
+
+.metric-card--total::before {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+.metric-card--renting::before {
+  background: linear-gradient(90deg, #10b981, #34d399);
+}
+
+.metric-card--handoff::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.metric-card--dispute::before {
+  background: linear-gradient(90deg, #f43f5e, #fb7185);
+}
+
+.metric-icon-wrap {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.metric-icon-wrap.indigo {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.metric-icon-wrap.emerald {
+  background: #ecfdf5;
+  color: #10b981;
+}
+
+.metric-icon-wrap.amber {
+  background: #fffbeb;
+  color: #f59e0b;
+}
+
+.metric-icon-wrap.rose {
+  background: #fff1f2;
+  color: #f43f5e;
+}
+
+.metric-info {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  min-width: 0;
-  line-height: 1.35;
 }
 
-.order-main-cell span,
-.stacked-cell span {
-  overflow: hidden;
-  color: #8f9bba;
+.metric-label {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+.metric-val {
+  font-size: 22px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.3px;
+  line-height: 1.2;
+}
+
+.indigo-val {
+  color: #4f46e5;
+}
+
+.emerald-val {
+  color: #059669;
+}
+
+.amber-val {
+  color: #d97706;
+}
+
+.rose-val {
+  color: #e11d48;
+}
+
+.metric-sub-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  width: fit-content;
+}
+
+.metric-sub-pill.info {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.metric-sub-pill.success {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.metric-sub-pill.warning {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.metric-sub-pill.danger {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+/* ================= 筛选面板 ================= */
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  align-items: flex-end;
+  gap: 14px 16px;
+}
+
+.filter-grid :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.filter-grid :deep(.el-form-item__label) {
+  padding-bottom: 4px;
   font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  font-weight: 600;
+  color: #64748b;
 }
 
-.stacked-cell strong {
-  overflow: hidden;
-  color: #1b2559;
-  font-size: 14px;
+.filter-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.full-control {
+  width: 100%;
+}
+
+/* ================= 表格卡片 ================= */
+.table-section-card {
+  padding-bottom: 16px;
+}
+
+.table-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.table-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
   font-weight: 700;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color: #1e293b;
 }
 
-.stacked-cell.compact {
+.header-icon {
+  color: #3b82f6;
+  font-size: 18px;
+}
+
+.count-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #3b82f6;
+  background: #eff6ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+
+.table-container {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.custom-enterprise-table :deep(.el-table__header-wrapper th) {
+  background-color: #f8fafc !important;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 12px 0;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.custom-enterprise-table :deep(.el-table__body-wrapper td) {
+  padding: 12px 0;
+  font-size: 13px;
+  color: #334155;
+}
+
+.order-info-cell {
+  display: flex;
+  flex-direction: column;
   gap: 2px;
 }
 
-.stacked-cell .platform-managed-owner {
-  color: #d97706;
-  font-weight: 700;
-}
-
-.money-cell {
-  align-items: flex-end;
-}
-
 .order-link {
-  overflow: hidden;
-  color: #2f6bff;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13px;
   font-weight: 700;
+  color: #2563eb;
   text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .order-link:hover {
-  color: #174edb;
+  text-decoration: underline;
 }
 
-@media (max-width: 900px) {
-  .order-filter-bar :deep(.el-input),
-  .order-filter-bar :deep(.el-select) {
-    width: 100% !important;
-  }
+.listing-no {
+  font-size: 11px;
+  color: #94a3b8;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
 
-  .order-filter-bar :deep(.el-form-item) {
-    width: 100%;
-  }
+.account-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.account-title {
+  font-size: 13px;
+  color: #0f172a;
+  font-weight: 600;
+}
+
+.region-platform-tags {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.meta-tag {
+  font-size: 10.5px;
+  font-weight: 600;
+  background: #f1f5f9;
+  color: #64748b;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.meta-tag.platform {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+
+.parties-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.party-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.role-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 800;
+}
+
+.role-badge.renter {
+  background: #eff6ff;
+  color: #2563eb;
+  border: 1px solid #bfdbfe;
+}
+
+.role-badge.owner {
+  background: #fdf2f8;
+  color: #db2777;
+  border: 1px solid #fbcfe8;
+}
+
+.phone-text {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  color: #334155;
+}
+
+.platform-managed-text {
+  font-size: 11.5px;
+  color: #0d9488;
+  font-weight: 600;
+}
+
+.status-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.status-pill {
+  width: fit-content;
+  font-weight: 600;
+}
+
+.handoff-text {
+  font-size: 11px;
+  color: #64748b;
+}
+
+.settle-pill {
+  font-weight: 600;
+}
+
+.amount-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1px;
+}
+
+.rent-amount {
+  font-size: 13.5px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.deposit-text {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.time-cell {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminPickupDetailView.vue b/frontend/src/features/admin/views/AdminPickupDetailView.vue
index af09824..ae3bfe8 100644
--- a/frontend/src/features/admin/views/AdminPickupDetailView.vue
+++ b/frontend/src/features/admin/views/AdminPickupDetailView.vue
@@ -336,40 +336,45 @@ function readSnapshotResources(summary: Record<string, unknown> | null): Snapsho
 </script>
 
 <template>
-  <section class="page" v-loading="loading">
-    <div v-if="pickup" class="page-header-row">
-      <div class="page-header">
-        <p class="eyebrow">{{ pickup.pickup_no }}</p>
-        <h1>提号详情</h1>
-        <p>
-          商品编号 {{ listingCode }} · {{ pickup.account_title }} · {{ pickup.server_region }} /
-          {{ pickup.login_platform }}
-        </p>
+  <div class="finance-page-container" v-loading="loading">
+    <!-- 头部卡片 -->
+    <header v-if="pickup" class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <span>PICKUP: {{ pickup.pickup_no }}</span>
+          </div>
+          <h1 class="page-title">提号详情</h1>
+          <p class="page-subtitle">
+            商品编号 {{ listingCode }} · {{ pickup.account_title }} · {{ pickup.server_region }} /
+            {{ pickup.login_platform }}
+          </p>
+        </div>
+        <div class="toolbar-actions">
+          <el-button
+            v-if="canEditProfit"
+            type="primary"
+            plain
+            :icon="EditPen"
+            @click="openProfitDialog"
+          >
+            修改利润
+          </el-button>
+          <el-button
+            v-if="canCreateFinancialAdjustment"
+            type="primary"
+            plain
+            :icon="EditPen"
+            @click="openFinancialAdjustmentDialog"
+          >
+            财务调整
+          </el-button>
+          <RouterLink :to="adminPath('pickup')">
+            <el-button>返回列表</el-button>
+          </RouterLink>
+        </div>
       </div>
-      <div class="toolbar-actions">
-        <el-button
-          v-if="canEditProfit"
-          type="primary"
-          plain
-          :icon="EditPen"
-          @click="openProfitDialog"
-        >
-          修改利润
-        </el-button>
-        <el-button
-          v-if="canCreateFinancialAdjustment"
-          type="primary"
-          plain
-          :icon="EditPen"
-          @click="openFinancialAdjustmentDialog"
-        >
-          财务调整
-        </el-button>
-        <RouterLink :to="adminPath('pickup')">
-          <el-button>返回列表</el-button>
-        </RouterLink>
-      </div>
-    </div>
+    </header>
 
     <div v-if="pickup" class="metric-grid pickup-metrics">
       <div class="metric-card">
@@ -677,10 +682,77 @@ function readSnapshotResources(summary: Record<string, unknown> | null): Snapsho
         </el-button>
       </template>
     </el-dialog>
-  </section>
+  </div>
 </template>
 
 <style scoped>
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
+}
+
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #0284c7;
+  background: #e0f2fe;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
 .pickup-metrics {
   margin-bottom: 20px;
 }
diff --git a/frontend/src/features/admin/views/AdminPickupView.vue b/frontend/src/features/admin/views/AdminPickupView.vue
index ef6d8fd..e103553 100644
--- a/frontend/src/features/admin/views/AdminPickupView.vue
+++ b/frontend/src/features/admin/views/AdminPickupView.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { EditPen, Plus, Refresh, Search } from '@element-plus/icons-vue'
+import {
+  Clock,
+  DocumentChecked,
+  EditPen,
+  Money,
+  Plus,
+  Refresh,
+  Search,
+  Switch,
+} from '@element-plus/icons-vue'
 import {
   cancelAdminPickup,
   confirmAdminPickupOfflineSettlement,
@@ -63,28 +72,16 @@ const listingSourceType = ref<AvailableListingSourceType>('')
 let listingRequestID = 0
 const shopOptions = ref<string[]>([])
 const shopOptionsLoading = ref(false)
-const selectedListing = computed(
-  () => listingOptions.value.find(item => item.id === createForm.listing_id) || null
+
+const pickingUpCount = computed(() => items.value.filter(i => i.status === 'picking_up').length)
+const completedCount = computed(() => items.value.filter(i => i.status === 'completed').length)
+const totalProfitCent = computed(() =>
+  items.value.reduce((sum, item) => sum + effectiveProfitCent(item), 0)
 )
-const selectedPriceSnapshot = computed(() => {
-  const item = selectedListing.value
-  if (!item) return null
-  const totalCent = normalizeCent(item.owner_total_price_cent || item.owner_price_cent)
-  let pureCent = normalizeCent(item.owner_pure_price_cent)
-  let extraCent = normalizeCent(item.owner_extra_item_price_cent)
-  if (pureCent <= 0 && extraCent <= 0) {
-    pureCent = totalCent
-  } else if (pureCent <= 0) {
-    pureCent = Math.max(totalCent - extraCent, 0)
-  } else if (extraCent <= 0) {
-    extraCent = Math.max(totalCent - pureCent, 0)
-  }
-  return { pureCent, extraCent, totalCent }
-})
 
 onMounted(() => {
-  loadList()
-  loadShopOptions()
+  void loadList()
+  void loadShopOptions()
 })
 
 async function loadList() {
@@ -100,7 +97,7 @@ async function loadList() {
 
 function handleSearch() {
   filters.page = 1
-  loadList()
+  void loadList()
 }
 
 function resetFilters() {
@@ -110,16 +107,18 @@ function resetFilters() {
   filters.account_source = ''
   filters.offline_settlement_status = ''
   filters.page = 1
-  loadList()
+  void loadList()
 }
+
 function handlePageChange(p: number) {
   filters.page = p
-  loadList()
+  void loadList()
 }
+
 function handleSizeChange(s: number) {
   filters.page_size = s
   filters.page = 1
-  loadList()
+  void loadList()
 }
 
 function openCreateDialog() {
@@ -191,8 +190,8 @@ async function handleCreate() {
     })
     ElMessage.success('提号订单已创建')
     createDialogVisible.value = false
-    loadShopOptions()
-    loadList()
+    void loadShopOptions()
+    void loadList()
   } catch (e: unknown) {
     ElMessage.error(errorMessage(e) || '创建失败')
   } finally {
@@ -218,27 +217,27 @@ async function handleConfirmOfflineSettlement(row: AdminPickup) {
         confirmButtonText: '确认已打款',
         cancelButtonText: '取消',
         inputType: 'textarea',
-        inputPlaceholder: '结算备注（可选）',
-        inputValidator: input => input.length <= 255 || '备注不能超过 255 个字符',
+        inputPlaceholder: '转账流水号或备注（选填）',
       }
     )
     loading.value = true
     try {
-      await confirmAdminPickupOfflineSettlement(row.id, { remark: value })
+      await confirmAdminPickupOfflineSettlement(row.id, { remark: value || '' })
       ElMessage.success('已确认线下结算')
-      loadList()
+      void loadList()
     } catch (e: unknown) {
-      ElMessage.error(errorMessage(e) || '确认失败')
+      ElMessage.error(errorMessage(e) || '确认结算失败')
     } finally {
       loading.value = false
     }
   } catch {
-    /* 用户放弃 */
+    /* 用户取消 */
   }
 }
 
 function openProfitDialog(row: AdminPickup) {
   activePickupId.value = row.id
+  activePickup.value = row
   profitForm.profit_amount = centToYuan(row.profit_amount_cent)
   profitForm.reason = ''
   profitDialogVisible.value = true
@@ -254,12 +253,9 @@ function openFinancialAdjustmentDialog(row: AdminPickup) {
 }
 
 async function handleFinancialAdjustment() {
-  if (!financialAdjustmentForm.reason.trim()) {
-    ElMessage.warning('请输入调整原因')
-    return
-  }
+  if (!activePickup.value) return
   if (financialAdjustmentForm.profit_amount < 0 || financialAdjustmentForm.settle_amount < 0) {
-    ElMessage.warning('金额不能小于 0')
+    ElMessage.warning('金额不能为负数')
     return
   }
   financialAdjustmentSaving.value = true
@@ -267,15 +263,11 @@ async function handleFinancialAdjustment() {
     await createAdminPickupFinancialAdjustment(activePickupId.value, {
       profit_amount_cent: yuanToCent(financialAdjustmentForm.profit_amount),
       settle_amount_cent: yuanToCent(financialAdjustmentForm.settle_amount),
-      reason: financialAdjustmentForm.reason.trim(),
+      reason: financialAdjustmentForm.reason,
     })
-    ElMessage.success(
-      activePickup.value?.settlement_mode === 'platform_managed'
-        ? '财务调整已创建，请确认线下补款或追回'
-        : '财务调整已创建'
-    )
+    ElMessage.success('已生成财务调整记录并更新有效金额')
     financialAdjustmentDialogVisible.value = false
-    loadList()
+    void loadList()
   } catch (e: unknown) {
     ElMessage.error(errorMessage(e) || '调整失败')
   } finally {
@@ -284,8 +276,8 @@ async function handleFinancialAdjustment() {
 }
 
 async function handleComplete() {
-  if (completeForm.settle_amount <= 0) {
-    ElMessage.warning('请输入结算金额')
+  if (completeForm.settle_amount < 0) {
+    ElMessage.warning('结算金额不能为负数')
     return
   }
   if (completeForm.profit_amount < 0) {
@@ -305,7 +297,7 @@ async function handleComplete() {
         : '提号已完成，已给卖家结算'
     )
     completeDialogVisible.value = false
-    loadList()
+    void loadList()
   } catch (e: unknown) {
     ElMessage.error(errorMessage(e) || '完成失败')
   } finally {
@@ -326,7 +318,7 @@ async function handleUpdateProfit() {
     })
     ElMessage.success('线下利润已更新')
     profitDialogVisible.value = false
-    loadList()
+    void loadList()
   } catch (e: unknown) {
     ElMessage.error(errorMessage(e) || '修改失败')
   } finally {
@@ -346,7 +338,7 @@ async function handleCancel(id: number) {
     try {
       await cancelAdminPickup(id, value)
       ElMessage.success('提号已取消')
-      loadList()
+      void loadList()
     } catch (e: unknown) {
       ElMessage.error(errorMessage(e) || '取消失败')
     } finally {
@@ -371,13 +363,6 @@ function errorMessage(e: unknown) {
   return ''
 }
 
-function ratioText(value: number) {
-  const ratio = Number(value || 0)
-  if (ratio <= 0) return '-'
-  const rounded = Math.round(ratio * 100) / 100
-  return `1:${Number.isInteger(rounded) ? rounded : rounded.toFixed(2)}`
-}
-
 function normalizeCent(value: number | undefined | null) {
   const cent = Number(value || 0)
   if (!Number.isFinite(cent)) return 0
@@ -441,586 +426,973 @@ function listingOptionLabel(item: AvailableListing) {
 </script>
 
 <template>
-  <section class="page">
-    <div class="page-header-row">
-      <div class="page-header">
-        <p class="eyebrow">Admin Pickup</p>
-        <h1>线下提号</h1>
-        <p>管理员线下提号，站内上传结算到钱包，平台代管通过线下结算确认打款。</p>
-      </div>
-      <div class="toolbar-actions">
-        <el-button type="primary" :icon="Plus" @click="openCreateDialog">创建提号</el-button>
-      </div>
-    </div>
+  <div class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><Switch /></el-icon>
+            <span>OFFLINE PICKUP</span>
+          </div>
+          <h1 class="page-title">线下提号</h1>
+          <p class="page-subtitle">
+            管理员线下提号管理、店铺渠道分发、提号利润核算与线下结算打款确认。
+          </p>
+        </div>
 
-    <div class="pickup-filter-bar">
-      <el-form inline @submit.prevent>
-        <el-form-item label="关键词" class="pickup-keyword-filter">
+        <div class="toolbar-actions">
+          <el-button type="primary" :icon="Plus" @click="openCreateDialog">创建提号</el-button>
+          <el-button :icon="Refresh" @click="loadList">刷新数据</el-button>
+        </div>
+      </div>
+    </header>
+
+    <!-- 汇总指标卡片 -->
+    <section class="summary-metric-grid">
+      <div class="metric-card metric-card--total">
+        <div class="metric-icon-wrap indigo">
+          <el-icon><Switch /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">提号总记录</span>
+          <strong class="metric-val indigo-val">{{ total }} 笔</strong>
+          <span class="metric-sub-pill info">全量线下提号</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--picking">
+        <div class="metric-icon-wrap amber">
+          <el-icon><Clock /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页进行中提号</span>
+          <strong class="metric-val amber-val">{{ pickingUpCount }} 笔</strong>
+          <span class="metric-sub-pill warning">提号处理中</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--completed">
+        <div class="metric-icon-wrap emerald">
+          <el-icon><DocumentChecked /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页已完成提号</span>
+          <strong class="metric-val emerald-val">{{ completedCount }} 笔</strong>
+          <span class="metric-sub-pill success">已流转完毕</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--profit">
+        <div class="metric-icon-wrap rose">
+          <el-icon><Money /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页累计线下利润</span>
+          <strong class="metric-val rose-val">{{ formatCentWithSymbol(totalProfitCent) }}</strong>
+          <span class="metric-sub-pill danger">平台线下结余</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 筛选面板 -->
+    <section class="section-card filter-card">
+      <el-form class="filter-grid" label-position="top" @submit.prevent="handleSearch">
+        <el-form-item label="关键词检索">
           <el-input
             v-model="filters.keyword"
-            placeholder="提号编号 / 上架编号 / 账号标题 / 手机号"
+            placeholder="提号编号 / 上架编号 / 账号 / 手机号"
             clearable
             @keyup.enter="handleSearch"
             @clear="handleSearch"
           />
         </el-form-item>
+
         <el-form-item label="提号状态">
-          <el-select v-model="filters.status" clearable placeholder="全部" @change="handleSearch">
+          <el-select
+            v-model="filters.status"
+            clearable
+            placeholder="全部状态"
+            class="full-control"
+            @change="handleSearch"
+          >
             <el-option label="提号中" value="picking_up" />
             <el-option label="已完成" value="completed" />
             <el-option label="已取消" value="cancelled" />
           </el-select>
         </el-form-item>
+
         <el-form-item label="店铺">
           <el-select
             v-model="filters.shop_name"
             filterable
             clearable
-            placeholder="全部"
+            placeholder="全部店铺"
+            class="full-control"
             @change="handleSearch"
           >
             <el-option v-for="name in shopOptions" :key="name" :label="name" :value="name" />
           </el-select>
         </el-form-item>
+
         <el-form-item label="账号来源">
           <el-select
             v-model="filters.account_source"
             clearable
-            placeholder="全部"
+            placeholder="全部来源"
+            class="full-control"
             @change="handleSearch"
           >
             <el-option label="外部上传 · 平台代管" value="external_platform_managed" />
             <el-option label="站内上传" value="internal" />
           </el-select>
         </el-form-item>
-        <el-form-item label="线下结算">
+
+        <el-form-item label="线下结算状态">
           <el-select
             v-model="filters.offline_settlement_status"
             clearable
             placeholder="全部"
+            class="full-control"
             @change="handleSearch"
           >
             <el-option label="待确认" value="pending" />
             <el-option label="已确认" value="settled" />
           </el-select>
         </el-form-item>
-        <el-form-item class="pickup-filter-actions">
-          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
-          <el-button @click="resetFilters">重置</el-button>
-          <el-button :icon="Refresh" @click="loadList">刷新</el-button>
+
+        <el-form-item label=" ">
+          <div class="filter-actions">
+            <el-button type="primary" :icon="Search" :loading="loading" @click="handleSearch">
+              查询
+            </el-button>
+            <el-button @click="resetFilters">重置</el-button>
+          </div>
         </el-form-item>
       </el-form>
-    </div>
+    </section>
 
-    <el-table v-loading="loading" :data="items" class="table-panel">
-      <el-table-column prop="pickup_no" label="提号编号" width="190" />
-      <el-table-column prop="account_title" label="账号" min-width="180" />
-      <el-table-column label="区服/平台" width="150">
-        <template #default="{ row }"
-          >{{ row.server_region || '-' }} / {{ row.login_platform || '-' }}</template
+    <!-- 提号数据表格 -->
+    <section class="section-card table-section-card">
+      <div class="table-card-header">
+        <div class="table-header-title">
+          <el-icon class="header-icon"><Switch /></el-icon>
+          <span>线下提号明细</span>
+        </div>
+        <span class="count-badge">共 {{ total }} 条提号记录</span>
+      </div>
+
+      <div class="table-container">
+        <el-table
+          v-loading="loading"
+          class="custom-enterprise-table"
+          :data="items"
+          stripe
+          empty-text="未找到匹配的提号记录"
         >
-      </el-table-column>
-      <el-table-column label="上架编号" width="120">
-        <template #default="{ row }">{{ row.listing_no }}</template>
-      </el-table-column>
-      <el-table-column label="卖家" width="140">
-        <template #default="{ row }">{{ row.owner_phone }}</template>
-      </el-table-column>
-      <el-table-column label="账号来源" width="180">
-        <template #default="{ row }">
-          <div class="source-cell">
-            <el-tag :type="pickupSourceTagType(row.account_source)" effect="light" size="small">
-              {{ pickupSourceLabel(row.account_source) }}
-            </el-tag>
-            <small v-if="row.source_channel">{{ row.source_channel }}</small>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="交易渠道" width="110">
-        <template #default="{ row }">{{ row.platform || '-' }}</template>
-      </el-table-column>
-      <el-table-column label="店铺名称" min-width="130">
-        <template #default="{ row }">{{ row.shop_name || '-' }}</template>
-      </el-table-column>
-      <el-table-column label="结算金额" width="130">
-        <template #default="{ row }">
-          <span v-if="row.status === 'completed'">{{
-            formatCentWithSymbol(effectiveSettleCent(row))
-          }}</span>
-          <span v-else class="text-muted">待结算</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="线下利润" width="120">
-        <template #default="{ row }">{{ formatCentWithSymbol(effectiveProfitCent(row)) }}</template>
-      </el-table-column>
-      <el-table-column label="状态" width="100">
-        <template #default="{ row }">
-          <el-tag :type="statusType(row.status)" effect="light">
-            {{ pickupStatusLabel(row.status) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="结算状态" width="125">
-        <template #default="{ row }">
-          <el-tag :type="offlineSettlementTagType(row)" effect="light">
-            {{ offlineSettlementLabel(row) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" width="170">
-        <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
-      </el-table-column>
-      <el-table-column label="操作" width="340" fixed="right">
-        <template #default="{ row }">
-          <div class="action-buttons">
-            <RouterLink :to="adminPath(`pickup/${row.id}`)">
-              <el-button size="small">详情</el-button>
-            </RouterLink>
-            <el-button
-              v-if="row.status === 'picking_up'"
-              type="success"
-              size="small"
-              plain
-              :icon="EditPen"
-              @click="openProfitDialog(row)"
-            >
-              改利润
-            </el-button>
-            <el-button
-              v-if="row.status === 'picking_up'"
-              type="primary"
-              size="small"
-              @click="openCompleteDialog(row)"
-            >
-              完成提号
-            </el-button>
-            <el-button
-              v-if="row.status === 'completed' && row.offline_settlement_status === 'pending'"
-              type="primary"
-              size="small"
-              plain
-              @click="handleConfirmOfflineSettlement(row)"
-            >
-              确认线下结算
-            </el-button>
-            <el-button
-              v-if="row.status === 'completed'"
-              size="small"
-              plain
-              :icon="EditPen"
-              @click="openFinancialAdjustmentDialog(row)"
-            >
-              财务调整
-            </el-button>
-            <el-button
-              v-if="row.status === 'picking_up'"
-              type="danger"
-              size="small"
-              plain
-              @click="handleCancel(row.id)"
-            >
-              取消
-            </el-button>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+          <el-table-column label="提号编号" width="180" fixed="left">
+            <template #default="{ row }">
+              <span class="font-mono text-primary font-bold">{{ row.pickup_no }}</span>
+            </template>
+          </el-table-column>
 
-    <div class="pagination-wrapper">
-      <el-pagination
-        :current-page="filters.page"
-        :page-size="filters.page_size"
-        :page-sizes="[20, 50, 100]"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handlePageChange"
-      />
-    </div>
+          <el-table-column label="商品账号" min-width="190" show-overflow-tooltip>
+            <template #default="{ row }">
+              <div class="account-cell">
+                <strong class="account-title">{{ row.account_title }}</strong>
+                <small class="listing-no font-mono">上架编号: {{ row.listing_no }}</small>
+              </div>
+            </template>
+          </el-table-column>
 
-    <!-- 创建提号 -->
+          <el-table-column label="区服 / 平台" width="140">
+            <template #default="{ row }">
+              <span class="meta-tag"
+                >{{ row.server_region || '-' }} / {{ row.login_platform || '-' }}</span
+              >
+            </template>
+          </el-table-column>
+
+          <el-table-column label="卖家手机" width="135">
+            <template #default="{ row }">
+              <span class="font-mono">{{ row.owner_phone || '-' }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="账号来源" width="170">
+            <template #default="{ row }">
+              <div class="source-cell">
+                <el-tag
+                  :type="pickupSourceTagType(row.account_source)"
+                  size="small"
+                  class="source-tag"
+                >
+                  {{ pickupSourceLabel(row.account_source) }}
+                </el-tag>
+                <small v-if="row.source_channel" class="channel-text">{{
+                  row.source_channel
+                }}</small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="渠道 / 店铺" min-width="140">
+            <template #default="{ row }">
+              <div class="shop-cell">
+                <span class="platform-name">{{ row.platform || '-' }}</span>
+                <small class="shop-name">{{ row.shop_name || '-' }}</small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="结算金额" width="125" align="right">
+            <template #default="{ row }">
+              <span v-if="row.status === 'completed'" class="font-mono font-semibold">
+                {{ formatCentWithSymbol(effectiveSettleCent(row)) }}
+              </span>
+              <span v-else class="text-muted">待结算</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="线下利润" width="125" align="right">
+            <template #default="{ row }">
+              <strong class="font-mono text-emerald font-bold">
+                {{ formatCentWithSymbol(effectiveProfitCent(row)) }}
+              </strong>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="提号状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType(row.status)" size="small" class="status-pill">
+                {{ pickupStatusLabel(row.status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="结算状态" width="120" align="center">
+            <template #default="{ row }">
+              <el-tag
+                :type="offlineSettlementTagType(row)"
+                size="small"
+                effect="plain"
+                class="settle-pill"
+              >
+                {{ offlineSettlementLabel(row) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="创建时间" min-width="165">
+            <template #default="{ row }">
+              <span class="time-cell">{{ formatDateTime(row.created_at) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="280" fixed="right" align="center">
+            <template #default="{ row }">
+              <div class="action-btn-group">
+                <RouterLink :to="adminPath(`pickup/${row.id}`)">
+                  <el-button link type="primary" size="small">详情</el-button>
+                </RouterLink>
+                <el-button
+                  v-if="row.status === 'picking_up'"
+                  link
+                  type="success"
+                  size="small"
+                  :icon="EditPen"
+                  @click="openProfitDialog(row)"
+                >
+                  改利润
+                </el-button>
+                <el-button
+                  v-if="row.status === 'picking_up'"
+                  link
+                  type="primary"
+                  size="small"
+                  @click="openCompleteDialog(row)"
+                >
+                  完成
+                </el-button>
+                <el-button
+                  v-if="row.status === 'completed' && row.offline_settlement_status === 'pending'"
+                  link
+                  type="warning"
+                  size="small"
+                  @click="handleConfirmOfflineSettlement(row)"
+                >
+                  确认结算
+                </el-button>
+                <el-button
+                  v-if="row.status === 'completed'"
+                  link
+                  type="info"
+                  size="small"
+                  :icon="EditPen"
+                  @click="openFinancialAdjustmentDialog(row)"
+                >
+                  调账
+                </el-button>
+                <el-button
+                  v-if="row.status === 'picking_up'"
+                  link
+                  type="danger"
+                  size="small"
+                  @click="handleCancel(row.id)"
+                >
+                  取消
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="pagination-wrapper">
+        <el-pagination
+          :current-page="filters.page"
+          :page-size="filters.page_size"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handlePageChange"
+        />
+      </div>
+    </section>
+
+    <!-- 创建提号弹窗 -->
     <el-dialog
       v-model="createDialogVisible"
       title="创建线下提号"
       width="min(640px, calc(100vw - 32px))"
+      destroy-on-close
     >
-      <el-form label-width="110px">
-        <el-form-item label="账号来源">
+      <el-form label-position="top">
+        <el-form-item label="账号来源筛选">
           <el-radio-group
             v-model="listingSourceType"
-            size="small"
+            class="direction-group"
             @change="handleListingSourceChange"
           >
-            <el-radio-button value="">全部</el-radio-button>
-            <el-radio-button value="external">外部上传 · 平台代管</el-radio-button>
+            <el-radio-button value="">全部来源</el-radio-button>
+            <el-radio-button value="external_platform_managed">
+              外部上传 · 平台代管
+            </el-radio-button>
             <el-radio-button value="internal">站内上传</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="选择账号" required>
+
+        <el-form-item label="选择出租商品" required>
           <el-select
             v-model="createForm.listing_id"
             filterable
             remote
-            clearable
             :remote-method="searchListings"
             :loading="listingLoading"
-            placeholder="输入上架编号或账号标题搜索"
-            style="width: 100%"
+            placeholder="搜索商品编号 / 标题 / 卖家手机号"
+            class="full-control"
           >
             <el-option
               v-for="item in listingOptions"
               :key="item.id"
               :label="listingOptionLabel(item)"
               :value="item.id"
-            >
-              <div class="listing-option">
-                <el-tag
-                  :type="pickupSourceTagType(item.account_source)"
-                  effect="light"
-                  size="small"
-                >
-                  {{ pickupSourceLabel(item.account_source) }}
-                </el-tag>
-                <span class="listing-option-title"
-                  >{{ item.listing_no }} · {{ item.account_title }}</span
-                >
-                <span class="listing-option-price">
-                  {{ formatCentWithSymbol(listingOwnerTotalCent(item)) }} /
-                  {{ formatCentWithSymbol(item.listing_price_cent) }}
-                </span>
-              </div>
-            </el-option>
+            />
           </el-select>
-          <div class="form-hint">仅显示已发布、已审核、未在交易中的账号</div>
         </el-form-item>
-        <el-form-item v-if="selectedListing" label="来源确认">
-          <div class="selected-source">
-            <el-tag :type="pickupSourceTagType(selectedListing.account_source)" effect="light">
-              {{ pickupSourceLabel(selectedListing.account_source) }}
-            </el-tag>
-            <span v-if="selectedListing.source_channel">
-              来源渠道：{{ selectedListing.source_channel }}
-            </span>
-            <span v-if="selectedListing.is_external_upload">
-              交接：{{
-                selectedListing.handoff_mode === 'platform'
-                  ? '平台代管'
-                  : selectedListing.handoff_mode
-              }}
-            </span>
-          </div>
-        </el-form-item>
-        <el-form-item v-if="selectedListing && selectedPriceSnapshot" label="价格快照">
-          <div class="price-snapshot">
-            <span>纯比价格 {{ formatCentWithSymbol(selectedPriceSnapshot.pureCent) }}</span>
-            <span>额外物品价格 {{ formatCentWithSymbol(selectedPriceSnapshot.extraCent) }}</span>
-            <span>号主总价 {{ formatCentWithSymbol(selectedPriceSnapshot.totalCent) }}</span>
-            <span>网站售价 {{ formatCentWithSymbol(selectedListing.listing_price_cent) }}</span>
-            <span>网站加价 {{ formatCentWithSymbol(selectedListing.website_profit_cent) }}</span>
-            <span>回收 {{ ratioText(selectedListing.seller_ratio) }}</span>
-            <span>售卖 {{ ratioText(selectedListing.buyer_ratio) }}</span>
-          </div>
-        </el-form-item>
-        <el-form-item label="交易渠道">
-          <el-input v-model="createForm.platform" placeholder="如 微信 / QQ / 闲鱼" />
-        </el-form-item>
-        <el-form-item label="店铺名称">
-          <el-select
-            v-model="createForm.shop_name"
-            filterable
-            allow-create
-            default-first-option
-            clearable
-            :loading="shopOptionsLoading"
-            placeholder="选择历史店铺或输入新店铺"
-            style="width: 100%"
-          >
-            <el-option v-for="name in shopOptions" :key="name" :label="name" :value="name" />
-          </el-select>
-          <div class="form-hint">首次使用的店铺可直接输入名称创建</div>
-        </el-form-item>
-        <el-form-item label="线下利润(元)">
+
+        <div class="form-row-2">
+          <el-form-item label="分发渠道">
+            <el-input v-model="createForm.platform" placeholder="例如：闲鱼 / 淘宝 / 微信" />
+          </el-form-item>
+          <el-form-item label="店铺名称">
+            <el-input v-model="createForm.shop_name" placeholder="例如：大锤专营店" />
+          </el-form-item>
+        </div>
+
+        <el-form-item label="预估线下利润（元）">
           <el-input-number
             v-model="createForm.profit_amount"
             :min="0"
-            :step="1"
             :precision="2"
-            controls-position="right"
-            style="width: 100%"
+            :step="5"
+            class="full-control"
           />
-          <div class="form-hint">电商平台实际成交利润，财务统计按该金额汇总</div>
         </el-form-item>
-        <el-form-item label="备注">
+
+        <el-form-item label="提号备注说明">
           <el-input
             v-model="createForm.remark"
             type="textarea"
             :rows="3"
-            placeholder="线下交易说明（可选）"
+            placeholder="填写提号买家信息或分销备注..."
           />
         </el-form-item>
-        <el-alert type="info" :closable="false">
-          创建后账号将被锁定为"提号中"，卖家收到通知；不会立即结算，需手动完成结算。
-        </el-alert>
       </el-form>
       <template #footer>
-        <el-button @click="createDialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="loading" @click="handleCreate">创建提号</el-button>
+        <div class="modal-footer">
+          <el-button @click="createDialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="loading" @click="handleCreate">确认创建</el-button>
+        </div>
       </template>
     </el-dialog>
 
-    <!-- 完成提号 -->
-    <el-dialog v-model="completeDialogVisible" title="完成提号" width="480px">
-      <el-form label-width="110px">
-        <el-form-item label="结算金额(元)" required>
+    <!-- 完成提号弹窗 -->
+    <el-dialog v-model="completeDialogVisible" title="完成线下提号" width="520px" destroy-on-close>
+      <el-form label-position="top">
+        <el-form-item label="实际结算金额（元）">
           <el-input-number
             v-model="completeForm.settle_amount"
-            :min="0.01"
-            :step="1"
+            :min="0"
             :precision="2"
-            controls-position="right"
-            style="width: 100%"
+            :step="10"
+            class="full-control"
           />
-          <div class="form-hint">
-            {{
-              activePickup?.settlement_mode === 'platform_managed'
-                ? '记录待线下支付的结算金额'
-                : '给卖家钱包增加的可用余额'
-            }}
-          </div>
         </el-form-item>
-        <el-form-item label="线下利润(元)">
+        <el-form-item label="最终线下利润（元）">
           <el-input-number
             v-model="completeForm.profit_amount"
             :min="0"
-            :step="1"
             :precision="2"
-            controls-position="right"
-            style="width: 100%"
+            :step="5"
+            class="full-control"
           />
-          <div class="form-hint">可在结算时修正为最终利润，财务统计使用该值</div>
         </el-form-item>
-        <el-form-item label="完成备注">
+        <el-form-item label="完结备注说明">
           <el-input
             v-model="completeForm.complete_remark"
             type="textarea"
             :rows="3"
-            placeholder="完成说明（可选）"
+            placeholder="填写完结核销备注..."
           />
         </el-form-item>
-        <el-alert type="warning" :closable="false">
-          完成后账号下架不可再上架。站内上传会立即入账卖家钱包；平台代管会转为待线下结算，实际打款后需单独确认。
-        </el-alert>
       </el-form>
       <template #footer>
-        <el-button @click="completeDialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="loading" @click="handleComplete">确认完成</el-button>
+        <div class="modal-footer">
+          <el-button @click="completeDialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="loading" @click="handleComplete">确认完成</el-button>
+        </div>
       </template>
     </el-dialog>
 
-    <el-dialog v-model="profitDialogVisible" title="修改线下利润" width="460px">
-      <el-form label-width="110px">
-        <el-form-item label="线下利润(元)" required>
+    <!-- 修改利润弹窗 -->
+    <el-dialog v-model="profitDialogVisible" title="修改线下利润" width="480px" destroy-on-close>
+      <el-form label-position="top">
+        <el-form-item label="线下利润金额（元）" required>
           <el-input-number
             v-model="profitForm.profit_amount"
             :min="0"
-            :step="1"
             :precision="2"
-            controls-position="right"
-            style="width: 100%"
+            :step="5"
+            class="full-control"
           />
         </el-form-item>
-        <el-form-item label="修改原因">
+        <el-form-item label="修改原因说明">
           <el-input
             v-model="profitForm.reason"
             type="textarea"
             :rows="3"
-            maxlength="255"
-            show-word-limit
-            placeholder="可选"
+            placeholder="填写修改利润的原因..."
           />
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="profitDialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="profitSaving" @click="handleUpdateProfit">
-          保存
-        </el-button>
+        <div class="modal-footer">
+          <el-button @click="profitDialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="profitSaving" @click="handleUpdateProfit">
+            保存修改
+          </el-button>
+        </div>
       </template>
     </el-dialog>
 
-    <el-dialog v-model="financialAdjustmentDialogVisible" title="完成后财务调整" width="500px">
-      <el-form label-width="120px">
-        <el-form-item label="目标利润(元)">
-          <el-input-number
-            v-model="financialAdjustmentForm.profit_amount"
-            :min="0"
-            :step="1"
-            :precision="2"
-            controls-position="right"
-            style="width: 100%"
-          />
-        </el-form-item>
-        <el-form-item label="目标打款金额(元)">
+    <!-- 财务调整弹窗 -->
+    <el-dialog
+      v-model="financialAdjustmentDialogVisible"
+      title="提号财务调账"
+      width="520px"
+      destroy-on-close
+    >
+      <el-form label-position="top">
+        <el-form-item label="调整后结算金额（元）" required>
           <el-input-number
             v-model="financialAdjustmentForm.settle_amount"
             :min="0"
-            :step="1"
             :precision="2"
-            controls-position="right"
-            style="width: 100%"
+            :step="10"
+            class="full-control"
           />
-          <div class="form-hint">
-            {{
-              activePickup?.settlement_mode === 'platform_managed'
-                ? '代管账号会生成待线下补款或待追回记录'
-                : '增加金额会立即补入号主钱包，减少金额会生成待追回记录'
-            }}
-          </div>
         </el-form-item>
-        <el-form-item label="调整原因" required>
+        <el-form-item label="调整后线下利润（元）" required>
+          <el-input-number
+            v-model="financialAdjustmentForm.profit_amount"
+            :min="0"
+            :precision="2"
+            :step="5"
+            class="full-control"
+          />
+        </el-form-item>
+        <el-form-item label="调账原因（必填，审计留痕）" required>
           <el-input
             v-model="financialAdjustmentForm.reason"
             type="textarea"
             :rows="3"
-            maxlength="255"
-            show-word-limit
-            placeholder="请输入调整原因"
+            placeholder="填写财务调账的原因依据..."
           />
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="financialAdjustmentDialogVisible = false">取消</el-button>
-        <el-button
-          type="primary"
-          :loading="financialAdjustmentSaving"
-          @click="handleFinancialAdjustment"
-        >
-          确认调整
-        </el-button>
+        <div class="modal-footer">
+          <el-button @click="financialAdjustmentDialogVisible = false">取消</el-button>
+          <el-button
+            type="primary"
+            :loading="financialAdjustmentSaving"
+            @click="handleFinancialAdjustment"
+          >
+            确认调账
+          </el-button>
+        </div>
       </template>
     </el-dialog>
-  </section>
+  </div>
 </template>
 
 <style scoped>
-.form-hint {
-  margin-top: 4px;
-  font-size: 12px;
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
+}
+
+/* ================= 头部卡片 ================= */
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #0284c7;
+  background: #e0f2fe;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 16px;
+}
+
+.metric-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 18px 20px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+}
+
+.metric-card--total::before {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+.metric-card--picking::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.metric-card--completed::before {
+  background: linear-gradient(90deg, #10b981, #34d399);
+}
+
+.metric-card--profit::before {
+  background: linear-gradient(90deg, #f43f5e, #fb7185);
+}
+
+.metric-icon-wrap {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.metric-icon-wrap.indigo {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.metric-icon-wrap.amber {
+  background: #fffbeb;
+  color: #f59e0b;
+}
+
+.metric-icon-wrap.emerald {
+  background: #ecfdf5;
+  color: #10b981;
+}
+
+.metric-icon-wrap.rose {
+  background: #fff1f2;
+  color: #f43f5e;
+}
+
+.metric-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metric-label {
+  font-size: 12.5px;
+  font-weight: 500;
   color: #64748b;
 }
-.pickup-filter-bar {
+
+.metric-val {
+  font-size: 22px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.3px;
+  line-height: 1.2;
+}
+
+.indigo-val {
+  color: #4f46e5;
+}
+
+.amber-val {
+  color: #d97706;
+}
+
+.emerald-val {
+  color: #059669;
+}
+
+.rose-val {
+  color: #e11d48;
+}
+
+.metric-sub-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  width: fit-content;
+}
+
+.metric-sub-pill.info {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.metric-sub-pill.warning {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.metric-sub-pill.success {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.metric-sub-pill.danger {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+/* ================= 筛选面板 ================= */
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  align-items: flex-end;
+  gap: 14px 16px;
+}
+
+.filter-grid :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.filter-grid :deep(.el-form-item__label) {
+  padding-bottom: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+}
+
+.filter-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.full-control {
+  width: 100%;
+}
+
+.form-row-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+/* ================= 表格卡片 ================= */
+.table-section-card {
+  padding-bottom: 16px;
+}
+
+.table-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   margin-bottom: 16px;
 }
 
-.pickup-filter-bar :deep(.el-form) {
+.table-header-title {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 10px 16px;
-}
-
-.pickup-filter-bar :deep(.el-form-item) {
-  margin: 0;
-}
-
-.pickup-filter-bar :deep(.el-form-item__label) {
-  padding-right: 7px;
-  color: #52616f;
-  font-size: 13px;
-}
-
-.pickup-filter-bar :deep(.el-select) {
-  width: 128px;
-}
-
-.pickup-filter-bar :deep(.el-form-item:nth-child(3) .el-select) {
-  width: 150px;
-}
-
-.pickup-filter-bar :deep(.el-form-item:nth-child(4) .el-select) {
-  width: 175px;
-}
-
-.pickup-keyword-filter :deep(.el-input) {
-  width: 280px;
-}
-
-.pickup-filter-actions :deep(.el-form-item__content) {
   gap: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
 }
 
-@media (max-width: 900px) {
-  .pickup-filter-bar :deep(.el-form) {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .pickup-filter-bar :deep(.el-form-item),
-  .pickup-filter-bar :deep(.el-select),
-  .pickup-keyword-filter :deep(.el-input) {
-    width: 100%;
-  }
-
-  .pickup-filter-bar :deep(.el-form-item__content) {
-    min-width: 0;
-    flex: 1;
-  }
+.header-icon {
+  color: #0284c7;
+  font-size: 18px;
 }
 
-@media (max-width: 600px) {
-  .pickup-filter-bar :deep(.el-form) {
-    grid-template-columns: minmax(0, 1fr);
-  }
+.count-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #0284c7;
+  background: #e0f2fe;
+  padding: 3px 10px;
+  border-radius: 20px;
 }
-.text-muted {
-  color: #94a3b8;
+
+.table-container {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
 }
-.price-snapshot {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
+
+.custom-enterprise-table :deep(.el-table__header-wrapper th) {
+  background-color: #f8fafc !important;
   color: #475569;
   font-size: 13px;
-  line-height: 1.6;
+  font-weight: 600;
+  padding: 12px 0;
+  border-bottom: 1px solid #e2e8f0;
 }
+
+.custom-enterprise-table :deep(.el-table__body-wrapper td) {
+  padding: 12px 0;
+  font-size: 13px;
+  color: #334155;
+}
+
+.account-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.account-title {
+  font-size: 13px;
+  color: #0f172a;
+  font-weight: 600;
+}
+
+.listing-no {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
 .source-cell {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 3px;
+  gap: 2px;
 }
-.source-cell small {
+
+.source-tag {
+  width: fit-content;
+  font-weight: 600;
+}
+
+.channel-text {
+  font-size: 11px;
   color: #64748b;
 }
-.listing-option {
+
+.shop-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.platform-name {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.shop-name {
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.status-pill,
+.settle-pill {
+  font-weight: 600;
+}
+
+.meta-tag {
+  font-size: 11px;
+  background: #f1f5f9;
+  color: #475569;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.time-cell {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.text-muted {
+  color: #94a3b8;
+}
+
+.action-btn-group {
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.pagination-wrapper {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.text-primary {
+  color: #2563eb;
+}
+
+.text-emerald {
+  color: #059669;
+}
+
+/* ================= 弹窗样式 ================= */
+.direction-group {
   width: 100%;
 }
-.listing-option-title {
-  min-width: 0;
+
+.direction-group :deep(.el-radio-button) {
   flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
-.listing-option-price {
-  flex: none;
-  color: #64748b;
-  font-variant-numeric: tabular-nums;
+
+.direction-group :deep(.el-radio-button__inner) {
+  width: 100%;
 }
-.selected-source {
+
+.modal-footer {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  color: #475569;
-  font-size: 13px;
-}
-.action-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+  justify-content: flex-end;
+  gap: 10px;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminRefundReviewView.vue b/frontend/src/features/admin/views/AdminRefundReviewView.vue
index 6dcdc97..59b5e0c 100644
--- a/frontend/src/features/admin/views/AdminRefundReviewView.vue
+++ b/frontend/src/features/admin/views/AdminRefundReviewView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Check, Close, Refresh, View } from '@element-plus/icons-vue'
+import { Check, Close, Money, Refresh, ShoppingBag, View, Warning } from '@element-plus/icons-vue'
 import {
   adminApproveRefund,
   adminRejectRefund,
@@ -22,6 +22,10 @@ const rejectVisible = ref(false)
 const rejectOrder = ref<Order | null>(null)
 const orders = ref<Order[]>([])
 
+const totalRefundAmountCent = computed(() =>
+  orders.value.reduce((sum, item) => sum + Number(item.refund_amount_cent || 0), 0)
+)
+
 async function loadOrders() {
   loading.value = true
   try {
@@ -36,7 +40,7 @@ async function loadOrders() {
 async function handleApprove(row: Order) {
   try {
     await ElMessageBox.confirm(
-      `确认通过「${row.order_no}」的退款申请？通过后将原路退回 ${formatCentWithSymbol(row.refund_amount_cent || 0)}，订单取消。`,
+      `确认通过订单「${row.order_no}」的退款申请？通过后将原路退回 ${formatCentWithSymbol(row.refund_amount_cent || 0)}，订单取消。`,
       '退款审核通过确认',
       { confirmButtonText: '通过退款', cancelButtonText: '取消', type: 'warning' }
     )
@@ -111,175 +115,473 @@ async function handleRejectClose() {
 }
 
 function openDetail(order: Order) {
-  router.push(adminPath(`orders/${order.id}`))
+  void router.push(adminPath(`orders/${order.id}`))
 }
 
 onMounted(loadOrders)
 </script>
 
 <template>
-  <div class="refund-review-page">
-    <div class="page-toolbar">
-      <h2>退款审核</h2>
-      <el-button :icon="Refresh" :loading="loading" @click="loadOrders">刷新</el-button>
-    </div>
+  <div class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><Money /></el-icon>
+            <span>REFUND AUDIT</span>
+          </div>
+          <h1 class="page-title">退款审核</h1>
+          <p class="page-subtitle">
+            审核租客取消订单发起的退款申请，核验订单流转状态并执行原路退回或驳回处理。
+          </p>
+        </div>
 
-    <div v-loading="loading" class="review-list">
-      <div v-if="!loading && orders.length === 0" class="empty-state">
-        <el-empty description="暂无待审核退款" />
+        <div class="toolbar-actions">
+          <el-button :icon="Refresh" :loading="loading" @click="loadOrders">刷新数据</el-button>
+        </div>
+      </div>
+    </header>
+
+    <!-- 汇总指标卡片 -->
+    <section class="summary-metric-grid">
+      <div class="metric-card metric-card--pending">
+        <div class="metric-icon-wrap amber">
+          <el-icon><Warning /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">待审核退款申请</span>
+          <strong class="metric-val amber-val">{{ orders.length }} 笔</strong>
+          <span class="metric-sub-pill warning">等待人工审核</span>
+        </div>
       </div>
 
-      <div class="review-cards">
-        <div v-for="order in orders" :key="order.id" class="review-card">
-          <div class="card-header">
-            <div class="order-info">
-              <span class="order-no" @click="openDetail(order)">{{ order.order_no }}</span>
-              <el-tag size="small" type="warning">待客服审核退款</el-tag>
-            </div>
-            <div class="order-time">{{ formatDateTime(order.updated_at) }}</div>
-          </div>
+      <div class="metric-card metric-card--amount">
+        <div class="metric-icon-wrap rose">
+          <el-icon><Money /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">待退款总金额</span>
+          <strong class="metric-val rose-val">{{
+            formatCentWithSymbol(totalRefundAmountCent)
+          }}</strong>
+          <span class="metric-sub-pill danger">待原路退回资金</span>
+        </div>
+      </div>
+    </section>
 
-          <div class="card-body">
-            <div class="info-row">
-              <span class="info-label">商品</span>
-              <span class="info-value">{{ order.title || '-' }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">订单状态</span>
-              <span class="info-value">{{ orderStatusLabel(order.status) }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">交接状态</span>
-              <span class="info-value">{{ handoffStatusLabel(order.handoff_status) }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">号主</span>
-              <span class="info-value">{{ order.owner_phone || '-' }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">租客</span>
-              <span class="info-value">{{ order.renter_phone || '-' }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">订单总额</span>
-              <span class="info-value"
-                >{{
-                  formatCentWithSymbol((order.rent_amount_cent || 0) + order.deposit_amount_cent)
-                }}（租金{{ formatCentWithSymbol(order.rent_amount_cent || 0) }} / 押金{{
-                  formatCentWithSymbol(order.deposit_amount_cent)
-                }}）</span
-              >
-            </div>
-            <div class="info-row">
-              <span class="info-label">退款金额</span>
-              <span class="info-value refund-amount">{{
-                formatCentWithSymbol(order.refund_amount_cent || 0)
-              }}</span>
-            </div>
-          </div>
+    <!-- 退款列表卡片 -->
+    <section class="section-card review-list-card">
+      <div class="table-card-header">
+        <div class="table-header-title">
+          <el-icon class="header-icon"><ShoppingBag /></el-icon>
+          <span>待审核退款列表</span>
+        </div>
+        <span class="count-badge">共 {{ orders.length }} 笔待办</span>
+      </div>
 
-          <div class="card-actions">
-            <el-button :icon="View" size="small" @click="openDetail(order)"> 查看详情 </el-button>
-            <el-button
-              :icon="Check"
-              type="primary"
-              size="small"
-              :loading="submitting"
-              @click="handleApprove(order)"
-            >
-              通过退款
-            </el-button>
-            <el-button
-              :icon="Close"
-              type="danger"
-              size="small"
-              :loading="submitting"
-              @click="openReject(order)"
-            >
-              驳回
-            </el-button>
+      <div v-loading="loading" class="review-items-wrap">
+        <div v-if="!loading && orders.length === 0" class="empty-box">
+          <el-empty description="暂无待审核的退款申请，运营秩序良好" />
+        </div>
+
+        <div v-else class="review-cards-grid">
+          <div v-for="order in orders" :key="order.id" class="review-card">
+            <div class="rc-header">
+              <div class="rc-order-info">
+                <span class="order-no" @click="openDetail(order)">{{ order.order_no }}</span>
+                <el-tag size="small" type="warning" class="status-tag">待客服审核退款</el-tag>
+              </div>
+              <span class="time-text">{{ formatDateTime(order.updated_at) }}</span>
+            </div>
+
+            <div class="rc-body">
+              <div class="rc-info-row">
+                <span class="label">商品标题</span>
+                <span class="val title-val">{{ order.title || '-' }}</span>
+              </div>
+              <div class="rc-info-grid">
+                <div class="rc-info-row">
+                  <span class="label">租客信息</span>
+                  <span class="val font-mono">{{ order.renter_phone || '-' }}</span>
+                </div>
+                <div class="rc-info-row">
+                  <span class="label">号主信息</span>
+                  <span class="val font-mono">{{ order.owner_phone || '-' }}</span>
+                </div>
+                <div class="rc-info-row">
+                  <span class="label">订单状态</span>
+                  <span class="val">{{ orderStatusLabel(order.status) }}</span>
+                </div>
+                <div class="rc-info-row">
+                  <span class="label">交接状态</span>
+                  <span class="val">{{ handoffStatusLabel(order.handoff_status) }}</span>
+                </div>
+              </div>
+
+              <div class="rc-amount-row">
+                <div class="amount-detail">
+                  <span class="label">订单总付：</span>
+                  <span class="val font-mono">
+                    {{
+                      formatCentWithSymbol(
+                        (order.rent_amount_cent || 0) + order.deposit_amount_cent
+                      )
+                    }}
+                    <small
+                      >（租金 {{ formatCentWithSymbol(order.rent_amount_cent || 0) }} + 押金
+                      {{ formatCentWithSymbol(order.deposit_amount_cent) }}）</small
+                    >
+                  </span>
+                </div>
+                <div class="refund-badge">
+                  <span class="refund-label">申请退款</span>
+                  <strong class="refund-val font-mono">{{
+                    formatCentWithSymbol(order.refund_amount_cent || 0)
+                  }}</strong>
+                </div>
+              </div>
+            </div>
+
+            <div class="rc-footer">
+              <el-button :icon="View" size="small" @click="openDetail(order)"> 查看订单 </el-button>
+              <div class="action-btn-group">
+                <el-button
+                  :icon="Close"
+                  type="danger"
+                  size="small"
+                  plain
+                  :loading="submitting"
+                  @click="openReject(order)"
+                >
+                  驳回退款
+                </el-button>
+                <el-button
+                  :icon="Check"
+                  type="primary"
+                  size="small"
+                  :loading="submitting"
+                  @click="handleApprove(order)"
+                >
+                  通过退款
+                </el-button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </section>
 
-    <!-- 驳回弹窗 -->
-    <el-dialog v-model="rejectVisible" title="驳回退款" width="420px">
-      <div v-if="rejectOrder" class="reject-dialog">
-        <p class="reject-tip">请选择驳回方式：</p>
-        <div class="reject-options">
-          <el-button type="primary" :loading="submitting" @click="handleRejectRestore">
-            驳回退款（恢复订单）
-          </el-button>
-          <p class="option-desc">仅驳回退款请求，订单恢复至待交接状态，交接流程可继续</p>
+    <!-- 驳回退款弹窗 -->
+    <el-dialog v-model="rejectVisible" title="驳回退款申请" width="480px" destroy-on-close>
+      <div v-if="rejectOrder" class="reject-dialog-body">
+        <div class="reject-order-badge">
+          <span>待处理订单：</span>
+          <strong class="font-mono">{{ rejectOrder.order_no }}</strong>
+        </div>
+        <p class="reject-tip-text">请根据争议核实情况选择驳回模式：</p>
+        <div class="reject-mode-list">
+          <div class="reject-mode-card" @click="handleRejectRestore">
+            <div class="mode-header">
+              <el-button type="primary" size="small" :loading="submitting">
+                仅驳回退款（恢复订单）
+              </el-button>
+            </div>
+            <p class="mode-desc">
+              仅驳回退款请求，订单恢复至待交接状态，号主与租客可继续完成交接履约。
+            </p>
+          </div>
 
-          <el-button type="danger" :loading="submitting" @click="handleRejectClose">
-            驳回退款并关闭订单
-          </el-button>
-          <p class="option-desc">驳回退款且关闭订单，商品下架归档，订单不可再操作</p>
+          <div class="reject-mode-card" @click="handleRejectClose">
+            <div class="mode-header">
+              <el-button type="danger" size="small" :loading="submitting">
+                驳回退款并关闭订单
+              </el-button>
+            </div>
+            <p class="mode-desc">驳回退款请求并强制关闭订单，商品将下架归档，后续不可再流转。</p>
+          </div>
         </div>
       </div>
       <template #footer>
-        <el-button @click="rejectVisible = false">取消</el-button>
+        <div class="modal-footer">
+          <el-button @click="rejectVisible = false">取消</el-button>
+        </div>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <style scoped>
-.refund-review-page {
-  max-width: 900px;
-  margin: 0 auto;
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
 }
 
-.page-toolbar {
+/* ================= 头部卡片 ================= */
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #ea580c;
+  background: #fff7ed;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.metric-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 18px 20px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+}
+
+.metric-card--pending::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.metric-card--amount::before {
+  background: linear-gradient(90deg, #f43f5e, #fb7185);
+}
+
+.metric-icon-wrap {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.metric-icon-wrap.amber {
+  background: #fffbeb;
+  color: #f59e0b;
+}
+
+.metric-icon-wrap.rose {
+  background: #fff1f2;
+  color: #f43f5e;
+}
+
+.metric-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metric-label {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+.metric-val {
+  font-size: 24px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.3px;
+  line-height: 1.2;
+}
+
+.amber-val {
+  color: #d97706;
+}
+
+.rose-val {
+  color: #e11d48;
+}
+
+.metric-sub-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  width: fit-content;
+}
+
+.metric-sub-pill.warning {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.metric-sub-pill.danger {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+/* ================= 列表卡片 ================= */
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.table-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }
 
-.page-toolbar h2 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.empty-state {
-  padding: 60px 0;
-}
-
-.review-cards {
+.table-header-title {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.header-icon {
+  color: #ea580c;
+  font-size: 18px;
+}
+
+.count-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #ea580c;
+  background: #fff7ed;
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+
+.empty-box {
+  padding: 40px 0;
+}
+
+.review-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  gap: 16px;
 }
 
 .review-card {
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-  padding: 16px;
-  background: var(--el-bg-color);
+  background: #f8fafc;
+  border-radius: 14px;
+  border: 1px solid #e2e8f0;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  transition: all 0.2s ease;
 }
 
-.card-header {
+.review-card:hover {
+  background: #ffffff;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
+  border-color: #cbd5e1;
+}
+
+.rc-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
   padding-bottom: 12px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
+  border-bottom: 1px solid #e2e8f0;
 }
 
-.order-info {
+.rc-order-info {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
 .order-no {
-  font-weight: 600;
-  color: var(--el-color-primary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13px;
+  font-weight: 700;
+  color: #2563eb;
   cursor: pointer;
 }
 
@@ -287,66 +589,173 @@ onMounted(loadOrders)
   text-decoration: underline;
 }
 
-.order-time {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.card-body {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px 24px;
-  margin-bottom: 12px;
-}
-
-.info-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-}
-
-.info-label {
-  color: var(--el-text-color-secondary);
-  white-space: nowrap;
-}
-
-.info-value {
-  color: var(--el-text-color-primary);
-}
-
-.refund-amount {
+.status-tag {
   font-weight: 600;
-  color: var(--el-color-danger);
 }
 
-.card-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-top: 12px;
-  border-top: 1px solid var(--el-border-color-lighter);
+.time-text {
+  font-size: 11.5px;
+  color: #94a3b8;
 }
 
-.reject-dialog {
-  text-align: center;
-}
-
-.reject-tip {
-  margin-bottom: 16px;
-  color: var(--el-text-color-regular);
-}
-
-.reject-options {
+.rc-body {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.option-desc {
+.rc-info-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12.5px;
+}
+
+.rc-info-row .label {
+  color: #64748b;
+  min-width: 60px;
+  flex-shrink: 0;
+}
+
+.rc-info-row .val {
+  color: #1e293b;
+  font-weight: 500;
+}
+
+.title-val {
+  font-weight: 600 !important;
+  color: #0f172a !important;
+}
+
+.rc-info-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid #edf2f7;
+}
+
+.rc-amount-row {
+  margin-top: 4px;
+  padding: 10px 12px;
+  background: #fff1f2;
+  border-radius: 8px;
+  border: 1px solid #fecdd3;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.amount-detail .label {
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.amount-detail .val {
   font-size: 12px;
-  color: var(--el-text-color-secondary);
-  margin: 0 0 12px 0;
-  text-align: left;
+  color: #334155;
+}
+
+.amount-detail small {
+  color: #94a3b8;
+}
+
+.refund-badge {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.refund-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #e11d48;
+}
+
+.refund-val {
+  font-size: 18px;
+  font-weight: 800;
+  color: #e11d48;
+}
+
+.rc-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 10px;
+  border-top: 1px dashed #e2e8f0;
+}
+
+.action-btn-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+/* ================= 弹窗样式 ================= */
+.reject-dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.reject-order-badge {
+  background: #f8fafc;
+  border-radius: 8px;
+  padding: 8px 12px;
+  border: 1px solid #e2e8f0;
+  font-size: 13px;
+  color: #334155;
+}
+
+.reject-tip-text {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.reject-mode-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.reject-mode-card {
+  padding: 12px;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.reject-mode-card:hover {
+  background: #ffffff;
+  border-color: #cbd5e1;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
+}
+
+.mode-desc {
+  margin: 0;
+  font-size: 11.5px;
+  color: #64748b;
+  line-height: 1.4;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminUsersView.vue b/frontend/src/features/admin/views/AdminUsersView.vue
index 5674c42..84e9b23 100644
--- a/frontend/src/features/admin/views/AdminUsersView.vue
+++ b/frontend/src/features/admin/views/AdminUsersView.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
 import { readError } from '@/shared/utils/error'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Search } from '@element-plus/icons-vue'
+import {
+  CreditCard,
+  Lock,
+  Medal,
+  Refresh,
+  Search,
+  Unlock,
+  User,
+  UserFilled,
+} from '@element-plus/icons-vue'
 import { computed, reactive, ref } from 'vue'
 
 import {
@@ -70,6 +79,16 @@ const {
   fetchFn: (page, pageSize) => fetchAdminUsers(page, pageSize, filters),
 })
 
+const verifiedCount = computed(
+  () => users.value.filter(u => u.realname_status === 'verified').length
+)
+const quotaUserCount = computed(
+  () => users.value.filter(u => Number(u.deposit_free_effective_quota_cent || 0) > 0).length
+)
+const frozenUserCount = computed(
+  () => users.value.filter(u => u.status === 'frozen' || u.status === 'disabled').length
+)
+
 function queryUsers() {
   currentPage.value = 1
   void loadUsers()
@@ -108,9 +127,14 @@ function openWalletAdjust(row: AdminUserItem) {
 
 async function handleSetDepositQuota() {
   if (!quotaUser.value) return
+  const amount = Number(quotaAmount.value || 0)
+  if (amount < 0) {
+    ElMessage.warning('免押额度不能为负数')
+    return
+  }
   submitting.value = true
   try {
-    await setAdminUserDepositFreeQuota(quotaUser.value.id, yuanToCent(quotaAmount.value))
+    await setAdminUserDepositFreeQuota(quotaUser.value.id, yuanToCent(amount))
     ElMessage.success('人工免押额度已更新')
     quotaUser.value = null
     await loadUsers()
@@ -124,19 +148,17 @@ async function handleSetDepositQuota() {
 async function handleAdjustGrowthPoints() {
   if (!growthUser.value) return
   const targetPoints = Number(growthForm.targetPoints)
-  if (!Number.isInteger(targetPoints) || targetPoints < 0 || targetPoints > 1000000000) {
-    ElMessage.warning('目标积分必须是 0 到 10 亿之间的整数')
+  if (!Number.isInteger(targetPoints) || targetPoints < 0) {
+    ElMessage.warning('请输入大于等于 0 的整数积分')
     return
   }
-  if (targetPoints === Number(growthUser.value.renter_growth_points || 0)) {
-    ElMessage.warning('目标积分与当前积分相同')
+  if (!growthForm.reason.trim()) {
+    ElMessage.warning('请填写调整原因')
     return
   }
-  if (growthForm.reason.trim().length < 2) {
-    ElMessage.warning('请填写至少 2 个字的调整原因')
-    return
-  }
-  const direction = targetPoints > growthUser.value.renter_growth_points ? '提升' : '降低'
+  const currentPoints = Number(growthUser.value.renter_growth_points || 0)
+  const diff = targetPoints - currentPoints
+  const direction = diff > 0 ? `增加 ${diff}` : diff < 0 ? `减少 ${Math.abs(diff)}` : '不变'
   try {
     await ElMessageBox.confirm(
       `确认将用户 ${growthUser.value.phone || growthUser.value.id} 的成长积分从 ${growthUser.value.renter_growth_points} ${direction}至 ${targetPoints}？`,
@@ -259,34 +281,24 @@ async function handleWalletAdjust() {
     ElMessage.warning('单笔调账不能超过 10 万元')
     return
   }
-  if (walletForm.reason.trim().length < 2) {
-    ElMessage.warning('请填写至少 2 个字的调账原因')
+  if (!walletForm.reason.trim()) {
+    ElMessage.warning('请填写调账原因')
     return
   }
-  if (
-    walletForm.direction === 'out' &&
-    yuanToCent(amountYuan) > Number(walletUser.value.available_balance_cent || 0)
-  ) {
-    ElMessage.warning('扣款金额不能超过可用余额')
-    return
-  }
-
-  const actionLabel = walletForm.direction === 'in' ? '加款' : '扣款'
-  const amountText = `¥${amountYuan.toFixed(1)}`
+  const actionLabel = walletForm.direction === 'out' ? '扣款' : '加款'
+  const promptText =
+    walletForm.direction === 'out'
+      ? `确认从用户 ${walletUser.value.phone || walletUser.value.id} 的可用余额中扣除 ¥${amountYuan.toFixed(1)}？（请确保已线下打款或核销）`
+      : `确认向用户 ${walletUser.value.phone || walletUser.value.id} 的可用余额增加 ¥${amountYuan.toFixed(1)}？`
   try {
-    await ElMessageBox.confirm(
-      `确认为用户 ${walletUser.value.phone || walletUser.value.id} ${actionLabel} ${amountText}？\n操作将写入资金流水与审计日志。`,
-      `确认${actionLabel}`,
-      {
-        type: 'warning',
-        confirmButtonText: `确认${actionLabel}`,
-        cancelButtonText: '取消',
-      }
-    )
+    await ElMessageBox.confirm(promptText, `确认${actionLabel}`, {
+      type: walletForm.direction === 'out' ? 'warning' : 'info',
+      confirmButtonText: `确认${actionLabel}`,
+      cancelButtonText: '取消',
+    })
   } catch {
     return
   }
-
   submitting.value = true
   try {
     await adjustAdminUserWallet(walletUser.value.id, {
@@ -305,342 +317,543 @@ async function handleWalletAdjust() {
   }
 }
 
-function moneyCent(value: number | string | undefined) {
+function moneyCent(value: number | string | undefined | null) {
   return formatCent(Number(value || 0))
 }
+
+function statusTagType(status: string): 'success' | 'danger' | 'info' {
+  if (status === 'active') return 'success'
+  if (status === 'frozen') return 'danger'
+  return 'info'
+}
+
+function realnameTagType(status: string): 'success' | 'warning' | 'info' {
+  if (status === 'verified') return 'success'
+  if (status === 'pending') return 'warning'
+  return 'info'
+}
 </script>
 
 <template>
-  <section class="page">
-    <div class="page-header-row">
-      <div class="page-header">
-        <p class="eyebrow">Users</p>
-        <h1>用户管理</h1>
-        <p>查看用户信息，处理成长积分、人工免押、实名与余额调账。</p>
-      </div>
-      <el-button @click="loadUsers">刷新</el-button>
-    </div>
+  <div class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><User /></el-icon>
+            <span>USERS & ACCOUNTS</span>
+          </div>
+          <h1 class="page-title">用户管理</h1>
+          <p class="page-subtitle">
+            查看平台注册用户档案、实名认证、成长积分等级、可用余额与免押授信额度。
+          </p>
+        </div>
 
-    <div class="user-filter-bar">
-      <el-form inline @submit.prevent>
-        <el-form-item label="关键词">
+        <div class="toolbar-actions">
+          <el-button :icon="Refresh" @click="queryUsers">刷新</el-button>
+        </div>
+      </div>
+    </header>
+
+    <!-- 汇总指标卡片 -->
+    <section class="summary-metric-grid">
+      <div class="metric-card metric-card--users">
+        <div class="metric-icon-wrap indigo">
+          <el-icon><UserFilled /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">全量注册用户</span>
+          <strong class="metric-val indigo-val">{{ total }} 人</strong>
+          <span class="metric-sub-pill info">平台总会员池</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--realname">
+        <div class="metric-icon-wrap emerald">
+          <el-icon><Medal /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页已实名认证</span>
+          <strong class="metric-val emerald-val">{{ verifiedCount }} 人</strong>
+          <span class="metric-sub-pill success">真实有效身份</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--quota">
+        <div class="metric-icon-wrap amber">
+          <el-icon><CreditCard /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页免押授信用户</span>
+          <strong class="metric-val amber-val">{{ quotaUserCount }} 人</strong>
+          <span class="metric-sub-pill warning">拥有免押额度</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--frozen">
+        <div class="metric-icon-wrap rose">
+          <el-icon><Lock /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页冻结 / 禁用</span>
+          <strong class="metric-val rose-val">{{ frozenUserCount }} 人</strong>
+          <span class="metric-sub-pill danger">风控或受限</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 筛选面板 -->
+    <section class="section-card filter-card">
+      <el-form class="filter-grid" label-position="top" @submit.prevent="queryUsers">
+        <el-form-item label="关键词检索">
           <el-input
             v-model="filters.keyword"
             clearable
-            placeholder="手机号 / 昵称 / 用户ID"
-            style="width: 220px"
+            placeholder="搜索手机号 / 昵称 / 用户 ID"
             @keyup.enter="queryUsers"
             @clear="queryUsers"
           />
         </el-form-item>
-        <el-form-item label="状态">
+
+        <el-form-item label="账户状态">
           <el-select
             v-model="filters.status"
             clearable
             placeholder="全部状态"
-            style="width: 140px"
+            class="full-control"
             @change="queryUsers"
           >
-            <el-option label="正常" value="active" />
+            <el-option label="正常活跃" value="active" />
             <el-option label="已冻结" value="frozen" />
             <el-option label="已禁用" value="disabled" />
           </el-select>
         </el-form-item>
-        <el-form-item label="免押额度">
-          <el-checkbox v-model="filters.has_deposit_free_quota" @change="queryUsers">
-            仅看有额度
-          </el-checkbox>
+
+        <el-form-item label="免押授信筛选">
+          <div class="checkbox-wrap">
+            <el-checkbox v-model="filters.has_deposit_free_quota" @change="queryUsers">
+              仅筛选拥有有效免押额度用户
+            </el-checkbox>
+          </div>
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary" :icon="Search" :loading="loading" @click="queryUsers"
-            >查询</el-button
-          >
-          <el-button @click="resetFilters">重置</el-button>
+
+        <el-form-item label=" ">
+          <div class="filter-actions">
+            <el-button type="primary" :icon="Search" :loading="loading" @click="queryUsers">
+              查询
+            </el-button>
+            <el-button @click="resetFilters">重置</el-button>
+          </div>
         </el-form-item>
       </el-form>
-    </div>
+    </section>
 
-    <el-table v-loading="loading" class="table-panel" :data="users" empty-text="未找到匹配的用户">
-      <el-table-column prop="id" label="用户ID" width="80" />
-      <el-table-column prop="nickname" label="昵称" min-width="120" />
-      <el-table-column prop="phone" label="手机号" min-width="120" />
-      <el-table-column label="状态" width="90">
-        <template #default="{ row }">{{ userStatusLabel(row.status) }}</template>
-      </el-table-column>
-      <el-table-column label="实名状态" width="100">
-        <template #default="{ row }">{{ realnameStatusLabel(row.realname_status) }}</template>
-      </el-table-column>
-      <el-table-column label="成长等级" width="100">
-        <template #default="{ row }">
-          <el-tag type="success" effect="light">{{
-            row.renter_growth_level_name || '普通'
-          }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="成长积分" width="100" align="right">
-        <template #default="{ row }">{{ Number(row.renter_growth_points || 0) }}</template>
-      </el-table-column>
-      <el-table-column label="可用余额" width="108" align="right">
-        <template #default="{ row }">
-          <span class="balance-available">¥{{ moneyCent(row.available_balance_cent) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="冻结余额" width="108" align="right">
-        <template #default="{ row }">
-          <span
-            class="balance-frozen"
-            :class="{ 'is-positive': Number(row.frozen_balance_cent || 0) > 0 }"
-          >
-            ¥{{ moneyCent(row.frozen_balance_cent) }}
-          </span>
-        </template>
-      </el-table-column>
-      <el-table-column label="免押总额" width="150" align="right">
-        <template #default="{ row }">
-          <div class="quota-cell">
-            <strong>¥{{ moneyCent(row.deposit_free_effective_quota_cent) }}</strong>
-            <span>
-              等级 {{ moneyCent(row.deposit_free_level_quota_cent) }} + 人工
-              {{ moneyCent(row.deposit_free_manual_quota_cent) }}
-            </span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="剩余免押" width="100" align="right">
-        <template #default="{ row }">¥{{ moneyCent(row.deposit_free_remaining_cent) }}</template>
-      </el-table-column>
-      <el-table-column label="注册时间" min-width="160">
-        <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
-      </el-table-column>
-      <el-table-column label="操作" width="360" fixed="right" align="right">
-        <template #default="{ row }">
-          <div class="table-actions">
-            <el-button
-              v-if="canAdjustWallet"
-              text
-              type="primary"
-              size="small"
-              @click="openWalletAdjust(row)"
-            >
-              余额
-            </el-button>
-            <el-button
-              v-if="canAdjustGrowthPoints"
-              text
-              type="primary"
-              size="small"
-              @click="openGrowthPoints(row)"
-            >
-              积分
-            </el-button>
-            <el-button text type="primary" size="small" @click="openDepositQuota(row)">
-              人工免押
-            </el-button>
-            <el-button
-              v-if="row.realname_status !== 'verified'"
-              text
-              type="success"
-              size="small"
-              :loading="submitting"
-              @click="openManualRealname(row)"
-            >
-              实名
-            </el-button>
-            <el-button
-              v-if="row.realname_status !== 'unverified'"
-              text
-              type="warning"
-              size="small"
-              :loading="submitting"
-              @click="openRevokeRealname(row)"
-            >
-              撤销实名
-            </el-button>
-            <el-button
-              v-if="row.status === 'active'"
-              text
-              type="danger"
-              size="small"
-              :loading="submitting"
-              @click="openFreeze(row)"
-            >
-              冻结
-            </el-button>
-            <el-button
-              v-else
-              text
-              type="primary"
-              size="small"
-              :loading="submitting"
-              @click="handleUnfreeze(row)"
-            >
-              解冻
-            </el-button>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 用户数据表格 -->
+    <section class="section-card table-section-card">
+      <div class="table-card-header">
+        <div class="table-header-title">
+          <el-icon class="header-icon"><User /></el-icon>
+          <span>用户档案与账户明细</span>
+        </div>
+        <span class="count-badge">共 {{ total }} 位用户</span>
+      </div>
 
-    <AdminTablePagination
-      v-if="total > 0"
-      v-model:current-page="currentPage"
-      v-model:page-size="currentPageSize"
-      :total="total"
-      :loading="loading"
-      @page-change="loadUsers"
-    />
+      <div class="table-container">
+        <el-table
+          v-loading="loading"
+          class="custom-enterprise-table"
+          :data="users"
+          stripe
+          empty-text="未找到匹配的用户"
+        >
+          <el-table-column label="用户档案" min-width="170" fixed="left">
+            <template #default="{ row }">
+              <div class="user-profile-cell">
+                <div class="user-name-row">
+                  <span class="nickname">{{ row.nickname || '未设置昵称' }}</span>
+                </div>
+                <div class="user-meta-row">
+                  <span class="phone-text">{{ row.phone }}</span>
+                  <small class="uid-tag">UID: {{ row.id }}</small>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
 
+          <el-table-column label="账户状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusTagType(row.status)" size="small" class="status-pill">
+                {{ userStatusLabel(row.status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="实名状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="realnameTagType(row.realname_status)" size="small" class="status-pill">
+                {{ realnameStatusLabel(row.realname_status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="成长等级 / 积分" min-width="140">
+            <template #default="{ row }">
+              <div class="level-cell">
+                <el-tag size="small" effect="plain" class="level-tag">
+                  {{ row.renter_growth_level_name || '普通' }}
+                </el-tag>
+                <span class="points-text">{{ Number(row.renter_growth_points || 0) }} 积分</span>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="可用余额" min-width="120" align="right">
+            <template #default="{ row }">
+              <strong class="balance-available font-mono"
+                >¥{{ moneyCent(row.available_balance_cent) }}</strong
+              >
+            </template>
+          </el-table-column>
+
+          <el-table-column label="冻结余额" min-width="120" align="right">
+            <template #default="{ row }">
+              <span
+                class="balance-frozen font-mono"
+                :class="{ 'has-frozen': Number(row.frozen_balance_cent || 0) > 0 }"
+              >
+                ¥{{ moneyCent(row.frozen_balance_cent) }}
+              </span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="免押总额度" min-width="160" align="right">
+            <template #default="{ row }">
+              <div class="quota-stack">
+                <strong class="quota-total font-mono"
+                  >¥{{ moneyCent(row.deposit_free_effective_quota_cent) }}</strong
+                >
+                <small class="quota-breakdown">
+                  等级 ¥{{ moneyCent(row.deposit_free_level_quota_cent) }} + 人工 ¥{{
+                    moneyCent(row.deposit_free_manual_quota_cent)
+                  }}
+                </small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="剩余免押" min-width="110" align="right">
+            <template #default="{ row }">
+              <span class="font-mono text-emerald font-semibold"
+                >¥{{ moneyCent(row.deposit_free_remaining_cent) }}</span
+              >
+            </template>
+          </el-table-column>
+
+          <el-table-column label="注册时间" min-width="165">
+            <template #default="{ row }">
+              <span class="time-cell">{{ formatDateTime(row.created_at) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="340" fixed="right" align="center">
+            <template #default="{ row }">
+              <div class="action-btn-group">
+                <el-button
+                  v-if="canAdjustWallet"
+                  link
+                  type="primary"
+                  size="small"
+                  @click="openWalletAdjust(row)"
+                >
+                  余额
+                </el-button>
+                <el-button
+                  v-if="canAdjustGrowthPoints"
+                  link
+                  type="primary"
+                  size="small"
+                  @click="openGrowthPoints(row)"
+                >
+                  积分
+                </el-button>
+                <el-button link type="primary" size="small" @click="openDepositQuota(row)">
+                  人工免押
+                </el-button>
+                <el-button
+                  v-if="row.realname_status !== 'verified'"
+                  link
+                  type="success"
+                  size="small"
+                  :loading="submitting"
+                  @click="openManualRealname(row)"
+                >
+                  实名
+                </el-button>
+                <el-button
+                  v-if="row.realname_status !== 'unverified'"
+                  link
+                  type="warning"
+                  size="small"
+                  :loading="submitting"
+                  @click="openRevokeRealname(row)"
+                >
+                  撤销实名
+                </el-button>
+                <el-button
+                  v-if="row.status === 'active'"
+                  link
+                  type="danger"
+                  size="small"
+                  :loading="submitting"
+                  @click="openFreeze(row)"
+                >
+                  <el-icon><Lock /></el-icon>
+                  冻结
+                </el-button>
+                <el-button
+                  v-else
+                  link
+                  type="primary"
+                  size="small"
+                  :loading="submitting"
+                  @click="handleUnfreeze(row)"
+                >
+                  <el-icon><Unlock /></el-icon>
+                  解冻
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <AdminTablePagination
+        v-if="total > 0"
+        v-model:current-page="currentPage"
+        v-model:page-size="currentPageSize"
+        :total="total"
+        @change="loadUsers"
+      />
+    </section>
+
+    <!-- 冻结用户弹窗 -->
     <el-dialog
       :model-value="!!activeUser"
       title="冻结用户"
-      width="560px"
+      width="540px"
+      destroy-on-close
       @update:model-value="activeUser = null"
     >
       <div v-if="activeUser" class="dialog-body">
-        <p>
-          <strong>{{ activeUser.phone }}</strong> · {{ activeUser.nickname }}
-        </p>
-        <el-input
-          v-model="freezeReason"
-          type="textarea"
-          :rows="4"
-          placeholder="填写冻结原因，便于审计追踪"
-        />
-      </div>
-      <template #footer>
-        <el-button @click="activeUser = null">取消</el-button>
-        <el-button type="danger" :loading="submitting" @click="handleFreeze">确认冻结</el-button>
-      </template>
-    </el-dialog>
-
-    <el-dialog
-      :model-value="!!manualRealnameUser"
-      title="人工实名认证"
-      width="560px"
-      @update:model-value="manualRealnameUser = null"
-    >
-      <div v-if="manualRealnameUser" class="dialog-body">
-        <p>
-          <strong>{{ manualRealnameUser.phone }}</strong> · {{ manualRealnameUser.nickname }}
-        </p>
+        <div class="target-user-card">
+          <span class="user-label">目标用户：</span>
+          <strong>{{ activeUser.phone }}</strong>
+          <span class="nickname-note"
+            >（{{ activeUser.nickname || '未设置昵称' }} · UID: {{ activeUser.id }}）</span
+          >
+        </div>
         <el-alert
-          type="info"
+          type="error"
           :closable="false"
-          title="请确认已通过线下或客服材料核验姓名与身份证号，提交后该用户会直接变为已实名。"
+          show-icon
+          title="冻结后该用户将无法登录前台、发布商品或进行租号下单。"
+          style="margin-bottom: 14px"
         />
-        <el-form label-position="top" @submit.prevent>
-          <el-form-item label="真实姓名">
-            <el-input v-model="manualRealnameForm.name" clearable placeholder="请输入真实姓名" />
-          </el-form-item>
-          <el-form-item label="身份证号">
+        <el-form label-position="top">
+          <el-form-item label="冻结原因（审计留痕）">
             <el-input
-              v-model="manualRealnameForm.idNo"
-              clearable
-              maxlength="18"
-              placeholder="请输入18位身份证号"
-            />
-          </el-form-item>
-          <el-form-item label="处理原因">
-            <el-input
-              v-model="manualRealnameForm.reason"
+              v-model="freezeReason"
               type="textarea"
-              :rows="3"
-              placeholder="填写处理原因，便于审计追踪"
+              :rows="4"
+              placeholder="填写冻结具体违规原因，便于日后审计追踪..."
             />
           </el-form-item>
         </el-form>
       </div>
       <template #footer>
-        <el-button @click="manualRealnameUser = null">取消</el-button>
-        <el-button type="success" :loading="submitting" @click="handleManualRealname"
-          >确认实名</el-button
-        >
+        <div class="modal-footer">
+          <el-button @click="activeUser = null">取消</el-button>
+          <el-button type="danger" :loading="submitting" @click="handleFreeze">确认冻结</el-button>
+        </div>
       </template>
     </el-dialog>
 
+    <!-- 人工实名弹窗 -->
+    <el-dialog
+      :model-value="!!manualRealnameUser"
+      title="人工实名认证"
+      width="540px"
+      destroy-on-close
+      @update:model-value="manualRealnameUser = null"
+    >
+      <div v-if="manualRealnameUser" class="dialog-body">
+        <div class="target-user-card">
+          <span class="user-label">认证用户：</span>
+          <strong>{{ manualRealnameUser.phone }}</strong>
+          <span class="nickname-note"
+            >（{{ manualRealnameUser.nickname || '未设置昵称' }} · UID:
+            {{ manualRealnameUser.id }}）</span
+          >
+        </div>
+        <el-alert
+          type="info"
+          :closable="false"
+          show-icon
+          title="请确认已通过线下或客服核验真实身份材料，提交后该用户将直接获得实名权限。"
+          style="margin-bottom: 14px"
+        />
+        <el-form label-position="top" @submit.prevent>
+          <el-form-item label="真实姓名" required>
+            <el-input v-model="manualRealnameForm.name" clearable placeholder="请输入真实姓名" />
+          </el-form-item>
+          <el-form-item label="身份证号" required>
+            <el-input
+              v-model="manualRealnameForm.idNo"
+              clearable
+              maxlength="18"
+              placeholder="请输入 18 位身份证号"
+            />
+          </el-form-item>
+          <el-form-item label="处理原因与核验依据">
+            <el-input
+              v-model="manualRealnameForm.reason"
+              type="textarea"
+              :rows="3"
+              placeholder="填写客服人工核验依据与处理说明..."
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <div class="modal-footer">
+          <el-button @click="manualRealnameUser = null">取消</el-button>
+          <el-button type="success" :loading="submitting" @click="handleManualRealname">
+            确认实名
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 撤销实名弹窗 -->
     <el-dialog
       :model-value="!!realnameUser"
       title="撤销实名认证"
-      width="560px"
+      width="540px"
+      destroy-on-close
       @update:model-value="realnameUser = null"
     >
       <div v-if="realnameUser" class="dialog-body">
-        <p>
-          <strong>{{ realnameUser.phone }}</strong> · {{ realnameUser.nickname }}
-        </p>
+        <div class="target-user-card">
+          <span class="user-label">目标用户：</span>
+          <strong>{{ realnameUser.phone }}</strong>
+          <span class="nickname-note"
+            >（{{ realnameUser.nickname }} · UID: {{ realnameUser.id }}）</span
+          >
+        </div>
         <el-alert
           type="warning"
           :closable="false"
+          show-icon
           title="撤销后该用户实名信息将被清除，需重新完成实名认证后才能下单与登记收款码。"
+          style="margin-bottom: 14px"
         />
-        <el-input
-          v-model="revokeRealnameReason"
-          type="textarea"
-          :rows="4"
-          placeholder="填写撤销原因（如实名姓名与收款账户不一致），便于审计追踪"
-        />
+        <el-form label-position="top">
+          <el-form-item label="撤销原因（必填）">
+            <el-input
+              v-model="revokeRealnameReason"
+              type="textarea"
+              :rows="4"
+              placeholder="填写撤销具体原因（如姓名与收款账户不一致等）..."
+            />
+          </el-form-item>
+        </el-form>
       </div>
       <template #footer>
-        <el-button @click="realnameUser = null">取消</el-button>
-        <el-button type="warning" :loading="submitting" @click="handleRevokeRealname"
-          >确认撤销</el-button
-        >
+        <div class="modal-footer">
+          <el-button @click="realnameUser = null">取消</el-button>
+          <el-button type="warning" :loading="submitting" @click="handleRevokeRealname">
+            确认撤销
+          </el-button>
+        </div>
       </template>
     </el-dialog>
 
+    <!-- 设置人工免押额度弹窗 -->
     <el-dialog
       :model-value="!!quotaUser"
       title="设置人工免押额度"
       width="520px"
+      destroy-on-close
       @update:model-value="quotaUser = null"
     >
       <div v-if="quotaUser" class="dialog-body">
-        <p>
-          <strong>{{ quotaUser.phone }}</strong> · {{ quotaUser.nickname }}
-        </p>
-        <p>
-          等级额度 ¥{{ moneyCent(quotaUser.deposit_free_level_quota_cent) }}，人工额度 ¥{{
-            moneyCent(quotaUser.deposit_free_manual_quota_cent)
-          }}
-        </p>
-        <div class="quota-summary">
-          <span>有效总额 ¥{{ moneyCent(quotaUser.deposit_free_effective_quota_cent) }}</span>
-          <span>已占用 ¥{{ moneyCent(quotaUser.deposit_free_used_cent) }}</span>
-          <strong>剩余 ¥{{ moneyCent(quotaUser.deposit_free_remaining_cent) }}</strong>
+        <div class="target-user-card">
+          <span class="user-label">授信用户：</span>
+          <strong>{{ quotaUser.phone }}</strong>
+          <span class="nickname-note">（{{ quotaUser.nickname }} · UID: {{ quotaUser.id }}）</span>
         </div>
-        <el-input-number
-          v-model="quotaAmount"
-          class="full-control"
-          :min="0"
-          :precision="0"
-          :step="100"
-        />
+        <div class="quota-summary-box">
+          <div class="quota-item">
+            <span>当前有效总额</span>
+            <strong>¥{{ moneyCent(quotaUser.deposit_free_effective_quota_cent) }}</strong>
+          </div>
+          <div class="quota-item">
+            <span>已占用额度</span>
+            <span class="text-amber">¥{{ moneyCent(quotaUser.deposit_free_used_cent) }}</span>
+          </div>
+          <div class="quota-item">
+            <span>剩余可用</span>
+            <strong class="text-emerald"
+              >¥{{ moneyCent(quotaUser.deposit_free_remaining_cent) }}</strong
+            >
+          </div>
+        </div>
+        <el-form label-position="top" style="margin-top: 14px">
+          <el-form-item label="人工免押额度（元）">
+            <el-input-number
+              v-model="quotaAmount"
+              class="full-control"
+              :min="0"
+              :precision="0"
+              :step="100"
+            />
+          </el-form-item>
+        </el-form>
       </div>
       <template #footer>
-        <el-button :disabled="submitting" @click="quotaUser = null">取消</el-button>
-        <el-button type="primary" :loading="submitting" @click="handleSetDepositQuota"
-          >保存额度</el-button
-        >
+        <div class="modal-footer">
+          <el-button :disabled="submitting" @click="quotaUser = null">取消</el-button>
+          <el-button type="primary" :loading="submitting" @click="handleSetDepositQuota">
+            保存额度
+          </el-button>
+        </div>
       </template>
     </el-dialog>
 
+    <!-- 调整成长积分弹窗 -->
     <el-dialog
       :model-value="!!growthUser"
       title="调整成长积分"
-      width="540px"
+      width="520px"
+      destroy-on-close
       @update:model-value="growthUser = null"
     >
-      <div v-if="growthUser" class="dialog-body growth-dialog">
-        <p>
-          <strong>{{ growthUser.phone }}</strong> · {{ growthUser.nickname || '-' }} · 当前
-          {{ growthUser.renter_growth_level_name }}
-        </p>
-        <div class="growth-current">
-          <span>当前积分</span>
-          <strong>{{ growthUser.renter_growth_points }}</strong>
+      <div v-if="growthUser" class="dialog-body">
+        <div class="target-user-card">
+          <span class="user-label">目标用户：</span>
+          <strong>{{ growthUser.phone }}</strong>
+          <span class="nickname-note"
+            >（{{ growthUser.nickname || '-' }} · 当前
+            {{ growthUser.renter_growth_level_name }}）</span
+          >
+        </div>
+        <div class="growth-current-box">
+          <span>当前拥有成长积分</span>
+          <strong class="font-mono">{{ growthUser.renter_growth_points }}</strong>
         </div>
         <el-form label-position="top" @submit.prevent>
-          <el-form-item label="目标积分">
+          <el-form-item label="目标调整积分" required>
             <el-input-number
               v-model="growthForm.targetPoints"
               class="full-control"
@@ -650,45 +863,56 @@ function moneyCent(value: number | string | undefined) {
               step-strictly
             />
           </el-form-item>
-          <el-form-item label="调整原因（必填）">
+          <el-form-item label="调整原因（必填）" required>
             <el-input
               v-model="growthForm.reason"
               type="textarea"
               :rows="3"
               maxlength="200"
               show-word-limit
-              placeholder="例如：运营活动赠送或修正误发积分"
+              placeholder="例如：运营活动赠送或修正误发积分..."
             />
           </el-form-item>
         </el-form>
       </div>
       <template #footer>
-        <el-button :disabled="submitting" @click="growthUser = null">取消</el-button>
-        <el-button type="primary" :loading="submitting" @click="handleAdjustGrowthPoints">
-          确认调整
-        </el-button>
+        <div class="modal-footer">
+          <el-button :disabled="submitting" @click="growthUser = null">取消</el-button>
+          <el-button type="primary" :loading="submitting" @click="handleAdjustGrowthPoints">
+            确认调整
+          </el-button>
+        </div>
       </template>
     </el-dialog>
 
+    <!-- 余额管理弹窗 -->
     <el-dialog
       :model-value="!!walletUser"
-      title="余额管理"
-      width="560px"
+      title="钱包余额调账"
+      width="540px"
+      destroy-on-close
       @update:model-value="walletUser = null"
     >
-      <div v-if="walletUser" class="dialog-body wallet-dialog">
-        <p>
-          <strong>{{ walletUser.phone }}</strong> · {{ walletUser.nickname || '-' }} · ID
-          {{ walletUser.id }}
-        </p>
-        <div class="wallet-balance-cards">
-          <div>
+      <div v-if="walletUser" class="dialog-body">
+        <div class="target-user-card">
+          <span class="user-label">目标用户：</span>
+          <strong>{{ walletUser.phone }}</strong>
+          <span class="nickname-note"
+            >（{{ walletUser.nickname || '-' }} · UID: {{ walletUser.id }}）</span
+          >
+        </div>
+        <div class="wallet-balance-box">
+          <div class="wb-item">
             <span>可用余额</span>
-            <strong>¥{{ moneyCent(walletUser.available_balance_cent) }}</strong>
+            <strong class="font-mono text-emerald"
+              >¥{{ moneyCent(walletUser.available_balance_cent) }}</strong
+            >
           </div>
-          <div>
+          <div class="wb-item">
             <span>冻结余额</span>
-            <strong>¥{{ moneyCent(walletUser.frozen_balance_cent) }}</strong>
+            <strong class="font-mono text-amber"
+              >¥{{ moneyCent(walletUser.frozen_balance_cent) }}</strong
+            >
           </div>
         </div>
         <el-alert
@@ -696,22 +920,17 @@ function moneyCent(value: number | string | undefined) {
           type="warning"
           :closable="false"
           show-icon
-          title="该用户有冻结余额，通常对应进行中的提现单。冻结金额请到「提现审核」处理；此处仅调整可用余额。"
-        />
-        <el-alert
-          type="info"
-          :closable="false"
-          show-icon
-          title="扣款用于线下已打款核销；加款用于客服补偿。操作会写入资金流水与审计日志。"
+          title="该用户有冻结余额，对应提现中款项。此处仅用于调整可用余额。"
+          style="margin-bottom: 12px"
         />
         <el-form label-position="top" @submit.prevent>
           <el-form-item label="调账类型">
-            <el-radio-group v-model="walletForm.direction">
-              <el-radio-button value="out">扣款（核销）</el-radio-button>
-              <el-radio-button value="in">加款（补偿）</el-radio-button>
+            <el-radio-group v-model="walletForm.direction" class="direction-group">
+              <el-radio-button value="out">扣款（线下核销）</el-radio-button>
+              <el-radio-button value="in">加款（补偿入账）</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="金额（元）">
+          <el-form-item label="变动金额（元）" required>
             <el-input-number
               v-model="walletForm.amountYuan"
               class="full-control"
@@ -721,7 +940,7 @@ function moneyCent(value: number | string | undefined) {
               :step="10"
             />
           </el-form-item>
-          <el-form-item label="原因（必填，计入审计）">
+          <el-form-item label="调账原因（必填）" required>
             <el-input
               v-model="walletForm.reason"
               type="textarea"
@@ -731,178 +950,568 @@ function moneyCent(value: number | string | undefined) {
               placeholder="例如：用户无法提现，已线下转账核销可用余额"
             />
           </el-form-item>
-          <el-form-item label="外部单号（可选）">
+          <el-form-item label="外部关联单号（可选）">
             <el-input
               v-model="walletForm.referenceNo"
               clearable
               maxlength="64"
-              placeholder="线下转账单号 / 客服工单号"
+              placeholder="线下银行转账单号 / 财务工单号"
             />
           </el-form-item>
         </el-form>
       </div>
       <template #footer>
-        <el-button :disabled="submitting" @click="walletUser = null">取消</el-button>
-        <el-button
-          :type="walletForm.direction === 'out' ? 'danger' : 'success'"
-          :loading="submitting"
-          @click="handleWalletAdjust"
-        >
-          确认{{ walletForm.direction === 'out' ? '扣款' : '加款' }}
-        </el-button>
+        <div class="modal-footer">
+          <el-button :disabled="submitting" @click="walletUser = null">取消</el-button>
+          <el-button
+            :type="walletForm.direction === 'out' ? 'danger' : 'success'"
+            :loading="submitting"
+            @click="handleWalletAdjust"
+          >
+            {{ walletForm.direction === 'out' ? '确认扣款' : '确认加款' }}
+          </el-button>
+        </div>
       </template>
     </el-dialog>
-  </section>
+  </div>
 </template>
 
 <style scoped>
-.user-filter-bar {
-  margin-bottom: 16px;
-  padding: 16px 16px 0;
-  border-radius: 8px;
-  background: #fff;
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
 }
 
-.user-filter-bar :deep(.el-form-item) {
-  margin-bottom: 16px;
+/* ================= 头部卡片 ================= */
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
 }
 
-.balance-available {
-  color: #0f172a;
-  font-variant-numeric: tabular-nums;
-  font-weight: 700;
-}
-
-.balance-frozen {
-  color: #94a3b8;
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-}
-
-.balance-frozen.is-positive {
-  color: #c2410c;
-}
-
-.quota-cell {
-  display: grid;
-  gap: 2px;
-}
-
-.quota-cell strong {
-  color: #0f172a;
-  font-variant-numeric: tabular-nums;
-}
-
-.quota-cell span {
-  color: #64748b;
-  font-size: 11px;
-  line-height: 1.3;
-}
-
-.table-actions {
-  display: inline-flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 2px;
-  white-space: nowrap;
-}
-
-.table-actions :deep(.el-button) {
-  margin: 0;
-  height: 28px;
-  padding: 0 8px;
-  font-weight: 600;
-}
-
-.table-actions :deep(.el-button + .el-button) {
-  margin-left: 0;
-}
-
-.table-actions :deep(.el-button.is-text) {
-  border-radius: 6px;
-}
-
-.table-actions :deep(.el-button.is-text:hover) {
-  background: #f1f5f9;
-}
-
-.wallet-dialog {
-  display: grid;
-  gap: 14px;
-}
-
-.quota-summary {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 8px;
-  padding: 12px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  background: #f8fafc;
-  color: #64748b;
-  font-size: 13px;
-}
-
-.quota-summary strong {
-  color: #0f172a;
-}
-
-.growth-dialog {
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
   gap: 16px;
+  flex-wrap: wrap;
 }
 
-.growth-current {
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #4f46e5;
+  background: #eef2ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 12px 14px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  background: #f8fafc;
-  color: #64748b;
-}
-
-.growth-current strong {
-  color: #0f172a;
-  font-size: 22px;
-  font-variant-numeric: tabular-nums;
-}
-
-.wallet-balance-cards {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
   gap: 10px;
 }
 
-.wallet-balance-cards > div {
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
   display: grid;
-  gap: 6px;
-  padding: 12px 14px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  background: #f8fafc;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 16px;
 }
 
-.wallet-balance-cards span {
+.metric-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 18px 20px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+}
+
+.metric-card--users::before {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+.metric-card--realname::before {
+  background: linear-gradient(90deg, #10b981, #34d399);
+}
+
+.metric-card--quota::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.metric-card--frozen::before {
+  background: linear-gradient(90deg, #f43f5e, #fb7185);
+}
+
+.metric-icon-wrap {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.metric-icon-wrap.indigo {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.metric-icon-wrap.emerald {
+  background: #ecfdf5;
+  color: #10b981;
+}
+
+.metric-icon-wrap.amber {
+  background: #fffbeb;
+  color: #f59e0b;
+}
+
+.metric-icon-wrap.rose {
+  background: #fff1f2;
+  color: #f43f5e;
+}
+
+.metric-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.metric-label {
+  font-size: 12.5px;
+  font-weight: 500;
   color: #64748b;
-  font-size: 13px;
-  font-weight: 700;
 }
 
-.wallet-balance-cards strong {
-  color: #0f172a;
+.metric-val {
   font-size: 22px;
-  line-height: 1.1;
-  font-variant-numeric: tabular-nums;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.3px;
+  line-height: 1.2;
+}
+
+.indigo-val {
+  color: #4f46e5;
+}
+
+.emerald-val {
+  color: #059669;
+}
+
+.amber-val {
+  color: #d97706;
+}
+
+.rose-val {
+  color: #e11d48;
+}
+
+.metric-sub-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  width: fit-content;
+}
+
+.metric-sub-pill.info {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.metric-sub-pill.success {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.metric-sub-pill.warning {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.metric-sub-pill.danger {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+/* ================= 筛选面板 ================= */
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: 260px 180px 1fr auto;
+  align-items: flex-end;
+  gap: 14px 16px;
+}
+
+.filter-grid :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.filter-grid :deep(.el-form-item__label) {
+  padding-bottom: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+}
+
+.checkbox-wrap {
+  display: flex;
+  align-items: center;
+  height: 36px;
+}
+
+.filter-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .full-control {
   width: 100%;
 }
 
+/* ================= 表格卡片 ================= */
+.table-section-card {
+  padding-bottom: 16px;
+}
+
+.table-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.table-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.header-icon {
+  color: #4f46e5;
+  font-size: 18px;
+}
+
+.count-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #4f46e5;
+  background: #eef2ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+
+.table-container {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.custom-enterprise-table :deep(.el-table__header-wrapper th) {
+  background-color: #f8fafc !important;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 12px 0;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.custom-enterprise-table :deep(.el-table__body-wrapper td) {
+  padding: 12px 0;
+  font-size: 13px;
+  color: #334155;
+}
+
+.user-profile-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.user-name-row .nickname {
+  font-size: 13.5px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.user-meta-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.phone-text {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.uid-tag {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.status-pill {
+  font-weight: 600;
+}
+
+.level-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.level-tag {
+  font-weight: 600;
+}
+
+.points-text {
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.balance-available {
+  color: #059669;
+  font-weight: 700;
+  font-size: 13.5px;
+}
+
+.balance-frozen {
+  color: #94a3b8;
+  font-size: 12.5px;
+}
+
+.balance-frozen.has-frozen {
+  color: #d97706;
+  font-weight: 700;
+}
+
+.quota-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1px;
+}
+
+.quota-total {
+  font-size: 13px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.quota-breakdown {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.time-cell {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.action-btn-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  flex-wrap: wrap;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.text-emerald {
+  color: #059669;
+}
+
+.text-amber {
+  color: #d97706;
+}
+
+/* ================= 弹窗样式 ================= */
 .dialog-body {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 12px;
 }
+
+.target-user-card {
+  background: #f8fafc;
+  border-radius: 8px;
+  padding: 10px 14px;
+  border: 1px solid #e2e8f0;
+  font-size: 13px;
+  color: #334155;
+}
+
+.user-label {
+  color: #64748b;
+}
+
+.nickname-note {
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+.quota-summary-box,
+.wallet-balance-box {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  background: #f8fafc;
+  border-radius: 8px;
+  padding: 12px;
+  border: 1px solid #e2e8f0;
+  text-align: center;
+}
+
+.wallet-balance-box {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.quota-item,
+.wb-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.quota-item span,
+.wb-item span {
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.quota-item strong,
+.wb-item strong {
+  font-size: 15px;
+  color: #0f172a;
+}
+
+.growth-current-box {
+  background: #eef2ff;
+  border-radius: 8px;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.growth-current-box span {
+  font-size: 13px;
+  color: #4f46e5;
+  font-weight: 500;
+}
+
+.growth-current-box strong {
+  font-size: 22px;
+  color: #4f46e5;
+}
+
+.direction-group {
+  width: 100%;
+}
+
+.direction-group :deep(.el-radio-button) {
+  flex: 1;
+}
+
+.direction-group :deep(.el-radio-button__inner) {
+  width: 100%;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+@media (max-width: 1000px) {
+  .filter-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .filter-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/frontend/src/features/orders/composables/useOrderActions.ts b/frontend/src/features/orders/composables/useOrderActions.ts
index 793eea2..c356fb4 100644
--- a/frontend/src/features/orders/composables/useOrderActions.ts
+++ b/frontend/src/features/orders/composables/useOrderActions.ts
@@ -306,7 +306,9 @@ export function useOrderActions(options: UseOrderActionsOptions) {
     cancelling.value = true
     try {
       await cancelOrder(order.value.id)
-      options.notifySuccess(needsRefundReview ? '退款申请已提交，等待客服审核' : '订单已取消，账号已释放')
+      options.notifySuccess(
+        needsRefundReview ? '退款申请已提交，等待客服审核' : '订单已取消，账号已释放'
+      )
       await router.push(options.ordersPath)
     } catch (error) {
       options.notifyError(readError(error, '取消失败'))