CRM 快捷键
灵感:能力工具箱 hotkeys(pkg: hotkeys-js)。
为 CRM 常用动作绑定快捷键(新建客户、聚焦搜索、保存等),并在输入框内默认不触发冲突键。
何时使用
- 「Ctrl+K 打开搜索」「Ctrl+S 保存客户」
- 列表页键盘效率增强
硬约束
- 使用
hotkeys-js;组件卸载时hotkeys.unbind。 - 默认在
INPUT/TEXTAREA/SELECT/contenteditable内忽略全局快捷键(保存类可按需例外并写清)。 - 提供可配置映射表:
{ combo, actionId, handler };冲突时后注册覆盖前注册并console.warn。 - 帮助面板列出当前快捷键;Mac 显示 ⌘ / Windows 显示 Ctrl。
- 不拦截浏览器关键键(如 Ctrl+W 关标签)除非用户明确要求且有风险提示。
推荐实现要点
import hotkeys from 'hotkeys-js'
export type HotkeyItem = { combo: string; actionId: string; run: () => void }
export function bindCrmHotkeys(items: HotkeyItem[]) {
hotkeys.filter = (event) => {
const tag = (event.target as HTMLElement)?.tagName
if (tag && /^(INPUT|TEXTAREA|SELECT)$/.test(tag)) return false
if ((event.target as HTMLElement)?.isContentEditable) return false
return true
}
for (const it of items) {
hotkeys(it.combo, (e) => {
e.preventDefault()
it.run()
})
}
return () => {
for (const it of items) hotkeys.unbind(it.combo)
}
}
// 示例
// bindCrmHotkeys([
// { combo: 'ctrl+k,command+k', actionId: 'search', run: () => focusSearch() },
// { combo: 'ctrl+n,command+n', actionId: 'new-customer', run: () => openCreate() },
// ])
Agent 步骤
- 实现绑定/解绑与 filter。
- 接入路由页
onMounted/onUnmounted。 - 自测:输入框内打字不误触;快捷键可触发动作。
附加
- README.md · reference.md · templates/usage.md