上级为3d的情况点击放大按钮为打开模型窗口

src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue

@@ -132,7 +132,6 @@
 			imageUrl: attrs.node?.data?.originalImage,
 			...data,
 		}
-		console.log(subordNode)
 		const taskList = await currentComponent.value.api(apiData).then((rv)=>{
 			return rv
 		}) || []
@@ -143,6 +142,7 @@
 				positionY: (index + subordNodes.length) * (50 + 250),
 				data: {
 					superiorID: attrs.node.id,
+					superiorNodeType: attrs.node?.data?.type,
 					createIndexPosition: index,
 					tier: currentComponent.value.tier,
 					isActive: index == 0 && subordNodes.length == 0,

src/components/Canvas/FlowCanvas/components/nodes/result-image.vue

@@ -7,7 +7,7 @@
 			:class="{'active': config.isActive}"
 			@click="setSelectTaskId(item.taskId)"
 		>
-			<div class="header" v-if="item.status == 'RETURNED'" v-show="showHeader && item.taskId === data.selectTaskId" @mousedown.stop>
+			<div class="header" v-if="item.status == 'RETURNED'" v-show="showHeader && config.isActive" @mousedown.stop>
 				<span class="icon">
 					<svg-icon name="chat-compose" size="20" size-unit="px" />
 				</span>
@@ -61,7 +61,9 @@
 	import { downloadImage } from '../../../tools/tools'
 	import { reactive, ref, onBeforeUnmount, useAttrs, inject, watch, computed, onMounted } from 'vue'
 	import HighlightAdmin from '@/components/highlightAdmin.vue'
+	import { NODE_DATATYPE } from '../../tools/index.d'
 	const openImagePreview = inject('openImagePreview') as (url: string) => void
+	const openThreeModelPreview = inject('openThreeModelPreview') as (url: string) => void
 	const props = defineProps({
 		node: {
 			type: Object,
@@ -83,8 +85,8 @@
 		'send-to-back',
 		'update-data'
 	])
-	const attrs = useAttrs()
-	const showHeader = ref(!!attrs.node?.data?.isHeader)
+	// const attrs = useAttrs()
+	const showHeader = ref(!!props.node?.data?.isHeader)
 	const showMenu = ref(false)
 	const clickTaskId = ref('')
 	const generateManager = inject('generateManager') as any
@@ -97,6 +99,7 @@
 	const data = reactive({
 		selectTaskId: props.data?.selectTaskId || '',
 		imageProcessTasks: props.data?.imageProcessTasks,
+		superiorNodeType: props?.node?.data?.superiorNodeType,
 		isActive: props.data?.isActive || false,
 	})
 	const setSelectTaskId = (taskId: string) => {
@@ -171,7 +174,11 @@
 		}
 	])
 	const onPreview = (url: string) => {
-		openImagePreview(url)
+		if(data.superiorNodeType == NODE_DATATYPE.TO_3D_MODEL){
+			openThreeModelPreview(url)
+		}else{
+			openImagePreview(url)
+		}
 	}
 	const onDownload = (url: string) => {
 		downloadImage(url, 'image.png')

src/components/Canvas/FlowCanvas/components/tools/threeModel/index.vue

@@ -1,18 +1,25 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import threeGlb from '@/assets/images/three/sample.glb'
 
 import model from './model.vue'
 import detail from './detail.vue'
 
-//const props = defineProps({
-//})
+const props = defineProps({
+	currentUrl: {
+		type: String,
+		default: ''
+	}
+})
 //const emit = defineEmits([
 //])
 let data = reactive({
 })
+
 const modelRef = ref(null)
 onMounted(()=>{
-	modelRef.value.open()
+	console.log(props.currentUrl)
+	modelRef.value.open(threeGlb)
 })
 onUnmounted(()=>{
 })

src/components/Canvas/FlowCanvas/components/tools/threeModel/model.vue

@@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n'
 import gsap from 'gsap';
 import * as THREE from 'three';
 import { initThree,clearModel,addModel,getModelInfo,calculateCameraPosition } from './threeTool'
-import threeGlb from '@/assets/images/three/sample.glb'
 
 //const props = defineProps({
 //})
@@ -134,7 +133,7 @@ const setModel = async (url:any)=>{
 	await addModel(url,controls,camera,pointLight,group,load)
 	// addMaterial()
 }
-const open = async ()=>{
+const open = async (url)=>{
 	load.value.state = true
 	await nextTick(()=>{
 		init()
@@ -152,7 +151,7 @@ const open = async ()=>{
 		// composer.render();
 	};
 	animate();
-	await setModel(threeGlb)
+	await setModel(url)
 	load.value.state = false
 }
 

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

@@ -56,7 +56,9 @@
 	/>
 	<image-preview ref="imagePreviewRef" />
 	<baseModal ref="threeModelRef">
-		<threeModel />
+		<template v-slot="{ currentUrl }">
+			<threeModel :currentUrl="currentUrl" />
+		</template>
 	</baseModal>
 </template>
 
@@ -215,7 +217,12 @@
 	const openImagePreview = (url: string) => {
 		imagePreviewRef.value.open(url)
 	}
+	/** 打开3D预览 */
+	const openThreeModelPreview = (url: string) => {
+		threeModelRef.value.open(url)
+	}
 	provide('openImagePreview', openImagePreview)
+	provide('openThreeModelPreview', openThreeModelPreview)
 
 	onMounted(async () => {
 		// window['vueFlow'] = vueFlow

src/components/Canvas/FlowCanvas/manager/NodeManager.ts

@@ -7,6 +7,7 @@ interface NodeData {
 	tier?: string// 节点层级
 	isHeader?: boolean// 是否显示头
 	superiorID?: string// 上级节点ID
+	superiorNodeType?: string// 上级节点类型
 	disableDelete?: boolean// 是否禁用删除
 	disableCopy?: boolean// 是否禁用复制
 	originalImage?: string// 要进行生成的图片

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

@@ -13,7 +13,7 @@
 			</div>
 		</template>
 		<div class="modal-box">
-			<slot></slot>
+			<slot v-if="currentUrl" :currentUrl="currentUrl"></slot>
 		</div>
 	</el-dialog>
 </template>
@@ -27,11 +27,14 @@
 		}
 	})
 	const showDialog = ref(false)
+	let currentUrl = ref('')
 	const open = (url_: any) => {
+		currentUrl.value = url_
 		showDialog.value = true
 	}
 	const close = () => {
 		showDialog.value = false
+		currentUrl.value = ''
 	}
 
 	defineExpose({