feat: 新增文件管理

src/views/system/file/main/FileMain/FileImage.vue

@@ -0,0 +1,41 @@
+<template>
+  <img v-if="isImage" class="file-image" :src="props.data.url" alt="" />
+  <GiSvgIcon v-else size="100%" :name="getFileImg"></GiSvgIcon>
+</template>
+
+<script setup lang="ts">
+import { FileIcon, ImageTypes } from '@/constant/file'
+import type { FileItem } from '@/apis'
+
+interface Props {
+  data: FileItem
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+// 是否是图片类型文件
+const isImage = computed(() => {
+  const extension = props.data.extension.toLowerCase()
+  return ImageTypes.includes(extension)
+})
+
+// 获取文件图标，如果是图片就显示图片
+const getFileImg = computed<string>(() => {
+  const extension = props.data.extension.toLowerCase()
+  if (ImageTypes.includes(extension)) {
+    return props.data.url || ''
+  }
+  if (!Object.keys(FileIcon).includes(extension)) {
+    return FileIcon['other']
+  }
+  return FileIcon[extension]
+})
+</script>
+
+<style lang="scss" scoped>
+.file-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>