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

- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
2026-09-08 12:13:44 +08:00
commit 2b69686795
381 changed files with 59891 additions and 0 deletions
@@ -0,0 +1,84 @@
+<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">&gt;</span>
+          <NuxtLink :to="`/article${article?.navigationId ? '?navId=' + article.navigationId : ''}`" class="hover:text-[var(--t9-primary)] transition-colors">
+            {{ article.categoryName || '新闻中心' }}
+          </NuxtLink>
+          <span class="mx-2">&gt;</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>