# ProjectHome

**Repository Path**: Xiao_Bx/project-home

## Basic Information

- **Project Name**: ProjectHome
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-17
- **Last Updated**: 2025-10-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 聊天系统 - Vue版本

基于 Vue 3 + Vite + TypeScript + Socket.IO 的现代化实时聊天系统

## ✨ 特性

### 🚀 技术栈
- **前端**: Vue 3 + TypeScript + Vite
- **状态管理**: Pinia
- **后端**: Node.js + Express + Socket.IO
- **样式**: CSS3 + CSS变量
- **图标**: Font Awesome

### 💬 聊天功能
- **免注册登录**: 自动生成随机用户名和头像
- **实时通信**: 基于WebSocket的即时消息传递
- **私人聊天**: 一对一聊天模式
- **在线状态**: 实时显示用户在线/离线状态
- **消息历史**: 保存聊天记录
- **打字指示器**: 显示对方正在输入状态

### 📱 界面特性
- **响应式设计**: 完美适配桌面和移动设备
- **现代化UI**: 简洁美观的用户界面
- **底部导航**: 三页面切换（聊天、二维码、个人中心）
- **深色主题**: 支持主题切换（预留）

### 🔗 二维码功能
- **生成二维码**: 自动生成包含聊天链接的二维码
- **扫码聊天**: 客人扫码后直接进入聊天
- **链接分享**: 支持直接复制分享链接
- **保存图片**: 可下载二维码图片

## 🛠️ 安装和运行

### 环境要求
- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖
```bash
npm install
```

### 开发模式
```bash
# 启动前端开发服务器
npm run dev

# 启动后端服务器
npm run server

# 同时启动前后端（推荐）
npm run dev:all
```

### 生产构建
```bash
# 构建前端
npm run build

# 启动生产服务器
npm run server
```

## 📁 项目结构

```
chat-system/
├── src/                    # 前端源码
│   ├── components/         # Vue组件
│   │   ├── LoadingScreen.vue      # 加载界面
│   │   ├── ChatInterface.vue      # 聊天界面
│   │   ├── QRCodePage.vue         # 二维码页面
│   │   ├── ProfilePage.vue        # 个人中心
│   │   ├── BottomNavigation.vue   # 底部导航
│   │   └── FriendRequestNotification.vue # 好友请求通知
│   ├── stores/             # Pinia状态管理
│   │   └── chatStore.ts    # 聊天状态管理
│   ├── assets/             # 静态资源
│   ├── App.vue             # 根组件
│   └── main.ts             # 入口文件
├── server.js               # Node.js后端服务器
├── package.json            # 项目配置
├── vite.config.ts          # Vite配置
└── README.md               # 项目说明
```

## 🚀 使用指南

### 快速开始
1. **运行项目**: 执行 `npm run dev:all` 启动完整系统
2. **访问应用**: 打开 `http://localhost:5173`
3. **自动登录**: 系统会自动为你生成身份
4. **开始聊天**: 点击用户列表开始对话

### 二维码分享
1. **生成二维码**: 切换到"二维码"页面查看你的专属二维码
2. **分享给客人**: 客人可以扫描二维码或访问链接
3. **接受请求**: 客人进入后会发送聊天请求，你接受后开始对话
4. **保存分享**: 可以下载二维码图片或复制链接

### 个人中心
1. **查看资料**: 显示用户信息和聊天统计
2. **编辑资料**: 修改用户名和头像（功能预留）
3. **退出登录**: 断开连接并重新生成身份

## 🔧 技术细节

### 状态管理
使用 Pinia 管理全局状态：
- 用户信息和登录状态
- 聊天消息和会话列表
- Socket.IO 连接状态
- 二维码和好友请求处理

### 组件架构
- **App.vue**: 根组件，管理页面路由和全局状态
- **LoadingScreen**: 处理自动登录和加载状态
- **ChatInterface**: 核心聊天功能，消息收发和用户列表
- **QRCodePage**: 二维码生成、显示和链接管理
- **ProfilePage**: 个人信息展示和统计数据
- **BottomNavigation**: 页面切换导航

### 实时通信
基于 Socket.IO 的事件系统：
```typescript
// 用户管理
socket.on('login-success', (data) => { ... })
socket.on('users-list', (users) => { ... })

// 消息处理
socket.on('new-message', (message) => { ... })
socket.emit('send-private-message', { ... })

// 好友请求
socket.on('friend-request', (data) => { ... })
socket.emit('accept-friend-request', { ... })
```

## 🎯 开发特性

### 开发工具
- **热重载**: Vite提供快速的热重载开发体验
- **TypeScript**: 完整的类型安全支持
- **ESLint**: 代码质量检查
- **并发开发**: 前后端同时启动和监听

### 构建优化
- **代码分割**: 自动代码分割和懒加载
- **资源优化**: 图片和字体资源优化
- **生产构建**: 压缩和优化的生产版本

## 🌟 特色功能

### 免注册体验
- 访问即用，无需注册登录
- 自动生成随机用户名和头像
- 支持通过二维码快速建立聊天

### 现代化界面
- 响应式设计，支持各种屏幕尺寸
- 流畅的动画和交互效果
- 直观的用户体验设计

### 实时性能
- 基于WebSocket的低延迟通信
- 实时状态同步
- 高效的消息处理机制

## 📝 更新日志

### v2.0.0 (Vue版本)
- 🎉 完全重构为Vue 3 + TypeScript架构
- ✨ 使用Pinia进行状态管理
- 🚀 Vite构建工具，提升开发体验
- 📱 组件化架构，更好的代码组织
- 🎨 现代化UI设计和动画效果

### v1.0.0 (原版本)
- 基础聊天功能
- 二维码分享
- 简单HTML/CSS/JS实现

## 🤝 贡献

欢迎提交问题和功能请求！

## �� 许可证

MIT License