WebShell中热键规划
·
3 min read
最近在做的WebShell需要支持热键，整体方案这里总结下
热键理念
先明确设计理念
热键组合需要考虑表意化
方便用户理解记忆，不要反常识，同时用户很好操作热键要规避常用的热键，比如浏览器的一些热键，即使可以拦截覆盖也要谨慎考虑
热键冲突
Web网页受限于系统/浏览器/浏览器插件热键冲突，同时这里做的是网页终端，终端本身也有一些热键/按键，因此要考虑几方面的热键
终端本身一些热键
⌥ ⬅️ 光标向左移动到上一个词的开始，Windows下没对应支持
⌥ ➡️ 光标向左移动到下一个词的开始，Windows下没对应支持
⌘ ⬅️ 光标移动到行首，Windows下是Home
⌘ ➡️ 光标移动到行尾，Windows下是End
Control C 取消
浏览器层面部分热键
浏览器本来就有一些热键，同时部分热键可拦截，部分又不可以
在Mac- Chrome下实际测试尝试后有以下结果
可拦截热键
⌘ F⌘ L⌘ P⌘ ,⌘ SESC
不可拦截热键
⌘ N创建新window⌘ T创建新Tab⌘ W关闭Tab⌘ ⇧ [左Tab⌘ ⇧ [右Tab
系统热键
⌘ TabApp切换
最终方案
基于上述情况，设计如下方案
抽离如下几个概念
Action动作，比如
term:clearScreen即清屏，该动作term部分表示作用域，clearScreen部分表示功能是清屏HotKey热键，比如
command+k即某个热键
Action可以绑定多个热键，同一个热键组合也可以被绑定到多个Action上。
处理逻辑
全局捕获监听N个Action下的所有热键
- 当某个热键触发时，根据爆发事件的元素及绑定时所挂的Action从而确定是不是目标Scope爆发的事件，如果不是，则ignore该事件，如果是，则触发对应的action行为，同时事件标记为catched.这样方便之后的冒泡事件处理。
热键规划
这里列出一些，供参考
| 功能 | Mac | Windows |
|---|---|---|
| 热键介绍 | ⌘ / | Ctrl / |
| 设置 | ⌘ , | Ctrl , |
| Tab切换 | ⌃ 1-5 | Ctrl 1-5 |
| Tab新建 | ⌥ T | Alt T |
| Tab关闭 | ⌥ W | Alt W |
| 搜索 | ⌘ F | Ctrl F |
| 放大字体 | ⌘ ⇧ + | Ctrl + |
| 缩小字体 | ⌘ ⇧ - | Ctrl - |
| AI命令 | ⌃ ` | Ctrl ` |
| 命令面板 | ⌘⇧P |
延伸
苹果平台判断
不同平台下热键绑定不同，因此需要进行平台判断。
/Mac|iPod|iPhone|iPad/.test(navigator.platform)
mod键
在热键规划上，Mac下的⌘键对应win下的⌃键，而不是windows键，这点需要注意
Windows下ctrl left/right
hyper下已经关闭该支持，但我个人测试是可以的
全热键支持
如上所说网页上很多热键因为被浏览器直接支持，所以并无法捕获处理。但通过keyboard.lock锁定部分按键，同时网页处于PWA/全屏下可以解决该痛点。
- 实际测试发现P/N按键无法锁定成功。
- keyboard.lock api受限兼容性，目前Chrome OK，Safari/Firefox还不支持。
