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/gold/desktop/styles/desktop-gold.less

@@ -0,0 +1,79 @@
+/* Desktop standalone gold trade page */
+
+.dgold {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+  padding: 28px 36px 40px;
+}
+
+.dgold-topbar {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  max-width: 720px;
+  margin: 0 auto 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+    flex-shrink: 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+.dgold__panel {
+  max-width: 720px;
+  margin: 0 auto;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  overflow-y: auto;
+  max-height: calc(100vh - 180px);
+  padding-bottom: 16px;
+}
+
+.dgold__panel .mb-25vh {
+  margin-bottom: 2rem !important;
+}
+
+.dgold__panel .bottom-18 {
+  position: static !important;
+  margin-top: 1rem;
+}

src/views/base/gold/index.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="h-35rem overflow-y-auto">
+  <div :class="isStandaloneDesktop ? 'dgold' : 'h-35rem overflow-y-auto'">
+    <header v-if="isStandaloneDesktop" class="dgold-topbar">
+      <button type="button" class="dgold-topbar__back" @click="router.back()">
+        <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+        بازگشت
+      </button>
+      <div class="dgold-topbar__meta">
+        <p class="dgold-topbar__eyebrow">معامله</p>
+        <h1 class="dgold-topbar__title">خرید و فروش {{ tradeProductLabel }}</h1>
+      </div>
+    </header>
+    <div :class="isStandaloneDesktop ? 'dgold__panel' : ''">
     <div class=" !overflow-y-scroll bg-white py-3   text-primary font-bold  flex justify-evenly">
       <!--      <div @click="isBuy = false" class="w-full text-center" :class="!isBuy?'text-primary':'text-gray-400'">خرید طلا</div>
             <div @click="isBuy = true" class="w-full text-center" :class="isBuy?'text-primary':'text-gray-400'">فروش طلا</div>-->
@@ -150,7 +161,7 @@
             </div>-->
     </div>
 
-    <BasicActionSheet v-model:show="confirmAction">
+    <BasicActionSheet v-if="!isStandaloneDesktop" v-model:show="confirmAction">
       <div class="font-bold text-lg"></div>
       <div class="w-full rounded-lg bg-gray-50 p-3">
         <div class="flex justify-between ">
@@ -185,6 +196,52 @@
       </div>
       <BasicButton class="mb-20 mt-5 w-full" type="primary" @click="ok(); confirmAction= false">ثبت نهایی</BasicButton>
     </BasicActionSheet>
+    <BasicModal
+      v-else
+      v-model:visible="confirmAction"
+      title="تأیید سفارش"
+      width="480px"
+      destroy-on-close
+      custom-footer
+    >
+      <div class="w-full rounded-lg bg-gray-50 p-3">
+        <div class="flex justify-between ">
+          <div>وزن:</div>
+          <div class="flex items-center">
+            <div class="font-bold">{{ form.goldValue }}</div>
+            <div class="text-xs mr-1">{{ weightUnit }}</div>
+          </div>
+        </div>
+        <div class="flex justify-between mt-3">
+          <div>مظنه:</div>
+          <div class="flex items-center">
+            <div class="font-bold">{{ usePriceWithoutType(Math.round(goldPriceValue)) }}</div>
+            <div class="text-xs mr-1">ریال</div>
+          </div>
+        </div>
+        <div class="flex justify-between mt-3">
+          <div>کارمزد:</div>
+          <div class="flex items-center gap-2">
+            <div class="font-bold text-xl">{{ feeInGrams }}</div>
+            <div class="text-xs mr-1">{{ weightUnit }}</div>
+          </div>
+        </div>
+        <div>(معادل {{ equivalentPrice }} ریال)</div>
+        <div class="flex justify-between mt-3">
+          <div>{{ isBuy ? 'قیمت قابل پرداخت:' : 'مبلغ دریافتی:' }}</div>
+          <div class="flex items-center">
+            <div class="font-bold">{{ usePriceWithoutType(payablePrice.toFixed(0)) }}</div>
+            <div class="text-xs mr-1">ریال</div>
+          </div>
+        </div>
+      </div>
+      <BasicButton class="mt-5 w-full" type="primary" @click="ok(); confirmAction = false">
+        ثبت نهایی
+      </BasicButton>
+      <template #footer>
+        <div></div>
+      </template>
+    </BasicModal>
     <van-dialog v-model:show="noCompleteVisible" class="completeButtonStyle" confirm-button-text="تکمیل اطلاعات"
                 show-confirm-button @confirm="router.push({name: 'user',query:{showEdit: true}})">
       <div class="flex flex-col items-center p-2">
@@ -197,6 +254,7 @@
         </div>
       </div>
     </van-dialog>
+    </div>
   </div>
 </template>
 
@@ -218,6 +276,8 @@ import { getLastPrice } from '@/api/home'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
 import { useUserStore } from '@/store/userStore'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
 import { justNumber } from '@/utils/inputRules'
 import GoldSkeleton from '@/views/base/gold/components/GoldSkeleton.vue'
 import GoldLoading from '@/components/GoldLoading.vue'
@@ -270,6 +330,8 @@ interface Prop {
 }
 
 const props = withDefaults(defineProps<Prop>(), {})
+const isDesktop = useDesktopBreakpoint()
+const isStandaloneDesktop = computed(() => isDesktop.value && !props.ProductItem)
 const isBuy = ref<boolean>(true)
 
 const tradeProductLabel = computed(() => {