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
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<article class="autumn-card" :class="{ 'autumn-card--popular': isPopular }">
|
||||
<!-- 头部 -->
|
||||
<div class="card-header">
|
||||
<div v-if="isPopular" class="popular-badge">推荐</div>
|
||||
<div class="card-duration">
|
||||
<span class="duration-num">{{ product.days }}</span>
|
||||
<span class="duration-unit">天</span>
|
||||
<span class="duration-num">{{ product.nights }}</span>
|
||||
<span class="duration-unit">晚</span>
|
||||
</div>
|
||||
<span class="card-tag">{{ product.tag }}</span>
|
||||
<span class="card-line">{{ product.line }} · {{ product.route }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 主体 -->
|
||||
<div class="card-body">
|
||||
<h3 class="card-name">{{ shortName }}</h3>
|
||||
<p class="card-audience">适合：{{ product.audience }}</p>
|
||||
<p class="card-desc">{{ product.description }}</p>
|
||||
<ul class="card-highlights">
|
||||
<li v-for="(h, i) in product.highlights" :key="i">
|
||||
<span class="check" aria-hidden="true">✓</span>
|
||||
{{ h }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 行程概览 -->
|
||||
<details v-if="product.itinerary && product.itinerary.length" class="card-itinerary">
|
||||
<summary class="itinerary-toggle">查看每日行程 ▾</summary>
|
||||
<ol class="itinerary-list">
|
||||
<li v-for="(day, i) in product.itinerary" :key="i">{{ day }}</li>
|
||||
</ol>
|
||||
</details>
|
||||
|
||||
<!-- 底部 CTA -->
|
||||
<NuxtLink to="/contact" class="card-cta">
|
||||
咨询该行程 <span aria-hidden="true">→</span>
|
||||
</NuxtLink>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({ product: { type: Object, required: true } })
|
||||
|
||||
const isPopular = computed(() => props.product.id === 'autumn-south-5d4n')
|
||||
|
||||
const shortName = computed(() => {
|
||||
return props.product.name.replace(/^游牧的森林V3·/, '')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.autumn-card {
|
||||
background: @color-bg-white;
|
||||
border: 1px solid @color-border;
|
||||
border-radius: @border-radius-lg;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: box-shadow @transition-base, transform @transition-base;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @shadow-lg;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
&--popular {
|
||||
border: 2px solid #D97706;
|
||||
box-shadow: @shadow-md;
|
||||
|
||||
.card-header {
|
||||
background: #D97706;
|
||||
}
|
||||
|
||||
.duration-num,
|
||||
.duration-unit,
|
||||
.card-tag,
|
||||
.card-line {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: @space-lg @space-lg @space-md;
|
||||
background: #FEF3C7;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popular-badge {
|
||||
position: absolute;
|
||||
top: @space-sm;
|
||||
right: @space-sm;
|
||||
padding: @space-xs @space-sm;
|
||||
font-size: @font-size-xs;
|
||||
font-weight: @font-weight-bold;
|
||||
color: #fff;
|
||||
background: @color-accent;
|
||||
border-radius: @border-radius-sm;
|
||||
}
|
||||
|
||||
.card-duration {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
margin-bottom: @space-sm;
|
||||
}
|
||||
|
||||
.duration-num {
|
||||
font-size: @font-size-3xl;
|
||||
font-weight: @font-weight-bold;
|
||||
color: #D97706;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.duration-unit {
|
||||
font-size: @font-size-sm;
|
||||
color: #D97706;
|
||||
font-weight: @font-weight-medium;
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
display: inline-block;
|
||||
padding: @space-xs @space-md;
|
||||
font-size: @font-size-xs;
|
||||
font-weight: @font-weight-medium;
|
||||
color: #D97706;
|
||||
background: @color-bg-white;
|
||||
border-radius: @border-radius-full;
|
||||
}
|
||||
|
||||
.card-line {
|
||||
display: block;
|
||||
font-size: @font-size-xs;
|
||||
color: #64748B;
|
||||
margin-top: @space-xs;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: @space-lg;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @color-text-primary;
|
||||
margin-bottom: @space-xs;
|
||||
}
|
||||
|
||||
.card-audience {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-muted;
|
||||
margin-bottom: @space-md;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-secondary;
|
||||
line-height: @line-height-base;
|
||||
margin-bottom: @space-md;
|
||||
.text-clamp(3);
|
||||
}
|
||||
|
||||
.card-highlights {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @space-sm;
|
||||
margin-top: auto;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: @space-sm;
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-secondary;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
}
|
||||
|
||||
.check {
|
||||
flex-shrink: 0;
|
||||
color: #D97706;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: @font-weight-bold;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
// 行程概览
|
||||
.card-itinerary {
|
||||
border-top: 1px solid @color-border;
|
||||
}
|
||||
|
||||
.itinerary-toggle {
|
||||
display: block;
|
||||
padding: @space-md @space-lg;
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-muted;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: background @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: @color-bg-gray;
|
||||
color: @color-text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.itinerary-list {
|
||||
padding: 0 @space-lg @space-md;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @space-xs;
|
||||
|
||||
li {
|
||||
font-size: @font-size-xs;
|
||||
color: @color-text-secondary;
|
||||
line-height: @line-height-base;
|
||||
padding-left: @space-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// 底部 CTA
|
||||
.card-cta {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: @space-md @space-lg;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: @font-weight-medium;
|
||||
color: #D97706;
|
||||
background: @color-bg-gray;
|
||||
text-decoration: none;
|
||||
transition: all @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: #D97706;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
在新工单中引用
屏蔽一个用户