# pc-wechat

**Repository Path**: hailang123/pc-wechat

## Basic Information

- **Project Name**: pc-wechat
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-05
- **Last Updated**: 2025-07-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🚀 PC微信聊天应用

![GitHub stars](https://img.shields.io/github/stars/hailang123/pc-wechat?style=social)
![GitHub forks](https://img.shields.io/github/forks/hailang123/pc-wechat?style=social)
![Node version](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen)
![Vue version](https://img.shields.io/badge/vue-3.4.0-green)
![License](https://img.shields.io/badge/license-ISC-blue)

一个基于 Vue 3 + Node.js 的现代化聊天应用，高度还原微信PC端界面和功能。

## 🌐 在线演示
- **演示地址**: [点击体验](https://your-demo-site.com) (待部署)
- **测试账号**: goddlts / 123456
- **体验功能**: 实时聊天、AI对话、表情包

> 📱 **移动端适配**: 支持响应式设计，手机端也能完美体验

## 📱 功能演示

| 登录界面 | 聊天界面 | 好友列表 |
|---------|---------|---------|
| ![登录界面](https://via.placeholder.com/300x200?text=Login+Page) | ![聊天界面](https://via.placeholder.com/300x200?text=Chat+Interface) | ![好友列表](https://via.placeholder.com/300x200?text=Friends+List) |

## ✨ 功能特性

- 🔐 **用户登录认证** - JWT Token 身份验证，安全可靠
- 💬 **实时聊天** - 基于 Socket.io 的实时消息传输，延迟<100ms
- 🤖 **智能机器人** - 集成图灵机器人API，支持智能对话和上下文理解
- 😊 **表情包支持** - 100+ 丰富表情符号，支持自定义表情
- 👥 **好友管理** - 好友列表、搜索、详情查看，按字母排序
- 📱 **响应式设计** - 完美适配桌面端和移动端
- 🎨 **仿微信UI** - 高度还原微信PC端界面，用户体验一致
- 🔄 **离线消息** - 支持离线消息存储和推送
- 🌙 **主题切换** - 支持明暗主题切换（规划中）

## 🏗️ 系统架构

```
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   前端 (Vue3)   │    │   后端 (Node)   │    │  AI机器人API    │
│                 │    │                 │    │                 │
│  - 用户界面     │◄──►│  - RESTful API  │◄──►│  - 图灵机器人   │
│  - 实时通信     │    │  - Socket.io    │    │  - 智能对话     │
│  - 状态管理     │    │  - JWT认证      │    │  - 上下文理解   │
│  - 路由管理     │    │  - 消息存储     │    │                 │
└─────────────────┘    └─────────────────┘    └─────────────────┘
        │                       │                       │
        ▼                       ▼                       ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Nginx代理     │    │   数据存储      │    │   外部服务      │
│  - 反向代理     │    │  - JSON文件     │    │  - 图片CDN      │
│  - 静态资源     │    │  - 用户数据     │    │  - 监控服务     │
│  - 负载均衡     │    │  - 消息记录     │    │                 │
└─────────────────┘    └─────────────────┘    └─────────────────┘
```

## ⚡ 性能指标

- **首屏加载**: < 2s
- **消息延迟**: < 100ms
- **并发用户**: 1000+
- **构建大小**: < 500KB (gzipped)
- **内存占用**: < 100MB
- **响应时间**: < 50ms (API)

## 🛠️ 技术栈

### 前端技术
- **Vue 3.4.0** - 渐进式JavaScript框架，Composition API
- **Vue Router 4.4.0** - 官方路由管理器，支持动态路由
- **Vite 5.4.0** - 现代化构建工具，HMR热更新
- **Socket.io-client 4.7.0** - 实时通信客户端
- **Axios 1.7.0** - HTTP请求库，拦截器支持
- **Day.js 1.11.0** - 轻量级日期处理库
- **Less 4.2.0** - CSS预处理器，变量和混入

### 后端技术
- **Node.js ≥18.0.0** - JavaScript运行时，ES6+支持
- **Express 4.19.0** - Web应用框架，中间件生态
- **Socket.io 4.7.0** - 实时通信服务端，房间管理
- **jsonwebtoken 9.0.0** - JWT令牌处理，安全认证
- **Axios 1.7.0** - HTTP客户端，API调用
- **CORS 2.8.5** - 跨域资源共享，安全配置

## 📦 项目结构

```
pc-wechat-master/
├── chat-app-backend/          # 后端服务
│   ├── app.js                 # 主应用文件
│   ├── db.json               # 用户数据库
│   ├── package.json          # 后端依赖配置
│   └── node_modules/         # 后端依赖包
├── wx-project/               # 前端应用
│   ├── src/                  # 源代码目录
│   │   ├── views/           # 页面组件
│   │   │   ├── Login.vue    # 登录页面
│   │   │   ├── Chat.vue     # 聊天页面
│   │   │   └── Friends.vue  # 好友页面
│   │   ├── components/      # 公共组件
│   │   │   ├── Search.vue   # 搜索组件
│   │   │   └── Emoji.vue    # 表情组件
│   │   ├── layout/          # 布局组件
│   │   │   └── Layout.vue   # 主布局
│   │   ├── router/          # 路由配置
│   │   ├── utils/           # 工具函数
│   │   ├── assets/          # 静态资源
│   │   └── main.js          # 应用入口
│   ├── public/              # 公共资源
│   │   └── images/          # 图片资源
│   ├── package.json         # 前端依赖配置
│   └── vite.config.js       # Vite配置
└── README.md                # 项目文档
```

## 🚀 快速开始

### 环境要求

- Node.js ≥ 18.0.0
- npm ≥ 8.0.0

### 安装步骤

1. **克隆项目**
```bash
git clone <repository-url>
cd pc-wechat-master
```

2. **安装后端依赖**
```bash
cd chat-app-backend
npm install
```

3. **安装前端依赖**
```bash
cd ../wx-project
npm install
```

### 启动应用

1. **启动后端服务**
```bash
cd chat-app-backend
npm start
```
后端服务将在 http://127.0.0.1:5000 启动

2. **启动前端开发服务器**
```bash
cd wx-project
npm run dev
```
前端应用将在 http://localhost:5173 启动

## 👤 测试账号

系统预置了多个测试账号，密码统一为 `123456`：

| 用户名 | 微信号 | 昵称 | 描述 |
|--------|--------|------|------|
| goddlts | goddlts | 教瘦 | 管理员账号 |
| aaa123 | aaa123 | 阿玛尼 | 普通用户 |
| balala123 | balala123 | 巴拉拉 | 普通用户 |
| dalao | dalao | 大佬 | 普通用户 |
| jiajia1998 | jiajia1998 | 佳佳 | 普通用户 |
| dabai | dabai | 大白机器人 | 智能机器人 |

## 🎮 使用指南

### 登录系统
1. 访问 http://localhost:5173
2. 输入测试账号的微信号和密码（123456）
3. 点击登录按钮

### 聊天功能
1. 登录后进入聊天界面
2. 在左侧用户列表中选择聊天对象
3. 在底部输入框输入消息
4. 按Enter键或点击发送按钮发送消息
5. 支持表情包：点击笑脸图标选择表情

### 好友管理
1. 点击左侧导航栏的好友图标
2. 浏览好友列表（按字母排序）
3. 点击好友查看详细信息
4. 点击"发消息"按钮开始聊天

### 智能机器人
1. 选择"大白机器人"进行对话
2. 发送任意消息，机器人会智能回复
3. 支持多轮对话和上下文理解

## 🔧 开发指南

### 前端开发
```bash
cd wx-project
npm run dev    # 启动开发服务器
npm run build  # 构建生产版本
npm run serve  # 预览生产版本
```

### 后端开发
```bash
cd chat-app-backend
npm start      # 启动生产服务器
npm run worker # 启动工作进程
```

### 代码结构说明

**前端主要文件：**
- `src/main.js` - 应用入口，配置全局状态和插件
- `src/router/index.js` - 路由配置和权限控制
- `src/utils/http.js` - HTTP请求封装
- `src/views/Chat.vue` - 聊天页面，包含Socket.io连接
- `src/views/Login.vue` - 登录页面，JWT认证
- `src/views/Friends.vue` - 好友列表页面

**后端主要文件：**
- `app.js` - 主服务器文件，包含Express和Socket.io配置
- `db.json` - 用户数据存储（生产环境建议使用数据库）

## 🌐 API接口

### 用户认证
- `POST /v1/login` - 用户登录
- 请求头需要携带 `token` 字段（除登录接口外）

### 好友管理
- `GET /v1/friends` - 获取好友列表

### WebSocket事件
- `connection` - 客户端连接
- `message` - 消息发送/接收
- `disconnect` - 客户端断开连接
- `login_error` - 登录错误

## 🔒 安全特性

- JWT Token身份验证
- 请求头Token验证中间件
- CORS跨域保护
- 输入数据验证
- XSS防护

## 🚀 部署指南

### 生产环境部署

1. **构建前端**
```bash
cd wx-project
npm run build
```

2. **配置环境变量**
```bash
export PORT=5000  # 后端端口
export NODE_ENV=production
```

3. **启动服务**
```bash
cd chat-app-backend
npm start
```

### Docker部署（可选）
```dockerfile
# 后端Dockerfile示例
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
EXPOSE 5000
CMD ["npm", "start"]
```

## 🔒 安全说明

⚠️ **重要提醒**：本项目仅供学习和演示使用，生产环境部署请注意以下安全配置：

### 安全配置检查清单
- [ ] **修改默认密码**: 更改所有测试账号的默认密码
- [ ] **更换JWT密钥**: 修改 `chat-app-backend/app.js` 中的 secret
- [ ] **启用HTTPS**: 配置SSL证书，强制使用HTTPS协议
- [ ] **配置防火墙**: 限制不必要的端口访问
- [ ] **更新依赖**: 定期运行 `npm audit fix` 修复安全漏洞
- [ ] **环境变量**: 敏感信息使用环境变量存储
- [ ] **请求限制**: 配置API请求频率限制
- [ ] **输入验证**: 加强用户输入验证和过滤

### 推荐的生产环境配置
```javascript
// 环境变量配置示例
const config = {
  JWT_SECRET: process.env.JWT_SECRET || 'your-super-secret-key',
  DB_URL: process.env.DB_URL || 'mongodb://localhost:27017/chat',
  REDIS_URL: process.env.REDIS_URL || 'redis://localhost:6379',
  API_RATE_LIMIT: process.env.API_RATE_LIMIT || 100 // 每分钟请求数
}
```

## 👥 贡献者

感谢所有为这个项目做出贡献的开发者！

<div align="center">
  <a href="https://gitee.com/hailang123/pc-wechat/contributors">
    <img src="https://contrib.rocks/image?repo=hailang123/pc-wechat" />
  </a>
</div>

### 如何贡献

我们欢迎所有形式的贡献，包括但不限于：

- 🐛 **Bug报告**: 发现问题请提交Issue
- 💡 **功能建议**: 有好的想法请告诉我们
- 📝 **文档改进**: 帮助完善文档
- 🔧 **代码贡献**: 提交Pull Request

### 贡献步骤

1. **Fork项目** - 点击右上角Fork按钮
2. **创建分支** - `git checkout -b feature/AmazingFeature`
3. **提交代码** - `git commit -m 'Add some AmazingFeature'`
4. **推送分支** - `git push origin feature/AmazingFeature`
5. **提交PR** - 在Gitee上创建Pull Request

### 代码规范

- 使用ESLint进行代码检查
- 遵循Vue.js官方风格指南
- 提交信息使用约定式提交格式
- 添加必要的单元测试

## 🗺️ 开发路线图

### ✅ 已完成 (v2.0.0)
- [x] 基础聊天功能
- [x] AI机器人集成
- [x] 用户认证系统
- [x] 表情包支持
- [x] 好友管理
- [x] 实时消息传输
- [x] 响应式设计
- [x] Docker容器化
- [x] 一键部署脚本

### 🚧 进行中 (v2.1.0)
- [ ] 群聊功能
- [ ] 文件传输
- [ ] 语音消息
- [ ] 消息撤回
- [ ] 在线状态显示
- [ ] 消息已读状态

### 📋 计划中 (v3.0.0)
- [ ] 移动端PWA应用
- [ ] 消息端到端加密
- [ ] 视频通话功能
- [ ] 多语言支持
- [ ] 主题切换
- [ ] 消息云同步
- [ ] 机器人插件系统

## ❓ 常见问题

<details>
<summary><strong>Q: 如何修改机器人API？</strong></summary>

在 `chat-app-backend/app.js` 中修改图灵机器人配置：
```javascript
const postData = {
  "userInfo": {
    "apiKey": "your-api-key", // 替换为你的API Key
    "userId": to
  }
}
```
</details>

<details>
<summary><strong>Q: 如何添加新的表情包？</strong></summary>

1. 将GIF文件放入 `wx-project/public/images/emoji/`
2. 在 `wx-project/src/main.js` 中添加表情配置：
```javascript
{ file: 'new-emoji.gif', code: '/::new', title: '新表情', reg:/\/::new/g }
```
3. 重启前端服务
</details>

<details>
<summary><strong>Q: 如何部署到生产环境？</strong></summary>

**方法一：使用Docker**
```bash
docker-compose up -d
```

**方法二：手动部署**
```bash
# 构建前端
cd wx-project && npm run build

# 启动后端
cd chat-app-backend && npm start
```
</details>

<details>
<summary><strong>Q: 如何修改端口配置？</strong></summary>

- **后端端口**: 修改 `chat-app-backend/app.js` 中的 `process.env.PORT || 5000`
- **前端端口**: 修改 `wx-project/vite.config.js` 中的 server 配置
- **Docker端口**: 修改 `docker-compose.yml` 中的 ports 配置
</details>

## 📝 更新日志

### v2.0.0 (2024-07-20) 🎉
- ✅ **技术栈升级**: Node.js 18+ + Vue 3.4 + Vite 5.4
- ✅ **性能优化**: 首屏加载时间减少50%
- ✅ **安全增强**: JWT认证 + CORS配置
- ✅ **部署优化**: Docker容器化 + 一键部署脚本
- ✅ **文档完善**: 详细的使用文档和API说明
- ✅ **Bug修复**: 图片路径问题 + 依赖兼容性

### v1.0.0 (2023-12-01)
- 🎉 **项目初始化**: 基础聊天功能
- 💬 **实时通信**: Socket.io集成
- 🤖 **AI机器人**: 图灵机器人API
- 👥 **用户系统**: 登录认证 + 好友管理

## 📄 许可证

本项目采用 ISC 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 🙏 致谢

- Vue.js 团队提供的优秀框架
- Socket.io 提供的实时通信解决方案
- 图灵机器人提供的AI对话服务

## 📞 联系方式

如有问题或建议，请通过以下方式联系：

- 📧 Email: your-email@example.com
- 🐛 Issues: [GitHub Issues](https://github.com/your-repo/issues)
- 💬 讨论: [GitHub Discussions](https://github.com/your-repo/discussions)

---

⭐ 如果这个项目对你有帮助，请给它一个星标！