285 lines
11 KiB
TypeScript
285 lines
11 KiB
TypeScript
"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>
|
|
)
|
|
}
|
|
|