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/physicalReceive/components/NewRequest.vue

@@ -1,224 +1,14 @@
 <template>
-  <div>
-    <div ref="el" class="px-3 pt-15"
-    >
-      <div class="flex gap-2">
-        <BasicSelect v-model:value="selectedProduct" :items="items"
-                     class="w-full"
-                     key-name="id"
-                     :show-search="false"
-                     value-name="title"
-                     size="large"
-                     placeholder="لطفا محصول را انتخاب کنید"
-                     :has-tooltip="false"/>
-        <BasicButton :disabled-b="selectedProduct==null"  type="primary" @click="handleAdd">افزودن</BasicButton>
-      </div>
-      <div class="h-70vh rounded-lg bg-white mt-2 border-gray-200 border-1 overflow-y-auto p-2">
-        <div v-for="(val,index) in selectedProducts" class="rounded-lg p-2 bg-gray-100 mb-2">
-          <div class="flex">
-            <div class="bg-gray-100 m-2 rounded-lg w-28 h-28 flex justify-center p-2">
-              <img v-if="val.product.group_type=='گوی'" :src="goyImg">
-              <img v-if="val.product.group_type=='مکعب'" :src="mokaabImg">
-              <img v-if="val.product.group_type=='سکه'" :src="sekkeImg">
-              <img v-if="val.product.group_type=='مس'" :src="mesImg">
-              <img v-if="val.product.group_type=='نقره'" :src="noghrehImg">
-            </div>
-            <div class="w-full">
-              <div class="flex justify-between">
-                <div class="font-bold text-lg">
-                  {{ val.product.title }}
-                </div>
-                <BasicButton icon="vuesax-linear:trash" icon-class="text-red" @click="handleRemove(val.product.id)"/>
-              </div>
-              <div class="flex mt-3 justify-between items-center">
-                <div>تعداد موجودی:</div>
-                <div class="flex flex-col items-end gap-0.5">
-                  <div class="flex gap-1 items-center">
-                    <div class="font-bold">{{ val.product.wallet.gold }}</div>
-                    <div>{{ getProductQuantityUnit(val.product) }}</div>
-                  </div>
-                  <div v-if="getProductUnitWeightLabel(val.product)" class="text-xs text-gray-500">
-                    هر عدد {{ getProductUnitWeightLabel(val.product) }}
-                  </div>
-                </div>
-              </div>
-              <div class="flex justify-between items-center mt-2">
-                <div>تعداد درخواستی:</div>
-                <div class="flex gap-1 items-center w-40%">
-                  <BasicInput v-model:value="val.count" :addon-before="getProductQuantityUnit(val.product)"/>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <BasicButton :disabled-b="selectedProducts.length==0" class="w-full absolute bottom-10 mt-2"
-                   @click="handelFirstSubmit()">ثبت
-      </BasicButton>
-    </div>
-    <!--    <ActionSheet v-model:show="editPassVisible">salam</ActionSheet>-->
-  </div>
-  <BasicActionSheet v-model:show="showAddress">
-    <div class="h-120 flex flex-col ">
-      <div class="text-center">
-        انتخاب آدرس
-      </div>
-      <div class="overflow-y-scroll h-85">
-        <ARadioGroup v-model:value="selectedAddressID">
-          <div class="flex flex-col  ">
-            <div class="text-base  rounded-lg  p-4 m-2   shadow-md font-medium" v-for="item in address">
-              <ARadio :value="item.id">{{ item.province }} / {{ item.city }} / {{ item.address }}</ARadio>
-            </div>
-          </div>
-        </ARadioGroup>
-      </div>
-      <div class="flex gap-2 pt-2">
-
-        <BasicButton class=" "  @click="showAddress=false;addAddressVisible=true">افزودن آدرس +</BasicButton>
-        <BasicButton class="w-2/3 " type="primary" @click="handelsubmit">ثبت نهایی</BasicButton>
-      </div>
-
-    </div>
-
-  </BasicActionSheet>
-  <BasicActionSheet v-model:show="addAddressVisible" >
-    <div class="   ">
-      <New_EditAddress @onOk="handleAddress"></New_EditAddress>
-    </div>
-
-  </BasicActionSheet>
+  <MobileNewRequestView v-show="!isDesktop" />
+  <DesktopNewRequestView v-show="isDesktop" />
 </template>
 
 <script lang="ts" setup>
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import BasicSelect from '@/components/BasicPacks/BasicSelect.vue'
-import {onMounted, ref} from 'vue'
-import {loading} from '@/utils'
-import {getProductInventory} from '@/api/products'
-import type {CountPInventory, PInventory} from '@/models/products'
-import goyImg from '@/assets/img/goyImg.svg'
-import mokaabImg from '@/assets/img/mokaabImg.svg'
-import sekkeImg from '@/assets/img/sekkeImg.svg'
-import BasicInput from '@/components/BasicPacks/BasicInput.vue'
-import {cloneDeep} from 'lodash'
-import BasicActionSheet from "@/components/BasicPacks/BasicActionSheet.vue"
-import {tableAddress} from "@/api/address"
-import type {Address} from "@/models/address"
-import {physicalReceiveApi} from "@/api/physicalreceive"
-import {message} from "ant-design-vue"
-import New_EditAddress from "@/views/base/address/components/New_EditAddress.vue"
-import mesImg from "@/assets/img/mesImg.jpg";
-import noghrehImg from "@/assets/img/noghrehImg.webp";
-import { getProductQuantityUnit, getProductUnitWeightLabel } from '@/utils/productDealMethod'
-
-const items = ref<PInventory[]>()
-const baseItems = ref<PInventory[]>()
-const selectedAddressID = ref<number>()
-const selectedProduct = ref<number>()
-const productsByWalletId = ref<Array>([])
-const address = ref<Address>()
-const selectedProducts = ref<CountPInventory[]>([])
-const showAddress = ref<boolean>(false)
-const addAddressVisible = ref<boolean>(false)
-
-function handleAdd() {
-  console.log(selectedProducts.value)
-  selectedProducts.value?.push({
-    count: 0,
-    product: items.value?.find(x => x.id === selectedProduct.value)
-  })
-  items.value?.splice(items.value?.findIndex(x => x.id === selectedProduct.value), 1)
-  selectedProduct.value = undefined
-}
-function handleAddress() {
-    getAddress()
-    addAddressVisible.value = false
-    showAddress.value = true
-}
-
-function handleRemove(id: number) {
-  const findItem = baseItems.value?.find(x => x.id === id)
-  console.log(baseItems.value, id)
-  if (findItem) {
-    items.value?.push(findItem)
-  }
-  selectedProducts.value?.splice(selectedProducts.value?.findIndex(x => x.product.id === id), 1)
-}
-
-async function initProductWallet() {
-  try {
-    loading.value = true
-    items.value = (await getProductInventory()).rows
-    baseItems.value = cloneDeep(items.value)
-    console.log('baseItems.value',baseItems.value)
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-  }
-}
-
-async function handelFirstSubmit() {
-  try {
-    const zeroAmount = selectedProducts.value.map(item => item.count <= 0)
-    if (zeroAmount.includes(true)) {
-      message.error(`لطفاً تعداد درخواستی محصول را وارد کنید.`)
-    }
-    else {
-      showAddress.value = true
-    }
-  } catch (e) {
-    console.log(e)
-  }
-}
-
-async function handelsubmit() {
-  try {
-      loading.value = true
-      productsByWalletId.value = selectedProducts.value.map((val) => {
-        return {
-          wallet_id: val.product.wallet.id,
-          value: val.count
-        }
-      })
-      await physicalReceiveApi({
-            address_id: selectedAddressID.value,
-            wallets: productsByWalletId.value
-          }
-      )
-      await initProductWallet()
-      message.success("درخواست شما با موفقیت ارسال شد")
-      selectedProducts.value = []
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-    showAddress.value = false
-  }
-}
-
-onMounted(async () => {
-  await initProductWallet()
-  await getAddress()
-})
-async function getAddress(){
-  let {rows} = await tableAddress({page: 0, limit: 150})
-  address.value = rows
-}
+import { useNewPhysicalRequestPage } from '../composables/useNewPhysicalRequestPage'
+import { usePhysicalReceiveShellContext } from '../composables/usePhysicalReceiveShell'
+import DesktopNewRequestView from '../desktop/DesktopNewRequestView.vue'
+import MobileNewRequestView from '../mobile/MobileNewRequestView.vue'
 
+const { isDesktop } = usePhysicalReceiveShellContext()
+useNewPhysicalRequestPage()
 </script>
-
-<style scoped>
-/*.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}*/
-/*.trans{
-  transition:  height 1s;
-}*/
-</style>

src/views/base/physicalReceive/components/PhysicalReceiveAddressPicker.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="variant === 'desktop' ? 'dpr-address-picker dpr-address-picker--desktop' : 'h-120 flex flex-col'">
+    <div v-if="variant !== 'desktop'" class="text-center">انتخاب آدرس</div>
+    <div :class="variant === 'desktop' ? 'dpr-address-picker__list' : 'overflow-y-scroll h-85'">
+      <ARadioGroup v-model:value="selectedAddressID">
+        <div class="flex flex-col">
+          <div
+            v-for="addr in addresses"
+            :key="addr.id"
+            :class="variant === 'desktop' ? 'dpr-address-picker__item' : 'text-base rounded-lg p-4 m-2 shadow-md font-medium'"
+          >
+            <ARadio :value="addr.id">
+              {{ addr.province }} / {{ addr.city }} / {{ addr.address }}
+            </ARadio>
+          </div>
+        </div>
+      </ARadioGroup>
+    </div>
+    <div :class="variant === 'desktop' ? 'dpr-address-picker__actions' : 'flex gap-2 pt-2'">
+      <BasicButton @click="emit('addAddress')">افزودن آدرس +</BasicButton>
+      <BasicButton
+        :class="variant === 'desktop' ? '' : 'w-2/3'"
+        type="primary"
+        @click="emit('submit')"
+      >
+        ثبت نهایی
+      </BasicButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import type { Address } from '@/models/address'
+
+interface Props {
+  addresses?: Address[]
+  variant?: 'mobile' | 'desktop'
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'mobile',
+})
+
+const selectedAddressID = defineModel<number | undefined>('selectedAddressID')
+
+const emit = defineEmits<{
+  addAddress: []
+  submit: []
+}>()
+</script>

src/views/base/physicalReceive/components/PhysicalReceiveCartRow.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div class="flex">
+      <div class="bg-gray-100 m-2 rounded-lg w-28 h-28 flex justify-center p-2 shrink-0">
+        <img v-if="item.product.group_type == 'گوی'" :src="goyImg" alt="" />
+        <img v-if="item.product.group_type == 'مکعب'" :src="mokaabImg" alt="" />
+        <img v-if="item.product.group_type == 'سکه'" :src="sekkeImg" alt="" />
+        <img v-if="item.product.group_type == 'مس'" :src="mesImg" alt="" />
+        <img v-if="item.product.group_type == 'نقره'" :src="noghrehImg" alt="" />
+      </div>
+      <div class="w-full min-w-0">
+        <div class="flex justify-between gap-2">
+          <div class="font-bold text-lg truncate">{{ item.product.title }}</div>
+          <BasicButton
+            icon="vuesax-linear:trash"
+            icon-class="text-red"
+            @click="emit('remove', item.product.id)"
+          />
+        </div>
+        <div class="flex mt-3 justify-between items-center">
+          <div>تعداد موجودی:</div>
+          <div class="flex flex-col items-end gap-0.5">
+            <div class="flex gap-1 items-center">
+              <div class="font-bold">{{ item.product.wallet.gold }}</div>
+              <div>{{ getProductQuantityUnit(item.product) }}</div>
+            </div>
+            <div v-if="getProductUnitWeightLabel(item.product)" class="text-xs text-gray-500">
+              هر عدد {{ getProductUnitWeightLabel(item.product) }}
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-between items-center mt-2 gap-2">
+          <div>تعداد درخواستی:</div>
+          <div
+            class="flex gap-1 items-center"
+            :class="variant === 'desktop' ? 'dpr-cart-row__input' : 'w-40%'"
+          >
+            <BasicInput
+              v-model:value="item.count"
+              :addon-before="getProductQuantityUnit(item.product)"
+              :addon-bg-color="config.config?.color"
+              addon-text-color="white"
+              :size="variant === 'desktop' ? 'large' : undefined"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import { useConfigStore } from '@/store/configStore'
+import type { CountPInventory } from '@/models/products'
+import goyImg from '@/assets/img/goyImg.svg'
+import mokaabImg from '@/assets/img/mokaabImg.svg'
+import sekkeImg from '@/assets/img/sekkeImg.svg'
+import mesImg from '@/assets/img/mesImg.jpg'
+import noghrehImg from '@/assets/img/noghrehImg.webp'
+import { getProductQuantityUnit, getProductUnitWeightLabel } from '@/utils/productDealMethod'
+
+interface Props {
+  item: CountPInventory
+  variant?: 'mobile' | 'desktop'
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'mobile',
+})
+
+const config = useConfigStore()
+
+const emit = defineEmits<{
+  remove: [id: number]
+}>()
+</script>

src/views/base/physicalReceive/components/RequestItem.vue

@@ -1,26 +1,33 @@
 <template>
-  <div class="rounded-lg shadow-md mx-2  bg-gradient-to-l   from-primary rounded-lg p-[2px]  to-transparent ">
-    <div class="rounded-lg flex flex-col gap-2  bg-white p-2 ">
-      <div class="flex justify-between  ">
+  <div
+    class="rounded-lg shadow-md mx-2 bg-gradient-to-l from-primary rounded-lg p-[2px] to-transparent"
+    :class="{ 'dpr-item': variant === 'desktop' }"
+  >
+    <div class="rounded-lg flex flex-col gap-2 bg-white p-2">
+      <div class="flex justify-between">
         <div class="font-bold">شماره سند: {{ props.item.id }}</div>
         <div class="font-bold">{{ toJalali(props.item.created_at) }}</div>
       </div>
       <div class="flex justify-between">
-
-        <div class="flex flex-col w-full gap-1 ">
-          <div class="w-full flex justify-between" v-for="item in props.item.transaction">
-            <div class="flex items-center gap-1  ">
-              <div class="w-7 h-7 flex justify-center rounded-lg bg-gray-100 ">
-                <img width="30"  class="p-1" :src="item.product.group_type=='گوی'?goyImg:mokaabImg">
+        <div class="flex flex-col w-full gap-1">
+          <div
+            v-for="tx in props.item.transaction"
+            :key="tx.id ?? tx.title"
+            class="w-full flex justify-between"
+          >
+            <div class="flex items-center gap-1">
+              <div class="w-7 h-7 flex justify-center rounded-lg bg-gray-100">
+                <img
+                  width="30"
+                  class="p-1"
+                  :src="tx.product.group_type == 'گوی' ? goyImg : mokaabImg"
+                  alt=""
+                />
               </div>
-              <div>{{ item.title }}</div>
-
-
-
+              <div>{{ tx.title }}</div>
             </div>
-            <div>{{ item.gold * -1 }} عدد</div>
+            <div>{{ tx.gold * -1 }} عدد</div>
           </div>
-
         </div>
       </div>
       <div class="flex justify-between">
@@ -28,30 +35,30 @@
         <ATag color="blue" class="!py-1 !px-2 !ml-0">
           {{ props.item.sts_str }}
         </ATag>
-
       </div>
-      <ADivider class="!m-1"></ADivider>
+      <ADivider class="!m-1" />
       <div class="flex flex-col justify-between">
         <div class="font-bold">آدرس:</div>
-        <div>{{ props.item.address.province }}/{{ props.item.address.city }}/{{ props.item.address.address }}</div>
+        <div>
+          {{ props.item.address.province }}/{{ props.item.address.city }}/{{ props.item.address.address }}
+        </div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script setup lang="ts">
-import type {Physicalreceive} from "@/models/physicalreceive";
-import {toJalali} from "../../../../utils/useDateTime";
-import goyImg from "@/assets/img/goyImg.svg"
-import mokaabImg from "@/assets/img/mokaabImg.svg"
+import type { Physicalreceive } from '@/models/physicalreceive'
+import { toJalali } from '@/utils/useDateTime'
+import goyImg from '@/assets/img/goyImg.svg'
+import mokaabImg from '@/assets/img/mokaabImg.svg'
 
 interface Prop {
   item: Physicalreceive
+  variant?: 'mobile' | 'desktop'
 }
 
-const props = withDefaults(defineProps<Prop>(), {})</script>
-
-<style scoped>
-
-</style>
+const props = withDefaults(defineProps<Prop>(), {
+  variant: 'mobile',
+})
+</script>

src/views/base/physicalReceive/components/RequestList.vue

@@ -1,36 +1,14 @@
 <template>
-  <div>
-    <div class="flex flex-col gap-4 pt-13 px-2 pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]">
-      <RequestItem v-for="item in requestItems" :item="item"></RequestItem>
-    </div>
-    <Teleport to="body">
-      <div class="add-request app-dock-add-bar" @click="openAdd()">
-        <div>افزودن درخواست جدید</div>
-        <BasicIcon icon="vuesax-linear:add" />
-      </div>
-    </Teleport>
-  </div>
+  <MobileRequestListView v-show="!isDesktop" />
+  <DesktopRequestListView v-show="isDesktop" />
 </template>
 
 <script setup lang="ts">
-import {onMounted, ref} from "vue";
-import {getPhysicalReceiveList} from "@/api/physicalreceive";
-import type {Physicalreceive} from "@/models/physicalreceive";
-import RequestItem from "@/views/base/physicalReceive/components/RequestItem.vue";
-import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
-import router from "@/router";
+import { usePhysicalReceiveList } from '../composables/usePhysicalReceiveList'
+import { usePhysicalReceiveShellContext } from '../composables/usePhysicalReceiveShell'
+import DesktopRequestListView from '../desktop/DesktopRequestListView.vue'
+import MobileRequestListView from '../mobile/MobileRequestListView.vue'
 
-const requestItems = ref<Physicalreceive[]>([])
-const openAdd = () => {
-  router.push('physicalReceive/new')
-}
-onMounted(async () => {
-  let {rows} = await getPhysicalReceiveList()
-  requestItems.value = rows
-  console.log(rows)
-})
+const { isDesktop } = usePhysicalReceiveShellContext()
+usePhysicalReceiveList()
 </script>
-
-<style scoped>
-
-</style>