384 lines
14 KiB
TypeScript
384 lines
14 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect, useRef, useCallback } 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"
|
||
import { fetchDeviceList, deleteDevice } from "@/api/devices"
|
||
import { ServerDevice } from "@/types/device"
|
||
|
||
// 设备接口更新为与服务端接口对应的类型
|
||
interface Device extends ServerDevice {
|
||
status: "online" | "offline";
|
||
}
|
||
|
||
export default function DevicesPage() {
|
||
const router = useRouter()
|
||
const [devices, setDevices] = useState<Device[]>([])
|
||
const [isAddDeviceOpen, setIsAddDeviceOpen] = useState(false)
|
||
const [stats, setStats] = useState({
|
||
totalDevices: 0,
|
||
onlineDevices: 0,
|
||
})
|
||
const [searchQuery, setSearchQuery] = useState("")
|
||
const [statusFilter, setStatusFilter] = useState("all")
|
||
const [currentPage, setCurrentPage] = useState(1)
|
||
const [selectedDevices, setSelectedDevices] = useState<number[]>([])
|
||
const [isLoading, setIsLoading] = useState(false)
|
||
const [hasMore, setHasMore] = useState(true)
|
||
const [totalCount, setTotalCount] = useState(0)
|
||
const observerTarget = useRef<HTMLDivElement>(null)
|
||
// 使用ref来追踪当前页码，避免依赖effect循环
|
||
const pageRef = useRef(1)
|
||
|
||
const devicesPerPage = 20 // 每页显示20条记录
|
||
|
||
// 获取设备列表
|
||
const loadDevices = useCallback(async (page: number, refresh: boolean = false) => {
|
||
// 检查是否已经在加载中，避免重复请求
|
||
if (isLoading) return;
|
||
|
||
try {
|
||
setIsLoading(true)
|
||
const response = await fetchDeviceList(page, devicesPerPage, searchQuery)
|
||
|
||
if (response.code === 200 && response.data) {
|
||
// 转换数据格式，确保status类型正确
|
||
const serverDevices = response.data.list.map(device => ({
|
||
...device,
|
||
status: device.alive === 1 ? "online" as const : "offline" as const
|
||
}))
|
||
|
||
// 更新设备列表
|
||
if (refresh) {
|
||
setDevices(serverDevices)
|
||
} else {
|
||
setDevices(prev => [...prev, ...serverDevices])
|
||
}
|
||
|
||
// 更新统计信息
|
||
const total = response.data.total
|
||
const online = response.data.list.filter(d => d.alive === 1).length
|
||
setStats({
|
||
totalDevices: total,
|
||
onlineDevices: online
|
||
})
|
||
|
||
// 更新分页信息
|
||
setTotalCount(response.data.total)
|
||
|
||
// 更新hasMore状态，确保有更多数据且返回的数据数量等于每页数量
|
||
const hasMoreData = serverDevices.length > 0 &&
|
||
serverDevices.length === devicesPerPage &&
|
||
(page * devicesPerPage) < response.data.total;
|
||
setHasMore(hasMoreData)
|
||
|
||
// 更新当前页码的ref值
|
||
pageRef.current = page
|
||
} else {
|
||
toast({
|
||
title: "获取设备列表失败",
|
||
description: response.msg || "请稍后重试",
|
||
variant: "destructive",
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error("获取设备列表失败", error)
|
||
toast({
|
||
title: "获取设备列表失败",
|
||
description: "请检查网络连接后重试",
|
||
variant: "destructive",
|
||
})
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
// 移除isLoading依赖，只保留真正需要的依赖
|
||
}, [searchQuery, devicesPerPage])
|
||
|
||
// 加载下一页数据的函数，使用ref来追踪页码，避免依赖循环
|
||
const loadNextPage = useCallback(() => {
|
||
// 如果正在加载或者没有更多数据，直接返回
|
||
if (isLoading || !hasMore) return;
|
||
|
||
// 使用ref来获取下一页码，避免依赖currentPage
|
||
const nextPage = pageRef.current + 1;
|
||
// 设置UI显示的当前页
|
||
setCurrentPage(nextPage);
|
||
// 加载下一页数据
|
||
loadDevices(nextPage, false);
|
||
// 只依赖必要的状态
|
||
}, [hasMore, isLoading, loadDevices]);
|
||
|
||
// 初始加载和搜索时刷新列表
|
||
useEffect(() => {
|
||
// 重置页码
|
||
setCurrentPage(1)
|
||
pageRef.current = 1
|
||
// 加载第一页数据
|
||
loadDevices(1, true)
|
||
}, [searchQuery, loadDevices])
|
||
|
||
// 无限滚动加载实现
|
||
useEffect(() => {
|
||
// 如果没有更多数据或者正在加载，不创建observer
|
||
if (!hasMore || isLoading) return;
|
||
|
||
let isMounted = true; // 追踪组件是否已挂载
|
||
|
||
// 创建观察器观察加载点
|
||
const observer = new IntersectionObserver(
|
||
entries => {
|
||
// 如果交叉了，且有更多数据，且当前不在加载状态，且组件仍然挂载
|
||
if (entries[0].isIntersecting && hasMore && !isLoading && isMounted) {
|
||
loadNextPage();
|
||
}
|
||
},
|
||
{ threshold: 0.5 }
|
||
)
|
||
|
||
// 只在客户端时观察节点
|
||
if (typeof window !== 'undefined' && observerTarget.current) {
|
||
observer.observe(observerTarget.current)
|
||
}
|
||
|
||
// 清理观察器
|
||
return () => {
|
||
isMounted = false;
|
||
observer.disconnect();
|
||
}
|
||
}, [hasMore, isLoading, loadNextPage])
|
||
|
||
// 刷新设备列表
|
||
const handleRefresh = () => {
|
||
setCurrentPage(1)
|
||
pageRef.current = 1
|
||
loadDevices(1, true)
|
||
toast({
|
||
title: "刷新成功",
|
||
description: "设备列表已更新",
|
||
})
|
||
}
|
||
|
||
// 筛选设备
|
||
const filteredDevices = devices.filter(device => {
|
||
const matchesStatus = statusFilter === "all" ||
|
||
(statusFilter === "online" && device.alive === 1) ||
|
||
(statusFilter === "offline" && device.alive === 0)
|
||
return matchesStatus
|
||
})
|
||
|
||
// 处理批量删除
|
||
const handleBatchDelete = async () => {
|
||
if (selectedDevices.length === 0) {
|
||
toast({
|
||
title: "请选择设备",
|
||
description: "您需要选择至少一个设备来执行批量删除操作",
|
||
variant: "destructive",
|
||
})
|
||
return
|
||
}
|
||
|
||
// 这里需要实现批量删除逻辑
|
||
// 目前只是单个删除的循环
|
||
let successCount = 0
|
||
for (const deviceId of selectedDevices) {
|
||
try {
|
||
const response = await deleteDevice(deviceId)
|
||
if (response.code === 200) {
|
||
successCount++
|
||
}
|
||
} catch (error) {
|
||
console.error(`删除设备 ${deviceId} 失败`, error)
|
||
}
|
||
}
|
||
|
||
// 删除后刷新列表
|
||
if (successCount > 0) {
|
||
toast({
|
||
title: "批量删除成功",
|
||
description: `已删除 ${successCount} 个设备`,
|
||
})
|
||
setSelectedDevices([])
|
||
handleRefresh()
|
||
} else {
|
||
toast({
|
||
title: "批量删除失败",
|
||
description: "请稍后重试",
|
||
variant: "destructive",
|
||
})
|
||
}
|
||
}
|
||
|
||
// 设备详情页跳转
|
||
const handleDeviceClick = (deviceId: number) => {
|
||
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 === filteredDevices.length && filteredDevices.length > 0}
|
||
onCheckedChange={(checked) => {
|
||
if (checked) {
|
||
setSelectedDevices(filteredDevices.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">
|
||
{filteredDevices.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.memo}</div>
|
||
<Badge variant={device.status === "online" ? "default" : "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.totalFriend}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
|
||
{/* 加载更多观察点 */}
|
||
<div ref={observerTarget} className="h-10 flex items-center justify-center">
|
||
{isLoading && <div className="text-sm text-gray-500">加载中...</div>}
|
||
{!hasMore && devices.length > 0 && <div className="text-sm text-gray-500">没有更多设备了</div>}
|
||
{!hasMore && devices.length === 0 && <div className="text-sm text-gray-500">暂无设备</div>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 添加设备对话框 */}
|
||
<Dialog open={isAddDeviceOpen} onOpenChange={setIsAddDeviceOpen}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>添加设备</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-4">
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium">设备名称</label>
|
||
<Input placeholder="请输入设备名称" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium">IMEI</label>
|
||
<Input placeholder="请输入设备IMEI" />
|
||
</div>
|
||
<div className="flex justify-end space-x-2">
|
||
<Button variant="outline" onClick={() => setIsAddDeviceOpen(false)}>
|
||
取消
|
||
</Button>
|
||
<Button>添加</Button>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
)
|
||
}
|
||
|