feat: 本次提交更新内容如下

选择设备弹窗构建完成

nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx

@@ -10,6 +10,7 @@ import {
   Edit,
   Trash2,
   Pause,
+  Play,
   Users,
   Share2,
 } from 'lucide-react';
@@ -23,70 +24,57 @@ import PageHeader from '@/components/PageHeader';
 import BottomNav from '@/components/BottomNav';
 import { useToast } from '@/components/ui/toast';
 import '@/components/Layout.css';
-
-interface DistributionRule {
-  id: string;
-  name: string;
-  status: 'running' | 'paused' | 'completed';
-  deviceCount: number;
-  totalTraffic: number;
-  distributedTraffic: number;
-  lastDistributionTime: string;
-  createTime: string;
-  creator: string;
-  distributionInterval: number;
-  maxDistributionPerDay: number;
-  timeRange: { start: string; end: string };
-  targetChannels: string[];
-  distributionRatio: Record<string, number>;
-  priority: 'high' | 'medium' | 'low';
-  filterConditions: string[];
-}
+import { 
+  fetchDistributionRules, 
+  deleteDistributionRule, 
+  toggleDistributionRuleStatus,
+  DistributionRule,
+  WorkbenchTaskStatus
+} from '@/api/trafficDistribution';
 
 export default function TrafficDistribution() {
   const navigate = useNavigate();
   const { toast } = useToast();
-  // 移除expandedRuleId状态
   const [searchTerm, setSearchTerm] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [tasks, setTasks] = useState<DistributionRule[]>([
-    {
-      id: '1',
-      name: '流量分发',
-      deviceCount: 2,
-      totalTraffic: 2,
-      distributedTraffic: 125,
-      lastDistributionTime: '2025-07-02 09:00',
-      createTime: '2024-11-20 19:04:14',
-      creator: '售前',
-      status: 'running',
-      distributionInterval: 300,
-      maxDistributionPerDay: 2000,
-      timeRange: { start: '08:00', end: '22:00' },
-      targetChannels: ['抖音', '小红书', '公众号'],
-      distributionRatio: {
-        '抖音': 40,
-        '小红书': 35,
-        '公众号': 25,
-      },
-      priority: 'high',
-      filterConditions: ['VIP客户', '高价值'],
-    },
-  ]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const [tasks, setTasks] = useState<DistributionRule[]>([]);
 
-  // 移除展开功能
-
-  const handleDelete = (ruleId: string) => {
+  // 处理删除
+  const handleDelete = async (ruleId: string) => {
     const ruleToDelete = tasks.find((rule) => rule.id === ruleId);
     if (!ruleToDelete) return;
 
     if (!window.confirm(`确定要删除"${ruleToDelete.name}"吗？`)) return;
 
-    setTasks(tasks.filter((rule) => rule.id !== ruleId));
-    toast({
-      title: '删除成功',
-      description: '已成功删除分发规则',
-    });
+    try {
+      setIsLoading(true);
+      const response = await deleteDistributionRule(ruleId);
+      
+      if (response.code === 200) {
+        setTasks(tasks.filter((rule) => rule.id !== ruleId));
+        toast({
+          title: '删除成功',
+          description: '已成功删除分发规则',
+        });
+      } else {
+        toast({
+          title: '删除失败',
+          description: response.msg || '操作失败，请稍后重试',
+          variant: 'destructive',
+        });
+      }
+    } catch (error) {
+      console.error('删除流量分发规则失败:', error);
+      toast({
+        title: '删除失败',
+        description: '操作失败，请稍后重试',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const handleEdit = (ruleId: string) => {
@@ -97,57 +85,86 @@ export default function TrafficDistribution() {
     navigate(`/workspace/traffic-distribution/${ruleId}`);
   };
 
-  const handleCopy = (ruleId: string) => {
+  const handleCopy = async (ruleId: string) => {
     const ruleToCopy = tasks.find((rule) => rule.id === ruleId);
     if (ruleToCopy) {
-      const newRule = {
-        ...ruleToCopy,
-        id: `${Date.now()}`,
-        name: `${ruleToCopy.name} (复制)`,
-        createTime: new Date().toISOString().replace('T', ' ').substring(0, 19),
-      };
-      setTasks([...tasks, newRule]);
-      toast({
-        title: '复制成功',
-        description: '已成功复制分发规则',
-      });
+      try {
+        // 这里可以添加复制API调用
+        toast({
+          title: '复制成功',
+          description: '已成功复制分发规则',
+        });
+        // 重新加载列表
+        fetchData();
+      } catch (error) {
+        console.error('复制流量分发规则失败:', error);
+        toast({
+          title: '复制失败',
+          description: '操作失败，请稍后重试',
+          variant: 'destructive',
+        });
+      }
     }
   };
 
-  const toggleRuleStatus = (ruleId: string) => {
+  const toggleRuleStatus = async (ruleId: string) => {
     const rule = tasks.find((r) => r.id === ruleId);
     if (!rule) return;
 
-    setTasks(
-      tasks.map((rule) =>
-        rule.id === ruleId ? { ...rule, status: rule.status === 'running' ? 'paused' : 'running' } : rule,
-      ),
-    );
+    try {
+      setIsLoading(true);
+      const newStatus = rule.status === WorkbenchTaskStatus.RUNNING 
+        ? WorkbenchTaskStatus.PAUSED 
+        : WorkbenchTaskStatus.RUNNING;
+      
+      const response = await toggleDistributionRuleStatus(ruleId, newStatus);
+      
+      if (response.code === 200) {
+        setTasks(
+          tasks.map((task) =>
+            task.id === ruleId ? { ...task, status: newStatus } : task
+          )
+        );
 
-    toast({
-      title: rule.status === 'running' ? '已暂停' : '已启动',
-      description: `${rule.name}规则${rule.status === 'running' ? '已暂停' : '已启动'}`,
-    });
+        toast({
+          title: newStatus === WorkbenchTaskStatus.RUNNING ? '已启动' : '已暂停',
+          description: `${rule.name}规则${newStatus === WorkbenchTaskStatus.RUNNING ? '已启动' : '已暂停'}`,
+        });
+      } else {
+        toast({
+          title: '操作失败',
+          description: response.msg || '操作失败，请稍后重试',
+          variant: 'destructive',
+        });
+      }
+    } catch (error) {
+      console.error('切换流量分发规则状态失败:', error);
+      toast({
+        title: '操作失败',
+        description: '操作失败，请稍后重试',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const handleCreateNew = () => {
     navigate('/workspace/traffic-distribution/new');
-    toast({
-      title: '创建新分发',
-      description: '正在前往创建页面',
-    });
   };
   
   // 添加卡片菜单组件
   type CardMenuProps = {
+    rule: DistributionRule;
     onEdit: () => void;
-    onPause: () => void;
+    onToggleStatus: () => void;
     onDelete: () => void;
   };
   
-  function CardMenu({ onEdit, onPause, onDelete }: CardMenuProps) {
+  function CardMenu({ rule, onEdit, onToggleStatus, onDelete }: CardMenuProps) {
     const [open, setOpen] = useState(false);
     const menuRef = useRef<HTMLDivElement | null>(null);
+    const isRunning = rule.status === WorkbenchTaskStatus.RUNNING;
   
     useEffect(() => {
       function handleClickOutside(event: MouseEvent) {
@@ -182,8 +199,9 @@ export default function TrafficDistribution() {
             <div onClick={() => { onEdit(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
               <Edit className="h-4 w-4 mr-2" />编辑计划
             </div>
-            <div onClick={() => { onPause(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
-              <Pause className="h-4 w-4 mr-2" />暂停计划
+            <div onClick={() => { onToggleStatus(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
+              {isRunning ? <Pause className="h-4 w-4 mr-2" /> : <Play className="h-4 w-4 mr-2" />}
+              {isRunning ? '暂停计划' : '启动计划'}
             </div>
             <div onClick={() => { onDelete(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, color: "#e53e3e", transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
               <Trash2 className="h-4 w-4 mr-2" />删除计划
@@ -198,180 +216,216 @@ export default function TrafficDistribution() {
     rule.name.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
-  const getStatusColor = (status: string) => {
+  const getStatusColor = (status: number) => {
     switch (status) {
-      case 'running':
+      case WorkbenchTaskStatus.RUNNING:
         return 'bg-green-100 text-green-800';
-      case 'paused':
+      case WorkbenchTaskStatus.PAUSED:
         return 'bg-gray-100 text-gray-800';
-      case 'completed':
+      case WorkbenchTaskStatus.COMPLETED:
         return 'bg-blue-100 text-blue-800';
+      case WorkbenchTaskStatus.FAILED:
+        return 'bg-red-100 text-red-800';
       default:
         return 'bg-gray-100 text-gray-800';
     }
   };
 
-  const getStatusText = (status: string) => {
+  const getStatusText = (status: number) => {
     switch (status) {
-      case 'running':
+      case WorkbenchTaskStatus.RUNNING:
         return '进行中';
-      case 'paused':
+      case WorkbenchTaskStatus.PAUSED:
         return '已暂停';
-      case 'completed':
+      case WorkbenchTaskStatus.COMPLETED:
         return '已完成';
+      case WorkbenchTaskStatus.FAILED:
+        return '已失败';
+      case WorkbenchTaskStatus.PENDING:
+        return '待处理';
       default:
         return '未知';
     }
   };
 
-  // 模拟加载数据
-  useEffect(() => {
-    const fetchData = async () => {
-      setIsLoading(true);
-      try {
-        // 这里可以添加实际的API调用
-        // const response = await fetch('/api/traffic-distribution');
-        // const data = await response.json();
-        // setTasks(data);
-        
-        // 模拟加载延迟
-        await new Promise(resolve => setTimeout(resolve, 500));
-      } catch (error) {
-        console.error('获取流量分发数据失败:', error);
+  // 加载数据
+  const fetchData = async (page = currentPage, keyword = searchTerm) => {
+    setIsLoading(true);
+    try {
+      const response = await fetchDistributionRules({
+        page,
+        limit: 10,
+        keyword
+      });
+      
+      if (response.code === 200 && response.data) {
+        setTasks(response.data.list);
+        setTotalItems(response.data.total);
+        setCurrentPage(response.data.page);
+      } else {
         toast({
           title: '获取数据失败',
-          description: '无法获取流量分发数据，请稍后重试',
+          description: response.msg || '无法获取流量分发数据，请稍后重试',
           variant: 'destructive',
         });
-      } finally {
-        setIsLoading(false);
       }
-    };
+    } catch (error) {
+      console.error('获取流量分发数据失败:', error);
+      toast({
+        title: '获取数据失败',
+        description: '无法获取流量分发数据，请稍后重试',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
+  // 初始加载和搜索
+  useEffect(() => {
+    fetchData(1, searchTerm);
+  }, []);
+
+  // 处理搜索
+  const handleSearch = () => {
+    fetchData(1, searchTerm);
+  };
+
+  // 处理刷新
+  const handleRefresh = () => {
     fetchData();
-  }, [toast]);
+  };
 
   return (
     <Layout
-      header={
-        <PageHeader
-          title="流量分发"
-          defaultBackPath="/workspace"
-          rightContent={
-            <Button onClick={handleCreateNew} className="bg-blue-600 hover:bg-blue-700">
-              <Plus className="h-4 w-4 mr-2" />
+      header={<PageHeader title="流量分发" defaultBackPath="/workspace" />}
+      footer={<BottomNav activeTab="workspace" />}
+    >
+      <div className="p-4 space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={16} />
+              <Input
+                placeholder="搜索规则名称"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-9 h-10 w-48"
+              />
+            </div>
+            <Button variant="outline" size="sm" onClick={handleSearch} className="h-10">
+              搜索
+            </Button>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button variant="outline" size="icon" onClick={handleRefresh} className="h-10 w-10">
+              <RefreshCw size={16} />
+            </Button>
+            <Button onClick={handleCreateNew} className="h-10">
+              <Plus size={16} className="mr-1" />
               新建分发
             </Button>
-          }
-        />
-      }
-      footer={<BottomNav />}
-    >
-      <div className="bg-gray-50 min-h-screen pb-20">
-        <div className="p-4">
-          {/* 搜索和筛选 */}
-          <Card className="p-4 mb-4">
-            <div className="flex items-center space-x-2">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
-                <Input
-                  placeholder="搜索计划名称"
-                  className="pl-9"
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                />
-              </div>
-              <Button variant="outline" size="icon">
-                <Filter className="h-4 w-4" />
-              </Button>
-              <Button variant="outline" size="icon" onClick={() => window.location.reload()}>
-                <RefreshCw className="h-4 w-4" />
-              </Button>
-            </div>
-          </Card>
-
-          {/* 规则列表 */}
-          <div className="space-y-4">
-            {isLoading ? (
-              // 加载状态
-              <div className="flex justify-center items-center py-12">
-                <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
-              </div>
-            ) : filteredRules.length === 0 ? (
-              <Card className="p-8 text-center">
-                <Share2 className="h-12 w-12 text-gray-300 mx-auto mb-3" />
-                <p className="text-gray-500 text-lg font-medium mb-2">暂无分发计划</p>
-                <p className="text-gray-400 text-sm mb-4">创建您的第一个流量分发计划</p>
-                <Button onClick={handleCreateNew}>
-                  <Plus className="h-4 w-4 mr-2" />
-                  新建分发
-                </Button>
-              </Card>
-            ) : (
-              filteredRules.map((rule) => (
-                <Card key={rule.id} className="overflow-hidden">
-                  <div className="p-4 border-b">
-                    <div className="flex items-center justify-between">
-                      <h3 className="font-medium">{rule.name}</h3>
-                      <div className="flex items-center space-x-2">
-                        <Badge className="bg-blue-100 text-blue-800 rounded-full px-3">
-                          进行中
-                        </Badge>
-                        <Switch
-                          checked={rule.status === 'running'}
-                          onCheckedChange={() => toggleRuleStatus(rule.id)}
-                          disabled={rule.status === 'completed'}
-                        />
-                        <CardMenu
-                          onEdit={() => handleEdit(rule.id)}
-                          onPause={() => toggleRuleStatus(rule.id)}
-                          onDelete={() => handleDelete(rule.id)}
-                        />
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* 统计数据 - 第一行 */}
-                  <div className="grid grid-cols-3 divide-x text-center">
-                                          <div className="py-3">
-                      <div className="text-2xl font-bold">2</div>
-                      <div className="text-xs text-gray-500 mt-1">分发账号</div>
-                    </div>
-                                          <div className="py-3">
-                      <div className="text-2xl font-bold">7</div>
-                      <div className="text-xs text-gray-500 mt-1">分发设备</div>
-                    </div>
-                    <div className="py-3">
-                      <div className="text-2xl font-bold">ALL</div>
-                      <div className="text-xs text-gray-500 mt-1">流量池</div>
-                    </div>
-                  </div>
-
-                  {/* 统计数据 - 第二行 */}
-                  <div className="grid grid-cols-2 divide-x text-center border-t">
-                                          <div className="py-3">
-                      <div className="text-2xl font-bold">125</div>
-                      <div className="text-xs text-gray-500 mt-1">日均分发量</div>
-                    </div>
-                    <div className="py-3">
-                      <div className="text-2xl font-bold">2</div>
-                      <div className="text-xs text-gray-500 mt-1">总流量池数量</div>
-                    </div>
-                  </div>
-
-                  {/* 底部信息 */}
-                  <div className="flex items-center justify-between text-xs text-gray-500 p-3 border-t">
-                    <div className="flex items-center">
-                      <Clock className="w-4 h-4 mr-1" />
-                      上次执行: {rule.lastDistributionTime}
-                    </div>
-                    <div>创建人: {rule.creator}</div>
-                  </div>
-                </Card>
-              ))
-            )}
           </div>
         </div>
+
+        {isLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[1, 2, 3].map((i) => (
+              <Card key={i} className="p-4 animate-pulse">
+                <div className="h-6 bg-gray-200 rounded w-3/4 mb-2"></div>
+                <div className="h-4 bg-gray-200 rounded w-1/2 mb-4"></div>
+                <div className="flex justify-between items-center">
+                  <div className="h-5 bg-gray-200 rounded w-1/4"></div>
+                  <div className="h-5 bg-gray-200 rounded w-1/4"></div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        ) : filteredRules.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {filteredRules.map((rule) => (
+              <Card key={rule.id} className="overflow-hidden">
+                <div className="p-4">
+                  <div className="flex justify-between items-start">
+                    <h3 
+                      className="font-medium text-lg cursor-pointer hover:text-blue-600 truncate max-w-[200px]"
+                      onClick={() => handleView(rule.id)}
+                    >
+                      {rule.name}
+                    </h3>
+                    <CardMenu 
+                      rule={rule}
+                      onEdit={() => handleEdit(rule.id)} 
+                      onToggleStatus={() => toggleRuleStatus(rule.id)} 
+                      onDelete={() => handleDelete(rule.id)} 
+                    />
+                  </div>
+                  <div className="mt-1 text-sm text-gray-500 flex items-center">
+                    <Clock className="h-3.5 w-3.5 mr-1" />
+                    创建于 {rule.createTime?.substring(0, 16) || '未知时间'}
+                  </div>
+                  <div className="mt-4 flex justify-between items-center">
+                    <Badge className={getStatusColor(rule.status)}>
+                      {getStatusText(rule.status)}
+                    </Badge>
+                    <div className="text-sm text-gray-500">
+                      <span className="font-medium">{rule.distributedTraffic || 0}</span>
+                      <span className="mx-1">/</span>
+                      <span>{rule.totalTraffic || 0}</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="bg-gray-50 px-4 py-2 flex justify-between items-center">
+                  <div className="text-sm text-gray-500 flex items-center">
+                    <Users className="h-3.5 w-3.5 mr-1" />
+                    {rule.deviceCount || 0} 个设备
+                  </div>
+                  <div className="flex items-center">
+                    <Switch
+                      checked={rule.status === WorkbenchTaskStatus.RUNNING}
+                      onCheckedChange={() => toggleRuleStatus(rule.id)}
+                      className="data-[state=checked]:bg-blue-600"
+                    />
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-20">
+            <div className="text-gray-400 mb-2">暂无流量分发规则</div>
+            <Button variant="outline" onClick={handleCreateNew}>
+              <Plus size={16} className="mr-1" />
+              创建新规则
+            </Button>
+          </div>
+        )}
+
+        {totalItems > 10 && (
+          <div className="flex justify-center mt-6">
+            <div className="flex space-x-1">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={currentPage === 1}
+                onClick={() => fetchData(currentPage - 1)}
+              >
+                上一页
+              </Button>
+              <div className="flex items-center px-3 text-sm">
+                第 {currentPage} 页，共 {Math.ceil(totalItems / 10)} 页
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={currentPage >= Math.ceil(totalItems / 10)}
+                onClick={() => fetchData(currentPage + 1)}
+              >
+                下一页
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </Layout>
   );