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,86 @@
+<template>
+  <div class="dtxn">
+    <div class="dtxn__container">
+      <header class="dtxn-topbar">
+        <p class="dtxn-topbar__eyebrow">گزارش‌ها</p>
+        <h1 class="dtxn-topbar__title">لیست تراکنش‌ها</h1>
+      </header>
+
+      <div class="dtxn-filters">
+        <div class="dtxn-filters__label">
+          <BasicIcon icon="vuesax-linear:filter" size="16" />
+          <span>فیلتر تاریخ:</span>
+        </div>
+        <BaseDatePicker
+          v-model:value="dateFilter"
+          class="dtxn-filters__date"
+          placeholder="تاریخ"
+          size="large"
+        />
+        <BasicButton type="primary" @click="applyFilter">اعمال فیلتر</BasicButton>
+        <BasicButton v-if="dateFilter" @click="clearFilter">حذف فیلتر</BasicButton>
+      </div>
+
+      <div ref="el" :class="loading ? 'min-h-[40vh]' : ''" class="mt-5">
+        <div v-if="!loading" class="dtxn-list">
+          <list-anim>
+            <Item
+              v-for="item in items"
+              :key="item.id"
+              :item="item"
+              variant="desktop"
+            />
+          </list-anim>
+          <div :ref="bindDesktopObserver" class="w-full opacity-0 relative">
+            در حال بارگذاری
+          </div>
+          <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
+        </div>
+
+        <template v-else>
+          <TransactionSkeleton v-for="i in 8" :key="i" class="mt-1" />
+        </template>
+
+        <div v-if="items.length <= 0 && !loading" class="dtxn-empty">
+          <DotLottieVue
+            class="w-44 h-44"
+            autoplay
+            src="https://lottie.host/51d3315a-cf88-4c18-bb4d-a31511fd4325/KjSBzcMbi6.json"
+          />
+          <p class="dtxn-empty__text">{{ emptyText }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { loading, loadingMore } from '@/utils'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.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 Item from '../components/Item.vue'
+import { useTransactionsPageContext } from '../composables/useTransactionsPage'
+
+const el = ref<HTMLElement | null>(null)
+
+const {
+  items,
+  dateFilter,
+  emptyText,
+  applyFilter,
+  reloadTable,
+  bindDesktopObserver,
+} = useTransactionsPageContext()
+
+async function clearFilter() {
+  dateFilter.value = undefined
+  await reloadTable()
+}
+</script>
+
+<style lang="less" src="./styles/desktop-transactions.less"></style>