style: large modal height responsive

src/pages/cluster-management/components/add-pool.tsx

@@ -67,9 +67,11 @@ const AddPool: React.FC<AddModalProps> = ({
       onCancel={handleCancel}
       destroyOnHidden={true}
       closeIcon={true}
+      centered={true}
       maskClosable={false}
       keyboard={false}
       width={600}
+      maxContentHeight={'max(calc(100vh - 300px), 500px)'}
       footer={
         <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
       }

src/pages/cluster-management/components/add-worker-step.tsx

@@ -62,7 +62,7 @@ const Container = styled.div`
   width: 800px;
   margin: 0 auto;
   .command-info {
-    margin-top: 24px;
+    margin-top: 16px;
     margin-bottom: 8px;
   }
 `;

src/pages/cluster-management/components/add-worker.tsx

@@ -24,17 +24,15 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
     <ScrollerModal
       title={intl.formatMessage({ id: 'resources.button.create' })}
       open={open}
-      centered={false}
+      centered={true}
       onCancel={onCancel}
       destroyOnHidden={true}
       closeIcon={true}
       maskClosable={false}
       keyboard={false}
       width={860}
-      style={{
-        top: 100
-      }}
-      maxContentHeight={600}
+      style={{}}
+      maxContentHeight={'max(calc(100vh - 200px), 600px)'}
       footer={null}
     >
       <AddWorkerStep registrationInfo={registrationInfo} provider={provider} />

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

@@ -10,7 +10,7 @@ const Wrapper = styled.div<{ $cols?: number }>`
   grid-template-columns: repeat(${(props) => props.$cols || 3}, 1fr);
   gap: 16px;
   .template-card-wrapper {
-    padding: 16px;
+    padding: 10px;
   }
   .template-card-inner {
     justify-content: center;

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

@@ -140,7 +140,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
     <Box>
       <ProviderCatalog
         onSelect={onSelect}
-        height={60}
+        height={50}
         current={current}
         dataList={supportedHardPlatforms}
         clickable={clickable}

src/pages/resources/components/update-labels.tsx

@@ -47,7 +47,7 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
       maskClosable={false}
       keyboard={false}
       width={600}
-      maxContentHeight={550}
+      maxContentHeight={'max(calc(100vh - 300px), 500px)'}
       footer={
         <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
       }

src/pages/resources/components/workers.tsx

@@ -11,7 +11,6 @@ import { Button, ConfigProvider, Table, message } from 'antd';
 import { useAtom } from 'jotai';
 import React, { useEffect, useState } from 'react';
 import NoResult from '../../_components/no-result';
-import TerminalTabs from '../../_components/terminal-tabs';
 import {
   WORKERS_API,
   deleteWorker,
@@ -71,16 +70,6 @@ const Workers: React.FC = () => {
     open: false,
     currentData: null
   });
-  const [terminals, setTerminals] = useState<{ url: string; name: string }[]>(
-    []
-  );
-  const [terminalModalStatus, setTerminalModalStatus] = useState<{
-    open: boolean;
-    currentActive: string;
-  }>({
-    open: false,
-    currentActive: ''
-  });
 
   const getClusterList = async () => {
     try {
@@ -165,19 +154,6 @@ const Workers: React.FC = () => {
         name: record.name
       });
     }
-    if (val === 'terminal') {
-      const url = `/api/workers/${record.id}/terminal`;
-      setTerminals((prev) => {
-        return [
-          ...prev,
-          {
-            url,
-            name: record.name
-          }
-        ];
-      });
-      setTerminalModalStatus({ open: true, currentActive: url });
-    }
   });
 
   const handleAddWorker = () => {
@@ -212,11 +188,6 @@ const Workers: React.FC = () => {
     });
   };
 
-  const handleTerminalClose = () => {
-    setTerminalModalStatus({ open: false, currentActive: '' });
-    setTerminals([]);
-  };
-
   const columns = useWorkerColumns({
     clusterData,
     loadend: dataSource.loadend,
@@ -282,14 +253,6 @@ const Workers: React.FC = () => {
             setWorkerDetailStatus({ currentData: null, open: false })
           }
         />
-        <TerminalTabs
-          height={300}
-          key="terminal-tabs"
-          terminals={terminals}
-          open={terminalModalStatus.open}
-          currentActive={terminalModalStatus.currentActive}
-          onClose={handleTerminalClose}
-        />
       </PageBox>
     </>
   );

src/pages/resources/hooks/use-terminal-tabs.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import TerminalTabs from '../../_components/terminal-tabs';
+
+const useTerminalTabs = () => {
+  const [terminals, setTerminals] = useState<{ url: string; name: string }[]>(
+    []
+  );
+  const [terminalModalStatus, setTerminalModalStatus] = useState<{
+    open: boolean;
+    currentActive: string;
+  }>({
+    open: false,
+    currentActive: ''
+  });
+
+  const handleTerminalClose = () => {
+    setTerminalModalStatus({ open: false, currentActive: '' });
+    setTerminals([]);
+  };
+
+  const handleAddTerminal = (record: { id: number; name: string }) => {
+    const url = `/api/workers/${record.id}/terminal`;
+    setTerminals((prev) => {
+      return [
+        ...prev,
+        {
+          url,
+          name: record.name
+        }
+      ];
+    });
+    setTerminalModalStatus({ open: true, currentActive: url });
+  };
+
+  const TerminalPanel = (
+    <TerminalTabs
+      height={300}
+      key="terminal-tabs"
+      terminals={terminals}
+      open={terminalModalStatus.open}
+      currentActive={terminalModalStatus.currentActive}
+      onClose={handleTerminalClose}
+    />
+  );
+
+  return {
+    TerminalPanel,
+    handleAddTerminal
+  };
+};
+
+export default useTerminalTabs;