116 lines
2.6 KiB
Vue
116 lines
2.6 KiB
Vue
<script setup lang="ts">
|
||
import type { FileInfo } from '@/types/api'
|
||
import { fileLabelOf, fileToneOf } from '@/utils/fileMeta'
|
||
import { formatFileSize } from '@/utils/format'
|
||
|
||
interface Props {
|
||
files: FileInfo[]
|
||
showActions?: boolean
|
||
/** 左侧文件类型徽标（设计稿 #28 附件行有，#29/#27 同款） */
|
||
showBadge?: boolean
|
||
}
|
||
|
||
withDefaults(defineProps<Props>(), { showActions: true, showBadge: false })
|
||
|
||
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">
|
||
<span
|
||
v-if="showBadge"
|
||
class="file-list__badge"
|
||
:style="{ color: fileToneOf(file), backgroundColor: `${fileToneOf(file)}1a` }"
|
||
>
|
||
{{ fileLabelOf(file) }}
|
||
</span>
|
||
<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-base;
|
||
border: none;
|
||
border-radius: @radius-sm;
|
||
background: @demand-upload-bg;
|
||
}
|
||
|
||
// 设计稿 #29/#27/#28 附件行：徽标 33.5×33.5。
|
||
&__badge {
|
||
.flex(row, center, center);
|
||
flex-shrink: 0;
|
||
width: 33.5px;
|
||
height: 33.5px;
|
||
border-radius: @radius-sm;
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
&__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>
|