Hotkey

lobehub/lobehub/.agents/skills/hotkey

作者 lobehub6a3eba96b010無授權條款83K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫今天更新

Use for keyboard shortcuts, registration, key combinations, scope, conflicts and shortcut tooltips.

AI 產生的概覽

指導在 TypeScript 應用程式加入快速鍵:常數、註冊、在地化、Hook 與提示。

功能
此技能提供在 TypeScript 程式碼庫中新增鍵盤快速鍵的逐步指南。內容涵蓋更新快速鍵 id 聯合型別、註冊預設按鍵組合與作用範圍、加入在地化的標題與描述文字、建立並註冊 React Hook,以及選擇性地加上提示浮層。它也列出關於作用範圍、分組、衝突與跨平台按鍵的最佳實務與疑難排解說明。
適用情境
適用於在此程式碼庫中新增、註冊或排查鍵盤快速鍵時。也適用於處理按鍵組合、快速鍵作用範圍、衝突或快速鍵提示浮層。
執行需求
不隨附指令碼,僅為說明文件。它假定存在一個 TypeScript 專案,包含所引用的套件與檔案、React Hook 以及在地化文字設定。

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:

typescript
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:

typescript
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:

typescript
const hotkey: HotkeyI18nTranslations = {  saveTopic: {    desc: '保存当前话题并新建一个话题',    title: '保存话题',  },};

4. Create and Register Hook

In src/hooks/useHotkeys/chatScope.ts:

typescript
export const useSaveTopicHotkey = () => {  const openNewTopicOrSaveTopic = useChatStore((s) => s.openNewTopicOrSaveTopic);  return useHotkeyById(HotkeyEnum.SaveTopic, openNewTopicOrSaveTopic);};
export const useRegisterChatHotkeys = () => {  useSaveTopicHotkey();  // ...other hotkeys};

5. Add Tooltip (Optional)

tsx
const saveTopicHotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.SaveTopic));
<Tooltip hotkey={saveTopicHotkey} title={t('saveTopic.title', { ns: 'hotkey' })}>  <Button icon={<SaveOutlined />} onClick={openNewTopicOrSaveTopic} /></Tooltip>;

Best Practices

  1. Scope: Choose global or chat scope based on functionality
  2. Grouping: Place in appropriate group (System/Layout/Conversation)
  3. Conflict check: Ensure no conflict with system/browser shortcuts
  4. Platform: Use KeyEnum.Mod instead of hardcoded Ctrl or Cmd
  5. 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

來源與署名

來源:lobehub/lobehub位於.agents/skills/hotkey提交6a3eba9

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架