129 lines
3.1 KiB
Vue
129 lines
3.1 KiB
Vue
<template>
|
||
<div class="page-container">
|
||
<div class="page-header">
|
||
<h1 class="page-title">文件下载</h1>
|
||
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
|
||
</div>
|
||
<div v-if="!pending" class="page-content">
|
||
<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>
|
||
</div>
|
||
<div v-else>
|
||
<el-skeleton :rows="6" animated />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const localePath = useLocalePath();
|
||
|
||
const breadcrumbItems = [
|
||
{ label: $t('navigation.home'), to: localePath('/') },
|
||
{ label: $t('navigation.downloads'), to: localePath('/downloads') },
|
||
];
|
||
|
||
// 获取路由参数
|
||
const id = computed(() => route.params.id as string);
|
||
|
||
const {
|
||
data: file,
|
||
pending,
|
||
error,
|
||
} = await useFetch<FileMeta>(`/api/file/${id.value}`);
|
||
|
||
if (error.value || !file.value) {
|
||
throw createError({
|
||
statusCode: 404,
|
||
statusMessage: '文件未找到',
|
||
});
|
||
}
|
||
|
||
function handleDownload() {
|
||
const link = document.createElement('a');
|
||
link.href = `/api/download/${id.value}`;
|
||
link.download = file.value?.filename_download ?? 'download';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
}
|
||
|
||
function handlePreview() {
|
||
router.push(`/preview/${id.value}`);
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-container {
|
||
padding: 2rem;
|
||
margin: 0 auto;
|
||
max-width: 1200px;
|
||
}
|
||
|
||
.page-header {
|
||
display: flex;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 2rem;
|
||
font-weight: bold;
|
||
color: var(--el-color-primary);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.breadcrumb {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.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>
|