From e50a6a481f628fdde2937fd1e3146a2c218156e8 Mon Sep 17 00:00:00 2001
From: lixiaolong <702156524@qq.com>
Date: Fri, 14 Aug 2026 12:23:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(task):=20=E4=BC=98=E5=8C=96=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E6=AD=A5=E9=AA=A4=E7=BB=84=E4=BB=B6=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=92=8C=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加当前步骤状态显示区域，展示步骤计数和名称
- 实现步骤激活状态的标准化计算逻辑
- 优化滚动到当前步骤的功能，使用watch监听属性变化
- 改进步骤列表的样式布局，设置固定宽度和响应式设计
- 统一两个相似组件的代码结构和功能实现
---
 src/views/inspection/runTask/task-steps.vue   | 71 +++++++++++++------
 .../runningTask/task-steps.vue                | 71 +++++++++++++------
 2 files changed, 100 insertions(+), 42 deletions(-)

diff --git a/src/views/inspection/runTask/task-steps.vue b/src/views/inspection/runTask/task-steps.vue
index f1d7ea3..6d7e595 100644
--- a/src/views/inspection/runTask/task-steps.vue
+++ b/src/views/inspection/runTask/task-steps.vue
@@ -1,8 +1,13 @@
 <template>
+    <div v-if="list.length" class="step-current">
+        <span class="step-current__count">{{ currentStepText }}</span>
+        <span class="step-current__name">{{ currentStep?.waypointName || '未命名点位' }}</span>
+    </div>
     <el-scrollbar ref="scrollbarRef" style="width: 100%;" class="step-scrollbar">
         <div class="step-wrapper" ref="stepWrapperRef">
-            <el-steps :active="activeStep" finish-status="success">
-                <el-step v-for="item in list" :key="value" :title="item.waypointName" :description="item.remark" />
+            <el-steps :active="normalizedActiveStep" finish-status="success" process-status="process">
+                <el-step v-for="(item, index) in list" :key="item.id || item.waypointId || item.detectItemId || index"
+                    :title="item.waypointName" :description="item.remark" />
             </el-steps>
         </div>
     </el-scrollbar>
@@ -22,6 +27,13 @@ const props = defineProps({
 const scrollbarRef = ref(null)
 const stepWrapperRef = ref(null)
 
+const currentStepIndex = computed(() => Math.min(Math.max(props.activeStep, 0), Math.max(props.list.length - 1, 0)))
+const currentStep = computed(() => props.list[currentStepIndex.value])
+const normalizedActiveStep = computed(() => Math.min(Math.max(props.activeStep, 0), props.list.length))
+const currentStepText = computed(() => props.activeStep >= props.list.length
+    ? `已完成 ${props.list.length}/${props.list.length}`
+    : `当前 ${currentStepIndex.value + 1}/${props.list.length}`)
+
 
 /**
  * 滚动到当前激活的步骤
@@ -37,52 +49,69 @@ const scrollToActiveStep = () => {
 
         // 获取所有 step 元素
         const steps = stepWrapperRef.value?.querySelectorAll('.el-step')
-        if (!steps || !steps[props.activeStep]) return
+        if (!steps || !steps[currentStepIndex.value]) return
 
         // 计算激活 step 的位置
-        const activeEl = steps[props.activeStep]
+        const activeEl = steps[currentStepIndex.value]
         const stepLeft = activeEl.offsetLeft
         const stepWidth = activeEl.offsetWidth
 
         // 让激活 step 居中显示
         const scrollLeft = stepLeft - viewWidth / 2 + stepWidth / 2
-        console.log('滚动位置：', scrollLeft)
-        // 使用 el-scrollbar 提供的方法滚动
         scrollbarRef.value.setScrollLeft(Math.max(0, scrollLeft))
     })
 }
 
-setTimeout(() => {
-    scrollToActiveStep()
-}, 1000)
+watch(
+    () => [props.activeStep, props.list.length],
+    scrollToActiveStep,
+    { immediate: true, flush: 'post' }
+)
 </script>
 
 <style lang="scss" scoped>
-.step-scrollbar {
+.step-current {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
     margin-top: 12px;
+    color: #303133;
+}
+
+.step-current__count {
+    flex: none;
+    color: #409eff;
+    font-weight: 600;
+}
+
+.step-current__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.step-scrollbar {
+    margin-top: 4px;
     white-space: nowrap;
 
     .step-wrapper {
         display: inline-block;
-        /* 让wrapper宽度由内容决定 */
-        width: 100%;
-        /* 至少和容器一样宽 */
+        width: max-content;
+        min-width: 100%;
         white-space: nowrap;
-        /* 防止 flex 项换行 */
-
         margin: 10px 0 20px 0;
 
         :deep(.el-steps) {
             flex-wrap: nowrap;
-            width: calc(100% - 150px);
+            width: max-content;
+            min-width: 100%;
 
             .el-step {
-                flex-shrink: 0 !important;
-                /* 禁止步骤项被压缩 */
-                min-width: 150px;
-                /* 每个步骤的最小宽度，按需调整 */
+                flex: 0 0 180px !important;
+                min-width: 180px;
             }
         }
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/intelligenceTest/runningTask/task-steps.vue b/src/views/intelligenceTest/runningTask/task-steps.vue
index 3aa7440..667bc41 100644
--- a/src/views/intelligenceTest/runningTask/task-steps.vue
+++ b/src/views/intelligenceTest/runningTask/task-steps.vue
@@ -1,8 +1,13 @@
 <template>
+    <div v-if="list.length" class="step-current">
+        <span class="step-current__count">{{ currentStepText }}</span>
+        <span class="step-current__name">{{ currentStep?.caseName || '未命名检测项' }}</span>
+    </div>
     <el-scrollbar ref="scrollbarRef" style="width: 100%;" class="step-scrollbar">
         <div class="step-wrapper" ref="stepWrapperRef">
-            <el-steps :active="activeStep" finish-status="success">
-                <el-step v-for="item in list" :key="value" :title="item.caseName" :description="item.remark" />
+            <el-steps :active="normalizedActiveStep" finish-status="success" process-status="process">
+                <el-step v-for="(item, index) in list" :key="item.id || item.testCaseId || item.detectItemId || index"
+                    :title="item.caseName" :description="item.remark" />
             </el-steps>
         </div>
     </el-scrollbar>
@@ -22,6 +27,13 @@ const props = defineProps({
 const scrollbarRef = ref(null)
 const stepWrapperRef = ref(null)
 
+const currentStepIndex = computed(() => Math.min(Math.max(props.activeStep, 0), Math.max(props.list.length - 1, 0)))
+const currentStep = computed(() => props.list[currentStepIndex.value])
+const normalizedActiveStep = computed(() => Math.min(Math.max(props.activeStep, 0), props.list.length))
+const currentStepText = computed(() => props.activeStep >= props.list.length
+    ? `已完成 ${props.list.length}/${props.list.length}`
+    : `当前 ${currentStepIndex.value + 1}/${props.list.length}`)
+
 
 /**
  * 滚动到当前激活的步骤
@@ -37,52 +49,69 @@ const scrollToActiveStep = () => {
 
         // 获取所有 step 元素
         const steps = stepWrapperRef.value?.querySelectorAll('.el-step')
-        if (!steps || !steps[props.activeStep]) return
+        if (!steps || !steps[currentStepIndex.value]) return
 
         // 计算激活 step 的位置
-        const activeEl = steps[props.activeStep]
+        const activeEl = steps[currentStepIndex.value]
         const stepLeft = activeEl.offsetLeft
         const stepWidth = activeEl.offsetWidth
 
         // 让激活 step 居中显示
         const scrollLeft = stepLeft - viewWidth / 2 + stepWidth / 2
-        console.log('滚动位置：', scrollLeft)
-        // 使用 el-scrollbar 提供的方法滚动
         scrollbarRef.value.setScrollLeft(Math.max(0, scrollLeft))
     })
 }
 
-setTimeout(() => {
-    scrollToActiveStep()
-}, 1000)
+watch(
+    () => [props.activeStep, props.list.length],
+    scrollToActiveStep,
+    { immediate: true, flush: 'post' }
+)
 </script>
 
 <style lang="scss" scoped>
-.step-scrollbar {
+.step-current {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
     margin-top: 12px;
+    color: #303133;
+}
+
+.step-current__count {
+    flex: none;
+    color: #409eff;
+    font-weight: 600;
+}
+
+.step-current__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.step-scrollbar {
+    margin-top: 4px;
     white-space: nowrap;
 
     .step-wrapper {
         display: inline-block;
-        /* 让wrapper宽度由内容决定 */
-        width: 100%;
-        /* 至少和容器一样宽 */
+        width: max-content;
+        min-width: 100%;
         white-space: nowrap;
-        /* 防止 flex 项换行 */
-
         margin: 10px 0 20px 0;
 
         :deep(.el-steps) {
             flex-wrap: nowrap;
-            width: calc(100% - 150px);
+            width: max-content;
+            min-width: 100%;
 
             .el-step {
-                flex-shrink: 0 !important;
-                /* 禁止步骤项被压缩 */
-                min-width: 150px;
-                /* 每个步骤的最小宽度，按需调整 */
+                flex: 0 0 180px !important;
+                min-width: 180px;
             }
         }
     }
 }
-</style>
\ No newline at end of file
+</style>