Split desktop and mobile layouts with shared page data so APIs fetch once per context.

Add layout shells, desktop views, module-level page caches, and UI fixes for auth, home, wallet, transactions, address, and related pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/base/wallet/composables/useWalletPageData.ts

@@ -0,0 +1,187 @@
+import { ref } from 'vue'
+import { loading, loadingMore } from '@/utils'
+import type { Transaction } from '@/models/transaction'
+import { getActivatedCards } from '@/api/wallet'
+import { getTransactionTable, getTransactionTable2 } from '@/api/transaction'
+import type { TableEngineInput, TableOutput } from '@/models/table'
+import type { Card } from '@/models/wallet'
+import { useWalletStore } from '@/store/walletStore'
+import { runOnceAsync, resetOnceAsyncByPrefix } from '@/composables/useOnceAsync'
+import { loadSupportMessengerFromSettings } from '@/utils/supportMessenger'
+
+/**
+ * Shared wallet page datasets — mobile and desktop views read this module state only.
+ * Resize / breakpoint changes must not trigger new requests.
+ */
+let initPromise: Promise<void> | null = null
+const initialized = ref(false)
+
+export const walletCardItems = ref<Card[]>([])
+export const walletDepositItems = ref<Transaction[]>([])
+export const walletWithdrawItems = ref<Transaction[]>([])
+export const walletDepositTableOutput = ref<TableOutput<Transaction> | null>(null)
+export const walletWithdrawTableOutput = ref<TableOutput<Transaction> | null>(null)
+
+export const walletDepositPagination = ref<TableEngineInput>({
+  filters: [],
+  limit: 6,
+  page: 0,
+})
+
+export const walletWithdrawPagination = ref<TableEngineInput>({
+  filters: [
+    {
+      field: 'type',
+      cr: 'and',
+      type: 'number',
+      op: 'eq',
+      value: 4,
+    },
+  ],
+  limit: 6,
+  page: 0,
+})
+
+export function isWalletPageDataInitialized() {
+  return initialized.value
+}
+
+async function fetchDepositPage(append: boolean) {
+  const isFirstPage = walletDepositPagination.value.page === 0 && !append
+
+  if (isFirstPage) {
+    loading.value = true
+  } else {
+    loadingMore.value = true
+  }
+
+  try {
+    walletDepositTableOutput.value = await getTransactionTable2(walletDepositPagination.value)
+    const rows = walletDepositTableOutput.value.rows
+
+    if (isFirstPage) {
+      walletDepositItems.value = [...rows]
+    } else {
+      walletDepositItems.value.push(...rows)
+    }
+  } catch (error) {
+    console.error('Wallet deposit table error:', error)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+async function fetchWithdrawPage(append: boolean) {
+  const isFirstPage = walletWithdrawPagination.value.page === 0 && !append
+
+  if (isFirstPage) {
+    loading.value = true
+  } else {
+    loadingMore.value = true
+  }
+
+  try {
+    walletWithdrawTableOutput.value = await getTransactionTable(walletWithdrawPagination.value)
+    const rows = walletWithdrawTableOutput.value.rows
+
+    if (isFirstPage) {
+      walletWithdrawItems.value = [...rows]
+    } else {
+      walletWithdrawItems.value.push(...rows)
+    }
+  } catch (error) {
+    console.error('Wallet withdraw table error:', error)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+export async function refreshWalletCards() {
+  try {
+    walletCardItems.value = (await getActivatedCards()) ?? []
+  } catch (error) {
+    console.error('Wallet cards refresh error:', error)
+  }
+}
+
+export async function loadMoreWalletDeposits() {
+  if (
+    !walletDepositTableOutput.value
+    || (walletDepositPagination.value.page + 1) * walletDepositPagination.value.limit
+      >= walletDepositTableOutput.value.query.total
+  ) {
+    return
+  }
+
+  walletDepositPagination.value.page++
+  await fetchDepositPage(true)
+}
+
+export async function loadMoreWalletWithdrawals() {
+  if (
+    !walletWithdrawTableOutput.value
+    || (walletWithdrawPagination.value.page + 1) * walletWithdrawPagination.value.limit
+      >= walletWithdrawTableOutput.value.query.total
+  ) {
+    return
+  }
+
+  walletWithdrawPagination.value.page++
+  await fetchWithdrawPage(true)
+}
+
+export async function initWalletPageData(force = false) {
+  if (!force && initialized.value) {
+    return
+  }
+
+  if (!force && initPromise) {
+    return initPromise
+  }
+
+  initPromise = (async () => {
+    try {
+      if (force) {
+        resetWalletPageData()
+      }
+
+      loading.value = true
+      const walletStore = useWalletStore()
+
+      walletDepositPagination.value.page = 0
+      walletWithdrawPagination.value.page = 0
+
+      await Promise.all([
+        runOnceAsync('wallet:getMyWallet', () => walletStore.getMyWallet(), force),
+        runOnceAsync('wallet:cards', () => refreshWalletCards(), force),
+        runOnceAsync('wallet:deposit:init', () => fetchDepositPage(false), force),
+        runOnceAsync('wallet:withdraw:init', () => fetchWithdrawPage(false), force),
+      ])
+
+      loadSupportMessengerFromSettings()
+      initialized.value = true
+    } catch (error) {
+      console.error('Wallet page initialization error:', error)
+    } finally {
+      loading.value = false
+      initPromise = null
+    }
+  })()
+
+  return initPromise
+}
+
+export function resetWalletPageData() {
+  initialized.value = false
+  initPromise = null
+  resetOnceAsyncByPrefix('wallet:')
+  walletCardItems.value = []
+  walletDepositItems.value = []
+  walletWithdrawItems.value = []
+  walletDepositTableOutput.value = null
+  walletWithdrawTableOutput.value = null
+  walletDepositPagination.value.page = 0
+  walletWithdrawPagination.value.page = 0
+}