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>
   );
 };