video-create/web/client/src/components/layout/MiddlePanel.tsx

import { Plus } from 'lucide-react';
import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { ScrollArea } from '@/components/ui/scroll-area';
import { useAppStore } from '@/store';
import { api } from '@/lib/api';

export function MiddlePanel() {
  const { conversations, activeConversationId, setActiveConversationId, setConversations } = useAppStore();
  const [search, setSearch] = useState('');

  useEffect(() => {
    api.listConversations().then(setConversations).catch(() => {});
  }, []);

  const handleSearch = (value: string) => {
    setSearch(value);
    const qs = value ? `?search=${encodeURIComponent(value)}` : '';
    fetch(`/api/pipeline/conversations${qs}`)
      .then((r) => r.json())
      .then(setConversations)
      .catch(() => {});
  };

  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"
          value={search}
          onChange={(e) => handleSearch(e.target.value)}
        />
        <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>
  );
}