一个基于 Vue 3 + TypeScript + Vite 的现代化宝宝护理记录系统，帮助家长轻松记录和管理宝宝的日常护理数据。

• 宝宝信息展示：显示当前选择的宝宝昵称、年龄、头像
• 多宝宝管理：支持家庭内多个宝宝档案的切换和管理
• 今日概览：显示今日总奶量、母乳时长、睡眠状态等关键指标
• 快速操作：一键记录喂奶、换尿布、睡眠、哭闹等日常活动
• 今日动态：实时显示今日的护理记录时间轴，支持编辑和删除记录
• AI智能助手：右下角悬浮AI助手，提供智能育儿建议和对话

• 喂奶记录：支持配方奶和母乳喂养，记录奶量和时长
• 尿布记录：记录清尿、便便、混合等类型
• 睡眠记录：记录睡眠开始和结束时间
• 哭闹记录：记录哭闹原因和安抚方式
• 记录编辑：支持修改和删除已创建的记录
• 实时更新：记录完成后自动刷新首页数据

• 可视化图表：使用 ECharts 展示护理数据趋势
• 时间范围查询：支持自定义日期范围的数据统计
• 多维度分析：配方奶量、母乳时长、睡眠时长等统计
• 趋势分析：周度趋势图表，支持线图展示
• 数据格式化：智能格式化数字显示，避免长小数

• 媒体管理：上传和管理宝宝的照片和视频
• 网格/列表视图：灵活的媒体展示方式
• 云端存储：集成 MinIO 对象存储服务
• 图片预览：支持图片缩放预览功能
• 媒体删除：支持删除不需要的媒体文件

• 多宝宝支持：一个家庭可以管理多个宝宝档案
• 宝宝档案：完整的宝宝信息管理（昵称、生日、性别、头像）
• 通知设置：个性化的护理提醒配置
• 家庭成员：邀请家庭成员加入，管理家庭权限
• 邀请系统：生成邀请码，支持家庭成员加入
• 用户信息：个人昵称修改和资料管理

• 智能对话：基于AI的育儿建议和问题解答
• 流式响应：实时打字机效果，模拟真实对话体验
• 对话历史：保存和管理历史对话记录
• 悬浮窗口：右下角悬浮式AI助手，不影响主界面使用
• 智能时间显示：类似微信的时间分隔显示逻辑

• 图形验证码：登录注册页面集成图形验证码防机器人
• JWT认证：安全的Token认证机制
• 自动登录：支持记住登录状态
• 安全退出：完整的登出和状态清理

• 前端框架：Vue 3 + Composition API
• 开发语言：TypeScript
• 构建工具：Vite
• 状态管理：Pinia
• 路由管理：Vue Router
• UI 样式：Tailwind CSS
• 图表库：ECharts
• HTTP 客户端：Fetch API
• 实时通信：Server-Sent Events (SSE)
• 响应式设计：移动端优先的响应式布局
• 环境管理：多环境配置支持

src/
├── components/          # 通用组件
│   └── DefaultAvatar.vue    # 默认头像组件
├── layouts/            # 布局组件
│   └── MainLayout.vue           # 主布局（侧边栏+内容区）
├── router/             # 路由配置
│   └── index.ts                # 路由定义和守卫
├── services/           # API 服务
│   └── api.ts                  # API 客户端和类型定义
├── stores/             # 状态管理
│   └── user.ts                 # 用户状态管理
├── views/              # 页面组件
│   ├── Dashboard.vue           # 首页控制中心
│   ├── Login.vue               # 登录/注册页
│   ├── Timeline.vue            # 时光轴页
│   ├── Stats.vue               # 数据统计页
│   ├── Gallery.vue             # 美好时刻页
│   └── Settings.vue            # 家庭与设置页
├── widgets/            # 模态框组件
│   ├── FeedingModal.vue        # 喂奶记录模态框
│   ├── DiaperModal.vue         # 尿布记录模态框
│   ├── SleepModal.vue          # 睡眠记录模态框
│   └── CryModal.vue            # 哭闹记录模态框
├── App.vue             # 根组件
├── main.ts             # 应用入口
└── styles.css          # 全局样式

• Node.js >= 16.0.0
• npm >= 8.0.0

npm install

创建 .env.development 文件：

# 开发环境配置
VITE_API_BASE_URL=http://localhost:8080
VITE_PUBLIC_MEDIA_BASE=http://localhost:9000

创建 .env.production 文件：

# 生产环境配置
VITE_API_BASE_URL=http://192.168.5.5:30928
VITE_PUBLIC_MEDIA_BASE=https://www.binbinzhang.cn/audio/babycare-media

• VITE_API_BASE_URL：后端API服务器地址
• VITE_PUBLIC_MEDIA_BASE：媒体文件访问基础地址

npm run dev

应用将在 http://localhost:5173 启动。

# 开发环境构建
npm run build:dev

# 生产环境构建
npm run build:prod

构建文件将输出到 dist/ 目录。

# 预览开发构建
npm run preview

# 预览生产构建
npm run preview:prod

项目支持多环境构建，通过 --mode 参数指定环境：

# 指定环境构建
npm run build -- --mode production
npm run build -- --mode development

项目使用统一的 API 配置管理：

// src/services/api.ts
export const API_CONFIG = {
  BASE_URL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080',
  MEDIA_BASE: import.meta.env.VITE_PUBLIC_MEDIA_BASE || '/media'
};

应用实现了完整的路由守卫机制：

• 认证检查：自动检查用户登录状态
• 权限控制：未登录用户自动跳转到登录页
• 状态恢复：页面刷新后自动恢复用户状态

使用 Pinia 进行全局状态管理：

• 用户状态：登录信息、家庭信息
• 宝宝管理：当前选择的宝宝、家庭所有宝宝列表
• 数据同步：宝宝切换时自动重新加载相关数据

AI助手使用Server-Sent Events (SSE)实现流式对话：

// AI对话流式响应
async function startAIStreaming(input: string) {
  const response = await fetch('/api/ai/chat/stream', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    },
    body: JSON.stringify({ userInput: input })
  });
  
  // 处理SSE流式数据
  const reader = response.body?.getReader();
  // ... 流式处理逻辑
}

登录注册页面集成图形验证码防机器人：

• 自动生成：页面加载时自动获取验证码
• 错误处理：区分验证码错误和账号密码错误
• 用户体验：友好的错误提示和重试机制

• 响应式侧边栏：桌面端固定，移动端抽屉式
• 触摸友好：按钮和交互元素针对触摸操作优化
• 自适应布局：根据屏幕尺寸自动调整布局

/* 移动端优先 */
sm: 640px   /* 小屏幕 */
md: 768px   /* 中等屏幕 */
lg: 1024px  /* 大屏幕 */
xl: 1280px  /* 超大屏幕 */

• 色彩方案：温馨的粉色系主题
• 字体系统：清晰易读的中文字体
• 组件库：基于 Tailwind CSS 的自定义组件

:root {
  --primary: #FFB6C1;      /* 主色调 */
  --secondary: #FFC0CB;    /* 辅助色 */
  --accent: #FFD700;       /* 强调色 */
  --text: #333333;         /* 文字色 */
  --bg: #F8F9FA;          /* 背景色 */
}

1. 用户注册：支持手机号/邮箱注册
2. 用户登录：JWT Token 认证
3. 状态持久化：自动保存和恢复登录状态
4. 安全退出：清除所有本地状态

• 路由守卫：保护需要认证的页面
• API 认证：所有请求自动携带认证 Token
• 数据隔离：用户只能访问自己家庭的数据

• 家庭概念：一个家庭可以管理多个宝宝
• 宝宝切换：实时切换当前操作的宝宝
• 数据隔离：每个宝宝的数据完全独立

• 实时更新：宝宝切换时自动重新加载数据
• 状态管理：使用 Pinia 管理全局状态
• 缓存策略：合理的数据缓存和更新机制

• 支持格式：图片（JPG、PNG、GIF）和视频（MP4、MOV）
• 云端存储：集成 MinIO 对象存储
• URL 构建：动态构建媒体文件访问地址

• 图片加载失败：自动显示默认头像
• 网络错误：友好的错误提示和重试机制

# 生产构建
npm run build

# 构建文件输出到 dist/ 目录
# 包含：
# - index.html
# - assets/ (CSS, JS 文件)
# - 静态资源

1. 静态文件服务：将 dist/ 目录部署到 Web 服务器
2. 路由配置：配置 SPA 路由重写规则
3. 环境变量：设置生产环境的 API 地址

项目包含 Dockerfile 支持容器化部署：

# 多阶段构建
FROM node:18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build:prod

FROM nginx:alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

server {
    listen 80;
    server_name your-domain.com;
    root /usr/share/nginx/html;
    index index.html;

    # SPA 路由支持
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API 代理
    location /api/ {
        proxy_pass http://192.168.5.5:30928/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # CORS 支持
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization";
        
        # 处理预检请求
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
            add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization";
            add_header Access-Control-Max-Age 1728000;
            add_header Content-Type 'text/plain; charset=utf-8';
            add_header Content-Length 0;
            return 204;
        }
    }

    # 媒体文件代理
    location /media/ {
        proxy_pass https://www.binbinzhang.cn/audio/babycare-media/;
        proxy_set_header Host www.binbinzhang.cn;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

1. 模块导入错误

   # 清除缓存并重新安装
   rm -rf node_modules/.vite
   npm install
   

2. API 请求失败

   • 检查后端服务是否启动
   • 确认 API 地址配置正确
   • 检查网络连接和防火墙设置

3. 构建失败

   # 检查 Node.js 版本
   node --version
   
   # 重新安装依赖
   rm -rf node_modules package-lock.json
   npm install
   

4. 环境变量问题

   # 检查环境变量文件
   ls -la .env*
   
   # 确保生产环境配置正确
   cat .env.production
   

5. AI助手连接失败

   • 检查后端AI服务是否启动
   • 确认SSE流式接口是否正常
   • 检查网络连接和防火墙设置

6. 图形验证码问题

   • 确认后端验证码服务是否正常
   • 检查验证码接口返回格式
   • 验证图片显示是否正常

# 启用详细日志
npm run dev -- --debug

# 检查构建详情
npm run build -- --debug

1. 代码风格：遵循 ESLint 和 Prettier 配置
2. 提交信息：使用清晰的提交信息
3. 类型安全：充分利用 TypeScript 类型检查
4. 组件设计：保持组件的单一职责和可复用性

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 发起 Pull Request

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

如有问题或建议，请通过以下方式联系：

• 项目 Issues：GitHub Issues
• 邮箱：your-email@example.com

---

宝宝护理日记 - 让育儿记录更简单，让成长时光更珍贵 ❤️