Merge branch 'main' of http://18.167.251.121:10003/aidlab/FiDA_Front

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

@@ -6,7 +6,7 @@
 		<template v-if="type === 'sketch'">
 			<div
 				class="sketch-item"
-				v-for="(item, index) in sketchList"
+				v-for="(item, index) in combineSketchList"
 				:key="'sketch-item-' + index"
 			>
 				<el-dropdown trigger="click" class="menu-btn">
@@ -97,7 +97,7 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
+	import { ref, reactive, onMounted, onUnmounted, watch, computed } from 'vue'
 	import { deleteSketchFlowCanvas } from '@/api/flow-canvas'
 	import { useProjectStore } from '@/stores'
 	import { useI18n } from 'vue-i18n'
@@ -125,7 +125,7 @@
 	const props = withDefaults(
 		defineProps<{
 			type: 'sketch' | 'report' | 'url'
-			sketchList: Array<string>
+			sketchList: Array<Record<string, string>>
 		}>(),
 		{
 			type: 'sketch',
@@ -133,6 +133,25 @@
 		}
 	)
 
+	watch(
+		() => props.sketchList,
+		() => {
+			// 当 sketchList 变化时，重置加载状态
+			loadedStatus.value = new Array(combineSketchList.value.length).fill(false)
+			pendingSketchIndexes.value = []
+		}
+	)
+
+	const combineSketchList = computed(() => {
+		const res: Array<{ id: string; url: string }> = []
+		props.sketchList.forEach((group) => {
+			Object.entries(group).forEach(([id, url]) => {
+				res.push({ id, url })
+			})
+		})
+		return res
+	})
+
 	const customAttrs: CustomAttrs = {
 		heading: {
 			style: {
@@ -201,36 +220,19 @@
 	}
 
 	// 获取当前显示的图片源
-	const getImageSrc = (item: string, index: number) => {
-		if (item === null) {
-			return null
-		}
-		if (typeof item === 'string') {
-			return item
-		}
-		if (typeof item === 'object') {
-			return Object.values(item)[0]
-		}
+	const getImageSrc = (item: { id: string; url: string }, index: number) => {
+		return item.url
 	}
 
-	const handleClickEdit = (item: string | Object) => {
-		let url = ''
-		let imgId = ''
-		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
-		}
+	const handleClickEdit = (item: { id: string; url: string }) => {
+		const url = item.url
+		const imgId = item.id
+		const nodeId = projectStore.state.nodeId
 		myEvent.emit('openFlowCanvas', { url, imgId, nodeId })
 	}
 
-	const handleClickQuote = (item) => {
-		// console.log(item)
-		const url = Object.values(item)[0]
+	const handleClickQuote = (item: { id: string; url: string }) => {
+		const url = item.url
 		MyEvent.emit('quote', url)
 	}
 
@@ -289,13 +291,28 @@
 				el.src = finalSrc
 				el.style.opacity = 1
 			}
-		}
+		},
 		// 关键：如果图片地址是动态变化的，需要监听更新
-		// updated(el, binding) {
-		// 	if (binding.value !== binding.oldValue) {
-		// 		// 重复上面的加载逻辑...
-		// 	}
-		// }
+		updated(el, binding) {
+			if (binding.value !== binding.oldValue) {
+				console.log('value', binding.value, 'oldValue', binding.oldValue)
+
+				// 重复上面的加载逻辑...
+				const loadingUrl = LoadingImg
+				const finalSrc = binding.value // 真正要加载的图
+
+				el.src = loadingUrl
+
+				// 2. 预加载真实图片
+				const img = new Image()
+				img.src = finalSrc
+				img.onload = () => {
+					// 3. 加载完成后替换
+					el.src = finalSrc
+					el.style.opacity = 1
+				}
+			}
+		}
 	}
 	onMounted(() => {
 		MyEvent.add('loading-sketch', handleLoadingSketch)

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

@@ -2,8 +2,8 @@
 	<div class="report-card" :class="{ 'is-url': isUrl, 'is-sketch': isSketch }">
 		<div class="report-card-header">
 			<!-- <span v-if="!isUrl && !isSketch">{{ title || '' }}</span> -->
-			<div  class="web-sources flex align-center">
-				<span>{{ title || '' }}</span>
+			<div class="web-sources flex">
+				<span>{{ title || '' }}</span>	
 				<img src="@/assets/images/link.png" class="link-icon" />
 			</div>
 		</div>
@@ -69,11 +69,13 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 			display: -webkit-box;
-			-webkit-line-clamp: 3;
+			-webkit-line-clamp: 2;
 			-webkit-box-orient: vertical;
-			line-clamp: 3;
+			line-clamp: 2;
 			.web-sources {
 				column-gap: 0.8rem;
+				align-items: flex-start;
+				word-break: break-all;
 				.link-icon {
 					width: 1.6rem;
 					height: 1.6rem;