You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 KiB
34 KiB
健康 AI 问询助手项目设计方案
一、项目概述
健康 AI 问询助手是一个智能健康咨询平台,用户可通过 WEB 端和移动 APP 进行健康相关问题的咨询,AI 将基于医学知识库提供专业解答和健康建议。
二、技术栈推荐
前端技术
| 平台 | 技术选型 | 理由 |
|---|---|---|
| WEB 端 | Vue 3 + TypeScript + Vite | 国内生态好,学习曲线平缓,开发效率高 |
| APP 端 | React Native + TypeScript | 跨平台原生体验,性能优秀,生态成熟 |
| Web UI 框架 | Element Plus | 成熟稳定,组件丰富 |
| App UI 框架 | React Native Paper / NativeBase | Material Design 风格,组件完善 |
| 状态管理 | Pinia (Web) / Zustand (App) | 轻量高效,TypeScript 支持好 |
| 导航 | Vue Router (Web) / React Navigation (App) | 各平台主流导航方案 |
后端技术
| 组件 | 技术选型 | 理由 |
|---|---|---|
| 语言 | Go 1.21+ | 高性能,并发能力强,部署简单 |
| Web 框架 | Gin | 轻量高效,生态成熟,中间件丰富 |
| ORM | GORM | 功能完善,支持自动迁移,多数据库兼容 |
| 数据库 | SQLite(默认) | 轻量简单,零配置,适合演示和开发 |
| 配置管理 | Viper | 支持多种配置格式,环境变量绑定 |
| 日志 | Zap | 高性能结构化日志 |
| AI 接口 | OpenAI API / 通义千问 | 成熟稳定,效果好 |
数据库扩展方案
系统采用 Repository 模式 + GORM 抽象层,支持通过配置切换数据库:
| 数据库 | 适用场景 | 切换方式 |
|---|---|---|
| SQLite | 开发/演示/小规模 | 默认,零配置 |
| PostgreSQL | 生产环境推荐 | 修改配置文件即可 |
| MySQL | 已有MySQL环境 | 修改配置文件即可 |
配置示例 (config.yaml):
database:
driver: sqlite # 可选: sqlite, postgres, mysql
# SQLite 配置
sqlite:
path: ./data/health.db
# PostgreSQL 配置(需要时启用)
postgres:
host: localhost
port: 5432
user: postgres
password:
dbname: health_app
# MySQL 配置(需要时启用)
mysql:
host: localhost
port: 3306
user: root
password:
dbname: health_app
# AI 服务配置
ai:
provider: aliyun # 可选: openai, aliyun (通义千问)
max_history_messages: 10 # 发送给AI的最大历史消息数
max_tokens: 2000 # 最大返回 token 数
# OpenAI 配置
openai:
api_key: "" # OpenAI API Key
base_url: "https://api.openai.com/v1"
model: "gpt-3.5-turbo" # 可选: gpt-3.5-turbo, gpt-4
# 阿里云通义千问配置
aliyun:
api_key: "" # 阿里云 DashScope API Key
model: "qwen-turbo" # 可选: qwen-turbo, qwen-plus, qwen-max
AI 服务说明:
| 服务商 | Provider | 模型选项 | API Key 获取 |
|---|---|---|---|
| OpenAI | openai |
gpt-3.5-turbo, gpt-4 | https://platform.openai.com/api-keys |
| 阿里云通义千问 | aliyun |
qwen-turbo, qwen-plus, qwen-max | https://dashscope.console.aliyun.com/apiKey |
架构设计要点:
- 使用 GORM 统一 ORM 层,SQL 语法自动适配
- Repository 接口隔离数据访问逻辑
- 避免使用特定数据库的专有语法
- 数据库迁移脚本兼容多种数据库
三、系统架构
flowchart TB
subgraph client [客户端]
Web[Web端_Vue3]
App[App端_ReactNative]
end
subgraph backend [后端服务_Go_Gin]
API[Gin服务]
Auth[认证模块]
Survey[健康调查模块]
Constitution[体质辨识模块]
AI[AI对话模块]
Health[健康档案模块]
end
subgraph storage [数据存储]
DB[(SQLite)]
end
subgraph external [外部服务]
LLM[AI大模型API]
end
Web --> API
App --> API
API --> Auth
API --> Survey
API --> Constitution
API --> AI
API --> Health
Auth --> DB
Survey --> DB
Constitution --> DB
AI --> LLM
AI -.->|获取体质信息| Constitution
Health --> DB
新用户完整流程
flowchart LR
A[用户注册] --> B[基础信息填写]
B --> C[生活习惯调查]
C --> D[健康状况调查]
D --> E[体质问卷测评]
E --> F[体质结果展示]
F --> G[AI问诊功能]
G -->|定期提醒| H[体质重新测评]
H --> F
四、功能模块设计
4.1 用户模块
- 用户注册/登录(手机号/邮箱)
- 个人资料管理(基本信息、健康档案)
- 第三方登录(微信)
- JWT Token 认证
4.2 新用户健康调查(核心功能)
新用户注册后必须完成健康调查问卷,系统根据问卷结果判断用户体质类型。
4.2.1 基础信息采集
- 个人基本信息
- 姓名、性别、出生日期
- 身高、体重(自动计算 BMI)
- 职业、婚姻状况
- 所在地区
- 生活习惯调查
- 作息时间(入睡时间、起床时间、睡眠质量)
- 饮食习惯(三餐规律、饮食偏好、饮水量)
- 运动习惯(运动频率、运动类型、运动时长)
- 烟酒情况(是否吸烟、饮酒频率)
- 健康状况调查
- 既往病史(慢性病、手术史)
- 家族病史(糖尿病、高血压、心脏病、癌症等)
- 过敏史(药物过敏、食物过敏、其他过敏)
- 当前用药情况
4.2.2 中医体质辨识问卷
基于《中医体质分类与判定》标准,包含 60+道问题,涵盖九种体质:
| 体质类型 | 特征描述 | 常见表现 |
|---|---|---|
| 平和质 | 阴阳气血调和 | 体态适中,面色红润,精力充沛 |
| 气虚质 | 元气不足 | 易疲劳,气短懒言,易出汗 |
| 阳虚质 | 阳气不足 | 畏寒怕冷,手脚冰凉,喜热饮 |
| 阴虚质 | 阴液亏少 | 口燥咽干,手足心热,盗汗 |
| 痰湿质 | 痰湿凝聚 | 形体肥胖,腹部肥满,痰多 |
| 湿热质 | 湿热内蕴 | 面垢油光,口苦口干,大便黏滞 |
| 血瘀质 | 血行不畅 | 肤色晦暗,易生斑点,健忘 |
| 气郁质 | 气机郁滞 | 情绪低落,多愁善感,胸闷 |
| 特禀质 | 先天失常 | 过敏体质,易打喷嚏,皮肤易过敏 |
4.2.3 体质判定算法
原始分 = 各条目得分之和
转化分 = (原始分 - 条目数) / (条目数 × 4) × 100
判定标准:
- 平和质:转化分 ≥ 60分,其他8种体质转化分均 < 30分
- 偏颇体质:转化分 ≥ 40分为"是",30-39分为"倾向是"
- 可存在多种偏颇体质(复合体质)
4.2.4 调查结果展示
- 体质雷达图(九种体质得分可视化)
- 主要体质类型及特征说明
- 个性化健康建议
- 饮食调养建议
- 起居调养建议
- 运动调养建议
- 情志调养建议
- 易发疾病风险提示
4.3 AI 问诊模块
- 多轮对话支持
- 结合用户体质进行个性化回答
- 对话历史记录
- 智能追问(症状细化)
- 健康建议生成(基于体质类型)
- 免责声明展示
4.3.1 AI Agent 系统提示词
# 角色定义
你是"健康AI助手",一个专业的健康咨询助理。你基于中医体质辨识理论,为用户提供个性化的健康建议。
## 重要声明
- 你不是专业医师,仅提供健康咨询和养生建议
- 你的建议不能替代医生的诊断和治疗
- 遇到以下情况,必须立即建议用户就医:
* 胸痛、呼吸困难、剧烈头痛
* 高烧不退(超过39°C持续24小时)
* 意识模糊、晕厥
* 严重外伤、大量出血
* 持续剧烈腹痛
* 疑似中风症状(口眼歪斜、肢体无力、言语不清)
* 任何可能危及生命的紧急状况
## 用户信息
{{user_profile}}
## 用户体质
{{constitution_info}}
## 用药历史
{{medication_history}}
## 已购买保健品
{{purchase_history}}
## 回答原则
### 1. 简洁原则
- 回答控制在200字以内
- 使用简短句子,避免冗长解释
- 重点突出,条理清晰
### 2. 体质结合原则
根据用户体质特点给出针对性建议:
- 气虚质:建议补气食物,避免过度劳累
- 阳虚质:建议温补,避免寒凉
- 阴虚质:建议滋阴,避免辛辣燥热
- 痰湿质:建议祛湿,控制饮食
- 湿热质:建议清热利湿,饮食清淡
- 血瘀质:建议活血化瘀,适当运动
- 气郁质:建议疏肝理气,调节情绪
- 特禀质:注意过敏原,增强体质
- 平和质:维持现状,均衡养生
### 3. 用药建议原则
- 优先推荐非处方中成药或食疗方案
- 结合用户用药历史,避免重复或冲突
- 注明"建议咨询药师后使用"
- 有过敏史时特别提醒
### 4. 安全原则
- 不推荐处方药
- 不做疾病诊断
- 症状严重时直接建议就医
- 涉及儿童、孕妇、老人时更加谨慎
### 5. 产品推荐原则
当回答涉及调养建议时,根据以下规则推荐保健品:
- 根据用户体质匹配相关产品
- 根据症状关键词匹配产品
- 最多推荐2个产品
- 保健品不能替代药物治疗,仅作日常调养参考
- 必须包含商城链接
## 可推荐产品
{{product_list}}
## 回答格式
【情况分析】一句话概括
【建议】
1. 具体建议1
2. 具体建议2
【用药参考】(如适用)
- 药品名称:用法用量(建议咨询药师)
【推荐调养产品】(根据体质/症状匹配,非必须)
- 产品名称 ¥价格 [点击购买](商城链接)
【提醒】注意事项或就医建议
4.3.2 动态变量说明
| 变量 | 说明 | 数据来源 |
|---|---|---|
{{user_profile}} |
用户基本信息(性别、年龄、BMI) | HealthProfile 表 |
{{constitution_info}} |
体质类型和特征描述 | ConstitutionAssessment 表 |
{{medication_history}} |
用药历史记录 | MedicalHistory 表 |
{{purchase_history}} |
保健品购买历史(商城同步) | PurchaseHistory 表 |
{{product_list}} |
可推荐产品列表(按体质筛选) | Product 表 |
4.3.3 对话历史管理
- 每次发送给 AI 的历史消息数量限制为
max_history_messages(默认10条) - 超出限制时,保留最近的消息
- 用户消息和 AI 回复均持久化存储到数据库
4.4 健康档案模块
- 基础健康信息(年龄、性别、身高、体重、血型、BMI)
- 体质辨识结果(支持重新测评)
- 体质变化追踪(定期重测对比)
- 既往病史记录
- 过敏史记录
- 用药记录
- 体检报告上传
4.5 系统功能
- 消息通知
- 体质重测提醒(建议每 3-6 个月重测)
- 反馈建议
- 使用帮助
- 隐私政策
五、数据模型设计
erDiagram
User ||--o{ Conversation : has
User ||--o| HealthProfile : has
User ||--o{ ConstitutionAssessment : takes
User ||--o{ PurchaseHistory : has
Conversation ||--|{ Message : contains
HealthProfile ||--o{ MedicalHistory : has
HealthProfile ||--o{ AllergyRecord : has
HealthProfile ||--o{ FamilyHistory : has
ConstitutionAssessment ||--|{ AssessmentAnswer : contains
User {
int id PK
string phone
string email
string password_hash
string nickname
string avatar
boolean survey_completed
datetime created_at
}
HealthProfile {
int id PK
int user_id FK
string name
date birth_date
string gender
float height
float weight
float bmi
string blood_type
string occupation
string marital_status
string region
}
LifestyleInfo {
int id PK
int user_id FK
time sleep_time
time wake_time
string sleep_quality
string meal_regularity
string diet_preference
int daily_water_ml
string exercise_frequency
string exercise_type
int exercise_duration_min
boolean is_smoker
string alcohol_frequency
}
ConstitutionAssessment {
int id PK
int user_id FK
datetime assessed_at
json scores
string primary_constitution
json secondary_constitutions
json recommendations
}
AssessmentAnswer {
int id PK
int assessment_id FK
int question_id
int score
}
MedicalHistory {
int id PK
int health_profile_id FK
string disease_name
string disease_type
date diagnosed_date
string status
text notes
}
FamilyHistory {
int id PK
int health_profile_id FK
string relation
string disease_name
text notes
}
AllergyRecord {
int id PK
int health_profile_id FK
string allergy_type
string allergen
string severity
text reaction_desc
}
Conversation {
int id PK
int user_id FK
string title
datetime created_at
datetime updated_at
}
Message {
int id PK
int conversation_id FK
string role
text content
datetime created_at
}
PurchaseHistory {
int id PK
int user_id FK
string order_no
int product_id
string product_name
datetime purchased_at
string source
}
购买历史表(PurchaseHistory)
由保健品商城同步,用于AI问诊时参考用户已购买的保健品
| 字段 | 类型 | 说明 |
|---|---|---|
| id | int | 记录 ID |
| user_id | int | 用户 ID |
| order_no | string(50) | 商城订单号 |
| product_id | int | 产品 ID |
| product_name | string(100) | 产品名称 |
| purchased_at | datetime | 购买时间 |
| source | string(20) | 来源(mall=保健品商城) |
体质问卷题目表(QuestionBank)
| 字段 | 类型 | 说明 |
|---|---|---|
| id | int | 题目 ID |
| constitution_type | string | 所属体质类型 |
| question_text | string | 题目内容 |
| options | json | 选项(从不/很少/有时/经常/总是,对应 1-5 分) |
| order_num | int | 显示顺序 |
保健品商城关联表
用于 AI 问诊时推荐相关保健品,链接到外部商城系统
保健品表(Product)
| 字段 | 类型 | 说明 |
|---|---|---|
| id | int | 产品 ID |
| name | string(100) | 产品名称 |
| category | string(50) | 分类 |
| description | text | 产品描述 |
| efficacy | text | 功效说明 |
| suitable | text | 适用人群/体质 |
| price | decimal(10,2) | 价格 |
| image_url | string(255) | 产品图片 |
| mall_url | string(255) | 商城链接 |
| is_active | boolean | 是否上架 |
体质-产品关联表(ConstitutionProduct)
| 字段 | 类型 | 说明 |
|---|---|---|
| id | int | 关联 ID |
| constitution_type | string(20) | 体质类型 |
| product_id | int | 产品 ID |
| priority | int | 推荐优先级 |
| reason | string(200) | 推荐理由 |
症状-产品关联表(SymptomProduct)
| 字段 | 类型 | 说明 |
|---|---|---|
| id | int | 关联 ID |
| keyword | string(50) | 症状关键词 |
| product_id | int | 产品 ID |
| priority | int | 推荐优先级 |
产品分类说明
| 分类 | 适用体质/问题 | 代表产品 |
|---|---|---|
| 补气类 | 气虚质 | 黄芪精、人参蜂王浆、西洋参 |
| 温阳类 | 阳虚质 | 鹿茸胶囊、桂圆红枣茶 |
| 滋阴类 | 阴虚质 | 枸杞原浆、燕窝、石斛 |
| 祛湿类 | 痰湿质、湿热质 | 红豆薏米粉、茯苓糕、祛湿茶 |
| 活血类 | 血瘀质 | 三七粉、丹参片 |
| 理气类 | 气郁质 | 玫瑰花茶、陈皮普洱茶 |
| 抗敏类 | 特禀质 | 益生菌、蜂胶 |
| 心脑血管类 | 高血压、高血脂 | 深海鱼油、纳豆激酶、卵磷脂 |
| 骨关节类 | 骨质疏松、关节痛 | 氨糖软骨素、钙片、骨胶原 |
| 血糖调节类 | 血糖偏高 | 苦瓜素、桑叶茶 |
| 助眠安神类 | 失眠 | 褪黑素、酸枣仁膏 |
| 健脑益智类 | 记忆力减退 | 银杏叶片、DHA |
| 润肠通便类 | 便秘 | 膳食纤维、酵素 |
| 护眼明目类 | 视力下降 | 叶黄素、蓝莓提取物 |
| 增强免疫类 | 免疫力低 | 灵芝孢子粉、蛋白粉 |
六、API 接口设计
认证接口
POST /api/auth/register- 用户注册POST /api/auth/login- 用户登录POST /api/auth/refresh- 刷新 Token
用户接口
GET /api/user/profile- 获取用户信息PUT /api/user/profile- 更新用户信息GET /api/user/health-profile- 获取健康档案PUT /api/user/health-profile- 更新健康档案GET /api/user/lifestyle- 获取生活习惯信息PUT /api/user/lifestyle- 更新生活习惯信息
健康调查接口(新用户必填)
GET /api/survey/status- 获取调查完成状态POST /api/survey/basic-info- 提交基础信息POST /api/survey/lifestyle- 提交生活习惯POST /api/survey/medical-history- 提交病史信息POST /api/survey/family-history- 提交家族病史POST /api/survey/allergy- 提交过敏信息
体质辨识接口
GET /api/constitution/questions- 获取体质问卷题目POST /api/constitution/submit- 提交问卷答案并计算结果GET /api/constitution/result- 获取最新体质辨识结果GET /api/constitution/history- 获取体质测评历史(用于追踪变化)GET /api/constitution/recommendations- 获取体质调养建议
对话接口
GET /api/conversations- 获取对话列表POST /api/conversations- 创建新对话GET /api/conversations/{id}- 获取对话详情DELETE /api/conversations/{id}- 删除对话POST /api/conversations/{id}/messages- 发送消息(流式响应,AI 会结合体质信息回答)
产品接口(保健品商城关联)
GET /api/products- 获取产品列表(支持分类筛选)GET /api/products/{id}- 获取产品详情GET /api/products/recommend- 根据用户体质获取推荐产品GET /api/products/search?keyword=xxx- 根据症状关键词搜索产品
商城数据同步接口
POST /api/sync/purchase- 接收商城购买记录(用于AI问诊参考)
七、与保健品商城的集成
7.1 接收商城跳转
商城用户点击"AI咨询"按钮后跳转到本系统,需处理以下场景:
| 跳转参数 | 处理逻辑 |
|---|---|
source=mall |
标识来源为商城 |
product_id |
自动创建对话并询问该产品是否适合用户 |
product_name |
产品名称,用于生成问题 |
前端处理逻辑:
// Web: views/Chat.vue
// APP: screens/Chat.tsx
onMounted(() => {
const query = route.query
if (query.source === 'mall' && query.product_id) {
// 从商城跳转,自动发起产品咨询
const productName = query.product_name || '该产品'
const autoMessage = `我想了解【${productName}】这款保健品是否适合我的体质?`
// 自动发送消息
handleSendMessage(autoMessage)
}
})
7.2 跳转到商城
在AI对话回答和体质结果页提供商城跳转入口:
// utils/mall.ts
const MALL_BASE_URL = import.meta.env.VITE_MALL_URL || 'http://localhost:5174'
// 跳转到商城产品详情
export function jumpToMallProduct(productId: number) {
window.location.href = `${MALL_BASE_URL}/product/${productId}?source=health-ai`
}
// 跳转到商城体质推荐列表
export function jumpToMallRecommend(constitutionType: string) {
window.location.href = `${MALL_BASE_URL}/recommend?constitution=${constitutionType}&source=health-ai`
}
7.3 购买记录同步
接收商城同步的购买记录,用于AI问诊时参考用户已购买的保健品:
// POST /api/sync/purchase
type PurchaseSyncRequest struct {
UserID uint `json:"user_id"`
OrderNo string `json:"order_no"`
Products []struct {
ID uint `json:"id"`
Name string `json:"name"`
} `json:"products"`
CreatedAt time.Time `json:"created_at"`
}
func HandlePurchaseSync(c *gin.Context) {
// 验证同步密钥
// 存储到用户购买历史表
// AI问诊时可获取:"用户近期购买了:氨糖软骨素、深海鱼油"
}
八、项目目录结构
healthApps/
├── web/ # Web前端 (Vue 3)
│ ├── src/
│ │ ├── api/ # API请求
│ │ ├── components/ # 公共组件
│ │ ├── views/ # 页面
│ │ ├── stores/ # Pinia状态管理
│ │ ├── router/ # 路由配置
│ │ └── utils/ # 工具函数
│ └── package.json
│
├── app/ # 移动端 (React Native)
│ ├── src/
│ │ ├── api/ # API请求
│ │ ├── components/ # 公共组件
│ │ ├── screens/ # 页面/屏幕
│ │ ├── navigation/ # 导航配置
│ │ ├── stores/ # Zustand状态管理
│ │ ├── hooks/ # 自定义Hooks
│ │ └── utils/ # 工具函数
│ ├── android/ # Android原生代码
│ ├── ios/ # iOS原生代码
│ ├── app.json
│ └── package.json
│
├── server/ # 后端服务 (Go + Gin)
│ ├── cmd/
│ │ └── server/
│ │ └── main.go # 程序入口
│ ├── internal/
│ │ ├── api/ # API路由和Handler
│ │ │ ├── handler/ # 请求处理器
│ │ │ ├── middleware/ # 中间件
│ │ │ └── router.go # 路由配置
│ │ ├── model/ # 数据模型(GORM兼容)
│ │ ├── service/ # 业务逻辑
│ │ ├── repository/ # 数据访问层(接口+实现)
│ │ │ ├── interface.go # Repository接口定义
│ │ │ └── impl/ # 具体实现
│ │ ├── config/ # 配置管理
│ │ └── database/ # 数据库初始化(多驱动支持)
│ ├── pkg/ # 公共包
│ │ ├── jwt/ # JWT工具
│ │ ├── response/ # 统一响应
│ │ └── utils/ # 工具函数
│ ├── data/ # 数据目录
│ │ └── health.db # SQLite数据库文件
│ ├── config.yaml # 配置文件(数据库可切换)
│ ├── go.mod
│ └── go.sum
│
├── docs/ # 文档
└── design.md # 设计文档
九、安全与合规
- 数据安全:所有敏感数据加密存储,传输使用 HTTPS
- 隐私保护:符合个人信息保护法要求,用户数据不对外泄露
- 医疗免责:明确 AI 仅提供健康咨询建议,不构成医疗诊断
- 访问控制:基于 JWT 的身份认证,接口权限控制
十、UI 设计规范
参考设计稿位于
files/ui/目录
9.1 全局设计规范
配色方案
| 类型 | 色值 | 用途 |
|---|---|---|
| 主色调 | #10B981 |
导航高亮、主按钮、强调元素 |
| 主色渐变 | #10B981 → #2EC4B6 |
顶部背景、卡片装饰 |
| 辅助紫 | #8B5CF6 |
AI咨询图标、起居图标 |
| 辅助青 | #14B8A6 |
体质自测图标 |
| 辅助橙 | #F97316 |
用药情况图标 |
| 辅助粉 | #EC4899 |
情志图标 |
| 页面背景 | #F5F5F5 |
整体页面背景 |
| 卡片背景 | #FFFFFF |
内容卡片 |
| 主文字 | #1F2937 |
标题、正文 |
| 次文字 | #6B7280 |
描述、说明 |
| 提示文字 | #9CA3AF |
占位符、时间 |
圆角规范
| 元素 | 圆角值 |
|---|---|
| 大卡片 | 16px |
| 中卡片 | 12px |
| 按钮(全宽) | 24px |
| 小按钮/标签 | 8px |
| 头像 | 50% (圆形) |
| 输入框 | 24px |
阴影规范
/* 卡片阴影 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
/* 悬浮阴影 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
间距规范
| 类型 | 值 |
|---|---|
| 页面边距 | 16px |
| 卡片内边距 | 16px |
| 元素间距(小) | 8px |
| 元素间距(中) | 12px |
| 元素间距(大) | 16px |
| 区块间距 | 24px |
9.2 底部导航栏
Tab 项目: 首页、AI问答、体质分析、我的
| 状态 | 图标颜色 | 文字颜色 |
|---|---|---|
| 选中 | #10B981 |
#10B981 |
| 未选中 | #9CA3AF |
#9CA3AF |
图标:
- 首页:房屋图标
- AI问答:对话气泡图标
- 体质分析:心电图/波浪图标
- 我的:用户图标
9.3 页面设计规范
9.3.1 登录页
| 区域 | 设计要点 |
|---|---|
| 整体 | 简洁白色背景,现代扁平风格 |
| 顶部 | Logo 图标(浅蓝背景圆角框)+ "健康AI助手" + slogan |
| 表单 | "欢迎登录" 标题 + 手机号/验证码输入框(圆角12px) |
| 按钮 | 蓝色 #3B82F6 全宽圆角按钮 |
| 底部 | 用户协议和隐私政策链接 |
更新说明(v1.1): 登录页改为简洁现代的白色风格,主按钮使用蓝色,整体更加清爽简约。
9.3.2 首页
| 区域 | 设计要点 |
|---|---|
| 顶部 Header | 绿色背景 + 动态问候语 + 祝福语 |
| 体质卡片 | 白色圆角卡片(负margin悬浮),体质图标 + 体质名称 + 描述 |
| 快速功能 | 4宫格布局:AI问诊、体质测试、健康档案、用药记录 |
| 健康提示 | 黄色背景卡片,今日健康小贴士 |
| 健康资讯 | 健康知识科普信息列表卡片(新增) |
快速功能卡片:
| 功能 | 图标颜色 | 描述 |
|---|---|---|
| AI问诊 | 蓝色 #3B82F6 |
24小时智能健康问答 |
| 体质测试 | 绿色 #10B981 |
科学分析您的体质类型 |
| 健康档案 | 紫色 #8B5CF6 |
查看个人健康记录 |
| 用药记录 | 橙色 #F59E0B |
管理用药信息 |
更新说明(v1.1):
- 首页移除"推荐调养产品"区块(移至体质结果页)
- 新增"健康资讯"卡片列表,展示健康知识科普信息
9.3.3 体质分析首页
| 区域 | 设计要点 |
|---|---|
| 顶部卡片 | 绿色渐变背景,"中医体质自测"介绍文案 |
| 测试说明 | 白色卡片,3步骤说明(带序号圆圈) |
| 操作按钮 | 绿色全宽圆角按钮"开始测试" |
步骤说明:
- 回答65个问题 - 根据您的真实情况选择最符合的答案
- 获取分析报告 - 系统将为您分析体质类型并提供建议
- 个性化建议 - 根据结果提供针对性的健康建议
9.3.4 体质问卷页
| 区域 | 设计要点 |
|---|---|
| 导航栏 | 返回箭头 + "中医体质辨识自测" + 进度显示"1/65" |
| 进度条 | 绿色细条,显示答题进度 |
| 问题卡片 | 绿色"问题N"标签 + 问题文字 |
| 选项区 | 5个白色圆角按钮,纵向排列 |
| 底部提示 | 浅绿色背景提示框 |
选项文字: 从不、很少、有时、经常、总是
9.3.5 体质结果页
| 区域 | 设计要点 |
|---|---|
| 顶部 | 绿色背景 + 人体轮廓图 + 分享按钮 |
| 结果展示 | 主体质名称(大字)+ 分数徽章 + 状态描述 |
| 雷达图卡片 | 九种体质得分雷达图可视化 |
| 体质特征 | 图标 + 特征描述文字 |
| 调理建议 | 2×2 网格布局(起居、饮食、运动、情志) |
| 推荐调养产品 | 根据体质推荐的保健品列表(新增) |
调理建议卡片配色:
| 类型 | 图标背景色 |
|---|---|
| 起居 | 紫色 #EDE9FE |
| 饮食 | 青色 #CCFBF1 |
| 运动 | 紫色 #EDE9FE |
| 情志 | 粉色 #FCE7F3 |
更新说明(v1.1): 推荐调养产品从首页移至体质结果页,更符合使用场景。
9.3.6 AI问答首页
| 区域 | 设计要点 |
|---|---|
| 导航栏 | "AI问答" + 右侧"历史记录"按钮 |
| 空状态 | 对话图标 + 提示文案 + "开始对话"按钮 |
| 新建按钮 | 右下角悬浮FAB按钮 |
| 历史管理弹窗 | Modal展示历史对话列表,支持编辑/删除 |
更新说明(v1.1):
- 进入AI问答时,如有历史对话自动进入最近一次
- 标题右侧添加"历史记录"入口
- 历史弹窗支持编辑模式,可删除历史对话
- 支持新建对话
快捷问题示例:
- 我最近总是感觉疲劳怎么办?
- 如何改善睡眠质量?
- 感冒了应该注意什么?
9.3.7 AI对话详情页
| 元素 | 设计要点 |
|---|---|
| AI消息 | 左对齐,机器人图标(蓝色背景),灰色/白色气泡 |
| 用户消息 | 右对齐,用户图标(绿色背景),绿色气泡 |
| 时间显示 | 消息下方,灰色小字"08:45" |
| 输入区 | 固定底部,麦克风 + 输入框 + 发送按钮 |
9.3.8 我的页面
| 区域 | 设计要点 |
|---|---|
| 顶部 | 白色背景 + "我的"标题 |
| 用户卡片 | 头像 + 姓名 + 手机号 + 体质标签 + 编辑按钮 |
| 适老模式卡片 | 黄色背景卡片,开关控制(新增) |
| 健康管理 | 健康档案、用药记录、体质报告、对话历史 |
| 其他 | 健康商城、关于我们 |
列表项样式:
- 左侧:圆形彩色图标背景
- 中间:标题 + 描述文字
- 右侧:右箭头或数量角标
更新说明(v1.1):
- 新增"适老模式"开关卡片,放大字体和组件,方便中老年用户使用
- 新增"用药记录"管理功能,支持查看和添加用药记录
- 用药记录弹窗显示药品名称、用量、频次、日期等信息
9.4 组件设计规范
按钮
| 类型 | 样式 |
|---|---|
| 主按钮 | 背景 #10B981,文字白色,圆角 24px |
| 次按钮 | 背景白色,边框 #10B981,文字 #10B981 |
| 文字按钮 | 无背景,文字 #10B981 |
| 禁用状态 | 背景 #D1D5DB,文字 #9CA3AF |
输入框
| 状态 | 样式 |
|---|---|
| 默认 | 背景 #F3F4F6,圆角 24px,无边框 |
| 聚焦 | 背景白色,边框 #10B981 |
| 错误 | 边框 #EF4444,提示文字红色 |
卡片
| 类型 | 样式 |
|---|---|
| 功能卡片 | 白色背景,16px 圆角,8px 阴影 |
| 信息卡片 | 白色背景,12px 圆角,内边距 16px |
| 彩色卡片 | 渐变背景,16px 圆角 |
图标
| 场景 | 规范 |
|---|---|
| 功能入口 | 48px 圆形背景 + 24px 图标 |
| Tab导航 | 24px 图标 |
| 列表项 | 40px 圆形背景 + 20px 图标 |
| 操作按钮 | 24px 图标 |
9.5 适老模式设计规范(v1.1 新增)
为方便中老年用户使用,系统提供"适老模式"可一键切换。
| 元素 | 普通模式 | 适老模式 |
|---|---|---|
| 基础字号 | 14px | 17.5px (×1.25) |
| 标题字号 | 18px | 22.5px (×1.25) |
| 间距 | 12px | 14.4px (×1.2) |
| 头像大小 | 64px | 80px |
| 按钮高度 | 48px | 56px |
| 图标大小 | 24px | 30px |
实现方式:
- 使用全局状态管理(Zustand)存储适老模式开关
- 通过
getFontSize(elderMode, baseSize)函数动态计算字号 - 设置存储于 AsyncStorage,用户重启后保持设置
十、功能更新记录
v1.1 更新内容
| 功能 | 更新内容 |
|---|---|
| 登录页 | 改为简洁现代的白色风格,主按钮使用蓝色 |
| 首页 | 移除推荐产品,新增健康资讯卡片 |
| 体质结果页 | 新增推荐调养产品区块 |
| AI问答 | 进入时自动恢复历史对话,标题右侧添加历史管理入口,支持删除对话 |
| 我的页面 | 新增用药记录管理、适老模式开关 |
| 适老模式 | 全局字体和组件放大25%,方便中老年用户 |
十一、实施步骤
- 环境搭建 - 创建项目结构,配置开发环境
- 后端开发 - 实现 API 接口、数据库模型、AI 对接
- Web 前端 - 实现用户界面和交互逻辑
- App 开发 - 基于 uni-app 开发移动端
- 测试优化 - 功能测试、性能优化
- 部署上线 - 服务器部署、域名配置