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

This commit is contained in:
2024-05-14 21:46:39 +08:00
parent 4eef0db9f9
commit 7a2c66e646
6 changed files with 57 additions and 9 deletions

View File

@@ -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>

View File

@@ -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