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

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

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>

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

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>
                 )}

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>

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 && (

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>
   )