94 lines
2.0 KiB
Vue
94 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import type { FileInfo } from '@/types/api'
|
|
import { formatFileSize } from '@/utils/format'
|
|
|
|
interface Props {
|
|
files: FileInfo[]
|
|
showActions?: boolean
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), { showActions: true })
|
|
|
|
const emit = defineEmits<{
|
|
preview: [file: FileInfo]
|
|
download: [file: FileInfo]
|
|
delete: [file: FileInfo]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<ul v-if="files.length > 0" class="file-list">
|
|
<li v-for="(file, index) in files" :key="`${file.name}-${index}`" class="file-list__item">
|
|
<div class="file-list__info">
|
|
<span class="file-list__name" :title="file.name">{{ file.name }}</span>
|
|
<span class="file-list__meta text-secondary">
|
|
{{ formatFileSize(file.size) }} · 上传于{{ file.uploadTime }}
|
|
</span>
|
|
</div>
|
|
<div v-if="showActions" class="file-list__actions">
|
|
<button class="file-list__btn" @click="emit('preview', file)">
|
|
预览
|
|
</button>
|
|
<button class="file-list__btn" @click="emit('download', file)">
|
|
下载
|
|
</button>
|
|
<button class="file-list__btn file-list__btn--danger" @click="emit('delete', file)">
|
|
删除
|
|
</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.file-list {
|
|
.flex(column, flex-start);
|
|
gap: @spacing-sm;
|
|
|
|
&__item {
|
|
.flex(row, space-between);
|
|
gap: @spacing-base;
|
|
padding: @spacing-sm @spacing-base;
|
|
border: 1px solid @border-color;
|
|
border-radius: @radius-base;
|
|
background: @bg-color-light;
|
|
}
|
|
|
|
&__info {
|
|
.flex(column, flex-start);
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
&__name {
|
|
font-size: @font-size-base;
|
|
color: @heading-color;
|
|
.ellipsis();
|
|
}
|
|
|
|
&__meta {
|
|
font-size: @font-size-sm;
|
|
}
|
|
|
|
&__actions {
|
|
.flex(row, center);
|
|
gap: @spacing-sm;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__btn {
|
|
font-size: @font-size-sm;
|
|
color: @primary-color;
|
|
transition: opacity 0.2s;
|
|
|
|
&:hover {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
&--danger {
|
|
color: @danger-color;
|
|
}
|
|
}
|
|
}
|
|
</style>
|