95 lines
2.1 KiB
Vue
95 lines
2.1 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;
|
||
|
||
// 设计稿（06/07 附件条）：实底 #EDEDED 灰条、无描边
|
||
&__item {
|
||
.flex(row, space-between);
|
||
gap: @spacing-base;
|
||
padding: @spacing-base;
|
||
border: none;
|
||
border-radius: @radius-sm;
|
||
background: @demand-upload-bg;
|
||
}
|
||
|
||
&__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>
|