feat: preview sketch loading

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>