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>
2026-06-14 10:08:46 +03:30
parent 4404b4cb92
commit a5e458ed25
234 changed files with 18425 additions and 5503 deletions
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <div class="absolute inset-0 bg-cover bg-center opacity-60"></div>
+    <div
+      class="bg-white w-full transaction-list py-3 px-3 font-bold drop-shadow flex justify-between z-10"
+    >
+      <div>لیست تراکنش ها</div>
+      <BasicIcon icon="vuesax-linear:filter" @click="showFilter = true" />
+    </div>
+
+    <div ref="el" :class="loading ? 'h-screen' : ''" class="px-3 pt-16 pb-10">
+      <list-anim v-if="!loading">
+        <Item v-for="item in items" :key="item.id" :item="item" />
+        <div :ref="bindMobileObserver" v-show="!loading" class="w-full opacity-0 relative">
+          در حال بارگذاری
+        </div>
+        <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
+      </list-anim>
+      <TransactionSkeleton v-for="i in 13" v-else :key="i" class="mt-1" />
+      <div v-if="items.length <= 0 && !loading" class="flex flex-col items-center justify-center h-80vh">
+        <DotLottieVue
+          class="w-11rem h-11rem"
+          autoplay
+          src="https://lottie.host/51d3315a-cf88-4c18-bb4d-a31511fd4325/KjSBzcMbi6.json"
+        />
+        <div class="font-bold">{{ emptyText }}</div>
+      </div>
+    </div>
+
+    <BasicActionSheet v-model:show="showFilter">
+      <div class="font-bold text-lg">فیلتر</div>
+      <div class="pb-20 mt-5">
+        <a-form-item class="w-full gap-2 !flex-col" label="تاریخ" name="password">
+          <BaseDatePicker v-model:value="dateFilter" class="w-full" size="large" />
+        </a-form-item>
+        <BasicButton class="w-full mt-5" type="primary" @click="applyFilter">اعمال فیلتر</BasicButton>
+        <BasicButton class="w-full mt-2" @click="showFilter = false">بازگشت</BasicButton>
+      </div>
+    </BasicActionSheet>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { loading, loadingMore } from '@/utils'
+import Item from './components/Item.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
+import { useTransactionsPageContext } from './composables/useTransactionsPage'
+
+const el = ref<HTMLElement | null>(null)
+
+const {
+  items,
+  showFilter,
+  dateFilter,
+  emptyText,
+  applyFilter,
+  bindMobileObserver,
+} = useTransactionsPageContext()
+</script>
+
+<style scoped lang="less">
+.transaction-list {
+  position: fixed;
+  right: 0;
+  left: 0;
+  @media screen and (min-width: 426px) {
+    width: 426px;
+    left: auto;
+    right: auto;
+  }
+}
+</style>