From ea8a18013d37fe40bf21227ff3aa53974303110f Mon Sep 17 00:00:00 2001 From: lijiahang Date: Thu, 18 Jan 2024 19:16:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E7=89=87=E6=AE=B5?= =?UTF-8?q?=E5=88=97=E8=A1=A8.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/style/arco-extends.less | 8 +- .../host/terminal/assets/styles/layout.less | 5 - .../components/layout/icon-actions.vue | 3 +- .../layout/terminal-right-sidebar.vue | 40 ++++--- .../new-connection/host-list-view.vue | 5 + .../components/snippet/snippet-drawer.vue | 110 ++++++++++++++++++ .../xterm/terminal-search-modal.vue | 5 +- .../src/views/host/terminal/index.vue | 3 +- .../host/terminal/types/terminal.const.ts | 3 + 9 files changed, 148 insertions(+), 34 deletions(-) create mode 100644 orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue diff --git a/orion-ops-ui/src/assets/style/arco-extends.less b/orion-ops-ui/src/assets/style/arco-extends.less index 44f3f328..2c2734b8 100644 --- a/orion-ops-ui/src/assets/style/arco-extends.less +++ b/orion-ops-ui/src/assets/style/arco-extends.less @@ -33,6 +33,7 @@ &.pass { background-color: rgb(var(--green-6)); } + &.error { background-color: rgb(var(--red-6)); } @@ -135,13 +136,6 @@ // 抽屉 .arco-drawer { - &-header { - border-bottom: unset; - } - - &-footer { - border-top: unset; - } &-body { padding: 0; diff --git a/orion-ops-ui/src/views/host/terminal/assets/styles/layout.less b/orion-ops-ui/src/views/host/terminal/assets/styles/layout.less index 6015a3d8..bb8b3c54 100644 --- a/orion-ops-ui/src/views/host/terminal/assets/styles/layout.less +++ b/orion-ops-ui/src/views/host/terminal/assets/styles/layout.less @@ -280,11 +280,6 @@ body[terminal-theme='dark'] .arco-modal-container { background: var(--color-sidebar-tooltip-bg); } -// tooltip 箭头 -.terminal-tooltip-arrow { - display: none; -} - // 终端右键菜单 .terminal-context-menu { .arco-dropdown-option { diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue b/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue index e41f1cda..595f5af4 100644 --- a/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue +++ b/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue @@ -4,8 +4,9 @@ :key="index" :position="position as any" :mini="true" + :show-arrow="false" content-class="terminal-tooltip-content" - arrow-class="terminal-tooltip-arrow" + :auto-fix-position="false" :content="action.content">
+ +
@@ -21,32 +23,23 @@ import type { SidebarAction } from '../../types/terminal.type'; import { useTerminalStore } from '@/store'; import { TerminalTabType } from '../../types/terminal.const'; - import IconActions from './icon-actions.vue'; import { Message } from '@arco-design/web-vue'; + import { ref } from 'vue'; + import IconActions from './icon-actions.vue'; + import SnippetDrawer from '../snippet/snippet-drawer.vue'; - const emits = defineEmits(['openSnippet', 'openSftp', 'openTransfer']); + const emits = defineEmits(['openSftp', 'openTransfer']); const { tabManager, sessionManager } = useTerminalStore(); - // 终端截屏 - const screenshot = () => { - const tab = tabManager.getCurrentTab(); - if (!tab || tab.type !== TerminalTabType.TERMINAL) { - Message.warning('请切换到终端标签页'); - return; - } - // 获取处理器并截图 - sessionManager.getSession(tab.key) - ?.handler - ?.screenshot(); - }; + const snippetRef = ref(); // 顶部操作 const topActions = [ { - icon: 'icon-code-block', + icon: 'icon-code', content: '打开命令片段', - click: () => emits('openSnippet') + click: () => snippetRef.value.open() }, { icon: 'icon-folder', @@ -68,10 +61,23 @@ { icon: 'icon-camera', content: '截图', - click: screenshot + click: () => screenshot() }, ]; + // 终端截屏 + const screenshot = () => { + const tab = tabManager.getCurrentTab(); + if (!tab || tab.type !== TerminalTabType.TERMINAL) { + Message.warning('请切换到终端标签页'); + return; + } + // 获取处理器并截图 + sessionManager.getSession(tab.key) + ?.handler + ?.screenshot(); + }; + diff --git a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-search-modal.vue b/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-search-modal.vue index a0846021..f0879cc4 100644 --- a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-search-modal.vue +++ b/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-search-modal.vue @@ -5,7 +5,8 @@ ref="inputRef" v-model="inputValue" placeholder="搜索关键字" - @keyup.enter="find(true)" /> + @keyup.enter="find(true)" + @keyup.esc="close" />
-
+
@@ -116,7 +116,6 @@ height: var(--header-height); background: var(--color-bg-header); position: relative; - z-index: 9999; } &-main { 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 1ddbf7a0..51dc67ec 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 @@ -208,6 +208,9 @@ export const TerminalShortcutItems: Array = [ }, ]; +// 代码片段操作提示 +export const snippetTipsKey = 'snippet:opt'; + // 打开 sshModal key export const openSshModalKey = Symbol();