[RFC] 124 - 桌面端自定义快捷键

[arvinxx]

现有快捷键实现架构分析

graph TB
    subgraph "渲染进程 (React/Web)"
        UI["⚙️ 快捷键设置UI<br/>Essential.tsx<br/>Conversation.tsx"]
        HI["📥 HotkeyInput组件<br/>(@lobehub/ui)"]
        URH["🔄 useRegisterGlobalHotkeys<br/>全局快捷键注册"]
        UHB["🎯 useHotkeyById<br/>单个快捷键Hook"]
        RHH["⌨️ react-hotkeys-hook<br/>键盘事件监听"]
    end

    subgraph "数据层"
        US["💾 UserStore<br/>用户设置存储"]
        DHC["📋 DEFAULT_HOTKEY_CONFIG<br/>默认快捷键配置"]
        HR["📝 HOTKEYS_REGISTRATION<br/>快捷键注册表"]
    end

    subgraph "主进程 (Electron)"
        SC["🎮 ShortcutController<br/>IPC控制器"]
        SM["⚡ ShortcutManager<br/>全局快捷键管理"]
        GSC["🔧 globalShortcut<br/>Electron API"]
        DSC["⚙️ DEFAULT_SHORTCUTS_CONFIG<br/>桌面端默认配置"]
    end

    subgraph "配置系统"
        HT["📜 types/hotkey.ts<br/>类型定义"]
        HC["⚙️ const/hotkeys.ts<br/>快捷键常量"]
        SSC["💾 StoreManager<br/>配置持久化"]
    end

    UI --> HI
    UI --> US
    URH --> UHB
    UHB --> RHH
    UHB --> US
    US --> DHC
    DHC --> HR
    HR --> HC
    HC --> HT

    UI -.->|IPC调用| SC
    SC --> SM
    SM --> GSC
    SM --> DSC
    SM --> SSC

    style UI fill:#e1f5fe
    style SM fill:#fff3e0
    style US fill:#f3e5f5
    style HR fill:#e8f5e8

Loading

sequenceDiagram
    participant User as "👤 用户"
    participant UI as "⚙️ 设置界面"
    participant Store as "💾 UserStore"
    participant Hook as "🎯 useHotkeyById"
    participant RHH as "⌨️ react-hotkeys-hook"
    participant IPC as "🔄 IPC通道"
    participant SC as "🎮 ShortcutController"
    participant SM as "⚡ ShortcutManager"
    participant GS as "🔧 globalShortcut"

    Note over User, GS: 渲染进程快捷键流程

    User->>UI: 修改快捷键设置
    UI->>Store: setSettings({hotkey: newConfig})
    Store->>Hook: 通知快捷键更新
    Hook->>RHH: 重新注册快捷键

    Note over User, GS: 桌面端全局快捷键流程

    User->>UI: 修改桌面端快捷键
    UI->>IPC: updateShortcutConfig(id, accelerator)
    IPC->>SC: 调用控制器方法
    SC->>SM: updateShortcutConfig()
    SM->>GS: unregister旧快捷键
    SM->>GS: register新快捷键
    SM->>Store: 保存配置到本地

    Note over User, GS: 快捷键触发流程

    User->>RHH: 按下快捷键(渲染进程内)
    RHH->>Hook: 触发callback
    Hook->>UI: 执行相应操作

    User->>GS: 按下全局快捷键
    GS->>SM: 触发回调函数
    SM->>UI: 执行窗口操作

Loading

graph LR
    subgraph "快捷键配置层次"
        HE["🎯 HotkeyEnum<br/>快捷键ID枚举"]
        HR["📝 HOTKEYS_REGISTRATION<br/>快捷键注册表"]
        DHC["📋 DEFAULT_HOTKEY_CONFIG<br/>默认配置"]
        USC["👤 User Settings<br/>用户自定义配置"]
        DSC["🖥️ DEFAULT_SHORTCUTS_CONFIG<br/>桌面端配置"]
    end

    subgraph "数据处理"
        MS["🔄 merge()<br/>配置合并"]
        GHB["🎯 getHotkeyById<br/>获取快捷键配置"]
        UHB["⌨️ useHotkeyById<br/>Hook使用配置"]
    end

    subgraph "执行层"
        RHH["⌨️ react-hotkeys-hook<br/>渲染进程快捷键"]
        GSC["🔧 globalShortcut<br/>全局快捷键"]
    end

    HE --> HR
    HR --> DHC
    DHC --> MS
    USC --> MS
    MS --> GHB
    GHB --> UHB
    UHB --> RHH

    DSC --> GSC

    style HR fill:#e8f5e8
    style DHC fill:#fff3e0
    style USC fill:#e1f5fe
    style DSC fill:#f3e5f5

Loading

现有快捷键系统特点

🏗️ 双层架构设计

1. 渲染进程快捷键 (网页内)

   • 使用 react-hotkeys-hook 库
   • 支持作用域 (Scope) 管理：Global, Chat, Files, Image
   • 可以在表单输入框内工作
   • 配置存储在 UserStore 中

2. 主进程全局快捷键 (系统级)

   • 使用 Electron 的 globalShortcut API
   • 可以在应用失焦时工作
   • 配置独立管理，存储在桌面端配置中

📊 配置管理系统

// 快捷键定义流程
HotkeyEnum → HOTKEYS_REGISTRATION → DEFAULT_HOTKEY_CONFIG → User Settings

• 类型安全: 使用 TypeScript 确保配置一致性
• 默认配置: 从 HOTKEYS_REGISTRATION 自动生成
• 用户自定义: 支持覆盖默认配置
• 冲突检测: 防止快捷键重复绑定

🎨 完整的UI界面

• 设置页面: src/app/[variants]/(main)/settings/hotkey/
• 分组显示: Essential (基础) 和 Conversation (对话) 两组
• 实时预览: 使用 @lobehub/ui 的 HotkeyInput 组件
• 冲突提示: 自动检测和提示快捷键冲突