diff --git a/orion-ops-ui/src/store/modules/terminal/index.ts b/orion-ops-ui/src/store/modules/terminal/index.ts index 95145b69..c61cf236 100644 --- a/orion-ops-ui/src/store/modules/terminal/index.ts +++ b/orion-ops-ui/src/store/modules/terminal/index.ts @@ -160,7 +160,7 @@ export default defineStore('terminal', { }, // 复制并且打开终端 - openCopyTerminal(hostId: number, panelIndex: number = 0) { + copyTerminalSession(hostId: number, panelIndex: number = 0) { const host = this.hosts.hostList .find(s => s.id === hostId); if (host) { @@ -168,28 +168,35 @@ export default defineStore('terminal', { } }, - // 获取当前终端会话 - getCurrentTerminalSession(tips: boolean = true) { - // 获取当前 tab - const tab = this.tabManager.getCurrentTab(); - if (!tab || tab.key !== TerminalTabs.TERMINAL_PANEL.key) { + // 检查当前是否为终端页面 并且获取当前终端会话 + getAndCheckCurrentTerminalSession(tips: boolean = true) { + // 获取当前 activeTab + const activeTab = this.tabManager.active; + if (activeTab !== TerminalTabs.TERMINAL_PANEL.key) { if (tips) { Message.warning('请切换到终端标签页'); } return; } + // 获取当前会话 + const session = this.getCurrentTerminalSession(); + if (!session && tips) { + Message.warning('请打开终端'); + } + return session; + }, + + // 获取当前终端会话 + getCurrentTerminalSession() { // 获取面板会话 - const activeTab = this.panelManager + const panelTab = this.panelManager .getCurrentPanel() .getCurrentTab(); - if (!activeTab || activeTab.type !== TerminalPanelTabType.TERMINAL) { - if (tips) { - Message.warning('请打开终端'); - } + if (!panelTab || panelTab.type !== TerminalPanelTabType.TERMINAL) { return; } // 获取会话 - return this.sessionManager.getSession(activeTab.key); + return this.sessionManager.getSession(panelTab.key); }, }, diff --git a/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-drawer.vue b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-drawer.vue index 9da0e82c..11634f17 100644 --- a/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-drawer.vue +++ b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-drawer.vue @@ -267,7 +267,7 @@ // 关闭回调 const onClose = () => { // 聚焦终端 - getCurrentTerminalSession(false)?.focus(); + getCurrentTerminalSession()?.focus(); }; diff --git a/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-item.vue b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-item.vue index e529928e..cdf38741 100644 --- a/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-item.vue +++ b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-item.vue @@ -125,7 +125,7 @@ }>(); const { copy } = useCopy(); - const { getCurrentTerminalSession } = useTerminalStore(); + const { getAndCheckCurrentTerminalSession } = useTerminalStore(); let clickCount = 0; @@ -184,7 +184,7 @@ // 写入命令 const write = (command: string) => { - const handler = getCurrentTerminalSession()?.handler; + const handler = getAndCheckCurrentTerminalSession()?.handler; if (handler && handler.enabledStatus('checkAppendMissing')) { handler.checkAppendMissing(command); } diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/main-content.vue b/orion-ops-ui/src/views/host/terminal/components/layout/main-content.vue index 84c873b5..e21ada5b 100644 --- a/orion-ops-ui/src/views/host/terminal/components/layout/main-content.vue +++ b/orion-ops-ui/src/views/host/terminal/components/layout/main-content.vue @@ -45,43 +45,26 @@ import TerminalShortcutSetting from '../setting/shortcut/terminal-shortcut-setting.vue'; import TerminalPanelsView from '@/views/host/terminal/components/layout/terminal-panels-view.vue'; - const { preference, tabManager, sessionManager } = useTerminalStore(); + const { preference, tabManager, getCurrentTerminalSession } = useTerminalStore(); - // fixme title逻辑 失焦逻辑 - // 监听 tab 修改 + // 监听 tab 切换 watch(() => tabManager.active, (active, before) => { - if (before) { - // 失焦已经切换的终端 - const beforeTab = tabManager.items.find(s => s.key === before); - if (beforeTab && beforeTab?.type === 'TerminalTabType.TERMINAL') { - sessionManager.getSession(before)?.blur(); - } + // 失焦 tab + if (before === TerminalTabs.TERMINAL_PANEL.key) { + getCurrentTerminalSession()?.blur(); } - if (active) { - // 获取 activeTab - const activeTab = tabManager.getCurrentTab(); - if (!activeTab) { - return; - } - // 修改标题 - document.title = activeTab.title; - // 终端自动聚焦 - if (activeTab?.type === 'TerminalTabType.TERMINAL') { - sessionManager.getSession(active)?.focus(); - } - } else { - // 修改标题 - document.title = TerminalTabs.TERMINAL_PANEL.title; + // 聚焦 tab + if (active === TerminalTabs.TERMINAL_PANEL.key) { + getCurrentTerminalSession()?.focus(); } + // 修改标题 + document.title = Object.values(TerminalTabs) + .find(s => s.key === active)?.title + || TerminalTabs.TERMINAL_PANEL.title; }); - // 处理快捷键逻辑 + // 处理全局快捷键逻辑 const handlerKeyboard = (event: Event) => { - // 当前页面非 terminal 的时候再触发快捷键 (terminal 有内置逻辑) - // fixme panel 无数据继续触发 - if (tabManager.getCurrentTab()?.key === TerminalTabs.TERMINAL_PANEL.key) { - return; - } const e = event as KeyboardEvent; // 检测触发的快捷键 const key = preference.shortcutSetting.keys.find(key => { diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/right-sidebar.vue b/orion-ops-ui/src/views/host/terminal/components/layout/right-sidebar.vue index f2fc2233..446c70e4 100644 --- a/orion-ops-ui/src/views/host/terminal/components/layout/right-sidebar.vue +++ b/orion-ops-ui/src/views/host/terminal/components/layout/right-sidebar.vue @@ -28,7 +28,7 @@ const emits = defineEmits(['openSftp', 'openTransfer']); - const { getCurrentTerminalSession } = useTerminalStore(); + const { getAndCheckCurrentTerminalSession } = useTerminalStore(); const snippetRef = ref(); @@ -65,7 +65,7 @@ // 终端截屏 const screenshot = () => { - const handler = getCurrentTerminalSession()?.handler; + const handler = getAndCheckCurrentTerminalSession()?.handler; if (handler && handler.enabledStatus('screenshot')) { handler.screenshot(); } diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue index ffe1f8fb..e9cd8e80 100644 --- a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue +++ b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue @@ -10,19 +10,23 @@ @delete="k => panel.deleteTab(k as string)"> @@ -41,28 +45,55 @@ @@ -82,6 +113,27 @@ } } + .panel-extra { + margin-right: 8px; + + .extra-icon { + color: var(--color-panel-text-2); + transition: 0.2s; + font-size: 16px; + cursor: pointer; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + + &:hover { + background: var(--color-bg-panel-icon-1); + } + } + } + :deep(.arco-tabs) { width: 100%; height: 100%; @@ -129,7 +181,6 @@ background: var(--color-bg-panel-icon-1); } } - } :deep(.arco-tabs-nav-type-line .arco-tabs-tab:hover .arco-tabs-tab-title::before) { @@ -214,7 +265,6 @@ &:hover::after { background: linear-gradient(270deg, var(--color-panel-gradient-start) 45%, var(--color-panel-gradient-end) 120%); } - } diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panels-view.vue b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panels-view.vue index fb3644a3..6e08421c 100644 --- a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panels-view.vue +++ b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panels-view.vue @@ -1,10 +1,11 @@ @@ -16,11 +17,23 @@