Merge remote-tracking branch 'origin/main'

internal/lint-configs/eslint-config/src/configs/vue.ts

@@ -85,7 +85,13 @@ export async function vue(): Promise<Linter.Config[]> {
         'vue/dot-location': ['error', 'property'],
         'vue/dot-notation': ['error', { allowKeywords: true }],
         'vue/eqeqeq': ['error', 'smart'],
-        'vue/html-closing-bracket-newline': 'error',
+        'vue/html-closing-bracket-newline': [
+          'error',
+          {
+            multiline: 'never',
+            selfClosingTag: { multiline: 'never' },
+          },
+        ],
         'vue/html-indent': 'off',
         // 'vue/html-indent': ['error', 2],
         'vue/html-quotes': ['error', 'double'],

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

@@ -145,7 +145,7 @@ async function handleOpenChange(val: boolean) {
 }
 </script>
 <template>
-  <AlertDialog :open="open" @update:open="handleOpenChange">
+  <AlertDialog :modal="false" :open="open" @update:open="handleOpenChange">
     <AlertDialogContent
       :open="open"
       :centered="centered"
@@ -153,6 +153,7 @@ async function handleOpenChange(val: boolean) {
       @opened="emits('opened')"
       @closed="onAlertClosed"
       @escape-key-down="onEscapeKeyDown($event)"
+      @close="handleOpenChange(false)"
       :class="
         cn(
           containerClass,

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

@@ -5,17 +5,17 @@ import type { ClassType } from '@vben-core/typings';
 
 import { ref } from 'vue';
 
-import { useScrollLock } from '@vben-core/composables';
 import { cn } from '@vben-core/shared/utils';
 
 import { reactiveOmit } from '@vueuse/core';
 import {
   AlertDialogContent,
-  AlertDialogOverlay,
   AlertDialogPortal,
   useForwardPropsEmits,
 } from 'reka-ui';
 
+import AlertDialogOverlay from './AlertDialogOverlay.vue';
+
 defineOptions({
   inheritAttrs: false,
 });
@@ -37,7 +37,11 @@ const emits = defineEmits<
   AlertDialogContentEmits & { close: []; closed: []; opened: [] }
 >();
 
-useScrollLock();
+// reka-ui 的 AlertDialog 在 modal=true 时会将 body 设置 pointer-events:none，
+// 弹出层（如 Select 下拉框）会因此无法点击。这里通过在上层传入 :modal="false" 来
+// 避免该问题，同时通过 AlertDialogOverlay 组件自行渲染遮罩并锁定滚动。
+// AlertDialogOverlay 通过 v-if 控制挂载/卸载，其内部的 useScrollLock 会在组件
+// 卸载时自动解锁滚动。
 
 const delegatedProps = reactiveOmit(props, 'class');
 
@@ -63,15 +67,10 @@ defineExpose({
   <AlertDialogPortal>
     <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"
         v-if="open && modal"
-        :style="{
+        :overlay-blur="overlayBlur"
-          ...(zIndex ? { zIndex } : {}),
+        position="fixed"
-          position: 'fixed',
+        :z-index="zIndex"
-          backdropFilter:
-            overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
-        }"
         @click="() => emits('close')"
       />
     </Transition>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useScrollLock } from '@vben-core/composables';
+import { cn } from '@vben-core/shared/utils';
+
+const props = withDefaults(
+  defineProps<{
+    class?: any;
+    overlayBlur?: number;
+    position?: 'absolute' | 'fixed';
+    zIndex?: number;
+  }>(),
+  {
+    position: 'fixed',
+  },
+);
+
+// 通过 v-if 控制挂载/卸载，组件卸载时 useScrollLock 自动解锁滚动
+useScrollLock();
+</script>
+
+<template>
+  <div
+    :style="{
+      ...(zIndex ? { zIndex } : {}),
+      position,
+      backdropFilter:
+        overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
+    }"
+    :class="cn('z-popup bg-overlay inset-0 fixed', props.class)"
+  ></div>
+</template>

packages/effects/common-ui/src/components/page/page.vue

@@ -56,7 +56,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="relative flex min-h-full flex-col">
+  <div class="relative flex h-full flex-col">
     <div
       v-if="
         description ||
@@ -92,7 +92,7 @@ onMounted(() => {
       </div>
     </div>
 
-    <div :class="cn('h-full p-4', contentClass)" :style="contentStyle">
+    <div :class="cn(autoContentHeight ? 'h-full' : 'flex-1', 'p-4', contentClass)" :style="contentStyle">
       <slot></slot>
     </div>
     <div