diff --git a/Cunkebao/app/devices/[id]/page.tsx b/Cunkebao/app/devices/[id]/page.tsx index 9a2596d11..d93a02aac 100755 --- a/Cunkebao/app/devices/[id]/page.tsx +++ b/Cunkebao/app/devices/[id]/page.tsx @@ -440,7 +440,7 @@ export default function DeviceDetailPage() { {device.status === "online" ? "在线" : "离线"} -
+
IMEI:
diff --git a/Cunkebao/app/devices/page.tsx b/Cunkebao/app/devices/page.tsx index 3fae1f18c..39a5e8082 100755 --- a/Cunkebao/app/devices/page.tsx +++ b/Cunkebao/app/devices/page.tsx @@ -480,8 +480,23 @@ export default function DevicesPage() { } // 设备详情页跳转 - const handleDeviceClick = (deviceId: number) => { - router.push(`/devices/${deviceId}`) + 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')) { + return; + } + target = target.parentElement as HTMLElement; + } + + router.push(`/devices/${deviceId}`); } return ( @@ -574,7 +589,7 @@ export default function DevicesPage() { handleDeviceClick(device.id)} + onClick={(e) => handleDeviceClick(device.id, e)} >
-
+
IMEI:
diff --git a/Cunkebao/app/globals.css b/Cunkebao/app/globals.css index 78957f6a0..db743c5cd 100755 --- a/Cunkebao/app/globals.css +++ b/Cunkebao/app/globals.css @@ -75,3 +75,19 @@ body { min-width: 0; } +/* 修复IMEI显示模态框点击事件问题 */ +.imei-display { + position: relative; + z-index: 10; +} + +.imei-display-area { + position: relative; + z-index: 5; +} + +/* 增强模态框的点击隔离 */ +[role="dialog"] { + isolation: isolate; +} + diff --git a/Cunkebao/components/ImeiDisplay.tsx b/Cunkebao/components/ImeiDisplay.tsx index ef95a33e3..c120b913a 100644 --- a/Cunkebao/components/ImeiDisplay.tsx +++ b/Cunkebao/components/ImeiDisplay.tsx @@ -72,6 +72,19 @@ export function ImeiDisplay({ imei, className = "", containerWidth = "max-w-[cal } } + // 处理Dialog打开和关闭 + const handleOpenChange = (newOpen: boolean) => { + // 如果是关闭操作,阻止事件冒泡 + if (!newOpen) { + // 使用setTimeout确保事件处理完成后再关闭模态框 + setTimeout(() => { + setOpen(false) + }, 0) + } else { + setOpen(true) + } + } + // 处理containerWidth为数字的情况 const widthStyle = typeof containerWidth === 'number' ? `max-w-[${containerWidth}px]` @@ -85,18 +98,21 @@ export function ImeiDisplay({ imei, className = "", containerWidth = "max-w-[cal return ( <> { + e.preventDefault() e.stopPropagation() setOpen(true) + // 防止冒泡到Card的点击事件 + return false }} title={imei} > {imei} - - + + e.stopPropagation()}> 设备IMEI @@ -108,7 +124,10 @@ export function ImeiDisplay({ imei, className = "", containerWidth = "max-w-[cal