@lingxiteam/ebe-utils 0.5.11 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/styles/components/Step.less

@@ -1,7 +1,194 @@
 @import (reference) '../theme/variables/antdVariables.less';
 
-.ued-step-wrap {
+.hslTextColor(@backgroundColor) {
+  @lightness: lightness(@backgroundColor); // 修正:使用传入的backgroundColor参数
+  @text-color: if(@lightness >= 80, @text-color-secondary, #fff); // 如果亮度 >= 80，设置为黑色，否则设置为白色
+  .ued-arrow-step-item {
+    color: @backgroundColor;
+    .ued-arrow-step-item-content {
+      background-color: @backgroundColor;
+      color: @text-color
+    }
+  }
+}
+
+.stepColor(@stepPrefix, @color, @backgroundColor) {
+  .ued-arrow-step-item-simple-@{stepPrefix} {
+    color: @backgroundColor;
+    .ued-arrow-step-item-content {
+      color: @color;
+      background-color: @backgroundColor;
+    }
+  }
+}
 
+.drawArrowItem(@arrow-height, @arrow-width, @placement) {
+  content: '';
+  display: inline-block;
+  border-left: @arrow-width solid if(@placement = 'before', transparent , currentColor);
+  border-top: calc(@arrow-height / 2) solid if(@placement = 'after', transparent , currentColor);
+  border-bottom: calc(@arrow-height / 2) solid if(@placement = 'after', transparent , currentColor);
+  height: @arrow-height;
+}
+
+.drawArrow(@arrow-size, @arrow-height, @arrow-space-size ) {
+  .ued-step-arrow {
+    // 尖端箭头
+    &:not(:last-child) {
+      .ued-arrow-step-item-simple,
+      .ued-arrow-step-item-color {
+        // 绘制箭头
+        &::after {
+          .drawArrowItem(@arrow-height, 12px, 'after');
+        }
+      }
+  
+      .ued-arrow-step-item-colorArrow {
+        // 末端大箭头样式
+        &::after {
+          content: '';
+          display: inline-block;
+          border-left: @arrow-size solid currentColor;
+          border-top: @arrow-size solid transparent;
+          border-bottom: @arrow-size solid transparent;
+        }
+      }
+    }
+    .ued-arrow-step-item-colorFlag  {
+      // 绘制箭头
+      &::after {
+        .drawArrowItem(@arrow-height, 12px, 'after');
+      }
+    }
+    // 缩进箭头
+    &:not(:first-child) {
+      .ued-arrow-step-item-simple,
+      .ued-arrow-step-item-color,
+      .ued-arrow-step-item-colorFlag {
+        // 绘制箭头
+        &::before {
+          .drawArrowItem(@arrow-height, 12px, 'before');
+        }
+      }
+  
+      .ued-arrow-step-item-colorArrow {
+        // 末端大箭头样式
+        &::before {
+          .drawArrowItem(@arrow-height, @arrow-space-size, 'before');
+        }
+      }
+    }
+  
+    &:first-child {
+      .ued-arrow-step-item-simple,
+      .ued-arrow-step-item-color,
+      .ued-arrow-step-item-colorArrow { 
+        .ued-arrow-step-item-content {
+          border-top-left-radius: 2px;
+          border-bottom-left-radius: 2px;
+        }
+      }
+  
+      .ued-arrow-step-item-colorFlag {
+        &::before {
+          .drawArrowItem(@arrow-height, 12px, 'before');
+        }
+      }
+    }
+  
+    &:last-child {
+      .ued-arrow-step-item-simple,
+      .ued-arrow-step-item-color,
+      .ued-arrow-step-item-colorArrow {
+        .ued-arrow-step-item-content {
+          border-top-right-radius: 2px;
+          border-bottom-right-radius: 2px;
+        }
+      }
+    }
+  }
+}
+
+/**
+  绘制图标-模板步骤条icon样式，根据不同尺寸绘制不同大小的icon
+**/
+.drawTemplateStepIcon(@size, @border-radius, @line-height:36px, @padding:16px) {
+  .ued-step-icon-square,
+  .ued-step-icon-square-vertical {
+    .ued-tempalate-step-item-icon {
+        width: @size;
+        height: @size;
+        border-radius: @border-radius;
+        background-color: currentColor;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        .ued-step-wrap-iconItem-default,
+        .ued-step-wrap-iconItem-small {
+          color: white;
+        }
+    }
+    .ued-tempalate-step-item-tail {
+        top: calc(@size / 2);
+        transform: translateY(-50%);
+        flex: 1;
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex-direction: row-reverse;
+        min-width: 47px;
+        &::after {
+          flex: 1;
+          content: "";
+          height: 2px;
+          top: 50%;
+          border-top: 2px dashed @primary-color;
+          background-color: transparent;
+          border-radius: 0;
+          transform: translateX(-1px)
+        }
+        &::before {
+          content: "";
+          width: 0;
+          height: 0;
+          border-left: 12px solid @primary-color;
+          border-top: 6px solid transparent;
+          border-bottom: 6px solid transparent;
+        }
+    }
+  }
+  .ued-step-icon-square {
+    .ued-tempalate-step-item-tail {
+      margin-left: 16px;
+    }
+  }
+  .ued-step-icon-ellipse {
+    .ued-tempalate-step-item {
+      align-items: center;
+      margin-right: 8px;
+      min-width: 120px;
+    }
+    .ued-tempalate-step-item-content {
+      border: 1px solid currentColor;
+      border-radius: 999px;
+      padding: 0 @padding;
+      height: @line-height;
+      align-items: center;
+      width: 100%;
+      .ued-tempalate-step-item-icon {
+        color: currentColor;
+        margin-right: 4px;
+        .ued-step-wrap-iconItem-default {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+}
+.ued-step-wrap {
+  background-color: white;
   &-iconItem-small,
   &-iconItem-default {
     display: flex;
@@ -88,4 +275,274 @@
   &-dot-error {
     background-color: @error-color; // FIXME:换主题色
   }
+
+  &-container-arrow {
+    &.@{ant-prefix}-steps-default {
+      @arrow-height: 36px;
+      // colorArrow大箭头样式尺寸
+      @arrow-size: 24px;
+      // 相邻步骤缺口的尺寸
+      @arrow-space-size: 18px;
+      .ued-arrow-step-item-content {
+        height: @arrow-height;
+      }
+      .drawArrow(@arrow-size, @arrow-height, @arrow-space-size);
+    }
+    &.@{ant-prefix}-steps-small {
+      @arrow-height: 28px;
+      // colorArrow大箭头样式尺寸
+      @arrow-size: 18px;
+      // 相邻步骤缺口的尺寸
+      @arrow-space-size: 14px;
+      .ued-arrow-step-item-content {
+        height: @arrow-height;
+      }
+      .drawArrow(@arrow-size, @arrow-height, @arrow-space-size);
+    }
+    &.@{ant-prefix}-steps-horizontal:not(.@{ant-prefix}-steps-label-vertical) .@{ant-prefix}-steps-item.ued-step-arrow {
+      padding-left: 0px;
+    }
+    .ued-step-arrow {
+      display: inline-flex;
+      align-items: center;
+      // 默认使用主题色
+      .hslTextColor(@primary-color);
+      &.@{ant-prefix}-steps-item:last-child {
+        flex: 1;
+      }
+      .@{ant-prefix}-steps-item-icon {
+        display: none;
+      }
+
+      .ued-step-wrap-iconItem-default {
+        width: 20px;
+        height: 20px;
+        margin-right: 8px;
+      }
+      .ued-step-wrap-iconItem-small {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+      }
+
+      // 步骤默认间距
+      &-color,
+      &-colorFlag,
+      &-simple {
+        &:not(:first-child) {
+          margin-left: -10px;
+        }
+      }
+      &-colorArrow {
+        &:not(:first-child) {
+          margin-left: -16px;
+        }
+        &-small {
+          &:not(:first-child) {
+            margin-left: -12px;
+          }
+        }
+      }
+
+      // 箭头内置样式，每个步骤按定制颜色走
+      &-simple {
+        // 完成
+        .stepColor(finish, @primary-color, fade(@primary-color, 20%));
+        // 进行中
+        .stepColor(process, #ffffff, @primary-color);
+        // 等待
+        .stepColor(wait,@text-color-secondary, #f0f0f0);
+        // 错误
+        .stepColor(error, #ffffff, @error-color);
+      }
+
+      .@{ant-prefix}-steps-item-content,
+      .@{ant-prefix}-steps-item-container {
+        width: 100%;
+        .@{ant-prefix}-steps-item-title {
+          width: 100%;
+          padding-right: 0px;
+          .ued-arrow-step-item {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            .ued-arrow-step-item-content {
+              &-light {
+                color: #fff;
+              }
+              &-dark {
+                color: @text-color-secondary
+              }
+              display: flex;
+              align-items: center;
+              flex: 1;
+              padding: 0 20px;
+              width: 100%;
+              overflow: hidden;
+              .ued-arrow-step-item-text {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                word-break: break-word;
+                flex: 1;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  
+}
+
+.ued-step-wrap-container-icon {
+  // 步骤条模版，自定义title
+  .ued-step-icon-square,
+  .ued-step-icon-square-vertical,
+  .ued-step-icon-ellipse {
+    // 在这些模板下，hover时保持原来颜色
+    &.@{ant-prefix}-steps-item:not(.@{ant-prefix}-steps-item-active)>.@{ant-prefix}-steps-item-container[role=button]:hover .@{ant-prefix}-steps-item-title {
+      color: currentColor;
+    }
+    &.ued-step-icon > .@{ant-prefix}-steps-item-container {
+      & > .@{ant-prefix}-steps-item-icon {
+        display: none;
+      }
+      .@{ant-prefix}-steps-item-content,
+      .@{ant-prefix}-steps-item-title {
+        color: currentColor;
+        padding-right: 0;
+        &:hover {
+          color: currentColor;
+        }
+        & > .ued-tempalate-step-item {
+          display: flex;
+        }
+      }
+    }
+  }
+  .ued-step-icon-square,
+  .ued-step-icon-square-vertical {
+    &.ued-step-icon > .@{ant-prefix}-steps-item-container {
+      & > .@{ant-prefix}-steps-item-tail {
+        display: none;
+      }
+    }
+    &.ued-step-icon:last-child {
+      .@{ant-prefix}-steps-item-container .@{ant-prefix}-steps-item-title > .ued-tempalate-step-item .ued-tempalate-step-item-tail {
+        display: none;
+      }
+    }
+    &.ued-step-icon > .@{ant-prefix}-steps-item-container {
+      .@{ant-prefix}-steps-item-title,
+      .@{ant-prefix}-steps-item-content {
+        width: 100%;
+        & >.ued-tempalate-step-item {
+          .ued-tempalate-step-item-title {
+            color: rgba(28, 36, 46, 1);
+            line-height: 22px;
+            font-size: 14px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+          .ued-tempalate-step-item-description {
+            color: rgba(144, 146, 163, 1);
+            font-weight: normal;
+            font-size: 12px;
+            line-height: 18px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+  .ued-tempalate-step-item-content {
+    display: flex;
+    overflow: hidden;
+    .ued-tempalate-step-item-content-inner {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      overflow: hidden;
+    }
+  }
+  .ued-tempalate-step-item-icon {
+      margin-right: 16px;
+  }
+  .ued-step-icon-square-vertical {
+    .ued-tempalate-step-item-content {
+      flex-direction: column;
+      margin-right: 16px;
+      align-items: center;
+      .ued-tempalate-step-item-title,
+      .ued-tempalate-step-item-description {
+        text-align: center;
+      }
+      .ued-tempalate-step-item-icon {
+        margin-right: 0;
+        margin-bottom: 8px;
+      }
+      .ued-tempalate-step-item-content-inner {
+        width: 100%;
+      }
+
+    }
+  }
+  &.@{ant-prefix}-steps-small {
+    .drawTemplateStepIcon(40px, 8px, 32px, 12px);
+  }
+  &.@{ant-prefix}-steps-default {
+    .drawTemplateStepIcon(48px, 12px);
+  }
+  // 椭圆图标型模板
+  &.@{ant-prefix}-steps-horizontal:not(.@{ant-prefix}-steps-label-vertical) .@{ant-prefix}-steps-item {
+    &.ued-step-icon-ellipse:not(:first-child) {
+      padding-left: 8px;
+    }
+  }
+  // 导航型图标步骤条样式
+  &.@{ant-prefix}-steps-navigation {
+    padding-top: 0;
+    & > .ued-step-icon-ellipse {
+      display: inline-flex;
+      align-items: center;
+      &::before {
+        display: none;
+      }
+      &::after {
+        right: 0;
+        transform: rotate(45deg);
+        margin-left: 0;
+        margin-top: 0;
+        left: unset;
+        position: static;
+      }
+      &:not(:last-child) {
+        .ued-tempalate-step-item {
+          margin-right: 12px;
+        }
+      }
+      .@{ant-prefix}-steps-item-container {
+        padding-bottom: 0;
+        margin-left: 0;
+        width: 100%;
+        .@{ant-prefix}-steps-item-content {
+          width: 100%;
+          .@{ant-prefix}-steps-item-title {
+            width: 100%;
+          }
+        }
+      }
+    }
+    &.@{ant-prefix}-steps-horizontal:not(.@{ant-prefix}-steps-label-vertical) .@{ant-prefix}-steps-item {
+      &.ued-step-icon-ellipse:not(:first-child) {
+        padding-left: 20px;
+      }
+    }
+  }
 }