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

Author: Charles7c

src/assets/icons/directory-blue.svg

@@ -5,8 +5,9 @@
     </div>
   </a-row>
   <a-row style="margin-top: 15px">
-    <a-descriptions :column="1" title="详细信息" layout="inline-vertical">
-      <a-descriptions-item :label="data.name">{{ formatFileSize(data.size) }}</a-descriptions-item>
+    <a-descriptions :column="1" layout="inline-vertical">
+      <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/assets/icons/directory-open-blue.svg

@@ -27,22 +27,17 @@
                 <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>
               </template>
             </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