存客宝 React
This commit is contained in:
柳清爽
294
Cunkebao/app/workspace/auto-like/components/device-selection.tsx
Normal file
294
Cunkebao/app/workspace/auto-like/components/device-selection.tsx
Normal file
@@ -0,0 +1,294 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Search, RefreshCw, Smartphone, Database, Users } from "lucide-react"
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
|
||||
interface Device {
|
||||
id: string
|
||||
name: string
|
||||
status: "online" | "offline"
|
||||
wechatId: string
|
||||
}
|
||||
|
||||
interface DatabaseItem {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
count: number
|
||||
}
|
||||
|
||||
interface AudienceGroup {
|
||||
id: string
|
||||
name: string
|
||||
count: number
|
||||
description: string
|
||||
}
|
||||
|
||||
export interface DeviceSelectionData {
|
||||
selectedDevices: string[]
|
||||
selectedDatabase: string
|
||||
selectedAudience: string
|
||||
}
|
||||
|
||||
interface DeviceSelectionProps {
|
||||
initialData?: Partial<DeviceSelectionData>
|
||||
onSave: (data: DeviceSelectionData) => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
export function DeviceSelection({ initialData, onSave, onBack }: DeviceSelectionProps) {
|
||||
const [devices, setDevices] = useState<Device[]>([])
|
||||
const [databases, setDatabases] = useState<DatabaseItem[]>([])
|
||||
const [audienceGroups, setAudienceGroups] = useState<AudienceGroup[]>([])
|
||||
const [selectedDevices, setSelectedDevices] = useState<string[]>(initialData?.selectedDevices || [])
|
||||
const [selectedDatabase, setSelectedDatabase] = useState<string>(initialData?.selectedDatabase || "")
|
||||
const [selectedAudience, setSelectedAudience] = useState<string>(initialData?.selectedAudience || "")
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [activeTab, setActiveTab] = useState("all")
|
||||
|
||||
// 模拟获取设备数据
|
||||
useEffect(() => {
|
||||
// 模拟设备数据
|
||||
const mockDevices: Device[] = Array.from({ length: 10 }, (_, i) => ({
|
||||
id: `device-${i + 1}`,
|
||||
name: `设备 ${i + 1}`,
|
||||
status: Math.random() > 0.3 ? "online" : "offline",
|
||||
wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
|
||||
}))
|
||||
setDevices(mockDevices)
|
||||
|
||||
// 模拟数据库数据
|
||||
const mockDatabases: DatabaseItem[] = [
|
||||
{
|
||||
id: "db-1",
|
||||
name: "默认数据库",
|
||||
description: "系统默认的数据库",
|
||||
count: 1250,
|
||||
},
|
||||
{
|
||||
id: "db-2",
|
||||
name: "高净值客户",
|
||||
description: "高消费能力的客户群体",
|
||||
count: 450,
|
||||
},
|
||||
{
|
||||
id: "db-3",
|
||||
name: "潜在客户",
|
||||
description: "有购买意向的潜在客户",
|
||||
count: 780,
|
||||
},
|
||||
]
|
||||
setDatabases(mockDatabases)
|
||||
|
||||
// 模拟目标人群数据
|
||||
const mockAudienceGroups: AudienceGroup[] = [
|
||||
{
|
||||
id: "audience-1",
|
||||
name: "全部好友",
|
||||
count: 1250,
|
||||
description: "所有微信好友",
|
||||
},
|
||||
{
|
||||
id: "audience-2",
|
||||
name: "高频互动好友",
|
||||
count: 320,
|
||||
description: "经常互动的好友",
|
||||
},
|
||||
{
|
||||
id: "audience-3",
|
||||
name: "潜在客户",
|
||||
count: 450,
|
||||
description: "有购买意向的好友",
|
||||
},
|
||||
{
|
||||
id: "audience-4",
|
||||
name: "VIP客户",
|
||||
description: "已成交的VIP客户",
|
||||
},
|
||||
]
|
||||
setAudienceGroups(mockAudienceGroups)
|
||||
|
||||
// 设置默认选中的数据库和目标人群
|
||||
if (!initialData?.selectedDatabase) {
|
||||
setSelectedDatabase("db-1")
|
||||
}
|
||||
if (!initialData?.selectedAudience) {
|
||||
setSelectedAudience("audience-1")
|
||||
}
|
||||
}, [initialData?.selectedDatabase, initialData?.selectedAudience])
|
||||
|
||||
// 过滤设备
|
||||
const filteredDevices = devices.filter((device) => {
|
||||
const matchesSearch =
|
||||
device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
device.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
|
||||
const matchesTab =
|
||||
activeTab === "all" ||
|
||||
(activeTab === "selected" && selectedDevices.includes(device.id)) ||
|
||||
(activeTab === "online" && device.status === "online") ||
|
||||
(activeTab === "offline" && device.status === "offline")
|
||||
|
||||
return matchesSearch && matchesTab
|
||||
})
|
||||
|
||||
// 选择/取消选择单个设备
|
||||
const handleDeviceSelect = (deviceId: string) => {
|
||||
setSelectedDevices(
|
||||
selectedDevices.includes(deviceId)
|
||||
? selectedDevices.filter((id) => id !== deviceId)
|
||||
: [...selectedDevices, deviceId],
|
||||
)
|
||||
}
|
||||
|
||||
// 保存选择的设备
|
||||
const handleSave = () => {
|
||||
onSave({
|
||||
selectedDevices,
|
||||
selectedDatabase,
|
||||
selectedAudience,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>选择执行点赞任务的设备</CardTitle>
|
||||
<CardDescription>选择要执行自动点赞任务的设备、数据库和目标人群</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 设备筛选和搜索 */}
|
||||
<div className="space-y-4">
|
||||
<Label className="font-medium">选择设备</Label>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="搜索设备名称/微信号"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="icon">
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 设备分类标签页 */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<TabsList className="grid grid-cols-4">
|
||||
<TabsTrigger value="all">全部设备</TabsTrigger>
|
||||
<TabsTrigger value="selected">已选择 ({selectedDevices.length})</TabsTrigger>
|
||||
<TabsTrigger value="online">在线设备</TabsTrigger>
|
||||
<TabsTrigger value="offline">离线设备</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{/* 设备列表 */}
|
||||
<div className="space-y-3">
|
||||
{filteredDevices.map((device) => (
|
||||
<Card
|
||||
key={device.id}
|
||||
className={`p-4 hover:shadow-md transition-shadow ${
|
||||
selectedDevices.includes(device.id) ? "ring-2 ring-primary" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Checkbox
|
||||
checked={selectedDevices.includes(device.id)}
|
||||
onCheckedChange={() => handleDeviceSelect(device.id)}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="font-medium truncate flex items-center">
|
||||
<Smartphone className="h-4 w-4 mr-1 text-muted-foreground" />
|
||||
{device.name}
|
||||
</div>
|
||||
<Badge variant={device.status === "online" ? "success" : "secondary"} className="text-xs">
|
||||
{device.status === "online" ? "在线" : "离线"}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">微信号: {device.wechatId}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{filteredDevices.length === 0 && (
|
||||
<div className="text-center py-8 text-muted-foreground">未找到符合条件的设备</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 数据库选择 */}
|
||||
<div className="space-y-4 pt-4 border-t">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Database className="h-5 w-5 text-muted-foreground" />
|
||||
<Label className="font-medium">选择数据库</Label>
|
||||
</div>
|
||||
<RadioGroup value={selectedDatabase} onValueChange={setSelectedDatabase} className="space-y-3">
|
||||
{databases.map((db) => (
|
||||
<div key={db.id} className="flex items-start space-x-3">
|
||||
<RadioGroupItem value={db.id} id={db.id} />
|
||||
<div className="flex-1">
|
||||
<Label htmlFor={db.id} className="font-medium">
|
||||
{db.name}
|
||||
<Badge variant="outline" className="ml-2">
|
||||
{db.count}条数据
|
||||
</Badge>
|
||||
</Label>
|
||||
<p className="text-sm text-muted-foreground">{db.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
{/* 目标人群选择 */}
|
||||
<div className="space-y-4 pt-4 border-t">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Users className="h-5 w-5 text-muted-foreground" />
|
||||
<Label className="font-medium">选择目标人群</Label>
|
||||
</div>
|
||||
<RadioGroup value={selectedAudience} onValueChange={setSelectedAudience} className="space-y-3">
|
||||
{audienceGroups.map((group) => (
|
||||
<div key={group.id} className="flex items-start space-x-3">
|
||||
<RadioGroupItem value={group.id} id={group.id} />
|
||||
<div className="flex-1">
|
||||
<Label htmlFor={group.id} className="font-medium">
|
||||
{group.name}
|
||||
<Badge variant="outline" className="ml-2">
|
||||
{group.count}人
|
||||
</Badge>
|
||||
</Label>
|
||||
<p className="text-sm text-muted-foreground">{group.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<Button variant="outline" onClick={onBack}>
|
||||
返回上一步
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={selectedDevices.length === 0}>
|
||||
完成设置
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user