diff --git a/apps/vben5/.lintstagedrc.mjs b/apps/vben5/.lintstagedrc.mjs
index e68d8a3e0..94b0192a7 100644
--- a/apps/vben5/.lintstagedrc.mjs
+++ b/apps/vben5/.lintstagedrc.mjs
@@ -1,4 +1,10 @@
 export default {
+  '*.md': ['prettier --cache --ignore-unknown --write'],
+  '*.vue': [
+    'prettier --write',
+    'eslint --cache --fix',
+    'stylelint --fix --allow-empty-input',
+  ],
   '*.{js,jsx,ts,tsx}': [
     'prettier --cache --ignore-unknown  --write',
     'eslint --cache --fix',
@@ -7,14 +13,8 @@ export default {
     'prettier --cache --ignore-unknown --write',
     'stylelint --fix --allow-empty-input',
   ],
-  '*.md': ['prettier --cache --ignore-unknown --write'],
-  '*.vue': [
-    'prettier --write',
-    'eslint --cache --fix',
-    'stylelint --fix --allow-empty-input',
-  ],
+  'package.json': ['prettier --cache --write'],
   '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [
     'prettier --cache --write--parser json',
   ],
-  'package.json': ['prettier --cache --write'],
 };
diff --git a/apps/vben5/apps/app-antd/.env.development b/apps/vben5/apps/app-antd/.env.development
index ea36fef54..d7204a13d 100644
--- a/apps/vben5/apps/app-antd/.env.development
+++ b/apps/vben5/apps/app-antd/.env.development
@@ -7,10 +7,10 @@ VITE_BASE=/
 VITE_GLOB_API_URL=/
 
 # 是否开启 Nitro Mock服务，true 为开启，false 为关闭
-VITE_NITRO_MOCK=true
+VITE_NITRO_MOCK=false
 
 # 是否打开 devtools，true 为打开，false 为关闭
-VITE_DEVTOOLS=true
+VITE_DEVTOOLS=false
 
 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
diff --git a/apps/vben5/apps/app-antd/package.json b/apps/vben5/apps/app-antd/package.json
index 675f638eb..c49b42bd0 100644
--- a/apps/vben5/apps/app-antd/package.json
+++ b/apps/vben5/apps/app-antd/package.json
@@ -1,18 +1,18 @@
 {
-  "name": "@vben/app-antd",
-  "version": "5.5.1",
-  "homepage": "https://vben.pro",
-  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "name": "@abp/app-antd",
+  "version": "8.3.4",
+  "homepage": "https://github.com/colinin/abp-next-admin",
+  "bugs": "https://github.com/colinin/abp-next-admin/issues",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "url": "git+https://github.com/colinin/abp-next-admin.git",
     "directory": "apps/app-antd"
   },
   "license": "MIT",
   "author": {
-    "name": "vben",
-    "email": "ann.vben@gmail.com",
-    "url": "https://github.com/anncwb"
+    "name": "colin",
+    "email": "colin.in@foxmail.com",
+    "url": "https://github.com/colinin"
   },
   "type": "module",
   "scripts": {
diff --git a/apps/vben5/apps/app-antd/src/bootstrap.ts b/apps/vben5/apps/app-antd/src/bootstrap.ts
index a0af6fcfe..1967cea94 100644
--- a/apps/vben5/apps/app-antd/src/bootstrap.ts
+++ b/apps/vben5/apps/app-antd/src/bootstrap.ts
@@ -1,6 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
+import { initTippy } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -31,6 +32,9 @@ async function bootstrap(namespace: string) {
   // 安装权限指令
   registerAccessDirective(app);
 
+  // 初始化 tippy
+  initTippy(app);
+
   // 配置路由及路由守卫
   app.use(router);
 
diff --git a/apps/vben5/apps/app-antd/src/locales/index.ts b/apps/vben5/apps/app-antd/src/locales/index.ts
index 60e61112a..d9d3c867e 100644
--- a/apps/vben5/apps/app-antd/src/locales/index.ts
+++ b/apps/vben5/apps/app-antd/src/locales/index.ts
@@ -1,7 +1,9 @@
-import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
 import type { Locale } from 'ant-design-vue/es/locale';
 
 import type { App } from 'vue';
+
+import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
+
 import { ref } from 'vue';
 
 import {
@@ -15,6 +17,7 @@ import { useAbpStore } from '@abp/core';
 import antdEnLocale from 'ant-design-vue/es/locale/en_US';
 import antdDefaultLocale from 'ant-design-vue/es/locale/zh_CN';
 import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 
 import { useAbpConfigApi } from '#/api/core/useAbpConfigApi';
 
@@ -73,6 +76,7 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
   }
   if (locale) {
     dayjs.locale(locale);
+    dayjs.extend(localizedFormat);
   } else {
     console.error(`Failed to load dayjs locale for ${lang}`);
   }
@@ -119,8 +123,7 @@ async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
   await coreSetup(app, {
     defaultLocale: preferences.app.locale,
     loadMessages,
-    // missingWarn: !import.meta.env.PROD,
-    missingWarn: false,
+    missingWarn: !import.meta.env.PROD,
     ...options,
   });
 }
diff --git a/apps/vben5/apps/app-antd/src/router/routes/core.ts b/apps/vben5/apps/app-antd/src/router/routes/core.ts
index fe030a9a2..7218da228 100644
--- a/apps/vben5/apps/app-antd/src/router/routes/core.ts
+++ b/apps/vben5/apps/app-antd/src/router/routes/core.ts
@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
 
-import { AuthPageLayout } from '#/layouts';
+import { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 import Login from '#/views/_core/authentication/login.vue';
 
@@ -21,13 +21,21 @@ const fallbackNotFoundRoute: RouteRecordRaw = {
 
 /** 基本路由，这些路由是必须存在的 */
 const coreRoutes: RouteRecordRaw[] = [
+  /**
+   * 根路由
+   * 使用基础布局，作为所有页面的父级容器，子级就不必配置BasicLayout。
+   * 此路由必须存在，且不应修改
+   */
   {
+    component: BasicLayout,
     meta: {
+      hideInBreadcrumb: true,
       title: 'Root',
     },
     name: 'Root',
     path: '/',
     redirect: DEFAULT_HOME_PATH,
+    children: [],
   },
   {
     component: AuthPageLayout,
diff --git a/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts b/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
index 1b7ec5c4f..0b3f7f404 100644
--- a/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
+++ b/apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts
@@ -1,11 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'https://abp.io/assets/favicon.ico/favicon-16x16.png',
       keepAlive: true,
diff --git a/apps/vben5/apps/app-antd/src/router/routes/modules/dashboard.ts b/apps/vben5/apps/app-antd/src/router/routes/modules/dashboard.ts
index 1bddab9db..5254dc65d 100644
--- a/apps/vben5/apps/app-antd/src/router/routes/modules/dashboard.ts
+++ b/apps/vben5/apps/app-antd/src/router/routes/modules/dashboard.ts
@@ -1,18 +1,16 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'lucide:layout-dashboard',
       order: -1,
       title: $t('page.dashboard.title'),
     },
     name: 'Dashboard',
-    path: '/',
+    path: '/dashboard',
     children: [
       {
         name: 'Analytics',
diff --git a/apps/vben5/apps/app-antd/src/router/routes/modules/demos.ts b/apps/vben5/apps/app-antd/src/router/routes/modules/demos.ts
index 32bb338e0..55ade09c9 100644
--- a/apps/vben5/apps/app-antd/src/router/routes/modules/demos.ts
+++ b/apps/vben5/apps/app-antd/src/router/routes/modules/demos.ts
@@ -1,11 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'ic:baseline-view-in-ar',
       keepAlive: true,
diff --git a/apps/vben5/apps/app-antd/src/router/routes/modules/vben.ts b/apps/vben5/apps/app-antd/src/router/routes/modules/vben.ts
index 210e8610f..98acf5821 100644
--- a/apps/vben5/apps/app-antd/src/router/routes/modules/vben.ts
+++ b/apps/vben5/apps/app-antd/src/router/routes/modules/vben.ts
@@ -8,30 +8,20 @@ import {
   VBEN_NAIVE_PREVIEW_URL,
 } from '@vben/constants';
 
-import { BasicLayout, IFrameView } from '#/layouts';
+import { IFrameView } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       badgeType: 'dot',
       icon: VBEN_LOGO_URL,
-      order: 9999,
+      order: 9998,
       title: $t('demos.vben.title'),
     },
     name: 'VbenProject',
     path: '/vben-admin',
     children: [
-      {
-        name: 'VbenAbout',
-        path: '/vben-admin/about',
-        component: () => import('#/views/_core/about/index.vue'),
-        meta: {
-          icon: 'lucide:copyright',
-          title: $t('demos.vben.about'),
-        },
-      },
       {
         name: 'VbenDocument',
         path: '/vben-admin/document',
@@ -76,6 +66,16 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    name: 'VbenAbout',
+    path: '/vben-admin/about',
+    component: () => import('#/views/_core/about/index.vue'),
+    meta: {
+      icon: 'lucide:copyright',
+      title: $t('demos.vben.about'),
+      order: 9999,
+    },
+  },
 ];
 
 export default routes;
diff --git a/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-trends.vue b/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-trends.vue
index fadfc917c..f1f0b232a 100644
--- a/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-trends.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits-data.vue b/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits-data.vue
index 30c4265df..190fb41f4 100644
--- a/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits-sales.vue b/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
index 260520b84..02f509123 100644
--- a/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits-source.vue b/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits-source.vue
index e0d0aab5e..0915c7af7 100644
--- a/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits.vue b/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits.vue
index 7e1f14ee6..7e0f10133 100644
--- a/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/vben5/apps/app-antd/src/views/dashboard/analytics/analytics-visits.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/app-antd/src/views/dashboard/analytics/index.vue b/apps/vben5/apps/app-antd/src/views/dashboard/analytics/index.vue
index 00b34df1e..5e3d6d285 100644
--- a/apps/vben5/apps/app-antd/src/views/dashboard/analytics/index.vue
+++ b/apps/vben5/apps/app-antd/src/views/dashboard/analytics/index.vue
@@ -15,10 +15,10 @@ import {
 } from '@vben/icons';
 
 import AnalyticsTrends from './analytics-trends.vue';
-import AnalyticsVisits from './analytics-visits.vue';
 import AnalyticsVisitsData from './analytics-visits-data.vue';
 import AnalyticsVisitsSales from './analytics-visits-sales.vue';
 import AnalyticsVisitsSource from './analytics-visits-source.vue';
+import AnalyticsVisits from './analytics-visits.vue';
 
 const overviewItems: AnalysisOverviewItem[] = [
   {
diff --git a/apps/vben5/apps/backend-mock/utils/mock-data.ts b/apps/vben5/apps/backend-mock/utils/mock-data.ts
index 057588e36..8fa12fe57 100644
--- a/apps/vben5/apps/backend-mock/utils/mock-data.ts
+++ b/apps/vben5/apps/backend-mock/utils/mock-data.ts
@@ -53,13 +53,12 @@ export const MOCK_CODES = [
 
 const dashboardMenus = [
   {
-    component: 'BasicLayout',
     meta: {
       order: -1,
       title: 'page.dashboard.title',
     },
     name: 'Dashboard',
-    path: '/',
+    path: '/dashboard',
     redirect: '/analytics',
     children: [
       {
@@ -116,7 +115,6 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
 
   return [
     {
-      component: 'BasicLayout',
       meta: {
         icon: 'ic:baseline-view-in-ar',
         keepAlive: true,
diff --git a/apps/vben5/apps/web-antd/package.json b/apps/vben5/apps/web-antd/package.json
index bbc5593f0..487622574 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.5.1",
+  "version": "5.5.3",
   "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 a43a8280a..17436a834 100644
--- a/apps/vben5/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/vben5/apps/web-antd/src/adapter/component/index.ts
@@ -3,9 +3,10 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
+import type { Component, SetupContext } from 'vue';
+
 import type { BaseFormComponentType } from '@vben/common-ui';
 
-import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
diff --git a/apps/vben5/apps/web-antd/src/api/request.ts b/apps/vben5/apps/web-antd/src/api/request.ts
index 67ef35e44..288dddd09 100644
--- a/apps/vben5/apps/web-antd/src/api/request.ts
+++ b/apps/vben5/apps/web-antd/src/api/request.ts
@@ -1,12 +1,13 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { HttpResponse } from '@vben/request';
+import type { RequestClientOptions } from '@vben/request';
 
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
   authenticateResponseInterceptor,
+  defaultResponseInterceptor,
   errorMessageResponseInterceptor,
   RequestClient,
 } from '@vben/request';
@@ -20,8 +21,9 @@ import { refreshTokenApi } from './core';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
-function createRequestClient(baseURL: string) {
+function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
+    ...options,
     baseURL,
   });
 
@@ -69,19 +71,14 @@ function createRequestClient(baseURL: string) {
     },
   });
 
-  // response数据解构
-  client.addResponseInterceptor<HttpResponse>({
-    fulfilled: (response) => {
-      const { data: responseData, status } = response;
-
-      const { code, data } = responseData;
-      if (status >= 200 && status < 400 && code === 0) {
-        return data;
-      }
-
-      throw Object.assign({}, response, { response });
-    },
-  });
+  // 处理返回的响应数据格式
+  client.addResponseInterceptor(
+    defaultResponseInterceptor({
+      codeField: 'code',
+      dataField: 'data',
+      successCode: 0,
+    }),
+  );
 
   // token过期的处理
   client.addResponseInterceptor(
@@ -109,6 +106,8 @@ function createRequestClient(baseURL: string) {
   return client;
 }
 
-export const requestClient = createRequestClient(apiURL);
+export const requestClient = createRequestClient(apiURL, {
+  responseReturn: 'data',
+});
 
 export const baseRequestClient = new RequestClient({ baseURL: apiURL });
diff --git a/apps/vben5/apps/web-antd/src/bootstrap.ts b/apps/vben5/apps/web-antd/src/bootstrap.ts
index 963d1c7f7..b46bfbcf2 100644
--- a/apps/vben5/apps/web-antd/src/bootstrap.ts
+++ b/apps/vben5/apps/web-antd/src/bootstrap.ts
@@ -1,6 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
+import { initTippy } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -18,6 +19,15 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   zIndex: 1020,
+  // });
+
   const app = createApp(App);
 
   // 国际化 i18n 配置
@@ -29,6 +39,9 @@ async function bootstrap(namespace: string) {
   // 安装权限指令
   registerAccessDirective(app);
 
+  // 初始化 tippy
+  initTippy(app);
+
   // 配置路由及路由守卫
   app.use(router);
 
diff --git a/apps/vben5/apps/web-antd/src/locales/index.ts b/apps/vben5/apps/web-antd/src/locales/index.ts
index 1972e06ee..7f32bd18e 100644
--- a/apps/vben5/apps/web-antd/src/locales/index.ts
+++ b/apps/vben5/apps/web-antd/src/locales/index.ts
@@ -1,7 +1,9 @@
-import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
 import type { Locale } from 'ant-design-vue/es/locale';
 
 import type { App } from 'vue';
+
+import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
+
 import { ref } from 'vue';
 
 import {
diff --git a/apps/vben5/apps/web-antd/src/router/routes/core.ts b/apps/vben5/apps/web-antd/src/router/routes/core.ts
index fe030a9a2..7218da228 100644
--- a/apps/vben5/apps/web-antd/src/router/routes/core.ts
+++ b/apps/vben5/apps/web-antd/src/router/routes/core.ts
@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
 
-import { AuthPageLayout } from '#/layouts';
+import { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 import Login from '#/views/_core/authentication/login.vue';
 
@@ -21,13 +21,21 @@ const fallbackNotFoundRoute: RouteRecordRaw = {
 
 /** 基本路由，这些路由是必须存在的 */
 const coreRoutes: RouteRecordRaw[] = [
+  /**
+   * 根路由
+   * 使用基础布局，作为所有页面的父级容器，子级就不必配置BasicLayout。
+   * 此路由必须存在，且不应修改
+   */
   {
+    component: BasicLayout,
     meta: {
+      hideInBreadcrumb: true,
       title: 'Root',
     },
     name: 'Root',
     path: '/',
     redirect: DEFAULT_HOME_PATH,
+    children: [],
   },
   {
     component: AuthPageLayout,
diff --git a/apps/vben5/apps/web-antd/src/router/routes/modules/dashboard.ts b/apps/vben5/apps/web-antd/src/router/routes/modules/dashboard.ts
index 1bddab9db..5254dc65d 100644
--- a/apps/vben5/apps/web-antd/src/router/routes/modules/dashboard.ts
+++ b/apps/vben5/apps/web-antd/src/router/routes/modules/dashboard.ts
@@ -1,18 +1,16 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'lucide:layout-dashboard',
       order: -1,
       title: $t('page.dashboard.title'),
     },
     name: 'Dashboard',
-    path: '/',
+    path: '/dashboard',
     children: [
       {
         name: 'Analytics',
diff --git a/apps/vben5/apps/web-antd/src/router/routes/modules/demos.ts b/apps/vben5/apps/web-antd/src/router/routes/modules/demos.ts
index 32bb338e0..55ade09c9 100644
--- a/apps/vben5/apps/web-antd/src/router/routes/modules/demos.ts
+++ b/apps/vben5/apps/web-antd/src/router/routes/modules/demos.ts
@@ -1,11 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'ic:baseline-view-in-ar',
       keepAlive: true,
diff --git a/apps/vben5/apps/web-antd/src/router/routes/modules/vben.ts b/apps/vben5/apps/web-antd/src/router/routes/modules/vben.ts
index 210e8610f..98acf5821 100644
--- a/apps/vben5/apps/web-antd/src/router/routes/modules/vben.ts
+++ b/apps/vben5/apps/web-antd/src/router/routes/modules/vben.ts
@@ -8,30 +8,20 @@ import {
   VBEN_NAIVE_PREVIEW_URL,
 } from '@vben/constants';
 
-import { BasicLayout, IFrameView } from '#/layouts';
+import { IFrameView } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       badgeType: 'dot',
       icon: VBEN_LOGO_URL,
-      order: 9999,
+      order: 9998,
       title: $t('demos.vben.title'),
     },
     name: 'VbenProject',
     path: '/vben-admin',
     children: [
-      {
-        name: 'VbenAbout',
-        path: '/vben-admin/about',
-        component: () => import('#/views/_core/about/index.vue'),
-        meta: {
-          icon: 'lucide:copyright',
-          title: $t('demos.vben.about'),
-        },
-      },
       {
         name: 'VbenDocument',
         path: '/vben-admin/document',
@@ -76,6 +66,16 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    name: 'VbenAbout',
+    path: '/vben-admin/about',
+    component: () => import('#/views/_core/about/index.vue'),
+    meta: {
+      icon: 'lucide:copyright',
+      title: $t('demos.vben.about'),
+      order: 9999,
+    },
+  },
 ];
 
 export default routes;
diff --git a/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue b/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
index fadfc917c..f1f0b232a 100644
--- a/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue b/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
index 30c4265df..190fb41f4 100644
--- a/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue b/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
index 260520b84..02f509123 100644
--- a/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue b/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue
index e0d0aab5e..0915c7af7 100644
--- a/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue b/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
index 7e1f14ee6..7e0f10133 100644
--- a/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/vben5/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-antd/src/views/dashboard/analytics/index.vue b/apps/vben5/apps/web-antd/src/views/dashboard/analytics/index.vue
index 00b34df1e..5e3d6d285 100644
--- a/apps/vben5/apps/web-antd/src/views/dashboard/analytics/index.vue
+++ b/apps/vben5/apps/web-antd/src/views/dashboard/analytics/index.vue
@@ -15,10 +15,10 @@ import {
 } from '@vben/icons';
 
 import AnalyticsTrends from './analytics-trends.vue';
-import AnalyticsVisits from './analytics-visits.vue';
 import AnalyticsVisitsData from './analytics-visits-data.vue';
 import AnalyticsVisitsSales from './analytics-visits-sales.vue';
 import AnalyticsVisitsSource from './analytics-visits-source.vue';
+import AnalyticsVisits from './analytics-visits.vue';
 
 const overviewItems: AnalysisOverviewItem[] = [
   {
diff --git a/apps/vben5/apps/web-ele/package.json b/apps/vben5/apps/web-ele/package.json
index a02376ee8..0b21070d7 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.5.1",
+  "version": "5.5.3",
   "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 818c8c4e1..6152ed318 100644
--- a/apps/vben5/apps/web-ele/src/adapter/component/index.ts
+++ b/apps/vben5/apps/web-ele/src/adapter/component/index.ts
@@ -3,10 +3,11 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
+import type { Component, SetupContext } from 'vue';
+
 import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
diff --git a/apps/vben5/apps/web-ele/src/api/request.ts b/apps/vben5/apps/web-ele/src/api/request.ts
index a9514c817..203b35bf7 100644
--- a/apps/vben5/apps/web-ele/src/api/request.ts
+++ b/apps/vben5/apps/web-ele/src/api/request.ts
@@ -1,12 +1,13 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { HttpResponse } from '@vben/request';
+import type { RequestClientOptions } from '@vben/request';
 
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
   authenticateResponseInterceptor,
+  defaultResponseInterceptor,
   errorMessageResponseInterceptor,
   RequestClient,
 } from '@vben/request';
@@ -20,8 +21,9 @@ import { refreshTokenApi } from './core';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
-function createRequestClient(baseURL: string) {
+function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
+    ...options,
     baseURL,
   });
 
@@ -69,18 +71,14 @@ function createRequestClient(baseURL: string) {
     },
   });
 
-  // response数据解构
-  client.addResponseInterceptor<HttpResponse>({
-    fulfilled: (response) => {
-      const { data: responseData, status } = response;
-
-      const { code, data } = responseData;
-      if (status >= 200 && status < 400 && code === 0) {
-        return data;
-      }
-      throw Object.assign({}, response, { response });
-    },
-  });
+  // 处理返回的响应数据格式
+  client.addResponseInterceptor(
+    defaultResponseInterceptor({
+      codeField: 'code',
+      dataField: 'data',
+      successCode: 0,
+    }),
+  );
 
   // token过期的处理
   client.addResponseInterceptor(
@@ -108,6 +106,8 @@ function createRequestClient(baseURL: string) {
   return client;
 }
 
-export const requestClient = createRequestClient(apiURL);
+export const requestClient = createRequestClient(apiURL, {
+  responseReturn: 'data',
+});
 
 export const baseRequestClient = new RequestClient({ baseURL: apiURL });
diff --git a/apps/vben5/apps/web-ele/src/bootstrap.ts b/apps/vben5/apps/web-ele/src/bootstrap.ts
index ad1dce0f9..b62094f28 100644
--- a/apps/vben5/apps/web-ele/src/bootstrap.ts
+++ b/apps/vben5/apps/web-ele/src/bootstrap.ts
@@ -1,6 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
+import { initTippy } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -18,6 +19,14 @@ import { router } from './router';
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   zIndex: 2000,
+  // });
   const app = createApp(App);
 
   // 注册Element Plus提供的v-loading指令
@@ -32,6 +41,9 @@ async function bootstrap(namespace: string) {
   // 安装权限指令
   registerAccessDirective(app);
 
+  // 初始化 tippy
+  initTippy(app);
+
   // 配置路由及路由守卫
   app.use(router);
 
diff --git a/apps/vben5/apps/web-ele/src/locales/index.ts b/apps/vben5/apps/web-ele/src/locales/index.ts
index 1f3e22c91..57b87dfdf 100644
--- a/apps/vben5/apps/web-ele/src/locales/index.ts
+++ b/apps/vben5/apps/web-ele/src/locales/index.ts
@@ -1,7 +1,9 @@
-import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
 import type { Language } from 'element-plus/es/locale';
 
 import type { App } from 'vue';
+
+import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
+
 import { ref } from 'vue';
 
 import {
diff --git a/apps/vben5/apps/web-ele/src/router/routes/core.ts b/apps/vben5/apps/web-ele/src/router/routes/core.ts
index fe030a9a2..7218da228 100644
--- a/apps/vben5/apps/web-ele/src/router/routes/core.ts
+++ b/apps/vben5/apps/web-ele/src/router/routes/core.ts
@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
 
-import { AuthPageLayout } from '#/layouts';
+import { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 import Login from '#/views/_core/authentication/login.vue';
 
@@ -21,13 +21,21 @@ const fallbackNotFoundRoute: RouteRecordRaw = {
 
 /** 基本路由，这些路由是必须存在的 */
 const coreRoutes: RouteRecordRaw[] = [
+  /**
+   * 根路由
+   * 使用基础布局，作为所有页面的父级容器，子级就不必配置BasicLayout。
+   * 此路由必须存在，且不应修改
+   */
   {
+    component: BasicLayout,
     meta: {
+      hideInBreadcrumb: true,
       title: 'Root',
     },
     name: 'Root',
     path: '/',
     redirect: DEFAULT_HOME_PATH,
+    children: [],
   },
   {
     component: AuthPageLayout,
diff --git a/apps/vben5/apps/web-ele/src/router/routes/modules/dashboard.ts b/apps/vben5/apps/web-ele/src/router/routes/modules/dashboard.ts
index 1bddab9db..5254dc65d 100644
--- a/apps/vben5/apps/web-ele/src/router/routes/modules/dashboard.ts
+++ b/apps/vben5/apps/web-ele/src/router/routes/modules/dashboard.ts
@@ -1,18 +1,16 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'lucide:layout-dashboard',
       order: -1,
       title: $t('page.dashboard.title'),
     },
     name: 'Dashboard',
-    path: '/',
+    path: '/dashboard',
     children: [
       {
         name: 'Analytics',
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 90cc2f11c..907ea3f45 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
@@ -1,11 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'ic:baseline-view-in-ar',
       keepAlive: true,
diff --git a/apps/vben5/apps/web-ele/src/router/routes/modules/vben.ts b/apps/vben5/apps/web-ele/src/router/routes/modules/vben.ts
index 2cfef5498..20fbc96c0 100644
--- a/apps/vben5/apps/web-ele/src/router/routes/modules/vben.ts
+++ b/apps/vben5/apps/web-ele/src/router/routes/modules/vben.ts
@@ -9,30 +9,20 @@ import {
 } from '@vben/constants';
 import { SvgAntdvLogoIcon } from '@vben/icons';
 
-import { BasicLayout, IFrameView } from '#/layouts';
+import { IFrameView } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       badgeType: 'dot',
       icon: VBEN_LOGO_URL,
-      order: 9999,
+      order: 9998,
       title: $t('demos.vben.title'),
     },
     name: 'VbenProject',
     path: '/vben-admin',
     children: [
-      {
-        name: 'VbenAbout',
-        path: '/vben-admin/about',
-        component: () => import('#/views/_core/about/index.vue'),
-        meta: {
-          icon: 'lucide:copyright',
-          title: $t('demos.vben.about'),
-        },
-      },
       {
         name: 'VbenDocument',
         path: '/vben-admin/document',
@@ -77,6 +67,16 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    name: 'VbenAbout',
+    path: '/vben-admin/about',
+    component: () => import('#/views/_core/about/index.vue'),
+    meta: {
+      icon: 'lucide:copyright',
+      title: $t('demos.vben.about'),
+      order: 9999,
+    },
+  },
 ];
 
 export default routes;
diff --git a/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue b/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
index fadfc917c..f1f0b232a 100644
--- a/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue b/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue
index 30c4265df..190fb41f4 100644
--- a/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue b/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue
index 260520b84..02f509123 100644
--- a/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue b/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue
index e0d0aab5e..0915c7af7 100644
--- a/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue b/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
index 7e1f14ee6..7e0f10133 100644
--- a/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/vben5/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-ele/src/views/dashboard/analytics/index.vue b/apps/vben5/apps/web-ele/src/views/dashboard/analytics/index.vue
index 00b34df1e..5e3d6d285 100644
--- a/apps/vben5/apps/web-ele/src/views/dashboard/analytics/index.vue
+++ b/apps/vben5/apps/web-ele/src/views/dashboard/analytics/index.vue
@@ -15,10 +15,10 @@ import {
 } from '@vben/icons';
 
 import AnalyticsTrends from './analytics-trends.vue';
-import AnalyticsVisits from './analytics-visits.vue';
 import AnalyticsVisitsData from './analytics-visits-data.vue';
 import AnalyticsVisitsSales from './analytics-visits-sales.vue';
 import AnalyticsVisitsSource from './analytics-visits-source.vue';
+import AnalyticsVisits from './analytics-visits.vue';
 
 const overviewItems: AnalysisOverviewItem[] = [
   {
diff --git a/apps/vben5/apps/web-naive/package.json b/apps/vben5/apps/web-naive/package.json
index 5bd3b1a74..c649252d2 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.5.1",
+  "version": "5.5.3",
   "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 545a61994..a84159005 100644
--- a/apps/vben5/apps/web-naive/src/adapter/component/index.ts
+++ b/apps/vben5/apps/web-naive/src/adapter/component/index.ts
@@ -3,9 +3,10 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
+import type { Component, SetupContext } from 'vue';
+
 import type { BaseFormComponentType } from '@vben/common-ui';
 
-import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
diff --git a/apps/vben5/apps/web-naive/src/api/request.ts b/apps/vben5/apps/web-naive/src/api/request.ts
index 72056e198..f8fbacc0b 100644
--- a/apps/vben5/apps/web-naive/src/api/request.ts
+++ b/apps/vben5/apps/web-naive/src/api/request.ts
@@ -1,12 +1,13 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { HttpResponse } from '@vben/request';
+import type { RequestClientOptions } from '@vben/request';
 
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
   authenticateResponseInterceptor,
+  defaultResponseInterceptor,
   errorMessageResponseInterceptor,
   RequestClient,
 } from '@vben/request';
@@ -19,8 +20,9 @@ import { refreshTokenApi } from './core';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
-function createRequestClient(baseURL: string) {
+function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
+    ...options,
     baseURL,
   });
 
@@ -68,18 +70,14 @@ function createRequestClient(baseURL: string) {
     },
   });
 
-  // response数据解构
-  client.addResponseInterceptor<HttpResponse>({
-    fulfilled: (response) => {
-      const { data: responseData, status } = response;
-
-      const { code, data } = responseData;
-      if (status >= 200 && status < 400 && code === 0) {
-        return data;
-      }
-      throw Object.assign({}, response, { response });
-    },
-  });
+  // 处理返回的响应数据格式
+  client.addResponseInterceptor(
+    defaultResponseInterceptor({
+      codeField: 'code',
+      dataField: 'data',
+      successCode: 0,
+    }),
+  );
 
   // token过期的处理
   client.addResponseInterceptor(
@@ -107,6 +105,8 @@ function createRequestClient(baseURL: string) {
   return client;
 }
 
-export const requestClient = createRequestClient(apiURL);
+export const requestClient = createRequestClient(apiURL, {
+  responseReturn: 'data',
+});
 
 export const baseRequestClient = new RequestClient({ baseURL: apiURL });
diff --git a/apps/vben5/apps/web-naive/src/bootstrap.ts b/apps/vben5/apps/web-naive/src/bootstrap.ts
index fc7f961d6..a423bff4d 100644
--- a/apps/vben5/apps/web-naive/src/bootstrap.ts
+++ b/apps/vben5/apps/web-naive/src/bootstrap.ts
@@ -1,9 +1,11 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
+import { initTippy } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
+import '@vben/styles/naive';
 
 import { useTitle } from '@vueuse/core';
 
@@ -16,6 +18,16 @@ import { router } from './router';
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   initComponentAdapter();
+
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   // zIndex: 2000,
+  // });
+
   const app = createApp(App);
 
   // 国际化 i18n 配置
@@ -27,6 +39,9 @@ async function bootstrap(namespace: string) {
   // 安装权限指令
   registerAccessDirective(app);
 
+  // 初始化 tippy
+  initTippy(app);
+
   // 配置路由及路由守卫
   app.use(router);
 
diff --git a/apps/vben5/apps/web-naive/src/locales/index.ts b/apps/vben5/apps/web-naive/src/locales/index.ts
index 3d77913ad..58f63c10d 100644
--- a/apps/vben5/apps/web-naive/src/locales/index.ts
+++ b/apps/vben5/apps/web-naive/src/locales/index.ts
@@ -1,7 +1,7 @@
-import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
-
 import type { App } from 'vue';
 
+import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
+
 import {
   $t,
   setupI18n as coreSetup,
diff --git a/apps/vben5/apps/web-naive/src/router/routes/core.ts b/apps/vben5/apps/web-naive/src/router/routes/core.ts
index fe030a9a2..7218da228 100644
--- a/apps/vben5/apps/web-naive/src/router/routes/core.ts
+++ b/apps/vben5/apps/web-naive/src/router/routes/core.ts
@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
 
-import { AuthPageLayout } from '#/layouts';
+import { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 import Login from '#/views/_core/authentication/login.vue';
 
@@ -21,13 +21,21 @@ const fallbackNotFoundRoute: RouteRecordRaw = {
 
 /** 基本路由，这些路由是必须存在的 */
 const coreRoutes: RouteRecordRaw[] = [
+  /**
+   * 根路由
+   * 使用基础布局，作为所有页面的父级容器，子级就不必配置BasicLayout。
+   * 此路由必须存在，且不应修改
+   */
   {
+    component: BasicLayout,
     meta: {
+      hideInBreadcrumb: true,
       title: 'Root',
     },
     name: 'Root',
     path: '/',
     redirect: DEFAULT_HOME_PATH,
+    children: [],
   },
   {
     component: AuthPageLayout,
diff --git a/apps/vben5/apps/web-naive/src/router/routes/modules/dashboard.ts b/apps/vben5/apps/web-naive/src/router/routes/modules/dashboard.ts
index 1bddab9db..5254dc65d 100644
--- a/apps/vben5/apps/web-naive/src/router/routes/modules/dashboard.ts
+++ b/apps/vben5/apps/web-naive/src/router/routes/modules/dashboard.ts
@@ -1,18 +1,16 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'lucide:layout-dashboard',
       order: -1,
       title: $t('page.dashboard.title'),
     },
     name: 'Dashboard',
-    path: '/',
+    path: '/dashboard',
     children: [
       {
         name: 'Analytics',
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 d0631cb53..5e49ffa01 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
@@ -1,11 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'ic:baseline-view-in-ar',
       keepAlive: true,
diff --git a/apps/vben5/apps/web-naive/src/router/routes/modules/vben.ts b/apps/vben5/apps/web-naive/src/router/routes/modules/vben.ts
index 44461a7fd..169de855b 100644
--- a/apps/vben5/apps/web-naive/src/router/routes/modules/vben.ts
+++ b/apps/vben5/apps/web-naive/src/router/routes/modules/vben.ts
@@ -9,30 +9,20 @@ import {
 } from '@vben/constants';
 import { SvgAntdvLogoIcon } from '@vben/icons';
 
-import { BasicLayout, IFrameView } from '#/layouts';
+import { IFrameView } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       badgeType: 'dot',
       icon: VBEN_LOGO_URL,
-      order: 9999,
+      order: 9998,
       title: $t('demos.vben.title'),
     },
     name: 'VbenProject',
     path: '/vben-admin',
     children: [
-      {
-        name: 'VbenAbout',
-        path: '/vben-admin/about',
-        component: () => import('#/views/_core/about/index.vue'),
-        meta: {
-          icon: 'lucide:copyright',
-          title: $t('demos.vben.about'),
-        },
-      },
       {
         name: 'VbenDocument',
         path: '/vben-admin/document',
@@ -77,6 +67,16 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    name: 'VbenAbout',
+    path: '/vben-admin/about',
+    component: () => import('#/views/_core/about/index.vue'),
+    meta: {
+      icon: 'lucide:copyright',
+      title: $t('demos.vben.about'),
+      order: 9999,
+    },
+  },
 ];
 
 export default routes;
diff --git a/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue b/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue
index fadfc917c..f1f0b232a 100644
--- a/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits-data.vue b/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits-data.vue
index 30c4265df..190fb41f4 100644
--- a/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits-sales.vue b/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits-sales.vue
index 260520b84..02f509123 100644
--- a/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits-source.vue b/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits-source.vue
index e0d0aab5e..0915c7af7 100644
--- a/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue b/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue
index 7e1f14ee6..7e0f10133 100644
--- a/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/vben5/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/apps/web-naive/src/views/dashboard/analytics/index.vue b/apps/vben5/apps/web-naive/src/views/dashboard/analytics/index.vue
index 00b34df1e..5e3d6d285 100644
--- a/apps/vben5/apps/web-naive/src/views/dashboard/analytics/index.vue
+++ b/apps/vben5/apps/web-naive/src/views/dashboard/analytics/index.vue
@@ -15,10 +15,10 @@ import {
 } from '@vben/icons';
 
 import AnalyticsTrends from './analytics-trends.vue';
-import AnalyticsVisits from './analytics-visits.vue';
 import AnalyticsVisitsData from './analytics-visits-data.vue';
 import AnalyticsVisitsSales from './analytics-visits-sales.vue';
 import AnalyticsVisitsSource from './analytics-visits-source.vue';
+import AnalyticsVisits from './analytics-visits.vue';
 
 const overviewItems: AnalysisOverviewItem[] = [
   {
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
index 7d04ff4d9..fe26624cc 100644
--- a/apps/vben5/apps/web-naive/src/views/demos/form/basic.vue
+++ b/apps/vben5/apps/web-naive/src/views/demos/form/basic.vue
@@ -40,6 +40,7 @@ const [Form, formApi] = useVbenForm({
       fieldName: 'api',
       // 界面显示的label
       label: 'ApiSelect',
+      rules: 'required',
     },
     {
       component: 'ApiTreeSelect',
@@ -56,16 +57,19 @@ const [Form, formApi] = useVbenForm({
       fieldName: 'apiTree',
       // 界面显示的label
       label: 'ApiTreeSelect',
+      rules: 'required',
     },
     {
       component: 'Input',
       fieldName: 'string',
       label: 'String',
+      rules: 'required',
     },
     {
       component: 'InputNumber',
       fieldName: 'number',
       label: 'Number',
+      rules: 'required',
     },
     {
       component: 'RadioGroup',
@@ -80,6 +84,7 @@ const [Form, formApi] = useVbenForm({
           { value: 'E', label: 'E' },
         ],
       },
+      rules: 'selectRequired',
     },
     {
       component: 'RadioGroup',
@@ -94,9 +99,9 @@ const [Form, formApi] = useVbenForm({
           { value: 'C', label: '选项C' },
           { value: 'D', label: '选项D' },
           { value: 'E', label: '选项E' },
-          { value: 'F', label: '选项F' },
         ],
       },
+      rules: 'selectRequired',
     },
     {
       component: 'CheckboxGroup',
@@ -109,11 +114,22 @@ const [Form, formApi] = useVbenForm({
           { value: 'C', label: '选项C' },
         ],
       },
+      rules: 'selectRequired',
     },
     {
       component: 'DatePicker',
       fieldName: 'date',
       label: 'Date',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'textArea',
+      label: 'TextArea',
+      componentProps: {
+        type: 'textarea',
+      },
+      rules: 'required',
     },
   ],
 });
diff --git a/apps/vben5/apps/web-naive/src/views/demos/naive/index.vue b/apps/vben5/apps/web-naive/src/views/demos/naive/index.vue
index 41d55109e..f72cdb20f 100644
--- a/apps/vben5/apps/web-naive/src/views/demos/naive/index.vue
+++ b/apps/vben5/apps/web-naive/src/views/demos/naive/index.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import type { NotificationType } from 'naive-ui';
+
 import { Page } from '@vben/common-ui';
 
-import { type NotificationType } from 'naive-ui';
 import { NButton, NCard, NSpace, useMessage, useNotification } from 'naive-ui';
 
 const notification = useNotification();
diff --git a/apps/vben5/docs/.vitepress/components/preview-group.vue b/apps/vben5/docs/.vitepress/components/preview-group.vue
index c8c6e83c7..e712157c2 100644
--- a/apps/vben5/docs/.vitepress/components/preview-group.vue
+++ b/apps/vben5/docs/.vitepress/components/preview-group.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { SetupContext } from 'vue';
+
 import { computed, ref, useSlots } from 'vue';
 
 import { VbenTooltip } from '@vben-core/shadcn-ui';
@@ -25,7 +27,7 @@ const props = withDefaults(
 
 const open = ref(false);
 
-const slots = useSlots();
+const slots: SetupContext['slots'] = useSlots();
 
 const tabs = computed(() => {
   return props.files.map((file) => {
diff --git a/apps/vben5/docs/.vitepress/config/en.mts b/apps/vben5/docs/.vitepress/config/en.mts
index 3f7dd4fa8..a74a7e5fb 100644
--- a/apps/vben5/docs/.vitepress/config/en.mts
+++ b/apps/vben5/docs/.vitepress/config/en.mts
@@ -1,4 +1,6 @@
-import { type DefaultTheme, defineConfig } from 'vitepress';
+import type { DefaultTheme } from 'vitepress';
+
+import { defineConfig } from 'vitepress';
 
 import { version } from '../../../package.json';
 
diff --git a/apps/vben5/docs/.vitepress/config/zh.mts b/apps/vben5/docs/.vitepress/config/zh.mts
index dff8ac280..ce544393a 100644
--- a/apps/vben5/docs/.vitepress/config/zh.mts
+++ b/apps/vben5/docs/.vitepress/config/zh.mts
@@ -1,4 +1,6 @@
-import { type DefaultTheme, defineConfig } from 'vitepress';
+import type { DefaultTheme } from 'vitepress';
+
+import { defineConfig } from 'vitepress';
 
 import { version } from '../../../package.json';
 
diff --git a/apps/vben5/docs/.vitepress/theme/components/site-layout.vue b/apps/vben5/docs/.vitepress/theme/components/site-layout.vue
index d643cae98..96427d055 100644
--- a/apps/vben5/docs/.vitepress/theme/components/site-layout.vue
+++ b/apps/vben5/docs/.vitepress/theme/components/site-layout.vue
@@ -10,7 +10,6 @@ import {
 
 // import { useAntdDesignTokens } from '@vben/hooks';
 // import { initPreferences } from '@vben/preferences';
-
 import { ConfigProvider, theme } from 'ant-design-vue';
 import mediumZoom from 'medium-zoom';
 import { useRoute } from 'vitepress';
diff --git a/apps/vben5/docs/package.json b/apps/vben5/docs/package.json
index 2d56a8ba5..ca04e8364 100644
--- a/apps/vben5/docs/package.json
+++ b/apps/vben5/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "private": true,
   "scripts": {
     "build": "vitepress build",
diff --git a/apps/vben5/docs/src/_env/adapter/component.ts b/apps/vben5/docs/src/_env/adapter/component.ts
index 1afa62174..ec3d0196c 100644
--- a/apps/vben5/docs/src/_env/adapter/component.ts
+++ b/apps/vben5/docs/src/_env/adapter/component.ts
@@ -3,9 +3,10 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
+import type { Component, SetupContext } from 'vue';
+
 import type { BaseFormComponentType } from '@vben/common-ui';
 
-import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
 import { globalShareState } from '@vben/common-ui';
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
index f275adfc2..caa9facf3 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-api-component.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-api-component.md
@@ -129,7 +129,8 @@ function fetchApi(): Promise<Record<string, any>> {
 
 | 属性名 | 描述 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| component | 欲包装的组件 | `Component` | - |
+| modelValue(v-model) | 当前值 | `any` | - |
+| component | 欲包装的组件（以下称为目标组件） | `Component` | - |
 | numberToString | 是否将value从数字转为string | `boolean` | `false` |
 | api | 获取数据的函数 | `(arg?: any) => Promise<OptionsItem[] \| Record<string, any>>` | - |
 | params | 传递给api的参数 | `Record<string, any>` | - |
@@ -137,16 +138,12 @@ function fetchApi(): Promise<Record<string, any>> {
 | labelField | label字段名 | `string` | `label` |
 | childrenField | 子级数据字段名，需要层级数据的组件可用 | `string` | `` |
 | valueField | value字段名 | `string` | `value` |
-| optionsPropName | 组件接收options数据的属性名称 | `string` | `options` |
-| modelPropName | 组件的双向绑定属性名，默认为modelValue。部分组件可能为value | `string` | `modelValue` |
+| 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` | - |
-
-```
-
-```
+| 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 7091570f1..61b7c9e59 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-drawer.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-drawer.md
@@ -54,6 +54,8 @@ Drawer 内的内容一般业务中，会比较复杂，所以我们可以将 dra
 
 - `VbenDrawer` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenDrawer参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
 - 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenDrawer`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onConfirm`，那么以内部的 `onConfirm` 为准。`onOpenChange`事件除外，内外都会触发。
+- 使用了`connectedComponent`参数时，可以配置`destroyOnClose`属性来决定当关闭弹窗时，是否要销毁`connectedComponent`组件（重新创建`connectedComponent`组件，这将会把其内部所有的变量、状态、数据等恢复到初始状态。）。
+- 如果抽屉的默认行为不符合你的预期，可以在`src\bootstrap.ts`中修改`setDefaultDrawerProps`的参数来设置默认的属性，如默认隐藏全屏按钮，修改默认ZIndex等。
 
 :::
 
@@ -75,12 +77,15 @@ const [Drawer, drawerApi] = useVbenDrawer({
 | 属性名 | 描述 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | appendToMain | 是否挂载到内容区域（默认挂载到body） | `boolean` | `false` |
+| connectedComponent | 连接另一个Modal组件 | `Component` | - |
+| destroyOnClose | 关闭时销毁`connectedComponent` | `boolean` | `false` |
 | title | 标题 | `string\|slot` | - |
 | titleTooltip | 标题提示信息 | `string\|slot` | - |
 | description | 描述信息 | `string\|slot` | - |
 | isOpen | 弹窗打开状态 | `boolean` | `false` |
 | loading | 弹窗加载状态 | `boolean` | `false` |
 | closable | 显示关闭按钮 | `boolean` | `true` |
+| closeIconPlacement | 关闭按钮位置 | `'left'\|'right'` | `right` |
 | modal | 显示遮罩 | `boolean` | `true` |
 | header | 显示header | `boolean` | `true` |
 | footer | 显示footer | `boolean\|slot` | `true` |
@@ -97,6 +102,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 | footerClass | modal底部区域的class | `string` | - |
 | headerClass | modal顶部区域的class | `string` | - |
 | zIndex | 抽屉的ZIndex层级 | `number` | `1000` |
+| overlayBlur | 遮罩模糊度 | `number` | - |
 
 ::: info appendToMain
 
@@ -108,12 +114,14 @@ const [Drawer, drawerApi] = useVbenDrawer({
 
 以下事件，只有在 `useVbenDrawer({onCancel:()=>{}})` 中传入才会生效。
 
-| 事件名 | 描述 | 类型 |
-| --- | --- | --- |
-| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` |
-| onCancel | 点击取消按钮触发 | `()=>void` |
-| onConfirm | 点击确认按钮触发 | `()=>void` |
-| onOpenChange | 关闭或者打开弹窗时触发 | `(isOpen:boolean)=>void` |
+| 事件名 | 描述 | 类型 | 版本限制 |
+| --- | --- | --- | --- |
+| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` | --- |
+| onCancel | 点击取消按钮触发 | `()=>void` | --- |
+| onClosed | 关闭动画播放完毕时触发 | `()=>void` | >5.5.2 |
+| onConfirm | 点击确认按钮触发 | `()=>void` | --- |
+| onOpenChange | 关闭或者打开弹窗时触发 | `(isOpen:boolean)=>void` | --- |
+| onOpened | 打开动画播放完毕时触发 | `()=>void` | >5.5.2 |
 
 ### Slots
 
@@ -124,14 +132,16 @@ const [Drawer, drawerApi] = useVbenDrawer({
 | default        | 默认插槽 - 弹窗内容 |
 | prepend-footer | 取消按钮左侧        |
 | append-footer  | 取消按钮右侧        |
+| close-icon     | 关闭按钮图标        |
+| extra          | 额外内容(标题右侧)  |
 
-### modalApi
+### drawerApi
 
-| 事件名 | 描述 | 类型 |
+| 方法 | 描述 | 类型 |
 | --- | --- | --- |
-| setState | 动态设置弹窗状态属性 | `setState(props) \| setState((prev)=>(props))` |
+| setState | 动态设置弹窗状态属性 | `(((prev: ModalState) => Partial<ModalState>)\| Partial<ModalState>)=>drawerApi` |
 | open | 打开弹窗 | `()=>void` |
 | close | 关闭弹窗 | `()=>void` |
-| setData | 设置共享数据 | `<T>(data:T)=>void` |
+| setData | 设置共享数据 | `<T>(data:T)=>drawerApi` |
 | getData | 获取共享数据 | `<T>()=>T` |
 | useStore | 获取可响应式状态 | - |
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 8d27c08d5..ecaae6f8d 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-form.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-form.md
@@ -316,12 +316,18 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | collapsed | 是否折叠，在`showCollapseButton`为`true`时生效 | `boolean` | `false` |
 | collapseTriggerResize | 折叠时，触发`resize`事件 | `boolean` | `false` |
 | collapsedRows | 折叠时保持的行数 | `number` | `1` |
-| fieldMappingTime | 用于将表单内时间区域组件的数组值映射成 2 个字段 | `[string, [string, string], string?][]` | - |
+| fieldMappingTime | 用于将表单内的数组值值映射成 2 个字段 | `[string, [string, string],Nullable<string>\|[string,string]\|((any,string)=>any)?][]` | - |
 | commonConfig | 表单项的通用配置，每个配置都会传递到每个表单项，表单项可覆盖 | `FormCommonConfig` | - |
 | schema | 表单项的每一项配置 | `FormSchema[]` | - |
 | submitOnEnter | 按下回车健时提交表单 | `boolean` | false |
 | submitOnChange | 字段值改变时提交表单(内部防抖，这个属性一般用于表格的搜索表单) | `boolean` | false |
 
+::: tip fieldMappingTime
+
+此属性用于将表单内的数组值映射成 2 个字段，它应当传入一个数组，数组的每一项是一个映射规则，规则的第一个成员是一个字符串，表示需要映射的字段名，第二个成员是一个数组，表示映射后的字段名，第三个成员是一个可选的格式掩码，用于格式化日期时间字段；也可以提供一个格式化函数（参数分别为当前值和当前字段名，返回格式化后的值）。如果明确地将格式掩码设为null，则原值映射而不进行格式化（适用于非日期时间字段）。例如：`[['timeRange', ['startTime', 'endTime'], 'YYYY-MM-DD']]`，`timeRange`应当是一个至少具有2个成员的数组类型的值。Form会将`timeRange`的值前两个值分别按照格式掩码`YYYY-MM-DD`格式化后映射到`startTime`和`endTime`字段上。每一项的第三个参数是一个可选的格式掩码，
+
+:::
+
 ### TS 类型说明
 
 ::: details ActionButtonOptions
@@ -341,7 +347,7 @@ export interface ActionButtonOptions {
   /** 是否显示 */
   show?: boolean;
   /** 按钮文本 */
-  text?: string;
+  content?: string;
   /** 任意属性 */
   [key: string]: any;
 }
@@ -406,6 +412,11 @@ export interface FormCommonConfig {
    * 所有表单项的label宽度
    */
   labelWidth?: number;
+  /**
+   * 所有表单项的model属性名。使用自定义组件时可通过此配置指定组件的model属性名。已经在modelPropNameMap中注册的组件不受此配置影响
+   * @default "modelValue"
+   */
+  modelPropName?: string;
   /**
    * 所有表单项的wrapper样式
    */
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 d6e3ef47f..e49196eed 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-modal.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-modal.md
@@ -60,6 +60,8 @@ Modal 内的内容一般业务中，会比较复杂，所以我们可以将 moda
 
 - `VbenModal` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenModal参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
 - 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenModal`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onConfirm`，那么以内部的 `onConfirm` 为准。`onOpenChange`事件除外，内外都会触发。
+- 使用了`connectedComponent`参数时，可以配置`destroyOnClose`属性来决定当关闭弹窗时，是否要销毁`connectedComponent`组件（重新创建`connectedComponent`组件，这将会把其内部所有的变量、状态、数据等恢复到初始状态。）。
+- 如果弹窗的默认行为不符合你的预期，可以在`src\bootstrap.ts`中修改`setDefaultModalProps`的参数来设置默认的属性，如默认隐藏全屏按钮，修改默认ZIndex等。
 
 :::
 
@@ -81,6 +83,8 @@ const [Modal, modalApi] = useVbenModal({
 | 属性名 | 描述 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | appendToMain | 是否挂载到内容区域（默认挂载到body） | `boolean` | `false` |
+| connectedComponent | 连接另一个Modal组件 | `Component` | - |
+| destroyOnClose | 关闭时销毁`connectedComponent` | `boolean` | `false` |
 | title | 标题 | `string\|slot` | - |
 | titleTooltip | 标题提示信息 | `string\|slot` | - |
 | description | 描述信息 | `string\|slot` | - |
@@ -108,6 +112,8 @@ const [Modal, modalApi] = useVbenModal({
 | headerClass | modal顶部区域的class | `string` | - |
 | bordered | 是否显示border | `boolean` | `false` |
 | zIndex | 弹窗的ZIndex层级 | `number` | `1000` |
+| overlayBlur | 遮罩模糊度 | `number` | - |
+| submitting | 标记为提交中，锁定弹窗当前状态 | `boolean` | `false` |
 
 ::: info appendToMain
 
@@ -121,7 +127,7 @@ const [Modal, modalApi] = useVbenModal({
 
 | 事件名 | 描述 | 类型 | 版本号 |
 | --- | --- | --- | --- |
-| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` |  |
+| onBeforeClose | 关闭前触发，返回 `false`或者被`reject`则禁止关闭 | `()=>Promise<boolean>\|boolean` | >5.5.2支持Promise |
 | onCancel | 点击取消按钮触发 | `()=>void` |  |
 | onClosed | 关闭动画播放完毕时触发 | `()=>void` | >5.4.3 |
 | onConfirm | 点击确认按钮触发 | `()=>void` |  |
@@ -140,11 +146,18 @@ const [Modal, modalApi] = useVbenModal({
 
 ### modalApi
 
-| 事件名 | 描述 | 类型 |
-| --- | --- | --- |
-| setState | 动态设置弹窗状态属性 | `setState(props) \| setState((prev)=>(props))` |
-| open | 打开弹窗 | `()=>void` |
-| close | 关闭弹窗 | `()=>void` |
-| setData | 设置共享数据 | `<T>(data:T)=>void` |
-| getData | 获取共享数据 | `<T>()=>T` |
-| useStore | 获取可响应式状态 | - |
+| 方法 | 描述 | 类型 | 版本 |
+| --- | --- | --- | --- |
+| setState | 动态设置弹窗状态属性 | `(((prev: ModalState) => Partial<ModalState>)\| Partial<ModalState>)=>modalApi` | - |
+| open | 打开弹窗 | `()=>void` | - |
+| close | 关闭弹窗 | `()=>void` | - |
+| setData | 设置共享数据 | `<T>(data:T)=>modalApi` | - |
+| getData | 获取共享数据 | `<T>()=>T` | - |
+| useStore | 获取可响应式状态 | - | - |
+| lock | 将弹窗标记为提交中，锁定当前状态 | `(isLock:boolean)=>modalApi` | >5.5.2 |
+
+::: info lock
+
+`lock`方法用于锁定当前弹窗的状态，一般用于提交数据的过程中防止用户重复提交或者弹窗被意外关闭、表单数据被改变等等。当处于锁定状态时，弹窗的确认按钮会变为loading状态，同时禁用确认按钮、隐藏关闭按钮、禁止ESC或者点击遮罩等方式关闭弹窗、开启弹窗的spinner动画以遮挡弹窗内容。调用`close`方法关闭处于锁定状态的弹窗时，会自动解锁。
+
+:::
diff --git a/apps/vben5/docs/src/demos/vben-drawer/dynamic/index.vue b/apps/vben5/docs/src/demos/vben-drawer/dynamic/index.vue
index ad7e6565d..95464023a 100644
--- a/apps/vben5/docs/src/demos/vben-drawer/dynamic/index.vue
+++ b/apps/vben5/docs/src/demos/vben-drawer/dynamic/index.vue
@@ -13,8 +13,7 @@ function open() {
 }
 
 function handleUpdateTitle() {
-  drawerApi.setState({ title: '外部动态标题' });
-  drawerApi.open();
+  drawerApi.setState({ title: '外部动态标题' }).open();
 }
 </script>
 
diff --git a/apps/vben5/docs/src/demos/vben-drawer/shared-data/index.vue b/apps/vben5/docs/src/demos/vben-drawer/shared-data/index.vue
index 04885f157..fef6cb058 100644
--- a/apps/vben5/docs/src/demos/vben-drawer/shared-data/index.vue
+++ b/apps/vben5/docs/src/demos/vben-drawer/shared-data/index.vue
@@ -9,11 +9,12 @@ const [Drawer, drawerApi] = useVbenDrawer({
 });
 
 function open() {
-  drawerApi.setData({
-    content: '外部传递的数据 content',
-    payload: '外部传递的数据 payload',
-  });
-  drawerApi.open();
+  drawerApi
+    .setData({
+      content: '外部传递的数据 content',
+      payload: '外部传递的数据 payload',
+    })
+    .open();
 }
 </script>
 
diff --git a/apps/vben5/docs/src/demos/vben-modal/dynamic/index.vue b/apps/vben5/docs/src/demos/vben-modal/dynamic/index.vue
index 718e532bc..1b0255459 100644
--- a/apps/vben5/docs/src/demos/vben-modal/dynamic/index.vue
+++ b/apps/vben5/docs/src/demos/vben-modal/dynamic/index.vue
@@ -13,8 +13,7 @@ function openModal() {
 }
 
 function handleUpdateTitle() {
-  modalApi.setState({ title: '外部动态标题' });
-  modalApi.open();
+  modalApi.setState({ title: '外部动态标题' }).open();
 }
 </script>
 
diff --git a/apps/vben5/docs/src/demos/vben-modal/shared-data/index.vue b/apps/vben5/docs/src/demos/vben-modal/shared-data/index.vue
index 58c35e24d..91afeb70d 100644
--- a/apps/vben5/docs/src/demos/vben-modal/shared-data/index.vue
+++ b/apps/vben5/docs/src/demos/vben-modal/shared-data/index.vue
@@ -9,11 +9,12 @@ const [Modal, modalApi] = useVbenModal({
 });
 
 function openModal() {
-  modalApi.setData({
-    content: '外部传递的数据 content',
-    payload: '外部传递的数据 payload',
-  });
-  modalApi.open();
+  modalApi
+    .setData({
+      content: '外部传递的数据 content',
+      payload: '外部传递的数据 payload',
+    })
+    .open();
 }
 </script>
 
diff --git a/apps/vben5/docs/src/en/guide/essentials/route.md b/apps/vben5/docs/src/en/guide/essentials/route.md
index bef40d691..8fb0a6d1c 100644
--- a/apps/vben5/docs/src/en/guide/essentials/route.md
+++ b/apps/vben5/docs/src/en/guide/essentials/route.md
@@ -73,7 +73,6 @@ import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       badgeType: 'dot',
       badgeVariants: 'destructive',
@@ -124,7 +123,6 @@ import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'ic:baseline-view-in-ar',
       keepAlive: true,
@@ -249,7 +247,6 @@ import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'mdi:home',
       title: $t('page.home.title'),
diff --git a/apps/vben5/docs/src/guide/essentials/route.md b/apps/vben5/docs/src/guide/essentials/route.md
index 0eb74aea4..d8a938dda 100644
--- a/apps/vben5/docs/src/guide/essentials/route.md
+++ b/apps/vben5/docs/src/guide/essentials/route.md
@@ -62,12 +62,10 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { VBEN_LOGO_URL } from '@vben/constants';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       badgeType: 'dot',
       badgeVariants: 'destructive',
@@ -103,7 +101,6 @@ export default routes;
 
 ::: tip
 
-- 多级路由的父级路由无需设置 `component` 属性，只需设置 `children` 属性即可。除非你真的需要在父级路由嵌套下显示内容。
 - 如果没有特殊情况，父级路由的 `redirect` 属性，不需要指定，默认会指向第一个子路由。
 
 :::
@@ -113,12 +110,10 @@ export default routes;
 ```ts
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'ic:baseline-view-in-ar',
       keepAlive: true,
@@ -238,12 +233,10 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { VBEN_LOGO_URL } from '@vben/constants';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'mdi:home',
       title: $t('page.home.title'),
@@ -400,6 +393,10 @@ interface RouteMeta {
    * 菜单可以看到，但是访问会被重定向到403
    */
   menuVisibleWithForbidden?: boolean;
+  /**
+   * 当前路由不使用基础布局（仅在顶级生效）
+   */
+  noBasicLayout?: boolean;
   /**
    * 在新窗口打开
    */
@@ -584,6 +581,13 @@ _注意:_ 排序仅针对一级菜单有效，二级菜单的排序需要在对
 
 用于配置页面的菜单参数，会在菜单中传递给页面。
 
+### noBasicLayout
+
+- 类型：`boolean`
+- 默认值：`false`
+
+用于配置当前路由不使用基础布局，仅在顶级时生效。默认情况下，所有的路由都会被包裹在基础布局中（包含顶部以及侧边等导航部件），如果你的页面不需要这些部件，可以设置 `noBasicLayout` 为 `true`。
+
 ## 路由刷新
 
 路由刷新方式如下：
diff --git a/apps/vben5/docs/src/guide/essentials/server.md b/apps/vben5/docs/src/guide/essentials/server.md
index 74a45d2ee..fedfbae25 100644
--- a/apps/vben5/docs/src/guide/essentials/server.md
+++ b/apps/vben5/docs/src/guide/essentials/server.md
@@ -231,19 +231,17 @@ function createRequestClient(baseURL: string) {
     },
   });
 
-  // response数据解构
-  client.addResponseInterceptor<HttpResponse>({
-    fulfilled: (response) => {
-      const { data: responseData, status } = response;
-
-      const { code, data } = responseData;
-
-      if (status >= 200 && status < 400 && code === 0) {
-        return data;
-      }
-      throw Object.assign({}, response, { response });
-    },
-  });
+  // 处理返回的响应数据格式。会根据responseReturn指定的类型返回对应的数据
+  client.addResponseInterceptor(
+    defaultResponseInterceptor({
+      // 指定接口返回的数据中的 code 字段名
+      codeField: 'code',
+      // 指定接口返回的数据中装载了主要数据的字段名
+      dataField: 'data',
+      // 请求成功的 code 值，如果接口返回的 code 等于 successCode 则会认为是成功的请求
+      successCode: 0,
+    }),
+  );
 
   // token过期的处理
   client.addResponseInterceptor(
diff --git a/apps/vben5/docs/src/guide/in-depth/access.md b/apps/vben5/docs/src/guide/in-depth/access.md
index c0c4bc991..be7d2ba0a 100644
--- a/apps/vben5/docs/src/guide/in-depth/access.md
+++ b/apps/vben5/docs/src/guide/in-depth/access.md
@@ -296,7 +296,7 @@ const { hasAccessByRoles } = useAccess();
 
 #### 指令方式
 
-> 指令支持绑定单个或多个权限码。单个时可以直接传入字符串或数组中包含一个权限码，多个权限码则传入数组。
+> 指令支持绑定单个或多个角色。单个时可以直接传入字符串或数组中包含一个角色，多个角色均可访问则传入数组。
 
 ```vue
 <template>
diff --git a/apps/vben5/docs/src/guide/introduction/quick-start.md b/apps/vben5/docs/src/guide/introduction/quick-start.md
index 747c52483..79410895f 100644
--- a/apps/vben5/docs/src/guide/introduction/quick-start.md
+++ b/apps/vben5/docs/src/guide/introduction/quick-start.md
@@ -67,7 +67,7 @@ pnpm install
 ::: tip 注意
 
 - 项目只支持使用 `pnpm` 进行依赖安装，默认会使用 `corepack` 来安装指定版本的 `pnpm`。:
-- 如果你的网络环境无法访问npm源，你可以设置系统的环境变量`COREPACK_REGISTRY=https://registry.npmmirror.com`，然后再执行`pnpm install`。
+- 如果你的网络环境无法访问npm源，你可以设置系统的环境变量`COREPACK_NPM_REGISTRY=https://registry.npmmirror.com`，然后再执行`pnpm install`。
 - 如果你不想使用`corepack`，你需要禁用`corepack`，然后使用你自己的`pnpm`进行安装。
 
 :::
diff --git a/apps/vben5/internal/lint-configs/commitlint-config/package.json b/apps/vben5/internal/lint-configs/commitlint-config/package.json
index 01b43088c..a1645bb77 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.5.1",
+  "version": "5.5.3",
   "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/import.ts b/apps/vben5/internal/lint-configs/eslint-config/src/configs/import.ts
index 67a08feaf..ce6cf65d9 100644
--- a/apps/vben5/internal/lint-configs/eslint-config/src/configs/import.ts
+++ b/apps/vben5/internal/lint-configs/eslint-config/src/configs/import.ts
@@ -10,6 +10,7 @@ export async function importPluginConfig(): Promise<Linter.Config[]> {
         import: pluginImport,
       },
       rules: {
+        'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
         'import/first': 'error',
         'import/newline-after-import': 'error',
         'import/no-duplicates': 'error',
diff --git a/apps/vben5/internal/lint-configs/eslint-config/src/configs/javascript.ts b/apps/vben5/internal/lint-configs/eslint-config/src/configs/javascript.ts
index 0d87c1ba1..f6b767fec 100644
--- a/apps/vben5/internal/lint-configs/eslint-config/src/configs/javascript.ts
+++ b/apps/vben5/internal/lint-configs/eslint-config/src/configs/javascript.ts
@@ -1,6 +1,5 @@
 import type { Linter } from 'eslint';
 
-// @ts-expect-error - no types
 import js from '@eslint/js';
 import pluginUnusedImports from 'eslint-plugin-unused-imports';
 import globals from 'globals';
diff --git a/apps/vben5/internal/lint-configs/eslint-config/src/configs/perfectionist.ts b/apps/vben5/internal/lint-configs/eslint-config/src/configs/perfectionist.ts
index 1b17b30f3..d4fd0bb8c 100644
--- a/apps/vben5/internal/lint-configs/eslint-config/src/configs/perfectionist.ts
+++ b/apps/vben5/internal/lint-configs/eslint-config/src/configs/perfectionist.ts
@@ -1,8 +1,13 @@
 import type { Linter } from 'eslint';
 
-import perfectionistPlugin from 'eslint-plugin-perfectionist';
+import { interopDefault } from '../util';
 
 export async function perfectionist(): Promise<Linter.Config[]> {
+  const perfectionistPlugin = await interopDefault(
+    // @ts-expect-error - no types
+    import('eslint-plugin-perfectionist'),
+  );
+
   return [
     perfectionistPlugin.configs['recommended-natural'],
     {
@@ -19,21 +24,28 @@ export async function perfectionist(): Promise<Linter.Config[]> {
           {
             customGroups: {
               type: {
-                vben: 'vben',
-                vue: 'vue',
+                'vben-core-type': ['^@vben-core/.+'],
+                'vben-type': ['^@vben/.+'],
+                'vue-type': ['^vue$', '^vue-.+', '^@vue/.+'],
               },
               value: {
-                vben: ['@vben*', '@vben/**/**', '@vben-core/**/**'],
-                vue: ['vue', 'vue-*', '@vue*'],
+                vben: ['^@vben/.+'],
+                'vben-core': ['^@vben-core/.+'],
+                vue: ['^vue$', '^vue-.+', '^@vue/.+'],
               },
             },
+            environment: 'node',
             groups: [
               ['external-type', 'builtin-type', 'type'],
+              'vue-type',
+              'vben-type',
+              'vben-core-type',
               ['parent-type', 'sibling-type', 'index-type'],
               ['internal-type'],
               'builtin',
               'vue',
               'vben',
+              'vben-core',
               'external',
               'internal',
               ['parent', 'sibling', 'index'],
@@ -43,12 +55,13 @@ export async function perfectionist(): Promise<Linter.Config[]> {
               'object',
               'unknown',
             ],
-            internalPattern: ['#*', '#*/**'],
+            internalPattern: ['^#/.+'],
             newlinesBetween: 'always',
             order: 'asc',
             type: 'natural',
           },
         ],
+        'perfectionist/sort-modules': 'off',
         'perfectionist/sort-named-exports': [
           'error',
           {
@@ -67,42 +80,6 @@ export async function perfectionist(): Promise<Linter.Config[]> {
             groups: ['unknown', 'items', 'list', 'children'],
             ignorePattern: ['children'],
             order: 'asc',
-            partitionByComment: 'Part:**',
-            type: 'natural',
-          },
-        ],
-        'perfectionist/sort-vue-attributes': [
-          'error',
-          {
-            // Based on: https://vuejs.org/style-guide/rules-recommended.html#element-attribute-order
-            customGroups: {
-              /* eslint-disable perfectionist/sort-objects */
-              DEFINITION: '*(is|:is|v-is)',
-              LIST_RENDERING: 'v-for',
-              CONDITIONALS: 'v-*(else-if|if|else|show|cloak)',
-              RENDER_MODIFIERS: 'v-*(pre|once)',
-              GLOBAL: '*(:id|id)',
-              UNIQUE: '*(ref|key|:ref|:key)',
-              SLOT: '*(v-slot|slot)',
-              TWO_WAY_BINDING: '*(v-model|v-model:*)',
-              // OTHER_DIRECTIVES e.g. 'v-custom-directive'
-              EVENTS: '*(v-on|@*)',
-              CONTENT: 'v-*(html|text)',
-              /* eslint-enable perfectionist/sort-objects */
-            },
-            groups: [
-              'DEFINITION',
-              'LIST_RENDERING',
-              'CONDITIONALS',
-              'RENDER_MODIFIERS',
-              'GLOBAL',
-              'UNIQUE',
-              'SLOT',
-              'TWO_WAY_BINDING',
-              'unknown',
-              'EVENTS',
-              'CONTENT',
-            ],
             type: 'natural',
           },
         ],
diff --git a/apps/vben5/internal/lint-configs/stylelint-config/package.json b/apps/vben5/internal/lint-configs/stylelint-config/package.json
index 64815741f..da7f4e8d1 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.5.1",
+  "version": "5.5.3",
   "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 9412656a9..2ad95772b 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.5.1",
+  "version": "5.5.3",
   "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/src/index.ts b/apps/vben5/internal/node-utils/src/index.ts
index 2e39ccff6..963cb8756 100644
--- a/apps/vben5/internal/node-utils/src/index.ts
+++ b/apps/vben5/internal/node-utils/src/index.ts
@@ -2,7 +2,7 @@ export * from './constants';
 export * from './date';
 export * from './fs';
 export * from './git';
-export { add as gitAdd, getStagedFiles } from './git';
+export { getStagedFiles, add as gitAdd } from './git';
 export { generatorContentHash } from './hash';
 export * from './monorepo';
 export { toPosixPath } from './path';
diff --git a/apps/vben5/internal/node-utils/src/spinner.ts b/apps/vben5/internal/node-utils/src/spinner.ts
index f07cc2567..13ad6a426 100644
--- a/apps/vben5/internal/node-utils/src/spinner.ts
+++ b/apps/vben5/internal/node-utils/src/spinner.ts
@@ -1,4 +1,6 @@
-import ora, { type Ora } from 'ora';
+import type { Ora } from 'ora';
+
+import ora from 'ora';
 
 interface SpinnerOptions {
   failedText?: string;
diff --git a/apps/vben5/internal/tailwind-config/package.json b/apps/vben5/internal/tailwind-config/package.json
index 26da63b48..9737ab338 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.5.1",
+  "version": "5.5.3",
   "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/src/index.ts b/apps/vben5/internal/tailwind-config/src/index.ts
index dafaaf91e..93332a3f4 100644
--- a/apps/vben5/internal/tailwind-config/src/index.ts
+++ b/apps/vben5/internal/tailwind-config/src/index.ts
@@ -130,7 +130,6 @@ export default {
     enterAnimationPlugin,
   ],
   prefix: '',
-  safelist: ['dark'],
   theme: {
     container: {
       center: true,
@@ -202,6 +201,7 @@ export default {
       },
     },
   },
+  safelist: ['dark'],
 } as Config;
 
 function createColorsPalette(name: string) {
diff --git a/apps/vben5/internal/tsconfig/package.json b/apps/vben5/internal/tsconfig/package.json
index d935b671c..efeef619c 100644
--- a/apps/vben5/internal/tsconfig/package.json
+++ b/apps/vben5/internal/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tsconfig",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "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 60955a1d4..708d519cd 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.5.1",
+  "version": "5.5.3",
   "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/plugins/importmap.ts b/apps/vben5/internal/vite-config/src/plugins/importmap.ts
index c6154c9ea..0ccda99f8 100644
--- a/apps/vben5/internal/vite-config/src/plugins/importmap.ts
+++ b/apps/vben5/internal/vite-config/src/plugins/importmap.ts
@@ -10,11 +10,11 @@ import { minify } from 'html-minifier-terser';
 
 const DEFAULT_PROVIDER = 'jspm.io';
 
-type pluginOptions = {
+type pluginOptions = GeneratorOptions & {
   debug?: boolean;
   defaultProvider?: 'esm.sh' | 'jsdelivr' | 'jspm.io';
   importmap?: Array<{ name: string; range?: string }>;
-} & GeneratorOptions;
+};
 
 // async function getLatestVersionOfShims() {
 //   const result = await fetch('https://ga.jspm.io/npm:es-module-shims');
diff --git a/apps/vben5/internal/vite-config/src/plugins/inject-app-loading/index.ts b/apps/vben5/internal/vite-config/src/plugins/inject-app-loading/index.ts
index 9f6e2a5c8..c6a79830d 100644
--- a/apps/vben5/internal/vite-config/src/plugins/inject-app-loading/index.ts
+++ b/apps/vben5/internal/vite-config/src/plugins/inject-app-loading/index.ts
@@ -1,3 +1,5 @@
+import type { PluginOption } from 'vite';
+
 import fs from 'node:fs';
 import fsp from 'node:fs/promises';
 import { join } from 'node:path';
@@ -5,8 +7,6 @@ import { fileURLToPath } from 'node:url';
 
 import { readPackageJSON } from '@vben/node-utils';
 
-import { type PluginOption } from 'vite';
-
 /**
  * 用于生成将loading样式注入到项目中
  * 为多app提供loading样式，无需在每个 app -> index.html单独引入
diff --git a/apps/vben5/internal/vite-config/src/utils/env.ts b/apps/vben5/internal/vite-config/src/utils/env.ts
index 3a042fe8a..f34221617 100644
--- a/apps/vben5/internal/vite-config/src/utils/env.ts
+++ b/apps/vben5/internal/vite-config/src/utils/env.ts
@@ -67,11 +67,11 @@ async function loadAndConvertEnv(
   match = 'VITE_',
   confFiles = getConfFiles(),
 ): Promise<
-  {
+  Partial<ApplicationPluginOptions> & {
     appTitle: string;
     base: string;
     port: number;
-  } & Partial<ApplicationPluginOptions>
+  }
 > {
   const envConfig = await loadEnv(match, confFiles);
 
diff --git a/apps/vben5/package.json b/apps/vben5/package.json
index 97edd5ed5..4b6b0a33f 100644
--- a/apps/vben5/package.json
+++ b/apps/vben5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-monorepo",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "private": true,
   "keywords": [
     "monorepo",
@@ -27,7 +27,7 @@
   "scripts": {
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
     "build:analyze": "turbo build:analyze",
-    "build:app": "pnpm run build --filter=@vben/app-antd",
+    "build:app": "pnpm run build --filter=@abp/app-antd",
     "build:antd": "pnpm run build --filter=@vben/web-antd",
     "build:docker": "./scripts/deploy/build-local-docker-image.sh",
     "build:docs": "pnpm run build --filter=@vben/docs",
@@ -43,7 +43,7 @@
     "clean": "node ./scripts/clean.mjs",
     "commit": "czg",
     "dev": "turbo-run dev",
-    "dev:app": "pnpm -F @vben/app-antd run dev",
+    "dev:app": "pnpm -F @abp/app-antd run dev",
     "dev:antd": "pnpm -F @vben/web-antd run dev",
     "dev:docs": "pnpm -F @vben/docs run dev",
     "dev:ele": "pnpm -F @vben/web-ele run dev",
@@ -102,7 +102,7 @@
     "node": ">=20.10.0",
     "pnpm": ">=9.12.0"
   },
-  "packageManager": "pnpm@9.15.0",
+  "packageManager": "pnpm@9.15.5",
   "pnpm": {
     "peerDependencyRules": {
       "allowedVersions": {
diff --git a/apps/vben5/packages/@abp/account/package.json b/apps/vben5/packages/@abp/account/package.json
index d677830fb..0e7136911 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.3.2",
+  "version": "8.3.4",
   "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/auditing/package.json b/apps/vben5/packages/@abp/auditing/package.json
index 79f93552d..15d7422ea 100644
--- a/apps/vben5/packages/@abp/auditing/package.json
+++ b/apps/vben5/packages/@abp/auditing/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abp/auditing",
-  "version": "8.3.2",
+  "version": "8.3.4",
   "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 ce80edc1a..b0b504e8a 100644
--- a/apps/vben5/packages/@abp/core/package.json
+++ b/apps/vben5/packages/@abp/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abp/core",
-  "version": "8.3.2",
+  "version": "8.3.4",
   "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/identity/package.json b/apps/vben5/packages/@abp/identity/package.json
index 47dfea8dc..f9736c6ad 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.3.2",
+  "version": "8.3.4",
   "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/notifications/package.json b/apps/vben5/packages/@abp/notifications/package.json
index 9b8708530..e6cbdf7fd 100644
--- a/apps/vben5/packages/@abp/notifications/package.json
+++ b/apps/vben5/packages/@abp/notifications/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abp/notifications",
-  "version": "8.3.2",
+  "version": "8.3.4",
   "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/openiddict/package.json b/apps/vben5/packages/@abp/openiddict/package.json
index 9715f086a..36bfec846 100644
--- a/apps/vben5/packages/@abp/openiddict/package.json
+++ b/apps/vben5/packages/@abp/openiddict/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abp/openiddict",
-  "version": "8.3.2",
+  "version": "8.3.4",
   "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 e409b6b2b..33bce9dbb 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.3.2",
+  "version": "8.3.4",
   "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/src/hooks/useRequest.ts b/apps/vben5/packages/@abp/request/src/hooks/useRequest.ts
index a72170a95..e6d3ba70b 100644
--- a/apps/vben5/packages/@abp/request/src/hooks/useRequest.ts
+++ b/apps/vben5/packages/@abp/request/src/hooks/useRequest.ts
@@ -1,6 +1,6 @@
 import type { AxiosRequestConfig } from 'axios';
 
-import { requestClient } from '@abp/request';
+import { requestClient } from '../index';
 
 type HttpMethod =
   | 'CONNECT'
diff --git a/apps/vben5/packages/@abp/request/src/index.ts b/apps/vben5/packages/@abp/request/src/index.ts
index 7afea27eb..5c13205f7 100644
--- a/apps/vben5/packages/@abp/request/src/index.ts
+++ b/apps/vben5/packages/@abp/request/src/index.ts
@@ -1,6 +1,7 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
+import type { RequestClientOptions } from '@vben/request';
 
 import { useAppConfig } from '@vben/hooks';
 import { RequestClient } from '@vben/request';
@@ -10,12 +11,15 @@ export * from './types';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
-function createRequestClient(baseURL: string) {
+function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
+    ...options,
     baseURL,
   });
 
   return client;
 }
 
-export const requestClient = createRequestClient(apiURL);
+export const requestClient = createRequestClient(apiURL, {
+  responseReturn: 'data',
+});
diff --git a/apps/vben5/packages/@abp/settings/package.json b/apps/vben5/packages/@abp/settings/package.json
index 4d76e0d29..27d34459a 100644
--- a/apps/vben5/packages/@abp/settings/package.json
+++ b/apps/vben5/packages/@abp/settings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abp/settings",
-  "version": "8.3.2",
+  "version": "8.3.4",
   "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/signalr/package.json b/apps/vben5/packages/@abp/signalr/package.json
index 62c8d715c..2eef75510 100644
--- a/apps/vben5/packages/@abp/signalr/package.json
+++ b/apps/vben5/packages/@abp/signalr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abp/signalr",
-  "version": "8.3.2",
+  "version": "8.3.4",
   "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/package.json b/apps/vben5/packages/@abp/ui/package.json
index 24d77e978..c6aff7da4 100644
--- a/apps/vben5/packages/@abp/ui/package.json
+++ b/apps/vben5/packages/@abp/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abp/ui",
-  "version": "8.3.2",
+  "version": "8.3.4",
   "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 818acdd0d..85d24d0c7 100644
--- a/apps/vben5/packages/@abp/ui/src/adapter/component/index.ts
+++ b/apps/vben5/packages/@abp/ui/src/adapter/component/index.ts
@@ -3,9 +3,10 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
+import type { Component, SetupContext } from 'vue';
+
 import type { BaseFormComponentType } from '@vben/common-ui';
 
-import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
diff --git a/apps/vben5/packages/@abp/ui/src/components/vxe-table/api.ts b/apps/vben5/packages/@abp/ui/src/components/vxe-table/api.ts
index 16cf7d8ec..bd93f81ab 100644
--- a/apps/vben5/packages/@abp/ui/src/components/vxe-table/api.ts
+++ b/apps/vben5/packages/@abp/ui/src/components/vxe-table/api.ts
@@ -1,6 +1,7 @@
-import type { ExtendedFormApi } from '@vben-core/form-ui';
 import type { VxeGridInstance } from 'vxe-table';
 
+import type { ExtendedFormApi } from '@vben-core/form-ui';
+
 import type { VxeGridProps } from './types';
 
 import { toRaw } from 'vue';
@@ -26,18 +27,18 @@ function getDefaultState(): VxeGridProps {
 }
 
 export class VxeGridApi {
-  private isMounted = false;
-
-  private stateHandler: StateHandler;
   public formApi = {} as ExtendedFormApi;
 
   // private prevState: null | VxeGridProps = null;
   public grid = {} as VxeGridInstance;
-
   public state: null | VxeGridProps = null;
 
   public store: Store<VxeGridProps>;
 
+  private isMounted = false;
+
+  private stateHandler: StateHandler;
+
   constructor(options: VxeGridProps = {}) {
     const storeState = { ...options };
 
diff --git a/apps/vben5/packages/@abp/ui/src/components/vxe-table/extends.ts b/apps/vben5/packages/@abp/ui/src/components/vxe-table/extends.ts
index 5199c90df..78426dc44 100644
--- a/apps/vben5/packages/@abp/ui/src/components/vxe-table/extends.ts
+++ b/apps/vben5/packages/@abp/ui/src/components/vxe-table/extends.ts
@@ -1,6 +1,7 @@
-import type { Recordable } from '@vben/types';
 import type { VxeGridProps, VxeUIExport } from 'vxe-table';
 
+import type { Recordable } from '@vben/types';
+
 import type { VxeGridApi } from './api';
 
 import { formatDate, formatDateTime, isFunction } from '@vben/utils';
diff --git a/apps/vben5/packages/@abp/ui/src/components/vxe-table/init.ts b/apps/vben5/packages/@abp/ui/src/components/vxe-table/init.ts
index 4c6ad127f..a40eb5f9d 100644
--- a/apps/vben5/packages/@abp/ui/src/components/vxe-table/init.ts
+++ b/apps/vben5/packages/@abp/ui/src/components/vxe-table/init.ts
@@ -3,6 +3,7 @@ import type { SetupVxeTable } from './types';
 import { defineComponent, watch } from 'vue';
 
 import { usePreferences } from '@vben/preferences';
+
 import { useVbenForm } from '@vben-core/form-ui';
 
 import {
@@ -34,7 +35,6 @@ import {
   // VxeTextarea,
 } from 'vxe-pc-ui';
 import enUS from 'vxe-pc-ui/lib/language/en-US';
-
 // 导入默认的语言
 import zhCN from 'vxe-pc-ui/lib/language/zh-CN';
 import {
diff --git a/apps/vben5/packages/@abp/ui/src/components/vxe-table/types.ts b/apps/vben5/packages/@abp/ui/src/components/vxe-table/types.ts
index 26916e6bd..1c7cc118c 100644
--- a/apps/vben5/packages/@abp/ui/src/components/vxe-table/types.ts
+++ b/apps/vben5/packages/@abp/ui/src/components/vxe-table/types.ts
@@ -1,5 +1,3 @@
-import type { ClassType, DeepPartial } from '@vben/types';
-import type { VbenFormProps } from '@vben-core/form-ui';
 import type {
   VxeGridListeners,
   VxeGridPropTypes,
@@ -7,10 +5,14 @@ import type {
   VxeUIExport,
 } from 'vxe-table';
 
-import type { VxeGridApi } from './api';
-
 import type { Ref } from 'vue';
 
+import type { ClassType, DeepPartial } from '@vben/types';
+
+import type { VbenFormProps } from '@vben-core/form-ui';
+
+import type { VxeGridApi } from './api';
+
 import { useVbenForm } from '@vben-core/form-ui';
 
 export interface VxePaginationInfo {
@@ -64,11 +66,11 @@ export interface VxeGridProps {
   tableTitleHelp?: string;
 }
 
-export type ExtendedVxeGridApi = {
+export type ExtendedVxeGridApi = VxeGridApi & {
   useStore: <T = NoInfer<VxeGridProps>>(
     selector?: (state: NoInfer<VxeGridProps>) => T,
   ) => Readonly<Ref<T>>;
-} & VxeGridApi;
+};
 
 export interface SetupVxeTable {
   configVxeTable: (ui: VxeUIExport) => void;
diff --git a/apps/vben5/packages/@abp/ui/src/components/vxe-table/use-vxe-grid.vue b/apps/vben5/packages/@abp/ui/src/components/vxe-table/use-vxe-grid.vue
index be1798c6b..6eaa3fa39 100644
--- a/apps/vben5/packages/@abp/ui/src/components/vxe-table/use-vxe-grid.vue
+++ b/apps/vben5/packages/@abp/ui/src/components/vxe-table/use-vxe-grid.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { VbenFormProps } from '@vben-core/form-ui';
 import type {
   VxeGridDefines,
   VxeGridInstance,
@@ -9,6 +8,10 @@ import type {
   VxeToolbarPropTypes,
 } from 'vxe-table';
 
+import type { SetupContext } from 'vue';
+
+import type { VbenFormProps } from '@vben-core/form-ui';
+
 import type { ExtendedVxeGridApi, VxeGridProps } from './types';
 
 import {
@@ -27,6 +30,7 @@ import { EmptyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { usePreferences } from '@vben/preferences';
 import { cloneDeep, cn, mergeWithArrayOverride } from '@vben/utils';
+
 import { VbenHelpTooltip, VbenLoading } from '@vben-core/shadcn-ui';
 
 import { VxeGrid, VxeUI } from 'vxe-table';
@@ -66,7 +70,7 @@ const {
 
 const { isMobile } = usePreferences();
 
-const slots = useSlots();
+const slots: SetupContext['slots'] = useSlots();
 
 const [Form, formApi] = useTableForm({
   commonConfig: {
@@ -77,18 +81,18 @@ const [Form, formApi] = useTableForm({
   compact: true,
   handleReset: async () => {
     await formApi.resetForm();
-    const formValues = formApi.form.values;
+    const formValues = await formApi.getValues();
     formApi.setLatestSubmissionValues(formValues);
     props.api.reload(formValues);
   },
   handleSubmit: async () => {
-    const formValues = formApi.form.values;
+    const formValues = await formApi.getValues();
     formApi.setLatestSubmissionValues(toRaw(formValues));
     props.api.reload(formValues);
   },
   showCollapseButton: true,
   submitButtonOptions: {
-    content: $t('common.query'),
+    content: computed(() => $t('common.search')),
   },
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
 });
@@ -244,7 +248,10 @@ async function init() {
   const autoLoad = defaultGridOptions.proxyConfig?.autoLoad;
   const enableProxyConfig = options.value.proxyConfig?.enabled;
   if (enableProxyConfig && autoLoad) {
-    props.api.grid.commitProxy?.('_init', formApi.form?.values ?? {});
+    props.api.grid.commitProxy?.(
+      '_init',
+      formOptions.value ? ((await formApi.getValues()) ?? {}) : {},
+    );
     // props.api.reload(formApi.form?.values ?? {});
   }
 
diff --git a/apps/vben5/packages/@core/base/design/package.json b/apps/vben5/packages/@core/base/design/package.json
index 7b46ddd74..ee1968114 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.5.1",
+  "version": "5.5.3",
   "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/design/src/css/ui.css b/apps/vben5/packages/@core/base/design/src/css/ui.css
index 3a002f2af..f7119c8ba 100644
--- a/apps/vben5/packages/@core/base/design/src/css/ui.css
+++ b/apps/vben5/packages/@core/base/design/src/css/ui.css
@@ -81,3 +81,7 @@
     transform: translateY(0);
   }
 }
+
+.z-popup {
+  z-index: var(--popup-z-index);
+}
diff --git a/apps/vben5/packages/@core/base/design/src/design-tokens/dark.css b/apps/vben5/packages/@core/base/design/src/design-tokens/dark.css
index 2a1d052f6..d34541e94 100644
--- a/apps/vben5/packages/@core/base/design/src/design-tokens/dark.css
+++ b/apps/vben5/packages/@core/base/design/src/design-tokens/dark.css
@@ -15,7 +15,11 @@
   --card-foreground: 210 40% 98%;
 
   /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
-  --popover: 222.82deg 8.43% 12.27%;
+
+  /* --popover: 222.82deg 8.43% 12.27%; */
+
+  /* 弹出层的背景色与主题区域背景色太过接近  */
+  --popover: 0 0 14.2%;
   --popover-foreground: 210 40% 98%;
 
   /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
diff --git a/apps/vben5/packages/@core/base/design/src/design-tokens/default.css b/apps/vben5/packages/@core/base/design/src/design-tokens/default.css
index c81ace7ea..6fb71f176 100644
--- a/apps/vben5/packages/@core/base/design/src/design-tokens/default.css
+++ b/apps/vben5/packages/@core/base/design/src/design-tokens/default.css
@@ -1,4 +1,6 @@
 :root {
+  /** 弹出层的基础层级 **/
+  --popup-z-index: 2000;
   --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
     'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
diff --git a/apps/vben5/packages/@core/base/icons/package.json b/apps/vben5/packages/@core/base/icons/package.json
index 754b74509..cd8b38962 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.5.1",
+  "version": "5.5.3",
   "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 21a1beffd..2cb21b125 100644
--- a/apps/vben5/packages/@core/base/icons/src/lucide.ts
+++ b/apps/vben5/packages/@core/base/icons/src/lucide.ts
@@ -1,9 +1,7 @@
 export {
   ArrowDown,
   ArrowLeft,
-  ArrowLeftFromLine as MdiMenuOpen,
   ArrowLeftToLine,
-  ArrowRightFromLine as MdiMenuClose,
   ArrowRightLeft,
   ArrowRightToLine,
   ArrowUp,
@@ -29,6 +27,7 @@ export {
   Github,
   Grip,
   GripVertical,
+  Menu as IconDefault,
   Info,
   InspectionPanel,
   Languages,
@@ -37,7 +36,8 @@ export {
   LogOut,
   MailCheck,
   Maximize,
-  Menu as IconDefault,
+  ArrowRightFromLine as MdiMenuClose,
+  ArrowLeftFromLine as MdiMenuOpen,
   Menu,
   Minimize,
   Minimize2,
diff --git a/apps/vben5/packages/@core/base/shared/package.json b/apps/vben5/packages/@core/base/shared/package.json
index 20eeea450..bc1c6f3e4 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.5.1",
+  "version": "5.5.3",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -45,7 +45,7 @@
       "default": "./dist/store.mjs"
     },
     "./global-state": {
-      "types": "./dist/global-state.d.ts",
+      "types": "./src/global-state.ts",
       "development": "./src/global-state.ts",
       "default": "./dist/global-state.mjs"
     }
diff --git a/apps/vben5/packages/@core/base/shared/src/cache/storage-manager.ts b/apps/vben5/packages/@core/base/shared/src/cache/storage-manager.ts
index 611cdb834..4360621e4 100644
--- a/apps/vben5/packages/@core/base/shared/src/cache/storage-manager.ts
+++ b/apps/vben5/packages/@core/base/shared/src/cache/storage-manager.ts
@@ -25,15 +25,6 @@ class StorageManager {
         : window.sessionStorage;
   }
 
-  /**
-   * 获取完整的存储键
-   * @param key 原始键
-   * @returns 带前缀的完整键
-   */
-  private getFullKey(key: string): string {
-    return `${this.prefix}-${key}`;
-  }
-
   /**
    * 清除所有带前缀的存储项
    */
@@ -113,6 +104,15 @@ class StorageManager {
       console.error(`Error setting item with key "${fullKey}":`, error);
     }
   }
+
+  /**
+   * 获取完整的存储键
+   * @param key 原始键
+   * @returns 带前缀的完整键
+   */
+  private getFullKey(key: string): string {
+    return `${this.prefix}-${key}`;
+  }
 }
 
 export { StorageManager };
diff --git a/apps/vben5/packages/@core/base/shared/src/utils/__tests__/util.test.ts b/apps/vben5/packages/@core/base/shared/src/utils/__tests__/util.test.ts
index 0d87b3181..dd5846514 100644
--- a/apps/vben5/packages/@core/base/shared/src/utils/__tests__/util.test.ts
+++ b/apps/vben5/packages/@core/base/shared/src/utils/__tests__/util.test.ts
@@ -56,12 +56,6 @@ describe('bindMethods', () => {
 
   it('should not bind getter/setter properties', () => {
     class TestWithGetterSetter {
-      private _value: string = 'test';
-
-      constructor() {
-        bindMethods(this);
-      }
-
       get value() {
         return this._value;
       }
@@ -69,6 +63,12 @@ describe('bindMethods', () => {
       set value(newValue: string) {
         this._value = newValue;
       }
+
+      private _value: string = 'test';
+
+      constructor() {
+        bindMethods(this);
+      }
     }
 
     const instance = new TestWithGetterSetter();
diff --git a/apps/vben5/packages/@core/base/shared/src/utils/cn.ts b/apps/vben5/packages/@core/base/shared/src/utils/cn.ts
index 5503cc580..3a2f9773c 100644
--- a/apps/vben5/packages/@core/base/shared/src/utils/cn.ts
+++ b/apps/vben5/packages/@core/base/shared/src/utils/cn.ts
@@ -1,4 +1,6 @@
-import { type ClassValue, clsx } from 'clsx';
+import type { ClassValue } from 'clsx';
+
+import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 function cn(...inputs: ClassValue[]) {
diff --git a/apps/vben5/packages/@core/base/shared/src/utils/download.ts b/apps/vben5/packages/@core/base/shared/src/utils/download.ts
index 3e708d3c5..6f38ee5b2 100644
--- a/apps/vben5/packages/@core/base/shared/src/utils/download.ts
+++ b/apps/vben5/packages/@core/base/shared/src/utils/download.ts
@@ -31,6 +31,7 @@ export async function downloadFileFromUrl({
 
   if (isChrome || isSafari) {
     triggerDownload(source, resolveFileName(source, fileName));
+    return;
   }
   if (!source.includes('?')) {
     source += '?download';
diff --git a/apps/vben5/packages/@core/base/shared/src/utils/state-handler.ts b/apps/vben5/packages/@core/base/shared/src/utils/state-handler.ts
index cef1bd8f3..438fcda17 100644
--- a/apps/vben5/packages/@core/base/shared/src/utils/state-handler.ts
+++ b/apps/vben5/packages/@core/base/shared/src/utils/state-handler.ts
@@ -3,12 +3,6 @@ export class StateHandler {
   private rejectCondition: (() => void) | null = null;
   private resolveCondition: (() => void) | null = null;
 
-  // 清理 resolve/reject 函数
-  private clearPromises() {
-    this.resolveCondition = null;
-    this.rejectCondition = null;
-  }
-
   isConditionTrue(): boolean {
     return this.condition;
   }
@@ -47,4 +41,10 @@ export class StateHandler {
       }
     });
   }
+
+  // 清理 resolve/reject 函数
+  private clearPromises() {
+    this.resolveCondition = null;
+    this.rejectCondition = null;
+  }
 }
diff --git a/apps/vben5/packages/@core/base/typings/package.json b/apps/vben5/packages/@core/base/typings/package.json
index 504e53ed8..f453b6ec4 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.5.1",
+  "version": "5.5.3",
   "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/typings/src/app.d.ts b/apps/vben5/packages/@core/base/typings/src/app.d.ts
index e49a8657d..02da2466a 100644
--- a/apps/vben5/packages/@core/base/typings/src/app.d.ts
+++ b/apps/vben5/packages/@core/base/typings/src/app.d.ts
@@ -1,6 +1,8 @@
 type LayoutType =
   | 'full-content'
+  | 'header-mixed-nav'
   | 'header-nav'
+  | 'header-sidebar-nav'
   | 'mixed-nav'
   | 'sidebar-mixed-nav'
   | 'sidebar-nav';
@@ -38,6 +40,7 @@ type BuiltinThemeType =
 type ContentCompactType = 'compact' | 'wide';
 
 type LayoutHeaderModeType = 'auto' | 'auto-scroll' | 'fixed' | 'static';
+type LayoutHeaderMenuAlignType = 'center' | 'end' | 'start';
 
 /**
  * 登录过期模式
@@ -95,6 +98,7 @@ export type {
   BreadcrumbStyleType,
   BuiltinThemeType,
   ContentCompactType,
+  LayoutHeaderMenuAlignType,
   LayoutHeaderModeType,
   LayoutType,
   LoginExpiredModeType,
diff --git a/apps/vben5/packages/@core/base/typings/src/helper.d.ts b/apps/vben5/packages/@core/base/typings/src/helper.d.ts
index 8a6385b41..96d4f37ba 100644
--- a/apps/vben5/packages/@core/base/typings/src/helper.d.ts
+++ b/apps/vben5/packages/@core/base/typings/src/helper.d.ts
@@ -1,4 +1,4 @@
-import { type ComputedRef, type MaybeRef } from 'vue';
+import type { ComputedRef, MaybeRef } from 'vue';
 
 /**
  * 深层递归所有属性为可选
@@ -109,6 +109,8 @@ type MergeAll<
 
 type EmitType = (name: Name, ...args: any[]) => void;
 
+type MaybePromise<T> = Promise<T> | T;
+
 export type {
   AnyFunction,
   AnyNormalFunction,
@@ -118,6 +120,7 @@ export type {
   EmitType,
   IntervalHandle,
   MaybeComputedRef,
+  MaybePromise,
   MaybeReadonlyRef,
   Merge,
   MergeAll,
diff --git a/apps/vben5/packages/@core/base/typings/src/menu-record.ts b/apps/vben5/packages/@core/base/typings/src/menu-record.ts
index 9cb18dcca..21f6ab516 100644
--- a/apps/vben5/packages/@core/base/typings/src/menu-record.ts
+++ b/apps/vben5/packages/@core/base/typings/src/menu-record.ts
@@ -1,15 +1,14 @@
-import type { RouteRecordRaw } from 'vue-router';
-
 import type { Component } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
 
 /**
  * 扩展路由原始对象
  */
-type ExRouteRecordRaw = {
+type ExRouteRecordRaw = RouteRecordRaw & {
   parent?: string;
   parents?: string[];
   path?: any;
-} & RouteRecordRaw;
+};
 
 interface MenuRecordBadgeRaw {
   /**
diff --git a/apps/vben5/packages/@core/base/typings/src/vue-router.d.ts b/apps/vben5/packages/@core/base/typings/src/vue-router.d.ts
index b95bb33b1..099e8171a 100644
--- a/apps/vben5/packages/@core/base/typings/src/vue-router.d.ts
+++ b/apps/vben5/packages/@core/base/typings/src/vue-router.d.ts
@@ -1,6 +1,5 @@
-import type { Router, RouteRecordRaw } from 'vue-router';
-
 import type { Component } from 'vue';
+import type { Router, RouteRecordRaw } from 'vue-router';
 
 interface RouteMeta {
   /**
@@ -98,6 +97,10 @@ interface RouteMeta {
    * 菜单可以看到，但是访问会被重定向到403
    */
   menuVisibleWithForbidden?: boolean;
+  /**
+   * 不使用基础布局（仅在顶级生效）
+   */
+  noBasicLayout?: boolean;
   /**
    * 在新窗口打开
    */
@@ -117,10 +120,13 @@ interface RouteMeta {
 }
 
 // 定义递归类型以将 RouteRecordRaw 的 component 属性更改为 string
-type RouteRecordStringComponent<T = string> = {
+type RouteRecordStringComponent<T = string> = Omit<
+  RouteRecordRaw,
+  'children' | 'component'
+> & {
   children?: RouteRecordStringComponent<T>[];
   component: T;
-} & Omit<RouteRecordRaw, 'children' | 'component'>;
+};
 
 type ComponentRecordType = Record<string, () => Promise<Component>>;
 
diff --git a/apps/vben5/packages/@core/composables/package.json b/apps/vben5/packages/@core/composables/package.json
index 736feefa2..1a8df3557 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.5.1",
+  "version": "5.5.3",
   "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/src/use-layout-style.ts b/apps/vben5/packages/@core/composables/src/use-layout-style.ts
index ac599c4fa..395e9e5a3 100644
--- a/apps/vben5/packages/@core/composables/src/use-layout-style.ts
+++ b/apps/vben5/packages/@core/composables/src/use-layout-style.ts
@@ -1,4 +1,7 @@
 import type { CSSProperties } from 'vue';
+
+import type { VisibleDomRect } from '@vben-core/shared/utils';
+
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 import {
@@ -7,10 +10,7 @@ import {
   CSS_VARIABLE_LAYOUT_FOOTER_HEIGHT,
   CSS_VARIABLE_LAYOUT_HEADER_HEIGHT,
 } from '@vben-core/shared/constants';
-import {
-  getElementVisibleRect,
-  type VisibleDomRect,
-} from '@vben-core/shared/utils';
+import { getElementVisibleRect } from '@vben-core/shared/utils';
 
 import { useCssVar, useDebounceFn } from '@vueuse/core';
 
diff --git a/apps/vben5/packages/@core/composables/src/use-priority-value.ts b/apps/vben5/packages/@core/composables/src/use-priority-value.ts
index d29e894e3..74b5b5bfd 100644
--- a/apps/vben5/packages/@core/composables/src/use-priority-value.ts
+++ b/apps/vben5/packages/@core/composables/src/use-priority-value.ts
@@ -1,4 +1,5 @@
 import type { ComputedRef, Ref } from 'vue';
+
 import { computed, getCurrentInstance, unref, useAttrs, useSlots } from 'vue';
 
 import {
diff --git a/apps/vben5/packages/@core/composables/src/use-simple-locale/index.ts b/apps/vben5/packages/@core/composables/src/use-simple-locale/index.ts
index 1c3015bbb..67b8173e5 100644
--- a/apps/vben5/packages/@core/composables/src/use-simple-locale/index.ts
+++ b/apps/vben5/packages/@core/composables/src/use-simple-locale/index.ts
@@ -1,8 +1,10 @@
+import type { Locale } from './messages';
+
 import { computed, ref } from 'vue';
 
 import { createSharedComposable } from '@vueuse/core';
 
-import { getMessages, type Locale } from './messages';
+import { getMessages } from './messages';
 
 export const useSimpleLocale = createSharedComposable(() => {
   const currentLocale = ref<Locale>('zh-CN');
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 f05a96dc3..d537d22e9 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
@@ -46,6 +46,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
   "header": {
     "enable": true,
     "hidden": false,
+    "menuAlign": "start",
     "mode": "fixed",
   },
   "logo": {
@@ -70,7 +71,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "collapsedShowTitle": false,
     "enable": true,
     "expandOnHover": true,
-    "extraCollapse": true,
+    "extraCollapse": false,
     "hidden": false,
     "width": 224,
   },
@@ -79,6 +80,8 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "enable": true,
     "height": 38,
     "keepAlive": true,
+    "maxCount": 0,
+    "middleClickToClose": false,
     "persist": true,
     "showIcon": true,
     "showMaximize": true,
diff --git a/apps/vben5/packages/@core/preferences/package.json b/apps/vben5/packages/@core/preferences/package.json
index 24b522e21..1ab498a8c 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.5.1",
+  "version": "5.5.3",
   "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 c4dce039f..2c3f65868 100644
--- a/apps/vben5/packages/@core/preferences/src/config.ts
+++ b/apps/vben5/packages/@core/preferences/src/config.ts
@@ -46,6 +46,7 @@ const defaultPreferences: Preferences = {
   header: {
     enable: true,
     hidden: false,
+    menuAlign: 'start',
     mode: 'fixed',
   },
   logo: {
@@ -70,7 +71,7 @@ const defaultPreferences: Preferences = {
     collapsedShowTitle: false,
     enable: true,
     expandOnHover: true,
-    extraCollapse: true,
+    extraCollapse: false,
     hidden: false,
     width: 224,
   },
@@ -79,6 +80,8 @@ const defaultPreferences: Preferences = {
     enable: true,
     height: 38,
     keepAlive: true,
+    maxCount: 0,
+    middleClickToClose: false,
     persist: true,
     showIcon: true,
     showMaximize: true,
diff --git a/apps/vben5/packages/@core/preferences/src/preferences.ts b/apps/vben5/packages/@core/preferences/src/preferences.ts
index 7851fdbc7..5c9582675 100644
--- a/apps/vben5/packages/@core/preferences/src/preferences.ts
+++ b/apps/vben5/packages/@core/preferences/src/preferences.ts
@@ -39,6 +39,90 @@ class PreferenceManager {
     );
   }
 
+  clearCache() {
+    [STORAGE_KEY, STORAGE_KEY_LOCALE, STORAGE_KEY_THEME].forEach((key) => {
+      this.cache?.removeItem(key);
+    });
+  }
+
+  public getInitialPreferences() {
+    return this.initialPreferences;
+  }
+
+  public getPreferences() {
+    return readonly(this.state);
+  }
+
+  /**
+   * 覆盖偏好设置
+   * overrides  要覆盖的偏好设置
+   * namespace  命名空间
+   */
+  public async initPreferences({ namespace, overrides }: InitialOptions) {
+    // 是否初始化过
+    if (this.isInitialized) {
+      return;
+    }
+    // 初始化存储管理器
+    this.cache = new StorageManager({ prefix: namespace });
+    // 合并初始偏好设置
+    this.initialPreferences = merge({}, overrides, defaultPreferences);
+
+    // 加载并合并当前存储的偏好设置
+    const mergedPreference = merge(
+      {},
+      // overrides,
+      this.loadCachedPreferences() || {},
+      this.initialPreferences,
+    );
+
+    // 更新偏好设置
+    this.updatePreferences(mergedPreference);
+
+    this.setupWatcher();
+
+    this.initPlatform();
+    // 标记为已初始化
+    this.isInitialized = true;
+  }
+
+  /**
+   * 重置偏好设置
+   * 偏好设置将被重置为初始值，并从 localStorage 中移除。
+   *
+   * @example
+   * 假设 initialPreferences 为 { theme: 'light', language: 'en' }
+   * 当前 state 为 { theme: 'dark', language: 'fr' }
+   * this.resetPreferences();
+   * 调用后，state 将被重置为 { theme: 'light', language: 'en' }
+   * 并且 localStorage 中的对应项将被移除
+   */
+  resetPreferences() {
+    // 将状态重置为初始偏好设置
+    Object.assign(this.state, this.initialPreferences);
+    // 保存重置后的偏好设置
+    this.savePreferences(this.state);
+    // 从存储中移除偏好设置项
+    [STORAGE_KEY, STORAGE_KEY_THEME, STORAGE_KEY_LOCALE].forEach((key) => {
+      this.cache?.removeItem(key);
+    });
+    this.updatePreferences(this.state);
+  }
+
+  /**
+   * 更新偏好设置
+   * @param updates - 要更新的偏好设置
+   */
+  public updatePreferences(updates: DeepPartial<Preferences>) {
+    const mergedState = merge({}, updates, markRaw(this.state));
+
+    Object.assign(this.state, mergedState);
+
+    // 根据更新的键值执行相应的操作
+    this.handleUpdates(updates);
+    this.savePreferences(this.state);
+  }
+
   /**
    * 保存偏好设置
    * @param {Preferences} preference - 需要保存的偏好设置
@@ -138,90 +222,6 @@ class PreferenceManager {
         : dom.classList.remove(COLOR_GRAY);
     }
   }
-
-  clearCache() {
-    [STORAGE_KEY, STORAGE_KEY_LOCALE, STORAGE_KEY_THEME].forEach((key) => {
-      this.cache?.removeItem(key);
-    });
-  }
-
-  public getInitialPreferences() {
-    return this.initialPreferences;
-  }
-
-  public getPreferences() {
-    return readonly(this.state);
-  }
-
-  /**
-   * 覆盖偏好设置
-   * overrides  要覆盖的偏好设置
-   * namespace  命名空间
-   */
-  public async initPreferences({ namespace, overrides }: InitialOptions) {
-    // 是否初始化过
-    if (this.isInitialized) {
-      return;
-    }
-    // 初始化存储管理器
-    this.cache = new StorageManager({ prefix: namespace });
-    // 合并初始偏好设置
-    this.initialPreferences = merge({}, overrides, defaultPreferences);
-
-    // 加载并合并当前存储的偏好设置
-    const mergedPreference = merge(
-      {},
-      // overrides,
-      this.loadCachedPreferences() || {},
-      this.initialPreferences,
-    );
-
-    // 更新偏好设置
-    this.updatePreferences(mergedPreference);
-
-    this.setupWatcher();
-
-    this.initPlatform();
-    // 标记为已初始化
-    this.isInitialized = true;
-  }
-
-  /**
-   * 重置偏好设置
-   * 偏好设置将被重置为初始值，并从 localStorage 中移除。
-   *
-   * @example
-   * 假设 initialPreferences 为 { theme: 'light', language: 'en' }
-   * 当前 state 为 { theme: 'dark', language: 'fr' }
-   * this.resetPreferences();
-   * 调用后，state 将被重置为 { theme: 'light', language: 'en' }
-   * 并且 localStorage 中的对应项将被移除
-   */
-  resetPreferences() {
-    // 将状态重置为初始偏好设置
-    Object.assign(this.state, this.initialPreferences);
-    // 保存重置后的偏好设置
-    this.savePreferences(this.state);
-    // 从存储中移除偏好设置项
-    [STORAGE_KEY, STORAGE_KEY_THEME, STORAGE_KEY_LOCALE].forEach((key) => {
-      this.cache?.removeItem(key);
-    });
-    this.updatePreferences(this.state);
-  }
-
-  /**
-   * 更新偏好设置
-   * @param updates - 要更新的偏好设置
-   */
-  public updatePreferences(updates: DeepPartial<Preferences>) {
-    const mergedState = merge({}, updates, markRaw(this.state));
-
-    Object.assign(this.state, mergedState);
-
-    // 根据更新的键值执行相应的操作
-    this.handleUpdates(updates);
-    this.savePreferences(this.state);
-  }
 }
 
 const preferencesManager = new PreferenceManager();
diff --git a/apps/vben5/packages/@core/preferences/src/types.ts b/apps/vben5/packages/@core/preferences/src/types.ts
index 59dce2e21..9c7e87bc4 100644
--- a/apps/vben5/packages/@core/preferences/src/types.ts
+++ b/apps/vben5/packages/@core/preferences/src/types.ts
@@ -5,6 +5,7 @@ import type {
   BuiltinThemeType,
   ContentCompactType,
   DeepPartial,
+  LayoutHeaderMenuAlignType,
   LayoutHeaderModeType,
   LayoutType,
   LoginExpiredModeType,
@@ -104,6 +105,8 @@ interface HeaderPreferences {
   enable: boolean;
   /** 顶栏是否隐藏,css-隐藏 */
   hidden: boolean;
+  /** 顶栏菜单位置 */
+  menuAlign: LayoutHeaderMenuAlignType;
   /** header显示模式 */
   mode: LayoutHeaderModeType;
 }
@@ -165,6 +168,10 @@ interface TabbarPreferences {
   height: number;
   /** 开启标签页缓存功能 */
   keepAlive: boolean;
+  /** 限制最大数量 */
+  maxCount: number;
+  /** 是否点击中键时关闭标签 */
+  middleClickToClose: boolean;
   /** 是否持久化标签 */
   persist: boolean;
   /** 是否开启多标签页图标 */
diff --git a/apps/vben5/packages/@core/preferences/src/use-preferences.ts b/apps/vben5/packages/@core/preferences/src/use-preferences.ts
index fc1e2de5f..d931f7582 100644
--- a/apps/vben5/packages/@core/preferences/src/use-preferences.ts
+++ b/apps/vben5/packages/@core/preferences/src/use-preferences.ts
@@ -82,6 +82,20 @@ function usePreferences() {
     () => appPreferences.value.layout === 'header-nav',
   );
 
+  /**
+   * @zh_CN 是否为头部混合导航模式
+   */
+  const isHeaderMixedNav = computed(
+    () => appPreferences.value.layout === 'header-mixed-nav',
+  );
+
+  /**
+   * @zh_CN 是否为顶部通栏+侧边导航模式
+   */
+  const isHeaderSidebarNav = computed(
+    () => appPreferences.value.layout === 'header-sidebar-nav',
+  );
+
   /**
    * @zh_CN 是否为混合导航模式
    */
@@ -93,7 +107,13 @@ function usePreferences() {
    * @zh_CN 是否包含侧边导航模式
    */
   const isSideMode = computed(() => {
-    return isMixedNav.value || isSideMixedNav.value || isSideNav.value;
+    return (
+      isMixedNav.value ||
+      isSideMixedNav.value ||
+      isSideNav.value ||
+      isHeaderMixedNav.value ||
+      isHeaderSidebarNav.value
+    );
   });
 
   const sidebarCollapsed = computed(() => {
@@ -214,7 +234,9 @@ function usePreferences() {
     globalSearchShortcutKey,
     isDark,
     isFullContent,
+    isHeaderMixedNav,
     isHeaderNav,
+    isHeaderSidebarNav,
     isMixedNav,
     isMobile,
     isSideMixedNav,
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 944fd49ef..36a0596df 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.5.1",
+  "version": "5.5.3",
   "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 b9a878e8a..fb90a5e42 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
@@ -3,12 +3,7 @@ import { computed, toRaw, unref, watch } from 'vue';
 
 import { useSimpleLocale } from '@vben-core/composables';
 import { VbenExpandableArrow } from '@vben-core/shadcn-ui';
-import {
-  cn,
-  formatDate,
-  isFunction,
-  triggerWindowResize,
-} from '@vben-core/shared/utils';
+import { cn, isFunction, triggerWindowResize } from '@vben-core/shared/utils';
 
 import { COMPONENT_MAP } from '../config';
 import { injectFormProps } from '../use-form-context';
@@ -58,7 +53,7 @@ async function handleSubmit(e: Event) {
     return;
   }
 
-  const values = handleRangeTimeValue(toRaw(form.values));
+  const values = toRaw(await unref(rootProps).formApi?.getValues());
   await unref(rootProps).handleSubmit?.(values);
 }
 
@@ -67,13 +62,7 @@ async function handleReset(e: Event) {
   e?.stopPropagation();
   const props = unref(rootProps);
 
-  const values = toRaw(form.values);
-  // 清理时间字段
-  props.fieldMappingTime &&
-    props.fieldMappingTime.forEach(([_, [startTimeKey, endTimeKey]]) => {
-      delete values[startTimeKey];
-      delete values[endTimeKey];
-    });
+  const values = toRaw(props.formApi?.getValues());
 
   if (isFunction(props.handleReset)) {
     await props.handleReset?.(values);
@@ -82,44 +71,6 @@ async function handleReset(e: Event) {
   }
 }
 
-function handleRangeTimeValue(values: Record<string, any>) {
-  const fieldMappingTime = unref(rootProps).fieldMappingTime;
-
-  if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
-    return values;
-  }
-
-  fieldMappingTime.forEach(
-    ([field, [startTimeKey, endTimeKey], format = 'YYYY-MM-DD']) => {
-      if (startTimeKey && endTimeKey && values[field] === null) {
-        delete values[startTimeKey];
-        delete values[endTimeKey];
-      }
-
-      if (!values[field]) {
-        delete values[field];
-        return;
-      }
-
-      const [startTime, endTime] = values[field];
-      const [startTimeFormat, endTimeFormat] = Array.isArray(format)
-        ? format
-        : [format, format];
-
-      values[startTimeKey] = startTime
-        ? formatDate(startTime, startTimeFormat)
-        : undefined;
-      values[endTimeKey] = endTime
-        ? formatDate(endTime, endTimeFormat)
-        : undefined;
-
-      delete values[field];
-    },
-  );
-
-  return values;
-}
-
 watch(
   () => collapsed.value,
   () => {
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 9e82cffe1..645f51f3b 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
@@ -1,10 +1,11 @@
+import type { Component } from 'vue';
+
 import type {
   BaseFormComponentType,
   FormCommonConfig,
   VbenFormAdapterOptions,
 } from './types';
 
-import type { Component } from 'vue';
 import { h } from 'vue';
 
 import {
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 8de5c4056..c3d7b2bbe 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
@@ -1,4 +1,3 @@
-import type { Recordable } from '@vben-core/typings';
 import type {
   FormState,
   GenericObject,
@@ -6,6 +5,8 @@ import type {
   ValidationOptions,
 } from 'vee-validate';
 
+import type { Recordable } from '@vben-core/typings';
+
 import type { FormActions, FormSchema, VbenFormProps } from './types';
 
 import { toRaw } from 'vue';
@@ -14,6 +15,7 @@ import { Store } from '@vben-core/shared/store';
 import {
   bindMethods,
   createMerge,
+  formatDate,
   isDate,
   isDayjsObject,
   isFunction,
@@ -45,20 +47,20 @@ function getDefaultState(): VbenFormProps {
 }
 
 export class FormApi {
-  // 最后一次点击提交时的表单值
-  private latestSubmissionValues: null | Recordable<any> = null;
-  private prevState: null | VbenFormProps = null;
-
   // private api: Pick<VbenFormProps, 'handleReset' | 'handleSubmit'>;
   public form = {} as FormActions;
   isMounted = false;
 
   public state: null | VbenFormProps = null;
-
   stateHandler: StateHandler;
 
   public store: Store<VbenFormProps>;
 
+  // 最后一次点击提交时的表单值
+  private latestSubmissionValues: null | Recordable<any> = null;
+
+  private prevState: null | VbenFormProps = null;
+
   constructor(options: VbenFormProps = {}) {
     const { ...storeState } = options;
 
@@ -83,40 +85,6 @@ export class FormApi {
     bindMethods(this);
   }
 
-  private async getForm() {
-    if (!this.isMounted) {
-      // 等待form挂载
-      await this.stateHandler.waitForCondition();
-    }
-    if (!this.form?.meta) {
-      throw new Error('<VbenForm /> is not mounted');
-    }
-    return this.form;
-  }
-
-  private updateState() {
-    const currentSchema = this.state?.schema ?? [];
-    const prevSchema = this.prevState?.schema ?? [];
-    // 进行了删除schema操作
-    if (currentSchema.length < prevSchema.length) {
-      const currentFields = new Set(
-        currentSchema.map((item) => item.fieldName),
-      );
-      const deletedSchema = prevSchema.filter(
-        (item) => !currentFields.has(item.fieldName),
-      );
-
-      for (const schema of deletedSchema) {
-        this.form?.setFieldValue(schema.fieldName, undefined);
-      }
-    }
-  }
-
-  // 如果需要多次更新状态，可以使用 batch 方法
-  batchStore(cb: () => void) {
-    this.store.batch(cb);
-  }
-
   getLatestSubmissionValues() {
     return this.latestSubmissionValues || {};
   }
@@ -127,7 +95,7 @@ export class FormApi {
 
   async getValues() {
     const form = await this.getForm();
-    return form.values;
+    return form.values ? this.handleRangeTimeValue(form.values) : {};
   }
 
   async isFieldValid(fieldName: string) {
@@ -150,12 +118,11 @@ export class FormApi {
             try {
               const results = await Promise.all(
                 chain.map(async (api) => {
-                  const form = await api.getForm();
                   const validateResult = await api.validate();
                   if (!validateResult.valid) {
                     return;
                   }
-                  const rawValues = toRaw(form.values || {});
+                  const rawValues = toRaw((await api.getValues()) || {});
                   return rawValues;
                 }),
               );
@@ -180,7 +147,9 @@ export class FormApi {
     if (!this.isMounted) {
       Object.assign(this.form, formActions);
       this.stateHandler.setConditionTrue();
-      this.setLatestSubmissionValues({ ...toRaw(this.form.values) });
+      this.setLatestSubmissionValues({
+        ...toRaw(this.handleRangeTimeValue(this.form.values)),
+      });
       this.isMounted = true;
     }
   }
@@ -286,7 +255,7 @@ export class FormApi {
     e?.stopPropagation();
     const form = await this.getForm();
     await form.submitForm();
-    const rawValues = toRaw(form.values || {});
+    const rawValues = toRaw(await this.getValues());
     await this.state?.handleSubmit?.(rawValues);
 
     return rawValues;
@@ -363,4 +332,81 @@ export class FormApi {
     }
     return validateResult;
   }
+
+  private async getForm() {
+    if (!this.isMounted) {
+      // 等待form挂载
+      await this.stateHandler.waitForCondition();
+    }
+    if (!this.form?.meta) {
+      throw new Error('<VbenForm /> is not mounted');
+    }
+    return this.form;
+  }
+
+  private handleRangeTimeValue = (originValues: Record<string, any>) => {
+    const values = { ...originValues };
+    const fieldMappingTime = this.state?.fieldMappingTime;
+
+    if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
+      return values;
+    }
+
+    fieldMappingTime.forEach(
+      ([field, [startTimeKey, endTimeKey], format = 'YYYY-MM-DD']) => {
+        if (startTimeKey && endTimeKey && values[field] === null) {
+          Reflect.deleteProperty(values, startTimeKey);
+          Reflect.deleteProperty(values, endTimeKey);
+          // delete values[startTimeKey];
+          // delete values[endTimeKey];
+        }
+
+        if (!values[field]) {
+          Reflect.deleteProperty(values, field);
+          // delete values[field];
+          return;
+        }
+
+        const [startTime, endTime] = values[field];
+        if (format === null) {
+          values[startTimeKey] = startTime;
+          values[endTimeKey] = endTime;
+        } else if (isFunction(format)) {
+          values[startTimeKey] = format(startTime, startTimeKey);
+          values[endTimeKey] = format(endTime, endTimeKey);
+        } else {
+          const [startTimeFormat, endTimeFormat] = Array.isArray(format)
+            ? format
+            : [format, format];
+
+          values[startTimeKey] = startTime
+            ? formatDate(startTime, startTimeFormat)
+            : undefined;
+          values[endTimeKey] = endTime
+            ? formatDate(endTime, endTimeFormat)
+            : undefined;
+        }
+        // delete values[field];
+        Reflect.deleteProperty(values, field);
+      },
+    );
+    return values;
+  };
+
+  private updateState() {
+    const currentSchema = this.state?.schema ?? [];
+    const prevSchema = this.prevState?.schema ?? [];
+    // 进行了删除schema操作
+    if (currentSchema.length < prevSchema.length) {
+      const currentFields = new Set(
+        currentSchema.map((item) => item.fieldName),
+      );
+      const deletedSchema = prevSchema.filter(
+        (item) => !currentFields.has(item.fieldName),
+      );
+      for (const schema of deletedSchema) {
+        this.form?.setFieldValue?.(schema.fieldName, undefined);
+      }
+    }
+  }
 }
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 50c9c17d9..31af2821d 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
@@ -41,12 +41,13 @@ const {
   label,
   labelClass,
   labelWidth,
+  modelPropName,
   renderComponentContent,
   rules,
 } = defineProps<
-  {
+  Props & {
     commonComponentProps: MaybeComponentProps;
-  } & Props
+  }
 >();
 
 const { componentBindEventMap, componentMap, isVertical } = useFormContext();
@@ -202,9 +203,9 @@ function fieldBindEvent(slotProps: Record<string, any>) {
   const modelValue = slotProps.componentField.modelValue;
   const handler = slotProps.componentField['onUpdate:modelValue'];
 
-  const bindEventField = isString(component)
-    ? componentBindEventMap.value?.[component]
-    : null;
+  const bindEventField =
+    modelPropName ||
+    (isString(component) ? componentBindEventMap.value?.[component] : null);
 
   let value = modelValue;
   // antd design 的一些组件会传递一个 event 对象
@@ -328,10 +329,14 @@ function autofocus() {
               v-bind="createComponentProps(slotProps)"
               :disabled="shouldDisabled"
             >
-              <template v-for="name in renderContentKey" :key="name" #[name]>
+              <template
+                v-for="name in renderContentKey"
+                :key="name"
+                #[name]="renderSlotProps"
+              >
                 <VbenRenderContent
                   :content="customContentRender[name]"
-                  v-bind="slotProps"
+                  v-bind="{ ...renderSlotProps, $formContext: slotProps }"
                 />
               </template>
               <!-- <slot></slot> -->
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 7c04540d2..ff827c42a 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
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { GenericObject } from 'vee-validate';
 import type { ZodTypeAny } from 'zod';
 
 import type {
@@ -13,8 +14,6 @@ import { computed } from 'vue';
 import { Form } from '@vben-core/shadcn-ui';
 import { cn, isString, mergeWithArrayOverride } from '@vben-core/shared/utils';
 
-import { type GenericObject } from 'vee-validate';
-
 import { provideFormRenderProps } from './context';
 import { useExpandable } from './expandable';
 import FormField from './form-field.vue';
@@ -23,7 +22,7 @@ import { getBaseRules, getDefaultValueInZodStack } from './helper';
 interface Props extends FormRenderProps {}
 
 const props = withDefaults(
-  defineProps<{ globalCommonConfig?: FormCommonConfig } & Props>(),
+  defineProps<Props & { globalCommonConfig?: FormCommonConfig }>(),
   {
     collapsedRows: 1,
     commonConfig: () => ({}),
@@ -81,10 +80,10 @@ const formCollapsed = computed(() => {
 });
 
 const computedSchema = computed(
-  (): ({
+  (): (Omit<FormSchema, 'formFieldProps'> & {
     commonComponentProps: Record<string, any>;
     formFieldProps: Record<string, any>;
-  } & Omit<FormSchema, 'formFieldProps'>)[] => {
+  })[] => {
     const {
       colon = false,
       componentProps = {},
@@ -99,6 +98,7 @@ const computedSchema = computed(
       hideRequiredMark = false,
       labelClass = '',
       labelWidth = 100,
+      modelPropName = '',
       wrapperClass = '',
     } = mergeWithArrayOverride(props.commonConfig, props.globalCommonConfig);
     return (props.schema || []).map((schema, index) => {
@@ -119,6 +119,7 @@ const computedSchema = computed(
         hideLabel,
         hideRequiredMark,
         labelWidth,
+        modelPropName,
         wrapperClass,
         ...schema,
         commonComponentProps: componentProps,
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/index.ts b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/index.ts
index 7fc170657..f90e8599a 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/form-render/index.ts
@@ -1,3 +1,3 @@
-export { default as Form } from './form.vue';
 export { default as FormField } from './form-field.vue';
 export { default as FormLabel } from './form-label.vue';
+export { default as Form } from './form.vue';
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/index.ts b/apps/vben5/packages/@core/ui-kit/form-ui/src/index.ts
index 67ed4a50e..16b8b2319 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/index.ts
@@ -3,8 +3,8 @@ export { setupVbenForm } from './config';
 export type {
   BaseFormComponentType,
   ExtendedFormApi,
-  FormSchema as VbenFormSchema,
   VbenFormProps,
+  FormSchema as VbenFormSchema,
 } from './types';
 
 export * from './use-vben-form';
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 f3ba3eba1..dd007292f 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
@@ -1,12 +1,13 @@
-import type { VbenButtonProps } from '@vben-core/shadcn-ui';
-import type { ClassType } from '@vben-core/typings';
 import type { FieldOptions, FormContext, GenericObject } from 'vee-validate';
 import type { ZodTypeAny } from 'zod';
 
-import type { FormApi } from './form-api';
-
 import type { Component, HtmlHTMLAttributes, Ref } from 'vue';
 
+import type { VbenButtonProps } from '@vben-core/shadcn-ui';
+import type { ClassType, MaybeComputedRef } from '@vben-core/typings';
+
+import type { FormApi } from './form-api';
+
 export type FormLayout = 'horizontal' | 'vertical';
 
 export type BaseFormComponentType =
@@ -19,7 +20,7 @@ export type BaseFormComponentType =
   | 'VbenSelect'
   | (Record<never, never> & string);
 
-type Breakpoints = '' | '2xl:' | '3xl:' | 'lg:' | 'md:' | 'sm:' | 'xl:';
+type Breakpoints = '2xl:' | '3xl:' | '' | 'lg:' | 'md:' | 'sm:' | 'xl:';
 
 type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
 
@@ -35,12 +36,12 @@ export type FormItemClassType =
   | WrapperClassType;
 
 export type FormFieldOptions = Partial<
-  {
+  FieldOptions & {
     validateOnBlur?: boolean;
     validateOnChange?: boolean;
     validateOnInput?: boolean;
     validateOnModelUpdate?: boolean;
-  } & FieldOptions
+  }
 >;
 
 export interface FormShape {
@@ -196,6 +197,11 @@ export interface FormCommonConfig {
    * 所有表单项的label宽度
    */
   labelWidth?: number;
+  /**
+   * 所有表单项的model属性名
+   * @default "modelValue"
+   */
+  modelPropName?: string;
   /**
    * 所有表单项的wrapper样式
    */
@@ -218,7 +224,12 @@ export type HandleResetFn = (
 export type FieldMappingTime = [
   string,
   [string, string],
-  ([string, string] | string)?,
+  (
+    | ((value: any, fieldName: string) => any)
+    | [string, string]
+    | null
+    | string
+  )?,
 ][];
 
 export interface FormSchema<
@@ -310,7 +321,7 @@ export interface FormRenderProps<
 
 export interface ActionButtonOptions extends VbenButtonProps {
   [key: string]: any;
-  content?: string;
+  content?: MaybeComputedRef<string>;
   show?: boolean;
 }
 
@@ -329,7 +340,7 @@ export interface VbenFormProps<
    */
   actionWrapperClass?: ClassType;
   /**
-   * 表单字段映射成时间格式
+   * 表单字段映射
    */
   fieldMappingTime?: FieldMappingTime;
   /**
@@ -372,11 +383,11 @@ export interface VbenFormProps<
   submitOnEnter?: boolean;
 }
 
-export type ExtendedFormApi = {
+export type ExtendedFormApi = FormApi & {
   useStore: <T = NoInfer<VbenFormProps>>(
     selector?: (state: NoInfer<VbenFormProps>) => T,
   ) => Readonly<Ref<T>>;
-} & FormApi;
+};
 
 export interface VbenFormAdapterOptions<
   T extends BaseFormComponentType = BaseFormComponentType,
diff --git a/apps/vben5/packages/@core/ui-kit/form-ui/src/use-form-context.ts b/apps/vben5/packages/@core/ui-kit/form-ui/src/use-form-context.ts
index 05838fc33..8e37300e5 100644
--- a/apps/vben5/packages/@core/ui-kit/form-ui/src/use-form-context.ts
+++ b/apps/vben5/packages/@core/ui-kit/form-ui/src/use-form-context.ts
@@ -1,16 +1,22 @@
-import type { FormActions, VbenFormProps } from './types';
+import type { ZodRawShape } from 'zod';
 
-import { computed, type ComputedRef, unref, useSlots } from 'vue';
+import type { ComputedRef } from 'vue';
+
+import type { ExtendedFormApi, FormActions, VbenFormProps } from './types';
+
+import { computed, unref, useSlots } from 'vue';
 
 import { createContext } from '@vben-core/shadcn-ui';
 import { isString } from '@vben-core/shared/utils';
 
 import { useForm } from 'vee-validate';
-import { object, type ZodRawShape } from 'zod';
+import { object } from 'zod';
 import { getDefaultsForSchema } from 'zod-defaults';
 
+type ExtendFormProps = VbenFormProps & { formApi: ExtendedFormApi };
+
 export const [injectFormProps, provideFormProps] =
-  createContext<[ComputedRef<VbenFormProps> | VbenFormProps, FormActions]>(
+  createContext<[ComputedRef<ExtendFormProps> | ExtendFormProps, FormActions]>(
     'VbenFormProps',
   );
 
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 9908e85d3..a5a7f660c 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
@@ -2,12 +2,10 @@
 import type { ExtendedFormApi, VbenFormProps } from './types';
 
 // import { toRaw, watch } from 'vue';
-
-import { useForwardPriorityValues } from '@vben-core/composables';
-// import { isFunction } from '@vben-core/shared/utils';
-
 import { nextTick, onMounted, watch } from 'vue';
+// import { isFunction } from '@vben-core/shared/utils';
 
+import { useForwardPriorityValues } from '@vben-core/composables';
 import { cloneDeep } from '@vben-core/shared/utils';
 
 import { useDebounceFn } from '@vueuse/core';
@@ -55,8 +53,10 @@ function handleKeyDownEnter(event: KeyboardEvent) {
   forward.value.formApi.validateAndSubmitForm();
 }
 
-const handleValuesChangeDebounced = useDebounceFn((newVal) => {
-  forward.value.handleValuesChange?.(cloneDeep(newVal));
+const handleValuesChangeDebounced = useDebounceFn(async () => {
+  forward.value.handleValuesChange?.(
+    cloneDeep(await forward.value.formApi.getValues()),
+  );
   state.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm();
 }, 300);
 
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 7aa4a35b8..0bed9beb4 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.5.1",
+  "version": "5.5.3",
   "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/layout-ui/src/components/layout-content.vue b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
index 926e621bb..da39c1c58 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
 import type { ContentCompactType } from '@vben-core/typings';
 
-import type { CSSProperties } from 'vue';
 import { computed } from 'vue';
 
 import { useLayoutContentStyle } from '@vben-core/composables';
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
index d4fb16f3d..129209dae 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
+
 import { computed } from 'vue';
 
 interface Props {
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 792c8d88e..534e4162c 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
+
 import { computed, useSlots } from 'vue';
 
 interface Props {
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 3d8681905..a6a08c6af 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
+
 import { computed, shallowRef, useSlots, watchEffect } from 'vue';
 
 import { VbenScrollbar } from '@vben-core/shadcn-ui';
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
index 2a2cfd9ce..e588e6154 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
+
 import { computed } from 'vue';
 
 interface Props {
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts b/apps/vben5/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts
index 354fcb442..2f2b82bb1 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts
@@ -29,11 +29,23 @@ export function useLayout(props: VbenLayoutProps) {
   /**
    * 是否为混合导航模式
    */
-  const isMixedNav = computed(() => currentLayout.value === 'mixed-nav');
+  const isMixedNav = computed(
+    () =>
+      currentLayout.value === 'mixed-nav' ||
+      currentLayout.value === 'header-sidebar-nav',
+  );
+
+  /**
+   * 是否为头部混合模式
+   */
+  const isHeaderMixedNav = computed(
+    () => currentLayout.value === 'header-mixed-nav',
+  );
 
   return {
     currentLayout,
     isFullContent,
+    isHeaderMixedNav,
     isHeaderNav,
     isMixedNav,
     isSidebarMixedNav,
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 fe9b1d852..85dfba03c 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
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
 import type { VbenLayoutProps } from './vben-layout';
 
-import type { CSSProperties } from 'vue';
 import { computed, ref, watch } from 'vue';
 
 import {
@@ -87,6 +88,7 @@ const { y: mouseY } = useMouse({ target: contentRef, type: 'client' });
 const {
   currentLayout,
   isFullContent,
+  isHeaderMixedNav,
   isHeaderNav,
   isMixedNav,
   isSidebarMixedNav,
@@ -112,7 +114,9 @@ const getSideCollapseWidth = computed(() => {
   const { sidebarCollapseShowTitle, sidebarMixedWidth, sideCollapseWidth } =
     props;
 
-  return sidebarCollapseShowTitle || isSidebarMixedNav.value
+  return sidebarCollapseShowTitle ||
+    isSidebarMixedNav.value ||
+    isHeaderMixedNav.value
     ? sidebarMixedWidth
     : sideCollapseWidth;
 });
@@ -145,12 +149,15 @@ const getSidebarWidth = computed(() => {
 
   if (
     !sidebarEnableState.value ||
-    (sidebarHidden && !isSidebarMixedNav.value && !isMixedNav.value)
+    (sidebarHidden &&
+      !isSidebarMixedNav.value &&
+      !isMixedNav.value &&
+      !isHeaderMixedNav.value)
   ) {
     return width;
   }
 
-  if (isSidebarMixedNav.value && !isMobile) {
+  if ((isHeaderMixedNav.value || isSidebarMixedNav.value) && !isMobile) {
     width = sidebarMixedWidth;
   } else if (sidebarCollapse.value) {
     width = isMobile ? 0 : getSideCollapseWidth.value;
@@ -176,7 +183,9 @@ const isSideMode = computed(
   () =>
     currentLayout.value === 'mixed-nav' ||
     currentLayout.value === 'sidebar-mixed-nav' ||
-    currentLayout.value === 'sidebar-nav',
+    currentLayout.value === 'sidebar-nav' ||
+    currentLayout.value === 'header-mixed-nav' ||
+    currentLayout.value === 'header-sidebar-nav',
 );
 
 /**
@@ -208,12 +217,13 @@ const mainStyle = computed(() => {
     headerFixed.value &&
     currentLayout.value !== 'header-nav' &&
     currentLayout.value !== 'mixed-nav' &&
+    currentLayout.value !== 'header-sidebar-nav' &&
     showSidebar.value &&
     !props.isMobile
   ) {
     // fixed模式下生效
     const isSideNavEffective =
-      isSidebarMixedNav.value &&
+      (isSidebarMixedNav.value || isHeaderMixedNav.value) &&
       sidebarExpandOnHover.value &&
       sidebarExtraVisible.value;
 
@@ -476,7 +486,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
       :extra-width="sidebarExtraWidth"
       :fixed-extra="sidebarExpandOnHover"
       :header-height="isMixedNav ? 0 : headerHeight"
-      :is-sidebar-mixed="isSidebarMixedNav"
+      :is-sidebar-mixed="isSidebarMixedNav || isHeaderMixedNav"
       :margin-top="sidebarMarginTop"
       :mixed-width="sidebarMixedWidth"
       :show="showSidebar"
@@ -489,7 +499,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
         <slot name="logo"></slot>
       </template>
 
-      <template v-if="isSidebarMixedNav">
+      <template v-if="isSidebarMixedNav || isHeaderMixedNav">
         <slot name="mixed-menu"></slot>
       </template>
       <template v-else>
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 4c833cb8a..edb320f4c 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.5.1",
+  "version": "5.5.3",
   "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/components/index.ts b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/index.ts
index 7c697dc12..ce06710b7 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/index.ts
@@ -1,4 +1,4 @@
-export { default as Menu } from './menu.vue';
 export { default as MenuBadge } from './menu-badge.vue';
 export { default as MenuItem } from './menu-item.vue';
+export { default as Menu } from './menu.vue';
 export { default as SubMenu } from './sub-menu.vue';
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu.vue
index ea7a14c05..f570aa724 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { UseResizeObserverReturn } from '@vueuse/core';
 
+import type { SetupContext, VNodeArrayChildren } from 'vue';
+
 import type {
   MenuItemClicked,
   MenuItemRegistered,
@@ -15,7 +17,6 @@ import {
   ref,
   toRef,
   useSlots,
-  type VNodeArrayChildren,
   watch,
   watchEffect,
 } from 'vue';
@@ -54,7 +55,7 @@ const emit = defineEmits<{
 
 const { b, is } = useNamespace('menu');
 const menuStyle = useMenuStyle();
-const slots = useSlots();
+const slots: SetupContext['slots'] = useSlots();
 const menu = ref<HTMLUListElement>();
 const sliceIndex = ref(-1);
 const openedMenus = ref<MenuProvider['openedMenus']>(
@@ -332,6 +333,7 @@ function removeMenuItem(item: MenuItemRegistered) {
       is(theme, true),
       is('rounded', rounded),
       is('collapse', collapse),
+      is('menu-align', mode === 'horizontal'),
     ]"
     :style="menuStyle"
     role="menu"
@@ -423,6 +425,10 @@ $namespace: vben;
   opacity: 1;
 }
 
+.is-menu-align {
+  justify-content: var(--menu-align, start);
+}
+
 .#{$namespace}-menu__popup-container,
 .#{$namespace}-menu {
   --menu-title-width: 140px;
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/types.ts b/apps/vben5/packages/@core/ui-kit/menu-ui/src/types.ts
index 99422e8ec..e7ee96758 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/types.ts
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/types.ts
@@ -1,7 +1,7 @@
-import type { MenuRecordBadgeRaw, ThemeModeType } from '@vben-core/typings';
-
 import type { Component, Ref } from 'vue';
 
+import type { MenuRecordBadgeRaw, ThemeModeType } from '@vben-core/typings';
+
 interface MenuProps {
   /**
    * @zh_CN 是否开启手风琴模式
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/utils/index.ts b/apps/vben5/packages/@core/ui-kit/menu-ui/src/utils/index.ts
index dd6a85ccc..23a1b154b 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/utils/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/utils/index.ts
@@ -4,6 +4,7 @@ import type {
   VNodeChild,
   VNodeNormalizedChildren,
 } from 'vue';
+
 import { isVNode } from 'vue';
 
 type VNodeChildAtom = Exclude<VNodeChild, Array<any>>;
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
index 8d715ff82..46dcafc30 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
@@ -9,7 +9,11 @@ vi.mock('@vben-core/shared/store', () => {
   return {
     isFunction: (fn: any) => typeof fn === 'function',
     Store: class {
+      get state() {
+        return this._state;
+      }
       private _state: DrawerState;
+
       private options: any;
 
       constructor(initialState: DrawerState, options: any) {
@@ -25,10 +29,6 @@ vi.mock('@vben-core/shared/store', () => {
         this._state = fn(this._state);
         this.options.onUpdate();
       }
-
-      get state() {
-        return this._state;
-      }
     },
   };
 });
@@ -100,14 +100,18 @@ describe('drawerApi', () => {
     expect(onOpenChange).toHaveBeenCalledWith(true);
   });
 
-  it('should batch state updates', () => {
-    const batchSpy = vi.spyOn(drawerApi.store, 'batch');
-    drawerApi.batchStore(() => {
-      drawerApi.setState({ title: 'Batch Title' });
-      drawerApi.setState({ confirmText: 'Batch Confirm' });
-    });
-    expect(batchSpy).toHaveBeenCalled();
-    expect(drawerApi.store.state.title).toBe('Batch Title');
-    expect(drawerApi.store.state.confirmText).toBe('Batch Confirm');
+  it('should call onClosed callback when provided', () => {
+    const onClosed = vi.fn();
+    const drawerApiWithHook = new DrawerApi({ onClosed });
+    drawerApiWithHook.onClosed();
+    expect(onClosed).toHaveBeenCalled();
+  });
+
+  it('should call onOpened callback when provided', () => {
+    const onOpened = vi.fn();
+    const drawerApiWithHook = new DrawerApi({ onOpened });
+    drawerApiWithHook.open();
+    drawerApiWithHook.onOpened();
+    expect(onOpened).toHaveBeenCalled();
   });
 });
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
index 6ceee0889..398e4f907 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
@@ -4,27 +4,34 @@ import { Store } from '@vben-core/shared/store';
 import { bindMethods, isFunction } from '@vben-core/shared/utils';
 
 export class DrawerApi {
-  private api: Pick<
-    DrawerApiOptions,
-    'onBeforeClose' | 'onCancel' | 'onConfirm' | 'onOpenChange'
-  >;
-  // private prevState!: DrawerState;
-  private state!: DrawerState;
-
   // 共享数据
   public sharedData: Record<'payload', any> = {
     payload: {},
   };
-
   public store: Store<DrawerState>;
 
+  private api: Pick<
+    DrawerApiOptions,
+    | 'onBeforeClose'
+    | 'onCancel'
+    | 'onClosed'
+    | 'onConfirm'
+    | 'onOpenChange'
+    | 'onOpened'
+  >;
+
+  // private prevState!: DrawerState;
+  private state!: DrawerState;
+
   constructor(options: DrawerApiOptions = {}) {
     const {
       connectedComponent: _,
       onBeforeClose,
       onCancel,
+      onClosed,
       onConfirm,
       onOpenChange,
+      onOpened,
       ...storeState
     } = options;
 
@@ -68,17 +75,14 @@ export class DrawerApi {
     this.api = {
       onBeforeClose,
       onCancel,
+      onClosed,
       onConfirm,
       onOpenChange,
+      onOpened,
     };
     bindMethods(this);
   }
 
-  // 如果需要多次更新状态，可以使用 batch 方法
-  batchStore(cb: () => void) {
-    this.store.batch(cb);
-  }
-
   /**
    * 关闭弹窗
    */
@@ -106,6 +110,15 @@ export class DrawerApi {
     }
   }
 
+  /**
+   * 弹窗关闭动画播放完毕后的回调
+   */
+  onClosed() {
+    if (!this.state.isOpen) {
+      this.api.onClosed?.();
+    }
+  }
+
   /**
    * 确认操作
    */
@@ -113,12 +126,22 @@ export class DrawerApi {
     this.api.onConfirm?.();
   }
 
+  /**
+   * 弹窗打开动画播放完毕后的回调
+   */
+  onOpened() {
+    if (this.state.isOpen) {
+      this.api.onOpened?.();
+    }
+  }
+
   open() {
     this.store.setState((prev) => ({ ...prev, isOpen: true }));
   }
 
   setData<T>(payload: T) {
     this.sharedData.payload = payload;
+    return this;
   }
 
   setState(
@@ -131,5 +154,6 @@ export class DrawerApi {
     } else {
       this.store.setState((prev) => ({ ...prev, ...stateOrFn }));
     }
+    return this;
   }
 }
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 f75ee50cb..c43677d3e 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
@@ -1,11 +1,13 @@
+import type { Component, Ref } from 'vue';
+
 import type { ClassType } from '@vben-core/typings';
 
 import type { DrawerApi } from './drawer-api';
 
-import type { Component, Ref } from 'vue';
-
 export type DrawerPlacement = 'bottom' | 'left' | 'right' | 'top';
 
+export type CloseIconPlacement = 'left' | 'right';
+
 export interface DrawerProps {
   /**
    * 是否挂载到内容区域
@@ -18,10 +20,14 @@ export interface DrawerProps {
   cancelText?: string;
   class?: ClassType;
   /**
-   * 是否显示右上角的关闭按钮
+   * 是否显示关闭按钮
    * @default true
    */
   closable?: boolean;
+  /**
+   * 关闭按钮的位置
+   */
+  closeIconPlacement?: CloseIconPlacement;
   /**
    * 点击弹窗遮罩是否关闭弹窗
    * @default true
@@ -79,12 +85,16 @@ export interface DrawerProps {
    * 是否自动聚焦
    */
   openAutoFocus?: boolean;
+  /**
+   * 弹窗遮罩模糊效果
+   */
+  overlayBlur?: number;
+
   /**
    * 抽屉位置
    * @default right
    */
   placement?: DrawerPlacement;
-
   /**
    * 是否显示取消按钮
    * @default true
@@ -118,17 +128,21 @@ export interface DrawerState extends DrawerProps {
   sharedData?: Record<string, any>;
 }
 
-export type ExtendedDrawerApi = {
+export type ExtendedDrawerApi = DrawerApi & {
   useStore: <T = NoInfer<DrawerState>>(
     selector?: (state: NoInfer<DrawerState>) => T,
   ) => Readonly<Ref<T>>;
-} & DrawerApi;
+};
 
 export interface DrawerApiOptions extends DrawerState {
   /**
-   * 独立的弹窗组件
+   * 独立的抽屉组件
    */
   connectedComponent?: Component;
+  /**
+   * 在关闭时销毁抽屉。仅在使用 connectedComponent 时有效
+   */
+  destroyOnClose?: boolean;
   /**
    * 关闭前的回调，返回 false 可以阻止关闭
    * @returns
@@ -138,6 +152,11 @@ export interface DrawerApiOptions extends DrawerState {
    * 点击取消按钮的回调
    */
   onCancel?: () => void;
+  /**
+   * 弹窗关闭动画结束的回调
+   * @returns
+   */
+  onClosed?: () => void;
   /**
    * 点击确定按钮的回调
    */
@@ -148,4 +167,9 @@ export interface DrawerApiOptions extends DrawerState {
    * @returns
    */
   onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * 弹窗打开动画结束的回调
+   * @returns
+   */
+  onOpened?: () => void;
 }
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 31a409882..1b1a4a509 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
@@ -10,6 +10,7 @@ import {
 } from '@vben-core/composables';
 import { X } from '@vben-core/icons';
 import {
+  Separator,
   Sheet,
   SheetClose,
   SheetContent,
@@ -33,6 +34,7 @@ interface Props extends DrawerProps {
 
 const props = withDefaults(defineProps<Props>(), {
   appendToMain: false,
+  closeIconPlacement: 'right',
   drawerApi: undefined,
   zIndex: 1000,
 });
@@ -66,6 +68,7 @@ const {
   loading: showLoading,
   modal,
   openAutoFocus,
+  overlayBlur,
   placement,
   showCancelButton,
   showConfirmButton,
@@ -138,11 +141,14 @@ const getAppendTo = computed(() => {
       :open="state?.isOpen"
       :side="placement"
       :z-index="zIndex"
+      :overlay-blur="overlayBlur"
       @close-auto-focus="handleFocusOutside"
+      @closed="() => drawerApi?.onClosed()"
       @escape-key-down="escapeKeyDown"
       @focus-outside="handleFocusOutside"
       @interact-outside="interactOutside"
       @open-auto-focus="handerOpenAutoFocus"
+      @opened="() => drawerApi?.onOpened()"
       @pointer-down-outside="pointerDownOutside"
     >
       <SheetHeader
@@ -153,11 +159,29 @@ const getAppendTo = computed(() => {
             headerClass,
             {
               'px-4 py-3': closable,
+              'pl-2': closable && closeIconPlacement === 'left',
             },
           )
         "
       >
-        <div>
+        <div class="flex items-center">
+          <SheetClose
+            v-if="closable && closeIconPlacement === 'left'"
+            as-child
+            class="data-[state=open]:bg-secondary ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+          >
+            <slot name="close-icon">
+              <VbenIconButton>
+                <X class="size-4" />
+              </VbenIconButton>
+            </slot>
+          </SheetClose>
+          <Separator
+            v-if="closable && closeIconPlacement === 'left'"
+            class="ml-1 mr-2 h-8"
+            decorative
+            orientation="vertical"
+          />
           <SheetTitle v-if="title" class="text-left">
             <slot name="title">
               {{ title }}
@@ -182,13 +206,15 @@ const getAppendTo = computed(() => {
         <div class="flex-center">
           <slot name="extra"></slot>
           <SheetClose
-            v-if="closable"
+            v-if="closable && closeIconPlacement === 'right'"
             as-child
             class="data-[state=open]:bg-secondary ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
           >
-            <VbenIconButton>
-              <X class="size-4" />
-            </VbenIconButton>
+            <slot name="close-icon">
+              <VbenIconButton>
+                <X class="size-4" />
+              </VbenIconButton>
+            </slot>
           </SheetClose>
         </div>
       </SheetHeader>
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/index.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/index.ts
index f2dd83969..00f87b2ce 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/index.ts
@@ -1,3 +1,3 @@
 export type * from './drawer';
 export { default as VbenDrawer } from './drawer.vue';
-export { useVbenDrawer } from './use-drawer';
+export { setDefaultDrawerProps, useVbenDrawer } from './use-drawer';
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
index c3ff263b0..21b11c56f 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
@@ -4,15 +4,29 @@ import type {
   ExtendedDrawerApi,
 } from './drawer';
 
-import { defineComponent, h, inject, nextTick, provide, reactive } from 'vue';
+import {
+  defineComponent,
+  h,
+  inject,
+  nextTick,
+  provide,
+  reactive,
+  ref,
+} from 'vue';
 
 import { useStore } from '@vben-core/shared/store';
 
-import VbenDrawer from './drawer.vue';
 import { DrawerApi } from './drawer-api';
+import VbenDrawer from './drawer.vue';
 
 const USER_DRAWER_INJECT_KEY = Symbol('VBEN_DRAWER_INJECT');
 
+const DEFAULT_DRAWER_PROPS: Partial<DrawerProps> = {};
+
+export function setDefaultDrawerProps(props: Partial<DrawerProps>) {
+  Object.assign(DEFAULT_DRAWER_PROPS, props);
+}
+
 export function useVbenDrawer<
   TParentDrawerProps extends DrawerProps = DrawerProps,
 >(options: DrawerApiOptions = {}) {
@@ -22,6 +36,7 @@ export function useVbenDrawer<
   const { connectedComponent } = options;
   if (connectedComponent) {
     const extendedApi = reactive({});
+    const isDrawerReady = ref(true);
     const Drawer = defineComponent(
       (props: TParentDrawerProps, { attrs, slots }) => {
         provide(USER_DRAWER_INJECT_KEY, {
@@ -31,13 +46,23 @@ export function useVbenDrawer<
             Object.setPrototypeOf(extendedApi, api);
           },
           options,
+          async reCreateDrawer() {
+            isDrawerReady.value = false;
+            await nextTick();
+            isDrawerReady.value = true;
+          },
         });
         checkProps(extendedApi as ExtendedDrawerApi, {
           ...props,
           ...attrs,
           ...slots,
         });
-        return () => h(connectedComponent, { ...props, ...attrs }, slots);
+        return () =>
+          h(
+            isDrawerReady.value ? connectedComponent : 'div',
+            { ...props, ...attrs },
+            slots,
+          );
       },
       {
         inheritAttrs: false,
@@ -50,6 +75,7 @@ export function useVbenDrawer<
   const injectData = inject<any>(USER_DRAWER_INJECT_KEY, {});
 
   const mergedOptions = {
+    ...DEFAULT_DRAWER_PROPS,
     ...injectData.options,
     ...options,
   } as DrawerApiOptions;
@@ -58,6 +84,14 @@ export function useVbenDrawer<
     options.onOpenChange?.(isOpen);
     injectData.options?.onOpenChange?.(isOpen);
   };
+
+  const onClosed = mergedOptions.onClosed;
+  mergedOptions.onClosed = () => {
+    onClosed?.();
+    if (mergedOptions.destroyOnClose) {
+      injectData.reCreateDrawer?.();
+    }
+  };
   const api = new DrawerApi(mergedOptions);
 
   const extendedApi: ExtendedDrawerApi = api as never;
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
index 9c2ef2008..1edd477e7 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
@@ -8,7 +8,11 @@ vi.mock('@vben-core/shared/store', () => {
   return {
     isFunction: (fn: any) => typeof fn === 'function',
     Store: class {
+      get state() {
+        return this._state;
+      }
       private _state: ModalState;
+
       private options: any;
 
       constructor(initialState: ModalState, options: any) {
@@ -24,10 +28,6 @@ vi.mock('@vben-core/shared/store', () => {
         this._state = fn(this._state);
         this.options.onUpdate();
       }
-
-      get state() {
-        return this._state;
-      }
     },
   };
 });
@@ -100,17 +100,6 @@ describe('modalApi', () => {
     expect(onOpenChange).toHaveBeenCalledWith(true);
   });
 
-  it('should batch state updates', () => {
-    const batchSpy = vi.spyOn(modalApi.store, 'batch');
-    modalApi.batchStore(() => {
-      modalApi.setState({ title: 'Batch Title' });
-      modalApi.setState({ confirmText: 'Batch Confirm' });
-    });
-    expect(batchSpy).toHaveBeenCalled();
-    expect(modalApi.store.state.title).toBe('Batch Title');
-    expect(modalApi.store.state.confirmText).toBe('Batch Confirm');
-  });
-
   it('should call onClosed callback when provided', () => {
     const onClosed = vi.fn();
     const modalApiWithHook = new ModalApi({ onClosed });
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/index.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/index.ts
index c8d3498c3..0cdedf2f5 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/index.ts
@@ -1,3 +1,3 @@
 export type * from './modal';
 export { default as VbenModal } from './modal.vue';
-export { useVbenModal } from './use-modal';
+export { setDefaultModalProps, useVbenModal } from './use-modal';
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
index cf54dcec3..d1fc63caa 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
@@ -4,6 +4,12 @@ import { Store } from '@vben-core/shared/store';
 import { bindMethods, isFunction } from '@vben-core/shared/utils';
 
 export class ModalApi {
+  // 共享数据
+  public sharedData: Record<'payload', any> = {
+    payload: {},
+  };
+  public store: Store<ModalState>;
+
   private api: Pick<
     ModalApiOptions,
     | 'onBeforeClose'
@@ -13,16 +19,10 @@ export class ModalApi {
     | 'onOpenChange'
     | 'onOpened'
   >;
+
   // private prevState!: ModalState;
   private state!: ModalState;
 
-  // 共享数据
-  public sharedData: Record<'payload', any> = {
-    payload: {},
-  };
-
-  public store: Store<ModalState>;
-
   constructor(options: ModalApiOptions = {}) {
     const {
       connectedComponent: _,
@@ -93,20 +93,20 @@ export class ModalApi {
     bindMethods(this);
   }
 
-  // 如果需要多次更新状态，可以使用 batch 方法
-  batchStore(cb: () => void) {
-    this.store.batch(cb);
-  }
-
   /**
    * 关闭弹窗
+   * @description 关闭弹窗时会调用 onBeforeClose 钩子函数，如果 onBeforeClose 返回 false，则不关闭弹窗
    */
-  close() {
+  async close() {
     // 通过 onBeforeClose 钩子函数来判断是否允许关闭弹窗
     // 如果 onBeforeClose 返回 false，则不关闭弹窗
-    const allowClose = this.api.onBeforeClose?.() ?? true;
+    const allowClose = (await this.api.onBeforeClose?.()) ?? true;
     if (allowClose) {
-      this.store.setState((prev) => ({ ...prev, isOpen: false }));
+      this.store.setState((prev) => ({
+        ...prev,
+        isOpen: false,
+        submitting: false,
+      }));
     }
   }
 
@@ -114,6 +114,15 @@ export class ModalApi {
     return (this.sharedData?.payload ?? {}) as T;
   }
 
+  /**
+   * 锁定弹窗状态（用于提交过程中的等待状态）
+   * @description 锁定状态将禁用默认的取消按钮，使用spinner覆盖弹窗内容，隐藏关闭按钮，阻止手动关闭弹窗，将默认的提交按钮标记为loading状态
+   * @param isLocked 是否锁定
+   */
+  lock(isLocked = true) {
+    return this.setState({ submitting: isLocked });
+  }
+
   /**
    * 取消操作
    */
@@ -156,6 +165,7 @@ export class ModalApi {
 
   setData<T>(payload: T) {
     this.sharedData.payload = payload;
+    return this;
   }
 
   setState(
@@ -168,5 +178,6 @@ export class ModalApi {
     } else {
       this.store.setState((prev) => ({ ...prev, ...stateOrFn }));
     }
+    return this;
   }
 }
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 5508d004b..9f86ab8c3 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
@@ -1,7 +1,9 @@
-import type { ModalApi } from './modal-api';
-
 import type { Component, Ref } from 'vue';
 
+import type { MaybePromise } from '@vben-core/typings';
+
+import type { ModalApi } from './modal-api';
+
 export interface ModalProps {
   /**
    * 是否要挂载到内容区域
@@ -99,6 +101,10 @@ export interface ModalProps {
    * 是否自动聚焦
    */
   openAutoFocus?: boolean;
+  /**
+   * 弹窗遮罩模糊效果
+   */
+  overlayBlur?: number;
   /**
    * 是否显示取消按钮
    * @default true
@@ -109,6 +115,10 @@ export interface ModalProps {
    * @default true
    */
   showConfirmButton?: boolean;
+  /**
+   * 提交中（锁定弹窗状态）
+   */
+  submitting?: boolean;
   /**
    * 弹窗标题
    */
@@ -132,22 +142,26 @@ export interface ModalState extends ModalProps {
   sharedData?: Record<string, any>;
 }
 
-export type ExtendedModalApi = {
+export type ExtendedModalApi = ModalApi & {
   useStore: <T = NoInfer<ModalState>>(
     selector?: (state: NoInfer<ModalState>) => T,
   ) => Readonly<Ref<T>>;
-} & ModalApi;
+};
 
 export interface ModalApiOptions extends ModalState {
   /**
    * 独立的弹窗组件
    */
   connectedComponent?: Component;
+  /**
+   * 在关闭时销毁弹窗。仅在使用 connectedComponent 时有效
+   */
+  destroyOnClose?: boolean;
   /**
    * 关闭前的回调，返回 false 可以阻止关闭
    * @returns
    */
-  onBeforeClose?: () => void;
+  onBeforeClose?: () => MaybePromise<boolean | undefined>;
   /**
    * 点击取消按钮的回调
    */
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 4e7d7ca78..35858f697 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
@@ -77,8 +77,10 @@ const {
   loading: showLoading,
   modal,
   openAutoFocus,
+  overlayBlur,
   showCancelButton,
   showConfirmButton,
+  submitting,
   title,
   titleTooltip,
   zIndex,
@@ -114,9 +116,9 @@ watch(
 );
 
 watch(
-  () => showLoading.value,
-  (v) => {
-    if (v && wrapperRef.value) {
+  () => [showLoading.value, submitting.value],
+  ([l, s]) => {
+    if ((s || l) && wrapperRef.value) {
       wrapperRef.value.scrollTo({
         // behavior: 'smooth',
         top: 0,
@@ -134,13 +136,13 @@ function handleFullscreen() {
   });
 }
 function interactOutside(e: Event) {
-  if (!closeOnClickModal.value) {
+  if (!closeOnClickModal.value || submitting.value) {
     e.preventDefault();
     e.stopPropagation();
   }
 }
 function escapeKeyDown(e: KeyboardEvent) {
-  if (!closeOnPressEscape.value) {
+  if (!closeOnPressEscape.value || submitting.value) {
     e.preventDefault();
   }
 }
@@ -155,7 +157,11 @@ function handerOpenAutoFocus(e: Event) {
 function pointerDownOutside(e: Event) {
   const target = e.target as HTMLElement;
   const isDismissableModal = target?.dataset.dismissableModal;
-  if (!closeOnClickModal.value || isDismissableModal !== id) {
+  if (
+    !closeOnClickModal.value ||
+    isDismissableModal !== id ||
+    submitting.value
+  ) {
     e.preventDefault();
     e.stopPropagation();
   }
@@ -173,7 +179,7 @@ const getAppendTo = computed(() => {
   <Dialog
     :modal="false"
     :open="state?.isOpen"
-    @update:open="() => modalApi?.close()"
+    @update:open="() => (!submitting ? modalApi?.close() : undefined)"
   >
     <DialogContent
       ref="contentRef"
@@ -194,8 +200,9 @@ const getAppendTo = computed(() => {
       "
       :modal="modal"
       :open="state?.isOpen"
-      :show-close="closable"
+      :show-close="submitting ? false : closable"
       :z-index="zIndex"
+      :overlay-blur="overlayBlur"
       close-class="top-3"
       @close-auto-focus="handleFocusOutside"
       @closed="() => modalApi?.onClosed()"
@@ -245,12 +252,12 @@ const getAppendTo = computed(() => {
         ref="wrapperRef"
         :class="
           cn('relative min-h-40 flex-1 overflow-y-auto p-3', contentClass, {
-            'pointer-events-none overflow-hidden': showLoading,
+            'overflow-hidden': showLoading || submitting,
           })
         "
       >
         <VbenLoading
-          v-if="showLoading"
+          v-if="showLoading || submitting"
           class="size-full h-auto min-h-full"
           spinning
         />
@@ -285,6 +292,7 @@ const getAppendTo = computed(() => {
             :is="components.DefaultButton || VbenButton"
             v-if="showCancelButton"
             variant="ghost"
+            :disabled="submitting"
             @click="() => modalApi?.onCancel()"
           >
             <slot name="cancelText">
@@ -296,7 +304,7 @@ const getAppendTo = computed(() => {
             :is="components.PrimaryButton || VbenButton"
             v-if="showConfirmButton"
             :disabled="confirmDisabled"
-            :loading="confirmLoading"
+            :loading="confirmLoading || submitting"
             @click="() => modalApi?.onConfirm()"
           >
             <slot name="confirmText">
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts
index 218f6bb43..0df53948b 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts
@@ -3,9 +3,10 @@
  * 调整部分细节
  */
 
-import { onBeforeUnmount, onMounted, reactive, ref, watchEffect } from 'vue';
 import type { ComputedRef, Ref } from 'vue';
 
+import { onBeforeUnmount, onMounted, reactive, ref, watchEffect } from 'vue';
+
 import { unrefElement } from '@vueuse/core';
 
 export function useModalDraggable(
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
index f972530de..6cc0a30d5 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -1,14 +1,28 @@
 import type { ExtendedModalApi, ModalApiOptions, ModalProps } from './modal';
 
-import { defineComponent, h, inject, nextTick, provide, reactive } from 'vue';
+import {
+  defineComponent,
+  h,
+  inject,
+  nextTick,
+  provide,
+  reactive,
+  ref,
+} from 'vue';
 
 import { useStore } from '@vben-core/shared/store';
 
-import VbenModal from './modal.vue';
 import { ModalApi } from './modal-api';
+import VbenModal from './modal.vue';
 
 const USER_MODAL_INJECT_KEY = Symbol('VBEN_MODAL_INJECT');
 
+const DEFAULT_MODAL_PROPS: Partial<ModalProps> = {};
+
+export function setDefaultModalProps(props: Partial<ModalProps>) {
+  Object.assign(DEFAULT_MODAL_PROPS, props);
+}
+
 export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
   options: ModalApiOptions = {},
 ) {
@@ -18,6 +32,7 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
   const { connectedComponent } = options;
   if (connectedComponent) {
     const extendedApi = reactive({});
+    const isModalReady = ref(true);
     const Modal = defineComponent(
       (props: TParentModalProps, { attrs, slots }) => {
         provide(USER_MODAL_INJECT_KEY, {
@@ -27,6 +42,11 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
             Object.setPrototypeOf(extendedApi, api);
           },
           options,
+          async reCreateModal() {
+            isModalReady.value = false;
+            await nextTick();
+            isModalReady.value = true;
+          },
         });
         checkProps(extendedApi as ExtendedModalApi, {
           ...props,
@@ -35,7 +55,7 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
         });
         return () =>
           h(
-            connectedComponent,
+            isModalReady.value ? connectedComponent : 'div',
             {
               ...props,
               ...attrs,
@@ -54,6 +74,7 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
   const injectData = inject<any>(USER_MODAL_INJECT_KEY, {});
 
   const mergedOptions = {
+    ...DEFAULT_MODAL_PROPS,
     ...injectData.options,
     ...options,
   } as ModalApiOptions;
@@ -62,6 +83,15 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
     options.onOpenChange?.(isOpen);
     injectData.options?.onOpenChange?.(isOpen);
   };
+
+  const onClosed = mergedOptions.onClosed;
+
+  mergedOptions.onClosed = () => {
+    onClosed?.();
+    if (mergedOptions.destroyOnClose) {
+      injectData.reCreateModal?.();
+    }
+  };
   const api = new ModalApi(mergedOptions);
 
   const extendedApi: ExtendedModalApi = api as never;
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 cccaa690e..8f649d4c8 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.5.1",
+  "version": "5.5.3",
   "#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/avatar/avatar.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
index 1006db462..bd7da7463 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import type { ClassType } from '@vben-core/typings';
 import type {
   AvatarFallbackProps,
   AvatarImageProps,
   AvatarRootProps,
 } from 'radix-vue';
 
+import type { ClassType } from '@vben-core/typings';
+
 import { computed } from 'vue';
 
 import { Avatar, AvatarFallback, AvatarImage } from '../../ui';
 
-interface Props extends AvatarRootProps, AvatarFallbackProps, AvatarImageProps {
+interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
   alt?: string;
   class?: ClassType;
   dot?: boolean;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
index 115b5b3af..1f8b0bc77 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
@@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
     <VbenButton
       v-if="visible"
       :style="backTopStyle"
-      class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float fixed bottom-10 z-[1000] size-10 rounded-full duration-500"
+      class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float z-popup fixed bottom-10 size-10 rounded-full duration-500"
       size="icon"
       variant="icon"
       @click="handleClick"
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue
index 88ee9fd00..3cd42c0c5 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue
@@ -3,8 +3,8 @@ import type { BreadcrumbProps } from './types';
 
 import { useForwardPropsEmits } from 'radix-vue';
 
-import Breadcrumb from './breadcrumb.vue';
 import BreadcrumbBackground from './breadcrumb-background.vue';
+import Breadcrumb from './breadcrumb.vue';
 
 interface Props extends BreadcrumbProps {
   class?: any;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
index fbf251c20..0080f23be 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
@@ -1,7 +1,7 @@
-import type { BreadcrumbStyleType } from '@vben-core/typings';
-
 import type { Component } from 'vue';
 
+import type { BreadcrumbStyleType } from '@vben-core/typings';
+
 export interface IBreadcrumb {
   icon?: Component | string;
   isHome?: boolean;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
index 883974239..7f519cfc5 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -1,9 +1,9 @@
 import type { AsTag } from 'radix-vue';
 
-import type { ButtonVariants, ButtonVariantSize } from '../../ui';
-
 import type { Component } from 'vue';
 
+import type { ButtonVariants, ButtonVariantSize } from '../../ui';
+
 export interface VbenButtonProps {
   /**
    * The element or component this component should render as. Can be overwrite by `asChild`
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
index 4cc4119ae..a9bfed6e3 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { ClassType } from '@vben-core/typings';
 import type {
   ContextMenuContentProps,
   ContextMenuRootEmits,
   ContextMenuRootProps,
 } from 'radix-vue';
 
+import type { ClassType } from '@vben-core/typings';
+
 import type { IContextMenuItem } from './interface';
 
 import { computed } from 'vue';
@@ -22,14 +23,14 @@ import {
 } from '../../ui/context-menu';
 
 const props = defineProps<
-  {
+  ContextMenuRootProps & {
     class?: ClassType;
     contentClass?: ClassType;
     contentProps?: ContextMenuContentProps;
     handlerData?: Record<string, any>;
     itemClass?: ClassType;
     menus: (data: any) => IContextMenuItem[];
-  } & ContextMenuRootProps
+  }
 >();
 
 const emits = defineEmits<ContextMenuRootEmits>();
@@ -68,7 +69,7 @@ function handleClick(menu: IContextMenuItem) {
     <ContextMenuContent
       :class="contentClass"
       v-bind="contentProps"
-      class="side-content z-[1000]"
+      class="side-content z-popup"
     >
       <template v-for="menu in menusView" :key="menu.key">
         <ContextMenuItem
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
index f528d61cf..287e89191 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { ClassType } from '@vben-core/typings';
 import type {
   HoverCardContentProps,
   HoverCardRootEmits,
   HoverCardRootProps,
 } from 'radix-vue';
 
+import type { ClassType } from '@vben-core/typings';
+
 import { computed } from 'vue';
 
 import { useForwardPropsEmits } from 'radix-vue';
@@ -46,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <HoverCardContent
       :class="contentClass"
       v-bind="contentProps"
-      class="side-content z-[1000]"
+      class="side-content z-popup"
     >
       <slot></slot>
     </HoverCardContent>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue
index bb3d3a5bf..80de0d706 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { type Component, computed } from 'vue';
+import type { Component } from 'vue';
+
+import { computed } from 'vue';
 
 import { IconDefault, IconifyIcon } from '@vben-core/icons';
 import {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
index b38e0b42d..07d5d0621 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { ClassType } from '@vben-core/typings';
 import type {
   PopoverContentProps,
   PopoverRootEmits,
   PopoverRootProps,
 } from 'radix-vue';
 
+import type { ClassType } from '@vben-core/typings';
+
 import { computed } from 'vue';
 
 import { useForwardPropsEmits } from 'radix-vue';
@@ -47,7 +48,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
       <PopoverContent
         :class="contentClass"
-        class="side-content z-[1000]"
+        class="side-content z-popup"
         v-bind="contentProps"
       >
         <slot></slot>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
index 8476d7a84..87f9769ba 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { Component, PropType } from 'vue';
+
 import { defineComponent, h } from 'vue';
 
 import { isFunction, isObject } from '@vben-core/shared/utils';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
index 886eb6d21..895c6042c 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
@@ -7,7 +7,7 @@ import { cn } from '@vben-core/shared/utils';
 
 import { TabsIndicator, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & TabsIndicatorProps>();
+const props = defineProps<TabsIndicatorProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
index e19836be2..52e2b38f5 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
@@ -27,3 +27,9 @@ const props = defineProps<Props>();
     </SelectContent>
   </Select>
 </template>
+
+<style lang="scss" scoped>
+button[role='combobox'][data-placeholder] {
+  color: hsl(var(--muted-foreground));
+}
+</style>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
index a72ed49f7..58eab2ebd 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
@@ -73,12 +73,23 @@ function onTransitionEnd() {
     @transitionend="onTransitionEnd"
   >
     <div
+      :class="{ paused: !renderSpinner }"
       class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
     ></div>
   </div>
 </template>
 
 <style scoped>
+.paused {
+  &::before {
+    animation-play-state: paused !important;
+  }
+
+  &::after {
+    animation-play-state: paused !important;
+  }
+}
+
 .loader {
   &::before {
     animation: loader-shadow-ani 0.5s linear infinite;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
index ae5f5e452..defb06514 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import type { ClassType } from '@vben-core/typings';
 import type { TooltipContentProps } from 'radix-vue';
 
 import type { StyleValue } from 'vue';
 
+import type { ClassType } from '@vben-core/typings';
+
 import {
   Tooltip,
   TooltipContent,
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue
index fb8f05cc0..94f5477d9 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  AccordionRoot,
-  type AccordionRootEmits,
-  type AccordionRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { AccordionRootEmits, AccordionRootProps } from 'radix-vue';
+
+import { AccordionRoot, useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<AccordionRootProps>();
 const emits = defineEmits<AccordionRootEmits>();
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
index 5183a5bec..8e590efdb 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { AccordionContentProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AccordionContent, type AccordionContentProps } from 'radix-vue';
+import { AccordionContent } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & AccordionContentProps>();
+const props = defineProps<AccordionContentProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue
index 189d0c254..11c1c2dd1 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
+import type { AccordionItemProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  AccordionItem,
-  type AccordionItemProps,
-  useForwardProps,
-} from 'radix-vue';
+import { AccordionItem, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & AccordionItemProps>();
+const props = defineProps<AccordionItemProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
index 48d65e6f6..bbe4d5bd8 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { AccordionTriggerProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronDown } from 'lucide-vue-next';
-import {
-  AccordionHeader,
-  AccordionTrigger,
-  type AccordionTriggerProps,
-} from 'radix-vue';
+import { AccordionHeader, AccordionTrigger } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & AccordionTriggerProps>();
+const props = defineProps<AccordionTriggerProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
index d3eeb4f0f..0b0b2eb7c 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import type { AvatarVariants } from './avatar';
+
 import { cn } from '@vben-core/shared/utils';
 
 import { AvatarRoot } from 'radix-vue';
 
-import { avatarVariant, type AvatarVariants } from './avatar';
+import { avatarVariant } from './avatar';
 
 const props = withDefaults(
   defineProps<{
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
index fb115ed4b..81e837fb7 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue';
+import type { AvatarFallbackProps } from 'radix-vue';
+
+import { AvatarFallback } from 'radix-vue';
 
 const props = defineProps<AvatarFallbackProps>();
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
index bac84a5c4..787eeeb7e 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue';
+import type { AvatarImageProps } from 'radix-vue';
+
+import { AvatarImage } from 'radix-vue';
 
 const props = defineProps<AvatarImageProps>();
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/avatar.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/avatar.ts
index b99641556..8aae81f49 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/avatar.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/avatar.ts
@@ -1,4 +1,6 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';
 
 export const avatarVariant = cva(
   'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue
index 729dc9dc3..818d40452 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { BadgeVariants } from './badge';
+
 import { cn } from '@vben-core/shared/utils';
 
-import { type BadgeVariants, badgeVariants } from './badge';
+import { badgeVariants } from './badge';
 
 const props = defineProps<{
   class?: any;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts
index dd6b22743..cf6bff813 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts
@@ -1,4 +1,6 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';
 
 export const badgeVariants = cva(
   'inline-flex items-center rounded-md border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
index c0b95c7ee..fb985abe8 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
+import type { PrimitiveProps } from 'radix-vue';
+
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { Primitive } from 'radix-vue';
 
-const props = withDefaults(defineProps<{ class?: any } & PrimitiveProps>(), {
+const props = withDefaults(defineProps<PrimitiveProps & { class?: any }>(), {
   as: 'a',
 });
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue
index 7895d0106..03e67803b 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue';
+
 import type { ButtonVariants, ButtonVariantSize } from './types';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { Primitive } from 'radix-vue';
 
 import { buttonVariants } from './button';
 
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
index a0462e6e5..0fc81375a 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
@@ -12,7 +12,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & CheckboxRootProps>();
+const props = defineProps<CheckboxRootProps & { class?: any }>();
 const emits = defineEmits<CheckboxRootEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
index 5a7875645..cf592485d 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import type {
+  ContextMenuCheckboxItemEmits,
+  ContextMenuCheckboxItemProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -6,13 +11,11 @@ import { cn } from '@vben-core/shared/utils';
 import { Check } from 'lucide-vue-next';
 import {
   ContextMenuCheckboxItem,
-  type ContextMenuCheckboxItemEmits,
-  type ContextMenuCheckboxItemProps,
   ContextMenuItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & ContextMenuCheckboxItemProps>();
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: any }>();
 const emits = defineEmits<ContextMenuCheckboxItemEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
index 87796a110..bd663b160 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
+import type {
+  ContextMenuContentEmits,
+  ContextMenuContentProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import {
   ContextMenuContent,
-  type ContextMenuContentEmits,
-  type ContextMenuContentProps,
   ContextMenuPortal,
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & ContextMenuContentProps>();
+const props = defineProps<ContextMenuContentProps & { class?: any }>();
 const emits = defineEmits<ContextMenuContentEmits>();
 
 const delegatedProps = computed(() => {
@@ -29,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="forwarded"
       :class="
         cn(
-          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-[1000] min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
           props.class,
         )
       "
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue
index d1d580421..e00532610 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue';
+import type { ContextMenuGroupProps } from 'radix-vue';
+
+import { ContextMenuGroup } from 'radix-vue';
 
 const props = defineProps<ContextMenuGroupProps>();
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
index ed11878d4..aab42115d 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  ContextMenuItem,
-  type ContextMenuItemEmits,
-  type ContextMenuItemProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { ContextMenuItem, useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<
-  { class?: any; inset?: boolean } & ContextMenuItemProps
+  ContextMenuItemProps & { class?: any; inset?: boolean }
 >();
 const emits = defineEmits<ContextMenuItemEmits>();
 
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
index eff8fe4c0..a3aa954e6 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import type { ContextMenuLabelProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue';
+import { ContextMenuLabel } from 'radix-vue';
 
 const props = defineProps<
-  { class?: any; inset?: boolean } & ContextMenuLabelProps
+  ContextMenuLabelProps & { class?: any; inset?: boolean }
 >();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue
index bcd95ed0d..735657914 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ContextMenuPortal, type ContextMenuPortalProps } from 'radix-vue';
+import type { ContextMenuPortalProps } from 'radix-vue';
+
+import { ContextMenuPortal } from 'radix-vue';
 
 const props = defineProps<ContextMenuPortalProps>();
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue
index bfed356d5..b757dd516 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import {
-  ContextMenuRadioGroup,
-  type ContextMenuRadioGroupEmits,
-  type ContextMenuRadioGroupProps,
-  useForwardPropsEmits,
+import type {
+  ContextMenuRadioGroupEmits,
+  ContextMenuRadioGroupProps,
 } from 'radix-vue';
 
+import { ContextMenuRadioGroup, useForwardPropsEmits } from 'radix-vue';
+
 const props = defineProps<ContextMenuRadioGroupProps>();
 const emits = defineEmits<ContextMenuRadioGroupEmits>();
 
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
index 05d7a4923..d37b96126 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import type {
+  ContextMenuRadioItemEmits,
+  ContextMenuRadioItemProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -7,12 +12,10 @@ import { Circle } from 'lucide-vue-next';
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
-  type ContextMenuRadioItemEmits,
-  type ContextMenuRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & ContextMenuRadioItemProps>();
+const props = defineProps<ContextMenuRadioItemProps & { class?: any }>();
 const emits = defineEmits<ContextMenuRadioItemEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
index 56231e00c..482e47e28 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
+import type { ContextMenuSeparatorProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  ContextMenuSeparator,
-  type ContextMenuSeparatorProps,
-} from 'radix-vue';
+import { ContextMenuSeparator } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & ContextMenuSeparatorProps>();
+const props = defineProps<ContextMenuSeparatorProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue
index a3747fe55..309f19d8d 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  ContextMenuSub,
-  type ContextMenuSubEmits,
-  type ContextMenuSubProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { ContextMenuSubEmits, ContextMenuSubProps } from 'radix-vue';
+
+import { ContextMenuSub, useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<ContextMenuSubProps>();
 const emits = defineEmits<ContextMenuSubEmits>();
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
index 7e7812867..9084a5d98 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import type {
+  DropdownMenuSubContentEmits,
+  DropdownMenuSubContentProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  ContextMenuSubContent,
-  type DropdownMenuSubContentEmits,
-  type DropdownMenuSubContentProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { ContextMenuSubContent, useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DropdownMenuSubContentProps>();
+const props = defineProps<DropdownMenuSubContentProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
index fbf6fe1d9..838f08ef6 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
+import type { ContextMenuSubTriggerProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRight } from 'lucide-vue-next';
-import {
-  ContextMenuSubTrigger,
-  type ContextMenuSubTriggerProps,
-  useForwardProps,
-} from 'radix-vue';
+import { ContextMenuSubTrigger, useForwardProps } from 'radix-vue';
 
 const props = defineProps<
-  {
+  ContextMenuSubTriggerProps & {
     class?: any;
     inset?: boolean;
-  } & ContextMenuSubTriggerProps
+  }
 >();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue
index 41446d020..242826e80 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import {
-  ContextMenuTrigger,
-  type ContextMenuTriggerProps,
-  useForwardProps,
-} from 'radix-vue';
+import type { ContextMenuTriggerProps } from 'radix-vue';
+
+import { ContextMenuTrigger, useForwardProps } from 'radix-vue';
 
 const props = defineProps<ContextMenuTriggerProps>();
 
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue
index 36e4227cd..c16427230 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  DialogRoot,
-  type DialogRootEmits,
-  type DialogRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+
+import { DialogRoot, useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue
index b168349c1..3cfcd0af9 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue';
+import type { DialogCloseProps } from 'radix-vue';
+
+import { DialogClose } from 'radix-vue';
 
 const props = defineProps<DialogCloseProps>();
 </script>
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 9a8d73962..e7ef1b589 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
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+
 import type { ClassType } from '@vben-core/typings';
 
 import { computed, ref } from 'vue';
@@ -9,8 +11,6 @@ import { X } from 'lucide-vue-next';
 import {
   DialogClose,
   DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue';
@@ -19,20 +19,21 @@ import DialogOverlay from './DialogOverlay.vue';
 
 const props = withDefaults(
   defineProps<
-    {
+    DialogContentProps & {
       appendTo?: HTMLElement | string;
       class?: ClassType;
       closeClass?: ClassType;
       modal?: boolean;
       open?: boolean;
+      overlayBlur?: number;
       showClose?: boolean;
       zIndex?: number;
-    } & DialogContentProps
+    }
   >(),
-  { appendTo: 'body', showClose: true, zIndex: 1000 },
+  { appendTo: 'body', showClose: true },
 );
 const emits = defineEmits<
-  { close: []; closed: []; opened: [] } & DialogContentEmits
+  DialogContentEmits & { close: []; closed: []; opened: [] }
 >();
 
 const delegatedProps = computed(() => {
@@ -82,18 +83,23 @@ defineExpose({
     <Transition name="fade">
       <DialogOverlay
         v-if="open && modal"
-        :style="{ zIndex, position }"
+        :style="{
+          ...(zIndex ? { zIndex } : {}),
+          position,
+          backdropFilter:
+            overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
+        }"
         @click="() => emits('close')"
       />
     </Transition>
     <DialogContent
       ref="contentRef"
-      :style="{ zIndex, position }"
+      :style="{ ...(zIndex ? { 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%] w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          'z-popup 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/DialogDescription.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
index 5ca8694e3..436fff836 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
+import type { DialogDescriptionProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  DialogDescription,
-  type DialogDescriptionProps,
-  useForwardProps,
-} from 'radix-vue';
+import { DialogDescription, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DialogDescriptionProps>();
+const props = defineProps<DialogDescriptionProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
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 f2142ac66..f0b2cff02 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,5 +7,5 @@ useScrollLock();
 const id = inject('DISMISSABLE_MODAL_ID');
 </script>
 <template>
-  <div :data-dismissable-modal="id" class="bg-overlay inset-0"></div>
+  <div :data-dismissable-modal="id" class="bg-overlay z-popup 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 99ab7b111..95908abe5 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
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -7,15 +9,13 @@ import { X } from 'lucide-vue-next';
 import {
   DialogClose,
   DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue';
 
 const props = withDefaults(
-  defineProps<{ class?: any; zIndex?: number } & DialogContentProps>(),
+  defineProps<DialogContentProps & { class?: any; zIndex?: number }>(),
   { zIndex: 1000 },
 );
 const emits = defineEmits<DialogContentEmits>();
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue
index 1776c01e4..3804cfb4a 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { DialogTitleProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue';
+import { DialogTitle, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DialogTitleProps>();
+const props = defineProps<DialogTitleProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue
index 8ae4c3366..6a7b8d212 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
+import type { DialogTriggerProps } from 'radix-vue';
+
+import { DialogTrigger } from 'radix-vue';
 
 const props = defineProps<DialogTriggerProps>();
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue
index 6a4328e63..12c20692b 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  DropdownMenuRoot,
-  type DropdownMenuRootEmits,
-  type DropdownMenuRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'radix-vue';
+
+import { DropdownMenuRoot, useForwardPropsEmits } from 'radix-vue';
 
 const props = withDefaults(defineProps<DropdownMenuRootProps>(), {
   modal: false,
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 508218ccd..f9b4b0b24 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import type {
+  DropdownMenuCheckboxItemEmits,
+  DropdownMenuCheckboxItemProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -6,13 +11,11 @@ import { cn } from '@vben-core/shared/utils';
 import { Check } from 'lucide-vue-next';
 import {
   DropdownMenuCheckboxItem,
-  type DropdownMenuCheckboxItemEmits,
-  type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DropdownMenuCheckboxItemProps>();
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
index 9800a90d8..ae1c9c161 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,18 +1,21 @@
 <script setup lang="ts">
+import type {
+  DropdownMenuContentEmits,
+  DropdownMenuContentProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import {
   DropdownMenuContent,
-  type DropdownMenuContentEmits,
-  type DropdownMenuContentProps,
   DropdownMenuPortal,
   useForwardPropsEmits,
 } from 'radix-vue';
 
 const props = withDefaults(
-  defineProps<{ class?: any } & DropdownMenuContentProps>(),
+  defineProps<DropdownMenuContentProps & { class?: any }>(),
   {
     sideOffset: 4,
   },
@@ -34,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="forwarded"
       :class="
         cn(
-          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-[1000] min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
           props.class,
         )
       "
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue
index f1e2305f4..2f28d1635 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue';
+import type { DropdownMenuGroupProps } from 'radix-vue';
+
+import { DropdownMenuGroup } from 'radix-vue';
 
 const props = defineProps<DropdownMenuGroupProps>();
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
index 3aac66780..c8836d47b 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { DropdownMenuItemProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  DropdownMenuItem,
-  type DropdownMenuItemProps,
-  useForwardProps,
-} from 'radix-vue';
+import { DropdownMenuItem, useForwardProps } from 'radix-vue';
 
 const props = defineProps<
-  { class?: any; inset?: boolean } & DropdownMenuItemProps
+  DropdownMenuItemProps & { class?: any; inset?: boolean }
 >();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue
index decd5d2be..baf202745 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { DropdownMenuLabelProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  DropdownMenuLabel,
-  type DropdownMenuLabelProps,
-  useForwardProps,
-} from 'radix-vue';
+import { DropdownMenuLabel, useForwardProps } from 'radix-vue';
 
 const props = defineProps<
-  { class?: any; inset?: boolean } & DropdownMenuLabelProps
+  DropdownMenuLabelProps & { class?: any; inset?: boolean }
 >();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index 9c28706c1..f2c3a7593 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import {
-  DropdownMenuRadioGroup,
-  type DropdownMenuRadioGroupEmits,
-  type DropdownMenuRadioGroupProps,
-  useForwardPropsEmits,
+import type {
+  DropdownMenuRadioGroupEmits,
+  DropdownMenuRadioGroupProps,
 } from 'radix-vue';
 
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'radix-vue';
+
 const props = defineProps<DropdownMenuRadioGroupProps>();
 const emits = defineEmits<DropdownMenuRadioGroupEmits>();
 
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 54bcee374..253d5cca5 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import type {
+  DropdownMenuRadioItemEmits,
+  DropdownMenuRadioItemProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -7,12 +12,10 @@ import { Circle } from 'lucide-vue-next';
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
-  type DropdownMenuRadioItemEmits,
-  type DropdownMenuRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DropdownMenuRadioItemProps>();
+const props = defineProps<DropdownMenuRadioItemProps & { class?: any }>();
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>();
 
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
index f18fc798d..76847f5a5 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  DropdownMenuSeparator,
-  type DropdownMenuSeparatorProps,
-} from 'radix-vue';
+import { DropdownMenuSeparator } from 'radix-vue';
 
 const props = defineProps<
-  {
+  DropdownMenuSeparatorProps & {
     class?: any;
-  } & DropdownMenuSeparatorProps
+  }
 >();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue
index 088f87d38..35d07726f 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  DropdownMenuSub,
-  type DropdownMenuSubEmits,
-  type DropdownMenuSubProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'radix-vue';
+
+import { DropdownMenuSub, useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<DropdownMenuSubProps>();
 const emits = defineEmits<DropdownMenuSubEmits>();
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
index a36892127..e2981d36b 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import type {
+  DropdownMenuSubContentEmits,
+  DropdownMenuSubContentProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  DropdownMenuSubContent,
-  type DropdownMenuSubContentEmits,
-  type DropdownMenuSubContentProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { DropdownMenuSubContent, useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DropdownMenuSubContentProps>();
+const props = defineProps<DropdownMenuSubContentProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 5efdbf6d7..fb37508fd 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRight } from 'lucide-vue-next';
-import {
-  DropdownMenuSubTrigger,
-  type DropdownMenuSubTriggerProps,
-  useForwardProps,
-} from 'radix-vue';
+import { DropdownMenuSubTrigger, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DropdownMenuSubTriggerProps>();
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue
index 3cf6fa172..736e80815 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import {
-  DropdownMenuTrigger,
-  type DropdownMenuTriggerProps,
-  useForwardProps,
-} from 'radix-vue';
+import type { DropdownMenuTriggerProps } from 'radix-vue';
+
+import { DropdownMenuTrigger, useForwardProps } from 'radix-vue';
 
 const props = defineProps<DropdownMenuTriggerProps>();
 
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue
index 797d6e237..acd2f2b42 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue
@@ -6,7 +6,7 @@ import { cn } from '@vben-core/shared/utils';
 import { Label } from '../label';
 import { useFormField } from './useFormField';
 
-const props = defineProps<{ class?: any } & LabelProps>();
+const props = defineProps<LabelProps & { class?: any }>();
 
 const { formItemId } = useFormField();
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/form/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/form/index.ts
index 3e8467b25..1d45b2b4d 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/form/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/form/index.ts
@@ -5,7 +5,7 @@ export { default as FormLabel } from './FormLabel.vue';
 export { default as FormMessage } from './FormMessage.vue';
 export { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
 export {
+  Form,
   Field as FormField,
   FieldArray as FormFieldArray,
-  Form,
 } from 'vee-validate';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
index 6c4ac04fc..f960699b9 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  HoverCardRoot,
-  type HoverCardRootEmits,
-  type HoverCardRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { HoverCardRootEmits, HoverCardRootProps } from 'radix-vue';
+
+import { HoverCardRoot, useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<HoverCardRootProps>();
 const emits = defineEmits<HoverCardRootEmits>();
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
index 444a182c9..15637208f 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
+import type { HoverCardContentProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  HoverCardContent,
-  type HoverCardContentProps,
-  HoverCardPortal,
-  useForwardProps,
-} from 'radix-vue';
+import { HoverCardContent, HoverCardPortal, useForwardProps } from 'radix-vue';
 
 const props = withDefaults(
-  defineProps<{ class?: any } & HoverCardContentProps>(),
+  defineProps<HoverCardContentProps & { class?: any }>(),
   {
     sideOffset: 4,
   },
@@ -32,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
       v-bind="forwardedProps"
       :class="
         cn(
-          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-[1000] w-64 rounded-md border p-4 shadow-md outline-none',
+          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup w-64 rounded-md border p-4 shadow-md outline-none',
           props.class,
         )
       "
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue
index fe6893a22..8c473c077 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue';
+import type { HoverCardTriggerProps } from 'radix-vue';
+
+import { HoverCardTrigger } from 'radix-vue';
 
 const props = defineProps<HoverCardTriggerProps>();
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue
index a4169355d..ba6890a86 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { LabelProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Label, type LabelProps } from 'radix-vue';
+import { Label } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & LabelProps>();
+const props = defineProps<LabelProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue
index 4d01c6abf..4ba9459ba 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue
@@ -7,7 +7,7 @@ import { cn } from '@vben-core/shared/utils';
 
 import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & NumberFieldRootProps>();
+const props = defineProps<NumberFieldRootProps & { class?: any }>();
 const emits = defineEmits<NumberFieldRootEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue
index 9f40db90a..b9e3417c7 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue
@@ -8,7 +8,7 @@ import { cn } from '@vben-core/shared/utils';
 import { Minus } from 'lucide-vue-next';
 import { NumberFieldDecrement, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & NumberFieldDecrementProps>();
+const props = defineProps<NumberFieldDecrementProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
index bfdb0bfe5..be81bd611 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
@@ -8,7 +8,7 @@ import { cn } from '@vben-core/shared/utils';
 import { Plus } from 'lucide-vue-next';
 import { NumberFieldIncrement, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & NumberFieldIncrementProps>();
+const props = defineProps<NumberFieldIncrementProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
index a05beb8a6..14ad6721c 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import type { PaginationEllipsisProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { MoreHorizontal } from 'lucide-vue-next';
-import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue';
+import { PaginationEllipsis } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & PaginationEllipsisProps>();
+const props = defineProps<PaginationEllipsisProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
index ea5ca42d2..32b1e7b23 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
+import type { PaginationFirstProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronsLeft } from 'lucide-vue-next';
-import { PaginationFirst, type PaginationFirstProps } from 'radix-vue';
+import { PaginationFirst } from 'radix-vue';
 
 import { Button } from '../button';
 
 const props = withDefaults(
-  defineProps<{ class?: any } & PaginationFirstProps>(),
+  defineProps<PaginationFirstProps & { class?: any }>(),
   {
     asChild: true,
   },
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue
index d6b24fd87..a63f85bd5 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
+import type { PaginationLastProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronsRight } from 'lucide-vue-next';
-import { PaginationLast, type PaginationLastProps } from 'radix-vue';
+import { PaginationLast } from 'radix-vue';
 
 import { Button } from '../button';
 
 const props = withDefaults(
-  defineProps<{ class?: any } & PaginationLastProps>(),
+  defineProps<PaginationLastProps & { class?: any }>(),
   {
     asChild: true,
   },
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue
index cc6759631..2166bcaf8 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
+import type { PaginationNextProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRight } from 'lucide-vue-next';
-import { PaginationNext, type PaginationNextProps } from 'radix-vue';
+import { PaginationNext } from 'radix-vue';
 
 import { Button } from '../button';
 
 const props = withDefaults(
-  defineProps<{ class?: any } & PaginationNextProps>(),
+  defineProps<PaginationNextProps & { class?: any }>(),
   {
     asChild: true,
   },
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue
index 4996e687b..0527f48f8 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
+import type { PaginationPrevProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronLeft } from 'lucide-vue-next';
-import { PaginationPrev, type PaginationPrevProps } from 'radix-vue';
+import { PaginationPrev } from 'radix-vue';
 
 import { Button } from '../button';
 
 const props = withDefaults(
-  defineProps<{ class?: any } & PaginationPrevProps>(),
+  defineProps<PaginationPrevProps & { class?: any }>(),
   {
     asChild: true,
   },
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/index.ts
index ce93dc4ea..141e0740a 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/index.ts
@@ -4,7 +4,7 @@ export { default as PaginationLast } from './PaginationLast.vue';
 export { default as PaginationNext } from './PaginationNext.vue';
 export { default as PaginationPrev } from './PaginationPrev.vue';
 export {
+  PaginationRoot as Pagination,
   PaginationList,
   PaginationListItem,
-  PaginationRoot as Pagination,
 } from 'radix-vue';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue
index 298753b39..8da2b374d 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
+import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  PinInputRoot,
-  type PinInputRootEmits,
-  type PinInputRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { PinInputRoot, useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & PinInputRootProps>();
+const props = defineProps<PinInputRootProps & { class?: any }>();
 const emits = defineEmits<PinInputRootEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue
index 393273dbb..474041a47 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue';
+import { Primitive, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & PrimitiveProps>();
+const props = defineProps<PrimitiveProps & { class?: any }>();
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
   return delegated;
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 ee74d768d..a70130ccf 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
@@ -1,15 +1,13 @@
 <script setup lang="ts">
+import type { PinInputInputProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  PinInputInput,
-  type PinInputInputProps,
-  useForwardProps,
-} from 'radix-vue';
+import { PinInputInput, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & PinInputInputProps>();
+const props = defineProps<PinInputInputProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue
index d6b867a7f..f352f8e49 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue';
+
 import { Dot } from 'lucide-vue-next';
-import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue';
+import { Primitive, useForwardProps } from 'radix-vue';
 
 const props = defineProps<PrimitiveProps>();
 const forwardedProps = useForwardProps(props);
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
index 9d1799b73..1a025a517 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
@@ -1,22 +1,18 @@
 <script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  PopoverContent,
-  type PopoverContentEmits,
-  type PopoverContentProps,
-  PopoverPortal,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'radix-vue';
 
 defineOptions({
   inheritAttrs: false,
 });
 
 const props = withDefaults(
-  defineProps<{ class?: any } & PopoverContentProps>(),
+  defineProps<PopoverContentProps & { class?: any }>(),
   {
     align: 'center',
     sideOffset: 4,
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue
index ca3950787..538fc320e 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue';
+import type { PopoverTriggerProps } from 'radix-vue';
+
+import { PopoverTrigger } from 'radix-vue';
 
 const props = defineProps<PopoverTriggerProps>();
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue
index 35c48701b..0bdcafc3c 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  RadioGroupRoot,
-  type RadioGroupRootEmits,
-  type RadioGroupRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { RadioGroupRoot, useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & RadioGroupRootProps>();
+const props = defineProps<RadioGroupRootProps & { class?: any }>();
 const emits = defineEmits<RadioGroupRootEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
index 23468138c..d2bce2e9d 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { RadioGroupItemProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -7,11 +9,10 @@ import { Circle } from 'lucide-vue-next';
 import {
   RadioGroupIndicator,
   RadioGroupItem,
-  type RadioGroupItemProps,
   useForwardProps,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & RadioGroupItemProps>();
+const props = defineProps<RadioGroupItemProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
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
index 81dc3fb41..ae0b0a627 100644
--- 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
@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import type {
+  SplitterResizeHandleEmits,
+  SplitterResizeHandleProps,
+} from 'radix-vue';
+
+import type { HTMLAttributes } from 'vue';
+
+import { computed } 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';
+import { SplitterResizeHandle, useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<
-  {
+  SplitterResizeHandleProps & {
     class?: HTMLAttributes['class'];
     withHandle?: boolean;
-  } & SplitterResizeHandleProps
+  }
 >();
 const emits = defineEmits<SplitterResizeHandleEmits>();
 
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
index 8ea15f994..09f5fded5 100644
--- 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
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import type { SplitterGroupEmits, SplitterGroupProps } from 'radix-vue';
+
+import type { HTMLAttributes } from 'vue';
+
+import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  SplitterGroup,
-  type SplitterGroupEmits,
-  type SplitterGroupProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { SplitterGroup, useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<
-  { class?: HTMLAttributes['class'] } & SplitterGroupProps
+  SplitterGroupProps & { class?: HTMLAttributes['class'] }
 >();
 const emits = defineEmits<SplitterGroupEmits>();
 
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 88538489b..95676542d 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
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ScrollAreaRootProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -6,7 +8,6 @@ import { cn } from '@vben-core/shared/utils';
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
-  type ScrollAreaRootProps,
   ScrollAreaViewport,
 } from 'radix-vue';
 
@@ -14,11 +15,11 @@ import ScrollBar from './ScrollBar.vue';
 
 const props = withDefaults(
   defineProps<
-    {
+    ScrollAreaRootProps & {
       class?: any;
       onScroll?: (event: Event) => void;
       viewportProps?: { onScroll: (event: Event) => void };
-    } & ScrollAreaRootProps
+    }
   >(),
   {
     onScroll: () => {},
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
index f79ff240b..e19eb070d 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  ScrollAreaScrollbar,
-  type ScrollAreaScrollbarProps,
-  ScrollAreaThumb,
-} from 'radix-vue';
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'radix-vue';
 
 const props = withDefaults(
-  defineProps<{ class?: any } & ScrollAreaScrollbarProps>(),
+  defineProps<ScrollAreaScrollbarProps & { class?: any }>(),
   {
     orientation: 'vertical',
   },
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
index 568a280ff..39f05cd22 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import {
   SelectContent,
-  type SelectContentEmits,
-  type SelectContentProps,
   SelectPortal,
   SelectViewport,
   useForwardPropsEmits,
@@ -20,7 +20,7 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<{ class?: any } & SelectContentProps>(),
+  defineProps<SelectContentProps & { class?: any }>(),
   {
     position: 'popper',
   },
@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border relative z-[1000] max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
+          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup relative max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           props.class,
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue
index df2296c1e..58821bc26 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { SelectGroupProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { SelectGroup, type SelectGroupProps } from 'radix-vue';
+import { SelectGroup } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & SelectGroupProps>();
+const props = defineProps<SelectGroupProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
index ea96e10f1..de1354031 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { SelectItemProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -7,12 +9,11 @@ import { Check } from 'lucide-vue-next';
 import {
   SelectItem,
   SelectItemIndicator,
-  type SelectItemProps,
   SelectItemText,
   useForwardProps,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & SelectItemProps>();
+const props = defineProps<SelectItemProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue
index ec6ca07b9..7d7183429 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { SelectItemText, type SelectItemTextProps } from 'radix-vue';
+import type { SelectItemTextProps } from 'radix-vue';
+
+import { SelectItemText } from 'radix-vue';
 
 const props = defineProps<SelectItemTextProps>();
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue
index 598426865..0dd694f80 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import type { SelectLabelProps } from 'radix-vue';
+
 import { cn } from '@vben-core/shared/utils';
 
-import { SelectLabel, type SelectLabelProps } from 'radix-vue';
+import { SelectLabel } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & SelectLabelProps>();
+const props = defineProps<SelectLabelProps & { class?: any }>();
 </script>
 
 <template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue
index 9aa28b082..f79ef6765 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { SelectScrollDownButtonProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronDown } from 'lucide-vue-next';
-import {
-  SelectScrollDownButton,
-  type SelectScrollDownButtonProps,
-  useForwardProps,
-} from 'radix-vue';
+import { SelectScrollDownButton, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & SelectScrollDownButtonProps>();
+const props = defineProps<SelectScrollDownButtonProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue
index c1b23bb34..dce8b14a0 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronUp } from 'lucide-vue-next';
-import {
-  SelectScrollUpButton,
-  type SelectScrollUpButtonProps,
-  useForwardProps,
-} from 'radix-vue';
+import { SelectScrollUpButton, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & SelectScrollUpButtonProps>();
+const props = defineProps<SelectScrollUpButtonProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
index f93a7d1c5..3028a09fa 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { SelectSeparatorProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue';
+import { SelectSeparator } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & SelectSeparatorProps>();
+const props = defineProps<SelectSeparatorProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
index 9cb34f0f4..a6fc94ef7 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
+import type { SelectTriggerProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronDown } from 'lucide-vue-next';
-import {
-  SelectIcon,
-  SelectTrigger,
-  type SelectTriggerProps,
-  useForwardProps,
-} from 'radix-vue';
-
-const props = defineProps<{ class?: any } & SelectTriggerProps>();
+import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue';
+
+const props = defineProps<SelectTriggerProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue
index 197579a31..d2fe7ea92 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { SelectValue, type SelectValueProps } from 'radix-vue';
+import type { SelectValueProps } from 'radix-vue';
+
+import { SelectValue } from 'radix-vue';
 
 const props = defineProps<SelectValueProps>();
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
index cf6ca4a76..20ea43782 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { SeparatorProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Separator, type SeparatorProps } from 'radix-vue';
+import { Separator } from 'radix-vue';
 
-const props = defineProps<{ class?: any; label?: string } & SeparatorProps>();
+const props = defineProps<SeparatorProps & { class?: any; label?: string }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue
index 36e4227cd..c16427230 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  DialogRoot,
-  type DialogRootEmits,
-  type DialogRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+
+import { DialogRoot, useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetClose.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetClose.vue
index b168349c1..3cfcd0af9 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetClose.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetClose.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue';
+import type { DialogCloseProps } from 'radix-vue';
+
+import { DialogClose } from 'radix-vue';
 
 const props = defineProps<DialogCloseProps>();
 </script>
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 5b09675c4..b9d8baf40 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
@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+
+import type { SheetVariants } from './sheet';
+
+import { computed, ref } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
-  DialogPortal,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { DialogContent, DialogPortal, useForwardPropsEmits } from 'radix-vue';
 
-import { type SheetVariants, sheetVariants } from './sheet';
+import { sheetVariants } from './sheet';
 import SheetOverlay from './SheetOverlay.vue';
 
 interface SheetContentProps extends DialogContentProps {
@@ -19,6 +17,7 @@ interface SheetContentProps extends DialogContentProps {
   class?: any;
   modal?: boolean;
   open?: boolean;
+  overlayBlur?: number;
   side?: SheetVariants['side'];
   zIndex?: number;
 }
@@ -29,10 +28,11 @@ defineOptions({
 
 const props = withDefaults(defineProps<SheetContentProps>(), {
   appendTo: 'body',
-  zIndex: 1000,
 });
 
-const emits = defineEmits<DialogContentEmits>();
+const emits = defineEmits<
+  DialogContentEmits & { close: []; closed: []; opened: [] }
+>();
 
 const delegatedProps = computed(() => {
   const {
@@ -59,16 +59,40 @@ const position = computed(() => {
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const contentRef = ref<InstanceType<typeof DialogContent> | null>(null);
+function onAnimationEnd(event: AnimationEvent) {
+  // 只有在 contentRef 的动画结束时才触发 opened/closed 事件
+  if (event.target === contentRef.value?.$el) {
+    if (props.open) {
+      emits('opened');
+    } else {
+      emits('closed');
+    }
+  }
+}
 </script>
 
 <template>
   <DialogPortal :to="appendTo">
     <Transition name="fade">
-      <SheetOverlay v-if="open && modal" :style="{ zIndex, position }" />
+      <SheetOverlay
+        v-if="open && modal"
+        :style="{
+          ...(zIndex ? { zIndex } : {}),
+          position,
+          backdropFilter:
+            overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
+        }"
+      />
     </Transition>
     <DialogContent
-      :class="cn(sheetVariants({ side }), props.class)"
-      :style="{ zIndex, position }"
+      ref="contentRef"
+      :class="cn('z-popup', sheetVariants({ side }), props.class)"
+      :style="{
+        ...(zIndex ? { zIndex } : {}),
+        position,
+      }"
+      @animationend="onAnimationEnd"
       v-bind="{ ...forwarded, ...$attrs }"
     >
       <slot></slot>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
index 2e90656ce..61068ed48 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { DialogDescriptionProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogDescription, type DialogDescriptionProps } from 'radix-vue';
+import { DialogDescription } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DialogDescriptionProps>();
+const props = defineProps<DialogDescriptionProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
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 c9e968626..d64d202b1 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,5 +7,5 @@ useScrollLock();
 const id = inject('DISMISSABLE_DRAWER_ID');
 </script>
 <template>
-  <div :data-dismissable-drawer="id" class="bg-overlay inset-0"></div>
+  <div :data-dismissable-drawer="id" class="bg-overlay z-popup inset-0"></div>
 </template>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
index 95c8eacf8..5923f2dfc 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { DialogTitleProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogTitle, type DialogTitleProps } from 'radix-vue';
+import { DialogTitle } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DialogTitleProps>();
+const props = defineProps<DialogTitleProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTrigger.vue
index 8ae4c3366..6a7b8d212 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTrigger.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
+import type { DialogTriggerProps } from 'radix-vue';
+
+import { DialogTrigger } from 'radix-vue';
 
 const props = defineProps<DialogTriggerProps>();
 </script>
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 5fd114fde..badf31140 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,4 +1,6 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';
 
 export const sheetVariants = cva(
   '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',
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
index 6a28899d9..f6aa4da01 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
@@ -1,17 +1,13 @@
 <script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  SwitchRoot,
-  type SwitchRootEmits,
-  type SwitchRootProps,
-  SwitchThumb,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & SwitchRootProps>();
+const props = defineProps<SwitchRootProps & { class?: any }>();
 
 const emits = defineEmits<SwitchRootEmits>();
 
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
index 0e3d9c5d8..cf04026eb 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { TabsContentProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { TabsContent, type TabsContentProps } from 'radix-vue';
+import { TabsContent } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & TabsContentProps>();
+const props = defineProps<TabsContentProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
index 756df6dd8..51a5a6ae9 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { TabsListProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { TabsList, type TabsListProps } from 'radix-vue';
+import { TabsList } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & TabsListProps>();
+const props = defineProps<TabsListProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
index 1bec624a3..b8ed2eded 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { TabsTriggerProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue';
+import { TabsTrigger, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & TabsTriggerProps>();
+const props = defineProps<TabsTriggerProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroup.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroup.vue
index 66b3562c2..6d49fba31 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroup.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroup.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { VariantProps } from 'class-variance-authority';
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'radix-vue';
 
 import type { toggleVariants } from '../toggle';
 
@@ -7,21 +8,16 @@ import { computed, provide } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  ToggleGroupRoot,
-  type ToggleGroupRootEmits,
-  type ToggleGroupRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { ToggleGroupRoot, useForwardPropsEmits } from 'radix-vue';
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
 
 const props = defineProps<
-  {
+  ToggleGroupRootProps & {
     class?: any;
     size?: ToggleGroupVariants['size'];
     variant?: ToggleGroupVariants['variant'];
-  } & ToggleGroupRootProps
+  }
 >();
 const emits = defineEmits<ToggleGroupRootEmits>();
 
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroupItem.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroupItem.vue
index abf918f3a..826ca4754 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroupItem.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroupItem.vue
@@ -1,26 +1,23 @@
 <script setup lang="ts">
 import type { VariantProps } from 'class-variance-authority';
+import type { ToggleGroupItemProps } from 'radix-vue';
 
 import { computed, inject } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  ToggleGroupItem,
-  type ToggleGroupItemProps,
-  useForwardProps,
-} from 'radix-vue';
+import { ToggleGroupItem, useForwardProps } from 'radix-vue';
 
 import { toggleVariants } from '../toggle';
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
 
 const props = defineProps<
-  {
+  ToggleGroupItemProps & {
     class?: any;
     size?: ToggleGroupVariants['size'];
     variant?: ToggleGroupVariants['variant'];
-  } & ToggleGroupItemProps
+  }
 >();
 
 const context = inject<ToggleGroupVariants>('toggleGroup');
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/Toggle.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/Toggle.vue
index 4517b9c61..a75b2292d 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/Toggle.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/Toggle.vue
@@ -1,24 +1,23 @@
 <script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from 'radix-vue';
+
+import type { ToggleVariants } from './toggle';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  Toggle,
-  type ToggleEmits,
-  type ToggleProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { Toggle, useForwardPropsEmits } from 'radix-vue';
 
-import { type ToggleVariants, toggleVariants } from './toggle';
+import { toggleVariants } from './toggle';
 
 const props = withDefaults(
   defineProps<
-    {
+    ToggleProps & {
       class?: any;
       size?: ToggleVariants['size'];
       variant?: ToggleVariants['variant'];
-    } & ToggleProps
+    }
   >(),
   {
     disabled: false,
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/toggle.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/toggle.ts
index 150eaa524..d25132820 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/toggle.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/toggle.ts
@@ -1,4 +1,6 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';
 
 export const toggleVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/Tooltip.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/Tooltip.vue
index 13cca0419..8ab8fa6da 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/Tooltip.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/Tooltip.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  TooltipRoot,
-  type TooltipRootEmits,
-  type TooltipRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { TooltipRootEmits, TooltipRootProps } from 'radix-vue';
+
+import { TooltipRoot, useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<TooltipRootProps>();
 const emits = defineEmits<TooltipRootEmits>();
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
index 81b951e89..7537384a0 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
@@ -1,22 +1,18 @@
 <script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  TooltipContent,
-  type TooltipContentEmits,
-  type TooltipContentProps,
-  TooltipPortal,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue';
 
 defineOptions({
   inheritAttrs: false,
 });
 
 const props = withDefaults(
-  defineProps<{ class?: any } & TooltipContentProps>(),
+  defineProps<TooltipContentProps & { class?: any }>(),
   {
     class: '',
     side: 'right',
@@ -41,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'bg-accent text-accent-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border shadow-float z-[1000] overflow-hidden rounded-sm border px-4 py-2 text-xs',
+          'z-popup bg-accent text-accent-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border shadow-float overflow-hidden rounded-sm border px-4 py-2 text-xs',
           props.class,
         )
       "
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipProvider.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipProvider.vue
index b13a457ae..bf843fadb 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipProvider.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipProvider.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { TooltipProvider, type TooltipProviderProps } from 'radix-vue';
+import type { TooltipProviderProps } from 'radix-vue';
+
+import { TooltipProvider } from 'radix-vue';
 
 const props = defineProps<TooltipProviderProps>();
 </script>
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipTrigger.vue
index 2aa3794f9..ead771e74 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipTrigger.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue';
+import type { TooltipTriggerProps } from 'radix-vue';
+
+import { TooltipTrigger } from 'radix-vue';
 
 const props = defineProps<TooltipTriggerProps>();
 </script>
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 7e98a8429..af32067e0 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.5.1",
+  "version": "5.5.3",
   "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/components/index.ts b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/index.ts
index 3c28c946c..eafeaa6e4 100644
--- a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/index.ts
@@ -1,2 +1,2 @@
-export { default as Tabs } from './tabs/tabs.vue';
 export { default as TabsChrome } from './tabs-chrome/tabs.vue';
+export { default as Tabs } from './tabs/tabs.vue';
diff --git a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
index 7ab875a78..eb977ce49 100644
--- a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -56,6 +56,20 @@ const tabsView = computed(() => {
     } as TabConfig;
   });
 });
+
+function onMouseDown(e: MouseEvent, tab: TabConfig) {
+  if (
+    e.button === 1 &&
+    tab.closable &&
+    !tab.affixTab &&
+    tabsView.value.length > 1 &&
+    props.middleClickToClose
+  ) {
+    e.preventDefault();
+    e.stopPropagation();
+    emit('close', tab.key);
+  }
+}
 </script>
 
 <template>
@@ -82,6 +96,7 @@ const tabsView = computed(() => {
         class="tabs-chrome__item draggable translate-all group relative -mr-3 flex h-full select-none items-center"
         data-tab-item="true"
         @click="active = tab.key"
+        @mousedown="onMouseDown($event, tab)"
       >
         <VbenContextMenu
           :handler-data="tab"
diff --git a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
index ba77aabe6..6197ff96e 100644
--- a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -62,6 +62,20 @@ const tabsView = computed(() => {
     } as TabConfig;
   });
 });
+
+function onMouseDown(e: MouseEvent, tab: TabConfig) {
+  if (
+    e.button === 1 &&
+    tab.closable &&
+    !tab.affixTab &&
+    tabsView.value.length > 1 &&
+    props.middleClickToClose
+  ) {
+    e.preventDefault();
+    e.stopPropagation();
+    emit('close', tab.key);
+  }
+}
 </script>
 
 <template>
@@ -85,6 +99,7 @@ const tabsView = computed(() => {
         class="tab-item [&:not(.is-active)]:hover:bg-accent translate-all group relative flex cursor-pointer select-none"
         data-tab-item="true"
         @click="active = tab.key"
+        @mousedown="onMouseDown($event, tab)"
       >
         <VbenContextMenu
           :handler-data="tab"
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 842fd42c4..19ecf03a3 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,6 +33,11 @@ export interface TabsProps {
    * 仅限 tabs-chrome
    */
   maxWidth?: number;
+  /**
+   * @zh_CN 点击中键时关闭Tab
+   */
+  middleClickToClose?: boolean;
+
   /**
    * @zh_CN tab最小宽度
    * 仅限 tabs-chrome
@@ -43,11 +48,11 @@ export interface TabsProps {
    * @zh_CN 是否显示图标
    */
   showIcon?: boolean;
-
   /**
    * @zh_CN 标签页风格
    */
   styleType?: TabsStyleType;
+
   /**
    * @zh_CN 选项卡数据
    */
diff --git a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
index db4b7ce84..b9c2e8a0e 100644
--- a/apps/vben5/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
+++ b/apps/vben5/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
@@ -1,14 +1,11 @@
+import type { Sortable } from '@vben-core/composables';
 import type { EmitType } from '@vben-core/typings';
 
 import type { TabsProps } from './types';
 
 import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 
-import {
-  type Sortable,
-  useIsMobile,
-  useSortable,
-} from '@vben-core/composables';
+import { useIsMobile, useSortable } from '@vben-core/composables';
 
 // 可能会找到拖拽的子元素，这里需要确保拖拽的dom时tab元素
 function findParentElement(element: HTMLElement) {
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 5d5b846d1..dc2f70ece 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
@@ -144,7 +144,7 @@ export function useTabsViewScroll(props: TabsProps) {
 
   function handleWheel({ deltaY }: WheelEvent) {
     scrollViewportEl.value?.scrollBy({
-      behavior: 'smooth',
+      // behavior: 'smooth',
       left: deltaY * 3,
     });
   }
diff --git a/apps/vben5/packages/constants/package.json b/apps/vben5/packages/constants/package.json
index aeb733875..dae564a41 100644
--- a/apps/vben5/packages/constants/package.json
+++ b/apps/vben5/packages/constants/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/constants",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "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 ca991275c..7a24ba8bb 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.5.1",
+  "version": "5.5.3",
   "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/src/accessible.ts b/apps/vben5/packages/effects/access/src/accessible.ts
index c951d92a5..960af3fbc 100644
--- a/apps/vben5/packages/effects/access/src/accessible.ts
+++ b/apps/vben5/packages/effects/access/src/accessible.ts
@@ -22,11 +22,29 @@ async function generateAccessible(
   // 生成路由
   const accessibleRoutes = await generateRoutes(mode, options);
 
+  const root = router.getRoutes().find((item) => item.path === '/');
+
   // 动态添加到router实例内
   accessibleRoutes.forEach((route) => {
-    router.addRoute(route);
+    if (root && !route.meta?.noBasicLayout) {
+      // 为了兼容之前的版本用法，如果包含子路由，则将component移除，以免出现多层BasicLayout
+      // 如果你的项目已经跟进了本次修改，移除了所有自定义菜单首级的BasicLayout，可以将这段if代码删除
+      if (route.children && route.children.length > 0) {
+        delete route.component;
+      }
+      root.children?.push(route);
+    } else {
+      router.addRoute(route);
+    }
   });
 
+  if (root) {
+    if (root.name) {
+      router.removeRoute(root.name);
+    }
+    router.addRoute(root);
+  }
+
   // 生成菜单
   const accessibleMenus = await generateMenus(accessibleRoutes, options.router);
 
diff --git a/apps/vben5/packages/effects/common-ui/package.json b/apps/vben5/packages/effects/common-ui/package.json
index 5e318c638..aca45c7a1 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.5.1",
+  "version": "5.5.3",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -33,8 +33,10 @@
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "qrcode": "catalog:",
+    "tippy.js": "catalog:",
     "vue": "catalog:",
-    "vue-router": "catalog:"
+    "vue-router": "catalog:",
+    "vue-tippy": "catalog:"
   },
   "devDependencies": {
     "@types/qrcode": "catalog:"
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
index d1d42ad7c..c871fe20f 100644
--- 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
@@ -1,9 +1,12 @@
 <script lang="ts" setup>
+import type { Component } from 'vue';
+
 import type { AnyPromiseFunction } from '@vben/types';
 
-import { type Component, computed, ref, unref, useAttrs, watch } from 'vue';
+import { 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';
@@ -118,7 +121,7 @@ const bindProps = computed(() => {
     [`onUpdate:${props.modelPropName}`]: (val: string) => {
       modelValue.value = val;
     },
-    ...objectOmit(attrs, ['onUpdate:value']),
+    ...objectOmit(attrs, [`onUpdate:${props.modelPropName}`]),
     ...(props.visibleEvent
       ? {
           [props.visibleEvent]: handleFetchForVisible,
@@ -188,18 +191,16 @@ function emitChange() {
 }
 </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>
+  <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>
 </template>
diff --git a/apps/vben5/packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue b/apps/vben5/packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue
index d4b136194..ece28d03d 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue
@@ -3,6 +3,7 @@ import type { CaptchaPoint, PointSelectionCaptchaProps } from '../types';
 
 import { RotateCw } from '@vben/icons';
 import { $t } from '@vben/locales';
+
 import { VbenButton, VbenIconButton } from '@vben-core/shadcn-ui';
 
 import { useCaptchaPoints } from '../hooks/useCaptchaPoints';
diff --git a/apps/vben5/packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue b/apps/vben5/packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue
index 0ece2bf04..dcb8039a4 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue
@@ -4,6 +4,7 @@ import type { PointSelectionCaptchaCardProps } from '../types';
 import { computed } from 'vue';
 
 import { $t } from '@vben/locales';
+
 import {
   Card,
   CardContent,
diff --git a/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue b/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue
index fa43493e2..cad3cdd96 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue
@@ -8,6 +8,7 @@ import type {
 import { reactive, unref, useTemplateRef, watch, watchEffect } from 'vue';
 
 import { $t } from '@vben/locales';
+
 import { cn } from '@vben-core/shared/utils';
 
 import { useTimeoutFn } from '@vueuse/core';
diff --git a/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue b/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue
index fe0b5aaa8..7f97bdc8b 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
+
 import { computed, ref, useTemplateRef } from 'vue';
 
 import { Check, ChevronsRight } from '@vben/icons';
+
 import { Slot } from '@vben-core/shadcn-ui';
 
 const props = defineProps<{
diff --git a/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue b/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue
index eacf6842d..0884ccb6a 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { computed, type CSSProperties, ref, useTemplateRef } from 'vue';
+import type { CSSProperties } from 'vue';
+
+import { computed, ref, useTemplateRef } from 'vue';
 
 const props = defineProps<{
   barStyle: CSSProperties;
diff --git a/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue b/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue
index 5c481f2e6..0e79f7b57 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
+
 import { computed, useTemplateRef } from 'vue';
 
 import { VbenSpineText } from '@vben-core/shadcn-ui';
diff --git a/apps/vben5/packages/effects/common-ui/src/components/captcha/types.ts b/apps/vben5/packages/effects/common-ui/src/components/captcha/types.ts
index ba3adc7d9..e640fe287 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/captcha/types.ts
+++ b/apps/vben5/packages/effects/common-ui/src/components/captcha/types.ts
@@ -1,7 +1,7 @@
-import type { ClassType } from '@vben/types';
-
 import type { CSSProperties } from 'vue';
 
+import type { ClassType } from '@vben/types';
+
 export interface CaptchaData {
   /**
    * x
diff --git a/apps/vben5/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue b/apps/vben5/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
index bd4f1fd38..3d3d28574 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
+++ b/apps/vben5/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { computed, type CSSProperties, ref, watchEffect } from 'vue';
+import type { CSSProperties } from 'vue';
+
+import { computed, ref, watchEffect } from 'vue';
 
 import { VbenTooltip } from '@vben-core/shadcn-ui';
 
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 323ce447a..8ac658147 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,11 +1,15 @@
 <script setup lang="ts">
-import { computed, h, ref, type VNode, watch, watchEffect } from 'vue';
+import type { VNode } from 'vue';
+
+import { computed, ref, watch, watchEffect } from 'vue';
 
 import { usePagination } from '@vben/hooks';
 import { EmptyIcon, Grip, listIcons } from '@vben/icons';
 import { $t } from '@vben/locales';
+
 import {
   Button,
+  Input,
   Pagination,
   PaginationEllipsis,
   PaginationFirst,
@@ -19,11 +23,16 @@ import {
   VbenPopover,
 } from '@vben-core/shadcn-ui';
 
-import { refDebounced } from '@vueuse/core';
+import { refDebounced, watchDebounced } from '@vueuse/core';
+
+import { fetchIconsData } from './icons';
 
 interface Props {
   pageSize?: number;
+  /** 图标集的名字 */
   prefix?: string;
+  /** 是否自动请求API以获得图标集的数据.提供prefix时有效 */
+  autoFetchApi?: boolean;
   /**
    * 图标列表
    */
@@ -36,16 +45,19 @@ interface Props {
   modelValueProp?: string;
   /** 图标样式 */
   iconClass?: string;
+  type?: 'icon' | 'input';
 }
 
 const props = withDefaults(defineProps<Props>(), {
   prefix: 'ant-design',
   pageSize: 36,
   icons: () => [],
-  inputComponent: () => h('div'),
   iconSlot: 'default',
   iconClass: 'size-4',
-  modelValueProp: 'value',
+  autoFetchApi: true,
+  modelValueProp: 'modelValue',
+  inputComponent: undefined,
+  type: 'input',
 });
 
 const emit = defineEmits<{
@@ -59,9 +71,28 @@ const currentSelect = ref('');
 const currentPage = ref(1);
 const keyword = ref('');
 const keywordDebounce = refDebounced(keyword, 300);
+const innerIcons = ref<string[]>([]);
+
+watchDebounced(
+  () => props.prefix,
+  async (prefix) => {
+    if (prefix && prefix !== 'svg' && props.autoFetchApi) {
+      innerIcons.value = await fetchIconsData(prefix);
+    }
+  },
+  { immediate: true, debounce: 500, maxWait: 1000 },
+);
+
 const currentList = computed(() => {
   try {
     if (props.prefix) {
+      if (
+        props.prefix !== 'svg' &&
+        props.autoFetchApi &&
+        props.icons.length === 0
+      ) {
+        return innerIcons.value;
+      }
       const icons = listIcons('', props.prefix);
       if (icons.length === 0) {
         console.warn(`No icons found for prefix: ${props.prefix}`);
@@ -143,18 +174,61 @@ defineExpose({ toggleOpenState, open, close });
     content-class="p-0 pt-3"
   >
     <template #trigger>
-      <component
-        :is="inputComponent"
-        :[modelValueProp]="currentSelect"
-        :placeholder="$t('ui.iconPicker.placeholder')"
-      >
-        <template #[iconSlot]>
-          <VbenIcon :icon="currentSelect || Grip" class="size-4" />
-        </template>
-      </component>
+      <template v-if="props.type === 'input'">
+        <component
+          v-if="props.inputComponent"
+          :is="inputComponent"
+          :[modelValueProp]="currentSelect"
+          :placeholder="$t('ui.iconPicker.placeholder')"
+          role="combobox"
+          :aria-label="$t('ui.iconPicker.placeholder')"
+          aria-expanded="visible"
+          v-bind="$attrs"
+        >
+          <template #[iconSlot]>
+            <VbenIcon
+              :icon="currentSelect || Grip"
+              class="size-4"
+              aria-hidden="true"
+            />
+          </template>
+        </component>
+        <div class="relative w-full" v-else>
+          <Input
+            v-bind="$attrs"
+            v-model="currentSelect"
+            :placeholder="$t('ui.iconPicker.placeholder')"
+            class="h-8 w-full pr-8"
+            role="combobox"
+            :aria-label="$t('ui.iconPicker.placeholder')"
+            aria-expanded="visible"
+          />
+          <VbenIcon
+            :icon="currentSelect || Grip"
+            class="absolute right-1 top-1 size-6"
+            aria-hidden="true"
+          />
+        </div>
+      </template>
+      <VbenIcon
+        :icon="currentSelect || Grip"
+        v-else
+        class="size-4"
+        v-bind="$attrs"
+      />
     </template>
     <div class="mb-2 flex w-full">
-      <component :is="inputComponent" v-bind="searchInputProps" />
+      <component
+        v-if="inputComponent"
+        :is="inputComponent"
+        v-bind="searchInputProps"
+      />
+      <Input
+        v-else
+        class="mx-2 h-8 w-full"
+        :placeholder="$t('ui.iconPicker.search')"
+        v-model="keyword"
+      />
     </div>
 
     <template v-if="paginationList.length > 0">
diff --git a/apps/vben5/packages/effects/common-ui/src/components/icon-picker/icons.ts b/apps/vben5/packages/effects/common-ui/src/components/icon-picker/icons.ts
new file mode 100644
index 000000000..694e904a1
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/icon-picker/icons.ts
@@ -0,0 +1,56 @@
+import type { Recordable } from '@vben/types';
+
+/**
+ * 一个缓存对象，在不刷新页面时，无需重复请求远程接口
+ */
+export const ICONS_MAP: Recordable<string[]> = {};
+
+interface IconifyResponse {
+  prefix: string;
+  total: number;
+  title: string;
+  uncategorized?: string[];
+  categories?: Recordable<string[]>;
+  aliases?: Recordable<string>;
+}
+
+const PENDING_REQUESTS: Recordable<Promise<string[]>> = {};
+
+/**
+ * 通过Iconify接口获取图标集数据。
+ * 同一时间多个图标选择器同时请求同一个图标集时，实际上只会发起一次请求（所有请求共享同一份结果）。
+ * 请求结果会被缓存，刷新页面前同一个图标集不会再次请求
+ * @param prefix 图标集名称
+ * @returns 图标集中包含的所有图标名称
+ */
+export async function fetchIconsData(prefix: string): Promise<string[]> {
+  if (Reflect.has(ICONS_MAP, prefix) && ICONS_MAP[prefix]) {
+    return ICONS_MAP[prefix];
+  }
+  if (Reflect.has(PENDING_REQUESTS, prefix) && PENDING_REQUESTS[prefix]) {
+    return PENDING_REQUESTS[prefix];
+  }
+  PENDING_REQUESTS[prefix] = (async () => {
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 1000 * 10);
+      const response: IconifyResponse = await fetch(
+        `https://api.iconify.design/collection?prefix=${prefix}`,
+        { signal: controller.signal },
+      ).then((res) => res.json());
+      clearTimeout(timeoutId);
+      const list = response.uncategorized || [];
+      if (response.categories) {
+        for (const category in response.categories) {
+          list.push(...(response.categories[category] || []));
+        }
+      }
+      ICONS_MAP[prefix] = list.map((v) => `${prefix}:${v}`);
+    } catch (error) {
+      console.error(`Failed to fetch icons for prefix ${prefix}:`, error);
+      return [] as string[];
+    }
+    return ICONS_MAP[prefix];
+  })();
+  return PENDING_REQUESTS[prefix];
+}
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 6bba55262..e1874de7f 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/index.ts
+++ b/apps/vben5/packages/effects/common-ui/src/components/index.ts
@@ -5,6 +5,7 @@ export * from './ellipsis-text';
 export * from './icon-picker';
 export * from './page';
 export * from './resize';
+export * from './tippy';
 export * from '@vben-core/form-ui';
 export * from '@vben-core/popup-ui';
 
diff --git a/apps/vben5/packages/effects/common-ui/src/components/page/__tests__/page.test.ts b/apps/vben5/packages/effects/common-ui/src/components/page/__tests__/page.test.ts
index 776fe6af4..a89061f5c 100644
--- a/apps/vben5/packages/effects/common-ui/src/components/page/__tests__/page.test.ts
+++ b/apps/vben5/packages/effects/common-ui/src/components/page/__tests__/page.test.ts
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+
 import { describe, expect, it } from 'vitest';
 
 import { Page } from '..';
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 3a2ca8ac0..6b95cdb3a 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,14 +1,9 @@
 <script setup lang="ts">
+import type { StyleValue } from 'vue';
+
 import type { PageProps } from './types';
 
-import {
-  computed,
-  nextTick,
-  onMounted,
-  ref,
-  type StyleValue,
-  useTemplateRef,
-} from 'vue';
+import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
 
 import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/shared/constants';
 import { cn } from '@vben-core/shared/utils';
diff --git a/apps/vben5/packages/effects/common-ui/src/components/tippy/directive.ts b/apps/vben5/packages/effects/common-ui/src/components/tippy/directive.ts
new file mode 100644
index 000000000..ed277d6a6
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/tippy/directive.ts
@@ -0,0 +1,100 @@
+import type { ComputedRef, Directive } from 'vue';
+
+import { useTippy } from 'vue-tippy';
+
+export default function useTippyDirective(isDark: ComputedRef<boolean>) {
+  const directive: Directive = {
+    mounted(el, binding, vnode) {
+      const opts =
+        typeof binding.value === 'string'
+          ? { content: binding.value }
+          : binding.value || {};
+
+      const modifiers = Object.keys(binding.modifiers || {});
+      const placement = modifiers.find((modifier) => modifier !== 'arrow');
+      const withArrow = modifiers.includes('arrow');
+
+      if (placement) {
+        opts.placement = opts.placement || placement;
+      }
+
+      if (withArrow) {
+        opts.arrow = opts.arrow === undefined ? true : opts.arrow;
+      }
+
+      if (vnode.props && vnode.props.onTippyShow) {
+        opts.onShow = function (...args: any[]) {
+          return vnode.props?.onTippyShow(...args);
+        };
+      }
+
+      if (vnode.props && vnode.props.onTippyShown) {
+        opts.onShown = function (...args: any[]) {
+          return vnode.props?.onTippyShown(...args);
+        };
+      }
+
+      if (vnode.props && vnode.props.onTippyHidden) {
+        opts.onHidden = function (...args: any[]) {
+          return vnode.props?.onTippyHidden(...args);
+        };
+      }
+
+      if (vnode.props && vnode.props.onTippyHide) {
+        opts.onHide = function (...args: any[]) {
+          return vnode.props?.onTippyHide(...args);
+        };
+      }
+
+      if (vnode.props && vnode.props.onTippyMount) {
+        opts.onMount = function (...args: any[]) {
+          return vnode.props?.onTippyMount(...args);
+        };
+      }
+
+      if (el.getAttribute('title') && !opts.content) {
+        opts.content = el.getAttribute('title');
+        el.removeAttribute('title');
+      }
+
+      if (el.getAttribute('content') && !opts.content) {
+        opts.content = el.getAttribute('content');
+      }
+
+      useTippy(el, opts);
+    },
+    unmounted(el) {
+      if (el.$tippy) {
+        el.$tippy.destroy();
+      } else if (el._tippy) {
+        el._tippy.destroy();
+      }
+    },
+
+    updated(el, binding) {
+      const opts =
+        typeof binding.value === 'string'
+          ? { content: binding.value, theme: isDark.value ? '' : 'light' }
+          : Object.assign(
+              { theme: isDark.value ? '' : 'light' },
+              binding.value,
+            );
+
+      if (el.getAttribute('title') && !opts.content) {
+        opts.content = el.getAttribute('title');
+        el.removeAttribute('title');
+      }
+
+      if (el.getAttribute('content') && !opts.content) {
+        opts.content = el.getAttribute('content');
+      }
+
+      if (el.$tippy) {
+        el.$tippy.setProps(opts || {});
+      } else if (el._tippy) {
+        el._tippy.setProps(opts || {});
+      }
+    },
+  };
+  return directive;
+}
diff --git a/apps/vben5/packages/effects/common-ui/src/components/tippy/index.ts b/apps/vben5/packages/effects/common-ui/src/components/tippy/index.ts
new file mode 100644
index 000000000..6080e5820
--- /dev/null
+++ b/apps/vben5/packages/effects/common-ui/src/components/tippy/index.ts
@@ -0,0 +1,67 @@
+import type { DefaultProps, Props } from 'tippy.js';
+
+import type { App, SetupContext } from 'vue';
+
+import { h, watchEffect } from 'vue';
+import { setDefaultProps, Tippy as TippyComponent } from 'vue-tippy';
+
+import { usePreferences } from '@vben-core/preferences';
+
+import useTippyDirective from './directive';
+
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/dist/backdrop.css';
+import 'tippy.js/themes/light.css';
+import 'tippy.js/animations/scale.css';
+import 'tippy.js/animations/shift-toward.css';
+import 'tippy.js/animations/shift-away.css';
+import 'tippy.js/animations/perspective.css';
+
+const { isDark } = usePreferences();
+export type TippyProps = Partial<
+  Props & {
+    animation?:
+      | 'fade'
+      | 'perspective'
+      | 'scale'
+      | 'shift-away'
+      | 'shift-toward'
+      | boolean;
+    theme?: 'auto' | 'dark' | 'light';
+  }
+>;
+
+export function initTippy(app: App<Element>, options?: DefaultProps) {
+  setDefaultProps({
+    allowHTML: true,
+    delay: [500, 200],
+    theme: isDark.value ? '' : 'light',
+    ...options,
+  });
+  if (!options || !Reflect.has(options, 'theme') || options.theme === 'auto') {
+    watchEffect(() => {
+      setDefaultProps({ theme: isDark.value ? '' : 'light' });
+    });
+  }
+
+  app.directive('tippy', useTippyDirective(isDark));
+}
+
+export const Tippy = (props: any, { attrs, slots }: SetupContext) => {
+  let theme: string = (attrs.theme as string) ?? 'auto';
+  if (theme === 'auto') {
+    theme = isDark.value ? '' : 'light';
+  }
+  if (theme === 'dark') {
+    theme = '';
+  }
+  return h(
+    TippyComponent,
+    {
+      ...props,
+      ...attrs,
+      theme,
+    },
+    slots,
+  );
+};
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/about/about.vue b/apps/vben5/packages/effects/common-ui/src/ui/about/about.vue
index 9395d704b..bee8b349b 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/about/about.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/about/about.vue
@@ -8,6 +8,7 @@ import {
   VBEN_GITHUB_URL,
   VBEN_PREVIEW_URL,
 } from '@vben/constants';
+
 import { VbenRenderContent } from '@vben-core/shadcn-ui';
 
 import { Page } from '../../components';
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/authentication/code-login.vue b/apps/vben5/packages/effects/common-ui/src/ui/authentication/code-login.vue
index 7de5dd3b4..81bacaa8e 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/authentication/code-login.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/authentication/code-login.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
+
 import type { VbenFormSchema } from '@vben-core/form-ui';
 
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
+
 import { useVbenForm } from '@vben-core/form-ui';
 import { VbenButton } from '@vben-core/shadcn-ui';
 
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/authentication/forget-password.vue b/apps/vben5/packages/effects/common-ui/src/ui/authentication/forget-password.vue
index 7955ded67..9c82df49c 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/authentication/forget-password.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/authentication/forget-password.vue
@@ -5,6 +5,7 @@ import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
+
 import { useVbenForm } from '@vben-core/form-ui';
 import { VbenButton } from '@vben-core/shadcn-ui';
 
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/authentication/index.ts b/apps/vben5/packages/effects/common-ui/src/ui/authentication/index.ts
index 95a3890fd..ac5e1e014 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/authentication/index.ts
+++ b/apps/vben5/packages/effects/common-ui/src/ui/authentication/index.ts
@@ -1,7 +1,7 @@
 export { default as AuthenticationCodeLogin } from './code-login.vue';
 export { default as AuthenticationForgetPassword } from './forget-password.vue';
-export { default as AuthenticationLogin } from './login.vue';
 export { default as AuthenticationLoginExpiredModal } from './login-expired-modal.vue';
+export { default as AuthenticationLogin } from './login.vue';
 export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
 export { default as AuthenticationRegister } from './register.vue';
 export type { AuthenticationProps } from './types';
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/authentication/login.vue b/apps/vben5/packages/effects/common-ui/src/ui/authentication/login.vue
index 22b0a45e7..08777c820 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/authentication/login.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
+
 import type { VbenFormSchema } from '@vben-core/form-ui';
 
 import type { AuthenticationProps } from './types';
@@ -8,6 +9,7 @@ import { computed, onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
+
 import { useVbenForm } from '@vben-core/form-ui';
 import { VbenButton, VbenCheckbox } from '@vben-core/shadcn-ui';
 
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue b/apps/vben5/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
index 6e7a3320c..aee41a8db 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
+
 import { VbenButton } from '@vben-core/shadcn-ui';
 
 import { useQRCode } from '@vueuse/integrations/useQRCode';
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/authentication/register.vue b/apps/vben5/packages/effects/common-ui/src/ui/authentication/register.vue
index f603a8996..1faa9607f 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/authentication/register.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/authentication/register.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
+
 import type { VbenFormSchema } from '@vben-core/form-ui';
 
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
+
 import { useVbenForm } from '@vben-core/form-ui';
 import { VbenButton } from '@vben-core/shadcn-ui';
 
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/authentication/third-party-login.vue b/apps/vben5/packages/effects/common-ui/src/ui/authentication/third-party-login.vue
index 47326796c..16533f490 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/authentication/third-party-login.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/authentication/third-party-login.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { MdiGithub, MdiGoogle, MdiQqchat, MdiWechat } from '@vben/icons';
 import { $t } from '@vben/locales';
+
 import { VbenIconButton } from '@vben-core/shadcn-ui';
 
 defineOptions({
diff --git a/apps/vben5/packages/effects/common-ui/src/ui/fallback/fallback.vue b/apps/vben5/packages/effects/common-ui/src/ui/fallback/fallback.vue
index dc46ef426..76eafcabc 100644
--- a/apps/vben5/packages/effects/common-ui/src/ui/fallback/fallback.vue
+++ b/apps/vben5/packages/effects/common-ui/src/ui/fallback/fallback.vue
@@ -6,6 +6,7 @@ import { useRouter } from 'vue-router';
 
 import { ArrowLeft, RotateCw } from '@vben/icons';
 import { $t } from '@vben/locales';
+
 import { VbenButton } from '@vben-core/shadcn-ui';
 
 interface Props extends FallbackProps {}
diff --git a/apps/vben5/packages/effects/hooks/package.json b/apps/vben5/packages/effects/hooks/package.json
index a531cf9c6..c9120d2ad 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.5.1",
+  "version": "5.5.3",
   "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/hooks/src/use-design-tokens.ts b/apps/vben5/packages/effects/hooks/src/use-design-tokens.ts
index 8ee744013..e33f721db 100644
--- a/apps/vben5/packages/effects/hooks/src/use-design-tokens.ts
+++ b/apps/vben5/packages/effects/hooks/src/use-design-tokens.ts
@@ -25,6 +25,7 @@ export function useAntdDesignTokens() {
     colorSuccess: '',
     colorTextBase: '',
     colorWarning: '',
+    zIndexPopupBase: 2000, // 调整基础弹层层级，避免下拉等组件被弹窗或者最大化状态下的表格遮挡
   });
 
   const getCssVariableValue = (variable: string, isColor: boolean = true) => {
diff --git a/apps/vben5/packages/effects/hooks/src/use-hover-toggle.ts b/apps/vben5/packages/effects/hooks/src/use-hover-toggle.ts
index becb1beed..0977178c1 100644
--- a/apps/vben5/packages/effects/hooks/src/use-hover-toggle.ts
+++ b/apps/vben5/packages/effects/hooks/src/use-hover-toggle.ts
@@ -1,8 +1,9 @@
 import type { Arrayable, MaybeElementRef } from '@vueuse/core';
 
-import { computed, onUnmounted, ref, watch } from 'vue';
 import type { Ref } from 'vue';
 
+import { computed, onUnmounted, ref, watch } from 'vue';
+
 import { isFunction } from '@vben/utils';
 
 import { useMouseInElement } from '@vueuse/core';
diff --git a/apps/vben5/packages/effects/hooks/src/use-pagination.ts b/apps/vben5/packages/effects/hooks/src/use-pagination.ts
index 23b36dcd3..8d7ee78c6 100644
--- a/apps/vben5/packages/effects/hooks/src/use-pagination.ts
+++ b/apps/vben5/packages/effects/hooks/src/use-pagination.ts
@@ -1,4 +1,5 @@
 import type { Ref } from 'vue';
+
 import { computed, ref, unref } from 'vue';
 
 /**
diff --git a/apps/vben5/packages/effects/hooks/src/use-tabs.ts b/apps/vben5/packages/effects/hooks/src/use-tabs.ts
index aa79d72f6..60f70f14a 100644
--- a/apps/vben5/packages/effects/hooks/src/use-tabs.ts
+++ b/apps/vben5/packages/effects/hooks/src/use-tabs.ts
@@ -1,4 +1,6 @@
-import { type RouteLocationNormalized, useRoute, useRouter } from 'vue-router';
+import type { RouteLocationNormalized } from 'vue-router';
+
+import { useRoute, useRouter } from 'vue-router';
 
 import { useTabbarStore } from '@vben/stores';
 
diff --git a/apps/vben5/packages/effects/layouts/package.json b/apps/vben5/packages/effects/layouts/package.json
index f1eba82e1..34da7f99f 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.5.1",
+  "version": "5.5.3",
   "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/content/content.vue b/apps/vben5/packages/effects/layouts/src/basic/content/content.vue
index 4ce9e4dbb..438154fa7 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/content/content.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/content/content.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
+import type { VNode } from 'vue';
 import type {
   RouteLocationNormalizedLoaded,
   RouteLocationNormalizedLoadedGeneric,
 } from 'vue-router';
 
-import { type VNode } from 'vue';
 import { RouterView } from 'vue-router';
 
 import { preferences, usePreferences } from '@vben/preferences';
diff --git a/apps/vben5/packages/effects/layouts/src/basic/content/index.ts b/apps/vben5/packages/effects/layouts/src/basic/content/index.ts
index 500cbccaf..8372b20c0 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/content/index.ts
+++ b/apps/vben5/packages/effects/layouts/src/basic/content/index.ts
@@ -1,2 +1,2 @@
-export { default as LayoutContent } from './content.vue';
 export { default as LayoutContentSpinner } from './content-spinner.vue';
+export { default as LayoutContent } from './content.vue';
diff --git a/apps/vben5/packages/effects/layouts/src/basic/header/header.vue b/apps/vben5/packages/effects/layouts/src/basic/header/header.vue
index 546342bf9..7a8cc857a 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/header/header.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/header/header.vue
@@ -5,6 +5,7 @@ import { useRefresh } from '@vben/hooks';
 import { RotateCw } from '@vben/icons';
 import { preferences, usePreferences } from '@vben/preferences';
 import { useAccessStore } from '@vben/stores';
+
 import { VbenFullScreen, VbenIconButton } from '@vben-core/shadcn-ui';
 
 import {
@@ -133,7 +134,10 @@ function clearPreferencesAndLogout() {
   >
     <slot :name="slot.name"></slot>
   </template>
-  <div class="flex h-full min-w-0 flex-1 items-center">
+  <div
+    :class="`menu-align-${preferences.header.menuAlign}`"
+    class="flex h-full min-w-0 flex-1 items-center"
+  >
     <slot name="menu"></slot>
   </div>
   <div class="flex h-full min-w-0 flex-shrink-0 items-center">
@@ -166,3 +170,16 @@ function clearPreferencesAndLogout() {
     </template>
   </div>
 </template>
+<style lang="scss" scoped>
+.menu-align-start {
+  --menu-align: start;
+}
+
+.menu-align-center {
+  --menu-align: center;
+}
+
+.menu-align-end {
+  --menu-align: end;
+}
+</style>
diff --git a/apps/vben5/packages/effects/layouts/src/basic/layout.vue b/apps/vben5/packages/effects/layouts/src/basic/layout.vue
index 329508a1a..1fb90448f 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/layout.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/layout.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+import type { SetupContext } from 'vue';
+
 import type { MenuRecordRaw } from '@vben/types';
 
 import { computed, useSlots, watch } from 'vue';
 
 import { useRefresh } from '@vben/hooks';
-import { $t } from '@vben/locales';
+import { $t, i18n } from '@vben/locales';
 import {
   preferences,
   updatePreferences,
@@ -12,6 +14,7 @@ import {
 } from '@vben/preferences';
 import { useLockStore } from '@vben/stores';
 import { cloneDeep, mapTree } from '@vben/utils';
+
 import { VbenAdminLayout } from '@vben-core/layout-ui';
 import { VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';
 
@@ -39,6 +42,8 @@ const {
   isMixedNav,
   isMobile,
   isSideMixedNav,
+  isHeaderMixedNav,
+  isHeaderSidebarNav,
   layout,
   preferencesButtonPosition,
   sidebarCollapsed,
@@ -80,27 +85,21 @@ const logoCollapsed = computed(() => {
   if (isMobile.value && sidebarCollapsed.value) {
     return true;
   }
-  if (isHeaderNav.value || isMixedNav.value) {
+  if (isHeaderNav.value || isMixedNav.value || isHeaderSidebarNav.value) {
     return false;
   }
-  return sidebarCollapsed.value || isSideMixedNav.value;
+  return (
+    sidebarCollapsed.value || isSideMixedNav.value || isHeaderMixedNav.value
+  );
 });
 
 const showHeaderNav = computed(() => {
-  return !isMobile.value && (isHeaderNav.value || isMixedNav.value);
+  return (
+    !isMobile.value &&
+    (isHeaderNav.value || isMixedNav.value || isHeaderMixedNav.value)
+  );
 });
 
-// 侧边多列菜单
-const {
-  extraActiveMenu,
-  extraMenus,
-  handleDefaultSelect,
-  handleMenuMouseEnter,
-  handleMixedMenuSelect,
-  handleSideMouseLeave,
-  sidebarExtraVisible,
-} = useExtraMenu();
-
 const {
   handleMenuSelect,
   handleMenuOpen,
@@ -108,9 +107,21 @@ const {
   headerMenus,
   sidebarActive,
   sidebarMenus,
+  mixHeaderMenus,
   sidebarVisible,
 } = useMixedMenu();
 
+// 侧边多列菜单
+const {
+  extraActiveMenu,
+  extraMenus,
+  handleDefaultSelect,
+  handleMenuMouseEnter,
+  handleMixedMenuSelect,
+  handleSideMouseLeave,
+  sidebarExtraVisible,
+} = useExtraMenu(mixHeaderMenus);
+
 /**
  * 包装菜单，翻译菜单名称
  * @param menus 原始菜单数据
@@ -152,9 +163,10 @@ watch(
 );
 
 // 语言更新后，刷新页面
-watch(() => preferences.app.locale, refresh);
+// i18n.global.locale会在preference.app.locale变更之后才会更新，因此watchpreference.app.locale是不合适的，刷新页面时可能语言配置尚未完全加载完成
+watch(i18n.global.locale, refresh, { flush: 'post' });
 
-const slots = useSlots();
+const slots: SetupContext['slots'] = useSlots();
 const headerSlots = computed(() => {
   return Object.keys(slots).filter((key) => key.startsWith('header-'));
 });
@@ -268,7 +280,7 @@ const headerSlots = computed(() => {
     <template #mixed-menu>
       <LayoutMixedMenu
         :active-path="extraActiveMenu"
-        :menus="wrapperMenus(headerMenus, false)"
+        :menus="wrapperMenus(mixHeaderMenus, false)"
         :rounded="isMenuRounded"
         :theme="sidebarTheme"
         @default-select="handleDefaultSelect"
diff --git a/apps/vben5/packages/effects/layouts/src/basic/menu/extra-menu.vue b/apps/vben5/packages/effects/layouts/src/basic/menu/extra-menu.vue
index d8ccc1b48..f54623676 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/menu/extra-menu.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/menu/extra-menu.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { MenuRecordRaw } from '@vben/types';
+
 import type { MenuProps } from '@vben-core/menu-ui';
 
 import { useRoute } from 'vue-router';
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 812813a6c..109de0fab 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/menu/menu.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/menu/menu.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { MenuRecordRaw } from '@vben/types';
+
 import type { MenuProps } from '@vben-core/menu-ui';
 
 import { Menu } from '@vben-core/menu-ui';
diff --git a/apps/vben5/packages/effects/layouts/src/basic/menu/mixed-menu.vue b/apps/vben5/packages/effects/layouts/src/basic/menu/mixed-menu.vue
index b54bc48bb..ae12cc93b 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/menu/mixed-menu.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/menu/mixed-menu.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import type { MenuRecordRaw } from '@vben/types';
+
 import type { NormalMenuProps } from '@vben-core/menu-ui';
 
 import { onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { findMenuByPath } from '@vben/utils';
+
 import { NormalMenu } from '@vben-core/menu-ui';
 
 interface Props extends NormalMenuProps {}
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 f47a81a88..c213cff29 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
@@ -1,3 +1,5 @@
+import type { ComputedRef } from 'vue';
+
 import type { MenuRecordRaw } from '@vben/types';
 
 import { computed, ref, watch } from 'vue';
@@ -9,19 +11,22 @@ import { findRootMenuByPath } from '@vben/utils';
 
 import { useNavigation } from './use-navigation';
 
-function useExtraMenu() {
+function useExtraMenu(useRootMenus?: ComputedRef<MenuRecordRaw[]>) {
   const accessStore = useAccessStore();
   const { navigation } = useNavigation();
 
-  const menus = computed(() => accessStore.accessMenus);
+  const menus = computed(() => useRootMenus?.value ?? accessStore.accessMenus);
 
   /** 记录当前顶级菜单下哪个子菜单最后激活 */
   const defaultSubMap = new Map<string, string>();
-
+  const extraRootMenus = ref<MenuRecordRaw[]>([]);
   const route = useRoute();
   const extraMenus = ref<MenuRecordRaw[]>([]);
   const sidebarExtraVisible = ref<boolean>(false);
   const extraActiveMenu = ref('');
+  const parentLevel = computed(() =>
+    preferences.app.layout === 'header-mixed-nav' ? 1 : 0,
+  );
 
   /**
    * 选择混合菜单事件
@@ -29,7 +34,7 @@ function useExtraMenu() {
    */
   const handleMixedMenuSelect = async (menu: MenuRecordRaw) => {
     extraMenus.value = menu?.children ?? [];
-    extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
+    extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
     const hasChildren = extraMenus.value.length > 0;
 
     sidebarExtraVisible.value = hasChildren;
@@ -49,12 +54,12 @@ function useExtraMenu() {
    * @param menu
    * @param rootMenu
    */
-  const handleDefaultSelect = (
+  const handleDefaultSelect = async (
     menu: MenuRecordRaw,
     rootMenu?: MenuRecordRaw,
   ) => {
-    extraMenus.value = rootMenu?.children ?? [];
-    extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
+    extraMenus.value = rootMenu?.children ?? extraRootMenus.value ?? [];
+    extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
 
     if (preferences.sidebar.expandOnHover) {
       sidebarExtraVisible.value = extraMenus.value.length > 0;
@@ -68,7 +73,6 @@ function useExtraMenu() {
     if (preferences.sidebar.expandOnHover) {
       return;
     }
-    sidebarExtraVisible.value = false;
 
     const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
       menus.value,
@@ -82,25 +86,31 @@ function useExtraMenu() {
     if (!preferences.sidebar.expandOnHover) {
       const { findMenu } = findRootMenuByPath(menus.value, menu.path);
       extraMenus.value = findMenu?.children ?? [];
-      extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
+      extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
       sidebarExtraVisible.value = extraMenus.value.length > 0;
     }
   };
 
+  function calcExtraMenus(path: string) {
+    const currentPath = route.meta?.activePath || path;
+    const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
+      menus.value,
+      currentPath,
+      parentLevel.value,
+    );
+    extraRootMenus.value = rootMenu?.children ?? [];
+    if (rootMenuPath) defaultSubMap.set(rootMenuPath, currentPath);
+    extraActiveMenu.value = rootMenuPath ?? findMenu?.path ?? '';
+    extraMenus.value = rootMenu?.children ?? [];
+    if (preferences.sidebar.expandOnHover) {
+      sidebarExtraVisible.value = extraMenus.value.length > 0;
+    }
+  }
+
   watch(
-    () => route.path,
-    (path) => {
-      const currentPath = route.meta?.activePath || path;
-      // if (preferences.sidebar.expandOnHover) {
-      //   return;
-      // }
-      const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
-        menus.value,
-        currentPath,
-      );
-      if (rootMenuPath) defaultSubMap.set(rootMenuPath, currentPath);
-      extraActiveMenu.value = rootMenuPath ?? findMenu?.path ?? '';
-      extraMenus.value = rootMenu?.children ?? [];
+    () => [route.path, preferences.app.layout],
+    ([path]) => {
+      calcExtraMenus(path || '');
     },
     { immediate: true },
   );
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 57a4df0a1..c1d27fd41 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,12 +15,16 @@ function useMixedMenu() {
   const route = useRoute();
   const splitSideMenus = ref<MenuRecordRaw[]>([]);
   const rootMenuPath = ref<string>('');
+  const mixedRootMenuPath = ref<string>('');
+  const mixExtraMenus = ref<MenuRecordRaw[]>([]);
   /** 记录当前顶级菜单下哪个子菜单最后激活 */
   const defaultSubMap = new Map<string, string>();
-  const { isMixedNav } = usePreferences();
+  const { isMixedNav, isHeaderMixedNav } = usePreferences();
 
   const needSplit = computed(
-    () => preferences.navigation.split && isMixedNav.value,
+    () =>
+      (preferences.navigation.split && isMixedNav.value) ||
+      isHeaderMixedNav.value,
   );
 
   const sidebarVisible = computed(() => {
@@ -54,6 +58,10 @@ function useMixedMenu() {
     return needSplit.value ? splitSideMenus.value : menus.value;
   });
 
+  const mixHeaderMenus = computed(() => {
+    return isHeaderMixedNav.value ? sidebarMenus.value : headerMenus.value;
+  });
+
   /**
    * 侧边菜单激活路径
    */
@@ -118,6 +126,9 @@ function useMixedMenu() {
     if (!rootMenu) {
       rootMenu = menus.value.find((item) => item.path === path);
     }
+    const result = findRootMenuByPath(rootMenu?.children || [], path, 1);
+    mixedRootMenuPath.value = result.rootMenuPath ?? '';
+    mixExtraMenus.value = result.rootMenu?.children ?? [];
     rootMenuPath.value = rootMenu?.path ?? '';
     splitSideMenus.value = rootMenu?.children ?? [];
   }
@@ -145,6 +156,8 @@ function useMixedMenu() {
     headerMenus,
     sidebarActive,
     sidebarMenus,
+    mixHeaderMenus,
+    mixExtraMenus,
     sidebarVisible,
   };
 }
diff --git a/apps/vben5/packages/effects/layouts/src/basic/menu/use-navigation.ts b/apps/vben5/packages/effects/layouts/src/basic/menu/use-navigation.ts
index ace64452e..2de3fe512 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/menu/use-navigation.ts
+++ b/apps/vben5/packages/effects/layouts/src/basic/menu/use-navigation.ts
@@ -1,4 +1,6 @@
-import { type RouteRecordNormalized, useRouter } from 'vue-router';
+import type { RouteRecordNormalized } from 'vue-router';
+
+import { useRouter } from 'vue-router';
 
 import { isHttpUrl, openRouteInNewWindow, openWindow } from '@vben/utils';
 
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 06d8f0e50..b67b3a4af 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/tabbar/tabbar.vue
+++ b/apps/vben5/packages/effects/layouts/src/basic/tabbar/tabbar.vue
@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
 import { useContentMaximize, useTabs } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import { useTabbarStore } from '@vben/stores';
+
 import { TabsToolMore, TabsToolScreen, TabsView } from '@vben-core/tabs-ui';
 
 import { useTabbar } from './use-tabbar';
@@ -56,6 +57,7 @@ if (!preferences.tabbar.persist) {
     :style-type="preferences.tabbar.styleType"
     :tabs="currentTabs"
     :wheelable="preferences.tabbar.wheelable"
+    :middle-click-to-close="preferences.tabbar.middleClickToClose"
     @close="handleClose"
     @sort-tabs="tabbarStore.sortTabs"
     @unpin="unpinTab"
diff --git a/apps/vben5/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts b/apps/vben5/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
index 52b32dc46..501ae9b28 100644
--- a/apps/vben5/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
+++ b/apps/vben5/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
@@ -1,6 +1,8 @@
+import type { RouteLocationNormalizedGeneric } from 'vue-router';
+
 import type { TabDefinition } from '@vben/types';
+
 import type { IContextMenuItem } from '@vben-core/tabs-ui';
-import type { RouteLocationNormalizedGeneric } from 'vue-router';
 
 import { computed, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
diff --git a/apps/vben5/packages/effects/layouts/src/iframe/iframe-router-view.vue b/apps/vben5/packages/effects/layouts/src/iframe/iframe-router-view.vue
index 0e45ed966..3f1f95242 100644
--- a/apps/vben5/packages/effects/layouts/src/iframe/iframe-router-view.vue
+++ b/apps/vben5/packages/effects/layouts/src/iframe/iframe-router-view.vue
@@ -6,6 +6,7 @@ import { useRoute } from 'vue-router';
 
 import { preferences } from '@vben/preferences';
 import { useTabbarStore } from '@vben/stores';
+
 import { VbenSpinner } from '@vben-core/shadcn-ui';
 
 defineOptions({ name: 'IFrameRouterView' });
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/breadcrumb.vue b/apps/vben5/packages/effects/layouts/src/widgets/breadcrumb.vue
index 744aed268..c04196065 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/breadcrumb.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/breadcrumb.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import type { BreadcrumbStyleType } from '@vben/types';
+
 import type { IBreadcrumb } from '@vben-core/shadcn-ui';
 
 import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
+
 import { VbenBreadcrumbView } from '@vben-core/shadcn-ui';
 
 interface Props {
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/check-updates/check-updates.vue b/apps/vben5/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
index a0c9adeaf..661604d8b 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
@@ -2,6 +2,7 @@
 import { onMounted, onUnmounted, ref } from 'vue';
 
 import { $t } from '@vben/locales';
+
 import { useVbenModal } from '@vben-core/popup-ui';
 
 interface Props {
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/color-toggle.vue b/apps/vben5/packages/effects/layouts/src/widgets/color-toggle.vue
index 67cad31f6..ae15cb89f 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/color-toggle.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/color-toggle.vue
@@ -7,6 +7,7 @@ import {
   preferences,
   updatePreferences,
 } from '@vben/preferences';
+
 import { VbenIconButton } from '@vben-core/shadcn-ui';
 
 defineOptions({
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/global-search/global-search.vue b/apps/vben5/packages/effects/layouts/src/widgets/global-search/global-search.vue
index 197251b8e..8e6777495 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/global-search/global-search.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/global-search/global-search.vue
@@ -12,6 +12,7 @@ import {
 } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { isWindowsOs } from '@vben/utils';
+
 import { useVbenModal } from '@vben-core/popup-ui';
 
 import { useMagicKeys, whenever } from '@vueuse/core';
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/global-search/search-panel.vue b/apps/vben5/packages/effects/layouts/src/widgets/global-search/search-panel.vue
index acbc2f19a..c85d17ca5 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/global-search/search-panel.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/global-search/search-panel.vue
@@ -7,6 +7,7 @@ import { useRouter } from 'vue-router';
 import { SearchX, X } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { mapTree, traverseTreeValues, uniqueByField } from '@vben/utils';
+
 import { VbenIcon, VbenScrollbar } from '@vben-core/shadcn-ui';
 import { isHttpUrl } from '@vben-core/shared/utils';
 
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/language-toggle.vue b/apps/vben5/packages/effects/layouts/src/widgets/language-toggle.vue
index c8b612bba..846322927 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/language-toggle.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/language-toggle.vue
@@ -5,6 +5,7 @@ import { SUPPORT_LANGUAGES } from '@vben/constants';
 import { Languages } from '@vben/icons';
 import { loadLocaleMessages } from '@vben/locales';
 import { preferences, updatePreferences } from '@vben/preferences';
+
 import { VbenDropdownRadioMenu, VbenIconButton } from '@vben-core/shadcn-ui';
 
 defineOptions({
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/layout-toggle.vue b/apps/vben5/packages/effects/layouts/src/widgets/layout-toggle.vue
index 21823c3de..5c71cc7b0 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/layout-toggle.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/layout-toggle.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { AuthPageLayoutType } from '@vben/types';
+
 import type { VbenDropdownMenuItem } from '@vben-core/shadcn-ui';
 
 import { computed } from 'vue';
@@ -11,6 +12,7 @@ import {
   updatePreferences,
   usePreferences,
 } from '@vben/preferences';
+
 import { VbenDropdownRadioMenu, VbenIconButton } from '@vben-core/shadcn-ui';
 
 defineOptions({
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/index.ts b/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/index.ts
index 1609becbe..8ba1f16b7 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/index.ts
+++ b/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/index.ts
@@ -1,2 +1,2 @@
-export { default as LockScreen } from './lock-screen.vue';
 export { default as LockScreenModal } from './lock-screen-modal.vue';
+export { default as LockScreen } from './lock-screen.vue';
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue b/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
index a346d82ac..5121d688c 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
@@ -4,6 +4,7 @@ import type { Recordable } from '@vben/types';
 import { computed, reactive } from 'vue';
 
 import { $t } from '@vben/locales';
+
 import { useVbenForm, z } from '@vben-core/form-ui';
 import { useVbenModal } from '@vben-core/popup-ui';
 import { VbenAvatar, VbenButton } from '@vben-core/shadcn-ui';
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue b/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
index cce417dae..38c1d2b6f 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
@@ -4,6 +4,7 @@ import { computed, reactive, ref } from 'vue';
 import { LockKeyhole } from '@vben/icons';
 import { $t, useI18n } from '@vben/locales';
 import { storeToRefs, useLockStore } from '@vben/stores';
+
 import { useScrollLock } from '@vben-core/composables';
 import { useVbenForm, z } from '@vben-core/form-ui';
 import { VbenAvatar, VbenButton } from '@vben-core/shadcn-ui';
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/notification/notification.vue b/apps/vben5/packages/effects/layouts/src/widgets/notification/notification.vue
index 946fdfdf8..e15f9b0ed 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/notification/notification.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/notification/notification.vue
@@ -3,6 +3,7 @@ import type { NotificationItem } from './types';
 
 import { Bell, MailCheck } from '@vben/icons';
 import { $t } from '@vben/locales';
+
 import {
   VbenButton,
   VbenIconButton,
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
index c480db08f..2bf8660c2 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
@@ -4,6 +4,7 @@ import type { SelectOption } from '@vben/types';
 import { useSlots } from 'vue';
 
 import { CircleHelp } from '@vben/icons';
+
 import { Input, VbenTooltip } from '@vben-core/shadcn-ui';
 
 defineOptions({
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/content.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/content.vue
index cd773771b..75af1c392 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/content.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/content.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { type Component, computed } from 'vue';
+import type { Component } from 'vue';
+
+import { computed } from 'vue';
 
 import { $t } from '@vben/locales';
 
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue
index cdb236cf3..ee04ee28d 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
-import type { LayoutHeaderModeType, SelectOption } from '@vben/types';
+import type {
+  LayoutHeaderMenuAlignType,
+  LayoutHeaderModeType,
+  SelectOption,
+} from '@vben/types';
 
 import { $t } from '@vben/locales';
 
 import SelectItem from '../select-item.vue';
 import SwitchItem from '../switch-item.vue';
+import ToggleItem from '../toggle-item.vue';
 
 defineProps<{ disabled: boolean }>();
 
 const headerEnable = defineModel<boolean>('headerEnable');
 const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
+const headerMenuAlign =
+  defineModel<LayoutHeaderMenuAlignType>('headerMenuAlign');
 
 const localeItems: SelectOption[] = [
   {
@@ -29,6 +36,21 @@ const localeItems: SelectOption[] = [
     value: 'auto-scroll',
   },
 ];
+
+const headerMenuAlignItems: SelectOption[] = [
+  {
+    label: $t('preferences.header.menuAlignStart'),
+    value: 'start',
+  },
+  {
+    label: $t('preferences.header.menuAlignCenter'),
+    value: 'center',
+  },
+  {
+    label: $t('preferences.header.menuAlignEnd'),
+    value: 'end',
+  },
+];
 </script>
 
 <template>
@@ -42,4 +64,11 @@ const localeItems: SelectOption[] = [
   >
     {{ $t('preferences.mode') }}
   </SelectItem>
+  <ToggleItem
+    v-model="headerMenuAlign"
+    :disabled="!headerEnable"
+    :items="headerMenuAlignItems"
+  >
+    {{ $t('preferences.header.menuAlign') }}
+  </ToggleItem>
 </template>
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue
index ec5d3cfbf..a46650b5c 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
+import type { Component } from 'vue';
+
 import type { LayoutType } from '@vben/types';
 
-import { type Component, computed } from 'vue';
+import { computed } from 'vue';
 
 import { CircleHelp } from '@vben/icons';
 import { $t } from '@vben/locales';
+
 import { VbenTooltip } from '@vben-core/shadcn-ui';
 
 import {
   FullContent,
+  HeaderMixedNav,
   HeaderNav,
+  HeaderSidebarNav,
   MixedNav,
   SidebarMixedNav,
   SidebarNav,
@@ -33,6 +38,8 @@ const components: Record<LayoutType, Component> = {
   'mixed-nav': MixedNav,
   'sidebar-mixed-nav': SidebarMixedNav,
   'sidebar-nav': SidebarNav,
+  'header-mixed-nav': HeaderMixedNav,
+  'header-sidebar-nav': HeaderSidebarNav,
 };
 
 const PRESET = computed((): PresetItem[] => [
@@ -51,11 +58,21 @@ const PRESET = computed((): PresetItem[] => [
     tip: $t('preferences.horizontalTip'),
     type: 'header-nav',
   },
+  {
+    name: $t('preferences.headerSidebarNav'),
+    tip: $t('preferences.headerSidebarNavTip'),
+    type: 'header-sidebar-nav',
+  },
   {
     name: $t('preferences.mixedMenu'),
     tip: $t('preferences.mixedMenuTip'),
     type: 'mixed-nav',
   },
+  {
+    name: $t('preferences.headerTwoColumn'),
+    tip: $t('preferences.headerTwoColumnTip'),
+    type: 'header-mixed-nav',
+  },
   {
     name: $t('preferences.fullContent'),
     tip: $t('preferences.fullContentTip'),
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 dfb63229d..49122ea31 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
@@ -44,7 +44,7 @@ const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
     v-model="sidebarAutoActivateChild"
     :disabled="
       !sidebarEnable ||
-      !['sidebar-mixed-nav', 'mixed-nav', 'sidebar-nav'].includes(
+      !['sidebar-mixed-nav', 'mixed-nav', 'header-mixed-nav'].includes(
         currentLayout as string,
       ) ||
       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 e613f5166..ea533dad7 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
@@ -5,6 +5,7 @@ import { computed } from 'vue';
 
 import { $t } from '@vben/locales';
 
+import NumberFieldItem from '../number-field-item.vue';
 import SelectItem from '../select-item.vue';
 import SwitchItem from '../switch-item.vue';
 
@@ -22,6 +23,10 @@ const tabbarWheelable = defineModel<boolean>('tabbarWheelable');
 const tabbarStyleType = defineModel<string>('tabbarStyleType');
 const tabbarShowMore = defineModel<boolean>('tabbarShowMore');
 const tabbarShowMaximize = defineModel<boolean>('tabbarShowMaximize');
+const tabbarMaxCount = defineModel<number>('tabbarMaxCount');
+const tabbarMiddleClickToClose = defineModel<boolean>(
+  'tabbarMiddleClickToClose',
+);
 
 const styleItems = computed((): SelectOption[] => [
   {
@@ -51,6 +56,16 @@ const styleItems = computed((): SelectOption[] => [
   <SwitchItem v-model="tabbarPersist" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.persist') }}
   </SwitchItem>
+  <NumberFieldItem
+    v-model="tabbarMaxCount"
+    :disabled="!tabbarEnable"
+    :max="30"
+    :min="0"
+    :step="5"
+    :tip="$t('preferences.tabbar.maxCountTip')"
+  >
+    {{ $t('preferences.tabbar.maxCount') }}
+  </NumberFieldItem>
   <SwitchItem v-model="tabbarDraggable" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.draggable') }}
   </SwitchItem>
@@ -61,6 +76,9 @@ const styleItems = computed((): SelectOption[] => [
   >
     {{ $t('preferences.tabbar.wheelable') }}
   </SwitchItem>
+  <SwitchItem v-model="tabbarMiddleClickToClose" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.middleClickClose') }}
+  </SwitchItem>
   <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.icon') }}
   </SwitchItem>
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue
index 00a532810..3878f812b 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue
@@ -4,6 +4,7 @@ import type { SelectOption } from '@vben/types';
 import { useSlots } from 'vue';
 
 import { CircleHelp } from '@vben/icons';
+
 import {
   NumberField,
   NumberFieldContent,
@@ -22,10 +23,12 @@ withDefaults(
     disabled?: boolean;
     items?: SelectOption[];
     placeholder?: string;
+    tip?: string;
   }>(),
   {
     disabled: false,
     placeholder: '',
+    tip: '',
     items: () => [],
   },
 );
@@ -46,11 +49,17 @@ const slots = useSlots();
     <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>
 
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue
index 4e310156d..fabc371c1 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue
@@ -4,6 +4,7 @@ import type { SelectOption } from '@vben/types';
 import { useSlots } from 'vue';
 
 import { CircleHelp } from '@vben/icons';
+
 import {
   Select,
   SelectContent,
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 93a9e6e8e..ccc4aacd2 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
@@ -2,6 +2,7 @@
 import { useSlots } from 'vue';
 
 import { CircleHelp } from '@vben/icons';
+
 import { Switch, VbenTooltip } from '@vben-core/shadcn-ui';
 
 defineOptions({
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
index 480bc8c9b..8a41763a1 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
+import type { BuiltinThemePreset } from '@vben/preferences';
 import type { BuiltinThemeType } from '@vben/types';
 
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import { UserRoundPen } from '@vben/icons';
 import { $t } from '@vben/locales';
-import {
-  BUILT_IN_THEME_PRESETS,
-  type BuiltinThemePreset,
-} from '@vben/preferences';
+import { BUILT_IN_THEME_PRESETS } from '@vben/preferences';
 import { convertToHsl, TinyColor } from '@vben/utils';
 
 defineOptions({
@@ -82,11 +80,6 @@ function typeView(name: BuiltinThemeType) {
 
 function handleSelect(theme: BuiltinThemePreset) {
   modelValue.value = theme.type;
-  const primaryColor = props.isDark
-    ? theme.darkPrimaryColor || theme.primaryColor
-    : theme.primaryColor;
-
-  themeColorPrimary.value = primaryColor || theme.color;
 }
 
 function handleInputChange(e: Event) {
@@ -97,6 +90,22 @@ function handleInputChange(e: Event) {
 function selectColor() {
   colorInput.value?.[0]?.click?.();
 }
+
+watch(
+  () => [modelValue.value, props.isDark] as [BuiltinThemeType, boolean],
+  ([themeType, isDark]) => {
+    const theme = builtinThemePresets.value.find(
+      (item) => item.type === themeType,
+    );
+    if (theme) {
+      const primaryColor = isDark
+        ? theme.darkPrimaryColor || theme.primaryColor
+        : theme.primaryColor;
+
+      themeColorPrimary.value = primaryColor || theme.color;
+    }
+  },
+);
 </script>
 
 <template>
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue
index e509d6676..1a5ca4bfb 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ThemeModeType } from '@vben/types';
-
 import type { Component } from 'vue';
 
+import type { ThemeModeType } from '@vben/types';
+
 import { MoonStar, Sun, SunMoon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/icons/header-mixed-nav.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/icons/header-mixed-nav.vue
new file mode 100644
index 000000000..d5c93677d
--- /dev/null
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/icons/header-mixed-nav.vue
@@ -0,0 +1,202 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <path
+        id="svg_2"
+        d="m-3.37838,3.7543a1.93401,4.02457 0 0 1 1.93401,-4.02457l11.3488,0l0,66.40541l-11.3488,0a1.93401,4.02457 0 0 1 -1.93401,-4.02457l0,-58.35627z"
+        fill="hsl(var(--primary))"
+        stroke="null"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="15.46086"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.67897"
+        rx="2"
+        stroke="null"
+        width="8.18938"
+        x="0.58676"
+        y="1.42154"
+      />
+      <rect
+        id="svg_8"
+        fill="hsl(var(--primary))"
+        height="9.07027"
+        rx="2"
+        stroke="null"
+        width="75.91967"
+        x="25.38277"
+        y="1.42876"
+      />
+      <rect
+        id="svg_9"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="27.91529"
+        y="3.69284"
+      />
+      <rect
+        id="svg_10"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="80.75054"
+        y="3.62876"
+      />
+      <rect
+        id="svg_11"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="87.78868"
+        y="3.69981"
+      />
+      <rect
+        id="svg_12"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="94.6847"
+        y="3.62876"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="42.9287"
+        x="58.75427"
+        y="14.613"
+      />
+      <rect
+        id="svg_14"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="20.97838"
+        rx="2"
+        stroke="null"
+        width="28.36894"
+        x="26.14342"
+        y="14.613"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="75.09493"
+        x="26.34264"
+        y="39.68822"
+      />
+      <rect
+        id="svg_5"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.79832"
+        y="28.39462"
+      />
+      <rect
+        id="svg_6"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="41.80156"
+      />
+      <rect
+        id="svg_7"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="55.36623"
+      />
+      <rect
+        id="svg_16"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="65.72065"
+        stroke="null"
+        width="12.49265"
+        x="9.85477"
+        y="-0.02618"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="35.14924"
+        y="4.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="47.25735"
+        y="4.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="59.23033"
+        y="4.07319"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue
new file mode 100644
index 000000000..b44e249ec
--- /dev/null
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue
@@ -0,0 +1,177 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <rect
+        id="svg_8"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="9.07027"
+        stroke="null"
+        width="104.07934"
+        x="-0.07419"
+        y="-0.05773"
+      />
+      <rect
+        id="svg_3"
+        fill="#b2b2b2"
+        height="1.689"
+        rx="1.395"
+        stroke="null"
+        width="6.52486"
+        x="10.08168"
+        y="3.50832"
+      />
+      <rect
+        id="svg_10"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="80.75054"
+        y="2.89362"
+      />
+      <rect
+        id="svg_11"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="87.58249"
+        y="2.89362"
+      />
+      <path
+        id="svg_12"
+        d="m98.19822,2.872c0,-0.54338 0.45662,-1 1,-1l1.925,0c0.54338,0 1,0.45662 1,1l0,2.4c0,0.54338 -0.45662,1 -1,1l-1.925,0c-0.54338,0 -1,-0.45662 -1,-1l0,-2.4z"
+        fill="#ffffff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="44.13071"
+        x="53.37873"
+        y="13.45652"
+      />
+      <path
+        id="svg_14"
+        d="m19.4393,15.74245c0,-1.08676 0.79001,-2 1.73013,-2l23.18605,0c0.94011,0 1.73013,0.91324 1.73013,2l0,17.24865c0,1.08676 -0.79001,2 -1.73013,2l-23.18605,0c-0.94011,0 -1.73013,-0.91324 -1.73013,-2l0,-17.24865z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="78.39372"
+        x="19.93575"
+        y="39.34689"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="28.14924"
+        y="3.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="41.25735"
+        y="3.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="54.23033"
+        y="3.07319"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="5.13843"
+        rx="2"
+        stroke="null"
+        width="5.78397"
+        x="1.5327"
+        y="1.081"
+      />
+      <rect
+        id="svg_5"
+        fill="hsl(var(--primary))"
+        height="56.81191"
+        stroke="null"
+        width="15.44642"
+        x="-0.06423"
+        y="9.03113"
+      />
+      <path
+        id="svg_2"
+        d="m2.38669,15.38074c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="#fff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_6"
+        d="m2.38669,28.43336c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="#fff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_7"
+        d="m2.17616,41.27545c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="#fff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_9"
+        d="m2.17616,54.32806c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="#fff"
+        opacity="undefined"
+        stroke="null"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/icons/index.ts b/apps/vben5/packages/effects/layouts/src/widgets/preferences/icons/index.ts
index c0c5a28e7..7eec1b470 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/icons/index.ts
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/icons/index.ts
@@ -2,6 +2,8 @@ import HeaderNav from './header-nav.vue';
 
 export { default as ContentCompact } from './content-compact.vue';
 export { default as FullContent } from './full-content.vue';
+export { default as HeaderMixedNav } from './header-mixed-nav.vue';
+export { default as HeaderSidebarNav } from './header-sidebar-nav.vue';
 export { default as MixedNav } from './mixed-nav.vue';
 export { default as SidebarMixedNav } from './sidebar-mixed-nav.vue';
 export { default as SidebarNav } from './sidebar-nav.vue';
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/index.ts b/apps/vben5/packages/effects/layouts/src/widgets/preferences/index.ts
index 0a7d32cce..2c737d5a6 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/index.ts
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/index.ts
@@ -1,3 +1,3 @@
-export { default as Preferences } from './preferences.vue';
 export { default as PreferencesButton } from './preferences-button.vue';
+export { default as Preferences } from './preferences.vue';
 export * from './use-open-preferences';
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences-button.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
index 29e110d31..125ab8163 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Settings } from '@vben/icons';
+
 import { VbenIconButton } from '@vben-core/shadcn-ui';
 
 import Preferences from './preferences.vue';
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 4ae09130b..88e83815b 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
@@ -4,12 +4,14 @@ import type {
   BreadcrumbStyleType,
   BuiltinThemeType,
   ContentCompactType,
+  LayoutHeaderMenuAlignType,
   LayoutHeaderModeType,
   LayoutType,
   NavigationStyleType,
   PreferencesButtonPositionType,
   ThemeModeType,
 } from '@vben/types';
+
 import type { SegmentedItem } from '@vben-core/shadcn-ui';
 
 import { computed, ref } from 'vue';
@@ -22,6 +24,7 @@ import {
   resetPreferences,
   usePreferences,
 } from '@vben/preferences';
+
 import { useVbenDrawer } from '@vben-core/popup-ui';
 import {
   VbenButton,
@@ -94,6 +97,8 @@ const SidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
 
 const headerEnable = defineModel<boolean>('headerEnable');
 const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
+const headerMenuAlign =
+  defineModel<LayoutHeaderMenuAlignType>('headerMenuAlign');
 
 const breadcrumbEnable = defineModel<boolean>('breadcrumbEnable');
 const breadcrumbShowIcon = defineModel<boolean>('breadcrumbShowIcon');
@@ -111,6 +116,10 @@ const tabbarPersist = defineModel<boolean>('tabbarPersist');
 const tabbarDraggable = defineModel<boolean>('tabbarDraggable');
 const tabbarWheelable = defineModel<boolean>('tabbarWheelable');
 const tabbarStyleType = defineModel<string>('tabbarStyleType');
+const tabbarMaxCount = defineModel<number>('tabbarMaxCount');
+const tabbarMiddleClickToClose = defineModel<boolean>(
+  'tabbarMiddleClickToClose',
+);
 
 const navigationStyleType = defineModel<NavigationStyleType>(
   'navigationStyleType',
@@ -159,6 +168,7 @@ const {
   isDark,
   isFullContent,
   isHeaderNav,
+  isHeaderSidebarNav,
   isMixedNav,
   isSideMixedNav,
   isSideMode,
@@ -317,6 +327,7 @@ async function handleReset() {
             <Block :title="$t('preferences.header.title')">
               <Header
                 v-model:header-enable="headerEnable"
+                v-model:header-menu-align="headerMenuAlign"
                 v-model:header-mode="headerMode"
                 :disabled="isFullContent"
               />
@@ -340,7 +351,8 @@ async function handleReset() {
                 v-model:breadcrumb-show-icon="breadcrumbShowIcon"
                 v-model:breadcrumb-style-type="breadcrumbStyleType"
                 :disabled="
-                  !showBreadcrumbConfig || !(isSideNav || isSideMixedNav)
+                  !showBreadcrumbConfig ||
+                  !(isSideNav || isSideMixedNav || isHeaderSidebarNav)
                 "
               />
             </Block>
@@ -354,6 +366,8 @@ async function handleReset() {
                 v-model:tabbar-show-more="tabbarShowMore"
                 v-model:tabbar-style-type="tabbarStyleType"
                 v-model:tabbar-wheelable="tabbarWheelable"
+                v-model:tabbar-max-count="tabbarMaxCount"
+                v-model:tabbar-middle-click-to-close="tabbarMiddleClickToClose"
               />
             </Block>
             <Block :title="$t('preferences.widget.title')">
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences.vue b/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences.vue
index 9479adb2f..8bf91eb7a 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/preferences/preferences.vue
@@ -5,6 +5,7 @@ import { Settings } from '@vben/icons';
 import { $t, loadLocaleMessages } from '@vben/locales';
 import { preferences, updatePreferences } from '@vben/preferences';
 import { capitalizeFirstLetter } from '@vben/utils';
+
 import { useVbenDrawer } from '@vben-core/popup-ui';
 import { VbenButton } from '@vben-core/shadcn-ui';
 
diff --git a/apps/vben5/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue b/apps/vben5/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue
index 4ddc6b8f6..ce6954b76 100644
--- a/apps/vben5/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue
+++ b/apps/vben5/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue
@@ -8,6 +8,7 @@ import {
   updatePreferences,
   usePreferences,
 } from '@vben/preferences';
+
 import {
   ToggleGroup,
   ToggleGroupItem,
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 c05ab57c4..af0e85a40 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
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { Component } from 'vue';
+
 import type { AnyFunction } from '@vben/types';
 
-import type { Component } from 'vue';
 import { computed, useTemplateRef, watch } from 'vue';
 
 import { useHoverToggle } from '@vben/hooks';
@@ -10,6 +11,7 @@ import { $t } from '@vben/locales';
 import { preferences, usePreferences } from '@vben/preferences';
 import { useLockStore } from '@vben/stores';
 import { isWindowsOs } from '@vben/utils';
+
 import { useVbenModal } from '@vben-core/popup-ui';
 import {
   Badge,
diff --git a/apps/vben5/packages/effects/plugins/package.json b/apps/vben5/packages/effects/plugins/package.json
index ac11e5a0d..997e6601c 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.5.1",
+  "version": "5.5.3",
   "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/echarts/use-echarts.ts b/apps/vben5/packages/effects/plugins/src/echarts/use-echarts.ts
index bbe315903..d2e96ebb6 100644
--- a/apps/vben5/packages/effects/plugins/src/echarts/use-echarts.ts
+++ b/apps/vben5/packages/effects/plugins/src/echarts/use-echarts.ts
@@ -1,8 +1,11 @@
 import type { EChartsOption } from 'echarts';
 
+import type { Ref } from 'vue';
+
+import type { Nullable } from '@vben/types';
+
 import type EchartsUI from './echarts-ui.vue';
 
-import type { Ref } from 'vue';
 import { computed, nextTick, watch } from 'vue';
 
 import { usePreferences } from '@vben/preferences';
@@ -49,7 +52,10 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
     return chartInstance;
   };
 
-  const renderEcharts = (options: EChartsOption, clear = true) => {
+  const renderEcharts = (
+    options: EChartsOption,
+    clear = true,
+  ): Promise<Nullable<echarts.ECharts>> => {
     cacheOptions = options;
     const currentOptions = {
       ...options,
@@ -57,9 +63,8 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
     };
     return new Promise((resolve) => {
       if (chartRef.value?.offsetHeight === 0) {
-        useTimeoutFn(() => {
-          renderEcharts(currentOptions);
-          resolve(null);
+        useTimeoutFn(async () => {
+          resolve(await renderEcharts(currentOptions));
         }, 30);
         return;
       }
@@ -71,7 +76,7 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
           }
           clear && chartInstance?.clear();
           chartInstance?.setOption(currentOptions);
-          resolve(null);
+          resolve(chartInstance);
         }, 30);
       });
     });
@@ -108,6 +113,7 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
   return {
     renderEcharts,
     resize,
+    getChartInstance: () => chartInstance,
   };
 }
 
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 0bff8b384..50879b674 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/api.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/api.ts
@@ -1,6 +1,7 @@
-import type { ExtendedFormApi } from '@vben-core/form-ui';
 import type { VxeGridInstance } from 'vxe-table';
 
+import type { ExtendedFormApi } from '@vben-core/form-ui';
+
 import type { VxeGridProps } from './types';
 
 import { toRaw } from 'vue';
@@ -26,18 +27,18 @@ function getDefaultState(): VxeGridProps {
 }
 
 export class VxeGridApi {
-  private isMounted = false;
-
-  private stateHandler: StateHandler;
   public formApi = {} as ExtendedFormApi;
 
   // private prevState: null | VxeGridProps = null;
   public grid = {} as VxeGridInstance;
-
   public state: null | VxeGridProps = null;
 
   public store: Store<VxeGridProps>;
 
+  private isMounted = false;
+
+  private stateHandler: StateHandler;
+
   constructor(options: VxeGridProps = {}) {
     const storeState = { ...options };
 
diff --git a/apps/vben5/packages/effects/plugins/src/vxe-table/extends.ts b/apps/vben5/packages/effects/plugins/src/vxe-table/extends.ts
index d20ecfa71..a6cf4ca3a 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/extends.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/extends.ts
@@ -1,6 +1,7 @@
-import type { Recordable } from '@vben/types';
 import type { VxeGridProps, VxeUIExport } from 'vxe-table';
 
+import type { Recordable } from '@vben/types';
+
 import type { VxeGridApi } from './api';
 
 import { formatDate, formatDateTime, isFunction } from '@vben/utils';
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 9051cd17a..d0b9f3b13 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/init.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/init.ts
@@ -3,6 +3,7 @@ import type { SetupVxeTable } from './types';
 import { defineComponent, watch } from 'vue';
 
 import { usePreferences } from '@vben/preferences';
+
 import { useVbenForm } from '@vben-core/form-ui';
 
 import {
@@ -34,7 +35,6 @@ import {
   // VxeTextarea,
 } from 'vxe-pc-ui';
 import enUS from 'vxe-pc-ui/lib/language/en-US';
-
 // 导入默认的语言
 import zhCN from 'vxe-pc-ui/lib/language/zh-CN';
 import {
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 7e8f2b839..4eb69b5f5 100644
--- a/apps/vben5/packages/effects/plugins/src/vxe-table/types.ts
+++ b/apps/vben5/packages/effects/plugins/src/vxe-table/types.ts
@@ -1,5 +1,3 @@
-import type { ClassType, DeepPartial } from '@vben/types';
-import type { VbenFormProps } from '@vben-core/form-ui';
 import type {
   VxeGridListeners,
   VxeGridPropTypes,
@@ -7,10 +5,14 @@ import type {
   VxeUIExport,
 } from 'vxe-table';
 
-import type { VxeGridApi } from './api';
-
 import type { Ref } from 'vue';
 
+import type { ClassType, DeepPartial } from '@vben/types';
+
+import type { VbenFormProps } from '@vben-core/form-ui';
+
+import type { VxeGridApi } from './api';
+
 import { useVbenForm } from '@vben-core/form-ui';
 
 export interface VxePaginationInfo {
@@ -64,11 +66,11 @@ export interface VxeGridProps {
   showSearchForm?: boolean;
 }
 
-export type ExtendedVxeGridApi = {
+export type ExtendedVxeGridApi = VxeGridApi & {
   useStore: <T = NoInfer<VxeGridProps>>(
     selector?: (state: NoInfer<VxeGridProps>) => T,
   ) => Readonly<Ref<T>>;
-} & VxeGridApi;
+};
 
 export interface SetupVxeTable {
   configVxeTable: (ui: VxeUIExport) => void;
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 573fe5837..ec36fed2a 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,5 +1,4 @@
 <script lang="ts" setup>
-import type { VbenFormProps } from '@vben-core/form-ui';
 import type {
   VxeGridDefines,
   VxeGridInstance,
@@ -9,6 +8,10 @@ import type {
   VxeToolbarPropTypes,
 } from 'vxe-table';
 
+import type { SetupContext } from 'vue';
+
+import type { VbenFormProps } from '@vben-core/form-ui';
+
 import type { ExtendedVxeGridApi, VxeGridProps } from './types';
 
 import {
@@ -27,6 +30,7 @@ import { EmptyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { usePreferences } from '@vben/preferences';
 import { cloneDeep, cn, mergeWithArrayOverride } from '@vben/utils';
+
 import { VbenHelpTooltip, VbenLoading } from '@vben-core/shadcn-ui';
 
 import { VxeGrid, VxeUI } from 'vxe-table';
@@ -66,18 +70,18 @@ const {
 
 const { isMobile } = usePreferences();
 
-const slots = useSlots();
+const slots: SetupContext['slots'] = useSlots();
 
 const [Form, formApi] = useTableForm({
   compact: true,
   handleSubmit: async () => {
-    const formValues = formApi.form.values;
+    const formValues = await formApi.getValues();
     formApi.setLatestSubmissionValues(toRaw(formValues));
     props.api.reload(formValues);
   },
   handleReset: async () => {
     await formApi.resetForm();
-    const formValues = formApi.form.values;
+    const formValues = await formApi.getValues();
     formApi.setLatestSubmissionValues(formValues);
     props.api.reload(formValues);
   },
@@ -88,7 +92,7 @@ const [Form, formApi] = useTableForm({
   },
   showCollapseButton: true,
   submitButtonOptions: {
-    content: $t('common.query'),
+    content: computed(() => $t('common.search')),
   },
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
 });
@@ -244,7 +248,10 @@ async function init() {
   const autoLoad = defaultGridOptions.proxyConfig?.autoLoad;
   const enableProxyConfig = options.value.proxyConfig?.enabled;
   if (enableProxyConfig && autoLoad) {
-    props.api.grid.commitProxy?.('_init', formApi.form?.values ?? {});
+    props.api.grid.commitProxy?.(
+      '_init',
+      formOptions.value ? ((await formApi.getValues()) ?? {}) : {},
+    );
     // props.api.reload(formApi.form?.values ?? {});
   }
 
diff --git a/apps/vben5/packages/effects/request/package.json b/apps/vben5/packages/effects/request/package.json
index 106c95171..bbea72627 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.5.1",
+  "version": "5.5.3",
   "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/request/src/request-client/modules/downloader.test.ts b/apps/vben5/packages/effects/request/src/request-client/modules/downloader.test.ts
index 0e78b54f4..d44dcbb7b 100644
--- a/apps/vben5/packages/effects/request/src/request-client/modules/downloader.test.ts
+++ b/apps/vben5/packages/effects/request/src/request-client/modules/downloader.test.ts
@@ -31,6 +31,7 @@ describe('fileDownloader', () => {
     expect(result).toEqual(mockBlob);
     expect(mockAxiosInstance.get).toHaveBeenCalledWith(url, {
       responseType: 'blob',
+      responseReturn: 'body',
     });
   });
 
@@ -51,6 +52,7 @@ describe('fileDownloader', () => {
     expect(mockAxiosInstance.get).toHaveBeenCalledWith(url, {
       ...customConfig,
       responseType: 'blob',
+      responseReturn: 'body',
     });
   });
 
diff --git a/apps/vben5/packages/effects/request/src/request-client/modules/downloader.ts b/apps/vben5/packages/effects/request/src/request-client/modules/downloader.ts
index bf065d335..77e72c6c5 100644
--- a/apps/vben5/packages/effects/request/src/request-client/modules/downloader.ts
+++ b/apps/vben5/packages/effects/request/src/request-client/modules/downloader.ts
@@ -1,7 +1,14 @@
-import type { AxiosRequestConfig } from 'axios';
-
 import type { RequestClient } from '../request-client';
-import type { RequestResponse } from '../types';
+import type { RequestClientConfig } from '../types';
+
+type DownloadRequestConfig = {
+  /**
+   * 定义期望获得的数据类型。
+   * raw: 原始的AxiosResponse，包括headers、status等。
+   * body: 只返回响应数据的BODY部分(Blob)
+   */
+  responseReturn?: 'body' | 'raw';
+} & Omit<RequestClientConfig, 'responseReturn'>;
 
 class FileDownloader {
   private client: RequestClient;
@@ -9,20 +16,23 @@ class FileDownloader {
   constructor(client: RequestClient) {
     this.client = client;
   }
-
-  public async download(
+  /**
+   * 下载文件
+   * @param url 文件的完整链接
+   * @param config 配置信息，可选。
+   * @returns 如果config.responseReturn为'body'，则返回Blob(默认)，否则返回RequestResponse<Blob>
+   */
+  public async download<T = Blob>(
     url: string,
-    config?: AxiosRequestConfig,
-  ): Promise<RequestResponse<Blob>> {
-    const finalConfig: AxiosRequestConfig = {
+    config?: DownloadRequestConfig,
+  ): Promise<T> {
+    const finalConfig: DownloadRequestConfig = {
+      responseReturn: 'body',
       ...config,
       responseType: 'blob',
     };
 
-    const response = await this.client.get<RequestResponse<Blob>>(
-      url,
-      finalConfig,
-    );
+    const response = await this.client.get<T>(url, finalConfig);
 
     return response;
   }
diff --git a/apps/vben5/packages/effects/request/src/request-client/modules/uploader.ts b/apps/vben5/packages/effects/request/src/request-client/modules/uploader.ts
index e9a9f6024..ee5e7a23c 100644
--- a/apps/vben5/packages/effects/request/src/request-client/modules/uploader.ts
+++ b/apps/vben5/packages/effects/request/src/request-client/modules/uploader.ts
@@ -1,6 +1,5 @@
-import type { AxiosRequestConfig, AxiosResponse } from 'axios';
-
 import type { RequestClient } from '../request-client';
+import type { RequestClientConfig } from '../types';
 
 class FileUploader {
   private client: RequestClient;
@@ -9,18 +8,18 @@ class FileUploader {
     this.client = client;
   }
 
-  public async upload(
+  public async upload<T = any>(
     url: string,
-    data: { file: Blob | File } & Record<string, any>,
-    config?: AxiosRequestConfig,
-  ): Promise<AxiosResponse> {
+    data: Record<string, any> & { file: Blob | File },
+    config?: RequestClientConfig,
+  ): Promise<T> {
     const formData = new FormData();
 
     Object.entries(data).forEach(([key, value]) => {
       formData.append(key, value);
     });
 
-    const finalConfig: AxiosRequestConfig = {
+    const finalConfig: RequestClientConfig = {
       ...config,
       headers: {
         'Content-Type': 'multipart/form-data',
diff --git a/apps/vben5/packages/effects/request/src/request-client/preset-interceptors.ts b/apps/vben5/packages/effects/request/src/request-client/preset-interceptors.ts
index 2049eeaa1..71ddc74bd 100644
--- a/apps/vben5/packages/effects/request/src/request-client/preset-interceptors.ts
+++ b/apps/vben5/packages/effects/request/src/request-client/preset-interceptors.ts
@@ -2,9 +2,48 @@ import type { RequestClient } from './request-client';
 import type { MakeErrorMessageFn, ResponseInterceptorConfig } from './types';
 
 import { $t } from '@vben/locales';
+import { isFunction } from '@vben/utils';
 
 import axios from 'axios';
 
+export const defaultResponseInterceptor = ({
+  codeField = 'code',
+  dataField = 'data',
+  successCode = 0,
+}: {
+  /** 响应数据中代表访问结果的字段名 */
+  codeField: string;
+  /** 响应数据中装载实际数据的字段名，或者提供一个函数从响应数据中解析需要返回的数据 */
+  dataField: ((response: any) => any) | string;
+  /** 当codeField所指定的字段值与successCode相同时，代表接口访问成功。如果提供一个函数，则返回true代表接口访问成功 */
+  successCode: ((code: any) => boolean) | number | string;
+}): ResponseInterceptorConfig => {
+  return {
+    fulfilled: (response) => {
+      const { config, data: responseData, status } = response;
+
+      if (config.responseReturn === 'raw') {
+        return response;
+      }
+
+      if (status >= 200 && status < 400) {
+        if (config.responseReturn === 'body') {
+          return responseData;
+        } else if (
+          isFunction(successCode)
+            ? successCode(responseData[codeField])
+            : responseData[codeField] === successCode
+        ) {
+          return isFunction(dataField)
+            ? dataField(responseData)
+            : responseData[dataField];
+        }
+      }
+      throw Object.assign({}, response, { response });
+    },
+  };
+};
+
 export const authenticateResponseInterceptor = ({
   client,
   doReAuthenticate,
diff --git a/apps/vben5/packages/effects/request/src/request-client/request-client.ts b/apps/vben5/packages/effects/request/src/request-client/request-client.ts
index f1c4c08d1..56412dd84 100644
--- a/apps/vben5/packages/effects/request/src/request-client/request-client.ts
+++ b/apps/vben5/packages/effects/request/src/request-client/request-client.ts
@@ -1,9 +1,6 @@
-import type {
-  AxiosInstance,
-  AxiosRequestConfig,
-  AxiosResponse,
-  CreateAxiosDefaults,
-} from 'axios';
+import type { AxiosInstance, AxiosResponse } from 'axios';
+
+import type { RequestClientConfig, RequestClientOptions } from './types';
 
 import { bindMethods, merge } from '@vben/utils';
 
@@ -12,20 +9,19 @@ import axios from 'axios';
 import { FileDownloader } from './modules/downloader';
 import { InterceptorManager } from './modules/interceptor';
 import { FileUploader } from './modules/uploader';
-import { type RequestClientOptions } from './types';
 
 class RequestClient {
-  private readonly instance: AxiosInstance;
-
   public addRequestInterceptor: InterceptorManager['addRequestInterceptor'];
-  public addResponseInterceptor: InterceptorManager['addResponseInterceptor'];
 
+  public addResponseInterceptor: InterceptorManager['addResponseInterceptor'];
   public download: FileDownloader['download'];
+
   // 是否正在刷新token
   public isRefreshing = false;
   // 刷新token队列
   public refreshTokenQueue: ((token: string) => void)[] = [];
   public upload: FileUploader['upload'];
+  private readonly instance: AxiosInstance;
 
   /**
    * 构造函数，用于创建Axios实例
@@ -33,10 +29,11 @@ class RequestClient {
    */
   constructor(options: RequestClientOptions = {}) {
     // 合并默认配置和传入的配置
-    const defaultConfig: CreateAxiosDefaults = {
+    const defaultConfig: RequestClientOptions = {
       headers: {
         'Content-Type': 'application/json;charset=utf-8',
       },
+      responseReturn: 'raw',
       // 默认超时时间
       timeout: 10_000,
     };
@@ -64,14 +61,17 @@ class RequestClient {
   /**
    * DELETE请求方法
    */
-  public delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+  public delete<T = any>(
+    url: string,
+    config?: RequestClientConfig,
+  ): Promise<T> {
     return this.request<T>(url, { ...config, method: 'DELETE' });
   }
 
   /**
    * GET请求方法
    */
-  public get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+  public get<T = any>(url: string, config?: RequestClientConfig): Promise<T> {
     return this.request<T>(url, { ...config, method: 'GET' });
   }
 
@@ -81,7 +81,7 @@ class RequestClient {
   public post<T = any>(
     url: string,
     data?: any,
-    config?: AxiosRequestConfig,
+    config?: RequestClientConfig,
   ): Promise<T> {
     return this.request<T>(url, { ...config, data, method: 'POST' });
   }
@@ -92,7 +92,7 @@ class RequestClient {
   public put<T = any>(
     url: string,
     data?: any,
-    config?: AxiosRequestConfig,
+    config?: RequestClientConfig,
   ): Promise<T> {
     return this.request<T>(url, { ...config, data, method: 'PUT' });
   }
@@ -100,7 +100,10 @@ class RequestClient {
   /**
    * 通用的请求方法
    */
-  public async request<T>(url: string, config: AxiosRequestConfig): Promise<T> {
+  public async request<T>(
+    url: string,
+    config: RequestClientConfig,
+  ): Promise<T> {
     try {
       const response: AxiosResponse<T> = await this.instance({
         url,
diff --git a/apps/vben5/packages/effects/request/src/request-client/types.ts b/apps/vben5/packages/effects/request/src/request-client/types.ts
index b85dded44..1abfd981e 100644
--- a/apps/vben5/packages/effects/request/src/request-client/types.ts
+++ b/apps/vben5/packages/effects/request/src/request-client/types.ts
@@ -1,10 +1,23 @@
 import type {
+  AxiosRequestConfig,
   AxiosResponse,
   CreateAxiosDefaults,
   InternalAxiosRequestConfig,
 } from 'axios';
 
-type RequestResponse<T = any> = AxiosResponse<T>;
+type ExtendOptions = {
+  /** 响应数据的返回方式。
+   * raw: 原始的AxiosResponse，包括headers、status等，不做是否成功请求的检查。
+   * body: 返回响应数据的BODY部分（只会根据status检查请求是否成功，忽略对code的判断，这种情况下应由调用方检查请求是否成功）。
+   * data: 解构响应的BODY数据，只返回其中的data节点数据（会检查status和code是否为成功状态）。
+   */
+  responseReturn?: 'body' | 'data' | 'raw';
+};
+type RequestClientConfig<T = any> = AxiosRequestConfig<T> & ExtendOptions;
+
+type RequestResponse<T = any> = AxiosResponse<T> & {
+  config: RequestClientConfig<T>;
+};
 
 type RequestContentType =
   | 'application/json;charset=utf-8'
@@ -12,21 +25,21 @@ type RequestContentType =
   | 'application/x-www-form-urlencoded;charset=utf-8'
   | 'multipart/form-data;charset=utf-8';
 
-type RequestClientOptions = CreateAxiosDefaults;
+type RequestClientOptions = CreateAxiosDefaults & ExtendOptions;
 
 interface RequestInterceptorConfig {
   fulfilled?: (
-    config: InternalAxiosRequestConfig,
+    config: ExtendOptions & InternalAxiosRequestConfig,
   ) =>
-    | InternalAxiosRequestConfig<any>
-    | Promise<InternalAxiosRequestConfig<any>>;
+    | (ExtendOptions & InternalAxiosRequestConfig<any>)
+    | Promise<ExtendOptions & InternalAxiosRequestConfig<any>>;
   rejected?: (error: any) => any;
 }
 
 interface ResponseInterceptorConfig<T = any> {
   fulfilled?: (
-    response: AxiosResponse<T>,
-  ) => AxiosResponse | Promise<AxiosResponse>;
+    response: RequestResponse<T>,
+  ) => Promise<RequestResponse> | RequestResponse;
   rejected?: (error: any) => any;
 }
 
@@ -45,6 +58,7 @@ interface HttpResponse<T = any> {
 export type {
   HttpResponse,
   MakeErrorMessageFn,
+  RequestClientConfig,
   RequestClientOptions,
   RequestContentType,
   RequestInterceptorConfig,
diff --git a/apps/vben5/packages/icons/package.json b/apps/vben5/packages/icons/package.json
index 8bda07bbb..57a7c9d4a 100644
--- a/apps/vben5/packages/icons/package.json
+++ b/apps/vben5/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/icons",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "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/src/svg/load.ts b/apps/vben5/packages/icons/src/svg/load.ts
index 25f4261ef..1557467ff 100644
--- a/apps/vben5/packages/icons/src/svg/load.ts
+++ b/apps/vben5/packages/icons/src/svg/load.ts
@@ -46,7 +46,7 @@ async function loadSvgIcons() {
 
   await Promise.all(
     Object.entries(svgEagers).map((svg) => {
-      const [key, body] = svg as [string, { default: string } | string];
+      const [key, body] = svg as [string, string | { default: string }];
 
       // ./icons/xxxx.svg => xxxxxx
       const start = key.lastIndexOf('/') + 1;
diff --git a/apps/vben5/packages/locales/package.json b/apps/vben5/packages/locales/package.json
index e54354b76..4ec643061 100644
--- a/apps/vben5/packages/locales/package.json
+++ b/apps/vben5/packages/locales/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/locales",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "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/i18n.ts b/apps/vben5/packages/locales/src/i18n.ts
index 99259c3c7..e3c75bde6 100644
--- a/apps/vben5/packages/locales/src/i18n.ts
+++ b/apps/vben5/packages/locales/src/i18n.ts
@@ -1,3 +1,4 @@
+import type { App } from 'vue';
 import type { Locale } from 'vue-i18n';
 
 import type {
@@ -7,7 +8,7 @@ import type {
   SupportedLanguagesType,
 } from './typing';
 
-import { type App, unref } from 'vue';
+import { unref } from 'vue';
 import { createI18n } from 'vue-i18n';
 
 import { useSimpleLocale } from '@vben-core/composables';
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 5bb581769..029a9a549 100644
--- a/apps/vben5/packages/locales/src/langs/en-US/preferences.json
+++ b/apps/vben5/packages/locales/src/langs/en-US/preferences.json
@@ -17,6 +17,10 @@
   "horizontalTip": "Horizontal menu mode, all menus displayed at the top",
   "twoColumn": "Two Column",
   "twoColumnTip": "Vertical Two Column Menu Mode",
+  "headerSidebarNav": "Header Vertical",
+  "headerSidebarNavTip": "Header Full Width, Sidebar Navigation Mode",
+  "headerTwoColumn": "Header Two Column",
+  "headerTwoColumnTip": "Header Navigation & Sidebar Two Column co-exists",
   "mixedMenu": "Mixed Menu",
   "mixedMenuTip": "Vertical & Horizontal Menu Co-exists",
   "fullContent": "Full Content",
@@ -58,8 +62,11 @@
     "showMore": "Show More Button",
     "showMaximize": "Show Maximize Button",
     "persist": "Persist Tabs",
+    "maxCount": "Max Count of Tabs",
+    "maxCountTip": "When the number of tabs exceeds the maximum,\nthe oldest tab will be closed.\n Set to 0 to disable count checking.",
     "draggable": "Enable Draggable Sort",
     "wheelable": "Support Mouse Wheel",
+    "middleClickClose": "Close Tab when Mouse Middle Button Click",
     "wheelableTip": "When enabled, the Tabbar area responds to vertical scrolling events of the scroll wheel.",
     "styleType": {
       "title": "Tabs Style",
@@ -138,7 +145,11 @@
     "modeStatic": "Static",
     "modeFixed": "Fixed",
     "modeAuto": "Auto hide & Show",
-    "modeAutoScroll": "Scroll to Hide & Show"
+    "modeAutoScroll": "Scroll to Hide & Show",
+    "menuAlign": "Menu Align",
+    "menuAlignStart": "Start",
+    "menuAlignEnd": "End",
+    "menuAlignCenter": "Center"
   },
   "footer": {
     "title": "Footer",
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 5c3c2283f..fde3368a1 100644
--- a/apps/vben5/packages/locales/src/langs/zh-CN/preferences.json
+++ b/apps/vben5/packages/locales/src/langs/zh-CN/preferences.json
@@ -17,7 +17,11 @@
   "horizontalTip": "水平菜单模式，菜单全部显示在顶部",
   "twoColumn": "双列菜单",
   "twoColumnTip": "垂直双列菜单模式",
-  "mixedMenu": "混合菜单",
+  "headerSidebarNav": "侧边导航",
+  "headerSidebarNavTip": "顶部通栏，侧边导航模式",
+  "headerTwoColumn": "混合双列",
+  "headerTwoColumnTip": "双列、水平菜单共存模式",
+  "mixedMenu": "混合垂直",
   "mixedMenuTip": "垂直水平菜单共存",
   "fullContent": "内容全屏",
   "fullContentTip": "不显示任何菜单，只显示内容主体",
@@ -58,8 +62,11 @@
     "showMore": "显示更多按钮",
     "showMaximize": "显示最大化按钮",
     "persist": "持久化标签页",
+    "maxCount": "最大标签数",
+    "maxCountTip": "每次打开新的标签时如果超过最大标签数，\n会自动关闭一个最先打开的标签\n设置为 0 则不限制",
     "draggable": "启动拖拽排序",
     "wheelable": "启用纵向滚轮响应",
+    "middleClickClose": "点击鼠标中键关闭标签页",
     "wheelableTip": "开启后，标签栏区域可以响应滚轮的纵向滚动事件。\n关闭时，只能响应系统的横向滚动事件（需要按下Shift再滚动滚轮）",
     "styleType": {
       "title": "标签页风格",
@@ -138,7 +145,11 @@
     "modeFixed": "固定",
     "modeAuto": "自动隐藏和显示",
     "modeAutoScroll": "滚动隐藏和显示",
-    "visible": "显示顶栏"
+    "visible": "显示顶栏",
+    "menuAlign": "菜单位置",
+    "menuAlignStart": "左侧",
+    "menuAlignEnd": "右侧",
+    "menuAlignCenter": "居中"
   },
   "footer": {
     "title": "底栏",
diff --git a/apps/vben5/packages/preferences/package.json b/apps/vben5/packages/preferences/package.json
index 5d51c8bed..950ba8478 100644
--- a/apps/vben5/packages/preferences/package.json
+++ b/apps/vben5/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/preferences",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "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 a8707d8b5..fe79f8e5a 100644
--- a/apps/vben5/packages/stores/package.json
+++ b/apps/vben5/packages/stores/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stores",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -20,6 +20,7 @@
     }
   },
   "dependencies": {
+    "@vben-core/preferences": "workspace:*",
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "pinia": "catalog:",
diff --git a/apps/vben5/packages/stores/src/modules/access.ts b/apps/vben5/packages/stores/src/modules/access.ts
index 6b4452076..53ff7f2c1 100644
--- a/apps/vben5/packages/stores/src/modules/access.ts
+++ b/apps/vben5/packages/stores/src/modules/access.ts
@@ -1,6 +1,7 @@
-import type { MenuRecordRaw } from '@vben-core/typings';
 import type { RouteRecordRaw } from 'vue-router';
 
+import type { MenuRecordRaw } from '@vben-core/typings';
+
 import { acceptHMRUpdate, defineStore } from 'pinia';
 
 type AccessToken = null | string;
diff --git a/apps/vben5/packages/stores/src/modules/tabbar.ts b/apps/vben5/packages/stores/src/modules/tabbar.ts
index 53a74feb7..055543776 100644
--- a/apps/vben5/packages/stores/src/modules/tabbar.ts
+++ b/apps/vben5/packages/stores/src/modules/tabbar.ts
@@ -1,8 +1,10 @@
-import type { TabDefinition } from '@vben-core/typings';
 import type { Router, RouteRecordNormalized } from 'vue-router';
 
+import type { TabDefinition } from '@vben-core/typings';
+
 import { toRaw } from 'vue';
 
+import { preferences } from '@vben-core/preferences';
 import {
   openRouteInNewWindow,
   startProgress,
@@ -106,6 +108,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
       });
 
       if (tabIndex === -1) {
+        const maxCount = preferences.tabbar.maxCount;
         // 获取动态路由打开数，超过 0 即代表需要控制打开数
         const maxNumOfOpenTab = (routeTab?.meta?.maxNumOfOpenTab ??
           -1) as number;
@@ -121,8 +124,14 @@ export const useTabbarStore = defineStore('core-tabbar', {
             (item) => item.name === routeTab.name,
           );
           index !== -1 && this.tabs.splice(index, 1);
+        } else if (maxCount > 0 && this.tabs.length >= maxCount) {
+          // 关闭第一个
+          const index = this.tabs.findIndex(
+            (item) =>
+              !Reflect.has(item.meta, 'affixTab') || !item.meta.affixTab,
+          );
+          index !== -1 && this.tabs.splice(index, 1);
         }
-
         this.tabs.push(tab);
       } else {
         // 页面已经存在，不重复添加选项卡，只更新选项卡参数
diff --git a/apps/vben5/packages/styles/package.json b/apps/vben5/packages/styles/package.json
index 7bb540190..b8d96dab8 100644
--- a/apps/vben5/packages/styles/package.json
+++ b/apps/vben5/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/styles",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -21,6 +21,9 @@
     "./ele": {
       "default": "./src/ele/index.css"
     },
+    "./naive": {
+      "default": "./src/naive/index.css"
+    },
     "./global": {
       "default": "./src/global/index.scss"
     }
diff --git a/apps/vben5/packages/styles/src/antd/index.css b/apps/vben5/packages/styles/src/antd/index.css
index 33766b6f9..4dec637ff 100644
--- a/apps/vben5/packages/styles/src/antd/index.css
+++ b/apps/vben5/packages/styles/src/antd/index.css
@@ -11,6 +11,25 @@
   .anticon {
     display: inline-flex;
   }
+
+  /* * 修复按钮添加图标时的位置问题 */
+  > svg {
+    display: inline-block;
+  }
+
+  > svg + span {
+    margin-inline-start: 6px;
+  }
+}
+
+.ant-tag {
+  > svg {
+    display: inline-block;
+  }
+
+  > svg + span {
+    margin-inline-start: 4px;
+  }
 }
 
 .ant-message-notice-content,
@@ -21,7 +40,7 @@
 .form-valid-error {
   /** select 选择器的样式 */
 
-  .ant-select .ant-select-selector {
+  .ant-select:not(.valid-success) .ant-select-selector:not(.valid-success) {
     border-color: hsl(var(--destructive)) !important;
   }
 
@@ -39,6 +58,10 @@
     border-color: hsl(var(--destructive));
     box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
   }
+
+  .ant-input:not(.valid-success) {
+    border-color: hsl(var(--destructive)) !important;
+  }
 }
 
 /** 区间选择器下面来回切换时的样式 */
diff --git a/apps/vben5/packages/styles/src/ele/index.css b/apps/vben5/packages/styles/src/ele/index.css
index b59ee2adf..4ee8f7b12 100644
--- a/apps/vben5/packages/styles/src/ele/index.css
+++ b/apps/vben5/packages/styles/src/ele/index.css
@@ -38,3 +38,7 @@
     border: 1px solid var(--el-color-danger);
   }
 }
+
+html .el-loading-mask {
+  z-index: 1000;
+}
diff --git a/apps/vben5/packages/styles/src/naive/index.css b/apps/vben5/packages/styles/src/naive/index.css
new file mode 100644
index 000000000..a7751165b
--- /dev/null
+++ b/apps/vben5/packages/styles/src/naive/index.css
@@ -0,0 +1,20 @@
+.form-valid-error {
+  .n-base-selection__state-border,
+  .n-input__state-border,
+  .n-radio-group__splitor {
+    border: var(--n-border-error);
+  }
+
+  .n-radio-group .n-radio-button,
+  .n-radio-group .n-radio-group__splitor {
+    --n-button-border-color: rgb(255 56 96);
+  }
+
+  .n-radio__dot {
+    --n-box-shadow: inset 0 0 0 1px rgb(255 56 96);
+  }
+
+  .n-checkbox-box__border {
+    --n-border: 1px solid rgb(255 56 96);
+  }
+}
diff --git a/apps/vben5/packages/types/package.json b/apps/vben5/packages/types/package.json
index 8b38a9285..3b2323fc5 100644
--- a/apps/vben5/packages/types/package.json
+++ b/apps/vben5/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/types",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "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 b4eafd8a7..6550554f4 100644
--- a/apps/vben5/packages/utils/package.json
+++ b/apps/vben5/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/utils",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "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/src/helpers/find-menu-by-path.ts b/apps/vben5/packages/utils/src/helpers/find-menu-by-path.ts
index 1c69e6228..747cc7f02 100644
--- a/apps/vben5/packages/utils/src/helpers/find-menu-by-path.ts
+++ b/apps/vben5/packages/utils/src/helpers/find-menu-by-path.ts
@@ -21,9 +21,9 @@ function findMenuByPath(
  * @param menus
  * @param path
  */
-function findRootMenuByPath(menus: MenuRecordRaw[], path?: string) {
+function findRootMenuByPath(menus: MenuRecordRaw[], path?: string, level = 0) {
   const findMenu = findMenuByPath(menus, path);
-  const rootMenuPath = findMenu?.parents?.[0];
+  const rootMenuPath = findMenu?.parents?.[level];
   const rootMenu = rootMenuPath
     ? menus.find((item) => item.path === rootMenuPath)
     : undefined;
diff --git a/apps/vben5/packages/utils/src/helpers/generate-menus.ts b/apps/vben5/packages/utils/src/helpers/generate-menus.ts
index 48c30fd6e..6f0d9474b 100644
--- a/apps/vben5/packages/utils/src/helpers/generate-menus.ts
+++ b/apps/vben5/packages/utils/src/helpers/generate-menus.ts
@@ -1,6 +1,7 @@
-import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben-core/typings';
 import type { Router, RouteRecordRaw } from 'vue-router';
 
+import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben-core/typings';
+
 import { filterTree, mapTree } from '@vben-core/shared/utils';
 
 /**
diff --git a/apps/vben5/packages/utils/src/helpers/generate-routes-backend.ts b/apps/vben5/packages/utils/src/helpers/generate-routes-backend.ts
index 4f179080d..5d24f47c4 100644
--- a/apps/vben5/packages/utils/src/helpers/generate-routes-backend.ts
+++ b/apps/vben5/packages/utils/src/helpers/generate-routes-backend.ts
@@ -1,9 +1,10 @@
+import type { RouteRecordRaw } from 'vue-router';
+
 import type {
   ComponentRecordType,
   GenerateMenuAndRoutesOptions,
   RouteRecordStringComponent,
 } from '@vben-core/typings';
-import type { RouteRecordRaw } from 'vue-router';
 
 import { mapTree } from '@vben-core/shared/utils';
 
diff --git a/apps/vben5/playground/package.json b/apps/vben5/playground/package.json
index 720622e09..8897e0e3c 100644
--- a/apps/vben5/playground/package.json
+++ b/apps/vben5/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/playground",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/vben5/playground/src/adapter/component/index.ts b/apps/vben5/playground/src/adapter/component/index.ts
index b9b89ddae..6d6ef0014 100644
--- a/apps/vben5/playground/src/adapter/component/index.ts
+++ b/apps/vben5/playground/src/adapter/component/index.ts
@@ -3,9 +3,10 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
+import type { Component, SetupContext } from 'vue';
+
 import type { BaseFormComponentType } from '@vben/common-ui';
 
-import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
diff --git a/apps/vben5/playground/src/api/examples/download.ts b/apps/vben5/playground/src/api/examples/download.ts
new file mode 100644
index 000000000..0b4dcd36e
--- /dev/null
+++ b/apps/vben5/playground/src/api/examples/download.ts
@@ -0,0 +1,28 @@
+import type { RequestResponse } from '@vben/request';
+
+import { requestClient } from '../request';
+
+/**
+ * 下载文件，获取Blob
+ * @returns Blob
+ */
+async function downloadFile1() {
+  return requestClient.download<Blob>(
+    'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+  );
+}
+
+/**
+ * 下载文件，获取完整的Response
+ * @returns RequestResponse<Blob>
+ */
+async function downloadFile2() {
+  return requestClient.download<RequestResponse<Blob>>(
+    'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+    {
+      responseReturn: 'raw',
+    },
+  );
+}
+
+export { downloadFile1, downloadFile2 };
diff --git a/apps/vben5/playground/src/api/request.ts b/apps/vben5/playground/src/api/request.ts
index b1f6c060f..288dddd09 100644
--- a/apps/vben5/playground/src/api/request.ts
+++ b/apps/vben5/playground/src/api/request.ts
@@ -1,12 +1,13 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { HttpResponse } from '@vben/request';
+import type { RequestClientOptions } from '@vben/request';
 
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
   authenticateResponseInterceptor,
+  defaultResponseInterceptor,
   errorMessageResponseInterceptor,
   RequestClient,
 } from '@vben/request';
@@ -20,8 +21,9 @@ import { refreshTokenApi } from './core';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
-function createRequestClient(baseURL: string) {
+function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
+    ...options,
     baseURL,
   });
 
@@ -69,19 +71,14 @@ function createRequestClient(baseURL: string) {
     },
   });
 
-  // response数据解构
-  client.addResponseInterceptor<HttpResponse>({
-    fulfilled: (response) => {
-      const { data: responseData, status } = response;
-
-      const { code, data } = responseData;
-
-      if (status >= 200 && status < 400 && code === 0) {
-        return data;
-      }
-      throw Object.assign({}, response, { response });
-    },
-  });
+  // 处理返回的响应数据格式
+  client.addResponseInterceptor(
+    defaultResponseInterceptor({
+      codeField: 'code',
+      dataField: 'data',
+      successCode: 0,
+    }),
+  );
 
   // token过期的处理
   client.addResponseInterceptor(
@@ -109,6 +106,8 @@ function createRequestClient(baseURL: string) {
   return client;
 }
 
-export const requestClient = createRequestClient(apiURL);
+export const requestClient = createRequestClient(apiURL, {
+  responseReturn: 'data',
+});
 
 export const baseRequestClient = new RequestClient({ baseURL: apiURL });
diff --git a/apps/vben5/playground/src/bootstrap.ts b/apps/vben5/playground/src/bootstrap.ts
index 09b8cfa8b..b0c441758 100644
--- a/apps/vben5/playground/src/bootstrap.ts
+++ b/apps/vben5/playground/src/bootstrap.ts
@@ -1,6 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
+import { initTippy } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -19,6 +20,15 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   // zIndex: 1020,
+  // });
+
   const app = createApp(App);
 
   // 国际化 i18n 配置
@@ -30,6 +40,9 @@ async function bootstrap(namespace: string) {
   // 安装权限指令
   registerAccessDirective(app);
 
+  // 初始化 tippy
+  initTippy(app);
+
   // 配置路由及路由守卫
   app.use(router);
 
diff --git a/apps/vben5/playground/src/locales/index.ts b/apps/vben5/playground/src/locales/index.ts
index 1972e06ee..7f32bd18e 100644
--- a/apps/vben5/playground/src/locales/index.ts
+++ b/apps/vben5/playground/src/locales/index.ts
@@ -1,7 +1,9 @@
-import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
 import type { Locale } from 'ant-design-vue/es/locale';
 
 import type { App } from 'vue';
+
+import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
+
 import { ref } from 'vue';
 
 import {
diff --git a/apps/vben5/playground/src/router/routes/core.ts b/apps/vben5/playground/src/router/routes/core.ts
index fe030a9a2..7218da228 100644
--- a/apps/vben5/playground/src/router/routes/core.ts
+++ b/apps/vben5/playground/src/router/routes/core.ts
@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
 
-import { AuthPageLayout } from '#/layouts';
+import { AuthPageLayout, BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 import Login from '#/views/_core/authentication/login.vue';
 
@@ -21,13 +21,21 @@ const fallbackNotFoundRoute: RouteRecordRaw = {
 
 /** 基本路由，这些路由是必须存在的 */
 const coreRoutes: RouteRecordRaw[] = [
+  /**
+   * 根路由
+   * 使用基础布局，作为所有页面的父级容器，子级就不必配置BasicLayout。
+   * 此路由必须存在，且不应修改
+   */
   {
+    component: BasicLayout,
     meta: {
+      hideInBreadcrumb: true,
       title: 'Root',
     },
     name: 'Root',
     path: '/',
     redirect: DEFAULT_HOME_PATH,
+    children: [],
   },
   {
     component: AuthPageLayout,
diff --git a/apps/vben5/playground/src/router/routes/modules/dashboard.ts b/apps/vben5/playground/src/router/routes/modules/dashboard.ts
index 1bddab9db..5254dc65d 100644
--- a/apps/vben5/playground/src/router/routes/modules/dashboard.ts
+++ b/apps/vben5/playground/src/router/routes/modules/dashboard.ts
@@ -1,18 +1,16 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'lucide:layout-dashboard',
       order: -1,
       title: $t('page.dashboard.title'),
     },
     name: 'Dashboard',
-    path: '/',
+    path: '/dashboard',
     children: [
       {
         name: 'Analytics',
diff --git a/apps/vben5/playground/src/router/routes/modules/demos.ts b/apps/vben5/playground/src/router/routes/modules/demos.ts
index 46ebeeb9f..422e5bf13 100644
--- a/apps/vben5/playground/src/router/routes/modules/demos.ts
+++ b/apps/vben5/playground/src/router/routes/modules/demos.ts
@@ -1,11 +1,10 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout, IFrameView } from '#/layouts';
+import { IFrameView } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'ic:baseline-view-in-ar',
       keepAlive: true,
diff --git a/apps/vben5/playground/src/router/routes/modules/examples.ts b/apps/vben5/playground/src/router/routes/modules/examples.ts
index b02bc4da9..7287f0ddc 100644
--- a/apps/vben5/playground/src/router/routes/modules/examples.ts
+++ b/apps/vben5/playground/src/router/routes/modules/examples.ts
@@ -1,11 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'ion:layers-outline',
       keepAlive: true,
@@ -248,6 +246,15 @@ const routes: RouteRecordRaw[] = [
           title: $t('examples.layout.col-page'),
         },
       },
+      {
+        name: 'TippyDemo',
+        path: '/examples/tippy',
+        component: () => import('#/views/examples/tippy/index.vue'),
+        meta: {
+          icon: 'mdi:message-settings-outline',
+          title: 'Tippy',
+        },
+      },
     ],
   },
 ];
diff --git a/apps/vben5/playground/src/router/routes/modules/vben.ts b/apps/vben5/playground/src/router/routes/modules/vben.ts
index 2f2eb6604..ec44d58ab 100644
--- a/apps/vben5/playground/src/router/routes/modules/vben.ts
+++ b/apps/vben5/playground/src/router/routes/modules/vben.ts
@@ -10,30 +10,20 @@ import {
 } from '@vben/constants';
 import { SvgAntdvLogoIcon } from '@vben/icons';
 
-import { BasicLayout, IFrameView } from '#/layouts';
+import { IFrameView } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       badgeType: 'dot',
       icon: VBEN_LOGO_URL,
-      order: 9999,
+      order: 9998,
       title: $t('demos.vben.title'),
     },
     name: 'VbenProject',
     path: '/vben-admin',
     children: [
-      {
-        name: 'VbenAbout',
-        path: '/vben-admin/about',
-        component: () => import('#/views/_core/about/index.vue'),
-        meta: {
-          icon: 'lucide:copyright',
-          title: $t('demos.vben.about'),
-        },
-      },
       {
         name: 'VbenDocument',
         path: '/vben-admin/document',
@@ -89,6 +79,16 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    component: () => import('#/views/_core/about/index.vue'),
+    meta: {
+      icon: 'lucide:copyright',
+      order: 9999,
+      title: $t('demos.vben.about'),
+    },
+    name: 'VbenAbout',
+    path: '/vben-admin/about',
+  },
 ];
 
 export default routes;
diff --git a/apps/vben5/playground/src/views/dashboard/analytics/analytics-trends.vue b/apps/vben5/playground/src/views/dashboard/analytics/analytics-trends.vue
index fadfc917c..f1f0b232a 100644
--- a/apps/vben5/playground/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/vben5/playground/src/views/dashboard/analytics/analytics-trends.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits-data.vue b/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits-data.vue
index 30c4265df..190fb41f4 100644
--- a/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits-sales.vue b/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits-sales.vue
index 260520b84..02f509123 100644
--- a/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits-source.vue b/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits-source.vue
index e0d0aab5e..0915c7af7 100644
--- a/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits.vue b/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits.vue
index 7e1f14ee6..7e0f10133 100644
--- a/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/vben5/playground/src/views/dashboard/analytics/analytics-visits.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
 import { onMounted, ref } from 'vue';
 
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/vben5/playground/src/views/dashboard/analytics/index.vue b/apps/vben5/playground/src/views/dashboard/analytics/index.vue
index 00b34df1e..5e3d6d285 100644
--- a/apps/vben5/playground/src/views/dashboard/analytics/index.vue
+++ b/apps/vben5/playground/src/views/dashboard/analytics/index.vue
@@ -15,10 +15,10 @@ import {
 } from '@vben/icons';
 
 import AnalyticsTrends from './analytics-trends.vue';
-import AnalyticsVisits from './analytics-visits.vue';
 import AnalyticsVisitsData from './analytics-visits-data.vue';
 import AnalyticsVisitsSales from './analytics-visits-sales.vue';
 import AnalyticsVisitsSource from './analytics-visits-source.vue';
+import AnalyticsVisits from './analytics-visits.vue';
 
 const overviewItems: AnalysisOverviewItem[] = [
   {
diff --git a/apps/vben5/playground/src/views/demos/badge/index.vue b/apps/vben5/playground/src/views/demos/badge/index.vue
index 8976c6fe8..fbe22b2e3 100644
--- a/apps/vben5/playground/src/views/demos/badge/index.vue
+++ b/apps/vben5/playground/src/views/demos/badge/index.vue
@@ -4,6 +4,7 @@ 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';
diff --git a/apps/vben5/playground/src/views/demos/features/file-download/index.vue b/apps/vben5/playground/src/views/demos/features/file-download/index.vue
index b4125b8a4..5342141d0 100644
--- a/apps/vben5/playground/src/views/demos/features/file-download/index.vue
+++ b/apps/vben5/playground/src/views/demos/features/file-download/index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 import {
   downloadFileFromBase64,
@@ -9,7 +11,23 @@ import {
 
 import { Button, Card } from 'ant-design-vue';
 
+import { downloadFile1, downloadFile2 } from '#/api/examples/download';
+
 import imageBase64 from './base64';
+
+const downloadResult = ref('');
+
+function getBlob() {
+  downloadFile1().then((res) => {
+    downloadResult.value = `获取Blob成功，长度：${res.size}`;
+  });
+}
+
+function getResponse() {
+  downloadFile2().then((res) => {
+    downloadResult.value = `获取Response成功，headers：${JSON.stringify(res.headers)},长度：${res.data.size}`;
+  });
+}
 </script>
 
 <template>
@@ -70,5 +88,13 @@ import imageBase64 from './base64';
         Download TxT
       </Button>
     </Card>
+
+    <Card class="my-5" title="Request download">
+      <Button type="primary" @click="getBlob"> 获取Blob </Button>
+      <Button type="primary" class="ml-4" @click="getResponse">
+        获取Response
+      </Button>
+      <div class="mt-4">{{ downloadResult }}</div>
+    </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 cc5ed066c..590ff3053 100644
--- a/apps/vben5/playground/src/views/demos/features/icons/index.vue
+++ b/apps/vben5/playground/src/views/demos/features/icons/index.vue
@@ -20,7 +20,10 @@ import {
 
 import { Card, Input } from 'ant-design-vue';
 
-const iconValue = ref('ant-design:trademark-outlined');
+const iconValue1 = ref('ant-design:trademark-outlined');
+const iconValue2 = ref('svg:avatar-1');
+const iconValue3 = ref('mdi:alien-outline');
+const iconValue4 = ref('mdi-light:book-multiple');
 
 const inputComponent = h(Input);
 </script>
@@ -78,26 +81,32 @@ const inputComponent = h(Input);
     <Card class="mb-5" title="图标选择器">
       <div class="mb-5 flex items-center gap-5">
         <span>原始样式(Iconify):</span>
-        <IconPicker class="w-[200px]" />
+        <IconPicker v-model="iconValue1" class="w-[200px]" />
       </div>
       <div class="mb-5 flex items-center gap-5">
         <span>原始样式(svg):</span>
-        <IconPicker class="w-[200px]" prefix="svg" />
+        <IconPicker v-model="iconValue2" 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" />
+        <span>自定义Input:</span>
+        <IconPicker
+          :input-component="inputComponent"
+          v-model="iconValue3"
+          icon-slot="addonAfter"
+          model-value-prop="value"
+          prefix="mdi"
+        />
       </div>
       <div class="flex items-center gap-5">
-        <span>可手动输入，只能点击图标打开弹窗:</span>
+        <span>显示为一个Icon:</span>
         <Input
-          v-model:value="iconValue"
+          v-model:value="iconValue4"
           allow-clear
           placeholder="点击这里选择图标"
           style="width: 300px"
         >
           <template #addonAfter>
-            <IconPicker v-model="iconValue" class="w-[200px]" />
+            <IconPicker v-model="iconValue4" prefix="mdi-light" type="icon" />
           </template>
         </Input>
       </div>
diff --git a/apps/vben5/playground/src/views/demos/features/vue-query/paginated-queries.vue b/apps/vben5/playground/src/views/demos/features/vue-query/paginated-queries.vue
index b2e3c26d4..a29e4b970 100644
--- a/apps/vben5/playground/src/views/demos/features/vue-query/paginated-queries.vue
+++ b/apps/vben5/playground/src/views/demos/features/vue-query/paginated-queries.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { Ref } from 'vue';
+
 import type { IProducts } from './typing';
 
-import { type Ref, ref } from 'vue';
+import { ref } from 'vue';
 
 import { keepPreviousData, useQuery } from '@tanstack/vue-query';
 import { Button } from 'ant-design-vue';
diff --git a/apps/vben5/playground/src/views/examples/drawer/base-demo.vue b/apps/vben5/playground/src/views/examples/drawer/base-demo.vue
index ffa5e3900..11c65130c 100644
--- a/apps/vben5/playground/src/views/examples/drawer/base-demo.vue
+++ b/apps/vben5/playground/src/views/examples/drawer/base-demo.vue
@@ -7,6 +7,9 @@ const [Drawer, drawerApi] = useVbenDrawer({
   onCancel() {
     drawerApi.close();
   },
+  onClosed() {
+    drawerApi.setState({ overlayBlur: 0, placement: 'right' });
+  },
   onConfirm() {
     message.info('onConfirm');
     // drawerApi.close();
diff --git a/apps/vben5/playground/src/views/examples/drawer/index.vue b/apps/vben5/playground/src/views/examples/drawer/index.vue
index 32d3c95df..7773240d7 100644
--- a/apps/vben5/playground/src/views/examples/drawer/index.vue
+++ b/apps/vben5/playground/src/views/examples/drawer/index.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { type DrawerPlacement, Page, useVbenDrawer } from '@vben/common-ui';
+import type { DrawerPlacement, DrawerState } from '@vben/common-ui';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
 
 import { Button, Card } from 'ant-design-vue';
 
@@ -40,25 +42,25 @@ const [FormDrawer, formDrawerApi] = useVbenDrawer({
 });
 
 function openBaseDrawer(placement: DrawerPlacement = 'right') {
-  baseDrawerApi.setState({ placement });
-  baseDrawerApi.open();
+  baseDrawerApi.setState({ placement }).open();
+}
+
+function openBlurDrawer() {
+  baseDrawerApi.setState({ overlayBlur: 5 }).open();
 }
 
 function openInContentDrawer(placement: DrawerPlacement = 'right') {
-  inContentDrawerApi.setState({ class: '', placement });
+  const state: Partial<DrawerState> = { class: '', placement };
   if (placement === 'top') {
     // 页面顶部区域的层级只有200，所以设置一个低于200的值，抽屉从顶部滑出来的时候才比较合适
-    inContentDrawerApi.setState({ zIndex: 199 });
-  } else {
-    inContentDrawerApi.setState({ zIndex: undefined });
+    state.zIndex = 199;
   }
-  inContentDrawerApi.open();
+  inContentDrawerApi.setState(state).open();
 }
 
 function openMaxContentDrawer() {
   // 这里只是用来演示方便。实际上自己使用的时候可以直接将这些配置卸载Drawer的属性里
-  inContentDrawerApi.setState({ class: 'w-full', placement: 'right' });
-  inContentDrawerApi.open();
+  inContentDrawerApi.setState({ class: 'w-full', placement: 'right' }).open();
 }
 
 function openAutoHeightDrawer() {
@@ -70,24 +72,25 @@ function openDynamicDrawer() {
 }
 
 function handleUpdateTitle() {
-  dynamicDrawerApi.setState({ title: '外部动态标题' });
-  dynamicDrawerApi.open();
+  dynamicDrawerApi.setState({ title: '外部动态标题' }).open();
 }
 
 function openSharedDrawer() {
-  sharedDrawerApi.setData({
-    content: '外部传递的数据 content',
-    payload: '外部传递的数据 payload',
-  });
-  sharedDrawerApi.open();
+  sharedDrawerApi
+    .setData({
+      content: '外部传递的数据 content',
+      payload: '外部传递的数据 payload',
+    })
+    .open();
 }
 
 function openFormDrawer() {
-  formDrawerApi.setData({
-    // 表单值
-    values: { field1: 'abc', field2: '123' },
-  });
-  formDrawerApi.open();
+  formDrawerApi
+    .setData({
+      // 表单值
+      values: { field1: 'abc', field2: '123' },
+    })
+    .open();
 }
 </script>
 
@@ -125,6 +128,9 @@ function openFormDrawer() {
       <Button class="mb-2 ml-2" type="primary" @click="openBaseDrawer('top')">
         顶部打开
       </Button>
+      <Button class="mb-2 ml-2" type="primary" @click="openBlurDrawer">
+        遮罩层模糊效果
+      </Button>
     </Card>
 
     <Card class="mb-4" title="在内容区域打开">
diff --git a/apps/vben5/playground/src/views/examples/form/basic.vue b/apps/vben5/playground/src/views/examples/form/basic.vue
index da292b2bb..345cb9e7a 100644
--- a/apps/vben5/playground/src/views/examples/form/basic.vue
+++ b/apps/vben5/playground/src/views/examples/form/basic.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { h, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
-import { Button, Card, message, TabPane, Tabs } from 'ant-design-vue';
+import { useDebounceFn } from '@vueuse/core';
+import { Button, Card, message, Spin, TabPane, Tabs } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
 import { useVbenForm } from '#/adapter/form';
@@ -12,6 +13,22 @@ import { getAllMenusApi } from '#/api';
 import DocButton from '../doc-button.vue';
 
 const activeTab = ref('basic');
+const keyword = ref('');
+const fetching = ref(false);
+// 模拟远程获取数据
+function fetchRemoteOptions({ keyword = '选项' }: Record<string, any>) {
+  fetching.value = true;
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const options = Array.from({ length: 10 }).map((_, index) => ({
+        label: `${keyword}-${index}`,
+        value: `${keyword}-${index}`,
+      }));
+      resolve(options);
+      fetching.value = false;
+    }, 1000);
+  });
+}
 
 const [BaseForm, baseFormApi] = useVbenForm({
   // 所有表单项共用，可单独在表单内覆盖
@@ -64,16 +81,47 @@ const [BaseForm, baseFormApi] = useVbenForm({
       // 界面显示的label
       label: 'ApiSelect',
     },
+    {
+      component: 'ApiSelect',
+      // 对应组件的参数
+      componentProps: () => {
+        return {
+          api: fetchRemoteOptions,
+          // 禁止本地过滤
+          filterOption: false,
+          // 如果正在获取数据，使用插槽显示一个loading
+          notFoundContent: fetching.value ? undefined : null,
+          // 搜索词变化时记录下来， 使用useDebounceFn防抖。
+          onSearch: useDebounceFn((value: string) => {
+            keyword.value = value;
+          }, 300),
+          // 远程搜索参数。当搜索词变化时，params也会更新
+          params: {
+            keyword: keyword.value || undefined,
+          },
+          showSearch: true,
+        };
+      },
+      // 字段名
+      fieldName: 'remoteSearch',
+      // 界面显示的label
+      label: '远程搜索',
+      renderComponentContent: () => {
+        return {
+          notFoundContent: fetching.value ? h(Spin) : undefined,
+        };
+      },
+    },
     {
       component: 'ApiTreeSelect',
       // 对应组件的参数
       componentProps: {
         // 菜单接口
         api: getAllMenusApi,
-        childrenField: 'children',
         // 菜单接口转options格式
         labelField: 'name',
         valueField: 'path',
+        childrenField: 'children',
       },
       // 字段名
       fieldName: 'apiTree',
diff --git a/apps/vben5/playground/src/views/examples/form/custom.vue b/apps/vben5/playground/src/views/examples/form/custom.vue
index a035e597b..7fab17a6c 100644
--- a/apps/vben5/playground/src/views/examples/form/custom.vue
+++ b/apps/vben5/playground/src/views/examples/form/custom.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { h } from 'vue';
+import { h, markRaw } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
 import { Card, Input, message } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
+import { useVbenForm, z } from '#/adapter/form';
+
+import TwoFields from './modules/two-fields.vue';
 
 const [Form] = useVbenForm({
   // 所有表单项共用，可单独在表单内覆盖
@@ -16,6 +18,7 @@ const [Form] = useVbenForm({
     },
     labelClass: 'w-2/6',
   },
+  fieldMappingTime: [['field4', ['phoneType', 'phoneNumber'], null]],
   // 提交函数
   handleSubmit: onSubmit,
   // 垂直布局，label和input在不同行，值为vertical
@@ -39,9 +42,10 @@ const [Form] = useVbenForm({
       }),
     },
     {
-      component: h(Input, { placeholder: '请输入' }),
+      component: h(Input, { placeholder: '请输入Field2' }),
       fieldName: 'field2',
       label: '自定义组件',
+      modelPropName: 'value',
       rules: 'required',
     },
     {
@@ -50,6 +54,27 @@ const [Form] = useVbenForm({
       label: '自定义组件(slot)',
       rules: 'required',
     },
+    {
+      component: markRaw(TwoFields),
+      defaultValue: [undefined, ''],
+      disabledOnChangeListener: false,
+      fieldName: 'field4',
+      formItemClass: 'col-span-1',
+      label: '组合字段',
+      rules: z
+        .array(z.string().optional())
+        .length(2, '请选择类型并输入手机号码')
+        .refine((v) => !!v[0], {
+          message: '请选择类型',
+        })
+        .refine((v) => !!v[1] && v[1] !== '', {
+          message: '　　　　　　　输入手机号码',
+        })
+        .refine((v) => v[1]?.match(/^1[3-9]\d{9}$/), {
+          // 使用全角空格占位，将错误提示文字挤到手机号码输入框的下面
+          message: '　　　　　　　号码格式不正确',
+        }),
+    },
   ],
   // 中屏一行显示2个，小屏一行显示1个
   wrapperClass: 'grid-cols-1 md:grid-cols-2',
diff --git a/apps/vben5/playground/src/views/examples/form/modules/two-fields.vue b/apps/vben5/playground/src/views/examples/form/modules/two-fields.vue
new file mode 100644
index 000000000..da79a102a
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/form/modules/two-fields.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { Input, Select } from 'ant-design-vue';
+
+const emit = defineEmits(['blur', 'change']);
+
+const modelValue = defineModel<[string, string]>({
+  default: () => [undefined, undefined],
+});
+
+function onChange() {
+  emit('change', modelValue.value);
+}
+</script>
+<template>
+  <div class="flex w-full gap-1">
+    <Select
+      v-model:value="modelValue[0]"
+      class="w-[80px]"
+      placeholder="类型"
+      allow-clear
+      :class="{ 'valid-success': !!modelValue[0] }"
+      :options="[
+        { label: '个人', value: 'personal' },
+        { label: '工作', value: 'work' },
+        { label: '私密', value: 'private' },
+      ]"
+      @blur="emit('blur')"
+      @change="onChange"
+    />
+    <Input
+      placeholder="请输入11位手机号码"
+      class="flex-1"
+      allow-clear
+      :class="{ 'valid-success': modelValue[1]?.match(/^1[3-9]\d{9}$/) }"
+      v-model:value="modelValue[1]"
+      :maxlength="11"
+      type="tel"
+      @blur="emit('blur')"
+      @change="onChange"
+    />
+  </div>
+</template>
diff --git a/apps/vben5/playground/src/views/examples/modal/blur-demo.vue b/apps/vben5/playground/src/views/examples/modal/blur-demo.vue
new file mode 100644
index 000000000..432ce0da0
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/modal/blur-demo.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Slider } from 'ant-design-vue';
+
+const blur = ref(5);
+const [Modal, modalApi] = useVbenModal({
+  overlayBlur: blur.value,
+});
+watch(blur, (val) => {
+  modalApi.setState({
+    overlayBlur: val,
+  });
+});
+</script>
+<template>
+  <Modal title="遮罩层模糊">
+    <p>调整滑块来改变遮罩层模糊程度：{{ blur }}</p>
+    <Slider v-model:value="blur" :max="30" :min="0" />
+  </Modal>
+</template>
diff --git a/apps/vben5/playground/src/views/examples/modal/form-modal-demo.vue b/apps/vben5/playground/src/views/examples/modal/form-modal-demo.vue
index 5179ffebf..6d58aa15c 100644
--- a/apps/vben5/playground/src/views/examples/modal/form-modal-demo.vue
+++ b/apps/vben5/playground/src/views/examples/modal/form-modal-demo.vue
@@ -9,10 +9,6 @@ defineOptions({
   name: 'FormModelDemo',
 });
 
-function onSubmit(values: Record<string, any>) {
-  message.info(JSON.stringify(values)); // 只会执行一次
-}
-
 const [Form, formApi] = useVbenForm({
   handleSubmit: onSubmit,
   schema: [
@@ -70,6 +66,23 @@ const [Modal, modalApi] = useVbenModal({
   },
   title: '内嵌表单示例',
 });
+
+function onSubmit(values: Record<string, any>) {
+  message.loading({
+    content: '正在提交中...',
+    duration: 0,
+    key: 'is-form-submitting',
+  });
+  modalApi.lock();
+  setTimeout(() => {
+    modalApi.close();
+    message.success({
+      content: `提交成功：${JSON.stringify(values)}`,
+      duration: 2,
+      key: 'is-form-submitting',
+    });
+  }, 3000);
+}
 </script>
 <template>
   <Modal>
diff --git a/apps/vben5/playground/src/views/examples/modal/index.vue b/apps/vben5/playground/src/views/examples/modal/index.vue
index 4176f14eb..71a44ce62 100644
--- a/apps/vben5/playground/src/views/examples/modal/index.vue
+++ b/apps/vben5/playground/src/views/examples/modal/index.vue
@@ -1,15 +1,17 @@
 <script lang="ts" setup>
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { Button, Card } from 'ant-design-vue';
+import { Button, Card, Flex } from 'ant-design-vue';
 
 import DocButton from '../doc-button.vue';
 import AutoHeightDemo from './auto-height-demo.vue';
 import BaseDemo from './base-demo.vue';
+import BlurDemo from './blur-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 NestedDemo from './nested-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
 
 const [BaseModal, baseModalApi] = useVbenModal({
@@ -42,6 +44,14 @@ const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: FormModalDemo,
 });
 
+const [NestedModal, nestedModalApi] = useVbenModal({
+  connectedComponent: NestedDemo,
+});
+
+const [BlurModal, blurModalApi] = useVbenModal({
+  connectedComponent: BlurDemo,
+});
+
 function openBaseModal() {
   baseModalApi.open();
 }
@@ -63,24 +73,33 @@ function openDynamicModal() {
 }
 
 function openSharedModal() {
-  sharedModalApi.setData({
-    content: '外部传递的数据 content',
-    payload: '外部传递的数据 payload',
-  });
-  sharedModalApi.open();
+  sharedModalApi
+    .setData({
+      content: '外部传递的数据 content',
+      payload: '外部传递的数据 payload',
+    })
+    .open();
+}
+
+function openNestedModal() {
+  nestedModalApi.open();
+}
+
+function openBlurModal() {
+  blurModalApi.open();
 }
 
 function handleUpdateTitle() {
-  dynamicModalApi.setState({ title: '外部动态标题' });
-  dynamicModalApi.open();
+  dynamicModalApi.setState({ title: '外部动态标题' }).open();
 }
 
 function openFormModal() {
-  formModalApi.setData({
-    // 表单值
-    values: { field1: 'abc' },
-  });
-  formModalApi.open();
+  formModalApi
+    .setData({
+      // 表单值
+      values: { field1: 'abc', field2: '123' },
+    })
+    .open();
 }
 </script>
 
@@ -100,44 +119,80 @@ function openFormModal() {
     <DynamicModal />
     <SharedDataModal />
     <FormModal />
-    <Card class="mb-4" title="基本使用">
-      <p class="mb-3">一个基础的弹窗示例</p>
-      <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>
-    </Card>
-
-    <Card class="mb-4" title="可拖拽示例">
-      <p class="mb-3">配置 draggable 可开启拖拽功能</p>
-      <Button type="primary" @click="openDragModal">打开弹窗</Button>
-    </Card>
-
-    <Card class="mb-4" title="动态配置示例">
-      <p class="mb-3">通过 setState 动态调整弹窗数据</p>
-      <Button type="primary" @click="openDynamicModal">打开弹窗</Button>
-      <Button class="ml-2" type="primary" @click="handleUpdateTitle">
-        从外部修改标题并打开
-      </Button>
-    </Card>
-
-    <Card class="mb-4" title="内外数据共享示例">
-      <p class="mb-3">通过共享 sharedData 来进行数据交互</p>
-      <Button type="primary" @click="openSharedModal">
-        打开弹窗并传递数据
-      </Button>
-    </Card>
-
-    <Card class="mb-4" title="表单弹窗示例">
-      <p class="mb-3">弹窗与表单结合</p>
-      <Button type="primary" @click="openFormModal"> 打开弹窗 </Button>
-    </Card>
+    <NestedModal />
+    <BlurModal />
+    <Flex wrap="wrap" class="w-full" gap="10">
+      <Card class="w-[300px]" title="基本使用">
+        <p>一个基础的弹窗示例</p>
+        <template #actions>
+          <Button type="primary" @click="openBaseModal">打开弹窗</Button>
+        </template>
+      </Card>
+
+      <Card class="w-[300px]" title="指定容器">
+        <p>在内容区域打开弹窗的示例</p>
+        <template #actions>
+          <Button type="primary" @click="openInContentModal">打开弹窗</Button>
+        </template>
+      </Card>
+
+      <Card class="w-[300px]" title="内容高度自适应">
+        <p>可根据内容并自动调整高度</p>
+        <template #actions>
+          <Button type="primary" @click="openAutoHeightModal">
+            打开弹窗
+          </Button>
+        </template>
+      </Card>
+
+      <Card class="w-[300px]" title="可拖拽示例">
+        <p>配置 draggable 可开启拖拽功能</p>
+        <template #actions>
+          <Button type="primary" @click="openDragModal"> 打开弹窗 </Button>
+        </template>
+      </Card>
+
+      <Card class="w-[300px]" title="动态配置示例">
+        <p>通过 setState 动态调整弹窗数据</p>
+        <template #extra>
+          <Button type="link" @click="openDynamicModal">打开弹窗</Button>
+        </template>
+        <template #actions>
+          <Button type="primary" @click="handleUpdateTitle">
+            外部修改标题并打开
+          </Button>
+        </template>
+      </Card>
+
+      <Card class="w-[300px]" title="内外数据共享示例">
+        <p>通过共享 sharedData 来进行数据交互</p>
+        <template #actions>
+          <Button type="primary" @click="openSharedModal">
+            打开弹窗并传递数据
+          </Button>
+        </template>
+      </Card>
+
+      <Card class="w-[300px]" title="表单弹窗示例">
+        <p>弹窗与表单结合</p>
+        <template #actions>
+          <Button type="primary" @click="openFormModal"> 打开表单弹窗 </Button>
+        </template>
+      </Card>
+
+      <Card class="w-[300px]" title="嵌套弹窗示例">
+        <p>在已经打开的弹窗中再次打开弹窗</p>
+        <template #actions>
+          <Button type="primary" @click="openNestedModal">打开嵌套弹窗</Button>
+        </template>
+      </Card>
+
+      <Card class="w-[300px]" title="遮罩模糊示例">
+        <p>遮罩层应用类似毛玻璃的模糊效果</p>
+        <template #actions>
+          <Button type="primary" @click="openBlurModal">打开弹窗</Button>
+        </template>
+      </Card>
+    </Flex>
   </Page>
 </template>
diff --git a/apps/vben5/playground/src/views/examples/modal/nested-demo.vue b/apps/vben5/playground/src/views/examples/modal/nested-demo.vue
new file mode 100644
index 000000000..6251fd059
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/modal/nested-demo.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import DragDemo from './drag-demo.vue';
+
+const [Modal] = useVbenModal({
+  destroyOnClose: true,
+});
+const [BaseModal, baseModalApi] = useVbenModal({
+  connectedComponent: DragDemo,
+});
+
+function openNestedModal() {
+  baseModalApi.open();
+}
+</script>
+<template>
+  <Modal title="嵌套弹窗示例">
+    <Button @click="openNestedModal" type="primary">打开子弹窗</Button>
+    <BaseModal />
+  </Modal>
+</template>
diff --git a/apps/vben5/playground/src/views/examples/tippy/index.vue b/apps/vben5/playground/src/views/examples/tippy/index.vue
new file mode 100644
index 000000000..628fa3804
--- /dev/null
+++ b/apps/vben5/playground/src/views/examples/tippy/index.vue
@@ -0,0 +1,303 @@
+<script lang="ts" setup>
+import type { TippyProps } from '@vben/common-ui';
+
+import { reactive } from 'vue';
+
+import { Page, Tippy } from '@vben/common-ui';
+
+import { Button, Card, Flex } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+const tippyProps = reactive<TippyProps>({
+  animation: 'shift-away',
+  arrow: true,
+  content: '这是一个提示',
+  delay: [200, 200],
+  duration: 200,
+  followCursor: false,
+  hideOnClick: false,
+  inertia: true,
+  maxWidth: 'none',
+  placement: 'top',
+  theme: 'dark',
+  trigger: 'mouseenter focusin',
+});
+
+function parseBoolean(value: string) {
+  switch (value) {
+    case 'false': {
+      return false;
+    }
+    case 'true': {
+      return true;
+    }
+    default: {
+      return value;
+    }
+  }
+}
+
+const [Form] = useVbenForm({
+  handleValuesChange(values) {
+    Object.assign(tippyProps, {
+      ...values,
+      delay: [values.delay1, values.delay2],
+      followCursor: parseBoolean(values.followCursor),
+      hideOnClick: parseBoolean(values.hideOnClick),
+      trigger: values.trigger.join(' '),
+    });
+  },
+  schema: [
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        class: 'w-full',
+        options: [
+          { label: '自动', value: 'auto' },
+          { label: '暗色', value: 'dark' },
+          { label: '亮色', value: 'light' },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: tippyProps.theme,
+      fieldName: 'theme',
+      label: '主题',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        class: 'w-full',
+        options: [
+          { label: '向上滑入', value: 'shift-away' },
+          { label: '向下滑入', value: 'shift-toward' },
+          { label: '缩放', value: 'scale' },
+          { label: '透视', value: 'perspective' },
+          { label: '淡入', value: 'fade' },
+        ],
+      },
+      defaultValue: tippyProps.animation,
+      fieldName: 'animation',
+      label: '动画类型',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: '是', value: true },
+          { label: '否', value: false },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: tippyProps.inertia,
+      fieldName: 'inertia',
+      label: '动画惯性',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        class: 'w-full',
+        options: [
+          { label: '顶部', value: 'top' },
+          { label: '顶左', value: 'top-start' },
+          { label: '顶右', value: 'top-end' },
+          { label: '底部', value: 'bottom' },
+          { label: '底左', value: 'bottom-start' },
+          { label: '底右', value: 'bottom-end' },
+          { label: '左侧', value: 'left' },
+          { label: '左上', value: 'left-start' },
+          { label: '左下', value: 'left-end' },
+          { label: '右侧', value: 'right' },
+          { label: '右上', value: 'right-start' },
+          { label: '右下', value: 'right-end' },
+        ],
+      },
+      defaultValue: tippyProps.placement,
+      fieldName: 'placement',
+      label: '位置',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        addonAfter: '毫秒',
+      },
+      defaultValue: tippyProps.duration,
+      fieldName: 'duration',
+      label: '动画时长',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        addonAfter: '毫秒',
+      },
+      defaultValue: 100,
+      fieldName: 'delay1',
+      label: '显示延时',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        addonAfter: '毫秒',
+      },
+      defaultValue: 100,
+      fieldName: 'delay2',
+      label: '隐藏延时',
+    },
+    {
+      component: 'Input',
+      defaultValue: tippyProps.content,
+      fieldName: 'content',
+      label: '内容',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: '是', value: true },
+          { label: '否', value: false },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: tippyProps.arrow,
+      fieldName: 'arrow',
+      label: '指示箭头',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        class: 'w-full',
+        options: [
+          { label: '不跟随', value: 'false' },
+          { label: '完全跟随', value: 'true' },
+          { label: '仅横向', value: 'horizontal' },
+          { label: '仅纵向', value: 'vertical' },
+          { label: '仅初始', value: 'initial' },
+        ],
+      },
+      defaultValue: tippyProps.followCursor?.toString(),
+      fieldName: 'followCursor',
+      label: '跟随指针',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        class: 'w-full',
+        mode: 'multiple',
+        options: [
+          { label: '鼠标移入', value: 'mouseenter' },
+          { label: '被点击', value: 'click' },
+          { label: '获得焦点', value: 'focusin' },
+          { label: '无触发，仅手动', value: 'manual' },
+        ],
+      },
+      defaultValue: tippyProps.trigger?.split(' '),
+      fieldName: 'trigger',
+      label: '触发方式',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        class: 'w-full',
+        options: [
+          { label: '否', value: 'false' },
+          { label: '是', value: 'true' },
+          { label: '仅内部', value: 'toggle' },
+        ],
+      },
+      defaultValue: tippyProps.hideOnClick?.toString(),
+      dependencies: {
+        componentProps(_, formAction) {
+          return {
+            disabled: !formAction.values.trigger.includes('click'),
+          };
+        },
+        triggerFields: ['trigger'],
+      },
+      fieldName: 'hideOnClick',
+      help: '只有在触发方式为`click`时才有效',
+      label: '点击后隐藏',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: 'none、200px',
+      },
+      defaultValue: tippyProps.maxWidth,
+      fieldName: 'maxWidth',
+      label: '最大宽度',
+    },
+  ],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+});
+
+function goDoc() {
+  window.open('https://atomiks.github.io/tippyjs/v6/all-props/');
+}
+</script>
+<template>
+  <Page title="Tippy">
+    <template #description>
+      <div class="flex items-center">
+        <p>
+          Tippy
+          是一个轻量级的提示工具库，它可以用来创建各种交互式提示，如工具提示、引导提示等。
+        </p>
+        <Button type="link" size="small" @click="goDoc">查看文档</Button>
+      </div>
+    </template>
+    <Card title="指令形式使用">
+      <p class="mb-4">
+        指令形式使用比较简洁，直接在需要展示tooltip的组件上用v-tippy传递配置，适用于固定内容的工具提示。
+      </p>
+      <Flex warp="warp" gap="20" align="center">
+        <Button v-tippy="'这是一个提示，使用了默认的配置'">默认配置</Button>
+
+        <Button
+          v-tippy="{ theme: 'light', content: '这是一个提示，总是light主题' }"
+        >
+          指定主题
+        </Button>
+        <Button
+          v-tippy="{
+            theme: 'light',
+            content: '这个提示将在点燃组件100毫秒后激活',
+            delay: 100,
+          }"
+        >
+          指定延时
+        </Button>
+        <Button
+          v-tippy="{
+            content: '本提示的动画为`scale`',
+            animation: 'scale',
+          }"
+        >
+          指定动画
+        </Button>
+      </Flex>
+    </Card>
+    <Card title="组件形式使用" class="mt-4">
+      <div class="flex w-full justify-center">
+        <Tippy v-bind="tippyProps">
+          <Button>鼠标移到这个组件上来体验效果</Button>
+        </Tippy>
+      </div>
+
+      <Form class="mt-4" />
+      <template #actions>
+        <p
+          class="text-secondary-foreground hover:text-secondary-foreground cursor-default"
+        >
+          更多配置请
+          <Button type="link" size="small" @click="goDoc">查看文档</Button>
+          ，这里只列出了一些常用的配置
+        </p>
+      </template>
+    </Card>
+  </Page>
+</template>
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 dd9e2a376..95de70453 100644
--- a/apps/vben5/playground/src/views/examples/vxe-table/form.vue
+++ b/apps/vben5/playground/src/views/examples/vxe-table/form.vue
@@ -5,6 +5,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import { Page } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getExampleTableApi } from '#/api';
@@ -21,6 +22,7 @@ interface RowType {
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
   schema: [
     {
       component: 'Input',
@@ -58,8 +60,9 @@ const formOptions: VbenFormProps = {
       label: 'Color',
     },
     {
-      component: 'DatePicker',
-      fieldName: 'datePicker',
+      component: 'RangePicker',
+      defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'date',
       label: 'Date',
     },
   ],
diff --git a/apps/vben5/pnpm-workspace.yaml b/apps/vben5/pnpm-workspace.yaml
index 1f751e415..65b007f1e 100644
--- a/apps/vben5/pnpm-workspace.yaml
+++ b/apps/vben5/pnpm-workspace.yaml
@@ -14,75 +14,75 @@ packages:
   - docs
   - playground
 catalog:
-  '@ast-grep/napi': ^0.31.1
+  '@ast-grep/napi': ^0.32.3
   '@ant-design/icons-vue': ^7.0.1
   '@changesets/changelog-github': ^0.5.0
-  '@changesets/cli': ^2.27.11
+  '@changesets/cli': ^2.27.12
   '@changesets/git': ^3.0.2
-  '@clack/prompts': ^0.9.0
-  '@commitlint/cli': ^19.6.1
-  '@commitlint/config-conventional': ^19.6.0
+  '@clack/prompts': ^0.9.1
+  '@commitlint/cli': ^19.7.1
+  '@commitlint/config-conventional': ^19.7.1
   '@ctrl/tinycolor': ^4.1.0
-  '@eslint/js': ^9.17.0
-  '@faker-js/faker': ^9.3.0
-  '@iconify/json': ^2.2.286
+  '@eslint/js': ^9.19.0
+  '@faker-js/faker': ^9.4.0
+  '@iconify/json': ^2.2.302
   '@iconify/tailwind': ^1.2.0
-  '@iconify/vue': ^4.2.0
-  '@intlify/core-base': ^10.0.5
-  '@intlify/unplugin-vue-i18n': ^6.0.1
-  '@jspm/generator': ^2.4.1
+  '@iconify/vue': ^4.3.0
+  '@intlify/core-base': ^11.1.0
+  '@intlify/unplugin-vue-i18n': ^6.0.3
+  '@jspm/generator': ^2.4.2
   '@manypkg/get-packages': ^2.2.2
   '@microsoft/signalr': ^8.0.7
-  '@nolebase/vitepress-plugin-git-changelog': ^2.11.1
-  '@playwright/test': ^1.49.1
-  '@pnpm/workspace.read-manifest': ^1000.0.1
+  '@nolebase/vitepress-plugin-git-changelog': ^2.12.1
+  '@playwright/test': ^1.50.1
+  '@pnpm/workspace.read-manifest': ^1000.0.2
   '@stylistic/stylelint-plugin': ^3.1.1
   '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
-  '@tailwindcss/typography': ^0.5.15
-  '@tanstack/vue-query': ^5.62.8
-  '@tanstack/vue-store': ^0.6.0
+  '@tailwindcss/typography': ^0.5.16
+  '@tanstack/vue-query': ^5.65.0
+  '@tanstack/vue-store': ^0.7.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/jsonwebtoken': ^9.0.8
   '@types/lodash.clonedeep': ^4.5.9
   '@types/lodash.debounce': ^4.0.9
   '@types/lodash.get': ^4.4.9
   '@types/lodash.isequal': ^4.5.8
   '@types/lodash.merge': ^4.6.9
-  '@types/node': ^22.10.2
+  '@types/node': ^22.13.1
   '@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.18.1
-  '@typescript-eslint/parser': ^8.18.1
-  '@vee-validate/zod': ^4.14.7
+  '@typescript-eslint/eslint-plugin': ^8.23.0
+  '@typescript-eslint/parser': ^8.23.0
+  '@vee-validate/zod': ^4.15.0
   '@vite-pwa/vitepress': ^0.5.3
   '@vitejs/plugin-vue': ^5.2.1
   '@vitejs/plugin-vue-jsx': ^4.1.1
   '@vue/reactivity': ^3.5.13
   '@vue/shared': ^3.5.13
   '@vue/test-utils': ^2.4.6
-  '@vueuse/core': ^12.0.0
-  '@vueuse/integrations': ^12.0.0
+  '@vueuse/core': ^12.5.0
+  '@vueuse/integrations': ^12.5.0
   ant-design-vue: ^4.2.6
   archiver: ^7.0.1
   autoprefixer: ^10.4.20
   axios: ^1.7.9
   axios-mock-adapter: ^2.1.0
   cac: ^6.7.14
-  chalk: ^5.4.0
-  cheerio: 1.0.0
+  chalk: ^5.4.1
+  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.3.0
+  consola: ^3.4.0
   cross-env: ^7.0.3
-  cspell: ^8.17.1
+  cspell: ^8.17.3
   cssnano: ^7.0.6
   cz-git: ^1.11.0
   czg: ^1.11.0
@@ -90,19 +90,19 @@ catalog:
   defu: ^6.1.4
   depcheck: ^1.4.7
   dotenv: ^16.4.7
-  echarts: ^5.5.1
-  element-plus: ^2.9.1
-  eslint: ^9.17.0
-  eslint-config-turbo: ^2.3.3
+  echarts: ^5.6.0
+  element-plus: ^2.9.3
+  eslint: ^9.19.0
+  eslint-config-turbo: ^2.4.0
   eslint-plugin-command: ^0.2.7
   eslint-plugin-eslint-comments: ^3.2.0
   eslint-plugin-import-x: ^4.6.1
-  eslint-plugin-jsdoc: ^50.6.1
-  eslint-plugin-jsonc: ^2.18.2
+  eslint-plugin-jsdoc: ^50.6.3
+  eslint-plugin-jsonc: ^2.19.1
   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
+  eslint-plugin-perfectionist: ^4.8.0
+  eslint-plugin-prettier: ^5.2.3
   eslint-plugin-regexp: ^2.7.0
   eslint-plugin-unicorn: ^56.0.1
   eslint-plugin-unused-imports: ^4.1.4
@@ -112,14 +112,14 @@ catalog:
   find-up: ^7.0.0
   get-port: ^7.1.0
   globals: ^15.14.0
-  h3: ^1.13.0
-  happy-dom: ^15.11.7
+  h3: ^1.14.0
+  happy-dom: ^16.8.1
   html-minifier-terser: ^7.2.0
   husky: ^9.1.7
   is-ci: ^4.1.0
   jsonc-eslint-parser: ^2.4.0
   jsonwebtoken: ^9.0.2
-  lint-staged: ^15.2.11
+  lint-staged: ^15.4.3
   lodash.clonedeep: ^4.5.0
   lodash.debounce: ^4.0.8
   lodash.get: ^4.4.2
@@ -127,66 +127,68 @@ catalog:
   lodash.merge: ^4.6.2
   lucide-vue-next: ^0.469.0
   medium-zoom: ^1.1.0
-  naive-ui: ^2.40.4
+  naive-ui: ^2.41.0
   nitropack: ^2.10.4
   nprogress: ^0.2.0
-  ora: ^8.1.1
-  pinia: 2.2.2
+  ora: ^8.2.0
+  pinia: ^2.3.1
   pinia-plugin-persistedstate: ^4.2.0
-  pkg-types: ^1.2.1
-  playwright: ^1.49.1
-  postcss: ^8.4.49
+  pkg-types: ^1.3.1
+  playwright: ^1.50.1
+  postcss: ^8.5.1
   postcss-antd-fixes: ^0.2.0
-  postcss-html: ^1.7.0
+  postcss-html: ^1.8.0
   postcss-import: ^16.1.0
-  postcss-preset-env: ^10.1.2
+  postcss-preset-env: ^10.1.3
   postcss-scss: ^4.0.9
   prettier: ^3.4.2
-  prettier-plugin-tailwindcss: ^0.6.9
+  prettier-plugin-tailwindcss: ^0.6.11
   publint: ^0.2.12
   qrcode: ^1.5.4
-  radix-vue: ^1.9.11
+  radix-vue: ^1.9.13
   resolve.exports: ^2.0.3
   rimraf: ^6.0.1
-  rollup: ^4.28.1
-  rollup-plugin-visualizer: ^5.12.0
-  sass: 1.80.6
+  rollup: ^4.34.2
+  rollup-plugin-visualizer: ^5.14.0
+  sass: ^1.83.4
   sortablejs: ^1.15.6
-  stylelint: ^16.12.0
+  stylelint: ^16.14.1
   stylelint-config-recess-order: ^5.1.1
   stylelint-config-recommended: ^14.0.1
   stylelint-config-recommended-scss: ^14.1.0
-  stylelint-config-recommended-vue: ^1.5.0
+  stylelint-config-recommended-vue: ^1.6.0
   stylelint-config-standard: ^36.0.1
   stylelint-order: ^6.0.4
-  stylelint-prettier: ^5.0.2
-  stylelint-scss: ^6.10.0
-  tailwind-merge: ^2.5.5
+  stylelint-prettier: ^5.0.3
+  stylelint-scss: ^6.11.0
+  tailwind-merge: ^2.6.0
   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.1
-  unplugin-element-plus: ^0.8.0
-  vee-validate: ^4.14.7
-  vite: ^6.0.5
+  tippy.js: ^6.2.5
+  turbo: ^2.4.0
+  typescript: ^5.7.3
+  unbuild: ^3.3.1
+  unplugin-element-plus: ^0.9.0
+  vee-validate: ^4.15.0
+  vite: ^6.0.11
   vite-plugin-compression: ^0.5.1
-  vite-plugin-dts: 4.2.1
+  vite-plugin-dts: ^4.5.0
   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.8
-  vitepress: ^1.5.0
-  vitepress-plugin-group-icons: ^1.3.2
-  vitest: ^2.1.8
+  vite-plugin-vue-devtools: ^7.7.1
+  vitepress: ^1.6.3
+  vitepress-plugin-group-icons: ^1.3.5
+  vitest: ^2.1.9
   vue: ^3.5.13
   vue-eslint-parser: ^9.4.3
-  vue-i18n: ^10.0.5
+  vue-i18n: ^11.1.0
   vue-router: ^4.5.0
-  vue-tsc: ^2.1.10
-  vxe-pc-ui: ^4.3.40
-  vxe-table: ^4.9.33
+  vue-tippy: ^6.6.0
+  vue-tsc: 2.1.10
+  vxe-pc-ui: ^4.3.79
+  vxe-table: 4.10.0
   watermark-js-plus: ^1.5.7
   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 1690720f1..8128ec5c2 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.5.1",
+  "version": "5.5.3",
   "private": true,
   "license": "MIT",
   "type": "module",
diff --git a/apps/vben5/scripts/vsh/package.json b/apps/vben5/scripts/vsh/package.json
index 04123e2e2..9767a4dc0 100644
--- a/apps/vben5/scripts/vsh/package.json
+++ b/apps/vben5/scripts/vsh/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/vsh",
-  "version": "5.5.1",
+  "version": "5.5.3",
   "private": true,
   "license": "MIT",
   "type": "module",
diff --git a/apps/vben5/scripts/vsh/src/publint/index.ts b/apps/vben5/scripts/vsh/src/publint/index.ts
index 658c0c5c0..d0786737d 100644
--- a/apps/vben5/scripts/vsh/src/publint/index.ts
+++ b/apps/vben5/scripts/vsh/src/publint/index.ts
@@ -113,11 +113,11 @@ async function runPublint(files: string[], { check }: PubLintCommandOptions) {
 }
 
 function printResult(
-  results: Array<{
+  results: Array<null | {
     pkgJson: Record<string, number | string>;
     pkgPath: string;
     publintResult: Result;
-  } | null>,
+  }>,
   check?: boolean,
 ) {
   let errorCount = 0;
diff --git a/apps/vben5/vben-admin.code-workspace b/apps/vben5/vben-admin.code-workspace
index aa8205bda..9c41ad478 100644
--- a/apps/vben5/vben-admin.code-workspace
+++ b/apps/vben5/vben-admin.code-workspace
@@ -4,6 +4,10 @@
       "name": "@vben/backend-mock",
       "path": "apps/backend-mock",
     },
+    {
+      "name": "@abp/app-antd",
+      "path": "apps/app-antd",
+    },
     {
       "name": "@vben/web-antd",
       "path": "apps/web-antd",