健康管理系统前端技术栈选择与架构设计

1. 项目技术栈1.1 核心技术栈技术版本用途Vue3.4.0核心框架采用 Composition APIVite5.0.0构建工具提供快速的开发体验Vue Router4.2.0前端路由管理Axios1.6.0HTTP 客户端处理 API 请求marked11.0.0Markdown 渲染引擎JavaScriptES2020开发语言npm10.0.0包管理工具2. 项目架构设计2.1 整体架构健康管理系统前端采用经典的分层架构同时融入了现代 Vue 3 的最佳实践视图层 (Views): 页面级组件负责页面整体布局组件层 (Components): 可复用的 UI 组件分为通用组件和功能模块组件服务层 (Services): 封装 API 调用统一处理请求和响应状态层 (Stores): Pinia 状态管理管理全局状态工具层 (Utils): 工具函数和常量定义2.2 项目结构项目采用标准的 Vue 3 项目结构遵循 Vite 的最佳实践frontend/ ├── public/ # 静态资源 │ └── vite.svg ├── src/ │ ├── assets/ # 资源文件 │ │ └── vue.svg │ ├── components/ # 组件层 │ │ ├── common/ # 通用组件 │ │ │ ├── Header.vue │ │ │ ├── Sidebar.vue │ │ │ ├── Login.vue │ │ │ ├── Layout.vue │ │ │ ├── ImageCropper.vue │ │ │ ├── ImageViewer.vue │ │ │ ├── VirtualList.vue │ │ │ └── ... │ │ └── modules/ # 功能模块组件 │ │ ├── ai/ # AI 助手模块 │ │ ├── analysis/ # 健康分析模块 │ │ ├── exercise-record/ # 运动记录模块 │ │ ├── food-record/ # 饮食记录模块 │ │ ├── mood-record/ # 心情记录模块 │ │ ├── sleep-record/ # 睡眠记录模块 │ │ └── weight-record/ # 体重记录模块 │ ├── composables/ # 组合式函数 │ ├── directives/ # 自定义指令 │ ├── router/ # 路由配置 │ ├── services/ # 服务层 │ ├── stores/ # Pinia 状态管理 │ ├── styles/ # 样式系统 │ ├── types/ # TypeScript 类型 │ ├── utils/ # 工具函数 │ ├── views/ # 页面视图 │ ├── App.vue │ └── main.js ├── index.html ├── package.json ├── vite.config.js └── jsconfig.json3. 核心模块详解3.1 AI 助手模块 (components/modules/ai/)AI 助手是项目的核心功能模块采用完整的组件化设计组件结构:ai/ ├── AiAssistant.vue └── AiAssistant.cssAiAssistant.vue 完成的工作:实现多性格 AI 对话功能支持 Markdown 消息渲染和代码高亮管理聊天历史记录增删改查、标题编辑提供 AI 助手设置面板名称、头像、性格适配日间/夜间主题本地缓存与后端数据库同步主要功能模块:聊天功能: 发送消息、接收 AI 回复、打字机效果历史记录: 查看历史对话列表、加载历史对话、删除历史记录标题编辑: 点击标题进入编辑模式支持保存和取消设置面板: 修改 AI 名称、上传自定义头像、切换性格数据持久化: 自动保存对话到数据库支持断点续聊3.2 健康分析模块 (components/modules/analysis/)健康分析模块负责展示 AI 对用户的健康数据分析结果组件结构:analysis/ ├── AiAnalysis.vue # 健康分析主组件 └── AiAnalysisRecords.vue # 分析记录列表组件AiAnalysis.vue 完成的工作:展示 AI 生成的健康分析报告支持多种健康维度分析饮食、运动、睡眠、心情、体重可视化展示分析结果图表、评分、建议支持重新生成分析适配日间/夜间主题AiAnalysisRecords.vue 完成的工作:展示历史分析记录列表支持查看历史分析详情支持删除历史分析记录分页加载更多记录3.3 饮食记录模块 (components/modules/food-record/)饮食记录模块用于管理用户的日常饮食记录组件结构:food-record/ ├── FoodForm.vue # 饮食记录表单组件 └── FoodRecordList.vue # 饮食记录列表组件FoodForm.vue 完成的工作:提供饮食记录录入表单支持食物名称、热量、营养成分输入支持餐次选择早餐/午餐/晚餐/加餐表单验证和数据提交支持编辑已有记录FoodRecordList.vue 完成的工作:展示饮食记录列表支持按日期筛选统计每日总热量摄入支持编辑和删除记录分页加载3.4 运动记录模块 (components/modules/exercise-record/)运动记录模块用于管理用户的运动锻炼记录组件结构:exercise-record/ ├── ExerciseForm.vue # 运动记录表单组件 └── ExerciseRecordList.vue # 运动记录列表组件ExerciseForm.vue 完成的工作:提供运动记录录入表单支持运动类型选择跑步、游泳、健身等记录运动时长、消耗热量、运动强度支持添加运动备注表单验证和数据提交ExerciseRecordList.vue 完成的工作:展示运动记录列表按日期分组展示统计周/月运动总时长和消耗热量支持编辑和删除记录3.5 睡眠记录模块 (components/modules/sleep-record/)睡眠记录模块用于管理用户的睡眠质量记录组件结构:sleep-record/ ├── SleepForm.vue # 睡眠记录表单组件 └── SleepRecordList.vue # 睡眠记录列表组件SleepForm.vue 完成的工作:提供睡眠记录录入表单记录入睡时间、起床时间、睡眠时长睡眠质量评分1-5星支持添加睡眠备注自动计算睡眠时长SleepRecordList.vue 完成的工作:展示睡眠记录列表可视化展示睡眠趋势图表统计平均睡眠时长和质量支持编辑和删除记录3.6 心情记录模块 (components/modules/mood-record/)心情记录模块用于记录和管理用户的心情状态组件结构:mood-record/ ├── MoodForm.vue # 心情记录表单组件 └── MoodRecordList.vue # 心情记录列表组件MoodForm.vue 完成的工作:提供心情记录录入界面心情评分选择1-5级表情支持添加心情标签开心、焦虑、平静等支持添加心情日记内容表单验证和数据提交MoodRecordList.vue 完成的工作:展示心情记录列表心情趋势图表展示按心情类型统计分布支持编辑和删除记录3.7 体重记录模块 (components/modules/weight-record/)体重记录模块用于追踪用户的体重变化组件结构:weight-record/ ├── WeightForm.vue # 体重记录表单组件 └── WeightRecordList.vue # 体重记录列表组件WeightForm.vue 完成的工作:提供体重记录录入表单记录体重、体脂率、BMI支持添加测量备注表单验证和数据提交WeightRecordList.vue 完成的工作:展示体重记录列表体重变化趋势图表计算体重变化量较上次/较上周/较上月支持编辑和删除记录3.8 服务层 (services/)服务层统一封装 API 调用采用模块化设计api.js:配置 Axios 实例设置请求/响应拦截器统一处理 Token 和错误基础请求方法封装healthService.js:封装 AI 助手相关 API聊天、历史记录管理封装 AI 助手设置 API获取/保存设置、头像上传封装健康记录相关 API获取分析、记录查询封装各健康模块的数据统计 APIuserService.js:封装用户认证 API注册、登录、登出封装用户信息 API获取、更新用户信息封装账户管理 API修改密码、上传头像、注销账户3.9 状态管理 (stores/)采用 Pinia 进行全局状态管理userStore.js:管理用户登录状态存储用户基本信息处理用户认证相关操作用户偏好设置持久化healthStore.js:管理各类健康记录数据健康数据统计信息AI 分析结果缓存数据同步状态管理themeStore.js:管理应用主题状态日间/夜间主题切换逻辑主题偏好持久化系统主题偏好检测3.10 组合式函数 (composables/)封装可复用的业务逻辑useAuth.js:封装用户认证逻辑登录状态检查权限验证Token 管理useHealth.js:封装健康数据获取逻辑各类健康记录的 CRUD 操作健康数据统计计算数据缓存策略useTheme.js:封装主题切换逻辑主题变量管理动态样式切换主题持久化3.11 样式系统 (styles/)variables.css:定义 CSS 变量主题色、背景色、文字色、边框色支持主题切换的基础变量统一的颜色规范间距和尺寸变量themes/dark.css:定义夜间模式样式覆盖日间模式变量为深色主题为 AI 助手等组件提供夜间模式适配确保夜间模式下的可读性其他样式文件:main.css: 全局样式入口导入所有样式文件reset.css: 浏览器默认样式重置components/: 各组件的独立样式layouts/: 布局相关样式pages/: 页面级样式utils/: 工具类样式文本、间距、颜色等3.12 工具层 (utils/)apiPaths.js:集中管理所有 API 路径常量按模块分类user、aiAssistant、health 等便于统一修改和维护避免硬编码 URLerrorHandler.js:统一处理 API 错误401 错误自动跳转登录页其他错误显示友好提示错误日志记录theme.js:主题切换工具函数localStorage 主题持久化系统主题偏好检测动态修改 CSS 变量commonUtils.js:通用工具函数日期格式化、数据验证等防抖节流函数本地存储封装数据转换工具各模块 API 文件(foodRecordApi.js、moodRecordApi.js 等):封装各健康记录模块的 API 调用与后端 Controller 一一对应统一处理请求参数和响应数据3.13 视图层 (views/)视图层负责页面级组件每个页面对应一个功能模块Dashboard.vue:系统首页仪表盘展示健康数据概览快捷操作入口数据可视化图表各健康记录页面(FoodRecord.vue、MoodRecord.vue 等):整合对应模块的表单和列表组件页面级布局页面状态管理路由参数处理Analysis.vue:健康分析页面整合 AiAnalysis 组件分析条件选择分析结果展示Profile.vue:用户个人资料页面用户信息展示和编辑头像上传账户设置入口Settings.vue:系统设置页面主题切换通知设置账户安全设置