@pisell/materials 1.0.978 → 1.0.979

package/es/components/PisellSteps/PisellSteps.less

@@ -1,457 +1,322 @@
-// PisellSteps 步骤条组件样式
-// 基于 Ant Design Steps 进行样式增强和主题定制
-
-// ==================== CSS 变量定义 ====================
-.pisell-steps {
-  // 尺寸相关
-  --pisell-step-icon-size: 32px;
-  --pisell-step-icon-size-small: 24px;
-  --pisell-step-title-font-size: 16px;
-  --pisell-step-title-font-size-small: 14px;
-  --pisell-step-description-font-size: 14px;
-  --pisell-step-description-font-size-small: 12px;
-  --pisell-step-title-line-height: 24px;
-  --pisell-step-title-line-height-small: 20px;
-  --pisell-step-description-line-height: 22px;
-  --pisell-step-description-line-height-small: 18px;
-
-  // 状态颜色（根据设计图的 Pisell 主题色）
-  --pisell-step-finish-color: #7f56d9; // Primary/600
-  --pisell-step-finish-bg: #f4ebff; // Primary/100
-  --pisell-step-process-color: #7f56d9; // Primary/600
-  --pisell-step-process-bg: #7f56d9; // Primary/600
-  --pisell-step-wait-color: rgba(0, 0, 0, 0.45);
-  --pisell-step-wait-bg: rgba(0, 0, 0, 0.06);
-  --pisell-step-wait-border: rgba(0, 0, 0, 0.25);
-  --pisell-step-error-color: #ff4d4f;
-  --pisell-step-error-bg: #fff;
-
-  // 文本颜色
-  --pisell-step-text-color: rgba(0, 0, 0, 0.88);
-  --pisell-step-text-color-secondary: rgba(0, 0, 0, 0.45);
-
-  // 间距
-  --pisell-step-margin: 16px;
-  --pisell-step-margin-xs: 8px;
-  --pisell-step-padding-xs: 4px;
-  --pisell-step-padding-sm: 12px;
-
-  // 圆点尺寸
-  --pisell-step-dot-size: 8px;
-  --pisell-step-dot-size-small: 6px;
-  --pisell-step-dot-size-active: 10px;
-  --pisell-step-dot-size-active-small: 8px;
-
-  // 连接器
-  --pisell-step-connector-color-finish: var(--pisell-step-finish-color);
-  --pisell-step-connector-color-wait: rgba(0, 0, 0, 0.25);
+// PisellSteps 组件样式
+// 基于 Ant Design Steps 进行样式扩展和定制
+
+@pisell-steps-prefix: pisell-steps;
+
+// ============ CSS 变量定义 ============
+.@{pisell-steps-prefix} {
+  // 图标相关
+  --pisell-steps-icon-size: 32px;
+  --pisell-steps-icon-color: inherit;
+  
+  // 间距相关
+  --pisell-steps-item-gap: 8px;
+  --pisell-steps-margin: 16px;
+  
+  // 栅格布局
+  --pisell-steps-grid-columns: 3;
+  
+  // 颜色变量
+  --pisell-steps-primary-color: #7f56d9;
+  --pisell-steps-primary-light: #f4ebff;
+  --pisell-steps-text-color: rgba(0, 0, 0, 0.88);
+  --pisell-steps-text-secondary: rgba(0, 0, 0, 0.45);
+  --pisell-steps-border-color: rgba(0, 0, 0, 0.06);
+  --pisell-steps-error-color: #ff4d4f;
+  --pisell-steps-success-color: #52c41a;
+}
 
-  // 基础样式
+// ============ 基础样式 ============
+.@{pisell-steps-prefix} {
+  position: relative;
   width: 100%;
 
-  // ==================== 完成状态样式 ====================
-  :global {
-    .ant-steps-item-finish {
-      .ant-steps-item-icon {
-        background-color: var(--pisell-step-finish-bg);
-        border-color: var(--pisell-step-finish-color);
-
-        .ant-steps-icon {
-          color: var(--pisell-step-finish-color);
-        }
-      }
-
-      .ant-steps-item-title {
-        color: var(--pisell-step-text-color);
-        font-size: var(--pisell-step-title-font-size);
-        line-height: var(--pisell-step-title-line-height);
-      }
-
-      .ant-steps-item-description {
-        color: var(--pisell-step-text-color-secondary);
-        font-size: var(--pisell-step-description-font-size);
-        line-height: var(--pisell-step-description-line-height);
-      }
-
-      >.ant-steps-item-container>.ant-steps-item-tail::after {
-        background-color: var(--pisell-step-connector-color-finish);
-      }
-    }
-
-    // ==================== 进行中状态样式 ====================
-    .ant-steps-item-process {
-      .ant-steps-item-icon {
-        background-color: var(--pisell-step-process-bg);
-        border-color: var(--pisell-step-process-color);
-
-        .ant-steps-icon {
-          color: #ffffff;
-          font-weight: 500;
-        }
-      }
-
-      .ant-steps-item-title {
-        color: var(--pisell-step-text-color);
-        font-size: var(--pisell-step-title-font-size);
-        line-height: var(--pisell-step-title-line-height);
-        font-weight: 500;
-      }
-
-      .ant-steps-item-description {
-        color: var(--pisell-step-text-color);
-        font-size: var(--pisell-step-description-font-size);
-        line-height: var(--pisell-step-description-line-height);
-      }
-    }
-
-    // ==================== 等待状态样式 ====================
-    .ant-steps-item-wait {
-      .ant-steps-item-icon {
-        background-color: var(--pisell-step-wait-bg);
-        border-color: var(--pisell-step-wait-border);
-
-        .ant-steps-icon {
-          color: var(--pisell-step-wait-color);
-        }
-      }
-
-      .ant-steps-item-title {
-        color: var(--pisell-step-wait-color);
-        font-size: var(--pisell-step-title-font-size);
-        line-height: var(--pisell-step-title-line-height);
-      }
-
-      .ant-steps-item-description {
-        color: var(--pisell-step-wait-color);
-        font-size: var(--pisell-step-description-font-size);
-        line-height: var(--pisell-step-description-line-height);
-      }
-
-      >.ant-steps-item-container>.ant-steps-item-tail::after {
-        background-color: var(--pisell-step-connector-color-wait);
+  // 覆盖 Ant Design 默认样式，使用自定义主题色
+  .ant-steps-item-finish {
+    .ant-steps-item-icon {
+      background-color: var(--pisell-steps-primary-light);
+      border-color: var(--pisell-steps-primary-color);
+      
+      > .ant-steps-icon {
+        color: var(--pisell-steps-primary-color);
       }
     }
-
-    // ==================== 错误状态样式 ====================
-    .ant-steps-item-error {
-      .ant-steps-item-icon {
-        background-color: var(--pisell-step-error-bg);
-        border-color: var(--pisell-step-error-color);
-
-        .ant-steps-icon {
-          color: var(--pisell-step-error-color);
-        }
-      }
-
-      .ant-steps-item-title {
-        color: var(--pisell-step-error-color);
-      }
-
-      .ant-steps-item-description {
-        color: var(--pisell-step-error-color);
-      }
-
-      >.ant-steps-item-container>.ant-steps-item-tail::after {
-        background-color: var(--pisell-step-error-color);
-      }
+    
+    .ant-steps-item-tail::after {
+      background-color: var(--pisell-steps-primary-color);
     }
   }
-}
 
-// ==================== 小尺寸样式 ====================
-.pisell-steps-small {
-  :global {
+  .ant-steps-item-process {
     .ant-steps-item-icon {
-      width: var(--pisell-step-icon-size-small);
-      height: var(--pisell-step-icon-size-small);
-      line-height: var(--pisell-step-icon-size-small);
-      font-size: 12px;
-    }
-
-    .ant-steps-item-title {
-      font-size: var(--pisell-step-title-font-size-small) !important;
-      line-height: var(--pisell-step-title-line-height-small) !important;
-    }
-
-    .ant-steps-item-description {
-      font-size: var(--pisell-step-description-font-size-small) !important;
-      line-height: var(--pisell-step-description-line-height-small) !important;
+      background-color: var(--pisell-steps-primary-color);
+      border-color: var(--pisell-steps-primary-color);
+      
+      > .ant-steps-icon {
+        color: #ffffff;
+      }
     }
   }
-}
 
-// ==================== 圆点样式 ====================
-.pisell-steps-dot {
-  :global {
+  .ant-steps-item-wait {
     .ant-steps-item-icon {
-      width: var(--pisell-step-dot-size);
-      height: var(--pisell-step-dot-size);
-      border: none;
-
-      .ant-steps-icon-dot {
-        width: var(--pisell-step-dot-size);
-        height: var(--pisell-step-dot-size);
-      }
-    }
-
-    // 进行中的圆点稍大
-    .ant-steps-item-process .ant-steps-item-icon {
-      width: var(--pisell-step-dot-size-active);
-      height: var(--pisell-step-dot-size-active);
-
-      .ant-steps-icon-dot {
-        width: var(--pisell-step-dot-size-active);
-        height: var(--pisell-step-dot-size-active);
+      background-color: var(--pisell-steps-border-color);
+      border-color: var(--pisell-steps-border-color);
+      
+      > .ant-steps-icon {
+        color: var(--pisell-steps-text-secondary);
       }
     }
-
-    // 圆点样式下的文本居中
-    .ant-steps-item-content {
-      text-align: center;
-    }
   }
 
-  // 小尺寸圆点
-  &.pisell-steps-small {
-    :global {
-      .ant-steps-item-icon {
-        width: var(--pisell-step-dot-size-small);
-        height: var(--pisell-step-dot-size-small);
-
-        .ant-steps-icon-dot {
-          width: var(--pisell-step-dot-size-small);
-          height: var(--pisell-step-dot-size-small);
-        }
-      }
-
-      .ant-steps-item-process .ant-steps-item-icon {
-        width: var(--pisell-step-dot-size-active-small);
-        height: var(--pisell-step-dot-size-active-small);
-
-        .ant-steps-icon-dot {
-          width: var(--pisell-step-dot-size-active-small);
-          height: var(--pisell-step-dot-size-active-small);
-        }
+  .ant-steps-item-error {
+    .ant-steps-item-icon {
+      background-color: var(--pisell-steps-error-color);
+      border-color: var(--pisell-steps-error-color);
+      
+      > .ant-steps-icon {
+        color: #ffffff;
       }
     }
   }
 }
 
-// ==================== 隐藏连接器 ====================
-.pisell-steps-no-connector {
-  :global {
-    .ant-steps-item-tail {
-      display: none !important;
-    }
-  }
-}
+// ============ 可点击样式 ============
+.@{pisell-steps-prefix}-clickable {
+  .ant-steps-item {
+    cursor: pointer;
+    transition: all 0.3s ease;
 
-// ==================== 响应式样式 ====================
-.pisell-steps-responsive {
-  &.pisell-steps-horizontal {
-    @media (max-width: 768px) {
-      overflow-x: auto;
-      overflow-y: hidden;
-
-      :global {
-        .ant-steps-item {
-          flex-shrink: 0;
-          min-width: 120px;
-        }
+    &:hover {
+      .ant-steps-item-icon {
+        transform: scale(1.1);
       }
     }
 
-    @media (max-width: 480px) {
-      :global {
-        .ant-steps-item {
-          min-width: 100px;
-        }
-
+    &-finish {
+      &:hover {
         .ant-steps-item-title {
-          font-size: 14px !important;
-        }
-
-        .ant-steps-item-description {
-          font-size: 12px !important;
+          color: var(--pisell-steps-primary-color);
         }
       }
     }
   }
 }
 
-// ==================== 竖向标签布局 ====================
-.pisell-steps-label-vertical {
-  :global {
-    .ant-steps-item-content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-
-      .ant-steps-item-title {
-        padding-top: var(--pisell-step-margin-xs);
-      }
-    }
+// ============ 尺寸变体 ============
+.@{pisell-steps-prefix}-small {
+  .ant-steps-item-icon {
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+  }
+  
+  .ant-steps-item-title {
+    font-size: 14px;
+  }
+  
+  .ant-steps-item-description {
+    font-size: 12px;
   }
 }
 
-// ==================== 图标底部对齐 ====================
-.pisell-steps-icon-bottom {
-  &.pisell-steps-vertical {
-    :global {
-      .ant-steps-item-icon {
-        order: 2;
-      }
+.@{pisell-steps-prefix}-large {
+  .ant-steps-item-icon {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 18px;
+  }
+  
+  .ant-steps-item-title {
+    font-size: 18px;
+  }
+  
+  .ant-steps-item-description {
+    font-size: 16px;
+  }
+}
 
-      .ant-steps-item-content {
-        order: 1;
-      }
+// ============ 类型变体 ============
+// Dot 类型
+.@{pisell-steps-prefix}-dot {
+  .ant-steps-item-icon {
+    width: 8px;
+    height: 8px;
+    
+    .ant-steps-icon-dot {
+      width: 8px;
+      height: 8px;
     }
   }
 }
 
-// ==================== 导航类型样式 ====================
-.pisell-steps-navigation {
-  :global {
-    .ant-steps-item {
-      padding-left: 0;
-      overflow: visible;
-
-      &::before {
-        display: none;
-      }
-
-      .ant-steps-item-container {
-        padding: var(--pisell-step-padding-xs) var(--pisell-step-margin);
-        background-color: #fafafa;
-        border-radius: 4px;
-        transition: all 0.3s ease;
-
-        &:hover {
-          background-color: #f0f0f0;
-        }
-      }
-
-      &.ant-steps-item-active .ant-steps-item-container {
-        background-color: var(--pisell-step-finish-bg);
-        box-shadow: 0 2px 4px rgba(127, 86, 217, 0.1);
-      }
-
-      &.ant-steps-item-finish .ant-steps-item-container:hover {
-        background-color: var(--pisell-step-finish-bg);
-      }
+// Navigation 类型
+.@{pisell-steps-prefix}-navigation {
+  .ant-steps-item {
+    padding: 12px 24px;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: -12px;
+      width: 0;
+      height: 0;
+      border-top: 24px solid transparent;
+      border-bottom: 24px solid transparent;
+      border-left: 12px solid var(--pisell-steps-border-color);
+      z-index: 1;
     }
   }
 }
 
-// ==================== 行内类型样式 ====================
-.pisell-steps-inline {
-  :global {
+// ============ 响应式样式 ============
+.@{pisell-steps-prefix}-responsive {
+  @media (max-width: 768px) {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    
     .ant-steps {
-      display: inline-flex;
+      min-width: max-content;
     }
-
+    
     .ant-steps-item {
-      display: inline-flex;
-      padding-inline-start: 0;
-
-      .ant-steps-item-icon {
-        margin-right: var(--pisell-step-margin-xs);
-      }
-
-      .ant-steps-item-content {
-        display: inline-block;
-      }
+      min-width: 120px;
+      flex-shrink: 0;
     }
   }
-}
-
-// ==================== 可点击步骤样式 ====================
-.pisell-steps {
-  :global {
-
-    // 已完成的步骤可点击
-    .ant-steps-item-finish:not(.ant-steps-item-disabled) {
-      cursor: pointer;
-
-      .ant-steps-item-container {
-        transition: all 0.3s ease;
+  
+  @media (max-width: 480px) {
+    .ant-steps-item {
+      min-width: 100px;
+      
+      .ant-steps-item-title {
+        font-size: 12px;
       }
-
-      &:hover {
-        .ant-steps-item-icon {
-          border-color: var(--pisell-step-process-color);
-          box-shadow: 0 0 0 2px rgba(127, 86, 217, 0.1);
-        }
-
-        .ant-steps-item-title {
-          color: var(--pisell-step-process-color);
-        }
+      
+      .ant-steps-item-description {
+        display: none;
       }
-
-      // 激活状态
-      &:active {
-        .ant-steps-item-icon {
-          transform: scale(0.95);
-        }
+      
+      .ant-steps-item-icon {
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        font-size: 12px;
       }
     }
+  }
+}
 
-    // 添加可点击样式类
-    .pisell-steps-item-clickable {
-      cursor: pointer;
-    }
-
-    // 禁用状态
-    .ant-steps-item-disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
+// ============ 栅格布局 ============
+.@{pisell-steps-prefix}-grid-layout {
+  .ant-steps {
+    display: grid;
+    grid-template-columns: repeat(var(--pisell-steps-grid-columns), 1fr);
+    gap: var(--pisell-steps-margin);
+  }
+}
 
-      .ant-steps-item-container {
-        pointer-events: none;
-      }
+// ============ 连接器位置 ============
+.@{pisell-steps-prefix}-connector-top {
+  .ant-steps-item-tail {
+    top: 8px;
+  }
+}
 
-      &:hover {
+.@{pisell-steps-prefix}-connector-bottom {
+  .ant-steps-item-tail {
+    top: auto;
+    bottom: 8px;
+  }
+}
 
-        .ant-steps-item-icon,
-        .ant-steps-item-title {
-          border-color: inherit;
-          color: inherit;
-        }
-      }
+// ============ 项布局 ============
+.@{pisell-steps-prefix}-item-vertical {
+  .ant-steps-item {
+    flex-direction: column;
+    
+    .ant-steps-item-icon {
+      margin-bottom: var(--pisell-steps-item-gap);
     }
   }
 }
 
-// ==================== 动画效果 ====================
-.pisell-steps {
-  :global {
-    .ant-steps-item {
-      transition: all 0.3s ease;
-    }
+// ============ 动画效果 ============
+.@{pisell-steps-prefix}-animated {
+  .ant-steps-item {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .ant-steps-item-icon {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .ant-steps-item-tail::after {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
 
-    .ant-steps-item-icon {
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
+// ============ 进度百分比显示 ============
+.@{pisell-steps-prefix}-progress-info {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  
+  .@{pisell-steps-prefix}-progress-percent {
+    display: inline-block;
+    padding: 2px 8px;
+    background-color: var(--pisell-steps-primary-color);
+    color: #ffffff;
+    font-size: 12px;
+    border-radius: 10px;
+    font-weight: 500;
+  }
+}
 
-    .ant-steps-item-title,
-    .ant-steps-item-description {
-      transition: color 0.3s ease;
+// ============ 竖向布局特殊样式 ============
+.@{pisell-steps-prefix}-vertical {
+  .ant-steps-item {
+    padding-bottom: var(--pisell-steps-margin);
+    
+    &:last-child {
+      padding-bottom: 0;
     }
+  }
+  
+  .@{pisell-steps-prefix}-progress-info {
+    left: 16px;
+    transform: translateY(-50%);
+  }
+}
 
-    .ant-steps-item-tail::after {
-      transition: background-color 0.3s ease;
+// ============ 自定义图标尺寸 ============
+.@{pisell-steps-prefix} {
+  .ant-steps-item-icon {
+    width: var(--pisell-steps-icon-size);
+    height: var(--pisell-steps-icon-size);
+    line-height: var(--pisell-steps-icon-size);
+    
+    .ant-steps-icon {
+      color: var(--pisell-steps-icon-color);
     }
   }
 }
 
-// ==================== 打印样式优化 ====================
-@media print {
-  .pisell-steps {
-    :global {
+// ============ 禁用状态 ============
+.@{pisell-steps-prefix} {
+  .ant-steps-item-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    
+    &:hover {
       .ant-steps-item-icon {
-        box-shadow: none !important;
+        transform: none;
       }
     }
   }
-}
+}