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

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;
   /** 弹窗标题 */

docs/src/components/common-ui/vben-api-component.md

@@ -151,16 +151,17 @@ function fetchApi(): Promise<Record<string, any>> {
 | options | 直接传入选项数据，也作为api返回空数据时的后备数据 | `OptionsItem[]` | - | - |
 | visibleEvent | 触发重新请求数据的事件名 | `string` | - | - |
 | loadingSlot | 目标组件的插槽名称，用来显示一个"加载中"的图标 | `string` | - | - |
-| autoSelect | 自动设置选项 | `'first' \| 'last' \| 'none'\| false` | `false` | >5.5.4 |
+| autoSelect | 自动设置选项 | `'first' \| 'last' \| 'one'\| ((item: OptionsItem[]) => OptionsItem) \| false` | `false` | >5.5.4 |
 
 #### autoSelect 自动设置选项
 
 如果当前值为undefined，在选项数据成功加载之后，自动从备选项中选择一个作为当前值。默认值为`false`，即不自动选择选项。注意：该属性不应用于多选组件。可选值有：
 
-- `first`：自动选择第一个选项
-- `last`：自动选择最后一个选项
-- `one`：有且仅有一个选项时，自动选择它
-- false：不自动选择选项
+- `"first"`：自动选择第一个选项
+- `"last"`：自动选择最后一个选项
+- `"one"`：有且仅有一个选项时，自动选择它
+- `自定义函数`：自定义选择逻辑，函数的参数为options，返回值为选择的选项
+- `false`：不自动选择选项
 
 ### Methods
 
@@ -168,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 |

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
 

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
 

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>

docs/src/demos/vben-alert/prompt/index.vue

@@ -1,7 +1,7 @@
 <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, Select } from 'ant-design-vue';
 import { BadgeJapaneseYen } from 'lucide-vue-next';
@@ -20,16 +20,30 @@ function showPrompt() {
 
 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) => {