refactor: create cluster ux

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

@@ -7,8 +7,7 @@ const { Step } = Steps;
 const Wrapper = styled.div`
   width: min(1200px, 100%);
   margin: 0 auto;
-  padding-block: 30px;
-  background-color: var(--ant-color-bg-container);
+  padding-block: 0px;
   .ant-steps-item-description {
     max-width: 300px !important;
     color: var(--ant-color-text-description) !important;
@@ -24,7 +23,12 @@ const ClusterSteps: React.FC<{
 
   return (
     <Wrapper>
-      <Steps current={currentStep} size="small" onChange={onChange} progressDot>
+      <Steps
+        current={currentStep}
+        size="small"
+        onChange={onChange}
+        direction="vertical"
+      >
         {steps.map((step) => (
           <Step
             key={step.title}

src/pages/cluster-management/components/footer-buttons.tsx

@@ -37,15 +37,19 @@ const FooterButtons: React.FC<FooterButtonsProps> = (props) => {
     onNext();
   };
   return (
-    <Title style={{ height: 64 }}>
-      <div className="flex-center gap-16">
+    <Title style={{ padding: '16px 24px 32px' }}>
+      <div className="flex-center gap-20">
         {showButtons.previous && (
-          <Button type="link" icon={<LeftOutlined />} onClick={onPrevious}>
+          <Button type="default" icon={<LeftOutlined />} onClick={onPrevious}>
             {intl.formatMessage({ id: 'common.button.prev' })}
           </Button>
         )}
         {showButtons.next && (
-          <Button type="link" onClick={handleOnNext}>
+          <Button
+            type="primary"
+            onClick={handleOnNext}
+            style={{ minWidth: 100 }}
+          >
             {intl.formatMessage({ id: 'common.button.next' })}
             <RightOutlined />
           </Button>
@@ -62,7 +66,8 @@ const FooterButtons: React.FC<FooterButtonsProps> = (props) => {
             style={{ minWidth: 88 }}
             loading={loading}
           >
-            {intl.formatMessage({ id: 'common.button.save' })}
+            {/* {intl.formatMessage({ id: 'common.button.save' })} */}
+            Create & Continue
           </Button>
         )}
       </div>

src/pages/cluster-management/components/provider-catalog.tsx

@@ -1,3 +1,4 @@
+import IconFont from '@/components/icon-font';
 import Card from '@/components/templates/card';
 import { useIntl } from '@umijs/max';
 import React, { useMemo } from 'react';
@@ -10,7 +11,7 @@ const Wrapper = styled.div<{ $cols?: number }>`
   grid-template-columns: repeat(${(props) => props.$cols || 3}, 1fr);
   gap: 16px;
   .template-card-wrapper {
-    padding: 10px;
+    padding: 10px 16px;
   }
   .template-card-inner {
     justify-content: center;
@@ -21,16 +22,26 @@ const Container = styled.div`
   display: flex;
   margin: 0 auto;
   flex-direction: column;
-  gap: 16px;
+  gap: 24px;
 `;
 
 const Title = styled.span`
   display: flex;
+  gap: 8px;
   align-items: center;
-  justify-content: space-between;
   font-weight: 700;
-  font-size: 16px;
-  margin-block: 20px 16px;
+  font-size: 14px;
+  margin-bottom: 16px;
+  .icon {
+    color: var(--ant-color-text-secondary);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background-color: var(--ant-color-fill-tertiary);
+  }
 `;
 
 const Header = styled.div`
@@ -38,6 +49,9 @@ const Header = styled.div`
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
+  .title {
+    font-weight: 500;
+  }
   .description {
     font-size: 13px;
     font-weight: 400;
@@ -47,6 +61,7 @@ const Header = styled.div`
 
 interface ProviderCatalogProps {
   onSelect?: (provider: string, item: any) => void;
+  groupIcons?: Record<string, string>;
   cols?: number;
   current?: ProviderType | string;
   clickable?: boolean;
@@ -64,6 +79,7 @@ interface ProviderCatalogProps {
 
 const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
   onSelect,
+  groupIcons,
   cols = 3,
   dataList,
   clickable,
@@ -86,7 +102,7 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
   const renderTitle = (item: any) => {
     return (
       <Header>
-        <span>
+        <span className="title">
           {item.locale ? intl.formatMessage({ id: item.label }) : item.label}
         </span>
         {item.description && (
@@ -103,7 +119,14 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
       {Object.entries(groupList).map(([groupName, items]) => (
         <div key={groupName}>
           {groupName !== 'default' && (
-            <Title>{intl.formatMessage({ id: groupName })}</Title>
+            <Title>
+              {groupIcons && groupIcons[groupName] && (
+                <span className="icon">
+                  <IconFont type={groupIcons[groupName]} />
+                </span>
+              )}
+              <span>{intl.formatMessage({ id: groupName })}</span>
+            </Title>
           )}
           <Wrapper $cols={cols}>
             {items?.map((action) => (

src/pages/cluster-management/components/support-gpus.tsx

@@ -141,11 +141,11 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
     <Box>
       <ProviderCatalog
         onSelect={onSelect}
-        height={50}
+        height={60}
         current={current}
         dataList={supportedHardPlatforms}
         clickable={clickable}
-        cols={4}
+        cols={3}
       />
     </Box>
   );