From 45e6bab484673dedbcf3d0ab6f425e65e59ed175 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Sun, 15 Jun 2025 12:03:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json             |  1 +
 src/views/home/index.vue | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index ff5ef41..ba158e3 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "postcss-url": "^10.1.3",
     "postcss-viewport-units": "^0.1.6",
     "postcss-write-svg": "^3.0.1",
+    "tdesign-mobile-vue": "^1.9.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "ws": "^8.18.1"
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 3fb7ed2..bc1378f 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -14,6 +14,7 @@ import { socket } from 'libs/socket'
 import { cmdNameMap, formatDateTime } from 'libs/utils'
 import { useHomeStore } from 'stores/homeStore'
 import { useSystemStore } from 'stores/systemStore'
+import { ImageViewer as TImageViewer } from 'tdesign-mobile-vue'
 import { onMounted, onUnmounted, provide, ref } from 'vue'
 
 const homeStore = useHomeStore()
@@ -325,6 +326,16 @@ const photoVisible = ref(false)
 const savePhoto = () => {
   photoVisible.value = true
 }
+
+const previewVisible = ref(false)
+const photos = ref([])
+const previewHandle = () => {
+  if (!photoUrl.value) {
+    return
+  }
+  photos.value = [photoUrl.value]
+  previewVisible.value = true
+}
 </script>
 
 <template>
@@ -341,11 +352,8 @@ const savePhoto = () => {
             <div class="image-box">
               <el-image
                 :src="photoUrl"
-                :zoom-rate="1.2"
-                :max-scale="7"
-                :min-scale="0.2"
-                :preview-src-list="[photoUrl]"
                 fit="contain"
+                @click="previewHandle"
               >
                 <template #error>
                   <div class="image-slot">
@@ -490,6 +498,7 @@ const savePhoto = () => {
     <StartHeat v-if="startHeatVisible" @ok="startHeatVisible = false" @cancel="startHeatVisible = false" />
     <AddLiquid v-if="addLiquidVisible" @ok="addLiquidVisible = false" @cancel="addLiquidVisible = false" />
     <FillSolution v-if="fillSolutionVisible" @ok="fillSolutionVisible = false" @cancel="fillSolutionVisible = false" />
+    <TImageViewer v-model:images="photos" v-model:visible="previewVisible" />
   </div>
 </template>