diff --git a/frontend/src/features/admin/views/AdminFinanceDetailsView.vue b/frontend/src/features/admin/views/AdminFinanceDetailsView.vue
index 52edd06..0031c5c 100644
--- a/frontend/src/features/admin/views/AdminFinanceDetailsView.vue
+++ b/frontend/src/features/admin/views/AdminFinanceDetailsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Search } from '@element-plus/icons-vue'
+import { Document, DocumentChecked, Refresh, Search, View } from '@element-plus/icons-vue'
 import { onMounted, reactive, ref } from 'vue'
 
 import {
@@ -18,6 +18,7 @@ const details = ref<FinanceDetail[]>([])
 const currentPage = ref(1)
 const currentPageSize = ref(20)
 const total = ref(0)
+
 const filters = reactive({
   start_date: defaultStartDate(),
   end_date: defaultEndDate(),
@@ -65,8 +66,8 @@ async function handlePageChange() {
   await loadDetails()
 }
 
-function moneyCent(value: number) {
-  return formatCentWithSymbol(value)
+function moneyCent(value: number | undefined | null) {
+  return formatCentWithSymbol(value || 0)
 }
 
 function financeStatusLabel(status: string) {
@@ -80,7 +81,7 @@ function financeStatusLabel(status: string) {
   return map[status] || status
 }
 
-function financeStatusType(status: string) {
+function financeStatusType(status: string): 'success' | 'danger' | 'warning' | 'info' {
   if (status === 'normal') return 'success'
   if (status === 'settlement_diff' || status === 'refund_failed') return 'danger'
   if (status === 'refund_pending' || status === 'offline_settlement_pending') return 'warning'
@@ -113,12 +114,6 @@ function offlineSettlementStatusLabel(status: string) {
   return map[status] || status || '-'
 }
 
-function shortDateTime(value?: string) {
-  if (!value) return '-'
-  const text = formatDateTime(value)
-  return text.replace(/^\d{4}-/, '')
-}
-
 function defaultStartDate() {
   const date = new Date()
   date.setDate(date.getDate() - 29)
@@ -131,317 +126,600 @@ function defaultEndDate() {
 </script>
 
 <template>
-  <section class="page finance-details-page">
-    <div class="page-header-row">
-      <div class="page-header">
-        <p class="eyebrow">Finance Details</p>
-        <h1>财务明细</h1>
-        <p>按订单核对收款、退款、平台收入、号主应得与钱包入账/线下结算。</p>
-      </div>
-      <div class="toolbar-actions">
-        <el-button @click="resetFilters">重置</el-button>
-        <el-button type="primary" :icon="Search" :loading="loading" @click="loadDetails">
-          查询
-        </el-button>
-      </div>
-    </div>
-
-    <el-form class="filter-panel finance-filter-panel" label-position="top">
-      <el-form-item label="日期类型">
-        <el-select v-model="filters.date_type" class="full-control">
-          <el-option label="结算日期" value="settled" />
-          <el-option label="线下打款日期" value="offline_settled" />
-          <el-option label="下单日期" value="created" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="开始日期">
-        <el-date-picker
-          v-model="filters.start_date"
-          class="full-control"
-          type="date"
-          value-format="YYYY-MM-DD"
-        />
-      </el-form-item>
-      <el-form-item label="结束日期">
-        <el-date-picker
-          v-model="filters.end_date"
-          class="full-control"
-          type="date"
-          value-format="YYYY-MM-DD"
-        />
-      </el-form-item>
-      <el-form-item label="订单号">
-        <el-input v-model="filters.order_no" clearable placeholder="按订单号筛选" />
-      </el-form-item>
-      <el-form-item label="用户 ID">
-        <el-input v-model="filters.user_id" clearable placeholder="租客或号主 ID" />
-      </el-form-item>
-      <el-form-item label="订单状态">
-        <el-select
-          v-model="filters.order_status"
-          clearable
-          placeholder="全部状态"
-          class="full-control"
-        >
-          <el-option label="待支付" value="pending_payment" />
-          <el-option label="使用中" value="renting" />
-          <el-option label="待结账" value="pending_checkout_confirm" />
-          <el-option label="已完成" value="completed" />
-          <el-option label="已关闭" value="closed" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="结算状态">
-        <el-select
-          v-model="filters.settlement_status"
-          clearable
-          placeholder="全部结算"
-          class="full-control"
-        >
-          <el-option label="未结算" value="unsettled" />
-          <el-option label="已结算" value="settled" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="结算模式">
-        <el-select
-          v-model="filters.settlement_mode"
-          clearable
-          placeholder="全部模式"
-          class="full-control"
-        >
-          <el-option label="号主钱包" value="owner_wallet" />
-          <el-option label="平台代管" value="platform_managed" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="线下状态">
-        <el-select
-          v-model="filters.offline_settlement_status"
-          clearable
-          placeholder="全部状态"
-          class="full-control"
-        >
-          <el-option label="待线下结算" value="pending" />
-          <el-option label="已线下结算" value="settled" />
-          <el-option label="无需线下结算" value="none" />
-        </el-select>
-      </el-form-item>
-    </el-form>
-
-    <div v-loading="loading" class="table-panel finance-details-table">
-      <div class="finance-grid-header">
-        <div>订单</div>
-        <div>状态</div>
-        <div>租客/号主</div>
-        <div class="amount-cell">收款</div>
-        <div class="amount-cell">已退</div>
-        <div class="amount-cell">退中</div>
-        <div class="amount-cell">净入</div>
-        <div class="amount-cell">平台</div>
-        <div class="amount-cell">应得</div>
-        <div class="amount-cell">入账/线下</div>
-        <div class="amount-cell">差异</div>
-      </div>
-
-      <div v-if="details.length > 0" class="finance-grid-body">
-        <div v-for="row in details" :key="row.order_id" class="finance-grid-row">
-          <div class="order-cell">
-            <RouterLink class="order-no" :to="adminPath(`orders/${row.order_id}`)">
-              {{ row.order_no }}
-            </RouterLink>
-            <span class="cell-muted">结算 {{ shortDateTime(row.settled_at) }}</span>
+  <div class="finance-page-container">
+    <!-- 页面头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><Document /></el-icon>
+            <span>FINANCE DETAILS</span>
           </div>
+          <h1 class="page-title">财务明细</h1>
+          <p class="page-subtitle">
+            按订单维度精细核对收款、退款、平台利润扣费、号主应得与实际入账差异。
+          </p>
+        </div>
 
-          <div class="status-stack">
-            <span>{{ orderStatusLabel(row.order_status) }}</span>
-            <small
-              >{{ settlementStatusLabel(row.settlement_status) }} ·
-              {{ settlementModeLabel(row) }}</small
-            >
-            <small v-if="isPlatformManaged(row)">
-              {{ offlineSettlementStatusLabel(row.offline_settlement_status) }}
-            </small>
-            <el-tag size="small" :type="financeStatusType(row.finance_status)">
-              {{ financeStatusLabel(row.finance_status) }}
-            </el-tag>
-          </div>
-
-          <div class="party-cell">
-            <span>租 {{ row.renter_phone || row.renter_nickname || row.renter_id }}</span>
-            <span>主 {{ row.owner_phone || row.owner_nickname || row.owner_id }}</span>
-          </div>
-
-          <span class="amount-text amount-cell">{{ moneyCent(row.paid_amount_cent) }}</span>
-          <span class="amount-text amount-cell muted-amount">
-            {{ moneyCent(row.refunded_amount_cent) }}
-          </span>
-          <span class="amount-text amount-cell muted-amount">
-            {{ moneyCent(row.refunding_amount_cent) }}
-          </span>
-          <span class="amount-text amount-cell">{{ moneyCent(row.channel_net_amount_cent) }}</span>
-          <span class="amount-text amount-cell">{{
-            moneyCent(row.checkout_platform_fee_cent)
-          }}</span>
-          <span class="amount-text amount-cell">{{
-            moneyCent(row.checkout_owner_income_cent)
-          }}</span>
-          <span class="amount-text amount-cell">{{
-            moneyCent(row.owner_effective_settlement_amount_cent)
-          }}</span>
-          <span
-            class="amount-text amount-cell"
-            :class="{
-              'amount-danger':
-                Math.abs(row.settlement_diff_amount_cent) >= SETTLEMENT_DIFF_THRESHOLD_CENT,
-            }"
-          >
-            {{ moneyCent(row.settlement_diff_amount_cent) }}
-          </span>
+        <div class="toolbar-actions">
+          <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
+          <el-button type="primary" :icon="Search" :loading="loading" @click="loadDetails">
+            查询
+          </el-button>
         </div>
       </div>
+    </header>
 
-      <el-empty v-else :image-size="80" description="暂无财务明细" />
-    </div>
+    <!-- 筛选面板卡片 -->
+    <section class="section-card filter-card">
+      <el-form class="filter-grid" label-position="top" @keyup.enter="loadDetails">
+        <el-form-item label="日期类型">
+          <el-select v-model="filters.date_type" class="full-control">
+            <el-option label="结算日期" value="settled" />
+            <el-option label="线下打款日期" value="offline_settled" />
+            <el-option label="下单日期" value="created" />
+          </el-select>
+        </el-form-item>
 
-    <AdminTablePagination
-      v-if="total > 0"
-      v-model:current-page="currentPage"
-      v-model:page-size="currentPageSize"
-      :total="total"
-      :loading="loading"
-      @page-change="handlePageChange"
-    />
-  </section>
+        <el-form-item label="开始日期">
+          <el-date-picker
+            v-model="filters.start_date"
+            class="full-control"
+            type="date"
+            value-format="YYYY-MM-DD"
+            :clearable="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="结束日期">
+          <el-date-picker
+            v-model="filters.end_date"
+            class="full-control"
+            type="date"
+            value-format="YYYY-MM-DD"
+            :clearable="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="订单号">
+          <el-input v-model="filters.order_no" clearable placeholder="按订单号检索" />
+        </el-form-item>
+
+        <el-form-item label="用户 ID">
+          <el-input v-model="filters.user_id" clearable placeholder="租客或号主 ID" />
+        </el-form-item>
+
+        <el-form-item label="订单状态">
+          <el-select
+            v-model="filters.order_status"
+            clearable
+            placeholder="全部状态"
+            class="full-control"
+          >
+            <el-option label="待支付" value="pending_payment" />
+            <el-option label="使用中" value="renting" />
+            <el-option label="待结账" value="pending_checkout_confirm" />
+            <el-option label="已完成" value="completed" />
+            <el-option label="已关闭" value="closed" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="结算状态">
+          <el-select
+            v-model="filters.settlement_status"
+            clearable
+            placeholder="全部结算"
+            class="full-control"
+          >
+            <el-option label="未结算" value="unsettled" />
+            <el-option label="已结算" value="settled" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="结算模式">
+          <el-select
+            v-model="filters.settlement_mode"
+            clearable
+            placeholder="全部模式"
+            class="full-control"
+          >
+            <el-option label="号主钱包" value="owner_wallet" />
+            <el-option label="平台代管" value="platform_managed" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="线下状态">
+          <el-select
+            v-model="filters.offline_settlement_status"
+            clearable
+            placeholder="全部状态"
+            class="full-control"
+          >
+            <el-option label="待线下结算" value="pending" />
+            <el-option label="已线下结算" value="settled" />
+            <el-option label="无需线下结算" value="none" />
+          </el-select>
+        </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"><DocumentChecked /></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="details"
+          stripe
+          empty-text="暂无财务明细记录"
+        >
+          <!-- 订单标识 -->
+          <el-table-column label="订单信息" min-width="190" fixed="left">
+            <template #default="{ row }">
+              <div class="order-cell">
+                <RouterLink class="order-no-link" :to="adminPath(`orders/${row.order_id}`)">
+                  {{ row.order_no }}
+                </RouterLink>
+                <small class="time-sub">结算 {{ formatDateTime(row.settled_at) || '-' }}</small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <!-- 状态复合列 -->
+          <el-table-column label="订单与结算状态" min-width="170">
+            <template #default="{ row }">
+              <div class="status-stack">
+                <div class="status-row">
+                  <span class="order-status-badge">{{ orderStatusLabel(row.order_status) }}</span>
+                  <el-tag size="small" :type="financeStatusType(row.finance_status)" effect="plain">
+                    {{ financeStatusLabel(row.finance_status) }}
+                  </el-tag>
+                </div>
+                <small class="settle-desc">
+                  {{ settlementStatusLabel(row.settlement_status) }} ·
+                  {{ settlementModeLabel(row) }}
+                </small>
+                <small v-if="isPlatformManaged(row)" class="offline-desc">
+                  {{ offlineSettlementStatusLabel(row.offline_settlement_status) }}
+                </small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <!-- 交易双方 -->
+          <el-table-column label="交易双方" min-width="160">
+            <template #default="{ row }">
+              <div class="parties-cell">
+                <div class="party-line">
+                  <span class="role-badge renter">租</span>
+                  <span class="party-info">{{
+                    row.renter_phone || row.renter_nickname || `UID ${row.renter_id}`
+                  }}</span>
+                </div>
+                <div class="party-line">
+                  <span class="role-badge owner">主</span>
+                  <span class="party-info">{{
+                    row.owner_phone || row.owner_nickname || `UID ${row.owner_id}`
+                  }}</span>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+
+          <!-- 收款 -->
+          <el-table-column label="收款金额" min-width="120" align="right">
+            <template #default="{ row }">
+              <span class="amount-val flow-amount">{{ moneyCent(row.paid_amount_cent) }}</span>
+            </template>
+          </el-table-column>
+
+          <!-- 退款情况 -->
+          <el-table-column label="已退 / 退中" min-width="130" align="right">
+            <template #default="{ row }">
+              <div class="refund-stack">
+                <span v-if="row.refunded_amount_cent > 0" class="refund-text">
+                  退 {{ moneyCent(row.refunded_amount_cent) }}
+                </span>
+                <span v-else class="zero-text">0.0</span>
+
+                <span v-if="row.refunding_amount_cent > 0" class="refunding-text">
+                  中 {{ moneyCent(row.refunding_amount_cent) }}
+                </span>
+              </div>
+            </template>
+          </el-table-column>
+
+          <!-- 渠道净流入 -->
+          <el-table-column label="渠道净流入" min-width="125" align="right">
+            <template #default="{ row }">
+              <span class="amount-val net-amount">{{
+                moneyCent(row.channel_net_amount_cent)
+              }}</span>
+            </template>
+          </el-table-column>
+
+          <!-- 平台利润 -->
+          <el-table-column label="平台收益" min-width="125" align="right">
+            <template #default="{ row }">
+              <strong class="amount-val profit-amount">
+                {{ moneyCent(row.checkout_platform_fee_cent) }}
+              </strong>
+            </template>
+          </el-table-column>
+
+          <!-- 号主应得 -->
+          <el-table-column label="号主应得" min-width="125" align="right">
+            <template #default="{ row }">
+              <span class="amount-val">{{ moneyCent(row.checkout_owner_income_cent) }}</span>
+            </template>
+          </el-table-column>
+
+          <!-- 实际入账 / 线下 -->
+          <el-table-column label="实际结算" min-width="130" align="right">
+            <template #default="{ row }">
+              <span class="amount-val success-val">
+                {{ moneyCent(row.owner_effective_settlement_amount_cent) }}
+              </span>
+            </template>
+          </el-table-column>
+
+          <!-- 结算差异 -->
+          <el-table-column label="结算差异" min-width="120" align="right">
+            <template #default="{ row }">
+              <el-tag
+                v-if="Math.abs(row.settlement_diff_amount_cent) >= SETTLEMENT_DIFF_THRESHOLD_CENT"
+                type="danger"
+                size="small"
+                class="diff-tag"
+              >
+                {{ moneyCent(row.settlement_diff_amount_cent) }}
+              </el-tag>
+              <span v-else class="amount-val zero-diff">
+                {{ moneyCent(row.settlement_diff_amount_cent) }}
+              </span>
+            </template>
+          </el-table-column>
+
+          <!-- 操作 -->
+          <el-table-column label="操作" width="90" fixed="right" align="center">
+            <template #default="{ row }">
+              <RouterLink :to="adminPath(`orders/${row.order_id}`)" class="action-link">
+                <el-icon><View /></el-icon>
+                <span>查看</span>
+              </RouterLink>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <AdminTablePagination
+        v-model:current-page="currentPage"
+        v-model:page-size="currentPageSize"
+        :total="total"
+        @change="handlePageChange"
+      />
+    </section>
+  </div>
 </template>
 
 <style scoped>
-.finance-details-page {
-  --finance-muted: #7f8aa3;
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
 }
 
-.finance-details-page :deep(.page-header-row) {
-  margin-bottom: 18px;
+/* ================= 头部卡片 ================= */
+.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);
 }
 
-.finance-details-page :deep(.page-header h1) {
-  font-size: 28px;
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
 }
 
-.finance-filter-panel {
-  grid-template-columns: repeat(9, minmax(100px, 1fr));
-  gap: 10px;
-  margin-bottom: 16px;
-  padding: 14px 16px;
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.finance-filter-panel :deep(.el-form-item__label) {
-  margin-bottom: 4px;
-  line-height: 18px;
-}
-
-.finance-filter-panel :deep(.el-input__wrapper),
-.finance-filter-panel :deep(.el-select__wrapper) {
-  min-height: 32px;
-}
-
-.finance-details-table {
-  padding: 0;
-}
-
-.finance-grid-header,
-.finance-grid-row {
-  display: grid;
-  grid-template-columns: 15% 9% 16% repeat(8, 7.5%);
+.eyebrow-tag {
+  display: inline-flex;
   align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #4f46e5;
+  background: #eef2ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.5px;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* ================= 筛选面板 ================= */
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  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;
+}
+
+.full-control {
   width: 100%;
 }
 
-.finance-grid-header {
-  border-bottom: 1px solid #edf1f7;
-  color: #7f8aa3;
+/* ================= 表格卡片 ================= */
+.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: 650;
-  letter-spacing: 0;
-  line-height: 1.35;
-  text-transform: none;
+  font-weight: 600;
+  color: #4f46e5;
+  background: #eef2ff;
+  padding: 3px 10px;
+  border-radius: 20px;
 }
 
-.finance-grid-header > div,
-.finance-grid-row > div,
-.finance-grid-row > span {
-  min-width: 0;
-  padding: 8px 7px;
+.table-container {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
 }
 
-.finance-grid-row {
-  border-bottom: 1px solid #edf1f7;
+.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;
 }
 
-.finance-grid-row:last-child {
-  border-bottom: 0;
+.custom-enterprise-table :deep(.el-table__body-wrapper td) {
+  padding: 12px 0;
+  font-size: 13px;
+  color: #334155;
 }
 
-.order-cell,
-.status-stack,
-.party-cell {
+.order-cell {
   display: flex;
   flex-direction: column;
   gap: 3px;
-  min-width: 0;
 }
 
-.order-no {
-  display: block;
-  max-width: 100%;
-  overflow: hidden;
-  color: #364152;
-  font-weight: 650;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.order-no-link {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: #3b82f6;
+  text-decoration: none;
 }
 
-.cell-muted,
-.status-stack small,
-.party-cell span {
-  color: var(--finance-muted);
+.order-no-link:hover {
+  text-decoration: underline;
+}
+
+.time-sub {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.status-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.status-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.order-status-badge {
   font-size: 12px;
-}
-
-.status-stack > span {
-  color: #364152;
   font-weight: 600;
+  color: #1e293b;
 }
 
-.party-cell span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.settle-desc {
+  font-size: 11.5px;
+  color: #64748b;
 }
 
-.amount-text {
-  display: block;
-  overflow: hidden;
-  color: #344054;
+.offline-desc {
+  font-size: 11px;
+  color: #d97706;
+}
+
+.parties-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.party-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.role-badge {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+.role-badge.renter {
+  background: #eff6ff;
+  color: #3b82f6;
+}
+
+.role-badge.owner {
+  background: #f5f3ff;
+  color: #7c3aed;
+}
+
+.party-info {
   font-size: 12px;
-  font-weight: 650;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color: #334155;
 }
 
-.amount-cell {
-  text-align: right;
+.amount-val {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
 }
 
-.muted-amount {
-  color: #667085;
+.flow-amount {
+  color: #1e293b;
 }
 
-.amount-danger {
-  color: #dc2626;
+.net-amount {
+  color: #0891b2;
+}
+
+.profit-amount {
+  color: #059669;
+  font-size: 13.5px;
+}
+
+.success-val {
+  color: #10b981;
+}
+
+.refund-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.refund-text {
+  font-size: 12px;
+  font-weight: 600;
+  color: #ef4444;
+}
+
+.refunding-text {
+  font-size: 11px;
+  color: #f59e0b;
+}
+
+.zero-text {
+  font-size: 12px;
+  color: #cbd5e1;
+}
+
+.diff-tag {
   font-weight: 700;
 }
 
-@media (max-width: 1440px) {
-  .finance-filter-panel {
-    grid-template-columns: repeat(4, 1fr);
-  }
+.zero-diff {
+  color: #94a3b8;
+}
+
+.action-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12.5px;
+  color: #3b82f6;
+  text-decoration: none;
+  font-weight: 500;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.action-link:hover {
+  background: #eff6ff;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminFinanceDisbursementsView.vue b/frontend/src/features/admin/views/AdminFinanceDisbursementsView.vue
index 8091178..2083413 100644
--- a/frontend/src/features/admin/views/AdminFinanceDisbursementsView.vue
+++ b/frontend/src/features/admin/views/AdminFinanceDisbursementsView.vue
@@ -1,5 +1,20 @@
 <script setup lang="ts">
-import { CircleClose, Plus, Search, UploadFilled, View } from '@element-plus/icons-vue'
+import {
+  Check,
+  CircleClose,
+  Clock,
+  Coin,
+  CreditCard,
+  Document,
+  Money,
+  Plus,
+  Refresh,
+  Search,
+  UploadFilled,
+  View,
+  Wallet,
+  WarningFilled,
+} from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed, onMounted, reactive, ref } from 'vue'
 
@@ -37,6 +52,7 @@ const manualActionID = ref(0)
 const selectedManual = ref<FinanceDisbursementItem | null>(null)
 const summary = ref<FinanceDisbursementListSummary>(emptySummary())
 const canManageManual = computed(() => adminSession.hasPermission('finance:manual_disbursement'))
+
 const manualCategories = [
   { value: 'user_compensation', label: '用户补偿' },
   { value: 'seller_supplement', label: '卖家补款' },
@@ -46,6 +62,7 @@ const manualCategories = [
   { value: 'other', label: '其他' },
   { value: 'custom', label: '自定义分类' },
 ]
+
 const createForm = reactive({
   category: '',
   custom_category_name: '',
@@ -55,6 +72,7 @@ const createForm = reactive({
   remark: '',
   voucher_url: '',
 })
+
 const filters = reactive({
   date_type: 'created',
   start_date: defaultStartDate(),
@@ -249,53 +267,63 @@ function defaultStartDate() {
   return formatInputDate(date)
 }
 
-function money(value: number) {
-  return formatCentWithSymbol(Number(value || 0))
+function money(cents: number | undefined | null) {
+  return formatCentWithSymbol(cents || 0)
 }
 
-function sourceLabel(source: string) {
+function sourceLabel(sourceType: string) {
   const labels: Record<string, string> = {
     platform_managed: '平台代管',
     withdrawal: '用户提现',
-    manual_offline: '其他线下出款',
+    manual_offline: '线下出款',
   }
-  return labels[source] || source
+  return labels[sourceType] || sourceType
 }
 
-function sourceType(source: string) {
-  if (source === 'platform_managed') return 'primary'
-  if (source === 'manual_offline') return 'warning'
-  return 'info'
-}
-
-function statusLabel(status: string) {
-  const labels: Record<string, string> = {
-    review_pending: '待审核',
-    payment_pending: '待打款',
-    paid: '已打款',
-    rejected: '已拒绝',
-    cancelled: '已取消',
-    voided: '已作废',
+function sourceType(sourceType: string) {
+  const types: Record<string, 'primary' | 'success' | 'warning' | 'info' | 'danger'> = {
+    platform_managed: 'primary',
+    withdrawal: 'success',
+    manual_offline: 'warning',
   }
-  return labels[status] || status
+  return types[sourceType] || 'info'
 }
 
 function statusType(status: string) {
-  if (status === 'paid') return 'success'
-  if (status === 'review_pending' || status === 'payment_pending') return 'warning'
-  if (status === 'rejected') return 'danger'
-  if (status === 'voided') return 'danger'
-  return 'info'
+  const types: Record<string, 'primary' | 'success' | 'warning' | 'info' | 'danger'> = {
+    review_pending: 'info',
+    payment_pending: 'warning',
+    paid: 'success',
+    rejected: 'danger',
+    cancelled: 'info',
+    voided: 'danger',
+  }
+  return types[status] || 'info'
 }
 
 function itemStatusLabel(row: FinanceDisbursementItem) {
-  if (row.source_type === 'manual_offline' && row.status === 'paid') return '已出款'
-  return statusLabel(row.status)
+  if (row.source_type === 'withdrawal') {
+    const map: Record<string, string> = {
+      pending: '待审核',
+      processing: '待打款',
+      completed: '已打款',
+      rejected: '已拒绝',
+      cancelled: '已取消',
+    }
+    return map[row.raw_status] || row.status
+  }
+  if (row.source_type === 'platform_managed') {
+    return row.raw_status === 'settled' ? '已打款' : '待打款'
+  }
+  return row.status === 'paid' ? '已记账' : '已作废'
 }
 
-function categoryLabel(category: string, customCategoryName = '') {
-  if (category === 'custom' && customCategoryName) return customCategoryName
-  return manualCategories.find(item => item.value === category)?.label || category || '-'
+function categoryLabel(category?: string, customCategoryName?: string) {
+  if (category === 'custom') {
+    return customCategoryName?.trim() || '自定义分类'
+  }
+  const item = manualCategories.find(c => c.value === category)
+  return item?.label || category || '其他'
 }
 
 function accountTypeLabel(type: string) {
@@ -309,247 +337,361 @@ function accountTypeLabel(type: string) {
 </script>
 
 <template>
-  <section class="page disbursement-page">
-    <div class="page-header-row">
-      <div class="page-header">
-        <p class="eyebrow">Disbursements</p>
-        <h1>资金出款</h1>
-        <p>统一查询平台代管、用户提现和其他线下出款记录。</p>
-      </div>
-      <div class="toolbar-actions">
-        <el-button v-if="canManageManual" type="success" :icon="Plus" @click="openCreate">
-          新增线下出款
-        </el-button>
-        <el-button @click="resetFilters">重置</el-button>
-        <el-button type="primary" :icon="Search" :loading="loading" @click="search">
-          查询
-        </el-button>
-      </div>
-    </div>
+  <div class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><CreditCard /></el-icon>
+            <span>DISBURSEMENTS</span>
+          </div>
+          <h1 class="page-title">资金出款</h1>
+          <p class="page-subtitle">
+            统一查询平台代管出款、用户钱包提现及手工记账的线下出款全生命周期记录。
+          </p>
+        </div>
 
-    <div class="metric-grid disbursement-metrics">
-      <div class="metric-card">
-        <span>筛选记录</span>
-        <strong>{{ summary.record_count }} 笔</strong>
-        <small>当前筛选条件</small>
-      </div>
-      <div class="metric-card paid-metric">
-        <span>已打款</span>
-        <strong>{{ money(summary.paid_amount_cent) }}</strong>
-        <small>{{ summary.paid_count }} 笔实际出款</small>
-      </div>
-      <div class="metric-card pending-metric">
-        <span>待打款</span>
-        <strong>{{ money(summary.payment_pending_amount_cent) }}</strong>
-        <small>{{ summary.payment_pending_count }} 笔已进入打款阶段</small>
-      </div>
-      <div class="metric-card review-metric">
-        <span>提现待审核</span>
-        <strong>{{ money(summary.review_pending_amount_cent) }}</strong>
-        <small>{{ summary.review_pending_count }} 笔待审核</small>
-      </div>
-      <div class="metric-card fee-metric">
-        <span>已完成提现手续费</span>
-        <strong>{{ money(summary.withdrawal_fee_amount_cent) }}</strong>
-        <small>随筛选结果统计</small>
-      </div>
-    </div>
-
-    <el-form class="filter-panel disbursement-filters" label-position="top" @keyup.enter="search">
-      <el-form-item label="日期类型">
-        <el-select v-model="filters.date_type" class="full-control">
-          <el-option label="业务形成日期" value="created" />
-          <el-option label="实际打款日期" value="paid" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="开始日期">
-        <el-date-picker
-          v-model="filters.start_date"
-          class="full-control"
-          type="date"
-          value-format="YYYY-MM-DD"
-        />
-      </el-form-item>
-      <el-form-item label="结束日期">
-        <el-date-picker
-          v-model="filters.end_date"
-          class="full-control"
-          type="date"
-          value-format="YYYY-MM-DD"
-        />
-      </el-form-item>
-      <el-form-item label="出款类型">
-        <el-select
-          v-model="filters.source_type"
-          clearable
-          placeholder="全部类型"
-          class="full-control"
-        >
-          <el-option label="平台代管" value="platform_managed" />
-          <el-option label="用户提现" value="withdrawal" />
-          <el-option label="其他线下出款" value="manual_offline" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="出款状态">
-        <el-select v-model="filters.status" clearable placeholder="全部状态" class="full-control">
-          <el-option label="待审核" value="review_pending" />
-          <el-option label="待打款" value="payment_pending" />
-          <el-option label="已打款" value="paid" />
-          <el-option label="已拒绝" value="rejected" />
-          <el-option label="已取消" value="cancelled" />
-          <el-option label="已作废" value="voided" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="业务单号">
-        <el-input
-          v-model="filters.business_no"
-          clearable
-          placeholder="订单号、提现单号或出款单号"
-        />
-      </el-form-item>
-      <el-form-item label="收款人">
-        <el-input v-model="filters.keyword" clearable placeholder="姓名、手机号或账号" />
-      </el-form-item>
-      <el-form-item label="用户 ID">
-        <el-input v-model="filters.user_id" clearable placeholder="按用户 ID" />
-      </el-form-item>
-    </el-form>
-
-    <el-table v-loading="loading" class="table-panel" :data="items" empty-text="暂无出款记录">
-      <el-table-column label="业务" min-width="205" fixed="left">
-        <template #default="{ row }">
-          <div class="business-cell">
-            <el-tag size="small" :type="sourceType(row.source_type)">
-              {{ sourceLabel(row.source_type) }}
-            </el-tag>
-            <RouterLink
-              v-if="row.order_id"
-              class="business-no"
-              :to="adminPath(`orders/${row.order_id}`)"
-            >
-              {{ row.business_no }}
-            </RouterLink>
-            <strong v-else class="business-no">{{ row.business_no }}</strong>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="收款人" min-width="170">
-        <template #default="{ row }">
-          <div class="stack-cell">
-            <strong>{{ row.payee_name || '-' }}</strong>
-            <small v-if="row.payee_phone">{{ row.payee_phone }}</small>
-            <small v-else-if="row.source_type === 'withdrawal'">用户 ID {{ row.user_id }}</small>
-            <small v-else-if="row.source_type === 'manual_offline'">
-              {{ categoryLabel(row.category, row.custom_category_name) }}
-            </small>
-            <small v-else>联系方式未登记</small>
-            <small v-if="row.uploader_name">上传：{{ row.uploader_name }}</small>
-            <small v-if="row.source_channel">渠道：{{ row.source_channel }}</small>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="出款信息" min-width="205">
-        <template #default="{ row }">
-          <div v-if="row.source_type === 'withdrawal'" class="stack-cell">
-            <span>{{ accountTypeLabel(row.account_type) }} · {{ row.account_name || '-' }}</span>
-            <small>{{ row.account_no || '-' }}</small>
-            <small v-if="row.bank_name">{{ row.bank_name }}</small>
-          </div>
-          <div v-else-if="row.source_type === 'manual_offline'" class="stack-cell">
-            <el-tag size="small" effect="plain">
-              {{ categoryLabel(row.category, row.custom_category_name) }}
-            </el-tag>
-            <small>{{ row.voucher_url ? '已上传付款凭证' : '未上传付款凭证' }}</small>
-          </div>
-          <span v-else class="muted-text">线下约定</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="金额" min-width="155" align="right">
-        <template #default="{ row }">
-          <div class="amount-stack">
-            <strong>{{ money(row.actual_amount_cent) }}</strong>
-            <small v-if="row.source_type === 'withdrawal'">
-              申请 {{ money(row.amount_cent) }} / 手续费 {{ money(row.fee_cent) }}
-            </small>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" width="105" align="center">
-        <template #default="{ row }">
-          <el-tag :type="statusType(row.status)">{{ itemStatusLabel(row) }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="形成时间" min-width="175">
-        <template #default="{ row }">{{ formatDateTime(row.business_created_at) }}</template>
-      </el-table-column>
-      <el-table-column label="打款时间" min-width="175">
-        <template #default="{ row }">{{ formatDateTime(row.paid_at) }}</template>
-      </el-table-column>
-      <el-table-column label="处理人" min-width="120">
-        <template #default="{ row }">{{ row.operator_name || '-' }}</template>
-      </el-table-column>
-      <el-table-column label="备注" min-width="180" show-overflow-tooltip>
-        <template #default="{ row }">{{ row.remark || '-' }}</template>
-      </el-table-column>
-      <el-table-column label="操作" width="155" fixed="right">
-        <template #default="{ row }">
+        <div class="toolbar-actions">
           <el-button
-            v-if="row.withdrawal_id && adminSession.hasPermission('withdrawal:detail')"
-            link
+            v-if="canManageManual"
             type="primary"
-            :icon="View"
-            :loading="detailLoading"
-            @click="openWithdrawalDetail(row)"
+            :icon="Plus"
+            class="action-btn-primary"
+            @click="openCreate"
           >
-            详情
+            新增线下出款
           </el-button>
-          <RouterLink v-else-if="row.order_id" :to="adminPath(`orders/${row.order_id}`)">
-            <el-button link type="primary" :icon="View">详情</el-button>
-          </RouterLink>
-          <template v-else-if="row.source_type === 'manual_offline'">
-            <el-button link type="primary" :icon="View" @click="openManualDetail(row)">
-              详情
-            </el-button>
-            <el-button
-              v-if="row.status === 'paid' && canManageManual"
-              link
-              type="danger"
-              :icon="CircleClose"
-              :loading="manualActionID === row.source_id"
-              @click="handleVoidManual(row)"
-            >
-              作废
-            </el-button>
-          </template>
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-    </el-table>
+          <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
+          <el-button type="primary" :icon="Search" :loading="loading" @click="search">
+            查询
+          </el-button>
+        </div>
+      </div>
+    </header>
 
-    <AdminTablePagination
-      v-if="total > 0"
-      v-model:current-page="currentPage"
-      v-model:page-size="currentPageSize"
-      :total="total"
-      :loading="loading"
-      @page-change="loadItems"
-    />
+    <!-- 汇总核心指标卡片 -->
+    <section class="summary-metric-grid">
+      <div class="metric-card metric-card--paid">
+        <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">{{ money(summary.paid_amount_cent) }}</strong>
+          <span class="metric-sub-pill success">{{ summary.paid_count }} 笔已完成</span>
+        </div>
+      </div>
 
-    <WithdrawalDetailDialog
-      v-model="showWithdrawalDetail"
-      :withdrawal="selectedWithdrawal"
-      @saved="onWithdrawalSaved"
-    />
+      <div class="metric-card metric-card--pending">
+        <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">{{
+            money(summary.payment_pending_amount_cent)
+          }}</strong>
+          <span class="metric-sub-pill warning">{{ summary.payment_pending_count }} 笔待打款</span>
+        </div>
+      </div>
 
+      <div class="metric-card metric-card--review">
+        <div class="metric-icon-wrap indigo">
+          <el-icon><Document /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">提现待初审</span>
+          <strong class="metric-val indigo-val">{{
+            money(summary.review_pending_amount_cent)
+          }}</strong>
+          <span class="metric-sub-pill info">{{ summary.review_pending_count }} 笔待审核</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--fee">
+        <div class="metric-icon-wrap teal">
+          <el-icon><Coin /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">已核销提现手续费</span>
+          <strong class="metric-val teal-val">{{
+            money(summary.withdrawal_fee_amount_cent)
+          }}</strong>
+          <span class="metric-sub-text">随筛选区间统计</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--total">
+        <div class="metric-icon-wrap slate">
+          <el-icon><Wallet /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">当前筛选总计</span>
+          <strong class="metric-val">{{ summary.record_count }} 笔</strong>
+          <span class="metric-sub-text">符合条件的记录</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 筛选面板 -->
+    <section class="section-card filter-card">
+      <el-form class="filter-grid" label-position="top" @keyup.enter="search">
+        <el-form-item label="日期口径">
+          <el-select v-model="filters.date_type" class="full-control">
+            <el-option label="业务形成日期" value="created" />
+            <el-option label="实际打款日期" value="paid" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="开始日期">
+          <el-date-picker
+            v-model="filters.start_date"
+            class="full-control"
+            type="date"
+            value-format="YYYY-MM-DD"
+            :clearable="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="结束日期">
+          <el-date-picker
+            v-model="filters.end_date"
+            class="full-control"
+            type="date"
+            value-format="YYYY-MM-DD"
+            :clearable="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="出款类型">
+          <el-select
+            v-model="filters.source_type"
+            clearable
+            placeholder="全部类型"
+            class="full-control"
+          >
+            <el-option label="平台代管" value="platform_managed" />
+            <el-option label="用户提现" value="withdrawal" />
+            <el-option label="其他线下出款" value="manual_offline" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="出款状态">
+          <el-select v-model="filters.status" clearable placeholder="全部状态" class="full-control">
+            <el-option label="待审核" value="review_pending" />
+            <el-option label="待打款" value="payment_pending" />
+            <el-option label="已打款" value="paid" />
+            <el-option label="已拒绝" value="rejected" />
+            <el-option label="已取消" value="cancelled" />
+            <el-option label="已作废" value="voided" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="业务单号">
+          <el-input
+            v-model="filters.business_no"
+            clearable
+            placeholder="订单号/提现单号/出款单号"
+          />
+        </el-form-item>
+
+        <el-form-item label="收款人 / 关键词">
+          <el-input v-model="filters.keyword" clearable placeholder="姓名、手机号或账号" />
+        </el-form-item>
+
+        <el-form-item label="用户 ID">
+          <el-input v-model="filters.user_id" clearable placeholder="按用户 ID 检索" />
+        </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"><Money /></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="210" fixed="left">
+            <template #default="{ row }">
+              <div class="business-cell">
+                <el-tag size="small" :type="sourceType(row.source_type)" class="source-tag">
+                  {{ sourceLabel(row.source_type) }}
+                </el-tag>
+                <RouterLink
+                  v-if="row.order_id"
+                  class="business-no link-no"
+                  :to="adminPath(`orders/${row.order_id}`)"
+                >
+                  {{ row.business_no }}
+                </RouterLink>
+                <strong v-else class="business-no">{{ row.business_no }}</strong>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="收款人 / 渠道" min-width="180">
+            <template #default="{ row }">
+              <div class="stack-cell">
+                <span class="payee-name">{{ row.payee_name || '-' }}</span>
+                <small v-if="row.payee_phone" class="phone-text">{{ row.payee_phone }}</small>
+                <small v-else-if="row.source_type === 'withdrawal'" class="muted-note">
+                  用户 ID: {{ row.user_id }}
+                </small>
+                <small v-else-if="row.source_type === 'manual_offline'" class="muted-note">
+                  {{ categoryLabel(row.category, row.custom_category_name) }}
+                </small>
+                <small v-if="row.uploader_name" class="channel-note"
+                  >上传：{{ row.uploader_name }}</small
+                >
+                <small v-if="row.source_channel" class="channel-note"
+                  >渠道：{{ row.source_channel }}</small
+                >
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="出款账户信息" min-width="210">
+            <template #default="{ row }">
+              <div v-if="row.source_type === 'withdrawal'" class="stack-cell">
+                <span class="account-line">
+                  <span class="account-type-badge">{{ accountTypeLabel(row.account_type) }}</span>
+                  {{ row.account_name || '-' }}
+                </span>
+                <small class="account-num">{{ row.account_no || '-' }}</small>
+                <small v-if="row.bank_name" class="bank-name">{{ row.bank_name }}</small>
+              </div>
+              <div v-else-if="row.source_type === 'manual_offline'" class="stack-cell">
+                <el-tag size="small" effect="plain" class="category-tag">
+                  {{ categoryLabel(row.category, row.custom_category_name) }}
+                </el-tag>
+                <small :class="row.voucher_url ? 'voucher-uploaded' : 'voucher-missing'">
+                  {{ row.voucher_url ? '✓ 已上传付款凭证' : '未附凭证' }}
+                </small>
+              </div>
+              <span v-else class="muted-text">平台代管线下结算</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="实际出款金额" min-width="160" align="right">
+            <template #default="{ row }">
+              <div class="amount-stack">
+                <strong class="actual-amount">{{ money(row.actual_amount_cent) }}</strong>
+                <small v-if="row.source_type === 'withdrawal'" class="fee-detail">
+                  提现 {{ money(row.amount_cent) }} (扣费 {{ money(row.fee_cent) }})
+                </small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="状态" width="110" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType(row.status)" class="status-pill">
+                {{ itemStatusLabel(row) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="业务形成时间" min-width="165">
+            <template #default="{ row }">
+              <span class="time-cell">{{ formatDateTime(row.business_created_at) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="实际打款时间" min-width="165">
+            <template #default="{ row }">
+              <span class="time-cell" :class="{ 'empty-time': !row.paid_at }">
+                {{ formatDateTime(row.paid_at) }}
+              </span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作人" min-width="110">
+            <template #default="{ row }">
+              <span class="operator-name">{{ row.operator_name || '-' }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="备注" min-width="160" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span class="remark-text">{{ row.remark || '-' }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="150" fixed="right" align="center">
+            <template #default="{ row }">
+              <div class="action-cell">
+                <el-button
+                  v-if="row.withdrawal_id && adminSession.hasPermission('withdrawal:detail')"
+                  link
+                  type="primary"
+                  :icon="View"
+                  @click="openWithdrawalDetail(row)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-if="row.source_type === 'manual_offline'"
+                  link
+                  type="primary"
+                  :icon="View"
+                  @click="openManualDetail(row)"
+                >
+                  查看
+                </el-button>
+                <el-button
+                  v-if="
+                    row.source_type === 'manual_offline' && row.status === 'paid' && canManageManual
+                  "
+                  link
+                  type="danger"
+                  :icon="CircleClose"
+                  :loading="manualActionID === row.source_id"
+                  @click="handleVoidManual(row)"
+                >
+                  作废
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <AdminTablePagination
+        v-model:current-page="currentPage"
+        v-model:page-size="currentPageSize"
+        :total="total"
+        @change="loadItems"
+      />
+    </section>
+
+    <!-- 新增线下出款抽屉 / 弹窗 -->
     <el-dialog
       v-model="createVisible"
-      title="新增其他线下出款"
+      title="新增线下出款记账"
       width="560px"
-      :close-on-click-modal="false"
+      destroy-on-close
+      class="custom-modal"
     >
-      <el-form class="manual-form" label-position="top" @submit.prevent="submitManualDisbursement">
+      <el-form label-position="top" class="modal-form">
         <el-form-item label="出款分类" required>
-          <el-select v-model="createForm.category" class="full-control" placeholder="请选择分类">
+          <el-select
+            v-model="createForm.category"
+            placeholder="请选择出款类别"
+            class="full-control"
+          >
             <el-option
               v-for="item in manualCategories"
               :key="item.value"
@@ -558,266 +700,699 @@ function accountTypeLabel(type: string) {
             />
           </el-select>
         </el-form-item>
+
         <el-form-item v-if="createForm.category === 'custom'" label="自定义分类名称" required>
           <el-input
             v-model="createForm.custom_category_name"
+            placeholder="请输入分类名称（不超过 50 字）"
             maxlength="50"
             show-word-limit
-            placeholder="请输入分类名称"
           />
         </el-form-item>
-        <el-form-item label="收款人" required>
-          <el-input v-model="createForm.payee_name" maxlength="100" placeholder="姓名或单位名称" />
+
+        <el-form-item label="收款人姓名 / 单位" required>
+          <el-input v-model="createForm.payee_name" placeholder="请输入实际收款方姓名或单位" />
         </el-form-item>
-        <el-form-item label="出款金额" required>
+
+        <el-form-item label="出款金额（元）" required>
           <el-input-number
             v-model="createForm.amount_yuan"
-            class="full-control"
             :min="0.01"
             :precision="2"
-            :step="100"
-            controls-position="right"
+            :step="10"
+            class="full-control"
           />
         </el-form-item>
-        <el-form-item label="出款时间" required>
+
+        <el-form-item label="打款时间" required>
           <el-date-picker
             v-model="createForm.paid_at"
-            class="full-control"
             type="datetime"
-            placeholder="选择出款时间"
+            placeholder="选择打款时间"
+            class="full-control"
           />
         </el-form-item>
-        <el-form-item class="manual-form-wide" label="备注" required>
+
+        <el-form-item label="出款用途 / 详细备注" required>
           <el-input
             v-model="createForm.remark"
             type="textarea"
             :rows="3"
             maxlength="500"
             show-word-limit
-            placeholder="填写出款用途"
+            placeholder="详细记录出款原因与对账依据"
           />
         </el-form-item>
-        <el-form-item class="manual-form-wide" label="付款凭证（选填）">
-          <div v-if="createForm.voucher_url" class="voucher-preview">
-            <AuthImage
-              :source="createForm.voucher_url"
-              :admin="true"
-              fit="cover"
-              :preview-src-list="[createForm.voucher_url]"
-              :image-style="{ width: '104px', height: '104px', borderRadius: '6px' }"
-            />
-            <el-button
-              class="voucher-remove"
-              circle
-              plain
-              type="danger"
-              :icon="CircleClose"
-              title="移除凭证"
-              @click="createForm.voucher_url = ''"
-            />
+
+        <el-form-item label="打款凭证截图（可选）">
+          <div class="voucher-upload-box">
+            <el-upload
+              action="#"
+              :http-request="uploadVoucher"
+              :show-file-list="false"
+              accept="image/*"
+            >
+              <el-button :loading="voucherUploading" :icon="UploadFilled">
+                {{ createForm.voucher_url ? '重新上传凭证' : '上传支付凭证' }}
+              </el-button>
+            </el-upload>
+            <div v-if="createForm.voucher_url" class="voucher-preview-wrap">
+              <AuthImage
+                :source="createForm.voucher_url"
+                alt="凭证预览"
+                class="voucher-img-preview"
+              />
+            </div>
           </div>
-          <el-upload
-            v-else
-            :show-file-list="false"
-            :http-request="uploadVoucher"
-            accept="image/jpeg,image/png,image/webp"
-          >
-            <el-button :icon="UploadFilled" :loading="voucherUploading">上传凭证</el-button>
-          </el-upload>
         </el-form-item>
       </el-form>
+
       <template #footer>
-        <el-button :disabled="createSaving" @click="createVisible = false">取消</el-button>
-        <el-button
-          type="primary"
-          :loading="createSaving"
-          :disabled="voucherUploading"
-          @click="submitManualDisbursement"
-        >
-          确认记账
-        </el-button>
+        <div class="modal-footer">
+          <el-button @click="createVisible = false">取消</el-button>
+          <el-button type="primary" :loading="createSaving" @click="submitManualDisbursement">
+            确认记账
+          </el-button>
+        </div>
       </template>
     </el-dialog>
 
+    <!-- 线下出款详情弹窗 -->
     <el-dialog
       :model-value="!!selectedManual"
-      title="其他线下出款详情"
-      width="620px"
-      @update:model-value="selectedManual = null"
+      title="线下出款详情"
+      width="540px"
+      @update:model-value="(val: boolean) => (!val ? (selectedManual = null) : null)"
     >
-      <el-descriptions v-if="selectedManual" :column="2" border>
-        <el-descriptions-item label="出款单号">{{
-          selectedManual.business_no
-        }}</el-descriptions-item>
-        <el-descriptions-item label="状态">
+      <div v-if="selectedManual" class="detail-content-wrap">
+        <div class="detail-row">
+          <span class="detail-label">出款单号</span>
+          <span class="detail-val font-mono">{{ selectedManual.business_no }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">分类</span>
+          <span class="detail-val">{{
+            categoryLabel(selectedManual.category, selectedManual.custom_category_name)
+          }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">收款人</span>
+          <span class="detail-val">{{ selectedManual.payee_name }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">出款金额</span>
+          <span class="detail-val text-primary font-bold text-lg">
+            {{ money(selectedManual.amount_cent) }}
+          </span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">状态</span>
           <el-tag :type="statusType(selectedManual.status)">
             {{ itemStatusLabel(selectedManual) }}
           </el-tag>
-        </el-descriptions-item>
-        <el-descriptions-item label="出款分类">
-          {{ categoryLabel(selectedManual.category, selectedManual.custom_category_name) }}
-        </el-descriptions-item>
-        <el-descriptions-item label="收款人">{{ selectedManual.payee_name }}</el-descriptions-item>
-        <el-descriptions-item label="出款金额">
-          <strong>{{ money(selectedManual.actual_amount_cent) }}</strong>
-        </el-descriptions-item>
-        <el-descriptions-item label="出款时间">
-          {{ formatDateTime(selectedManual.paid_at) }}
-        </el-descriptions-item>
-        <el-descriptions-item label="录入人">
-          {{ selectedManual.operator_name || '-' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="录入时间">
-          {{ formatDateTime(selectedManual.business_created_at) }}
-        </el-descriptions-item>
-        <el-descriptions-item label="备注" :span="2">
-          {{ selectedManual.remark || '-' }}
-        </el-descriptions-item>
-        <el-descriptions-item v-if="selectedManual.voucher_url" label="付款凭证" :span="2">
-          <AuthImage
-            :source="selectedManual.voucher_url"
-            :admin="true"
-            fit="cover"
-            :preview-src-list="[selectedManual.voucher_url]"
-            :image-style="{ width: '140px', height: '140px', borderRadius: '6px' }"
-          />
-        </el-descriptions-item>
-        <el-descriptions-item v-if="selectedManual.status === 'voided'" label="作废信息" :span="2">
-          {{ selectedManual.voided_by_name || '-' }} ·
-          {{ formatDateTime(selectedManual.voided_at) }} ·
-          {{ selectedManual.void_reason || '-' }}
-        </el-descriptions-item>
-      </el-descriptions>
-      <template #footer>
-        <el-button @click="selectedManual = null">关闭</el-button>
-        <el-button
-          v-if="selectedManual?.status === 'paid' && canManageManual"
-          type="danger"
-          :icon="CircleClose"
-          :loading="manualActionID === selectedManual.source_id"
-          @click="handleVoidManual(selectedManual)"
-        >
-          作废记录
-        </el-button>
-      </template>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">打款时间</span>
+          <span class="detail-val">{{ formatDateTime(selectedManual.paid_at) }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">录入人</span>
+          <span class="detail-val">{{ selectedManual.operator_name || '-' }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">用途备注</span>
+          <span class="detail-val">{{ selectedManual.remark || '-' }}</span>
+        </div>
+        <div v-if="selectedManual.voucher_url" class="detail-row column-row">
+          <span class="detail-label">打款凭证</span>
+          <div class="detail-img-container">
+            <AuthImage :source="selectedManual.voucher_url" alt="凭证" class="detail-voucher-img" />
+          </div>
+        </div>
+        <div v-if="selectedManual.status === 'voided'" class="void-info-box">
+          <div class="void-title">
+            <el-icon><WarningFilled /></el-icon>
+            <span>作废信息</span>
+          </div>
+          <p>作废时间：{{ formatDateTime(selectedManual.voided_at) }}</p>
+          <p>作废人：{{ selectedManual.voided_by_name || '-' }}</p>
+          <p>作废原因：{{ selectedManual.void_reason || '-' }}</p>
+        </div>
+      </div>
     </el-dialog>
-  </section>
+
+    <WithdrawalDetailDialog
+      v-model="showWithdrawalDetail"
+      :withdrawal="selectedWithdrawal"
+      @saved="onWithdrawalSaved"
+    />
+  </div>
 </template>
 
 <style scoped>
-.disbursement-metrics {
-  grid-template-columns: repeat(5, minmax(170px, 1fr));
-  gap: 12px;
-  margin-bottom: 16px;
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
 }
 
-.paid-metric {
-  border-left: 3px solid #0f766e;
+/* ================= 头部卡片 ================= */
+.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);
 }
 
-.pending-metric {
-  border-left: 3px solid #d97706;
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
 }
 
-.review-metric {
-  border-left: 3px solid #64748b;
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.fee-metric {
-  border-left: 3px solid #2563eb;
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #4f46e5;
+  background: #eef2ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
 }
 
-.disbursement-filters {
-  grid-template-columns: repeat(8, minmax(110px, 1fr));
+.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;
-  margin-bottom: 16px;
-  padding: 14px 16px;
 }
 
-.business-cell,
-.stack-cell,
-.amount-stack {
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 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--paid::before {
+  background: linear-gradient(90deg, #10b981, #34d399);
+}
+
+.metric-card--pending::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.metric-card--review::before {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+.metric-card--fee::before {
+  background: linear-gradient(90deg, #06b6d4, #22d3ee);
+}
+
+.metric-card--total::before {
+  background: linear-gradient(90deg, #64748b, #94a3b8);
+}
+
+.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.emerald {
+  background: #ecfdf5;
+  color: #10b981;
+}
+
+.metric-icon-wrap.amber {
+  background: #fffbeb;
+  color: #f59e0b;
+}
+
+.metric-icon-wrap.indigo {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.metric-icon-wrap.teal {
+  background: #ecfeff;
+  color: #06b6d4;
+}
+
+.metric-icon-wrap.slate {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.metric-info {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  min-width: 0;
+}
+
+.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;
+}
+
+.emerald-val {
+  color: #059669;
+}
+
+.amber-val {
+  color: #d97706;
+}
+
+.indigo-val {
+  color: #4f46e5;
+}
+
+.teal-val {
+  color: #0891b2;
+}
+
+.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.success {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.metric-sub-pill.warning {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.metric-sub-pill.info {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.metric-sub-text {
+  font-size: 11.5px;
+  color: #94a3b8;
+}
+
+/* ================= 筛选面板 ================= */
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  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;
+}
+
+.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;
 }
 
 .business-cell {
-  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.source-tag {
+  width: fit-content;
+  font-weight: 600;
+  font-size: 11px;
 }
 
 .business-no {
-  overflow: hidden;
-  max-width: 100%;
-  color: #344054;
-  font-size: 13px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.stack-cell strong,
-.stack-cell span,
-.amount-stack strong {
-  color: #344054;
-}
-
-.stack-cell small,
-.amount-stack small,
-.muted-text {
-  color: #7f8aa3;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-size: 12px;
+  color: #1e293b;
+}
+
+.link-no {
+  color: #3b82f6;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.link-no:hover {
+  text-decoration: underline;
+}
+
+.stack-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  line-height: 1.35;
+}
+
+.payee-name {
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.phone-text {
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.muted-note {
+  font-size: 11.5px;
+  color: #94a3b8;
+}
+
+.channel-note {
+  font-size: 11px;
+  color: #64748b;
+}
+
+.account-line {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
+  font-size: 12.5px;
+}
+
+.account-type-badge {
+  font-size: 10.5px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.account-num {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.bank-name {
+  font-size: 11.5px;
+  color: #94a3b8;
+}
+
+.category-tag {
+  width: fit-content;
+  margin-bottom: 2px;
+}
+
+.voucher-uploaded {
+  font-size: 11px;
+  color: #10b981;
+}
+
+.voucher-missing {
+  font-size: 11px;
+  color: #94a3b8;
 }
 
 .amount-stack {
+  display: flex;
+  flex-direction: column;
   align-items: flex-end;
+  gap: 2px;
 }
 
-.amount-stack strong {
-  font-size: 14px;
+.actual-amount {
+  font-size: 14.5px;
+  font-weight: 700;
+  color: #0f172a;
 }
 
-.manual-form {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0 16px;
+.fee-detail {
+  font-size: 11px;
+  color: #94a3b8;
 }
 
-.manual-form-wide {
-  grid-column: 1 / -1;
+.status-pill {
+  font-weight: 600;
 }
 
-.voucher-preview {
-  position: relative;
-  width: 104px;
-  height: 104px;
+.time-cell {
+  font-size: 12px;
+  color: #475569;
 }
 
-.voucher-remove {
-  position: absolute;
-  top: -10px;
-  right: -10px;
+.empty-time {
+  color: #cbd5e1;
 }
 
-@media (max-width: 1440px) {
-  .disbursement-metrics {
-    grid-template-columns: repeat(3, minmax(170px, 1fr));
-  }
-
-  .disbursement-filters {
-    grid-template-columns: repeat(4, minmax(130px, 1fr));
-  }
+.operator-name {
+  font-size: 12.5px;
+  color: #475569;
 }
 
-@media (max-width: 760px) {
-  .disbursement-metrics,
-  .disbursement-filters,
-  .manual-form {
-    grid-template-columns: 1fr;
-  }
+.remark-text {
+  font-size: 12px;
+  color: #64748b;
+}
 
-  .manual-form-wide {
-    grid-column: 1;
-  }
+.action-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+/* ================= 弹窗样式 ================= */
+.voucher-upload-box {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.voucher-preview-wrap {
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.voucher-img-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.detail-content-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 4px 0;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13.5px;
+  border-bottom: 1px dashed #f1f5f9;
+  padding-bottom: 8px;
+}
+
+.detail-row.column-row {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.detail-label {
+  color: #64748b;
+}
+
+.detail-val {
+  color: #0f172a;
+}
+
+.detail-img-container {
+  max-width: 100%;
+  max-height: 240px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.detail-voucher-img {
+  max-width: 100%;
+  max-height: 240px;
+  object-fit: contain;
+}
+
+.void-info-box {
+  background: #fef2f2;
+  border-radius: 8px;
+  padding: 12px 14px;
+  border: 1px solid #fee2e2;
+  color: #b91c1c;
+  font-size: 12.5px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.void-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 700;
+  margin-bottom: 2px;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminOperatingExpensesView.vue b/frontend/src/features/admin/views/AdminOperatingExpensesView.vue
index d5f17a5..675094a 100644
--- a/frontend/src/features/admin/views/AdminOperatingExpensesView.vue
+++ b/frontend/src/features/admin/views/AdminOperatingExpensesView.vue
@@ -1,5 +1,16 @@
 <script setup lang="ts">
-import { CircleClose, Plus, Search, UploadFilled, View } from '@element-plus/icons-vue'
+import {
+  CircleClose,
+  Money,
+  Plus,
+  Refresh,
+  Search,
+  Tickets,
+  UploadFilled,
+  View,
+  Wallet,
+  WarningFilled,
+} from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed, onMounted, reactive, ref } from 'vue'
 
@@ -31,6 +42,7 @@ const currentPage = ref(1)
 const currentPageSize = ref(20)
 const summary = ref<OperatingExpenseListSummary>(emptySummary())
 const canManage = computed(() => adminSession.hasPermission('finance:operating_expense'))
+
 const filters = reactive({
   date_type: 'created' as 'created' | 'occurred',
   start_date: defaultStartDate(),
@@ -39,6 +51,7 @@ const filters = reactive({
   category: '',
   keyword: '',
 })
+
 const createForm = reactive({
   category: '',
   payee_name: '',
@@ -183,7 +196,7 @@ function defaultStartDate() {
   return formatInputDate(date)
 }
 
-function money(value: number) {
+function money(value: number | undefined | null) {
   return formatCentWithSymbol(Number(value || 0))
 }
 
@@ -191,330 +204,759 @@ function statusLabel(status: string) {
   return status === 'paid' ? '已记账' : '已作废'
 }
 
-function statusType(status: string) {
+function statusType(status: string): 'success' | 'danger' {
   return status === 'paid' ? 'success' : 'danger'
 }
 </script>
 
 <template>
-  <section class="page operating-expenses-page">
-    <div class="page-header-row">
-      <div class="page-header">
-        <p class="eyebrow">Operating Expenses</p>
-        <h1>运营开支</h1>
-        <p>独立记录日常运营费用，并在财务仪表盘按发生日期汇总。</p>
-      </div>
-      <div class="toolbar-actions">
-        <el-button v-if="canManage" type="success" :icon="Plus" @click="openCreate">
-          新增运营开支
-        </el-button>
-        <el-button @click="resetFilters">重置</el-button>
-        <el-button type="primary" :icon="Search" :loading="loading" @click="search">查询</el-button>
-      </div>
-    </div>
+  <div class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><Tickets /></el-icon>
+            <span>OPERATING EXPENSES</span>
+          </div>
+          <h1 class="page-title">运营开支</h1>
+          <p class="page-subtitle">独立记录日常运营支出费用，并在财务总览中按发生日期汇总统计。</p>
+        </div>
 
-    <div class="metric-grid operating-metrics">
-      <div class="metric-card">
-        <span>筛选记录</span>
-        <strong>{{ summary.record_count }} 笔</strong>
-        <small>当前筛选条件</small>
-      </div>
-      <div class="metric-card operating-metric">
-        <span>有效运营开支</span>
-        <strong>{{ money(summary.paid_amount_cent) }}</strong>
-        <small>{{ summary.paid_count }} 笔已记账开支</small>
-      </div>
-    </div>
-
-    <el-form class="table-panel operating-filters" label-position="top">
-      <el-form-item label="日期类型">
-        <el-select v-model="filters.date_type" class="full-control">
-          <el-option label="录入日期" value="created" />
-          <el-option label="开支日期" value="occurred" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="开始日期">
-        <el-date-picker
-          v-model="filters.start_date"
-          class="full-control"
-          type="date"
-          value-format="YYYY-MM-DD"
-        />
-      </el-form-item>
-      <el-form-item label="结束日期">
-        <el-date-picker
-          v-model="filters.end_date"
-          class="full-control"
-          type="date"
-          value-format="YYYY-MM-DD"
-        />
-      </el-form-item>
-      <el-form-item label="状态">
-        <el-select v-model="filters.status" clearable placeholder="全部状态" class="full-control">
-          <el-option label="已记账" value="paid" />
-          <el-option label="已作废" value="voided" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="开支类别">
-        <el-input v-model="filters.category" clearable placeholder="按类别精确筛选" />
-      </el-form-item>
-      <el-form-item label="关键词">
-        <el-input
-          v-model="filters.keyword"
-          clearable
-          placeholder="单号、收款方或用途"
-          @keyup.enter="search"
-        />
-      </el-form-item>
-    </el-form>
-
-    <el-table v-loading="loading" class="table-panel" :data="items">
-      <el-table-column label="开支单号" min-width="190">
-        <template #default="{ row }">{{ row.expense_no }}</template>
-      </el-table-column>
-      <el-table-column prop="category" label="开支类别" min-width="130" />
-      <el-table-column label="收款方" min-width="150">
-        <template #default="{ row }">
-          <strong>{{ row.payee_name }}</strong>
-        </template>
-      </el-table-column>
-      <el-table-column label="开支金额" min-width="135" align="right">
-        <template #default="{ row }"
-          ><strong>{{ money(row.amount_cent) }}</strong></template
-        >
-      </el-table-column>
-      <el-table-column label="开支时间" min-width="175">
-        <template #default="{ row }">{{ formatDateTime(row.occurred_at) }}</template>
-      </el-table-column>
-      <el-table-column label="状态" width="105" align="center">
-        <template #default="{ row }"
-          ><el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag></template
-        >
-      </el-table-column>
-      <el-table-column label="录入人" min-width="120">
-        <template #default="{ row }">{{ row.created_by_name || '-' }}</template>
-      </el-table-column>
-      <el-table-column label="备注" min-width="180" show-overflow-tooltip>
-        <template #default="{ row }">{{ row.remark }}</template>
-      </el-table-column>
-      <el-table-column label="操作" width="145" fixed="right">
-        <template #default="{ row }">
-          <el-button link type="primary" :icon="View" @click="selectedExpense = row"
-            >详情</el-button
-          >
+        <div class="toolbar-actions">
           <el-button
-            v-if="row.status === 'paid' && canManage"
-            link
-            type="danger"
-            :icon="CircleClose"
-            :loading="actionID === row.id"
-            @click="handleVoid(row)"
+            v-if="canManage"
+            type="primary"
+            :icon="Plus"
+            class="action-btn-primary"
+            @click="openCreate"
           >
-            作废
+            新增运营开支
           </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+          <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
+          <el-button type="primary" :icon="Search" :loading="loading" @click="search">
+            查询
+          </el-button>
+        </div>
+      </div>
+    </header>
 
-    <AdminTablePagination
-      v-if="total > 0"
-      v-model:current-page="currentPage"
-      v-model:page-size="currentPageSize"
-      :total="total"
-      :loading="loading"
-      @page-change="loadItems"
-    />
+    <!-- 汇总指标卡片 -->
+    <section class="summary-metric-grid">
+      <div class="metric-card metric-card--paid">
+        <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">{{ money(summary.paid_amount_cent) }}</strong>
+          <span class="metric-sub-pill warning">{{ summary.paid_count }} 笔有效记账</span>
+        </div>
+      </div>
 
+      <div class="metric-card metric-card--total">
+        <div class="metric-icon-wrap slate">
+          <el-icon><Wallet /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">当前筛选总计</span>
+          <strong class="metric-val">{{ summary.record_count }} 笔</strong>
+          <span class="metric-sub-text">包含作废与有效记录</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 筛选卡片 -->
+    <section class="section-card filter-card">
+      <el-form class="filter-grid" label-position="top" @keyup.enter="search">
+        <el-form-item label="日期类型">
+          <el-select v-model="filters.date_type" class="full-control">
+            <el-option label="录入日期" value="created" />
+            <el-option label="实际开支日期" value="occurred" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="开始日期">
+          <el-date-picker
+            v-model="filters.start_date"
+            class="full-control"
+            type="date"
+            value-format="YYYY-MM-DD"
+            :clearable="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="结束日期">
+          <el-date-picker
+            v-model="filters.end_date"
+            class="full-control"
+            type="date"
+            value-format="YYYY-MM-DD"
+            :clearable="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="状态">
+          <el-select v-model="filters.status" clearable placeholder="全部状态" class="full-control">
+            <el-option label="已记账" value="paid" />
+            <el-option label="已作废" value="voided" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="开支类别">
+          <el-input v-model="filters.category" clearable placeholder="按类别精确筛选" />
+        </el-form-item>
+
+        <el-form-item label="关键词检索">
+          <el-input v-model="filters.keyword" clearable placeholder="单号、收款方或用途" />
+        </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="mono-code">{{ row.expense_no }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="开支类别" min-width="130">
+            <template #default="{ row }">
+              <el-tag size="small" effect="plain" class="category-tag">{{ row.category }}</el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="收款方" min-width="150">
+            <template #default="{ row }">
+              <strong class="payee-name">{{ row.payee_name }}</strong>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="开支金额" min-width="140" align="right">
+            <template #default="{ row }">
+              <span class="amount-val orange-val">{{ money(row.amount_cent) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="实际开支时间" min-width="165">
+            <template #default="{ row }">
+              <span class="time-cell">{{ formatDateTime(row.occurred_at) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="状态" width="105" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="录入管理员" min-width="120">
+            <template #default="{ row }">
+              <span class="operator-name">{{ row.created_by_name || '-' }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="开支备注" min-width="180" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span class="remark-text">{{ row.remark }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="140" fixed="right" align="center">
+            <template #default="{ row }">
+              <div class="action-cell">
+                <el-button link type="primary" :icon="View" @click="selectedExpense = row">
+                  详情
+                </el-button>
+                <el-button
+                  v-if="row.status === 'paid' && canManage"
+                  link
+                  type="danger"
+                  :icon="CircleClose"
+                  :loading="actionID === row.id"
+                  @click="handleVoid(row)"
+                >
+                  作废
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <AdminTablePagination
+        v-model:current-page="currentPage"
+        v-model:page-size="currentPageSize"
+        :total="total"
+        @change="loadItems"
+      />
+    </section>
+
+    <!-- 新增开支弹窗 -->
     <el-dialog
       v-model="createVisible"
-      title="新增运营开支"
-      width="560px"
-      :close-on-click-modal="false"
+      title="新增运营开支记账"
+      width="540px"
+      destroy-on-close
+      class="custom-modal"
     >
-      <el-form class="expense-form" label-position="top" @submit.prevent="submitExpense">
+      <el-form label-position="top" class="modal-form">
         <el-form-item label="开支类别" required>
           <el-input
             v-model="createForm.category"
-            maxlength="50"
-            placeholder="例如：推广投放、办公采购"
+            placeholder="例如：服务器宽带、日常采购、软件授权"
           />
         </el-form-item>
-        <el-form-item label="收款方" required>
-          <el-input v-model="createForm.payee_name" maxlength="100" placeholder="姓名或单位名称" />
+
+        <el-form-item label="收款方姓名 / 单位" required>
+          <el-input v-model="createForm.payee_name" placeholder="请输入实际收款方或单位名称" />
         </el-form-item>
-        <el-form-item label="开支金额" required>
+
+        <el-form-item label="开支金额（元）" required>
           <el-input-number
             v-model="createForm.amount_yuan"
-            class="full-control"
             :min="0.01"
             :precision="2"
-            :step="100"
-            controls-position="right"
+            :step="10"
+            class="full-control"
           />
         </el-form-item>
-        <el-form-item label="开支时间" required>
+
+        <el-form-item label="开支发生时间" required>
           <el-date-picker
             v-model="createForm.occurred_at"
-            class="full-control"
             type="datetime"
-            placeholder="选择开支时间"
+            placeholder="选择实际支付发生时间"
+            class="full-control"
           />
         </el-form-item>
-        <el-form-item class="expense-form-wide" label="开支用途" required>
+
+        <el-form-item label="开支用途 / 详细备注" required>
           <el-input
             v-model="createForm.remark"
             type="textarea"
             :rows="3"
             maxlength="500"
             show-word-limit
-            placeholder="填写开支用途"
+            placeholder="详细记录运营开支用途"
           />
         </el-form-item>
-        <el-form-item class="expense-form-wide" label="开支凭证（选填）">
-          <div v-if="createForm.voucher_url" class="voucher-preview">
-            <AuthImage
-              :source="createForm.voucher_url"
-              :admin="true"
-              fit="cover"
-              :preview-src-list="[createForm.voucher_url]"
-              :image-style="{ width: '104px', height: '104px', borderRadius: '6px' }"
-            />
-            <el-button
-              class="voucher-remove"
-              circle
-              plain
-              type="danger"
-              :icon="CircleClose"
-              title="移除凭证"
-              @click="createForm.voucher_url = ''"
-            />
+
+        <el-form-item label="开支凭证 / 发票截图（可选）">
+          <div class="voucher-upload-box">
+            <el-upload
+              action="#"
+              :http-request="uploadVoucher"
+              :show-file-list="false"
+              accept="image/*"
+            >
+              <el-button :loading="voucherUploading" :icon="UploadFilled">
+                {{ createForm.voucher_url ? '重新上传凭证' : '上传开支凭证' }}
+              </el-button>
+            </el-upload>
+            <div v-if="createForm.voucher_url" class="voucher-preview-wrap">
+              <AuthImage
+                :source="createForm.voucher_url"
+                alt="凭证预览"
+                class="voucher-img-preview"
+              />
+            </div>
           </div>
-          <el-upload
-            v-else
-            :show-file-list="false"
-            :http-request="uploadVoucher"
-            accept="image/jpeg,image/png,image/webp"
-          >
-            <el-button :icon="UploadFilled" :loading="voucherUploading">上传凭证</el-button>
-          </el-upload>
         </el-form-item>
       </el-form>
+
       <template #footer>
-        <el-button :disabled="createSaving" @click="createVisible = false">取消</el-button>
-        <el-button
-          type="primary"
-          :loading="createSaving"
-          :disabled="voucherUploading"
-          @click="submitExpense"
-          >确认记账</el-button
-        >
+        <div class="modal-footer">
+          <el-button @click="createVisible = false">取消</el-button>
+          <el-button type="primary" :loading="createSaving" @click="submitExpense">
+            确认记账
+          </el-button>
+        </div>
       </template>
     </el-dialog>
 
+    <!-- 运营开支详情弹窗 -->
     <el-dialog
       :model-value="!!selectedExpense"
       title="运营开支详情"
-      width="620px"
-      @update:model-value="selectedExpense = null"
+      width="520px"
+      @update:model-value="(val: boolean) => (!val ? (selectedExpense = null) : null)"
     >
-      <el-descriptions v-if="selectedExpense" :column="2" border>
-        <el-descriptions-item label="开支单号">{{
-          selectedExpense.expense_no
-        }}</el-descriptions-item>
-        <el-descriptions-item label="状态"
-          ><el-tag :type="statusType(selectedExpense.status)">{{
-            statusLabel(selectedExpense.status)
-          }}</el-tag></el-descriptions-item
-        >
-        <el-descriptions-item label="开支类别">{{ selectedExpense.category }}</el-descriptions-item>
-        <el-descriptions-item label="收款方">{{ selectedExpense.payee_name }}</el-descriptions-item>
-        <el-descriptions-item label="开支金额"
-          ><strong>{{ money(selectedExpense.amount_cent) }}</strong></el-descriptions-item
-        >
-        <el-descriptions-item label="开支时间">{{
-          formatDateTime(selectedExpense.occurred_at)
-        }}</el-descriptions-item>
-        <el-descriptions-item label="录入人">{{
-          selectedExpense.created_by_name || '-'
-        }}</el-descriptions-item>
-        <el-descriptions-item label="录入时间">{{
-          formatDateTime(selectedExpense.created_at)
-        }}</el-descriptions-item>
-        <el-descriptions-item label="开支用途" :span="2">{{
-          selectedExpense.remark
-        }}</el-descriptions-item>
-        <el-descriptions-item v-if="selectedExpense.voucher_url" label="开支凭证" :span="2">
-          <AuthImage
-            :source="selectedExpense.voucher_url"
-            :admin="true"
-            fit="cover"
-            :preview-src-list="[selectedExpense.voucher_url]"
-            :image-style="{ width: '140px', height: '140px', borderRadius: '6px' }"
-          />
-        </el-descriptions-item>
-        <el-descriptions-item v-if="selectedExpense.status === 'voided'" label="作废信息" :span="2">
-          {{ selectedExpense.voided_by_name || '-' }} ·
-          {{ formatDateTime(selectedExpense.voided_at) }} · {{ selectedExpense.void_reason || '-' }}
-        </el-descriptions-item>
-      </el-descriptions>
-      <template #footer>
-        <el-button @click="selectedExpense = null">关闭</el-button>
-        <el-button
-          v-if="selectedExpense?.status === 'paid' && canManage"
-          type="danger"
-          :icon="CircleClose"
-          :loading="actionID === selectedExpense.id"
-          @click="handleVoid(selectedExpense)"
-          >作废记录</el-button
-        >
-      </template>
+      <div v-if="selectedExpense" class="detail-content-wrap">
+        <div class="detail-row">
+          <span class="detail-label">开支单号</span>
+          <span class="detail-val font-mono">{{ selectedExpense.expense_no }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">开支类别</span>
+          <span class="detail-val">{{ selectedExpense.category }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">收款方</span>
+          <span class="detail-val">{{ selectedExpense.payee_name }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">开支金额</span>
+          <span class="detail-val text-amber font-bold text-lg">
+            {{ money(selectedExpense.amount_cent) }}
+          </span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">状态</span>
+          <el-tag :type="statusType(selectedExpense.status)">
+            {{ statusLabel(selectedExpense.status) }}
+          </el-tag>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">发生时间</span>
+          <span class="detail-val">{{ formatDateTime(selectedExpense.occurred_at) }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">录入人</span>
+          <span class="detail-val">{{ selectedExpense.created_by_name || '-' }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">用途备注</span>
+          <span class="detail-val">{{ selectedExpense.remark }}</span>
+        </div>
+        <div v-if="selectedExpense.voucher_url" class="detail-row column-row">
+          <span class="detail-label">开支凭证</span>
+          <div class="detail-img-container">
+            <AuthImage
+              :source="selectedExpense.voucher_url"
+              alt="凭证"
+              class="detail-voucher-img"
+            />
+          </div>
+        </div>
+        <div v-if="selectedExpense.status === 'voided'" class="void-info-box">
+          <div class="void-title">
+            <el-icon><WarningFilled /></el-icon>
+            <span>作废记录</span>
+          </div>
+          <p>作废时间：{{ formatDateTime(selectedExpense.voided_at) }}</p>
+          <p>作废人：{{ selectedExpense.voided_by_name || '-' }}</p>
+          <p>作废原因：{{ selectedExpense.void_reason || '-' }}</p>
+        </div>
+      </div>
     </el-dialog>
-  </section>
+  </div>
 </template>
 
 <style scoped>
-.operating-metrics {
-  grid-template-columns: repeat(2, minmax(170px, 1fr));
-  margin-bottom: 16px;
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
 }
 
-.operating-metric {
-  border-left: 3px solid #b45309;
+/* ================= 头部卡片 ================= */
+.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);
 }
 
-.operating-filters {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(130px, 1fr));
+.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;
-  margin-bottom: 16px;
-  padding: 14px 16px;
 }
 
-.expense-form {
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0 16px;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
 }
 
-.expense-form-wide {
-  grid-column: 1 / -1;
-}
-
-.voucher-preview {
+.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;
-  width: 104px;
-  height: 104px;
+  overflow: hidden;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
-.voucher-remove {
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.metric-card::before {
+  content: '';
   position: absolute;
-  top: -10px;
-  right: -10px;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
 }
 
-@media (max-width: 1100px) {
-  .operating-filters {
-    grid-template-columns: repeat(3, minmax(140px, 1fr));
-  }
+.metric-card--paid::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.metric-card--total::before {
+  background: linear-gradient(90deg, #64748b, #94a3b8);
+}
+
+.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.slate {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.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;
+}
+
+.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.warning {
+  background: #fffbeb;
+  color: #d97706;
+}
+
+.metric-sub-text {
+  font-size: 11.5px;
+  color: #94a3b8;
+}
+
+/* ================= 筛选面板 ================= */
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  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;
+}
+
+.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: #ea580c;
+  font-size: 18px;
+}
+
+.count-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #ea580c;
+  background: #fff7ed;
+  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;
+}
+
+.mono-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.category-tag {
+  font-weight: 600;
+}
+
+.payee-name {
+  color: #0f172a;
+}
+
+.amount-val {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.orange-val {
+  color: #ea580c;
+}
+
+.time-cell {
+  font-size: 12px;
+  color: #475569;
+}
+
+.operator-name {
+  font-size: 12.5px;
+  color: #475569;
+}
+
+.remark-text {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.action-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+/* ================= 弹窗样式 ================= */
+.voucher-upload-box {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.voucher-preview-wrap {
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.voucher-img-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.detail-content-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 4px 0;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13.5px;
+  border-bottom: 1px dashed #f1f5f9;
+  padding-bottom: 8px;
+}
+
+.detail-row.column-row {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.detail-label {
+  color: #64748b;
+}
+
+.detail-val {
+  color: #0f172a;
+}
+
+.detail-img-container {
+  max-width: 100%;
+  max-height: 240px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.detail-voucher-img {
+  max-width: 100%;
+  max-height: 240px;
+  object-fit: contain;
+}
+
+.void-info-box {
+  background: #fef2f2;
+  border-radius: 8px;
+  padding: 12px 14px;
+  border: 1px solid #fee2e2;
+  color: #b91c1c;
+  font-size: 12.5px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.void-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 700;
+  margin-bottom: 2px;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminPaymentConfigsView.vue b/frontend/src/features/admin/views/AdminPaymentConfigsView.vue
index 35e70e3..cf2832b 100644
--- a/frontend/src/features/admin/views/AdminPaymentConfigsView.vue
+++ b/frontend/src/features/admin/views/AdminPaymentConfigsView.vue
@@ -308,75 +308,91 @@ function deleteDisabledReason(row: PaymentConfig) {
 </script>
 
 <template>
-  <section class="page">
-    <div class="page-header">
-      <p class="eyebrow">Payment Configs</p>
-      <h1>支付配置管理</h1>
-      <p>管理多个支付商户配置，支付宝和微信可分别启用默认渠道。</p>
-    </div>
+  <div class="finance-page-container">
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><CreditCard /></el-icon>
+            <span>PAYMENT CONFIGS</span>
+          </div>
+          <h1 class="page-title">支付配置管理</h1>
+          <p class="page-subtitle">
+            管理平台多渠道支付商户配置，支持支付宝和微信独立指定默认与备用支付通道。
+          </p>
+        </div>
 
-    <div class="filter-bar">
-      <el-select
-        v-model="filterProvider"
-        placeholder="支付服务商"
-        style="width: 150px"
-        @change="loadConfigs"
-      >
-        <el-option
-          v-for="opt in providerOptions"
-          :key="opt.value"
-          :label="opt.label"
-          :value="opt.value"
-        />
-      </el-select>
-      <el-select
-        v-model="filterPayWay"
-        placeholder="支付方式"
-        style="width: 120px"
-        @change="loadConfigs"
-      >
-        <el-option
-          v-for="opt in payWayOptions"
-          :key="opt.value"
-          :label="opt.label"
-          :value="opt.value"
-        />
-      </el-select>
-      <el-select
-        v-model="filterStatus"
-        placeholder="状态"
-        style="width: 120px"
-        @change="loadConfigs"
-      >
-        <el-option
-          v-for="opt in statusOptions"
-          :key="opt.value"
-          :label="opt.label"
-          :value="opt.value"
-        />
-      </el-select>
-      <el-select
-        v-model="filterEnvironment"
-        placeholder="环境"
-        style="width: 120px"
-        @change="loadConfigs"
-      >
-        <el-option
-          v-for="opt in environmentOptions"
-          :key="opt.value"
-          :label="opt.label"
-          :value="opt.value"
-        />
-      </el-select>
-      <el-button :icon="Refresh" @click="loadConfigs">刷新</el-button>
-      <el-button :icon="Upload" :loading="importing" @click="handleImportBackup"
-        >导入备份</el-button
-      >
-      <el-button :icon="Download" :loading="exporting" @click="handleExportBackup"
-        >导出备份</el-button
-      >
-      <el-button type="primary" :icon="Plus" @click="handleCreate">新增配置</el-button>
-    </div>
+        <div class="toolbar-actions">
+          <el-button :icon="Upload" :loading="importing" @click="handleImportBackup">
+            导入备份
+          </el-button>
+          <el-button :icon="Download" :loading="exporting" @click="handleExportBackup">
+            导出备份
+          </el-button>
+          <el-button type="primary" :icon="Plus" class="action-btn-primary" @click="handleCreate">
+            新增配置
+          </el-button>
+        </div>
+      </div>
+    </header>
+
+    <section class="section-card filter-card">
+      <div class="filter-bar-flex">
+        <el-select
+          v-model="filterProvider"
+          placeholder="支付服务商"
+          class="filter-select"
+          @change="loadConfigs"
+        >
+          <el-option
+            v-for="opt in providerOptions"
+            :key="opt.value"
+            :label="opt.label"
+            :value="opt.value"
+          />
+        </el-select>
+        <el-select
+          v-model="filterPayWay"
+          placeholder="支付方式"
+          class="filter-select"
+          @change="loadConfigs"
+        >
+          <el-option
+            v-for="opt in payWayOptions"
+            :key="opt.value"
+            :label="opt.label"
+            :value="opt.value"
+          />
+        </el-select>
+        <el-select
+          v-model="filterStatus"
+          placeholder="状态"
+          class="filter-select"
+          @change="loadConfigs"
+        >
+          <el-option
+            v-for="opt in statusOptions"
+            :key="opt.value"
+            :label="opt.label"
+            :value="opt.value"
+          />
+        </el-select>
+        <el-select
+          v-model="filterEnvironment"
+          placeholder="环境"
+          class="filter-select"
+          @change="loadConfigs"
+        >
+          <el-option
+            v-for="opt in environmentOptions"
+            :key="opt.value"
+            :label="opt.label"
+            :value="opt.value"
+          />
+        </el-select>
+        <el-button :icon="Refresh" @click="loadConfigs">刷新</el-button>
+      </div>
+    </section>
 
     <input
       ref="backupFileInput"
@@ -386,119 +402,131 @@ function deleteDisabledReason(row: PaymentConfig) {
       @change="handleImportFile"
     />
 
-    <el-table
-      :data="filteredConfigs"
-      v-loading="loading"
-      class="payment-config-table"
-      :row-class-name="tableRowClassName"
-      stripe
-    >
-      <el-table-column prop="name" label="配置名称" min-width="220" show-overflow-tooltip />
-      <el-table-column prop="provider" label="服务商" width="120">
-        <template #default="{ row }">
-          {{ formatProvider(row.provider) }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="pay_way" label="支付方式" width="104" align="center">
-        <template #default="{ row }">
-          <el-tag class="config-tag" :class="getPayWayClass(row.pay_way)" size="small">
-            {{ formatPayWay(row.pay_way) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="merchant_id" label="商户号" min-width="150" />
-      <el-table-column prop="environment" label="环境" width="86" align="center">
-        <template #default="{ row }">
-          <el-tag class="config-tag" :class="getEnvironmentClass(row.environment)" size="small">
-            {{ formatEnvironment(row.environment) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="status" label="状态" width="86" align="center">
-        <template #default="{ row }">
-          <el-tag class="config-tag" :class="getStatusClass(row.status)" size="small">
-            {{ formatStatus(row.status) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="is_default" label="默认渠道" width="118" align="center">
-        <template #default="{ row }">
-          <span v-if="isDefaultConfig(row)" class="default-badge">
-            <el-icon><StarFilled /></el-icon>
-            默认渠道
-          </span>
-          <span v-else class="standby-badge">备用</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="支付记录" min-width="150">
-        <template #default="{ row }">
-          <div class="usage-cell">
-            <div>成功: {{ row.total_transactions }} 笔</div>
-            <div :class="{ 'usage-reference-locked': (row.reference_count || 0) > 0 }">
-              引用: {{ row.reference_count || 0 }} 条
-            </div>
-            <div>金额: ¥{{ formatAmount(row.total_amount_cent) }}</div>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="last_used_at"
-        label="最后成功支付"
-        min-width="180"
-        show-overflow-tooltip
-      >
-        <template #default="{ row }">
-          {{ row.last_used_at ? formatDateTime(row.last_used_at, '-') : '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="226" class-name="operation-column">
-        <template #default="{ row }">
-          <div class="action-buttons">
-            <el-button
-              class="action-button view"
-              size="small"
-              :icon="View"
-              @click="handleView(row)"
-            >
-              查看
-            </el-button>
-            <el-button
-              class="action-button edit"
-              size="small"
-              :icon="Edit"
-              @click="handleEdit(row)"
-            >
-              编辑
-            </el-button>
-            <el-tooltip :content="deleteDisabledReason(row)" placement="top">
-              <span>
-                <el-button
-                  class="action-button delete"
-                  size="small"
-                  :icon="Delete"
-                  :disabled="!canDeleteConfig(row)"
-                  @click="handleDelete(row)"
-                >
-                  删除
-                </el-button>
-              </span>
-            </el-tooltip>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+    <section class="section-card table-section-card">
+      <div class="table-card-header">
+        <div class="table-header-title">
+          <el-icon class="header-icon"><CreditCard /></el-icon>
+          <span>支付通道配置列表</span>
+        </div>
+        <span class="count-badge">共 {{ total }} 个配置</span>
+      </div>
 
-    <div class="pagination">
-      <el-pagination
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :total="total"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        @current-change="loadConfigs"
-        @size-change="loadConfigs"
-      />
-    </div>
+      <div class="table-container">
+        <el-table
+          :data="filteredConfigs"
+          v-loading="loading"
+          class="payment-config-table custom-enterprise-table"
+          :row-class-name="tableRowClassName"
+          stripe
+        >
+          <el-table-column prop="name" label="配置名称" min-width="220" show-overflow-tooltip />
+          <el-table-column prop="provider" label="服务商" width="120">
+            <template #default="{ row }">
+              {{ formatProvider(row.provider) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="pay_way" label="支付方式" width="104" align="center">
+            <template #default="{ row }">
+              <el-tag class="config-tag" :class="getPayWayClass(row.pay_way)" size="small">
+                {{ formatPayWay(row.pay_way) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="merchant_id" label="商户号" min-width="150" />
+          <el-table-column prop="environment" label="环境" width="86" align="center">
+            <template #default="{ row }">
+              <el-tag class="config-tag" :class="getEnvironmentClass(row.environment)" size="small">
+                {{ formatEnvironment(row.environment) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="状态" width="86" align="center">
+            <template #default="{ row }">
+              <el-tag class="config-tag" :class="getStatusClass(row.status)" size="small">
+                {{ formatStatus(row.status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="is_default" label="默认渠道" width="118" align="center">
+            <template #default="{ row }">
+              <span v-if="isDefaultConfig(row)" class="default-badge">
+                <el-icon><StarFilled /></el-icon>
+                默认渠道
+              </span>
+              <span v-else class="standby-badge">备用</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="支付记录" min-width="150">
+            <template #default="{ row }">
+              <div class="usage-cell">
+                <div>成功: {{ row.total_transactions }} 笔</div>
+                <div :class="{ 'usage-reference-locked': (row.reference_count || 0) > 0 }">
+                  引用: {{ row.reference_count || 0 }} 条
+                </div>
+                <div>金额: ¥{{ formatAmount(row.total_amount_cent) }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="last_used_at"
+            label="最后成功支付"
+            min-width="180"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              {{ row.last_used_at ? formatDateTime(row.last_used_at, '-') : '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="226" class-name="operation-column">
+            <template #default="{ row }">
+              <div class="action-buttons">
+                <el-button
+                  class="action-button view"
+                  size="small"
+                  :icon="View"
+                  @click="handleView(row)"
+                >
+                  查看
+                </el-button>
+                <el-button
+                  class="action-button edit"
+                  size="small"
+                  :icon="Edit"
+                  @click="handleEdit(row)"
+                >
+                  编辑
+                </el-button>
+                <el-tooltip :content="deleteDisabledReason(row)" placement="top">
+                  <span>
+                    <el-button
+                      class="action-button delete"
+                      size="small"
+                      :icon="Delete"
+                      :disabled="!canDeleteConfig(row)"
+                      @click="handleDelete(row)"
+                    >
+                      删除
+                    </el-button>
+                  </span>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="loadConfigs"
+          @size-change="loadConfigs"
+        />
+      </div>
+    </section>
 
     <PaymentConfigDialog
       v-model="dialogVisible"
@@ -507,46 +535,137 @@ function deleteDisabledReason(row: PaymentConfig) {
       @close="handleDialogClose"
       @saved="handleSaved"
     />
-  </section>
+  </div>
 </template>
 
 <style scoped>
-.page {
-  padding: 24px;
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
 }
 
-.page-header {
-  margin-bottom: 24px;
+.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);
 }
 
-.page-header .eyebrow {
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: #6b7280;
-  margin-bottom: 8px;
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
 }
 
-.page-header h1 {
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0 0 8px 0;
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.page-header p {
-  color: #6b7280;
+.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;
 }
 
-.filter-bar {
+.page-subtitle {
+  margin: 0;
+  font-size: 13.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.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-bar-flex {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px;
+}
+
+.filter-select {
+  width: 140px;
+}
+
+.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: #3b82f6;
+  font-size: 18px;
+}
+
+.count-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #3b82f6;
+  background: #eff6ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+
+.table-container {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
 .backup-file-input {
   display: none;
 }
diff --git a/frontend/src/features/admin/views/AdminPaymentsView.vue b/frontend/src/features/admin/views/AdminPaymentsView.vue
index e30ad66..ba34dc2 100644
--- a/frontend/src/features/admin/views/AdminPaymentsView.vue
+++ b/frontend/src/features/admin/views/AdminPaymentsView.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { Document, Search } from '@element-plus/icons-vue'
+import {
+  CreditCard,
+  DocumentChecked,
+  Money,
+  Refresh,
+  Search,
+  TopRight,
+  View,
+  Wallet,
+} from '@element-plus/icons-vue'
 import { computed, onMounted, reactive, ref } from 'vue'
 
 import { fetchAdminPayments, type AdminPayment } from '@/features/admin/api/adminPayments'
@@ -15,6 +24,7 @@ const currentPageSize = ref(20)
 const total = ref(0)
 const detailVisible = ref(false)
 const activePayment = ref<AdminPayment | null>(null)
+
 const filters = reactive({
   user_id: '',
   order_id: '',
@@ -70,11 +80,11 @@ async function handlePageChange() {
   await loadPayments()
 }
 
-function moneyCent(value: number) {
-  return formatCentWithSymbol(value)
+function moneyCent(value: number | undefined | null) {
+  return formatCentWithSymbol(value || 0)
 }
 
-function paymentStatusType(status: string) {
+function paymentStatusType(status: string): 'success' | 'danger' | 'warning' | 'info' {
   if (['paid', 'refunded'].includes(status)) return 'success'
   if (status === 'failed') return 'danger'
   if (['paying', 'refunding'].includes(status)) return 'warning'
@@ -126,199 +136,643 @@ function jsonText(value: unknown) {
 </script>
 
 <template>
-  <section class="page">
-    <div class="page-header-row">
-      <div class="page-header">
-        <p class="eyebrow">Payment Ledger</p>
-        <h1>支付流水</h1>
-        <p>查看第三方支付、退款请求、渠道单号、状态和失败原因。</p>
-      </div>
-      <div class="toolbar-actions">
-        <el-button @click="resetFilters">重置</el-button>
-        <el-button type="primary" :icon="Search" :loading="loading" @click="loadPayments"
-          >查询</el-button
-        >
-      </div>
-    </div>
-
-    <div class="metric-grid">
-      <div class="metric-card">
-        <span>总条数</span>
-        <strong>{{ total }} 笔</strong>
-      </div>
-      <div class="metric-card">
-        <span>本页支付额</span>
-        <strong>{{ moneyCent(payAmount) }}</strong>
-      </div>
-      <div class="metric-card">
-        <span>本页退款额</span>
-        <strong>{{ moneyCent(refundAmount) }}</strong>
-      </div>
-    </div>
-
-    <el-form class="filter-panel" label-position="top">
-      <el-form-item label="用户 ID">
-        <el-input v-model="filters.user_id" clearable placeholder="按用户筛选" />
-      </el-form-item>
-      <el-form-item label="订单 ID">
-        <el-input v-model="filters.order_id" clearable placeholder="按订单筛选" />
-      </el-form-item>
-      <el-form-item label="订单号">
-        <el-input v-model="filters.order_no" clearable placeholder="按订单号筛选" />
-      </el-form-item>
-      <el-form-item label="业务类型">
-        <el-select v-model="filters.biz_type" clearable placeholder="全部业务" class="full-control">
-          <el-option label="订单支付" value="order_pay" />
-          <el-option label="撞车支付" value="mohong_pay" />
-          <el-option label="结账退款" value="checkout_refund" />
-          <el-option label="仲裁退款" value="arbitration_refund" />
-          <el-option label="人工退款" value="admin_refund" />
-          <el-option label="取消退款" value="cancel_refund" />
-          <el-option label="撞车退款" value="mohong_refund" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="状态">
-        <el-select v-model="filters.status" clearable placeholder="全部状态" class="full-control">
-          <el-option label="已支付" value="paid" />
-          <el-option label="支付中" value="paying" />
-          <el-option label="退款中" value="refunding" />
-          <el-option label="已退款" value="refunded" />
-          <el-option label="失败" value="failed" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="渠道">
-        <el-select v-model="filters.provider" clearable placeholder="全部渠道" class="full-control">
-          <el-option label="拉卡拉" value="lakala" />
-          <el-option label="乐刷" value="leshua" />
-          <el-option label="顺成" value="shuncheng" />
-          <el-option label="Mock" value="mock" />
-        </el-select>
-      </el-form-item>
-    </el-form>
-
-    <el-table v-loading="loading" class="table-panel" :data="payments">
-      <el-table-column prop="payment_no" label="支付单号" min-width="220" />
-      <el-table-column label="订单" min-width="180">
-        <template #default="{ row }">
-          <RouterLink v-if="row.order_id" :to="adminPath(`orders/${row.order_id}`)">{{
-            row.order_no || row.order_id
-          }}</RouterLink>
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="用户" min-width="130">
-        <template #default="{ row }">{{ row.user_phone || `用户 ${row.user_id}` }}</template>
-      </el-table-column>
-      <el-table-column label="业务" width="120">
-        <template #default="{ row }">{{ bizTypeLabel(row.biz_type) }}</template>
-      </el-table-column>
-      <el-table-column label="渠道" width="90">
-        <template #default="{ row }">{{ row.provider || '-' }}</template>
-      </el-table-column>
-      <el-table-column label="金额" width="110">
-        <template #default="{ row }">{{ moneyCent(row.amount_cent) }}</template>
-      </el-table-column>
-      <el-table-column label="状态" width="110">
-        <template #default="{ row }">
-          <el-tag :type="paymentStatusType(row.status)">{{
-            paymentStatusLabel(row.status)
-          }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="失败原因" min-width="180">
-        <template #default="{ row }">
-          <span v-if="row.status === 'failed' && row.error_message"
-            >{{ row.error_code }} {{ row.error_message }}</span
-          >
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="third_order_id" label="平台单号" min-width="230" />
-      <el-table-column prop="provider_order_id" label="渠道单号" min-width="220" />
-      <el-table-column label="创建时间" min-width="180">
-        <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
-      </el-table-column>
-      <el-table-column label="操作" width="90" fixed="right">
-        <template #default="{ row }">
-          <el-button size="small" :icon="Document" @click="openDetail(row)">详情</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <AdminTablePagination
-      v-if="total > 0"
-      v-model:current-page="currentPage"
-      v-model:page-size="currentPageSize"
-      :total="total"
-      :loading="loading"
-      @page-change="handlePageChange"
-    />
-
-    <el-dialog v-model="detailVisible" title="支付流水详情" width="820px">
-      <div v-if="activePayment" class="payment-detail">
-        <div class="detail-grid">
-          <p>
-            <span>业务类型</span><strong>{{ bizTypeLabel(activePayment.biz_type) }}</strong>
-          </p>
-          <p>
-            <span>状态</span><strong>{{ paymentStatusLabel(activePayment.status) }}</strong>
-          </p>
-          <p>
-            <span>金额</span><strong>{{ moneyCent(activePayment.amount_cent) }}</strong>
-          </p>
-          <p>
-            <span>渠道</span><strong>{{ activePayment.provider || '-' }}</strong>
+  <div class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><CreditCard /></el-icon>
+            <span>PAYMENT LEDGER</span>
+          </div>
+          <h1 class="page-title">支付流水</h1>
+          <p class="page-subtitle">
+            聚合监控第三方通道支付与退款交互、渠道交易号、状态及失败异常报文。
           </p>
         </div>
-        <h3>请求参数</h3>
-        <pre>{{ jsonText(activePayment.raw_request) }}</pre>
-        <h3>响应结果</h3>
-        <pre>{{ jsonText(activePayment.raw_response) }}</pre>
+
+        <div class="toolbar-actions">
+          <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
+          <el-button type="primary" :icon="Search" :loading="loading" @click="loadPayments">
+            查询
+          </el-button>
+        </div>
+      </div>
+    </header>
+
+    <!-- 汇总指标卡片 -->
+    <section class="summary-metric-grid">
+      <div class="metric-card metric-card--pay">
+        <div class="metric-icon-wrap emerald">
+          <el-icon><Money /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页支付成功额</span>
+          <strong class="metric-val emerald-val">{{ moneyCent(payAmount) }}</strong>
+          <span class="metric-sub-pill success">支付流水</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--refund">
+        <div class="metric-icon-wrap rose">
+          <el-icon><TopRight /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页退款发生额</span>
+          <strong class="metric-val rose-val">{{ moneyCent(refundAmount) }}</strong>
+          <span class="metric-sub-pill danger">退款流水</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--total">
+        <div class="metric-icon-wrap indigo">
+          <el-icon><Wallet /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">渠道流水记录</span>
+          <strong class="metric-val">{{ total }} 笔</strong>
+          <span class="metric-sub-text">第三方通道总记录数</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 筛选卡片 -->
+    <section class="section-card filter-card">
+      <el-form class="filter-grid" label-position="top" @keyup.enter="loadPayments">
+        <el-form-item label="用户 ID">
+          <el-input v-model="filters.user_id" clearable placeholder="按用户 ID 检索" />
+        </el-form-item>
+        <el-form-item label="订单 ID">
+          <el-input v-model="filters.order_id" clearable placeholder="按订单 ID 检索" />
+        </el-form-item>
+        <el-form-item label="订单号">
+          <el-input v-model="filters.order_no" clearable placeholder="按订单号检索" />
+        </el-form-item>
+        <el-form-item label="业务类型">
+          <el-select
+            v-model="filters.biz_type"
+            clearable
+            placeholder="全部业务类型"
+            class="full-control"
+          >
+            <el-option label="订单支付" value="order_pay" />
+            <el-option label="撞车支付" value="mohong_pay" />
+            <el-option label="结账退款" value="checkout_refund" />
+            <el-option label="仲裁退款" value="arbitration_refund" />
+            <el-option label="人工退款" value="admin_refund" />
+            <el-option label="取消退款" value="cancel_refund" />
+            <el-option label="撞车退款" value="mohong_refund" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="流水状态">
+          <el-select v-model="filters.status" clearable placeholder="全部状态" class="full-control">
+            <el-option label="已支付" value="paid" />
+            <el-option label="支付中" value="paying" />
+            <el-option label="退款中" value="refunding" />
+            <el-option label="已退款" value="refunded" />
+            <el-option label="失败" value="failed" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="支付渠道">
+          <el-select
+            v-model="filters.provider"
+            clearable
+            placeholder="全部渠道"
+            class="full-control"
+          >
+            <el-option label="拉卡拉" value="lakala" />
+            <el-option label="乐刷" value="leshua" />
+            <el-option label="顺成" value="shuncheng" />
+            <el-option label="Mock" value="mock" />
+          </el-select>
+        </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"><DocumentChecked /></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="payments"
+          stripe
+          empty-text="暂无支付流水记录"
+        >
+          <el-table-column label="支付流水号" min-width="210" fixed="left">
+            <template #default="{ row }">
+              <span class="mono-code">{{ row.payment_no }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="渠道 / 方式" width="150">
+            <template #default="{ row }">
+              <div class="provider-cell">
+                <el-tag size="small" effect="plain" class="provider-tag">{{ row.provider }}</el-tag>
+                <small class="pay-way">{{ row.pay_way || '-' }}</small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="业务类型" width="130">
+            <template #default="{ row }">
+              <span class="biz-type-text">{{ bizTypeLabel(row.biz_type) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="交易金额" min-width="130" align="right">
+            <template #default="{ row }">
+              <strong
+                class="amount-val"
+                :class="row.biz_type.includes('refund') ? 'refund-val' : 'pay-val'"
+              >
+                {{ moneyCent(row.amount_cent) }}
+              </strong>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="状态" width="110" align="center">
+            <template #default="{ row }">
+              <el-tag :type="paymentStatusType(row.status)" class="status-pill">
+                {{ paymentStatusLabel(row.status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="关联订单 / 用户" min-width="170">
+            <template #default="{ row }">
+              <div class="order-user-cell">
+                <RouterLink
+                  v-if="row.order_id"
+                  class="order-link"
+                  :to="adminPath(`orders/${row.order_id}`)"
+                >
+                  {{ row.order_no || `订单 #${row.order_id}` }}
+                </RouterLink>
+                <small class="user-id">用户 ID: {{ row.user_id }}</small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="渠道交易单号" min-width="190">
+            <template #default="{ row }">
+              <span class="channel-no">{{ row.channel_trade_no || '-' }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="异常与失败信息" min-width="170" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span v-if="row.error_message" class="error-msg">{{ row.error_message }}</span>
+              <span v-else class="muted-text">-</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="90" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button link type="primary" :icon="View" @click="openDetail(row)">
+                报文
+              </el-button>
+            </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="handlePageChange"
+      />
+    </section>
+
+    <!-- 报文详情弹窗 -->
+    <el-dialog v-model="detailVisible" title="支付流水报文详情" width="680px" destroy-on-close>
+      <div v-if="activePayment" class="payload-details">
+        <div class="payload-block">
+          <div class="payload-title">请求报文 Payload</div>
+          <pre class="json-box"><code>{{ jsonText(activePayment.raw_request) }}</code></pre>
+        </div>
+        <div class="payload-block">
+          <div class="payload-title">响应报文 Payload</div>
+          <pre class="json-box"><code>{{ jsonText(activePayment.raw_response) }}</code></pre>
+        </div>
       </div>
     </el-dialog>
-  </section>
+  </div>
 </template>
 
 <style scoped>
-.payment-detail h3 {
-  margin: 18px 0 8px;
-  font-size: 15px;
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
 }
 
-.detail-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+/* ================= 头部卡片 ================= */
+.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: #059669;
+  background: #ecfdf5;
+  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;
 }
 
-.detail-grid p {
-  margin: 0;
-  padding: 10px 12px;
-  background: #f8fafc;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
 }
 
-.detail-grid span {
-  display: block;
+.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--pay::before {
+  background: linear-gradient(90deg, #10b981, #34d399);
+}
+
+.metric-card--refund::before {
+  background: linear-gradient(90deg, #f43f5e, #fb7185);
+}
+
+.metric-card--total::before {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+.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.emerald {
+  background: #ecfdf5;
+  color: #10b981;
+}
+
+.metric-icon-wrap.rose {
+  background: #fff1f2;
+  color: #f43f5e;
+}
+
+.metric-icon-wrap.indigo {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.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;
+}
+
+.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.success {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.metric-sub-pill.danger {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+.metric-sub-text {
+  font-size: 11.5px;
+  color: #94a3b8;
+}
+
+/* ================= 筛选面板 ================= */
+.section-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 22px 24px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  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;
 }
 
-.detail-grid strong {
-  display: block;
-  margin-top: 4px;
+.full-control {
+  width: 100%;
 }
 
-pre {
-  max-height: 260px;
-  overflow: auto;
-  margin: 0;
-  padding: 12px;
+/* ================= 表格卡片 ================= */
+.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: #059669;
+  font-size: 18px;
+}
+
+.count-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #059669;
+  background: #ecfdf5;
+  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;
+}
+
+.mono-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.provider-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.provider-tag {
+  width: fit-content;
+  font-weight: 600;
+}
+
+.pay-way {
+  font-size: 11px;
+  color: #64748b;
+}
+
+.biz-type-text {
+  font-size: 12.5px;
+  color: #334155;
+}
+
+.amount-val {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13.5px;
+  font-weight: 700;
+}
+
+.pay-val {
+  color: #059669;
+}
+
+.refund-val {
+  color: #e11d48;
+}
+
+.status-pill {
+  font-weight: 600;
+}
+
+.order-user-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.order-link {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  color: #3b82f6;
+  text-decoration: none;
+}
+
+.order-link:hover {
+  text-decoration: underline;
+}
+
+.user-id {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.channel-no {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.error-msg {
+  font-size: 12px;
+  color: #ef4444;
+}
+
+.time-cell {
+  font-size: 12px;
+  color: #475569;
+}
+
+.muted-text {
+  color: #cbd5e1;
+}
+
+/* ================= 报文弹窗 ================= */
+.payload-details {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.payload-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #475569;
+  margin-bottom: 6px;
+}
+
+.json-box {
   background: #0f172a;
   color: #e2e8f0;
   border-radius: 8px;
-  white-space: pre-wrap;
-  word-break: break-word;
+  padding: 12px 14px;
+  font-size: 12px;
+  max-height: 240px;
+  overflow: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminWalletLedgerView.vue b/frontend/src/features/admin/views/AdminWalletLedgerView.vue
index ef6aaa4..d6e5a12 100644
--- a/frontend/src/features/admin/views/AdminWalletLedgerView.vue
+++ b/frontend/src/features/admin/views/AdminWalletLedgerView.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { Search } from '@element-plus/icons-vue'
+import {
+  BottomLeft,
+  Coin,
+  DocumentChecked,
+  Refresh,
+  Search,
+  TopRight,
+  Wallet,
+} from '@element-plus/icons-vue'
 import { computed, onMounted, reactive, ref } from 'vue'
 
 import { fetchAdminWalletLedger, type AdminWalletLedger } from '@/features/admin/api/adminWallet'
@@ -65,11 +73,11 @@ async function handlePageChange() {
   await loadLedger()
 }
 
-function money(value: number) {
-  return formatCentWithSymbol(value)
+function money(value: number | undefined | null) {
+  return formatCentWithSymbol(value || 0)
 }
 
-function directionType(direction: string) {
+function directionType(direction: string): 'success' | 'danger' | 'warning' | 'info' {
   if (direction === 'in') return 'success'
   if (direction === 'out') return 'danger'
   return 'warning'
@@ -81,95 +89,544 @@ function directionLabel(direction: string) {
 </script>
 
 <template>
-  <section class="page">
-    <div class="page-header-row">
-      <div class="page-header">
-        <p class="eyebrow">Wallet Ledger</p>
-        <h1>资金流水</h1>
-        <p>查看订单金额、押金、冻结、解冻、退款和结算流水。</p>
+  <div class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><Wallet /></el-icon>
+            <span>WALLET LEDGER</span>
+          </div>
+          <h1 class="page-title">资金流水</h1>
+          <p class="page-subtitle">
+            全站用户钱包账户的订单金额、押金冻结、结算解冻及扣划流水台账。
+          </p>
+        </div>
+
+        <div class="toolbar-actions">
+          <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
+          <el-button type="primary" :icon="Search" :loading="loading" @click="loadLedger">
+            查询
+          </el-button>
+        </div>
       </div>
-      <div class="toolbar-actions">
-        <el-button @click="resetFilters">重置</el-button>
-        <el-button type="primary" :icon="Search" :loading="loading" @click="loadLedger"
-          >查询</el-button
+    </header>
+
+    <!-- 汇总指标卡片 -->
+    <section class="summary-metric-grid">
+      <div class="metric-card metric-card--in">
+        <div class="metric-icon-wrap emerald">
+          <el-icon><BottomLeft /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页入账合计</span>
+          <strong class="metric-val emerald-val">{{ money(inAmount) }}</strong>
+          <span class="metric-sub-pill success">资金流入</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--out">
+        <div class="metric-icon-wrap rose">
+          <el-icon><TopRight /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页出账合计</span>
+          <strong class="metric-val rose-val">{{ money(outAmount) }}</strong>
+          <span class="metric-sub-pill danger">资金流出</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--total">
+        <div class="metric-icon-wrap indigo">
+          <el-icon><Coin /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">总流水记录</span>
+          <strong class="metric-val">{{ total }} 笔</strong>
+          <span class="metric-sub-text">钱包资金变动明细</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 筛选面板 -->
+    <section class="section-card filter-card">
+      <el-form class="filter-grid" label-position="top" @keyup.enter="loadLedger">
+        <el-form-item label="用户 ID">
+          <el-input v-model="filters.user_id" clearable placeholder="按用户 ID 检索" />
+        </el-form-item>
+        <el-form-item label="订单 ID">
+          <el-input v-model="filters.order_id" clearable placeholder="按订单 ID 检索" />
+        </el-form-item>
+        <el-form-item label="业务类型">
+          <el-select
+            v-model="filters.biz_type"
+            clearable
+            placeholder="全部业务类型"
+            class="full-control"
+          >
+            <el-option label="订单冻结" value="order_freeze" />
+            <el-option label="订单取消释放" value="order_cancel_release" />
+            <el-option label="订单结算" value="order_settlement" />
+            <el-option label="押金退回" value="deposit_refund" />
+          </el-select>
+        </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"><DocumentChecked /></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="ledger"
+          stripe
+          empty-text="暂无资金流水记录"
         >
-      </div>
-    </div>
+          <el-table-column label="流水号" min-width="210" fixed="left">
+            <template #default="{ row }">
+              <span class="mono-code">{{ row.ledger_no }}</span>
+            </template>
+          </el-table-column>
 
-    <div class="metric-grid">
-      <div class="metric-card">
-        <span>总条数</span>
-        <strong>{{ total }} 笔</strong>
-      </div>
-      <div class="metric-card">
-        <span>入账合计</span>
-        <strong>{{ money(inAmount) }}</strong>
-      </div>
-      <div class="metric-card">
-        <span>出账合计</span>
-        <strong>{{ money(outAmount) }}</strong>
-      </div>
-    </div>
+          <el-table-column label="关联用户" min-width="150">
+            <template #default="{ row }">
+              <div class="user-cell">
+                <span class="user-title">{{ row.user_phone || `用户 ID: ${row.user_id}` }}</span>
+                <small v-if="row.user_phone" class="user-sub">UID: {{ row.user_id }}</small>
+              </div>
+            </template>
+          </el-table-column>
 
-    <el-form class="filter-panel" label-position="top">
-      <el-form-item label="用户 ID">
-        <el-input v-model="filters.user_id" clearable placeholder="按用户筛选" />
-      </el-form-item>
-      <el-form-item label="订单 ID">
-        <el-input v-model="filters.order_id" clearable placeholder="按订单筛选" />
-      </el-form-item>
-      <el-form-item label="业务类型">
-        <el-select v-model="filters.biz_type" clearable placeholder="全部业务" class="full-control">
-          <el-option label="订单冻结" value="order_freeze" />
-          <el-option label="订单取消释放" value="order_cancel_release" />
-          <el-option label="订单结算" value="order_settlement" />
-          <el-option label="押金退回" value="deposit_refund" />
-        </el-select>
-      </el-form-item>
-    </el-form>
+          <el-table-column label="关联订单" min-width="160">
+            <template #default="{ row }">
+              <RouterLink
+                v-if="row.order_id"
+                class="order-link"
+                :to="adminPath(`orders/${row.order_id}`)"
+              >
+                {{ row.order_no || `订单 #${row.order_id}` }}
+              </RouterLink>
+              <span v-else class="muted-text">-</span>
+            </template>
+          </el-table-column>
 
-    <el-table v-loading="loading" class="table-panel" :data="ledger">
-      <el-table-column prop="ledger_no" label="流水号" min-width="230" />
-      <el-table-column label="用户" min-width="130">
-        <template #default="{ row }">
-          <strong>{{ row.user_phone || `用户 ${row.user_id}` }}</strong>
-        </template>
-      </el-table-column>
-      <el-table-column label="订单" min-width="160">
-        <template #default="{ row }">
-          <RouterLink v-if="row.order_id" :to="adminPath(`orders/${row.order_id}`)">{{
-            row.order_no || row.order_id
-          }}</RouterLink>
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="biz_type" label="业务类型" width="150" />
-      <el-table-column label="方向" width="90">
-        <template #default="{ row }">
-          <el-tag :type="directionType(row.direction)">{{ directionLabel(row.direction) }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="金额" width="110">
-        <template #default="{ row }">{{ money(Number(row.amount_cent)) }}</template>
-      </el-table-column>
-      <el-table-column label="余额类型" width="110">
-        <template #default="{ row }">{{ balanceTypeLabel(row.balance_type) }}</template>
-      </el-table-column>
-      <el-table-column label="变化后余额" width="130">
-        <template #default="{ row }">{{ money(Number(row.balance_after_cent)) }}</template>
-      </el-table-column>
-      <el-table-column label="创建时间" min-width="180">
-        <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
-      </el-table-column>
-    </el-table>
+          <el-table-column label="业务类型" width="140">
+            <template #default="{ row }">
+              <el-tag size="small" effect="plain" class="biz-tag">{{ row.biz_type }}</el-tag>
+            </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="handlePageChange"
-    />
-  </section>
+          <el-table-column label="资金流向" width="110" align="center">
+            <template #default="{ row }">
+              <el-tag :type="directionType(row.direction)" class="direction-tag">
+                {{ directionLabel(row.direction) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="变动金额" min-width="130" align="right">
+            <template #default="{ row }">
+              <span class="amount-val" :class="row.direction === 'in' ? 'in-val' : 'out-val'">
+                {{ row.direction === 'in' ? '+' : '-' }}{{ money(Number(row.amount_cent)) }}
+              </span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="余额账户" width="120">
+            <template #default="{ row }">
+              <span class="balance-type">{{ balanceTypeLabel(row.balance_type) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="变动后余额" min-width="130" align="right">
+            <template #default="{ row }">
+              <span class="amount-val">{{ money(Number(row.balance_after_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>
+      </div>
+
+      <AdminTablePagination
+        v-if="total > 0"
+        v-model:current-page="currentPage"
+        v-model:page-size="currentPageSize"
+        :total="total"
+        @change="handlePageChange"
+      />
+    </section>
+  </div>
 </template>
+
+<style scoped>
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
+}
+
+/* ================= 头部卡片 ================= */
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #0284c7;
+  background: #f0f9ff;
+  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--in::before {
+  background: linear-gradient(90deg, #10b981, #34d399);
+}
+
+.metric-card--out::before {
+  background: linear-gradient(90deg, #f43f5e, #fb7185);
+}
+
+.metric-card--total::before {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+.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.emerald {
+  background: #ecfdf5;
+  color: #10b981;
+}
+
+.metric-icon-wrap.rose {
+  background: #fff1f2;
+  color: #f43f5e;
+}
+
+.metric-icon-wrap.indigo {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.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;
+}
+
+.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.success {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.metric-sub-pill.danger {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+.metric-sub-text {
+  font-size: 11.5px;
+  color: #94a3b8;
+}
+
+/* ================= 筛选面板 ================= */
+.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));
+  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;
+}
+
+.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: #0284c7;
+  font-size: 18px;
+}
+
+.count-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #0284c7;
+  background: #f0f9ff;
+  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;
+}
+
+.mono-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.user-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.user-title {
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.user-sub {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.order-link {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #3b82f6;
+  text-decoration: none;
+}
+
+.order-link:hover {
+  text-decoration: underline;
+}
+
+.biz-tag {
+  font-weight: 500;
+}
+
+.direction-tag {
+  font-weight: 600;
+}
+
+.amount-val {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13.5px;
+  font-weight: 700;
+}
+
+.in-val {
+  color: #059669;
+}
+
+.out-val {
+  color: #e11d48;
+}
+
+.balance-type {
+  font-size: 12.5px;
+  color: #475569;
+}
+
+.time-cell {
+  font-size: 12px;
+  color: #475569;
+}
+
+.muted-text {
+  color: #cbd5e1;
+}
+</style>
diff --git a/frontend/src/features/admin/views/AdminWithdrawalsView.vue b/frontend/src/features/admin/views/AdminWithdrawalsView.vue
index c9c427b..dc729be 100644
--- a/frontend/src/features/admin/views/AdminWithdrawalsView.vue
+++ b/frontend/src/features/admin/views/AdminWithdrawalsView.vue
@@ -1,4 +1,16 @@
 <script setup lang="ts">
+import {
+  Check,
+  Clock,
+  DocumentChecked,
+  Money,
+  Refresh,
+  Search,
+  Tickets,
+  User,
+  View,
+  Wallet,
+} from '@element-plus/icons-vue'
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -9,9 +21,10 @@ import {
   confirmPayment,
   type WithdrawalDetail,
 } from '@/features/admin/api/adminWithdrawal'
-import { formatCent } from '@/shared/utils/money'
+import { formatCentWithSymbol } from '@/shared/utils/money'
+import { formatDateTime } from '@/shared/utils/time'
 import { adminPath } from '@/shared/utils/adminPath'
-
+import AdminTablePagination from '../components/AdminTablePagination.vue'
 import WithdrawalDetailDialog from '../components/WithdrawalDetailDialog.vue'
 
 const route = useRoute()
@@ -32,9 +45,9 @@ const showDetailDialog = ref(false)
 const selectedWithdrawal = ref<WithdrawalDetail | null>(null)
 
 const statusOptions = [
-  { label: '全部', value: '' },
+  { label: '全部状态', value: '' },
   { label: '待审核', value: 'pending' },
-  { label: '处理中', value: 'processing' },
+  { label: '处理中 (待打款)', value: 'processing' },
   { label: '已完成', value: 'completed' },
   { label: '已拒绝', value: 'rejected' },
   { label: '已取消', value: 'cancelled' },
@@ -51,6 +64,16 @@ const withdrawalReturnQuery = computed<Record<string, string>>(() => {
   return query
 })
 
+const pendingCount = computed(() => withdrawals.value.filter(w => w.status === 'pending').length)
+const processingCount = computed(
+  () => withdrawals.value.filter(w => w.status === 'processing').length
+)
+const completedAmount = computed(() =>
+  withdrawals.value
+    .filter(w => w.status === 'completed')
+    .reduce((sum, w) => sum + Number(w.actual_amount_cent || w.amount_cent || 0), 0)
+)
+
 onMounted(() => {
   restoreListState()
   void loadWithdrawals()
@@ -94,7 +117,7 @@ async function loadWithdrawals() {
     withdrawals.value = result.items
     total.value = result.total
   } catch (error: any) {
-    ElMessage.error(error.response?.data?.message || '加载失败')
+    ElMessage.error(error.response?.data?.message || '提现列表加载失败')
   } finally {
     loading.value = false
   }
@@ -105,12 +128,18 @@ function handleFilter() {
   loadWithdrawals()
 }
 
+function resetFilters() {
+  filters.value.status = ''
+  filters.value.user_id = undefined
+  currentPage.value = 1
+  void loadWithdrawals()
+}
+
 function openDetail(withdrawal: WithdrawalDetail) {
   selectedWithdrawal.value = withdrawal
   showDetailDialog.value = true
 }
 
-/** 跳转订单管理页并预填号主搜索，快速查看该号主相关订单 */
 function goToOwnerOrders(withdrawal: WithdrawalDetail) {
   const keyword = withdrawal.user_phone?.trim() || String(withdrawal.user_id || '')
   void router.push({
@@ -153,7 +182,7 @@ async function handleReview(withdrawal: WithdrawalDetail, approved: boolean) {
 async function handleConfirmPayment(withdrawal: WithdrawalDetail) {
   try {
     const { value: remark } = await ElMessageBox.prompt(
-      '请输入打款备注（如：已通过支付宝转账）',
+      '请输入打款备注（如：已通过支付宝/微信转账）',
       '确认打款',
       {
         confirmButtonText: '确认完成',
@@ -161,7 +190,7 @@ async function handleConfirmPayment(withdrawal: WithdrawalDetail) {
         inputType: 'textarea',
         inputPlaceholder: '输入打款备注...',
         inputValidator: value => {
-          return value && value.trim().length > 0
+          return !!(value && value.trim().length > 0)
         },
         inputErrorMessage: '请输入打款备注',
       }
@@ -183,15 +212,15 @@ async function handleConfirmPayment(withdrawal: WithdrawalDetail) {
 function statusLabel(status: string) {
   const labels: Record<string, string> = {
     pending: '待审核',
-    processing: '处理中',
-    completed: '已完成',
+    processing: '待打款',
+    completed: '已打款',
     rejected: '已拒绝',
     cancelled: '已取消',
   }
   return labels[status] || status
 }
 
-function statusType(status: string) {
+function statusType(status: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' {
   const types: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'> = {
     pending: 'warning',
     processing: 'primary',
@@ -215,29 +244,90 @@ function onDetailDialogSaved() {
   showDetailDialog.value = false
   loadWithdrawals()
 }
+
+function money(cent: number | undefined | null) {
+  return formatCentWithSymbol(cent || 0)
+}
 </script>
 
 <template>
-  <section class="page">
-    <div class="page-header-row">
-      <div class="page-header">
-        <p class="eyebrow">Withdrawals</p>
-        <h1>提现管理</h1>
-        <p>审核用户提现申请并确认打款</p>
-      </div>
-      <div class="toolbar-actions">
-        <el-button @click="loadWithdrawals">刷新</el-button>
-      </div>
-    </div>
+  <div class="finance-page-container">
+    <!-- 头部卡片 -->
+    <header class="page-header-card">
+      <div class="header-main">
+        <div class="title-group">
+          <div class="eyebrow-tag">
+            <el-icon><Money /></el-icon>
+            <span>WITHDRAWALS</span>
+          </div>
+          <h1 class="page-title">提现审核</h1>
+          <p class="page-subtitle">审核号主用户钱包提现申请，核验转账账户并执行打款放款处理。</p>
+        </div>
 
-    <!-- 筛选器 -->
-    <el-card shadow="never" style="margin-bottom: 16px">
-      <el-form :model="filters" inline>
-        <el-form-item label="状态">
+        <div class="toolbar-actions">
+          <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
+          <el-button type="primary" :icon="Search" :loading="loading" @click="handleFilter">
+            查询
+          </el-button>
+        </div>
+      </div>
+    </header>
+
+    <!-- 汇总指标卡片 -->
+    <section class="summary-metric-grid">
+      <div class="metric-card metric-card--review">
+        <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">{{ pendingCount }} 笔</strong>
+          <span class="metric-sub-pill warning">待审核</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--pay">
+        <div class="metric-icon-wrap indigo">
+          <el-icon><Wallet /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">本页待打款</span>
+          <strong class="metric-val indigo-val">{{ processingCount }} 笔</strong>
+          <span class="metric-sub-pill info">已过审待放款</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--paid">
+        <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">{{ money(completedAmount) }}</strong>
+          <span class="metric-sub-pill success">已完成出款</span>
+        </div>
+      </div>
+
+      <div class="metric-card metric-card--total">
+        <div class="metric-icon-wrap slate">
+          <el-icon><Tickets /></el-icon>
+        </div>
+        <div class="metric-info">
+          <span class="metric-label">总申请记录</span>
+          <strong class="metric-val">{{ total }} 笔</strong>
+          <span class="metric-sub-text">所有提现记录</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 筛选卡片 -->
+    <section class="section-card filter-card">
+      <el-form class="filter-grid" label-position="top" @keyup.enter="handleFilter">
+        <el-form-item label="提现状态">
           <el-select
             v-model="filters.status"
-            placeholder="全部"
-            style="width: 150px"
+            placeholder="全部状态"
+            class="full-control"
             @change="handleFilter"
           >
             <el-option
@@ -248,106 +338,140 @@ function onDetailDialogSaved() {
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="用户ID">
+
+        <el-form-item label="用户 ID">
           <el-input
             v-model.number="filters.user_id"
-            placeholder="输入用户ID"
-            style="width: 150px"
+            placeholder="输入用户 ID 检索"
             clearable
             @clear="handleFilter"
           />
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleFilter"> 查询 </el-button>
-        </el-form-item>
       </el-form>
-    </el-card>
+    </section>
 
-    <!-- 提现列表 -->
-    <el-table v-loading="loading" class="table-panel" :data="withdrawals">
-      <el-table-column prop="id" label="ID" width="70" />
-      <el-table-column prop="withdraw_no" label="提现单号" min-width="180" />
-      <el-table-column label="用户" min-width="140">
-        <template #default="{ row }">
-          <div>{{ row.user_nickname }}</div>
-          <div style="font-size: 12px; color: #999">{{ row.user_phone }}</div>
-        </template>
-      </el-table-column>
-      <el-table-column label="提现金额" width="120" align="right">
-        <template #default="{ row }">
-          <span style="color: #f56c6c; font-weight: 600"> ¥{{ formatCent(row.amount_cent) }} </span>
-        </template>
-      </el-table-column>
-      <el-table-column label="收款方式" min-width="180">
-        <template #default="{ row }">
-          <div>
-            <el-tag size="small" style="margin-right: 4px">
-              {{ accountTypeLabel(row.account_type) }}
-            </el-tag>
-            {{ row.account_name }}
-          </div>
-          <div style="font-size: 12px; color: #666; margin-top: 4px">
-            {{ row.account_no }}
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" width="100">
-        <template #default="{ row }">
-          <el-tag :type="statusType(row.status)">
-            {{ statusLabel(row.status) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="申请时间" width="160">
-        <template #default="{ row }">
-          {{ new Date(row.created_at).toLocaleString('zh-CN') }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="300" fixed="right">
-        <template #default="{ row }">
-          <el-button size="small" @click="openDetail(row)"> 详情 </el-button>
-          <el-button size="small" type="primary" plain @click="goToOwnerOrders(row)">
-            号主订单
-          </el-button>
-          <el-button
-            v-if="row.status === 'pending'"
-            size="small"
-            type="success"
-            @click="handleReview(row, true)"
-          >
-            通过
-          </el-button>
-          <el-button
-            v-if="row.status === 'pending'"
-            size="small"
-            type="danger"
-            @click="handleReview(row, false)"
-          >
-            拒绝
-          </el-button>
-          <el-button
-            v-if="row.status === 'processing'"
-            size="small"
-            type="primary"
-            @click="handleConfirmPayment(row)"
-          >
-            确认打款
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 提现列表表格 -->
+    <section class="section-card table-section-card">
+      <div class="table-card-header">
+        <div class="table-header-title">
+          <el-icon class="header-icon"><DocumentChecked /></el-icon>
+          <span>提现申请明细</span>
+        </div>
+        <span class="count-badge">共 {{ total }} 条申请</span>
+      </div>
 
-    <el-pagination
-      v-if="total > pageSize"
-      v-model:current-page="currentPage"
-      v-model:page-size="pageSize"
-      :total="total"
-      :page-sizes="[10, 20, 50, 100]"
-      layout="total, sizes, prev, pager, next, jumper"
-      style="margin-top: 16px; justify-content: center"
-      @size-change="loadWithdrawals"
-      @current-change="loadWithdrawals"
-    />
+      <div class="table-container">
+        <el-table
+          v-loading="loading"
+          class="custom-enterprise-table"
+          :data="withdrawals"
+          stripe
+          empty-text="暂无提现记录"
+        >
+          <el-table-column label="提现单号" min-width="190" fixed="left">
+            <template #default="{ row }">
+              <div class="withdraw-no-cell">
+                <span class="mono-code">{{ row.withdraw_no }}</span>
+                <small class="id-tag">#ID: {{ row.id }}</small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="申请用户" min-width="160">
+            <template #default="{ row }">
+              <div class="user-cell">
+                <div class="user-name-line">
+                  <el-icon class="user-icon"><User /></el-icon>
+                  <span class="user-name">{{ row.user_nickname || '-' }}</span>
+                </div>
+                <small class="user-sub">{{ row.user_phone || `UID: ${row.user_id}` }}</small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="提现金额" min-width="140" align="right">
+            <template #default="{ row }">
+              <div class="amount-stack">
+                <strong class="withdraw-amount">{{ money(row.amount_cent) }}</strong>
+                <small v-if="row.fee_cent" class="fee-text">扣费 {{ money(row.fee_cent) }}</small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="收款账户信息" min-width="210">
+            <template #default="{ row }">
+              <div class="account-cell">
+                <div class="account-header">
+                  <el-tag size="small" effect="plain" class="acc-tag">
+                    {{ accountTypeLabel(row.account_type) }}
+                  </el-tag>
+                  <span class="acc-name">{{ row.account_name || '-' }}</span>
+                </div>
+                <small class="acc-no">{{ row.account_no }}</small>
+                <small v-if="row.bank_name" class="bank-name">{{ row.bank_name }}</small>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="状态" width="110" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusType(row.status)" class="status-pill">
+                {{ statusLabel(row.status) }}
+              </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="240" fixed="right" align="center">
+            <template #default="{ row }">
+              <div class="action-cell">
+                <el-button link type="primary" :icon="View" @click="openDetail(row)">
+                  详情
+                </el-button>
+                <el-button link type="primary" @click="goToOwnerOrders(row)"> 号主订单 </el-button>
+                <el-button
+                  v-if="row.status === 'pending'"
+                  link
+                  type="success"
+                  @click="handleReview(row, true)"
+                >
+                  通过
+                </el-button>
+                <el-button
+                  v-if="row.status === 'pending'"
+                  link
+                  type="danger"
+                  @click="handleReview(row, false)"
+                >
+                  拒绝
+                </el-button>
+                <el-button
+                  v-if="row.status === 'processing'"
+                  link
+                  type="primary"
+                  @click="handleConfirmPayment(row)"
+                >
+                  确认打款
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <AdminTablePagination
+        v-if="total > 0"
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :total="total"
+        @change="loadWithdrawals"
+      />
+    </section>
 
     <!-- 详情对话框 -->
     <WithdrawalDetailDialog
@@ -356,52 +480,421 @@ function onDetailDialogSaved() {
       :return-query="withdrawalReturnQuery"
       @saved="onDetailDialogSaved"
     />
-  </section>
+  </div>
 </template>
 
 <style scoped>
-.page {
-  padding: 24px;
+.finance-page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 32px;
 }
 
-.page-header-row {
+/* ================= 头部卡片 ================= */
+.page-header-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    0 1px 3px rgba(15, 23, 42, 0.04),
+    0 4px 12px rgba(15, 23, 42, 0.02);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+
+.header-main {
   display: flex;
-  justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 24px;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
 }
 
-.page-header {
-  flex: 1;
+.title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.eyebrow {
-  margin: 0 0 8px;
-  color: #909399;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+.eyebrow-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  color: #7c3aed;
+  background: #f5f3ff;
+  padding: 3px 10px;
+  border-radius: 20px;
+  width: fit-content;
 }
 
-.page-header h1 {
-  margin: 0 0 8px;
-  font-size: 28px;
-  font-weight: 600;
-}
-
-.page-header p {
+.page-title {
   margin: 0;
-  color: #666;
+  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;
-  gap: 8px;
+  align-items: center;
+  gap: 10px;
 }
 
-.table-panel {
-  background: #fff;
-  border-radius: 8px;
+/* ================= 核心指标卡片 ================= */
+.summary-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 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--review::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+
+.metric-card--pay::before {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+.metric-card--paid::before {
+  background: linear-gradient(90deg, #10b981, #34d399);
+}
+
+.metric-card--total::before {
+  background: linear-gradient(90deg, #64748b, #94a3b8);
+}
+
+.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.indigo {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.metric-icon-wrap.emerald {
+  background: #ecfdf5;
+  color: #10b981;
+}
+
+.metric-icon-wrap.slate {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.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;
+}
+
+.amber-val {
+  color: #d97706;
+}
+
+.indigo-val {
+  color: #4f46e5;
+}
+
+.emerald-val {
+  color: #059669;
+}
+
+.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.info {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.metric-sub-pill.success {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.metric-sub-text {
+  font-size: 11.5px;
+  color: #94a3b8;
+}
+
+/* ================= 筛选面板 ================= */
+.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));
+  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;
+}
+
+.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: #7c3aed;
+  font-size: 18px;
+}
+
+.count-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #7c3aed;
+  background: #f5f3ff;
+  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;
+}
+
+.withdraw-no-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.mono-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.id-tag {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.user-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.user-name-line {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.user-icon {
+  color: #94a3b8;
+  font-size: 13px;
+}
+
+.user-sub {
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.amount-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.withdraw-amount {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.fee-text {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.account-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.account-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.acc-tag {
+  font-weight: 600;
+}
+
+.acc-name {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #1e293b;
+}
+
+.acc-no {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 11.5px;
+  color: #64748b;
+}
+
+.bank-name {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.status-pill {
+  font-weight: 600;
+}
+
+.time-cell {
+  font-size: 12px;
+  color: #475569;
+}
+
+.action-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  flex-wrap: wrap;
 }
 </style>