图片点击放大

src/views/modules/longtron/production-work-report.vue

@@ -254,7 +254,12 @@
                   <div class="capture-list-panel">
                     <div v-if="capturedMediaList.length > 0" class="capture-list">
                       <div v-for="(item, index) in capturedMediaList" :key="item.uid" class="capture-item">
-                        <img v-if="isImageFile(item)" :src="item.previewUrl" class="capture-thumb" alt="capture-image">
+                        <img
+                          v-if="isImageFile(item)"
+                          :src="item.previewUrl"
+                          class="capture-thumb capture-thumb--image"
+                          alt="capture-image"
+                          @click="openImagePreview(item)">
                         <video v-else class="capture-thumb" controls preload="metadata">
                           <source :src="item.previewUrl" :type="item.mimeType || 'video/webm'">
                         </video>
@@ -314,6 +319,14 @@
         <el-button type="primary" @click="historyDialogVisible = false">关闭</el-button>
       </div>
     </el-dialog>
+
+    <div v-if="imagePreviewVisible" class="image-preview-overlay" @click="closeImagePreview">
+      <img
+        class="image-preview-full"
+        :src="imagePreviewUrl"
+        :alt="imagePreviewName || 'preview-image'"
+        @click.stop="closeImagePreview">
+    </div>
   </div>
 </template>
 
@@ -358,7 +371,10 @@ export default {
       recording: false,
       recordedChunks: [],
       captureIndex: 1,
-      capturedMediaList: []
+      capturedMediaList: [],
+      imagePreviewVisible: false,
+      imagePreviewUrl: '',
+      imagePreviewName: ''
     }
   },
   computed: {
@@ -851,6 +867,19 @@ export default {
       }
       this.capturedMediaList.splice(index, 1)
     },
+    openImagePreview (item) {
+      if (!item || !item.previewUrl) {
+        return
+      }
+      this.imagePreviewUrl = item.previewUrl
+      this.imagePreviewName = item.name || ''
+      this.imagePreviewVisible = true
+    },
+    closeImagePreview () {
+      this.imagePreviewVisible = false
+      this.imagePreviewUrl = ''
+      this.imagePreviewName = ''
+    },
     resetCapturedMedia () {
       this.capturedMediaList.forEach(item => {
         if (item && item.previewUrl) {
@@ -858,6 +887,7 @@ export default {
         }
       })
       this.capturedMediaList = []
+      this.closeImagePreview()
     },
     resetRecordingState () {
       this.mediaRecorder = null
@@ -1433,6 +1463,28 @@ export default {
   background: #000;
 }
 
+.capture-thumb--image {
+  cursor: zoom-in;
+}
+
+.image-preview-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 3000;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.image-preview-full {
+  max-width: calc(100vw - 48px);
+  max-height: calc(100vh - 48px);
+  object-fit: contain;
+  cursor: zoom-out;
+}
+
 .capture-meta {
   display: flex;
   align-items: center;