fix: alert

packages/@core/ui-kit/popup-ui/src/alert/alert.vue

@@ -21,6 +21,7 @@ import {
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
+  AlertDialogFooter,
   AlertDialogTitle,
   VbenButton,
   VbenLoading,
@@ -192,26 +193,28 @@ async function handleOpenChange(val: boolean) {
           class="flex items-center justify-end gap-x-2"
           :class="`justify-${buttonAlign}`"
         >
-          <VbenRenderContent :content="footer" />
+          <AlertDialogFooter>
-          <AlertDialogCancel v-if="showCancel" as-child>
+            <VbenRenderContent :content="footer" />
-            <component
+            <AlertDialogCancel v-if="showCancel" as-child>
-              :is="components.DefaultButton || VbenButton"
+              <component
-              :disabled="loading"
+                :is="components.DefaultButton || VbenButton"
-              variant="outline"
+                :disabled="loading"
-              @click="handleCancel"
+                variant="outline"
-            >
+                @click="handleCancel"
-              {{ cancelText || $t('cancel') }}
+              >
-            </component>
+                {{ cancelText || $t('cancel') }}
-          </AlertDialogCancel>
+              </component>
-          <AlertDialogAction as-child>
+            </AlertDialogCancel>
-            <component
+            <AlertDialogAction as-child>
-              :is="components.PrimaryButton || VbenButton"
+              <component
-              :loading="loading"
+                :is="components.PrimaryButton || VbenButton"
-              @click="handleConfirm"
+                :loading="loading"
-            >
+                @click="handleConfirm"
-              {{ confirmText || $t('confirm') }}
+              >
-            </component>
+                {{ confirmText || $t('confirm') }}
-          </AlertDialogAction>
+              </component>
+            </AlertDialogAction>
+          </AlertDialogFooter>
         </div>
       </div>
     </AlertDialogContent>

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue

@@ -1,13 +1,27 @@
 <script setup lang="ts">
 import type { AlertDialogActionProps } from 'reka-ui';
 
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
 import { AlertDialogAction } from 'reka-ui';
 
-const props = defineProps<AlertDialogActionProps>();
+import { buttonVariants } from '../button';
+
+const props = defineProps<
+  AlertDialogActionProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <AlertDialogAction v-bind="props">
+  <AlertDialogAction
+    v-bind="delegatedProps"
+    :class="cn(buttonVariants({ variant: 'icon' }), props.class)"
+  >
     <slot></slot>
   </AlertDialogAction>
 </template>

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,13 +1,25 @@
 <script setup lang="ts">
 import type { AlertDialogCancelProps } from 'reka-ui';
 
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
 import { AlertDialogCancel } from 'reka-ui';
 
-const props = defineProps<AlertDialogCancelProps>();
+const props = defineProps<
+  AlertDialogCancelProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <AlertDialogCancel v-bind="props">
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn('mt-2 sm:mt-0', props.class)"
+  >
     <slot></slot>
   </AlertDialogCancel>
 </template>

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { AlertDialogContentEmits, AlertDialogContentProps } from 'reka-ui';
 
-import type { ClassType } from '@vben-core/typings';
+import type { HTMLAttributes } from 'vue';
 
 import { ref } from 'vue';
 
@@ -24,7 +24,7 @@ const props = withDefaults(
   defineProps<
     AlertDialogContentProps & {
       centered?: boolean;
-      class?: ClassType;
+      class?: HTMLAttributes['class'];
       modal?: boolean;
       open?: boolean;
       overlayBlur?: number;
@@ -42,7 +42,6 @@ useScrollLock();
 const delegatedProps = reactiveOmit(props, 'class');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
-
 const contentRef = ref<InstanceType<typeof AlertDialogContent> | null>(null);
 function onAnimationEnd(event: AnimationEvent) {
   // 只有在 contentRef 的动画结束时才触发 opened/closed 事件
@@ -64,7 +63,7 @@ defineExpose({
     <Transition name="fade" appear>
       <AlertDialogOverlay
         data-slot="alert-dialog-overlay"
-        class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-popup bg-overlay"
+        class="z-popup bg-overlay inset-0"
         v-if="open && modal"
         :style="{
           ...(zIndex ? { zIndex } : {}),
@@ -78,7 +77,11 @@ defineExpose({
     <AlertDialogContent
       data-slot="alert-dialog-content"
       ref="contentRef"
-      :style="{ ...(zIndex ? { zIndex } : {}), position: 'fixed' }"
+      :style="{
+        ...(zIndex ? { zIndex } : {}),
+        pointerEvents: 'auto',
+        position: 'fixed',
+      }"
       @animationend="onAnimationEnd"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue

@@ -6,21 +6,19 @@ import type { HTMLAttributes } from 'vue';
 import { cn } from '@vben-core/shared/utils';
 
 import { reactiveOmit } from '@vueuse/core';
-import { AlertDialogDescription, useForwardProps } from 'reka-ui';
+import { AlertDialogDescription } from 'reka-ui';
 
 const props = defineProps<
   AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }
 >();
 
 const delegatedProps = reactiveOmit(props, 'class');
-
-const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <AlertDialogDescription
     data-slot="alert-dialog-description"
-    v-bind="forwardedProps"
+    v-bind="delegatedProps"
     :class="cn('text-muted-foreground text-sm', props.class)"
   >
     <slot></slot>