weicw1996/hjc-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 新增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
Download Patch File Download Diff File Expand all files Collapse all files
app/app.vue
+11
View File
@@ -0,0 +1,11 @@
<template>
<NuxtLayout>
<NuxtRouteAnnouncer />
<NuxtPage />
</NuxtLayout>
</template>
<script setup lang="ts">
// 根入口组件：仅做布局和路由出口
// SEO 数据由各页面通过 usePageSeo 设置
</script>
app/assets/css/animations.css
+140
View File
@@ -0,0 +1,140 @@
/* =========================================================
全局动效样式（首页动态效果）
零依赖：纯 CSS + 原生 IntersectionObserver（见 reveal.client.ts）
========================================================= */
/* ---------- 滚动渐显（Scroll Reveal） ----------
初始隐藏仅在 JS 可用（<html class="js">）时生效，避免无 JS 时内容不可见；
元素进入视口由 reveal.client.ts 加 .is-visible 触发过渡。 */
.js [data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
.js [data-reveal='left'] {
transform: translateX(-40px);
}
.js [data-reveal='right'] {
transform: translateX(40px);
}
.js [data-reveal='zoom'] {
transform: scale(0.94);
}
.js [data-reveal].is-visible {
opacity: 1;
transform: none;
}
/* ---------- 首屏背景渐变流动 ---------- */
.anim-gradient {
background-size: 200% 200%;
animation: anim-gradient-shift 16s ease infinite;
}
@keyframes anim-gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* ---------- 漂浮柔光球 ---------- */
.anim-blob {
position: absolute;
border-radius: 9999px;
filter: blur(46px);
opacity: 0.5;
pointer-events: none;
animation: anim-float 9s ease-in-out infinite;
}
.anim-blob--2 {
animation-duration: 13s;
animation-direction: reverse;
}
@keyframes anim-float {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(14px, -26px, 0);
}
}
/* ---------- CTA 按钮光泽扫过 ---------- */
.anim-shimmer {
position: relative;
overflow: hidden;
}
.anim-shimmer::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 45%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.5),
transparent
);
transform: translateX(-160%) skewX(-18deg);
animation: anim-shimmer 3.4s ease-in-out infinite;
}
@keyframes anim-shimmer {
0% {
transform: translateX(-160%) skewX(-18deg);
}
60%,
100% {
transform: translateX(280%) skewX(-18deg);
}
}
/* ---------- 卡片 hover 增强：上浮 + 封面放大 ---------- */
.anim-card {
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.anim-card:hover {
transform: translateY(-6px);
}
.anim-card-media {
overflow: hidden;
}
.anim-card-media img {
transition: transform 0.55s ease;
}
.anim-card:hover .anim-card-media img {
transform: scale(1.06);
}
/* ---------- 无障碍：关闭所有动效 ---------- */
@media (prefers-reduced-motion: reduce) {
.js [data-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.anim-gradient,
.anim-blob,
.anim-shimmer::after {
animation: none !important;
}
.anim-card,
.anim-card-media img {
transition: none !important;
}
.anim-card:hover {
transform: none !important;
}
.anim-card:hover .anim-card-media img {
transform: none !important;
}
}
app/assets/css/tailwind.css
+68
View File
@@ -0,0 +1,68 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ==================== 全局基础样式 ==================== */
html {
scroll-behavior: smooth;
}
body {
font-family: "Noto Sans SC", "Source Han Sans SC", "思源黑体", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 滚动条美化 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.35);
}
/* ==================== 通用工具类 ==================== */
.container-prose {
@apply mx-auto max-w-3xl px-4 sm:px-6;
}
.container-wide {
@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
}
/* 文本截断 */
.text-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.text-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
app/components/AboutSection.vue
+323
View File
@@ -0,0 +1,323 @@
<template>
<!--
关于我们通用组件（首页区块）
数据源：cms_page 表 path=about 的单页记录
链路：/api/page/detail?path=about → server/api/page/detail.get.ts → 上游 /cms/cms-page/getByPath/about
布局：左侧（标题 + 摘要 + 了解更多链接）| 右侧（配图）
无数据时自动隐藏（v-if="ready"），不影响首页其他区块
-->
<section
v-if="ready"
class="about-section"
:class="[customClass, { 'about-section--reversed': reversed }]"
:style="rootStyle"
>
<div :class="containerClass">
<!-- 左：文字区 -->
<div class="about-section__text">
<h2 v-if="displayTitle" class="about-section__title" :style="{ color: titleColor }">
{{ displayTitle }}
</h2>
<div
v-if="titleUnderline"
class="about-section__underline"
:style="{ backgroundColor: accentColor }"
/>
<p v-if="summaryText" class="about-section__summary" :style="{ color: summaryColor }">
{{ summaryText }}
</p>
<NuxtLink
v-if="aboutLink"
:to="aboutLink"
class="about-section__more"
:style="{ color: linkColor }"
>
{{ moreText }}
<svg
class="about-section__arrow"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</NuxtLink>
</div>
<!-- 右：图片区 -->
<div class="about-section__image-wrap" :style="imageWrapStyle">
<img
v-if="imageUrl"
:src="imageUrl"
:alt="displayTitle"
class="about-section__image"
:style="imageStyle"
>
<div v-else class="about-section__image-placeholder" :style="placeholderStyle">
{{ placeholderText }}
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import type { PageDetail } from '~/types'
import { stripHtml } from '~/utils'
/**
* AboutSection — 首页「关于我们」通用组件
*
* 从 cms_page (path=about) 读取单页数据，左侧摘要 + 右侧配图。
* 各模板通过 props 定制颜色/圆角/容器等视觉细节。
*
* ## 使用方式
* ```vue
* <!-- 最简调用（使用全部默认值） -->
* <AboutSection />
*
* <!-- template-08 金棕风 -->
* <AboutSection
* title-color="var(--t8-text)"
* accent-color="var(--t8-primary)"
* summary-color="var(--t8-text-secondary)"
* link-color="var(--t8-primary)"
* container-class="container mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-12 items-center"
* />
* ```
*/
// ==================== Props ====================
const props = withDefaults(defineProps<{
/** 区块标题，空字符串时隐藏标题行 */
title?: string
/** 标题颜色 */
titleColor?: string
/** 装饰线 / 强调色（下划线、链接、占位背景） */
accentColor?: string
/** 摘要文字颜色 */
summaryColor?: string
/** "了解更多"链接文字颜色 */
linkColor?: string
/** "了解更多"文案 */
moreText?: string
/** 摘要最大字符数（stripHtml 后截断） */
maxChars?: number
/** 是否显示标题下方装饰线 */
titleUnderline?: boolean
/** 是否左右翻转（图片在左文字在右） */
reversed?: boolean
/** 外层容器额外 class */
customClass?: string
/** 内层网格容器 class（控制布局与间距） */
containerClass?: string
/** 区块背景色 */
bgColor?: string
/** 区块内边距 py / 上下 padding */
paddingY?: string
/** 图片容器圆角 */
imageRadius?: string
/** 图片容器背景色（无图时的占位背景） */
imageBgColor?: string
/** 无图时的占位文字 */
placeholderText?: string
/** 图片 object-fit */
imageObjectFit?: string
/** 图片高度 */
imageHeight?: string
}>(), {
title: '',
titleColor: '',
accentColor: '',
summaryColor: '',
linkColor: '',
moreText: '了解更多',
maxChars: 150,
titleUnderline: true,
reversed: false,
customClass: '',
containerClass: '',
bgColor: '#ffffff',
paddingY: 'py-16 lg:py-20',
imageRadius: 'rounded-2xl',
imageBgColor: '',
placeholderText: '',
imageObjectFit: 'object-contain',
imageHeight: '',
})
// ==================== 数据获取 ====================
const { siteInfo } = useSite()
const { fileUrl } = useFileUrl()
/** 单页详情（key 与 About.vue 一致，复用 SSR payload） */
const { data: pageData } = await useFetch<PageDetail>('/api/page/detail', {
key: 'page-about',
query: { path: 'about' },
})
// ==================== 计算属性 ====================
/** 是否有足够数据渲染 */
const ready = computed(() => {
const p = pageData.value
if (!p) return false
// ok/empty 都展示（empty 时用 description 或站点简介兜底）
return p.status === 'ok' || p.status === 'empty'
})
/** 显示标题 */
const displayTitle = computed(() => {
if (props.title) return props.title
return pageData.value?.title?.trim() || '关于我们'
})
/**
* 摘要文本
* 优先级：pageData.description > stripHtml(pageData.content) > siteInfo.comments
*/
const summaryText = computed(() => {
const p = pageData.value
if (!p) return ''
// 1. 单页 SEO 描述
const desc = (p.description || '').trim()
if (desc) return desc.slice(0, props.maxChars)
// 2. 正文截取
const content = (p.content || '').trim()
if (content) {
const text = stripHtml(content).slice(0, props.maxChars)
if (text) return text
}
// 3. 站点简介兜底
const comments = (siteInfo.value?.comments || '').trim()
return comments.slice(0, props.maxChars) || ''
})
/** 配图 URL（经 fileUrl 转换） */
const imageUrl = computed(() => {
const photo = pageData.value?.photo
if (!photo) return ''
return fileUrl(photo)
})
/** "了解更多"链接目标 */
const aboutLink = computed(() => '/about')
// ==================== 内联样式（props → style） ====================
const rootStyle = computed(() => ({
backgroundColor: props.bgColor || undefined,
paddingTop: undefined,
paddingBottom: undefined,
}))
const imageWrapStyle = computed(() => ({
borderRadius: undefined, // 由 class 控制
backgroundColor: props.imageBgColor || undefined,
minHeight: props.imageHeight || undefined,
}))
const imageStyle = computed(() => ({
objectFit: props.imageObjectFit as any || undefined,
maxHeight: props.imageHeight || undefined,
}))
const placeholderStyle = computed(() => ({
color: props.accentColor || undefined,
}))
</script>
<style scoped>
.about-section {
position: relative;
}
.about-section__text {
display: flex;
flex-direction: column;
justify-content: center;
}
.about-section__title {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 0.75rem;
}
.about-section__underline {
width: 4rem;
height: 4px;
border-radius: 9999px;
margin-bottom: 1.5rem;
}
.about-section__summary {
font-size: 1rem;
line-height: 1.75;
margin-bottom: 1.5rem;
}
.about-section__more {
display: inline-flex;
align-items: center;
font-weight: 600;
font-size: 0.95rem;
transition: opacity 0.2s;
width: fit-content;
}
.about-section__more:hover {
opacity: 0.75;
}
.about-section__arrow {
width: 1rem;
height: 1rem;
margin-left: 0.5rem;
flex-shrink: 0;
}
.about-section__image-wrap {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 16rem;
max-height: 20rem;
}
.about-section__image {
width: 100%;
height: 100%;
padding: 2rem;
}
.about-section__image-placeholder {
font-size: 0.9rem;
opacity: 0.45;
user-select: none;
}
/* 翻转布局 */
.about-section--reversed .about-section__text {
order: 2;
}
.about-section--reversed .about-section__image-wrap {
order: 1;
}
</style>
app/components/CaptchaSlider.vue
+151
View File
@@ -0,0 +1,151 @@
<template>
<div class="captcha">
<div class="relative" :style="{ height: H + 'px' }">
<canvas
ref="canvasRef"
class="block w-full rounded-lg ring-1 ring-gray-200"
:style="{ height: H + 'px' }"
/>
<!-- 滑块手柄 -->
<div
ref="handleRef"
class="absolute top-0 flex items-center justify-center rounded-lg bg-white shadow-md ring-1 ring-gray-200 cursor-grab select-none active:cursor-grabbing"
:class="passed ? '!bg-green-500 !text-white' : 'text-indigo-600'"
:style="{ left: sliderX + 'px', width: SIZE + 'px', height: H + 'px' }"
@pointerdown.prevent="onDown"
>
<svg v-if="!passed" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 6l6 6-6 6" />
</svg>
<svg v-else class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<div
v-if="!passed"
class="pointer-events-none absolute inset-0 flex items-center justify-center text-xs text-gray-400"
>
拖动滑块完成拼图验证
</div>
</div>
<div class="mt-1 flex items-center justify-end">
<button type="button" class="text-xs text-gray-400 hover:text-gray-600" @click="reload">看不清？换一个</button>
</div>
</div>
</template>
<script setup lang="ts">
const emit = defineEmits<{
passed: [payload: { token: string; x: number }]
failed: []
}>()
const H = 44
const SIZE = 42
const TOLERANCE = 10
const canvasRef = ref<HTMLCanvasElement>()
const handleRef = ref<HTMLElement>()
const W = ref(320)
const puzzleX = ref(0)
const token = ref('')
const sliderX = ref(0)
const dragging = ref(false)
const passed = ref(false)
const loading = ref(false)
const result = ref<{ token: string; x: number } | null>(null)
let moveStartX = 0
let startLeft = 0
function clamp(v: number, min: number, max: number) {
return Math.max(min, Math.min(max, v))
}
async function reload() {
if (loading.value) return
loading.value = true
passed.value = false
sliderX.value = 0
result.value = null
await nextTick()
const width = canvasRef.value ? Math.round(canvasRef.value.clientWidth) || 320 : 320
try {
const res = await $fetch<{ token: string; puzzleX: number; width: number; size: number }>(
'/api/captcha/challenge',
{ method: 'POST', body: { width } }
)
token.value = res.token
puzzleX.value = res.puzzleX
W.value = res.width
draw()
} catch {
/* 失败可重试 */
} finally {
loading.value = false
}
}
function draw() {
const c = canvasRef.value
if (!c) return
const ctx = c.getContext('2d')
if (!ctx) return
c.width = W.value
c.height = H
const g = ctx.createLinearGradient(0, 0, W.value, H)
g.addColorStop(0, '#eef2ff')
g.addColorStop(1, '#e0e7ff')
ctx.fillStyle = g
ctx.fillRect(0, 0, W.value, H)
for (let i = 0; i < 36; i++) {
ctx.fillStyle = `rgba(99,102,241,${Math.random() * 0.15})`
ctx.beginPath()
ctx.arc(Math.random() * W.value, Math.random() * H, Math.random() * 2, 0, Math.PI * 2)
ctx.fill()
}
ctx.fillStyle = 'rgba(99,102,241,0.4)'
ctx.font = '13px sans-serif'
ctx.textAlign = 'center'
ctx.fillText('拖动滑块完成拼图验证', W.value / 2, H / 2 + 4)
// 挖出缺口（露出底层）
ctx.globalCompositeOperation = 'destination-out'
ctx.fillRect(puzzleX.value, 0, SIZE, H)
ctx.globalCompositeOperation = 'source-over'
}
function onDown(e: PointerEvent) {
if (passed.value || loading.value) return
dragging.value = true
moveStartX = e.clientX
startLeft = sliderX.value
}
function onMove(e: PointerEvent) {
if (!dragging.value) return
sliderX.value = clamp(startLeft + (e.clientX - moveStartX), 0, W.value - SIZE)
}
function onUp() {
if (!dragging.value) return
dragging.value = false
if (Math.abs(sliderX.value - puzzleX.value) <= TOLERANCE) {
passed.value = true
result.value = { token: token.value, x: Math.round(sliderX.value) }
emit('passed', result.value)
} else {
sliderX.value = 0
emit('failed')
}
}
onMounted(async () => {
await reload()
window.addEventListener('pointermove', onMove)
window.addEventListener('pointerup', onUp)
})
onBeforeUnmount(() => {
window.removeEventListener('pointermove', onMove)
window.removeEventListener('pointerup', onUp)
})
defineExpose({ result, passed, reload })
</script>
app/components/ConsultDialog.vue
+153
View File
@@ -0,0 +1,153 @@
<template>
<ClientOnly>
<Teleport to="body">
<Transition name="consult-fade">
<div
v-if="isOpen"
class="fixed inset-0 z-[100] flex items-center justify-center p-4"
@click.self="closeConsult"
>
<!-- 遮罩 -->
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm" />
<!-- 弹窗卡片 -->
<Transition name="consult-pop" appear>
<div
v-if="isOpen"
class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md p-6 sm:p-8 max-h-[90vh] overflow-y-auto"
role="dialog"
aria-modal="true"
aria-label="立即咨询"
>
<!-- 关闭按钮 -->
<button
type="button"
class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors"
aria-label="关闭"
@click="closeConsult"
>
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<!-- 成功态 -->
<div v-if="submitted" class="text-center py-6">
<div class="w-14 h-14 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center">
<svg class="w-7 h-7 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 class="text-lg font-bold text-gray-900 mb-2">提交成功</h3>
<p class="text-gray-600 text-sm">我们会尽快与您联系，请保持电话畅通。</p>
</div>
<!-- 表单态 -->
<div v-else>
<div class="mb-6 pr-8">
<h2 class="text-xl font-bold text-gray-900 mb-1">立即咨询</h2>
<p class="text-sm text-gray-500">留下您的联系方式，我们将尽快与您联系</p>
</div>
<ContactForm
type="consult"
content-label="需求"
submit-text="立即提交"
:content-required="false"
:preset-content="presetNeed"
:source="source"
accent="#1a6dff"
@success="onSuccess"
/>
</div>
</div>
</Transition>
</div>
</Transition>
</Teleport>
</ClientOnly>
</template>
<script setup lang="ts">
/**
* 全站咨询弹窗
* 通过 useConsult() 控制开关，内部复用共享 ContactForm（与 /contact 功能对齐：
* 手机号段校验、蜜罐、滑块验证码（按后台配置）、频率限制、去重、提交）。
* 挂载在 layouts/default.vue，全站可用。
*/
import ContactForm from './ContactForm.vue'
const { isOpen, presetNeed, source, closeConsult } = useConsult()
const submitted = ref(false)
let successTimer: ReturnType<typeof setTimeout> | null = null
// 打开时锁定背景滚动；关闭时复位成功态
watch(isOpen, (open) => {
if (open) {
submitted.value = false
if (import.meta.client) {
document.body.style.overflow = 'hidden'
}
} else {
if (import.meta.client) {
document.body.style.overflow = ''
}
}
})
// ESC 关闭
function onKeydown(e: KeyboardEvent) {
if (e.key === 'Escape' && isOpen.value) closeConsult()
}
// 提交成功后显示成功态，2.5s 自动关闭
function onSuccess() {
submitted.value = true
successTimer = setTimeout(() => {
if (submitted.value) {
submitted.value = false
closeConsult()
}
}, 2500)
}
onMounted(() => {
window.addEventListener('keydown', onKeydown)
})
onBeforeUnmount(() => {
window.removeEventListener('keydown', onKeydown)
if (successTimer) clearTimeout(successTimer)
if (import.meta.client) {
document.body.style.overflow = ''
}
})
</script>
<style scoped>
.consult-fade-enter-active,
.consult-fade-leave-active {
transition: opacity 0.2s ease;
}
.consult-fade-enter-from,
.consult-fade-leave-to {
opacity: 0;
}
.consult-pop-enter-active {
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.consult-pop-leave-active {
transition: transform 0.2s ease, opacity 0.2s ease;
}
.consult-pop-enter-from {
transform: scale(0.95) translateY(10px);
opacity: 0;
}
.consult-pop-leave-to {
transform: scale(0.95);
opacity: 0;
}
</style>
app/components/ContactForm.vue
+201
View File
@@ -0,0 +1,201 @@
<template>
<form class="space-y-5" novalidate @submit.prevent="handleSubmit">
<div>
<label :class="labelClass">姓名</label>
<input
v-model.trim="form.name"
type="text"
required
:class="inputClass"
placeholder="请输入您的姓名"
>
</div>
<div>
<label :class="labelClass">电话</label>
<input
v-model.trim="form.phone"
type="tel"
required
:class="inputClass"
placeholder="请输入联系电话"
>
<p v-if="phoneError" class="mt-1 text-xs text-red-500">{{ phoneError }}</p>
</div>
<div>
<label :class="labelClass">{{ contentLabel }}</label>
<textarea
v-model.trim="form.content"
rows="4"
:required="contentRequired"
:class="inputClass"
:placeholder="type === 'consult' ? '请简要描述您的需求（选填）' : '请输入您想咨询的内容'"
/>
</div>
<!-- 蜜罐：对真人隐藏，机器人常自动填写 -->
<div aria-hidden="true" style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;">
<label>请勿填写此字段</label>
<input v-model="hp" type="text" tabindex="-1" autocomplete="off">
</div>
<!-- 滑块验证码：仅当后台「网站设置」开启 requireCaptcha 时显示（仅客户端渲染） -->
<ClientOnly v-if="showCaptcha">
<SliderCaptcha ref="sliderRef" :accent="accent" @verified="onVerified" />
<template #fallback>
<div class="h-[46px] animate-pulse rounded-lg bg-gray-100" />
</template>
</ClientOnly>
<button type="submit" :disabled="submitting" :class="submitClass">
{{ submitting ? '提交中...' : submitText }}
</button>
<p v-if="submitMessage" class="text-center text-sm" :class="submitSuccess ? 'text-green-600' : 'text-red-600'">
{{ submitMessage }}
</p>
</form>
</template>
<script setup lang="ts">
/**
* 共享「在线留言」表单（9 套模板统一复用）。
* 内置：手机号段校验（港澳台/海外）、蜜罐、滑块验证码、提交。
* 校验/防护逻辑集中于此，改一处即可全站生效。
*/
const props = withDefaults(
defineProps<{
inputClass?: string
submitClass?: string
labelClass?: string
accent?: string
/** 表单类型：contact（默认）或 consult */
type?: 'contact' | 'consult'
/** 内容/需求字段标签 */
contentLabel?: string
/** 提交按钮文案 */
submitText?: string
/** 内容/需求字段是否必填（默认 true） */
contentRequired?: boolean
/** 预填内容（如咨询弹窗带入的产品名/需求） */
presetContent?: string
/** 来源标记 */
source?: string
}>(),
{
inputClass: 'w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500',
submitClass:
'w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
labelClass: 'block text-sm font-medium text-gray-700 mb-1',
accent: '#1a6dff',
type: 'contact',
contentLabel: '留言内容',
submitText: '提交留言',
contentRequired: true,
presetContent: '',
source: ''
}
)
const emit = defineEmits<{
success: []
error: [message: string]
}>()
const { submitForm } = useCms()
const sliderRef = ref<InstanceType<typeof SliderCaptcha> | null>(null)
const { siteSetting } = useSite()
const runtimeConfig = useRuntimeConfig()
const form = reactive({ name: '', phone: '', content: props.presetContent })
watch(
() => props.presetContent,
(v) => {
if (v && !form.content) form.content = v
}
)
// 弹窗场景：每次挂载（弹窗打开）时用最新预填内容重置
onMounted(() => {
if (props.presetContent) form.content = props.presetContent
})
const hp = ref('')
const submitting = ref(false)
const submitSuccess = ref(false)
const submitMessage = ref('')
const phoneError = ref('')
const captchaTicket = ref('')
/**
* 是否显示滑块验证码。
* 优先级：后台「网站设置」setting.requireCaptcha（权威）> 运行时配置 public.contactCaptcha（部署级覆盖）> 默认 false。
* 与后端 submit 的判定口径一致（见 server/utils/site.ts getContactCaptchaRequired）。
*/
const showCaptcha = computed<boolean>(() => {
const fromSetting = siteSetting.value?.requireCaptcha
if (typeof fromSetting === 'boolean') return fromSetting
const fromEnv = runtimeConfig.public.contactCaptcha
if (typeof fromEnv === 'boolean') return fromEnv
return false
})
function onVerified(ticket: string) {
captchaTicket.value = ticket
}
async function handleSubmit() {
phoneError.value = ''
submitMessage.value = ''
if (!form.name || !form.phone || (props.contentRequired && !form.content)) {
submitSuccess.value = false
submitMessage.value = props.type === 'consult'
? '请填写姓名和电话'
: '请填写完整的姓名、电话和留言内容'
return
}
if (!validatePhone(form.phone)) {
phoneError.value = '请输入有效的联系电话（支持 +区号 海外/港澳台，如 +852 61234567）'
return
}
if (showCaptcha.value && !captchaTicket.value) {
submitSuccess.value = false
submitMessage.value = '请先完成滑块验证'
return
}
submitting.value = true
try {
await submitForm({
type: props.type,
name: form.name,
phone: form.phone,
content: form.content,
captchaTicket: captchaTicket.value,
website: hp.value,
source: props.source || undefined
})
submitSuccess.value = true
submitMessage.value = '提交成功，我们会尽快与您联系！'
form.name = ''
form.phone = ''
form.content = ''
captchaTicket.value = ''
sliderRef.value?.reset()
emit('success')
} catch (err: any) {
submitSuccess.value = false
submitMessage.value = err?.data?.statusMessage || err?.statusMessage || '提交失败，请稍后重试'
// 票据一次性消费，失败后需重新验证
captchaTicket.value = ''
sliderRef.value?.reset()
emit('error', submitMessage.value)
} finally {
submitting.value = false
}
}
</script>
app/components/FeatureIcon.vue
+128
View File
@@ -0,0 +1,128 @@
<template>
<!-- 自定义图片图标（后台上传，值为 URL） -->
<img
v-if="isCustom"
:src="name"
alt=""
loading="lazy"
style="object-fit: contain"
aria-hidden="true"
>
<!-- 内置线性图标（值为图标名，颜色跟随模板主题） -->
<svg
v-else
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
v-html="inner"
aria-hidden="true"
/>
</template>
<script setup lang="ts">
import { computed } from 'vue'
/**
* 首页优势模块统一图标组件
*
* 双模式：
* 1. 内置图标 —— name 为图标名（如 building / box），渲染 36 个通用线性图标之一
* （Feather 风格，MIT 许可，stroke 跟随 currentColor，自动适配各模板主题色）；
* 名称不在映射表内时回退到 box。
* 2. 自定义图标 —— name 为图片 URL（http / // / 开头），渲染 <img>，按原色显示。
*
* 后台只存名字或 URL，不存 SVG 源码，避免样式耦合。
* 图标清单与后台 website-admin 的 app/components/IconPicker.vue 保持一致，
* 增删图标时务必同步两处。
*
* 使用：<FeatureIcon name="building" class="w-6 h-6 text-blue-600" />
* （class 等属性由单根元素自动透传，两个分支宽高一致）
*/
const props = defineProps<{ name?: string }>()
/** 值以 http / // / 开头视为自定义图片 URL */
const isCustom = computed(() => {
const v = props.name || ''
return v.startsWith('http') || v.startsWith('//') || v.startsWith('/')
})
const ICONS: Record<string, string> = {
building:
'<path d="M3 21h18"/><path d="M5 21V7l7-4 7 4v14"/><path d="M9 9h.01"/><path d="M15 9h.01"/><path d="M9 13h.01"/><path d="M15 13h.01"/><path d="M9 17h.01"/><path d="M15 17h.01"/>',
box:
'<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96L12 12.01l8.73-5.05"/><path d="M12 22.08V12"/>',
case:
'<rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M3 12h18"/>',
message:
'<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
shield:
'<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
rocket:
'<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>',
chart:
'<path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/>',
trending:
'<path d="M23 6l-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/>',
star:
'<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>',
users:
'<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
user:
'<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
phone:
'<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>',
mail:
'<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/>',
location:
'<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>',
trophy:
'<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/>',
heart:
'<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>',
lightbulb:
'<path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12.74c.64.46 1 1.2 1 1.99V18h6v-1.27c0-.79.36-1.53 1-1.99A7 7 0 0 0 12 2z"/>',
cog:
'<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>',
globe:
'<circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>',
lock:
'<rect x="4" y="11" width="16" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
check:
'<circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6"/>',
support:
'<circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><path d="M9 9h.01"/><path d="M15 9h.01"/>',
target:
'<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
clock:
'<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>',
document:
'<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/>',
cube:
'<path d="M12 2l9 5v10l-9 5-9-5V7l9-5z"/><path d="M3 7l9 5 9-5"/><path d="M12 12v10"/>',
cloud:
'<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>',
cpu:
'<rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/>',
money:
'<path d="M12 1v22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',
truck:
'<rect x="1" y="3" width="15" height="13" rx="1"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/>',
shopping:
'<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>',
cart:
'<circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>',
search:
'<circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>',
pencil:
'<path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>',
layer:
'<path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>',
fire:
'<path d="M12 2c0 0-6 6-6 12a6 6 0 0 0 12 0c0-6-6-12-6-12z"/><path d="M12 22a4 4 0 0 1-4-4c0-3 4-5 4-5s4 2 4 5a4 4 0 0 1-4 4z"/>'
}
const inner = computed(() => ICONS[props.name || ''] ?? ICONS.box)
</script>
app/components/PageAttachments.vue
+122
View File
@@ -0,0 +1,122 @@
<template>
<div v-if="list.length" class="mt-10 border-t border-gray-100 pt-8">
<h2 class="text-xl font-bold text-gray-900 mb-5">{{ title }}</h2>
<ul class="space-y-3">
<li
v-for="(file, idx) in sortedList"
:key="(file.url || '') + idx"
class="flex items-center gap-3 rounded-lg border border-gray-200 px-4 py-3 transition hover:border-blue-400 hover:shadow-sm"
>
<!-- 文件图标（按扩展名换色，统一用内联 SVG，避免引入图标库依赖） -->
<span class="shrink-0" :style="{ color: iconColor(file.ext) }">
<svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<path d="M14 2v6h6" />
</svg>
</span>
<!-- 文件名（可点击下载） -->
<a
:href="resolveUrl(file.url)"
:download="file.name"
target="_blank"
rel="noopener"
class="min-w-0 flex-1 truncate text-blue-600 hover:underline"
:title="file.name"
>
{{ file.name }}
</a>
<!-- 扩展名徽标 -->
<span
v-if="file.ext"
class="shrink-0 rounded bg-gray-100 px-2 py-0.5 text-xs font-medium uppercase text-gray-500"
>{{ file.ext }}</span>
<!-- 文件大小 -->
<span v-if="file.size" class="shrink-0 text-xs text-gray-400">{{ formatSize(file.size) }}</span>
<!-- 下载入口 -->
<a
:href="resolveUrl(file.url)"
:download="file.name"
target="_blank"
rel="noopener"
class="shrink-0 text-sm text-blue-600 hover:underline"
>下载</a>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { PageAttachment } from '~/types'
import { ensureFullUrl } from '~/utils/image'
const props = withDefaults(
defineProps<{
/** 附件列表（来自 pageData.attachments） */
attachments?: PageAttachment[]
/** 区块标题，默认「相关附件」 */
title?: string
}>(),
{
attachments: () => [],
title: '相关附件'
}
)
const list = computed<PageAttachment[]>(() => props.attachments || [])
/** 按 sort 升序，sort 缺失的排后面 */
const sortedList = computed<PageAttachment[]>(() =>
[...list.value].sort((a, b) => (a.sort ?? 9999) - (b.sort ?? 9999))
)
function resolveUrl(url?: string) {
return url ? ensureFullUrl(url) : ''
}
/** 字节转可读大小 */
function formatSize(bytes?: number) {
if (!bytes || bytes <= 0) return ''
const units = ['B', 'KB', 'MB', 'GB']
let val = bytes
let i = 0
while (val >= 1024 && i < units.length - 1) {
val /= 1024
i++
}
return `${val.toFixed(i === 0 ? 0 : 1)} ${units[i]}`
}
/** 不同扩展名用不同图标色，便于一眼区分文件类型 */
function iconColor(ext?: string) {
const map: Record<string, string> = {
pdf: '#e5484d',
doc: '#2b6cee',
docx: '#2b6cee',
xls: '#1f9d55',
xlsx: '#1f9d55',
csv: '#1f9d55',
ppt: '#e8833a',
pptx: '#e8833a',
zip: '#8a6df0',
rar: '#8a6df0',
'7z': '#8a6df0',
txt: '#6b7280'
}
return (ext && map[ext.toLowerCase()]) || '#6b7280'
}
</script>
app/components/RecommendArticlesSection.vue
+137
View File
@@ -0,0 +1,137 @@
<template>
<!--
推荐资讯区块（共享组件）
数据：useRecommend('article') —— 读取后台勾选 recommend=1 的文章（全站跨栏目精选）
显隐：由父级（首页）通过后台「首页区块」开关 v-if 控制；本组件只负责渲染，
无数据时显示空状态占位（符合「允许空」语义）。
复用：其他模板（如 template-07）只需 import 本组件并传入各自主题色即可。
-->
<section class="py-16 lg:py-20 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-2xl sm:text-3xl font-bold mb-4" :style="{ color: titleColor }" data-reveal>{{ title }}</h2>
<p v-if="subtitle" class="max-w-2xl mx-auto" :style="{ color: subtitleColor }" data-reveal data-reveal-delay="100">{{ subtitle }}</p>
</div>
<div v-if="items.length > 0" :class="['grid gap-6', gridClass]">
<article
v-for="(item, index) in items"
:key="item.id || item.articleId"
class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow anim-card"
data-reveal
:data-reveal-delay="index * 100"
>
<NuxtLink :to="`/article/${item.id || item.articleId}`">
<div class="aspect-video bg-gray-100 flex items-center justify-center anim-card-media overflow-hidden">
<img
v-if="item.image || item.cover || item.photo"
:src="articleImage(item)"
:alt="item.title"
class="w-full h-full object-cover"
loading="lazy"
@error="onImgError($event)"
>
<span v-else class="text-gray-400">暂无图片</span>
</div>
</NuxtLink>
<div class="p-5">
<div class="text-xs text-gray-500 mb-2">
{{ formatDate(item.publishTime || item.createTime) }}
<span v-if="item.categoryName" class="ml-2" :style="{ color: accentColor }">{{ item.categoryName }}</span>
</div>
<h3 class="text-lg font-semibold mb-2 line-clamp-2 hover:text-blue-600 transition-colors" :style="{ color: titleColor }">
<NuxtLink :to="`/article/${item.id || item.articleId}`">{{ item.title }}</NuxtLink>
</h3>
<p class="text-sm line-clamp-2" :style="{ color: subtitleColor }">{{ stripHtml(item.summary) }}</p>
</div>
</article>
</div>
<!-- 空状态（区块开关开启但无推荐内容时显示） -->
<div v-else class="text-center text-gray-400 py-12">
<p>暂无推荐内容</p>
</div>
<div v-if="moreLink" class="text-center mt-10">
<NuxtLink
:to="moreLink"
class="inline-flex items-center font-semibold hover:opacity-80 transition-opacity"
:style="{ color: accentColor }"
>
{{ moreText }}
<svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</NuxtLink>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import { computed } from 'vue'
import { useRecommend } from '~/composables/useRecommend'
import { useFileUrl } from '~/composables/useFileUrl'
import { stripHtml } from '~/utils'
import type { Article } from '~/types'
const props = withDefaults(
defineProps<{
title?: string
subtitle?: string
/** 主强调色：分类标签、链接、查看更多 */
accentColor?: string
/** 标题文字色 */
titleColor?: string
/** 副标题/摘要文字色 */
subtitleColor?: string
/** 展示列数（2/3/4） */
columns?: number
/** 展示条数 */
limit?: number
/** 无推荐文章时是否回退最新文章（默认 false：未勾推荐则显示空占位） */
fallbackToLatest?: boolean
/** 查看更多链接 */
moreLink?: string
/** 查看更多文案 */
moreText?: string
}>(),
{
title: '推荐资讯',
subtitle: '了解企业最新资讯与行业动态',
accentColor: '#3b82f6',
titleColor: '#111827',
subtitleColor: '#4b5563',
columns: 3,
limit: 3,
fallbackToLatest: false,
moreLink: '',
moreText: '查看更多'
}
)
const { fileUrl } = useFileUrl()
const { items } = useRecommend<Article>('article', { limit: props.limit, fallbackToLatest: props.fallbackToLatest })
const gridClass = computed(() => {
if (props.columns >= 4) return 'sm:grid-cols-2 lg:grid-cols-4'
if (props.columns === 2) return 'md:grid-cols-2'
return 'md:grid-cols-3'
})
function formatDate(date?: string) {
if (!date) return ''
return dayjs(date).format('YYYY-MM-DD')
}
function articleImage(item: Article) {
const raw = item.image || item.cover || item.photo || ''
return raw ? fileUrl(raw) : ''
}
function onImgError(e: Event) {
const el = e.target as HTMLImageElement
if (el) el.style.display = 'none'
}
</script>
app/components/RecommendCasesSection.vue
+113
View File
@@ -0,0 +1,113 @@
<template>
<!--
案例区块（共享组件）
数据：useRecommend('case') —— 上游 cms-case 当前无 recommend/top 字段，故默认回退「最新案例」；
代码已预留推荐过滤，后台字段上线后自动切换为推荐案例。
显隐：由父级（首页）通过后台「首页区块」开关 v-if 控制；无数据时显示空状态占位。
复用：其他模板 import 本组件并传入各自主题色即可。
-->
<section class="py-16 lg:py-20 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-2xl sm:text-3xl font-bold mb-4" :style="{ color: titleColor }" data-reveal>{{ title }}</h2>
<p v-if="subtitle" class="max-w-2xl mx-auto" :style="{ color: subtitleColor }" data-reveal data-reveal-delay="100">{{ subtitle }}</p>
</div>
<div v-if="items.length > 0" :class="['grid gap-6', gridClass]">
<article
v-for="(item, index) in items"
:key="item.id"
class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-gray-100 anim-card"
data-reveal
:data-reveal-delay="index * 100"
>
<NuxtLink :to="`/case/${item.id}`" class="block">
<div class="aspect-[4/3] bg-gray-100 overflow-hidden">
<img
v-if="item.cover"
:src="caseImage(item)"
:alt="item.title"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
loading="lazy"
>
<span v-else class="flex items-center justify-center h-full text-gray-400">暂无图片</span>
</div>
<div class="p-5">
<h3 class="text-lg font-semibold mb-2 group-hover:opacity-80 transition-opacity" :style="{ color: titleColor }">
{{ item.title }}
</h3>
<p class="text-sm line-clamp-2" :style="{ color: subtitleColor }">{{ stripHtml(item.summary) }}</p>
<div v-if="item.clientName" class="mt-3 text-xs text-gray-500">
客户：{{ item.clientName }}
</div>
</div>
</NuxtLink>
</article>
</div>
<div v-else class="text-center text-gray-400 py-12">
<p>暂无推荐内容</p>
</div>
<div v-if="moreLink" class="text-center mt-10">
<NuxtLink
:to="moreLink"
class="inline-flex items-center font-semibold hover:opacity-80 transition-opacity"
:style="{ color: accentColor }"
>
{{ moreText }}
<svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</NuxtLink>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRecommend } from '~/composables/useRecommend'
import { useFileUrl } from '~/composables/useFileUrl'
import { stripHtml } from '~/utils'
import type { CaseItem } from '~/types'
const props = withDefaults(
defineProps<{
title?: string
subtitle?: string
accentColor?: string
titleColor?: string
subtitleColor?: string
columns?: number
limit?: number
moreLink?: string
moreText?: string
}>(),
{
title: '案例展示',
subtitle: '真实案例呈现，见证客户成功',
accentColor: '#3b82f6',
titleColor: '#111827',
subtitleColor: '#4b5563',
columns: 3,
limit: 3,
moreLink: '',
moreText: '查看更多'
}
)
const { fileUrl } = useFileUrl()
const { items } = useRecommend<CaseItem>('case', { limit: props.limit })
const gridClass = computed(() => {
if (props.columns >= 4) return 'sm:grid-cols-2 lg:grid-cols-4'
if (props.columns === 2) return 'md:grid-cols-2'
return 'md:grid-cols-3'
})
function caseImage(item: CaseItem) {
const raw = item.cover || ''
return raw ? fileUrl(raw) : ''
}
</script>
app/components/RecommendProductsSection.vue
+109
View File
@@ -0,0 +1,109 @@
<template>
<!--
推荐/置顶产品区块（共享组件）
数据：useRecommend('product') —— 读取后台置顶 top>0 的产品（全站跨栏目精选）
显隐：由父级（首页）通过后台「首页区块」开关 v-if 控制；无数据时显示空状态占位。
复用：其他模板 import 本组件并传入各自主题色即可。
-->
<section class="py-16 lg:py-20 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-2xl sm:text-3xl font-bold mb-4" :style="{ color: titleColor }" data-reveal>{{ title }}</h2>
<p v-if="subtitle" class="max-w-2xl mx-auto" :style="{ color: subtitleColor }" data-reveal data-reveal-delay="100">{{ subtitle }}</p>
</div>
<div v-if="items.length > 0" :class="['grid gap-6', gridClass]">
<article
v-for="(item, index) in items"
:key="item.id || item.productId"
class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow anim-card"
data-reveal
:data-reveal-delay="index * 100"
>
<NuxtLink :to="`/product/${item.id || item.productId}`">
<div class="aspect-video bg-gray-100 flex items-center justify-center anim-card-media overflow-hidden">
<img
v-if="item.cover || item.photo"
:src="productImage(item)"
:alt="item.productName"
class="w-full h-full object-cover"
loading="lazy"
>
<span v-else class="text-gray-400">暂无图片</span>
</div>
</NuxtLink>
<div class="p-5">
<h3 class="text-lg font-semibold mb-2 line-clamp-2 transition-colors" :style="{ color: titleColor }">
<NuxtLink :to="`/product/${item.id || item.productId}`" class="hover:opacity-80">{{ item.productName }}</NuxtLink>
</h3>
<p class="text-sm line-clamp-2" :style="{ color: subtitleColor }">{{ stripHtml(item.description || item.subtitle) }}</p>
</div>
</article>
</div>
<div v-else class="text-center text-gray-400 py-12">
<p>暂无推荐内容</p>
</div>
<div v-if="moreLink" class="text-center mt-10">
<NuxtLink
:to="moreLink"
class="inline-flex items-center font-semibold hover:opacity-80 transition-opacity"
:style="{ color: accentColor }"
>
{{ moreText }}
<svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</NuxtLink>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRecommend } from '~/composables/useRecommend'
import { useFileUrl } from '~/composables/useFileUrl'
import { stripHtml } from '~/utils'
import type { Product } from '~/types'
const props = withDefaults(
defineProps<{
title?: string
subtitle?: string
accentColor?: string
titleColor?: string
subtitleColor?: string
columns?: number
limit?: number
moreLink?: string
moreText?: string
}>(),
{
title: '推荐产品',
subtitle: '了解我们的核心产品与解决方案',
accentColor: '#3b82f6',
titleColor: '#111827',
subtitleColor: '#4b5563',
columns: 3,
limit: 3,
moreLink: '',
moreText: '查看更多'
}
)
const { fileUrl } = useFileUrl()
const { items } = useRecommend<Product>('product', { limit: props.limit })
const gridClass = computed(() => {
if (props.columns >= 4) return 'sm:grid-cols-2 lg:grid-cols-4'
if (props.columns === 2) return 'md:grid-cols-2'
return 'md:grid-cols-3'
})
function productImage(item: Product) {
const raw = item.cover || item.photo || ''
return raw ? fileUrl(raw) : ''
}
</script>
app/components/RichText.vue
+193
View File
@@ -0,0 +1,193 @@
<template>
<div ref="contentRef" v-html="enhancedHtml" class="prose prose-slate max-w-none" />
</template>
<script setup lang="ts">
/**
* 富文本内容渲染组件
* 用于渲染 CMS 返回的 HTML 内容
*
* 设计要点：
* 1. 未安装 @tailwindcss/typography，因此 .prose 仅作为命名空间，
* 实际排版样式由本组件自身提供。
* 2. 后台编辑器（Quill / WangEditor / Tinymce 等）常输出 ql-align-center、
* w-e-text-align-center 等 class，或内联 style="text-align:center"，
* 本组件会识别这些标记并让图片真正居中，实现「所见即所得」。
*/
interface Props {
content?: string | null
}
const props = defineProps<Props>()
const contentRef = ref<HTMLElement | null>(null)
const CENTER_CLASSES = ['ql-align-center', 'w-e-text-align-center']
const RIGHT_CLASSES = ['ql-align-right', 'w-e-text-align-right']
function hasCenterMarker(el: Element): boolean {
const className = el.className || ''
const style = (el.getAttribute('style') || '').toLowerCase()
return CENTER_CLASSES.some(c => className.includes(c)) || style.includes('text-align:center') || style.includes('text-align: center')
}
/** 把新的 style 声明追加到已有 style 字符串，避免双分号 */
function appendStyle(existing: string, addition: string): string {
const trimmed = existing.trim()
return trimmed ? `${trimmed};${addition}` : addition
}
/**
* 服务端/无 DOM 环境下的简单正则增强：
* - 移除 script 标签
* - 给 align="center" 的图片追加居中样式
* - 确保图片默认 display:inline-block，使父级 text-align:center 可生效
*/
function enhanceHtmlString(html: string): string {
if (!html) return ''
let result = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
// 给 align="center" 的图片追加 block + auto margin
result = result.replace(/<img\b([^>]*?)align=["']center["']([^>]*)>/gi, (match, before, after) => {
const styleMatch = /style=["']([^"']*)["']/i.exec(match)
let style = styleMatch ? styleMatch[1] : ''
if (!/display\s*:/i.test(style)) style = appendStyle(style, 'display:block')
if (!/margin\s*:/i.test(style) && !/margin-left\s*:/i.test(style)) {
style = appendStyle(style, 'margin-left:auto;margin-right:auto')
}
if (styleMatch) {
return match.replace(/style=["'][^"']*["']/i, `style="${style}"`)
}
return `<img${before}align="center"${after} style="${style}">`
})
// 默认所有图片 inline-block，方便响应父级 text-align
result = result.replace(/<img\b([^>]*)>/gi, (match, attrs) => {
let a = attrs
// 懒加载 + 异步解码（性能/CLS 优化），避免重复加载阻塞渲染
if (!/\bloading\s*=/i.test(a)) a = ` loading="lazy"${a}`
if (!/\bdecoding\s*=/i.test(a)) a = ` decoding="async"${a}`
if (/display\s*:/i.test(a)) return `<img${a}>`
const styleMatch = /style=["']([^"']*)["']/i.exec(a)
if (styleMatch) {
const style = appendStyle(styleMatch[1], 'display:inline-block')
return `<img${a}`.replace(/style=["'][^"']*["']/i, `style="${style}"`)
}
return `<img${a} style="display:inline-block">`
})
return result
}
/**
* 客户端增强：基于真实 DOM 做更精确的处理
*/
function enhanceDom(root: HTMLElement) {
// 1. 给常见编辑器居中/右对齐 class 追加内联 style（确保 class 样式生效）
CENTER_CLASSES.forEach(cls => {
root.querySelectorAll(`.${cls}`).forEach(el => {
(el as HTMLElement).style.textAlign = 'center'
})
})
RIGHT_CLASSES.forEach(cls => {
root.querySelectorAll(`.${cls}`).forEach(el => {
(el as HTMLElement).style.textAlign = 'right'
})
})
// 2. 处理图片：让被父级标记为居中的图片真正居中
root.querySelectorAll('img').forEach(img => {
const parent = img.parentElement
const isCentered =
img.getAttribute('align') === 'center' ||
(parent ? hasCenterMarker(parent) || hasCenterMarker(img) : hasCenterMarker(img))
if (isCentered) {
img.style.display = 'block'
img.style.marginLeft = 'auto'
img.style.marginRight = 'auto'
} else if (!img.style.display) {
// 默认 inline-block：父级 text-align:center 时仍可居中，
// 同时保留 vertical-align 避免行高异常
img.style.display = 'inline-block'
}
if (!img.style.maxWidth) img.style.maxWidth = '100%'
if (!img.style.height) img.style.height = 'auto'
})
}
const enhancedHtml = computed(() => enhanceHtmlString(props.content || ''))
onMounted(() => {
if (contentRef.value) {
enhanceDom(contentRef.value)
}
})
// 内容变化时重新增强（例如路由切换复用组件）
watch(() => props.content, () => {
nextTick(() => {
if (contentRef.value) {
enhanceDom(contentRef.value)
}
})
})
</script>
<style>
.prose img {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: middle;
}
.prose h2, .prose h3, .prose h4 {
margin-top: 1.5em;
margin-bottom: 0.75em;
}
.prose p {
margin-bottom: 1em;
line-height: 1.75;
}
.prose ul, .prose ol {
margin-bottom: 1em;
padding-left: 1.5em;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
/* 常见富文本编辑器居中/右对齐 class */
.prose .ql-align-center,
.prose .w-e-text-align-center,
.prose [style*="text-align: center"],
.prose [style*="text-align:center"] {
text-align: center;
}
.prose .ql-align-right,
.prose .w-e-text-align-right,
.prose [style*="text-align: right"],
.prose [style*="text-align:right"] {
text-align: right;
}
/* 父级被标记居中时，内部图片也居中 */
.prose .ql-align-center img,
.prose .w-e-text-align-center img,
.prose [style*="text-align: center"] img,
.prose [style*="text-align:center"] img,
.prose img[align="center"] {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
app/components/SiteBrand.vue
+69
View File
@@ -0,0 +1,69 @@
<template>
<NuxtLink to="/" class="flex items-center gap-2" :class="linkClass">
<!-- 优先使用完整 Logo 图片 -->
<img
v-if="logo"
:src="logo"
:alt="name || defaultName"
:class="logoClass"
>
<!-- 无 Logo 时：优先使用站点图标 + 网站名称 -->
<template v-else>
<img
v-if="icon"
:src="icon"
:alt="name || defaultName"
:class="iconClass || 'h-8 w-auto object-contain'"
>
<!-- 没有站点图标时，模板可传入自定义默认图标 -->
<slot v-else name="fallback-icon" />
<span
v-if="showName !== false"
:class="nameClass"
>
{{ name || defaultName }}
</span>
</template>
</NuxtLink>
</template>
<script setup lang="ts">
/**
* 站点品牌展示组件
*
* 统一 Header / Footer 等位置的 Logo 回退逻辑：
* 1. 有站点 Logo（亮色 logo 图片）→ 直接显示图片
* 2. 无 Logo 但有站点图标（appIcon / websiteIcon）→ 显示「图标 + 网站名称」
* 3. 都没有 → 渲染模板自定义的 fallback-icon slot，并显示网站名称
*/
withDefaults(defineProps<{
/** 站点 Logo 图片地址（siteLogo） */
logo?: string
/** 站点图标地址（siteIcon） */
icon?: string
/** 站点名称（siteName） */
name?: string
/** 名称兜底文案 */
defaultName?: string
/** 是否显示名称 */
showName?: boolean
/** 外层 NuxtLink 额外 class */
linkClass?: string
/** Logo 图片 class */
logoClass?: string
/** 图标 class */
iconClass?: string
/** 名称 class */
nameClass?: string
}>(), {
logo: '',
icon: '',
name: '',
defaultName: '企业官网',
showName: true,
linkClass: '',
logoClass: '',
iconClass: '',
nameClass: ''
})
</script>
app/components/SiteError.vue
+29
View File
@@ -0,0 +1,29 @@
<template>
<div class="rounded-md bg-red-50 p-4 my-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-red-800">加载失败</h3>
<div class="mt-2 text-sm text-red-700">
<p>{{ message || '获取数据失败，请稍后重试' }}</p>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
interface Props {
message?: string
}
defineProps<Props>()
</script>
app/components/SiteFooter.vue
+17
View File
@@ -0,0 +1,17 @@
<template>
<Component :is="footerComponent" v-if="footerComponent" />
</template>
<script setup lang="ts">
/**
* 站点 Footer 包装组件
* 根据当前模板 ID 动态加载对应的 Footer 组件
*/
const { loadTemplate } = useTemplate()
const footerComponent = shallowRef<Component | null>(null)
// 同步加载当前模板（SSR/客户端路由切换均直接 await，避免先闪 SiteLoading）
const components = await loadTemplate()
footerComponent.value = components?.Footer || null
</script>
app/components/SiteHeader.vue
+17
View File
@@ -0,0 +1,17 @@
<template>
<Component :is="headerComponent" v-if="headerComponent" />
</template>
<script setup lang="ts">
/**
* 站点 Header 包装组件
* 根据当前模板 ID 动态加载对应的 Header 组件
*/
const { loadTemplate } = useTemplate()
const headerComponent = shallowRef<Component | null>(null)
// 同步加载当前模板（SSR/客户端路由切换均直接 await，避免先闪 SiteLoading）
const components = await loadTemplate()
headerComponent.value = components?.Header || null
</script>
app/components/SiteHome.vue
+17
View File
@@ -0,0 +1,17 @@
<template>
<Component :is="homeComponent" v-if="homeComponent" />
</template>
<script setup lang="ts">
/**
* 站点首页包装组件
* 根据当前模板 ID 动态加载对应的首页组件
*/
const { loadTemplate } = useTemplate()
const homeComponent = shallowRef<Component | null>(null)
// 同步加载当前模板（SSR/客户端路由切换均直接 await，避免先闪 SiteLoading）
const components = await loadTemplate()
homeComponent.value = components?.Home || null
</script>
app/components/SiteLoading.vue
+15
View File
@@ -0,0 +1,15 @@
<template>
<div class="min-h-[200px] flex items-center justify-center">
<div class="text-center">
<div
class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
role="status"
/>
<p class="mt-2 text-sm text-gray-500">加载中...</p>
</div>
</div>
</template>
<script setup lang="ts">
// 全局 Loading 组件
</script>
app/components/SiteSearchBox.vue
+72
View File
@@ -0,0 +1,72 @@
<template>
<form
class="relative"
:style="accent ? { '--sb-accent': accent } : undefined"
@submit.prevent="onSearch"
>
<input
v-model="keyword"
type="text"
:placeholder="placeholder"
class="w-56 pl-4 pr-10 py-2 text-sm rounded-full border bg-[#F4F6FA] focus:outline-none focus:bg-white transition-colors"
:class="inputClass"
>
<button
type="submit"
class="absolute right-2 top-1/2 -translate-y-1/2 transition-colors"
:class="iconClass"
aria-label="搜索"
>
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z" />
</svg>
</button>
</form>
</template>
<script setup lang="ts">
/**
* 共享头部搜索框（Nuxt 自动导入，全局可用）
* 由各模板 Header 在 logo 右侧以 <SiteSearchBox v-if="showHeaderSearch" /> 挂载。
* 是否显示由 useSite().showHeaderSearch（后台 setting.searchBtn）控制。
* 提交后带关键词跳转 /article?keywords=xxx（复用 fetchArticles 的 keywords 参数）。
*
* 定位（ml-8 / ml-auto 等）由父组件通过 class 透传（fallthrough 合并到根 <form>）；
* 视觉主题通过 variant / accent 适配各模板配色。
*/
const props = withDefaults(
defineProps<{
/** 头部背景：light=浅色头部（默认），dark=深色头部 */
variant?: 'light' | 'dark'
/** 主题色（聚焦边框 / 图标 hover 色），支持 CSS 变量名如 'var(--t2-primary)' */
accent?: string
placeholder?: string
}>(),
{
variant: 'light',
placeholder: '请输入关键词...'
}
)
const router = useRouter()
const keyword = ref('')
const inputClass = computed(() => {
if (props.variant === 'dark') {
return 'border-[#333] bg-[#222] text-gray-100 placeholder-gray-500 focus:border-[color:var(--sb-accent,#d4af37)]'
}
return 'border-[#E5E7EB] bg-[#F4F6FA] text-gray-800 placeholder-gray-400 focus:border-[color:var(--sb-accent,#1E2A47)]'
})
const iconClass = computed(() => {
if (props.variant === 'dark') {
return 'text-gray-300 hover:text-[color:var(--sb-accent,#d4af37)]'
}
return 'text-gray-500 hover:text-[color:var(--sb-accent,#1E2A47)]'
})
function onSearch() {
const kw = keyword.value.trim()
router.push({ path: '/article', query: kw ? { keywords: kw } : {} })
}
</script>
app/components/SliderCaptcha.vue
+265
View File
@@ -0,0 +1,265 @@
<template>
<div class="slider-captcha">
<div
ref="trackRef"
class="relative w-full select-none overflow-hidden rounded-lg"
:class="shake ? 'shake' : ''"
:style="{
height: trackHeight + 'px',
background: '#eef2f6',
backgroundImage:
'repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.03) 10px, rgba(0,0,0,0.03) 20px)',
touchAction: 'pan-y'
}"
>
<!-- 目标缺口（拼图应放置的位置） -->
<div
class="target-gap absolute top-1/2 z-10 flex -translate-y-1/2 items-center justify-center rounded-md"
:style="{
left: (puzzleX - size / 2) + 'px',
width: size + 'px',
height: size + 'px'
}"
>
<svg
v-if="!verified && !dragging"
class="h-5 w-5 text-white drop-shadow"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.4"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</div>
<!-- 已拖动填充 -->
<div
class="absolute top-0 left-0 h-full transition-[width] duration-75"
:style="{ width: knobX + 'px', background: accent, opacity: 0.16 }"
/>
<!-- 拼图块（可拖动） -->
<div
class="absolute top-1/2 z-20 flex -translate-y-1/2 items-center justify-center rounded-md text-white shadow-md"
:class="dragging ? 'cursor-grabbing' : 'cursor-grab'"
:style="{
left: knobX + 'px',
width: size + 'px',
height: size + 'px',
background: verified ? '#16a34a' : accent,
transition: dragging ? 'none' : 'left 0.2s ease',
boxShadow: verified ? '0 4px 12px rgba(22,163,74,0.35)' : '0 4px 12px rgba(0,0,0,0.18)',
touchAction: 'none'
}"
@pointerdown.prevent="startDrag"
>
<!-- 拖动图标 -->
<svg v-if="!verified" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 7L4 12l4 5M16 7l4 5-4 5" />
</svg>
<!-- 通过图标 -->
<svg v-else class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 6L9 17l-5-5" />
</svg>
</div>
<!-- 操作提示 -->
<div
v-if="!verified"
class="pointer-events-none absolute inset-0 flex items-center justify-center text-xs"
:class="dragging ? 'text-transparent' : 'text-gray-500'"
>
{{ loading ? '加载中...' : '拖动左侧滑块到缺口位置' }}
</div>
<!-- 验证通过遮罩 -->
<div
v-if="verified"
class="absolute inset-0 z-30 flex items-center justify-center text-xs font-medium text-white"
:style="{ background: 'rgba(22,163,74,0.9)' }"
>
验证通过
</div>
</div>
<p v-if="error" class="mt-1 text-xs text-red-500">{{ error }}</p>
</div>
</template>
<script setup lang="ts">
/**
* 滑块拼图验证码（客户端）。
* 1) 挂载时向后端申请 challenge（含缺口位置 puzzleX）
* 2) 用户拖动拼图块到缺口附近松手
* 3) 校验通过则 emit('verified', ticket)，由父组件随留言一并提交
*/
withDefaults(defineProps<{ accent?: string }>(), {
accent: '#1a6dff'
})
const emit = defineEmits<{ (e: 'verified', ticket: string): void }>()
const size = 44
const trackHeight = size // 上下各留 1px，滑块几乎贴满轨道
const tolerance = 8
const trackRef = ref<HTMLElement | null>(null)
const challenge = ref<{ token: string; puzzleX: number; width: number; size: number } | null>(null)
const knobX = ref(0)
const dragging = ref(false)
const loading = ref(true)
const verified = ref(false)
const error = ref('')
const shake = ref(false)
let pointerStartX = 0
let knobStartX = 0
let resizeTimer: ReturnType<typeof setTimeout> | null = null
const puzzleX = computed(() => challenge.value?.puzzleX ?? size)
function loadChallenge() {
const width = Math.min(Math.max(trackRef.value?.clientWidth || 320, 240), 480)
loading.value = true
$fetch<{ token: string; puzzleX: number; width: number; size: number }>('/api/captcha/challenge', {
method: 'POST',
body: { width }
})
.then((data) => {
challenge.value = data
knobX.value = 0
verified.value = false
error.value = ''
})
.catch(() => {
error.value = '验证码加载失败，请刷新页面'
})
.finally(() => {
loading.value = false
})
}
function startDrag(e: PointerEvent) {
if (verified.value || loading.value || !challenge.value) return
dragging.value = true
pointerStartX = e.clientX
knobStartX = knobX.value
error.value = ''
window.addEventListener('pointermove', onMove)
window.addEventListener('pointerup', onUp)
window.addEventListener('pointercancel', onUp)
}
function onMove(e: PointerEvent) {
if (!dragging.value || !challenge.value) return
const max = challenge.value.width - size
const next = knobStartX + (e.clientX - pointerStartX)
knobX.value = Math.min(Math.max(next, 0), max)
}
function onUp() {
if (!dragging.value) return
dragging.value = false
window.removeEventListener('pointermove', onMove)
window.removeEventListener('pointerup', onUp)
window.removeEventListener('pointercancel', onUp)
if (!challenge.value) return
const userX = knobX.value + size / 2
const ok = Math.abs(userX - challenge.value.puzzleX) <= tolerance
if (!ok) {
error.value = '未对准缺口，请重试'
doShake()
knobX.value = 0
loadChallenge()
return
}
$fetch<{ pass: boolean; ticket?: string }>('/api/captcha/verify', {
method: 'POST',
body: { token: challenge.value.token, x: userX }
})
.then((res) => {
if (res.pass && res.ticket) {
verified.value = true
error.value = ''
emit('verified', res.ticket)
} else {
failAndReset('验证失败，请重试')
}
})
.catch(() => {
failAndReset('验证失败，请重试')
})
}
function failAndReset(msg: string) {
error.value = msg
doShake()
knobX.value = 0
loadChallenge()
}
function doShake() {
shake.value = true
setTimeout(() => {
shake.value = false
}, 350)
}
/** 供父组件在提交失败后重置（票据一次性，需重新验证） */
function reset() {
verified.value = false
knobX.value = 0
error.value = ''
loadChallenge()
}
defineExpose({ reset })
function onResize() {
if (verified.value) return
if (resizeTimer) clearTimeout(resizeTimer)
resizeTimer = setTimeout(loadChallenge, 200)
}
onMounted(() => {
loadChallenge()
window.addEventListener('resize', onResize)
})
onBeforeUnmount(() => {
window.removeEventListener('pointermove', onMove)
window.removeEventListener('pointerup', onUp)
window.removeEventListener('pointercancel', onUp)
window.removeEventListener('resize', onResize)
if (resizeTimer) clearTimeout(resizeTimer)
})
</script>
<style scoped>
@keyframes slider-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
.shake {
animation: slider-shake 0.35s ease-in-out;
}
@keyframes target-pulse {
0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.95), 0 4px 10px rgba(0,0,0,0.14); }
50% { box-shadow: inset 0 0 0 2px rgba(255,255,255,1), 0 4px 14px rgba(0,0,0,0.22); }
}
.target-gap {
background: rgba(0, 0, 0, 0.22);
border: 2px dashed rgba(255, 255, 255, 0.9);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95), 0 4px 10px rgba(0, 0, 0, 0.14);
animation: target-pulse 1.6s ease-in-out infinite;
}
</style>
app/composables/useApp.ts
+78
View File
@@ -0,0 +1,78 @@
import type { AppProduct, TenantContext } from '~/types'
/**
* 获取当前应用产品信息（AppProduct）
*
* SSR：优先从 event.context.tenant.appProduct 读取（中间件已查询）
* 客户端：从 SSR 注入的 useState 读取；若为空则调用 /api/app/info 补查
*/
export function useApp() {
const appInfo = useState<AppProduct | null>('app-info', () => null)
const loading = useState<boolean>('app-loading', () => false)
const error = useState<string | null>('app-error', () => null)
// SSR 时直接从中间件识别结果注入，避免额外请求
if (import.meta.server && !appInfo.value) {
const event = useRequestEvent()
const ctx = event?.context?.tenant as TenantContext | undefined
if (ctx?.appProduct) {
appInfo.value = ctx.appProduct
}
}
/** 主动获取应用信息（客户端兜底 / 手动刷新） */
async function fetchAppInfo() {
if (appInfo.value) return appInfo.value
loading.value = true
error.value = null
try {
const res = await $fetch<AppProduct | null>('/api/app/info')
appInfo.value = res
return res
} catch (e: any) {
error.value = e?.message || '获取应用信息失败'
return null
} finally {
loading.value = false
}
}
/** 应用名称 */
const appName = computed(() => appInfo.value?.productName || '')
/** 应用编码 */
const appCode = computed(() => appInfo.value?.productCode || '')
/** 绑定域名 */
const appDomain = computed(() => appInfo.value?.domain || '')
/** 应用 Logo */
const appLogo = computed(() => appInfo.value?.logo || '')
/** 应用图标（站点小图标，用于 Header/Footer Logo 回退） */
const appIcon = computed(() => appInfo.value?.icon || '')
/**
* 关联模板目录名（template-XX）：【code 优先，主键兜底】
* templateCode 与前端模板目录一一对应；templateId 主键存在跳号错位风险，仅兜底。
* 为空时返回 '' 由上层回退默认模板。
*/
const appTemplateId = computed(() =>
resolveTemplateKey(appInfo.value?.templateCode, appInfo.value?.templateId)
)
/** 是否已过期 */
const appExpired = computed(() => {
const t = appInfo.value?.expirationTime
if (!t) return false
return new Date(t).getTime() < Date.now()
})
return {
appInfo,
loading,
error,
fetchAppInfo,
appName,
appCode,
appDomain,
appLogo,
appIcon,
appTemplateId,
appExpired
}
}
app/composables/useCms.ts
+132
View File
@@ -0,0 +1,132 @@
import type { Article, Product, CaseItem, ApiEnvelope, PageResult } from '~/types'
/**
* CMS 数据请求
* 封装文章、产品、案例等数据的获取逻辑
* 代理接口统一在 server/api/ 下
*/
export function useCms() {
/**
* 文章列表
* @param params.navigationId 导航栏目ID（从 getSiteInfo 的 topNavs 获取）
* @param params.page 页码
* @param params.limit 每页条数
* @param params.keywords 搜索关键词
*/
async function fetchArticles(params?: {
navigationId?: number
categoryId?: number
page?: number
limit?: number
keywords?: string
}) {
const res = await $fetch<ApiEnvelope<PageResult<Article>> | PageResult<Article>>(
'/api/article/list',
{ query: params }
)
const envelope = res as ApiEnvelope<PageResult<Article>>
if (envelope?.data) {
return envelope.data
}
return res as PageResult<Article>
}
/** 文章详情 */
async function fetchArticleDetail(id: string | number) {
const res = await $fetch<ApiEnvelope<Article> | Article>('/api/article/detail', {
query: { id }
})
const envelope = res as ApiEnvelope<Article>
return envelope?.data || (res as Article)
}
/**
* 根据导航模型获取文章列表
* model=article 的导航直接用 navigationId 查询
*/
async function fetchArticlesByNav(navigationId: number, page = 1, limit = 10) {
return fetchArticles({ navigationId, page, limit })
}
/** 产品列表 */
async function fetchProducts(params?: {
categoryId?: number
navigationId?: number
page?: number
limit?: number
keywords?: string
}) {
const res = await $fetch<ApiEnvelope<PageResult<Product>> | PageResult<Product>>(
'/api/product/list',
{ query: params }
)
const envelope = res as ApiEnvelope<PageResult<Product>>
if (envelope?.data) {
return envelope.data
}
return res as PageResult<Product>
}
/** 产品详情 */
async function fetchProductDetail(id: string | number) {
const res = await $fetch<ApiEnvelope<Product> | Product>('/api/product/detail', {
query: { id }
})
const envelope = res as ApiEnvelope<Product>
return envelope?.data || (res as Product)
}
/** 案例列表 */
async function fetchCases(params?: {
categoryId?: number
navigationId?: number
page?: number
limit?: number
}) {
const res = await $fetch<ApiEnvelope<PageResult<CaseItem>> | PageResult<CaseItem>>(
'/api/case/list',
{ query: params }
)
const envelope = res as ApiEnvelope<PageResult<CaseItem>>
if (envelope?.data) {
return envelope.data
}
return res as PageResult<CaseItem>
}
/** 案例详情 */
async function fetchCaseDetail(id: string | number) {
const res = await $fetch<ApiEnvelope<CaseItem> | CaseItem>('/api/case/detail', {
query: { id }
})
const envelope = res as ApiEnvelope<CaseItem>
return envelope?.data || (res as CaseItem)
}
/** 提交表单/留言 */
async function submitForm(data: Record<string, unknown>) {
const res = await $fetch<ApiEnvelope>('/api/form/submit', {
method: 'POST',
body: data
})
return res
}
return {
fetchArticles,
fetchArticleDetail,
fetchArticlesByNav,
fetchProducts,
fetchProductDetail,
fetchCases,
fetchCaseDetail,
submitForm
}
}
app/composables/useConsult.ts
+31
View File
@@ -0,0 +1,31 @@
export interface ConsultPreset {
/** 预填需求内容（如产品名），便于后台识别客户意向 */
need?: string
/** 来源标记，便于后台统计转化来源 */
source?: string
}
/**
* 全站咨询弹窗状态
*
* 任意页面/组件调用 openConsult() 即可弹出咨询表单弹窗，
* 弹窗内提交到 useCms().submitForm()（POST /api/form/submit）。
* 用 useState 保证 SSR 与客户端共享同一份状态。
*/
export function useConsult() {
const isOpen = useState<boolean>('consult-open', () => false)
const presetNeed = useState<string>('consult-preset-need', () => '')
const source = useState<string>('consult-source', () => '')
function openConsult(preset?: ConsultPreset) {
presetNeed.value = preset?.need || ''
source.value = preset?.source || ''
isOpen.value = true
}
function closeConsult() {
isOpen.value = false
}
return { isOpen, presetNeed, source, openConsult, closeConsult }
}
app/composables/useContactForm.ts
+71
View File
@@ -0,0 +1,71 @@
import { reactive, ref } from 'vue'
/** 后端 errcode → 前端友好文案 */
const ERR_TEXT: Record<string, string> = {
TOO_FREQUENT: '操作过于频繁，请稍后再试',
DUPLICATE_PENDING: '您已有一条待处理的留言，请耐心等待我们与您联系',
CAPTCHA_INVALID: '滑块验证已失效，请重新验证',
CAPTCHA_EXPIRED: '滑块验证已过期，请重新验证',
CAPTCHA_FAILED: '滑块验证未通过，请重试',
INVALID_NAME: '请输入有效的姓名（1-20 字）',
INVALID_PHONE: '联系电话格式不正确（支持港澳台及海外号码）',
INVALID_CONTENT: '留言内容需 5-500 字',
UPSTREAM_ERROR: '提交失败，请稍后重试'
}
/**
* 留言表单提交逻辑（前端）。
* 负责：蜜罐静默、调 /api/form/submit、错误码映射到友好提示。
* 真正的校验/限流/去重在服务端完成。
*/
export function useContactForm(type = 'contact') {
const form = reactive({ name: '', phone: '', content: '' })
const honeypot = ref('') // 蜜罐字段：机器人易填，正常人不可见
const submitting = ref(false)
const success = ref(false)
const message = ref('')
const messageType = ref<'success' | 'error'>('success')
async function submit(captcha: { token: string; x: number }) {
// 蜜罐命中：假装成功，不真正提交（迷惑机器人）
if (honeypot.value.trim()) {
success.value = true
messageType.value = 'success'
message.value = '提交成功，我们会尽快与您联系！'
form.name = form.phone = form.content = ''
honeypot.value = ''
return
}
submitting.value = true
message.value = ''
success.value = false
try {
await $fetch('/api/form/submit', {
method: 'POST',
body: {
type,
name: form.name,
phone: form.phone,
content: form.content,
captchaToken: captcha.token,
captchaX: captcha.x
}
})
success.value = true
messageType.value = 'success'
message.value = '提交成功，我们会尽快与您联系！'
form.name = ''
form.phone = ''
form.content = ''
} catch (e: any) {
const code = e?.data?.errcode || e?.statusMessage || 'UPSTREAM_ERROR'
messageType.value = 'error'
message.value = ERR_TEXT[code] || ERR_TEXT.UPSTREAM_ERROR
} finally {
submitting.value = false
}
}
return { form, honeypot, submitting, success, message, messageType, submit }
}
app/composables/useFeatures.ts
+142
View File
@@ -0,0 +1,142 @@
import { computed } from 'vue'
import { useSite } from './useSite'
import type { FeatureItem, FeatureSectionSetting, HomeBlocks } from '~/types'
/**
* 首页「优势模块」统一数据来源
*
* 配置来自后台 cms_website_setting.features（经 getSiteInfo 合并进 siteInfo.setting），
* 为 JSON 字符串。未配置 / 解析失败时回退到各模板自己的默认数据（defaultFeatures）。
*
* 兼容策略：
* - 完全未配置（siteSetting.features 不存在）→ 显示 defaultFeatures，标题走兜底
* - 已配置且 enabled=false → enabled=false，上层 v-if 隐藏整块
* - 已配置但 items 为空 → 回退到 defaultFeatures（避免空白区）
* - items 超过 4 个 → 截断到 4 个（后台也限制最多 4 个）
*
* 2026-08-05 新增「首页区块总览」新结构：
* { hero, advantages, products, cases, news, banner, cta }
* 同时保留对旧结构（顶层 enabled/title/subtitle/items/heroFeatures）的兼容。
*
* @param defaultFeatures 模板默认卡片（各模板 FeatureSection 传入自己的硬编码项）
*/
export function useFeatures(defaultFeatures: FeatureItem[] = []) {
const { siteSetting } = useSite()
const config = computed<FeatureSectionSetting | null>(() => {
const raw = siteSetting.value?.features
if (!raw) return null
try {
const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw
if (parsed && typeof parsed === 'object') return parsed as FeatureSectionSetting
return null
} catch {
return null
}
})
/** 是否已配置（用于区分「后台显式关闭」与「未接入」） */
const configured = computed(() => !!config.value)
/**
* 判断是否为新结构（区块化）
* 新结构至少包含 hero 或 advantages 字段。
*/
const isBlockMode = computed(() => {
const c = config.value
if (!c) return false
return !!(c.hero || c.advantages)
})
/** 是否显示优势模块：未配置默认显示；已配置以 enabled 为准（默认 true） */
const enabled = computed(() => {
const c = config.value
if (!c) return true
// 新结构：读 advantages.enabled；旧结构：读顶层 enabled
if (isBlockMode.value) {
return c.advantages?.enabled !== false
}
return c.enabled !== false
})
const title = computed(() => {
const c = config.value
if (!c) return '我们的优势'
if (isBlockMode.value) return c.advantages?.title || '我们的优势'
return c.title || '我们的优势'
})
const subtitle = computed(() => {
const c = config.value
if (!c) return ''
if (isBlockMode.value) return c.advantages?.subtitle || ''
return c.subtitle || ''
})
const items = computed<FeatureItem[]>(() => {
const c = config.value
const cfgItems = isBlockMode.value ? c?.advantages?.items : c?.items
if (!cfgItems || !Array.isArray(cfgItems) || cfgItems.length === 0) {
return defaultFeatures
}
return cfgItems.slice(0, 4).map((it) => ({
title: it?.title || '',
desc: it?.desc || '',
icon: it?.icon || 'box'
}))
})
/** Hero 首屏右侧特性卡片文案（纯文本），空数组时上层回退模板默认值 */
const heroFeatures = computed<string[]>(() => {
const c = config.value
const hf = isBlockMode.value ? c?.hero?.features : c?.heroFeatures
if (!hf || !Array.isArray(hf) || hf.length === 0) return []
return hf.slice(0, 4).map((s) => String(s ?? '').trim()).filter(Boolean)
})
/**
* 首页各区块显示开关。
* 未配置（或旧结构）时，除预留位 products/cases/news/banner/cta 默认 false 外，
* hero 与 advantages 默认 true；news/cta 在 template-01 有实际内容，旧结构下默认 true。
*/
const homeBlocks = computed<Required<Pick<HomeBlocks, 'hero' | 'advantages' | 'products' | 'cases' | 'news' | 'banner' | 'cta'>>>(() => {
const c = config.value
const defaults = {
hero: true,
advantages: true,
products: false,
cases: false,
news: true,
banner: true,
cta: true
}
if (!c) return defaults
if (isBlockMode.value) {
return {
hero: c.hero?.enabled !== false,
advantages: c.advantages?.enabled !== false,
// 产品/案例为预留位，默认不显示，需后台显式开启
products: c.products?.enabled === true,
cases: c.cases?.enabled === true,
// 新闻/CTA 为多数模板首页实际区块，默认显示，除非后台显式关闭
news: c.news?.enabled !== false,
banner: c.banner?.enabled !== false,
cta: c.cta?.enabled !== false
}
}
// 旧结构：只有 advantages/hero 的语义；保留 news/cta 默认显示以兼容存量站点
return {
hero: c.enabled !== false,
advantages: c.enabled !== false,
products: false,
cases: false,
news: true,
banner: true,
cta: true
}
})
return { configured, enabled, title, subtitle, items, heroFeatures, homeBlocks, isBlockMode }
}
app/composables/useFileUrl.ts
+29
View File
@@ -0,0 +1,29 @@
/**
* 文件 URL 处理
* 将后端返回的相对路径转为通过代理访问的 URL
*/
/** 文件代理基础路径 */
export function useFileUrl() {
const _config = useRuntimeConfig()
/**
* 将文件路径转为可访问的 URL
* - 完整 URL（http/https）直接返回
* - 相对路径通过 /api/file/ 代理
*/
function fileUrl(path?: string | null): string {
if (!path) return ''
// 完整 URL 直接返回
if (path.startsWith('http://') || path.startsWith('https://')) {
return path
}
// 相对路径通过代理
const cleanPath = path.startsWith('/') ? path.slice(1) : path
return `/api/file/${cleanPath}`
}
return { fileUrl }
}
app/composables/useModuleRoute.ts
+228
View File
@@ -0,0 +1,228 @@
import { computed, shallowRef, type Component } from 'vue'
import { useNuxtApp, useRoute, useRequestURL } from '#imports'
import { useSite } from './useSite'
import { useTemplate } from './useTemplate'
import { usePageSeo, useJsonLd, useBreadcrumbSeo } from '~/composables/usePageSeo'
type ModuleKey = 'article' | 'product' | 'case'
const MODULE_COMPONENTS: Record<ModuleKey, { list: string; detail: string }> = {
article: { list: 'NewsList', detail: 'NewsDetail' },
product: { list: 'ProductList', detail: 'ProductDetail' },
case: { list: 'CaseList', detail: 'CaseDetail' }
}
const MODULE_TITLE: Record<ModuleKey, string> = {
article: '新闻资讯',
product: '产品中心',
case: '案例展示'
}
/** 取当前站点 origin（服务端/客户端通用），用于结构化数据图片绝对化 */
function getOriginForSeo(): string {
if (import.meta.client) return window.location.origin
try {
return useRequestURL().origin
} catch {
return ''
}
}
/** 相对 URL 转绝对（结构化数据 image 必须为绝对地址） */
function toAbsUrl(url: string, origin: string): string {
if (/^https?:\/\//.test(url)) return url
if (!origin) return url
try {
return new URL(url, origin).toString()
} catch {
return url
}
}
/**
* 详情页 SEO 注入：拉取详情数据并设置 TDK + OG + 结构化数据 + 面包屑。
* 与详情组件内部 useFetch 使用相同 key（article-${id} 等），Nuxt 自动去重，不重复请求。
* 覆盖全部 9 套模板的 article/product/case 详情页，避免逐模板硬编码。
*/
function injectDetailSeo(
module: ModuleKey,
route: ReturnType<typeof useRoute>,
id: string,
siteInfo: ReturnType<typeof useSite>['siteInfo'],
currentNav: ReturnType<typeof computed>,
runWithContext: <T>(fn: () => T) => T
) {
return (async () => {
const detailKey = `${module}-${id}`
// useFetch 同样依赖 Nuxt 实例：本函数在 useModuleRoute 的多个 await 之后才执行，
// 异步上下文已丢失，必须显式 runWithContext 包裹，否则 SSR 直接 500。
const { data: detail } = await runWithContext(() =>
useFetch<any>(`/api/${module}/detail?id=${id}`, { key: detailKey })
)
const d = detail.value
const title = d?.title || d?.productName || MODULE_TITLE[module]
const description = stripHtml(
d?.summary || d?.description || d?.subtitle || ''
).slice(0, 160) || undefined
const image = d?.image || d?.cover || d?.photo || undefined
const keywords = Array.isArray(d?.tags)
? d.tags.join(',')
: (typeof d?.tags === 'string' ? d.tags : undefined)
const publishedTime = d?.publishTime || d?.createTime || undefined
const modifiedTime = d?.updateTime || undefined
const origin = getOriginForSeo()
const absImage = image ? toAbsUrl(image, origin) : undefined
runWithContext(() => {
usePageSeo(
{
title,
description,
keywords,
path: route.path,
image: absImage,
type: module === 'article' ? 'article' : module === 'product' ? 'product' : 'website',
publishedTime,
modifiedTime
},
siteInfo.value
)
// 结构化数据
if (module === 'article') {
useJsonLd({
'@context': 'https://schema.org',
'@type': 'Article',
headline: title,
description: description || '',
...(absImage ? { image: [absImage] } : {}),
datePublished: publishedTime,
dateModified: modifiedTime,
author: { '@type': 'Organization', name: siteInfo.value?.websiteName || '' }
})
} else if (module === 'product') {
useJsonLd({
'@context': 'https://schema.org',
'@type': 'Product',
name: title,
description: description || '',
...(absImage ? { image: [absImage] } : {}),
...(d?.price ? { offers: { '@type': 'Offer', price: d.price, priceCurrency: 'CNY' } } : {})
})
} else {
useJsonLd({
'@context': 'https://schema.org',
'@type': 'CreativeWork',
name: title,
description: description || '',
...(absImage ? { image: [absImage] } : {})
})
}
// 面包屑
useBreadcrumbSeo([
{ name: '首页', url: '/' },
{ name: currentNav.value?.title || MODULE_TITLE[module], url: `/${module}` },
{ name: title, url: route.path }
])
})
})()
}
/**
* 模块路由（栏目列表 / 详情 二合一）。
*
* URL 规范（按模块名单数 + navId 运行时判定）：
* 列表（栏目）：/{module} 或 /{module}/{navigationId}
* 详情（条目）：/{module}/{id}
* 同一 /{module}/{id} 下，靠「id 是否该模块已知栏目 navigationId」判定：
* 命中 → 渲染列表组件（按 navigationId 过滤）；否则 → 渲染详情组件。
*
* 旧链接（/news、/newss、/products、/cases）由
* server/middleware/z-news-detail-redirect.ts 统一 301 到新模块名。
*/
export async function useModuleRoute(module: ModuleKey) {
const route = useRoute()
// 先捕获 Nuxt 实例：下面有 await，之后再直接调用依赖实例的 composable（如 usePageSeo →
// useRuntimeConfig）会因失去异步上下文而报 "A composable that requires access to the
// Nuxt instance was called outside of..."，需用 runWithContext 显式恢复上下文。
const nuxtApp = useNuxtApp()
const { loadTemplate } = useTemplate()
const { siteInfo, allNavigations, fetchSiteInfo } = useSite()
await fetchSiteInfo()
const components = await loadTemplate()
// 当前模块下所有栏目 navigationId（用于区分「列表」与「详情」）
// 关键：用完整导航树 allNavigations（top+bottom，不限 top===1），而非仅顶部导航；
// 且以 path 首段 /{module}/ 为主判定（与 getNavLink 生成的链接一致），
// model 仅作兜底——CMS 对 case 等模块 model 字段常缺失/不一致，纯靠 model 会漏判。
const moduleNavIds = computed<Set<string>>(() => {
const set = new Set<string>()
const collect = (items: any[] = []) => {
for (const it of items) {
if (it.navigationId != null) {
const path = it.path || it.categoryPath || ''
const firstSeg = path.split('/').filter(Boolean)[0]
const isModule =
firstSeg === module || // path 前缀 /{module}/（与 getNavLink 一致）
it.model === module // model 兜底
if (isModule) set.add(String(it.navigationId))
}
if (it.children?.length) collect(it.children)
}
}
collect(allNavigations.value)
return set
})
const id = String(route.params.id)
const isColumn = moduleNavIds.value.has(id)
const currentNav = computed(() => {
const navId = String(route.params.id)
const find = (items: any[] = []): any => {
for (const it of items) {
if (String(it.navigationId) === navId) return it
if (it.children?.length) {
const f = find(it.children)
if (f) return f
}
}
return null
}
return find(allNavigations.value)
})
const pageComponent = shallowRef<Component | null>(null)
const comp = isColumn
? components?.[MODULE_COMPONENTS[module].list as keyof typeof components]
: components?.[MODULE_COMPONENTS[module].detail as keyof typeof components]
pageComponent.value = (comp as Component | null) || null
// ===== SEO 注入 =====
if (!isColumn) {
// 详情页：通过统一入口注入 TDK + 结构化数据 + 面包屑（覆盖全部 9 套模板）。
// 与详情组件内部 useFetch 使用相同 key，Nuxt 自动去重，不重复请求。
await injectDetailSeo(module, route, id, siteInfo, currentNav, (fn) => nuxtApp.runWithContext(fn))
} else {
// 栏目（列表）页：用栏目标题 + 干净路径（去掉 ?navId 等查询参数）作为 canonical。
nuxtApp.runWithContext(() => {
usePageSeo(
{
title: currentNav.value?.title || MODULE_TITLE[module],
path: route.path
},
siteInfo.value
)
// 搜索结果页（带 ?keywords=）属于低质量/易重复页面，禁止被索引
if (route.query.keywords) {
useSeoMeta({ robots: 'noindex, follow' })
}
})
}
return { route, pageComponent, isColumn, currentNav }
}
app/composables/usePageSeo.ts
+123
View File
@@ -0,0 +1,123 @@
import { useHead, useRequestURL, useSeoMeta, useRuntimeConfig } from '#app'
import type { CmsSiteInfo } from '~/types'
type SeoInput = {
title: string
description?: string
keywords?: string
path?: string
image?: string
type?: 'website' | 'article' | 'product'
siteName?: string
publishedTime?: string
modifiedTime?: string
}
function getSiteOrigin() {
if (import.meta.client) return window.location.origin
try {
return useRequestURL().origin
} catch {
return ''
}
}
/**
* 页面 SEO 设置
* 设置 TDK、Open Graph、Twitter Card、Canonical URL
*/
export function usePageSeo(input: SeoInput, site?: CmsSiteInfo | null) {
const origin = getSiteOrigin()
const url = input.path && origin ? new URL(input.path, origin).toString() : undefined
const overrideSiteName = (useRuntimeConfig().public.siteName as string) || ''
const siteName = input.siteName || overrideSiteName || site?.websiteName || ''
const description = input.description || site?.comments || site?.content || ''
const keywords = input.keywords || site?.keywords || ''
const image = input.image || site?.websiteLogo || ''
const fullTitle = siteName ? `${input.title} - ${siteName}` : input.title
useSeoMeta({
title: fullTitle,
description,
keywords,
ogTitle: input.title,
ogDescription: description,
ogType: input.type || 'website',
ogSiteName: siteName,
...(image ? { ogImage: image } : {}),
...(url ? { ogUrl: url } : {}),
twitterCard: 'summary_large_image',
twitterTitle: input.title,
twitterDescription: description,
...(image ? { twitterImage: image } : {}),
...(input.publishedTime ? { articlePublishedTime: input.publishedTime } : {}),
...(input.modifiedTime ? { articleModifiedTime: input.modifiedTime } : {})
})
if (url) {
useHead({
link: [{ rel: 'canonical', href: url }]
})
}
}
/**
* 注入 JSON-LD 结构化数据
*/
export function useJsonLd(data: Record<string, unknown> | Record<string, unknown>[]) {
const items = Array.isArray(data) ? data : [data]
useHead({
script: items.map((item) => ({
type: 'application/ld+json',
innerHTML: JSON.stringify(item)
}))
})
}
/**
* 注入企业组织结构化数据
*/
export function useOrganizationSeo(site?: CmsSiteInfo | null) {
if (!site) return
const origin = getSiteOrigin()
const rawPhone = site.phone || ''
const phone = rawPhone && !rawPhone.includes('*')
? rawPhone
: (useRuntimeConfig().public.phone as string) || site.config?.tel || rawPhone || ''
const email = site.config?.email || site.email || ''
const address = site.address || site.config?.address || ''
const logo = site.websiteLogo || ''
const overrideSiteName = (useRuntimeConfig().public.siteName as string) || ''
useJsonLd({
'@context': 'https://schema.org',
'@type': 'Organization',
name: overrideSiteName || site.websiteName || '',
url: origin,
...(logo ? { logo: new URL(logo, origin).toString() } : {}),
...(phone ? { telephone: phone } : {}),
...(email ? { email: email } : {}),
...(address ? { address: { '@type': 'PostalAddress', address } } : {})
})
}
/**
* 注入面包屑结构化数据
*/
export function useBreadcrumbSeo(items: { name: string; url: string }[]) {
const origin = getSiteOrigin()
useJsonLd({
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: items.map((item, index) => ({
'@type': 'ListItem',
position: index + 1,
name: item.name,
item: new URL(item.url, origin).toString()
}))
})
}
app/composables/useRecommend.ts
+165
View File
@@ -0,0 +1,165 @@
import { computed, type Ref } from 'vue'
import type { Article, Product, CaseItem } from '~/types'
/**
* 读取「推荐 / 置顶」精选内容的共享 composable
*
* 用途：首页文章 / 产品 / 案例区块读取后台勾选的推荐或置顶内容，
* 抽成统一逻辑后供任意模板的推荐区块组件复用。
*
* 数据源：
* - 文章 article：上游 cms-article 返回 `recommend` 字段（0/1）→ 推荐资讯
* - 产品 product：上游 cms-product 返回 `top` 字段（>0 为置顶）→ 置顶/推荐产品
* - 案例 case： 上游 cms-case 当前表结构【无】recommend/top 字段，
* 故默认回退为「最新案例」；代码已预留过滤，后台字段上线即自动切换为推荐
*
* 过滤采用多字段兼容判定（recommend / top / isTop / isRecommend），
* 兼容不同 CMS 版本与模型的命名差异。
*
* 排序：推荐/置顶项优先，其次按 top 值、sortNumber、创建时间降序。
*
* 实现要点（避免 SSR 水合问题）：
* - 使用 useFetch 而非 $fetch，让 Nuxt 在 SSR 时直接调用 server handler 并序列化到 payload，
* 客户端水合时不再重新请求，确保 SSR/CSR 看到的数据完全一致。
* - SSR 时从 useRequestEvent().context.tenant 读取 tenantId 并透传给内部调用，
* 防止 server/api 内部 loopback 调用因丢失 Host 上下文而无法解析租户。
*/
export type RecommendType = 'article' | 'product' | 'case'
const PATH_MAP: Record<RecommendType, string> = {
article: '/api/article/list',
product: '/api/product/list',
case: '/api/case/list'
}
/** 多字段兼容：判定单条记录是否属于「推荐 / 置顶」 */
function isRecommended(item: any): boolean {
if (!item) return false
const top = Number(item.top ?? 0)
const isTop = Number(item.isTop ?? 0)
const isRecommend = Number(item.isRecommend ?? 0)
const recommend = item.recommend
return (
top > 0 ||
isTop > 0 ||
isRecommend > 0 ||
recommend === 1 ||
recommend === true
)
}
/** 推荐/置顶优先排序 */
function sortRecommended<T extends Record<string, any>>(list: T[]): T[] {
return [...list].sort((a, b) => {
const ra = isRecommended(a) ? 1 : 0
const rb = isRecommended(b) ? 1 : 0
if (ra !== rb) return rb - ra
const ta = Number(a?.top ?? 0)
const tb = Number(b?.top ?? 0)
if (tb !== ta) return tb - ta
const sa = Number(a?.sortNumber ?? 0)
const sb = Number(b?.sortNumber ?? 0)
if (sa !== sb) return sa - sb
const ca = a?.createTime ? new Date(a.createTime).getTime() : 0
const cb = b?.createTime ? new Date(b.createTime).getTime() : 0
return cb - ca
})
}
/**
* 统一解包列表：兼容 article（上游信封 {data:{list}}）与 product/case（{list}）
*
* 幂等设计：传入已经是数组时原样返回。useFetch 的 transform 在 payload 复用 /
* 重新校验等场景下有被再次施加于「已转换结果」的可能，若此时返回空数组会导致
* 区块凭空清空，故此处必须容忍数组入参。
*/
function unwrapList(res: any): any[] {
if (!res) return []
if (Array.isArray(res)) return res
const data = res?.data ?? res
if (Array.isArray(data?.list)) return data.list
if (Array.isArray(res?.list)) return res.list
return []
}
export interface UseRecommendOptions {
/** 展示条数（过滤 + 排序后截取），默认 3 */
limit?: number
/** 拉取池大小（用于覆盖全部推荐项，避免遗漏），默认 50 */
poolSize?: number
/**
* 无推荐项时是否回退最新内容。
* 默认：case=true（上游无推荐字段，展示最新案例）；article/product=false（返回空，区块按后台开关显示为空）
*/
fallbackToLatest?: boolean
/** 按栏目过滤（传 navigationId）；不传则全站跨栏目精选 */
navigationId?: number
}
export interface UseRecommendReturn<T> {
items: Ref<T[]>
loading: Ref<boolean>
error: Ref<string | null>
/** 占位：保持旧接口兼容；useFetch 自动处理数据获取，无需手动调用 */
load: () => Promise<void>
}
/**
* 读取推荐/置顶内容
* @example
* const { items } = useRecommend<Article>('article', { limit: 3 })
*/
export function useRecommend<T extends Record<string, any> = any>(
type: RecommendType,
options: UseRecommendOptions = {}
): UseRecommendReturn<T> {
const {
limit = 3,
poolSize = 50,
fallbackToLatest = type === 'case',
navigationId
} = options
// SSR 时透传租户上下文，避免内部 loopback 调用因 Host 被改写为 localhost
// 而无法解析租户。仅在原始请求未显式带 TenantId header 时才补充，防止
// useFetch 合并原始 header 与显式 header 导致重复值（上游 CMS 会报 SQL 错误）。
const event = useRequestEvent()
const tenantId = event?.context?.tenant?.tenantId as string | undefined
const originalTenantHeader = event?.node?.req?.headers?.tenantid as string | undefined
const needsTenantHeader = tenantId && !originalTenantHeader
const query: Record<string, any> = { page: 1, limit: poolSize }
if (navigationId) query.navigationId = navigationId
const key = `recommend:${type}:${navigationId ?? 'all'}:${poolSize}:${limit}:${fallbackToLatest ? 1 : 0}`
const { data, pending, error: fetchError } = useFetch<T[]>(PATH_MAP[type], {
key,
query,
headers: needsTenantHeader ? { TenantId: tenantId } : undefined,
transform: (res: any): T[] => {
const rawList = unwrapList(res)
const recommended = rawList.filter(isRecommended)
if (recommended.length > 0) {
return sortRecommended(recommended).slice(0, limit) as T[]
}
if (fallbackToLatest) {
return sortRecommended(rawList).slice(0, limit) as T[]
}
return [] as T[]
},
// 服务端获取失败时静默降级为空数组，避免页面 500
default: () => [] as T[]
})
const items = computed<T[]>(() => (data.value || []) as T[])
const loading = computed(() => pending.value)
const error = computed<string | null>(() => (fetchError.value ? String(fetchError.value) : null))
// 保持旧接口兼容：调用方仍可 await load()，但 useFetch 已经自动完成获取
async function load(): Promise<void> {
// no-op：useFetch 在 setup 中自动触发，客户端路由切换也会自动重新获取
}
return { items, loading, error, load }
}
app/composables/useSite.ts
+277
View File
@@ -0,0 +1,277 @@
import type { CmsSiteInfo, CmsNavigation, SiteConfig, SiteSetting, SocialLink, ApiEnvelope } from '~/types'
import { useApp } from './useApp'
import { useRuntimeConfig } from '#imports'
import { mapNavTitle } from '~/utils'
import { ensureFullUrl } from '~/utils/image'
/**
* 获取当前站点信息
* 调用 /api/site/info 代理接口
* 返回 CMS getSiteInfo 的完整数据，包括导航、配置等
*
* 站点名称 / Logo 优先使用应用信息（AppProduct）接口的数据，
* 回退到 CMS 站点信息（websiteName / websiteLogo）。
*/
export function useSite() {
// 应用产品信息（名称 / Logo 优先使用 AppProduct）
const { appName, appLogo, appIcon } = useApp()
const siteInfo = useState<CmsSiteInfo | null>('site-info', () => null)
const loading = useState<boolean>('site-loading', () => false)
const error = useState<string | null>('site-error', () => null)
async function fetchSiteInfo() {
// 已加载（SSR 已注入）则直接返回，避免重复请求 CMS
if (siteInfo.value) return siteInfo.value
loading.value = true
error.value = null
try {
const res = await $fetch<ApiEnvelope<CmsSiteInfo> | CmsSiteInfo>('/api/site/info')
const envelope = res as ApiEnvelope<CmsSiteInfo>
const data = envelope?.data ?? (res as CmsSiteInfo)
siteInfo.value = data
return data
} catch (e: any) {
error.value = e?.message || '获取站点信息失败'
return null
} finally {
loading.value = false
}
}
/**
* 顶部导航
*
* 后端 getSiteInfo 的 setSafeWebsiteNavigation 把栏目分到 topNavs / bottomNavs 两个数组，
* 但该分组函数不可靠、且数组名与实际内容常常相反：
* - 典型租户（如汇吉采）：真正置顶的菜单（首页/关于/核心业务…）被塞进 bottomNavs 且 top=1，
* 而 topNavs 仅含一条底部链接（资料下载, top=0）。
* - 也有租户（如 cz-hro）：topNavs 有数据但 top 标志不可靠（top=0），需直接信任后端分组。
*
* 因此以权威标志 `top === 1`（标记「应置顶」）合并两个数组来取顶部菜单，
* 不再依赖数组名 topNavs / bottomNavs：
* 1) 合并 topNavs + bottomNavs，取 top===1 且未隐藏/未删除的项；
* 2) 若没有任何 top===1 项（top 标志整体不可靠，如 cz-hro）→ 兜底信任 topNavs。
*/
const navigations = computed<CmsNavigation[]>(() => {
const top = [
...(siteInfo.value?.topNavs || []),
...(siteInfo.value?.bottomNavs || [])
]
.filter((nav) => nav.top === 1 && !nav.hide && !nav.deleted)
.map(mapNavTitle)
if (top.length) return top
// 兜底：top 标志不可靠时，直接信任后端 topNavs 分组
return (siteInfo.value?.topNavs || [])
.filter((nav) => !nav.hide && !nav.deleted)
.map(mapNavTitle)
})
/**
* 底部导航（页脚链接）：取 top!==1（含 top=0 或缺失）且未隐藏/未删除的项，
* 合并 topNavs + bottomNavs，与顶部菜单互斥、不重复。
*/
const bottomNavigations = computed<CmsNavigation[]>(() => {
return [
...(siteInfo.value?.topNavs || []),
...(siteInfo.value?.bottomNavs || [])
]
.filter((nav) => nav.top !== 1 && !nav.hide && !nav.deleted)
.map(mapNavTitle)
})
/**
* 完整导航树（合并 top + bottom，仅过滤 hide/deleted，不限 top/bottom）。
* 用于「栏目 navId 识别 / 栏目定位」等路由场景，覆盖 top!==1 的子栏目、页脚栏目。
* 注意：顶部菜单显示请仍用 `navigations`（top===1 过滤），不要混用。
*/
const allNavigations = computed<CmsNavigation[]>(() => {
const all = [
...(siteInfo.value?.topNavs || []),
...(siteInfo.value?.bottomNavs || [])
]
return all.filter((nav) => !nav.hide && !nav.deleted).map(mapNavTitle)
})
/** 站点配置 */
const siteConfig = computed<SiteConfig | null>(() => {
return siteInfo.value?.config || null
})
/** 站点功能设置（后台「网站设置」下发的开关集合，含 searchBtn / search 等） */
const siteSetting = computed<SiteSetting | null>(() => {
return siteInfo.value?.setting || null
})
/**
* 是否显示头部搜索框
* 受后台 setting.searchBtn（搜索按钮开关）控制；兼容 setting.search。
* 未配置时默认 true（全站显示），避免存量站点突然丢失搜索能力。
*/
const showHeaderSearch = computed<boolean>(() => {
const s = siteInfo.value?.setting
if (typeof s?.searchBtn === 'boolean') return s.searchBtn
if (typeof s?.search === 'boolean') return s.search
return true
})
/** 站点名称（环境变量覆盖 > CMS 站点信息(企业名称) > 应用信息(产品名)） */
const siteName = computed(() => {
const override = (useRuntimeConfig().public.siteName as string) || ''
return override || siteInfo.value?.websiteName || appName.value || ''
})
/** 站点 Logo（优先应用信息，回退 CMS 站点信息） */
const siteLogo = computed(() => {
return appLogo.value || siteInfo.value?.websiteLogo || ''
})
/**
* 站点图标（无 Logo 时用于 Logo 区回退：图标 + 网站名称）
* 优先级：应用图标 > CMS websiteIcon；统一 ensureFullUrl 补全路径。
*/
const siteIcon = computed(() => {
const raw = appIcon.value || siteInfo.value?.websiteIcon || ''
return raw ? ensureFullUrl(raw) : ''
})
/** 站点关键词 */
const siteKeywords = computed(() => {
return siteInfo.value?.keywords || ''
})
/**
* 联系电话
* 优先级：1) siteInfo.phone（完整号码） 2) 环境变量兜底 NUXT_PUBLIC_PHONE 3) config.tel
* 说明：后端 CMS 的 phone 字段可能因敏感策略返回脱敏值（含 *），此时用环境变量兜底。
*/
const phone = computed(() => {
const rawPhone = siteInfo.value?.phone || ''
if (rawPhone && !rawPhone.includes('*')) return rawPhone
return (useRuntimeConfig().public.phone as string) || siteInfo.value?.config?.tel || rawPhone || ''
})
/** 邮箱 */
const email = computed(() => {
return siteInfo.value?.config?.email || siteInfo.value?.email || ''
})
/** 地址（优先 siteInfo.address，其次 config.address） */
const address = computed(() => {
return siteInfo.value?.address || siteInfo.value?.config?.address || ''
})
/** ICP 备案号 */
const icpNo = computed(() => {
return siteInfo.value?.config?.icpNo || siteInfo.value?.icpNo || ''
})
/** 版权信息 */
const copyright = computed(() => {
return siteInfo.value?.config?.copyright || ''
})
/** 微信二维码（环境变量覆盖 > config.wxQrcode > 顶层 qrCode） */
const wxQrcode = computed(() => {
const override = (useRuntimeConfig().public.wxQrcode as string) || ''
return override || siteInfo.value?.config?.wxQrcode || (siteInfo.value?.qrCode as string) || ''
})
/** 品牌标语 / Slogan（优先站点顶层 slogan，其次 config.slogan） */
const slogan = computed(() => {
return siteInfo.value?.slogan || (siteInfo.value?.config as SiteConfig | undefined)?.slogan || ''
})
/** 官网域名（优先 siteInfo.domain，其次 config.Domain / config.SysDomain） */
const officialWebsite = computed(() => {
const cfg = siteInfo.value?.config as SiteConfig | undefined
return siteInfo.value?.domain || cfg?.Domain || cfg?.SysDomain || ''
})
/** 官网域名（补全协议，用于 <a :href>） */
const officialWebsiteUrl = computed(() => {
const raw = officialWebsite.value
if (!raw) return ''
return /^https?:\/\//i.test(raw) ? raw : `https://${raw}`
})
/** 社交外部链接（后台「网站设置」录入，标准字段名 socialLinks；兼容旧 links 别名），URL 统一补全协议 */
const socialLinks = computed<SocialLink[]>(() => {
const cfg = siteInfo.value?.config as SiteConfig | undefined
const raw =
(siteInfo.value?.socialLinks as SocialLink[] | unknown | undefined) ??
(siteInfo.value?.links as SocialLink[] | unknown | undefined) ??
cfg?.socialLinks ??
cfg?.links
let list: SocialLink[] = []
if (Array.isArray(raw)) list = raw as SocialLink[]
else if (typeof raw === 'string') {
try {
const parsed = JSON.parse(raw)
list = Array.isArray(parsed) ? (parsed as SocialLink[]) : []
} catch {
list = []
}
}
return list.map((l) => ({
...l,
url: l.url && !/^https?:\/\//i.test(l.url) ? `https://${l.url}` : l.url
}))
})
/** 到期时间 */
const expirationTime = computed(() => {
return siteInfo.value?.expirationTime || ''
})
/**
* 模板目录名（template-XX）：【code 优先，主键兜底】
*
* templateCode（app_template.code）与前端 app/templates/ 目录一一对应，是权威标识；
* templateId 主键存在跳号风险（历史上 id=8 缺失导致整体错位一位），仅在 code 缺失时兜底。
* 为空返回 '' 由上层回退默认模板。
*/
const templateId = computed(() => {
return resolveTemplateKey(siteInfo.value?.templateCode, siteInfo.value?.templateId)
})
/**
* 按主键推导的模板目录名（兜底候选）
* 供 useTemplate.loadTemplate 在「code 指向的目录不存在」时二次尝试，
* 避免直接跌回 template-01 造成风格完全错乱。
*/
const templateIdFallback = computed(() => {
const byId = toTemplateKey(siteInfo.value?.templateId)
return byId === templateId.value ? '' : byId
})
return {
siteInfo,
navigations,
bottomNavigations,
allNavigations,
siteConfig,
siteSetting,
showHeaderSearch,
siteName,
siteLogo,
siteIcon,
siteKeywords,
phone,
email,
address,
icpNo,
copyright,
wxQrcode,
slogan,
officialWebsite,
officialWebsiteUrl,
socialLinks,
expirationTime,
templateId,
templateIdFallback,
loading,
error,
fetchSiteInfo
}
}
app/composables/useSubscription.ts
+45
View File
@@ -0,0 +1,45 @@
import type { SubscriptionStatus } from '~/types'
/**
* 订阅状态校验
* 通过 /api/subscription/status 查询当前租户应用的订阅状态
*/
export function useSubscription() {
const status = useState<SubscriptionStatus | null>('subscription-status', () => null)
const loading = useState<boolean>('subscription-loading', () => false)
const expired = computed(() => {
if (!status.value) return false
return status.value.expired === true || status.value.status === 'expired'
})
async function fetchStatus() {
loading.value = true
try {
const res = await $fetch<SubscriptionStatus>('/api/subscription/status')
status.value = res
return res
} catch {
// 接口异常时默认允许访问
status.value = { subscribed: true, status: 'active', expired: false }
return status.value
} finally {
loading.value = false
}
}
/** 检查是否过期，过期则跳转续费页 */
async function checkAndRedirect() {
await fetchStatus()
if (expired.value) {
await navigateTo('/renewal')
}
}
return {
status,
loading,
expired,
fetchStatus,
checkAndRedirect
}
}
app/composables/useTemplate.ts
+172
View File
@@ -0,0 +1,172 @@
import type { Component } from 'vue'
import { useApp } from './useApp'
import { useSite } from './useSite'
/** 模板配置 */
export interface TemplateConfig {
/** 模板 ID */
id: string
/** 模板名称 */
name: string
/** 模板描述 */
description: string
/** 预览图路径 */
preview: string
/** 支持的模块 */
supportedModules: string[]
/** 主题配置 */
themeConfig?: {
primaryColor?: string
secondaryColor?: string
fontFamily?: string
}
}
/** 模板组件映射 */
export interface TemplateComponents {
/** 首页布局 */
Home: Component
/** 通用 CMS 页面布局 */
Page?: Component
/** 文章列表页 */
NewsList?: Component
/** 文章详情页 */
NewsDetail?: Component
/** 产品列表页 */
ProductList?: Component
/** 产品详情页 */
ProductDetail?: Component
/** 案例列表页 */
CaseList?: Component
/** 案例详情页 */
CaseDetail?: Component
/** 联系我们页 */
Contact?: Component
/** 关于我们页 */
About?: Component
/** Header 组件 */
Header: Component
/** Footer 组件 */
Footer: Component
}
/**
* 模板加载器
* 根据模板 ID 动态加载对应模板组件
*/
export function useTemplate() {
const runtimePublic = useRuntimeConfig().public
const defaultTemplateId = runtimePublic.templateId as string
// 强制模板 ID（本地调试用，最高优先级，覆盖应用/站点绑定的模板）
const forceTemplateId = (runtimePublic.forceTemplateId as string) || ''
// 应用 / 站点绑定的模板 ID（应用库优先，站点库次之）
const { appTemplateId } = useApp()
const { templateId: siteTemplateId, templateIdFallback } = useSite()
/** 手动覆盖的模板 ID（保持可写，兼容原有行为；默认等于默认配置） */
const templateId = useState<string>('template-id', () => defaultTemplateId)
/** 解析后的实际模板 ID：
* 强制(本地 env 调试，最高优先级) > 站点(cms_website，按租户隔离的真相源) > 应用(app_product) > 默认配置
* 站点优先于应用：同一产品被多租户共享时，应用级 template_id 不能盖掉租户各自在 cms_website 中的选择。
* 注：forceTemplateId 仅本地调试设置，生产环境为空，因此不影响线上解析。 */
const resolvedTemplateId = computed(() => {
return forceTemplateId || siteTemplateId.value || appTemplateId.value || defaultTemplateId
})
/** 所有已注册的模板 */
const templates = useState<Record<string, TemplateConfig>>('templates-registry', () => ({}))
/** 模板组件缓存：放在模块级 Map 中，避免 devalue 序列化组件对象 */
const templateComponentsCache = new Map<string, TemplateComponents>()
/** 注册模板 */
function registerTemplate(config: TemplateConfig) {
templates.value[config.id] = config
}
/** 当前模板配置 */
const currentTemplate = computed(() => {
return templates.value[resolvedTemplateId.value] || null
})
/**
* 动态导入模板组件
* Nuxt 自动导入 app/templates/[id]/ 下的组件（~ 别名指向 app/）
*/
async function loadTemplate(id?: string): Promise<TemplateComponents | null> {
// [临时验证日志] 确认后台选用模板已通过 getSiteInfo → siteTemplateId 生效；验证通过后删除本行
if (import.meta.dev) {
console.log('[useTemplate] loadTemplate id=', id, '| resolvedTemplateId=', resolvedTemplateId.value)
}
const targetId = id || resolvedTemplateId.value
templateId.value = targetId
// 命中缓存则直接返回（同一次页面生命周期内避免重复 import）
const cached = templateComponentsCache.get(targetId)
if (cached) {
return cached
}
try {
// 动态导入模板组件（~ 别名指向 app/，因此模板路径为 app/templates/[id]/）
const header = (await import(`~/templates/${targetId}/components/Header.vue`)).default
const footer = (await import(`~/templates/${targetId}/components/Footer.vue`)).default
const home = (await import(`~/templates/${targetId}/pages/Home.vue`)).default
const components: TemplateComponents = { Header: header, Footer: footer, Home: home }
// 可选组件：尝试加载，不存在则忽略
// 注意：模板字符串必须直接写在 import() 内（与上方 Header/Footer/Home 一致），
// 否则 Vite 无法静态分析「变量路径」，运行时会 import 失败、
// 被 try/catch 静默吞掉，导致 Page 等可选组件永远 undefined → 页面卡在 SiteLoading。
const optionalComponents: { key: keyof TemplateComponents; file: string }[] = [
{ key: 'Page', file: 'Page' },
{ key: 'NewsList', file: 'NewsList' },
{ key: 'NewsDetail', file: 'NewsDetail' },
{ key: 'ProductList', file: 'ProductList' },
{ key: 'ProductDetail', file: 'ProductDetail' },
{ key: 'CaseList', file: 'CaseList' },
{ key: 'CaseDetail', file: 'CaseDetail' },
{ key: 'Contact', file: 'Contact' },
{ key: 'About', file: 'About' }
]
for (const { key, file } of optionalComponents) {
try {
const mod = await import(`~/templates/${targetId}/pages/${file}.vue`)
if (mod.default) {
components[key] = mod.default
}
} catch {
// 可选组件不存在时跳过
}
}
// 缓存并返回
templateComponentsCache.set(targetId, components)
return components
} catch {
// 目录不存在（如后台 code 指向前端尚未落地的模板）：
// 先尝试「按主键推导」的兜底目录，仍失败才跌回默认模板，避免直接错乱成 template-01。
const fallbackById = templateIdFallback.value
if (fallbackById && targetId !== fallbackById) {
return loadTemplate(fallbackById)
}
if (targetId !== 'template-01') {
return loadTemplate('template-01')
}
return null
}
}
return {
templateId,
resolvedTemplateId,
templates,
currentTemplate,
registerTemplate,
loadTemplate
}
}
app/composables/useTenant.ts
+25
View File
@@ -0,0 +1,25 @@
import type { TenantContext } from '~/types'
/**
* 获取当前租户上下文
* 服务端从 event.context.tenant 获取（由 Server Middleware 设置）
* 客户端从 SSR 注入的 payload 获取
*/
export function useTenant() {
const ctx = useState<TenantContext>('tenant-context', () => ({
tenantId: useRuntimeConfig().public.tenantId as string,
appId: useRuntimeConfig().public.appId as string,
templateId: useRuntimeConfig().public.templateId as string,
source: 'env'
}))
// SSR 时从服务端请求头获取
if (import.meta.server) {
const event = useRequestEvent()
if (event?.context?.tenant) {
ctx.value = event.context.tenant as TenantContext
}
}
return ctx
}
app/layouts/blank.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<div class="min-h-screen bg-white">
<slot />
</div>
</template>
<script setup lang="ts">
// 空白布局：不含 Header / Footer，用于续费页、预览页等
</script>
app/layouts/default.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<div class="min-h-screen flex flex-col bg-white" :data-template-id="resolvedTemplateId || 'template-01'">
<!-- 模板 Header -->
<SiteHeader />
<!-- 主内容区 -->
<main class="flex-1">
<slot />
</main>
<!-- 模板 Footer -->
<SiteFooter />
<!-- 全站咨询弹窗（由 useConsult() 控制开关） -->
<ConsultDialog />
</div>
</template>
<script setup lang="ts">
// 默认布局：包含 Header + 内容 + Footer
// 模板组件内部会根据当前 templateId 动态加载对应模板
import '~/templates/template-01/theme.css'
import '~/templates/template-02/theme.css'
import '~/templates/template-04/theme.css'
import '~/templates/template-07/theme.css'
import '~/templates/template-08/theme.css'
import '~/templates/template-09/theme.css'
import '~/templates/template-10/theme.css'
const { resolvedTemplateId } = useTemplate()
</script>
app/pages/404.vue
+29
View File
@@ -0,0 +1,29 @@
<template>
<div class="min-h-screen flex items-center justify-center bg-gray-50">
<div class="text-center px-6">
<p class="text-7xl font-bold text-gray-300 mb-4">404</p>
<h1 class="text-2xl font-semibold text-gray-800 mb-3">页面未找到</h1>
<p class="text-gray-500 mb-8">抱歉，您访问的页面不存在或已被移除。</p>
<NuxtLink
to="/"
class="inline-flex items-center justify-center px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
返回首页
</NuxtLink>
</div>
</div>
</template>
<script setup lang="ts">
/**
* 404 页面（使用 blank 布局避免 Header/Footer 干扰）
*/
definePageMeta({
layout: 'blank'
})
// 错误页禁止被搜索引擎收录
useSeoMeta({
robots: 'noindex, nofollow'
})
</script>
app/pages/[slug].vue
+53
View File
@@ -0,0 +1,53 @@
<template>
<div>
<Component :is="templatePage" v-if="templatePage" />
<SiteLoading v-else />
</div>
</template>
<script setup lang="ts">
/**
* 动态 CMS 页面路由（兼容入口）
* CMS 导航主要使用 /page/:id, /article/:id, /product/:id 格式
* 此路由作为兼容入口，处理旧式路径如 /about, /services 等
*/
const route = useRoute()
const slug = route.params.slug as string
const { loadTemplate } = useTemplate()
const { siteInfo, siteName, navigations, fetchSiteInfo } = useSite()
await fetchSiteInfo()
const templatePage = shallowRef<Component | null>(null)
// 同步加载当前模板（SSR/客户端路由切换均直接 await，避免先闪 SiteLoading）
const components = await loadTemplate()
templatePage.value = components?.Page || null
// 尝试从导航中匹配 slug
const matchedNav = computed(() => {
const navs = navigations.value || []
const findNav = (items: any[]): any => {
for (const item of items) {
if (item.path === `/${slug}` || item.code === slug) return item
if (item.children?.length) {
const found = findNav(item.children)
if (found) return found
}
}
return null
}
return findNav(navs)
})
usePageSeo(
{
title: matchedNav.value?.title || slug,
path: `/${slug}`
},
siteInfo.value
)
</script>
app/pages/about.vue
+35
View File
@@ -0,0 +1,35 @@
<template>
<div>
<Component :is="pageComponent" v-if="pageComponent" />
<SiteLoading v-else />
</div>
</template>
<script setup lang="ts">
/**
* 关于我们路由（独立页面类型，与 contact 同级）
*/
const { loadTemplate } = useTemplate()
const { siteInfo, fetchSiteInfo } = useSite()
await fetchSiteInfo()
const pageComponent = shallowRef<Component | null>(null)
// 同步加载当前模板（SSR/客户端路由切换均直接 await，避免先闪 SiteLoading）
const components = await loadTemplate()
pageComponent.value = components?.About || null
usePageSeo(
{
title: '关于我们',
path: '/about'
},
siteInfo.value
)
useBreadcrumbSeo([
{ name: '首页', url: '/' },
{ name: '关于我们', url: '/about' }
])
</script>
app/pages/article/[id].vue
+28
View File
@@ -0,0 +1,28 @@
<template>
<div>
<Component :is="pageComponent" v-if="pageComponent" :key="route.fullPath" />
<SiteLoading v-else />
</div>
</template>
<script setup lang="ts">
/**
* 文章/新闻 路由（栏目列表 与 详情 二合一） /article/:id
* 按模块名单数命名：列表（栏目）/article/{navigationId}，详情 /article/{id}。
* 靠「id 是否该模块已知栏目 navigationId」运行时判定。
* 旧链接 /news/*、/newss/* 由 server/middleware/z-news-detail-redirect.ts 301 到 /article/*。
*
* 10626 租户专属：/article/4722（专业人才团队）走写死 TalentTeam，
* 不依赖 cms-article 模块拉列表，避免 cms-article 写入受 token 限制而落空。
*/
import TalentTeam from '~/templates/template-07/pages/TalentTeam.vue'
const route = useRoute()
const id = String(route.params.id)
let pageComponent = null as unknown
if (id === '4722') {
pageComponent = TalentTeam
} else {
;({ pageComponent } = await useModuleRoute('article'))
}
</script>
app/pages/article/index.vue
+39
View File
@@ -0,0 +1,39 @@
<template>
<div>
<Component :is="pageComponent" v-if="pageComponent" />
<SiteLoading v-else />
</div>
</template>
<script setup lang="ts">
/**
* 新闻列表路由（根） /article
* 按模块名单数命名：列表根为 /article（旧规范为 /news）。
*/
const { loadTemplate } = useTemplate()
const { siteInfo, navigations, fetchSiteInfo } = useSite()
await fetchSiteInfo()
const pageComponent = shallowRef<Component | null>(null)
// 同步加载当前模板（SSR/客户端路由切换均直接 await，避免先闪 SiteLoading）
const components = await loadTemplate()
pageComponent.value = components?.NewsList || null
// 从导航中查找新闻栏目标题
const newsNav = computed(() => {
const navs = navigations.value || []
return navs.find((n) => n.model === 'article')
})
usePageSeo(
{
title: newsNav.value?.title || '新闻资讯',
path: '/article'
},
siteInfo.value
)
</script>
app/pages/case/[id].vue
+16
View File
@@ -0,0 +1,16 @@
<template>
<div>
<Component :is="pageComponent" v-if="pageComponent" :key="route.fullPath" />
<SiteLoading v-else />
</div>
</template>
<script setup lang="ts">
/**
* 案例 路由（栏目列表 与 详情 二合一） /case/:id
* 按模块名单数命名：列表（栏目）/case/{navigationId}，详情 /case/{id}。
* 靠「id 是否该模块已知栏目 navigationId」运行时判定。
* 旧链接 /cases/* 由 server/middleware/z-news-detail-redirect.ts 301 到 /case/*。
*/
const { route, pageComponent } = await useModuleRoute('case')
</script>
app/pages/case/index.vue
+33
View File
@@ -0,0 +1,33 @@
<template>
<div>
<Component :is="pageComponent" v-if="pageComponent" />
<SiteLoading v-else />
</div>
</template>
<script setup lang="ts">
/**
* 案例列表路由（根） /case
* 按模块名单数命名：列表根为 /case（旧规范为 /cases）。
*/
const { loadTemplate } = useTemplate()
const { siteInfo, fetchSiteInfo } = useSite()
await fetchSiteInfo()
const pageComponent = shallowRef<Component | null>(null)
// 同步加载当前模板（SSR/客户端路由切换均直接 await，避免先闪 SiteLoading）
const components = await loadTemplate()
pageComponent.value = components?.CaseList || null
usePageSeo(
{
title: '案例展示',
path: '/case'
},
siteInfo.value
)
</script>
app/pages/cases.vue
+13
View File
@@ -0,0 +1,13 @@
<template>
<div></div>
</template>
<script setup lang="ts">
/**
* /cases（旧复数路径）→ /case（新单数规范）客户端重定向
*
* 服务端已有 server/middleware/z-news-detail-redirect.ts 处理 301，
* 本文件覆盖客户端导航场景（SPA 路由切换不经过服务端中间件）。
*/
await navigateTo('/case', { redirectCode: 301 })
</script>
app/pages/contact.vue
+32
View File
@@ -0,0 +1,32 @@
<template>
<div>
<Component :is="pageComponent" v-if="pageComponent" />
<SiteLoading v-else />
</div>
</template>
<script setup lang="ts">
/**
* 联系我们路由
*/
const { loadTemplate } = useTemplate()
const { siteInfo, fetchSiteInfo } = useSite()
await fetchSiteInfo()
const pageComponent = shallowRef<Component | null>(null)
// 同步加载当前模板（SSR/客户端路由切换均直接 await，避免先闪 SiteLoading）
const components = await loadTemplate()
pageComponent.value = components?.Contact || null
usePageSeo(
{
title: '联系我们',
path: '/contact'
},
siteInfo.value
)
</script>
app/pages/index.vue
+27
View File
@@ -0,0 +1,27 @@
<template>
<div>
<SiteHome />
</div>
</template>
<script setup lang="ts">
/**
* 首页路由
* 使用 SiteHome 组件动态加载当前模板的首页
*/
const { siteInfo, siteName, fetchSiteInfo } = useSite()
await fetchSiteInfo()
usePageSeo(
{
title: siteName.value || '首页',
description: siteInfo.value?.comments || undefined,
keywords: siteInfo.value?.keywords || undefined,
path: '/'
},
siteInfo.value
)
useOrganizationSeo(siteInfo.value)
</script>
app/pages/page/[id].vue
+92
View File
@@ -0,0 +1,92 @@
<template>
<div>
<Component :is="templatePage" v-if="templatePage" />
<SiteLoading v-else />
</div>
</template>
<script setup lang="ts">
/**
* CMS 页面路由
* /page/:id → 既支持旧的导航节点 ID（数字），也支持新版「单页管理」的 path(slug)
* 数字 id → 按 navigationId 取 cms_navigation + cms_design 内容
* 非数字 slug → 按 path 取 cms_page 已发布单页（website-admin「单页管理」模块）
*/
const route = useRoute()
const id = route.params.id as string
const isNumeric = /^\d+$/.test(id)
const slug = isNumeric ? undefined : id
// 规范路由收敛：单页的规范地址是顶层 /about、/contact（独立富组件），
// /page/about、/page/contact 仅作兼容入口，统一 301 到规范地址，避免重复页与 SEO 分散。
const CANONICAL_PAGE_ROUTE: Record<string, string> = { about: '/about', contact: '/contact' }
if (slug && CANONICAL_PAGE_ROUTE[slug]) {
// 规范地址收敛：用 Nuxt 标准的 navigateTo 301 重定向（createError 仅渲染错误页，不会真正跳转）
throw navigateTo(CANONICAL_PAGE_ROUTE[slug], { redirectCode: 301 })
}
const { loadTemplate } = useTemplate()
const { siteInfo, navigations, fetchSiteInfo } = useSite()
await fetchSiteInfo()
const templatePage = shallowRef<Component | null>(null)
const components = await loadTemplate()
// 语义化 slug 优先映射到独立页面组件（about→关于我们、contact→联系我们），
// 避免有专属组件的 slug 落入通用单页 Page 逻辑——CMS 未录入正文时会显示空状态。
// （这些页面已有结构化组件，内容更丰富，无需依赖 CMS 单页正文。）
const standaloneComp =
slug === 'about' ? components?.About
: slug === 'contact' ? components?.Contact
: null
templatePage.value = standaloneComp || components?.Page || null
// 从导航中查找当前页面信息（仅数字 id 时有效）
const currentNav = computed(() => {
if (isNumeric) {
const navs = navigations.value || []
const findNav = (items: any[]): any => {
for (const item of items) {
if (String(item.navigationId) === id) return item
if (item.children?.length) {
const found = findNav(item.children)
if (found) return found
}
}
return null
}
return findNav(navs)
}
return undefined
})
// 非数字 slug：拉取单页 SEO 信息（标题/关键词/描述/头图）
let seoData = ref<{
title?: string
keywords?: string
description?: string
photo?: string | null
} | null>(null)
if (!isNumeric && slug) {
const { data } = await useFetch<{
title?: string
keywords?: string
description?: string
photo?: string | null
}>('/api/page/detail', {
query: { path: slug }
})
seoData = data
}
usePageSeo(
{
title: seoData.value?.title || currentNav.value?.title || (slug === 'about' ? '关于我们' : slug === 'contact' ? '联系我们' : '页面'),
path: route.fullPath,
keywords: seoData.value?.keywords,
description: seoData.value?.description,
image: seoData.value?.photo || undefined
},
siteInfo.value
)
</script>
app/pages/preview.vue
+26
View File
@@ -0,0 +1,26 @@
<template>
<div>
<Component :is="templatePage" v-if="templatePage" />
</div>
</template>
<script setup lang="ts">
/**
* 模板预览路由
* 可通过 /preview?templateId=template-02 预览指定模板
*/
const route = useRoute()
const previewTemplateId = route.query.templateId as string
const { loadTemplate, registerTemplate } = useTemplate()
// 注册所有模板
const templates = await import('~/templates')
templates.default.forEach(registerTemplate)
const templatePage = shallowRef<Component | null>(null)
// 同步加载当前模板（SSR/客户端路由切换均直接 await，避免先闪 SiteLoading）
const components = await loadTemplate(previewTemplateId)
templatePage.value = components?.Home || null
</script>
app/pages/product/[id].vue
+16
View File
@@ -0,0 +1,16 @@
<template>
<div>
<Component :is="pageComponent" v-if="pageComponent" :key="route.fullPath" />
<SiteLoading v-else />
</div>
</template>
<script setup lang="ts">
/**
* 产品 路由（栏目列表 与 详情 二合一） /product/:id
* 按模块名单数命名：列表（栏目）/product/{navigationId}，详情 /product/{id}。
* 靠「id 是否该模块已知栏目 navigationId」运行时判定。
* 旧链接 /products/* 由 server/middleware/z-news-detail-redirect.ts 301 到 /product/*。
*/
const { route, pageComponent } = await useModuleRoute('product')
</script>
app/pages/product/index.vue
+33
View File
@@ -0,0 +1,33 @@
<template>
<div>
<Component :is="pageComponent" v-if="pageComponent" />
<SiteLoading v-else />
</div>
</template>
<script setup lang="ts">
/**
* 产品列表路由（根） /product
* 按模块名单数命名：列表根为 /product（旧规范为 /products）。
*/
const { loadTemplate } = useTemplate()
const { siteInfo, fetchSiteInfo } = useSite()
await fetchSiteInfo()
const pageComponent = shallowRef<Component | null>(null)
// 同步加载当前模板（SSR/客户端路由切换均直接 await，避免先闪 SiteLoading）
const components = await loadTemplate()
pageComponent.value = components?.ProductList || null
usePageSeo(
{
title: '产品中心',
path: '/product'
},
siteInfo.value
)
</script>
app/pages/renewal.vue
+22
View File
@@ -0,0 +1,22 @@
<template>
<div>
<Component :is="pageComponent" v-if="pageComponent" />
<SiteLoading v-else />
</div>
</template>
<script setup lang="ts">
/**
* 续费引导路由
* 使用空白布局
*/
const { loadTemplate } = useTemplate()
const pageComponent = shallowRef<Component | null>(null)
// 同步加载当前模板（SSR/客户端路由切换均直接 await，避免先闪 SiteLoading）
const components = await loadTemplate()
pageComponent.value = components?.Renewal || null
</script>
app/plugins/app-init.client.ts
+12
View File
@@ -0,0 +1,12 @@
/**
* 应用启动初始化（客户端兜底）
*
* 正常情况下 SSR 已注入应用信息；若为空（如纯 CSR 场景），
* 客户端启动时补查一次 /api/app/info。
*/
export default defineNuxtPlugin(async () => {
const { appInfo, fetchAppInfo } = useApp()
if (!appInfo.value) {
await fetchAppInfo()
}
})
app/plugins/app-init.server.ts
+15
View File
@@ -0,0 +1,15 @@
/**
* 应用启动初始化（服务端）
*
* 在 SSR 首次渲染时，把中间件识别出的 AppProduct 注入到 useState('app-info')，
* 从而随 SSR payload 序列化到客户端，客户端无需再次请求即可拿到应用信息。
*/
export default defineNuxtPlugin(() => {
const { appInfo } = useApp()
const event = useRequestEvent()
const ctx = event?.context?.tenant
if (ctx?.appProduct && !appInfo.value) {
appInfo.value = ctx.appProduct
}
})
app/plugins/reveal.client.ts
+100
View File
@@ -0,0 +1,100 @@
/**
* 滚动渐显插件（客户端）
*
* 扫描页面中所有 [data-reveal] 元素，进入视口时为其添加 .is-visible，
* 触发 animations.css 中定义的过渡。支持通过 data-reveal-delay（毫秒）做 stagger。
*
* 设计要点：
* - 初始隐藏状态完全由 CSS `.js [data-reveal]` 控制，<html class="js"> 由
* nuxt.config 的 head 内联脚本在首屏绘制前注入，因此不会造成 SSR 闪烁，
* 也无 JS 时内容正常显示。
* - 兼容客户端路由切换：在 app:mounted 与 page:finish 时重新扫描。
* - 【关键】使用 MutationObserver 持续监听 DOM 变更，兜住「挂载后才出现」的元素：
* 例如组件在客户端异步取数后渲染、SSR 水合不一致导致 Vue 重建子树、
* 或列表分页 / 条件区块延迟出现。这些元素若漏扫，会因 CSS 的 opacity:0
* 永久不可见，表现为「整块区域样式丢失 / 空白」——这正是本插件必须防住的故障。
* - 尊重 prefers-reduced-motion：此时直接跳过观察器，内容由 CSS 强制可见。
*/
export default defineNuxtPlugin((nuxtApp) => {
if (typeof window === 'undefined') return
const reduceMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches
if (reduceMotion) return
const observer = new IntersectionObserver(
(entries) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue
const el = entry.target as HTMLElement
const delay = Number(el.dataset.revealDelay || 0)
const reveal = () => el.classList.add('is-visible')
if (delay > 0) {
window.setTimeout(reveal, delay)
} else {
reveal()
}
observer.unobserve(el)
}
},
{ threshold: 0, rootMargin: '0px 0px -10% 0px' }
)
const scan = () => {
const els = document.querySelectorAll<HTMLElement>(
'[data-reveal]:not(.is-visible)'
)
els.forEach((el) => observer.observe(el))
}
// 合并短时间内的多次 DOM 变更，避免频繁全量查询
let rafId = 0
const scheduleScan = () => {
if (rafId) return
rafId = requestAnimationFrame(() => {
rafId = 0
scan()
})
}
// 持续监听 DOM 新增节点：任何后续插入的 [data-reveal] 都会被补扫，
// 从根本上避免「元素永久停留在 opacity:0」的问题。
const mutationObserver = new MutationObserver((mutations) => {
for (const m of mutations) {
if (m.addedNodes.length > 0) {
scheduleScan()
return
}
}
})
const startMutationWatch = () => {
mutationObserver.observe(document.body, {
childList: true,
subtree: true
})
}
// 首屏挂载后扫描一次，并开始监听后续 DOM 变更
nuxtApp.hook('app:mounted', () => {
scheduleScan()
startMutationWatch()
// 兜底：水合完成后 Vue 可能仍在替换不一致的子树，稍后再补扫一次
window.setTimeout(scheduleScan, 300)
})
// 客户端路由切换后重新扫描（新页面可能有新的 [data-reveal]）
nuxtApp.hook('page:finish', () => {
scheduleScan()
})
// 页面卸载时释放监听
if (import.meta.hot) {
import.meta.hot.dispose(() => {
mutationObserver.disconnect()
observer.disconnect()
})
}
})
app/plugins/site-init.server.ts
+25
View File
@@ -0,0 +1,25 @@
import type { CmsSiteInfo } from '~/types'
/**
* 站点信息初始化（服务端）
*
* 在 SSR 首次渲染前，把中间件（tenant.ts）预取的 CMS 站点信息
* 注入到 useState('site-info')，从而随 SSR payload 序列化到客户端。
*
* 为什么需要这个插件：
* 模板解析 useTemplate().resolvedTemplateId 以「站点库（CMS site_info.templateId）
* 优先」为准。而布局级组件 SiteHeader / SiteFooter 的 loadTemplate() 在页面
* fetchSiteInfo() 之前就执行——若此时 siteInfo 为空，siteTemplateId 拿不到值，
* 会回退到 app_product / 环境默认值，导致「改数据库模板 ID 不生效」，
* 甚至布局与页面渲染出两套模板。
* 本插件在渲染前注入 siteInfo，确保首屏 siteTemplateId 即可用。
*/
export default defineNuxtPlugin(() => {
const { siteInfo } = useSite()
const event = useRequestEvent()
const siteInfoFromContext = event?.context?.siteInfo as CmsSiteInfo | undefined
if (siteInfoFromContext && !siteInfo.value) {
siteInfo.value = siteInfoFromContext
}
})
app/templates/index.ts
+19
View File
@@ -0,0 +1,19 @@
import template01 from './template-01/config'
import template02 from './template-02/config'
import template03 from './template-03/config'
import template04 from './template-04/config'
import template05 from './template-05/config'
import template06 from './template-06/config'
import template07 from './template-07/config'
import template08 from './template-08/config'
import template09 from './template-09/config'
import template10 from './template-10/config'
import type { TemplateConfig } from '~/composables/useTemplate'
/**
* 模板注册表
* 所有可用模板在此集中注册
*/
const templates: TemplateConfig[] = [template01, template02, template03, template04, template05, template06, template07, template08, template09, template10]
export default templates
app/templates/template-01/components/FeatureSection.vue
+49
View File
@@ -0,0 +1,49 @@
<template>
<section v-if="enabled" class="py-16 lg:py-20 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">{{ title }}</h2>
<p v-if="subtitle" class="text-gray-600 max-w-2xl mx-auto">
{{ subtitle }}
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div
v-for="(item, index) in items"
:key="item.title || index"
class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow anim-card group"
data-reveal
:data-reveal-delay="index * 100"
>
<div
class="w-12 h-12 p-3 text-blue-500 rounded-lg bg-blue-50 flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110"
>
<FeatureIcon :name="item.icon" class="w-6 h-6 text-blue-600" />
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">{{ item.title }}</h3>
<p class="text-sm text-gray-600 leading-relaxed">{{ item.desc }}</p>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
/**
* 模板 1 - 特色功能模块（后台可配置）
* 数据来自 useFeatures()，未配置时回退到下方默认值。
*/
import FeatureIcon from '~/components/FeatureIcon.vue'
import { useFeatures } from '~/composables/useFeatures'
import type { FeatureItem } from '~/types'
const defaultFeatures: FeatureItem[] = [
{ title: '企业优势', desc: '快速建立品牌信任感，展示企业实力与核心竞争力。', icon: 'building' },
{ title: '核心产品', desc: '清晰的产品展示与分类，帮助客户快速了解产品价值。', icon: 'box' },
{ title: '客户案例', desc: '真实案例呈现，增强说服力，促进客户决策。', icon: 'case' },
{ title: '在线留言', desc: '便捷的留言咨询通道，不错过任何潜在客户。', icon: 'message' }
]
const { enabled, title, subtitle, items } = useFeatures(defaultFeatures)
</script>
app/templates/template-01/components/Footer.vue
+128
View File
@@ -0,0 +1,128 @@
<template>
<footer class="bg-gray-900 text-gray-300">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
<!-- 公司信息 -->
<div class="sm:col-span-2 lg:col-span-1">
<SiteBrand
link-class="mb-4"
:logo="siteLogo"
:icon="siteIcon"
:name="siteName"
logo-class="h-8 w-auto max-w-[200px] object-contain"
icon-class="h-6 w-auto object-contain"
name-class="text-lg font-bold text-white"
>
<template #fallback-icon>
<div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
</template>
</SiteBrand>
<p v-if="slogan" class="text-sm text-gray-400 mb-3">{{ slogan }}</p>
<p class="text-sm text-gray-400 leading-relaxed">
{{ siteInfo?.comments || siteInfo?.content || '专注企业数字化官网建设，助力品牌增长。' }}
</p>
</div>
<!-- 快速链接（从导航获取） -->
<div>
<h4 class="text-white font-semibold mb-4">快速链接</h4>
<ul class="space-y-2">
<li v-for="item in quickLinks" :key="item.navigationId">
<NuxtLink
:to="getNavLink(item)"
:target="item.target === '_blank' ? '_blank' : undefined"
class="text-sm text-gray-400 hover:text-white transition-colors"
>
{{ item.title }}
</NuxtLink>
</li>
</ul>
</div>
<!-- 联系方式 -->
<div>
<h4 class="text-white font-semibold mb-4">联系我们</h4>
<ul class="space-y-2 text-sm text-gray-400">
<li v-if="phone">
<span class="text-gray-500">电话：</span>{{ phone }}
</li>
<li v-if="email">
<span class="text-gray-500">邮箱：</span>{{ email }}
</li>
<li v-if="address" class="leading-relaxed">
<span class="text-gray-500">地址：</span>{{ address }}
</li>
<li v-if="officialWebsite">
<span class="text-gray-500">官网：</span>
<a :href="officialWebsiteUrl" target="_blank" rel="nofollow" class="hover:text-white transition-colors">{{ officialWebsite }}</a>
</li>
</ul>
</div>
<!-- 微信二维码 + 社交链接 -->
<div v-if="wxQrcode || socialLinks.length">
<h4 class="text-white font-semibold mb-4">关注我们</h4>
<div v-if="wxQrcode" class="bg-white rounded-lg p-3 inline-block">
<img :src="wxQrcode" alt="微信二维码" class="w-32 h-32 object-contain">
</div>
<p v-if="wxQrcode" class="text-xs text-gray-500 mt-2">{{ siteConfig?.wxQrcodeText || '扫码关注' }}</p>
<div v-if="socialLinks.length" class="mt-3 flex flex-col gap-1">
<a
v-for="link in socialLinks"
:key="link.url"
:href="link.url"
target="_blank"
rel="nofollow"
class="text-sm text-gray-400 hover:text-white transition-colors"
>
{{ link.name || link.type }}
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-sm text-gray-500">
{{ copyright || `© ${new Date().getFullYear()} ${siteName || '企业官网'} 版权所有` }}
</p>
<div class="flex items-center gap-4">
<p v-if="icpNo" class="text-sm text-gray-500">
{{ icpNo }}
</p>
<p v-if="siteInfo?.policeNo" class="text-sm text-gray-500">
{{ siteInfo.policeNo }}
</p>
<div class="flex items-center gap-2 text-xs">
<span class="text-gray-500">Powered by</span>
<a
rel="nofollow"
href="https://site.websoft.top"
target="_blank"
class="text-gray-500 hover:text-gray-200 transition-colors"
>云·企业官网</a>
</div>
</div>
</div>
</div>
</footer>
</template>
<script setup lang="ts">
/**
* 模板 1 - Footer 组件
* 使用 config 与 useSite 的 bottomNavigations（top!==1 的页脚链接）渲染
*/
import type { CmsNavigation } from '~/types'
const { siteInfo, siteName, siteLogo, siteIcon, siteConfig, bottomNavigations, phone, email, address, icpNo, copyright, wxQrcode, slogan, officialWebsite, officialWebsiteUrl, socialLinks } = useSite()
/** 快速链接：取顶级导航中非首页且无子菜单的项 */
const quickLinks = computed<CmsNavigation[]>(() => {
const navs = bottomNavigations.value || []
return navs.filter((nav) => nav.model !== 'index').slice(0, 6)
})
</script>
app/templates/template-01/components/Header.vue
+158
View File
@@ -0,0 +1,158 @@
<template>
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 lg:h-20">
<!-- Logo -->
<SiteBrand
link-class="flex-shrink-0"
:logo="siteLogo"
:icon="siteIcon"
:name="siteName"
logo-class="h-12 w-auto max-w-[200px] object-contain"
icon-class="h-8 w-auto object-contain"
name-class="text-lg font-bold text-gray-900 truncate max-w-[160px] sm:max-w-xs"
>
<template #fallback-icon>
<div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
</template>
</SiteBrand>
<!-- 搜索框（后台 setting.searchBtn 控制是否显示） -->
<SiteSearchBox v-if="showHeaderSearch" variant="light" accent="#2563eb" class="hidden lg:flex items-center ml-8 mr-auto" />
<!-- 桌面端导航 -->
<nav class="hidden lg:flex items-center gap-8">
<template v-for="item in navItems" :key="item.navigationId || item.path">
<!-- 有子菜单 -->
<div v-if="item.children && item.children.length > 0" class="relative group">
<button class="text-base font-medium text-gray-700 hover:text-blue-600 transition-colors flex items-center gap-1">
{{ item.title }}
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<!-- 下拉菜单 -->
<div class="absolute left-1/2 -translate-x-1/2 top-full pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all">
<div class="bg-white rounded-lg shadow-lg border border-gray-100 py-2 min-w-[160px]">
<NuxtLink
v-for="child in item.children"
:key="child.navigationId"
:to="getChildPath(child)"
class="block px-4 py-2 text-[15px] text-gray-700 hover:text-blue-600 hover:bg-blue-50 transition-colors whitespace-nowrap"
>
{{ child.title }}
</NuxtLink>
</div>
</div>
</div>
<!-- 无子菜单 -->
<NuxtLink
v-else
:to="getNavLink(item)"
:target="item.target === '_blank' ? '_blank' : undefined"
class="text-base font-medium text-gray-700 hover:text-blue-600 transition-colors"
active-class="text-blue-600"
>
{{ item.title }}
</NuxtLink>
</template>
</nav>
<!-- CTA -->
<div class="hidden lg:block mx-10">
<NuxtLink
to="/contact"
class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white text-base font-semibold rounded-full hover:bg-blue-700 transition-colors"
>
在线咨询
</NuxtLink>
</div>
<!-- 移动端菜单按钮 -->
<button
class="lg:hidden p-2 rounded-lg hover:bg-gray-100"
@click="mobileMenuOpen = !mobileMenuOpen"
>
<svg v-if="!mobileMenuOpen" class="w-6 h-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg v-else class="w-6 h-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- 移动端菜单 -->
<div
v-if="mobileMenuOpen"
class="lg:hidden bg-white border-t border-gray-100"
>
<div class="container mx-auto px-4 py-4 space-y-1">
<template v-for="item in navItems" :key="item.navigationId || item.path">
<!-- 有子菜单 -->
<div v-if="item.children && item.children.length > 0">
<div class="px-4 py-3 text-base font-semibold text-gray-900">
{{ item.title }}
</div>
<NuxtLink
v-for="child in item.children"
:key="child.navigationId"
:to="getChildPath(child)"
class="block px-8 py-2 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
@click="mobileMenuOpen = false"
>
{{ child.title }}
</NuxtLink>
</div>
<!-- 无子菜单 -->
<NuxtLink
v-else
:to="getNavLink(item)"
:target="item.target === '_blank' ? '_blank' : undefined"
class="block px-4 py-3 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
active-class="text-blue-600 bg-blue-50"
@click="mobileMenuOpen = false"
>
{{ item.title }}
</NuxtLink>
</template>
<NuxtLink
to="/contact"
class="block px-4 py-3 mt-2 text-center bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
@click="mobileMenuOpen = false"
>
在线咨询
</NuxtLink>
</div>
</div>
</header>
</template>
<script setup lang="ts">
/**
* 模板 1 - Header 组件
* 使用 useSite 的 navigations（合并 topNavs + bottomNavs，过滤 top===1）渲染导航菜单
*/
import type { CmsNavigation } from '~/types'
const { siteInfo, siteName, siteLogo, siteIcon, navigations, showHeaderSearch, fetchSiteInfo } = useSite()
const mobileMenuOpen = ref(false)
/** 子导航链接统一走 app/utils 的 getNavLink（自动避免 /page/4598?navId=4598 冗余拼接） */
function getChildPath(child: CmsNavigation): string {
return getNavLink(child)
}
// 获取站点信息（含导航数据）
await fetchSiteInfo()
/** 导航项（使用 useSite 合并 topNavs + bottomNavs 并过滤 top===1 的导航） */
const navItems = computed<CmsNavigation[]>(() => {
return navigations.value || []
})
</script>
app/templates/template-01/components/HeroSection.vue
+302
View File
@@ -0,0 +1,302 @@
<template>
<section class="relative overflow-hidden text-white group">
<!-- 模式 B：有轮播图且后台开启 Banner 轮播 → 轮播图作为全屏背景 + 暗色蒙版 -->
<template v-if="bannerMode">
<div class="absolute inset-0 z-0">
<!-- 轮播图（绝对定位叠放，靠 opacity 交叉淡入） -->
<div
v-for="(b, i) in banners"
:key="b.id || i"
class="absolute inset-0 transition-opacity duration-1000 ease-in-out"
:class="i === currentBannerIndex ? 'opacity-100' : 'opacity-0 pointer-events-none'"
>
<a
v-if="bannerLink(b)"
:href="bannerLink(b)"
target="_blank"
rel="noopener"
class="block w-full h-full"
>
<img
:src="bannerImg(b)"
:alt="b.title || ''"
class="w-full h-full object-cover"
>
</a>
<img
v-else
:src="bannerImg(b)"
:alt="b.title || ''"
class="w-full h-full object-cover"
>
</div>
<!-- 品牌蓝蒙版（左重右轻） -->
<div class="absolute inset-0 bg-gradient-to-r from-[#0d4fb8]/45 via-[#1a6dff]/30 to-[#1a6dff]/18 pointer-events-none" />
</div>
</template>
<!-- 模式 A：无轮播图 → 蓝渐变 + 柔光球装饰（原方案兜底） -->
<template v-else>
<div class="absolute inset-0 z-0 bg-gradient-to-br from-[#1a6dff] to-[#0d4fb8] anim-gradient" />
<div class="anim-blob w-72 h-72 bg-white/25 -top-16 -left-10" />
<div class="anim-blob anim-blob--2 w-80 h-80 bg-sky-300/30 -bottom-24 right-0" />
</template>
<!-- 左右箭头（多图时，hover 显示） -->
<template v-if="bannerMode && banners.length > 1">
<button
type="button"
aria-label="上一张"
class="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-black/30 hover:bg-black/50 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition z-30"
@click="prev"
>
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button
type="button"
aria-label="下一张"
class="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-black/30 hover:bg-black/50 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition z-30"
@click="next"
>
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- 指示点 -->
<div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-2 z-30">
<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 scale-110' : 'bg-white/50 hover:bg-white/80'"
@click="goTo(i)"
/>
</div>
</template>
<!-- 内容层（不使用 :key remount，靠 watch+transition 切换文案） -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-20 py-20 lg:py-28 pointer-events-none">
<div class="grid lg:grid-cols-2 gap-12 items-center w-full">
<div class="max-w-2xl transition-opacity duration-500 ease-in-out" :class="{ 'opacity-0': textFading }">
<h1
class="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight mb-6"
data-reveal
>
{{ heroTitle }}
</h1>
<p
class="text-base sm:text-lg text-blue-100 mb-8 leading-relaxed"
data-reveal
data-reveal-delay="120"
>
{{ heroSubtitle }}
</p>
<div class="flex flex-wrap gap-4" data-reveal data-reveal-delay="240">
<button
type="button"
class="inline-flex items-center justify-center px-6 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-50 transition-colors anim-shimmer pointer-events-auto"
@click="openConsult()"
>
免费咨询
</button>
<NuxtLink
v-if="newsNav"
:to="newsLink"
class="inline-flex items-center justify-center px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transition-colors pointer-events-auto"
>
查看动态
</NuxtLink>
</div>
</div>
<div v-if="showHeroFeatures" class="hidden lg:flex justify-center" data-reveal data-reveal-delay="360">
<div class="relative w-full max-w-lg">
<div class="absolute inset-0 bg-white/10 rounded-3xl transform rotate-3" />
<div class="relative bg-white/20 backdrop-blur-sm rounded-3xl p-8 border border-white/20">
<div class="space-y-4">
<div v-for="feature in features" :key="feature" class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-blue-50">{{ feature }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
/**
* 模板 1 - Hero 主视觉区（支持 CMS 轮播图作为背景 + 文案跟随切换）
*
* 数据源：GET /api/banner?position=home_slider（代理 cms_banner_group 表）。
* 双模式二选一：
* - 有轮播图：图片作为全屏背景 + 品牌蓝蒙版 + 左侧文案(从 banner.title/subtitle 取)/按钮/右侧特性卡片 +
* 自动轮播(5s) + 左右箭头/指示点；轮播切换时文案淡入淡出过渡；
* - 无轮播图：回退到原蓝渐变 + 柔光球方案。
*
* 文案优先级：当前 banner 的 title/subtitle → siteInfo.slogan/comments → siteName 拼接 → 硬编码兜底。
* 即使某张 banner 未配文案也不会出现空白。
*/
import type { CmsNavigation, CmsBanner, ApiEnvelope, PageResult } from '~/types'
import { ensureFullUrl } from '~/utils/image'
import { getNavLink, getBannerLink } from '~/utils'
interface Props {
/** 是否启用 Banner 轮播背景；false 时即使有轮播图也回退到蓝渐变 */
showBanner?: boolean
/** 是否显示首屏右侧特性卡片 */
showHeroFeatures?: boolean
}
const props = withDefaults(defineProps<Props>(), {
showBanner: true,
showHeroFeatures: true
})
const { siteInfo, siteName, navigations, fetchSiteInfo } = useSite()
const { openConsult } = useConsult()
await fetchSiteInfo()
/** 轮播图数据（SSR 预取，首屏即有） */
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))
})
/** 是否进入轮播图模式：有可用轮播图且后台开启 Banner 轮播开关 */
const bannerMode = computed(() => props.showBanner && banners.value.length > 0)
/** 当前帧索引 */
const currentBannerIndex = ref(0)
/** 文案淡出/淡入控制（watch currentBannerIndex 触发，不用 :key remount） */
const textFading = ref(false)
let fadeTimer: ReturnType<typeof setTimeout> | null = null
watch(currentBannerIndex, () => {
// 先淡出 → 等 300ms 文案已更新 → 再淡入
textFading.value = true
clearTimeout(fadeTimer!)
fadeTimer = setTimeout(() => {
textFading.value = false
}, 300)
})
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(); clearTimeout(fadeTimer!) })
function prev() {
const n = banners.value.length
currentBannerIndex.value = (currentBannerIndex.value - 1 + n) % n
}
function next() {
const n = banners.value.length
currentBannerIndex.value = (currentBannerIndex.value + 1) % n
}
function goTo(i: number) {
currentBannerIndex.value = i
}
/** 取轮播图地址（兼容 image/imageUrl/pic/url，并提升 OSS 压缩宽度防大屏发虚） */
function bannerImg(b: CmsBanner): string {
const raw = ensureFullUrl(b.image || b.imageUrl || b.pic || b.url || '')
return raw.replace(/resize,w_\d+/, 'resize,w_1920')
}
/** 取轮播图跳转链接（统一走 utils.getBannerLink，兼容 link/linkUrl/link_url 多字段名） */
function bannerLink(b: CmsBanner): string {
return getBannerLink(b)
}
/** 是否有可用图片 */
function hasImage(b: CmsBanner): boolean {
return !!(b.image || b.imageUrl || b.pic || b.url)
}
/** 当前活跃的轮播项 */
const currentBanner = computed<CmsBanner | undefined>(() => banners.value[currentBannerIndex.value])
/**
* 标题：优先取当前 banner 的 title；
* 无值时回退 siteInfo.slogan → siteName 拼接 → 硬编码兜底。
* 保证任何情况下都不为空。
*/
const heroTitle = computed(() => {
const bt = currentBanner.value?.title
if (bannerMode.value && bt && bt.trim()) {
return bt.trim()
}
return (siteInfo.value?.slogan?.trim())
|| (siteName.value ? `欢迎来到 ${siteName.value}` : '专注企业数字化官网建设')
})
/**
* 副标题：优先取当前 banner 的 subtitle；
* 无值时回退 siteInfo.comments → 硬编码兜底。
* 保证任何情况下都不为空。
*/
const heroSubtitle = computed(() => {
const bs = currentBanner.value?.subtitle
if (bannerMode.value && bs && bs.trim()) {
return bs.trim()
}
return (siteInfo.value?.comments?.trim())
|| '快速搭建品牌展示、产品发布与客户咨询一体化官网，助力企业数字化转型与业务增长。'
})
const newsNav = computed<CmsNavigation | undefined>(() => {
const navs = navigations.value || []
return navs.find((n) => n.model === 'article')
})
/** 「查看动态」按钮链接：走标准 getNavLink 优先级（url > path），不硬编码 */
const newsLink = computed(() => getNavLink(newsNav.value))
/** 右侧特性卡片文案：优先读后台 setting.features.heroFeatures，未配置回退模板默认值 */
const { heroFeatures } = useFeatures([])
const features = computed<string[]>(() => {
const hf = heroFeatures.value
if (Array.isArray(hf) && hf.length) return hf
return [
'多模板一键切换',
'响应式多端适配',
'SEO/GEO 友好',
'独立域名绑定'
]
})
</script>
app/templates/template-01/config.ts
+18
View File
@@ -0,0 +1,18 @@
import type { TemplateConfig } from '~/composables/useTemplate'
/**
* 模板 1 配置
* 蓝色科技风企业官网模板
*/
export default {
id: 'template-01',
name: '科技蓝企业模板',
description: '蓝色科技风，适合互联网、科技、SaaS 类企业官网',
preview: '/templates/cloud-website/template-01.png',
supportedModules: ['home', 'about', 'products', 'cases', 'news', 'contact'],
themeConfig: {
primaryColor: '#1a6dff',
secondaryColor: '#0d4fb8',
fontFamily: '"Noto Sans SC", "Source Han Sans SC", "思源黑体", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif'
}
} satisfies TemplateConfig
app/templates/template-01/pages/About.vue
+270
View File
@@ -0,0 +1,270 @@
<template>
<div>
<!-- Hero 横幅 -->
<section class="relative overflow-hidden bg-gradient-to-r from-blue-700 to-blue-500">
<div class="absolute -top-20 -right-16 w-72 h-72 rounded-full bg-white/10 blur-3xl" />
<div class="absolute -bottom-24 left-10 w-64 h-64 rounded-full bg-black/10 blur-3xl" />
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16 relative z-10">
<nav class="text-xs text-white/70 mb-3" aria-label="面包屑">
<NuxtLink to="/" class="hover:text-white transition-colors">首页</NuxtLink>
<span class="mx-2">/</span>
<span class="text-white">关于我们</span>
</nav>
<h1 class="text-3xl sm:text-4xl font-bold text-white">关于我们</h1>
<p class="text-white/75 mt-3 max-w-2xl leading-relaxed">
{{ slogan || '专业务实，做企业值得信赖的数字化伙伴' }}
</p>
</div>
</section>
<!-- 公司简介 -->
<section class="py-16 lg:py-20 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-1 lg:order-2">
<span class="inline-block px-3 py-1 rounded-full bg-blue-50 text-blue-600 text-sm font-semibold mb-4">公司简介</span>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-6">专业务实，做企业值得信赖的数字化伙伴</h2>
<div class="text-gray-600 leading-relaxed mb-8 space-y-4">
<p v-if="introText">{{ introText }}</p>
<template v-else>
<p>我们深耕企业软件与行业信息化领域，聚焦客户需求，提供从咨询规划、产品设计到研发交付、运维支持的一站式服务。</p>
<p>以稳定可靠的架构与持续优化的服务，帮助客户降低数字化门槛、提升运营效率，实现可持续的业务增长。</p>
</template>
</div>
<div class="flex flex-wrap gap-3 mb-8">
<span v-for="tag in tags" :key="tag"
class="px-3 py-1.5 rounded-full bg-blue-50 border border-blue-100 text-sm text-gray-700">{{ tag }}</span>
</div>
<NuxtLink to="/contact" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors shadow-sm">
联系我们
<svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
</NuxtLink>
</div>
<!-- 右侧装饰图区域：有 coverImage 时显示实际图片，否则显示 CSS 渐变装饰块 -->
<div class="order-2 lg:order-1 rounded-2xl overflow-hidden shadow-lg"
:class="coverImage ? '' : 'bg-gradient-to-br from-blue-100 to-blue-50 flex items-center justify-center min-h-[280px] lg:min-h-[384px]'">
<img v-if="coverImage" :src="coverImage" alt="关于我们" class="w-full h-72 lg:h-96 object-cover">
<div v-else class="p-8 text-center">
<svg class="w-20 h-20 mx-auto text-blue-300 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
<p class="text-blue-400 font-medium">{{ pageTitle }}</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心优势 -->
<section class="py-16 lg:py-20 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-12">
<span class="inline-block px-3 py-1 rounded-full bg-white text-blue-600 text-sm font-semibold mb-4">核心优势</span>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">为什么选择我们</h2>
<p class="text-gray-500 max-w-2xl mx-auto">从技术到服务，全链路保障客户的数字化投资回报</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div v-for="(item, index) in advantages" :key="item.title"
class="bg-white rounded-2xl p-7 shadow-sm hover:shadow-md transition-shadow border border-gray-100 group">
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-5 bg-blue-50">
<svg class="w-7 h-7 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" /></svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">{{ item.title }}</h3>
<p class="text-sm text-gray-500 leading-relaxed">{{ item.desc }}</p>
</div>
</div>
</div>
</div>
</section>
<!-- 发展历程 -->
<section class="py-16 lg:py-20 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<span class="inline-block px-3 py-1 rounded-full bg-blue-50 text-blue-600 text-sm font-semibold mb-4">发展历程</span>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-8">一路同行，步履不停</h2>
<div class="relative border-l-2 border-blue-100 pl-8 space-y-8">
<div v-for="(m, index) in milestones" :key="m.year" class="relative">
<span class="absolute -left-[41px] top-1 w-5 h-5 rounded-full bg-blue-600 border-4 border-white shadow"></span>
<div class="text-blue-600 font-bold text-lg">{{ m.year }}</div>
<div class="text-gray-900 font-semibold mt-1">{{ m.title }}</div>
<p class="text-gray-500 text-sm leading-relaxed mt-1">{{ m.desc }}</p>
</div>
</div>
</div>
<div class="order-1 lg:order-2 rounded-2xl overflow-hidden shadow-lg bg-gradient-to-br from-blue-50 to-indigo-50 flex items-center justify-center min-h-[320px] lg:min-h-[480px]">
<div class="p-8 text-center">
<svg class="w-24 h-24 mx-auto text-blue-200 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
<p class="text-blue-400 font-medium">持续成长</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 数据实力 -->
<section class="py-16 lg:py-20 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-12">
<span class="inline-block px-3 py-1 rounded-full bg-white text-blue-600 text-sm font-semibold mb-4">数据实力</span>
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">用结果说话</h2>
<p class="text-gray-500 max-w-2xl mx-auto">沉淀多年的交付能力与行业口碑，是我们最扎实的底气</p>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
<div v-for="(s, index) in stats" :key="s.label"
class="bg-white rounded-2xl p-8 text-center shadow-sm border border-gray-100">
<div class="text-gray-900 font-bold text-3xl sm:text-4xl">
{{ s.value }}<span class="text-blue-600">{{ s.suffix }}</span>
</div>
<div class="text-sm text-gray-500 mt-2">{{ s.label }}</div>
</div>
</div>
</div>
</div>
</section>
<!-- CMS 富文本扩展区（仅当后台有录入内容时显示） -->
<section v-if="hasContent" class="py-16 lg:py-20 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto">
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
<div class="p-6 sm:p-10">
<div class="flex items-center gap-3 mb-6 pb-6 border-b border-gray-100">
<span class="w-1.5 h-6 rounded-full bg-blue-600" />
<h2 class="text-xl sm:text-2xl font-bold text-gray-900">{{ pageData?.title || '详细介绍' }}</h2>
<span v-if="updateTimeText" class="sm:ml-auto text-sm text-gray-400">
更新于 {{ updateTimeText }}
</span>
</div>
<RichText :content="pageData?.content" />
<PageAttachments
v-if="pageData?.attachments?.length"
:attachments="pageData.attachments"
/>
</div>
</div>
</div>
</div>
</section>
<!-- 联系 CTA -->
<section class="py-16 lg:py-20 bg-gradient-to-r from-blue-700 to-blue-500 relative overflow-hidden">
<div class="absolute -top-20 -right-20 w-80 h-80 rounded-full bg-white/10 blur-3xl" />
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
<h2 class="text-2xl sm:text-3xl font-bold text-white mb-4">有项目需求或合作意向？</h2>
<p class="text-white/80 max-w-2xl mx-auto mb-8">立即联系我们，获取专属方案与产品演示</p>
<div class="flex flex-wrap items-center justify-center gap-4">
<NuxtLink
to="/contact"
class="inline-flex items-center px-8 py-3 bg-white text-blue-700 font-semibold rounded-lg hover:bg-gray-100 transition-colors shadow-lg"
>
立即咨询
</NuxtLink>
<a
v-if="siteInfo?.phone"
:href="`tel:${siteInfo.phone}`"
class="inline-flex items-center px-6 py-3 border-2 border-white/40 text-white font-semibold rounded-lg hover:bg-white/10 transition-colors"
>
{{ siteInfo.phone }}
</a>
</div>
</div>
</section>
</div>
</template>
<script setup lang="ts">
/**
* 模板 1 - 关于我们（科技蓝）
*
* 重构为「模板内置内容 + 可选 CMS 增强」模式：
* - 默认展示公司简介 / 核心优势 / 发展历程 / 数据实力 / CTA 五大板块
* - 数据优先取 siteInfo（slogan/comments），回退模板内置文案
* - 若后台「单页管理」录入了 about 正文（cms_page），底部追加富文本扩展区
* - 彻底解决 API 410/空数据导致页面白屏的问题
*/
import dayjs from 'dayjs'
import type { PageDetail, CaseItem, Product, PageResult, ApiEnvelope } from '~/types'
const { siteInfo, slogan, fetchSiteInfo } = useSite()
const { fileUrl } = useFileUrl()
await fetchSiteInfo()
// ========== CMS 单页数据（可选增强） ==========
const { data: pageData } = await useFetch<PageDetail>('/api/page/detail', {
key: 'page-about',
query: { path: 'about' }
})
const pageTitle = computed(() => pageData.value?.title?.trim() || '关于我们')
const coverImage = computed(() => fileUrl(pageData.value?.photo || ''))
const hasContent = computed(() => Boolean(pageData.value?.hasContent && pageData.value?.content))
const updateTimeText = computed(() => {
const t = pageData.value?.updateTime
return t ? dayjs(t).format('YYYY-MM-DD') : ''
})
// ========== 公司简介 ==========
const introText = computed(() => siteInfo.value?.comments || siteInfo.value?.content || '')
const tags = ['自主研发', '行业深耕', '安全稳定', '贴身服务']
// ========== 核心优势 ==========
const advantages = [
{ title: '技术实力', desc: '核心产品自主可控，技术栈先进，按需灵活扩展与定制。', icon: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z' },
{ title: '行业经验', desc: '多行业落地实践，深刻理解业务场景与真实痛点。', icon: 'M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z' },
{ title: '服务体系', desc: '从咨询规划到运维支持全流程陪伴，7×24 响应。', icon: 'M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z' },
{ title: '客户口碑', desc: '以交付质量与长期服务，赢得客户的持续信赖。', icon: 'M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z' }
]
// ========== 发展历程 ==========
const milestones = [
{ year: '2015', title: '扬帆起航', desc: '公司正式成立，组建核心研发团队，确立企业数字化服务方向。' },
{ year: '2018', title: '技术沉淀', desc: '自研核心产品体系成型，服务客户覆盖多个重点行业。' },
{ year: '2021', title: '规模跃升', desc: '交付能力持续增强，建立标准化实施与运维服务体系。' },
{ year: '2024', title: '智领未来', desc: '拥抱云原生与智能化，为客户提供更敏捷的数字化方案。' }
]
// ========== 数据实力（实时接口 + 占位兜底） ==========
const cases = ref<CaseItem[]>([])
try {
const res = await $fetch<PageResult<CaseItem>>('/api/case/list', { query: { page: 1, limit: 100 } })
cases.value = res?.list || []
} catch { cases.value = [] }
const products = ref<Product[]>([])
try {
const res = await $fetch<ApiEnvelope<PageResult<Product>> | PageResult<Product>>('/api/product/list', { query: { page: 1, limit: 50 } })
const envelope = res as ApiEnvelope<PageResult<Product>>
products.value = envelope?.data?.list || (res as PageResult<Product>)?.list || []
} catch { products.value = [] }
const stats = computed(() => [
{ value: String(cases.value.length || 200), suffix: '+', label: '成功案例' },
{ value: String(products.value.length || 50), suffix: '+', label: '产品与方案' },
{ value: '500', suffix: '+', label: '服务客户' },
{ value: '10', suffix: '年+', label: '行业经验' }
])
// ========== SEO ==========
usePageSeo(
{
title: pageTitle.value,
path: '/about',
keywords: pageData.value?.keywords || undefined,
description: pageData.value?.description || undefined,
image: coverImage.value || undefined
},
siteInfo.value
)
</script>
app/templates/template-01/pages/CaseDetail.vue
+56
View File
@@ -0,0 +1,56 @@
<template>
<div class="min-h-screen py-16 bg-white">
<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-gray-500 hover:text-blue-600">← 返回案例列表</NuxtLink>
</div>
<h1 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">{{ caseItem.title }}</h1>
<div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-8 pb-8 border-b border-gray-100">
<span v-if="caseItem.clientName" class="px-3 py-1 bg-blue-50 text-blue-600 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-gray-100 rounded-xl 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-gray-600 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-gray-900 mb-4">案例不存在或已下架</h1>
<NuxtLink :to="`/case${caseItem?.navigationId ? '?navId=' + caseItem.navigationId : ''}`" class="text-blue-600 hover:underline">返回案例列表</NuxtLink>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { CaseItem } from '~/types'
/**
* 模板 1 - 案例详情页
*/
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>
app/templates/template-01/pages/CaseList.vue
+130
View File
@@ -0,0 +1,130 @@
<template>
<div class="min-h-screen py-16 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-900 mb-4">{{ pageTitle }}</h1>
<p class="text-gray-600 max-w-2xl mx-auto">展示我们的成功案例与行业经验</p>
</div>
<div v-if="pending" class="flex justify-center py-12">
<SiteLoading />
</div>
<SiteError v-else-if="error" message="获取案例列表失败" />
<div v-else class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<article
v-for="item in cases"
:key="item.id"
class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
>
<NuxtLink :to="`/case/${item.id}`" class="block">
<div class="aspect-[4/3] bg-gray-100 overflow-hidden">
<img
v-if="item.cover"
:src="fileUrl(item.cover)"
:alt="item.title"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
>
<span v-else class="flex items-center justify-center h-full text-gray-400">暂无图片</span>
</div>
<div class="p-5">
<h2 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
{{ item.title }}
</h2>
<p class="text-sm text-gray-600 line-clamp-2">{{ stripHtml(item.summary) }}</p>
<div v-if="item.clientName" class="mt-3 text-xs text-gray-500">
客户：{{ item.clientName }}
</div>
</div>
</NuxtLink>
</article>
</div>
<!-- 分页 -->
<div v-if="totalPages > 1" class="flex justify-center mt-12">
<nav class="flex items-center gap-2">
<button
v-for="p in totalPages"
:key="p"
class="px-4 py-2 text-sm rounded-lg transition-colors"
:class="p === currentPage ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-blue-50'"
@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'
/**
* 模板 1 - 案例列表页
*/
const { fileUrl } = useFileUrl()
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 || '案例展示'
})
</script>
app/templates/template-01/pages/Contact.vue
+91
View File
@@ -0,0 +1,91 @@
<template>
<div class="min-h-screen py-16 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-900 mb-4">联系我们</h1>
<p class="text-gray-600 max-w-2xl mx-auto">
有任何问题或合作意向，欢迎随时与我们联系
</p>
</div>
<div class="grid lg:grid-cols-2 gap-10">
<!-- 联系信息 -->
<div class="bg-white rounded-xl p-8 shadow-sm">
<h2 class="text-xl font-bold text-gray-900 mb-6">联系方式</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0">
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<div>
<h3 class="font-medium text-gray-900">电话咨询</h3>
<p class="text-gray-600 mt-1">{{ siteInfo?.phone || '400-000-0000' }}</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0">
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<div>
<h3 class="font-medium text-gray-900">电子邮箱</h3>
<p class="text-gray-600 mt-1">{{ siteInfo?.email || 'contact@example.com' }}</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0">
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div>
<h3 class="font-medium text-gray-900">公司地址</h3>
<p class="text-gray-600 mt-1">{{ siteInfo?.address || '请填写公司地址' }}</p>
</div>
</div>
</div>
</div>
<!-- 在线表单 -->
<div class="bg-white rounded-xl p-8 shadow-sm">
<h2 class="text-xl font-bold text-gray-900 mb-6">在线留言</h2>
<ContactForm
input-class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
submit-class="w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
label-class="block text-sm font-medium text-gray-700 mb-1"
:accent="config.themeConfig.primaryColor"
/>
</div>
</div>
</div>
</div>
<PageAttachments
v-if="contactAttachments.length"
:attachments="contactAttachments"
class="mt-10"
/>
</div>
</template>
<script setup lang="ts">
import type { PageDetail, PageAttachment } from '~/types'
import config from '../config'
/**
* 模板 1 - 联系我们页
*/
const { siteInfo, fetchSiteInfo } = useSite()
await fetchSiteInfo()
// 联系页附件（CMS「单页管理」按 path=contact 维护）
const { data: contactPage } = await useFetch<PageDetail>('/api/page/detail', { query: { path: 'contact' } })
const contactAttachments = computed<PageAttachment[]>(() => contactPage.value?.attachments || [])
</script>
app/templates/template-01/pages/Home.vue
+124
View File
@@ -0,0 +1,124 @@
<template>
<div>
<!-- 首屏：受 hero/banner 开关控制 -->
<HeroSection :show-banner="homeBlocks.banner" :show-hero-features="homeBlocks.hero" />
<!-- 我们的优势：FeatureSection 内部已根据 advantages.enabled 自显隐 -->
<FeatureSection />
<!-- 关于我们 -->
<AboutSection
title-color="text-gray-900"
accent-color="#3b82f6"
summary-color="text-gray-600"
link-color="text-blue-600"
container-class="container mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-12 items-center"
image-bg-color="bg-gray-100"
image-object-fit="object-cover"
/>
<!-- 推荐/置顶产品（全站跨栏目精选置顶产品 top>0；受后台「产品展示」区块开关控制） -->
<RecommendProductsSection
v-if="showProducts"
title="产品展示"
subtitle="了解我们的核心产品与解决方案"
accent-color="#3b82f6"
title-color="#111827"
subtitle-color="#4b5563"
:limit="3"
:more-link="productNav?.path || '/products'"
more-text="查看更多"
/>
<!-- 案例展示（上游无推荐字段，默认最新案例；受后台「案例展示」区块开关控制） -->
<RecommendCasesSection
v-if="showCases"
title="案例展示"
subtitle="真实案例呈现，见证客户成功"
accent-color="#3b82f6"
title-color="#111827"
subtitle-color="#4b5563"
:limit="3"
:more-link="caseNav?.path || '/case'"
more-text="查看更多案例"
/>
<!-- 推荐资讯（全站跨栏目精选推荐文章 recommend=1；受后台「最新动态」区块开关控制） -->
<RecommendArticlesSection
v-if="showNews"
title="最新动态"
subtitle="了解企业最新资讯与行业动态"
accent-color="#3b82f6"
title-color="#111827"
subtitle-color="#4b5563"
:limit="3"
:more-link="newsNav?.path || '/news'"
more-text="查看更多"
/>
<!-- 联系我们 -->
<section v-if="showCta" class="py-16 lg:py-20 bg-blue-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4" data-reveal>
准备好开始了吗？
</h2>
<p class="text-gray-600 max-w-2xl mx-auto mb-8" data-reveal data-reveal-delay="100">
立即联系我们，获取专属企业官网解决方案
</p>
<button
type="button"
class="inline-flex items-center justify-center px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors anim-shimmer"
@click="openConsult()"
>
立即咨询
</button>
</div>
</section>
</div>
</template>
<script setup lang="ts">
/**
* 模板 1 - 首页
* 产品 / 案例 / 资讯三个区块改为读取「推荐 / 置顶」精选内容（全站跨栏目），
* 由共享组件 RecommendProductsSection / RecommendCasesSection / RecommendArticlesSection 承载，
* 逻辑见 app/composables/useRecommend.ts。
* 各区块显示仍受后台「首页区块总览」开关（siteInfo.setting.features）控制。
*/
import HeroSection from '../components/HeroSection.vue'
import FeatureSection from '../components/FeatureSection.vue'
import { useFeatures } from '~/composables/useFeatures'
import type { CmsNavigation } from '~/types'
const { siteInfo, navigations, fetchSiteInfo } = useSite()
const { openConsult } = useConsult()
const { homeBlocks } = useFeatures([
{ title: '企业优势', desc: '快速建立品牌信任感，展示企业实力与核心竞争力。', icon: 'building' },
{ title: '核心产品', desc: '清晰的产品展示与分类，帮助客户快速了解产品价值。', icon: 'box' },
{ title: '客户案例', desc: '真实案例呈现，增强说服力，促进客户决策。', icon: 'case' },
{ title: '在线留言', desc: '便捷的留言咨询通道，不错过任何潜在客户。', icon: 'message' }
])
// 获取站点信息（含导航）
await fetchSiteInfo()
/** 各区块显隐开关（后台首页区块总览） */
const showProducts = computed(() => homeBlocks.value.products)
const showCases = computed(() => homeBlocks.value.cases)
const showNews = computed(() => homeBlocks.value.news)
const showCta = computed(() => homeBlocks.value.cta)
/** 从导航中定位各模块，用于「查看更多」跳转 */
const newsNav = computed<CmsNavigation | undefined>(() => {
const navs = navigations.value || []
return navs.find((n) => n.model === 'article')
})
const productNav = computed<CmsNavigation | undefined>(() => {
const navs = navigations.value || []
return navs.find((n) => n.model === 'product')
})
const caseNav = computed<CmsNavigation | undefined>(() => {
const navs = navigations.value || []
return navs.find((n) => n.model === 'case')
})
</script>
app/templates/template-01/pages/NewsDetail.vue
+55
View File
@@ -0,0 +1,55 @@
<template>
<div class="min-h-screen py-16 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div v-if="article" class="max-w-4xl mx-auto">
<div class="mb-8">
<NuxtLink :to="`/article${article?.navigationId ? '?navId=' + article.navigationId : ''}`" class="text-sm text-gray-500 hover:text-blue-600">← 返回新闻列表</NuxtLink>
</div>
<h1 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
{{ article.title }}
</h1>
<div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-8 pb-8 border-b border-gray-100">
<span v-if="article.categoryName" class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full">
{{ article.categoryName }}
</span>
<span>发布时间：{{ formatDate(article.publishTime || article.createTime) }}</span>
<span v-if="article.author">作者：{{ article.author }}</span>
</div>
<RichText :content="article.content" />
<PageAttachments
v-if="article?.files?.length"
:attachments="article.files"
/>
</div>
<div v-else class="text-center py-20">
<h1 class="text-2xl font-bold text-gray-900 mb-4">文章不存在或已下架</h1>
<NuxtLink :to="`/article${article?.navigationId ? '?navId=' + article.navigationId : ''}`" class="text-blue-600 hover:underline">返回新闻列表</NuxtLink>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import type { Article } from '~/types'
/**
* 模板 1 - 新闻详情页
*/
const route = useRoute()
const id = route.params.id as string
const { fileUrl } = useFileUrl()
const { data: article } = await useFetch<Article | null>(`/api/article/detail?id=${id}`, {
key: `article-${id}`
})
function formatDate(date?: string) {
if (!date) return ''
return dayjs(date).format('YYYY-MM-DD')
}
</script>
app/templates/template-01/pages/NewsList.vue
+191
View File
@@ -0,0 +1,191 @@
<template>
<div class="min-h-screen py-16 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-900 mb-4">{{ pageTitle }}</h1>
<p class="text-gray-600 max-w-2xl mx-auto">了解企业最新动态与行业资讯</p>
</div>
<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>
<div v-if="articles.length > 0" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<article
v-for="item in articles"
:key="item.id || item.articleId"
class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
>
<NuxtLink :to="`/article/${item.id || item.articleId}`">
<div class="aspect-video bg-gray-100 flex items-center justify-center">
<img
v-if="item.image || item.cover || item.photo"
:src="fileUrl(item.image || item.cover || item.photo || '')"
:alt="item.title"
class="w-full h-full object-cover"
>
<span v-else class="text-gray-400">暂无图片</span>
</div>
</NuxtLink>
<div class="p-5">
<div class="text-xs text-gray-500 mb-2">
{{ formatDate(item.publishTime || item.createTime) }}
<span v-if="item.categoryName" class="ml-2 text-blue-600">{{ item.categoryName }}</span>
</div>
<h2 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-2 hover:text-blue-600 transition-colors">
<NuxtLink :to="`/article/${item.id || item.articleId}`">{{ item.title }}</NuxtLink>
</h2>
<p class="text-sm text-gray-600 line-clamp-2">{{ stripHtml(item.summary) }}</p>
</div>
</article>
</div>
<!-- 空状态 -->
<div v-else class="text-center py-20">
<svg class="w-16 h-16 mx-auto text-gray-300 mb-4" 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 class="text-gray-500">暂无新闻内容</p>
</div>
<!-- 分页 -->
<div v-if="totalPages > 1" class="flex justify-center mt-12">
<nav class="flex items-center gap-2">
<button
v-for="p in totalPages"
:key="p"
class="px-4 py-2 text-sm rounded-lg transition-colors"
:class="p === currentPage
? 'bg-blue-600 text-white'
: 'bg-white text-gray-700 hover:bg-blue-50'"
@click="currentPage = p"
>
{{ p }}
</button>
</nav>
</div>
</template>
</div>
</div>
</template>
<script setup lang="ts">
/**
* 模板 1 - 新闻列表页
* 从路由参数获取 navigationId，调用 /api/article/list 获取文章列表
* 支持两种入口：
* 1. /article/:navigationId → CMS 导航路径
* 2. /news → 传统路径（自动从 topNavs 中查找 model=article 的栏目）
*/
import dayjs from 'dayjs'
import type { Article, PageResult, ApiEnvelope, CmsNavigation } from '~/types'
import { collectDescendantNavIds } from '~/utils/nav-tree'
const { allNavigations, fetchSiteInfo } = useSite()
const { fileUrl } = useFileUrl()
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. 兜底：从 navigations 中查找 model=article 的导航
const navs = allNavigations.value || []
const nav = navs.find((n) => n.model === 'article' || (n.path || '').split('/').filter(Boolean)[0] === 'article')
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')
}
</script>
app/templates/template-01/pages/Page.vue
+163
View File
@@ -0,0 +1,163 @@
<template>
<div class="min-h-[60vh] flex items-center py-20 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- 顶部：栏目标题 + 自身内容 -->
<div v-if="pageTitle" class="max-w-4xl mx-auto">
<h1 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6 text-center">
{{ pageTitle }}
</h1>
<div v-if="pageData && pageData.hasContent">
<div v-if="pageData.updateTime" class="text-gray-500 text-sm text-center mb-10">
更新时间：{{ formatDate(pageData.updateTime) }}
</div>
<RichText :content="pageData.content" />
</div>
<PageAttachments
v-if="pageData?.attachments?.length"
:attachments="pageData.attachments"
/>
</div>
<!-- 子栏目聚合列表 -->
<div v-if="childCards.length" class="max-w-5xl mx-auto mt-16">
<h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">子栏目</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<NuxtLink
v-for="p in childCards"
:key="p.navigationId"
:to="`/page/${p.navigationId}`"
class="block p-6 rounded-xl border border-gray-200 hover:shadow-lg hover:border-blue-400 transition"
>
<h3 class="text-lg font-semibold text-gray-900 mb-2">{{ p.title }}</h3>
<p class="text-sm text-gray-500 leading-relaxed line-clamp-3">{{ excerpt(p.content) }}</p>
</NuxtLink>
</div>
</div>
<!-- 空状态 -->
<div v-if="!pageData?.hasContent && !childCards.length" class="text-center py-20">
<h1 class="text-2xl font-bold text-gray-900 mb-4">{{ pageTitle }}</h1>
<p class="text-gray-500 mb-2">{{ emptyState.title }}</p>
<p class="text-gray-400 text-sm mb-6 leading-relaxed">
{{ emptyState.desc }}<br />
当前导航：{{ currentNav?.title || pageTitle }}（ID：{{ navigationId }}）
</p>
<NuxtLink to="/" class="text-blue-600 hover:underline">返回首页</NuxtLink>
</div>
</div>
</div>
</template>
<script setup lang="ts">
/**
* 模板 1 - 通用 CMS 页面
* 支持两种入口：
* 1. /page/:navigationId → CMS 导航路径（优先）
* 2. /:slug → 传统路径
*
* 父栏目聚合：当当前 page 栏目拥有子栏目时，递归收集其下所有子栏目的单页，
* 以卡片列表形式聚合展示（每个子页卡片链接到 /page/{childNavId} 详情页）。
*/
import dayjs from 'dayjs'
import type { CmsNavigation, PageDetail } from '~/types'
import { collectDescendantNavIds, isParentNavigation } from '~/utils/nav-tree'
interface ChildPage {
pageId?: number
title?: string
path?: string
content?: string
navigationId?: number
image?: string | null
}
const route = useRoute()
const { allNavigations, fetchSiteInfo } = useSite()
await fetchSiteInfo()
/** 从路由获取 navigationId */
const navigationId = computed(() => {
const id = route.params.id as string
if (id) {
const num = Number(id)
if (!Number.isNaN(num)) return num
}
return undefined
})
/** 当前栏目是否为父栏目（拥有子栏目） */
const hasChildren = computed(() => isParentNavigation(navigationId.value, allNavigations.value || []))
/** 递归收集当前栏目自身 + 所有后代 navigationId */
const descendantNavIds = computed(() =>
collectDescendantNavIds(navigationId.value, allNavigations.value || [])
)
/** 从导航中查找当前页面信息（使用 allNavigations，已做标题映射） */
const currentNav = computed<CmsNavigation | undefined>(() => {
if (!navigationId.value) return undefined
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(allNavigations.value)
})
/** 获取页面内容 */
const navId = navigationId.value
const pagePath = (() => {
const num = Number(route.params.id)
return Number.isNaN(num) ? (route.params.id as string) : undefined
})()
const { data: pageData } = await useFetch<PageDetail>('/api/page/detail', {
key: `page-${navId ?? pagePath ?? 'default'}`,
query: { navigationId: navId, path: pagePath }
})
/** 父栏目聚合：取其下所有子栏目的单页（不含父栏目自身，避免与顶部内容重复） */
const childPages = ref<ChildPage[]>([])
if (hasChildren.value && descendantNavIds.value.length) {
const { data: childrenData } = await useFetch<{ list: ChildPage[]; count: number }>('/api/page/children', {
key: `page-children-${navId}`,
query: { navigationIds: descendantNavIds.value.join(',') }
})
childPages.value = childrenData.value?.list || []
}
const childCards = computed(() => childPages.value.filter(p => p.navigationId !== navId))
const pageTitle = computed(() => {
return pageData.value?.title || currentNav.value?.title || '页面'
})
/** 空内容兜底文案，按状态区分「未录入」与「接口异常」 */
const emptyState = computed(() => {
const status = pageData.value?.status
if (status === 'error') {
return { title: '内容暂时无法加载', desc: '内容接口暂时不可用，请稍后再试。' }
}
return { title: '内容尚未录入', desc: '该页面正文尚未在 CMS 管理后台配置，请前往 CMS 后台为该导航补充内容。' }
})
/** 富文本正文截取纯文本摘要 */
function excerpt(html?: string, len = 80) {
if (!html) return ''
const text = (html || '')
.replace(/<[^>]+>/g, '')
.replace(/&nbsp;/g, ' ')
.replace(/\s+/g, ' ')
.trim()
return text.length > len ? text.slice(0, len) + '…' : text
}
function formatDate(date?: string) {
if (!date) return ''
return dayjs(date).format('YYYY-MM-DD')
}
</script>
app/templates/template-01/pages/ProductDetail.vue
+64
View File
@@ -0,0 +1,64 @@
<template>
<div class="min-h-screen py-16 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div v-if="product" class="max-w-5xl mx-auto">
<div class="mb-8">
<NuxtLink :to="`/product${product?.navigationId ? '?navId=' + product.navigationId : ''}`" class="text-sm text-gray-500 hover:text-blue-600">← 返回产品列表</NuxtLink>
</div>
<div class="grid lg:grid-cols-2 gap-10 mb-12">
<div class="aspect-video bg-gray-100 rounded-xl overflow-hidden">
<img
v-if="product.cover"
:src="fileUrl(product.cover)"
:alt="product.productName"
class="w-full h-full object-cover"
>
</div>
<div>
<h1 class="text-3xl font-bold text-gray-900 mb-4">{{ product.productName }}</h1>
<p v-if="product.subtitle" class="text-lg text-gray-600 mb-6">{{ product.subtitle }}</p>
<p class="text-gray-600 leading-relaxed mb-6">{{ stripHtml(product.description) }}</p>
<div v-if="product.price" class="text-2xl font-bold text-blue-600 mb-6">
{{ product.price }}
</div>
<button
type="button"
class="inline-flex items-center justify-center px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
@click="openConsult({ need: `咨询产品：${product.productName}`, source: 'product-detail' })"
>
立即咨询
</button>
</div>
</div>
<div class="border-t border-gray-100 pt-10">
<h2 class="text-2xl font-bold text-gray-900 mb-6">产品详情</h2>
<RichText :content="product.content" />
</div>
</div>
<div v-else class="text-center py-20">
<h1 class="text-2xl font-bold text-gray-900 mb-4">产品不存在或已下架</h1>
<NuxtLink :to="`/product${product?.navigationId ? '?navId=' + product.navigationId : ''}`" class="text-blue-600 hover:underline">返回产品列表</NuxtLink>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { Product } from '~/types'
/**
* 模板 1 - 产品详情页
*/
const route = useRoute()
const id = route.params.id as string
const { fileUrl } = useFileUrl()
const { openConsult } = useConsult()
const { data: product } = await useFetch<Product | null>(`/api/product/detail?id=${id}`, {
key: `product-${id}`
})
</script>
app/templates/template-01/pages/ProductList.vue
+139
View File
@@ -0,0 +1,139 @@
<template>
<div class="min-h-screen py-16 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-900 mb-4">产品中心</h1>
<p class="text-gray-600 max-w-2xl mx-auto">为企业提供全方位的数字化解决方案</p>
</div>
<div v-if="pending" class="flex justify-center py-12">
<SiteLoading />
</div>
<SiteError v-else-if="error" message="获取产品列表失败" />
<div v-else class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<article
v-for="item in products"
:key="item.id ?? item.productId"
class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
>
<div class="aspect-video bg-gray-100 flex items-center justify-center">
<img
v-if="item.cover"
:src="fileUrl(item.cover)"
:alt="item.productName"
class="w-full h-full object-cover"
>
<span v-else class="text-gray-400">暂无图片</span>
</div>
<div class="p-5">
<h2 class="text-lg font-semibold text-gray-900 mb-2 hover:text-blue-600 transition-colors">
<NuxtLink :to="`/product/${item.id ?? item.productId}`">{{ item.productName }}</NuxtLink>
</h2>
<p class="text-sm text-gray-600 line-clamp-2 mb-4">{{ stripHtml(item.description || item.subtitle) }}</p>
<div class="flex items-center justify-between">
<span v-if="item.price" class="text-lg font-bold text-blue-600">{{ item.price }}</span>
<NuxtLink
:to="`/product/${item.id ?? item.productId}`"
class="text-sm text-blue-600 hover:text-blue-700 font-medium"
>
了解详情 →
</NuxtLink>
</div>
</div>
</article>
</div>
<!-- 分页 -->
<div v-if="totalPages > 1" class="flex justify-center mt-12">
<nav class="flex items-center gap-2">
<button
v-for="p in totalPages"
:key="p"
class="px-4 py-2 text-sm rounded-lg transition-colors"
:class="p === currentPage ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-blue-50'"
@click="currentPage = p"
>
{{ p }}
</button>
</nav>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { Product, PageResult, ApiEnvelope } from '~/types'
import { collectDescendantNavIds } from '~/utils/nav-tree'
/**
* 产品列表页
*/
const { fileUrl } = useFileUrl()
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
})
</script>
app/templates/template-01/pages/Renewal.vue
+80
View File
@@ -0,0 +1,80 @@
<template>
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#1a6dff] to-[#0d4fb8] text-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-2xl mx-auto text-center">
<div class="w-20 h-20 mx-auto mb-8 rounded-full bg-white/20 flex items-center justify-center">
<svg class="w-10 h-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h1 class="text-3xl sm:text-4xl font-bold mb-4">
网站服务已到期
</h1>
<p class="text-lg text-blue-100 mb-8">
您访问的企业官网服务已过期，请联系管理员续费以恢复正常访问。
</p>
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 sm:p-8 mb-8 text-left">
<h2 class="text-xl font-semibold mb-4">续费后可继续使用</h2>
<ul class="space-y-3 text-blue-100">
<li class="flex items-center gap-2">
<svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
企业官网正常展示
</li>
<li class="flex items-center gap-2">
<svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
产品/案例/新闻内容展示
</li>
<li class="flex items-center gap-2">
<svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
在线留言与客户咨询
</li>
<li class="flex items-center gap-2">
<svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
独立域名访问
</li>
</ul>
</div>
<button
class="inline-flex items-center justify-center px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-50 transition-colors"
@click="goToRenew"
>
立即续费
</button>
<p v-if="siteInfo?.phone" class="mt-6 text-sm text-blue-100">
如需帮助，请拨打：{{ siteInfo.phone }}
</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
/**
* 模板 1 - 续费引导页
*/
const { siteInfo, fetchSiteInfo } = useSite()
await fetchSiteInfo()
definePageMeta({
layout: 'blank'
})
function goToRenew() {
// 实际项目中应跳转 SaaS 管理后台续费页面
const appId = useRuntimeConfig().public.appId
window.open(`/api/subscription/renew?appId=${appId}`, '_blank')
}
</script>
app/templates/template-01/pages/index.vue
+58
View File
@@ -0,0 +1,58 @@
<template>
<Component :is="component" v-if="component" />
<SiteLoading v-else />
</template>
<script setup lang="ts">
/**
* 模板 1 - 通用模板页面选择器
* 根据路由动态选择对应页面组件
*/
const route = useRoute()
const component = shallowRef<Component | null>(null)
const routeMap: Record<string, () => Promise<{ default: Component }>> = {
news: () => import('./NewsList.vue'),
'news-id': () => import('./NewsDetail.vue'),
products: () => import('./ProductList.vue'),
'products-id': () => import('./ProductDetail.vue'),
cases: () => import('./CaseList.vue'),
'cases-id': () => import('./CaseDetail.vue'),
contact: () => import('./Contact.vue'),
renewal: () => import('./Renewal.vue')
}
async function resolveComponent() {
const name = route.name as string | undefined
if (name === 'index') {
const mod = await import('./Home.vue')
component.value = mod.default
return
}
if (name === 'slug') {
const mod = await import('./Page.vue')
component.value = mod.default
return
}
if (name) {
const loader = routeMap[name]
if (loader) {
const mod = await loader()
component.value = mod.default
return
}
}
component.value = null
}
if (import.meta.server) {
await resolveComponent()
}
onMounted(resolveComponent)
</script>
app/templates/template-01/theme.css
+11
View File
@@ -0,0 +1,11 @@
/* 模板 1 主题变量 */
[data-template-id="template-01"] {
--t1-primary: #1a6dff;
--t1-primary-dark: #0d4fb8;
--t1-primary-light: #e8f0ff;
--t1-text: #1f2937;
--t1-text-secondary: #6b7280;
--t1-bg: #ffffff;
--t1-bg-gray: #f9fafb;
--t1-footer-bg: #111827;
}
app/templates/template-02/components/FeatureSection.vue
+49
View File
@@ -0,0 +1,49 @@
<template>
<section v-if="enabled" class="py-16 lg:py-20 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">{{ title }}</h2>
<p v-if="subtitle" class="text-gray-600 max-w-2xl mx-auto">
{{ subtitle }}
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div
v-for="(item, index) in items"
:key="item.title || index"
class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow anim-card group"
data-reveal
:data-reveal-delay="index * 100"
>
<div
class="w-12 h-12 rounded-lg bg-[var(--t2-primary-light)] flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110"
>
<FeatureIcon :name="item.icon" class="w-6 h-6 text-[var(--t2-primary)]" />
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">{{ item.title }}</h3>
<p class="text-sm text-gray-600 leading-relaxed">{{ item.desc }}</p>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
/**
* 模板 2 - 特色功能模块（后台可配置）
* 数据来自 useFeatures()，未配置时回退到下方默认值。
*/
import FeatureIcon from '~/components/FeatureIcon.vue'
import { useFeatures } from '~/composables/useFeatures'
import type { FeatureItem } from '~/types'
const defaultFeatures: FeatureItem[] = [
{ title: '企业优势', desc: '快速建立品牌信任感，展示企业实力与核心竞争力。', icon: 'building' },
{ title: '核心产品', desc: '清晰的产品展示与分类，帮助客户快速了解产品价值。', icon: 'box' },
{ title: '客户案例', desc: '真实案例呈现，增强说服力，促进客户决策。', icon: 'case' },
{ title: '在线留言', desc: '便捷的留言咨询通道，不错过任何潜在客户。', icon: 'message' }
]
const { enabled, title, subtitle, items } = useFeatures(defaultFeatures)
</script>
app/templates/template-02/components/Footer.vue
+128
View File
@@ -0,0 +1,128 @@
<template>
<footer class="bg-[var(--t2-footer-bg)] text-gray-300">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
<!-- 公司信息 -->
<div class="sm:col-span-2 lg:col-span-1">
<SiteBrand
link-class="mb-4"
:logo="siteLogo"
:icon="siteIcon"
:name="siteName"
logo-class="h-8 w-auto max-w-[200px] object-contain"
icon-class="h-6 w-auto object-contain"
name-class="text-lg font-bold text-white"
>
<template #fallback-icon>
<div class="w-8 h-8 rounded-lg bg-[var(--t2-primary)] flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
</template>
</SiteBrand>
<p v-if="slogan" class="text-sm text-gray-400 mb-3">{{ slogan }}</p>
<p class="text-sm text-gray-400 leading-relaxed">
{{ siteInfo?.comments || siteInfo?.content || '专注企业数字化官网建设，助力品牌增长。' }}
</p>
</div>
<!-- 快速链接（从导航获取） -->
<div>
<h4 class="text-white font-semibold mb-4">快速链接</h4>
<ul class="space-y-2">
<li v-for="item in quickLinks" :key="item.navigationId">
<NuxtLink
:to="getNavLink(item)"
:target="item.target === '_blank' ? '_blank' : undefined"
class="text-sm text-gray-400 hover:text-white transition-colors"
>
{{ item.title }}
</NuxtLink>
</li>
</ul>
</div>
<!-- 联系方式 -->
<div>
<h4 class="text-white font-semibold mb-4">联系我们</h4>
<ul class="space-y-2 text-sm text-gray-400">
<li v-if="phone">
<span class="text-gray-500">电话：</span>{{ phone }}
</li>
<li v-if="email">
<span class="text-gray-500">邮箱：</span>{{ email }}
</li>
<li v-if="address" class="leading-relaxed">
<span class="text-gray-500">地址：</span>{{ address }}
</li>
<li v-if="officialWebsite">
<span class="text-gray-500">官网：</span>
<a :href="officialWebsiteUrl" target="_blank" rel="nofollow" class="hover:text-white transition-colors">{{ officialWebsite }}</a>
</li>
</ul>
</div>
<!-- 微信二维码 + 社交链接 -->
<div v-if="wxQrcode || socialLinks.length">
<h4 class="text-white font-semibold mb-4">关注我们</h4>
<div v-if="wxQrcode" class="bg-white rounded-lg p-3 inline-block">
<img :src="wxQrcode" alt="微信二维码" class="w-32 h-32 object-contain">
</div>
<p v-if="wxQrcode" class="text-xs text-gray-500 mt-2">{{ siteConfig?.wxQrcodeText || '扫码关注' }}</p>
<div v-if="socialLinks.length" class="mt-3 flex flex-col gap-1">
<a
v-for="link in socialLinks"
:key="link.url"
:href="link.url"
target="_blank"
rel="nofollow"
class="text-sm text-gray-400 hover:text-white transition-colors"
>
{{ link.name || link.type }}
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-sm text-gray-500">
{{ copyright || `© ${new Date().getFullYear()} ${siteName || '企业官网'} 版权所有` }}
</p>
<div class="flex items-center gap-4">
<p v-if="icpNo" class="text-sm text-gray-500">
{{ icpNo }}
</p>
<p v-if="siteInfo?.policeNo" class="text-sm text-gray-500">
{{ siteInfo.policeNo }}
</p>
<div class="flex items-center gap-2 text-xs">
<span class="text-gray-500">Powered by</span>
<a
rel="nofollow"
href="https://site.websoft.top"
target="_blank"
class="text-gray-500 hover:text-gray-200 transition-colors"
>云·企业官网</a>
</div>
</div>
</div>
</div>
</footer>
</template>
<script setup lang="ts">
/**
* 模板 1 - Footer 组件
* 使用 config 与 useSite 的 bottomNavigations（top!==1 的页脚链接）渲染
*/
import type { CmsNavigation } from '~/types'
const { siteInfo, siteName, siteLogo, siteIcon, siteConfig, bottomNavigations, phone, email, address, icpNo, copyright, wxQrcode, slogan, officialWebsite, officialWebsiteUrl, socialLinks } = useSite()
/** 快速链接：取顶级导航中非首页且无子菜单的项 */
const quickLinks = computed<CmsNavigation[]>(() => {
const navs = bottomNavigations.value || []
return navs.filter((nav) => nav.model !== 'index').slice(0, 6)
})
</script>
app/templates/template-02/components/Header.vue
+158
View File
@@ -0,0 +1,158 @@
<template>
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 lg:h-20">
<!-- Logo -->
<SiteBrand
link-class="flex-shrink-0"
:logo="siteLogo"
:icon="siteIcon"
:name="siteName"
logo-class="h-12 w-auto max-w-[200px] object-contain"
icon-class="h-8 w-auto object-contain"
name-class="text-lg font-bold text-gray-900 truncate max-w-[160px] sm:max-w-xs"
>
<template #fallback-icon>
<div class="w-8 h-8 rounded-lg bg-[var(--t2-primary)] flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
</template>
</SiteBrand>
<!-- 搜索框（后台 setting.searchBtn 控制是否显示） -->
<SiteSearchBox v-if="showHeaderSearch" variant="light" accent="var(--t2-primary)" class="hidden lg:flex items-center ml-8 mr-auto" />
<!-- 桌面端导航 -->
<nav class="hidden lg:flex items-center gap-8">
<template v-for="item in navItems" :key="item.navigationId || item.path">
<!-- 有子菜单 -->
<div v-if="item.children && item.children.length > 0" class="relative group">
<button class="text-base font-medium text-gray-700 hover:text-[var(--t2-primary)] transition-colors flex items-center gap-1">
{{ item.title }}
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<!-- 下拉菜单 -->
<div class="absolute left-1/2 -translate-x-1/2 top-full pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all">
<div class="bg-white rounded-lg shadow-lg border border-gray-100 py-2 min-w-[160px]">
<NuxtLink
v-for="child in item.children"
:key="child.navigationId"
:to="getChildPath(child)"
class="block px-4 py-2 text-[15px] text-gray-700 hover:text-[var(--t2-primary)] hover:bg-[var(--t2-primary-light)] transition-colors whitespace-nowrap"
>
{{ child.title }}
</NuxtLink>
</div>
</div>
</div>
<!-- 无子菜单 -->
<NuxtLink
v-else
:to="getNavLink(item)"
:target="item.target === '_blank' ? '_blank' : undefined"
class="text-base font-medium text-gray-700 hover:text-[var(--t2-primary)] transition-colors"
active-class="text-[var(--t2-primary)]"
>
{{ item.title }}
</NuxtLink>
</template>
</nav>
<!-- CTA -->
<div class="hidden lg:block mx-10">
<NuxtLink
to="/contact"
class="inline-flex items-center justify-center px-4 py-2 bg-[var(--t2-primary)] text-white text-base font-semibold rounded-full hover:bg-[var(--t2-primary-dark)] transition-colors"
>
在线咨询
</NuxtLink>
</div>
<!-- 移动端菜单按钮 -->
<button
class="lg:hidden p-2 rounded-lg hover:bg-gray-100"
@click="mobileMenuOpen = !mobileMenuOpen"
>
<svg v-if="!mobileMenuOpen" class="w-6 h-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg v-else class="w-6 h-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- 移动端菜单 -->
<div
v-if="mobileMenuOpen"
class="lg:hidden bg-white border-t border-gray-100"
>
<div class="container mx-auto px-4 py-4 space-y-1">
<template v-for="item in navItems" :key="item.navigationId || item.path">
<!-- 有子菜单 -->
<div v-if="item.children && item.children.length > 0">
<div class="px-4 py-3 text-base font-semibold text-gray-900">
{{ item.title }}
</div>
<NuxtLink
v-for="child in item.children"
:key="child.navigationId"
:to="getChildPath(child)"
class="block px-8 py-2 text-sm text-gray-600 hover:text-[var(--t2-primary)] hover:bg-[var(--t2-primary-light)] rounded-lg transition-colors"
@click="mobileMenuOpen = false"
>
{{ child.title }}
</NuxtLink>
</div>
<!-- 无子菜单 -->
<NuxtLink
v-else
:to="getNavLink(item)"
:target="item.target === '_blank' ? '_blank' : undefined"
class="block px-4 py-3 text-base font-medium text-gray-700 hover:text-[var(--t2-primary)] hover:bg-[var(--t2-primary-light)] rounded-lg transition-colors"
active-class="text-[var(--t2-primary)] bg-[var(--t2-primary-light)]"
@click="mobileMenuOpen = false"
>
{{ item.title }}
</NuxtLink>
</template>
<NuxtLink
to="/contact"
class="block px-4 py-3 mt-2 text-center bg-[var(--t2-primary)] text-white font-semibold rounded-lg hover:bg-[var(--t2-primary-dark)] transition-colors"
@click="mobileMenuOpen = false"
>
在线咨询
</NuxtLink>
</div>
</div>
</header>
</template>
<script setup lang="ts">
/**
* 模板 1 - Header 组件
* 使用 useSite 的 navigations（合并 topNavs + bottomNavs，过滤 top===1）渲染导航菜单
*/
import type { CmsNavigation } from '~/types'
const { siteInfo, siteName, siteLogo, siteIcon, navigations, showHeaderSearch, fetchSiteInfo } = useSite()
const mobileMenuOpen = ref(false)
/** 子导航链接统一走 app/utils 的 getNavLink（自动避免 /page/4598?navId=4598 冗余拼接） */
function getChildPath(child: CmsNavigation): string {
return getNavLink(child)
}
// 获取站点信息（含导航数据）
await fetchSiteInfo()
/** 导航项（使用 useSite 合并 topNavs + bottomNavs 并过滤 top===1 的导航） */
const navItems = computed<CmsNavigation[]>(() => {
return navigations.value || []
})
</script>
app/templates/template-02/components/HeroSection.vue
+95
View File
@@ -0,0 +1,95 @@
<template>
<section class="relative py-20 lg:py-28 bg-gradient-to-br from-[var(--t2-primary)] to-[var(--t2-primary-dark)] text-white overflow-hidden anim-gradient">
<!-- 漂浮柔光球：缓慢浮动，增加首屏活力 -->
<div class="anim-blob w-72 h-72 bg-white/25 -top-16 -left-10" />
<div class="anim-blob anim-blob--2 w-80 h-80 bg-white/20 -bottom-24 right-0" />
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="max-w-2xl">
<h1
class="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight mb-6"
data-reveal
>
{{ heroTitle }}
</h1>
<p
class="text-base sm:text-lg text-[var(--t2-primary-light)] mb-8 leading-relaxed"
data-reveal
data-reveal-delay="120"
>
{{ heroSubtitle }}
</p>
<div class="flex flex-wrap gap-4" data-reveal data-reveal-delay="240">
<button
type="button"
class="inline-flex items-center justify-center px-6 py-3 bg-white text-[var(--t2-primary)] font-semibold rounded-lg hover:bg-[var(--t2-primary-light)] transition-colors anim-shimmer"
@click="openConsult()"
>
免费咨询
</button>
<NuxtLink
v-if="newsNav"
:to="newsNav.path || '/news'"
class="inline-flex items-center justify-center px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transition-colors"
>
查看动态
</NuxtLink>
</div>
</div>
<div class="hidden lg:flex justify-center" data-reveal data-reveal-delay="360">
<div class="relative w-full max-w-lg">
<div class="absolute inset-0 bg-white/10 rounded-3xl transform rotate-3" />
<div class="relative bg-white/20 backdrop-blur-sm rounded-3xl p-8 border border-white/20">
<div class="space-y-4">
<div v-for="feature in features" :key="feature" class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-[var(--t2-primary-light)]">{{ feature }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
/**
* 模板 1 - Hero 主视觉区
* 使用站点名称动态展示
*/
import type { CmsNavigation } from '~/types'
const { siteInfo, siteName, navigations, fetchSiteInfo } = useSite()
const { openConsult } = useConsult()
await fetchSiteInfo()
const heroTitle = computed(() => {
return siteName.value ? `欢迎来到 ${siteName.value}` : '专注企业数字化官网建设'
})
const heroSubtitle = computed(() => {
return siteInfo.value?.comments
|| '快速搭建品牌展示、产品发布与客户咨询一体化官网，助力企业数字化转型与业务增长。'
})
const newsNav = computed<CmsNavigation | undefined>(() => {
const navs = navigations.value || []
return navs.find((n) => n.model === 'article')
})
const features = [
'多模板一键切换',
'响应式多端适配',
'SEO/GEO 友好',
'独立域名绑定'
]
</script>
app/templates/template-02/config.ts
+18
View File
@@ -0,0 +1,18 @@
import type { TemplateConfig } from '~/composables/useTemplate'
/**
* 模板 2 配置
* 青绿商务风企业官网模板
*/
export default {
id: 'template-02',
name: '青绿商务模板',
description: '青绿商务风，适合制造、环保、能源、教育、服务类企业官网',
preview: '/templates/cloud-website/template-02.png',
supportedModules: ['home', 'about', 'products', 'cases', 'news', 'contact'],
themeConfig: {
primaryColor: '#0d9488',
secondaryColor: '#0f766e',
fontFamily: '"Noto Sans SC", "Source Han Sans SC", "思源黑体", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif'
}
} satisfies TemplateConfig
app/templates/template-02/pages/About.vue
+144
View File
@@ -0,0 +1,144 @@
<template>
<div class="bg-gray-50">
<!-- 页头：科技蓝渐变色块 -->
<section class="relative overflow-hidden bg-gradient-to-r from-blue-700 to-blue-500">
<div class="absolute -top-20 -right-16 w-72 h-72 rounded-full bg-white/10 blur-3xl" />
<div class="absolute -bottom-24 left-10 w-64 h-64 rounded-full bg-black/10 blur-3xl" />
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16 relative z-10">
<nav class="text-xs text-white/70 mb-3" aria-label="面包屑">
<NuxtLink to="/" class="hover:text-white transition-colors">首页</NuxtLink>
<span class="mx-2">/</span>
<span class="text-white">{{ pageTitle }}</span>
</nav>
<h1 class="text-3xl sm:text-4xl font-bold text-white">{{ pageTitle }}</h1>
<p v-if="subTitle" class="text-white/75 mt-3 max-w-2xl leading-relaxed line-clamp-2">
{{ subTitle }}
</p>
</div>
</section>
<!-- 正文 -->
<section class="py-12 lg:py-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto">
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
<!-- 单页配图（cms_page.image）：作为正文顶部插图 -->
<img
v-if="coverImage"
:src="coverImage"
:alt="pageTitle"
class="w-full h-56 sm:h-72 lg:h-80 object-cover"
>
<div class="p-6 sm:p-10">
<template v-if="hasContent">
<div class="flex flex-wrap items-center gap-3 mb-6 pb-6 border-b border-gray-100">
<span class="w-1.5 h-6 rounded-full bg-blue-600" />
<h2 class="text-xl sm:text-2xl font-bold text-gray-900">{{ pageTitle }}</h2>
<span v-if="updateTimeText" class="sm:ml-auto text-sm text-gray-500">
更新于 {{ updateTimeText }}
</span>
</div>
<RichText :content="pageData?.content" />
<PageAttachments
v-if="pageData?.attachments?.length"
:attachments="pageData.attachments"
/>
</template>
<!-- 空态 / 错误态 -->
<div v-else class="text-center py-16">
<svg class="w-16 h-16 mx-auto text-gray-300 mb-4" 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 class="text-gray-900 font-medium mb-2">{{ emptyState.title }}</p>
<p class="text-gray-500 text-sm leading-relaxed mb-6">{{ emptyState.desc }}</p>
<NuxtLink to="/" class="text-blue-600 hover:underline">返回首页</NuxtLink>
</div>
</div>
</div>
<!-- 底部 CTA -->
<div class="mt-10 rounded-2xl border border-blue-100 bg-blue-50 p-8 sm:p-10 text-center">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 mb-3">想进一步了解我们？</h3>
<p class="text-gray-600 mb-6">欢迎来电咨询或在线留言，我们将安排专业顾问与您对接</p>
<div class="flex flex-wrap items-center justify-center gap-4">
<NuxtLink
to="/contact"
class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors shadow-sm"
>
联系我们
</NuxtLink>
<a
v-if="siteInfo?.phone"
:href="`tel:${siteInfo.phone}`"
class="inline-flex items-center px-6 py-3 border border-blue-600 text-blue-600 font-semibold rounded-lg hover:bg-blue-100 transition-colors"
>
{{ siteInfo.phone }}
</a>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script setup lang="ts">
/**
* 模板 7 - 关于我们（科技蓝）
*
* 数据源：后台「单页管理」cms_page 表中 path=about 的记录。
* 链路：useFetch('/api/page/detail', { path: 'about' })
* → server/api/page/detail.get.ts 的 path 分支
* → 上游 /cms/cms-page/getByPath/about（带 TenantId）
*/
import dayjs from 'dayjs'
import type { PageDetail } from '~/types'
const { siteInfo, fetchSiteInfo } = useSite()
const { fileUrl } = useFileUrl()
await fetchSiteInfo()
const { data: pageData } = await useFetch<PageDetail>('/api/page/detail', {
key: 'page-about',
query: { path: 'about' }
})
const pageTitle = computed(() => pageData.value?.title?.trim() || '关于我们')
const coverImage = computed(() => fileUrl(pageData.value?.photo || ''))
const hasContent = computed(() => Boolean(pageData.value?.hasContent && pageData.value?.content))
const subTitle = computed(() => {
const desc = pageData.value?.description?.trim()
if (desc) return desc
return (siteInfo.value?.comments || '').trim()
})
const updateTimeText = computed(() => {
const t = pageData.value?.updateTime
return t ? dayjs(t).format('YYYY-MM-DD') : ''
})
const emptyState = computed(() => {
if (pageData.value?.status === 'error') {
return { title: '内容暂时无法加载', desc: '内容接口暂时不可用，请稍后再试。' }
}
return {
title: '内容尚未录入',
desc: '请前往管理后台「单页管理」补充 path 为 about 的页面正文。'
}
})
usePageSeo(
{
title: pageTitle.value,
path: '/about',
keywords: pageData.value?.keywords || undefined,
description: pageData.value?.description || undefined,
image: coverImage.value || undefined
},
siteInfo.value
)
</script>
app/templates/template-02/pages/CaseDetail.vue
+56
View File
@@ -0,0 +1,56 @@
<template>
<div class="min-h-screen py-16 bg-white">
<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-gray-500 hover:text-[var(--t2-primary)]">← 返回案例列表</NuxtLink>
</div>
<h1 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">{{ caseItem.title }}</h1>
<div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-8 pb-8 border-b border-gray-100">
<span v-if="caseItem.clientName" class="px-3 py-1 bg-[var(--t2-primary-light)] text-[var(--t2-primary)] 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-gray-100 rounded-xl 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-gray-600 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-gray-900 mb-4">案例不存在或已下架</h1>
<NuxtLink :to="`/case${caseItem?.navigationId ? '?navId=' + caseItem.navigationId : ''}`" class="text-[var(--t2-primary)] hover:underline">返回案例列表</NuxtLink>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { CaseItem } from '~/types'
/**
* 模板 1 - 案例详情页
*/
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>
app/templates/template-02/pages/CaseList.vue
+130
View File
@@ -0,0 +1,130 @@
<template>
<div class="min-h-screen py-16 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-900 mb-4">{{ pageTitle }}</h1>
<p class="text-gray-600 max-w-2xl mx-auto">展示我们的成功案例与行业经验</p>
</div>
<div v-if="pending" class="flex justify-center py-12">
<SiteLoading />
</div>
<SiteError v-else-if="error" message="获取案例列表失败" />
<div v-else class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<article
v-for="item in cases"
:key="item.id"
class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
>
<NuxtLink :to="`/case/${item.id}`" class="block">
<div class="aspect-[4/3] bg-gray-100 overflow-hidden">
<img
v-if="item.cover"
:src="fileUrl(item.cover)"
:alt="item.title"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
>
<span v-else class="flex items-center justify-center h-full text-gray-400">暂无图片</span>
</div>
<div class="p-5">
<h2 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-[var(--t2-primary)] transition-colors">
{{ item.title }}
</h2>
<p class="text-sm text-gray-600 line-clamp-2">{{ stripHtml(item.summary) }}</p>
<div v-if="item.clientName" class="mt-3 text-xs text-gray-500">
客户：{{ item.clientName }}
</div>
</div>
</NuxtLink>
</article>
</div>
<!-- 分页 -->
<div v-if="totalPages > 1" class="flex justify-center mt-12">
<nav class="flex items-center gap-2">
<button
v-for="p in totalPages"
:key="p"
class="px-4 py-2 text-sm rounded-lg transition-colors"
:class="p === currentPage ? 'bg-[var(--t2-primary)] text-white' : 'bg-white text-gray-700 hover:bg-gray-100'"
@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'
/**
* 模板 1 - 案例列表页
*/
const { fileUrl } = useFileUrl()
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 || '案例展示'
})
</script>
app/templates/template-02/pages/Contact.vue
+91
View File
@@ -0,0 +1,91 @@
<template>
<div class="min-h-screen py-16 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-900 mb-4">联系我们</h1>
<p class="text-gray-600 max-w-2xl mx-auto">
有任何问题或合作意向，欢迎随时与我们联系
</p>
</div>
<div class="grid lg:grid-cols-2 gap-10">
<!-- 联系信息 -->
<div class="bg-white rounded-xl p-8 shadow-sm">
<h2 class="text-xl font-bold text-gray-900 mb-6">联系方式</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg bg-[var(--t2-primary-light)] flex items-center justify-center flex-shrink-0">
<svg class="w-5 h-5 text-[var(--t2-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<div>
<h3 class="font-medium text-gray-900">电话咨询</h3>
<p class="text-gray-600 mt-1">{{ siteInfo?.phone || '400-000-0000' }}</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg bg-[var(--t2-primary-light)] flex items-center justify-center flex-shrink-0">
<svg class="w-5 h-5 text-[var(--t2-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<div>
<h3 class="font-medium text-gray-900">电子邮箱</h3>
<p class="text-gray-600 mt-1">{{ siteInfo?.email || 'contact@example.com' }}</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg bg-[var(--t2-primary-light)] flex items-center justify-center flex-shrink-0">
<svg class="w-5 h-5 text-[var(--t2-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div>
<h3 class="font-medium text-gray-900">公司地址</h3>
<p class="text-gray-600 mt-1">{{ siteInfo?.address || '请填写公司地址' }}</p>
</div>
</div>
</div>
</div>
<!-- 在线表单 -->
<div class="bg-white rounded-xl p-8 shadow-sm">
<h2 class="text-xl font-bold text-gray-900 mb-6">在线留言</h2>
<ContactForm
input-class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[var(--t2-primary-light)]"
submit-class="w-full px-6 py-3 bg-[var(--t2-primary)] text-white font-semibold rounded-lg hover:bg-[var(--t2-primary-dark)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
label-class="block text-sm font-medium text-gray-700 mb-1"
:accent="config.themeConfig.primaryColor"
/>
</div>
</div>
</div>
</div>
<PageAttachments
v-if="contactAttachments.length"
:attachments="contactAttachments"
class="mt-10"
/>
</div>
</template>
<script setup lang="ts">
import type { PageDetail, PageAttachment } from '~/types'
import config from '../config'
/**
* 模板 1 - 联系我们页
*/
const { siteInfo, fetchSiteInfo } = useSite()
await fetchSiteInfo()
// 联系页附件（CMS「单页管理」按 path=contact 维护）
const { data: contactPage } = await useFetch<PageDetail>('/api/page/detail', { query: { path: 'contact' } })
const contactAttachments = computed<PageAttachment[]>(() => contactPage.value?.attachments || [])
</script>
app/templates/template-02/pages/Home.vue
+138
View File
@@ -0,0 +1,138 @@
<template>
<div>
<HeroSection />
<FeatureSection />
<!-- 关于我们 -->
<AboutSection
title-color="text-gray-900"
accent-color="var(--t2-primary)"
summary-color="text-gray-600"
link-color="text-[var(--t2-primary)]"
container-class="container mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-12 items-center"
image-bg-color="bg-gray-100"
/>
<!-- 最新动态 -->
<section v-if="latestArticles.length > 0" class="py-16 lg:py-20 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4" data-reveal>最新动态</h2>
<p class="text-gray-600 max-w-2xl mx-auto" data-reveal data-reveal-delay="100">了解企业最新资讯与行业动态</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<article
v-for="(item, index) in latestArticles"
:key="item.id || item.articleId"
class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow anim-card"
data-reveal
:data-reveal-delay="index * 100"
>
<NuxtLink :to="`/article/${item.id || item.articleId}`">
<div class="aspect-video bg-gray-100 flex items-center justify-center anim-card-media">
<img
v-if="item.image || item.cover || item.photo"
:src="fileUrl(item.image || item.cover || item.photo || '')"
:alt="item.title"
class="w-full h-full object-cover"
>
<span v-else class="text-gray-400">暂无图片</span>
</div>
</NuxtLink>
<div class="p-5">
<div class="text-xs text-gray-500 mb-2">
{{ formatDate(item.publishTime || item.createTime) }}
<span v-if="item.categoryName" class="ml-2 text-[var(--t2-primary)]">{{ item.categoryName }}</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-2 hover:text-[var(--t2-primary)] transition-colors">
<NuxtLink :to="`/article/${item.id || item.articleId}`">{{ item.title }}</NuxtLink>
</h3>
<p class="text-sm text-gray-600 line-clamp-2">{{ stripHtml(item.summary) }}</p>
</div>
</article>
</div>
<div v-if="newsNav" class="text-center mt-10">
<NuxtLink
:to="newsNav.path || '/news'"
class="inline-flex items-center text-[var(--t2-primary)] font-semibold hover:text-[var(--t2-primary-dark)] transition-colors"
>
查看更多
<svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</NuxtLink>
</div>
</div>
</section>
<!-- 联系我们 -->
<section class="py-16 lg:py-20 bg-[var(--t2-primary-light)]">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4" data-reveal>
准备好开始了吗？
</h2>
<p class="text-gray-600 max-w-2xl mx-auto mb-8" data-reveal data-reveal-delay="100">
立即联系我们，获取专属企业官网解决方案
</p>
<button
type="button"
class="inline-flex items-center justify-center px-8 py-3 bg-[var(--t2-primary)] text-white font-semibold rounded-lg hover:bg-[var(--t2-primary-dark)] transition-colors anim-shimmer"
@click="openConsult()"
>
立即咨询
</button>
</div>
</section>
</div>
</template>
<script setup lang="ts">
/**
* 模板 1 - 首页
* 使用 getSiteInfo 站点信息 + cms-article/page 文章数据
*/
import dayjs from 'dayjs'
import HeroSection from '../components/HeroSection.vue'
import FeatureSection from '../components/FeatureSection.vue'
import type { CmsNavigation, Article, PageResult, ApiEnvelope } from '~/types'
const { siteInfo, siteName, navigations, fetchSiteInfo } = useSite()
const { fileUrl } = useFileUrl()
const { openConsult } = useConsult()
// 获取站点信息（含导航）
await fetchSiteInfo()
/** 从导航中找到"新闻/动态"相关的导航项 */
const newsNav = computed<CmsNavigation | undefined>(() => {
const navs = navigations.value || []
return navs.find((n) => n.model === 'article')
})
/** 获取最新文章（取新闻导航下的文章） */
const latestArticles = ref<Article[]>([])
if (newsNav.value) {
try {
const res = await $fetch<ApiEnvelope<PageResult<Article>> | PageResult<Article>>(
'/api/article/list',
{
query: {
navigationId: newsNav.value.navigationId,
page: 1,
limit: 3
}
}
)
const envelope = res as ApiEnvelope<PageResult<Article>>
latestArticles.value = envelope?.data?.list || (res as PageResult<Article>)?.list || []
} catch {
latestArticles.value = []
}
}
function formatDate(date?: string) {
if (!date) return ''
return dayjs(date).format('YYYY-MM-DD')
}
</script>
app/templates/template-02/pages/NewsDetail.vue
+63
View File
@@ -0,0 +1,63 @@
<template>
<div class="min-h-screen py-16 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div v-if="article" class="max-w-4xl mx-auto">
<div class="mb-8">
<NuxtLink :to="`/article${article?.navigationId ? '?navId=' + article.navigationId : ''}`" class="text-sm text-gray-500 hover:text-[var(--t2-primary)]">← 返回新闻列表</NuxtLink>
</div>
<h1 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
{{ article.title }}
</h1>
<div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-8 pb-8 border-b border-gray-100">
<span v-if="article.categoryName" class="px-3 py-1 bg-[var(--t2-primary-light)] text-[var(--t2-primary)] rounded-full">
{{ article.categoryName }}
</span>
<span>发布时间：{{ formatDate(article.publishTime || article.createTime) }}</span>
<span v-if="article.author">作者：{{ article.author }}</span>
</div>
<div v-if="article.image || article.cover" class="aspect-video bg-gray-100 rounded-xl overflow-hidden mb-10">
<img
:src="fileUrl(article.image || article.cover)"
:alt="article.title"
class="w-full h-full object-cover"
>
</div>
<RichText :content="article.content" />
<PageAttachments
v-if="article?.files?.length"
:attachments="article.files"
/>
</div>
<div v-else class="text-center py-20">
<h1 class="text-2xl font-bold text-gray-900 mb-4">文章不存在或已下架</h1>
<NuxtLink :to="`/article${article?.navigationId ? '?navId=' + article.navigationId : ''}`" class="text-[var(--t2-primary)] hover:underline">返回新闻列表</NuxtLink>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import type { Article } from '~/types'
/**
* 模板 1 - 新闻详情页
*/
const route = useRoute()
const id = route.params.id as string
const { fileUrl } = useFileUrl()
const { data: article } = await useFetch<Article | null>(`/api/article/detail?id=${id}`, {
key: `article-${id}`
})
function formatDate(date?: string) {
if (!date) return ''
return dayjs(date).format('YYYY-MM-DD')
}
</script>
app/templates/template-02/pages/NewsList.vue
+191
View File
@@ -0,0 +1,191 @@
<template>
<div class="min-h-screen py-16 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-900 mb-4">{{ pageTitle }}</h1>
<p class="text-gray-600 max-w-2xl mx-auto">了解企业最新动态与行业资讯</p>
</div>
<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>
<div v-if="articles.length > 0" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<article
v-for="item in articles"
:key="item.id || item.articleId"
class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
>
<NuxtLink :to="`/article/${item.id || item.articleId}`">
<div class="aspect-video bg-gray-100 flex items-center justify-center">
<img
v-if="item.image || item.cover || item.photo"
:src="fileUrl(item.image || item.cover || item.photo || '')"
:alt="item.title"
class="w-full h-full object-cover"
>
<span v-else class="text-gray-400">暂无图片</span>
</div>
</NuxtLink>
<div class="p-5">
<div class="text-xs text-gray-500 mb-2">
{{ formatDate(item.publishTime || item.createTime) }}
<span v-if="item.categoryName" class="ml-2 text-[var(--t2-primary)]">{{ item.categoryName }}</span>
</div>
<h2 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-2 hover:text-[var(--t2-primary)] transition-colors">
<NuxtLink :to="`/article/${item.id || item.articleId}`">{{ item.title }}</NuxtLink>
</h2>
<p class="text-sm text-gray-600 line-clamp-2">{{ stripHtml(item.summary) }}</p>
</div>
</article>
</div>
<!-- 空状态 -->
<div v-else class="text-center py-20">
<svg class="w-16 h-16 mx-auto text-gray-300 mb-4" 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 class="text-gray-500">暂无新闻内容</p>
</div>
<!-- 分页 -->
<div v-if="totalPages > 1" class="flex justify-center mt-12">
<nav class="flex items-center gap-2">
<button
v-for="p in totalPages"
:key="p"
class="px-4 py-2 text-sm rounded-lg transition-colors"
:class="p === currentPage
? 'bg-[var(--t2-primary)] text-white'
: 'bg-white text-gray-700 hover:bg-[var(--t2-primary-light)]'"
@click="currentPage = p"
>
{{ p }}
</button>
</nav>
</div>
</template>
</div>
</div>
</template>
<script setup lang="ts">
/**
* 模板 1 - 新闻列表页
* 从路由参数获取 navigationId，调用 /api/article/list 获取文章列表
* 支持两种入口：
* 1. /article/:navigationId → CMS 导航路径
* 2. /news → 传统路径（自动从 topNavs 中查找 model=article 的栏目）
*/
import dayjs from 'dayjs'
import type { Article, PageResult, ApiEnvelope, CmsNavigation } from '~/types'
import { collectDescendantNavIds } from '~/utils/nav-tree'
const { allNavigations, fetchSiteInfo } = useSite()
const { fileUrl } = useFileUrl()
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. 兜底：从 navigations 中查找 model=article 的导航
const navs = allNavigations.value || []
const nav = navs.find((n) => n.model === 'article' || (n.path || '').split('/').filter(Boolean)[0] === 'article')
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')
}
</script>
app/templates/template-02/pages/Page.vue
+163
View File
@@ -0,0 +1,163 @@
<template>
<div class="min-h-[60vh] flex items-center py-20 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- 顶部：栏目标题 + 自身内容 -->
<div v-if="pageTitle" class="max-w-4xl mx-auto">
<h1 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6 text-center">
{{ pageTitle }}
</h1>
<div v-if="pageData && pageData.hasContent">
<div v-if="pageData.updateTime" class="text-gray-500 text-sm text-center mb-10">
更新时间：{{ formatDate(pageData.updateTime) }}
</div>
<RichText :content="pageData.content" />
</div>
<PageAttachments
v-if="pageData?.attachments?.length"
:attachments="pageData.attachments"
/>
</div>
<!-- 子栏目聚合列表 -->
<div v-if="childCards.length" class="max-w-5xl mx-auto mt-16">
<h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">子栏目</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<NuxtLink
v-for="p in childCards"
:key="p.navigationId"
:to="`/page/${p.navigationId}`"
class="block p-6 rounded-xl border border-gray-200 hover:shadow-lg hover:border-blue-400 transition"
>
<h3 class="text-lg font-semibold text-gray-900 mb-2">{{ p.title }}</h3>
<p class="text-sm text-gray-500 leading-relaxed line-clamp-3">{{ excerpt(p.content) }}</p>
</NuxtLink>
</div>
</div>
<!-- 空状态 -->
<div v-if="!pageData?.hasContent && !childCards.length" class="text-center py-20">
<h1 class="text-2xl font-bold text-gray-900 mb-4">{{ pageTitle }}</h1>
<p class="text-gray-500 mb-2">{{ emptyState.title }}</p>
<p class="text-gray-400 text-sm mb-6 leading-relaxed">
{{ emptyState.desc }}<br />
当前导航：{{ currentNav?.title || pageTitle }}（ID：{{ navigationId }}）
</p>
<NuxtLink to="/" class="text-blue-600 hover:underline">返回首页</NuxtLink>
</div>
</div>
</div>
</template>
<script setup lang="ts">
/**
* 模板 2 - 通用 CMS 页面
* 支持两种入口：
* 1. /page/:navigationId → CMS 导航路径（优先）
* 2. /:slug → 传统路径
*
* 父栏目聚合：当当前 page 栏目拥有子栏目时，递归收集其下所有子栏目的单页，
* 以卡片列表形式聚合展示（每个子页卡片链接到 /page/{childNavId} 详情页）。
*/
import dayjs from 'dayjs'
import type { CmsNavigation, PageDetail } from '~/types'
import { collectDescendantNavIds, isParentNavigation } from '~/utils/nav-tree'
interface ChildPage {
pageId?: number
title?: string
path?: string
content?: string
navigationId?: number
image?: string | null
}
const route = useRoute()
const { allNavigations, fetchSiteInfo } = useSite()
await fetchSiteInfo()
/** 从路由获取 navigationId */
const navigationId = computed(() => {
const id = route.params.id as string
if (id) {
const num = Number(id)
if (!Number.isNaN(num)) return num
}
return undefined
})
/** 当前栏目是否为父栏目（拥有子栏目） */
const hasChildren = computed(() => isParentNavigation(navigationId.value, allNavigations.value || []))
/** 递归收集当前栏目自身 + 所有后代 navigationId */
const descendantNavIds = computed(() =>
collectDescendantNavIds(navigationId.value, allNavigations.value || [])
)
/** 从导航中查找当前页面信息（使用 allNavigations，已做标题映射） */
const currentNav = computed<CmsNavigation | undefined>(() => {
if (!navigationId.value) return undefined
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(allNavigations.value)
})
/** 获取页面内容 */
const navId = navigationId.value
const pagePath = (() => {
const num = Number(route.params.id)
return Number.isNaN(num) ? (route.params.id as string) : undefined
})()
const { data: pageData } = await useFetch<PageDetail>('/api/page/detail', {
key: `page-${navId ?? pagePath ?? 'default'}`,
query: { navigationId: navId, path: pagePath }
})
/** 父栏目聚合：取其下所有子栏目的单页（不含父栏目自身，避免与顶部内容重复） */
const childPages = ref<ChildPage[]>([])
if (hasChildren.value && descendantNavIds.value.length) {
const { data: childrenData } = await useFetch<{ list: ChildPage[]; count: number }>('/api/page/children', {
key: `page-children-${navId}`,
query: { navigationIds: descendantNavIds.value.join(',') }
})
childPages.value = childrenData.value?.list || []
}
const childCards = computed(() => childPages.value.filter(p => p.navigationId !== navId))
const pageTitle = computed(() => {
return pageData.value?.title || currentNav.value?.title || '页面'
})
/** 空内容兜底文案，按状态区分「未录入」与「接口异常」 */
const emptyState = computed(() => {
const status = pageData.value?.status
if (status === 'error') {
return { title: '内容暂时无法加载', desc: '内容接口暂时不可用，请稍后再试。' }
}
return { title: '内容尚未录入', desc: '该页面正文尚未在 CMS 管理后台配置，请前往 CMS 后台为该导航补充内容。' }
})
/** 富文本正文截取纯文本摘要 */
function excerpt(html?: string, len = 80) {
if (!html) return ''
const text = (html || '')
.replace(/<[^>]+>/g, '')
.replace(/&nbsp;/g, ' ')
.replace(/\s+/g, ' ')
.trim()
return text.length > len ? text.slice(0, len) + '…' : text
}
function formatDate(date?: string) {
if (!date) return ''
return dayjs(date).format('YYYY-MM-DD')
}
</script>
app/templates/template-02/pages/ProductDetail.vue
+64
View File
@@ -0,0 +1,64 @@
<template>
<div class="min-h-screen py-16 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div v-if="product" class="max-w-5xl mx-auto">
<div class="mb-8">
<NuxtLink :to="`/product${product?.navigationId ? '?navId=' + product.navigationId : ''}`" class="text-sm text-gray-500 hover:text-[var(--t2-primary)]">← 返回产品列表</NuxtLink>
</div>
<div class="grid lg:grid-cols-2 gap-10 mb-12">
<div class="aspect-video bg-gray-100 rounded-xl overflow-hidden">
<img
v-if="product.cover"
:src="fileUrl(product.cover)"
:alt="product.productName"
class="w-full h-full object-cover"
>
</div>
<div>
<h1 class="text-3xl font-bold text-gray-900 mb-4">{{ product.productName }}</h1>
<p v-if="product.subtitle" class="text-lg text-gray-600 mb-6">{{ product.subtitle }}</p>
<p class="text-gray-600 leading-relaxed mb-6">{{ stripHtml(product.description) }}</p>
<div v-if="product.price" class="text-2xl font-bold text-[var(--t2-primary)] mb-6">
{{ product.price }}
</div>
<button
type="button"
class="inline-flex items-center justify-center px-8 py-3 bg-[var(--t2-primary)] text-white font-semibold rounded-lg hover:bg-[var(--t2-primary-dark)] transition-colors"
@click="openConsult({ need: `咨询产品：${product.productName}`, source: 'product-detail' })"
>
立即咨询
</button>
</div>
</div>
<div class="border-t border-gray-100 pt-10">
<h2 class="text-2xl font-bold text-gray-900 mb-6">产品详情</h2>
<RichText :content="product.content" />
</div>
</div>
<div v-else class="text-center py-20">
<h1 class="text-2xl font-bold text-gray-900 mb-4">产品不存在或已下架</h1>
<NuxtLink :to="`/product${product?.navigationId ? '?navId=' + product.navigationId : ''}`" class="text-[var(--t2-primary)] hover:underline">返回产品列表</NuxtLink>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { Product } from '~/types'
/**
* 模板 1 - 产品详情页
*/
const route = useRoute()
const id = route.params.id as string
const { fileUrl } = useFileUrl()
const { openConsult } = useConsult()
const { data: product } = await useFetch<Product | null>(`/api/product/detail?id=${id}`, {
key: `product-${id}`
})
</script>
app/templates/template-02/pages/ProductList.vue
+139
View File
@@ -0,0 +1,139 @@
<template>
<div class="min-h-screen py-16 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-900 mb-4">产品中心</h1>
<p class="text-gray-600 max-w-2xl mx-auto">为企业提供全方位的数字化解决方案</p>
</div>
<div v-if="pending" class="flex justify-center py-12">
<SiteLoading />
</div>
<SiteError v-else-if="error" message="获取产品列表失败" />
<div v-else class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<article
v-for="item in products"
:key="item.id ?? item.productId"
class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
>
<div class="aspect-video bg-gray-100 flex items-center justify-center">
<img
v-if="item.cover"
:src="fileUrl(item.cover)"
:alt="item.productName"
class="w-full h-full object-cover"
>
<span v-else class="text-gray-400">暂无图片</span>
</div>
<div class="p-5">
<h2 class="text-lg font-semibold text-gray-900 mb-2 hover:text-[var(--t2-primary)] transition-colors">
<NuxtLink :to="`/product/${item.id ?? item.productId}`">{{ item.productName }}</NuxtLink>
</h2>
<p class="text-sm text-gray-600 line-clamp-2 mb-4">{{ stripHtml(item.description || item.subtitle) }}</p>
<div class="flex items-center justify-between">
<span v-if="item.price" class="text-lg font-bold text-[var(--t2-primary)]">{{ item.price }}</span>
<NuxtLink
:to="`/product/${item.id ?? item.productId}`"
class="text-sm text-[var(--t2-primary)] hover:text-[var(--t2-primary-dark)] font-medium"
>
了解详情 →
</NuxtLink>
</div>
</div>
</article>
</div>
<!-- 分页 -->
<div v-if="totalPages > 1" class="flex justify-center mt-12">
<nav class="flex items-center gap-2">
<button
v-for="p in totalPages"
:key="p"
class="px-4 py-2 text-sm rounded-lg transition-colors"
:class="p === currentPage ? 'bg-[var(--t2-primary)] text-white' : 'bg-white text-gray-700 hover:bg-gray-100'"
@click="currentPage = p"
>
{{ p }}
</button>
</nav>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { Product, PageResult, ApiEnvelope } from '~/types'
import { collectDescendantNavIds } from '~/utils/nav-tree'
/**
* 产品列表页
*/
const { fileUrl } = useFileUrl()
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
})
</script>
app/templates/template-02/pages/Renewal.vue
+80
View File
@@ -0,0 +1,80 @@
<template>
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-[var(--t2-primary)] to-[var(--t2-primary-dark)] text-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-2xl mx-auto text-center">
<div class="w-20 h-20 mx-auto mb-8 rounded-full bg-white/20 flex items-center justify-center">
<svg class="w-10 h-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h1 class="text-3xl sm:text-4xl font-bold mb-4">
网站服务已到期
</h1>
<p class="text-lg text-[var(--t2-primary-light)] mb-8">
您访问的企业官网服务已过期，请联系管理员续费以恢复正常访问。
</p>
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 sm:p-8 mb-8 text-left">
<h2 class="text-xl font-semibold mb-4">续费后可继续使用</h2>
<ul class="space-y-3 text-[var(--t2-primary-light)]">
<li class="flex items-center gap-2">
<svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
企业官网正常展示
</li>
<li class="flex items-center gap-2">
<svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
产品/案例/新闻内容展示
</li>
<li class="flex items-center gap-2">
<svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
在线留言与客户咨询
</li>
<li class="flex items-center gap-2">
<svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
独立域名访问
</li>
</ul>
</div>
<button
class="inline-flex items-center justify-center px-8 py-3 bg-white text-[var(--t2-primary)] font-semibold rounded-lg hover:bg-[var(--t2-primary-light)] transition-colors"
@click="goToRenew"
>
立即续费
</button>
<p v-if="siteInfo?.phone" class="mt-6 text-sm text-[var(--t2-primary-light)]">
如需帮助，请拨打：{{ siteInfo.phone }}
</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
/**
* 模板 1 - 续费引导页
*/
const { siteInfo, fetchSiteInfo } = useSite()
await fetchSiteInfo()
definePageMeta({
layout: 'blank'
})
function goToRenew() {
// 实际项目中应跳转 SaaS 管理后台续费页面
const appId = useRuntimeConfig().public.appId
window.open(`/api/subscription/renew?appId=${appId}`, '_blank')
}
</script>
app/templates/template-02/pages/index.vue
+58
View File
@@ -0,0 +1,58 @@
<template>
<Component :is="component" v-if="component" />
<SiteLoading v-else />
</template>
<script setup lang="ts">
/**
* 模板 1 - 通用模板页面选择器
* 根据路由动态选择对应页面组件
*/
const route = useRoute()
const component = shallowRef<Component | null>(null)
const routeMap: Record<string, () => Promise<{ default: Component }>> = {
news: () => import('./NewsList.vue'),
'news-id': () => import('./NewsDetail.vue'),
products: () => import('./ProductList.vue'),
'products-id': () => import('./ProductDetail.vue'),
cases: () => import('./CaseList.vue'),
'cases-id': () => import('./CaseDetail.vue'),
contact: () => import('./Contact.vue'),
renewal: () => import('./Renewal.vue')
}
async function resolveComponent() {
const name = route.name as string | undefined
if (name === 'index') {
const mod = await import('./Home.vue')
component.value = mod.default
return
}
if (name === 'slug') {
const mod = await import('./Page.vue')
component.value = mod.default
return
}
if (name) {
const loader = routeMap[name]
if (loader) {
const mod = await loader()
component.value = mod.default
return
}
}
component.value = null
}
if (import.meta.server) {
await resolveComponent()
}
onMounted(resolveComponent)
</script>
app/templates/template-02/theme.css
+24
View File
@@ -0,0 +1,24 @@
/* 模板 2 主题变量（青绿商务风）
通过 :root 全局定义，确保组件内 var(--t2-*) 始终有值，
不依赖 data-template-id 作用域（兼容 SSR 布局注入时机） */
:root {
--t2-primary: #0d9488;
--t2-primary-dark: #0f766e;
--t2-primary-light: #ccfbf1;
--t2-text: #1f2937;
--t2-text-secondary: #6b7280;
--t2-bg: #ffffff;
--t2-bg-gray: #f8fafc;
--t2-footer-bg: #0f172a;
}
[data-template-id="template-02"] {
--t2-primary: #0d9488;
--t2-primary-dark: #0f766e;
--t2-primary-light: #ccfbf1;
--t2-text: #1f2937;
--t2-text-secondary: #6b7280;
--t2-bg: #ffffff;
--t2-bg-gray: #f8fafc;
--t2-footer-bg: #0f172a;
}
app/templates/template-03/components/FeatureSection.vue
+49
View File
@@ -0,0 +1,49 @@
<template>
<section v-if="enabled" class="py-16 lg:py-20 bg-[#f5efe6]">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">{{ title }}</h2>
<p v-if="subtitle" class="text-gray-600 max-w-2xl mx-auto">
{{ subtitle }}
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div
v-for="(item, index) in items"
:key="item.title || index"
class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow group"
data-reveal
:data-reveal-delay="index * 100"
>
<div
class="w-12 h-12 rounded-lg bg-[#f5efe6] flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110"
>
<FeatureIcon :name="item.icon" class="w-6 h-6 text-[#8b6f47]" />
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">{{ item.title }}</h3>
<p class="text-sm text-gray-600 leading-relaxed">{{ item.desc }}</p>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
/**
* 模板 3 - 特色功能模块（暖米轻商风，后台可配置）
* 数据来自 useFeatures()，未配置时回退到下方默认值。
*/
import FeatureIcon from '~/components/FeatureIcon.vue'
import { useFeatures } from '~/composables/useFeatures'
import type { FeatureItem } from '~/types'
const defaultFeatures: FeatureItem[] = [
{ title: '企业优势', desc: '快速建立品牌信任感，展示企业实力与核心竞争力。', icon: 'building' },
{ title: '核心产品', desc: '清晰的产品展示与分类，帮助客户快速了解产品价值。', icon: 'box' },
{ title: '客户案例', desc: '真实案例呈现，增强说服力，促进客户决策。', icon: 'case' },
{ title: '在线留言', desc: '便捷的留言咨询通道，不错过任何潜在客户。', icon: 'message' }
]
const { enabled, title, subtitle, items } = useFeatures(defaultFeatures)
</script>
app/templates/template-03/components/Footer.vue
+90
View File
@@ -0,0 +1,90 @@
<template>
<footer class="bg-[#f5efe6] border-t border-[#e8e0d4] py-10">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row md:items-start md:justify-between gap-8">
<!-- 品牌 -->
<div class="max-w-xs">
<SiteBrand
link-class="mb-2"
:logo="siteLogo"
:icon="siteIcon"
:name="siteName"
logo-class="h-8 w-auto max-w-[180px] object-contain"
icon-class="h-6 w-auto object-contain"
name-class="font-bold text-[#8b6f47] text-lg"
/>
<p v-if="slogan" class="text-sm text-gray-500 mb-2">{{ slogan }}</p>
<p class="text-sm text-gray-500 leading-relaxed">{{ siteInfo?.comments || '专注企业数字化官网建设，提供品牌展示与业务增长一体化解决方案。' }}</p>
</div>
<!-- 快速链接 -->
<nav class="flex flex-col gap-2">
<div class="text-sm font-semibold text-[#8b6f47] mb-1">快速链接</div>
<NuxtLink
v-for="link in quickLinks"
:key="link.navigationId || link.path"
:to="getNavLink(link)"
:target="link.target === '_blank' ? '_blank' : undefined"
class="text-sm text-gray-600 hover:text-[#8b6f47] transition-colors"
>
{{ link.title }}
</NuxtLink>
</nav>
<!-- 联系方式 -->
<div class="flex flex-col gap-1 text-sm text-gray-600">
<div class="font-semibold text-[#8b6f47] mb-1">联系我们</div>
<span v-if="phone">电话：{{ phone }}</span>
<span v-if="email">邮箱：{{ email }}</span>
<span v-if="address">地址：{{ address }}</span>
<span v-if="officialWebsite">官网：<a :href="officialWebsiteUrl" target="_blank" rel="nofollow" class="hover:text-[#8b6f47] transition-colors">{{ officialWebsite }}</a></span>
</div>
<!-- 关注我们 -->
<div v-if="wxQrcode || socialLinks.length" class="flex flex-col gap-2">
<div class="font-semibold text-[#8b6f47] mb-1">关注我们</div>
<img v-if="wxQrcode" :src="wxQrcode" alt="微信二维码" class="w-28 h-28 object-contain border border-[#e8e0d4] rounded-lg">
<p v-if="wxQrcode" class="text-xs text-gray-400">{{ siteConfig?.wxQrcodeText || '扫码关注' }}</p>
<a
v-for="link in socialLinks"
:key="link.url"
:href="link.url"
target="_blank"
rel="nofollow"
class="text-sm text-gray-600 hover:text-[#8b6f47] transition-colors"
>{{ link.name || link.type }}</a>
</div>
</div>
<div class="mt-8 pt-6 border-t border-[#e8e0d4] flex flex-wrap items-center justify-between gap-2 text-xs text-gray-400">
<span>{{ copyright || '© ' + new Date().getFullYear() + ' ' + (siteName || '企业官网') }}</span>
<div class="flex items-center gap-3">
<span v-if="icpNo">{{ icpNo }}</span>
<span v-if="siteInfo?.policeNo">{{ siteInfo.policeNo }}</span>
<a
rel="nofollow"
href="https://site.websoft.top"
target="_blank"
class="hover:text-[#8b6f47] transition-colors"
>Powered by 云·企业官网</a>
</div>
</div>
</div>
</footer>
</template>
<script setup lang="ts">
/**
* 模板 3 - Footer 组件（暖米轻商风）
* 使用 config 与 useSite 的 bottomNavigations（top!==1 的页脚链接）渲染
*/
import type { CmsNavigation } from '~/types'
const { siteInfo, siteName, siteLogo, siteIcon, siteConfig, bottomNavigations, phone, email, address, copyright, wxQrcode, icpNo, slogan, officialWebsite, officialWebsiteUrl, socialLinks } = useSite()
/** 快速链接：取顶级导航中非首页且无子菜单的项 */
const quickLinks = computed<CmsNavigation[]>(() => {
const navs = bottomNavigations.value || []
return navs.filter((nav) => nav.model !== 'index').slice(0, 6)
})
</script>
app/templates/template-03/components/Header.vue
+147
View File
@@ -0,0 +1,147 @@
<template>
<header class="sticky top-0 z-50 bg-[#f5efe6] border-b border-[#e8e0d4]">
<div class="container mx-auto px-4 h-16 flex items-center justify-between">
<!-- Logo -->
<SiteBrand
link-class="flex-shrink-0"
:logo="siteLogo"
:icon="siteIcon"
:name="siteName"
logo-class="h-12 w-auto max-w-[200px] object-contain"
icon-class="h-8 w-auto object-contain"
name-class="font-bold text-[#8b6f47] truncate max-w-[160px] sm:max-w-xs"
/>
<!-- 搜索框（后台 setting.searchBtn 控制是否显示） -->
<SiteSearchBox v-if="showHeaderSearch" variant="light" accent="#8b6f47" class="hidden lg:flex items-center ml-8 mr-auto" />
<!-- 桌面端导航 -->
<nav class="hidden md:flex items-center gap-6 text-base">
<template v-for="item in navItems" :key="item.navigationId || item.path">
<!-- 有子菜单 -->
<div v-if="item.children && item.children.length > 0" class="relative group">
<button class="font-medium text-gray-700 hover:text-[#8b6f47] transition-colors flex items-center gap-1">
{{ item.title }}
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="absolute left-0 top-full pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all">
<div class="bg-white rounded-lg shadow-lg border border-[#e8e0d4] py-2 min-w-[160px]">
<NuxtLink
v-for="child in item.children"
:key="child.navigationId"
:to="getChildPath(child)"
class="block px-4 py-2 text-[15px] text-gray-700 hover:text-[#8b6f47] hover:bg-[#f5efe6] transition-colors whitespace-nowrap"
>
{{ child.title }}
</NuxtLink>
</div>
</div>
</div>
<!-- 无子菜单 -->
<NuxtLink
v-else
:to="getNavLink(item)"
:target="item.target === '_blank' ? '_blank' : undefined"
class="font-medium text-gray-700 hover:text-[#8b6f47] transition-colors"
active-class="text-[#8b6f47]"
>
{{ item.title }}
</NuxtLink>
</template>
</nav>
<!-- CTA -->
<div class="hidden md:block">
<NuxtLink
to="/contact"
class="inline-flex items-center justify-center px-4 py-2 bg-[#8b6f47] text-white text-base font-semibold rounded-full hover:bg-[#6f5638] transition-colors"
>
在线咨询
</NuxtLink>
</div>
<!-- 移动端菜单按钮 -->
<button
class="md:hidden p-2 rounded-lg hover:bg-[#e8e0d4]"
@click="mobileMenuOpen = !mobileMenuOpen"
>
<svg v-if="!mobileMenuOpen" class="w-6 h-6 text-[#8b6f47]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg v-else class="w-6 h-6 text-[#8b6f47]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- 移动端菜单 -->
<div
v-if="mobileMenuOpen"
class="md:hidden bg-[#f5efe6] border-t border-[#e8e0d4]"
>
<div class="container mx-auto px-4 py-4 space-y-1">
<template v-for="item in navItems" :key="item.navigationId || item.path">
<!-- 有子菜单 -->
<div v-if="item.children && item.children.length > 0">
<div class="px-4 py-3 text-base font-semibold text-[#8b6f47]">
{{ item.title }}
</div>
<NuxtLink
v-for="child in item.children"
:key="child.navigationId"
:to="getChildPath(child)"
class="block px-8 py-2 text-sm text-gray-600 hover:text-[#8b6f47] hover:bg-[#e8e0d4] rounded-lg transition-colors"
@click="mobileMenuOpen = false"
>
{{ child.title }}
</NuxtLink>
</div>
<!-- 无子菜单 -->
<NuxtLink
v-else
:to="getNavLink(item)"
:target="item.target === '_blank' ? '_blank' : undefined"
class="block px-4 py-3 text-base font-medium text-gray-700 hover:text-[#8b6f47] hover:bg-[#e8e0d4] rounded-lg transition-colors"
active-class="text-[#8b6f47] bg-[#e8e0d4]"
@click="mobileMenuOpen = false"
>
{{ item.title }}
</NuxtLink>
</template>
<NuxtLink
to="/contact"
class="block mx-10 px-4 py-3 mt-2 text-center bg-[#8b6f47] text-white font-semibold rounded-lg hover:bg-[#6f5638] transition-colors"
@click="mobileMenuOpen = false"
>
在线咨询
</NuxtLink>
</div>
</div>
</header>
</template>
<script setup lang="ts">
/**
* 模板 3 - Header 组件（暖米轻商风）
* 使用 useSite 的 navigations（合并 topNavs + bottomNavs，过滤 top===1）渲染导航菜单
*/
import type { CmsNavigation } from '~/types'
const { siteInfo, siteName, siteLogo, siteIcon, navigations, showHeaderSearch, fetchSiteInfo } = useSite()
const mobileMenuOpen = ref(false)
/** 子导航链接统一走 app/utils 的 getNavLink（自动避免 /page/4598?navId=4598 冗余拼接） */
function getChildPath(child: CmsNavigation): string {
return getNavLink(child)
}
// 获取站点信息（含导航数据）
await fetchSiteInfo()
/** 导航项（从 useSite 的 navigations 获取，已合并 topNavs + bottomNavs 并过滤 top===1） */
const navItems = computed<CmsNavigation[]>(() => {
return navigations.value || []
})
</script>
app/templates/template-03/components/HeroSection.vue
+95
View File
@@ -0,0 +1,95 @@
<template>
<section class="relative py-20 lg:py-28 bg-gradient-to-br from-[#8b6f47] to-[#6f5638] text-white overflow-hidden">
<!-- 漂浮装饰 -->
<div class="absolute w-72 h-72 bg-white/10 -top-16 -left-10 rounded-full blur-3xl" />
<div class="absolute w-80 h-80 bg-[#d4b896]/20 -bottom-24 right-0 rounded-full blur-3xl" />
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="max-w-2xl">
<h1
class="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight mb-6"
data-reveal
>
{{ heroTitle }}
</h1>
<p
class="text-base sm:text-lg text-[#e8dcc8] mb-8 leading-relaxed"
data-reveal
data-reveal-delay="120"
>
{{ heroSubtitle }}
</p>
<div class="flex flex-wrap gap-4" data-reveal data-reveal-delay="240">
<button
type="button"
class="inline-flex items-center justify-center px-6 py-3 bg-white text-[#8b6f47] font-semibold rounded-lg hover:bg-[#fff8ed] transition-colors"
@click="openConsult()"
>
免费咨询
</button>
<NuxtLink
v-if="newsNav"
:to="newsNav.path || '/article'"
class="inline-flex items-center justify-center px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transition-colors"
>
查看动态
</NuxtLink>
</div>
</div>
<div class="hidden lg:flex justify-center" data-reveal data-reveal-delay="360">
<div class="relative w-full max-w-lg">
<div class="absolute inset-0 bg-white/10 rounded-3xl transform rotate-3" />
<div class="relative bg-white/15 backdrop-blur-sm rounded-3xl p-8 border border-white/20">
<div class="space-y-4">
<div v-for="feature in features" :key="feature" class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-[#e8dcc8]">{{ feature }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
/**
* 模板 3 - Hero 主视觉区（暖米轻商风）
* 使用站点名称动态展示
*/
import type { CmsNavigation } from '~/types'
const { siteInfo, siteName, navigations, fetchSiteInfo } = useSite()
const { openConsult } = useConsult()
await fetchSiteInfo()
const heroTitle = computed(() => {
return siteName.value ? `欢迎来到 ${siteName.value}` : '专注企业数字化官网建设'
})
const heroSubtitle = computed(() => {
return siteInfo.value?.comments
|| '快速搭建品牌展示、产品发布与客户咨询一体化官网，助力企业数字化转型与业务增长。'
})
const newsNav = computed<CmsNavigation | undefined>(() => {
const navs = navigations.value || []
return navs.find((n) => n.model === 'article')
})
const features = [
'多模板一键切换',
'响应式多端适配',
'SEO 友好',
'独立域名绑定'
]
</script>
app/templates/template-03/config.ts
+18
View File
@@ -0,0 +1,18 @@
import type { TemplateConfig } from '~/composables/useTemplate'
/**
* 模板 3 配置
* 暖色生活/家居风格
*/
export default {
id: 'template-03',
name: '暖色生活模板',
description: '暖色调生活风格，适合家居、文创、生活方式类企业',
preview: '/templates/cloud-website/template-03.png',
supportedModules: ['home', 'products', 'cases', 'news', 'contact'],
themeConfig: {
primaryColor: '#c8a470',
secondaryColor: '#e8d5b5',
fontFamily: '"Noto Sans SC", "Source Han Sans SC", "思源黑体", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif'
}
} satisfies TemplateConfig
app/templates/template-03/pages/About.vue
+144
View File
@@ -0,0 +1,144 @@
<template>
<div class="bg-gray-50">
<!-- 页头：科技蓝渐变色块 -->
<section class="relative overflow-hidden bg-gradient-to-r from-blue-700 to-blue-500">
<div class="absolute -top-20 -right-16 w-72 h-72 rounded-full bg-white/10 blur-3xl" />
<div class="absolute -bottom-24 left-10 w-64 h-64 rounded-full bg-black/10 blur-3xl" />
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16 relative z-10">
<nav class="text-xs text-white/70 mb-3" aria-label="面包屑">
<NuxtLink to="/" class="hover:text-white transition-colors">首页</NuxtLink>
<span class="mx-2">/</span>
<span class="text-white">{{ pageTitle }}</span>
</nav>
<h1 class="text-3xl sm:text-4xl font-bold text-white">{{ pageTitle }}</h1>
<p v-if="subTitle" class="text-white/75 mt-3 max-w-2xl leading-relaxed line-clamp-2">
{{ subTitle }}
</p>
</div>
</section>
<!-- 正文 -->
<section class="py-12 lg:py-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto">
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
<!-- 单页配图（cms_page.image）：作为正文顶部插图 -->
<img
v-if="coverImage"
:src="coverImage"
:alt="pageTitle"
class="w-full h-56 sm:h-72 lg:h-80 object-cover"
>
<div class="p-6 sm:p-10">
<template v-if="hasContent">
<div class="flex flex-wrap items-center gap-3 mb-6 pb-6 border-b border-gray-100">
<span class="w-1.5 h-6 rounded-full bg-blue-600" />
<h2 class="text-xl sm:text-2xl font-bold text-gray-900">{{ pageTitle }}</h2>
<span v-if="updateTimeText" class="sm:ml-auto text-sm text-gray-500">
更新于 {{ updateTimeText }}
</span>
</div>
<RichText :content="pageData?.content" />
<PageAttachments
v-if="pageData?.attachments?.length"
:attachments="pageData.attachments"
/>
</template>
<!-- 空态 / 错误态 -->
<div v-else class="text-center py-16">
<svg class="w-16 h-16 mx-auto text-gray-300 mb-4" 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 class="text-gray-900 font-medium mb-2">{{ emptyState.title }}</p>
<p class="text-gray-500 text-sm leading-relaxed mb-6">{{ emptyState.desc }}</p>
<NuxtLink to="/" class="text-blue-600 hover:underline">返回首页</NuxtLink>
</div>
</div>
</div>
<!-- 底部 CTA -->
<div class="mt-10 rounded-2xl border border-blue-100 bg-blue-50 p-8 sm:p-10 text-center">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 mb-3">想进一步了解我们？</h3>
<p class="text-gray-600 mb-6">欢迎来电咨询或在线留言，我们将安排专业顾问与您对接</p>
<div class="flex flex-wrap items-center justify-center gap-4">
<NuxtLink
to="/contact"
class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors shadow-sm"
>
联系我们
</NuxtLink>
<a
v-if="siteInfo?.phone"
:href="`tel:${siteInfo.phone}`"
class="inline-flex items-center px-6 py-3 border border-blue-600 text-blue-600 font-semibold rounded-lg hover:bg-blue-100 transition-colors"
>
{{ siteInfo.phone }}
</a>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script setup lang="ts">
/**
* 模板 7 - 关于我们（科技蓝）
*
* 数据源：后台「单页管理」cms_page 表中 path=about 的记录。
* 链路：useFetch('/api/page/detail', { path: 'about' })
* → server/api/page/detail.get.ts 的 path 分支
* → 上游 /cms/cms-page/getByPath/about（带 TenantId）
*/
import dayjs from 'dayjs'
import type { PageDetail } from '~/types'
const { siteInfo, fetchSiteInfo } = useSite()
const { fileUrl } = useFileUrl()
await fetchSiteInfo()
const { data: pageData } = await useFetch<PageDetail>('/api/page/detail', {
key: 'page-about',
query: { path: 'about' }
})
const pageTitle = computed(() => pageData.value?.title?.trim() || '关于我们')
const coverImage = computed(() => fileUrl(pageData.value?.photo || ''))
const hasContent = computed(() => Boolean(pageData.value?.hasContent && pageData.value?.content))
const subTitle = computed(() => {
const desc = pageData.value?.description?.trim()
if (desc) return desc
return (siteInfo.value?.comments || '').trim()
})
const updateTimeText = computed(() => {
const t = pageData.value?.updateTime
return t ? dayjs(t).format('YYYY-MM-DD') : ''
})
const emptyState = computed(() => {
if (pageData.value?.status === 'error') {
return { title: '内容暂时无法加载', desc: '内容接口暂时不可用，请稍后再试。' }
}
return {
title: '内容尚未录入',
desc: '请前往管理后台「单页管理」补充 path 为 about 的页面正文。'
}
})
usePageSeo(
{
title: pageTitle.value,
path: '/about',
keywords: pageData.value?.keywords || undefined,
description: pageData.value?.description || undefined,
image: coverImage.value || undefined
},
siteInfo.value
)
</script>
app/templates/template-03/pages/CaseDetail.vue
+56
View File
@@ -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>
app/templates/template-03/pages/CaseList.vue
+139
View File
@@ -0,0 +1,139 @@
<template>
<div class="min-h-screen py-16 bg-[#faf6ef]">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<span class="inline-block px-3 py-1 rounded-full bg-[#f0e6d8] text-[#8b6f47] text-sm font-semibold mb-4">{{ pageTitle }}</span>
<h1 class="text-3xl font-bold text-[#4a3f35] mb-4">{{ pageTitle }}</h1>
<p class="text-[#8a7d6b] max-w-2xl mx-auto">展示我们的成功案例与行业经验</p>
</div>
<div v-if="pending" class="flex justify-center py-12">
<SiteLoading />
</div>
<SiteError v-else-if="error" message="获取案例列表失败" />
<div v-else class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<article
v-for="item in cases"
:key="item.id"
class="group bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-[#e8e0d4]"
>
<NuxtLink :to="`/case/${item.id}`" class="block">
<div class="aspect-[4/3] bg-[#f3ebde] overflow-hidden">
<img
v-if="item.cover"
:src="fileUrl(item.cover)"
:alt="item.title"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
>
<span v-else class="flex items-center justify-center h-full text-[#b9a892]">暂无图片</span>
</div>
<div class="p-5">
<h2 class="text-lg font-semibold text-[#4a3f35] mb-2 group-hover:text-[#8b6f47] transition-colors">
{{ item.title }}
</h2>
<p class="text-sm text-[#8a7d6b] line-clamp-2">{{ stripHtml(item.summary) }}</p>
<div v-if="item.clientName" class="mt-3 text-xs text-[#8a7d6b]">
客户：{{ item.clientName }}
</div>
</div>
</NuxtLink>
</article>
</div>
<!-- 空状态 -->
<div v-if="!pending && !error && cases.length === 0" class="text-center py-20">
<svg class="w-16 h-16 mx-auto text-[#e2d6c4] mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
<p class="text-[#8a7d6b]">暂无案例内容</p>
</div>
<!-- 分页 -->
<div v-if="totalPages > 1" class="flex justify-center mt-12">
<nav class="flex items-center gap-2">
<button
v-for="p in totalPages"
:key="p"
class="px-4 py-2 text-sm rounded-lg transition-colors"
:class="p === currentPage ? 'bg-[#8b6f47] text-white' : 'bg-white text-[#4a3f35] hover:bg-[#f0e6d8]'"
@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'
/**
* 模板 3 - 案例列表页（暖米轻商风）
*/
const { fileUrl } = useFileUrl()
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 || '案例展示'
})
</script>

Some files were not shown because too many files have changed in this diff Show More