Agent Skills
› lobehub/lobehub
› hotkey
hotkey
GitHub提供前端键盘快捷键的添加指南，涵盖常量定义、注册、国际化及Hook使用，帮助开发者规范实现快捷键功能。
Trigger Scenarios
需要添加新的键盘快捷键
配置快捷键的注册与绑定
解决快捷键冲突或作用域问题
Install
npx skills add lobehub/lobehub --skill hotkey -g -y
SKILL.md
Frontmatter
{
"name": "hotkey",
"description": "Use for keyboard shortcuts, registration, key combinations, scope, conflicts and shortcut tooltips.",
"user-invocable": false
}
Adding Keyboard Shortcuts Guide
Steps to Add a New Hotkey
1. Update Hotkey Constant
In packages/types/src/hotkey.ts, add the new id to the HotkeyId union — it's the source of truth HotkeyEnum is typed against:
export type HotkeyId =
| 'addUserMessage'
// existing...
| 'saveTopic';
2. Register Default Hotkey
In packages/const/src/hotkeys.ts, KeyEnum and combineKeys are already defined locally in this file, so no import is needed — add the entry to HotkeyEnum and to HOTKEYS_REGISTRATION:
export const HotkeyEnum = {
// existing...
SaveTopic: 'saveTopic',
} as const satisfies Record<string, HotkeyId>;
export const HOTKEYS_REGISTRATION: HotkeyRegistration = [
// existing...
{
group: HotkeyGroupEnum.Conversation,
id: HotkeyEnum.SaveTopic,
keys: combineKeys([KeyEnum.Alt, 'n']),
scopes: [HotkeyScopeEnum.Chat],
},
];
3. Add i18n Translation
In packages/locales/src/default/hotkey.ts:
const hotkey: HotkeyI18nTranslations = {
saveTopic: {
desc: '保存当前话题并新建一个话题',
title: '保存话题',
},
};
4. Create and Register Hook
In src/hooks/useHotkeys/chatScope.ts:
export const useSaveTopicHotkey = () => {
const openNewTopicOrSaveTopic = useChatStore((s) => s.openNewTopicOrSaveTopic);
return useHotkeyById(HotkeyEnum.SaveTopic, openNewTopicOrSaveTopic);
};
export const useRegisterChatHotkeys = () => {
useSaveTopicHotkey();
// ...other hotkeys
};
5. Add Tooltip (Optional)
const saveTopicHotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.SaveTopic));
<Tooltip hotkey={saveTopicHotkey} title={t('saveTopic.title', { ns: 'hotkey' })}>
<Button icon={<SaveOutlined />} onClick={openNewTopicOrSaveTopic} />
</Tooltip>;
Best Practices
- Scope: Choose global or chat scope based on functionality
- Grouping: Place in appropriate group (System/Layout/Conversation)
- Conflict check: Ensure no conflict with system/browser shortcuts
- Platform: Use
KeyEnum.Modinstead of hardcodedCtrlorCmd - Clear description: Provide title and description for users
Troubleshooting
- Not working: Check scope and RegisterHotkeys hook
- Not in settings: Verify HOTKEYS_REGISTRATION config
- Conflict: HotkeyInput component shows warnings
- Page-specific: Ensure correct scope activation
Version History
-
69012b8
Current 2026-09-28 20:13
重构了快捷键类型系统，从枚举对象改为TypeScript联合类型以增强类型安全；优化了模块路径和导入方式。
- e0d4b61 2026-09-23 09:52
- 29fe043 2026-08-20 18:33
