refactor: fix popup component zIndex (#5397)

vbenjs · Jan 15, 2025 · 13087a1 · 13087a1
1 parent 27a3888
commit 13087a1
Show file tree

Hide file tree

Showing 21 changed files with 62 additions and 76 deletions.
diff --git a/apps/web-antd/src/bootstrap.ts b/apps/web-antd/src/bootstrap.ts
@@ -1,11 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import {
-  initTippy,
-  setDefaultDrawerProps,
-  setDefaultModalProps,
-} from '@vben/common-ui';
+import { initTippy } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -23,15 +19,14 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
-  // 设置弹窗的默认配置
-  setDefaultModalProps({
-    fullscreenButton: false,
-    zIndex: 1020,
-  });
-  // 设置抽屉的默认配置
-  setDefaultDrawerProps({
-    zIndex: 1020,
-  });
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   zIndex: 1020,
+  // });
 
   const app = createApp(App);
 

diff --git a/apps/web-ele/src/bootstrap.ts b/apps/web-ele/src/bootstrap.ts
@@ -1,11 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import {
-  initTippy,
-  setDefaultDrawerProps,
-  setDefaultModalProps,
-} from '@vben/common-ui';
+import { initTippy } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -23,15 +19,14 @@ import { router } from './router';
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
-  // 设置弹窗的默认配置
-  setDefaultModalProps({
-    fullscreenButton: false,
-    zIndex: 2000,
-  });
-  // 设置抽屉的默认配置
-  setDefaultDrawerProps({
-    zIndex: 2000,
-  });
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   zIndex: 2000,
+  // });
   const app = createApp(App);
 
   // 注册Element Plus提供的v-loading指令

diff --git a/apps/web-naive/src/bootstrap.ts b/apps/web-naive/src/bootstrap.ts
@@ -1,11 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import {
-  initTippy,
-  setDefaultDrawerProps,
-  setDefaultModalProps,
-} from '@vben/common-ui';
+import { initTippy } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -23,15 +19,14 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   initComponentAdapter();
 
-  // 设置弹窗的默认配置
-  setDefaultModalProps({
-    fullscreenButton: false,
-    zIndex: 2000,
-  });
-  // 设置抽屉的默认配置
-  setDefaultDrawerProps({
-    zIndex: 2000,
-  });
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   // zIndex: 2000,
+  // });
 
   const app = createApp(App);
 

diff --git a/packages/@core/base/design/src/css/ui.css b/packages/@core/base/design/src/css/ui.css
@@ -81,3 +81,7 @@
     transform: translateY(0);
   }
 }
+
+.z-popup {
+  z-index: var(--popup-z-index);
+}
diff --git a/packages/@core/base/design/src/design-tokens/default.css b/packages/@core/base/design/src/design-tokens/default.css
@@ -1,4 +1,6 @@
 :root {
+  /** 弹出层的基础层级 **/
+  --popup-z-index: 2000;
   --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
     'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue b/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
@@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
     <VbenButton
       v-if="visible"
       :style="backTopStyle"
-      class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float fixed bottom-10 z-[1000] size-10 rounded-full duration-500"
+      class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float z-popup fixed bottom-10 size-10 rounded-full duration-500"
       size="icon"
       variant="icon"
       @click="handleClick"

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue b/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
@@ -69,7 +69,7 @@ function handleClick(menu: IContextMenuItem) {
     <ContextMenuContent
       :class="contentClass"
       v-bind="contentProps"
-      class="side-content z-[1000]"
+      class="side-content z-popup"
     >
       <template v-for="menu in menusView" :key="menu.key">
         <ContextMenuItem

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue b/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
@@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <HoverCardContent
       :class="contentClass"
       v-bind="contentProps"
-      class="side-content z-[1000]"
+      class="side-content z-popup"
     >
       <slot></slot>
     </HoverCardContent>

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue b/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
@@ -48,7 +48,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
       <PopoverContent
         :class="contentClass"
-        class="side-content z-[1000]"
+        class="side-content z-popup"
         v-bind="contentProps"
       >
         <slot></slot>

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="forwarded"
       :class="
         cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-[1000] min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
           props.class,
         )
       "

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
@@ -30,7 +30,7 @@ const props = withDefaults(
       zIndex?: number;
     }
   >(),
-  { appendTo: 'body', showClose: true, zIndex: 1000 },
+  { appendTo: 'body', showClose: true },
 );
 const emits = defineEmits<
   DialogContentEmits & { close: []; closed: []; opened: [] }
@@ -84,7 +84,7 @@ defineExpose({
       <DialogOverlay
         v-if="open && modal"
         :style="{
-          zIndex,
+          ...(zIndex ? { zIndex } : {}),
           position,
           backdropFilter:
             overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
@@ -94,12 +94,12 @@ defineExpose({
     </Transition>
     <DialogContent
       ref="contentRef"
-      :style="{ zIndex, position }"
+      :style="{ ...(zIndex ? { zIndex } : {}), position }"
       @animationend="onAnimationEnd"
       v-bind="forwarded"
       :class="
         cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          'z-popup bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] w-full p-6 shadow-lg outline-none sm:rounded-xl',
           props.class,
         )
       "

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
@@ -7,5 +7,5 @@ useScrollLock();
 const id = inject('DISMISSABLE_MODAL_ID');
 </script>
 <template>
-  <div :data-dismissable-modal="id" class="bg-overlay inset-0"></div>
+  <div :data-dismissable-modal="id" class="bg-overlay z-popup inset-0"></div>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="forwarded"
       :class="
         cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-[1000] min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
           props.class,
         )
       "

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
@@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
       v-bind="forwardedProps"
       :class="
         cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-[1000] w-64 rounded-md border p-4 shadow-md outline-none',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup w-64 rounded-md border p-4 shadow-md outline-none',
           props.class,
         )
       "

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border relative z-[1000] max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup relative max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           props.class,

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue
@@ -28,7 +28,6 @@ defineOptions({
 
 const props = withDefaults(defineProps<SheetContentProps>(), {
   appendTo: 'body',
-  zIndex: 1000,
 });
 
 const emits = defineEmits<
@@ -79,7 +78,7 @@ function onAnimationEnd(event: AnimationEvent) {
       <SheetOverlay
         v-if="open && modal"
         :style="{
-          zIndex,
+          ...(zIndex ? { zIndex } : {}),
           position,
           backdropFilter:
             overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
@@ -88,9 +87,9 @@ function onAnimationEnd(event: AnimationEvent) {
     </Transition>
     <DialogContent
       ref="contentRef"
-      :class="cn(sheetVariants({ side }), props.class)"
+      :class="cn('z-popup', sheetVariants({ side }), props.class)"
       :style="{
-        zIndex,
+        ...(zIndex ? { zIndex } : {}),
         position,
       }"
       @animationend="onAnimationEnd"

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue
@@ -7,5 +7,5 @@ useScrollLock();
 const id = inject('DISMISSABLE_DRAWER_ID');
 </script>
 <template>
-  <div :data-dismissable-drawer="id" class="bg-overlay inset-0"></div>
+  <div :data-dismissable-drawer="id" class="bg-overlay z-popup inset-0"></div>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'bg-accent text-accent-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border shadow-float z-[1000] overflow-hidden rounded-sm border px-4 py-2 text-xs',
+          'z-popup bg-accent text-accent-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border shadow-float overflow-hidden rounded-sm border px-4 py-2 text-xs',
           props.class,
         )
       "

diff --git a/packages/effects/hooks/src/use-design-tokens.ts b/packages/effects/hooks/src/use-design-tokens.ts
@@ -25,6 +25,7 @@ export function useAntdDesignTokens() {
     colorSuccess: '',
     colorTextBase: '',
     colorWarning: '',
+    zIndexPopupBase: 2000, // 调整基础弹层层级，避免下拉等组件被弹窗或者最大化状态下的表格遮挡
   });
 
   const getCssVariableValue = (variable: string, isColor: boolean = true) => {

diff --git a/packages/styles/src/antd/index.css b/packages/styles/src/antd/index.css
@@ -56,5 +56,5 @@
 }
 
 .ant-message {
-  z-index: 1050;
+  z-index: var(--popup-z-index);
 }
diff --git a/playground/src/bootstrap.ts b/playground/src/bootstrap.ts
@@ -1,11 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import {
-  initTippy,
-  setDefaultDrawerProps,
-  setDefaultModalProps,
-} from '@vben/common-ui';
+import { initTippy } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -24,15 +20,14 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
-  // 设置弹窗的默认配置
-  setDefaultModalProps({
-    fullscreenButton: false,
-    zIndex: 1020,
-  });
-  // 设置抽屉的默认配置
-  setDefaultDrawerProps({
-    zIndex: 1020,
-  });
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   // zIndex: 1020,
+  // });
 
   const app = createApp(App);