feat(web): add three-column layout shell with placeholder views

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/client/src/components/layout/MiddlePanel.tsx

@@ -0,0 +1,38 @@
+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>
+  );
+}