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,157 @@
+<template>
+  <div class="bg-[var(--t8-bg-soft)]">
+    <!-- 页头：金棕渐变色块（不使用单页配图作背景） -->
+    <section class="relative overflow-hidden" :style="{ background: 'var(--t8-navbar-bg)' }">
+      <div class="absolute -top-20 -right-16 w-72 h-72 rounded-full bg-white/10 blur-3xl" />
+      <div class="absolute -bottom-24 left-10 w-64 h-64 rounded-full bg-black/10 blur-3xl" />
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16 relative z-10">
+        <nav class="text-xs text-white/70 mb-3" aria-label="面包屑">
+          <NuxtLink to="/" class="hover:text-white transition-colors">首页</NuxtLink>
+          <span class="mx-2">/</span>
+          <span class="text-white">{{ pageTitle }}</span>
+        </nav>
+        <h1 class="text-3xl sm:text-4xl font-bold text-white">{{ pageTitle }}</h1>
+        <p v-if="subTitle" class="text-white/75 mt-3 max-w-2xl leading-relaxed line-clamp-2">
+          {{ subTitle }}
+        </p>
+      </div>
+    </section>
+
+    <!-- 正文 -->
+    <section class="py-12 lg:py-16">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="max-w-5xl mx-auto">
+          <div class="bg-white rounded-3xl shadow-sm border border-[var(--t8-border)] overflow-hidden">
+            <!-- 单页配图（cms_page.image）：作为正文顶部插图 -->
+<!--            <img-->
+<!--              v-if="coverImage"-->
+<!--              :src="coverImage"-->
+<!--              :alt="pageTitle"-->
+<!--              class="w-full h-56 sm:h-72 lg:h-80 object-cover"-->
+<!--            >-->
+
+            <div class="p-6 sm:p-10">
+              <template v-if="hasContent">
+                <div class="flex flex-wrap items-center gap-3 mb-6 pb-6 border-b border-[var(--t8-border)]">
+                  <span class="w-1.5 h-6 rounded-full bg-[var(--t8-primary)]" />
+                  <h2 class="text-xl sm:text-2xl font-bold text-[var(--t8-text)]">{{ pageTitle }}</h2>
+                  <span v-if="updateTimeText" class="sm:ml-auto text-sm text-[var(--t8-text-secondary)]">
+                    更新于 {{ updateTimeText }}
+                  </span>
+                </div>
+                <RichText :content="pageData?.content" />
+                <PageAttachments
+                  v-if="pageData?.attachments?.length"
+                  :attachments="pageData.attachments"
+                />
+              </template>
+
+              <!-- 空态 / 错误态 -->
+              <div v-else class="text-center py-16">
+                <svg class="w-16 h-16 mx-auto text-[var(--t8-muted-light)] mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
+                </svg>
+                <p class="text-[var(--t8-text)] font-medium mb-2">{{ emptyState.title }}</p>
+                <p class="text-[var(--t8-muted-2)] text-sm leading-relaxed mb-6">{{ emptyState.desc }}</p>
+                <NuxtLink to="/" class="text-[var(--t8-primary)] hover:underline">返回首页</NuxtLink>
+              </div>
+            </div>
+          </div>
+
+          <!-- 底部 CTA -->
+          <div class="mt-10 rounded-3xl border border-[var(--t8-border)] bg-[var(--t8-primary-faint)] p-8 sm:p-10 text-center">
+            <h3 class="text-xl sm:text-2xl font-bold text-[var(--t8-text)] mb-3">想进一步了解我们？</h3>
+            <p class="text-[var(--t8-text-secondary)] mb-6">
+              欢迎来电咨询或在线留言，我们将安排专业顾问与您对接
+            </p>
+            <div class="flex flex-wrap items-center justify-center gap-4">
+              <NuxtLink
+                to="/contact"
+                class="inline-flex items-center px-6 py-3 bg-[var(--t8-primary)] text-white font-semibold rounded-xl hover:bg-[var(--t8-primary-dark)] transition-colors shadow-sm"
+              >
+                联系我们
+              </NuxtLink>
+              <a
+                v-if="siteInfo?.phone"
+                :href="`tel:${siteInfo.phone}`"
+                class="inline-flex items-center px-6 py-3 border border-[var(--t8-primary)] text-[var(--t8-primary)] font-semibold rounded-xl hover:bg-[var(--t8-primary-soft)] transition-colors"
+              >
+                {{ siteInfo.phone }}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * 模板 8 - 关于我们（金棕企业风）
+ *
+ * 数据源：后台「单页管理」cms_page 表中 path=about 的记录。
+ * 链路：useFetch('/api/page/detail', { path: 'about' })
+ *       → server/api/page/detail.get.ts 的 path 分支
+ *       → 上游 /cms/cms-page/getByPath/about（带 TenantId）
+ *
+ * 内容全部由后台维护：title / content（富文本）/ image（正文顶部插图）
+ * / keywords / description（SEO）。后台未录入时展示空态引导。
+ */
+import dayjs from 'dayjs'
+import type { PageDetail } from '~/types'
+
+const { siteInfo, fetchSiteInfo } = useSite()
+const { fileUrl } = useFileUrl()
+
+await fetchSiteInfo()
+
+/** 单页详情：静态 key + 静态 query，保证 SSR 直出 */
+const { data: pageData } = await useFetch<PageDetail>('/api/page/detail', {
+  key: 'page-about',
+  query: { path: 'about' }
+})
+
+const pageTitle = computed(() => pageData.value?.title?.trim() || '关于我们')
+
+/** 正文顶部插图（cms_page.image） */
+const coverImage = computed(() => fileUrl(pageData.value?.photo || ''))
+
+/** 正文是否可渲染 */
+const hasContent = computed(() => Boolean(pageData.value?.hasContent && pageData.value?.content))
+
+/** 页头副标题：优先单页 SEO 描述，其次站点简介 */
+const subTitle = computed(() => {
+  const desc = pageData.value?.description?.trim()
+  if (desc) return desc
+  return (siteInfo.value?.comments || '').trim()
+})
+
+const updateTimeText = computed(() => {
+  const t = pageData.value?.updateTime
+  return t ? dayjs(t).format('YYYY-MM-DD') : ''
+})
+
+/** 空内容兜底文案，区分「未录入」与「接口异常」 */
+const emptyState = computed(() => {
+  if (pageData.value?.status === 'error') {
+    return { title: '内容暂时无法加载', desc: '内容接口暂时不可用，请稍后再试。' }
+  }
+  return {
+    title: '内容尚未录入',
+    desc: '请前往管理后台「单页管理」补充 path 为 about 的页面正文。'
+  }
+})
+
+/** 用单页的 TDK 覆盖外层路由壳的默认 SEO（字段为空时自动回落站点信息） */
+usePageSeo(
+  {
+    title: pageTitle.value,
+    path: '/about',
+    keywords: pageData.value?.keywords || undefined,
+    description: pageData.value?.description || undefined,
+    image: coverImage.value || undefined
+  },
+  siteInfo.value
+)
+</script>