2408d50cb0
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>
422 lines
18 KiB
TypeScript
422 lines
18 KiB
TypeScript
"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>
|
|
)
|
|
}
|