style(项目管理): 优化文件管理预览模式的显示方式，图片使用平铺布局

--bug=1027207 --user=宋天阳 【项目设置】文件管理-图片预览-显示问题
https://www.tapd.cn/55049933/s/1386729

framework/sdk-parent/sdk/src/main/resources/i18n/commons_zh_CN.properties

@@ -382,5 +382,5 @@ name_already_exists_in_module=同层级下已经存在
 target_issue_template_not_checked=无法复制，未选中目标项目
 source_issue_template_is_empty=复制错误，源项目为空
 select_resource_error_and_check=查找资源出错，请检查资源是否存在
-load_test_file_not_have_jmx=性能測試里的JMX文件不存在
+load_test_file_not_have_jmx=性能测试里的JMX文件不存在
 load_test_file_is_not_jmx=性能测试里的JMX文件不合法

project-management/frontend/src/business/menu/file/edit/EditFileMetadata.vue

@@ -509,6 +509,8 @@ export default {
       this.isFirst = index <= 0;
       if (!this.isFirst) {
         this.data = this.results[index - 1];
+        this.fileBase64Str = '';
+        this.isImage(this.data);
       } else {
         if (this.currentPage === 1) {
           this.$warning(this.$t("project.file_first"));
@@ -516,6 +518,8 @@ export default {
           // 向上翻页
           this.currentPage--;
           this.getProjectFiles(true);
+          this.fileBase64Str = '';
+          this.isImage(this.data);
         }
       }
     },
@@ -541,6 +545,8 @@ export default {
       this.isLast = this.results.length - 1 === index;
       if (!this.isLast) {
         this.data = this.results[index + 1];
+        this.fileBase64Str = '';
+        this.isImage(this.data);
       } else {
         let totalPages = Math.ceil(this.total / this.pageSize);
         if (totalPages === this.currentPage) {
@@ -549,6 +555,8 @@ export default {
           // 向后翻页
           this.currentPage++;
           this.getProjectFiles(false);
+          this.fileBase64Str = '';
+          this.isImage(this.data);
         }
       }
     },

project-management/frontend/src/business/menu/file/list/FileThumbnail.vue

@@ -4,8 +4,10 @@
       <el-row :gutter="20">
         <el-col :span="4" v-for="item in data" :key="item.id">
           <el-card :body-style="{ padding: '0px' }" class="ms-card-item" @click.native="handleView(item)">
-            <div v-loading="fileBase64Str==='' || fileBase64Str === 'loading'" v-if="isImage(item)">
-              <img :src="fileBase64Str" class="ms-edit-image"/>
+            <div v-loading="imageContents[item.id]==='' || imageContents[item.id] === 'loading'" class="ms-image"
+                 v-if="isImage(item)">
+              <img style="height: 100%;width: 100%;object-fit:cover;background-color: #FFFFFF"
+                   :src="imageContents[item.id]"/>
             </div>
             <div class="ms-image" v-else>
               <div class="ms-file">
@@ -47,7 +49,7 @@ export default {
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      fileBase64Str: '',
+      imageContents: {},
       images: ["bmp", "jpg", "png", "tif", "gif", "pcx", "tga", "exif", "fpx", "svg", "psd", "cdr", "pcd", "dxf", "ufo", "eps", "ai", "raw", "WMF", "webp", "avif", "apng", "jpeg"]
     };
   },
@@ -60,7 +62,7 @@ export default {
     nodeTree: []
   },
   created() {
-    this.fileBase64Str = '';
+    this.imageContents = {};
     this.currentPage = this.page;
     this.pageSize = this.size;
     this.total = this.pageTotal;
@@ -91,18 +93,17 @@ export default {
       return type || "";
     },
     change() {
-      this.fileBase64Str = '';
       this.$emit("change", this.pageSize, this.currentPage);
     },
     isImage(item) {
       let type = item.type;
       let isImage = (type && this.images.indexOf(type.toLowerCase()) !== -1);
       if (isImage) {
-        if (isImage && this.fileBase64Str === '') {
-          this.fileBase64Str = 'loading';
+        if (isImage && (!this.imageContents[item.id] || this.imageContents[item.id] === '')) {
+          this.$set(this.imageContents, item.id, "loading");
           getFileBytes(item.id).then(res => {
             let fileRsp = res.data;
-            this.fileBase64Str = "data:image/png;base64," + fileRsp.bytes;
+            this.$set(this.imageContents, item.id, "data:image/png;base64," + fileRsp.bytes);
           })
         }
       }