feat: 预览图片

src/views/home/components/Input.vue

@@ -8,6 +8,7 @@
 						v-for="(image, index) in uploadedImages"
 						:key="index"
 						class="image-preview-item"
+						@click="previewImage(image.url)"
 					>
 						<img :src="image.url" :alt="image.name" class="preview-image" />
 						<div class="image-remove-btn" @click="removeImage(index)">
@@ -206,6 +207,7 @@
 			<span>{{ $t('Input.trendingReport') }}</span>
 		</div>
 	</div>
+	<Preview v-model="showPreview" :url="previewUrl" />
 </template>
 
 <script setup lang="ts">
@@ -222,7 +224,7 @@
 	import { getStyleImage } from './style'
 	import { uploadImage } from '@/api/upload'
 	import MyEvent from '@/utils/myEvent'
-	// import Tag from './Tag.vue'
+	import Preview from '@/components/Preview/Preview.vue'
 
 	const router = useRouter()
 	const agentStore = useAgentStore()
@@ -773,6 +775,13 @@
 		uploadedImages.value = []
 	}
 
+	const showPreview = ref(false)
+	const previewUrl = ref('')
+	const previewImage = (url: string) => {
+		showPreview.value = true
+		previewUrl.value = url
+	}
+
 	// 暴露方法给父组件
 	defineExpose({
 		addReportTag
@@ -896,14 +905,15 @@
 				.preview-image {
 					width: 100%;
 					height: 100%;
-					object-fit: contain;
+					object-fit: cover;
 					border-radius: 0.8rem;
+					cursor: pointer;
 				}
 
 				.image-remove-btn {
 					position: absolute;
-					top: 0.2rem;
-					right: 0.2rem;
+					top: 0.6rem;
+					right: 0.6rem;
 					width: 1.6rem;
 					height: 1.6rem;
 					color: #fff;
@@ -913,12 +923,12 @@
 					justify-content: center;
 					font-size: 1.2rem;
 					cursor: pointer;
-					opacity: 0;
+					display: none;
 					transition: opacity 0.2s ease;
 				}
 
 				&:hover .image-remove-btn {
-					opacity: 1;
+					display: block;
 				}
 			}
 		}