140 lines
3.9 KiB
TypeScript
140 lines
3.9 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogDescription
|
||
} from "@/components/ui/dialog"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Copy } from "lucide-react"
|
||
import { toast } from "@/components/ui/use-toast"
|
||
|
||
interface ImeiDisplayProps {
|
||
imei: string
|
||
className?: string
|
||
containerWidth?: string | number // 可以接受字符串或数字类型的容器宽度配置
|
||
}
|
||
|
||
export function ImeiDisplay({ imei, className = "", containerWidth = "max-w-[calc(100%-40px)]" }: ImeiDisplayProps) {
|
||
// 初始状态设为false，确保服务端渲染和客户端水合时状态一致
|
||
const [open, setOpen] = useState(false)
|
||
const [mounted, setMounted] = useState(false)
|
||
|
||
// 确保只在客户端执行的初始化逻辑
|
||
useEffect(() => {
|
||
setMounted(true)
|
||
}, [])
|
||
|
||
const handleCopy = () => {
|
||
// 只在客户端执行
|
||
if (typeof navigator === 'undefined') return
|
||
|
||
try {
|
||
if (navigator.clipboard) {
|
||
navigator.clipboard.writeText(imei)
|
||
toast({
|
||
title: "已复制",
|
||
description: "IMEI已复制到剪贴板",
|
||
})
|
||
} else {
|
||
// 备用复制方法
|
||
const textArea = document.createElement("textarea")
|
||
textArea.value = imei
|
||
document.body.appendChild(textArea)
|
||
textArea.focus()
|
||
textArea.select()
|
||
|
||
try {
|
||
document.execCommand('copy')
|
||
toast({
|
||
title: "已复制",
|
||
description: "IMEI已复制到剪贴板",
|
||
})
|
||
} catch (err) {
|
||
toast({
|
||
title: "复制失败",
|
||
description: "您的浏览器不支持自动复制",
|
||
variant: "destructive"
|
||
})
|
||
}
|
||
|
||
document.body.removeChild(textArea)
|
||
}
|
||
} catch (err) {
|
||
toast({
|
||
title: "复制失败",
|
||
description: "您的浏览器不支持自动复制",
|
||
variant: "destructive"
|
||
})
|
||
}
|
||
}
|
||
|
||
// 处理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]`
|
||
: containerWidth
|
||
|
||
// 服务端渲染时，仅返回静态内容
|
||
if (!mounted) {
|
||
return <span className={`truncate inline-block ${widthStyle} ${className}`}>{imei}</span>
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<span
|
||
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={handleOpenChange}>
|
||
<DialogContent className="sm:max-w-md" onClick={(e) => e.stopPropagation()}>
|
||
<DialogHeader>
|
||
<DialogTitle>设备IMEI</DialogTitle>
|
||
<DialogDescription>
|
||
完整的设备唯一标识符
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="flex items-center space-x-2 bg-gray-50 p-3 rounded-md">
|
||
<code className="flex-1 text-sm break-all">{imei}</code>
|
||
<Button
|
||
variant="outline"
|
||
size="icon"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleCopy()
|
||
}}
|
||
title="复制IMEI"
|
||
>
|
||
<Copy className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</>
|
||
)
|
||
}
|