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

- 新增404页面,优化未找到页面体验,避免被搜索引擎索引
- 增加文件代理接口,隐藏真实文件服务器地址,支持文件请求代理
- 实现/article、/case、/product及/page动态路由兼容列表与详情展示
- 添加动态CMS页面兼容入口处理旧式路径,统一路由与SEO设置
- 新增模板1、模板7、模板2、模板3关于我们页面,实现多模板支持
- 模板增强支持CMS单页内容加载及SEO信息动态设置
- 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
This commit is contained in:
2026-09-08 12:13:44 +08:00
commit 2b69686795
381 changed files with 59891 additions and 0 deletions
@@ -0,0 +1,56 @@
<template>
<div class="min-h-screen py-16 bg-[#faf6ef]">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div v-if="caseItem" class="max-w-4xl mx-auto">
<div class="mb-8">
<NuxtLink :to="`/case${caseItem?.navigationId ? '?navId=' + caseItem.navigationId : ''}`" class="text-sm text-[#8a7d6b] hover:text-[#8b6f47]"> 返回案例列表</NuxtLink>
</div>
<h1 class="text-3xl sm:text-4xl font-bold text-[#4a3f35] mb-4">{{ caseItem.title }}</h1>
<div class="flex flex-wrap items-center gap-4 text-sm text-[#8a7d6b] mb-8 pb-8 border-b border-[#e8e0d4]">
<span v-if="caseItem.clientName" class="px-3 py-1 bg-[#f0e6d8] text-[#8b6f47] rounded-full">
{{ caseItem.clientName }}
</span>
<span v-if="caseItem.projectTime">项目时间{{ caseItem.projectTime }}</span>
<span v-if="caseItem.categoryName">行业{{ caseItem.categoryName }}</span>
</div>
<div class="aspect-video bg-[#f3ebde] rounded-3xl overflow-hidden mb-10">
<img
v-if="caseItem.cover"
:src="fileUrl(caseItem.cover)"
:alt="caseItem.title"
class="w-full h-full object-cover"
>
</div>
<p v-if="caseItem.summary" class="text-lg text-[#8a7d6b] mb-8 leading-relaxed">
{{ caseItem.summary }}
</p>
<RichText :content="caseItem.content" />
</div>
<div v-else class="text-center py-20">
<h1 class="text-2xl font-bold text-[#4a3f35] mb-4">案例不存在或已下架</h1>
<NuxtLink :to="`/case${caseItem?.navigationId ? '?navId=' + caseItem.navigationId : ''}`" class="text-[#8b6f47] hover:underline">返回案例列表</NuxtLink>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { CaseItem } from '~/types'
/**
* 模板 3 - 案例详情页(暖米轻商风)
*/
const route = useRoute()
const id = route.params.id as string
const { fileUrl } = useFileUrl()
const { data: caseItem } = await useFetch<CaseItem | null>(`/api/case/detail?id=${id}`, {
key: `case-${id}`
})
</script>