feat: 删除sketch

src/views/home/agent/components/Agent.vue

@@ -428,7 +428,6 @@
 	const setChatInfo = (info) => {
 		const initialData = agentStore.getInitialProjectData
 		if (isGenerating.value || initialData) return
-		console.log('info0----', info)
 
 		const data = info.conversation
 		let project = info.project
@@ -457,7 +456,9 @@
 		let ancestorsIdCounter = 1
 		if (ancestors) {
 			ancestors.forEach((item) => {
-				imgList = imgList.concat(current.sketchIDAndUrl)
+				if (item.sketchIDAndUrl) {
+					imgList = imgList.concat(item.sketchIDAndUrl)
+				}
 				const list = processDialogue(item.dialogue, 0, imgList)
 				// 重新设置 id
 				list.forEach((el) => {
@@ -467,7 +468,10 @@
 			})
 		}
 		const currentList = processDialogue(current?.dialogue, 0, imgList)
+		if (current.sketchIDAndUrl) {
 			imgList = imgList.concat(current.sketchIDAndUrl)
+		}
+
 		currentList.forEach((el, index) => {
 			el.id = index + 1 + ancestorsList.length
 		})

src/views/home/agent/components/Preview.vue

@@ -9,7 +9,30 @@
 				v-for="(item, index) in sketchList"
 				:key="'sketch-item-' + index"
 			>
-				<Menu class="menu-btn" @click="handleClickMenu" />
+				<el-dropdown trigger="click" class="menu-btn">
+					<Menu />
+					<template #dropdown>
+						<el-dropdown-menu>
+							<el-dropdown-item class="sketch-item flex align-center">
+								<img
+									src="@/assets/images/restore-sketch.png"
+									class="dropdown-icon restore"
+								/>
+								<span>Restore</span>
+							</el-dropdown-item>
+							<el-dropdown-item
+								class="sketch-item flex align-center"
+								@click="handleClickDelete(item)"
+							>
+								<img
+									src="@/assets/images/delete.png"
+									class="dropdown-icon delete"
+								/>
+								<span>Delete</span>
+							</el-dropdown-item>
+						</el-dropdown-menu>
+					</template>
+				</el-dropdown>
 				<div
 					class="edit-btn flex align-center space-between"
 					@click="handleClickEdit(item)"
@@ -128,9 +151,12 @@
 	import LoadingImg from '@/assets/images/sketch-loading.gif'
 	import reportNull from '@/assets/images/reportNull.png'
 	import myEvent from '@/utils/myEvent'
+	import { deleteSketchFlowCanvas } from '@/api/flow-canvas'
 	import { useProjectStore } from '@/stores'
 	const projectStore = useProjectStore()
 
+	const emits = defineEmits(['deleteSketch'])
+
 	// 存储每个图片的加载状态
 	const loadedStatus = reactive<Record<number, boolean>>({})
 
@@ -152,6 +178,9 @@
 
 	// 获取当前显示的图片源
 	const getImageSrc = (item: string, index: number) => {
+		if (item === null) {
+			return null
+		}
 		if (typeof item === 'string') {
 			return loadedStatus[index] ? item : LoadingImg
 		}
@@ -160,15 +189,31 @@
 		}
 	}
 
-	const handleClickEdit = (item: string) => {
+	const handleClickEdit = (item: string | Object) => {
-		const url = Object.values(item)[0]
+		let url = ''
-		const imgId = Object.keys(item)[0]
+		let imgId = ''
-		const nodeId = projectStore.state.nodeId
+		let nodeId = ''
+		if (typeof item === 'string') {
+			url = item
+		}
+		if (typeof item === 'object') {
+			url = Object.values(item)[0]
+			imgId = Object.keys(item)[0]
+			nodeId = projectStore.state.nodeId
+		}
 		myEvent.emit('openFlowCanvas', { url, imgId, nodeId })
 	}
-	const handleClickMenu = () => {
+
-		// 菜单按钮点击逻辑
+	const handleClickDelete = (item: string | Object) => {
-		console.log('Menu button clicked')
+		deleteSketchFlowCanvas({
+			id: Object.keys(item)[0],
+			versionNodeId: projectStore.state.nodeId
+		}).then((res) => {
+			if (res) {
+				ElMessage.success('Delete success')
+				emits('deleteSketch', Object.keys(item)[0])
+			}
+		})
 	}
 </script>
 
@@ -191,10 +236,21 @@
 				height: 100%;
 				border-radius: 1.6rem;
 			}
-			.menu-btn {
+			:deep(.menu-btn) {
 				position: absolute;
 				top: 2.1rem;
 				right: 1.5rem;
+
+				.dropdown-icon {
+					&.restore {
+						width: 1.4rem;
+						height: 1.3rem;
+					}
+					&.delete {
+						width: 1.2rem;
+						height: 1.3rem;
+					}
+				}
 			}
 			.edit-btn {
 				position: absolute;
@@ -287,4 +343,8 @@
 			}
 		}
 	}
+	:deep(.el-dropdown-menu__item) {
+		column-gap: 1.2rem;
+		padding: 1.2rem 1.4rem;
+	}
 </style>

src/views/home/agent/index.vue

@@ -6,7 +6,7 @@
 		<div class="content-wrapper">
 			<Agent ref="agentRef" :title="agentTitle" @update:sketchList="updateSketchList" />
 			<div class="preview-wrapper">
-				<Preview :type="previewType" :sketchList="sketchList" />
+				<Preview :type="previewType" :sketchList="sketchList" @deleteSketch="handleDeleteSketch" />
 			</div>
 		</div>
 		<VersionTreeIndex
@@ -41,6 +41,15 @@
 		// VersionTreeIndexRef.value.getVersionTree()
 	}
 
+	const handleDeleteSketch = (deletedId: string) => {
+		sketchList.value = sketchList.value.filter((item) => {
+			if (typeof item === 'object') {
+				return Object.keys(item)[0] !== deletedId
+			}
+			return true
+		})
+	}
+
 	const versionTreeData = ref({
 		drawer: false
 	})