398 lines
14 KiB
TypeScript
398 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Search, Tag, MapPin } from "lucide-react"
|
|
import { Alert, AlertDescription } from "@/components/ui/alert"
|
|
import { AlertCircle } from "lucide-react"
|
|
import { DeviceSelector } from "@/app/components/DeviceSelector"
|
|
|
|
interface TargetSelectionProps {
|
|
formData: {
|
|
targetType: string
|
|
selectedDevices: string[]
|
|
selectedTrafficPool: string
|
|
tags: string[]
|
|
regions: string[]
|
|
keywords: string[]
|
|
}
|
|
updateFormData: (
|
|
data: Partial<{
|
|
targetType: string
|
|
selectedDevices: string[]
|
|
selectedTrafficPool: string
|
|
tags: string[]
|
|
regions: string[]
|
|
keywords: string[]
|
|
}>,
|
|
) => void
|
|
onSubmit: () => void
|
|
onBack: () => void
|
|
}
|
|
|
|
interface TrafficUser {
|
|
id: string
|
|
avatar: string
|
|
nickname: string
|
|
wechatId: string
|
|
phone: string
|
|
region: string
|
|
tags: string[]
|
|
addTime: string
|
|
source: string
|
|
}
|
|
|
|
export function TargetSelection({ formData, updateFormData, onSubmit, onBack }: TargetSelectionProps) {
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [trafficUsers, setTrafficUsers] = useState<TrafficUser[]>([])
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
const [selectedTags, setSelectedTags] = useState<string[]>([])
|
|
const [selectedRegions, setSelectedRegions] = useState<string[]>([])
|
|
const [errors, setErrors] = useState<{ selection?: string }>({})
|
|
|
|
// 模拟加载流量池用户数据
|
|
useEffect(() => {
|
|
const fetchTrafficUsers = async () => {
|
|
setIsLoading(true)
|
|
await new Promise((resolve) => setTimeout(resolve, 800))
|
|
|
|
const mockUsers: TrafficUser[] = [
|
|
{
|
|
id: "user-1",
|
|
avatar: "/placeholder.svg?height=40&width=40",
|
|
nickname: "张小明",
|
|
wechatId: "zhangxm123",
|
|
phone: "138****1234",
|
|
region: "北京",
|
|
tags: ["新用户", "低活跃度"],
|
|
addTime: "2023-10-15",
|
|
source: "朋友圈",
|
|
},
|
|
{
|
|
id: "user-2",
|
|
avatar: "/placeholder.svg?height=40&width=40",
|
|
nickname: "李华",
|
|
wechatId: "lihua456",
|
|
phone: "139****5678",
|
|
region: "上海",
|
|
tags: ["高消费", "高活跃度"],
|
|
addTime: "2023-09-20",
|
|
source: "群聊",
|
|
},
|
|
{
|
|
id: "user-3",
|
|
avatar: "/placeholder.svg?height=40&width=40",
|
|
nickname: "王芳",
|
|
wechatId: "wangfang789",
|
|
phone: "137****9012",
|
|
region: "广州",
|
|
tags: ["潜在客户", "有购买意向"],
|
|
addTime: "2023-11-05",
|
|
source: "搜索",
|
|
},
|
|
{
|
|
id: "user-4",
|
|
avatar: "/placeholder.svg?height=40&width=40",
|
|
nickname: "赵明",
|
|
wechatId: "zhaoming321",
|
|
phone: "136****3456",
|
|
region: "深圳",
|
|
tags: ["网购达人", "中高消费"],
|
|
addTime: "2023-10-28",
|
|
source: "附近的人",
|
|
},
|
|
{
|
|
id: "user-5",
|
|
avatar: "/placeholder.svg?height=40&width=40",
|
|
nickname: "刘洋",
|
|
wechatId: "liuyang654",
|
|
phone: "135****7890",
|
|
region: "杭州",
|
|
tags: ["90后", "学生"],
|
|
addTime: "2023-11-10",
|
|
source: "名片",
|
|
},
|
|
{
|
|
id: "user-6",
|
|
avatar: "/placeholder.svg?height=40&width=40",
|
|
nickname: "陈静",
|
|
wechatId: "chenjing987",
|
|
phone: "134****1234",
|
|
region: "成都",
|
|
tags: ["00后", "学生"],
|
|
addTime: "2023-11-15",
|
|
source: "朋友推荐",
|
|
},
|
|
{
|
|
id: "user-7",
|
|
avatar: "/placeholder.svg?height=40&width=40",
|
|
nickname: "林小红",
|
|
wechatId: "linxh123",
|
|
phone: "133****5678",
|
|
region: "南京",
|
|
tags: ["潜在客户", "华东地区"],
|
|
addTime: "2023-10-05",
|
|
source: "扫码",
|
|
},
|
|
{
|
|
id: "user-8",
|
|
avatar: "/placeholder.svg?height=40&width=40",
|
|
nickname: "黄强",
|
|
wechatId: "huangq456",
|
|
phone: "132****9012",
|
|
region: "武汉",
|
|
tags: ["高消费", "有购买意向"],
|
|
addTime: "2023-09-15",
|
|
source: "朋友圈",
|
|
},
|
|
]
|
|
|
|
setTrafficUsers(mockUsers)
|
|
setIsLoading(false)
|
|
}
|
|
|
|
fetchTrafficUsers()
|
|
}, [])
|
|
|
|
const allTags = Array.from(new Set(trafficUsers.flatMap((user) => user.tags)))
|
|
const allRegions = Array.from(new Set(trafficUsers.map((user) => user.region)))
|
|
|
|
const filteredUsers = trafficUsers.filter((user) => {
|
|
const matchesSearch =
|
|
user.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
user.wechatId.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
user.region.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
user.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))
|
|
|
|
const matchesTags = selectedTags.length === 0 || selectedTags.some((tag) => user.tags.includes(tag))
|
|
|
|
const matchesRegions = selectedRegions.length === 0 || selectedRegions.includes(user.region)
|
|
|
|
return matchesSearch && matchesTags && matchesRegions
|
|
})
|
|
|
|
const handleDeviceSelect = (deviceIds: string[]) => {
|
|
updateFormData({ selectedDevices: deviceIds })
|
|
}
|
|
|
|
const handleUserSelect = (userId: string) => {
|
|
updateFormData({
|
|
selectedTrafficPool: userId === formData.selectedTrafficPool ? "" : userId,
|
|
})
|
|
}
|
|
|
|
const handleTagSelect = (tag: string) => {
|
|
setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]))
|
|
}
|
|
|
|
const handleRegionSelect = (region: string) => {
|
|
setSelectedRegions((prev) => (prev.includes(region) ? prev.filter((r) => r !== region) : [...prev, region]))
|
|
}
|
|
|
|
const validateForm = () => {
|
|
const newErrors: { selection?: string } = {}
|
|
|
|
if (formData.targetType === "device" && formData.selectedDevices.length === 0) {
|
|
newErrors.selection = "请至少选择一个设备"
|
|
} else if (formData.targetType === "trafficPool" && !formData.selectedTrafficPool) {
|
|
newErrors.selection = "请选择一个流量池"
|
|
}
|
|
|
|
setErrors(newErrors)
|
|
return Object.keys(newErrors).length === 0
|
|
}
|
|
|
|
const handleSubmit = () => {
|
|
if (validateForm()) {
|
|
onSubmit()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h2 className="text-xl font-semibold mb-4">选择分析对象</h2>
|
|
<p className="text-gray-500 mb-6">选择要分析的设备或流量池</p>
|
|
</div>
|
|
|
|
<Tabs
|
|
defaultValue="device"
|
|
onValueChange={(value) => updateFormData({ targetType: value })}
|
|
value={formData.targetType}
|
|
>
|
|
<TabsList className="grid w-full grid-cols-2 mb-6">
|
|
<TabsTrigger value="device">设备列表</TabsTrigger>
|
|
<TabsTrigger value="trafficPool">流量池</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="device" className="space-y-4">
|
|
<DeviceSelector
|
|
onSelect={handleDeviceSelect}
|
|
initialSelectedDevices={formData.selectedDevices}
|
|
excludeUsedDevices={false}
|
|
/>
|
|
|
|
{errors.selection && formData.targetType === "device" && (
|
|
<p className="text-red-500 text-sm">{errors.selection}</p>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="trafficPool" className="space-y-6">
|
|
<div className="flex flex-col space-y-4">
|
|
<div className="flex items-center space-x-2">
|
|
<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>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2 items-center">
|
|
<Label className="flex items-center">
|
|
<Tag className="h-4 w-4 mr-1" />
|
|
<span>标签筛选:</span>
|
|
</Label>
|
|
<div className="flex flex-wrap gap-1">
|
|
{allTags.map((tag) => (
|
|
<Badge
|
|
key={tag}
|
|
variant={selectedTags.includes(tag) ? "default" : "outline"}
|
|
className="cursor-pointer"
|
|
onClick={() => handleTagSelect(tag)}
|
|
>
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2 items-center">
|
|
<Label className="flex items-center">
|
|
<MapPin className="h-4 w-4 mr-1" />
|
|
<span>地区筛选:</span>
|
|
</Label>
|
|
<div className="flex flex-wrap gap-1">
|
|
{allRegions.map((region) => (
|
|
<Badge
|
|
key={region}
|
|
variant={selectedRegions.includes(region) ? "default" : "outline"}
|
|
className="cursor-pointer"
|
|
onClick={() => handleRegionSelect(region)}
|
|
>
|
|
{region}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-12">
|
|
<div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-hidden rounded-md border">
|
|
<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">用户</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>
|
|
{filteredUsers.map((user) => (
|
|
<tr
|
|
key={user.id}
|
|
className={`border-t hover:bg-gray-50 cursor-pointer ${
|
|
formData.selectedTrafficPool === user.id ? "bg-blue-50" : ""
|
|
}`}
|
|
onClick={() => handleUserSelect(user.id)}
|
|
>
|
|
<td className="px-4 py-3 text-sm">
|
|
<div className="flex items-center">
|
|
<div className="h-8 w-8 flex-shrink-0 rounded-full overflow-hidden mr-3">
|
|
<img
|
|
src={user.avatar || "/placeholder.svg"}
|
|
alt={user.nickname}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className="font-medium">{user.nickname}</div>
|
|
<div className="text-gray-500 text-xs">{user.phone}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm">{user.wechatId}</td>
|
|
<td className="px-4 py-3 text-sm">{user.region}</td>
|
|
<td className="px-4 py-3 text-sm">
|
|
<div className="flex flex-wrap gap-1">
|
|
{user.tags.map((tag) => (
|
|
<Badge key={tag} variant="secondary" className="text-xs">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm">{user.source}</td>
|
|
<td className="px-4 py-3 text-sm">{user.addTime}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{filteredUsers.length === 0 && !isLoading && (
|
|
<div className="text-center py-8 bg-gray-50 rounded-lg border">
|
|
<p className="text-gray-500">没有找到符合条件的微信用户</p>
|
|
</div>
|
|
)}
|
|
|
|
{errors.selection && formData.targetType === "trafficPool" && (
|
|
<p className="text-red-500 text-sm">{errors.selection}</p>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
{formData.targetType === "device" && formData.selectedDevices.length > 0 && (
|
|
<Alert className="bg-blue-50 border-blue-200">
|
|
<AlertCircle className="h-4 w-4 text-blue-500" />
|
|
<AlertDescription className="text-blue-700">
|
|
已选择 {formData.selectedDevices.length} 个设备进行分析
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{formData.targetType === "trafficPool" && formData.selectedTrafficPool && (
|
|
<Alert className="bg-blue-50 border-blue-200">
|
|
<AlertCircle className="h-4 w-4 text-blue-500" />
|
|
<AlertDescription className="text-blue-700">
|
|
已选择用户: {trafficUsers.find((u) => u.id === formData.selectedTrafficPool)?.nickname}
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
<div className="flex justify-between pt-4">
|
|
<Button variant="outline" onClick={onBack}>
|
|
上一步
|
|
</Button>
|
|
<Button onClick={handleSubmit}>提交</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|