# 情绪博物馆 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/) - 下一代前端构建工具