diff --git a/Cunkebao/app/workspace/moments-sync/components/device-selection-dialog.tsx b/Cunkebao/app/workspace/moments-sync/components/device-selection-dialog.tsx index eb88fe23..47feb6c5 100644 --- a/Cunkebao/app/workspace/moments-sync/components/device-selection-dialog.tsx +++ b/Cunkebao/app/workspace/moments-sync/components/device-selection-dialog.tsx @@ -1,81 +1,109 @@ "use client" -import { useState } from "react" -import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" +import { useState, useEffect } from "react" +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" -import { Search, RefreshCw } from "lucide-react" +import { Search, RefreshCw, Loader2 } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ScrollArea } from "@/components/ui/scroll-area" -import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" +import { Checkbox } from "@/components/ui/checkbox" +import { api } from "@/lib/api" +import { showToast } from "@/lib/toast" + +interface ServerDevice { + id: number + imei: string + memo: string + wechatId: string + alive: number + totalFriend: number +} interface Device { - id: string + id: number name: string imei: string wxid: string status: "online" | "offline" - usedInPlans: number + totalFriend: number } interface DeviceSelectionDialogProps { open: boolean onOpenChange: (open: boolean) => void - selectedDevices: string[] - onSelect: (devices: string[]) => void + selectedDevices: number[] + onSelect: (devices: number[]) => void } export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onSelect }: DeviceSelectionDialogProps) { const [searchQuery, setSearchQuery] = useState("") const [statusFilter, setStatusFilter] = useState("all") + const [devices, setDevices] = useState([]) + const [loading, setLoading] = useState(false) + const [tempSelectedDevices, setTempSelectedDevices] = useState(selectedDevices) - // 模拟设备数据 - const devices: Device[] = [ - { - id: "1", - name: "设备 1", - imei: "IMEI-radz6ewal", - wxid: "wxid_98179ujy", - status: "offline", - usedInPlans: 0, - }, - { - id: "2", - name: "设备 2", - imei: "IMEI-i6iszi6d", - wxid: "wxid_viqnaic8", - status: "online", - usedInPlans: 2, - }, - { - id: "3", - name: "设备 3", - imei: "IMEI-01z2izj97", - wxid: "wxid_9sb23gxr", - status: "online", - usedInPlans: 2, - }, - { - id: "4", - name: "设备 4", - imei: "IMEI-x6o9rpcr0", - wxid: "wxid_k0gxzbit", - status: "online", - usedInPlans: 1, - }, - ] + useEffect(() => { + if (open) { + setTempSelectedDevices(selectedDevices) + fetchDevices() + } + }, [open, selectedDevices]) - const filteredDevices = devices.filter((device) => { - const matchesSearch = + const fetchDevices = async () => { + const loadingToast = showToast("正在加载设备列表...", "loading", true); + try { + setLoading(true) + const response = await api.get<{code: number, msg: string, data: {list: ServerDevice[], total: number}}>('/v1/devices?page=1&limit=100') + + if (response.code === 200 && response.data.list) { + const transformedDevices: Device[] = response.data.list.map(device => ({ + id: device.id, + name: device.memo || device.imei || '', + imei: device.imei || '', + wxid: device.wechatId || '', + status: device.alive === 1 ? "online" : "offline", + totalFriend: device.totalFriend || 0 + })) + setDevices(transformedDevices) + } else { + showToast(response.msg || "获取设备列表失败", "error") + } + } catch (error: any) { + console.error('获取设备列表失败:', error) + showToast(error?.message || "请检查网络连接", "error") + } finally { + loadingToast.remove(); + setLoading(false) + } + } + + const handleRefresh = () => { + fetchDevices() + } + + const handleDeviceToggle = (deviceId: number, checked: boolean) => { + if (checked) { + setTempSelectedDevices(prev => [...prev, deviceId]) + } else { + setTempSelectedDevices(prev => prev.filter(id => id !== deviceId)) + } + } + + const handleConfirm = () => { + onSelect(tempSelectedDevices) + onOpenChange(false) + } + + // 过滤设备列表 + const filteredDevices = devices.filter(device => { + const matchesSearch = searchQuery === "" || 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") + + const matchesStatus = statusFilter === "all" || device.status === statusFilter return matchesSearch && matchesStatus }) @@ -107,38 +135,51 @@ export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onS 离线 - - - onSelect([value])}> - {filteredDevices.map((device) => ( -