智绘颐养 (Zhihui Yiyang) — 智慧养老服务平台 智绘颐养 是一款面向老年人群体的智慧养老综合服务平台，由葫氣乐享相伴团队 开发，参与"互联网+"社会服务赛道。平台融合 AI、VR、健康监测、认知训练等技术，为老年人提供从日常生活到精神文化的一站式数字化服务。
空巢、独居老年人
轻度认知障碍 (MCI) 患者
情感孤寂、缺乏社交的老年群体
关注老年人生活质量的家属及社区工作者
痛点
解决方案
独居老人就餐困难
智慧助餐 — 适老化在线点餐，营养均衡配餐
记忆力衰退、认知下降
认知训练游戏 — 找茬、记忆配对、色彩辨识、涂色填充
情感孤寂、缺乏陪伴
AI 绘画 — 口述记忆生成画作；VR 怀旧 — 沉浸式场景体验
用药管理混乱
用药提醒 — 药品管理、定时提醒、服药打卡
方言文化流失
方言展馆 — 方言音频收集展示，按地域/类别浏览
紧急求助不便
一键呼叫 — SOS 紧急救援流程、生活服务预约
健康数据分散
健康守护 — 心率、血压、睡眠、步数统一监测
数字化门槛高
适老化 UI — 大字体、高对比、简化交互、AI 助手全程引导
老人用方言口述记忆场景，AI 生成水彩/油画/素描三种风格的画作
支持壮语、粤语等约 20 种方言语音识别
VR 怀旧提供六十年代老街、村寨戏台、工厂大院三大沉浸式场景
支持 360° 全景浏览和 AR 老物件体验
21 道适老菜品，分 6 大类（推荐、主食、荤菜、素菜、汤品、套餐）
标签化饮食：低盐少油、适老配餐、营养均衡
完整购物车 → 结算 → 订单管理 → 取消退款流程
余额支付体系，支持 WeChat/Alipay 模拟充值
找茬游戏 — 水墨画风格，Canvas 2D 渲染，左右对比找差异记忆拼图 — 传统纹样翻牌配对，3D 翻转动画色彩辨识 — 中国传统色彩认知，含国画名画色彩题目涂色填充 — SVG 梅花线稿，12 种国画颜料，点击填充
所有游戏共享角色"顾小颐"语音引导、计分系统、多难度关卡。
健康数据看板：心率、血压、睡眠时长、步数
个性化提醒卡片（用药、饮水、运动）
SOS 一键呼叫 ：4 步救援流程（联系社区 → 通知家属 → 医院预警 → 救援出动）数据同步状态实时展示
药品管理：添加/删除药品，设置名称、时间、剂量
今日服药进度条，三种操作：已服用 / 跳过 / 推迟 30 分钟
快速添加 6 种常用药品预设（降压药、降糖药、阿司匹林、钙片、维生素D、心脏药）
9 条方言短语，覆盖 5 大类别（日常用语、俗语谚语、歌谣童谣、节气农事）
支持 6 个地域分类（湖南、四川、广东、山东、江浙、通用）
音频播放 + 波形动画，点赞收藏
搜索功能：按文本、释义、地域检索
接入网易云音乐 API，全功能音乐播放
旋转黑胶唱片 / 歌词双模式切换
LRC 歌词解析与滚动展示
3 种播放模式（列表循环 / 单曲循环 / 随机）
二维码登录同步收藏歌单
搜索历史、热门搜索建议、迷你播放器
浮动可拖拽 AI 助手，全程陪伴
基于智谱 GLM-4-Plus 大模型，流式对话
内置平台全功能知识库，可导航引导到任意页面
快捷提示词："我想听歌"、"今天有点无聊"、"平台有什么功能"
银发经济市场数据可视化（22 万亿市场规模）
团队成果展示（6 项国家外观专利、2 项软件著作权、5 所合作机构）
合作伙伴展示（优必选、清花绣坊、艺指陶艺）
媒体报道（学习强国、中国教育电视台、广西卫视、柳州日报）
传统"织锦/刺绣"主题视觉设计
6 大分析板块（概览锦缎、班级织锦、成绩染缬、疗愈绘卷、心声绣纹、锦囊良策）
滚动 / 看板双布局模式，GSAP Flip 动画切换
印章收集系统、丝线动画背景、GSAP ScrollTrigger 滚动动画
┌─────────────────────────────────────────────────────────┐
│ 前端 (React SPA) │
│ React 18 + TypeScript + Vite 6 + Tailwind CSS 3 │
│ Framer Motion · GSAP · Three.js · ECharts · Lucide │
│ Port: 3000 (dev) │
└──────────────────────┬──────────────────────────────────┘
│ HTTP REST · JWT · HMAC-SHA256
┌──────────────────────▼──────────────────────────────────┐
│ 后端 (Express API) │
│ Node.js + Express 4 + mysql2 + JWT + bcrypt │
│ NeteaseCloudMusicApi · qrcode · dotenv │
│ Port: 4001 │
└──────────────────────┬──────────────────────────────────┘
│
┌──────────────────────▼──────────────────────────────────┐
│ 数据库 (MySQL 8) │
│ Database: zhjy │
│ Tables: users · sms_codes · orders │
└─────────────────────────────────────────────────────────┘
外部服务:
• spug.cc — 短信验证码推送
• 网易云音乐 API — 音乐搜索/播放/歌词
• 智谱 AI (GLM-4-Plus) — AI 助手对话
技术
用途
React 18 + TypeScript (strict)
UI 框架，类型安全
Vite 6
构建工具，HMR 热更新
React Router DOM v7
客户端路由
Tailwind CSS 3
原子化 CSS，自定义 warm/sage/cream 色板
Framer Motion
页面过渡动画、手势交互、spring 物理动画
GSAP + ScrollTrigger
高级滚动动画、Flip 布局动画
Three.js
VR 全景 3D 场景渲染
ECharts + echarts-for-react
数据分析可视化
Lucide React
图标库
canvas-confetti
完成庆祝特效
技术
用途
Express.js 4
HTTP 框架
mysql2 (promise)
MySQL 连接池
jsonwebtoken
30 天有效期 JWT 认证
bcrypt
密码哈希存储
NeteaseCloudMusicApi
网易云音乐 API 封装
qrcode
二维码登录生成
dotenv
环境变量管理
zhihui-yiyang/ # 前端项目
├── public/
│ ├── favicon.svg
│ └── images/ # 静态图片资源
│ ├── home/ # 首页图片
│ ├── games/ # 游戏图片
│ └── profile/ # 个人中心图片
├── src/
│ ├── main.tsx # 应用入口
│ ├── App.tsx # 路由配置 + 响应式布局
│ ├── index.css # 全局样式 + 自定义动画
│ ├── contexts/
│ │ └── AuthContext.tsx # 认证状态管理 (JWT + 用户信息)
│ ├── services/
│ │ └── ai.ts # AI 对话 API (流式 SSE)
│ ├── hooks/
│ │ ├── useDeviceDetect.ts # 桌面/移动端检测
│ │ ├── useGameTimer.ts # 游戏计时器
│ │ ├── useSpeech.ts # Web Speech API TTS
│ │ └── useHealingScrollAnimations.ts # GSAP 滚动动画
│ ├── data/
│ │ ├── spotDifferenceData.ts # 找茬游戏关卡数据
│ │ ├── memoryPuzzleData.ts # 记忆拼图数据
│ │ ├── colorRecognitionData.ts # 色彩辨识题库
│ │ ├── drawingFillData.ts # 涂色填充数据
│ │ └── healingAnalyticsData.ts # 疗愈分析数据
│ ├── config/
│ │ └── ai.ts # AI 服务配置
│ ├── components/
│ │ ├── Navbar.tsx # 顶部导航栏
│ │ ├── MobileTabBar.tsx # 移动端底部 TabBar (5 个标签)
│ │ ├── AiAssistant.tsx # 浮动 AI 助手"小颐"
│ │ ├── LoginPrompt.tsx # 登录提示组件
│ │ ├── games/ # 游戏通用组件
│ │ │ ├── GameShell.tsx # 游戏布局容器
│ │ │ ├── GameCompleteModal.tsx # 游戏完成弹窗
│ │ │ ├── GameScoreBoard.tsx # 计分板
│ │ │ ├── DifficultyIndicator.tsx # 难度指示器
│ │ │ └── GuXiaoyiBubble.tsx # 角色"顾小颐"气泡
│ │ ├── Player/ # 音乐播放器
│ │ │ ├── index.tsx # 全屏播放器
│ │ │ ├── DiscMode.tsx # 黑胶唱片模式
│ │ │ ├── LyricMode.tsx # 歌词模式
│ │ │ ├── LyricsView.tsx # 歌词滚动视图
│ │ │ └── types.ts # 类型定义
│ │ └── healing/ # 疗愈分析主题组件
│ │ ├── OverviewBrocade.tsx # 概览锦缎
│ │ ├── ClassTapestry.tsx # 班级织锦
│ │ ├── ScoreDyeing.tsx # 成绩染缬
│ │ ├── HealingScroll.tsx # 疗愈绘卷
│ │ ├── VoiceEmbroidery.tsx # 心声绣纹
│ │ ├── BrocadeBag.tsx # 锦囊良策
│ │ ├── SealCollection.tsx # 印章收集
│ │ ├── SilkThreadBackground.tsx # 丝线动画背景
│ │ └── ... # 更多主题组件
│ └── pages/
│ ├── Home.tsx # 首页
│ ├── Auth.tsx # 登录/注册
│ ├── AiPainting.tsx # AI 绘画 + VR 怀旧
│ ├── VrNostalgia.tsx # VR 怀旧详情
│ ├── HealthGuard.tsx # 健康守护
│ ├── SmartDiningPage.tsx # 智慧助餐 (点餐)
│ ├── CheckoutPage.tsx # 订单结算
│ ├── OrdersPage.tsx # 我的订单
│ ├── Profile.tsx # 个人中心
│ ├── ProfileEdit.tsx # 编辑资料
│ ├── SettingsPage.tsx # 设置
│ ├── RechargePage.tsx # 余额充值
│ ├── MedicationPage.tsx # 用药提醒
│ ├── CallHelpPage.tsx # 一键呼叫 / 生活服务
│ ├── ChangePasswordPage.tsx # 修改密码
│ ├── DialectPage.tsx # 方言展馆
│ ├── MusicPage.tsx # 音乐播放
│ ├── HealingAnalyticsPage.tsx # 疗愈分析看板
│ ├── DataValue.tsx # 数据价值展示
│ ├── UserAgreementPage.tsx # 用户协议
│ ├── PrivacyPolicyPage.tsx # 隐私政策
│ ├── AboutPage.tsx # 关于我们
│ ├── HelpPage.tsx # 帮助中心
│ ├── cognitive/ # 认知训练游戏
│ │ ├── GameHub.tsx # 游戏大厅
│ │ ├── SpotDifference.tsx # 找茬
│ │ ├── MemoryPuzzle.tsx # 记忆拼图
│ │ ├── ColorRecognition.tsx # 色彩辨识
│ │ └── DrawingFill.tsx # 涂色填充
│ └── website/
│ └── OfficialSite.tsx # 桌面端营销官网
├── tailwind.config.js # 自定义色板 + 动画
├── vite.config.ts # Vite 配置
├── tsconfig.json # TypeScript 配置
├── .env # 开发环境变量
├── .env.production # 生产环境变量
└── PROJECT.md # 项目技术文档
页面
路由
功能
首页 /轮播图、快捷功能面板（6大入口）、功能卡片、AI绘画/Vr怀旧/健康守护入口
个人中心 /profile用户信息展示、钱包卡片、订单入口、设置入口
设置 /settings编辑资料、修改密码、关于、协议、帮助中心、退出登录
页面
路由
功能
登录/注册 /auth双模式认证：①手机号+短信验证码（自动注册）②账号+密码登录
修改密码 /change-password旧密码验证 → 新密码设置，密码强度指示器
页面
路由
功能
AI 绘画 /ai-painting口述记忆→AI生成画作，水彩/油画/素描三种风格切换，卡片滑动浏览
VR 怀旧 /vr-nostalgia三大怀旧场景（老街/戏台/大院），360°全景，AR 老物件
页面
路由
功能
智慧助餐 /smart-dining21道菜品，6大分类，搜索，购物车，菜品详情
结算 /checkout订单确认，余额支付，费用明细
我的订单 /orders4状态筛选（全部/待确认/已确认/已取消），搜索，确认/取消操作
余额充值 /recharge6档金额选择，WeChat/Alipay 模拟支付
页面
路由
功能
健康守护 /health-guard健康数据看板、SOS一键呼叫、提醒卡片
用药提醒 /medication-reminders药品管理、服药打卡、进度追踪、快速添加
一键呼叫 /call-help生活服务预约（回收餐具/打扫卫生/全面消杀），时段选择
页面
路由
功能
游戏大厅 /cognitive-games4款游戏入口，顾小颐引导，每日训练建议
找茬游戏 /cognitive-games/spot水墨画风格，左右对比，Canvas 2D 渲染
记忆拼图 /cognitive-games/memory传统纹样翻牌配对，3D 翻转动画
色彩辨识 /cognitive-games/color中国传统色彩认知，国画名画色彩题
涂色填充 /cognitive-games/drawSVG 梅花线稿，12色国画颜料，点击填充
页面
路由
功能
方言展馆 /dialect5类/6地域方言音频展示，搜索，点赞
音乐播放 /music网易云音乐接入，搜索/播放/歌词/歌单，QR登录
页面
路由
功能
数据价值 /data-value市场规模、调研数据、团队成果、合作伙伴、媒体报道
疗愈分析 /healing-analytics6大织锦主题分析板块，双布局切换，印章收集
关于我们 /about项目介绍、团队信息
帮助中心 /help6个FAQ、4大分类
用户协议 /user-agreement9章法律条款
隐私政策 /privacy-policy9章隐私条款
桌面端（宽度 ≥ 768px）访问大部分路由时展示品牌营销页面：
英雄区 — 手机模型 + 标语功能介绍 — 3 大模块（创意体验/智慧助餐/健康守护）认知游戏 — 4 款游戏展示数据洞察 — 市场规模 + 疗愈课堂关于我们 — 团队 + 二维码下载
Node.js >= 18
MySQL >= 8.0
npm >= 9
# 前端< frontend-repo-url> zhihui-yiyang
cd zhihui-yiyang
# 后端（另一个仓库）< backend-repo-url> zhihui-yiyang-后端
cd zhihui-yiyang-后端cd zhihui-yiyang-后端
# 安装依赖# 确保 MySQL 已启动，并创建数据库# mysql -u root -p -e "CREATE DATABASE IF NOT EXISTS zhjy DEFAULT CHARACTER SET utf8mb4;"# 启动服务（首次启动自动建表）# 后端运行在 http://localhost:4001cd zhihui-yiyang
# 安装依赖# 启动开发服务器# 前端运行在 http://localhost:3000访问 http://localhost:3000 即可看到应用。
# 健康检查# 返回: { "code": 200, "message": "服务运行正常" }VITE_API_BASE = http://localhost:4001
VITE_AI_BASE_URL = https://open.bigmodel.cn/api/paas/v4
VITE_AI_API_KEY = <your-zhipu-api-key>
VITE_AI_MODEL = glm-4-plus VITE_API_BASE = http://<your-server-ip>:4001
VITE_AI_BASE_URL = https://open.bigmodel.cn/api/paas/v4
VITE_AI_API_KEY = <your-zhipu-api-key>
VITE_AI_MODEL = glm-4-plus # 网易云音乐 Cookie（QR 登录后自动写入）MUSIC_U_COOKIE = cd zhihui-yiyang
npm run build # TypeScript 编译 + Vite 打包# 产出在 dist/ 目录server {
listen 80 ;
server_name your-domain.com;
# 前端静态资源
root /path/to/zhihui-yiyang/dist;
index index .html;
# SPA 路由回退
location / {
try_files $uri $uri / /index .html;
}
# API 反向代理
location /api/ {
proxy_pass http ://127.0.0.1:4001 ;
proxy_set_header Host $host ;
proxy_set_header X-Real-IP $remote_addr ;
}
} # 安装 PM2# 启动后端cd zhihui-yiyang-后端
pm2 start server.js --name zhihui-yiyang-api
# 设置开机自启
服务器防火墙需开放 4001 端口（API）和 80/443 端口（前端）
MySQL 数据库首次连接会自动建表
若使用 HTTP（非 HTTPS），SMS 签名会自动降级为 fallback 哈希算法
网易云音乐功能需先通过 /api/music/login/qr/create 扫码登录
建议配置 HTTPS + Nginx 反向代理用于生产环境
色板
色值
用途
warm 暖橙色系 (50-900)
主色调
sage 绿色系 (50-900)
辅助色
cream #faf6f0背景色
ink #2d2a26文字色
gold #c8a050强调色
danqing 青绿系 (50-900)
国画主题色
vermillion 朱砂红
游戏/紧急
gamboge 藤黄
暖色调
indigoC 靛青
冷色调
展示字体 : ZCOOL XiaoWei (站酷小薇体) — 标题、Logo正文字体 : Noto Sans SC (思源黑体) — 正文、按钮
类型
实现
场景
页面切换
Framer Motion AnimatePresence
路由跳转
交互反馈
Framer Motion spring
按钮、卡片
滚动动画
GSAP ScrollTrigger
疗愈分析页
布局切换
GSAP Flip
疗愈分析双布局
手势交互
Framer Motion drag
AI 绘画卡片
3D 场景
Three.js
VR 怀旧
Canvas 动画
原生 Canvas 2D
找茬游戏
CSS 3D
perspective + rotateY
记忆拼图翻牌
移动端 : < 768px — 底部 TabBar 导航桌面端 : >= 768px — 营销官网（特定页面除外）
详细 API 文档请查看 后端 README 。
模块
端点
鉴权
说明
健康检查
GET /api/health无
服务状态
认证
POST /api/auth/send-smsHMAC 签名
发送短信验证码
认证
POST /api/auth/phone-login无
手机号+验证码登录
认证
POST /api/auth/login无
账号/密码登录
用户
GET /api/user/profileJWT
获取用户资料
用户
PUT /api/user/profileJWT
更新资料
用户
POST /api/user/rechargeJWT
余额充值
用户
POST /api/user/change-passwordJWT
修改密码
订单
POST /api/order/createJWT
创建订单
订单
GET /api/order/listJWT
订单列表
订单
POST /api/order/cancelJWT
取消订单
订单
POST /api/order/confirmJWT
确认订单
音乐
GET /api/music/search无
歌曲搜索
音乐
GET /api/music/audio/:id无
音频流
音乐
GET /api/music/lyric无
歌词获取
音乐
GET /api/music/login/qr/create无
生成登录二维码
数据库：zhjy (MySQL 8)
表
说明
核心字段
users用户表
user_id, phone, account, password(bcrypt), nickname, gender, avatar, balance
sms_codes短信验证码
phone, code, expires_at, used
orders订单表
order_no, user_id, items(JSON), total_price, status(pending/confirmed/cancelled)
完整 DDL 详见 后端 README 。
葫氣乐享相伴团队 — 柳州市第二职业技术学校
项目赛道：互联网+ 社会服务赛道
知识产权：6 项国家外观设计专利、2 项软件著作权
合作机构：优必选、清花绣坊、艺指陶艺等 5 所
媒体报道：学习强国、中国教育电视台、广西卫视、柳州日报
本项目保留所有权利。如需使用或合作，请联系团队。
