feat(shortcuts): 添加快捷键提示功能至多个组件

Licoy · Licoy · commit 44708d70e375 · 2026-03-27T19:56:44.000+08:00
diff --git a/src/components/chat/ChatSidebar.tsx b/src/components/chat/ChatSidebar.tsx
@@ -9,6 +9,8 @@ import Conversations from '@ant-design/x/es/conversations'
 import type { ConversationItemType } from '@ant-design/x/es/conversations/interface'
 import { useTranslation } from 'react-i18next'
 import { useConversationStore, useProviderStore, useSettingsStore } from '@/stores'
+import { getShortcutBinding, formatShortcutForDisplay } from '@/lib/shortcuts'
+import type { ShortcutAction } from '@/lib/shortcuts'
 import type { Conversation, Message } from '@/types'
 
 function getDateGroup(timestamp: number): string {
@@ -50,6 +52,12 @@ export function ChatSidebar() {
   const providers = useProviderStore((s) => s.providers)
   const settings = useSettingsStore((s) => s.settings)
 
+  const shortcutHint = useCallback((label: string, action: ShortcutAction) => {
+    if (!settings) return label
+    const binding = getShortcutBinding(settings, action)
+    return `${label} (${formatShortcutForDisplay(binding)})`
+  }, [settings])
+
   const [searchText, setSearchText] = useState('')
   const [searchVisible, setSearchVisible] = useState(false)
   const [multiSelectMode, setMultiSelectMode] = useState(false)
@@ -586,7 +594,7 @@ export function ChatSidebar() {
                   onClick={handleShowArchived}
                 />
               </Tooltip>
-              <Tooltip title={t('chat.newConversation')}>
+              <Tooltip title={shortcutHint(t('chat.newConversation'), 'newConversation')}>
                 <Button
                   type="text"
                   icon={<MessageSquarePlus size={16} />}
diff --git a/src/components/chat/ModelSelector.tsx b/src/components/chat/ModelSelector.tsx
@@ -1,9 +1,10 @@
 import React, { useMemo, useState, useCallback, useEffect } from 'react';
-import { Tag, Modal, Input, theme } from 'antd';
+import { Tag, Modal, Input, theme, Tooltip } from 'antd';
 import { Search, Settings, Pin, PinOff } from 'lucide-react';
 import { ModelIcon } from '@lobehub/icons';
 import { useTranslation } from 'react-i18next';
 import { useProviderStore, useConversationStore, useSettingsStore, useUIStore } from '@/stores';
+import { getShortcutBinding, formatShortcutForDisplay } from '@/lib/shortcuts';
 
 const PINNED_MODELS_KEY = 'aqbot_pinned_models';
 
@@ -210,6 +211,7 @@ export function ModelSelector({ style, onSelect, overrideCurrentModel, children,
       {children ? (
         <span onClick={() => setOpen(true)}>{children}</span>
       ) : (
+        <Tooltip title={`${t('chat.switchModel', '切换模型')} (${formatShortcutForDisplay(getShortcutBinding(settings, 'toggleModelSelector'))})`}>
         <Tag
           onClick={() => setOpen(true)}
           style={{
@@ -233,6 +235,7 @@ export function ModelSelector({ style, onSelect, overrideCurrentModel, children,
             </>
           )}
         </Tag>
+        </Tooltip>
       )}
 
       <Modal
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
@@ -2,8 +2,10 @@ import { useState } from 'react';
 import { Tooltip, Avatar, theme } from 'antd';
 import { MessageSquare, Router, FolderOpen, User } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { useUIStore } from '@/stores';
+import { useUIStore, useSettingsStore } from '@/stores';
 import { useUserProfileStore } from '@/stores/userProfileStore';
+import { getShortcutBinding, formatShortcutForDisplay } from '@/lib/shortcuts';
+import type { ShortcutAction } from '@/lib/shortcuts';
 import { useResolvedAvatarSrc } from '@/hooks/useResolvedAvatarSrc';
 import { UserProfileModal } from './UserProfileModal';
 import type { PageKey } from '@/types';
@@ -22,11 +24,21 @@ export function Sidebar() {
   const profile = useUserProfileStore((s) => s.profile);
   const [profileModalOpen, setProfileModalOpen] = useState(false);
   const resolvedAvatarSrc = useResolvedAvatarSrc(profile.avatarType, profile.avatarValue);
+  const settings = useSettingsStore((s) => s.settings);
+
+  const NAV_SHORTCUT_MAP: Partial<Record<PageKey, ShortcutAction>> = {
+    gateway: 'toggleGateway',
+  };
 
   const renderNavButton = (item: { key: PageKey; icon: React.ReactNode; labelKey: string }) => {
     const isActive = activePage === item.key;
+    const label = t(item.labelKey);
+    const action = NAV_SHORTCUT_MAP[item.key];
+    const title = action
+      ? `${label} (${formatShortcutForDisplay(getShortcutBinding(settings, action))})`
+      : label;
     return (
-      <Tooltip key={item.key} title={t(item.labelKey)} placement="right">
+      <Tooltip key={item.key} title={title} placement="right">
         <button
           onClick={() => setActivePage(item.key)}
           className="flex items-center justify-center text-base transition-colors"
diff --git a/src/components/layout/TitleBar.tsx b/src/components/layout/TitleBar.tsx
@@ -5,6 +5,7 @@ import { Settings, XCircle, Sun, Moon, Monitor, Globe, Pin, PinOff, RefreshCw }
 import { useTranslation } from 'react-i18next';
 import { useUIStore, useSettingsStore } from '@/stores';
 import { isTauri, invoke } from '@/lib/invoke';
+import { getShortcutBinding, formatShortcutForDisplay } from '@/lib/shortcuts';
 
 const THEME_OPTIONS = [
   { key: 'system', icon: <Monitor size={14} />, labelKey: 'settings.themeSystem' },
@@ -33,6 +34,7 @@ export function TitleBar() {
   const themeMode = useSettingsStore((s) => s.settings.theme_mode);
   const alwaysOnTop = useSettingsStore((s) => s.settings.always_on_top);
   const saveSettings = useSettingsStore((s) => s.saveSettings);
+  const settings = useSettingsStore((s) => s.settings);
 
   const isInSettings = activePage === 'settings';
   const [pinned, setPinned] = useState(alwaysOnTop ?? false);
@@ -224,6 +226,7 @@ export function TitleBar() {
         </Tooltip>
 
         {/* Settings Toggle */}
+        <Tooltip title={`${isInSettings ? t('settings.closeSettings', '关闭设置') : t('settings.openSettings', '设置')} (${formatShortcutForDisplay(getShortcutBinding(settings, 'openSettings'))})`}>
         <button
           onClick={handleSettingsToggle}
           style={{
@@ -247,6 +250,7 @@ export function TitleBar() {
         >
           {isInSettings ? <XCircle size={14} /> : <Settings size={14} />}
         </button>
+        </Tooltip>
       </div>
     </div>
   );
