修复设备管理页，关闭IMEI模态弹框时自动跳转到设备详情页的问题。

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>

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>

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;
+}
+

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" />