feat(组件): 添加快捷键帮助面板 UI
- 实现快捷键帮助弹窗界面 - 按分类（导航、编辑、通用）分组显示 - 支持 Mac/Windows 快捷键格式切换 - 预置常用快捷键说明 - 按 Esc 关闭面板
This commit is contained in:
gaoziman
parent
827a033d41
commit
f859ffe4cd
207
src/components/ui/HotkeysHelper.tsx
Normal file
207
src/components/ui/HotkeysHelper.tsx
Normal file
@ -0,0 +1,207 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import { X, Keyboard } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { RegisteredHotkey, HotkeyCategory } from '@/types/hotkeys';
|
||||
import { formatHotkey } from '@/types/hotkeys';
|
||||
|
||||
interface HotkeysHelperProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
registeredHotkeys?: RegisteredHotkey[];
|
||||
}
|
||||
|
||||
// 预定义的快捷键列表（包括系统内置的）
|
||||
const BUILTIN_HOTKEYS: RegisteredHotkey[] = [
|
||||
{
|
||||
id: 'new-chat',
|
||||
config: {
|
||||
key: 'n',
|
||||
description: '新建对话',
|
||||
category: '导航',
|
||||
action: () => {},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'open-search',
|
||||
config: {
|
||||
key: 'k',
|
||||
modifiers: ['meta'],
|
||||
description: '打开搜索',
|
||||
category: '导航',
|
||||
action: () => {},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'help',
|
||||
config: {
|
||||
key: '?',
|
||||
description: '显示快捷键帮助',
|
||||
category: '通用',
|
||||
action: () => {},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'close-modal',
|
||||
config: {
|
||||
key: 'Escape',
|
||||
description: '关闭弹窗',
|
||||
category: '通用',
|
||||
action: () => {},
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 快捷键帮助面板
|
||||
*/
|
||||
export function HotkeysHelper({ isOpen, onClose, registeredHotkeys = [] }: HotkeysHelperProps) {
|
||||
// 检测是否为 Mac 系统
|
||||
const [isMac, setIsMac] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMac(navigator.platform.toLowerCase().includes('mac'));
|
||||
}, []);
|
||||
|
||||
// 合并内置和动态快捷键，按分类分组
|
||||
const groupedHotkeys = useMemo(() => {
|
||||
const allHotkeys = [...BUILTIN_HOTKEYS, ...registeredHotkeys];
|
||||
|
||||
// 去重（以 id 为准，优先保留 BUILTIN）
|
||||
const uniqueHotkeys = allHotkeys.reduce((acc, hotkey) => {
|
||||
if (!acc.find((h) => h.id === hotkey.id)) {
|
||||
acc.push(hotkey);
|
||||
}
|
||||
return acc;
|
||||
}, [] as RegisteredHotkey[]);
|
||||
|
||||
// 按分类分组
|
||||
const groups: Record<HotkeyCategory, RegisteredHotkey[]> = {
|
||||
导航: [],
|
||||
编辑: [],
|
||||
通用: [],
|
||||
};
|
||||
|
||||
uniqueHotkeys.forEach((hotkey) => {
|
||||
const category = hotkey.config.category || '通用';
|
||||
if (groups[category]) {
|
||||
groups[category].push(hotkey);
|
||||
} else {
|
||||
groups['通用'].push(hotkey);
|
||||
}
|
||||
});
|
||||
|
||||
// 过滤空分类
|
||||
return Object.entries(groups).filter(([, items]) => items.length > 0);
|
||||
}, [registeredHotkeys]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 遮罩层 */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[200] animate-fade-in-fast"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* 帮助面板 */}
|
||||
<div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[201] w-full max-w-[480px] px-4">
|
||||
<div className="bg-[var(--color-bg-primary)] rounded shadow-2xl overflow-hidden animate-scale-in-fast">
|
||||
{/* 头部 */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-[var(--color-border-light)]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 flex items-center justify-center bg-[var(--color-primary-alpha)] rounded-lg">
|
||||
<Keyboard size={20} className="text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-[var(--color-text-primary)]">
|
||||
键盘快捷键
|
||||
</h2>
|
||||
<p className="text-xs text-[var(--color-text-tertiary)]">
|
||||
使用快捷键提高效率
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)] transition-colors"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 快捷键列表 */}
|
||||
<div className="px-6 py-4 max-h-[60vh] overflow-y-auto">
|
||||
{groupedHotkeys.map(([category, hotkeys], groupIndex) => (
|
||||
<div
|
||||
key={category}
|
||||
className={cn(groupIndex > 0 && 'mt-6')}
|
||||
>
|
||||
{/* 分类标题 */}
|
||||
<h3 className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wider mb-3">
|
||||
{category}
|
||||
</h3>
|
||||
|
||||
{/* 快捷键项 */}
|
||||
<div className="space-y-2">
|
||||
{hotkeys.map((hotkey) => (
|
||||
<div
|
||||
key={hotkey.id}
|
||||
className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-[var(--color-bg-secondary)] transition-colors"
|
||||
>
|
||||
<span className="text-sm text-[var(--color-text-primary)]">
|
||||
{hotkey.config.description}
|
||||
</span>
|
||||
<HotkeyBadge config={hotkey.config} isMac={isMac} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 底部提示 */}
|
||||
<div className="px-6 py-3 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border-light)]">
|
||||
<div className="flex items-center justify-between text-xs text-[var(--color-text-tertiary)]">
|
||||
<span>按 <kbd className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded text-[10px] mx-1">Esc</kbd> 关闭</span>
|
||||
<span>{isMac ? 'macOS' : 'Windows/Linux'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 快捷键徽章组件
|
||||
*/
|
||||
function HotkeyBadge({
|
||||
config,
|
||||
isMac,
|
||||
}: {
|
||||
config: RegisteredHotkey['config'];
|
||||
isMac: boolean;
|
||||
}) {
|
||||
const keys = formatHotkey(config, isMac).split(isMac ? ' ' : '+');
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
{keys.map((key, index) => (
|
||||
<kbd
|
||||
key={index}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center min-w-[24px] h-6 px-2',
|
||||
'bg-[var(--color-bg-tertiary)] border border-[var(--color-border)]',
|
||||
'rounded text-xs font-medium text-[var(--color-text-secondary)]',
|
||||
'shadow-sm'
|
||||
)}
|
||||
>
|
||||
{key}
|
||||
</kbd>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user