前端优化调整

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

@@ -175,7 +175,6 @@ import { ElMessage, ElMessageBox, type Action } from 'element-plus'
 import TestPopup from './testPopup.vue'
 import dataCheckPopup from './dataCheckSingleChannelSingleTestPopup.vue'
 import ProTable from '@/components/ProTable/index.vue'
-import socketClient from '@/utils/webSocketClient'
 import SelectTestItemPopup from '@/views/home/components/selectTestItemPopup.vue'
 import WriteTHPopup from '@/views/home/components/writeTHPopup.vue'
 import DeviceConnectionPopup from '@/views/home/components/deviceConnectionPopup.vue'
@@ -224,11 +223,6 @@ const shouldShowOption = (item: any) => {
   }
 }
 
-// WebSocket客户端配置，用于实时通信
-const dataSocket = reactive({
-  socketServe: socketClient.Instance,
-})
-
 tableHeight.value = window.innerHeight - 600
 const operationShow = ref(false)
 const documentStateShow = ref(false)
@@ -1023,21 +1017,12 @@ onMounted(async () => {
   tableHeaderInit(form.value.activeTabs)
 })
 
+// 通知dashboard组件刷新数据
 const handleQuitClicked = () => {
-  dataSocket.socketServe.closeWs()
   emit('batchGenerateClicked') // 触发事件
 }
 
 
-const handleSubmitClicked = async (resolve: (value: boolean) => void) => {
-  if (!dataSocket.socketServe.connected) {
-    ElMessage.error('webSocket连接中断！请退出重新进行系数校准')
-    resolve(false)
-  } else {
-    resolve(true)
-  }
-}
-
 defineExpose({ changeActiveTabs })
 </script>
 <style lang='scss' scoped>

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

@@ -1,50 +1,75 @@
 <template>
+  <!-- 检测流程弹窗容器 -->
   <el-dialog :title="dialogTitle" width="1550px" :model-value="dialogVisible" :before-close="beforeClose" @close="handleClose" height="1000px" draggable>
 
+    <!-- 步骤指示器容器 -->
     <div class="steps-container">
-      <el-steps v-if="showSteps" class="test-head-steps" simple :active="stepsActiveIndex" process-status="finish" finish-status="success">
+      <!-- 检测步骤进度条，根据选择的检测项动态显示步骤 -->
+      <!-- 注意：Element Plus的active属性从0开始，但业务逻辑从1开始，所以需要减1 -->
+      <el-steps v-if="showSteps" class="test-head-steps" simple :active="stepsActiveIndex - 1" process-status="finish" finish-status="success">
+        <!-- 预检测步骤 -->
         <el-step v-if="preTestSelected" title="预检测" :icon="stepsActive > 1 || stepsActiveIndex > stepsTotalNum-1? SuccessFilled :Edit" @click="handleStepClick(1)"/>
+        <!-- 守时检测步骤 -->
         <el-step v-if="timeTestSelected" title="守时检测" :icon="stepsActive > 2 || stepsActiveIndex > stepsTotalNum-1? SuccessFilled :UploadFilled"
                  @click="handleStepClick(2)"/>
+        <!-- 系数校准步骤 -->
         <el-step v-if="channelsTestSelected" title="系数校准" :icon="stepsActive > 3 || stepsActiveIndex > stepsTotalNum-1? SuccessFilled :Odometer"
                  @click="handleStepClick(3)"/>
+        <!-- 正式检测步骤 -->
         <el-step v-if="testSelected" title="正式检测" :icon="stepsActive > 4 || stepsActiveIndex > stepsTotalNum-1? SuccessFilled :Coin" @click="handleStepClick(4)"/>
+        <!-- 检测完成步骤 -->
         <el-step title="检测完成" :icon="stepsActiveIndex > stepsTotalNum-1 ? SuccessFilled :Key"/>
       </el-steps>
     </div>
 
+    <!-- 检测组件容器 - 根据当前步骤显示对应的检测组件 -->
+    <!-- 预检测组件 -->
     <preTest v-if="showComponent&&preTestSelected" v-show="preTestSelected && stepsActiveView==1" ref="preTestRef" v-model:testStatus="preTestStatus"
              :webMsgSend="webMsgSend"/>
+    <!-- 守时检测组件 -->
     <timeTest v-if="showComponent&&timeTestSelected" v-show="timeTestSelected && stepsActiveView==2" v-model:testStatus="timeTestStatus"/>
-    <!--     <channelsTest v-if="stepsActiveIndex === 3" v-model:testStatus="channelsTestStatus"></channelsTest>-->
+    <!-- 系数校准检测组件 -->
     <factorTest v-if="showComponent&&channelsTestSelected" v-show="channelsTestSelected && stepsActiveView==3" v-model:testStatus="channelsTestStatus"
                 :webMsgSend="webMsgSend"/>
+    <!-- 正式检测组件 -->
     <test v-if="showComponent&&testSelected" ref="testRef" v-show="testSelected && stepsActiveView==4" v-model:testStatus="TestStatus" :webMsgSend="webMsgSend"
           @update:webMsgSend="webMsgSend=$event" @sendPause="sendPause" @sendResume="sendResume" @sendReCheck="sendReCheck" @closeWebSocket="closeWebSocket"
           :stepsActive="stepsActive"/>
 
+    <!-- 弹窗底部操作按钮区域 -->
     <template #footer>
       <div>
+        <!-- 跳过按钮（已注释） -->
         <!--        <el-button type="primary" :icon="DArrowRight" v-if="stepsActiveIndex < stepsTotalNum && ActiveStatue != 'success'" @click="nextStep">跳过</el-button>-->
+        
+        <!-- 开始检测按钮 - 当前状态为等待时显示 -->
         <el-button type="primary" :icon="VideoPlay" v-if="ActiveStatue === 'waiting'" @click="handleSubmitFast">开始检测</el-button>
+        
+        <!-- 初始化中按钮 - 禁用状态，显示加载动画 -->
         <el-button type="primary" v-if="TestStatus === 'test_init'" disabled>
           <el-icon class="loading-box" style="color: #fff;margin-right: 8px;">
             <component :is="Refresh"/>
           </el-icon>
           初始化中
         </el-button>
+        
+        <!-- 停止检测按钮 - 检测进行中时显示 -->
         <el-button
             type="primary"
             v-if="TestStatus=='process'"
             :icon="VideoPause"
             @click="handlePause()">停止检测
         </el-button>
+        
+        <!-- 暂停中按钮 - 禁用状态，显示加载动画 -->
         <el-button type="warning" v-if="TestStatus === 'paused_ing'" disabled>
           <el-icon class="loading-box" style="color: #fff;margin-right: 8px;">
             <component :is="Refresh"/>
           </el-icon>
           暂停中
         </el-button>
+        
+        <!-- 继续检测按钮 - 检测已暂停时显示 -->
         <el-button
             type="warning"
             v-if="(TestStatus =='paused')"
@@ -53,11 +78,14 @@
         >继续检测
         </el-button>
 
+        <!-- 下一步/完成/错误状态按钮 -->
         <el-button :type="ActiveStatue==='success'?'primary':'danger'" :icon="Right"
                    v-if="nextStepText !== '下一步' && (ActiveStatue === 'success'||ActiveStatue==='error'||ActiveStatue==='test_init_fail'||ActiveStatue==='connect_timeout'||ActiveStatue==='pause_timeout')"
                    @click="nextStep">
           {{ nextStepText }}
         </el-button>
+        
+        <!-- 退出检测按钮 - 默认显示 -->
         <el-button type="primary" @click="handleQuit" v-else>
           退出检测
         </el-button>
@@ -69,6 +97,7 @@
 </template>
 
 <script lang="tsx" setup name="testPopup">
+// ====================== 导入依赖 ======================
 import {reactive, ref, watch} from 'vue';
 import {ElMessage, ElMessageBox} from 'element-plus'
 import {Coin, Edit, Key, Odometer, Refresh, Right, SuccessFilled, UploadFilled, VideoPause, VideoPlay} from '@element-plus/icons-vue'
@@ -82,54 +111,68 @@ import {pauseTest, resumeTest, startPreTest} from '@/api/socket/socket'
 import {useUserStore} from "@/stores/modules/user";
 import {JwtUtil} from "@/utils/jwtUtil";
 
+// ====================== 状态管理 ======================
 const userStore = useUserStore()
 const checkStore = useCheckStore();
-const nextStepText = ref('下一步');
-const dialogVisible = ref(false)
 
-const showSteps = ref(false)
+// ====================== 基础状态变量 ======================
-const stepsTotalNum = ref(-1);//步骤总数
+const nextStepText = ref('下一步'); // 下一步按钮文本
-const stepsActiveIndex = ref(1); //当前正在执行的步骤索引
+const dialogVisible = ref(false) // 弹窗显示状态
-const stepsActiveView = ref(-1); //当前正在执行的步骤在（预处理、守时校验、系数校准、正式检测）中的排序，仅用于页面显示
+const dialogTitle = ref('') // 弹窗标题
-const stepsActive = ref(-1); //当前正在执行的步骤在（预处理、守时校验、系数校准、正式检测）中的排序，实际记录步骤的状态，用于切换步骤
+const showComponent = ref(true) // 是否显示检测组件
-const ActiveStatue = ref('waiting');//当前步骤状态
+const preTestRef = ref(null) // 预检测组件引用
-const preTestStatus = ref('waiting');//预检测执行状态
+const testRef = ref(null) // 正式检测组件引用
-const timeTestStatus = ref('waiting');//守时校验执行状态
-const channelsTestStatus = ref('waiting');//通道系数校准执行状态
-const TestStatus = ref('waiting');//正式检测执行状态
-const webMsgSend = ref();//webSocket推送的数据
 
+// ====================== 步骤控制相关变量 ======================
+const showSteps = ref(false) // 是否显示步骤条
+const stepsTotalNum = ref(-1) // 步骤总数（选中的检测项数量 + 1个完成步骤）
+const stepsActiveIndex = ref(1) // 当前正在执行的步骤索引（用于UI显示高亮）
+const stepsActiveView = ref(-1) // 当前显示的检测组件步骤序号（控制v-show显示哪个组件）
+const stepsActive = ref(-1) // 当前实际执行的业务步骤序号（控制业务逻辑分支）
 
-const dialogTitle = ref('')
+// ====================== 状态管理变量 ======================
-const showComponent = ref(true)
+const ActiveStatue = ref('waiting') // 当前步骤的整体状态（waiting/start/process/success/error等）
-const preTestRef = ref(null)
+const preTestStatus = ref('waiting') // 预检测执行状态
-const testRef = ref(null)
+const timeTestStatus = ref('waiting') // 守时校验执行状态  
+const channelsTestStatus = ref('waiting') // 通道系数校准执行状态
+const TestStatus = ref('waiting') // 正式检测执行状态
+const webMsgSend = ref() // webSocket推送的数据，用于组件间通信
 
+// ====================== WebSocket 相关 ======================
 const dataSocket = reactive({
-  socketServe: socketClient.Instance,
+  socketServe: socketClient.Instance, // WebSocket客户端实例
 });
 
-// 勾选的检测内容
+// ====================== 检测项选择状态 ======================
-const preTestSelected = ref(false)
+// 根据用户勾选的检测内容动态显示对应的检测步骤和组件
-const timeTestSelected = ref(false)
+const preTestSelected = ref(false) // 是否选择预检测
-const channelsTestSelected = ref(false)
+const timeTestSelected = ref(false) // 是否选择守时检测
-const testSelected = ref(false)
+const channelsTestSelected = ref(false) // 是否选择系数校准
+const testSelected = ref(false) // 是否选择正式检测
 
+// ====================== 初始化操作 ======================
+/**
+ * 初始化操作 - 重置所有状态并根据用户选择的检测项设置初始步骤
+ */
 const initOperate = () => {
+  // 重置所有状态为等待状态
   ActiveStatue.value = 'waiting'
   preTestStatus.value = 'waiting'
   timeTestStatus.value = 'waiting'
   channelsTestStatus.value = 'waiting'
   TestStatus.value = 'waiting'
 
+  // 重置步骤和组件显示状态
   stepsActiveIndex.value = 1
   showComponent.value = true
-  // 初始化勾选的检测内容
+  
+  // 从store中获取用户勾选的检测内容
   preTestSelected.value = checkStore.selectTestItems.preTest
   timeTestSelected.value = checkStore.selectTestItems.timeTest
   channelsTestSelected.value = checkStore.selectTestItems.channelsTest
   testSelected.value = checkStore.selectTestItems.test
 
+  // 计算总步骤数（选中的检测项 + 1个完成步骤）
   let count = 0
   for (let key in checkStore.selectTestItems) {
     if (checkStore.selectTestItems[key]) {
@@ -138,72 +181,92 @@ const initOperate = () => {
   }
   stepsTotalNum.value = count + 1
 
+  // 根据选中的检测项，设置初始显示的步骤（按优先级：预检测 > 守时检测 > 系数校准 > 正式检测）
   if (preTestSelected.value) {
-    stepsActiveView.value = 1
+    stepsActiveView.value = 1 // 显示预检测组件
-    stepsActive.value = 1
+    stepsActive.value = 1 // 业务逻辑设为预检测
     return
   }
   if (timeTestSelected.value) {
-    stepsActiveView.value = 2
+    stepsActiveView.value = 2 // 显示守时检测组件
-    stepsActive.value = 2
+    stepsActive.value = 2 // 业务逻辑设为守时检测
     return
   }
   if (channelsTestSelected.value) {
-    stepsActiveView.value = 3
+    stepsActiveView.value = 3 // 显示系数校准组件
-    stepsActive.value = 3
+    stepsActive.value = 3 // 业务逻辑设为系数校准
     return
   }
   if (testSelected.value) {
-    stepsActiveView.value = 4
+    stepsActiveView.value = 4 // 显示正式检测组件
-    stepsActive.value = 4
+    stepsActive.value = 4 // 业务逻辑设为正式检测
     return
   }
 }
 
+// ====================== 弹窗开启方法 ======================
+/**
+ * 打开检测弹窗
+ * @param title 弹窗标题
+ */
 const open = (title: string) => {
-  showSteps.value = true
+  showSteps.value = true // 显示步骤条
-  initOperate()
+  initOperate() // 初始化所有状态和步骤
-  dialogTitle.value = title;
+  dialogTitle.value = title // 设置弹窗标题
-  dialogVisible.value = true;
+  dialogVisible.value = true // 显示弹窗
 
+  // 如果预检测组件存在，初始化其参数
   if (preTestRef.value) {
     preTestRef.value.initializeParameters();
   }
 
-  //开始创建webSocket客户端
+  // 创建WebSocket连接
   socketClient.Instance.connect();
   dataSocket.socketServe = socketClient.Instance;
+  
+  // 注册WebSocket消息回调处理
   dataSocket.socketServe.registerCallBack('aaa', (res) => {
     // 处理来自服务器的消息
     // console.log('Received message:', res);
-    // 根据需要在这里添加更多的处理逻辑
     if (res.code === 20000) {
+      // 处理错误码20000的情况
       //ElMessage.error(message.message)
       // loading.close()
     } else {
+      // 将接收到的数据传递给子组件
       webMsgSend.value = res
     }
   });
 }
 
+// ====================== 开始检测处理 ======================
+/**
+ * 快速开始检测 - 根据当前步骤执行对应的检测逻辑
+ */
 const handleSubmitFast = () => {
+  // 获取设备ID列表和计划ID
   let deviceIds = checkStore.devices.map((item) => item.deviceId)
   let planId = checkStore.plan.id
 
+  // 检查WebSocket连接状态
   if (!dataSocket.socketServe.connected) {
     ElMessage.error('webSocket连接中断！')
     return
   }
+  
   console.log("handleSubmit", stepsActive.value, TestStatus.value)
+  
+  // 根据当前激活的步骤执行对应的检测逻辑
   switch (stepsActive.value) {
-    case 1:
+    case 1: // 预检测步骤
       if (preTestStatus.value == 'waiting') {
         if (checkStore.selectTestItems.preTest) {
+          // 启动预检测
           startPreTest({
             userPageId:JwtUtil.getLoginName(),
             devIds: deviceIds,
             planId: planId,
-            operateType: checkStore.reCheckType == 1 ? '1' : '2',
+            operateType: checkStore.reCheckType == 1 ? '1' : '2', // 操作类型：1为预检测，2为正式检测
             userId: userStore.userInfo.id,
             temperature: checkStore.temperature,
             humidity: checkStore.humidity,
@@ -221,11 +284,12 @@ const handleSubmitFast = () => {
         }
       }
       break;
-    case 2:
+    case 2: // 守时检测步骤
       timeTestStatus.value = 'start'
       break;
-    case 3:
+    case 3: // 系数校准步骤
       if (channelsTestStatus.value == 'waiting') {
+        // 如果没有预检测且有系数校准，需要先进行初始化
         if (!checkStore.selectTestItems.preTest && checkStore.selectTestItems.channelsTest) {
           startPreTest({
             userPageId:JwtUtil.getLoginName(),
@@ -245,13 +309,13 @@ const handleSubmitFast = () => {
               channelsTestStatus.value = 'test_init_fail'
             }
           })
-          // 调用系数校准组件的handleSubmit方法
         }
         channelsTestStatus.value = 'start'
       }
       break;
-    case 4:
+    case 4: // 正式检测步骤
       if (TestStatus.value == "waiting") {
+        // 如果没有预检测和系数校准，直接进行正式检测需要先初始化
         if (!checkStore.selectTestItems.preTest && !checkStore.selectTestItems.channelsTest && checkStore.selectTestItems.test) {
           startPreTest({
             userPageId:JwtUtil.getLoginName(),
@@ -274,16 +338,9 @@ const handleSubmitFast = () => {
         }
         TestStatus.value = 'start'
       } else if (TestStatus.value == 'paused') {
-        // 发送继续指令
+        // 如果是暂停状态，发送继续指令
         sendResume()
       }
-      // else if (TestStatus.value == 'recheck') {
-      //   // 发送重新检测指令
-      //   sendReCheck()
-      // }
-      // else if (TestStatus.value == 'success') {
-      //   handleClose()
-      // }
       break;
     default:
       break;
@@ -291,118 +348,149 @@ const handleSubmitFast = () => {
 }
 
 
+// ====================== 事件定义 ======================
 const emit = defineEmits<{
-  (e: 'quitClicked'): void;
+  (e: 'quitClicked'): void; // 退出检测事件
 }>();
 
+// ====================== 状态监听器 ======================
+// 监听各个检测步骤的状态变化，并同步到总体状态
 watch(preTestStatus, function (newValue, oldValue) {
-  console.log(newValue, oldValue);
+  console.log('预检测状态变化：', newValue, oldValue);
-
+  ActiveStatue.value = newValue // 同步到总体状态
-  ActiveStatue.value = newValue
 })
+
 watch(timeTestStatus, function (newValue, oldValue) {
-  console.log(newValue, oldValue);
+  console.log('守时检测状态变化：', newValue, oldValue);
-
+  ActiveStatue.value = newValue // 同步到总体状态
-  ActiveStatue.value = newValue
 })
+
 watch(channelsTestStatus, function (newValue, oldValue) {
-  console.log(newValue, oldValue);
+  console.log('系数校准状态变化：', newValue, oldValue);
-
+  ActiveStatue.value = newValue // 同步到总体状态
-  ActiveStatue.value = newValue
 })
+
 watch(TestStatus, function (newValue, oldValue) {
-  console.log(newValue, oldValue);
+  console.log('正式检测状态变化：', newValue, oldValue);
-
+  ActiveStatue.value = newValue // 同步到总体状态
-  ActiveStatue.value = newValue
 })
 
+// 监听总体状态变化，处理步骤切换和错误状态
 watch(ActiveStatue, function (newValue, oldValue) {
+  console.log('总体状态变化：', newValue, oldValue);
+  
+  // 处理错误状态
   if (newValue === 'error') {
-    stepsActiveIndex.value = stepsTotalNum.value + 1
+    stepsActiveIndex.value = stepsTotalNum.value + 1 // 跳到最后一步
     nextStepText.value = '检测失败'
   }
+  
+  // 处理成功完成状态（已到达最后一个检测步骤）
   if (newValue === 'success' && stepsActiveIndex.value === stepsTotalNum.value - 1) {
-    stepsActiveIndex.value += 2
+    stepsActiveIndex.value += 2 // 跳到完成状态
     nextStepText.value = '检测完成'
   }
+  
+  // 处理初始化失败状态
   if (newValue === 'test_init_fail') {
-    stepsActiveIndex.value += 2
+    stepsActiveIndex.value += 2 // 跳过当前步骤
     nextStepText.value = '初始化失败'
   }
+  
+  // 处理连接超时状态
   if (newValue === 'connect_timeout') {
-    stepsActiveIndex.value += 2
+    stepsActiveIndex.value += 2 // 跳过当前步骤
     nextStepText.value = '连接超时'
   }
+  
+  // 处理暂停超时状态
   if (newValue === 'pause_timeout') {
-    stepsActiveIndex.value += 2
+    stepsActiveIndex.value += 2 // 跳过当前步骤
-    // nextStepText.value = '结束测试'
     nextStepText.value = '暂停超时'
   }
-  if (newValue === 'success' && stepsActiveIndex.value < stepsTotalNum.value - 1) {
-    nextStep() // 实现自动点击，进入下一个测试内容
-    //handleSubmit()
-    handleSubmitFast()
-  }
   
+  // 处理成功状态的自动步骤切换（还有后续步骤时）
+  if (newValue === 'success' && stepsActiveIndex.value < stepsTotalNum.value - 1) {
+    nextStep() // 自动进入下一个测试步骤
+    handleSubmitFast() // 自动开始下一步检测
+  }
 })
 
+// ====================== 退出和暂停恢复处理 ======================
+/**
+ * 处理退出检测
+ */
 const handleQuit = () => {
   console.log('handleQuit', ActiveStatue.value)
+  // 如果不是终止状态，需要确认退出
   if (ActiveStatue.value !== 'success' && ActiveStatue.value !== 'waiting' && ActiveStatue.value !== 'paused' && ActiveStatue.value !== 'test_init_fail' && ActiveStatue.value !== 'connect_timeout' && ActiveStatue.value !== 'pause_timeout') {
     beforeClose(() => {
+      // 确认退出回调（空实现）
     })
   } else {
-    handleClose()
+    handleClose() // 直接关闭
   }
 }
 
-
+/**
+ * 处理暂停检测
+ */
 const handlePause = () => {
-  sendPause()
+  sendPause() // 发送暂停指令
-  testRef.value?.handlePause()
+  testRef.value?.handlePause() // 调用正式检测组件的暂停方法
 }
+
+/**
+ * 发送暂停指令
+ */
 const sendPause = () => {
   console.log('发起暂停请求')
   
-  TestStatus.value = 'paused_ing'
+  TestStatus.value = 'paused_ing' // 设置为暂停中状态
-  pauseTest()
+  pauseTest() // 调用暂停API
-  // setTimeout(() => {
-  //   Object.assign(webMsgSend.value, {
-  //     requestId: 'preStopTest',
-  //     operateCode: 'stop'
-  //   })
-  // }, 5000)
 }
+
+/**
+ * 发送继续检测指令
+ */
 const sendResume = () => {
   console.log('发起继续检测请求')
 
+  // 调用继续检测API
   resumeTest({
     userPageId: "cdf",
     devIds: checkStore.devices.map((item) => item.deviceId),
     planId: checkStore.plan.id,
-    operateType: '2', //  0:'系数校验'，'1'为预检测、‘2‘为正式检测、'8'为不合格项复检
+    operateType: '2', // 操作类型：0-系数校验，1-预检测，2-正式检测，8-不合格项复检
     userId: userStore.userInfo.id,
     temperature: checkStore.temperature,
     humidity: checkStore.humidity
   })
+  
+  // 发送继续成功消息给子组件
   Object.assign(webMsgSend.value, {
     requestId: 'Resume_Success'
   })
 }
 
+/**
+ * 发送重新检测指令
+ */
 const sendReCheck = () => {
   console.log('发送重新检测指令')
+  
+  // 启动重新检测流程
   startPreTest({
     userPageId:JwtUtil.getLoginName(),
     devIds: checkStore.devices.map((item) => item.deviceId),
     planId: checkStore.plan.id,
-    operateType: '2', // 0:'系数校验'，'1'为预检测、‘2‘为正式检测、'8'为不合格项复检
+    operateType: '2', // 操作类型：0-系数校验，1-预检测，2-正式检测，8-不合格项复检
     userId: userStore.userInfo.id,
     temperature: checkStore.temperature,
     humidity: checkStore.humidity,
     testItemList: [checkStore.selectTestItems.preTest, checkStore.selectTestItems.channelsTest, checkStore.selectTestItems.test]
   }).then(res => {
-    console.log(res)
+    console.log('重新检测响应：', res)
     if (res.code === 'A001014') {
       ElMessageBox.alert('装置配置异常', '初始化失败', {
         confirmButtonText: '确定',
@@ -411,58 +499,67 @@ const sendReCheck = () => {
       TestStatus.value = 'test_init_fail'
     }
   })
-  TestStatus.value = 'start'
+  
+  TestStatus.value = 'start' // 设置为开始状态
 }
 
+/**
+ * 关闭WebSocket连接
+ */
 const closeWebSocket = () => {
   dataSocket.socketServe.closeWs()
 }
 
+// ====================== 步骤切换处理 ======================
+/**
+ * 进入下一步检测 - 复杂的步骤切换逻辑
+ */
 const nextStep = () => {
+  // 如果已到最后或遇到错误状态，直接关闭弹窗
   if (stepsActiveIndex.value == stepsTotalNum.value + 1 || ActiveStatue.value === 'error' || ActiveStatue.value === 'test_init_fail' || ActiveStatue.value === 'connect_timeout' || ActiveStatue.value === 'pause_timeout') {
     handleClose()
     return
   }
+  
+  // 如果不是错误状态，进行步骤切换
   if (ActiveStatue.value != 'error') {
-    ActiveStatue.value = 'waiting'
+    ActiveStatue.value = 'waiting' // 重置为等待状态
     let tempStep = stepsActiveIndex.value
     let idx = 1
-    stepsActiveIndex.value++
+    stepsActiveIndex.value++ // 步骤索引递增
+    
+    // 遍历检测项，找到下一个需要执行的步骤
     for (let selectTestItemsKey in checkStore.selectTestItems) {
       if (tempStep == 0 && checkStore.selectTestItems[selectTestItemsKey]) {
-        stepsActiveView.value = idx
+        // 找到下一个要执行的检测项
-        stepsActive.value = idx
+        stepsActiveView.value = idx // 设置显示的组件
+        stepsActive.value = idx // 设置业务逻辑步骤
         return
       }
       if (checkStore.selectTestItems[selectTestItemsKey] && tempStep != 0) {
-        tempStep--
+        tempStep-- // 跳过已选择的检测项
       }
       idx++
     }
   }
-
-  // if (stepsActiveIndex.value < stepsTotalNum.value && ActiveStatue.value != 'error') {
-  //   stepsActiveIndex.value++
-  //   if (!checkStore.selectTestItems.timeTest) { // 不具备守时检测
-  //     stepsActiveIndex.value++
-  //   }
-  //
-  //   ActiveStatue.value = 'waiting'
-  // } else if (stepsActiveIndex.value === stepsTotalNum.value || ActiveStatue.value === 'error') {
-  //   //emit('update:visible', false); // 关闭对话框
-  //   clearData()
-  //   dialogVisible.value = false;
-  // }
 }
 
+/**
+ * 处理步骤点击 - 允许点击回到之前已完成的步骤
+ * @param step 点击的步骤序号
+ */
 const handleStepClick = (step: number) => {
   if (step > stepsActive.value) {
-    return
+    return // 不能点击未完成的步骤
   } else {
-    stepsActiveView.value = step
+    stepsActiveView.value = step // 切换到点击的步骤显示
   }
 }
 
+// ====================== 数据清理和关闭处理 ======================
+/**
+ * 清理所有数据状态
+ */
 function clearData() {
   stepsTotalNum.value = -1
   stepsActiveIndex.value = 1
@@ -475,7 +572,12 @@ function clearData() {
   nextStepText.value = "下一步"
 }
 
+/**
+ * 关闭前确认处理
+ * @param done 确认关闭的回调函数
+ */
 const beforeClose = (done: () => void) => {
+  // 如果检测未完成且不是错误状态，需要用户确认
   if (stepsActiveIndex.value < stepsTotalNum.value && ActiveStatue.value != 'error') {
     ElMessageBox.confirm('检测未完成，是否退出当前检测流程?', '提示', {
           confirmButtonText: '确定',
@@ -483,25 +585,28 @@ const beforeClose = (done: () => void) => {
           type: 'warning',
         }
     ).then(() => {
-      handleClose()
+      handleClose() // 用户确认后关闭
     })
   } else {
-    handleClose()
+    handleClose() // 直接关闭
   }
 }
 
+/**
+ * 关闭弹窗并清理资源
+ */
 const handleClose = () => {
-  showSteps.value = false
+  showSteps.value = false // 隐藏步骤条
-  dataSocket.socketServe.closeWs()
+  dataSocket.socketServe.closeWs() // 关闭WebSocket连接
-  dialogVisible.value = false;
+  dialogVisible.value = false // 隐藏弹窗
-  clearData()
+  clearData() // 清理所有状态数据
-  showComponent.value = false;
+  showComponent.value = false // 隐藏检测组件
 
-  emit('quitClicked'); // 触发事件
+  emit('quitClicked') // 触发退出事件通知父组件
 }
 
-// 对外映射
+// ====================== 对外暴露的方法 ======================
-defineExpose({open})
+defineExpose({open}) // 只暴露open方法供父组件调用
 </script>
 
 <style scoped lang="scss">