门店端适配新表 及操盘手端工作台优化

Cunkebao/app/workspace/moments-sync/components/basic-settings.tsx

@@ -6,6 +6,7 @@ import { Switch } from "@/components/ui/switch"
 import { Plus, Minus, Clock, HelpCircle } from "lucide-react"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { useViewMode } from "@/app/components/LayoutWrapper"
+import { Label } from "@/components/ui/label"
 
 interface BasicSettingsProps {
   formData: {
@@ -24,163 +25,142 @@ interface BasicSettingsProps {
 export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
   const { viewMode } = useViewMode()
 
+  const handleSyncCountChange = (delta: number) => {
+    const newValue = Math.max(1, formData.syncCount + delta)
+    onChange({ syncCount: newValue })
+  }
+
+  const handleSyncIntervalChange = (delta: number) => {
+    const newValue = Math.max(5, formData.syncInterval + delta)
+    onChange({ syncInterval: newValue })
+  }
+
   return (
     <div className={`space-y-6 ${viewMode === "desktop" ? "p-6" : "p-4"}`}>
       <div className={`grid ${viewMode === "desktop" ? "grid-cols-2 gap-8" : "grid-cols-1 gap-4"}`}>
         <div>
-          <div className="text-base font-medium mb-2">任务名称</div>
+          <Label htmlFor="taskName" className="text-base">任务名称</Label>
           <Input
+            id="taskName"
             value={formData.taskName}
             onChange={(e) => onChange({ taskName: e.target.value })}
             placeholder="请输入任务名称"
-            className="h-12 border-0 border-b border-gray-200 rounded-none focus-visible:ring-0 focus-visible:border-blue-600 px-0 text-base"
+            className="mt-1.5 h-12 rounded-xl"
           />
         </div>
 
         <div>
-          <div className="text-base font-medium mb-2">允许发布时间段</div>
-          <div className="flex items-center space-x-4">
-            <div className="relative flex-1">
-              <Input
-                type="time"
-                value={formData.startTime}
-                onChange={(e) => onChange({ startTime: e.target.value })}
-                className="h-12 pl-10 rounded-xl border-gray-200 text-base"
-              />
-              <Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
-            </div>
-            <span className="text-gray-500">至</span>
-            <div className="relative flex-1">
-              <Input
-                type="time"
-                value={formData.endTime}
-                onChange={(e) => onChange({ endTime: e.target.value })}
-                className="h-12 pl-10 rounded-xl border-gray-200 text-base"
-              />
-              <Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
-            </div>
+          <Label className="text-base">每日同步数量</Label>
+          <div className="flex items-center space-x-4 mt-1.5">
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="h-12 w-12 rounded-xl"
+              onClick={() => handleSyncCountChange(-1)}
+            >
+              <Minus className="h-4 w-4" />
+            </Button>
+            <div className="w-20 text-center text-base">{formData.syncCount}</div>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="h-12 w-12 rounded-xl"
+              onClick={() => handleSyncCountChange(1)}
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+            <span className="text-gray-500">条/天</span>
           </div>
         </div>
 
         <div>
-          <div className="text-base font-medium mb-2">每日同步数量</div>
-          <div className="flex items-center space-x-5">
+          <Label className="text-base">同步间隔</Label>
+          <div className="flex items-center space-x-4 mt-1.5">
             <Button
+              type="button"
               variant="outline"
-              size="lg"
-              onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
-              className="h-12 w-12 rounded-xl bg-white border-gray-200"
+              size="icon"
+              className="h-12 w-12 rounded-xl"
+              onClick={() => handleSyncIntervalChange(-5)}
             >
-              <Minus className="h-5 w-5" />
+              <Minus className="h-4 w-4" />
             </Button>
-            <span className="w-8 text-center text-lg font-medium">{formData.syncCount}</span>
+            <div className="w-20 text-center text-base">{formData.syncInterval}</div>
             <Button
+              type="button"
               variant="outline"
-              size="lg"
-              onClick={() => onChange({ syncCount: formData.syncCount + 1 })}
-              className="h-12 w-12 rounded-xl bg-white border-gray-200"
+              size="icon"
+              className="h-12 w-12 rounded-xl"
+              onClick={() => handleSyncIntervalChange(5)}
             >
-              <Plus className="h-5 w-5" />
-            </Button>
-            <span className="text-gray-500">条朋友圈</span>
-          </div>
-        </div>
-
-        <div>
-          <div className="text-base font-medium mb-2">同步间隔</div>
-          <div className="flex items-center space-x-5">
-            <Button
-              variant="outline"
-              size="lg"
-              onClick={() => onChange({ syncInterval: Math.max(10, formData.syncInterval - 10) })}
-              className="h-12 w-12 rounded-xl bg-white border-gray-200"
-            >
-              <Minus className="h-5 w-5" />
-            </Button>
-            <span className="w-8 text-center text-lg font-medium">{formData.syncInterval}</span>
-            <Button
-              variant="outline"
-              size="lg"
-              onClick={() => onChange({ syncInterval: Math.min(120, formData.syncInterval + 10) })}
-              className="h-12 w-12 rounded-xl bg-white border-gray-200"
-            >
-              <Plus className="h-5 w-5" />
+              <Plus className="h-4 w-4" />
             </Button>
             <span className="text-gray-500">分钟</span>
           </div>
+          <p className="text-sm text-gray-500 mt-1.5">设置每次发朋友圈的时间间隔</p>
         </div>
 
         <div>
-          <div className="text-base font-medium mb-2">账号类型</div>
-          <div className="flex space-x-4">
-            <div className="flex-1 relative">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      onClick={() => onChange({ accountType: "business" })}
-                      className={`w-full h-12 justify-between rounded-lg ${
-                        formData.accountType === "business"
-                          ? "bg-blue-600 hover:bg-blue-600 text-white"
-                          : "bg-white hover:bg-gray-50"
-                      }`}
-                    >
-                      业务号
-                      <HelpCircle
-                        className={`h-4 w-4 ${formData.accountType === "business" ? "text-white/70" : "text-gray-400"}`}
-                      />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent className="max-w-[300px]">
-                    <p>
-                      业务号能够循环推送内容库中的内容。当内容库所有内容循环推送完毕后，若有新内容则优先推送新内容，若无新内容则继续循环推送。
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </div>
-            <div className="flex-1 relative">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      onClick={() => onChange({ accountType: "personal" })}
-                      className={`w-full h-12 justify-between rounded-lg ${
-                        formData.accountType === "personal"
-                          ? "bg-blue-600 hover:bg-blue-600 text-white"
-                          : "bg-white hover:bg-gray-50"
-                      }`}
-                    >
-                      人设号
-                      <HelpCircle
-                        className={`h-4 w-4 ${formData.accountType === "personal" ? "text-white/70" : "text-gray-400"}`}
-                      />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>用于实时更新同步，有新动态时进行同步，无动态则不同步。</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </div>
+          <Label className="text-base">同步时间</Label>
+          <div className="grid grid-cols-2 gap-4 mt-1.5">
+            <Input
+              type="time"
+              value={formData.startTime}
+              onChange={(e) => onChange({ startTime: e.target.value })}
+              className="h-12 rounded-xl"
+            />
+            <Input
+              type="time"
+              value={formData.endTime}
+              onChange={(e) => onChange({ endTime: e.target.value })}
+              className="h-12 rounded-xl"
+            />
           </div>
         </div>
 
-        <div className="flex items-center justify-between py-2">
-          <span className="text-base font-medium">是否启用</span>
+        <div>
+          <Label className="text-base">账号类型</Label>
+          <div className="grid grid-cols-2 gap-4 mt-1.5">
+            <button
+              type="button"
+              className={`h-12 rounded-xl border ${
+                formData.accountType === "business"
+                  ? "border-blue-500 bg-blue-50 text-blue-600"
+                  : "border-gray-200 text-gray-600"
+              }`}
+              onClick={() => onChange({ accountType: "business" })}
+            >
+              业务号
+            </button>
+            <button
+              type="button"
+              className={`h-12 rounded-xl border ${
+                formData.accountType === "personal"
+                  ? "border-blue-500 bg-blue-50 text-blue-600"
+                  : "border-gray-200 text-gray-600"
+              }`}
+              onClick={() => onChange({ accountType: "personal" })}
+            >
+              人设号
+            </button>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Label className="text-base">是否启用</Label>
           <Switch
             checked={formData.enabled}
             onCheckedChange={(checked) => onChange({ enabled: checked })}
-            className="data-[state=checked]:bg-blue-600 h-7 w-12"
           />
         </div>
       </div>
 
       <Button
         onClick={onNext}
-        className="w-full h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base font-medium shadow-sm"
+        className="w-full h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
+        disabled={!formData.taskName}
       >
         下一步
       </Button>

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

@@ -1,11 +1,26 @@
 "use client"
 
-import { useState } from "react"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+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 { Search, CheckCircle2, Circle } from "lucide-react"
 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 { api } from "@/lib/api"
+import { showToast } from "@/lib/toast"
+
+interface ContentLibrary {
+  id: string
+  name: string
+  sourceType: number
+  creatorName: string
+  updateTime: string
+  status: number
+}
 
 interface ContentLibrarySelectionDialogProps {
   open: boolean
@@ -21,93 +36,162 @@ export function ContentLibrarySelectionDialog({
   onSelect,
 }: ContentLibrarySelectionDialogProps) {
   const [searchQuery, setSearchQuery] = useState("")
-  const [libraries] = useState([
-    { id: "1", name: "卡若朋友圈", count: 58 },
-    { id: "2", name: "暗黑4代练", count: 422 },
-    { id: "3", name: "家装设计", count: 107 },
-    { id: "4", name: "美食分享", count: 321 },
-    { id: "5", name: "旅游攻略", count: 89 },
-  ])
+  const [loading, setLoading] = useState(false)
+  const [libraries, setLibraries] = useState<ContentLibrary[]>([])
+  const [tempSelected, setTempSelected] = useState<string[]>([])
 
-  const [tempSelectedLibraries, setTempSelectedLibraries] = useState<string[]>(selectedLibraries)
+  // 获取内容库列表
+  const fetchLibraries = async () => {
+    setLoading(true)
+    try {
+      const queryParams = new URLSearchParams({
+        page: '1',
+        limit: '100',
+        ...(searchQuery ? { keyword: searchQuery } : {})
+      })
+      const response = await api.get<{
+        code: number
+        msg: string
+        data: {
+          list: ContentLibrary[]
+          total: number
+        }
+      }>(`/v1/content/library/list?${queryParams.toString()}`)
 
-  const toggleLibrary = (libraryId: string) => {
-    setTempSelectedLibraries((prev) =>
-      prev.includes(libraryId) ? prev.filter((id) => id !== libraryId) : [...prev, libraryId]
+      if (response.code === 200 && response.data) {
+        setLibraries(response.data.list)
+      } else {
+        showToast(response.msg || "获取内容库列表失败", "error")
+      }
+    } catch (error: any) {
+      console.error("获取内容库列表失败:", error)
+      showToast(error?.message || "请检查网络连接", "error")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (open) {
+      fetchLibraries()
+      setTempSelected(selectedLibraries)
+    }
+  }, [open, searchQuery, selectedLibraries])
+
+  const handleRefresh = () => {
+    fetchLibraries()
+  }
+
+  const handleSelectAll = () => {
+    if (tempSelected.length === libraries.length) {
+      setTempSelected([])
+    } else {
+      setTempSelected(libraries.map(lib => lib.id))
+    }
+  }
+
+  const handleLibraryToggle = (libraryId: string) => {
+    setTempSelected(prev => 
+      prev.includes(libraryId) 
+        ? prev.filter(id => id !== libraryId)
+        : [...prev, libraryId]
     )
   }
 
-  const handleConfirm = () => {
-    onSelect(tempSelectedLibraries)
-    onOpenChange(false)
+  const handleDialogOpenChange = (open: boolean) => {
+    if (!open) {
+      setTempSelected(selectedLibraries)
+    }
+    onOpenChange(open)
   }
 
-  const handleCancel = () => {
-    setTempSelectedLibraries(selectedLibraries)
-    onOpenChange(false)
-  }
-
-  const filteredLibraries = libraries.filter((library) =>
-    library.name.toLowerCase().includes(searchQuery.toLowerCase())
-  )
-
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md p-0 overflow-hidden">
-        <DialogHeader className="px-4 py-3 border-b">
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
           <DialogTitle>选择内容库</DialogTitle>
         </DialogHeader>
 
-        <div className="p-4">
-          <div className="relative mb-4">
-            <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
+        <div className="flex items-center space-x-2 my-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
             <Input
               placeholder="搜索内容库"
-              className="pl-10"
+              className="pl-9"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
             />
           </div>
+          <Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
+            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
+          </Button>
+        </div>
 
-          <ScrollArea className="h-[300px] pr-4">
-            <div className="space-y-2">
-              {filteredLibraries.map((library) => (
-                <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 || libraries.length === 0}
+            >
+              {tempSelected.length === libraries.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>
+            ) : libraries.length === 0 ? (
+              <div className="flex items-center justify-center h-full text-gray-500">
+                暂无数据
+              </div>
+            ) : (
+              libraries.map((library) => (
+                <Label
                   key={library.id}
-                  className="flex items-center justify-between p-3 rounded-lg border hover:bg-gray-50 cursor-pointer"
-                  onClick={() => toggleLibrary(library.id)}
+                  className="flex items-center justify-between p-4 rounded-lg border hover:bg-gray-50 cursor-pointer"
+                  htmlFor={library.id}
                 >
-                  <div>
-                    <h3 className="font-medium">{library.name}</h3>
-                    <p className="text-sm text-gray-500">{library.count}条内容</p>
+                  <div className="flex items-center space-x-3 flex-1 min-w-0 pr-4">
+                    <Checkbox 
+                      id={library.id}
+                      checked={tempSelected.includes(library.id)}
+                      onCheckedChange={() => handleLibraryToggle(library.id)}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <div className="font-medium truncate mb-1">{library.name}</div>
+                      <div className="text-sm text-gray-500 truncate mb-1">创建人：{library.creatorName}</div>
+                      <div className="text-sm text-gray-500 truncate">更新时间：{new Date(library.updateTime).toLocaleString()}</div>
+                    </div>
                   </div>
-                  {tempSelectedLibraries.includes(library.id) ? (
-                    <CheckCircle2 className="h-6 w-6 text-blue-500" />
-                  ) : (
-                    <Circle className="h-6 w-6 text-gray-300" />
-                  )}
-                </div>
-              ))}
-            </div>
-          </ScrollArea>
-        </div>
+                  {/* <Badge variant={library.status === 1 ? "default" : "secondary"}>
+                    {library.status === 1 ? "启用" : "已停用"}
+                  </Badge> */}
+                </Label>
+              ))
+            )}
+          </div>
+        </ScrollArea>
 
-        <div className="flex border-t p-4">
-          <Button
-            variant="outline"
-            className="flex-1 mr-2"
-            onClick={handleCancel}
-          >
+        <DialogFooter className="mt-4">
+          {/* <Button variant="outline" onClick={() => handleDialogOpenChange(false)}>
             取消
+          </Button> */}
+          <Button onClick={() => {
+            onSelect(tempSelected)
+            onOpenChange(false)
+          }}>
+            确定{tempSelected.length > 0 ? ` (${tempSelected.length})` : ''}
           </Button>
-          <Button
-            className="flex-1"
-            onClick={handleConfirm}
-            disabled={tempSelectedLibraries.length === 0}
-          >
-            确定 ({tempSelectedLibraries.length})
-          </Button>
-        </div>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   )

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

@@ -1,58 +1,51 @@
 "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 { 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 { 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 { 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: number
+  id: string
   name: string
   imei: string
-  wxid: string
-  status: "online" | "offline"
-  totalFriend: number
+  wechatId: string
+  memo?: string
+  alive: number
+  usedInPlans: number
+  lastActiveTime: string
 }
 
 interface DeviceSelectionDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
-  selectedDevices: number[]
-  onSelect: (devices: number[]) => void
+  selectedDevices: string[]
+  onSelect: (devices: string[]) => 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 [devices, setDevices] = useState<Device[]>([])
   const [loading, setLoading] = useState(false)
-  const [tempSelectedDevices, setTempSelectedDevices] = useState<number[]>(selectedDevices)
-
-  useEffect(() => {
-    if (open) {
-      setTempSelectedDevices(selectedDevices)
-      fetchDevices()
-    }
-  }, [open, selectedDevices])
+  const [devices, setDevices] = useState<Device[]>([])
+  const [tempSelected, setTempSelected] = useState<string[]>([])
 
+  // 获取设备列表
   const fetchDevices = async () => {
-    const loadingToast = showToast("正在加载设备列表...", "loading", true);
+    setLoading(true)
     try {
       setLoading(true)
       const response = await api.get<{code: number, msg: string, data: {list: ServerDevice[], total: number}}>('/v1/devices?page=1&limit=100')
@@ -71,58 +64,75 @@ export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onS
         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 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 === "" || 
+    const matchesSearch = !searchQuery || 
       device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
       device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      device.wxid.toLowerCase().includes(searchQuery.toLowerCase())
+      device.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
     
-    const matchesStatus = statusFilter === "all" || device.status === statusFilter
+    const matchesStatus = statusFilter === "all" || 
+      (statusFilter === "online" && device.alive === 1) ||
+      (statusFilter === "offline" && device.alive === 0)
 
     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={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      <DialogContent className="max-w-2xl">
         <DialogHeader>
           <DialogTitle>选择设备</DialogTitle>
         </DialogHeader>
 
-        <div className="flex items-center space-x-4 my-4">
+        <div className="flex items-center space-x-2 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}>
@@ -140,45 +150,75 @@ export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onS
           </Button>
         </div>
 
-        <ScrollArea className="flex-1">
-          {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
+        <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
                   key={device.id}
-                  className="flex items-center space-x-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer"
-                  style={{paddingLeft: '0px',paddingRight: '0px'}}
+                  className="flex items-center justify-between p-4 rounded-lg border hover:bg-gray-50 cursor-pointer"
+                  htmlFor={device.id}
                 >
-                  <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 || '--'}</div>
-                      <div>好友数: {device.totalFriend}</div>
+                  <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>
+                      )}
                     </div>
                   </div>
-                </label>
-              ))}
-            </div>
-          )}
+                  <Badge variant={device.alive === 1 ? "default" : "secondary"}>
+                    {device.alive === 1 ? "在线" : "离线"}
+                  </Badge>
+                </Label>
+              ))
+            )}
+          </div>
         </ScrollArea>
 
-        <DialogFooter className="mt-4 flex gap-4 -mx-6 px-6">
-          <Button className="flex-1" onClick={handleConfirm}>确认</Button>
+        <DialogFooter className="mt-4">
+          {/* <Button variant="outline" onClick={() => handleDialogOpenChange(false)}>
+            取消
+          </Button> */}
+          <Button onClick={() => {
+            onSelect(tempSelected)
+            onOpenChange(false)
+          }}>
+            确定{tempSelected.length > 0 ? ` (${tempSelected.length})` : ''}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>