From b9df2c3ee5f75b997b9b485b510dea7f16c88cec Mon Sep 17 00:00:00 2001
From: yml <yml@yml.com>
Date: Tue, 9 Jun 2026 10:36:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=B4=A2=E5=8A=A1=E6=98=8E?=
 =?UTF-8?q?=E7=BB=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/views/AdminFinanceDetailsView.vue   | 249 ++++++++++++++----
 1 file changed, 192 insertions(+), 57 deletions(-)

diff --git a/frontend/src/features/admin/views/AdminFinanceDetailsView.vue b/frontend/src/features/admin/views/AdminFinanceDetailsView.vue
index a0e94fd..c745552 100644
--- a/frontend/src/features/admin/views/AdminFinanceDetailsView.vue
+++ b/frontend/src/features/admin/views/AdminFinanceDetailsView.vue
@@ -93,6 +93,12 @@ function settlementStatusLabel(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)
@@ -109,7 +115,7 @@ function formatInputDate(date: Date) {
 </script>
 
 <template>
-  <section class="page">
+  <section class="page finance-details-page">
     <div class="page-header-row">
       <div class="page-header">
         <p class="eyebrow">Finance Details</p>
@@ -124,7 +130,7 @@ function formatInputDate(date: Date) {
       </div>
     </div>
 
-    <el-form class="filter-panel" label-position="top">
+    <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" />
@@ -175,63 +181,65 @@ function formatInputDate(date: Date) {
       </el-form-item>
     </el-form>
 
-    <el-table v-loading="loading" class="table-panel" :data="details">
-      <el-table-column label="订单" min-width="180">
-        <template #default="{ row }">
-          <RouterLink :to="`/admin/orders/${row.order_id}`">{{ row.order_no }}</RouterLink>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" width="150">
-        <template #default="{ row }">
-          <div>{{ orderStatusLabel(row.order_status) }}</div>
-          <small>{{ settlementStatusLabel(row.settlement_status) }}</small>
-        </template>
-      </el-table-column>
-      <el-table-column label="租客/号主" min-width="170">
-        <template #default="{ row }">
-          <div>{{ row.renter_phone || row.renter_nickname || row.renter_id }}</div>
-          <small>{{ row.owner_phone || row.owner_nickname || row.owner_id }}</small>
-        </template>
-      </el-table-column>
-      <el-table-column label="收款" width="110">
-        <template #default="{ row }">{{ moneyCent(row.paid_amount_cent) }}</template>
-      </el-table-column>
-      <el-table-column label="已退款" width="110">
-        <template #default="{ row }">{{ moneyCent(row.refunded_amount_cent) }}</template>
-      </el-table-column>
-      <el-table-column label="退款中" width="110">
-        <template #default="{ row }">{{ moneyCent(row.refunding_amount_cent) }}</template>
-      </el-table-column>
-      <el-table-column label="净流入" width="110">
-        <template #default="{ row }">{{ moneyCent(row.channel_net_amount_cent) }}</template>
-      </el-table-column>
-      <el-table-column label="平台收入" width="110">
-        <template #default="{ row }">{{ money(row.checkout_platform_fee) }}</template>
-      </el-table-column>
-      <el-table-column label="号主应得" width="110">
-        <template #default="{ row }">{{ money(row.checkout_owner_income) }}</template>
-      </el-table-column>
-      <el-table-column label="号主入账" width="110">
-        <template #default="{ row }">{{ money(row.owner_wallet_income_amount) }}</template>
-      </el-table-column>
-      <el-table-column label="差异" width="110">
-        <template #default="{ row }">
-          <span :class="{ 'amount-danger': Math.abs(row.settlement_diff_amount) >= 0.05 }">
+    <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="`/admin/orders/${row.order_id}`">
+              {{ row.order_no }}
+            </RouterLink>
+            <span class="cell-muted">结算 {{ shortDateTime(row.settled_at) }}</span>
+          </div>
+
+          <div class="status-stack">
+            <span>{{ orderStatusLabel(row.order_status) }}</span>
+            <small>{{ settlementStatusLabel(row.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">{{ money(row.checkout_platform_fee) }}</span>
+          <span class="amount-text amount-cell">{{ money(row.checkout_owner_income) }}</span>
+          <span class="amount-text amount-cell">{{ money(row.owner_wallet_income_amount) }}</span>
+          <span
+            class="amount-text amount-cell"
+            :class="{ 'amount-danger': Math.abs(row.settlement_diff_amount) >= 0.05 }"
+          >
             {{ money(row.settlement_diff_amount) }}
           </span>
-        </template>
-      </el-table-column>
-      <el-table-column label="财务状态" width="120">
-        <template #default="{ row }">
-          <el-tag :type="financeStatusType(row.finance_status)">
-            {{ financeStatusLabel(row.finance_status) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="结算时间" min-width="170">
-        <template #default="{ row }">{{ row.settled_at ? formatDateTime(row.settled_at) : '-' }}</template>
-      </el-table-column>
-    </el-table>
+        </div>
+      </div>
+
+      <el-empty v-else :image-size="80" description="暂无财务明细" />
+    </div>
 
     <AdminTablePagination
       v-if="total > 0"
@@ -245,8 +253,135 @@ function formatInputDate(date: Date) {
 </template>
 
 <style scoped>
+.finance-details-page {
+  --finance-muted: #7f8aa3;
+}
+
+.finance-details-page :deep(.page-header-row) {
+  margin-bottom: 18px;
+}
+
+.finance-details-page :deep(.page-header h1) {
+  font-size: 28px;
+}
+
+.finance-filter-panel {
+  grid-template-columns: 7% 10% 10% 29% 23% 10% 11%;
+  gap: 10px;
+  margin-bottom: 16px;
+  padding: 14px 16px;
+}
+
+.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%);
+  align-items: center;
+  width: 100%;
+}
+
+.finance-grid-header {
+  border-bottom: 1px solid #edf1f7;
+  color: #7f8aa3;
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: 0;
+  line-height: 1.35;
+  text-transform: none;
+}
+
+.finance-grid-header > div,
+.finance-grid-row > div,
+.finance-grid-row > span {
+  min-width: 0;
+  padding: 8px 7px;
+}
+
+.finance-grid-row {
+  border-bottom: 1px solid #edf1f7;
+}
+
+.finance-grid-row:last-child {
+  border-bottom: 0;
+}
+
+.order-cell,
+.status-stack,
+.party-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;
+}
+
+.cell-muted,
+.status-stack small,
+.party-cell span {
+  color: var(--finance-muted);
+  font-size: 12px;
+}
+
+.status-stack > span {
+  color: #364152;
+  font-weight: 600;
+}
+
+.party-cell span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.amount-text {
+  display: block;
+  overflow: hidden;
+  color: #344054;
+  font-size: 12px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.amount-cell {
+  text-align: right;
+}
+
+.muted-amount {
+  color: #667085;
+}
+
 .amount-danger {
   color: #dc2626;
   font-weight: 700;
 }
+
+@media (max-width: 1440px) {
+  .finance-filter-panel {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
 </style>