yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: fix popup component zIndex (#5397)

pull/62/head
Netfan 2025-01-15 12:32:03 +08:00 committed by GitHub
parent 27a3888e35
commit 13087a10b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 62 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web-antd/src/bootstrap.ts
View File

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

23
apps/web-ele/src/bootstrap.ts
View File

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

23
apps/web-naive/src/bootstrap.ts
View File

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

4
packages/@core/base/design/src/css/ui.css
View File

@ -81,3 +81,7 @@
transform: translateY(0); transform: translateY(0);
} }
} }
.z-popup {
z-index: var(--popup-z-index);
}

2
packages/@core/base/design/src/design-tokens/default.css
View File

@ -1,4 +1,6 @@
:root { :root {
/** 弹出层的基础层级 **/
--popup-z-index: 2000;
--font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

2
packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
View File

@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
<VbenButton <VbenButton
v-if="visible" v-if="visible"
:style="backTopStyle" :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" size="icon"
variant="icon" variant="icon"
@click="handleClick" @click="handleClick"

2
packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
View File

@ -69,7 +69,7 @@ function handleClick(menu: IContextMenuItem) {
<ContextMenuContent <ContextMenuContent
:class="contentClass" :class="contentClass"
v-bind="contentProps" v-bind="contentProps"
class="side-content z-[1000]" class="side-content z-popup"
> >
<template v-for="menu in menusView" :key="menu.key"> <template v-for="menu in menusView" :key="menu.key">
<ContextMenuItem <ContextMenuItem

2
packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
View File

@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
<HoverCardContent <HoverCardContent
:class="contentClass" :class="contentClass"
v-bind="contentProps" v-bind="contentProps"
class="side-content z-[1000]" class="side-content z-popup"
> >
<slot></slot> <slot></slot>
</HoverCardContent> </HoverCardContent>

2
packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
View File

@ -48,7 +48,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
<PopoverContent <PopoverContent
:class="contentClass" :class="contentClass"
class="side-content z-[1000]" class="side-content z-popup"
v-bind="contentProps" v-bind="contentProps"
> >
<slot></slot> <slot></slot>

2
packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
View File

@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( 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, props.class,
) )
" "

8
packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
View File

@ -30,7 +30,7 @@ const props = withDefaults(
zIndex?: number; zIndex?: number;
} }
>(), >(),
{ appendTo: 'body', showClose: true, zIndex: 1000 }, { appendTo: 'body', showClose: true },
); );
const emits = defineEmits< const emits = defineEmits<
DialogContentEmits & { close: []; closed: []; opened: [] } DialogContentEmits & { close: []; closed: []; opened: [] }
@ -84,7 +84,7 @@ defineExpose({
<DialogOverlay <DialogOverlay
v-if="open && modal" v-if="open && modal"
:style="{ :style="{
zIndex, ...(zIndex ? { zIndex } : {}),
position, position,
backdropFilter: backdropFilter:
overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none', overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
@ -94,12 +94,12 @@ defineExpose({
</Transition> </Transition>
<DialogContent <DialogContent
ref="contentRef" ref="contentRef"
:style="{ zIndex, position }" :style="{ ...(zIndex ? { zIndex } : {}), position }"
@animationend="onAnimationEnd" @animationend="onAnimationEnd"
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( 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, props.class,
) )
" "

2
packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
View File

@ -7,5 +7,5 @@ useScrollLock();
const id = inject('DISMISSABLE_MODAL_ID'); const id = inject('DISMISSABLE_MODAL_ID');
</script> </script>
<template> <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> </template>

2
packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
View File

@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( 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, props.class,
) )
" "

2
packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
View File

@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
v-bind="forwardedProps" v-bind="forwardedProps"
:class=" :class="
cn( 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, props.class,
) )
" "

2
packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
View File

@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="{ ...forwarded, ...$attrs }" v-bind="{ ...forwarded, ...$attrs }"
:class=" :class="
cn( 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' && 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', '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, props.class,

7
packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue
View File

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

2
packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue
View File

@ -7,5 +7,5 @@ useScrollLock();
const id = inject('DISMISSABLE_DRAWER_ID'); const id = inject('DISMISSABLE_DRAWER_ID');
</script> </script>
<template> <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> </template>

2
packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
View File

@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="{ ...forwarded, ...$attrs }" v-bind="{ ...forwarded, ...$attrs }"
:class=" :class="
cn( 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, props.class,
) )
" "

1
packages/effects/hooks/src/use-design-tokens.ts
View File

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

2
packages/styles/src/antd/index.css
View File

@ -56,5 +56,5 @@
} }
.ant-message { .ant-message {
z-index: 1050; z-index: var(--popup-z-index);
} }

23
playground/src/bootstrap.ts
View File

@ -1,11 +1,7 @@
import { createApp, watchEffect } from 'vue'; import { createApp, watchEffect } from 'vue';
import { registerAccessDirective } from '@vben/access'; import { registerAccessDirective } from '@vben/access';
import { import { initTippy } from '@vben/common-ui';
initTippy,
setDefaultDrawerProps,
setDefaultModalProps,
} from '@vben/common-ui';
import { preferences } from '@vben/preferences'; import { preferences } from '@vben/preferences';
import { initStores } from '@vben/stores'; import { initStores } from '@vben/stores';
import '@vben/styles'; import '@vben/styles';
@ -24,15 +20,14 @@ async function bootstrap(namespace: string) {
// 初始化组件适配器 // 初始化组件适配器
await initComponentAdapter(); await initComponentAdapter();
// 设置弹窗的默认配置 // // 设置弹窗的默认配置
setDefaultModalProps({ // setDefaultModalProps({
fullscreenButton: false, // fullscreenButton: false,
zIndex: 1020, // });
}); // // 设置抽屉的默认配置
// 设置抽屉的默认配置 // setDefaultDrawerProps({
setDefaultDrawerProps({ // // zIndex: 1020,
zIndex: 1020, // });
});
const app = createApp(App); const app = createApp(App);