feat: preview sketch loading

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

@@ -27,6 +27,7 @@
 	import { chatUrl } from '@/api/agent'
 	import type { AgentParamsType } from '@/api/agent'
 	import { useUserInfoStore, useProjectStore, useAgentStore } from '@/stores'
+	import MyEvent from '@/utils/myEvent'
 
 	const userStore = useUserInfoStore()
 	const agentStore = useAgentStore()
@@ -235,7 +236,7 @@
 						// 过滤掉 id: 等字段，只取 data:
 
 						let isNodeIdEvent = false
-						if (event.startsWith('event:')) {
+						if (event.includes('nodeId')) {
 							isNodeIdEvent = true
 							// continue
 						}
@@ -248,23 +249,30 @@
 							flag = false
 							break
 						}
+						if (event.includes('todo') || event.includes('webAddress')) {
+							break
+						}
 
 					const dataLines = event
 						.split(/\n/)
 						.filter((line) => line.startsWith('data:'))
 						.map((line) => line.replace(/^data:\s*/, '').trim())
+						.filter((content) => content.startsWith('{') || content.startsWith('['))
 						// console.log('dataLInes', dataLines)
 						if (isNodeIdEvent) {
 							params.versionID = dataLines[0]
 							projectStore.setProject({ nodeId: dataLines[0] })
 						}
+						if (event.includes('tool')) {
+							MyEvent.emit('loading-sketch')
+						}
 
 						if (dataLines.length === 0) continue
 						const jsonText = dataLines.join('\n')
 
 						try {
 							const jsonData = JSON.parse(jsonText)
-							// console.log('jsonData', jsonData)
+							console.log('jsonData', jsonData)
 
 							// 赋值 project_id 和 version_id
 							// if (jsonData.project_id) params.projectID = jsonData.project_id

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

@@ -46,6 +46,9 @@
 					@load="handleImageLoad(index)"
 				/>
 			</div>
+			<div v-show="showLoading" class="sketch-item loading-gif">
+				<img src="@/assets/images/sketch-loading.gif" alt="loading" />
+			</div>
 		</template>
 		<div v-else class="reportBorder">
 			<div class="report">
@@ -146,7 +149,7 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, reactive } from 'vue'
+	import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
 	import Menu from './Menu.vue'
 	import LoadingImg from '@/assets/images/sketch-loading.gif'
 	import reportNull from '@/assets/images/reportNull.png'
@@ -154,11 +157,12 @@
 	import { deleteSketchFlowCanvas } from '@/api/flow-canvas'
 	import { useProjectStore } from '@/stores'
 	const projectStore = useProjectStore()
+	import MyEvent from '@/utils/myEvent'
 
 	const emits = defineEmits(['deleteSketch'])
 
 	// 存储每个图片的加载状态
-	const loadedStatus = reactive<Record<number, boolean>>({})
+	const loadedStatus = ref<boolean>(false)
 
 	const props = withDefaults(
 		defineProps<{
@@ -174,6 +178,9 @@
 	// 图片加载完成时触发
 	const handleImageLoad = (index: number) => {
 		loadedStatus[index] = true
+		if (index === props.sketchList.length - 1) {
+			showLoading.value = false
+		}
 	}
 
 	// 获取当前显示的图片源
@@ -182,7 +189,7 @@
 			return null
 		}
 		if (typeof item === 'string') {
-			return loadedStatus[index] ? item : LoadingImg
+			return item
 		}
 		if (typeof item === 'object') {
 			return Object.values(item)[0]
@@ -215,6 +222,28 @@
 			}
 		})
 	}
+
+	const showLoading = ref(false)
+	const handleLoadingSketch = () => {
+		showLoading.value = true
+	}
+	watch(
+		() => props.sketchList,
+		(val) => {
+			console.log('-sketchList-', val)
+
+			if (val.length > 0) {
+				showLoading.value = false
+			}
+		},
+		{ deep: true }
+	)
+	onMounted(() => {
+		MyEvent.add('loading-sketch', handleLoadingSketch)
+	})
+	onUnmounted(() => {
+		MyEvent.remove('loading-sketch', handleLoadingSketch)
+	})
 </script>
 
 <style lang="less" scoped>