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/home/composables/useBanners.ts

@@ -1,37 +1,74 @@
 import { ref } from 'vue'
 import { getConstByKey } from '@/api/const'
 
-export function useBanners() {
-    const banners = ref([])
-    const loading = ref(false)
+/** Module-level banner state — shared by mobile and desktop home layouts. */
+const banners = ref<unknown[]>([])
+const bannersLoading = ref(false)
+let bannersPromise: Promise<void> | null = null
+let bannersLoaded = false
 
-    const loadBanners = async () => {
-        try {
-            loading.value = true
-            const response = await getConstByKey('header_banner')
-            if (!response) return
+async function fetchBanners(force = false) {
+  if (!force && bannersLoaded) {
+    return
+  }
 
-            let list = []
-            if (typeof response === 'string') {
-                list = JSON.parse(response)
-            } else if (typeof response === 'object' && !Array.isArray(response) && 'value' in response) {
-                list = typeof response.value === 'string' ? JSON.parse(response.value) : response.value
-            } else if (Array.isArray(response) && response.length > 0) {
-                const first = response[0]
-                if (first.value) {
-                    list = typeof first.value === 'string' ? JSON.parse(first.value) : first.value
-                } else if (first.icon) {
-                    list = response
-                }
-            }
+  if (!force && bannersPromise) {
+    return bannersPromise
+  }
 
-            banners.value = Array.isArray(list) ? list.filter(b => b.show === true) : []
-        } catch (error) {
-            console.error('Error loading banners:', error)
-        } finally {
-            loading.value = false
+  bannersPromise = (async () => {
+    try {
+      bannersLoading.value = true
+      const response = await getConstByKey('header_banner')
+      if (!response) {
+        banners.value = []
+        return
+      }
+
+      let list: unknown[] = []
+      if (typeof response === 'string') {
+        list = JSON.parse(response)
+      } else if (typeof response === 'object' && !Array.isArray(response) && 'value' in response) {
+        const value = (response as { value: unknown }).value
+        list = typeof value === 'string' ? JSON.parse(value) : (value as unknown[])
+      } else if (Array.isArray(response) && response.length > 0) {
+        const first = response[0] as { value?: unknown; icon?: unknown }
+        if (first.value) {
+          list = typeof first.value === 'string' ? JSON.parse(first.value) : (first.value as unknown[])
+        } else if (first.icon) {
+          list = response
         }
-    }
+      }
 
-    return { banners, loading, loadBanners }
-}
+      banners.value = Array.isArray(list)
+        ? list.filter((banner) => (banner as { show?: boolean }).show === true)
+        : []
+      bannersLoaded = true
+    } catch (error) {
+      console.error('Error loading banners:', error)
+    } finally {
+      bannersLoading.value = false
+      bannersPromise = null
+    }
+  })()
+
+  return bannersPromise
+}
+
+export function useBanners() {
+  return {
+    banners,
+    loading: bannersLoading,
+    loadBanners: fetchBanners,
+  }
+}
+
+export function loadHomeBanners(force = false) {
+  return fetchBanners(force)
+}
+
+export function resetHomeBanners() {
+  banners.value = []
+  bannersLoaded = false
+  bannersPromise = null
+}