From ce4af37fd8ed81a43ba89bb69ed09b28c5dcd9dc Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Sun, 15 Dec 2024 23:25:40 +0800
Subject: [PATCH] fix: login expired modal z-index (#5145)

* fix: login expired modal z-index

* feat: support custom z-index
---
 .../ui/authentication/login-expired-modal.vue | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue b/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
index 0b705ad3..4b4f9b44 100644
--- a/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
 import type { AuthenticationProps } from './types';
 
-import { watch } from 'vue';
+import { computed, watch } from 'vue';
 
 import { useVbenModal } from '@vben-core/popup-ui';
 import { Slot, VbenAvatar } from '@vben-core/shadcn-ui';
 
 interface Props extends AuthenticationProps {
   avatar?: string;
+  zIndex?: number;
 }
 
 defineOptions({
   name: 'LoginExpiredModal',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   avatar: '',
+  zIndex: 0,
 });
 
 const open = defineModel<boolean>('open');
@@ -28,6 +30,26 @@ watch(
     modalApi.setState({ isOpen: val });
   },
 );
+
+const getZIndex = computed(() => {
+  return props.zIndex || calcZIndex();
+});
+
+/**
+ * 获取最大的zIndex值
+ */
+function calcZIndex() {
+  let maxZ = 0;
+  const elements = document.querySelectorAll('*');
+  [...elements].forEach((element) => {
+    const style = window.getComputedStyle(element);
+    const zIndex = style.getPropertyValue('z-index');
+    if (zIndex && !Number.isNaN(Number.parseInt(zIndex))) {
+      maxZ = Math.max(maxZ, Number.parseInt(zIndex));
+    }
+  });
+  return maxZ + 1;
+}
 </script>
 
 <template>
@@ -39,6 +61,7 @@ watch(
       :footer="false"
       :fullscreen-button="false"
       :header="false"
+      :z-index="getZIndex"
       class="border-none px-10 py-6 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset]"
     >
       <VbenAvatar :src="avatar" class="mx-auto mb-6 size-20" />