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

构建完成

nkebao/src/components/FriendSelection.tsx

@@ -1,275 +1,275 @@
-import React, { useState, useEffect } from 'react';
-import { Search, X } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { get } from '@/api/request';
-
-// 微信好友接口类型
-interface WechatFriend {
-  id: string;
-  nickname: string;
-  wechatId: string;
-  avatar: string;
-  customer: string;
-}
-
-// 好友列表API响应类型
-interface FriendsResponse {
-  code: number;
-  msg: string;
-  data: {
-    list: Array<{
-      id: number;
-      nickname: string;
-      wechatId: string;
-      avatar?: string;
-      customer?: string;
-    }>;
-    total: number;
-    page: number;
-    limit: number;
-  };
-}
-
-// 获取好友列表API函数
-const fetchFriendsList = async (page: number = 1, limit: number = 20, deviceIds: string[]): Promise<FriendsResponse> => {
-  if (deviceIds.length === 0) {
-    return {
-      code: 200,
-      msg: 'success',
-      data: {
-        list: [],
-        total: 0,
-        page,
-        limit
-      }
-    };
-  }
-  
-  const deviceIdsParam = deviceIds.join(',');
-  return get<FriendsResponse>(`/v1/friend?page=${page}&limit=${limit}&deviceIds=${deviceIdsParam}`);
-};
-
-// 组件属性接口
-interface FriendSelectionProps {
-  selectedFriends: string[];
-  onSelect: (friends: string[]) => void;
-  deviceIds: string[];
-  placeholder?: string;
-  className?: string;
-}
-
-export default function FriendSelection({ 
-  selectedFriends, 
-  onSelect, 
-  deviceIds,
-  placeholder = "选择微信好友",
-  className = ""
-}: FriendSelectionProps) {
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [friends, setFriends] = useState<WechatFriend[]>([]);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
-  const [totalFriends, setTotalFriends] = useState(0);
-  const [loading, setLoading] = useState(false);
-
-  // 当弹窗打开时获取好友列表
-  useEffect(() => {
-    if (dialogOpen && deviceIds.length > 0) {
-      fetchFriends(currentPage);
-    }
-  }, [dialogOpen, currentPage, deviceIds]);
-
-  // 当设备ID变化时，重置页码
-  useEffect(() => {
-    if (deviceIds.length > 0) {
-      setCurrentPage(1);
-    }
-  }, [deviceIds]);
-
-  // 获取好友列表API
-  const fetchFriends = async (page: number) => {
-    if (deviceIds.length === 0) return;
-    
-    setLoading(true);
-    try {
-      const res = await fetchFriendsList(page, 20, deviceIds);
-      
-      if (res && res.code === 200 && res.data) {
-        setFriends(res.data.list.map((friend) => ({
-          id: friend.id?.toString() || '',
-          nickname: friend.nickname || '',
-          wechatId: friend.wechatId || '',
-          avatar: friend.avatar || '',
-          customer: friend.customer || '',
-        })));
-        
-        setTotalFriends(res.data.total || 0);
-        setTotalPages(Math.ceil((res.data.total || 0) / 20));
-      }
-    } catch (error) {
-      console.error('获取好友列表失败:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 过滤好友
-  const filteredFriends = friends.filter(friend =>
-    friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
-  );
-
-  // 处理好友选择
-  const handleFriendToggle = (friendId: string) => {
-    if (selectedFriends.includes(friendId)) {
-      onSelect(selectedFriends.filter(id => id !== friendId));
-    } else {
-      onSelect([...selectedFriends, friendId]);
-    }
-  };
-
-  // 获取显示文本
-  const getDisplayText = () => {
-    if (selectedFriends.length === 0) return '';
-    return `已选择 ${selectedFriends.length} 个好友`;
-  };
-
-  const handleConfirm = () => {
-    setDialogOpen(false);
-  };
-
-  return (
-    <>
-      {/* 输入框 */}
-      <div className={`relative ${className}`}>
-        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
-          <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-          </svg>
-        </span>
-        <Input
-          placeholder={placeholder}
-          className="pl-10 h-12 rounded-xl border-gray-200 text-base"
-          readOnly
-          onClick={() => setDialogOpen(true)}
-          value={getDisplayText()}
-        />
-      </div>
-
-      {/* 微信好友选择弹窗 */}
-      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent className="max-w-xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
-          <div className="p-6">
-            <DialogTitle className="text-center text-xl font-medium mb-6">选择微信好友</DialogTitle>
-            
-            <div className="relative mb-4">
-              <Input
-                placeholder="搜索好友"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10 py-2 rounded-full border-gray-200"
-              />
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
-              <Button 
-                variant="ghost" 
-                size="icon" 
-                className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 rounded-full"
-                onClick={() => setSearchQuery('')}
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
-
-          <ScrollArea className="flex-1 overflow-y-auto">
-            {loading ? (
-              <div className="flex items-center justify-center h-full">
-                <div className="text-gray-500">加载中...</div>
-              </div>
-            ) : filteredFriends.length > 0 ? (
-              <div className="divide-y">
-                {filteredFriends.map((friend) => (
-                  <label
-                    key={friend.id}
-                    className="flex items-center px-6 py-4 hover:bg-gray-50 cursor-pointer"
-                    onClick={() => handleFriendToggle(friend.id)}
-                  >
-                    <div className="mr-3 flex items-center justify-center">
-                      <div className={`w-5 h-5 rounded-full border ${selectedFriends.includes(friend.id) ? 'border-blue-600' : 'border-gray-300'} flex items-center justify-center`}>
-                        {selectedFriends.includes(friend.id) && (
-                          <div className="w-3 h-3 rounded-full bg-blue-600"></div>
-                        )}
-                      </div>
-                    </div>
-                    <div className="flex items-center space-x-3 flex-1">
-                      <div className="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium overflow-hidden">
-                        {friend.avatar ? (
-                          <img src={friend.avatar} alt={friend.nickname} className="w-full h-full object-cover" />
-                        ) : (
-                          friend.nickname.charAt(0)
-                        )}
-                      </div>
-                      <div className="flex-1">
-                        <div className="font-medium">{friend.nickname}</div>
-                        <div className="text-sm text-gray-500">微信ID: {friend.wechatId}</div>
-                        {friend.customer && (
-                          <div className="text-sm text-gray-400">归属客户: {friend.customer}</div>
-                        )}
-                      </div>
-                    </div>
-                  </label>
-                ))}
-              </div>
-            ) : (
-              <div className="flex items-center justify-center h-full">
-                <div className="text-gray-500">
-                  {deviceIds.length === 0 ? '请先选择设备' : '没有找到好友'}
-                </div>
-              </div>
-            )}
-          </ScrollArea>
-
-          <div className="border-t p-4 flex items-center justify-between bg-white">
-            <div className="text-sm text-gray-500">
-              总计 {totalFriends} 个好友
-            </div>
-            <div className="flex items-center space-x-2">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-                disabled={currentPage === 1 || loading}
-                className="px-2 py-0 h-8 min-w-0"
-              >
-                &lt;
-              </Button>
-              <span className="text-sm">{currentPage} / {totalPages}</span>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
-                disabled={currentPage === totalPages || loading}
-                className="px-2 py-0 h-8 min-w-0"
-              >
-                &gt;
-              </Button>
-            </div>
-          </div>
-
-          <div className="border-t p-4 flex items-center justify-between bg-white">
-            <Button variant="outline" onClick={() => setDialogOpen(false)} className="px-6 rounded-full border-gray-300">
-              取消
-            </Button>
-            <Button onClick={handleConfirm} className="px-6 bg-blue-600 hover:bg-blue-700 rounded-full">
-              确定 ({selectedFriends.length})
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
+import React, { useState, useEffect } from 'react';
+import { Search, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { get } from '@/api/request';
+
+// 微信好友接口类型
+interface WechatFriend {
+  id: string;
+  nickname: string;
+  wechatId: string;
+  avatar: string;
+  customer: string;
+}
+
+// 好友列表API响应类型
+interface FriendsResponse {
+  code: number;
+  msg: string;
+  data: {
+    list: Array<{
+      id: number;
+      nickname: string;
+      wechatId: string;
+      avatar?: string;
+      customer?: string;
+    }>;
+    total: number;
+    page: number;
+    limit: number;
+  };
+}
+
+// 获取好友列表API函数
+const fetchFriendsList = async (page: number = 1, limit: number = 20, deviceIds: string[]): Promise<FriendsResponse> => {
+  if (deviceIds.length === 0) {
+    return {
+      code: 200,
+      msg: 'success',
+      data: {
+        list: [],
+        total: 0,
+        page,
+        limit
+      }
+    };
+  }
+  
+  const deviceIdsParam = deviceIds.join(',');
+  return get<FriendsResponse>(`/v1/friend?page=${page}&limit=${limit}&deviceIds=${deviceIdsParam}`);
+};
+
+// 组件属性接口
+interface FriendSelectionProps {
+  selectedFriends: string[];
+  onSelect: (friends: string[]) => void;
+  deviceIds: string[];
+  placeholder?: string;
+  className?: string;
+}
+
+export default function FriendSelection({ 
+  selectedFriends, 
+  onSelect, 
+  deviceIds,
+  placeholder = "选择微信好友",
+  className = ""
+}: FriendSelectionProps) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [friends, setFriends] = useState<WechatFriend[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalFriends, setTotalFriends] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  // 当弹窗打开时获取好友列表
+  useEffect(() => {
+    if (dialogOpen && deviceIds.length > 0) {
+      fetchFriends(currentPage);
+    }
+  }, [dialogOpen, currentPage, deviceIds]);
+
+  // 当设备ID变化时，重置页码
+  useEffect(() => {
+    if (deviceIds.length > 0) {
+      setCurrentPage(1);
+    }
+  }, [deviceIds]);
+
+  // 获取好友列表API
+  const fetchFriends = async (page: number) => {
+    if (deviceIds.length === 0) return;
+    
+    setLoading(true);
+    try {
+      const res = await fetchFriendsList(page, 20, deviceIds);
+      
+      if (res && res.code === 200 && res.data) {
+        setFriends(res.data.list.map((friend) => ({
+          id: friend.id?.toString() || '',
+          nickname: friend.nickname || '',
+          wechatId: friend.wechatId || '',
+          avatar: friend.avatar || '',
+          customer: friend.customer || '',
+        })));
+        
+        setTotalFriends(res.data.total || 0);
+        setTotalPages(Math.ceil((res.data.total || 0) / 20));
+      }
+    } catch (error) {
+      console.error('获取好友列表失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 过滤好友
+  const filteredFriends = friends.filter(friend =>
+    friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // 处理好友选择
+  const handleFriendToggle = (friendId: string) => {
+    if (selectedFriends.includes(friendId)) {
+      onSelect(selectedFriends.filter(id => id !== friendId));
+    } else {
+      onSelect([...selectedFriends, friendId]);
+    }
+  };
+
+  // 获取显示文本
+  const getDisplayText = () => {
+    if (selectedFriends.length === 0) return '';
+    return `已选择 ${selectedFriends.length} 个好友`;
+  };
+
+  const handleConfirm = () => {
+    setDialogOpen(false);
+  };
+
+  return (
+    <>
+      {/* 输入框 */}
+      <div className={`relative ${className}`}>
+        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+          <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+        </span>
+        <Input
+          placeholder={placeholder}
+          className="pl-10 h-12 rounded-xl border-gray-200 text-base"
+          readOnly
+          onClick={() => setDialogOpen(true)}
+          value={getDisplayText()}
+        />
+      </div>
+
+      {/* 微信好友选择弹窗 */}
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="max-w-xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+          <div className="p-6">
+            <DialogTitle className="text-center text-xl font-medium mb-6">选择微信好友</DialogTitle>
+            
+            <div className="relative mb-4">
+              <Input
+                placeholder="搜索好友"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10 py-2 rounded-full border-gray-200"
+              />
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+              <Button 
+                variant="ghost" 
+                size="icon" 
+                className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 rounded-full"
+                onClick={() => setSearchQuery('')}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          <ScrollArea className="flex-1 overflow-y-auto">
+            {loading ? (
+              <div className="flex items-center justify-center h-full">
+                <div className="text-gray-500">加载中...</div>
+              </div>
+            ) : filteredFriends.length > 0 ? (
+              <div className="divide-y">
+                {filteredFriends.map((friend) => (
+                  <label
+                    key={friend.id}
+                    className="flex items-center px-6 py-4 hover:bg-gray-50 cursor-pointer"
+                    onClick={() => handleFriendToggle(friend.id)}
+                  >
+                    <div className="mr-3 flex items-center justify-center">
+                      <div className={`w-5 h-5 rounded-full border ${selectedFriends.includes(friend.id) ? 'border-blue-600' : 'border-gray-300'} flex items-center justify-center`}>
+                        {selectedFriends.includes(friend.id) && (
+                          <div className="w-3 h-3 rounded-full bg-blue-600"></div>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-3 flex-1">
+                      <div className="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium overflow-hidden">
+                        {friend.avatar ? (
+                          <img src={friend.avatar} alt={friend.nickname} className="w-full h-full object-cover" />
+                        ) : (
+                          friend.nickname.charAt(0)
+                        )}
+                      </div>
+                      <div className="flex-1">
+                        <div className="font-medium">{friend.nickname}</div>
+                        <div className="text-sm text-gray-500">微信ID: {friend.wechatId}</div>
+                        {friend.customer && (
+                          <div className="text-sm text-gray-400">归属客户: {friend.customer}</div>
+                        )}
+                      </div>
+                    </div>
+                  </label>
+                ))}
+              </div>
+            ) : (
+              <div className="flex items-center justify-center h-full">
+                <div className="text-gray-500">
+                  {deviceIds.length === 0 ? '请先选择设备' : '没有找到好友'}
+                </div>
+              </div>
+            )}
+          </ScrollArea>
+
+          <div className="border-t p-4 flex items-center justify-between bg-white">
+            <div className="text-sm text-gray-500">
+              总计 {totalFriends} 个好友
+            </div>
+            <div className="flex items-center space-x-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+                disabled={currentPage === 1 || loading}
+                className="px-2 py-0 h-8 min-w-0"
+              >
+                &lt;
+              </Button>
+              <span className="text-sm">{currentPage} / {totalPages}</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+                disabled={currentPage === totalPages || loading}
+                className="px-2 py-0 h-8 min-w-0"
+              >
+                &gt;
+              </Button>
+            </div>
+          </div>
+
+          <div className="border-t p-4 flex items-center justify-between bg-white">
+            <Button variant="outline" onClick={() => setDialogOpen(false)} className="px-6 rounded-full border-gray-300">
+              取消
+            </Button>
+            <Button onClick={handleConfirm} className="px-6 bg-blue-600 hover:bg-blue-700 rounded-full">
+              确定 ({selectedFriends.length})
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
 } 

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>