前端优化调整

frontend/src/views/home/components/testPopup.vue

@@ -144,8 +144,8 @@ const nextStepText = ref('下一步') // 下一步按钮文本
 const dialogVisible = ref(false) // 弹窗显示状态
 const dialogTitle = ref('') // 弹窗标题
 const showComponent = ref(true) // 是否显示检测组件
-const preTestRef = ref(null) // 预检测组件引用
-const testRef = ref(null) // 正式检测组件引用
+const preTestRef = ref<{ initializeParameters: () => void } | null>(null) // 预检测组件引用
+const testRef = ref<{ handlePause: () => void } | null>(null) // 正式检测组件引用
 
 // ====================== 步骤控制相关变量 ======================
 const showSteps = ref(false) // 是否显示步骤条
@@ -163,7 +163,9 @@ const TestStatus = ref('waiting') // 正式检测执行状态
 const webMsgSend = ref() // webSocket推送的数据，用于组件间通信
 
 // ====================== WebSocket 相关 ======================
-const dataSocket = reactive({
+const dataSocket = reactive<{
+  socketServe: typeof socketClient.Instance | null
+}>({
   socketServe: socketClient.Instance, // WebSocket客户端实例
 })
 
@@ -241,18 +243,33 @@ const open = (title: string) => {
 
   // 如果预检测组件存在，初始化其参数
   if (preTestRef.value) {
-    preTestRef.value.initializeParameters()
+    preTestRef.value?.initializeParameters()
   }
 
-  // 创建WebSocket连接
-  socketClient.Instance.connect()
-  dataSocket.socketServe = socketClient.Instance
-
-  // 注册WebSocket消息回调处理
-  dataSocket.socketServe.registerCallBack('aaa', (res) => {
-    // 将接收到的数据传递给子组件
-    webMsgSend.value = res
-  })
+  // 改进：无论什么状态，都先清理再重新建立连接
+  try {
+    // 先强制清理现有连接
+    if (dataSocket.socketServe) {
+      if (dataSocket.socketServe.connected) {
+        dataSocket.socketServe.closeWs()
+      }
+      // 清理回调
+      dataSocket.socketServe.unRegisterCallBack?.('aaa')
+    }
+    
+    // 重新建立连接
+    socketClient.Instance.connect()
+    dataSocket.socketServe = socketClient.Instance
+    
+    // 注册新的回调
+    dataSocket.socketServe.registerCallBack('aaa', (res) => {
+      // 将接收到的数据传递给子组件
+      webMsgSend.value = res
+    })
+  } catch (error) {
+    console.error('WebSocket连接处理失败:', error)
+    ElMessage.error('连接建立失败，请重试')
+  }
 }
 
 // ====================== 开始检测处理 ======================
@@ -505,9 +522,23 @@ const sendResume = () => {
  * 关闭WebSocket连接
  */
 const closeWebSocket = () => {
-  // 检查连接状态，避免重复关闭WebSocket连接
-  if (dataSocket.socketServe.connected) {
-    dataSocket.socketServe.closeWs()
+  try {
+    if (dataSocket.socketServe) {
+      // 先清理回调
+      dataSocket.socketServe.unRegisterCallBack?.('aaa')
+      
+      // 再关闭连接
+      if (dataSocket.socketServe.connected) {
+        dataSocket.socketServe.closeWs()
+      }
+      
+      // 清空引用
+      dataSocket.socketServe = null
+    }
+  } catch (error) {
+    console.error('WebSocket关闭失败:', error)
+    // 强制清空引用，确保下次能正常重新连接
+    dataSocket.socketServe = null
   }
 }
 
@@ -531,13 +562,13 @@ const nextStep = () => {
 
     // 遍历检测项，找到下一个需要执行的步骤
     for (let selectTestItemsKey in checkStore.selectTestItems) {
-      if (tempStep == 0 && checkStore.selectTestItems[selectTestItemsKey]) {
+      if (tempStep == 0 && checkStore.selectTestItems[selectTestItemsKey as keyof typeof checkStore.selectTestItems]) {
         // 找到下一个要执行的检测项
         stepsActiveView.value = idx // 设置显示的组件
         stepsActive.value = idx // 设置业务逻辑步骤
         return
       }
-      if (checkStore.selectTestItems[selectTestItemsKey] && tempStep != 0) {
+      if (checkStore.selectTestItems[selectTestItemsKey as keyof typeof checkStore.selectTestItems] && tempStep != 0) {
         tempStep-- // 跳过已选择的检测项
       }
       idx++