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

This reverts commit 7b274d4ab8532445e53e00bc0a73c6251023bd98.
---
 .../admin/views/AdminListingDetailView.vue    |  152 +-
 .../admin/views/AdminListingReviewView.vue    | 1270 ++++++---------
 .../admin/views/AdminListingsView.vue         | 1339 +++++-----------
 .../admin/views/AdminMohongCategoriesView.vue |  514 +-----
 .../admin/views/AdminMohongConfigView.vue     |  360 +----
 .../admin/views/AdminMohongOrdersView.vue     |  857 ++--------
 .../admin/views/AdminMohongProductsView.vue   | 1000 +++---------
 .../admin/views/AdminOrderDetailView.vue      |  280 ++--
 .../features/admin/views/AdminOrdersView.vue  |  874 +++-------
 .../admin/views/AdminPickupDetailView.vue     |  140 +-
 .../features/admin/views/AdminPickupView.vue  | 1290 ++++++---------
 .../admin/views/AdminRefundReviewView.vue     |  733 ++-------
 .../features/admin/views/AdminUsersView.vue   | 1415 +++++------------
 13 files changed, 2731 insertions(+), 7493 deletions(-)

diff --git a/frontend/src/features/admin/views/AdminListingDetailView.vue b/frontend/src/features/admin/views/AdminListingDetailView.vue
index c90cb71..e98b51b 100644
--- a/frontend/src/features/admin/views/AdminListingDetailView.vue
+++ b/frontend/src/features/admin/views/AdminListingDetailView.vue
@@ -587,52 +587,51 @@ async function openScreenshot(url: string) {
 </script>
 
 <template>
-  <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>
+  <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>
-        <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"
+        <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
           >
-            调整商品
-          </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>
+      <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>
 
     <el-dialog
       v-model="externalAdjustVisible"
@@ -1025,77 +1024,10 @@ async function openScreenshot(url: string) {
         </el-button>
       </template>
     </el-dialog>
-  </div>
+  </section>
 </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 bd23802..6eed773 100644
--- a/frontend/src/features/admin/views/AdminListingReviewView.vue
+++ b/frontend/src/features/admin/views/AdminListingReviewView.vue
@@ -1,15 +1,6 @@
 <script setup lang="ts">
 import { readError } from '@/shared/utils/error'
-import {
-  Check,
-  Close,
-  Connection,
-  DocumentChecked,
-  Picture,
-  Refresh,
-  Search,
-  WarningFilled,
-} from '@element-plus/icons-vue'
+import { Check, Close, 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'
 
@@ -543,6 +534,10 @@ 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)
@@ -574,122 +569,71 @@ async function openScreenshot(url: string) {
 </script>
 
 <template>
-  <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>
+  <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>
-    </header>
+      <div class="toolbar-actions">
+        <el-button :icon="Refresh" :loading="loading" @click="loadListings">刷新</el-button>
+      </div>
+    </div>
 
-    <!-- 汇总指标卡片（支持点击切换快捷筛选） -->
-    <section class="summary-metric-grid">
-      <div
-        class="metric-card metric-card--total clickable"
+    <div class="review-summary">
+      <button
+        class="summary-card"
         :class="{ active: filters.risk === 'all' }"
         @click="filters.risk = 'all'"
       >
-        <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"
+        <span>待审核</span>
+        <strong>{{ listings.length }}</strong>
+      </button>
+      <button
+        class="summary-card"
         :class="{ active: filters.risk === 'external' }"
         @click="filters.risk = 'external'"
       >
-        <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"
+        <span>外部上传</span>
+        <strong>{{ listings.filter(isExternalUpload).length }}</strong>
+      </button>
+      <button
+        class="summary-card"
         :class="{ active: filters.risk === 'defaultImage' }"
         @click="filters.risk = 'defaultImage'"
       >
-        <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"
+        <span>默认截图</span>
+        <strong>{{ listings.filter(hasDefaultScreenshot).length }}</strong>
+      </button>
+      <button
+        class="summary-card"
         :class="{ active: filters.risk === 'ban' }"
         @click="filters.risk = 'ban'"
       >
-        <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>
+        <span>封禁风险</span>
+        <strong>{{ listings.filter(hasBanRecord).length }}</strong>
+      </button>
+    </div>
 
-    <!-- 审核工作区（左右双栏） -->
     <div class="review-workbench">
-      <!-- 左侧待审队列 -->
-      <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>
+      <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>
         </div>
 
-        <div v-loading="loading" class="queue-list-container">
+        <div v-loading="loading" class="queue-list">
           <button
             v-for="item in filteredListings"
             :key="item.id"
@@ -698,40 +642,37 @@ async function openScreenshot(url: string) {
             type="button"
             @click="selectListing(item)"
           >
-            <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 class="queue-title-row">
+              <div>
+                <span class="queue-code">编号 {{ formatListingCode(item) }}</span>
+                <strong>{{ item.title }}</strong>
               </div>
-              <div class="queue-tag-group">
+              <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">
                 <el-tag size="small" type="primary" effect="plain">{{
                   sourceChannel(item)
                 }}</el-tag>
-                <el-tag v-if="isExternalUpload(item)" size="small" type="info">API</el-tag>
+                <el-tag v-if="isExternalUpload(item)" size="small" type="info">{{
+                  uploaderName(item)
+                }}</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>
@@ -742,195 +683,154 @@ async function openScreenshot(url: string) {
         </div>
       </aside>
 
-      <!-- 右侧审核详情工作台 -->
       <main v-if="selectedListing" class="review-detail">
-        <!-- 审核主头部面板 -->
-        <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>
+        <section class="review-hero-panel">
+          <div class="hero-title">
+            <div>
+              <p>商品编号 {{ formatListingCode(selectedListing) }}</p>
+              <h2>{{ selectedListing.title }}</h2>
             </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="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>
+        <section class="review-panel price-review-panel">
+          <div class="panel-title price-panel-title">
+            <div>
+              <h3>价格审核</h3>
+              <p>核对卖家提交价格、平台加价规则和最终买家展示价。</p>
             </div>
-            <el-button type="primary" plain size="small" @click="openPriceAdjust(selectedListing)">
-              调整价格
-            </el-button>
+            <el-button type="primary" plain @click="openPriceAdjust(selectedListing)"
+              >调整价格</el-button
+            >
           </div>
-
           <div class="price-decision-grid">
             <div class="price-decision-card seller">
-              <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>
+              <span>卖家发布</span>
+              <strong>{{ money(sellerTotalPrice(selectedListing)) }}</strong>
+              <p>发布比例 {{ ratioText(sellerRatio(selectedListing)) }}</p>
+              <small
+                >纯币 {{ 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
-              >
+              <span>当前加价规则</span>
+              <strong>{{ priceRuleLabel(selectedListing) }}</strong>
+              <p>{{ priceRuleText(selectedListing) }}</p>
+              <small>平台加价 {{ money(platformMarkupAmount(selectedListing)) }}</small>
             </div>
-
             <div class="price-decision-card buyer">
-              <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
-              >
+              <span>加价后展示</span>
+              <strong>{{ money(buyerTotalPrice(selectedListing)) }}</strong>
+              <p>加价后比例 {{ ratioText(buyerRatio(selectedListing)) }}</p>
+              <small>纯币 {{ money(buyerCoinBasePrice(selectedListing)) }} / 总价含物品</small>
             </div>
-
             <div class="price-decision-card deposit">
-              <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
-              >
+              <span>押金与损耗</span>
+              <strong>¥{{ formatCent(selectedListing.deposit_amount_cent) }}</strong>
+              <p>每日损耗 {{ dailyLossText(selectedListing) }}</p>
+              <small>哈夫币 {{ formatHafCoinM(getCoinWan(selectedListing)) }}</small>
             </div>
           </div>
         </section>
 
-        <!-- 账号属性与上传信息双栏 -->
-        <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>
+        <section class="review-grid">
+          <div class="review-panel">
+            <div class="panel-title">
+              <h3>账号属性</h3>
             </div>
-            <dl class="detail-list-grid">
-              <div class="dl-item">
+            <dl class="detail-list">
+              <div>
                 <dt>上号方式</dt>
                 <dd>{{ selectedListing.login_platform || '-' }}</dd>
               </div>
-              <div class="dl-item">
+              <div>
                 <dt>区服</dt>
                 <dd>{{ selectedListing.server_region || '-' }}</dd>
               </div>
-              <div class="dl-item">
+              <div>
                 <dt>段位</dt>
                 <dd>{{ selectedListing.rank_level || '-' }}</dd>
               </div>
-              <div class="dl-item">
+              <div>
                 <dt>烽火等级</dt>
-                <dd class="font-mono">{{ assetNumberText(selectedListing, 'fire_level') }}</dd>
+                <dd>{{ assetNumberText(selectedListing, 'fire_level') }}</dd>
               </div>
-              <div class="dl-item">
+              <div>
                 <dt>保险格数</dt>
-                <dd class="font-mono">{{ assetText(selectedListing, 'season_insurance') }}</dd>
+                <dd>{{ assetText(selectedListing, 'season_insurance') }}</dd>
               </div>
-              <div class="dl-item">
-                <dt>绝密 KD</dt>
-                <dd class="font-mono">{{ assetNumberText(selectedListing, 'secret_kd') }}</dd>
+              <div>
+                <dt>绝密KD</dt>
+                <dd>{{ assetNumberText(selectedListing, 'secret_kd') }}</dd>
               </div>
-              <div class="dl-item">
-                <dt>体力 / 负重</dt>
-                <dd class="font-mono">
+              <div>
+                <dt>体力/负重</dt>
+                <dd>
                   {{ assetText(selectedListing, 'stamina_level') }} /
                   {{ assetText(selectedListing, 'load_level') }}
                 </dd>
               </div>
-              <div class="dl-item">
+              <div>
                 <dt>封禁记录</dt>
-                <dd :class="{ 'text-danger font-bold': hasBanRecord(selectedListing) }">
-                  {{ banRecordText(selectedListing) }}
-                </dd>
+                <dd>{{ banRecordText(selectedListing) }}</dd>
               </div>
             </dl>
-          </section>
+          </div>
 
-          <!-- 上传与号主信息 -->
-          <section class="section-card">
-            <div class="card-panel-header">
-              <div class="card-panel-title">
-                <span class="title-text">上传与号主信息</span>
-              </div>
+          <div class="review-panel">
+            <div class="panel-title">
+              <h3>上传信息</h3>
               <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"
-                  >外部 API</el-tag
+                  >外部上传</el-tag
                 >
               </div>
             </div>
-            <dl class="detail-list-grid">
-              <div class="dl-item">
+            <dl class="detail-list">
+              <div>
                 <dt>来源渠道</dt>
                 <dd>{{ sourceChannel(selectedListing) }}</dd>
               </div>
-              <div class="dl-item">
-                <dt>上传客服/人</dt>
+              <div>
+                <dt>上传人</dt>
                 <dd>{{ uploaderName(selectedListing) }}</dd>
               </div>
-              <div class="dl-item">
-                <dt>号主标识</dt>
-                <dd class="font-mono">
+              <div>
+                <dt>号主</dt>
+                <dd>
                   {{
                     selectedListing.owner_phone ||
                     selectedListing.owner_nickname ||
@@ -938,97 +838,65 @@ async function openScreenshot(url: string) {
                   }}
                 </dd>
               </div>
-              <div class="dl-item">
+              <div>
                 <dt>联系电话</dt>
-                <dd class="font-mono">{{ contactPhone(selectedListing) }}</dd>
+                <dd>{{ contactPhone(selectedListing) }}</dd>
               </div>
-              <div class="dl-item">
+              <div>
                 <dt>常用地区</dt>
                 <dd>{{ commonRegionText(selectedListing) }}</dd>
               </div>
-              <div class="dl-item">
+              <div>
                 <dt>在线时间</dt>
                 <dd>{{ ownerOnlineText(selectedListing) }}</dd>
               </div>
-              <div class="dl-item">
+              <div>
                 <dt>提交时间</dt>
-                <dd class="font-mono text-muted">
-                  {{ formatDateTime(selectedListing.updated_at) }}
-                </dd>
+                <dd>{{ 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="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>
+        <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>
+            </div>
+          </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"
@@ -1037,143 +905,128 @@ async function openScreenshot(url: string) {
               class="screenshot-tile"
               @click="openScreenshot(url)"
             >
-              <img :src="previewURLs[url] || url" alt="账号截图" class="screenshot-thumb-img" />
-              <span v-if="isDefaultScreenshot(url)" class="default-badge">默认图片</span>
+              <img :src="previewURLs[url] || url" alt="账号截图" />
+              <span v-if="isDefaultScreenshot(url)">默认图片</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">
-        <section class="section-card empty-card">
-          <el-empty description="当前筛选条件下暂无待审核商品" />
-        </section>
+        <el-empty description="暂无待审核商品" />
       </main>
     </div>
 
-    <!-- 拒绝发布弹窗 -->
     <el-dialog
       :model-value="!!activeListing"
-      title="拒绝发布商品"
-      width="580px"
+      title="拒绝发布"
+      width="620px"
       @update:model-value="activeListing = null"
     >
       <div v-if="activeListing" class="dialog-body reject-dialog">
-        <div class="target-title-box">
-          <span class="text-muted">当前商品：</span>
+        <p>
           <strong>{{ activeListing.title }}</strong>
-        </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>
+        </p>
+        <div class="reject-reasons">
+          <el-button
+            v-for="reason in rejectReasonOptions"
+            :key="reason"
+            size="small"
+            @click="appendRejectReason(reason)"
+          >
+            {{ reason }}
+          </el-button>
         </div>
         <el-input
           v-model="rejectReason"
           type="textarea"
-          :rows="4"
-          placeholder="请详细填写拒绝原因，号主将在通知与商品状态中查看到此理由..."
+          :rows="5"
+          placeholder="填写拒绝原因，号主会在通知中看到审核结果"
         />
       </div>
       <template #footer>
-        <div class="modal-footer">
-          <el-button @click="activeListing = null">取消</el-button>
-          <el-button type="danger" :loading="submitting" @click="handleReject">确认拒绝</el-button>
-        </div>
+        <el-button @click="activeListing = null">取消</el-button>
+        <el-button type="danger" :loading="submitting" @click="handleReject">确认拒绝</el-button>
       </template>
     </el-dialog>
 
-    <!-- 调整价格弹窗 -->
     <el-dialog
       :model-value="!!priceAdjustListing"
-      title="调整审核商品价格"
-      width="540px"
+      title="调整审核价格"
+      width="560px"
       @update:model-value="priceAdjustListing = null"
     >
       <div v-if="priceAdjustListing" class="dialog-body price-adjust-dialog">
-        <div class="adjust-current-grid">
-          <div class="adj-box">
+        <div class="adjust-current">
+          <div>
             <span>卖家发布价</span>
-            <strong class="font-mono">{{ money(sellerTotalPrice(priceAdjustListing)) }}</strong>
+            <strong>{{ money(sellerTotalPrice(priceAdjustListing)) }}</strong>
           </div>
-          <div class="adj-box primary">
+          <div>
             <span>调整后买家价</span>
-            <strong class="preview-value font-mono text-primary">
-              {{ previewMoney(priceAdjustPreview?.buyerTotalPrice || 0) }}
-            </strong>
+            <strong class="preview-value">{{
+              previewMoney(priceAdjustPreview?.buyerTotalPrice || 0)
+            }}</strong>
           </div>
-          <div class="adj-box info">
+          <div>
             <span>调整后买家比例</span>
-            <strong class="preview-value font-mono">
-              {{ ratioText(priceAdjustPreview?.buyerRatio || 0) }}
-            </strong>
+            <strong class="preview-value">{{
+              ratioText(priceAdjustPreview?.buyerRatio || 0)
+            }}</strong>
           </div>
         </div>
-        <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 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>
-        <div v-if="priceAdjustMode === 'ratio'" class="adjust-input-field">
-          <span class="field-label">加价后比例（如 1:1.5 输入 1.5）</span>
+        <label v-if="priceAdjustMode === 'ratio'" class="adjust-field">
+          <span>加价后比例</span>
           <el-input-number
             v-model="priceAdjustForm.buyer_ratio"
             :min="0"
             :step="0.1"
-            :precision="2"
-            class="full-control"
+            :controls="false"
           />
-        </div>
-        <div v-else class="adjust-input-field">
-          <span class="field-label">加价后价格（元）</span>
+        </label>
+        <label v-else class="adjust-field">
+          <span>加价后价格</span>
           <el-input-number
             v-model="priceAdjustForm.buyer_total_price"
             :min="0"
             :step="1"
-            :precision="2"
-            class="full-control"
+            :controls="false"
           />
-        </div>
-        <div class="adjust-input-field">
-          <span class="field-label">调价原因说明（可选）</span>
+        </label>
+        <label class="adjust-field">
+          <span>调价原因</span>
           <el-input
             v-model="priceAdjustForm.reason"
             type="textarea"
             :rows="3"
-            placeholder="填写调价原因，便于后续财务审计追踪..."
+            placeholder="可填写调价原因，便于审计追踪"
           />
-        </div>
+        </label>
       </div>
       <template #footer>
-        <div class="modal-footer">
-          <el-button @click="priceAdjustListing = null">取消</el-button>
-          <el-button type="primary" :loading="adjustingPrice" @click="handleSavePriceAdjust">
-            保存调整
-          </el-button>
-        </div>
+        <el-button @click="priceAdjustListing = null">取消</el-button>
+        <el-button type="primary" :loading="adjustingPrice" @click="handleSavePriceAdjust"
+          >保存调整</el-button
+        >
       </template>
     </el-dialog>
 
-    <!-- 资产大图弹窗 -->
     <el-dialog
       :model-value="!!evidenceListing"
-      title="账号资产大图核查"
-      width="min(920px, calc(100vw - 32px))"
+      title="账号资产截图"
+      width="860px"
       @update:model-value="evidenceListing = null"
     >
       <div v-if="evidenceListing" class="dialog-body">
-        <p class="evidence-title">
+        <p>
           <strong>{{ evidenceListing.title }}</strong>
         </p>
         <div
@@ -1187,258 +1040,92 @@ async function openScreenshot(url: string) {
             class="screenshot-tile"
             @click="openScreenshot(url)"
           >
-            <img :src="previewURLs[url] || url" alt="账号截图" class="screenshot-thumb-img" />
-            <span v-if="isDefaultScreenshot(url)" class="default-badge">默认图片</span>
+            <img :src="previewURLs[url] || url" alt="账号截图" />
+            <span v-if="isDefaultScreenshot(url)">默认图片</span>
           </button>
         </div>
-        <p v-else class="text-muted">暂无截图</p>
+        <p v-else>暂无截图</p>
       </div>
       <template #footer>
-        <div class="modal-footer">
-          <el-button @click="evidenceListing = null">关闭</el-button>
-        </div>
+        <el-button @click="evidenceListing = null">关闭</el-button>
       </template>
     </el-dialog>
-  </div>
+  </section>
 </template>
 
 <style scoped>
-.finance-page-container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 0 4px 32px;
+.review-page {
+  min-height: calc(100vh - 128px);
 }
 
-/* ================= 头部卡片 ================= */
-.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);
+.review-header {
+  margin-bottom: 18px;
 }
 
-.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;
-}
-
-/* ================= 核心指标卡片 ================= */
-.summary-metric-grid {
+.review-summary {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(4, minmax(120px, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
 }
 
-.metric-card {
+.summary-card {
+  min-width: 0;
+  border: 1px solid #e8edf4;
+  border-radius: 8px;
   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 {
+  padding: 14px 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  text-align: left;
   cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.metric-card.clickable:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+.summary-card:hover {
+  border-color: #1477ff;
+  box-shadow: 0 2px 8px rgba(20, 119, 255, 0.15);
+  transform: translateY(-1px);
 }
 
-.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);
+.summary-card.active {
+  border-color: #1477ff;
+  background: #1477ff;
+  box-shadow: 0 2px 8px rgba(20, 119, 255, 0.25);
 }
 
-.metric-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
+.summary-card.active span {
+  color: #ffffff;
 }
 
-.metric-card--total::before {
-  background: linear-gradient(90deg, #6366f1, #818cf8);
+.summary-card.active strong {
+  color: #ffffff;
 }
 
-.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;
+.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;
-  padding: 1px 6px;
-  border-radius: 4px;
-  width: fit-content;
 }
 
-.metric-sub-pill.info {
-  background: #eef2ff;
-  color: #4f46e5;
+.review-summary strong {
+  display: block;
+  margin-top: 5px;
+  color: #1b2559;
+  font-size: 24px;
+  font-weight: 800;
 }
 
-.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: 360px minmax(0, 1fr);
-  gap: 20px;
+  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
+  gap: 16px;
   align-items: start;
 }
 
@@ -1633,274 +1320,205 @@ async function openScreenshot(url: string) {
 
 .price-panel-title p {
   margin: 5px 0 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 4px;
-}
-
-.risk-tag {
-  font-weight: 600;
-}
-
-.no-risk-tag {
+  color: #8f9bba;
   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, 1fr);
+  grid-template-columns: repeat(4, minmax(150px, 1fr));
   gap: 12px;
 }
 
 .price-decision-card {
-  border-radius: 12px;
-  padding: 14px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  border: 1px solid #e2e8f0;
-  background: #f8fafc;
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+  min-height: 128px;
+  border: 1px solid #e8ecf1;
+  border-radius: 8px;
+  background: #f8f9fe;
+  padding: 14px;
 }
 
-.price-decision-card.seller {
-  border-color: #cbd5e1;
+.price-decision-card strong {
+  color: #1b2559;
+  font-size: 24px;
+  font-weight: 900;
+  line-height: 1.1;
 }
 
-.price-decision-card.rule {
-  background: #fdf4ff;
-  border-color: #f0abfc;
+.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 {
-  background: #eff6ff;
   border-color: #bfdbfe;
+  background: #eff6ff;
 }
 
-.price-decision-card.deposit {
-  background: #f0fdf4;
-  border-color: #bbf7d0;
-}
-
-.pd-label {
-  font-size: 11.5px;
-  font-weight: 600;
-  color: #64748b;
-}
-
-.pd-val {
-  font-size: 20px;
-  font-weight: 800;
-  color: #0f172a;
-  line-height: 1.2;
-}
-
-.pd-sub {
-  font-size: 12px;
-  color: #475569;
-  font-weight: 600;
-}
-
-.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;
-}
-
-.res-qty {
+.price-decision-card.buyer strong {
   color: #2563eb;
 }
 
-.res-extra {
-  color: #64748b;
-  font-style: normal;
+.price-decision-card.rule {
+  border-color: #fed7aa;
+  background: #fff7ed;
 }
 
-.skin-section {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding-top: 12px;
-  border-top: 1px dashed #e2e8f0;
+.price-decision-card.rule strong {
+  color: #ea580c;
 }
 
-.skin-title {
+.price-decision-card.deposit {
+  border-color: #e0e7ff;
+  background: #f5f7ff;
+}
+
+.detail-list {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+}
+
+.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: 600;
-  color: #475569;
+  font-weight: 700;
 }
 
-.skin-chip-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
+.detail-list dd {
+  min-width: 0;
+  margin: 0;
+  color: #1f2937;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
 }
 
-.skin-tag {
+.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;
+  font-weight: 800;
+}
+
+.resource-table em {
+  color: #8f9bba;
+  font-size: 12px;
+  font-style: normal;
   font-weight: 600;
 }
 
-/* ================= 截图画廊 ================= */
+.skin-list {
+  align-items: center;
+}
+
+.skin-list > span {
+  color: #8f9bba;
+  font-size: 13px;
+}
+
 .screenshot-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: 12px;
 }
 
 .screenshot-tile {
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
   overflow: hidden;
-  background: #f8fafc;
+  border: 1px solid #e8ecf1;
+  border-radius: 8px;
+  background: #f8f9fe;
   padding: 0;
   cursor: pointer;
-  position: relative;
-  aspect-ratio: 16 / 9;
-  transition:
-    transform 0.2s ease,
-    border-color 0.2s ease;
 }
 
-.screenshot-tile:hover {
-  border-color: #3b82f6;
-  transform: scale(1.02);
-}
-
-.screenshot-thumb-img {
+.screenshot-tile img {
+  display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  display: block;
 }
 
-.default-badge {
+.screenshot-tile span {
   position: absolute;
-  bottom: 4px;
-  right: 4px;
-  background: rgba(245, 158, 11, 0.9);
+  top: 8px;
+  left: 8px;
+  border-radius: 6px;
+  background: rgba(245, 158, 11, 0.95);
+  padding: 3px 7px;
   color: #ffffff;
-  font-size: 10px;
-  padding: 1px 5px;
-  border-radius: 4px;
-  font-weight: 600;
+  font-size: 12px;
+  font-weight: 800;
 }
 
 .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 08b641b..964c40f 100644
--- a/frontend/src/features/admin/views/AdminListingsView.vue
+++ b/frontend/src/features/admin/views/AdminListingsView.vue
@@ -1,19 +1,8 @@
 <script setup lang="ts">
-import {
-  ArrowDown,
-  Check,
-  Clock,
-  DocumentCopy,
-  Download,
-  Lock,
-  Refresh,
-  Search,
-  Shop,
-} from '@element-plus/icons-vue'
+import { ArrowDown, Search } 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,
@@ -94,6 +83,7 @@ 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
@@ -347,6 +337,22 @@ 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()
@@ -612,940 +618,397 @@ function formatQuantity(value: number) {
 </script>
 
 <template>
-  <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>
+  <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>
-        <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
+        <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
           >
-          <el-button :disabled="!listings.length" :icon="Download" @click="downloadTableScreenshot"
+          <el-button :disabled="!listings.length" @click="copyTableScreenshot">复制截图</el-button>
+          <el-button :disabled="!listings.length" @click="downloadTableScreenshot"
             >下载截图</el-button
           >
         </div>
       </div>
-    </header>
+    </div>
 
-    <!-- 汇总指标卡片（支持点击切换快捷筛选） -->
-    <section class="summary-metric-grid">
-      <div
-        class="metric-card metric-card--total clickable"
-        :class="{ active: !filters.status && !filters.review_status }"
-        @click="resetFilters"
+    <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
       >
-        <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
-        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="暂无匹配商品"
+      <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
         >
-          <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>
+    </div>
+  </section>
 </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 040e3ee..6c623b9 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 { computed, onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Check, Folder, Plus, Present, Refresh } from '@element-plus/icons-vue'
+import { Plus, Refresh } from '@element-plus/icons-vue'
 import {
   createAdminMohongCategory,
   deleteAdminMohongCategory,
@@ -23,11 +23,6 @@ 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() {
@@ -96,483 +91,92 @@ async function handleDelete(item: MohongCategory) {
 </script>
 
 <template>
-  <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>
-
-        <div class="toolbar-actions">
-          <el-button :icon="Refresh" @click="load">刷新</el-button>
-          <el-button type="primary" :icon="Plus" @click="openCreate">新建分类</el-button>
-        </div>
+  <div class="admin-page">
+    <div class="page-head">
+      <div>
+        <h2>撞车分类</h2>
+        <p>大红 / 四格大红 / 炫彩等分类，前台左侧筛选使用</p>
       </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 class="actions">
+        <el-button :icon="Refresh" @click="load">刷新</el-button>
+        <el-button type="primary" :icon="Plus" @click="openCreate">新建分类</el-button>
       </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>
+    <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="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-position="top">
-        <el-form-item label="分类名称" required>
-          <el-input v-model="form.name" placeholder="例如：大红 / 炫彩" maxlength="32" />
+      <el-form label-width="80px">
+        <el-form-item label="名称" required>
+          <el-input v-model="form.name" maxlength="64" />
         </el-form-item>
-        <el-form-item label="分类标识编码（可选）">
-          <el-input v-model="form.code" placeholder="例如：da_hong / xuancai" maxlength="32" />
+        <el-form-item label="编码">
+          <el-input v-model="form.code" maxlength="64" placeholder="可选" />
         </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 label="排序">
+          <el-input-number v-model="form.sort_order" />
+          <span class="hint">越小越靠前</span>
         </el-form-item>
-        <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 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>
       </el-form>
       <template #footer>
-        <div class="modal-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" :loading="saving" @click="handleSave">确认保存</el-button>
-        </div>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
       </template>
     </el-dialog>
   </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: #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 {
+.admin-page {
   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);
+.page-head {
   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;
-  margin-bottom: 16px;
+  align-items: flex-start;
+  gap: 12px;
 }
-
-.table-header-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 16px;
-  font-weight: 700;
-  color: #1e293b;
+.page-head h2 {
+  margin: 0 0 4px;
 }
-
-.header-icon {
-  color: #db2777;
-  font-size: 18px;
+.page-head p {
+  margin: 0;
+  color: #6b7a90;
+  font-size: 13px;
 }
-
-.count-badge {
+.hint {
+  margin-left: 8px;
+  color: #8a94a6;
   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 460ee43..47023e6 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 { Check, Setting, Upload } from '@element-plus/icons-vue'
+import { Upload } from '@element-plus/icons-vue'
 import {
   fetchAdminMohongConfig,
   updateAdminMohongConfig,
@@ -9,7 +9,6 @@ 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)
@@ -18,17 +17,6 @@ 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() {
@@ -51,7 +39,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 {
@@ -63,304 +51,98 @@ 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="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>
-
-        <div class="toolbar-actions">
-          <el-button type="primary" :icon="Check" :loading="saving" @click="handleSave">
-            保存配置
-          </el-button>
-        </div>
+  <div v-loading="loading" class="admin-page">
+    <div class="page-head">
+      <div>
+        <h2>撞车配置</h2>
+        <p>
+          全局默认固定二维码与订单复制模板。商品可覆盖默认二维码；支付后用户在订单详情扫码并复制信息联系客服。
+        </p>
       </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>
-        <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>
-      </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>
+      <el-button type="primary" :loading="saving" @click="handleSave">保存配置</el-button>
     </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>
+        </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;
+        </div>
+      </el-form-item>
+    </el-form>
   </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;
+.admin-page {
+  display: grid;
   gap: 16px;
-  flex-wrap: wrap;
 }
-
-.title-group {
+.page-head {
   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;
-}
-
-/* ================= 卡片容器 ================= */
-.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;
+  align-items: flex-start;
   gap: 12px;
 }
-
-.variables-box {
-  margin-top: 14px;
+.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;
-  flex-direction: column;
-  gap: 8px;
+  gap: 16px;
+  align-items: flex-start;
+  width: 100%;
 }
-
-.var-title {
-  font-size: 12.5px;
-  font-weight: 600;
-  color: #475569;
+.qr-actions {
+  flex: 1;
+  display: grid;
+  gap: 10px;
 }
-
-.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;
+.hint {
+  margin-top: 8px;
+  color: #8a94a6;
   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;
+  line-height: 1.5;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminMohongOrdersView.vue b/frontend/src/features/admin/views/AdminMohongOrdersView.vue
index 2fceebf..5d39446 100644
--- a/frontend/src/features/admin/views/AdminMohongOrdersView.vue
+++ b/frontend/src/features/admin/views/AdminMohongOrdersView.vue
@@ -1,14 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import {
-  Clock,
-  DocumentChecked,
-  Refresh,
-  Search,
-  Tickets,
-  UserFilled,
-} from '@element-plus/icons-vue'
+import { Money, Refresh } from '@element-plus/icons-vue'
 import {
   cancelAdminMohongOrder,
   completeAdminMohongOrder,
@@ -33,10 +26,6 @@ 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() {
@@ -57,18 +46,6 @@ 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}？标记后状态变为「接待中」。`, '提示', {
@@ -161,703 +138,207 @@ 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="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 class="admin-page">
+    <div class="page-head">
+      <div>
+        <h2>撞车订单</h2>
+        <p>查看订单、接待买家、完成履约、复制用户订单信息</p>
       </div>
-    </header>
+      <el-button :icon="Refresh" @click="load">刷新</el-button>
+    </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 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--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"
+    <div class="filters">
+      <el-input
+        v-model="keyword"
+        clearable
+        placeholder="订单号"
+        style="width: 220px"
+        @keyup.enter="load"
       />
-    </section>
+      <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-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>
+    <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>
         </div>
-      </div>
-      <template #footer>
-        <div class="modal-footer">
-          <el-button @click="detail = null">关闭</el-button>
+        <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>
+        <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>
       </template>
-    </el-dialog>
+    </el-drawer>
   </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;
+.admin-page {
+  display: grid;
   gap: 16px;
+}
+.page-head {
+  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;
   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 {
+.items-box {
+  margin-top: 14px;
   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;
-  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;
+.item-line {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
   font-size: 13px;
   color: #334155;
 }
-
-.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 {
+.item-line em {
+  font-style: normal;
+  color: #ff6a00;
   font-weight: 600;
 }
-
-.action-btn-group {
+.copy-box,
+.qr-box {
+  margin-top: 16px;
+}
+.copy-head {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  gap: 4px;
+  margin-bottom: 8px;
 }
-
-.time-cell {
-  font-size: 12px;
-  color: #64748b;
-}
-
-.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;
-  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 {
+.copy-box pre {
+  margin: 0;
+  padding: 12px;
+  background: #f7f9fc;
+  border-radius: 8px;
+  white-space: pre-wrap;
   font-size: 13px;
-  color: #1e293b;
+  line-height: 1.6;
 }
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
+.qr-box {
+  display: grid;
+  gap: 8px;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminMohongProductsView.vue b/frontend/src/features/admin/views/AdminMohongProductsView.vue
index 66a87cf..7b9fb92 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 { computed, onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Check, Money, Plus, Present, Refresh, Search, Upload } from '@element-plus/icons-vue'
+import { Plus, Refresh, Upload } from '@element-plus/icons-vue'
 import {
   createAdminMohongProduct,
   deleteAdminMohongProduct,
@@ -15,7 +15,6 @@ 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)
@@ -46,9 +45,6 @@ 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()
@@ -81,19 +77,6 @@ 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, {
@@ -205,833 +188,254 @@ 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="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 class="admin-page">
+    <div class="page-head">
+      <div>
+        <h2>撞车商品</h2>
+        <p>管理商品图片、价格、库存与专属二维码</p>
       </div>
-    </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 class="actions">
+        <el-button :icon="Refresh" @click="load">刷新</el-button>
+        <el-button type="primary" :icon="Plus" @click="openCreate">新建商品</el-button>
       </div>
+    </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>
+    <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--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>
-
-    <!-- 筛选面板 -->
-    <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-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"
           />
-        </el-form-item>
+          <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>
 
-        <el-form-item label="商品分类">
+    <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="categoryId"
+            v-model="form.category_id"
             clearable
-            placeholder="全部分类"
-            class="full-control"
-            @change="handleQuery"
+            placeholder="选择分类"
+            style="width: 100%"
           >
             <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="status"
-            clearable
-            placeholder="全部状态"
-            class="full-control"
-            @change="handleQuery"
-          >
-            <el-option label="在售" value="on_sale" />
+        <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-option label="草稿" value="draft" />
-            <el-option label="已售罄" value="sold_out" />
+            <el-option label="上架" value="on_sale" />
+            <el-option label="下架" value="off_sale" />
           </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"><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 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>
+          </div>
         </el-form-item>
       </el-form>
       <template #footer>
-        <div class="modal-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" :loading="saving" @click="handleSave">确认保存</el-button>
-        </div>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <style scoped>
-.finance-page-container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 0 4px 32px;
+.admin-page {
+  display: grid;
+  gap: 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);
-}
-
-.header-main {
+.page-head {
   display: flex;
+  justify-content: space-between;
   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;
-}
-
-.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;
-  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;
 }
-
-.preview-img {
-  width: 72px;
-  height: 72px;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
+.page-head h2 {
+  margin: 0 0 4px;
 }
-
-.preview-img.qrcode {
-  width: 80px;
-  height: 80px;
+.page-head p {
+  margin: 0;
+  color: #6b7a90;
+  font-size: 13px;
 }
-
-.gallery-wrap {
+.filters {
   display: flex;
+  gap: 10px;
   flex-wrap: wrap;
-  gap: 10px;
 }
-
-.gallery-item {
+.upload-row,
+.gallery {
   display: flex;
-  flex-direction: column;
+  gap: 10px;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 4px;
 }
-
-.gallery-add-btn {
+.gallery-item {
+  position: relative;
+  width: 72px;
+  height: 72px;
+}
+.gallery-item :deep(.el-image) {
   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;
+}
+.gallery-item button {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  border: 0;
+  border-radius: 50%;
+  background: #ef4444;
+  color: #fff;
   cursor: pointer;
-  background: #f8fafc;
 }
-
-.gallery-add-btn:hover {
-  border-color: #3b82f6;
-  color: #3b82f6;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
+.hint {
+  margin-left: 8px;
+  color: #8a94a6;
+  font-size: 12px;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminOrderDetailView.vue b/frontend/src/features/admin/views/AdminOrderDetailView.vue
index b589ef5..9c0a5ce 100644
--- a/frontend/src/features/admin/views/AdminOrderDetailView.vue
+++ b/frontend/src/features/admin/views/AdminOrderDetailView.vue
@@ -899,115 +899,110 @@ function paymentPaidAt(record: AdminPayment) {
 </script>
 
 <template>
-  <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>
+  <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>
-    </header>
+      <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 v-if="order" class="metric-grid dashboard-metrics order-metrics">
       <div class="metric-card">
@@ -1657,77 +1652,10 @@ function paymentPaidAt(record: AdminPayment) {
         </el-button>
       </template>
     </el-dialog>
-  </div>
+  </section>
 </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 27b1ac4..9fbac6b 100644
--- a/frontend/src/features/admin/views/AdminOrdersView.vue
+++ b/frontend/src/features/admin/views/AdminOrdersView.vue
@@ -1,13 +1,5 @@
 <script setup lang="ts">
-import {
-  ArrowLeft,
-  Clock,
-  DocumentChecked,
-  Refresh,
-  Search,
-  Tickets,
-  Warning,
-} from '@element-plus/icons-vue'
+import { ArrowLeft, Refresh, Search } from '@element-plus/icons-vue'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -41,7 +33,6 @@ 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' },
@@ -57,7 +48,6 @@ const orderStatusOptions = [
 ] as const
 
 const handoffStatusOptions = [
-  { label: '全部交接状态', value: '' },
   { label: '待号主交接', value: 'pending_owner' },
   { label: '号主交接超时', value: 'owner_timeout' },
   { label: '待租客确认', value: 'pending_renter_confirm' },
@@ -71,13 +61,11 @@ const handoffStatusOptions = [
 ] as const
 
 const handoffModeOptions = [
-  { label: '全部类型', value: '' },
-  { label: '普通订单', value: 'owner' },
+  { label: '正常订单', value: 'owner' },
   { label: '平台代管', value: 'platform' },
 ] as const
 
 const settlementStatusOptions = [
-  { label: '全部结算状态', value: '' },
   { label: '未结算', value: 'unsettled' },
   { label: '待结算', value: 'pending' },
   { label: '冻结中', value: 'frozen' },
@@ -89,20 +77,8 @@ 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()
@@ -180,114 +156,42 @@ 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>
-  <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="toolbar-actions">
-          <el-button v-if="canReturnToWithdrawals" :icon="ArrowLeft" @click="returnToWithdrawals">
-            返回提现审核
-          </el-button>
-          <el-button :icon="Refresh" @click="loadOrders">刷新</el-button>
-        </div>
+  <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>
-    </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 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="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="关键词检索">
+    <div class="order-filter-bar">
+      <el-form inline @submit.prevent>
+        <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="全部状态"
-            class="full-control"
+            placeholder="全部"
+            style="width: 150px"
             @change="queryOrders"
           >
             <el-option
@@ -298,13 +202,12 @@ function settlementStatusType(
             />
           </el-select>
         </el-form-item>
-
-        <el-form-item label="交接履约状态">
+        <el-form-item label="交接状态">
           <el-select
             v-model="filters.handoff_status"
             clearable
-            placeholder="全部交接状态"
-            class="full-control"
+            placeholder="全部"
+            style="width: 170px"
             @change="queryOrders"
           >
             <el-option
@@ -315,13 +218,12 @@ function settlementStatusType(
             />
           </el-select>
         </el-form-item>
-
-        <el-form-item label="订单交付模式">
+        <el-form-item label="订单类型">
           <el-select
             v-model="filters.handoff_mode"
             clearable
-            placeholder="全部类型"
-            class="full-control"
+            placeholder="全部"
+            style="width: 130px"
             @change="queryOrders"
           >
             <el-option
@@ -332,13 +234,12 @@ function settlementStatusType(
             />
           </el-select>
         </el-form-item>
-
-        <el-form-item label="资金结算状态">
+        <el-form-item label="结算状态">
           <el-select
             v-model="filters.settlement_status"
             clearable
-            placeholder="全部结算状态"
-            class="full-control"
+            placeholder="全部"
+            style="width: 140px"
             @change="queryOrders"
           >
             <el-option
@@ -349,623 +250,210 @@ function settlementStatusType(
             />
           </el-select>
         </el-form-item>
-
         <el-form-item label="线下结算">
           <el-select
             v-model="filters.offline_settlement_status"
             clearable
             placeholder="全部"
-            class="full-control"
+            style="width: 150px"
             @change="queryOrders"
           >
-            <el-option label="全部" value="" />
             <el-option label="待确认线下结算" value="pending" />
             <el-option label="已确认线下结算" value="settled" />
           </el-select>
         </el-form-item>
-
-        <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-button type="primary" :icon="Search" :loading="loading" @click="queryOrders"
+            >查询</el-button
+          >
+          <el-button @click="resetFilters">重置</el-button>
         </el-form-item>
       </el-form>
-    </section>
+    </div>
 
-    <!-- 订单数据表格 -->
-    <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>
+    <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>
 
-      <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>
+    <AdminTablePagination
+      v-if="total > 0"
+      v-model:current-page="currentPage"
+      v-model:page-size="currentPageSize"
+      :total="total"
+      :loading="loading"
+      @page-change="handlePageChange"
+    />
+  </section>
 </template>
 
 <style scoped>
-.finance-page-container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 0 4px 32px;
+.admin-orders-page {
+  min-width: 0;
 }
 
-/* ================= 头部卡片 ================= */
-.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;
-}
-
-/* ================= 核心指标卡片 ================= */
-.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--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;
+.order-filter-bar {
+  margin-bottom: 16px;
   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);
+  padding: 16px 18px 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
-.filter-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+.order-filter-bar :deep(.el-form) {
+  display: flex;
   align-items: flex-end;
-  gap: 14px 16px;
+  flex-wrap: wrap;
+  gap: 0 14px;
 }
 
-.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;
+.order-filter-bar :deep(.el-form-item) {
+  margin-right: 0;
   margin-bottom: 16px;
 }
 
-.table-header-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 16px;
-  font-weight: 700;
-  color: #1e293b;
-}
-
-.header-icon {
-  color: #3b82f6;
-  font-size: 18px;
-}
-
-.count-badge {
+.order-filter-bar :deep(.el-form-item__label) {
+  color: #6b7785;
   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;
+.admin-orders-table {
+  --el-table-fixed-right-column: #ffffff;
 }
 
-.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;
+.admin-orders-table :deep(.el-table__inner-wrapper) {
+  min-width: 0;
 }
 
-.custom-enterprise-table :deep(.el-table__body-wrapper td) {
-  padding: 12px 0;
-  font-size: 13px;
-  color: #334155;
+.admin-orders-table :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden !important;
 }
 
-.order-info-cell {
+.admin-orders-table :deep(.el-scrollbar__bar.is-horizontal) {
+  display: none;
+}
+
+.order-main-cell,
+.stacked-cell {
   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;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stacked-cell strong {
+  overflow: hidden;
+  color: #1b2559;
+  font-size: 14px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stacked-cell.compact {
   gap: 2px;
 }
 
+.stacked-cell .platform-managed-owner {
+  color: #d97706;
+  font-weight: 700;
+}
+
+.money-cell {
+  align-items: flex-end;
+}
+
 .order-link {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 13px;
+  overflow: hidden;
+  color: #2f6bff;
   font-weight: 700;
-  color: #2563eb;
   text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .order-link:hover {
-  text-decoration: underline;
+  color: #174edb;
 }
 
-.listing-no {
-  font-size: 11px;
-  color: #94a3b8;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
+@media (max-width: 900px) {
+  .order-filter-bar :deep(.el-input),
+  .order-filter-bar :deep(.el-select) {
+    width: 100% !important;
+  }
 
-.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;
+  .order-filter-bar :deep(.el-form-item) {
+    width: 100%;
+  }
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminPickupDetailView.vue b/frontend/src/features/admin/views/AdminPickupDetailView.vue
index ae3bfe8..af09824 100644
--- a/frontend/src/features/admin/views/AdminPickupDetailView.vue
+++ b/frontend/src/features/admin/views/AdminPickupDetailView.vue
@@ -336,45 +336,40 @@ function readSnapshotResources(summary: Record<string, unknown> | null): Snapsho
 </script>
 
 <template>
-  <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>
+  <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>
-    </header>
+      <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 v-if="pickup" class="metric-grid pickup-metrics">
       <div class="metric-card">
@@ -682,77 +677,10 @@ function readSnapshotResources(summary: Record<string, unknown> | null): Snapsho
         </el-button>
       </template>
     </el-dialog>
-  </div>
+  </section>
 </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 e103553..ef6d8fd 100644
--- a/frontend/src/features/admin/views/AdminPickupView.vue
+++ b/frontend/src/features/admin/views/AdminPickupView.vue
@@ -1,16 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import {
-  Clock,
-  DocumentChecked,
-  EditPen,
-  Money,
-  Plus,
-  Refresh,
-  Search,
-  Switch,
-} from '@element-plus/icons-vue'
+import { EditPen, Plus, Refresh, Search } from '@element-plus/icons-vue'
 import {
   cancelAdminPickup,
   confirmAdminPickupOfflineSettlement,
@@ -72,16 +63,28 @@ const listingSourceType = ref<AvailableListingSourceType>('')
 let listingRequestID = 0
 const shopOptions = ref<string[]>([])
 const shopOptionsLoading = ref(false)
-
-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 selectedListing = computed(
+  () => listingOptions.value.find(item => item.id === createForm.listing_id) || null
 )
+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(() => {
-  void loadList()
-  void loadShopOptions()
+  loadList()
+  loadShopOptions()
 })
 
 async function loadList() {
@@ -97,7 +100,7 @@ async function loadList() {
 
 function handleSearch() {
   filters.page = 1
-  void loadList()
+  loadList()
 }
 
 function resetFilters() {
@@ -107,18 +110,16 @@ function resetFilters() {
   filters.account_source = ''
   filters.offline_settlement_status = ''
   filters.page = 1
-  void loadList()
+  loadList()
 }
-
 function handlePageChange(p: number) {
   filters.page = p
-  void loadList()
+  loadList()
 }
-
 function handleSizeChange(s: number) {
   filters.page_size = s
   filters.page = 1
-  void loadList()
+  loadList()
 }
 
 function openCreateDialog() {
@@ -190,8 +191,8 @@ async function handleCreate() {
     })
     ElMessage.success('提号订单已创建')
     createDialogVisible.value = false
-    void loadShopOptions()
-    void loadList()
+    loadShopOptions()
+    loadList()
   } catch (e: unknown) {
     ElMessage.error(errorMessage(e) || '创建失败')
   } finally {
@@ -217,27 +218,27 @@ async function handleConfirmOfflineSettlement(row: AdminPickup) {
         confirmButtonText: '确认已打款',
         cancelButtonText: '取消',
         inputType: 'textarea',
-        inputPlaceholder: '转账流水号或备注（选填）',
+        inputPlaceholder: '结算备注（可选）',
+        inputValidator: input => input.length <= 255 || '备注不能超过 255 个字符',
       }
     )
     loading.value = true
     try {
-      await confirmAdminPickupOfflineSettlement(row.id, { remark: value || '' })
+      await confirmAdminPickupOfflineSettlement(row.id, { remark: value })
       ElMessage.success('已确认线下结算')
-      void loadList()
+      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
@@ -253,9 +254,12 @@ function openFinancialAdjustmentDialog(row: AdminPickup) {
 }
 
 async function handleFinancialAdjustment() {
-  if (!activePickup.value) return
+  if (!financialAdjustmentForm.reason.trim()) {
+    ElMessage.warning('请输入调整原因')
+    return
+  }
   if (financialAdjustmentForm.profit_amount < 0 || financialAdjustmentForm.settle_amount < 0) {
-    ElMessage.warning('金额不能为负数')
+    ElMessage.warning('金额不能小于 0')
     return
   }
   financialAdjustmentSaving.value = true
@@ -263,11 +267,15 @@ async function handleFinancialAdjustment() {
     await createAdminPickupFinancialAdjustment(activePickupId.value, {
       profit_amount_cent: yuanToCent(financialAdjustmentForm.profit_amount),
       settle_amount_cent: yuanToCent(financialAdjustmentForm.settle_amount),
-      reason: financialAdjustmentForm.reason,
+      reason: financialAdjustmentForm.reason.trim(),
     })
-    ElMessage.success('已生成财务调整记录并更新有效金额')
+    ElMessage.success(
+      activePickup.value?.settlement_mode === 'platform_managed'
+        ? '财务调整已创建，请确认线下补款或追回'
+        : '财务调整已创建'
+    )
     financialAdjustmentDialogVisible.value = false
-    void loadList()
+    loadList()
   } catch (e: unknown) {
     ElMessage.error(errorMessage(e) || '调整失败')
   } finally {
@@ -276,8 +284,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) {
@@ -297,7 +305,7 @@ async function handleComplete() {
         : '提号已完成，已给卖家结算'
     )
     completeDialogVisible.value = false
-    void loadList()
+    loadList()
   } catch (e: unknown) {
     ElMessage.error(errorMessage(e) || '完成失败')
   } finally {
@@ -318,7 +326,7 @@ async function handleUpdateProfit() {
     })
     ElMessage.success('线下利润已更新')
     profitDialogVisible.value = false
-    void loadList()
+    loadList()
   } catch (e: unknown) {
     ElMessage.error(errorMessage(e) || '修改失败')
   } finally {
@@ -338,7 +346,7 @@ async function handleCancel(id: number) {
     try {
       await cancelAdminPickup(id, value)
       ElMessage.success('提号已取消')
-      void loadList()
+      loadList()
     } catch (e: unknown) {
       ElMessage.error(errorMessage(e) || '取消失败')
     } finally {
@@ -363,6 +371,13 @@ 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
@@ -426,973 +441,586 @@ function listingOptionLabel(item: AvailableListing) {
 </script>
 
 <template>
-  <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="toolbar-actions">
-          <el-button type="primary" :icon="Plus" @click="openCreateDialog">创建提号</el-button>
-          <el-button :icon="Refresh" @click="loadList">刷新数据</el-button>
-        </div>
+  <section class="page">
+    <div class="page-header-row">
+      <div class="page-header">
+        <p class="eyebrow">Admin Pickup</p>
+        <h1>线下提号</h1>
+        <p>管理员线下提号，站内上传结算到钱包，平台代管通过线下结算确认打款。</p>
       </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 class="toolbar-actions">
+        <el-button type="primary" :icon="Plus" @click="openCreateDialog">创建提号</el-button>
       </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="关键词检索">
+    <div class="pickup-filter-bar">
+      <el-form inline @submit.prevent>
+        <el-form-item label="关键词" class="pickup-keyword-filter">
           <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="全部状态"
-            class="full-control"
-            @change="handleSearch"
-          >
+          <el-select v-model="filters.status" clearable placeholder="全部" @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="全部店铺"
-            class="full-control"
+            placeholder="全部"
             @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="全部来源"
-            class="full-control"
+            placeholder="全部"
             @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 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 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>
       </el-form>
-    </section>
+    </div>
 
-    <!-- 提号数据表格 -->
-    <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 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
         >
-          <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>
+      </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="商品账号" 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>
+    <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="区服 / 平台" 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-position="top">
-        <el-form-item label="账号来源筛选">
+      <el-form label-width="110px">
+        <el-form-item label="账号来源">
           <el-radio-group
             v-model="listingSourceType"
-            class="direction-group"
+            size="small"
             @change="handleListingSourceChange"
           >
-            <el-radio-button value="">全部来源</el-radio-button>
-            <el-radio-button value="external_platform_managed">
-              外部上传 · 平台代管
-            </el-radio-button>
+            <el-radio-button value="">全部</el-radio-button>
+            <el-radio-button value="external">外部上传 · 平台代管</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="搜索商品编号 / 标题 / 卖家手机号"
-            class="full-control"
+            placeholder="输入上架编号或账号标题搜索"
+            style="width: 100%"
           >
             <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>
-
-        <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-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="线下利润(元)">
           <el-input-number
             v-model="createForm.profit_amount"
             :min="0"
+            :step="1"
             :precision="2"
-            :step="5"
-            class="full-control"
+            controls-position="right"
+            style="width: 100%"
           />
+          <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>
-        <div class="modal-footer">
-          <el-button @click="createDialogVisible = false">取消</el-button>
-          <el-button type="primary" :loading="loading" @click="handleCreate">确认创建</el-button>
-        </div>
+        <el-button @click="createDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="handleCreate">创建提号</el-button>
       </template>
     </el-dialog>
 
-    <!-- 完成提号弹窗 -->
-    <el-dialog v-model="completeDialogVisible" title="完成线下提号" width="520px" destroy-on-close>
-      <el-form label-position="top">
-        <el-form-item label="实际结算金额（元）">
+    <!-- 完成提号 -->
+    <el-dialog v-model="completeDialogVisible" title="完成提号" width="480px">
+      <el-form label-width="110px">
+        <el-form-item label="结算金额(元)" required>
           <el-input-number
             v-model="completeForm.settle_amount"
-            :min="0"
+            :min="0.01"
+            :step="1"
             :precision="2"
-            :step="10"
-            class="full-control"
+            controls-position="right"
+            style="width: 100%"
           />
+          <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"
-            :step="5"
-            class="full-control"
+            controls-position="right"
+            style="width: 100%"
           />
+          <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>
-        <div class="modal-footer">
-          <el-button @click="completeDialogVisible = false">取消</el-button>
-          <el-button type="primary" :loading="loading" @click="handleComplete">确认完成</el-button>
-        </div>
+        <el-button @click="completeDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="handleComplete">确认完成</el-button>
       </template>
     </el-dialog>
 
-    <!-- 修改利润弹窗 -->
-    <el-dialog v-model="profitDialogVisible" title="修改线下利润" width="480px" destroy-on-close>
-      <el-form label-position="top">
-        <el-form-item label="线下利润金额（元）" required>
+    <el-dialog v-model="profitDialogVisible" title="修改线下利润" width="460px">
+      <el-form label-width="110px">
+        <el-form-item label="线下利润(元)" required>
           <el-input-number
             v-model="profitForm.profit_amount"
             :min="0"
+            :step="1"
             :precision="2"
-            :step="5"
-            class="full-control"
+            controls-position="right"
+            style="width: 100%"
           />
         </el-form-item>
-        <el-form-item label="修改原因说明">
+        <el-form-item label="修改原因">
           <el-input
             v-model="profitForm.reason"
             type="textarea"
             :rows="3"
-            placeholder="填写修改利润的原因..."
+            maxlength="255"
+            show-word-limit
+            placeholder="可选"
           />
         </el-form-item>
       </el-form>
       <template #footer>
-        <div class="modal-footer">
-          <el-button @click="profitDialogVisible = false">取消</el-button>
-          <el-button type="primary" :loading="profitSaving" @click="handleUpdateProfit">
-            保存修改
-          </el-button>
-        </div>
+        <el-button @click="profitDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="profitSaving" @click="handleUpdateProfit">
+          保存
+        </el-button>
       </template>
     </el-dialog>
 
-    <!-- 财务调整弹窗 -->
-    <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"
-            :precision="2"
-            :step="10"
-            class="full-control"
-          />
-        </el-form-item>
-        <el-form-item label="调整后线下利润（元）" required>
+    <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"
-            :step="5"
-            class="full-control"
+            controls-position="right"
+            style="width: 100%"
           />
         </el-form-item>
-        <el-form-item label="调账原因（必填，审计留痕）" required>
+        <el-form-item label="目标打款金额(元)">
+          <el-input-number
+            v-model="financialAdjustmentForm.settle_amount"
+            :min="0"
+            :step="1"
+            :precision="2"
+            controls-position="right"
+            style="width: 100%"
+          />
+          <div class="form-hint">
+            {{
+              activePickup?.settlement_mode === 'platform_managed'
+                ? '代管账号会生成待线下补款或待追回记录'
+                : '增加金额会立即补入号主钱包，减少金额会生成待追回记录'
+            }}
+          </div>
+        </el-form-item>
+        <el-form-item label="调整原因" required>
           <el-input
             v-model="financialAdjustmentForm.reason"
             type="textarea"
             :rows="3"
-            placeholder="填写财务调账的原因依据..."
+            maxlength="255"
+            show-word-limit
+            placeholder="请输入调整原因"
           />
         </el-form-item>
       </el-form>
       <template #footer>
-        <div class="modal-footer">
-          <el-button @click="financialAdjustmentDialogVisible = false">取消</el-button>
-          <el-button
-            type="primary"
-            :loading="financialAdjustmentSaving"
-            @click="handleFinancialAdjustment"
-          >
-            确认调账
-          </el-button>
-        </div>
+        <el-button @click="financialAdjustmentDialogVisible = false">取消</el-button>
+        <el-button
+          type="primary"
+          :loading="financialAdjustmentSaving"
+          @click="handleFinancialAdjustment"
+        >
+          确认调整
+        </el-button>
       </template>
     </el-dialog>
-  </div>
+  </section>
 </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;
-}
-
-/* ================= 核心指标卡片 ================= */
-.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;
-}
-
-.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;
+.form-hint {
+  margin-top: 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;
+.pickup-filter-bar {
   margin-bottom: 16px;
 }
 
-.table-header-title {
+.pickup-filter-bar :deep(.el-form) {
   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;
 }
 
-.header-icon {
-  color: #0284c7;
-  font-size: 18px;
+@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;
+  }
 }
 
-.count-badge {
-  font-size: 12px;
-  font-weight: 600;
-  color: #0284c7;
-  background: #e0f2fe;
-  padding: 3px 10px;
-  border-radius: 20px;
+@media (max-width: 600px) {
+  .pickup-filter-bar :deep(.el-form) {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
-
-.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;
-}
-
-.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;
-  gap: 2px;
-}
-
-.source-tag {
-  width: fit-content;
-  font-weight: 600;
-}
-
-.channel-text {
-  font-size: 11px;
-  color: #64748b;
-}
-
-.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 {
+.price-snapshot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  color: #475569;
+  font-size: 13px;
+  line-height: 1.6;
+}
+.source-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+}
+.source-cell small {
+  color: #64748b;
+}
+.listing-option {
   display: flex;
   align-items: center;
-  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 {
+  gap: 8px;
   width: 100%;
 }
-
-.direction-group :deep(.el-radio-button) {
+.listing-option-title {
+  min-width: 0;
   flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-
-.direction-group :deep(.el-radio-button__inner) {
-  width: 100%;
+.listing-option-price {
+  flex: none;
+  color: #64748b;
+  font-variant-numeric: tabular-nums;
 }
-
-.modal-footer {
+.selected-source {
   display: flex;
-  justify-content: flex-end;
-  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  color: #475569;
+  font-size: 13px;
+}
+.action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminRefundReviewView.vue b/frontend/src/features/admin/views/AdminRefundReviewView.vue
index 59b5e0c..6dcdc97 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 { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Check, Close, Money, Refresh, ShoppingBag, View, Warning } from '@element-plus/icons-vue'
+import { Check, Close, Refresh, View } from '@element-plus/icons-vue'
 import {
   adminApproveRefund,
   adminRejectRefund,
@@ -22,10 +22,6 @@ 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 {
@@ -40,7 +36,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' }
     )
@@ -115,473 +111,175 @@ async function handleRejectClose() {
 }
 
 function openDetail(order: Order) {
-  void router.push(adminPath(`orders/${order.id}`))
+  router.push(adminPath(`orders/${order.id}`))
 }
 
 onMounted(loadOrders)
 </script>
 
 <template>
-  <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 class="refund-review-page">
+    <div class="page-toolbar">
+      <h2>退款审核</h2>
+      <el-button :icon="Refresh" :loading="loading" @click="loadOrders">刷新</el-button>
+    </div>
+
+    <div v-loading="loading" class="review-list">
+      <div v-if="!loading && orders.length === 0" class="empty-state">
+        <el-empty description="暂无待审核退款" />
+      </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>
-          <h1 class="page-title">退款审核</h1>
-          <p class="page-subtitle">
-            审核租客取消订单发起的退款申请，核验订单流转状态并执行原路退回或驳回处理。
-          </p>
-        </div>
 
-        <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="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>
-
-    <!-- 退款列表卡片 -->
-    <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 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 class="card-body">
+            <div class="info-row">
+              <span class="info-label">商品</span>
+              <span class="info-value">{{ order.title || '-' }}</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 class="info-row">
+              <span class="info-label">订单状态</span>
+              <span class="info-value">{{ orderStatusLabel(order.status) }}</span>
             </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 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>
+
+          <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>
         </div>
       </div>
-    </section>
+    </div>
 
-    <!-- 驳回退款弹窗 -->
-    <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-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>
 
-          <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>
+          <el-button type="danger" :loading="submitting" @click="handleRejectClose">
+            驳回退款并关闭订单
+          </el-button>
+          <p class="option-desc">驳回退款且关闭订单，商品下架归档，订单不可再操作</p>
         </div>
       </div>
       <template #footer>
-        <div class="modal-footer">
-          <el-button @click="rejectVisible = false">取消</el-button>
-        </div>
+        <el-button @click="rejectVisible = false">取消</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <style scoped>
-.finance-page-container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 0 4px 32px;
+.refund-review-page {
+  max-width: 900px;
+  margin: 0 auto;
 }
 
-/* ================= 头部卡片 ================= */
-.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 {
+.page-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
-.table-header-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 16px;
-  font-weight: 700;
-  color: #1e293b;
-}
-
-.header-icon {
-  color: #ea580c;
+.page-toolbar h2 {
+  margin: 0;
   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;
+.empty-state {
+  padding: 60px 0;
 }
 
-.review-cards-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
-  gap: 16px;
+.review-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .review-card {
-  background: #f8fafc;
-  border-radius: 14px;
-  border: 1px solid #e2e8f0;
-  padding: 18px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  transition: all 0.2s ease;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 8px;
+  padding: 16px;
+  background: var(--el-bg-color);
 }
 
-.review-card:hover {
-  background: #ffffff;
-  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
-  border-color: #cbd5e1;
-}
-
-.rc-header {
+.card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 12px;
   padding-bottom: 12px;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid var(--el-border-color-lighter);
 }
 
-.rc-order-info {
+.order-info {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
 .order-no {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 13px;
-  font-weight: 700;
-  color: #2563eb;
+  font-weight: 600;
+  color: var(--el-color-primary);
   cursor: pointer;
 }
 
@@ -589,173 +287,66 @@ onMounted(loadOrders)
   text-decoration: underline;
 }
 
-.status-tag {
-  font-weight: 600;
+.order-time {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
 }
 
-.time-text {
-  font-size: 11.5px;
-  color: #94a3b8;
-}
-
-.rc-body {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.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 {
+.card-body {
   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;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px 24px;
+  margin-bottom: 12px;
 }
 
-.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: #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 {
+.info-row {
   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;
+.info-label {
+  color: var(--el-text-color-secondary);
+  white-space: nowrap;
+}
+
+.info-value {
+  color: var(--el-text-color-primary);
+}
+
+.refund-amount {
   font-weight: 600;
-  color: #475569;
+  color: var(--el-color-danger);
 }
 
-.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 {
+.card-actions {
   display: flex;
   justify-content: flex-end;
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.reject-dialog {
+  text-align: center;
+}
+
+.reject-tip {
+  margin-bottom: 16px;
+  color: var(--el-text-color-regular);
+}
+
+.reject-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.option-desc {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  margin: 0 0 12px 0;
+  text-align: left;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminUsersView.vue b/frontend/src/features/admin/views/AdminUsersView.vue
index 84e9b23..5674c42 100644
--- a/frontend/src/features/admin/views/AdminUsersView.vue
+++ b/frontend/src/features/admin/views/AdminUsersView.vue
@@ -1,16 +1,7 @@
 <script setup lang="ts">
 import { readError } from '@/shared/utils/error'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import {
-  CreditCard,
-  Lock,
-  Medal,
-  Refresh,
-  Search,
-  Unlock,
-  User,
-  UserFilled,
-} from '@element-plus/icons-vue'
+import { Search } from '@element-plus/icons-vue'
 import { computed, reactive, ref } from 'vue'
 
 import {
@@ -79,16 +70,6 @@ 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()
@@ -127,14 +108,9 @@ 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(amount))
+    await setAdminUserDepositFreeQuota(quotaUser.value.id, yuanToCent(quotaAmount.value))
     ElMessage.success('人工免押额度已更新')
     quotaUser.value = null
     await loadUsers()
@@ -148,17 +124,19 @@ async function handleSetDepositQuota() {
 async function handleAdjustGrowthPoints() {
   if (!growthUser.value) return
   const targetPoints = Number(growthForm.targetPoints)
-  if (!Number.isInteger(targetPoints) || targetPoints < 0) {
-    ElMessage.warning('请输入大于等于 0 的整数积分')
+  if (!Number.isInteger(targetPoints) || targetPoints < 0 || targetPoints > 1000000000) {
+    ElMessage.warning('目标积分必须是 0 到 10 亿之间的整数')
     return
   }
-  if (!growthForm.reason.trim()) {
-    ElMessage.warning('请填写调整原因')
+  if (targetPoints === Number(growthUser.value.renter_growth_points || 0)) {
+    ElMessage.warning('目标积分与当前积分相同')
     return
   }
-  const currentPoints = Number(growthUser.value.renter_growth_points || 0)
-  const diff = targetPoints - currentPoints
-  const direction = diff > 0 ? `增加 ${diff}` : diff < 0 ? `减少 ${Math.abs(diff)}` : '不变'
+  if (growthForm.reason.trim().length < 2) {
+    ElMessage.warning('请填写至少 2 个字的调整原因')
+    return
+  }
+  const direction = targetPoints > growthUser.value.renter_growth_points ? '提升' : '降低'
   try {
     await ElMessageBox.confirm(
       `确认将用户 ${growthUser.value.phone || growthUser.value.id} 的成长积分从 ${growthUser.value.renter_growth_points} ${direction}至 ${targetPoints}？`,
@@ -281,24 +259,34 @@ async function handleWalletAdjust() {
     ElMessage.warning('单笔调账不能超过 10 万元')
     return
   }
-  if (!walletForm.reason.trim()) {
-    ElMessage.warning('请填写调账原因')
+  if (walletForm.reason.trim().length < 2) {
+    ElMessage.warning('请填写至少 2 个字的调账原因')
     return
   }
-  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)}？`
+  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)}`
   try {
-    await ElMessageBox.confirm(promptText, `确认${actionLabel}`, {
-      type: walletForm.direction === 'out' ? 'warning' : 'info',
-      confirmButtonText: `确认${actionLabel}`,
-      cancelButtonText: '取消',
-    })
+    await ElMessageBox.confirm(
+      `确认为用户 ${walletUser.value.phone || walletUser.value.id} ${actionLabel} ${amountText}？\n操作将写入资金流水与审计日志。`,
+      `确认${actionLabel}`,
+      {
+        type: 'warning',
+        confirmButtonText: `确认${actionLabel}`,
+        cancelButtonText: '取消',
+      }
+    )
   } catch {
     return
   }
+
   submitting.value = true
   try {
     await adjustAdminUserWallet(walletUser.value.id, {
@@ -317,543 +305,342 @@ async function handleWalletAdjust() {
   }
 }
 
-function moneyCent(value: number | string | undefined | null) {
+function moneyCent(value: number | string | undefined) {
   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>
-  <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="toolbar-actions">
-          <el-button :icon="Refresh" @click="queryUsers">刷新</el-button>
-        </div>
+  <section class="page">
+    <div class="page-header-row">
+      <div class="page-header">
+        <p class="eyebrow">Users</p>
+        <h1>用户管理</h1>
+        <p>查看用户信息，处理成长积分、人工免押、实名与余额调账。</p>
       </div>
-    </header>
+      <el-button @click="loadUsers">刷新</el-button>
+    </div>
 
-    <!-- 汇总指标卡片 -->
-    <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="关键词检索">
+    <div class="user-filter-bar">
+      <el-form inline @submit.prevent>
+        <el-form-item label="关键词">
           <el-input
             v-model="filters.keyword"
             clearable
-            placeholder="搜索手机号 / 昵称 / 用户 ID"
+            placeholder="手机号 / 昵称 / 用户ID"
+            style="width: 220px"
             @keyup.enter="queryUsers"
             @clear="queryUsers"
           />
         </el-form-item>
-
-        <el-form-item label="账户状态">
+        <el-form-item label="状态">
           <el-select
             v-model="filters.status"
             clearable
             placeholder="全部状态"
-            class="full-control"
+            style="width: 140px"
             @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="免押授信筛选">
-          <div class="checkbox-wrap">
-            <el-checkbox v-model="filters.has_deposit_free_quota" @change="queryUsers">
-              仅筛选拥有有效免押额度用户
-            </el-checkbox>
-          </div>
+        <el-form-item label="免押额度">
+          <el-checkbox v-model="filters.has_deposit_free_quota" @change="queryUsers">
+            仅看有额度
+          </el-checkbox>
         </el-form-item>
-
-        <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-button type="primary" :icon="Search" :loading="loading" @click="queryUsers"
+            >查询</el-button
+          >
+          <el-button @click="resetFilters">重置</el-button>
         </el-form-item>
       </el-form>
-    </section>
+    </div>
 
-    <!-- 用户数据表格 -->
-    <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>
+    <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>
 
-      <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>
+    <AdminTablePagination
+      v-if="total > 0"
+      v-model:current-page="currentPage"
+      v-model:page-size="currentPageSize"
+      :total="total"
+      :loading="loading"
+      @page-change="loadUsers"
+    />
 
-          <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="540px"
-      destroy-on-close
+      width="560px"
       @update:model-value="activeUser = null"
     >
       <div v-if="activeUser" class="dialog-body">
-        <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="error"
-          :closable="false"
-          show-icon
-          title="冻结后该用户将无法登录前台、发布商品或进行租号下单。"
-          style="margin-bottom: 14px"
+        <p>
+          <strong>{{ activeUser.phone }}</strong> · {{ activeUser.nickname }}
+        </p>
+        <el-input
+          v-model="freezeReason"
+          type="textarea"
+          :rows="4"
+          placeholder="填写冻结原因，便于审计追踪"
         />
-        <el-form label-position="top">
-          <el-form-item label="冻结原因（审计留痕）">
-            <el-input
-              v-model="freezeReason"
-              type="textarea"
-              :rows="4"
-              placeholder="填写冻结具体违规原因，便于日后审计追踪..."
-            />
-          </el-form-item>
-        </el-form>
       </div>
       <template #footer>
-        <div class="modal-footer">
-          <el-button @click="activeUser = null">取消</el-button>
-          <el-button type="danger" :loading="submitting" @click="handleFreeze">确认冻结</el-button>
-        </div>
+        <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="540px"
-      destroy-on-close
+      width="560px"
       @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>
+        <p>
+          <strong>{{ manualRealnameUser.phone }}</strong> · {{ manualRealnameUser.nickname }}
+        </p>
         <el-alert
           type="info"
           :closable="false"
-          show-icon
-          title="请确认已通过线下或客服核验真实身份材料，提交后该用户将直接获得实名权限。"
-          style="margin-bottom: 14px"
+          title="请确认已通过线下或客服材料核验姓名与身份证号，提交后该用户会直接变为已实名。"
         />
         <el-form label-position="top" @submit.prevent>
-          <el-form-item label="真实姓名" required>
+          <el-form-item label="真实姓名">
             <el-input v-model="manualRealnameForm.name" clearable placeholder="请输入真实姓名" />
           </el-form-item>
-          <el-form-item label="身份证号" required>
+          <el-form-item label="身份证号">
             <el-input
               v-model="manualRealnameForm.idNo"
               clearable
               maxlength="18"
-              placeholder="请输入 18 位身份证号"
+              placeholder="请输入18位身份证号"
             />
           </el-form-item>
-          <el-form-item label="处理原因与核验依据">
+          <el-form-item label="处理原因">
             <el-input
               v-model="manualRealnameForm.reason"
               type="textarea"
               :rows="3"
-              placeholder="填写客服人工核验依据与处理说明..."
+              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>
+        <el-button @click="manualRealnameUser = null">取消</el-button>
+        <el-button type="success" :loading="submitting" @click="handleManualRealname"
+          >确认实名</el-button
+        >
       </template>
     </el-dialog>
 
-    <!-- 撤销实名弹窗 -->
     <el-dialog
       :model-value="!!realnameUser"
       title="撤销实名认证"
-      width="540px"
-      destroy-on-close
+      width="560px"
       @update:model-value="realnameUser = null"
     >
       <div v-if="realnameUser" class="dialog-body">
-        <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>
+        <p>
+          <strong>{{ realnameUser.phone }}</strong> · {{ realnameUser.nickname }}
+        </p>
         <el-alert
           type="warning"
           :closable="false"
-          show-icon
           title="撤销后该用户实名信息将被清除，需重新完成实名认证后才能下单与登记收款码。"
-          style="margin-bottom: 14px"
         />
-        <el-form label-position="top">
-          <el-form-item label="撤销原因（必填）">
-            <el-input
-              v-model="revokeRealnameReason"
-              type="textarea"
-              :rows="4"
-              placeholder="填写撤销具体原因（如姓名与收款账户不一致等）..."
-            />
-          </el-form-item>
-        </el-form>
+        <el-input
+          v-model="revokeRealnameReason"
+          type="textarea"
+          :rows="4"
+          placeholder="填写撤销原因（如实名姓名与收款账户不一致），便于审计追踪"
+        />
       </div>
       <template #footer>
-        <div class="modal-footer">
-          <el-button @click="realnameUser = null">取消</el-button>
-          <el-button type="warning" :loading="submitting" @click="handleRevokeRealname">
-            确认撤销
-          </el-button>
-        </div>
+        <el-button @click="realnameUser = null">取消</el-button>
+        <el-button type="warning" :loading="submitting" @click="handleRevokeRealname"
+          >确认撤销</el-button
+        >
       </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">
-        <div class="target-user-card">
-          <span class="user-label">授信用户：</span>
-          <strong>{{ quotaUser.phone }}</strong>
-          <span class="nickname-note">（{{ quotaUser.nickname }} · UID: {{ quotaUser.id }}）</span>
+        <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>
-        <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>
+        <el-input-number
+          v-model="quotaAmount"
+          class="full-control"
+          :min="0"
+          :precision="0"
+          :step="100"
+        />
       </div>
       <template #footer>
-        <div class="modal-footer">
-          <el-button :disabled="submitting" @click="quotaUser = null">取消</el-button>
-          <el-button type="primary" :loading="submitting" @click="handleSetDepositQuota">
-            保存额度
-          </el-button>
-        </div>
+        <el-button :disabled="submitting" @click="quotaUser = null">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="handleSetDepositQuota"
+          >保存额度</el-button
+        >
       </template>
     </el-dialog>
 
-    <!-- 调整成长积分弹窗 -->
     <el-dialog
       :model-value="!!growthUser"
       title="调整成长积分"
-      width="520px"
-      destroy-on-close
+      width="540px"
       @update:model-value="growthUser = null"
     >
-      <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 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>
         <el-form label-position="top" @submit.prevent>
-          <el-form-item label="目标调整积分" required>
+          <el-form-item label="目标积分">
             <el-input-number
               v-model="growthForm.targetPoints"
               class="full-control"
@@ -863,56 +650,45 @@ function realnameTagType(status: string): 'success' | 'warning' | 'info' {
               step-strictly
             />
           </el-form-item>
-          <el-form-item label="调整原因（必填）" required>
+          <el-form-item label="调整原因（必填）">
             <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>
-        <div class="modal-footer">
-          <el-button :disabled="submitting" @click="growthUser = null">取消</el-button>
-          <el-button type="primary" :loading="submitting" @click="handleAdjustGrowthPoints">
-            确认调整
-          </el-button>
-        </div>
+        <el-button :disabled="submitting" @click="growthUser = null">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="handleAdjustGrowthPoints">
+          确认调整
+        </el-button>
       </template>
     </el-dialog>
 
-    <!-- 余额管理弹窗 -->
     <el-dialog
       :model-value="!!walletUser"
-      title="钱包余额调账"
-      width="540px"
-      destroy-on-close
+      title="余额管理"
+      width="560px"
       @update:model-value="walletUser = null"
     >
-      <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">
+      <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>
             <span>可用余额</span>
-            <strong class="font-mono text-emerald"
-              >¥{{ moneyCent(walletUser.available_balance_cent) }}</strong
-            >
+            <strong>¥{{ moneyCent(walletUser.available_balance_cent) }}</strong>
           </div>
-          <div class="wb-item">
+          <div>
             <span>冻结余额</span>
-            <strong class="font-mono text-amber"
-              >¥{{ moneyCent(walletUser.frozen_balance_cent) }}</strong
-            >
+            <strong>¥{{ moneyCent(walletUser.frozen_balance_cent) }}</strong>
           </div>
         </div>
         <el-alert
@@ -920,17 +696,22 @@ function realnameTagType(status: string): 'success' | 'warning' | 'info' {
           type="warning"
           :closable="false"
           show-icon
-          title="该用户有冻结余额，对应提现中款项。此处仅用于调整可用余额。"
-          style="margin-bottom: 12px"
+          title="该用户有冻结余额，通常对应进行中的提现单。冻结金额请到「提现审核」处理；此处仅调整可用余额。"
+        />
+        <el-alert
+          type="info"
+          :closable="false"
+          show-icon
+          title="扣款用于线下已打款核销；加款用于客服补偿。操作会写入资金流水与审计日志。"
         />
         <el-form label-position="top" @submit.prevent>
           <el-form-item label="调账类型">
-            <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 v-model="walletForm.direction">
+              <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="变动金额（元）" required>
+          <el-form-item label="金额（元）">
             <el-input-number
               v-model="walletForm.amountYuan"
               class="full-control"
@@ -940,7 +721,7 @@ function realnameTagType(status: string): 'success' | 'warning' | 'info' {
               :step="10"
             />
           </el-form-item>
-          <el-form-item label="调账原因（必填）" required>
+          <el-form-item label="原因（必填，计入审计）">
             <el-input
               v-model="walletForm.reason"
               type="textarea"
@@ -950,568 +731,178 @@ function realnameTagType(status: string): 'success' | 'warning' | 'info' {
               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>
-        <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>
+        <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>
       </template>
     </el-dialog>
-  </div>
+  </section>
 </template>
 
 <style scoped>
-.finance-page-container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 0 4px 32px;
+.user-filter-bar {
+  margin-bottom: 16px;
+  padding: 16px 16px 0;
+  border-radius: 8px;
+  background: #fff;
 }
 
-/* ================= 头部卡片 ================= */
-.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);
+.user-filter-bar :deep(.el-form-item) {
+  margin-bottom: 16px;
 }
 
-.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;
+.balance-available {
+  color: #0f172a;
+  font-variant-numeric: tabular-nums;
   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;
+.balance-frozen {
+  color: #94a3b8;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
 }
 
-.page-subtitle {
-  margin: 0;
-  font-size: 13.5px;
-  color: #64748b;
-  line-height: 1.5;
+.balance-frozen.is-positive {
+  color: #c2410c;
 }
 
-.toolbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-/* ================= 核心指标卡片 ================= */
-.summary-metric-grid {
+.quota-cell {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
-  gap: 16px;
+  gap: 2px;
 }
 
-.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;
-}
-
-.metric-val {
-  font-size: 22px;
-  font-weight: 800;
+.quota-cell strong {
   color: #0f172a;
-  letter-spacing: -0.3px;
-  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
 }
 
-.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;
+.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;
-  padding: 1px 6px;
-  border-radius: 4px;
-  width: fit-content;
 }
 
-.metric-sub-pill.info {
-  background: #eef2ff;
-  color: #4f46e5;
+.table-actions :deep(.el-button + .el-button) {
+  margin-left: 0;
 }
 
-.metric-sub-pill.success {
-  background: #f0fdf4;
-  color: #16a34a;
+.table-actions :deep(.el-button.is-text) {
+  border-radius: 6px;
 }
 
-.metric-sub-pill.warning {
-  background: #fffbeb;
-  color: #d97706;
+.table-actions :deep(.el-button.is-text:hover) {
+  background: #f1f5f9;
 }
 
-.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 {
+.wallet-dialog {
   display: grid;
-  grid-template-columns: 260px 180px 1fr auto;
-  align-items: flex-end;
-  gap: 14px 16px;
+  gap: 14px;
 }
 
-.filter-grid :deep(.el-form-item) {
-  margin-bottom: 0;
+.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;
 }
 
-.filter-grid :deep(.el-form-item__label) {
-  padding-bottom: 4px;
-  font-size: 12px;
-  font-weight: 600;
+.quota-summary strong {
+  color: #0f172a;
+}
+
+.growth-dialog {
+  gap: 16px;
+}
+
+.growth-current {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f8fafc;
   color: #64748b;
 }
 
-.checkbox-wrap {
-  display: flex;
-  align-items: center;
-  height: 36px;
+.growth-current strong {
+  color: #0f172a;
+  font-size: 22px;
+  font-variant-numeric: tabular-nums;
 }
 
-.filter-actions {
-  display: flex;
-  align-items: center;
+.wallet-balance-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 10px;
 }
 
+.wallet-balance-cards > div {
+  display: grid;
+  gap: 6px;
+  padding: 12px 14px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.wallet-balance-cards span {
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.wallet-balance-cards strong {
+  color: #0f172a;
+  font-size: 22px;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+
 .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: flex;
-  flex-direction: column;
+  display: grid;
   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>