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,169 @@
+<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="获取产品列表失败" />
+
+      <!-- 圆形头像网格（对齐原站「名家经典」板块） -->
+      <div v-else class="flex flex-wrap justify-center gap-x-7 gap-y-8">
+        <NuxtLink
+          v-for="item in products"
+          :key="item.id ?? item.productId"
+          :to="`/product/${item.id ?? item.productId}`"
+          class="w-[110px] sm:w-[130px] group"
+        >
+          <div
+            class="w-[110px] h-[110px] sm:w-[130px] sm:h-[130px] rounded-full overflow-hidden bg-[var(--t9-bg-gray)] border-2 border-transparent transition-colors group-hover:border-[var(--t9-primary)]"
+          >
+            <img
+              :src="itemImage(item)"
+              :alt="item.productName"
+              class="w-full h-full object-cover"
+              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-text)"
+          >{{ item.productName }}</p>
+        </NuxtLink>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="!pending && !error && products.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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+        </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 { Product, PageResult, ApiEnvelope, CmsNavigation } from '~/types'
+import { collectDescendantNavIds } from '~/utils/nav-tree'
+import { getCompressedImageUrl } from '~/utils/image'
+
+/**
+ * 模板 9 - 产品列表页（墨绿文化出版风）
+ * 渲染为圆形头像网格，对齐原站「名家经典」板块
+ */
+const { allNavigations, fetchSiteInfo } = useSite()
+const route = useRoute()
+
+await fetchSiteInfo()
+
+/**
+ * 栏目 navigationId：从查询参数或路由参数读取。
+ * 优先级（2026-07-21 修正）：route.query.navId > route.params.id
+ * （子分类下拉切换通过 ?navId= 传入，必须优先于路径参数，否则切换不生效）
+ */
+const navigationId = computed<number | undefined>(() => {
+  // 1. 查询参数优先（导航子分类下拉切换时传入）
+  const qid = route.query.navId as string
+  if (qid) {
+    const n = Number(qid)
+    if (!Number.isNaN(n)) return n
+  }
+  // 2. 路由参数（/product/:navigationId）
+  const pid = route.params.id as string
+  if (pid) {
+    const n = Number(pid)
+    if (!Number.isNaN(n)) return n
+  }
+  return 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<
+  ApiEnvelope<PageResult<Product>> | PageResult<Product>
+>('/api/product/list', {
+  key: `product-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 products = computed<Product[]>(() => {
+  const envelope = data.value as ApiEnvelope<PageResult<Product>>
+  const direct = data.value as PageResult<Product>
+  return envelope?.data?.list || direct?.list || []
+})
+
+const totalCount = computed(() => {
+  const envelope = data.value as ApiEnvelope<PageResult<Product>>
+  const direct = data.value as PageResult<Product>
+  return envelope?.data?.count || envelope?.data?.total || direct?.count || direct?.total || 0
+})
+const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / limit)))
+
+// 切换栏目时回到第 1 页
+watch([categoryIds, navigationId], () => {
+  currentPage.value = 1
+})
+
+/** 页面标题：取当前栏目名称，兜底「名家经典」 */
+const pageTitle = computed(() => {
+  const navs = allNavigations.value || []
+  const findNav = (items: CmsNavigation[]): CmsNavigation | undefined => {
+    for (const item of items) {
+      if (item.navigationId === navigationId.value) return item
+      if (item.children?.length) {
+        const found = findNav(item.children)
+        if (found) return found
+      }
+    }
+    return undefined
+  }
+  return findNav(navs)?.title || '名家经典'
+})
+
+/** 头像图：兼容 cover / photo / image / images[0] */
+const FALLBACK_IMAGE = '/images/template-09/news-default.jpg'
+function itemImage(item: Product): string {
+  const anyItem = item as Record<string, unknown>
+  const raw = (anyItem.cover || anyItem.photo || anyItem.image
+    || (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>