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,79 @@
|
||||
<template>
|
||||
<div class="review-filter">
|
||||
<div class="filter-group">
|
||||
<span class="filter-label">按场景：</span>
|
||||
<button
|
||||
class="filter-btn"
|
||||
:class="{ active: !activeScene }"
|
||||
@click="$emit('filterScene', '')"
|
||||
>全部</button>
|
||||
<button
|
||||
v-for="s in scenes"
|
||||
:key="s"
|
||||
class="filter-btn"
|
||||
:class="{ active: activeScene === s }"
|
||||
@click="$emit('filterScene', s)"
|
||||
>{{ s }}</button>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<span class="filter-label">按关心点：</span>
|
||||
<button
|
||||
class="filter-btn"
|
||||
:class="{ active: !activeConcern }"
|
||||
@click="$emit('filterConcern', '')"
|
||||
>全部</button>
|
||||
<button
|
||||
v-for="c in concerns"
|
||||
:key="c"
|
||||
class="filter-btn"
|
||||
:class="{ active: activeConcern === c }"
|
||||
@click="$emit('filterConcern', c)"
|
||||
>{{ c }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
scenes: { type: Array, required: true },
|
||||
concerns: { type: Array, required: true },
|
||||
activeScene: { type: String, default: '' },
|
||||
activeConcern: { type: String, default: '' },
|
||||
})
|
||||
defineEmits(['filterScene', 'filterConcern'])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.review-filter {
|
||||
margin-bottom: @space-xl;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @space-md;
|
||||
padding: @space-lg;
|
||||
background: @color-bg-gray;
|
||||
border-radius: @border-radius-md;
|
||||
}
|
||||
.filter-group { display: flex; align-items: flex-start; flex-wrap: wrap; gap: @space-xs; }
|
||||
.filter-label {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-muted;
|
||||
white-space: nowrap;
|
||||
line-height: 44px;
|
||||
margin-right: @space-xs;
|
||||
}
|
||||
.filter-btn {
|
||||
padding: @space-sm @space-md;
|
||||
font-size: @font-size-sm;
|
||||
border: 1px solid @color-border;
|
||||
background: @color-bg-white;
|
||||
border-radius: @border-radius-full;
|
||||
cursor: pointer;
|
||||
color: @color-text-secondary;
|
||||
transition: all @transition-fast;
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
&:hover { border-color: @color-primary; color: @color-primary; }
|
||||
&.active { background: @color-primary; color: #fff; border-color: @color-primary; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<!--
|
||||
双层设计：
|
||||
上层：截图（视觉证明真实性）
|
||||
下层：文字（SEO可抓取）
|
||||
-->
|
||||
<article class="review-item">
|
||||
<!-- 截图层 -->
|
||||
<div v-if="review.screenshot" class="review-screenshot" :class="{ 'is-expanded': expanded }">
|
||||
<img
|
||||
:src="review.screenshot"
|
||||
:alt="`客户${review.nickname}对呼籁旅行${review.productVersion}的评价`"
|
||||
loading="lazy"
|
||||
class="review-img"
|
||||
@click="expanded = !expanded"
|
||||
/>
|
||||
<button
|
||||
v-if="!expanded"
|
||||
class="screenshot-expand"
|
||||
@click="expanded = true"
|
||||
aria-label="查看完整截图"
|
||||
>
|
||||
<span class="expand-icon">▾</span> 查看完整截图
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="screenshot-collapse"
|
||||
@click="expanded = false"
|
||||
aria-label="收起截图"
|
||||
>
|
||||
<span class="expand-icon expand-icon--up">▴</span> 收起截图
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 文字层（SEO核心） -->
|
||||
<div class="review-content">
|
||||
<div class="review-meta">
|
||||
<span class="review-name">{{ review.nickname }}</span>
|
||||
<span class="review-sep">·</span>
|
||||
<span class="review-date">{{ review.travelDate }}</span>
|
||||
</div>
|
||||
<p class="review-product">{{ review.productVersion }}</p>
|
||||
<blockquote class="review-text" :class="{ 'is-clamped': !textExpanded && isLongText }">
|
||||
{{ review.content }}
|
||||
</blockquote>
|
||||
<button
|
||||
v-if="isLongText"
|
||||
class="text-toggle"
|
||||
@click="textExpanded = !textExpanded"
|
||||
>
|
||||
{{ textExpanded ? '收起' : '展开全文' }}
|
||||
</button>
|
||||
<div class="review-tags">
|
||||
<span v-for="s in review.scenes" :key="s" class="tag tag--scene">{{ s }}</span>
|
||||
<span v-for="c in review.concerns" :key="c" class="tag tag--concern">{{ c }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const props = defineProps({ review: { type: Object, required: true } })
|
||||
|
||||
const expanded = ref(false)
|
||||
const textExpanded = ref(false)
|
||||
const isLongText = computed(() => props.review.content && props.review.content.length > 150)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.review-item {
|
||||
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-md;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.review-screenshot {
|
||||
position: relative;
|
||||
background: @color-bg-gray;
|
||||
max-height: 320px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
|
||||
/* 底部渐变遮罩，提示可展开 */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
background: linear-gradient(transparent, rgba(248, 248, 250, 0.95));
|
||||
pointer-events: none;
|
||||
transition: opacity @transition-fast;
|
||||
}
|
||||
|
||||
&.is-expanded {
|
||||
max-height: none;
|
||||
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.review-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.screenshot-expand,
|
||||
.screenshot-collapse {
|
||||
position: absolute;
|
||||
bottom: @space-sm;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: @space-xs @space-lg;
|
||||
font-size: @font-size-sm;
|
||||
color: @color-primary;
|
||||
background: @color-bg-white;
|
||||
border: 1px solid @color-primary;
|
||||
border-radius: @border-radius-full;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
white-space: nowrap;
|
||||
transition: all @transition-fast;
|
||||
font-weight: @font-weight-medium;
|
||||
box-shadow: @shadow-sm;
|
||||
|
||||
&:hover {
|
||||
background: @color-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
font-size: @font-size-xs;
|
||||
margin-right: @space-xs;
|
||||
}
|
||||
|
||||
.screenshot-collapse {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: none;
|
||||
display: block;
|
||||
margin: @space-sm auto;
|
||||
}
|
||||
|
||||
.review-content {
|
||||
padding: @space-md @space-lg @space-lg;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.review-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: @space-xs;
|
||||
margin-bottom: @space-xs;
|
||||
}
|
||||
|
||||
.review-name { font-weight: @font-weight-medium; color: @color-text-primary; }
|
||||
.review-sep { color: @color-text-muted; }
|
||||
.review-date { font-size: @font-size-sm; color: @color-text-muted; }
|
||||
.review-product { font-size: @font-size-sm; color: @color-primary; margin-bottom: @space-sm; }
|
||||
|
||||
.review-text {
|
||||
font-size: @font-size-sm;
|
||||
line-height: 1.7;
|
||||
color: @color-text-secondary;
|
||||
margin-bottom: @space-sm;
|
||||
|
||||
&.is-clamped {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.text-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
color: @color-primary;
|
||||
font-size: @font-size-xs;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin-bottom: @space-sm;
|
||||
align-self: flex-start;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.review-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: @space-xs;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: @space-xs @space-sm;
|
||||
font-size: @font-size-xs;
|
||||
border-radius: @border-radius-full;
|
||||
|
||||
&--scene { background: @color-primary-bg; color: @color-primary; }
|
||||
&--concern { background: @color-bg-warm; color: @color-accent; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- SEO层：全部评价文字内容在HTML中可见，供搜索引擎抓取 -->
|
||||
<div class="review-list">
|
||||
<ReviewsReviewItem v-for="r in visibleReviews" :key="r.id" :review="r" />
|
||||
<div v-if="!reviews.length" class="review-empty">
|
||||
<p>暂无符合条件的评价</p>
|
||||
<button class="review-reset" @click="$emit('reset')">清除筛选，查看全部评价</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="hasMore" class="review-loadmore">
|
||||
<button class="loadmore-btn" @click="loadMore">
|
||||
查看更多评价（还有{{ remaining }}条）
|
||||
</button>
|
||||
</div>
|
||||
<p v-else-if="reviews.length > pageSize" class="review-end">已展示全部{{ reviews.length }}条评价</p>
|
||||
|
||||
<!--
|
||||
SEO 隐藏层：将未展示的评价文字以语义化HTML输出到页面中
|
||||
视觉上隐藏但搜索引擎可抓取，确保全部82条评价内容被索引
|
||||
-->
|
||||
<div v-if="hiddenReviews.length" class="sr-only" aria-hidden="true">
|
||||
<div v-for="r in hiddenReviews" :key="'seo-' + r.id">
|
||||
<p>{{ r.nickname }} · {{ r.travelDate }} · {{ r.productVersion }}</p>
|
||||
<p>{{ r.content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
const props = defineProps({ reviews: { type: Array, required: true } })
|
||||
defineEmits(['reset'])
|
||||
|
||||
const pageSize = 12
|
||||
const showCount = ref(pageSize)
|
||||
|
||||
const visibleReviews = computed(() => props.reviews.slice(0, showCount.value))
|
||||
const hiddenReviews = computed(() => props.reviews.slice(showCount.value))
|
||||
const hasMore = computed(() => showCount.value < props.reviews.length)
|
||||
const remaining = computed(() => props.reviews.length - showCount.value)
|
||||
|
||||
function loadMore() {
|
||||
showCount.value += pageSize
|
||||
}
|
||||
|
||||
// 筛选条件变化时重置
|
||||
watch(() => props.reviews.length, () => {
|
||||
showCount.value = pageSize
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.review-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: @space-lg;
|
||||
|
||||
.respond-md({
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
});
|
||||
}
|
||||
|
||||
.review-empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: @space-2xl;
|
||||
color: @color-text-muted;
|
||||
|
||||
p {
|
||||
margin-bottom: @space-md;
|
||||
}
|
||||
}
|
||||
|
||||
.review-reset {
|
||||
padding: @space-sm @space-lg;
|
||||
font-size: @font-size-sm;
|
||||
color: @color-primary;
|
||||
background: @color-bg-white;
|
||||
border: 1px solid @color-primary;
|
||||
border-radius: @border-radius-full;
|
||||
cursor: pointer;
|
||||
transition: all @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: @color-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.review-loadmore {
|
||||
text-align: center;
|
||||
margin-top: @space-xl;
|
||||
}
|
||||
|
||||
.loadmore-btn {
|
||||
padding: @space-sm @space-xl;
|
||||
font-size: @font-size-base;
|
||||
color: @color-primary;
|
||||
background: @color-bg-white;
|
||||
border: 1px solid @color-primary;
|
||||
border-radius: @border-radius-full;
|
||||
cursor: pointer;
|
||||
transition: all @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: @color-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.review-end {
|
||||
text-align: center;
|
||||
margin-top: @space-lg;
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-muted;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<section class="section section--green">
|
||||
<div class="container">
|
||||
<div class="summary-grid">
|
||||
<div class="summary-stat">
|
||||
<span class="stat-value">{{ summary.totalCount }}<span class="stat-plus">+</span></span>
|
||||
<span class="stat-label">组家庭的选择</span>
|
||||
</div>
|
||||
<div class="summary-divider"></div>
|
||||
<div class="summary-stat">
|
||||
<span class="stat-value">{{ summary.approvalRate }}</span>
|
||||
<span class="stat-label">好评率</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-keywords">
|
||||
<span class="keywords-label">客户高频关键词</span>
|
||||
<div class="keywords-list">
|
||||
<span v-for="kw in summary.keywords" :key="kw" class="keyword-tag">{{ kw }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({ summary: { type: Object, required: true } })
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.summary-grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: @space-2xl;
|
||||
margin-bottom: @space-xl;
|
||||
}
|
||||
|
||||
.summary-stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: @font-size-hero;
|
||||
font-weight: @font-weight-bold;
|
||||
color: @color-primary;
|
||||
line-height: 1.1;
|
||||
position: relative;
|
||||
|
||||
.respond-md({
|
||||
font-size: 52px;
|
||||
});
|
||||
}
|
||||
|
||||
.stat-plus {
|
||||
font-size: @font-size-xl;
|
||||
color: @color-primary-light;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
margin-top: @space-sm;
|
||||
font-size: @font-size-base;
|
||||
color: @color-text-secondary;
|
||||
}
|
||||
|
||||
.summary-divider {
|
||||
width: 1px;
|
||||
height: 60px;
|
||||
background: @color-primary-lighter;
|
||||
}
|
||||
|
||||
.summary-keywords {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.keywords-label {
|
||||
display: block;
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-muted;
|
||||
margin-bottom: @space-md;
|
||||
}
|
||||
|
||||
.keywords-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: @space-sm;
|
||||
}
|
||||
|
||||
.keyword-tag {
|
||||
padding: @space-xs @space-md;
|
||||
background: @color-bg-white;
|
||||
border-radius: @border-radius-full;
|
||||
color: @color-primary;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: @font-weight-medium;
|
||||
transition: all @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: @color-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
在新工单中引用
屏蔽一个用户