引入three.js 创建通用弹窗

package-lock.json

@@ -22,6 +22,7 @@
         "pinia": "^2.0.32",
         "pinia-persistedstate-plugin": "^0.1.0",
         "pinia-plugin-persistedstate": "^3.1.0",
+        "three": "^0.148.0",
         "vue": "^3.2.47",
         "vue-draggable-plus": "^0.6.1",
         "vue-i18n": "^11.2.8",
@@ -8556,6 +8557,12 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/three": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmmirror.com/three/-/three-0.148.0.tgz",
+      "integrity": "sha512-8uzVV+qhTPi0bOFs/3te3RW6hb3urL8jYEl6irjCWo/l6sr8MPNMcClFev/MMYeIxr0gmDcoXTy/8LXh/LXkfw==",
+      "license": "MIT"
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
@@ -16065,6 +16072,11 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "three": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmmirror.com/three/-/three-0.148.0.tgz",
+      "integrity": "sha512-8uzVV+qhTPi0bOFs/3te3RW6hb3urL8jYEl6irjCWo/l6sr8MPNMcClFev/MMYeIxr0gmDcoXTy/8LXh/LXkfw=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",

package.json

@@ -27,6 +27,7 @@
     "pinia": "^2.0.32",
     "pinia-persistedstate-plugin": "^0.1.0",
     "pinia-plugin-persistedstate": "^3.1.0",
+    "three": "^0.148.0",
     "vue": "^3.2.47",
     "vue-draggable-plus": "^0.6.1",
     "vue-i18n": "^11.2.8",

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>