WebShell中热键规划

发表于 更新于 本文字数： 1.2k 阅读时长 ≈ 2 分钟
本文是作者对WebShell中热键规划的介绍，包括WebShell中热键规划的优势、实现细节、相关资料等，这些步骤可以帮助作者提高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 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

延伸

苹果平台判断

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

1
2
3

/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还不支持。