Frontend start to use backend CRUD api

web/pages/Assistants.tsx

@@ -2,9 +2,10 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Plus, Search, Play, Copy, Trash2, Edit2, Mic, MessageSquare, Save, Video, PhoneOff, Camera, ArrowLeftRight, Send, Phone, MoreHorizontal, Rocket, AlertTriangle, PhoneCall, CameraOff, Image, Images, CloudSun, Calendar, TrendingUp, Coins, Wrench, Globe, Terminal, X, ClipboardCheck, Sparkles, Volume2, Timer, ChevronDown, Link as LinkIcon, Database, Server, Zap, ExternalLink, Key, BrainCircuit, Ear, Book, Filter } from 'lucide-react';
 import { Button, Input, Card, Badge, Drawer, Dialog } from '../components/UI';
-import { mockAssistants, mockKnowledgeBases, mockVoices, mockLLMModels, mockASRModels } from '../services/mockData';
-import { Assistant, TabValue } from '../types';
+import { mockLLMModels, mockASRModels } from '../services/mockData';
+import { Assistant, KnowledgeBase, TabValue, Voice } from '../types';
 import { GoogleGenAI } from "@google/genai";
+import { createAssistant, deleteAssistant, fetchAssistants, fetchKnowledgeBases, fetchVoices, updateAssistant as updateAssistantApi } from '../services/backendApi';
 
 interface ToolItem {
   id: string;
@@ -16,7 +17,9 @@ interface ToolItem {
 }
 
 export const AssistantsPage: React.FC = () => {
-  const [assistants, setAssistants] = useState<Assistant[]>(mockAssistants);
+  const [assistants, setAssistants] = useState<Assistant[]>([]);
+  const [voices, setVoices] = useState<Voice[]>([]);
+  const [knowledgeBases, setKnowledgeBases] = useState<KnowledgeBase[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<TabValue>(TabValue.GLOBAL);
@@ -40,6 +43,7 @@ export const AssistantsPage: React.FC = () => {
   const [deleteId, setDeleteId] = useState<string | null>(null);
   const [copySuccess, setCopySuccess] = useState(false);
   const [saveLoading, setSaveLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   const selectedAssistant = assistants.find(a => a.id === selectedId) || null;
 
@@ -47,39 +51,69 @@ export const AssistantsPage: React.FC = () => {
     a.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-  const handleCreate = () => {
-    const newId = Math.floor(Math.random() * 1000000).toString().padStart(6, '0');
-    const newAssistant: Assistant = {
-      id: newId,
+  useEffect(() => {
+    const loadInitialData = async () => {
+      setIsLoading(true);
+      try {
+        const [assistantList, voiceList, kbList] = await Promise.all([
+          fetchAssistants(),
+          fetchVoices(),
+          fetchKnowledgeBases(),
+        ]);
+        setAssistants(assistantList);
+        setVoices(voiceList);
+        setKnowledgeBases(kbList);
+        if (assistantList.length > 0) {
+          setSelectedId(assistantList[0].id);
+        }
+      } catch (error) {
+        console.error(error);
+        alert('加载助手数据失败，请检查后端服务是否启动。');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadInitialData();
+  }, []);
+
+  const handleCreate = async () => {
+    const newAssistantPayload: Partial<Assistant> = {
       name: 'New Assistant',
-      callCount: 0,
       opener: '',
       prompt: '',
       knowledgeBaseId: '',
       language: 'zh',
-      voice: mockVoices[0]?.id || '',
+      voice: voices[0]?.id || '',
       speed: 1,
       hotwords: [],
       tools: [],
       interruptionSensitivity: 500,
       configMode: 'platform',
-      llmModelId: '',
-      asrModelId: '',
-      embeddingModelId: '',
-      rerankModelId: '',
     };
-    setAssistants([...assistants, newAssistant]);
-    setSelectedId(newId);
-    setActiveTab(TabValue.GLOBAL);
+    try {
+      const created = await createAssistant(newAssistantPayload);
+      setAssistants((prev) => [created, ...prev]);
+      setSelectedId(created.id);
+      setActiveTab(TabValue.GLOBAL);
+    } catch (error) {
+      console.error(error);
+      alert('创建助手失败。');
+    }
   };
 
-  const handleSave = () => {
+  const handleSave = async () => {
+    if (!selectedAssistant) return;
     setSaveLoading(true);
-    // Simulate API call
-    setTimeout(() => {
+    try {
+      const updated = await updateAssistantApi(selectedAssistant.id, selectedAssistant);
+      setAssistants((prev) => prev.map((item) => (item.id === updated.id ? { ...item, ...updated } : item)));
+    } catch (error) {
+      console.error(error);
+      alert('保存失败，请稍后重试。');
+    } finally {
       setSaveLoading(false);
-      // In a real app, logic to persist selectedAssistant would go here
-    }, 800);
+    }
   };
 
   const handleCopyId = (id: string, text?: string) => {
@@ -88,11 +122,18 @@ export const AssistantsPage: React.FC = () => {
     setTimeout(() => setCopySuccess(false), 2000);
   };
 
-  const handleCopy = (e: React.MouseEvent, assistant: Assistant) => {
+  const handleCopy = async (e: React.MouseEvent, assistant: Assistant) => {
     e.stopPropagation();
-    const newId = Math.floor(Math.random() * 1000000).toString().padStart(6, '0');
-    const newAssistant = { ...assistant, id: newId, name: `${assistant.name} (Copy)` };
-    setAssistants([...assistants, newAssistant]);
+    try {
+      const copied = await createAssistant({
+        ...assistant,
+        name: `${assistant.name} (Copy)`,
+      });
+      setAssistants((prev) => [copied, ...prev]);
+    } catch (error) {
+      console.error(error);
+      alert('复制助手失败。');
+    }
   };
 
   const handleDeleteClick = (e: React.MouseEvent, id: string) => {
@@ -100,11 +141,17 @@ export const AssistantsPage: React.FC = () => {
     setDeleteId(id);
   };
 
-  const confirmDelete = () => {
+  const confirmDelete = async () => {
     if (deleteId) {
-        setAssistants(prev => prev.filter(a => a.id !== deleteId));
-        if (selectedId === deleteId) setSelectedId(null);
-        setDeleteId(null);
+        try {
+          await deleteAssistant(deleteId);
+          setAssistants(prev => prev.filter(a => a.id !== deleteId));
+          if (selectedId === deleteId) setSelectedId(null);
+          setDeleteId(null);
+        } catch (error) {
+          console.error(error);
+          alert('删除失败，请稍后重试。');
+        }
     }
   };
 
@@ -223,7 +270,7 @@ export const AssistantsPage: React.FC = () => {
         </div>
 
         <div className="flex-1 overflow-y-auto space-y-2 pr-1 custom-scrollbar">
-            {filteredAssistants.map(assistant => (
+            {!isLoading && filteredAssistants.map(assistant => (
                 <div 
                     key={assistant.id}
                     onClick={() => setSelectedId(assistant.id)}
@@ -268,11 +315,16 @@ export const AssistantsPage: React.FC = () => {
                     </div>
                 </div>
             ))}
-            {filteredAssistants.length === 0 && (
+            {!isLoading && filteredAssistants.length === 0 && (
                 <div className="text-center py-10 text-muted-foreground text-sm">
                     未找到小助手
                 </div>
             )}
+            {isLoading && (
+                <div className="text-center py-10 text-muted-foreground text-sm">
+                    加载中...
+                </div>
+            )}
         </div>
       </div>
 
@@ -545,7 +597,7 @@ export const AssistantsPage: React.FC = () => {
                                             onChange={(e) => updateAssistant('knowledgeBaseId', e.target.value)}
                                         >
                                             <option value="">如果不选择，则使用通用大模型知识</option>
-                                            {mockKnowledgeBases.map(kb => (
+                                            {knowledgeBases.map(kb => (
                                                 <option key={kb.id} value={kb.id}>{kb.name}</option>
                                             ))}
                                         </select>
@@ -593,7 +645,7 @@ export const AssistantsPage: React.FC = () => {
                                             onChange={(e) => updateAssistant('voice', e.target.value)}
                                         >
                                             <option value="" disabled>请选择声音库中的声音...</option>
-                                            {mockVoices.map(voice => (
+                                            {voices.map(voice => (
                                                 <option key={voice.id} value={voice.id}>
                                                     {voice.name} ({voice.vendor} - {voice.gender === 'Male' ? '男' : '女'})
                                                 </option>

web/pages/AutoTest.tsx

@@ -1,18 +1,32 @@
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Plus, Search, Play, Copy, Trash2, Zap, MessageSquare, Mic, AlertTriangle, ClipboardCheck, X } from 'lucide-react';
 import { Button, Input, Card, Badge, Dialog } from '../components/UI';
-import { mockAutoTestAssistants, mockAssistants } from '../services/mockData';
-import { AutoTestAssistant, TestType, TestMethod } from '../types';
+import { mockAutoTestAssistants } from '../services/mockData';
+import { Assistant, AutoTestAssistant, TestType, TestMethod } from '../types';
+import { fetchAssistants } from '../services/backendApi';
 
 export const AutoTestPage: React.FC = () => {
   const [testAssistants, setTestAssistants] = useState<AutoTestAssistant[]>(mockAutoTestAssistants);
+  const [assistants, setAssistants] = useState<Assistant[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [deleteId, setDeleteId] = useState<string | null>(null);
   const [copySuccess, setCopySuccess] = useState(false);
 
+  useEffect(() => {
+    const loadAssistants = async () => {
+      try {
+        const list = await fetchAssistants();
+        setAssistants(list);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    loadAssistants();
+  }, []);
+
   const filteredTests = testAssistants.filter(t => 
     t.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
@@ -26,7 +40,7 @@ export const AutoTestPage: React.FC = () => {
       name: '新测试任务',
       type: TestType.FIXED,
       method: TestMethod.TEXT,
-      targetAssistantId: mockAssistants[0]?.id || '',
+      targetAssistantId: assistants[0]?.id || '',
       fixedWorkflowSteps: [],
       intelligentPrompt: '',
       createdAt: new Date().toISOString().split('T')[0],
@@ -176,7 +190,7 @@ export const AutoTestPage: React.FC = () => {
                       value={selectedTest.targetAssistantId}
                       onChange={(e) => updateTest('targetAssistantId', e.target.value)}
                     >
-                      {mockAssistants.map(a => (
+                      {assistants.map(a => (
                         <option key={a.id} value={a.id}>{a.name}</option>
                       ))}
                     </select>

web/pages/Dashboard.tsx

@@ -1,14 +1,17 @@
 
-import React, { useState, useMemo, useRef } from 'react';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Phone, CheckCircle, Clock, UserCheck, Activity, Filter, ChevronDown, BarChart3, HelpCircle, Mail, Sparkles, ArrowDown, Bot, Zap, Rocket, LineChart, Layers, Fingerprint, Network, MonitorPlay, Plus } from 'lucide-react';
 import { Card, Button } from '../components/UI';
-import { mockAssistants, getDashboardStats } from '../services/mockData';
+import { getDashboardStats } from '../services/mockData';
+import { Assistant } from '../types';
+import { fetchAssistants } from '../services/backendApi';
 
 export const DashboardPage: React.FC = () => {
   const navigate = useNavigate();
   const [timeRange, setTimeRange] = useState<'week' | 'month' | 'year'>('week');
   const [selectedAssistantId, setSelectedAssistantId] = useState<string>('all');
+  const [assistants, setAssistants] = useState<Assistant[]>([]);
   
   const workflowRef = useRef<HTMLDivElement>(null);
   const aboutRef = useRef<HTMLDivElement>(null);
@@ -17,6 +20,18 @@ export const DashboardPage: React.FC = () => {
     return getDashboardStats(timeRange, selectedAssistantId);
   }, [timeRange, selectedAssistantId]);
 
+  useEffect(() => {
+    const loadAssistants = async () => {
+      try {
+        const list = await fetchAssistants();
+        setAssistants(list);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    loadAssistants();
+  }, []);
+
   const scrollToNext = (ref: React.RefObject<HTMLDivElement>) => {
     ref.current?.scrollIntoView({ behavior: 'smooth' });
   };
@@ -83,7 +98,7 @@ export const DashboardPage: React.FC = () => {
                             onChange={(e) => setSelectedAssistantId(e.target.value)}
                         >
                             <option value="all" className="bg-background">全平台概览</option>
-                            {mockAssistants.map(a => (
+                            {assistants.map(a => (
                                 <option key={a.id} value={a.id} className="bg-background">{a.name}</option>
                             ))}
                         </select>

web/pages/History.tsx

@@ -1,18 +1,36 @@
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Download, Search, Calendar, Filter, MessageSquare, Mic, Video, Eye, X, Play, User, Bot, Clock } from 'lucide-react';
 import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Badge, Drawer } from '../components/UI';
-import { mockCallLogs } from '../services/mockData';
 import { CallLog, InteractionType } from '../types';
+import { fetchHistory, fetchHistoryDetail } from '../services/backendApi';
 
 export const HistoryPage: React.FC = () => {
-  const [logs] = useState(mockCallLogs);
+  const [logs, setLogs] = useState<CallLog[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
   const [statusFilter, setStatusFilter] = useState<'all' | 'connected' | 'missed'>('all');
   const [sourceFilter, setSourceFilter] = useState<'all' | 'debug' | 'external'>('all');
   const [typeFilter, setTypeFilter] = useState<'all' | InteractionType>('all');
-  
+  const [isLoading, setIsLoading] = useState(true);
   const [selectedLog, setSelectedLog] = useState<CallLog | null>(null);
+  const [isDetailLoading, setIsDetailLoading] = useState(false);
+
+  useEffect(() => {
+    const loadHistory = async () => {
+      setIsLoading(true);
+      try {
+        const list = await fetchHistory();
+        setLogs(list);
+      } catch (error) {
+        console.error(error);
+        alert('加载历史记录失败，请检查后端服务。');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadHistory();
+  }, []);
 
   const filteredLogs = logs.filter(log => {
     const matchesSearch = log.agentName.toLowerCase().includes(searchTerm.toLowerCase());
@@ -34,7 +52,7 @@ export const HistoryPage: React.FC = () => {
         log.startTime, 
         log.duration
     ].join(','));
-    const csvContent = "data:text/csv;charset=utf-8," + [headers.join(','), ...headers.join(',')].join('\n');
+    const csvContent = "data:text/csv;charset=utf-8," + [headers.join(','), ...rows].join('\n');
     const encodedUri = encodeURI(csvContent);
     const link = document.createElement("a");
     link.setAttribute("href", encodedUri);
@@ -44,6 +62,20 @@ export const HistoryPage: React.FC = () => {
     document.body.removeChild(link);
   };
 
+  const openDetail = async (log: CallLog) => {
+    setSelectedLog(log);
+    setIsDetailLoading(true);
+    try {
+      const detail = await fetchHistoryDetail(log.id, log);
+      setSelectedLog(detail);
+    } catch (error) {
+      console.error(error);
+      alert('加载通话详情失败。');
+    } finally {
+      setIsDetailLoading(false);
+    }
+  };
+
   return (
     <div className="space-y-6 animate-in fade-in py-4 pb-10">
       <div className="flex items-center justify-between">
@@ -118,8 +150,8 @@ export const HistoryPage: React.FC = () => {
             </TableRow>
           </TableHeader>
           <tbody>
-            {filteredLogs.map(log => (
-              <TableRow key={log.id} className="cursor-pointer hover:bg-white/5 group" onClick={() => setSelectedLog(log)}>
+            {!isLoading && filteredLogs.map(log => (
+              <TableRow key={log.id} className="cursor-pointer hover:bg-white/5 group" onClick={() => openDetail(log)}>
                 <TableCell className="font-mono text-xs text-muted-foreground group-hover:text-primary transition-colors">#{log.id}</TableCell>
                 <TableCell className="font-medium text-white group-hover:text-primary transition-colors flex items-center gap-2">
                     {log.agentName}
@@ -144,11 +176,16 @@ export const HistoryPage: React.FC = () => {
                 <TableCell className="text-muted-foreground">{log.duration}</TableCell>
               </TableRow>
             ))}
-             {filteredLogs.length === 0 && (
+             {!isLoading && filteredLogs.length === 0 && (
                  <TableRow>
                      <TableCell colSpan={7} className="text-center py-6 text-muted-foreground">暂无记录</TableCell>
                  </TableRow>
              )}
+             {isLoading && (
+                 <TableRow>
+                     <TableCell colSpan={7} className="text-center py-6 text-muted-foreground">加载中...</TableCell>
+                 </TableRow>
+             )}
           </tbody>
         </table>
       </div>
@@ -174,7 +211,10 @@ export const HistoryPage: React.FC = () => {
                 </div>
 
                 <div className="flex-1 overflow-y-auto space-y-6 pr-2 custom-scrollbar pb-6 px-1">
-                    {(selectedLog.details && selectedLog.details.length > 0) ? (
+                    {isDetailLoading && (
+                        <div className="text-sm text-muted-foreground text-center py-8">详情加载中...</div>
+                    )}
+                    {!isDetailLoading && (selectedLog.details && selectedLog.details.length > 0) ? (
                         selectedLog.details.map((detail, index) => (
                             <div key={index} className={`flex gap-3 ${detail.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`}>
                                 <div className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0 border border-white/10 ${detail.role === 'user' ? 'bg-primary/20 text-primary' : 'bg-white/5 text-muted-foreground'}`}>
@@ -225,12 +265,12 @@ export const HistoryPage: React.FC = () => {
                                 </div>
                             </div>
                         ))
-                    ) : (
+                    ) : !isDetailLoading ? (
                         <div className="h-full flex flex-col items-center justify-center text-muted-foreground opacity-40 space-y-3">
                             <MessageSquare className="w-12 h-12 stroke-1" />
                             <p className="text-sm font-medium">暂无对话记录</p>
                         </div>
-                    )}
+                    ) : null}
                 </div>
             </div>
         </Drawer>

web/pages/KnowledgeBase.tsx

@@ -1,21 +1,43 @@
 
-import React, { useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Search, Plus, FileText, Upload, ArrowLeft, CloudUpload, File as FileIcon, X } from 'lucide-react';
 import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Card, Dialog } from '../components/UI';
-import { mockKnowledgeBases } from '../services/mockData';
 import { KnowledgeBase } from '../types';
+import { createKnowledgeBase, deleteKnowledgeDocument, fetchKnowledgeBases, uploadKnowledgeDocument } from '../services/backendApi';
 
 export const KnowledgeBasePage: React.FC = () => {
   const [view, setView] = useState<'list' | 'detail'>('list');
   const [selectedKb, setSelectedKb] = useState<KnowledgeBase | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
-  const [kbs, setKbs] = useState(mockKnowledgeBases);
+  const [kbs, setKbs] = useState<KnowledgeBase[]>([]);
   const [isUploadOpen, setIsUploadOpen] = useState(false);
   const [isCreateKbOpen, setIsCreateKbOpen] = useState(false);
   const [newKbName, setNewKbName] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
 
   const filteredKbs = kbs.filter(kb => kb.name.toLowerCase().includes(searchTerm.toLowerCase()));
 
+  const refreshKnowledgeBases = async () => {
+    setIsLoading(true);
+    try {
+      const list = await fetchKnowledgeBases();
+      setKbs(list);
+      if (selectedKb) {
+        const nextSelected = list.find((item) => item.id === selectedKb.id) || null;
+        setSelectedKb(nextSelected);
+      }
+    } catch (error) {
+      console.error(error);
+      alert('加载知识库失败，请检查后端服务。');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    refreshKnowledgeBases();
+  }, []);
+
   const handleSelect = (kb: KnowledgeBase) => {
     setSelectedKb(kb);
     setView('detail');
@@ -25,20 +47,17 @@ export const KnowledgeBasePage: React.FC = () => {
     setIsUploadOpen(true);
   };
 
-  const handleCreateKb = () => {
+  const handleCreateKb = async () => {
     if (!newKbName.trim()) return;
-    
-    const newKb: KnowledgeBase = {
-        id: `kb_${Date.now()}`,
-        name: newKbName.trim(),
-        creator: 'Admin User',
-        createdAt: new Date().toISOString().split('T')[0],
-        documents: []
-    };
-    
-    setKbs([newKb, ...kbs]);
-    setIsCreateKbOpen(false);
-    setNewKbName('');
+    try {
+      await createKnowledgeBase(newKbName.trim());
+      await refreshKnowledgeBases();
+      setIsCreateKbOpen(false);
+      setNewKbName('');
+    } catch (error) {
+      console.error(error);
+      alert('新建知识库失败。');
+    }
   };
 
   if (view === 'detail' && selectedKb) {
@@ -48,8 +67,22 @@ export const KnowledgeBasePage: React.FC = () => {
           kb={selectedKb} 
           onBack={() => setView('list')} 
           onImport={handleImportClick}
+          onDeleteDocument={async (docId) => {
+            try {
+              await deleteKnowledgeDocument(selectedKb.id, docId);
+              await refreshKnowledgeBases();
+            } catch (error) {
+              console.error(error);
+              alert('删除文档失败。');
+            }
+          }}
+        />
+        <UploadModal
+          kbId={selectedKb.id}
+          isOpen={isUploadOpen}
+          onClose={() => setIsUploadOpen(false)}
+          onUploaded={refreshKnowledgeBases}
         />
-        <UploadModal isOpen={isUploadOpen} onClose={() => setIsUploadOpen(false)} />
       </div>
     );
   }
@@ -103,6 +136,12 @@ export const KnowledgeBasePage: React.FC = () => {
             <Plus className="h-8 w-8 mb-2 opacity-50" />
             <span>新建知识库</span>
         </div>
+        {!isLoading && filteredKbs.length === 0 && (
+          <div className="col-span-full text-center text-muted-foreground py-8">暂无知识库</div>
+        )}
+        {isLoading && (
+          <div className="col-span-full text-center text-muted-foreground py-8">加载中...</div>
+        )}
       </div>
 
       {/* New Knowledge Base Dialog */}
@@ -141,7 +180,8 @@ const KnowledgeBaseDetail: React.FC<{
   kb: KnowledgeBase; 
   onBack: () => void;
   onImport: () => void;
-}> = ({ kb, onBack, onImport }) => {
+  onDeleteDocument: (docId: string) => void;
+}> = ({ kb, onBack, onImport, onDeleteDocument }) => {
   const [docSearch, setDocSearch] = useState('');
   const filteredDocs = kb.documents.filter(d => d.name.toLowerCase().includes(docSearch.toLowerCase()));
 
@@ -192,7 +232,14 @@ const KnowledgeBaseDetail: React.FC<{
                 <TableCell className="text-muted-foreground">{doc.size}</TableCell>
                 <TableCell className="text-muted-foreground">{doc.uploadDate}</TableCell>
                 <TableCell className="text-right">
-                    <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive/80">删除</Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="text-destructive hover:text-destructive/80"
+                      onClick={() => onDeleteDocument(doc.id)}
+                    >
+                      删除
+                    </Button>
                 </TableCell>
               </TableRow>
             )) : (
@@ -207,7 +254,7 @@ const KnowledgeBaseDetail: React.FC<{
   );
 };
 
-const UploadModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
+const UploadModal: React.FC<{ kbId: string; isOpen: boolean; onClose: () => void; onUploaded: () => Promise<void> }> = ({ kbId, isOpen, onClose, onUploaded }) => {
     const [dragActive, setDragActive] = useState(false);
     const [files, setFiles] = useState<File[]>([]);
     const inputRef = useRef<HTMLInputElement>(null);
@@ -242,6 +289,19 @@ const UploadModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpe
         setFiles(prev => prev.filter((_, i) => i !== idx));
     };
 
+    const handleUpload = async () => {
+        if (files.length === 0) return;
+        try {
+            await Promise.all(files.map((file) => uploadKnowledgeDocument(kbId, file)));
+            await onUploaded();
+            onClose();
+            setFiles([]);
+        } catch (error) {
+            console.error(error);
+            alert('上传失败，请稍后重试。');
+        }
+    };
+
     return (
         <Dialog 
             isOpen={isOpen} 
@@ -250,7 +310,7 @@ const UploadModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpe
             footer={
                 <>
                     <Button variant="ghost" onClick={onClose}>取消</Button>
-                    <Button onClick={() => { alert('Upload Started!'); onClose(); setFiles([]); }}>确认上传</Button>
+                    <Button onClick={handleUpload}>确认上传</Button>
                 </>
             }
         >

web/pages/VoiceLibrary.tsx

@@ -1,12 +1,13 @@
 
-import React, { useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Search, Mic2, Play, Pause, Upload, X, Filter, Plus, Volume2, Sparkles, Wand2, ChevronDown } from 'lucide-react';
 import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge } from '../components/UI';
 import { mockVoices } from '../services/mockData';
 import { Voice } from '../types';
+import { fetchVoices } from '../services/backendApi';
 
 export const VoiceLibraryPage: React.FC = () => {
-  const [voices, setVoices] = useState<Voice[]>(mockVoices);
+  const [voices, setVoices] = useState<Voice[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
   const [vendorFilter, setVendorFilter] = useState<'all' | 'Ali' | 'Volcano' | 'Minimax' | '硅基流动'>('all');
   const [genderFilter, setGenderFilter] = useState<'all' | 'Male' | 'Female'>('all');
@@ -15,6 +16,24 @@ export const VoiceLibraryPage: React.FC = () => {
   const [playingVoiceId, setPlayingVoiceId] = useState<string | null>(null);
   const [isCloneModalOpen, setIsCloneModalOpen] = useState(false);
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const loadVoices = async () => {
+      setIsLoading(true);
+      try {
+        const list = await fetchVoices();
+        setVoices(list.length > 0 ? list : mockVoices);
+      } catch (error) {
+        console.error(error);
+        setVoices(mockVoices);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadVoices();
+  }, []);
 
   const filteredVoices = voices.filter(voice => {
     const matchesSearch = voice.name.toLowerCase().includes(searchTerm.toLowerCase());
@@ -116,7 +135,7 @@ export const VoiceLibraryPage: React.FC = () => {
             </TableRow>
           </TableHeader>
           <tbody>
-            {filteredVoices.map(voice => (
+            {!isLoading && filteredVoices.map(voice => (
               <TableRow key={voice.id}>
                 <TableCell className="font-medium">
                     <div className="flex flex-col">
@@ -144,11 +163,16 @@ export const VoiceLibraryPage: React.FC = () => {
                 </TableCell>
               </TableRow>
             ))}
-             {filteredVoices.length === 0 && (
+             {!isLoading && filteredVoices.length === 0 && (
                  <TableRow>
                      <TableCell colSpan={5} className="text-center py-6 text-muted-foreground">暂无声音数据</TableCell>
                  </TableRow>
              )}
+             {isLoading && (
+                 <TableRow>
+                     <TableCell colSpan={5} className="text-center py-6 text-muted-foreground">加载中...</TableCell>
+                 </TableRow>
+             )}
           </tbody>
         </table>
       </div>

web/pages/WorkflowEditor.tsx

@@ -3,9 +3,56 @@ import React, { useState, useRef, useEffect } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { ArrowLeft, Play, Save, Rocket, Plus, Bot, UserCheck, Wrench, Ban, Zap, X, Copy, MousePointer2 } from 'lucide-react';
 import { Button, Input, Badge } from '../components/UI';
-import { mockAssistants, mockKnowledgeBases, mockWorkflows } from '../services/mockData';
-import { WorkflowNode, WorkflowEdge, Workflow } from '../types';
+import { Assistant, WorkflowNode, WorkflowEdge, Workflow } from '../types';
 import { DebugDrawer } from './Assistants';
+import { createWorkflow, fetchAssistants, fetchWorkflowById, updateWorkflow } from '../services/backendApi';
+
+const getTemplateNodes = (templateType: string | null): WorkflowNode[] => {
+  if (templateType === 'lead') {
+    return [
+      {
+        name: 'introduction',
+        type: 'conversation',
+        isStart: true,
+        metadata: { position: { x: 100, y: 100 } },
+        prompt: "You are Morgan from GrowthPartners. Start with: 'Hello, this is Morgan from GrowthPartners. We help businesses improve their operational efficiency through custom software solutions. Do you have a few minutes to chat about how we might be able to help your business?'",
+        messagePlan: { firstMessage: "Hello, this is Morgan from GrowthPartners. Do you have a few minutes to chat?" }
+      },
+      {
+        name: 'need_discovery',
+        type: 'conversation',
+        metadata: { position: { x: 450, y: 250 } },
+        prompt: "Conduct need discovery by asking about business challenges...",
+        variableExtractionPlan: {
+          output: [
+            { title: 'industry', type: 'string', description: 'user industry' },
+            { title: 'pain_points', type: 'string', description: 'main challenges' }
+          ]
+        }
+      },
+      {
+        name: 'hangup_node',
+        type: 'end',
+        metadata: { position: { x: 450, y: 550 } },
+        tool: {
+          type: 'endCall',
+          function: { name: 'hangup', parameters: {} },
+          messages: [{ type: 'request-start', content: 'Thank you for your time!', blocking: true }]
+        }
+      }
+    ];
+  }
+  return [
+    {
+      name: 'start_node',
+      type: 'conversation',
+      isStart: true,
+      metadata: { position: { x: 200, y: 200 } },
+      prompt: '欢迎对话系统...',
+      messagePlan: { firstMessage: '你好！' }
+    }
+  ];
+};
 
 export const WorkflowEditorPage: React.FC = () => {
   const navigate = useNavigate();
@@ -15,58 +62,11 @@ export const WorkflowEditorPage: React.FC = () => {
   // Template data for new workflows
   const templateName = searchParams.get('name');
   const templateType = searchParams.get('template');
-
-  // Find initial workflow or create a new one
-  const existingWf = mockWorkflows.find(w => w.id === id);
-  const [name, setName] = useState(templateName || existingWf?.name || '新工作流');
-  const [nodes, setNodes] = useState<WorkflowNode[]>(() => {
-    if (existingWf) return existingWf.nodes;
-    if (templateType === 'lead') {
-      return [
-        { 
-          name: 'introduction', 
-          type: 'conversation', 
-          isStart: true,
-          metadata: { position: { x: 100, y: 100 } }, 
-          prompt: "You are Morgan from GrowthPartners. Start with: 'Hello, this is Morgan from GrowthPartners. We help businesses improve their operational efficiency through custom software solutions. Do you have a few minutes to chat about how we might be able to help your business?'",
-          messagePlan: { firstMessage: "Hello, this is Morgan from GrowthPartners. Do you have a few minutes to chat?" }
-        },
-        { 
-          name: 'need_discovery', 
-          type: 'conversation', 
-          metadata: { position: { x: 450, y: 250 } }, 
-          prompt: "Conduct need discovery by asking about business challenges...",
-          variableExtractionPlan: {
-              output: [
-                  { title: 'industry', type: 'string', description: 'user industry' },
-                  { title: 'pain_points', type: 'string', description: 'main challenges' }
-              ]
-          }
-        },
-        {
-          name: 'hangup_node',
-          type: 'end',
-          metadata: { position: { x: 450, y: 550 } },
-          tool: {
-              type: 'endCall',
-              function: { name: 'hangup', parameters: {} },
-              messages: [{ type: 'request-start', content: 'Thank you for your time!', blocking: true }]
-          }
-        }
-      ];
-    }
-    return [
-      { 
-        name: 'start_node', 
-        type: 'conversation', 
-        isStart: true,
-        metadata: { position: { x: 200, y: 200 } }, 
-        prompt: '欢迎对话系统...',
-        messagePlan: { firstMessage: '你好！' }
-      }
-    ];
-  });
-  const [edges, setEdges] = useState<WorkflowEdge[]>(existingWf?.edges || []);
+  const [name, setName] = useState(templateName || '新工作流');
+  const [nodes, setNodes] = useState<WorkflowNode[]>(() => getTemplateNodes(templateType));
+  const [edges, setEdges] = useState<WorkflowEdge[]>([]);
+  const [createdAt, setCreatedAt] = useState('');
+  const [assistants, setAssistants] = useState<Assistant[]>([]);
   
   const [selectedNodeName, setSelectedNodeName] = useState<string | null>(null);
   const [isAddMenuOpen, setIsAddMenuOpen] = useState(false);
@@ -141,6 +141,36 @@ export const WorkflowEditorPage: React.FC = () => {
     };
   }, [draggingNodeName, isPanning, zoom]);
 
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const assistantList = await fetchAssistants();
+        setAssistants(assistantList);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    loadData();
+  }, []);
+
+  useEffect(() => {
+    if (!id) return;
+    const loadWorkflow = async () => {
+      try {
+        const workflow = await fetchWorkflowById(id);
+        setName(workflow.name);
+        setNodes(workflow.nodes);
+        setEdges(workflow.edges);
+        setCreatedAt(workflow.createdAt);
+      } catch (error) {
+        console.error(error);
+        alert('加载工作流失败。');
+      }
+    };
+
+    loadWorkflow();
+  }, [id]);
+
   const addNode = (type: WorkflowNode['type']) => {
       const newNode: WorkflowNode = {
           name: `${type}_${Date.now()}`,
@@ -158,26 +188,29 @@ export const WorkflowEditorPage: React.FC = () => {
     setNodes(prev => prev.map(n => n.name === selectedNodeName ? { ...n, [field]: value } : n));
   };
 
-  const handleSave = () => {
+  const handleSave = async () => {
     const now = new Date().toISOString().replace('T', ' ').substring(0, 16);
-    const updatedWorkflow: Workflow = {
-      id: id || `wf_${Date.now()}`,
+    const workflowPayload: Partial<Workflow> = {
       name,
       nodeCount: nodes.length,
-      createdAt: existingWf?.createdAt || now,
+      createdAt: createdAt || now,
       updatedAt: now,
       nodes,
       edges,
     };
 
-    if (id) {
-        const idx = mockWorkflows.findIndex(w => w.id === id);
-        if (idx !== -1) mockWorkflows[idx] = updatedWorkflow;
-    } else {
-        mockWorkflows.push(updatedWorkflow);
+    try {
+      if (id) {
+        await updateWorkflow(id, workflowPayload);
+      } else {
+        await createWorkflow(workflowPayload);
+      }
+      alert('保存成功！工作流已同步至列表。');
+      navigate('/workflows');
+    } catch (error) {
+      console.error(error);
+      alert('保存失败，请稍后重试。');
     }
-    alert('保存成功！工作流已同步至列表。');
-    navigate('/workflows');
   };
 
   return (
@@ -385,7 +418,18 @@ export const WorkflowEditorPage: React.FC = () => {
       <DebugDrawer 
         isOpen={isDebugOpen} 
         onClose={() => setIsDebugOpen(false)} 
-        assistant={mockAssistants[0]} 
+        assistant={assistants[0] || {
+          id: 'debug',
+          name: 'Debug Assistant',
+          callCount: 0,
+          opener: 'Hello!',
+          prompt: '',
+          knowledgeBaseId: '',
+          language: 'zh',
+          voice: '',
+          speed: 1,
+          hotwords: [],
+        }} 
       />
     </div>
   );

web/pages/Workflows.tsx

@@ -1,17 +1,19 @@
 
-import React, { useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Search, Plus, Upload, MoreHorizontal, Code, Edit2, Copy, Trash2, Calendar, CloudUpload, File as FileIcon, X, Layout, FilePlus } from 'lucide-react';
 import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Card } from '../components/UI';
-import { mockWorkflows } from '../services/mockData';
 import { useNavigate } from 'react-router-dom';
+import { Workflow } from '../types';
+import { deleteWorkflow, fetchWorkflows } from '../services/backendApi';
 
 export const WorkflowsPage: React.FC = () => {
   const navigate = useNavigate();
-  const [workflows, setWorkflows] = useState(mockWorkflows);
+  const [workflows, setWorkflows] = useState<Workflow[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
   const [isUploadOpen, setIsUploadOpen] = useState(false);
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [activeMenu, setActiveMenu] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
 
   const [newWfName, setNewWfName] = useState('');
   const [selectedTemplate, setSelectedTemplate] = useState<'blank' | 'lead'>('blank');
@@ -20,6 +22,23 @@ export const WorkflowsPage: React.FC = () => {
     wf.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
+  useEffect(() => {
+    const loadWorkflows = async () => {
+      setIsLoading(true);
+      try {
+        const list = await fetchWorkflows();
+        setWorkflows(list);
+      } catch (error) {
+        console.error(error);
+        alert('加载工作流失败，请检查后端服务。');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadWorkflows();
+  }, []);
+
   const handleCreateWorkflow = () => {
     if (!newWfName.trim()) {
       alert('请输入工作流名称');
@@ -29,10 +48,16 @@ export const WorkflowsPage: React.FC = () => {
     navigate(`/workflows/new?name=${encodeURIComponent(newWfName)}&template=${selectedTemplate}`);
   };
 
-  const handleDeleteWorkflow = (id: string) => {
+  const handleDeleteWorkflow = async (id: string) => {
     if (confirm('确定要删除这个工作流吗？')) {
-      setWorkflows(prev => prev.filter(w => w.id !== id));
-      setActiveMenu(null);
+      try {
+        await deleteWorkflow(id);
+        setWorkflows(prev => prev.filter(w => w.id !== id));
+        setActiveMenu(null);
+      } catch (error) {
+        console.error(error);
+        alert('删除工作流失败。');
+      }
     }
   };
 
@@ -83,7 +108,7 @@ export const WorkflowsPage: React.FC = () => {
             </TableRow>
           </TableHeader>
           <tbody>
-            {filteredWorkflows.map(wf => (
+            {!isLoading && filteredWorkflows.map(wf => (
               <TableRow key={wf.id} className="group">
                 <TableCell className="font-medium">
                   <button 
@@ -125,11 +150,16 @@ export const WorkflowsPage: React.FC = () => {
                 </TableCell>
               </TableRow>
             ))}
-             {filteredWorkflows.length === 0 && (
+             {!isLoading && filteredWorkflows.length === 0 && (
                  <TableRow>
                      <TableCell colSpan={5} className="text-center py-12 text-muted-foreground">暂无工作流数据</TableCell>
                  </TableRow>
              )}
+             {isLoading && (
+                 <TableRow>
+                     <TableCell colSpan={5} className="text-center py-12 text-muted-foreground">加载中...</TableCell>
+                 </TableRow>
+             )}
           </tbody>
         </table>
       </div>