# 情绪博物馆 Web 端

基于 Vue 3 + TypeScript + Vite 的现代化前端应用，为用户提供情绪记录和心理健康服务。

## ✨ 特性

- 🚀 **现代化技术栈**: Vue 3.4.21 + TypeScript 5.4.2 + Vite 5.1.6
- 🎨 **优雅的UI**: Element Plus 2.6.1 + Tailwind CSS 3.4.1
- 📱 **响应式设计**: 支持桌面端和移动端
- 🔐 **完整的认证**: JWT Token + 自动刷新
- 🌐 **实时通信**: 原生WebSocket + STOMP协议
- 📊 **数据可视化**: ECharts 5.5.0 图表展示
- 🌍 **国际化**: Vue I18n 多语言支持
- 📦 **PWA支持**: 离线访问和桌面安装
- 🧪 **完整测试**: Vitest + Cypress 测试覆盖

## 🏗️ 项目结构

```
web-new/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API接口定义
│   ├── assets/            # 资源文件
│   ├── components/        # 通用组件
│   ├── composables/       # 组合式API
│   ├── config/            # 配置文件
│   ├── i18n/              # 国际化
│   ├── layouts/           # 布局组件
│   ├── plugins/           # 插件
│   ├── router/            # 路由配置
│   ├── stores/            # 状态管理
│   ├── types/             # 类型定义
│   ├── utils/             # 工具函数
│   ├── views/             # 页面组件
│   ├── App.vue            # 根组件
│   └── main.ts            # 入口文件
├── tests/                 # 测试文件
├── .env                   # 环境变量
├── package.json           # 依赖配置
├── vite.config.ts         # Vite配置
└── README.md              # 项目文档
```

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 9.0.0

### 安装依赖

```bash
npm install
```

### 开发环境

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 🧪 测试

### 运行单元测试

```bash
npm run test
```

### 运行E2E测试

```bash
npm run test:e2e
```

### 测试覆盖率

```bash
npm run test:coverage
```

## 📦 核心依赖

### 框架和工具

- **Vue 3.4.21**: 渐进式JavaScript框架
- **TypeScript 5.4.2**: 类型安全的JavaScript
- **Vite 5.1.6**: 下一代前端构建工具
- **Vue Router 4.3.0**: 官方路由管理器
- **Pinia 2.1.7**: 官方状态管理库

### UI和样式

- **Element Plus 2.6.1**: Vue 3 UI组件库
- **Tailwind CSS 3.4.1**: 实用优先的CSS框架
- **@element-plus/icons-vue**: Element Plus图标

### 网络和通信

- **Axios 1.6.8**: HTTP客户端
- **@stomp/stompjs 7.1.1**: WebSocket STOMP协议

### 数据可视化

- **ECharts 5.5.0**: 强大的图表库
- **vue-echarts 6.7.3**: Vue ECharts组件

### 工具库

- **@vueuse/core 10.9.0**: Vue组合式工具集
- **Day.js 1.11.10**: 轻量级日期库
- **Lodash-es 4.17.21**: 实用工具库

## 🔧 开发工具

### 代码质量

- **ESLint 8.57.0**: 代码检查
- **Prettier 3.2.5**: 代码格式化
- **Husky 9.0.11**: Git钩子
- **lint-staged 15.2.2**: 暂存文件检查

### 自动化

- **unplugin-auto-import**: 自动导入API
- **unplugin-vue-components**: 自动导入组件
- **vite-plugin-pwa**: PWA支持

### 测试

- **Vitest 1.4.0**: 单元测试框架
- **@vue/test-utils 2.4.5**: Vue组件测试工具
- **Cypress 13.7.1**: E2E测试框架

## 🌍 环境配置

项目支持多环境配置：

- **local**: 本地开发环境
- **dev**: 开发服务器环境
- **test**: 测试环境
- **prod**: 生产环境

通过 `.env` 文件配置不同环境的参数。

## 📱 功能特性

### 核心功能

- **AI智能对话**: 与AI助手进行情绪交流
- **情绪日记**: 记录和分析日常情绪
- **数据可视化**: 情绪趋势和统计分析
- **个人仪表盘**: 全面的个人数据展示

### 技术特性

- **响应式设计**: 适配各种设备尺寸
- **暗色主题**: 支持明暗主题切换
- **国际化**: 中英文语言切换
- **PWA**: 支持离线访问和桌面安装
- **实时通信**: WebSocket实时消息推送

## 🔐 安全特性

- **JWT认证**: 安全的用户认证机制
- **Token刷新**: 自动Token刷新和过期处理
- **权限控制**: 基于角色的访问控制
- **路由守卫**: 页面访问权限验证
- **XSS防护**: 内容安全策略

## 📈 性能优化

- **代码分割**: 按需加载减少初始包大小
- **Tree Shaking**: 移除未使用的代码
- **图片优化**: 支持WebP格式和懒加载
- **缓存策略**: 合理的缓存配置
- **Gzip压缩**: 减少传输大小

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

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

## 📞 联系我们

- 项目地址: [GitHub](https://github.com/emotion-museum/web)
- 问题反馈: [Issues](https://github.com/emotion-museum/web/issues)
- 邮箱: contact@emotion-museum.com

---

**情绪博物馆** - 记录情绪，分享心情的温暖空间 ❤️