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

<template>
	<div
		class="preview-container flex"
		:class="type === 'sketch' ? 'sketch-preview' : 'report-preview'"
	>
		<template v-if="type === 'sketch'">
			<div
				class="sketch-item"
				v-for="(item, index) in sketchList"
				:key="'sketch-item-' + index"
			>
				<Menu class="menu-btn" @click="handleClickMenu" />
				<div
					class="edit-btn flex align-center space-between"
					@click="handleClickEdit(item)"
				>
					<div>Edit</div>
					<img src="@/assets/images/arrow-top-right.png" />
				</div>
				<img
					:src="getImageSrc(item, index)"
					:alt="'sketch-' + index"
					@load="handleImageLoad(index)"
				/>
			</div>
		</template>
		<div v-else class="reportBorder">
			<div class="report">
				<div v-if="false" class="report-content-null">
					<img :src="reportNull" alt="" />
				</div>
				<div v-else class="report-content">
					<div class="downBtnBox">
						<div class="downBtn">
							<div class="icon">
								<SvgIcon name="reportDown" size="16"></SvgIcon>
							</div>
							<span>{{ $t('agent.Download') }}</span>
						</div>
					</div>
					<div class="content">
						# 一级标题
						<br />
						# 一级标题
						<br />
						# 一级标题
						<br />
						# 一级标题
						<br />
						# 一级标题
						<br />
						# 一级标题
						<br />
						# 一级标题
						<br />
						# 一级标题
						<br />
						# 一级标题
						<br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题 <br />
						# 一级标题
						<br />
						# 一级标题
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import Menu from './Menu.vue'
	import LoadingImg from '@/assets/images/sketch-loading.gif'
	import reportNull from '@/assets/images/reportNull.png'
	import myEvent from '@/utils/myEvent'
	import { useProjectStore } from '@/stores'
	const projectStore = useProjectStore()

	// 存储每个图片的加载状态
	const loadedStatus = reactive<Record<number, boolean>>({})

	const props = withDefaults(
		defineProps<{
			type: 'sketch' | 'report'
			sketchList: Array<string>
		}>(),
		{
			type: 'sketch',
			sketchList: []
		}
	)

	// 图片加载完成时触发
	const handleImageLoad = (index: number) => {
		loadedStatus[index] = true
	}

	// 获取当前显示的图片源
	const getImageSrc = (item: string, index: number) => {
		if (typeof item === 'string') {
			return loadedStatus[index] ? item : LoadingImg
		}
		if (typeof item === 'object') {
			return Object.values(item)[0]
		}
	}

	const handleClickEdit = (item: string) => {
		const url = Object.values(item)[0]
		const imgId = Object.keys(item)[0]
		const nodeId = projectStore.state.nodeId
		myEvent.emit('openFlowCanvas', { url, imgId, nodeId })
	}
	const handleClickMenu = () => {
		// 菜单按钮点击逻辑
		console.log('Menu button clicked')
	}
</script>

<style lang="less" scoped>
	.preview-container {
		width: 100%;
		height: 100%;
		gap: 1.2rem;
		flex-wrap: wrap;
		overflow-y: auto;
		align-content: flex-start;
		.sketch-item {
			position: relative;
			width: calc((100% - 1.2rem * 3) / 4);
			//设置比例
			aspect-ratio: 1 / 1;
			border-radius: 1.6rem;
			img {
				width: 100%;
				height: 100%;
				border-radius: 1.6rem;
			}
			.menu-btn {
				position: absolute;
				top: 2.1rem;
				right: 1.5rem;
			}
			.edit-btn {
				position: absolute;
				right: 1rem;
				bottom: 1.1rem;
				width: 7.8rem;
				height: 3.59rem;
				border-radius: 2rem;
				background-color: #fff;
				border: 0.2rem solid #e5e5e5;
				font-size: 1.4rem;
				padding: 0 0.9rem 0 1.4rem;
				cursor: pointer;
				img {
					width: 1.8rem;
					height: 1.8rem;
				}
			}
		}
		.reportBorder {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			--border-width: 3px;
			flex: 1;
			overflow: hidden;
			height: 100%;
			&::before {
				content: '';
				position: absolute;
				background: linear-gradient(
					119.03deg,
					rgba(233, 121, 60, 0.3) 1.61%,
					rgba(255, 207, 144, 0.3) 101.01%
				);
				border-radius: 2.3rem;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: -50%;
				top: -50%;
				transform: translate(50%, 50%);
			}
			.report {
				background-color: #fff;
				width: calc(100% - var(--border-width) * 2);
				height: calc(100% - var(--border-width) * 2);
				border-radius: 2rem;
				display: flex;
				.report-content-null {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.report-content {
					flex: 1;
					display: flex;
					flex-direction: column;
					overflow: hidden;
					.downBtnBox {
						padding: 2.2rem 5.2rem 0;
						.downBtn {
							display: flex;
							width: 11.2rem;
							justify-content: center;
							margin-left: auto;
							line-height: 3.2rem;
							border-radius: 5px;
							background-color: #ff7a51;
							color: #fff;
							cursor: pointer;
							.icon {
								margin-right: 0.02rem;
							}
							span {
								font-weight: 500;
								font-size: 1.2rem;
							}
						}
					}
					.content {
						word-break: break-word;
						white-space: pre-wrap;
						overflow-y: auto;
						margin: 2rem;
					}
				}
			}
		}
	}
</style>