整改提案

整改慰问增加骨架屏
整改作品征集
整改困难帮扶

src/main/resources/static/components/plugins/sysFilePreview/H5Index.vue

@@ -3,16 +3,16 @@
     <div class="file-preview-container" v-if="fileList && fileList.length > 0">
       <div class="file-item" v-for="item in fileList" :key="item.id">
         <img
-            v-if="item.suffix === 'jpg' || item.suffix === 'png' || item.suffix === 'jpeg' || item.suffix === 'gif'"
+            v-if="isImageFile(item)"
             :src="item.thumbnail"
-            @click.stop="$commonUtil.previewFile(item)"
+            @click.stop="onPreviewFile(item)"
             class="file-image"
         />
 
         <img
             v-else
             :src="$commonUtil.getFileItemShowIcon(item.suffix)"
-            @click.stop="$commonUtil.previewFile(item)"
+            @click.stop="onPreviewFile(item)"
             class="file-image"
         />
 
@@ -57,7 +57,12 @@ module.exports = {
   },
   data() {
     return {
-      fileList: []
+      fileList: [],
+      imagePreviewInstance: null,
+      imagePreviewContainer: null,
+      imagePreviewHistoryUnsubscribe: null,
+      closingImagePreviewFromHistory: false,
+      imagePreviewLayerName: "h5-file-image-preview"
     }
   },
   methods: {
@@ -103,9 +108,94 @@ module.exports = {
     requestFullFile(ids) {
       this.$axios.post("/platform/sys/file/previewFileData", {ids: JSON.stringify(ids)}).then((res) => {
         if (res.code === 0) {
-          this.fileList = res.data
+          this.$set(this, "fileList", res.data || [])
         }
       })
+    },
+
+    // 判断附件是否为图片；item 传完整文件对象，返回 boolean 类型。
+    isImageFile(item) {
+      const suffix = item && item.suffix ? String(item.suffix).toLowerCase() : ""
+      return ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(suffix)
+    },
+
+    /**
+     * 预览附件。
+     * item 传 previewFileData 返回的文件对象，需包含 id、suffix、downloadPath；方法无返回值。
+     * 图片会与当前附件列表中的其他图片组成轮播，非图片继续使用公共文件预览逻辑。
+     */
+    onPreviewFile(item) {
+      if (!this.isImageFile(item)) {
+        this.$commonUtil.previewFile(item)
+        return
+      }
+      if (this.imagePreviewInstance) return
+      const imageFiles = this.fileList.filter((file) => this.isImageFile(file) && file.downloadPath)
+      const startPosition = imageFiles.findIndex((file) => file.id === item.id)
+      if (startPosition < 0) return
+      const previewContainer = document.createElement("div")
+      previewContainer.style.display = "none"
+      imageFiles.forEach((file) => {
+        const image = document.createElement("img")
+        image.src = file.downloadPath
+        image.alt = file.name || ""
+        previewContainer.appendChild(image)
+      })
+      document.body.appendChild(previewContainer)
+      this.$set(this, "closingImagePreviewFromHistory", false)
+      this.$set(this, "imagePreviewContainer", previewContainer)
+      this.$set(this, "imagePreviewInstance", new Viewer(previewContainer, {
+        zIndex: 99999,
+        title: false,
+        initialViewIndex: startPosition,
+        hidden: () => { this.handleImagePreviewHidden() }
+      }))
+      this.imagePreviewInstance.show()
+      window.h5HistoryLayerManager.open(this.imagePreviewLayerName)
+    },
+
+    // Viewer 完全关闭后销毁实例和临时图片容器，并按关闭来源同步浏览器历史。
+    handleImagePreviewHidden() {
+      const closedFromHistory = this.closingImagePreviewFromHistory
+      this.cleanupImagePreview()
+      if (closedFromHistory) {
+        this.$set(this, "closingImagePreviewFromHistory", false)
+        return
+      }
+      if (window.h5HistoryLayerManager.stack.includes(this.imagePreviewLayerName)) {
+        window.h5HistoryLayerManager.close(this.imagePreviewLayerName)
+      }
+    },
+
+    // 清理 Viewer 实例及其临时 DOM；方法无参数、无返回值。
+    cleanupImagePreview() {
+      const previewInstance = this.imagePreviewInstance
+      const previewContainer = this.imagePreviewContainer
+      this.$set(this, "imagePreviewInstance", null)
+      this.$set(this, "imagePreviewContainer", null)
+      if (previewInstance) previewInstance.destroy()
+      if (previewContainer && previewContainer.parentNode) {
+        previewContainer.parentNode.removeChild(previewContainer)
+      }
+    },
+
+    // 浏览器返回导致图片预览层出栈时，仅关闭预览实例，不再重复回退历史记录。
+    syncImagePreviewHistory(stack) {
+      if (!this.imagePreviewInstance || stack.includes(this.imagePreviewLayerName)) return
+      this.$set(this, "closingImagePreviewFromHistory", true)
+      this.imagePreviewInstance.hide()
+    }
+  },
+  created() {
+    this.$set(this, "imagePreviewHistoryUnsubscribe", window.h5HistoryLayerManager.subscribe((stack) => {
+      this.syncImagePreviewHistory(stack)
+    }))
+  },
+  beforeDestroy() {
+    if (this.imagePreviewHistoryUnsubscribe) this.imagePreviewHistoryUnsubscribe()
+    if (this.imagePreviewInstance || this.imagePreviewContainer) {
+      this.$set(this, "closingImagePreviewFromHistory", true)
+      this.cleanupImagePreview()
     }
   }
 }