refactor: create cluster by steps

2025-09-16 11:26:17 +08:00
parent 6e5a7035c8
commit 8de272239e
48 changed files with 1392 additions and 227 deletions
@@ -0,0 +1,42 @@
+import { Steps } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+
+const { Step } = Steps;
+
+const Wrapper = styled.div`
+  padding-block: 20px;
+  background-color: var(--ant-color-bg-container);
+  .ant-steps-item-description {
+    max-width: 300px !important;
+    color: var(--ant-color-text-description) !important;
+  }
+  .ant-steps-item-content > .ant-steps-item-title {
+    font-weight: 600;
+  }
+`;
+
+const ClusterSteps: React.FC<{
+  currentStep: number;
+  onChange: (step: number) => void;
+  steps: any[];
+}> = (props) => {
+  const { steps, currentStep, onChange } = props;
+
+  return (
+    <Wrapper>
+      <Steps current={currentStep} size="small" onChange={onChange}>
+        {steps.map((step) => (
+          <Step
+            disabled={step.disabled}
+            key={step.title}
+            title={step.title}
+            description={step.content}
+          />
+        ))}
+      </Steps>
+    </Wrapper>
+  );
+};
+
+export default ClusterSteps;