feat(player): theme-2 钱包页与流水展示优化

- 钱包首页、明细、交易详情适配 Pinnacle 浅色主题

- WalletStatsPanel 统计面板布局与样式更新

- 流水金额展示统一使用 txAmountClass / txDisplayType

apps/player/src/components/WalletStatsPanel.vue

@@ -1,130 +1,264 @@
 <script setup lang="ts">
+
 import { computed } from 'vue';
+
 import { useI18n } from 'vue-i18n';
+
 import { formatMoneyCompact, parseAmount } from '../utils/localeDisplay';
 
+
+
 interface Transaction {
+
   transactionType: string;
+
   amount: string;
+
   frozenBefore?: string;
+
   frozenAfter?: string;
+
   createdAt: string;
+
   transactionId?: string;
+
 }
 
+
+
 const props = withDefaults(defineProps<{
+
   items: Transaction[];
+
   cashbackTotal?: string;
+
 }>(), {
+
   cashbackTotal: '0',
+
 });
+
 const { t, locale } = useI18n();
 
+
+
 const CASHBACK_TYPES = new Set(['CASHBACK', 'CASHBACK_DEPOSIT']);
 
+
+
 const stats = computed(() => {
+
   let income = 0;
+
   let expense = 0;
+
   let cashback = 0;
 
+
+
   for (const tx of props.items) {
+
     const amt = parseAmount(tx.amount);
+
     const isCb = CASHBACK_TYPES.has(tx.transactionType.toUpperCase());
+
     if (isCb) {
+
       cashback += Math.abs(amt);
+
     }
+
     if (amt >= 0) income += amt;
+
     else expense += Math.abs(amt);
+
   }
 
-  // Use server-side cashback total if provided (more accurate across all pages)
+
+
   if (props.cashbackTotal !== '0') {
+
     cashback = Math.abs(parseAmount(props.cashbackTotal));
+
   }
 
+
+
   const net = income - expense;
 
+
+
   return { income, expense, net, cashback };
+
 });
+
 </script>
 
+
+
 <template>
+
   <div class="wallet-stats-panel">
-    <div class="stats-row">
-      <div class="stat-item">
+
+    <div class="stats-grid">
+
+      <div class="stat-cell">
+
         <span class="stat-label">{{ t('wallet.stats_income') }}</span>
+
         <span class="stat-val income">{{ formatMoneyCompact(stats.income, locale) }}</span>
+
       </div>
-      <div class="stat-item">
+
+      <div class="stat-cell">
+
         <span class="stat-label">{{ t('wallet.stats_expense') }}</span>
+
         <span class="stat-val expense">{{ formatMoneyCompact(stats.expense, locale) }}</span>
+
       </div>
-    </div>
-    <div class="stats-divider" />
-    <div class="stats-row">
-      <div class="stat-item">
+
+      <div class="stat-cell">
+
         <span class="stat-label">{{ t('wallet.stats_net') }}</span>
-        <span class="stat-val" :class="stats.net >= 0 ? 'income' : 'expense'">
+
+        <span class="stat-val" :class="stats.net >= 0 ? 'income' : 'muted'">
+
           {{ formatMoneyCompact(stats.net, locale) }}
+
         </span>
+
       </div>
-      <div class="stat-item">
+
+      <div class="stat-cell">
+
         <span class="stat-label">{{ t('wallet.stats_cashback') }}</span>
-        <span class="stat-val cashback">{{ formatMoneyCompact(stats.cashback, locale) }}</span>
+
+        <span class="stat-val">{{ formatMoneyCompact(stats.cashback, locale) }}</span>
+
       </div>
+
     </div>
+
   </div>
+
 </template>
 
+
+
 <style scoped>
+
 .wallet-stats-panel {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-  padding: 12px;
-  margin-bottom: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+  position: relative;
+
+  background: var(--gradient-card);
+
+  border: 1px solid rgba(255, 255, 255, 0.11);
+
+  border-radius: var(--radius);
+
+  padding: 14px 16px;
+
+  margin-bottom: var(--space-section);
+
+  box-shadow: var(--shadow-card-sm);
+
+  overflow: hidden;
+
 }
 
-.stats-row {
+
+
+.wallet-stats-panel::before {
+
+  content: '';
+
+  position: absolute;
+
+  top: 0;
+
+  left: 10%;
+
+  right: 10%;
+
+  height: 1px;
+
+  background: var(--gradient-card-shine);
+
+  pointer-events: none;
+
+}
+
+
+
+.stats-grid {
+
+  display: grid;
+
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  gap: 12px 16px;
+
+}
+
+
+
+.stat-cell {
+
   display: flex;
-  align-items: center;
+
+  flex-direction: column;
+
+  gap: 4px;
+
+  min-width: 0;
+
 }
 
-.stat-item {
-  flex: 1;
-  text-align: center;
-  min-width: 0;
-  padding: 4px 8px;
-}
+
 
 .stat-label {
-  display: block;
-  font-size: 11px;
-  font-weight: 700;
-  color: #6B7280;
-  letter-spacing: 0.03em;
-  margin-bottom: 2px;
+
+  font-size: 12px;
+
+  font-weight: 500;
+
+  color: var(--text-dim);
+
+  letter-spacing: 0;
+
 }
 
+
+
 .stat-val {
-  display: block;
-  font-size: 14px;
-  font-weight: 800;
+
+  font-size: 15px;
+
+  font-weight: 600;
+
   font-variant-numeric: tabular-nums;
+
   white-space: nowrap;
+
   overflow: hidden;
+
   text-overflow: ellipsis;
-  color: #1A1A2E;
+
+  color: var(--text);
+
+  letter-spacing: -0.02em;
+
 }
 
-.stat-val.income { color: #059669; }
-.stat-val.expense { color: #DC2626; }
-.stat-val.cashback { color: #F8971F; }
 
-.stats-divider {
-  height: 1px;
-  margin: 6px 8px;
-  background: #E5E7EB;
-}
+
+.stat-val.income { color: var(--success); }
+
+.stat-val.expense { color: var(--text-muted); }
+
+.stat-val.muted { color: var(--text-muted); }
+
 </style>
+