2025-03-13 09:52:18 +08:00
|
|
|
<template>
|
|
|
|
|
<NuxtLayout name="default" :categories="categoryTree">
|
|
|
|
|
<Head>
|
|
|
|
|
<Title>{{ articleData.title }}</Title>
|
|
|
|
|
<Meta name="keywords" :content="articleData.keywords" />
|
|
|
|
|
<Meta name="description" :content="articleData.contentDigest" />
|
|
|
|
|
</Head>
|
|
|
|
|
<div class="content-wrap">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<ArticlePreview :data="articleData"/>
|
|
|
|
|
<!-- 附件 -->
|
|
|
|
|
<div v-if="attachments.length > 0" class="attachment-wrap">
|
|
|
|
|
<h4>本文附件</h4>
|
|
|
|
|
<ul>
|
|
|
|
|
<li v-for="attach of attachments" :key="attach.uid">
|
|
|
|
|
<a :href="$getAttachURL(attach.fileKey, attach.name)" target="_blank">
|
|
|
|
|
<el-icon><Document /></el-icon>
|
|
|
|
|
<span>{{ attach.name }}</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</NuxtLayout>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { definePageMeta } from '#imports'
|
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
|
import { Document } from '@element-plus/icons-vue'
|
|
|
|
|
import ArticlePreview from '@/components/cms/ArticlePreview'
|
|
|
|
|
import { fetchTemplateData } from '@/api/cms/template'
|
|
|
|
|
import { strictPackage } from '@/utils/util'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: { ArticlePreview, Document },
|
|
|
|
|
async setup () {
|
|
|
|
|
// 去掉默认布局
|
|
|
|
|
definePageMeta({
|
|
|
|
|
layout: false,
|
|
|
|
|
})
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const data = strictPackage(await fetchTemplateData({
|
|
|
|
|
path: '/article/[articleUid].vue',
|
|
|
|
|
parameters: {
|
|
|
|
|
articleUid: route.params.articleUid,
|
|
|
|
|
mode: route.query.mode
|
|
|
|
|
}
|
|
|
|
|
}))
|
|
|
|
|
return {
|
|
|
|
|
// 栏目树
|
|
|
|
|
categoryTree: data.CATEGORIES_TREE,
|
|
|
|
|
// 文章数据
|
|
|
|
|
articleData: data.ARTICLE_DETAIL,
|
|
|
|
|
// 附件列表
|
|
|
|
|
attachments: data.ARTICLE_DETAIL.attachments == null ?
|
|
|
|
|
[] : JSON.parse(data.ARTICLE_DETAIL.attachments)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.content-wrap {
|
|
|
|
|
background: var(--color-white);
|
2025-03-13 10:14:57 +08:00
|
|
|
padding: 30px;
|
2025-03-13 09:52:18 +08:00
|
|
|
.content {
|
|
|
|
|
border: 1px solid var(--border-color);
|
|
|
|
|
// 附件
|
|
|
|
|
.attachment-wrap {
|
|
|
|
|
border-top: 1px solid var(--border-color);
|
2025-03-13 10:14:57 +08:00
|
|
|
padding: 20px 30px;
|
2025-03-13 09:52:18 +08:00
|
|
|
h4 {
|
|
|
|
|
color: var(--primary-color-dark);
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
ul {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
li {
|
|
|
|
|
padding: 3px 0;
|
|
|
|
|
a {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: var(--primary-color);
|
|
|
|
|
&:hover {
|
|
|
|
|
color: var(--primary-color-light);
|
|
|
|
|
}
|
|
|
|
|
.el-icon {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
