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,115 @@
+<template>
+  <section class="relative overflow-hidden bg-[#050B1F]">
+    <!-- 背景图 -->
+    <div class="absolute inset-0">
+      <img
+        v-if="bannerMode && banners.length"
+        :src="bannerImg(banners[currentBannerIndex])"
+        :alt="banners[currentBannerIndex]?.title || siteName"
+        class="w-full h-full object-cover"
+      >
+      <img
+        v-else
+        src="/images/template-10/hero-bg.jpg"
+        alt=""
+        class="w-full h-full object-cover"
+      >
+      <div class="absolute inset-0 bg-gradient-to-r from-[#050B1F]/85 via-[#050B1F]/50 to-transparent" />
+    </div>
+
+    <!-- 内容 -->
+    <div class="t10-container relative z-10 py-20 lg:py-28">
+      <div class="max-w-2xl">
+        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight mb-5">
+          {{ heroTitle }}
+        </h1>
+        <p class="text-base lg:text-lg text-white/85 leading-relaxed mb-8 max-w-xl">
+          {{ heroSubtitle }}
+        </p>
+        <div class="flex flex-wrap gap-4">
+          <NuxtLink v-if="productNav" :to="getNavLink(productNav)" class="t10-btn-primary">
+            了解产品
+          </NuxtLink>
+          <NuxtLink v-if="contactNav" :to="getNavLink(contactNav)" class="t10-btn-outline border-white text-white hover:bg-white hover:text-[var(--t10-primary)]">
+            联系我们
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <!-- 指示点 -->
+    <div v-if="bannerMode && banners.length > 1" class="absolute bottom-5 left-0 right-0 flex items-center justify-center gap-2 z-20">
+      <button
+        v-for="(b, i) in banners"
+        :key="'dot-' + (b.id || i)"
+        type="button"
+        :aria-label="'切换到第 ' + (i + 1) + ' 张'"
+        class="w-2.5 h-2.5 rounded-full transition"
+        :class="i === currentBannerIndex ? 'bg-white' : 'bg-white/40 hover:bg-white/70'"
+        @click="goTo(i)"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+/**
+ * 模板 10 - Hero 主视觉区（创芯存储科技蓝风格）
+ * 全宽科技背景 + 左对齐大标题 + CTA 按钮
+ */
+import type { CmsBanner, CmsNavigation, ApiEnvelope, PageResult } from '~/types'
+import { ensureFullUrl } from '~/utils/image'
+
+const { siteInfo, siteName, navigations, fetchSiteInfo } = useSite()
+await fetchSiteInfo()
+
+const { data: bannerRes } = await useFetch<ApiEnvelope<PageResult<CmsBanner>> | PageResult<CmsBanner>>('/api/banner', {
+  query: { position: 'home_slider' }
+})
+
+const banners = computed<CmsBanner[]>(() => {
+  const d = bannerRes.value as (ApiEnvelope<PageResult<CmsBanner>> | PageResult<CmsBanner>) | null
+  if (!d) return []
+  const list = ((d as ApiEnvelope<PageResult<CmsBanner>>)?.data?.list
+    ?? (d as PageResult<CmsBanner>)?.list
+    ?? []) as CmsBanner[]
+  return list
+    .filter((b) => hasImage(b) && b.deleted !== 1 && b.status !== 2)
+    .sort((a, b) => (a.sortNum ?? 0) - (b.sortNum ?? 0))
+})
+
+const bannerMode = computed(() => banners.value.length > 0)
+const currentBannerIndex = ref(0)
+let bannerTimer: ReturnType<typeof setInterval> | null = null
+
+function startAuto() {
+  if (banners.value.length > 1) {
+    bannerTimer = setInterval(() => {
+      currentBannerIndex.value = (currentBannerIndex.value + 1) % banners.value.length
+    }, 5000)
+  }
+}
+function stopAuto() {
+  if (bannerTimer) { clearInterval(bannerTimer); bannerTimer = null }
+}
+onMounted(() => { startAuto() })
+onBeforeUnmount(() => { stopAuto() })
+function goTo(i: number) {
+  currentBannerIndex.value = i
+}
+
+function bannerImg(b: CmsBanner): string {
+  const raw = ensureFullUrl(b.image || b.imageUrl || b.pic || b.url || '')
+  return raw.replace(/resize,w_\d+/, 'resize,w_1600')
+}
+
+function hasImage(b: CmsBanner): boolean {
+  return !!(b.image || b.imageUrl || b.pic || b.url)
+}
+
+const heroTitle = computed(() => siteInfo.value?.slogan || '专注嵌入式存储解决方案')
+const heroSubtitle = computed(() => siteInfo.value?.comments || '为工控、物联网、消费电子、安防设备提供稳定可靠的存储配套，助力智能终端高效运行。')
+
+const productNav = computed<CmsNavigation | undefined>(() => (navigations.value || []).find((n) => n.model === 'product'))
+const contactNav = computed<CmsNavigation | undefined>(() => (navigations.value || []).find((n) => n.model === 'contact' || n.title.includes('联系')))
+</script>