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/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="desktopConfig w-full right-0 left-0 absolute">
+  <div class="desktopConfig w-full right-0 left-0">
     <div v-if="popVisible" class="top-0 bottom-0 wrap-fix bg-primary z-100 opacity-60">
       <div class="absolute right-0 left-0 bottom-10vh flex flex-col items-center">
         <div>
@@ -10,60 +10,47 @@
       </div>
     </div>
     <AConfigProvider :theme="antTheme ?? undefined" direction="rtl">
-      <transition mode="out-in" name="fade">
-
-        <div v-if="!showSplash">
-          <router-view v-slot="{ Component, route }">
-            <transition :name="(route.meta.transition as string | undefined) || 'fade'">
-
-              <div>
-                <component :is="Component"/>
-              </div>
-            </transition>
-          </router-view>
-
-        </div>
-        <div
-          v-else
-          class="flex bottom-0 wrap-fix top-0 z-1000000000000 justify-center"
-          :style="{ backgroundColor: getProjectSplashBackground() }"
-        >
-          <template v-if="!isBoursecuProject()">
-            <div class="top-0 wrap-fix h-1/3 w-screen flex">
-              <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover"/>
-              <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none"/>
-            </div>
-            <div class="wrap-fix bottom-0 h-1/3 w-screen">
-              <img
-                  :src="img_bottomGradiant"
-                  alt=""
-                  class="absolute z-10 w-screen h-full object-cover"
-              />
-              <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none"/>
-            </div>
-          </template>
-          <div class="self-center splash_appear_fade_in">
+      <div v-if="showSplash" class="app-splash-screen flex justify-center" :style="{ backgroundColor: getProjectSplashBackground() }">
+        <template v-if="!isBoursecuProject()">
+          <div class="app-splash-screen__gradient app-splash-screen__gradient--top h-1/3 flex">
+            <img :src="img_topGradiant" alt="" class="absolute z-10 w-full h-full object-cover"/>
+            <img :src="img_pattern" alt="" class="absolute w-full h-full object-none"/>
+          </div>
+          <div class="app-splash-screen__gradient app-splash-screen__gradient--bottom h-1/3">
             <img
-              :src="getProjectLoginLogo(config?.config?.avatar)"
-              :class="hasCustomLoginLogoLayout()
-                ? 'w-[80vw] max-w-[320px] h-auto object-contain'
-                : 'h-[20vh] object-contain'"
-            >
-
+                :src="img_bottomGradiant"
+                alt=""
+                class="absolute z-10 w-full h-full object-cover"
+            />
+            <img :src="img_pattern" alt="" class="absolute w-full h-full object-none"/>
           </div>
-          <div class="fixed w-full bottom-5 home_appear_fade_in_up">
-            <div
-              class="text-center text-xs"
-              :class="isBoursecuProject() ? 'text-white' : ''"
-            >
-              نسخه: {{ pkg.version }}
-            </div>
-          </div>
-          <div class="absolute bottom-10">
-            <a-spin :indicator="splashIndicator" size="small"/>
+        </template>
+        <div class="self-center splash_appear_fade_in">
+          <img
+            :src="getProjectLoginLogo(config?.config?.avatar)"
+            :class="hasCustomLoginLogoLayout()
+              ? 'w-[80vw] max-w-[320px] h-auto object-contain'
+              : 'h-[20vh] object-contain'"
+          >
+        </div>
+        <div class="fixed w-full bottom-5 home_appear_fade_in_up">
+          <div
+            class="text-center text-xs"
+            :class="isBoursecuProject() ? 'text-white' : ''"
+          >
+            نسخه: {{ pkg.version }}
           </div>
         </div>
-      </transition>
+        <div class="absolute bottom-10">
+          <a-spin :indicator="splashIndicator" size="small"/>
+        </div>
+      </div>
+
+      <div v-else class="app-main">
+        <router-view v-slot="{ Component, route }">
+          <component :is="Component" :key="route.fullPath" />
+        </router-view>
+      </div>
     </AConfigProvider>
     <van-dialog
         v-model:show="versionDialog"
@@ -115,7 +102,7 @@
 <script lang="ts" setup>
 import pkg from '../package.json'
 import {useRegisterSW} from 'virtual:pwa-register/vue'
-import {computed, h, onMounted, ref} from 'vue'
+import {computed, h, onMounted, ref, watch} from 'vue'
 import img_topGradiant from '@/views/login/assets/img/gr_top_white.svg'
 import img_pattern from '@/views/login/assets/img/pattern.svg'
 import {LoadingOutlined} from '@ant-design/icons-vue'
@@ -123,9 +110,12 @@ import img_bottomGradiant from '@/views/login/assets/img/gr_bottom_white.svg'
 import {DotLottieVue} from '@lottiefiles/dotlottie-vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import {useConfigStore} from "@/store/configStore";
-import {getProjectFontFamily, getProjectLoginLogo, getProjectSplashBackground, getProjectBrandRed, hasCustomLoginLogoLayout, isBoursecuProject} from "@/utils/config";
+import {getProjectFontFamily, getProjectLoginLogo, getProjectSplashBackground, getProjectBrandRed, hasCustomLoginLogoLayout, isBoursecuProject, resetAppSurfaceBackground} from "@/utils/config";
 import {ConfigProvider as AConfigProvider} from 'ant-design-vue'
 import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
+import { useApplyDesktopLayoutClass } from '@/layouts/composables/useAppLayout'
+
+useApplyDesktopLayoutClass()
 
 const {offlineReady, needRefresh, updateServiceWorker} = useRegisterSW()
 const config = useConfigStore()
@@ -171,6 +161,12 @@ onMounted(async () => {
   }, 2000)
 })
 
+watch(showSplash, (visible) => {
+  if (!visible) {
+    resetAppSurfaceBackground()
+  }
+})
+
 const versionDialog = ref<boolean>(false)
 
 function checkVersion() {
@@ -200,6 +196,7 @@ function update() {
   --app-credit-footer-offset: calc(var(--app-credit-bar-inner) + var(--app-safe-bottom));
   --app-nav-height: 80px;
   --app-bottom-chrome-height: calc(var(--app-nav-height) + var(--app-credit-footer-offset));
+  --app-desktop-sidebar-width: 260px;
   --app-add-card-height: 88px;
   /* بخشی از کارت کیف‌پول زیر نوار «افزودن کارت جدید» دیده می‌شود */
   --wallet-card-dock-overlap: 52px;
@@ -210,6 +207,16 @@ function update() {
   --app-z-dialog: 5300;
 }
 
+.app-main {
+  width: 100%;
+  min-height: 100vh;
+  opacity: 1 !important;
+}
+
+.desktopConfig {
+  min-height: 100vh;
+}
+
 .app-credit-footer {
   position: fixed;
   bottom: 0;
@@ -249,10 +256,17 @@ function update() {
   z-index: 9999;
 }
 
-@media screen and (min-width: 426px) {
+@media screen and (min-width: 426px) and (max-width: 767.98px) {
   .desktopConfig {
     width: 426px;
     position: relative !important;
   }
 }
+
+html.app-layout--desktop {
+  #support-button {
+    bottom: 12px;
+    right: calc(var(--app-desktop-sidebar-width, 260px) + 20px);
+  }
+}
 </style>