refactor: create cluster by steps

src/components/dynamic-form/components/list-map.tsx

@@ -5,20 +5,6 @@ import React, { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import FormWidget from './form-widget';
 
-interface ListMapProps {
-  dataList: any[];
-  label?: React.ReactNode;
-  btnText?: string;
-  properties: Record<string, any>;
-  onChange?: (data: any) => void;
-}
-
-interface ListItemProps {
-  schemaList: any[];
-  data: Record<string, any>;
-  onChange?: (data: any) => void;
-}
-
 const RowWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -32,6 +18,20 @@ const WidgetBox = styled.div`
   gap: 8px;
   width: 100%;
 `;
+interface ListMapProps {
+  minItems?: number;
+  dataList: any[];
+  label?: React.ReactNode;
+  btnText?: string;
+  properties: Record<string, any>;
+  onChange?: (data: any) => void;
+}
+
+interface ListItemProps {
+  schemaList: any[];
+  data: Record<string, any>;
+  onChange?: (data: any) => void;
+}
 
 const ListItem: React.FC<ListItemProps> = ({ schemaList, data, onChange }) => {
   const handleValueChange = (name: string, target: any) => {
@@ -65,6 +65,7 @@ const ListMap: React.FC<ListMapProps> = ({
   label,
   btnText,
   properties = {},
+  minItems = 0,
   onChange
 }) => {
   const [items, setItems] = React.useState(dataList || []);
@@ -99,11 +100,15 @@ const ListMap: React.FC<ListMapProps> = ({
   };
 
   useEffect(() => {
-    if (!dataList.length) {
+    if (!dataList.length && minItems > 0) {
       handleOnAdd();
     }
   }, []);
 
+  useEffect(() => {
+    setItems(dataList);
+  }, [dataList]);
+
   return (
     <Wrapper label={label} btnText={btnText} onAdd={handleOnAdd}>
       {items.map((item, index) => (

src/components/icon-font/icons.ts

@@ -35,7 +35,13 @@ const icons = {
   Deployment: React.createElement(IconFont, { type: 'icon-rocket-launch1' }),
   Docker: React.createElement(IconFont, { type: 'icon-docker' }),
   DigitalOcean: React.createElement(IconFont, { type: 'icon-digitalocean' }),
-  DetailInfo: React.createElement(IconFont, { type: 'icon-detail-info' })
+  DetailInfo: React.createElement(IconFont, { type: 'icon-detail-info' }),
+  HuaweiCloud: React.createElement(IconFont, { type: 'icon-huaweicloud' }),
+  AliCloud: React.createElement(IconFont, { type: 'icon-alicloud' }),
+  TencentCloud: React.createElement(IconFont, { type: 'icon-tencentcloud' }),
+  Nvidia: React.createElement(IconFont, { type: 'icon-nvidia' }),
+  Ascend: React.createElement(IconFont, { type: 'icon-ascend' }),
+  AMD: React.createElement(IconFont, { type: 'icon-amd' })
 };
 
 export default icons;

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_wy0l8ooa03c.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_l0y0uhurkz8.js'
 });
 
 export default IconFont;

src/components/status-tag/index.less

@@ -9,6 +9,7 @@
   width: max-content;
   height: 24px;
   font-size: var(--font-size-small);
+  font-weight: 400;
   overflow: hidden;
 
   .txt {

src/components/templates/card.tsx

@@ -10,20 +10,23 @@ interface CardProps {
   ghost?: boolean;
   header?: React.ReactNode;
   footer?: React.ReactNode;
+  icon?: React.ReactNode;
+  active?: boolean;
+  disabled?: boolean;
   onClick?: () => void;
 }
 
 const CardWrapper = styled.div`
   overflow: hidden;
   display: flex;
-  flex-direction: column;
+  padding: 22px;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   border: 1px solid var(--ant-color-border);
   border-radius: var(--border-radius-base);
   cursor: default;
   width: 100%;
-  &:hover {
+  &.clickable:hover:not(.disabled) {
     background-color: var(--ant-color-fill-tertiary);
     transition: background-color 0.2s ease;
   }
@@ -35,15 +38,47 @@ const CardWrapper = styled.div`
   &.active {
     background-color: var(--ant-color-fill-tertiary);
   }
-  &.clickable {
+
+  &.clickable:not(.disabled) {
     cursor: pointer;
   }
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+    background-color: var(--ant-color-fill-quaternary);
+  }
 `;
 
 const CardContent = styled.div`
-  padding: 16px 20px;
   width: 100%;
   flex: 1;
+  color: var(--ant-color-text-tertiary);
+`;
+
+const Inner = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 8px;
+  line-height: 1.5;
+`;
+
+const Icon = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+  font-size: 46px;
+`;
+
+const Header = styled.div`
+  font-weight: bold;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 `;
 
 const Card: React.FC<CardProps> = (props) => {
@@ -55,6 +90,9 @@ const Card: React.FC<CardProps> = (props) => {
     ghost = false,
     header,
     footer,
+    icon,
+    active,
+    disabled,
     onClick
   } = props;
 
@@ -62,14 +100,19 @@ const Card: React.FC<CardProps> = (props) => {
     <CardWrapper
       className={classNames(className, {
         clickable: clickable,
+        active: active,
+        disabled: disabled,
         ghost: ghost
       })}
       style={{ height: height || '180px' }}
       onClick={onClick}
     >
-      {header}
-      <CardContent>{children}</CardContent>
-      {footer}
+      {icon && <Icon>{icon}</Icon>}
+      <Inner>
+        {header && <Header>{header}</Header>}
+        <CardContent>{children}</CardContent>
+        {footer}
+      </Inner>
     </CardWrapper>
   );
 };