feat: 优化sketch显示&添加sketch卡片

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

@@ -5,7 +5,6 @@
 	>
 		<template v-if="type === 'sketch'">
 			<div
-				v-show="!showLoading"
 				class="sketch-item"
 				v-for="(item, index) in sketchList"
 				:key="'sketch-item-' + index"
@@ -41,14 +40,16 @@
 					<div>Edit</div>
 					<img src="@/assets/images/arrow-top-right.png" />
 				</div>
+				<!-- 已加载完成的 sketch 显示实际图片 -->
 				<img
-					:src="getImageSrc(item, index)"
-					:alt="'sketch-' + index"
+					v-show="!pendingSketchIndexes.includes(index)"
+					v-img-loading="getImageSrc(item, index)"
 					@load="handleImageLoad(index)"
 				/>
-			</div>
-			<div v-show="showLoading" class="sketch-item loading-gif">
-				<img src="@/assets/images/sketch-loading.gif" alt="loading" />
+				<!-- 正在加载的 sketch 显示 loading gif overlay -->
+				<div v-if="pendingSketchIndexes.includes(index)" class="loading-wrapper">
+					<img src="@/assets/images/sketch-loading.gif" alt="loading" />
+				</div>
 			</div>
 		</template>
 		<template v-else-if="type === 'url'">
@@ -113,7 +114,10 @@
 	const emits = defineEmits(['deleteSketch'])
 
 	// 存储每个图片的加载状态
-	const loadedStatus = ref<boolean>(false)
+	const loadedStatus = ref<boolean[]>([])
+
+	// 存储正在加载的 sketch 索引
+	const pendingSketchIndexes = ref<number[]>([])
 
 	const props = withDefaults(
 		defineProps<{
@@ -176,8 +180,14 @@
 
 	// 图片加载完成时触发
 	const handleImageLoad = (index: number) => {
-		loadedStatus[index] = true
-		showLoading.value = false
+		loadedStatus.value[index] = true
+		pendingSketchIndexes.value = pendingSketchIndexes.value.filter((i) => i !== index)
+	}
+
+	// 图片加载失败时触发
+	const handleImageError = (index: number) => {
+		pendingSketchIndexes.value = pendingSketchIndexes.value.filter((i) => i !== index)
+		console.error(`Failed to load sketch at index ${index}`)
 	}
 
 	// 获取当前显示的图片源
@@ -235,23 +245,42 @@
 	}
 
 	const showLoading = ref(false)
-	const handleLoadingSketch = () => {
+	const handleLoadingSketch = (sketchIndex?: number) => {
 		showLoading.value = true
+		// 记录正在加载的 sketch 索引
+		if (sketchIndex !== undefined) {
+			pendingSketchIndexes.value.push(sketchIndex)
+		}
 	}
 
-	const handleClickUrl = (item: { url: string, title: string }) => {
+	const handleClickUrl = (item: { url: string; title: string }) => {
 		window.open(item.url, '_blank')
 	}
 
-	// watch(
-	// 	() => props.sketchList,
-	// 	(val) => {
-	// 		if (val.length > 0) {
-	// 			showLoading.value = false
-	// 		}
-	// 	},
-	// 	{ deep: true }
-	// )
+	const vImgLoading = {
+		mounted(el, binding) {
+			// 1. 设置初始状态：显示 Loading 图（或者你可以从 binding.arg 传进来）
+			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
+			}
+		}
+		// 关键：如果图片地址是动态变化的，需要监听更新
+		// updated(el, binding) {
+		// 	if (binding.value !== binding.oldValue) {
+		// 		// 重复上面的加载逻辑...
+		// 	}
+		// }
+	}
 	onMounted(() => {
 		MyEvent.add('loading-sketch', handleLoadingSketch)
 	})
@@ -284,6 +313,19 @@
 				height: 100%;
 				border-radius: 1.6rem;
 			}
+			.loading-wrapper {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 1.6rem;
+				img {
+					width: 100%;
+					height: 100%;
+					border-radius: 1.6rem;
+				}
+			}
 			:deep(.menu-btn) {
 				position: absolute;
 				top: 2.1rem;