From 0328594747abd46811f7ac16e805aab5a5a75b19 Mon Sep 17 00:00:00 2001
From: Harold Zhang <HZhang@datacolor.com>
Date: Wed, 3 Jun 2026 17:52:41 +0800
Subject: [PATCH] feat: fixed the overlay layer can not work with reka-ui

---
 .../shadcn-ui/src/ui/dialog/DialogOverlay.vue | 29 ++-----------------
 1 file changed, 3 insertions(+), 26 deletions(-)

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
index 995e11e0c..ac03e1226 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
@@ -1,34 +1,11 @@
 <script setup lang="ts">
-import type { DialogOverlayProps } from 'reka-ui';
-
-import type { HTMLAttributes } from 'vue';
+import { inject } from 'vue';
 
 import { useScrollLock } from '@vben-core/composables';
-import { cn } from '@vben-core/shared/utils';
-
-import { reactiveOmit } from '@vueuse/core';
-import { DialogOverlay } from 'reka-ui';
-
-const props = defineProps<
-  DialogOverlayProps & { class?: HTMLAttributes['class'] }
->();
-
-const delegatedProps = reactiveOmit(props, 'class');
 
 useScrollLock();
+const id = inject('DISMISSABLE_MODAL_ID');
 </script>
-
 <template>
-  <DialogOverlay
-    data-slot="dialog-overlay"
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'z-popup bg-overlay inset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed',
-        props.class,
-      )
-    "
-  >
-    <slot></slot>
-  </DialogOverlay>
+  <div :data-dismissable-modal="id" class="z-popup bg-overlay inset-0 fixed"></div>
 </template>