From 0335c8fc985137666f7ea362a51e037503b12f7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9F=B3=E6=B8=85=E7=88=BD?= <eison.icu@gmail.com>
Date: Wed, 2 Apr 2025 17:25:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=AE=BE=E5=A4=87=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=EF=BC=8C=E5=85=B3=E9=97=ADIMEI=E6=A8=A1?=
 =?UTF-8?q?=E6=80=81=E5=BC=B9=E6=A1=86=E6=97=B6=E8=87=AA=E5=8A=A8=E8=B7=B3?=
 =?UTF-8?q?=E8=BD=AC=E5=88=B0=E8=AE=BE=E5=A4=87=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Cunkebao/app/devices/[id]/page.tsx  |  2 +-
 Cunkebao/app/devices/page.tsx       | 23 +++++++++++++++++++----
 Cunkebao/app/globals.css            | 16 ++++++++++++++++
 Cunkebao/components/ImeiDisplay.tsx | 27 +++++++++++++++++++++++----
 4 files changed, 59 insertions(+), 9 deletions(-)

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" ? "在线" : "离线"}
                   </Badge>
                 </div>
-                <div className="text-sm text-gray-500 mt-1 flex items-center">
+                <div className="text-sm text-gray-500 mt-1 flex items-center imei-display-area">
                   <span className="mr-1 whitespace-nowrap">IMEI:</span> 
                   <ImeiDisplay imei={device.imei} containerWidth="max-w-[calc(100%-60px)]" />
                 </div>
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() {
                 <Card
                   key={device.id}
                   className="p-3 hover:shadow-md transition-shadow cursor-pointer relative"
-                  onClick={() => handleDeviceClick(device.id)}
+                  onClick={(e) => handleDeviceClick(device.id, e)}
                 >
                   <div className="flex items-center space-x-3">
                     <Checkbox
@@ -595,7 +610,7 @@ export default function DevicesPage() {
                           {device.status === "online" ? "在线" : "离线"}
                         </Badge>
                       </div>
-                      <div className="text-sm text-gray-500 flex items-center">
+                      <div className="text-sm text-gray-500 flex items-center imei-display-area">
                         <span className="mr-1">IMEI:</span>
                         <ImeiDisplay imei={device.imei} containerWidth={180} />
                       </div>
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 (
     <>
       <span 
-        className={`cursor-pointer hover:text-blue-600 truncate inline-block ${widthStyle} ${className}`}
+        className={`cursor-pointer hover:text-blue-600 truncate inline-block imei-display ${widthStyle} ${className}`}
         onClick={(e) => {
+          e.preventDefault()
           e.stopPropagation()
           setOpen(true)
+          // 防止冒泡到Card的点击事件
+          return false
         }}
         title={imei}
       >
         {imei}
       </span>
       
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="sm:max-w-md">
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogContent className="sm:max-w-md" onClick={(e) => e.stopPropagation()}>
           <DialogHeader>
             <DialogTitle>设备IMEI</DialogTitle>
             <DialogDescription>
@@ -108,7 +124,10 @@ export function ImeiDisplay({ imei, className = "", containerWidth = "max-w-[cal
             <Button 
               variant="outline" 
               size="icon" 
-              onClick={handleCopy} 
+              onClick={(e) => {
+                e.stopPropagation()
+                handleCopy()
+              }} 
               title="复制IMEI"
             >
               <Copy className="h-4 w-4" />