存客宝 React

Cunkebao/app/devices/[id]/page.tsx

@@ -0,0 +1,283 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useParams, useRouter } from "next/navigation"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { ChevronLeft, Smartphone, Battery, Wifi, MessageCircle, Users, Settings, History } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+interface WechatAccount {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  gender: "male" | "female"
+  status: "normal" | "abnormal"
+  addFriendStatus: "enabled" | "disabled"
+  friendCount: number
+  lastActive: string
+}
+
+interface Device {
+  id: string
+  imei: string
+  name: string
+  status: "online" | "offline"
+  battery: number
+  lastActive: string
+  historicalIds: string[]
+  wechatAccounts: WechatAccount[]
+  features: {
+    autoAddFriend: boolean
+    autoReply: boolean
+    contentSync: boolean
+    aiChat: boolean
+  }
+  history: {
+    time: string
+    action: string
+    operator: string
+  }[]
+}
+
+export default function DeviceDetailPage() {
+  const params = useParams()
+  const router = useRouter()
+  const [device, setDevice] = useState<Device | null>(null)
+  const [activeTab, setActiveTab] = useState("info")
+
+  useEffect(() => {
+    // 模拟API调用
+    const mockDevice: Device = {
+      id: params.id as string,
+      imei: "sd123123",
+      name: "设备 1",
+      status: "online",
+      battery: 85,
+      lastActive: "2024-02-09 15:30:45",
+      historicalIds: ["vx412321", "vfbadasd"],
+      wechatAccounts: [
+        {
+          id: "1",
+          avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-q2rVrFbfDdAbSnT3ZTNE7gfn3QCbvr.png",
+          nickname: "老张",
+          wechatId: "wxid_abc123",
+          gender: "male",
+          status: "normal",
+          addFriendStatus: "enabled",
+          friendCount: 523,
+          lastActive: "2024-02-09 15:20:33",
+        },
+        {
+          id: "2",
+          avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-q2rVrFbfDdAbSnT3ZTNE7gfn3QCbvr.png",
+          nickname: "老李",
+          wechatId: "wxid_xyz789",
+          gender: "male",
+          status: "abnormal",
+          addFriendStatus: "disabled",
+          friendCount: 245,
+          lastActive: "2024-02-09 14:15:22",
+        },
+      ],
+      features: {
+        autoAddFriend: true,
+        autoReply: true,
+        contentSync: false,
+        aiChat: true,
+      },
+      history: [
+        {
+          time: "2024-02-09 15:30:45",
+          action: "开启自动加好友",
+          operator: "系统",
+        },
+        {
+          time: "2024-02-09 14:20:33",
+          action: "添加微信号",
+          operator: "管理员",
+        },
+      ],
+    }
+    setDevice(mockDevice)
+  }, [params.id])
+
+  if (!device) {
+    return <div>加载中...</div>
+  }
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen">
+      <div className="max-w-[390px] mx-auto bg-white">
+        <header className="sticky top-0 z-10 bg-white border-b">
+          <div className="flex items-center justify-between p-4">
+            <div className="flex items-center space-x-3">
+              <Button variant="ghost" size="icon" onClick={() => router.back()}>
+                <ChevronLeft className="h-5 w-5" />
+              </Button>
+              <h1 className="text-lg font-medium">设备详情</h1>
+            </div>
+            <Button variant="ghost" size="icon">
+              <Settings className="h-5 w-5" />
+            </Button>
+          </div>
+        </header>
+
+        <div className="p-4 space-y-4">
+          <Card className="p-4">
+            <div className="flex items-center space-x-4">
+              <div className="p-3 bg-blue-50 rounded-lg">
+                <Smartphone className="h-6 w-6 text-blue-600" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between">
+                  <h2 className="font-medium truncate">{device.name}</h2>
+                  <Badge variant={device.status === "online" ? "success" : "secondary"}>
+                    {device.status === "online" ? "在线" : "离线"}
+                  </Badge>
+                </div>
+                <div className="text-sm text-gray-500 mt-1">IMEI: {device.imei}</div>
+                <div className="text-sm text-gray-500">历史ID: {device.historicalIds.join(", ")}</div>
+              </div>
+            </div>
+            <div className="mt-4 grid grid-cols-2 gap-4">
+              <div className="flex items-center space-x-2">
+                <Battery className={`w-4 h-4 ${device.battery < 20 ? "text-red-500" : "text-green-500"}`} />
+                <span className="text-sm">{device.battery}%</span>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Wifi className="w-4 h-4 text-blue-500" />
+                <span className="text-sm">{device.status === "online" ? "已连接" : "未连接"}</span>
+              </div>
+            </div>
+            <div className="mt-2 text-sm text-gray-500">最后活跃：{device.lastActive}</div>
+          </Card>
+
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <TabsList className="grid w-full grid-cols-3">
+              <TabsTrigger value="info">基本信息</TabsTrigger>
+              <TabsTrigger value="accounts">关联账号</TabsTrigger>
+              <TabsTrigger value="history">操作记录</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="info">
+              <Card className="p-4 space-y-4">
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label>自动加好友</Label>
+                      <div className="text-sm text-gray-500">自动通过好友验证</div>
+                    </div>
+                    <Switch checked={device.features.autoAddFriend} />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label>自动回复</Label>
+                      <div className="text-sm text-gray-500">自动回复好友消息</div>
+                    </div>
+                    <Switch checked={device.features.autoReply} />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label>朋友圈同步</Label>
+                      <div className="text-sm text-gray-500">自动同步朋友圈内容</div>
+                    </div>
+                    <Switch checked={device.features.contentSync} />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label>AI会话</Label>
+                      <div className="text-sm text-gray-500">启用AI智能对话</div>
+                    </div>
+                    <Switch checked={device.features.aiChat} />
+                  </div>
+                </div>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="accounts">
+              <Card className="p-4">
+                <ScrollArea className="h-[calc(100vh-300px)]">
+                  <div className="space-y-4">
+                    {device.wechatAccounts.map((account) => (
+                      <div key={account.id} className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
+                        <img
+                          src={account.avatar || "/placeholder.svg"}
+                          alt={account.nickname}
+                          className="w-12 h-12 rounded-full"
+                        />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center justify-between">
+                            <div className="font-medium truncate">{account.nickname}</div>
+                            <Badge variant={account.status === "normal" ? "success" : "destructive"}>
+                              {account.status === "normal" ? "正常" : "异常"}
+                            </Badge>
+                          </div>
+                          <div className="text-sm text-gray-500 mt-1">微信号: {account.wechatId}</div>
+                          <div className="text-sm text-gray-500">性别: {account.gender === "male" ? "男" : "女"}</div>
+                          <div className="flex items-center justify-between mt-2">
+                            <span className="text-sm text-gray-500">好友数: {account.friendCount}</span>
+                            <Badge variant={account.addFriendStatus === "enabled" ? "outline" : "secondary"}>
+                              {account.addFriendStatus === "enabled" ? "可加友" : "已停用"}
+                            </Badge>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="history">
+              <Card className="p-4">
+                <ScrollArea className="h-[calc(100vh-300px)]">
+                  <div className="space-y-4">
+                    {device.history.map((record, index) => (
+                      <div key={index} className="flex items-start space-x-3">
+                        <div className="p-2 bg-blue-50 rounded-full">
+                          <History className="w-4 h-4 text-blue-600" />
+                        </div>
+                        <div className="flex-1">
+                          <div className="text-sm font-medium">{record.action}</div>
+                          <div className="text-xs text-gray-500 mt-1">
+                            操作人: {record.operator} · {record.time}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              </Card>
+            </TabsContent>
+          </Tabs>
+
+          <div className="grid grid-cols-2 gap-4">
+            <Card className="p-4">
+              <div className="flex items-center space-x-2 text-gray-500">
+                <Users className="w-4 h-4" />
+                <span className="text-sm">好友总数</span>
+              </div>
+              <div className="text-2xl font-bold text-blue-600 mt-2">
+                {device?.wechatAccounts?.reduce((sum, account) => sum + account.friendCount, 0)}
+              </div>
+            </Card>
+            <Card className="p-4">
+              <div className="flex items-center space-x-2 text-gray-500">
+                <MessageCircle className="w-4 h-4" />
+                <span className="text-sm">消息数量</span>
+              </div>
+              <div className="text-2xl font-bold text-blue-600 mt-2">5,678</div>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+

Cunkebao/app/devices/page.tsx

@@ -0,0 +1,284 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { ChevronLeft, Plus, Filter, Search, RefreshCw, QrCode } from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { toast } from "@/components/ui/use-toast"
+import { Badge } from "@/components/ui/badge"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+
+interface Device {
+  id: string
+  imei: string
+  name: string
+  remark: string
+  status: "online" | "offline"
+  battery: number
+  wechatId: string
+  friendCount: number
+  todayAdded: number
+  messageCount: number
+  lastActive: string
+  addFriendStatus: "normal" | "abnormal"
+  avatar?: string
+}
+
+export default function DevicesPage() {
+  const router = useRouter()
+  const [devices, setDevices] = useState<Device[]>([])
+  const [isAddDeviceOpen, setIsAddDeviceOpen] = useState(false)
+  const [stats, setStats] = useState({
+    totalDevices: 42,
+    onlineDevices: 35,
+  })
+  const [searchQuery, setSearchQuery] = useState("")
+  const [statusFilter, setStatusFilter] = useState("all")
+  const [currentPage, setCurrentPage] = useState(1)
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
+  const devicesPerPage = 10
+
+  useEffect(() => {
+    // 模拟API调用
+    const fetchDevices = async () => {
+      const mockDevices = Array.from({ length: 42 }, (_, i) => ({
+        id: `device-${i + 1}`,
+        imei: `sd${123123 + i}`,
+        name: `设备 ${i + 1}`,
+        remark: `备注 ${i + 1}`,
+        status: Math.random() > 0.2 ? "online" : "offline",
+        battery: Math.floor(Math.random() * 100),
+        wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+        friendCount: Math.floor(Math.random() * 1000),
+        todayAdded: Math.floor(Math.random() * 50),
+        messageCount: Math.floor(Math.random() * 200),
+        lastActive: new Date(Date.now() - Math.random() * 86400000).toLocaleString(),
+        addFriendStatus: Math.random() > 0.2 ? "normal" : "abnormal",
+        avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-kYhfQsrrByfbzefv6MEV7W7ogz0IRt.png",
+      }))
+      setDevices(mockDevices)
+    }
+
+    fetchDevices()
+  }, [])
+
+  const handleRefresh = () => {
+    toast({
+      title: "刷新成功",
+      description: "设备列表已更新",
+    })
+  }
+
+  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" || device.status === statusFilter
+    return matchesSearch && matchesStatus
+  })
+
+  const paginatedDevices = filteredDevices.slice((currentPage - 1) * devicesPerPage, currentPage * devicesPerPage)
+
+  const handleBatchDelete = () => {
+    if (selectedDevices.length === 0) {
+      toast({
+        title: "请选择设备",
+        description: "您需要选择至少一个设备来执行批量删除操作",
+        variant: "destructive",
+      })
+      return
+    }
+    toast({
+      title: "批量删除成功",
+      description: `已删除 ${selectedDevices.length} 个设备`,
+    })
+    setSelectedDevices([])
+  }
+
+  const handleDeviceClick = (deviceId: string) => {
+    router.push(`/devices/${deviceId}`)
+  }
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">设备管理</h1>
+          </div>
+          <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => setIsAddDeviceOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            添加设备
+          </Button>
+        </div>
+      </header>
+
+      <div className="p-4 space-y-4">
+        <div className="grid grid-cols-2 gap-3">
+          <Card className="p-3">
+            <div className="text-sm text-gray-500">总设备数</div>
+            <div className="text-xl font-bold text-blue-600">{stats.totalDevices}</div>
+          </Card>
+          <Card className="p-3">
+            <div className="text-sm text-gray-500">在线设备</div>
+            <div className="text-xl font-bold text-green-600">{stats.onlineDevices}</div>
+          </Card>
+        </div>
+
+        <Card className="p-4">
+          <div className="space-y-3">
+            <div className="flex items-center space-x-2">
+              <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>
+              <Button variant="outline" size="icon">
+                <Filter className="h-4 w-4" />
+              </Button>
+              <Button variant="outline" size="icon" onClick={handleRefresh}>
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-4">
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                  <SelectTrigger className="w-[120px]">
+                    <SelectValue placeholder="全部状态" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部状态</SelectItem>
+                    <SelectItem value="online">在线</SelectItem>
+                    <SelectItem value="offline">离线</SelectItem>
+                  </SelectContent>
+                </Select>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    checked={selectedDevices.length === paginatedDevices.length}
+                    onCheckedChange={(checked) => {
+                      if (checked) {
+                        setSelectedDevices(paginatedDevices.map((d) => d.id))
+                      } else {
+                        setSelectedDevices([])
+                      }
+                    }}
+                  />
+                  <span className="text-sm text-gray-500">全选</span>
+                </div>
+              </div>
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={handleBatchDelete}
+                disabled={selectedDevices.length === 0}
+              >
+                删除
+              </Button>
+            </div>
+
+            <div className="space-y-2">
+              {paginatedDevices.map((device) => (
+                <Card
+                  key={device.id}
+                  className="p-3 hover:shadow-md transition-shadow cursor-pointer relative"
+                  onClick={() => handleDeviceClick(device.id)}
+                >
+                  <div className="flex items-center space-x-3">
+                    <Checkbox
+                      checked={selectedDevices.includes(device.id)}
+                      onCheckedChange={(checked) => {
+                        if (checked) {
+                          setSelectedDevices([...selectedDevices, device.id])
+                        } else {
+                          setSelectedDevices(selectedDevices.filter((id) => id !== device.id))
+                        }
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center justify-between mb-1">
+                        <div className="font-medium truncate">{device.name}</div>
+                        <Badge variant={device.status === "online" ? "success" : "secondary"} className="ml-2">
+                          {device.status === "online" ? "在线" : "离线"}
+                        </Badge>
+                      </div>
+                      <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
+                      <div className="text-sm text-gray-500">微信号: {device.wechatId}</div>
+                      <div className="flex items-center justify-between mt-1 text-sm">
+                        <span className="text-gray-500">好友数: {device.friendCount}</span>
+                        <span className="text-gray-500">今日新增: +{device.todayAdded}</span>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              ))}
+            </div>
+
+            <div className="flex justify-between items-center pt-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+                disabled={currentPage === 1}
+              >
+                上一页
+              </Button>
+              <span className="text-sm text-gray-500">
+                第 {currentPage} / {Math.ceil(filteredDevices.length / devicesPerPage)} 页
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() =>
+                  setCurrentPage((prev) => Math.min(Math.ceil(filteredDevices.length / devicesPerPage), prev + 1))
+                }
+                disabled={currentPage === Math.ceil(filteredDevices.length / devicesPerPage)}
+              >
+                下一页
+              </Button>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      <Dialog open={isAddDeviceOpen} onOpenChange={setIsAddDeviceOpen}>
+        <DialogContent className="sm:max-w-[390px]">
+          <DialogHeader>
+            <DialogTitle>添加设备</DialogTitle>
+          </DialogHeader>
+          <div className="flex flex-col items-center justify-center p-6 space-y-6">
+            <div className="w-48 h-48 bg-gray-100 rounded-lg flex items-center justify-center">
+              <QrCode className="w-12 h-12 text-gray-400" />
+            </div>
+            <p className="text-sm text-gray-500 text-center">
+              请使用设备扫描二维码进行添加
+              <br />
+              或手动输入设备ID
+            </p>
+            <Input placeholder="请输入设备ID" className="max-w-[280px]" />
+            <div className="flex space-x-2">
+              <Button variant="outline" onClick={() => setIsAddDeviceOpen(false)}>
+                取消
+              </Button>
+              <Button>确认添加</Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+