Merge remote-tracking branch 'yudao/dev' into dev

.gitpod.yml

@@ -2,5 +2,5 @@ ports:
   - port: 5555
     onOpen: open-preview
 tasks:
-  - init: corepack enable && pnpm install
+  - init: npm i -g corepack && pnpm install
     command: pnpm run dev:play

.vscode/settings.json

@@ -223,16 +223,5 @@
   "commentTranslate.multiLineMerge": true,
   "vue.server.hybridMode": true,
   "typescript.tsdk": "node_modules/typescript/lib",
-  "oxc.enable": false,
+  "oxc.enable": false
-  "cSpell.words": [
-    "archiver",
-    "axios",
-    "dotenv",
-    "isequal",
-    "jspm",
-    "napi",
-    "nolebase",
-    "rollup",
-    "vitest"
-  ]
 }

apps/web-antd/.env

@@ -3,6 +3,10 @@ VITE_APP_TITLE=芋道管理系统
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=yudao-vben-antd
+
+# 对store进行加密的密钥，在将store持久化到localStorage时会使用该密钥进行加密
+VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key
+
 # 是否开启模拟数据
 VITE_NITRO_MOCK=false
 

apps/web-antd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

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

@@ -76,8 +76,8 @@ const withDefaultPlaceholder = <T extends Component>(
   componentProps: Recordable<any> = {},
 ) => {
   return defineComponent({
-    inheritAttrs: false,
     name: component.name,
+    inheritAttrs: false,
     setup: (props: any, { attrs, expose, slots }) => {
       const placeholder =
         props?.placeholder ||
@@ -142,20 +142,34 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+    ApiSelect: withDefaultPlaceholder(
-      component: Select,
+      {
-      loadingSlot: 'suffixIcon',
+        ...ApiComponent,
-      visibleEvent: 'onDropdownVisibleChange',
+        name: 'ApiSelect',
-      modelPropName: 'value',
+      },
-    }),
+      'select',
-    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      {
-      component: TreeSelect,
+        component: Select,
-      fieldNames: { label: 'label', value: 'value', children: 'children' },
+        loadingSlot: 'suffixIcon',
-      loadingSlot: 'suffixIcon',
+        visibleEvent: 'onDropdownVisibleChange',
-      modelPropName: 'value',
+        modelPropName: 'value',
-      optionsPropName: 'treeData',
+      },
-      visibleEvent: 'onVisibleChange',
+    ),
-    }),
+    ApiTreeSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiTreeSelect',
+      },
+      'select',
+      {
+        component: TreeSelect,
+        fieldNames: { label: 'label', value: 'value', children: 'children' },
+        loadingSlot: 'suffixIcon',
+        modelPropName: 'value',
+        optionsPropName: 'treeData',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
     AutoComplete,
     Checkbox,
     CheckboxGroup,

apps/web-antd/src/bootstrap.ts

@@ -7,7 +7,6 @@ import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
 import '@vben/styles/antd';
-import 'vxe-table/styles/cssvar.scss'; // TODO @puhui999：这个必须导入哇？我看 use-vxe-grid.vue 已经导入了
 
 import { useTitle } from '@vueuse/core';
 
@@ -18,6 +17,8 @@ import { initComponentAdapter } from './adapter/component';
 import App from './app.vue';
 import { router } from './router';
 
+import 'vxe-table/styles/cssvar.scss'; // TODO @puhui999：这个必须导入哇？我看 use-vxe-grid.vue 已经导入了
+
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();

apps/web-antd/src/layouts/basic.vue

@@ -3,7 +3,7 @@ import type { NotificationItem } from '@vben/layouts';
 
 import { computed, onMounted, ref, watch } from 'vue';
 
-import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
+import { AuthenticationLoginExpiredModal, useVbenModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { useWatermark } from '@vben/hooks';
 import {
@@ -33,6 +33,8 @@ import { router } from '#/router';
 import { useAuthStore } from '#/store';
 import LoginForm from '#/views/_core/authentication/login.vue';
 
+import Help from './components/help.vue';
+
 const userStore = useUserStore();
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
@@ -42,6 +44,10 @@ const notifications = ref<NotificationItem[]>([]);
 const unreadCount = ref(0);
 const showDot = computed(() => unreadCount.value > 0);
 
+const [HelpModal, helpModalApi] = useVbenModal({
+  connectedComponent: Help,
+});
+
 const menus = computed(() => [
   {
     handler: () => {
@@ -70,9 +76,7 @@ const menus = computed(() => [
   },
   {
     handler: () => {
-      openWindow(`${VBEN_GITHUB_URL}/issues`, {
+      helpModalApi.open();
-        target: '_blank',
-      });
     },
     icon: CircleHelp,
     text: $t('ui.widgets.qa'),
@@ -210,4 +214,5 @@ watch(
       <LockScreen :avatar @to-login="handleLogout" />
     </template>
   </BasicLayout>
+  <HelpModal />
 </template>

apps/web-antd/src/layouts/components/help.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import { useVbenModal, VbenButton, VbenButtonGroup } from '@vben/common-ui';
+
+import { Image, Tag } from 'ant-design-vue';
+
+import { $t } from '#/locales';
+
+const [Modal, modalApi] = useVbenModal({
+  draggable: true,
+  overlayBlur: 5,
+  footer: false,
+  onCancel() {
+    modalApi.close();
+  },
+});
+
+function openWindow(url: string) {
+  window.open(url, '_blank');
+}
+</script>
+<template>
+  <Modal class="w-[40%]" :title="$t('ui.widgets.qa')">
+    <div class="mt-2 flex flex-col">
+      <div class="mt-2 flex flex-row">
+        <VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
+          <p class="p-2">项目地址:</p>
+          <VbenButton
+            variant="link"
+            @click="
+              openWindow('https://gitee.com/yudaocode/yudao-ui-admin-vben')
+            "
+          >
+            Gitee
+          </VbenButton>
+          <VbenButton
+            variant="link"
+            @click="
+              openWindow('https://github.com/yudaocode/yudao-ui-admin-vben')
+            "
+          >
+            Github
+          </VbenButton>
+        </VbenButtonGroup>
+
+        <VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
+          <p class="p-2">issues:</p>
+          <VbenButton
+            variant="link"
+            @click="
+              openWindow(
+                'https://gitee.com/yudaocode/yudao-ui-admin-vben/issues',
+              )
+            "
+          >
+            Gitee
+          </VbenButton>
+          <VbenButton
+            variant="link"
+            @click="
+              openWindow(
+                'https://github.com/yudaocode/yudao-ui-admin-vben/issues',
+              )
+            "
+          >
+            Github
+          </VbenButton>
+        </VbenButtonGroup>
+
+        <VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
+          <p class="p-2">开发文档:</p>
+          <VbenButton
+            variant="link"
+            @click="openWindow('https://doc.iocoder.cn/quick-start/')"
+          >
+            项目文档
+          </VbenButton>
+          <VbenButton variant="link" @click="openWindow('https://antdv.com/')">
+            antdv 文档
+          </VbenButton>
+        </VbenButtonGroup>
+      </div>
+      <p class="mt-2 flex justify-center">
+        <span>
+          <Image src="../../../public/wx-xingyu.png" alt="数舵科技" />
+        </span>
+      </p>
+      <p class="mt-2 flex justify-center pt-4 text-sm italic">
+        本项目采用<Tag color="blue">MIT</Tag>开源协议，个人与企业可100%
+        免费使用。
+      </p>
+    </div>
+  </Modal>
+</template>

apps/web-antd/src/views/_core/authentication/code-login.vue

@@ -30,7 +30,7 @@ const loginRef = ref();
 
 /** 获取租户列表，并默认选中 */
 const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
-const fetchTenantList = async () => {
+async function fetchTenantList() {
   if (!tenantEnable) {
     return;
   }
@@ -56,11 +56,11 @@ const fetchTenantList = async () => {
 
     // 设置选中的租户编号
     accessStore.setTenantId(tenantId);
-    loginRef.value.getFormApi().setFieldValue('tenantId', tenantId);
+    loginRef.value.getFormApi().setFieldValue('tenantId', tenantId?.toString());
   } catch (error) {
     console.error('获取租户列表失败:', error);
   }
-};
+}
 
 /** 组件挂载时获取租户信息 */
 onMounted(() => {
@@ -74,19 +74,19 @@ const formSchema = computed((): VbenFormSchema[] => {
       componentProps: {
         options: tenantList.value.map((item) => ({
           label: item.name,
-          value: item.id,
+          value: item.id.toString(),
         })),
         placeholder: $t('authentication.tenantTip'),
       },
       fieldName: 'tenantId',
       label: $t('authentication.tenant'),
-      rules: z.number().positive(),
+      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
       dependencies: {
         triggerFields: ['tenantId'],
         if: tenantEnable,
         trigger(values) {
           if (values.tenantId) {
-            accessStore.setTenantId(values.tenantId);
+            accessStore.setTenantId(Number(values.tenantId));
           }
         },
       },

apps/web-antd/src/views/_core/authentication/forget-password.vue

@@ -29,7 +29,7 @@ const forgetPasswordRef = ref();
 
 /** 获取租户列表，并默认选中 */
 const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
-const fetchTenantList = async () => {
+async function fetchTenantList() {
   if (!tenantEnable) {
     return;
   }
@@ -55,11 +55,13 @@ const fetchTenantList = async () => {
 
     // 设置选中的租户编号
     accessStore.setTenantId(tenantId);
-    forgetPasswordRef.value.getFormApi().setFieldValue('tenantId', tenantId);
+    forgetPasswordRef.value
+      .getFormApi()
+      .setFieldValue('tenantId', tenantId?.toString());
   } catch (error) {
     console.error('获取租户列表失败:', error);
   }
-};
+}
 
 /** 组件挂载时获取租户信息 */
 onMounted(() => {
@@ -73,19 +75,19 @@ const formSchema = computed((): VbenFormSchema[] => {
       componentProps: {
         options: tenantList.value.map((item) => ({
           label: item.name,
-          value: item.id,
+          value: item.id.toString(),
         })),
         placeholder: $t('authentication.tenantTip'),
       },
       fieldName: 'tenantId',
       label: $t('authentication.tenant'),
-      rules: z.number().positive(),
+      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
       dependencies: {
         triggerFields: ['tenantId'],
         if: tenantEnable,
         trigger(values) {
           if (values.tenantId) {
-            accessStore.setTenantId(values.tenantId);
+            accessStore.setTenantId(Number(values.tenantId));
           }
         },
       },

apps/web-antd/src/views/_core/authentication/login.vue

@@ -35,7 +35,7 @@ const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWo
 
 /** 获取租户列表，并默认选中 */
 const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
-const fetchTenantList = async () => {
+async function fetchTenantList() {
   if (!tenantEnable) {
     return;
   }
@@ -61,26 +61,25 @@ const fetchTenantList = async () => {
 
     // 设置选中的租户编号
     accessStore.setTenantId(tenantId);
-    loginRef.value.getFormApi().setFieldValue('tenantId', tenantId);
+    loginRef.value.getFormApi().setFieldValue('tenantId', tenantId?.toString());
   } catch (error) {
     console.error('获取租户列表失败:', error);
   }
-};
+}
 
 /** 处理登录 */
-const handleLogin = async (values: any) => {
+async function handleLogin(values: any) {
   // 如果开启验证码，则先验证验证码
   if (captchaEnable) {
     verifyRef.value.show();
     return;
   }
-
   // 无验证码，直接登录
   await authStore.authLogin('username', values);
-};
+}
 
 /** 验证码通过，执行登录 */
-const handleVerifySuccess = async ({ captchaVerification }: any) => {
+async function handleVerifySuccess({ captchaVerification }: any) {
   try {
     await authStore.authLogin('username', {
       ...(await loginRef.value.getFormApi().getValues()),
@@ -89,11 +88,11 @@ const handleVerifySuccess = async ({ captchaVerification }: any) => {
   } catch (error) {
     console.error('Error in handleLogin:', error);
   }
-};
+}
 
 /** 处理第三方登录 */
 const redirect = query?.redirect;
-const handleThirdLogin = async (type: number) => {
+async function handleThirdLogin(type: number) {
   if (type <= 0) {
     return;
   }
@@ -111,7 +110,7 @@ const handleThirdLogin = async (type: number) => {
   } catch (error) {
     console.error('第三方登录处理失败:', error);
   }
-};
+}
 
 /** 组件挂载时获取租户信息 */
 onMounted(() => {
@@ -125,19 +124,19 @@ const formSchema = computed((): VbenFormSchema[] => {
       componentProps: {
         options: tenantList.value.map((item) => ({
           label: item.name,
-          value: item.id,
+          value: item.id.toString(),
         })),
         placeholder: $t('authentication.tenantTip'),
       },
       fieldName: 'tenantId',
       label: $t('authentication.tenant'),
-      rules: z.number().positive(),
+      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
       dependencies: {
         triggerFields: ['tenantId'],
         if: tenantEnable,
         trigger(values) {
           if (values.tenantId) {
-            accessStore.setTenantId(values.tenantId);
+            accessStore.setTenantId(Number(values.tenantId));
           }
         },
       },

apps/web-antd/src/views/_core/authentication/register.vue

@@ -34,7 +34,7 @@ const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWo
 
 /** 获取租户列表，并默认选中 */
 const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
-const fetchTenantList = async () => {
+async function fetchTenantList() {
   if (!tenantEnable) {
     return;
   }
@@ -60,14 +60,16 @@ const fetchTenantList = async () => {
 
     // 设置选中的租户编号
     accessStore.setTenantId(tenantId);
-    registerRef.value.getFormApi().setFieldValue('tenantId', tenantId);
+    registerRef.value
+      .getFormApi()
+      .setFieldValue('tenantId', tenantId?.toString());
   } catch (error) {
     console.error('获取租户列表失败:', error);
   }
-};
+}
 
 /** 执行注册 */
-const handleRegister = async (values: any) => {
+async function handleRegister(values: any) {
   // 如果开启验证码，则先验证验证码
   if (captchaEnable) {
     verifyRef.value.show();
@@ -76,7 +78,7 @@ const handleRegister = async (values: any) => {
 
   // 无验证码，直接登录
   await authStore.authLogin('register', values);
-};
+}
 
 /** 验证码通过，执行注册 */
 const handleVerifySuccess = async ({ captchaVerification }: any) => {
@@ -108,13 +110,13 @@ const formSchema = computed((): VbenFormSchema[] => {
       },
       fieldName: 'tenantId',
       label: $t('authentication.tenant'),
-      rules: z.number().positive(),
+      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
       dependencies: {
         triggerFields: ['tenantId'],
         if: tenantEnable,
         trigger(values) {
           if (values.tenantId) {
-            accessStore.setTenantId(values.tenantId);
+            accessStore.setTenantId(Number(values.tenantId));
           }
         },
       },

apps/web-antd/src/views/_core/authentication/social-login.vue

@@ -35,7 +35,7 @@ const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWo
 
 /** 获取租户列表，并默认选中 */
 const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
-const fetchTenantList = async () => {
+async function fetchTenantList() {
   if (!tenantEnable) {
     return;
   }
@@ -66,14 +66,14 @@ const fetchTenantList = async () => {
   } catch (error) {
     console.error('获取租户列表失败:', error);
   }
-};
+}
 
 /** 尝试登录：当账号已经绑定，socialLogin 会直接获得 token */
 const socialType = Number(getUrlValue('type'));
 const redirect = getUrlValue('redirect');
 const socialCode = query?.code as string;
 const socialState = query?.state as string;
-const tryLogin = async () => {
+async function tryLogin() {
   // 用于登录后，基于 redirect 的重定向
   if (redirect) {
     await router.replace({
@@ -90,10 +90,10 @@ const tryLogin = async () => {
     code: socialCode,
     state: socialState,
   });
-};
+}
 
 /** 处理登录 */
-const handleLogin = async (values: any) => {
+async function handleLogin(values: any) {
   // 如果开启验证码，则先验证验证码
   if (captchaEnable) {
     verifyRef.value.show();
@@ -107,10 +107,10 @@ const handleLogin = async (values: any) => {
     socialCode,
     socialState,
   });
-};
+}
 
 /** 验证码通过，执行登录 */
-const handleVerifySuccess = async ({ captchaVerification }: any) => {
+async function handleVerifySuccess({ captchaVerification }: any) {
   try {
     await authStore.authLogin('username', {
       ...(await loginRef.value.getFormApi().getValues()),
@@ -122,7 +122,7 @@ const handleVerifySuccess = async ({ captchaVerification }: any) => {
   } catch (error) {
     console.error('Error in handleLogin:', error);
   }
-};
+}
 
 /** tricky: 配合 login.vue 中，redirectUri 需要对参数进行 encode，需要在回调后进行decode */
 function getUrlValue(key: string): string {
@@ -144,19 +144,19 @@ const formSchema = computed((): VbenFormSchema[] => {
       componentProps: {
         options: tenantList.value.map((item) => ({
           label: item.name,
-          value: item.id,
+          value: item.id.toString(),
         })),
         placeholder: $t('authentication.tenantTip'),
       },
       fieldName: 'tenantId',
       label: $t('authentication.tenant'),
-      rules: z.number().positive(),
+      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
       dependencies: {
         triggerFields: ['tenantId'],
         if: tenantEnable,
         trigger(values) {
           if (values.tenantId) {
-            accessStore.setTenantId(values.tenantId);
+            accessStore.setTenantId(Number(values.tenantId));
           }
         },
       },

apps/web-antd/src/views/_core/authentication/sso-login.vue

@@ -29,7 +29,7 @@ const queryParams = reactive({
 const loading = ref(false); // 表单是否提交中
 
 /** 初始化授权信息 */
-const init = async () => {
+async function init() {
   // 防止在没有登录的情况下循环弹窗
   if (query.client_id === undefined) {
     return;
@@ -75,10 +75,10 @@ const init = async () => {
     'scopes',
     scopes.filter((scope) => scope.value).map((scope) => scope.key),
   );
-};
+}
 
 /** 处理授权的提交 */
-const handleSubmit = async (approved: boolean) => {
+async function handleSubmit(approved: boolean) {
   // 计算 checkedScopes + uncheckedScopes
   let checkedScopes: string[];
   let uncheckedScopes: string[];
@@ -107,7 +107,7 @@ const handleSubmit = async (approved: boolean) => {
   } finally {
     loading.value = false;
   }
-};
+}
 
 /** 调用授权 API 接口 */
 const doAuthorize = (
@@ -127,7 +127,7 @@ const doAuthorize = (
 };
 
 /** 格式化 scope 文本 */
-const formatScope = (scope: string) => {
+function formatScope(scope: string) {
   // 格式化 scope 授权范围，方便用户理解。
   // 这里仅仅是一个 demo，可以考虑录入到字典数据中，例如说字典类型 "system_oauth2_scope"，它的每个 scope 都是一条字典数据。
   switch (scope) {
@@ -141,7 +141,7 @@ const formatScope = (scope: string) => {
       return scope;
     }
   }
-};
+}
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [

apps/web-antd/src/views/_core/profile/index.vue

@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import type { SystemUserProfileApi } from '#/api/system/user/profile';
 
-import { Card, Tabs } from 'ant-design-vue';
-import { Page } from '@vben/common-ui';
-import ProfileUser from './modules/profile-user.vue';
-import BaseInfo from './modules/base-info.vue';
-import ResetPwd from './modules/reset-pwd.vue';
-import UserSocial from './modules/user-social.vue';
-
 import { onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Card, Tabs } from 'ant-design-vue';
+
 import { getUserProfile } from '#/api/system/user/profile';
 import { useAuthStore } from '#/store';
 
+import BaseInfo from './modules/base-info.vue';
+import ProfileUser from './modules/profile-user.vue';
+import ResetPwd from './modules/reset-pwd.vue';
+import UserSocial from './modules/user-social.vue';
+
 const authStore = useAuthStore();
 const activeName = ref('basicInfo');
 
@@ -46,13 +49,13 @@ onMounted(loadProfile);
       <Card class="ml-3 w-3/5">
         <Tabs v-model:active-key="activeName" class="-mt-4">
           <Tabs.TabPane key="basicInfo" tab="基本设置">
-             <BaseInfo :profile="profile" @success="refreshProfile" />
+            <BaseInfo :profile="profile" @success="refreshProfile" />
           </Tabs.TabPane>
           <Tabs.TabPane key="resetPwd" tab="密码设置">
-             <ResetPwd />
+            <ResetPwd />
           </Tabs.TabPane>
           <Tabs.TabPane key="userSocial" tab="社交绑定" force-render>
-             <UserSocial @update:active-name="activeName = $event" />
+            <UserSocial @update:active-name="activeName = $event" />
           </Tabs.TabPane>
           <!-- TODO @芋艿：在线设备 -->
         </Tabs>

apps/web-antd/src/views/_core/profile/modules/base-info.vue

@@ -1,16 +1,21 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
+
 import type { SystemUserProfileApi } from '#/api/system/user/profile';
 
+import { watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
 import { message } from 'ant-design-vue';
 
-import { watch } from 'vue';
 import { useVbenForm, z } from '#/adapter/form';
-import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 import { updateUserProfile } from '#/api/system/user/profile';
-import { $t } from '@vben/locales';
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
-const props = defineProps<{ profile?: SystemUserProfileApi.UserProfileRespVO }>();
+const props = defineProps<{
+  profile?: SystemUserProfileApi.UserProfileRespVO;
+}>();
 const emit = defineEmits<{
   (e: 'success'): void;
 }>();
@@ -87,11 +92,15 @@ async function handleSubmit(values: Recordable<any>) {
 }
 
 /** 监听 profile 变化 */
-watch(() => props.profile, (newProfile) => {
+watch(
-  if (newProfile) {
+  () => props.profile,
-    formApi.setValues(newProfile);
+  (newProfile) => {
-  }
+    if (newProfile) {
-}, { immediate: true });
+      formApi.setValues(newProfile);
+    }
+  },
+  { immediate: true },
+);
 </script>
 
 <template>

apps/web-antd/src/views/bpm/category/data.ts

@@ -63,7 +63,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        class: 'w-full',
         controlsPosition: 'right',
         placeholder: '请输入分类排序',
       },

apps/web-antd/src/views/bpm/form/index.vue

@@ -1,18 +1,34 @@
 <script lang="ts" setup>
-import { DocAlert } from '#/components/doc-alert';
-import { Button } from 'ant-design-vue';
 import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { DocAlert } from '#/components/doc-alert';
 </script>
 
 <template>
   <Page>
-    <DocAlert title="审批接入（流程表单）" url="https://doc.iocoder.cn/bpm/use-bpm-form/" />
+    <DocAlert
-    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
+      title="审批接入（流程表单）"
+      url="https://doc.iocoder.cn/bpm/use-bpm-form/"
+    />
+    <Button
+      danger
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+    >
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
-    <Button type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/form/index">
+    <Button
-      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/form/index 代码，pull request 贡献给我们！
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/form/index"
+    >
+      可参考
+      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/form/index
+      代码，pull request 贡献给我们！
     </Button>
   </Page>
 </template>

apps/web-antd/src/views/bpm/group/index.vue

@@ -1,18 +1,31 @@
 <script lang="ts" setup>
-import { DocAlert } from '#/components/doc-alert';
-import { Button } from 'ant-design-vue';
 import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { DocAlert } from '#/components/doc-alert';
 </script>
 
 <template>
   <Page>
     <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
-    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
+    <Button
+      danger
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+    >
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
-    <Button type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/group/index">
+    <Button
-      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/group/index 代码，pull request 贡献给我们！
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/group/index"
+    >
+      可参考
+      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/group/index
+      代码，pull request 贡献给我们！
     </Button>
   </Page>
 </template>

apps/web-antd/src/views/bpm/oa/leave/index.vue

@@ -1,18 +1,34 @@
 <script lang="ts" setup>
-import { DocAlert } from '#/components/doc-alert';
-import { Button } from 'ant-design-vue';
 import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { DocAlert } from '#/components/doc-alert';
 </script>
 
 <template>
   <Page>
-    <DocAlert title="审批接入（业务表单）" url="https://doc.iocoder.cn/bpm/use-business-form/" />
+    <DocAlert
-    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
+      title="审批接入（业务表单）"
+      url="https://doc.iocoder.cn/bpm/use-business-form/"
+    />
+    <Button
+      danger
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+    >
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
-    <Button type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/oa/leave/index">
+    <Button
-      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/oa/leave/index 代码，pull request 贡献给我们！
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/oa/leave/index"
+    >
+      可参考
+      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/oa/leave/index
+      代码，pull request 贡献给我们！
     </Button>
   </Page>
 </template>

apps/web-antd/src/views/bpm/processExpression/index.vue

@@ -1,18 +1,31 @@
 <script lang="ts" setup>
-import { DocAlert } from '#/components/doc-alert';
-import { Button } from 'ant-design-vue';
 import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { DocAlert } from '#/components/doc-alert';
 </script>
 
 <template>
   <Page>
     <DocAlert title="流程表达式" url="https://doc.iocoder.cn/bpm/expression/" />
-    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
+    <Button
+      danger
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+    >
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
-    <Button type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processExpression/index">
+    <Button
-      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processExpression/index 代码，pull request 贡献给我们！
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processExpression/index"
+    >
+      可参考
+      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processExpression/index
+      代码，pull request 贡献给我们！
     </Button>
   </Page>
 </template>

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

@@ -1,18 +1,34 @@
 <script lang="ts" setup>
-import { DocAlert } from '#/components/doc-alert';
-import { Button } from 'ant-design-vue';
 import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { DocAlert } from '#/components/doc-alert';
 </script>
 
 <template>
   <Page>
-    <DocAlert title="流程发起、取消、重新发起" url="https://doc.iocoder.cn/bpm/process-instance/" />
+    <DocAlert
-    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
+      title="流程发起、取消、重新发起"
+      url="https://doc.iocoder.cn/bpm/process-instance/"
+    />
+    <Button
+      danger
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+    >
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
-    <Button type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/index">
+    <Button
-      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/index 代码，pull request 贡献给我们！
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/index"
+    >
+      可参考
+      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/index
+      代码，pull request 贡献给我们！
     </Button>
   </Page>
 </template>

apps/web-antd/src/views/bpm/processInstance/manager/index.vue

@@ -1,18 +1,31 @@
 <script lang="ts" setup>
-import { DocAlert } from '#/components/doc-alert';
-import { Button } from 'ant-design-vue';
 import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { DocAlert } from '#/components/doc-alert';
 </script>
 
 <template>
   <Page>
     <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
-    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
+    <Button
+      danger
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+    >
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
-    <Button type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/manager/index">
+    <Button
-      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/manager/index 代码，pull request 贡献给我们！
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/manager/index"
+    >
+      可参考
+      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/manager/index
+      代码，pull request 贡献给我们！
     </Button>
   </Page>
 </template>

apps/web-antd/src/views/bpm/processListener/index.vue

@@ -1,18 +1,34 @@
 <script lang="ts" setup>
-import { DocAlert } from '#/components/doc-alert';
-import { Button } from 'ant-design-vue';
 import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { DocAlert } from '#/components/doc-alert';
 </script>
 
 <template>
   <Page>
-    <DocAlert title="执行监听器、任务监听器" url="https://doc.iocoder.cn/bpm/listener/" />
+    <DocAlert
-    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
+      title="执行监听器、任务监听器"
+      url="https://doc.iocoder.cn/bpm/listener/"
+    />
+    <Button
+      danger
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+    >
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
-    <Button type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processListener/index">
+    <Button
-      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processListener/index 代码，pull request 贡献给我们！
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processListener/index"
+    >
+      可参考
+      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processListener/index
+      代码，pull request 贡献给我们！
     </Button>
   </Page>
 </template>

apps/web-antd/src/views/bpm/task/copy/index.vue

@@ -1,18 +1,34 @@
 <script lang="ts" setup>
-import { DocAlert } from '#/components/doc-alert';
-import { Button } from 'ant-design-vue';
 import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { DocAlert } from '#/components/doc-alert';
 </script>
 
 <template>
   <Page>
-    <DocAlert title="审批转办、委派、抄送" url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/" />
+    <DocAlert
-    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
+      title="审批转办、委派、抄送"
+      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+    />
+    <Button
+      danger
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+    >
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
-    <Button type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/copy/index">
+    <Button
-      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/copy/index 代码，pull request 贡献给我们！
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/copy/index"
+    >
+      可参考
+      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/copy/index
+      代码，pull request 贡献给我们！
     </Button>
   </Page>
 </template>

apps/web-antd/src/views/bpm/task/done/index.vue

@@ -1,21 +1,40 @@
 <script lang="ts" setup>
-import { DocAlert } from '#/components/doc-alert';
-import { Button } from 'ant-design-vue';
 import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { DocAlert } from '#/components/doc-alert';
 </script>
 
 <template>
   <Page>
-    <DocAlert title="审批通过、不通过、驳回" url="https://doc.iocoder.cn/bpm/task-todo-done/" />
+    <DocAlert
+      title="审批通过、不通过、驳回"
+      url="https://doc.iocoder.cn/bpm/task-todo-done/"
+    />
     <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-    <DocAlert title="审批转办、委派、抄送" url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/" />
+    <DocAlert
+      title="审批转办、委派、抄送"
+      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+    />
     <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
+    <Button
+      danger
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+    >
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
-    <Button type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/done/index">
+    <Button
-      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/done/index 代码，pull request 贡献给我们！
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/done/index"
+    >
+      可参考
+      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/done/index
+      代码，pull request 贡献给我们！
     </Button>
   </Page>
 </template>

apps/web-antd/src/views/bpm/task/manager/index.vue

@@ -1,18 +1,31 @@
 <script lang="ts" setup>
-import { DocAlert } from '#/components/doc-alert';
-import { Button } from 'ant-design-vue';
 import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { DocAlert } from '#/components/doc-alert';
 </script>
 
 <template>
   <Page>
     <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
-    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
+    <Button
+      danger
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+    >
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
-    <Button type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/manager/index">
+    <Button
-      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/manager/index 代码，pull request 贡献给我们！
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/manager/index"
+    >
+      可参考
+      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/manager/index
+      代码，pull request 贡献给我们！
     </Button>
   </Page>
 </template>

apps/web-antd/src/views/bpm/task/todo/index.vue

@@ -1,21 +1,40 @@
 <script lang="ts" setup>
-import { DocAlert } from '#/components/doc-alert';
-import { Button } from 'ant-design-vue';
 import { Page } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { DocAlert } from '#/components/doc-alert';
 </script>
 
 <template>
   <Page>
-    <DocAlert title="审批通过、不通过、驳回" url="https://doc.iocoder.cn/bpm/task-todo-done/" />
+    <DocAlert
+      title="审批通过、不通过、驳回"
+      url="https://doc.iocoder.cn/bpm/task-todo-done/"
+    />
     <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-    <DocAlert title="审批转办、委派、抄送" url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/" />
+    <DocAlert
+      title="审批转办、委派、抄送"
+      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+    />
     <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
+    <Button
+      danger
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+    >
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
-    <Button type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/todo/index">
+    <Button
-      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/todo/index 代码，pull request 贡献给我们！
+      type="link"
+      target="_blank"
+      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/todo/index"
+    >
+      可参考
+      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/todo/index
+      代码，pull request 贡献给我们！
     </Button>
   </Page>
 </template>

apps/web-antd/src/views/infra/codegen/index.vue

@@ -210,14 +210,14 @@ initDataSourceConfig();
       <DocAlert
         title="代码生成（单表）"
         url="https://doc.iocoder.cn/new-feature/"
-    />
+      />
-    <DocAlert
+      <DocAlert
-      title="代码生成（树表）"
+        title="代码生成（树表）"
-      url="https://doc.iocoder.cn/new-feature/tree/"
+        url="https://doc.iocoder.cn/new-feature/tree/"
-    />
+      />
-    <DocAlert
+      <DocAlert
-      title="代码生成（主子表）"
+        title="代码生成（主子表）"
-      url="https://doc.iocoder.cn/new-feature/master-sub/"
+        url="https://doc.iocoder.cn/new-feature/master-sub/"
       />
       <DocAlert title="单元测试" url="https://doc.iocoder.cn/unit-test/" />
     </template>

apps/web-antd/src/views/infra/codegen/modules/basic-info.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import type { InfraCodegenApi } from '#/api/infra/codegen';
 
-import { useVbenForm } from '#/adapter/form';
 import { watch } from 'vue';
 
+import { useVbenForm } from '#/adapter/form';
+
 import { useBasicInfoFormSchema } from '../data';
 
 const props = defineProps<{

apps/web-antd/src/views/infra/codegen/modules/column-info.vue

@@ -2,11 +2,12 @@
 import type { InfraCodegenApi } from '#/api/infra/codegen';
 import type { SystemDictTypeApi } from '#/api/system/dict/type';
 
+import { nextTick, onMounted, ref, watch } from 'vue';
+
 import { Checkbox, Input, Select } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSimpleDictTypeList } from '#/api/system/dict/type';
-import { nextTick, onMounted, ref, watch } from 'vue';
 
 import { useCodegenColumnTableColumns } from '../data';
 

apps/web-antd/src/views/infra/config/modules/form.vue

@@ -22,6 +22,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/infra/dataSourceConfig/modules/form.vue

@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/infra/demo/demo01/data.ts

@@ -1,7 +1,5 @@
-import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
-
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
 import { useAccess } from '@vben/access';

apps/web-antd/src/views/infra/demo/demo01/modules/form.vue

@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/infra/demo/demo02/data.ts

@@ -1,7 +1,5 @@
-import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
-
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
 
 import { useAccess } from '@vben/access';
@@ -36,7 +34,6 @@ export function useFormSchema(): VbenFormSchema[] {
           });
           return handleTree(data);
         },
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',

apps/web-antd/src/views/infra/demo/demo02/modules/form.vue

@@ -31,6 +31,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/infra/demo/demo03/erp/data.ts

@@ -1,7 +1,5 @@
-import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
-
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { useAccess } from '@vben/access';

apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue

@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useDemo03CourseFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue

@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useDemo03GradeFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue

@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/infra/demo/demo03/inner/data.ts

@@ -1,7 +1,5 @@
-import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
-
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
 
 import { useAccess } from '@vben/access';

apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue

@@ -33,6 +33,13 @@ const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
 const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/infra/demo/demo03/normal/data.ts

@@ -1,7 +1,5 @@
-import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
-
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
 import { useAccess } from '@vben/access';

apps/web-antd/src/views/infra/demo/demo03/normal/modules/form.vue

@@ -33,6 +33,13 @@ const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
 const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/infra/file/modules/form.vue

@@ -14,12 +14,17 @@ import { useFormSchema } from '../data';
 const emit = defineEmits(['success']);
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+    hideLabel: true,
+  },
   layout: 'horizontal',
   schema: useFormSchema().map((item) => ({ ...item, label: '' })), // 去除label
   showDefaultActions: false,
-  commonConfig: {
-    hideLabel: true,
-  },
 });
 
 const [Modal, modalApi] = useVbenModal({

apps/web-antd/src/views/infra/fileConfig/data.ts

@@ -36,7 +36,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'),
         placeholder: '请选择存储器',
-        class: 'w-full',
       },
       rules: 'required',
       dependencies: {
@@ -87,7 +86,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        class: 'w-full',
         controlsPosition: 'right',
         placeholder: '请输入主机端口',
       },

apps/web-antd/src/views/infra/fileConfig/modules/form.vue

@@ -27,7 +27,11 @@ const getTitle = computed(() => {
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
-    labelWidth: 120,
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
   },
   layout: 'horizontal',
   schema: useFormSchema(),

apps/web-antd/src/views/infra/job/data.ts

@@ -65,7 +65,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入重试次数。设置为 0 时，不进行重试',
         min: 0,
-        class: 'w-full',
       },
       rules: 'required',
     },
@@ -76,7 +75,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入重试间隔，单位：毫秒。设置为 0 时，无需间隔',
         min: 0,
-        class: 'w-full',
       },
       rules: 'required',
     },
@@ -87,7 +85,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入监控超时时间，单位：毫秒',
         min: 0,
-        class: 'w-full',
       },
     },
   ];

apps/web-antd/src/views/infra/job/modules/form.vue

@@ -22,12 +22,16 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
-  commonConfig: {
-    labelWidth: 140,
-  },
 });
 
 const [Modal, modalApi] = useVbenModal({

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

@@ -1,6 +1,5 @@
-import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
-
 import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemAreaApi } from '#/api/system/area';
 
 /** 查询 IP 的表单 */

apps/web-antd/src/views/system/area/modules/form.vue

@@ -10,6 +10,13 @@ import { $t } from '#/locales';
 import { useFormSchema } from '../data';
 
 const [Form, { setFieldValue, validate, getValues }] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

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

@@ -1,7 +1,5 @@
-import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
-
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemDeptApi } from '#/api/system/dept';
 
 import { useAccess } from '@vben/access';
@@ -40,7 +38,6 @@ export function useFormSchema(): VbenFormSchema[] {
           });
           return handleTree(data);
         },
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -64,7 +61,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        class: 'w-full',
         controlsPosition: 'right',
         placeholder: '请输入显示顺序',
       },
@@ -76,7 +72,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleUserList,
-        class: 'w-full',
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',

apps/web-antd/src/views/system/dept/modules/form.vue

@@ -22,6 +22,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

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

@@ -204,7 +204,6 @@ export function useDataFormSchema(): VbenFormSchema[] {
         return {
           api: getSimpleDictTypeList,
           placeholder: '请输入字典类型',
-          class: 'w-full',
           labelField: 'name',
           valueField: 'type',
           disabled: !!values.id,
@@ -239,7 +238,6 @@ export function useDataFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入显示排序',
-        class: 'w-full',
       },
       rules: 'required',
     },
@@ -262,7 +260,6 @@ export function useDataFormSchema(): VbenFormSchema[] {
       componentProps: {
         options: colorOptions,
         placeholder: '请选择颜色类型',
-        class: 'w-full',
       },
     },
     {

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

@@ -28,6 +28,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useDataFormSchema(),
   showDefaultActions: false,

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

@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useTypeFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/mail/account/modules/form.vue

@@ -26,12 +26,16 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
-  commonConfig: {
-    labelWidth: 140,
-  },
 });
 
 const [Modal, modalApi] = useVbenModal({

apps/web-antd/src/views/system/mail/template/data.ts

@@ -47,7 +47,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: async () => await getSimpleMailAccountList(),
-        class: 'w-full',
         labelField: 'mail',
         valueField: 'id',
         placeholder: '请选择邮箱账号',

apps/web-antd/src/views/system/mail/template/modules/form.vue

@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/mail/template/modules/send-form.vue

@@ -16,6 +16,13 @@ const emit = defineEmits(['success']);
 const formData = ref<SystemMailTemplateApi.MailTemplate>();
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   showDefaultActions: false,
 });

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

@@ -44,7 +44,6 @@ export function useFormSchema(): VbenFormSchema[] {
           } as SystemMenuApi.Menu);
           return handleTree(data);
         },
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -167,7 +166,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'AutoComplete',
       componentProps: {
         allowClear: true,
-        class: 'w-full',
         filterOption(input: string, option: { value: string }) {
           return option.value.toLowerCase().includes(input.toLowerCase());
         },
@@ -203,7 +201,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        class: 'w-full',
         controlsPosition: 'right',
         placeholder: '请输入显示顺序',
       },

apps/web-antd/src/views/system/menu/modules/form.vue

@@ -22,6 +22,13 @@ const getTitle = computed(() =>
 );
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
@@ -75,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal class="w-[40%]" :title="getTitle">
     <Form class="mx-4" />
   </Modal>
 </template>

apps/web-antd/src/views/system/notice/modules/form.vue

@@ -22,6 +22,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/notify/template/data.ts

@@ -68,7 +68,6 @@ export function useFormSchema(): VbenFormSchema[] {
           DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
           'number',
         ),
-        class: 'w-full',
         placeholder: '请选择模板类型',
       },
       rules: 'required',
@@ -201,7 +200,6 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleUserList,
-        class: 'w-full',
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择接收人',

apps/web-antd/src/views/system/notify/template/modules/form.vue

@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/notify/template/modules/send-form.vue

@@ -17,11 +17,15 @@ const emit = defineEmits(['success']);
 const formData = ref<SystemNotifyTemplateApi.NotifyTemplate>();
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   showDefaultActions: false,
-  commonConfig: {
-    labelWidth: 120,
-  },
 });
 
 const [Modal, modalApi] = useVbenModal({

apps/web-antd/src/views/system/oauth2/client/data.ts

@@ -84,7 +84,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入访问令牌的有效期，单位：秒',
         min: 0,
-        class: 'w-full',
         controlsPosition: 'right',
       },
       rules: 'required',
@@ -96,7 +95,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入刷新令牌的有效期，单位：秒',
         min: 0,
-        class: 'w-full',
         controlsPosition: 'right',
       },
       rules: 'required',
@@ -109,7 +107,6 @@ export function useFormSchema(): VbenFormSchema[] {
         options: getDictOptions(DICT_TYPE.SYSTEM_OAUTH2_GRANT_TYPE),
         mode: 'multiple',
         placeholder: '请输入授权类型',
-        class: 'w-full',
       },
       rules: 'required',
     },
@@ -120,7 +117,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入授权范围',
         mode: 'tags',
-        class: 'w-full',
       },
     },
     {
@@ -130,7 +126,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入自动授权范围',
         mode: 'multiple',
-        class: 'w-full',
         // TODO @芋艿：根据权限，自动授权范围
       },
     },
@@ -141,7 +136,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入可重定向的 URI 地址',
         mode: 'tags',
-        class: 'w-full',
       },
       rules: 'required',
     },
@@ -152,7 +146,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入权限',
         mode: 'tags',
-        class: 'w-full',
       },
     },
     {
@@ -162,7 +155,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         mode: 'tags',
         placeholder: '请输入资源',
-        class: 'w-full',
       },
     },
     {

apps/web-antd/src/views/system/oauth2/client/modules/form.vue

@@ -26,12 +26,16 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
-  commonConfig: {
-    labelWidth: 140,
-  },
 });
 
 const [Modal, modalApi] = useVbenModal({

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

@@ -40,7 +40,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        class: 'w-full',
         controlsPosition: 'right',
         placeholder: '请输入显示顺序',
       },
@@ -97,7 +96,6 @@ export function useAssignDataPermissionFormSchema(): VbenFormSchema[] {
       fieldName: 'dataScope',
       label: '权限范围',
       componentProps: {
-        class: 'w-full',
         options: getDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE, 'number'),
       },
     },

apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue

@@ -7,7 +7,7 @@ import { ref } from 'vue';
 import { useVbenModal, VbenTree } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
 
-import { Checkbox, message, Spin } from 'ant-design-vue';
+import { Checkbox, message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { getDeptList } from '#/api/system/dept';
@@ -28,6 +28,13 @@ const isCheckStrictly = ref(true); // 父子联动状态
 const expandedKeys = ref<number[]>([]); // 展开的节点
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useAssignDataPermissionFormSchema(),
   showDefaultActions: false,
@@ -128,23 +135,23 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
 </script>
 
 <template>
-  <Modal title="数据权限">
+  <Modal title="数据权限" class="w-[40%]">
     <Form class="mx-4">
       <template #dataScopeDeptIds="slotProps">
-        <Spin :spinning="deptLoading" class="w-full">
+        <!-- <Spin :spinning="deptLoading"> -->
-          <!-- TODO @芋艿：可优化，使用 antd 的 tree？原因是，更原生 -->
+        <!-- TODO @芋艿：可优化，使用 antd 的 tree？原因是，更原生 -->
-          <VbenTree
+        <VbenTree
-            :tree-data="deptTree"
+          :tree-data="deptTree"
-            multiple
+          multiple
-            bordered
+          bordered
-            :expanded="expandedKeys"
+          :expanded="expandedKeys"
-            v-bind="slotProps"
+          v-bind="slotProps"
-            value-field="id"
+          value-field="id"
-            label-field="name"
+          label-field="name"
-            :auto-check-parent="false"
+          :auto-check-parent="false"
-            :check-strictly="!isCheckStrictly"
+          :check-strictly="!isCheckStrictly"
-          />
+        />
-        </Spin>
+        <!-- </Spin> -->
       </template>
     </Form>
     <template #prepend-footer>

apps/web-antd/src/views/system/role/modules/assign-menu-form.vue

@@ -7,7 +7,7 @@ import { ref } from 'vue';
 import { useVbenModal, VbenTree } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
 
-import { Checkbox, message, Spin } from 'ant-design-vue';
+import { Checkbox, message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { getMenuList } from '#/api/system/menu';
@@ -25,6 +25,13 @@ const isExpanded = ref(false); // 展开状态
 const expandedKeys = ref<number[]>([]); // 展开的节点
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useAssignMenuFormSchema(),
   showDefaultActions: false,
@@ -120,21 +127,21 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
 </script>
 
 <template>
-  <Modal title="数据权限">
+  <Modal title="数据权限" class="w-[40%]">
     <Form class="mx-4">
       <template #menuIds="slotProps">
-        <Spin :spinning="menuLoading" class="w-full">
+        <!-- <Spin :spinning="menuLoading" class="w-full"> -->
-          <!-- TODO @芋艿：可优化，使用 antd 的 tree？原因是，更原生 -->
+        <!-- TODO @芋艿：可优化，使用 antd 的 tree？原因是，更原生 -->
-          <VbenTree
+        <VbenTree
-            :tree-data="menuTree"
+          :tree-data="menuTree"
-            multiple
+          multiple
-            bordered
+          bordered
-            :expanded="expandedKeys"
+          :expanded="expandedKeys"
-            v-bind="slotProps"
+          v-bind="slotProps"
-            value-field="id"
+          value-field="id"
-            label-field="name"
+          label-field="name"
-          />
+        />
-        </Spin>
+        <!-- </Spin> -->
       </template>
     </Form>
     <template #prepend-footer>

apps/web-antd/src/views/system/role/modules/form.vue

@@ -22,6 +22,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/sms/channel/data.ts

@@ -37,7 +37,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, 'string'),
-        class: 'w-full',
         placeholder: '请选择短信渠道',
       },
       rules: 'required',

apps/web-antd/src/views/system/sms/channel/modules/form.vue

@@ -26,12 +26,16 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
-  commonConfig: {
-    labelWidth: 120,
-  },
 });
 
 const [Modal, modalApi] = useVbenModal({

apps/web-antd/src/views/system/sms/template/data.ts

@@ -29,7 +29,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, 'number'),
-        class: 'w-full',
         placeholder: '请选择短信类型',
       },
       rules: 'required',
@@ -58,7 +57,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: async () => await getSimpleSmsChannelList(),
-        class: 'w-full',
         labelField: 'signature',
         valueField: 'id',
         placeholder: '请选择短信渠道',

apps/web-antd/src/views/system/sms/template/modules/form.vue

@@ -26,12 +26,16 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
-  commonConfig: {
-    labelWidth: 140,
-  },
 });
 
 const [Modal, modalApi] = useVbenModal({

apps/web-antd/src/views/system/sms/template/modules/send-form.vue

@@ -16,11 +16,15 @@ const emit = defineEmits(['success']);
 const formData = ref<SystemSmsTemplateApi.SmsTemplate>();
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   showDefaultActions: false,
-  commonConfig: {
-    labelWidth: 120,
-  },
 });
 
 const [Modal, modalApi] = useVbenModal({

apps/web-antd/src/views/system/social/client/data.ts

@@ -36,7 +36,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE, 'number'),
-        class: 'w-full',
       },
       rules: 'required',
     },

apps/web-antd/src/views/system/social/client/modules/form.vue

@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

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

@@ -27,9 +27,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '租户名称',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入租户名称',
-      },
       rules: 'required',
     },
     {
@@ -38,7 +35,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: () => getTenantPackageList(),
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择租户套餐',
@@ -49,26 +45,18 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'contactName',
       label: '联系人',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入联系人',
-      },
       rules: 'required',
     },
     {
       fieldName: 'contactMobile',
       label: '联系手机',
       component: 'Input',
-      componentProps: {
+      rules: 'mobile',
-        placeholder: '请输入联系手机',
-      },
     },
     {
       label: '用户名称',
       fieldName: 'username',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入用户名称',
-      },
       rules: 'required',
       dependencies: {
         triggerFields: ['id'],
@@ -79,9 +67,6 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户密码',
       fieldName: 'password',
       component: 'InputPassword',
-      componentProps: {
-        placeholder: '请输入用户密码',
-      },
       rules: 'required',
       dependencies: {
         triggerFields: ['id'],
@@ -92,10 +77,6 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '账号额度',
       fieldName: 'accountCount',
       component: 'InputNumber',
-      componentProps: {
-        class: 'w-full',
-        placeholder: '请输入账号额度',
-      },
       rules: 'required',
     },
     {
@@ -105,7 +86,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         format: 'YYYY-MM-DD',
         valueFormat: 'x',
-        class: 'w-full',
         placeholder: '请选择过期时间',
       },
       rules: 'required',
@@ -114,9 +94,6 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '绑定域名',
       fieldName: 'website',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入绑定域名',
-      },
       rules: 'required',
     },
     {

apps/web-antd/src/views/system/tenant/modules/form.vue

@@ -22,6 +22,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

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

@@ -26,9 +26,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '套餐名称',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入套餐名称',
-      },
       rules: 'required',
     },
     {
@@ -52,9 +49,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-      },
     },
   ];
 }

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

@@ -6,6 +6,7 @@ import type {
 import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
 
 import { Button, message } from 'ant-design-vue';
 

apps/web-antd/src/views/system/tenantPackage/modules/form.vue

@@ -34,6 +34,13 @@ const isExpanded = ref(false); // 展开状态
 const expandedKeys = ref<number[]>([]); // 展开的节点
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
@@ -127,21 +134,21 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal :title="getTitle" class="w-[40%]">
     <Form class="mx-6">
       <template #menuIds="slotProps">
-        <Spin :spinning="menuLoading" class="w-full">
+        <!-- TODO @芋艿：可优化，使用 antd 的 tree？原因是，更原生 -->
-          <!-- TODO @芋艿：可优化，使用 antd 的 tree？原因是，更原生 -->
+        <VbenTree
-          <VbenTree
+          class="max-h-[400px] overflow-y-auto"
-            :tree-data="menuTree"
+          :loading="menuLoading"
-            multiple
+          :tree-data="menuTree"
-            bordered
+          multiple
-            :expanded="expandedKeys"
+          bordered
-            v-bind="slotProps"
+          :expanded="expandedKeys"
-            value-field="id"
+          v-bind="slotProps"
-            label-field="name"
+          value-field="id"
-          />
+          label-field="name"
-        </Spin>
+        />
       </template>
     </Form>
     <template #prepend-footer>

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

@@ -29,18 +29,12 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'username',
       label: '用户名称',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入用户名称',
-      },
       rules: 'required',
     },
     {
       label: '用户密码',
       fieldName: 'password',
       component: 'InputPassword',
-      componentProps: {
-        placeholder: '请输入用户密码',
-      },
       rules: 'required',
       dependencies: {
         triggerFields: ['id'],
@@ -51,9 +45,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'nickname',
       label: '用户昵称',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入用户昵称',
-      },
       rules: 'required',
     },
     {
@@ -65,7 +56,6 @@ export function useFormSchema(): VbenFormSchema[] {
           const data = await getDeptList();
           return handleTree(data);
         },
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -79,7 +69,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimplePostList,
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -90,18 +79,12 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'email',
       label: '邮箱',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入邮箱',
-      },
       rules: z.string().email('邮箱格式不正确').optional(),
     },
     {
       fieldName: 'mobile',
       label: '手机号码',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入手机号码',
-      },
     },
     {
       fieldName: 'sex',
@@ -129,9 +112,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-      },
     },
   ];
 }
@@ -210,7 +190,6 @@ export function useAssignRoleFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleRoleList,
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',

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

@@ -215,13 +215,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <AssignRoleModal @success="onRefresh" />
     <ImportModal @success="onRefresh" />
 
-    <div class="flex h-full">
+    <div class="flex h-full w-full">
       <!-- 左侧部门树 -->
-      <div class="w-4/24 pr-3">
+      <div class="h-full w-1/6 pr-4">
         <DeptTree @select="onDeptSelect" />
       </div>
       <!-- 右侧用户列表 -->
-      <div class="w-18/24">
+      <div class="w-5/6">
         <Grid table-title="用户列表">
           <template #toolbar-tools>
             <Button

apps/web-antd/src/views/system/user/modules/assign-role-form.vue

@@ -13,6 +13,13 @@ import { useAssignRoleFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useAssignRoleFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/user/modules/form.vue

@@ -22,6 +22,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/user/modules/import-form.vue

@@ -15,6 +15,13 @@ import { useImportFormSchema } from '../data';
 const emit = defineEmits(['success']);
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useImportFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/user/modules/reset-password-form.vue

@@ -13,6 +13,13 @@ import { useResetPasswordFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useResetPasswordFormSchema(),
   showDefaultActions: false,

apps/web-ele/.env

@@ -3,3 +3,6 @@ VITE_APP_TITLE=Vben Admin Ele
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-ele
+
+# 对store进行加密的密钥，在将store持久化到localStorage时会使用该密钥进行加密
+VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key

apps/web-ele/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-ele",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

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

@@ -130,8 +130,8 @@ const withDefaultPlaceholder = <T extends Component>(
   componentProps: Recordable<any> = {},
 ) => {
   return defineComponent({
-    inheritAttrs: false,
     name: component.name,
+    inheritAttrs: false,
     setup: (props: any, { attrs, expose, slots }) => {
       const placeholder =
         props?.placeholder ||
@@ -184,19 +184,33 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+    ApiSelect: withDefaultPlaceholder(
-      component: ElSelectV2,
+      {
-      loadingSlot: 'loading',
+        ...ApiComponent,
-      visibleEvent: 'onVisibleChange',
+        name: 'ApiSelect',
-    }),
+      },
-    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      'select',
-      component: ElTreeSelect,
+      {
-      props: { label: 'label', children: 'children' },
+        component: ElSelectV2,
-      nodeKey: 'value',
+        loadingSlot: 'loading',
-      loadingSlot: 'loading',
+        visibleEvent: 'onVisibleChange',
-      optionsPropName: 'data',
+      },
-      visibleEvent: 'onVisibleChange',
+    ),
-    }),
+    ApiTreeSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiTreeSelect',
+      },
+      'select',
+      {
+        component: ElTreeSelect,
+        props: { label: 'label', children: 'children' },
+        nodeKey: 'value',
+        loadingSlot: 'loading',
+        optionsPropName: 'data',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
     Checkbox: ElCheckbox,
     CheckboxGroup: (props, { attrs, slots }) => {
       let defaultSlot;

apps/web-naive/.env

@@ -3,3 +3,6 @@ VITE_APP_TITLE=Vben Admin Naive
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-naive
+
+# 对store进行加密的密钥，在将store持久化到localStorage时会使用该密钥进行加密
+VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key

apps/web-naive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

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

@@ -76,8 +76,8 @@ const withDefaultPlaceholder = <T extends Component>(
   componentProps: Recordable<any> = {},
 ) => {
   return defineComponent({
-    inheritAttrs: false,
     name: component.name,
+    inheritAttrs: false,
     setup: (props: any, { attrs, expose, slots }) => {
       const placeholder =
         props?.placeholder ||
@@ -131,19 +131,33 @@ async function initComponentAdapter() {
     // Button: () =>
     // import('xxx').then((res) => res.Button),
 
-    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+    ApiSelect: withDefaultPlaceholder(
-      component: NSelect,
+      {
-      modelPropName: 'value',
+        ...ApiComponent,
-    }),
+        name: 'ApiSelect',
-    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      },
-      component: NTreeSelect,
+      'select',
-      nodeKey: 'value',
+      {
-      loadingSlot: 'arrow',
+        component: NSelect,
-      keyField: 'value',
+        modelPropName: 'value',
-      modelPropName: 'value',
+      },
-      optionsPropName: 'options',
+    ),
-      visibleEvent: 'onVisibleChange',
+    ApiTreeSelect: withDefaultPlaceholder(
-    }),
+      {
+        ...ApiComponent,
+        name: 'ApiTreeSelect',
+      },
+      'select',
+      {
+        component: NTreeSelect,
+        nodeKey: 'value',
+        loadingSlot: 'arrow',
+        keyField: 'value',
+        modelPropName: 'value',
+        optionsPropName: 'options',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
     Checkbox: NCheckbox,
     CheckboxGroup: (props, { attrs, slots }) => {
       let defaultSlot;

cspell.json

@@ -52,7 +52,21 @@
     "vitepress",
     "vnode",
     "vueuse",
-    "yxxx"
+    "yxxx",
+    "archiver",
+    "axios",
+    "cropperjs",
+    "dotenv",
+    "gitee",
+    "isequal",
+    "jspm",
+    "napi",
+    "nolebase",
+    "rollup",
+    "Tinymce",
+    "vitest",
+    "xingyu",
+    "yudao"
   ],
   "ignorePaths": [
     "**/node_modules/**",

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "private": true,
   "scripts": {
     "build": "vitepress build",