feat: 添加快捷键逻辑.
This commit is contained in:
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -80,5 +80,5 @@ export interface TerminalShortcutKey {
|
|||||||
ctrlKey: boolean;
|
ctrlKey: boolean;
|
||||||
shiftKey: boolean;
|
shiftKey: boolean;
|
||||||
altKey: boolean;
|
altKey: boolean;
|
||||||
key: string;
|
code: string;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -99,16 +99,19 @@ export default class TerminalSessionManager implements ITerminalSessionManager {
|
|||||||
|
|
||||||
// 重置
|
// 重置
|
||||||
reset(): void {
|
reset(): void {
|
||||||
this.sessions = {};
|
try {
|
||||||
// 关闭 channel
|
this.sessions = {};
|
||||||
this.channel.close();
|
// 关闭 channel
|
||||||
// 清除 ping 事件
|
this.channel.close();
|
||||||
if (this.keepAliveTask) {
|
// 清除 ping 事件
|
||||||
clearInterval(this.keepAliveTask);
|
if (this.keepAliveTask) {
|
||||||
this.keepAliveTask = undefined;
|
clearInterval(this.keepAliveTask);
|
||||||
|
this.keepAliveTask = undefined;
|
||||||
|
}
|
||||||
|
// 移除 resize 事件
|
||||||
|
removeEventListen(window, 'resize', this.dispatchResizeFn);
|
||||||
|
} catch (e) {
|
||||||
}
|
}
|
||||||
// 移除 resize 事件
|
|
||||||
removeEventListen(window, 'resize', this.dispatchResizeFn);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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: '关闭终端',
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user