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

@@ -1,90 +1,145 @@
 <template>
-  <div @click="infoVisible = true" class="shadow mb-2 p-2 rounded-lg">
+  <div v-if="variant === 'desktop'" class="dptr-card">
+    <p class="dptr-card__price">{{ usePrice(item.target_price) }}</p>
 
+    <div class="dptr-card__meta">
+      <div class="dptr-card__row">
+        <span class="dptr-card__label">جهت قیمت:</span>
+        <span class="dptr-card__value">{{ returnPriceCondition(item.price_condition) }}</span>
+      </div>
+      <div class="dptr-card__row">
+        <span class="dptr-card__label">نوع هشدار:</span>
+        <span class="dptr-card__value">{{ returnAction(item.action) }}</span>
+      </div>
+    </div>
+
+    <div class="dptr-card__actions">
+      <button
+        type="button"
+        class="dptr-card__icon-btn dptr-card__icon-btn--edit"
+        @click.stop="emits('edit', item)"
+      >
+        <BasicIcon color="green" icon="vuesax-linear:edit" size="18" />
+      </button>
+      <button
+        type="button"
+        class="dptr-card__icon-btn dptr-card__icon-btn--danger"
+        @click.stop="deleteConfirmVisible = true"
+      >
+        <BasicIcon color="red" icon="vuesax-linear:trash" size="18" />
+      </button>
+    </div>
+
+    <div class="dptr-card__footer">
+      <span class="dptr-card__date">{{ toJalali(item.created_at) }}</span>
+      <a-switch
+        v-model:checked="isActive"
+        checked-children="فعال"
+        un-checked-children="غیر فعال"
+        @change="changeActive"
+      />
+    </div>
+
+    <DialogVant v-model:show="deleteConfirmVisible" :closeOnClickOverlay="false" :timeOut="-1" teleport="body">
+      <template #title>
+        <div class="flex flex-col items-center">
+          <div class="p-5 text-sm">آیا از حذف هشدار اطمینان دارید؟</div>
+        </div>
+      </template>
+      <template #button>
+        <div class="text-center text-red flex items-center justify-center" @click="deleteItem">
+          <a-spin :spinning="deleteLoading" size="small">تایید</a-spin>
+        </div>
+        <div class="text-center" @click="deleteConfirmVisible = false">انصراف</div>
+      </template>
+    </DialogVant>
+  </div>
+
+  <div v-else @click="infoVisible = true" class="shadow mb-2 p-2 rounded-lg">
     <div class="flex justify-between">
       <div>
-        <div class="font-bold text-base mb-2">{{usePrice(item.target_price) }}</div>
+        <div class="font-bold text-base mb-2">{{ usePrice(item.target_price) }}</div>
       </div>
-
-      <div class="flex gap-2 ">
-        <BasicIcon color="red" icon="vuesax-linear:trash" @click.stop="deleteConfirmVisible = true" class="p-1"/>
-        <BasicIcon color="green" icon="vuesax-linear:edit" @click.stop="emits('edit',item)" class="p-1"/>
+      <div class="flex gap-2">
+        <BasicIcon
+          class="p-1"
+          color="red"
+          icon="vuesax-linear:trash"
+          @click.stop="deleteConfirmVisible = true"
+        />
+        <BasicIcon
+          class="p-1"
+          color="green"
+          icon="vuesax-linear:edit"
+          @click.stop="emits('edit', item)"
+        />
       </div>
     </div>
     <div class="flex flex-col gap-2 mt-2">
-      <BasicInfoItem is-line title="جهت قیمت" :value="returnPriceCondition(item.price_condition)"/>
-
-      <BasicInfoItem is-line title="نوع هشدار" :value="returnAction(item.action)"/>
+      <BasicInfoItem is-line title="جهت قیمت" :value="returnPriceCondition(item.price_condition)" />
+      <BasicInfoItem is-line title="نوع هشدار" :value="returnAction(item.action)" />
     </div>
     <a-divider class="!my-3" />
-
     <div class="flex justify-between mt-1">
-      <div class="mb-2">{{toJalali(item.created_at)}}</div>
-      <a-switch v-model:checked="isActive" checked-children="فعال" un-checked-children="غیر فعال" @change="changeActive"/>
+      <div class="mb-2">{{ toJalali(item.created_at) }}</div>
+      <a-switch
+        v-model:checked="isActive"
+        checked-children="فعال"
+        un-checked-children="غیر فعال"
+        @change="changeActive"
+      />
     </div>
 
-  </div>
-
-<!--  <teleport to="app">-->
-    <DialogVant v-model:show="deleteConfirmVisible" teleport="body" :closeOnClickOverlay="false" :timeOut="-1">
-      <!--      <template v-slot:img>
-              <img :src="registerDelayImage" alt="" class="opacity-80">
-            </template>-->
-
-      <template v-slot:title>
+    <DialogVant v-model:show="deleteConfirmVisible" :closeOnClickOverlay="false" :timeOut="-1" teleport="body">
+      <template #title>
         <div class="flex flex-col items-center">
-          <div class="p-5 text-sm">
-            آیا از حذف هشدار اطمینان دارید؟
-          </div>
+          <div class="p-5 text-sm">آیا از حذف هشدار اطمینان دارید؟</div>
         </div>
       </template>
-
-      <template v-slot:button>
+      <template #button>
         <div class="text-center text-red flex items-center justify-center" @click="deleteItem">
-          <a-spin :spinning="deleteLoading" size="small">
-            تایید
-          </a-spin>
-        </div>
-        <div class="text-center" @click="deleteConfirmVisible = false">
-          انصراف
+          <a-spin :spinning="deleteLoading" size="small">تایید</a-spin>
         </div>
+        <div class="text-center" @click="deleteConfirmVisible = false">انصراف</div>
       </template>
-
     </DialogVant>
-<!--  </teleport>-->
-
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { usePrice, usePriceWithoutType } from '../../../../utils/usePrice'
-import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import { computed, onMounted, ref } from 'vue'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import { toJalali, toJalaliNotime, toJalaliOutOfUTC, toTime } from '../../../../utils/useDateTime'
+import { usePrice } from '../../../../utils/usePrice'
+import { onMounted, ref } from 'vue'
+import { toJalali } from '../../../../utils/useDateTime'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import type { PriceTrigger } from '@/models/PriceTrigger'
 import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
 import DialogVant from '@/components/DialogVant.vue'
-import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
 import { deletePriceTrigger, updatePriceTrigger } from '@/api/triggerPrice'
 import { loading } from '@/utils'
 
-const infoVisible = ref<boolean>(false)
-
-const isActive = ref<boolean>(false)
-
+const infoVisible = ref(false)
+const isActive = ref(false)
 const deleteLoading = ref(false)
 const deleteConfirmVisible = ref(false)
 
-interface Prop {
-  item: PriceTrigger
-}
-onMounted(()=> isActive.value = props.item.is_active)
+const props = withDefaults(
+  defineProps<{
+    item: PriceTrigger
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const emits = defineEmits(['edit', 'refresh'])
+
+onMounted(() => {
+  isActive.value = props.item.is_active
+})
+
 function changeActive(val: boolean) {
-  console.log(val)
   try {
     loading.value = true
-    updatePriceTrigger(props?.item.id, {is_active: val})
+    updatePriceTrigger(props?.item.id, { is_active: val })
   } catch (e) {
     console.log(e)
     isActive.value = !isActive.value
@@ -95,15 +150,13 @@ function changeActive(val: boolean) {
 
 function returnPriceCondition(val: string) {
   switch (val) {
-    case '==': return 'مساوی'
-    case '<': return 'کوچکتر'
-    // case '==': return 'مساوی'
+    case '==':
+      return 'مساوی'
+    case '<':
+      return 'کوچکتر'
+    case '>':
+      return 'بزرگتر'
   }
-/*  if (val === '=='){
-    return 'مساوی'
-  } else if (val === '<'){
-    return 'کوچکتر'
-  }*/
 }
 
 async function deleteItem() {
@@ -121,41 +174,12 @@ async function deleteItem() {
 
 function returnAction(val: string) {
   switch (val) {
-    case 'sms': return 'پیامک'
-    case 'email': return 'ایمیل'
-    case 'notify': return 'نوتیفیکیشن'
-    // case '==': return 'مساوی'
+    case 'sms':
+      return 'پیامک'
+    case 'email':
+      return 'ایمیل'
+    case 'notify':
+      return 'نوتیفیکیشن'
   }
-  /*  if (val === '=='){
-      return 'مساوی'
-    } else if (val === '<'){
-      return 'کوچکتر'
-    }*/
 }
-
-
-const props = withDefaults(defineProps<Prop>(), {})
-const emits = defineEmits(['edit','refresh'])
-
-const isUp = computed(() => props.item.type === 3 || props.item.type === 1 || props.item.type === 8)
-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 'فروش طلا'
-    }
-  }
-})*/
 </script>
-
-<style scoped>
-
-</style>