feat: modal&drawer support appendToMain and zIndex (#5092)

* feat: modal/drawer support append to main content

* feat: modal zIndex support

* fix: drawer prop define

* chore: type

* fix: modal/drawer position fixed while append to body

* docs: typo

* chore: add full-width drawer in content area

* chore: remove unnecessary class

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>

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>