295 lines
10 KiB
TypeScript
295 lines
10 KiB
TypeScript
"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>
|
|
)
|
|
}
|
|
|