WebShell中热键规划

最近在做的WebShell需要支持热键，整体方案这里总结下

热键理念

先明确设计理念

1. 热键组合需要考虑表意化方便用户理解记忆，不要反常识，同时用户很好操作

2. 热键要规避常用的热键，比如浏览器的一些热键，即使可以拦截覆盖也要谨慎考虑

热键冲突

Web网页受限于系统/浏览器/浏览器插件热键冲突，同时这里做的是网页终端，终端本身也有一些热键/按键，因此要考虑几方面的热键

终端本身一些热键

• ⌥ ⬅️ 光标向左移动到上一个词的开始，Windows下没对应支持

• ⌥ ➡️ 光标向左移动到下一个词的开始，Windows下没对应支持

• ⌘ ⬅️ 光标移动到行首，Windows下是Home

• ⌘ ➡️ 光标移动到行尾，Windows下是End

• Control C 取消

浏览器层面部分热键

浏览器本来就有一些热键，同时部分热键可拦截，部分又不可以

在Mac- Chrome下实际测试尝试后有以下结果

可拦截热键

• ⌘ F
• ⌘ L
• ⌘ P
• ⌘ ,
• ⌘ S
• ESC

不可拦截热键

• ⌘ N 创建新window
• ⌘ T 创建新Tab
• ⌘ W 关闭Tab
• ⌘ ⇧ [ 左Tab
• ⌘ ⇧ [ 右Tab

系统热键

• ⌘ Tab App切换

最终方案

基于上述情况，设计如下方案

抽离如下几个概念

1. Action动作，比如term:clearScreen即清屏，该动作term部分表示作用域，clearScreen部分表示功能是清屏

2. HotKey热键，比如command+k即某个热键

Action可以绑定多个热键，同一个热键组合也可以被绑定到多个Action上。

处理逻辑

全局捕获监听N个Action下的所有热键

1. 当某个热键触发时，根据爆发事件的元素及绑定时所挂的Action从而确定是不是目标Scope爆发的事件，如果不是，则ignore该事件，如果是，则触发对应的action行为，同时事件标记为catched.这样方便之后的冒泡事件处理。

热键规划

这里列出一些，供参考

延伸

苹果平台判断

不同平台下热键绑定不同，因此需要进行平台判断。

/Mac|iPod|iPhone|iPad/.test(navigator.platform)

mod键

在热键规划上，Mac下的⌘键对应win下的⌃键，而不是windows键，这点需要注意

Windows下ctrl left/right

hyper下已经关闭该支持，但我个人测试是可以的

全热键支持

如上所说网页上很多热键因为被浏览器直接支持，所以并无法捕获处理。但通过keyboard.lock锁定部分按键，同时网页处于PWA/全屏下可以解决该痛点。

1. 实际测试发现P/N按键无法锁定成功。
2. keyboard.lock api受限兼容性，目前Chrome OK，Safari/Firefox还不支持。