存客宝 React

Cunkebao/app/content/new/device-selector.tsx

@@ -0,0 +1,117 @@
+"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>
+  )
+}
+