214 lines
5.2 KiB
Markdown
214 lines
5.2 KiB
Markdown
# 情绪博物馆 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
|
|
|
|
---
|
|
|
|
**情绪博物馆** - 记录情绪，分享心情的温暖空间 ❤️
|