63 lines
1.2 KiB
Vue
63 lines
1.2 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">
|
|
<file-card :file-id="id" :file="file" />
|
|
</div>
|
|
<div v-else>
|
|
<el-skeleton :rows="6" animated />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute();
|
|
const localePath = useLocalePath();
|
|
|
|
const breadcrumbItems = [
|
|
{ label: $t('navigation.home'), to: localePath('/') },
|
|
{ label: $t('navigation.downloads'), to: localePath('/downloads') },
|
|
];
|
|
|
|
const id = route.params.id as string;
|
|
|
|
const {
|
|
data: file,
|
|
pending,
|
|
error,
|
|
} = await useFetch<FileMeta>(`/api/file/${id}`);
|
|
|
|
if (error.value || !file.value) {
|
|
throw createError({
|
|
statusCode: 404,
|
|
statusMessage: '文件未找到',
|
|
});
|
|
}
|
|
</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;
|
|
}
|
|
</style>
|