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/           # 路由配置

开发

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:3000

构建生产版本

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}