From efac214d69361118699cbf3c5820837b08e27e8b Mon Sep 17 00:00:00 2001
From: "[yxf]" <[1524240689@qq.com]>
Date: Mon, 20 Apr 2026 16:43:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=88=87=E6=8D=A2=E8=B4=A6?=
 =?UTF-8?q?=E5=8F=B7=E5=8A=9F=E8=83=BD=E7=B1=BB=E4=BC=BC=E9=A3=9E=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controller/PrivateMessageController.java  |   19 +
 .../implatform/controller/UserController.java |  111 +-
 .../java/com/bx/implatform/dto/LoginDTO.java  |    3 +
 .../java/com/bx/implatform/entity/User.java   |    7 +
 .../service/PrivateMessageService.java        |    9 +
 .../bx/implatform/service/UserService.java    |    9 +
 .../impl/PrivateMessageServiceImpl.java       |   37 +-
 .../service/impl/UserServiceImpl.java         |   76 +
 .../java/com/bx/implatform/vo/LoginVO.java    |    3 +
 im-web/src/components/setting/Setting.vue     |    2 +-
 im-web/src/view/Home.vue                      | 1337 +++++++++--------
 11 files changed, 1015 insertions(+), 598 deletions(-)

diff --git a/im-platform/src/main/java/com/bx/implatform/controller/PrivateMessageController.java b/im-platform/src/main/java/com/bx/implatform/controller/PrivateMessageController.java
index cf3c0fd..0090053 100644
--- a/im-platform/src/main/java/com/bx/implatform/controller/PrivateMessageController.java
+++ b/im-platform/src/main/java/com/bx/implatform/controller/PrivateMessageController.java
@@ -12,7 +12,9 @@ import jakarta.validation.constraints.NotNull;
 import lombok.RequiredArgsConstructor;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 @Tag(name = "私聊消息")
 @RestController
@@ -48,6 +50,7 @@ public class PrivateMessageController {
         return ResultUtils.success();
     }
 
+
     @GetMapping("/maxReadedId")
     @Operation(summary = "获取最大已读消息的id", description = "获取某个会话中已读消息的最大id")
     public Result<Long> getMaxReadedId(@RequestParam Long friendId) {
@@ -63,5 +66,21 @@ public class PrivateMessageController {
         return ResultUtils.success(privateMessageService.findHistoryMessage(friendId, page, size));
     }
 
+    /**
+     * 批量获取指定用户的未读消息数
+     */
+    @PostMapping("/unreadCounts")
+    @Operation(summary = "批量获取指定用户的未读消息数", description = "批量获取多个指定用户的未读消息数")
+    public Result<Map<Long, Integer>> getUnreadCounts(@RequestBody Map<String, List<Long>> params) {
+        List<Long> userIds = params.get("userIds");
+
+        if (userIds == null || userIds.isEmpty()) {
+            return ResultUtils.success(new HashMap<>());
+        }
+
+        Map<Long, Integer> result = privateMessageService.getUnreadCountsByUserIds(userIds);
+        return ResultUtils.success(result);
+    }
+
 }
 
diff --git a/im-platform/src/main/java/com/bx/implatform/controller/UserController.java b/im-platform/src/main/java/com/bx/implatform/controller/UserController.java
index 6ec4583..e6827c2 100644
--- a/im-platform/src/main/java/com/bx/implatform/controller/UserController.java
+++ b/im-platform/src/main/java/com/bx/implatform/controller/UserController.java
@@ -1,7 +1,10 @@
 package com.bx.implatform.controller;
 
 import cn.hutool.core.util.ObjectUtil;
+import cn.hutool.core.util.StrUtil;
 import cn.hutool.json.JSONObject;
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.bx.implatform.dto.LoginDTO;
 import com.bx.implatform.dto.RegisterDTO;
 import com.bx.implatform.entity.User;
 import com.bx.implatform.result.Result;
@@ -24,9 +27,8 @@ import com.alibaba.fastjson.JSON;
 import com.bx.imcommon.util.JwtUtil;
 import com.bx.implatform.config.props.JwtProperties;
 
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
+import java.util.*;
+import java.util.stream.Collectors;
 
 import static com.bx.implatform.enums.ResultCode.XSS_PARAM_ERROR;
 
@@ -133,6 +135,109 @@ public class UserController {
         return ResultUtils.success(result);
     }
 
+    @PostMapping("/addAccounts")
+    @Operation(summary = "客服登录", description = "客服登录")
+    public Result<LoginVO> addAccounts(@Valid @RequestBody LoginDTO dto) {
+        LoginVO vo = userService.addAccounts(dto);
+        return ResultUtils.success(vo);
+    }
+
+    @PostMapping("/getSwitchableAccounts")
+    @Operation(summary = "获取可切换的账号列表", description = "获取当前客服可切换的账号列表")
+    public Result<Map<String, Object>> getSwitchableAccounts() {
+        UserSession session = SessionContext.getSession();
+        Long userId = session.getUserId();
+
+        if (ObjectUtil.isNull(userId)) {
+            return ResultUtils.error(XSS_PARAM_ERROR);
+        }
+
+        // 获取当前用户信息
+        User currentUser = userService.getById(userId);
+        if (currentUser == null) {
+            return ResultUtils.error(XSS_PARAM_ERROR);
+        }
+
+        Map<String, Object> result = new HashMap<>();
+
+        // 获取可切换的账号ID列表（逗号分隔的字符串，如 "13,14"）
+        String switchableIdsStr = currentUser.getSwitchableAccountIds();
+        List<Map<String, Object>> switchableUsers = new ArrayList<>();
+
+        if (StrUtil.isNotBlank(switchableIdsStr)) {
+            String[] idArray = switchableIdsStr.split(",");
+            List<Long> ids = Arrays.stream(idArray)
+                    .filter(StrUtil::isNotBlank)
+                    .map(Long::parseLong)
+                    .collect(Collectors.toList());
+
+            if (!ids.isEmpty()) {
+                List<User> users = userService.listByIds(ids);
+                // 过滤掉被封禁的账号
+                users = users.stream()
+                        .filter(u -> !Boolean.TRUE.equals(u.getIsBanned()))
+                        .collect(Collectors.toList());
+
+                switchableUsers = users.stream().map(user -> {
+                    Map<String, Object> map = new HashMap<>();
+                    map.put("id", user.getId());
+                    map.put("userName", user.getUserName());
+                    map.put("nickName", user.getNickName());
+                    map.put("headImage", user.getHeadImage());
+                    map.put("headImageThumb", user.getHeadImageThumb());
+                    return map;
+                }).collect(Collectors.toList());
+            }
+        }
+
+        result.put("switchableUsers", switchableUsers);
+
+        // 获取当前用户的 unique_token
+        String currentUserUniqueToken = currentUser.getUniqueToken();
+
+        // 构建查询条件
+        LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<User>()
+                .eq(User::getIsCustomer, 2)
+                .ne(User::getId, userId)
+                .eq(User::getIsBanned, 0);
+
+        // 添加 unique_token 条件
+        if (StrUtil.isNotBlank(currentUserUniqueToken)) {
+            // 当前用户有 unique_token，只查询相同 unique_token 的客服
+            queryWrapper.eq(User::getUniqueToken, currentUserUniqueToken);
+        } else {
+            // 当前用户没有 unique_token，只查询也没有 unique_token 的客服
+            queryWrapper.isNull(User::getUniqueToken).or().eq(User::getUniqueToken, "");
+        }
+
+        List<User> availableUsers = userService.list(queryWrapper);
+
+        // 获取已添加的ID集合
+        Set<Long> existingIds = new HashSet<>();
+        if (StrUtil.isNotBlank(switchableIdsStr)) {
+            Arrays.stream(switchableIdsStr.split(","))
+                    .filter(StrUtil::isNotBlank)
+                    .map(Long::parseLong)
+                    .forEach(existingIds::add);
+        }
+
+        // 标记是否已添加
+        List<Map<String, Object>> availableUsersList = availableUsers.stream().map(user -> {
+            Map<String, Object> map = new HashMap<>();
+            map.put("id", user.getId());
+            map.put("userName", user.getUserName());
+            map.put("nickName", user.getNickName());
+            map.put("headImage", user.getHeadImage());
+//            map.put("headImageThumb", user.getHeadImageThumb());
+            map.put("isAdded", existingIds.contains(user.getId()));
+            return map;
+        }).collect(Collectors.toList());
+
+        result.put("availableUsers", availableUsersList);
+
+        return ResultUtils.success(result);
+    }
+
     @PostMapping("/changeCustomer")
     @Operation(summary = "转接客服", description = "转接客服")
     public Result register(@RequestBody JSONObject jsonObject) {
diff --git a/im-platform/src/main/java/com/bx/implatform/dto/LoginDTO.java b/im-platform/src/main/java/com/bx/implatform/dto/LoginDTO.java
index 26262f5..992e60d 100644
--- a/im-platform/src/main/java/com/bx/implatform/dto/LoginDTO.java
+++ b/im-platform/src/main/java/com/bx/implatform/dto/LoginDTO.java
@@ -37,4 +37,7 @@ public class LoginDTO {
     @Schema(description = "客服ID")
     private String keFuId;
 
+    @Schema(description = "可切换客服账号")
+    private String switchableAccountIds;
+
 }
diff --git a/im-platform/src/main/java/com/bx/implatform/entity/User.java b/im-platform/src/main/java/com/bx/implatform/entity/User.java
index 7ea084a..6825817 100644
--- a/im-platform/src/main/java/com/bx/implatform/entity/User.java
+++ b/im-platform/src/main/java/com/bx/implatform/entity/User.java
@@ -129,4 +129,11 @@ public class User {
      */
     private String welcomeMsg;
 
+    /**
+     * 可切换的账号IDs列表
+     */
+    private String switchableAccountIds;
+
+
+
 }
diff --git a/im-platform/src/main/java/com/bx/implatform/service/PrivateMessageService.java b/im-platform/src/main/java/com/bx/implatform/service/PrivateMessageService.java
index d6b0d10..9a2093b 100644
--- a/im-platform/src/main/java/com/bx/implatform/service/PrivateMessageService.java
+++ b/im-platform/src/main/java/com/bx/implatform/service/PrivateMessageService.java
@@ -6,6 +6,7 @@ import com.bx.implatform.entity.PrivateMessage;
 import com.bx.implatform.vo.PrivateMessageVO;
 
 import java.util.List;
+import java.util.Map;
 
 public interface PrivateMessageService extends IService<PrivateMessage> {
 
@@ -63,4 +64,12 @@ public interface PrivateMessageService extends IService<PrivateMessage> {
      * @param customerId 客服id
      */
     void changeMessageRecord(Long customerId,Long targetId, Long userId);
+
+    /**
+     * 批量获取指定用户的未读消息数
+     * @param userIds 要查询的用户ID列表
+     * @return key: 用户ID, value: 该用户的未读消息数
+     */
+    Map<Long, Integer> getUnreadCountsByUserIds(List<Long> userIds);
+
 }
diff --git a/im-platform/src/main/java/com/bx/implatform/service/UserService.java b/im-platform/src/main/java/com/bx/implatform/service/UserService.java
index b9f60bc..abc4a5a 100644
--- a/im-platform/src/main/java/com/bx/implatform/service/UserService.java
+++ b/im-platform/src/main/java/com/bx/implatform/service/UserService.java
@@ -29,6 +29,15 @@ public interface UserService extends IService<User> {
      */
     LoginVO loginCustom(LoginDTO dto);
 
+    /**
+     * 客服登录
+     *
+     * @param dto 登录dto
+     * @return 登录token
+     */
+    LoginVO addAccounts(LoginDTO dto);
+
+
     /**
      * 修改用户密码
      *
diff --git a/im-platform/src/main/java/com/bx/implatform/service/impl/PrivateMessageServiceImpl.java b/im-platform/src/main/java/com/bx/implatform/service/impl/PrivateMessageServiceImpl.java
index 0dec307..a28358e 100644
--- a/im-platform/src/main/java/com/bx/implatform/service/impl/PrivateMessageServiceImpl.java
+++ b/im-platform/src/main/java/com/bx/implatform/service/impl/PrivateMessageServiceImpl.java
@@ -32,10 +32,7 @@ import org.apache.commons.lang3.time.DateUtils;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
-import java.util.ArrayList;
-import java.util.Date;
-import java.util.List;
-import java.util.Objects;
+import java.util.*;
 import java.util.concurrent.ScheduledThreadPoolExecutor;
 import java.util.stream.Collectors;
 
@@ -242,6 +239,36 @@ public class PrivateMessageServiceImpl extends ServiceImpl<PrivateMessageMapper,
         return vos;
     }
 
+    @Override
+    public Map<Long, Integer> getUnreadCountsByUserIds(List<Long> userIds) {
+        if (userIds == null || userIds.isEmpty()) {
+            return new HashMap<>();
+        }
+
+        Map<Long, Integer> result = new HashMap<>();
+
+        // 初始化所有用户为0
+        for (Long userId : userIds) {
+            result.put(userId, 0);
+        }
+
+        // 批量查询未读消息（status = 0 表示未读）
+        LambdaQueryWrapper<PrivateMessage> wrapper = Wrappers.lambdaQuery();
+        wrapper.in(PrivateMessage::getRecvId, userIds)
+                .eq(PrivateMessage::getStatus, 0)  // 0 表示未读
+                .select(PrivateMessage::getRecvId);
+
+        List<PrivateMessage> messages = this.list(wrapper);
+
+        // 统计每个用户的未读消息数
+        for (PrivateMessage msg : messages) {
+            Long recvId = msg.getRecvId();
+            result.put(recvId, result.getOrDefault(recvId, 0) + 1);
+        }
+
+        return result;
+    }
+
     @Transactional(rollbackFor = Exception.class)
     @Override
     public void readedMessage(Long friendId) {
@@ -307,7 +334,7 @@ public class PrivateMessageServiceImpl extends ServiceImpl<PrivateMessageMapper,
     }
 
 
-    @Override
+//    @Override
     public void changeMessageRecord(Long customerId, Long targetId, Long userId) {
         List<PrivateMessage> list = new ArrayList<>();
 
diff --git a/im-platform/src/main/java/com/bx/implatform/service/impl/UserServiceImpl.java b/im-platform/src/main/java/com/bx/implatform/service/impl/UserServiceImpl.java
index 1faf1a3..08ba574 100644
--- a/im-platform/src/main/java/com/bx/implatform/service/impl/UserServiceImpl.java
+++ b/im-platform/src/main/java/com/bx/implatform/service/impl/UserServiceImpl.java
@@ -225,6 +225,82 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
         return randomCustomerId;
     }
 
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public LoginVO addAccounts(LoginDTO dto) {
+        // 获取当前登录用户
+        UserSession session = SessionContext.getSession();
+        Long currentUserId = session.getUserId();
+
+        if (ObjectUtil.isNull(currentUserId)) {
+            throw new GlobalException("用户未登录");
+        }
+
+        // 获取当前用户信息
+        User currentUser = this.getById(currentUserId);
+        if (ObjectUtil.isNull(currentUser)) {
+            throw new GlobalException("当前用户不存在");
+        }
+
+        // 验证要添加的账号
+        User targetUser = this.findUserByUserName(dto.getUserName());
+        if (Objects.isNull(targetUser)) {
+            throw new GlobalException("用户不存在");
+        }
+        if (targetUser.getIsCustomer() == 1) {
+            throw new GlobalException("只能添加客服账号");
+        }
+        if (targetUser.getIsBanned()) {
+            String tip = String.format("该账号因'%s'已被管理员封禁", targetUser.getReason());
+            throw new GlobalException(tip);
+        }
+        if (!passwordEncoder.matches(dto.getPassword(), targetUser.getPassword())) {
+            throw new GlobalException(ResultCode.PASSWOR_ERROR);
+        }
+
+        // 未设置套餐或套餐过期
+        if (imAgentService.isPackageExpire(targetUser.getUniqueToken())) {
+            throw new GlobalException("套餐已过期");
+        }
+
+        // 验证是否属于同一个代理（unique_token 相同）
+        if (!Objects.equals(currentUser.getUniqueToken(), targetUser.getUniqueToken())) {
+            throw new GlobalException("只能添加同属一个代理的客服账号");
+        }
+
+        // 不能添加自己
+        if (currentUserId.equals(targetUser.getId())) {
+            throw new GlobalException("不能添加当前登录的账号");
+        }
+
+        // 获取当前用户的可切换账号ID列表
+        String switchableIdsStr = currentUser.getSwitchableAccountIds();
+        Set<String> idSet = new HashSet<>();
+
+        if (StrUtil.isNotBlank(switchableIdsStr)) {
+            idSet.addAll(Arrays.asList(switchableIdsStr.split(",")));
+        }
+
+        // 添加新ID
+        String newId = String.valueOf(targetUser.getId());
+        if (idSet.contains(newId)) {
+            throw new GlobalException("该账号已在切换列表中");
+        }
+
+        idSet.add(newId);
+
+        // 更新当前用户的 switchable_account_ids
+        String newIdsStr = String.join(",", idSet);
+        currentUser.setSwitchableAccountIds(newIdsStr);
+        this.updateById(currentUser);
+
+        log.info("用户 {} 添加了可切换账号 {}，当前可切换账号列表: {}",
+                currentUserId, targetUser.getId(), newIdsStr);
+
+        LoginVO vo = new LoginVO();
+        return vo;
+    }
+
     @Override
     public LoginVO loginCustom(LoginDTO dto) {
         User user = this.findUserByUserName(dto.getUserName());
diff --git a/im-platform/src/main/java/com/bx/implatform/vo/LoginVO.java b/im-platform/src/main/java/com/bx/implatform/vo/LoginVO.java
index b662700..42a3403 100644
--- a/im-platform/src/main/java/com/bx/implatform/vo/LoginVO.java
+++ b/im-platform/src/main/java/com/bx/implatform/vo/LoginVO.java
@@ -26,4 +26,7 @@ public class LoginVO {
     @Schema(description = "当前登录用户信息")
     private User user;
 
+    @Schema(description = "可切换客服账号")
+    private String switchableAccountIds;
+
 }
diff --git a/im-web/src/components/setting/Setting.vue b/im-web/src/components/setting/Setting.vue
index e380269..42fa394 100644
--- a/im-web/src/components/setting/Setting.vue
+++ b/im-web/src/components/setting/Setting.vue
@@ -30,7 +30,7 @@
 				</el-form-item>
 			</el-form>
 			<span slot="footer" class="dialog-footer">
-				<el-button @click="onSwitchAccount" style="float: left;">切换账号</el-button>
+				<!-- <el-button @click="onSwitchAccount" style="float: left;">切换账号</el-button> -->
 				<el-button @click="onClose()">取 消</el-button>
 				<el-button type="primary" @click="onSubmit()">确 定</el-button>
 			</span>
diff --git a/im-web/src/view/Home.vue b/im-web/src/view/Home.vue
index d7d5358..a7f447a 100644
--- a/im-web/src/view/Home.vue
+++ b/im-web/src/view/Home.vue
@@ -1,57 +1,88 @@
 <template>
-	<div class="home-page" @click="closeUserInfo">
-		<div class="app-container" :class="{ fullscreen: configStore.fullScreen }">
-			<div class="navi-bar">
-				<div class="navi-bar-box">
-					<div class="top">
-						<div class="user-head-image">
-							<head-image :name="userStore.userInfo.nickName" :size="38"
-								:url="userStore.userInfo.headImageThumb" @click.native="showSettingDialog = true">
-							</head-image>
-						</div>
-						<div class="menu">
-							<router-link class="link" v-bind:to="'/home/chat'">
-								<div class="menu-item">
-									<span class="icon iconfont icon-chat"></span>
-									<div v-show="unreadCount > 0" class="unread-text">{{ unreadCount }}</div>
-								</div>
-							</router-link>
-							<router-link class="link" v-bind:to="'/home/friend'">
-								<div class="menu-item">
-									<span class="icon iconfont icon-friend"></span>
-								</div>
-							</router-link>
-							<!-- <router-link class="link" v-bind:to="'/home/group'">
-								<div class="menu-item">
-									<span class="icon iconfont icon-group" style="font-size: 28px"></span>
-								</div>
-							</router-link> -->
-						</div>
-					</div>
+  <div class="home-page" @click="closeUserInfo">
+    <div class="app-container" :class="{ fullscreen: configStore.fullScreen }">
+      <div class="navi-bar">
+        <div class="navi-bar-box">
+          <div class="top">
+            <!-- 用户头像区域 - 点击打开账号切换菜单 -->
+            <div class="user-head-image-wrapper">
+              <div class="user-head-image" @click.stop="toggleAccountMenu">
+                <head-image 
+                  :name="userStore.userInfo.nickName" 
+                  :size="38"
+                  :url="userStore.userInfo.headImageThumb">
+                </head-image>
+                <!-- 账号切换标识 -->
+                <!-- <div class="account-indicator">
+                  <span class="account-name">{{ userStore.userInfo.userName }}</span>
+                  <i class="el-icon-arrow-down" :class="{ active: showAccountMenu }"></i>
+                </div> -->
+              </div>
+            </div>
 
-					<div class="botoom">
-						<div class="bottom-item" @click="onSwtichFullScreen">
-							<i class="el-icon-full-screen"></i>
-						</div>
-						<div class="bottom-item" @click="showSetting">
-							<span class="icon iconfont icon-setting" style="font-size: 20px"></span>
-						</div>
-						<div class="bottom-item" @click="onExit()" title="退出">
-							<span class="icon iconfont icon-exit"></span>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="content-box">
-				<router-view></router-view>
-			</div>
-			<setting :visible="showSettingDialog" @close="closeSetting()"></setting>
-			<user-info ref="userInfo"></user-info>
-			<full-image ref="fullImage"></full-image>
-			<rtc-private-video ref="rtcPrivateVideo"></rtc-private-video>
-			<rtc-group-video ref="rtcGroupVideo"></rtc-group-video>
-		</div>
-	</div>
+            <div class="menu">
+              <!-- <router-link class="link" v-bind:to="'/home/chat'">
+                <div class="menu-item">
+                  <span class="icon iconfont icon-chat"></span>
+                  <div v-show="unreadCount > 0" class="unread-text">{{ unreadCount }}</div>
+                </div>
+              </router-link> -->
+              <!-- <router-link class="link" v-bind:to="'/home/friend'">
+                <div class="menu-item">
+                  <span class="icon iconfont icon-friend"></span>
+                </div>
+              </router-link> -->
+              <!-- <router-link class="link" v-bind:to="'/home/group'">
+                <div class="menu-item">
+                  <span class="icon iconfont icon-group" style="font-size: 28px"></span>
+                </div>
+              </router-link> -->
+            </div>
+          </div>
+
+          <div class="botoom">
+            <div class="bottom-item" @click="onSwtichFullScreen">
+              <i class="el-icon-full-screen"></i>
+            </div>
+            <div class="bottom-item" @click="showSetting">
+              <span class="icon iconfont icon-setting" style="font-size: 20px"></span>
+            </div>
+            <div class="bottom-item" @click="onExit()" title="退出">
+              <span class="icon iconfont icon-exit"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="content-box">
+        <router-view></router-view>
+      </div>
+      
+      <!-- 账号切换菜单 -->
+      <account-switch-menu
+        :visible="showAccountMenu"
+        :currentUser="userStore.userInfo"
+        :position="menuPosition"
+        @switch="onSwitchAccount"
+        @add-account="onAddAccount"
+        @logout="onExit"
+        @close="showAccountMenu = false">
+      </account-switch-menu>
+      
+      <!-- 遮罩层 -->
+      <div 
+        v-if="showAccountMenu" 
+        class="menu-mask" 
+        @click="showAccountMenu = false">
+      </div>
+      
+      <setting :visible="showSettingDialog" @close="closeSetting()"></setting>
+      <user-info ref="userInfo"></user-info>
+      <full-image ref="fullImage"></full-image>
+      <rtc-private-video ref="rtcPrivateVideo"></rtc-private-video>
+      <rtc-group-video ref="rtcGroupVideo"></rtc-group-video>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -62,565 +93,693 @@ import FullImage from '../components/common/FullImage.vue';
 import RtcPrivateVideo from '../components/rtc/RtcPrivateVideo.vue';
 import RtcPrivateAcceptor from '../components/rtc/RtcPrivateAcceptor.vue';
 import RtcGroupVideo from '../components/rtc/RtcGroupVideo.vue';
+import AccountSwitchMenu from '../components/account/AccountSwitchMenu.vue';
 
 export default {
-	components: {
-		HeadImage,
-		Setting,
-		UserInfo,
-		FullImage,
-		RtcPrivateVideo,
-		RtcPrivateAcceptor,
-		RtcGroupVideo
-	},
-	data() {
-		return {
-			showSettingDialog: false,
-			lastPlayAudioTime: new Date().getTime() - 1000,
-			reconnecting: false,
-			privateMessagesBuffer: [],
-			groupMessagesBuffer: []
-		}
-	},
-	methods: {
-		init() {
-			this.$eventBus.$on('openPrivateVideo', (rctInfo) => {
-				// 进入单人视频通话
-				this.$refs.rtcPrivateVideo.open(rctInfo);
-			});
-			this.$eventBus.$on('openGroupVideo', (rctInfo) => {
-				// 进入多人视频通话
-				this.$refs.rtcGroupVideo.open(rctInfo);
-			});
-			this.$eventBus.$on('openUserInfo', (user, pos) => {
-				// 打开用户卡片
-				this.$refs.userInfo.open(user, pos);
-			});
-			this.$eventBus.$on('openFullImage', url => {
-				// 图片全屏
-				this.$refs.fullImage.open(url);
-			});
-			this.configStore.setAppInit(false)
-			this.loadStore().then(() => {
-				// ws初始化
-				this.$wsApi.connect(process.env.VUE_APP_WS_URL, sessionStorage.getItem("accessToken"));
-				this.$wsApi.onConnect(() => {
-					if (this.reconnecting) {
-						this.onReconnectWs();
-					} else {
-						// 加载离线消息
-						this.pullOfflineMessage();
-						this.configStore.setAppInit(true);
-					}
-				});
-				this.$wsApi.onMessage((cmd, msgInfo) => {
-					if (cmd == 2) {
-						// 关闭ws
-						this.$wsApi.close(3000)
-						// 异地登录，强制下线
-						this.$alert("您已在其他地方登录，将被强制下线", "强制下线通知", {
-							confirmButtonText: '确定',
-							callback: action => {
-								location.href = "/";
-							}
-						});
-					} else if (cmd == 3) {
-						if (!this.configStore.appInit || this.chatStore.loading) {
-							// 如果正在拉取离线消息，先放进缓存区，等待消息拉取完成再处理，防止消息乱序
-							this.privateMessagesBuffer.push(msgInfo);
-						} else {
-							// 插入私聊消息
-							this.handlePrivateMessage(msgInfo);
-						}
-					} else if (cmd == 4) {
-						if (!this.configStore.appInit || this.chatStore.loading) {
-							// 如果正在拉取离线消息，先放进缓存区，等待消息拉取完成再处理，防止消息乱序
-							this.groupMessagesBuffer.push(msgInfo);
-						} else {
-							// 插入群聊消息
-							this.handleGroupMessage(msgInfo);
-						}
-					} else if (cmd == 5) {
-						// 处理系统消息
-						this.handleSystemMessage(msgInfo);
-					}
-				});
-				this.$wsApi.onClose((e) => {
-					if (e.code != 3000) {
-						// 断线重连
-						if (!this.reconnecting) {
-							this.reconnectWs();
-							this.configStore.setAppInit(false)
-						}
-					}
-				});
-			}).catch((e) => {
-				console.log("初始化失败", e);
-			})
-		},
-		reconnectWs() {
-			// 记录标志
-			this.reconnecting = true;
-			// 重新加载一次个人信息，目的是为了保证网络已经正常且token有效
-			this.userStore.loadUser().then(() => {
-				// 断线重连
-				this.$message.error("连接断开，正在尝试重新连接...");
-				this.$wsApi.reconnect(process.env.VUE_APP_WS_URL, sessionStorage.getItem(
-					"accessToken"));
-			}).catch(() => {
-				// 10s后重试
-				setTimeout(() => this.reconnectWs(), 10000)
-			})
-		},
-		onReconnectWs() {
-			// 重连成功
-			this.reconnecting = false;
-			// 重新加载群和好友
-			const promises = [];
-			promises.push(this.friendStore.loadFriend());
-			promises.push(this.groupStore.loadGroup());
-			Promise.all(promises).then(() => {
-				// 加载离线消息
-				this.pullOfflineMessage();
-				this.configStore.setAppInit(true)
-				this.$message.success("重新连接成功");
-			}).catch(() => {
-				this.$message.error("初始化失败");
-				this.onExit();
-			})
-		},
-		loadStore() {
-			return this.userStore.loadUser().then(() => {
-				const promises = [];
-				promises.push(this.friendStore.loadFriend());
-				promises.push(this.groupStore.loadGroup());
-				promises.push(this.chatStore.loadChat());
-				promises.push(this.configStore.loadConfig());
-				return Promise.all(promises);
-			})
-		},
-		unloadStore() {
-			this.friendStore.clear();
-			this.groupStore.clear();
-			this.chatStore.clear();
-			this.userStore.clear();
-		},
-		pullOfflineMessage() {
-			this.chatStore.setLoading(true);
-			const promises = [];
-			promises.push(this.pullPrivateOfflineMessage(this.chatStore.privateMsgMaxId));
-			promises.push(this.pullGroupOfflineMessage(this.chatStore.groupMsgMaxId));
-			Promise.all(promises).then(messages => {
-				// 处理离线消息
-				messages[0].forEach(m => this.handlePrivateMessage(m));
-				messages[1].forEach(m => this.handleGroupMessage(m));
-				// 处理缓冲区收到的实时消息
-				this.privateMessagesBuffer.forEach(m => this.handlePrivateMessage(m));
-				this.groupMessagesBuffer.forEach(m => this.handleGroupMessage(m));
-				// 清空缓冲区
-				this.privateMessagesBuffer = [];
-				this.groupMessagesBuffer = [];
-				// 关闭加载离线标记
-				this.chatStore.setLoading(false);
-				// 刷新会话
-				this.chatStore.refreshChats();
-			}).catch((e) => {
-				console.log(e)
-				this.$message.error("拉取离线消息失败");
-				this.onExit();
-			})
-		},
-		pullPrivateOfflineMessage(minId) {
-			return this.$http({
-				url: "/message/private/loadOfflineMessage?minId=" + minId,
-				method: 'GET'
-			})
-		},
-		pullGroupOfflineMessage(minId) {
-			return this.$http({
-				url: "/message/group/loadOfflineMessage?minId=" + minId,
-				method: 'GET'
-			})
-		},
-		handlePrivateMessage(msg) {
-			// 标记这条消息是不是自己发的
-			msg.selfSend = msg.sendId == this.userStore.userInfo.id;
-			// 好友id
-			let friendId = msg.selfSend ? msg.recvId : msg.sendId;
-			// 会话信息
-			let chatInfo = {
-				type: 'PRIVATE',
-				targetId: friendId
-			}
-			// 消息已读处理，清空已读数量
-			if (msg.type == this.$enums.MESSAGE_TYPE.READED) {
-				this.chatStore.resetUnreadCount(chatInfo)
-				return;
-			}
-			// 消息回执处理,改消息状态为已读
-			if (msg.type == this.$enums.MESSAGE_TYPE.RECEIPT) {
-				this.chatStore.readedMessage({
-					friendId: msg.sendId
-				})
-				return;
-			}
-			// 消息撤回
-			if (msg.type == this.$enums.MESSAGE_TYPE.RECALL) {
-				this.chatStore.recallMessage(msg, chatInfo)
-				return;
-			}
-			// 新增好友
-			if (msg.type == this.$enums.MESSAGE_TYPE.FRIEND_NEW) {
-				this.friendStore.addFriend(JSON.parse(msg.content));
-				return;
-			}
-			// 删除好友
-			if (msg.type == this.$enums.MESSAGE_TYPE.FRIEND_DEL) {
-				this.friendStore.removeFriend(friendId);
-				return;
-			}
-			// 对好友设置免打扰
-			if (msg.type == this.$enums.MESSAGE_TYPE.FRIEND_DND) {
-				this.friendStore.setDnd(friendId, JSON.parse(msg.content));
-				this.chatStore.setDnd(chatInfo, JSON.parse(msg.content));
-				return;
-			}
-			// 单人webrtc 信令
-			if (this.$msgType.isRtcPrivate(msg.type)) {
-				this.$refs.rtcPrivateVideo.onRTCMessage(msg)
-				return;
-			}
-			// 插入消息
-			if (this.$msgType.isNormal(msg.type) || this.$msgType.isTip(msg.type) || this.$msgType.isAction(msg.type)) {
-				let friend = this.loadFriendInfo(friendId);
-				this.insertPrivateMessage(friend, msg);
-			}
-		},
-		insertPrivateMessage(friend, msg) {
-			let chatInfo = {
-				type: 'PRIVATE',
-				targetId: friend.id,
-				showName: friend.nickName,
-				headImage: friend.headImage,
-				isDnd: friend.isDnd
-			};
-			// 打开会话
-			this.chatStore.openChat(chatInfo);
-			// 插入消息
-			this.chatStore.insertMessage(msg, chatInfo);
-			// 播放提示音
-			if (!friend.isDnd && !this.chatStore.loading && !msg.selfSend && this.$msgType.isNormal(msg.type) &&
-				msg.status != this.$enums.MESSAGE_STATUS.READED) {
-				this.playAudioTip();
-			}
-		},
-		handleGroupMessage(msg) {
-			// 标记这条消息是不是自己发的
-			msg.selfSend = msg.sendId == this.userStore.userInfo.id;
-			let chatInfo = {
-				type: 'GROUP',
-				targetId: msg.groupId
-			}
-			// 消息已读处理
-			if (msg.type == this.$enums.MESSAGE_TYPE.READED) {
-				// 我已读对方的消息，清空已读数量
-				this.chatStore.resetUnreadCount(chatInfo)
-				return;
-			}
-			// 消息回执处理
-			if (msg.type == this.$enums.MESSAGE_TYPE.RECEIPT) {
-				// 更新消息已读人数
-				let msgInfo = {
-					id: msg.id,
-					groupId: msg.groupId,
-					readedCount: msg.readedCount,
-					receiptOk: msg.receiptOk
-				};
-				this.chatStore.updateMessage(msgInfo, chatInfo)
-				return;
-			}
-			// 消息撤回
-			if (msg.type == this.$enums.MESSAGE_TYPE.RECALL) {
-				this.chatStore.recallMessage(msg, chatInfo)
-				return;
-			}
-			// 新增群
-			if (msg.type == this.$enums.MESSAGE_TYPE.GROUP_NEW) {
-				this.groupStore.addGroup(JSON.parse(msg.content));
-				return;
-			}
-			// 删除群
-			if (msg.type == this.$enums.MESSAGE_TYPE.GROUP_DEL) {
-				this.groupStore.removeGroup(msg.groupId);
-				return;
-			}
-			// 对群设置免打扰
-			if (msg.type == this.$enums.MESSAGE_TYPE.GROUP_DND) {
-				this.groupStore.setDnd(msg.groupId, JSON.parse(msg.content));
-				this.chatStore.setDnd(chatInfo, JSON.parse(msg.content));
-				return;
-			}
-			// 群视频信令
-			if (this.$msgType.isRtcGroup(msg.type)) {
-				this.$nextTick(() => {
-					this.$refs.rtcGroupVideo.onRTCMessage(msg);
-				})
-				return;
-			}
-			// 插入群聊消息
-			if (this.$msgType.isNormal(msg.type) || this.$msgType.isTip(msg.type) || this.$msgType.isAction(msg.type)) {
-				let group = this.loadGroupInfo(msg.groupId);
-				this.insertGroupMessage(group, msg);
-			}
-		},
-		insertGroupMessage(group, msg) {
-			let chatInfo = {
-				type: 'GROUP',
-				targetId: group.id,
-				showName: group.showGroupName,
-				headImage: group.headImageThumb,
-				isDnd: group.isDnd
-			};
-			// 打开会话
-			this.chatStore.openChat(chatInfo);
-			// 插入消息
-			this.chatStore.insertMessage(msg, chatInfo);
-			// 播放提示音
-			if (!group.isDnd && !this.chatStore.loading &&
-				!msg.selfSend && this.$msgType.isNormal(msg.type) &&
-				msg.status != this.$enums.MESSAGE_STATUS.READED) {
-				this.playAudioTip();
-			}
-		},
-		handleSystemMessage(msg) {
-			// 用户被封禁
-			if (msg.type == this.$enums.MESSAGE_TYPE.USER_BANNED) {
-				this.$wsApi.close(3000);
-				this.$alert("您的账号已被管理员封禁,原因:" + msg.content, "账号被封禁", {
-					confirmButtonText: '确定',
-					callback: () => {
-						this.onExit();
-					}
-				});
-				return;
-			}
-		},
-		closeUserInfo() {
-			this.$refs.userInfo.close();
-		},
-		onSwtichFullScreen() {
-			this.configStore.setFullScreen(!this.configStore.fullScreen);
-		},
-		onExit() {
-			this.unloadStore();
-			this.configStore.setAppInit(false);
-			this.$wsApi.close(3000);
-			sessionStorage.removeItem("accessToken");
-			location.href = "/";
-		},
-		playAudioTip() {
-			// 防止过于密集播放
-			if (new Date().getTime() - this.lastPlayAudioTime > 1000) {
-				this.lastPlayAudioTime = new Date().getTime();
-				let audio = new Audio();
-				let url = require(`@/assets/audio/tip.mp3`);
-				audio.src = url;
-				audio.play();
-			}
-
-		},
-		showSetting() {
-			this.showSettingDialog = true;
-		},
-		closeSetting() {
-			this.showSettingDialog = false;
-		},
-		loadFriendInfo(id) {
-			let friend = this.friendStore.findFriend(id);
-			if (!friend) {
-				friend = {
-					id: id,
-					showNickName: "未知用户",
-					headImage: ""
-				}
-			}
-			return friend;
-		},
-		loadGroupInfo(id) {
-			let group = this.groupStore.findGroup(id);
-			if (!group) {
-				group = {
-					id: id,
-					showGroupName: "未知群聊",
-					headImageThumb: ""
-				}
-			}
-			return group;
-		}
-	},
-	computed: {
-		unreadCount() {
-			let unreadCount = 0;
-			let chats = this.chatStore.chats;
-			chats.forEach(chat => {
-				if (!chat.delete && !chat.isDnd) {
-					unreadCount += chat.unreadCount
-				}
-			});
-			return unreadCount;
-		}
-	},
-	watch: {
-		unreadCount: {
-			handler(newCount, oldCount) {
-				let tip = newCount > 0 ? `${newCount}条未读` : "";
-				this.$elm.setTitleTip(tip);
-			},
-			immediate: true
-		}
-	},
-	mounted() {
-		this.init();
-	},
-	unmounted() {
-		this.$wsApi.close();
-	}
-}
+  components: {
+    HeadImage,
+    Setting,
+    UserInfo,
+    FullImage,
+    RtcPrivateVideo,
+    RtcPrivateAcceptor,
+    RtcGroupVideo,
+    AccountSwitchMenu
+  },
+  data() {
+    return {
+      showSettingDialog: false,
+      showAccountMenu: false,
+      menuPosition: { x: 0, y: 0 },
+      lastPlayAudioTime: new Date().getTime() - 1000,
+      reconnecting: false,
+      privateMessagesBuffer: [],
+      groupMessagesBuffer: []
+    }
+  },
+  methods: {
+    init() {
+      this.$eventBus.$on('openPrivateVideo', (rctInfo) => {
+        this.$refs.rtcPrivateVideo.open(rctInfo);
+      });
+      this.$eventBus.$on('openGroupVideo', (rctInfo) => {
+        this.$refs.rtcGroupVideo.open(rctInfo);
+      });
+      this.$eventBus.$on('openUserInfo', (user, pos) => {
+        this.$refs.userInfo.open(user, pos);
+      });
+      this.$eventBus.$on('openFullImage', url => {
+        this.$refs.fullImage.open(url);
+      });
+      
+      this.configStore.setAppInit(false);
+      
+      this.loadStore().then(() => {
+        // ws初始化
+        this.$wsApi.connect(process.env.VUE_APP_WS_URL, sessionStorage.getItem("accessToken"));
+        this.$wsApi.onConnect(() => {
+          if (this.reconnecting) {
+            this.onReconnectWs();
+          } else {
+            this.pullOfflineMessage();
+            this.configStore.setAppInit(true);
+          }
+        });
+        
+        this.$wsApi.onMessage((cmd, msgInfo) => {
+          if (cmd == 2) {
+            this.$wsApi.close(3000);
+            this.$alert("您已在其他地方登录，将被强制下线", "强制下线通知", {
+              confirmButtonText: '确定',
+              callback: action => {
+                location.href = "/";
+              }
+            });
+          } else if (cmd == 3) {
+            if (!this.configStore.appInit || this.chatStore.loading) {
+              this.privateMessagesBuffer.push(msgInfo);
+            } else {
+              this.handlePrivateMessage(msgInfo);
+            }
+          } else if (cmd == 4) {
+            if (!this.configStore.appInit || this.chatStore.loading) {
+              this.groupMessagesBuffer.push(msgInfo);
+            } else {
+              this.handleGroupMessage(msgInfo);
+            }
+          } else if (cmd == 5) {
+            this.handleSystemMessage(msgInfo);
+          }
+        });
+        
+        this.$wsApi.onClose((e) => {
+          if (e.code != 3000) {
+            if (!this.reconnecting) {
+              this.reconnectWs();
+              this.configStore.setAppInit(false);
+            }
+          }
+        });
+      }).catch((e) => {
+        console.log("初始化失败", e);
+      });
+    },
+    
+    // 切换账号菜单
+    toggleAccountMenu(event) {
+      if (this.showAccountMenu) {
+        this.showAccountMenu = false;
+        return;
+      }
+      
+      const trigger = event.currentTarget;
+      const rect = trigger.getBoundingClientRect();
+      
+      // 菜单显示在头像右侧
+      this.menuPosition = {
+        x: rect.right + 10,
+        y: rect.top
+      };
+      
+      this.showAccountMenu = true;
+    },
+    
+    // 切换到其他账号
+    async onSwitchAccount(targetUser) {
+      this.showAccountMenu = false;
+      
+      const loading = this.$loading({
+        lock: true,
+        text: '正在切换账号...',
+        spinner: 'el-icon-loading'
+      });
+      
+      try {
+        const res = await this.$http({
+          url: '/user/switchAccount',
+          method: 'post',
+          data: {
+            targetUserId: targetUser.id,
+            terminal: this.getTerminalType()
+          }
+        });
+        
+        const loginData = res;
+        
+        if (loginData.user) {
+          this.setCookie('username', loginData.user.userName);
+          
+          sessionStorage.setItem("accessToken", loginData.accessToken);
+          sessionStorage.setItem("refreshToken", loginData.refreshToken);
+          
+          localStorage.setItem('userInfo', JSON.stringify(loginData.user));
+          this.userStore.setUserInfo(loginData.user);
+        }
+        
+        loading.close();
+        this.$message.success(`已切换到客服账号：${targetUser.nickName}`);
+        
+        // 关闭 WebSocket 连接
+        this.$wsApi.close(3000);
+        
+        setTimeout(() => {
+          window.location.reload();
+        }, 300);
+        
+      } catch (error) {
+        loading.close();
+        if (error !== 'cancel') {
+          console.error('切换账号失败:', error);
+          this.$message.error('切换账号失败');
+        }
+      }
+    },
+    
+    // 获取终端类型
+    getTerminalType() {
+      const userAgent = navigator.userAgent;
+      if (/mobile/i.test(userAgent)) {
+        return 2;
+      }
+      if (/tablet/i.test(userAgent)) {
+        return 3;
+      }
+      return 1;
+    },
+    
+    setCookie(name, value) {
+      document.cookie = name + "=" + escape(value);
+    },
+    
+    // 添加新账号
+    onAddAccount() {
+      this.showAccountMenu = false;
+      // 跳转到登录页
+      this.unloadStore();
+      this.configStore.setAppInit(false);
+      this.$wsApi.close(3000);
+      sessionStorage.removeItem("accessToken");
+      location.href = "/";
+    },
+    
+    reconnectWs() {
+      this.reconnecting = true;
+      this.userStore.loadUser().then(() => {
+        this.$message.error("连接断开，正在尝试重新连接...");
+        this.$wsApi.reconnect(process.env.VUE_APP_WS_URL, sessionStorage.getItem("accessToken"));
+      }).catch(() => {
+        setTimeout(() => this.reconnectWs(), 10000);
+      });
+    },
+    
+    onReconnectWs() {
+      this.reconnecting = false;
+      const promises = [];
+      promises.push(this.friendStore.loadFriend());
+      promises.push(this.groupStore.loadGroup());
+      Promise.all(promises).then(() => {
+        this.pullOfflineMessage();
+        this.configStore.setAppInit(true);
+        this.$message.success("重新连接成功");
+      }).catch(() => {
+        this.$message.error("初始化失败");
+        this.onExit();
+      });
+    },
+    
+    loadStore() {
+      return this.userStore.loadUser().then(() => {
+        const promises = [];
+        promises.push(this.friendStore.loadFriend());
+        promises.push(this.groupStore.loadGroup());
+        promises.push(this.chatStore.loadChat());
+        promises.push(this.configStore.loadConfig());
+        return Promise.all(promises);
+      });
+    },
+    
+    unloadStore() {
+      this.friendStore.clear();
+      this.groupStore.clear();
+      this.chatStore.clear();
+      this.userStore.clear();
+    },
+    
+    pullOfflineMessage() {
+      this.chatStore.setLoading(true);
+      const promises = [];
+      promises.push(this.pullPrivateOfflineMessage(this.chatStore.privateMsgMaxId));
+      promises.push(this.pullGroupOfflineMessage(this.chatStore.groupMsgMaxId));
+      Promise.all(promises).then(messages => {
+        messages[0].forEach(m => this.handlePrivateMessage(m));
+        messages[1].forEach(m => this.handleGroupMessage(m));
+        this.privateMessagesBuffer.forEach(m => this.handlePrivateMessage(m));
+        this.groupMessagesBuffer.forEach(m => this.handleGroupMessage(m));
+        this.privateMessagesBuffer = [];
+        this.groupMessagesBuffer = [];
+        this.chatStore.setLoading(false);
+        this.chatStore.refreshChats();
+      }).catch((e) => {
+        console.log(e);
+        this.$message.error("拉取离线消息失败");
+        this.onExit();
+      });
+    },
+    
+    pullPrivateOfflineMessage(minId) {
+      return this.$http({
+        url: "/message/private/loadOfflineMessage?minId=" + minId,
+        method: 'GET'
+      });
+    },
+    
+    pullGroupOfflineMessage(minId) {
+      return this.$http({
+        url: "/message/group/loadOfflineMessage?minId=" + minId,
+        method: 'GET'
+      });
+    },
+    
+    handlePrivateMessage(msg) {
+      msg.selfSend = msg.sendId == this.userStore.userInfo.id;
+      let friendId = msg.selfSend ? msg.recvId : msg.sendId;
+      let chatInfo = {
+        type: 'PRIVATE',
+        targetId: friendId
+      };
+      
+      if (msg.type == this.$enums.MESSAGE_TYPE.READED) {
+        this.chatStore.resetUnreadCount(chatInfo);
+        return;
+      }
+      if (msg.type == this.$enums.MESSAGE_TYPE.RECEIPT) {
+        this.chatStore.readedMessage({ friendId: msg.sendId });
+        return;
+      }
+      if (msg.type == this.$enums.MESSAGE_TYPE.RECALL) {
+        this.chatStore.recallMessage(msg, chatInfo);
+        return;
+      }
+      if (msg.type == this.$enums.MESSAGE_TYPE.FRIEND_NEW) {
+        this.friendStore.addFriend(JSON.parse(msg.content));
+        return;
+      }
+      if (msg.type == this.$enums.MESSAGE_TYPE.FRIEND_DEL) {
+        this.friendStore.removeFriend(friendId);
+        return;
+      }
+      if (msg.type == this.$enums.MESSAGE_TYPE.FRIEND_DND) {
+        this.friendStore.setDnd(friendId, JSON.parse(msg.content));
+        this.chatStore.setDnd(chatInfo, JSON.parse(msg.content));
+        return;
+      }
+      if (this.$msgType.isRtcPrivate(msg.type)) {
+        this.$refs.rtcPrivateVideo.onRTCMessage(msg);
+        return;
+      }
+      if (this.$msgType.isNormal(msg.type) || this.$msgType.isTip(msg.type) || this.$msgType.isAction(msg.type)) {
+        let friend = this.loadFriendInfo(friendId);
+        this.insertPrivateMessage(friend, msg);
+      }
+    },
+    
+    insertPrivateMessage(friend, msg) {
+      let chatInfo = {
+        type: 'PRIVATE',
+        targetId: friend.id,
+        showName: friend.nickName,
+        headImage: friend.headImage,
+        isDnd: friend.isDnd
+      };
+      this.chatStore.openChat(chatInfo);
+      this.chatStore.insertMessage(msg, chatInfo);
+      if (!friend.isDnd && !this.chatStore.loading && !msg.selfSend && 
+          this.$msgType.isNormal(msg.type) && msg.status != this.$enums.MESSAGE_STATUS.READED) {
+        this.playAudioTip();
+      }
+    },
+    
+    handleGroupMessage(msg) {
+      msg.selfSend = msg.sendId == this.userStore.userInfo.id;
+      let chatInfo = {
+        type: 'GROUP',
+        targetId: msg.groupId
+      };
+      
+      if (msg.type == this.$enums.MESSAGE_TYPE.READED) {
+        this.chatStore.resetUnreadCount(chatInfo);
+        return;
+      }
+      if (msg.type == this.$enums.MESSAGE_TYPE.RECEIPT) {
+        let msgInfo = {
+          id: msg.id,
+          groupId: msg.groupId,
+          readedCount: msg.readedCount,
+          receiptOk: msg.receiptOk
+        };
+        this.chatStore.updateMessage(msgInfo, chatInfo);
+        return;
+      }
+      if (msg.type == this.$enums.MESSAGE_TYPE.RECALL) {
+        this.chatStore.recallMessage(msg, chatInfo);
+        return;
+      }
+      if (msg.type == this.$enums.MESSAGE_TYPE.GROUP_NEW) {
+        this.groupStore.addGroup(JSON.parse(msg.content));
+        return;
+      }
+      if (msg.type == this.$enums.MESSAGE_TYPE.GROUP_DEL) {
+        this.groupStore.removeGroup(msg.groupId);
+        return;
+      }
+      if (msg.type == this.$enums.MESSAGE_TYPE.GROUP_DND) {
+        this.groupStore.setDnd(msg.groupId, JSON.parse(msg.content));
+        this.chatStore.setDnd(chatInfo, JSON.parse(msg.content));
+        return;
+      }
+      if (this.$msgType.isRtcGroup(msg.type)) {
+        this.$nextTick(() => {
+          this.$refs.rtcGroupVideo.onRTCMessage(msg);
+        });
+        return;
+      }
+      if (this.$msgType.isNormal(msg.type) || this.$msgType.isTip(msg.type) || this.$msgType.isAction(msg.type)) {
+        let group = this.loadGroupInfo(msg.groupId);
+        this.insertGroupMessage(group, msg);
+      }
+    },
+    
+    insertGroupMessage(group, msg) {
+      let chatInfo = {
+        type: 'GROUP',
+        targetId: group.id,
+        showName: group.showGroupName,
+        headImage: group.headImageThumb,
+        isDnd: group.isDnd
+      };
+      this.chatStore.openChat(chatInfo);
+      this.chatStore.insertMessage(msg, chatInfo);
+      if (!group.isDnd && !this.chatStore.loading && !msg.selfSend && 
+          this.$msgType.isNormal(msg.type) && msg.status != this.$enums.MESSAGE_STATUS.READED) {
+        this.playAudioTip();
+      }
+    },
+    
+    handleSystemMessage(msg) {
+      if (msg.type == this.$enums.MESSAGE_TYPE.USER_BANNED) {
+        this.$wsApi.close(3000);
+        this.$alert("您的账号已被管理员封禁,原因:" + msg.content, "账号被封禁", {
+          confirmButtonText: '确定',
+          callback: () => {
+            this.onExit();
+          }
+        });
+        return;
+      }
+    },
+    
+    closeUserInfo() {
+      if (this.$refs.userInfo) {
+        this.$refs.userInfo.close();
+      }
+      this.showAccountMenu = false;
+    },
+    
+    onSwtichFullScreen() {
+      this.configStore.setFullScreen(!this.configStore.fullScreen);
+    },
+    
+    onExit() {
+      this.showAccountMenu = false;
+      this.unloadStore();
+      this.configStore.setAppInit(false);
+      this.$wsApi.close(3000);
+      sessionStorage.removeItem("accessToken");
+      location.href = "/";
+    },
+    
+    playAudioTip() {
+      if (new Date().getTime() - this.lastPlayAudioTime > 1000) {
+        this.lastPlayAudioTime = new Date().getTime();
+        let audio = new Audio();
+        let url = require(`@/assets/audio/tip.mp3`);
+        audio.src = url;
+        audio.play();
+      }
+    },
+    
+    showSetting() {
+      this.showSettingDialog = true;
+    },
+    
+    closeSetting() {
+      this.showSettingDialog = false;
+    },
+    
+    loadFriendInfo(id) {
+      let friend = this.friendStore.findFriend(id);
+      if (!friend) {
+        friend = {
+          id: id,
+          nickName: "未知用户",
+          headImage: ""
+        };
+      }
+      return friend;
+    },
+    
+    loadGroupInfo(id) {
+      let group = this.groupStore.findGroup(id);
+      if (!group) {
+        group = {
+          id: id,
+          showGroupName: "未知群聊",
+          headImageThumb: ""
+        };
+      }
+      return group;
+    }
+  },
+  computed: {
+    unreadCount() {
+      let unreadCount = 0;
+      let chats = this.chatStore.chats;
+      chats.forEach(chat => {
+        if (!chat.delete && !chat.isDnd) {
+          unreadCount += chat.unreadCount;
+        }
+      });
+      return unreadCount;
+    }
+  },
+  watch: {
+    unreadCount: {
+      handler(newCount, oldCount) {
+        let tip = newCount > 0 ? `${newCount}条未读` : "";
+        this.$elm.setTitleTip(tip);
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  unmounted() {
+    this.$wsApi.close();
+  }
+};
 </script>
 
 <style scoped lang="scss">
 .home-page {
-	height: 100vh;
-	width: 100vw;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	border-radius: 4px;
-	overflow: hidden;
-	background: var(--im-color-primary-light-9);
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--im-color-primary-light-9);
 
-	.app-container {
-		width: 62vw;
-		height: 80vh;
-		display: flex;
-		min-height: 600px;
-		min-width: 970px;
-		position: absolute;
-		border-radius: 4px;
-		overflow: hidden;
-		box-shadow: var(--im-box-shadow-dark);
-		transition: 0.2s;
+  .app-container {
+    width: 62vw;
+    height: 80vh;
+    display: flex;
+    min-height: 600px;
+    min-width: 970px;
+    position: absolute;
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: var(--im-box-shadow-dark);
+    transition: 0.2s;
 
-		&.fullscreen {
-			transition: 0.2s;
-			width: 100vw;
-			height: 100vh;
-		}
-	}
+    &.fullscreen {
+      transition: 0.2s;
+      width: 100vw;
+      height: 100vh;
+    }
+  }
 
-	.navi-bar {
-		--icon-font-size: 22px;
-		--width: 60px;
-		width: var(--width);
-		background: var(--im-color-primary-light-1);
-		padding-top: 20px;
+  .navi-bar {
+    --icon-font-size: 22px;
+    --width: 60px;
+    width: var(--width);
+    background: var(--im-color-primary-light-1);
+    padding-top: 20px;
 
-		.navi-bar-box {
-			height: 100%;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
+    .navi-bar-box {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
 
-			.botoom {
-				margin-bottom: 30px;
-			}
-		}
+      .botoom {
+        margin-bottom: 30px;
+      }
+    }
 
-		.user-head-image {
-			display: flex;
-			justify-content: center;
-		}
+    .user-head-image-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      
+      .user-head-image {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        cursor: pointer;
+        transition: all 0.2s;
+        
+        &:hover {
+          transform: scale(1.05);
+          
+          .account-indicator {
+            background: rgba(255, 255, 255, 0.25);
+          }
+        }
+        
+        .account-indicator {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-top: 8px;
+          padding: 4px 10px;
+          background: rgba(255, 255, 255, 0.15);
+          border-radius: 12px;
+          transition: all 0.2s;
+          max-width: 65px;
+          
+          .account-name {
+            font-size: 11px;
+            color: #fff;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 3px;
+          }
+          
+          .el-icon-arrow-down {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.8);
+            transition: transform 0.2s;
+            
+            &.active {
+              transform: rotate(180deg);
+            }
+          }
+        }
+      }
+    }
 
-		.menu {
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-content: center;
-			flex-wrap: wrap;
-			margin-top: 20px;
+    .menu {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-content: center;
+      flex-wrap: wrap;
+      margin-top: 20px;
 
-			.link {
-				text-decoration: none;
-			}
+      .link {
+        text-decoration: none;
+      }
 
-			.router-link-active .menu-item {
-				color: white;
-				background: var(--im-color-primary-light-2);
-			}
+      .router-link-active .menu-item {
+        color: white;
+        background: var(--im-color-primary-light-2);
+      }
 
-			.link:not(.router-link-active) .menu-item:hover {
-				background: var(--im-color-primary);
-				transform: scale(1.1);
-			}
+      .link:not(.router-link-active) .menu-item:hover {
+        background: var(--im-color-primary);
+        transform: scale(1.1);
+      }
 
-			.menu-item {
-				position: relative;
-				color: #eee;
-				width: var(--width);
-				height: 46px;
-				width: 46px;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				margin-top: 30px;
-				border-radius: 10px;
+      .menu-item {
+        position: relative;
+        color: #eee;
+        width: 46px;
+        height: 46px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 30px;
+        border-radius: 10px;
 
-				.icon {
-					font-size: var(--icon-font-size)
-				}
+        .icon {
+          font-size: var(--icon-font-size);
+        }
 
-				.unread-text {
-					position: absolute;
-					background-color: var(--im-color-danger);
-					left: 28px;
-					top: 8px;
-					color: white;
-					border-radius: 30px;
-					padding: 0 5px;
-					font-size: var(--im-font-size-smaller);
-					text-align: center;
-					white-space: nowrap;
-					border: 1px solid #f1e5e5;
-				}
-			}
-		}
+        .unread-text {
+          position: absolute;
+          background-color: var(--im-color-danger);
+          left: 28px;
+          top: 8px;
+          color: white;
+          border-radius: 30px;
+          padding: 0 5px;
+          font-size: var(--im-font-size-smaller);
+          text-align: center;
+          white-space: nowrap;
+          border: 1px solid #f1e5e5;
+        }
+      }
+    }
 
-		.bottom-item {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			height: 50px;
-			width: 100%;
-			cursor: pointer;
-			color: var(--im-color-primary-light-4);
-			font-size: var(--icon-font-size);
+    .bottom-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 50px;
+      width: 100%;
+      cursor: pointer;
+      color: var(--im-color-primary-light-4);
+      font-size: var(--icon-font-size);
 
-			.icon {
-				font-size: var(--icon-font-size)
-			}
+      .icon {
+        font-size: var(--icon-font-size);
+      }
 
-			&:hover {
-				font-weight: 600;
-				color: var(--im-color-primary-light-7);
-			}
-		}
-	}
+      &:hover {
+        font-weight: 600;
+        color: var(--im-color-primary-light-7);
+      }
+    }
+  }
+
+  .content-box {
+    flex: 1;
+    padding: 0;
+    background-color: #fff;
+    text-align: center;
+  }
+}
 
-	.content-box {
-		flex: 1;
-		padding: 0;
-		background-color: #fff;
-		text-align: center;
-	}
+.menu-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9998;
+  background: transparent;
 }
 </style>
\ No newline at end of file