style: cluster creation modal

src/pages/cluster-management/step-forms/basic-form.tsx

@@ -1,4 +1,3 @@
-import PageTools from '@/components/page-tools';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
@@ -40,7 +39,7 @@ const BasicForm = forwardRef((props: BasicFormProps, ref) => {
 
   return (
     <div>
-      <PageTools
+      {/* <PageTools
         marginBottom={16}
         left={
           <Title>
@@ -48,7 +47,7 @@ const BasicForm = forwardRef((props: BasicFormProps, ref) => {
           </Title>
         }
         marginTop={0}
-      ></PageTools>
+      ></PageTools> */}
       <ClusterForm
         provider={provider}
         action={action}

src/pages/cluster-management/step-forms/use-step-list.tsx

@@ -15,8 +15,11 @@ export default function useStepList() {
   return useMemo(
     () => [
       {
-        title: intl.formatMessage({ id: 'clusters.create.selectProvider' }),
-        content: '',
+        title: intl.formatMessage({ id: 'clusters.table.provider' }),
+        content: 'Choose where your cluster will run.',
+        subTitle: 'Select Provider',
+        description:
+          'Choose the environment where your cluster will be deployed.',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: false,
@@ -31,8 +34,10 @@ export default function useStepList() {
         providers: []
       },
       {
-        title: intl.formatMessage({ id: 'clusters.create.configBasic' }),
-        content: '',
+        title: intl.formatMessage({ id: 'common.title.config' }),
+        content: 'Configure your cluster settings.',
+        description:
+          'Set the cluster name, description, or other essential parameters in advanced settings.',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: true,
@@ -48,7 +53,7 @@ export default function useStepList() {
       },
       {
         title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
-        content: '',
+        content: 'Add worker pools to your cluster.',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: true,
@@ -65,7 +70,9 @@ export default function useStepList() {
       },
       {
         title: intl.formatMessage({ id: 'resources.button.create' }),
-        content: '',
+        content: 'The cluster is created successfully.',
+        description:
+          'The cluster is now set up and you can add workers to it. You can also add workers later from the cluster list.',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: false,
@@ -82,6 +89,8 @@ export default function useStepList() {
       {
         title: intl.formatMessage({ id: 'clusters.button.register' }),
         content: '',
+        description:
+          'Register an existing Kubernetes cluster to manage its workers. You can also register a cluster later from the cluster list.',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: false,

src/pages/cluster-management/step-forms/worker-pools-form.tsx

@@ -181,20 +181,15 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
       <PageTools
         marginBottom={22}
         marginTop={0}
+        // left={
+        //   <span className="flex-center gap-16">
+        //     <Title>
+        //       {intl.formatMessage({ id: 'clusters.workerpool.title' })}
+        //     </Title>
+        //   </span>
+        // }
         left={
-          <span className="flex-center gap-16">
-            <Title>
-              {intl.formatMessage({ id: 'clusters.workerpool.title' })}
-            </Title>
-          </span>
-        }
-        right={
-          <Button
-            onClick={handleAddPool}
-            variant="filled"
-            color="default"
-            icon={<PlusOutlined />}
-          >
+          <Button onClick={handleAddPool} type="link" icon={<PlusOutlined />}>
             {intl.formatMessage({ id: 'clusters.button.addNodePool' })}
           </Button>
         }