cc工作前备份

desktop/src/components/CloneManager.tsx

@@ -0,0 +1,139 @@
+import { useState, useEffect } from 'react';
+import { useGatewayStore } from '../store/gatewayStore';
+import { useChatStore } from '../store/chatStore';
+import { Plus, Trash2, Bot, X } from 'lucide-react';
+
+interface CloneFormData {
+  name: string;
+  role: string;
+  scenarios: string;
+}
+
+export function CloneManager() {
+  const { clones, loadClones, createClone, deleteClone, connectionState } = useGatewayStore();
+  const { agents } = useChatStore();
+  const [showForm, setShowForm] = useState(false);
+  const [form, setForm] = useState<CloneFormData>({ name: '', role: '', scenarios: '' });
+
+  const connected = connectionState === 'connected';
+
+  useEffect(() => {
+    if (connected) {
+      loadClones();
+    }
+  }, [connected]);
+
+  const handleCreate = async () => {
+    if (!form.name.trim()) return;
+    await createClone({
+      name: form.name,
+      role: form.role || undefined,
+      scenarios: form.scenarios ? form.scenarios.split(',').map(s => s.trim()) : undefined,
+    });
+    setForm({ name: '', role: '', scenarios: '' });
+    setShowForm(false);
+  };
+
+  const handleDelete = async (id: string) => {
+    if (confirm('确定删除该分身？')) {
+      await deleteClone(id);
+    }
+  };
+
+  // Merge gateway clones with local agents for display
+  const displayClones = clones.length > 0 ? clones : agents.map(a => ({
+    id: a.id,
+    name: a.name,
+    role: '默认助手',
+    createdAt: '',
+  }));
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200">
+        <span className="text-xs font-medium text-gray-500">分身列表</span>
+        <button
+          onClick={() => setShowForm(true)}
+          className="p-1 text-gray-400 hover:text-orange-500 rounded"
+          title="创建分身"
+        >
+          <Plus className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* Create form */}
+      {showForm && (
+        <div className="p-3 border-b border-gray-200 bg-orange-50 space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-medium text-orange-700">新建分身</span>
+            <button onClick={() => setShowForm(false)} className="text-gray-400 hover:text-gray-600">
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+          <input
+            type="text"
+            value={form.name}
+            onChange={e => setForm({ ...form, name: e.target.value })}
+            placeholder="名称 (必填)"
+            className="w-full text-xs border border-gray-300 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-orange-500"
+          />
+          <input
+            type="text"
+            value={form.role}
+            onChange={e => setForm({ ...form, role: e.target.value })}
+            placeholder="角色 (如: 代码助手)"
+            className="w-full text-xs border border-gray-300 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-orange-500"
+          />
+          <input
+            type="text"
+            value={form.scenarios}
+            onChange={e => setForm({ ...form, scenarios: e.target.value })}
+            placeholder="场景标签 (逗号分隔)"
+            className="w-full text-xs border border-gray-300 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-orange-500"
+          />
+          <button
+            onClick={handleCreate}
+            disabled={!form.name.trim()}
+            className="w-full text-xs bg-orange-500 text-white rounded py-1.5 hover:bg-orange-600 disabled:opacity-50"
+          >
+            创建
+          </button>
+        </div>
+      )}
+
+      {/* Clone list */}
+      <div className="flex-1 overflow-y-auto custom-scrollbar">
+        {displayClones.map((clone) => (
+          <div
+            key={clone.id}
+            className="group flex items-center gap-3 px-3 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-50"
+          >
+            <div className="w-9 h-9 bg-gradient-to-br from-orange-400 to-red-500 rounded-xl flex items-center justify-center text-white flex-shrink-0">
+              <Bot className="w-4 h-4" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-sm font-medium text-gray-900 truncate">{clone.name}</div>
+              <div className="text-xs text-gray-400 truncate">{clone.role || '默认助手'}</div>
+            </div>
+            <button
+              onClick={(e) => { e.stopPropagation(); handleDelete(clone.id); }}
+              className="opacity-0 group-hover:opacity-100 p-1 text-gray-300 hover:text-red-500 transition-opacity"
+              title="删除"
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        ))}
+
+        {displayClones.length === 0 && (
+          <div className="text-center py-8 text-xs text-gray-400">
+            <Bot className="w-8 h-8 mx-auto mb-2 opacity-30" />
+            <p>暂无分身</p>
+            <p className="mt-1">点击 + 创建你的第一个分身</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}