diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8fb33f60..ebb9d8ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 1.3.2
+
+**REFACTOR**
+
+- 所有表格操作列宽度调整为'auto', 这样会根据子元素宽度适配(比如没有分配权限的情况)
+
 # 1.3.1
 
 **REFACTOR**
diff --git a/apps/web-antd/src/adapter/component/index.ts b/apps/web-antd/src/adapter/component/index.ts
index ca59e2e5..3cde8257 100644
--- a/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/web-antd/src/adapter/component/index.ts
@@ -9,7 +9,6 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
 import {
-  computed,
   defineAsyncComponent,
   defineComponent,
   getCurrentInstance,
@@ -91,15 +90,10 @@ const withDefaultPlaceholder = <T extends Component>(
     inheritAttrs: false,
     name: component.name,
     setup: (props: any, { attrs, expose, slots }) => {
-      /**
-       * 需要使用computed 否则后续updateSchema更新的placeholder无法显示(响应式问题)
-       */
-      const placeholder = computed(
-        () =>
-          props?.placeholder ||
-          attrs?.placeholder ||
-          $t(`ui.placeholder.${type}`),
-      );
+      const placeholder =
+        props?.placeholder ||
+        attrs?.placeholder ||
+        $t(`ui.placeholder.${type}`);
 
       // 透传组件暴露的方法
       const innerRef = ref();
@@ -118,7 +112,7 @@ const withDefaultPlaceholder = <T extends Component>(
           component,
           {
             ...componentProps,
-            placeholder: placeholder.value,
+            placeholder,
             ...props,
             ...attrs,
             ref: innerRef,
diff --git a/apps/web-antd/src/views/demo/demo/data.ts b/apps/web-antd/src/views/demo/demo/data.ts
index 81c90c39..241d855f 100755
--- a/apps/web-antd/src/views/demo/demo/data.ts
+++ b/apps/web-antd/src/views/demo/demo/data.ts
@@ -51,7 +51,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/demo/tree/data.ts b/apps/web-antd/src/views/demo/tree/data.ts
index a6984f67..ae15288e 100755
--- a/apps/web-antd/src/views/demo/tree/data.ts
+++ b/apps/web-antd/src/views/demo/tree/data.ts
@@ -60,7 +60,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/monitor/online/data.ts b/apps/web-antd/src/views/monitor/online/data.ts
index 8a42aaf6..15944dc4 100644
--- a/apps/web-antd/src/views/monitor/online/data.ts
+++ b/apps/web-antd/src/views/monitor/online/data.ts
@@ -79,6 +79,7 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 120,
+    resizable: false,
+    width: 'auto',
   },
 ];
diff --git a/apps/web-antd/src/views/monitor/operlog/data.tsx b/apps/web-antd/src/views/monitor/operlog/data.tsx
index ee1bacea..d42b3709 100644
--- a/apps/web-antd/src/views/monitor/operlog/data.tsx
+++ b/apps/web-antd/src/views/monitor/operlog/data.tsx
@@ -86,6 +86,7 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 120,
+    resizable: false,
+    width: 'auto',
   },
 ];
diff --git a/apps/web-antd/src/views/system/client/data.tsx b/apps/web-antd/src/views/system/client/data.tsx
index 2b852f0b..1cf85720 100644
--- a/apps/web-antd/src/views/system/client/data.tsx
+++ b/apps/web-antd/src/views/system/client/data.tsx
@@ -95,7 +95,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/system/config/data.ts b/apps/web-antd/src/views/system/config/data.ts
index 9cb45ffa..0b462e4f 100644
--- a/apps/web-antd/src/views/system/config/data.ts
+++ b/apps/web-antd/src/views/system/config/data.ts
@@ -71,7 +71,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/system/dept/data.ts b/apps/web-antd/src/views/system/dept/data.ts
index e5f9a669..8ae8a96d 100644
--- a/apps/web-antd/src/views/system/dept/data.ts
+++ b/apps/web-antd/src/views/system/dept/data.ts
@@ -39,11 +39,13 @@ export const columns: VxeGridProps['columns'] = [
   {
     field: 'orderNum',
     title: '排序',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
   {
     field: 'status',
-    width: 180,
+    resizable: false,
+    width: 'auto',
     title: '状态',
     slots: {
       default: ({ row }) => {
diff --git a/apps/web-antd/src/views/system/dict/data/data.ts b/apps/web-antd/src/views/system/dict/data/data.ts
index 81887463..087e96b2 100644
--- a/apps/web-antd/src/views/system/dict/data/data.ts
+++ b/apps/web-antd/src/views/system/dict/data/data.ts
@@ -45,7 +45,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/system/dict/type/data.ts b/apps/web-antd/src/views/system/dict/type/data.ts
index 2d08365b..cfd584a7 100644
--- a/apps/web-antd/src/views/system/dict/type/data.ts
+++ b/apps/web-antd/src/views/system/dict/type/data.ts
@@ -39,7 +39,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/system/menu/data.tsx b/apps/web-antd/src/views/system/menu/data.tsx
index a416c429..f29cc4f3 100644
--- a/apps/web-antd/src/views/system/menu/data.tsx
+++ b/apps/web-antd/src/views/system/menu/data.tsx
@@ -145,7 +145,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 200,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/system/notice/data.ts b/apps/web-antd/src/views/system/notice/data.ts
index 4e463e9a..8e052c19 100644
--- a/apps/web-antd/src/views/system/notice/data.ts
+++ b/apps/web-antd/src/views/system/notice/data.ts
@@ -69,7 +69,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/system/oss-config/data.tsx b/apps/web-antd/src/views/system/oss-config/data.tsx
index 7b394def..2d086210 100644
--- a/apps/web-antd/src/views/system/oss-config/data.tsx
+++ b/apps/web-antd/src/views/system/oss-config/data.tsx
@@ -81,7 +81,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/system/oss/data.tsx b/apps/web-antd/src/views/system/oss/data.tsx
index 06d1bc67..ec834796 100644
--- a/apps/web-antd/src/views/system/oss/data.tsx
+++ b/apps/web-antd/src/views/system/oss/data.tsx
@@ -69,7 +69,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/system/post/data.ts b/apps/web-antd/src/views/system/post/data.ts
index 3a7da9d2..e8595553 100644
--- a/apps/web-antd/src/views/system/post/data.ts
+++ b/apps/web-antd/src/views/system/post/data.ts
@@ -65,7 +65,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/system/role-assign/data.tsx b/apps/web-antd/src/views/system/role-assign/data.tsx
index 75f8bfe9..a26bd164 100644
--- a/apps/web-antd/src/views/system/role-assign/data.tsx
+++ b/apps/web-antd/src/views/system/role-assign/data.tsx
@@ -37,6 +37,7 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
diff --git a/apps/web-antd/src/views/system/tenant/data.tsx b/apps/web-antd/src/views/system/tenant/data.tsx
index c86ec835..69af062b 100644
--- a/apps/web-antd/src/views/system/tenant/data.tsx
+++ b/apps/web-antd/src/views/system/tenant/data.tsx
@@ -68,7 +68,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 200,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/system/tenantPackage/data.ts b/apps/web-antd/src/views/system/tenantPackage/data.ts
index 4015f432..a80de6a5 100644
--- a/apps/web-antd/src/views/system/tenantPackage/data.ts
+++ b/apps/web-antd/src/views/system/tenantPackage/data.ts
@@ -29,7 +29,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/workflow/category/data.ts b/apps/web-antd/src/views/workflow/category/data.ts
index 41a0a884..9dfe1940 100644
--- a/apps/web-antd/src/views/workflow/category/data.ts
+++ b/apps/web-antd/src/views/workflow/category/data.ts
@@ -33,7 +33,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 200,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/workflow/leave/data.tsx b/apps/web-antd/src/views/workflow/leave/data.tsx
index 7afdb898..7eb3441b 100644
--- a/apps/web-antd/src/views/workflow/leave/data.tsx
+++ b/apps/web-antd/src/views/workflow/leave/data.tsx
@@ -91,7 +91,8 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 210,
+    resizable: false,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/workflow/processDefinition/category-tree.vue b/apps/web-antd/src/views/workflow/processDefinition/category-tree.vue
index 6912c256..901038c8 100644
--- a/apps/web-antd/src/views/workflow/processDefinition/category-tree.vue
+++ b/apps/web-antd/src/views/workflow/processDefinition/category-tree.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { PropType } from 'vue';
+
 import type { CategoryTree } from '#/api/workflow/category/model';
 
-import { onMounted, type PropType, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 import { SyncOutlined } from '@ant-design/icons-vue';
 import { InputSearch, Skeleton, Tree } from 'ant-design-vue';
diff --git a/apps/web-antd/src/views/workflow/processDefinition/data.tsx b/apps/web-antd/src/views/workflow/processDefinition/data.tsx
index ecaffdf0..dafc2e1a 100644
--- a/apps/web-antd/src/views/workflow/processDefinition/data.tsx
+++ b/apps/web-antd/src/views/workflow/processDefinition/data.tsx
@@ -63,7 +63,7 @@ export const columns: VxeGridProps['columns'] = [
     slots: { default: 'action' },
     title: '操作',
     resizable: false,
-    width: 200,
+    width: 'auto',
   },
 ];
 
diff --git a/apps/web-antd/src/views/演示使用自行删除/sse/index.vue b/apps/web-antd/src/views/演示使用自行删除/sse/index.vue
index 220cfa8f..423377df 100644
--- a/apps/web-antd/src/views/演示使用自行删除/sse/index.vue
+++ b/apps/web-antd/src/views/演示使用自行删除/sse/index.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
 import { Page, useVbenModal } from '@vben/common-ui';
 
 import { Space } from 'ant-design-vue';
 
-import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
 import { sseList } from './api';
 import sendMsgModal from './send-msg-modal.vue';
@@ -31,7 +33,8 @@ const gridOptions: VxeGridProps = {
       fixed: 'right',
       slots: { default: 'action' },
       title: '操作',
-      width: 180,
+      resizable: false,
+      width: 'auto',
     },
   ],
   height: 'auto',
diff --git a/docs/.vitepress/theme/styles/variables.css b/docs/.vitepress/theme/styles/variables.css
index d633803c..124bb0c4 100644
--- a/docs/.vitepress/theme/styles/variables.css
+++ b/docs/.vitepress/theme/styles/variables.css
@@ -104,6 +104,11 @@
   --vp-custom-block-tip-text: var(--vp-c-text-1);
   --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
   --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+
+  /**
+  * modal zIndex
+  */
+  --popup-z-index: 1000;
 }
 
 @media (min-width: 640px) {
diff --git a/docs/src/components/common-ui/vben-alert.md b/docs/src/components/common-ui/vben-alert.md
index 61caac6d..6541b665 100644
--- a/docs/src/components/common-ui/vben-alert.md
+++ b/docs/src/components/common-ui/vben-alert.md
@@ -12,6 +12,12 @@ Alert提供的功能与Modal类似，但只适用于简单应用场景。例如
 
 :::
 
+::: tip 注意
+
+Alert提供的快捷方法alert、confirm、prompt动态创建的弹窗在已打开的情况下，不支持HMR（热更新），代码变更后需要关闭这些弹窗后重新打开。
+
+:::
+
 ::: tip README
 
 下方示例代码中的，存在一些主题色未适配、样式缺失的问题，这些问题只在文档内会出现，实际使用并不会有这些问题，可忽略，不必纠结。
@@ -32,6 +38,23 @@ Alert提供的功能与Modal类似，但只适用于简单应用场景。例如
 
 <DemoPreview dir="demos/vben-alert/prompt" />
 
+## useAlertContext
+
+当弹窗的content、footer、icon使用自定义组件时，在这些组件中可以使用 `useAlertContext` 获取当前弹窗的上下文对象，用来主动控制弹窗。
+
+::: tip 注意
+
+`useAlertContext`只能用在setup或者函数式组件中。
+
+:::
+
+### Methods
+
+| 方法      | 描述               | 类型     | 版本要求 |
+| --------- | ------------------ | -------- | -------- |
+| doConfirm | 调用弹窗的确认操作 | ()=>void | >5.5.4   |
+| doCancel  | 调用弹窗的取消操作 | ()=>void | >5.5.4   |
+
 ## 类型说明
 
 ```ts
@@ -69,8 +92,14 @@ export type AlertProps = {
   contentClass?: string;
   /** 执行beforeClose回调期间，在内容区域显示一个loading遮罩*/
   contentMasking?: boolean;
+  /** 弹窗底部内容（与按钮在同一个容器中） */
+  footer?: Component | string;
   /** 弹窗的图标（在标题的前面） */
   icon?: Component | IconType;
+  /**
+   * 弹窗遮罩模糊效果
+   */
+  overlayBlur?: number;
   /** 是否显示取消按钮 */
   showCancel?: boolean;
   /** 弹窗标题 */
diff --git a/docs/src/components/common-ui/vben-api-component.md b/docs/src/components/common-ui/vben-api-component.md
index dac916bf..2c84e56b 100644
--- a/docs/src/components/common-ui/vben-api-component.md
+++ b/docs/src/components/common-ui/vben-api-component.md
@@ -131,26 +131,37 @@ function fetchApi(): Promise<Record<string, any>> {
 
 ### Props
 
-| 属性名 | 描述 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| modelValue(v-model) | 当前值 | `any` | - |
-| component | 欲包装的组件（以下称为目标组件） | `Component` | - |
-| numberToString | 是否将value从数字转为string | `boolean` | `false` |
-| api | 获取数据的函数 | `(arg?: any) => Promise<OptionsItem[] \| Record<string, any>>` | - |
-| params | 传递给api的参数 | `Record<string, any>` | - |
-| resultField | 从api返回的结果中提取options数组的字段名 | `string` | - |
-| labelField | label字段名 | `string` | `label` |
-| childrenField | 子级数据字段名，需要层级数据的组件可用 | `string` | `` |
-| valueField | value字段名 | `string` | `value` |
-| optionsPropName | 目标组件接收options数据的属性名称 | `string` | `options` |
-| modelPropName | 目标组件的双向绑定属性名，默认为modelValue。部分组件可能为value | `string` | `modelValue` |
-| immediate | 是否立即调用api | `boolean` | `true` |
-| alwaysLoad | 每次`visibleEvent`事件发生时都重新请求数据 | `boolean` | `false` |
-| beforeFetch | 在api请求之前的回调函数 | `AnyPromiseFunction<any, any>` | - |
-| afterFetch | 在api请求之后的回调函数 | `AnyPromiseFunction<any, any>` | - |
-| options | 直接传入选项数据，也作为api返回空数据时的后备数据 | `OptionsItem[]` | - |
-| visibleEvent | 触发重新请求数据的事件名 | `string` | - |
-| loadingSlot | 目标组件的插槽名称，用来显示一个"加载中"的图标 | `string` | - |
+| 属性名 | 描述 | 类型 | 默认值 | 版本要求 |
+| --- | --- | --- | --- | --- |
+| modelValue(v-model) | 当前值 | `any` | - | - |
+| component | 欲包装的组件（以下称为目标组件） | `Component` | - | - |
+| numberToString | 是否将value从数字转为string | `boolean` | `false` | - |
+| api | 获取数据的函数 | `(arg?: any) => Promise<OptionsItem[] \| Record<string, any>>` | - | - |
+| params | 传递给api的参数 | `Record<string, any>` | - | - |
+| resultField | 从api返回的结果中提取options数组的字段名 | `string` | - | - |
+| labelField | label字段名 | `string` | `label` | - |
+| childrenField | 子级数据字段名，需要层级数据的组件可用 | `string` | `` | - |
+| valueField | value字段名 | `string` | `value` | - |
+| optionsPropName | 目标组件接收options数据的属性名称 | `string` | `options` | - |
+| modelPropName | 目标组件的双向绑定属性名，默认为modelValue。部分组件可能为value | `string` | `modelValue` | - |
+| immediate | 是否立即调用api | `boolean` | `true` | - |
+| alwaysLoad | 每次`visibleEvent`事件发生时都重新请求数据 | `boolean` | `false` | - |
+| beforeFetch | 在api请求之前的回调函数 | `AnyPromiseFunction<any, any>` | - | - |
+| afterFetch | 在api请求之后的回调函数 | `AnyPromiseFunction<any, any>` | - | - |
+| options | 直接传入选项数据，也作为api返回空数据时的后备数据 | `OptionsItem[]` | - | - |
+| visibleEvent | 触发重新请求数据的事件名 | `string` | - | - |
+| loadingSlot | 目标组件的插槽名称，用来显示一个"加载中"的图标 | `string` | - | - |
+| autoSelect | 自动设置选项 | `'first' \| 'last' \| 'one'\| ((item: OptionsItem[]) => OptionsItem) \| false` | `false` | >5.5.4 |
+
+#### autoSelect 自动设置选项
+
+如果当前值为undefined，在选项数据成功加载之后，自动从备选项中选择一个作为当前值。默认值为`false`，即不自动选择选项。注意：该属性不应用于多选组件。可选值有：
+
+- `"first"`：自动选择第一个选项
+- `"last"`：自动选择最后一个选项
+- `"one"`：有且仅有一个选项时，自动选择它
+- `自定义函数`：自定义选择逻辑，函数的参数为options，返回值为选择的选项
+- `false`：不自动选择选项
 
 ### Methods
 
@@ -158,3 +169,5 @@ function fetchApi(): Promise<Record<string, any>> {
 | --- | --- | --- | --- |
 | getComponentRef | 获取被包装的组件的实例 | ()=>T | >5.5.4 |
 | updateParam | 设置接口请求参数（将与params属性合并） | (newParams: Record<string, any>)=>void | >5.5.4 |
+| getOptions | 获取已加载的选项数据 | ()=>OptionsItem[] | >5.5.4 |
+| getValue | 获取当前值 | ()=>any | >5.5.4 |
diff --git a/docs/src/components/common-ui/vben-drawer.md b/docs/src/components/common-ui/vben-drawer.md
index 16accf0e..0eedb01b 100644
--- a/docs/src/components/common-ui/vben-drawer.md
+++ b/docs/src/components/common-ui/vben-drawer.md
@@ -127,13 +127,14 @@ const [Drawer, drawerApi] = useVbenDrawer({
 
 除了上面的属性类型包含`slot`，还可以通过插槽来自定义弹窗的内容。
 
-| 插槽名         | 描述                |
-| -------------- | ------------------- |
-| default        | 默认插槽 - 弹窗内容 |
-| prepend-footer | 取消按钮左侧        |
-| append-footer  | 取消按钮右侧        |
-| close-icon     | 关闭按钮图标        |
-| extra          | 额外内容(标题右侧)  |
+| 插槽名         | 描述                                               |
+| -------------- | -------------------------------------------------- |
+| default        | 默认插槽 - 弹窗内容                                |
+| prepend-footer | 取消按钮左侧                                       |
+| center-footer  | 取消按钮和确认按钮中间（不使用 footer 插槽时有效） |
+| append-footer  | 确认按钮右侧                                       |
+| close-icon     | 关闭按钮图标                                       |
+| extra          | 额外内容(标题右侧)                                 |
 
 ### drawerApi
 
diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md
index 616d17ce..7abb3051 100644
--- a/docs/src/components/common-ui/vben-form.md
+++ b/docs/src/components/common-ui/vben-form.md
@@ -310,7 +310,7 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | actionWrapperClass | 表单操作区域class | `any` | - |
 | handleReset | 表单重置回调 | `(values: Record<string, any>,) => Promise<void> \| void` | - |
 | handleSubmit | 表单提交回调 | `(values: Record<string, any>,) => Promise<void> \| void` | - |
-| handleValuesChange | 表单值变化回调 | `(values: Record<string, any>,) => void` | - |
+| handleValuesChange | 表单值变化回调 | `(values: Record<string, any>, fieldsChanged: string[]) => void` | - |
 | actionButtonsReverse | 调换操作按钮位置 | `boolean` | `false` |
 | resetButtonOptions | 重置按钮组件参数 | `ActionButtonOptions` | - |
 | submitButtonOptions | 提交按钮组件参数 | `ActionButtonOptions` | - |
@@ -325,6 +325,12 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | submitOnChange | 字段值改变时提交表单(内部防抖，这个属性一般用于表格的搜索表单) | `boolean` | false |
 | compact | 是否紧凑模式(忽略为校验信息所预留的空间) | `boolean` | false |
 
+::: tip handleValuesChange
+
+`handleValuesChange` 回调函数的第一个参数`values`装载了表单改变后的当前值对象，第二个参数`fieldsChanged`是一个数组，包含了所有被改变的字段名。注意：第二个参数仅在v5.5.4(不含)以上版本可用，并且传递的是已在schema中定义的字段名。如果你使用了字段映射并且需要检查是哪些字段发生了变化的话，请注意该参数并不会包含映射后的字段名。
+
+:::
+
 ::: tip fieldMappingTime
 
 此属性用于将表单内的数组值映射成 2 个字段，它应当传入一个数组，数组的每一项是一个映射规则，规则的第一个成员是一个字符串，表示需要映射的字段名，第二个成员是一个数组，表示映射后的字段名，第三个成员是一个可选的格式掩码，用于格式化日期时间字段；也可以提供一个格式化函数（参数分别为当前值和当前字段名，返回格式化后的值）。如果明确地将格式掩码设为null，则原值映射而不进行格式化（适用于非日期时间字段）。例如：`[['timeRange', ['startTime', 'endTime'], 'YYYY-MM-DD']]`，`timeRange`应当是一个至少具有2个成员的数组类型的值。Form会将`timeRange`的值前两个值分别按照格式掩码`YYYY-MM-DD`格式化后映射到`startTime`和`endTime`字段上。每一项的第三个参数是一个可选的格式掩码，
diff --git a/docs/src/components/common-ui/vben-modal.md b/docs/src/components/common-ui/vben-modal.md
index 39b88cf9..56ff6d3c 100644
--- a/docs/src/components/common-ui/vben-modal.md
+++ b/docs/src/components/common-ui/vben-modal.md
@@ -60,7 +60,6 @@ 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等。
 
 :::
@@ -84,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
 | --- | --- | --- | --- |
 | appendToMain | 是否挂载到内容区域（默认挂载到body） | `boolean` | `false` |
 | connectedComponent | 连接另一个Modal组件 | `Component` | - |
-| destroyOnClose | 关闭时销毁`connectedComponent` | `boolean` | `false` |
+| destroyOnClose | 关闭时销毁 | `boolean` | `false` |
 | title | 标题 | `string\|slot` | - |
 | titleTooltip | 标题提示信息 | `string\|slot` | - |
 | description | 描述信息 | `string\|slot` | - |
@@ -138,11 +137,12 @@ const [Modal, modalApi] = useVbenModal({
 
 除了上面的属性类型包含`slot`，还可以通过插槽来自定义弹窗的内容。
 
-| 插槽名         | 描述                |
-| -------------- | ------------------- |
-| default        | 默认插槽 - 弹窗内容 |
-| prepend-footer | 取消按钮左侧        |
-| append-footer  | 取消按钮右侧        |
+| 插槽名         | 描述                                               |
+| -------------- | -------------------------------------------------- |
+| default        | 默认插槽 - 弹窗内容                                |
+| prepend-footer | 取消按钮左侧                                       |
+| center-footer  | 取消按钮和确认按钮中间（不使用 footer 插槽时有效） |
+| append-footer  | 确认按钮右侧                                       |
 
 ### modalApi
 
diff --git a/docs/src/demos/vben-alert/confirm/index.vue b/docs/src/demos/vben-alert/confirm/index.vue
index 4dba6308..723445d9 100644
--- a/docs/src/demos/vben-alert/confirm/index.vue
+++ b/docs/src/demos/vben-alert/confirm/index.vue
@@ -1,6 +1,10 @@
 <script lang="ts" setup>
+import { h, ref } from 'vue';
+
 import { alert, confirm, VbenButton } from '@vben/common-ui';
 
+import { Checkbox, message } from 'ant-design-vue';
+
 function showConfirm() {
   confirm('This is an alert message')
     .then(() => {
@@ -18,6 +22,34 @@ function showIconConfirm() {
   });
 }
 
+function showfooterConfirm() {
+  const checked = ref(false);
+  confirm({
+    cancelText: '不要虾扯蛋',
+    confirmText: '是的，我们都是NPC',
+    content:
+      '刚才发生的事情，为什么我似乎早就经历过一般？\n我甚至能在事情发生过程中潜意识里预知到接下来会发生什么。\n\n听起来挺玄乎的，你有过这种感觉吗？',
+    footer: () =>
+      h(
+        Checkbox,
+        {
+          checked: checked.value,
+          class: 'flex-1',
+          'onUpdate:checked': (v) => (checked.value = v),
+        },
+        '不再提示',
+      ),
+    icon: 'question',
+    title: '未解之谜',
+  }).then(() => {
+    if (checked.value) {
+      message.success('我不会再拿这个问题烦你了');
+    } else {
+      message.info('下次还要继续问你哟');
+    }
+  });
+}
+
 function showAsyncConfirm() {
   confirm({
     beforeClose({ isConfirm }) {
@@ -37,6 +69,7 @@ function showAsyncConfirm() {
   <div class="flex gap-4">
     <VbenButton @click="showConfirm">Confirm</VbenButton>
     <VbenButton @click="showIconConfirm">Confirm With Icon</VbenButton>
+    <VbenButton @click="showfooterConfirm">Confirm With Footer</VbenButton>
     <VbenButton @click="showAsyncConfirm">Async Confirm</VbenButton>
   </div>
 </template>
diff --git a/docs/src/demos/vben-alert/prompt/index.vue b/docs/src/demos/vben-alert/prompt/index.vue
index c9cf5c3e..a1922134 100644
--- a/docs/src/demos/vben-alert/prompt/index.vue
+++ b/docs/src/demos/vben-alert/prompt/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { h } from 'vue';
 
-import { alert, prompt, VbenButton } from '@vben/common-ui';
+import { alert, prompt, useAlertContext, VbenButton } from '@vben/common-ui';
 
-import { Input, RadioGroup } from 'ant-design-vue';
+import { Input, RadioGroup, Select } from 'ant-design-vue';
 import { BadgeJapaneseYen } from 'lucide-vue-next';
 
 function showPrompt() {
@@ -18,18 +18,32 @@ function showPrompt() {
     });
 }
 
-function showSelectPrompt() {
+function showSlotsPrompt() {
   prompt({
-    component: Input,
-    componentProps: {
-      placeholder: '请输入',
-      prefix: '充值金额',
-      type: 'number',
+    component: () => {
+      // 获取弹窗上下文。注意：只能在setup或者函数式组件中调用
+      const { doConfirm } = useAlertContext();
+      return h(
+        Input,
+        {
+          onKeydown(e: KeyboardEvent) {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              // 调用弹窗提供的确认方法
+              doConfirm();
+            }
+          },
+          placeholder: '请输入',
+          prefix: '充值金额：',
+          type: 'number',
+        },
+        {
+          addonAfter: () => h(BadgeJapaneseYen),
+        },
+      );
     },
-    componentSlots: {
-      addonAfter: () => h(BadgeJapaneseYen),
-    },
-    content: '此弹窗演示了如何使用componentSlots传递自定义插槽',
+    content:
+      '此弹窗演示了如何使用自定义插槽，并且可以使用useAlertContext获取到弹窗的上下文。\n在输入框中按下回车键会触发确认操作。',
     icon: 'question',
     modelPropName: 'value',
   }).then((val) => {
@@ -37,6 +51,29 @@ function showSelectPrompt() {
   });
 }
 
+function showSelectPrompt() {
+  prompt({
+    component: Select,
+    componentProps: {
+      options: [
+        { label: 'Option A', value: 'Option A' },
+        { label: 'Option B', value: 'Option B' },
+        { label: 'Option C', value: 'Option C' },
+      ],
+      placeholder: '请选择',
+      // 弹窗会设置body的pointer-events为none，这回影响下拉框的点击事件
+      popupClassName: 'pointer-events-auto',
+    },
+    content: '此弹窗演示了如何使用component传递自定义组件',
+    icon: 'question',
+    modelPropName: 'value',
+  }).then((val) => {
+    if (val) {
+      alert(`你选择了${val}`);
+    }
+  });
+}
+
 function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
@@ -44,7 +81,6 @@ function sleep(ms: number) {
 function showAsyncPrompt() {
   prompt({
     async beforeClose(scope) {
-      console.log(scope);
       if (scope.isConfirm) {
         if (scope.value) {
           // 模拟异步操作，如果不成功，可以返回false
@@ -75,6 +111,7 @@ function showAsyncPrompt() {
 <template>
   <div class="flex gap-4">
     <VbenButton @click="showPrompt">Prompt</VbenButton>
+    <VbenButton @click="showSlotsPrompt"> Prompt With slots </VbenButton>
     <VbenButton @click="showSelectPrompt">Prompt With Select</VbenButton>
     <VbenButton @click="showAsyncPrompt">Prompt With Async</VbenButton>
   </div>
diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
index fb90a5e4..c5a3f9c2 100644
--- a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
+++ b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -62,7 +62,7 @@ async function handleReset(e: Event) {
   e?.stopPropagation();
   const props = unref(rootProps);
 
-  const values = toRaw(props.formApi?.getValues());
+  const values = toRaw(await props.formApi?.getValues());
 
   if (isFunction(props.handleReset)) {
     await props.handleReset?.(values);
diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts
index 6a440368..0ae8ed77 100644
--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -295,6 +295,7 @@ export class FormApi {
       return true;
     });
     const filteredFields = fieldMergeFn(fields, form.values);
+    this.handleStringToArrayFields(filteredFields);
     form.setValues(filteredFields, shouldValidate);
   }
 
@@ -304,6 +305,7 @@ export class FormApi {
     const form = await this.getForm();
     await form.submitForm();
     const rawValues = toRaw(await this.getValues());
+    this.handleArrayToStringFields(rawValues);
     await this.state?.handleSubmit?.(rawValues);
 
     return rawValues;
@@ -392,10 +394,53 @@ export class FormApi {
     return this.form;
   }
 
+  private handleArrayToStringFields = (originValues: Record<string, any>) => {
+    const arrayToStringFields = this.state?.arrayToStringFields;
+    if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) {
+      return;
+    }
+
+    const processFields = (fields: string[], separator: string = ',') => {
+      this.processFields(fields, separator, originValues, (value, sep) =>
+        Array.isArray(value) ? value.join(sep) : value,
+      );
+    };
+
+    // 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2']
+    if (arrayToStringFields.every((item) => typeof item === 'string')) {
+      const lastItem =
+        arrayToStringFields[arrayToStringFields.length - 1] || '';
+      const fields =
+        lastItem.length === 1
+          ? arrayToStringFields.slice(0, -1)
+          : arrayToStringFields;
+      const separator = lastItem.length === 1 ? lastItem : ',';
+      processFields(fields, separator);
+      return;
+    }
+
+    // 处理嵌套数组格式 [['field1'], ';']
+    arrayToStringFields.forEach((fieldConfig) => {
+      if (Array.isArray(fieldConfig)) {
+        const [fields, separator = ','] = fieldConfig;
+        // 根据类型定义，fields 应该始终是字符串数组
+        if (!Array.isArray(fields)) {
+          console.warn(
+            `Invalid field configuration: fields should be an array of strings, got ${typeof fields}`,
+          );
+          return;
+        }
+        processFields(fields, separator);
+      }
+    });
+  };
+
   private handleRangeTimeValue = (originValues: Record<string, any>) => {
     const values = { ...originValues };
     const fieldMappingTime = this.state?.fieldMappingTime;
 
+    this.handleStringToArrayFields(values);
+
     if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
       return values;
     }
@@ -441,6 +486,80 @@ export class FormApi {
     return values;
   };
 
+  private handleStringToArrayFields = (originValues: Record<string, any>) => {
+    const arrayToStringFields = this.state?.arrayToStringFields;
+    if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) {
+      return;
+    }
+
+    const processFields = (fields: string[], separator: string = ',') => {
+      this.processFields(fields, separator, originValues, (value, sep) => {
+        if (typeof value !== 'string') {
+          return value;
+        }
+        // 处理空字符串的情况
+        if (value === '') {
+          return [];
+        }
+        // 处理复杂分隔符的情况
+        const escapedSeparator = sep.replaceAll(
+          /[.*+?^${}()|[\]\\]/g,
+          String.raw`\$&`,
+        );
+        return value.split(new RegExp(escapedSeparator));
+      });
+    };
+
+    // 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2']
+    if (arrayToStringFields.every((item) => typeof item === 'string')) {
+      const lastItem =
+        arrayToStringFields[arrayToStringFields.length - 1] || '';
+      const fields =
+        lastItem.length === 1
+          ? arrayToStringFields.slice(0, -1)
+          : arrayToStringFields;
+      const separator = lastItem.length === 1 ? lastItem : ',';
+      processFields(fields, separator);
+      return;
+    }
+
+    // 处理嵌套数组格式 [['field1'], ';']
+    arrayToStringFields.forEach((fieldConfig) => {
+      if (Array.isArray(fieldConfig)) {
+        const [fields, separator = ','] = fieldConfig;
+        if (Array.isArray(fields)) {
+          processFields(fields, separator);
+        } else if (typeof originValues[fields] === 'string') {
+          const value = originValues[fields];
+          if (value === '') {
+            originValues[fields] = [];
+          } else {
+            const escapedSeparator = separator.replaceAll(
+              /[.*+?^${}()|[\]\\]/g,
+              String.raw`\$&`,
+            );
+            originValues[fields] = value.split(new RegExp(escapedSeparator));
+          }
+        }
+      }
+    });
+  };
+
+  private processFields = (
+    fields: string[],
+    separator: string,
+    originValues: Record<string, any>,
+    transformFn: (value: any, separator: string) => any,
+  ) => {
+    fields.forEach((field) => {
+      const value = originValues[field];
+      if (value === undefined || value === null) {
+        return;
+      }
+      originValues[field] = transformFn(value, separator);
+    });
+  };
+
   private updateState() {
     const currentSchema = this.state?.schema ?? [];
     const prevSchema = this.prevState?.schema ?? [];
diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts
index 82d31af0..34312ae7 100644
--- a/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -232,6 +232,12 @@ export type FieldMappingTime = [
   )?,
 ][];
 
+export type ArrayToStringFields = Array<
+  | [string[], string?] // 嵌套数组格式，可选分隔符
+  | string // 单个字段，使用默认分隔符
+  | string[] // 简单数组格式，最后一个元素可以是分隔符
+>;
+
 export interface FormSchema<
   T extends BaseFormComponentType = BaseFormComponentType,
 > extends FormCommonConfig {
@@ -266,6 +272,10 @@ export interface FormFieldProps extends FormSchema {
 export interface FormRenderProps<
   T extends BaseFormComponentType = BaseFormComponentType,
 > {
+  /**
+   * 表单字段数组映射字符串配置 默认使用","
+   */
+  arrayToStringFields?: ArrayToStringFields;
   /**
    * 是否展开，在showCollapseButton=true下生效
    */
@@ -296,6 +306,10 @@ export interface FormRenderProps<
    * 组件集合
    */
   componentMap: Record<BaseFormComponentType, Component>;
+  /**
+   * 表单字段映射到时间格式
+   */
+  fieldMappingTime?: FieldMappingTime;
   /**
    * 表单实例
    */
@@ -308,10 +322,15 @@ export interface FormRenderProps<
    * 表单定义
    */
   schema?: FormSchema<T>[];
+
   /**
    * 是否显示展开/折叠
    */
   showCollapseButton?: boolean;
+  /**
+   * 格式化日期
+   */
+
   /**
    * 表单栅格布局
    * @default "grid-cols-1"
@@ -339,6 +358,11 @@ export interface VbenFormProps<
    * 表单操作区域class
    */
   actionWrapperClass?: ClassType;
+  /**
+   * 表单字段数组映射字符串配置 默认使用","
+   */
+  arrayToStringFields?: ArrayToStringFields;
+
   /**
    * 表单字段映射
    */
@@ -354,11 +378,15 @@ export interface VbenFormProps<
   /**
    * 表单值变化回调
    */
-  handleValuesChange?: (values: Record<string, any>) => void;
+  handleValuesChange?: (
+    values: Record<string, any>,
+    fieldsChanged: string[],
+  ) => void;
   /**
    * 重置按钮参数
    */
   resetButtonOptions?: ActionButtonOptions;
+
   /**
    * 是否显示默认操作按钮
    * @default true
diff --git a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
index f22053cd..3e7b00b6 100644
--- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
+++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben-core/typings';
+
 import type { ExtendedFormApi, VbenFormProps } from './types';
 
 // import { toRaw, watch } from 'vue';
 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 { cloneDeep, get, isEqual, set } from '@vben-core/shared/utils';
 
 import { useDebounceFn } from '@vueuse/core';
 
@@ -61,16 +62,46 @@ function handleKeyDownEnter(event: KeyboardEvent) {
 }
 
 const handleValuesChangeDebounced = useDebounceFn(async () => {
-  forward.value.handleValuesChange?.(
-    cloneDeep(await forward.value.formApi.getValues()),
-  );
   state.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm();
 }, 300);
 
+const valuesCache: Recordable<any> = {};
+
 onMounted(async () => {
   // 只在挂载后开始监听，form.values会有一个初始化的过程
   await nextTick();
-  watch(() => form.values, handleValuesChangeDebounced, { deep: true });
+  watch(
+    () => form.values,
+    async (newVal) => {
+      if (forward.value.handleValuesChange) {
+        const fields = state.value.schema?.map((item) => {
+          return item.fieldName;
+        });
+
+        if (fields && fields.length > 0) {
+          const changedFields: string[] = [];
+          fields.forEach((field) => {
+            const newFieldValue = get(newVal, field);
+            const oldFieldValue = get(valuesCache, field);
+            if (!isEqual(newFieldValue, oldFieldValue)) {
+              changedFields.push(field);
+              set(valuesCache, field, newFieldValue);
+            }
+          });
+
+          if (changedFields.length > 0) {
+            // 调用handleValuesChange回调，传入所有表单值的深拷贝和变更的字段列表
+            forward.value.handleValuesChange(
+              cloneDeep(await forward.value.formApi.getValues()),
+              changedFields,
+            );
+          }
+        }
+      }
+      handleValuesChangeDebounced();
+    },
+    { deep: true },
+  );
 });
 </script>
 
diff --git a/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue b/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
index 17bc1215..7a82e724 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
@@ -208,6 +208,8 @@ onBeforeUnmount(() => {
           nsMenu.e('popup-container'),
           is(rootMenu.theme, true),
           opened ? '' : 'hidden',
+          'overflow-auto',
+          'max-h-[calc(var(--radix-hover-card-content-available-height)-20px)]',
         ]"
         :content-props="contentProps"
         :open="true"
diff --git a/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts b/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts
index 20e4254c..521a9647 100644
--- a/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts
+++ b/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts
@@ -7,7 +7,7 @@ import type { AlertProps, BeforeCloseScope, PromptProps } from './alert';
 import { h, nextTick, ref, render } from 'vue';
 
 import { useSimpleLocale } from '@vben-core/composables';
-import { Input } from '@vben-core/shadcn-ui';
+import { Input, VbenRenderContent } from '@vben-core/shadcn-ui';
 import { isFunction, isString } from '@vben-core/shared/utils';
 
 import Alert from './alert.vue';
@@ -146,11 +146,7 @@ export async function vbenPrompt<T = any>(
   const inputComponentRef = ref<null | VNode>(null);
   const staticContents: Component[] = [];
 
-  if (isString(content)) {
-    staticContents.push(h('span', content));
-  } else if (content) {
-    staticContents.push(content as Component);
-  }
+  staticContents.push(h(VbenRenderContent, { content, renderBr: true }));
 
   const modelPropName = _modelPropName || 'modelValue';
   const componentProps = { ..._componentProps };
diff --git a/packages/@core/ui-kit/popup-ui/src/alert/alert.ts b/packages/@core/ui-kit/popup-ui/src/alert/alert.ts
index 49d65ed5..5a214fa2 100644
--- a/packages/@core/ui-kit/popup-ui/src/alert/alert.ts
+++ b/packages/@core/ui-kit/popup-ui/src/alert/alert.ts
@@ -2,6 +2,8 @@ import type { Component, VNode, VNodeArrayChildren } from 'vue';
 
 import type { Recordable } from '@vben-core/typings';
 
+import { createContext } from '@vben-core/shadcn-ui';
+
 export type IconType = 'error' | 'info' | 'question' | 'success' | 'warning';
 
 export type BeforeCloseScope = {
@@ -34,8 +36,14 @@ export type AlertProps = {
   contentClass?: string;
   /** 执行beforeClose回调期间，在内容区域显示一个loading遮罩*/
   contentMasking?: boolean;
+  /** 弹窗底部内容（与按钮在同一个容器中） */
+  footer?: Component | string;
   /** 弹窗的图标（在标题的前面） */
   icon?: Component | IconType;
+  /**
+   * 弹窗遮罩模糊效果
+   */
+  overlayBlur?: number;
   /** 是否显示取消按钮 */
   showCancel?: boolean;
   /** 弹窗标题 */
@@ -64,3 +72,28 @@ export type PromptProps<T = any> = {
   /** 输入组件的值属性名 */
   modelPropName?: string;
 } & Omit<AlertProps, 'beforeClose'>;
+
+/**
+ * Alert上下文
+ */
+export type AlertContext = {
+  /** 执行取消操作 */
+  doCancel: () => void;
+  /** 执行确认操作 */
+  doConfirm: () => void;
+};
+
+export const [injectAlertContext, provideAlertContext] =
+  createContext<AlertContext>('VbenAlertContext');
+
+/**
+ * 获取Alert上下文
+ * @returns AlertContext
+ */
+export function useAlertContext() {
+  const context = injectAlertContext();
+  if (!context) {
+    throw new Error('useAlertContext must be used within an AlertProvider');
+  }
+  return context;
+}
diff --git a/packages/@core/ui-kit/popup-ui/src/alert/alert.vue b/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
index 5c02ed2a..a5b4d0da 100644
--- a/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
+++ b/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
@@ -3,7 +3,7 @@ import type { Component } from 'vue';
 
 import type { AlertProps } from './alert';
 
-import { computed, h, nextTick, ref, watch } from 'vue';
+import { computed, h, nextTick, ref } from 'vue';
 
 import { useSimpleLocale } from '@vben-core/composables';
 import {
@@ -28,6 +28,8 @@ import {
 import { globalShareState } from '@vben-core/shared/global-state';
 import { cn } from '@vben-core/shared/utils';
 
+import { provideAlertContext } from './alert';
+
 const props = withDefaults(defineProps<AlertProps>(), {
   bordered: true,
   buttonAlign: 'end',
@@ -39,14 +41,12 @@ const open = defineModel<boolean>('open', { default: false });
 const { $t } = useSimpleLocale();
 const components = globalShareState.getComponents();
 const isConfirm = ref(false);
-watch(open, async (val) => {
-  await nextTick();
-  if (val) {
-    isConfirm.value = false;
-  } else {
-    emits('closed', isConfirm.value);
-  }
-});
+
+function onAlertClosed() {
+  emits('closed', isConfirm.value);
+  isConfirm.value = false;
+}
+
 const getIconRender = computed(() => {
   let iconRender: Component | null = null;
   if (props.icon) {
@@ -89,6 +89,23 @@ const getIconRender = computed(() => {
   }
   return iconRender;
 });
+
+function doCancel() {
+  isConfirm.value = false;
+  handleOpenChange(false);
+}
+
+function doConfirm() {
+  isConfirm.value = true;
+  handleOpenChange(false);
+  emits('confirm');
+}
+
+provideAlertContext({
+  doCancel,
+  doConfirm,
+});
+
 function handleConfirm() {
   isConfirm.value = true;
   emits('confirm');
@@ -100,6 +117,7 @@ function handleCancel() {
 
 const loading = ref(false);
 async function handleOpenChange(val: boolean) {
+  await nextTick();
   if (!val && props.beforeClose) {
     loading.value = true;
     try {
@@ -120,15 +138,16 @@ async function handleOpenChange(val: boolean) {
     <AlertDialogContent
       :open="open"
       :centered="centered"
+      :overlay-blur="overlayBlur"
       @opened="emits('opened')"
+      @closed="onAlertClosed"
       :class="
         cn(
           containerClass,
-          'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:rounded-[var(--radius)] md:w-[520px] md:max-w-[80%]',
+          'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:rounded-[var(--radius)] md:w-[520px] md:max-w-[80%]',
           {
             'border-border border': bordered,
             'shadow-3xl': !bordered,
-            'top-1/2 !-translate-y-1/2': centered,
           },
         )
       "
@@ -152,12 +171,16 @@ async function handleOpenChange(val: boolean) {
           </div>
         </AlertDialogTitle>
         <AlertDialogDescription>
-          <div class="m-4 mb-6 min-h-[30px]">
+          <div class="m-4 min-h-[30px]">
             <VbenRenderContent :content="content" render-br />
           </div>
           <VbenLoading v-if="loading && contentMasking" :spinning="loading" />
         </AlertDialogDescription>
-        <div class="flex justify-end gap-x-2" :class="`justify-${buttonAlign}`">
+        <div
+          class="flex items-center justify-end gap-x-2"
+          :class="`justify-${buttonAlign}`"
+        >
+          <VbenRenderContent :content="footer" />
           <AlertDialogCancel v-if="showCancel" as-child>
             <component
               :is="components.DefaultButton || VbenButton"
diff --git a/packages/@core/ui-kit/popup-ui/src/alert/index.ts b/packages/@core/ui-kit/popup-ui/src/alert/index.ts
index af8f424f..8419b5b8 100644
--- a/packages/@core/ui-kit/popup-ui/src/alert/index.ts
+++ b/packages/@core/ui-kit/popup-ui/src/alert/index.ts
@@ -1,5 +1,10 @@
-export * from './alert';
-
+export type {
+  AlertProps,
+  BeforeCloseScope,
+  IconType,
+  PromptProps,
+} from './alert';
+export { useAlertContext } from './alert';
 export { default as Alert } from './alert.vue';
 export {
   vbenAlert as alert,
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts b/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
index 399ddc1b..365a2e4a 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
+++ b/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;
-      }
     },
   };
 });
@@ -54,7 +54,6 @@ describe('drawerApi', () => {
   });
 
   it('should close the drawer if onBeforeClose allows it', () => {
-    drawerApi.open();
     drawerApi.close();
     expect(drawerApi.store.state.isOpen).toBe(false);
   });
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
index d2e7d690..a19a1717 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
@@ -86,7 +86,8 @@ export class DrawerApi {
   }
 
   /**
-   * 关闭弹窗
+   * 关闭抽屉
+   * @description 关闭抽屉时会调用 onBeforeClose 钩子函数，如果 onBeforeClose 返回 false，则不关闭弹窗
    */
   async close() {
     // 通过 onBeforeClose 钩子函数来判断是否允许关闭弹窗
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
index 410c3ffe..b5535ba4 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -274,7 +274,7 @@ const getAppendTo = computed(() => {
               {{ cancelText || $t('cancel') }}
             </slot>
           </component>
-
+          <slot name="center-footer"></slot>
           <component
             :is="components.PrimaryButton || VbenButton"
             v-if="showConfirmButton"
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
index b7c44a94..d04d4875 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
@@ -44,6 +44,7 @@ export class ModalApi {
       confirmDisabled: false,
       confirmLoading: false,
       contentClass: '',
+      destroyOnClose: true,
       draggable: false,
       footer: true,
       footerClass: '',
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
index 9f86ab8c..2dbab9e4 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
@@ -60,6 +60,10 @@ export interface ModalProps {
    * 弹窗描述
    */
   description?: string;
+  /**
+   * 在关闭时销毁弹窗
+   */
+  destroyOnClose?: boolean;
   /**
    * 是否可拖拽
    * @default false
@@ -153,10 +157,6 @@ export interface ModalApiOptions extends ModalState {
    * 独立的弹窗组件
    */
   connectedComponent?: Component;
-  /**
-   * 在关闭时销毁弹窗。仅在使用 connectedComponent 时有效
-   */
-  destroyOnClose?: boolean;
   /**
    * 关闭前的回调，返回 false 可以阻止关闭
    * @returns
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
index 6fe3d621..1e61d8db 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ExtendedModalApi, ModalProps } from './modal';
 
-import { computed, nextTick, provide, ref, useId, watch } from 'vue';
+import { computed, nextTick, provide, ref, unref, useId, watch } from 'vue';
 
 import {
   useIsMobile,
@@ -34,6 +34,7 @@ interface Props extends ModalProps {
 
 const props = withDefaults(defineProps<Props>(), {
   appendToMain: false,
+  destroyOnClose: true,
   modalApi: undefined,
 });
 
@@ -67,6 +68,7 @@ const {
   confirmText,
   contentClass,
   description,
+  destroyOnClose,
   draggable,
   footer: showFooter,
   footerClass,
@@ -100,10 +102,15 @@ const { dragging, transform } = useModalDraggable(
   shouldDraggable,
 );
 
+const firstOpened = ref(false);
+const isClosed = ref(true);
+
 watch(
   () => state?.value?.isOpen,
   async (v) => {
     if (v) {
+      isClosed.value = false;
+      if (!firstOpened.value) firstOpened.value = true;
       await nextTick();
       if (!contentRef.value) return;
       const innerContentRef = contentRef.value.getContentRef();
@@ -113,6 +120,7 @@ watch(
       dialogRef.value.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
     }
   },
+  { immediate: true },
 );
 
 watch(
@@ -176,6 +184,15 @@ const getAppendTo = computed(() => {
     ? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
     : undefined;
 });
+
+const getForceMount = computed(() => {
+  return !unref(destroyOnClose) && unref(firstOpened);
+});
+
+function handleClosed() {
+  isClosed.value = true;
+  props.modalApi?.onClosed();
+}
 </script>
 <template>
   <Dialog
@@ -197,9 +214,11 @@ const getAppendTo = computed(() => {
               shouldFullscreen,
             'top-1/2 !-translate-y-1/2': centered && !shouldFullscreen,
             'duration-300': !dragging,
+            hidden: isClosed,
           },
         )
       "
+      :force-mount="getForceMount"
       :modal="modal"
       :open="state?.isOpen"
       :show-close="closable"
@@ -207,7 +226,7 @@ const getAppendTo = computed(() => {
       :overlay-blur="overlayBlur"
       close-class="top-3"
       @close-auto-focus="handleFocusOutside"
-      @closed="() => modalApi?.onClosed()"
+      @closed="handleClosed"
       :close-disabled="submitting"
       @escape-key-down="escapeKeyDown"
       @focus-outside="handleFocusOutside"
@@ -302,7 +321,7 @@ const getAppendTo = computed(() => {
               {{ cancelText || $t('cancel') }}
             </slot>
           </component>
-
+          <slot name="center-footer"></slot>
           <component
             :is="components.PrimaryButton || VbenButton"
             v-if="showConfirmButton"
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
index 6cc0a30d..2f40ddea 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -1,14 +1,6 @@
 import type { ExtendedModalApi, ModalApiOptions, ModalProps } from './modal';
 
-import {
-  defineComponent,
-  h,
-  inject,
-  nextTick,
-  provide,
-  reactive,
-  ref,
-} from 'vue';
+import { defineComponent, h, inject, nextTick, provide, reactive } from 'vue';
 
 import { useStore } from '@vben-core/shared/store';
 
@@ -32,7 +24,6 @@ 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, {
@@ -42,11 +33,6 @@ 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,
@@ -55,7 +41,7 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
         });
         return () =>
           h(
-            isModalReady.value ? connectedComponent : 'div',
+            connectedComponent,
             {
               ...props,
               ...attrs,
@@ -84,14 +70,6 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
     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/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue b/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
index 4c008ea8..1816051c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
@@ -31,12 +31,11 @@ export default defineComponent({
         if (props.renderBr && isString(props.content)) {
           const lines = props.content.split('\n');
           const result = [];
-          for (let i = 0; i < lines.length; i++) {
-            const line = lines[i];
-            result.push(h('span', { key: i }, line));
-            if (i < lines.length - 1) {
-              result.push(h('br'));
-            }
+          for (const [i, line] of lines.entries()) {
+            result.push(h('p', { key: i }, line));
+            // if (i < lines.length - 1) {
+            //   result.push(h('br'));
+            // }
           }
           return result;
         } else {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
index f066b91a..e101ba59 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
@@ -39,6 +39,14 @@ const isAtRight = ref(false);
 const isAtBottom = ref(false);
 const isAtLeft = ref(true);
 
+/**
+ * We have to check if the scroll amount is close enough to some threshold in order to
+ * more accurately calculate arrivedState. This is because scrollTop/scrollLeft are non-rounded
+ * numbers, while scrollHeight/scrollWidth and clientHeight/clientWidth are rounded.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
+ */
+const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
+
 const showShadowTop = computed(() => props.shadow && props.shadowTop);
 const showShadowBottom = computed(() => props.shadow && props.shadowBottom);
 const showShadowLeft = computed(() => props.shadow && props.shadowLeft);
@@ -60,14 +68,18 @@ function handleScroll(event: Event) {
   const target = event.target as HTMLElement;
   const scrollTop = target?.scrollTop ?? 0;
   const scrollLeft = target?.scrollLeft ?? 0;
-  const offsetHeight = target?.offsetHeight ?? 0;
-  const offsetWidth = target?.offsetWidth ?? 0;
+  const clientHeight = target?.clientHeight ?? 0;
+  const clientWidth = target?.clientWidth ?? 0;
   const scrollHeight = target?.scrollHeight ?? 0;
   const scrollWidth = target?.scrollWidth ?? 0;
   isAtTop.value = scrollTop <= 0;
   isAtLeft.value = scrollLeft <= 0;
-  isAtBottom.value = scrollTop + offsetHeight >= scrollHeight;
-  isAtRight.value = scrollLeft + offsetWidth >= scrollWidth;
+  isAtBottom.value =
+    Math.abs(scrollTop) + clientHeight >=
+    scrollHeight - ARRIVED_STATE_THRESHOLD_PIXELS;
+  isAtRight.value =
+    Math.abs(scrollLeft) + clientWidth >=
+    scrollWidth - ARRIVED_STATE_THRESHOLD_PIXELS;
 
   emit('scrollAt', {
     bottom: isAtBottom.value,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
index b14dc0ec..c3d5c143 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
@@ -61,7 +61,7 @@ defineExpose({
 
 <template>
   <AlertDialogPortal>
-    <Transition name="fade">
+    <Transition name="fade" appear>
       <AlertDialogOverlay
         v-if="open && modal"
         :style="{
@@ -80,7 +80,17 @@ defineExpose({
       v-bind="forwarded"
       :class="
         cn(
-          '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',
+          'z-popup bg-background w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          {
+            'data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:slide-out-to-top-[48%]':
+              !centered,
+            'data-[state=open]:slide-in-from-top-[98%] data-[state=closed]:slide-out-to-top-[148%]':
+              centered,
+            'top-[10vh]': !centered,
+            'top-1/2 -translate-y-1/2': centered,
+          },
           props.class,
         )
       "
diff --git a/packages/effects/common-ui/src/components/api-component/api-component.vue b/packages/effects/common-ui/src/components/api-component/api-component.vue
index f4f6acd5..a3e72b44 100644
--- a/packages/effects/common-ui/src/components/api-component/api-component.vue
+++ b/packages/effects/common-ui/src/components/api-component/api-component.vue
@@ -54,6 +54,20 @@ interface Props {
   visibleEvent?: string;
   /** 组件的v-model属性名，默认为modelValue。部分组件可能为value */
   modelPropName?: string;
+  /**
+   * 自动选择
+   * - `first`：自动选择第一个选项
+   * - `last`：自动选择最后一个选项
+   * - `one`: 当请求的结果只有一个选项时，自动选择该选项
+   * - 函数：自定义选择逻辑，函数的参数为请求的结果数组，返回值为选择的选项
+   * - false：不自动选择(默认)
+   */
+  autoSelect?:
+    | 'first'
+    | 'last'
+    | 'one'
+    | ((item: OptionsItem[]) => OptionsItem)
+    | false;
 }
 
 defineOptions({ name: 'ApiComponent', inheritAttrs: false });
@@ -74,6 +88,7 @@ const props = withDefaults(defineProps<Props>(), {
   afterFetch: undefined,
   modelPropName: 'modelValue',
   api: undefined,
+  autoSelect: false,
   options: () => [],
 });
 
@@ -81,7 +96,7 @@ const emit = defineEmits<{
   optionsChange: [OptionsItem[]];
 }>();
 
-const modelValue = defineModel({ default: '' });
+const modelValue = defineModel<any>({ default: undefined });
 
 const attrs = useAttrs();
 const innerParams = ref({});
@@ -194,10 +209,43 @@ watch(
 );
 
 function emitChange() {
+  if (
+    modelValue.value === undefined &&
+    props.autoSelect &&
+    unref(getOptions).length > 0
+  ) {
+    let firstOption;
+    if (isFunction(props.autoSelect)) {
+      firstOption = props.autoSelect(unref(getOptions));
+    } else {
+      switch (props.autoSelect) {
+        case 'first': {
+          firstOption = unref(getOptions)[0];
+          break;
+        }
+        case 'last': {
+          firstOption = unref(getOptions)[unref(getOptions).length - 1];
+          break;
+        }
+        case 'one': {
+          if (unref(getOptions).length === 1) {
+            firstOption = unref(getOptions)[0];
+          }
+          break;
+        }
+      }
+    }
+
+    if (firstOption) modelValue.value = firstOption.value;
+  }
   emit('optionsChange', unref(getOptions));
 }
 const componentRef = ref();
 defineExpose({
+  /** 获取options数据 */
+  getOptions: () => unref(getOptions),
+  /** 获取当前值 */
+  getValue: () => unref(modelValue),
   /** 获取被包装的组件实例 */
   getComponentRef: <T = any,>() => componentRef.value as T,
   /** 更新Api参数 */
diff --git a/packages/icons/src/iconify-offline/menu-icons.ts b/packages/icons/src/iconify-offline/menu-icons.ts
index 4f935e00..64273b50 100644
--- a/packages/icons/src/iconify-offline/menu-icons.ts
+++ b/packages/icons/src/iconify-offline/menu-icons.ts
@@ -2,6 +2,8 @@ import { addIcon } from '@vben-core/icons';
 
 import schedule from '@iconify/icons-akar-icons/schedule';
 import settingOutline from '@iconify/icons-ant-design/setting-outlined';
+import antdTool from '@iconify/icons-ant-design/tool-outlined';
+import UserAntd from '@iconify/icons-ant-design/user-outlined';
 import Operation from '@iconify/icons-arcticons/one-hand-operation';
 import BaseLineHousesFill from '@iconify/icons-bi/houses-fill';
 import BxPackage from '@iconify/icons-bx/package';
@@ -39,11 +41,15 @@ import workflowOutline from '@iconify/icons-mdi/workflow-outline';
 import DepartmentLine from '@iconify/icons-mingcute/department-line';
 import profileLine from '@iconify/icons-mingcute/profile-line';
 import UserDuotone from '@iconify/icons-ph/user-duotone';
+import userList from '@iconify/icons-ph/user-list';
+import users from '@iconify/icons-ph/users-light';
 import insatnceLine from '@iconify/icons-ri/instance-line';
 import todoLine from '@iconify/icons-ri/todo-line';
 import Authy from '@iconify/icons-simple-icons/authy';
 import FolderWithFilesOutline from '@iconify/icons-solar/folder-with-files-outline';
 import monitorBoldDuotone from '@iconify/icons-solar/monitor-bold-duotone';
+import monitorCameraOutlined from '@iconify/icons-solar/monitor-camera-outline';
+import monitorPhoneOutlined from '@iconify/icons-solar/monitor-smartphone-outline';
 import InterfaceLoginDialPadFingerPasswordDialPadDotFinger from '@iconify/icons-streamline/interface-login-dial-pad-finger-password-dial-pad-dot-finger';
 import categoryPlus from '@iconify/icons-tabler/category-plus';
 import code from '@iconify/icons-tabler/code';
@@ -53,6 +59,7 @@ import code from '@iconify/icons-tabler/code';
  */
 addIcon('eos-icons:system-group', SystemGroup);
 addIcon('ph:user-duotone', UserDuotone);
+addIcon('ant-design:user-outlined', UserAntd);
 addIcon('eos-icons:role-binding-outlined', RoleBindingOutlined);
 addIcon('ic:sharp-menu', MenuSharp);
 addIcon('mingcute:department-line', DepartmentLine);
@@ -68,15 +75,20 @@ addIcon(
 );
 addIcon('solar:folder-with-files-outline', FolderWithFilesOutline);
 addIcon('simple-icons:authy', Authy);
+addIcon('solar:monitor-smartphone-outline', monitorPhoneOutlined);
 addIcon('ic:baseline-house', BaseLineHouse);
+addIcon('ph:users-light', users);
 addIcon('bi:houses-fill', BaseLineHousesFill);
+addIcon('ph:user-list', userList);
 addIcon('bx:package', BxPackage);
 addIcon('solar:monitor-bold-duotone', monitorBoldDuotone);
+addIcon('solar:monitor-camera-outline', monitorCameraOutlined);
 addIcon('material-symbols:generating-tokens-outline', generatingTokensOutline);
 addIcon('devicon:redis-wordmark', redisWordmark);
 addIcon('devicon:spring-wordmark', springWordmark);
 addIcon('akar-icons:schedule', schedule);
 addIcon('mdi:tools', tools);
+addIcon('ant-design:tool-outlined', antdTool);
 addIcon('tabler:code', code);
 addIcon('flat-color-icons:plus', plus);
 addIcon('devicon:vscode', vscode);
diff --git a/packages/icons/src/svg/icons/snail-job.svg b/packages/icons/src/svg/icons/snail-job.svg
new file mode 100644
index 00000000..77829373
--- /dev/null
+++ b/packages/icons/src/svg/icons/snail-job.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="715.000000pt" height="697.000000pt" viewBox="0 0 715.000000 697.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,697.000000) scale(0.100000,-0.100000)"
+fill="#1366ff" stroke="none">
+<path d="M3430 6914 c-243 -21 -310 -28 -410 -45 -1406 -237 -2524 -1268
+-2869 -2644 -76 -305 -104 -534 -104 -850 -1 -331 27 -558 104 -867 99 -394
+260 -760 479 -1091 139 -209 251 -347 425 -526 298 -305 620 -538 992 -718 83
+-40 157 -73 164 -73 6 0 54 -13 105 -30 447 -143 922 -37 1384 309 41 31 129
+108 194 171 101 97 124 126 152 185 156 339 146 690 -32 1109 -86 201 -259
+461 -433 650 -30 34 -107 96 -171 140 -245 167 -437 321 -543 434 -63 68 -161
+219 -187 289 -28 75 -36 175 -20 244 18 78 72 187 120 242 41 46 42 48 35 100
+-16 117 -178 620 -206 638 -6 3 -33 9 -60 12 -105 13 -183 69 -227 166 -21 45
+-24 64 -20 121 11 155 135 260 292 248 183 -15 301 -192 237 -358 -12 -30 -21
+-65 -21 -77 0 -31 82 -185 142 -266 139 -188 300 -276 484 -264 106 6 133 20
+164 82 23 45 25 62 25 170 0 77 -7 150 -19 205 -25 116 -113 384 -137 414 -11
+13 -41 32 -68 41 -147 49 -233 167 -233 321 0 131 72 243 195 300 78 36 190
+34 272 -5 35 -16 78 -48 103 -75 103 -112 118 -244 45 -394 -33 -67 -30 -81
+51 -246 182 -368 522 -768 1011 -1187 392 -337 649 -654 849 -1051 156 -310
+241 -579 302 -963 10 -61 18 -197 21 -346 6 -260 -3 -395 -38 -593 -11 -60
+-18 -110 -16 -112 8 -8 317 317 401 421 189 235 386 566 504 845 130 308 227
+689 264 1040 18 173 15 547 -6 720 -132 1110 -735 2061 -1673 2640 -133 82
+-374 205 -522 265 -297 121 -671 213 -991 245 -114 11 -438 20 -510 14z"/>
+</g>
+</svg>
diff --git a/packages/icons/src/svg/index.ts b/packages/icons/src/svg/index.ts
index d5f7241b..3fda024f 100644
--- a/packages/icons/src/svg/index.ts
+++ b/packages/icons/src/svg/index.ts
@@ -15,6 +15,7 @@ const SvgMaxKeyIcon = createIconifyIcon('svg:max-key');
 const SvgTopiamIcon = createIconifyIcon('svg:topiam');
 const SvgWechatIcon = createIconifyIcon('svg:wechat');
 const SvgQQIcon = createIconifyIcon('svg:qq');
+const SvgSnailJobIcon = createIconifyIcon('svg:snail-job');
 
 export {
   SvgAntdvLogoIcon,
@@ -28,6 +29,7 @@ export {
   SvgDownloadIcon,
   SvgMaxKeyIcon,
   SvgQQIcon,
+  SvgSnailJobIcon,
   SvgTopiamIcon,
   SvgWechatIcon,
 };
diff --git a/playground/src/adapter/vxe-table.ts b/playground/src/adapter/vxe-table.ts
index cb24b561..9c0cd73b 100644
--- a/playground/src/adapter/vxe-table.ts
+++ b/playground/src/adapter/vxe-table.ts
@@ -212,7 +212,12 @@ setupVbenVxeTable({
             Popconfirm,
             {
               getPopupContainer(el) {
-                return el.closest('tbody') || document.body;
+                return (
+                  el
+                    .closest('.vxe-table--viewport-wrapper')
+                    ?.querySelector('.vxe-table--main-wrapper')
+                    ?.querySelector('tbody') || document.body
+                );
               },
               placement: 'topLeft',
               title: $t('ui.actionTitle.delete', [attrs?.nameTitle || '']),
diff --git a/playground/src/views/examples/drawer/base-demo.vue b/playground/src/views/examples/drawer/base-demo.vue
index 87ded0a2..08bc68fc 100644
--- a/playground/src/views/examples/drawer/base-demo.vue
+++ b/playground/src/views/examples/drawer/base-demo.vue
@@ -30,5 +30,6 @@ function lockDrawer() {
     <Button type="primary" @click="lockDrawer">锁定抽屉状态</Button>
     <!-- <template #prepend-footer> slot </template> -->
     <!-- <template #append-footer> prepend slot </template> -->
+    <!-- <template #center-footer> center slot </template> -->
   </Drawer>
 </template>
diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue
index 5d734d43..b98ace26 100644
--- a/playground/src/views/examples/form/basic.vue
+++ b/playground/src/views/examples/form/basic.vue
@@ -42,6 +42,9 @@ const [BaseForm, baseFormApi] = useVbenForm({
   fieldMappingTime: [['rangePicker', ['startTime', 'endTime'], 'YYYY-MM-DD']],
   // 提交函数
   handleSubmit: onSubmit,
+  handleValuesChange(_values, fieldsChanged) {
+    message.info(`表单以下字段发生变化：${fieldsChanged.join('，')}`);
+  },
 
   // 垂直布局，label和input在不同行，值为vertical
   // 水平布局，label和input在同一行
@@ -74,6 +77,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
         },
         // 菜单接口
         api: getAllMenusApi,
+        autoSelect: 'first',
       },
       // 字段名
       fieldName: 'api',
diff --git a/playground/src/views/examples/modal/auto-height-demo.vue b/playground/src/views/examples/modal/auto-height-demo.vue
index 28939a62..5e8f7ad0 100644
--- a/playground/src/views/examples/modal/auto-height-demo.vue
+++ b/playground/src/views/examples/modal/auto-height-demo.vue
@@ -16,15 +16,18 @@ const [Modal, modalApi] = useVbenModal({
   },
   onOpenChange(isOpen) {
     if (isOpen) {
-      handleUpdate(10);
+      handleUpdate();
     }
   },
 });
 
-function handleUpdate(len: number) {
+function handleUpdate(len?: number) {
   modalApi.setState({ confirmDisabled: true, loading: true });
   setTimeout(() => {
-    list.value = Array.from({ length: len }, (_v, k) => k + 1);
+    list.value = Array.from(
+      { length: len ?? Math.floor(Math.random() * 10) + 1 },
+      (_v, k) => k + 1,
+    );
     modalApi.setState({ confirmDisabled: false, loading: false });
   }, 2000);
 }
@@ -40,7 +43,7 @@ function handleUpdate(len: number) {
       {{ item }}
     </div>
     <template #prepend-footer>
-      <Button type="link" @click="handleUpdate(6)">点击更新数据</Button>
+      <Button type="link" @click="handleUpdate()">点击更新数据</Button>
     </template>
   </Modal>
 </template>
diff --git a/playground/src/views/examples/modal/in-content-demo.vue b/playground/src/views/examples/modal/in-content-demo.vue
index b51d363f..7ffe7b77 100644
--- a/playground/src/views/examples/modal/in-content-demo.vue
+++ b/playground/src/views/examples/modal/in-content-demo.vue
@@ -24,7 +24,7 @@ const value = ref();
     title="基础弹窗示例"
     title-tooltip="标题提示内容"
   >
-    此弹窗指定在内容区域打开
-    <Input v-model="value" placeholder="KeepAlive测试" />
+    此弹窗指定在内容区域打开，并且在关闭之后弹窗内容不会被销毁
+    <Input v-model:value="value" placeholder="KeepAlive测试" />
   </Modal>
 </template>
diff --git a/playground/src/views/examples/modal/index.vue b/playground/src/views/examples/modal/index.vue
index 2137227b..3ed6cdea 100644
--- a/playground/src/views/examples/modal/index.vue
+++ b/playground/src/views/examples/modal/index.vue
@@ -138,6 +138,7 @@ function openConfirm() {
         }, 1000);
       });
     },
+    centered: false,
     content: '这是一个确认弹窗',
     icon: 'question',
   })
@@ -160,6 +161,7 @@ async function openPrompt() {
     componentProps: { placeholder: '不能吃芝士...' },
     content: '中午吃了什么？',
     icon: 'question',
+    overlayBlur: 3,
   })
     .then((res) => {
       message.success(`用户输入了：${res}`);
@@ -196,7 +198,7 @@ async function openPrompt() {
         </template>
       </Card>
 
-      <Card class="w-[300px]" title="指定容器">
+      <Card class="w-[300px]" title="指定容器+关闭后不销毁">
         <p>在内容区域打开弹窗的示例</p>
         <template #actions>
           <Button type="primary" @click="openInContentModal">打开弹窗</Button>
diff --git a/playground/src/views/system/dept/data.ts b/playground/src/views/system/dept/data.ts
index 48773625..64ec56be 100644
--- a/playground/src/views/system/dept/data.ts
+++ b/playground/src/views/system/dept/data.ts
@@ -94,8 +94,9 @@ export function useColumns(
     },
     {
       field: 'createTime',
+      resizable: false,
       title: $t('system.dept.createTime'),
-      width: 180,
+      width: 'auto',
     },
     {
       field: 'remark',
diff --git a/playground/src/views/system/dept/modules/form.vue b/playground/src/views/system/dept/modules/form.vue
index e57f115c..18a13966 100644
--- a/playground/src/views/system/dept/modules/form.vue
+++ b/playground/src/views/system/dept/modules/form.vue
@@ -37,7 +37,7 @@ const [Modal, modalApi] = useVbenModal({
     const { valid } = await formApi.validate();
     if (valid) {
       modalApi.lock();
-      const data = formApi.getValues();
+      const data = await formApi.getValues();
       try {
         await (formData.value?.id
           ? updateDept(formData.value.id, data)
diff --git a/playground/src/views/system/menu/data.ts b/playground/src/views/system/menu/data.ts
index 75190b4a..ee787e50 100644
--- a/playground/src/views/system/menu/data.ts
+++ b/playground/src/views/system/menu/data.ts
@@ -11,7 +11,7 @@ export function getMenuTypeOptions() {
       value: 'catalog',
     },
     { color: 'default', label: $t('system.menu.typeMenu'), value: 'menu' },
-    { color: 'error', label: $t('system.menu.typeButton'), value: 'button' },
+    { color: 'error', label: $t('system.menu.typeButton'), value: 'action' },
     {
       color: 'success',
       label: $t('system.menu.typeEmbedded'),
diff --git a/playground/src/views/system/menu/modules/form.vue b/playground/src/views/system/menu/modules/form.vue
index 3cf40e35..6701a2e5 100644
--- a/playground/src/views/system/menu/modules/form.vue
+++ b/playground/src/views/system/menu/modules/form.vue
@@ -241,10 +241,10 @@ const schema: VbenFormSchema[] = [
     component: 'Input',
     dependencies: {
       rules: (values) => {
-        return values.type === 'button' ? 'required' : null;
+        return values.type === 'action' ? 'required' : null;
       },
       show: (values) => {
-        return ['button', 'catalog', 'embedded', 'menu'].includes(values.type);
+        return ['action', 'catalog', 'embedded', 'menu'].includes(values.type);
       },
       triggerFields: ['type'],
     },
@@ -277,7 +277,7 @@ const schema: VbenFormSchema[] = [
     },
     dependencies: {
       show: (values) => {
-        return values.type !== 'button';
+        return values.type !== 'action';
       },
       triggerFields: ['type'],
     },
@@ -295,7 +295,7 @@ const schema: VbenFormSchema[] = [
     },
     dependencies: {
       show: (values) => {
-        return values.type !== 'button';
+        return values.type !== 'action';
       },
       triggerFields: ['type'],
     },
@@ -314,7 +314,7 @@ const schema: VbenFormSchema[] = [
     },
     dependencies: {
       show: (values) => {
-        return values.type !== 'button';
+        return values.type !== 'action';
       },
       triggerFields: ['type'],
     },
@@ -325,7 +325,7 @@ const schema: VbenFormSchema[] = [
     component: 'Divider',
     dependencies: {
       show: (values) => {
-        return !['button', 'link'].includes(values.type);
+        return !['action', 'link'].includes(values.type);
       },
       triggerFields: ['type'],
     },
@@ -372,7 +372,7 @@ const schema: VbenFormSchema[] = [
     component: 'Checkbox',
     dependencies: {
       show: (values) => {
-        return !['button'].includes(values.type);
+        return !['action'].includes(values.type);
       },
       triggerFields: ['type'],
     },
@@ -402,7 +402,7 @@ const schema: VbenFormSchema[] = [
     component: 'Checkbox',
     dependencies: {
       show: (values) => {
-        return !['button', 'link'].includes(values.type);
+        return !['action', 'link'].includes(values.type);
       },
       triggerFields: ['type'],
     },
@@ -417,7 +417,7 @@ const schema: VbenFormSchema[] = [
     component: 'Checkbox',
     dependencies: {
       show: (values) => {
-        return !['button', 'link'].includes(values.type);
+        return !['action', 'link'].includes(values.type);
       },
       triggerFields: ['type'],
     },
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 70b08357..45e49051 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -167,7 +167,7 @@ catalog:
   unbuild: ^3.5.0
   unplugin-element-plus: ^0.9.1
   vee-validate: ^4.15.0
-  vite: ^6.2.5
+  vite: 6.2.5
   vite-plugin-compression: ^0.5.1
   vite-plugin-dts: ^4.5.3
   vite-plugin-html: ^3.2.2
diff --git a/scripts/菜单图标替换sql/update_icon.sql b/scripts/菜单图标替换sql/update_icon.sql
index ea289d86..fa0721a0 100644
--- a/scripts/菜单图标替换sql/update_icon.sql
+++ b/scripts/菜单图标替换sql/update_icon.sql
@@ -1,16 +1,16 @@
 UPDATE sys_menu SET icon = 'eos-icons:system-group' WHERE menu_id = 1;
-UPDATE sys_menu SET icon = 'solar:monitor-bold-duotone' WHERE menu_id = 2;
-UPDATE sys_menu SET icon = 'mdi:tools' WHERE menu_id = 3;
+UPDATE sys_menu SET icon = 'solar:monitor-camera-outline' WHERE menu_id = 2;
+UPDATE sys_menu SET icon = 'ant-design:tool-outlined' WHERE menu_id = 3;
 UPDATE sys_menu SET icon = 'flat-color-icons:plus' WHERE menu_id = 4;
 UPDATE sys_menu SET icon = 'devicon:vscode' WHERE menu_id = 5;
-UPDATE sys_menu SET icon = 'ic:baseline-house' WHERE menu_id = 6;
-UPDATE sys_menu SET icon = 'ph:user-duotone' WHERE menu_id = 100;
+UPDATE sys_menu SET icon = 'ph:users-light' WHERE menu_id = 6;
+UPDATE sys_menu SET icon = 'ant-design:user-outlined' WHERE menu_id = 100;
 UPDATE sys_menu SET icon = 'eos-icons:role-binding-outlined' WHERE menu_id = 101;
 UPDATE sys_menu SET icon = 'ic:sharp-menu' WHERE menu_id = 102;
 UPDATE sys_menu SET icon = 'mingcute:department-line' WHERE menu_id = 103;
 UPDATE sys_menu SET icon = 'icon-park-outline:appointment' WHERE menu_id = 104;
 UPDATE sys_menu SET icon = 'fluent-mdl2:dictionary' WHERE menu_id = 105;
-UPDATE sys_menu SET icon = 'icon-park-twotone:setting-two' WHERE menu_id = 106;
+UPDATE sys_menu SET icon = 'ant-design:setting-outlined' WHERE menu_id = 106;
 UPDATE sys_menu SET icon = 'fe:notice-push' WHERE menu_id = 107;
 UPDATE sys_menu SET icon = 'material-symbols:logo-dev-outline' WHERE menu_id = 108;
 UPDATE sys_menu SET icon = 'material-symbols:generating-tokens-outline' WHERE menu_id = 109;
@@ -19,10 +19,10 @@ UPDATE sys_menu SET icon = 'fluent:form-new-24-regular' WHERE menu_id = 114;
 UPDATE sys_menu SET icon = 'tabler:code' WHERE menu_id = 115;
 UPDATE sys_menu SET icon = 'devicon:spring-wordmark' WHERE menu_id = 117;
 UPDATE sys_menu SET icon = 'solar:folder-with-files-outline' WHERE menu_id = 118;
-UPDATE sys_menu SET icon = 'akar-icons:schedule' WHERE menu_id = 120;
-UPDATE sys_menu SET icon = 'bi:houses-fill' WHERE menu_id = 121;
+UPDATE sys_menu SET icon = 'svg:snail-job' WHERE menu_id = 120;
+UPDATE sys_menu SET icon = 'ph:user-list' WHERE menu_id = 121;
 UPDATE sys_menu SET icon = 'bx:package' WHERE menu_id = 122;
-UPDATE sys_menu SET icon = 'simple-icons:authy' WHERE menu_id = 123;
+UPDATE sys_menu SET icon = 'solar:monitor-smartphone-outline' WHERE menu_id = 123;
 UPDATE sys_menu SET icon = 'arcticons:one-hand-operation' WHERE menu_id = 500;
 UPDATE sys_menu SET icon = 'streamline:interface-login-dial-pad-finger-password-dial-pad-dot-finger' WHERE menu_id = 501;