文件样式修改

src/views/common/FileOrImageDisplay.vue

@@ -11,8 +11,15 @@
 
             <!-- 图片类型 -->
             <div v-else-if="imageUrl" class="image-display" @click="handleImageClick">
-                <el-image :src="imageUrl" :preview-src-list="finalPreviewList" class="license-image" fit="cover"
+                <el-image
-                    hide-on-click-modal>
+                    :src="imageUrl"
+                    :preview-src-list="finalPreviewList"
+                    class="license-image"
+                    fit="fill"
+                    hide-on-click-modal
+                    :style="imageStyle"
+                    @load="handleImageLoad"
+                >
                     <div slot="error" class="image-error">
                         <i class="el-icon-picture"></i>
                         <span>图片加载失败</span>
@@ -52,6 +59,7 @@ export default {
             documentKey: '',
             mode: 'view',
             type: 'desktop',
+            imageDimensions: null,
         }
     },
     props: {
@@ -112,7 +120,22 @@ export default {
         // 最终预览列表
         finalPreviewList() {
             return this.previewSrcList.length > 0 ? this.previewSrcList : [this.imageUrl]
-        }
+        },
+        imageStyle() {
+            if (!this.imageDimensions) {
+                return {}
+            }
+            const maxWidth = 600
+            const maxHeight = 400
+            const widthRatio = maxWidth / this.imageDimensions.width
+            const heightRatio = maxHeight / this.imageDimensions.height
+            const ratio = Math.min(widthRatio, heightRatio, 1)
+
+            return {
+                width: `${Math.round(this.imageDimensions.width * ratio)}px`,
+                height: `${Math.round(this.imageDimensions.height * ratio)}px`
+            }
+        },
     },
     methods: {
         // 文件点击事件
@@ -126,6 +149,15 @@ export default {
         handleImageClick() {
             this.$emit('image-click', this.imageUrl)
         },
+        handleImageLoad(event) {
+            const { naturalWidth, naturalHeight } = event?.target || {}
+            if (naturalWidth && naturalHeight) {
+                this.imageDimensions = {
+                    width: naturalWidth,
+                    height: naturalHeight
+                }
+            }
+        },
         handleDocumentReady() {
             console.log('文档已准备就绪')
         },
@@ -138,6 +170,11 @@ export default {
         handleInitialized() {
             console.log('初始化完成')
         },
+    },
+    watch: {
+        imageUrl() {
+            this.imageDimensions = null
+        }
     }
 }
 </script>
@@ -215,10 +252,10 @@ export default {
             }
 
             .license-image {
-                width: 60%;
+                width: auto;
-                height: 60%;
+                height: auto;
-                max-width: 60%;
+                max-width: 100%;
-                max-height: 60%;
+                max-height: 100%;
                 display: block;
                 border-radius: 8px;
                 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);