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

构建完成

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

@@ -11,38 +11,15 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import Layout from '@/components/Layout';
 import PageHeader from '@/components/PageHeader';
+import DeviceSelection from '@/components/DeviceSelection';
 import { useToast } from '@/components/ui/toast';
 import { fetchAccountList, Account } from '@/api/trafficDistribution';
 import '@/components/Layout.css';
 
-// 移除原来的步骤指示器组件
-// function StepIndicator({ currentStep, steps }: { currentStep: number; steps: Step[] }) {
-//   return (
-//     <div className="flex justify-between items-center w-full mb-6 px-4">
-//       {steps.map((step, index) => (
-//         <div key={step.id} className="flex flex-1 items-center">
-//           <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
-//             index < currentStep ? 'bg-blue-500 text-white' : 
-//             index === currentStep ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500'
-//           }`}>
-//             {React.cloneElement(step.icon as React.ReactElement, { className: "w-5 h-5" })}
-//           </div>
-//           {index < steps.length - 1 && (
-//             <div className={`flex-1 h-1 mx-2 ${
-//               index < currentStep ? 'bg-blue-500' : 'bg-gray-200'
-//             }`}></div>
-//           )}
-//         </div>
-//       ))}
-//     </div>
-//   );
-// }
-
 interface BasicInfoData {
   name: string;
   distributionMethod: 'equal' | 'priority' | 'ratio';
@@ -55,7 +32,6 @@ interface BasicInfoData {
 
 interface TargetSettingsData {
   selectedDevices: string[];
-  selectedCustomerServices: string[];
 }
 
 interface TrafficPoolData {
@@ -68,18 +44,6 @@ interface FormData {
   trafficPool: Partial<TrafficPoolData>;
 }
 
-interface Device {
-  id: string;
-  name: string;
-  status: 'online' | 'offline';
-}
-
-interface CustomerService {
-  id: string;
-  name: string;
-  status: 'online' | 'offline';
-}
-
 interface TrafficPool {
   id: string;
   name: string;
@@ -367,7 +331,7 @@ export default function NewDistribution() {
     }
   };
 
-  // 基本信息步骤组件
+  // 基本信息步骤组件  
   const BasicInfoStep = ({ onNext, initialData = {} }: { onNext: (data: BasicInfoData) => void; initialData?: Partial<BasicInfoData> }) => {
     const [formData, setFormData] = useState<BasicInfoData>({
       name: initialData.name || generateDefaultName(),
@@ -579,50 +543,11 @@ export default function NewDistribution() {
   // 目标设置步骤组件
   const TargetSettingsStep = ({ onNext, onBack, initialData = {} }: { onNext: (data: TargetSettingsData) => void; onBack: () => void; initialData?: Partial<TargetSettingsData> }) => {
     const [selectedDevices, setSelectedDevices] = useState<string[]>(initialData.selectedDevices || []);
-    const [selectedCustomerServices, setSelectedCustomerServices] = useState<string[]>(initialData.selectedCustomerServices || []);
-    const [searchTerm, setSearchTerm] = useState("");
-
-    // 模拟设备数据
-    const devices: Device[] = [
-      { id: "1", name: "设备 1", status: "online" },
-      { id: "2", name: "设备 2", status: "online" },
-      { id: "3", name: "设备 3", status: "offline" },
-      { id: "4", name: "设备 4", status: "online" },
-      { id: "5", name: "设备 5", status: "offline" },
-    ];
-
-    // 模拟客服数据
-    const customerServices: CustomerService[] = [
-      { id: "1", name: "客服 A", status: "online" },
-      { id: "2", name: "客服 B", status: "online" },
-      { id: "3", name: "客服 C", status: "offline" },
-      { id: "4", name: "客服 D", status: "online" },
-    ];
-
-    const filteredDevices = devices.filter(device => 
-      device.name.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-
-    const filteredCustomerServices = customerServices.filter(cs =>
-      cs.name.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-
-    const toggleDevice = (id: string) => {
-      setSelectedDevices(prev => 
-        prev.includes(id) ? prev.filter(deviceId => deviceId !== id) : [...prev, id]
-      );
-    };
-
-    const toggleCustomerService = (id: string) => {
-      setSelectedCustomerServices(prev =>
-        prev.includes(id) ? prev.filter(csId => csId !== id) : [...prev, id]
-      );
-    };
 
     const handleSubmit = () => {
-      if (selectedDevices.length === 0 && selectedCustomerServices.length === 0) {
+      if (selectedDevices.length === 0) {
         toast({
-          title: "请选择至少一个设备或客服",
+          title: "请选择至少一个设备",
           variant: "destructive"
         });
         return;
@@ -630,102 +555,26 @@ export default function NewDistribution() {
       
       onNext({
         selectedDevices,
-        selectedCustomerServices,
       });
     };
 
     return (
       <div className="bg-white rounded-lg p-6">
         <h2 className="text-xl font-bold mb-6">目标设置</h2>
-
-        <div className="mb-4">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
-            <Input
-              placeholder="搜索设备或客服"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10 h-12"
-            />
-          </div>
+        
+        <div className="mb-6">
+          <DeviceSelection
+            selectedDevices={selectedDevices}
+            onSelect={setSelectedDevices}
+            placeholder="选择执行设备"
+          />
         </div>
 
-        <Tabs defaultValue="devices" className="w-full">
-          <TabsList className="grid w-full grid-cols-2 mb-4">
-            <TabsTrigger value="devices">设备选择</TabsTrigger>
-            <TabsTrigger value="customerService">客服选择</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="devices" className="space-y-4">
-            <div className="grid grid-cols-1 gap-3">
-              {filteredDevices.map(device => (
-                <div 
-                  key={device.id}
-                  className={`cursor-pointer border rounded-lg p-3 ${selectedDevices.includes(device.id) ? "border-blue-500 bg-blue-50" : "border-gray-200"}`}
-                  onClick={() => toggleDevice(device.id)}
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center space-x-3">
-                      <div className={`w-10 h-10 rounded-full flex items-center justify-center ${device.status === "online" ? "bg-green-100" : "bg-gray-100"}`}>
-                        <span className={`text-sm font-medium ${device.status === "online" ? "text-green-600" : "text-gray-600"}`}>
-                          {device.name.substring(2, 3)}
-                        </span>
-                      </div>
-                      <div>
-                        <p className="font-medium">{device.name}</p>
-                        <p className={`text-xs ${device.status === "online" ? "text-green-600" : "text-gray-500"}`}>
-                          {device.status === "online" ? "在线" : "离线"}
-                        </p>
-                      </div>
-                    </div>
-                    <Checkbox
-                      checked={selectedDevices.includes(device.id)}
-                      onCheckedChange={() => toggleDevice(device.id)}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="customerService" className="space-y-4">
-            <div className="grid grid-cols-1 gap-3">
-              {filteredCustomerServices.map(cs => (
-                <div
-                  key={cs.id}
-                  className={`cursor-pointer border rounded-lg p-3 ${selectedCustomerServices.includes(cs.id) ? "border-blue-500 bg-blue-50" : "border-gray-200"}`}
-                  onClick={() => toggleCustomerService(cs.id)}
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center space-x-3">
-                      <div className={`w-10 h-10 rounded-full flex items-center justify-center ${cs.status === "online" ? "bg-green-100" : "bg-gray-100"}`}>
-                        <span className={`text-sm font-medium ${cs.status === "online" ? "text-green-600" : "text-gray-600"}`}>
-                          {cs.name.substring(2, 3)}
-                        </span>
-                      </div>
-                      <div>
-                        <p className="font-medium">{cs.name}</p>
-                        <p className={`text-xs ${cs.status === "online" ? "text-green-600" : "text-gray-500"}`}>
-                          {cs.status === "online" ? "在线" : "离线"}
-                        </p>
-                      </div>
-                    </div>
-                    <Checkbox
-                      checked={selectedCustomerServices.includes(cs.id)}
-                      onCheckedChange={() => toggleCustomerService(cs.id)}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          </TabsContent>
-        </Tabs>
-
         <div className="mt-8 flex justify-between">
           <Button variant="outline" onClick={onBack}>
             ← 上一步
           </Button>
-          <Button onClick={handleSubmit}>
+          <Button onClick={handleSubmit} disabled={selectedDevices.length === 0}>
             下一步 →
           </Button>
         </div>