diff --git a/apps/vben5/apps/app-antd/package.json b/apps/vben5/apps/app-antd/package.json
index 2a5979c5f..8b95e821b 100644
--- a/apps/vben5/apps/app-antd/package.json
+++ b/apps/vben5/apps/app-antd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/app-antd",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/apps/app-antd/src/adapter/component/index.ts b/apps/vben5/apps/app-antd/src/adapter/component/index.ts
index e237b52fc..a43a8280a 100644
--- a/apps/vben5/apps/app-antd/src/adapter/component/index.ts
+++ b/apps/vben5/apps/app-antd/src/adapter/component/index.ts
@@ -8,7 +8,7 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
-import { globalShareState } from '@vben/common-ui';
+import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import {
@@ -21,7 +21,6 @@ import {
   Input,
   InputNumber,
   InputPassword,
-  InputSearch,
   Mentions,
   notification,
   Radio,
@@ -49,16 +48,18 @@ const withDefaultPlaceholder = <T extends Component>(
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiSelect'
+  | 'ApiTreeSelect'
   | 'AutoComplete'
   | 'Checkbox'
   | 'CheckboxGroup'
   | 'DatePicker'
   | 'DefaultButton'
   | 'Divider'
+  | 'IconPicker'
   | 'Input'
   | 'InputNumber'
   | 'InputPassword'
-  | 'InputSearch'
   | 'Mentions'
   | 'PrimaryButton'
   | 'Radio'
@@ -79,7 +80,38 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-
+    ApiSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: Select,
+          loadingSlot: 'suffixIcon',
+          visibleEvent: 'onDropdownVisibleChange',
+          modelPropName: 'value',
+        },
+        slots,
+      );
+    },
+    ApiTreeSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: TreeSelect,
+          fieldNames: { label: 'label', value: 'value', children: 'children' },
+          loadingSlot: 'suffixIcon',
+          modelPropName: 'value',
+          optionsPropName: 'treeData',
+          visibleEvent: 'onVisibleChange',
+        },
+        slots,
+      );
+    },
     AutoComplete,
     Checkbox,
     CheckboxGroup,
@@ -89,10 +121,16 @@ async function initComponentAdapter() {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
+    IconPicker: (props, { attrs, slots }) => {
+      return h(
+        IconPicker,
+        { iconSlot: 'addonAfter', inputComponent: Input, ...props, ...attrs },
+        slots,
+      );
+    },
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
-    InputSearch,
     Mentions: withDefaultPlaceholder(Mentions, 'input'),
     // 自定义主要按钮
     PrimaryButton: (props, { attrs, slots }) => {
diff --git a/apps/vben5/apps/app-antd/src/adapter/vxe-table.ts b/apps/vben5/apps/app-antd/src/adapter/vxe-table.ts
index d296b2050..d27910397 100644
--- a/apps/vben5/apps/app-antd/src/adapter/vxe-table.ts
+++ b/apps/vben5/apps/app-antd/src/adapter/vxe-table.ts
@@ -20,6 +20,10 @@ setupVbenVxeTable({
           // 全局禁用vxe-table的表单配置，使用formOptions
           enabled: false,
         },
+        pagerConfig: {
+          pageSize: 10,
+          pageSizes: [10, 15, 25, 50, 100],
+        },
         proxyConfig: {
           autoLoad: true,
           response: {
diff --git a/apps/vben5/apps/app-antd/src/router/guard.ts b/apps/vben5/apps/app-antd/src/router/guard.ts
index fce5a892c..cbb5235ec 100644
--- a/apps/vben5/apps/app-antd/src/router/guard.ts
+++ b/apps/vben5/apps/app-antd/src/router/guard.ts
@@ -54,7 +54,9 @@ function setupAccessGuard(router: Router) {
     if (coreRouteNames.includes(to.name as string)) {
       if (to.path === LOGIN_PATH && accessStore.accessToken) {
         return decodeURIComponent(
-          (to.query?.redirect as string) || DEFAULT_HOME_PATH,
+          (to.query?.redirect as string) ||
+            userStore.userInfo?.homePath ||
+            DEFAULT_HOME_PATH,
         );
       }
       return true;
@@ -72,7 +74,10 @@ function setupAccessGuard(router: Router) {
         return {
           path: LOGIN_PATH,
           // 如不需要，直接删除 query
-          query: { redirect: encodeURIComponent(to.fullPath) },
+          query:
+            to.fullPath === DEFAULT_HOME_PATH
+              ? {}
+              : { redirect: encodeURIComponent(to.fullPath) },
           // 携带当前跳转的页面，登录后重新跳转该页面
           replace: true,
         };
@@ -102,7 +107,10 @@ function setupAccessGuard(router: Router) {
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
     accessStore.setIsAccessChecked(true);
-    const redirectPath = (from.query.redirect ?? to.fullPath) as string;
+    const redirectPath = (from.query.redirect ??
+      (to.path === DEFAULT_HOME_PATH
+        ? userInfo.homePath || DEFAULT_HOME_PATH
+        : to.fullPath)) as string;
 
     return {
       ...router.resolve(decodeURIComponent(redirectPath)),
diff --git a/apps/vben5/apps/backend-mock/api/table/list.ts b/apps/vben5/apps/backend-mock/api/table/list.ts
index 4a0db94ec..55b88eaaa 100644
--- a/apps/vben5/apps/backend-mock/api/table/list.ts
+++ b/apps/vben5/apps/backend-mock/api/table/list.ts
@@ -43,6 +43,31 @@ export default eventHandler(async (event) => {
 
   await sleep(600);
 
-  const { page, pageSize } = getQuery(event);
-  return usePageResponseSuccess(page as string, pageSize as string, mockData);
+  const { page, pageSize, sortBy, sortOrder } = getQuery(event);
+  const listData = structuredClone(mockData);
+  if (sortBy && Reflect.has(listData[0], sortBy as string)) {
+    listData.sort((a, b) => {
+      if (sortOrder === 'asc') {
+        if (sortBy === 'price') {
+          return (
+            Number.parseFloat(a[sortBy as string]) -
+            Number.parseFloat(b[sortBy as string])
+          );
+        } else {
+          return a[sortBy as string] > b[sortBy as string] ? 1 : -1;
+        }
+      } else {
+        if (sortBy === 'price') {
+          return (
+            Number.parseFloat(b[sortBy as string]) -
+            Number.parseFloat(a[sortBy as string])
+          );
+        } else {
+          return a[sortBy as string] < b[sortBy as string] ? 1 : -1;
+        }
+      }
+    });
+  }
+
+  return usePageResponseSuccess(page as string, pageSize as string, listData);
 });
diff --git a/apps/vben5/apps/backend-mock/utils/mock-data.ts b/apps/vben5/apps/backend-mock/utils/mock-data.ts
index 71970a285..057588e36 100644
--- a/apps/vben5/apps/backend-mock/utils/mock-data.ts
+++ b/apps/vben5/apps/backend-mock/utils/mock-data.ts
@@ -4,6 +4,7 @@ export interface UserInfo {
   realName: string;
   roles: string[];
   username: string;
+  homePath?: string;
 }
 
 export const MOCK_USERS: UserInfo[] = [
@@ -20,6 +21,7 @@ export const MOCK_USERS: UserInfo[] = [
     realName: 'Admin',
     roles: ['admin'],
     username: 'admin',
+    homePath: '/workspace',
   },
   {
     id: 2,
@@ -27,6 +29,7 @@ export const MOCK_USERS: UserInfo[] = [
     realName: 'Jack',
     roles: ['user'],
     username: 'jack',
+    homePath: '/analytics',
   },
 ];
 
diff --git a/apps/vben5/apps/web-antd/package.json b/apps/vben5/apps/web-antd/package.json
index 42afa3c69..bbc5593f0 100644
--- a/apps/vben5/apps/web-antd/package.json
+++ b/apps/vben5/apps/web-antd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/apps/web-antd/src/adapter/component/index.ts b/apps/vben5/apps/web-antd/src/adapter/component/index.ts
index 1afa62174..a43a8280a 100644
--- a/apps/vben5/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/vben5/apps/web-antd/src/adapter/component/index.ts
@@ -8,7 +8,7 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
-import { globalShareState } from '@vben/common-ui';
+import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import {
@@ -48,12 +48,15 @@ const withDefaultPlaceholder = <T extends Component>(
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiSelect'
+  | 'ApiTreeSelect'
   | 'AutoComplete'
   | 'Checkbox'
   | 'CheckboxGroup'
   | 'DatePicker'
   | 'DefaultButton'
   | 'Divider'
+  | 'IconPicker'
   | 'Input'
   | 'InputNumber'
   | 'InputPassword'
@@ -77,7 +80,38 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-
+    ApiSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: Select,
+          loadingSlot: 'suffixIcon',
+          visibleEvent: 'onDropdownVisibleChange',
+          modelPropName: 'value',
+        },
+        slots,
+      );
+    },
+    ApiTreeSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: TreeSelect,
+          fieldNames: { label: 'label', value: 'value', children: 'children' },
+          loadingSlot: 'suffixIcon',
+          modelPropName: 'value',
+          optionsPropName: 'treeData',
+          visibleEvent: 'onVisibleChange',
+        },
+        slots,
+      );
+    },
     AutoComplete,
     Checkbox,
     CheckboxGroup,
@@ -87,6 +121,13 @@ async function initComponentAdapter() {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
+    IconPicker: (props, { attrs, slots }) => {
+      return h(
+        IconPicker,
+        { iconSlot: 'addonAfter', inputComponent: Input, ...props, ...attrs },
+        slots,
+      );
+    },
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
diff --git a/apps/vben5/apps/web-antd/src/router/guard.ts b/apps/vben5/apps/web-antd/src/router/guard.ts
index fce5a892c..cbb5235ec 100644
--- a/apps/vben5/apps/web-antd/src/router/guard.ts
+++ b/apps/vben5/apps/web-antd/src/router/guard.ts
@@ -54,7 +54,9 @@ function setupAccessGuard(router: Router) {
     if (coreRouteNames.includes(to.name as string)) {
       if (to.path === LOGIN_PATH && accessStore.accessToken) {
         return decodeURIComponent(
-          (to.query?.redirect as string) || DEFAULT_HOME_PATH,
+          (to.query?.redirect as string) ||
+            userStore.userInfo?.homePath ||
+            DEFAULT_HOME_PATH,
         );
       }
       return true;
@@ -72,7 +74,10 @@ function setupAccessGuard(router: Router) {
         return {
           path: LOGIN_PATH,
           // 如不需要，直接删除 query
-          query: { redirect: encodeURIComponent(to.fullPath) },
+          query:
+            to.fullPath === DEFAULT_HOME_PATH
+              ? {}
+              : { redirect: encodeURIComponent(to.fullPath) },
           // 携带当前跳转的页面，登录后重新跳转该页面
           replace: true,
         };
@@ -102,7 +107,10 @@ function setupAccessGuard(router: Router) {
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
     accessStore.setIsAccessChecked(true);
-    const redirectPath = (from.query.redirect ?? to.fullPath) as string;
+    const redirectPath = (from.query.redirect ??
+      (to.path === DEFAULT_HOME_PATH
+        ? userInfo.homePath || DEFAULT_HOME_PATH
+        : to.fullPath)) as string;
 
     return {
       ...router.resolve(decodeURIComponent(redirectPath)),
diff --git a/apps/vben5/apps/web-antd/src/views/_core/authentication/code-login.vue b/apps/vben5/apps/web-antd/src/views/_core/authentication/code-login.vue
index 556b273af..acfd1fd78 100644
--- a/apps/vben5/apps/web-antd/src/views/_core/authentication/code-login.vue
+++ b/apps/vben5/apps/web-antd/src/views/_core/authentication/code-login.vue
@@ -10,6 +10,7 @@ import { $t } from '@vben/locales';
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
+const CODE_LENGTH = 6;
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
@@ -30,6 +31,7 @@ const formSchema = computed((): VbenFormSchema[] => {
     {
       component: 'VbenPinInput',
       componentProps: {
+        codeLength: CODE_LENGTH,
         createText: (countdown: number) => {
           const text =
             countdown > 0
@@ -41,7 +43,9 @@ const formSchema = computed((): VbenFormSchema[] => {
       },
       fieldName: 'code',
       label: $t('authentication.code'),
-      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+      rules: z.string().length(CODE_LENGTH, {
+        message: $t('authentication.codeTip', [CODE_LENGTH]),
+      }),
     },
   ];
 });
diff --git a/apps/vben5/apps/web-ele/package.json b/apps/vben5/apps/web-ele/package.json
index 430156951..a02376ee8 100644
--- a/apps/vben5/apps/web-ele/package.json
+++ b/apps/vben5/apps/web-ele/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-ele",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/apps/web-ele/src/adapter/component/index.ts b/apps/vben5/apps/web-ele/src/adapter/component/index.ts
index ebf9dd3e1..818c8c4e1 100644
--- a/apps/vben5/apps/web-ele/src/adapter/component/index.ts
+++ b/apps/vben5/apps/web-ele/src/adapter/component/index.ts
@@ -4,24 +4,28 @@
  */
 
 import type { BaseFormComponentType } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
-import { globalShareState } from '@vben/common-ui';
+import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import {
   ElButton,
   ElCheckbox,
+  ElCheckboxButton,
   ElCheckboxGroup,
   ElDatePicker,
   ElDivider,
   ElInput,
   ElInputNumber,
   ElNotification,
+  ElRadio,
+  ElRadioButton,
   ElRadioGroup,
-  ElSelect,
+  ElSelectV2,
   ElSpace,
   ElSwitch,
   ElTimePicker,
@@ -41,10 +45,13 @@ const withDefaultPlaceholder = <T extends Component>(
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiSelect'
+  | 'ApiTreeSelect'
   | 'Checkbox'
   | 'CheckboxGroup'
   | 'DatePicker'
   | 'Divider'
+  | 'IconPicker'
   | 'Input'
   | 'InputNumber'
   | 'RadioGroup'
@@ -61,9 +68,57 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-
+    ApiSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: ElSelectV2,
+          loadingSlot: 'loading',
+          visibleEvent: 'onVisibleChange',
+        },
+        slots,
+      );
+    },
+    ApiTreeSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: ElTreeSelect,
+          props: { label: 'label', children: 'children' },
+          nodeKey: 'value',
+          loadingSlot: 'loading',
+          optionsPropName: 'data',
+          visibleEvent: 'onVisibleChange',
+        },
+        slots,
+      );
+    },
     Checkbox: ElCheckbox,
-    CheckboxGroup: ElCheckboxGroup,
+    CheckboxGroup: (props, { attrs, slots }) => {
+      let defaultSlot;
+      if (Reflect.has(slots, 'default')) {
+        defaultSlot = slots.default;
+      } else {
+        const { options, isButton } = attrs;
+        if (Array.isArray(options)) {
+          defaultSlot = () =>
+            options.map((option) =>
+              h(isButton ? ElCheckboxButton : ElCheckbox, option),
+            );
+        }
+      }
+      return h(
+        ElCheckboxGroup,
+        { ...props, ...attrs },
+        { ...slots, default: defaultSlot },
+      );
+    },
     // 自定义默认按钮
     DefaultButton: (props, { attrs, slots }) => {
       return h(ElButton, { ...props, attrs, type: 'info' }, slots);
@@ -73,14 +128,87 @@ async function initComponentAdapter() {
       return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider: ElDivider,
+    IconPicker: (props, { attrs, slots }) => {
+      return h(
+        IconPicker,
+        {
+          iconSlot: 'append',
+          modelValueProp: 'model-value',
+          inputComponent: ElInput,
+          ...props,
+          ...attrs,
+        },
+        slots,
+      );
+    },
     Input: withDefaultPlaceholder(ElInput, 'input'),
     InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
-    RadioGroup: ElRadioGroup,
-    Select: withDefaultPlaceholder(ElSelect, 'select'),
+    RadioGroup: (props, { attrs, slots }) => {
+      let defaultSlot;
+      if (Reflect.has(slots, 'default')) {
+        defaultSlot = slots.default;
+      } else {
+        const { options } = attrs;
+        if (Array.isArray(options)) {
+          defaultSlot = () =>
+            options.map((option) =>
+              h(attrs.isButton ? ElRadioButton : ElRadio, option),
+            );
+        }
+      }
+      return h(
+        ElRadioGroup,
+        { ...props, ...attrs },
+        { ...slots, default: defaultSlot },
+      );
+    },
+    Select: (props, { attrs, slots }) => {
+      return h(ElSelectV2, { ...props, attrs }, slots);
+    },
     Space: ElSpace,
     Switch: ElSwitch,
-    TimePicker: ElTimePicker,
-    DatePicker: ElDatePicker,
+    TimePicker: (props, { attrs, slots }) => {
+      const { name, id, isRange } = props;
+      const extraProps: Recordable<any> = {};
+      if (isRange) {
+        if (name && !Array.isArray(name)) {
+          extraProps.name = [name, `${name}_end`];
+        }
+        if (id && !Array.isArray(id)) {
+          extraProps.id = [id, `${id}_end`];
+        }
+      }
+      return h(
+        ElTimePicker,
+        {
+          ...props,
+          ...attrs,
+          ...extraProps,
+        },
+        slots,
+      );
+    },
+    DatePicker: (props, { attrs, slots }) => {
+      const { name, id, type } = props;
+      const extraProps: Recordable<any> = {};
+      if (type && type.includes('range')) {
+        if (name && !Array.isArray(name)) {
+          extraProps.name = [name, `${name}_end`];
+        }
+        if (id && !Array.isArray(id)) {
+          extraProps.id = [id, `${id}_end`];
+        }
+      }
+      return h(
+        ElDatePicker,
+        {
+          ...props,
+          ...attrs,
+          ...extraProps,
+        },
+        slots,
+      );
+    },
     TreeSelect: withDefaultPlaceholder(ElTreeSelect, 'select'),
     Upload: ElUpload,
   };
diff --git a/apps/vben5/apps/web-ele/src/adapter/form.ts b/apps/vben5/apps/web-ele/src/adapter/form.ts
index 1b6e04719..13ae9c428 100644
--- a/apps/vben5/apps/web-ele/src/adapter/form.ts
+++ b/apps/vben5/apps/web-ele/src/adapter/form.ts
@@ -12,6 +12,7 @@ setupVbenForm<ComponentType>({
   config: {
     modelPropNameMap: {
       Upload: 'fileList',
+      CheckboxGroup: 'model-value',
     },
   },
   defineRules: {
diff --git a/apps/vben5/apps/web-ele/src/bootstrap.ts b/apps/vben5/apps/web-ele/src/bootstrap.ts
index de1884730..ad1dce0f9 100644
--- a/apps/vben5/apps/web-ele/src/bootstrap.ts
+++ b/apps/vben5/apps/web-ele/src/bootstrap.ts
@@ -7,6 +7,7 @@ import '@vben/styles';
 import '@vben/styles/ele';
 
 import { useTitle } from '@vueuse/core';
+import { ElLoading } from 'element-plus';
 
 import { $t, setupI18n } from '#/locales';
 
@@ -19,6 +20,9 @@ async function bootstrap(namespace: string) {
   await initComponentAdapter();
   const app = createApp(App);
 
+  // 注册Element Plus提供的v-loading指令
+  app.directive('loading', ElLoading.directive);
+
   // 国际化 i18n 配置
   await setupI18n(app);
 
diff --git a/apps/vben5/apps/web-ele/src/locales/langs/en-US/demos.json b/apps/vben5/apps/web-ele/src/locales/langs/en-US/demos.json
index 056da0dae..6eddebb53 100644
--- a/apps/vben5/apps/web-ele/src/locales/langs/en-US/demos.json
+++ b/apps/vben5/apps/web-ele/src/locales/langs/en-US/demos.json
@@ -1,6 +1,7 @@
 {
   "title": "Demos",
   "elementPlus": "Element Plus",
+  "form": "Form",
   "vben": {
     "title": "Project",
     "about": "About",
diff --git a/apps/vben5/apps/web-ele/src/locales/langs/zh-CN/demos.json b/apps/vben5/apps/web-ele/src/locales/langs/zh-CN/demos.json
index 0620e16a1..ba6d6ccd0 100644
--- a/apps/vben5/apps/web-ele/src/locales/langs/zh-CN/demos.json
+++ b/apps/vben5/apps/web-ele/src/locales/langs/zh-CN/demos.json
@@ -1,6 +1,7 @@
 {
   "title": "演示",
   "elementPlus": "Element Plus",
+  "form": "表单演示",
   "vben": {
     "title": "项目",
     "about": "关于",
diff --git a/apps/vben5/apps/web-ele/src/router/guard.ts b/apps/vben5/apps/web-ele/src/router/guard.ts
index fce5a892c..cbb5235ec 100644
--- a/apps/vben5/apps/web-ele/src/router/guard.ts
+++ b/apps/vben5/apps/web-ele/src/router/guard.ts
@@ -54,7 +54,9 @@ function setupAccessGuard(router: Router) {
     if (coreRouteNames.includes(to.name as string)) {
       if (to.path === LOGIN_PATH && accessStore.accessToken) {
         return decodeURIComponent(
-          (to.query?.redirect as string) || DEFAULT_HOME_PATH,
+          (to.query?.redirect as string) ||
+            userStore.userInfo?.homePath ||
+            DEFAULT_HOME_PATH,
         );
       }
       return true;
@@ -72,7 +74,10 @@ function setupAccessGuard(router: Router) {
         return {
           path: LOGIN_PATH,
           // 如不需要，直接删除 query
-          query: { redirect: encodeURIComponent(to.fullPath) },
+          query:
+            to.fullPath === DEFAULT_HOME_PATH
+              ? {}
+              : { redirect: encodeURIComponent(to.fullPath) },
           // 携带当前跳转的页面，登录后重新跳转该页面
           replace: true,
         };
@@ -102,7 +107,10 @@ function setupAccessGuard(router: Router) {
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
     accessStore.setIsAccessChecked(true);
-    const redirectPath = (from.query.redirect ?? to.fullPath) as string;
+    const redirectPath = (from.query.redirect ??
+      (to.path === DEFAULT_HOME_PATH
+        ? userInfo.homePath || DEFAULT_HOME_PATH
+        : to.fullPath)) as string;
 
     return {
       ...router.resolve(decodeURIComponent(redirectPath)),
diff --git a/apps/vben5/apps/web-ele/src/router/routes/modules/demos.ts b/apps/vben5/apps/web-ele/src/router/routes/modules/demos.ts
index 223efcf9d..90cc2f11c 100644
--- a/apps/vben5/apps/web-ele/src/router/routes/modules/demos.ts
+++ b/apps/vben5/apps/web-ele/src/router/routes/modules/demos.ts
@@ -23,6 +23,14 @@ const routes: RouteRecordRaw[] = [
         path: '/demos/element',
         component: () => import('#/views/demos/element/index.vue'),
       },
+      {
+        meta: {
+          title: $t('demos.form'),
+        },
+        name: 'BasicForm',
+        path: '/demos/form',
+        component: () => import('#/views/demos/form/basic.vue'),
+      },
     ],
   },
 ];
diff --git a/apps/vben5/apps/web-ele/src/views/_core/authentication/code-login.vue b/apps/vben5/apps/web-ele/src/views/_core/authentication/code-login.vue
index 556b273af..acfd1fd78 100644
--- a/apps/vben5/apps/web-ele/src/views/_core/authentication/code-login.vue
+++ b/apps/vben5/apps/web-ele/src/views/_core/authentication/code-login.vue
@@ -10,6 +10,7 @@ import { $t } from '@vben/locales';
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
+const CODE_LENGTH = 6;
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
@@ -30,6 +31,7 @@ const formSchema = computed((): VbenFormSchema[] => {
     {
       component: 'VbenPinInput',
       componentProps: {
+        codeLength: CODE_LENGTH,
         createText: (countdown: number) => {
           const text =
             countdown > 0
@@ -41,7 +43,9 @@ const formSchema = computed((): VbenFormSchema[] => {
       },
       fieldName: 'code',
       label: $t('authentication.code'),
-      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+      rules: z.string().length(CODE_LENGTH, {
+        message: $t('authentication.codeTip', [CODE_LENGTH]),
+      }),
     },
   ];
 });
diff --git a/apps/vben5/apps/web-ele/src/views/demos/element/index.vue b/apps/vben5/apps/web-ele/src/views/demos/element/index.vue
index 55bc25713..0a7012d63 100644
--- a/apps/vben5/apps/web-ele/src/views/demos/element/index.vue
+++ b/apps/vben5/apps/web-ele/src/views/demos/element/index.vue
@@ -61,49 +61,57 @@ const segmentedOptions = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
     description="支持多语言，主题功能集成切换等"
     title="Element Plus组件使用演示"
   >
-    <ElCard class="mb-5">
-      <template #header> 按钮 </template>
-      <ElSpace>
-        <ElButton text>Text</ElButton>
-        <ElButton>Default</ElButton>
-        <ElButton type="primary"> Primary </ElButton>
-        <ElButton type="info"> Info </ElButton>
-        <ElButton type="success"> Success </ElButton>
-        <ElButton type="warning"> Warning </ElButton>
-        <ElButton type="danger"> Error </ElButton>
-      </ElSpace>
-    </ElCard>
-    <ElCard class="mb-5">
-      <template #header> Message </template>
-      <ElSpace>
-        <ElButton type="info" @click="info"> 信息 </ElButton>
-        <ElButton type="danger" @click="error"> 错误 </ElButton>
-        <ElButton type="warning" @click="warning"> 警告 </ElButton>
-        <ElButton type="success" @click="success"> 成功 </ElButton>
-      </ElSpace>
-    </ElCard>
-    <ElCard class="mb-5">
-      <template #header> Notification </template>
-      <ElSpace>
-        <ElButton type="info" @click="notify('info')"> 信息 </ElButton>
-        <ElButton type="danger" @click="notify('error')"> 错误 </ElButton>
-        <ElButton type="warning" @click="notify('warning')"> 警告 </ElButton>
-        <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
-      </ElSpace>
-    </ElCard>
-    <ElCard class="mb-5">
-      <template #header> Segmented </template>
-      <ElSegmented
-        v-model="segmentedValue"
-        :options="segmentedOptions"
-        size="large"
-      />
-    </ElCard>
-    <ElCard class="mb-5">
-      <ElTable :data="tableData" stripe>
-        <ElTable.TableColumn label="测试列1" prop="prop1" />
-        <ElTable.TableColumn label="测试列2" prop="prop2" />
-      </ElTable>
-    </ElCard>
+    <div class="flex flex-wrap gap-5">
+      <ElCard class="mb-5 w-auto">
+        <template #header> 按钮 </template>
+        <ElSpace>
+          <ElButton text>Text</ElButton>
+          <ElButton>Default</ElButton>
+          <ElButton type="primary"> Primary </ElButton>
+          <ElButton type="info"> Info </ElButton>
+          <ElButton type="success"> Success </ElButton>
+          <ElButton type="warning"> Warning </ElButton>
+          <ElButton type="danger"> Error </ElButton>
+        </ElSpace>
+      </ElCard>
+      <ElCard class="mb-5 w-80">
+        <template #header> Message </template>
+        <ElSpace>
+          <ElButton type="info" @click="info"> 信息 </ElButton>
+          <ElButton type="danger" @click="error"> 错误 </ElButton>
+          <ElButton type="warning" @click="warning"> 警告 </ElButton>
+          <ElButton type="success" @click="success"> 成功 </ElButton>
+        </ElSpace>
+      </ElCard>
+      <ElCard class="mb-5 w-80">
+        <template #header> Notification </template>
+        <ElSpace>
+          <ElButton type="info" @click="notify('info')"> 信息 </ElButton>
+          <ElButton type="danger" @click="notify('error')"> 错误 </ElButton>
+          <ElButton type="warning" @click="notify('warning')"> 警告 </ElButton>
+          <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
+        </ElSpace>
+      </ElCard>
+      <ElCard class="mb-5 w-auto">
+        <template #header> Segmented </template>
+        <ElSegmented
+          v-model="segmentedValue"
+          :options="segmentedOptions"
+          size="large"
+        />
+      </ElCard>
+      <ElCard class="mb-5 w-80">
+        <template #header> V-Loading </template>
+        <div class="flex size-72 items-center justify-center" v-loading="true">
+          一些演示的内容
+        </div>
+      </ElCard>
+      <ElCard class="mb-5 w-80">
+        <ElTable :data="tableData" stripe>
+          <ElTable.TableColumn label="测试列1" prop="prop1" />
+          <ElTable.TableColumn label="测试列2" prop="prop2" />
+        </ElTable>
+      </ElCard>
+    </div>
   </Page>
 </template>
diff --git a/apps/vben5/apps/web-ele/src/views/demos/form/basic.vue b/apps/vben5/apps/web-ele/src/views/demos/form/basic.vue
new file mode 100644
index 000000000..771665a66
--- /dev/null
+++ b/apps/vben5/apps/web-ele/src/views/demos/form/basic.vue
@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+import { h } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { ElButton, ElCard, ElCheckbox, ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getAllMenusApi } from '#/api';
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'horizontal',
+  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  handleSubmit: (values) => {
+    ElMessage.success(`表单数据：${JSON.stringify(values)}`);
+  },
+  schema: [
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: 'ApiSelect',
+      // 对应组件的参数
+      componentProps: {
+        // 菜单接口转options格式
+        afterFetch: (data: { name: string; path: string }[]) => {
+          return data.map((item: any) => ({
+            label: item.name,
+            value: item.path,
+          }));
+        },
+        // 菜单接口
+        api: getAllMenusApi,
+      },
+      // 字段名
+      fieldName: 'api',
+      // 界面显示的label
+      label: 'ApiSelect',
+    },
+    {
+      component: 'ApiTreeSelect',
+      // 对应组件的参数
+      componentProps: {
+        // 菜单接口
+        api: getAllMenusApi,
+        childrenField: 'children',
+        // 菜单接口转options格式
+        labelField: 'name',
+        valueField: 'path',
+      },
+      // 字段名
+      fieldName: 'apiTree',
+      // 界面显示的label
+      label: 'ApiTreeSelect',
+    },
+    {
+      component: 'Input',
+      fieldName: 'string',
+      label: 'String',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'number',
+      label: 'Number',
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'radio',
+      label: 'Radio',
+      componentProps: {
+        options: [
+          { value: 'A', label: 'A' },
+          { value: 'B', label: 'B' },
+          { value: 'C', label: 'C' },
+          { value: 'D', label: 'D' },
+          { value: 'E', label: 'E' },
+        ],
+      },
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'radioButton',
+      label: 'RadioButton',
+      componentProps: {
+        isButton: true,
+        options: ['A', 'B', 'C', 'D', 'E', 'F'].map((v) => ({
+          value: v,
+          label: `选项${v}`,
+        })),
+      },
+    },
+    {
+      component: 'CheckboxGroup',
+      fieldName: 'checkbox',
+      label: 'Checkbox',
+      componentProps: {
+        options: ['A', 'B', 'C'].map((v) => ({ value: v, label: `选项${v}` })),
+      },
+    },
+    {
+      component: 'CheckboxGroup',
+      fieldName: 'checkbox1',
+      label: 'Checkbox1',
+      renderComponentContent: () => {
+        return {
+          default: () => {
+            return ['A', 'B', 'C', 'D'].map((v) =>
+              h(ElCheckbox, { label: v, value: v }),
+            );
+          },
+        };
+      },
+    },
+    {
+      component: 'CheckboxGroup',
+      fieldName: 'checkbotton',
+      label: 'CheckBotton',
+      componentProps: {
+        isButton: true,
+        options: [
+          { value: 'A', label: '选项A' },
+          { value: 'B', label: '选项B' },
+          { value: 'C', label: '选项C' },
+        ],
+      },
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'date',
+      label: 'Date',
+    },
+    {
+      component: 'Select',
+      fieldName: 'select',
+      label: 'Select',
+      componentProps: {
+        filterable: true,
+        options: [
+          { value: 'A', label: '选项A' },
+          { value: 'B', label: '选项B' },
+          { value: 'C', label: '选项C' },
+        ],
+      },
+    },
+  ],
+});
+function setFormValues() {
+  formApi.setValues({
+    string: 'string',
+    number: 123,
+    radio: 'B',
+    radioButton: 'C',
+    checkbox: ['A', 'C'],
+    checkbotton: ['B', 'C'],
+    checkbox1: ['A', 'B'],
+    date: new Date(),
+    select: 'B',
+  });
+}
+</script>
+<template>
+  <Page
+    description="我们重新包装了CheckboxGroup、RadioGroup、Select，可以通过options属性传入选项属性数组以自动生成选项"
+    title="表单演示"
+  >
+    <ElCard>
+      <template #header>
+        <div class="flex items-center">
+          <span class="flex-auto">基础表单演示</span>
+          <ElButton type="primary" @click="setFormValues">设置表单值</ElButton>
+        </div>
+      </template>
+      <Form />
+    </ElCard>
+  </Page>
+</template>
diff --git a/apps/vben5/apps/web-naive/package.json b/apps/vben5/apps/web-naive/package.json
index 0710c3415..5bd3b1a74 100644
--- a/apps/vben5/apps/web-naive/package.json
+++ b/apps/vben5/apps/web-naive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/apps/web-naive/src/adapter/component/index.ts b/apps/vben5/apps/web-naive/src/adapter/component/index.ts
index c5dffddb8..545a61994 100644
--- a/apps/vben5/apps/web-naive/src/adapter/component/index.ts
+++ b/apps/vben5/apps/web-naive/src/adapter/component/index.ts
@@ -8,7 +8,7 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
-import { globalShareState } from '@vben/common-ui';
+import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import {
@@ -19,6 +19,8 @@ import {
   NDivider,
   NInput,
   NInputNumber,
+  NRadio,
+  NRadioButton,
   NRadioGroup,
   NSelect,
   NSpace,
@@ -42,10 +44,13 @@ const withDefaultPlaceholder = <T extends Component>(
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiSelect'
+  | 'ApiTreeSelect'
   | 'Checkbox'
   | 'CheckboxGroup'
   | 'DatePicker'
   | 'Divider'
+  | 'IconPicker'
   | 'Input'
   | 'InputNumber'
   | 'RadioGroup'
@@ -63,8 +68,54 @@ async function initComponentAdapter() {
     // Button: () =>
     // import('xxx').then((res) => res.Button),
 
+    ApiSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: NSelect,
+          modelPropName: 'value',
+        },
+        slots,
+      );
+    },
+    ApiTreeSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: NTreeSelect,
+          nodeKey: 'value',
+          loadingSlot: 'arrow',
+          keyField: 'value',
+          modelPropName: 'value',
+          optionsPropName: 'options',
+          visibleEvent: 'onVisibleChange',
+        },
+        slots,
+      );
+    },
     Checkbox: NCheckbox,
-    CheckboxGroup: NCheckboxGroup,
+    CheckboxGroup: (props, { attrs, slots }) => {
+      let defaultSlot;
+      if (Reflect.has(slots, 'default')) {
+        defaultSlot = slots.default;
+      } else {
+        const { options } = attrs;
+        if (Array.isArray(options)) {
+          defaultSlot = () => options.map((option) => h(NCheckbox, option));
+        }
+      }
+      return h(
+        NCheckboxGroup,
+        { ...props, ...attrs },
+        { default: defaultSlot },
+      );
+    },
     DatePicker: NDatePicker,
     // 自定义默认按钮
     DefaultButton: (props, { attrs, slots }) => {
@@ -75,9 +126,37 @@ async function initComponentAdapter() {
       return h(NButton, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider: NDivider,
+    IconPicker: (props, { attrs, slots }) => {
+      return h(
+        IconPicker,
+        { iconSlot: 'suffix', inputComponent: NInput, ...props, ...attrs },
+        slots,
+      );
+    },
     Input: withDefaultPlaceholder(NInput, 'input'),
     InputNumber: withDefaultPlaceholder(NInputNumber, 'input'),
-    RadioGroup: NRadioGroup,
+    RadioGroup: (props, { attrs, slots }) => {
+      let defaultSlot;
+      if (Reflect.has(slots, 'default')) {
+        defaultSlot = slots.default;
+      } else {
+        const { options } = attrs;
+        if (Array.isArray(options)) {
+          defaultSlot = () =>
+            options.map((option) =>
+              h(attrs.isButton ? NRadioButton : NRadio, option),
+            );
+        }
+      }
+      const groupRender = h(
+        NRadioGroup,
+        { ...props, ...attrs },
+        { default: defaultSlot },
+      );
+      return attrs.isButton
+        ? h(NSpace, { vertical: true }, () => groupRender)
+        : groupRender;
+    },
     Select: withDefaultPlaceholder(NSelect, 'select'),
     Space: NSpace,
     Switch: NSwitch,
diff --git a/apps/vben5/apps/web-naive/src/adapter/form.ts b/apps/vben5/apps/web-naive/src/adapter/form.ts
index 2c3cee875..2f2ed2abe 100644
--- a/apps/vben5/apps/web-naive/src/adapter/form.ts
+++ b/apps/vben5/apps/web-naive/src/adapter/form.ts
@@ -10,8 +10,6 @@ import { $t } from '@vben/locales';
 
 setupVbenForm<ComponentType>({
   config: {
-    // naive-ui组件不接受onChang事件，所以需要禁用
-    disabledOnChangeListener: true,
     // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
     emptyStateValue: null,
     baseModelPropName: 'value',
diff --git a/apps/vben5/apps/web-naive/src/locales/langs/en-US/demos.json b/apps/vben5/apps/web-naive/src/locales/langs/en-US/demos.json
index 9fdffc765..839fc2e68 100644
--- a/apps/vben5/apps/web-naive/src/locales/langs/en-US/demos.json
+++ b/apps/vben5/apps/web-naive/src/locales/langs/en-US/demos.json
@@ -2,6 +2,7 @@
   "title": "Demos",
   "naive": "Naive UI",
   "table": "Table",
+  "form": "Form",
   "vben": {
     "title": "Project",
     "about": "About",
diff --git a/apps/vben5/apps/web-naive/src/locales/langs/zh-CN/demos.json b/apps/vben5/apps/web-naive/src/locales/langs/zh-CN/demos.json
index 79b54fa21..e0d7e616d 100644
--- a/apps/vben5/apps/web-naive/src/locales/langs/zh-CN/demos.json
+++ b/apps/vben5/apps/web-naive/src/locales/langs/zh-CN/demos.json
@@ -2,6 +2,7 @@
   "title": "演示",
   "naive": "Naive UI",
   "table": "Table",
+  "form": "表单",
   "vben": {
     "title": "项目",
     "about": "关于",
diff --git a/apps/vben5/apps/web-naive/src/router/guard.ts b/apps/vben5/apps/web-naive/src/router/guard.ts
index c95d994ec..281ea31a6 100644
--- a/apps/vben5/apps/web-naive/src/router/guard.ts
+++ b/apps/vben5/apps/web-naive/src/router/guard.ts
@@ -54,7 +54,9 @@ function setupAccessGuard(router: Router) {
     if (coreRouteNames.includes(to.name as string)) {
       if (to.path === LOGIN_PATH && accessStore.accessToken) {
         return decodeURIComponent(
-          (to.query?.redirect as string) || DEFAULT_HOME_PATH,
+          (to.query?.redirect as string) ||
+            userStore.userInfo?.homePath ||
+            DEFAULT_HOME_PATH,
         );
       }
       return true;
@@ -72,7 +74,10 @@ function setupAccessGuard(router: Router) {
         return {
           path: LOGIN_PATH,
           // 如不需要，直接删除 query
-          query: { redirect: encodeURIComponent(to.fullPath) },
+          query:
+            to.fullPath === DEFAULT_HOME_PATH
+              ? {}
+              : { redirect: encodeURIComponent(to.fullPath) },
           // 携带当前跳转的页面，登录后重新跳转该页面
           replace: true,
         };
@@ -101,7 +106,10 @@ function setupAccessGuard(router: Router) {
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
     accessStore.setIsAccessChecked(true);
-    const redirectPath = (from.query.redirect ?? to.fullPath) as string;
+    const redirectPath = (from.query.redirect ??
+      (to.path === DEFAULT_HOME_PATH
+        ? userInfo.homePath || DEFAULT_HOME_PATH
+        : to.fullPath)) as string;
 
     return {
       ...router.resolve(decodeURIComponent(redirectPath)),
diff --git a/apps/vben5/apps/web-naive/src/router/routes/modules/demos.ts b/apps/vben5/apps/web-naive/src/router/routes/modules/demos.ts
index cf5658800..d0631cb53 100644
--- a/apps/vben5/apps/web-naive/src/router/routes/modules/demos.ts
+++ b/apps/vben5/apps/web-naive/src/router/routes/modules/demos.ts
@@ -31,6 +31,14 @@ const routes: RouteRecordRaw[] = [
         path: '/demos/table',
         component: () => import('#/views/demos/table/index.vue'),
       },
+      {
+        meta: {
+          title: $t('demos.form'),
+        },
+        name: 'Form',
+        path: '/demos/form',
+        component: () => import('#/views/demos/form/basic.vue'),
+      },
     ],
   },
 ];
diff --git a/apps/vben5/apps/web-naive/src/views/_core/authentication/code-login.vue b/apps/vben5/apps/web-naive/src/views/_core/authentication/code-login.vue
index 556b273af..acfd1fd78 100644
--- a/apps/vben5/apps/web-naive/src/views/_core/authentication/code-login.vue
+++ b/apps/vben5/apps/web-naive/src/views/_core/authentication/code-login.vue
@@ -10,6 +10,7 @@ import { $t } from '@vben/locales';
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
+const CODE_LENGTH = 6;
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
@@ -30,6 +31,7 @@ const formSchema = computed((): VbenFormSchema[] => {
     {
       component: 'VbenPinInput',
       componentProps: {
+        codeLength: CODE_LENGTH,
         createText: (countdown: number) => {
           const text =
             countdown > 0
@@ -41,7 +43,9 @@ const formSchema = computed((): VbenFormSchema[] => {
       },
       fieldName: 'code',
       label: $t('authentication.code'),
-      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+      rules: z.string().length(CODE_LENGTH, {
+        message: $t('authentication.codeTip', [CODE_LENGTH]),
+      }),
     },
   ];
 });
diff --git a/apps/vben5/apps/web-naive/src/views/demos/form/basic.vue b/apps/vben5/apps/web-naive/src/views/demos/form/basic.vue
new file mode 100644
index 000000000..7d04ff4d9
--- /dev/null
+++ b/apps/vben5/apps/web-naive/src/views/demos/form/basic.vue
@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { NButton, NCard, useMessage } from 'naive-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { getAllMenusApi } from '#/api';
+
+const message = useMessage();
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'horizontal',
+  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  handleSubmit: (values) => {
+    message.success(`表单数据：${JSON.stringify(values)}`);
+  },
+  schema: [
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: 'ApiSelect',
+      // 对应组件的参数
+      componentProps: {
+        // 菜单接口转options格式
+        afterFetch: (data: { name: string; path: string }[]) => {
+          return data.map((item: any) => ({
+            label: item.name,
+            value: item.path,
+          }));
+        },
+        // 菜单接口
+        api: getAllMenusApi,
+      },
+      // 字段名
+      fieldName: 'api',
+      // 界面显示的label
+      label: 'ApiSelect',
+    },
+    {
+      component: 'ApiTreeSelect',
+      // 对应组件的参数
+      componentProps: {
+        // 菜单接口
+        api: getAllMenusApi,
+        childrenField: 'children',
+        // 菜单接口转options格式
+        labelField: 'name',
+        valueField: 'path',
+      },
+      // 字段名
+      fieldName: 'apiTree',
+      // 界面显示的label
+      label: 'ApiTreeSelect',
+    },
+    {
+      component: 'Input',
+      fieldName: 'string',
+      label: 'String',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'number',
+      label: 'Number',
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'radio',
+      label: 'Radio',
+      componentProps: {
+        options: [
+          { value: 'A', label: 'A' },
+          { value: 'B', label: 'B' },
+          { value: 'C', label: 'C' },
+          { value: 'D', label: 'D' },
+          { value: 'E', label: 'E' },
+        ],
+      },
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'radioButton',
+      label: 'RadioButton',
+      componentProps: {
+        isButton: true,
+        class: 'flex flex-wrap', // 如果选项过多，可以添加class来自动折叠
+        options: [
+          { value: 'A', label: '选项A' },
+          { value: 'B', label: '选项B' },
+          { value: 'C', label: '选项C' },
+          { value: 'D', label: '选项D' },
+          { value: 'E', label: '选项E' },
+          { value: 'F', label: '选项F' },
+        ],
+      },
+    },
+    {
+      component: 'CheckboxGroup',
+      fieldName: 'checkbox',
+      label: 'Checkbox',
+      componentProps: {
+        options: [
+          { value: 'A', label: '选项A' },
+          { value: 'B', label: '选项B' },
+          { value: 'C', label: '选项C' },
+        ],
+      },
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'date',
+      label: 'Date',
+    },
+  ],
+});
+function setFormValues() {
+  formApi.setValues({
+    string: 'string',
+    number: 123,
+    radio: 'B',
+    radioButton: 'C',
+    checkbox: ['A', 'C'],
+    date: Date.now(),
+  });
+}
+</script>
+<template>
+  <Page
+    description="表单适配器重新包装了CheckboxGroup和RadioGroup，可以通过options属性传递选项数据（选项数据将作为子组件的属性）"
+    title="表单演示"
+  >
+    <NCard title="基础表单">
+      <template #header-extra>
+        <NButton type="primary" @click="setFormValues">设置表单值</NButton>
+      </template>
+      <Form />
+    </NCard>
+  </Page>
+</template>
diff --git a/apps/vben5/docs/.vitepress/config/zh.mts b/apps/vben5/docs/.vitepress/config/zh.mts
index 6b31658ed..dff8ac280 100644
--- a/apps/vben5/docs/.vitepress/config/zh.mts
+++ b/apps/vben5/docs/.vitepress/config/zh.mts
@@ -148,10 +148,24 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
         },
       ],
     },
+    {
+      collapsed: false,
+      text: '布局组件',
+      items: [
+        {
+          link: 'layout-ui/page',
+          text: 'Page 页面',
+        },
+      ],
+    },
     {
       collapsed: false,
       text: '通用组件',
       items: [
+        {
+          link: 'common-ui/vben-api-component',
+          text: 'ApiComponent Api组件包装器',
+        },
         {
           link: 'common-ui/vben-modal',
           text: 'Modal 模态框',
@@ -172,6 +186,10 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
           link: 'common-ui/vben-count-to-animator',
           text: 'CountToAnimator 数字动画',
         },
+        {
+          link: 'common-ui/vben-ellipsis-text',
+          text: 'EllipsisText 省略文本',
+        },
       ],
     },
   ];
diff --git a/apps/vben5/docs/package.json b/apps/vben5/docs/package.json
index 15a87bb97..2d56a8ba5 100644
--- a/apps/vben5/docs/package.json
+++ b/apps/vben5/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "private": true,
   "scripts": {
     "build": "vitepress build",
diff --git a/apps/vben5/docs/src/_env/adapter/form.ts b/apps/vben5/docs/src/_env/adapter/form.ts
index 67e2483e5..d8b51c254 100644
--- a/apps/vben5/docs/src/_env/adapter/form.ts
+++ b/apps/vben5/docs/src/_env/adapter/form.ts
@@ -14,8 +14,6 @@ initComponentAdapter();
 setupVbenForm<ComponentType>({
   config: {
     baseModelPropName: 'value',
-    // naive-ui组件不接受onChang事件，所以需要禁用
-    disabledOnChangeListener: true,
     // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
     emptyStateValue: null,
     modelPropNameMap: {
diff --git a/apps/vben5/docs/src/components/common-ui/vben-api-component.md b/apps/vben5/docs/src/components/common-ui/vben-api-component.md
new file mode 100644
index 000000000..f275adfc2
--- /dev/null
+++ b/apps/vben5/docs/src/components/common-ui/vben-api-component.md
@@ -0,0 +1,152 @@
+---
+outline: deep
+---
+
+# Vben ApiComponent Api组件包装器
+
+框架提供的API“包装器”，它一般不独立使用，主要用于包装其它组件，为目标组件提供自动获取远程数据的能力，但仍然保持了目标组件的原始用法。
+
+::: info 写在前面
+
+我们在各个应用的组件适配器中，使用ApiComponent包装了Select、TreeSelect组件，使得这些组件可以自动获取远程数据并生成选项。其它类似的组件（比如Cascader）如有需要也可以参考示例代码自行进行包装。
+
+:::
+
+## 基础用法
+
+通过 `component` 传入其它组件的定义，并配置相关的其它属性（主要是一些名称映射）。包装组件将通过`api`获取数据（`beforerFetch`、`afterFetch`将分别在`api`运行前、运行后被调用），使用`resultField`从中提取数组，使用`valueField`、`labelField`等来从数据中提取value和label（如果提供了`childrenField`，会将其作为树形结构递归处理每一级数据），之后将处理好的数据通过`optionsPropName`指定的属性传递给目标组件。
+
+::: details 包装级联选择器,点击下拉时开始加载远程数据
+
+```vue
+<script lang="ts" setup>
+import { ApiComponent } from '@vben/common-ui';
+
+import { Cascader } from 'ant-design-vue';
+
+const treeData: Record<string, any> = [
+  {
+    label: '浙江',
+    value: 'zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: '杭州',
+        children: [
+          {
+            value: 'xihu',
+            label: '西湖',
+          },
+          {
+            value: 'sudi',
+            label: '苏堤',
+          },
+        ],
+      },
+      {
+        value: 'jiaxing',
+        label: '嘉兴',
+        children: [
+          {
+            value: 'wuzhen',
+            label: '乌镇',
+          },
+          {
+            value: 'meihuazhou',
+            label: '梅花洲',
+          },
+        ],
+      },
+      {
+        value: 'zhoushan',
+        label: '舟山',
+        children: [
+          {
+            value: 'putuoshan',
+            label: '普陀山',
+          },
+          {
+            value: 'taohuadao',
+            label: '桃花岛',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: '江苏',
+    value: 'jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: '南京',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: '中华门',
+          },
+          {
+            value: 'zijinshan',
+            label: '紫金山',
+          },
+          {
+            value: 'yuhuatai',
+            label: '雨花台',
+          },
+        ],
+      },
+    ],
+  },
+];
+/**
+ * 模拟请求接口
+ */
+function fetchApi(): Promise<Record<string, any>> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(treeData);
+    }, 1000);
+  });
+}
+</script>
+<template>
+  <ApiComponent
+    :api="fetchApi"
+    :component="Cascader"
+    :immediate="false"
+    children-field="children"
+    loading-slot="suffixIcon"
+    visible-event="onDropdownVisibleChange"
+  />
+</template>
+```
+
+:::
+
+## API
+
+### Props
+
+| 属性名 | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| component | 欲包装的组件 | `Component` | - |
+| numberToString | 是否将value从数字转为string | `boolean` | `false` |
+| api | 获取数据的函数 | `(arg?: any) => Promise<OptionsItem[] \| Record<string, any>>` | - |
+| params | 传递给api的参数 | `Record<string, any>` | - |
+| resultField | 从api返回的结果中提取options数组的字段名 | `string` | - |
+| labelField | label字段名 | `string` | `label` |
+| childrenField | 子级数据字段名，需要层级数据的组件可用 | `string` | `` |
+| valueField | value字段名 | `string` | `value` |
+| optionsPropName | 组件接收options数据的属性名称 | `string` | `options` |
+| modelPropName | 组件的双向绑定属性名，默认为modelValue。部分组件可能为value | `string` | `modelValue` |
+| immediate | 是否立即调用api | `boolean` | `true` |
+| alwaysLoad | 每次`visibleEvent`事件发生时都重新请求数据 | `boolean` | `false` |
+| beforeFetch | 在api请求之前的回调函数 | `AnyPromiseFunction<any, any>` | - |
+| afterFetch | 在api请求之后的回调函数 | `AnyPromiseFunction<any, any>` | - |
+| options | 直接传入选项数据，也作为api返回空数据时的后备数据 | `OptionsItem[]` | - |
+| visibleEvent | 触发重新请求数据的事件名 | `string` | - |
+| loadingSlot | 组件的插槽名称，用来显示一个"加载中"的图标 | `string` | - |
+
+```
+
+```
diff --git a/apps/vben5/docs/src/components/common-ui/vben-drawer.md b/apps/vben5/docs/src/components/common-ui/vben-drawer.md
index 939593fa9..7091570f1 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-drawer.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-drawer.md
@@ -74,6 +74,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 
 | 属性名 | 描述 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| appendToMain | 是否挂载到内容区域（默认挂载到body） | `boolean` | `false` |
 | title | 标题 | `string\|slot` | - |
 | titleTooltip | 标题提示信息 | `string\|slot` | - |
 | description | 描述信息 | `string\|slot` | - |
@@ -95,6 +96,13 @@ const [Drawer, drawerApi] = useVbenDrawer({
 | contentClass | modal内容区域的class | `string` | - |
 | footerClass | modal底部区域的class | `string` | - |
 | headerClass | modal顶部区域的class | `string` | - |
+| zIndex | 抽屉的ZIndex层级 | `number` | `1000` |
+
+::: info appendToMain
+
+`appendToMain`可以指定将抽屉挂载到内容区域，打开抽屉时，内容区域以外的部分（标签栏、导航菜单等等）不会被遮挡。默认情况下，抽屉会挂载到body上。但是：挂载到内容区域时，作为页面根容器的`Page`组件，需要设置`auto-content-height`属性，以便抽屉能够正确计算高度。
+
+:::
 
 ### Event
 
diff --git a/apps/vben5/docs/src/components/common-ui/vben-ellipsis-text.md b/apps/vben5/docs/src/components/common-ui/vben-ellipsis-text.md
new file mode 100644
index 000000000..109f1161c
--- /dev/null
+++ b/apps/vben5/docs/src/components/common-ui/vben-ellipsis-text.md
@@ -0,0 +1,56 @@
+---
+outline: deep
+---
+
+# Vben EllipsisText 省略文本
+
+框架提供的文本展示组件，可配置超长省略、tooltip提示、展开收起等功能。
+
+> 如果文档内没有参数说明，可以尝试在在线示例内寻找
+
+## 基础用法
+
+通过默认插槽设置文本内容，`maxWidth`属性设置最大宽度。
+
+<DemoPreview dir="demos/vben-ellipsis-text/line" />
+
+## 可折叠的文本块
+
+通过`line`设置折叠后的行数，`expand`属性设置是否支持展开收起。
+
+<DemoPreview dir="demos/vben-ellipsis-text/expand" />
+
+## 自定义提示浮层
+
+通过名为`tooltip`的插槽定制提示信息。
+
+<DemoPreview dir="demos/vben-ellipsis-text/tooltip" />
+
+## API
+
+### Props
+
+| 属性名 | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| expand | 支持点击展开或收起 | `boolean` | `false` |
+| line | 文本最大行数 | `number` | `1` |
+| maxWidth | 文本区域最大宽度 | `number \| string` | `'100%'` |
+| placement | 提示浮层的位置 | `'bottom'\|'left'\|'right'\|'top'` | `'top'` |
+| tooltip | 启用文本提示 | `boolean` | `true` |
+| tooltipBackgroundColor | 提示文本的背景颜色 | `string` | - |
+| tooltipColor | 提示文本的颜色 | `string` | - |
+| tooltipFontSize | 提示文本的大小 | `string` | - |
+| tooltipMaxWidth | 提示浮层的最大宽度。如不设置则保持与文本宽度一致 | `number` | - |
+| tooltipOverlayStyle | 提示框内容区域样式 | `CSSProperties` | `{ textAlign: 'justify' }` |
+
+### Events
+
+| 事件名       | 描述         | 类型                       |
+| ------------ | ------------ | -------------------------- |
+| expandChange | 展开状态改变 | `(isExpand:boolean)=>void` |
+
+### Slots
+
+| 插槽名  | 描述                             |
+| ------- | -------------------------------- |
+| tooltip | 启用文本提示时，用来定制提示内容 |
diff --git a/apps/vben5/docs/src/components/common-ui/vben-form.md b/apps/vben5/docs/src/components/common-ui/vben-form.md
index 34e96adfd..8d27c08d5 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-form.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-form.md
@@ -87,7 +87,7 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
-import { globalShareState } from '@vben/common-ui';
+import { globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import {
@@ -149,6 +149,7 @@ export type ComponentType =
   | 'TimePicker'
   | 'TreeSelect'
   | 'Upload'
+  | 'IconPicker';
   | BaseFormComponentType;
 
 async function initComponentAdapter() {
@@ -166,6 +167,7 @@ async function initComponentAdapter() {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
+    IconPicker,
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
@@ -285,6 +287,8 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | setValues | 设置表单值, 默认会过滤不在schema中定义的field, 可通过filterFields形参关闭过滤 | `(fields: Record<string, any>, filterFields?: boolean, shouldValidate?: boolean) => Promise<void>` |
 | getValues | 获取表单值 | `(fields:Record<string, any>,shouldValidate: boolean = false)=>Promise<void>` |
 | validate | 表单校验 | `()=>Promise<void>` |
+| validateField | 校验指定字段 | `(fieldName: string)=>Promise<ValidationResult<unknown>>` |
+| isFieldValid | 检查某个字段是否已通过校验 | `(fieldName: string)=>Promise<boolean>` |
 | resetValidate | 重置表单校验 | `()=>Promise<void>` |
 | updateSchema | 更新formSchema | `(schema:FormSchema[])=>void` |
 | setFieldValue | 设置字段值 | `(field: string, value: any, shouldValidate?: boolean)=>Promise<void>` |
@@ -304,16 +308,19 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | actionWrapperClass | 表单操作区域class | `any` | - |
 | handleReset | 表单重置回调 | `(values: Record<string, any>,) => Promise<void> \| void` | - |
 | handleSubmit | 表单提交回调 | `(values: Record<string, any>,) => Promise<void> \| void` | - |
+| handleValuesChange | 表单值变化回调 | `(values: Record<string, any>,) => void` | - |
+| actionButtonsReverse | 调换操作按钮位置 | `boolean` | `false` |
 | resetButtonOptions | 重置按钮组件参数 | `ActionButtonOptions` | - |
 | submitButtonOptions | 提交按钮组件参数 | `ActionButtonOptions` | - |
 | showDefaultActions | 是否显示默认操作按钮 | `boolean` | `true` |
-| collapsed | 是否折叠，在`是否展开，在showCollapseButton=true`时生效 | `boolean` | `false` |
+| collapsed | 是否折叠，在`showCollapseButton`为`true`时生效 | `boolean` | `false` |
 | collapseTriggerResize | 折叠时，触发`resize`事件 | `boolean` | `false` |
 | collapsedRows | 折叠时保持的行数 | `number` | `1` |
-| fieldMappingTime | 用于将表单内时间区域的应设成 2 个字段 | `[string, [string, string], string?][]` | - |
+| fieldMappingTime | 用于将表单内时间区域组件的数组值映射成 2 个字段 | `[string, [string, string], string?][]` | - |
 | commonConfig | 表单项的通用配置，每个配置都会传递到每个表单项，表单项可覆盖 | `FormCommonConfig` | - |
-| schema | 表单项的每一项配置 | `FormSchema` | - |
+| schema | 表单项的每一项配置 | `FormSchema[]` | - |
 | submitOnEnter | 按下回车健时提交表单 | `boolean` | false |
+| submitOnChange | 字段值改变时提交表单(内部防抖，这个属性一般用于表格的搜索表单) | `boolean` | false |
 
 ### TS 类型说明
 
@@ -350,10 +357,21 @@ export interface FormCommonConfig {
    * 所有表单项的props
    */
   componentProps?: ComponentProps;
+  /**
+   * 是否紧凑模式(移除表单底部为显示校验错误信息所预留的空间)。
+   * 在有设置校验规则的场景下，建议不要将其设置为true
+   * 默认为false。但用作表格的搜索表单时，默认为true
+   * @default false
+   */
+  compact?: boolean;
   /**
    * 所有表单项的控件样式
    */
   controlClass?: string;
+  /**
+   * 在表单项的Label后显示一个冒号
+   */
+  colon?: boolean;
   /**
    * 所有表单项的禁用状态
    * @default false
@@ -413,7 +431,7 @@ export interface FormSchema<
   dependencies?: FormItemDependencies;
   /** 描述 */
   description?: string;
-  /** 字段名 */
+  /** 字段名，也作为自定义插槽的名称 */
   fieldName: string;
   /** 帮助信息 */
   help?: string;
@@ -436,7 +454,7 @@ export interface FormSchema<
 
 ```ts
 dependencies: {
-  // 只有当 name 字段的值变化时，才会触发联动
+  // 触发字段。只有这些字段值变动时，联动才会触发
   triggerFields: ['name'],
   // 动态判断当前字段是否需要显示，不显示则直接销毁
   if(values,formApi){},
@@ -457,11 +475,11 @@ dependencies: {
 
 ### 表单校验
 
-表单联动需要通过 schema 内的 `rules` 属性进行配置。
+表单校验需要通过 schema 内的 `rules` 属性进行配置。
 
-rules的值可以是一个字符串，也可以是一个zod的schema。
+rules的值可以是字符串（预定义的校验规则名称），也可以是一个zod的schema。
 
-#### 字符串
+#### 预定义的校验规则
 
 ```ts
 // 表示字段必填，默认会根据适配器的required进行国际化
@@ -487,11 +505,16 @@ import { z } from '#/adapter/form';
   rules: z.string().min(1, { message: '请输入字符串' });
 }
 
-// 可选，并且携带默认值
+// 可选(可以是undefined)，并且携带默认值。注意zod的optional不包括空字符串''
 {
    rules: z.string().default('默认值').optional(),
 }
 
+// 可以是空字符串、undefined或者一个邮箱地址
+{
+  rules: z.union(z.string().email().optional(), z.literal(""))
+}
+
 // 复杂校验
 {
    z.string().min(1, { message: "请输入" })
diff --git a/apps/vben5/docs/src/components/common-ui/vben-modal.md b/apps/vben5/docs/src/components/common-ui/vben-modal.md
index 75f620ae5..d6e3ef47f 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-modal.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-modal.md
@@ -80,6 +80,7 @@ const [Modal, modalApi] = useVbenModal({
 
 | 属性名 | 描述 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| appendToMain | 是否挂载到内容区域（默认挂载到body） | `boolean` | `false` |
 | title | 标题 | `string\|slot` | - |
 | titleTooltip | 标题提示信息 | `string\|slot` | - |
 | description | 描述信息 | `string\|slot` | - |
@@ -106,6 +107,13 @@ const [Modal, modalApi] = useVbenModal({
 | footerClass | modal底部区域的class | `string` | - |
 | headerClass | modal顶部区域的class | `string` | - |
 | bordered | 是否显示border | `boolean` | `false` |
+| zIndex | 弹窗的ZIndex层级 | `number` | `1000` |
+
+::: info appendToMain
+
+`appendToMain`可以指定将弹窗挂载到内容区域，打开这种弹窗时，内容区域以外的部分（标签栏、导航菜单等等）不会被遮挡。默认情况下，弹窗会挂载到body上。但是：挂载到内容区域时，作为页面根容器的`Page`组件，需要设置`auto-content-height`属性，以便弹窗能够正确计算高度。
+
+:::
 
 ### Event
 
diff --git a/apps/vben5/docs/src/components/common-ui/vben-vxe-table.md b/apps/vben5/docs/src/components/common-ui/vben-vxe-table.md
index 29f679f6a..24d911da7 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-vxe-table.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-vxe-table.md
@@ -165,6 +165,8 @@ vxeUI.renderer.add('CellLink', {
 
 **表单搜索** 部分采用了`Vben Form 表单`，参考 [Vben Form 表单文档](/components/common-ui/vben-form)。
 
+当启用了表单搜索时，可以在toolbarConfig中配置`search`为`true`来让表格在工具栏区域显示一个搜索表单控制按钮。
+
 <DemoPreview dir="demos/vben-vxe-table/form" />
 
 ## 单元格编辑
@@ -215,14 +217,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 useVbenVxeGrid 返回的第二个参数，是一个对象，包含了一些表单的方法。
 
-| 方法名 | 描述 | 类型 |
-| --- | --- | --- |
-| setLoading | 设置loading状态 | `(loading)=>void` |
-| setGridOptions | 设置vxe-table grid组件参数 | `(options: Partial<VxeGridProps['gridOptions'])=>void` |
-| reload | 重载表格，会进行初始化 | `(params:any)=>void` |
-| query | 重载表格，会保留当前分页 | `(params:any)=>void` |
-| grid | vxe-table grid实例 | `VxeGridInstance` |
-| formApi | vbenForm api实例 | `FormApi` |
+| 方法名 | 描述 | 类型 | 说明 |
+| --- | --- | --- | --- |
+| setLoading | 设置loading状态 | `(loading)=>void` | - |
+| setGridOptions | 设置vxe-table grid组件参数 | `(options: Partial<VxeGridProps['gridOptions'])=>void` | - |
+| reload | 重载表格，会进行初始化 | `(params:any)=>void` | - |
+| query | 重载表格，会保留当前分页 | `(params:any)=>void` | - |
+| grid | vxe-table grid实例 | `VxeGridInstance` | - |
+| formApi | vbenForm api实例 | `FormApi` | - |
+| toggleSearchForm | 设置搜索表单显示状态 | `(show?: boolean)=>boolean` | 当省略参数时，则将表单在显示和隐藏两种状态之间切换 |
 
 ## Props
 
@@ -236,3 +239,4 @@ useVbenVxeGrid 返回的第二个参数，是一个对象，包含了一些表
 | gridOptions    | grid组件的参数     | `VxeTableGridProps` |
 | gridEvents     | grid组件的触发的⌚️ | `VxeGridListeners`  |
 | formOptions    | 表单参数           | `VbenFormProps`     |
+| showSearchForm | 是否显示搜索表单   | `boolean`           |
diff --git a/apps/vben5/docs/src/components/introduction.md b/apps/vben5/docs/src/components/introduction.md
index 039ec8cd8..438470e9a 100644
--- a/apps/vben5/docs/src/components/introduction.md
+++ b/apps/vben5/docs/src/components/introduction.md
@@ -6,6 +6,10 @@
 
 :::
 
+## 布局组件
+
+布局组件一般在页面内容区域用作顶层容器组件，提供一些统一的布局样式和基本功能。
+
 ## 通用组件
 
 通用组件是一些常用的组件，比如弹窗、抽屉、表单等。大部分基于 `Tailwind CSS` 实现，可适用于不同 UI 组件库的应用。
diff --git a/apps/vben5/docs/src/components/layout-ui/page.md b/apps/vben5/docs/src/components/layout-ui/page.md
new file mode 100644
index 000000000..29fbdd40f
--- /dev/null
+++ b/apps/vben5/docs/src/components/layout-ui/page.md
@@ -0,0 +1,44 @@
+---
+outline: deep
+---
+
+# Page 常规页面组件
+
+提供一个常规页面布局的组件，包括头部、内容区域、底部三个部分。
+
+::: info 写在前面
+
+本组件是一个基本布局组件。如果有更多的通用页面布局需求（比如双列布局等），可以根据实际需求自行封装。
+
+:::
+
+## 基础用法
+
+将`Page`作为你的业务页面的根组件即可。
+
+### Props
+
+| 属性名 | 描述 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| title | 页面标题 | `string\|slot` | - | - |
+| description | 页面描述（标题下的内容） | `string\|slot` | - | - |
+| contentClass | 内容区域的class | `string` | - | - |
+| headerClass | 头部区域的class | `string` | - | - |
+| footerClass | 底部区域的class | `string` | - | - |
+| autoContentHeight | 自动调整内容区域的高度 | `boolean` | `false` | - |
+
+::: tip 注意
+
+如果`title`、`description`、`extra`三者均未提供有效内容（通过`props`或者`slots`均可），则页面头部区域不会渲染。
+
+:::
+
+### Slots
+
+| 插槽名称    | 描述         |
+| ----------- | ------------ |
+| default     | 页面内容     |
+| title       | 页面标题     |
+| description | 页面描述     |
+| extra       | 页面头部右侧 |
+| footer      | 页面底部     |
diff --git a/apps/vben5/docs/src/demos/vben-api-component/cascader/index.vue b/apps/vben5/docs/src/demos/vben-api-component/cascader/index.vue
new file mode 100644
index 000000000..957964cd3
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-api-component/cascader/index.vue
@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import { ApiComponent } from '@vben/common-ui';
+
+import { Cascader } from 'ant-design-vue';
+
+const treeData: Record<string, any> = [
+  {
+    label: '浙江',
+    value: 'zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: '杭州',
+        children: [
+          {
+            value: 'xihu',
+            label: '西湖',
+          },
+          {
+            value: 'sudi',
+            label: '苏堤',
+          },
+        ],
+      },
+      {
+        value: 'jiaxing',
+        label: '嘉兴',
+        children: [
+          {
+            value: 'wuzhen',
+            label: '乌镇',
+          },
+          {
+            value: 'meihuazhou',
+            label: '梅花洲',
+          },
+        ],
+      },
+      {
+        value: 'zhoushan',
+        label: '舟山',
+        children: [
+          {
+            value: 'putuoshan',
+            label: '普陀山',
+          },
+          {
+            value: 'taohuadao',
+            label: '桃花岛',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: '江苏',
+    value: 'jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: '南京',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: '中华门',
+          },
+          {
+            value: 'zijinshan',
+            label: '紫金山',
+          },
+          {
+            value: 'yuhuatai',
+            label: '雨花台',
+          },
+        ],
+      },
+    ],
+  },
+];
+/**
+ * 模拟请求接口
+ */
+function fetchApi(): Promise<Record<string, any>> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(treeData);
+    }, 1000);
+  });
+}
+</script>
+<template>
+  <ApiComponent
+    :api="fetchApi"
+    :component="Cascader"
+    :immediate="false"
+    children-field="children"
+    loading-slot="suffixIcon"
+    visible-event="onDropdownVisibleChange"
+  />
+</template>
diff --git a/apps/vben5/docs/src/demos/vben-ellipsis-text/expand/index.vue b/apps/vben5/docs/src/demos/vben-ellipsis-text/expand/index.vue
new file mode 100644
index 000000000..842f6b32e
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-ellipsis-text/expand/index.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { EllipsisText } from '@vben/common-ui';
+
+const text = `
+Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。
+`;
+</script>
+<template>
+  <EllipsisText :line="3" expand>{{ text }}</EllipsisText>
+</template>
diff --git a/apps/vben5/docs/src/demos/vben-ellipsis-text/line/index.vue b/apps/vben5/docs/src/demos/vben-ellipsis-text/line/index.vue
new file mode 100644
index 000000000..dfbf20eff
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-ellipsis-text/line/index.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { EllipsisText } from '@vben/common-ui';
+
+const text = `
+Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。
+`;
+</script>
+<template>
+  <EllipsisText :max-width="500">{{ text }}</EllipsisText>
+</template>
diff --git a/apps/vben5/docs/src/demos/vben-ellipsis-text/tooltip/index.vue b/apps/vben5/docs/src/demos/vben-ellipsis-text/tooltip/index.vue
new file mode 100644
index 000000000..e6287a12f
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-ellipsis-text/tooltip/index.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { EllipsisText } from '@vben/common-ui';
+</script>
+<template>
+  <EllipsisText :max-width="240">
+    住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
+    <template #tooltip>
+      <div style="text-align: center">
+        《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
+        深海的光 停滞的海浪
+      </div>
+    </template>
+  </EllipsisText>
+</template>
diff --git a/apps/vben5/docs/src/demos/vben-vxe-table/form/index.vue b/apps/vben5/docs/src/demos/vben-vxe-table/form/index.vue
index a5e8a547b..bcf3f5a5d 100644
--- a/apps/vben5/docs/src/demos/vben-vxe-table/form/index.vue
+++ b/apps/vben5/docs/src/demos/vben-vxe-table/form/index.vue
@@ -76,6 +76,8 @@ const formOptions: VbenFormProps = {
   submitButtonOptions: {
     content: '查询',
   },
+  // 是否在字段值改变时提交表单
+  submitOnChange: false,
   // 按下回车时是否提交表单
   submitOnEnter: false,
 };
@@ -108,6 +110,11 @@ const gridOptions: VxeGridProps<RowType> = {
       },
     },
   },
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+  },
 };
 
 const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
diff --git a/apps/vben5/docs/src/en/guide/essentials/settings.md b/apps/vben5/docs/src/en/guide/essentials/settings.md
index 68fef3e7e..a3cd579ec 100644
--- a/apps/vben5/docs/src/en/guide/essentials/settings.md
+++ b/apps/vben5/docs/src/en/guide/essentials/settings.md
@@ -217,6 +217,7 @@ const defaultPreferences: Preferences = {
     globalSearch: true,
   },
   sidebar: {
+    autoActivateChild: false,
     collapsed: false,
     collapsedShowTitle: false,
     enable: true,
diff --git a/apps/vben5/docs/src/guide/essentials/settings.md b/apps/vben5/docs/src/guide/essentials/settings.md
index e33572066..3669a771c 100644
--- a/apps/vben5/docs/src/guide/essentials/settings.md
+++ b/apps/vben5/docs/src/guide/essentials/settings.md
@@ -240,6 +240,7 @@ const defaultPreferences: Preferences = {
     globalSearch: true,
   },
   sidebar: {
+    autoActivateChild: false,
     collapsed: false,
     collapsedShowTitle: false,
     enable: true,
diff --git a/apps/vben5/docs/src/guide/in-depth/ui-framework.md b/apps/vben5/docs/src/guide/in-depth/ui-framework.md
index ce05608fc..6a7508e1d 100644
--- a/apps/vben5/docs/src/guide/in-depth/ui-framework.md
+++ b/apps/vben5/docs/src/guide/in-depth/ui-framework.md
@@ -4,7 +4,7 @@
 
 ## 新增组件库应用
 
-如果你想用其他别的组件库，你只需要按一下步骤进行操作：
+如果你想用其他别的组件库，你只需要按以下步骤进行操作：
 
 1. 在`apps`内创建一个新的文件夹，例如`apps/web-xxx`。
 2. 更改`apps/web-xxx/package.json`的`name`字段为`web-xxx`。
diff --git a/apps/vben5/internal/lint-configs/commitlint-config/package.json b/apps/vben5/internal/lint-configs/commitlint-config/package.json
index 6679a6627..01b43088c 100644
--- a/apps/vben5/internal/lint-configs/commitlint-config/package.json
+++ b/apps/vben5/internal/lint-configs/commitlint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/commitlint-config",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/apps/vben5/internal/lint-configs/eslint-config/src/configs/vue.ts b/apps/vben5/internal/lint-configs/eslint-config/src/configs/vue.ts
index 27cc3cf29..d1c6521cf 100644
--- a/apps/vben5/internal/lint-configs/eslint-config/src/configs/vue.ts
+++ b/apps/vben5/internal/lint-configs/eslint-config/src/configs/vue.ts
@@ -4,7 +4,6 @@ import { interopDefault } from '../util';
 
 export async function vue(): Promise<Linter.Config[]> {
   const [pluginVue, parserVue, parserTs] = await Promise.all([
-    // @ts-expect-error missing types
     interopDefault(import('eslint-plugin-vue')),
     interopDefault(import('vue-eslint-parser')),
     // @ts-expect-error missing types
diff --git a/apps/vben5/internal/lint-configs/stylelint-config/package.json b/apps/vben5/internal/lint-configs/stylelint-config/package.json
index c9e8cf539..64815741f 100644
--- a/apps/vben5/internal/lint-configs/stylelint-config/package.json
+++ b/apps/vben5/internal/lint-configs/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stylelint-config",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/apps/vben5/internal/node-utils/package.json b/apps/vben5/internal/node-utils/package.json
index 0cd1eaa3d..9412656a9 100644
--- a/apps/vben5/internal/node-utils/package.json
+++ b/apps/vben5/internal/node-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/node-utils",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/apps/vben5/internal/tailwind-config/package.json b/apps/vben5/internal/tailwind-config/package.json
index 004ae0bc1..26da63b48 100644
--- a/apps/vben5/internal/tailwind-config/package.json
+++ b/apps/vben5/internal/tailwind-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tailwind-config",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/apps/vben5/internal/tsconfig/package.json b/apps/vben5/internal/tsconfig/package.json
index d6bae6239..d935b671c 100644
--- a/apps/vben5/internal/tsconfig/package.json
+++ b/apps/vben5/internal/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tsconfig",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/apps/vben5/internal/vite-config/package.json b/apps/vben5/internal/vite-config/package.json
index 2d68b95b7..60955a1d4 100644
--- a/apps/vben5/internal/vite-config/package.json
+++ b/apps/vben5/internal/vite-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/vite-config",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/apps/vben5/internal/vite-config/src/config/application.ts b/apps/vben5/internal/vite-config/src/config/application.ts
index f22760944..f9808cc74 100644
--- a/apps/vben5/internal/vite-config/src/config/application.ts
+++ b/apps/vben5/internal/vite-config/src/config/application.ts
@@ -1,4 +1,4 @@
-import type { UserConfig } from 'vite';
+import type { CSSOptions, UserConfig } from 'vite';
 
 import type { DefineApplicationOptions } from '../typing';
 
@@ -100,7 +100,7 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) {
   });
 }
 
-function createCssOptions(injectGlobalScss = true) {
+function createCssOptions(injectGlobalScss = true): CSSOptions {
   const root = findMonorepoRoot();
   return {
     preprocessorOptions: injectGlobalScss
diff --git a/apps/vben5/internal/vite-config/src/utils/env.ts b/apps/vben5/internal/vite-config/src/utils/env.ts
index 1dfd18086..3a042fe8a 100644
--- a/apps/vben5/internal/vite-config/src/utils/env.ts
+++ b/apps/vben5/internal/vite-config/src/utils/env.ts
@@ -1,5 +1,6 @@
 import type { ApplicationPluginOptions } from '../typing';
 
+import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 
 import { fs } from '@vben/node-utils';
@@ -21,12 +22,11 @@ function getConfFiles() {
   const script = process.env.npm_lifecycle_script as string;
   const reg = /--mode ([\d_a-z]+)/;
   const result = reg.exec(script);
-
+  let mode = 'production';
   if (result) {
-    const mode = result[1];
-    return ['.env', `.env.${mode}`];
+    mode = result[1] as string;
   }
-  return ['.env', '.env.production'];
+  return ['.env', '.env.local', `.env.${mode}`, `.env.${mode}.local`];
 }
 
 /**
@@ -42,11 +42,14 @@ async function loadEnv<T = Record<string, string>>(
 
   for (const confFile of confFiles) {
     try {
-      const envPath = await fs.readFile(join(process.cwd(), confFile), {
-        encoding: 'utf8',
-      });
-      const env = dotenv.parse(envPath);
-      envConfig = { ...envConfig, ...env };
+      const confFilePath = join(process.cwd(), confFile);
+      if (existsSync(confFilePath)) {
+        const envPath = await fs.readFile(confFilePath, {
+          encoding: 'utf8',
+        });
+        const env = dotenv.parse(envPath);
+        envConfig = { ...envConfig, ...env };
+      }
     } catch (error) {
       console.error(`Error while parsing ${confFile}`, error);
     }
diff --git a/apps/vben5/package.json b/apps/vben5/package.json
index 1bf68b17d..f5a830eb7 100644
--- a/apps/vben5/package.json
+++ b/apps/vben5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-monorepo",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "private": true,
   "keywords": [
     "monorepo",
@@ -101,7 +101,7 @@
     "node": ">=20.10.0",
     "pnpm": ">=9.12.0"
   },
-  "packageManager": "pnpm@9.14.4",
+  "packageManager": "pnpm@9.15.0",
   "pnpm": {
     "peerDependencyRules": {
       "allowedVersions": {
@@ -112,6 +112,7 @@
       "@ast-grep/napi": "catalog:",
       "@ctrl/tinycolor": "catalog:",
       "clsx": "catalog:",
+      "esbuild": "0.24.0",
       "pinia": "catalog:",
       "vue": "catalog:"
     },
diff --git a/apps/vben5/packages/@abp/account/package.json b/apps/vben5/packages/@abp/account/package.json
index 2a5a46074..64bb473bd 100644
--- a/apps/vben5/packages/@abp/account/package.json
+++ b/apps/vben5/packages/@abp/account/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abp/account",
-  "version": "8.2.3",
+  "version": "8.3.2",
   "homepage": "https://github.com/colinin/abp-next-admin",
   "bugs": "https://github.com/colinin/abp-next-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@abp/core/package.json b/apps/vben5/packages/@abp/core/package.json
index b46de0539..ce80edc1a 100644
--- a/apps/vben5/packages/@abp/core/package.json
+++ b/apps/vben5/packages/@abp/core/package.json
@@ -37,12 +37,12 @@
   "dependencies": {
     "@vueuse/core": "catalog:",
     "dayjs": "catalog:",
-    "lodash": "catalog:",
+    "lodash.merge": "catalog:",
     "pinia": "catalog:",
     "pinia-plugin-persistedstate": "catalog:",
     "vue": "catalog:"
   },
   "devDependencies": {
-    "@types/lodash": "catalog:"
+    "@types/lodash.merge": "catalog:"
   }
 }
diff --git a/apps/vben5/packages/@abp/core/src/hooks/useLocalization.ts b/apps/vben5/packages/@abp/core/src/hooks/useLocalization.ts
index 4593a11e5..0067107c5 100644
--- a/apps/vben5/packages/@abp/core/src/hooks/useLocalization.ts
+++ b/apps/vben5/packages/@abp/core/src/hooks/useLocalization.ts
@@ -2,7 +2,7 @@ import type { Dictionary, StringLocalizer } from '../types';
 
 import { computed } from 'vue';
 
-import { merge } from 'lodash';
+import merge from 'lodash.merge';
 
 import { useAbpStore } from '../store/abp';
 import { format } from '../utils/string';
diff --git a/apps/vben5/packages/@abp/identity/package.json b/apps/vben5/packages/@abp/identity/package.json
index b19e896c6..5ad844354 100644
--- a/apps/vben5/packages/@abp/identity/package.json
+++ b/apps/vben5/packages/@abp/identity/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abp/identity",
-  "version": "8.2.3",
+  "version": "8.3.2",
   "homepage": "https://github.com/colinin/abp-next-admin",
   "bugs": "https://github.com/colinin/abp-next-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@abp/request/package.json b/apps/vben5/packages/@abp/request/package.json
index 24acb7a42..edaf1f8ab 100644
--- a/apps/vben5/packages/@abp/request/package.json
+++ b/apps/vben5/packages/@abp/request/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abp/request",
-  "version": "8.2.3",
+  "version": "8.3.2",
   "homepage": "https://github.com/colinin/abp-next-admin",
   "bugs": "https://github.com/colinin/abp-next-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@abp/ui/src/adapter/component/index.ts b/apps/vben5/packages/@abp/ui/src/adapter/component/index.ts
index e237b52fc..939141ce7 100644
--- a/apps/vben5/packages/@abp/ui/src/adapter/component/index.ts
+++ b/apps/vben5/packages/@abp/ui/src/adapter/component/index.ts
@@ -8,7 +8,7 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
-import { globalShareState } from '@vben/common-ui';
+import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import {
@@ -21,7 +21,6 @@ import {
   Input,
   InputNumber,
   InputPassword,
-  InputSearch,
   Mentions,
   notification,
   Radio,
@@ -49,16 +48,18 @@ const withDefaultPlaceholder = <T extends Component>(
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiSelect'
+  | 'ApiTreeSelect'
   | 'AutoComplete'
   | 'Checkbox'
   | 'CheckboxGroup'
   | 'DatePicker'
   | 'DefaultButton'
   | 'Divider'
+  | 'IconPicker'
   | 'Input'
   | 'InputNumber'
   | 'InputPassword'
-  | 'InputSearch'
   | 'Mentions'
   | 'PrimaryButton'
   | 'Radio'
@@ -79,7 +80,38 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-
+    ApiSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: Select,
+          loadingSlot: 'suffixIcon',
+          modelPropName: 'value',
+          visibleEvent: 'onDropdownVisibleChange',
+        },
+        slots,
+      );
+    },
+    ApiTreeSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: TreeSelect,
+          fieldNames: { label: 'label', value: 'value', children: 'children' },
+          loadingSlot: 'suffixIcon',
+          modelPropName: 'value',
+          optionsPropName: 'treeData',
+          visibleEvent: 'onVisibleChange',
+        },
+        slots,
+      );
+    },
     AutoComplete,
     Checkbox,
     CheckboxGroup,
@@ -89,10 +121,16 @@ async function initComponentAdapter() {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
+    IconPicker: (props, { attrs, slots }) => {
+      return h(
+        IconPicker,
+        { iconSlot: 'addonAfter', inputComponent: Input, ...props, ...attrs },
+        slots,
+      );
+    },
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
-    InputSearch,
     Mentions: withDefaultPlaceholder(Mentions, 'input'),
     // 自定义主要按钮
     PrimaryButton: (props, { attrs, slots }) => {
diff --git a/apps/vben5/packages/@core/base/design/package.json b/apps/vben5/packages/@core/base/design/package.json
index f40b335d0..7b46ddd74 100644
--- a/apps/vben5/packages/@core/base/design/package.json
+++ b/apps/vben5/packages/@core/base/design/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/design",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/base/icons/package.json b/apps/vben5/packages/@core/base/icons/package.json
index bc13a58e4..754b74509 100644
--- a/apps/vben5/packages/@core/base/icons/package.json
+++ b/apps/vben5/packages/@core/base/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/icons",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/base/icons/src/lucide.ts b/apps/vben5/packages/@core/base/icons/src/lucide.ts
index 97603eb56..21a1beffd 100644
--- a/apps/vben5/packages/@core/base/icons/src/lucide.ts
+++ b/apps/vben5/packages/@core/base/icons/src/lucide.ts
@@ -28,6 +28,7 @@ export {
   Fullscreen,
   Github,
   Grip,
+  GripVertical,
   Info,
   InspectionPanel,
   Languages,
diff --git a/apps/vben5/packages/@core/base/shared/package.json b/apps/vben5/packages/@core/base/shared/package.json
index 15ba9010c..20eeea450 100644
--- a/apps/vben5/packages/@core/base/shared/package.json
+++ b/apps/vben5/packages/@core/base/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shared",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -86,12 +86,16 @@
     "dayjs": "catalog:",
     "defu": "catalog:",
     "lodash.clonedeep": "catalog:",
+    "lodash.get": "catalog:",
+    "lodash.isequal": "catalog:",
     "nprogress": "catalog:",
     "tailwind-merge": "catalog:",
     "theme-colors": "catalog:"
   },
   "devDependencies": {
     "@types/lodash.clonedeep": "catalog:",
+    "@types/lodash.get": "catalog:",
+    "@types/lodash.isequal": "catalog:",
     "@types/nprogress": "catalog:"
   }
 }
diff --git a/apps/vben5/packages/@core/base/shared/src/constants/globals.ts b/apps/vben5/packages/@core/base/shared/src/constants/globals.ts
index 17941de11..3c699570f 100644
--- a/apps/vben5/packages/@core/base/shared/src/constants/globals.ts
+++ b/apps/vben5/packages/@core/base/shared/src/constants/globals.ts
@@ -7,6 +7,9 @@ export const CSS_VARIABLE_LAYOUT_HEADER_HEIGHT = `--vben-header-height`;
 /** layout footer 组件的高度 */
 export const CSS_VARIABLE_LAYOUT_FOOTER_HEIGHT = `--vben-footer-height`;
 
+/** 内容区域的组件ID */
+export const ELEMENT_ID_MAIN_CONTENT = `__vben_main_content`;
+
 /**
  * @zh_CN 默认命名空间
  */
diff --git a/apps/vben5/packages/@core/base/shared/src/utils/date.ts b/apps/vben5/packages/@core/base/shared/src/utils/date.ts
index 522e99465..3736b9ad5 100644
--- a/apps/vben5/packages/@core/base/shared/src/utils/date.ts
+++ b/apps/vben5/packages/@core/base/shared/src/utils/date.ts
@@ -16,3 +16,11 @@ export function formatDate(time: number | string, format = 'YYYY-MM-DD') {
 export function formatDateTime(time: number | string) {
   return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
 }
+
+export function isDate(value: any): value is Date {
+  return value instanceof Date;
+}
+
+export function isDayjsObject(value: any): value is dayjs.Dayjs {
+  return dayjs.isDayjs(value);
+}
diff --git a/apps/vben5/packages/@core/base/shared/src/utils/index.ts b/apps/vben5/packages/@core/base/shared/src/utils/index.ts
index 2f56c6018..1bf09c713 100644
--- a/apps/vben5/packages/@core/base/shared/src/utils/index.ts
+++ b/apps/vben5/packages/@core/base/shared/src/utils/index.ts
@@ -15,3 +15,5 @@ export * from './update-css-variables';
 export * from './util';
 export * from './window';
 export { default as cloneDeep } from 'lodash.clonedeep';
+export { default as get } from 'lodash.get';
+export { default as isEqual } from 'lodash.isequal';
diff --git a/apps/vben5/packages/@core/base/typings/package.json b/apps/vben5/packages/@core/base/typings/package.json
index d7b940a5a..504e53ed8 100644
--- a/apps/vben5/packages/@core/base/typings/package.json
+++ b/apps/vben5/packages/@core/base/typings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/typings",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/composables/package.json b/apps/vben5/packages/@core/composables/package.json
index bac205809..736feefa2 100644
--- a/apps/vben5/packages/@core/composables/package.json
+++ b/apps/vben5/packages/@core/composables/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/composables",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap b/apps/vben5/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
index def5ff60b..f05a96dc3 100644
--- a/apps/vben5/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
+++ b/apps/vben5/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
@@ -65,6 +65,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "globalSearch": true,
   },
   "sidebar": {
+    "autoActivateChild": false,
     "collapsed": false,
     "collapsedShowTitle": false,
     "enable": true,
@@ -83,6 +84,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "showMaximize": true,
     "showMore": true,
     "styleType": "chrome",
+    "wheelable": true,
   },
   "theme": {
     "builtinType": "default",
diff --git a/apps/vben5/packages/@core/preferences/package.json b/apps/vben5/packages/@core/preferences/package.json
index 1fc760482..24b522e21 100644
--- a/apps/vben5/packages/@core/preferences/package.json
+++ b/apps/vben5/packages/@core/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/preferences",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/preferences/src/config.ts b/apps/vben5/packages/@core/preferences/src/config.ts
index 2ee0deaff..c4dce039f 100644
--- a/apps/vben5/packages/@core/preferences/src/config.ts
+++ b/apps/vben5/packages/@core/preferences/src/config.ts
@@ -65,6 +65,7 @@ const defaultPreferences: Preferences = {
     globalSearch: true,
   },
   sidebar: {
+    autoActivateChild: false,
     collapsed: false,
     collapsedShowTitle: false,
     enable: true,
@@ -83,6 +84,7 @@ const defaultPreferences: Preferences = {
     showMaximize: true,
     showMore: true,
     styleType: 'chrome',
+    wheelable: true,
   },
   theme: {
     builtinType: 'default',
diff --git a/apps/vben5/packages/@core/preferences/src/types.ts b/apps/vben5/packages/@core/preferences/src/types.ts
index 2b536b85a..59dce2e21 100644
--- a/apps/vben5/packages/@core/preferences/src/types.ts
+++ b/apps/vben5/packages/@core/preferences/src/types.ts
@@ -125,6 +125,8 @@ interface NavigationPreferences {
 }
 
 interface SidebarPreferences {
+  /** 点击目录时自动激活子菜单   */
+  autoActivateChild: boolean;
   /** 侧边栏是否折叠 */
   collapsed: boolean;
   /** 侧边栏折叠时，是否显示title */
@@ -173,6 +175,8 @@ interface TabbarPreferences {
   showMore: boolean;
   /** 标签页风格 */
   styleType: TabsStyleType;
+  /** 是否开启鼠标滚轮响应 */
+  wheelable: boolean;
 }
 
 interface ThemePreferences {
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/package.json b/apps/vben5/packages/@core/ui-kit/form-ui/package.json
index ed5eb535e..944fd49ef 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/form-ui",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/apps/vben5/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
index 26e426fe5..b9a878e8a 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -138,17 +138,37 @@ defineExpose({
 <template>
   <div
     :class="
-      cn('col-span-full w-full pb-6 text-right', rootProps.actionWrapperClass)
+      cn(
+        'col-span-full w-full text-right',
+        rootProps.compact ? 'pb-2' : 'pb-6',
+        rootProps.actionWrapperClass,
+      )
     "
     :style="queryFormStyle"
   >
+    <template v-if="rootProps.actionButtonsReverse">
+      <!-- 提交按钮前 -->
+      <slot name="submit-before"></slot>
+
+      <component
+        :is="COMPONENT_MAP.PrimaryButton"
+        v-if="submitButtonOptions.show"
+        class="ml-3"
+        type="button"
+        @click="handleSubmit"
+        v-bind="submitButtonOptions"
+      >
+        {{ submitButtonOptions.content }}
+      </component>
+    </template>
+
     <!-- 重置按钮前 -->
     <slot name="reset-before"></slot>
 
     <component
       :is="COMPONENT_MAP.DefaultButton"
       v-if="resetButtonOptions.show"
-      class="mr-3"
+      class="ml-3"
       type="button"
       @click="handleReset"
       v-bind="resetButtonOptions"
@@ -156,18 +176,21 @@ defineExpose({
       {{ resetButtonOptions.content }}
     </component>
 
-    <!-- 提交按钮前 -->
-    <slot name="submit-before"></slot>
-
-    <component
-      :is="COMPONENT_MAP.PrimaryButton"
-      v-if="submitButtonOptions.show"
-      type="button"
-      @click="handleSubmit"
-      v-bind="submitButtonOptions"
-    >
-      {{ submitButtonOptions.content }}
-    </component>
+    <template v-if="!rootProps.actionButtonsReverse">
+      <!-- 提交按钮前 -->
+      <slot name="submit-before"></slot>
+
+      <component
+        :is="COMPONENT_MAP.PrimaryButton"
+        v-if="submitButtonOptions.show"
+        class="ml-3"
+        type="button"
+        @click="handleSubmit"
+        v-bind="submitButtonOptions"
+      >
+        {{ submitButtonOptions.content }}
+      </component>
+    </template>
 
     <!-- 展开按钮前 -->
     <slot name="expand-before"></slot>
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/config.ts b/apps/vben5/packages/@core/ui-kit/form-ui/src/config.ts
index 36e11d39b..9e82cffe1 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/config.ts
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/config.ts
@@ -44,11 +44,15 @@ export function setupVbenForm<
 >(options: VbenFormAdapterOptions<T>) {
   const { config, defineRules } = options;
 
-  const { disabledOnChangeListener = false, emptyStateValue = undefined } =
-    (config || {}) as FormCommonConfig;
+  const {
+    disabledOnChangeListener = true,
+    disabledOnInputListener = true,
+    emptyStateValue = undefined,
+  } = (config || {}) as FormCommonConfig;
 
   Object.assign(DEFAULT_FORM_COMMON_CONFIG, {
     disabledOnChangeListener,
+    disabledOnInputListener,
     emptyStateValue,
   });
 
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-api.ts b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-api.ts
index 08318f3cf..8de5c4056 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -14,6 +14,8 @@ import { Store } from '@vben-core/shared/store';
 import {
   bindMethods,
   createMerge,
+  isDate,
+  isDayjsObject,
   isFunction,
   isObject,
   mergeWithArrayOverride,
@@ -36,6 +38,7 @@ function getDefaultState(): VbenFormProps {
     showCollapseButton: false,
     showDefaultActions: true,
     submitButtonOptions: {},
+    submitOnChange: false,
     submitOnEnter: false,
     wrapperClass: 'grid-cols-1',
   };
@@ -127,6 +130,11 @@ export class FormApi {
     return form.values;
   }
 
+  async isFieldValid(fieldName: string) {
+    const form = await this.getForm();
+    return form.isFieldValid(fieldName);
+  }
+
   merge(formApi: FormApi) {
     const chain = [this, formApi];
     const proxy = new Proxy(formApi, {
@@ -251,10 +259,19 @@ export class FormApi {
       return;
     }
 
+    /**
+     * 合并算法有待改进，目前的算法不支持object类型的值。
+     * antd的日期时间相关组件的值类型为dayjs对象
+     * element-plus的日期时间相关组件的值类型可能为Date对象
+     * 以上两种类型需要排除深度合并
+     */
     const fieldMergeFn = createMerge((obj, key, value) => {
       if (key in obj) {
         obj[key] =
-          !Array.isArray(obj[key]) && isObject(obj[key])
+          !Array.isArray(obj[key]) &&
+          isObject(obj[key]) &&
+          !isDayjsObject(obj[key]) &&
+          !isDate(obj[key])
             ? fieldMergeFn(obj[key], value)
             : value;
       }
@@ -336,4 +353,14 @@ export class FormApi {
     }
     return await this.submitForm();
   }
+
+  async validateField(fieldName: string, opts?: Partial<ValidationOptions>) {
+    const form = await this.getForm();
+    const validateResult = await form.validateField(fieldName, opts);
+
+    if (Object.keys(validateResult?.errors ?? {}).length > 0) {
+      console.error('validate error', validateResult?.errors);
+    }
+    return validateResult;
+  }
 }
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
index e9ee8f876..50c9c17d9 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -26,6 +26,7 @@ import { isEventObjectLike } from './helper';
 interface Props extends FormSchema {}
 
 const {
+  colon,
   commonComponentProps,
   component,
   componentProps,
@@ -33,6 +34,7 @@ const {
   description,
   disabled,
   disabledOnChangeListener,
+  disabledOnInputListener,
   emptyStateValue,
   fieldName,
   formFieldProps,
@@ -53,7 +55,7 @@ const values = useFormValues();
 const errors = useFieldError(fieldName);
 const fieldComponentRef = useTemplateRef<HTMLInputElement>('fieldComponentRef');
 const formApi = formRenderProps.form;
-
+const compact = formRenderProps.compact;
 const isInValid = computed(() => errors.value?.length > 0);
 
 const FieldComponent = computed(() => {
@@ -227,10 +229,13 @@ function fieldBindEvent(slotProps: Record<string, any>) {
 
             return onChange?.(e?.target?.[bindEventField] ?? e);
           },
-      onInput: () => {},
+      ...(disabledOnInputListener ? { onInput: undefined } : {}),
     };
   }
-  return {};
+  return {
+    ...(disabledOnInputListener ? { onInput: undefined } : {}),
+    ...(disabledOnChangeListener ? { onChange: undefined } : {}),
+  };
 }
 
 function createComponentProps(slotProps: Record<string, any>) {
@@ -276,8 +281,10 @@ function autofocus() {
         'form-valid-error': isInValid,
         'flex-col': isVertical,
         'flex-row items-center': !isVertical,
+        'pb-6': !compact,
+        'pb-2': compact,
       }"
-      class="flex pb-6"
+      class="flex"
       v-bind="$attrs"
     >
       <FormLabel
@@ -296,7 +303,10 @@ function autofocus() {
         :required="shouldRequired && !hideRequiredMark"
         :style="labelStyle"
       >
-        {{ label }}
+        <template v-if="label">
+          <span>{{ label }}</span>
+          <span v-if="colon" class="ml-[2px]">:</span>
+        </template>
       </FormLabel>
       <div :class="cn('relative flex w-full items-center', wrapperClass)">
         <FormControl :class="cn(controlClass)">
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form.vue b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form.vue
index 348f03d8b..7c04540d2 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form.vue
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/form.vue
@@ -86,10 +86,12 @@ const computedSchema = computed(
     formFieldProps: Record<string, any>;
   } & Omit<FormSchema, 'formFieldProps'>)[] => {
     const {
+      colon = false,
       componentProps = {},
       controlClass = '',
       disabled,
-      disabledOnChangeListener = false,
+      disabledOnChangeListener = true,
+      disabledOnInputListener = true,
       emptyStateValue = undefined,
       formFieldProps = {},
       formItemClass = '',
@@ -109,8 +111,10 @@ const computedSchema = computed(
           : false;
 
       return {
+        colon,
         disabled,
         disabledOnChangeListener,
+        disabledOnInputListener,
         emptyStateValue,
         hideLabel,
         hideRequiredMark,
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/types.ts b/apps/vben5/packages/@core/ui-kit/form-ui/src/types.ts
index 5855ccc60..f3ba3eba1 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/types.ts
@@ -136,6 +136,10 @@ type ComponentProps =
   | MaybeComponentProps;
 
 export interface FormCommonConfig {
+  /**
+   * 在Label后显示一个冒号
+   */
+  colon?: boolean;
   /**
    * 所有表单项的props
    */
@@ -151,9 +155,14 @@ export interface FormCommonConfig {
   disabled?: boolean;
   /**
    * 是否禁用所有表单项的change事件监听
-   * @default false
+   * @default true
    */
   disabledOnChangeListener?: boolean;
+  /**
+   * 是否禁用所有表单项的input事件监听
+   * @default true
+   */
+  disabledOnInputListener?: boolean;
   /**
    * 所有表单项的空状态值,默认都是undefined，naive-ui的空状态值是null
    */
@@ -264,6 +273,10 @@ export interface FormRenderProps<
    * 表单项通用后备配置，当子项目没配置时使用这里的配置，子项目配置优先级高于此配置
    */
   commonConfig?: FormCommonConfig;
+  /**
+   * 紧凑模式（移除表单每一项底部为校验信息预留的空间）
+   */
+  compact?: boolean;
   /**
    * 组件v-model事件绑定
    */
@@ -307,6 +320,10 @@ export interface VbenFormProps<
     FormRenderProps<T>,
     'componentBindEventMap' | 'componentMap' | 'form'
   > {
+  /**
+   * 操作按钮是否反转（提交按钮前置）
+   */
+  actionButtonsReverse?: boolean;
   /**
    * 表单操作区域class
    */
@@ -342,6 +359,12 @@ export interface VbenFormProps<
    */
   submitButtonOptions?: ActionButtonOptions;
 
+  /**
+   * 是否在字段值改变时提交表单
+   * @default false
+   */
+  submitOnChange?: boolean;
+
   /**
    * 是否在回车时提交表单
    * @default false
@@ -361,6 +384,7 @@ export interface VbenFormAdapterOptions<
   config?: {
     baseModelPropName?: string;
     disabledOnChangeListener?: boolean;
+    disabledOnInputListener?: boolean;
     emptyStateValue?: null | undefined;
     modelPropNameMap?: Partial<Record<T, string>>;
   };
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/apps/vben5/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
index 0401d48ee..9908e85d3 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -6,7 +6,11 @@ import type { ExtendedFormApi, VbenFormProps } from './types';
 import { useForwardPriorityValues } from '@vben-core/composables';
 // import { isFunction } from '@vben-core/shared/utils';
 
-import { useTemplateRef } from 'vue';
+import { nextTick, onMounted, watch } from 'vue';
+
+import { cloneDeep } from '@vben-core/shared/utils';
+
+import { useDebounceFn } from '@vueuse/core';
 
 import FormActions from './components/form-actions.vue';
 import {
@@ -23,8 +27,6 @@ interface Props extends VbenFormProps {
 
 const props = defineProps<Props>();
 
-const formActionsRef = useTemplateRef<typeof FormActions>('formActionsRef');
-
 const state = props.formApi?.useStore?.();
 
 const forward = useForwardPriorityValues(props, state);
@@ -40,11 +42,7 @@ const handleUpdateCollapsed = (value: boolean) => {
 };
 
 function handleKeyDownEnter(event: KeyboardEvent) {
-  if (
-    !state.value.submitOnEnter ||
-    !formActionsRef.value ||
-    !formActionsRef.value.handleSubmit
-  ) {
+  if (!state.value.submitOnEnter || !forward.value.formApi?.isMounted) {
     return;
   }
   // 如果是 textarea 不阻止默认行为，否则会导致无法换行。
@@ -54,8 +52,19 @@ function handleKeyDownEnter(event: KeyboardEvent) {
   }
   event.preventDefault();
 
-  formActionsRef.value?.handleSubmit?.();
+  forward.value.formApi.validateAndSubmitForm();
 }
+
+const handleValuesChangeDebounced = useDebounceFn((newVal) => {
+  forward.value.handleValuesChange?.(cloneDeep(newVal));
+  state.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm();
+}, 300);
+
+onMounted(async () => {
+  // 只在挂载后开始监听，form.values会有一个初始化的过程
+  await nextTick();
+  watch(() => form.values, handleValuesChangeDebounced, { deep: true });
+});
 </script>
 
 <template>
@@ -79,7 +88,6 @@ function handleKeyDownEnter(event: KeyboardEvent) {
       <slot v-bind="slotProps">
         <FormActions
           v-if="forward.showDefaultActions"
-          ref="formActionsRef"
           :model-value="state.collapsed"
           @update:model-value="handleUpdateCollapsed"
         >
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/package.json b/apps/vben5/packages/@core/ui-kit/layout-ui/package.json
index d0ab245e3..7aa4a35b8 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/layout-ui",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -40,6 +40,7 @@
     "@vben-core/composables": "workspace:*",
     "@vben-core/icons": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "catalog:",
     "vue": "catalog:"
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
index 73cd73d40..792c8d88e 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
@@ -63,7 +63,7 @@ const logoStyle = computed((): CSSProperties => {
   <header
     :class="theme"
     :style="style"
-    class="border-border bg-header top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200"
+    class="border-border bg-header top-0 flex w-full flex-[0_0_auto] items-center border-b pl-2 transition-[margin-top] duration-200"
   >
     <div v-if="slots.logo" :style="logoStyle">
       <slot name="logo"></slot>
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
index 5f7fe3bf0..3d8681905 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -166,7 +166,7 @@ const headerStyle = computed((): CSSProperties => {
 
   return {
     ...(isSidebarMixed ? { display: 'flex', justifyContent: 'center' } : {}),
-    height: `${headerHeight}px`,
+    height: `${headerHeight - 1}px`,
     ...contentWidthStyle.value,
   };
 });
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
index 3cdd3d1ea..fe9b1d852 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -11,6 +11,7 @@ import {
 } from '@vben-core/composables';
 import { Menu } from '@vben-core/icons';
 import { VbenIconButton } from '@vben-core/shadcn-ui';
+import { ELEMENT_ID_MAIN_CONTENT } from '@vben-core/shared/constants';
 
 import { useMouse, useScroll, useThrottleFn } from '@vueuse/core';
 
@@ -457,6 +458,8 @@ function handleHeaderToggle() {
     emit('toggleSidebar');
   }
 }
+
+const idMainContent = ELEMENT_ID_MAIN_CONTENT;
 </script>
 
 <template>
@@ -533,7 +536,7 @@ function handleHeaderToggle() {
           <template #toggle-button>
             <VbenIconButton
               v-if="showHeaderToggleButton"
-              class="my-0 ml-2 mr-1 rounded-md"
+              class="my-0 mr-1 rounded-md"
               @click="handleHeaderToggle"
             >
               <Menu class="size-4" />
@@ -553,6 +556,7 @@ function handleHeaderToggle() {
 
       <!-- </div> -->
       <LayoutContent
+        :id="idMainContent"
         :content-compact="contentCompact"
         :content-compact-width="contentCompactWidth"
         :padding="contentPadding"
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/package.json b/apps/vben5/packages/@core/ui-kit/menu-ui/package.json
index 4ee5a8509..4c833cb8a 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/menu-ui",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/index.ts b/apps/vben5/packages/@core/ui-kit/menu-ui/src/index.ts
index 575a23309..1e3bc143b 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/index.ts
@@ -1,3 +1,4 @@
+export { default as MenuBadge } from './components/menu-badge.vue';
 export * from './components/normal-menu';
 export { default as Menu } from './menu.vue';
 export type * from './types';
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
index a1992c870..f75ee50cb 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
@@ -7,6 +7,11 @@ import type { Component, Ref } from 'vue';
 export type DrawerPlacement = 'bottom' | 'left' | 'right' | 'top';
 
 export interface DrawerProps {
+  /**
+   * 是否挂载到内容区域
+   * @default false
+   */
+  appendToMain?: boolean;
   /**
    * 取消按钮文字
    */
@@ -59,12 +64,12 @@ export interface DrawerProps {
    * 弹窗头部样式
    */
   headerClass?: ClassType;
-
   /**
    * 弹窗是否显示
    * @default false
    */
   loading?: boolean;
+
   /**
    * 是否显示遮罩
    * @default true
@@ -74,12 +79,12 @@ export interface DrawerProps {
    * 是否自动聚焦
    */
   openAutoFocus?: boolean;
-
   /**
    * 抽屉位置
    * @default right
    */
   placement?: DrawerPlacement;
+
   /**
    * 是否显示取消按钮
    * @default true
@@ -98,6 +103,10 @@ export interface DrawerProps {
    * 弹窗标题提示
    */
   titleTooltip?: string;
+  /**
+   * 抽屉层级
+   */
+  zIndex?: number;
 }
 
 export interface DrawerState extends DrawerProps {
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
index a01670997..31a409882 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { DrawerProps, ExtendedDrawerApi } from './drawer';
 
-import { provide, ref, useId, watch } from 'vue';
+import { computed, provide, ref, useId, watch } from 'vue';
 
 import {
   useIsMobile,
@@ -23,6 +23,7 @@ import {
   VbenLoading,
   VisuallyHidden,
 } from '@vben-core/shadcn-ui';
+import { ELEMENT_ID_MAIN_CONTENT } from '@vben-core/shared/constants';
 import { globalShareState } from '@vben-core/shared/global-state';
 import { cn } from '@vben-core/shared/utils';
 
@@ -31,7 +32,9 @@ interface Props extends DrawerProps {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  appendToMain: false,
   drawerApi: undefined,
+  zIndex: 1000,
 });
 
 const components = globalShareState.getComponents();
@@ -46,6 +49,7 @@ const { isMobile } = useIsMobile();
 const state = props.drawerApi?.useStore?.();
 
 const {
+  appendToMain,
   cancelText,
   class: drawerClass,
   closable,
@@ -67,6 +71,7 @@ const {
   showConfirmButton,
   title,
   titleTooltip,
+  zIndex,
 } = usePriorityValues(props, state);
 
 watch(
@@ -110,6 +115,10 @@ function handleFocusOutside(e: Event) {
   e.preventDefault();
   e.stopPropagation();
 }
+
+const getAppendTo = computed(() => {
+  return appendToMain.value ? `#${ELEMENT_ID_MAIN_CONTENT}` : undefined;
+});
 </script>
 <template>
   <Sheet
@@ -118,6 +127,7 @@ function handleFocusOutside(e: Event) {
     @update:open="() => drawerApi?.close()"
   >
     <SheetContent
+      :append-to="getAppendTo"
       :class="
         cn('flex w-[520px] flex-col', drawerClass, {
           '!w-full': isMobile || placement === 'bottom' || placement === 'top',
@@ -127,6 +137,7 @@ function handleFocusOutside(e: Event) {
       :modal="modal"
       :open="state?.isOpen"
       :side="placement"
+      :z-index="zIndex"
       @close-auto-focus="handleFocusOutside"
       @escape-key-down="escapeKeyDown"
       @focus-outside="handleFocusOutside"
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
index 4e0dd6de7..5508d004b 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
@@ -3,6 +3,11 @@ import type { ModalApi } from './modal-api';
 import type { Component, Ref } from 'vue';
 
 export interface ModalProps {
+  /**
+   * 是否要挂载到内容区域
+   * @default false
+   */
+  appendToMain?: boolean;
   /**
    * 是否显示边框
    * @default false
@@ -12,7 +17,6 @@ export interface ModalProps {
    * 取消按钮文字
    */
   cancelText?: string;
-
   /**
    * 是否居中
    * @default false
@@ -20,6 +24,7 @@ export interface ModalProps {
   centered?: boolean;
 
   class?: string;
+
   /**
    * 是否显示右上角的关闭按钮
    * @default true
@@ -112,6 +117,10 @@ export interface ModalProps {
    * 弹窗标题提示
    */
   titleTooltip?: string;
+  /**
+   * 弹窗层级
+   */
+  zIndex?: number;
 }
 
 export interface ModalState extends ModalProps {
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
index e701f565d..4e7d7ca78 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -22,6 +22,7 @@ import {
   VbenLoading,
   VisuallyHidden,
 } from '@vben-core/shadcn-ui';
+import { ELEMENT_ID_MAIN_CONTENT } from '@vben-core/shared/constants';
 import { globalShareState } from '@vben-core/shared/global-state';
 import { cn } from '@vben-core/shared/utils';
 
@@ -32,6 +33,7 @@ interface Props extends ModalProps {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  appendToMain: false,
   modalApi: undefined,
 });
 
@@ -52,6 +54,7 @@ const { isMobile } = useIsMobile();
 const state = props.modalApi?.useStore?.();
 
 const {
+  appendToMain,
   bordered,
   cancelText,
   centered,
@@ -78,6 +81,7 @@ const {
   showConfirmButton,
   title,
   titleTooltip,
+  zIndex,
 } = usePriorityValues(props, state);
 
 const shouldFullscreen = computed(
@@ -161,6 +165,9 @@ function handleFocusOutside(e: Event) {
   e.preventDefault();
   e.stopPropagation();
 }
+const getAppendTo = computed(() => {
+  return appendToMain.value ? `#${ELEMENT_ID_MAIN_CONTENT}` : undefined;
+});
 </script>
 <template>
   <Dialog
@@ -170,9 +177,10 @@ function handleFocusOutside(e: Event) {
   >
     <DialogContent
       ref="contentRef"
+      :append-to="getAppendTo"
       :class="
         cn(
-          'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0 sm:rounded-2xl',
+          'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0 sm:rounded-[var(--radius)]',
           modalClass,
           {
             'border-border border': bordered,
@@ -187,6 +195,7 @@ function handleFocusOutside(e: Event) {
       :modal="modal"
       :open="state?.isOpen"
       :show-close="closable"
+      :z-index="zIndex"
       close-class="top-3"
       @close-auto-focus="handleFocusOutside"
       @closed="() => modalApi?.onClosed()"
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/package.json b/apps/vben5/packages/@core/ui-kit/shadcn-ui/package.json
index 2510e210d..cccaa690e 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shadcn-ui",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "#main": "./dist/index.mjs",
   "#module": "./dist/index.mjs",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
index 7ba5cfbbc..941198d15 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
@@ -47,6 +47,10 @@ watch(
   },
 );
 
+watch(inputValue, (val) => {
+  modelValue.value = val.join('');
+});
+
 function handleComplete(e: string[]) {
   modelValue.value = e.join('');
   emit('complete');
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts
index 3ca9b4b42..d02877518 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts
@@ -11,8 +11,8 @@ export const buttonVariants = cva(
       size: {
         default: 'h-9 px-4 py-2',
         icon: 'h-8 w-8 rounded-sm px-1 text-lg',
-        lg: 'h-10 rounded-md px-8',
-        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-4',
+        sm: 'h-8 rounded-md px-2 text-xs',
         xs: 'h-8 w-8 rounded-sm px-1 text-xs',
       },
       variant: {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
index 2e374683a..9a8d73962 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
@@ -20,14 +20,16 @@ import DialogOverlay from './DialogOverlay.vue';
 const props = withDefaults(
   defineProps<
     {
+      appendTo?: HTMLElement | string;
       class?: ClassType;
       closeClass?: ClassType;
       modal?: boolean;
       open?: boolean;
       showClose?: boolean;
+      zIndex?: number;
     } & DialogContentProps
   >(),
-  { showClose: true },
+  { appendTo: 'body', showClose: true, zIndex: 1000 },
 );
 const emits = defineEmits<
   { close: []; closed: []; opened: [] } & DialogContentEmits
@@ -45,6 +47,18 @@ const delegatedProps = computed(() => {
   return delegated;
 });
 
+function isAppendToBody() {
+  return (
+    props.appendTo === 'body' ||
+    props.appendTo === document.body ||
+    !props.appendTo
+  );
+}
+
+const position = computed(() => {
+  return isAppendToBody() ? 'fixed' : 'absolute';
+});
+
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 const contentRef = ref<InstanceType<typeof DialogContent> | null>(null);
@@ -64,17 +78,22 @@ defineExpose({
 </script>
 
 <template>
-  <DialogPortal>
+  <DialogPortal :to="appendTo">
     <Transition name="fade">
-      <DialogOverlay v-if="open && modal" @click="() => emits('close')" />
+      <DialogOverlay
+        v-if="open && modal"
+        :style="{ zIndex, position }"
+        @click="() => emits('close')"
+      />
     </Transition>
     <DialogContent
       ref="contentRef"
+      :style="{ zIndex, position }"
       @animationend="onAnimationEnd"
       v-bind="forwarded"
       :class="
         cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] fixed z-[1000] w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] w-full p-6 shadow-lg outline-none sm:rounded-xl',
           props.class,
         )
       "
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogFooter.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogFooter.vue
index a8e56d8cc..09460b901 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogFooter.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogFooter.vue
@@ -7,10 +7,7 @@ const props = defineProps<{ class?: any }>();
 <template>
   <div
     :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
+      cn('flex flex-row flex-col-reverse justify-end gap-x-2', props.class)
     "
   >
     <slot></slot>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
index 1052a1344..f2142ac66 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
@@ -7,8 +7,5 @@ useScrollLock();
 const id = inject('DISMISSABLE_MODAL_ID');
 </script>
 <template>
-  <div
-    :data-dismissable-modal="id"
-    class="bg-overlay fixed inset-0 z-[1000]"
-  ></div>
+  <div :data-dismissable-modal="id" class="bg-overlay inset-0"></div>
 </template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
index f17048b4c..99ab7b111 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
@@ -14,7 +14,10 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DialogContentProps>();
+const props = withDefaults(
+  defineProps<{ class?: any; zIndex?: number } & DialogContentProps>(),
+  { zIndex: 1000 },
+);
 const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = computed(() => {
@@ -29,7 +32,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 border-border fixed inset-0 z-[1000] grid place-items-center overflow-y-auto border bg-black/80"
+      :style="{ zIndex }"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 border-border absolute inset-0 grid place-items-center overflow-y-auto border bg-black/80"
     >
       <DialogContent
         :class="
@@ -38,6 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
             props.class,
           )
         "
+        :style="{ zIndex }"
         v-bind="forwarded"
         @pointer-down-outside="
           (event) => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts
index 2711f942c..02e761457 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts
@@ -16,6 +16,7 @@ export * from './pagination';
 export * from './pin-input';
 export * from './popover';
 export * from './radio-group';
+export * from './resizable';
 export * from './scroll-area';
 export * from './select';
 export * from './separator';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
index 6971f2577..ee74d768d 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-input bg-background relative flex h-10 w-10 items-center justify-center border-y border-r text-center text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md focus:relative focus:z-10 focus:outline-none focus:ring-2',
+        'border-input bg-background relative flex h-10 w-8 items-center justify-center border-y border-r text-center text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md focus:relative focus:z-10 focus:outline-none focus:ring-2 md:w-10',
         props.class,
       )
     "
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
new file mode 100644
index 000000000..81dc3fb41
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue';
+
+import { GripVertical } from '@vben-core/icons';
+import { cn } from '@vben-core/shared/utils';
+
+import {
+  SplitterResizeHandle,
+  type SplitterResizeHandleEmits,
+  type SplitterResizeHandleProps,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+const props = defineProps<
+  {
+    class?: HTMLAttributes['class'];
+    withHandle?: boolean;
+  } & SplitterResizeHandleProps
+>();
+const emits = defineEmits<SplitterResizeHandleEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SplitterResizeHandle
+    v-bind="forwarded"
+    :class="
+      cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 [&[data-orientation=vertical]>div]:rotate-90 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0',
+        props.class,
+      )
+    "
+  >
+    <template v-if="props.withHandle">
+      <div
+        class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border"
+      >
+        <GripVertical class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue
new file mode 100644
index 000000000..8ea15f994
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import {
+  SplitterGroup,
+  type SplitterGroupEmits,
+  type SplitterGroupProps,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+const props = defineProps<
+  { class?: HTMLAttributes['class'] } & SplitterGroupProps
+>();
+const emits = defineEmits<SplitterGroupEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SplitterGroup
+    v-bind="forwarded"
+    :class="
+      cn(
+        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </SplitterGroup>
+</template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/index.ts
new file mode 100644
index 000000000..75c05d589
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/index.ts
@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from './ResizableHandle.vue';
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue';
+export { SplitterPanel as ResizablePanel } from 'radix-vue';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue
index 94dfcadb6..88538489b 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue
@@ -38,7 +38,7 @@ const delegatedProps = computed(() => {
   >
     <ScrollAreaViewport
       as-child
-      class="h-full w-full rounded-[inherit]"
+      class="h-full w-full rounded-[inherit] focus:outline-none"
       @scroll="onScroll"
     >
       <slot></slot>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue
index 361396aec..5b09675c4 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue
@@ -15,17 +15,22 @@ import { type SheetVariants, sheetVariants } from './sheet';
 import SheetOverlay from './SheetOverlay.vue';
 
 interface SheetContentProps extends DialogContentProps {
+  appendTo?: HTMLElement | string;
   class?: any;
   modal?: boolean;
   open?: boolean;
   side?: SheetVariants['side'];
+  zIndex?: number;
 }
 
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = defineProps<SheetContentProps>();
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  appendTo: 'body',
+  zIndex: 1000,
+});
 
 const emits = defineEmits<DialogContentEmits>();
 
@@ -41,16 +46,29 @@ const delegatedProps = computed(() => {
   return delegated;
 });
 
+function isAppendToBody() {
+  return (
+    props.appendTo === 'body' ||
+    props.appendTo === document.body ||
+    !props.appendTo
+  );
+}
+
+const position = computed(() => {
+  return isAppendToBody() ? 'fixed' : 'absolute';
+});
+
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal>
+  <DialogPortal :to="appendTo">
     <Transition name="fade">
-      <SheetOverlay v-if="open && modal" />
+      <SheetOverlay v-if="open && modal" :style="{ zIndex, position }" />
     </Transition>
     <DialogContent
-      :class="cn(sheetVariants({ side }), 'z-[1000]', props.class)"
+      :class="cn(sheetVariants({ side }), props.class)"
+      :style="{ zIndex, position }"
       v-bind="{ ...forwarded, ...$attrs }"
     >
       <slot></slot>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetFooter.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetFooter.vue
index a8e56d8cc..09460b901 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetFooter.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetFooter.vue
@@ -7,10 +7,7 @@ const props = defineProps<{ class?: any }>();
 <template>
   <div
     :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
+      cn('flex flex-row flex-col-reverse justify-end gap-x-2', props.class)
     "
   >
     <slot></slot>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue
index 0a153c7a9..c9e968626 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue
@@ -7,8 +7,5 @@ useScrollLock();
 const id = inject('DISMISSABLE_DRAWER_ID');
 </script>
 <template>
-  <div
-    :data-dismissable-drawer="id"
-    class="bg-overlay fixed inset-0 z-[1000]"
-  ></div>
+  <div :data-dismissable-drawer="id" class="bg-overlay inset-0"></div>
 </template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/sheet.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/sheet.ts
index f41568b73..5fd114fde 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/sheet.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/sheet.ts
@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const sheetVariants = cva(
-  'fixed z-[1000] bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border',
+  'bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border',
   {
     defaultVariants: {
       side: 'right',
@@ -12,7 +12,7 @@ export const sheetVariants = cva(
           'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
         left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left ',
         right:
-          'inset-y-0 right-0 h-full w-3/4 border-l  data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
+          'inset-y-0 right-0 w-3/4 border-l  data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
         top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
       },
     },
diff --git a/apps/vben5/packages/@core/ui-kit/tabs-ui/package.json b/apps/vben5/packages/@core/ui-kit/tabs-ui/package.json
index 41fb23748..7e98a8429 100644
--- a/apps/vben5/packages/@core/ui-kit/tabs-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/tabs-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/tabs-ui",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
index 7656e489c..daf9f77d0 100644
--- a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
+++ b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
@@ -19,6 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   contentClass: 'vben-tabs-content',
   draggable: true,
   styleType: 'chrome',
+  wheelable: true,
 });
 
 const emit = defineEmits<TabsEmits>();
@@ -27,6 +28,7 @@ const forward = useForwardPropsEmits(props, emit);
 
 const {
   handleScrollAt,
+  handleWheel,
   scrollbarRef,
   scrollDirection,
   scrollIsAtLeft,
@@ -34,6 +36,14 @@ const {
   showScrollButton,
 } = useTabsViewScroll(props);
 
+function onWheel(e: WheelEvent) {
+  if (props.wheelable) {
+    handleWheel(e);
+    e.stopPropagation();
+    e.preventDefault();
+  }
+}
+
 useTabsDrag(props, emit);
 </script>
 
@@ -69,6 +79,7 @@ useTabsDrag(props, emit);
         shadow-left
         shadow-right
         @scroll-at="handleScrollAt"
+        @wheel="onWheel"
       >
         <TabsChrome
           v-if="styleType === 'chrome'"
diff --git a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/types.ts b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/types.ts
index ce0ac474b..842fd42c4 100644
--- a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/types.ts
+++ b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/types.ts
@@ -33,7 +33,6 @@ export interface TabsProps {
    * 仅限 tabs-chrome
    */
   maxWidth?: number;
-
   /**
    * @zh_CN tab最小宽度
    * 仅限 tabs-chrome
@@ -44,15 +43,20 @@ export interface TabsProps {
    * @zh_CN 是否显示图标
    */
   showIcon?: boolean;
+
   /**
    * @zh_CN 标签页风格
    */
   styleType?: TabsStyleType;
-
   /**
    * @zh_CN 选项卡数据
    */
   tabs?: TabDefinition[];
+
+  /**
+   * @zh_CN 是否响应滚轮事件
+   */
+  wheelable?: boolean;
 }
 
 export interface TabConfig extends TabDefinition {
diff --git a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
index a56b38217..5d5b846d1 100644
--- a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
+++ b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
@@ -142,6 +142,13 @@ export function useTabsViewScroll(props: TabsProps) {
     scrollIsAtRight.value = right;
   }, 100);
 
+  function handleWheel({ deltaY }: WheelEvent) {
+    scrollViewportEl.value?.scrollBy({
+      behavior: 'smooth',
+      left: deltaY * 3,
+    });
+  }
+
   watch(
     () => props.active,
     async () => {
@@ -184,6 +191,7 @@ export function useTabsViewScroll(props: TabsProps) {
 
   return {
     handleScrollAt,
+    handleWheel,
     initScrollbar,
     scrollbarRef,
     scrollDirection,
diff --git a/apps/vben5/packages/constants/package.json b/apps/vben5/packages/constants/package.json
index 9ecc03f25..aeb733875 100644
--- a/apps/vben5/packages/constants/package.json
+++ b/apps/vben5/packages/constants/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/constants",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/effects/access/package.json b/apps/vben5/packages/effects/access/package.json
index e5bdabd10..ca991275c 100644
--- a/apps/vben5/packages/effects/access/package.json
+++ b/apps/vben5/packages/effects/access/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/access",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/effects/common-ui/package.json b/apps/vben5/packages/effects/common-ui/package.json
index 2ff5fdf3b..5e318c638 100644
--- a/apps/vben5/packages/effects/common-ui/package.json
+++ b/apps/vben5/packages/effects/common-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/common-ui",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -22,6 +22,7 @@
   "dependencies": {
     "@vben-core/form-ui": "workspace:*",
     "@vben-core/popup-ui": "workspace:*",
+    "@vben-core/preferences": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/shared": "workspace:*",
     "@vben/constants": "workspace:*",
diff --git a/apps/vben5/packages/effects/common-ui/src/components/api-component/api-component.vue b/apps/vben5/packages/effects/common-ui/src/components/api-component/api-component.vue
new file mode 100644
index 000000000..d1d42ad7c
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/api-component/api-component.vue
@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import type { AnyPromiseFunction } from '@vben/types';
+
+import { type Component, computed, ref, unref, useAttrs, watch } from 'vue';
+
+import { LoaderCircle } from '@vben/icons';
+import { get, isEqual, isFunction } from '@vben-core/shared/utils';
+
+import { objectOmit } from '@vueuse/core';
+
+type OptionsItem = {
+  [name: string]: any;
+  children?: OptionsItem[];
+  disabled?: boolean;
+  label?: string;
+  value?: string;
+};
+
+interface Props {
+  /** 组件 */
+  component: Component;
+  /** 是否将value从数字转为string */
+  numberToString?: boolean;
+  /** 获取options数据的函数 */
+  api?: (arg?: any) => Promise<OptionsItem[] | Record<string, any>>;
+  /** 传递给api的参数 */
+  params?: Record<string, any>;
+  /** 从api返回的结果中提取options数组的字段名 */
+  resultField?: string;
+  /** label字段名 */
+  labelField?: string;
+  /** children字段名，需要层级数据的组件可用 */
+  childrenField?: string;
+  /** value字段名 */
+  valueField?: string;
+  /** 组件接收options数据的属性名 */
+  optionsPropName?: string;
+  /** 是否立即调用api */
+  immediate?: boolean;
+  /** 每次`visibleEvent`事件发生时都重新请求数据 */
+  alwaysLoad?: boolean;
+  /** 在api请求之前的回调函数 */
+  beforeFetch?: AnyPromiseFunction<any, any>;
+  /** 在api请求之后的回调函数 */
+  afterFetch?: AnyPromiseFunction<any, any>;
+  /** 直接传入选项数据，也作为api返回空数据时的后备数据 */
+  options?: OptionsItem[];
+  /** 组件的插槽名称，用来显示一个"加载中"的图标 */
+  loadingSlot?: string;
+  /** 触发api请求的事件名 */
+  visibleEvent?: string;
+  /** 组件的v-model属性名，默认为modelValue。部分组件可能为value */
+  modelPropName?: string;
+}
+
+defineOptions({ name: 'ApiComponent', inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  labelField: 'label',
+  valueField: 'value',
+  childrenField: '',
+  optionsPropName: 'options',
+  resultField: '',
+  visibleEvent: '',
+  numberToString: false,
+  params: () => ({}),
+  immediate: true,
+  alwaysLoad: false,
+  loadingSlot: '',
+  beforeFetch: undefined,
+  afterFetch: undefined,
+  modelPropName: 'modelValue',
+  api: undefined,
+  options: () => [],
+});
+
+const emit = defineEmits<{
+  optionsChange: [OptionsItem[]];
+}>();
+
+const modelValue = defineModel({ default: '' });
+
+const attrs = useAttrs();
+
+const refOptions = ref<OptionsItem[]>([]);
+const loading = ref(false);
+// 首次是否加载过了
+const isFirstLoaded = ref(false);
+
+const getOptions = computed(() => {
+  const { labelField, valueField, childrenField, numberToString } = props;
+
+  const refOptionsData = unref(refOptions);
+
+  function transformData(data: OptionsItem[]): OptionsItem[] {
+    return data.map((item) => {
+      const value = get(item, valueField);
+      return {
+        ...objectOmit(item, [labelField, valueField, childrenField]),
+        label: get(item, labelField),
+        value: numberToString ? `${value}` : value,
+        ...(childrenField && item[childrenField]
+          ? { children: transformData(item[childrenField]) }
+          : {}),
+      };
+    });
+  }
+
+  const data: OptionsItem[] = transformData(refOptionsData);
+
+  return data.length > 0 ? data : props.options;
+});
+
+const bindProps = computed(() => {
+  return {
+    [props.modelPropName]: unref(modelValue),
+    [props.optionsPropName]: unref(getOptions),
+    [`onUpdate:${props.modelPropName}`]: (val: string) => {
+      modelValue.value = val;
+    },
+    ...objectOmit(attrs, ['onUpdate:value']),
+    ...(props.visibleEvent
+      ? {
+          [props.visibleEvent]: handleFetchForVisible,
+        }
+      : {}),
+  };
+});
+
+async function fetchApi() {
+  let { api, beforeFetch, afterFetch, params, resultField } = props;
+
+  if (!api || !isFunction(api) || loading.value) {
+    return;
+  }
+  refOptions.value = [];
+  try {
+    loading.value = true;
+    if (beforeFetch && isFunction(beforeFetch)) {
+      params = (await beforeFetch(params)) || params;
+    }
+    let res = await api(params);
+    if (afterFetch && isFunction(afterFetch)) {
+      res = (await afterFetch(res)) || res;
+    }
+    isFirstLoaded.value = true;
+    if (Array.isArray(res)) {
+      refOptions.value = res;
+      emitChange();
+      return;
+    }
+    if (resultField) {
+      refOptions.value = get(res, resultField) || [];
+    }
+    emitChange();
+  } catch (error) {
+    console.warn(error);
+    // reset status
+    isFirstLoaded.value = false;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleFetchForVisible(visible: boolean) {
+  if (visible) {
+    if (props.alwaysLoad) {
+      await fetchApi();
+    } else if (!props.immediate && !unref(isFirstLoaded)) {
+      await fetchApi();
+    }
+  }
+}
+
+watch(
+  () => props.params,
+  (value, oldValue) => {
+    if (isEqual(value, oldValue)) {
+      return;
+    }
+    fetchApi();
+  },
+  { deep: true, immediate: props.immediate },
+);
+
+function emitChange() {
+  emit('optionsChange', unref(getOptions));
+}
+</script>
+<template>
+  <div v-bind="{ ...$attrs }">
+    <component
+      :is="component"
+      v-bind="bindProps"
+      :placeholder="$attrs.placeholder"
+    >
+      <template v-for="item in Object.keys($slots)" #[item]="data">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+      <template v-if="loadingSlot && loading" #[loadingSlot]>
+        <LoaderCircle class="animate-spin" />
+      </template>
+    </component>
+  </div>
+</template>
diff --git a/apps/vben5/packages/effects/common-ui/src/components/api-component/index.ts b/apps/vben5/packages/effects/common-ui/src/components/api-component/index.ts
new file mode 100644
index 000000000..9815763cf
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/api-component/index.ts
@@ -0,0 +1 @@
+export { default as ApiComponent } from './api-component.vue';
diff --git a/apps/vben5/packages/effects/common-ui/src/components/col-page/col-page.vue b/apps/vben5/packages/effects/common-ui/src/components/col-page/col-page.vue
new file mode 100644
index 000000000..c3f9d686d
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/col-page/col-page.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type { ColPageProps } from './types';
+
+import { computed, ref, useSlots } from 'vue';
+
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@vben-core/shadcn-ui';
+
+import Page from '../page/page.vue';
+
+defineOptions({
+  name: 'ColPage',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<ColPageProps>(), {
+  leftWidth: 30,
+  rightWidth: 70,
+  resizable: true,
+});
+
+const delegatedProps = computed(() => {
+  const { leftWidth: _, ...delegated } = props;
+  return delegated;
+});
+
+const slots = useSlots();
+
+const delegatedSlots = computed(() => {
+  const resultSlots: string[] = [];
+
+  for (const key of Object.keys(slots)) {
+    if (!['default', 'left'].includes(key)) {
+      resultSlots.push(key);
+    }
+  }
+  return resultSlots;
+});
+
+const leftPanelRef = ref<InstanceType<typeof ResizablePanel>>();
+
+function expandLeft() {
+  leftPanelRef.value?.expand();
+}
+
+function collapseLeft() {
+  leftPanelRef.value?.collapse();
+}
+
+defineExpose({
+  expandLeft,
+  collapseLeft,
+});
+</script>
+<template>
+  <Page v-bind="delegatedProps">
+    <!-- 继承默认的slot -->
+    <template
+      v-for="slotName in delegatedSlots"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps"></slot>
+    </template>
+
+    <ResizablePanelGroup class="w-full" direction="horizontal">
+      <ResizablePanel
+        ref="leftPanelRef"
+        :collapsed-size="leftCollapsedWidth"
+        :collapsible="leftCollapsible"
+        :default-size="leftWidth"
+        :max-size="leftMaxWidth"
+        :min-size="leftMinWidth"
+      >
+        <template #default="slotProps">
+          <slot
+            name="left"
+            v-bind="{
+              ...slotProps,
+              expand: expandLeft,
+              collapse: collapseLeft,
+            }"
+          ></slot>
+        </template>
+      </ResizablePanel>
+      <ResizableHandle
+        v-if="resizable"
+        :style="{ backgroundColor: splitLine ? undefined : 'transparent' }"
+        :with-handle="splitHandle"
+      />
+      <ResizablePanel
+        :collapsed-size="rightCollapsedWidth"
+        :collapsible="rightCollapsible"
+        :default-size="rightWidth"
+        :max-size="rightMaxWidth"
+        :min-size="rightMinWidth"
+      >
+        <template #default>
+          <slot></slot>
+        </template>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </Page>
+</template>
diff --git a/apps/vben5/packages/effects/common-ui/src/components/col-page/index.ts b/apps/vben5/packages/effects/common-ui/src/components/col-page/index.ts
new file mode 100644
index 000000000..11b330584
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/col-page/index.ts
@@ -0,0 +1,2 @@
+export { default as ColPage } from './col-page.vue';
+export * from './types';
diff --git a/apps/vben5/packages/effects/common-ui/src/components/col-page/types.ts b/apps/vben5/packages/effects/common-ui/src/components/col-page/types.ts
new file mode 100644
index 000000000..491d1e6d9
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/col-page/types.ts
@@ -0,0 +1,26 @@
+import type { PageProps } from '../page/types';
+
+export interface ColPageProps extends PageProps {
+  /**
+   * 左侧宽度
+   * @default 30
+   */
+  leftWidth?: number;
+  leftMinWidth?: number;
+  leftMaxWidth?: number;
+  leftCollapsedWidth?: number;
+  leftCollapsible?: boolean;
+  /**
+   * 右侧宽度
+   * @default 70
+   */
+  rightWidth?: number;
+  rightMinWidth?: number;
+  rightCollapsedWidth?: number;
+  rightMaxWidth?: number;
+  rightCollapsible?: boolean;
+
+  resizable?: boolean;
+  splitLine?: boolean;
+  splitHandle?: boolean;
+}
diff --git a/apps/vben5/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue b/apps/vben5/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
index 131eb8ea2..323ce447a 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, useTemplateRef, watch, watchEffect } from 'vue';
+import { computed, h, ref, type VNode, watch, watchEffect } from 'vue';
 
 import { usePagination } from '@vben/hooks';
-import { EmptyIcon, Grip } from '@vben/icons';
+import { EmptyIcon, Grip, listIcons } from '@vben/icons';
+import { $t } from '@vben/locales';
 import {
   Button,
   Pagination,
@@ -18,58 +19,89 @@ import {
   VbenPopover,
 } from '@vben-core/shadcn-ui';
 
+import { refDebounced } from '@vueuse/core';
+
 interface Props {
-  value?: string;
   pageSize?: number;
+  prefix?: string;
   /**
    * 图标列表
    */
   icons?: string[];
+  /** Input组件 */
+  inputComponent?: VNode;
+  /** 图标插槽名，预览图标将被渲染到此插槽中 */
+  iconSlot?: string;
+  /** input组件的值属性名称 */
+  modelValueProp?: string;
+  /** 图标样式 */
+  iconClass?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  value: '',
+  prefix: 'ant-design',
   pageSize: 36,
   icons: () => [],
+  inputComponent: () => h('div'),
+  iconSlot: 'default',
+  iconClass: 'size-4',
+  modelValueProp: 'value',
 });
 
 const emit = defineEmits<{
   change: [string];
-  'update:value': [string];
 }>();
 
-const refTrigger = useTemplateRef<HTMLElement>('refTrigger');
+const modelValue = defineModel({ default: '', type: String });
+
+const visible = ref(false);
 const currentSelect = ref('');
-const currentList = ref(props.icons);
 const currentPage = ref(1);
+const keyword = ref('');
+const keywordDebounce = refDebounced(keyword, 300);
+const currentList = computed(() => {
+  try {
+    if (props.prefix) {
+      const icons = listIcons('', props.prefix);
+      if (icons.length === 0) {
+        console.warn(`No icons found for prefix: ${props.prefix}`);
+      }
+      return icons;
+    } else {
+      return props.icons;
+    }
+  } catch (error) {
+    console.error('Failed to load icons:', error);
+    return [];
+  }
+});
 
-watch(
-  () => props.icons,
-  (newIcons) => {
-    currentList.value = newIcons;
-  },
-  { immediate: true },
-);
+const showList = computed(() => {
+  return currentList.value.filter((item) =>
+    item.includes(keywordDebounce.value),
+  );
+});
 
 const { paginationList, total, setCurrentPage } = usePagination(
-  currentList,
+  showList,
   props.pageSize,
 );
 
 watchEffect(() => {
-  currentSelect.value = props.value;
+  currentSelect.value = modelValue.value;
 });
 
 watch(
   () => currentSelect.value,
   (v) => {
-    emit('update:value', v);
     emit('change', v);
   },
 );
 
 const handleClick = (icon: string) => {
   currentSelect.value = icon;
+  modelValue.value = icon;
+  close();
 };
 
 const handlePageChange = (page: number) => {
@@ -77,22 +109,53 @@ const handlePageChange = (page: number) => {
   setCurrentPage(page);
 };
 
-function changeOpenState() {
-  refTrigger.value?.click?.();
+function toggleOpenState() {
+  visible.value = !visible.value;
+}
+
+function open() {
+  visible.value = true;
 }
 
-defineExpose({ changeOpenState });
+function close() {
+  visible.value = false;
+}
+
+function onKeywordChange(v: string) {
+  keyword.value = v;
+}
+
+const searchInputProps = computed(() => {
+  return {
+    placeholder: $t('ui.iconPicker.search'),
+    [props.modelValueProp]: keyword.value,
+    [`onUpdate:${props.modelValueProp}`]: onKeywordChange,
+    class: 'mx-2',
+  };
+});
+
+defineExpose({ toggleOpenState, open, close });
 </script>
 <template>
   <VbenPopover
+    v-model:open="visible"
     :content-props="{ align: 'end', alignOffset: -11, sideOffset: 8 }"
     content-class="p-0 pt-3"
   >
     <template #trigger>
-      <div ref="refTrigger">
-        <VbenIcon :icon="currentSelect || Grip" class="size-5" />
-      </div>
+      <component
+        :is="inputComponent"
+        :[modelValueProp]="currentSelect"
+        :placeholder="$t('ui.iconPicker.placeholder')"
+      >
+        <template #[iconSlot]>
+          <VbenIcon :icon="currentSelect || Grip" class="size-4" />
+        </template>
+      </component>
     </template>
+    <div class="mb-2 flex w-full">
+      <component :is="inputComponent" v-bind="searchInputProps" />
+    </div>
 
     <template v-if="paginationList.length > 0">
       <div class="grid max-h-[360px] w-full grid-cols-6 justify-items-center">
diff --git a/apps/vben5/packages/effects/common-ui/src/components/index.ts b/apps/vben5/packages/effects/common-ui/src/components/index.ts
index b7ae8548b..6bba55262 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/index.ts
+++ b/apps/vben5/packages/effects/common-ui/src/components/index.ts
@@ -1,4 +1,6 @@
+export * from './api-component';
 export * from './captcha';
+export * from './col-page';
 export * from './ellipsis-text';
 export * from './icon-picker';
 export * from './page';
diff --git a/apps/vben5/packages/effects/common-ui/src/components/page/index.ts b/apps/vben5/packages/effects/common-ui/src/components/page/index.ts
index 65bf3c697..fd9e02f22 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/page/index.ts
+++ b/apps/vben5/packages/effects/common-ui/src/components/page/index.ts
@@ -1 +1,2 @@
 export { default as Page } from './page.vue';
+export * from './types';
diff --git a/apps/vben5/packages/effects/common-ui/src/components/page/page.vue b/apps/vben5/packages/effects/common-ui/src/components/page/page.vue
index e8c486ebe..3a2ca8ac0 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/page/page.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/page/page.vue
@@ -1,26 +1,23 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
+import type { PageProps } from './types';
 
-interface Props {
-  title?: string;
-  description?: string;
-  contentClass?: string;
-  /**
-   * 根据content可见高度自适应
-   */
-  autoContentHeight?: boolean;
-}
+import {
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  type StyleValue,
+  useTemplateRef,
+} from 'vue';
+
+import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/shared/constants';
+import { cn } from '@vben-core/shared/utils';
 
 defineOptions({
   name: 'Page',
 });
 
-const {
-  contentClass = '',
-  description = '',
-  autoContentHeight = false,
-  title = '',
-} = defineProps<Props>();
+const { autoContentHeight = false } = defineProps<PageProps>();
 
 const headerHeight = ref(0);
 const footerHeight = ref(0);
@@ -29,13 +26,11 @@ const shouldAutoHeight = ref(false);
 const headerRef = useTemplateRef<HTMLDivElement>('headerRef');
 const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
 
-const contentStyle = computed(() => {
+const contentStyle = computed<StyleValue>(() => {
   if (autoContentHeight) {
     return {
-      height: shouldAutoHeight.value
-        ? `calc(var(--vben-content-height) - ${headerHeight.value}px - ${footerHeight.value}px)`
-        : '0',
-      // 'overflow-y': shouldAutoHeight.value?'auto':'unset',
+      height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px)`,
+      overflowY: shouldAutoHeight.value ? 'auto' : 'unset',
     };
   }
   return {};
@@ -69,33 +64,45 @@ onMounted(() => {
         $slots.extra
       "
       ref="headerRef"
-      class="bg-card relative px-6 py-4"
+      :class="
+        cn(
+          'bg-card border-border relative flex items-end border-b px-6 py-4',
+          headerClass,
+        )
+      "
     >
-      <slot name="title">
-        <div v-if="title" class="mb-2 flex text-lg font-semibold">
-          {{ title }}
-        </div>
-      </slot>
+      <div class="flex-auto">
+        <slot name="title">
+          <div v-if="title" class="mb-2 flex text-lg font-semibold">
+            {{ title }}
+          </div>
+        </slot>
 
-      <slot name="description">
-        <p v-if="description" class="text-muted-foreground">
-          {{ description }}
-        </p>
-      </slot>
+        <slot name="description">
+          <p v-if="description" class="text-muted-foreground">
+            {{ description }}
+          </p>
+        </slot>
+      </div>
 
-      <div v-if="$slots.extra" class="absolute bottom-4 right-4">
+      <div v-if="$slots.extra">
         <slot name="extra"></slot>
       </div>
     </div>
 
-    <div :class="contentClass" :style="contentStyle" class="h-full p-4">
+    <div :class="cn('h-full p-4', contentClass)" :style="contentStyle">
       <slot></slot>
     </div>
 
     <div
       v-if="$slots.footer"
       ref="footerRef"
-      class="bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4"
+      :class="
+        cn(
+          'bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4',
+          footerClass,
+        )
+      "
     >
       <slot name="footer"></slot>
     </div>
diff --git a/apps/vben5/packages/effects/common-ui/src/components/page/types.ts b/apps/vben5/packages/effects/common-ui/src/components/page/types.ts
new file mode 100644
index 000000000..5316d08d9
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/page/types.ts
@@ -0,0 +1,11 @@
+export interface PageProps {
+  title?: string;
+  description?: string;
+  contentClass?: string;
+  /**
+   * 根据content可见高度自适应
+   */
+  autoContentHeight?: boolean;
+  headerClass?: string;
+  footerClass?: string;
+}
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue b/apps/vben5/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
index 0b705ad3b..4b4f9b448 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
 import type { AuthenticationProps } from './types';
 
-import { watch } from 'vue';
+import { computed, watch } from 'vue';
 
 import { useVbenModal } from '@vben-core/popup-ui';
 import { Slot, VbenAvatar } from '@vben-core/shadcn-ui';
 
 interface Props extends AuthenticationProps {
   avatar?: string;
+  zIndex?: number;
 }
 
 defineOptions({
   name: 'LoginExpiredModal',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   avatar: '',
+  zIndex: 0,
 });
 
 const open = defineModel<boolean>('open');
@@ -28,6 +30,26 @@ watch(
     modalApi.setState({ isOpen: val });
   },
 );
+
+const getZIndex = computed(() => {
+  return props.zIndex || calcZIndex();
+});
+
+/**
+ * 获取最大的zIndex值
+ */
+function calcZIndex() {
+  let maxZ = 0;
+  const elements = document.querySelectorAll('*');
+  [...elements].forEach((element) => {
+    const style = window.getComputedStyle(element);
+    const zIndex = style.getPropertyValue('z-index');
+    if (zIndex && !Number.isNaN(Number.parseInt(zIndex))) {
+      maxZ = Math.max(maxZ, Number.parseInt(zIndex));
+    }
+  });
+  return maxZ + 1;
+}
 </script>
 
 <template>
@@ -39,6 +61,7 @@ watch(
       :footer="false"
       :fullscreen-button="false"
       :header="false"
+      :z-index="getZIndex"
       class="border-none px-10 py-6 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset]"
     >
       <VbenAvatar :src="avatar" class="mx-auto mb-6 size-20" />
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
index b70629295..0a3fb7c24 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
@@ -38,7 +38,7 @@ defineEmits(['click']);
             'border-b-0': index < 3,
             'pb-4': index > 2,
           }"
-          class="border-border group w-full cursor-pointer border-b border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
+          class="border-border group w-full cursor-pointer border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
         >
           <div class="flex items-center">
             <VbenIcon
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
index 78846099e..9eb517f9e 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
@@ -38,7 +38,7 @@ defineEmits(['click']);
             'pb-4': index > 2,
             'border-b-0': index < 3,
           }"
-          class="flex-col-center border-border group w-1/3 cursor-pointer border-b border-r border-t py-8 hover:shadow-xl"
+          class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
           @click="$emit('click', item)"
         >
           <VbenIcon
diff --git a/apps/vben5/packages/effects/hooks/package.json b/apps/vben5/packages/effects/hooks/package.json
index 8c87d3087..a531cf9c6 100644
--- a/apps/vben5/packages/effects/hooks/package.json
+++ b/apps/vben5/packages/effects/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/hooks",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -25,6 +25,7 @@
     "@vben/stores": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
+    "@vueuse/core": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:",
     "watermark-js-plus": "catalog:"
diff --git a/apps/vben5/packages/effects/hooks/src/index.ts b/apps/vben5/packages/effects/hooks/src/index.ts
index 51f640602..c189fd77a 100644
--- a/apps/vben5/packages/effects/hooks/src/index.ts
+++ b/apps/vben5/packages/effects/hooks/src/index.ts
@@ -1,6 +1,7 @@
 export * from './use-app-config';
 export * from './use-content-maximize';
 export * from './use-design-tokens';
+export * from './use-hover-toggle';
 export * from './use-pagination';
 export * from './use-refresh';
 export * from './use-tabs';
diff --git a/apps/vben5/packages/effects/hooks/src/use-hover-toggle.ts b/apps/vben5/packages/effects/hooks/src/use-hover-toggle.ts
new file mode 100644
index 000000000..becb1beed
--- /dev/null
+++ b/apps/vben5/packages/effects/hooks/src/use-hover-toggle.ts
@@ -0,0 +1,63 @@
+import type { Arrayable, MaybeElementRef } from '@vueuse/core';
+
+import { computed, onUnmounted, ref, watch } from 'vue';
+import type { Ref } from 'vue';
+
+import { isFunction } from '@vben/utils';
+
+import { useMouseInElement } from '@vueuse/core';
+
+/**
+ * 监测鼠标是否在元素内部，如果在元素内部则返回 true，否则返回 false
+ * @param refElement 所有需要检测的元素。如果提供了一个数组，那么鼠标在任何一个元素内部都会返回 true
+ * @param delay 延迟更新状态的时间
+ * @returns 返回一个数组，第一个元素是一个 ref，表示鼠标是否在元素内部，第二个元素是一个控制器，可以通过 enable 和 disable 方法来控制监听器的启用和禁用
+ */
+export function useHoverToggle(
+  refElement: Arrayable<MaybeElementRef>,
+  delay: (() => number) | number = 500,
+) {
+  const isOutsides: Array<Ref<boolean>> = [];
+  const value = ref(false);
+  const timer = ref<ReturnType<typeof setTimeout> | undefined>();
+  const refs = Array.isArray(refElement) ? refElement : [refElement];
+  refs.forEach((refEle) => {
+    const listener = useMouseInElement(refEle, { handleOutside: true });
+    isOutsides.push(listener.isOutside);
+  });
+  const isOutsideAll = computed(() => isOutsides.every((v) => v.value));
+
+  function setValueDelay(val: boolean) {
+    timer.value && clearTimeout(timer.value);
+    timer.value = setTimeout(
+      () => {
+        value.value = val;
+        timer.value = undefined;
+      },
+      isFunction(delay) ? delay() : delay,
+    );
+  }
+
+  const watcher = watch(
+    isOutsideAll,
+    (val) => {
+      setValueDelay(!val);
+    },
+    { immediate: true },
+  );
+
+  const controller = {
+    enable() {
+      watcher.resume();
+    },
+    disable() {
+      watcher.pause();
+    },
+  };
+
+  onUnmounted(() => {
+    timer.value && clearTimeout(timer.value);
+  });
+
+  return [value, controller] as [typeof value, typeof controller];
+}
diff --git a/apps/vben5/packages/effects/layouts/package.json b/apps/vben5/packages/effects/layouts/package.json
index 863874b43..f1eba82e1 100644
--- a/apps/vben5/packages/effects/layouts/package.json
+++ b/apps/vben5/packages/effects/layouts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/layouts",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/effects/layouts/src/basic/layout.vue b/apps/vben5/packages/effects/layouts/src/basic/layout.vue
index 16c3551f2..329508a1a 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/layout.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/layout.vue
@@ -103,6 +103,7 @@ const {
 
 const {
   handleMenuSelect,
+  handleMenuOpen,
   headerActive,
   headerMenus,
   sidebarActive,
@@ -110,10 +111,19 @@ const {
   sidebarVisible,
 } = useMixedMenu();
 
-function wrapperMenus(menus: MenuRecordRaw[]) {
-  return mapTree(menus, (item) => {
-    return { ...cloneDeep(item), name: $t(item.name) };
-  });
+/**
+ * 包装菜单，翻译菜单名称
+ * @param menus 原始菜单数据
+ * @param deep 是否深度包装。对于双列布局，只需要包装第一层，因为更深层的数据会在扩展菜单中重新包装
+ */
+function wrapperMenus(menus: MenuRecordRaw[], deep: boolean = true) {
+  return deep
+    ? mapTree(menus, (item) => {
+        return { ...cloneDeep(item), name: $t(item.name) };
+      })
+    : menus.map((item) => {
+        return { ...cloneDeep(item), name: $t(item.name) };
+      });
 }
 
 function toggleSidebar() {
@@ -251,13 +261,14 @@ const headerSlots = computed(() => {
         :rounded="isMenuRounded"
         :theme="sidebarTheme"
         mode="vertical"
+        @open="handleMenuOpen"
         @select="handleMenuSelect"
       />
     </template>
     <template #mixed-menu>
       <LayoutMixedMenu
         :active-path="extraActiveMenu"
-        :menus="wrapperMenus(headerMenus)"
+        :menus="wrapperMenus(headerMenus, false)"
         :rounded="isMenuRounded"
         :theme="sidebarTheme"
         @default-select="handleDefaultSelect"
diff --git a/apps/vben5/packages/effects/layouts/src/basic/menu/menu.vue b/apps/vben5/packages/effects/layouts/src/basic/menu/menu.vue
index 11c34e198..812813a6c 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/menu/menu.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/menu/menu.vue
@@ -14,12 +14,17 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
+  open: [string, string[]];
   select: [string, string?];
 }>();
 
 function handleMenuSelect(key: string) {
   emit('select', key, props.mode);
 }
+
+function handleMenuOpen(key: string, path: string[]) {
+  emit('open', key, path);
+}
 </script>
 
 <template>
@@ -32,6 +37,7 @@ function handleMenuSelect(key: string) {
     :mode="mode"
     :rounded="rounded"
     :theme="theme"
+    @open="handleMenuOpen"
     @select="handleMenuSelect"
   />
 </template>
diff --git a/apps/vben5/packages/effects/layouts/src/basic/menu/use-extra-menu.ts b/apps/vben5/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
index a1c6d3fe9..f47a81a88 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
+++ b/apps/vben5/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
@@ -15,6 +15,9 @@ function useExtraMenu() {
 
   const menus = computed(() => accessStore.accessMenus);
 
+  /** 记录当前顶级菜单下哪个子菜单最后激活 */
+  const defaultSubMap = new Map<string, string>();
+
   const route = useRoute();
   const extraMenus = ref<MenuRecordRaw[]>([]);
   const sidebarExtraVisible = ref<boolean>(false);
@@ -32,6 +35,12 @@ function useExtraMenu() {
     sidebarExtraVisible.value = hasChildren;
     if (!hasChildren) {
       await navigation(menu.path);
+    } else if (preferences.sidebar.autoActivateChild) {
+      await navigation(
+        defaultSubMap.has(menu.path)
+          ? (defaultSubMap.get(menu.path) as string)
+          : menu.path,
+      );
     }
   };
 
@@ -89,6 +98,7 @@ function useExtraMenu() {
         menus.value,
         currentPath,
       );
+      if (rootMenuPath) defaultSubMap.set(rootMenuPath, currentPath);
       extraActiveMenu.value = rootMenuPath ?? findMenu?.path ?? '';
       extraMenus.value = rootMenu?.children ?? [];
     },
diff --git a/apps/vben5/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts b/apps/vben5/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
index ca78fc0dc..57a4df0a1 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
+++ b/apps/vben5/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
@@ -15,7 +15,8 @@ function useMixedMenu() {
   const route = useRoute();
   const splitSideMenus = ref<MenuRecordRaw[]>([]);
   const rootMenuPath = ref<string>('');
-
+  /** 记录当前顶级菜单下哪个子菜单最后激活 */
+  const defaultSubMap = new Map<string, string>();
   const { isMixedNav } = usePreferences();
 
   const needSplit = computed(
@@ -86,6 +87,25 @@ function useMixedMenu() {
     splitSideMenus.value = rootMenu?.children ?? [];
     if (splitSideMenus.value.length === 0) {
       navigation(key);
+    } else if (rootMenu && preferences.sidebar.autoActivateChild) {
+      navigation(
+        defaultSubMap.has(rootMenu.path)
+          ? (defaultSubMap.get(rootMenu.path) as string)
+          : rootMenu.path,
+      );
+    }
+  };
+
+  /**
+   * 侧边菜单展开事件
+   * @param key 路由路径
+   * @param parentsPath 父级路径
+   */
+  const handleMenuOpen = (key: string, parentsPath: string[]) => {
+    if (parentsPath.length <= 1 && preferences.sidebar.autoActivateChild) {
+      navigation(
+        defaultSubMap.has(key) ? (defaultSubMap.get(key) as string) : key,
+      );
     }
   };
 
@@ -107,6 +127,8 @@ function useMixedMenu() {
     (path) => {
       const currentPath = (route?.meta?.activePath as string) ?? path;
       calcSideMenus(currentPath);
+      if (rootMenuPath.value)
+        defaultSubMap.set(rootMenuPath.value, currentPath);
     },
     { immediate: true },
   );
@@ -118,6 +140,7 @@ function useMixedMenu() {
 
   return {
     handleMenuSelect,
+    handleMenuOpen,
     headerActive,
     headerMenus,
     sidebarActive,
diff --git a/apps/vben5/packages/effects/layouts/src/basic/tabbar/tabbar.vue b/apps/vben5/packages/effects/layouts/src/basic/tabbar/tabbar.vue
index f932364ed..06d8f0e50 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/tabbar/tabbar.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/tabbar/tabbar.vue
@@ -55,6 +55,7 @@ if (!preferences.tabbar.persist) {
     :show-icon="showIcon"
     :style-type="preferences.tabbar.styleType"
     :tabs="currentTabs"
+    :wheelable="preferences.tabbar.wheelable"
     @close="handleClose"
     @sort-tabs="tabbarStore.sortTabs"
     @unpin="unpinTab"
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
index 3c9efd699..dfb63229d 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
+import type { LayoutType } from '@vben/types';
+
 import { $t } from '@vben/locales';
 
 import NumberFieldItem from '../number-field-item.vue';
 import SwitchItem from '../switch-item.vue';
 
-defineProps<{ disabled: boolean }>();
+defineProps<{ currentLayout?: LayoutType; disabled: boolean }>();
 
 const sidebarEnable = defineModel<boolean>('sidebarEnable');
 const sidebarWidth = defineModel<number>('sidebarWidth');
 const sidebarCollapsedShowTitle = defineModel<boolean>(
   'sidebarCollapsedShowTitle',
 );
+const sidebarAutoActivateChild = defineModel<boolean>(
+  'sidebarAutoActivateChild',
+);
 const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
+const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
 </script>
 
 <template>
@@ -21,12 +27,32 @@ const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
   <SwitchItem v-model="sidebarCollapsed" :disabled="!sidebarEnable || disabled">
     {{ $t('preferences.sidebar.collapsed') }}
   </SwitchItem>
+  <SwitchItem
+    v-model="sidebarExpandOnHover"
+    :disabled="!sidebarEnable || disabled || !sidebarCollapsed"
+    :tip="$t('preferences.sidebar.expandOnHoverTip')"
+  >
+    {{ $t('preferences.sidebar.expandOnHover') }}
+  </SwitchItem>
   <SwitchItem
     v-model="sidebarCollapsedShowTitle"
     :disabled="!sidebarEnable || disabled || !sidebarCollapsed"
   >
     {{ $t('preferences.sidebar.collapsedShowTitle') }}
   </SwitchItem>
+  <SwitchItem
+    v-model="sidebarAutoActivateChild"
+    :disabled="
+      !sidebarEnable ||
+      !['sidebar-mixed-nav', 'mixed-nav', 'sidebar-nav'].includes(
+        currentLayout as string,
+      ) ||
+      disabled
+    "
+    :tip="$t('preferences.sidebar.autoActivateChildTip')"
+  >
+    {{ $t('preferences.sidebar.autoActivateChild') }}
+  </SwitchItem>
   <NumberFieldItem
     v-model="sidebarWidth"
     :disabled="!sidebarEnable || disabled"
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue
index 5a3824a64..e613f5166 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue
@@ -18,6 +18,7 @@ const tabbarEnable = defineModel<boolean>('tabbarEnable');
 const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
 const tabbarPersist = defineModel<boolean>('tabbarPersist');
 const tabbarDraggable = defineModel<boolean>('tabbarDraggable');
+const tabbarWheelable = defineModel<boolean>('tabbarWheelable');
 const tabbarStyleType = defineModel<string>('tabbarStyleType');
 const tabbarShowMore = defineModel<boolean>('tabbarShowMore');
 const tabbarShowMaximize = defineModel<boolean>('tabbarShowMaximize');
@@ -53,6 +54,13 @@ const styleItems = computed((): SelectOption[] => [
   <SwitchItem v-model="tabbarDraggable" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.draggable') }}
   </SwitchItem>
+  <SwitchItem
+    v-model="tabbarWheelable"
+    :disabled="!tabbarEnable"
+    :tip="$t('preferences.tabbar.wheelableTip')"
+  >
+    {{ $t('preferences.tabbar.wheelable') }}
+  </SwitchItem>
   <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.icon') }}
   </SwitchItem>
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
index 8ca7dd654..93a9e6e8e 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
@@ -8,8 +8,9 @@ defineOptions({
   name: 'PreferenceSwitchItem',
 });
 
-withDefaults(defineProps<{ disabled?: boolean }>(), {
+withDefaults(defineProps<{ disabled?: boolean; tip?: string }>(), {
   disabled: false,
+  tip: '',
 });
 
 const checked = defineModel<boolean>();
@@ -32,11 +33,17 @@ function handleClick() {
     <span class="flex items-center text-sm">
       <slot></slot>
 
-      <VbenTooltip v-if="slots.tip" side="bottom">
+      <VbenTooltip v-if="slots.tip || tip" side="bottom">
         <template #trigger>
           <CircleHelp class="ml-1 size-3 cursor-help" />
         </template>
-        <slot name="tip"></slot>
+        <slot name="tip">
+          <template v-if="tip">
+            <p v-for="(line, index) in tip.split('\n')" :key="index">
+              {{ line }}
+            </p>
+          </template>
+        </slot>
       </VbenTooltip>
     </span>
     <span v-if="$slots.shortcut" class="ml-auto mr-2 text-xs opacity-60">
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
index 77bf4d703..4ae09130b 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
@@ -87,6 +87,10 @@ const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
 const sidebarCollapsedShowTitle = defineModel<boolean>(
   'sidebarCollapsedShowTitle',
 );
+const sidebarAutoActivateChild = defineModel<boolean>(
+  'sidebarAutoActivateChild',
+);
+const SidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
 
 const headerEnable = defineModel<boolean>('headerEnable');
 const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
@@ -105,6 +109,7 @@ const tabbarShowMore = defineModel<boolean>('tabbarShowMore');
 const tabbarShowMaximize = defineModel<boolean>('tabbarShowMaximize');
 const tabbarPersist = defineModel<boolean>('tabbarPersist');
 const tabbarDraggable = defineModel<boolean>('tabbarDraggable');
+const tabbarWheelable = defineModel<boolean>('tabbarWheelable');
 const tabbarStyleType = defineModel<string>('tabbarStyleType');
 
 const navigationStyleType = defineModel<NavigationStyleType>(
@@ -298,10 +303,13 @@ async function handleReset() {
 
             <Block :title="$t('preferences.sidebar.title')">
               <Sidebar
+                v-model:sidebar-auto-activate-child="sidebarAutoActivateChild"
                 v-model:sidebar-collapsed="sidebarCollapsed"
                 v-model:sidebar-collapsed-show-title="sidebarCollapsedShowTitle"
                 v-model:sidebar-enable="sidebarEnable"
+                v-model:sidebar-expand-on-hover="SidebarExpandOnHover"
                 v-model:sidebar-width="sidebarWidth"
+                :current-layout="appLayout"
                 :disabled="!isSideMode"
               />
             </Block>
@@ -345,6 +353,7 @@ async function handleReset() {
                 v-model:tabbar-show-maximize="tabbarShowMaximize"
                 v-model:tabbar-show-more="tabbarShowMore"
                 v-model:tabbar-style-type="tabbarStyleType"
+                v-model:tabbar-wheelable="tabbarWheelable"
               />
             </Block>
             <Block :title="$t('preferences.widget.title')">
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue b/apps/vben5/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
index 475ba6f6f..c05ab57c4 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -2,8 +2,9 @@
 import type { AnyFunction } from '@vben/types';
 
 import type { Component } from 'vue';
-import { computed, ref } from 'vue';
+import { computed, useTemplateRef, watch } from 'vue';
 
+import { useHoverToggle } from '@vben/hooks';
 import { LockKeyhole, LogOut } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { preferences, usePreferences } from '@vben/preferences';
@@ -53,6 +54,10 @@ interface Props {
    * 文本
    */
   text?: string;
+  /** 触发方式 */
+  trigger?: 'both' | 'click' | 'hover';
+  /** hover触发时，延迟响应的时间 */
+  hoverDelay?: number;
 }
 
 defineOptions({
@@ -67,10 +72,11 @@ const props = withDefaults(defineProps<Props>(), {
   showShortcutKey: true,
   tagText: '',
   text: '',
+  trigger: 'click',
+  hoverDelay: 500,
 });
 
 const emit = defineEmits<{ logout: [] }>();
-const openPopover = ref(false);
 
 const { globalLockScreenShortcutKey, globalLogoutShortcutKey } =
   usePreferences();
@@ -84,6 +90,27 @@ const [LogoutModal, logoutModalApi] = useVbenModal({
   },
 });
 
+const refTrigger = useTemplateRef('refTrigger');
+const refContent = useTemplateRef('refContent');
+const [openPopover, hoverWatcher] = useHoverToggle(
+  [refTrigger, refContent],
+  () => props.hoverDelay,
+);
+
+watch(
+  () => props.trigger === 'hover' || props.trigger === 'both',
+  (val) => {
+    if (val) {
+      hoverWatcher.enable();
+    } else {
+      hoverWatcher.disable();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
 const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
 
 const enableLogoutShortcutKey = computed(() => {
@@ -155,8 +182,8 @@ if (enableShortcutKey.value) {
     {{ $t('ui.widgets.logoutTip') }}
   </LogoutModal>
 
-  <DropdownMenu>
-    <DropdownMenuTrigger>
+  <DropdownMenu v-model:open="openPopover">
+    <DropdownMenuTrigger ref="refTrigger" :disabled="props.trigger === 'hover'">
       <div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full p-1.5">
         <div class="hover:text-accent-foreground flex-center">
           <VbenAvatar :alt="text" :src="avatar" class="size-8" dot />
@@ -164,64 +191,66 @@ if (enableShortcutKey.value) {
       </div>
     </DropdownMenuTrigger>
     <DropdownMenuContent class="mr-2 min-w-[240px] p-0 pb-1">
-      <DropdownMenuLabel class="flex items-center p-3">
-        <VbenAvatar
-          :alt="text"
-          :src="avatar"
-          class="size-12"
-          dot
-          dot-class="bottom-0 right-1 border-2 size-4 bg-green-500"
-        />
-        <div class="ml-2 w-full">
-          <div
-            v-if="tagText || text || $slots.tagText"
-            class="text-foreground mb-1 flex items-center text-sm font-medium"
-          >
-            {{ text }}
-            <slot name="tagText">
-              <Badge v-if="tagText" class="ml-2 text-green-400">
-                {{ tagText }}
-              </Badge>
-            </slot>
-          </div>
-          <div class="text-muted-foreground text-xs font-normal">
-            {{ description }}
+      <div ref="refContent">
+        <DropdownMenuLabel class="flex items-center p-3">
+          <VbenAvatar
+            :alt="text"
+            :src="avatar"
+            class="size-12"
+            dot
+            dot-class="bottom-0 right-1 border-2 size-4 bg-green-500"
+          />
+          <div class="ml-2 w-full">
+            <div
+              v-if="tagText || text || $slots.tagText"
+              class="text-foreground mb-1 flex items-center text-sm font-medium"
+            >
+              {{ text }}
+              <slot name="tagText">
+                <Badge v-if="tagText" class="ml-2 text-green-400">
+                  {{ tagText }}
+                </Badge>
+              </slot>
+            </div>
+            <div class="text-muted-foreground text-xs font-normal">
+              {{ description }}
+            </div>
           </div>
-        </div>
-      </DropdownMenuLabel>
-      <DropdownMenuSeparator v-if="menus?.length" />
-      <DropdownMenuItem
-        v-for="menu in menus"
-        :key="menu.text"
-        class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
-        @click="menu.handler"
-      >
-        <VbenIcon :icon="menu.icon" class="mr-2 size-4" />
-        {{ menu.text }}
-      </DropdownMenuItem>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem
-        v-if="preferences.widget.lockScreen"
-        class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
-        @click="handleOpenLock"
-      >
-        <LockKeyhole class="mr-2 size-4" />
-        {{ $t('ui.widgets.lockScreen.title') }}
-        <DropdownMenuShortcut v-if="enableLockScreenShortcutKey">
-          {{ altView }} L
-        </DropdownMenuShortcut>
-      </DropdownMenuItem>
-      <DropdownMenuSeparator v-if="preferences.widget.lockScreen" />
-      <DropdownMenuItem
-        class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
-        @click="handleLogout"
-      >
-        <LogOut class="mr-2 size-4" />
-        {{ $t('common.logout') }}
-        <DropdownMenuShortcut v-if="enableLogoutShortcutKey">
-          {{ altView }} Q
-        </DropdownMenuShortcut>
-      </DropdownMenuItem>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator v-if="menus?.length" />
+        <DropdownMenuItem
+          v-for="menu in menus"
+          :key="menu.text"
+          class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
+          @click="menu.handler"
+        >
+          <VbenIcon :icon="menu.icon" class="mr-2 size-4" />
+          {{ menu.text }}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          v-if="preferences.widget.lockScreen"
+          class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
+          @click="handleOpenLock"
+        >
+          <LockKeyhole class="mr-2 size-4" />
+          {{ $t('ui.widgets.lockScreen.title') }}
+          <DropdownMenuShortcut v-if="enableLockScreenShortcutKey">
+            {{ altView }} L
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator v-if="preferences.widget.lockScreen" />
+        <DropdownMenuItem
+          class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
+          @click="handleLogout"
+        >
+          <LogOut class="mr-2 size-4" />
+          {{ $t('common.logout') }}
+          <DropdownMenuShortcut v-if="enableLogoutShortcutKey">
+            {{ altView }} Q
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </div>
     </DropdownMenuContent>
   </DropdownMenu>
 </template>
diff --git a/apps/vben5/packages/effects/plugins/package.json b/apps/vben5/packages/effects/plugins/package.json
index c59f28c62..ac11e5a0d 100644
--- a/apps/vben5/packages/effects/plugins/package.json
+++ b/apps/vben5/packages/effects/plugins/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/plugins",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/api.ts b/apps/vben5/packages/effects/plugins/src/vxe-table/api.ts
index 365c90b7e..0bff8b384 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/api.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/api.ts
@@ -8,6 +8,7 @@ import { toRaw } from 'vue';
 import { Store } from '@vben-core/shared/store';
 import {
   bindMethods,
+  isBoolean,
   isFunction,
   mergeWithArrayOverride,
   StateHandler,
@@ -20,6 +21,7 @@ function getDefaultState(): VxeGridProps {
     gridOptions: {},
     gridEvents: {},
     formOptions: undefined,
+    showSearchForm: true,
   };
 }
 
@@ -108,6 +110,16 @@ export class VxeGridApi {
     }
   }
 
+  toggleSearchForm(show?: boolean) {
+    this.setState({
+      showSearchForm: isBoolean(show) ? show : !this.state?.showSearchForm,
+    });
+    // nextTick(() => {
+    //   this.grid.recalculate();
+    // });
+    return this.state?.showSearchForm;
+  }
+
   unmount() {
     this.isMounted = false;
     this.stateHandler.reset();
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/index.ts b/apps/vben5/packages/effects/plugins/src/vxe-table/index.ts
index 4ae1c2ef5..38fe58806 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/index.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/index.ts
@@ -1,5 +1,6 @@
 export { setupVbenVxeTable } from './init';
+export type { VxeTableGridOptions } from './types';
 export * from './use-vxe-grid';
-export { default as VbenVxeGrid } from './use-vxe-grid.vue';
 
+export { default as VbenVxeGrid } from './use-vxe-grid.vue';
 export type { VxeGridListeners, VxeGridProps } from 'vxe-table';
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/init.ts b/apps/vben5/packages/effects/plugins/src/vxe-table/init.ts
index 4d08f45f8..9051cd17a 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/init.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/init.ts
@@ -16,6 +16,7 @@ import {
   VxeInput,
   VxeLoading,
   VxeModal,
+  VxeNumberInput,
   VxePager,
   // VxeList,
   // VxeModal,
@@ -82,6 +83,7 @@ export function initVxeTable() {
   // VxeUI.component(VxeList);
   VxeUI.component(VxeLoading);
   VxeUI.component(VxeModal);
+  VxeUI.component(VxeNumberInput);
   // VxeUI.component(VxeOptgroup);
   // VxeUI.component(VxeOption);
   VxeUI.component(VxePager);
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/types.ts b/apps/vben5/packages/effects/plugins/src/vxe-table/types.ts
index e6559a283..7e8f2b839 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/types.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/types.ts
@@ -2,6 +2,7 @@ import type { ClassType, DeepPartial } from '@vben/types';
 import type { VbenFormProps } from '@vben-core/form-ui';
 import type {
   VxeGridListeners,
+  VxeGridPropTypes,
   VxeGridProps as VxeTableGridProps,
   VxeUIExport,
 } from 'vxe-table';
@@ -18,6 +19,16 @@ export interface VxePaginationInfo {
   total: number;
 }
 
+interface ToolbarConfigOptions extends VxeGridPropTypes.ToolbarConfig {
+  /** 是否显示切换搜索表单的按钮 */
+  search?: boolean;
+}
+
+export interface VxeTableGridOptions<T = any> extends VxeTableGridProps<T> {
+  /** 工具栏配置 */
+  toolbarConfig?: ToolbarConfigOptions;
+}
+
 export interface VxeGridProps {
   /**
    * 标题
@@ -38,7 +49,7 @@ export interface VxeGridProps {
   /**
    * vxe-grid 配置
    */
-  gridOptions?: DeepPartial<VxeTableGridProps>;
+  gridOptions?: DeepPartial<VxeTableGridOptions>;
   /**
    * vxe-grid 事件
    */
@@ -47,6 +58,10 @@ export interface VxeGridProps {
    * 表单配置
    */
   formOptions?: VbenFormProps;
+  /**
+   * 显示搜索表单
+   */
+  showSearchForm?: boolean;
 }
 
 export type ExtendedVxeGridApi = {
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/apps/vben5/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
index feca4cb2b..573fe5837 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -1,8 +1,12 @@
 <script lang="ts" setup>
 import type { VbenFormProps } from '@vben-core/form-ui';
 import type {
+  VxeGridDefines,
   VxeGridInstance,
+  VxeGridListeners,
+  VxeGridPropTypes,
   VxeGridProps as VxeTableGridProps,
+  VxeToolbarPropTypes,
 } from 'vxe-table';
 
 import type { ExtendedVxeGridApi, VxeGridProps } from './types';
@@ -57,6 +61,7 @@ const {
   formOptions,
   tableTitle,
   tableTitleHelp,
+  showSearchForm,
 } = usePriorityValues(props, state);
 
 const { isMobile } = usePreferences();
@@ -64,6 +69,7 @@ const { isMobile } = usePreferences();
 const slots = useSlots();
 
 const [Form, formApi] = useTableForm({
+  compact: true,
   handleSubmit: async () => {
     const formValues = formApi.form.values;
     formApi.setLatestSubmissionValues(toRaw(formValues));
@@ -102,22 +108,37 @@ const showToolbar = computed(() => {
 const toolbarOptions = computed(() => {
   const slotActions = slots[TOOLBAR_ACTIONS]?.();
   const slotTools = slots[TOOLBAR_TOOLS]?.();
+  const searchBtn: VxeToolbarPropTypes.ToolConfig = {
+    code: 'search',
+    icon: 'vxe-icon--search',
+    circle: true,
+    status: showSearchForm.value ? 'primary' : undefined,
+    title: $t('common.search'),
+  };
+  // 将搜索按钮合并到用户配置的toolbarConfig.tools中
+  const toolbarConfig: VxeGridPropTypes.ToolbarConfig = {
+    tools: (gridOptions.value?.toolbarConfig?.tools ??
+      []) as VxeToolbarPropTypes.ToolConfig[],
+  };
+  if (gridOptions.value?.toolbarConfig?.search && !!formOptions.value) {
+    toolbarConfig.tools = Array.isArray(toolbarConfig.tools)
+      ? [...toolbarConfig.tools, searchBtn]
+      : [searchBtn];
+  }
 
   if (!showToolbar.value) {
-    return {};
+    return { toolbarConfig };
   }
+
   // 强制使用固定的toolbar配置，不允许用户自定义
   // 减少配置的复杂度，以及后续维护的成本
-  return {
-    toolbarConfig: {
-      slots: {
-        ...(slotActions || showTableTitle.value
-          ? { buttons: TOOLBAR_ACTIONS }
-          : {}),
-        ...(slotTools ? { tools: TOOLBAR_TOOLS } : {}),
-      },
-    },
+  toolbarConfig.slots = {
+    ...(slotActions || showTableTitle.value
+      ? { buttons: TOOLBAR_ACTIONS }
+      : {}),
+    ...(slotTools ? { tools: TOOLBAR_TOOLS } : {}),
   };
+  return { toolbarConfig };
 });
 
 const options = computed(() => {
@@ -126,7 +147,7 @@ const options = computed(() => {
   const mergedOptions: VxeTableGridProps = cloneDeep(
     mergeWithArrayOverride(
       {},
-      toolbarOptions.value,
+      toRaw(toolbarOptions.value),
       toRaw(gridOptions.value),
       globalGridConfig,
     ),
@@ -173,9 +194,19 @@ const options = computed(() => {
   return mergedOptions;
 });
 
+function onToolbarToolClick(event: VxeGridDefines.ToolbarToolClickEventParams) {
+  if (event.code === 'search') {
+    props.api?.toggleSearchForm?.();
+  }
+  (
+    gridEvents.value?.toolbarToolClick as VxeGridListeners['toolbarToolClick']
+  )?.(event);
+}
+
 const events = computed(() => {
   return {
     ...gridEvents.value,
+    toolbarToolClick: onToolbarToolClick,
   };
 });
 
@@ -213,7 +244,8 @@ async function init() {
   const autoLoad = defaultGridOptions.proxyConfig?.autoLoad;
   const enableProxyConfig = options.value.proxyConfig?.enabled;
   if (enableProxyConfig && autoLoad) {
-    props.api.reload(formApi.form?.values ?? {});
+    props.api.grid.commitProxy?.('_init', formApi.form?.values ?? {});
+    // props.api.reload(formApi.form?.values ?? {});
   }
 
   // form 由 vben-form代替，所以不适配formConfig，这里给出警告
@@ -253,6 +285,10 @@ watch(
   },
 );
 
+const isCompactForm = computed(() => {
+  return formApi.getState()?.compact;
+});
+
 onMounted(() => {
   props.api?.mount?.(gridRef.value, formApi);
   init();
@@ -270,7 +306,7 @@ onUnmounted(() => {
       ref="gridRef"
       :class="
         cn(
-          'p-2 pt-0',
+          'p-2',
           {
             'pt-0': showToolbar && !formOptions,
           },
@@ -304,7 +340,11 @@ onUnmounted(() => {
 
       <!-- form表单 -->
       <template #form>
-        <div v-if="formOptions" class="relative rounded py-3 pb-4">
+        <div
+          v-if="formOptions"
+          v-show="showSearchForm !== false"
+          :class="cn('relative rounded py-3', isCompactForm ? 'pb-6' : 'pb-4')"
+        >
           <slot name="form">
             <Form>
               <template
diff --git a/apps/vben5/packages/effects/request/package.json b/apps/vben5/packages/effects/request/package.json
index b322e85d3..106c95171 100644
--- a/apps/vben5/packages/effects/request/package.json
+++ b/apps/vben5/packages/effects/request/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/request",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/icons/package.json b/apps/vben5/packages/icons/package.json
index 59e46656e..8bda07bbb 100644
--- a/apps/vben5/packages/icons/package.json
+++ b/apps/vben5/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/icons",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/locales/package.json b/apps/vben5/packages/locales/package.json
index 9a55c352f..e54354b76 100644
--- a/apps/vben5/packages/locales/package.json
+++ b/apps/vben5/packages/locales/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/locales",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/locales/src/langs/en-US/authentication.json b/apps/vben5/packages/locales/src/langs/en-US/authentication.json
index 4155f871b..f294cdd82 100644
--- a/apps/vben5/packages/locales/src/langs/en-US/authentication.json
+++ b/apps/vben5/packages/locales/src/langs/en-US/authentication.json
@@ -38,7 +38,7 @@
   "qrcodeLogin": "QR Code Login",
   "codeSubtitle": "Enter your phone number to start managing your project",
   "code": "Security code",
-  "codeTip": "Security code is required",
+  "codeTip": "Security code required {0} characters",
   "mobile": "Mobile",
   "mobileLogin": "Mobile Login",
   "mobileTip": "Please enter mobile number",
diff --git a/apps/vben5/packages/locales/src/langs/en-US/common.json b/apps/vben5/packages/locales/src/langs/en-US/common.json
index 23308b776..01fc9ce72 100644
--- a/apps/vben5/packages/locales/src/langs/en-US/common.json
+++ b/apps/vben5/packages/locales/src/langs/en-US/common.json
@@ -9,5 +9,6 @@
   "noData": "No Data",
   "refresh": "Refresh",
   "loadingMenu": "Loading Menu",
-  "query": "Search"
+  "query": "Search",
+  "search": "Search"
 }
diff --git a/apps/vben5/packages/locales/src/langs/en-US/preferences.json b/apps/vben5/packages/locales/src/langs/en-US/preferences.json
index 8ba3cce62..5bb581769 100644
--- a/apps/vben5/packages/locales/src/langs/en-US/preferences.json
+++ b/apps/vben5/packages/locales/src/langs/en-US/preferences.json
@@ -45,7 +45,11 @@
     "width": "Width",
     "visible": "Show Sidebar",
     "collapsed": "Collpase Menu",
-    "collapsedShowTitle": "Show Menu Title"
+    "collapsedShowTitle": "Show Menu Title",
+    "autoActivateChild": "Auto Activate SubMenu",
+    "autoActivateChildTip": "`Enabled` to automatically activate the submenu while click menu.",
+    "expandOnHover": "Expand On Hover",
+    "expandOnHoverTip": "When the mouse hovers over menu, \n `Enabled` to expand children menus \n `Disabled` to expand whole sidebar."
   },
   "tabbar": {
     "title": "Tabbar",
@@ -55,6 +59,8 @@
     "showMaximize": "Show Maximize Button",
     "persist": "Persist Tabs",
     "draggable": "Enable Draggable Sort",
+    "wheelable": "Support Mouse Wheel",
+    "wheelableTip": "When enabled, the Tabbar area responds to vertical scrolling events of the scroll wheel.",
     "styleType": {
       "title": "Tabs Style",
       "chrome": "Chrome",
diff --git a/apps/vben5/packages/locales/src/langs/en-US/ui.json b/apps/vben5/packages/locales/src/langs/en-US/ui.json
index dc99c2f7c..651a65ac4 100644
--- a/apps/vben5/packages/locales/src/langs/en-US/ui.json
+++ b/apps/vben5/packages/locales/src/langs/en-US/ui.json
@@ -21,6 +21,10 @@
     "pointAriaLabel": "Click point",
     "clickInOrder": "Please click in order"
   },
+  "iconPicker": {
+    "placeholder": "Select an icon",
+    "search": "Search icon..."
+  },
   "fallback": {
     "pageNotFound": "Oops! Page Not Found",
     "pageNotFoundDesc": "Sorry, we couldn't find the page you were looking for.",
diff --git a/apps/vben5/packages/locales/src/langs/zh-CN/authentication.json b/apps/vben5/packages/locales/src/langs/zh-CN/authentication.json
index 4533db874..147da6322 100644
--- a/apps/vben5/packages/locales/src/langs/zh-CN/authentication.json
+++ b/apps/vben5/packages/locales/src/langs/zh-CN/authentication.json
@@ -38,7 +38,7 @@
   "qrcodeLogin": "扫码登录",
   "codeSubtitle": "请输入您的手机号码以开始管理您的项目",
   "code": "验证码",
-  "codeTip": "请输入验证码",
+  "codeTip": "请输入{0}位验证码",
   "mobile": "手机号码",
   "mobileTip": "请输入手机号",
   "mobileErrortip": "手机号码格式错误",
diff --git a/apps/vben5/packages/locales/src/langs/zh-CN/common.json b/apps/vben5/packages/locales/src/langs/zh-CN/common.json
index fdfc6e49e..d0b5ffc0f 100644
--- a/apps/vben5/packages/locales/src/langs/zh-CN/common.json
+++ b/apps/vben5/packages/locales/src/langs/zh-CN/common.json
@@ -9,5 +9,6 @@
   "noData": "暂无数据",
   "refresh": "刷新",
   "loadingMenu": "加载菜单中",
-  "query": "查询"
+  "query": "查询",
+  "search": "搜索"
 }
diff --git a/apps/vben5/packages/locales/src/langs/zh-CN/preferences.json b/apps/vben5/packages/locales/src/langs/zh-CN/preferences.json
index 8f5038ee8..5c3c2283f 100644
--- a/apps/vben5/packages/locales/src/langs/zh-CN/preferences.json
+++ b/apps/vben5/packages/locales/src/langs/zh-CN/preferences.json
@@ -45,7 +45,11 @@
     "width": "宽度",
     "visible": "显示侧边栏",
     "collapsed": "折叠菜单",
-    "collapsedShowTitle": "折叠显示菜单名"
+    "collapsedShowTitle": "折叠显示菜单名",
+    "autoActivateChild": "自动激活子菜单",
+    "autoActivateChildTip": "点击顶层菜单时,自动激活第一个子菜单或者上一次激活的子菜单",
+    "expandOnHover": "鼠标悬停展开",
+    "expandOnHoverTip": "鼠标在折叠区域悬浮时，`启用`则展开当前子菜单，`禁用`则展开整个侧边栏"
   },
   "tabbar": {
     "title": "标签栏",
@@ -55,6 +59,8 @@
     "showMaximize": "显示最大化按钮",
     "persist": "持久化标签页",
     "draggable": "启动拖拽排序",
+    "wheelable": "启用纵向滚轮响应",
+    "wheelableTip": "开启后，标签栏区域可以响应滚轮的纵向滚动事件。\n关闭时，只能响应系统的横向滚动事件（需要按下Shift再滚动滚轮）",
     "styleType": {
       "title": "标签页风格",
       "chrome": "谷歌",
diff --git a/apps/vben5/packages/locales/src/langs/zh-CN/ui.json b/apps/vben5/packages/locales/src/langs/zh-CN/ui.json
index e84c0ba5c..2b6fe98d1 100644
--- a/apps/vben5/packages/locales/src/langs/zh-CN/ui.json
+++ b/apps/vben5/packages/locales/src/langs/zh-CN/ui.json
@@ -21,6 +21,10 @@
     "pointAriaLabel": "点击点",
     "clickInOrder": "请依次点击"
   },
+  "iconPicker": {
+    "placeholder": "选择一个图标",
+    "search": "搜索图标..."
+  },
   "fallback": {
     "pageNotFound": "哎呀！未找到页面",
     "pageNotFoundDesc": "抱歉，我们无法找到您要找的页面。",
diff --git a/apps/vben5/packages/preferences/package.json b/apps/vben5/packages/preferences/package.json
index 7e9c67a99..5d51c8bed 100644
--- a/apps/vben5/packages/preferences/package.json
+++ b/apps/vben5/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/preferences",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/stores/package.json b/apps/vben5/packages/stores/package.json
index 999a1e286..a8707d8b5 100644
--- a/apps/vben5/packages/stores/package.json
+++ b/apps/vben5/packages/stores/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stores",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/stores/src/modules/access.ts b/apps/vben5/packages/stores/src/modules/access.ts
index ee8641a7f..6b4452076 100644
--- a/apps/vben5/packages/stores/src/modules/access.ts
+++ b/apps/vben5/packages/stores/src/modules/access.ts
@@ -41,6 +41,25 @@ interface AccessState {
  */
 export const useAccessStore = defineStore('core-access', {
   actions: {
+    getMenuByPath(path: string) {
+      function findMenu(
+        menus: MenuRecordRaw[],
+        path: string,
+      ): MenuRecordRaw | undefined {
+        for (const menu of menus) {
+          if (menu.path === path) {
+            return menu;
+          }
+          if (menu.children) {
+            const matched = findMenu(menu.children, path);
+            if (matched) {
+              return matched;
+            }
+          }
+        }
+      }
+      return findMenu(this.accessMenus, path);
+    },
     setAccessCodes(codes: string[]) {
       this.accessCodes = codes;
     },
diff --git a/apps/vben5/packages/styles/package.json b/apps/vben5/packages/styles/package.json
index fa25cb6ac..7bb540190 100644
--- a/apps/vben5/packages/styles/package.json
+++ b/apps/vben5/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/styles",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/styles/src/ele/index.css b/apps/vben5/packages/styles/src/ele/index.css
index 111af0f5f..b59ee2adf 100644
--- a/apps/vben5/packages/styles/src/ele/index.css
+++ b/apps/vben5/packages/styles/src/ele/index.css
@@ -1,3 +1,40 @@
 .el-card {
   --el-card-border-radius: var(--radius) !important;
 }
+
+.form-valid-error {
+  /** select 选择器的样式 */
+  .el-select .el-select__wrapper {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+
+  /** input 选择器的样式 */
+  .el-input .el-input__wrapper {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+
+  /** radio和checkbox 选择器的样式 */
+  .el-radio .el-radio__inner,
+  .el-checkbox .el-checkbox__inner {
+    border: 1px solid var(--el-color-danger);
+  }
+
+  .el-checkbox-button .el-checkbox-button__inner,
+  .el-radio-button .el-radio-button__inner {
+    border: 1px solid var(--el-color-danger);
+  }
+
+  .el-checkbox-button:first-child .el-checkbox-button__inner,
+  .el-radio-button:first-child .el-radio-button__inner {
+    border-left: 1px solid var(--el-color-danger);
+  }
+
+  .el-checkbox-button:not(:first-child) .el-checkbox-button__inner,
+  .el-radio-button:not(:first-child) .el-radio-button__inner {
+    border-left: none;
+  }
+
+  .el-textarea .el-textarea__inner {
+    border: 1px solid var(--el-color-danger);
+  }
+}
diff --git a/apps/vben5/packages/types/package.json b/apps/vben5/packages/types/package.json
index e59723f3c..8b38a9285 100644
--- a/apps/vben5/packages/types/package.json
+++ b/apps/vben5/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/types",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/packages/utils/package.json b/apps/vben5/packages/utils/package.json
index ccf093e92..b4eafd8a7 100644
--- a/apps/vben5/packages/utils/package.json
+++ b/apps/vben5/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/utils",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/playground/package.json b/apps/vben5/playground/package.json
index bde08f8c2..720622e09 100644
--- a/apps/vben5/playground/package.json
+++ b/apps/vben5/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/playground",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@tanstack/vue-query": "catalog:",
+    "@vben-core/menu-ui": "workspace:*",
     "@vben/access": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",
diff --git a/apps/vben5/playground/src/adapter/component/index.ts b/apps/vben5/playground/src/adapter/component/index.ts
index 1afa62174..b9b89ddae 100644
--- a/apps/vben5/playground/src/adapter/component/index.ts
+++ b/apps/vben5/playground/src/adapter/component/index.ts
@@ -8,7 +8,7 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
-import { globalShareState } from '@vben/common-ui';
+import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import {
@@ -48,12 +48,15 @@ const withDefaultPlaceholder = <T extends Component>(
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiSelect'
+  | 'ApiTreeSelect'
   | 'AutoComplete'
   | 'Checkbox'
   | 'CheckboxGroup'
   | 'DatePicker'
   | 'DefaultButton'
   | 'Divider'
+  | 'IconPicker'
   | 'Input'
   | 'InputNumber'
   | 'InputPassword'
@@ -78,6 +81,38 @@ async function initComponentAdapter() {
     // Button: () =>
     // import('xxx').then((res) => res.Button),
 
+    ApiSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: Select,
+          loadingSlot: 'suffixIcon',
+          modelPropName: 'value',
+          visibleEvent: 'onVisibleChange',
+        },
+        slots,
+      );
+    },
+    ApiTreeSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: TreeSelect,
+          fieldNames: { label: 'label', value: 'value', children: 'children' },
+          loadingSlot: 'suffixIcon',
+          modelPropName: 'value',
+          optionsPropName: 'treeData',
+          visibleEvent: 'onVisibleChange',
+        },
+        slots,
+      );
+    },
     AutoComplete,
     Checkbox,
     CheckboxGroup,
@@ -87,6 +122,13 @@ async function initComponentAdapter() {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
+    IconPicker: (props, { attrs, slots }) => {
+      return h(
+        IconPicker,
+        { iconSlot: 'addonAfter', inputComponent: Input, ...props, ...attrs },
+        slots,
+      );
+    },
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
diff --git a/apps/vben5/playground/src/layouts/basic.vue b/apps/vben5/playground/src/layouts/basic.vue
index f75b3ddc6..3fa423af1 100644
--- a/apps/vben5/playground/src/layouts/basic.vue
+++ b/apps/vben5/playground/src/layouts/basic.vue
@@ -132,6 +132,7 @@ watch(
         :text="userStore.userInfo?.realName"
         description="ann.vben@gmail.com"
         tag-text="Pro"
+        trigger="both"
         @logout="handleLogout"
       />
     </template>
diff --git a/apps/vben5/playground/src/locales/langs/en-US/examples.json b/apps/vben5/playground/src/locales/langs/en-US/examples.json
index 490a17a3b..8131380f2 100644
--- a/apps/vben5/playground/src/locales/langs/en-US/examples.json
+++ b/apps/vben5/playground/src/locales/langs/en-US/examples.json
@@ -56,5 +56,11 @@
     "timestamp": "Timestamp:",
     "x": "x:",
     "y": "y:"
+  },
+  "resize": {
+    "title": "Resize"
+  },
+  "layout": {
+    "col-page": "ColPage Layout"
   }
 }
diff --git a/apps/vben5/playground/src/locales/langs/en-US/page.json b/apps/vben5/playground/src/locales/langs/en-US/page.json
index 618a258c0..50f19dc44 100644
--- a/apps/vben5/playground/src/locales/langs/en-US/page.json
+++ b/apps/vben5/playground/src/locales/langs/en-US/page.json
@@ -4,7 +4,9 @@
     "register": "Register",
     "codeLogin": "Code Login",
     "qrcodeLogin": "Qr Code Login",
-    "forgetPassword": "Forget Password"
+    "forgetPassword": "Forget Password",
+    "sendingCode": "SMS Code is sending...",
+    "codeSentTo": "Code has been sent to {0}"
   },
   "dashboard": {
     "title": "Dashboard",
diff --git a/apps/vben5/playground/src/locales/langs/zh-CN/examples.json b/apps/vben5/playground/src/locales/langs/zh-CN/examples.json
index 227ec4943..fea65a70a 100644
--- a/apps/vben5/playground/src/locales/langs/zh-CN/examples.json
+++ b/apps/vben5/playground/src/locales/langs/zh-CN/examples.json
@@ -59,5 +59,8 @@
     "timestamp": "时间戳：",
     "x": "x：",
     "y": "y："
+  },
+  "layout": {
+    "col-page": "双列布局"
   }
 }
diff --git a/apps/vben5/playground/src/locales/langs/zh-CN/page.json b/apps/vben5/playground/src/locales/langs/zh-CN/page.json
index 4cb67081c..666db5b7b 100644
--- a/apps/vben5/playground/src/locales/langs/zh-CN/page.json
+++ b/apps/vben5/playground/src/locales/langs/zh-CN/page.json
@@ -4,7 +4,9 @@
     "register": "注册",
     "codeLogin": "验证码登录",
     "qrcodeLogin": "二维码登录",
-    "forgetPassword": "忘记密码"
+    "forgetPassword": "忘记密码",
+    "sendingCode": "正在发送验证码",
+    "codeSentTo": "验证码已发送至{0}"
   },
   "dashboard": {
     "title": "概览",
diff --git a/apps/vben5/playground/src/router/guard.ts b/apps/vben5/playground/src/router/guard.ts
index bddb28db8..8d7e7ee04 100644
--- a/apps/vben5/playground/src/router/guard.ts
+++ b/apps/vben5/playground/src/router/guard.ts
@@ -52,7 +52,9 @@ function setupAccessGuard(router: Router) {
     if (coreRouteNames.includes(to.name as string)) {
       if (to.path === LOGIN_PATH && accessStore.accessToken) {
         return decodeURIComponent(
-          (to.query?.redirect as string) || DEFAULT_HOME_PATH,
+          (to.query?.redirect as string) ||
+            userStore.userInfo?.homePath ||
+            DEFAULT_HOME_PATH,
         );
       }
       return true;
@@ -70,7 +72,10 @@ function setupAccessGuard(router: Router) {
         return {
           path: LOGIN_PATH,
           // 如不需要，直接删除 query
-          query: { redirect: encodeURIComponent(to.fullPath) },
+          query:
+            to.fullPath === DEFAULT_HOME_PATH
+              ? {}
+              : { redirect: encodeURIComponent(to.fullPath) },
           // 携带当前跳转的页面，登录后重新跳转该页面
           replace: true,
         };
@@ -100,7 +105,10 @@ function setupAccessGuard(router: Router) {
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
     accessStore.setIsAccessChecked(true);
-    const redirectPath = (from.query.redirect ?? to.fullPath) as string;
+    const redirectPath = (from.query.redirect ??
+      (to.path === DEFAULT_HOME_PATH
+        ? userInfo.homePath || DEFAULT_HOME_PATH
+        : to.fullPath)) as string;
 
     return {
       ...router.resolve(decodeURIComponent(redirectPath)),
diff --git a/apps/vben5/playground/src/router/routes/modules/examples.ts b/apps/vben5/playground/src/router/routes/modules/examples.ts
index 82202b381..b02bc4da9 100644
--- a/apps/vben5/playground/src/router/routes/modules/examples.ts
+++ b/apps/vben5/playground/src/router/routes/modules/examples.ts
@@ -237,6 +237,17 @@ const routes: RouteRecordRaw[] = [
           title: $t('examples.resize.title'),
         },
       },
+      {
+        name: 'ColPageDemo',
+        path: '/examples/layout/col-page',
+        component: () => import('#/views/examples/layout/col-page.vue'),
+        meta: {
+          badge: 'Alpha',
+          badgeVariants: 'destructive',
+          icon: 'material-symbols:horizontal-distribute',
+          title: $t('examples.layout.col-page'),
+        },
+      },
     ],
   },
 ];
diff --git a/apps/vben5/playground/src/views/_core/authentication/code-login.vue b/apps/vben5/playground/src/views/_core/authentication/code-login.vue
index 556b273af..3b50c6269 100644
--- a/apps/vben5/playground/src/views/_core/authentication/code-login.vue
+++ b/apps/vben5/playground/src/views/_core/authentication/code-login.vue
@@ -2,15 +2,36 @@
 import type { VbenFormSchema } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import { computed, ref } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';
 
 import { AuthenticationCodeLogin, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+import { message } from 'ant-design-vue';
+
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
-
+const CODE_LENGTH = 6;
+const loginRef =
+  useTemplateRef<InstanceType<typeof AuthenticationCodeLogin>>('loginRef');
+function sendCodeApi(phoneNumber: string) {
+  message.loading({
+    content: $t('page.auth.sendingCode'),
+    duration: 0,
+    key: 'sending-code',
+  });
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      message.success({
+        content: $t('page.auth.codeSentTo', [phoneNumber]),
+        duration: 3,
+        key: 'sending-code',
+      });
+      resolve({ code: '123456', phoneNumber });
+    }, 3000);
+  });
+}
 const formSchema = computed((): VbenFormSchema[] => {
   return [
     {
@@ -30,6 +51,7 @@ const formSchema = computed((): VbenFormSchema[] => {
     {
       component: 'VbenPinInput',
       componentProps: {
+        codeLength: CODE_LENGTH,
         createText: (countdown: number) => {
           const text =
             countdown > 0
@@ -37,11 +59,32 @@ const formSchema = computed((): VbenFormSchema[] => {
               : $t('authentication.sendCode');
           return text;
         },
+        handleSendCode: async () => {
+          // 模拟发送验证码
+          // Simulate sending verification code
+          loading.value = true;
+          const formApi = loginRef.value?.getFormApi();
+          if (!formApi) {
+            loading.value = false;
+            throw new Error('formApi is not ready');
+          }
+          await formApi.validateField('phoneNumber');
+          const isPhoneReady = await formApi.isFieldValid('phoneNumber');
+          if (!isPhoneReady) {
+            loading.value = false;
+            throw new Error('Phone number is not Ready');
+          }
+          const { phoneNumber } = await formApi.getValues();
+          await sendCodeApi(phoneNumber);
+          loading.value = false;
+        },
         placeholder: $t('authentication.code'),
       },
       fieldName: 'code',
       label: $t('authentication.code'),
-      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+      rules: z.string().length(CODE_LENGTH, {
+        message: $t('authentication.codeTip', [CODE_LENGTH]),
+      }),
     },
   ];
 });
@@ -58,6 +101,7 @@ async function handleLogin(values: Recordable<any>) {
 
 <template>
   <AuthenticationCodeLogin
+    ref="loginRef"
     :form-schema="formSchema"
     :loading="loading"
     @submit="handleLogin"
diff --git a/apps/vben5/playground/src/views/demos/badge/index.vue b/apps/vben5/playground/src/views/demos/badge/index.vue
index 92d70c7e1..8976c6fe8 100644
--- a/apps/vben5/playground/src/views/demos/badge/index.vue
+++ b/apps/vben5/playground/src/views/demos/badge/index.vue
@@ -1,7 +1,116 @@
 <script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
+import { reactive } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { useAccessStore } from '@vben/stores';
+import { MenuBadge } from '@vben-core/menu-ui';
+
+import { Button, Card, Radio, RadioGroup } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+const colors = [
+  { label: '预设：默认', value: 'default' },
+  { label: '预设：关键', value: 'destructive' },
+  { label: '预设：主要', value: 'primary' },
+  { label: '预设：成功', value: 'success' },
+  { label: '自定义', value: 'bg-gray-200 text-black' },
+];
+
+const route = useRoute();
+const accessStore = useAccessStore();
+const menu = accessStore.getMenuByPath(route.path);
+const badgeProps = reactive({
+  badge: menu?.badge as string,
+  badgeType: menu?.badge ? 'normal' : (menu?.badgeType as 'dot' | 'normal'),
+  badgeVariants: menu?.badgeVariants as string,
+});
+
+const [Form] = useVbenForm({
+  handleValuesChange(values) {
+    badgeProps.badge = values.badge;
+    badgeProps.badgeType = values.badgeType;
+    badgeProps.badgeVariants = values.badgeVariants;
+  },
+  schema: [
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: '点徽标', value: 'dot' },
+          { label: '文字徽标', value: 'normal' },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: badgeProps.badgeType,
+      fieldName: 'badgeType',
+      label: '类型',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 4,
+        placeholder: '请输入徽标内容',
+        style: { width: '200px' },
+      },
+      defaultValue: badgeProps.badge,
+      fieldName: 'badge',
+      label: '徽标内容',
+    },
+    {
+      component: 'RadioGroup',
+      defaultValue: badgeProps.badgeVariants,
+      fieldName: 'badgeVariants',
+      label: '颜色',
+    },
+    {
+      component: 'Input',
+      fieldName: 'action',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+function updateMenuBadge() {
+  if (menu) {
+    menu.badge = badgeProps.badge;
+    menu.badgeType = badgeProps.badgeType;
+    menu.badgeVariants = badgeProps.badgeVariants;
+  }
+}
 </script>
 
 <template>
-  <Fallback description="用于徽标示例" status="coming-soon" title="徽标示例" />
+  <Page
+    description="菜单项上可以显示徽标，这些徽标可以主动更新"
+    title="菜单徽标"
+  >
+    <Card title="徽标更新">
+      <Form>
+        <template #badgeVariants="slotProps">
+          <RadioGroup v-bind="slotProps">
+            <Radio
+              v-for="color in colors"
+              :key="color.value"
+              :value="color.value"
+            >
+              <div
+                :title="color.label"
+                class="flex h-[14px] w-[50px] items-center justify-start"
+              >
+                <MenuBadge
+                  v-bind="{ ...badgeProps, badgeVariants: color.value }"
+                />
+              </div>
+            </Radio>
+          </RadioGroup>
+        </template>
+        <template #action>
+          <Button type="primary" @click="updateMenuBadge">更新徽标</Button>
+        </template>
+      </Form>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/vben5/playground/src/views/demos/features/icons/index.vue b/apps/vben5/playground/src/views/demos/features/icons/index.vue
index 8c90e29fb..cc5ed066c 100644
--- a/apps/vben5/playground/src/views/demos/features/icons/index.vue
+++ b/apps/vben5/playground/src/views/demos/features/icons/index.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import { h, ref } from 'vue';
+
+import { IconPicker, Page } from '@vben/common-ui';
 import {
   MdiGithub,
   MdiGoogle,
@@ -16,9 +18,11 @@ import {
   SvgDownloadIcon,
 } from '@vben/icons';
 
-import { Card } from 'ant-design-vue';
+import { Card, Input } from 'ant-design-vue';
+
+const iconValue = ref('ant-design:trademark-outlined');
 
-import IconPicker from './icon-picker.vue';
+const inputComponent = h(Input);
 </script>
 
 <template>
@@ -71,15 +75,31 @@ import IconPicker from './icon-picker.vue';
       </div>
     </Card>
 
-    <Card class="mb-5" title="图标选择器(Iconify)">
-      <div class="flex items-center gap-5">
-        <IconPicker width="300px" />
+    <Card class="mb-5" title="图标选择器">
+      <div class="mb-5 flex items-center gap-5">
+        <span>原始样式(Iconify):</span>
+        <IconPicker class="w-[200px]" />
+      </div>
+      <div class="mb-5 flex items-center gap-5">
+        <span>原始样式(svg):</span>
+        <IconPicker class="w-[200px]" prefix="svg" />
+      </div>
+      <div class="mb-5 flex items-center gap-5">
+        <span>使用Input:</span>
+        <IconPicker :input-component="inputComponent" icon-slot="addonAfter" />
       </div>
-    </Card>
-
-    <Card title="图标选择器(Svg)">
       <div class="flex items-center gap-5">
-        <IconPicker prefix="svg" width="300px" />
+        <span>可手动输入，只能点击图标打开弹窗:</span>
+        <Input
+          v-model:value="iconValue"
+          allow-clear
+          placeholder="点击这里选择图标"
+          style="width: 300px"
+        >
+          <template #addonAfter>
+            <IconPicker v-model="iconValue" class="w-[200px]" />
+          </template>
+        </Input>
       </div>
     </Card>
   </Page>
diff --git a/apps/vben5/playground/src/views/examples/doc-button.vue b/apps/vben5/playground/src/views/examples/doc-button.vue
index 529c743a2..4dad2a8d5 100644
--- a/apps/vben5/playground/src/views/examples/doc-button.vue
+++ b/apps/vben5/playground/src/views/examples/doc-button.vue
@@ -7,7 +7,13 @@ import { Button } from 'ant-design-vue';
 const props = defineProps<{ path: string }>();
 
 function handleClick() {
-  openWindow(VBEN_DOC_URL + props.path);
+  // 如果没有.html，打开页面时可能会出现404
+  const path =
+    VBEN_DOC_URL +
+    (props.path.toLowerCase().endsWith('.html')
+      ? props.path
+      : `${props.path}.html`);
+  openWindow(path);
 }
 </script>
 
diff --git a/apps/vben5/playground/src/views/examples/drawer/in-content-demo.vue b/apps/vben5/playground/src/views/examples/drawer/in-content-demo.vue
new file mode 100644
index 000000000..8bc29b2c6
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/drawer/in-content-demo.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    message.info('onConfirm');
+    // drawerApi.close();
+  },
+});
+</script>
+<template>
+  <Drawer append-to-main title="基础抽屉示例" title-tooltip="标题提示内容">
+    <template #extra> extra </template>
+    本抽屉指定在内容区域打开
+  </Drawer>
+</template>
diff --git a/apps/vben5/playground/src/views/examples/drawer/index.vue b/apps/vben5/playground/src/views/examples/drawer/index.vue
index d5fd784b7..32d3c95df 100644
--- a/apps/vben5/playground/src/views/examples/drawer/index.vue
+++ b/apps/vben5/playground/src/views/examples/drawer/index.vue
@@ -8,6 +8,7 @@ import AutoHeightDemo from './auto-height-demo.vue';
 import BaseDemo from './base-demo.vue';
 import DynamicDemo from './dynamic-demo.vue';
 import FormDrawerDemo from './form-drawer-demo.vue';
+import inContentDemo from './in-content-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
 
 const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
@@ -16,6 +17,12 @@ const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
   // placement: 'left',
 });
 
+const [InContentDrawer, inContentDrawerApi] = useVbenDrawer({
+  // 连接抽离的组件
+  connectedComponent: inContentDemo,
+  // placement: 'left',
+});
+
 const [AutoHeightDrawer, autoHeightDrawerApi] = useVbenDrawer({
   connectedComponent: AutoHeightDemo,
 });
@@ -37,6 +44,23 @@ function openBaseDrawer(placement: DrawerPlacement = 'right') {
   baseDrawerApi.open();
 }
 
+function openInContentDrawer(placement: DrawerPlacement = 'right') {
+  inContentDrawerApi.setState({ class: '', placement });
+  if (placement === 'top') {
+    // 页面顶部区域的层级只有200，所以设置一个低于200的值，抽屉从顶部滑出来的时候才比较合适
+    inContentDrawerApi.setState({ zIndex: 199 });
+  } else {
+    inContentDrawerApi.setState({ zIndex: undefined });
+  }
+  inContentDrawerApi.open();
+}
+
+function openMaxContentDrawer() {
+  // 这里只是用来演示方便。实际上自己使用的时候可以直接将这些配置卸载Drawer的属性里
+  inContentDrawerApi.setState({ class: 'w-full', placement: 'right' });
+  inContentDrawerApi.open();
+}
+
 function openAutoHeightDrawer() {
   autoHeightDrawerApi.open();
 }
@@ -69,6 +93,7 @@ function openFormDrawer() {
 
 <template>
   <Page
+    auto-content-height
     description="抽屉组件通常用于在当前页面上显示一个覆盖层，用以展示重要信息或提供用户交互界面。"
     title="抽屉组件示例"
   >
@@ -76,6 +101,7 @@ function openFormDrawer() {
       <DocButton path="/components/common-ui/vben-drawer" />
     </template>
     <BaseDrawer />
+    <InContentDrawer />
     <AutoHeightDrawer />
     <DynamicDrawer />
     <SharedDataDrawer />
@@ -83,18 +109,55 @@ function openFormDrawer() {
 
     <Card class="mb-4" title="基本使用">
       <p class="mb-3">一个基础的抽屉示例</p>
-      <Button type="primary" @click="openBaseDrawer('right')">右侧打开</Button>
-      <Button class="ml-2" type="primary" @click="openBaseDrawer('bottom')">
+      <Button class="mb-2" type="primary" @click="openBaseDrawer('right')">
+        右侧打开
+      </Button>
+      <Button
+        class="mb-2 ml-2"
+        type="primary"
+        @click="openBaseDrawer('bottom')"
+      >
         底部打开
       </Button>
-      <Button class="ml-2" type="primary" @click="openBaseDrawer('left')">
+      <Button class="mb-2 ml-2" type="primary" @click="openBaseDrawer('left')">
         左侧打开
       </Button>
-      <Button class="ml-2" type="primary" @click="openBaseDrawer('top')">
+      <Button class="mb-2 ml-2" type="primary" @click="openBaseDrawer('top')">
         顶部打开
       </Button>
     </Card>
 
+    <Card class="mb-4" title="在内容区域打开">
+      <p class="mb-3">指定抽屉在内容区域打开，不会覆盖顶部和左侧菜单等区域</p>
+      <Button class="mb-2" type="primary" @click="openInContentDrawer('right')">
+        右侧打开
+      </Button>
+      <Button
+        class="mb-2 ml-2"
+        type="primary"
+        @click="openInContentDrawer('bottom')"
+      >
+        底部打开
+      </Button>
+      <Button
+        class="mb-2 ml-2"
+        type="primary"
+        @click="openInContentDrawer('left')"
+      >
+        左侧打开
+      </Button>
+      <Button
+        class="mb-2 ml-2"
+        type="primary"
+        @click="openInContentDrawer('top')"
+      >
+        顶部打开
+      </Button>
+      <Button class="mb-2 ml-2" type="primary" @click="openMaxContentDrawer">
+        内容区域全屏打开
+      </Button>
+    </Card>
+
     <Card class="mb-4" title="内容高度自适应滚动">
       <p class="mb-3">可根据内容自动计算滚动高度</p>
       <Button type="primary" @click="openAutoHeightDrawer">打开抽屉</Button>
diff --git a/apps/vben5/playground/src/views/examples/ellipsis/index.vue b/apps/vben5/playground/src/views/examples/ellipsis/index.vue
index ff5066f30..b88c8190b 100644
--- a/apps/vben5/playground/src/views/examples/ellipsis/index.vue
+++ b/apps/vben5/playground/src/views/examples/ellipsis/index.vue
@@ -5,6 +5,8 @@ import { EllipsisText, Page } from '@vben/common-ui';
 
 import { Card } from 'ant-design-vue';
 
+import DocButton from '../doc-button.vue';
+
 const longText = `Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`;
 
 const text = ref(longText);
@@ -15,6 +17,9 @@ const text = ref(longText);
     description="用于多行文本省略，支持点击展开和自定义内容。"
     title="文本省略组件示例"
   >
+    <template #extra>
+      <DocButton class="mb-2" path="/components/common-ui/vben-ellipsis-text" />
+    </template>
     <Card class="mb-4" title="基本使用">
       <EllipsisText :max-width="500">{{ text }}</EllipsisText>
     </Card>
diff --git a/apps/vben5/playground/src/views/examples/form/api.vue b/apps/vben5/playground/src/views/examples/form/api.vue
index eceeea3ef..02abfce3f 100644
--- a/apps/vben5/playground/src/views/examples/form/api.vue
+++ b/apps/vben5/playground/src/views/examples/form/api.vue
@@ -1,11 +1,17 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
 import { Button, Card, message, Space } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 
+const isReverseActionButtons = ref(false);
+
 const [BaseForm, formApi] = useVbenForm({
+  // 翻转操作按钮的位置
+  actionButtonsReverse: isReverseActionButtons.value,
   // 所有表单项共用，可单独在表单内覆盖
   commonConfig: {
     // 所有表单项
@@ -83,6 +89,7 @@ function handleClick(
     | 'labelWidth'
     | 'resetDisabled'
     | 'resetLabelWidth'
+    | 'reverseActionButtons'
     | 'showAction'
     | 'showResetButton'
     | 'showSubmitButton'
@@ -158,6 +165,11 @@ function handleClick(
       });
       break;
     }
+    case 'reverseActionButtons': {
+      isReverseActionButtons.value = !isReverseActionButtons.value;
+      formApi.setState({ actionButtonsReverse: isReverseActionButtons.value });
+      break;
+    }
     case 'showAction': {
       formApi.setState({ showDefaultActions: true });
       break;
@@ -177,6 +189,7 @@ function handleClick(
       });
       break;
     }
+
     case 'updateResetButton': {
       formApi.setState({
         resetButtonOptions: { disabled: true },
@@ -226,6 +239,9 @@ function handleClick(
       <Button @click="handleClick('resetLabelWidth')">还原labelWidth</Button>
       <Button @click="handleClick('disabled')">禁用表单</Button>
       <Button @click="handleClick('resetDisabled')">解除禁用</Button>
+      <Button @click="handleClick('reverseActionButtons')">
+        翻转操作按钮位置
+      </Button>
       <Button @click="handleClick('hiddenAction')">隐藏操作按钮</Button>
       <Button @click="handleClick('showAction')">显示操作按钮</Button>
       <Button @click="handleClick('hiddenResetButton')">隐藏重置按钮</Button>
diff --git a/apps/vben5/playground/src/views/examples/form/basic.vue b/apps/vben5/playground/src/views/examples/form/basic.vue
index 5124a3cfd..da292b2bb 100644
--- a/apps/vben5/playground/src/views/examples/form/basic.vue
+++ b/apps/vben5/playground/src/views/examples/form/basic.vue
@@ -1,16 +1,23 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
-import { Button, Card, message } from 'ant-design-vue';
+import { Button, Card, message, TabPane, Tabs } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
 import { useVbenForm } from '#/adapter/form';
+import { getAllMenusApi } from '#/api';
 
 import DocButton from '../doc-button.vue';
 
+const activeTab = ref('basic');
+
 const [BaseForm, baseFormApi] = useVbenForm({
   // 所有表单项共用，可单独在表单内覆盖
   commonConfig: {
+    // 在label后显示一个冒号
+    colon: true,
     // 所有表单项
     componentProps: {
       class: 'w-full',
@@ -35,6 +42,43 @@ const [BaseForm, baseFormApi] = useVbenForm({
       fieldName: 'username',
       // 界面显示的label
       label: '字符串',
+      rules: 'required',
+    },
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: 'ApiSelect',
+      // 对应组件的参数
+      componentProps: {
+        // 菜单接口转options格式
+        afterFetch: (data: { name: string; path: string }[]) => {
+          return data.map((item: any) => ({
+            label: item.name,
+            value: item.path,
+          }));
+        },
+        // 菜单接口
+        api: getAllMenusApi,
+      },
+      // 字段名
+      fieldName: 'api',
+      // 界面显示的label
+      label: 'ApiSelect',
+    },
+    {
+      component: 'ApiTreeSelect',
+      // 对应组件的参数
+      componentProps: {
+        // 菜单接口
+        api: getAllMenusApi,
+        childrenField: 'children',
+        // 菜单接口转options格式
+        labelField: 'name',
+        valueField: 'path',
+      },
+      // 字段名
+      fieldName: 'apiTree',
+      // 界面显示的label
+      label: 'ApiTreeSelect',
     },
     {
       component: 'InputPassword',
@@ -53,6 +97,11 @@ const [BaseForm, baseFormApi] = useVbenForm({
       label: '数字(带后缀)',
       suffix: () => '¥',
     },
+    {
+      component: 'IconPicker',
+      fieldName: 'icon',
+      label: '图标',
+    },
     {
       component: 'Select',
       componentProps: {
@@ -331,18 +380,30 @@ function handleSetFormValue() {
   <Page
     content-class="flex flex-col gap-4"
     description="表单组件基础示例，请注意，该页面用到的参数代码会添加一些简单注释，方便理解，请仔细查看。"
+    header-class="pb-0"
     title="表单组件"
   >
+    <template #description>
+      <div class="text-muted-foreground">
+        <p>
+          表单组件基础示例，请注意，该页面用到的参数代码会添加一些简单注释，方便理解，请仔细查看。
+        </p>
+      </div>
+      <Tabs v-model:active-key="activeTab" :tab-bar-style="{ marginBottom: 0 }">
+        <TabPane key="basic" tab="基础示例" />
+        <TabPane key="layout" tab="自定义布局" />
+      </Tabs>
+    </template>
     <template #extra>
-      <DocButton path="/components/common-ui/vben-form" />
+      <DocButton class="mb-2" path="/components/common-ui/vben-form" />
     </template>
-    <Card title="基础示例">
+    <Card v-show="activeTab === 'basic'" title="基础示例">
       <template #extra>
         <Button type="primary" @click="handleSetFormValue">设置表单值</Button>
       </template>
       <BaseForm />
     </Card>
-    <Card title="使用tailwind自定义布局">
+    <Card v-show="activeTab === 'layout'" title="使用tailwind自定义布局">
       <CustomLayoutForm />
     </Card>
   </Page>
diff --git a/apps/vben5/playground/src/views/examples/layout/col-page.vue b/apps/vben5/playground/src/views/examples/layout/col-page.vue
new file mode 100644
index 000000000..5b18330eb
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/layout/col-page.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+
+import { ColPage } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Alert,
+  Button,
+  Card,
+  Checkbox,
+  Slider,
+  Tag,
+  Tooltip,
+} from 'ant-design-vue';
+
+const props = reactive({
+  leftCollapsedWidth: 5,
+  leftCollapsible: true,
+  leftMaxWidth: 50,
+  leftMinWidth: 20,
+  leftWidth: 30,
+  resizable: true,
+  rightWidth: 70,
+  splitHandle: false,
+  splitLine: false,
+});
+const leftMinWidth = ref(props.leftMinWidth || 1);
+const leftMaxWidth = ref(props.leftMaxWidth || 100);
+</script>
+<template>
+  <ColPage
+    auto-content-height
+    description="ColPage 是一个双列布局组件，支持左侧折叠、拖拽调整宽度等功能。"
+    v-bind="props"
+    title="ColPage 双列布局组件"
+  >
+    <template #title>
+      <span class="mr-2 text-2xl font-bold">ColPage 双列布局组件</span>
+      <Tag color="hsl(var(--destructive))">Alpha</Tag>
+    </template>
+    <template #left="{ isCollapsed, expand }">
+      <div v-if="isCollapsed" @click="expand">
+        <Tooltip title="点击展开左侧">
+          <Button shape="circle" type="primary">
+            <template #icon>
+              <IconifyIcon class="text-2xl" icon="bi:arrow-right" />
+            </template>
+          </Button>
+        </Tooltip>
+      </div>
+      <div
+        v-else
+        :style="{ minWidth: '200px' }"
+        class="border-border bg-card mr-2 rounded-[var(--radius)] border p-2"
+      >
+        <p>这里是左侧内容</p>
+        <p>这里是左侧内容</p>
+        <p>这里是左侧内容</p>
+        <p>这里是左侧内容</p>
+        <p>这里是左侧内容</p>
+      </div>
+    </template>
+    <Card class="ml-2" title="基本使用">
+      <div class="flex flex-col gap-2">
+        <div class="flex gap-2">
+          <Checkbox v-model:checked="props.resizable">可拖动调整宽度</Checkbox>
+          <Checkbox v-model:checked="props.splitLine">显示拖动分隔线</Checkbox>
+          <Checkbox v-model:checked="props.splitHandle">显示拖动手柄</Checkbox>
+          <Checkbox v-model:checked="props.leftCollapsible">
+            左侧可折叠
+          </Checkbox>
+        </div>
+        <div class="flex items-center gap-2">
+          <span>左侧最小宽度百分比：</span>
+          <Slider
+            v-model:value="leftMinWidth"
+            :max="props.leftMaxWidth - 1"
+            :min="1"
+            style="width: 100px"
+            @after-change="(value) => (props.leftMinWidth = value as number)"
+          />
+          <span>左侧最大宽度百分比：</span>
+          <Slider
+            v-model:value="props.leftMaxWidth"
+            :max="100"
+            :min="leftMaxWidth + 1"
+            style="width: 100px"
+            @after-change="(value) => (props.leftMaxWidth = value as number)"
+          />
+        </div>
+        <Alert message="实验性的组件" show-icon type="warning">
+          <template #description>
+            <p>
+              双列布局组件是一个在Page组件上扩展的相对基础的布局组件，支持左侧折叠（当拖拽导致左侧宽度比最小宽度还要小时，还可以进入折叠状态）、拖拽调整宽度等功能。
+            </p>
+            <p>以上宽度设置的数值是百分比，最小值为1，最大值为100。</p>
+            <p class="font-bold text-red-600">
+              这是一个实验性的组件，用法可能会发生变动，也可能最终不会被采用。在其用法正式出现在文档中之前，不建议在生产环境中使用。
+            </p>
+          </template>
+        </Alert>
+      </div>
+    </Card>
+  </ColPage>
+</template>
diff --git a/apps/vben5/playground/src/views/examples/modal/in-content-demo.vue b/apps/vben5/playground/src/views/examples/modal/in-content-demo.vue
new file mode 100644
index 000000000..4ffbceaa6
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/modal/in-content-demo.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm() {
+    message.info('onConfirm');
+    // modalApi.close();
+  },
+});
+</script>
+<template>
+  <Modal
+    append-to-main
+    class="w-[600px]"
+    title="基础弹窗示例"
+    title-tooltip="标题提示内容"
+  >
+    此弹窗指定在内容区域打开
+  </Modal>
+</template>
diff --git a/apps/vben5/playground/src/views/examples/modal/index.vue b/apps/vben5/playground/src/views/examples/modal/index.vue
index d6db2fba2..4176f14eb 100644
--- a/apps/vben5/playground/src/views/examples/modal/index.vue
+++ b/apps/vben5/playground/src/views/examples/modal/index.vue
@@ -9,6 +9,7 @@ import BaseDemo from './base-demo.vue';
 import DragDemo from './drag-demo.vue';
 import DynamicDemo from './dynamic-demo.vue';
 import FormModalDemo from './form-modal-demo.vue';
+import InContentModalDemo from './in-content-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
 
 const [BaseModal, baseModalApi] = useVbenModal({
@@ -16,6 +17,11 @@ const [BaseModal, baseModalApi] = useVbenModal({
   connectedComponent: BaseDemo,
 });
 
+const [InContentModal, inContentModalApi] = useVbenModal({
+  // 连接抽离的组件
+  connectedComponent: InContentModalDemo,
+});
+
 const [AutoHeightModal, autoHeightModalApi] = useVbenModal({
   connectedComponent: AutoHeightDemo,
 });
@@ -40,6 +46,10 @@ function openBaseModal() {
   baseModalApi.open();
 }
 
+function openInContentModal() {
+  inContentModalApi.open();
+}
+
 function openAutoHeightModal() {
   autoHeightModalApi.open();
 }
@@ -76,6 +86,7 @@ function openFormModal() {
 
 <template>
   <Page
+    auto-content-height
     description="弹窗组件常用于在不离开当前页面的情况下，显示额外的信息、表单或操作提示，更多api请查看组件文档。"
     title="弹窗组件示例"
   >
@@ -83,6 +94,7 @@ function openFormModal() {
       <DocButton path="/components/common-ui/vben-modal" />
     </template>
     <BaseModal />
+    <InContentModal />
     <AutoHeightModal />
     <DragModal />
     <DynamicModal />
@@ -93,6 +105,11 @@ function openFormModal() {
       <Button type="primary" @click="openBaseModal">打开弹窗</Button>
     </Card>
 
+    <Card class="mb-4" title="指定容器">
+      <p class="mb-3">在内容区域打开弹窗的示例</p>
+      <Button type="primary" @click="openInContentModal">打开弹窗</Button>
+    </Card>
+
     <Card class="mb-4" title="内容高度自适应">
       <p class="mb-3">可根据内容并自动调整高度</p>
       <Button type="primary" @click="openAutoHeightModal">打开弹窗</Button>
diff --git a/apps/vben5/playground/src/views/examples/vxe-table/custom-cell.vue b/apps/vben5/playground/src/views/examples/vxe-table/custom-cell.vue
index 46fd29cce..3bf1cb91c 100644
--- a/apps/vben5/playground/src/views/examples/vxe-table/custom-cell.vue
+++ b/apps/vben5/playground/src/views/examples/vxe-table/custom-cell.vue
@@ -82,6 +82,7 @@ const gridOptions: VxeGridProps<RowType> = {
       },
     },
   },
+  showOverflow: false,
 };
 
 const [Grid] = useVbenVxeGrid({ gridOptions });
diff --git a/apps/vben5/playground/src/views/examples/vxe-table/form.vue b/apps/vben5/playground/src/views/examples/vxe-table/form.vue
index fad0cf58f..dd9e2a376 100644
--- a/apps/vben5/playground/src/views/examples/vxe-table/form.vue
+++ b/apps/vben5/playground/src/views/examples/vxe-table/form.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { VbenFormProps } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { Page } from '@vben/common-ui';
 
@@ -65,11 +65,13 @@ const formOptions: VbenFormProps = {
   ],
   // 控制表单是否显示折叠按钮
   showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
   // 按下回车时是否提交表单
   submitOnEnter: false,
 };
 
-const gridOptions: VxeGridProps<RowType> = {
+const gridOptions: VxeTableGridOptions<RowType> = {
   checkboxConfig: {
     highlight: true,
     labelField: 'name',
@@ -83,6 +85,7 @@ const gridOptions: VxeGridProps<RowType> = {
     { field: 'price', title: 'Price' },
     { field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
   ],
+  exportConfig: {},
   height: 'auto',
   keepSource: true,
   pagerConfig: {},
@@ -98,9 +101,20 @@ const gridOptions: VxeGridProps<RowType> = {
       },
     },
   },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
 };
 
-const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
+const [Grid] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
 </script>
 
 <template>
diff --git a/apps/vben5/playground/src/views/examples/vxe-table/remote.vue b/apps/vben5/playground/src/views/examples/vxe-table/remote.vue
index 7fc98a08b..907c1e2cd 100644
--- a/apps/vben5/playground/src/views/examples/vxe-table/remote.vue
+++ b/apps/vben5/playground/src/views/examples/vxe-table/remote.vue
@@ -25,10 +25,10 @@ const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { title: '序号', type: 'seq', width: 50 },
     { align: 'left', title: 'Name', type: 'checkbox', width: 100 },
-    { field: 'category', title: 'Category' },
-    { field: 'color', title: 'Color' },
-    { field: 'productName', title: 'Product Name' },
-    { field: 'price', title: 'Price' },
+    { field: 'category', sortable: true, title: 'Category' },
+    { field: 'color', sortable: true, title: 'Color' },
+    { field: 'productName', sortable: true, title: 'Product Name' },
+    { field: 'price', sortable: true, title: 'Price' },
     { field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime' },
   ],
   exportConfig: {},
@@ -36,19 +36,26 @@ const gridOptions: VxeGridProps<RowType> = {
   keepSource: true,
   proxyConfig: {
     ajax: {
-      query: async ({ page }) => {
+      query: async ({ page, sort }) => {
         return await getExampleTableApi({
           page: page.currentPage,
           pageSize: page.pageSize,
+          sortBy: sort.field,
+          sortOrder: sort.order,
         });
       },
     },
+    sort: true,
+  },
+  sortConfig: {
+    defaultSort: { field: 'category', order: 'desc' },
+    remote: true,
   },
   toolbarConfig: {
     custom: true,
     export: true,
     // import: true,
-    refresh: true,
+    refresh: { code: 'query' },
     zoom: true,
   },
 };
diff --git a/apps/vben5/pnpm-workspace.yaml b/apps/vben5/pnpm-workspace.yaml
index 9c2c6ed49..e1a1a653f 100644
--- a/apps/vben5/pnpm-workspace.yaml
+++ b/apps/vben5/pnpm-workspace.yaml
@@ -14,46 +14,48 @@ packages:
   - docs
   - playground
 catalog:
-  '@ast-grep/napi': ^0.30.1
+  '@ast-grep/napi': ^0.31.1
   '@ant-design/icons-vue': ^7.0.1
   '@changesets/changelog-github': ^0.5.0
-  '@changesets/cli': ^2.27.10
+  '@changesets/cli': ^2.27.11
   '@changesets/git': ^3.0.2
-  '@clack/prompts': ^0.8.2
-  '@commitlint/cli': ^19.6.0
+  '@clack/prompts': ^0.9.0
+  '@commitlint/cli': ^19.6.1
   '@commitlint/config-conventional': ^19.6.0
   '@ctrl/tinycolor': ^4.1.0
-  '@eslint/js': ^9.16.0
-  '@faker-js/faker': ^9.2.0
-  '@iconify/json': ^2.2.278
-  '@iconify/tailwind': ^1.1.3
-  '@iconify/vue': ^4.1.2
+  '@eslint/js': ^9.17.0
+  '@faker-js/faker': ^9.3.0
+  '@iconify/json': ^2.2.286
+  '@iconify/tailwind': ^1.2.0
+  '@iconify/vue': ^4.2.0
   '@intlify/core-base': ^10.0.5
-  '@intlify/unplugin-vue-i18n': ^6.0.0
+  '@intlify/unplugin-vue-i18n': ^6.0.1
   '@jspm/generator': ^2.4.1
   '@manypkg/get-packages': ^2.2.2
   '@nolebase/vitepress-plugin-git-changelog': ^2.11.1
-  '@playwright/test': ^1.49.0
-  '@pnpm/workspace.read-manifest': ^1000.0.0
+  '@playwright/test': ^1.49.1
+  '@pnpm/workspace.read-manifest': ^1000.0.1
   '@stylistic/stylelint-plugin': ^3.1.1
   '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
   '@tailwindcss/typography': ^0.5.15
-  '@tanstack/vue-query': ^5.62.0
+  '@tanstack/vue-query': ^5.62.8
   '@tanstack/vue-store': ^0.6.0
   '@types/archiver': ^6.0.3
   '@types/codemirror': ^5.60.15
   '@types/eslint': ^9.6.1
   '@types/html-minifier-terser': ^7.0.2
   '@types/jsonwebtoken': ^9.0.7
-  '@types/lodash': ^4.17.13
   '@types/lodash.clonedeep': ^4.5.9
-  '@types/node': ^22.10.0
+  '@types/lodash.get': ^4.4.9
+  '@types/lodash.isequal': ^4.5.8
+  '@types/lodash.merge': ^4.6.9
+  '@types/node': ^22.10.2
   '@types/nprogress': ^0.2.3
   '@types/postcss-import': ^14.0.3
   '@types/qrcode': ^1.5.5
   '@types/sortablejs': ^1.15.8
-  '@typescript-eslint/eslint-plugin': ^8.16.0
-  '@typescript-eslint/parser': ^8.16.0
+  '@typescript-eslint/eslint-plugin': ^8.18.1
+  '@typescript-eslint/parser': ^8.18.1
   '@vee-validate/zod': ^4.14.7
   '@vite-pwa/vitepress': ^0.5.3
   '@vitejs/plugin-vue': ^5.2.1
@@ -66,36 +68,36 @@ catalog:
   ant-design-vue: ^4.2.6
   archiver: ^7.0.1
   autoprefixer: ^10.4.20
-  axios: ^1.7.8
+  axios: ^1.7.9
   axios-mock-adapter: ^2.1.0
   cac: ^6.7.14
-  chalk: ^5.3.0
+  chalk: ^5.4.0
   cheerio: 1.0.0
   circular-dependency-scanner: ^2.3.0
   class-variance-authority: ^0.7.1
   clsx: ^2.1.1
   codemirror: ^5.65.3
   commitlint-plugin-function-rules: ^4.0.1
-  consola: ^3.2.3
+  consola: ^3.3.0
   cross-env: ^7.0.3
-  cspell: ^8.16.1
+  cspell: ^8.17.1
   cssnano: ^7.0.6
   cz-git: ^1.11.0
   czg: ^1.11.0
   dayjs: ^1.11.13
   defu: ^6.1.4
   depcheck: ^1.4.7
-  dotenv: ^16.4.5
+  dotenv: ^16.4.7
   echarts: ^5.5.1
-  element-plus: ^2.9.0
-  eslint: ^9.16.0
+  element-plus: ^2.9.1
+  eslint: ^9.17.0
   eslint-config-turbo: ^2.3.3
-  eslint-plugin-command: ^0.2.6
+  eslint-plugin-command: ^0.2.7
   eslint-plugin-eslint-comments: ^3.2.0
-  eslint-plugin-import-x: ^4.4.3
-  eslint-plugin-jsdoc: ^50.6.0
+  eslint-plugin-import-x: ^4.6.1
+  eslint-plugin-jsdoc: ^50.6.1
   eslint-plugin-jsonc: ^2.18.2
-  eslint-plugin-n: ^17.14.0
+  eslint-plugin-n: ^17.15.1
   eslint-plugin-no-only-tests: ^3.3.0
   eslint-plugin-perfectionist: ^3.9.1
   eslint-plugin-prettier: ^5.2.1
@@ -104,48 +106,50 @@ catalog:
   eslint-plugin-unused-imports: ^4.1.4
   eslint-plugin-vitest: ^0.5.4
   eslint-plugin-vue: ^9.32.0
-  execa: ^9.5.1
+  execa: ^9.5.2
   find-up: ^7.0.0
   get-port: ^7.1.0
-  globals: ^15.12.0
+  globals: ^15.14.0
   h3: ^1.13.0
   happy-dom: ^15.11.7
   html-minifier-terser: ^7.2.0
   husky: ^9.1.7
-  is-ci: ^3.0.1
+  is-ci: ^4.1.0
   jsonc-eslint-parser: ^2.4.0
   jsonwebtoken: ^9.0.2
-  lint-staged: ^15.2.10
-  lodash: ^4.17.13
+  lint-staged: ^15.2.11
   lodash.clonedeep: ^4.5.0
-  lucide-vue-next: ^0.461.0
+  lodash.get: ^4.4.2
+  lodash.isequal: ^4.5.0
+  lodash.merge: ^4.6.2
+  lucide-vue-next: ^0.469.0
   medium-zoom: ^1.1.0
-  naive-ui: ^2.40.2
+  naive-ui: ^2.40.4
   nitropack: ^2.10.4
   nprogress: ^0.2.0
   ora: ^8.1.1
   pinia: 2.2.2
-  pinia-plugin-persistedstate: ^4.1.3
+  pinia-plugin-persistedstate: ^4.2.0
   pkg-types: ^1.2.1
-  playwright: ^1.49.0
+  playwright: ^1.49.1
   postcss: ^8.4.49
   postcss-antd-fixes: ^0.2.0
   postcss-html: ^1.7.0
   postcss-import: ^16.1.0
-  postcss-preset-env: ^10.1.1
+  postcss-preset-env: ^10.1.2
   postcss-scss: ^4.0.9
-  prettier: ^3.4.1
+  prettier: ^3.4.2
   prettier-plugin-tailwindcss: ^0.6.9
   publint: ^0.2.12
   qrcode: ^1.5.4
-  radix-vue: ^1.9.10
-  resolve.exports: ^2.0.2
+  radix-vue: ^1.9.11
+  resolve.exports: ^2.0.3
   rimraf: ^6.0.1
-  rollup: ^4.28.0
+  rollup: ^4.28.1
   rollup-plugin-visualizer: ^5.12.0
   sass: 1.80.6
   sortablejs: ^1.15.6
-  stylelint: ^16.11.0
+  stylelint: ^16.12.0
   stylelint-config-recess-order: ^5.1.1
   stylelint-config-recommended: ^14.0.1
   stylelint-config-recommended-scss: ^14.1.0
@@ -155,31 +159,31 @@ catalog:
   stylelint-prettier: ^5.0.2
   stylelint-scss: ^6.10.0
   tailwind-merge: ^2.5.5
-  tailwindcss: ^3.4.15
+  tailwindcss: ^3.4.17
   tailwindcss-animate: ^1.0.7
   theme-colors: ^0.1.0
   turbo: ^2.3.3
   typescript: 5.6.3
-  unbuild: ^3.0.0-rc.11
+  unbuild: ^3.0.1
   unplugin-element-plus: ^0.8.0
   vee-validate: ^4.14.7
-  vite: ^6.0.1
+  vite: ^6.0.5
   vite-plugin-compression: ^0.5.1
   vite-plugin-dts: 4.2.1
   vite-plugin-html: ^3.2.2
   vite-plugin-lazy-import: ^1.0.7
   vite-plugin-pwa: ^0.21.1
-  vite-plugin-vue-devtools: ^7.6.7
+  vite-plugin-vue-devtools: ^7.6.8
   vitepress: ^1.5.0
-  vitepress-plugin-group-icons: ^1.3.0
-  vitest: ^2.1.6
+  vitepress-plugin-group-icons: ^1.3.2
+  vitest: ^2.1.8
   vue: ^3.5.13
   vue-eslint-parser: ^9.4.3
   vue-i18n: ^10.0.5
   vue-router: ^4.5.0
   vue-tsc: ^2.1.10
-  vxe-pc-ui: ^4.3.10
-  vxe-table: ^4.9.10
+  vxe-pc-ui: ^4.3.40
+  vxe-table: ^4.9.33
   watermark-js-plus: ^1.5.7
-  zod: ^3.23.8
+  zod: ^3.24.1
   zod-defaults: ^0.1.3
diff --git a/apps/vben5/scripts/turbo-run/package.json b/apps/vben5/scripts/turbo-run/package.json
index 84afb2da4..1690720f1 100644
--- a/apps/vben5/scripts/turbo-run/package.json
+++ b/apps/vben5/scripts/turbo-run/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/turbo-run",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "private": true,
   "license": "MIT",
   "type": "module",
diff --git a/apps/vben5/scripts/vsh/package.json b/apps/vben5/scripts/vsh/package.json
index 1c6162c7c..04123e2e2 100644
--- a/apps/vben5/scripts/vsh/package.json
+++ b/apps/vben5/scripts/vsh/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/vsh",
-  "version": "5.4.8",
+  "version": "5.5.1",
   "private": true,
   "license": "MIT",
   "type": "module",
diff --git a/apps/vben5/vben-admin.code-workspace b/apps/vben5/vben-admin.code-workspace
index 9bc930a45..aa8205bda 100644
--- a/apps/vben5/vben-admin.code-workspace
+++ b/apps/vben5/vben-admin.code-workspace
@@ -168,33 +168,5 @@
       "name": "@vben/vsh",
       "path": "scripts/vsh",
     },
-    {
-      "name": "@vben/app",
-      "path": "apps/app-antd",
-    },
-    {
-      "name": "@abp/core",
-      "path": "packages/@abp/core",
-    },
-    {
-      "name": "@abp/request",
-      "path": "packages/@abp/request",
-    },
-    {
-      "name": "@abp/ui",
-      "path": "packages/@abp/ui",
-    },
-    {
-      "name": "@abp/identity",
-      "path": "packages/@abp/identity",
-    },
-    {
-      "name": "@abp/account",
-      "path": "packages/@abp/account",
-    },
-    {
-      "name": "@abp/permission",
-      "path": "packages/@abp/permission",
-    },
   ],
 }