vue2-client 1.17.21 → 1.17.22

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

@@ -1,1014 +1,1014 @@
-<template>
-  <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)"
-            @contextmenu.native="handleStepContextMenu($event, item)"
-          >
-            <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">
-          <!-- 并行节点标题 -->
-          <a-tag color="cyan" size="small" class="parallel-node-title">
-            <a-icon type="apartment" /> 并行节点
-          </a-tag>
-          <!-- 动态渲染并行分支 -->
-          <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)"
-                  @contextmenu.native="handleStepContextMenu($event, step)">
-                  <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>
-        </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>
-
-    <!-- 右键菜单 -->
-    <a-dropdown
-      :visible="contextMenuVisible"
-      :trigger="[]"
-      @visibleChange="val => !val && closeContextMenu()"
-    >
-      <div
-        v-show="contextMenuVisible"
-        :style="{
-          position: 'fixed',
-          left: contextMenuX + 'px',
-          top: contextMenuY + 'px',
-          width: '1px',
-          height: '1px'
-        }"
-      ></div>
-      <a-menu slot="overlay" @click="closeContextMenu">
-        <a-menu-item @click="reloadFromStep">
-          <a-icon type="reload" />
-          从此节点重新加载
-        </a-menu-item>
-      </a-menu>
-    </a-dropdown>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { formatDate } from '@vue2-client/utils/util'
-import TrimTextTail from '@vue2-client/pages/WorkflowDetail/WorkflowPageDetail/TrimTextTail'
-
-export default {
-  components: { TrimTextTail },
-  name: 'WorkFlowTimeline',
-  props: {
-    workflowId: {
-      type: [String, Number],
-      required: true
-    },
-    currentStepId: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    activeStepId: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    state: {
-      type: [Boolean, Number],
-      required: false,
-      default: false
-    },
-    steps: {
-      type: Array,
-      required: true
-    },
-    changeAble: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  data () {
-    return {
-      // 当前显示的步骤 id
-      displayStepId: 1,
-      // 当前任务是否逾期
-      isOverdue: false,
-      // 是否显示所有步骤（包括条件后的步骤）
-      showAllSteps: false,
-      // 右键菜单相关状态
-      contextMenuVisible: false,
-      contextMenuX: 0,
-      contextMenuY: 0,
-      selectedStepForMenu: null
-    }
-  },
-  computed: {
-    ...mapGetters('account', ['isDebugUser']),
-        // 控制显示的步骤：当判断节点未执行时只显示到判断节点，执行后显示包括并行分支的所有步骤
-    displaySteps () {
-      const steps = this.steps || []
-
-      // 如果用户选择显示所有步骤，直接返回
-      if (this.showAllSteps) {
-        return steps
-      }
-
-      // 找到第一个判断节点
-      const firstConditionStepIndex = steps.findIndex(step => step.type === 'condition')
-
-      // 如果没有找到判断节点，显示所有步骤
-      if (firstConditionStepIndex === -1) {
-        return steps
-      }
-
-      const firstConditionStep = steps[firstConditionStepIndex]
-
-      // 如果当前步骤在第一个判断节点之前或等于判断节点，只显示到判断节点
-      if (this.currentStepId <= firstConditionStep.id) {
-        return steps.slice(0, firstConditionStepIndex + 1)
-      }
-
-      // 如果判断节点已经执行，显示所有步骤（包括并行分支）
-      return steps
-    },
-
-        // 是否有更多步骤（被条件截断）
-    hasMoreSteps () {
-      // 如果已经显示所有步骤，则不显示"更多步骤"
-      if (this.showAllSteps) return false
-
-      const steps = this.steps || []
-      const firstConditionStepIndex = steps.findIndex(step => step.type === 'condition')
-
-      if (firstConditionStepIndex === -1) return false
-
-      const firstConditionStep = steps[firstConditionStepIndex]
-      return this.currentStepId <= firstConditionStep.id && firstConditionStepIndex < steps.length - 1
-    },
-
-    // 剩余步骤数量
-    remainingStepsCount () {
-      const steps = this.steps || []
-      const firstConditionStepIndex = steps.findIndex(step => step.type === 'condition')
-
-      if (firstConditionStepIndex === -1) return 0
-
-      return steps.length - (firstConditionStepIndex + 1)
-    }
-  },
-  mounted () {
-    this.init()
-    const timelineContent = this.$refs.timelineContent
-    timelineContent.onmousewheel = function (e) {
-      timelineContent.scrollLeft -= e.wheelDelta
-      e.preventDefault()
-    }
-    // 添加全局点击事件，关闭右键菜单
-    document.addEventListener('click', this.closeContextMenu)
-  },
-  beforeDestroy () {
-    this.$refs.timelineContent.onmousewheel = null
-    // 移除全局点击事件
-    document.removeEventListener('click', this.closeContextMenu)
-  },
-  methods: {
-    init () {
-      this.displayStepId = this.activeStepId
-      const currentStep = this.steps.find(step => step.id === this.currentStepId)
-      if (currentStep && currentStep.deadline) {
-        this.isOverdue = !this.state && this.formatDate(new Date(), 'yyyy-MM-dd hh:mm') > currentStep.deadline
-      }
-      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 this.isStepGreater(this.currentStepId, step.id) || this.state
-    },
-
-    // 判断第一环节是否再第二个环节之后
-    isStepGreater (firstId, secondId) {
-      const first = this.steps.find(item => item.id === firstId)
-      const second = this.steps.find(item => item.id === secondId)
-      // 优先使用 sequence，没有则用 id
-      const firstValue = first?.sequence ?? first?.id
-      const secondValue = second?.sequence ?? second?.id
-      if (firstValue == null || secondValue == null) {
-        console.warn('步骤不存在或无效:', { firstId, secondId })
-        return false
-      }
-      return firstValue > secondValue
-    },
-
-    // 判断id是否为流程中最后一个
-    isLastStep (stepId) {
-      return stepId >= this.steps.length
-    },
-
-    // 判断是否为并行步骤
-    isParallelStep (step) {
-      return step.properties &&
-             step.properties.branchPath &&
-             step.properties.branchPath.includes('parallel_')
-    },
-
-    // 动态展示时间线节点颜色
-    getStepIconColor (index, sectionSteps) {
-      if (!sectionSteps || !sectionSteps[index - 1]) return 'gray'
-
-      const stepId = sectionSteps[index - 1].id
-
-      if (this.changeAble && stepId === this.displayStepId) {
-        return 'yellow'
-      } else if (!this.changeAble && stepId === this.currentStepId) {
-        return this.state ? 'blue' : 'green'
-      }
-      if (this.isStepGreater(this.currentStepId, stepId) || this.state) {
-        return 'blue'
-      }
-      if (stepId === this.currentStepId) {
-        return this.isOverdue ? 'red' : 'blue'
-      }
-      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) {
-      if (!this.changeAble || stepId === this.displayStepId) {
-        return
-      }
-      const curStep = this.steps.find(item => item.id === stepId)
-      if (this.isStepGreater(stepId, this.currentStepId) && curStep.status !== 1 && curStep.status !== 2) {
-        return this.$message.warn('请先完成当前步骤')
-      }
-      this.$emit('activeStep', stepId)
-      this.displayStepId = stepId
-    },
-
-    // 处理节点右键点击
-    handleStepContextMenu (e, step) {
-      // 只有调试用户才能看到右键菜单
-      if (!this.isDebugUser) {
-        return
-      }
-      // 只有已完成的节点或当前节点才能右键
-      if (!this.isStepCompleted(step) || step.id === this.currentStepId) {
-        return
-      }
-
-      e.preventDefault()
-      e.stopPropagation()
-
-      this.selectedStepForMenu = step
-      this.contextMenuX = e.clientX
-      this.contextMenuY = e.clientY
-      this.contextMenuVisible = true
-    },
-
-    // 关闭右键菜单
-    closeContextMenu () {
-      this.contextMenuVisible = false
-      this.selectedStepForMenu = null
-    },
-
-    // 从此节点重新加载
-    reloadFromStep () {
-      if (!this.selectedStepForMenu) return
-
-      this.$emit('reloadFromStep', this.selectedStepForMenu.id)
-      this.closeContextMenu()
-    },
-
-    formatDate,
-  },
-  watch: {
-    activeStepId: function (newVal) {
-      this.displayStepId = newVal
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.timeline-wrapper {
-  display: flex;
-  align-items: flex-start;
-  gap: 0;
-
-  .timeline-section {
-    flex-shrink: 0;
-
-    // 主时间轴自动填充剩余宽度
-    &.main-timeline {
-      flex: 1;
-    }
-
-    /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;
-      }
-    }
-
-    /deep/ .ant-steps-item-title {
-      font-size: 14px;
-      h3 {
-        font-size: 14px;
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .parallel-section {
-    display: flex;
-    align-items: flex-start;
-    position: relative;
-
-    .connection-line {
-      width: 2rem;
-      height: 0;
-      flex-shrink: 0;
-      margin-top: 1rem;
-
-      &.left-line {
-        margin-right: 0;
-        position: relative;
-
-        &::before {
-          content: '';
-          position: absolute;
-          left: -4.8rem;
-          top: -1px;
-          width: 7rem;
-          height: 3px;
-          background: #f0f0f0;
-        }
-      }
-
-      &.right-line {
-        margin-left: 0;
-        position: relative;
-
-        &::before {
-          content: '';
-          position: absolute;
-          right: -4.6rem;
-          top: -1px;
-          width: 6.8rem;
-          height: 3px;
-          background: #f0f0f0;
-        }
-      }
-    }
-
-    .parallel-branches-container {
-      display: flex;
-      flex-direction: column;  /* 竖直排列分支节点 */
-      gap: 6px;  /* 缩小间距 */
-      align-items: center;
-      position: relative;
-      border: 2px dotted #d9d9d9;
-      border-radius: 8px;
-      margin: 0 12px;
-      background: #fff;
-      padding-bottom: 14px;
-      width: max-content;
-
-      /* 为并行节点容器添加小标题 */
-      .parallel-node-title {
-        position: absolute;
-        bottom: -10px;  /* 调整标题的上下位置 */
-        left: 50%;  /* 水平居中 */
-        transform: translateX(-50%);  /* 精确水平居中 */
-        background: #fff;  /* 背景色与容器一致 */
-        font-size: 12px;  /* 标题的字体大小 */
-        border-radius: 4px;
-      }
-    }
-
-    .branch-row {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      position: relative;
-      gap: 16px;
-
-      :deep(.ant-steps-item-content) {
-        text-align: left;
-      }
-
-      .branch-timeline {
-        padding: 12px 16px;
-        position: relative;
-        min-width: 80px;
-        text-align: center;
-        transition: all 0.3s ease;  /* 平滑过渡 */
-      }
-
-      .branch-timeline:hover {
-        transform: scale(1.01);  /* 鼠标悬停时放大 */
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      }
-
-      .branch-step-title {
-        font-size: 14px;
-        font-weight: 500;
-        color: #262626;
-        cursor: pointer;
-      }
-
-      .branch-step-desc {
-        p {
-          margin: 0;
-          padding: 4px 0;
-          font-size: 12px;
-          color: #666;
-        }
-      }
-
-      /deep/ .ant-steps-icon {
-        color: #fefefe;
-      }
-
-      // 分支步骤节点样式
-      /deep/ .ant-steps-item-icon {
-        width: 20px;
-        height: 20px;
-        line-height: 20px;
-        border-radius: 20px;
-      }
-
-      /deep/ .ant-steps-item-title {
-        line-height: 20px;
-      }
-
-      // 分支步骤状态颜色
-      /deep/ .branch-step-gray .ant-steps-item-icon {
-        background-color: #bfbfbf !important;
-        border-color: #bfbfbf !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;
-      }
-    }
-  }
-
-  @red: rgb(255, 77, 79);
-
-  .step-icon-filled {
-    position: absolute;
-    top: -2px;
-    left: -6px;
-    @blue: rgb(24, 144, 255);
-    @yellow: rgb(255, 164, 39);
-    @gray: rgb(191, 191, 191);
-    &.digital {
-      width: 28px;
-      line-height: 28px;
-      border-radius: 50%;
-      color: #ffffff;
-      &.blue {
-        background: @blue;
-      }
-      &.yellow {
-        background: @yellow;
-      }
-      &.gray {
-        background: @gray;
-      }
-      &.red {
-        background: @red;
-      }
-    }
-    &.icon {
-      font-size: 28px;
-      &.blue {
-        color: @blue;
-      }
-      &.yellow {
-        color: @yellow;
-      }
-      &.gray {
-        color: @gray;
-      }
-    }
-  }
-
-  .step-item {
-    cursor: pointer;
-    &:hover {
-      .ant-steps-item-description {
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-        transform: translateY(-1px);
-        transition: all 0.3s ease;
-      }
-      p {
-        color: #262626;
-      }
-    }
-    .text-red {
-      color: @red !important;
-    }
-  }
-
-  .next-step-overdue {
-    /deep/ .ant-steps-item-tail::after {
-      background: @red;
-    }
-  }
-
-  // 新增样式：步骤标题容器
-  .step-title-container {
-    .condition-indicators {
-      margin-top: 8px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      .condition-tag {
-        margin: 0;
-      }
-
-      .condition-help {
-        color: #999;
-        cursor: pointer;
-        &:hover {
-          color: #1890ff;
-        }
-      }
-    }
-  }
-
-  // 分支信息样式
-  .branch-info {
-    margin-top: 8px;
-    padding: 8px;
-    background: #f9f9f9;
-    border-radius: 4px;
-    border-left: 3px solid #722ed1;
-
-    .branch-title {
-      margin: 0 0 6px 0 !important;
-      font-weight: bold;
-      color: #722ed1;
-      font-size: 12px;
-      padding: 0 !important;
-      border: none !important;
-    }
-
-    .branch-options {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px;
-
-      .branch-option-tag {
-        margin: 0;
-        font-size: 11px;
-             }
-     }
-   }
-
-   // 省略步骤样式
-    .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;
-
-             &.steps-count {
-               font-weight: bold;
-               color: #666 !important;
-             }
-           }
-         }
-       }
-     }
-}
-
-// 分支步骤 Popover 样式
-/deep/ .ant-popover {
-  .popover-title {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-weight: 600;
-    color: #1890ff;
-
-    .anticon {
-      font-size: 14px;
-    }
-  }
-
-  .branch-step-popover {
-    min-width: 200px;
-
-    .popover-item {
-      display: flex;
-      align-items: flex-start;
-      margin-bottom: 8px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      &.no-data {
-        justify-content: center;
-        font-style: italic;
-        color: #999;
-      }
-
-      .popover-label {
-        font-weight: 600;
-        color: #262626;
-        min-width: 70px;
-        flex-shrink: 0;
-      }
-
-      .popover-value {
-        color: #595959;
-        word-break: break-all;
-        flex: 1;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <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)"
+            @contextmenu.native="handleStepContextMenu($event, item)"
+          >
+            <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">
+          <!-- 并行节点标题 -->
+          <a-tag color="cyan" size="small" class="parallel-node-title">
+            <a-icon type="apartment" /> 并行节点
+          </a-tag>
+          <!-- 动态渲染并行分支 -->
+          <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)"
+                  @contextmenu.native="handleStepContextMenu($event, step)">
+                  <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>
+        </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>
+
+    <!-- 右键菜单 -->
+    <a-dropdown
+      :visible="contextMenuVisible"
+      :trigger="[]"
+      @visibleChange="val => !val && closeContextMenu()"
+    >
+      <div
+        v-show="contextMenuVisible"
+        :style="{
+          position: 'fixed',
+          left: contextMenuX + 'px',
+          top: contextMenuY + 'px',
+          width: '1px',
+          height: '1px'
+        }"
+      ></div>
+      <a-menu slot="overlay" @click="closeContextMenu">
+        <a-menu-item @click="reloadFromStep">
+          <a-icon type="reload" />
+          从此节点重新加载
+        </a-menu-item>
+      </a-menu>
+    </a-dropdown>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { formatDate } from '@vue2-client/utils/util'
+import TrimTextTail from '@vue2-client/pages/WorkflowDetail/WorkflowPageDetail/TrimTextTail'
+
+export default {
+  components: { TrimTextTail },
+  name: 'WorkFlowTimeline',
+  props: {
+    workflowId: {
+      type: [String, Number],
+      required: true
+    },
+    currentStepId: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    activeStepId: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    state: {
+      type: [Boolean, Number],
+      required: false,
+      default: false
+    },
+    steps: {
+      type: Array,
+      required: true
+    },
+    changeAble: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      // 当前显示的步骤 id
+      displayStepId: 1,
+      // 当前任务是否逾期
+      isOverdue: false,
+      // 是否显示所有步骤（包括条件后的步骤）
+      showAllSteps: false,
+      // 右键菜单相关状态
+      contextMenuVisible: false,
+      contextMenuX: 0,
+      contextMenuY: 0,
+      selectedStepForMenu: null
+    }
+  },
+  computed: {
+    ...mapGetters('account', ['isDebugUser']),
+        // 控制显示的步骤：当判断节点未执行时只显示到判断节点，执行后显示包括并行分支的所有步骤
+    displaySteps () {
+      const steps = this.steps || []
+
+      // 如果用户选择显示所有步骤，直接返回
+      if (this.showAllSteps) {
+        return steps
+      }
+
+      // 找到第一个判断节点
+      const firstConditionStepIndex = steps.findIndex(step => step.type === 'condition')
+
+      // 如果没有找到判断节点，显示所有步骤
+      if (firstConditionStepIndex === -1) {
+        return steps
+      }
+
+      const firstConditionStep = steps[firstConditionStepIndex]
+
+      // 如果当前步骤在第一个判断节点之前或等于判断节点，只显示到判断节点
+      if (this.currentStepId <= firstConditionStep.id) {
+        return steps.slice(0, firstConditionStepIndex + 1)
+      }
+
+      // 如果判断节点已经执行，显示所有步骤（包括并行分支）
+      return steps
+    },
+
+        // 是否有更多步骤（被条件截断）
+    hasMoreSteps () {
+      // 如果已经显示所有步骤，则不显示"更多步骤"
+      if (this.showAllSteps) return false
+
+      const steps = this.steps || []
+      const firstConditionStepIndex = steps.findIndex(step => step.type === 'condition')
+
+      if (firstConditionStepIndex === -1) return false
+
+      const firstConditionStep = steps[firstConditionStepIndex]
+      return this.currentStepId <= firstConditionStep.id && firstConditionStepIndex < steps.length - 1
+    },
+
+    // 剩余步骤数量
+    remainingStepsCount () {
+      const steps = this.steps || []
+      const firstConditionStepIndex = steps.findIndex(step => step.type === 'condition')
+
+      if (firstConditionStepIndex === -1) return 0
+
+      return steps.length - (firstConditionStepIndex + 1)
+    }
+  },
+  mounted () {
+    this.init()
+    const timelineContent = this.$refs.timelineContent
+    timelineContent.onmousewheel = function (e) {
+      timelineContent.scrollLeft -= e.wheelDelta
+      e.preventDefault()
+    }
+    // 添加全局点击事件，关闭右键菜单
+    document.addEventListener('click', this.closeContextMenu)
+  },
+  beforeDestroy () {
+    this.$refs.timelineContent.onmousewheel = null
+    // 移除全局点击事件
+    document.removeEventListener('click', this.closeContextMenu)
+  },
+  methods: {
+    init () {
+      this.displayStepId = this.activeStepId
+      const currentStep = this.steps.find(step => step.id === this.currentStepId)
+      if (currentStep && currentStep.deadline) {
+        this.isOverdue = !this.state && this.formatDate(new Date(), 'yyyy-MM-dd hh:mm') > currentStep.deadline
+      }
+      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 this.isStepGreater(this.currentStepId, step.id) || this.state
+    },
+
+    // 判断第一环节是否再第二个环节之后
+    isStepGreater (firstId, secondId) {
+      const first = this.steps.find(item => item.id === firstId)
+      const second = this.steps.find(item => item.id === secondId)
+      // 优先使用 sequence，没有则用 id
+      const firstValue = first?.sequence ?? first?.id
+      const secondValue = second?.sequence ?? second?.id
+      if (firstValue == null || secondValue == null) {
+        console.warn('步骤不存在或无效:', { firstId, secondId })
+        return false
+      }
+      return firstValue > secondValue
+    },
+
+    // 判断id是否为流程中最后一个
+    isLastStep (stepId) {
+      return stepId >= this.steps.length
+    },
+
+    // 判断是否为并行步骤
+    isParallelStep (step) {
+      return step.properties &&
+             step.properties.branchPath &&
+             step.properties.branchPath.includes('parallel_')
+    },
+
+    // 动态展示时间线节点颜色
+    getStepIconColor (index, sectionSteps) {
+      if (!sectionSteps || !sectionSteps[index - 1]) return 'gray'
+
+      const stepId = sectionSteps[index - 1].id
+
+      if (this.changeAble && stepId === this.displayStepId) {
+        return 'yellow'
+      } else if (!this.changeAble && stepId === this.currentStepId) {
+        return this.state ? 'blue' : 'green'
+      }
+      if (this.isStepGreater(this.currentStepId, stepId) || this.state) {
+        return 'blue'
+      }
+      if (stepId === this.currentStepId) {
+        return this.isOverdue ? 'red' : 'blue'
+      }
+      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) {
+      if (!this.changeAble || stepId === this.displayStepId) {
+        return
+      }
+      const curStep = this.steps.find(item => item.id === stepId)
+      if (this.isStepGreater(stepId, this.currentStepId) && curStep.status !== 1 && curStep.status !== 2) {
+        return this.$message.warn('请先完成当前步骤')
+      }
+      this.$emit('activeStep', stepId)
+      this.displayStepId = stepId
+    },
+
+    // 处理节点右键点击
+    handleStepContextMenu (e, step) {
+      // 只有调试用户才能看到右键菜单
+      if (!this.isDebugUser) {
+        return
+      }
+      // 只有已完成的节点或当前节点才能右键
+      if (!this.isStepCompleted(step) || step.id === this.currentStepId) {
+        return
+      }
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      this.selectedStepForMenu = step
+      this.contextMenuX = e.clientX
+      this.contextMenuY = e.clientY
+      this.contextMenuVisible = true
+    },
+
+    // 关闭右键菜单
+    closeContextMenu () {
+      this.contextMenuVisible = false
+      this.selectedStepForMenu = null
+    },
+
+    // 从此节点重新加载
+    reloadFromStep () {
+      if (!this.selectedStepForMenu) return
+
+      this.$emit('reloadFromStep', this.selectedStepForMenu.id)
+      this.closeContextMenu()
+    },
+
+    formatDate,
+  },
+  watch: {
+    activeStepId: function (newVal) {
+      this.displayStepId = newVal
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.timeline-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+
+  .timeline-section {
+    flex-shrink: 0;
+
+    // 主时间轴自动填充剩余宽度
+    &.main-timeline {
+      flex: 1;
+    }
+
+    /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;
+      }
+    }
+
+    /deep/ .ant-steps-item-title {
+      font-size: 14px;
+      h3 {
+        font-size: 14px;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .parallel-section {
+    display: flex;
+    align-items: flex-start;
+    position: relative;
+
+    .connection-line {
+      width: 2rem;
+      height: 0;
+      flex-shrink: 0;
+      margin-top: 1rem;
+
+      &.left-line {
+        margin-right: 0;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: -4.8rem;
+          top: -1px;
+          width: 7rem;
+          height: 3px;
+          background: #f0f0f0;
+        }
+      }
+
+      &.right-line {
+        margin-left: 0;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          right: -4.6rem;
+          top: -1px;
+          width: 6.8rem;
+          height: 3px;
+          background: #f0f0f0;
+        }
+      }
+    }
+
+    .parallel-branches-container {
+      display: flex;
+      flex-direction: column;  /* 竖直排列分支节点 */
+      gap: 6px;  /* 缩小间距 */
+      align-items: center;
+      position: relative;
+      border: 2px dotted #d9d9d9;
+      border-radius: 8px;
+      margin: 0 12px;
+      background: #fff;
+      padding-bottom: 14px;
+      width: max-content;
+
+      /* 为并行节点容器添加小标题 */
+      .parallel-node-title {
+        position: absolute;
+        bottom: -10px;  /* 调整标题的上下位置 */
+        left: 50%;  /* 水平居中 */
+        transform: translateX(-50%);  /* 精确水平居中 */
+        background: #fff;  /* 背景色与容器一致 */
+        font-size: 12px;  /* 标题的字体大小 */
+        border-radius: 4px;
+      }
+    }
+
+    .branch-row {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      gap: 16px;
+
+      :deep(.ant-steps-item-content) {
+        text-align: left;
+      }
+
+      .branch-timeline {
+        padding: 12px 16px;
+        position: relative;
+        min-width: 80px;
+        text-align: center;
+        transition: all 0.3s ease;  /* 平滑过渡 */
+      }
+
+      .branch-timeline:hover {
+        transform: scale(1.01);  /* 鼠标悬停时放大 */
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+
+      .branch-step-title {
+        font-size: 14px;
+        font-weight: 500;
+        color: #262626;
+        cursor: pointer;
+      }
+
+      .branch-step-desc {
+        p {
+          margin: 0;
+          padding: 4px 0;
+          font-size: 12px;
+          color: #666;
+        }
+      }
+
+      /deep/ .ant-steps-icon {
+        color: #fefefe;
+      }
+
+      // 分支步骤节点样式
+      /deep/ .ant-steps-item-icon {
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        border-radius: 20px;
+      }
+
+      /deep/ .ant-steps-item-title {
+        line-height: 20px;
+      }
+
+      // 分支步骤状态颜色
+      /deep/ .branch-step-gray .ant-steps-item-icon {
+        background-color: #bfbfbf !important;
+        border-color: #bfbfbf !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;
+      }
+    }
+  }
+
+  @red: rgb(255, 77, 79);
+
+  .step-icon-filled {
+    position: absolute;
+    top: -2px;
+    left: -6px;
+    @blue: rgb(24, 144, 255);
+    @yellow: rgb(255, 164, 39);
+    @gray: rgb(191, 191, 191);
+    &.digital {
+      width: 28px;
+      line-height: 28px;
+      border-radius: 50%;
+      color: #ffffff;
+      &.blue {
+        background: @blue;
+      }
+      &.yellow {
+        background: @yellow;
+      }
+      &.gray {
+        background: @gray;
+      }
+      &.red {
+        background: @red;
+      }
+    }
+    &.icon {
+      font-size: 28px;
+      &.blue {
+        color: @blue;
+      }
+      &.yellow {
+        color: @yellow;
+      }
+      &.gray {
+        color: @gray;
+      }
+    }
+  }
+
+  .step-item {
+    cursor: pointer;
+    &:hover {
+      .ant-steps-item-description {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        transform: translateY(-1px);
+        transition: all 0.3s ease;
+      }
+      p {
+        color: #262626;
+      }
+    }
+    .text-red {
+      color: @red !important;
+    }
+  }
+
+  .next-step-overdue {
+    /deep/ .ant-steps-item-tail::after {
+      background: @red;
+    }
+  }
+
+  // 新增样式：步骤标题容器
+  .step-title-container {
+    .condition-indicators {
+      margin-top: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .condition-tag {
+        margin: 0;
+      }
+
+      .condition-help {
+        color: #999;
+        cursor: pointer;
+        &:hover {
+          color: #1890ff;
+        }
+      }
+    }
+  }
+
+  // 分支信息样式
+  .branch-info {
+    margin-top: 8px;
+    padding: 8px;
+    background: #f9f9f9;
+    border-radius: 4px;
+    border-left: 3px solid #722ed1;
+
+    .branch-title {
+      margin: 0 0 6px 0 !important;
+      font-weight: bold;
+      color: #722ed1;
+      font-size: 12px;
+      padding: 0 !important;
+      border: none !important;
+    }
+
+    .branch-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+
+      .branch-option-tag {
+        margin: 0;
+        font-size: 11px;
+             }
+     }
+   }
+
+   // 省略步骤样式
+    .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;
+
+             &.steps-count {
+               font-weight: bold;
+               color: #666 !important;
+             }
+           }
+         }
+       }
+     }
+}
+
+// 分支步骤 Popover 样式
+/deep/ .ant-popover {
+  .popover-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 600;
+    color: #1890ff;
+
+    .anticon {
+      font-size: 14px;
+    }
+  }
+
+  .branch-step-popover {
+    min-width: 200px;
+
+    .popover-item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &.no-data {
+        justify-content: center;
+        font-style: italic;
+        color: #999;
+      }
+
+      .popover-label {
+        font-weight: 600;
+        color: #262626;
+        min-width: 70px;
+        flex-shrink: 0;
+      }
+
+      .popover-value {
+        color: #595959;
+        word-break: break-all;
+        flex: 1;
+      }
+    }
+  }
+}
+</style>