manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ 添加终端面板快捷键.

Browse Source
This commit is contained in:
lijiahang
2024-02-02 19:04:03 +08:00
parent cff8b7e0d1
commit de82a94f13
8 changed files with 150 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java
View File

@@ -62,6 +62,18 @@ public class TerminalPreferenceStrategy implements IPreferenceStrategy<TerminalP
String shortcutSetting = TerminalPreferenceModel.ShortcutSettingModel.builder()
.enabled(true)
.keys(Lists.of(
// 全局快捷键
new TerminalPreferenceModel.ShortcutKeysModel("closeTab", true, true, true, "KeyW", true),
new TerminalPreferenceModel.ShortcutKeysModel("changeToPrevTab", true, true, true, "BracketLeft", true),
new TerminalPreferenceModel.ShortcutKeysModel("changeToNextTab", true, true, true, "BracketRight", true),
new TerminalPreferenceModel.ShortcutKeysModel("openNewConnectTab", true, true, true, "KeyN", true),
// 终端面板快捷键
new TerminalPreferenceModel.ShortcutKeysModel("openNewConnectModal", true, false, true, "KeyN", true),
new TerminalPreferenceModel.ShortcutKeysModel("copyTerminal", true, false, true, "KeyO", true),
new TerminalPreferenceModel.ShortcutKeysModel("closeTerminal", true, false, true, "KeyW", true),
new TerminalPreferenceModel.ShortcutKeysModel("changeToPrevTerminal", true, false, true, "BracketLeft", true),
new TerminalPreferenceModel.ShortcutKeysModel("changeToNextTerminal", true, false, true, "BracketRight", true),
// 终端会话快捷键
new TerminalPreferenceModel.ShortcutKeysModel("copy", true, true, false, "KeyC", true),
new TerminalPreferenceModel.ShortcutKeysModel("paste", true, true, false, "KeyV", true),
new TerminalPreferenceModel.ShortcutKeysModel("toTop", true, true, false, "ArrowUp", true),
@@ -70,12 +82,7 @@ public class TerminalPreferenceStrategy implements IPreferenceStrategy<TerminalP
new TerminalPreferenceModel.ShortcutKeysModel("search", true, true, false, "KeyF", true),
new TerminalPreferenceModel.ShortcutKeysModel("commandEditor", true, false, true, "KeyE", true),
new TerminalPreferenceModel.ShortcutKeysModel("fontSizePlus", true, false, true, "Equal", true),
new TerminalPreferenceModel.ShortcutKeysModel("fontSizeSubtract", true, false, true, "Minus", true),
new TerminalPreferenceModel.ShortcutKeysModel("closeTab", true, false, true, "KeyW", true),
new TerminalPreferenceModel.ShortcutKeysModel("changeToPrevTab", true, false, true, "ArrowLeft", true),
new TerminalPreferenceModel.ShortcutKeysModel("changeToNextTab", true, false, true, "ArrowRight", true),
new TerminalPreferenceModel.ShortcutKeysModel("openCopyTerminalTab", true, false, true, "KeyO", true),
new TerminalPreferenceModel.ShortcutKeysModel("openNewConnectTab", true, false, true, "KeyN", true)
new TerminalPreferenceModel.ShortcutKeysModel("fontSizeSubtract", true, false, true, "Minus", true)
))
.build()
.toJsonString();

6
orion-ops-ui/components.d.ts vendored
View File

@@ -5,11 +5,11 @@
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core';
export {};
export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
RouterLink: typeof import('vue-router')['RouterLink'];
RouterView: typeof import('vue-router')['RouterView'];
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
}

2
orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-item.vue
View File

@@ -157,7 +157,7 @@
});
// 点击命令
const clickCommand = (e: PointerEvent) => {
const clickCommand = (e: Event) => {
if (props.item.expand) {
// 获取选中的文本
const selectedText = window.getSelection()?.toString();

18
orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue
View File

@@ -5,7 +5,7 @@
:editable="true"
:auto-switch="true"
:show-add-button="true"
@add="openHostModal"
@add="openNewConnect"
@tab-click="k => panel.clickTab(k as string)"
@delete="k => panel.deleteTab(k as string)">
<!-- 右侧按钮 -->
@@ -32,9 +32,6 @@
<terminal-view :tab="tab" />
</a-tab-pane>
</a-tabs>
<!-- 新建连接模态框 -->
<host-list-modal ref="hostModal"
@choose="item => openTerminal(item, index)" />
</div>
</template>
@@ -46,22 +43,19 @@
<script lang="ts" setup>
import type { ITerminalTabManager, TerminalPanelTabItem } from '../../types/terminal.type';
import { ref, watch } from 'vue';
import { watch } from 'vue';
import { useTerminalStore } from '@/store';
import { TerminalPanelTabType } from '../../types/terminal.const';
import TerminalView from '../xterm/terminal-view.vue';
import HostListModal from '../new-connection/host-list-modal.vue';
const props = defineProps<{
index: number,
panel: ITerminalTabManager<TerminalPanelTabItem>,
}>();
const emits = defineEmits(['close']);
const emits = defineEmits(['close', 'openNewConnect']);
const { sessionManager, openTerminal } = useTerminalStore();
const hostModal = ref();
const { sessionManager } = useTerminalStore();
// 监听 tab 切换
watch(() => props.panel.active, (active, before) => {
@@ -86,8 +80,8 @@
});
// 打开主机模态框
const openHostModal = () => {
hostModal.value.open();
const openNewConnect = () => {
emits('openNewConnect', props.index);
};
// 关闭面板

80
orion-ops-ui/src/views/host/terminal/components/layout/terminal-panels-view.vue
View File

@@ -1,11 +1,14 @@
<template>
<div class="terminal-panels-container">
<!-- 面板 -->
<!-- 终端面板 -->
<terminal-panel v-for="(panel, index) in panelManager.panels"
:key="index"
:index="index"
:panel="panel"
@open-new-connect="openHostModal"
@close="closePanel" />
<!-- 新建连接模态框 -->
<host-list-modal ref="hostModal" />
</div>
</template>
@@ -17,11 +20,20 @@
<script lang="ts" setup>
import { useTerminalStore } from '@/store';
import { onUnmounted } from 'vue';
import { TerminalTabs } from '../../types/terminal.const';
import { ref, onMounted, onUnmounted } from 'vue';
import { TerminalShortcutKeys, TerminalTabs } from '../../types/terminal.const';
import { addEventListen, removeEventListen } from '@/utils/event';
import TerminalPanel from './terminal-panel.vue';
import HostListModal from '../new-connection/host-list-modal.vue';
const { tabManager, panelManager } = useTerminalStore();
const { preference, tabManager, panelManager, copyTerminalSession } = useTerminalStore();
const hostModal = ref();
// 打开主机模态框
const openHostModal = (index: number) => {
hostModal.value.open(index);
};
// 移除面板
const closePanel = (index: number) => {
@@ -35,9 +47,67 @@
}
};
// 卸载清空
// 处理全局快捷键逻辑
const handlerKeyboard = (event: Event) => {
const e = event as KeyboardEvent;
// 检测触发的快捷键
const key = preference.shortcutSetting.keys.find(key => {
return key.code === e.code
&& key.altKey === e.altKey
&& key.shiftKey === e.shiftKey
&& key.ctrlKey === e.ctrlKey;
});
if (!key) {
return;
}
// 触发逻辑
switch (key.item) {
case TerminalShortcutKeys.OPEN_NEW_CONNECT_MODAL:
// 打开新建连接弹框
hostModal.value.open(panelManager.active);
break;
case TerminalShortcutKeys.COPY_TERMINAL:
// 复制终端
const hostId = panelManager.getCurrentPanel().getCurrentTab()?.hostId;
if (hostId) {
copyTerminalSession(hostId, panelManager.active);
}
break;
case TerminalShortcutKeys.CLOSE_TERMINAL:
// 关闭终端
const panel = panelManager.getCurrentPanel();
if (panel.active) {
panel.deleteTab(panel.active);
}
break;
case TerminalShortcutKeys.CHANGE_TO_PREV_TERMINAL:
// 切换至前一个终端
panelManager.getCurrentPanel().changeToPrevTab();
break;
case TerminalShortcutKeys.CHANGE_TO_NEXT_TERMINAL:
// 切换至后一个终端
panelManager.getCurrentPanel().changeToNextTab();
break;
default:
break;
}
};
// 监听键盘事件
onMounted(() => {
if (preference.shortcutSetting.enabled) {
addEventListen(window, 'keydown', handlerKeyboard);
}
});
// 卸载回调
onUnmounted(() => {
// 清空面板
panelManager.reset();
// 移除键盘事件
if (preference.shortcutSetting.enabled) {
removeEventListen(window, 'keydown', handlerKeyboard);
}
});
</script>

13
orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-modal.vue
View File

@@ -49,17 +49,17 @@
</script>
<script lang="ts" setup>
import type { HostQueryResponse } from '@/api/asset/host';
import { computed, ref } from 'vue';
import { useTerminalStore } from '@/store';
import useVisible from '@/hooks/visible';
import { HostQueryResponse } from '@/api/asset/host';
const emits = defineEmits(['choose']);
const { hosts } = useTerminalStore();
const { hosts, openTerminal } = useTerminalStore();
const { visible, setVisible } = useVisible();
const panelIndex = ref();
const filterValue = ref('');
const hostList = computed(() => {
const filterVal = filterValue.value.toLowerCase();
let list;
@@ -88,7 +88,8 @@
});
// 打开配置
const open = () => {
const open = (index: number) => {
panelIndex.value = index;
setVisible(true);
};
@@ -96,7 +97,7 @@
// 打开终端
const clickHost = (item: HostQueryResponse) => {
emits('choose', item);
openTerminal(item, panelIndex.value);
setVisible(false);
};

11
orion-ops-ui/src/views/host/terminal/components/setting/shortcut/terminal-shortcut-setting.vue
View File

@@ -26,8 +26,15 @@
@set-editable="setEditableStatus"
@clear-editable="clearEditableStatus"
@update-enabled="updateEnabledStatus" />
<!-- 终端快捷键 -->
<terminal-shortcut-keys-block title="终端快捷键"
<!-- 终端面板快捷键 -->
<terminal-shortcut-keys-block title="终端面板快捷键"
:type="TerminalShortcutType.PANEL"
:items="shortcutKeys"
@set-editable="setEditableStatus"
@clear-editable="clearEditableStatus"
@update-enabled="updateEnabledStatus" />
<!-- 终端会话快捷键 -->
<terminal-shortcut-keys-block title="终端会话快捷键"
:type="TerminalShortcutType.TERMINAL"
:items="shortcutKeys"
@set-editable="setEditableStatus"

45
orion-ops-ui/src/views/host/terminal/types/terminal.const.ts
View File

@@ -131,8 +131,9 @@ export const ActionBarItems = [
// 终端快捷键操作类型
export const TerminalShortcutType = {
TAB: 1,
TERMINAL: 2
GLOBAL: 1,
PANEL: 2,
TERMINAL: 3
};
// 终端操作快捷键 key
@@ -145,6 +146,16 @@ export const TerminalShortcutKeys = {
CLOSE_TAB: 'closeTab',
// 打开新建连接 tab
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',
};
// 终端操作快捷键
@@ -152,23 +163,39 @@ export const TerminalShortcutItems: Array<ShortcutKeyItem> = [
{
item: TerminalShortcutKeys.CHANGE_TO_PREV_TAB,
content: '切换为前一个 tab',
type: TerminalShortcutType.TAB
type: TerminalShortcutType.GLOBAL
}, {
item: TerminalShortcutKeys.CHANGE_TO_NEXT_TAB,
content: '切换为后一个 tab',
type: TerminalShortcutType.TAB
type: TerminalShortcutType.GLOBAL
}, {
item: TerminalShortcutKeys.CLOSE_TAB,
content: '关闭当前 tab',
type: TerminalShortcutType.TAB
type: TerminalShortcutType.GLOBAL
}, {
item: TerminalShortcutKeys.OPEN_NEW_CONNECT_TAB,
content: '打开新建连接 tab',
type: TerminalShortcutType.TAB
type: TerminalShortcutType.GLOBAL
}, {
item: 'openCopyTerminalTab',
content: '复制当前终端 tab',
type: TerminalShortcutType.TERMINAL
item: TerminalShortcutKeys.OPEN_NEW_CONNECT_MODAL,
content: '打开新建连接弹框',
type: TerminalShortcutType.PANEL
}, {
item: TerminalShortcutKeys.COPY_TERMINAL,
content: '复制终端',
type: TerminalShortcutType.PANEL
}, {
item: TerminalShortcutKeys.CLOSE_TERMINAL,
content: '关闭终端',
type: TerminalShortcutType.PANEL
}, {
item: TerminalShortcutKeys.CHANGE_TO_PREV_TERMINAL,
content: '切换至前一个终端',
type: TerminalShortcutType.PANEL
}, {
item: TerminalShortcutKeys.CHANGE_TO_NEXT_TERMINAL,
content: '切换至后一个终端',
type: TerminalShortcutType.PANEL
}, {
item: 'copy',
content: '复制',