76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<template>
|
|
<div class="page-container">
|
|
<div class="page-header">
|
|
<h1 class="page-title">{{ $t('navigation.downloads') }}</h1>
|
|
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
|
|
</div>
|
|
<div class="page-content">
|
|
<el-skeleton
|
|
:loading="pending"
|
|
:rows="6"
|
|
animated
|
|
:throttle="{ leading: 500, trailing: 500 }"
|
|
>
|
|
<template #default>
|
|
<file-card :file-id="id" :file="file" />
|
|
</template>
|
|
</el-skeleton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute();
|
|
const localePath = useLocalePath();
|
|
|
|
const breadcrumbItems = [
|
|
{ label: $t('navigation.home'), to: localePath('/') },
|
|
{ label: $t('navigation.support'), to: localePath('/support') },
|
|
{ label: $t('navigation.documents'), to: localePath('/support/documents') },
|
|
{ label: $t('navigation.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: '文件未找到',
|
|
});
|
|
}
|
|
|
|
const pageTitle = $t('page-title.download');
|
|
usePageSeo({
|
|
title: file.value.filename_download || pageTitle,
|
|
});
|
|
</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>
|