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/login/components/Login.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="w-full  flex flex-col">
+  <div class="w-full flex flex-col" :class="{ 'login-form--desktop': variant === 'desktop' }">
     <div
-      v-if="hasCustomLoginLogoLayout()"
+      v-if="variant !== 'desktop' && hasCustomLoginLogoLayout()"
       class="flex flex-col items-center mb-[60px]"
     >
       <img
-        :src="getProjectLoginLogo(config.config.avatar)"
+        :src="getProjectLoginLogo(config.config?.avatar)"
         alt=""
         class="z-100 self-center w-56 h-auto object-contain"
       >
@@ -19,8 +19,8 @@
       </div>
     </div>
     <img
-      v-else
-      :src="getProjectLoginLogo(config.config.avatar)"
+      v-else-if="variant !== 'desktop'"
+      :src="getProjectLoginLogo(config.config?.avatar)"
       alt=""
       class="z-100 rounded-full aspect-square self-center w-36"
       style="margin-bottom: 60px"
@@ -29,20 +29,51 @@
     <!--    <div class="font-bold text-center text-xl">{{  URLUserType() === 'single' ? 'ورود' : 'ورود همکار'  }}</div>-->
 <!--    <div v-if="URLUserType() === 'single'" class="font-bold text-center text-xl">ورود</div>-->
 <!--    <div v-else class="font-bold text-center text-xl">ورود همکار</div>-->
-    <a-form ref="formRef" :model="userFormState" class="!mt-5" name="basic" @finish="phoneVerification">
-      <!--      <a-segmented v-model:value="value" :options="data" />-->
-      <div class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded mb-5">
-        <div :class="isSMS?'text-primary':'text-gray-400'" class="w-full text-center z-2"
-             @click.stop="setIsSMS(true) ">
+    <a-form
+      ref="formRef"
+      :model="userFormState"
+      :layout="variant === 'desktop' ? 'vertical' : 'horizontal'"
+      :class="variant === 'desktop' ? 'dauth-form' : '!mt-5'"
+      name="basic"
+      @finish="phoneVerification"
+    >
+      <div v-if="variant === 'desktop'" class="dauth-toggle">
+        <button
+          type="button"
+          class="dauth-toggle__btn"
+          :class="{ 'dauth-toggle__btn--active': isSMS }"
+          @click="setIsSMS(true)"
+        >
+          ورود با پیامک
+        </button>
+        <button
+          type="button"
+          class="dauth-toggle__btn"
+          :class="{ 'dauth-toggle__btn--active': !isSMS }"
+          @click="setIsSMS(false)"
+        >
+          ورود با کلمه عبور
+        </button>
+      </div>
+      <div
+        v-else
+        class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded mb-5"
+      >
+        <div
+          :class="isSMS ? 'text-primary' : 'text-gray-400'"
+          class="w-full text-center z-2"
+          @click.stop="setIsSMS(true)"
+        >
           ورود با پیامک
         </div>
-        <div :class="!isSMS?'text-primary':'text-gray-400'" class="w-full text-center z-2"
-             @click.stop="setIsSMS(false) ">
+        <div
+          :class="!isSMS ? 'text-primary' : 'text-gray-400'"
+          class="w-full text-center z-2"
+          @click.stop="setIsSMS(false)"
+        >
           ورود با کلمه عبور
         </div>
-        <!--        <div ref="bganim" class="absolute bg-white h-8 w-1/2 rounded-lg " :style="`transform: translateX(${isDeposit? '0':'-100%'}); left: ${isDeposit? '0':'100%'}`"></div>-->
-        <div ref="bganim" :style="useStyle()"
-             class="absolute bg-white h-8 w-1/2 rounded-lg animate right"></div>
+        <div ref="bganim" :style="useStyle()" class="absolute bg-white h-8 w-1/2 rounded-lg animate right" />
       </div>
 
       <!--      <transition name="fade" mode="out-in">-->
@@ -69,20 +100,13 @@
         <!--        <BasicInput v-model:value="userFormState.password" size="large" place-holder="کلمه عبور"/>-->
         <AInputPassword v-model:value="userFormState.password" place-holder="کلمه عبور" size="large"/>
       </a-form-item>
-      <div v-else-if="!stepTwoVerify" class="h-[90px]"></div>
+      <div v-else-if="!stepTwoVerify" :class="variant === 'desktop' ? 'h-0' : 'h-[90px]'" />
       <div v-else>
         <AFormItem
           :rules="[
-                    {
-                      required: true,
-                      message: 'کد ارسال شده را وارد نمایید',
-                    },
-                    {
-                      min: 4,
-                      max: 4,
-                      message: 'کد ارسال شده را وارد نمایید',
-                    },
-                  ]"
+            { required: true, message: 'کد ارسال شده را وارد نمایید' },
+            { min: 4, max: 4, message: 'کد ارسال شده را وارد نمایید' },
+          ]"
           class="error-token"
           name="token"
         >
@@ -92,7 +116,7 @@
             :num-inputs="4"
             :should-auto-focus="true"
             autocomplete="one-time-code"
-            class="mt-5 justify-center"
+            :class="variant === 'desktop' ? 'dauth-otp justify-center' : 'mt-5 justify-center'"
             input-classes="otp-input"
             separator=""
             style="direction: ltr"
@@ -101,7 +125,18 @@
             @on-complete="handleOnComplete"
           />
         </AFormItem>
-        <div class="flex items-center my-[23px] justify-center">
+
+        <div
+          v-if="variant === 'desktop'"
+          class="dauth-phone-edit"
+        >
+          <span class="dauth-phone-edit__number">{{ userFormState.mobile }}</span>
+          <button type="button" class="dauth-phone-edit__btn" @click="stepTwoVerify = false">
+            <span>ویرایش شماره</span>
+            <BasicIcon icon="vuesax-linear:edit" size="16" />
+          </button>
+        </div>
+        <div v-else class="flex items-center my-[23px] justify-center">
           <span class="text-gray-400 mt-1">{{ userFormState.mobile }}</span>
           <div class="flex items-center text-gray-700 mr-2" @click="stepTwoVerify = false">
             <span class="ml-1">ویرایش شماره</span>
@@ -109,7 +144,7 @@
           </div>
         </div>
 
-        <div class="mb-2 w-full">
+        <div :class="variant === 'desktop' ? 'dauth-resend' : 'mb-2 w-full'">
           <AButton :disabled="!enableSendAgainCode" class="w-full" type="dashed" @click="reSendCode">
             <div v-if="!enableSendAgainCode" class="flex w-full justify-center">
               <span>ارسال مجدد کد در </span>
@@ -125,15 +160,62 @@
 
       <!--      </transition>-->
 
-
-      <a-form-item>
-        <!--        <div class="flex text-gray-600 text-xs my-2">با ورود یا ثبت نام
-                  <div class="mx-1 font-bold">شرایط و قوانین</div>
-                  را میپذیرم
-                </div>-->
+      <div v-if="variant === 'desktop'" class="dauth-actions">
         <BasicButton
           :disabled="loading"
-          class=" w-full py-2"
+          class="w-full dauth-actions__submit"
+          html-type="submit"
+          type="primary"
+        >
+          <a-spin v-if="loading" size="small" />
+          <span v-else>{{ !isSMS ? 'ورود' : stepTwoVerify ? 'ورود' : 'ارسال کد' }}</span>
+        </BasicButton>
+
+        <BasicButton
+          v-if="getToken() && userStore.userInfo?.finger_print"
+          :disabled="loading"
+          class="w-full"
+          @click="enterFingerPrint"
+        >
+          ورود با اثر انگشت
+        </BasicButton>
+
+        <template v-if="config.config?.name === 'garoosi'">
+          <div class="dauth-actions-row">
+            <a
+              class="dauth-link-btn dauth-link-btn--primary"
+              download="Garoosi.apk"
+              href="https://garoosigholaktala.ir/apk/Garoosi.apk"
+            >
+              دانلود اپ اندروید
+            </a>
+            <button type="button" class="dauth-link-btn" @click="installWebApp">
+              نصب نسخه وب اپ
+            </button>
+          </div>
+          <button type="button" class="dauth-link-btn" @click="goToEducate">
+            آموزش کار با نرم افزار
+          </button>
+          <button type="button" class="dauth-link-btn" @click="goToAboutUs">
+            درباره ما
+          </button>
+        </template>
+      </div>
+
+      <div
+        v-if="isRegister && variant === 'desktop'"
+        class="dauth-switch"
+      >
+        <span>حساب کاربری ندارید؟</span>
+        <button type="button" class="dauth-switch__link" @click="$emit('register', true)">
+          ثبت نام کنید
+        </button>
+      </div>
+
+      <a-form-item v-if="variant !== 'desktop'">
+        <BasicButton
+          :disabled="loading"
+          class="w-full py-2"
           html-type="submit"
           type="primary"
         >
@@ -152,34 +234,35 @@
             ورود با اثر انگشت
           </div>
         </BasicButton>
-        <div v-if="config.config.name === 'garoosi'" class="flex w-full gap-2 mb-2 mt-2">
-          <a
+        <template v-if="config.config?.name === 'garoosi'">
+          <div class="flex w-full gap-2 mb-2 mt-2">
+            <a
               class="flex w-full items-center justify-center rounded py-2 text-white bg-primary border-none cursor-pointer no-underline"
               download="Garoosi.apk"
               href="https://garoosigholaktala.ir/apk/Garoosi.apk"
-          >
-            <div>دانلود اپ اندروید</div>
-          </a>
-          <BasicButton type="primary" class="w-full" @click="installWebApp">
-            <div>نصب نسخه وب اپ</div>
-          </BasicButton>
-        </div>
-        <BasicButton v-if="config.config.name === 'garoosi'" class="w-full !font-bold" @click="goToEducate">
-          <div class="flex gap-2 items-center">آموزش کار با نرم افزار</div>
-        </BasicButton>
-        <BasicButton
-            v-if="config.config.name === 'garoosi'"
-            class="mt-2 w-full"
-            icon=""
-            iconSize="18"
-            @click="goToAboutUs()"
-        >
-          <div class="flex">
-            <div>درباره ما</div>
+            >
+              <div>دانلود اپ اندروید</div>
+            </a>
+            <BasicButton type="primary" class="w-full" @click="installWebApp">
+              <div>نصب نسخه وب اپ</div>
+            </BasicButton>
           </div>
-        </BasicButton>
+          <BasicButton class="w-full !font-bold" @click="goToEducate">
+            <div class="flex gap-2 items-center">آموزش کار با نرم افزار</div>
+          </BasicButton>
+          <BasicButton class="mt-2 w-full" icon="" iconSize="18" @click="goToAboutUs">
+            <div class="flex">
+              <div>درباره ما</div>
+            </div>
+          </BasicButton>
+        </template>
 
-        <div v-if="isRegister" class="cursor-pointer flex gap-1 justify-center mt-5 text-xs" @click="$emit('register',true)">اگر حساب کاربری ندارید
+        <div
+          v-if="isRegister"
+          class="cursor-pointer flex gap-1 justify-center mt-5 text-xs"
+          @click="$emit('register', true)"
+        >
+          اگر حساب کاربری ندارید
           <div class="font-bold text-primary">از این قسمت</div>
           ثبت نام کنید.
         </div>
@@ -258,7 +341,7 @@ import { mobileValidation, required } from '@/utils/inputRules'
 import BasicInput from '@/components/BasicPacks/BasicInput.vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import { authenticateWithFingerprint, getToken, loading, removeToken, setToken, URLUserType } from '@/utils'
-import {computed, onMounted, reactive, ref} from 'vue'
+import {computed, reactive, ref, inject, unref} from 'vue'
 import OtpInput from 'vue3-otp-input'
 import type { Login } from '@/models/login'
 import type { FormInstance } from 'ant-design-vue'
@@ -270,7 +353,7 @@ import router from '@/router'
 import { useUserStore } from '@/store/userStore'
 import { useWalletStore } from '@/store/walletStore'
 import { useSettingsStore } from '@/store/settingsStore'
-import { fingerPosition, setTruth } from '@/main'
+import { setTruth } from '@/main'
 import {useConfigStore} from "@/store/configStore";
 import {getConfigApp, getProjectLoginLogo, getProjectLoginTaglineLines, hasCustomLoginLogoLayout} from "@/utils/config";
 import BasicActionSheet from "@/components/BasicPacks/BasicActionSheet.vue";
@@ -279,6 +362,22 @@ import shareAppleIcon from '@/assets/img/share-apple.png'
 import addToHomeScreenIcon from '@/assets/img/Add-to-homeScreen.png'
 import {getProducts} from "@/api/products";
 import {getSettings} from "@/api/configuration";
+import { LOGIN_PAGE_CONTEXT_KEY } from '../composables/useLoginPage'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+defineEmits<{
+  register: [val: boolean]
+}>()
+
+const loginPageContext = inject(LOGIN_PAGE_CONTEXT_KEY, null)
+const isRegister = computed(() => unref(loginPageContext?.loginForm?.isRegister) ?? false)
+
 const config=useConfigStore()
 const { time, onFinish, reset } = useCountdownTimer('00:02:00', 'mm:ss')
 const enableSendAgainCode = ref<boolean>(false)
@@ -433,21 +532,11 @@ const showPWAInstallGuide = ref(false)
 async function installWebApp() {
   showPWAInstallGuide.value = true
 }
-const isRegister = ref()
-async function isOpenRegister() {
-  const settingsStore = useSettingsStore()
-  await settingsStore.fetchSettings()
-  isRegister.value = settingsStore.settings.find(s => s?.key === 'open_register' && s?.is_active === true)
-}
 
 async function proceedWithInstall() {
   showPWAInstallGuide.value = false
 }
 
-onMounted(async () => {
-  await isOpenRegister()
-})
-
 </script>
 <style lang="less">
 .animate.right {