gxwebsoft
2b69686795
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
85 lines
3.2 KiB
Vue
85 lines
3.2 KiB
Vue
<template>
|
||
<div class="min-h-screen bg-white py-10">
|
||
<div class="t9-container">
|
||
<div v-if="article" class="max-w-4xl mx-auto">
|
||
<!-- 面包屑 -->
|
||
<div class="mb-6 text-sm" style="color: var(--t9-muted)">
|
||
<NuxtLink to="/" class="hover:text-[var(--t9-primary)] transition-colors">首页</NuxtLink>
|
||
<span class="mx-2">></span>
|
||
<NuxtLink :to="`/article${article?.navigationId ? '?navId=' + article.navigationId : ''}`" class="hover:text-[var(--t9-primary)] transition-colors">
|
||
{{ article.categoryName || '新闻中心' }}
|
||
</NuxtLink>
|
||
<span class="mx-2">></span>
|
||
<span>正文</span>
|
||
</div>
|
||
|
||
<h1 class="text-2xl sm:text-[28px] font-bold leading-relaxed text-center" style="color: var(--t9-text-strong)">
|
||
{{ article.title }}
|
||
</h1>
|
||
|
||
<div
|
||
class="flex flex-wrap items-center justify-center gap-5 text-sm mt-5 pb-5 border-b"
|
||
style="color: var(--t9-muted); border-color: var(--t9-border)"
|
||
>
|
||
<span>{{ formatDate(article.publishTime || article.createTime) }}</span>
|
||
<span v-if="article.author">作者：{{ article.author }}</span>
|
||
<span v-if="article.source">来源：{{ article.source }}</span>
|
||
<span v-if="article.categoryName" style="color: var(--t9-primary)">{{ article.categoryName }}</span>
|
||
</div>
|
||
|
||
<div v-if="article.image || article.cover" class="mt-8 overflow-hidden bg-[var(--t9-bg-gray)]">
|
||
<img
|
||
:src="fileUrl(article.image || article.cover)"
|
||
:alt="article.title"
|
||
class="w-full h-auto object-cover"
|
||
>
|
||
</div>
|
||
|
||
<div class="mt-8">
|
||
<RichText :content="article.content" />
|
||
<PageAttachments
|
||
v-if="article?.files?.length"
|
||
:attachments="article.files"
|
||
/>
|
||
</div>
|
||
|
||
<div class="mt-10 pt-6 border-t" style="border-color: var(--t9-border)">
|
||
<NuxtLink
|
||
:to="`/article${article?.navigationId ? '?navId=' + article.navigationId : ''}`"
|
||
class="inline-block px-6 py-2 text-sm border transition-colors hover:text-white hover:bg-[var(--t9-primary)] hover:border-[var(--t9-primary)]"
|
||
style="color: var(--t9-text); border-color: var(--t9-border-2)"
|
||
>
|
||
返回列表
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="text-center py-20">
|
||
<h1 class="text-2xl font-bold mb-4" style="color: var(--t9-text-strong)">文章不存在或已下架</h1>
|
||
<NuxtLink :to="`/article${article?.navigationId ? '?navId=' + article.navigationId : ''}`" class="hover:underline" style="color: var(--t9-primary)">返回新闻列表</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import dayjs from 'dayjs'
|
||
import type { Article } from '~/types'
|
||
|
||
/**
|
||
* 模板 9 - 新闻详情页（墨绿文化出版风）
|
||
*/
|
||
const route = useRoute()
|
||
const id = route.params.id as string
|
||
const { fileUrl } = useFileUrl()
|
||
|
||
const { data: article } = await useFetch<Article | null>(`/api/article/detail?id=${id}`, {
|
||
key: `article-${id}`
|
||
})
|
||
|
||
function formatDate(date?: string) {
|
||
if (!date) return ''
|
||
return dayjs(date).format('YYYY-MM-DD')
|
||
}
|
||
</script>
|