Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

2024-12-17 08:01:02 +08:00
parent 831696e275 593916d6aa
commit 219cde1e0e
101 changed files with 853 additions and 193 deletions
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -9,7 +9,7 @@
      "url": "http://localhost:5555",
      "env": { "NODE_ENV": "development" },
      "sourceMaps": true,
-      "webRoot": "${workspaceFolder}"
+      "webRoot": "${workspaceFolder}/playground"
    },
    {
      "type": "chrome",
@@ -18,7 +18,7 @@
      "url": "http://localhost:5666",
      "env": { "NODE_ENV": "development" },
      "sourceMaps": true,
-      "webRoot": "${workspaceFolder}"
+      "webRoot": "${workspaceFolder}/apps/web-antd"
    },
    {
      "type": "chrome",
@@ -27,7 +27,7 @@
      "url": "http://localhost:5777",
      "env": { "NODE_ENV": "development" },
      "sourceMaps": true,
-      "webRoot": "${workspaceFolder}"
+      "webRoot": "${workspaceFolder}/apps/web-ele"
    },
    {
      "type": "chrome",
@@ -36,7 +36,7 @@
      "url": "http://localhost:5888",
      "env": { "NODE_ENV": "development" },
      "sourceMaps": true,
-      "webRoot": "${workspaceFolder}"
+      "webRoot": "${workspaceFolder}/apps/web-naive"
    }
  ]
 }
--- a/apps/backend-mock/api/table/list.ts
+++ b/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);
 });
--- a/apps/web-antd/src/views/_core/authentication/code-login.vue
+++ b/apps/web-antd/src/views/_core/authentication/code-login.vue
@@ -15,6 +15,7 @@ import { useAuthStore } from '#/store';
 defineOptions({ name: 'CodeLogin' });

 const loading = ref(false);
+const CODE_LENGTH = 6;

 const tenantInfo = ref<TenantResp>({
  tenantEnabled: false,
@@ -98,7 +99,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]),
+      }),
    },
  ];
 });
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/web-ele",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://vben.pro",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/apps/web-ele/src/views/_core/authentication/code-login.vue
+++ b/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]),
+      }),
    },
  ];
 });
--- a/apps/web-ele/src/views/demos/form/basic.vue
+++ b/apps/web-ele/src/views/demos/form/basic.vue
@@ -139,6 +139,7 @@ const [Form, formApi] = useVbenForm({
      fieldName: 'select',
      label: 'Select',
      componentProps: {
+        filterable: true,
        options: [
          { value: 'A', label: '选项A' },
          { value: 'B', label: '选项B' },
--- a/apps/web-naive/package.json
+++ b/apps/web-naive/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/web-naive",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://vben.pro",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/apps/web-naive/src/adapter/form.ts
+++ b/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',
--- a/apps/web-naive/src/views/_core/authentication/code-login.vue
+++ b/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]),
+      }),
    },
  ];
 });
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/docs",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "private": true,
  "scripts": {
    "build": "vitepress build",
--- a/docs/src/_env/adapter/form.ts
+++ b/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: {
--- a/docs/src/components/common-ui/vben-form.md
+++ b/docs/src/components/common-ui/vben-form.md
@@ -287,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>` |
@@ -311,14 +313,14 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | 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 |
+| submitOnChange | 字段值改变时提交表单(内部防抖，这个属性一般用于表格的搜索表单) | `boolean` | false |

 ### TS 类型说明

@@ -359,6 +361,10 @@ export interface FormCommonConfig {
   * 所有表单项的控件样式
   */
  controlClass?: string;
+  /**
+   * 在表单项的Label后显示一个冒号
+   */
+  colon?: boolean;
  /**
   * 所有表单项的禁用状态
   * @default false
@@ -418,7 +424,7 @@ export interface FormSchema<
  dependencies?: FormItemDependencies;
  /** 描述 */
  description?: string;
-  /** 字段名 */
+  /** 字段名，也作为自定义插槽的名称 */
  fieldName: string;
  /** 帮助信息 */
  help?: string;
@@ -441,7 +447,7 @@ export interface FormSchema<

 ```ts
 dependencies: {
-  // 只有当 name 字段的值变化时，才会触发联动
+  // 触发字段。只有这些字段值变动时，联动才会触发
  triggerFields: ['name'],
  // 动态判断当前字段是否需要显示，不显示则直接销毁
  if(values,formApi){},
@@ -462,11 +468,11 @@ dependencies: {

 ### 表单校验

-表单联动需要通过 schema 内的 `rules` 属性进行配置。
+表单校验需要通过 schema 内的 `rules` 属性进行配置。

-rules的值可以是一个字符串，也可以是一个zod的schema。
+rules的值可以是字符串（预定义的校验规则名称），也可以是一个zod的schema。

-#### 字符串
+#### 预定义的校验规则

 ```ts
 // 表示字段必填，默认会根据适配器的required进行国际化
@@ -492,11 +498,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: "请输入" })
--- a/docs/src/components/common-ui/vben-vxe-table.md
+++ b/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`           |
--- a/docs/src/demos/vben-vxe-table/form/index.vue
+++ b/docs/src/demos/vben-vxe-table/form/index.vue
@@ -110,6 +110,11 @@ const gridOptions: VxeGridProps<RowType> = {
      },
    },
  },
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+  },
 };

 const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
--- a/docs/src/en/guide/essentials/settings.md
+++ b/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,
--- a/docs/src/guide/essentials/settings.md
+++ b/docs/src/guide/essentials/settings.md
@@ -240,6 +240,7 @@ const defaultPreferences: Preferences = {
    globalSearch: true,
  },
  sidebar: {
+    autoActivateChild: false,
    collapsed: false,
    collapsedShowTitle: false,
    enable: true,
--- a/internal/lint-configs/commitlint-config/package.json
+++ b/internal/lint-configs/commitlint-config/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/commitlint-config",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "private": true,
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
--- a/internal/lint-configs/stylelint-config/package.json
+++ b/internal/lint-configs/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/stylelint-config",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "private": true,
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
--- a/internal/node-utils/package.json
+++ b/internal/node-utils/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/node-utils",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "private": true,
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
--- a/internal/tailwind-config/package.json
+++ b/internal/tailwind-config/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/tailwind-config",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "private": true,
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
--- a/internal/tsconfig/package.json
+++ b/internal/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/tsconfig",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "private": true,
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
--- a/internal/vite-config/package.json
+++ b/internal/vite-config/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/vite-config",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "private": true,
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vben-admin-monorepo",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "private": true,
  "keywords": [
    "monorepo",
--- a/packages/@core/base/design/package.json
+++ b/packages/@core/base/design/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/design",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/base/icons/package.json
+++ b/packages/@core/base/icons/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/icons",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/base/shared/package.json
+++ b/packages/@core/base/shared/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/shared",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/base/typings/package.json
+++ b/packages/@core/base/typings/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/typings",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/composables/package.json
+++ b/packages/@core/composables/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/composables",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/preferences/tests/snapshots/config.test.ts.snap
+++ b/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",
--- a/packages/@core/preferences/package.json
+++ b/packages/@core/preferences/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/preferences",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/preferences/src/config.ts
+++ b/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',
--- a/packages/@core/preferences/src/types.ts
+++ b/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 {
--- a/packages/@core/ui-kit/form-ui/package.json
+++ b/packages/@core/ui-kit/form-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/form-ui",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/ui-kit/form-ui/src/config.ts
+++ b/packages/@core/ui-kit/form-ui/src/config.ts
@@ -46,11 +46,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,
  });

--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -130,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, {
@@ -348,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;
+  }
 }
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/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,
@@ -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>) {
@@ -296,7 +301,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)">
--- a/packages/@core/ui-kit/form-ui/src/form-render/form.vue
+++ b/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,
--- a/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/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
   */
@@ -371,6 +380,7 @@ export interface VbenFormAdapterOptions<
  config?: {
    baseModelPropName?: string;
    disabledOnChangeListener?: boolean;
+    disabledOnInputListener?: boolean;
    emptyStateValue?: null | undefined;
    modelPropNameMap?: Partial<Record<T, string>>;
  };
--- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
+++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -6,7 +6,9 @@ import type { ExtendedFormApi, VbenFormProps } from './types';
 import { useForwardPriorityValues } from '@vben-core/composables';
 // import { isFunction } from '@vben-core/shared/utils';

-import { toRaw, useTemplateRef, watch } from 'vue';
+import { nextTick, onMounted, useTemplateRef, watch } from 'vue';
+
+import { cloneDeep } from '@vben-core/shared/utils';

 import { useDebounceFn } from '@vueuse/core';

@@ -59,14 +61,16 @@ function handleKeyDownEnter(event: KeyboardEvent) {
  formActionsRef.value?.handleSubmit?.();
 }

-watch(
-  () => form.values,
-  useDebounceFn(() => {
-    forward.value.handleValuesChange?.(toRaw(form.values));
-    state.value.submitOnChange && props.formApi?.submitForm();
-  }, 300),
-  { deep: true },
-);
+const handleValuesChangeDebounced = useDebounceFn((newVal) => {
+  forward.value.handleValuesChange?.(cloneDeep(newVal));
+  state.value.submitOnChange && formActionsRef.value?.handleSubmit?.();
+}, 300);
+
+onMounted(async () => {
+  // 只在挂载后开始监听，form.values会有一个初始化的过程
+  await nextTick();
+  watch(() => form.values, handleValuesChangeDebounced, { deep: true });
+});
 </script>

 <template>
--- a/packages/@core/ui-kit/layout-ui/package.json
+++ b/packages/@core/ui-kit/layout-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/layout-ui",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/ui-kit/menu-ui/package.json
+++ b/packages/@core/ui-kit/menu-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/menu-ui",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/ui-kit/menu-ui/src/index.ts
+++ b/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';
--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/shadcn-ui",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "#main": "./dist/index.mjs",
  "#module": "./dist/index.mjs",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
--- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
+++ b/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');
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts
+++ b/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: {
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
+++ b/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,
      )
    "
--- a/packages/@core/ui-kit/tabs-ui/package.json
+++ b/packages/@core/ui-kit/tabs-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/tabs-ui",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
+++ b/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'"
--- a/packages/@core/ui-kit/tabs-ui/src/types.ts
+++ b/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 {
--- a/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
+++ b/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,
--- a/packages/constants/package.json
+++ b/packages/constants/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/constants",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/effects/access/package.json
+++ b/packages/effects/access/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/access",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/common-ui",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
+++ b/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" />
--- a/packages/effects/hooks/package.json
+++ b/packages/effects/hooks/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/hooks",
-  "version": "5.5.0",
+  "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:"
--- a/packages/effects/hooks/src/index.ts
+++ b/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';
--- a/packages/effects/hooks/src/use-hover-toggle.ts
+++ b/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];
+}
--- a/packages/effects/layouts/package.json
+++ b/packages/effects/layouts/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/layouts",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -103,6 +103,7 @@ const {

 const {
  handleMenuSelect,
+  handleMenuOpen,
  headerActive,
  headerMenus,
  sidebarActive,
@@ -260,6 +261,7 @@ const headerSlots = computed(() => {
        :rounded="isMenuRounded"
        :theme="sidebarTheme"
        mode="vertical"
+        @open="handleMenuOpen"
        @select="handleMenuSelect"
      />
    </template>
--- a/packages/effects/layouts/src/basic/menu/menu.vue
+++ b/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>
--- a/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
+++ b/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 ?? [];
    },
--- a/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
+++ b/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,
--- a/packages/effects/layouts/src/basic/tabbar/tabbar.vue
+++ b/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"
--- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
+++ b/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"
--- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue
+++ b/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>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
+++ b/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">
--- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
+++ b/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')">
--- a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/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 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 class="text-muted-foreground text-xs font-normal">
-            {{ description }}
-          </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>
--- a/packages/effects/plugins/package.json
+++ b/packages/effects/plugins/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/plugins",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/effects/plugins/src/vxe-table/api.ts
+++ b/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();
--- a/packages/effects/plugins/src/vxe-table/index.ts
+++ b/packages/effects/plugins/src/vxe-table/index.ts
@@ -1,4 +1,5 @@
 export { setupVbenVxeTable } from './init';
+export type { VxeTableGridOptions } from './types';
 export * from './use-vxe-grid';
 export { default as VbenVxeGrid } from './use-vxe-grid.vue';
 export type { VxeGridDefines, VxeGridListeners, VxeGridProps } from 'vxe-table';
--- a/packages/effects/plugins/src/vxe-table/types.ts
+++ b/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 = {
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
 import type { VbenFormProps } from '@vben-core/form-ui';
 import type {
+  VxeGridDefines,
  VxeGridInstance,
+  VxeGridListeners,
+  VxeGridPropTypes,
  VxeGridProps as VxeTableGridProps,
 } from 'vxe-table';

@@ -57,6 +60,7 @@ const {
  formOptions,
  tableTitle,
  tableTitleHelp,
+  showSearchForm,
 } = usePriorityValues(props, state);

 const { isMobile } = usePreferences();
@@ -105,21 +109,37 @@ const toolbarOptions = computed(() => {
  const slotActions = slots[TOOLBAR_ACTIONS]?.();
  const slotTools = slots[TOOLBAR_TOOLS]?.();

+  const toolbarConfig: VxeGridPropTypes.ToolbarConfig = {
+    tools:
+      gridOptions.value?.toolbarConfig?.search && !!formOptions.value
+        ? [
+            {
+              code: 'search',
+              icon: 'vxe-icon--search',
+              circle: true,
+              status: showSearchForm.value ? 'primary' : undefined,
+              title: $t('common.search'),
+            },
+          ]
+        : [],
+  };
+
  if (!showToolbar.value) {
-    return {};
+    return { toolbarConfig };
  }
+
+  // if (gridOptions.value?.toolbarConfig?.search) {
+  // }
  // 强制使用固定的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(() => {
@@ -175,9 +195,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,
  };
 });

@@ -215,7 +245,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，这里给出警告
@@ -306,7 +337,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="relative rounded py-3 pb-4"
+        >
          <slot name="form">
            <Form>
              <template
--- a/packages/effects/request/package.json
+++ b/packages/effects/request/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/request",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/icons",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/locales/package.json
+++ b/packages/locales/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/locales",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/locales/src/langs/en-US/authentication.json
+++ b/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",
--- a/packages/locales/src/langs/en-US/common.json
+++ b/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"
 }
--- a/packages/locales/src/langs/en-US/preferences.json
+++ b/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",
--- a/packages/locales/src/langs/zh-CN/authentication.json
+++ b/packages/locales/src/langs/zh-CN/authentication.json
@@ -38,7 +38,7 @@
  "qrcodeLogin": "扫码登录",
  "codeSubtitle": "请输入您的手机号码以开始管理您的项目",
  "code": "验证码",
-  "codeTip": "请输入验证码",
+  "codeTip": "请输入{0}位验证码",
  "mobile": "手机号码",
  "mobileTip": "请输入手机号",
  "mobileErrortip": "手机号码格式错误",
--- a/packages/locales/src/langs/zh-CN/common.json
+++ b/packages/locales/src/langs/zh-CN/common.json
@@ -9,5 +9,6 @@
  "noData": "暂无数据",
  "refresh": "刷新",
  "loadingMenu": "加载菜单中",
-  "query": "查询"
+  "query": "查询",
+  "search": "搜索"
 }
--- a/packages/locales/src/langs/zh-CN/preferences.json
+++ b/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": "谷歌",
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/preferences",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/stores/package.json
+++ b/packages/stores/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/stores",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/stores/src/modules/access.ts
+++ b/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;
    },
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/styles",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/styles/src/ele/index.css
+++ b/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);
+  }
+}
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/types",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/utils",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/playground/package.json
+++ b/playground/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/playground",
-  "version": "5.5.0",
+  "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:*",
--- a/playground/src/layouts/basic.vue
+++ b/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>
--- a/playground/src/locales/langs/en-US/page.json
+++ b/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",
--- a/playground/src/locales/langs/zh-CN/page.json
+++ b/playground/src/locales/langs/zh-CN/page.json
@@ -4,7 +4,9 @@
    "register": "注册",
    "codeLogin": "验证码登录",
    "qrcodeLogin": "二维码登录",
-    "forgetPassword": "忘记密码"
+    "forgetPassword": "忘记密码",
+    "sendingCode": "正在发送验证码",
+    "codeSentTo": "验证码已发送至{0}"
  },
  "dashboard": {
    "title": "概览",
--- a/playground/src/views/_core/authentication/code-login.vue
+++ b/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"
--- a/playground/src/views/demos/badge/index.vue
+++ b/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>
--- a/playground/src/views/examples/form/basic.vue
+++ b/playground/src/views/examples/form/basic.vue
@@ -16,6 +16,8 @@ const activeTab = ref('basic');
 const [BaseForm, baseFormApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
+    // 在label后显示一个冒号
+    colon: true,
    // 所有表单项
    componentProps: {
      class: 'w-full',
@@ -40,6 +42,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
      fieldName: 'username',
      // 界面显示的label
      label: '字符串',
+      rules: 'required',
    },
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
--- a/playground/src/views/examples/vxe-table/custom-cell.vue
+++ b/playground/src/views/examples/vxe-table/custom-cell.vue
@@ -82,6 +82,7 @@ const gridOptions: VxeGridProps<RowType> = {
      },
    },
  },
+  showOverflow: false,
 };

 const [Grid] = useVbenVxeGrid({ gridOptions });
--- a/playground/src/views/examples/vxe-table/form.vue
+++ b/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';

@@ -71,7 +71,7 @@ const formOptions: VbenFormProps = {
  submitOnEnter: false,
 };

-const gridOptions: VxeGridProps<RowType> = {
+const gridOptions: VxeTableGridOptions<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
@@ -85,6 +85,7 @@ const gridOptions: VxeGridProps<RowType> = {
    { field: 'price', title: 'Price' },
    { field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
  ],
+  exportConfig: {},
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
@@ -100,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>
--- a/playground/src/views/examples/vxe-table/remote.vue
+++ b/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,
  },
 };
--- a/scripts/turbo-run/package.json
+++ b/scripts/turbo-run/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/turbo-run",
-  "version": "5.5.0",
+  "version": "5.5.1",
  "private": true,
  "license": "MIT",
  "type": "module",
--- a/Show More
+++ b/Show More