325 lines
13 KiB
TypeScript
325 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Card } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Search, Filter } from "lucide-react"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
|
|
interface UserTag {
|
|
id: string
|
|
name: string
|
|
color: string
|
|
}
|
|
|
|
interface TrafficUser {
|
|
id: string
|
|
avatar: string
|
|
nickname: string
|
|
wechatId: string
|
|
phone: string
|
|
region: string
|
|
note: string
|
|
status: "pending" | "added" | "failed"
|
|
addTime: string
|
|
source: string
|
|
assignedTo: string
|
|
category: "potential" | "customer" | "lost"
|
|
tags: UserTag[]
|
|
}
|
|
|
|
interface TrafficPoolSelectorProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
selectedUsers: TrafficUser[]
|
|
onSelect: (users: TrafficUser[]) => void
|
|
}
|
|
|
|
export function TrafficPoolSelector({ open, onOpenChange, selectedUsers, onSelect }: TrafficPoolSelectorProps) {
|
|
const [users, setUsers] = useState<TrafficUser[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
const [activeCategory, setActiveCategory] = useState("all")
|
|
const [sourceFilter, setSourceFilter] = useState("all")
|
|
const [tagFilter, setTagFilter] = useState("all")
|
|
const [selectedUserIds, setSelectedUserIds] = useState<string[]>([])
|
|
|
|
// 初始化已选用户
|
|
useEffect(() => {
|
|
if (open) {
|
|
setSelectedUserIds(selectedUsers.map((user) => user.id))
|
|
}
|
|
}, [open, selectedUsers])
|
|
|
|
// 模拟获取用户数据
|
|
useEffect(() => {
|
|
if (!open) return
|
|
|
|
const fetchUsers = async () => {
|
|
setLoading(true)
|
|
try {
|
|
// 模拟API请求
|
|
await new Promise((resolve) => setTimeout(resolve, 800))
|
|
|
|
// 生成模拟数据
|
|
const mockUsers: TrafficUser[] = Array.from({ length: 30 }, (_, i) => {
|
|
// 随机标签
|
|
const tagPool = [
|
|
{ id: "tag1", name: "潜在客户", color: "bg-blue-100 text-blue-800" },
|
|
{ id: "tag2", name: "高意向", color: "bg-green-100 text-green-800" },
|
|
{ id: "tag3", name: "已成交", color: "bg-purple-100 text-purple-800" },
|
|
{ id: "tag4", name: "需跟进", color: "bg-yellow-100 text-yellow-800" },
|
|
{ id: "tag5", name: "活跃用户", color: "bg-indigo-100 text-indigo-800" },
|
|
{ id: "tag6", name: "沉默用户", color: "bg-gray-100 text-gray-800" },
|
|
{ id: "tag7", name: "企业客户", color: "bg-red-100 text-red-800" },
|
|
{ id: "tag8", name: "个人用户", color: "bg-pink-100 text-pink-800" },
|
|
]
|
|
|
|
const randomTags = Array.from(
|
|
{ length: Math.floor(Math.random() * 3) + 1 },
|
|
() => tagPool[Math.floor(Math.random() * tagPool.length)],
|
|
)
|
|
|
|
// 确保标签唯一
|
|
const uniqueTags = randomTags.filter((tag, index, self) => index === self.findIndex((t) => t.id === tag.id))
|
|
|
|
const sources = ["抖音直播", "小红书", "微信朋友圈", "视频号", "公众号"]
|
|
const statuses = ["pending", "added", "failed"] as const
|
|
|
|
return {
|
|
id: `user-${i + 1}`,
|
|
avatar: `/placeholder.svg?height=40&width=40`,
|
|
nickname: `用户${i + 1}`,
|
|
wechatId: `wxid_${Math.random().toString(36).substring(2, 10)}`,
|
|
phone: `1${Math.floor(Math.random() * 9 + 1)}${Array(9)
|
|
.fill(0)
|
|
.map(() => Math.floor(Math.random() * 10))
|
|
.join("")}`,
|
|
region: ["北京", "上海", "广州", "深圳", "杭州"][Math.floor(Math.random() * 5)],
|
|
note: Math.random() > 0.7 ? `这是用户${i + 1}的备注信息` : "",
|
|
status: statuses[Math.floor(Math.random() * 3)],
|
|
addTime: new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000).toISOString(),
|
|
source: sources[Math.floor(Math.random() * sources.length)],
|
|
assignedTo: Math.random() > 0.5 ? `销售${Math.floor(Math.random() * 5) + 1}` : "",
|
|
category: ["potential", "customer", "lost"][Math.floor(Math.random() * 3)] as
|
|
| "potential"
|
|
| "customer"
|
|
| "lost",
|
|
tags: uniqueTags,
|
|
}
|
|
})
|
|
|
|
setUsers(mockUsers)
|
|
} catch (error) {
|
|
console.error("Failed to fetch users:", error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchUsers()
|
|
}, [open])
|
|
|
|
// 过滤用户
|
|
const filteredUsers = users.filter((user) => {
|
|
const matchesSearch =
|
|
searchQuery === "" ||
|
|
user.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
user.wechatId.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
user.phone.includes(searchQuery)
|
|
|
|
const matchesCategory = activeCategory === "all" || user.category === activeCategory
|
|
|
|
const matchesSource = sourceFilter === "all" || user.source === sourceFilter
|
|
|
|
const matchesTag = tagFilter === "all" || user.tags.some((tag) => tag.id === tagFilter)
|
|
|
|
return matchesSearch && matchesCategory && matchesSource && matchesTag
|
|
})
|
|
|
|
// 处理选择用户
|
|
const handleSelectUser = (userId: string) => {
|
|
setSelectedUserIds((prev) => (prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId]))
|
|
}
|
|
|
|
// 处理全选
|
|
const handleSelectAll = () => {
|
|
if (selectedUserIds.length === filteredUsers.length) {
|
|
setSelectedUserIds([])
|
|
} else {
|
|
setSelectedUserIds(filteredUsers.map((user) => user.id))
|
|
}
|
|
}
|
|
|
|
// 处理确认选择
|
|
const handleConfirm = () => {
|
|
const selectedUsersList = users.filter((user) => selectedUserIds.includes(user.id))
|
|
onSelect(selectedUsersList)
|
|
onOpenChange(false)
|
|
}
|
|
|
|
// 获取所有标签选项
|
|
const allTags = Array.from(new Set(users.flatMap((user) => user.tags).map((tag) => JSON.stringify(tag)))).map(
|
|
(tag) => JSON.parse(tag) as UserTag,
|
|
)
|
|
|
|
// 获取所有来源选项
|
|
const allSources = Array.from(new Set(users.map((user) => user.source)))
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-3xl max-h-[90vh] flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle>选择流量池用户</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 overflow-hidden flex flex-col">
|
|
{/* 搜索和筛选区域 */}
|
|
<div className="space-y-4 mb-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>
|
|
<Button variant="outline" size="icon">
|
|
<Filter className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 分类标签页 */}
|
|
<Tabs defaultValue="all" value={activeCategory} onValueChange={setActiveCategory}>
|
|
<TabsList className="grid w-full grid-cols-4">
|
|
<TabsTrigger value="all">全部</TabsTrigger>
|
|
<TabsTrigger value="potential">潜在客户</TabsTrigger>
|
|
<TabsTrigger value="customer">已转化</TabsTrigger>
|
|
<TabsTrigger value="lost">已流失</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
|
|
{/* 筛选器 */}
|
|
<div className="flex space-x-2">
|
|
<Select value={sourceFilter} onValueChange={setSourceFilter}>
|
|
<SelectTrigger className="w-[140px]">
|
|
<SelectValue placeholder="来源" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">全部来源</SelectItem>
|
|
{allSources.map((source) => (
|
|
<SelectItem key={source} value={source}>
|
|
{source}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={tagFilter} onValueChange={setTagFilter}>
|
|
<SelectTrigger className="w-[140px]">
|
|
<SelectValue placeholder="标签" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">全部标签</SelectItem>
|
|
{allTags.map((tag) => (
|
|
<SelectItem key={tag.id} value={tag.id}>
|
|
{tag.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Button variant="outline" className="ml-auto" onClick={handleSelectAll}>
|
|
{selectedUserIds.length === filteredUsers.length && filteredUsers.length > 0 ? "取消全选" : "全选"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 用户列表 */}
|
|
<ScrollArea className="flex-1">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-40">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
</div>
|
|
) : filteredUsers.length === 0 ? (
|
|
<div className="text-center py-8 text-gray-500">
|
|
{searchQuery || activeCategory !== "all" || sourceFilter !== "all" || tagFilter !== "all"
|
|
? "没有符合条件的用户"
|
|
: "暂无用户数据"}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2 pr-4">
|
|
{filteredUsers.map((user) => (
|
|
<Card
|
|
key={user.id}
|
|
className={`p-3 hover:shadow-md transition-shadow ${
|
|
selectedUserIds.includes(user.id) ? "border-primary" : ""
|
|
}`}
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<Checkbox
|
|
checked={selectedUserIds.includes(user.id)}
|
|
onCheckedChange={() => handleSelectUser(user.id)}
|
|
id={`user-${user.id}`}
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<label htmlFor={`user-${user.id}`} className="font-medium truncate cursor-pointer">
|
|
{user.nickname}
|
|
</label>
|
|
<div
|
|
className={`px-2 py-1 rounded-full text-xs ${
|
|
user.status === "added"
|
|
? "bg-green-100 text-green-800"
|
|
: user.status === "pending"
|
|
? "bg-yellow-100 text-yellow-800"
|
|
: "bg-red-100 text-red-800"
|
|
}`}
|
|
>
|
|
{user.status === "added" ? "已添加" : user.status === "pending" ? "待处理" : "已失败"}
|
|
</div>
|
|
</div>
|
|
<div className="text-sm text-gray-500">微信号: {user.wechatId}</div>
|
|
<div className="text-sm text-gray-500">来源: {user.source}</div>
|
|
|
|
{/* 标签展示 */}
|
|
<div className="flex flex-wrap gap-1 mt-2">
|
|
{user.tags.map((tag) => (
|
|
<span key={tag.id} className={`text-xs px-2 py-0.5 rounded-full ${tag.color}`}>
|
|
{tag.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
</div>
|
|
|
|
<DialogFooter className="flex items-center justify-between pt-4 border-t">
|
|
<div className="text-sm">
|
|
已选择 <span className="font-medium text-primary">{selectedUserIds.length}</span> 个用户
|
|
</div>
|
|
<div className="space-x-2">
|
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
|
取消
|
|
</Button>
|
|
<Button onClick={handleConfirm}>确认</Button>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|