From 1383d37d28040fe342f7e11de2ad302119518718 Mon Sep 17 00:00:00 2001
From: adonis <mseddighi99.ms@gmail.com>
Date: Tue, 23 Jun 2026 16:29:36 +0330
Subject: [PATCH] fix user header and modal detail

---
 src/App.vue                                   |  1 +
 src/app/createApp.ts                          |  7 +++
 src/assets/css/main.less                      |  6 ++
 .../BasicPacks/BasicActionSheet.vue           |  3 +-
 src/components/BasicPacks/BasicModal.vue      |  7 ++-
 src/components/DialogVant.vue                 |  3 +-
 src/utils/zIndex.ts                           |  6 ++
 src/views/base/home/components/AppHeader.vue  | 63 ++++++++++++++++---
 8 files changed, 83 insertions(+), 13 deletions(-)
 create mode 100644 src/utils/zIndex.ts

diff --git a/src/App.vue b/src/App.vue
index 111f49e..5a595b8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -268,6 +268,7 @@ watch(showSplash, (visible) => {
   --app-z-wallet-add-bar: 4510;
   --app-z-action-sheet: 5200;
   --app-z-dialog: 5300;
+  --app-z-modal: 1010000;
 }
 
 .app-main {
diff --git a/src/app/createApp.ts b/src/app/createApp.ts
index 90d7ada..cf4c714 100644
--- a/src/app/createApp.ts
+++ b/src/app/createApp.ts
@@ -1,9 +1,16 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import { setDialogDefaultOptions } from 'vant'
 import VueLazyLoad from 'vue3-lazyload'
 import VueApexCharts from 'vue3-apexcharts'
 import App from '@/App.vue'
 import router from '@/router'
+import { APP_Z_MODAL } from '@/utils/zIndex'
+
+setDialogDefaultOptions({
+  teleport: 'body',
+  zIndex: APP_Z_MODAL,
+})
 
 export function createVueApp() {
   const app = createApp(App)
diff --git a/src/assets/css/main.less b/src/assets/css/main.less
index 5bfb40b..4704d57 100644
--- a/src/assets/css/main.less
+++ b/src/assets/css/main.less
@@ -152,6 +152,12 @@ html.app-layout--desktop {
   transition: background-color 0.3s ease;
 }
 
+/* ماسک مدال روی کل صفحه — هدر، ناوبری و فوتر اعتبار */
+.ant-modal-mask,
+.ant-modal-wrap {
+  z-index: var(--app-z-modal, 1010000) !important;
+}
+
 .slide-left-enter-active,
 .slide-left-leave-active,
 .slide-right-enter-active,
diff --git a/src/components/BasicPacks/BasicActionSheet.vue b/src/components/BasicPacks/BasicActionSheet.vue
index f945068..cabe9dd 100644
--- a/src/components/BasicPacks/BasicActionSheet.vue
+++ b/src/components/BasicPacks/BasicActionSheet.vue
@@ -55,6 +55,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { APP_Z_MODAL } from '@/utils/zIndex'
 
 interface Props {
   show?: boolean
@@ -74,7 +75,7 @@ const props = withDefaults(defineProps<Props>(), {
   showCancel: true,
   showOk: true,
   okText: 'ثبت',
-  zIndex: 5200, // --app-z-action-sheet
+  zIndex: APP_Z_MODAL,
 })
 
 const emit = defineEmits<{
diff --git a/src/components/BasicPacks/BasicModal.vue b/src/components/BasicPacks/BasicModal.vue
index 7c03110..40875b5 100644
--- a/src/components/BasicPacks/BasicModal.vue
+++ b/src/components/BasicPacks/BasicModal.vue
@@ -4,6 +4,8 @@
       v-model:visible="localValue"
       :title="props.title"
       centered
+      :z-index="props.zIndex"
+      :get-container="getModalContainer"
       @ok="emits('ok')"
       @cancel="emits('close')"
       @close="emits('close')"
@@ -28,6 +30,7 @@
 <script setup lang="ts">
 //define emit
 import { computed } from 'vue'
+import { APP_Z_MODAL, getModalContainer } from '@/utils/zIndex'
 
 const emits = defineEmits(['ok', 'close', 'update:visible'])
 
@@ -43,6 +46,7 @@ interface Prop {
   wrapClassName?: string
   closable?: boolean
   destroyOnClose?:boolean
+  zIndex?: number
 }
 
 const props = withDefaults(defineProps<Prop>(), {
@@ -52,7 +56,8 @@ const props = withDefaults(defineProps<Prop>(), {
   customFooter: false,
   loading: false,
   wrapClassName: '',
-  closable: true
+  closable: true,
+  zIndex: APP_Z_MODAL,
 })
 
 const localValue = computed({
diff --git a/src/components/DialogVant.vue b/src/components/DialogVant.vue
index 258f773..d1bc4e4 100644
--- a/src/components/DialogVant.vue
+++ b/src/components/DialogVant.vue
@@ -24,6 +24,7 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
+import { APP_Z_MODAL } from '@/utils/zIndex'
 
 defineOptions({ inheritAttrs: false })
 
@@ -39,7 +40,7 @@ const props = withDefaults(
   {
     show: false,
     timeOut: 3000,
-    zIndex: 5300,
+    zIndex: APP_Z_MODAL,
   }
 )
 
diff --git a/src/utils/zIndex.ts b/src/utils/zIndex.ts
new file mode 100644
index 0000000..d83fda9
--- /dev/null
+++ b/src/utils/zIndex.ts
@@ -0,0 +1,6 @@
+/** بالای ناوبری (5000)، هدر (1999) و فوتر اعتبار (1000000) */
+export const APP_Z_MODAL = 1_010_000
+
+export function getModalContainer(): HTMLElement {
+  return document.body
+}
diff --git a/src/views/base/home/components/AppHeader.vue b/src/views/base/home/components/AppHeader.vue
index c3cf5e3..b3713bf 100644
--- a/src/views/base/home/components/AppHeader.vue
+++ b/src/views/base/home/components/AppHeader.vue
@@ -1,20 +1,18 @@
 <template>
   <div
-    :class="y > 50 ? 'bg-white shadow opacity-95' : ''"
-    class="px-4 py-2 top-0 z-5 wrap-fix background-color-transition"
+    ref="headerRef"
+    class="app-header px-4 py-2 top-0 z-30 wrap-fix background-color-transition"
+    :class="{ 'app-header--scrolled': scrollY > 50 }"
   >
     <div class="flex justify-between my-2 items-center">
       <div v-if="isBoursecuProject()" class="flex items-center gap-2">
         <img :src="projectLogo" alt="" class="h-10 w-auto max-w-[9rem] object-contain" />
       </div>
       <div v-else class="flex items-center gap-2" @click.stop="router.push({ name: 'user' })">
-        <div
-          class="z-100000 rounded-full border-1"
-          :class="y > 50 ? 'text-primary border-primary' : 'text-primary border-primary'"
-        >
+        <div class="z-100000 rounded-full border-1 text-primary border-primary">
           <Icon icon="vuesax-linear:user" size="20" />
         </div>
-        <div :class="y > 50 ? 'text-primary' : 'text-primary'" class="color-transition font-bold">
+        <div class="text-primary color-transition font-bold">
           {{ userStore.userInfo?.name }}
         </div>
       </div>
@@ -42,23 +40,68 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useWindowScroll } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useUserStore } from '@/store/userStore'
 import router from '@/router'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
 import { getProjectMobileNavLogo, isBoursecuProject } from '@/utils/config'
 
-const { y } = useWindowScroll()
+const headerRef = ref<HTMLElement | null>(null)
+const scrollY = ref(0)
+
 const userStore = useUserStore()
 const projectLogo = computed(() => getProjectMobileNavLogo())
 
+let scrollTarget: HTMLElement | Window | null = null
+
+function findScrollParent(el: HTMLElement | null): HTMLElement | null {
+  let node = el?.parentElement ?? null
+
+  while (node) {
+    const { overflowY } = getComputedStyle(node)
+    if (overflowY === 'auto' || overflowY === 'scroll') {
+      return node
+    }
+    node = node.parentElement
+  }
+
+  return null
+}
+
+function updateScrollY() {
+  if (!scrollTarget) return
+  scrollY.value = scrollTarget instanceof Window ? scrollTarget.scrollY : scrollTarget.scrollTop
+}
+
+onMounted(() => {
+  scrollTarget = findScrollParent(headerRef.value) ?? window
+  scrollTarget.addEventListener('scroll', updateScrollY, { passive: true })
+  updateScrollY()
+})
+
+onUnmounted(() => {
+  scrollTarget?.removeEventListener('scroll', updateScrollY)
+})
+
 defineEmits<{
   logout: []
 }>()
 </script>
 
 <style scoped>
+.app-header {
+  background-color: transparent;
+}
+
+/* عین bg-white shadow opacity-95 قبلی */
+.app-header--scrolled {
+  background-color: #fff;
+  opacity: 0.95;
+  box-shadow:
+    0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
 .mhome-header-btn {
   display: inline-flex;
   align-items: center;