feat: 完成Nacos配置优化和WebSocket集成
主要更新: 1. 统一所有微服务端口配置(19000-19008) 2. 为所有服务创建本地/测试/生产三套环境配置 3. 配置Nacos认证密码(本地:Peanut2817*#, 测试/生产:EmotionMuseum2025) 4. 优化网关路由配置,支持负载均衡和WebSocket 5. 新增emotion-websocket模块,支持实时聊天 6. 前端集成WebSocket,替代HTTP轮询 7. 添加配置验证和管理工具脚本 技术特性: - 完整的环境隔离和服务发现 - WebSocket实时通信支持 - 负载均衡路由配置 - 跨域和安全配置 - 自动重连和心跳检测
This commit is contained in:
@@ -0,0 +1,252 @@
|
||||
# 开心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
|
||||
|
||||
## 联系方式
|
||||
|
||||
如有问题或建议，请联系开发团队。
|
||||
Reference in New Issue
Block a user