wx/hulai-website
1
0
派生 0
代码 工单 合并请求 工作流 软件包 项目 发布 百科 活动

feat: 后台管理系统完整重构 + 前后台数据联通

浏览代码 
- 后台全面引入 Naive UI 组件库，统一 UI 规范
- 前台 usePublicApi 切换到 API 调用（GET /api/content/[key]）
- 前后台数据源统一（site_content 表）
- 产品线统一管理（tour/camp/course 三套编辑器）
- 产品数据归一化（itinerary/faq/pricing 格式统一）
- 表单提交 API 改写入 submissions 表
- 新增 submissions 标记已读 API
- site-content PUT 支持 upsert
- 修复前台 bug（stories 路由冲突、占位符警告、selector breadcrumb）
- 消除 PageHero 类型警告（useSEO reactive 修复）
- 25 个前台页面全部 HTTP 200，展示效果不变

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
这个提交包含在：
Mimingguang
2026-03-24 17:48:02 +08:00
共同撰写人 Claude Opus 4.6
当前提交 ee078b61bc
共修改 444 个文件，包含 59890 行新增和 0 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
pages/stories/[id].vue
+519
查看文件
@@ -0,0 +1,519 @@
<template>
<div v-if="story" class="page-story-detail">
<LayoutPageHero
:title="story.title"
:subtitle="story.subtitle"
:breadcrumbs="[{ text: '客户故事', to: '/stories' }, { text: story.familyType }]"
/>
<section class="section">
<div class="container">
<div class="story-layout">
<!-- 主内容 -->
<main class="story-main">
<!-- 故事元信息 -->
<div class="story-meta">
<span class="story-meta__family">{{ story.familyType }}</span>
<span class="story-meta__children">孩子 {{ story.childrenAge }}</span>
<span v-if="story.fromCity !== '⚠️待填'" class="story-meta__city">来自 {{ story.fromCity }}</span>
<span class="story-meta__date">{{ story.travelDate }}</span>
<span class="story-meta__product">{{ story.tripProduct }}</span>
</div>
<!-- 配图建议 -->
<div class="story-image-placeholder">
<div class="story-image-placeholder__inner">
<span class="story-image-placeholder__icon">📷</span>
<p class="story-image-placeholder__hint">{{ story.imageHints }}</p>
</div>
</div>
<!-- 故事摘要 -->
<div class="story-summary">
<p>{{ story.summary }}</p>
</div>
<!-- 故事章节 -->
<div class="story-sections">
<div
v-for="(section, index) in story.sections"
:key="index"
class="story-section"
>
<h2 class="story-section__heading">{{ section.heading }}</h2>
<p class="story-section__content">{{ section.content }}</p>
</div>
</div>
<!-- 印象深刻的瞬间 -->
<div class="story-moments">
<h2 class="story-moments__title">印象深刻的瞬间</h2>
<div class="story-moments__list">
<div
v-for="(moment, index) in story.keyMoments"
:key="index"
class="moment-item"
>
<span class="moment-item__icon">✨</span>
<p class="moment-item__text">{{ moment }}</p>
</div>
</div>
</div>
<!-- 标签 -->
<div class="story-tags">
<span class="story-tags__label">标签：</span>
<span v-for="tag in story.tags" :key="tag" class="story-tag">{{ tag }}</span>
</div>
<!-- 前后导航 -->
<div class="story-nav">
<NuxtLink
v-if="prevStory"
:to="`/stories/${prevStory.id}`"
class="story-nav__item story-nav__item--prev"
>
<span class="story-nav__label">上一个故事</span>
<span class="story-nav__title">{{ prevStory.title }}</span>
</NuxtLink>
<NuxtLink
v-if="nextStory"
:to="`/stories/${nextStory.id}`"
class="story-nav__item story-nav__item--next"
>
<span class="story-nav__label">下一个故事</span>
<span class="story-nav__title">{{ nextStory.title }}</span>
</NuxtLink>
</div>
</main>
<!-- 侧边栏 -->
<aside class="story-sidebar">
<!-- 咨询 CTA -->
<div class="sidebar-card sidebar-card--cta">
<h3 class="sidebar-card__title">想要一段类似的旅行？</h3>
<p class="sidebar-card__desc">联系呼籁定制师，一对一规划专属家庭行程。</p>
<CommonInternalLink to="/contact" text="免费咨询定制师" />
</div>
<!-- 所有故事 -->
<div class="sidebar-card">
<h3 class="sidebar-card__title">更多家庭故事</h3>
<ul class="sidebar-stories">
<li
v-for="s in allStories"
:key="s.id"
class="sidebar-story"
:class="{ 'sidebar-story--active': s.id === story.id }"
>
<NuxtLink :to="`/stories/${s.id}`" class="sidebar-story__link">
<span class="sidebar-story__family">{{ s.familyType }}</span>
<span class="sidebar-story__title">{{ s.title }}</span>
</NuxtLink>
</li>
</ul>
</div>
<!-- 快速链接 -->
<div class="sidebar-card">
<h3 class="sidebar-card__title">相关内容</h3>
<div class="sidebar-links">
<CommonInternalLink to="/reviews" text="查看更多客户评价" />
<CommonInternalLink to="/products" text="旅行产品详情" />
<CommonInternalLink to="/faq" text="常见问答" />
<CommonInternalLink to="/qualifications" text="资质与保障" />
</div>
</div>
</aside>
</div>
</div>
</section>
</div>
<!-- 404 -->
<div v-else class="page-not-found">
<div class="container">
<h1>故事不存在</h1>
<NuxtLink to="/stories">返回客户故事列表</NuxtLink>
</div>
</div>
</template>
<script setup>
import { useBreadcrumbSchema, useCustomerStorySchema } from '~/composables/useJsonLd'
const { data: storiesData } = await usePublicApi('stories')
const route = useRoute()
const allStories = computed(() => storiesData.value?.stories || [])
const story = computed(() => allStories.value.find(s => s.id === route.params.id))
if (!story.value) {
throw createError({ statusCode: 404, statusMessage: '故事不存在' })
}
// SEO
useHead({
title: story.value.seo.title,
meta: [
{ name: 'description', content: story.value.seo.description },
{ name: 'keywords', content: story.value.seo.keywords },
{ name: 'author', content: story.value.authorName },
{ name: 'article:published_time', content: story.value.travelDate + '-01T00:00:00+08:00' },
{ name: 'geo.region', content: 'CN-NM' },
{ name: 'geo.placename', content: '呼伦贝尔' },
{ property: 'og:title', content: story.value.seo.title },
{ property: 'og:description', content: story.value.seo.description },
{ property: 'og:type', content: 'article' },
{ property: 'og:url', content: `https://1814.love/stories/${story.value.id}` },
{ property: 'og:site_name', content: '呼籁旅行' },
{ property: 'og:locale', content: 'zh_CN' },
],
link: [
{ rel: 'canonical', href: `https://1814.love/stories/${story.value.id}` },
],
})
useBreadcrumbSchema([
{ text: '首页', to: '/' },
{ text: '客户故事', to: '/stories' },
{ text: story.value.familyType },
{ text: story.value.title },
])
useCustomerStorySchema(story.value)
// 上下篇
const currentIndex = computed(() => allStories.value.findIndex(s => s.id === story.value?.id))
const prevStory = computed(() => currentIndex.value > 0 ? allStories.value[currentIndex.value - 1] : null)
const nextStory = computed(() => currentIndex.value < allStories.value.length - 1 ? allStories.value[currentIndex.value + 1] : null)
</script>
<style lang="less" scoped>
.story-layout {
display: grid;
grid-template-columns: 1fr;
gap: @space-2xl;
.respond-lg({
grid-template-columns: 1fr 300px;
align-items: start;
});
}
.story-main {
min-width: 0;
}
// 元信息
.story-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: @space-sm;
margin-bottom: @space-lg;
font-size: @font-size-sm;
}
.story-meta__family {
padding: 3px @space-sm;
background: @color-primary;
color: #fff;
border-radius: @border-radius-sm;
font-size: @font-size-xs;
font-weight: @font-weight-medium;
}
.story-meta__children,
.story-meta__city,
.story-meta__date {
color: @color-text-muted;
}
.story-meta__product {
color: @color-primary;
font-weight: @font-weight-medium;
font-size: @font-size-xs;
padding: 2px @space-sm;
background: @color-primary-bg;
border-radius: @border-radius-full;
}
// 配图占位
.story-image-placeholder {
margin-bottom: @space-xl;
border-radius: @border-radius-lg;
overflow: hidden;
aspect-ratio: 16 / 7;
background: @color-primary-bg;
border: 2px dashed @color-primary-lighter;
&__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: @space-xl;
gap: @space-md;
}
&__icon {
font-size: 36px;
}
&__hint {
font-size: @font-size-sm;
color: @color-text-muted;
text-align: center;
line-height: @line-height-base;
margin: 0;
}
}
// 摘要
.story-summary {
padding: @space-lg;
background: @color-primary-bg;
border-left: 4px solid @color-primary;
border-radius: 0 @border-radius-md @border-radius-md 0;
margin-bottom: @space-xl;
p {
margin: 0;
font-size: @font-size-md;
color: @color-text-secondary;
line-height: @line-height-base;
}
}
// 故事章节
.story-sections {
display: flex;
flex-direction: column;
gap: @space-xl;
margin-bottom: @space-2xl;
}
.story-section {
&__heading {
font-size: @font-size-xl;
font-weight: @font-weight-bold;
color: @color-text-primary;
margin: 0 0 @space-md;
padding-bottom: @space-sm;
border-bottom: 2px solid @color-primary-bg;
}
&__content {
font-size: @font-size-base;
color: @color-text-secondary;
line-height: @line-height-base;
margin: 0;
}
}
// 印象瞬间
.story-moments {
background: @color-bg-gray;
border-radius: @border-radius-lg;
padding: @space-xl;
margin-bottom: @space-2xl;
&__title {
font-size: @font-size-lg;
font-weight: @font-weight-bold;
color: @color-text-primary;
margin: 0 0 @space-lg;
}
&__list {
display: flex;
flex-direction: column;
gap: @space-md;
}
}
.moment-item {
display: flex;
gap: @space-md;
align-items: flex-start;
&__icon {
font-size: 18px;
flex-shrink: 0;
padding-top: 2px;
}
&__text {
font-size: @font-size-sm;
color: @color-text-secondary;
line-height: @line-height-base;
margin: 0;
}
}
// 标签
.story-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: @space-sm;
margin-top: @space-2xl;
padding-top: @space-lg;
border-top: 1px solid @color-border;
margin-bottom: @space-xl;
}
.story-tags__label {
font-size: @font-size-sm;
color: @color-text-muted;
}
.story-tag {
padding: 3px @space-sm;
background: @color-primary-bg;
color: @color-primary;
border-radius: @border-radius-sm;
font-size: @font-size-xs;
}
// 前后导航
.story-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: @space-md;
padding-top: @space-lg;
border-top: 1px solid @color-border;
&__item {
padding: @space-md;
background: @color-bg-white;
border: 1px solid @color-border;
border-radius: @border-radius-md;
text-decoration: none;
transition: all @transition-base;
display: flex;
flex-direction: column;
gap: @space-xs;
&:hover {
border-color: @color-primary;
background: @color-primary-bg;
}
&--next {
text-align: right;
}
}
&__label {
font-size: @font-size-xs;
color: @color-text-muted;
}
&__title {
font-size: @font-size-sm;
color: @color-text-primary;
line-height: @line-height-tight;
.text-clamp(2);
}
}
// 侧边栏
.story-sidebar {
display: flex;
flex-direction: column;
gap: @space-lg;
position: sticky;
top: 90px;
}
.sidebar-card {
background: @color-bg-white;
border: 1px solid @color-border;
border-radius: @border-radius-lg;
padding: @space-lg;
&--cta {
background: @color-primary-bg;
border-color: @color-primary-lighter;
}
&__title {
font-size: @font-size-base;
font-weight: @font-weight-bold;
color: @color-text-primary;
margin: 0 0 @space-sm;
}
&__desc {
font-size: @font-size-sm;
color: @color-text-secondary;
line-height: @line-height-base;
margin: 0 0 @space-md;
}
}
.sidebar-stories {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-story {
&--active .sidebar-story__link {
background: @color-primary-bg;
color: @color-primary;
}
&__link {
display: flex;
flex-direction: column;
gap: 2px;
padding: @space-sm;
border-radius: @border-radius-sm;
text-decoration: none;
transition: background @transition-fast;
&:hover {
background: @color-primary-bg;
}
}
&__family {
font-size: @font-size-xs;
color: @color-primary;
}
&__title {
font-size: @font-size-sm;
color: @color-text-secondary;
line-height: @line-height-tight;
.text-clamp(2);
}
}
.sidebar-links {
display: flex;
flex-direction: column;
gap: @space-sm;
}
// 404
.page-not-found {
text-align: center;
padding: @space-3xl 0;
h1 {
margin-bottom: @space-lg;
}
a {
color: @color-primary;
}
}
</style>
pages/stories/index.vue
+294
查看文件
@@ -0,0 +1,294 @@
<template>
<div class="page-stories">
<LayoutPageHero
:title="seo.h1"
subtitle="来自小红书的真实旅行分享"
:breadcrumbs="[{ text: '客户故事' }]"
background-image="/images/summer-camp/birch-group.jpg"
/>
<!-- TL;DR：告诉 AI/搜索引擎这个页面回答了什么 -->
<section class="page-tldr" aria-label="客户故事摘要">
<div class="container">
<div class="page-tldr-inner">
<p>呼籁旅行客户故事：真实家庭旅行记录，包括四口之家的草原初体验、三代同游、带幼儿出行、女友结伴公路旅行等。非好评墙，是有具体细节的旅途记录，帮助准备出行的家庭建立真实预期。</p>
</div>
</div>
</section>
<!-- 瀑布流卡片墙 -->
<section class="section section-stories">
<div class="container">
<div v-if="readyStories.length > 0" class="stories-wall">
<component
:is="getCardComponent(story)"
v-for="story in readyStories"
:key="story.id"
v-bind="getCardProps(story)"
class="story-card reveal"
>
<div class="story-card__visual">
<img
v-if="story.coverImage"
:src="story.coverImage"
:alt="story.title"
class="story-card__img"
loading="lazy"
/>
<div v-else class="story-card__img-placeholder" />
<!-- 小红书外链角标 -->
<span v-if="story.sourceUrl" class="story-card__badge">
<svg class="story-card__badge-icon" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
<path d="M7.5 2h9a1.5 1.5 0 011.5 1.5v17a1.5 1.5 0 01-2.3 1.27L12 19l-3.7 2.77A1.5 1.5 0 016 20.5v-17A1.5 1.5 0 017.5 2z"/>
</svg>
小红书
</span>
<!-- 原创故事标记 -->
<span v-else-if="story.content" class="story-card__badge story-card__badge--original">
原创故事
</span>
<!-- 家庭类型 -->
<span class="story-card__family">{{ story.familyType }}</span>
</div>
<div class="story-card__body">
<h2 class="story-card__title">{{ story.title }}</h2>
<p class="story-card__desc">{{ story.subtitle || story.summary }}</p>
<div class="story-card__meta">
<span v-if="story.author" class="story-card__author">
{{ story.author }}
</span>
<span class="story-card__date">{{ story.travelDate }}</span>
</div>
<div class="story-card__tags">
<span v-for="tag in (story.tags || []).slice(0, 3)" :key="tag" class="story-tag">#{{ tag }}</span>
</div>
</div>
</component>
</div>
<div v-else class="stories-coming-soon reveal">
<p class="stories-coming-soon__text">更多真实旅行故事整理中，敬请期待。</p>
</div>
</div>
</section>
<!-- 内链 -->
<CommonSectionCTA
title="这些故事，可能也会是你的故事"
description="联系定制师，开始规划您的呼伦贝尔家庭旅行"
:links="[
{ to: '/contact', text: '联系定制师规划行程' },
{ to: '/reviews', text: '查看更多客户评价' },
]"
/>
</div>
</template>
<script setup>
import { resolveComponent } from 'vue'
import { useOrganizationSchema, useBreadcrumbSchema, useStoriesListSchema } from '~/composables/useJsonLd'
const { data: storiesData } = await usePublicApi('stories')
const { data: brand } = await usePublicApi('brand')
const { data: contact } = await usePublicApi('contact')
const seo = useSEO('stories')
useScrollReveal()
useOrganizationSchema(brand.value, contact.value)
useStoriesListSchema(storiesData.value?.stories)
useBreadcrumbSchema([
{ text: '首页', to: '/' },
{ text: '客户故事' },
])
const stories = computed(() => storiesData.value?.stories || [])
const readyStories = computed(() =>
stories.value.filter(s => s.summary && !s.summary.includes('⚠️'))
)
// 占位内容未替换时，阻止搜索引擎索引空页面
if (readyStories.value.length === 0) {
useHead({ meta: [{ key: 'robots', name: 'robots', content: 'noindex, nofollow' }] })
}
// 原创故事用 NuxtLink，xhs 故事用 <a> 外链
function getCardComponent(story) {
return story.sourceUrl ? 'a' : resolveComponent('NuxtLink')
}
function getCardProps(story) {
if (story.sourceUrl) {
return {
href: story.sourceUrl,
target: '_blank',
rel: 'noopener nofollow',
}
}
return { to: `/stories/${story.id}` }
}
</script>
<style lang="less" scoped>
.section-stories {
background: @color-bg-gray;
padding-bottom: @space-3xl;
}
// 瀑布流网格
.stories-wall {
column-count: 2;
column-gap: @space-md;
.respond-md({
column-count: 3;
});
.respond-xl({
column-count: 4;
column-gap: @space-lg;
});
}
// 卡片
.story-card {
display: inline-block;
width: 100%;
break-inside: avoid;
margin-bottom: @space-md;
background: @color-bg-white;
border-radius: @border-radius-lg;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: all @transition-base;
border: 1px solid transparent;
.respond-xl({
margin-bottom: @space-lg;
});
&:hover {
transform: translateY(-3px);
box-shadow: @shadow-md;
border-color: @color-primary-light;
}
&__visual {
position: relative;
overflow: hidden;
}
&__img {
width: 100%;
display: block;
object-fit: cover;
// 不固定高度，让图片保持原始比例实现瀑布流效果
}
&__img-placeholder {
width: 100%;
height: 200px;
background: @color-primary-bg;
}
// 角标（小红书/原创）
&__badge {
position: absolute;
top: @space-sm;
right: @space-sm;
background: rgba(255, 46, 46, 0.9);
color: #fff;
font-size: 11px;
padding: 2px @space-sm;
border-radius: @border-radius-full;
display: flex;
align-items: center;
gap: 3px;
font-weight: @font-weight-medium;
backdrop-filter: blur(4px);
&--original {
background: rgba(45, 106, 79, 0.9);
}
}
&__badge-icon {
flex-shrink: 0;
}
// 家庭类型
&__family {
position: absolute;
bottom: @space-sm;
left: @space-sm;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: @font-size-xs;
padding: 2px @space-sm;
border-radius: @border-radius-full;
backdrop-filter: blur(4px);
}
&__body {
padding: @space-md;
display: flex;
flex-direction: column;
gap: @space-xs;
}
&__title {
font-size: @font-size-base;
font-weight: @font-weight-bold;
color: @color-text-primary;
margin: 0;
line-height: @line-height-tight;
.text-clamp(2);
}
&__desc {
font-size: @font-size-sm;
color: @color-text-secondary;
margin: 0;
line-height: @line-height-base;
.text-clamp(2);
}
&__meta {
display: flex;
align-items: center;
gap: @space-sm;
font-size: @font-size-xs;
color: @color-text-muted;
}
&__author {
font-weight: @font-weight-medium;
color: @color-text-secondary;
}
&__tags {
display: flex;
flex-wrap: wrap;
gap: @space-xs;
margin-top: @space-xs;
}
}
.story-tag {
font-size: 11px;
color: @color-primary;
background: @color-primary-bg;
padding: 1px @space-sm;
border-radius: @border-radius-full;
}
.stories-coming-soon {
text-align: center;
padding: @space-3xl 0;
&__text {
font-size: @font-size-lg;
color: @color-text-secondary;
}
}
</style>