Appearance
页面功能说明
IM 前端包含以下核心页面，均位于 partnerPages/ 目录下。
登录页 — login.vue
提供账号密码登录和注册功能。
| 功能 | 说明 |
|---|---|
| 登录 | 账号密码登录，支持输入校验和防重复提交 |
| 注册 | 新用户注册，校验账号长度（2-32）、密码长度（≥6）、邮箱格式 |
| 模式切换 | 登录/注册模式滑动切换 |
路由参数：无
跳转目标：登录成功后 reLaunch 到 /partnerPages/home
首页 — home.vue
显示会话列表，是用户进入 IM 的主界面。
| 功能 | 说明 |
|---|---|
| 会话列表 | 显示所有聊天会话，按最新消息时间排序 |
| 未读计数 | 每个会话显示未读消息数 |
| 在线状态 | 私聊会话显示对方在线状态 |
| 导航入口 | 底部导航栏：首页、通讯录、群聊、我的 |
WebSocket 事件监听：message、friend_request、friend_accepted、group_* 系列
聊天页 — chat.vue
消息收发核心页面，同时支持私聊和群聊。
| 功能 | 说明 |
|---|---|
| 消息列表 | 展示历史消息，支持向上滚动加载更多 |
| 发送消息 | 文本消息、图片消息 |
| 消息撤回 | 2 分钟内可撤回自己的消息 |
| 消息回复 | 支持引用回复指定消息 |
| 已读标记 | 进入聊天时自动标记已读 |
| 实时推送 | 通过 WebSocket 接收新消息 |
路由参数：
| 参数 | 类型 | 说明 |
|---|---|---|
| type | string | single（私聊）或 group（群聊） |
| id | string | 对方用户 ID 或群 ID |
| name | string | 对方昵称或群名称 |
通讯录 — contacts.vue
好友列表管理。
| 功能 | 说明 |
|---|---|
| 好友列表 | 显示所有好友，支持点击进入聊天 |
| 添加好友 | 跳转到添加好友页面 |
| 好友请求 | 显示待处理的好友请求数量 |
群聊列表 — group.vue
显示用户加入的所有群聊。
| 功能 | 说明 |
|---|---|
| 群列表 | 显示群名称、人数、公告 |
| 创建群聊 | 点击右上角 + 创建新群 |
| 进入群聊 | 点击群聊进入聊天页面 |
| 群管理 | 长按群聊弹出操作菜单 |
长按操作菜单：
| 操作 | 权限 | 说明 |
|---|---|---|
| 查看群成员 | 所有人 | 弹窗显示成员列表 |
| 群公告 | 所有人 | 查看群公告 |
| 编辑群信息 | 管理员+ | 修改群名称 |
| 群公告管理 | 群主 | 编辑群公告 |
| 转让群主 | 群主 | 选择成员转让群主身份 |
| 解散群聊 | 群主 | 解散群聊（不可撤销） |
| 退出群聊 | 所有人 | 退出群聊 |
个人中心 — user.vue
个人资料查看与设置。
| 功能 | 说明 |
|---|---|
| 资料展示 | 头像、昵称、用户名、邮箱 |
| 资料编辑 | 修改昵称、性别、个性签名、手机号 |
| 推送设置 | 开关消息推送（H5 端 Web Push） |
| 免打扰 | 开关免打扰模式 |
| 黑名单管理 | 查看和管理已屏蔽的用户 |
| 修改密码 | 修改登录密码 |
| 退出登录 | 清除本地存储并跳转登录页 |
添加好友 — add-friend.vue
搜索并添加好友。
| 功能 | 说明 |
|---|---|
| 搜索用户 | 按用户名或 ID 搜索 |
| 发送请求 | 向目标用户发送好友请求 |
好友请求 — friend-requests.vue
管理收到的好友请求。
| 功能 | 说明 |
|---|---|
| 请求列表 | 显示所有待处理的好友请求 |
| 接受/拒绝 | 处理好友请求 |
搜索页 — search.vue
全局搜索用户和群聊。
黑名单管理 — blocked.vue
查看和管理已屏蔽的用户列表。
| 功能 | 说明 |
|---|---|
| 黑名单列表 | 显示所有已屏蔽的用户 |
| 解除屏蔽 | 将用户从黑名单移除 |