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

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` | - |

docs/src/components/common-ui/vben-modal.md

@@ -113,6 +113,7 @@ const [Modal, modalApi] = useVbenModal({
 | bordered | 是否显示border | `boolean` | `false` |
 | zIndex | 弹窗的ZIndex层级 | `number` | `1000` |
 | overlayBlur | 遮罩模糊度 | `number` | - |
+| submitting | 标记为提交中，锁定弹窗当前状态 | `boolean` | `false` |
 
 ::: info appendToMain
 
@@ -126,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` |  |
@@ -145,11 +146,18 @@ const [Modal, modalApi] = useVbenModal({
 
 ### modalApi
 
-| 方法 | 描述 | 类型 |
-| --- | --- | --- |
-| setState | 动态设置弹窗状态属性 | `(((prev: ModalState) => Partial<ModalState>)\| Partial<ModalState>)=>modalApi` |
-| open | 打开弹窗 | `()=>void` |
-| close | 关闭弹窗 | `()=>void` |
-| setData | 设置共享数据 | `<T>(data:T)=>modalApi` |
-| 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`方法关闭处于锁定状态的弹窗时，会自动解锁。
+
+:::