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

2024-12-11 16:00:25 +08:00
parent 4fab8251c7 d308da6ba1
commit 7577f17dd9
49 changed files with 1171 additions and 110 deletions
--- a/playground/src/adapter/component/index.ts
+++ b/playground/src/adapter/component/index.ts
@@ -8,7 +8,7 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';

-import { ApiSelect, globalShareState, IconPicker } from '@vben/common-ui';
+import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';

 import {
@@ -49,6 +49,7 @@ const withDefaultPlaceholder = <T extends Component>(
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
  | 'ApiSelect'
+  | 'ApiTreeSelect'
  | 'AutoComplete'
  | 'Checkbox'
  | 'CheckboxGroup'
@@ -82,13 +83,31 @@ async function initComponentAdapter() {

    ApiSelect: (props, { attrs, slots }) => {
      return h(
-        ApiSelect,
+        ApiComponent,
        {
+          placeholder: $t('ui.placeholder.select'),
          ...props,
          ...attrs,
          component: Select,
          loadingSlot: 'suffixIcon',
-          modelField: 'value',
+          modelPropName: 'value',
+          visibleEvent: 'onVisibleChange',
+        },
+        slots,
+      );
+    },
+    ApiTreeSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiComponent,
+        {
+          placeholder: $t('ui.placeholder.select'),
+          ...props,
+          ...attrs,
+          component: TreeSelect,
+          fieldNames: { label: 'label', value: 'value', children: 'children' },
+          loadingSlot: 'suffixIcon',
+          modelPropName: 'value',
+          optionsPropName: 'treeData',
          visibleEvent: 'onVisibleChange',
        },
        slots,
--- a/playground/src/views/examples/drawer/in-content-demo.vue
+++ b/playground/src/views/examples/drawer/in-content-demo.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    message.info('onConfirm');
+    // drawerApi.close();
+  },
+});
+</script>
+<template>
+  <Drawer append-to-main title="基础抽屉示例" title-tooltip="标题提示内容">
+    <template #extra> extra </template>
+    本抽屉指定在内容区域打开
+  </Drawer>
+</template>
--- a/playground/src/views/examples/drawer/index.vue
+++ b/playground/src/views/examples/drawer/index.vue
@@ -8,6 +8,7 @@ import AutoHeightDemo from './auto-height-demo.vue';
 import BaseDemo from './base-demo.vue';
 import DynamicDemo from './dynamic-demo.vue';
 import FormDrawerDemo from './form-drawer-demo.vue';
+import inContentDemo from './in-content-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';

 const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
@@ -16,6 +17,12 @@ const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
  // placement: 'left',
 });

+const [InContentDrawer, inContentDrawerApi] = useVbenDrawer({
+  // 连接抽离的组件
+  connectedComponent: inContentDemo,
+  // placement: 'left',
+});
+
 const [AutoHeightDrawer, autoHeightDrawerApi] = useVbenDrawer({
  connectedComponent: AutoHeightDemo,
 });
@@ -37,6 +44,23 @@ function openBaseDrawer(placement: DrawerPlacement = 'right') {
  baseDrawerApi.open();
 }

+function openInContentDrawer(placement: DrawerPlacement = 'right') {
+  inContentDrawerApi.setState({ class: '', placement });
+  if (placement === 'top') {
+    // 页面顶部区域的层级只有200，所以设置一个低于200的值，抽屉从顶部滑出来的时候才比较合适
+    inContentDrawerApi.setState({ zIndex: 199 });
+  } else {
+    inContentDrawerApi.setState({ zIndex: undefined });
+  }
+  inContentDrawerApi.open();
+}
+
+function openMaxContentDrawer() {
+  // 这里只是用来演示方便。实际上自己使用的时候可以直接将这些配置卸载Drawer的属性里
+  inContentDrawerApi.setState({ class: 'w-full', placement: 'right' });
+  inContentDrawerApi.open();
+}
+
 function openAutoHeightDrawer() {
  autoHeightDrawerApi.open();
 }
@@ -69,6 +93,7 @@ function openFormDrawer() {

 <template>
  <Page
+    auto-content-height
    description="抽屉组件通常用于在当前页面上显示一个覆盖层，用以展示重要信息或提供用户交互界面。"
    title="抽屉组件示例"
  >
@@ -76,6 +101,7 @@ function openFormDrawer() {
      <DocButton path="/components/common-ui/vben-drawer" />
    </template>
    <BaseDrawer />
+    <InContentDrawer />
    <AutoHeightDrawer />
    <DynamicDrawer />
    <SharedDataDrawer />
@@ -83,18 +109,55 @@ function openFormDrawer() {

    <Card class="mb-4" title="基本使用">
      <p class="mb-3">一个基础的抽屉示例</p>
-      <Button type="primary" @click="openBaseDrawer('right')">右侧打开</Button>
-      <Button class="ml-2" type="primary" @click="openBaseDrawer('bottom')">
+      <Button class="mb-2" type="primary" @click="openBaseDrawer('right')">
+        右侧打开
+      </Button>
+      <Button
+        class="mb-2 ml-2"
+        type="primary"
+        @click="openBaseDrawer('bottom')"
+      >
        底部打开
      </Button>
-      <Button class="ml-2" type="primary" @click="openBaseDrawer('left')">
+      <Button class="mb-2 ml-2" type="primary" @click="openBaseDrawer('left')">
        左侧打开
      </Button>
-      <Button class="ml-2" type="primary" @click="openBaseDrawer('top')">
+      <Button class="mb-2 ml-2" type="primary" @click="openBaseDrawer('top')">
        顶部打开
      </Button>
    </Card>

+    <Card class="mb-4" title="在内容区域打开">
+      <p class="mb-3">指定抽屉在内容区域打开，不会覆盖顶部和左侧菜单等区域</p>
+      <Button class="mb-2" type="primary" @click="openInContentDrawer('right')">
+        右侧打开
+      </Button>
+      <Button
+        class="mb-2 ml-2"
+        type="primary"
+        @click="openInContentDrawer('bottom')"
+      >
+        底部打开
+      </Button>
+      <Button
+        class="mb-2 ml-2"
+        type="primary"
+        @click="openInContentDrawer('left')"
+      >
+        左侧打开
+      </Button>
+      <Button
+        class="mb-2 ml-2"
+        type="primary"
+        @click="openInContentDrawer('top')"
+      >
+        顶部打开
+      </Button>
+      <Button class="mb-2 ml-2" type="primary" @click="openMaxContentDrawer">
+        内容区域全屏打开
+      </Button>
+    </Card>
+
    <Card class="mb-4" title="内容高度自适应滚动">
      <p class="mb-3">可根据内容自动计算滚动高度</p>
      <Button type="primary" @click="openAutoHeightDrawer">打开抽屉</Button>
--- a/playground/src/views/examples/form/api.vue
+++ b/playground/src/views/examples/form/api.vue
@@ -1,11 +1,17 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { Page } from '@vben/common-ui';

 import { Button, Card, message, Space } from 'ant-design-vue';

 import { useVbenForm } from '#/adapter/form';

+const isReverseActionButtons = ref(false);
+
 const [BaseForm, formApi] = useVbenForm({
+  // 翻转操作按钮的位置
+  actionButtonsReverse: isReverseActionButtons.value,
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
@@ -83,6 +89,7 @@ function handleClick(
    | 'labelWidth'
    | 'resetDisabled'
    | 'resetLabelWidth'
+    | 'reverseActionButtons'
    | 'showAction'
    | 'showResetButton'
    | 'showSubmitButton'
@@ -158,6 +165,11 @@ function handleClick(
      });
      break;
    }
+    case 'reverseActionButtons': {
+      isReverseActionButtons.value = !isReverseActionButtons.value;
+      formApi.setState({ actionButtonsReverse: isReverseActionButtons.value });
+      break;
+    }
    case 'showAction': {
      formApi.setState({ showDefaultActions: true });
      break;
@@ -177,6 +189,7 @@ function handleClick(
      });
      break;
    }
+
    case 'updateResetButton': {
      formApi.setState({
        resetButtonOptions: { disabled: true },
@@ -226,6 +239,9 @@ function handleClick(
      <Button @click="handleClick('resetLabelWidth')">还原labelWidth</Button>
      <Button @click="handleClick('disabled')">禁用表单</Button>
      <Button @click="handleClick('resetDisabled')">解除禁用</Button>
+      <Button @click="handleClick('reverseActionButtons')">
+        翻转操作按钮位置
+      </Button>
      <Button @click="handleClick('hiddenAction')">隐藏操作按钮</Button>
      <Button @click="handleClick('showAction')">显示操作按钮</Button>
      <Button @click="handleClick('hiddenResetButton')">隐藏重置按钮</Button>
--- a/playground/src/views/examples/form/basic.vue
+++ b/playground/src/views/examples/form/basic.vue
@@ -55,13 +55,28 @@ const [BaseForm, baseFormApi] = useVbenForm({
        },
        // 菜单接口
        api: getAllMenusApi,
-        placeholder: '请选择',
      },
      // 字段名
      fieldName: 'api',
      // 界面显示的label
      label: 'ApiSelect',
    },
+    {
+      component: 'ApiTreeSelect',
+      // 对应组件的参数
+      componentProps: {
+        // 菜单接口
+        api: getAllMenusApi,
+        childrenField: 'children',
+        // 菜单接口转options格式
+        labelField: 'name',
+        valueField: 'path',
+      },
+      // 字段名
+      fieldName: 'apiTree',
+      // 界面显示的label
+      label: 'ApiTreeSelect',
+    },
    {
      component: 'InputPassword',
      componentProps: {
--- a/playground/src/views/examples/modal/in-content-demo.vue
+++ b/playground/src/views/examples/modal/in-content-demo.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm() {
+    message.info('onConfirm');
+    // modalApi.close();
+  },
+});
+</script>
+<template>
+  <Modal
+    append-to-main
+    class="w-[600px]"
+    title="基础弹窗示例"
+    title-tooltip="标题提示内容"
+  >
+    此弹窗指定在内容区域打开
+  </Modal>
+</template>
--- a/playground/src/views/examples/modal/index.vue
+++ b/playground/src/views/examples/modal/index.vue
@@ -9,6 +9,7 @@ import BaseDemo from './base-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 SharedDataDemo from './shared-data-demo.vue';

 const [BaseModal, baseModalApi] = useVbenModal({
@@ -16,6 +17,11 @@ const [BaseModal, baseModalApi] = useVbenModal({
  connectedComponent: BaseDemo,
 });

+const [InContentModal, inContentModalApi] = useVbenModal({
+  // 连接抽离的组件
+  connectedComponent: InContentModalDemo,
+});
+
 const [AutoHeightModal, autoHeightModalApi] = useVbenModal({
  connectedComponent: AutoHeightDemo,
 });
@@ -40,6 +46,10 @@ function openBaseModal() {
  baseModalApi.open();
 }

+function openInContentModal() {
+  inContentModalApi.open();
+}
+
 function openAutoHeightModal() {
  autoHeightModalApi.open();
 }
@@ -76,6 +86,7 @@ function openFormModal() {

 <template>
  <Page
+    auto-content-height
    description="弹窗组件常用于在不离开当前页面的情况下，显示额外的信息、表单或操作提示，更多api请查看组件文档。"
    title="弹窗组件示例"
  >
@@ -83,6 +94,7 @@ function openFormModal() {
      <DocButton path="/components/common-ui/vben-modal" />
    </template>
    <BaseModal />
+    <InContentModal />
    <AutoHeightModal />
    <DragModal />
    <DynamicModal />
@@ -93,6 +105,11 @@ function openFormModal() {
      <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>