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/transactions/components/Item.vue

@@ -1,24 +1,70 @@
 <template>
-  <div @click="infoVisible = true">
-    <!--    {{  item}}-->
+  <button
+    v-if="variant === 'desktop'"
+    type="button"
+    class="dtxn-row"
+    @click="infoVisible = true"
+  >
+    <span
+      class="dtxn-row__icon"
+      :class="isUp ? 'dtxn-row__icon--up' : 'dtxn-row__icon--down'"
+    >
+      <Icon :icon="`vuesax-linear:${isUp ? 'arrow-up-2' : 'arrow-down-2'}`" size="18" />
+    </span>
+    <div class="dtxn-row__main">
+      <p class="dtxn-row__title">{{ props.item.title }}</p>
+      <div class="dtxn-row__meta">
+        <span>{{ toJalaliOutOfUTC(props.item.expire_at) }}</span>
+        <span :class="props.item.gold >= 0 ? 'text-green-600' : 'text-red-600'">
+          {{ props.item.gold }} {{ props.item.unit }}
+        </span>
+        <span v-if="isGold">
+          قیمت معامله:
+          {{ usePriceWithoutType(parseInt((Math.abs(props.item.cash) / Math.abs(props.item.gold)).toFixed(0))) }}
+          ریال
+        </span>
+      </div>
+    </div>
+    <div
+      class="dtxn-row__amount"
+      :class="props.item.cash > 0 ? 'dtxn-row__amount--up' : 'dtxn-row__amount--down'"
+    >
+      {{ usePriceWithoutType(props.item.cash ?? 0) }} ریال
+    </div>
+    <div class="dtxn-row__status">
+      <ATag color="blue" class="!py-1 !px-4 !ml-0 !text-xs">
+        {{ props.item.order?.sts_str ?? props.item.withdraw?.sts_str }}
+      </ATag>
+    </div>
+  </button>
+
+  <div v-else @click="infoVisible = true">
     <div class="flex">
-      <div :class="isUp? 'bg-green-50':'bg-red-50'" class="rounded-lg p-3 h-fit w-fit flex justify-center items-center">
-        <Icon :class="isUp? 'text-green-600':'text-red-600'"
-              :icon="`vuesax-linear:${isUp? 'arrow-up-2':'arrow-down-2'}`" />
+      <div
+        :class="isUp ? 'bg-green-50' : 'bg-red-50'"
+        class="rounded-lg p-3 h-fit w-fit flex justify-center items-center"
+      >
+        <Icon
+          :class="isUp ? 'text-green-600' : 'text-red-600'"
+          :icon="`vuesax-linear:${isUp ? 'arrow-up-2' : 'arrow-down-2'}`"
+        />
       </div>
       <div class="w-full mr-3">
         <div class="flex justify-between w-full">
-          <div>{{ item.title }}</div>
-          <div>{{ toJalaliOutOfUTC(item.expire_at) }}</div>
+          <div>{{ props.item.title }}</div>
+          <div>{{ toJalaliOutOfUTC(props.item.expire_at) }}</div>
         </div>
         <div class="flex justify-between mt-2">
-          <div :class="item.gold >= 0? 'text-green-600':'text-red-600'"
-               class="text-gray-500 text-xs  number-ltr">{{ item.gold }}
-            <div>{{item.unit}}</div>
+          <div
+            :class="props.item.gold >= 0 ? 'text-green-600' : 'text-red-600'"
+            class="text-gray-500 text-xs number-ltr"
+          >
+            {{ props.item.gold }}
+            <div>{{ props.item.unit }}</div>
           </div>
           <div class="text-gray-500 flex gap-1 text-xs items-center number-ltr">
-            <div :class="item.cash > 0 ? 'text-green-600':'text-red-600'" class="text-base">
-              {{ usePriceWithoutType(item.cash?? 0) }}
+            <div :class="props.item.cash > 0 ? 'text-green-600' : 'text-red-600'" class="text-base">
+              {{ usePriceWithoutType(props.item.cash ?? 0) }}
             </div>
             ریال
           </div>
@@ -28,8 +74,9 @@
     <div v-if="isGold" class="flex w-full justify-between mt-2">
       <div class="text-gray-500">قیمت معامله:</div>
       <div class="text-gray-500 flex gap-1 text-xs items-center">
-<!--        <div class="text-base">{{ typeof parseInt((Math.abs(item.cash) / Math.abs(item.gold)).toFixed(0)) }}</div>-->
-        <div class="text-base">{{ usePriceWithoutType(parseInt((Math.abs(item.cash) / Math.abs(item.gold)).toFixed(0))) }}</div>
+        <div class="text-base">
+          {{ usePriceWithoutType(parseInt((Math.abs(props.item.cash) / Math.abs(props.item.gold)).toFixed(0))) }}
+        </div>
         ریال
       </div>
     </div>
@@ -37,149 +84,63 @@
       <div class="text-gray-500">وضعیت :</div>
       <div class="text-gray-500 flex gap-1 text-xs items-center">
         <ATag class="!py-1 !px-6 !ml-0" color="blue">
-          {{ item.order?.sts_str ?? item.withdraw?.sts_str }}
+          {{ props.item.order?.sts_str ?? props.item.withdraw?.sts_str }}
         </ATag>
       </div>
     </div>
-    <!--    <div v-else class="h-8"></div>-->
     <a-divider class="!my-3" />
-    <BasicActionSheet v-model:show="infoVisible">
-      <div class="font-bold text-lg">{{ props.item.title }}</div>
-      <div class="mb-8rem mt-5">
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">مبلغ:</div>
-          <div :class="item.cash > 0? 'text-green-600' : 'text-red-600'" class="flex text-xs items-center number-ltr">
-            <div class="text-base ml-1">{{ usePriceWithoutType(item.cash?? 0) }}</div>
-            ریال
-          </div>
-        </div>
-        <div v-if="item.order" class="flex justify-between mb-3">
-          <div class="text-primary">قیمت هر گرم {{ getTradePriceUnitLabel() }} حین معامله:</div>
-          <div class="flex text-xs items-center number-ltr">
-            <div class="text-base ml-1">{{ usePriceWithoutType(item.order?.price?? 0) }}</div>
-            ریال
-          </div>
-        </div>
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">مقدار {{ item.wallet?.product ? item.wallet.product.title : getMeltedGoldTradeLabel() }} مبادله شده:</div>
-          <div :class="item.gold >= 0? 'text-green-600' : 'text-red-600'" class="flex flex-col items-end text-xs number-ltr">
-            <div class="flex items-center">
-              <div class="text-base ml-1">{{ item.gold }}</div>
-              {{ item.unit }}
-            </div>
-            <div
-              v-if="item.wallet?.product && getProductTotalWeightLabel(Math.abs(item.gold ?? 0), item.wallet.product)"
-              class="text-gray-500"
-            >
-              {{ getProductTotalWeightLabel(Math.abs(item.gold ?? 0), item.wallet.product) }}
-            </div>
-          </div>
-        </div>
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">{{ getCashWalletLabel(item.wallet?.product?.group_type) }}:</div>
-          <div :class="item.cash > 0? 'text-green-600' : 'text-red-600'" class="flex text-xs items-center number-ltr">
-            <div class="text-base">{{ usePriceWithoutType(item.balance_cash ?? 0) }}</div>
-            ریال
-          </div>
-        </div>
-        <div class="flex justify-between mb-3" v-if="item.wallet?.product">
-          <div class="text-primary">موجودی {{item.wallet.product.title}}:</div>
-          <div class="flex flex-col items-end text-xs text-yellow-700">
-            <div class="flex items-center">
-              <div class="text-base ml-1">{{ item.balance_gold }}</div>
-              {{ getProductQuantityUnit(item.wallet.product) }}
-            </div>
-            <div v-if="getProductUnitWeightLabel(item.wallet.product)" class="text-gray-500">
-              هر عدد {{ getProductUnitWeightLabel(item.wallet.product) }}
-            </div>
-          </div>
-        </div>
-        <div class="flex justify-between mb-3" v-else>
-          <div class="text-primary">{{ getGoldWalletLabel(item.wallet?.product?.group_type) }}:</div>
-          <div class="flex text-xs text-yellow-700 items-center">
-            <div class="text-base ml-1">{{ item.balance_gold }}</div>
-            {{ getWeightUnit() }}
-          </div>
-        </div>
-        <!--        <div class="flex justify-between mb-3">
-                  <div class="text-primary">موجودی کیف پول:</div>
-                  <div class="flex text-xs items-center" :class="isUp? 'text-green-600' : 'text-red-600'"><div class="text-base">{{usePriceWithoutType(12000000)}}</div>ریال</div>
-                </div>
-                <div class="flex justify-between mb-3">
-                  <div class="text-primary">موجودی کیف طلا:</div>
-                  <div class="flex items-center" :class="isUp? 'text-red-600' : 'text-green-600'">60 گرم</div>
-                </div>-->
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">وضعیت:</div>
-          <div class="flex text-xs items-center">
-            <ATag :color="item.active? 'blue': 'blue'" class="!py-1 !px-6 !ml-0">
-              {{ item.order?.sts_str ?? item.withdraw?.sts_str }}
-            </ATag>
-          </div>
-        </div>
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">تاریخ:</div>
-          <div>{{ toJalaliNotime(item.expire_at) }}</div>
-        </div>
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">زمان:</div>
-          <div>{{ toTime(item.expire_at) }}</div>
-        </div>
-        <!--        <div class="flex justify-between mb-3">
-                  <div class="text-primary">وضعیت معامله:</div>
-                  <div class="flex text-xs items-center">
-                    <ATag class="!py-1 !px-6 !ml-0" color="orange">
-                      معاملات باز
-                    </ATag>
-                  </div>
-                </div>-->
-        <div v-if="item.eaj" class="flex justify-between mb-3">
-          <div class="text-primary">مهلت ارسال فیش:</div>
-          <div>{{ item.eaj }}</div>
-        </div>
-        <BasicButton class="w-full mt-5" @click="infoVisible = false">بازگشت</BasicButton>
-      </div>
-    </BasicActionSheet>
   </div>
 
+  <BasicActionSheet v-if="variant !== 'desktop'" v-model:show="infoVisible">
+    <div class="font-bold text-lg">{{ props.item.title }}</div>
+    <TransactionDetailPanel :item="props.item" variant="mobile" />
+    <BasicButton class="w-full mt-5" @click="infoVisible = false">بازگشت</BasicButton>
+  </BasicActionSheet>
+
+  <BasicModal
+    v-else
+    v-model:visible="infoVisible"
+    :title="props.item.title"
+    width="520px"
+    custom-footer
+    destroy-on-close
+  >
+    <TransactionDetailPanel :item="props.item" variant="desktop" />
+    <template #footer>
+      <BasicButton class="w-full" @click="infoVisible = false">بستن</BasicButton>
+    </template>
+  </BasicModal>
 </template>
 
 <script lang="ts" setup>
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
-import { usePriceWithoutType } from '../../../../utils/usePrice'
+import { usePriceWithoutType } from '@/utils/usePrice'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
 import { computed, ref } from 'vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import type { Transaction } from '@/models/transaction'
-import { getCashWalletLabel, getGoldWalletLabel, getMeltedGoldTradeLabel, getProductQuantityUnit, getProductTotalWeightLabel, getProductUnitWeightLabel, getTradePriceUnitLabel, getWeightUnit } from '@/utils/productDealMethod'
-import { toJalaliNotime, toJalaliOutOfUTC, toTime } from '../../../../utils/useDateTime'
+import { toJalaliOutOfUTC } from '@/utils/useDateTime'
+import TransactionDetailPanel from './TransactionDetailPanel.vue'
 
-const infoVisible = ref<boolean>(false)
+const infoVisible = ref(false)
 
-interface Prop {
-  item: Transaction
-}
+const props = withDefaults(
+  defineProps<{
+    item: Transaction
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
 
-const props = withDefaults(defineProps<Prop>(), {})
-const isUp = computed(() => props.item.type === 3 || props.item.type === 1 || props.item.type === 8 || props.item.type === 9)
-const isGold = computed(() => props.item.type === 1 || props.item.type === 2 || props.item.type === 10)
-/*const title = computed(() => {
-  if (isUp.value) {
-    if (isGold.value) {
-      return 'واریز ریالی'
-    } else {
-      return 'خرید طلا'
-    }
-  } else {
-    if (isGold.value) {
-      return 'برداشت ریالی'
-    } else {
-      return 'فروش طلا'
-    }
-  }
-})*/
+const isUp = computed(
+  () =>
+    props.item.type === 3
+    || props.item.type === 1
+    || props.item.type === 8
+    || props.item.type === 9,
+)
+const isGold = computed(
+  () => props.item.type === 1 || props.item.type === 2 || props.item.type === 10,
+)
 </script>
-
-<style scoped>
-
-</style>