style(文件管理): 文件后缀优化显示

--bug=1016286 --user=赵勇 除了图片外，不能预览的展示文件类型，如JAR、XLSX https://www.tapd.cn/55049933/s/1233267

backend/src/main/java/io/metersphere/metadata/controller/FileMetadataController.java

@@ -108,4 +108,8 @@ public class FileMetadataController {
         return fileMetadataService.myFiles(createUser, projectId);
     }
 
+    @GetMapping(value = "/exist/{fileId}")
+    public boolean exist(@PathVariable("fileId") String fileId) {
+        return fileMetadataService.exist(fileId);
+    }
 }

backend/src/main/java/io/metersphere/metadata/service/FileMetadataService.java

@@ -426,4 +426,8 @@ public class FileMetadataService {
             fileMetadata.setUpdateUser(SessionUtils.getUserId());
         }
     }
+
+    public boolean exist(String fileId) {
+        return fileMetadataMapper.selectByPrimaryKey(fileId) != null;
+    }
 }

frontend/src/business/components/api/automation/scenario/variable/CsvFileUpload.vue

@@ -32,11 +32,12 @@
                 <i class="el-icon-plus" slot="reference"/>
               </el-popover>
             </div>
-            <div class="upload-item" slot="file" slot-scope="{file}">
+            <div class="upload-item" slot="file" slot-scope="{file}" v-loading="loading">
               <span>{{ file.file && file.file.name ? file.file.name : file.name }}</span>
               <span class="el-upload-list__item-actions" v-if="file.storage === 'FILE_REF'">
                   <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleUnlock(file)">
                     <i class="el-icon-unlock"/>
+                    <span style="font-size: 13px">{{ file.isExist ? '文件已经被删除' : '' }}</span>
                   </span>
               </span>
               <span class="el-upload-list__item-actions" v-else>
@@ -56,7 +57,6 @@
       </el-row>
           <ms-file-batch-move ref="module" @setModuleId="setModuleId"/>
     <ms-file-metadata-list ref="metadataList" @checkRows="checkRows"/>
-
     </span>
 </template>
 
@@ -71,6 +71,7 @@ export default {
   data() {
     return {
       disabled: false,
+      loading: false,
     };
   },
   components: {
@@ -83,7 +84,19 @@ export default {
       return {}
     }
   },
+  mounted() {
+    this.exist();
+  },
   methods: {
+    exist() {
+      this.loading = true;
+      this.parameter.files.forEach(file => {
+        this.$get('/file/metadata/exist/' + file.fileId, response => {
+          file.isExist = !response.data;
+          this.loading = false;
+        });
+      });
+    },
     setModuleId(moduleId) {
       let files = [];
       if (this.file && this.file.file) {
@@ -203,6 +216,7 @@ export default {
     if (!this.parameter.files) {
       this.parameter.files = [];
     }
+    this.exist();
   }
 }
 </script>

frontend/src/business/components/api/definition/components/body/ApiBodyFileUpload.vue

@@ -27,11 +27,12 @@
     </div>
     <div class="upload-item" slot="file" slot-scope="{file}">
       <span>{{ file.file && file.file.name ? file.file.name : file.name }}</span>
-      <span class="el-upload-list__item-actions" v-if="file.storage === 'FILE_REF'">
-          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
-            <i class="el-icon-unlock"/>
-          </span>
-      </span>
+        <span v-if="file.storage === 'FILE_REF'" class="el-upload-list__item-actions">
+            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                <i class="el-icon-unlock"/>
+                <span style="font-size: 13px">{{ file.isExist ? '文件已经被删除' : '' }}</span>
+            </span>
+        </span>
       <span class="el-upload-list__item-actions" v-else>
           <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleUpload(file)">
             <i class="el-icon-upload" style="font-size: 23px"/>
@@ -73,6 +74,13 @@ export default {
     }
   },
   methods: {
+    exist() {
+      this.parameter.files.forEach(file => {
+        this.$get('/file/metadata/exist/' + file.fileId, response => {
+          file.isExist = !response.data;
+        });
+      });
+    },
     setModuleId(moduleId) {
       let files = [];
       if (this.file && this.file.file) {
@@ -125,6 +133,7 @@ export default {
     if (!this.parameter.files) {
       this.parameter.files = [];
     }
+    this.exist();
   }
 }
 </script>

frontend/src/business/components/project/menu/file/edit/EditFileMetadata.vue

@@ -200,7 +200,7 @@ export default {
       });
     },
     getType(type) {
-      return type ? type.substr(0, 1).toUpperCase() : "";
+      return type || "";
     },
     isImage(type) {
       return (type && this.images.indexOf(type.toLowerCase()) !== -1);
@@ -332,7 +332,7 @@ export default {
 .icon-title {
   color: #fff;
   text-align: center;
-  font-size: 22px;
+  font-size: 16px;
 }
 
 

frontend/src/business/components/project/menu/file/list/FileThumbnail.vue

@@ -44,7 +44,7 @@ export default {
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      images: ["bmp", "jpg", "png", "tif", "gif", "pcx", "tga", "exif", "fpx", "svg", "psd", "cdr", "pcd", "dxf", "ufo", "eps", "ai", "raw", "WMF", "webp", "avif", "apng","jpeg"]
+      images: ["bmp", "jpg", "png", "tif", "gif", "pcx", "tga", "exif", "fpx", "svg", "psd", "cdr", "pcd", "dxf", "ufo", "eps", "ai", "raw", "WMF", "webp", "avif", "apng", "jpeg"]
     };
   },
   props: {
@@ -83,7 +83,7 @@ export default {
       this.$refs.editMetadata.open(row, this.pageSize, this.currentPage, this.total);
     },
     getType(type) {
-      return type ? type.substr(0, 1).toUpperCase() : "X";
+      return type || "";
     },
     change() {
       this.$emit("change", this.pageSize, this.currentPage);
@@ -114,7 +114,7 @@ export default {
 
 .ms-file {
   text-align: center;
-  padding-top: 90px
+  padding-top: 85px
 }
 
 .ms-file-name-width {
@@ -132,7 +132,7 @@ export default {
 .icon-title {
   color: #fff;
   text-align: center;
-  font-size: 22px;
+  font-size: 16px;
 }