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,145 @@
+<template>
+  <div class="min-h-screen bg-white pb-16">
+    <div class="t9-container">
+      <h1 class="t9-section-title">{{ pageTitle }}</h1>
+
+      <div v-if="pending" class="flex justify-center py-12">
+        <SiteLoading />
+      </div>
+      <SiteError v-else-if="error" message="获取列表失败" />
+
+      <!-- 图书封面墙（对齐原站「作品集」板块，5 列书籍封面） -->
+      <div v-else class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-5 lg:gap-6">
+        <NuxtLink
+          v-for="item in cases"
+          :key="item.id"
+          :to="`/case/${item.id}`"
+          class="group"
+        >
+          <div class="w-full aspect-[19/23] overflow-hidden bg-[var(--t9-bg-gray)]">
+            <img
+              :src="itemImage(item)"
+              :alt="item.title"
+              class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+              loading="lazy"
+              @error="onImgError"
+            >
+          </div>
+          <p
+            class="mt-2.5 text-sm text-center leading-snug t9-clamp-2 transition-colors group-hover:text-[var(--t9-primary)]"
+            style="color: var(--t9-muted-2)"
+          >{{ item.title }}</p>
+        </NuxtLink>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="!pending && !error && cases.length === 0" class="text-center py-20">
+        <svg class="w-16 h-16 mx-auto mb-4" style="color: var(--t9-muted-light)" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+        </svg>
+        <p style="color: var(--t9-text-secondary)">暂无内容</p>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="totalPages > 1" class="flex justify-center mt-12">
+        <nav class="flex items-center gap-1.5 flex-wrap justify-center">
+          <button
+            v-for="p in totalPages"
+            :key="p"
+            class="min-w-[36px] h-9 px-2 text-sm border transition-colors"
+            :style="p === currentPage
+              ? 'background-color: var(--t9-primary); border-color: var(--t9-primary); color: #fff'
+              : 'background-color: #fff; border-color: var(--t9-border); color: var(--t9-text)'"
+            @click="currentPage = p"
+          >
+            {{ p }}
+          </button>
+        </nav>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CaseItem, PageResult } from '~/types'
+import { collectDescendantNavIds } from '~/utils/nav-tree'
+import { getCompressedImageUrl } from '~/utils/image'
+
+/**
+ * 模板 9 - 案例列表页（墨绿文化出版风）
+ */
+const route = useRoute()
+const { allNavigations, fetchSiteInfo } = useSite()
+
+// 确保导航数据已加载（用于栏目标题与分类判定）
+await fetchSiteInfo()
+
+// 列表（栏目）入口 /case/{navigationId} 时按分类过滤；/case 根目录展示全部案例
+const navigationId = computed<number | undefined>(() => {
+  const id = route.params.id
+  return id ? Number(id) : undefined
+})
+
+// 聚合：父栏目访问时递归收集自身 + 所有后代栏目 navigationId，交给后端 IN 查询
+const categoryIds = computed<string | undefined>(() => {
+  const ids = collectDescendantNavIds(navigationId.value, allNavigations.value || [])
+  return ids.length ? ids.join(',') : undefined
+})
+
+const currentPage = ref(1)
+const limit = 12
+
+const { data, pending, error } = await useFetch<PageResult<CaseItem>>('/api/case/list', {
+  key: `case-list-${categoryIds.value ?? navigationId.value ?? 'all'}-p${currentPage.value}`,
+  query: {
+    page: currentPage,
+    limit,
+    ...(categoryIds.value
+      ? { categoryIds: categoryIds.value }
+      : (navigationId.value ? { navigationId: navigationId.value } : {}))
+  },
+  watch: [currentPage, categoryIds, navigationId]
+})
+
+const cases = computed(() => data.value?.list || [])
+
+const totalCount = computed(() => data.value?.count ?? 0)
+const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / limit)))
+
+// 切换栏目时回到第 1 页
+watch([categoryIds, navigationId], () => {
+  currentPage.value = 1
+})
+
+// 栏目标题：命中导航取导航标题，否则用模块默认名
+const pageTitle = computed(() => {
+  const id = navigationId.value
+  if (id == null) return '图书速递'
+  const navs = (allNavigations.value || []) as any[]
+  const find = (items: any[]): any => {
+    for (const it of items) {
+      if (it.navigationId === id) return it
+      if (it.children?.length) {
+        const f = find(it.children)
+        if (f) return f
+      }
+    }
+    return undefined
+  }
+  return find(navs)?.title || '图书速递'
+})
+
+/** 封面图：兼容 cover / image / photo / images[0] */
+const FALLBACK_IMAGE = '/images/template-09/news-default.jpg'
+function itemImage(item: CaseItem): string {
+  const anyItem = item as Record<string, unknown>
+  const raw = (anyItem.cover || anyItem.image || anyItem.photo
+    || (Array.isArray(anyItem.images) ? (anyItem.images as string[])[0] : '')) as string
+  return raw ? getCompressedImageUrl(raw, { width: 800 }) : FALLBACK_IMAGE
+}
+function onImgError(e: Event) {
+  const el = e.target as HTMLImageElement
+  if (el && !el.src.endsWith(FALLBACK_IMAGE)) el.src = FALLBACK_IMAGE
+}
+
+</script>