cc工作前备份

desktop/src/components/Sidebar.tsx

@@ -1,56 +1,55 @@
-import { useChatStore } from '../store/chatStore';
-import { Settings, Cat, Search, Globe, BarChart } from 'lucide-react';
+import { useState } from 'react';
+import { useGatewayStore } from '../store/gatewayStore';
+import { Settings, MessageSquare, Clock, Bot, Radio } from 'lucide-react';
+import { CloneManager } from './CloneManager';
+import { ConversationList } from './ConversationList';
+import { ChannelList } from './ChannelList';
+import { TaskList } from './TaskList';
 
-export function Sidebar() {
-  const { agents, currentAgent, setCurrentAgent } = useChatStore();
-  const [activeTab, setActiveTab] = React.useState('agents');
+interface SidebarProps {
+  onOpenSettings?: () => void;
+}
+
+type Tab = 'chats' | 'clones' | 'channels' | 'tasks';
+
+const TABS: { key: Tab; label: string; icon: typeof MessageSquare }[] = [
+  { key: 'chats', label: '对话', icon: MessageSquare },
+  { key: 'clones', label: '分身', icon: Bot },
+  { key: 'channels', label: '频道', icon: Radio },
+  { key: 'tasks', label: '任务', icon: Clock },
+];
+
+export function Sidebar({ onOpenSettings }: SidebarProps) {
+  const { connectionState } = useGatewayStore();
+  const [activeTab, setActiveTab] = useState<Tab>('chats');
+
+  const connected = connectionState === 'connected';
 
   return (
     <aside className="w-64 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0">
       {/* 顶部标签 */}
       <div className="flex border-b border-gray-200 bg-white">
-        <button
-          className={lex-1 py-3 px-4 text-xs font-medium }
-          onClick={() => setActiveTab('agents')}
-        >
-          分身
-        </button>
-        <button
-          className={lex-1 py-3 px-4 text-xs font-medium }
-          onClick={() => setActiveTab('channels')}
-        >
-          IM 频道
-        </button>
-        <button
-          className={lex-1 py-3 px-4 text-xs font-medium }
-          onClick={() => setActiveTab('tasks')}
-        >
-          定时任务
-        </button>
+        {TABS.map(({ key, label }) => (
+          <button
+            key={key}
+            className={`flex-1 py-3 px-2 text-xs font-medium transition-colors ${
+              activeTab === key
+                ? 'text-orange-600 border-b-2 border-orange-500'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+            onClick={() => setActiveTab(key)}
+          >
+            {label}
+          </button>
+        ))}
       </div>
 
-      {/* Agent 列表 */}
-      <div className="flex-1 overflow-y-auto custom-scrollbar py-2">
-        {agents.map((agent) => (
-          <div
-            key={agent.id}
-            className={sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1 }
-            onClick={() => setCurrentAgent(agent)}
-          >
-            <div className="flex items-start gap-3">
-              <div className={w-10 h-10  rounded-xl flex items-center justify-center text-white flex-shrink-0}>
-                <span className="text-xl">{agent.icon}</span>
-              </div>
-              <div className="flex-1 min-w-0">
-                <div className="flex justify-between items-center mb-0.5">
-                  <span className="font-semibold text-gray-900 truncate">{agent.name}</span>
-                  <span className="text-xs text-gray-400">{agent.time}</span>
-                </div>
-                <p className="text-xs text-gray-500 truncate leading-relaxed">{agent.lastMessage}</p>
-              </div>
-            </div>
-          </div>
-        ))}
+      {/* Tab content */}
+      <div className="flex-1 overflow-hidden">
+        {activeTab === 'chats' && <ConversationList />}
+        {activeTab === 'clones' && <CloneManager />}
+        {activeTab === 'channels' && <ChannelList onOpenSettings={onOpenSettings} />}
+        {activeTab === 'tasks' && <TaskList />}
       </div>
 
       {/* 底部用户 */}
@@ -59,8 +58,13 @@ export function Sidebar() {
           <div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
             🦞
           </div>
-          <span className="font-medium text-gray-700">用户7141</span>
-          <button className="ml-auto text-gray-400 hover:text-gray-600">
+          <div className="flex-1 min-w-0">
+            <span className="font-medium text-gray-700 text-sm">用户7141</span>
+            <div className={`text-xs ${connected ? 'text-green-500' : 'text-gray-400'}`}>
+              {connected ? '已连接' : '未连接'}
+            </div>
+          </div>
+          <button className="text-gray-400 hover:text-gray-600" onClick={onOpenSettings}>
             <Settings className="w-4 h-4" />
           </button>
         </div>