chore: modal/drawer demo

apps/web-antd/src/views/system/user/drawer.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    message.info('点击了确认');
+  },
+});
+</script>
+
+<template>
+  <BasicDrawer
+    class="w-[600px]"
+    title="基础弹窗示例"
+    title-tooltip="标题提示内容"
+  >
+    <div
+      class="flex h-40 cursor-pointer items-center justify-center rounded-lg bg-pink-500 font-bold text-white transition-all hover:bg-blue-600 hover:text-[20px]"
+    >
+      this is Drawer content
+    </div>
+  </BasicDrawer>
+</template>

apps/web-antd/src/views/system/user/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue';
 
+import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
+
 import {
   Tag as ATag,
   Button,
@@ -8,11 +10,14 @@ import {
   RadioButton,
   RadioGroup,
   Select,
+  Space,
 } from 'ant-design-vue';
 
 import { DictTag } from '#/components/Dict';
 import { getDict, getDictOptions } from '#/utils/dict';
 
+import DrawerDemo from './drawer.vue';
+import ModalDemo from './modal.vue';
 import TableTest from './table';
 
 const count = ref(0);
@@ -30,6 +35,14 @@ const sexOptions = getDictOptions('sys_user_sex');
 const disabledDict = getDict('sys_normal_disable');
 const select = ref('pc');
 const deviceOptions = getDictOptions('sys_device_type');
+
+const [TestNodal, modalApi] = useVbenModal({
+  connectedComponent: ModalDemo,
+});
+
+const [TestDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: DrawerDemo,
+});
 </script>
 
 <template>
@@ -84,5 +97,13 @@ const deviceOptions = getDictOptions('sys_device_type');
     <Card title="table测试">
       <TableTest />
     </Card>
+    <Card title="Modal/Drawer测试">
+      <Space>
+        <a-button @click="() => modalApi.open()">打开Modal</a-button>
+        <a-button @click="() => drawerApi.open()">打开Drawer</a-button>
+      </Space>
+      <TestNodal />
+      <TestDrawer />
+    </Card>
   </div>
 </template>

apps/web-antd/src/views/system/user/modal.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+const [BasicModal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm() {
+    message.success('点击了确认');
+  },
+});
+</script>
+
+<template>
+  <BasicModal
+    class="w-[600px]"
+    title="基础弹窗示例"
+    title-tooltip="标题提示内容"
+  >
+    aaaaa
+  </BasicModal>
+</template>