Frontend start to use backend CRUD api

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>