From 1b2a703e07fb84aacb84449d26f9d0992c59340d Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Mon, 29 Dec 2025 08:50:07 +0800
Subject: [PATCH] =?UTF-8?q?websocket=E5=BC=80=E5=8F=91=E8=B0=83=E8=AF=95?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/test/index copy.vue | 1517 ++++++++++++++++++++++++
 src/views/test/index.vue      | 2033 ++++++++++++++++++++++++++++++---
 2 files changed, 3393 insertions(+), 157 deletions(-)
 create mode 100644 src/views/test/index copy.vue

diff --git a/src/views/test/index copy.vue b/src/views/test/index copy.vue
new file mode 100644
index 0000000..71dd539
--- /dev/null
+++ b/src/views/test/index copy.vue	
@@ -0,0 +1,1517 @@
+<template>
+  <div class="websocket-debugger">
+    <!-- 头部控制区域 -->
+    <a-card title="WebSocket调试工具" :bordered="false">
+      <template #extra>
+        <a-space>
+          <a-switch v-model:checked="autoReconnect" checked-children="自动重连" un-checked-children="手动重连" />
+          <a-button @click="getOnlineUsers" :loading="loadingUsers" :disabled="!isConnected">
+            <template #icon>
+              <ReloadOutlined />
+            </template>
+            刷新用户
+          </a-button>
+        </a-space>
+      </template>
+
+      <!-- 连接配置区域 -->
+      <div class="config-section">
+        <h3>连接配置</h3>
+        <a-form layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+          <a-row :gutter="16">
+            <a-col :span="8">
+              <a-form-item label="WebSocket地址">
+                <a-input v-model:value="wsConfig.url" placeholder="ws://localhost:8091/nursing-unit_101/sdWebsocket/" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="用户ID" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+                <a-input v-model:value="wsConfig.userId" placeholder="输入用户ID" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="心跳间隔(秒)" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
+                <a-input-number v-model:value="wsConfig.heartbeat" :min="5" :max="300" style="width: 100%" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+
+        <!-- 控制按钮 -->
+        <div class="control-buttons">
+          <a-button type="primary" @click="connect" :disabled="isConnected || isConnecting" :loading="isConnecting">
+            {{ isConnecting ? '连接中...' : '连接' }}
+          </a-button>
+
+          <a-button @click="disconnect" :disabled="!isConnected && !isConnecting" style="margin-left: 10px;">
+            断开
+          </a-button>
+
+          <a-button @click="testPing" :disabled="!isConnected" style="margin-left: 10px;">
+            测试Ping
+          </a-button>
+
+          <a-button @click="clearAll" style="margin-left: 10px;">
+            清空
+          </a-button>
+
+          <a-button @click="toggleLogPanel" style="margin-left: 10px;">
+            {{ showLogPanel ? '隐藏日志' : '显示日志' }}
+          </a-button>
+
+          <!-- 用户管理按钮 -->
+          <a-button @click="showUserManager" :disabled="!isConnected" style="margin-left: 10px;" type="primary" ghost>
+            <template #icon>
+              <UserOutlined />
+            </template>
+            用户管理
+          </a-button>
+        </div>
+
+        <!-- 连接状态和用户信息 -->
+        <div class="connection-status">
+          <a-tag :color="statusColor">{{ statusText }}</a-tag>
+          <span style="margin-left: 20px;">
+            <a-tag color="blue">用户: {{ wsConfig.userId }}</a-tag>
+            <a-tag color="green">在线用户: {{ onlineUsers.length }}</a-tag>
+            <a-tag color="orange">选中用户: {{ selectedUsers.length }}</a-tag>
+            <a-tag color="purple">心跳: {{ wsConfig.heartbeat }}s</a-tag>
+          </span>
+        </div>
+      </div>
+    </a-card>
+
+    <!-- 主内容区域（三列布局） -->
+    <div class="content-area">
+      <a-row :gutter="16">
+        <!-- 左侧：用户列表 -->
+        <a-col :span="6">
+          <a-card title="在线用户" :bordered="false" style="height: 100%;">
+            <template #extra>
+              <a-space>
+                <a-tooltip title="全选/取消全选">
+                  <a-checkbox v-model:checked="selectAllUsers" :indeterminate="indeterminate"
+                    @change="onSelectAllChange" />
+                </a-tooltip>
+                <a-button type="link" size="small" @click="getOnlineUsers" :loading="loadingUsers">
+                  刷新
+                </a-button>
+              </a-space>
+            </template>
+
+            <div class="user-list">
+              <div v-if="onlineUsers.length === 0" class="empty-user">
+                <a-empty description="暂无在线用户" />
+              </div>
+
+              <a-list v-else :data-source="onlineUsers" :loading="loadingUsers" size="small">
+                <template #renderItem="{ item }">
+                  <a-list-item>
+                    <a-list-item-meta>
+                      <template #title>
+                        <div class="user-item">
+                          <a-checkbox v-model:checked="item.checked"
+                            @change="(e) => onUserSelectChange(item.userId, e.target.checked)" />
+                          <a-tag :color="item.userId === wsConfig.userId ? 'red' : 'blue'" class="user-tag">
+                            {{ item.userId === wsConfig.userId ? '当前' : '在线' }}
+                          </a-tag>
+                          <div class="user-info">
+                            <div class="user-name">{{ item.userName || item.userId }}</div>
+                            <div class="user-id" style="font-size: 10px; color: #999;">ID: {{ item.userId }}</div>
+                          </div>
+                        </div>
+                      </template>
+                      <template #description>
+                        <div class="user-actions">
+                          <a-space size="small">
+                            <a-button type="link" size="small" @click="sendToUser(item.userId)" title="发送消息">
+                              发送
+                            </a-button>
+                            <a-button type="link" size="small" danger @click="removeUser(item.userId)"
+                              :disabled="item.userId === wsConfig.userId" title="移除用户">
+                              移除
+                            </a-button>
+                          </a-space>
+                        </div>
+                      </template>
+                    </a-list-item-meta>
+                  </a-list-item>
+                </template>
+              </a-list>
+
+              <!-- 选中用户操作栏 -->
+              <div v-if="selectedUsers.length > 0" class="selected-users-bar">
+                <div class="selected-count">
+                  已选择 {{ selectedUsers.length }} 个用户
+                </div>
+                <div class="selected-actions">
+                  <a-space>
+                    <a-button type="primary" size="small" @click="sendToSelectedUsers">
+                      发送消息
+                    </a-button>
+                    <a-button type="primary" size="small" @click="broadcastToSelectedUsers">
+                      批量广播
+                    </a-button>
+                    <a-button size="small" @click="clearSelectedUsers">
+                      取消选择
+                    </a-button>
+                  </a-space>
+                </div>
+              </div>
+            </div>
+
+            <!-- 用户统计 -->
+            <div class="user-stats">
+              <a-statistic title="在线用户" :value="onlineUsers.length" />
+              <a-statistic title="会话数" :value="sessionCount" />
+            </div>
+          </a-card>
+        </a-col>
+
+        <!-- 中间：消息发送区 -->
+        <a-col :span="6">
+          <a-card title="发送消息" :bordered="false" style="height: 100%;">
+            <div class="send-area">
+              <!-- 接收用户选择 -->
+              <div class="receiver-section">
+                <a-form-item label="接收用户">
+                  <div class="selected-users-display">
+                    <a-tag v-for="userId in selectedUsers" :key="userId" closable @close="removeSelectedUser(userId)">
+                      {{ getUserNameById(userId) }}
+                    </a-tag>
+                    <a-tag v-if="selectedUsers.length === 0" color="default">
+                      全部用户
+                    </a-tag>
+                  </div>
+                </a-form-item>
+
+                <a-form-item label="发送方式">
+                  <a-radio-group v-model:value="sendMode">
+                    <a-radio value="single">单用户</a-radio>
+                    <a-radio value="multiple">多用户</a-radio>
+                    <a-radio value="broadcast">广播</a-radio>
+                  </a-radio-group>
+                </a-form-item>
+              </div>
+
+              <!-- 消息输入 -->
+              <a-form layout="vertical">
+                <a-form-item label="消息类型">
+                  <a-select v-model:value="messageType" style="width: 200px;">
+                    <a-select-option value="text">文本</a-select-option>
+                    <a-select-option value="json">JSON</a-select-option>
+                    <a-select-option value="ping">心跳(Ping)</a-select-option>
+                    <a-select-option value="command">命令</a-select-option>
+                  </a-select>
+                </a-form-item>
+
+                <!-- 消息内容 -->
+                <a-form-item label="消息内容">
+                  <a-textarea v-model:value="sendMessage" placeholder="输入要发送的消息" :rows="6" :disabled="!isConnected" />
+                </a-form-item>
+
+                <!-- 预定义消息 -->
+                <a-form-item label="快捷消息">
+                  <div class="quick-messages">
+                    <a-tag v-for="(msg, index) in quickMessages" :key="index" @click="selectQuickMessage(msg)"
+                      style="cursor: pointer; margin-bottom: 5px;">
+                      {{ msg.label }}
+                    </a-tag>
+                  </div>
+                </a-form-item>
+
+                <!-- 发送按钮 -->
+                <a-form-item>
+                  <a-space>
+                    <a-button type="primary" @click="sendMessageToUsers"
+                      :disabled="!isConnected || !sendMessage.trim()">
+                      {{ getSendButtonText() }}
+                    </a-button>
+                    <a-button @click="clearSend">清空输入</a-button>
+                    <a-switch v-model:checked="autoSendPing" checked-children="自动ping" un-checked-children="手动ping" />
+                  </a-space>
+                </a-form-item>
+              </a-form>
+            </div>
+          </a-card>
+        </a-col>
+
+        <!-- 右侧：消息接收区 -->
+        <a-col :span="12">
+          <a-card title="消息记录" :bordered="false" style="height: 100%;" :extra="`消息数: ${messages.length}`">
+            <div class="receive-area">
+              <!-- 消息控制栏 -->
+              <div class="message-controls">
+                <a-space>
+                  <a-checkbox v-model:checked="autoScroll">自动滚动</a-checkbox>
+                  <a-checkbox v-model:checked="showTimestamp">显示时间</a-checkbox>
+                  <a-checkbox v-model:checked="showSender">显示发送者</a-checkbox>
+                  <a-checkbox v-model:checked="showReceiver">显示接收者</a-checkbox>
+                  <a-select v-model:value="messageFilter" style="width: 120px;" size="small">
+                    <a-select-option value="all">全部消息</a-select-option>
+                    <a-select-option value="send">发送消息</a-select-option>
+                    <a-select-option value="receive">接收消息</a-select-option>
+                    <a-select-option value="system">系统消息</a-select-option>
+                    <a-select-option value="broadcast">广播消息</a-select-option>
+                    <a-select-option value="private">私聊消息</a-select-option>
+                  </a-select>
+                  <a-button size="small" @click="exportMessages">导出</a-button>
+                </a-space>
+              </div>
+
+              <!-- 消息列表 -->
+              <div class="message-list" ref="messageListRef">
+                <div v-for="(msg, index) in filteredMessages" :key="index"
+                  :class="['message-item', `message-${msg.type}`]">
+                  <div class="message-header">
+                    <div class="message-info">
+                      <span v-if="showTimestamp" class="message-time">{{ formatTime(msg.time) }}</span>
+                      <a-tag :color="getMessageColor(msg.type)" size="small">
+                        {{ getMessageTypeText(msg.type) }}
+                      </a-tag>
+                      <span v-if="showSender && msg.sender" class="message-sender">来自: {{ msg.sender }}</span>
+                      <span v-if="showReceiver && msg.receiver" class="message-receiver">发送给: {{
+                        Array.isArray(msg.receiver)
+                          ? msg.receiver.join(', ') : msg.receiver }}</span>
+                    </div>
+                  </div>
+                  <div class="message-content">
+                    <pre>{{ formatMessage(msg.content) }}</pre>
+                  </div>
+                </div>
+                <div v-if="filteredMessages.length === 0" class="empty-message">
+                  暂无消息记录
+                </div>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+
+    <!-- 用户管理模态框 -->
+    <a-modal v-model:open="showUserModal" title="用户管理" width="600px" :footer="null">
+      <div class="user-manager" style="padding: 14px;">
+        <a-table :data-source="onlineUsers" :columns="userColumns" :loading="loadingUsers" rowKey="userId">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'status'">
+              <a-tag :color="record.userId === wsConfig.userId ? 'red' : 'green'">
+                {{ record.userId === wsConfig.userId ? '当前用户' : '在线' }}
+              </a-tag>
+            </template>
+            <template v-if="column.key === 'actions'">
+              <a-space>
+                <a-button type="link" size="small" @click="sendToUser(record.userId)">
+                  发消息
+                </a-button>
+                <a-button type="link" size="small" @click="toggleUserSelection(record.userId)">
+                  {{ record.checked ? '取消选择' : '选择' }}
+                </a-button>
+              </a-space>
+            </template>
+          </template>
+        </a-table>
+
+        <div class="user-manager-actions">
+          <a-space>
+            <a-button @click="getOnlineUsers">刷新列表</a-button>
+            <a-button type="primary" @click="sendToSelectedUsers" :disabled="selectedUsers.length === 0">
+              发送给选中用户 ({{ selectedUsers.length }})
+            </a-button>
+            <a-button @click="showUserModal = false">关闭</a-button>
+          </a-space>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 发送消息模态框 -->
+    <a-modal v-model:open="showSendModal" :title="sendModalTitle" @ok="sendMessageToSelected"
+      @cancel="showSendModal = false">
+      <a-form layout="vertical">
+        <a-form-item label="接收用户">
+          <a-select v-model:value="modalSelectedUsers" mode="multiple" placeholder="请选择接收用户" style="width: 100%"
+            :options="userOptions" :max-tag-count="3" />
+        </a-form-item>
+        <a-form-item label="消息内容">
+          <a-textarea v-model:value="modalMessage" placeholder="输入要发送的消息" :rows="4" />
+        </a-form-item>
+        <a-form-item label="消息类型">
+          <a-radio-group v-model:value="modalMessageType">
+            <a-radio value="text">文本</a-radio>
+            <a-radio value="json">JSON</a-radio>
+            <a-radio value="command">命令</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- 日志面板 -->
+    <a-collapse v-if="showLogPanel" style="margin-top: 229px;">
+      <a-collapse-panel key="1" header="详细日志">
+        <div class="log-panel">
+          <div class="log-header">
+            <a-space>
+              <span>日志总数: {{ logs.length }}</span>
+              <a-button size="small" @click="clearLogs">清空日志</a-button>
+              <a-switch v-model:checked="logTimestamp" checked-children="时间戳" un-checked-children="无时间" />
+              <a-button size="small" @click="exportLogs">导出日志</a-button>
+            </a-space>
+          </div>
+          <div class="log-content">
+            <div v-for="(log, index) in logs" :key="index" :class="['log-item', `log-${log.level}`]">
+              <span v-if="logTimestamp" class="log-time">[{{ log.time }}]</span>
+              <span class="log-level">[{{ log.level.toUpperCase() }}]</span>
+              <span class="log-message">{{ log.message }}</span>
+            </div>
+            <div v-if="logs.length === 0" class="empty-log">
+              暂无日志
+            </div>
+          </div>
+        </div>
+      </a-collapse-panel>
+    </a-collapse>
+
+    <!-- 底部统计 -->
+    <a-card style="margin-top: 20px;">
+      <a-row>
+        <a-col :span="3">
+          <a-statistic title="连接次数" :value="stats.connectCount" />
+        </a-col>
+        <a-col :span="3">
+          <a-statistic title="发送消息" :value="stats.sendCount" />
+        </a-col>
+        <a-col :span="3">
+          <a-statistic title="接收消息" :value="stats.receiveCount" />
+        </a-col>
+        <a-col :span="3">
+          <a-statistic title="私聊消息" :value="stats.privateCount" />
+        </a-col>
+        <a-col :span="3">
+          <a-statistic title="广播消息" :value="stats.broadcastCount" />
+        </a-col>
+        <a-col :span="3">
+          <a-statistic title="在线用户" :value="onlineUsers.length" />
+        </a-col>
+        <a-col :span="3">
+          <a-statistic title="连接时长" :value="formatDuration(stats.connectDuration)" />
+        </a-col>
+        <a-col :span="3">
+          <a-button @click="showStatsDetail" type="link">详细统计</a-button>
+        </a-col>
+      </a-row>
+    </a-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
+import { message, Modal } from 'ant-design-vue';
+import { UserOutlined, ReloadOutlined } from '@ant-design/icons-vue';
+
+// WebSocket连接状态
+const ws = ref(null);
+const isConnected = ref(false);
+const isConnecting = ref(false);
+const statusText = ref('未连接');
+const statusColor = ref('default');
+
+// 配置
+const wsConfig = reactive({
+  url: 'ws://localhost:8091/nursing-unit_101/sdWebsocket/',
+  userId: '1990230015776468901',
+  heartbeat: 30
+});
+
+// 用户管理
+const onlineUsers = ref([]);
+const selectedUsers = ref([]);
+const selectAllUsers = ref(false);
+const indeterminate = ref(false);
+const loadingUsers = ref(false);
+const sessionCount = ref(0);
+const showUserModal = ref(false);
+const showSendModal = ref(false);
+const sendModalTitle = ref('发送消息');
+
+// 发送相关
+const sendMessage = ref('');
+const messageType = ref('text');
+const sendMode = ref('single');
+const modalSelectedUsers = ref([]);
+const modalMessage = ref('');
+const modalMessageType = ref('text');
+
+// 消息记录
+const messages = ref([]);
+const messageFilter = ref('all');
+const autoScroll = ref(true);
+const showTimestamp = ref(true);
+const showSender = ref(true);
+const showReceiver = ref(true);
+const showLogPanel = ref(true);
+const messageListRef = ref(null);
+
+// 日志
+const logs = ref([]);
+const logTimestamp = ref(true);
+
+// 快捷消息
+const quickMessages = ref([
+  { label: 'Ping', value: 'ping' },
+  { label: '检查连接', value: 'check' },
+  { label: 'Hello', value: 'Hello WebSocket!' },
+  { label: 'JSON消息', value: '{"cmd": "test", "data": "测试数据"}' },
+  { label: '获取用户', value: '{"cmd": "getUsers"}' },
+  { label: '广播消息', value: '{"cmd": "broadcast", "data": "广播消息"}' }
+]);
+
+// 统计
+const stats = reactive({
+  connectCount: 0,
+  sendCount: 0,
+  receiveCount: 0,
+  privateCount: 0,
+  broadcastCount: 0,
+  connectStart: null,
+  connectDuration: 0
+});
+
+// 自动重连
+const autoReconnect = ref(true);
+const autoSendPing = ref(false);
+let heartbeatTimer = null;
+let reconnectTimer = null;
+let reconnectAttempts = 0;
+const maxReconnectAttempts = 5;
+
+// 用户表格列
+const userColumns = [
+  {
+    title: '用户ID',
+    dataIndex: 'userId',
+    key: 'userId',
+  },
+  {
+    title: '用户姓名',
+    dataIndex: 'userName',
+    key: 'userName',
+  },
+  {
+    title: '手机号',
+    dataIndex: 'phone',
+    key: 'phone',
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 100,
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 150,
+  },
+];
+
+// 计算属性
+const filteredMessages = computed(() => {
+  if (messageFilter.value === 'all') {
+    return messages.value;
+  }
+  return messages.value.filter(msg => msg.type === messageFilter.value);
+});
+
+const userOptions = computed(() => {
+  return onlineUsers.value.map(user => ({
+    label: (user.userName || user.userId) + (user.userId === wsConfig.userId ? ' (当前)' : ''),
+    value: user.userId,
+    disabled: user.userId === wsConfig.userId
+  }));
+});
+
+// 添加日志
+const addLog = (level, logMessage) => {
+  const logEntry = {
+    time: new Date().toLocaleTimeString(),
+    level,
+    message: logMessage
+  };
+  logs.value.unshift(logEntry);
+};
+
+// 添加消息记录
+const addMessage = (type, content, sender, receiver) => {
+  const msg = {
+    time: new Date(),
+    type,
+    content: typeof content === 'object' ? JSON.stringify(content, null, 2) : content,
+    sender,
+    receiver
+  };
+  messages.value.unshift(msg);
+
+  // 更新统计
+  if (type === 'send') stats.sendCount++;
+  else if (type === 'receive') stats.receiveCount++;
+  else if (type === 'private') stats.privateCount++;
+  else if (type === 'broadcast') stats.broadcastCount++;
+
+  // 自动滚动
+  if (autoScroll.value) {
+    nextTick(() => {
+      if (messageListRef.value) {
+        messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
+      }
+    });
+  }
+};
+
+// 连接WebSocket
+const connect = async () => {
+  if (isConnecting.value || isConnected.value) return;
+
+  isConnecting.value = true;
+  statusText.value = '连接中...';
+  statusColor.value = 'processing';
+  addLog('info', `正在连接WebSocket...`);
+
+  try {
+    if (ws.value) ws.value.close();
+
+    const fullUrl = `${wsConfig.url}${wsConfig.userId}`.replace('http', 'ws');
+    ws.value = new WebSocket(fullUrl);
+
+    ws.value.onopen = (event) => {
+      isConnected.value = true;
+      isConnecting.value = false;
+      statusText.value = '已连接';
+      statusColor.value = 'success';
+      reconnectAttempts = 0;
+      stats.connectCount++;
+      stats.connectStart = Date.now();
+
+      addLog('success', '✅ WebSocket连接成功');
+      addMessage('system', '连接成功', '系统');
+      message.success('WebSocket连接成功');
+
+      startHeartbeat();
+      startConnectTimer();
+      getOnlineUsers();
+    };
+
+    ws.value.onmessage = (event) => {
+      const data = event.data;
+      addLog('receive', `收到消息: ${data}`);
+
+      try {
+        const jsonData = JSON.parse(data);
+
+        // 处理不同类型的消息
+        if (jsonData.type === 'userList') {
+          // 收到用户列表
+          updateOnlineUsers(jsonData.users || []);
+        } else if (jsonData.type === 'private') {
+          // 私聊消息
+          addMessage('private', data, jsonData.from, wsConfig.userId);
+        } else if (jsonData.type === 'broadcast') {
+          // 广播消息
+          addMessage('broadcast', data, jsonData.from, '所有人');
+        } else {
+          // 普通消息
+          addMessage('receive', data, '服务器');
+        }
+      } catch (e) {
+        // 非JSON消息
+        if (data === 'ping') {
+          addLog('heartbeat', '收到心跳响应');
+        } else {
+          addMessage('receive', data, '服务器');
+        }
+      }
+    };
+
+    ws.value.onclose = (event) => {
+      isConnected.value = false;
+      isConnecting.value = false;
+      statusText.value = '已断开';
+      statusColor.value = 'error';
+
+      addLog('warn', `连接关闭 (代码: ${event.code})`);
+      addMessage('system', '连接已断开', '系统');
+
+      stopHeartbeat();
+      stopConnectTimer();
+
+      if (autoReconnect.value && event.code !== 1000 && reconnectAttempts < maxReconnectAttempts) {
+        reconnectAttempts++;
+        reconnectTimer = setTimeout(() => connect(), 3000);
+      }
+    };
+
+    ws.value.onerror = (error) => {
+      isConnecting.value = false;
+      statusText.value = '连接错误';
+      statusColor.value = 'error';
+      addLog('error', '连接错误');
+      message.error('连接失败');
+    };
+
+  } catch (error) {
+    isConnecting.value = false;
+    statusText.value = '连接异常';
+    statusColor.value = 'error';
+    addLog('error', `连接异常: ${error.message}`);
+  }
+};
+
+// 断开连接
+const disconnect = () => {
+  if (ws.value) {
+    ws.value.close(1000, '用户主动断开');
+  }
+  isConnected.value = false;
+  statusText.value = '已断开';
+  statusColor.value = 'default';
+  onlineUsers.value = [];
+  selectedUsers.value = [];
+
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+
+  stopHeartbeat();
+  stopConnectTimer();
+};
+
+// 获取在线用户
+const getOnlineUsers = () => {
+  if (!isConnected.value) {
+    message.warning('请先连接WebSocket');
+    return;
+  }
+
+  loadingUsers.value = true;
+  addLog('info', '获取在线用户...');
+
+  // ✅ 只保留发送获取用户列表的命令
+  if (isConnected.value && ws.value) {
+    const cmd = { cmd: 'getUsers', sender: wsConfig.userId };
+    ws.value.send(JSON.stringify(cmd));
+    addMessage('send', JSON.stringify(cmd), wsConfig.userId, '服务器');
+  }
+
+  loadingUsers.value = false;  // 确保加载状态结束
+};
+
+// 更新在线用户列表
+const updateOnlineUsers = (users) => {
+  console.log("🌊 ~ updateOnlineUsers ~ users:", users)
+  const userList = users.map(user => {
+    // 如果是对象格式（有employessId和realname）
+    if (user && typeof user === 'object') {
+      return {
+        userId: user.employessId || user.userId || user.id || '',
+        userName: user.realname || user.username || user.userName || user.userId || '',
+        checked: selectedUsers.value.includes(user.employessId || user.userId || user.id || ''),
+        // 保持原有字段
+        ...user
+      };
+    }
+    // 如果是字符串（用户ID）
+    else if (typeof user === 'string') {
+      return {
+        userId: user,
+        userName: user,
+        checked: selectedUsers.value.includes(user)
+      };
+    }
+    // 其他格式
+    else {
+      return {
+        userId: '',
+        userName: '',
+        checked: false
+      };
+    }
+  });
+
+  onlineUsers.value = userList;
+  sessionCount.value = onlineUsers.value.length;
+  updateSelectAllState();
+  addLog('success', `更新在线用户列表，共 ${users.length} 个用户`);
+};
+
+// 全选/取消全选
+const onSelectAllChange = (checked) => {
+  onlineUsers.value = onlineUsers.value.map(user => ({
+    ...user,
+    checked
+  }));
+  selectedUsers.value = checked ? onlineUsers.value.map(u => u.userId) : [];
+  indeterminate.value = false;
+};
+
+// 用户选择变化
+const onUserSelectChange = (userId, checked) => {
+  const user = onlineUsers.value.find(u => u.userId === userId);
+  if (user) user.checked = checked;
+
+  selectedUsers.value = onlineUsers.value.filter(u => u.checked).map(u => u.userId);
+  updateSelectAllState();
+};
+
+// 更新全选状态
+const updateSelectAllState = () => {
+  const checkedCount = onlineUsers.value.filter(u => u.checked).length;
+  selectAllUsers.value = checkedCount === onlineUsers.value.length;
+  indeterminate.value = checkedCount > 0 && checkedCount < onlineUsers.value.length;
+};
+
+// 发送消息给单个用户
+const sendToUser = (userId) => {
+  if (!isConnected.value) {
+    message.warning('请先连接WebSocket');
+    return;
+  }
+
+  modalSelectedUsers.value = [userId];
+  modalMessage.value = '';
+  modalMessageType.value = 'text';
+  sendModalTitle.value = `发送消息给 ${userId}`;
+  showSendModal.value = true;
+};
+
+// 发送消息给选中用户
+const sendToSelectedUsers = () => {
+  if (selectedUsers.value.length === 0) {
+    message.warning('请先选择要发送的用户');
+    return;
+  }
+
+  modalSelectedUsers.value = [...selectedUsers.value];
+  modalMessage.value = '';
+  modalMessageType.value = 'text';
+  sendModalTitle.value = `发送消息给 ${selectedUsers.value.length} 个用户`;
+  showSendModal.value = true;
+};
+
+// 广播给选中用户
+const broadcastToSelectedUsers = () => {
+  if (selectedUsers.value.length === 0) {
+    message.warning('请先选择要广播的用户');
+    return;
+  }
+
+  if (!sendMessage.value.trim()) {
+    message.warning('请输入要广播的消息');
+    return;
+  }
+
+  selectedUsers.value.forEach(userId => {
+    sendMessageToUser(userId, sendMessage.value);
+  });
+
+  addMessage('broadcast', sendMessage.value, wsConfig.userId, selectedUsers.value);
+  addLog('info', `广播消息给 ${selectedUsers.value.length} 个用户`);
+  message.success(`消息已发送给 ${selectedUsers.value.length} 个用户`);
+};
+
+// 发送消息给单个用户
+const sendMessageToUser = (userId, msg) => {
+  if (!isConnected.value || !ws.value) {
+    message.warning('WebSocket未连接');
+    return false;
+  }
+
+  try {
+    const messageObj = {
+      type: 'private',
+      to: userId,
+      from: wsConfig.userId,
+      message: msg,
+      timestamp: Date.now()
+    };
+
+    ws.value.send(JSON.stringify(messageObj));
+    addMessage('private', JSON.stringify(messageObj, null, 2), wsConfig.userId, userId);
+    addLog('send', `发送私聊消息给 ${userId}`);
+    return true;
+  } catch (error) {
+    addLog('error', `发送给 ${userId} 失败: ${error.message}`);
+    return false;
+  }
+};
+
+// 发送消息（模态框确认）
+const sendMessageToSelected = () => {
+  if (modalSelectedUsers.value.length === 0) {
+    message.warning('请选择接收用户');
+    return;
+  }
+
+  if (!modalMessage.value.trim()) {
+    message.warning('请输入消息内容');
+    return;
+  }
+
+  modalSelectedUsers.value.forEach(userId => {
+    sendMessageToUser(userId, modalMessage.value);
+  });
+
+  showSendModal.value = false;
+  modalMessage.value = '';
+  modalSelectedUsers.value = [];
+
+  message.success(`消息已发送给 ${modalSelectedUsers.value.length} 个用户`);
+};
+
+// 发送消息给用户
+const sendMessageToUsers = () => {
+  if (!isConnected.value) {
+    message.warning('请先连接WebSocket');
+    return;
+  }
+
+  if (!sendMessage.value.trim()) {
+    message.warning('请输入消息内容');
+    return;
+  }
+
+  switch (sendMode.value) {
+    case 'single':
+      if (selectedUsers.value.length === 0) {
+        message.warning('请选择一个用户');
+        return;
+      }
+      sendMessageToUser(selectedUsers.value[0], sendMessage.value);
+      break;
+
+    case 'multiple':
+      if (selectedUsers.value.length === 0) {
+        message.warning('请选择要发送的用户');
+        return;
+      }
+      broadcastToSelectedUsers();
+      break;
+
+    case 'broadcast':
+      // 发送广播消息
+      try {
+        const broadcastMsg = {
+          type: 'broadcast',
+          from: wsConfig.userId,
+          message: sendMessage.value,
+          timestamp: Date.now()
+        };
+
+        if (ws.value) {
+          ws.value.send(JSON.stringify(broadcastMsg));
+          addMessage('broadcast', JSON.stringify(broadcastMsg, null, 2), wsConfig.userId, '所有人');
+          addLog('info', '发送广播消息');
+          message.success('广播消息已发送');
+        }
+      } catch (error) {
+        addLog('error', `广播消息发送失败: ${error.message}`);
+      }
+      break;
+  }
+
+  sendMessage.value = '';
+};
+
+// 获取发送按钮文本
+const getSendButtonText = () => {
+  switch (sendMode.value) {
+    case 'single':
+      if (selectedUsers.value.length === 0) {
+        return '发送消息';
+      } else {
+        const userName = getUserNameById(selectedUsers.value[0]);
+        return `发送给 ${userName}`;
+      }
+    case 'multiple':
+      if (selectedUsers.value.length === 0) {
+        return '发送给选中用户';
+      } else {
+        return `发送给 ${selectedUsers.value.length} 个用户`;
+      }
+    case 'broadcast':
+      return '广播给所有人';
+    default:
+      return '发送消息';
+  }
+};
+// 移除选中用户
+const removeSelectedUser = (userId) => {
+  const index = selectedUsers.value.indexOf(userId);
+  if (index > -1) {
+    selectedUsers.value.splice(index, 1);
+    const user = onlineUsers.value.find(u => u.userId === userId);
+    if (user) user.checked = false;
+    updateSelectAllState();
+  }
+};
+
+// 清除选中用户
+const clearSelectedUsers = () => {
+  selectedUsers.value = [];
+  onlineUsers.value = onlineUsers.value.map(user => ({ ...user, checked: false }));
+  selectAllUsers.value = false;
+  indeterminate.value = false;
+};
+
+// 移除用户
+const removeUser = (userId) => {
+  if (userId === wsConfig.userId) {
+    message.warning('不能移除当前用户');
+    return;
+  }
+
+  Modal.confirm({
+    title: '确认移除',
+    content: `确定要移除用户 ${userId} 吗？`,
+    onOk: () => {
+      onlineUsers.value = onlineUsers.value.filter(user => user.userId !== userId);
+      removeSelectedUser(userId);
+      addLog('info', `移除用户: ${userId}`);
+      message.success('用户已移除');
+    }
+  });
+};
+
+// 用户管理界面
+const showUserManager = () => {
+  getOnlineUsers();
+  showUserModal.value = true;
+};
+
+// 切换用户选择
+const toggleUserSelection = (userId) => {
+  const user = onlineUsers.value.find(u => u.userId === userId);
+  if (user) {
+    user.checked = !user.checked;
+    onUserSelectChange(userId, user.checked);
+  }
+};
+
+// 开始心跳
+const startHeartbeat = () => {
+  stopHeartbeat();
+
+  if (autoSendPing.value) {
+    heartbeatTimer = setInterval(() => {
+      if (isConnected.value && ws.value && ws.value.readyState === WebSocket.OPEN) {
+        ws.value.send('ping');
+        addMessage('system', '发送心跳ping', '系统');
+      }
+    }, wsConfig.heartbeat * 1000);
+  }
+};
+
+// 停止心跳
+const stopHeartbeat = () => {
+  if (heartbeatTimer) {
+    clearInterval(heartbeatTimer);
+    heartbeatTimer = null;
+  }
+};
+
+// 开始连接时长计时
+const startConnectTimer = () => {
+  stats.connectDuration = 0;
+  const timer = setInterval(() => {
+    if (isConnected.value) {
+      stats.connectDuration = Math.floor((Date.now() - stats.connectStart) / 1000);
+    } else {
+      clearInterval(timer);
+    }
+  }, 1000);
+};
+
+// 停止连接时长计时
+const stopConnectTimer = () => {
+  if (stats.connectStart) {
+    stats.connectDuration = Math.floor((Date.now() - stats.connectStart) / 1000);
+    stats.connectStart = null;
+  }
+};
+
+// 格式化时长
+const formatDuration = (seconds) => {
+  if (!seconds) return '0秒';
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+
+  if (hours > 0) {
+    return `${hours}时${minutes}分${secs}秒`;
+  } else if (minutes > 0) {
+    return `${minutes}分${secs}秒`;
+  } else {
+    return `${secs}秒`;
+  }
+};
+
+// 格式化时间
+const formatTime = (date) => {
+  if (!showTimestamp.value) return '';
+  return date.toLocaleTimeString();
+};
+
+// 格式化消息
+const formatMessage = (content) => {
+  if (!content) return '';
+  try {
+    const obj = JSON.parse(content);
+    return JSON.stringify(obj, null, 2);
+  } catch (e) {
+    return content;
+  }
+};
+
+// 获取消息类型文本
+const getMessageTypeText = (type) => {
+  const typeMap = {
+    send: '发送',
+    receive: '接收',
+    system: '系统',
+    private: '私聊',
+    broadcast: '广播'
+  };
+  return typeMap[type] || type;
+};
+
+// 获取消息颜色
+const getMessageColor = (type) => {
+  const colors = {
+    send: 'blue',
+    receive: 'green',
+    system: 'orange',
+    private: 'purple',
+    broadcast: 'cyan'
+  };
+  return colors[type] || 'default';
+};
+
+// 选择快捷消息
+const selectQuickMessage = (msg) => {
+  sendMessage.value = msg.value;
+  if (msg.value === 'ping' || msg.value === 'check') {
+    messageType.value = 'ping';
+  } else if (msg.value.startsWith('{') && msg.value.endsWith('}')) {
+    messageType.value = 'json';
+  }
+};
+
+// 清空输入
+const clearSend = () => {
+  sendMessage.value = '';
+};
+
+// 清空消息
+const clearMessages = () => {
+  messages.value = [];
+  stats.sendCount = 0;
+  stats.receiveCount = 0;
+  stats.privateCount = 0;
+  stats.broadcastCount = 0;
+};
+
+// 清空日志
+const clearLogs = () => {
+  logs.value = [];
+};
+
+// 清空所有
+const clearAll = () => {
+  clearMessages();
+  clearLogs();
+  message.success('已清空所有记录');
+};
+
+// 切换日志面板
+const toggleLogPanel = () => {
+  showLogPanel.value = !showLogPanel.value;
+};
+
+// 导出消息
+const exportMessages = () => {
+  const data = {
+    exportTime: new Date().toISOString(),
+    config: { ...wsConfig },
+    stats: { ...stats },
+    messages: messages.value
+  };
+
+  const dataStr = JSON.stringify(data, null, 2);
+  const blob = new Blob([dataStr], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `websocket-messages-${new Date().getTime()}.json`;
+  link.click();
+  URL.revokeObjectURL(url);
+
+  addLog('info', '消息记录已导出');
+  message.success('消息记录已导出');
+};
+
+// 导出日志
+const exportLogs = () => {
+  const data = {
+    exportTime: new Date().toISOString(),
+    logs: logs.value
+  };
+
+  const dataStr = JSON.stringify(data, null, 2);
+  const blob = new Blob([dataStr], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `websocket-logs-${new Date().getTime()}.json`;
+  link.click();
+  URL.revokeObjectURL(url);
+
+  addLog('info', '日志已导出');
+  message.success('日志已导出');
+};
+
+// 显示统计详情
+const showStatsDetail = () => {
+  Modal.info({
+    title: '详细统计信息',
+    width: 600,
+    content: `
+      <div style="font-family: monospace;">
+        <p><strong>连接统计:</strong></p>
+        <p>连接次数: ${stats.connectCount}</p>
+        <p>发送消息: ${stats.sendCount}</p>
+        <p>接收消息: ${stats.receiveCount}</p>
+        <p>私聊消息: ${stats.privateCount}</p>
+        <p>广播消息: ${stats.broadcastCount}</p>
+        <p>连接时长: ${formatDuration(stats.connectDuration)}</p>
+        <p><strong>用户统计:</strong></p>
+        <p>在线用户: ${onlineUsers.value.length}</p>
+        <p>选中用户: ${selectedUsers.value.length}</p>
+        <p><strong>消息统计:</strong></p>
+        <p>消息总数: ${messages.value.length}</p>
+        <p>日志条数: ${logs.value.length}</p>
+      </div>
+    `,
+  });
+};
+
+// 测试Ping
+const testPing = () => {
+  if (!isConnected.value || !ws.value) {
+    message.warning('WebSocket未连接');
+    return;
+  }
+
+  ws.value.send('ping');
+  addMessage('send', 'ping', wsConfig.userId, '服务器');
+  addLog('info', '发送ping测试');
+  message.success('ping已发送');
+};
+
+// 监听自动ping
+watch(autoSendPing, (newVal) => {
+  if (newVal && isConnected.value) {
+    startHeartbeat();
+  } else {
+    stopHeartbeat();
+  }
+});
+
+// 根据用户ID获取用户姓名
+const getUserNameById = (userId) => {
+  const user = onlineUsers.value.find(u => u.userId === userId);
+  return user ? (user.userName || user.userId) : userId;
+};
+
+// 组件卸载时清理
+onBeforeUnmount(() => {
+  disconnect();
+  clearAll();
+});
+
+// 模拟在线用户列表（实际应该从服务器获取）
+onMounted(() => {
+});
+</script>
+
+<style scoped>
+.websocket-debugger {
+  padding: 20px;
+}
+
+.config-section {
+  margin-bottom: 20px;
+}
+
+.config-section h3 {
+  margin-bottom: 16px;
+  color: #333;
+}
+
+.control-buttons {
+  margin: 20px 0;
+}
+
+.connection-status {
+  margin-top: 20px;
+  padding: 10px;
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+
+.content-area {
+  margin-top: 20px;
+  height: 500px;
+}
+
+/* 用户列表样式 */
+.user-list {
+  height: 300px;
+  overflow-y: auto;
+  margin-bottom: 10px;
+}
+
+.user-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+  /* 防止内容溢出 */
+}
+
+.user-name {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-tag {
+  min-width: 40px;
+  text-align: center;
+}
+
+.user-id {
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 12px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-actions {
+  margin-top: 4px;
+}
+
+.empty-user {
+  text-align: center;
+  padding: 40px 0;
+  color: #999;
+}
+
+.selected-users-bar {
+  padding: 10px;
+  background: #f0f9ff;
+  border: 1px solid #91d5ff;
+  border-radius: 4px;
+  margin-top: 10px;
+}
+
+.selected-count {
+  font-weight: 500;
+  color: #1890ff;
+  margin-bottom: 8px;
+}
+
+.selected-users-display {
+  min-height: 32px;
+  padding: 4px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  background: #fafafa;
+}
+
+/* 消息区域 */
+.send-area,
+.receive-area {
+  height: 100%;
+}
+
+.receiver-section {
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.message-controls {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.quick-messages {
+  margin-bottom: 10px;
+}
+
+.message-list {
+  height: 300px;
+  overflow-y: auto;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  padding: 10px;
+  background: #fafafa;
+}
+
+.message-item {
+  margin-bottom: 10px;
+  padding: 8px;
+  border-radius: 4px;
+  background: white;
+  border-left: 4px solid #d9d9d9;
+}
+
+.message-send {
+  border-left-color: #1890ff;
+  background: #e6f7ff;
+}
+
+.message-receive {
+  border-left-color: #52c41a;
+  background: #f6ffed;
+}
+
+.message-system {
+  border-left-color: #faad14;
+  background: #fff7e6;
+}
+
+.message-private {
+  border-left-color: #722ed1;
+  background: #f9f0ff;
+}
+
+.message-broadcast {
+  border-left-color: #13c2c2;
+  background: #e6fffb;
+}
+
+.message-header {
+  margin-bottom: 5px;
+}
+
+.message-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #666;
+  flex-wrap: wrap;
+}
+
+.message-time {
+  font-family: monospace;
+}
+
+.message-sender,
+.message-receiver {
+  font-size: 11px;
+  color: #8c8c8c;
+}
+
+.message-content pre {
+  margin: 0;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.empty-message,
+.empty-log {
+  text-align: center;
+  color: #999;
+  padding: 20px;
+}
+
+/* 用户统计 */
+.user-stats {
+  display: flex;
+  justify-content: space-around;
+  padding: 10px;
+  border-top: 1px solid #f0f0f0;
+  background: #fafafa;
+}
+
+/* 日志面板 */
+.log-panel {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.log-header {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.log-content {
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 12px;
+}
+
+.log-item {
+  padding: 4px 8px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.log-info {
+  color: #1890ff;
+}
+
+.log-success {
+  color: #52c41a;
+}
+
+.log-warn {
+  color: #faad14;
+}
+
+.log-error {
+  color: #ff4d4f;
+}
+
+.log-heartbeat {
+  color: #eb2f96;
+}
+
+.log-time {
+  margin-right: 8px;
+  color: #999;
+}
+
+.log-level {
+  margin-right: 8px;
+  font-weight: bold;
+}
+
+/* 用户管理 */
+.user-manager-actions {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #f0f0f0;
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/test/index.vue b/src/views/test/index.vue
index 9603344..d054818 100644
--- a/src/views/test/index.vue
+++ b/src/views/test/index.vue
@@ -1,210 +1,1929 @@
 <template>
-    <div class="websocket-test">
-        <h2>WebSocket 测试工具</h2>
+  <div class="websocket-debugger">
+    <!-- 头部控制区域 -->
+    <a-card title="WebSocket调试工具" :bordered="false">
+      <template #extra>
+        <a-space>
+          <a-switch v-model:checked="autoReconnect" checked-children="自动重连" un-checked-children="手动重连" />
+          <a-button @click="getOnlineUsers" :loading="loadingUsers" :disabled="!isConnected">
+            <template #icon>
+              <ReloadOutlined />
+            </template>
+            刷新用户
+          </a-button>
+        </a-space>
+      </template>
 
-        <div class="connection-panel">
-            <el-input v-model="userId" placeholder="输入用户ID" style="width: 200px"></el-input>
-            <el-button type="primary" @click="connect" :disabled="isConnected">连接</el-button>
-            <el-button type="danger" @click="disconnect" :disabled="!isConnected">断开</el-button>
-            <el-button @click="sendPing" :disabled="!isConnected">发送心跳</el-button>
-            <span class="status" :class="{ connected: isConnected }">
-                {{ isConnected ? '已连接' : '未连接' }}
-            </span>
-        </div>
+      <!-- 连接配置区域 -->
+      <div class="config-section">
+        <h3>连接配置</h3>
 
-        <div class="message-panel">
-            <el-input v-model="messageToSend" placeholder="输入要发送的消息"
-                style="width: 300px; margin-right: 10px"></el-input>
-            <el-button type="primary" @click="sendMessage" :disabled="!isConnected">发送</el-button>
-        </div>
-
-        <div class="log-panel">
-            <h3>消息日志：</h3>
-            <div class="log-content">
-                <div v-for="(log, index) in logs" :key="index" class="log-item">
-                    <span class="log-time">[{{ log.time }}]</span>
-                    <span class="log-message">{{ log.message }}</span>
-                </div>
+        <!-- 第一行：连接用户选择（最明显的位置） -->
+        <div class="user-select-row" style="margin-bottom: 20px;">
+          <a-form-item label="连接用户" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
+            <div style="display: flex; align-items: center; gap: 10px;">
+              <a-select v-model:value="selectedConnectUsers" mode="multiple" placeholder="请选择要连接的用户（可多选）"
+                style="width: 60%;" :options="connectUserOptions" :max-tag-count="3" show-search
+                :filter-option="filterUserOption" />
+              <a-space>
+                <a-button @click="selectAllUsersToConnect" size="small">全选</a-button>
+                <a-button @click="clearSelectedConnectUsers" size="small">清空</a-button>
+              </a-space>
+              <span style="color: #666; font-size: 12px;">
+                已选择 {{ selectedConnectUsers.length }} 个用户
+              </span>
             </div>
+            <div style="margin-top: 8px; color: #999; font-size: 12px;">
+              提示：请先选择要连接的用户，然后点击连接按钮
+            </div>
+          </a-form-item>
         </div>
+
+        <a-form layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="WebSocket地址">
+                <a-input v-model:value="wsConfig.url" placeholder="ws://localhost:8091/nursing-unit_101/sdWebsocket/" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="心跳间隔(秒)" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
+                <a-input-number v-model:value="wsConfig.heartbeat" :min="5" :max="300" style="width: 100%" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+
+        <!-- 控制按钮 -->
+        <div class="control-buttons">
+          <a-button type="primary" @click="connect"
+            :disabled="isConnected || isConnecting || selectedConnectUsers.length === 0" :loading="isConnecting"
+            size="large">
+            {{ isConnecting ? '连接中...' : `连接(${selectedConnectUsers.length})` }}
+          </a-button>
+
+          <a-button @click="disconnectAll" :disabled="!isConnected && !isConnecting" style="margin-left: 10px;" danger
+            size="large">
+            全部断开
+          </a-button>
+
+          <a-button @click="disconnectSelected" :disabled="!isConnected || selectedConnectUsers.length === 0"
+            style="margin-left: 10px;" size="large">
+            断开选中
+          </a-button>
+
+          <a-button @click="testPing" :disabled="!isConnected" style="margin-left: 10px;" size="large">
+            测试Ping
+          </a-button>
+
+          <a-button @click="clearAll" style="margin-left: 10px;" size="large">
+            清空
+          </a-button>
+
+          <a-button @click="toggleLogPanel" style="margin-left: 10px;" size="large">
+            {{ showLogPanel ? '隐藏日志' : '显示日志' }}
+          </a-button>
+
+          <!-- 用户管理按钮 -->
+          <a-button @click="showUserManager" :disabled="!isConnected" style="margin-left: 10px;" type="primary" ghost
+            size="large">
+            <template #icon>
+              <UserOutlined />
+            </template>
+            用户管理
+          </a-button>
+        </div>
+
+        <!-- 连接状态和用户信息 -->
+        <div class="connection-status">
+          <a-tag :color="statusColor" size="large">{{ statusText }}</a-tag>
+          <span style="margin-left: 20px;">
+            <a-tag color="blue" size="large">选中用户: {{ selectedConnectUsers.length }}</a-tag>
+            <a-tag color="green" size="large">已连接: {{ connectedUsers.length }}</a-tag>
+            <a-tag color="orange" size="large">在线用户: {{ onlineUsers.length }}</a-tag>
+            <a-tag color="purple" size="large">心跳: {{ wsConfig.heartbeat }}s</a-tag>
+          </span>
+        </div>
+
+        <!-- 已连接用户显示 -->
+        <div v-if="connectedUsers.length > 0" class="connected-users-display" style="margin-top: 15px;">
+          <div style="font-weight: bold; margin-bottom: 5px; color: #1890ff;">已连接用户：</div>
+          <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+            <a-tag v-for="userId in connectedUsers" :key="userId" color="green" closable
+              @close="disconnectSingleUser(userId)">
+              {{ getUserRealNameById(userId) }} ({{ userId }})
+            </a-tag>
+          </div>
+        </div>
+      </div>
+    </a-card>
+
+    <!-- 主内容区域（三列布局） -->
+    <div class="content-area">
+      <a-row :gutter="16">
+        <!-- 左侧：用户列表 -->
+        <a-col :span="6">
+          <a-card title="在线用户" :bordered="false" style="height: 100%;">
+            <template #extra>
+              <a-space>
+                <a-tooltip title="全选/取消全选">
+                  <a-checkbox v-model:checked="selectAllUsers" :indeterminate="indeterminate"
+                    @change="onSelectAllChange" />
+                </a-tooltip>
+                <a-button type="link" size="small" @click="getOnlineUsers" :loading="loadingUsers">
+                  刷新
+                </a-button>
+              </a-space>
+            </template>
+
+            <div class="user-list">
+              <div v-if="onlineUsers.length === 0" class="empty-user">
+                <a-empty description="暂无在线用户" />
+              </div>
+
+              <a-list v-else :data-source="onlineUsers" :loading="loadingUsers" size="small">
+                <template #renderItem="{ item }">
+                  <a-list-item>
+                    <a-list-item-meta>
+                      <template #title>
+                        <div class="user-item">
+                          <a-checkbox v-model:checked="item.checked"
+                            @change="(e) => onUserSelectChange(item.userId, e.target.checked)" />
+                          <a-tag :color="getUserStatusColor(item.userId)" class="user-tag">
+                            {{ getUserStatusText(item.userId) }}
+                          </a-tag>
+                          <div class="user-info">
+                            <div class="user-name">{{ item.realname || item.userName || item.userId }}</div>
+                            <div class="user-id" style="font-size: 10px; color: #999;">ID: {{ item.userId }}</div>
+                          </div>
+                        </div>
+                      </template>
+                      <template #description>
+                        <div class="user-actions">
+                          <a-space size="small">
+                            <a-button type="link" size="small" @click="sendToUser(item.userId)" title="发送消息">
+                              发送
+                            </a-button>
+                            <a-button type="link" size="small" danger @click="removeUser(item.userId)" title="移除用户">
+                              移除
+                            </a-button>
+                          </a-space>
+                        </div>
+                      </template>
+                    </a-list-item-meta>
+                  </a-list-item>
+                </template>
+              </a-list>
+
+              <!-- 选中用户操作栏 -->
+              <div v-if="selectedUsers.length > 0" class="selected-users-bar">
+                <div class="selected-count">
+                  已选择 {{ selectedUsers.length }} 个用户
+                </div>
+                <div class="selected-actions">
+                  <a-space>
+                    <a-button type="primary" size="small" @click="sendToSelectedUsers">
+                      发送消息
+                    </a-button>
+                    <a-button type="primary" size="small" @click="broadcastToSelectedUsers">
+                      批量广播
+                    </a-button>
+                    <a-button size="small" @click="clearSelectedUsers">
+                      取消选择
+                    </a-button>
+                  </a-space>
+                </div>
+              </div>
+            </div>
+
+            <!-- 用户统计 -->
+            <div class="user-stats">
+              <a-statistic title="在线用户" :value="onlineUsers.length" />
+              <a-statistic title="会话数" :value="sessionCount" />
+              <a-statistic title="已连接" :value="connectedUsers.length" />
+            </div>
+          </a-card>
+        </a-col>
+
+        <!-- 中间：消息发送区 -->
+        <a-col :span="6">
+          <a-card title="发送消息" :bordered="false" style="height: 100%;">
+            <div class="send-area">
+              <!-- 接收用户选择 -->
+              <div class="receiver-section">
+                <a-form-item label="接收用户">
+                  <div class="selected-users-display">
+                    <a-tag v-for="userId in selectedUsers" :key="userId" closable @close="removeSelectedUser(userId)">
+                      {{ getUserRealNameById(userId) }}
+                    </a-tag>
+                    <a-tag v-if="selectedUsers.length === 0" color="default">
+                      全部用户
+                    </a-tag>
+                  </div>
+                </a-form-item>
+
+                <a-form-item label="发送方式">
+                  <a-radio-group v-model:value="sendMode">
+                    <a-radio value="single">单用户</a-radio>
+                    <a-radio value="multiple">多用户</a-radio>
+                    <a-radio value="broadcast">广播</a-radio>
+                  </a-radio-group>
+                </a-form-item>
+              </div>
+
+              <!-- 消息输入 -->
+              <a-form layout="vertical">
+                <a-form-item label="消息类型">
+                  <a-select v-model:value="messageType" style="width: 200px;">
+                    <a-select-option value="text">文本</a-select-option>
+                    <a-select-option value="json">JSON</a-select-option>
+                    <a-select-option value="ping">心跳(Ping)</a-select-option>
+                    <a-select-option value="command">命令</a-select-option>
+                  </a-select>
+                </a-form-item>
+
+                <!-- 消息内容 -->
+                <a-form-item label="消息内容">
+                  <a-textarea v-model:value="sendMessage" placeholder="输入要发送的消息" :rows="6" :disabled="!isConnected" />
+                </a-form-item>
+
+                <!-- 预定义消息 -->
+                <a-form-item label="快捷消息">
+                  <div class="quick-messages">
+                    <a-tag v-for="(msg, index) in quickMessages" :key="index" @click="selectQuickMessage(msg)"
+                      style="cursor: pointer; margin-bottom: 5px;">
+                      {{ msg.label }}
+                    </a-tag>
+                  </div>
+                </a-form-item>
+
+                <!-- 发送按钮 -->
+                <a-form-item>
+                  <a-space>
+                    <a-button type="primary" @click="sendMessageToUsers"
+                      :disabled="!isConnected || !sendMessage.trim()">
+                      {{ getSendButtonText() }}
+                    </a-button>
+                    <a-button @click="clearSend">清空输入</a-button>
+                    <a-switch v-model:checked="autoSendPing" checked-children="自动ping" un-checked-children="手动ping" />
+                  </a-space>
+                </a-form-item>
+              </a-form>
+            </div>
+          </a-card>
+        </a-col>
+
+        <!-- 右侧：消息接收区 -->
+        <a-col :span="12">
+          <a-card title="消息记录" :bordered="false" style="height: 100%;" :extra="`消息数: ${messages.length}`">
+            <div class="receive-area">
+              <!-- 消息控制栏 -->
+              <div class="message-controls">
+                <a-space>
+                  <a-checkbox v-model:checked="autoScroll">自动滚动</a-checkbox>
+                  <a-checkbox v-model:checked="showTimestamp">显示时间</a-checkbox>
+                  <a-checkbox v-model:checked="showSender">显示发送者</a-checkbox>
+                  <a-checkbox v-model:checked="showReceiver">显示接收者</a-checkbox>
+                  <a-select v-model:value="messageFilter" style="width: 120px;" size="small">
+                    <a-select-option value="all">全部消息</a-select-option>
+                    <a-select-option value="send">发送消息</a-select-option>
+                    <a-select-option value="receive">接收消息</a-select-option>
+                    <a-select-option value="system">系统消息</a-select-option>
+                    <a-select-option value="broadcast">广播消息</a-select-option>
+                    <a-select-option value="private">私聊消息</a-select-option>
+                  </a-select>
+                  <a-button size="small" @click="exportMessages">导出</a-button>
+                </a-space>
+              </div>
+
+              <!-- 消息列表 -->
+              <div class="message-list" ref="messageListRef">
+                <div v-for="(msg, index) in filteredMessages" :key="index"
+                  :class="['message-item', `message-${msg.type}`]">
+                  <div class="message-header">
+                    <div class="message-info">
+                      <span v-if="showTimestamp" class="message-time">{{ formatTime(msg.time) }}</span>
+                      <a-tag :color="getMessageColor(msg.type)" size="small">
+                        {{ getMessageTypeText(msg.type) }}
+                      </a-tag>
+                      <span v-if="showSender && msg.sender" class="message-sender">来自: {{ msg.senderRealname ||
+                        msg.senderName || msg.sender }}</span>
+                      <span v-if="showReceiver && msg.receiver" class="message-receiver">发送给: {{
+                        Array.isArray(msg.receiver)
+                          ? msg.receiver.map(r => getUserRealNameById(r)).join(', ') : getUserRealNameById(msg.receiver)
+                      }}</span>
+                    </div>
+                  </div>
+                  <div class="message-content">
+                    <pre>{{ formatMessage(msg.content) }}</pre>
+                  </div>
+                </div>
+                <div v-if="filteredMessages.length === 0" class="empty-message">
+                  暂无消息记录
+                </div>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
     </div>
+
+    <!-- 用户管理模态框 -->
+    <a-modal v-model:open="showUserModal" title="用户管理" width="600px" :footer="null">
+      <div class="user-manager" style="padding: 14px;">
+        <a-table :data-source="onlineUsers" :columns="userColumns" :loading="loadingUsers" rowKey="userId">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'status'">
+              <a-tag :color="getUserStatusColor(record.userId)">
+                {{ getUserStatusText(record.userId) }}
+              </a-tag>
+            </template>
+            <template v-if="column.key === 'actions'">
+              <a-space>
+                <a-button type="link" size="small" @click="sendToUser(record.userId)">
+                  发消息
+                </a-button>
+                <a-button type="link" size="small" @click="toggleUserSelection(record.userId)">
+                  {{ record.checked ? '取消选择' : '选择' }}
+                </a-button>
+              </a-space>
+            </template>
+          </template>
+        </a-table>
+
+        <div class="user-manager-actions">
+          <a-space>
+            <a-button @click="getOnlineUsers">刷新列表</a-button>
+            <a-button type="primary" @click="sendToSelectedUsers" :disabled="selectedUsers.length === 0">
+              发送给选中用户 ({{ selectedUsers.length }})
+            </a-button>
+            <a-button @click="showUserModal = false">关闭</a-button>
+          </a-space>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 发送消息模态框 -->
+    <a-modal v-model:open="showSendModal" :title="sendModalTitle" @ok="sendMessageToSelected"
+      @cancel="showSendModal = false">
+      <a-form layout="vertical">
+        <a-form-item label="接收用户">
+          <a-select v-model:value="modalSelectedUsers" mode="multiple" placeholder="请选择接收用户" style="width: 100%"
+            :options="userOptions" :max-tag-count="3" />
+        </a-form-item>
+        <a-form-item label="消息内容">
+          <a-textarea v-model:value="modalMessage" placeholder="输入要发送的消息" :rows="4" />
+        </a-form-item>
+        <a-form-item label="消息类型">
+          <a-radio-group v-model:value="modalMessageType">
+            <a-radio value="text">文本</a-radio>
+            <a-radio value="json">JSON</a-radio>
+            <a-radio value="command">命令</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- 日志面板 -->
+    <a-collapse v-if="showLogPanel" style="margin-top: 229px;">
+      <a-collapse-panel key="1" header="详细日志">
+        <div class="log-panel">
+          <div class="log-header">
+            <a-space>
+              <span>日志总数: {{ logs.length }}</span>
+              <a-button size="small" @click="clearLogs">清空日志</a-button>
+              <a-switch v-model:checked="logTimestamp" checked-children="时间戳" un-checked-children="无时间" />
+              <a-button size="small" @click="exportLogs">导出日志</a-button>
+            </a-space>
+          </div>
+          <div class="log-content">
+            <div v-for="(log, index) in logs" :key="index" :class="['log-item', `log-${log.level}`]">
+              <span v-if="logTimestamp" class="log-time">[{{ log.time }}]</span>
+              <span class="log-level">[{{ log.level.toUpperCase() }}]</span>
+              <span class="log-message">{{ log.message }}</span>
+            </div>
+            <div v-if="logs.length === 0" class="empty-log">
+              暂无日志
+            </div>
+          </div>
+        </div>
+      </a-collapse-panel>
+    </a-collapse>
+
+    <!-- 底部统计 -->
+    <a-card style="margin-top: 20px;">
+      <a-row>
+        <a-col :span="3">
+          <a-statistic title="连接次数" :value="stats.connectCount" />
+        </a-col>
+        <a-col :span="3">
+          <a-statistic title="发送消息" :value="stats.sendCount" />
+        </a-col>
+        <a-col :span="3">
+          <a-statistic title="接收消息" :value="stats.receiveCount" />
+        </a-col>
+        <a-col :span="3">
+          <a-statistic title="私聊消息" :value="stats.privateCount" />
+        </a-col>
+        <a-col :span="3">
+          <a-statistic title="广播消息" :value="stats.broadcastCount" />
+        </a-col>
+        <a-col :span="3">
+          <a-statistic title="在线用户" :value="onlineUsers.length" />
+        </a-col>
+        <a-col :span="3">
+          <a-statistic title="已连接用户" :value="connectedUsers.length" />
+        </a-col>
+        <a-col :span="3">
+          <a-button @click="showStatsDetail" type="link">详细统计</a-button>
+        </a-col>
+      </a-row>
+    </a-card>
+  </div>
 </template>
 
-<script>
-export default {
-    name: 'WebSocketTest',
-    data() {
-        return {
-            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NjI3MTg2MTUsInVzZXJuYW1lIjoiYWRtaW4ifQ.qSwjclSvEHOefAjm9Oqay9dmhLUZy1cgIBeE1u1Twg8',
-            userId: 'test_user_' + Math.floor(Math.random() * 1000), // 随机用户ID
-            ws: null,
-            isConnected: false,
-            messageToSend: '',
-            logs: [],
-            reconnectAttempts: 0,
-            maxReconnectAttempts: 5,
-            reconnectDelay: 5000 // 5秒重连间隔
-        }
-    },
-    methods: {
-        connect() {
-            if (this.isConnected) return
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
+import { message, Modal } from 'ant-design-vue';
+import { UserOutlined, ReloadOutlined } from '@ant-design/icons-vue';
 
-            // WebSocket 连接地址
-            const wsUrl = `ws://localhost:8091/nursing-unit_101/directive/websocket/${this.userId}?token=${this.token}`
+// WebSocket连接状态
+const ws = ref({}); // 改为对象，存储多个WebSocket连接
+const isConnected = ref(false);
+const isConnecting = ref(false);
+const statusText = ref('未连接');
+const statusColor = ref('default');
 
-            this.ws = new WebSocket(wsUrl)
+// 配置
+const wsConfig = reactive({
+  url: 'ws://localhost:8091/nursing-unit_101/sdWebsocket/',
+  heartbeat: 30
+});
 
-            this.ws.onopen = () => {
-                this.isConnected = true
-                this.reconnectAttempts = 0
-                this.addLog('连接成功')
+// 固定用户ID列表（只需要ID，不需要姓名）
+const fixedUsers = ref([
+  '1990230015776468901',
+  '1990230015776468902',
+  '1990230015776468905',
+  '1990230015776468903',
+  '1990230015776468906',
+  '1990230015776468993',
+  '1990230015776468904'
+]);
 
-                // 启动心跳
-                this.startHeartbeat()
-            }
+// 用户真实姓名缓存（从服务器获取后缓存）
+const userRealnameCache = ref({});
 
-            this.ws.onmessage = (event) => {
-                const message = event.data
-                this.addLog(`收到消息: ${message}`)
+// 连接用户管理
+const selectedConnectUsers = ref([]); // 要连接的用户列表
+const connectedUsers = ref([]); // 已连接成功的用户
+const connectUserOptions = computed(() => {
+  return fixedUsers.value.map(userId => ({
+    label: `${userId}`, // 初始只显示ID
+    value: userId
+  }));
+});
 
-                // 处理心跳响应
-                if (message === 'pong') {
-                    this.addLog('收到心跳响应')
-                }
-            }
+// 用户管理
+const onlineUsers = ref([]);
+const selectedUsers = ref([]);
+const selectAllUsers = ref(false);
+const indeterminate = ref(false);
+const loadingUsers = ref(false);
+const sessionCount = ref(0);
+const showUserModal = ref(false);
+const showSendModal = ref(false);
+const sendModalTitle = ref('发送消息');
 
-            this.ws.onclose = () => {
-                this.isConnected = false
-                this.addLog('连接已关闭')
+// 发送相关
+const sendMessage = ref('');
+const messageType = ref('text');
+const sendMode = ref('single');
+const modalSelectedUsers = ref([]);
+const modalMessage = ref('');
+const modalMessageType = ref('text');
 
-                // 停止心跳
-                this.stopHeartbeat()
+// 消息记录
+const messages = ref([]);
+const messageFilter = ref('all');
+const messageFilterOptions = [
+  { value: 'all', label: '全部消息' },
+  { value: 'send', label: '发送消息' },
+  { value: 'receive', label: '接收消息' },
+  { value: 'system', label: '系统消息' },
+  { value: 'notification', label: '通知消息' },
+  { value: 'private', label: '私聊消息' },
+  { value: 'broadcast', label: '广播消息' },
+  { value: 'business', label: '业务消息' },
+  { value: 'command', label: '命令消息' },
+  { value: 'status', label: '状态消息' },
+  { value: 'heartbeat', label: '心跳消息' },
+  { value: 'error', label: '错误消息' },
+  { value: 'success', label: '成功消息' },
+  { value: 'warning', label: '警告消息' }
+];
+const autoScroll = ref(true);
+const showTimestamp = ref(true);
+const showSender = ref(true);
+const showReceiver = ref(true);
+const showLogPanel = ref(true);
+const messageListRef = ref(null);
 
-                // 自动重连
-                if (this.reconnectAttempts < this.maxReconnectAttempts) {
-                    this.reconnectAttempts++
-                    this.addLog(`将在 ${this.reconnectDelay / 1000} 秒后尝试重连 (${this.reconnectAttempts}/${this.maxReconnectAttempts})`)
-                    setTimeout(() => {
-                        this.connect()
-                    }, this.reconnectDelay)
-                }
-            }
+// 日志
+const logs = ref([]);
+const logTimestamp = ref(true);
 
-            this.ws.onerror = (error) => {
-                this.addLog(`连接错误: ${error.message || '未知错误'}`)
-            }
-        },
+// 快捷消息
+const quickMessages = ref([
+  { label: 'Ping', value: 'ping' },
+  { label: '检查连接', value: 'check' },
+  { label: 'Hello', value: 'Hello WebSocket!' },
+  { label: 'JSON消息', value: '{"cmd": "test", "data": "测试数据"}' },
+  { label: '获取用户', value: '{"cmd": "getUsers"}' },
+  { label: '广播消息', value: '{"cmd": "broadcast", "data": "广播消息"}' }
+]);
 
-        disconnect() {
-            if (this.ws) {
-                this.ws.close()
-                this.ws = null
-            }
-            this.isConnected = false
-            this.stopHeartbeat()
-        },
+// 统计
+const stats = reactive({
+  connectCount: 0,
+  sendCount: 0,
+  receiveCount: 0,
+  privateCount: 0,
+  broadcastCount: 0,
+  connectStart: null,
+  connectDuration: 0
+});
 
-        sendMessage() {
-            if (this.ws && this.isConnected) {
-                this.ws.send(this.messageToSend)
-                this.addLog(`发送消息: ${this.messageToSend}`)
-                this.messageToSend = ''
-            }
-        },
+// 自动重连
+const autoReconnect = ref(true);
+const autoSendPing = ref(false);
+let heartbeatTimer = null;
+let reconnectTimer = null;
+let reconnectAttempts = 0;
+const maxReconnectAttempts = 5;
 
-        sendPing() {
-            if (this.ws && this.isConnected) {
-                this.ws.send('ping')
-                this.addLog('发送心跳: ping')
-            }
-        },
+// 用户表格列
+const userColumns = [
+  {
+    title: '用户ID',
+    dataIndex: 'userId',
+    key: 'userId',
+  },
+  {
+    title: '真实姓名',
+    dataIndex: 'realname',
+    key: 'realname',
+  },
+  {
+    title: '手机号',
+    dataIndex: 'phone',
+    key: 'phone',
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 100,
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 150,
+  },
+];
 
-        startHeartbeat() {
-            // 每30秒发送一次心跳
-            this.heartbeatInterval = setInterval(() => {
-                if (this.isConnected) {
-                    this.sendPing()
-                }
-            }, 30000)
-        },
+// 计算属性
+const filteredMessages = computed(() => {
+  if (messageFilter.value === 'all') {
+    return messages.value;
+  }
+  return messages.value.filter(msg => msg.type === messageFilter.value);
+});
 
-        stopHeartbeat() {
-            if (this.heartbeatInterval) {
-                clearInterval(this.heartbeatInterval)
-                this.heartbeatInterval = null
-            }
-        },
+const userOptions = computed(() => {
+  return onlineUsers.value.map(user => ({
+    label: (user.realname || user.userId) + (connectedUsers.value.includes(user.userId) ? ' (已连接)' : ''),
+    value: user.userId
+  }));
+});
 
-        addLog(message) {
-            const time = new Date().toLocaleTimeString()
-            this.logs.unshift({ time, message })
-            if (this.logs.length > 100) {
-                this.logs.pop()
-            }
-        }
-    },
+// 添加日志
+const addLog = (level, logMessage) => {
+  const logEntry = {
+    time: new Date().toLocaleTimeString(),
+    level,
+    message: logMessage
+  };
+  logs.value.unshift(logEntry);
+};
 
-    beforeDestroy() {
-        this.disconnect()
+// 添加消息记录
+const addMessage = (type, content, sender, receiver, senderRealname) => {
+  const msg = {
+    time: new Date(),
+    type,
+    content: typeof content === 'object' ? JSON.stringify(content, null, 2) : content,
+    sender,
+    senderRealname: senderRealname || sender,
+    receiver
+  };
+  messages.value.unshift(msg);
+
+  // 更新统计
+  if (type === 'send') stats.sendCount++;
+  else if (type === 'receive') stats.receiveCount++;
+  else if (type === 'private') stats.privateCount++;
+  else if (type === 'broadcast') stats.broadcastCount++;
+
+  // 自动滚动
+  if (autoScroll.value) {
+    nextTick(() => {
+      if (messageListRef.value) {
+        messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
+      }
+    });
+  }
+};
+
+// 连接WebSocket
+const connect = async () => {
+  if (isConnecting.value || isConnected.value || selectedConnectUsers.value.length === 0) return;
+
+  isConnecting.value = true;
+  statusText.value = '连接中...';
+  statusColor.value = 'processing';
+  addLog('info', `正在连接 ${selectedConnectUsers.value.length} 个用户...`);
+
+  const connectPromises = selectedConnectUsers.value.map(userId => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        connectSingleUser(userId, resolve);
+      }, 100); // 稍微错开连接时间，避免同时连接
+    });
+  });
+
+  try {
+    await Promise.all(connectPromises);
+
+    if (connectedUsers.value.length > 0) {
+      isConnected.value = true;
+      isConnecting.value = false;
+      statusText.value = `已连接 ${connectedUsers.value.length} 个用户`;
+      statusColor.value = 'success';
+
+      addLog('success', `✅ 连接成功 ${connectedUsers.value.length} 个用户`);
+      addMessage('system', `连接成功 ${connectedUsers.value.length} 个用户`, '系统');
+      message.success(`已连接 ${connectedUsers.value.length} 个用户`);
+
+      startHeartbeat();
+      startConnectTimer();
+      getOnlineUsers();
+    } else {
+      isConnecting.value = false;
+      statusText.value = '连接失败';
+      statusColor.value = 'error';
+      message.error('所有用户连接失败');
     }
-}
+  } catch (error) {
+    isConnecting.value = false;
+    statusText.value = '连接异常';
+    statusColor.value = 'error';
+    addLog('error', `连接异常: ${error.message}`);
+  }
+};
+
+// 连接单个用户
+const connectSingleUser = (userId, resolve) => {
+  try {
+    if (ws.value[userId]) {
+      ws.value[userId].close();
+    }
+
+    const fullUrl = `${wsConfig.url}${userId}`.replace('http', 'ws');
+    const websocket = new WebSocket(fullUrl);
+    ws.value[userId] = websocket;
+
+    websocket.onopen = (event) => {
+      if (!connectedUsers.value.includes(userId)) {
+        connectedUsers.value.push(userId);
+        stats.connectCount++;
+
+        if (connectedUsers.value.length === 1) {
+          stats.connectStart = Date.now();
+        }
+
+        addLog('success', `✅ 用户 ${userId} 连接成功`);
+        addMessage('system', `用户 ${userId} 连接成功`, '系统');
+      }
+      resolve();
+    };
+
+    websocket.onmessage = (event) => {
+      const data = event.data;
+      addLog('receive', `[${userId}] 收到消息: ${data}`);
+
+      try {
+        const jsonData = JSON.parse(data);
+
+        // 根据消息类型进行分发处理
+        switch (jsonData.type) {
+          case 'userList':
+            // 用户列表更新
+            updateOnlineUsers(jsonData.users || []);
+            break;
+
+          case 'private':
+            // 私聊消息
+            addMessage('private', data, jsonData.from || userId, jsonData.to || wsConfig.userId, getUserRealNameById(jsonData.from || userId));
+            break;
+
+          case 'broadcast':
+            // 广播消息
+            addMessage('broadcast', data, jsonData.from || userId, '所有人', getUserRealNameById(jsonData.from || userId));
+            break;
+
+          case 'system':
+            // 系统消息
+            addMessage('system', data, '系统', null, '系统');
+            if (jsonData.content) {
+              message.info(jsonData.content); // 显示系统通知
+            }
+            break;
+
+          case 'notification':
+            // 通知消息
+            addMessage('notification', data, jsonData.from || '系统', null, jsonData.fromName || '系统');
+            if (jsonData.title || jsonData.content) {
+              message.info(jsonData.title || jsonData.content);
+            }
+            break;
+
+          case 'business':
+            // 业务消息
+            handleBusinessMessage(jsonData);
+            addMessage('business', data, jsonData.from || '业务系统', null, jsonData.fromName || '业务系统');
+            break;
+
+          case 'command':
+            // 命令消息
+            handleCommandMessage(jsonData);
+            addMessage('command', data, jsonData.from || '服务器', null, jsonData.fromName || '服务器');
+            break;
+
+          case 'status':
+            // 状态更新消息
+            handleStatusMessage(jsonData);
+            addMessage('status', data, jsonData.from || '系统', null, jsonData.fromName || '系统');
+            break;
+
+          case 'error':
+            // 错误消息
+            addMessage('error', data, jsonData.from || '系统', null, jsonData.fromName || '系统');
+            if (jsonData.message) {
+              message.error(jsonData.message);
+            }
+            break;
+
+          case 'success':
+            // 成功消息
+            addMessage('success', data, jsonData.from || '系统', null, jsonData.fromName || '系统');
+            if (jsonData.message) {
+              message.success(jsonData.message);
+            }
+            break;
+
+          case 'warning':
+            // 警告消息
+            addMessage('warning', data, jsonData.from || '系统', null, jsonData.fromName || '系统');
+            if (jsonData.message) {
+              message.warning(jsonData.message);
+            }
+            break;
+
+          case 'ping':
+          case 'pong':
+            // 心跳消息
+            addMessage('heartbeat', data, jsonData.from || '系统', null, jsonData.fromName || '系统');
+            addLog('heartbeat', `[${userId}] 心跳消息`);
+            break;
+
+          default:
+            // 未知类型消息，保持原有逻辑但记录日志
+            addLog('warn', `[${userId}] 收到未知类型消息: ${jsonData.type}`);
+            addMessage('receive', data, jsonData.from || '服务器', jsonData.to || null, getUserRealNameById(jsonData.from || '服务器'));
+        }
+
+      } catch (e) {
+        // 非JSON消息处理
+        if (data === 'ping' || data === 'pong') {
+          addLog('heartbeat', `[${userId}] 收到心跳: ${data}`);
+          addMessage('heartbeat', data, '系统', null, '系统');
+        } else {
+          addLog('warn', `[${userId}] 收到非JSON消息: ${data}`);
+          addMessage('receive', data, '服务器', null, '服务器');
+        }
+      }
+    };
+
+    websocket.onclose = (event) => {
+      const index = connectedUsers.value.indexOf(userId);
+      if (index > -1) {
+        connectedUsers.value.splice(index, 1);
+        addLog('warn', `❌ 用户 ${userId} 连接关闭 (代码: ${event.code})`);
+        addMessage('system', `用户 ${userId} 连接已断开`, '系统');
+      }
+
+      if (connectedUsers.value.length === 0) {
+        isConnected.value = false;
+        statusText.value = '已断开';
+        statusColor.value = 'error';
+        stopHeartbeat();
+        stopConnectTimer();
+      } else {
+        statusText.value = `已连接 ${connectedUsers.value.length} 个用户`;
+      }
+    };
+
+    websocket.onerror = (error) => {
+      addLog('error', `[${userId}] 连接错误`);
+    };
+
+  } catch (error) {
+    addLog('error', `[${userId}] 连接异常: ${error.message}`);
+    resolve();
+  }
+};
+
+// 断开所有连接
+const disconnectAll = () => {
+  Object.keys(ws.value).forEach(userId => {
+    if (ws.value[userId]) {
+      ws.value[userId].close(1000, '用户主动断开');
+    }
+  });
+
+  isConnected.value = false;
+  statusText.value = '已断开';
+  statusColor.value = 'default';
+  connectedUsers.value = [];
+  onlineUsers.value = [];
+  selectedUsers.value = [];
+
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+
+  stopHeartbeat();
+  stopConnectTimer();
+
+  addLog('info', '已断开所有用户连接');
+  message.success('已断开所有用户连接');
+};
+
+// 断开选中用户连接
+const disconnectSelected = () => {
+  if (selectedConnectUsers.value.length === 0) {
+    message.warning('请先选择要断开的用户');
+    return;
+  }
+
+  selectedConnectUsers.value.forEach(userId => {
+    if (ws.value[userId]) {
+      ws.value[userId].close(1000, '用户主动断开');
+      const index = connectedUsers.value.indexOf(userId);
+      if (index > -1) {
+        connectedUsers.value.splice(index, 1);
+      }
+    }
+  });
+
+  if (connectedUsers.value.length === 0) {
+    isConnected.value = false;
+    statusText.value = '已断开';
+    statusColor.value = 'default';
+    stopHeartbeat();
+    stopConnectTimer();
+  } else {
+    statusText.value = `已连接 ${connectedUsers.value.length} 个用户`;
+  }
+
+  addLog('info', `已断开 ${selectedConnectUsers.value.length} 个用户的连接`);
+  message.success(`已断开 ${selectedConnectUsers.value.length} 个用户的连接`);
+};
+
+// 获取在线用户
+const getOnlineUsers = () => {
+  if (!isConnected.value || connectedUsers.value.length === 0) {
+    message.warning('请先连接WebSocket');
+    return;
+  }
+
+  loadingUsers.value = true;
+  addLog('info', '获取在线用户...');
+
+  // 发送获取用户列表的命令
+  connectedUsers.value.forEach(userId => {
+    if (ws.value[userId]) {
+      const cmd = { cmd: 'getUsers', sender: userId };
+      ws.value[userId].send(JSON.stringify(cmd));
+      addMessage('send', JSON.stringify(cmd), userId, '服务器', getUserRealNameById(userId));
+    }
+  });
+
+  loadingUsers.value = false;
+};
+
+// 更新在线用户列表
+const updateOnlineUsers = (users) => {
+  console.log("🌊 ~ updateOnlineUsers ~ users:", users)
+  const userList = users.map(user => {
+    // 如果是对象格式（有employessId和realname）
+    if (user && typeof user === 'object') {
+      const userId = user.employessId || user.userId || user.id || '';
+      const realname = user.realname || '';
+
+      // 缓存用户真实姓名
+      if (realname && userId) {
+        userRealnameCache.value[userId] = realname;
+      }
+
+      return {
+        userId,
+        realname,
+        checked: selectedUsers.value.includes(userId),
+        // 保持原有字段
+        ...user
+      };
+    }
+    // 如果是字符串（用户ID）
+    else if (typeof user === 'string') {
+      return {
+        userId: user,
+        realname: userRealnameCache.value[user] || '',
+        checked: selectedUsers.value.includes(user)
+      };
+    }
+    // 其他格式
+    else {
+      return {
+        userId: '',
+        realname: '',
+        checked: false
+      };
+    }
+  });
+
+  onlineUsers.value = userList;
+  sessionCount.value = onlineUsers.value.length;
+  updateSelectAllState();
+  addLog('success', `更新在线用户列表，共 ${users.length} 个用户`);
+};
+
+// 全选/取消全选
+const onSelectAllChange = (checked) => {
+  onlineUsers.value = onlineUsers.value.map(user => ({
+    ...user,
+    checked
+  }));
+  selectedUsers.value = checked ? onlineUsers.value.map(u => u.userId) : [];
+  indeterminate.value = false;
+};
+
+// 用户选择变化
+const onUserSelectChange = (userId, checked) => {
+  const user = onlineUsers.value.find(u => u.userId === userId);
+  if (user) user.checked = checked;
+
+  selectedUsers.value = onlineUsers.value.filter(u => u.checked).map(u => u.userId);
+  updateSelectAllState();
+};
+
+// 更新全选状态
+const updateSelectAllState = () => {
+  const checkedCount = onlineUsers.value.filter(u => u.checked).length;
+  selectAllUsers.value = checkedCount === onlineUsers.value.length;
+  indeterminate.value = checkedCount > 0 && checkedCount < onlineUsers.value.length;
+};
+
+// 发送消息给单个用户
+const sendToUser = (userId) => {
+  if (!isConnected.value) {
+    message.warning('请先连接WebSocket');
+    return;
+  }
+
+  modalSelectedUsers.value = [userId];
+  modalMessage.value = '';
+  modalMessageType.value = 'text';
+  sendModalTitle.value = `发送消息给 ${getUserRealNameById(userId)}`;
+  showSendModal.value = true;
+};
+
+// 发送消息给选中用户
+const sendToSelectedUsers = () => {
+  if (selectedUsers.value.length === 0) {
+    message.warning('请先选择要发送的用户');
+    return;
+  }
+
+  modalSelectedUsers.value = [...selectedUsers.value];
+  modalMessage.value = '';
+  modalMessageType.value = 'text';
+  sendModalTitle.value = `发送消息给 ${selectedUsers.value.length} 个用户`;
+  showSendModal.value = true;
+};
+
+// 广播给选中用户
+const broadcastToSelectedUsers = () => {
+  if (selectedUsers.value.length === 0) {
+    message.warning('请先选择要广播的用户');
+    return;
+  }
+
+  if (!sendMessage.value.trim()) {
+    message.warning('请输入要广播的消息');
+    return;
+  }
+
+  selectedUsers.value.forEach(userId => {
+    sendMessageToUser(userId, sendMessage.value);
+  });
+
+  addMessage('broadcast', sendMessage.value, '当前用户', selectedUsers.value);
+  addLog('info', `广播消息给 ${selectedUsers.value.length} 个用户`);
+  message.success(`消息已发送给 ${selectedUsers.value.length} 个用户`);
+};
+
+// 发送消息给单个用户
+const sendMessageToUser = (userId, msg) => {
+  if (!isConnected.value) {
+    message.warning('WebSocket未连接');
+    return false;
+  }
+
+  // 使用第一个已连接的用户发送消息
+  const sender = connectedUsers.value[0];
+  if (!sender || !ws.value[sender]) {
+    message.warning('没有可用的连接');
+    return false;
+  }
+
+  try {
+    const messageObj = {
+      type: 'private',
+      to: userId,
+      from: sender,
+      message: msg,
+      timestamp: Date.now()
+    };
+
+    ws.value[sender].send(JSON.stringify(messageObj));
+    addMessage('private', JSON.stringify(messageObj, null, 2), sender, userId, getUserRealNameById(sender));
+    addLog('send', `[${getUserRealNameById(sender)}] 发送私聊消息给 ${getUserRealNameById(userId)}`);
+    return true;
+  } catch (error) {
+    addLog('error', `发送给 ${getUserRealNameById(userId)} 失败: ${error.message}`);
+    return false;
+  }
+};
+
+// 发送消息（模态框确认）
+const sendMessageToSelected = () => {
+  if (modalSelectedUsers.value.length === 0) {
+    message.warning('请选择接收用户');
+    return;
+  }
+
+  if (!modalMessage.value.trim()) {
+    message.warning('请输入消息内容');
+    return;
+  }
+
+  modalSelectedUsers.value.forEach(userId => {
+    sendMessageToUser(userId, modalMessage.value);
+  });
+
+  showSendModal.value = false;
+  modalMessage.value = '';
+  modalSelectedUsers.value = [];
+
+  message.success(`消息已发送给 ${modalSelectedUsers.value.length} 个用户`);
+};
+
+// 发送消息给用户
+const sendMessageToUsers = () => {
+  if (!isConnected.value) {
+    message.warning('请先连接WebSocket');
+    return;
+  }
+
+  if (!sendMessage.value.trim()) {
+    message.warning('请输入消息内容');
+    return;
+  }
+
+  switch (sendMode.value) {
+    case 'single':
+      if (selectedUsers.value.length === 0) {
+        message.warning('请选择一个用户');
+        return;
+      }
+      sendMessageToUser(selectedUsers.value[0], sendMessage.value);
+      break;
+
+    case 'multiple':
+      if (selectedUsers.value.length === 0) {
+        message.warning('请选择要发送的用户');
+        return;
+      }
+      broadcastToSelectedUsers();
+      break;
+
+    case 'broadcast':
+      // 发送广播消息
+      try {
+        const sender = connectedUsers.value[0];
+        if (!sender || !ws.value[sender]) {
+          message.warning('没有可用的连接');
+          return;
+        }
+
+        const broadcastMsg = {
+          type: 'broadcast',
+          from: sender,
+          message: sendMessage.value,
+          timestamp: Date.now()
+        };
+
+        ws.value[sender].send(JSON.stringify(broadcastMsg));
+        addMessage('broadcast', JSON.stringify(broadcastMsg, null, 2), sender, '所有人', getUserRealNameById(sender));
+        addLog('info', `[${getUserRealNameById(sender)}] 发送广播消息`);
+        message.success('广播消息已发送');
+      } catch (error) {
+        addLog('error', `广播消息发送失败: ${error.message}`);
+      }
+      break;
+  }
+
+  sendMessage.value = '';
+};
+
+// 获取发送按钮文本
+const getSendButtonText = () => {
+  switch (sendMode.value) {
+    case 'single':
+      if (selectedUsers.value.length === 0) {
+        return '发送消息';
+      } else {
+        const realname = getUserRealNameById(selectedUsers.value[0]);
+        return `发送给 ${realname}`;
+      }
+    case 'multiple':
+      if (selectedUsers.value.length === 0) {
+        return '发送给选中用户';
+      } else {
+        return `发送给 ${selectedUsers.value.length} 个用户`;
+      }
+    case 'broadcast':
+      return '广播给所有人';
+    default:
+      return '发送消息';
+  }
+};
+// 移除选中用户
+const removeSelectedUser = (userId) => {
+  const index = selectedUsers.value.indexOf(userId);
+  if (index > -1) {
+    selectedUsers.value.splice(index, 1);
+    const user = onlineUsers.value.find(u => u.userId === userId);
+    if (user) user.checked = false;
+    updateSelectAllState();
+  }
+};
+
+// 清除选中用户
+const clearSelectedUsers = () => {
+  selectedUsers.value = [];
+  onlineUsers.value = onlineUsers.value.map(user => ({ ...user, checked: false }));
+  selectAllUsers.value = false;
+  indeterminate.value = false;
+};
+
+// 移除用户
+const removeUser = (userId) => {
+  Modal.confirm({
+    title: '确认移除',
+    content: `确定要移除用户 ${getUserRealNameById(userId)} 吗？`,
+    onOk: () => {
+      onlineUsers.value = onlineUsers.value.filter(user => user.userId !== userId);
+      removeSelectedUser(userId);
+      addLog('info', `移除用户: ${getUserRealNameById(userId)}`);
+      message.success('用户已移除');
+    }
+  });
+};
+
+// 用户管理界面
+const showUserManager = () => {
+  getOnlineUsers();
+  showUserModal.value = true;
+};
+
+// 切换用户选择
+const toggleUserSelection = (userId) => {
+  const user = onlineUsers.value.find(u => u.userId === userId);
+  if (user) {
+    user.checked = !user.checked;
+    onUserSelectChange(userId, user.checked);
+  }
+};
+
+// 开始心跳
+const startHeartbeat = () => {
+  stopHeartbeat();
+
+  if (autoSendPing.value) {
+    heartbeatTimer = setInterval(() => {
+      if (isConnected.value) {
+        connectedUsers.value.forEach(userId => {
+          if (ws.value[userId] && ws.value[userId].readyState === WebSocket.OPEN) {
+            ws.value[userId].send('ping');
+            addMessage('system', '发送心跳ping', userId, '服务器', getUserRealNameById(userId));
+          }
+        });
+      }
+    }, wsConfig.heartbeat * 1000);
+  }
+};
+
+// 停止心跳
+const stopHeartbeat = () => {
+  if (heartbeatTimer) {
+    clearInterval(heartbeatTimer);
+    heartbeatTimer = null;
+  }
+};
+
+// 开始连接时长计时
+const startConnectTimer = () => {
+  stats.connectDuration = 0;
+  const timer = setInterval(() => {
+    if (isConnected.value) {
+      stats.connectDuration = Math.floor((Date.now() - stats.connectStart) / 1000);
+    } else {
+      clearInterval(timer);
+    }
+  }, 1000);
+};
+
+// 停止连接时长计时
+const stopConnectTimer = () => {
+  if (stats.connectStart) {
+    stats.connectDuration = Math.floor((Date.now() - stats.connectStart) / 1000);
+    stats.connectStart = null;
+  }
+};
+
+// 格式化时长
+const formatDuration = (seconds) => {
+  if (!seconds) return '0秒';
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+
+  if (hours > 0) {
+    return `${hours}时${minutes}分${secs}秒`;
+  } else if (minutes > 0) {
+    return `${minutes}分${secs}秒`;
+  } else {
+    return `${secs}秒`;
+  }
+};
+
+// 格式化时间
+const formatTime = (date) => {
+  if (!showTimestamp.value) return '';
+  return date.toLocaleTimeString();
+};
+
+// 格式化消息
+const formatMessage = (content) => {
+  if (!content) return '';
+  try {
+    const obj = JSON.parse(content);
+    return JSON.stringify(obj, null, 2);
+  } catch (e) {
+    return content;
+  }
+};
+
+// 获取消息类型文本
+const getMessageTypeText = (type) => {
+  const typeMap = {
+    send: '发送',
+    receive: '接收',
+    system: '系统',
+    private: '私聊',
+    broadcast: '广播'
+  };
+  return typeMap[type] || type;
+};
+
+// 获取消息颜色
+const getMessageColor = (type) => {
+  const colors = {
+    send: 'blue',
+    receive: 'green',
+    system: 'orange',
+    private: 'purple',
+    broadcast: 'cyan',
+    notification: 'blue',
+    business: 'geekblue',
+    command: 'gold',
+    status: 'lime',
+    heartbeat: 'magenta',
+    error: 'red',
+    success: 'green',
+    warning: 'orange'
+  };
+  return colors[type] || 'default';
+};
+
+// 选择快捷消息
+const selectQuickMessage = (msg) => {
+  sendMessage.value = msg.value;
+  if (msg.value === 'ping' || msg.value === 'check') {
+    messageType.value = 'ping';
+  } else if (msg.value.startsWith('{') && msg.value.endsWith('}')) {
+    messageType.value = 'json';
+  }
+};
+
+// 清空输入
+const clearSend = () => {
+  sendMessage.value = '';
+};
+
+// 清空消息
+const clearMessages = () => {
+  messages.value = [];
+  stats.sendCount = 0;
+  stats.receiveCount = 0;
+  stats.privateCount = 0;
+  stats.broadcastCount = 0;
+};
+
+// 清空日志
+const clearLogs = () => {
+  logs.value = [];
+};
+
+// 清空所有
+const clearAll = () => {
+  clearMessages();
+  clearLogs();
+  message.success('已清空所有记录');
+};
+
+// 切换日志面板
+const toggleLogPanel = () => {
+  showLogPanel.value = !showLogPanel.value;
+};
+
+// 导出消息
+const exportMessages = () => {
+  const data = {
+    exportTime: new Date().toISOString(),
+    config: { ...wsConfig },
+    stats: { ...stats },
+    messages: messages.value
+  };
+
+  const dataStr = JSON.stringify(data, null, 2);
+  const blob = new Blob([dataStr], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `websocket-messages-${new Date().getTime()}.json`;
+  link.click();
+  URL.revokeObjectURL(url);
+
+  addLog('info', '消息记录已导出');
+  message.success('消息记录已导出');
+};
+
+// 导出日志
+const exportLogs = () => {
+  const data = {
+    exportTime: new Date().toISOString(),
+    logs: logs.value
+  };
+
+  const dataStr = JSON.stringify(data, null, 2);
+  const blob = new Blob([dataStr], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `websocket-logs-${new Date().getTime()}.json`;
+  link.click();
+  URL.revokeObjectURL(url);
+
+  addLog('info', '日志已导出');
+  message.success('日志已导出');
+};
+
+// 显示统计详情
+const showStatsDetail = () => {
+  Modal.info({
+    title: '详细统计信息',
+    width: 600,
+    content: `
+      <div style="font-family: monospace;">
+        <p><strong>连接统计:</strong></p>
+        <p>连接次数: ${stats.connectCount}</p>
+        <p>发送消息: ${stats.sendCount}</p>
+        <p>接收消息: ${stats.receiveCount}</p>
+        <p>私聊消息: ${stats.privateCount}</p>
+        <p>广播消息: ${stats.broadcastCount}</p>
+        <p>连接时长: ${formatDuration(stats.connectDuration)}</p>
+        <p><strong>用户统计:</strong></p>
+        <p>已连接用户: ${connectedUsers.value.length}</p>
+        <p>在线用户: ${onlineUsers.value.length}</p>
+        <p>选中用户: ${selectedUsers.value.length}</p>
+        <p><strong>消息统计:</strong></p>
+        <p>消息总数: ${messages.value.length}</p>
+        <p>日志条数: ${logs.value.length}</p>
+      </div>
+    `,
+  });
+};
+
+// 测试Ping
+const testPing = () => {
+  if (!isConnected.value) {
+    message.warning('WebSocket未连接');
+    return;
+  }
+
+  connectedUsers.value.forEach(userId => {
+    if (ws.value[userId]) {
+      ws.value[userId].send('ping');
+      addMessage('send', 'ping', userId, '服务器', getUserRealNameById(userId));
+    }
+  });
+
+  addLog('info', '发送ping测试');
+  message.success('ping已发送');
+};
+
+// 监听自动ping
+watch(autoSendPing, (newVal) => {
+  if (newVal && isConnected.value) {
+    startHeartbeat();
+  } else {
+    stopHeartbeat();
+  }
+});
+
+// 业务消息处理
+const handleBusinessMessage = (jsonData) => {
+  const { cmd, data } = jsonData;
+
+  switch (cmd) {
+    case 'orderUpdate':
+      // 处理订单更新
+      addLog('info', `收到订单更新: ${JSON.stringify(data)}`);
+      break;
+
+    case 'taskAssign':
+      // 处理任务分配
+      addLog('info', `收到任务分配: ${JSON.stringify(data)}`);
+      break;
+
+    case 'dataSync':
+      // 处理数据同步
+      addLog('info', `收到数据同步: ${JSON.stringify(data)}`);
+      break;
+
+    default:
+      addLog('warn', `未知业务命令: ${cmd}`);
+  }
+};
+
+// 命令消息处理
+const handleCommandMessage = (jsonData) => {
+  const { command, params } = jsonData;
+
+  switch (command) {
+    case 'refresh':
+      // 刷新页面数据
+      getOnlineUsers();
+      break;
+
+    case 'reconnect':
+      // 重连命令
+      if (isConnected.value) {
+        disconnectAll();
+      }
+      setTimeout(() => connect(), 1000);
+      break;
+
+    case 'clearCache':
+      // 清空缓存
+      clearAll();
+      break;
+
+    default:
+      addLog('warn', `未知命令: ${command}`);
+  }
+};
+
+// 状态消息处理
+const handleStatusMessage = (jsonData) => {
+  const { status, user, data } = jsonData;
+
+  switch (status) {
+    case 'online':
+      addLog('info', `用户 ${getUserRealNameById(user)} 上线`);
+      break;
+
+    case 'offline':
+      addLog('info', `用户 ${getUserRealNameById(user)} 下线`);
+      break;
+
+    case 'busy':
+      addLog('info', `用户 ${getUserRealNameById(user)} 忙碌`);
+      break;
+
+    case 'away':
+      addLog('info', `用户 ${getUserRealNameById(user)} 离开`);
+      break;
+  }
+};
+
+// 根据用户ID获取用户真实姓名
+const getUserRealNameById = (userId) => {
+  // 首先在在线用户中查找
+  const onlineUser = onlineUsers.value.find(u => u.userId === userId);
+  if (onlineUser && onlineUser.realname) {
+    return onlineUser.realname;
+  }
+
+  // 然后在缓存中查找
+  if (userRealnameCache.value[userId]) {
+    return userRealnameCache.value[userId];
+  }
+
+  // 最后返回ID
+  return userId;
+};
+
+// 获取用户状态颜色
+const getUserStatusColor = (userId) => {
+  if (connectedUsers.value.includes(userId)) {
+    return 'green';
+  } else if (selectedConnectUsers.value.includes(userId)) {
+    return 'orange';
+  } else {
+    return 'blue';
+  }
+};
+
+// 获取用户状态文本
+const getUserStatusText = (userId) => {
+  if (connectedUsers.value.includes(userId)) {
+    return '已连接';
+  } else if (selectedConnectUsers.value.includes(userId)) {
+    return '已选中';
+  } else {
+    return '在线';
+  }
+};
+
+// 全选用户连接
+const selectAllUsersToConnect = () => {
+  selectedConnectUsers.value = [...fixedUsers.value];
+};
+
+// 清空选择的连接用户
+const clearSelectedConnectUsers = () => {
+  selectedConnectUsers.value = [];
+};
+
+// 过滤用户选项
+const filterUserOption = (input, option) => {
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+
+// 断开单个用户连接
+const disconnectSingleUser = (userId) => {
+  if (ws.value[userId]) {
+    ws.value[userId].close(1000, '用户主动断开');
+    const index = connectedUsers.value.indexOf(userId);
+    if (index > -1) {
+      connectedUsers.value.splice(index, 1);
+      addLog('info', `已断开用户 ${getUserRealNameById(userId)}`);
+      message.success(`已断开用户 ${getUserRealNameById(userId)}`);
+    }
+  }
+
+  if (connectedUsers.value.length === 0) {
+    isConnected.value = false;
+    statusText.value = '已断开';
+    statusColor.value = 'default';
+    stopHeartbeat();
+    stopConnectTimer();
+  } else {
+    statusText.value = `已连接 ${connectedUsers.value.length} 个用户`;
+  }
+};
+
+// 组件卸载时清理
+onBeforeUnmount(() => {
+  disconnectAll();
+  clearAll();
+});
+
+// 组件挂载时自动选择一个默认用户
+onMounted(() => {
+  // 默认选中第一个用户
+  if (fixedUsers.value.length > 0) {
+    selectedConnectUsers.value = [fixedUsers.value[0]];
+  }
+});
 </script>
 
 <style scoped>
-.websocket-test {
-    padding: 20px;
-    max-width: 800px;
-    margin: 0 auto;
+.websocket-debugger {
+  padding: 20px;
 }
 
-.connection-panel {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
+.config-section {
+  margin-bottom: 20px;
 }
 
-.status {
-    margin-left: 10px;
-    padding: 5px 10px;
-    border-radius: 4px;
-    background-color: #f56c6c;
-    color: white;
+.config-section h3 {
+  margin-bottom: 16px;
+  color: #333;
 }
 
-.status.connected {
-    background-color: #67c23a;
+.control-buttons {
+  margin: 20px 0;
 }
 
-.message-panel {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
+.connection-status {
+  margin-top: 20px;
+  padding: 10px;
+  background: #f5f5f5;
+  border-radius: 4px;
 }
 
+.content-area {
+  margin-top: 20px;
+  height: 500px;
+}
+
+/* 用户列表样式 */
+.user-list {
+  height: 300px;
+  overflow-y: auto;
+  margin-bottom: 10px;
+}
+
+.user-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+  /* 防止内容溢出 */
+}
+
+.user-name {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-tag {
+  min-width: 60px;
+  text-align: center;
+}
+
+.user-id {
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 12px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-actions {
+  margin-top: 4px;
+}
+
+.empty-user {
+  text-align: center;
+  padding: 40px 0;
+  color: #999;
+}
+
+.selected-users-bar {
+  padding: 10px;
+  background: #f0f9ff;
+  border: 1px solid #91d5ff;
+  border-radius: 4px;
+  margin-top: 10px;
+}
+
+.selected-count {
+  font-weight: 500;
+  color: #1890ff;
+  margin-bottom: 8px;
+}
+
+.selected-users-display {
+  min-height: 32px;
+  padding: 4px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  background: #fafafa;
+}
+
+/* 消息区域 */
+.send-area,
+.receive-area {
+  height: 100%;
+}
+
+.receiver-section {
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.message-controls {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.quick-messages {
+  margin-bottom: 10px;
+}
+
+.message-list {
+  height: 300px;
+  overflow-y: auto;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  padding: 10px;
+  background: #fafafa;
+}
+
+.message-item {
+  margin-bottom: 10px;
+  padding: 8px;
+  border-radius: 4px;
+  background: white;
+  border-left: 4px solid #d9d9d9;
+}
+
+.message-send {
+  border-left-color: #1890ff;
+  background: #e6f7ff;
+}
+
+.message-receive {
+  border-left-color: #52c41a;
+  background: #f6ffed;
+}
+
+.message-system {
+  border-left-color: #faad14;
+  background: #fff7e6;
+}
+
+.message-private {
+  border-left-color: #722ed1;
+  background: #f9f0ff;
+}
+
+.message-broadcast {
+  border-left-color: #13c2c2;
+  background: #e6fffb;
+}
+
+.message-header {
+  margin-bottom: 5px;
+}
+
+.message-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #666;
+  flex-wrap: wrap;
+}
+
+.message-time {
+  font-family: monospace;
+}
+
+.message-sender,
+.message-receiver {
+  font-size: 11px;
+  color: #8c8c8c;
+}
+
+.message-content pre {
+  margin: 0;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.empty-message,
+.empty-log {
+  text-align: center;
+  color: #999;
+  padding: 20px;
+}
+
+/* 用户统计 */
+.user-stats {
+  display: flex;
+  justify-content: space-around;
+  padding: 10px;
+  border-top: 1px solid #f0f0f0;
+  background: #fafafa;
+}
+
+/* 日志面板 */
 .log-panel {
-    border: 1px solid #ebeef5;
-    border-radius: 4px;
-    padding: 15px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.log-header {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
 }
 
 .log-content {
-    max-height: 400px;
-    overflow-y: auto;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 12px;
 }
 
 .log-item {
-    padding: 5px 0;
-    border-bottom: 1px dashed #ebeef5;
+  padding: 4px 8px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.log-info {
+  color: #1890ff;
+}
+
+.log-success {
+  color: #52c41a;
+}
+
+.log-warn {
+  color: #faad14;
+}
+
+.log-error {
+  color: #ff4d4f;
+}
+
+.log-heartbeat {
+  color: #eb2f96;
 }
 
 .log-time {
-    color: #909399;
-    margin-right: 10px;
+  margin-right: 8px;
+  color: #999;
 }
 
-.log-message {
-    word-break: break-all;
+.log-level {
+  margin-right: 8px;
+  font-weight: bold;
+}
+
+/* 用户管理 */
+.user-manager-actions {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #f0f0f0;
+  text-align: right;
 }
 </style>
\ No newline at end of file