From 257dda6b0ad78cef964cfd433fe4a15aa433a434 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Mon, 26 Aug 2024 09:25:15 +0800
Subject: [PATCH] chore: modal/drawer demo

---
 .../web-antd/src/views/system/user/drawer.vue | 28 +++++++
 apps/web-antd/src/views/system/user/index.vue | 21 +++++
 apps/web-antd/src/views/system/user/modal.vue | 24 ++++++
 pnpm-lock.yaml                                | 84 +++++++------------
 4 files changed, 105 insertions(+), 52 deletions(-)
 create mode 100644 apps/web-antd/src/views/system/user/drawer.vue
 create mode 100644 apps/web-antd/src/views/system/user/modal.vue

diff --git a/apps/web-antd/src/views/system/user/drawer.vue b/apps/web-antd/src/views/system/user/drawer.vue
new file mode 100644
index 00000000..7197fc8d
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index 46b45a69..7c4d4fd9 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/system/user/modal.vue b/apps/web-antd/src/views/system/user/modal.vue
new file mode 100644
index 00000000..d8cb3184
--- /dev/null
+++ b/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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 66963c0a..09e0d7ab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -178,7 +178,7 @@ importers:
         specifier: workspace:*
         version: link:../../packages/utils
       '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
         version: 11.0.1(vue@3.4.38(typescript@5.5.4))
       ant-design-vue:
         specifier: ^4.2.3
@@ -189,6 +189,15 @@ importers:
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
+      echarts:
+        specifier: ^5.5.1
+        version: 5.5.1
+      jsencrypt:
+        specifier: ^3.3.2
+        version: 3.3.2
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.21
       pinia:
         specifier: 2.2.2
         version: 2.2.2(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4))
@@ -210,7 +219,7 @@ importers:
         version: 4.17.12
       unplugin-vue-components:
         specifier: ^0.27.3
-        version: 0.27.4(@babel/parser@7.25.3)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4))
+        version: 0.27.4(@babel/parser@7.25.4)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4))
 
   apps/web-ele:
     dependencies:
@@ -257,7 +266,7 @@ importers:
         specifier: workspace:*
         version: link:../../packages/utils
       '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
         version: 11.0.1(vue@3.4.38(typescript@5.5.4))
       dayjs:
         specifier: ^1.11.13
@@ -324,7 +333,7 @@ importers:
         specifier: workspace:*
         version: link:../../packages/utils
       '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
         version: 11.0.1(vue@3.4.38(typescript@5.5.4))
       naive-ui:
         specifier: ^2.39.0
@@ -398,10 +407,10 @@ importers:
         specifier: ^9.6.0
         version: 9.6.0
       '@typescript-eslint/eslint-plugin':
-        specifier: ^8.1.0
+        specifier: ^8.2.0
         version: 8.2.0(@typescript-eslint/parser@8.2.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4))(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)
       '@typescript-eslint/parser':
-        specifier: ^8.1.0
+        specifier: ^8.2.0
         version: 8.2.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)
       eslint:
         specifier: ^9.9.0
@@ -467,7 +476,7 @@ importers:
   internal/lint-configs/stylelint-config:
     dependencies:
       '@stylistic/stylelint-plugin':
-        specifier: ^3.0.0
+        specifier: ^3.0.1
         version: 3.0.1(stylelint@16.8.2(typescript@5.5.4))
       stylelint-config-recess-order:
         specifier: ^5.1.0
@@ -583,7 +592,7 @@ importers:
         specifier: ^16.1.0
         version: 16.1.0(postcss@8.4.41)
       postcss-preset-env:
-        specifier: ^10.0.1
+        specifier: ^10.0.2
         version: 10.0.2(postcss@8.4.41)
       tailwindcss:
         specifier: ^3.4.10
@@ -660,7 +669,7 @@ importers:
         specifier: ^16.4.5
         version: 16.4.5
       rollup:
-        specifier: ^4.20.0
+        specifier: ^4.21.0
         version: 4.21.0
       rollup-plugin-visualizer:
         specifier: ^5.12.0
@@ -747,7 +756,7 @@ importers:
         specifier: workspace:*
         version: link:../base/shared
       '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
         version: 11.0.1(vue@3.4.38(typescript@5.5.4))
       radix-vue:
         specifier: ^1.9.4
@@ -772,7 +781,7 @@ importers:
         specifier: workspace:*
         version: link:../base/typings
       '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
         version: 11.0.1(vue@3.4.38(typescript@5.5.4))
       vue:
         specifier: 3.4.38
@@ -793,7 +802,7 @@ importers:
         specifier: workspace:*
         version: link:../../base/typings
       '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
         version: 11.0.1(vue@3.4.38(typescript@5.5.4))
       vue:
         specifier: 3.4.38
@@ -817,7 +826,7 @@ importers:
         specifier: workspace:*
         version: link:../../base/typings
       '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
         version: 11.0.1(vue@3.4.38(typescript@5.5.4))
       vue:
         specifier: 3.4.38
@@ -859,7 +868,7 @@ importers:
         specifier: workspace:*
         version: link:../../base/typings
       '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
         version: 11.0.1(vue@3.4.38(typescript@5.5.4))
       class-variance-authority:
         specifier: ^0.7.0
@@ -889,7 +898,7 @@ importers:
         specifier: workspace:*
         version: link:../../base/typings
       '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
         version: 11.0.1(vue@3.4.38(typescript@5.5.4))
       vue:
         specifier: 3.4.38
@@ -925,7 +934,7 @@ importers:
         specifier: workspace:*
         version: link:../../preferences
       '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
         version: 11.0.1(vue@3.4.38(typescript@5.5.4))
       echarts:
         specifier: ^5.5.1
@@ -958,13 +967,8 @@ importers:
         specifier: workspace:*
         version: link:../../types
       '@vueuse/integrations':
-<<<<<<< HEAD
-        specifier: ^11.0.0
-        version: 11.0.1(async-validator@4.2.5)(axios@1.7.4)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
-=======
         specifier: ^11.0.1
         version: 11.0.1(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
->>>>>>> edb55b1fc09bad76d1c10918248fdb6836f30ddb
       qrcode:
         specifier: ^1.5.4
         version: 1.5.4
@@ -1048,7 +1052,7 @@ importers:
         specifier: workspace:*
         version: link:../../utils
       '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
         version: 11.0.1(vue@3.4.38(typescript@5.5.4))
       vue:
         specifier: 3.4.38
@@ -1196,7 +1200,7 @@ importers:
         specifier: workspace:*
         version: link:../packages/utils
       '@vueuse/core':
-        specifier: ^11.0.0
+        specifier: ^11.0.1
         version: 11.0.1(vue@3.4.38(typescript@5.5.4))
       ant-design-vue:
         specifier: ^4.2.3
@@ -12844,7 +12848,7 @@ snapshots:
   '@types/fs-extra@11.0.4':
     dependencies:
       '@types/jsonfile': 6.1.4
-      '@types/node': 22.4.1
+      '@types/node': 22.5.0
 
   '@types/hast@3.0.4':
     dependencies:
@@ -12866,7 +12870,7 @@ snapshots:
 
   '@types/jsonfile@6.1.4':
     dependencies:
-      '@types/node': 22.4.1
+      '@types/node': 22.5.0
 
   '@types/jsonwebtoken@9.0.6':
     dependencies:
@@ -13310,27 +13314,7 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-<<<<<<< HEAD
-  '@vueuse/integrations@11.0.1(async-validator@4.2.5)(axios@1.7.4)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))':
-=======
-  '@vueuse/integrations@11.0.0(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))':
-    dependencies:
-      '@vueuse/core': 11.0.0(vue@3.4.38(typescript@5.5.4))
-      '@vueuse/shared': 11.0.0(vue@3.4.38(typescript@5.5.4))
-      vue-demi: 0.14.10(vue@3.4.38(typescript@5.5.4))
-    optionalDependencies:
-      async-validator: 4.2.5
-      axios: 1.7.5
-      focus-trap: 7.5.4
-      nprogress: 0.2.0
-      qrcode: 1.5.4
-      sortablejs: 1.15.2
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
   '@vueuse/integrations@11.0.1(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))':
->>>>>>> edb55b1fc09bad76d1c10918248fdb6836f30ddb
     dependencies:
       '@vueuse/core': 11.0.1(vue@3.4.38(typescript@5.5.4))
       '@vueuse/shared': 11.0.1(vue@3.4.38(typescript@5.5.4))
@@ -18857,7 +18841,7 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  unplugin-vue-components@0.27.4(@babel/parser@7.25.3)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4)):
+  unplugin-vue-components@0.27.4(@babel/parser@7.25.4)(rollup@4.21.0)(vue@3.4.38(typescript@5.5.4)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.21.0)
@@ -18871,7 +18855,7 @@ snapshots:
       unplugin: 1.12.2
       vue: 3.4.38(typescript@5.5.4)
     optionalDependencies:
-      '@babel/parser': 7.25.3
+      '@babel/parser': 7.25.4
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -19130,11 +19114,7 @@ snapshots:
       '@vue/devtools-api': 7.3.8
       '@vue/shared': 3.4.38
       '@vueuse/core': 11.0.1(vue@3.4.38(typescript@5.5.4))
-<<<<<<< HEAD
-      '@vueuse/integrations': 11.0.1(async-validator@4.2.5)(axios@1.7.4)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
-=======
-      '@vueuse/integrations': 11.0.0(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
->>>>>>> edb55b1fc09bad76d1c10918248fdb6836f30ddb
+      '@vueuse/integrations': 11.0.1(async-validator@4.2.5)(axios@1.7.5)(focus-trap@7.5.4)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 7.1.0