fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wong
2025-05-16 18:42:38 +08:00
parent 671c523631 bff2d5eb8b
commit 950a06b8a7
7 changed files with 522 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
Cunkebao/app/components/device-grid.tsx
View File

@@ -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 items-center justify-between">
<div className="flex items-center space-x-2">
<Checkbox
checked={selectedDevices.length === devices.length && devices.length > 0}
onCheckedChange={handleSelectAll}
/>
<span className="text-sm">全选</span>
</div>
<span className="text-sm text-gray-500">已选择 {selectedDevices.length} 个设备</span>
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div className="relative w-full sm:w-64">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
<Input
placeholder="搜索设备..."
className="pl-8"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</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`}>
{devices.map((device) => (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{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="absolute top-2 right-2">
<Badge variant={device.status === "online" ? "default" : "secondary"}>
{device.status === "online" ? "在线" : "离线"}
<div className="font-medium flex items-center">
<span>{device.name}</span>
{device.addFriendStatus === "abnormal" && (
<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="flex items-center space-x-1">
<Battery className={`w-4 h-4 ${device.battery < 20 ? "text-red-500" : "text-green-500"}`} />
<span>{device.battery}%</span>
<div className="grid grid-cols-2 gap-3 text-sm">
<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"
: 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">
<Users className="w-4 h-4" />
<span>{device.friendCount}</span>
<div className="flex items-center space-x-2 bg-gray-50 rounded-lg p-2">
<Users className="w-4 h-4 text-blue-500" />
<span className="text-blue-700">{device.friendCount}</span>
</div>
<div className="flex items-center space-x-1">
<MessageCircle className="w-4 h-4" />
<span>{device.messageCount}</span>
<div className="flex items-center space-x-2 bg-gray-50 rounded-lg p-2">
<MessageCircle className="w-4 h-4 text-purple-500" />
<span className="text-purple-700">{device.messageCount}</span>
</div>
<div className="flex items-center space-x-1">
<Clock className="w-4 h-4" />
<span>+{device.todayAdded}</span>
<div className="flex items-center space-x-2 bg-gray-50 rounded-lg p-2">
<Clock className="w-4 h-4 text-indigo-500" />
<span className="text-indigo-700">+{device.todayAdded}</span>
</div>
</div>
<div className="text-sm text-gray-500">
<div>IMEI: {device.imei}</div>
<div>微信号: {device.wechatId}</div>
<div className="text-sm space-y-1.5 mt-3">
<div className="flex items-center text-gray-600">
<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">
<Smartphone className="w-6 h-6" />
<div className={`p-3 rounded-lg ${
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>
<p className="text-sm text-gray-500 flex items-center">
<span className="mr-1">IMEI:</span>
<ImeiDisplay imei={selectedDevice.imei} containerWidth={160} />
</p>
<h3 className="font-medium flex items-center space-x-2">
<span>{selectedDevice.name}</span>
<Badge
variant={selectedDevice.status === "online" ? "default" : "secondary"}
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"}>
{selectedDevice.status === "online" ? "在线" : "离线"}
</Badge>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1">
<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" : "text-green-500"}`} />
<span className="font-medium">{selectedDevice.battery}%</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-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 className="flex items-center space-x-2">
<Button variant="outline" size="sm" className="space-x-1">
<RefreshCcw className="w-4 h-4" />
<span>刷新</span>
</Button>
<Button variant="outline" size="sm" className="space-x-1">
<Power className="w-4 h-4" />
<span>重启</span>
</Button>
<Button variant="outline" size="sm">
<Settings className="w-4 h-4" />
</Button>
</div>
</div>
<div className="space-y-2">
<div className="text-sm text-gray-500">微信账号</div>
<div className="font-medium">{selectedDevice.wechatId}</div>
</div>
<Tabs defaultValue="status" className="w-full">
<TabsList className="grid w-full grid-cols-4">
<TabsTrigger value="status">状态信息</TabsTrigger>
<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">
<div className="text-sm text-gray-500">最后活跃</div>
<div className="font-medium">{selectedDevice.lastActive}</div>
</div>
<div className="space-y-2">
<div className="text-sm text-gray-500">加友状态</div>
<Badge variant={selectedDevice.addFriendStatus === "normal" ? "outline" : "destructive"}>
{selectedDevice.addFriendStatus === "normal" ? "加友正常" : "加友异常"}
</Badge>
</div>
{selectedDevice.addFriendStatus === "abnormal" && (
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
<div className="flex items-center space-x-2 text-red-800">
<AlertTriangle className="w-5 h-5" />
<span className="font-medium">加友异常警告</span>
</div>
<p className="text-sm text-red-600 mt-1">
该设备当前存在加友异常情况，请检查设备状态和相关配置。
</p>
</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>

268
Cunkebao/app/devices/[id]/page.tsx
View File

@@ -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 () => {
if (!params.id || accountsLoading) return
const fetchRelatedAccounts = async (page = 1) => {
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}个关联微信账号`)
} else {
toast.info("此设备暂无关联微信账号")
}
// 判断是否还有更多数据
setHasMoreAccounts(accounts.length === accountsPerPage)
} 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">
{/* 标签切换时的加载状态 */}
{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>
)}
<Card className="p-4">
<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>
)}
{!accountsLoading && device.wechatAccounts && device.wechatAccounts.length > 0 ? (
) : 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">
<p>此设备暂无关联的微信账号</p>
<Button
variant="outline"
size="sm"
className="mt-2"
onClick={fetchRelatedAccounts}
>
<RefreshCw className="h-4 w-4 mr-1" />
刷新
</Button>
</div>
)
<div className="text-center py-8 text-gray-500">
<p>此设备暂无关联的微信账号</p>
<Button
variant="outline"
size="sm"
className="mt-2"
onClick={() => fetchRelatedAccounts(1)}
>
<RefreshCw className="h-4 w-4 mr-1" />
刷新
</Button>
</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>

13
Cunkebao/app/devices/page.tsx
View File

@@ -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">
<span className="mr-1">IMEI:</span>
<ImeiDisplay imei={device.imei} containerWidth={180} />
<div className="text-sm text-gray-500">
<span className="mr-1">IMEI: {device.imei}</span>
</div>
<div className="text-sm text-gray-500">微信号: {device.wechatId || "未绑定或微信离线"}</div>
<div className="flex items-center justify-between mt-1 text-sm">

71
Cunkebao/styles/globals.css
View File

@@ -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%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--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%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--destructive-foreground: 0 85.7% 97.3%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--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;
}