代码优化提交

Cunkebao/app/workspace/moments-sync/components/device-selection-dialog.tsx

@@ -1,51 +1,58 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { Search, RefreshCw, Loader2 } from "lucide-react"
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Label } from "@/components/ui/label"
 import { Badge } from "@/components/ui/badge"
+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 { 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
-  wechatId: string
-  memo?: string
-  alive: number
-  usedInPlans: number
-  lastActiveTime: string
+  wxid: string
+  status: "online" | "offline"
+  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) {
+export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onSelect }: DeviceSelectionDialogProps) {
   const [searchQuery, setSearchQuery] = useState("")
   const [statusFilter, setStatusFilter] = useState("all")
-  const [loading, setLoading] = useState(false)
   const [devices, setDevices] = useState<Device[]>([])
-  const [tempSelected, setTempSelected] = useState<string[]>([])
+  const [loading, setLoading] = useState(false)
+  const [tempSelectedDevices, setTempSelectedDevices] = useState<number[]>(selectedDevices)
+
+  useEffect(() => {
+    if (open) {
+      setTempSelectedDevices(selectedDevices)
+      fetchDevices()
+    }
+  }, [open, selectedDevices])
 
-  // 获取设备列表
   const fetchDevices = async () => {
-    setLoading(true)
+    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')
@@ -53,86 +60,78 @@ export function DeviceSelectionDialog({
       if (response.code === 200 && response.data.list) {
         const transformedDevices: Device[] = response.data.list.map(device => ({
           id: device.id,
-          name: device.memo || "未命名设备",
+          name: device.memo || '设备_' + device.id,
           imei: device.imei || '',
-          wxid: device.wechatId || '',
+          wxid: device.alias || device.wechatId || '',
           status: device.alive === 1 ? "online" : "offline",
-          totalFriend: device.totalFriend || 0
+          totalFriend: device.totalFriend || 0,
+          nickname: device.nickname || ''
         }))
         setDevices(transformedDevices)
       } else {
         showToast(response.msg || "获取设备列表失败", "error")
       }
     } catch (error: any) {
-      console.error("获取设备列表失败:", error)
+      console.error('获取设备列表失败:', error)
       showToast(error?.message || "请检查网络连接", "error")
     } finally {
+      loadingToast.remove();
       setLoading(false)
     }
   }
 
-  useEffect(() => {
-    if (open) {
-      fetchDevices()
-      setTempSelected(selectedDevices)
-    }
-  }, [open, searchQuery, selectedDevices])
-
   const handleRefresh = () => {
     fetchDevices()
   }
 
-  const filteredDevices = devices.filter(device => {
-    const matchesSearch = !searchQuery || 
-      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.alive === 1) ||
-      (statusFilter === "offline" && device.alive === 0)
+  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 handleCancel = () => {
+    setTempSelectedDevices(selectedDevices)
+    onOpenChange(false)
+  }
+
+  const filteredDevices = devices.filter((device) => {
+    const searchLower = searchQuery.toLowerCase()
+    const matchesSearch =
+      (device.name || '').toLowerCase().includes(searchLower) ||
+      (device.imei || '').toLowerCase().includes(searchLower) ||
+      (device.wxid || '').toLowerCase().includes(searchLower)
+
+    const matchesStatus =
+      statusFilter === "all" ||
+      (statusFilter === "online" && device.status === "online") ||
+      (statusFilter === "offline" && device.status === "offline")
 
     return matchesSearch && matchesStatus
   })
 
-  const handleDialogOpenChange = (open: boolean) => {
-    if (!open) {
-      setTempSelected(selectedDevices)
-    }
-    onOpenChange(open)
-  }
-
-  const handleSelectAll = () => {
-    if (tempSelected.length === filteredDevices.length) {
-      setTempSelected([])
-    } else {
-      setTempSelected(filteredDevices.map(device => device.id))
-    }
-  }
-
-  const handleDeviceToggle = (deviceId: string) => {
-    setTempSelected(prev => 
-      prev.includes(deviceId) 
-        ? prev.filter(id => id !== deviceId)
-        : [...prev, deviceId]
-    )
-  }
-
   return (
-    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
-      <DialogContent className="max-w-2xl">
+    <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-2 my-4">
+        <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/备注/微信号"
-              className="pl-9"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
             />
           </div>
           <Select value={statusFilter} onValueChange={setStatusFilter}>
@@ -150,75 +149,44 @@ export function DeviceSelectionDialog({
           </Button>
         </div>
 
-        <div className="flex justify-between items-center mb-2">
-          <div className="text-sm text-gray-500">
-            已选择 {tempSelected.length} 个设备
-          </div>
-          <div className="flex gap-2">
-            <Button 
-              variant="outline" 
-              size="sm" 
-              onClick={handleSelectAll}
-              disabled={loading || filteredDevices.length === 0}
-            >
-              {tempSelected.length === filteredDevices.length ? "取消全选" : "全选"}
-            </Button>
-          </div>
-        </div>
-
-        <ScrollArea className="h-[400px] -mx-6 px-6">
-          <div className="space-y-2">
-            {loading ? (
-              <div className="flex items-center justify-center h-full text-gray-500">
-                加载中...
-              </div>
-            ) : filteredDevices.length === 0 ? (
-              <div className="flex items-center justify-center h-full text-gray-500">
-                暂无数据
-              </div>
-            ) : (
-              filteredDevices.map((device) => (
-                <Label
+        <ScrollArea className="flex-1 -mx-6 px-6" style={{overflowY: 'auto'}}>
+          {loading ? (
+            <div className="flex justify-center items-center py-8">
+              <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {filteredDevices.map((device) => (
+                <label
                   key={device.id}
-                  className="flex items-center justify-between p-4 rounded-lg border hover:bg-gray-50 cursor-pointer"
-                  htmlFor={device.id}
+                  className="flex items-center space-x-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer"
+                  style={{paddingLeft: '0px',paddingRight: '0px'}}
                 >
-                  <div className="flex items-center space-x-3 flex-1 min-w-0">
-                    <Checkbox 
-                      id={device.id}
-                      checked={tempSelected.includes(device.id)}
-                      onCheckedChange={() => handleDeviceToggle(device.id)}
-                    />
-                    <div className="min-w-0 flex-1">
-                      <div className="font-medium truncate mb-1">{device.memo || device.imei}</div>
-                      <div className="text-sm text-gray-500 truncate mb-1">IMEI: {device.imei}</div>
-                      <div className="text-sm text-gray-500 truncate">{device.wechatId ? `微信号: ${device.wechatId}` : ''}</div>
-                      {device.usedInPlans > 0 && (
-                        <div className="text-sm text-orange-500 mt-1">
-                          已用于 {device.usedInPlans} 个计划
-                        </div>
-                      )}
+                  <Checkbox 
+                    checked={tempSelectedDevices.includes(device.id)}
+                    onCheckedChange={(checked) => handleDeviceToggle(device.id, checked as boolean)}
+                    className="h-5 w-5"
+                  />
+                  <div className="flex-1">
+                    <div className="flex items-center justify-between">
+                      <span className="font-medium">{device.name}</span>
+                      <Badge variant={device.status === "online" ? "default" : "secondary"}>
+                        {device.status === "online" ? "在线" : "离线"}
+                      </Badge>
+                    </div>
+                    <div className="text-sm text-gray-500 mt-1">
+                      <div>IMEI: {device.imei || '--'}</div>
+                      <div>微信号: {device.wxid || '--'}（{device.nickname || ''}）</div>
                     </div>
                   </div>
-                  <Badge variant={device.alive === 1 ? "default" : "secondary"}>
-                    {device.alive === 1 ? "在线" : "离线"}
-                  </Badge>
-                </Label>
-              ))
-            )}
-          </div>
+                </label>
+              ))}
+            </div>
+          )}
         </ScrollArea>
 
-        <DialogFooter className="mt-4">
-          {/* <Button variant="outline" onClick={() => handleDialogOpenChange(false)}>
-            取消
-          </Button> */}
-          <Button onClick={() => {
-            onSelect(tempSelected)
-            onOpenChange(false)
-          }}>
-            确定{tempSelected.length > 0 ? ` (${tempSelected.length})` : ''}
-          </Button>
+        <DialogFooter className="mt-4 flex gap-4 -mx-6 px-6">
+          <Button className="flex-1" onClick={handleConfirm}>确认</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>