vue2-client 1.15.14 → 1.15.15

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowTimeline.vue

@@ -1,89 +1,153 @@
 <template>
-  <div class="timeline" ref="timelineContent" style="white-space: nowrap; overflow-x: auto">
-    <a-steps
-      :current="currentStepId"
-      :initial="1">
-      <template #progressDot="{index}">
-        <span v-if="!changeAble" class="step-label in-steps"><i :class="['step-icon', getStepIconColor(index)]"></i></span>
-        <span v-else :key="displayStepId" :class="['step-icon-filled digital', getStepIconColor(index)]">
-          <a-icon v-if="index < currentStepId || state" type="check-circle" theme="filled" :class="['step-icon-filled icon', getStepIconColor(index)]" />
-          <span v-else :class="['step-icon-filled digital', getStepIconColor(index)]">{{ index }}</span>
-        </span>
-      </template>
-      <a-step
-        v-for="item in displaySteps"
-        :key="item.id"
-        class="step-item"
-        @click.stop="onStepClick(item.id)"
-      >
-        <template #title>
-          <div class="step-title-container">
-            <h3 v-if="item.name">{{ item.name }}</h3>
-            <!-- 判断节点特殊标识 -->
-            <div v-if="item.type === 'condition'" class="condition-indicators">
-              <a-tag color="purple" size="small" class="condition-tag">
-                <a-icon type="branches" /> 条件节点
-              </a-tag>
-              <a-tooltip title="此节点根据条件判断后续流程走向">
-                <a-icon type="question-circle" class="condition-help" />
-              </a-tooltip>
+  <div class="timeline-wrapper" ref="timelineContent" style="white-space: nowrap; overflow-x: auto">
+    <!-- 动态渲染时间轴段落 -->
+    <template v-for="(segment, segmentIndex) in getTimelineSegments()">
+
+      <!-- 主时间轴段落 -->
+      <div v-if="segment.type === 'main'" :key="'main-' + segmentIndex" class="timeline-section main-timeline">
+        <a-steps
+          :current="getCurrentStepInSection(segment.steps)"
+          :initial="1">
+          <template #progressDot="{index}">
+            <span v-if="!changeAble" class="step-label in-steps"><i :class="['step-icon', getStepIconColor(index, segment.steps)]"></i></span>
+            <span v-else :key="displayStepId" :class="['step-icon-filled digital', getStepIconColor(index, segment.steps)]">
+              <a-icon v-if="isStepCompleted(segment.steps[index - 1])" type="check-circle" theme="filled" :class="['step-icon-filled icon', getStepIconColor(index, segment.steps)]" />
+              <span v-else :class="['step-icon-filled digital', getStepIconColor(index, segment.steps)]">{{ getStepNumber(segmentIndex, index) }}</span>
+            </span>
+          </template>
+
+          <a-step
+            v-for="item in segment.steps"
+            :key="item.id"
+            class="step-item"
+            @click.stop="onStepClick(item.id)"
+          >
+            <template #title>
+              <div class="step-title-container">
+                <h3 v-if="item.name">{{ item.name }}</h3>
+                <!-- 判断节点特殊标识 -->
+                <div v-if="item.type === 'condition'" class="condition-indicators">
+                  <a-tag color="purple" size="small" class="condition-tag">
+                    <a-icon type="branches" /> 条件节点
+                  </a-tag>
+                  <a-tooltip title="此节点根据条件判断后续流程走向">
+                    <a-icon type="question-circle" class="condition-help" />
+                  </a-tooltip>
+                </div>
+              </div>
+            </template>
+            <template #description>
+              <div>
+                <p v-if="item.handler">负责人：
+                  <trim-text-tail :text="item.handler" :length="14"/>
+                </p>
+                <p v-if="item.date">填报时间：{{ formatDate(item.date, 'yyyy-MM-dd hh:mm') }}</p>
+                <p v-if="item.deadline" :class="{ 'text-red': item.id === currentStepId && isOverdue }">截止时间：{{ formatDate(item.deadline, 'yyyy-MM-dd hh:mm') }}</p>
+                <p v-if="item.note">备注：
+                  <trim-text-tail :text="item.note" :length="15"/>
+                </p>
+              </div>
+            </template>
+          </a-step>
+        </a-steps>
+      </div>
+
+      <!-- 并行分支段落 -->
+      <div v-else-if="segment.type === 'parallel'" :key="'parallel-' + segmentIndex" class="parallel-section">
+        <!-- 左侧连接线 -->
+        <div class="connection-line left-line"></div>
+
+        <!-- 并行分支容器 -->
+        <div class="parallel-branches-container">
+          <!-- 动态渲染并行分支 -->
+          <div
+            v-for="(branch, branchIndex) in segment.branches"
+            :key="'segment-' + segmentIndex + '-branch-' + branchIndex"
+            class="branch-row">
+
+            <!-- 分支时间轴 -->
+            <div :class="['branch-timeline', getBranchTimelineClass(branch)]">
+              <a-steps size="small" class="branch-steps">
+                <a-step
+                  v-for="step in branch"
+                  :key="'segment-' + segmentIndex + '-branch-' + branchIndex + '-step-' + step.id"
+                  :class="['branch-step', getBranchStepClass(step)]"
+                  @click.stop="onStepClick(step.id)">
+                  <template #title>
+                    <a-popover placement="top" trigger="hover" :mouseEnterDelay="0.3">
+                      <template #content>
+                        <div class="branch-step-popover">
+                          <div class="popover-item" v-if="step.handler">
+                            <span class="popover-label">负责人：</span>
+                            <span class="popover-value">{{ step.handler }}</span>
+                          </div>
+                          <div class="popover-item" v-if="step.date">
+                            <span class="popover-label">填报时间：</span>
+                            <span class="popover-value">{{ formatDate(step.date, 'yyyy-MM-dd hh:mm') }}</span>
+                          </div>
+                          <div class="popover-item" v-if="step.deadline">
+                            <span class="popover-label">截止时间：</span>
+                            <span class="popover-value">{{ formatDate(step.deadline, 'yyyy-MM-dd hh:mm') }}</span>
+                          </div>
+                          <div class="popover-item" v-if="step.note">
+                            <span class="popover-label">备注：</span>
+                            <span class="popover-value">{{ step.note }}</span>
+                          </div>
+                          <div class="popover-item no-data" v-if="!step.handler && !step.date && !step.deadline && !step.note">
+                            <span class="popover-value">暂无详细信息</span>
+                          </div>
+                        </div>
+                      </template>
+                      <template #title>
+                        <div class="popover-title">
+                          <a-icon type="info-circle" />
+                          {{ step.name }} - 详细信息
+                        </div>
+                      </template>
+                      <span class="branch-step-title">{{ step.name }}</span>
+                    </a-popover>
+                  </template>
+                  <template #description>
+                    <div class="branch-step-desc">
+                      <p v-if="step.handler">{{ step.handler }}</p>
+                      <p v-if="step.date">{{ formatDate(step.date, 'MM-dd hh:mm') }}</p>
+                    </div>
+                  </template>
+                </a-step>
+              </a-steps>
             </div>
-            <!-- 并行节点特殊标识 -->
-            <div v-else-if="isParallelStep(item)" class="parallel-indicators">
-              <a-tag color="blue" size="small" class="parallel-tag">
-                <a-icon type="fork" /> 并行节点
-              </a-tag>
-              <a-tooltip title="此节点将启动多个并行分支">
-                <a-icon type="question-circle" class="parallel-help" />
-              </a-tooltip>
-            </div>
-          </div>
-        </template>
-        <template #description>
-          <div>
-            <p v-if="item.handler">负责人：
-              <trim-text-tail :text="item.handler" :length="14"/>
-            </p>
-            <p v-if="item.date">填报时间：{{ formatDate(item.date, 'yyyy-MM-dd hh:mm') }}</p>
-            <p v-if="item.deadline" :class="{ 'text-red': item.id === currentStepId && isOverdue }">截止时间：{{ formatDate(item.deadline, 'yyyy-MM-dd hh:mm') }}</p>
-            <p v-if="item.note">备注：
-              <trim-text-tail :text="item.note" :length="15"/>
-            </p>
-          </div>
-        </template>
-      </a-step>
-
-      <!-- 当步骤被截断时显示省略状态 -->
-      <a-step
-        v-if="hasMoreSteps"
-        key="more-steps"
-        class="step-item more-steps-item">
-        <template #title>
-          <div class="more-steps-container">
-            <h3>后续步骤</h3>
-            <a-tag color="default" size="small" class="pending-tag">
-              <a-icon type="ellipsis" /> 待条件确定
-            </a-tag>
           </div>
-        </template>
-        <template #description>
-          <div class="more-steps-desc">
-            <p>根据上述条件判断结果，将继续执行相应的后续流程</p>
-            <p class="steps-count">剩余 {{ remainingStepsCount }} 个步骤</p>
-            <!-- <a-button
-              type="link"
-              size="small"
-              @click="toggleShowAllSteps"
-              class="toggle-btn">
-              <a-icon type="eye" /> {{ showAllSteps ? '隐藏' : '预览全部步骤' }}
-            </a-button> -->
-          </div>
-        </template>
-        <template #icon>
-          <a-icon type="more" style="color: #d9d9d9;" />
-        </template>
-      </a-step>
-    </a-steps>
+        </div>
+
+        <!-- 右侧连接线 -->
+        <div class="connection-line right-line"></div>
+      </div>
+
+    </template>
+
+    <!-- 当步骤被截断时显示省略状态 -->
+    <div class="more-steps-section" v-if="hasMoreSteps">
+      <a-steps :current="1" :initial="1">
+        <a-step
+          key="more-steps"
+          class="step-item more-steps-item">
+          <template #title>
+            <div class="more-steps-container">
+              <h3>后续步骤</h3>
+            </div>
+          </template>
+          <template #description>
+            <div class="more-steps-desc">
+              <p>根据上述条件判断结果，将继续执行相应的后续流程</p>
+              <p class="steps-count">剩余 {{ remainingStepsCount }} 个步骤</p>
+            </div>
+          </template>
+          <template #icon>
+            <a-icon type="more" style="color: #d9d9d9;" />
+          </template>
+        </a-step>
+      </a-steps>
+    </div>
   </div>
 </template>
 
@@ -135,7 +199,7 @@ export default {
     }
   },
   computed: {
-        // 控制显示的步骤：当当前节点在判断节点之前时，时间轴只展示到判断节点
+        // 控制显示的步骤：当判断节点未执行时只显示到判断节点，执行后显示包括并行分支的所有步骤
     displaySteps () {
       const steps = this.steps || []
 
@@ -154,12 +218,12 @@ export default {
 
       const firstConditionStep = steps[firstConditionStepIndex]
 
-      // 如果当前步骤在第一个判断节点之前，只显示到判断节点
+      // 如果当前步骤在第一个判断节点之前或等于判断节点，只显示到判断节点
       if (this.currentStepId <= firstConditionStep.id) {
         return steps.slice(0, firstConditionStepIndex + 1)
       }
 
-      // 否则显示所有步骤
+      // 如果判断节点已经执行，显示所有步骤（包括并行分支）
       return steps
     },
 
@@ -208,6 +272,138 @@ export default {
       this.$emit('activeStep', this.displayStepId)
     },
 
+    // 获取时间轴段落数据
+    getTimelineSegments () {
+      const steps = this.displaySteps
+      const segments = []
+      let currentIndex = 0
+
+            while (currentIndex < steps.length) {
+        // 收集连续的主流程步骤（包括并行分支入口节点）
+        const mainSteps = []
+        while (currentIndex < steps.length && !this.isParallelStep(steps[currentIndex])) {
+          mainSteps.push(steps[currentIndex])
+
+          // 如果当前步骤是并行分支入口，处理完后跳出循环准备处理并行分支
+          if (this.isParallelBranchEntry(steps[currentIndex])) {
+            currentIndex++
+            break
+          }
+          currentIndex++
+        }
+
+        if (mainSteps.length > 0) {
+          segments.push({
+            type: 'main',
+            steps: mainSteps
+          })
+        }
+
+        // 检查是否有并行分支需要处理
+        if (currentIndex > 0 && this.isParallelBranchEntry(steps[currentIndex - 1])) {
+          // 获取这个并行分支的所有步骤
+          const branchIndex = steps[currentIndex - 1].properties.branchIndex
+          const parallelSteps = this.getParallelStepsByBranchIndex(steps, branchIndex)
+
+          if (parallelSteps.length > 0) {
+            // 按branchPath分组
+            const branches = this.groupParallelSteps(parallelSteps)
+            segments.push({
+              type: 'parallel',
+              branches: branches
+            })
+
+            // 跳过已处理的并行步骤
+            currentIndex = this.skipProcessedParallelSteps(steps, currentIndex, parallelSteps)
+          }
+        }
+      }
+
+      return segments
+    },
+
+    // 根据branchIndex获取并行步骤
+    getParallelStepsByBranchIndex (steps, branchIndex) {
+      return steps.filter(step =>
+        step.properties &&
+        step.properties.branchPath &&
+        step.properties.branchPath.includes(`parallel_${branchIndex}_`)
+      )
+    },
+
+    // 将并行步骤按branchPath分组
+    groupParallelSteps (parallelSteps) {
+      const branches = {}
+      parallelSteps.forEach(step => {
+        const branchPath = step.properties.branchPath
+        if (!branches[branchPath]) {
+          branches[branchPath] = []
+        }
+        branches[branchPath].push(step)
+      })
+
+      // 对每个分支内的步骤按id排序
+      Object.keys(branches).forEach(branchPath => {
+        branches[branchPath].sort((a, b) => a.id - b.id)
+      })
+
+      return Object.values(branches)
+    },
+
+    // 跳过已处理的并行步骤
+    skipProcessedParallelSteps (steps, currentIndex, processedSteps) {
+      const processedIds = new Set(processedSteps.map(step => step.id))
+      while (currentIndex < steps.length && processedIds.has(steps[currentIndex].id)) {
+        currentIndex++
+      }
+      return currentIndex
+    },
+
+    // 判断是否为并行分支入口
+    isParallelBranchEntry (step) {
+      return step.properties &&
+             step.properties.branchType === 'parallelBranch'
+    },
+
+    // 判断是否为分支汇合节点
+    isBranchExit (step) {
+      return step.properties &&
+             step.properties.flowRole === 'branchExit'
+    },
+
+    // 获取在某个section中的当前步骤索引
+    getCurrentStepInSection (sectionSteps) {
+      if (!sectionSteps || sectionSteps.length === 0) return 0
+
+      const currentStepIndex = sectionSteps.findIndex(step => step.id === this.currentStepId)
+      return currentStepIndex >= 0 ? currentStepIndex + 1 : 0
+    },
+
+        // 获取步骤编号
+    getStepNumber (segmentIndex, stepIndex) {
+      const segments = this.getTimelineSegments()
+      let stepNumber = 0
+
+      // 计算前面所有段落的步骤数
+      for (let i = 0; i < segmentIndex; i++) {
+        const segment = segments[i]
+        if (segment.type === 'main') {
+          stepNumber += segment.steps.length
+        } else if (segment.type === 'parallel') {
+          // 并行分支计算总步骤数
+          stepNumber += segment.branches.reduce((total, branch) => total + branch.length, 0)
+        }
+      }
+
+      return stepNumber + stepIndex
+    },
+
+    // 判断步骤是否已完成
+    isStepCompleted (step) {
+      if (!step) return false
+      return step.id < this.currentStepId || this.state
+    },
+
     // 判断id是否为流程中最后一个
     isLastStep (stepId) {
       return stepId >= this.steps.length
@@ -215,14 +411,16 @@ export default {
 
     // 判断是否为并行步骤
     isParallelStep (step) {
-      if (!step.properties || !step.properties.actions) return false
-      return step.properties.actions.some(action => action.type === 'parallelBranch')
+      return step.properties &&
+             step.properties.branchPath &&
+             step.properties.branchPath.includes('parallel_')
     },
 
     // 动态展示时间线节点颜色
-    getStepIconColor (index) {
-      // 根据index找到stepId
-      const stepId = this.displaySteps[index - 1]?.id
+    getStepIconColor (index, sectionSteps) {
+      if (!sectionSteps || !sectionSteps[index - 1]) return 'gray'
+
+      const stepId = sectionSteps[index - 1].id
 
       if (this.changeAble && stepId === this.displayStepId) {
         return 'yellow'
@@ -237,26 +435,66 @@ export default {
       }
       return 'gray'
     },
+
+    // 获取分支步骤的CSS类
+    getBranchStepClass (step) {
+      if (!step) return 'branch-step-gray'
+
+      // 如果在可编辑状态下且是当前显示的步骤
+      if (this.changeAble && step.id === this.displayStepId) {
+        return 'branch-step-yellow'
+      }
+
+      // 根据 status 判断颜色
+      switch (step.status) {
+        case 0: // 未处理
+          return 'branch-step-gray'
+        case 1: // 正在处理
+          // 检查是否逾期
+          if (step.deadline && !this.state && this.formatDate(new Date(), 'yyyy-MM-dd hh:mm') > step.deadline) {
+            return 'branch-step-red'
+          }
+          return 'branch-step-blue'
+        case 2: // 已处理
+          return 'branch-step-green'
+        default:
+          return 'branch-step-gray'
+      }
+    },
+
+    // 获取分支时间轴的CSS类（根据分支中的步骤状态）
+    getBranchTimelineClass (branch) {
+      if (!branch || branch.length === 0) return 'branch-timeline-gray'
+
+      // 检查分支中所有步骤的状态
+      const hasCompleted = branch.some(step => step.status === 2) // 有已完成的
+      const hasProcessing = branch.some(step => step.status === 1) // 有正在处理的
+      const allPending = branch.every(step => step.status === 0 || step.status === undefined) // 全部未处理
+
+      // 优先级：正在处理 > 已完成 > 未处理
+      if (hasProcessing) {
+        return 'branch-timeline-blue' // 正在进行
+      } else if (hasCompleted) {
+        return 'branch-timeline-green' // 已完成
+      } else if (allPending) {
+        return 'branch-timeline-gray' // 未抵达
+      } else {
+        return 'branch-timeline-gray' // 默认
+      }
+    },
+
     onStepClick (stepId) {
-      console.log('stepId', stepId)
       if (!this.changeAble || stepId === this.displayStepId) {
         return
       }
-      if (stepId > this.currentStepId) {
+      const curStep = this.steps.find(item => item.id === stepId)
+      if (stepId > this.currentStepId && curStep.status !== 1 && curStep.status !== 2) {
         return this.$message.warn('请先完成当前步骤')
       }
       this.$emit('activeStep', stepId)
       this.displayStepId = stepId
     },
 
-    // 切换显示所有步骤
-    // toggleShowAllSteps () {
-    //   this.showAllSteps = !this.showAllSteps
-    //   if (this.showAllSteps) {
-    //     this.$message.info('已展示全部步骤，部分步骤可能根据条件判断而不执行')
-    //   }
-    // },
-
     formatDate,
   },
   watch: {
@@ -268,64 +506,285 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.timeline {
-  /deep/ .ant-steps-dot {
-    margin-bottom: 6px;
-    .ant-steps-item-tail {
-      top: 7px;
-      margin-left: 106px;
-      width: calc(100% - 23px);
+.timeline-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+
+  .timeline-section {
+    flex-shrink: 0;
+
+    /deep/ .ant-steps-dot {
+      margin-bottom: 6px;
+      .ant-steps-item-tail {
+        top: 7px;
+        margin-left: 106px;
+        width: calc(100% - 23px);
+      }
+      .ant-steps-item-icon {
+        margin-left: 90px;
+        width: 8px;
+        height: 8px;
+        line-height: 8px;
+      }
+      .ant-steps-item-content {
+        min-width: 195px;
+        margin-top: 24px;
+        .ant-steps-item-description {
+          text-align: left;
+          background: #fff;
+          border-radius: 4px;
+          padding: 12px;
+          position: relative;
+
+          p {
+            position: relative;
+            padding: 8px 0;
+            margin: 0;
+            font-size: 13px;
+            color: #595959;
+            line-height: 1.5;
+            white-space: nowrap;
+            overflow: visible;
+
+            &:first-child {
+              border-top: 1px dotted #e8e8e8;
+            }
+
+            &:not(:last-child) {
+              border-bottom: 1px dashed #f0f0f0;
+            }
+
+            &:last-child {
+              padding-bottom: 0;
+            }
+          }
+        }
+      }
+      &.ant-steps {
+        padding-top: 8px;
+      }
     }
-    .ant-steps-item-icon {
-      margin-left: 90px;
-      width: 8px;
-      height: 8px;
-      line-height: 8px;
+
+    /deep/ .ant-steps-item-title {
+      font-size: 14px;
+      h3 {
+        margin-bottom: 0;
+      }
     }
-    .ant-steps-item-content {
-      min-width: 195px;
-      margin-top: 24px;
-      .ant-steps-item-description {
-        text-align: left;
-        background: #fff;
-        border-radius: 4px;
-        padding: 12px;
+  }
+
+    .parallel-section {
+    display: flex;
+    align-items: flex-start;
+    position: relative;
+
+    .connection-line {
+      width: 2rem;
+      height: 0px;
+      // background: #f0f0f0;
+      flex-shrink: 0;
+      margin-top: 1rem;
+
+      &.left-line {
+        margin-right: 0;
         position: relative;
 
-        p {
-          position: relative;
-          padding: 8px 0;
-          margin: 0;
-          font-size: 13px;
-          color: #595959;
-          line-height: 1.5;
-          white-space: nowrap;
-          overflow: visible;
-
-          &:first-child {
-            border-top: 1px dotted #e8e8e8;
+        &::before {
+          content: '';
+          position: absolute;
+          left: -4.8rem;
+          top: 0;
+          width: 6rem;
+          height: 2.5px;
+          background: #f0f0f0;
+        }
+      }
+
+      &.right-line {
+        margin-left: 0;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          right: -4.5rem;
+          top: 0;
+          width: 6rem;
+          height: 2.5px;
+          background: #f0f0f0;
+        }
+      }
+    }
+
+    .parallel-branches-container {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 16px 20px;
+      background: #fafafa;
+      border: 1px solid #e0e0e0;
+      border-radius: 8px;
+      min-width: 400px;
+      width: fit-content;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+      .branch-row {
+        .branch-timeline {
+          padding: 12px 16px;
+          background: #fff;
+          border-radius: 6px;
+          border-left: 4px solid #d9d9d9;
+          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+
+          .branch-steps {
+            /deep/ .ant-steps-dot {
+              margin-bottom: 6px;
+
+              .ant-steps-item-tail {
+                top: 7px;
+                margin-left: 70px;
+                width: calc(100% - 16px);
+              }
+
+              .ant-steps-item-icon {
+                margin-left: 60px;
+                width: 8px;
+                height: 8px;
+                line-height: 8px;
+              }
+
+              .ant-steps-item-content {
+                min-width: 160px;
+                margin-top: 24px;
+
+                .ant-steps-item-description {
+                  text-align: left;
+                  background: #fff;
+                  border-radius: 4px;
+                  padding: 10px 12px;
+                  position: relative;
+                  border: 1px solid #f0f0f0;
+
+                  p {
+                    position: relative;
+                    padding: 4px 0;
+                    margin: 0;
+                    font-size: 12px;
+                    color: #666;
+                    line-height: 1.4;
+                    white-space: nowrap;
+                    overflow: visible;
+
+                    &:first-child {
+                      border-top: 1px dotted #e8e8e8;
+                    }
+
+                    &:not(:last-child) {
+                      border-bottom: 1px dashed #f0f0f0;
+                    }
+
+                    &:last-child {
+                      padding-bottom: 0;
+                    }
+                  }
+                }
+              }
+            }
+
+            /deep/ .ant-steps-item-title {
+              font-size: 14px;
+              line-height: 22px;
+              margin-bottom: 6px;
+              font-weight: 500;
+            }
+          }
+
+          .branch-step-title {
+            font-size: 14px;
+            font-weight: 500;
+            color: #262626;
+            cursor: pointer;
+
+            &:hover {
+              color: #1890ff;
+            }
+          }
+
+          .branch-step-desc {
+            p {
+              margin: 0;
+              padding: 4px 0;
+              font-size: 12px;
+              color: #666;
+              border: none !important;
+            }
           }
 
-          &:not(:last-child) {
-            border-bottom: 1px dashed #f0f0f0;
+          // 移除固定的分支颜色，改为动态状态颜色
+          // &:nth-child(1) {
+          //   border-left-color: #52c41a;
+          // }
+
+          // &:nth-child(2) {
+          //   border-left-color: #1890ff;
+          // }
+
+          // &:nth-child(3) {
+          //   border-left-color: #722ed1;
+          // }
+
+          &:hover {
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+            transform: translateY(-2px);
+            transition: all 0.3s ease;
           }
 
-          &:last-child {
-            padding-bottom: 0;
+          /deep/ .ant-steps-icon {
+            color: #f0f0f0;
+          }
+
+          // 分支步骤状态颜色
+          /deep/ .branch-step-gray .ant-steps-item-icon {
+            background-color: #d9d9d9 !important;
+            border-color: #d9d9d9 !important;
+          }
+
+          /deep/ .branch-step-blue .ant-steps-item-icon {
+            background-color: #1890ff !important;
+            border-color: #1890ff !important;
+          }
+
+          /deep/ .branch-step-green .ant-steps-item-icon {
+            background-color: #52c41a !important;
+            border-color: #52c41a !important;
+          }
+
+          /deep/ .branch-step-red .ant-steps-item-icon {
+            background-color: #ff4d4f !important;
+            border-color: #ff4d4f !important;
+          }
+
+          /deep/ .branch-step-yellow .ant-steps-item-icon {
+            background-color: #faad14 !important;
+            border-color: #faad14 !important;
+          }
+
+          // 分支时间轴左侧边框颜色
+          &.branch-timeline-gray {
+            border-left-color: #d9d9d9;
+          }
+
+          &.branch-timeline-green {
+            border-left-color: #52c41a;
+          }
+
+          &.branch-timeline-blue {
+            border-left-color: #1890ff;
           }
         }
       }
     }
-    &.ant-steps {
-      padding-top: 8px;
-    }
-  }
-
-  /deep/ .ant-steps-item-title {
-    font-size: 14px;
-    h3 {
-      margin-bottom: 0;
-    }
   }
 
   @red: rgb(255, 77, 79);
@@ -394,20 +853,17 @@ export default {
 
   // 新增样式：步骤标题容器
   .step-title-container {
-    .condition-indicators,
-    .parallel-indicators {
+    .condition-indicators {
       margin-top: 8px;
       display: flex;
       align-items: center;
       gap: 8px;
 
-      .condition-tag,
-      .parallel-tag {
+      .condition-tag {
         margin: 0;
       }
 
-      .condition-help,
-      .parallel-help {
+      .condition-help {
         color: #999;
         cursor: pointer;
         &:hover {
@@ -447,47 +903,80 @@ export default {
    }
 
    // 省略步骤样式
-   .more-steps-item {
-     opacity: 0.7;
+    .more-steps-section {
+      flex-shrink: 0;
+      // margin-top: 24px;
+
+       .more-steps-item {
+         opacity: 0.7;
+
+         .more-steps-container {
+           .pending-tag {
+             margin-top: 8px;
+             margin-left: 0;
+           }
+         }
+
+         .more-steps-desc {
+           p {
+            //  font-style: italic;
+             color: #999 !important;
 
-     .more-steps-container {
-       .pending-tag {
-         margin-top: 8px;
-         margin-left: 0;
+             &.steps-count {
+               font-weight: bold;
+               color: #666 !important;
+             }
+           }
+         }
        }
      }
+}
 
-     .more-steps-desc {
-       p {
-        //  font-style: italic;
-         color: #999 !important;
+// 分支步骤 Popover 样式
+/deep/ .ant-popover {
+  .popover-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 600;
+    color: #1890ff;
+
+    .anticon {
+      font-size: 14px;
+    }
+  }
 
-         &.steps-count {
-           font-weight: bold;
-           color: #666 !important;
-         }
-       }
+  .branch-step-popover {
+    min-width: 200px;
 
-       .toggle-btn {
-         margin-top: 8px;
-         padding: 0;
-         height: auto;
-         color: #1890ff;
+    .popover-item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 8px;
 
-         &:hover {
-           color: #40a9ff;
-         }
-       }
-     }
+      &:last-child {
+        margin-bottom: 0;
+      }
 
-     &:hover {
-       opacity: 1;
+      &.no-data {
+        justify-content: center;
+        font-style: italic;
+        color: #999;
+      }
 
-       .ant-steps-item-description {
-         background: #f9f9f9;
-         border: 1px dashed #d9d9d9;
-       }
-     }
-   }
- }
- </style>
+      .popover-label {
+        font-weight: 600;
+        color: #262626;
+        min-width: 70px;
+        flex-shrink: 0;
+      }
+
+      .popover-value {
+        color: #595959;
+        word-break: break-all;
+        flex: 1;
+      }
+    }
+  }
+}
+</style>