feat: worker terminal

2025-10-13 14:40:26 +08:00
parent a9de153c00
commit 1a693f70ac
6 changed files with 163 additions and 3 deletions
@@ -0,0 +1,40 @@
+.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 {
+    display: none;
+  }
+
+  .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);
+    }
+  }
+}
@@ -0,0 +1,30 @@
+import './footer.less';
+import TerminalTabs from './tabs';
+
+export interface TerminalModalProps {
+  terminals: { url: string; name: string }[];
+  height: number;
+  open: boolean;
+  onClose: () => void;
+  currentActive?: string;
+}
+
+const TerminalModal: React.FC<TerminalModalProps> = ({
+  terminals,
+  height,
+  open,
+  onClose,
+  currentActive
+}) => {
+  return (
+    <div>
+      <TerminalTabs
+        terminals={terminals}
+        height={height}
+        currentActive={currentActive}
+      />
+    </div>
+  );
+};
+
+export default TerminalModal;
@@ -0,0 +1,49 @@
+import XTerminal from '@/components/x-terminal';
+import { Tabs } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import { TerminalProps } from './types';
+
+export interface TerminalTabsProps {
+  terminals: TerminalProps[];
+  height: number;
+  currentActive?: string;
+}
+
+const TerminalTabs: React.FC<TerminalTabsProps> = ({
+  terminals,
+  height,
+  currentActive
+}) => {
+  const [activeKey, setActiveKey] = useState(
+    currentActive || terminals[0]?.url || ''
+  );
+
+  const items = useMemo(() => {
+    return terminals.map((terminal) => {
+      return {
+        key: terminal.url,
+        label: terminal.name,
+        children: <XTerminal height={height} url={terminal.url} />
+      };
+    });
+  }, [terminals]);
+
+  useEffect(() => {
+    if (currentActive) {
+      setActiveKey(currentActive);
+    }
+  }, [currentActive]);
+
+  return (
+    <Tabs
+      type="editable-card"
+      hideAdd
+      activeKey={activeKey}
+      onChange={setActiveKey}
+      tabBarStyle={{ marginBottom: 0 }}
+      items={items}
+    ></Tabs>
+  );
+};
+
+export default TerminalTabs;
@@ -0,0 +1,4 @@
+export interface TerminalProps {
+  url: string;
+  name: string;
+}