118 lines
3.5 KiB
TypeScript
118 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Card } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import { Search, Plus } from "lucide-react"
|
|
|
|
interface Device {
|
|
id: string
|
|
name: string
|
|
account: string
|
|
status: "online" | "offline"
|
|
}
|
|
|
|
const mockDevices: Device[] = [
|
|
{
|
|
id: "1",
|
|
name: "iPhone 13 Pro",
|
|
account: "wxid_abc123",
|
|
status: "online",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Huawei P40",
|
|
account: "wxid_xyz789",
|
|
status: "offline",
|
|
},
|
|
]
|
|
|
|
interface DeviceSelectorProps {
|
|
selectedDevices: string[]
|
|
onChange: (devices: string[]) => void
|
|
}
|
|
|
|
export function DeviceSelector({ selectedDevices, onChange }: DeviceSelectorProps) {
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
|
|
const toggleSelectAll = () => {
|
|
if (selectedDevices.length === mockDevices.length) {
|
|
onChange([])
|
|
} else {
|
|
onChange(mockDevices.map((device) => device.id))
|
|
}
|
|
}
|
|
|
|
const toggleDevice = (deviceId: string) => {
|
|
if (selectedDevices.includes(deviceId)) {
|
|
onChange(selectedDevices.filter((id) => id !== deviceId))
|
|
} else {
|
|
onChange([...selectedDevices, deviceId])
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card className="p-4">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
|
<Input
|
|
placeholder="搜索设备"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
<Button className="ml-2" size="sm">
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
添加设备
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="rounded-md border overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-12">
|
|
<Checkbox checked={selectedDevices.length === mockDevices.length} onCheckedChange={toggleSelectAll} />
|
|
</TableHead>
|
|
<TableHead>设备名称</TableHead>
|
|
<TableHead>微信账号</TableHead>
|
|
<TableHead>状态</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{mockDevices.map((device) => (
|
|
<TableRow key={device.id}>
|
|
<TableCell>
|
|
<Checkbox
|
|
checked={selectedDevices.includes(device.id)}
|
|
onCheckedChange={() => toggleDevice(device.id)}
|
|
/>
|
|
</TableCell>
|
|
<TableCell>{device.name}</TableCell>
|
|
<TableCell>{device.account}</TableCell>
|
|
<TableCell>
|
|
<span
|
|
className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
|
|
device.status === "online" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
|
|
}`}
|
|
>
|
|
{device.status === "online" ? "在线" : "离线"}
|
|
</span>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|
|
|