From 7ea7deeb525160c59723648d11006e9b60040e54 Mon Sep 17 00:00:00 2001
From: mars <3361409208@qq.com>
Date: Fri, 10 Jul 2026 15:01:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(player):=20PC=E7=AB=AF=E6=8A=95=E6=B3=A8/?=
 =?UTF-8?q?=E8=B5=84=E9=87=91=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97=E5=8C=96?=
 =?UTF-8?q?=20+=20=E8=AF=A6=E6=83=85=E9=A1=B5=E5=B8=83=E5=B1=80=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20-=20=E6=96=B0=E5=A2=9E=20DesktopBetDetailModal=20/?=
 =?UTF-8?q?=20DesktopTxDetailModal=20=E5=BC=B9=E7=AA=97=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E5=88=97=E8=A1=A8=E7=82=B9=E5=87=BB=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E8=AF=A6=E6=83=85=20-=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=20PC=20=E7=AB=AF=E6=B3=A8=E5=8D=95=E8=AF=A6=E6=83=85=E3=80=81?=
 =?UTF-8?q?=E9=92=B1=E5=8C=85=E4=BA=A4=E6=98=93=E8=AF=A6=E6=83=85=E3=80=81?=
 =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E8=B5=84=E6=96=99=E9=A1=B5=E7=9A=84=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=EF=BC=88=E5=8F=8C=E5=88=97=E7=BD=91=E6=A0=BC=E3=80=81?=
 =?UTF-8?q?=E5=8A=A0=E5=AE=BD=20max-width=EF=BC=89=20-=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=9B=B8=E5=85=B3=20i18n=20=E4=B8=89=E8=AF=AD?=
 =?UTF-8?q?=E7=BF=BB=E8=AF=91=20key=20-=20DesktopMyBetsView=20/=20DesktopW?=
 =?UTF-8?q?alletView=20=E5=88=97=E8=A1=A8=E9=A1=B9=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E6=89=93=E5=BC=80=E5=BC=B9=E7=AA=97=E8=80=8C?=
 =?UTF-8?q?=E9=9D=9E=E8=B7=B3=E8=BD=AC=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../desktop/DesktopBetDetailModal.vue         | 390 ++++++++++++
 .../src/components/desktop/DesktopShell.vue   |   2 +-
 .../desktop/DesktopTxDetailModal.vue          | 289 +++++++++
 apps/player/src/i18n/en-US.ts                 |  16 +
 apps/player/src/i18n/ms-MY.ts                 |  16 +
 apps/player/src/i18n/zh-CN.ts                 |  16 +
 apps/player/src/styles/desktop/layout.css     |   7 +
 .../views/desktop/DesktopBetDetailView.vue    | 213 +++++--
 .../src/views/desktop/DesktopMyBetsView.vue   |  15 +-
 .../views/desktop/DesktopProfileEditView.vue  | 348 +++++++----
 .../src/views/desktop/DesktopProfileView.vue  | 590 ++++++++++++------
 .../DesktopWalletTransactionDetailView.vue    | 111 ++--
 .../src/views/desktop/DesktopWalletView.vue   |  16 +-
 13 files changed, 1621 insertions(+), 408 deletions(-)
 create mode 100644 apps/player/src/components/desktop/DesktopBetDetailModal.vue
 create mode 100644 apps/player/src/components/desktop/DesktopTxDetailModal.vue

diff --git a/apps/player/src/components/desktop/DesktopBetDetailModal.vue b/apps/player/src/components/desktop/DesktopBetDetailModal.vue
new file mode 100644
index 0000000..5bbd46f
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopBetDetailModal.vue
@@ -0,0 +1,390 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import api from '../../api';
+import GoldSpinner from '../GoldSpinner.vue';
+
+const props = defineProps<{
+  visible: boolean;
+  betNo: string | null;
+}>();
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean];
+}>();
+
+const { t, locale } = useI18n();
+
+type BetDetail = {
+  betNo: string;
+  stake: string;
+  potentialReturn?: string;
+  status: string;
+  placedAt: string;
+  legs: Array<{
+    matchTitle?: string;
+    marketLabel?: string;
+    selectionName?: string;
+    odds?: number;
+    resultStatus?: string;
+    score?: { ht: string | null; ft: string | null } | null;
+    [key: string]: any;
+  }>;
+  [key: string]: any;
+};
+
+const detail = ref<BetDetail | null>(null);
+const loading = ref(true);
+const error = ref(false);
+
+async function loadDetail(betNo: string) {
+  loading.value = true;
+  error.value = false;
+  detail.value = null;
+  try {
+    const { data } = await api.get(`/player/bets/${betNo}`);
+    detail.value = data.data ?? null;
+  } catch {
+    error.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => [props.visible, props.betNo] as const,
+  ([vis, no]) => {
+    if (vis && no) loadDetail(no);
+    if (!vis) {
+      detail.value = null;
+      error.value = false;
+    }
+  },
+  { immediate: true },
+);
+
+function close() {
+  emit('update:visible', false);
+}
+
+function statusClass(status: string) {
+  const map: Record<string, string> = { WON: 'st-won', LOST: 'st-lost', PENDING: 'st-pending', PUSH: 'st-push' };
+  return map[status?.toUpperCase()] ?? 'st-default';
+}
+
+function statusLabel(status: string) {
+  const map: Record<string, string> = {
+    WON: t('history.filter_won'),
+    LOST: t('history.filter_lost'),
+    PENDING: t('history.filter_pending'),
+    PUSH: t('history.filter_push'),
+  };
+  return map[status?.toUpperCase()] ?? status;
+}
+
+const SEL_TRANS: Record<string, Record<string, string>> = {
+  '主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
+  '客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
+  '和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
+  '主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
+  '客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
+  '大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
+  '小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
+  '单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
+  '双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
+  '冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
+};
+
+function translateSel(name: string): string {
+  if (locale.value === 'zh-CN') return name;
+  const exact = SEL_TRANS[name];
+  if (exact) return exact[locale.value] ?? exact['en-US'] ?? name;
+  const sp = name.indexOf(' ');
+  if (sp > 0) {
+    const head = name.slice(0, sp);
+    const m = SEL_TRANS[head];
+    if (m) return (m[locale.value] ?? m['en-US'] ?? head) + name.slice(sp);
+  }
+  return name;
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal-fade">
+      <div v-if="visible" class="modal-overlay" @click.self="close">
+        <div class="modal-container" role="dialog" aria-modal="true">
+          <div class="modal-header">
+            <span class="modal-title">{{ t('bet.detail_title') || '注单详情' }}</span>
+            <button type="button" class="modal-close" @click="close">✕</button>
+          </div>
+
+          <div class="modal-body">
+            <div v-if="loading" class="modal-loading">
+              <GoldSpinner :size="32" />
+            </div>
+
+            <div v-else-if="error" class="modal-error">
+              <p>{{ t('common.load_failed') }}</p>
+              <button v-if="betNo" type="button" class="retry-btn" @click="loadDetail(betNo)">{{ t('common.retry') }}</button>
+            </div>
+
+            <template v-else-if="detail">
+              <div class="info-rows">
+                <div class="info-row">
+                  <span class="row-label">{{ t('bet.bet_no') || '注单号' }}</span>
+                  <span class="row-val mono">{{ detail.betNo }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="row-label">{{ t('common.status') || '状态' }}</span>
+                  <span class="row-val">
+                    <span class="st-badge" :class="statusClass(detail.status)">{{ statusLabel(detail.status) }}</span>
+                  </span>
+                </div>
+                <div class="info-row">
+                  <span class="row-label">{{ t('bet.stake') || '投注额' }}</span>
+                  <span class="row-val">{{ detail.stake }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="row-label">{{ t('bet.potential_payout') || '预计派彩' }}</span>
+                  <span class="row-val gold">{{ detail.potentialReturn || '-' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="row-label">{{ t('bet.placed_at') || '下注时间' }}</span>
+                  <span class="row-val muted">{{ detail.placedAt ? new Date(detail.placedAt).toLocaleString() : '-' }}</span>
+                </div>
+              </div>
+
+              <div class="sel-section">
+                <div class="sel-section-title">{{ t('bet.selections') || '投注选项' }}</div>
+                <div v-for="(leg, idx) in detail.legs" :key="idx" class="sel-item">
+                  <div class="sel-item-main">
+                    <span class="sel-item-match">{{ leg.matchTitle || t('bet.match') }}</span>
+                    <span class="sel-item-pick">
+                      {{ leg.marketLabel || '' }} · {{ translateSel(leg.selectionName || '') }}
+                    </span>
+                    <span v-if="leg.score?.ft" class="sel-item-score">{{ t('history.ft') }}: {{ leg.score.ft }}</span>
+                  </div>
+                  <span class="sel-item-odds">@{{ leg.odds }}</span>
+                </div>
+              </div>
+            </template>
+
+            <div v-else class="modal-empty">{{ t('common.not_found') || '未找到记录' }}</div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.modal-container {
+  width: 100%;
+  max-width: 520px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--desktop-sidebar-bg, rgba(20, 20, 20, 0.95));
+  border: 1px solid var(--desktop-border, #262626);
+  border-radius: 4px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--desktop-border, #262626);
+  flex-shrink: 0;
+}
+
+.modal-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.modal-close:hover { color: var(--text); }
+
+.modal-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.modal-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 48px 0;
+}
+
+.modal-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 48px 20px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.retry-btn {
+  padding: 6px 18px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold-soft, rgba(212,175,55,0.25));
+  background: transparent;
+  color: var(--primary-light, #F0D875);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.modal-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 20px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+/* Info rows */
+.info-rows {
+  border-bottom: 1px solid var(--desktop-border, #262626);
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.info-row:last-child { border-bottom: none; }
+
+.row-label {
+  width: 90px;
+  flex-shrink: 0;
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.row-val {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.row-val.gold { color: var(--primary-light, #F0D875); }
+.row-val.muted { color: var(--text-muted); font-weight: 500; }
+
+.mono { font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; }
+
+.st-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 2px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.st-won { background: rgba(52,199,89,0.12); color: #4cd964; }
+.st-lost { background: rgba(255,69,58,0.12); color: #ff453a; }
+.st-pending { background: rgba(212,175,55,0.12); color: var(--primary-light); }
+.st-push { background: rgba(100,100,100,0.12); color: #aaa; }
+.st-default { background: rgba(100,100,100,0.1); color: #888; }
+
+/* Selections */
+.sel-section { padding: 12px 16px 16px; }
+
+.sel-section-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--desktop-border, #262626);
+}
+
+.sel-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+}
+
+.sel-item:last-child { border-bottom: none; }
+
+.sel-item-main {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.sel-item-match {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.sel-item-pick {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.sel-item-score {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.sel-item-odds {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light, #F0D875);
+  flex-shrink: 0;
+  font-family: 'SF Mono', 'Consolas', monospace;
+}
+
+/* Transition */
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/apps/player/src/components/desktop/DesktopShell.vue b/apps/player/src/components/desktop/DesktopShell.vue
index d9c592f..c142700 100644
--- a/apps/player/src/components/desktop/DesktopShell.vue
+++ b/apps/player/src/components/desktop/DesktopShell.vue
@@ -39,7 +39,7 @@ const layoutMode = computed<'betting' | 'account' | 'hub' | 'marketing'>(() => {
     p === '/bets' ||
     p.startsWith('/bets/') ||
     p.startsWith('/wallet') ||
-    p === '/profile/cashbacks'
+    p.startsWith('/profile')
   ) {
     return 'account';
   }
diff --git a/apps/player/src/components/desktop/DesktopTxDetailModal.vue b/apps/player/src/components/desktop/DesktopTxDetailModal.vue
new file mode 100644
index 0000000..c0c4914
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopTxDetailModal.vue
@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import api from '../../api';
+import GoldSpinner from '../GoldSpinner.vue';
+import { formatMoney } from '../../utils/localeDisplay';
+import { txTypeKey, txDisplayType, txSummaryLabel } from '../../utils/walletTx';
+
+const props = defineProps<{
+  visible: boolean;
+  transactionId: string | null;
+}>();
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean];
+}>();
+
+const { t, locale } = useI18n();
+
+type TxDetail = {
+  transactionId: string;
+  transactionType: string;
+  displayType?: string;
+  summary?: string | null;
+  amount: string;
+  balanceBefore?: string;
+  balanceAfter?: string;
+  frozenBefore?: string;
+  frozenAfter?: string;
+  createdAt: string;
+  referenceType?: string | null;
+  [key: string]: any;
+};
+
+const detail = ref<TxDetail | null>(null);
+const loading = ref(true);
+const error = ref(false);
+
+async function loadDetail(id: string) {
+  loading.value = true;
+  error.value = false;
+  detail.value = null;
+  try {
+    const { data } = await api.get(`/player/wallet/transactions/${id}`);
+    detail.value = data.data ?? null;
+  } catch {
+    error.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => [props.visible, props.transactionId] as const,
+  ([vis, id]) => {
+    if (vis && id) loadDetail(id);
+    if (!vis) {
+      detail.value = null;
+      error.value = false;
+    }
+  },
+  { immediate: true },
+);
+
+function close() {
+  emit('update:visible', false);
+}
+
+function txLabel(tx: TxDetail): string {
+  const key = txTypeKey(txDisplayType(tx));
+  if (key) {
+    const translated = t(key);
+    if (translated !== key) return translated;
+  }
+  return tx.transactionType;
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal-fade">
+      <div v-if="visible" class="modal-overlay" @click.self="close">
+        <div class="modal-container" role="dialog" aria-modal="true">
+          <div class="modal-header">
+            <span class="modal-title">{{ t('wallet.transaction_detail') || '交易详情' }}</span>
+            <button type="button" class="modal-close" @click="close">✕</button>
+          </div>
+
+          <div class="modal-body">
+            <div v-if="loading" class="modal-loading">
+              <GoldSpinner :size="32" />
+            </div>
+
+            <div v-else-if="error" class="modal-error">
+              <p>{{ t('common.load_failed') }}</p>
+              <button v-if="transactionId" type="button" class="retry-btn" @click="loadDetail(transactionId)">{{ t('common.retry') }}</button>
+            </div>
+
+            <template v-else-if="detail">
+              <div class="info-rows">
+                <div class="info-row">
+                  <span class="row-label">{{ t('wallet.type') || '类型' }}</span>
+                  <span class="row-val">{{ txLabel(detail) }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="row-label">{{ t('wallet.amount') || '金额' }}</span>
+                  <span class="row-val mono" :class="parseFloat(detail.amount) >= 0 ? 'pos' : 'neg'">{{ formatMoney(detail.amount, locale) }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="row-label">{{ t('wallet.note') || '备注' }}</span>
+                  <span class="row-val">{{ txSummaryLabel(detail, t) || '-' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="row-label">{{ t('wallet.balance_before') || '变动前余额' }}</span>
+                  <span class="row-val mono">{{ formatMoney(detail.balanceBefore, locale) }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="row-label">{{ t('wallet.balance_after') || '变动后余额' }}</span>
+                  <span class="row-val mono">{{ formatMoney(detail.balanceAfter, locale) }}</span>
+                </div>
+                <div v-if="parseFloat(detail.frozenBefore || '0') > 0 || parseFloat(detail.frozenAfter || '0') > 0" class="info-row">
+                  <span class="row-label">{{ t('wallet.frozen_before') || '冻结前' }}</span>
+                  <span class="row-val mono">{{ formatMoney(detail.frozenBefore, locale) }}</span>
+                </div>
+                <div v-if="parseFloat(detail.frozenBefore || '0') > 0 || parseFloat(detail.frozenAfter || '0') > 0" class="info-row">
+                  <span class="row-label">{{ t('wallet.frozen_after') || '冻结后' }}</span>
+                  <span class="row-val mono">{{ formatMoney(detail.frozenAfter, locale) }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="row-label">{{ t('wallet.time') || '时间' }}</span>
+                  <span class="row-val muted">{{ new Date(detail.createdAt).toLocaleString() }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="row-label">{{ t('wallet.transaction_id') || '流水号' }}</span>
+                  <span class="row-val mono muted">{{ detail.transactionId }}</span>
+                </div>
+              </div>
+            </template>
+
+            <div v-else class="modal-empty">{{ t('common.not_found') || '未找到记录' }}</div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.modal-container {
+  width: 100%;
+  max-width: 460px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--desktop-sidebar-bg, rgba(20, 20, 20, 0.95));
+  border: 1px solid var(--desktop-border, #262626);
+  border-radius: 4px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--desktop-border, #262626);
+  flex-shrink: 0;
+}
+
+.modal-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.modal-close:hover { color: var(--text); }
+
+.modal-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.modal-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 48px 0;
+}
+
+.modal-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 48px 20px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.retry-btn {
+  padding: 6px 18px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold-soft, rgba(212,175,55,0.25));
+  background: transparent;
+  color: var(--primary-light, #F0D875);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.modal-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 20px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+/* Info rows */
+.info-rows { }
+
+.info-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.info-row:last-child { border-bottom: none; }
+
+.row-label {
+  width: 100px;
+  flex-shrink: 0;
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.row-val {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+  word-break: break-all;
+}
+
+.row-val.pos { color: var(--primary-light, #F0D875); }
+.row-val.neg { color: var(--danger, #FF453A); }
+.row-val.muted { color: var(--text-muted); font-weight: 500; }
+
+.mono { font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; }
+
+/* Transition */
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/apps/player/src/i18n/en-US.ts b/apps/player/src/i18n/en-US.ts
index 24868d0..450ec70 100644
--- a/apps/player/src/i18n/en-US.ts
+++ b/apps/player/src/i18n/en-US.ts
@@ -313,6 +313,9 @@ export default {
     recharge_btn: 'Deposit',
     recharge_history: 'Deposit history',
     cashbacks_tab: 'Cashback',
+    detail_info: 'Details',
+    frozen_before: 'Frozen before',
+    frozen_after: 'Frozen after',
   },
   recharge: {
     title: 'Recharge',
@@ -601,6 +604,9 @@ export default {
     placed_at: 'Placed at',
     detail_title: 'Bet details',
     selections: 'Selections',
+    summary: 'Bet summary',
+    legs_count: 'Legs',
+    back_to_list: 'Back to bet list',
   },
   profile: {
     edit: 'Edit Profile',
@@ -656,5 +662,15 @@ export default {
     rules_p3: 'Results use admin-entered half-time and full-time scores; payouts apply after settlement preview is confirmed.',
     rules_p4: 'If this text conflicts with site notices, the latest notice and market rules prevail.',
     rules_p5: 'How to bet: open any match, tap the ? icon on the top right.',
+    qnav_bets_desc: 'View bet history',
+    qnav_wallet_desc: 'Wallet transactions',
+    qnav_cashback_desc: 'Cashback records',
+    qnav_recharge_desc: 'Deposit funds',
+    qnav_announcements_desc: 'View announcements',
+    qnav_edit_desc: 'Edit your profile',
+    security_tips: 'Security tips',
+    tip_1: 'Change your password regularly to keep your account secure',
+    tip_2: 'Never share your password with anyone',
+    tip_3: 'Contact customer service if you need help',
   },
 } as const;
diff --git a/apps/player/src/i18n/ms-MY.ts b/apps/player/src/i18n/ms-MY.ts
index cfe8a6d..1322d8c 100644
--- a/apps/player/src/i18n/ms-MY.ts
+++ b/apps/player/src/i18n/ms-MY.ts
@@ -325,6 +325,9 @@ export default {
     recharge_btn: 'Topup',
     recharge_history: 'Sejarah topup',
     cashbacks_tab: 'Rebat',
+    detail_info: 'Butiran',
+    frozen_before: 'Beku sebelum',
+    frozen_after: 'Beku selepas',
   },
   recharge: {
     title: 'Topup',
@@ -613,6 +616,9 @@ export default {
     placed_at: 'Masa pertaruhan',
     detail_title: 'Butiran pertaruhan',
     selections: 'Pilihan',
+    summary: 'Ringkasan pertaruhan',
+    legs_count: 'Bilangan pilihan',
+    back_to_list: 'Kembali ke senarai pertaruhan',
   },
   profile: {
     edit: 'Edit Profil',
@@ -668,5 +674,15 @@ export default {
     rules_p3: 'Keputusan berdasarkan skor separuh masa/penuh yang dimasukkan admin; bayaran selepas pratonton disahkan.',
     rules_p4: 'Jika bercanggah dengan notis laman, ikut notis terkini dan peraturan pasaran.',
     rules_p5: 'Langkah operasi: buka butiran perlawanan, ketik ikon ? di atas kanan.',
+    qnav_bets_desc: 'Lihat sejarah pertaruhan',
+    qnav_wallet_desc: 'Transaksi dompet',
+    qnav_cashback_desc: 'Rekod rebat',
+    qnav_recharge_desc: 'Tambah dana',
+    qnav_announcements_desc: 'Lihat pengumuman',
+    qnav_edit_desc: 'Edit profil anda',
+    security_tips: 'Tip keselamatan',
+    tip_1: 'Tukar kata laluan secara berkala untuk keselamatan akaun',
+    tip_2: 'Jangan berkongsi kata laluan dengan sesiapa',
+    tip_3: 'Hubungi perkhidmatan pelanggan jika memerlukan bantuan',
   },
 } as const;
diff --git a/apps/player/src/i18n/zh-CN.ts b/apps/player/src/i18n/zh-CN.ts
index a387452..b5c8503 100644
--- a/apps/player/src/i18n/zh-CN.ts
+++ b/apps/player/src/i18n/zh-CN.ts
@@ -313,6 +313,9 @@ export default {
     recharge_btn: '充值',
     recharge_history: '充值记录',
     cashbacks_tab: '返水明细',
+    detail_info: '详细信息',
+    frozen_before: '冻结前',
+    frozen_after: '冻结后',
   },
   recharge: {
     title: '充值',
@@ -601,6 +604,9 @@ export default {
     placed_at: '下注时间',
     detail_title: '注单详情',
     selections: '投注选项',
+    summary: '注单概要',
+    legs_count: '过关场数',
+    back_to_list: '返回注单列表',
   },
   profile: {
     edit: '修改资料',
@@ -656,5 +662,15 @@ export default {
     rules_p3: '赛果由平台根据官方录入的半场/全场比分结算，结算预览经确认后入账。',
     rules_p4: '若本说明与后台公告冲突，以最新公告及实际盘口规则为准。',
     rules_p5: '操作步骤：进入任意赛事详情，点右上角「?」查看玩法说明。',
+    qnav_bets_desc: '查看历史投注记录',
+    qnav_wallet_desc: '资金流水明细',
+    qnav_cashback_desc: '返水记录详情',
+    qnav_recharge_desc: '账户充值',
+    qnav_announcements_desc: '查看站内公告',
+    qnav_edit_desc: '修改个人资料',
+    security_tips: '安全提示',
+    tip_1: '定期更换密码以保护账户安全',
+    tip_2: '不要将密码透露给他人',
+    tip_3: '如需帮助请联系在线客服',
   },
 } as const;
diff --git a/apps/player/src/styles/desktop/layout.css b/apps/player/src/styles/desktop/layout.css
index 98fb4e5..6229031 100644
--- a/apps/player/src/styles/desktop/layout.css
+++ b/apps/player/src/styles/desktop/layout.css
@@ -120,6 +120,13 @@
   min-height: 0;
 }
 
+.desktop-account-center > .desktop-records-page.profile-page,
+.desktop-account-center > .desktop-records-page.edit-page {
+  overflow-y: auto;
+  height: auto;
+  max-height: 100%;
+}
+
 .desktop-account-center > .desktop-account-page {
   flex: 1;
   min-height: 0;
diff --git a/apps/player/src/views/desktop/DesktopBetDetailView.vue b/apps/player/src/views/desktop/DesktopBetDetailView.vue
index 752348a..4edd000 100644
--- a/apps/player/src/views/desktop/DesktopBetDetailView.vue
+++ b/apps/player/src/views/desktop/DesktopBetDetailView.vue
@@ -96,6 +96,24 @@ function translateSel(name: string): string {
   }
   return name;
 }
+
+function legResultIcon(status?: string) {
+  switch (status?.toUpperCase()) {
+    case 'WON': return '✓';
+    case 'LOST': return '✗';
+    case 'PUSH': return '=';
+    default: return '';
+  }
+}
+
+function legResultClass(status?: string) {
+  switch (status?.toUpperCase()) {
+    case 'WON': return 'leg-won';
+    case 'LOST': return 'leg-lost';
+    case 'PUSH': return 'leg-push';
+    default: return 'leg-pending';
+  }
+}
 </script>
 
 <template>
@@ -117,39 +135,67 @@ function translateSel(name: string): string {
         <button type="button" class="retry-btn" @click="loadDetail">{{ t('common.retry') }}</button>
       </div>
 
-      <div v-else-if="detail" class="detail-layout">
-        <!-- Header info -->
-        <div class="detail-card header-card">
-          <div class="bet-no">{{ detail.betNo }}</div>
-          <span class="status-badge" :class="statusClass(detail.status)">{{ statusLabel(detail.status) }}</span>
-          <div class="amount-row">
-            <div class="amount-item">
-              <span class="amount-label">{{ t('bet.stake') || '投注额' }}</span>
-              <span class="amount-val">{{ detail.stake }}</span>
-            </div>
-            <div class="amount-item">
-              <span class="amount-label">{{ t('bet.potential_payout') || '预计派彩' }}</span>
-              <span class="amount-val gold">{{ detail.potentialReturn || '-' }}</span>
-            </div>
-            <div class="amount-item">
-              <span class="amount-label">{{ t('bet.placed_at') || '下注时间' }}</span>
-              <span class="amount-val date">{{ detail.placedAt ? new Date(detail.placedAt).toLocaleString() : '-' }}</span>
+      <div v-else-if="detail" class="detail-grid">
+        <!-- Left column: selections -->
+        <div class="detail-left">
+          <div class="detail-card">
+            <div class="card-title">{{ t('bet.selections') || '投注选项' }}</div>
+            <div v-for="(leg, idx) in detail.legs" :key="idx" class="sel-row">
+              <div class="sel-row-left">
+                <span class="sel-index">{{ idx + 1 }}</span>
+                <div class="sel-info">
+                  <div class="sel-match">{{ leg.matchTitle || t('bet.match') }}</div>
+                  <div class="sel-meta">
+                    <span class="sel-market">{{ leg.marketLabel || '' }}</span>
+                    <span class="sel-name">{{ translateSel(leg.selectionName || '') }}</span>
+                    <span v-if="leg.score?.ft" class="sel-score">{{ t('history.ft') }}: {{ leg.score.ft }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="sel-row-right">
+                <span class="sel-odds">@{{ leg.odds }}</span>
+                <span v-if="leg.resultStatus" class="leg-result" :class="legResultClass(leg.resultStatus)">
+                  {{ legResultIcon(leg.resultStatus) }}
+                </span>
+              </div>
             </div>
           </div>
         </div>
 
-        <!-- Selections -->
-        <div class="detail-card">
-          <div class="card-title">{{ t('bet.selections') || '投注选项' }}</div>
-          <div v-for="(leg, idx) in detail.legs" :key="idx" class="sel-row">
-            <div class="sel-match">{{ leg.matchTitle || t('bet.match') }}</div>
-            <div class="sel-meta">
-              <span class="sel-market">{{ leg.marketLabel || '' }}</span>
-              <span class="sel-name">{{ translateSel(leg.selectionName || '') }}</span>
-              <span class="sel-odds">@{{ leg.odds }}</span>
-              <span v-if="leg.score?.ft" class="sel-score">({{ t('history.ft') }}: {{ leg.score.ft }})</span>
+        <!-- Right column: summary -->
+        <div class="detail-right">
+          <div class="detail-card summary-card">
+            <div class="card-title">{{ t('bet.summary') || '注单概要' }}</div>
+            <div class="summary-bet-no">
+              <span class="summary-label">{{ t('bet.bet_no') || '注单号' }}</span>
+              <span class="summary-value mono">{{ detail.betNo }}</span>
+            </div>
+            <div class="summary-status">
+              <span class="status-badge" :class="statusClass(detail.status)">{{ statusLabel(detail.status) }}</span>
+            </div>
+            <div class="summary-amounts">
+              <div class="summary-amount-item">
+                <span class="summary-amount-label">{{ t('bet.stake') || '投注额' }}</span>
+                <span class="summary-amount-val">{{ detail.stake }}</span>
+              </div>
+              <div class="summary-amount-item">
+                <span class="summary-amount-label">{{ t('bet.potential_payout') || '预计派彩' }}</span>
+                <span class="summary-amount-val gold">{{ detail.potentialReturn || '-' }}</span>
+              </div>
+              <div class="summary-amount-item">
+                <span class="summary-amount-label">{{ t('bet.placed_at') || '下注时间' }}</span>
+                <span class="summary-amount-val date">{{ detail.placedAt ? new Date(detail.placedAt).toLocaleString() : '-' }}</span>
+              </div>
+              <div class="summary-amount-item">
+                <span class="summary-amount-label">{{ t('bet.legs_count') || '过关场数' }}</span>
+                <span class="summary-amount-val">{{ detail.legs?.length ?? 0 }}</span>
+              </div>
             </div>
           </div>
+
+          <RouterLink to="/bets" class="back-to-list-btn">
+            {{ t('bet.back_to_list') || '返回注单列表' }}
+          </RouterLink>
         </div>
       </div>
 
@@ -171,7 +217,15 @@ function translateSel(name: string): string {
 .retry-btn { padding: 8px 24px; border-radius: 6px; border: 1px solid var(--primary); background: transparent; color: var(--primary-light); font-size: 13px; font-weight: 700; cursor: pointer; }
 .empty-state { display: flex; align-items: center; justify-content: center; padding: 80px 20px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
 
-.detail-layout { display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
+.detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  gap: 20px;
+  max-width: 1100px;
+}
+
+.detail-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+.detail-right { display: flex; flex-direction: column; gap: 16px; }
 
 .detail-card {
   background: var(--desktop-sidebar-bg);
@@ -180,36 +234,101 @@ function translateSel(name: string): string {
   padding: 20px;
 }
 
-.header-card { display: flex; flex-direction: column; gap: 12px; }
+.card-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--desktop-border); }
 
-.bet-no {
-  font-family: 'SF Mono', 'Consolas', monospace;
-  font-size: 13px;
+/* Selection rows */
+.sel-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 0;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  gap: 16px;
+}
+.sel-row:last-child { border-bottom: none; }
+
+.sel-row-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
+
+.sel-index {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.06);
+  font-size: 11px;
   font-weight: 700;
   color: var(--text-muted);
-  letter-spacing: 0.04em;
+  flex-shrink: 0;
 }
 
-.status-badge { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; align-self: flex-start; }
+.sel-info { min-width: 0; }
+.sel-match { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
+.sel-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
+.sel-name { color: var(--text); font-weight: 700; }
+.sel-score { color: var(--text-muted); }
+
+.sel-row-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+.sel-odds { color: var(--primary-light); font-weight: 800; font-size: 14px; }
+
+.leg-result {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: 800;
+}
+.leg-won { background: rgba(52,199,89,0.15); color: #4cd964; }
+.leg-lost { background: rgba(255,69,58,0.15); color: #ff453a; }
+.leg-push { background: rgba(100,100,100,0.15); color: #aaa; }
+.leg-pending { background: rgba(212,175,55,0.12); color: var(--primary-light); font-size: 10px; }
+
+/* Summary card */
+.summary-card { display: flex; flex-direction: column; gap: 16px; }
+
+.summary-bet-no { display: flex; flex-direction: column; gap: 4px; }
+.summary-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
+.summary-value { font-size: 14px; font-weight: 700; color: var(--text); }
+.mono { font-family: 'SF Mono', 'Consolas', monospace; letter-spacing: 0.03em; }
+
+.summary-status { display: flex; }
+
+.status-badge { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; }
 .status-won { background: rgba(52,199,89,0.12); color: #4cd964; }
 .status-lost { background: rgba(255,69,58,0.12); color: #ff453a; }
 .status-pending { background: rgba(212,175,55,0.12); color: var(--primary-light); }
 .status-push { background: rgba(100,100,100,0.12); color: #aaa; }
 .status-default { background: rgba(100,100,100,0.1); color: #888; }
 
-.amount-row { display: flex; gap: 32px; padding-top: 4px; flex-wrap: wrap; }
-.amount-item { display: flex; flex-direction: column; gap: 4px; }
-.amount-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
-.amount-val { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
-.amount-val.gold { color: var(--primary-light); }
-.amount-val.date { font-size: 13px; color: var(--text-muted); font-weight: 600; }
+.summary-amounts { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 1px solid var(--desktop-border); }
+.summary-amount-item { display: flex; flex-direction: column; gap: 4px; }
+.summary-amount-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
+.summary-amount-val { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
+.summary-amount-val.gold { color: var(--primary-light); }
+.summary-amount-val.date { font-size: 13px; color: var(--text-muted); font-weight: 600; }
 
-.card-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--desktop-border); }
+.back-to-list-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid var(--desktop-border);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.back-to-list-btn:hover { border-color: var(--border-gold-soft); color: var(--primary-light); background: rgba(212,175,55,0.06); }
 
-.sel-row { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
-.sel-row:last-child { border-bottom: none; }
-.sel-match { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
-.sel-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-muted); }
-.sel-name { color: var(--text); font-weight: 700; }
-.sel-odds { color: var(--primary-light); font-weight: 800; margin-left: auto; }
+@media (max-width: 900px) {
+  .detail-grid { grid-template-columns: 1fr; }
+}
 </style>
diff --git a/apps/player/src/views/desktop/DesktopMyBetsView.vue b/apps/player/src/views/desktop/DesktopMyBetsView.vue
index 67a7c8a..ac78e4c 100644
--- a/apps/player/src/views/desktop/DesktopMyBetsView.vue
+++ b/apps/player/src/views/desktop/DesktopMyBetsView.vue
@@ -1,17 +1,24 @@
 <script setup lang="ts">
 import { ref, onMounted, onActivated } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 import api from '../../api';
 import GoldSpinner from '../../components/GoldSpinner.vue';
 import Pagination from '../../components/desktop/Pagination.vue';
+import DesktopBetDetailModal from '../../components/desktop/DesktopBetDetailModal.vue';
 import { type BetHistoryItem } from '../../components/BetHistoryCard.vue';
 import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
 
 const COL_COUNT = 8;
 
 const { t } = useI18n();
-const router = useRouter();
+
+const detailModalVisible = ref(false);
+const detailBetNo = ref<string | null>(null);
+
+function openDetail(betNo: string) {
+  detailBetNo.value = betNo;
+  detailModalVisible.value = true;
+}
 
 const items = ref<BetHistoryItem[]>([]);
 const total = ref(0);
@@ -154,7 +161,7 @@ function statusLabel(status: string) {
                 v-for="bet in items"
                 :key="bet.betNo"
                 class="hover-row clickable-row"
-                @click="router.push(`/bets/${bet.betNo}`)"
+                @click="openDetail(bet.betNo)"
               >
                 <td class="id-cell">{{ bet.betNo }}</td>
                 <td>{{ bet.matchTitle || '-' }}</td>
@@ -187,6 +194,8 @@ function statusLabel(status: string) {
         />
       </div>
     </section>
+
+    <DesktopBetDetailModal v-model:visible="detailModalVisible" :bet-no="detailBetNo" />
   </div>
 </template>
 
diff --git a/apps/player/src/views/desktop/DesktopProfileEditView.vue b/apps/player/src/views/desktop/DesktopProfileEditView.vue
index 6b6246c..3f324c2 100644
--- a/apps/player/src/views/desktop/DesktopProfileEditView.vue
+++ b/apps/player/src/views/desktop/DesktopProfileEditView.vue
@@ -15,8 +15,6 @@ const auth = useAuthStore();
 const { loadProfile, setAvatarKey, profileRaw, avatarUrl } = usePlayerProfile();
 
 const username = ref('');
-const viewablePassword = ref('');
-const passwordVisible = ref(false);
 const phone = ref('');
 const email = ref('');
 const avatarModalOpen = ref(false);
@@ -35,11 +33,6 @@ const allowUsernameChange = computed(
   () => profileRaw.value?.preferences?.allowUsernameChange ?? false,
 );
 
-const canTogglePassword = computed(() => !!viewablePassword.value);
-const passwordInputType = computed(() =>
-  passwordVisible.value && canTogglePassword.value ? 'text' : 'password',
-);
-
 const displayAvatarUrl = computed(() => {
   if (avatarUrl.value) return avatarUrl.value;
   const seed = profileRaw.value?.username ?? auth.user?.username;
@@ -49,7 +42,6 @@ const displayAvatarUrl = computed(() => {
 function syncFromProfile() {
   const user = profileRaw.value;
   username.value = user?.username ?? auth.user?.username ?? '';
-  viewablePassword.value = user?.preferences?.viewablePassword ?? '';
   phone.value = user?.preferences?.phone ?? '';
   email.value = user?.preferences?.email ?? '';
 }
@@ -98,136 +90,146 @@ async function savePassword() {
     saving.value = false;
   }
 }
-
-async function onAvatarSelect(key: string | null) {
-  avatarModalOpen.value = false;
-  await setAvatarKey(key);
-}
 </script>
 
 <template>
-  <div class="desktop-account-page">
-    <main class="account-main">
-      <div class="edit-layout">
-        <div class="page-header">
-          <button type="button" class="back-btn" @click="router.back()">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-              <line x1="19" y1="12" x2="5" y2="12"></line>
-              <polyline points="12 19 5 12 12 5"></polyline>
-            </svg>
-            <span>{{ t('common.back') || '返回' }}</span>
-          </button>
-          <h1 class="page-title">{{ t('profile.edit_title') }}</h1>
-        </div>
+  <div class="desktop-records-page edit-page">
+    <header class="desktop-records-header">
+      <div class="desktop-records-header-main header-row">
+        <button type="button" class="back-btn" @click="router.push('/profile')">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="19" y1="12" x2="5" y2="12"></line>
+            <polyline points="12 19 5 12 12 5"></polyline>
+          </svg>
+          <span>{{ t('common.back') || '返回' }}</span>
+        </button>
+        <h1 class="page-title">{{ t('profile.edit_title') }}</h1>
+      </div>
+    </header>
 
-        <!-- Avatar section -->
-        <div class="edit-card">
-          <div class="card-title">{{ t('profile.avatar') || '头像' }}</div>
-          <div class="avatar-row">
-            <img
-              v-if="displayAvatarUrl"
-              :src="displayAvatarUrl"
-              alt="avatar"
-              class="avatar-img"
-            />
-            <div v-else class="avatar-placeholder">
-              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
-            </div>
+    <div class="edit-grid">
+      <!-- Left: avatar + basic -->
+      <section class="edit-card">
+        <div class="card-title">{{ t('profile.avatar') || '头像' }}</div>
+        <div class="avatar-row">
+          <img
+            v-if="displayAvatarUrl"
+            :src="displayAvatarUrl"
+            alt="avatar"
+            class="avatar-img"
+          />
+          <div v-else class="avatar-placeholder">
+            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
+          </div>
+          <div class="avatar-meta">
             <button type="button" class="change-avatar-btn" @click="avatarModalOpen = true">
               {{ t('profile.change_avatar') || '更换头像' }}
             </button>
+            <p class="field-hint">{{ t('profile.avatar_hint') }}</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="edit-card edit-card--span">
+        <div class="card-title">{{ t('profile.basic_info') || '基础信息' }}</div>
+
+        <div v-if="message" class="success-msg">{{ message }}</div>
+        <div v-if="error" class="error-msg">{{ error }}</div>
+
+        <div class="field-grid">
+          <div class="field">
+            <label class="field-label">{{ t('profile.username') || '用户名' }}</label>
+            <input
+              v-model="username"
+              type="text"
+              class="field-input"
+              :disabled="!allowUsernameChange"
+            />
+            <p v-if="!allowUsernameChange" class="field-hint">{{ t('profile.username_locked') || '用户名不可修改' }}</p>
+          </div>
+
+          <div class="field">
+            <label class="field-label">{{ t('profile.phone') || '手机号' }}</label>
+            <input v-model="phone" type="text" class="field-input" />
+          </div>
+
+          <div class="field">
+            <label class="field-label">{{ t('profile.email') || '邮箱' }}</label>
+            <input v-model="email" type="email" class="field-input" />
           </div>
         </div>
 
-        <!-- Basic info -->
-        <div class="edit-card">
-          <div class="card-title">{{ t('profile.basic_info') || '基础信息' }}</div>
-
-          <div v-if="message" class="success-msg">{{ message }}</div>
-          <div v-if="error" class="error-msg">{{ error }}</div>
-
-          <div class="field-group">
-            <div class="field">
-              <label class="field-label">{{ t('profile.username') || '用户名' }}</label>
-              <input
-                v-model="username"
-                type="text"
-                class="field-input"
-                :disabled="!allowUsernameChange"
-              />
-              <p v-if="!allowUsernameChange" class="field-hint">{{ t('profile.username_locked') || '用户名不可修改' }}</p>
-            </div>
-
-            <div class="field">
-              <label class="field-label">{{ t('profile.phone') || '手机号' }}</label>
-              <input v-model="phone" type="text" class="field-input" />
-            </div>
-
-            <div class="field">
-              <label class="field-label">Email</label>
-              <input v-model="email" type="email" class="field-input" />
-            </div>
-          </div>
-
+        <div class="card-actions">
           <button type="button" class="save-btn" :disabled="saving" @click="saveProfile">
             <GoldSpinner v-if="saving" :size="18" />
             <span v-else>{{ t('common.save') || '保存' }}</span>
           </button>
         </div>
+      </section>
 
-        <!-- Password change -->
-        <div v-if="allowPasswordChange" class="edit-card">
-          <div class="card-title">
-            {{ t('profile.change_password') || '修改密码' }}
-            <button
-              type="button"
-              class="toggle-btn"
-              @click="passwordChangeOpen = !passwordChangeOpen"
-            >
-              {{ passwordChangeOpen ? (t('common.collapse') || '收起') : (t('common.expand') || '展开') }}
-            </button>
+      <!-- Password -->
+      <section v-if="allowPasswordChange" class="edit-card edit-card--span">
+        <div class="card-title">
+          {{ t('profile.change_password') || '修改密码' }}
+          <button
+            type="button"
+            class="toggle-btn"
+            @click="passwordChangeOpen = !passwordChangeOpen"
+          >
+            {{ passwordChangeOpen ? (t('common.collapse') || '收起') : (t('common.expand') || '展开') }}
+          </button>
+        </div>
+
+        <div v-show="passwordChangeOpen" class="field-grid">
+          <div class="field">
+            <label class="field-label">{{ t('profile.old_password') || '当前密码' }}</label>
+            <input v-model="oldPassword" type="password" class="field-input" autocomplete="current-password" />
           </div>
-
-          <div v-show="passwordChangeOpen" class="field-group">
-            <div class="field">
-              <label class="field-label">{{ t('profile.old_password') || '当前密码' }}</label>
-              <input v-model="oldPassword" type="password" class="field-input" autocomplete="current-password" />
-            </div>
-            <div class="field">
-              <label class="field-label">{{ t('profile.new_password') || '新密码' }}</label>
-              <input v-model="newPassword" type="password" class="field-input" autocomplete="new-password" />
-            </div>
-            <div class="field">
-              <label class="field-label">{{ t('profile.confirm_password') || '确认密码' }}</label>
-              <input v-model="confirmPassword" type="password" class="field-input" autocomplete="new-password" />
-            </div>
-            <button type="button" class="save-btn" :disabled="saving" @click="savePassword">
-              <GoldSpinner v-if="saving" :size="18" />
-              <span v-else>{{ t('profile.change_password') || '修改密码' }}</span>
-            </button>
+          <div class="field">
+            <label class="field-label">{{ t('profile.new_password') || '新密码' }}</label>
+            <input v-model="newPassword" type="password" class="field-input" autocomplete="new-password" />
+          </div>
+          <div class="field">
+            <label class="field-label">{{ t('profile.confirm_password') || '确认密码' }}</label>
+            <input v-model="confirmPassword" type="password" class="field-input" autocomplete="new-password" />
           </div>
         </div>
-      </div>
+        <div v-show="passwordChangeOpen" class="card-actions">
+          <button type="button" class="save-btn" :disabled="saving" @click="savePassword">
+            <GoldSpinner v-if="saving" :size="18" />
+            <span v-else>{{ t('profile.change_password') || '修改密码' }}</span>
+          </button>
+        </div>
+      </section>
+    </div>
 
-      <PlayerAvatarModal
-        :open="avatarModalOpen"
-        :model-value="profileRaw?.preferences?.avatarKey ?? null"
-        @close="avatarModalOpen = false"
-        @confirm="(key) => { avatarModalOpen = false; if (key !== undefined) setAvatarKey(key); }"
-      />
-    </main>
+    <PlayerAvatarModal
+      :open="avatarModalOpen"
+      :model-value="profileRaw?.preferences?.avatarKey ?? null"
+      @close="avatarModalOpen = false"
+      @confirm="(key) => { avatarModalOpen = false; if (key !== undefined) setAvatarKey(key); }"
+    />
   </div>
 </template>
 
 <style scoped>
-.desktop-account-page { display: flex; flex-direction: column; min-height: 0; flex: 1; width: 100%; }
+.edit-page {
+  overflow-y: auto;
+  height: auto;
+  max-height: 100%;
+}
 
-.account-main { flex: 1; min-width: 0; padding: 24px 28px; overflow-y: auto; }
-.page-header {
+.header-row {
   display: flex;
   align-items: center;
   gap: 16px;
-  margin-bottom: 24px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--primary-light);
 }
 
 .back-btn {
@@ -251,32 +253,32 @@ async function onAvatarSelect(key: string | null) {
   color: var(--primary-light);
 }
 
-.back-btn svg {
-  transition: transform 0.2s ease;
-}
-
 .back-btn:hover svg {
   transform: translateX(-2px);
 }
 
-.page-title { font-size: 18px; font-weight: 800; color: var(--primary-light); margin: 0; }
+.back-btn svg {
+  transition: transform 0.2s ease;
+}
 
-.edit-layout {
-  display: flex;
-  flex-direction: column;
+.edit-grid {
+  display: grid;
+  grid-template-columns: 320px 1fr;
   gap: 16px;
-  max-width: 560px;
-  margin: 0 auto;
+  align-items: start;
 }
 
 .edit-card {
   background: var(--bg-card);
-  backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 10px;
   padding: 20px;
 }
 
+.edit-card--span {
+  grid-column: 1 / -1;
+}
+
 .card-title {
   font-size: 12px;
   font-weight: 700;
@@ -297,17 +299,24 @@ async function onAvatarSelect(key: string | null) {
   gap: 16px;
 }
 
+.avatar-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .avatar-img {
-  width: 64px;
-  height: 64px;
+  width: 72px;
+  height: 72px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid var(--border-gold-soft);
+  flex-shrink: 0;
 }
 
 .avatar-placeholder {
-  width: 64px;
-  height: 64px;
+  width: 72px;
+  height: 72px;
   border-radius: 50%;
   background: #1a1a1a;
   display: flex;
@@ -315,9 +324,11 @@ async function onAvatarSelect(key: string | null) {
   justify-content: center;
   color: var(--text-muted);
   border: 2px solid var(--desktop-border);
+  flex-shrink: 0;
 }
 
 .change-avatar-btn {
+  align-self: flex-start;
   padding: 7px 16px;
   border-radius: 6px;
   border: 1px solid var(--desktop-border);
@@ -329,11 +340,24 @@ async function onAvatarSelect(key: string | null) {
   transition: all 0.2s;
 }
 
-.change-avatar-btn:hover { border-color: var(--border-gold-soft); color: var(--primary-light); }
+.change-avatar-btn:hover {
+  border-color: var(--border-gold-soft);
+  color: var(--primary-light);
+}
 
-.field-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
+.field-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px 20px;
+  margin-bottom: 16px;
+}
 
-.field { display: flex; flex-direction: column; gap: 6px; }
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
 
 .field-label {
   font-size: 11px;
@@ -355,13 +379,45 @@ async function onAvatarSelect(key: string | null) {
   transition: border-color 0.2s;
 }
 
-.field-input:focus { border-color: var(--border-gold-soft); }
-.field-input:disabled { opacity: 0.45; cursor: not-allowed; }
+.field-input:focus {
+  border-color: var(--border-gold-soft);
+}
 
-.field-hint { font-size: 11px; color: var(--text-muted); margin: 0; }
+.field-input:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
 
-.success-msg { padding: 10px 14px; border-radius: 6px; background: rgba(52,199,89,0.1); color: #4cd964; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
-.error-msg { padding: 10px 14px; border-radius: 6px; background: rgba(255,69,58,0.1); color: #ff453a; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
+.field-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.card-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.success-msg {
+  padding: 10px 14px;
+  border-radius: 6px;
+  background: rgba(52, 199, 89, 0.1);
+  color: #4cd964;
+  font-size: 13px;
+  font-weight: 700;
+  margin-bottom: 14px;
+}
+
+.error-msg {
+  padding: 10px 14px;
+  border-radius: 6px;
+  background: rgba(255, 69, 58, 0.1);
+  color: #ff453a;
+  font-size: 13px;
+  font-weight: 700;
+  margin-bottom: 14px;
+}
 
 .save-btn {
   display: inline-flex;
@@ -379,8 +435,14 @@ async function onAvatarSelect(key: string | null) {
   transition: opacity 0.2s;
 }
 
-.save-btn:hover:not(:disabled) { opacity: 0.88; }
-.save-btn:disabled { opacity: 0.45; cursor: default; }
+.save-btn:hover:not(:disabled) {
+  opacity: 0.88;
+}
+
+.save-btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
 
 .toggle-btn {
   background: none;
@@ -392,4 +454,20 @@ async function onAvatarSelect(key: string | null) {
   text-transform: none;
   letter-spacing: 0;
 }
+
+@media (max-width: 1100px) {
+  .edit-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .field-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .field-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/apps/player/src/views/desktop/DesktopProfileView.vue b/apps/player/src/views/desktop/DesktopProfileView.vue
index 022aead..b9a21c4 100644
--- a/apps/player/src/views/desktop/DesktopProfileView.vue
+++ b/apps/player/src/views/desktop/DesktopProfileView.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted, onActivated, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRouter, RouterLink } from 'vue-router';
 import api from '../../api';
 import GoldSpinner from '../../components/GoldSpinner.vue';
 import LocaleFlag from '../../components/LocaleFlag.vue';
 import { useAuthStore } from '../../stores/auth';
 import { useAppLocale } from '../../composables/useAppLocale';
 import { usePlayerProfile } from '../../composables/usePlayerProfile';
-import { useInboxFeature } from '../../composables/useInboxFeature';
 import { formatMoney } from '../../utils/localeDisplay';
 import { parseCashbackApiData, sumCashbackAmount } from '../../utils/cashback';
 import walletBg from '../../assets/images/wallet-bg.webp';
@@ -18,7 +17,6 @@ const router = useRouter();
 const auth = useAuthStore();
 const { locales, setLocale, initFromUser } = useAppLocale();
 const { profileRaw, refreshProfile } = usePlayerProfile();
-const { hubRoute } = useInboxFeature();
 
 const loading = ref(true);
 const error = ref(false);
@@ -69,137 +67,225 @@ const balanceDisplay = computed(() =>
   formatMoney(profileRaw.value?.wallet?.availableBalance, locale.value),
 );
 
+const balanceAmountClass = computed(() => {
+  const len = balanceDisplay.value.length;
+  if (len <= 10) return 'balance-amount--xl';
+  if (len <= 13) return 'balance-amount--lg';
+  if (len <= 16) return 'balance-amount--md';
+  if (len <= 19) return 'balance-amount--sm';
+  return 'balance-amount--xs';
+});
+
+const quickLinks = computed(() => [
+  { to: '/bets', label: t('nav.bet_history'), desc: t('profile.qnav_bets_desc') },
+  { to: '/wallet', label: t('nav.wallet'), desc: t('profile.qnav_wallet_desc') },
+  { to: '/wallet/recharge', label: t('recharge.title'), desc: t('profile.qnav_recharge_desc') },
+  { to: '/wallet/cashbacks', label: t('wallet.cashbacks_tab'), desc: t('profile.qnav_cashback_desc') },
+  { to: '/announcements', label: t('nav.announcements'), desc: t('profile.qnav_announcements_desc') },
+  { to: '/profile/edit', label: t('profile.edit'), desc: t('profile.qnav_edit_desc') },
+]);
 </script>
 
 <template>
-  <div class="desktop-account-page">
-    <main class="account-main">
-      <div class="profile-layout">
-        <div class="page-header">
-          <h1 class="page-title">{{ t('nav.profile') }}</h1>
-        </div>
-
-        <div v-if="loading" class="loading-state">
-          <GoldSpinner :size="36" />
-        </div>
-
-        <div v-else-if="error" class="error-state">
-          <p>{{ t('common.load_failed') }}</p>
-          <button type="button" class="retry-btn" @click="fetchProfile">{{ t('common.retry') }}</button>
-        </div>
-
-        <template v-else>
-          <!-- Wallet Banner -->
-          <div class="wallet-banner">
-            <img class="wallet-banner-img" :src="walletBg" alt="" />
-            <div class="wallet-banner-scrim" aria-hidden="true" />
-            
-            <div class="card-overlay">
-              <div class="bank-card-top">
-                <div class="bank-card-top-left">
-                  <img src="/logo.png" alt="TheBet365" class="brand-logo" />
-                  <div class="bank-card-brand-text">
-                    <span class="brand-name">THEBET365</span>
-                    <span class="bank-card-type">MEMBER</span>
-                  </div>
-                </div>
-                <router-link to="/wallet/recharge" class="recharge-btn">
-                  <span class="recharge-icon">+</span>
-                  <span>{{ t('recharge.title') }}</span>
-                </router-link>
-              </div>
-
-              <div class="bank-card-balance">
-                <span class="bank-card-label">{{ t('wallet.available') || '可用余额' }}</span>
-                <p class="bank-card-number">{{ balanceDisplay }}</p>
-              </div>
-
-              <div class="bank-card-footer">
-                <div class="bank-card-field">
-                  <span class="bank-card-label">{{ t('profile.username') || '持卡人' }}</span>
-                  <span class="bank-card-holder">{{ profileRaw?.username }}</span>
-                </div>
-                <div class="bank-card-field bank-card-field--center">
-                  <span class="bank-card-label">{{ t('wallet.cashback_total') || '累计返水' }}</span>
-                  <span class="bank-card-stat">{{ formatMoney(cashbackTotal, locale) }}</span>
-                </div>
-                <div class="bank-card-field bank-card-field--right">
-                  <span class="bank-card-label">{{ t('wallet.frozen') || '冻结' }}</span>
-                  <span class="bank-card-stat">{{ formatMoney(profileRaw?.wallet?.frozenBalance, locale) }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Account info -->
-          <div class="info-card">
-            <div class="info-header">{{ t('profile.account') || '账户信息' }}</div>
-            <div class="info-row">
-              <span class="info-label">{{ t('profile.username') || '用户名' }}</span>
-              <span class="info-val">{{ profileRaw?.username }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">{{ t('profile.phone') || '手机号' }}</span>
-              <span class="info-val">{{ profileRaw?.preferences?.phone || '-' }}</span>
-            </div>
-            <div class="info-actions">
-              <router-link to="/profile/edit" class="edit-btn">{{ t('profile.edit') }}</router-link>
-            </div>
-          </div>
-
-          <!-- Language -->
-          <div class="lang-card">
-            <div class="info-header">{{ t('profile.language') }}</div>
-            <div class="lang-group">
-              <button
-                v-for="item in locales"
-                :key="item.code"
-                type="button"
-                class="lang-opt"
-                :class="{ active: locale === item.code }"
-                @click="setLocale(item.code)"
-              >
-                <LocaleFlag :locale="item.code" :size="14" />
-                <span>{{ item.label }}</span>
-              </button>
-            </div>
-          </div>
-
-          <!-- Logout -->
-          <button type="button" class="logout-btn" @click="logout">
-            {{ t('auth.logout') }}
-          </button>
-        </template>
+  <div class="desktop-records-page profile-page">
+    <header class="desktop-records-header">
+      <div class="desktop-records-header-main">
+        <h1 class="page-title">{{ t('nav.profile') }}</h1>
       </div>
-    </main>
+      <div class="desktop-records-actions">
+        <RouterLink to="/profile/edit" class="desktop-records-action-btn">
+          {{ t('profile.edit') }}
+        </RouterLink>
+        <button type="button" class="logout-btn" @click="logout">
+          {{ t('auth.logout') }}
+        </button>
+      </div>
+    </header>
+
+    <div v-if="loading" class="loading-state">
+      <GoldSpinner :size="36" />
+    </div>
+
+    <div v-else-if="error" class="error-state">
+      <p>{{ t('common.load_failed') }}</p>
+      <button type="button" class="retry-btn" @click="fetchProfile">{{ t('common.retry') }}</button>
+    </div>
+
+    <template v-else>
+      <!-- Wallet card -->
+      <div class="wallet-banner">
+        <img class="wallet-banner-img" :src="walletBg" alt="" />
+        <div class="wallet-banner-scrim" aria-hidden="true" />
+
+        <div class="card-overlay">
+          <div class="bank-card-top">
+            <div class="bank-card-top-left">
+              <img src="/logo.png" alt="TheBet365" class="brand-logo" />
+              <div class="bank-card-brand-text">
+                <span class="brand-name">THEBET365</span>
+                <span class="bank-card-type">MEMBER</span>
+              </div>
+            </div>
+            <RouterLink to="/wallet/recharge" class="recharge-btn">
+              <span class="recharge-icon">+</span>
+              <span>{{ t('recharge.title') }}</span>
+            </RouterLink>
+          </div>
+
+          <div class="bank-card-balance">
+            <span class="bank-card-label">{{ t('wallet.available') }}</span>
+            <p class="bank-card-number balance-amount" :class="balanceAmountClass">{{ balanceDisplay }}</p>
+          </div>
+
+          <div class="bank-card-footer">
+            <div class="bank-card-field">
+              <span class="bank-card-label">{{ t('profile.username') }}</span>
+              <span class="bank-card-holder">{{ profileRaw?.username }}</span>
+            </div>
+            <div class="bank-card-field bank-card-field--center">
+              <span class="bank-card-label">{{ t('wallet.cashback_total') }}</span>
+              <span class="bank-card-stat">{{ formatMoney(cashbackTotal, locale) }}</span>
+            </div>
+            <div class="bank-card-field bank-card-field--right">
+              <span class="bank-card-label">{{ t('wallet.frozen') }}</span>
+              <span class="bank-card-stat">{{ formatMoney(profileRaw?.wallet?.frozenBalance, locale) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Two-column: account + language -->
+      <div class="profile-grid">
+        <section class="panel">
+          <div class="panel-header">
+            <h2 class="panel-title">{{ t('profile.account') }}</h2>
+            <RouterLink to="/profile/edit" class="panel-link">{{ t('profile.edit') }}</RouterLink>
+          </div>
+          <dl class="info-grid">
+            <div class="info-item">
+              <dt>{{ t('profile.username') }}</dt>
+              <dd>{{ profileRaw?.username }}</dd>
+            </div>
+            <div class="info-item">
+              <dt>{{ t('profile.phone') }}</dt>
+              <dd>{{ profileRaw?.preferences?.phone || '—' }}</dd>
+            </div>
+            <div class="info-item">
+              <dt>{{ t('profile.email') }}</dt>
+              <dd>{{ profileRaw?.preferences?.email || '—' }}</dd>
+            </div>
+          </dl>
+        </section>
+
+        <section class="panel">
+          <div class="panel-header">
+            <h2 class="panel-title">{{ t('profile.language') }}</h2>
+          </div>
+          <div class="lang-group">
+            <button
+              v-for="item in locales"
+              :key="item.code"
+              type="button"
+              class="lang-opt"
+              :class="{ active: locale === item.code }"
+              @click="setLocale(item.code)"
+            >
+              <LocaleFlag :locale="item.code" :size="16" />
+              <span>{{ item.label }}</span>
+            </button>
+          </div>
+        </section>
+      </div>
+
+      <!-- Quick links: desktop density -->
+      <section class="panel quick-panel">
+        <div class="panel-header">
+          <h2 class="panel-title">{{ t('profile.quick_nav') }}</h2>
+        </div>
+        <div class="quick-grid">
+          <RouterLink
+            v-for="link in quickLinks"
+            :key="link.to"
+            :to="link.to"
+            class="quick-card"
+          >
+            <span class="quick-label">{{ link.label }}</span>
+            <span class="quick-desc">{{ link.desc }}</span>
+          </RouterLink>
+        </div>
+      </section>
+    </template>
   </div>
 </template>
 
 <style scoped>
-.desktop-account-page { display: flex; flex-direction: column; min-height: 0; flex: 1; width: 100%; }
-
-.account-main { flex: 1; min-width: 0; padding: 24px 28px; overflow-y: auto; }
-.page-header { margin-bottom: 24px; }
-.page-title { font-size: 18px; font-weight: 800; color: var(--primary-light); margin: 0; }
-.loading-state { display: flex; justify-content: center; align-items: center; padding: 80px 0; }
-.error-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 20px; color: var(--text-muted); }
-.retry-btn { padding: 8px 24px; border-radius: 6px; border: 1px solid var(--primary); background: transparent; color: var(--primary-light); font-size: 13px; font-weight: 700; cursor: pointer; }
-
-.profile-layout {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  max-width: 600px;
-  margin: 0 auto;
+.profile-page {
+  overflow-y: auto;
+  height: auto;
+  max-height: 100%;
 }
 
+.page-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.logout-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 18px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 69, 58, 0.35);
+  background: transparent;
+  color: var(--danger);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.logout-btn:hover {
+  background: rgba(255, 69, 58, 0.08);
+}
+
+.loading-state,
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 80px 20px;
+  color: var(--text-muted);
+  flex: 1;
+}
+
+.retry-btn {
+  padding: 8px 24px;
+  border-radius: 6px;
+  border: 1px solid var(--primary);
+  background: transparent;
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+/* —— Wallet card —— */
 .wallet-banner {
   position: relative;
   width: 100%;
   aspect-ratio: 21 / 9;
-  border-radius: 16px;
+  max-height: 220px;
+  border-radius: 14px;
   overflow: hidden;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  box-shadow:
+    0 4px 16px rgba(0, 0, 0, 0.4),
+    0 1px 3px rgba(0, 0, 0, 0.2);
+  flex-shrink: 0;
 }
 
 .wallet-banner::after {
@@ -219,6 +305,7 @@ const balanceDisplay = computed(() =>
   height: 100%;
   display: block;
   object-fit: cover;
+  object-position: center center;
   transform: scale(1.05);
   filter: brightness(0.86);
   pointer-events: none;
@@ -230,7 +317,12 @@ const balanceDisplay = computed(() =>
   inset: 0;
   z-index: 2;
   pointer-events: none;
-  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.46) 100%);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0.18) 42%,
+    rgba(0, 0, 0, 0.46) 100%
+  );
 }
 
 .card-overlay {
@@ -239,30 +331,37 @@ const balanceDisplay = computed(() =>
   z-index: 3;
   display: flex;
   flex-direction: column;
-  padding: 24px;
+  padding: 20px 28px 18px;
+  line-height: 1.3;
 }
 
 .bank-card-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
+  flex-shrink: 0;
 }
 
 .bank-card-top-left {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  min-width: 0;
 }
 
 .brand-logo {
-  width: 24px;
-  height: 24px;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
   object-fit: contain;
 }
 
 .bank-card-brand-text {
   display: flex;
   flex-direction: column;
+  gap: 2px;
+  min-width: 0;
 }
 
 .brand-name {
@@ -270,17 +369,32 @@ const balanceDisplay = computed(() =>
   font-weight: 700;
   color: #fff;
   letter-spacing: 0.14em;
+  line-height: 1;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 
 .bank-card-type {
   font-size: 10px;
   font-weight: 800;
+  letter-spacing: 0.14em;
   color: rgba(212, 175, 55, 0.8);
   font-style: italic;
+  line-height: 1;
+}
+
+.bank-card-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.82);
+  line-height: 1.3;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
 }
 
 .recharge-btn {
+  flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -291,42 +405,59 @@ const balanceDisplay = computed(() =>
   color: var(--primary-light);
   font-size: 13px;
   font-weight: 600;
+  line-height: 1;
   text-decoration: none;
   backdrop-filter: blur(6px);
   transition: background 0.15s ease;
 }
 
-.recharge-btn:hover { background: rgba(212, 175, 55, 0.15); }
+.recharge-btn:hover {
+  background: rgba(212, 175, 55, 0.15);
+}
+
+.recharge-icon {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+}
 
 .bank-card-balance {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 8px;
-}
-
-.bank-card-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.82);
+  min-height: 0;
+  padding: 4px 0;
+  gap: 6px;
 }
 
 .bank-card-number {
   margin: 0;
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
   font-weight: 700;
+  font-variant-numeric: tabular-nums;
   color: var(--primary-light);
-  font-size: 38px;
+  line-height: 1.1;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
   text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
 }
 
+.balance-amount--xl { font-size: 42px; }
+.balance-amount--lg { font-size: 36px; }
+.balance-amount--md { font-size: 30px; }
+.balance-amount--sm { font-size: 24px; }
+.balance-amount--xs { font-size: 20px; }
+
 .bank-card-footer {
+  flex-shrink: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
-  padding-top: 16px;
+  padding-top: 14px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
@@ -334,6 +465,7 @@ const balanceDisplay = computed(() =>
   display: flex;
   flex-direction: column;
   gap: 4px;
+  min-width: 0;
 }
 
 .bank-card-field--center { text-align: center; }
@@ -344,67 +476,110 @@ const balanceDisplay = computed(() =>
   font-weight: 700;
   color: #fff;
   text-transform: uppercase;
+  letter-spacing: 0.06em;
+  line-height: 1.2;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .bank-card-stat {
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
   color: #fff;
+  line-height: 1.2;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
 }
 
-.info-card, .lang-card {
+/* —— Panels —— */
+.profile-grid {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 16px;
+  flex-shrink: 0;
+}
+
+.panel {
   background: var(--bg-card);
-  backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 10px;
-  padding: 20px;
+  padding: 18px 20px;
+  flex-shrink: 0;
 }
 
-.info-header {
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
   margin-bottom: 14px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--desktop-border);
 }
 
-.info-row {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px solid rgba(255,255,255,0.04);
-}
-
-.info-label { width: 80px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); font-weight: 600; }
-.info-val { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
-.info-actions { padding-top: 14px; }
-
-.edit-btn {
-  display: inline-flex;
-  align-items: center;
-  padding: 7px 18px;
-  border-radius: 6px;
-  border: 1px solid var(--border-gold-soft);
-  color: var(--primary-light);
-  font-size: 13px;
+.panel-title {
+  margin: 0;
+  font-size: 11px;
   font-weight: 700;
-  text-decoration: none;
-  transition: background 0.2s;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }
 
-.edit-btn:hover { background: rgba(212,175,55,0.08); }
+.panel-link {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--primary-light);
+  text-decoration: none;
+}
 
-.lang-group { display: flex; gap: 8px; flex-wrap: wrap; }
+.panel-link:hover {
+  text-decoration: underline;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px 20px;
+  margin: 0;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.info-item dt {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.info-item dd {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lang-group {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
 
 .lang-opt {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 7px 14px;
+  gap: 8px;
+  padding: 10px 16px;
   border-radius: 6px;
   border: 1px solid var(--desktop-border);
   background: transparent;
@@ -415,25 +590,72 @@ const balanceDisplay = computed(() =>
   transition: all 0.2s;
 }
 
+.lang-opt:hover {
+  border-color: rgba(255, 255, 255, 0.18);
+  color: #fff;
+}
+
 .lang-opt.active {
   border-color: var(--border-gold-soft);
   color: var(--primary-light);
-  background: rgba(212,175,55,0.08);
+  background: rgba(212, 175, 55, 0.08);
 }
 
-.logout-btn {
-  display: block;
-  width: 100%;
-  padding: 12px;
+.quick-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+.quick-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
   border-radius: 8px;
   border: 1px solid var(--desktop-border);
-  background: transparent;
-  color: var(--danger);
-  font-size: 14px;
-  font-weight: 700;
-  cursor: pointer;
-  transition: background 0.2s;
+  background: rgba(255, 255, 255, 0.02);
+  text-decoration: none;
+  transition: background 0.15s, border-color 0.15s;
 }
 
-.logout-btn:hover { background: rgba(255,69,58,0.06); }
+.quick-card:hover {
+  background: rgba(212, 175, 55, 0.06);
+  border-color: var(--border-gold-soft);
+}
+
+.quick-label {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.quick-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.35;
+}
+
+@media (max-width: 1100px) {
+  .wallet-banner {
+    aspect-ratio: 2 / 1;
+    max-height: none;
+  }
+
+  .balance-amount--xl { font-size: 32px; }
+  .balance-amount--lg { font-size: 28px; }
+  .balance-amount--md { font-size: 24px; }
+
+  .profile-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .quick-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 </style>
diff --git a/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue b/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
index 1dcaab4..545d613 100644
--- a/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
+++ b/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
@@ -68,29 +68,36 @@ function txLabel(tx: TxDetail): string {
 <template>
   <div class="desktop-account-page">
     <main class="account-main">
-      <div class="detail-layout">
-        <div class="page-header">
-          <button type="button" class="back-btn" @click="goBack">
-            ‹ {{ t('common.back') || '返回' }}
-          </button>
-          <h1 class="page-title">{{ t('wallet.transaction_detail') || '交易详情' }}</h1>
-        </div>
+      <div class="page-header">
+        <button type="button" class="back-btn" @click="goBack">
+          ‹ {{ t('common.back') || '返回' }}
+        </button>
+        <h1 class="page-title">{{ t('wallet.transaction_detail') || '交易详情' }}</h1>
+      </div>
 
-        <div v-if="loading" class="loading-state">
-          <GoldSpinner :size="36" />
-        </div>
+      <div v-if="loading" class="loading-state">
+        <GoldSpinner :size="36" />
+      </div>
 
-        <div v-else-if="error" class="error-state">
-          <p>{{ t('common.load_failed') }}</p>
-          <button type="button" class="retry-btn" @click="loadDetail">{{ t('common.retry') }}</button>
-        </div>
+      <div v-else-if="error" class="error-state">
+        <p>{{ t('common.load_failed') }}</p>
+        <button type="button" class="retry-btn" @click="loadDetail">{{ t('common.retry') }}</button>
+      </div>
 
-        <div v-else-if="detail" class="detail-card">
+      <div v-else-if="detail" class="detail-grid">
+        <!-- Left: amount hero card -->
+        <div class="detail-card hero-card">
+          <div class="hero-type-label">{{ txLabel(detail) }}</div>
           <div class="amount-hero" :class="parseFloat(detail.amount) >= 0 ? 'pos' : 'neg'">
             {{ formatMoney(detail.amount, locale) }}
           </div>
-          <div class="type-label">{{ txLabel(detail) }}</div>
+          <div class="hero-summary">{{ txSummaryLabel(detail, t) || '-' }}</div>
+          <div class="hero-time">{{ new Date(detail.createdAt).toLocaleString() }}</div>
+        </div>
 
+        <!-- Right: detail rows -->
+        <div class="detail-card rows-card">
+          <div class="card-title">{{ t('wallet.detail_info') || '详细信息' }}</div>
           <div class="detail-rows">
             <div class="detail-row">
               <span class="row-label">{{ t('wallet.type') || '类型' }}</span>
@@ -100,6 +107,10 @@ function txLabel(tx: TxDetail): string {
               <span class="row-label">{{ t('wallet.note') || '备注' }}</span>
               <span class="row-val">{{ txSummaryLabel(detail, t) || '-' }}</span>
             </div>
+            <div class="detail-row">
+              <span class="row-label">{{ t('wallet.amount') || '金额' }}</span>
+              <span class="row-val mono" :class="parseFloat(detail.amount) >= 0 ? 'pos' : 'neg'">{{ formatMoney(detail.amount, locale) }}</span>
+            </div>
             <div class="detail-row">
               <span class="row-label">{{ t('wallet.balance_before') || '变动前余额' }}</span>
               <span class="row-val mono">{{ formatMoney(detail.balanceBefore, locale) }}</span>
@@ -126,9 +137,9 @@ function txLabel(tx: TxDetail): string {
             </div>
           </div>
         </div>
-
-        <div v-else class="empty-state">{{ t('common.not_found') || '未找到记录' }}</div>
       </div>
+
+      <div v-else class="empty-state">{{ t('common.not_found') || '未找到记录' }}</div>
     </main>
   </div>
 </template>
@@ -138,13 +149,6 @@ function txLabel(tx: TxDetail): string {
 
 .account-main { flex: 1; min-width: 0; padding: 24px 28px; overflow-y: auto; }
 
-.detail-layout {
-  display: flex;
-  flex-direction: column;
-  max-width: 560px;
-  margin: 0 auto;
-}
-
 .page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
 .back-btn { background: none; border: none; color: var(--text-muted); font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; }
 .back-btn:hover { color: var(--text); }
@@ -154,6 +158,13 @@ function txLabel(tx: TxDetail): string {
 .retry-btn { padding: 8px 24px; border-radius: 6px; border: 1px solid var(--primary); background: transparent; color: var(--primary-light); font-size: 13px; font-weight: 700; cursor: pointer; }
 .empty-state { display: flex; align-items: center; justify-content: center; padding: 80px 20px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
 
+.detail-grid {
+  display: grid;
+  grid-template-columns: 360px 1fr;
+  gap: 20px;
+  max-width: 1000px;
+}
+
 .detail-card {
   background: var(--desktop-sidebar-bg);
   border: 1px solid var(--desktop-border);
@@ -161,27 +172,53 @@ function txLabel(tx: TxDetail): string {
   padding: 28px;
 }
 
+/* Hero card (left) */
+.hero-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 8px;
+  min-height: 280px;
+}
+
+.hero-type-label {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
 .amount-hero {
-  font-size: 36px;
+  font-size: 42px;
   font-weight: 800;
   font-variant-numeric: tabular-nums;
   font-family: 'SF Mono', 'Consolas', monospace;
   line-height: 1.1;
-  margin-bottom: 6px;
+  margin: 8px 0;
 }
 
 .amount-hero.pos { color: var(--primary-light); }
 .amount-hero.neg { color: var(--danger); }
 
-.type-label {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text-muted);
-  margin-bottom: 24px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--desktop-border);
+.hero-summary {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  max-width: 280px;
 }
 
+.hero-time {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+/* Rows card (right) */
+.card-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--desktop-border); }
+
 .detail-rows { display: flex; flex-direction: column; gap: 0; }
 
 .detail-row {
@@ -193,9 +230,13 @@ function txLabel(tx: TxDetail): string {
 
 .detail-row:last-child { border-bottom: none; }
 
-.row-label { width: 120px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); font-weight: 600; }
+.row-label { width: 130px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); font-weight: 600; }
 .row-val { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); word-break: break-all; }
 .row-val.pos { color: var(--primary-light); }
 .row-val.neg { color: var(--danger); }
 .mono { font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; letter-spacing: 0.03em; }
+
+@media (max-width: 760px) {
+  .detail-grid { grid-template-columns: 1fr; }
+}
 </style>
diff --git a/apps/player/src/views/desktop/DesktopWalletView.vue b/apps/player/src/views/desktop/DesktopWalletView.vue
index cd1ee4a..2fd60fe 100644
--- a/apps/player/src/views/desktop/DesktopWalletView.vue
+++ b/apps/player/src/views/desktop/DesktopWalletView.vue
@@ -1,17 +1,25 @@
 <script setup lang="ts">
 import { ref, onMounted, onActivated } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter, RouterLink } from 'vue-router';
+import { RouterLink } from 'vue-router';
 import api from '../../api';
 import GoldSpinner from '../../components/GoldSpinner.vue';
 import Pagination from '../../components/desktop/Pagination.vue';
 import DesktopWalletSubNav from '../../components/desktop/DesktopWalletSubNav.vue';
+import DesktopTxDetailModal from '../../components/desktop/DesktopTxDetailModal.vue';
 import { formatMoney } from '../../utils/localeDisplay';
 import { txTypeKey, txDisplayType, txAmountClass, txSummaryLabel } from '../../utils/walletTx';
 import { parseCashbackApiData, sumCashbackAmount } from '../../utils/cashback';
 
 const { t, locale } = useI18n();
-const router = useRouter();
+
+const detailModalVisible = ref(false);
+const detailTxId = ref<string | null>(null);
+
+function openDetail(txId: string) {
+  detailTxId.value = txId;
+  detailModalVisible.value = true;
+}
 
 type Transaction = {
   transactionType: string;
@@ -113,7 +121,7 @@ onActivated(() => fetchData(1));
               v-for="tx in items"
               :key="tx.transactionId"
               class="hover-row clickable-row"
-              @click="router.push(`/wallet/transactions/${tx.transactionId}`)"
+              @click="openDetail(tx.transactionId)"
             >
               <td class="type-cell">{{ txLabel(tx) }}</td>
               <td class="muted-cell">{{ txSubtitle(tx) || '-' }}</td>
@@ -139,6 +147,8 @@ onActivated(() => fetchData(1));
         <span>{{ t('wallet.no_records') }}</span>
       </div>
     </section>
+
+    <DesktopTxDetailModal v-model:visible="detailModalVisible" :transaction-id="detailTxId" />
   </div>
 </template>