style: cluster creation steps

src/pages/cluster-management/components/cluster-steps.tsx

@@ -1,4 +1,5 @@
 import { CheckCircleFilled, CheckCircleOutlined } from '@ant-design/icons';
+import { Steps } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -14,6 +15,12 @@ const Box = styled.div`
     font-size: 14px;
     margin-bottom: 24px;
   }
+  .ant-steps {
+    --steps-title-font-size: 14px;
+    .ant-steps-item {
+      --steps-item-base-width: 20px;
+    }
+  }
 `;
 
 const StepItemWrapper = styled.div`
@@ -86,19 +93,30 @@ const ClusterSteps: React.FC<{
 }> = (props) => {
   const { steps, currentStep = 0, onChange } = props;
 
+  const visibleSteps = steps.filter((step) => !step.hideInSteps);
   return (
     <Box>
-      <div className="indicates">
-        STEP {currentStep + 1} OF {steps.length}
-      </div>
       <Wrapper>
-        {steps.map((item, index) => (
+        {/* {visibleSteps.map((item, index) => (
           <StepsItem
             key={index}
             active={currentStep === index}
             item={item}
           ></StepsItem>
-        ))}
+        ))} */}
+        <Steps
+          current={currentStep}
+          items={visibleSteps}
+          type="panel"
+          styles={{
+            item: {
+              paddingBlock: 0
+            },
+            itemRail: {
+              borderColor: 'var(--ant-color-split)'
+            }
+          }}
+        ></Steps>
       </Wrapper>
     </Box>
   );