Merge branch 'main' into rounded

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);
 

apps/web-antd/src/router/routes/modules/dashboard.ts

@@ -10,7 +10,7 @@ const routes: RouteRecordRaw[] = [
       title: $t('page.dashboard.title'),
     },
     name: 'Dashboard',
-    path: '/',
+    path: '/dashboard',
     children: [
       {
         name: 'Analytics',

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指令

apps/web-ele/src/router/routes/modules/dashboard.ts

@@ -10,7 +10,7 @@ const routes: RouteRecordRaw[] = [
       title: $t('page.dashboard.title'),
     },
     name: 'Dashboard',
-    path: '/',
+    path: '/dashboard',
     children: [
       {
         name: 'Analytics',

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);
 

apps/web-naive/src/router/routes/modules/dashboard.ts

@@ -10,7 +10,7 @@ const routes: RouteRecordRaw[] = [
       title: $t('page.dashboard.title'),
     },
     name: 'Dashboard',
-    path: '/',
+    path: '/dashboard',
     children: [
       {
         name: 'Analytics',

docs/src/components/common-ui/vben-modal.md

@@ -113,6 +113,7 @@ const [Modal, modalApi] = useVbenModal({
 | bordered | 是否显示border | `boolean` | `false` |
 | zIndex | 弹窗的ZIndex层级 | `number` | `1000` |
 | overlayBlur | 遮罩模糊度 | `number` | - |
+| submitting | 标记为提交中，锁定弹窗当前状态 | `boolean` | `false` |
 
 ::: info appendToMain
 
@@ -126,7 +127,7 @@ const [Modal, modalApi] = useVbenModal({
 
 | 事件名 | 描述 | 类型 | 版本号 |
 | --- | --- | --- | --- |
-| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` |  |
+| onBeforeClose | 关闭前触发，返回 `false`或者被`reject`则禁止关闭 | `()=>Promise<boolean>\|boolean` |  |
 | onCancel | 点击取消按钮触发 | `()=>void` |  |
 | onClosed | 关闭动画播放完毕时触发 | `()=>void` | >5.4.3 |
 | onConfirm | 点击确认按钮触发 | `()=>void` |  |
@@ -153,3 +154,10 @@ const [Modal, modalApi] = useVbenModal({
 | setData | 设置共享数据 | `<T>(data:T)=>modalApi` |
 | getData | 获取共享数据 | `<T>()=>T` |
 | useStore | 获取可响应式状态 | - |
+| lock | 将弹窗标记为提交中，锁定当前状态 | `(isLock:boolean)=>modalApi` |
+
+::: info lock
+
+`lock`方法用于锁定当前弹窗的状态，一般用于提交数据的过程中防止用户重复提交或者弹窗被意外关闭、表单数据被改变等等。当处于锁定状态时，弹窗的确认按钮会变为loading状态，同时禁用确认按钮、隐藏关闭按钮、禁止ESC或者点击遮罩等方式关闭弹窗、开启弹窗的spinner动画以遮挡弹窗内容。调用`close`方法关闭处于锁定状态的弹窗时，会自动解锁。
+
+:::

packages/@core/base/design/src/css/ui.css

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

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';

packages/@core/base/typings/src/helper.d.ts

@@ -109,6 +109,8 @@ type MergeAll<
 
 type EmitType = (name: Name, ...args: any[]) => void;
 
+type MaybePromise<T> = Promise<T> | T;
+
 export type {
   AnyFunction,
   AnyNormalFunction,
@@ -118,6 +120,7 @@ export type {
   EmitType,
   IntervalHandle,
   MaybeComputedRef,
+  MaybePromise,
   MaybeReadonlyRef,
   Merge,
   MergeAll,

packages/@core/ui-kit/form-ui/src/form-api.ts

@@ -404,9 +404,8 @@ export class FormApi {
       const deletedSchema = prevSchema.filter(
         (item) => !currentFields.has(item.fieldName),
       );
-
       for (const schema of deletedSchema) {
-        this.form?.setFieldValue(schema.fieldName, undefined);
+        this.form?.setFieldValue?.(schema.fieldName, undefined);
       }
     }
   }

packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts

@@ -95,20 +95,34 @@ export class ModalApi {
 
   /**
    * 关闭弹窗
+   * @description 关闭弹窗时会调用 onBeforeClose 钩子函数，如果 onBeforeClose 返回 false，则不关闭弹窗
    */
-  close() {
+  async close() {
     // 通过 onBeforeClose 钩子函数来判断是否允许关闭弹窗
     // 如果 onBeforeClose 返回 false，则不关闭弹窗
-    const allowClose = this.api.onBeforeClose?.() ?? true;
+    const allowClose = (await this.api.onBeforeClose?.()) ?? true;
     if (allowClose) {
-      this.store.setState((prev) => ({ ...prev, isOpen: false }));
+      this.store.setState((prev) => ({
+        ...prev,
+        isOpen: false,
+        submitting: false,
+      }));
     }
   }
 
   getData<T extends object = Record<string, any>>() {
     return (this.sharedData?.payload ?? {}) as T;
   }
 
+  /**
+   * 锁定弹窗状态（用于提交过程中的等待状态）
+   * @description 锁定状态将禁用默认的取消按钮，使用spinner覆盖弹窗内容，隐藏关闭按钮，阻止手动关闭弹窗，将默认的提交按钮标记为loading状态
+   * @param isLocked 是否锁定
+   */
+  lock(isLocked = true) {
+    return this.setState({ submitting: isLocked });
+  }
+
   /**
    * 取消操作
    */

packages/@core/ui-kit/popup-ui/src/modal/modal.ts

@@ -1,5 +1,7 @@
 import type { Component, Ref } from 'vue';
 
+import type { MaybePromise } from '@vben-core/typings';
+
 import type { ModalApi } from './modal-api';
 
 export interface ModalProps {
@@ -113,6 +115,10 @@ export interface ModalProps {
    * @default true
    */
   showConfirmButton?: boolean;
+  /**
+   * 提交中（锁定弹窗状态）
+   */
+  submitting?: boolean;
   /**
    * 弹窗标题
    */
@@ -155,7 +161,7 @@ export interface ModalApiOptions extends ModalState {
    * 关闭前的回调，返回 false 可以阻止关闭
    * @returns
    */
-  onBeforeClose?: () => void;
+  onBeforeClose?: () => MaybePromise<boolean | undefined>;
   /**
    * 点击取消按钮的回调
    */

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

@@ -80,6 +80,7 @@ const {
   overlayBlur,
   showCancelButton,
   showConfirmButton,
+  submitting,
   title,
   titleTooltip,
   zIndex,
@@ -115,9 +116,9 @@ watch(
 );
 
 watch(
-  () => showLoading.value,
-  (v) => {
-    if (v && wrapperRef.value) {
+  () => [showLoading.value, submitting.value],
+  ([l, s]) => {
+    if ((s || l) && wrapperRef.value) {
       wrapperRef.value.scrollTo({
         // behavior: 'smooth',
         top: 0,
@@ -135,13 +136,13 @@ function handleFullscreen() {
   });
 }
 function interactOutside(e: Event) {
-  if (!closeOnClickModal.value) {
+  if (!closeOnClickModal.value || submitting.value) {
     e.preventDefault();
     e.stopPropagation();
   }
 }
 function escapeKeyDown(e: KeyboardEvent) {
-  if (!closeOnPressEscape.value) {
+  if (!closeOnPressEscape.value || submitting.value) {
     e.preventDefault();
   }
 }
@@ -156,7 +157,11 @@ function handerOpenAutoFocus(e: Event) {
 function pointerDownOutside(e: Event) {
   const target = e.target as HTMLElement;
   const isDismissableModal = target?.dataset.dismissableModal;
-  if (!closeOnClickModal.value || isDismissableModal !== id) {
+  if (
+    !closeOnClickModal.value ||
+    isDismissableModal !== id ||
+    submitting.value
+  ) {
     e.preventDefault();
     e.stopPropagation();
   }
@@ -174,7 +179,7 @@ const getAppendTo = computed(() => {
   <Dialog
     :modal="false"
     :open="state?.isOpen"
-    @update:open="() => modalApi?.close()"
+    @update:open="() => (!submitting ? modalApi?.close() : undefined)"
   >
     <DialogContent
       ref="contentRef"
@@ -195,7 +200,7 @@ const getAppendTo = computed(() => {
       "
       :modal="modal"
       :open="state?.isOpen"
-      :show-close="closable"
+      :show-close="submitting ? false : closable"
       :z-index="zIndex"
       :overlay-blur="overlayBlur"
       close-class="top-3"
@@ -247,12 +252,12 @@ const getAppendTo = computed(() => {
         ref="wrapperRef"
         :class="
           cn('relative min-h-40 flex-1 overflow-y-auto p-3', contentClass, {
-            'pointer-events-none overflow-hidden': showLoading,
+            'pointer-events-none overflow-hidden': showLoading || submitting,
           })
         "
       >
         <VbenLoading
-          v-if="showLoading"
+          v-if="showLoading || submitting"
           class="size-full h-auto min-h-full"
           spinning
         />
@@ -287,6 +292,7 @@ const getAppendTo = computed(() => {
             :is="components.DefaultButton || VbenButton"
             v-if="showCancelButton"
             variant="ghost"
+            :disabled="submitting"
             @click="() => modalApi?.onCancel()"
           >
             <slot name="cancelText">
@@ -298,7 +304,7 @@ const getAppendTo = computed(() => {
             :is="components.PrimaryButton || VbenButton"
             v-if="showConfirmButton"
             :disabled="confirmDisabled"
-            :loading="confirmLoading"
+            :loading="confirmLoading || submitting"
             @click="() => modalApi?.onConfirm()"
           >
             <slot name="confirmText">

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"

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