前端项目结构

IM 前端基于 UniApp（Vue 2）+ TuniaoUI 组件库开发，支持 H5、微信小程序、抖音小程序等多端运行。

目录结构

uniapp/
├── partnerPages/          # IM 功能页面
│   ├── home.vue           # 首页（会话列表）
│   ├── chat.vue           # 聊天页面（私聊 & 群聊）
│   ├── contacts.vue       # 通讯录
│   ├── group.vue          # 群聊列表
│   ├── user.vue           # 个人资料/设置
│   ├── login.vue          # 登录/注册
│   ├── add-friend.vue     # 添加好友
│   ├── friend-requests.vue# 好友请求
│   ├── search.vue         # 搜索用户/群
│   ├── blocked.vue        # 黑名单管理
│   └── ...
├── libs/
│   └── mixin/
│       ├── template_page_mixin.js  # 模板页面通用混入
│       └── im_page_mixin.js        # IM 页面通用混入
├── config/
│   └── base.js            # 环境配置（API 地址等）
├── store/                 # Vuex 状态管理
├── static/                # 静态资源
├── App.vue                # 应用入口
├── main.js                # 主入口
├── pages.json             # 页面路由配置
├── manifest.json          # 应用配置
└── uni.scss               # 全局样式变量

核心页面说明

页面	文件	功能
首页	home.vue	显示会话列表、未读计数、在线状态
聊天	chat.vue	消息收发、历史记录加载、图片发送、消息撤回
通讯录	contacts.vue	好友列表、好友请求入口
群聊	group.vue	群列表、创建群、群管理操作
个人中心	user.vue	个人资料编辑、推送设置、黑名单管理
登录	login.vue	账号密码登录、注册

技术栈

技术	版本/说明
UniApp	Vue 2 跨端框架
TuniaoUI	UI 组件库
WebSocket	原生 WebSocket API
HTTP 请求	通过 this.middle.get/post 中间件