happy-life-star/web-bak

情绪博物馆 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

安装依赖

# 使用 npm
npm install

# 或使用 yarn
yarn install

开发环境

# 启动开发服务器
npm run dev

# 或
yarn dev

访问 http://localhost:3000 查看应用

生产构建

# 构建生产版本
npm run build

# 或
yarn build

预览生产版本

# 预览构建结果
npm run preview

# 或
yarn preview

🎨 设计系统

色彩方案

• 主色调: 渐变紫蓝色 (#667eea → #764ba2)
• 辅助色: 渐变粉红色 (#f093fb → #f5576c)
• 成功色: 渐变蓝绿色 (#4facfe → #00f2fe)
• 文字色: 深灰色系 (#2c3e50, #7f8c8d, #bdc3c7)

组件特性

• 玻璃态效果: 半透明背景 + 模糊滤镜
• 渐变按钮: 主题色渐变 + 悬停效果
• 消息气泡: 用户/AI区分设计
• 动画效果: 淡入淡出、滑动、弹跳等

📱 页面功能

首页 (Home)

• 产品介绍和特性展示
• 快速开始对话入口
• 统计数据展示
• 响应式导航菜单

聊天页面 (Chat)

• 侧边栏会话列表
• 实时消息交互
• 情绪分析集成
• 消息历史记录
• 打字状态指示

历史记录 (History)

• 会话列表管理
• 搜索和筛选功能
• 对话详情查看
• 导出和分享功能
• 统计数据概览

情绪分析 (Analysis)

• 快速文本分析
• 历史分析记录
• 情绪趋势图表
• 数据洞察建议

🔧 配置说明

环境变量

创建 .env.local 文件配置环境变量：

# API基础URL
VITE_API_BASE_URL=http://localhost:9001

# 应用标题
VITE_APP_TITLE=情绪博物馆

# 是否启用调试模式
VITE_DEBUG=true

代理配置

开发环境下，Vite会自动代理 /api 请求到后端服务：

// 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 预处理器

组件开发

<template>
  <div class="component-name">
    <!-- 模板内容 -->
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 组件逻辑
</script>

<style lang="scss" scoped>
.component-name {
  // 样式定义
}
</style>

API调用

import { chatApi } from '@/api/chat'

// 发送消息
const response = await chatApi.sendMessage({
  userId: 'user123',
  message: 'Hello',
  conversationId: 'conv456'
})

🚀 部署

静态部署

构建后的 dist 目录可以部署到任何静态文件服务器：

• Nginx
• Apache
• Vercel
• Netlify
• GitHub Pages

Docker部署

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 文件了解详情

🙏 致谢

• Vue.js - 渐进式JavaScript框架
• Ant Design Vue - 企业级UI设计语言
• Vite - 下一代前端构建工具