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

- 新增404页面，优化未找到页面体验，避免被搜索引擎索引
- 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理
- 实现/article、/case、/product及/page动态路由兼容列表与详情展示
- 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置
- 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持
- 模板增强支持CMS单页内容加载及SEO信息动态设置
- 配置环境变量及Git忽略文件规则辅助开发和构建环境管理

app/templates/template-09/pages/NewsList.vue

@@ -0,0 +1,206 @@
+<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>
+      <div v-else-if="error" class="text-center py-12">
+        <SiteError message="获取新闻列表失败" />
+      </div>
+
+      <template v-else>
+        <!-- 列表式：左缩略图 + 右标题摘要日期 -->
+        <ul v-if="articles.length > 0" class="border-t" style="border-color: var(--t9-border)">
+          <li
+            v-for="item in articles"
+            :key="item.id || item.articleId"
+            class="border-b"
+            style="border-color: var(--t9-border)"
+          >
+            <NuxtLink
+              :to="`/article/${item.id || item.articleId}`"
+              class="flex gap-5 py-6 group"
+            >
+              <div class="w-[200px] h-[132px] flex-shrink-0 overflow-hidden bg-[var(--t9-bg-gray)] hidden sm:block">
+                <img
+                  :src="itemImage(item)"
+                  :alt="item.title"
+                  class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                  loading="lazy"
+                  @error="onImgError"
+                >
+              </div>
+              <div class="flex-1 min-w-0 flex flex-col">
+                <h2
+                  class="text-[17px] font-medium t9-clamp-2 transition-colors group-hover:text-[var(--t9-primary)]"
+                  style="color: var(--t9-text-strong)"
+                >{{ item.title }}</h2>
+                <p class="mt-3 text-sm leading-7 t9-clamp-2 flex-1" style="color: var(--t9-muted)">
+                  {{ stripHtml(item.summary || item.content || '') }}
+                </p>
+                <div class="mt-3 flex items-center gap-4 text-xs" style="color: var(--t9-muted)">
+                  <span>{{ formatDate(item.publishTime || item.createTime) }}</span>
+                  <span v-if="item.categoryName" style="color: var(--t9-primary)">{{ item.categoryName }}</span>
+                </div>
+              </div>
+            </NuxtLink>
+          </li>
+        </ul>
+
+        <!-- 空状态 -->
+        <div v-else 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="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 style="color: var(--t9-text-secondary)">暂无新闻内容</p>
+        </div>
+
+        <!-- 分页 -->
+        <div v-if="totalPages > 1" class="flex justify-center mt-10">
+          <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>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * 模板 9 - 新闻列表页（墨绿文化出版风）
+ */
+import dayjs from 'dayjs'
+import type { Article, PageResult, ApiEnvelope, CmsNavigation } from '~/types'
+import { collectDescendantNavIds } from '~/utils/nav-tree'
+import { getCompressedImageUrl } from '~/utils/image'
+
+const { navigations, allNavigations, fetchSiteInfo } = useSite()
+const route = useRoute()
+
+await fetchSiteInfo()
+
+/** 从路由参数、查询参数或导航中获取栏目 navigationId
+ *
+ * 优先级（2026-07-21 修正）：
+ *   1. route.query.navId（查询参数 ?navId=xxx，优先——导航子分类下拉切换时通过此方式传入，
+ *      必须高于 route.params.id，否则 /article/4277?navId=4278 会因 params.id=4277 先命中而忽略 navId）
+ *   2. route.params.id（路由参数 /article/:navigationId）
+ *   3. navigations 中 model=article 的第一个栏目（兜底）
+ */
+const navigationId = computed<number | undefined>(() => {
+  // 1. 查询参数优先（导航子分类下拉切换时传入）
+  const queryNavId = route.query.navId as string
+  if (queryNavId) {
+    const num = Number(queryNavId)
+    if (!Number.isNaN(num)) return num
+  }
+  // 2. 路由参数
+  const routeId = route.params.id as string
+  if (routeId) {
+    const num = Number(routeId)
+    if (!Number.isNaN(num)) return num
+  }
+  // 3. 兜底：优先顶部主菜单（top===1）中的 article 栏目，避免命中页脚链接；顶部没有再退回全部导航
+  const isArticleNav = (n: CmsNavigation) =>
+    n.model === 'article' || (n.path || '').split('/').filter(Boolean)[0] === 'article'
+  const nav = (navigations.value || []).find(isArticleNav)
+    || (allNavigations.value || []).find(isArticleNav)
+  return nav?.navigationId
+})
+
+/** 聚合：父栏目访问时递归收集自身 + 所有后代栏目 navigationId，交给后端 IN 查询 */
+const categoryIds = computed<string | undefined>(() => {
+  const ids = collectDescendantNavIds(navigationId.value, allNavigations.value || [])
+  return ids.length ? ids.join(',') : undefined
+})
+
+/** 页面标题 */
+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
+  }
+  if (keywords.value) return `搜索："${keywords.value}"`
+  return findNav(navs)?.title || '新闻资讯'
+})
+
+/** 搜索关键词（来自 Header 搜索框提交的 ?keywords=） */
+const keywords = computed(() => ((route.query.keywords as string) || '').trim())
+
+const currentPage = ref(1)
+const limit = 12
+
+// 响应式 query + watch 选项触发翻页/换栏目的重新请求；
+// key 带页码，保证每一页独立缓存、翻页必然重新拉取（避免共用 key 被缓存返回第 1 页）。
+// keywords 变化时同样触发重新请求，关键词搜索忽略栏目、全局检索。
+const { data, pending, error } = await useFetch<
+  ApiEnvelope<PageResult<Article>> | PageResult<Article>
+>('/api/article/list', {
+  key: `news-list-${keywords.value || 'all'}-${categoryIds.value ?? navigationId.value ?? 'default'}-p${currentPage.value}`,
+  query: {
+    categoryIds: keywords.value ? undefined : categoryIds.value,
+    keywords: keywords.value || undefined,
+    page: currentPage,
+    limit
+  },
+  watch: [currentPage, navigationId, categoryIds, keywords]
+})
+
+const articles = computed<Article[]>(() => {
+  const envelope = data.value as ApiEnvelope<PageResult<Article>>
+  const direct = data.value as PageResult<Article>
+  return envelope?.data?.list || direct?.list || []
+})
+
+const totalCount = computed(() => {
+  const envelope = data.value as ApiEnvelope<PageResult<Article>>
+  const direct = data.value as PageResult<Article>
+  return envelope?.data?.count || envelope?.data?.total || direct?.count || direct?.total || 0
+})
+
+const totalPages = computed(() => {
+  return Math.ceil(totalCount.value / limit)
+})
+
+// 栏目切换 / 关键词变化时回到第 1 页（watch 选项已负责重新请求）
+watch([navigationId, keywords], () => {
+  currentPage.value = 1
+})
+
+function formatDate(date?: string) {
+  if (!date) return ''
+  return dayjs(date).format('YYYY-MM-DD')
+}
+
+/** 列表缩略图：兼容 image / cover / photo，缺省用本地兜底图 */
+const FALLBACK_IMAGE = '/images/template-09/news-default.jpg'
+function itemImage(item: Article): string {
+  const raw = item.image || item.cover || item.photo || ''
+  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>