宝宝护理日记 - 前端应用

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          # 全局样式

npm install

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

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

npm run dev

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

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

# 预览开发构建
npm run preview

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

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

// 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'
};

// 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  /* 超大屏幕 */

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

# 生产构建
npm run build

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

# 多阶段构建
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";
    }
}

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

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