siyu-bank/shensheshou
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: overhaul UI for streamlined user experience

Browse Source 
Redesign navigation, home overview, user portrait, and valuation pages
with improved functionality and responsive design.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
2025-07-18 13:47:12 +00:00
parent 440b310c6f
commit 2408d50cb0
316 changed files with 55785 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
app/devices/[id]/page.tsx Normal file
View File

@@ -0,0 +1,282 @@
"use client"
import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ChevronLeft, Smartphone, Battery, Wifi, MessageCircle, Users, Settings, History } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { ScrollArea } from "@/components/ui/scroll-area"
interface WechatAccount {
id: string
avatar: string
nickname: string
wechatId: string
gender: "male" | "female"
status: "normal" | "abnormal"
addFriendStatus: "enabled" | "disabled"
friendCount: number
lastActive: string
}
interface Device {
id: string
imei: string
name: string
status: "online" | "offline"
battery: number
lastActive: string
historicalIds: string[]
wechatAccounts: WechatAccount[]
features: {
autoAddFriend: boolean
autoReply: boolean
contentSync: boolean
aiChat: boolean
}
history: {
time: string
action: string
operator: string
}[]
}
export default function DeviceDetailPage() {
const params = useParams()
const router = useRouter()
const [device, setDevice] = useState<Device | null>(null)
const [activeTab, setActiveTab] = useState("info")
useEffect(() => {
// 模拟API调用
const mockDevice: Device = {
id: params.id as string,
imei: "sd123123",
name: "设备 1",
status: "online",
battery: 85,
lastActive: "2024-02-09 15:30:45",
historicalIds: ["vx412321", "vfbadasd"],
wechatAccounts: [
{
id: "1",
avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-q2rVrFbfDdAbSnT3ZTNE7gfn3QCbvr.png",
nickname: "老张",
wechatId: "wxid_abc123",
gender: "male",
status: "normal",
addFriendStatus: "enabled",
friendCount: 523,
lastActive: "2024-02-09 15:20:33",
},
{
id: "2",
avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-q2rVrFbfDdAbSnT3ZTNE7gfn3QCbvr.png",
nickname: "老李",
wechatId: "wxid_xyz789",
gender: "male",
status: "abnormal",
addFriendStatus: "disabled",
friendCount: 245,
lastActive: "2024-02-09 14:15:22",
},
],
features: {
autoAddFriend: true,
autoReply: true,
contentSync: false,
aiChat: true,
},
history: [
{
time: "2024-02-09 15:30:45",
action: "开启自动加好友",
operator: "系统",
},
{
time: "2024-02-09 14:20:33",
action: "添加微信号",
operator: "管理员",
},
],
}
setDevice(mockDevice)
}, [params.id])
if (!device) {
return <div>加载中...</div>
}
return (
<div className="flex-1 bg-gray-50 min-h-screen">
<div className="max-w-[390px] mx-auto bg-white">
<header className="sticky top-0 z-10 bg-white border-b">
<div className="flex items-center justify-between p-4">
<div className="flex items-center space-x-3">
<Button variant="ghost" size="icon" onClick={() => router.back()}>
<ChevronLeft className="h-5 w-5" />
</Button>
<h1 className="text-lg font-medium">设备详情</h1>
</div>
<Button variant="ghost" size="icon">
<Settings className="h-5 w-5" />
</Button>
</div>
</header>
<div className="p-4 space-y-4">
<Card className="p-4">
<div className="flex items-center space-x-4">
<div className="p-3 bg-blue-50 rounded-lg">
<Smartphone className="h-6 w-6 text-blue-600" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<h2 className="font-medium truncate">{device.name}</h2>
<Badge variant={device.status === "online" ? "success" : "secondary"}>
{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">历史ID: {device.historicalIds.join(", ")}</div>
</div>
</div>
<div className="mt-4 grid grid-cols-2 gap-4">
<div className="flex items-center space-x-2">
<Battery className={`w-4 h-4 ${device.battery < 20 ? "text-red-500" : "text-green-500"}`} />
<span className="text-sm">{device.battery}%</span>
</div>
<div className="flex items-center space-x-2">
<Wifi className="w-4 h-4 text-blue-500" />
<span className="text-sm">{device.status === "online" ? "已连接" : "未连接"}</span>
</div>
</div>
<div className="mt-2 text-sm text-gray-500">最后活跃：{device.lastActive}</div>
</Card>
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="info">基本信息</TabsTrigger>
<TabsTrigger value="accounts">关联账号</TabsTrigger>
<TabsTrigger value="history">操作记录</TabsTrigger>
</TabsList>
<TabsContent value="info">
<Card className="p-4 space-y-4">
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>自动加好友</Label>
<div className="text-sm text-gray-500">自动通过好友验证</div>
</div>
<Switch checked={device.features.autoAddFriend} />
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>自动回复</Label>
<div className="text-sm text-gray-500">自动回复好友消息</div>
</div>
<Switch checked={device.features.autoReply} />
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>朋友圈同步</Label>
<div className="text-sm text-gray-500">自动同步朋友圈内容</div>
</div>
<Switch checked={device.features.contentSync} />
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>AI会话</Label>
<div className="text-sm text-gray-500">启用AI智能对话</div>
</div>
<Switch checked={device.features.aiChat} />
</div>
</div>
</Card>
</TabsContent>
<TabsContent value="accounts">
<Card className="p-4">
<ScrollArea className="h-[calc(100vh-300px)]">
<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">
<img
src={account.avatar || "/placeholder.svg"}
alt={account.nickname}
className="w-12 h-12 rounded-full"
/>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<div className="font-medium truncate">{account.nickname}</div>
<Badge variant={account.status === "normal" ? "success" : "destructive"}>
{account.status === "normal" ? "正常" : "异常"}
</Badge>
</div>
<div className="text-sm text-gray-500 mt-1">微信号: {account.wechatId}</div>
<div className="text-sm text-gray-500">性别: {account.gender === "male" ? "男" : "女"}</div>
<div className="flex items-center justify-between mt-2">
<span className="text-sm text-gray-500">好友数: {account.friendCount}</span>
<Badge variant={account.addFriendStatus === "enabled" ? "outline" : "secondary"}>
{account.addFriendStatus === "enabled" ? "可加友" : "已停用"}
</Badge>
</div>
</div>
</div>
))}
</div>
</ScrollArea>
</Card>
</TabsContent>
<TabsContent value="history">
<Card className="p-4">
<ScrollArea className="h-[calc(100vh-300px)]">
<div className="space-y-4">
{device.history.map((record, index) => (
<div key={index} className="flex items-start space-x-3">
<div className="p-2 bg-blue-50 rounded-full">
<History className="w-4 h-4 text-blue-600" />
</div>
<div className="flex-1">
<div className="text-sm font-medium">{record.action}</div>
<div className="text-xs text-gray-500 mt-1">
操作人: {record.operator} · {record.time}
</div>
</div>
</div>
))}
</div>
</ScrollArea>
</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?.wechatAccounts?.reduce((sum, account) => sum + account.friendCount, 0)}
</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">5,678</div>
</Card>
</div>
</div>
</div>
</div>
)
}

3
app/devices/loading.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Loading() {
return null
}

421
app/devices/page.tsx Normal file
View File

@@ -0,0 +1,421 @@
"use client"
import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PieChart, BarChart, LineChart } from "@/components/charts"
import { Badge } from "@/components/ui/badge"
import { Activity, Filter, Plus, RefreshCw, Search, Smartphone, Laptop, Monitor, Wifi, WifiOff } from "lucide-react"
export default function DevicesPage() {
const [deviceType, setDeviceType] = useState("all")
const [searchQuery, setSearchQuery] = useState("")
return (
<div className="container mx-auto p-4 space-y-6">
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
<div>
<h1 className="text-3xl font-bold">设备管理</h1>
<p className="text-muted-foreground mt-1">管理和分析用户设备数据</p>
</div>
<div className="flex flex-wrap gap-2">
<Button>
<Plus className="mr-2 h-4 w-4" />
添加设备
</Button>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<Card className="bg-white shadow-sm">
<CardContent className="p-4 flex items-center">
<div className="bg-blue-100 p-2 rounded-full mr-3">
<Smartphone className="h-5 w-5 text-blue-600" />
</div>
<div>
<div className="text-sm font-medium text-gray-600">总设备数</div>
<div className="text-xl font-bold">156,789</div>
</div>
</CardContent>
</Card>
<Card className="bg-white shadow-sm">
<CardContent className="p-4 flex items-center">
<div className="bg-green-100 p-2 rounded-full mr-3">
<Wifi className="h-5 w-5 text-green-600" />
</div>
<div>
<div className="text-sm font-medium text-gray-600">在线设备</div>
<div className="text-xl font-bold">132,456</div>
</div>
</CardContent>
</Card>
<Card className="bg-white shadow-sm">
<CardContent className="p-4 flex items-center">
<div className="bg-red-100 p-2 rounded-full mr-3">
<WifiOff className="h-5 w-5 text-red-600" />
</div>
<div>
<div className="text-sm font-medium text-gray-600">离线设备</div>
<div className="text-xl font-bold">24,333</div>
</div>
</CardContent>
</Card>
<Card className="bg-white shadow-sm">
<CardContent className="p-4 flex items-center">
<div className="bg-purple-100 p-2 rounded-full mr-3">
<Activity className="h-5 w-5 text-purple-600" />
</div>
<div>
<div className="text-sm font-medium text-gray-600">活跃率</div>
<div className="text-xl font-bold">84.5%</div>
</div>
</CardContent>
</Card>
</div>
<Card className="border-none shadow-md overflow-hidden">
<CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
<div className="flex justify-between items-center">
<div>
<CardTitle>设备分析</CardTitle>
<CardDescription>设备类型、活跃度和使用情况分析</CardDescription>
</div>
</div>
</CardHeader>
<CardContent className="p-4">
<Tabs defaultValue="overview" className="space-y-4">
<TabsList className="grid grid-cols-3 w-full">
<TabsTrigger value="overview">设备概览</TabsTrigger>
<TabsTrigger value="activity">活跃分析</TabsTrigger>
<TabsTrigger value="distribution">分布分析</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="bg-white p-4 rounded-lg shadow-sm">
<h3 className="text-lg font-medium mb-3">设备类型分布</h3>
<PieChart
data={{
labels: ["iOS设备", "Android设备", "Windows设备", "Mac设备", "其他设备"],
datasets: [
{
data: [45, 40, 8, 5, 2],
backgroundColor: [
"rgb(59, 130, 246)",
"rgb(16, 185, 129)",
"rgb(249, 115, 22)",
"rgb(139, 92, 246)",
"rgb(156, 163, 175)",
],
},
],
}}
height={220}
/>
</div>
<div className="bg-white p-4 rounded-lg shadow-sm">
<h3 className="text-lg font-medium mb-3">设备型号分布 Top 10</h3>
<BarChart
data={{
labels: [
"iPhone 13",
"iPhone 12",
"Samsung S21",
"iPhone 14",
"Xiaomi 12",
"Huawei P40",
"OPPO Find X",
"Vivo X60",
"OnePlus 9",
"iPhone SE",
],
datasets: [
{
label: "设备数量",
data: [25000, 22000, 18000, 15000, 12000, 10000, 8000, 7000, 6000, 5000],
backgroundColor: "rgba(59, 130, 246, 0.8)",
},
],
}}
height={220}
/>
</div>
</div>
</TabsContent>
<TabsContent value="activity" className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="bg-white p-4 rounded-lg shadow-sm">
<h3 className="text-lg font-medium mb-3">设备活跃度趋势</h3>
<LineChart
data={{
labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
datasets: [
{
label: "iOS设备",
data: [75, 78, 80, 82, 85, 87, 90],
borderColor: "rgb(59, 130, 246)",
backgroundColor: "rgba(59, 130, 246, 0.1)",
},
{
label: "Android设备",
data: [70, 72, 75, 78, 80, 82, 85],
borderColor: "rgb(16, 185, 129)",
backgroundColor: "rgba(16, 185, 129, 0.1)",
},
],
}}
height={220}
/>
</div>
<div className="bg-white p-4 rounded-lg shadow-sm">
<h3 className="text-lg font-medium mb-3">设备使用时长分布</h3>
<PieChart
data={{
labels: ["<30分钟/天", "30-60分钟/天", "1-2小时/天", "2-4小时/天", ">4小时/天"],
datasets: [
{
data: [15, 25, 30, 20, 10],
backgroundColor: [
"rgb(156, 163, 175)",
"rgb(249, 115, 22)",
"rgb(16, 185, 129)",
"rgb(59, 130, 246)",
"rgb(139, 92, 246)",
],
},
],
}}
height={220}
/>
</div>
</div>
</TabsContent>
<TabsContent value="distribution" className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="bg-white p-4 rounded-lg shadow-sm">
<h3 className="text-lg font-medium mb-3">地区分布 Top 10</h3>
<BarChart
data={{
labels: ["北京", "上海", "广州", "深圳", "杭州", "成都", "武汉", "南京", "重庆", "西安"],
datasets: [
{
label: "设备数量",
data: [18500, 17200, 15800, 14500, 12000, 10500, 9800, 8500, 7800, 7200],
backgroundColor: "rgba(59, 130, 246, 0.8)",
},
],
}}
height={220}
/>
</div>
<div className="bg-white p-4 rounded-lg shadow-sm">
<h3 className="text-lg font-medium mb-3">系统版本分布</h3>
<PieChart
data={{
labels: ["iOS 16", "iOS 15", "iOS 14", "Android 13", "Android 12", "Android 11", "其他"],
datasets: [
{
data: [30, 25, 10, 15, 10, 5, 5],
backgroundColor: [
"rgb(59, 130, 246)",
"rgb(96, 165, 250)",
"rgb(147, 197, 253)",
"rgb(16, 185, 129)",
"rgb(52, 211, 153)",
"rgb(110, 231, 183)",
"rgb(156, 163, 175)",
],
},
],
}}
height={220}
/>
</div>
</div>
</TabsContent>
</Tabs>
</CardContent>
</Card>
<Card className="border-none shadow-md overflow-hidden">
<CardHeader className="bg-white border-b">
<div className="flex justify-between items-center">
<div>
<CardTitle>设备列表</CardTitle>
<CardDescription>查看和管理所有设备</CardDescription>
</div>
<div className="flex items-center space-x-2">
<div className="relative">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="搜索设备..."
className="pl-8 w-[200px] md:w-[300px]"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
<Select value={deviceType} onValueChange={setDeviceType}>
<SelectTrigger className="w-[150px]">
<SelectValue placeholder="设备类型" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">全部类型</SelectItem>
<SelectItem value="ios">iOS设备</SelectItem>
<SelectItem value="android">Android设备</SelectItem>
<SelectItem value="windows">Windows设备</SelectItem>
<SelectItem value="mac">Mac设备</SelectItem>
</SelectContent>
</Select>
<Button variant="outline" size="icon">
<Filter className="h-4 w-4" />
</Button>
<Button variant="outline" size="icon">
<RefreshCw className="h-4 w-4" />
</Button>
</div>
</div>
</CardHeader>
<CardContent className="p-0">
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="bg-gray-50">
<th className="px-4 py-3 text-left text-sm font-medium text-gray-500">设备ID</th>
<th className="px-4 py-3 text-left text-sm font-medium text-gray-500">设备名称</th>
<th className="px-4 py-3 text-left text-sm font-medium text-gray-500">设备类型</th>
<th className="px-4 py-3 text-left text-sm font-medium text-gray-500">系统版本</th>
<th className="px-4 py-3 text-left text-sm font-medium text-gray-500">状态</th>
<th className="px-4 py-3 text-left text-sm font-medium text-gray-500">最后活跃时间</th>
<th className="px-4 py-3 text-left text-sm font-medium text-gray-500">操作</th>
</tr>
</thead>
<tbody className="divide-y">
{[
{
id: "DEV-001",
name: "iPhone 13 Pro",
type: "iOS",
version: "iOS 16.2",
status: "在线",
lastActive: "2023-07-15 14:30",
},
{
id: "DEV-002",
name: "Samsung Galaxy S21",
type: "Android",
version: "Android 13",
status: "在线",
lastActive: "2023-07-15 13:45",
},
{
id: "DEV-003",
name: "MacBook Pro",
type: "Mac",
version: "macOS 13.1",
status: "在线",
lastActive: "2023-07-15 12:20",
},
{
id: "DEV-004",
name: "Xiaomi 12",
type: "Android",
version: "Android 12",
status: "离线",
lastActive: "2023-07-14 18:10",
},
{
id: "DEV-005",
name: "iPad Pro",
type: "iOS",
version: "iOS 16.1",
status: "在线",
lastActive: "2023-07-15 10:05",
},
{
id: "DEV-006",
name: "Huawei P40",
type: "Android",
version: "Android 11",
status: "离线",
lastActive: "2023-07-13 09:30",
},
{
id: "DEV-007",
name: "Windows Laptop",
type: "Windows",
version: "Windows 11",
status: "在线",
lastActive: "2023-07-15 11:45",
},
{
id: "DEV-008",
name: "OPPO Find X5",
type: "Android",
version: "Android 13",
status: "在线",
lastActive: "2023-07-15 09:20",
},
{
id: "DEV-009",
name: "iPhone 12",
type: "iOS",
version: "iOS 16.2",
status: "离线",
lastActive: "2023-07-14 22:15",
},
{
id: "DEV-010",
name: "Vivo X80",
type: "Android",
version: "Android 12",
status: "在线",
lastActive: "2023-07-15 08:50",
},
].map((device) => (
<tr key={device.id} className="hover:bg-gray-50">
<td className="px-4 py-3 text-sm">{device.id}</td>
<td className="px-4 py-3 text-sm font-medium">{device.name}</td>
<td className="px-4 py-3 text-sm">
<div className="flex items-center">
{device.type === "iOS" && <Smartphone className="h-4 w-4 mr-1 text-blue-500" />}
{device.type === "Android" && <Smartphone className="h-4 w-4 mr-1 text-green-500" />}
{device.type === "Mac" && <Laptop className="h-4 w-4 mr-1 text-gray-500" />}
{device.type === "Windows" && <Monitor className="h-4 w-4 mr-1 text-blue-400" />}
{device.type}
</div>
</td>
<td className="px-4 py-3 text-sm">{device.version}</td>
<td className="px-4 py-3 text-sm">
<Badge
variant="outline"
className={`${
device.status === "在线"
? "bg-green-50 text-green-600 border-green-200"
: "bg-red-50 text-red-600 border-red-200"
}`}
>
{device.status}
</Badge>
</td>
<td className="px-4 py-3 text-sm">{device.lastActive}</td>
<td className="px-4 py-3 text-sm">
<Button variant="ghost" size="sm">
详情
</Button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</CardContent>
</Card>
</div>
)
}