diff --git a/nkebao/src/components/DeviceSelection.tsx b/nkebao/src/components/DeviceSelection.tsx index 79fcdca8..4c670af0 100644 --- a/nkebao/src/components/DeviceSelection.tsx +++ b/nkebao/src/components/DeviceSelection.tsx @@ -41,18 +41,11 @@ export default function DeviceSelection({ const [statusFilter, setStatusFilter] = useState("all"); const [loading, setLoading] = useState(false); - // 当弹窗打开时获取设备列表 - useEffect(() => { - if (dialogOpen) { - fetchDevices(); - } - }, [dialogOpen]); - - // 获取设备列表 - const fetchDevices = async () => { + // 获取设备列表,支持keyword + const fetchDevices = async (keyword: string = "") => { setLoading(true); try { - const res = await fetchDeviceList(1, 100); + const res = await fetchDeviceList(1, 100, keyword.trim() || undefined); if (res && res.data && Array.isArray(res.data.list)) { setDevices( res.data.list.map((d) => ({ @@ -71,19 +64,29 @@ export default function DeviceSelection({ } }; - // 过滤设备 - 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 openDialog = () => { + setSearchQuery(""); + setDialogOpen(true); + fetchDevices(""); + }; + // 搜索防抖 + useEffect(() => { + if (!dialogOpen) return; + const timer = setTimeout(() => { + fetchDevices(searchQuery); + }, 500); + return () => clearTimeout(timer); + }, [searchQuery, dialogOpen]); + + // 过滤设备(只保留状态过滤) + const filteredDevices = devices.filter((device) => { const matchesStatus = statusFilter === "all" || (statusFilter === "online" && device.status === "online") || (statusFilter === "offline" && device.status === "offline"); - - return matchesSearch && matchesStatus; + return matchesStatus; }); // 处理设备选择 @@ -110,7 +113,7 @@ export default function DeviceSelection({ placeholder={placeholder} className="pl-10 h-14 rounded-xl border-gray-200 text-base" readOnly - onClick={() => setDialogOpen(true)} + onClick={openDialog} value={getDisplayText()} /> diff --git a/nkebao/src/components/DeviceSelectionDialog.tsx b/nkebao/src/components/DeviceSelectionDialog.tsx index 2ecc2950..67f4d1d0 100644 --- a/nkebao/src/components/DeviceSelectionDialog.tsx +++ b/nkebao/src/components/DeviceSelectionDialog.tsx @@ -42,62 +42,74 @@ export function DeviceSelectionDialog({ const [loading, setLoading] = useState(false); const [devices, setDevices] = useState([]); - // 获取设备列表 - const fetchDevices = useCallback(async () => { - setLoading(true); - try { - const response = await fetchDeviceList(1, 100, searchQuery); - if (response.code === 200 && response.data) { - // 转换服务端数据格式为组件需要的格式 - const convertedDevices: Device[] = response.data.list.map( - (serverDevice: ServerDevice) => ({ - id: serverDevice.id.toString(), - name: serverDevice.memo || `设备 ${serverDevice.id}`, - imei: serverDevice.imei, - wxid: serverDevice.wechatId || "", - status: serverDevice.alive === 1 ? "online" : "offline", - usedInPlans: 0, // 这个字段需要从其他API获取 - nickname: serverDevice.nickname || "", - }) + // 获取设备列表,支持keyword + const fetchDevices = useCallback( + async (keyword: string = "") => { + setLoading(true); + try { + const response = await fetchDeviceList( + 1, + 100, + keyword.trim() || undefined ); - setDevices(convertedDevices); - } else { + if (response.code === 200 && response.data) { + // 转换服务端数据格式为组件需要的格式 + const convertedDevices: Device[] = response.data.list.map( + (serverDevice: ServerDevice) => ({ + id: serverDevice.id.toString(), + name: serverDevice.memo || `设备 ${serverDevice.id}`, + imei: serverDevice.imei, + wxid: serverDevice.wechatId || "", + status: serverDevice.alive === 1 ? "online" : "offline", + usedInPlans: 0, // 这个字段需要从其他API获取 + nickname: serverDevice.nickname || "", + }) + ); + setDevices(convertedDevices); + } else { + toast({ + title: "获取设备列表失败", + description: response.msg, + variant: "destructive", + }); + } + } catch (error) { + console.error("获取设备列表失败:", error); toast({ title: "获取设备列表失败", - description: response.msg, + description: "请检查网络连接", variant: "destructive", }); + } finally { + setLoading(false); } - } catch (error) { - console.error("获取设备列表失败:", error); - toast({ - title: "获取设备列表失败", - description: "请检查网络连接", - variant: "destructive", - }); - } finally { - setLoading(false); - } - }, [searchQuery, toast]); + }, + [toast] + ); + // 打开弹窗时获取设备列表 useEffect(() => { if (open) { - fetchDevices(); + fetchDevices(""); } - }, [open, searchQuery, fetchDevices]); + }, [open, fetchDevices]); + // 搜索防抖 + useEffect(() => { + if (!open) return; + const timer = setTimeout(() => { + fetchDevices(searchQuery); + }, 500); + return () => clearTimeout(timer); + }, [searchQuery, open, fetchDevices]); + + // 过滤设备(只保留状态过滤) const filteredDevices = devices.filter((device) => { - const matchesSearch = - device.name.toLowerCase().includes(searchQuery.toLowerCase()) || - device.imei.toLowerCase().includes(searchQuery.toLowerCase()) || - device.wxid.toLowerCase().includes(searchQuery.toLowerCase()); - const matchesStatus = statusFilter === "all" || (statusFilter === "online" && device.status === "online") || (statusFilter === "offline" && device.status === "offline"); - - return matchesSearch && matchesStatus; + return matchesStatus; }); const handleDeviceSelect = (deviceId: string) => { @@ -137,7 +149,7 @@ export function DeviceSelectionDialog({ - +
+ +
} > -
+
- + setForm(f => ({ ...f, name: e.target.value }))} + onChange={(e) => + setForm((f) => ({ ...f, name: e.target.value })) + } placeholder="请输入内容库名称" required />
- setForm(f => ({ ...f, sourceType: val as 'friends' | 'groups' }))}> + + setForm((f) => ({ + ...f, + sourceType: val as "friends" | "groups", + })) + } + > 选择微信好友 选择聊天群 f.id)} - onSelect={ids => setForm(f => ({ - ...f, - selectedFriends: ids.map(id => ({ id, nickname: id, avatar: '' })) - }))} + selectedFriends={form.selectedFriends.map((f) => f.id)} + onSelect={(ids) => + setForm((f) => ({ + ...f, + selectedFriends: ids.map((id) => ({ + id, + nickname: id, + avatar: "", + })), + })) + } onSelectDetail={setSelectedFriendObjs} enableDeviceFilter={false} placeholder="选择微信好友" /> {selectedFriendObjs.length > 0 && (
- {selectedFriendObjs.map(friend => ( -
+ {selectedFriendObjs.map((friend) => ( +
{friend.avatar ? ( - {friend.nickname} + {friend.nickname} ) : ( -
{friend.nickname?.charAt(0) || '友'}
+
+ {friend.nickname?.charAt(0) || "友"} +
)} {friend.nickname}