# 开心APP - 前端应用

基于Vue 3 + Ant Design Vue的现代化情绪陪伴应用前端。

## 技术栈

- **Vue 3** - 渐进式JavaScript框架
- **TypeScript** - 类型安全的JavaScript超集
- **Ant Design Vue** - 企业级UI组件库
- **Vite** - 下一代前端构建工具
- **Vue Router** - 官方路由管理器
- **Pinia** - 状态管理库
- **Sass** - CSS预处理器

## 功能特性

- 🤖 **智能对话** - 与AI助手"开开"实时聊天
- 📝 **情绪日记** - 记录和分享日常心情
- 👤 **个人展板** - 自定义个人信息展示
- 📊 **话题追踪** - 关注和管理感兴趣的话题
- 📈 **数据可视化** - 心情统计图表
- ⚙️ **用户管理** - 登录、注册、设置

## 项目结构

```
src/
├── assets/          # 静态资源
│   ├── images/      # 图片资源
│   └── styles/      # 样式文件
├── components/      # 公共组件
│   ├── common/      # 通用组件
│   ├── layout/      # 布局组件
│   └── ui/          # UI组件
├── views/           # 页面组件
│   ├── Home/        # 首页
│   ├── Chat/        # 聊天页面
│   ├── Diary/       # 日记页面
│   ├── Dashboard/   # 个人展板
│   └── ...
├── router/          # 路由配置
├── stores/          # Pinia状态管理
├── services/        # API服务
├── utils/           # 工具函数
├── types/           # TypeScript类型定义
├── App.vue          # 根组件
└── main.ts          # 应用入口
```

## 快速开始

### 环境要求

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

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

应用将在 http://localhost:3000 启动

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

### 代码检查

```bash
npm run lint
```

### 代码格式化

```bash
npm run format
```

### 类型检查

```bash
npm run type-check
```

## 开发指南

### 项目启动

1. 克隆项目到本地
2. 安装依赖：`npm install`
3. 启动开发服务器：`npm run dev`
4. 在浏览器中打开 http://localhost:3000

### 开发流程

1. 创建新分支进行开发
2. 编写代码并确保通过所有检查
3. 提交代码并创建Pull Request
4. 代码审查通过后合并到主分支

### 代码规范

- 使用TypeScript进行类型安全开发
- 遵循ESLint和Prettier配置的代码规范
- 组件命名使用PascalCase
- 文件命名使用kebab-case
- 变量和函数使用camelCase

## 环境配置

### 开发环境

复制 `.env` 文件并根据需要修改配置：

```bash
cp .env.example .env
```

### 生产环境

配置 `.env.production` 文件中的生产环境变量。

## 部署

### 传统部署

#### 构建

```bash
npm run build
```

构建产物将生成在 `dist` 目录中。

#### 部署到服务器

将 `dist` 目录中的文件部署到Web服务器即可。

#### 使用部署脚本

```bash
# 开发环境
./deploy.sh dev

# 测试环境
./deploy.sh test

# 生产环境
./deploy.sh prod
```

### Docker部署

#### 构建Docker镜像

```bash
docker build -t emotion-museum-web .
```

#### 运行容器

```bash
docker run -d -p 3000:80 --name emotion-museum-web emotion-museum-web
```

#### 使用Docker Compose

```bash
# 生产模式
docker-compose up -d

# 开发模式
docker-compose --profile dev up -d
```

### Nginx配置示例

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://backend-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 开发规范

### 组件命名

- 组件名使用PascalCase
- 文件名使用kebab-case
- 变量和函数使用camelCase

### 代码风格

项目使用ESLint和Prettier进行代码规范检查和格式化。

### Git提交规范

使用约定式提交格式：

```
feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建过程或辅助工具的变动
```

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 许可证

MIT License

## 联系方式

如有问题或建议，请联系开发团队。