chore: adjust deployment modal form

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>