feat: 添加快捷键逻辑.

This commit is contained in:
lijiahang
2024-01-16 16:04:34 +08:00
parent 18962c5e99
commit 80829b51c1
7 changed files with 134 additions and 41 deletions

View File

@@ -143,6 +143,15 @@ export default defineStore('terminal', {
}); });
}, },
// 复制并且打开终端
openCopyTerminal(hostId: number) {
const host = this.hosts.hostList
.find(s => s.id === hostId);
if (host) {
this.openTerminal(host);
}
}
}, },
}); });

View File

@@ -80,5 +80,5 @@ export interface TerminalShortcutKey {
ctrlKey: boolean; ctrlKey: boolean;
shiftKey: boolean; shiftKey: boolean;
altKey: boolean; altKey: boolean;
key: string; code: string;
} }

View File

@@ -1,8 +1,9 @@
import type { TerminalInteractSetting, TerminalShortcutKey } from '@/store/modules/terminal/types'; import type { TerminalInteractSetting, TerminalShortcutKey } from '@/store/modules/terminal/types';
import type { ITerminalSession, ITerminalSessionHandler, ITerminalTabManager, TerminalDomRef } from '../types/terminal.type'; import type { ITerminalSession, ITerminalSessionHandler, ITerminalTabManager, TerminalDomRef } from '../types/terminal.type';
import type { Terminal } from 'xterm'; import type { Terminal } from 'xterm';
import { useTerminalStore } from '@/store';
import useCopy from '@/hooks/copy'; import useCopy from '@/hooks/copy';
import { useTerminalStore } from '@/store';
import { InnerTabs } from '../types/terminal.const';
const { copy: copyValue, readText } = useCopy(); const { copy: copyValue, readText } = useCopy();
@@ -35,62 +36,86 @@ export default class TerminalSessionHandler implements ITerminalSessionHandler {
ctrlKey: true, ctrlKey: true,
shiftKey: true, shiftKey: true,
altKey: false, altKey: false,
key: 'C' code: 'KeyC'
}, { }, {
option: 'paste', option: 'paste',
ctrlKey: true, ctrlKey: true,
shiftKey: true, shiftKey: true,
altKey: false, altKey: false,
key: 'V' code: 'KeyV'
}, { }, {
option: 'toTop', option: 'toTop',
ctrlKey: true, ctrlKey: true,
shiftKey: true, shiftKey: true,
altKey: false, altKey: false,
key: 'ArrowUp' code: 'ArrowUp'
}, { }, {
option: 'toBottom', option: 'toBottom',
ctrlKey: true, ctrlKey: true,
shiftKey: true, shiftKey: true,
altKey: false, altKey: false,
key: 'ArrowDown' code: 'ArrowDown'
}, { }, {
option: 'selectAll', option: 'selectAll',
ctrlKey: true, ctrlKey: true,
shiftKey: true, shiftKey: true,
altKey: false, altKey: false,
key: 'A' code: 'KeyA'
}, { }, {
option: 'search', option: 'search',
ctrlKey: true, ctrlKey: true,
shiftKey: true, shiftKey: true,
altKey: false, altKey: false,
key: 'F' code: 'KeyF'
}, { }, {
option: 'fontSizePlus', option: 'fontSizePlus',
ctrlKey: true, ctrlKey: true,
shiftKey: true, shiftKey: false,
altKey: false, altKey: true,
key: '+' code: 'Equal'
}, { }, {
option: 'fontSizeSubtract', option: 'fontSizeSubtract',
ctrlKey: true, ctrlKey: true,
shiftKey: true, shiftKey: false,
altKey: false, altKey: true,
key: '_' code: 'Minus'
}, { }, {
option: 'commandEditor', option: 'commandEditor',
ctrlKey: true, ctrlKey: true,
shiftKey: true, shiftKey: false,
altKey: false, altKey: true,
key: 'O' code: 'KeyE'
}, { }, {
option: 'close', option: 'close',
ctrlKey: true, ctrlKey: true,
shiftKey: true, shiftKey: false,
altKey: false, altKey: true,
key: 'W' code: 'KeyW'
} }, {
option: 'changeToPrev',
ctrlKey: true,
shiftKey: false,
altKey: true,
code: 'ArrowLeft'
}, {
option: 'changeToNext',
ctrlKey: true,
shiftKey: false,
altKey: true,
code: 'ArrowRight'
}, {
option: 'openCopyTerminal',
ctrlKey: true,
shiftKey: false,
altKey: true,
code: 'KeyO'
}, {
option: 'openNewConnect',
ctrlKey: true,
shiftKey: false,
altKey: true,
code: 'KeyN'
},
]; ];
this.tabManager = tabManager; this.tabManager = tabManager;
} }
@@ -126,7 +151,7 @@ export default class TerminalSessionHandler implements ITerminalSessionHandler {
triggerShortcutKey(e: KeyboardEvent): boolean { triggerShortcutKey(e: KeyboardEvent): boolean {
// 检测触发的快捷键 // 检测触发的快捷键
const key = this.shortcutKeys.find(key => { const key = this.shortcutKeys.find(key => {
return key.key === e.key return key.code === e.code
&& key.altKey === e.altKey && key.altKey === e.altKey
&& key.shiftKey === e.shiftKey && key.shiftKey === e.shiftKey
&& key.ctrlKey === e.ctrlKey; && key.ctrlKey === e.ctrlKey;
@@ -240,13 +265,29 @@ export default class TerminalSessionHandler implements ITerminalSessionHandler {
this.session.disconnect(); this.session.disconnect();
} }
// 关闭 // 关闭 tab
close() { closeTab() {
this.tabManager.deleteTab(this.session.sessionId); this.tabManager.deleteTab(this.session.sessionId);
} }
// todo // 切换到前一个 tab
// 切换 tab changeToPrev() {
// 打开 新 this.tabManager.changeToPrev();
}
// 切换到后一个 tab
changeToNext() {
this.tabManager.changeToNext();
}
// 复制终端
openCopyTerminal() {
useTerminalStore().openCopyTerminal(this.session.hostId);
}
// 打开新建连接页面
openNewConnect() {
this.tabManager.openTab(InnerTabs.NEW_CONNECTION);
}
} }

View File

@@ -99,6 +99,7 @@ export default class TerminalSessionManager implements ITerminalSessionManager {
// 重置 // 重置
reset(): void { reset(): void {
try {
this.sessions = {}; this.sessions = {};
// 关闭 channel // 关闭 channel
this.channel.close(); this.channel.close();
@@ -109,6 +110,8 @@ export default class TerminalSessionManager implements ITerminalSessionManager {
} }
// 移除 resize 事件 // 移除 resize 事件
removeEventListen(window, 'resize', this.dispatchResizeFn); removeEventListen(window, 'resize', this.dispatchResizeFn);
} catch (e) {
}
} }
} }

View File

@@ -44,6 +44,30 @@ export default class TerminalTabManager implements ITerminalTabManager {
this.active = tab.key; this.active = tab.key;
} }
// 切换到前一个 tab
changeToPrev() {
this.changeToIndex(this.getCurrentTabIndex() - 1);
}
// 切换到后一个 tab
changeToNext() {
this.changeToIndex(this.getCurrentTabIndex() + 1);
}
// 切换索引 tab
changeToIndex(index: number) {
if (index < 0 || index >= this.items.length) {
return;
}
// 切换 tab
this.active = this.items[index].key;
}
// 获取当前索引
private getCurrentTabIndex(): number {
return this.items.findIndex(s => s.key === this.active);
}
// 清空 // 清空
clear() { clear() {
this.active = undefined as unknown as string; this.active = undefined as unknown as string;

View File

@@ -121,7 +121,7 @@ export const ActionBarItems = [
icon: 'icon-poweroff', icon: 'icon-poweroff',
content: '断开连接', content: '断开连接',
}, { }, {
item: 'close', item: 'closeTab',
icon: 'icon-close', icon: 'icon-close',
content: '关闭终端', content: '关闭终端',
} }

View File

@@ -97,6 +97,12 @@ export interface ITerminalTabManager {
deleteTab: (key: string) => void; deleteTab: (key: string) => void;
// 打开 tab // 打开 tab
openTab: (tab: TerminalTabItem) => void; openTab: (tab: TerminalTabItem) => void;
// 切换到前一个 tab
changeToPrev: () => void;
// 切换到后一个 tab
changeToNext: () => void;
// 切换索引 tab
changeToIndex: (index: number) => void;
// 清空 // 清空
clear: () => void; clear: () => void;
} }
@@ -172,10 +178,12 @@ export interface ITerminalSession {
setCanWrite: (canWrite: boolean) => void; setCanWrite: (canWrite: boolean) => void;
// 写入数据 // 写入数据
write: (value: string | Uint8Array) => void; write: (value: string | Uint8Array) => void;
// 自适应
fit: () => void;
// 聚焦 // 聚焦
focus: () => void; focus: () => void;
// 失焦
blur: () => void;
// 自适应
fit: () => void;
// 查找 // 查找
find: (word: string, next: boolean, options: ISearchOptions) => void; find: (word: string, next: boolean, options: ISearchOptions) => void;
// 断开连接 // 断开连接
@@ -221,6 +229,14 @@ export interface ITerminalSessionHandler {
clear: () => void; clear: () => void;
// 断开连接 // 断开连接
disconnect: () => void; disconnect: () => void;
// 关闭 // 关闭 tab
close: () => void; closeTab: () => void;
// 切换到前一个 tab
changeToPrev: () => void;
// 切换到后一个 tab
changeToNext: () => void;
// 复制终端
openCopyTerminal: () => void;
// 打开新建连接页面
openNewConnect: () => void;
} }