关于 hotkey
面向开发者的键盘快捷键添加指南,说明如何修改常量、注册配置、翻译和 Hook,并可选择补充提示气泡。
主要功能
- 01添加快捷键标识符
- 02注册默认快捷键
- 03添加本地化标题和说明
- 04创建并注册 Hook
- 05可选添加提示气泡
- 06检查作用域和按键冲突
适用场景
- 01为聊天操作添加快捷键
- 02让快捷键显示在设置中
- 03排查快捷键未触发的问题
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ lobehub/ lobehub --skill hotkey安装后在 Claude Code 中输入/hotkey确认已加载。
详细介绍
添加键盘快捷键指南
添加新快捷键的步骤
1. 更新快捷键常量
在 packages/types/src/hotkey.ts 中,将新 ID 添加到 HotkeyId 联合类型中——这是 HotkeyEnum 所依据的类型来源:
export type HotkeyId =
| 'addUserMessage'
// existing...
| 'saveTopic';
2. 注册默认快捷键
在 packages/const/src/hotkeys.ts 中,KeyEnum 和 combineKeys 已在此文件中本地定义,因此无需导入——将条目添加到 HotkeyEnum 和 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. 添加 i18n 翻译
在 packages/locales/src/default/hotkey.ts 中:
const hotkey: HotkeyI18nTranslations = {
saveTopic: {
desc: '保存当前话题并新建一个话题',
title: '保存话题',
},
};
4. 创建并注册 Hook
在 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. 添加工具提示(可选)
const saveTopicHotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.SaveTopic));
<Tooltip hotkey={saveTopicHotkey} title={t('saveTopic.title', { ns: 'hotkey' })}>
<Button icon={<SaveOutlined />} onClick={openNewTopicOrSaveTopic} />
</Tooltip>;
最佳实践
- 作用域:根据功能选择全局作用域或聊天作用域
- 分组:将其放入合适的分组中(系统/布局/对话)
- 冲突检查:确保不会与系统或浏览器快捷键冲突
- 平台:使用
KeyEnum.Mod,而不是硬编码Ctrl或Cmd - 清晰的说明:为用户提供标题和说明
故障排除
- 无法使用:检查作用域和 RegisterHotkeys hook
- 设置中未显示:检查 HOTKEYS_REGISTRATION 配置
- 冲突:HotkeyInput 组件会显示警告
- 特定页面无效:确保已激活正确的作用域
评论
支持 Markdown