From 4beed5048afe0bfc3e20ddf6ed1c429417c391d7 Mon Sep 17 00:00:00 2001
From: MoeSnowyFox <SnowyFox_@outlook.com>
Date: Wed, 1 Oct 2025 17:13:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(websocket):=20=E5=AE=9E=E7=8E=B0WebSocket?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E7=9B=91=E5=90=AC=E5=92=8C=E8=B0=83=E8=AF=95?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加WebSocketMessageListener组件用于全局消息监听- 新增WebSocketDebugPanel调试面板(仅开发环境显示)
- 在多个组件中实现基于subscriptionId的WebSocket连接管理
-为MAA和通用配置添加更可靠的连接生命周期控制
- 引入消息测试页面用于调试WebSocket消息处理- 更新调度器逻辑以支持新的WebSocket订阅机制
- 优化WebSocket连接的创建、维护和断开流程
- 添加开发环境下的调度中心调试工具导入- 重构WebSocket相关组件的导入和注册方式
- 移除冗余的电源倒计时相关状态和方法
---
 frontend/electron/preload.ts                  |   4 +-
 frontend/src/App.vue                          |   8 +
 frontend/src/components/ScriptTable.vue       |   6 +-
 .../src/components/WebSocketDebugPanel.vue    | 275 ++++++
 .../components/WebSocketMessageListener.vue   | 359 ++++++++
 .../components/devtools/BackendLaunchPage.vue |   1 +
 .../components/devtools/MessageTestPage.vue   | 654 +++++++++++++
 frontend/src/components/devtools/index.vue    |   2 +
 frontend/src/composables/useWebSocket.ts      | 863 ++++++++----------
 frontend/src/main.ts                          |  23 +-
 frontend/src/utils/scheduler-debug.ts         |  77 ++
 frontend/src/views/GeneralUserEdit.vue        |  39 +-
 frontend/src/views/MAAUserEdit.vue            |  38 +-
 frontend/src/views/Scripts.vue                |  34 +-
 .../views/scheduler/SchedulerTaskControl.vue  |   7 +-
 frontend/src/views/scheduler/index.vue        |  11 +-
 .../src/views/scheduler/schedulerConstants.ts |   1 +
 .../src/views/scheduler/useSchedulerLogic.ts  |  24 +-
 18 files changed, 1860 insertions(+), 566 deletions(-)
 create mode 100644 frontend/src/components/WebSocketDebugPanel.vue
 create mode 100644 frontend/src/components/WebSocketMessageListener.vue
 create mode 100644 frontend/src/components/devtools/BackendLaunchPage.vue
 create mode 100644 frontend/src/components/devtools/MessageTestPage.vue
 create mode 100644 frontend/src/utils/scheduler-debug.ts

diff --git a/frontend/electron/preload.ts b/frontend/electron/preload.ts
index 1497313..1f927bd 100644
--- a/frontend/electron/preload.ts
+++ b/frontend/electron/preload.ts
@@ -44,7 +44,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   saveConfig: (config: any) => ipcRenderer.invoke('save-config', config),
   loadConfig: () => ipcRenderer.invoke('load-config'),
   resetConfig: () => ipcRenderer.invoke('reset-config'),
-  
+
   // 托盘设置实时更新
   updateTraySettings: (uiSettings: any) => ipcRenderer.invoke('update-tray-settings', uiSettings),
 
@@ -54,7 +54,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   getLogs: (lines?: number, fileName?: string) => ipcRenderer.invoke('get-logs', lines, fileName),
   clearLogs: (fileName?: string) => ipcRenderer.invoke('clear-logs', fileName),
   cleanOldLogs: (daysToKeep?: number) => ipcRenderer.invoke('clean-old-logs', daysToKeep),
-  
+
   // 保留原有方法以兼容现有代码
   saveLogsToFile: (logs: string) => ipcRenderer.invoke('save-logs-to-file', logs),
   loadLogsFromFile: () => ipcRenderer.invoke('load-logs-from-file'),
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 9d6bc4e..ff32bee 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,6 +9,8 @@ import TitleBar from './components/TitleBar.vue'
 import UpdateModal from './components/UpdateModal.vue'
 import DevDebugPanel from './components/DevDebugPanel.vue'
 import GlobalPowerCountdown from './components/GlobalPowerCountdown.vue'
+import WebSocketMessageListener from './components/WebSocketMessageListener.vue'
+import WebSocketDebugPanel from './components/WebSocketDebugPanel.vue'
 import zhCN from 'ant-design-vue/es/locale/zh_CN'
 import { logger } from '@/utils/logger'
 
@@ -53,6 +55,12 @@ onMounted(() => {
 
     <!-- 全局电源倒计时弹窗 -->
     <GlobalPowerCountdown />
+
+    <!-- WebSocket 消息监听组件 -->
+    <WebSocketMessageListener />
+
+    <!-- WebSocket 调试面板 (仅开发环境) -->
+    <WebSocketDebugPanel v-if="$route.query.debug === 'true'" />
   </ConfigProvider>
 </template>
 
diff --git a/frontend/src/components/ScriptTable.vue b/frontend/src/components/ScriptTable.vue
index 4121090..6a830cf 100644
--- a/frontend/src/components/ScriptTable.vue
+++ b/frontend/src/components/ScriptTable.vue
@@ -102,7 +102,7 @@
                 ghost-class="user-ghost"
                 chosen-class="user-chosen"
                 drag-class="user-drag"
-                @end="evt => onUserDragEnd(evt, script)"
+                @end="(evt: any) => onUserDragEnd(evt, script)"
                 class="users-list"
               >
                 <template #item="{ element: user }">
@@ -326,7 +326,7 @@ import { message } from 'ant-design-vue'
 
 interface Props {
   scripts: Script[]
-  activeConnections: Map<string, string>
+  activeConnections: Map<string, { subscriptionId: string; websocketId: string }>
 }
 
 interface Emits {
@@ -464,7 +464,7 @@ const onScriptDragEnd = async () => {
 }
 
 // 处理用户拖拽结束
-const onUserDragEnd = async (evt: any, script: Script) => {
+const onUserDragEnd = async (_evt: any, script: Script) => {
   try {
     const userIds = script.users?.map(user => user.id) || []
     await Service.reorderUserApiScriptsUserOrderPost({
diff --git a/frontend/src/components/WebSocketDebugPanel.vue b/frontend/src/components/WebSocketDebugPanel.vue
new file mode 100644
index 0000000..b168e26
--- /dev/null
+++ b/frontend/src/components/WebSocketDebugPanel.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="websocket-debug">
+    <h3>WebSocket 调试面板</h3>
+    
+    <div class="debug-section">
+      <h4>连接状态</h4>
+      <p>状态: {{ wsStatus }}</p>
+      <p>订阅数量: {{ subscriberCount }}</p>
+    </div>
+
+    <div class="debug-section">
+      <h4>测试消息</h4>
+      <button @click="testQuestionMessage" class="test-btn">测试 Question 消息</button>
+      <button @click="testNormalMessage" class="test-btn">测试普通消息</button>
+      <button @click="testMalformedMessage" class="test-btn">测试格式错误消息</button>
+    </div>
+
+    <div class="debug-section">
+      <h4>最近接收的消息</h4>
+      <div class="message-log">
+        <div v-for="(msg, index) in recentMessages" :key="index" class="message-item">
+          <div class="message-timestamp">{{ msg.timestamp }}</div>
+          <div class="message-content">{{ JSON.stringify(msg.data, null, 2) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useWebSocket, type WebSocketBaseMessage } from '@/composables/useWebSocket'
+import { logger } from '@/utils/logger'
+
+const { subscribe, unsubscribe, sendRaw, getConnectionInfo } = useWebSocket()
+
+// 状态
+const wsStatus = ref('')
+const subscriberCount = ref(0)
+const recentMessages = ref<Array<{timestamp: string, data: any}>>([])
+
+// 订阅ID
+let debugSubscriptionId: string
+
+// 更新状态
+const updateStatus = () => {
+  const connInfo = getConnectionInfo()
+  wsStatus.value = connInfo.status
+  subscriberCount.value = connInfo.subscriberCount
+}
+
+// 处理接收到的消息
+const handleDebugMessage = (message: WebSocketBaseMessage) => {
+  logger.info('[WebSocket调试] 收到消息:', message)
+  
+  // 添加到最近消息列表
+  recentMessages.value.unshift({
+    timestamp: new Date().toLocaleTimeString(),
+    data: message
+  })
+  
+  // 保持最近10条消息
+  if (recentMessages.value.length > 10) {
+    recentMessages.value = recentMessages.value.slice(0, 10)
+  }
+  
+  updateStatus()
+}
+
+// 测试发送Question消息
+const testQuestionMessage = () => {
+  const message = {
+    id: "debug_test_" + Date.now(),
+    type: "message",
+    data: {
+      type: "Question",
+      message_id: "q_" + Date.now(),
+      title: "调试测试问题",
+      message: "这是一个来自调试面板的测试问题，请选择是否继续？"
+    }
+  }
+  
+  logger.info('[WebSocket调试] 发送Question消息:', message)
+  sendRaw('message', message.data)
+}
+
+// 测试发送普通消息
+const testNormalMessage = () => {
+  const message = {
+    id: "debug_normal_" + Date.now(),
+    type: "message",
+    data: {
+      action: "test_action",
+      status: "running",
+      content: "这是一个来自调试面板的普通消息"
+    }
+  }
+  
+  logger.info('[WebSocket调试] 发送普通消息:', message)
+  sendRaw('message', message.data)
+}
+
+// 测试发送格式错误的消息
+const testMalformedMessage = () => {
+  const message = {
+    id: "debug_malformed_" + Date.now(),
+    type: "message",
+    data: {
+      type: "Question",
+      // 故意缺少 message_id
+      title: "格式错误的问题",
+      message: "这个消息缺少message_id字段，测试容错处理"
+    }
+  }
+  
+  logger.info('[WebSocket调试] 发送格式错误消息:', message)
+  sendRaw('message', message.data)
+}
+
+// 组件挂载
+onMounted(() => {
+  logger.info('[WebSocket调试] 调试面板挂载')
+  
+  // 订阅所有类型的消息进行调试
+  debugSubscriptionId = subscribe({}, handleDebugMessage)
+  
+  updateStatus()
+  
+  // 定期更新状态
+  const statusTimer = setInterval(updateStatus, 2000)
+  
+  // 组件卸载时清理定时器
+  onUnmounted(() => {
+    clearInterval(statusTimer)
+  })
+})
+
+// 组件卸载
+onUnmounted(() => {
+  logger.info('[WebSocket调试] 调试面板卸载')
+  if (debugSubscriptionId) {
+    unsubscribe(debugSubscriptionId)
+  }
+})
+</script>
+
+<style scoped>
+.websocket-debug {
+  position: fixed;
+  top: 80px;
+  right: 20px;
+  width: 350px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  z-index: 1000;
+  font-size: 12px;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.debug-section {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.debug-section:last-child {
+  border-bottom: none;
+}
+
+h3 {
+  margin: 0 0 15px 0;
+  font-size: 14px;
+  color: #333;
+}
+
+h4 {
+  margin: 0 0 8px 0;
+  font-size: 12px;
+  color: #666;
+  font-weight: 600;
+}
+
+p {
+  margin: 4px 0;
+  color: #555;
+}
+
+.test-btn {
+  background: #007bff;
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 11px;
+  margin: 2px;
+}
+
+.test-btn:hover {
+  background: #0056b3;
+}
+
+.message-log {
+  max-height: 200px;
+  overflow-y: auto;
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.message-item {
+  margin-bottom: 8px;
+  padding: 6px;
+  background: white;
+  border-radius: 3px;
+  border-left: 3px solid #007bff;
+}
+
+.message-item:last-child {
+  margin-bottom: 0;
+}
+
+.message-timestamp {
+  font-size: 10px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.message-content {
+  font-family: monospace;
+  font-size: 10px;
+  color: #333;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* 暗色主题适配 */
+@media (prefers-color-scheme: dark) {
+  .websocket-debug {
+    background: #2a2a2a;
+    border-color: #444;
+    color: white;
+  }
+  
+  .debug-section {
+    border-bottom-color: #444;
+  }
+  
+  h3, h4 {
+    color: #e8e8e8;
+  }
+  
+  p {
+    color: #ccc;
+  }
+  
+  .message-log {
+    background: #333;
+    border-color: #555;
+  }
+  
+  .message-item {
+    background: #444;
+  }
+  
+  .message-content {
+    color: #e8e8e8;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/WebSocketMessageListener.vue b/frontend/src/components/WebSocketMessageListener.vue
new file mode 100644
index 0000000..dfaafa8
--- /dev/null
+++ b/frontend/src/components/WebSocketMessageListener.vue
@@ -0,0 +1,359 @@
+<template>
+  <div style="display: none">
+    <!-- 这是一个隐藏的监听组件，不需要UI -->
+  </div>
+
+  <!-- 简单的自定义对话框 -->
+  <div v-if="showDialog" class="dialog-overlay" @click.self="showDialog = false">
+    <div class="dialog-container">
+      <div class="dialog-header">
+        <h3>{{ dialogData.title }}</h3>
+      </div>
+      <div class="dialog-content">
+        <p>{{ dialogData.message }}</p>
+      </div>
+      <div class="dialog-actions">
+        <button 
+          v-for="(option, index) in dialogData.options" 
+          :key="index"
+          class="dialog-button"
+          @click="handleChoice(index)"
+        >
+          {{ option }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, nextTick } from 'vue'
+import { useWebSocket, type WebSocketBaseMessage } from '@/composables/useWebSocket'
+import { logger } from '@/utils/logger'
+
+// WebSocket hook
+const { subscribe, unsubscribe, sendRaw } = useWebSocket()
+
+// 对话框状态
+const showDialog = ref(false)
+const dialogData = ref({
+  title: '',
+  message: '',
+  options: ['确定', '取消'],
+  messageId: ''
+})
+
+// 存储订阅ID用于取消订阅
+let subscriptionId: string
+
+// 发送用户选择结果到后端
+const sendResponse = (messageId: string, choice: boolean) => {
+  const response = {
+    message_id: messageId,
+    choice: choice,
+  }
+
+  logger.info('[WebSocket消息监听器] 发送用户选择结果:', response)
+
+  // 发送响应消息到后端
+  sendRaw('Response', response)
+}
+
+// 处理用户选择
+const handleChoice = (choiceIndex: number) => {
+  const choice = choiceIndex === 0 // 第一个选项为true，其他为false
+  sendResponse(dialogData.value.messageId, choice)
+  showDialog.value = false
+}
+
+// 显示问题对话框
+const showQuestion = (questionData: any) => {
+  const title = questionData.title || '操作提示'
+  const message = questionData.message || ''
+  const options = questionData.options || ['确定', '取消']
+  const messageId = questionData.message_id || 'fallback_' + Date.now()
+  
+  logger.info('[WebSocket消息监听器] 显示自定义对话框:', questionData)
+  
+  // 设置对话框数据
+  dialogData.value = {
+    title,
+    message,
+    options,
+    messageId
+  }
+  
+  showDialog.value = true
+  
+  // 在下一个tick自动聚焦第一个按钮
+  nextTick(() => {
+    const firstButton = document.querySelector('.dialog-button:first-child') as HTMLButtonElement
+    if (firstButton) {
+      firstButton.focus()
+    }
+  })
+}
+
+// 消息处理函数
+const handleMessage = (message: WebSocketBaseMessage) => {
+  try {
+    logger.info('[WebSocket消息监听器] 收到Message类型消息:', message)
+    logger.info('[WebSocket消息监听器] 消息详情 - type:', message.type, 'id:', message.id, 'data:', message.data)
+
+    // 解析消息数据
+    if (message.data) {
+      console.log('[WebSocket消息监听器] 消息数据:', message.data)
+
+      // 根据具体的消息内容进行处理
+      if (typeof message.data === 'object') {
+        // 处理对象类型的数据
+        handleObjectMessage(message.data)
+      } else if (typeof message.data === 'string') {
+        // 处理字符串类型的数据
+        handleStringMessage(message.data)
+      } else {
+        // 处理其他类型的数据
+        handleOtherMessage(message.data)
+      }
+    } else {
+      logger.warn('[WebSocket消息监听器] 收到空数据的消息')
+    }
+
+    // 这里可以添加具体的业务逻辑
+    // 例如：更新状态、触发事件、显示通知等
+  } catch (error) {
+    logger.error('[WebSocket消息监听器] 处理消息时发生错误:', error)
+  }
+}
+
+// 处理对象类型的消息
+const handleObjectMessage = (data: any) => {
+  logger.info('[WebSocket消息监听器] 处理对象消息:', data)
+
+  // 检查是否为Question类型的消息
+  logger.info('[WebSocket消息监听器] 检查消息类型 - data.type:', data.type, 'data.message_id:', data.message_id)
+  
+  if (data.type === 'Question') {
+    logger.info('[WebSocket消息监听器] 发现Question类型消息')
+    
+    if (data.message_id) {
+      logger.info('[WebSocket消息监听器] message_id存在，显示选择弹窗')
+      showQuestion(data)
+      return
+    } else {
+      logger.warn('[WebSocket消息监听器] Question消息缺少message_id字段:', data)
+      // 即使缺少message_id，也尝试显示弹窗，使用当前时间戳作为ID
+      const fallbackId = 'fallback_' + Date.now()
+      logger.info('[WebSocket消息监听器] 使用备用ID显示弹窗:', fallbackId)
+      showQuestion({
+        ...data,
+        message_id: fallbackId
+      })
+      return
+    }
+  }
+
+  // 根据对象的属性进行不同处理
+  if (data.action) {
+    logger.info('[WebSocket消息监听器] 消息动作:', data.action)
+  }
+
+  if (data.status) {
+    logger.info('[WebSocket消息监听器] 消息状态:', data.status)
+  }
+
+  if (data.content) {
+    logger.info('[WebSocket消息监听器] 消息内容:', data.content)
+  }
+
+  // 可以根据具体需求添加更多处理逻辑
+}
+
+// 处理字符串类型的消息
+const handleStringMessage = (data: string) => {
+  logger.info('[WebSocket消息监听器] 处理字符串消息:', data)
+
+  try {
+    // 尝试解析JSON字符串
+    const parsed = JSON.parse(data)
+    logger.info('[WebSocket消息监听器] 解析后的JSON:', parsed)
+    handleObjectMessage(parsed)
+  } catch (error) {
+    // 不是JSON格式，作为普通字符串处理
+    logger.info('[WebSocket消息监听器] 普通字符串消息:', data)
+  }
+}
+
+// 处理其他类型的消息
+const handleOtherMessage = (data: any) => {
+  logger.info('[WebSocket消息监听器] 处理其他类型消息:', typeof data, data)
+}
+
+// 组件挂载时订阅消息
+onMounted(() => {
+  logger.info('[WebSocket消息监听器~~] 组件挂载，开始监听Message类型的消息')
+
+  // 使用新的 subscribe API，订阅 Message 类型的消息（注意大写M）
+  subscriptionId = subscribe({ type: 'Message' }, handleMessage)
+  
+  logger.info('[WebSocket消息监听器~~] 订阅ID:', subscriptionId)
+  logger.info('[WebSocket消息监听器~~] 订阅过滤器:', { type: 'Message' })
+})
+
+// 组件卸载时取消订阅
+onUnmounted(() => {
+  logger.info('[WebSocket消息监听器~~] 组件卸载，停止监听Message类型的消息')
+  // 使用新的 unsubscribe API
+  if (subscriptionId) {
+    unsubscribe(subscriptionId)
+  }
+})
+</script>
+
+<style scoped>
+/* 对话框遮罩层 */
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+/* 对话框容器 */
+.dialog-container {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  min-width: 300px;
+  max-width: 500px;
+  width: 90%;
+  animation: dialogAppear 0.2s ease-out;
+}
+
+/* 对话框头部 */
+.dialog-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.dialog-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+/* 对话框内容 */
+.dialog-content {
+  padding: 20px;
+}
+
+.dialog-content p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #666;
+  word-break: break-word;
+}
+
+/* 按钮区域 */
+.dialog-actions {
+  padding: 12px 20px 20px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* 按钮样式 */
+.dialog-button {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  color: #333;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  min-width: 60px;
+}
+
+.dialog-button:hover {
+  background: #f5f5f5;
+  border-color: #999;
+}
+
+.dialog-button:focus {
+  outline: 2px solid #007bff;
+  outline-offset: 2px;
+}
+
+.dialog-button:first-child {
+  background: #007bff;
+  color: white;
+  border-color: #007bff;
+}
+
+.dialog-button:first-child:hover {
+  background: #0056b3;
+  border-color: #0056b3;
+}
+
+/* 出现动画 */
+@keyframes dialogAppear {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 暗色主题适配 */
+@media (prefers-color-scheme: dark) {
+  .dialog-container {
+    background: #2d2d2d;
+    color: #fff;
+  }
+
+  .dialog-header {
+    border-bottom-color: #444;
+  }
+
+  .dialog-header h3 {
+    color: #fff;
+  }
+
+  .dialog-content p {
+    color: #ccc;
+  }
+
+  .dialog-button {
+    background: #444;
+    color: #fff;
+    border-color: #555;
+  }
+
+  .dialog-button:hover {
+    background: #555;
+    border-color: #666;
+  }
+
+  .dialog-button:first-child {
+    background: #0d6efd;
+    border-color: #0d6efd;
+  }
+
+  .dialog-button:first-child:hover {
+    background: #0b5ed7;
+    border-color: #0b5ed7;
+  }
+}
+</style>
diff --git a/frontend/src/components/devtools/BackendLaunchPage.vue b/frontend/src/components/devtools/BackendLaunchPage.vue
new file mode 100644
index 0000000..7bebd63
--- /dev/null
+++ b/frontend/src/components/devtools/BackendLaunchPage.vue
@@ -0,0 +1 @@
+.log-entry.error .log-message {
diff --git a/frontend/src/components/devtools/MessageTestPage.vue b/frontend/src/components/devtools/MessageTestPage.vue
new file mode 100644
index 0000000..bdfe8f8
--- /dev/null
+++ b/frontend/src/components/devtools/MessageTestPage.vue
@@ -0,0 +1,654 @@
+<template>
+  <div class="test-page">
+    <h3 class="page-title">🔧 消息弹窗测试</h3>
+
+    <div class="test-section">
+      <h4>测试消息弹窗</h4>
+      <div class="test-controls">
+        <button class="test-btn primary" @click="triggerQuestionModal" :disabled="isTesting">
+          {{ isTesting ? '测试中...' : '触发Question弹窗' }}
+        </button>
+
+        <button class="test-btn secondary" @click="triggerCustomModal" :disabled="isTesting">
+          自定义消息测试
+        </button>
+
+        <button class="test-btn warning" @click="directTriggerModal" :disabled="isTesting">
+          直接触发测试
+        </button>
+      </div>
+
+      <div class="test-info">
+        <p>点击按钮测试全屏消息选择弹窗功能</p>
+        <p>最后响应: {{ lastResponse || '暂无' }}</p>
+        <p>连接状态: <span :class="connectionStatusClass">{{ connectionStatus }}</span></p>
+      </div>
+    </div>
+
+    <div class="test-section">
+      <h4>自定义测试消息</h4>
+      <div class="custom-form">
+        <div class="form-group">
+          <label>标题:</label>
+          <input
+            v-model="customMessage.title"
+            type="text"
+            placeholder="请输入弹窗标题"
+            class="form-input"
+          />
+        </div>
+        <div class="form-group">
+          <label>消息内容:</label>
+          <textarea
+            v-model="customMessage.message"
+            placeholder="请输入消息内容"
+            class="form-textarea"
+            rows="3"
+          ></textarea>
+        </div>
+        <button
+          class="test-btn primary"
+          @click="sendCustomMessage"
+          :disabled="!customMessage.title || !customMessage.message"
+        >
+          发送自定义消息
+        </button>
+      </div>
+    </div>
+
+    <div class="test-section">
+      <h4>测试历史</h4>
+      <div class="test-history">
+        <div v-for="(test, index) in testHistory" :key="index" class="history-item">
+          <div class="history-time">{{ test.time }}</div>
+          <div class="history-content">{{ test.title }} - {{ test.result }}</div>
+        </div>
+        <div v-if="testHistory.length === 0" class="no-history">暂无测试历史</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useWebSocket } from '@/composables/useWebSocket'
+import { logger } from '@/utils/logger'
+
+const { subscribe, unsubscribe, sendRaw, getConnectionInfo } = useWebSocket()
+
+// 测试状态
+const isTesting = ref(false)
+const lastResponse = ref('')
+const testHistory = ref<Array<{ time: string; title: string; result: string }>>([])
+const connectionStatus = ref('检查中...')
+const connectionStatusClass = ref('status-checking')
+
+// 自定义消息
+const customMessage = ref({
+  title: '操作确认',
+  message: '请确认是否继续执行此操作？',
+})
+
+// 更新连接状态
+const updateConnectionStatus = () => {
+  try {
+    const connInfo = getConnectionInfo()
+    connectionStatus.value = connInfo.status
+    
+    switch (connInfo.status) {
+      case '已连接':
+        connectionStatusClass.value = 'status-connected'
+        break
+      case '连接中':
+        connectionStatusClass.value = 'status-connecting'
+        break
+      case '已断开':
+        connectionStatusClass.value = 'status-disconnected'
+        break
+      case '连接错误':
+        connectionStatusClass.value = 'status-error'
+        break
+      default:
+        connectionStatusClass.value = 'status-unknown'
+    }
+  } catch (error) {
+    connectionStatus.value = '获取失败'
+    connectionStatusClass.value = 'status-error'
+  }
+}
+
+// 存储订阅ID用于监听响应
+let responseSubscriptionId: string
+
+// 生成唯一ID
+const generateId = () => {
+  return 'test-' + Math.random().toString(36).substr(2, 9)
+}
+
+// 格式化时间
+const formatTime = () => {
+  return new Date().toLocaleTimeString()
+}
+
+// 添加测试历史
+const addTestHistory = (title: string, result: string) => {
+  testHistory.value.unshift({
+    time: formatTime(),
+    title,
+    result,
+  })
+  // 保持最多10条历史记录
+  if (testHistory.value.length > 10) {
+    testHistory.value = testHistory.value.slice(0, 10)
+  }
+}
+
+// 直接触发弹窗（备用方法）
+const directTriggerModal = () => {
+  isTesting.value = true
+
+  try {
+    // 直接触发浏览器的confirm对话框作为备用测试
+    const result = confirm('这是直接触发的测试弹窗。\n\n如果WebSocket消息弹窗无法正常工作，这个方法可以用来验证基本功能。\n\n点击"确定"继续，点击"取消"退出。')
+    
+    lastResponse.value = result ? '用户选择: 确认 (直接触发)' : '用户选择: 取消 (直接触发)'
+    addTestHistory('直接触发测试', result ? '确认' : '取消')
+    
+    logger.info('[调试工具] 直接触发测试完成，结果:', result)
+  } catch (error: any) {
+    logger.error('[调试工具] 直接触发测试失败:', error)
+    lastResponse.value = '直接触发失败: ' + (error?.message || '未知错误')
+  }
+
+  setTimeout(() => {
+    isTesting.value = false
+  }, 1000)
+}
+
+// 发送WebSocket消息来模拟接收消息
+const simulateMessage = (messageData: any) => {
+  logger.info('[调试工具] 发送模拟消息:', messageData)
+  
+  // 检查连接状态
+  const connInfo = getConnectionInfo()
+  if (connInfo.status !== '已连接') {
+    logger.warn('[调试工具] WebSocket未连接，无法发送消息')
+    lastResponse.value = '发送失败: WebSocket未连接'
+    return
+  }
+  
+  try {
+    // 使用sendRaw直接发送Message类型的消息
+    sendRaw('Message', messageData)
+    
+    logger.info('[调试工具] 消息已发送到WebSocket')
+    lastResponse.value = '消息已发送，等待弹窗显示...'
+  } catch (error: any) {
+    logger.error('[调试工具] 发送消息失败:', error)
+    lastResponse.value = '发送失败: ' + (error?.message || '未知错误')
+  }
+}
+
+// 触发标准Question弹窗
+const triggerQuestionModal = () => {
+  isTesting.value = true
+
+  const testMessageData = {
+    message_id: generateId(),
+    type: 'Question',
+    title: '测试提示',
+    message: '这是一个测试消息，请选择您的操作。',
+  }
+
+  logger.info('[调试工具] 发送测试Question消息:', testMessageData)
+
+  // 直接模拟接收消息
+  simulateMessage(testMessageData)
+
+  lastResponse.value = '已发送测试Question消息'
+  addTestHistory('标准Question测试', '已发送')
+
+  setTimeout(() => {
+    isTesting.value = false
+  }, 1000)
+}
+
+// 触发自定义弹窗
+const triggerCustomModal = () => {
+  isTesting.value = true
+
+  const testMessageData = {
+    message_id: generateId(),
+    type: 'Question',
+    title: '自定义测试',
+    message:
+      '这是一个自定义的测试消息，用于验证弹窗的不同内容显示。您可以测试长文本、特殊字符等情况。',
+  }
+
+  logger.info('[调试工具] 发送自定义测试消息:', testMessageData)
+
+  simulateMessage(testMessageData)
+
+  lastResponse.value = '已发送自定义测试消息'
+  addTestHistory('自定义内容测试', '已发送')
+
+  setTimeout(() => {
+    isTesting.value = false
+  }, 1000)
+}
+
+// 发送完全自定义的消息
+const sendCustomMessage = () => {
+  if (!customMessage.value.title || !customMessage.value.message) {
+    return
+  }
+
+  isTesting.value = true
+
+  const testMessageData = {
+    message_id: generateId(),
+    type: 'Question',
+    title: customMessage.value.title,
+    message: customMessage.value.message,
+  }
+
+  logger.info('[调试工具] 发送用户自定义消息:', testMessageData)
+
+  simulateMessage(testMessageData)
+
+  lastResponse.value = `已发送自定义消息: ${customMessage.value.title}`
+  addTestHistory(`自定义: ${customMessage.value.title}`, '已发送')
+
+  setTimeout(() => {
+    isTesting.value = false
+  }, 1000)
+}
+
+// 监听响应消息
+const handleResponseMessage = (message: any) => {
+  logger.info('[调试工具] 收到响应消息:', message)
+  
+  if (message.data && message.data.choice !== undefined) {
+    const choice = message.data.choice ? '确认' : '取消'
+    lastResponse.value = `用户选择: ${choice}`
+    addTestHistory('用户响应', choice)
+  }
+}
+
+// 组件挂载时订阅响应消息
+onMounted(() => {
+  logger.info('[调试工具] 初始化消息测试页面')
+  
+  // 订阅Response类型的消息来监听用户的选择结果
+  responseSubscriptionId = subscribe({ type: 'Response' }, handleResponseMessage)
+  
+  // 初始化连接状态
+  updateConnectionStatus()
+  
+  // 定期更新连接状态
+  const statusTimer = setInterval(updateConnectionStatus, 2000)
+  
+  logger.info('[调试工具] 已订阅Response消息，订阅ID:', responseSubscriptionId)
+  
+  // 清理定时器
+  onUnmounted(() => {
+    clearInterval(statusTimer)
+  })
+})
+
+// 组件卸载时清理订阅
+onUnmounted(() => {
+  if (responseSubscriptionId) {
+    unsubscribe(responseSubscriptionId)
+    logger.info('[调试工具] 已取消Response消息订阅')
+  }
+})
+</script>
+
+<style scoped>
+.test-page {
+  color: #fff;
+}
+
+.page-title {
+  margin: 0 0 16px 0;
+  font-size: 14px;
+  color: #4caf50;
+}
+
+.test-section {
+  margin-bottom: 20px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.test-section h4 {
+  margin: 0 0 12px 0;
+  font-size: 12px;
+  color: #e0e0e0;
+}
+
+.test-controls {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.test-btn {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 80px;
+}
+
+.test-btn.primary {
+  background: #4caf50;
+  color: white;
+}
+
+.test-btn.primary:hover:not(:disabled) {
+  background: #45a049;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
+}
+
+.test-btn.secondary {
+  background: #2196f3;
+  color: white;
+}
+
+.test-btn.secondary:hover:not(:disabled) {
+  background: #1976d2;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
+}
+
+.test-btn.warning {
+  background: #ff9800;
+  color: white;
+}
+
+.test-btn.warning:hover:not(:disabled) {
+  background: #f57c00;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
+}
+
+.test-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.test-btn:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+.test-info {
+  font-size: 10px;
+  color: #bbb;
+}
+
+.test-info p {
+  margin: 4px 0;
+}
+
+/* 连接状态样式 */
+.status-connected {
+  color: #4caf50;
+  font-weight: 600;
+}
+
+.status-connecting {
+  color: #ff9800;
+  font-weight: 600;
+}
+
+.status-disconnected {
+  color: #f44336;
+  font-weight: 600;
+}
+
+.status-error {
+  color: #e91e63;
+  font-weight: 600;
+}
+
+.status-checking,
+.status-unknown {
+  color: #9e9e9e;
+  font-weight: 600;
+}
+
+.custom-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 10px;
+  color: #ccc;
+  font-weight: 500;
+}
+
+.form-input,
+.form-textarea {
+  padding: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  font-size: 11px;
+  transition: all 0.2s ease;
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  outline: none;
+  border-color: #4caf50;
+  background: rgba(255, 255, 255, 0.12);
+  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 60px;
+  font-family: inherit;
+}
+
+.test-history {
+  max-height: 120px;
+  overflow-y: auto;
+  border-radius: 4px;
+}
+
+.test-history::-webkit-scrollbar {
+  width: 4px;
+}
+
+.test-history::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+}
+
+.test-history::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+}
+
+.test-history::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.history-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  font-size: 10px;
+  transition: background-color 0.2s ease;
+  border-radius: 3px;
+  margin-bottom: 2px;
+}
+
+.history-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.history-item:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.history-time {
+  color: #888;
+  min-width: 60px;
+  font-weight: 500;
+}
+
+.history-content {
+  color: #ccc;
+  flex: 1;
+  margin-left: 8px;
+}
+
+.no-history {
+  text-align: center;
+  color: #666;
+  font-size: 10px;
+  padding: 16px 0;
+  font-style: italic;
+}
+
+/* 暗色主题专用样式增强 */
+@media (prefers-color-scheme: dark) {
+  .test-page {
+    color: #e8e8e8;
+  }
+
+  .page-title {
+    color: #66bb6a;
+    text-shadow: 0 0 8px rgba(102, 187, 106, 0.3);
+  }
+
+  .test-section {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(8px);
+  }
+
+  .test-section h4 {
+    color: #f0f0f0;
+  }
+
+  .test-btn.primary {
+    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
+    border: 1px solid rgba(76, 175, 80, 0.3);
+  }
+
+  .test-btn.primary:hover:not(:disabled) {
+    background: linear-gradient(135deg, #45a049 0%, #5cb85c 100%);
+    border-color: rgba(76, 175, 80, 0.5);
+  }
+
+  .test-btn.secondary {
+    background: linear-gradient(135deg, #2196f3 0%, #42a5f5 100%);
+    border: 1px solid rgba(33, 150, 243, 0.3);
+  }
+
+  .test-btn.secondary:hover:not(:disabled) {
+    background: linear-gradient(135deg, #1976d2 0%, #1e88e5 100%);
+    border-color: rgba(33, 150, 243, 0.5);
+  }
+
+  .form-input,
+  .form-textarea {
+    background: rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .form-input:focus,
+  .form-textarea:focus {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: #66bb6a;
+    box-shadow: 0 0 0 2px rgba(102, 187, 106, 0.2);
+  }
+
+  .history-item {
+    background: rgba(255, 255, 255, 0.02);
+    border-bottom-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .history-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .history-time {
+    color: #aaa;
+  }
+
+  .history-content {
+    color: #ddd;
+  }
+}
+
+/* 高对比度模式适配 */
+@media (prefers-contrast: high) {
+  .test-section {
+    border-width: 2px;
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+
+  .test-btn {
+    border: 2px solid currentColor;
+    font-weight: 600;
+  }
+
+  .form-input,
+  .form-textarea {
+    border-width: 2px;
+  }
+
+  .form-input:focus,
+  .form-textarea:focus {
+    border-width: 2px;
+    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
+  }
+}
+
+/* 减少动画模式适配 */
+@media (prefers-reduced-motion: reduce) {
+  .test-btn,
+  .form-input,
+  .form-textarea,
+  .history-item {
+    transition: none;
+  }
+
+  .test-btn:hover:not(:disabled) {
+    transform: none;
+  }
+
+  .page-title {
+    text-shadow: none;
+  }
+}
+</style>
diff --git a/frontend/src/components/devtools/index.vue b/frontend/src/components/devtools/index.vue
index cf2417d..0205f68 100644
--- a/frontend/src/components/devtools/index.vue
+++ b/frontend/src/components/devtools/index.vue
@@ -43,12 +43,14 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import RouteInfoPage from './RouteInfoPage.vue'
 import EnvironmentPage from './EnvironmentPage.vue'
 import QuickNavPage from './QuickNavPage.vue'
+import MessageTestPage from './MessageTestPage.vue'
 
 // 调试页面配置
 const tabs = [
   { key: 'route', title: '路由', icon: '🛣️', component: RouteInfoPage },
   { key: 'env', title: '环境', icon: '⚙️', component: EnvironmentPage },
   { key: 'nav', title: '导航', icon: '🚀', component: QuickNavPage },
+  { key: 'message', title: '消息', icon: '💬', component: MessageTestPage },
 ]
 
 // 开发环境检测
diff --git a/frontend/src/composables/useWebSocket.ts b/frontend/src/composables/useWebSocket.ts
index 1adeca6..1483ad9 100644
--- a/frontend/src/composables/useWebSocket.ts
+++ b/frontend/src/composables/useWebSocket.ts
@@ -1,22 +1,31 @@
+// websocket.ts
 import { ref, type Ref } from 'vue'
-// 为了在调度中心 UI 未加载时仍能使用具体逻辑，直接同步导入 schedulerHandlers 的默认实现
-// schedulerHandlers 不再依赖 useWebSocket，因此同步导入不会产生致命循环依赖
 import schedulerHandlers from '@/views/scheduler/schedulerHandlers'
-let _defaultHandlersLoaded = true
-let _defaultTaskManagerHandler: (m: any) => void = schedulerHandlers.handleTaskManagerMessage
-let _defaultMainHandler: (m: any) => void = schedulerHandlers.handleMainMessage
 import { Modal } from 'ant-design-vue'
 
-// 基础配置
+// ====== 配置项 ======
 const BASE_WS_URL = 'ws://localhost:36163/api/core/ws'
 const HEARTBEAT_INTERVAL = 15000
 const HEARTBEAT_TIMEOUT = 5000
-const BACKEND_CHECK_INTERVAL = 3000 // 后端检查间隔
-const MAX_RESTART_ATTEMPTS = 3 // 最大重启尝试次数
-const RESTART_DELAY = 2000 // 重启延迟
+const BACKEND_CHECK_INTERVAL = 3000
+const MAX_RESTART_ATTEMPTS = 3
+const RESTART_DELAY = 2000
+const MAX_QUEUE_SIZE = 50 // 每个 ID 或全局 type 队列最大条数
+const MESSAGE_TTL = 60000 // 60 秒过期
 
-// 类型定义
+// ====== DEBUG 控制 ======
+const DEBUG = process.env.NODE_ENV === 'development'
+
+const log = (...args: any[]) => {
+  if (DEBUG) console.log('[WebSocket]', ...args)
+}
+const warn = (...args: any[]) => {
+  if (DEBUG) console.warn('[WebSocket]', ...args)
+}
+
+// ====== 类型定义 ======
 export type WebSocketStatus = '连接中' | '已连接' | '已断开' | '连接错误'
+export type BackendStatus = 'unknown' | 'starting' | 'running' | 'stopped' | 'error'
 
 export interface WebSocketBaseMessage {
   id?: string
@@ -24,25 +33,36 @@ export interface WebSocketBaseMessage {
   data?: any
 }
 
-// 删除了冗余的类型定义：
-// ProgressMessage、ResultMessage、ErrorMessage、NotifyMessage
-// 因为现在WebSocket消息处理统一使用onMessage回调函数，不再需要这些特定的类型
-
-export interface WebSocketSubscriber {
-  id: string
-  onMessage?: (message: WebSocketBaseMessage) => void
+export interface SubscriptionFilter {
+  type?: string
+  id?: string
+  needCache?: boolean
 }
 
-// 后端状态类型
-export type BackendStatus = 'unknown' | 'starting' | 'running' | 'stopped' | 'error'
+export interface WebSocketSubscription {
+  subscriptionId: string
+  filter: SubscriptionFilter
+  handler: (message: WebSocketBaseMessage) => void
+}
 
-// 全局存储接口 - 添加后端管理和连接控制
+interface CacheMarker {
+  type?: string
+  id?: string
+  refCount: number
+}
+
+interface CachedMessage {
+  message: WebSocketBaseMessage
+  timestamp: number
+}
+
+// ====== 全局存储 ======
 interface GlobalWSStorage {
   wsRef: WebSocket | null
   status: Ref<WebSocketStatus>
-  subscribers: Ref<Map<string, WebSocketSubscriber>>
-  // 修改消息队列结构，使用Map存储消息数组和时间戳
-  messageQueue: Ref<Map<string, Array<{ message: WebSocketBaseMessage; timestamp: number }>>>
+  subscriptions: Ref<Map<string, WebSocketSubscription>>
+  cacheMarkers: Ref<Map<string, CacheMarker>>
+  cachedMessages: Ref<Array<CachedMessage>>
   heartbeatTimer?: number
   isConnecting: boolean
   lastPingTime: number
@@ -51,115 +71,85 @@ interface GlobalWSStorage {
   createdAt: number
   hasEverConnected: boolean
   reconnectAttempts: number
-  // 新增：后端管理
   backendStatus: Ref<BackendStatus>
   backendCheckTimer?: number
   backendRestartAttempts: number
   isRestartingBackend: boolean
   lastBackendCheck: number
-  // 新增：连接保护
   lastConnectAttempt: number
-  // 新增：连接权限控制
   allowNewConnection: boolean
   connectionReason: string
+  subscriptionCounter: number
 }
 
 const WS_STORAGE_KEY = Symbol.for('GLOBAL_WEBSOCKET_PERSISTENT')
 
-// 初始化全局存储
-const initGlobalStorage = (): GlobalWSStorage => {
-  return {
-    wsRef: null,
-    status: ref<WebSocketStatus>('已断开'),
-    subscribers: ref(new Map<string, WebSocketSubscriber>()),
-    // 初始化消息队列，使用数组存储每个ID的多条消息
-    messageQueue: ref(new Map<string, Array<{ message: WebSocketBaseMessage; timestamp: number }>>()),
-    heartbeatTimer: undefined,
-    isConnecting: false,
-    lastPingTime: 0,
-    connectionId: Math.random().toString(36).substring(2, 9),
-    moduleLoadCount: 0,
-    createdAt: Date.now(),
-    hasEverConnected: false,
-    reconnectAttempts: 0,
-    // 后端管理
-    backendStatus: ref<BackendStatus>('unknown'),
-    backendCheckTimer: undefined,
-    backendRestartAttempts: 0,
-    isRestartingBackend: false,
-    lastBackendCheck: 0,
-    // 连接保护
-    lastConnectAttempt: 0,
-    // 连接权限控制
-    allowNewConnection: true, // 初始化时允许创建连接
-    connectionReason: '系统初始化',
-  }
-}
+const initGlobalStorage = (): GlobalWSStorage => ({
+  wsRef: null,
+  status: ref<WebSocketStatus>('已断开'),
+  subscriptions: ref(new Map()),
+  cacheMarkers: ref(new Map()),
+  cachedMessages: ref([]),
+  heartbeatTimer: undefined,
+  isConnecting: false,
+  lastPingTime: 0,
+  connectionId: Math.random().toString(36).substring(2, 9),
+  moduleLoadCount: 0,
+  createdAt: Date.now(),
+  hasEverConnected: false,
+  reconnectAttempts: 0,
+  backendStatus: ref<BackendStatus>('unknown'),
+  backendCheckTimer: undefined,
+  backendRestartAttempts: 0,
+  isRestartingBackend: false,
+  lastBackendCheck: 0,
+  lastConnectAttempt: 0,
+  allowNewConnection: true,
+  connectionReason: '系统初始化',
+  subscriptionCounter: 0,
+})
 
-// 获取全局存储
 const getGlobalStorage = (): GlobalWSStorage => {
   if (!(window as any)[WS_STORAGE_KEY]) {
-    ; (window as any)[WS_STORAGE_KEY] = initGlobalStorage()
+    ;(window as any)[WS_STORAGE_KEY] = initGlobalStorage()
   }
-
-  return (window as any)[WS_STORAGE_KEY] as GlobalWSStorage
+  return (window as any)[WS_STORAGE_KEY]
 }
 
-// 设置全局状态
+// ====== 状态设置 ======
 const setGlobalStatus = (status: WebSocketStatus) => {
-  const global = getGlobalStorage()
-  global.status.value = status
+  getGlobalStorage().status.value = status
 }
-
-// 设置后端状态
 const setBackendStatus = (status: BackendStatus) => {
-  const global = getGlobalStorage()
-  global.backendStatus.value = status
+  getGlobalStorage().backendStatus.value = status
 }
 
-// 检查后端是否运行（通过WebSocket连接状态判断）
+// ====== 后端管理 ======
 const checkBackendStatus = (): boolean => {
   const global = getGlobalStorage()
-
-  // 如果WebSocket存在且状态为OPEN，说明后端运行正常
-  if (global.wsRef && global.wsRef.readyState === WebSocket.OPEN) {
-    return true
-  }
-
-  // 如果WebSocket不存在或状态不是OPEN，说明后端可能有问题
-  return false
+  return !!(global.wsRef && global.wsRef.readyState === WebSocket.OPEN)
 }
 
-// 重启后端
 const restartBackend = async (): Promise<boolean> => {
   const global = getGlobalStorage()
-
-  if (global.isRestartingBackend) {
-    return false
-  }
+  if (global.isRestartingBackend) return false
 
   try {
     global.isRestartingBackend = true
     global.backendRestartAttempts++
-
     setBackendStatus('starting')
 
-    // 调用 Electron API 重启后端
     if ((window.electronAPI as any)?.startBackend) {
       const result = await (window.electronAPI as any).startBackend()
-      if (result.success) {
+      if (result?.success) {
         setBackendStatus('running')
         global.backendRestartAttempts = 0
         return true
-      } else {
-        setBackendStatus('error')
-        return false
       }
-    } else {
-      setBackendStatus('error')
-      return false
     }
-  } catch (error) {
+    setBackendStatus('error')
+    return false
+  } catch (e) {
     setBackendStatus('error')
     return false
   } finally {
@@ -167,19 +157,16 @@ const restartBackend = async (): Promise<boolean> => {
   }
 }
 
-// 后端监控和重启逻辑
 const handleBackendFailure = async () => {
   const global = getGlobalStorage()
-
   if (global.backendRestartAttempts >= MAX_RESTART_ATTEMPTS) {
-    // 弹窗提示用户重启整个应用
     Modal.error({
       title: '后端服务异常',
       content: '后端服务多次重启失败，请重启整个应用程序。',
       okText: '重启应用',
       onOk: () => {
         if ((window.electronAPI as any)?.windowClose) {
-          ; (window.electronAPI as any).windowClose()
+          ;(window.electronAPI as any).windowClose()
         } else {
           window.location.reload()
         }
@@ -188,63 +175,48 @@ const handleBackendFailure = async () => {
     return
   }
 
-  // 尝试重启后端
   setTimeout(async () => {
     const success = await restartBackend()
     if (success) {
-      // 重启成功，允许重连并等待一段时间后重新连接 WebSocket
       setConnectionPermission(true, '后端重启后重连')
       setTimeout(() => {
         connectGlobalWebSocket('后端重启后重连').then(() => {
-          // 连接完成后禁止新连接
           setConnectionPermission(false, '正常运行中')
         })
       }, RESTART_DELAY)
     } else {
-      // 重启失败，继续监控
       setTimeout(handleBackendFailure, RESTART_DELAY)
     }
   }, RESTART_DELAY)
 }
 
-// 启动后端监控（仅基于WebSocket状态）
 const startBackendMonitoring = () => {
   const global = getGlobalStorage()
-
-  if (global.backendCheckTimer) {
-    clearInterval(global.backendCheckTimer)
-  }
+  if (global.backendCheckTimer) clearInterval(global.backendCheckTimer)
 
   global.backendCheckTimer = window.setInterval(() => {
     const isRunning = checkBackendStatus()
     const now = Date.now()
     global.lastBackendCheck = now
 
-    // 基于 WebSocket 状态判断后端运行状态
     if (isRunning) {
-      // WebSocket连接正常
       if (global.backendStatus.value !== 'running') {
         setBackendStatus('running')
-        global.backendRestartAttempts = 0 // 重置重启计数
-      }
-    } else {
-      // WebSocket连接异常，但不频繁报告
-      const shouldReportStatus = global.backendStatus.value === 'running'
-      if (shouldReportStatus) {
-        setBackendStatus('stopped')
+        global.backendRestartAttempts = 0
       }
+    } else if (global.backendStatus.value === 'running') {
+      setBackendStatus('stopped')
     }
 
-    // 仅在必要时检查心跳超时
     if (global.lastPingTime > 0 && now - global.lastPingTime > HEARTBEAT_TIMEOUT * 2) {
-      if (global.wsRef && global.wsRef.readyState === WebSocket.OPEN) {
+      if (global.wsRef?.readyState === WebSocket.OPEN) {
         setBackendStatus('error')
       }
     }
-  }, BACKEND_CHECK_INTERVAL * 2) // 降低检查频率
+  }, BACKEND_CHECK_INTERVAL * 2)
 }
 
-// 停止心跳
+// ====== 心跳 ======
 const stopGlobalHeartbeat = () => {
   const global = getGlobalStorage()
   if (global.heartbeatTimer) {
@@ -253,158 +225,263 @@ const stopGlobalHeartbeat = () => {
   }
 }
 
-// 启动心跳
 const startGlobalHeartbeat = (ws: WebSocket) => {
   const global = getGlobalStorage()
   stopGlobalHeartbeat()
-
   global.heartbeatTimer = window.setInterval(() => {
     if (ws.readyState === WebSocket.OPEN) {
+      const pingTime = Date.now()
+      global.lastPingTime = pingTime
       try {
-        const pingTime = Date.now()
-        global.lastPingTime = pingTime
         ws.send(
           JSON.stringify({
             type: 'Signal',
             data: { Ping: pingTime, connectionId: global.connectionId },
           })
         )
-        setTimeout(() => {
-          /* 心跳超时不主动断开 */
-        }, HEARTBEAT_TIMEOUT)
-      } catch {
-        /* ignore */
-      }
+      } catch {}
     }
   }, HEARTBEAT_INTERVAL)
 }
 
-// 获取消息队列
-const getMessageQueue = (): Map<string, Array<{ message: WebSocketBaseMessage; timestamp: number }>> => {
+// ====== 消息队列和缓存管理 ======
+const cleanupExpiredMessages = (now: number) => {
   const global = getGlobalStorage()
-  return global.messageQueue.value
+  global.cachedMessages.value = global.cachedMessages.value.filter(
+    cached => now - cached.timestamp <= MESSAGE_TTL
+  )
 }
 
-// 设置消息队列
-const setMessageQueue = (
-  queue: Map<string, Array<{ message: WebSocketBaseMessage; timestamp: number }>>
-): void => {
-  const global = getGlobalStorage()
-  global.messageQueue.value = queue
+// 检查消息是否匹配订阅条件
+const messageMatchesFilter = (message: WebSocketBaseMessage, filter: SubscriptionFilter): boolean => {
+  // 如果都不指定，匹配所有消息
+  if (!filter.type && !filter.id) return true
+  
+  // 如果只指定type
+  if (filter.type && !filter.id) return message.type === filter.type
+  
+  // 如果只指定id
+  if (!filter.type && filter.id) return message.id === filter.id
+  
+  // 如果同时指定type和id，必须都匹配
+  return message.type === filter.type && message.id === filter.id
 }
 
+// 获取缓存标记的key
+const getCacheMarkerKey = (filter: SubscriptionFilter): string => {
+  if (filter.type && filter.id) return `${filter.type}:${filter.id}`
+  if (filter.type) return `type:${filter.type}`
+  if (filter.id) return `id:${filter.id}`
+  return 'all'
+}
+
+// 添加缓存标记
+const addCacheMarker = (filter: SubscriptionFilter) => {
+  if (!filter.needCache) return
+  
+  const global = getGlobalStorage()
+  const key = getCacheMarkerKey(filter)
+  const existing = global.cacheMarkers.value.get(key)
+  
+  if (existing) {
+    existing.refCount++
+  } else {
+    global.cacheMarkers.value.set(key, {
+      type: filter.type,
+      id: filter.id,
+      refCount: 1
+    })
+  }
+  
+  log(`缓存标记 ${key} 引用计数: ${global.cacheMarkers.value.get(key)?.refCount}`)
+}
+
+// 移除缓存标记
+const removeCacheMarker = (filter: SubscriptionFilter) => {
+  if (!filter.needCache) return
+  
+  const global = getGlobalStorage()
+  const key = getCacheMarkerKey(filter)
+  const existing = global.cacheMarkers.value.get(key)
+  
+  if (existing) {
+    existing.refCount--
+    if (existing.refCount <= 0) {
+      global.cacheMarkers.value.delete(key)
+      log(`移除缓存标记: ${key}`)
+    } else {
+      log(`缓存标记 ${key} 引用计数: ${existing.refCount}`)
+    }
+  }
+}
+
+// 检查消息是否需要缓存
+const shouldCacheMessage = (message: WebSocketBaseMessage): boolean => {
+  const global = getGlobalStorage()
+  
+  for (const [, marker] of global.cacheMarkers.value) {
+    const filter = { type: marker.type, id: marker.id }
+    if (messageMatchesFilter(message, filter)) {
+      return true
+    }
+  }
+  return false
+}
+
+// ====== 消息分发 ======
 const handleMessage = (raw: WebSocketBaseMessage) => {
   const global = getGlobalStorage()
-  const msgType = String(raw.type)
-  const id = raw.id
+  const now = Date.now()
 
-  // 添加原始消息调试
-  console.log('[WebSocket Debug] 收到原始消息:', {
-    type: msgType,
-    id: id,
-    data: raw.data,
-    fullMessage: raw,
+  if (DEBUG) {
+    log('收到原始消息:', { type: raw.type, id: raw.id, data: raw.data })
+  }
+
+  let dispatched = false
+
+  // 分发给所有匹配的订阅者
+  global.subscriptions.value.forEach((subscription) => {
+    if (messageMatchesFilter(raw, subscription.filter)) {
+      try {
+        subscription.handler(raw)
+        dispatched = true
+      } catch (e) {
+        warn(`订阅处理器错误 [${subscription.subscriptionId}]:`, e)
+      }
+    }
   })
 
-  if (id) {
-    const sub = global.subscribers.value.get(id)
-    console.log('[WebSocket Debug] 查找订阅者:', {
-      messageId: id,
-      hasSubscriber: !!sub,
-      totalSubscribers: global.subscribers.value.size,
-      allSubscriberIds: Array.from(global.subscribers.value.keys()),
-    })
-    if (sub) {
-      // 有订阅者，直接分发消息
-      console.log('[WebSocket Debug] 找到订阅者，直接分发消息')
-      handleMessageDispatch(raw, sub)
-    } else {
-      // 没有订阅者，将消息暂存到队列中
-      console.log(`[WebSocket Debug] 没有找到ID为${id}的订阅者，将消息暂存到队列`)
+  // 如果需要缓存且有标记，则添加到缓存
+  if (shouldCacheMessage(raw)) {
+    global.cachedMessages.value.push({ message: raw, timestamp: now })
+    // 限制缓存大小
+    if (global.cachedMessages.value.length > MAX_QUEUE_SIZE) {
+      global.cachedMessages.value = global.cachedMessages.value.slice(-MAX_QUEUE_SIZE)
+    }
+    log(`消息已缓存: type=${raw.type}, id=${raw.id}`)
+  }
 
-      const currentMessageQueue = getMessageQueue()
+  // 定期清理过期消息（每 10 条触发一次，避免频繁）
+  if (Math.random() < 0.1) {
+    cleanupExpiredMessages(now)
+  }
 
-      // 获取该ID现有的消息数组，如果不存在则创建新的空数组
-      const existingMessages = currentMessageQueue.get(id) || []
-      // 将新消息添加到数组末尾
-      existingMessages.push({ message: raw, timestamp: Date.now() })
-      // 更新该ID的消息数组
-      currentMessageQueue.set(id, existingMessages)
-      console.log(`[WebSocket Debug] 添加新消息到队列，ID: ${id}, Type: ${msgType}, 当前消息数量: ${existingMessages.length}`)
+  if (!dispatched) {
+    log('无订阅者接收此消息:', raw)
+  }
+}
 
-      // 清理过期消息（超过1分钟的消息）
-      const now = Date.now()
-      let deletedCount = 0
-      currentMessageQueue.forEach((messages, key) => {
-        // 过滤掉过期的消息
-        const filteredMessages = messages.filter(msg => now - (msg.timestamp || 0) <= 60000)
-        const removedCount = messages.length - filteredMessages.length
-        if (removedCount > 0) {
-          deletedCount += removedCount
-          console.log(`[WebSocket Debug] 清理了${removedCount}条ID为${key}的过期消息`)
-        }
-        // 更新过滤后的消息数组
-        currentMessageQueue.set(key, filteredMessages)
-      })
-
-      if (deletedCount > 0) {
-        console.log(`[WebSocket Debug] 共清理了${deletedCount}条过期消息`)
+// ====== 新的订阅机制 ======
+export const subscribe = (
+  filter: SubscriptionFilter,
+  handler: (message: WebSocketBaseMessage) => void
+): string => {
+  const global = getGlobalStorage()
+  const subscriptionId = `sub_${++global.subscriptionCounter}_${Date.now()}`
+  
+  const subscription: WebSocketSubscription = {
+    subscriptionId,
+    filter,
+    handler
+  }
+  
+  global.subscriptions.value.set(subscriptionId, subscription)
+  
+  // 添加缓存标记
+  addCacheMarker(filter)
+  
+  // 回放匹配的缓存消息
+  const matchingMessages = global.cachedMessages.value.filter(cached => 
+    messageMatchesFilter(cached.message, filter)
+  )
+  
+  if (matchingMessages.length > 0) {
+    log(`回放 ${matchingMessages.length} 条缓存消息给订阅 ${subscriptionId}`)
+    matchingMessages.forEach(cached => {
+      try {
+        handler(cached.message)
+      } catch (e) {
+        warn(`回放消息时处理器错误 [${subscriptionId}]:`, e)
       }
+    })
+  }
+  
+  log(`新订阅创建: ${subscriptionId}`, filter)
+  return subscriptionId
+}
 
-      // 更新消息队列
-      setMessageQueue(currentMessageQueue)
-    }
+export const unsubscribe = (subscriptionId: string): void => {
+  const global = getGlobalStorage()
+  const subscription = global.subscriptions.value.get(subscriptionId)
+  
+  if (subscription) {
+    // 移除缓存标记
+    removeCacheMarker(subscription.filter)
+    
+    // 清理缓存中没有任何标记的消息
+    cleanupUnmarkedCache()
+    
+    global.subscriptions.value.delete(subscriptionId)
+    log(`订阅已取消: ${subscriptionId}`)
+  } else {
+    warn(`尝试取消不存在的订阅: ${subscriptionId}`)
   }
 }
 
-// 后端启动后建立连接的公开函数
-export const connectAfterBackendStart = async (): Promise<boolean> => {
-  setConnectionPermission(true, '后端启动后连接')
-
-  try {
-    const connected = await connectGlobalWebSocket('后端启动后连接')
-    if (connected) {
-      startBackendMonitoring()
-      // 连接完成后禁止新连接
-      setConnectionPermission(false, '正常运行中')
-      return true
-    } else {
-      return false
+// 清理没有标记的缓存消息
+const cleanupUnmarkedCache = () => {
+  const global = getGlobalStorage()
+  
+  global.cachedMessages.value = global.cachedMessages.value.filter(cached => {
+    // 检查是否还有标记需要这条消息
+    for (const [, marker] of global.cacheMarkers.value) {
+      const filter = { type: marker.type, id: marker.id }
+      if (messageMatchesFilter(cached.message, filter)) {
+        return true
+      }
     }
-  } catch (error) {
     return false
-  }
+  })
+}
+
+// ====== 连接控制 ======
+let isGlobalConnectingLock = false
+const acquireConnectionLock = () => {
+  if (isGlobalConnectingLock) return false
+  isGlobalConnectingLock = true
+  return true
+}
+const releaseConnectionLock = () => {
+  isGlobalConnectingLock = false
+}
+
+const allowedConnectionReasons = ['后端启动后连接', '后端重启后重连']
+const isValidConnectionReason = (reason: string) => allowedConnectionReasons.includes(reason)
+const checkConnectionPermission = () => getGlobalStorage().allowNewConnection
+const setConnectionPermission = (allow: boolean, reason: string) => {
+  const global = getGlobalStorage()
+  global.allowNewConnection = allow
+  global.connectionReason = reason
 }
 
-// 创建 WebSocket 连接
 const createGlobalWebSocket = (): WebSocket => {
   const global = getGlobalStorage()
-
-  // 检查现有连接状态
   if (global.wsRef) {
-    if (global.wsRef.readyState === WebSocket.OPEN) {
-      return global.wsRef
-    }
-
-    if (global.wsRef.readyState === WebSocket.CONNECTING) {
-      return global.wsRef
-    }
+    if (global.wsRef.readyState === WebSocket.OPEN) return global.wsRef
+    if (global.wsRef.readyState === WebSocket.CONNECTING) return global.wsRef
   }
 
   const ws = new WebSocket(BASE_WS_URL)
+  global.wsRef = ws
 
   ws.onopen = () => {
     global.isConnecting = false
     global.hasEverConnected = true
     global.reconnectAttempts = 0
     setGlobalStatus('已连接')
-
     startGlobalHeartbeat(ws)
-
-    // 连接成功后禁止新连接
     setConnectionPermission(false, '正常运行中')
 
-    // 发送连接确认和初始pong
     try {
       ws.send(
         JSON.stringify({
@@ -418,11 +495,8 @@ const createGlobalWebSocket = (): WebSocket => {
           data: { Pong: Date.now(), connectionId: global.connectionId },
         })
       )
-    } catch {
-      /* ignore */
-    }
+    } catch {}
 
-    // 初始化全局订阅（TaskManager和Main）
     initializeGlobalSubscriptions()
   }
 
@@ -430,96 +504,47 @@ const createGlobalWebSocket = (): WebSocket => {
     try {
       const raw = JSON.parse(ev.data) as WebSocketBaseMessage
       handleMessage(raw)
-    } catch (e) {
-      // 消息解析失败，静默处理
-    }
-  }
-
-  ws.onerror = () => {
-    setGlobalStatus('连接错误')
+    } catch {}
   }
 
+  ws.onerror = () => setGlobalStatus('连接错误')
   ws.onclose = event => {
     setGlobalStatus('已断开')
     stopGlobalHeartbeat()
     global.isConnecting = false
 
-    // 检查是否是后端自杀导致的关闭
     if (event.code === 1000 && event.reason === 'Ping超时') {
-      handleBackendFailure().catch(error => {
-        // 忽略错误，或者可以添加适当的错误处理
-        console.warn('handleBackendFailure error:', error)
-      })
-    } else {
-      // 连接断开，不自动重连，等待后端重启
-      setGlobalStatus('已断开')
+      handleBackendFailure().catch(e => warn('handleBackendFailure error:', e))
     }
   }
 
-  // 为新创建的 WebSocket 设置引用
-  global.wsRef = ws
-
   return ws
 }
 
-// 连接全局 WebSocket
 const connectGlobalWebSocket = async (reason: string = '未指定原因'): Promise<boolean> => {
   const global = getGlobalStorage()
-
-  // 首先检查连接权限
-  if (!checkConnectionPermission()) {
-    return false
-  }
-
-  // 验证连接原因是否合法
-  if (!isValidConnectionReason(reason)) {
-    return false
-  }
-
-  // 尝试获取全局连接锁
-  if (!acquireConnectionLock()) {
-    return false
-  }
+  if (!checkConnectionPermission() || !isValidConnectionReason(reason)) return false
+  if (!acquireConnectionLock()) return false
 
   try {
-    // 严格检查现有连接，避免重复创建
     if (global.wsRef) {
       const state = global.wsRef.readyState
-
       if (state === WebSocket.OPEN) {
         setGlobalStatus('已连接')
         return true
       }
-
-      if (state === WebSocket.CONNECTING) {
-        return true
-      }
-
-      // CLOSING 或 CLOSED 状态才允许创建新连接
-      if (state === WebSocket.CLOSING) {
-        return false
-      }
+      if (state === WebSocket.CONNECTING) return true
+      if (state === WebSocket.CLOSING) return false
     }
 
-    // 检查全局连接标志 - 增强防重复逻辑
-    if (global.isConnecting) {
-      return false
-    }
+    if (global.isConnecting) return false
 
-    // 额外保护：检查最近连接尝试时间，避免过于频繁的连接
     const now = Date.now()
-    const MIN_CONNECT_INTERVAL = 2000 // 最小连接间隔2秒
-    if (global.lastConnectAttempt && now - global.lastConnectAttempt < MIN_CONNECT_INTERVAL) {
-      return false
-    }
+    if (global.lastConnectAttempt && now - global.lastConnectAttempt < 2000) return false
 
     global.isConnecting = true
     global.lastConnectAttempt = now
-
-    // 清理旧连接引用（如果存在且已关闭）
-    if (global.wsRef && global.wsRef.readyState === WebSocket.CLOSED) {
-      global.wsRef = null
-    }
+    if (global.wsRef?.readyState === WebSocket.CLOSED) global.wsRef = null
 
     global.wsRef = createGlobalWebSocket()
     setGlobalStatus('连接中')
@@ -529,76 +554,40 @@ const connectGlobalWebSocket = async (reason: string = '未指定原因'): Promi
     global.isConnecting = false
     return false
   } finally {
-    // 确保始终释放连接锁
     releaseConnectionLock()
   }
 }
 
-// 连接权限控制函数
-const setConnectionPermission = (allow: boolean, reason: string) => {
-  const global = getGlobalStorage()
-  global.allowNewConnection = allow
-  global.connectionReason = reason
-}
-
-const checkConnectionPermission = (): boolean => {
-  const global = getGlobalStorage()
-  return global.allowNewConnection
-}
-
-// 只在后端启动/重启时允许创建连接
-const allowedConnectionReasons = ['后端启动后连接', '后端重启后重连']
-
-const isValidConnectionReason = (reason: string): boolean =>
-  allowedConnectionReasons.includes(reason)
-
-// 全局连接锁 - 防止多个模块实例同时连接
-let isGlobalConnectingLock = false
-
-// 获取全局连接锁
-const acquireConnectionLock = (): boolean => {
-  if (isGlobalConnectingLock) {
+export const connectAfterBackendStart = async (): Promise<boolean> => {
+  setConnectionPermission(true, '后端启动后连接')
+  try {
+    const connected = await connectGlobalWebSocket('后端启动后连接')
+    if (connected) {
+      startBackendMonitoring()
+      setConnectionPermission(false, '正常运行中')
+      return true
+    }
+    return false
+  } catch {
     return false
   }
-  isGlobalConnectingLock = true
-  return true
 }
 
-// 释放全局连接锁
-const releaseConnectionLock = () => {
-  isGlobalConnectingLock = false
-}
+// ====== 全局处理器 ======
+let _defaultHandlersLoaded = true
+let _defaultTaskManagerHandler = schedulerHandlers.handleTaskManagerMessage
+let _defaultMainHandler = schedulerHandlers.handleMainMessage
 
-// 模块初始化逻辑 - 不自动建立连接
-const global = getGlobalStorage()
-
-// 只在模块真正加载时计数一次
-if (global.moduleLoadCount === 0) {
-  global.moduleLoadCount = 1
-}
-
-// 页面卸载时不关闭连接，保持永久连接
-window.addEventListener('beforeunload', () => {
-  // 保持连接
-})
-
-// 导出一个长期存在的可变对象，供外部通过 import 直接赋值/替换处理函数
-// 这样可以避免通过 window 或全局函数暴露，同时保证导入方始终能获取到该对象并设置回调，且不会被内部清理
-export const ExternalWSHandlers: {
-  mainMessage: (message: any) => void
-  taskManagerMessage: (message: any) => void
-} = {
+export const ExternalWSHandlers = {
   mainMessage: (message: any) => {
-    // 如果默认实现已加载，则调用之；否则保持空实现
     try {
       if (_defaultHandlersLoaded && typeof _defaultMainHandler === 'function') {
         _defaultMainHandler(message)
         return
       }
     } catch (e) {
-      console.warn('[ExternalWSHandlers] default main handler error:', e)
+      warn('default main handler error:', e)
     }
-    // 未加载默认实现时保持空实现
   },
   taskManagerMessage: (message: any) => {
     try {
@@ -607,120 +596,88 @@ export const ExternalWSHandlers: {
         return
       }
     } catch (e) {
-      console.warn('[ExternalWSHandlers] default taskManager handler error:', e)
+      warn('default taskManager handler error:', e)
     }
   },
 }
 
-// 初始化全局订阅
 const initializeGlobalSubscriptions = () => {
-  // 订阅TaskManager消息
-  _subscribe('TaskManager', {
-    onMessage: (message) => {
-      try {
-        ExternalWSHandlers.taskManagerMessage(message)
-      } catch (e) {
-        // 防御性处理，确保调用方异常不会影响消息通道
-        console.warn('[WebSocket] External taskManagerMessage handler error:', e)
-      }
+  subscribe({ id: 'TaskManager' }, (msg: WebSocketBaseMessage) => {
+    try {
+      ExternalWSHandlers.taskManagerMessage(msg)
+    } catch (e) {
+      warn('External taskManagerMessage handler error:', e)
     }
   })
 
-  // 订阅Main消息  
-  _subscribe('Main', {
-    onMessage: (message) => {
-      // 处理系统级消息（如ping-pong）
-      if (message && message.type === 'Signal' && message.data) {
-        // 处理心跳响应
-        if (message.data.Pong) {
-          const global = getGlobalStorage()
-          global.lastPingTime = 0 // 重置ping时间，表示收到了响应
-          return
-        }
-
-        // 处理后端发送的Ping，回复Pong
-        if (message.data.Ping) {
-          const global = getGlobalStorage()
-          const ws = global.wsRef
-          if (ws && ws.readyState === WebSocket.OPEN) {
-            try {
-              ws.send(
-                JSON.stringify({
-                  type: 'Signal',
-                  data: { Pong: message.data.Ping, connectionId: global.connectionId },
-                })
-              )
-            } catch (e) {
-              // Pong发送失败，静默处理
-            }
-          }
-          return
-        }
+  subscribe({ id: 'Main' }, (msg: WebSocketBaseMessage) => {
+    if (msg.type === 'Signal' && msg.data) {
+      if (msg.data.Pong) {
+        getGlobalStorage().lastPingTime = 0
+        return
       }
-
-      // 调用外部导入的 Main 消息处理函数（由使用者通过 import 并赋值给 ExternalWSHandlers）
-      try {
-        ExternalWSHandlers.mainMessage(message)
-      } catch (e) {
-        console.warn('[WebSocket] External mainMessage handler error:', e)
+      if (msg.data.Ping) {
+        const global = getGlobalStorage()
+        const ws = global.wsRef
+        if (ws?.readyState === WebSocket.OPEN) {
+          try {
+            ws.send(
+              JSON.stringify({
+                type: 'Signal',
+                data: { Pong: msg.data.Ping, connectionId: global.connectionId },
+              })
+            )
+          } catch {}
+        }
+        return
       }
     }
+    try {
+      ExternalWSHandlers.mainMessage(msg)
+    } catch (e) {
+      warn('External mainMessage handler error:', e)
+    }
   })
 }
 
-// 主要 Hook 函数
+// ====== Vue Hook ======
 export function useWebSocket() {
   const global = getGlobalStorage()
 
-  const subscribe = (id: string, handlers: Omit<WebSocketSubscriber, 'id'>) => {
-    // 使用全局的subscribe函数来确保消息队列机制正常工作
-    _subscribe(id, handlers)
-  }
-
-  const unsubscribe = (id: string) => {
-    global.subscribers.value.delete(id)
-  }
-
   const sendRaw = (type: string, data?: any, id?: string) => {
     const ws = global.wsRef
-
-    if (ws && ws.readyState === WebSocket.OPEN) {
+    if (ws?.readyState === WebSocket.OPEN) {
       try {
         ws.send(JSON.stringify({ id, type, data }))
-      } catch (e) {
-        // 发送失败，静默处理
-      }
+      } catch {}
     }
   }
 
   const getConnectionInfo = () => ({
     connectionId: global.connectionId,
     status: global.status.value,
-    subscriberCount: global.subscribers.value.size,
+    subscriberCount: global.subscriptions.value.size,
     moduleLoadCount: global.moduleLoadCount,
     wsReadyState: global.wsRef ? global.wsRef.readyState : null,
     isConnecting: global.isConnecting,
     hasHeartbeat: !!global.heartbeatTimer,
     hasEverConnected: global.hasEverConnected,
     reconnectAttempts: global.reconnectAttempts,
-    isPersistentMode: true, // 标识为永久连接模式
+    isPersistentMode: true,
   })
 
   const restartBackendManually = async () => {
-    const global = getGlobalStorage()
-    global.backendRestartAttempts = 0
+    const g = getGlobalStorage()
+    g.backendRestartAttempts = 0
     return await restartBackend()
   }
 
-  const getBackendStatus = () => {
-    const global = getGlobalStorage()
-    return {
-      status: global.backendStatus.value,
-      restartAttempts: global.backendRestartAttempts,
-      isRestarting: global.isRestartingBackend,
-      lastCheck: global.lastBackendCheck,
-    }
-  }
+  const getBackendStatus = () => ({
+    status: global.backendStatus.value,
+    restartAttempts: global.backendRestartAttempts,
+    isRestarting: global.isRestartingBackend,
+    lastCheck: global.lastBackendCheck,
+  })
 
   return {
     subscribe,
@@ -728,97 +685,17 @@ export function useWebSocket() {
     sendRaw,
     getConnectionInfo,
     status: global.status,
-    subscribers: global.subscribers,
     backendStatus: global.backendStatus,
     restartBackend: restartBackendManually,
     getBackendStatus,
   }
 }
 
-/**
- * 订阅指定ID的消息
- * @param id 消息ID
- * @param subscriber 订阅者对象
- */
-export const _subscribe = (id: string, subscriber: Omit<WebSocketSubscriber, 'id'>) => {
-  const global = getGlobalStorage()
-  const fullSubscriber: WebSocketSubscriber = { ...subscriber, id }
+// ====== 页面卸载保护 ======
+window.addEventListener('beforeunload', () => {
+  // 保持连接
+})
 
-  // 添加订阅者
-  global.subscribers.value.set(id, fullSubscriber)
-  console.log('[WebSocket] 添加订阅者:', id, '当前订阅者数量:', global.subscribers.value.size)
-
-  // 检查消息队列中是否有该订阅者的消息
-  const messageQueue = getMessageQueue()
-  console.log(
-    '[WebSocket] 检查消息队列，当前队列大小:',
-    messageQueue.size,
-    '队列内容:',
-    Array.from(messageQueue.entries())
-  )
-
-  // 检查特定ID的消息
-  const queuedMessages = messageQueue.get(id)
-  if (queuedMessages && queuedMessages.length > 0) {
-    console.log('[WebSocket] 发现队列中的消息，立即按顺序分发给新订阅者:', id, '消息数量:', queuedMessages.length)
-    // 创建临时订阅者对象用于分发消息
-    const tempSubscriber: WebSocketSubscriber = { ...subscriber, id }
-
-    // 按顺序处理所有遗留消息
-    queuedMessages.forEach((queuedMessage, index) => {
-      console.log('[WebSocket] 开始处理遗留消息，订阅者ID:', id, '消息索引:', index, '消息:', queuedMessage.message)
-      try {
-        handleMessageDispatch(queuedMessage.message, tempSubscriber)
-        console.log('[WebSocket] 遗留消息处理完成，订阅者ID:', id, '消息索引:', index)
-      } catch (error) {
-        console.error('[WebSocket] 处理遗留消息时出错，订阅者ID:', id, '消息索引:', index, '错误:', error)
-      }
-    })
-
-    // 从队列中移除已处理的消息
-    messageQueue.delete(id)
-    setMessageQueue(messageQueue)
-    console.log('[WebSocket] 已从队列中移除消息，剩余队列大小:', messageQueue.size)
-  } else {
-    console.log('[WebSocket] 未在队列中找到ID为', id, '的消息')
-  }
-
-  // 清理过期消息（超过1分钟的消息）
-  const now = Date.now()
-  let cleanedCount = 0
-  messageQueue.forEach((queuedMessages, msgId) => {
-    // 过滤掉过期的消息
-    const filteredMessages = queuedMessages.filter(msg => now - msg.timestamp <= 60000)
-    const removedCount = queuedMessages.length - filteredMessages.length
-    if (removedCount > 0) {
-      cleanedCount += removedCount
-      console.log('[WebSocket] 清理过期消息:', msgId, '清理数量:', removedCount)
-      // 更新过滤后的消息数组
-      messageQueue.set(msgId, filteredMessages)
-    }
-  })
-
-  if (cleanedCount > 0) {
-    console.log('[WebSocket] 共清理过期消息数量:', cleanedCount)
-    setMessageQueue(messageQueue)
-  }
-}
-
-// 新增函数：处理消息分发
-const handleMessageDispatch = (raw: WebSocketBaseMessage, sub: WebSocketSubscriber) => {
-  const msgType = raw.type
-
-  console.log('[WebSocket] 分发消息类型:', msgType, '消息内容:', raw)
-
-  // 如果订阅者定义了 onMessage 回调，则优先使用统一的处理函数
-  if (sub.onMessage) {
-    return sub.onMessage(raw)
-  }
-
-  // 如果没有 onMessage 处理函数，则记录错误（理论上不应该出现）
-  console.error('[WebSocket] 错误：订阅者没有定义onMessage处理函数', {
-    subscriberId: sub.id,
-    messageType: msgType,
-    messageContent: raw,
-  })
-}
+// ====== 模块加载计数 ======
+const global = getGlobalStorage()
+if (global.moduleLoadCount === 0) global.moduleLoadCount = 1
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 6eb571c..371df2c 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,7 +5,6 @@ import { OpenAPI } from '@/api'
 
 import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/reset.css'
-import zhCN from 'ant-design-vue/es/locale/zh_CN'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 
@@ -15,11 +14,13 @@ import { logger } from '@/utils/logger'
 // 导入镜像管理器
 import { mirrorManager } from '@/utils/mirrorManager'
 
+// 导入WebSocket消息监听组件
+import WebSocketMessageListener from '@/components/WebSocketMessageListener.vue'
+import { API_ENDPOINTS } from '@/config/mirrors'
+
 // 配置dayjs中文本地化
 dayjs.locale('zh-cn')
 
-import { API_ENDPOINTS } from '@/config/mirrors'
-
 // 配置API基础URL
 OpenAPI.BASE = API_ENDPOINTS.local
 
@@ -28,11 +29,14 @@ logger.info('前端应用开始初始化')
 logger.info(`API基础URL: ${OpenAPI.BASE}`)
 
 // 初始化镜像管理器（异步）
-mirrorManager.initialize().then(() => {
-  logger.info('镜像管理器初始化完成')
-}).catch((error) => {
-  logger.error('镜像管理器初始化失败:', error)
-})
+mirrorManager
+  .initialize()
+  .then(() => {
+    logger.info('镜像管理器初始化完成')
+  })
+  .catch(error => {
+    logger.error('镜像管理器初始化失败:', error)
+  })
 
 // 创建应用实例
 const app = createApp(App)
@@ -66,4 +70,7 @@ app.config.errorHandler = (err, instance, info) => {
 // 挂载应用
 app.mount('#app')
 
+// 注册WebSocket消息监听组件
+app.component('WebSocketMessageListener', WebSocketMessageListener)
+
 logger.info('前端应用初始化完成')
diff --git a/frontend/src/utils/scheduler-debug.ts b/frontend/src/utils/scheduler-debug.ts
new file mode 100644
index 0000000..1a1fa5b
--- /dev/null
+++ b/frontend/src/utils/scheduler-debug.ts
@@ -0,0 +1,77 @@
+// 调度中心调试工具
+export function debugScheduler() {
+  console.log('=== 调度中心调试信息 ===')
+  
+  // 检查WebSocket连接状态
+  const wsStorage = (window as any)[Symbol.for('GLOBAL_WEBSOCKET_PERSISTENT')]
+  if (wsStorage) {
+    console.log('WebSocket状态:', wsStorage.status.value)
+    console.log('WebSocket连接ID:', wsStorage.connectionId)
+    console.log('订阅数量:', wsStorage.subscriptions.value.size)
+    console.log('缓存标记数量:', wsStorage.cacheMarkers.value.size)
+    console.log('缓存消息数量:', wsStorage.cachedMessages.value.length)
+    
+    // 列出所有订阅
+    console.log('当前订阅:')
+    wsStorage.subscriptions.value.forEach((sub, id) => {
+      console.log(`  - ${id}: type=${sub.filter.type}, id=${sub.filter.id}`)
+    })
+  } else {
+    console.log('WebSocket存储未初始化')
+  }
+  
+  // 检查调度中心状态
+  const scheduler = document.querySelector('[data-scheduler-debug]')
+  if (scheduler) {
+    console.log('调度中心组件已挂载')
+  } else {
+    console.log('调度中心组件未找到')
+  }
+}
+
+// 测试WebSocket连接
+export function testWebSocketConnection() {
+  console.log('=== 测试WebSocket连接 ===')
+  
+  try {
+    const ws = new WebSocket('ws://localhost:36163/api/core/ws')
+    
+    ws.onopen = () => {
+      console.log('✅ WebSocket连接成功')
+      ws.send(JSON.stringify({
+        type: 'Signal',
+        data: { Connect: true, connectionId: 'test-connection' }
+      }))
+    }
+    
+    ws.onmessage = (event) => {
+      const message = JSON.parse(event.data)
+      console.log('📩 收到消息:', message)
+    }
+    
+    ws.onerror = (error) => {
+      console.log('❌ WebSocket错误:', error)
+    }
+    
+    ws.onclose = (event) => {
+      console.log('🔌 WebSocket连接关闭:', event.code, event.reason)
+    }
+    
+    // 5秒后关闭测试连接
+    setTimeout(() => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.close()
+        console.log('🔌 测试连接已关闭')
+      }
+    }, 5000)
+    
+  } catch (error) {
+    console.log('❌ 无法创建WebSocket连接:', error)
+  }
+}
+
+// 在控制台中暴露调试函数
+if (typeof window !== 'undefined') {
+  (window as any).debugScheduler = debugScheduler;
+  (window as any).testWebSocketConnection = testWebSocketConnection;
+}
\ No newline at end of file
diff --git a/frontend/src/views/GeneralUserEdit.vue b/frontend/src/views/GeneralUserEdit.vue
index 52105ce..786d539 100644
--- a/frontend/src/views/GeneralUserEdit.vue
+++ b/frontend/src/views/GeneralUserEdit.vue
@@ -16,7 +16,11 @@
       </a-breadcrumb>
     </div>
 
-    <a-space size="middle">
+     // 如果已有连接，先断开
+    if (generalSubscriptionId.value) {
+      unsubscribe(generalSubscriptionId.value)
+      generalSubscriptionId.value = null
+      generalWebsocketId.value = nulla-space size="middle">
       <a-button
         type="primary"
         ghost
@@ -390,6 +394,7 @@ const scriptName = ref('')
 
 // 通用配置相关
 const generalConfigLoading = ref(false)
+const generalSubscriptionId = ref<string | null>(null)
 const generalWebsocketId = ref<string | null>(null)
 const showGeneralConfigMask = ref(false)
 let generalConfigTimeout: number | null = null
@@ -599,12 +604,14 @@ const handleGeneralConfig = async () => {
       console.debug('订阅 websocketId:', wsId)
 
       // 订阅 websocket
-      subscribe(wsId, {
-        onMessage: (wsMessage: any) => {
+      const subscriptionId = subscribe(
+        { id: wsId },
+        (wsMessage: any) => {
           if (wsMessage.type === 'error') {
             console.error(`用户 ${formData.userName} 通用配置错误:`, wsMessage.data)
             message.error(`通用配置连接失败: ${wsMessage.data}`)
-            unsubscribe(wsId)
+            unsubscribe(subscriptionId)
+            generalSubscriptionId.value = null
             generalWebsocketId.value = null
             showGeneralConfigMask.value = false
             return
@@ -612,13 +619,15 @@ const handleGeneralConfig = async () => {
 
           if (wsMessage.data && wsMessage.data.Accomplish) {
             message.success(`用户 ${formData.userName} 的配置已完成`)
-            unsubscribe(wsId)
+            unsubscribe(subscriptionId)
+            generalSubscriptionId.value = null
             generalWebsocketId.value = null
             showGeneralConfigMask.value = false
           }
-        },
-      })
+        }
+      )
 
+      generalSubscriptionId.value = subscriptionId
       generalWebsocketId.value = wsId
       showGeneralConfigMask.value = true
       message.success(`已开始配置用户 ${formData.userName} 的通用设置`)
@@ -626,9 +635,9 @@ const handleGeneralConfig = async () => {
       // 设置 30 分钟超时自动断开
       generalConfigTimeout = window.setTimeout(
         () => {
-          if (generalWebsocketId.value) {
-            const id = generalWebsocketId.value
-            unsubscribe(id)
+          if (generalSubscriptionId.value) {
+            unsubscribe(generalSubscriptionId.value)
+            generalSubscriptionId.value = null
             generalWebsocketId.value = null
             showGeneralConfigMask.value = false
             message.info(`用户 ${formData.userName} 的配置会话已超时断开`)
@@ -658,7 +667,10 @@ const handleSaveGeneralConfig = async () => {
 
     const response = await Service.stopTaskApiDispatchStopPost({ taskId: websocketId })
     if (response && response.code === 200) {
-      unsubscribe(websocketId)
+      if (generalSubscriptionId.value) {
+        unsubscribe(generalSubscriptionId.value)
+        generalSubscriptionId.value = null
+      }
       generalWebsocketId.value = null
       showGeneralConfigMask.value = false
       if (generalConfigTimeout) {
@@ -720,8 +732,9 @@ const handleWebhookChange = () => {
 }
 
 const handleCancel = () => {
-  if (generalWebsocketId.value) {
-    unsubscribe(generalWebsocketId.value)
+  if (generalSubscriptionId.value) {
+    unsubscribe(generalSubscriptionId.value)
+    generalSubscriptionId.value = null
     generalWebsocketId.value = null
     showGeneralConfigMask.value = false
     if (generalConfigTimeout) {
diff --git a/frontend/src/views/MAAUserEdit.vue b/frontend/src/views/MAAUserEdit.vue
index 0aafa70..30c5665 100644
--- a/frontend/src/views/MAAUserEdit.vue
+++ b/frontend/src/views/MAAUserEdit.vue
@@ -166,6 +166,7 @@ const scriptName = ref('')
 
 // MAA配置相关
 const maaConfigLoading = ref(false)
+const maaSubscriptionId = ref<string | null>(null)
 const maaWebsocketId = ref<string | null>(null)
 const showMAAConfigMask = ref(false)
 let maaConfigTimeout: number | null = null
@@ -763,8 +764,9 @@ const handleMAAConfig = async () => {
     maaConfigLoading.value = true
 
     // 如果已有连接，先断开
-    if (maaWebsocketId.value) {
-      unsubscribe(maaWebsocketId.value)
+    if (maaSubscriptionId.value) {
+      unsubscribe(maaSubscriptionId.value)
+      maaSubscriptionId.value = null
       maaWebsocketId.value = null
       showMAAConfigMask.value = false
       if (maaConfigTimeout) {
@@ -783,15 +785,17 @@ const handleMAAConfig = async () => {
       const wsId = response.websocketId
 
       // 订阅 websocket
-      subscribe(wsId, {
-        onMessage: (wsMessage: any) => {
+      const subscriptionId = subscribe(
+        { id: wsId },
+        (wsMessage: any) => {
           if (wsMessage.type === 'error') {
             console.error(
               `用户 ${formData.Info?.Name || formData.userName} MAA配置错误:`,
               wsMessage.data
             )
             message.error(`MAA配置连接失败: ${wsMessage.data}`)
-            unsubscribe(wsId)
+            unsubscribe(subscriptionId)
+            maaSubscriptionId.value = null
             maaWebsocketId.value = null
             showMAAConfigMask.value = false
             return
@@ -799,13 +803,15 @@ const handleMAAConfig = async () => {
 
           if (wsMessage.data && wsMessage.data.Accomplish) {
             message.success(`用户 ${formData.Info?.Name || formData.userName} 的配置已完成`)
-            unsubscribe(wsId)
+            unsubscribe(subscriptionId)
+            maaSubscriptionId.value = null
             maaWebsocketId.value = null
             showMAAConfigMask.value = false
           }
-        },
-      })
+        }
+      )
 
+      maaSubscriptionId.value = subscriptionId
       maaWebsocketId.value = wsId
       showMAAConfigMask.value = true
       message.success(`已开始配置用户 ${formData.Info?.Name || formData.userName} 的MAA设置`)
@@ -813,9 +819,9 @@ const handleMAAConfig = async () => {
       // 设置 30 分钟超时自动断开
       maaConfigTimeout = window.setTimeout(
         () => {
-          if (maaWebsocketId.value) {
-            const id = maaWebsocketId.value
-            unsubscribe(id)
+          if (maaSubscriptionId.value) {
+            unsubscribe(maaSubscriptionId.value)
+            maaSubscriptionId.value = null
             maaWebsocketId.value = null
             showMAAConfigMask.value = false
             message.info(`用户 ${formData.Info?.Name || formData.userName} 的配置会话已超时断开`)
@@ -845,7 +851,10 @@ const handleSaveMAAConfig = async () => {
 
     const response = await Service.stopTaskApiDispatchStopPost({ taskId: websocketId })
     if (response && response.code === 200) {
-      unsubscribe(websocketId)
+      if (maaSubscriptionId.value) {
+        unsubscribe(maaSubscriptionId.value)
+        maaSubscriptionId.value = null
+      }
       maaWebsocketId.value = null
       showMAAConfigMask.value = false
       if (maaConfigTimeout) {
@@ -970,8 +979,9 @@ const addCustomStageRemain = (stageName: string) => {
 }
 
 const handleCancel = () => {
-  if (maaWebsocketId.value) {
-    unsubscribe(maaWebsocketId.value)
+  if (maaSubscriptionId.value) {
+    unsubscribe(maaSubscriptionId.value)
+    maaSubscriptionId.value = null
     maaWebsocketId.value = null
   }
   router.push('/scripts')
diff --git a/frontend/src/views/Scripts.vue b/frontend/src/views/Scripts.vue
index 7aaab51..d677de8 100644
--- a/frontend/src/views/Scripts.vue
+++ b/frontend/src/views/Scripts.vue
@@ -41,7 +41,7 @@
 
   <!-- 空状态 -->
   <!-- 增加 loadedOnce 条件，避免初始渲染时闪烁 -->
-  <div v-if="!loading && loadedOnce && scripts.length === 0" class="empty-state">
+  <div v-if="!addLoading && loadedOnce && scripts.length === 0" class="empty-state">
     <div class="empty-content">
       <div class="empty-image-container">
         <img src="@/assets/NoData.png" alt="暂无数据" class="empty-image" />
@@ -287,7 +287,7 @@ const showMAAConfigMask = ref(false) // 控制MAA配置遮罩层的显示
 const currentConfigScript = ref<Script | null>(null) // 当前正在配置的脚本
 
 // WebSocket连接管理
-const activeConnections = ref<Map<string, string>>(new Map()) // scriptId -> websocketId
+const activeConnections = ref<Map<string, { subscriptionId: string; websocketId: string }>>(new Map()) // scriptId -> { subscriptionId, websocketId }
 
 // 解析模板描述的markdown
 const parseMarkdown = (text: string) => {
@@ -548,8 +548,9 @@ const handleStartMAAConfig = async (script: Script) => {
       currentConfigScript.value = script
 
       // 订阅WebSocket消息
-      subscribe(response.websocketId, {
-        onMessage: (wsMessage: any) => {
+      const subscriptionId = subscribe(
+        { id: response.websocketId },
+        (wsMessage: any) => {
           // 处理错误消息
           if (wsMessage.type === 'error') {
             console.error(`脚本 ${script.name} 连接错误:`, wsMessage.data)
@@ -569,20 +570,23 @@ const handleStartMAAConfig = async (script: Script) => {
             showMAAConfigMask.value = false
             currentConfigScript.value = null
           }
-        },
-      })
+        }
+      )
 
-      // 记录连接和websocketId
-      activeConnections.value.set(script.id, response.websocketId)
+      // 记录连接和subscriptionId
+      activeConnections.value.set(script.id, {
+        subscriptionId,
+        websocketId: response.websocketId
+      })
       message.success(`已启动 ${script.name} 的MAA配置`)
 
       // 设置自动断开连接的定时器（30分钟后）
       setTimeout(
         () => {
           if (activeConnections.value.has(script.id)) {
-            const wsId = activeConnections.value.get(script.id)
-            if (wsId) {
-              unsubscribe(wsId)
+            const connection = activeConnections.value.get(script.id)
+            if (connection) {
+              unsubscribe(connection.subscriptionId)
             }
             activeConnections.value.delete(script.id)
             // 超时时隐藏遮罩
@@ -604,20 +608,20 @@ const handleStartMAAConfig = async (script: Script) => {
 
 const handleSaveMAAConfig = async (script: Script) => {
   try {
-    const websocketId = activeConnections.value.get(script.id)
-    if (!websocketId) {
+    const connection = activeConnections.value.get(script.id)
+    if (!connection) {
       message.error('未找到活动的配置会话')
       return
     }
 
     // 调用停止配置任务API
     const response = await Service.stopTaskApiDispatchStopPost({
-      taskId: websocketId,
+      taskId: connection.websocketId,
     })
 
     if (response.code === 200) {
       // 取消订阅
-      unsubscribe(websocketId)
+      unsubscribe(connection.subscriptionId)
       activeConnections.value.delete(script.id)
 
       // 隐藏遮罩
diff --git a/frontend/src/views/scheduler/SchedulerTaskControl.vue b/frontend/src/views/scheduler/SchedulerTaskControl.vue
index 2caaf49..da80b97 100644
--- a/frontend/src/views/scheduler/SchedulerTaskControl.vue
+++ b/frontend/src/views/scheduler/SchedulerTaskControl.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { PlayCircleOutlined, StopOutlined } from '@ant-design/icons-vue'
 import { TaskCreateIn } from '@/api/models/TaskCreateIn'
 import type { ComboBoxItem } from '@/api/models/ComboBoxItem'
@@ -88,11 +88,6 @@ const localSelectedMode = ref(props.selectedMode)
 // 模式选项
 const modeOptions = TASK_MODE_OPTIONS
 
-// 计算属性
-const canStart = computed(() => {
-  return !!(localSelectedTaskId.value && localSelectedMode.value) && !props.disabled
-})
-
 // 监听 props 变化，同步到本地状态
 watch(
   () => props.selectedTaskId,
diff --git a/frontend/src/views/scheduler/index.vue b/frontend/src/views/scheduler/index.vue
index 67ee33a..d8c4fb9 100644
--- a/frontend/src/views/scheduler/index.vue
+++ b/frontend/src/views/scheduler/index.vue
@@ -120,7 +120,6 @@
 import { onMounted, onUnmounted } from 'vue'
 import { LockOutlined } from '@ant-design/icons-vue'
 import {
-  getPowerActionText,
   POWER_ACTION_TEXT,
   TAB_STATUS_COLOR,
 } from './schedulerConstants'
@@ -137,8 +136,6 @@ const {
   taskOptionsLoading,
   taskOptions,
   powerAction,
-  powerCountdownVisible,
-  powerCountdownData,
   messageModalVisible,
   currentMessage,
   messageResponse,
@@ -160,7 +157,6 @@ const {
 
   // 电源操作
   onPowerActionChange,
-  cancelPowerAction,
 
   // 消息操作
   sendMessageResponse,
@@ -189,6 +185,13 @@ const onSchedulerTabEdit = (targetKey: string | MouseEvent, action: 'add' | 'rem
 onMounted(() => {
   initialize() // 初始化TaskManager订阅
   loadTaskOptions()
+  
+  // 开发环境下导入调试工具
+  if (process.env.NODE_ENV === 'development') {
+    import('@/utils/scheduler-debug').then(() => {
+      console.log('调度中心调试工具已加载，使用 debugScheduler() 和 testWebSocketConnection() 进行调试')
+    })
+  }
 })
 
 onUnmounted(() => {
diff --git a/frontend/src/views/scheduler/schedulerConstants.ts b/frontend/src/views/scheduler/schedulerConstants.ts
index f41eb82..543e318 100644
--- a/frontend/src/views/scheduler/schedulerConstants.ts
+++ b/frontend/src/views/scheduler/schedulerConstants.ts
@@ -78,6 +78,7 @@ export interface SchedulerTab {
   selectedTaskId: string | null
   selectedMode: TaskCreateIn.mode | null
   websocketId: string | null
+  subscriptionId?: string | null
   taskQueue: QueueItem[]
   userQueue: QueueItem[]
   logs: LogEntry[]
diff --git a/frontend/src/views/scheduler/useSchedulerLogic.ts b/frontend/src/views/scheduler/useSchedulerLogic.ts
index c2111e1..718a6ca 100644
--- a/frontend/src/views/scheduler/useSchedulerLogic.ts
+++ b/frontend/src/views/scheduler/useSchedulerLogic.ts
@@ -230,8 +230,8 @@ export function useSchedulerLogic() {
         if (idx === -1) return
 
         // 清理 WebSocket 订阅
-        if (tab.websocketId) {
-          ws.unsubscribe(tab.websocketId)
+        if (tab.subscriptionId) {
+          ws.unsubscribe(tab.subscriptionId)
         }
 
         // 清理日志引用
@@ -310,9 +310,13 @@ export function useSchedulerLogic() {
   const subscribeToTask = (tab: SchedulerTab) => {
     if (!tab.websocketId) return
 
-    ws.subscribe(tab.websocketId, {
-      onMessage: (message) => handleWebSocketMessage(tab, message)
-    })
+    const subscriptionId = ws.subscribe(
+      { id: tab.websocketId },
+      (message) => handleWebSocketMessage(tab, message)
+    )
+    
+    // 将订阅ID保存到tab中，以便后续取消订阅
+    tab.subscriptionId = subscriptionId
   }
 
   const handleWebSocketMessage = (tab: SchedulerTab, wsMessage: any) => {
@@ -548,8 +552,12 @@ export function useSchedulerLogic() {
         console.log('[Scheduler] 已强制更新schedulerTabs，当前tabs状态:', schedulerTabs.value)
       }
 
+      if (tab.subscriptionId) {
+        ws.unsubscribe(tab.subscriptionId)
+        tab.subscriptionId = null
+      }
+      
       if (tab.websocketId) {
-        ws.unsubscribe(tab.websocketId)
         tab.websocketId = null
       }
 
@@ -823,8 +831,8 @@ export function useSchedulerLogic() {
     // 不再清理或重置导出的处理函数，保持使用者注册的处理逻辑永久有效
 
     schedulerTabs.value.forEach(tab => {
-      if (tab.websocketId) {
-        ws.unsubscribe(tab.websocketId)
+      if (tab.subscriptionId) {
+        ws.unsubscribe(tab.subscriptionId)
       }
     })
     saveTabsToStorage(schedulerTabs.value)