fix: 图片预览

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"

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>