vue2-client 1.15.73 → 1.15.74

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

@@ -59,12 +59,15 @@
 
         <!-- 并行分支容器 -->
         <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">
@@ -574,20 +577,20 @@ export default {
     /deep/ .ant-steps-item-title {
       font-size: 14px;
       h3 {
+        font-size: 14px;
         margin-bottom: 0;
       }
     }
   }
 
-    .parallel-section {
+  .parallel-section {
     display: flex;
     align-items: flex-start;
     position: relative;
 
     .connection-line {
       width: 2rem;
-      height: 0px;
-      // background: #f0f0f0;
+      height: 0;
       flex-shrink: 0;
       margin-top: 1rem;
 
@@ -599,9 +602,9 @@ export default {
           content: '';
           position: absolute;
           left: -4.8rem;
-          top: 0;
-          width: 6rem;
-          height: 2.5px;
+          top: -1px;
+          width: 7rem;
+          height: 3px;
           background: #f0f0f0;
         }
       }
@@ -613,10 +616,10 @@ export default {
         &::before {
           content: '';
           position: absolute;
-          right: -4.5rem;
-          top: 0;
-          width: 6rem;
-          height: 2.5px;
+          right: -4.6rem;
+          top: -1px;
+          width: 6.8rem;
+          height: 3px;
           background: #f0f0f0;
         }
       }
@@ -624,170 +627,104 @@ export default {
 
     .parallel-branches-container {
       display: flex;
-      flex-direction: column;
-      gap: 16px;
-      padding: 16px 20px;
-      background: #fafafa;
-      border: 1px solid #e0e0e0;
+      flex-direction: column;  /* 竖直排列分支节点 */
+      gap: 6px;  /* 缩小间距 */
+      align-items: center;
+      position: relative;
+      border: 2px dotted #d9d9d9;
       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;
-            }
-          }
+      margin: 0 12px;
+      background: #fff;
+      padding-bottom: 14px;
+
+      /* 为并行节点容器添加小标题 */
+      .parallel-node-title {
+        position: absolute;
+        bottom: -10px;  /* 调整标题的上下位置 */
+        left: 50%;  /* 水平居中 */
+        transform: translateX(-50%);  /* 精确水平居中 */
+        background: #fff;  /* 背景色与容器一致 */
+        font-size: 12px;  /* 标题的字体大小 */
+        border-radius: 4px;
+      }
+    }
 
-          // 移除固定的分支颜色，改为动态状态颜色
-          // &:nth-child(1) {
-          //   border-left-color: #52c41a;
-          // }
+    .branch-row {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      gap: 16px;
 
-          // &:nth-child(2) {
-          //   border-left-color: #1890ff;
-          // }
+      .branch-timeline {
+        padding: 12px 16px;
+        position: relative;
+        min-width: 80px;
+        text-align: center;
+        transition: all 0.3s ease;  /* 平滑过渡 */
+      }
 
-          // &:nth-child(3) {
-          //   border-left-color: #722ed1;
-          // }
+      .branch-timeline:hover {
+        transform: scale(1.05);  /* 鼠标悬停时放大 */
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
 
-          &:hover {
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-            transform: translateY(-2px);
-            transition: all 0.3s ease;
-          }
+      .branch-step-title {
+        font-size: 14px;
+        font-weight: 500;
+        color: #262626;
+        cursor: pointer;
+      }
 
-          /deep/ .ant-steps-icon {
-            color: #f0f0f0;
-          }
+      .branch-step-desc {
+        p {
+          margin: 0;
+          padding: 4px 0;
+          font-size: 12px;
+          color: #666;
+        }
+      }
 
-          // 分支步骤状态颜色
-          /deep/ .branch-step-gray .ant-steps-item-icon {
-            background-color: #d9d9d9 !important;
-            border-color: #d9d9d9 !important;
-          }
+      /deep/ .ant-steps-icon {
+        color: #fefefe;
+      }
 
-          /deep/ .branch-step-blue .ant-steps-item-icon {
-            background-color: #1890ff !important;
-            border-color: #1890ff !important;
-          }
+      // 分支步骤节点样式
+      /deep/ .ant-steps-item-icon {
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        border-radius: 20px;
+      }
 
-          /deep/ .branch-step-green .ant-steps-item-icon {
-            background-color: #52c41a !important;
-            border-color: #52c41a !important;
-          }
+      /deep/ .ant-steps-item-title {
+        line-height: 20px;
+      }
 
-          /deep/ .branch-step-red .ant-steps-item-icon {
-            background-color: #ff4d4f !important;
-            border-color: #ff4d4f !important;
-          }
+      // 分支步骤状态颜色
+      /deep/ .branch-step-gray .ant-steps-item-icon {
+        background-color: #bfbfbf !important;
+        border-color: #bfbfbf !important;
+      }
 
-          /deep/ .branch-step-yellow .ant-steps-item-icon {
-            background-color: #faad14 !important;
-            border-color: #faad14 !important;
-          }
+      /deep/ .branch-step-blue .ant-steps-item-icon {
+        background-color: #1890ff !important;
+        border-color: #1890ff !important;
+      }
 
-          // 分支时间轴左侧边框颜色
-          &.branch-timeline-gray {
-            border-left-color: #d9d9d9;
-          }
+      /deep/ .branch-step-green .ant-steps-item-icon {
+        background-color: #52c41a !important;
+        border-color: #52c41a !important;
+      }
 
-          &.branch-timeline-green {
-            border-left-color: #52c41a;
-          }
+      /deep/ .branch-step-red .ant-steps-item-icon {
+        background-color: #ff4d4f !important;
+        border-color: #ff4d4f !important;
+      }
 
-          &.branch-timeline-blue {
-            border-left-color: #1890ff;
-          }
-        }
+      /deep/ .branch-step-yellow .ant-steps-item-icon {
+        background-color: #faad14 !important;
+        border-color: #faad14 !important;
       }
     }
   }