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/address/components/AddressForm.vue

@@ -0,0 +1,101 @@
+<template>
+  <a-form
+    ref="formRef"
+    :model="address"
+    :class="variant === 'desktop' ? 'daddr-form' : '!mt-5'"
+    name="address-form"
+  >
+    <div :class="variant === 'desktop' ? 'daddr-form__fields' : 'flex flex-col items-center'">
+      <div
+        v-if="variant !== 'desktop'"
+        class="font-bold text-lg mb-2"
+      >
+        آدرس
+      </div>
+      <div
+        :class="variant === 'desktop'
+          ? 'daddr-form__grid'
+          : 'flex flex-col gap-4 pb-20 w-full h-60vh overflow-y-scroll'"
+      >
+        <a-form-item label="استان" name="province" :rules="[required()]">
+          <BasicSelect
+            v-model:value="address.province"
+            :items="provinceList"
+            value-name="title"
+            key-name="title"
+            :size="variant === 'desktop' ? 'large' : undefined"
+            @change="changeProvince"
+          />
+        </a-form-item>
+        <a-form-item label="شهر" name="city" :rules="[required()]">
+          <BasicSelect
+            v-model:value="address.city"
+            :disabled="!cityList"
+            value-name="title"
+            :items="cityList"
+            key-name="title"
+            :size="variant === 'desktop' ? 'large' : undefined"
+          />
+        </a-form-item>
+        <a-form-item label="کد پستی" name="zip" :rules="[required()]">
+          <BasicInput
+            v-model:value="address.zip"
+            placeholder="کد پستی را وارد نمایید"
+            :size="variant === 'desktop' ? 'large' : undefined"
+          />
+        </a-form-item>
+        <a-form-item label="تلفن تماس" name="phone" :rules="[required()]">
+          <BasicInput
+            v-model:value="address.phone"
+            placeholder="تلفن تماس را وارد نمایید"
+            :size="variant === 'desktop' ? 'large' : undefined"
+          />
+        </a-form-item>
+        <a-form-item
+          label="آدرس کامل"
+          name="address"
+          :rules="[required()]"
+          :class="variant === 'desktop' ? 'daddr-form__address-item' : ''"
+        >
+          <BasicTextArea
+            v-model:value="address.address"
+            placeholder="آدرس کامل را وارد نمایید"
+          />
+        </a-form-item>
+        <BasicButton
+          :class="variant === 'desktop' ? 'daddr-form__submit' : '!text-white px-3 pb-4rem'"
+          type="primary"
+          @click="handleOk"
+        >
+          {{ editId ? 'ویرایش آدرس' : 'ثبت آدرس' }}
+        </BasicButton>
+      </div>
+    </div>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import BasicSelect from '@/components/BasicPacks/BasicSelect.vue'
+import BasicTextArea from '@/components/BasicPacks/BasicTextArea.vue'
+import { required } from '@/utils/inputRules'
+import { useAddressPageContext } from '../composables/useAddressPage'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const {
+  address,
+  formRef,
+  editId,
+  provinceList,
+  cityList,
+  changeProvince,
+  handleOk,
+} = useAddressPageContext()
+</script>

src/views/base/address/components/AddressMobileItem.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="address-mobile-item shadow mb-2 p-2 rounded-lg w-full">
+    <div class="flex justify-between">
+      <div>
+        <div class="font-semibold text-base mb-2">{{ item.address }}</div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-2 mt-2">
+      <BasicInfoItem is-line title="استان" :value="item.province" />
+      <BasicInfoItem is-line title="شهر" :value="item.city" />
+      <BasicInfoItem is-line title="کد پستی" :value="item.zip" />
+      <BasicInfoItem is-line title="شماره تلفن" :value="item.phone" />
+    </div>
+    <a-divider class="!my-3" />
+
+    <div class="flex justify-between mt-1">
+      <div class="mb-2">{{ formatAddressDate(item.created_at) }}</div>
+      <div class="flex gap-2">
+        <BasicIcon
+          color="red"
+          icon="vuesax-linear:trash"
+          class="p-1"
+          @click.stop="deleteConfirmVisible = true"
+        />
+        <BasicIcon
+          color="green"
+          icon="vuesax-linear:edit"
+          class="p-1"
+          @click.stop="emits('edit', item)"
+        />
+      </div>
+    </div>
+
+    <DialogVant
+      v-model:show="deleteConfirmVisible"
+      teleport="body"
+      :close-on-click-overlay="false"
+      :time-out="-1"
+    >
+      <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>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { toJalali } from '@/utils/useDateTime'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
+import DialogVant from '@/components/DialogVant.vue'
+import type { Address } from '@/models/address'
+import { deleteAddress } from '@/api/address'
+
+const deleteLoading = ref(false)
+const deleteConfirmVisible = ref(false)
+
+const props = defineProps<{
+  item: Address
+}>()
+
+const emits = defineEmits<{
+  edit: [item: Address]
+  refresh: []
+}>()
+
+function formatAddressDate(dateTime?: string) {
+  if (!dateTime) return ''
+  const formatted = toJalali(dateTime)
+  return formatted.includes('Invalid') ? '' : formatted
+}
+
+async function deleteItem() {
+  try {
+    deleteLoading.value = true
+    await deleteAddress(props.item.id!)
+    deleteConfirmVisible.value = false
+    emits('refresh')
+  } catch (e) {
+    console.log(e)
+  } finally {
+    deleteLoading.value = false
+  }
+}
+</script>

src/views/base/address/components/Item.vue

@@ -1,112 +1,155 @@
 <template>
-  <div @click="infoVisible = true" class="shadow mb-2 p-2 rounded-lg">
+  <div v-if="variant === 'desktop'" class="daddr-card">
+    <p class="daddr-card__address">{{ item.address }}</p>
 
+    <div class="daddr-card__meta">
+      <div class="daddr-card__row">
+        <span class="daddr-card__label">استان:</span>
+        <span class="daddr-card__value">{{ item.province }}</span>
+      </div>
+      <div class="daddr-card__row">
+        <span class="daddr-card__label">شهر:</span>
+        <span class="daddr-card__value">{{ item.city }}</span>
+      </div>
+      <div class="daddr-card__row">
+        <span class="daddr-card__label">کد پستی:</span>
+        <span class="daddr-card__value">{{ item.zip }}</span>
+      </div>
+      <div class="daddr-card__row">
+        <span class="daddr-card__label">شماره تلفن:</span>
+        <span class="daddr-card__value">{{ item.phone }}</span>
+      </div>
+    </div>
+
+    <div class="daddr-card__actions">
+      <button
+        type="button"
+        class="daddr-card__icon-btn daddr-card__icon-btn--edit"
+        @click.stop="emits('edit', item)"
+      >
+        <BasicIcon color="green" icon="vuesax-linear:edit" size="18" />
+      </button>
+      <button
+        type="button"
+        class="daddr-card__icon-btn daddr-card__icon-btn--danger"
+        @click.stop="deleteConfirmVisible = true"
+      >
+        <BasicIcon color="red" icon="vuesax-linear:trash" size="18" />
+      </button>
+    </div>
+
+    <div class="daddr-card__footer">
+      <span class="daddr-card__date">{{ formatAddressDate(item.created_at) }}</span>
+    </div>
+
+    <DialogVant
+      v-model:show="deleteConfirmVisible"
+      :close-on-click-overlay="false"
+      :time-out="-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 class="shadow mb-2 p-2 rounded-lg">
     <div class="flex justify-between">
       <div>
-        <div class="font-semibold text-base mb-2">{{item.address }}</div>
+        <div class="font-semibold text-base mb-2">{{ item.address }}</div>
       </div>
-
     </div>
     <div class="flex flex-col gap-2 mt-2">
-      <BasicInfoItem is-line title="استان" :value="item.province"/>
-      <BasicInfoItem is-line title="شهر" :value="item.city"/>
-      <BasicInfoItem is-line title="کد پستی" :value="item.zip"/>
-      <BasicInfoItem is-line title="شماره تلفن" :value="item.phone"/>
+      <BasicInfoItem is-line title="استان" :value="item.province" />
+      <BasicInfoItem is-line title="شهر" :value="item.city" />
+      <BasicInfoItem is-line title="کد پستی" :value="item.zip" />
+      <BasicInfoItem is-line title="شماره تلفن" :value="item.phone" />
     </div>
     <a-divider class="!my-3" />
 
     <div class="flex justify-between mt-1">
-      <div class="mb-2">{{toJalali(item.created_at)}}</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="mb-2">{{ formatAddressDate(item.created_at) }}</div>
+      <div class="flex gap-2">
+        <BasicIcon
+          color="red"
+          icon="vuesax-linear:trash"
+          class="p-1"
+          @click.stop="deleteConfirmVisible = true"
+        />
+        <BasicIcon
+          color="green"
+          icon="vuesax-linear:edit"
+          class="p-1"
+          @click.stop="emits('edit', item)"
+        />
       </div>
     </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"
+      teleport="body"
+      :close-on-click-overlay="false"
+      :time-out="-1"
+    >
+      <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 { computed, onMounted, ref } from 'vue'
-import { toJalali } from '../../../../utils/useDateTime'
+import { ref } from 'vue'
+import { toJalali } from '@/utils/useDateTime'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
 import DialogVant from '@/components/DialogVant.vue'
-import { updatePriceTrigger } from '@/api/triggerPrice'
-import { loading } from '@/utils'
 import type { Address } from '@/models/address'
 import { deleteAddress } from '@/api/address'
 
-const infoVisible = ref<boolean>(false)
-
-const isActive = ref<boolean>(false)
-
 const deleteLoading = ref(false)
 const deleteConfirmVisible = ref(false)
 
-interface Prop {
-  item: Address
-}
-function changeActive(val: boolean) {
-  console.log(val)
-  try {
-    loading.value = true
-    updatePriceTrigger(props?.item.id, {is_active: val})
-  } catch (e) {
-    console.log(e)
-    isActive.value = !isActive.value
-  } finally {
-    loading.value = false
-  }
-}
+const props = withDefaults(
+  defineProps<{
+    item: Address
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
 
-function returnPriceCondition(val: string) {
-  switch (val) {
-    case '==': return 'مساوی'
-    case '<': return 'کوچکتر'
-    // case '==': return 'مساوی'
-  }
-/*  if (val === '=='){
-    return 'مساوی'
-  } else if (val === '<'){
-    return 'کوچکتر'
-  }*/
+const emits = defineEmits<{
+  edit: [item: Address]
+  refresh: []
+}>()
+
+function formatAddressDate(dateTime?: string) {
+  if (!dateTime) return ''
+  const formatted = toJalali(dateTime)
+  return formatted.includes('Invalid') ? '' : formatted
 }
 
 async function deleteItem() {
   try {
     deleteLoading.value = true
-    await deleteAddress(props.item.id)
+    await deleteAddress(props.item.id!)
     deleteConfirmVisible.value = false
     emits('refresh')
   } catch (e) {
@@ -115,42 +158,4 @@ async function deleteItem() {
     deleteLoading.value = false
   }
 }
-
-function returnAction(val: string) {
-  switch (val) {
-    case 'sms': return 'پیامک'
-    case 'email': return 'ایمیل'
-    case 'notify': return 'نوتیفیکیشن'
-    // case '==': return 'مساوی'
-  }
-  /*  if (val === '=='){
-      return 'مساوی'
-    } else if (val === '<'){
-      return 'کوچکتر'
-    }*/
-}
-
-
-const props = withDefaults(defineProps<Prop>(), {})
-const emits = defineEmits(['edit','refresh'])
-
-/*const title = computed(() => {
-  if (isUp.value) {
-    if (isGold.value) {
-      return 'واریز ریالی'
-    } else {
-      return 'خرید طلا'
-    }
-  } else {
-    if (isGold.value) {
-      return 'برداشت ریالی'
-    } else {
-      return 'فروش طلا'
-    }
-  }
-})*/
 </script>
-
-<style scoped>
-
-</style>