引入three.js 创建通用弹窗

src/components/Canvas/FlowCanvas/flow-canvas.vue

@@ -53,6 +53,9 @@
 		@home="() => fitView({ maxZoom: 1 })"
 	/>
 	<image-preview ref="imagePreviewRef" />
+	<baseModal ref="three">
+
+	</baseModal>
 </template>
 
 <script setup lang="ts">
@@ -64,6 +67,7 @@
 	import headerTools from './components/header-tools.vue'
 	import zoom from '../components/zoom.vue'
 	import imagePreview from '../components/image-preview.vue'
+	import baseModal from '../components/base-modal.vue'
 	// 节点
 	import node from './components/node.vue'
 	import resultImage from './components/nodes/result-image.vue'

src/components/Canvas/components/base-modal.vue

@@ -0,0 +1,51 @@
+<template>
+	<el-dialog
+		class="base-modal"
+		v-model="showDialog"
+		align-center
+		:show-close="false"
+		width="70vw"
+		style="border-radius: 20px; padding: 0; --el-dialog-padding-primary: 0"
+	>
+		<template #header="{ close }">
+			<div class="header-close" @click="close">
+				<svg-icon name="close" size="23" size-unit="px" />
+			</div>
+		</template>
+		<div class="modal-box">
+			<slot></slot>
+		</div>
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, onBeforeUnmount, shallowRef } from 'vue'
+	const showDialog = ref(false)
+	const open = (url_: any) => {
+		showDialog.value = true
+	}
+	const close = () => {
+		showDialog.value = false
+	}
+
+	defineExpose({
+		open,
+		close
+	})
+</script>
+ 
+<style lang="less" scoped>
+	.header-close {
+		position: absolute;
+		top: 30px;
+		right: 40px;
+		width: 40px;
+		height: 40px;
+		cursor: pointer;
+	}
+	.modal-box {
+		width: 100%;
+		height: 70vh;
+		padding: 67px;
+	}
+</style>