style: large modal height responsive

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;