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

流量分发的功能构建完成

nkebao/src/components/TrafficPoolSelection.tsx

@@ -1,13 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Search, Database } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
 import { useToast } from '@/components/ui/toast';
-import { fetchDeviceLabels, type TrafficPool, type TrafficPoolListResponse } from '@/api/trafficDistribution';
-import type { ApiResponse } from '@/types/common';
+import { fetchDeviceLabels, type TrafficPool } from '@/api/trafficDistribution';
 
 // 组件属性接口
 interface TrafficPoolSelectionProps {
@@ -34,34 +32,8 @@ export default function TrafficPoolSelection({
   const [loading, setLoading] = useState(false);
   const { toast } = useToast();
 
-  // 当弹窗打开时获取流量池列表
-  useEffect(() => {
-    if (dialogOpen && deviceIds.length > 0) {
-      // 弹窗打开时重置搜索和页码，然后立即请求第一页数据
-      setSearchQuery('');
-      setCurrentPage(1);
-      fetchPools(1, '');
-    }
-  }, [dialogOpen, deviceIds]);
-
-  // 监听页码变化，重新请求数据
-  useEffect(() => {
-    if (dialogOpen && deviceIds.length > 0 && currentPage > 1) {
-      fetchPools(currentPage, searchQuery);
-    }
-  }, [currentPage]);
-
-  // 当设备ID变化时，清空已选择的流量池（如果需要的话）
-  useEffect(() => {
-    if (deviceIds.length === 0) {
-      setPools([]);
-      setTotalPools(0);
-      setTotalPages(1);
-    }
-  }, [deviceIds]);
-
   // 获取流量池列表API
-  const fetchPools = async (page: number, keyword: string = '') => {
+  const fetchPools = useCallback(async (page: number, keyword: string = '') => {
     if (deviceIds.length === 0) return;
     
     setLoading(true);
@@ -136,7 +108,33 @@ export default function TrafficPoolSelection({
     } finally {
       setLoading(false);
     }
-  };
+  }, [deviceIds, toast]);
+
+  // 当弹窗打开时获取流量池列表
+  useEffect(() => {
+    if (dialogOpen && deviceIds.length > 0) {
+      // 弹窗打开时重置搜索和页码，然后立即请求第一页数据
+      setSearchQuery('');
+      setCurrentPage(1);
+      fetchPools(1, '');
+    }
+  }, [dialogOpen, deviceIds, fetchPools]);
+
+  // 监听页码变化，重新请求数据
+  useEffect(() => {
+    if (dialogOpen && deviceIds.length > 0 && currentPage > 1) {
+      fetchPools(currentPage, searchQuery);
+    }
+  }, [currentPage, dialogOpen, deviceIds.length, fetchPools, searchQuery]);
+
+  // 当设备ID变化时，清空已选择的流量池（如果需要的话）
+  useEffect(() => {
+    if (deviceIds.length === 0) {
+      setPools([]);
+      setTotalPools(0);
+      setTotalPages(1);
+    }
+  }, [deviceIds]);
 
   // 处理搜索
   const handleSearch = (keyword: string) => {
@@ -167,16 +165,6 @@ export default function TrafficPoolSelection({
     setDialogOpen(false);
   };
 
-  // 处理弹窗关闭
-  const handleDialogClose = (open: boolean) => {
-    setDialogOpen(open);
-    if (!open) {
-      // 弹窗关闭时可以选择性清理状态，这里保留搜索状态以便下次打开时使用
-      // setSearchQuery('');
-      // setCurrentPage(1);
-    }
-  };
-
   // 处理输入框点击
   const handleInputClick = () => {
     if (deviceIds.length === 0) {
@@ -207,9 +195,9 @@ export default function TrafficPoolSelection({
       </div>
 
       {/* 流量池选择弹窗 */}
-      <Dialog open={dialogOpen} onOpenChange={handleDialogClose}>
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogContent className="max-w-sm w-[90vw] max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
-          <div className="p-6">
+          <div>
             <DialogTitle className="text-center text-xl font-medium mb-6">选择流量池</DialogTitle>
             
             <div className="relative mb-4">