From ee7f84e0646b20819441fc239658157971309e31 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Mon, 9 Mar 2026 13:36:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A2=84=E8=A7=88=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/delete.svg         |  1 +
 src/components/Preview/Preview.vue  | 72 +++++++++++++++++++++++++++++
 src/views/home/components/Input.vue | 22 ++++++---
 3 files changed, 89 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Preview/Preview.vue

diff --git a/src/assets/icons/delete.svg b/src/assets/icons/delete.svg
index 29b0e11..3d7f8e2 100644
--- a/src/assets/icons/delete.svg
+++ b/src/assets/icons/delete.svg
@@ -1,4 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="white"/>
 <path d="M5.03431 5.03431C5.34673 4.7219 5.85327 4.7219 6.16569 5.03431L8 6.86863L9.83432 5.03431C10.1467 4.7219 10.6533 4.7219 10.9657 5.03431C11.2781 5.34673 11.2781 5.85327 10.9657 6.16569L9.13137 8L10.9657 9.83432C11.2781 10.1467 11.2781 10.6533 10.9657 10.9657C10.6533 11.2781 10.1467 11.2781 9.83432 10.9657L8 9.13137L6.16569 10.9657C5.85327 11.2781 5.34673 11.2781 5.03431 10.9657C4.7219 10.6533 4.7219 10.1467 5.03431 9.83432L6.86863 8L5.03431 6.16569C4.7219 5.85327 4.7219 5.34673 5.03431 5.03431Z" fill="#CDCDCD"/>
 <path d="M8 1.6C4.46538 1.6 1.6 4.46538 1.6 8C1.6 11.5346 4.46538 14.4 8 14.4C11.5346 14.4 14.4 11.5346 14.4 8C14.4 4.46538 11.5346 1.6 8 1.6ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8Z" fill="#CDCDCD"/>
 </svg>
diff --git a/src/components/Preview/Preview.vue b/src/components/Preview/Preview.vue
new file mode 100644
index 0000000..a3c3f20
--- /dev/null
+++ b/src/components/Preview/Preview.vue
@@ -0,0 +1,72 @@
+<!-- ImagePreview.vue -->
+<template>
+  <div v-if="modelValue" class="image-preview-modal" @click="closePreview">
+    <div class="image-preview-container" @click.stop>
+      <img :src="url" alt="Preview Image" class="preview-image" />
+      <button class="close-btn" @click="closePreview">×</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  url: string
+  modelValue: boolean
+}>()
+
+const emits = defineEmits(['update:modelValue'])
+
+const closePreview = () => {
+  emits('update:modelValue', false)
+}
+</script>
+
+<style lang="less" scoped>
+.image-preview-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.image-preview-container {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 90vh;
+  border-radius: 0.8rem;
+  display: block;
+}
+
+.close-btn {
+  position: absolute;
+  top: -2rem;
+  right: -2rem;
+  background: white;
+  border: none;
+  font-size: 3rem;
+  cursor: pointer;
+  color: #606266;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/components/Input.vue b/src/views/home/components/Input.vue
index 6ae30eb..08ba09b 100644
--- a/src/views/home/components/Input.vue
+++ b/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;
 				}
 			}
 		}