开心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
安装依赖
npm install
开发模式
npm run dev
应用将在 http://localhost:3000 启动
构建生产版本
npm run build
预览生产版本
npm run preview
代码检查
npm run lint
代码格式化
npm run format
类型检查
npm run type-check
开发指南
项目启动
- 克隆项目到本地
- 安装依赖：
npm install - 启动开发服务器：
npm run dev - 在浏览器中打开 http://localhost:3000
开发流程
- 创建新分支进行开发
- 编写代码并确保通过所有检查
- 提交代码并创建Pull Request
- 代码审查通过后合并到主分支
代码规范
- 使用TypeScript进行类型安全开发
- 遵循ESLint和Prettier配置的代码规范
- 组件命名使用PascalCase
- 文件命名使用kebab-case
- 变量和函数使用camelCase
环境配置
开发环境
复制 .env 文件并根据需要修改配置：
cp .env.example .env
生产环境
配置 .env.production 文件中的生产环境变量。
部署
传统部署
构建
npm run build
构建产物将生成在 dist 目录中。
部署到服务器
将 dist 目录中的文件部署到Web服务器即可。
使用部署脚本
# 开发环境
./deploy.sh dev
# 测试环境
./deploy.sh test
# 生产环境
./deploy.sh prod
Docker部署
构建Docker镜像
docker build -t emotion-museum-web .
运行容器
docker run -d -p 3000:80 --name emotion-museum-web emotion-museum-web
使用Docker Compose
# 生产模式
docker-compose up -d
# 开发模式
docker-compose --profile dev up -d
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
联系方式
如有问题或建议，请联系开发团队。