39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
|
import { Plus } from 'lucide-react';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { Input } from '@/components/ui/input';
|
||
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
||
|
|
import { useAppStore } from '@/store';
|
||
|
|
|
||
|
|
export function MiddlePanel() {
|
||
|
|
const { conversations, activeConversationId, setActiveConversationId } = useAppStore();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<aside className="w-60 flex flex-col border-r border-zinc-800">
|
||
|
|
<div className="p-3 flex items-center justify-between">
|
||
|
|
<Input
|
||
|
|
placeholder="搜索对话..."
|
||
|
|
className="h-8 text-xs bg-zinc-900 border-zinc-800"
|
||
|
|
/>
|
||
|
|
<Button size="icon" variant="ghost" className="h-8 w-8 ml-1">
|
||
|
|
<Plus size={16} />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<ScrollArea className="flex-1 px-2">
|
||
|
|
{conversations.map((conv) => (
|
||
|
|
<button
|
||
|
|
key={conv.id}
|
||
|
|
onClick={() => setActiveConversationId(conv.id)}
|
||
|
|
className={`w-full text-left px-3 py-2 rounded-md text-sm truncate mb-0.5 transition-colors
|
||
|
|
${conv.id === activeConversationId ? 'bg-zinc-800 text-white' : 'text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-200'}`}
|
||
|
|
>
|
||
|
|
{conv.title}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
{conversations.length === 0 && (
|
||
|
|
<p className="text-xs text-zinc-600 text-center mt-8">暂无对话</p>
|
||
|
|
)}
|
||
|
|
</ScrollArea>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|