Frontend start to use backend CRUD api

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>