修复设备列表页IMEI过长换行的问题

2025-04-02 16:50:32 +08:00
parent c92292ba62
commit e834e99a6b
9 changed files with 223 additions and 35 deletions
--- a/Cunkebao/app/components/DeviceSelector.tsx
+++ b/Cunkebao/app/components/DeviceSelector.tsx
@@ -18,6 +18,7 @@ import {
  PaginationNext,
  PaginationPrevious,
 } from "@/components/ui/pagination"
+import { ImeiDisplay } from "@/components/ImeiDisplay"

 interface WechatAccount {
  wechatId: string
@@ -169,7 +170,10 @@ export function DeviceSelector({
                    {device.status === "online" ? "在线" : "离线"}
                  </div>
                </div>
-                <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
+                <div className="text-sm text-gray-500 flex items-center">
+                  <span className="mr-1">IMEI:</span>
+                  <ImeiDisplay imei={device.imei} containerWidth={160} />
+                </div>
                <div className="mt-2 space-y-2">
                  {device.wechatAccounts.map((account) => (
                    <div key={account.wechatId} className="bg-gray-50 rounded-lg p-2">
--- a/Cunkebao/app/components/device-grid.tsx
+++ b/Cunkebao/app/components/device-grid.tsx
@@ -6,6 +6,7 @@ import { Badge } from "@/components/ui/badge"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Battery, Smartphone, MessageCircle, Users, Clock } from "lucide-react"
+import { ImeiDisplay } from "@/components/ImeiDisplay"

 export interface Device {
  id: string
@@ -88,11 +89,15 @@ export function DeviceGrid({
                />
              )}
              <div className="flex-1 space-y-2">
-                <div className="flex items-center justify-between">
-                  <div className="font-medium">{device.name}</div>
-                  <Badge variant={device.status === "online" ? "success" : "secondary"}>
-                    {device.status === "online" ? "在线" : "离线"}
-                  </Badge>
+                <div className="relative">
+                  <div className="flex items-center justify-between">
+                    <div className="font-medium">{device.name}</div>
+                    <div className="absolute top-2 right-2">
+                      <Badge variant={device.status === "online" ? "default" : "secondary"}>
+                        {device.status === "online" ? "在线" : "离线"}
+                      </Badge>
+                    </div>
+                  </div>
                </div>

                <div className="grid grid-cols-2 gap-2 text-sm text-gray-500">
@@ -142,10 +147,13 @@ export function DeviceGrid({
                  </div>
                  <div>
                    <h3 className="font-medium">{selectedDevice.name}</h3>
-                    <p className="text-sm text-gray-500">IMEI: {selectedDevice.imei}</p>
+                    <p className="text-sm text-gray-500 flex items-center">
+                      <span className="mr-1">IMEI:</span>
+                      <ImeiDisplay imei={selectedDevice.imei} containerWidth={160} />
+                    </p>
                  </div>
                </div>
-                <Badge variant={selectedDevice.status === "online" ? "success" : "secondary"}>
+                <Badge variant={selectedDevice.status === "online" ? "default" : "secondary"}>
                  {selectedDevice.status === "online" ? "在线" : "离线"}
                </Badge>
              </div>
--- a/Cunkebao/app/components/device-selection-dialog.tsx
+++ b/Cunkebao/app/components/device-selection-dialog.tsx
@@ -11,6 +11,7 @@ import { Card } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { ImeiDisplay } from "@/components/ImeiDisplay"

 interface WechatAccount {
  wechatId: string
@@ -278,7 +279,10 @@ export function DeviceSelectionDialog({
                            {device.status === "online" ? "在线" : "离线"}
                          </div>
                        </div>
-                        <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
+                        <div className="text-sm text-gray-500 flex items-center">
+                          <span className="mr-1">IMEI:</span>
+                          <ImeiDisplay imei={device.imei} containerWidth={160} />
+                        </div>

                        {/* 微信账号信息 */}
                        <div className="mt-2 space-y-2">
--- a/Cunkebao/app/devices/[id]/page.tsx
+++ b/Cunkebao/app/devices/[id]/page.tsx
@@ -12,6 +12,7 @@ import { Label } from "@/components/ui/label"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { fetchDeviceDetail, fetchDeviceRelatedAccounts, updateDeviceTaskConfig, fetchDeviceHandleLogs } from "@/api/devices"
 import { toast } from "sonner"
+import { ImeiDisplay } from "@/components/ImeiDisplay"

 interface WechatAccount {
  id: string
@@ -439,7 +440,10 @@ export default function DeviceDetailPage() {
                    {device.status === "online" ? "在线" : "离线"}
                  </Badge>
                </div>
-                <div className="text-sm text-gray-500 mt-1">IMEI: {device.imei}</div>
+                <div className="text-sm text-gray-500 mt-1 flex items-center">
+                  <span className="mr-1 whitespace-nowrap">IMEI:</span> 
+                  <ImeiDisplay imei={device.imei} containerWidth="max-w-[calc(100%-60px)]" />
+                </div>
                {device.historicalIds && device.historicalIds.length > 0 && (
                  <div className="text-sm text-gray-500">历史ID: {device.historicalIds.join(", ")}</div>
                )}
--- a/Cunkebao/app/devices/page.tsx
+++ b/Cunkebao/app/devices/page.tsx
@@ -15,6 +15,7 @@ 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"

 // 设备接口更新为与服务端接口对应的类型
 interface Device extends ServerDevice {
@@ -594,7 +595,10 @@ export default function DevicesPage() {
                          {device.status === "online" ? "在线" : "离线"}
                        </Badge>
                      </div>
-                      <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
+                      <div className="text-sm text-gray-500 flex items-center">
+                        <span className="mr-1">IMEI:</span>
+                        <ImeiDisplay imei={device.imei} containerWidth={180} />
+                      </div>
                      <div className="text-sm text-gray-500">微信号: {device.wechatId || "未绑定"}</div>
                      <div className="flex items-center justify-between mt-1 text-sm">
                        <span className="text-gray-500">好友数: {device.totalFriend}</span>
--- a/Cunkebao/app/workspace/moments-sync/components/device-selection-dialog.tsx
+++ b/Cunkebao/app/workspace/moments-sync/components/device-selection-dialog.tsx
@@ -9,6 +9,7 @@ import { Search, RefreshCw } from "lucide-react"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { ImeiDisplay } from "@/components/ImeiDisplay"

 interface Device {
  id: string
@@ -123,12 +124,15 @@ export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onS
                <div className="flex-1">
                  <div className="flex items-center justify-between">
                    <span className="font-medium">{device.name}</span>
-                    <Badge variant={device.status === "online" ? "success" : "secondary"}>
+                    <Badge variant={device.status === "online" ? "default" : "secondary"}>
                      {device.status === "online" ? "在线" : "离线"}
                    </Badge>
                  </div>
                  <div className="text-sm text-gray-500 mt-1">
-                    <div>IMEI: {device.imei}</div>
+                    <div className="flex items-center">
+                      <span className="mr-1">IMEI:</span>
+                      <ImeiDisplay imei={device.imei} containerWidth={160} />
+                    </div>
                    <div>微信号: {device.wxid}</div>
                  </div>
                  {device.usedInPlans > 0 && (
--- a/Cunkebao/app/workspace/moments-sync/new/steps/DeviceSelector.tsx
+++ b/Cunkebao/app/workspace/moments-sync/new/steps/DeviceSelector.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from "react"
 import { Card } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { Search, RefreshCw, X } from "lucide-react"
+import { Search, RefreshCw, X, ChevronLeft, ChevronRight } 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"
@@ -17,6 +17,7 @@ import {
  PaginationNext,
  PaginationPrevious,
 } from "@/components/ui/pagination"
+import { ImeiDisplay } from "@/components/ImeiDisplay"

 // 定义类型，避免导入错误
 interface Device {
@@ -148,6 +149,16 @@ export function DeviceSelector({ formData, onChange, onNext, onPrev }: DeviceSel
    }
  }

+  const handlePrevPage = () => {
+    setCurrentPage((prev) => Math.max(1, prev - 1))
+  }
+
+  const handleNextPage = () => {
+    setCurrentPage((prev) => Math.min(Math.ceil(filteredDevices.length / itemsPerPage), prev + 1))
+  }
+
+  const isLastPage = currentPage === Math.ceil(filteredDevices.length / itemsPerPage)
+
  return (
    <Card className="p-6">
      <div className="space-y-4">
@@ -193,15 +204,14 @@ export function DeviceSelector({ formData, onChange, onNext, onPrev }: DeviceSel
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between mb-1">
                    <div className="font-medium truncate">{device.name}</div>
-                    <div
-                      className={`px-2 py-1 rounded-full text-xs ${
-                        device.status === "online" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
-                      }`}
-                    >
+                    <Badge variant={device.status === "online" ? "default" : "secondary"}>
                      {device.status === "online" ? "在线" : "离线"}
-                    </div>
+                    </Badge>
+                  </div>
+                  <div className="text-sm text-gray-500 flex items-center">
+                    <span className="mr-1">IMEI:</span>
+                    <ImeiDisplay imei={device.imei} containerWidth={160} />
                  </div>
-                  <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
                  <div className="text-sm text-gray-500">微信号: {device.wechatId}</div>
                  {device.usedInPlans > 0 && (
                    <div className="text-sm text-orange-500">已用于 {device.usedInPlans} 个计划</div>
@@ -211,24 +221,25 @@ export function DeviceSelector({ formData, onChange, onNext, onPrev }: DeviceSel
            </Card>
          ))}
        </div>
-        <Pagination>
+        <Pagination className="mt-4">
          <PaginationContent>
            <PaginationPrevious
-              onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+              onClick={handlePrevPage}
              disabled={currentPage === 1}
            />
-            {Array.from({ length: Math.ceil(filteredDevices.length / itemsPerPage) }, (_, i) => i + 1).map((page) => (
-              <PaginationItem key={page}>
-                <PaginationLink onClick={() => setCurrentPage(page)} isActive={currentPage === page}>
-                  {page}
+            {Array.from({ length: Math.ceil(filteredDevices.length / itemsPerPage) }).map((_, index) => (
+              <PaginationItem key={index}>
+                <PaginationLink
+                  onClick={() => setCurrentPage(index + 1)}
+                  isActive={currentPage === index + 1}
+                >
+                  {index + 1}
                </PaginationLink>
              </PaginationItem>
            ))}
            <PaginationNext
-              onClick={() =>
-                setCurrentPage((prev) => Math.min(Math.ceil(filteredDevices.length / itemsPerPage), prev + 1))
-              }
-              disabled={currentPage === Math.ceil(filteredDevices.length / itemsPerPage)}
+              onClick={handleNextPage}
+              disabled={isLastPage}
            />
          </PaginationContent>
        </Pagination>
@@ -268,6 +279,30 @@ export function DeviceSelector({ formData, onChange, onNext, onPrev }: DeviceSel
            下一步
          </Button>
        </div>
+
+        <div className="flex justify-center items-center space-x-2 mt-4">
+          <Button 
+            variant="outline" 
+            size="icon" 
+            onClick={handlePrevPage} 
+            disabled={currentPage === 1}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          
+          <div className="text-sm text-gray-500">
+            {currentPage} / {Math.ceil(filteredDevices.length / itemsPerPage)}
+          </div>
+          
+          <Button 
+            variant="outline" 
+            size="icon" 
+            onClick={handleNextPage} 
+            disabled={isLastPage}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
      </div>
    </Card>
  )
--- a/Cunkebao/components/ImeiDisplay.tsx
+++ b/Cunkebao/components/ImeiDisplay.tsx
@@ -0,0 +1,121 @@
+"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"
+      })
+    }
+  }
+
+  // 处理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 ${widthStyle} ${className}`}
+        onClick={(e) => {
+          e.stopPropagation()
+          setOpen(true)
+        }}
+        title={imei}
+      >
+        {imei}
+      </span>
+      
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-md">
+          <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={handleCopy} 
+              title="复制IMEI"
+            >
+              <Copy className="h-4 w-4" />
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+} 
--- a/Cunkebao/components/device-grid.tsx
+++ b/Cunkebao/components/device-grid.tsx
@@ -2,8 +2,9 @@

 import { Card } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import { Smartphone, Battery, Users, MessageCircle } from "lucide-react"
+import { Smartphone, Battery, Users, MessageCircle, Clock } from "lucide-react"
 import { Checkbox } from "@/components/ui/checkbox"
+import { ImeiDisplay } from "@/components/ImeiDisplay"

 export interface Device {
  id: string
@@ -54,7 +55,7 @@ export function DeviceGrid({ devices, selectable, selectedDevices, onSelect, dev
            )}
            <div className="flex flex-col space-y-4">
              <div className="flex items-center justify-between">
-                <Badge variant={currentStatus.status === "online" ? "success" : "secondary"}>
+                <Badge variant={currentStatus.status === "online" ? "default" : "secondary"}>
                  {currentStatus.status === "online" ? "在线" : "离线"}
                </Badge>
                <div className="flex items-center space-x-2">
@@ -68,7 +69,10 @@ export function DeviceGrid({ devices, selectable, selectedDevices, onSelect, dev
                  <Smartphone className="w-4 h-4 text-gray-400" />
                  <div>
                    <div className="text-sm font-medium">{device.name}</div>
-                    <div className="text-xs text-gray-500">IMEI-{device.imei}</div>
+                    <div className="text-xs text-gray-500 flex items-center">
+                      <span className="mr-1">IMEI:</span>
+                      <ImeiDisplay imei={device.imei} containerWidth={80} />
+                    </div>
                  </div>
                </div>
                {device.remark && <div className="text-xs text-gray-500">备注: {device.remark}</div>}
@@ -90,7 +94,7 @@ export function DeviceGrid({ devices, selectable, selectedDevices, onSelect, dev
                <div>今日添加：{device.todayAdded}</div>
                <div>
                  加友状态：
-                  <Badge variant={device.addFriendStatus === "normal" ? "success" : "destructive"}>
+                  <Badge variant={device.addFriendStatus === "normal" ? "default" : "destructive"}>
                    {device.addFriendStatus === "normal" ? "正常" : "异常"}
                  </Badge>
                </div>