feat(侧边栏): 集成消息搜索入口
- 添加搜索入口按钮显示快捷键提示 - 支持全局快捷键 ⌘K / Ctrl+K 打开搜索 - 集成 SearchModal 搜索弹框组件
This commit is contained in:
parent
236b368537
commit
57e8631e10
@ -2,14 +2,15 @@
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { Plus, PanelLeft, Trash2, MoreHorizontal, Loader2, Pencil, Check, X, Bot, Bookmark } from 'lucide-react';
|
||||
import { Plus, PanelLeft, Trash2, MoreHorizontal, Loader2, Pencil, Check, X, Bot, Bookmark, Search } from 'lucide-react';
|
||||
import { UserMenu } from '@/components/ui/UserMenu';
|
||||
import { NewChatModal } from '@/components/features/NewChatModal';
|
||||
import { SearchModal } from '@/components/features/SearchModal';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useConversations } from '@/hooks/useConversations';
|
||||
import { useAuth } from '@/providers/AuthProvider';
|
||||
import type { Conversation } from '@/drizzle/schema';
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { useState, useRef, useEffect, useCallback } from 'react';
|
||||
|
||||
interface SidebarProps {
|
||||
isOpen?: boolean;
|
||||
@ -26,6 +27,7 @@ export function Sidebar({ isOpen = true }: SidebarProps) {
|
||||
const [editingTitle, setEditingTitle] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [showNewChatModal, setShowNewChatModal] = useState(false);
|
||||
const [showSearchModal, setShowSearchModal] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@ -52,6 +54,22 @@ export function Sidebar({ isOpen = true }: SidebarProps) {
|
||||
};
|
||||
}, [menuOpen]);
|
||||
|
||||
// 全局键盘快捷键:⌘K / Ctrl+K 打开搜索
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// ⌘K (Mac) 或 Ctrl+K (Windows/Linux)
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
setShowSearchModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 创建新对话 - 显示选择助手弹框
|
||||
const handleNewChat = () => {
|
||||
setShowNewChatModal(true);
|
||||
@ -142,6 +160,21 @@ export function Sidebar({ isOpen = true }: SidebarProps) {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 搜索入口按钮 */}
|
||||
<div className="px-3 pb-3">
|
||||
<button
|
||||
onClick={() => setShowSearchModal(true)}
|
||||
className="w-full flex items-center gap-2.5 px-3 py-2.5 bg-[var(--color-bg-tertiary)] border border-[var(--color-border-light)] rounded text-[var(--color-text-tertiary)] text-sm hover:bg-[var(--color-bg-hover)] hover:border-[var(--color-border)] hover:text-[var(--color-text-secondary)] transition-all"
|
||||
>
|
||||
<Search size={16} className="flex-shrink-0" />
|
||||
<span className="flex-1 text-left">搜索消息...</span>
|
||||
<span className="flex items-center gap-0.5 text-[11px]">
|
||||
<kbd className="inline-flex items-center justify-center px-1.5 py-0.5 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded text-[10px] shadow-sm">⌘</kbd>
|
||||
<kbd className="inline-flex items-center justify-center px-1.5 py-0.5 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded text-[10px] shadow-sm">K</kbd>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 助手库入口 */}
|
||||
<div className="px-4 pb-2">
|
||||
<Link
|
||||
@ -319,6 +352,12 @@ export function Sidebar({ isOpen = true }: SidebarProps) {
|
||||
isOpen={showNewChatModal}
|
||||
onClose={() => setShowNewChatModal(false)}
|
||||
/>
|
||||
|
||||
{/* 搜索弹框 */}
|
||||
<SearchModal
|
||||
isOpen={showSearchModal}
|
||||
onClose={() => setShowSearchModal(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user