style: terminal panel

src/pages/_components/terminal-tabs/footer.less

@@ -1,7 +1,6 @@
 .ant-pro-footer-bar {
   padding-inline: 0;
   border-block-start: 1px solid rgba(5, 5, 5, 6%);
-  // background-color: #f5f5f5;
   border-radius: 4px 4px 0 0;
 
   .ant-pro-footer-bar-left {
@@ -11,30 +10,4 @@
   .ant-pro-footer-bar-right {
     flex: 1;
   }
-
-  .ant-tabs-nav {
-    .ant-tabs-tab {
-      border: none;
-      background-color: transparent;
-
-      .ant-tabs-tab-remove {
-        display: none;
-      }
-
-      &:hover {
-        .ant-tabs-tab-remove {
-          display: inline-block;
-        }
-      }
-    }
-
-    .ant-tabs-tab:not(.ant-tabs-tab-active) {
-      color: var(--ant-color-text-secondary);
-    }
-
-    .ant-tabs-tab-active {
-      background-color: var(--ant-color-bg-elevated);
-      color: var(--ant-color-text);
-    }
-  }
 }

src/pages/_components/terminal-tabs/index.tsx

@@ -22,6 +22,7 @@ const TerminalModal: React.FC<TerminalModalProps> = ({
         terminals={terminals}
         height={height}
         currentActive={currentActive}
+        onClose={onClose}
       />
     </div>
   );

src/pages/_components/terminal-tabs/tabs.tsx

@@ -1,18 +1,65 @@
 import XTerminal from '@/components/x-terminal';
-import { Tabs } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import { Button, Tabs } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
 import { TerminalProps } from './types';
 
+const TabsContainer = styled.div`
+  .ant-tabs {
+    .ant-tabs-tab {
+      positon: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1px;
+        border-right: 1px solid var(--ant-color-split);
+        height: 20px;
+      }
+    }
+  }
+  .ant-tabs-nav {
+    .ant-tabs-tab {
+      border: none;
+      background-color: transparent;
+
+      .ant-tabs-tab-remove {
+        display: none;
+      }
+
+      &:hover {
+        .ant-tabs-tab-remove {
+          display: inline-block;
+        }
+      }
+    }
+
+    .ant-tabs-tab:not(.ant-tabs-tab-active) {
+      color: var(--ant-color-text-secondary);
+    }
+
+    .ant-tabs-tab-active {
+      background-color: var(--ant-color-bg-elevated);
+      color: var(--ant-color-text);
+    }
+  }
+`;
+
 export interface TerminalTabsProps {
   terminals: TerminalProps[];
   height: number;
   currentActive?: string;
+  onClose: () => void;
 }
 
 const TerminalTabs: React.FC<TerminalTabsProps> = ({
   terminals,
   height,
-  currentActive
+  currentActive,
+  onClose
 }) => {
   const [activeKey, setActiveKey] = useState(
     currentActive || terminals[0]?.url || ''
@@ -35,14 +82,26 @@ const TerminalTabs: React.FC<TerminalTabsProps> = ({
   }, [currentActive]);
 
   return (
-    <Tabs
-      type="editable-card"
-      hideAdd
-      activeKey={activeKey}
-      onChange={setActiveKey}
-      tabBarStyle={{ marginBottom: 0 }}
-      items={items}
-    ></Tabs>
+    <TabsContainer>
+      <Tabs
+        type="editable-card"
+        hideAdd
+        activeKey={activeKey}
+        onChange={setActiveKey}
+        tabBarStyle={{ marginBottom: 0 }}
+        items={items}
+        tabBarExtraContent={{
+          right: (
+            <Button
+              icon={<CloseOutlined />}
+              type="text"
+              size="small"
+              onClick={onClose}
+            ></Button>
+          )
+        }}
+      ></Tabs>
+    </TabsContainer>
   );
 };
 

src/pages/resources/components/workers.tsx

@@ -1,7 +1,7 @@
 import DeleteModal from '@/components/delete-modal';
 import { FilterBar } from '@/components/page-tools';
 import useTableFetch from '@/hooks/use-table-fetch';
-import PageBox from '@/pages/_components/page-box';
+import { PageContainerInner } from '@/pages/_components/page-box';
 import { queryClusterList } from '@/pages/cluster-management/apis';
 import { DockerStepsFromWorker } from '@/pages/cluster-management/components/add-worker/config';
 import {
@@ -23,6 +23,7 @@ import {
   updateWorker
 } from '../apis';
 import { ListItem } from '../config/types';
+import useTerminalTabs from '../hooks/use-terminal-tabs';
 import useWorkerColumns from '../hooks/use-worker-columns';
 import useWorkerMaintenance from '../hooks/use-worker-maintenance';
 import UpdateLabels from './update-labels';
@@ -50,6 +51,7 @@ const Workers: React.FC = () => {
     watch: true,
     API: WORKERS_API
   });
+  const { TerminalPanel, terminals, handleAddTerminal } = useTerminalTabs();
   const { MaintenanceModal, handleStopMaintenance, setOpenStatus } =
     useWorkerMaintenance({ fetchData: handleSearch });
 
@@ -176,6 +178,10 @@ const Workers: React.FC = () => {
     if (val === 'stop_maintenance') {
       handleStopMaintenance(record);
     }
+
+    if (val === 'terminal') {
+      handleAddTerminal(record);
+    }
   });
 
   const handleOnAddWorker = () => {
@@ -237,7 +243,9 @@ const Workers: React.FC = () => {
 
   return (
     <>
-      <PageBox>
+      <PageContainerInner
+        footer={terminals.length ? [TerminalPanel] : undefined}
+      >
         <FilterBar
           showSelect={true}
           selectHolder={intl.formatMessage({ id: 'clusters.filterBy.cluster' })}
@@ -292,7 +300,7 @@ const Workers: React.FC = () => {
         />
         {MaintenanceModal}
         {AddWorkerModal}
-      </PageBox>
+      </PageContainerInner>
     </>
   );
 };

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

@@ -45,6 +45,7 @@ const useTerminalTabs = () => {
 
   return {
     TerminalPanel,
+    terminals,
     handleAddTerminal
   };
 };

src/pages/resources/hooks/use-worker-columns.tsx

@@ -6,6 +6,7 @@ import InfoColumn from '@/components/simple-table/info-column';
 import StatusTag from '@/components/status-tag';
 import { convertFileSize } from '@/utils';
 import {
+  CodeOutlined,
   DeleteOutlined,
   DownloadOutlined,
   EditOutlined,
@@ -49,7 +50,7 @@ const ActionList = [
   //   key: 'logs',
   //   icon: <IconFont type="icon-logs" />
   // },
-  // { label: 'Terminal', locale: false, key: 'terminal', icon: <CodeOutlined /> },
+  { label: 'common.button.terminal', key: 'terminal', icon: <CodeOutlined /> },
   {
     label: 'common.button.delete',
     key: 'delete',