docs: changelog

优化首屏加载速度

.vscode/settings.json

@@ -224,10 +224,20 @@
   "commentTranslate.multiLineMerge": true,
   "vue.server.hybridMode": true,
   "vitest.disableWorkspaceWarning": true,
-  "cSpell.words": ["tinymce", "vditor"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.linkedEditing": true, // 自动同步更改html标签,
   "vscodeCustomCodeColor.highlightValue": "v-access", // v-access显示的颜色
   "vscodeCustomCodeColor.highlightValueColor": "#CCFFFF",
-  "oxc.enable": false
+  "oxc.enable": false,
+  "cSpell.words": [
+    "archiver",
+    "axios",
+    "dotenv",
+    "isequal",
+    "jspm",
+    "napi",
+    "nolebase",
+    "rollup",
+    "vitest"
+  ]
 }

CHANGELOG.md

@@ -1,3 +1,23 @@
+# 1.3.1
+
+**REFACTOR**
+
+- 所有Modal/Drawer表单关闭前会进行表单数据对比来弹出提示框
+- 字典项颜色选择从`原生input type=color`改为`vue3-colorpicker`组件
+- 全局Header: ClientID 更改大小写 [spring的问题导致](https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IC0BDS)
+
+**BUG FIX**
+
+- getVxePopupContainer逻辑调整 解决表格固定高度展开不全的问题
+
+**FEATURES**
+
+- 字典渲染支持loading(length为0情况)
+
+**OTHERS**
+
+- useForm的组件改为异步导入(官方更新) bootstrap.js体积从2M降到600K 首屏加载速度提升
+
 # 1.3.0
 
 注意: 如果你使用老版本的`文件上传`/`图片上传` 可暂时使用

apps/web-antd/package.json

@@ -54,7 +54,8 @@
     "tinymce": "^7.3.0",
     "unplugin-vue-components": "^0.27.3",
     "vue": "catalog:",
-    "vue-router": "catalog:"
+    "vue-router": "catalog:",
+    "vue3-colorpicker": "^2.3.0"
   },
   "devDependencies": {
     "@types/crypto-js": "^4.2.2",

apps/web-antd/src/adapter/component/index.ts

@@ -8,40 +8,80 @@ import type { Component } from 'vue';
 import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import { computed, defineComponent, getCurrentInstance, h, ref } from 'vue';
+import {
+  computed,
+  defineAsyncComponent,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+} from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import {
+import { notification } from 'ant-design-vue';
-  AutoComplete,
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  DatePicker,
-  Divider,
-  Input,
-  InputNumber,
-  InputPassword,
-  Mentions,
-  notification,
-  Radio,
-  RadioGroup,
-  RangePicker,
-  Rate,
-  Select,
-  Space,
-  Switch,
-  Textarea,
-  TimePicker,
-  TreeSelect,
-  Upload,
-} from 'ant-design-vue';
 
-import { Tinymce as RichTextarea } from '#/components/tinymce';
-import { FileUpload, ImageUpload } from '#/components/upload';
 import { FileUploadOld, ImageUploadOld } from '#/components/upload-old';
 
+const RichTextarea = defineAsyncComponent(() =>
+  import('#/components/tinymce/index').then((res) => res.Tinymce),
+);
+
+const FileUpload = defineAsyncComponent(() =>
+  import('#/components/upload').then((res) => res.FileUpload),
+);
+
+const ImageUpload = defineAsyncComponent(() =>
+  import('#/components/upload').then((res) => res.ImageUpload),
+);
+
+const AutoComplete = defineAsyncComponent(
+  () => import('ant-design-vue/es/auto-complete'),
+);
+const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
+const Checkbox = defineAsyncComponent(
+  () => import('ant-design-vue/es/checkbox'),
+);
+const CheckboxGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
+);
+const DatePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/date-picker'),
+);
+const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider'));
+const Input = defineAsyncComponent(() => import('ant-design-vue/es/input'));
+const InputNumber = defineAsyncComponent(
+  () => import('ant-design-vue/es/input-number'),
+);
+const InputPassword = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.InputPassword),
+);
+const Mentions = defineAsyncComponent(
+  () => import('ant-design-vue/es/mentions'),
+);
+const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio'));
+const RadioGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
+);
+const RangePicker = defineAsyncComponent(() =>
+  import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
+);
+const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate'));
+const Select = defineAsyncComponent(() => import('ant-design-vue/es/select'));
+const Space = defineAsyncComponent(() => import('ant-design-vue/es/space'));
+const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch'));
+const Textarea = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.Textarea),
+);
+const TimePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/time-picker'),
+);
+const TreeSelect = defineAsyncComponent(
+  () => import('ant-design-vue/es/tree-select'),
+);
+const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
+
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
   type: 'input' | 'select',

apps/web-antd/src/api/request.ts

@@ -93,9 +93,12 @@ function createRequestClient(baseURL: string) {
       const language = preferences.app.locale.replace('-', '_');
       config.headers['Accept-Language'] = language;
       config.headers['Content-Language'] = language;
-      // 添加全局clientId
+      /**
-      config.headers.clientId = clientId;
+       * 添加全局clientId
-
+       * 关于header的clientId被错误绑定到实体类
+       * https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IC0BDS
+       */
+      config.headers.ClientID = clientId;
       /**
        * 格式化get/delete参数
        * 如果包含自定义的paramsSerializer则不走此逻辑

apps/web-antd/src/bootstrap.ts

@@ -1,8 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import { initTippy, registerLoadingDirective } from '@vben/common-ui';
+import { registerLoadingDirective } from '@vben/common-ui/es/loading';
-import { MotionPlugin } from '@vben/plugins/motion';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -50,12 +49,14 @@ async function bootstrap(namespace: string) {
   registerAccessDirective(app);
 
   // 初始化 tippy
+  const { initTippy } = await import('@vben/common-ui/es/tippy');
   initTippy(app);
 
   // 配置路由及路由守卫
   app.use(router);
 
   // 配置Motion插件
+  const { MotionPlugin } = await import('@vben/plugins/motion');
   app.use(MotionPlugin);
 
   // 动态更新标题

apps/web-antd/src/components/dict/src/index.vue

@@ -4,7 +4,7 @@ import type { DictData } from '#/api/system/dict/dict-data-model';
 
 import { computed } from 'vue';
 
-import { Tag } from 'ant-design-vue';
+import { Spin, Tag } from 'ant-design-vue';
 
 import { tagTypes } from './data';
 
@@ -41,12 +41,22 @@ const label = computed<number | string>(() => {
 });
 
 const tagComponent = computed(() => (color.value ? Tag : 'div'));
+
+const loading = computed(() => {
+  return props.dicts?.length === 0;
+});
 </script>
 
 <template>
   <div>
-    <component :is="tagComponent" :class="cssClass" :color="color">
+    <component
+      v-if="!loading"
+      :is="tagComponent"
+      :class="cssClass"
+      :color="color"
+    >
       {{ label }}
     </component>
+    <Spin v-else :spinning="true" size="small" />
   </div>
 </template>

apps/web-antd/src/components/upload/src/hook.ts

@@ -204,7 +204,12 @@ export function useUpload(
         if (props.maxCount === 1) {
           bindValue.value = ossId;
         } else {
-          (bindValue.value as string[]).push(ossId);
+          // 给默认值
+          if (!Array.isArray(bindValue.value)) {
+            bindValue.value = [];
+          }
+          // 直接使用.value无法触发useForm的更新(原生是正常的) 需要修改地址
+          bindValue.value = [...bindValue.value, ossId];
         }
         break;
       }
@@ -344,12 +349,16 @@ export function useUpload(
         !props.keepMissingId &&
         props.maxCount !== 1
       ) {
-        bindValue.value = (bindValue.value as string[]).filter((ossId) =>
+        // 给默认值
+        if (!Array.isArray(bindValue.value)) {
+          bindValue.value = [];
+        }
+        bindValue.value = bindValue.value.filter((ossId) =>
           resp.map((res) => res.ossId).includes(ossId),
         );
       }
     },
-    { immediate: true, deep: props.deepWatch },
+    { immediate: true },
   );
 
   return {

apps/web-antd/src/components/upload/src/props.d.ts

@@ -87,13 +87,6 @@ export interface BaseUploadProps {
    * @default false
    */
   enableDragUpload?: boolean;
-  /**
-   * 是否开启深度监听
-   * 默认外部的数组地址重新改变才会触发watch 不会监听内部元素的变化
-   * 开启后 无论内部还是外部改变都会触发查询信息接口(包括上传后, 删除等操作都会触发)
-   * @default false
-   */
-  deepWatch?: boolean;
   /**
    * 当ossId查询不到文件信息时  比如被删除了
    * 是否保留列表对应的ossId 默认不保留

apps/web-antd/src/locales/langs/en-US/pages.json

@@ -21,6 +21,7 @@
     "preview": "Preview",
     "tip": "Tip",
     "enable": "On",
-    "disable": "Off"
+    "disable": "Off",
+    "beforeCloseTip": "You have unsaved changes. Are you sure you want to exit?"
   }
 }

apps/web-antd/src/locales/langs/zh-CN/pages.json

@@ -21,6 +21,7 @@
     "preview": "预览",
     "tip": "提示",
     "enable": "启用",
-    "disable": "禁用"
+    "disable": "禁用",
+    "beforeCloseTip": "您有未保存的更改，确认要退出吗？"
   }
 }

apps/web-antd/src/router/routes/core.ts

@@ -2,10 +2,10 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
 
-import { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
-import Login from '#/views/_core/authentication/login.vue';
 
+const BasicLayout = () => import('#/layouts/basic.vue');
+const AuthPageLayout = () => import('#/layouts/auth.vue');
 /** 全局404页面 */
 const fallbackNotFoundRoute: RouteRecordRaw = {
   component: () => import('#/views/_core/fallback/not-found.vue'),
@@ -58,7 +58,7 @@ const coreRoutes: RouteRecordRaw[] = [
       {
         name: 'Login',
         path: 'login',
-        component: Login,
+        component: () => import('#/views/_core/authentication/login.vue'),
         meta: {
           title: $t('page.auth.login'),
         },

apps/web-antd/src/store/dict.ts

@@ -59,6 +59,7 @@ export const useDictStore = defineStore('app-dict', () => {
   }
 
   function resetCache() {
+    dictRequestCache.clear();
     dictOptionsMap.clear();
     /**
      * 不需要清空dictRequestCache 每次请求成功/失败都清空key

apps/web-antd/src/utils/popup.ts

@@ -29,43 +29,52 @@ interface BeforeCloseDiffProps {
 }
 
 /**
- * @deprecated 注意为实验性功能 可能有api变动/被移除
+ * 用于Drawer/Modal使用 判断表单是否有变动来决定是否弹窗提示
  * @param props props
  * @returns hook
- *
- * 待解决问题: 网速慢情况直接关闭 会导致数据不一致问题
- * 但是使用api.lock会导致在报错情况无法关闭(因为目前代码没有finally)
  */
 export function useBeforeCloseDiff(props: BeforeCloseDiffProps) {
   const { initializedGetter, currentGetter, compare } = props;
+  /**
+   * 记录初始值 json
+   */
   const initialized = ref<string>('');
+  /**
+   * 是否已经初始化了 通过这个值判断是否需要进行对比 为false直接关闭 不弹窗
+   */
   const isInitialized = ref(false);
-  const isSubmitted = ref(false);
 
-  async function updateInitialized(data?: string) {
+  /**
+   * 标记是否已经完成初始化 后续需要进行对比
+   * @param data 自定义初始化数据 可选
+   */
+  async function markInitialized(data?: string) {
     initialized.value = data || (await initializedGetter());
     isInitialized.value = true;
   }
 
-  function setSubmitted() {
+  /**
-    isSubmitted.value = true;
+   * 重置初始化状态 需要在closed前调用 或者打开窗口时
+   */
+  function resetInitialized() {
+    initialized.value = '';
+    isInitialized.value = false;
   }
 
+  /**
+   * 提供给useVbenForm/useVbenDrawer使用
+   * @returns 是否允许关闭
+   */
   async function onBeforeClose(): Promise<boolean> {
     // 如果还未初始化，直接允许关闭
     if (!isInitialized.value) {
       return true;
     }
-    // 如果已经提交过，直接允许关闭
-    if (isSubmitted.value) {
-      // 重置状态
-      isSubmitted.value = false;
-      return true;
-    }
 
     try {
+      // 获取当前表单数据
       const current = await currentGetter();
-
+      // 自定义比较的情况
       if (isFunction(compare) && compare(initialized.value, current)) {
         return true;
       } else {
@@ -79,7 +88,7 @@ export function useBeforeCloseDiff(props: BeforeCloseDiffProps) {
       return new Promise<boolean>((resolve) => {
         Modal.confirm({
           title: $t('pages.common.tip'),
-          content: $t('您有未保存的更改，确认要退出吗？'),
+          content: $t('pages.common.beforeCloseTip'),
           centered: true,
           okButtonProps: { danger: true },
           cancelText: $t('common.cancel'),
@@ -99,8 +108,8 @@ export function useBeforeCloseDiff(props: BeforeCloseDiffProps) {
 
   return {
     onBeforeClose,
-    updateInitialized,
+    markInitialized,
-    setSubmitted,
+    resetInitialized,
   };
 }
 

apps/web-antd/src/views/system/client/client-drawer.vue

@@ -7,6 +7,7 @@ import { cloneDeep } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
 import { clientAdd, clientInfo, clientUpdate } from '#/api/system/client';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 import SecretInput from './secret-input.vue';
@@ -55,6 +56,13 @@ function setupForm(update: boolean) {
   ]);
 }
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 // 提取生成状态字段Schema的函数
 const getStatusSchema = (disabled: boolean) => [
   {
@@ -64,13 +72,15 @@ const getStatusSchema = (disabled: boolean) => [
 ];
 
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
       return null;
     }
     drawerApi.drawerLoading(true);
+
     const { id } = drawerApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
     // 初始化
@@ -84,36 +94,39 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
       // 新增模式: 确保状态字段可用
       formApi.updateSchema(getStatusSchema(false));
     }
+    await markInitialized();
+
     drawerApi.drawerLoading(false);
   },
 });
 
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? clientUpdate(data) : clientAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  drawerApi.close();
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :title="title" class="w-[600px]">
     <BasicForm>
       <template #clientSecret="slotProps">
         <SecretInput v-bind="slotProps" :disabled="isUpdate" />

apps/web-antd/src/views/system/config/config-modal.vue

@@ -26,10 +26,12 @@ const [BasicForm, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-const { onBeforeClose, updateInitialized, setSubmitted } = useBeforeCloseDiff({
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
-  initializedGetter: defaultFormValueGetter(formApi),
+  {
-  currentGetter: defaultFormValueGetter(formApi),
+    initializedGetter: defaultFormValueGetter(formApi),
-});
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
 
 const [BasicModal, modalApi] = useVbenModal({
   fullscreenButton: false,
@@ -40,22 +42,18 @@ const [BasicModal, modalApi] = useVbenModal({
     if (!isOpen) {
       return null;
     }
-    try {
+    modalApi.modalLoading(true);
-      modalApi.lock(true);
 
-      const { id } = modalApi.getData() as { id?: number | string };
+    const { id } = modalApi.getData() as { id?: number | string };
-      isUpdate.value = !!id;
+    isUpdate.value = !!id;
 
-      if (isUpdate.value && id) {
+    if (isUpdate.value && id) {
-        const record = await configInfo(id);
+      const record = await configInfo(id);
-        await formApi.setValues(record);
+      await formApi.setValues(record);
-      }
-      await updateInitialized();
-    } catch (error) {
-      console.error(error);
-    } finally {
-      modalApi.lock(false);
     }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
   },
 });
 
@@ -68,7 +66,7 @@ async function handleConfirm() {
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? configUpdate(data) : configAdd(data));
-    setSubmitted();
+    resetInitialized();
     emit('reload');
     modalApi.close();
   } catch (error) {
@@ -80,6 +78,7 @@ async function handleConfirm() {
 
 async function handleClosed() {
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 

apps/web-antd/src/views/system/dept/dept-drawer.vue

@@ -16,6 +16,7 @@ import {
   deptUpdate,
 } from '#/api/system/dept';
 import { listUserByDeptId } from '#/api/system/user';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 
@@ -107,8 +108,16 @@ async function setLeaderOptions() {
   ]);
 }
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
@@ -130,6 +139,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
     await (update && id ? initDeptUsers(id) : setLeaderOptions());
     /** 部门选择 下拉框 */
     await initDeptSelect(id);
+    await markInitialized();
 
     drawerApi.drawerLoading(false);
   },
@@ -137,30 +147,31 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
 
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? deptUpdate(data) : deptAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  drawerApi.close();
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :title="title" class="w-[600px]">
     <BasicForm />
   </BasicDrawer>
 </template>

apps/web-antd/src/views/system/dict/data/dict-data-drawer.vue

@@ -12,6 +12,7 @@ import {
   dictDetailInfo,
 } from '#/api/system/dict/dict-data';
 import { tagTypes } from '#/components/dict';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 import TagStylePicker from './tag-style-picker.vue';
@@ -57,8 +58,16 @@ function setupSelectType(listClass: string) {
   selectType.value = isDefault ? 'default' : 'custom';
 }
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
@@ -75,6 +84,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
       setupSelectType(record.listClass);
       await formApi.setValues(record);
     }
+    await markInitialized();
 
     drawerApi.drawerLoading(false);
   },
@@ -82,7 +92,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
 
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
@@ -93,19 +103,20 @@ async function handleConfirm() {
       data.listClass = '';
     }
     await (isUpdate.value ? dictDataUpdate(data) : dictDataAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  drawerApi.close();
   await formApi.resetForm();
   selectType.value = 'default';
+  resetInitialized();
 }
 
 /**
@@ -117,7 +128,7 @@ async function handleDeSelect() {
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :title="title" class="w-[600px]">
     <BasicForm>
       <template #listClass="slotProps">
         <TagStylePicker

apps/web-antd/src/views/system/dict/data/tag-style-picker.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import type { RadioChangeEvent } from 'ant-design-vue';
 
-import type { PropType } from 'vue';
-
 import { computed } from 'vue';
 
-import { Input, RadioGroup, Select } from 'ant-design-vue';
+import { usePreferences } from '@vben/preferences';
+
+import { RadioGroup, Select } from 'ant-design-vue';
+import { ColorPicker } from 'vue3-colorpicker';
 
 import { tagSelectOptions } from '#/components/dict';
 
+import 'vue3-colorpicker/style.css';
+
 /**
  * 需要禁止透传
  * 不禁止会有奇怪的bug 会绑定到selectType上
@@ -32,23 +35,26 @@ const computedOptions = computed(
 
 type SelectType = (typeof options)[number]['value'];
 
-const selectType = defineModel('selectType', {
+const selectType = defineModel<SelectType>('selectType', {
   default: 'default',
-  type: String as PropType<SelectType>,
 });
 
 /**
  * color必须为hex颜色或者undefined
  */
-const color = defineModel('value', {
+const color = defineModel<string | undefined>('value', {
   default: undefined,
-  type: String as PropType<string | undefined>,
 });
 
 function handleSelectTypeChange(e: RadioChangeEvent) {
   // 必须给默认hex颜色 不能为空字符串
-  color.value = e.target.value === 'custom' ? '#000000' : undefined;
+  color.value = e.target.value === 'custom' ? '#1677ff' : undefined;
 }
+
+const { isDark } = usePreferences();
+const theme = computed(() => {
+  return isDark.value ? 'black' : 'white';
+});
 </script>
 
 <template>
@@ -69,15 +75,12 @@ function handleSelectTypeChange(e: RadioChangeEvent) {
       placeholder="请选择标签样式"
       @deselect="$emit('deselect')"
     />
-    <Input
+    <ColorPicker
       v-if="selectType === 'custom'"
-      v-model:value="color"
+      disable-alpha
-      class="flex-1"
+      format="hex"
-      disabled
+      v-model:pure-color="color"
-    >
+      :theme="theme"
-      <template #addonAfter>
+    />
-        <input v-model="color" class="rounded-lg" type="color" />
-      </template>
-    </Input>
   </div>
 </template>

apps/web-antd/src/views/system/dict/type/data.ts

@@ -71,7 +71,6 @@ export const modalSchema: FormSchemaGetter = () => [
   {
     component: 'Textarea',
     fieldName: 'remark',
-    formItemClass: 'items-start',
     label: '备注',
   },
 ];

apps/web-antd/src/views/system/dict/type/dict-type-modal.vue

@@ -11,6 +11,7 @@ import {
   dictTypeInfo,
   dictTypeUpdate,
 } from '#/api/system/dict/dict-type';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { modalSchema } from './data';
 
@@ -22,6 +23,7 @@ const title = computed(() => {
 });
 
 const [BasicForm, formApi] = useVbenForm({
+  layout: 'vertical',
   commonConfig: {
     labelWidth: 100,
   },
@@ -29,51 +31,63 @@ const [BasicForm, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 const [BasicModal, modalApi] = useVbenModal({
   fullscreenButton: false,
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
       return null;
     }
     modalApi.modalLoading(true);
+
     const { id } = modalApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
     if (isUpdate.value && id) {
       const record = await dictTypeInfo(id);
       await formApi.setValues(record);
     }
+    await markInitialized();
+
     modalApi.modalLoading(false);
   },
 });
 
 async function handleConfirm() {
   try {
-    modalApi.modalLoading(true);
+    modalApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? dictTypeUpdate(data) : dictTypeAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    modalApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    modalApi.modalLoading(false);
+    modalApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  modalApi.close();
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicModal :close-on-click-modal="false" :title="title">
+  <BasicModal :title="title">
     <BasicForm />
   </BasicModal>
 </template>

apps/web-antd/src/views/system/menu/menu-drawer.vue

@@ -12,6 +12,7 @@ import {
 
 import { useVbenForm } from '#/adapter/form';
 import { menuAdd, menuInfo, menuList, menuUpdate } from '#/api/system/menu';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 
@@ -88,14 +89,23 @@ async function setupMenuSelect() {
   ]);
 }
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
       return null;
     }
     drawerApi.drawerLoading(true);
+
     const { id, update } = drawerApi.getData() as ModalProps;
     isUpdate.value = update;
 
@@ -108,36 +118,39 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
         await formApi.setValues(record);
       }
     }
+    await markInitialized();
+
     drawerApi.drawerLoading(false);
   },
 });
 
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? menuUpdate(data) : menuAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  drawerApi.close();
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :title="title" class="w-[600px]">
     <BasicForm />
   </BasicDrawer>
 </template>

apps/web-antd/src/views/system/notice/notice-modal.vue

@@ -18,6 +18,7 @@ import { pick } from 'lodash-es';
 import { noticeAdd, noticeInfo, noticeUpdate } from '#/api/system/notice';
 import { Tinymce } from '#/components/tinymce';
 import { getDictOptions } from '#/utils/dict';
+import { useBeforeCloseDiff } from '#/utils/popup';
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -74,17 +75,29 @@ const { validate, validateInfos, resetFields } = Form.useForm(
   formRules,
 );
 
+function customFormValueGetter() {
+  return JSON.stringify(formData.value);
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: customFormValueGetter,
+    currentGetter: customFormValueGetter,
+  },
+);
+
 const [BasicModal, modalApi] = useVbenModal({
   class: 'w-[800px]',
   fullscreenButton: true,
-  closeOnClickModal: false,
+  onBeforeClose,
-  onClosed: handleCancel,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
       return null;
     }
     modalApi.modalLoading(true);
+
     const { id } = modalApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
     if (isUpdate.value && id) {
@@ -93,30 +106,33 @@ const [BasicModal, modalApi] = useVbenModal({
       const filterRecord = pick(record, Object.keys(defaultValues));
       formData.value = filterRecord;
     }
+    await markInitialized();
+
     modalApi.modalLoading(false);
   },
 });
 
 async function handleConfirm() {
   try {
-    modalApi.modalLoading(true);
+    modalApi.lock(true);
     await validate();
     // 可能会做数据处理 使用cloneDeep深拷贝
     const data = cloneDeep(formData.value);
     await (isUpdate.value ? noticeUpdate(data) : noticeAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    modalApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    modalApi.modalLoading(false);
+    modalApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  modalApi.close();
   formData.value = defaultValues;
   resetFields();
+  resetInitialized();
 }
 </script>
 

apps/web-antd/src/views/system/oss-config/oss-config-drawer.vue

@@ -13,6 +13,7 @@ import {
   ossConfigInfo,
   ossConfigUpdate,
 } from '#/api/system/oss-config';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 
@@ -33,27 +34,38 @@ const [BasicForm, formApi] = useVbenForm({
   wrapperClass: 'grid-cols-3',
 });
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
       return null;
     }
     drawerApi.drawerLoading(true);
+
     const { id } = drawerApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
     if (isUpdate.value && id) {
       const record = await ossConfigInfo(id);
       await formApi.setValues(record);
     }
+    await markInitialized();
+
     drawerApi.drawerLoading(false);
   },
 });
 
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
     /**
      * 这里解构出来的values只能获取到自定义校验参数的值
      * 需要自行调用formApi.getValues()获取表单值
@@ -64,23 +76,24 @@ async function handleConfirm() {
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? ossConfigUpdate(data) : ossConfigAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  drawerApi.close();
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[650px]">
+  <BasicDrawer :title="title" class="w-[650px]">
     <BasicForm>
       <template #tip>
         <div class="ml-7 w-full">

apps/web-antd/src/views/system/oss/index.vue

@@ -83,6 +83,9 @@ const gridOptions: VxeGridProps = {
       },
     },
   },
+  headerCellConfig: {
+    height: 44,
+  },
   cellConfig: {
     height: 65,
   },

apps/web-antd/src/views/system/post/post-drawer.vue

@@ -96,7 +96,7 @@ async function handleCancel() {
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :title="title" class="w-[600px]">
     <BasicForm />
   </BasicDrawer>
 </template>

apps/web-antd/src/views/system/role/role-auth-modal.vue

@@ -9,6 +9,7 @@ import { cloneDeep } from '@vben/utils';
 import { useVbenForm } from '#/adapter/form';
 import { roleDataScope, roleDeptTree, roleInfo } from '#/api/system/role';
 import { TreeSelectPanel } from '#/components/tree';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { authModalSchemas } from './data';
 
@@ -33,9 +34,25 @@ async function setupDeptTree(id: number | string) {
   deptTree.value = resp.depts;
 }
 
+async function customFormValueGetter() {
+  const v = await defaultFormValueGetter(formApi)();
+  // 获取勾选信息
+  const menuIds = deptSelectRef.value?.[0]?.getCheckedKeys() ?? [];
+  const mixStr = v + menuIds.join(',');
+  return mixStr;
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: customFormValueGetter,
+    currentGetter: customFormValueGetter,
+  },
+);
+
 const [BasicModal, modalApi] = useVbenModal({
   fullscreenButton: false,
-  onCancel: handleCancel,
+  onBeforeClose,
+  onCancel: handleClosed,
   onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
@@ -48,6 +65,7 @@ const [BasicModal, modalApi] = useVbenModal({
     setupDeptTree(id);
     const record = await roleInfo(id);
     await formApi.setValues(record);
+    markInitialized();
 
     modalApi.modalLoading(false);
   },
@@ -60,7 +78,7 @@ const deptSelectRef = ref();
 
 async function handleConfirm() {
   try {
-    modalApi.modalLoading(true);
+    modalApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
@@ -75,18 +93,19 @@ async function handleConfirm() {
       data.deptIds = [];
     }
     await roleDataScope(data);
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    modalApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    modalApi.modalLoading(false);
+    modalApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  modalApi.close();
   await formApi.resetForm();
+  resetInitialized();
 }
 
 /**
@@ -99,11 +118,7 @@ function handleCheckStrictlyChange(value: boolean) {
 </script>
 
 <template>
-  <BasicModal
+  <BasicModal class="min-h-[600px] w-[550px]" title="分配权限">
-    :close-on-click-modal="false"
-    class="min-h-[600px] w-[550px]"
-    title="分配权限"
-  >
     <BasicForm>
       <template #deptIds="slotProps">
         <TreeSelectPanel

apps/web-antd/src/views/system/role/role-drawer.vue

@@ -1,3 +1,6 @@
+<!--
+TODO: 这个页面要优化逻辑
+-->
 <script setup lang="ts">
 import type { MenuOption } from '#/api/system/menu/model';
 
@@ -11,6 +14,7 @@ import { useVbenForm } from '#/adapter/form';
 import { menuTreeSelect, roleMenuTreeSelect } from '#/api/system/menu';
 import { roleAdd, roleInfo, roleUpdate } from '#/api/system/role';
 import { MenuSelectTable } from '#/components/tree';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 
@@ -62,14 +66,31 @@ async function setupMenuTree(id?: number | string) {
   }
 }
 
+async function customFormValueGetter() {
+  const v = await defaultFormValueGetter(formApi)();
+  // 获取勾选信息
+  const menuIds = menuSelectRef.value?.getCheckedKeys?.() ?? [];
+  const mixStr = v + menuIds.join(',');
+  return mixStr;
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: customFormValueGetter,
+    currentGetter: customFormValueGetter,
+  },
+);
+
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
       return null;
     }
     drawerApi.drawerLoading(true);
+
     const { id } = drawerApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
 
@@ -79,6 +100,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
     }
     // init菜单 注意顺序要放在赋值record之后 内部watch会依赖record
     await setupMenuTree(id);
+    await markInitialized();
 
     drawerApi.drawerLoading(false);
   },
@@ -87,7 +109,8 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
 const menuSelectRef = ref<InstanceType<typeof MenuSelectTable>>();
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
+
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
@@ -99,17 +122,18 @@ async function handleConfirm() {
     data.menuIds = menuIds;
     await (isUpdate.value ? roleUpdate(data) : roleAdd(data));
     emit('reload');
-    await handleCancel();
+    resetInitialized();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  drawerApi.close();
   await formApi.resetForm();
+  resetInitialized();
 }
 
 /**
@@ -122,7 +146,7 @@ function handleMenuCheckStrictlyChange(value: boolean) {
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[800px]">
+  <BasicDrawer :title="title" class="w-[800px]">
     <BasicForm>
       <template #menuIds="slotProps">
         <div class="h-[600px] w-full">

apps/web-antd/src/views/system/tenant/tenant-drawer.vue

@@ -9,6 +9,7 @@ import { useVbenForm } from '#/adapter/form';
 import { tenantAdd, tenantInfo, tenantUpdate } from '#/api/system/tenant';
 import { packageSelectList } from '#/api/system/tenant-package';
 import { useTenantStore } from '#/store/tenant';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 
@@ -51,22 +52,33 @@ async function setupPackageSelect() {
   ]);
 }
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
       return null;
     }
     drawerApi.drawerLoading(true);
+
     const { id } = drawerApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
     // 初始化
     await setupPackageSelect();
+
     if (isUpdate.value && id) {
       const record = await tenantInfo(id);
       await formApi.setValues(record);
     }
+
     formApi.updateSchema([
       {
         fieldName: 'packageId',
@@ -75,6 +87,8 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
         },
       },
     ]);
+    await markInitialized();
+
     drawerApi.drawerLoading(false);
   },
 });
@@ -82,32 +96,33 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
 const tenantStore = useTenantStore();
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? tenantUpdate(data) : tenantAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
     // 重新加载租户信息
     tenantStore.initTenant();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  drawerApi.close();
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :title="title" class="w-[600px]">
     <BasicForm />
   </BasicDrawer>
 </template>

apps/web-antd/src/views/system/tenantPackage/data.ts

@@ -65,12 +65,6 @@ export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Textarea',
     fieldName: 'remark',
-    formItemClass: 'items-start',
     label: '备注',
   },
 ];
-
-// 租户管理 不可分配  只有superadmin有权限操作 分配了也没用
-export const excludeIds = [
-  6, 121, 122, 1606, 1607, 1608, 1609, 1610, 1611, 1612, 1613, 1614, 1615,
-];

apps/web-antd/src/views/system/tenantPackage/tenant-package-drawer.vue

@@ -17,6 +17,7 @@ import {
   packageUpdate,
 } from '#/api/system/tenant-package';
 import { MenuSelectTable } from '#/components/tree';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 
@@ -65,8 +66,24 @@ async function setupMenuTree(id?: number | string) {
   }
 }
 
+async function customFormValueGetter() {
+  const v = await defaultFormValueGetter(formApi)();
+  // 获取勾选信息
+  const menuIds = menuSelectRef.value?.getCheckedKeys?.() ?? [];
+  const mixStr = v + menuIds.join(',');
+  return mixStr;
+}
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: customFormValueGetter,
+    currentGetter: customFormValueGetter,
+  },
+);
+
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
@@ -84,6 +101,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
     }
     // init菜单 注意顺序要放在赋值record之后 内部watch会依赖record
     await setupMenuTree(id);
+    await markInitialized();
 
     drawerApi.drawerLoading(false);
   },
@@ -103,8 +121,9 @@ async function handleConfirm() {
     const data = cloneDeep(await formApi.getValues());
     data.menuIds = menuIds;
     await (isUpdate.value ? packageUpdate(data) : packageAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
@@ -112,9 +131,9 @@ async function handleConfirm() {
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  drawerApi.close();
   await formApi.resetForm();
+  resetInitialized();
 }
 
 /**
@@ -127,7 +146,7 @@ function handleMenuCheckStrictlyChange(value: boolean) {
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[800px]">
+  <BasicDrawer :title="title" class="w-[800px]">
     <BasicForm>
       <template #menuIds="slotProps">
         <div class="h-[600px] w-full">

apps/web-antd/src/views/system/tenantPackage/tree-item.tsx

@@ -1,44 +0,0 @@
-import type { PropType } from 'vue';
-
-import type { Menu } from '#/api/system/menu/model';
-
-import { computed, defineComponent } from 'vue';
-
-import { Tag } from 'ant-design-vue';
-
-export default defineComponent({
-  name: 'TreeItem',
-  props: {
-    data: {
-      required: true,
-      type: Object as PropType<Menu>,
-    },
-  },
-  setup(props, { expose }) {
-    expose();
-
-    interface TagProp {
-      color: string;
-      text: string;
-    }
-
-    const menuTagProp = computed<TagProp>(() => {
-      // 正则判断是否为链接
-      if (/^https?:\/\/[^\s/$.?#].\S*$/i.test(props.data.path)) {
-        return { color: 'pink', text: '外链' };
-      }
-      const type = props.data.menuType;
-      if (type === 'M') return { color: 'green', text: '目录' };
-      if (type === 'C') return { color: 'blue', text: '菜单' };
-      if (type === 'F') return { color: '', text: '按钮' };
-      return { color: 'error', text: '未知' };
-    });
-
-    return () => (
-      <div class="flex gap-[6px]">
-        <span>{props.data.menuName}</span>
-        <Tag color={menuTagProp.value.color}>{menuTagProp.value.text}</Tag>
-      </div>
-    );
-  },
-});

apps/web-antd/src/views/system/user/index.vue

@@ -113,6 +113,9 @@ const gridOptions: VxeGridProps = {
       },
     },
   },
+  headerCellConfig: {
+    height: 44,
+  },
   cellConfig: {
     height: 48,
   },

apps/web-antd/src/views/system/user/user-drawer.vue

@@ -18,6 +18,7 @@ import {
   userAdd,
   userUpdate,
 } from '#/api/system/user';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 import { authScopeOptions } from '#/views/system/role/data';
 
 import { drawerSchema } from './data';
@@ -134,8 +135,16 @@ async function loadDefaultPassword(update: boolean) {
   }
 }
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
@@ -149,6 +158,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
       return null;
     }
     drawerApi.drawerLoading(true);
+
     const { id } = drawerApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
     /** update时 禁用用户名修改 不显示密码框 */
@@ -186,10 +196,11 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
         fieldName: 'postIds',
       },
     ]);
-    // 部门选择 && 初始密码
+
-    await Promise.all([setupDeptSelect(), loadDefaultPassword(isUpdate.value)]);
+    // 部门选择、初始密码及用户相关操作并行处理
+    const promises = [setupDeptSelect(), loadDefaultPassword(isUpdate.value)];
     if (user) {
-      await Promise.all([
+      promises.push(
         // 添加基础信息
         formApi.setValues(user),
         // 添加角色和岗位
@@ -197,38 +208,43 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
         formApi.setFieldValue('roleIds', roleIds),
         // 更新时不会触发onSelect 需要手动调用
         setupPostOptions(user.deptId),
-      ]);
+      );
     }
+    // 并行处理 重构后会带来10-50ms的优化
+    await Promise.all(promises);
+    await markInitialized();
+
     drawerApi.drawerLoading(false);
   },
 });
 
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? userUpdate(data) : userAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  drawerApi.close();
+  formApi.resetForm();
-  await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :title="title" class="w-[600px]">
     <BasicForm />
   </BasicDrawer>
 </template>

apps/web-antd/src/views/workflow/category/category-modal.vue

@@ -17,6 +17,7 @@ import {
   categoryList,
   categoryUpdate,
 } from '#/api/workflow/category';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { modalSchema } from './data';
 
@@ -65,9 +66,17 @@ async function setupCategorySelect() {
   ]);
 }
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 const [BasicModal, modalApi] = useVbenModal({
   fullscreenButton: false,
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
@@ -89,6 +98,7 @@ const [BasicModal, modalApi] = useVbenModal({
       await formApi.setValues({ parentId });
     }
     await setupCategorySelect();
+    await markInitialized();
 
     modalApi.modalLoading(false);
   },
@@ -96,7 +106,7 @@ const [BasicModal, modalApi] = useVbenModal({
 
 async function handleConfirm() {
   try {
-    modalApi.modalLoading(true);
+    modalApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
@@ -104,27 +114,24 @@ async function handleConfirm() {
     // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? categoryUpdate(data) : categoryAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    modalApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    modalApi.modalLoading(false);
+    modalApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  modalApi.close();
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicModal
+  <BasicModal :title="title" class="min-h-[500px]">
-    :close-on-click-modal="false"
-    :title="title"
-    class="min-h-[500px]"
-  >
     <BasicForm />
   </BasicModal>
 </template>

apps/web-antd/src/views/workflow/processDefinition/index.vue

@@ -93,9 +93,14 @@ const gridOptions: VxeGridProps = {
       },
     },
   },
+  headerCellConfig: {
+    height: 44,
+  },
+  cellConfig: {
+    height: 100,
+  },
   rowConfig: {
     keyField: 'id',
-    height: 100,
   },
   id: 'workflow-definition-index',
 };

apps/web-antd/src/views/workflow/processDefinition/process-definition-modal.vue

@@ -12,6 +12,7 @@ import {
   workflowDefinitionInfo,
   workflowDefinitionUpdate,
 } from '#/api/workflow/definition';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { modalSchema } from './data';
 
@@ -65,8 +66,16 @@ async function setupCategorySelect() {
   ]);
 }
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 const [BasicDrawer, modalApi] = useVbenModal({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onCancel: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
@@ -83,6 +92,7 @@ const [BasicDrawer, modalApi] = useVbenModal({
       const record = await workflowDefinitionInfo(id);
       await formApi.setValues(record);
     }
+    await markInitialized();
 
     modalApi.modalLoading(false);
   },
@@ -90,7 +100,7 @@ const [BasicDrawer, modalApi] = useVbenModal({
 
 async function handleConfirm() {
   try {
-    modalApi.modalLoading(true);
+    modalApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
@@ -103,27 +113,23 @@ async function handleConfirm() {
       await workflowDefinitionAdd(data);
       emit('reload', 'add');
     }
-    await handleCancel();
+    resetInitialized();
+    modalApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    modalApi.modalLoading(false);
+    modalApi.lock(false);
   }
 }
 
-async function handleCancel() {
+async function handleClosed() {
-  modalApi.close();
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicDrawer
+  <BasicDrawer :fullscreen-button="false" :title="title" class="w-[550px]">
-    :close-on-click-modal="false"
-    :fullscreen-button="false"
-    :title="title"
-    class="w-[550px]"
-  >
     <div class="min-h-[400px]">
       <BasicForm />
     </div>

apps/web-antd/src/views/workflow/processInstance/index.vue

@@ -41,7 +41,7 @@ const formOptions: VbenFormProps = {
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
   handleReset: async () => {
     selectedCode.value = [];
-    // eslint-disable-next-line no-use-before-define
+
     const { formApi, reload } = tableApi;
     await formApi.resetForm();
     const formValues = formApi.form.values;
@@ -68,7 +68,7 @@ async function handleTypeChange(e: RadioChangeEvent) {
       break;
     }
   }
-  // eslint-disable-next-line no-use-before-define
+
   await tableApi.reload();
 }
 
@@ -103,9 +103,14 @@ const gridOptions: VxeGridProps = {
       },
     },
   },
+  headerCellConfig: {
+    height: 44,
+  },
+  cellConfig: {
+    height: 66,
+  },
   rowConfig: {
     keyField: 'id',
-    height: 66,
   },
   id: 'workflow-definition-index',
 };

apps/web-antd/src/views/演示使用自行删除/upload/index.vue

@@ -5,7 +5,7 @@ import type { CustomGetter } from '#/components/upload/src/props';
 
 import { h, ref } from 'vue';
 
-import { CodeMirror, Page } from '@vben/common-ui';
+import { CodeMirror, Page, useVbenModal } from '@vben/common-ui';
 
 import { useClipboard } from '@vueuse/core';
 import { Alert, Card, Modal, RadioGroup, Switch } from 'ant-design-vue';
@@ -14,6 +14,7 @@ import { FileUpload, ImageUpload } from '#/components/upload';
 
 import { useFileType, useImageType } from './hook';
 import sql from './insert.sql?raw';
+import uploadModal from './upload-modal.vue';
 
 const singleImageId = ref('1905537674682916865');
 const singleFileId = ref('1905191167882518529');
@@ -53,6 +54,10 @@ const customThumbnailUrl: CustomGetter<undefined> = () => {
 const { copy } = useClipboard({ legacy: true });
 
 const animationEnable = ref(false);
+
+const [UploadModal, uploadModalApi] = useVbenModal({
+  connectedComponent: uploadModal,
+});
 </script>
 
 <template>
@@ -63,6 +68,10 @@ const animationEnable = ref(false);
       <CodeMirror class="mt-2" v-model="sql" language="sql" readonly />
     </Card>
     <div class="grid grid-cols-2 gap-4">
+      <Card title="表单上传">
+        <a-button @click="uploadModalApi.open()">打开</a-button>
+        <UploadModal />
+      </Card>
       <Card title="单上传, 会绑定为string" size="small">
         <ImageUpload v-model:value="singleImageId" />
         当前绑定值: {{ singleImageId }}

apps/web-antd/src/views/演示使用自行删除/upload/upload-modal.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { h } from 'vue';
+
+import { JsonPreview, useVbenModal } from '@vben/common-ui';
+
+import { Modal, Space } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+const [BasicForm, formApi] = useVbenForm({
+  layout: 'vertical',
+  schema: [
+    {
+      label: '图片上传多图',
+      component: 'ImageUpload',
+      fieldName: 'ossIds',
+      componentProps: {
+        maxCount: 3,
+      },
+    },
+    {
+      label: '图片上传单图',
+      component: 'ImageUpload',
+      fieldName: 'ossId',
+      componentProps: {
+        maxCount: 1,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+async function getValues() {
+  try {
+    const v = await formApi.getValues();
+    console.log(v);
+
+    Modal.info({
+      content: () => h(JsonPreview, { data: v }),
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleAssign() {
+  const ids = ['1908761290673315841', '1907738568539332610'];
+  await formApi.setValues({
+    ossIds: ids,
+    ossId: ids[0],
+  });
+}
+
+const [BasicModal] = useVbenModal({
+  title: '上传',
+  footer: false,
+});
+</script>
+
+<template>
+  <BasicModal>
+    <div class="flex flex-col">
+      <Space>
+        <a-button @click="handleAssign">赋值</a-button>
+        <a-button @click="getValues">获取值</a-button>
+      </Space>
+      <BasicForm />
+    </div>
+  </BasicModal>
+</template>

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

@@ -43,6 +43,9 @@ export type BeforeCloseScope = {
   isConfirm: boolean;
 };
 
+/**
+ * alert 属性
+ */
 export type AlertProps = {
   /** 关闭前的回调，如果返回false，则终止关闭 */
   beforeClose?: (
@@ -50,6 +53,8 @@ export type AlertProps = {
   ) => boolean | Promise<boolean | undefined> | undefined;
   /** 边框 */
   bordered?: boolean;
+  /** 按钮对齐方式 */
+  buttonAlign?: 'center' | 'end' | 'start';
   /** 取消按钮的标题 */
   cancelText?: string;
   /** 是否居中显示 */
@@ -62,6 +67,8 @@ export type AlertProps = {
   content: Component | string;
   /** 弹窗内容的额外样式 */
   contentClass?: string;
+  /** 执行beforeClose回调期间，在内容区域显示一个loading遮罩*/
+  contentMasking?: boolean;
   /** 弹窗的图标（在标题的前面） */
   icon?: Component | IconType;
   /** 是否显示取消按钮 */
@@ -70,6 +77,25 @@ export type AlertProps = {
   title?: string;
 };
 
+/** prompt 属性 */
+export type PromptProps<T = any> = {
+  /** 关闭前的回调，如果返回false，则终止关闭 */
+  beforeClose?: (scope: {
+    isConfirm: boolean;
+    value: T | undefined;
+  }) => boolean | Promise<boolean | undefined> | undefined;
+  /** 用于接受用户输入的组件 */
+  component?: Component;
+  /** 输入组件的属性 */
+  componentProps?: Recordable<any>;
+  /** 输入组件的插槽 */
+  componentSlots?: Recordable<Component>;
+  /** 默认值 */
+  defaultValue?: T;
+  /** 输入组件的值属性名 */
+  modelPropName?: string;
+} & Omit<AlertProps, 'beforeClose'>;
+
 /**
  * 函数签名
  * alert和confirm的函数签名相同。

docs/src/components/common-ui/vben-vxe-table.md

@@ -167,6 +167,23 @@ vxeUI.renderer.add('CellLink', {
 
 当启用了表单搜索时，可以在toolbarConfig中配置`search`为`true`来让表格在工具栏区域显示一个搜索表单控制按钮。表格的所有以`form-`开头的命名插槽都会被传递给搜索表单。
 
+### 定制分隔条
+
+当你启用表单搜索时，在表单和表格之间会显示一个分隔条。这个分隔条使用了默认的组件背景色，并且横向贯穿整个Vben Vxe Table在视觉上融入了页面的默认背景中。如果你在Vben Vxe Table的外层包裹了一个不同背景色的容器（如将其放在一个Card内），默认的表单和表格之间的分隔条可能就显得格格不入了，下面的代码演示了如何定制这个分隔条。
+
+```ts
+const [Grid] = useVbenVxeGrid({
+  formOptions: {},
+  gridOptions: {},
+  // 完全移除分隔条
+  separator: false,
+  // 你也可以使用下面的代码来移除分隔条
+  // separator: { show: false },
+  // 或者使用下面的代码来改变分隔条的颜色
+  // separator: { backgroundColor: 'rgba(100,100,0,0.5)' },
+});
+```
+
 <DemoPreview dir="demos/vben-vxe-table/form" />
 
 ## 单元格编辑
@@ -231,15 +248,16 @@ useVbenVxeGrid 返回的第二个参数，是一个对象，包含了一些表
 
 所有属性都可以传入 `useVbenVxeGrid` 的第一个参数中。
 
-| 属性名         | 描述                 | 类型                |
+| 属性名 | 描述 | 类型 | 版本要求 |
-| -------------- | -------------------- | ------------------- |
+| --- | --- | --- | --- |
-| tableTitle     | 表格标题             | `string`            |
+| tableTitle | 表格标题 | `string` | - |
-| tableTitleHelp | 表格标题帮助信息     | `string`            |
+| tableTitleHelp | 表格标题帮助信息 | `string` | - |
-| gridClass      | grid组件的class      | `string`            |
+| gridClass | grid组件的class | `string` | - |
-| gridOptions    | grid组件的参数       | `VxeTableGridProps` |
+| gridOptions | grid组件的参数 | `VxeTableGridProps` | - |
-| gridEvents     | grid组件的触发的事件 | `VxeGridListeners`  |
+| gridEvents | grid组件的触发的事件 | `VxeGridListeners` | - |
-| formOptions    | 表单参数             | `VbenFormProps`     |
+| formOptions | 表单参数 | `VbenFormProps` | - |
-| showSearchForm | 是否显示搜索表单     | `boolean`           |
+| showSearchForm | 是否显示搜索表单 | `boolean` | - |
+| separator | 搜索表单与表格主体之间的分隔条 | `boolean\|SeparatorOptions` | >5.5.4 |
 
 ## Slots
 

docs/src/demos/vben-alert/alert/index.vue

@@ -3,7 +3,7 @@ import { h } from 'vue';
 
 import { alert, VbenButton } from '@vben/common-ui';
 
-import { Empty } from 'ant-design-vue';
+import { Result } from 'ant-design-vue';
 
 function showAlert() {
   alert('This is an alert message');
@@ -18,7 +18,12 @@ function showIconAlert() {
 
 function showCustomAlert() {
   alert({
-    content: h(Empty, { description: '什么都没有' }),
+    buttonAlign: 'center',
+    content: h(Result, {
+      status: 'success',
+      subTitle: '已成功创建订单。订单ID：2017182818828182881',
+      title: '操作成功',
+    }),
   });
 }
 </script>

docs/src/demos/vben-alert/prompt/index.vue

@@ -1,7 +1,10 @@
 <script lang="ts" setup>
+import { h } from 'vue';
+
 import { alert, prompt, VbenButton } from '@vben/common-ui';
 
-import { VbenSelect } from '@vben-core/shadcn-ui';
+import { Input, RadioGroup } from 'ant-design-vue';
+import { BadgeJapaneseYen } from 'lucide-vue-next';
 
 function showPrompt() {
   prompt({
@@ -17,25 +20,62 @@ function showPrompt() {
 
 function showSelectPrompt() {
   prompt({
-    component: VbenSelect,
+    component: Input,
     componentProps: {
+      placeholder: '请输入',
+      prefix: '充值金额',
+      type: 'number',
+    },
+    componentSlots: {
+      addonAfter: () => h(BadgeJapaneseYen),
+    },
+    content: '此弹窗演示了如何使用componentSlots传递自定义插槽',
+    icon: 'question',
+    modelPropName: 'value',
+  }).then((val) => {
+    if (val) alert(`你输入的是${val}`);
+  });
+}
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function showAsyncPrompt() {
+  prompt({
+    async beforeClose(scope) {
+      console.log(scope);
+      if (scope.isConfirm) {
+        if (scope.value) {
+          // 模拟异步操作，如果不成功，可以返回false
+          await sleep(2000);
+        } else {
+          alert('请选择一个选项');
+          return false;
+        }
+      }
+    },
+    component: RadioGroup,
+    componentProps: {
+      class: 'flex flex-col',
       options: [
         { label: 'Option 1', value: 'option1' },
         { label: 'Option 2', value: 'option2' },
         { label: 'Option 3', value: 'option3' },
       ],
-      placeholder: '请选择',
     },
-    content: 'This is an alert message with icon',
+    content: '选择一个选项后再点击[确认]',
     icon: 'question',
+    modelPropName: 'value',
   }).then((val) => {
-    alert(`你选择的是${val}`);
+    alert(`${val} 已设置。`);
   });
 }
 </script>
 <template>
   <div class="flex gap-4">
     <VbenButton @click="showPrompt">Prompt</VbenButton>
-    <VbenButton @click="showSelectPrompt">Confirm With Select</VbenButton>
+    <VbenButton @click="showSelectPrompt">Prompt With Select</VbenButton>
+    <VbenButton @click="showAsyncPrompt">Prompt With Async</VbenButton>
   </div>
 </template>

packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts

@@ -1,10 +1,10 @@
-import type { Component } from 'vue';
+import type { Component, VNode } from 'vue';
 
 import type { Recordable } from '@vben-core/typings';
 
-import type { AlertProps, BeforeCloseScope } from './alert';
+import type { AlertProps, BeforeCloseScope, PromptProps } from './alert';
 
-import { h, ref, render } from 'vue';
+import { h, nextTick, ref, render } from 'vue';
 
 import { useSimpleLocale } from '@vben-core/composables';
 import { Input } from '@vben-core/shadcn-ui';
@@ -130,40 +130,58 @@ export function vbenConfirm(
 }
 
 export async function vbenPrompt<T = any>(
-  options: Omit<AlertProps, 'beforeClose'> & {
+  options: PromptProps<T>,
-    beforeClose?: (scope: {
-      isConfirm: boolean;
-      value: T | undefined;
-    }) => boolean | Promise<boolean | undefined> | undefined;
-    component?: Component;
-    componentProps?: Recordable<any>;
-    defaultValue?: T;
-    modelPropName?: string;
-  },
 ): Promise<T | undefined> {
   const {
     component: _component,
     componentProps: _componentProps,
+    componentSlots,
     content,
     defaultValue,
     modelPropName: _modelPropName,
     ...delegated
   } = options;
-  const contents: Component[] = [];
+
   const modelValue = ref<T | undefined>(defaultValue);
+  const inputComponentRef = ref<null | VNode>(null);
+  const staticContents: Component[] = [];
+
   if (isString(content)) {
-    contents.push(h('span', content));
+    staticContents.push(h('span', content));
-  } else {
+  } else if (content) {
-    contents.push(content);
+    staticContents.push(content as Component);
   }
-  const componentProps = _componentProps || {};
+
   const modelPropName = _modelPropName || 'modelValue';
-  componentProps[modelPropName] = modelValue.value;
+  const componentProps = { ..._componentProps };
-  componentProps[`onUpdate:${modelPropName}`] = (val: any) => {
+
-    modelValue.value = val;
+  // 每次渲染时都会重新计算的内容函数
+  const contentRenderer = () => {
+    const currentProps = { ...componentProps };
+
+    // 设置当前值
+    currentProps[modelPropName] = modelValue.value;
+
+    // 设置更新处理函数
+    currentProps[`onUpdate:${modelPropName}`] = (val: T) => {
+      modelValue.value = val;
+    };
+
+    // 创建输入组件
+    inputComponentRef.value = h(
+      _component || Input,
+      currentProps,
+      componentSlots,
+    );
+
+    // 返回包含静态内容和输入组件的数组
+    return h(
+      'div',
+      { class: 'flex flex-col gap-2' },
+      { default: () => [...staticContents, inputComponentRef.value] },
+    );
   };
-  const componentRef = h(_component || Input, componentProps);
+
-  contents.push(componentRef);
   const props: AlertProps & Recordable<any> = {
     ...delegated,
     async beforeClose(scope: BeforeCloseScope) {
@@ -174,23 +192,46 @@ export async function vbenPrompt<T = any>(
         });
       }
     },
-    content: h(
+    // 使用函数形式，每次渲染都会重新计算内容
-      'div',
+    content: contentRenderer,
-      { class: 'flex flex-col gap-2' },
+    contentMasking: true,
-      { default: () => contents },
+    async onOpened() {
-    ),
+      await nextTick();
-    onOpened() {
+      const componentRef: null | VNode = inputComponentRef.value;
-      // 组件挂载完成后，自动聚焦到输入组件
+      if (componentRef) {
-      if (
+        if (
-        componentRef.component?.exposed &&
+          componentRef.component?.exposed &&
-        isFunction(componentRef.component.exposed.focus)
+          isFunction(componentRef.component.exposed.focus)
-      ) {
+        ) {
-        componentRef.component.exposed.focus();
+          componentRef.component.exposed.focus();
-      } else if (componentRef.el && isFunction(componentRef.el.focus)) {
+        } else {
-        componentRef.el.focus();
+          if (componentRef.el) {
+            if (
+              isFunction(componentRef.el.focus) &&
+              ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(
+                componentRef.el.tagName,
+              )
+            ) {
+              componentRef.el.focus();
+            } else if (isFunction(componentRef.el.querySelector)) {
+              const focusableElement = componentRef.el.querySelector(
+                'input, select, textarea, button',
+              );
+              if (focusableElement && isFunction(focusableElement.focus)) {
+                focusableElement.focus();
+              }
+            } else if (
+              componentRef.el.nextElementSibling &&
+              isFunction(componentRef.el.nextElementSibling.focus)
+            ) {
+              componentRef.el.nextElementSibling.focus();
+            }
+          }
+        }
       }
     },
   };
+
   await vbenConfirm(props);
   return modelValue.value;
 }

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

@@ -1,4 +1,6 @@
-import type { Component } from 'vue';
+import type { Component, VNode, VNodeArrayChildren } from 'vue';
+
+import type { Recordable } from '@vben-core/typings';
 
 export type IconType = 'error' | 'info' | 'question' | 'success' | 'warning';
 
@@ -13,6 +15,11 @@ export type AlertProps = {
   ) => boolean | Promise<boolean | undefined> | undefined;
   /** 边框 */
   bordered?: boolean;
+  /**
+   * 按钮对齐方式
+   * @default 'end'
+   */
+  buttonAlign?: 'center' | 'end' | 'start';
   /** 取消按钮的标题 */
   cancelText?: string;
   /** 是否居中显示 */
@@ -25,6 +32,8 @@ export type AlertProps = {
   content: Component | string;
   /** 弹窗内容的额外样式 */
   contentClass?: string;
+  /** 执行beforeClose回调期间，在内容区域显示一个loading遮罩*/
+  contentMasking?: boolean;
   /** 弹窗的图标（在标题的前面） */
   icon?: Component | IconType;
   /** 是否显示取消按钮 */
@@ -32,3 +41,26 @@ export type AlertProps = {
   /** 弹窗标题 */
   title?: string;
 };
+
+/** Prompt属性 */
+export type PromptProps<T = any> = {
+  /** 关闭前的回调，如果返回false，则终止关闭 */
+  beforeClose?: (scope: {
+    isConfirm: boolean;
+    value: T | undefined;
+  }) => boolean | Promise<boolean | undefined> | undefined;
+  /** 用于接受用户输入的组件 */
+  component?: Component;
+  /** 输入组件的属性 */
+  componentProps?: Recordable<any>;
+  /** 输入组件的插槽 */
+  componentSlots?:
+    | (() => any)
+    | Recordable<unknown>
+    | VNode
+    | VNodeArrayChildren;
+  /** 默认值 */
+  defaultValue?: T;
+  /** 输入组件的值属性名 */
+  modelPropName?: string;
+} & Omit<AlertProps, 'beforeClose'>;

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

@@ -30,6 +30,7 @@ import { cn } from '@vben-core/shared/utils';
 
 const props = withDefaults(defineProps<AlertProps>(), {
   bordered: true,
+  buttonAlign: 'end',
   centered: true,
   containerClass: 'w-[520px]',
 });
@@ -154,9 +155,9 @@ async function handleOpenChange(val: boolean) {
           <div class="m-4 mb-6 min-h-[30px]">
             <VbenRenderContent :content="content" render-br />
           </div>
-          <VbenLoading v-if="loading" :spinning="loading" />
+          <VbenLoading v-if="loading && contentMasking" :spinning="loading" />
         </AlertDialogDescription>
-        <div class="flex justify-end gap-x-2">
+        <div class="flex justify-end gap-x-2" :class="`justify-${buttonAlign}`">
           <AlertDialogCancel v-if="showCancel" :disabled="loading">
             <component
               :is="components.DefaultButton || VbenButton"

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

@@ -88,10 +88,10 @@ export class DrawerApi {
   /**
    * 关闭弹窗
    */
-  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,

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

@@ -1,6 +1,6 @@
 import type { Component, Ref } from 'vue';
 
-import type { ClassType } from '@vben-core/typings';
+import type { ClassType, MaybePromise } from '@vben-core/typings';
 
 import type { DrawerApi } from './drawer-api';
 
@@ -151,7 +151,7 @@ export interface DrawerApiOptions extends DrawerState {
    * 关闭前的回调，返回 false 可以阻止关闭
    * @returns
    */
-  onBeforeClose?: () => void;
+  onBeforeClose?: () => MaybePromise<boolean | undefined>;
   /**
    * 点击取消按钮的回调
    */

packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue

@@ -6,11 +6,11 @@ import type { ValueType, VbenButtonGroupProps } from './button';
 import { computed, ref, watch } from 'vue';
 
 import { Circle, CircleCheckBig, LoaderCircle } from '@vben-core/icons';
-import { VbenRenderContent } from '@vben-core/shadcn-ui';
 import { cn, isFunction } from '@vben-core/shared/utils';
 
 import { objectOmit } from '@vueuse/core';
 
+import { VbenRenderContent } from '../render-content';
 import VbenButtonGroup from './button-group.vue';
 import Button from './button.vue';
 

packages/effects/common-ui/package.json

@@ -17,6 +17,14 @@
     ".": {
       "types": "./src/index.ts",
       "default": "./src/index.ts"
+    },
+    "./es/tippy": {
+      "types": "./src/components/tippy/index.ts",
+      "default": "./src/components/tippy/index.ts"
+    },
+    "./es/loading": {
+      "types": "./src/components/loading/index.ts",
+      "default": "./src/components/loading/index.ts"
     }
   },
   "dependencies": {

packages/effects/layouts/src/basic/content/content.vue

@@ -5,9 +5,11 @@ import type {
   RouteLocationNormalizedLoadedGeneric,
 } from 'vue-router';
 
+import { computed } from 'vue';
+import { RouterView } from 'vue-router';
+
 import { preferences, usePreferences } from '@vben/preferences';
 import { storeToRefs, useTabbarStore } from '@vben/stores';
-import { RouterView } from 'vue-router';
 
 import { IFrameRouterView } from '../../iframe';
 
@@ -19,6 +21,15 @@ const { keepAlive } = usePreferences();
 const { getCachedTabs, getExcludeCachedTabs, renderRouteView } =
   storeToRefs(tabbarStore);
 
+/**
+ * 是否使用动画
+ */
+const getEnabledTransition = computed(() => {
+  const { transition } = preferences;
+  const transitionName = transition.name;
+  return transitionName && transition.enable;
+});
+
 // 页面切换动画
 function getTransitionName(_route: RouteLocationNormalizedLoaded) {
   // 如果偏好设置未设置，则不使用动画
@@ -89,7 +100,12 @@ function transformComponent(
   <div class="relative h-full">
     <IFrameRouterView />
     <RouterView v-slot="{ Component, route }">
-      <Transition :name="getTransitionName(route)" appear mode="out-in">
+      <Transition
+        v-if="getEnabledTransition"
+        :name="getTransitionName(route)"
+        appear
+        mode="out-in"
+      >
         <KeepAlive
           v-if="keepAlive"
           :exclude="getExcludeCachedTabs"
@@ -108,6 +124,25 @@ function transformComponent(
           :key="route.fullPath"
         />
       </Transition>
+      <template v-else>
+        <KeepAlive
+          v-if="keepAlive"
+          :exclude="getExcludeCachedTabs"
+          :include="getCachedTabs"
+        >
+          <component
+            :is="transformComponent(Component, route)"
+            v-if="renderRouteView"
+            v-show="!route.meta.iframeSrc"
+            :key="route.fullPath"
+          />
+        </KeepAlive>
+        <component
+          :is="Component"
+          v-else-if="renderRouteView"
+          :key="route.fullPath"
+        />
+      </template>
     </RouterView>
   </div>
 </template>

packages/effects/plugins/src/vxe-table/style.css

@@ -46,9 +46,13 @@
   --vxe-ui-table-row-current-background-color: hsl(var(--accent));
   --vxe-ui-table-row-hover-current-background-color: hsl(var(--accent-hover));
 
-  height: auto !important;
-
   /* --vxe-ui-table-fixed-scrolling-box-shadow-color: rgb(0 0 0 / 80%); */
+
+  /** 右上角toolbar按钮色/翻页主题色保持一致 */
+  --vxe-ui-font-primary-lighten-color: hsl(var(--primary-500));
+  --vxe-ui-font-primary-darken-color: hsl(var(--primary-600));
+
+  height: auto !important;
 }
 
 html[data-vxe-ui-theme='dark'] .vxe-grid {

packages/effects/plugins/src/vxe-table/types.ts

@@ -1,6 +1,3 @@
-import type { ClassType, DeepPartial } from '@vben/types';
-import type { VbenFormProps } from '@vben-core/form-ui';
-import type { Ref } from 'vue';
 import type {
   VxeGridListeners,
   VxeGridPropTypes,
@@ -8,6 +5,12 @@ import type {
   VxeUIExport,
 } from 'vxe-table';
 
+import type { Ref } from 'vue';
+
+import type { ClassType, DeepPartial } from '@vben/types';
+
+import type { VbenFormProps } from '@vben-core/form-ui';
+
 import type { VxeGridApi } from './api';
 
 import { useVbenForm } from '@vben-core/form-ui';
@@ -28,6 +31,10 @@ export interface VxeTableGridOptions<T = any> extends VxeTableGridProps<T> {
   toolbarConfig?: ToolbarConfigOptions;
 }
 
+export interface SeparatorOptions {
+  show?: boolean;
+  backgroundColor?: string;
+}
 export interface VxeGridProps {
   /**
    * 标题
@@ -61,13 +68,17 @@ export interface VxeGridProps {
    * 显示搜索表单
    */
   showSearchForm?: boolean;
+  /**
+   * 搜索表单与表格主体之间的分隔条
+   */
+  separator?: boolean | SeparatorOptions;
 }
 
-export type ExtendedVxeGridApi = {
+export type ExtendedVxeGridApi = VxeGridApi & {
   useStore: <T = NoInfer<VxeGridProps>>(
     selector?: (state: NoInfer<VxeGridProps>) => T,
   ) => Readonly<Ref<T>>;
-} & VxeGridApi;
+};
 
 export interface SetupVxeTable {
   configVxeTable: (ui: VxeUIExport) => void;

packages/effects/plugins/src/vxe-table/use-vxe-grid.vue

@@ -29,7 +29,13 @@ import { usePriorityValues } from '@vben/hooks';
 import { EmptyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { usePreferences } from '@vben/preferences';
-import { cloneDeep, cn, isEqual, mergeWithArrayOverride } from '@vben/utils';
+import {
+  cloneDeep,
+  cn,
+  isBoolean,
+  isEqual,
+  mergeWithArrayOverride,
+} from '@vben/utils';
 
 import { VbenHelpTooltip, VbenLoading } from '@vben-core/shadcn-ui';
 
@@ -67,10 +73,30 @@ const {
   tableTitle,
   tableTitleHelp,
   showSearchForm,
+  separator,
 } = usePriorityValues(props, state);
 
 const { isMobile } = usePreferences();
-
+const isSeparator = computed(() => {
+  if (
+    !formOptions.value ||
+    showSearchForm.value === false ||
+    separator.value === false
+  ) {
+    return false;
+  }
+  if (separator.value === true || separator.value === undefined) {
+    return true;
+  }
+  return separator.value.show !== false;
+});
+const separatorBg = computed(() => {
+  return !separator.value ||
+    isBoolean(separator.value) ||
+    !separator.value.backgroundColor
+    ? undefined
+    : separator.value.backgroundColor;
+});
 const slots: SetupContext['slots'] = useSlots();
 
 const [Form, formApi] = useTableForm({
@@ -380,7 +406,18 @@ onUnmounted(() => {
         <div
           v-if="formOptions"
           v-show="showSearchForm !== false"
-          :class="cn('relative rounded py-3', isCompactForm ? 'pb-8' : 'pb-4')"
+          :class="
+            cn(
+              'relative rounded py-3',
+              isCompactForm
+                ? isSeparator
+                  ? 'pb-8'
+                  : 'pb-4'
+                : isSeparator
+                  ? 'pb-4'
+                  : 'pb-0',
+            )
+          "
         >
           <slot name="form">
             <Form>
@@ -409,6 +446,10 @@ onUnmounted(() => {
             </Form>
           </slot>
           <div
+            v-if="isSeparator"
+            :style="{
+              ...(separatorBg ? { backgroundColor: separatorBg } : undefined),
+            }"
             class="bg-background-deep z-100 absolute -left-2 bottom-1 h-2 w-[calc(100%+1rem)] overflow-hidden md:bottom-2 md:h-3"
           ></div>
         </div>

packages/utils/src/helpers/get-popup-container.ts

@@ -12,20 +12,55 @@ export function getPopupContainer(node?: HTMLElement): HTMLElement {
 /**
  * VxeTable专用弹窗层
  * 解决问题: https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IB1DM3
- * @param _node 触发的元素
+ * @param node 触发的元素
+ * @param tableId 表格ID，用于区分不同表格（可选）
  * @returns 挂载节点
  */
-export function getVxePopupContainer(_node?: HTMLElement): HTMLElement {
+export function getVxePopupContainer(
+  node?: HTMLElement,
+  tableId?: string,
+): HTMLElement {
+  if (!node) return document.body;
+
+  // 检查是否在固定列内
+  const isInFixedColumn =
+    node.closest('.vxe-table--fixed-wrapper') ||
+    node.closest('.vxe-table--fixed-left-wrapper') ||
+    node.closest('.vxe-table--fixed-right-wrapper');
+
+  // 如果在固定列内，则挂载到固定列容器
+  if (isInFixedColumn) {
+    // 优先查找表格容器及父级容器
+    const tableContainer =
+      // 查找通用固定列容器
+      node.closest('.vxe-table--fixed-wrapper') ||
+      // 查找固定列容器（左侧固定列）
+      node.closest('.vxe-table--fixed-left-wrapper') ||
+      // 查找固定列容器（右侧固定列）
+      node.closest('.vxe-table--fixed-right-wrapper');
+
+    // 如果指定了tableId，可以查找特定ID的表格
+    if (tableId && tableContainer) {
+      const specificTable = tableContainer.closest(
+        `[data-table-id="${tableId}"]`,
+      );
+      if (specificTable) {
+        return specificTable as HTMLElement;
+      }
+    }
+
+    return tableContainer as HTMLElement;
+  }
+
   /**
-   * 需要区分是否为固定列情况 如果为固定列返回parent会导致展开宽度不正常
+   * 设置行高度需要特殊处理
-   * 如果是固定列的情况直接返回body 但是这样不会跟随滚动(个人认为这属于极限场景)
-   * 如果有更好的办法解决 请告知
    */
-  // if (_node?.closest('td.fixed--width')) {
+  const fixedHeightElement = node.closest('td.col--cs-height');
-  //   return document.body;
+  if (fixedHeightElement) {
-  // }
+    // 默认为hidden 显示异常
-  /**
+    (fixedHeightElement as HTMLTableCellElement).style.overflow = 'visible';
-   * 兼容以前代码 先返回body 这样会造成无法跟随滚动
+  }
-   */
+
-  return _node?.parentElement ?? document.body;
+  // 兜底方案：使用元素的父节点或文档体
+  return (node.parentNode as HTMLElement) || document.body;
 }

playground/src/adapter/component/index.ts

@@ -8,35 +8,64 @@ import type { Component } from 'vue';
 import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import { defineComponent, getCurrentInstance, h, ref } from 'vue';
+import {
+  defineAsyncComponent,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+} from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import {
+import { notification } from 'ant-design-vue';
-  AutoComplete,
+
-  Button,
+const AutoComplete = defineAsyncComponent(
-  Checkbox,
+  () => import('ant-design-vue/es/auto-complete'),
-  CheckboxGroup,
+);
-  DatePicker,
+const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
-  Divider,
+const Checkbox = defineAsyncComponent(
-  Input,
+  () => import('ant-design-vue/es/checkbox'),
-  InputNumber,
+);
-  InputPassword,
+const CheckboxGroup = defineAsyncComponent(() =>
-  Mentions,
+  import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
-  notification,
+);
-  Radio,
+const DatePicker = defineAsyncComponent(
-  RadioGroup,
+  () => import('ant-design-vue/es/date-picker'),
-  RangePicker,
+);
-  Rate,
+const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider'));
-  Select,
+const Input = defineAsyncComponent(() => import('ant-design-vue/es/input'));
-  Space,
+const InputNumber = defineAsyncComponent(
-  Switch,
+  () => import('ant-design-vue/es/input-number'),
-  Textarea,
+);
-  TimePicker,
+const InputPassword = defineAsyncComponent(() =>
-  TreeSelect,
+  import('ant-design-vue/es/input').then((res) => res.InputPassword),
-  Upload,
+);
-} from 'ant-design-vue';
+const Mentions = defineAsyncComponent(
+  () => import('ant-design-vue/es/mentions'),
+);
+const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio'));
+const RadioGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
+);
+const RangePicker = defineAsyncComponent(() =>
+  import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
+);
+const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate'));
+const Select = defineAsyncComponent(() => import('ant-design-vue/es/select'));
+const Space = defineAsyncComponent(() => import('ant-design-vue/es/space'));
+const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch'));
+const Textarea = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.Textarea),
+);
+const TimePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/time-picker'),
+);
+const TreeSelect = defineAsyncComponent(
+  () => import('ant-design-vue/es/tree-select'),
+);
+const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
 
 const withDefaultPlaceholder = <T extends Component>(
   component: T,

playground/src/bootstrap.ts

@@ -1,14 +1,12 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
-import { initTippy, registerLoadingDirective } from '@vben/common-ui';
+import { registerLoadingDirective } from '@vben/common-ui';
-import { MotionPlugin } from '@vben/plugins/motion';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
 import '@vben/styles/antd';
 
-import { VueQueryPlugin } from '@tanstack/vue-query';
 import { useTitle } from '@vueuse/core';
 
 import { $t, setupI18n } from '#/locales';
@@ -21,13 +19,13 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
-  // // 设置弹窗的默认配置
+  // 设置弹窗的默认配置
   // setDefaultModalProps({
   //   fullscreenButton: false,
   // });
-  // // 设置抽屉的默认配置
+  // 设置抽屉的默认配置
   // setDefaultDrawerProps({
-  //   // zIndex: 1020,
+  //   zIndex: 1020,
   // });
 
   const app = createApp(App);
@@ -48,15 +46,18 @@ async function bootstrap(namespace: string) {
   registerAccessDirective(app);
 
   // 初始化 tippy
+  const { initTippy } = await import('@vben/common-ui/es/tippy');
   initTippy(app);
 
   // 配置路由及路由守卫
   app.use(router);
 
   // 配置@tanstack/vue-query
+  const { VueQueryPlugin } = await import('@tanstack/vue-query');
   app.use(VueQueryPlugin);
 
   // 配置Motion插件
+  const { MotionPlugin } = await import('@vben/plugins/motion');
   app.use(MotionPlugin);
 
   // 动态更新标题

playground/src/router/routes/core.ts

@@ -2,10 +2,10 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
 
-import { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
-import Login from '#/views/_core/authentication/login.vue';
 
+const BasicLayout = () => import('#/layouts/basic.vue');
+const AuthPageLayout = () => import('#/layouts/auth.vue');
 /** 全局404页面 */
 const fallbackNotFoundRoute: RouteRecordRaw = {
   component: () => import('#/views/_core/fallback/not-found.vue'),
@@ -50,7 +50,7 @@ const coreRoutes: RouteRecordRaw[] = [
       {
         name: 'Login',
         path: 'login',
-        component: Login,
+        component: () => import('#/views/_core/authentication/login.vue'),
         meta: {
           title: $t('page.auth.login'),
         },

pnpm-workspace.yaml

@@ -21,22 +21,22 @@ catalog:
   '@commitlint/cli': ^19.8.0
   '@commitlint/config-conventional': ^19.8.0
   '@ctrl/tinycolor': ^4.1.0
-  '@eslint/js': ^9.23.0
+  '@eslint/js': ^9.24.0
   '@faker-js/faker': ^9.6.0
-  '@iconify/json': ^2.2.323
+  '@iconify/json': ^2.2.324
   '@iconify/tailwind': ^1.2.0
   '@iconify/vue': ^4.3.0
-  '@intlify/core-base': ^11.1.2
+  '@intlify/core-base': ^11.1.3
   '@intlify/unplugin-vue-i18n': ^6.0.5
   '@jspm/generator': ^2.5.1
   '@manypkg/get-packages': ^2.2.2
-  '@nolebase/vitepress-plugin-git-changelog': ^2.15.1
+  '@nolebase/vitepress-plugin-git-changelog': ^2.16.0
   '@playwright/test': ^1.51.1
-  '@pnpm/workspace.read-manifest': ^1000.1.2
+  '@pnpm/workspace.read-manifest': ^1000.1.3
   '@stylistic/stylelint-plugin': ^3.1.2
   '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
   '@tailwindcss/typography': ^0.5.16
-  '@tanstack/vue-query': ^5.71.1
+  '@tanstack/vue-query': ^5.72.0
   '@tanstack/vue-store': ^0.7.0
   '@types/archiver': ^6.0.3
   '@types/eslint': ^9.6.1
@@ -46,14 +46,14 @@ catalog:
   '@types/lodash.get': ^4.4.9
   '@types/lodash.isequal': ^4.5.8
   '@types/lodash.set': ^4.3.9
-  '@types/node': ^22.13.17
+  '@types/node': ^22.14.0
   '@types/nprogress': ^0.2.3
   '@types/postcss-import': ^14.0.3
   '@types/qrcode': ^1.5.5
   '@types/qs': ^6.9.18
   '@types/sortablejs': ^1.15.8
-  '@typescript-eslint/eslint-plugin': ^8.29.0
+  '@typescript-eslint/eslint-plugin': ^8.29.1
-  '@typescript-eslint/parser': ^8.29.0
+  '@typescript-eslint/parser': ^8.29.1
   '@vee-validate/zod': ^4.15.0
   '@vite-pwa/vitepress': ^0.5.4
   '@vitejs/plugin-vue': ^5.2.3
@@ -88,17 +88,17 @@ catalog:
   dotenv: ^16.4.7
   echarts: ^5.6.0
   element-plus: ^2.9.7
-  eslint: ^9.23.0
+  eslint: ^9.24.0
-  eslint-config-turbo: ^2.4.4
+  eslint-config-turbo: ^2.5.0
   eslint-plugin-command: ^0.2.7
   eslint-plugin-eslint-comments: ^3.2.0
-  eslint-plugin-import-x: ^4.10.0
+  eslint-plugin-import-x: ^4.10.2
   eslint-plugin-jsdoc: ^50.6.9
   eslint-plugin-jsonc: ^2.20.0
   eslint-plugin-n: ^17.17.0
   eslint-plugin-no-only-tests: ^3.3.0
   eslint-plugin-perfectionist: ^4.11.0
-  eslint-plugin-prettier: ^5.2.5
+  eslint-plugin-prettier: ^5.2.6
   eslint-plugin-regexp: ^2.7.0
   eslint-plugin-unicorn: ^56.0.1
   eslint-plugin-unused-imports: ^4.1.4
@@ -146,9 +146,9 @@ catalog:
   rimraf: ^6.0.1
   rollup: ^4.39.0
   rollup-plugin-visualizer: ^5.14.0
-  sass: ^1.86.1
+  sass: ^1.86.3
   sortablejs: ^1.15.6
-  stylelint: ^16.17.0
+  stylelint: ^16.18.0
   stylelint-config-recess-order: ^5.1.1
   stylelint-config-recommended: ^14.0.1
   stylelint-config-recommended-scss: ^14.1.0
@@ -162,12 +162,12 @@ catalog:
   tailwindcss-animate: ^1.0.7
   theme-colors: ^0.1.0
   tippy.js: ^6.2.5
-  turbo: ^2.4.4
+  turbo: ^2.5.0
-  typescript: ^5.8.2
+  typescript: ^5.8.3
   unbuild: ^3.5.0
   unplugin-element-plus: ^0.9.1
   vee-validate: ^4.15.0
-  vite: ^6.2.4
+  vite: ^6.2.5
   vite-plugin-compression: ^0.5.1
   vite-plugin-dts: ^4.5.3
   vite-plugin-html: ^3.2.2
@@ -179,12 +179,12 @@ catalog:
   vitest: ^2.1.9
   vue: ^3.5.13
   vue-eslint-parser: ^9.4.3
-  vue-i18n: ^11.1.2
+  vue-i18n: ^11.1.3
   vue-json-viewer: ^3.0.4
   vue-router: ^4.5.0
   vue-tippy: ^6.7.0
   vue-tsc: 2.1.10
-  vxe-pc-ui: ^4.5.11
+  vxe-pc-ui: ^4.5.14
   vxe-table: ^4.12.5
   watermark-js-plus: ^1.5.8
   zod: ^3.24.2