5.2 KiB
5.2 KiB
情绪博物馆 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
安装依赖
npm install
开发环境
npm run dev
构建生产版本
npm run build
预览生产版本
npm run preview
🧪 测试
运行单元测试
npm run test
运行E2E测试
npm run test:e2e
测试覆盖率
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压缩: 减少传输大小
🤝 贡献指南
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开 Pull Request
📄 许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
📞 联系我们
- 项目地址: GitHub
- 问题反馈: Issues
- 邮箱: contact@emotion-museum.com
情绪博物馆 - 记录情绪，分享心情的温暖空间 ❤️