leo-projects/claude-code-cchui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(集成): 集成快捷键系统到应用

Browse Source 
- 在根布局添加 HotkeysProvider
- 重构 Sidebar 使用 useHotkeys 注册快捷键
- 移除原有的手动键盘事件监听
- 添加 N 键新建对话快捷键
- 添加 Cmd/Ctrl+K 和 Cmd/Ctrl+/ 搜索快捷键
This commit is contained in:
gaoziman 2025-12-27 23:56:26 +08:00
parent f859ffe4cd
commit c48d05885a
2 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/layout.tsx
View File

@ -3,6 +3,7 @@ import "./globals.css";
import { SettingsProvider } from "@/components/providers/SettingsProvider"; import { SettingsProvider } from "@/components/providers/SettingsProvider";
import { AuthProvider } from "@/providers/AuthProvider"; import { AuthProvider } from "@/providers/AuthProvider";
import { PromptOptimizerProvider } from "@/providers/PromptOptimizerProvider"; import { PromptOptimizerProvider } from "@/providers/PromptOptimizerProvider";
import { HotkeysProvider } from "@/providers/HotkeysProvider";
import { Toaster } from "@/components/ui/Toast"; import { Toaster } from "@/components/ui/Toast";
export const metadata: Metadata = { export const metadata: Metadata = {
@ -23,10 +24,12 @@ export default function RootLayout({
<body className="antialiased"> <body className="antialiased">
<AuthProvider> <AuthProvider>
<SettingsProvider> <SettingsProvider>
<HotkeysProvider>
<PromptOptimizerProvider> <PromptOptimizerProvider>
{children} {children}
<Toaster /> <Toaster />
</PromptOptimizerProvider> </PromptOptimizerProvider>
</HotkeysProvider>
</SettingsProvider> </SettingsProvider>
</AuthProvider> </AuthProvider>
</body> </body>

53
src/components/layout/Sidebar.tsx
View File

@ -11,6 +11,7 @@ import { useConversations } from '@/hooks/useConversations';
import { useAuth } from '@/providers/AuthProvider'; import { useAuth } from '@/providers/AuthProvider';
import type { Conversation } from '@/drizzle/schema'; import type { Conversation } from '@/drizzle/schema';
import { useState, useRef, useEffect, useCallback } from 'react'; import { useState, useRef, useEffect, useCallback } from 'react';
import { useHotkeys } from '@/hooks/useHotkeys';
interface SidebarProps { interface SidebarProps {
isOpen?: boolean; isOpen?: boolean;
@ -54,21 +55,45 @@ export function Sidebar({ isOpen = true }: SidebarProps) {
}; };
}, [menuOpen]); }, [menuOpen]);
// 全局键盘快捷键：⌘K / Ctrl+K 打开搜索 // 快捷键：N - 新建对话（单键，非输入框时生效）
useEffect(() => { useHotkeys(
const handleKeyDown = (e: KeyboardEvent) => { 'new-chat',
// ⌘K (Mac) 或 Ctrl+K (Windows/Linux) {
if ((e.metaKey || e.ctrlKey) && e.key === 'k') { key: 'n',
e.preventDefault(); description: '新建对话',
setShowSearchModal(true); category: '导航',
} action: useCallback(() => setShowNewChatModal(true), []),
}; },
[setShowNewChatModal]
);
document.addEventListener('keydown', handleKeyDown); // 快捷键：Cmd/Ctrl + K - 打开搜索
return () => { useHotkeys(
document.removeEventListener('keydown', handleKeyDown); 'open-search-k',
}; {
}, []); key: 'k',
modifiers: ['ctrl', 'meta'],
description: '打开搜索',
category: '导航',
action: useCallback(() => setShowSearchModal(true), []),
allowInInput: true,
},
[setShowSearchModal]
);
// 快捷键：Cmd/Ctrl + / - 打开搜索（备用）
useHotkeys(
'open-search-slash',
{
key: '/',
modifiers: ['ctrl', 'meta'],
description: '打开搜索',
category: '导航',
action: useCallback(() => setShowSearchModal(true), []),
allowInInput: true,
},
[setShowSearchModal]
);
// 创建新对话 - 显示选择助手弹框 // 创建新对话 - 显示选择助手弹框
const handleNewChat = () => { const handleNewChat = () => {