更新首页
This commit is contained in:
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="module-detail-page">
|
||||
<PortalHeader :active-path="config.baseRoute" />
|
||||
|
||||
<main class="container module-detail-main">
|
||||
<div class="breadcrumb-bar">
|
||||
<NuxtLink to="/">首页</NuxtLink>
|
||||
<span>/</span>
|
||||
<NuxtLink :to="config.baseRoute">{{ config.title }}</NuxtLink>
|
||||
<span>/</span>
|
||||
<span>{{ entry.title || `${config.title}详情` }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="state-wrap">
|
||||
<a-skeleton active :paragraph="{ rows: 10 }" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="!entry.entryId" class="state-wrap">
|
||||
<a-result status="404" title="内容不存在" sub-title="您查找的内容不存在或已下线">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="navigateTo(config.baseRoute)">返回列表</a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
|
||||
<article v-else class="module-detail-card">
|
||||
<div class="detail-head">
|
||||
<div>
|
||||
<h1>{{ entry.title }}</h1>
|
||||
<p>{{ entry.publishTime || entry.createTime || '' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="config.showImage" class="detail-image">
|
||||
<img :src="resolveSiteAssetUrl(entry.image) || fallbackImage" :alt="entry.title" />
|
||||
</div>
|
||||
|
||||
<div v-if="entry.summary" class="detail-summary">
|
||||
<strong>摘要</strong>
|
||||
<p>{{ entry.summary }}</p>
|
||||
</div>
|
||||
|
||||
<div class="detail-content" v-html="formattedContent" />
|
||||
|
||||
<div v-if="entry.attachmentPath" class="detail-attachment">
|
||||
<a :href="resolveSiteAssetUrl(entry.attachmentPath)" target="_blank">
|
||||
{{ entry.attachmentName || '下载附件' }}
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<PortalFooter />
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getSiteModuleEntry, resolveSiteAssetUrl, type SiteModuleEntry } from '@/api/site'
|
||||
|
||||
type ModuleDetailConfig = {
|
||||
title: string
|
||||
baseRoute: string
|
||||
showImage?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
config: ModuleDetailConfig
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
const entryId = computed(() => route.params.id as string)
|
||||
const fallbackImage = '/images/%E6%97%A0%E5%9B%BE%E7%89%87.png'
|
||||
|
||||
const loading = ref(true)
|
||||
const entry = ref<Partial<SiteModuleEntry>>({})
|
||||
|
||||
const formattedContent = computed(() => {
|
||||
const content = entry.value.content || ''
|
||||
if (!content) {
|
||||
return '<p>暂无正文内容</p>'
|
||||
}
|
||||
if (/<[a-z][\s\S]*>/i.test(content)) {
|
||||
return content
|
||||
}
|
||||
return content
|
||||
.split(/\n+/)
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean)
|
||||
.map((item) => `<p>${item}</p>`)
|
||||
.join('')
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: computed(() => `${entry.value.title || `${props.config.title}详情`} - 广西决策咨询网`),
|
||||
})
|
||||
|
||||
async function loadEntry() {
|
||||
loading.value = true
|
||||
try {
|
||||
entry.value = await getSiteModuleEntry(entryId.value)
|
||||
} catch (error) {
|
||||
entry.value = {}
|
||||
if (!(error instanceof Error && /404/.test(error.message))) {
|
||||
message.error(error instanceof Error ? error.message : '加载失败')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(entryId, loadEntry)
|
||||
onMounted(loadEntry)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.module-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: min(1200px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.module-detail-main {
|
||||
padding: 28px 0 48px;
|
||||
}
|
||||
|
||||
.breadcrumb-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
color: #7d8a98;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.breadcrumb-bar a {
|
||||
color: #4a6fa1;
|
||||
}
|
||||
|
||||
.module-detail-card {
|
||||
padding: 32px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5ebf2;
|
||||
}
|
||||
|
||||
.detail-head h1 {
|
||||
margin: 0 0 10px;
|
||||
color: #1f2d3d;
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.detail-head p {
|
||||
margin: 0;
|
||||
color: #7d8a98;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.detail-image img {
|
||||
width: 100%;
|
||||
max-height: 360px;
|
||||
object-fit: contain;
|
||||
background: #f7f9fb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.detail-summary {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.detail-summary strong {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
color: #1f2d3d;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.detail-summary p,
|
||||
.detail-content {
|
||||
color: #495463;
|
||||
font-size: 15px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.detail-content :deep(p) {
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.detail-attachment {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.detail-attachment a {
|
||||
color: #1f4fa3;
|
||||
}
|
||||
|
||||
.state-wrap {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
background: #1f4fa3;
|
||||
}
|
||||
|
||||
.footer-nav-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 36px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.footer-nav-inner a {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user