chore: adjust deployment modal form

src/components/echarts/gauge.tsx

@@ -4,6 +4,16 @@ import EmptyData from '@/components/empty-data';
 import React, { memo } from 'react';
 import { ChartProps } from './types';
 
+const strokeColorFunc = (percent: number) => {
+  if (percent <= 50 || percent === undefined) {
+    return 'rgb(84, 204, 152, 80%)';
+  }
+  if (percent <= 80) {
+    return 'rgba(250, 173, 20, 80%)';
+  }
+  return 'rgba(255, 77, 79, 80%)';
+};
+
 const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
   props
 ) => {
@@ -18,6 +28,7 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
   }
 
   const setDataOptions = () => {
+    const colorValue = color || strokeColorFunc(value);
     return {
       title: {
         ...titleConfig,
@@ -33,7 +44,7 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
             lineStyle: {
               ...gaugeItemConfig.axisLine.lineStyle,
               color: [
-                [value / 100, color],
+                [value / 100, colorValue],
                 [1, chartColorMap.gaugeBgColor]
               ]
             }

src/components/seal-form/checkbox-field.tsx

@@ -0,0 +1,27 @@
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Checkbox, Tooltip } from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import React from 'react';
+
+const CheckboxField: React.FC<{
+  description?: React.ReactNode;
+  label: React.ReactNode;
+  checked?: boolean;
+  onChange?: (e: CheckboxChangeEvent) => void;
+}> = ({ description, label, checked, onChange }) => {
+  return (
+    <Checkbox className="p-l-6" checked={checked} onChange={onChange}>
+      <Tooltip title={description || false}>
+        <span style={{ color: 'var(--ant-color-text-tertiary)' }}>{label}</span>
+        {!!description && (
+          <QuestionCircleOutlined
+            className="m-l-4"
+            style={{ color: 'var(--ant-color-text-tertiary)' }}
+          />
+        )}
+      </Tooltip>
+    </Checkbox>
+  );
+};
+
+export default CheckboxField;

src/components/templates/card-list.tsx

@@ -15,14 +15,18 @@ const SpinWrapper = styled.div`
   left: 0;
   max-height: 400px;
   right: 0;
+  .skelton-wrapper {
+    width: 100%;
+  }
 `;
 
 interface CatalogListProps {
+  defaultSpan?: number;
+  resizable?: boolean;
   dataList: any[];
   loading: boolean;
   activeId: number;
   isFirst: boolean;
-  onDeploy: (data: any) => void;
   renderItem: (data: any) => React.ReactNode;
   Skeleton: React.ComponentType<{ span: number }>;
 }
@@ -60,8 +64,16 @@ const ListSkeleton: React.FC<{
 };
 
 const CardList: React.FC<CatalogListProps> = (props) => {
-  const { dataList, loading, isFirst, Skeleton, renderItem } = props;
-  const [span, setSpan] = React.useState(8);
+  const {
+    dataList,
+    loading,
+    isFirst,
+    defaultSpan = 8,
+    resizable = true,
+    Skeleton,
+    renderItem
+  } = props;
+  const [span, setSpan] = React.useState(defaultSpan);
 
   const getSpanByWidth = (width: number) => {
     if (width < breakpoints.md) return 24;
@@ -78,8 +90,8 @@ const CardList: React.FC<CatalogListProps> = (props) => {
 
   return (
     <div className="relative" style={{ width: '100%' }}>
-      <ResizeObserver onResize={handleResize}>
-        <div>
+      <ResizeObserver onResize={handleResize} disabled={!resizable}>
+        <div style={{ width: '100%' }}>
           <Row gutter={[16, 16]}>
             {dataList.map((item: any, index) => {
               return (

src/components/templates/card-skelton.tsx

@@ -0,0 +1,34 @@
+import { Col, Row, Skeleton } from 'antd';
+import React from 'react';
+
+interface CatalogSkeltonProps {
+  span: number;
+}
+
+const CardSkelton: React.FC<CatalogSkeltonProps> = (props) => {
+  return (
+    <Row gutter={[16, 16]}>
+      {Array(6)
+        .fill(1)
+        .map((_, index) => {
+          return (
+            <Col span={props.span} key={index}>
+              <Skeleton
+                avatar={{
+                  size: 32
+                }}
+                paragraph={{ rows: 2 }}
+                style={{
+                  border: '1px solid var(--ant-color-border)',
+                  borderRadius: 'var(--border-radius-base)',
+                  padding: '16px 16px'
+                }}
+              ></Skeleton>
+            </Col>
+          );
+        })}
+    </Row>
+  );
+};
+
+export default React.memo(CardSkelton);

src/components/templates/card.tsx

@@ -6,6 +6,9 @@ interface CardProps {
   height?: string | number;
   className?: string;
   children?: React.ReactNode;
+  clickable?: boolean;
+  ghost?: boolean;
+  onClick?: () => void;
 }
 
 const CardWrapper = styled.div`
@@ -17,24 +20,43 @@ const CardWrapper = styled.div`
   align-items: flex-start;
   border: 1px solid var(--ant-color-border);
   border-radius: var(--border-radius-base);
-  cursor: pointer;
+  cursor: default;
   width: 100%;
   &:hover {
     background-color: var(--ant-color-fill-tertiary);
+    transition: background-color 0.2s ease;
+  }
+
+  &.ghost {
+    background-color: transparent;
   }
 
   &.active {
     background-color: var(--ant-color-fill-tertiary);
   }
+  &.clickable {
+    cursor: pointer;
+  }
 `;
 
 const Card: React.FC<CardProps> = (props) => {
-  const { className, height, children } = props;
+  const {
+    className,
+    height,
+    children,
+    clickable = true,
+    ghost = false,
+    onClick
+  } = props;
 
   return (
     <CardWrapper
-      className={classNames('card-wrapper', className)}
+      className={classNames(className, {
+        clickable: clickable,
+        ghost: ghost
+      })}
       style={{ height: height || '180px' }}
+      onClick={onClick}
     >
       {children}
     </CardWrapper>