删除卡片会删除卡片链路所有生成节点，版本树新增点击遮罩关闭版本树

src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue

@@ -70,13 +70,13 @@
 		const id = props.node.id
 		if (!id) return
 		const superiorID = props.node.data.superiorID
+		stateManager.deleteNode(id)
 		if(v.secondaryMenu){
 			nodeManager.createCardsSelect({
 				data: { 
 					tier: props.node.data?.tier, 
 					superiorID, 
 					isActive: props.node.data?.isActive,
-					originalImage: props.node.data?.originalImage,
 					secondaryMenu: v.secondaryMenu,
 					createIndexPosition: props.node.data.createIndexPosition,
 				}
@@ -89,11 +89,9 @@
 					superiorID,
 					isActive: props.node.data?.isActive,
 					createIndexPosition: props.node.data.createIndexPosition,
-					originalImage: props.node.data?.originalImage,
 				}
 			})
 		}
-		stateManager.deleteNode(id)
 	}
 
 	defineExpose({})

src/components/Canvas/FlowCanvas/components/nodes/cards/fast-mode.vue

@@ -9,24 +9,26 @@
 </template>
 
 <script setup lang="ts">
-	import { reactive, inject, useAttrs } from 'vue'
+	import { reactive, inject, useAttrs, computed } from 'vue'
 	import myEvent from '@/utils/myEvent'
 	import { getCurrentTime } from '../../../../tools/tools.ts'
 	import { NODE_DATATIER } from '../../../tools/index.d'
 	const attrs = useAttrs()
-	const data = reactive({
-		url: attrs.node?.data?.originalImage,
-	})
 	const stateManager = inject('stateManager') as any
 	const nodeManager = inject('nodeManager') as any
 	const eventManager = inject('eventManager') as any
+	const data = reactive({
+		url: computed(()=>stateManager.getSuperiorNodeImage(attrs.node?.data?.superiorID)),
+	})
 	const getApiData = ()=>{
 		return {
 		}
 	}
 	const opCanvas = ()=>{
+		const superiorNodeUrl = stateManager.getSuperiorNodeImage(attrs?.node?.data?.superiorID || null)
+		if (!superiorNodeUrl) console.log('superiorNodeUrl 找不到原始图片')
 		const data = { 
-			url:attrs?.node?.data?.originalImage,
+			url:superiorNodeUrl,
 			canvasId: attrs?.node?.data?.canvasId || null,
 			sketchId: stateManager.sketchId.value,
 			onWorkbench:(options)=>{

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

@@ -42,12 +42,15 @@
 	import ColorPalette from './color-palette.vue'
 	import To3View from './to-3view.vue'
 	import To3DModel from './to-3d-model.vue'
+	import { useI18n } from 'vue-i18n'
+	import { ElMessageBox } from 'element-plus'
 
 	import { toRealStyleApi, toColorPaletteApi, toSceneCompositionApi, sketchAddPrintApi, sketchToThreeApi, threeToThreeViewsApi } from '@/api/flow-canvas'
 
 	// import ToVideo from './to-video.vue'
 	// import AddPrint from './add-print.vue'
 	// import ToCAD from './to-cad.vue'
+	const { t } = useI18n()
 	const attrs = useAttrs()
 	const componentRef = ref(null)
 	const components = [
@@ -144,12 +147,12 @@
 	const onGenerateClick = async () => {
 		const data = componentRef.value?.getApiData?.() || {}
 		const subordNodes = stateManager.getSubordNodes(attrs.node.id)
+		const superiorNodeUrl =  stateManager.getSuperiorNodeImage(attrs.node.data.superiorID)
+		if(!superiorNodeUrl)return console.log('superiorNodeUrl 找不到原始图片')
 		emit('update-data', componentRef.value?.data)
-		if(!attrs.node?.data?.originalImage)console.log('originalImage 找不到原始图片')
-
 		const apiData = {
 			sketchId: props.sketchId,
-			imageUrl: attrs.node?.data?.originalImage,
+			imageUrl: superiorNodeUrl,
 			...data,
 		}
 		const taskList = await currentComponent.value.api(apiData).then((rv)=>{
@@ -177,8 +180,9 @@
 		})
 	}
 	//删除功能卡片
-	const onDeleteClick = ()=>{
-		stateManager.deleteNode(attrs.node.id,{isElMessageBox:true})
+	const onDeleteClick = async ()=>{
+		console.log(stateManager.nodes)
+		stateManager.getSubordinateAllNodes(attrs.node.id,{ isElMessageBox: true })
 	}
 	const setDate = () => {
 		for (const key in props.data) {

src/components/Canvas/FlowCanvas/components/nodes/cards/to-3d-model.vue

@@ -9,12 +9,12 @@
 </template>
 
 <script setup lang="ts">
-	import { reactive, onMounted, useAttrs } from 'vue'
+	import { reactive, inject, useAttrs, computed } from 'vue'
 	import uploadFile from '../../tools/upload-file.vue'
 	const attrs = useAttrs()
-
+	const stateManager = inject('stateManager') as any
 	const data = reactive({
-		url: attrs.node?.data?.originalImage,
+		url: computed(()=>stateManager.getSuperiorNodeImage(attrs.node?.data?.superiorID)),
 	})
 	const getApiData = ()=>{
 		return {

src/components/Canvas/FlowCanvas/components/nodes/cards/to-3view.vue

@@ -13,8 +13,8 @@
 	const attrs = useAttrs()
 	const stateManager = inject('stateManager') as any
 	const data = reactive({
-		url: attrs.node.data.originalImage,
-	})
+		url: computed(()=>stateManager.getSuperiorNodeImage(attrs.node?.data?.superiorID)),
+		})
 	const getApiData = ()=>{
 		let glbUrl = null
 		const superiorNode = stateManager.nodes.value.filter((item:any)=>item.id === attrs.node?.data?.superiorID)[0]

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

@@ -253,18 +253,11 @@
 	)
 	const onAdd = () => {
 		const tier_ = tier.value + 1
-		// 从data中获取originalImage
-		let nodeData = props.node?.data?.data.imageProcessTasks.filter(
-			(v) => v.taskId === props.node?.data?.data.selectTaskId
-		)
 		const subordNodes = stateManager.getSubordNodes(props.node.id)
-		const originalImage = nodeData[0]?.url
-		if (!originalImage) console.log('originalImage 找不到原始图片')
 		stateManager.nodeManager.createCardsSelect({
 			data: { 
 				tier: tier_, 
 				superiorID: props.node.id, 
-				originalImage, 
 				createIndexPosition: subordNodes.length + 1,
 				isActive: subordNodes.length == 0
 			}

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

@@ -94,7 +94,7 @@ export class EventManager {
 	handleDelete(event: any, activeNodeID: string) {
 		event.preventDefault()
 		if (!activeNodeID) return console.warn('没有选中节点')
-		this.stateManager.deleteNode(activeNodeID, { isElMessageBox: true })
+		this.stateManager.getSubordinateAllNodes(activeNodeID, { isElMessageBox: true })
 	}
 	/** 处理键盘事件 */
 	_handleKeyDown: any

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

@@ -10,7 +10,6 @@ interface NodeData {
 	superiorNodeType?: string// 上级节点类型
 	disableDelete?: boolean// 是否禁用删除
 	disableCopy?: boolean// 是否禁用复制
-	originalImage?: string// 要进行生成的图片
 	createIndexPosition?: number// 创建索引位置
 	isActive?: boolean// 是否激活
 }
@@ -35,7 +34,7 @@ export class NodeManager {
 
 	/** 删除节点 */
 	deleteNode(id: string) {
-		this.stateManager.deleteNode(id)
+		this.stateManager.getSubordinateAllNodes(id, { isElMessageBox: true })
 	}
 	/** 添加节点 */
 	addNode(node: any) {

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

@@ -119,37 +119,69 @@ export class StateManager {
 		this.exportFlow()
 	}
 	/** 删除节点 */
-	async deleteNode(id: string, { isElMessageBox } = { isElMessageBox: false }) {
-		const node = this.getNodeById(id)
-		if (!node) return console.warn(`没有找到指定id:${id}`)
-		if (node.data.disableDelete) return console.warn('该节点禁用删除')
-		let deletePromise: any = true
-		if (isElMessageBox) {
-			deletePromise = await new Promise<void>((resolve, reject) => {
-				ElMessageBox.confirm(
-					t('flowCanvas.deleteCardConfirm'),
-					'',
-					{
-						confirmButtonText: t('flowCanvas.confirm'),
-						cancelButtonText: t('flowCanvas.cancel'),
-					}
-				).then(() => {
-					resolve(true)
-				}).catch(() => {
-					resolve(false)
-				})
-			})
-		}
-		if (!deletePromise) return console.log('删除操作被取消')
+	async deleteNode(id: string) {
+		
 		this.nodes.value = this.nodes.value.filter((node: NodesItem) => node.id !== id)
-		this.recordState()
-		this.exportFlow()
 	}
 	/** 获取节点 */
 	getNodeById(id: string) { return this.nodes.value.find((node: NodesItem) => node.id === id) }
 	/** 获取下级节点 */
 	getSubordNodeById(id: string) { return this.nodes.value.find((node: NodesItem) => node.data.superiorID === id) }
 	getLastNode() { console.log(this.nodes.value); return this.nodes.value[this.nodes.value.length - 1] }
+
+	/** 获取上级生成节点的图片 */
+	getSuperiorNodeImage(superiorID: string) {
+		const superiorNode = this.getNodeById(superiorID)
+		if(!superiorNode){
+			ElMessage.error(t('flowCanvas.cannotFindSuperiorImage'))
+			return null
+		}
+		const superiorNodeUrl =  superiorNode.data.data.imageProcessTasks.filter((item)=>{
+			return item.taskId == superiorNode.data.data.selectTaskId
+		})[0]?.url
+		return superiorNodeUrl
+	}
+	/** 获取下级所有子级节点 */
+	async getSubordinateAllNodes(id: string,{ isElMessageBox } = { isElMessageBox: false }) {
+		const node = this.getNodeById(id)
+		if (!node) return console.warn(`没有找到指定id:${id}`)
+		if (node.data.disableDelete) return ElMessage.error(t('flowCanvas.initialNodeProhibited'))
+		
+		const result = [node]
+		const findChildren = (parentId: string) => {
+			const children = this.nodes.value.filter(item => item.data.superiorID === parentId)
+			children.forEach(child => {
+				if(child.data.type !== NODE_DATATYPE.RESULT_IMAGE){
+					result.push(child)
+				}
+				findChildren(child.id)
+			})
+		}
+		let deletePromise: any = true
+		if (isElMessageBox && result.length > 1) {
+			deletePromise = await new Promise<void>((resolve, reject) => {
+				ElMessageBox.confirm(
+					t('flowCanvas.deleteSubordinateCard'),
+					'',
+					{
+						confirmButtonText: t('flowCanvas.confirm'),
+						cancelButtonText: t('flowCanvas.cancel'),
+					}
+				).then(() => {resolve(true)
+				}).catch(() => {
+					resolve(false)
+				})
+			})
+		}
+		if(!deletePromise) return console.log('删除操作被取消')
+		
+		this.deleteNode(id)
+		result.forEach(item => {
+			this.deleteNode(item.id)
+		})
+		this.recordState()
+		this.exportFlow()
+	}
 	/** 设置工具 */
 	setTool(tool: string) { this.tool.value = tool }
 	/** 设置光标 */