84 lines
2.0 KiB
Vue
84 lines
2.0 KiB
Vue
<template>
|
||
<el-card shadow="hover" class="p-4">
|
||
<template #header>
|
||
<div class="header-content">
|
||
<el-icon class="header-icon"><ElIconDocument /></el-icon>
|
||
<span class="truncate font-medium">{{ file.filename_download }}</span>
|
||
</div>
|
||
</template>
|
||
<dl class="text-gray-600 space-y-1 mb-6">
|
||
<div>
|
||
<dt class="font-semibold inline">类型：</dt>
|
||
<dd class="inline">{{ file.type }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt class="font-semibold inline">大小：</dt>
|
||
<dd class="inline">{{ formatFileSize(file.filesize) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt class="font-semibold inline">上传时间：</dt>
|
||
<dd class="inline">
|
||
{{ new Date(file.uploaded_on).toLocaleDateString() }}
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
<template #footer>
|
||
<div class="button-group">
|
||
<el-button type="primary" @click="handleDownload">下载</el-button>
|
||
<el-button v-if="file.previewable" @click="handlePreview"
|
||
>预览</el-button
|
||
>
|
||
</div>
|
||
</template>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const props = defineProps({
|
||
fileId: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
file: {
|
||
type: Object as PropType<FileMeta>,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
const localePath = useLocalePath();
|
||
const router = useRouter();
|
||
|
||
function handleDownload() {
|
||
const link = document.createElement('a');
|
||
link.href = `/api/download/${props.fileId}`;
|
||
link.download = props.file?.filename_download ?? 'download';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
}
|
||
|
||
function handlePreview() {
|
||
router.push(localePath(`/preview/${props.fileId}`));
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.header-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.header-icon {
|
||
font-size: 1.5rem;
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
.button-group {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: baseline;
|
||
gap: 1rem;
|
||
}
|
||
</style>
|