From 6507119c6865117077ec0eba923f1f97538f6973 Mon Sep 17 00:00:00 2001 From: lijiahang Date: Mon, 5 Feb 2024 15:28:09 +0800 Subject: [PATCH] =?UTF-8?q?:recycle:=20=E6=8E=A8=E8=8D=90=E7=BB=84?= =?UTF-8?q?=E5=90=88=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0=E6=89=93=E5=BC=80?= =?UTF-8?q?=20sftp.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/store/modules/terminal/index.ts | 2 +- .../components/layout/empty-recommend.vue | 123 ++++++++++++++---- .../components/layout/layout-header.vue | 2 +- .../components/layout/terminal-panel.vue | 6 +- .../layout/terminal-panels-view.vue | 6 +- .../new-connection/host-list-modal.vue | 2 +- .../new-connection/host-list-view.vue | 2 +- .../host/terminal/types/terminal.const.ts | 41 +++--- .../host/terminal/types/terminal.type.ts | 6 + 9 files changed, 137 insertions(+), 53 deletions(-) diff --git a/orion-ops-ui/src/store/modules/terminal/index.ts b/orion-ops-ui/src/store/modules/terminal/index.ts index fedb8b5d..f8d33044 100644 --- a/orion-ops-ui/src/store/modules/terminal/index.ts +++ b/orion-ops-ui/src/store/modules/terminal/index.ts @@ -197,7 +197,7 @@ export default defineStore('terminal', { const sessionTab = this.panelManager .getCurrentPanel() .getCurrentTab(); - if (!sessionTab || sessionTab.type !== PanelSessionType.TERMINAL.type) { + if (!sessionTab || sessionTab.type !== PanelSessionType.SSH.type) { return; } // 获取会话 diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/empty-recommend.vue b/orion-ops-ui/src/views/host/terminal/components/layout/empty-recommend.vue index 0fa96de1..020bb613 100644 --- a/orion-ops-ui/src/views/host/terminal/components/layout/empty-recommend.vue +++ b/orion-ops-ui/src/views/host/terminal/components/layout/empty-recommend.vue @@ -3,17 +3,60 @@
-
- -
- + :key="index"> + +
+ +
+ +
+ +
+ {{ handler.title }} +
- -
- {{ handler.title }} + +
+ + + + + + + + + + + + + + + + + +
@@ -43,15 +86,12 @@ icon: TerminalTabs.NEW_CONNECTION.icon }]); - // 点击组合操作元素 - const clickHandlerItem = (item: CombinedHandlerItem) => { + // 打开 tab + const openTab = (item: CombinedHandlerItem) => { if (item.host) { - // 打开会话 - openSession(item.host as HostQueryResponse, PanelSessionType.TERMINAL); - } else { - // 打开 tab - tabManager.openTab(item.tab as TerminalTabItem); + return; } + tabManager.openTab(item.tab as TerminalTabItem); }; // 组合主机列表 @@ -98,6 +138,8 @@ @container-width: 406px; @container-height: 448px; @handler-height: 44px; + @icon-size: @handler-height; + @actions-width: 80px; .combined-container { padding: 12px; @@ -116,7 +158,7 @@ } .combined-handler { - width: calc(@container-width - @transform-x); + width: @container-width - @transform-x; height: @handler-height; border-radius: 4px; margin-bottom: 6px; @@ -124,16 +166,30 @@ background-color: var(--color-fill-2); display: flex; align-items: center; - cursor: pointer; + justify-content: space-between; transition: all 0.2s; &:hover { width: @container-width; + + .combined-handler-left { + width: calc(100% - @actions-width); + } + + .combined-handler-actions { + display: flex; + } + } + + &-left { + width: 100%; + display: flex; + align-items: center; } &-icon { - width: @handler-height; - height: @handler-height; + width: @icon-size; + height: @icon-size; display: flex; align-items: center; justify-content: center; @@ -142,16 +198,31 @@ &-text { height: 100%; - width: calc(100% - @handler-height - 12px); + width: calc(100% - @icon-size - 12px); display: flex; align-items: center; font-size: 12px; + overflow: hidden; + white-space: nowrap; + } - &-wrapper { - display: block; - overflow: hidden; - white-space: pre; - text-overflow: ellipsis; + &-actions { + display: none; + width: @actions-width; + height: 100%; + padding-right: 8px; + align-items: center; + justify-content: flex-end; + + .click-icon-wrapper { + font-size: 18px; + padding: 4px; + border-radius: 4px; + margin: 0 4px; + + &:hover { + background: var(--color-neutral-4); + } } } } diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/layout-header.vue b/orion-ops-ui/src/views/host/terminal/components/layout/layout-header.vue index 411d139b..2b0fae8d 100644 --- a/orion-ops-ui/src/views/host/terminal/components/layout/layout-header.vue +++ b/orion-ops-ui/src/views/host/terminal/components/layout/layout-header.vue @@ -133,7 +133,7 @@ align-items: center; .tab-title-icon { - font-size: 18px; + font-size: 16px; margin-right: 6px; } } 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 582ab3c9..1719d64c 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 @@ -62,14 +62,14 @@ // 失焦自动终端 if (before) { const beforeTab = props.panel.items.find(s => s.key === before); - if (beforeTab && beforeTab?.type === PanelSessionType.TERMINAL.type) { + if (beforeTab && beforeTab?.type === PanelSessionType.SSH.type) { sessionManager.getSession(before)?.blur(); } } // 终端自动聚焦 if (active) { const activeTab = props.panel.items.find(s => s.key === active); - if (activeTab && activeTab?.type === PanelSessionType.TERMINAL.type) { + if (activeTab && activeTab?.type === PanelSessionType.SSH.type) { sessionManager.getSession(active)?.focus(); } } @@ -102,7 +102,7 @@ align-items: center; .tab-title-icon { - font-size: 18px; + font-size: 16px; margin-right: 6px; } } 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 b13d61e4..836ddc05 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 @@ -66,15 +66,15 @@ // 打开新建连接弹框 hostModal.value.open(panelManager.active); break; - case TerminalShortcutKeys.COPY_TERMINAL: + case TerminalShortcutKeys.COPY_SESSION: // 复制会话 const currentTab = panelManager.getCurrentPanel().getCurrentTab(); if (currentTab) { copySession(currentTab, panelManager.active); } break; - case TerminalShortcutKeys.CLOSE_TERMINAL: - // 关闭终端 + case TerminalShortcutKeys.CLOSE_SESSION: + // 关闭会话 const panel = panelManager.getCurrentPanel(); if (panel.active) { panel.deleteTab(panel.active); diff --git a/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-modal.vue b/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-modal.vue index a05530f3..e12389a7 100644 --- a/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-modal.vue +++ b/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-modal.vue @@ -98,7 +98,7 @@ // 打开终端 const clickHost = (item: HostQueryResponse) => { - openSession(item, PanelSessionType.TERMINAL, panelIndex.value); + openSession(item, PanelSessionType.SSH, panelIndex.value); setVisible(false); }; diff --git a/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue b/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue index d62cc7f1..47e3df6b 100644 --- a/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue +++ b/orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue @@ -119,7 +119,7 @@ arrow-class="terminal-tooltip-content" content="打开 SSH">
-
+
diff --git a/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts b/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts index a8921e13..c015de17 100644 --- a/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts +++ b/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts @@ -52,10 +52,16 @@ export const ExtraSshAuthType = { CUSTOM_IDENTITY: 'CUSTOM_IDENTITY', }; -// 终端面板 tab 类型 -export const TerminalPanelTabType = { - TERMINAL: 'terminal', - SFTP: 'sftp', +// 面板会话 tab 类型 +export const PanelSessionType = { + SSH: { + type: 'ssh', + icon: 'icon-desktop' + }, + SFTP: { + type: 'sftp', + icon: 'icon-folder' + }, }; // 终端状态 @@ -133,7 +139,8 @@ export const ActionBarItems = [ export const TerminalShortcutType = { GLOBAL: 1, PANEL: 2, - TERMINAL: 3 + SESSION: 3, + TERMINAL: 4 }; // 终端操作快捷键 key @@ -148,14 +155,14 @@ export const TerminalShortcutKeys = { OPEN_NEW_CONNECT_TAB: 'openNewConnectTab', // 打开新建连接弹框 OPEN_NEW_CONNECT_MODAL: 'openNewConnectModal', - // 复制终端 - COPY_TERMINAL: 'copyTerminal', - // 关闭终端 - CLOSE_TERMINAL: 'closeTerminal', - // 切换至前一个终端 - CHANGE_TO_PREV_TERMINAL: 'changeToPrevTerminal', - // 切换至后一个终端 - CHANGE_TO_NEXT_TERMINAL: 'changeToNextTerminal', + // 复制会话 + COPY_SESSION: 'copySession', + // 关闭会话 + CLOSE_SESSION: 'closeSession', + // 切换至前一个会话 + CHANGE_TO_PREV_SESSION: 'changeToPrevSession', + // 切换至后一个会话 + CHANGE_TO_NEXT_SESSION: 'changeToNextSession', }; // 终端操作快捷键 @@ -181,19 +188,19 @@ export const TerminalShortcutItems: Array = [ content: '打开新建连接弹框', type: TerminalShortcutType.PANEL }, { - item: TerminalShortcutKeys.COPY_TERMINAL, + item: TerminalShortcutKeys.COPY_SESSION, content: '复制终端', type: TerminalShortcutType.PANEL }, { - item: TerminalShortcutKeys.CLOSE_TERMINAL, + item: TerminalShortcutKeys.CLOSE_SESSION, content: '关闭终端', type: TerminalShortcutType.PANEL }, { - item: TerminalShortcutKeys.CHANGE_TO_PREV_TERMINAL, + item: TerminalShortcutKeys.CHANGE_TO_PREV_SESSION, content: '切换至前一个终端', type: TerminalShortcutType.PANEL }, { - item: TerminalShortcutKeys.CHANGE_TO_NEXT_TERMINAL, + item: TerminalShortcutKeys.CHANGE_TO_NEXT_SESSION, content: '切换至后一个终端', type: TerminalShortcutType.PANEL }, { diff --git a/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts b/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts index 92e75cda..19b4cda5 100644 --- a/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts +++ b/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts @@ -66,6 +66,12 @@ export interface SshExtraModel { identityId?: number; } +// session tab +export interface PanelSessionTab { + type: string; + icon: string; +} + // 终端协议 export interface Protocol { type: string;