一个基于 React + TypeScript 构建的现代化即时通讯应用，支持私聊、群聊、好友管理等核心功能。
- 前端框架: React 18 + TypeScript
- 构建工具: Vite 5
- 样式方案: Tailwind CSS + SCSS + PostCSS (移动端适配)
- UI 组件库: Ant Design + Ant Design Mobile
- 状态管理: 自定义 Hook 状态管理方案
- 路由管理: React Router DOM 6
- 实时通信: Socket.io Client
- 网络请求: Axios (封装)
- 地图服务: 高德地图 API
- 文件存储: 阿里云 OSS
- 代码规范: ESLint + Prettier + Husky + Commitlint
- 用户注册/登录
- 个人信息编辑（头像、昵称等）
- 支持免登录演示账号
- 实时私聊（Socket.io）
- 实时群聊
- 消息列表展示
- 表情发送
- 图片发送
- 地理位置分享
- 添加好友
- 好友验证管理
- 创建群聊
- 加入群聊
- 群组/好友搜索
- 用户详情查看
src/
├── assets/ # 静态资源（图片等）
├── common/ # 公共配置
├── components/ # 公共组件
│ ├── BackTop/ # 返回顶部
│ ├── Drag/ # 拖拽组件
│ ├── Footer/ # 底部导航栏
│ ├── Loading/ # 加载组件
│ ├── Map/ # 地图组件
│ ├── Modal/ # 弹窗组件
│ ├── Toast/ # 提示组件
│ └── VirtualList/ # 虚拟列表
├── hooks/ # 自定义 Hooks
│ ├── useDebounce.ts # 防抖
│ ├── useThrottle.ts # 节流
│ └── useMemorizedFn.ts
├── pages/ # 页面组件
│ ├── Login/ # 登录页
│ ├── Register/ # 注册页
│ ├── Message/ # 消息列表页
│ ├── Contacts/ # 联系人页
│ ├── Mine/ # 个人中心页
│ ├── Search/ # 搜索页
│ ├── UserDetail/ # 用户详情页
│ ├── FriendDetail/ # 好友详情页
│ ├── GroupDetail/ # 群组详情页
│ ├── AddFriend/ # 添加好友页
│ ├── AddGroup/ # 加入群聊页
│ ├── CreateGroup/ # 创建群聊页
│ └── FriendVerification/ # 好友验证页
├── routes/ # 路由配置
├── server/ # API 接口
│ ├── common.ts # 公共接口
│ ├── group.ts # 群组接口
│ ├── user.ts # 用户接口
│ └── type/ # 类型定义
├── store/ # 状态管理
│ ├── index.ts
│ ├── createStore.ts
│ └── modules/
├── styles/ # 全局样式
├── types/ # 类型定义
└── utils/ # 工具函数
├── request/ # 请求封装
├── storage/ # 存储封装
├── date-format.ts # 日期格式化
├── emojiMap.ts # 表情映射
├── oss.ts # OSS 上传
└── upload.ts # 文件上传
- Node.js 20.x
- npm 或 pnpm
npm install
# 或
pnpm install复制环境变量示例文件并根据实际情况修改：
# API 基础地址
VITE_API_BASE_URL=http://localhost:8000
# Socket 连接地址
VITE_SOCKET_URL=http://localhost:8000
# 高德地图 Key
VITE_AMAP_KEY=your_amap_key_here
# 高德地图安全密钥
VITE_AMAP_SECURITY_CODE=your_security_code_here
# 阿里云 OSS 配置
VITE_OSS_REGION=oss-cn-hangzhou
VITE_OSS_BUCKET=your_bucket_namenpm run dev应用将在 http://localhost:3000 启动。
| 命令 | 说明 |
|---|---|
npm run dev |
启动开发服务器 |
npm run build |
生产环境构建 |
npm run build:dev |
开发环境构建 |
npm run build:pre |
预发布环境构建 |
npm run build:prod |
生产环境构建 |
npm run preview |
预览构建产物 |
npm run lint |
代码检查 |
npm run lint:fix |
自动修复代码问题 |
npm run prettier |
格式化检查 |
npm run prettier:fix |
自动格式化代码 |
npm run type-check |
TypeScript 类型检查 |
本项目需要配合后端服务使用，后端服务需要提供以下 API：
POST /api/user/register- 用户注册POST /api/user/login- 用户登录GET /api/user/userInfo- 获取用户信息GET /api/user/search- 搜索用户POST /api/user/update- 更新用户信息GET /api/user/newFriend- 获取好友列表
POST /api/group/create- 创建群聊GET /api/group/allGroupInfo- 获取所有群聊GET /api/group/searchGroup- 搜索群聊POST /api/group/updateGroup- 更新群聊信息
chat message- 私聊消息group message- 群聊消息
项目采用以下代码规范工具：
- ESLint: JavaScript/TypeScript 代码检查
- Prettier: 代码格式化
- Husky: Git Hooks
- lint-staged: 提交前检查
- Commitlint: 提交信息规范
使用 Conventional Commits 规范：
feat: 新功能
fix: 修复 bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建/工具变动
参见 .browserslistrc 配置文件。
MIT License
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'feat: Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 提交 Pull Request