# Enhance UI Design - 实时聊天应用 This is a code bundle for Enhance UI Design. The original project is available at https://www.figma.com/design/O83HELdNMQgZOE7Q37NP9K/Enhance-UI-Design. ## 项目概述 这是一个基于 React + FastAPI 的实时聊天 Web 应用，支持多用户登录、私聊、群聊、AI 机器人对话以及多媒体消息功能。 ## 技术栈 - **前端**: React, TypeScript, Vite, Tailwind CSS - **后端**: Python, FastAPI, SQLAlchemy - **数据库**: MySQL 8.0+ - **实时通信**: WebSocket - **AI 集成**: Ollama (本地部署) ## 快速开始 ### 前端 1. 安装依赖： ```bash npm install ``` 2. 启动开发服务器： ```bash npm run dev ``` 前端将在 `http://localhost:3000` 启动。 ### 后端 1. 进入后端目录： ```bash cd chat-backend ``` 2. 安装 Python 依赖： ```bash pip install -r requirements.txt ``` 3. 确保 MySQL 数据库已创建： ```sql CREATE DATABASE chat_db_web CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; ``` 4. 启动后端服务 (推荐方式): ```bash python run.py ``` 后端将在 `http://localhost:8000` 启动。 详细的后端配置说明请查看 [chat-backend/README.md](./chat-backend/README.md) ## 功能特性 - ✅ 用户注册、登录与信息更新 - ✅ 查看好友个人资料 - ✅ 上传和更新个人头像 - ✅ JWT Token 认证 - ✅ 聊天室管理（创建/加入） - ✅ 实时消息发送和接收（私聊/群聊） - ✅ 发布和查看朋友圈 - ✅ WebSocket 实时通信 - ✅ AI 聊天（支持本地模型与 Ollama） - ✅ 文件上传（图片） - ✅ 现代化 UI 设计 ## 环境配置 前端 API 地址配置在 `src/services/api.ts` 中，默认指向 `http://localhost:8000`。 可以通过环境变量 `VITE_API_BASE_URL` 覆盖： ```bash VITE_API_BASE_URL=http://localhost:8000 npm run dev ``` ## 注意事项 1. 确保 MySQL 服务正在运行。 2. 数据库配置在 `chat-backend/app/config.py` 中，建议使用环境变量进行配置。 3. 如需使用 AI 功能，请根据 `chat-backend/README.md` 中的说明配置并启动 AI 服务（本地模型或 Ollama）。 4. 首次运行后端会自动创建数据库表。 # Enhance-UI-Design