# 呼籁旅行官网 — 后台对接方案（CMS Integration）

> 本文档分析官网所有内容模块，标注哪些需要「写活」（后台可增删改查），哪些是固定结构不需要动态化，以及推荐的数据库设计和对接方式。

---

## 一、内容动态化分级

### 第一优先级：高频更新（运营同学日常操作）

| 模块 | 当前文件 | 操作类型 | 更新频率 | 说明 |
|------|---------|---------|---------|------|
| **客户评价** | `reviews.json` | 增、改、删 | 每周 | 每次收到好评都要加，是最高频的更新 |
| **FAQ问答** | `faq.json` | 增、改、删 | 每月 | 客户常问的问题会变化，需要随时补充和调整 |
| **联系方式** | `contact.json` | 改 | 偶尔 | 微信号、电话、邮箱可能变更 |
| **SEO信息** | `seo.json` | 改 | 偶尔 | 优化标题和描述以提升搜索排名 |

### 第二优先级：季节性更新（产品经理/罗盘操作）

| 模块 | 当前文件 | 操作类型 | 更新频率 | 说明 |
|------|---------|---------|---------|------|
| **产品版本** | `products.json → versions` | 增、改、删 | 每季 | 产品迭代到V10、新增冬季版等 |
| **小蒙马夏令营** | `products.json → summerCamp` | 改 | 每年 | 年龄、活动、定位调整 |
| **选择指南** | `products.json → selectionGuide` | 改 | 每季 | 新产品上线后需要更新推荐逻辑 |
| **定价说明** | `products.json → pricingPhilosophy` | 改 | 偶尔 | 价格策略调整时 |
| **产品叙事** | `products.json → narrative` | 改 | 偶尔 | 品牌定位调整时 |

### 第三优先级：低频变更（品牌层面）

| 模块 | 当前文件 | 操作类型 | 更新频率 | 说明 |
|------|---------|---------|---------|------|
| **品牌信息** | `brand.json` | 改 | 极少 | slogan、信任数据、差异化卖点 |
| **关于我们** | `about.json` | 改 | 极少 | 品牌故事、子公司、资质、团队、文化 |
| **导航** | `navigation.json` | 改 | 极少 | 新增/调整导航页面 |

### 不需要动态化（代码层面）

| 项目 | 说明 |
|------|------|
| 页面结构/布局 | Vue组件，需开发介入 |
| 样式/配色 | Less变量，需开发介入 |
| JSON-LD结构化数据 | 自动从内容数据生成，无需单独管理 |
| sitemap.xml | 只有页面增减时才需要改 |
| robots.txt | 基本不变 |

---

## 二、每个JSON文件的字段级分析

### 1. reviews.json（评价管理 — 最高频）

```
后台需要的功能：
✅ 新增评价（上传截图 + 填写文字）
✅ 编辑评价
✅ 删除评价
✅ 调整排序
✅ 修改汇总数据（总数、好评率、关键词）
✅ 管理筛选标签（场景、关心点）

字段说明：
summary:
  - totalCount: number      → 后台可改（或自动计算）
  - approvalRate: string    → 后台可改
  - keywords: string[]      → 后台可增删

items[]:
  - id: number              → 自动生成
  - nickname: string        → 后台填写
  - travelDate: string      → 后台填写（如"2025年7月"）
  - productVersion: string  → 后台选择（关联产品列表）
  - screenshot: string      → 后台上传图片，存储路径
  - content: string         → 后台填写（与截图内容一致，供AI抓取）
  - scenes: string[]        → 后台多选标签（带小孩/家庭游/情侣/朋友/带老人...）
  - concerns: string[]      → 后台多选标签（领队服务/行程安排/拍照超美/司机服务...）
```

### 2. faq.json（问答管理 — 高频）

```
后台需要的功能：
✅ 新增分类
✅ 在分类下新增/编辑/删除问答
✅ 调整分类排序和问答排序
✅ 管理相关链接

字段说明：
categories[]:
  - id: string              → 自动生成
  - name: string            → 后台填写（如"产品类"）
  - questions[]:
    - id: string            → 自动生成
    - question: string      → 后台填写
    - answer: string        → 后台填写（支持长文本）
    - relatedLinks[]:       → 后台配置
      - text: string        → 链接文字
      - url: string         → 链接地址（下拉选择站内页面）
```

### 3. products.json（产品管理 — 季节性）

```
后台需要的功能：
✅ 编辑产品叙事文案
✅ 新增/编辑/删除/排序产品版本
✅ 编辑夏令营信息
✅ 编辑选择指南
✅ 编辑定价说明

字段说明：
narrative: string            → 后台富文本编辑

versions[]:
  - id: string              → 自动生成（如"v9-6d5n-family"）
  - name: string            → 产品名称
  - days: number            → 天数
  - nights: number          → 晚数
  - audience: string        → 适合人群
  - description: string     → 产品描述
  - highlights: string[]    → 亮点列表（可增删）
  - tag: string             → 标签（如"经典版"/"人气王"）

summerCamp:
  - name: string            → 名称
  - ageRange: string        → 年龄范围
  - positioning: string     → 定位描述
  - coreActivities: array   → 核心活动列表
  - differenceFromV9: string → 与V9区别说明

selectionGuide:
  - byVacationLength[]:     → 按假期长度推荐
  - byChildAge[]:           → 按孩子年龄推荐
  - byPreference[]:         → 按偏好推荐
  （每条：condition + recommendation，recommendation关联产品id）

pricingPhilosophy: string   → 后台富文本编辑
```

### 4. contact.json（联系方式 — 偶尔更新）

```
后台需要的功能：
✅ 编辑联系渠道信息
✅ 新增/删除联系渠道
✅ 上传/更换二维码图片
✅ 编辑安全提示文案

字段说明：
channels[]:
  - type: string            → 渠道类型（wechat/phone/email/address等）
  - label: string           → 显示名称
  - value: string           → 联系值（微信号/电话/邮箱/地址）
  - qrImage: string|null    → 二维码图片路径（可选）
  - primary: boolean        → 是否主要渠道
  - description: string     → 补充说明

securityNotice: string       → 安全提醒文案
```

### 5. brand.json（品牌信息 — 极少更新）

```
后台需要的功能：
✅ 编辑品牌基础信息
✅ 编辑信任数据
✅ 编辑差异化卖点

字段说明：
name: string                → 品牌名
fullName: string            → 公司全称
domain: string              → 域名
url: string                 → 网址
slogan:
  - emotional: string       → 情感化口号
  - functional: string      → 功能化口号
trustStats[]:
  - value: string           → 数值（如"8000+"）
  - unit: string            → 单位（如"组"）
  - label: string           → 标签（如"已服务家庭"）
  - attribution: string     → 补充说明（可选）
differentiators[]:
  - title: string           → 卖点标题
  - description: string     → 卖点描述
icp: string                 → ICP备案号
eContract: string           → 电子合同资质
```

### 6. about.json（关于我们 — 极少更新）

```
后台需要的功能：
✅ 编辑品牌故事
✅ 管理子公司列表
✅ 管理资质列表
✅ 编辑团队和文化

字段说明：
story:
  - sections[]:             → 品牌故事段落
    - title/content         → 标题+内容
  - foundingMoment:         → 创始故事
    - scene/reflection      → 场景+感悟
subsidiaries[]:
  - name: string            → 公司名
  - role: string            → 业务角色
qualifications[]:
  - name: string            → 资质名称
  - detail: string          → 具体说明
team:
  - summary: string         → 团队概述
culture:
  - values[]:               → 企业文化
    - word/expression       → 关键词+表达
  - transparency: string    → 透明度说明
```

### 7. seo.json（SEO信息 — 偶尔优化）

```
后台需要的功能：
✅ 编辑每个页面的SEO信息

字段说明：
pages:
  [pageKey]:                → 页面标识（home/about/products/faq/reviews/contact）
    - title: string         → 页面标题（60字符内）
    - description: string   → 页面描述（155字符内）
    - h1: string            → 页面H1标题
    - ogImage: string       → 社交分享图片
```

### 8. navigation.json（导航 — 极少变更）

```
后台需要的功能：
✅ 编辑导航项（文字、链接）
✅ 调整排序

header[]:
  - text: string            → 导航文字
  - to: string              → 链接地址
footer[]:
  - title: string           → 分组标题
  - links[]:
    - text/to               → 链接文字+地址
```

---

## 三、推荐的技术方案

### 方案 A：JSON文件 + 简易后台（推荐起步）

**适合阶段**：现在 → 日均UV 1000以内

```
架构：
┌──────────┐      ┌──────────────┐      ┌──────────────┐
│  后台页面  │ ──→  │ API (读写JSON) │ ──→  │ data/*.json  │
│ (Vue/React)│      │  (Node.js)    │      │  (文件存储)   │
└──────────┘      └──────────────┘      └──────────────┘
                         │
                         ↓ 写完后触发
                  ┌──────────────┐
                  │ nuxi generate │  → 重新生成静态页面
                  └──────────────┘

优点：
- 零数据库成本
- 当前代码零改动，后台只操作JSON文件
- 生成的还是静态页面，速度最快
- 适合当前团队规模

缺点：
- 每次改内容需要重新 generate（约30秒）
- 多人同时编辑可能冲突
```

### 方案 B：数据库 + API + SSR（推荐中期）

**适合阶段**：有后台系统后

```
架构：
┌──────────┐      ┌──────────────┐      ┌──────────────┐
│  后台页面  │ ──→  │  API Server   │ ──→  │   数据库      │
│          │      │  (Node.js)    │      │ (MySQL/PG)   │
└──────────┘      └──────────────┘      └──────────────┘
                         │
                         ↓ 同时提供
                  ┌──────────────┐
                  │ Nuxt SSR渲染  │  → 实时读数据库渲染
                  └──────────────┘

改动点：
- nuxt.config.js: ssr改为true（当前已是），去掉prerender
- 页面中 import JSON → 改为 useFetch('/api/xxx')
- 新增 server/api/ 目录下的接口
```

---

## 四、数据库设计（方案B用）

### 表结构

```sql
-- 1. 评价表（最高频）
CREATE TABLE reviews (
  id INT PRIMARY KEY AUTO_INCREMENT,
  nickname VARCHAR(50) NOT NULL,
  travel_date VARCHAR(20),           -- "2025年7月"
  product_version VARCHAR(100),       -- 关联产品名称
  screenshot_url VARCHAR(255),        -- 截图CDN地址
  content TEXT NOT NULL,              -- 评价文字（AI抓取用）
  scenes JSON,                        -- ["带小孩", "家庭游"]
  concerns JSON,                      -- ["领队服务", "行程安排"]
  sort_order INT DEFAULT 0,           -- 排序权重
  is_visible BOOLEAN DEFAULT TRUE,    -- 是否显示
  created_at DATETIME DEFAULT NOW(),
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 2. 评价汇总表
CREATE TABLE review_summary (
  id INT PRIMARY KEY DEFAULT 1,
  total_count INT DEFAULT 0,
  approval_rate VARCHAR(10),          -- "98%"
  keywords JSON,                      -- ["贴心", "孩子玩疯了"]
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 3. FAQ分类表
CREATE TABLE faq_categories (
  id VARCHAR(50) PRIMARY KEY,         -- "product"
  name VARCHAR(50) NOT NULL,          -- "产品类"
  sort_order INT DEFAULT 0,
  created_at DATETIME DEFAULT NOW()
);

-- 4. FAQ问答表
CREATE TABLE faq_questions (
  id VARCHAR(50) PRIMARY KEY,
  category_id VARCHAR(50) NOT NULL,
  question VARCHAR(200) NOT NULL,
  answer TEXT NOT NULL,
  related_links JSON,                 -- [{"text":"查看产品","url":"/products"}]
  sort_order INT DEFAULT 0,
  is_visible BOOLEAN DEFAULT TRUE,
  created_at DATETIME DEFAULT NOW(),
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW(),
  FOREIGN KEY (category_id) REFERENCES faq_categories(id)
);

-- 5. 产品版本表
CREATE TABLE products (
  id VARCHAR(50) PRIMARY KEY,         -- "v9-6d5n-family"
  name VARCHAR(100) NOT NULL,
  days INT,
  nights INT,
  audience VARCHAR(100),
  description TEXT,
  highlights JSON,                    -- ["亮点1", "亮点2"]
  tag VARCHAR(20),                    -- "人气王"
  sort_order INT DEFAULT 0,
  is_visible BOOLEAN DEFAULT TRUE,
  created_at DATETIME DEFAULT NOW(),
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 6. 夏令营信息表
CREATE TABLE summer_camp (
  id INT PRIMARY KEY DEFAULT 1,
  name VARCHAR(100),
  age_range VARCHAR(20),
  positioning TEXT,
  core_activities JSON,
  difference_from_v9 TEXT,
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 7. 联系渠道表
CREATE TABLE contact_channels (
  id INT PRIMARY KEY AUTO_INCREMENT,
  type VARCHAR(20) NOT NULL,          -- "wechat"/"phone"/"email"...
  label VARCHAR(50) NOT NULL,
  value VARCHAR(200) NOT NULL,
  qr_image_url VARCHAR(255),
  is_primary BOOLEAN DEFAULT FALSE,
  description VARCHAR(200),
  sort_order INT DEFAULT 0,
  created_at DATETIME DEFAULT NOW()
);

-- 8. 品牌信息表（单行表）
CREATE TABLE brand_info (
  id INT PRIMARY KEY DEFAULT 1,
  name VARCHAR(50),
  full_name VARCHAR(100),
  domain VARCHAR(50),
  slogan_emotional VARCHAR(200),
  slogan_functional VARCHAR(200),
  trust_stats JSON,                   -- 4个信任数据
  differentiators JSON,               -- 5个差异化卖点
  icp VARCHAR(50),
  e_contract VARCHAR(100),
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 9. 关于我们（单行表）
CREATE TABLE about_info (
  id INT PRIMARY KEY DEFAULT 1,
  story JSON,                         -- 品牌故事结构
  subsidiaries JSON,                  -- 12家子公司
  qualifications JSON,                -- 资质列表
  team JSON,                          -- 团队介绍
  culture JSON,                       -- 文化价值观
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 10. SEO信息表
CREATE TABLE seo_pages (
  page_key VARCHAR(20) PRIMARY KEY,   -- "home"/"about"/...
  title VARCHAR(100),
  description VARCHAR(200),
  h1 VARCHAR(100),
  og_image VARCHAR(255),
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 11. 导航表
CREATE TABLE navigation (
  id INT PRIMARY KEY AUTO_INCREMENT,
  position ENUM('header', 'footer') NOT NULL,
  parent_title VARCHAR(50),           -- footer分组标题，header为NULL
  text VARCHAR(50) NOT NULL,
  url VARCHAR(100) NOT NULL,
  sort_order INT DEFAULT 0
);

-- 12. 内容文案表（产品叙事、定价说明等长文本）
CREATE TABLE content_blocks (
  block_key VARCHAR(50) PRIMARY KEY,  -- "product_narrative" / "pricing_philosophy" / "security_notice"
  content TEXT NOT NULL,
  updated_at DATETIME DEFAULT NOW() ON UPDATE NOW()
);

-- 13. 选择指南表
CREATE TABLE selection_guide (
  id INT PRIMARY KEY AUTO_INCREMENT,
  guide_type ENUM('vacation_length', 'child_age', 'preference'),
  condition_text VARCHAR(100),        -- "3-4天假期"
  recommendation VARCHAR(50),         -- 关联产品id
  sort_order INT DEFAULT 0
);
```

### 图片存储

```
推荐方案：
- 评价截图、二维码、Logo等 → 对象存储（阿里云OSS / 腾讯云COS）
- 后台上传图片 → API接收 → 上传到OSS → 返回CDN地址
- 数据库只存URL，不存文件

目录规划：
/hulai-oss/
  ├── reviews/          评价截图
  ├── qrcodes/          二维码图片
  ├── logo/             品牌Logo
  └── og/               社交分享图
```

---

## 五、后台管理界面建议

### 后台菜单结构

```
📊 数据看板
  - 内容统计（评价数、FAQ数、产品数）

📝 内容管理
  ├── 客户评价          → 列表 + 新增 + 编辑 + 删除 + 拖拽排序
  ├── 常见问答          → 分类管理 + 问答列表 + 拖拽排序
  ├── 旅行产品          → 产品列表 + 编辑 + 夏令营 + 选择指南
  └── 联系方式          → 渠道列表 + 编辑 + 上传二维码

🏢 品牌设置
  ├── 品牌信息          → 基础信息 + 信任数据 + 差异化卖点
  ├── 关于我们          → 品牌故事 + 子公司 + 资质 + 团队 + 文化
  └── SEO设置           → 6个页面的标题/描述/H1

⚙️ 系统设置
  ├── 导航管理          → 页头/页脚导航编辑
  └── 发布管理          → 一键重新生成静态页面
```

### 后台技术栈建议

```
推荐：
- 前端：Vue 3 + Element Plus（与官网技术栈统一）
- 后端：Node.js + Express/Koa（或 Nuxt server routes）
- 数据库：MySQL 8.0（阿里云RDS）
- 图片：阿里云OSS + CDN
- 部署：同一台服务器，后台走 /admin 路径

对接方式：
1. 后台修改数据 → 写入数据库
2. 点击「发布」 → 触发 nuxi generate
3. 生成的静态文件部署到CDN/Nginx

或者（更简单的过渡方案）：
1. 后台修改数据 → 直接修改 data/*.json 文件
2. 点击「发布」 → 触发 nuxi generate
3. 无需数据库，JSON就是数据库
```

---

## 六、当前代码对接友好度评估

### 已经写活的（直接能对接）

| 内容 | 数据源 | 对接方式 |
|------|-------|---------|
| 所有评价 | `reviews.json` | 替换为API即可 |
| 所有FAQ | `faq.json` | 替换为API即可 |
| 所有产品 | `products.json` | 替换为API即可 |
| 所有联系方式 | `contact.json` | 替换为API即可 |
| 品牌信息 | `brand.json` | 替换为API即可 |
| 关于信息 | `about.json` | 替换为API即可 |
| SEO信息 | `seo.json` | 替换为API即可 |
| 导航 | `navigation.json` | 替换为API即可 |

### 对接时的改动量

```
每个页面改动量很小，只需要把：
  import data from '~/data/xxx.json'
改为：
  const { data } = await useFetch('/api/xxx')

大约 6个页面 + 3个组件（Header/Footer/MobileNav）= 9个文件
每个文件改动 1-3 行代码
总改动量：约30行代码
```

### 评价图片已经对接友好

```
当前：screenshot: "/images/reviews/review-001.jpg"  （本地路径）
对接后：screenshot: "https://cdn.1814.love/reviews/review-001.jpg"  （CDN地址）

组件中用的是 :src="item.screenshot"，路径换成CDN地址直接生效，零改动。
```

---

## 七、给运营同学的速查表

### 现在（没有后台之前）怎么改内容

| 要改什么 | 找哪个文件 | 怎么改 |
|---------|----------|-------|
| 新增客户评价 | `data/reviews.json` | 在 `items` 数组里加一条，图片放到 `public/images/reviews/` |
| 修改FAQ问答 | `data/faq.json` | 找到对应问题直接改文字 |
| 修改产品信息 | `data/products.json` | 找到对应版本直接改 |
| 换微信号/电话 | `data/contact.json` | 找到对应渠道改 `value` |
| 改页面标题/描述 | `data/seo.json` | 找到对应页面改 |
| 改品牌口号 | `data/brand.json` | 改 `slogan` 下的文字 |
| 改关于我们 | `data/about.json` | 找到对应位置改 |

**改完后**：需要运行 `npx nuxi generate` 重新生成页面，然后重新部署。

### 有后台之后怎么改

登录后台 → 找到对应模块 → 编辑 → 点击「发布」→ 完成

---

## 八、总结

```
当前架构优势：
✅ 所有内容都在 8 个 JSON 文件里，结构清晰
✅ 数据和展示完全分离，后台对接只需改数据源
✅ 对接工作量极小（约30行代码改动）
✅ 可以分步走：先用JSON文件+手动generate，再上后台

建议路线图：
Phase 1（现在）：JSON文件 + 手动维护 + nuxi generate
Phase 2（1-2月后）：简易后台 + 读写JSON + 一键generate
Phase 3（业务增长后）：数据库 + API + CDN图片 + SSR渲染
```