GuangYu/guanwang

Fork 0

Files

Nelson 5d31ee5743 feat: 初始化慧遇书院官网一期

2026-08-12 18:03:23 +08:00

24 KiB

Raw Blame History

慧愈科技官网后台功能需求设计文档 V1.0

项目名称：慧愈科技官方网站后台管理系统文档版本：V1.0 日期：2026-08-10 目标：为慧愈科技官网提供统一、易维护、可审计、可扩展的内容管理后台，并确保前台官网始终保持高级、可信、统一的品牌形象。

1. 项目背景

慧愈科技官网的核心目标不是做一个复杂的业务系统，而是建立一个长期稳定、可信、清晰、便于搜索引擎和 AI 理解的官方信息源。

官网前台整体采用“一页式长页面 + 顶部吸顶导航 + 页面锚点联动”的浏览体验，核心展示内容包括：

慧愈科技品牌与公司信息；
卢慧老师官方介绍；
理念与方法；
课程与产品；
官方信息；
品牌动态 / 官方声明；
陪伴团队；
联系方式与官方渠道。

后台的核心任务，是让运营人员无需修改代码即可维护上述内容。

2. 后台产品定位

后台不是通用 CMS，也不做复杂页面搭建器。

一期后台定位为：

面向慧愈科技官网的专用内容管理系统。

核心原则：

前台结构固定，后台主要负责改内容；
首页模块允许排序、显示/隐藏，但不允许随意改变整体结构；
公司、老师、课程、官方账号等信息统一维护，避免重复录入；
所有关键内容支持草稿、审核、发布和历史版本；
重要内容修改后可实时预览前台效果；
内容结构尽量标准化，为后续 SEO 与 AI 信息识别提供基础；
后台视觉风格与官网保持统一，但更偏专业、清晰、高效。

3. 后台整体信息架构

后台左侧一级导航：

仪表盘

首页管理

卢慧老师

公司与品牌
├─ 公司信息
├─ 品牌信息
└─ 官方渠道

课程与产品

内容中心
├─ 品牌动态
├─ 官方声明
└─ 媒体报道

陪伴团队

素材中心

SEO / AI信息

系统设置
├─ 管理员账号
├─ 角色权限
├─ 操作日志
├─ 发布审核
└─ 网站配置

4. 统一 UI 设计规范

4.1 整体风格

后台视觉延续官网风格：

大面积留白；
浅蓝灰、暖白、低饱和米色为背景；
深海军蓝作为主色；
极浅蓝作为模块背景；
少量暖金作为辅助强调色；
大圆角卡片；
柔和阴影；
不使用高饱和颜色；
不使用传统“企业后台蓝白表格风”；
不使用大量边框；
不使用过密的模块。

整体气质：

安静、克制、高级、专业、可信。

4.2 基础布局

桌面端：

┌──────────────────────────────────────────────┐
│ 左侧导航 │             顶部栏               │
│          ├───────────────────────────────────┤
│          │                                   │
│          │           页面主体                │
│          │                                   │
│          │                                   │
└──────────────────────────────────────────────┘

左侧导航：

固定宽度约 220px；
Logo 位于顶部；
当前菜单使用浅蓝背景高亮；
一级菜单图标 + 文字；
支持折叠。

顶部栏：

页面标题；
全局搜索；
通知；
当前管理员；
快捷预览官网；
退出登录。

4.3 通用交互规范

所有编辑页面统一支持：

自动保存草稿；
手动保存；
预览；
提交审核；
发布；
查看历史版本；
恢复历史版本；
显示最后保存时间；
离开未保存页面时提示；
删除前二次确认；
上传图片后即时预览。

状态统一：

草稿
待审核
已发布
已下线

颜色建议：

草稿：灰蓝；
待审核：暖橙；
已发布：浅绿；
已下线：灰。

5. 登录页

5.1 页面定位

登录页风格与官网首页一致。

背景使用：

山水；
晨光；
湖面；
极简莲花元素；
柔和渐变。

左侧作为品牌展示，右侧为登录卡片。

5.2 页面结构

左侧：

Logo；
品牌主标题；
“身心疗愈 · 科技赋能”；
品牌副标题；
背景视觉。

右侧登录卡片：

标题：后台管理登录；
账号；
密码；
验证码；
记住我；
忘记密码；
登录按钮。

5.3 登录交互

账号

支持：

用户名；
手机号；
邮箱。

密码

支持：

显示 / 隐藏密码；
回车登录。

验证码

一期采用图形验证码。

连续登录失败超过设定次数后：

强制刷新验证码；
可增加短时登录限制。

登录成功

跳转：

/dashboard

登录失败

显示明确原因：

账号不存在；
密码错误；
验证码错误；
账号已停用。

不得只显示“登录失败”。

6. 仪表盘

6.1 页面目标

仪表盘只展示真正有用的信息，不堆无意义数据。

6.2 顶部欢迎区

显示：

早安 / 下午好 / 晚上好；
管理员姓名；
今日日期；
快捷入口。

6.3 核心数据卡片

建议一期展示：

已发布页面数量；
已发布内容数量；
待审核内容数量；
课程与产品数量；
陪伴团队人数；
网站运行状态。

如已接入统计工具，可增加：

近 7 日 PV；
近 7 日 UV；
平均停留时长。

不强制一期实现复杂统计。

6.4 快捷操作

支持：

编辑首页；
发布文章；
新增课程；
上传素材；
添加团队成员；
SEO 设置。

6.5 最近更新

列表展示：

更新对象；
操作人；
操作类型；
更新时间；
跳转到对应内容。

6.6 待审核内容

显示：

内容标题；
内容类型；
提交人；
提交时间；
快捷审核。

7. 首页管理

7.1 页面目标

前台首页是“一页式长页面”。

后台首页管理不做自由拖拽建站器，而采用：

固定模块 + 排序 + 显隐 + 模块内容编辑 + 实时预览。

7.2 页面布局

建议三栏：

左侧：页面模块列表
中间：实时预览
右侧：当前模块编辑面板

7.3 首页模块

默认模块：

英雄区
关于慧愈
卢慧老师
理念与方法
课程与产品
官方信息
品牌动态 / 官方声明
陪伴团队
页脚

7.4 模块操作

每个模块支持：

拖动排序；
显示 / 隐藏；
编辑；
预览；
恢复默认设置。

一期不支持删除核心模块。

7.5 英雄区

字段：

主标题；
副标题；
简介；
CTA 按钮文字；
CTA 跳转目标；
背景图片；
背景视频；
是否开启背景动效；
背景亮度；
背景遮罩强度。

建议前台动效：

页面进入时文字淡入；
背景轻微视差；
鼠标移动产生弱视差；
莲花 / 光圈缓慢漂移；
不使用夸张粒子特效。

7.6 关于慧愈模块

字段：

模块标题；
英文辅助标题；
简介；
详细介绍；
配图；
跳转按钮；
展示数据卡片。

可配置数据卡：

成立时间；
服务学员；
核心业务；
其他自定义数据。

7.7 卢慧老师模块

首页只维护首页展示版信息：

展示标题；
一句话身份；
首页短简介；
人物大图；
3～4 个核心标签；
了解更多按钮。

具体详细资料从“卢慧老师”模块统一读取。

7.8 理念与方法

默认三项：

觉察；
关系；
成长。

每项支持：

标题；
副标题；
简介；
图片；
跳转链接；
hover 动效样式。

7.9 课程与产品

首页不展示全部课程。

后台支持勾选：

首页推荐

首页最多建议展示 3～4 个。

字段读取自“课程与产品”。

7.10 官方信息

首页只展示固定入口：

公司主体；
官方老师；
官方账号；
官方课程。

后台可控制：

是否展示；
排序；
卡片标题；
卡片简介；
图标。

7.11 品牌动态 / 官方声明

首页显示最近 N 条。

后台配置：

展示数量；
内容类型；
是否优先显示官方声明；
是否展示日期。

7.12 陪伴团队

首页仅展示精选成员。

后台支持：

首页推荐；
首页排序；
首页最大展示人数。

推荐首页最多展示 5～8 人。

7.13 实时预览

支持：

PC；
平板；
手机。

编辑过程中实时预览。

预览必须和正式前台使用同一套组件。

8. 卢慧老师

8.1 页面定位

卢慧老师是官网核心人物，独立一级菜单。

资料分为：

基础资料
百科介绍
经历与成果
课程关联
外部链接
SEO 信息

8.2 基础资料

字段：

姓名；
英文名；
对外称呼；
一句话身份；
标准简介；
详细介绍；
主头像；
半身照；
横版宣传图；
人物标签；
首页展示摘要。

8.3 标准介绍

建议保存三种版本：

一句话介绍

建议 20～40 字。

标准短介绍

建议 100～150 字。

完整介绍

不限制字数。

8.4 百科介绍

字段：

百科简介；
百科页面 URL；
百科更新时间；
百科截图；
来源说明。

用于保持官网与权威公开资料一致。

8.5 经历与成果

采用时间线管理。

字段：

年份；
月份；
标题；
描述；
图片；
类型；
是否重要；
是否前台展示；
排序。

类型：

从业经历；
课程；
项目；
著作；
荣誉；
媒体；
其他。

8.6 核心成果

卡片式管理。

例如：

从业年限；
服务时长；
学员数量；
课程数量。

字段：

数值；
单位；
描述；
图标；
排序。

8.7 课程关联

从“课程与产品”中选择关联。

不重复录入课程。

8.8 外部权威链接

字段：

平台名称；
链接；
图标；
类型；
是否展示。

例如：

百度百科；
公众号；
视频号；
新闻媒体；
官方采访。

8.9 页面预览

后台右侧显示人物页面实时预览。

9. 公司与品牌

9.1 公司信息

字段：

公司法定全称；
公司简称；
英文名称；
成立时间；
公司简介；
统一社会信用代码；
注册地址；
办公地址；
联系电话；
邮箱；
官网域名；
ICP 备案号；
公安备案号；
Logo；
公司照片。

所有前台模块统一引用这里的数据。

9.2 品牌信息

字段：

品牌名称；
Logo；
品牌简介；
品牌使命；
品牌愿景；
品牌价值观；
品牌关键词；
品牌主张；
品牌视觉说明。

9.3 官方渠道

每个渠道字段：

平台；
账号名称；
账号 ID；
主体；
二维码；
官方链接；
简介；
是否启用；
排序。

渠道类型：

微信公众号；
视频号；
小红书；
抖音；
小程序；
客服微信；
官方邮箱；
官方电话；
其他。

不做搜索核验功能。

前台只直接展示官方渠道。

10. 课程与产品

10.1 列表页

支持：

搜索；
类型筛选；
状态筛选；
首页推荐筛选；
排序；
批量上下线。

10.2 产品类型

后台可配置，例如：

直播课程；
长期课程；
实修服务；
AI 产品；
小程序；
科技产品；
企业服务。

10.3 基础字段

产品名称；
副标题；
产品类型；
封面；
Banner；
简介；
详细介绍；
适合人群；
核心价值；
服务方式；
官方价格；
主讲老师；
上线时间；
当前状态；
官方入口；
是否首页推荐；
首页排序。

10.4 产品状态

筹备中
在售
暂停
升级中
已下架

10.5 详情页内容

支持富文本。

支持：

标题；
图片；
视频；
引用；
表格；
按钮；
FAQ。

不做任意自由页面搭建。

11. 内容中心

11.1 内容类型

统一文章模型，分类展示：

品牌动态
官方声明
媒体报道

11.2 内容列表

字段：

标题；
分类；
封面；
摘要；
状态；
作者；
发布时间；
更新时间；
操作。

支持：

搜索；
分类；
状态；
时间；
批量发布；
批量下线。

11.3 内容编辑

字段：

标题；
摘要；
封面；
正文；
内容类型；
关联对象；
发布时间；
SEO 标题；
SEO 描述；
关键词；
发布状态。

11.4 官方声明

增加字段：

声明类型；
涉及对象；
声明编号；
是否置顶；
是否首页展示；
附件；
盖章文件。

11.5 媒体报道

增加：

媒体名称；
原文 URL；
发布时间；
媒体 Logo；
是否权威来源。

12. 陪伴团队

12.1 定位

卢慧老师不放在此列表。

该模块管理上百位陪伴老师、辅导老师。

12.2 字段

姓名；
照片；
老师类型；
职位；
简介；
擅长方向；
服务方向；
加入时间；
是否首页推荐；
是否公开展示；
排序。

12.3 列表操作

支持：

搜索；
类型筛选；
显示状态；
批量上下线；
批量设置首页推荐；
拖动排序。

13. 素材中心

13.1 素材类型

图片；
视频；
PDF；
Logo；
其他附件。

13.2 上传

支持：

拖拽上传；
多文件上传；
上传进度；
图片自动压缩；
图片自动生成 WebP；
自动读取尺寸；
自动读取文件大小。

13.3 素材字段

文件名；
类型；
URL；
尺寸；
文件大小；
ALT 文本；
标签；
上传人；
上传时间；
引用次数。

13.4 素材操作

预览；
替换；
下载；
复制 URL；
查看引用页面；
删除。

若素材正在被页面使用，不允许直接删除。

需提示：

当前素材正在被 X 个页面引用，请先解除引用。

14. SEO / AI 信息

14.1 页面 SEO

每个前台页面支持：

SEO Title；
SEO Description；
Keywords；
Canonical URL；
OG Title；
OG Description；
OG Image；
是否允许索引。

14.2 AI 标准信息

针对核心实体维护标准信息。

实体包括：

慧愈科技
深圳市慧愈文化科技有限公司
卢慧老师
核心课程
核心产品

每个实体支持：

标准名称；
别名；
一句话介绍；
100 字介绍；
300 字介绍；
完整介绍；
实体类型；
关联实体；
官方链接；
外部权威链接；
最后更新时间。

14.3 结构化数据

系统自动生成 JSON-LD。

建议：

页面	Schema
官网首页	Organization + WebSite
公司页	Organization
卢慧老师	Person + ProfilePage
课程	Product / Service
内容	Article
导航	BreadcrumbList

后台不要求普通运营人员直接编辑 JSON。

15. 系统设置

15.1 管理员账号

字段：

姓名；
用户名；
手机号；
邮箱；
角色；
状态；
最后登录时间。

支持：

新建；
编辑；
停用；
重置密码。

15.2 角色权限

一期角色：

超级管理员
内容管理员
审核员

超级管理员

拥有全部权限。

内容管理员

可：

新建；
编辑；
保存草稿；
提交审核。

不可直接发布敏感内容。

审核员

可：

查看；
审核；
发布；
退回。

15.3 发布审核

流程：

编辑
↓
保存草稿
↓
提交审核
↓
审核通过
↓
发布

审核退回：

审核退回
↓
填写退回原因
↓
编辑重新修改
↓
再次提交审核

15.4 操作日志

记录：

操作人；
时间；
IP；
模块；
操作类型；
目标对象；
修改前内容；
修改后内容。

操作类型：

登录；
新建；
编辑；
发布；
下线；
删除；
恢复版本；
修改权限。

15.5 网站配置

字段：

网站名称；
网站 Logo；
favicon；
默认 SEO；
联系方式；
ICP；
公安备案；
页脚版权；
网站状态；
维护模式；
网站统计代码；
robots 设置；
sitemap 设置。

16. 版本管理

所有以下对象必须保留历史版本：

首页；
卢慧老师；
公司信息；
品牌信息；
课程；
内容文章；
官方声明。

每个版本记录：

版本号；
修改人；
修改时间；
修改原因；
发布人；
发布时间。

支持：

查看版本
对比版本
恢复版本

恢复版本后先恢复为草稿，不直接覆盖线上版本。

17. 搜索

后台顶部提供全局搜索。

可搜索：

页面；
老师；
课程；
内容；
素材；
官方渠道。

支持快捷键：

Ctrl / Cmd + K

18. 前台联动要求

官网前台采用“一页式长页面”。

顶部导航固定吸顶。

点击导航：

首页
关于慧愈
卢慧老师
课程与产品
官方信息
品牌动态
联系我们

页面平滑滚动到对应模块。

用户滚动页面时：

系统自动判断当前模块；
顶部导航自动切换激活状态；
URL 可更新锚点；
浏览器返回行为正常。

例如：

/#about
/#luhui
/#products
/#official
/#news
/#contact

19. 前台动效要求

后台不直接控制所有复杂动效，只提供必要开关。

整体原则：

动效用于增强高级感，而不是为了炫技。

首屏

背景缓慢视差；
光晕缓慢移动；
文字进入淡入；
莲花轻微浮动。

模块进入

进入视口：

上移 20～30px；
渐显；
0.5～0.8 秒。

卡片 Hover

轻微抬升；
图片轻微放大；
光影缓慢变化；
箭头轻微移动。

禁止：

快速弹跳；
大幅旋转；
强粒子；
高频闪烁；
大量同时运动元素。

20. 响应式要求

支持：

桌面；
平板；
手机。

后台最低适配：

1366 × 768

主要开发参考：

1920 × 1080

前台：

=1440；
1024～1439；
768～1023；
<768。

21. 安全要求

必须：

HTTPS；
密码加密存储；
登录验证码；
Session / Token 过期；
管理操作日志；
权限校验；
防止越权；
富文本 XSS 过滤；
文件上传类型校验；
文件大小限制；
CSRF 防护；
SQL 注入防护。

后台接口不得仅依赖前端按钮隐藏判断权限。

22. 性能要求

后台：

普通页面首屏加载 < 2 秒；
列表操作响应 < 500ms；
编辑保存反馈 < 1 秒。

前台：

首屏重点优化；
图片懒加载；
WebP / AVIF；
CDN；
静态资源缓存；
页面 SEO 友好；
尽量 SSR / SSG；
核心正文必须能被搜索引擎直接读取。

23. 一期明确不做

一期不做：

通用低代码页面搭建器；
复杂拖拽建站系统；
AI 自动写文章；
AI 自动审核；
自动核验账号；
复杂 CRM；
用户注册系统；
在线支付；
课程学习系统；
老师排班系统；
多租户；
多语言；
APP；
自动生成复杂运营报表。

24. 推荐前端路由

后台：

/admin/login
/admin/dashboard

/admin/home

/admin/luhui

/admin/company
/admin/brand
/admin/channels

/admin/products
/admin/products/:id

/admin/content
/admin/content/:id

/admin/team
/admin/team/:id

/admin/media

/admin/seo

/admin/settings/users
/admin/settings/roles
/admin/settings/audit
/admin/settings/site

25. 推荐核心数据模型

Company

id
name
short_name
english_name
description
established_at
credit_code
registered_address
office_address
phone
email
domain
icp
police_icp
logo
status
created_at
updated_at

Teacher

id
name
english_name
title
short_bio
bio
avatar
portrait
banner
tags
status
created_at
updated_at

卢慧老师可以单独固定 teacher_type=core。

Product

id
name
subtitle
type
cover
banner
summary
content
audience
value
service_mode
price
teacher_id
official_url
status
is_home
sort
created_at
updated_at

Article

id
type
title
summary
cover
content
author
source
source_url
status
published_at
is_home
is_top
created_at
updated_at

TeamMember

id
name
avatar
role
type
bio
specialties
joined_at
is_home
is_visible
sort
created_at
updated_at

Channel

id
platform
name
account_id
主体
qr_code
url
description
status
sort

Media

id
name
type
url
width
height
size
alt
tags
uploader
reference_count
created_at

Revision

id
entity_type
entity_id
version
snapshot
operator
comment
created_at

26. 验收标准

首页管理

模块可排序；
模块可隐藏；
编辑后可预览；
PC / 手机可预览；
保存草稿有效；
发布后前台正确更新。

卢慧老师

可维护完整人物资料；
可维护时间线；
可关联课程；
可维护外部权威链接；
可实时预览。

公司与品牌

公司信息只维护一份；
前台多个位置统一读取；
官方渠道可独立维护。

课程产品

支持新增、编辑、上下线；
支持首页推荐；
支持排序；
支持详情页。

内容中心

支持品牌动态；
支持官方声明；
支持媒体报道；
支持草稿 / 审核 / 发布。

陪伴团队

支持上百位老师；
支持批量管理；
支持首页推荐；
首页不需要展示全部老师。

素材中心

支持上传；
支持预览；
支持 ALT；
使用中的素材不可直接删除。

SEO / AI

页面可配置 SEO；
核心实体有标准介绍；
自动生成基础结构化数据。

权限

不同角色权限正确；
所有敏感操作留日志；
后端接口必须校验权限。

27. 开发优先级

P0

必须完成：

登录；
仪表盘；
首页管理；
卢慧老师；
公司信息；
品牌信息；
官方渠道；
课程与产品；
内容中心；
陪伴团队；
素材中心；
管理员；
权限；
审核发布；
操作日志；
网站配置。

P1

建议一期一起做：

SEO；
AI 标准信息；
版本管理；
实时预览；
全局搜索；
Sitemap；
JSON-LD。

P2

后续迭代：

网站访问分析；
内容质量检查；
AI 搜索结果监测；
外部错误信息记录；
更多自动化能力。

28. 给 Codex 的实现原则

开发时请遵循：

不做通用 CMS；
不做复杂低代码；
页面结构优先固定；
后台以“内容编辑效率”为第一目标；
前台以“高级、干净、大气、可信”为第一目标；
组件化实现首页各模块；
后台预览复用前台组件；
所有核心数据单一来源；
所有发布内容保留版本；
所有权限必须后端校验；
所有公开页面 SEO 友好；
所有重要文字必须存在 HTML 中，不仅存在图片中；
动效克制，不影响性能；
优先保证 PC 端高级感，同时做好移动端响应式；
前后台 UI 保持统一品牌语言，但后台更强调清晰与效率。

29. 最终产品形态

最终网站应形成：

前台官网
      ↓
高级品牌展示
      ↓
卢慧老师权威介绍
      ↓
课程 / 产品 / 官方信息
      ↓
品牌动态与官方声明
      ↓
陪伴团队与联系方式

后台则形成：

统一事实数据
      ↓
内容编辑
      ↓
实时预览
      ↓
审核
      ↓
发布
      ↓
历史版本与操作留痕

后台最终目标不是功能越多越好，而是：

任何运营人员都能安全、快速、稳定地维护官网，而官网长期保持统一、高级、可信。

24 KiB Raw Blame History Unescape Escape