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

组件封装完成

nkebao/src/components/DeviceSelection.tsx

@@ -0,0 +1,194 @@
+import React, { useState, useEffect } from 'react';
+import { Search } 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 { fetchDeviceList } from '@/api/devices';
+
+// 设备选择项接口
+interface DeviceSelectionItem {
+  id: string;
+  name: string;
+  imei: string;
+  wechatId: string;
+  status: 'online' | 'offline';
+}
+
+// 组件属性接口
+interface DeviceSelectionProps {
+  selectedDevices: string[];
+  onSelect: (devices: string[]) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export default function DeviceSelection({ 
+  selectedDevices, 
+  onSelect, 
+  placeholder = "选择设备",
+  className = ""
+}: DeviceSelectionProps) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [devices, setDevices] = useState<DeviceSelectionItem[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [loading, setLoading] = useState(false);
+
+  // 当弹窗打开时获取设备列表
+  useEffect(() => {
+    if (dialogOpen) {
+      fetchDevices();
+    }
+  }, [dialogOpen]);
+
+  // 获取设备列表
+  const fetchDevices = async () => {
+    setLoading(true);
+    try {
+      const res = await fetchDeviceList(1, 100);
+      if (res && res.data && Array.isArray(res.data.list)) {
+        setDevices(res.data.list.map(d => ({
+          id: d.id?.toString() || '',
+          name: d.memo || d.imei || '',
+          imei: d.imei || '',
+          wechatId: d.wechatId || '',
+          status: d.alive === 1 ? 'online' : 'offline',
+        })));
+      }
+    } catch (error) {
+      console.error('获取设备列表失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 过滤设备
+  const filteredDevices = devices.filter((device) => {
+    const matchesSearch =
+      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.wechatId.toLowerCase().includes(searchQuery.toLowerCase());
+
+    const matchesStatus =
+      statusFilter === 'all' ||
+      (statusFilter === 'online' && device.status === 'online') ||
+      (statusFilter === 'offline' && device.status === 'offline');
+
+    return matchesSearch && matchesStatus;
+  });
+
+  // 处理设备选择
+  const handleDeviceToggle = (deviceId: string) => {
+    if (selectedDevices.includes(deviceId)) {
+      onSelect(selectedDevices.filter(id => id !== deviceId));
+    } else {
+      onSelect([...selectedDevices, deviceId]);
+    }
+  };
+
+  // 获取显示文本
+  const getDisplayText = () => {
+    if (selectedDevices.length === 0) return '';
+    return `已选择 ${selectedDevices.length} 个设备`;
+  };
+
+  return (
+    <>
+      {/* 输入框 */}
+      <div className={`relative ${className}`}>
+        <Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
+        <Input
+          placeholder={placeholder}
+          className="pl-10 h-14 rounded-xl border-gray-200 text-base"
+          readOnly
+          onClick={() => setDialogOpen(true)}
+          value={getDisplayText()}
+        />
+      </div>
+
+   
+      {/* 设备选择弹窗 */}
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
+          <DialogHeader>
+            <DialogTitle>选择设备</DialogTitle>
+          </DialogHeader>
+
+          <div className="flex items-center space-x-4 my-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+              <Input
+                placeholder="搜索设备IMEI/备注/微信号"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+            <select
+              value={statusFilter}
+              onChange={e => setStatusFilter(e.target.value)}
+              className="w-32 h-10 rounded border border-gray-300 px-2 text-base"
+            >
+              <option value="all">全部状态</option>
+              <option value="online">在线</option>
+              <option value="offline">离线</option>
+            </select>
+          </div>
+
+          <ScrollArea className="flex-1 -mx-6 px-6 h-80 overflow-y-auto">
+            {loading ? (
+              <div className="flex items-center justify-center h-full">
+                <div className="text-gray-500">加载中...</div>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {filteredDevices.map((device) => (
+                  <label
+                    key={device.id}
+                    className="flex items-start space-x-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer"
+                  >
+                    <Checkbox
+                      checked={selectedDevices.includes(device.id)}
+                      onCheckedChange={() => handleDeviceToggle(device.id)}
+                      className="mt-1"
+                    />
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between">
+                        <span className="font-medium">{device.name}</span>
+                        <div className={`w-16 h-6 flex items-center justify-center text-xs ${
+                          device.status === 'online' ? 'bg-green-500 text-white' : 'bg-gray-200 text-gray-600'
+                        }`}>
+                          {device.status === 'online' ? '在线' : '离线'}
+                        </div>
+                      </div>
+                      <div className="text-sm text-gray-500 mt-1">
+                        <div>IMEI: {device.imei}</div>
+                        <div>微信号: {device.wechatId}</div>
+                      </div>
+                    </div>
+                  </label>
+                ))}
+              </div>
+            )}
+          </ScrollArea>
+
+          <div className="flex items-center justify-between pt-4 border-t">
+            <div className="text-sm text-gray-500">
+              已选择 {selectedDevices.length} 个设备
+            </div>
+            <div className="flex space-x-2">
+              <Button variant="outline" onClick={() => setDialogOpen(false)}>
+                取消
+              </Button>
+              <Button onClick={() => setDialogOpen(false)}>
+                确定
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+} 

nkebao/src/components/FriendSelection.tsx

@@ -0,0 +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>
+    </>
+  );
+} 

nkebao/src/pages/workspace/auto-like/NewAutoLike.tsx

@@ -1,82 +1,22 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { ChevronLeft, Search, Plus, Minus, Check, X, Tag as TagIcon } from 'lucide-react';
+import { ChevronLeft,Plus, Minus, Check, X, Tag as TagIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
-import { Badge } from '@/components/ui/badge';
-import { Card, CardContent } from '@/components/ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Checkbox } from '@/components/ui/checkbox';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-
 import { createAutoLikeTask, updateAutoLikeTask, fetchAutoLikeTaskDetail } from '@/api/autoLike';
 import { ContentType } from '@/types/auto-like';
 import { useToast } from '@/components/ui/toast';
 import Layout from '@/components/Layout';
-import { fetchDeviceList } from '@/api/devices';
-
-import { get } from '@/api/request';
+import DeviceSelection from '@/components/DeviceSelection';
+import FriendSelection from '@/components/FriendSelection';
 
 
 
-// 用于设备选择弹窗的简化设备类型
-interface DeviceSelectionItem {
-  id: string;
-  name: string;
-  imei: string;
-  wechatId: string;
-  status: 'online' | 'offline';
-}
 
-// 微信好友接口类型
-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}`);
-};
 
 // 修改CreateLikeTaskData接口，确保friends字段不是可选的
 interface CreateLikeTaskDataLocal {
@@ -100,8 +40,6 @@ export default function NewAutoLike() {
   const isEditMode = !!id;
   const { toast } = useToast();
   const [currentStep, setCurrentStep] = useState(1);
-  const [deviceDialogOpen, setDeviceDialogOpen] = useState(false);
-  const [friendDialogOpen, setFriendDialogOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoading, setIsLoading] = useState(isEditMode);
   const [formData, setFormData] = useState<CreateLikeTaskDataLocal>({
@@ -120,22 +58,6 @@ export default function NewAutoLike() {
   });
   // 新增自动开启的独立状态
   const [autoEnabled, setAutoEnabled] = useState(false);
-  const [devices, setDevices] = useState<DeviceSelectionItem[]>([]);
-
-  // 获取设备列表
-  useEffect(() => {
-    fetchDeviceList(1, 100).then(res => {
-      if (res && res.data && Array.isArray(res.data.list)) {
-        setDevices(res.data.list.map(d => ({
-          id: d.id?.toString() || '',
-          name: d.memo || d.imei || '',
-          imei: d.imei || '',
-          wechatId: d.wechatId || '',
-          status: d.alive === 1 ? 'online' : 'offline',
-        })));
-      }
-    });
-  }, []);
 
   // 如果是编辑模式，获取任务详情
   useEffect(() => {
@@ -308,42 +230,11 @@ export default function NewAutoLike() {
 
             {currentStep === 2 && (
               <div className="space-y-6 px-6">
-                <div className="relative">
-                  <Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
-            <Input
-                    placeholder="选择设备"
-                    className="pl-10 h-14 rounded-xl border-gray-200 text-base"
-                    readOnly
-                    onClick={() => setDeviceDialogOpen(true)}
-                    value={formData.devices.length > 0 ? `已选择 ${formData.devices.length} 个设备` : ''}
-                  />
-                </div>
-
-                {formData.devices.length > 0 && (
-                  <div className="bg-white p-4 rounded-xl shadow-sm">
-                    <h3 className="font-medium mb-2">已选择的设备</h3>
-                    <div className="space-y-2">
-                      {formData.devices.map(deviceId => {
-                        const device = devices.find(d => d.id === deviceId);
-                        if (!device) return null;
-                        return (
-                          <div key={deviceId} className="flex flex-col p-2 border rounded-lg">
-                            <div className="flex items-center justify-between">
-                              <div className="font-medium">{device.name}</div>
-                              <div className={`w-10 rounded-full h-6 flex items-center justify-center text-xs ${device.status === 'online' ? 'bg-green-500 text-white' : 'bg-gray-200 text-gray-600'}`}>
-                                {device.status === 'online' ? '在线' : '离线'}
-                              </div>
-                            </div>
-                            <div className="text-sm text-gray-500 mt-1">
-                              <div>IMEI: {device.imei}</div>
-                              <div>微信号: {device.wechatId}</div>
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </div>
-                )}
+                <DeviceSelection
+                  selectedDevices={formData.devices}
+                  onSelect={(devices) => handleUpdateFormData({ devices })}
+                  placeholder="选择设备"
+                />
 
                 <div className="flex space-x-4">
                   <Button variant="outline" className="flex-1 h-12 rounded-xl text-base" onClick={handlePrev}>
@@ -357,33 +248,18 @@ export default function NewAutoLike() {
                     下一步
                   </Button>
                 </div>
-
-                <DeviceSelectionDialog
-                  open={deviceDialogOpen}
-                  onOpenChange={setDeviceDialogOpen}
-                  selectedDevices={formData.devices}
-                  onSelect={(devices) => handleUpdateFormData({ devices })}
-                  devices={devices}
-                />
               </div>
             )}
 
             {currentStep === 3 && (
-              <div className="px-6">
-                <div className="mb-6">
-                  <div className="relative">
-                    <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="选择微信好友"
-                      className="pl-10 h-12 rounded-xl border-gray-200 text-base"
-                      readOnly
-                      onClick={() => setFriendDialogOpen(true)}
-                      value={formData.friends && formData.friends.length > 0 ? `已选择 ${formData.friends.length} 个好友` : ''}
-                    />
-                  </div>
-                </div>
+              <div className="px-6 space-y-6">
+                <FriendSelection
+                  selectedFriends={formData.friends || []}
+                  onSelect={(friends) => handleUpdateFormData({ friends })}
+                  deviceIds={formData.devices}
+                  placeholder="选择微信好友"
+                />
+                
                 <div className="flex space-x-4">
                   <Button variant="outline" className="flex-1 h-12 rounded-xl text-base" onClick={handlePrev}>
                     上一步
@@ -392,14 +268,7 @@ export default function NewAutoLike() {
                     完成
                   </Button>
                 </div>
-                <FriendSelectionDialog
-                  open={friendDialogOpen}
-                  onOpenChange={setFriendDialogOpen}
-                  selectedFriends={formData.friends || []}
-                  onSelect={(friends) => handleUpdateFormData({ friends })}
-                  deviceIds={formData.devices}
-                />
-            </div>
+              </div>
             )}
           </div>
         </div>
@@ -676,304 +545,8 @@ function BasicSettings({ formData, onChange, onNext, autoEnabled, setAutoEnabled
   );
 }
 
-// 设备选择对话框组件
-interface DeviceSelectionDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  selectedDevices: string[];
-  onSelect: (devices: string[]) => void;
-  devices: DeviceSelectionItem[];
-}
 
-function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onSelect, devices }: DeviceSelectionDialogProps) {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-
-  const filteredDevices = devices.filter((device) => {
-    const matchesSearch =
-      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      device.wechatId.toLowerCase().includes(searchQuery.toLowerCase());
-
-    const matchesStatus =
-      statusFilter === 'all' ||
-      (statusFilter === 'online' && device.status === 'online') ||
-      (statusFilter === 'offline' && device.status === 'offline');
-
-    return matchesSearch && matchesStatus;
-  });
-
-  // 处理设备选择
-  const handleDeviceToggle = (deviceId: string) => {
-    if (selectedDevices.includes(deviceId)) {
-      onSelect(selectedDevices.filter(id => id !== deviceId));
-    } else {
-      onSelect([...selectedDevices, deviceId]);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>选择设备</DialogTitle>
-        </DialogHeader>
-
-        <div className="flex items-center space-x-4 my-4">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
-            <Input
-              placeholder="搜索设备IMEI/备注/微信号"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-9"
-            />
-          </div>
-          <select
-            value={statusFilter}
-            onChange={e => setStatusFilter(e.target.value)}
-            className="w-32 h-10 rounded border border-gray-300 px-2 text-base"
-          >
-            <option value="all">全部状态</option>
-            <option value="online">在线</option>
-            <option value="offline">离线</option>
-          </select>
-        </div>
-
-        <ScrollArea className="flex-1 -mx-6 px-6 h-80 overflow-y-auto">
-          <div className="space-y-2">
-            {filteredDevices.map((device) => (
-              <label
-                key={device.id}
-                className="flex items-start space-x-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer"
-              >
-                <Checkbox
-                  checked={selectedDevices.includes(device.id)}
-                  onCheckedChange={() => handleDeviceToggle(device.id)}
-                  className="mt-1"
-                />
-                <div className="flex-1">
-                  <div className="flex items-center justify-between">
-                    <span className="font-medium">{device.name}</span>
-                    <div className={`w-16 h-6 flex items-center justify-center text-xs ${device.status === 'online' ? 'bg-green-500 text-white' : 'bg-gray-200 text-gray-600'}`}>
-                      {device.status === 'online' ? '在线' : '离线'}
-                    </div>
-                  </div>
-                  <div className="text-sm text-gray-500 mt-1">
-                    <div>IMEI: {device.imei}</div>
-                    <div>微信号: {device.wechatId}</div>
-                  </div>
-                </div>
-              </label>
-            ))}
-          </div>
-        </ScrollArea>
-        <div className="flex items-center justify-between pt-4 border-t">
-          <div className="text-sm text-gray-500">
-            已选择 {selectedDevices.length} 个设备
-          </div>
-          <div className="flex space-x-2">
-            <Button variant="outline" onClick={() => onOpenChange(false)}>
-              取消
-            </Button>
-            <Button onClick={() => onOpenChange(false)}>
-              确定
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
 
  
 
-// 微信好友选择弹窗组件
-interface FriendSelectionDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  selectedFriends: string[];
-  onSelect: (friends: string[]) => void;
-  deviceIds: string[];
-}
-
-function FriendSelectionDialog({ open, onOpenChange, selectedFriends = [], onSelect, deviceIds }: FriendSelectionDialogProps) {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
-  const [totalFriends, setTotalFriends] = useState(0);
-  const [friends, setFriends] = useState<WechatFriend[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  // 获取好友列表
-  useEffect(() => {
-    if (open && deviceIds.length > 0) {
-      fetchFriends(currentPage);
-    }
-  }, [open, 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 handleConfirm = () => {
-    onOpenChange(false);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
-        <div >
-          <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={() => onOpenChange(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

@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Steps, StepItem } from 'tdesign-mobile-react';
 import {
   Users,
   Search,
   Database,
-  Plus,
   X,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -16,39 +16,32 @@ 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 BottomNav from '@/components/BottomNav';
 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 Step {
-  id: number;
-  title: string;
-  icon: React.ReactNode;
-}
+// 移除原来的步骤指示器组件
+// 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;
@@ -114,7 +107,7 @@ const AccountSelectionDialog = ({
   const { toast } = useToast();
 
   // 获取账号列表
-  const fetchAccounts = async (pageNum: number = 1, reset: boolean = true) => {
+  const fetchAccounts = useCallback(async (pageNum: number = 1, reset: boolean = true) => {
     setLoading(true);
     try {
       const response = await fetchAccountList({
@@ -180,7 +173,7 @@ const AccountSelectionDialog = ({
     } finally {
       setLoading(false);
     }
-  };
+  }, [accounts.length, toast]);
 
   useEffect(() => {
     if (open) {
@@ -188,7 +181,7 @@ const AccountSelectionDialog = ({
       fetchAccounts(1, true);
       setPage(1);
     }
-  }, [open, selectedAccounts]);
+  }, [open, selectedAccounts, fetchAccounts]);
 
   const toggleAccount = (id: string) => {
     setTempSelectedAccounts(prev =>
@@ -314,10 +307,10 @@ export default function NewDistribution() {
     trafficPool: {},
   });
 
-  const steps: Step[] = [
-    { id: 1, title: "基本信息", icon: <Plus /> },
-    { id: 2, title: "目标设置", icon: <Users /> },
-    { id: 3, title: "流量池选择", icon: <Database /> },
+  const steps = [
+    { title: "基本信息", content: "step1" },
+    { title: "目标设置", content: "step2" },
+    { title: "流量池选择", content: "step3" },
   ];
 
   // 生成默认计划名称
@@ -873,7 +866,13 @@ export default function NewDistribution() {
     >
       <div className="bg-gray-50 min-h-screen pb-16">
         <div className="p-4">
-          <StepIndicator currentStep={currentStep} steps={steps} />
+          <div className="mb-6">
+            <Steps current={currentStep}>
+              {steps.map((step, index) => (
+                <StepItem key={index} title={step.title} />
+              ))}
+            </Steps>
+          </div>
           
           {currentStep === 0 && (
             <BasicInfoStep