chore: 优化文件管理部分显示效果

src/assets/icons/directory-blue.svg

@@ -0,0 +1,9 @@
+<svg t="1657792221683" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="45354" width="200" height="200">
+  <path
+    d="M1196.987733 212.5824v540.0576c0 39.594667-34.474667 71.3728-76.765866 71.3728H323.242667c-51.780267 0-88.746667-46.762667-73.250134-92.808533l126.737067-375.808H70.417067C31.675733 355.362133 0 326.4512 0 291.089067V98.372267C0 63.044267 31.675733 34.0992 70.417067 34.0992h378.811733c26.7264 0 51.029333 13.9264 63.010133 35.703467l39.048534 71.406933H1120.256c42.257067 0 76.8 32.119467 76.8 71.3728"
+    fill="#5398DF" p-id="45355"></path>
+  <path
+    d="M1128.721067 997.853867H68.266667a68.266667 68.266667 0 0 1-68.266667-68.266667V280.3712a68.266667 68.266667 0 0 1 68.266667-68.266667h1060.4544a68.266667 68.266667 0 0 1 68.266666 68.266667V929.5872a68.266667 68.266667 0 0 1-68.266666 68.266667"
+    fill="#85BCFF" p-id="45356"></path>
+</svg>

src/assets/icons/directory-open-blue.svg

@@ -0,0 +1,12 @@
+<svg t="1657792062684" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="34419" width="200" height="200">
+  <path
+    d="M0 128a51.2 51.2 0 0 1 51.2-51.2h350.24a51.2 51.2 0 0 1 47.0592 31.0336L473.6 166.4h499.2a51.2 51.2 0 0 1 51.2 51.2v537.6a51.2 51.2 0 0 1-51.2 51.2H51.2a51.2 51.2 0 0 1-51.2-51.2V128z"
+    fill="#5398DF" p-id="34420"></path>
+  <path
+    d="M89.6 249.6m51.2 0l742.4 0q51.2 0 51.2 51.2l0 460.8q0 51.2-51.2 51.2l-742.4 0q-51.2 0-51.2-51.2l0-460.8q0-51.2 51.2-51.2Z"
+    fill="#FFFFFF" p-id="34421"></path>
+  <path
+    d="M0 332.8m51.2 0l921.6 0q51.2 0 51.2 51.2l0 512q0 51.2-51.2 51.2l-921.6 0q-51.2 0-51.2-51.2l0-512q0-51.2 51.2-51.2Z"
+    fill="#85BCFF" p-id="34422"></path>
+</svg>

src/assets/icons/directory-open.svg

@@ -0,0 +1,12 @@
+<svg t="1657792062684" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="34419" width="200" height="200">
+  <path
+    d="M0 128a51.2 51.2 0 0 1 51.2-51.2h350.24a51.2 51.2 0 0 1 47.0592 31.0336L473.6 166.4h499.2a51.2 51.2 0 0 1 51.2 51.2v537.6a51.2 51.2 0 0 1-51.2 51.2H51.2a51.2 51.2 0 0 1-51.2-51.2V128z"
+    fill="#FFA000" p-id="34420"></path>
+  <path
+    d="M89.6 249.6m51.2 0l742.4 0q51.2 0 51.2 51.2l0 460.8q0 51.2-51.2 51.2l-742.4 0q-51.2 0-51.2-51.2l0-460.8q0-51.2 51.2-51.2Z"
+    fill="#FFFFFF" p-id="34421"></path>
+  <path
+    d="M0 332.8m51.2 0l921.6 0q51.2 0 51.2 51.2l0 512q0 51.2-51.2 51.2l-921.6 0q-51.2 0-51.2-51.2l0-512q0-51.2 51.2-51.2Z"
+    fill="#FFCA28" p-id="34422"></path>
+</svg>

src/assets/icons/directory.svg

@@ -0,0 +1,9 @@
+<svg t="1657792221683" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="45354" width="200" height="200">
+  <path
+    d="M1196.987733 212.5824v540.0576c0 39.594667-34.474667 71.3728-76.765866 71.3728H323.242667c-51.780267 0-88.746667-46.762667-73.250134-92.808533l126.737067-375.808H70.417067C31.675733 355.362133 0 326.4512 0 291.089067V98.372267C0 63.044267 31.675733 34.0992 70.417067 34.0992h378.811733c26.7264 0 51.029333 13.9264 63.010133 35.703467l39.048534 71.406933H1120.256c42.257067 0 76.8 32.119467 76.8 71.3728"
+    fill="#FFA000" p-id="45355"></path>
+  <path
+    d="M1128.721067 997.853867H68.266667a68.266667 68.266667 0 0 1-68.266667-68.266667V280.3712a68.266667 68.266667 0 0 1 68.266667-68.266667h1060.4544a68.266667 68.266667 0 0 1 68.266666 68.266667V929.5872a68.266667 68.266667 0 0 1-68.266666 68.266667"
+    fill="#FFCA28" p-id="45356"></path>
+</svg>

src/views/system/file/components/FileDetailModal/ModalContent.vue

@@ -5,8 +5,9 @@
     </div>
   </a-row>
   <a-row style="margin-top: 15px">
-    <a-descriptions :column="1" title="详细信息" layout="inline-vertical">
+    <a-descriptions :column="1" layout="inline-vertical">
-      <a-descriptions-item :label="data.name">{{ formatFileSize(data.size) }}</a-descriptions-item>
+      <a-descriptions-item label="名称">{{ getFileName(data) }}</a-descriptions-item>
+      <a-descriptions-item label="大小">{{ formatFileSize(data.size) }}</a-descriptions-item>
       <a-descriptions-item label="创建时间">{{ data.createTime }}</a-descriptions-item>
       <a-descriptions-item label="修改时间">{{ data.updateTime }}</a-descriptions-item>
     </a-descriptions>
@@ -23,6 +24,11 @@ interface Props {
 }
 
 withDefaults(defineProps<Props>(), {})
+
+// 文件名称带后缀
+const getFileName = (item: FileItem) => {
+  return `${item.name}${item.extension ? `.${item.extension}` : ''}`
+}
 </script>
 
 <style lang="less" scoped>

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

@@ -27,7 +27,7 @@
                 <div class="file-image">
                   <FileImage :data="record"></FileImage>
                 </div>
-                <span>{{ record.name }}</span>
+                <span>{{ getFileName(record) }}</span>
               </section>
               <template #content>
                 <FileRightMenu :data="record" @click="handleRightMenuClick($event, record)"></FileRightMenu>
@@ -35,14 +35,9 @@
             </a-trigger>
           </template>
         </a-table-column>
-        <a-table-column title="文件大小" data-index="size" :width="150">
+        <a-table-column title="大小" data-index="size" :width="150">
           <template #cell="{ record }">{{ formatFileSize(record.size) }}</template>
         </a-table-column>
-        <a-table-column title="扩展名" data-index="extension" :width="100">
-          <template #cell="{ record }">
-            <a-tag v-if="record.extension" size="small" color="purple">{{ record.extension }}</a-tag>
-          </template>
-        </a-table-column>
         <a-table-column title="修改时间" data-index="updateTime" :width="200"></a-table-column>
         <a-table-column title="操作" :width="120" align="center">
           <template #cell="{ record }">
@@ -88,6 +83,11 @@ const emit = defineEmits<{
   (e: 'right-menu-click', mode: string, item: FileItem): void
 }>()
 
+// 文件名称带后缀
+const getFileName = (item: FileItem) => {
+  return `${item.name}${item.extension ? `.${item.extension}` : ''}`
+}
+
 const rowSelection: TableRowSelection = reactive({
   type: 'checkbox',
   showCheckedAll: true