From 4ab353c1980bc500bc08d4636bf8f93500950f15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=B3=E6=B8=85=E7=88=BD?= Date: Fri, 9 May 2025 14:13:39 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=81=E5=9F=9F=E6=93=8D=E7=9B=98=E6=89=8B?= =?UTF-8?q?=20-=20=E5=88=A0=E9=99=A4=E8=AE=BE=E5=A4=87=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E5=8D=95=E9=80=89=E5=B9=B6=E4=B8=94=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E8=AE=BE=E5=A4=87=E6=97=B6=E5=A2=9E=E5=8A=A0=E6=A8=A1=E6=80=81?= =?UTF-8?q?=E6=8F=90=E7=A4=BA=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Cunkebao/.gitignore | 2 + Cunkebao/app/devices/page.tsx | 225 +++++++----------- .../device/DeleteDeviceV1Controller.php | 1 + 3 files changed, 85 insertions(+), 143 deletions(-) diff --git a/Cunkebao/.gitignore b/Cunkebao/.gitignore index f650315f..e39c24cf 100644 --- a/Cunkebao/.gitignore +++ b/Cunkebao/.gitignore @@ -7,6 +7,8 @@ /.next/ /out/ +/.history/ + # production /build diff --git a/Cunkebao/app/devices/page.tsx b/Cunkebao/app/devices/page.tsx index 3d6fe02e..8751f07a 100644 --- a/Cunkebao/app/devices/page.tsx +++ b/Cunkebao/app/devices/page.tsx @@ -5,17 +5,18 @@ 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, Smartphone, Loader2, AlertTriangle } from "lucide-react" +import { ChevronLeft, Plus, Filter, Search, RefreshCw, QrCode, Smartphone, Loader2, AlertTriangle, Trash2 } 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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { fetchDeviceList, deleteDevice } from "@/api/devices" import { ServerDevice } from "@/types/device" import { api } from "@/lib/api" import { ImeiDisplay } from "@/components/ImeiDisplay" +import type { ApiResponse } from "@/lib/api" // 设备接口更新为与服务端接口对应的类型 interface Device extends ServerDevice { @@ -33,14 +34,12 @@ export default function DevicesPage() { const [searchQuery, setSearchQuery] = useState("") const [statusFilter, setStatusFilter] = useState("all") const [currentPage, setCurrentPage] = useState(1) - const [selectedDevices, setSelectedDevices] = useState([]) + const [selectedDeviceId, setSelectedDeviceId] = useState(null) const [isLoading, setIsLoading] = useState(false) const [hasMore, setHasMore] = useState(true) const [totalCount, setTotalCount] = useState(0) const observerTarget = useRef(null) - // 使用ref来追踪当前页码，避免依赖effect循环 const pageRef = useRef(1) - // 添加设备相关状态 const [deviceImei, setDeviceImei] = useState("") const [deviceName, setDeviceName] = useState("") const [qrCodeImage, setQrCodeImage] = useState("") @@ -59,14 +58,14 @@ export default function DevicesPage() { showAnimation: false }); - // 添加轮询定时器引用 const pollingTimerRef = useRef(null); - const devicesPerPage = 20 // 每页显示20条记录 + const devicesPerPage = 20 + + const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false) + const [deviceToDelete, setDeviceToDelete] = useState(null) - // 获取设备列表 const loadDevices = useCallback(async (page: number, refresh: boolean = false) => { - // 检查是否已经在加载中，避免重复请求 if (isLoading) return; try { @@ -74,20 +73,17 @@ export default function DevicesPage() { 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({ @@ -95,16 +91,13 @@ export default function DevicesPage() { 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({ @@ -123,54 +116,37 @@ export default function DevicesPage() { } finally { setIsLoading(false) } - // 移除isLoading依赖，只保留真正需要的依赖 - }, [searchQuery]) // devicesPerPage是常量，不需要加入依赖 + }, [searchQuery]) - // 加载下一页数据的函数，使用ref来追踪页码，避免依赖循环 const loadNextPage = useCallback(() => { - // 如果正在加载或者没有更多数据，直接返回 if (isLoading || !hasMore) return; - // 使用ref来获取下一页码，避免依赖currentPage const nextPage = pageRef.current + 1; - // 设置UI显示的当前页 setCurrentPage(nextPage); - // 加载下一页数据 loadDevices(nextPage, false); - // 只依赖必要的状态 }, [hasMore, isLoading, loadDevices]); - // 追踪组件是否已挂载 const isMounted = useRef(true); - // 组件卸载时更新挂载状态 useEffect(() => { return () => { isMounted.current = false; }; }, []); - // 初始加载和搜索时刷新列表 useEffect(() => { - // 组件未挂载，不执行操作 if (!isMounted.current) return; - // 重置页码 setCurrentPage(1) pageRef.current = 1 - // 加载第一页数据 loadDevices(1, true) }, [searchQuery, loadDevices]) - // 无限滚动加载实现 useEffect(() => { - // 如果没有更多数据或者正在加载，不创建observer if (!hasMore || isLoading) return; - // 创建观察器观察加载点 const observer = new IntersectionObserver( entries => { - // 如果交叉了，且有更多数据，且当前不在加载状态，且组件仍然挂载 if (entries[0].isIntersecting && hasMore && !isLoading && isMounted.current) { loadNextPage(); } @@ -178,24 +154,20 @@ export default function DevicesPage() { { threshold: 0.5 } ) - // 只在客户端时观察节点 if (typeof window !== 'undefined' && observerTarget.current) { observer.observe(observerTarget.current) } - // 清理观察器 return () => { observer.disconnect(); } }, [hasMore, isLoading, loadNextPage]) - // 获取设备二维码 const fetchDeviceQRCode = async () => { try { setIsLoadingQRCode(true) - setQrCodeImage("") // 清空当前二维码 + setQrCodeImage("") - // 获取保存的accountId const accountId = localStorage.getItem('s2_accountId') if (!accountId) { toast({ @@ -206,7 +178,6 @@ export default function DevicesPage() { return } - // 发起请求获取二维码 - 直接使用fetch避免api工具添加基础URL const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/v1/api/device/add`, { method: 'POST', headers: { @@ -218,10 +189,8 @@ export default function DevicesPage() { }) }) - // 保存原始响应文本以便调试 const responseText = await response.text(); - // 尝试将响应解析为JSON let result; try { result = JSON.parse(responseText); @@ -235,7 +204,6 @@ export default function DevicesPage() { } if (result && result.code === 200) { - // 尝试多种可能的返回数据结构 let qrcodeData = null; if (result.data?.qrCode) { @@ -245,7 +213,6 @@ export default function DevicesPage() { } else if (result.data?.image) { qrcodeData = result.data.image; } else if (result.data?.url) { - // 如果返回的是URL而不是base64 qrcodeData = result.data.url; setQrCodeImage(qrcodeData); @@ -254,9 +221,8 @@ export default function DevicesPage() { description: "请使用手机扫描新的二维码添加设备", }); - return; // 直接返回，不进行base64处理 + return; } else if (typeof result.data === 'string') { - // 如果data直接是字符串 qrcodeData = result.data; } else { toast({ @@ -267,7 +233,6 @@ export default function DevicesPage() { return; } - // 检查数据是否为空 if (!qrcodeData) { toast({ title: "获取二维码失败", @@ -277,24 +242,18 @@ export default function DevicesPage() { return; } - // 检查是否已经是完整的data URL if (qrcodeData.startsWith('data:image')) { setQrCodeImage(qrcodeData); } - // 检查是否是URL else if (qrcodeData.startsWith('http')) { setQrCodeImage(qrcodeData); } - // 尝试作为base64处理 else { try { - // 确保base64字符串没有空格等干扰字符 const cleanedBase64 = qrcodeData.trim(); - // 直接以图片src格式设置 setQrCodeImage(`data:image/png;base64,${cleanedBase64}`); - // 预加载图片，确认是否有效 const img = new Image(); img.onload = () => { // 图片加载成功 @@ -339,7 +298,6 @@ export default function DevicesPage() { } } - // 清理轮询函数 const cleanupPolling = useCallback(() => { if (pollingTimerRef.current) { clearTimeout(pollingTimerRef.current); @@ -353,14 +311,12 @@ export default function DevicesPage() { }); }, []); - // 轮询检测设备添加状态 const startPolling = useCallback(() => { let pollCount = 0; const maxPolls = 60; - const pollInterval = 1000; // 1秒 - const initialDelay = 5000; // 5秒后开始轮询 + const pollInterval = 1000; + const initialDelay = 5000; - // 初始提示 setPollingStatus({ isPolling: false, message: '请扫描二维码添加设备，5秒后将开始检测添加结果', @@ -398,7 +354,7 @@ export default function DevicesPage() { messageType: 'success', showAnimation: false }); - setQrCodeImage('/broken-qr.png'); // 显示损坏的二维码 + setQrCodeImage('/broken-qr.png'); cleanupPolling(); return; } @@ -428,7 +384,6 @@ export default function DevicesPage() { } }; - // 5秒后开始轮询 pollingTimerRef.current = setTimeout(() => { setPollingStatus({ isPolling: true, @@ -440,7 +395,6 @@ export default function DevicesPage() { }, initialDelay); }, [cleanupPolling]); - // 修改打开添加设备模态框的处理函数 const handleOpenAddDeviceModal = () => { setIsAddDeviceOpen(true); setDeviceImei(""); @@ -456,13 +410,11 @@ export default function DevicesPage() { startPolling(); } - // 修改关闭模态框的处理函数 const handleCloseAddDeviceModal = () => { cleanupPolling(); setIsAddDeviceOpen(false); } - // 通过IMEI添加设备 const handleAddDeviceByImei = async () => { if (!deviceImei) { toast({ @@ -476,7 +428,6 @@ export default function DevicesPage() { try { setIsSubmittingImei(true); - // 使用api.post发送请求到/v1/devices const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/v1/devices`, { method: 'POST', headers: { @@ -490,10 +441,8 @@ export default function DevicesPage() { }) }); - // 保存原始响应文本以便调试 const responseText = await response.text(); - // 尝试将响应解析为JSON let result; try { result = JSON.parse(responseText); @@ -512,12 +461,10 @@ export default function DevicesPage() { description: result.data?.msg || "设备已成功添加", }); - // 清空输入并关闭弹窗 setDeviceImei(""); setDeviceName(""); setIsAddDeviceOpen(false); - // 刷新设备列表 loadDevices(1, true); } else { toast({ @@ -537,7 +484,6 @@ export default function DevicesPage() { } } - // 刷新设备列表 const handleRefresh = () => { setCurrentPage(1) pageRef.current = 1 @@ -548,7 +494,6 @@ export default function DevicesPage() { }) } - // 筛选设备 const filteredDevices = devices.filter(device => { const matchesStatus = statusFilter === "all" || (statusFilter === "online" && device.alive === 1) || @@ -556,57 +501,64 @@ export default function DevicesPage() { return matchesStatus }) - // 处理批量删除 - const handleBatchDelete = async () => { - if (selectedDevices.length === 0) { + const handleDeleteClick = () => { + if (!selectedDeviceId) { toast({ title: "请选择设备", - description: "您需要选择至少一个设备来执行批量删除操作", + description: "请先选择要删除的设备", variant: "destructive", }) return } + setDeviceToDelete(selectedDeviceId) + setIsDeleteDialogOpen(true) + } - // 这里需要实现批量删除逻辑 - // 目前只是单个删除的循环 - 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) + const handleConfirmDelete = async () => { + if (!deviceToDelete) return + + try { + const response = await deleteDevice(deviceToDelete) + if (response.code === 200) { + setIsDeleteDialogOpen(false) + setDeviceToDelete(null) + setSelectedDeviceId(null) + toast({ + title: "删除成功", + description: "设备已成功删除", + }) + handleRefresh() + } else { + toast({ + title: "删除失败", + description: response.message || "请稍后重试", + variant: "destructive", + }) + setIsDeleteDialogOpen(false) + setDeviceToDelete(null) } - } - - // 删除后刷新列表 - if (successCount > 0) { - toast({ - title: "批量删除成功", - description: `已删除 ${successCount} 个设备`, - }) - setSelectedDevices([]) - handleRefresh() - } else { + } catch (error) { + console.error(`删除设备 ${deviceToDelete} 失败`, error) toast({ - title: "批量删除失败", + title: "删除失败", description: "请稍后重试", variant: "destructive", }) + setIsDeleteDialogOpen(false) + setDeviceToDelete(null) } } - // 设备详情页跳转 + const handleCancelDelete = () => { + setIsDeleteDialogOpen(false) + setDeviceToDelete(null) + } + const handleDeviceClick = (deviceId: number, event: React.MouseEvent) => { - // 判断点击事件是否来自ImeiDisplay组件或其后代元素 - // 如果点击事件已经被处理（例如ImeiDisplay中已阻止传播），则不执行跳转 if (event.defaultPrevented) { return; } - // 如果点击的元素或其父元素有imei-display类，则不跳转 let target = event.target as HTMLElement; while (target && target !== event.currentTarget) { if (target.classList.contains('imei-display-area')) { @@ -618,7 +570,6 @@ export default function DevicesPage() { router.push(`/devices/${deviceId}`); } - // 处理添加设备 const handleAddDevice = async () => { try { const s2_accountId = localStorage.getItem('s2_accountId'); @@ -650,7 +601,6 @@ export default function DevicesPage() { variant: 'default', }); setIsAddDeviceOpen(false); - // 刷新设备列表 loadDevices(1, true); } else { toast({ @@ -728,25 +678,12 @@ export default function DevicesPage() { 离线 -
- 0} - onCheckedChange={(checked) => { - if (checked) { - setSelectedDevices(filteredDevices.map((d) => d.id)) - } else { - setSelectedDevices([]) - } - }} - /> - 全选 -
@@ -761,12 +698,12 @@ export default function DevicesPage() { >
{ if (checked) { - setSelectedDevices([...selectedDevices, device.id]) + setSelectedDeviceId(device.id) } else { - setSelectedDevices(selectedDevices.filter((id) => id !== device.id)) + setSelectedDeviceId(null) } }} onClick={(e) => e.stopPropagation()} @@ -791,7 +728,6 @@ export default function DevicesPage() { ))} - {/* 加载更多观察点 */}
{isLoading &&
加载中...
} {!hasMore && devices.length > 0 &&
没有更多设备了
} @@ -802,7 +738,6 @@ export default function DevicesPage() {
- {/* 修改添加设备对话框 */} { if (!open) { handleCloseAddDeviceModal(); @@ -814,20 +749,8 @@ export default function DevicesPage() { - {/* - - - 扫码添加 - - - - 手动添加 - - */} -
- {/* 悬浮提示区域，上移50% */}
{pollingStatus.isPolling || pollingStatus.showAnimation ? ( @@ -859,9 +782,7 @@ export default function DevicesPage() { className="w-full h-full object-contain" onError={(e) => { console.error("二维码图片加载失败"); - // 隐藏图片 e.currentTarget.style.display = 'none'; - // 显示错误信息 const container = document.getElementById('qrcode-container'); if (container) { const errorEl = container.querySelector('.qrcode-error'); @@ -920,7 +841,7 @@ export default function DevicesPage() {

为设备添加一个便于识别的名称

-
+
- + -
-
+
+ - {/* 在二维码显示区域下方添加状态提示 */}
{pollingStatus.message && (
@@ -970,6 +890,25 @@ export default function DevicesPage() {
)}
+ + + + + 确认删除 + + 设备删除后，本设备配置的计划任务操作也将失效。 + + + + + + + + ) } diff --git a/Server/application/cunkebao/controller/device/DeleteDeviceV1Controller.php b/Server/application/cunkebao/controller/device/DeleteDeviceV1Controller.php index 9d6642bf..a2b149ad 100644 --- a/Server/application/cunkebao/controller/device/DeleteDeviceV1Controller.php +++ b/Server/application/cunkebao/controller/device/DeleteDeviceV1Controller.php @@ -97,6 +97,7 @@ class DeleteDeviceV1Controller extends BaseController */ protected function deleteS2About(): self { + return $this; } /**