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:
-293
@@ -1,293 +0,0 @@
|
||||
# 情绪博物馆 Web 前端
|
||||
|
||||
一个基于 Vue 3 + Ant Design Vue 的现代化情绪分析和AI对话前端应用。
|
||||
|
||||
## ✨ 特性
|
||||
|
||||
- 🎨 **现代化UI设计** - 采用渐变色彩和玻璃态效果，提供优雅的视觉体验
|
||||
- 🤖 **AI智能对话** - 与AI助手进行自然流畅的对话交流
|
||||
- 📊 **情绪分析** - 实时分析用户情绪状态，提供专业的心理健康评估
|
||||
- 📱 **响应式设计** - 完美适配桌面端和移动端设备
|
||||
- 🔄 **实时交互** - 支持实时消息推送和状态更新
|
||||
- 📈 **数据可视化** - 情绪趋势图表和统计分析
|
||||
- 🎯 **用户体验** - 流畅的动画效果和交互反馈
|
||||
|
||||
## 🛠️ 技术栈
|
||||
|
||||
- **框架**: Vue 3 (Composition API)
|
||||
- **UI库**: Ant Design Vue 4.x
|
||||
- **路由**: Vue Router 4
|
||||
- **状态管理**: Pinia
|
||||
- **构建工具**: Vite
|
||||
- **样式**: SCSS
|
||||
- **HTTP客户端**: Axios
|
||||
- **时间处理**: Day.js
|
||||
- **图标**: Ant Design Icons
|
||||
|
||||
## 📦 项目结构
|
||||
|
||||
```
|
||||
web/
|
||||
├── public/ # 静态资源
|
||||
├── src/
|
||||
│ ├── api/ # API接口
|
||||
│ │ ├── request.js # 请求封装
|
||||
│ │ └── chat.js # 聊天相关API
|
||||
│ ├── components/ # 公共组件
|
||||
│ │ ├── EmotionAnalysis.vue # 情绪分析组件
|
||||
│ │ ├── HistoryPanel.vue # 历史记录面板
|
||||
│ │ ├── ConversationDetail.vue # 对话详情
|
||||
│ │ └── EmotionTrends.vue # 情绪趋势图表
|
||||
│ ├── router/ # 路由配置
|
||||
│ ├── stores/ # 状态管理
|
||||
│ │ ├── user.js # 用户状态
|
||||
│ │ └── chat.js # 聊天状态
|
||||
│ ├── styles/ # 全局样式
|
||||
│ ├── utils/ # 工具函数
|
||||
│ ├── views/ # 页面组件
|
||||
│ │ ├── Home.vue # 首页
|
||||
│ │ ├── Chat.vue # 聊天页面
|
||||
│ │ ├── History.vue # 历史记录页面
|
||||
│ │ └── Analysis.vue # 情绪分析页面
|
||||
│ ├── App.vue # 根组件
|
||||
│ └── main.js # 入口文件
|
||||
├── index.html # HTML模板
|
||||
├── package.json # 依赖配置
|
||||
├── vite.config.js # Vite配置
|
||||
└── README.md # 项目说明
|
||||
```
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 环境要求
|
||||
|
||||
- Node.js >= 16.0.0
|
||||
- npm >= 8.0.0 或 yarn >= 1.22.0
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```bash
|
||||
# 使用 npm
|
||||
npm install
|
||||
|
||||
# 或使用 yarn
|
||||
yarn install
|
||||
```
|
||||
|
||||
### 开发环境
|
||||
|
||||
```bash
|
||||
# 启动开发服务器
|
||||
npm run dev
|
||||
|
||||
# 或
|
||||
yarn dev
|
||||
```
|
||||
|
||||
访问 http://localhost:3000 查看应用
|
||||
|
||||
### 生产构建
|
||||
|
||||
```bash
|
||||
# 构建生产版本
|
||||
npm run build
|
||||
|
||||
# 或
|
||||
yarn build
|
||||
```
|
||||
|
||||
### 预览生产版本
|
||||
|
||||
```bash
|
||||
# 预览构建结果
|
||||
npm run preview
|
||||
|
||||
# 或
|
||||
yarn preview
|
||||
```
|
||||
|
||||
## 🎨 设计系统
|
||||
|
||||
### 色彩方案
|
||||
|
||||
- **主色调**: 渐变紫蓝色 (#667eea → #764ba2)
|
||||
- **辅助色**: 渐变粉红色 (#f093fb → #f5576c)
|
||||
- **成功色**: 渐变蓝绿色 (#4facfe → #00f2fe)
|
||||
- **文字色**: 深灰色系 (#2c3e50, #7f8c8d, #bdc3c7)
|
||||
|
||||
### 组件特性
|
||||
|
||||
- **玻璃态效果**: 半透明背景 + 模糊滤镜
|
||||
- **渐变按钮**: 主题色渐变 + 悬停效果
|
||||
- **消息气泡**: 用户/AI区分设计
|
||||
- **动画效果**: 淡入淡出、滑动、弹跳等
|
||||
|
||||
## 📱 页面功能
|
||||
|
||||
### 首页 (Home)
|
||||
- 产品介绍和特性展示
|
||||
- 快速开始对话入口
|
||||
- 统计数据展示
|
||||
- 响应式导航菜单
|
||||
|
||||
### 聊天页面 (Chat)
|
||||
- 侧边栏会话列表
|
||||
- 实时消息交互
|
||||
- 情绪分析集成
|
||||
- 消息历史记录
|
||||
- 打字状态指示
|
||||
|
||||
### 历史记录 (History)
|
||||
- 会话列表管理
|
||||
- 搜索和筛选功能
|
||||
- 对话详情查看
|
||||
- 导出和分享功能
|
||||
- 统计数据概览
|
||||
|
||||
### 情绪分析 (Analysis)
|
||||
- 快速文本分析
|
||||
- 历史分析记录
|
||||
- 情绪趋势图表
|
||||
- 数据洞察建议
|
||||
|
||||
## 🔧 配置说明
|
||||
|
||||
### 环境变量
|
||||
|
||||
创建 `.env.local` 文件配置环境变量：
|
||||
|
||||
```env
|
||||
# API基础URL
|
||||
VITE_API_BASE_URL=http://localhost:9001
|
||||
|
||||
# 应用标题
|
||||
VITE_APP_TITLE=情绪博物馆
|
||||
|
||||
# 是否启用调试模式
|
||||
VITE_DEBUG=true
|
||||
```
|
||||
|
||||
### 代理配置
|
||||
|
||||
开发环境下，Vite会自动代理 `/api` 请求到后端服务：
|
||||
|
||||
```javascript
|
||||
// vite.config.js
|
||||
export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:9001',
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 🎯 核心功能
|
||||
|
||||
### 状态管理
|
||||
|
||||
使用 Pinia 管理应用状态：
|
||||
|
||||
- **用户状态**: 用户信息、登录状态
|
||||
- **聊天状态**: 会话列表、当前对话、消息记录
|
||||
|
||||
### API集成
|
||||
|
||||
- 统一的请求封装和错误处理
|
||||
- 自动重试和超时控制
|
||||
- 请求/响应拦截器
|
||||
- 加载状态管理
|
||||
|
||||
### 响应式设计
|
||||
|
||||
- 移动端优先设计
|
||||
- 断点适配 (768px, 1024px, 1200px)
|
||||
- 触摸友好的交互
|
||||
- 自适应布局
|
||||
|
||||
## 🔍 开发指南
|
||||
|
||||
### 代码规范
|
||||
|
||||
- 使用 ESLint + Prettier 进行代码格式化
|
||||
- 组件命名采用 PascalCase
|
||||
- 文件命名采用 kebab-case
|
||||
- 样式使用 SCSS 预处理器
|
||||
|
||||
### 组件开发
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="component-name">
|
||||
<!-- 模板内容 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
// 组件逻辑
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component-name {
|
||||
// 样式定义
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### API调用
|
||||
|
||||
```javascript
|
||||
import { chatApi } from '@/api/chat'
|
||||
|
||||
// 发送消息
|
||||
const response = await chatApi.sendMessage({
|
||||
userId: 'user123',
|
||||
message: 'Hello',
|
||||
conversationId: 'conv456'
|
||||
})
|
||||
```
|
||||
|
||||
## 🚀 部署
|
||||
|
||||
### 静态部署
|
||||
|
||||
构建后的 `dist` 目录可以部署到任何静态文件服务器：
|
||||
|
||||
- Nginx
|
||||
- Apache
|
||||
- Vercel
|
||||
- Netlify
|
||||
- GitHub Pages
|
||||
|
||||
### Docker部署
|
||||
|
||||
```dockerfile
|
||||
FROM nginx:alpine
|
||||
COPY dist/ /usr/share/nginx/html/
|
||||
COPY nginx.conf /etc/nginx/nginx.conf
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
```
|
||||
|
||||
## 🤝 贡献指南
|
||||
|
||||
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) 文件了解详情
|
||||
|
||||
## 🙏 致谢
|
||||
|
||||
- [Vue.js](https://vuejs.org/) - 渐进式JavaScript框架
|
||||
- [Ant Design Vue](https://antdv.com/) - 企业级UI设计语言
|
||||
- [Vite](https://vitejs.dev/) - 下一代前端构建工具
|
||||
Reference in New Issue
Block a user