Merge branch 'develop' of https://e.coding.net/g-xtcy5189/cunkebao/cunkebao_v3 into develop

Cunkebao/app/components/device-grid.tsx

@@ -1,12 +1,15 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Card } from "@/components/ui/card"
 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 { Battery, Smartphone, MessageCircle, Users, Clock, Search, Power, RefreshCcw, Settings, AlertTriangle } from "lucide-react"
 import { ImeiDisplay } from "@/components/ImeiDisplay"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
 export interface Device {
   id: string
@@ -38,32 +41,55 @@ export function DeviceGrid({
   itemsPerRow = 2,
 }: DeviceGridProps) {
   const [selectedDevice, setSelectedDevice] = useState<Device | null>(null)
+  const [searchTerm, setSearchTerm] = useState("")
+  const [filteredDevices, setFilteredDevices] = useState(devices)
+
+  useEffect(() => {
+    const filtered = devices.filter(
+      (device) =>
+        device.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        device.imei.includes(searchTerm) ||
+        device.wechatId.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+    setFilteredDevices(filtered)
+  }, [searchTerm, devices])
 
   const handleSelectAll = () => {
-    if (selectedDevices.length === devices.length) {
+    if (selectedDevices.length === filteredDevices.length) {
       onSelect?.([])
     } else {
-      onSelect?.(devices.map((d) => d.id))
+      onSelect?.(filteredDevices.map((d) => d.id))
     }
   }
 
   return (
     <div className="space-y-4">
-      {selectable && (
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-        <div className="flex items-center justify-between">
+        <div className="relative w-full sm:w-64">
-          <div className="flex items-center space-x-2">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
-            <Checkbox
+          <Input
-              checked={selectedDevices.length === devices.length && devices.length > 0}
+            placeholder="搜索设备..."
-              onCheckedChange={handleSelectAll}
+            className="pl-8"
-            />
+            value={searchTerm}
-            <span className="text-sm">全选</span>
+            onChange={(e) => setSearchTerm(e.target.value)}
-          </div>
+          />
-          <span className="text-sm text-gray-500">已选择 {selectedDevices.length} 个设备</span>
         </div>
-      )}
+        {selectable && (
+          <div className="flex items-center justify-between w-full sm:w-auto">
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                checked={selectedDevices.length === filteredDevices.length && filteredDevices.length > 0}
+                onCheckedChange={handleSelectAll}
+              />
+              <span className="text-sm">全选</span>
+            </div>
+            <span className="text-sm text-gray-500 ml-4">已选择 {selectedDevices.length} 个设备</span>
+          </div>
+        )}
+      </div>
 
-      <div className={`grid grid-cols-${itemsPerRow} gap-4`}>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {devices.map((device) => (
+        {filteredDevices.map((device) => (
           <Card
             key={device.id}
             className={`p-4 hover:shadow-md transition-all cursor-pointer ${
@@ -91,42 +117,75 @@ export function DeviceGrid({
               <div className="flex-1 space-y-2">
                 <div className="relative">
                   <div className="flex items-center justify-between">
-                    <div className="font-medium">{device.name}</div>
+                    <div className="font-medium flex items-center">
-                    <div className="absolute top-2 right-2">
+                      <span>{device.name}</span>
-                      <Badge variant={device.status === "online" ? "default" : "secondary"}>
+                      {device.addFriendStatus === "abnormal" && (
-                        {device.status === "online" ? "在线" : "离线"}
+                        <Badge variant="destructive" className="ml-2 text-xs">
+                          加友异常
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="absolute top-0 right-0">
+                      <Badge 
+                        variant={device.status === "online" ? "default" : "secondary"}
+                        className={`${
+                          device.status === "online" 
+                            ? "bg-green-100 text-green-800 hover:bg-green-200" 
+                            : "bg-gray-100 text-gray-800 hover:bg-gray-200"
+                        }`}
+                      >
+                        <div className="flex items-center space-x-1">
+                          <div className={`w-2 h-2 rounded-full ${
+                            device.status === "online" ? "bg-green-500" : "bg-gray-500"
+                          }`} />
+                          <span>{device.status === "online" ? "在线" : "离线"}</span>
+                        </div>
                       </Badge>
                     </div>
                   </div>
                 </div>
 
-                <div className="grid grid-cols-2 gap-2 text-sm text-gray-500">
+                <div className="grid grid-cols-2 gap-3 text-sm">
-                  <div className="flex items-center space-x-1">
+                  <div className="flex items-center space-x-2 bg-gray-50 rounded-lg p-2">
-                    <Battery className={`w-4 h-4 ${device.battery < 20 ? "text-red-500" : "text-green-500"}`} />
+                    <Battery className={`w-4 h-4 ${
-                    <span>{device.battery}%</span>
+                      device.battery < 20 
+                        ? "text-red-500" 
+                        : device.battery < 50 
+                        ? "text-yellow-500" 
+                        : "text-green-500"
+                    }`} />
+                    <span className={`${
+                      device.battery < 20 
+                        ? "text-red-700" 
+                        : device.battery < 50 
+                        ? "text-yellow-700" 
+                        : "text-green-700"
+                    }`}>{device.battery}%</span>
                   </div>
-                  <div className="flex items-center space-x-1">
+                  <div className="flex items-center space-x-2 bg-gray-50 rounded-lg p-2">
-                    <Users className="w-4 h-4" />
+                    <Users className="w-4 h-4 text-blue-500" />
-                    <span>{device.friendCount}</span>
+                    <span className="text-blue-700">{device.friendCount}</span>
                   </div>
-                  <div className="flex items-center space-x-1">
+                  <div className="flex items-center space-x-2 bg-gray-50 rounded-lg p-2">
-                    <MessageCircle className="w-4 h-4" />
+                    <MessageCircle className="w-4 h-4 text-purple-500" />
-                    <span>{device.messageCount}</span>
+                    <span className="text-purple-700">{device.messageCount}</span>
                   </div>
-                  <div className="flex items-center space-x-1">
+                  <div className="flex items-center space-x-2 bg-gray-50 rounded-lg p-2">
-                    <Clock className="w-4 h-4" />
+                    <Clock className="w-4 h-4 text-indigo-500" />
-                    <span>+{device.todayAdded}</span>
+                    <span className="text-indigo-700">+{device.todayAdded}</span>
                   </div>
                 </div>
 
-                <div className="text-sm text-gray-500">
+                <div className="text-sm space-y-1.5 mt-3">
-                  <div>IMEI: {device.imei}</div>
+                  <div className="flex items-center text-gray-600">
-                  <div>微信号: {device.wechatId}</div>
+                    <span className="w-16">IMEI:</span>
+                    <ImeiDisplay imei={device.imei} containerWidth={120} />
+                  </div>
+                  <div className="flex items-center text-gray-600">
+                    <span className="w-16">微信号:</span>
+                    <span className="font-mono">{device.wechatId}</span>
+                  </div>
                 </div>
-
-                <Badge variant={device.addFriendStatus === "normal" ? "outline" : "destructive"} className="mt-2">
-                  {device.addFriendStatus === "normal" ? "加友正常" : "加友异常"}
-                </Badge>
               </div>
             </div>
           </Card>
@@ -134,77 +193,144 @@ export function DeviceGrid({
       </div>
 
       <Dialog open={!!selectedDevice} onOpenChange={() => setSelectedDevice(null)}>
-        <DialogContent>
+        <DialogContent className="max-w-3xl">
           <DialogHeader>
             <DialogTitle>设备详情</DialogTitle>
           </DialogHeader>
           {selectedDevice && (
-            <div className="space-y-4">
+            <div className="space-y-6">
               <div className="flex items-center justify-between">
                 <div className="flex items-center space-x-3">
-                  <div className="p-3 bg-gray-100 rounded-lg">
+                  <div className={`p-3 rounded-lg ${
-                    <Smartphone className="w-6 h-6" />
+                    selectedDevice.status === "online" 
+                      ? "bg-green-100" 
+                      : "bg-gray-100"
+                  }`}>
+                    <Smartphone className={`w-6 h-6 ${
+                      selectedDevice.status === "online"
+                        ? "text-green-700"
+                        : "text-gray-700"
+                    }`} />
                   </div>
                   <div>
-                    <h3 className="font-medium">{selectedDevice.name}</h3>
+                    <h3 className="font-medium flex items-center space-x-2">
-                    <p className="text-sm text-gray-500 flex items-center">
+                      <span>{selectedDevice.name}</span>
-                      <span className="mr-1">IMEI:</span>
+                      <Badge 
-                      <ImeiDisplay imei={selectedDevice.imei} containerWidth={160} />
+                        variant={selectedDevice.status === "online" ? "default" : "secondary"}
-                    </p>
+                        className={`${
+                          selectedDevice.status === "online" 
+                            ? "bg-green-100 text-green-800" 
+                            : "bg-gray-100 text-gray-800"
+                        }`}
+                      >
+                        <div className="flex items-center space-x-1">
+                          <div className={`w-2 h-2 rounded-full ${
+                            selectedDevice.status === "online" ? "bg-green-500" : "bg-gray-500"
+                          }`} />
+                          <span>{selectedDevice.status === "online" ? "在线" : "离线"}</span>
+                        </div>
+                      </Badge>
+                    </h3>
+                    <div className="text-sm text-gray-500 mt-1 space-x-4">
+                      <span>IMEI: <ImeiDisplay imei={selectedDevice.imei} containerWidth={160} /></span>
+                      <span>微信号: {selectedDevice.wechatId}</span>
+                    </div>
                   </div>
                 </div>
-                <Badge variant={selectedDevice.status === "online" ? "default" : "secondary"}>
+                <div className="flex items-center space-x-2">
-                  {selectedDevice.status === "online" ? "在线" : "离线"}
+                  <Button variant="outline" size="sm" className="space-x-1">
-                </Badge>
+                    <RefreshCcw className="w-4 h-4" />
-              </div>
+                    <span>刷新</span>
-
+                  </Button>
-              <div className="grid grid-cols-2 gap-4">
+                  <Button variant="outline" size="sm" className="space-x-1">
-                <div className="space-y-1">
+                    <Power className="w-4 h-4" />
-                  <div className="text-sm text-gray-500">电池电量</div>
+                    <span>重启</span>
-                  <div className="flex items-center space-x-2">
+                  </Button>
-                    <Battery className={`w-5 h-5 ${selectedDevice.battery < 20 ? "text-red-500" : "text-green-500"}`} />
+                  <Button variant="outline" size="sm">
-                    <span className="font-medium">{selectedDevice.battery}%</span>
+                    <Settings className="w-4 h-4" />
-                  </div>
+                  </Button>
-                </div>
-                <div className="space-y-1">
-                  <div className="text-sm text-gray-500">好友数量</div>
-                  <div className="flex items-center space-x-2">
-                    <Users className="w-5 h-5 text-blue-500" />
-                    <span className="font-medium">{selectedDevice.friendCount}</span>
-                  </div>
-                </div>
-                <div className="space-y-1">
-                  <div className="text-sm text-gray-500">今日新增</div>
-                  <div className="flex items-center space-x-2">
-                    <Users className="w-5 h-5 text-green-500" />
-                    <span className="font-medium">+{selectedDevice.todayAdded}</span>
-                  </div>
-                </div>
-                <div className="space-y-1">
-                  <div className="text-sm text-gray-500">消息数量</div>
-                  <div className="flex items-center space-x-2">
-                    <MessageCircle className="w-5 h-5 text-purple-500" />
-                    <span className="font-medium">{selectedDevice.messageCount}</span>
-                  </div>
                 </div>
               </div>
 
-              <div className="space-y-2">
+              <Tabs defaultValue="status" className="w-full">
-                <div className="text-sm text-gray-500">微信账号</div>
+                <TabsList className="grid w-full grid-cols-4">
-                <div className="font-medium">{selectedDevice.wechatId}</div>
+                  <TabsTrigger value="status">状态信息</TabsTrigger>
-              </div>
+                  <TabsTrigger value="stats">统计数据</TabsTrigger>
+                  <TabsTrigger value="tasks">任务管理</TabsTrigger>
+                  <TabsTrigger value="logs">运行日志</TabsTrigger>
+                </TabsList>
+                <TabsContent value="status" className="space-y-4">
+                  <div className="grid grid-cols-2 gap-4 mt-4">
+                    <div className="space-y-1 bg-gray-50 p-4 rounded-lg">
+                      <div className="text-sm text-gray-500">电池电量</div>
+                      <div className="flex items-center space-x-2">
+                        <Battery className={`w-5 h-5 ${
+                          selectedDevice.battery < 20 
+                            ? "text-red-500" 
+                            : selectedDevice.battery < 50 
+                            ? "text-yellow-500"
+                            : "text-green-500"
+                        }`} />
+                        <span className={`font-medium ${
+                          selectedDevice.battery < 20 
+                            ? "text-red-700" 
+                            : selectedDevice.battery < 50 
+                            ? "text-yellow-700"
+                            : "text-green-700"
+                        }`}>{selectedDevice.battery}%</span>
+                      </div>
+                    </div>
+                    <div className="space-y-1 bg-gray-50 p-4 rounded-lg">
+                      <div className="text-sm text-gray-500">好友数量</div>
+                      <div className="flex items-center space-x-2">
+                        <Users className="w-5 h-5 text-blue-500" />
+                        <span className="font-medium text-blue-700">{selectedDevice.friendCount}</span>
+                      </div>
+                    </div>
+                    <div className="space-y-1 bg-gray-50 p-4 rounded-lg">
+                      <div className="text-sm text-gray-500">今日新增</div>
+                      <div className="flex items-center space-x-2">
+                        <Users className="w-5 h-5 text-green-500" />
+                        <span className="font-medium text-green-700">+{selectedDevice.todayAdded}</span>
+                      </div>
+                    </div>
+                    <div className="space-y-1 bg-gray-50 p-4 rounded-lg">
+                      <div className="text-sm text-gray-500">消息数量</div>
+                      <div className="flex items-center space-x-2">
+                        <MessageCircle className="w-5 h-5 text-purple-500" />
+                        <span className="font-medium text-purple-700">{selectedDevice.messageCount}</span>
+                      </div>
+                    </div>
+                  </div>
 
-              <div className="space-y-2">
+                  {selectedDevice.addFriendStatus === "abnormal" && (
-                <div className="text-sm text-gray-500">最后活跃</div>
+                    <div className="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
-                <div className="font-medium">{selectedDevice.lastActive}</div>
+                      <div className="flex items-center space-x-2 text-red-800">
-              </div>
+                        <AlertTriangle className="w-5 h-5" />
-
+                        <span className="font-medium">加友异常警告</span>
-              <div className="space-y-2">
+                      </div>
-                <div className="text-sm text-gray-500">加友状态</div>
+                      <p className="text-sm text-red-600 mt-1">
-                <Badge variant={selectedDevice.addFriendStatus === "normal" ? "outline" : "destructive"}>
+                        该设备当前存在加友异常情况，请检查设备状态和相关配置。
-                  {selectedDevice.addFriendStatus === "normal" ? "加友正常" : "加友异常"}
+                      </p>
-                </Badge>
+                    </div>
-              </div>
+                  )}
+                </TabsContent>
+                <TabsContent value="stats">
+                  <div className="text-center text-gray-500 py-8">
+                    统计数据开发中...
+                  </div>
+                </TabsContent>
+                <TabsContent value="tasks">
+                  <div className="text-center text-gray-500 py-8">
+                    任务管理开发中...
+                  </div>
+                </TabsContent>
+                <TabsContent value="logs">
+                  <div className="text-center text-gray-500 py-8">
+                    运行日志开发中...
+                  </div>
+                </TabsContent>
+              </Tabs>
             </div>
           )}
         </DialogContent>

Cunkebao/app/devices/[id]/page.tsx

@@ -13,6 +13,7 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import { fetchDeviceDetail, fetchDeviceRelatedAccounts, updateDeviceTaskConfig, fetchDeviceHandleLogs } from "@/api/devices"
 import { toast } from "sonner"
 import { ImeiDisplay } from "@/components/ImeiDisplay"
+import { api } from "@/lib/api"
 
 interface WechatAccount {
   id: string
@@ -76,6 +77,7 @@ interface HandleLog {
 
 export default function DeviceDetailPage() {
   const params = useParams()
+  const deviceId = params?.id as string
   const router = useRouter()
   const [device, setDevice] = useState<Device | null>(null)
   const [activeTab, setActiveTab] = useState("info")
@@ -94,12 +96,15 @@ export default function DeviceDetailPage() {
     aiChat: false
   })
   const [tabChangeLoading, setTabChangeLoading] = useState(false)
+  const [accountPage, setAccountPage] = useState(1)
+  const [hasMoreAccounts, setHasMoreAccounts] = useState(true)
+  const accountsPerPage = 10
+  const accountsEndRef = useRef<HTMLDivElement>(null)
 
   // 添加登录检查
   useEffect(() => {
     const token = localStorage.getItem('token')
     if (!token) {
-      // 如果没有token，重定向到登录页面，并携带当前页面URL作为回调
       const currentPath = window.location.pathname + window.location.search
       router.push(`/login?redirect=${encodeURIComponent(currentPath)}`)
       return
@@ -107,12 +112,12 @@ export default function DeviceDetailPage() {
   }, [router])
 
   useEffect(() => {
-    if (!params.id) return
+    if (!deviceId) return
 
     const fetchDevice = async () => {
       try {
         setLoading(true)
-        const response = await fetchDeviceDetail(params.id as string)
+        const response = await fetchDeviceDetail(deviceId)
         
         if (response && response.code === 200 && response.data) {
           const serverData = response.data
@@ -140,7 +145,6 @@ export default function DeviceDetailPage() {
           
           // 解析features
           if (serverData.features) {
-            // 如果后端直接返回了features对象，使用它
             formattedDevice.features = {
               autoAddFriend: Boolean(serverData.features.autoAddFriend),
               autoReply: Boolean(serverData.features.autoReply),
@@ -149,7 +153,6 @@ export default function DeviceDetailPage() {
             }
           } else if (serverData.taskConfig) {
             try {
-              // 解析taskConfig字段
               const taskConfig = JSON.parse(serverData.taskConfig || '{}');
               
               if (taskConfig) {
@@ -165,57 +168,33 @@ export default function DeviceDetailPage() {
             }
           }
           
-          // 如果有微信账号信息，构建微信账号对象
-          if (serverData.wechatId) {
-            formattedDevice.wechatAccounts = [
-              {
-                id: serverData.wechatId?.toString() || "1",
-                avatar: "/placeholder.svg", // 默认头像
-                nickname: serverData.memo || "微信账号",
-                wechatId: serverData.imei || "",
-                gender: 1, // 默认性别
-                status: serverData.alive === 1 ? 1 : 0,
-                statusText: serverData.alive === 1 ? "可加友" : "已停用",
-                wechatAlive: serverData.alive === 1 ? 1 : 0,
-                wechatAliveText: serverData.alive === 1 ? "正常" : "异常",
-                addFriendStatus: 1,
-                totalFriend: serverData.totalFriend || 0,
-                lastActive: serverData.lastUpdateTime || new Date().toISOString()
-              }
-            ]
-          }
-          
           setDevice(formattedDevice)
           
-          // 如果当前激活标签是"accounts"，则加载关联微信账号
+          // 如果当前激活标签是"accounts"，则立即加载关联微信账号
           if (activeTab === "accounts") {
             fetchRelatedAccounts()
           }
         } else {
-          // 如果API返回错误，显示错误提示
           toast.error("获取设备信息失败: " + ((response as any)?.msg || "未知错误"))
-          setLoading(false)
         }
       } catch (error) {
         console.error("获取设备信息失败:", error)
         toast.error("获取设备信息出错，请稍后重试")
-        setLoading(false)
       } finally {
-        // 确保loading状态被关闭
         setLoading(false)
       }
     }
     
     fetchDevice()
-  }, [params.id, activeTab])
+  }, [deviceId]) // 使用 deviceId 替代 params.id
   
   // 获取设备关联微信账号
-  const fetchRelatedAccounts = async () => {
+  const fetchRelatedAccounts = async (page = 1) => {
-    if (!params.id || accountsLoading) return
+    if (!deviceId || accountsLoading) return
     
     try {
       setAccountsLoading(true)
-      const response = await fetchDeviceRelatedAccounts(params.id as string)
+      const response = await fetchDeviceRelatedAccounts(deviceId)
       
       if (response && response.code === 200 && response.data) {
         const accounts = response.data.accounts || []
@@ -225,21 +204,20 @@ export default function DeviceDetailPage() {
           if (!prev) return null
           return {
             ...prev,
-            wechatAccounts: accounts
+            // 如果是第一页，替换数据；否则追加数据
+            wechatAccounts: page === 1 
+              ? accounts 
+              : [...(prev.wechatAccounts || []), ...accounts]
           }
         })
         
-        if (accounts.length > 0) {
+        // 判断是否还有更多数据
-          toast.success(`成功获取${accounts.length}个关联微信账号`)
+        setHasMoreAccounts(accounts.length === accountsPerPage)
-        } else {
-          toast.info("此设备暂无关联微信账号")
-        }
       } else {
-        toast.error("获取关联微信账号失败")
+        console.error("获取关联微信账号失败")
       }
     } catch (error) {
       console.error("获取关联微信账号失败:", error)
-      toast.error("获取关联微信账号出错")
     } finally {
       setAccountsLoading(false)
     }
@@ -247,12 +225,12 @@ export default function DeviceDetailPage() {
 
   // 获取设备操作记录
   const fetchHandleLogs = async () => {
-    if (!params.id || logsLoading) return
+    if (!deviceId || logsLoading) return
     
     try {
       setLogsLoading(true)
       const response = await fetchDeviceHandleLogs(
-        params.id as string, 
+        deviceId, 
         logPage, 
         logsPerPage
       )
@@ -338,6 +316,37 @@ export default function DeviceDetailPage() {
     }
   }, [logPage, activeTab])
 
+  // 获取任务配置
+  const fetchTaskConfig = async () => {
+    try {
+      const response = await api.get(`/v1/devices/${deviceId}/task-config`)
+      
+      if (response && response.code === 200 && response.data) {
+        setDevice(prev => {
+          if (!prev) return null
+          return {
+            ...prev,
+            features: {
+              autoAddFriend: Boolean(response.data.autoAddFriend),
+              autoReply: Boolean(response.data.autoReply),
+              momentsSync: Boolean(response.data.momentsSync),
+              aiChat: Boolean(response.data.aiChat)
+            }
+          }
+        })
+      }
+    } catch (error) {
+      console.error("获取任务配置失败:", error)
+    }
+  }
+
+  // 在组件加载时获取任务配置
+  useEffect(() => {
+    if (deviceId) {
+      fetchTaskConfig()
+    }
+  }, [deviceId])
+
   // 处理标签页切换
   const handleTabChange = (value: string) => {
     setActiveTab(value)
@@ -354,6 +363,11 @@ export default function DeviceDetailPage() {
     if (value === "history") {
       fetchHandleLogs()
     }
+
+    // 当切换到"基本信息"标签时，获取最新的任务配置
+    if (value === "info") {
+      fetchTaskConfig()
+    }
     
     // 设置短暂的延迟来关闭加载状态，模拟加载过程
     setTimeout(() => {
@@ -527,6 +541,51 @@ export default function DeviceDetailPage() {
     return nameMap[feature] || feature
   }
 
+  // 加载更多账号
+  const loadMoreAccounts = () => {
+    if (accountsLoading || !hasMoreAccounts) return
+    setAccountPage(prev => prev + 1)
+    fetchRelatedAccounts(accountPage + 1)
+  }
+
+  // 监听账号列表滚动加载更多
+  useEffect(() => {
+    if (activeTab !== "accounts") return
+    
+    const observerOptions = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
+    }
+    
+    const handleIntersect = (entries: IntersectionObserverEntry[]) => {
+      const [entry] = entries
+      if (entry.isIntersecting && hasMoreAccounts && !accountsLoading) {
+        loadMoreAccounts()
+      }
+    }
+    
+    const observer = new IntersectionObserver(handleIntersect, observerOptions)
+    
+    if (accountsEndRef.current) {
+      observer.observe(accountsEndRef.current)
+    }
+    
+    return () => {
+      if (accountsEndRef.current) {
+        observer.unobserve(accountsEndRef.current)
+      }
+    }
+  }, [activeTab, hasMoreAccounts, accountsLoading])
+
+  // 当切换到账号标签时重置页码
+  useEffect(() => {
+    if (activeTab === "accounts") {
+      setAccountPage(1)
+      setHasMoreAccounts(true)
+    }
+  }, [activeTab])
+
   if (loading) {
     return (
       <div className="flex h-screen w-full justify-center items-center bg-gray-50">
@@ -547,7 +606,7 @@ export default function DeviceDetailPage() {
           </div>
           <div className="text-xl font-medium text-center">设备不存在或已被删除</div>
           <div className="text-sm text-gray-500 text-center">
-            无法加载ID为 "{params.id}" 的设备信息，请检查设备是否存在。
+            无法加载ID为 "{deviceId}" 的设备信息，请检查设备是否存在。
           </div>
           <Button onClick={() => router.back()}>
             <ChevronLeft className="h-4 w-4 mr-1" />
@@ -618,16 +677,7 @@ export default function DeviceDetailPage() {
             </TabsList>
 
             <TabsContent value="info">
-              <Card className="p-4 space-y-4">
+              <Card className="p-4">
-                {/* 标签切换时的加载状态 */}
-                {tabChangeLoading && (
-                  <div className="absolute inset-0 bg-white bg-opacity-80 flex justify-center items-center z-10">
-                    <div className="flex flex-col items-center space-y-3">
-                      <div className="w-8 h-8 rounded-full border-2 border-blue-500 border-t-transparent animate-spin"></div>
-                      <div className="text-gray-500 text-sm">加载中...</div>
-                    </div>
-                  </div>
-                )}
                 <div className="space-y-4">
                   <div className="flex items-center justify-between">
                     <div className="space-y-0.5">
@@ -699,6 +749,28 @@ export default function DeviceDetailPage() {
                   </div>
                 </div>
               </Card>
+
+              {/* 统计卡片 */}
+              <div className="grid grid-cols-2 gap-4 mt-4">
+                <Card className="p-4">
+                  <div className="flex items-center space-x-2 text-gray-500">
+                    <Users className="w-4 h-4" />
+                    <span className="text-sm">好友总数</span>
+                  </div>
+                  <div className="text-2xl font-bold text-blue-600 mt-2">
+                    {(device.totalFriend || 0).toLocaleString()}
+                  </div>
+                </Card>
+                <Card className="p-4">
+                  <div className="flex items-center space-x-2 text-gray-500">
+                    <MessageCircle className="w-4 h-4" />
+                    <span className="text-sm">消息数量</span>
+                  </div>
+                  <div className="text-2xl font-bold text-blue-600 mt-2">
+                    {(device.thirtyDayMsgCount || 0).toLocaleString()}
+                  </div>
+                </Card>
+              </div>
             </TabsContent>
 
             <TabsContent value="accounts">
@@ -708,7 +780,11 @@ export default function DeviceDetailPage() {
                   <Button 
                     variant="outline" 
                     size="sm" 
-                    onClick={fetchRelatedAccounts}
+                    onClick={() => {
+                      setAccountPage(1)
+                      setHasMoreAccounts(true)
+                      fetchRelatedAccounts(1)
+                    }}
                     disabled={accountsLoading}
                   >
                     {accountsLoading ? (
@@ -725,7 +801,7 @@ export default function DeviceDetailPage() {
                   </Button>
                 </div>
                 
-                <ScrollArea className="h-[calc(100vh-300px)]">
+                <ScrollArea className="min-h-[120px] max-h-[calc(100vh-300px)]">
                   {/* 标签切换时的加载状态 */}
                   {tabChangeLoading && (
                     <div className="absolute inset-0 bg-white bg-opacity-80 flex justify-center items-center z-10">
@@ -735,14 +811,13 @@ export default function DeviceDetailPage() {
                       </div>
                     </div>
                   )}
-                  {accountsLoading && (
+                  
+                  {accountsLoading && !device?.wechatAccounts?.length ? (
                     <div className="flex justify-center items-center py-8">
                       <div className="w-6 h-6 rounded-full border-2 border-blue-500 border-t-transparent animate-spin mr-2"></div>
                       <span className="text-gray-500">加载微信账号中...</span>
                     </div>
-                  )}
+                  ) : device?.wechatAccounts && device.wechatAccounts.length > 0 ? (
-                  
-                  {!accountsLoading && device.wechatAccounts && device.wechatAccounts.length > 0 ? (
                     <div className="space-y-4">
                       {device.wechatAccounts.map((account) => (
                         <div key={account.id} className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
@@ -770,22 +845,44 @@ export default function DeviceDetailPage() {
                           </div>
                         </div>
                       ))}
+                      
+                      {/* 加载更多区域 */}
+                      <div 
+                        ref={accountsEndRef} 
+                        className="py-2 flex justify-center items-center"
+                      >
+                        {accountsLoading && hasMoreAccounts ? (
+                          <div className="flex items-center space-x-2">
+                            <div className="w-4 h-4 rounded-full border-2 border-blue-500 border-t-transparent animate-spin"></div>
+                            <span className="text-sm text-gray-500">加载更多...</span>
+                          </div>
+                        ) : hasMoreAccounts ? (
+                          <Button 
+                            variant="ghost" 
+                            size="sm" 
+                            onClick={loadMoreAccounts}
+                            className="text-sm text-blue-500 hover:text-blue-600"
+                          >
+                            加载更多
+                          </Button>
+                        ) : device.wechatAccounts.length > 0 && (
+                          <span className="text-xs text-gray-400">- 已加载全部记录 -</span>
+                        )}
+                      </div>
                     </div>
                   ) : (
-                    !accountsLoading && (
+                    <div className="text-center py-8 text-gray-500">
-                      <div className="text-center py-8 text-gray-500">
+                      <p>此设备暂无关联的微信账号</p>
-                        <p>此设备暂无关联的微信账号</p>
+                      <Button 
-                        <Button 
+                        variant="outline" 
-                          variant="outline" 
+                        size="sm" 
-                          size="sm" 
+                        className="mt-2"
-                          className="mt-2"
+                        onClick={() => fetchRelatedAccounts(1)}
-                          onClick={fetchRelatedAccounts}
+                      >
-                        >
+                        <RefreshCw className="h-4 w-4 mr-1" />
-                          <RefreshCw className="h-4 w-4 mr-1" />
+                        刷新
-                          刷新
+                      </Button>
-                        </Button>
+                    </div>
-                      </div>
-                    )
                   )}
                 </ScrollArea>
               </Card>
@@ -894,27 +991,6 @@ export default function DeviceDetailPage() {
               </Card>
             </TabsContent>
           </Tabs>
-
-          <div className="grid grid-cols-2 gap-4">
-            <Card className="p-4">
-              <div className="flex items-center space-x-2 text-gray-500">
-                <Users className="w-4 h-4" />
-                <span className="text-sm">好友总数</span>
-              </div>
-              <div className="text-2xl font-bold text-blue-600 mt-2">
-                {(device.totalFriend || 0).toLocaleString()}
-              </div>
-            </Card>
-            <Card className="p-4">
-              <div className="flex items-center space-x-2 text-gray-500">
-                <MessageCircle className="w-4 h-4" />
-                <span className="text-sm">消息数量</span>
-              </div>
-              <div className="text-2xl font-bold text-blue-600 mt-2">
-                {(device.thirtyDayMsgCount || 0).toLocaleString()}
-              </div>
-            </Card>
-          </div>
         </div>
       </div>
     </div>

Cunkebao/app/devices/page.tsx

@@ -559,14 +559,6 @@ export default function DevicesPage() {
       return;
     }
     
-    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}`);
   }
 
@@ -715,9 +707,8 @@ export default function DevicesPage() {
                       {device.status === "online" ? "在线" : "离线"}
                     </Badge>
                   </div>
-                  <div className="text-sm text-gray-500 flex items-center imei-display-area">
+                  <div className="text-sm text-gray-500">
-                    <span className="mr-1">IMEI:</span>
+                    <span className="mr-1">IMEI: {device.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">

Cunkebao/styles/globals.css

@@ -15,24 +15,24 @@ body {
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
+    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 0 0% 9%;
+    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 0 0% 98%;
+    --primary-foreground: 210 40% 98%;
-    --secondary: 0 0% 96.1%;
+    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 0 0% 9%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 0 0% 96.1%;
+    --muted: 210 40% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 0 0% 96.1%;
+    --accent: 210 40% 96.1%;
-    --accent-foreground: 0 0% 9%;
+    --accent-foreground: 222.2 47.4% 11.2%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive-foreground: 210 40% 98%;
-    --border: 0 0% 89.8%;
+    --border: 214.3 31.8% 91.4%;
-    --input: 0 0% 89.8%;
+    --input: 214.3 31.8% 91.4%;
-    --ring: 0 0% 3.9%;
+    --ring: 215 20.2% 65.1%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
@@ -49,25 +49,25 @@ body {
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
   .dark {
-    --background: 0 0% 3.9%;
+    --background: 222.2 84% 4.9%;
-    --foreground: 0 0% 98%;
+    --foreground: 210 40% 98%;
-    --card: 0 0% 3.9%;
+    --card: 222.2 84% 4.9%;
-    --card-foreground: 0 0% 98%;
+    --card-foreground: 210 40% 98%;
-    --popover: 0 0% 3.9%;
+    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 0 0% 98%;
+    --popover-foreground: 210 40% 98%;
-    --primary: 0 0% 98%;
+    --primary: 210 40% 98%;
-    --primary-foreground: 0 0% 9%;
+    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 0 0% 14.9%;
+    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 0 0% 98%;
+    --secondary-foreground: 210 40% 98%;
-    --muted: 0 0% 14.9%;
+    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 0 0% 63.9%;
+    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 0 0% 14.9%;
+    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 0 0% 98%;
+    --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive-foreground: 0 85.7% 97.3%;
-    --border: 0 0% 14.9%;
+    --border: 217.2 32.6% 17.5%;
-    --input: 0 0% 14.9%;
+    --input: 217.2 32.6% 17.5%;
-    --ring: 0 0% 83.1%;
+    --ring: 217.2 32.6% 17.5%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
@@ -92,3 +92,8 @@ body {
     @apply bg-background text-foreground;
   }
 }
+
+/* 隐藏 Next.js 静态指示器 */
+.nextjs-static-indicator-toast-wrapper {
+  display: none !important;
+}

Server/application/cunkebao/config/route.php

@@ -12,6 +12,7 @@ Route::group('v1/', function () {
         Route::put('refresh', 'app\cunkebao\controller\device\RefreshDeviceDetailV1Controller@index');
         Route::get('add-results', 'app\cunkebao\controller\device\GetAddResultedV1Controller@index');
         Route::post('task-config', 'app\cunkebao\controller\device\UpdateDeviceTaskConfigV1Controller@index');
+        Route::get(':id/task-config', 'app\cunkebao\controller\device\GetDeviceTaskConfigV1Controller@index');
         Route::get(':id/handle-logs', 'app\cunkebao\controller\device\GetDeviceHandleLogsV1Controller@index');
         Route::get(':id', 'app\cunkebao\controller\device\GetDeviceDetailV1Controller@index');
         Route::delete(':id', 'app\cunkebao\controller\device\DeleteDeviceV1Controller@index');

Server/application/cunkebao/controller/device/GetDeviceDetailV1Controller.php

@@ -59,29 +59,6 @@ class GetDeviceDetailV1Controller extends BaseController
         return 0;
     }
 
-    /**
-     * 解析taskConfig字段获取功能开关
-     *
-     * @param int $deviceId
-     * @return int[]
-     * @throws \Exception
-     */
-    protected function getTaskConfig(int $deviceId): array
-    {
-        $conf = DeviceTaskconfModel::alias('c')->field([
-            'c.autoAddFriend', 'c.autoReply', 'c.momentsSync', 'c.aiChat'
-        ])
-            ->where(
-                [
-                    'companyId' => $this->getUserInfo('companyId'),
-                    'deviceId'  => $deviceId
-                ]
-            )
-            ->find();
-
-        // 未配置时赋予默认关闭的状态
-        return !is_null($conf) ? $conf->toArray() : ArrHelper::getValue('autoAddFriend,autoReply,momentsSync,aiChat', [], 0);
-    }
 
     /**
      * 获取设备最新登录微信的 wechatId
@@ -102,55 +79,6 @@ class GetDeviceDetailV1Controller extends BaseController
             ->value('wechatId');
     }
 
-    /**
-     * 统计设备登录微信的好友
-     *
-     * @param int $deviceId
-     * @return int
-     * @throws \Exception
-     */
-    protected function getTotalFriend(int $deviceId): int
-    {
-        $ownerWechatId = $this->getDeviceLatestWechatLogin($deviceId);
-
-        if ($ownerWechatId) {
-            return WechatFriendShipModel::where(
-                [
-                    'companyId'     => $this->getUserInfo('companyId'),
-                    'ownerWechatId' => $ownerWechatId
-                ]
-            )
-                ->count();
-        }
-
-        return 0;
-    }
-
-    /**
-     * 获取设备绑定微信的消息总数
-     *
-     * @param int $deviceId
-     * @return int
-     */
-    protected function getThirtyDayMsgCount(int $deviceId): int
-    {
-        $ownerWechatId = $this->getDeviceLatestWechatLogin($deviceId);
-
-        if ($ownerWechatId) {
-            $activity = (string)WechatCustomerModel::where(
-                [
-                    'wechatId'  => $ownerWechatId,
-                    'companyId' => $this->getUserInfo('companyId')
-                ]
-            )
-                ->value('activity');
-
-            return json_decode($activity)->totalMsgCount ?? 0;
-        }
-
-        return 0;
-    }
-
     /**
      * 获取设备详情
      * @param int $id 设备ID
@@ -170,11 +98,6 @@ class GetDeviceDetailV1Controller extends BaseController
         }
 
         $device['battery'] = $this->parseExtraForBattery($device['extra']);
-        $device['features'] = $this->getTaskConfig($id);
-        $device['totalFriend'] = $this->getTotalFriend($id);
-        $device['thirtyDayMsgCount'] = $this->getThirtyDayMsgCount($id);
-
-        // 设备最后活跃时间为设备状态更新时间
         $device['lastUpdateTime'] = date('Y-m-d H:i:s', $device['lastUpdateTime']);
 
         // 删除冗余字段

Server/application/cunkebao/controller/device/GetDeviceTaskConfigV1Controller.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace app\cunkebao\controller\device;
+
+use app\common\model\DeviceTaskconf as DeviceTaskconfModel;
+use app\common\model\DeviceUser as DeviceUserModel;
+use app\common\model\User as UserModel;
+use app\cunkebao\controller\BaseController;
+use Eison\Utils\Helper\ArrHelper;
+use library\ResponseHelper;
+
+/**
+ * 设备管理控制器
+ */
+class GetDeviceTaskConfigV1Controller extends BaseController
+{
+    /**
+     * 检查用户是否有权限操作指定设备
+     *
+     * @param int $deviceId
+     * @return void
+     */
+    protected function checkUserDevicePermission(int $deviceId): void
+    {
+        $hasPermission = DeviceUserModel::where(
+                [
+                    'deviceId'  => $deviceId,
+                    'userId'    => $this->getUserInfo('id'),
+                    'companyId' => $this->getUserInfo('companyId')
+                ]
+            )
+                ->count() > 0;
+
+        if (!$hasPermission) {
+            throw new \Exception('您没有权限查看该设备', 403);
+        }
+    }
+
+    /**
+     * 解析taskConfig字段获取功能开关
+     *
+     * @param int $deviceId
+     * @return int[]
+     * @throws \Exception
+     */
+    protected function getTaskConfig(int $deviceId): array
+    {
+        $conf = DeviceTaskconfModel::alias('c')
+            ->field([
+                'c.autoAddFriend', 'c.autoReply', 'c.momentsSync', 'c.aiChat'
+            ])
+            ->where(
+                [
+                    'companyId' => $this->getUserInfo('companyId'),
+                    'deviceId'  => $deviceId
+                ]
+            )
+            ->find();
+
+        // 未配置时赋予默认关闭的状态
+        return !is_null($conf) ? $conf->toArray() : ArrHelper::getValue('autoAddFriend,autoReply,momentsSync,aiChat', [], 0);
+    }
+
+    /**
+     * 获取设备详情
+     *
+     * @return \think\response\Json
+     */
+    public function index()
+    {
+        try {
+            $id = $this->request->param('id/d');
+
+            if ($this->getUserInfo('isAdmin') != UserModel::ADMIN_STP) {
+                $this->checkUserDevicePermission($id);
+            }
+
+            return ResponseHelper::success(
+                $this->getTaskConfig($id)
+            );
+        } catch (\Exception $e) {
+            return ResponseHelper::error($e->getMessage(), $e->getCode());
+        }
+    }
+}