75 lines
1.5 KiB
Markdown
75 lines
1.5 KiB
Markdown
|
# NL-IM Vue 3 + TypeScript 前端项目
|
|||
|
|
|
|||
|
|
基于Vue 3 + TypeScript构建的即时通讯系统前端应用。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- Vue 3.4 + TypeScript
|
|||
|
|
- Pinia (状态管理)
|
|||
|
|
- Vue Router 4
|
|||
|
|
- Axios (HTTP客户端)
|
|||
|
|
- Tailwind CSS 4
|
|||
|
|
- WebSocket (实时通信)
|
|||
|
|
- WebRTC (音视频通话)
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
nl-im-vue-ts/
|
|||
|
|
├── src/
|
|||
|
|
│ ├── api/ # API接口层
|
|||
|
|
│ ├── components/ # 公共组件
|
|||
|
|
│ ├── composables/ # 组合式函数
|
|||
|
|
│ ├── stores/ # Pinia状态管理
|
|||
|
|
│ ├── types/ # TypeScript类型定义
|
|||
|
|
│ ├── utils/ # 工具函数
|
|||
|
|
│ ├── views/ # 页面组件
|
|||
|
|
│ └── router/ # 路由配置
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 开发
|
|||
|
|
|
|||
|
|
### 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 启动开发服务器
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
访问 http://localhost:3000
|
|||
|
|
|
|||
|
|
### 构建生产版本
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 后端API
|
|||
|
|
|
|||
|
|
确保后端服务运行在 `http://localhost:12080`
|
|||
|
|
|
|||
|
|
WebSocket地址: `ws://localhost:12080/ws`
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
- ✅ 用户登录/注册
|
|||
|
|
- ✅ 联系人管理
|
|||
|
|
- ✅ 实时消息聊天
|
|||
|
|
- ✅ 多媒体消息（文本、图片、语音、视频、文件）
|
|||
|
|
- ✅ 语音录制和发送
|
|||
|
|
- ✅ 右键菜单（单例化）
|
|||
|
|
- ✅ WebRTC音视频通话（待完善）
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 需要后端服务运行在 `http://localhost:12080`
|
|||
|
|
2. 登录后Token会自动存储在localStorage
|
|||
|
|
3. WebSocket连接会自动建立和管理
|
|||
|
|
4. 所有API响应统一格式：`{code, message, result, type, interface_info}`
|
|||
|
|
|