feat(app): 添加多模板关于我们页面及相关路由和404页面

- 新增404页面,优化未找到页面体验,避免被搜索引擎索引
- 增加文件代理接口,隐藏真实文件服务器地址,支持文件请求代理
- 实现/article、/case、/product及/page动态路由兼容列表与详情展示
- 添加动态CMS页面兼容入口处理旧式路径,统一路由与SEO设置
- 新增模板1、模板7、模板2、模板3关于我们页面,实现多模板支持
- 模板增强支持CMS单页内容加载及SEO信息动态设置
- 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
This commit is contained in:
2026-09-08 12:13:44 +08:00
commit 2b69686795
381 changed files with 59891 additions and 0 deletions
@@ -0,0 +1,63 @@
<template>
<div class="min-h-screen py-16 bg-[#faf6ef]">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div v-if="article" class="max-w-4xl mx-auto">
<div class="mb-8">
<NuxtLink :to="`/article${article?.navigationId ? '?navId=' + article.navigationId : ''}`" class="text-sm text-[#8a7d6b] hover:text-[#8b6f47]"> 返回新闻列表</NuxtLink>
</div>
<h1 class="text-3xl sm:text-4xl font-bold text-[#4a3f35] mb-4">
{{ article.title }}
</h1>
<div class="flex flex-wrap items-center gap-4 text-sm text-[#8a7d6b] mb-8 pb-8 border-b border-[#e8e0d4]">
<span v-if="article.categoryName" class="px-3 py-1 bg-[#f0e6d8] text-[#8b6f47] rounded-full">
{{ article.categoryName }}
</span>
<span>发布时间{{ formatDate(article.publishTime || article.createTime) }}</span>
<span v-if="article.author">作者{{ article.author }}</span>
</div>
<div v-if="article.image || article.cover" class="aspect-video bg-[#f3ebde] rounded-3xl overflow-hidden mb-10">
<img
:src="fileUrl(article.image || article.cover)"
:alt="article.title"
class="w-full h-full object-cover"
>
</div>
<RichText :content="article.content" />
<PageAttachments
v-if="article?.files?.length"
:attachments="article.files"
/>
</div>
<div v-else class="text-center py-20">
<h1 class="text-2xl font-bold text-[#4a3f35] mb-4">文章不存在或已下架</h1>
<NuxtLink :to="`/article${article?.navigationId ? '?navId=' + article.navigationId : ''}`" class="text-[#8b6f47] hover:underline">返回新闻列表</NuxtLink>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import type { Article } from '~/types'
/**
* 模板 3 - 新闻详情页(暖米轻商风)
*/
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>