From 713739475bef05d589e6c2a796c05eb68df1014b Mon Sep 17 00:00:00 2001
From: Mars <3361409208a@gmail.com>
Date: Tue, 23 Jun 2026 15:56:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(player):=20theme-2=20=E9=92=B1=E5=8C=85?=
 =?UTF-8?q?=E9=A1=B5=E4=B8=8E=E6=B5=81=E6=B0=B4=E5=B1=95=E7=A4=BA=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

- 流水金额展示统一使用 txAmountClass / txDisplayType
---
 .../src/components/WalletStatsPanel.vue       | 220 ++++++--
 apps/player/src/views/WalletDetailView.vue    | 114 ++--
 .../src/views/WalletTransactionDetailView.vue |  70 ++-
 apps/player/src/views/WalletView.vue          | 499 +++++++++++++++---
 4 files changed, 682 insertions(+), 221 deletions(-)

diff --git a/apps/player/src/components/WalletStatsPanel.vue b/apps/player/src/components/WalletStatsPanel.vue
index c3b5be6..a4edba0 100644
--- a/apps/player/src/components/WalletStatsPanel.vue
+++ b/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>
+
diff --git a/apps/player/src/views/WalletDetailView.vue b/apps/player/src/views/WalletDetailView.vue
index 55d6eaf..a5f680b 100644
--- a/apps/player/src/views/WalletDetailView.vue
+++ b/apps/player/src/views/WalletDetailView.vue
@@ -155,9 +155,9 @@ const pullIndicatorStyle = () => ({
 
 <template>
   <div class="wallet-detail-page">
-    <div class="top-bar">
+    <header class="top-bar sub-toolbar">
       <button class="back-btn" type="button" @click="router.back()">&#x2039; {{ t('history.back') }}</button>
-    </div>
+    </header>
 
     <div
       class="pull-indicator"
@@ -172,7 +172,7 @@ const pullIndicatorStyle = () => ({
     </div>
 
     <template v-else>
-      <WalletStatsPanel :items="items" :cashback-total="cashbackTotal" />
+      <WalletStatsPanel class="stats-panel" :items="items" :cashback-total="cashbackTotal" />
 
       <div class="filter-tabs">
         <button
@@ -195,17 +195,15 @@ const pullIndicatorStyle = () => ({
           class="tx-row"
           @click="goDetail(tx)"
         >
-          <div class="tx-main">
-            <div class="tx-text">
-              <span class="tx-type">{{ txLabel(tx) }}</span>
-              <span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
-            </div>
+          <div class="tx-col-left">
+            <span class="tx-type">{{ txLabel(tx) }}</span>
+            <span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
+            <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
+          </div>
+          <div class="tx-col-right">
             <span :class="txAmountClass(tx.amount)">
               {{ formatMoney(tx.amount, locale) }}
             </span>
-          </div>
-          <div class="tx-meta">
-            <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
             <span class="tx-arrow">&#x203A;</span>
           </div>
         </button>
@@ -233,6 +231,10 @@ const pullIndicatorStyle = () => ({
   padding-bottom: 24px;
 }
 
+.stats-panel {
+  margin-bottom: var(--space-section);
+}
+
 .top-bar {
   margin-bottom: 4px;
 }
@@ -240,9 +242,9 @@ const pullIndicatorStyle = () => ({
 .back-btn {
   background: none;
   border: none;
-  color: #003D6B;
+  color: var(--text-muted);
   font-size: 15px;
-  font-weight: 700;
+  font-weight: 500;
   padding: 4px 0 8px;
   cursor: pointer;
   display: flex;
@@ -260,8 +262,8 @@ const pullIndicatorStyle = () => ({
 
 .filter-tabs {
   display: flex;
-  gap: 6px;
-  margin-bottom: 12px;
+  gap: 8px;
+  margin-bottom: var(--space-section);
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
@@ -271,20 +273,21 @@ const pullIndicatorStyle = () => ({
 
 .filter-tab {
   flex-shrink: 0;
-  padding: 7px 14px;
+  padding: 8px 16px;
   border-radius: 999px;
   font-size: 12px;
-  font-weight: 700;
-  color: #6B7280;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  transition: all 0.2s;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  transition: background 0.2s, border-color 0.2s, color 0.2s;
 }
 
 .filter-tab.active {
-  color: #FFFFFF;
-  background: #003D6B;
-  border-color: #003D6B;
+  color: var(--text);
+  background: var(--bg-elevated);
+  border-color: var(--border-strong);
+  font-weight: 600;
 }
 
 .state {
@@ -293,7 +296,7 @@ const pullIndicatorStyle = () => ({
   align-items: center;
   gap: 12px;
   text-align: center;
-  color: #6B7280;
+  color: var(--text-muted);
   padding: 56px 20px;
   font-weight: 600;
   font-size: 14px;
@@ -305,17 +308,24 @@ const pullIndicatorStyle = () => ({
 
 .tx-list {
   margin-bottom: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
 }
 
 .tx-row {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
   width: 100%;
   text-align: left;
   font-size: 14px;
-  padding: 12px 16px;
+  padding: 12px 14px;
   border: none;
-  border-bottom: 1px solid #E5E7EB;
-  background: #FFFFFF;
+  border-bottom: 1px solid var(--border);
+  background: transparent;
   cursor: pointer;
 }
 
@@ -324,45 +334,39 @@ const pullIndicatorStyle = () => ({
 }
 
 .tx-row:active {
-  background: #F5F7FA;
+  background: var(--bg-hover);
 }
 
-.tx-main {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-}
-
-.tx-text {
+.tx-col-left {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 3px;
   min-width: 0;
+  flex: 1;
+}
+
+.tx-col-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
 }
 
 .tx-summary {
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.tx-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 4px;
-}
-
-.tx-type { font-weight: 700; color: #1A1A2E; }
-.pos { color: #003D6B; font-weight: 800; font-size: 15px; }
-.neg { color: #DC2626; font-weight: 700; }
-.zero { color: #6B7280; font-weight: 700; font-size: 15px; }
-.tx-time { font-size: 11px; color: #6B7280; }
-.tx-arrow { font-size: 16px; color: #6B7280; font-weight: 700; line-height: 1; }
+.tx-type { font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
+.pos { color: var(--success); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
+.neg { color: var(--text); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
+.zero { color: var(--text-muted); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
+.tx-time { font-size: 11px; color: var(--text-dim); }
+.tx-arrow { font-size: 15px; color: var(--text-dim); font-weight: 400; line-height: 1; }
 
 .sentinel {
   height: 1px;
@@ -377,11 +381,11 @@ const pullIndicatorStyle = () => ({
 .end-hint {
   text-align: center;
   font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   padding: 16px 0 4px;
   letter-spacing: 0.03em;
 }
 
-.empty { text-align: center; color: #6B7280; padding: 40px 16px; font-weight: 600; }
+.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
 </style>
diff --git a/apps/player/src/views/WalletTransactionDetailView.vue b/apps/player/src/views/WalletTransactionDetailView.vue
index 458dd40..c2c5eb1 100644
--- a/apps/player/src/views/WalletTransactionDetailView.vue
+++ b/apps/player/src/views/WalletTransactionDetailView.vue
@@ -138,9 +138,9 @@ function goCashbackDetail() {
       <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
     </div>
 
-    <div class="top-bar">
+    <header class="top-bar sub-toolbar">
       <button class="back-btn" type="button" @click="router.back()">‹ {{ t('history.back') }}</button>
-    </div>
+    </header>
 
     <div v-if="loading" class="state">
       <GoldSpinner :size="36" />
@@ -235,7 +235,7 @@ function goCashbackDetail() {
 .back-btn {
   background: none;
   border: none;
-  color: #003D6B;
+  color: var(--primary-light);
   font-size: 15px;
   font-weight: 700;
   padding: 4px 0 8px;
@@ -248,13 +248,13 @@ function goCashbackDetail() {
 .state {
   text-align: center;
   padding: 60px 20px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 14px;
   font-weight: 600;
 }
 
 .hero {
-  border-radius: 14px;
+  border-radius: var(--radius);
   padding: 20px;
   display: flex;
   flex-direction: column;
@@ -262,24 +262,23 @@ function goCashbackDetail() {
   gap: 6px;
   margin-bottom: 12px;
   text-align: center;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
 }
 
 .hero.pos {
-  border-color: rgba(0, 61, 107, 0.2);
-  background: linear-gradient(135deg, rgba(0, 61, 107, 0.04), #FFFFFF);
+  border-color: rgba(46, 204, 113, 0.35);
+  background: linear-gradient(135deg, rgba(46, 204, 113, 0.16), rgba(46, 204, 113, 0.05));
 }
 
 .hero.neg {
-  border-color: rgba(220, 38, 38, 0.2);
-  background: linear-gradient(135deg, rgba(220, 38, 38, 0.04), #FFFFFF);
+  border-color: rgba(255, 255, 255, 0.35);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
 }
 
 .hero.zero {
-  border-color: #E5E7EB;
-  background: #F5F7FA;
+  border-color: var(--border);
+  background: var(--bg-elevated);
 }
 
 .hero-type {
@@ -287,13 +286,13 @@ function goCashbackDetail() {
   font-weight: 800;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .hero-summary {
   font-size: 13px;
   font-weight: 600;
-  color: #6B7280;
+  color: var(--text);
   max-width: 100%;
   word-break: break-all;
 }
@@ -304,29 +303,28 @@ function goCashbackDetail() {
   line-height: 1.1;
 }
 
-.hero.pos .hero-amount { color: #003D6B; }
-.hero.neg .hero-amount { color: #DC2626; }
-.hero.zero .hero-amount { color: #6B7280; }
+.hero.pos .hero-amount { color: var(--success); }
+.hero.neg .hero-amount { color: var(--primary); }
+.hero.zero .hero-amount { color: var(--text-muted); }
 
 .hero-time {
   font-size: 11px;
-  color: #6B7280;
+  color: var(--neutral);
   font-weight: 600;
 }
 
 .section {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-  padding: 14px 16px;
-  margin-bottom: 10px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--space-card) 16px;
+  margin-bottom: var(--space-section);
 }
 
 .section-title {
   font-size: 12px;
   font-weight: 800;
-  color: #6B7280;
+  color: var(--text-muted);
   letter-spacing: 0.04em;
   margin-bottom: 10px;
 }
@@ -343,19 +341,19 @@ function goCashbackDetail() {
   align-items: flex-start;
   gap: 12px;
   font-size: 13px;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .sum-row span:last-child {
-  color: #1A1A2E;
+  color: var(--text);
   font-weight: 700;
   text-align: right;
   word-break: break-all;
 }
 
-.pos { color: #003D6B !important; }
-.neg { color: #DC2626 !important; }
-.zero { color: #6B7280 !important; }
+.pos { color: var(--success) !important; }
+.neg { color: var(--primary) !important; }
+.zero { color: var(--text-muted) !important; }
 
 .mono {
   font-family: ui-monospace, monospace;
@@ -372,9 +370,9 @@ function goCashbackDetail() {
   margin-top: 12px;
   padding: 10px 14px;
   border-radius: 10px;
-  border: 1px solid #003D6B;
-  background: rgba(0, 61, 107, 0.04);
-  color: #003D6B;
+  border: 1px solid var(--border-gold-soft);
+  background: var(--surface-accent);
+  color: var(--primary-light);
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
@@ -383,7 +381,7 @@ function goCashbackDetail() {
 .tx-id {
   font-family: ui-monospace, monospace;
   font-size: 12px;
-  color: #1A1A2E;
+  color: var(--text-muted);
   word-break: break-all;
   line-height: 1.5;
 }
diff --git a/apps/player/src/views/WalletView.vue b/apps/player/src/views/WalletView.vue
index 2f31f89..8df0075 100644
--- a/apps/player/src/views/WalletView.vue
+++ b/apps/player/src/views/WalletView.vue
@@ -1,263 +1,588 @@
 <script setup lang="ts">
+
 import { ref, onActivated, onMounted } from 'vue';
+
 import { useRouter } from 'vue-router';
+
 import { useI18n } from 'vue-i18n';
+
 import api from '../api';
-import { formatMoney, formatMoneyCompact } from '../utils/localeDisplay';
+
+import { formatMoney } from '../utils/localeDisplay';
+
 import { txTypeKey, txDisplayType, txAmountClass, txSummaryLabel } from '../utils/walletTx';
-import { parseCashbackApiData, sumCashbackAmount } from '../utils/cashback';
+
 import GoldSpinner from '../components/GoldSpinner.vue';
+
 import { usePullToRefresh } from '../composables/usePullToRefresh';
 
+
+
 const router = useRouter();
+
 const { t, locale } = useI18n();
 
+
+
 type Transaction = {
+
   transactionType: string;
+
   displayType?: string;
+
   summary?: string | null;
+
   summaryKind?: 'opening_bonus' | null;
+
   referenceType?: string | null;
+
   amount: string;
+
   frozenBefore?: string;
+
   frozenAfter?: string;
+
   createdAt: string;
+
   transactionId: string;
+
 };
 
+
+
 const items = ref<Transaction[]>([]);
-const cashbackTotal = ref<string>('0');
+
 const loading = ref(true);
+
 const PREVIEW_COUNT = 15;
 
+
+
 function txLabel(tx: Transaction): string {
+
   const key = txTypeKey(txDisplayType(tx));
+
   if (key) {
+
     const translated = t(key);
+
     if (translated !== key) return translated;
+
   }
+
   return tx.transactionType;
+
 }
 
+
+
 function txSubtitle(tx: Transaction): string {
+
   return txSummaryLabel(tx, t);
+
 }
 
+
+
 function goDetail(tx: Transaction) {
+
   if (!tx.transactionId) return;
+
   router.push(`/wallet/transactions/${tx.transactionId}`);
+
 }
 
+
+
 function goCashbacks() {
+
   router.push('/wallet/cashbacks');
+
 }
 
+
+
 async function fetchData() {
+
   loading.value = true;
+
   try {
-    const [txRes, cbRes] = await Promise.all([
-      api.get('/player/wallet/transactions', { params: { page: 1 } }),
-      api.get('/player/cashbacks').catch(() => ({ data: { data: [] } })),
-    ]);
-    const result = txRes.data.data ?? { items: [] };
+
+    const { data } = await api.get('/player/wallet/transactions', { params: { page: 1 } });
+
+    const result = data.data ?? { items: [] };
+
     items.value = (result.items ?? []).slice(0, PREVIEW_COUNT);
-    const cbRows = parseCashbackApiData(cbRes.data?.data);
-    cashbackTotal.value = sumCashbackAmount(cbRows).toString();
+
   } catch {
+
     /* ignore */
+
   } finally {
+
     loading.value = false;
+
   }
+
 }
 
+
+
 const { pullDistance, spinning, progress } = usePullToRefresh({
+
   onRefresh: fetchData,
+
 });
 
+
+
 onMounted(fetchData);
+
 onActivated(fetchData);
 
+
+
 const pullIndicatorStyle = () => ({
+
   height: `${pullDistance.value}px`,
+
   opacity: Math.min(pullDistance.value / 48, 1),
+
 });
+
 </script>
 
+
+
 <template>
+
   <div class="wallet-page">
+
     <div
+
       class="pull-indicator"
+
       :style="pullIndicatorStyle()"
+
     >
+
       <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+
     </div>
 
+
+
     <div v-if="loading" class="state">
+
       <GoldSpinner :size="36" />
+
       <span class="loading-text">{{ t('bet.loading') }}</span>
+
     </div>
 
+
+
     <template v-else>
-      <div class="top-bar">
-        <button type="button" class="more-link secondary" @click="goCashbacks">
-          {{ t('wallet.view_cashbacks_detail') }} &#x203A;
+
+      <div class="wallet-links">
+
+        <button type="button" class="wallet-link" @click="goCashbacks">
+
+          {{ t('wallet.view_cashbacks') }}
+
         </button>
+
         <button
+
           v-if="items.length"
+
           type="button"
-          class="more-link"
+
+          class="wallet-link wallet-link--primary"
+
           @click="router.push('/wallet/detail')"
-        >{{ t('wallet.view_all') }} &#x203A;</button>
+
+        >
+
+          {{ t('wallet.view_all') }}
+
+        </button>
+
       </div>
 
+
+
       <div v-if="items.length" class="tx-list">
+
         <button
+
           v-for="tx in items"
+
           :key="tx.transactionId"
+
           type="button"
+
           class="tx-row"
+
           @click="goDetail(tx)"
+
         >
-          <div class="tx-main">
-            <div class="tx-text">
-              <span class="tx-type">{{ txLabel(tx) }}</span>
-              <span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
-            </div>
-            <span :class="txAmountClass(tx.amount)">
-              {{ formatMoney(tx.amount, locale) }}
-            </span>
-          </div>
-          <div class="tx-meta">
+
+          <div class="tx-col-left">
+
+            <span class="tx-type">{{ txLabel(tx) }}</span>
+
+            <span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
+
             <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
-            <span class="tx-arrow">&#x203A;</span>
+
           </div>
+
+          <div class="tx-col-right">
+
+            <span :class="txAmountClass(tx.amount)">
+
+              {{ formatMoney(tx.amount, locale) }}
+
+            </span>
+
+            <span class="tx-arrow" aria-hidden="true">›</span>
+
+          </div>
+
         </button>
+
       </div>
 
+
+
       <div v-if="!items.length" class="empty">
+
         {{ t('wallet.no_records') }}
+
       </div>
+
     </template>
+
   </div>
+
 </template>
 
+
+
 <style scoped>
+
 .wallet-page {
-  padding-bottom: 16px;
+
+  padding-bottom: 24px;
+
 }
 
+
+
 .pull-indicator {
+
   display: flex;
+
   align-items: center;
+
   justify-content: center;
+
   overflow: hidden;
+
   transition: height 0.15s ease;
+
 }
 
+
+
 .state {
+
   display: flex;
+
   flex-direction: column;
+
   align-items: center;
+
   gap: 12px;
+
   text-align: center;
-  color: #6B7280;
+
+  color: var(--text-muted);
+
   padding: 56px 20px;
-  font-weight: 600;
+
+  font-weight: 500;
+
   font-size: 14px;
+
 }
 
+
+
 .loading-text {
+
   font-size: 13px;
+
 }
 
+
+
+.wallet-links {
+
+  display: flex;
+
+  align-items: center;
+
+  justify-content: space-between;
+
+  gap: 12px;
+
+  margin: 0 0 12px;
+
+}
+
+
+
+.wallet-link {
+
+  background: none;
+
+  border: none;
+
+  padding: 4px 0;
+
+  font-size: 13px;
+
+  font-weight: 500;
+
+  color: var(--text-muted);
+
+  cursor: pointer;
+
+}
+
+
+
+.wallet-link--primary {
+
+  color: var(--text);
+
+  font-weight: 600;
+
+}
+
+
+
+.wallet-link:active {
+
+  opacity: 0.72;
+
+}
+
+
+
 .tx-list {
+
   margin-bottom: 0;
+
+  background: var(--gradient-card);
+
+  border: 1px solid rgba(255, 255, 255, 0.11);
+
+  border-radius: var(--radius);
+
+  overflow: hidden;
+
+  box-shadow: var(--shadow-card-sm);
+
 }
 
+
+
 .tx-row {
-  display: block;
+
+  display: flex;
+
+  align-items: center;
+
+  justify-content: space-between;
+
+  gap: 12px;
+
   width: 100%;
+
   text-align: left;
-  font-size: 13px;
-  padding: 6px 10px;
+
+  font-size: 14px;
+
+  padding: 14px 16px;
+
   border: none;
-  border-bottom: 1px solid #E5E7EB;
-  background: #FFFFFF;
+
+  border-bottom: 1px solid var(--border);
+
+  background: transparent;
+
   cursor: pointer;
+
 }
 
+
+
 .tx-row:last-child {
+
   border-bottom: none;
+
 }
 
+
+
 .tx-row:active {
-  background: #F5F7FA;
+
+  background: var(--bg-hover);
+
 }
 
-.tx-main {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-}
 
-.tx-text {
+
+.tx-col-left {
+
   display: flex;
+
   flex-direction: column;
-  gap: 2px;
+
+  gap: 3px;
+
   min-width: 0;
+
+  flex: 1;
+
 }
 
+
+
+.tx-col-right {
+
+  display: flex;
+
+  align-items: center;
+
+  gap: 6px;
+
+  flex-shrink: 0;
+
+}
+
+
+
 .tx-summary {
-  font-size: 11px;
-  color: #6B7280;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 
-.tx-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 3px;
-}
-
-.tx-type { font-weight: 700; color: #1A1A2E; }
-.pos { color: #003D6B; font-weight: 800; font-size: 14px; }
-.neg { color: #DC2626; font-weight: 700; }
-.zero { color: #6B7280; font-weight: 700; font-size: 14px; }
-.tx-time { font-size: 11px; color: #6B7280; }
-.tx-arrow { font-size: 16px; color: #6B7280; font-weight: 700; line-height: 1; }
-
-.top-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 4px 1px;
-  margin-top: -6px;
-}
-
-.top-bar .more-link.secondary {
-  color: #005B9F;
-}
-
-.more-link {
-  background: none;
-  border: none;
-  color: #003D6B;
   font-size: 12px;
+
+  color: var(--text-dim);
+
+  font-weight: 500;
+
+  white-space: nowrap;
+
+  overflow: hidden;
+
+  text-overflow: ellipsis;
+
+}
+
+
+
+.tx-type {
+
   font-weight: 600;
-  padding: 2px 6px;
-  cursor: pointer;
-  opacity: 0.8;
-  transition: opacity 0.2s;
+
+  color: var(--text);
+
+  letter-spacing: -0.01em;
+
 }
 
-.more-link:active {
-  opacity: 1;
+
+
+.pos {
+
+  color: var(--success);
+
+  font-weight: 600;
+
+  font-size: 14px;
+
+  font-variant-numeric: tabular-nums;
+
+}
+
+
+
+.neg {
+
+  color: var(--text);
+
+  font-weight: 600;
+
+  font-size: 14px;
+
+  font-variant-numeric: tabular-nums;
+
+}
+
+
+
+.zero {
+
+  color: var(--text-muted);
+
+  font-weight: 600;
+
+  font-size: 14px;
+
+  font-variant-numeric: tabular-nums;
+
+}
+
+
+
+.tx-time {
+
+  font-size: 11px;
+
+  color: var(--text-dim);
+
+}
+
+
+
+.tx-arrow {
+
+  font-size: 15px;
+
+  color: var(--text-dim);
+
+  font-weight: 400;
+
+  line-height: 1;
+
+}
+
+
+
+.empty {
+
+  text-align: center;
+
+  color: var(--text-muted);
+
+  padding: 40px 16px;
+
+  font-weight: 500;
+
 }
 
-.empty { text-align: center; color: #6B7280; padding: 28px 14px; font-weight: 600; }
 </style>
+