From af4849d6cc8238b109356b87a0306b76c88fe38e Mon Sep 17 00:00:00 2001 From: jialin Date: Mon, 1 Dec 2025 14:01:42 +0800 Subject: [PATCH] style: terminal panel --- .../_components/terminal-tabs/footer.less | 27 ------- src/pages/_components/terminal-tabs/index.tsx | 1 + src/pages/_components/terminal-tabs/tabs.tsx | 79 ++++++++++++++++--- src/pages/resources/components/workers.tsx | 14 +++- .../resources/hooks/use-terminal-tabs.tsx | 1 + .../resources/hooks/use-worker-columns.tsx | 3 +- 6 files changed, 84 insertions(+), 41 deletions(-) diff --git a/src/pages/_components/terminal-tabs/footer.less b/src/pages/_components/terminal-tabs/footer.less index bd851942..94b5e429 100644 --- a/src/pages/_components/terminal-tabs/footer.less +++ b/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); - } - } } diff --git a/src/pages/_components/terminal-tabs/index.tsx b/src/pages/_components/terminal-tabs/index.tsx index 4a3e81e0..37618616 100644 --- a/src/pages/_components/terminal-tabs/index.tsx +++ b/src/pages/_components/terminal-tabs/index.tsx @@ -22,6 +22,7 @@ const TerminalModal: React.FC = ({ terminals={terminals} height={height} currentActive={currentActive} + onClose={onClose} /> ); diff --git a/src/pages/_components/terminal-tabs/tabs.tsx b/src/pages/_components/terminal-tabs/tabs.tsx index 3fec1267..bc28a3aa 100644 --- a/src/pages/_components/terminal-tabs/tabs.tsx +++ b/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 = ({ terminals, height, - currentActive + currentActive, + onClose }) => { const [activeKey, setActiveKey] = useState( currentActive || terminals[0]?.url || '' @@ -35,14 +82,26 @@ const TerminalTabs: React.FC = ({ }, [currentActive]); return ( - + + } + type="text" + size="small" + onClick={onClose} + > + ) + }} + > + ); }; diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx index 53fff9bb..d1463605 100644 --- a/src/pages/resources/components/workers.tsx +++ b/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 ( <> - + { /> {MaintenanceModal} {AddWorkerModal} - + ); }; diff --git a/src/pages/resources/hooks/use-terminal-tabs.tsx b/src/pages/resources/hooks/use-terminal-tabs.tsx index fc3e92b1..01fb2cea 100644 --- a/src/pages/resources/hooks/use-terminal-tabs.tsx +++ b/src/pages/resources/hooks/use-terminal-tabs.tsx @@ -45,6 +45,7 @@ const useTerminalTabs = () => { return { TerminalPanel, + terminals, handleAddTerminal }; }; diff --git a/src/pages/resources/hooks/use-worker-columns.tsx b/src/pages/resources/hooks/use-worker-columns.tsx index 672a7f3d..72898d7e 100644 --- a/src/pages/resources/hooks/use-worker-columns.tsx +++ b/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: // }, - // { label: 'Terminal', locale: false, key: 'terminal', icon: }, + { label: 'common.button.terminal', key: 'terminal', icon: }, { label: 'common.button.delete', key: 'delete',