hulai-website/CMS-INTEGRATION.md

呼籁旅行官网 — 后台对接方案（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用）

表结构

-- 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渲染