存客宝 React
This commit is contained in:
柳清爽
@@ -0,0 +1,187 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Plus, Minus, X } from "lucide-react"
|
||||
import { DeviceSelector } from "./device-selector"
|
||||
import { WechatAccountSelector } from "./wechat-account-selector"
|
||||
|
||||
interface StepByStepPlanFormProps {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function StepByStepPlanForm({ onClose }: StepByStepPlanFormProps) {
|
||||
const [step, setStep] = useState(1)
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
customerType: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
groupSize: 38,
|
||||
welcomeMessage: "欢迎进群",
|
||||
devices: [] as string[],
|
||||
wechatAccounts: [] as string[],
|
||||
})
|
||||
|
||||
const handleNext = () => {
|
||||
setStep(step + 1)
|
||||
}
|
||||
|
||||
const handlePrevious = () => {
|
||||
setStep(step - 1)
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
// TODO: 提交表单数据
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<DialogTitle>新建计划 - 步骤 {step}/4</DialogTitle>
|
||||
<Button variant="ghost" size="icon" onClick={onClose}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{step === 1 && (
|
||||
<>
|
||||
<div>
|
||||
<Label htmlFor="name" className="text-base">
|
||||
计划名称<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="请输入任务名称"
|
||||
className="mt-1.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="customerType" className="text-base">
|
||||
建群客户类型
|
||||
</Label>
|
||||
<Input
|
||||
id="customerType"
|
||||
value={formData.customerType}
|
||||
onChange={(e) => setFormData({ ...formData, customerType: e.target.value })}
|
||||
placeholder="选择客户标签"
|
||||
className="mt-1.5"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<>
|
||||
<div>
|
||||
<Label className="text-base">执行期限</Label>
|
||||
<div className="flex items-center space-x-4 mt-1.5">
|
||||
<Input
|
||||
type="date"
|
||||
value={formData.startDate}
|
||||
onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
|
||||
/>
|
||||
<span>至</span>
|
||||
<Input
|
||||
type="date"
|
||||
value={formData.endDate}
|
||||
onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-base">建群人数设置</Label>
|
||||
<div className="flex items-center space-x-4 mt-1.5">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setFormData({ ...formData, groupSize: Math.max(1, formData.groupSize - 1) })}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="w-12 text-center">{formData.groupSize}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setFormData({ ...formData, groupSize: formData.groupSize + 1 })}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span>人</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<>
|
||||
<div>
|
||||
<Label htmlFor="welcomeMessage" className="text-base">
|
||||
招呼语
|
||||
</Label>
|
||||
<Input
|
||||
id="welcomeMessage"
|
||||
value={formData.welcomeMessage}
|
||||
onChange={(e) => setFormData({ ...formData, welcomeMessage: e.target.value })}
|
||||
placeholder="欢迎进群"
|
||||
className="mt-1.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-base">建群设备</Label>
|
||||
<DeviceSelector
|
||||
selectedDevices={formData.devices}
|
||||
onChange={(devices) => setFormData({ ...formData, devices })}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 4 && (
|
||||
<div>
|
||||
<Label className="text-base">关联微信</Label>
|
||||
<WechatAccountSelector
|
||||
selectedAccounts={formData.wechatAccounts}
|
||||
onChange={(accounts) => setFormData({ ...formData, wechatAccounts: accounts })}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between space-x-4 pt-4">
|
||||
{step > 1 && (
|
||||
<Button type="button" variant="outline" onClick={handlePrevious}>
|
||||
上一步
|
||||
</Button>
|
||||
)}
|
||||
{step < 4 ? (
|
||||
<Button type="button" onClick={handleNext} className="bg-blue-600 hover:bg-blue-700">
|
||||
下一步
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700">
|
||||
完成
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
export interface Friend {
|
||||
id: string
|
||||
nickname: string
|
||||
wechatId: string
|
||||
tags: string[]
|
||||
}
|
||||
|
||||
export interface GroupConfig {
|
||||
size: number
|
||||
specificWechatIds: string[]
|
||||
keywords: string[]
|
||||
tags: string[]
|
||||
}
|
||||
|
||||
export class AutoGroupService {
|
||||
static async createGroups(friends: Friend[], config: GroupConfig) {
|
||||
// 1. 过滤好友
|
||||
const filteredFriends = this.filterFriends(friends, config)
|
||||
|
||||
// 2. 分组
|
||||
const groups = this.groupFriends(filteredFriends, config)
|
||||
|
||||
return groups
|
||||
}
|
||||
|
||||
private static filterFriends(friends: Friend[], config: GroupConfig) {
|
||||
return friends.filter((friend) => {
|
||||
// 关键词匹配
|
||||
const matchesKeywords =
|
||||
config.keywords.length === 0 ||
|
||||
config.keywords.some((keyword) => friend.nickname.includes(keyword) || friend.wechatId.includes(keyword))
|
||||
|
||||
// 标签匹配
|
||||
const matchesTags = config.tags.length === 0 || config.tags.some((tag) => friend.tags.includes(tag))
|
||||
|
||||
return matchesKeywords && matchesTags
|
||||
})
|
||||
}
|
||||
|
||||
private static groupFriends(friends: Friend[], config: GroupConfig) {
|
||||
const groups: Friend[][] = []
|
||||
let currentGroup: Friend[] = []
|
||||
|
||||
// 添加指定的微信号到每个组
|
||||
const specificFriends = friends.filter((f) => config.specificWechatIds.includes(f.wechatId))
|
||||
|
||||
// 剩余好友
|
||||
const remainingFriends = friends.filter((f) => !config.specificWechatIds.includes(f.wechatId))
|
||||
|
||||
// 分组
|
||||
for (const friend of remainingFriends) {
|
||||
if (currentGroup.length >= config.size - specificFriends.length) {
|
||||
groups.push([...specificFriends, ...currentGroup])
|
||||
currentGroup = []
|
||||
}
|
||||
currentGroup.push(friend)
|
||||
}
|
||||
|
||||
// 处理最后一组
|
||||
if (currentGroup.length > 0) {
|
||||
groups.push([...specificFriends, ...currentGroup])
|
||||
}
|
||||
|
||||
return groups
|
||||
}
|
||||
|
||||
static async checkGroupSize(groupId: string): Promise<number> {
|
||||
// 模拟检查群大小的API调用
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(Math.floor(Math.random() * 10) + 30)
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
|
||||
static async addMembersToGroup(groupId: string, members: Friend[]): Promise<boolean> {
|
||||
// 模拟添加成员的API调用
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(true)
|
||||
}, 2000)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
129
Cunkebao/app/workspace/auto-group/components/columns.tsx
Normal file
129
Cunkebao/app/workspace/auto-group/components/columns.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
"use client"
|
||||
|
||||
import type { ColumnDef } from "@tanstack/react-table"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Eye, Edit, Trash } from "lucide-react"
|
||||
|
||||
export type Plan = {
|
||||
id: string
|
||||
name: string
|
||||
groupCount: number
|
||||
groupSize: number
|
||||
totalFriends: number
|
||||
tags: string[]
|
||||
deviceId: string
|
||||
operator: string
|
||||
timeRange: string
|
||||
contacts: string[]
|
||||
status: "running" | "paused" | "completed"
|
||||
}
|
||||
|
||||
export const columns: ColumnDef<Plan>[] = [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: "序号",
|
||||
cell: ({ row }) => row.index + 1,
|
||||
},
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "计划名称",
|
||||
},
|
||||
{
|
||||
accessorKey: "groupCount",
|
||||
header: "已建群数量",
|
||||
},
|
||||
{
|
||||
accessorKey: "groupSize",
|
||||
header: "建群人数标准",
|
||||
cell: ({ row }) => `${row.original.groupSize}/群`,
|
||||
},
|
||||
{
|
||||
accessorKey: "totalFriends",
|
||||
header: "微信客户数量",
|
||||
},
|
||||
{
|
||||
accessorKey: "tags",
|
||||
header: "群标签",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex gap-1">
|
||||
{row.original.tags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "deviceId",
|
||||
header: "执行设备ID",
|
||||
},
|
||||
{
|
||||
accessorKey: "operator",
|
||||
header: "执行客服号",
|
||||
},
|
||||
{
|
||||
accessorKey: "timeRange",
|
||||
header: "执行时间",
|
||||
},
|
||||
{
|
||||
accessorKey: "contacts",
|
||||
header: "关联微信",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex gap-1">
|
||||
{row.original.contacts.map((contact) => (
|
||||
<Badge key={contact} variant="outline">
|
||||
{contact}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "状态",
|
||||
cell: ({ row }) => {
|
||||
const status = row.original.status
|
||||
const statusMap = {
|
||||
running: { label: "执行中", color: "bg-green-500" },
|
||||
paused: { label: "已暂停", color: "bg-yellow-500" },
|
||||
completed: { label: "已完成", color: "bg-gray-500" },
|
||||
}
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div className={`w-2 h-2 rounded-full mr-2 ${statusMap[status].color}`} />
|
||||
{statusMap[status].label}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: "操作",
|
||||
cell: ({ row }) => {
|
||||
const plan = row.original
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="text-red-500 hover:text-red-600">
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
<Switch
|
||||
checked={plan.status === "running"}
|
||||
onCheckedChange={() => {
|
||||
// TODO: 更新计划状态
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
96
Cunkebao/app/workspace/auto-group/components/data-table.tsx
Normal file
96
Cunkebao/app/workspace/auto-group/components/data-table.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
type ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
getPaginationRowModel,
|
||||
getFilteredRowModel,
|
||||
type ColumnFiltersState,
|
||||
} from "@tanstack/react-table"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useState } from "react"
|
||||
import { Search } from "lucide-react"
|
||||
|
||||
interface DataTableProps<TData, TValue> {
|
||||
columns: ColumnDef<TData, TValue>[]
|
||||
data: TData[]
|
||||
}
|
||||
|
||||
export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
|
||||
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
|
||||
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
state: {
|
||||
columnFilters,
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="搜索计划名称..."
|
||||
value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
|
||||
onChange={(event) => table.getColumn("name")?.setFilterValue(event.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
暂无数据
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end space-x-2">
|
||||
<Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
|
||||
上一页
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
|
||||
下一页
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,329 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Search, CheckCircle2, AlertCircle, Smartphone, Laptop } from "lucide-react"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
|
||||
// 模拟设备数据
|
||||
const mockDevices = Array.from({ length: 20 }).map((_, i) => ({
|
||||
id: `device-${i + 1}`,
|
||||
name: `设备 ${i + 1}`,
|
||||
model: i % 3 === 0 ? "iPhone 13" : i % 3 === 1 ? "Xiaomi 12" : "Huawei P40",
|
||||
status: i % 5 === 0 ? "offline" : i % 7 === 0 ? "busy" : "online",
|
||||
account: `wxid_${100 + i}`,
|
||||
type: i % 2 === 0 ? "mobile" : "emulator",
|
||||
group: i % 3 === 0 ? "常用设备" : i % 3 === 1 ? "备用设备" : "测试设备",
|
||||
successRate: Math.floor(70 + Math.random() * 30),
|
||||
restrictCount: Math.floor(Math.random() * 5),
|
||||
}))
|
||||
|
||||
interface DeviceSelectionProps {
|
||||
onNext: () => void
|
||||
onPrevious: () => void
|
||||
initialSelectedDevices?: string[]
|
||||
onDevicesChange: (deviceIds: string[]) => void
|
||||
}
|
||||
|
||||
export function DeviceSelection({
|
||||
onNext,
|
||||
onPrevious,
|
||||
initialSelectedDevices = [],
|
||||
onDevicesChange,
|
||||
}: DeviceSelectionProps) {
|
||||
const [selectedDevices, setSelectedDevices] = useState<string[]>(initialSelectedDevices)
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all")
|
||||
const [typeFilter, setTypeFilter] = useState<string>("all")
|
||||
const [groupFilter, setGroupFilter] = useState<string>("all")
|
||||
|
||||
// 使用ref来跟踪是否已经通知了父组件初始选择
|
||||
const initialNotificationRef = useRef(false)
|
||||
|
||||
const deviceGroups = Array.from(new Set(mockDevices.map((device) => device.group)))
|
||||
|
||||
const filteredDevices = mockDevices.filter((device) => {
|
||||
const matchesSearch =
|
||||
device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
device.account.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
const matchesStatus = statusFilter === "all" || device.status === statusFilter
|
||||
const matchesType = typeFilter === "all" || device.type === typeFilter
|
||||
const matchesGroup = groupFilter === "all" || device.group === groupFilter
|
||||
|
||||
return matchesSearch && matchesStatus && matchesType && matchesGroup
|
||||
})
|
||||
|
||||
// 只在选择变化时通知父组件，使用防抖
|
||||
useEffect(() => {
|
||||
if (!initialNotificationRef.current) {
|
||||
initialNotificationRef.current = true
|
||||
return
|
||||
}
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
onDevicesChange(selectedDevices)
|
||||
}, 300)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}, [selectedDevices, onDevicesChange])
|
||||
|
||||
const handleDeviceToggle = (deviceId: string) => {
|
||||
setSelectedDevices((prev) => (prev.includes(deviceId) ? prev.filter((id) => id !== deviceId) : [...prev, deviceId]))
|
||||
}
|
||||
|
||||
const handleSelectAll = () => {
|
||||
setSelectedDevices(filteredDevices.map((device) => device.id))
|
||||
}
|
||||
|
||||
const handleDeselectAll = () => {
|
||||
setSelectedDevices([])
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "online":
|
||||
return "bg-green-500"
|
||||
case "offline":
|
||||
return "bg-gray-500"
|
||||
case "busy":
|
||||
return "bg-yellow-500"
|
||||
default:
|
||||
return "bg-gray-500"
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case "online":
|
||||
return "在线"
|
||||
case "offline":
|
||||
return "离线"
|
||||
case "busy":
|
||||
return "繁忙"
|
||||
default:
|
||||
return status
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="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>
|
||||
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue placeholder="状态" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有状态</SelectItem>
|
||||
<SelectItem value="online">在线</SelectItem>
|
||||
<SelectItem value="offline">离线</SelectItem>
|
||||
<SelectItem value="busy">繁忙</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue placeholder="设备类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有类型</SelectItem>
|
||||
<SelectItem value="mobile">手机设备</SelectItem>
|
||||
<SelectItem value="emulator">模拟器</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={groupFilter} onValueChange={setGroupFilter}>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue placeholder="设备分组" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有分组</SelectItem>
|
||||
{deviceGroups.map((group) => (
|
||||
<SelectItem key={group} value={group}>
|
||||
{group}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm text-gray-500">
|
||||
已选择 <span className="font-medium text-blue-600">{selectedDevices.length}</span> 台设备
|
||||
</div>
|
||||
<div className="space-x-2">
|
||||
<Button variant="outline" size="sm" onClick={handleSelectAll}>
|
||||
全选
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={handleDeselectAll}>
|
||||
取消全选
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="list" className="w-full">
|
||||
<TabsList className="grid w-60 grid-cols-2">
|
||||
<TabsTrigger value="list">列表视图</TabsTrigger>
|
||||
<TabsTrigger value="grid">网格视图</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="list" className="mt-2">
|
||||
<ScrollArea className="h-[400px] rounded-md border">
|
||||
<div className="divide-y">
|
||||
{filteredDevices.map((device) => (
|
||||
<div key={device.id} className="flex items-center justify-between p-3 hover:bg-gray-50">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Checkbox
|
||||
id={device.id}
|
||||
checked={selectedDevices.includes(device.id)}
|
||||
onCheckedChange={() => handleDeviceToggle(device.id)}
|
||||
disabled={device.status === "offline"}
|
||||
/>
|
||||
{device.type === "mobile" ? (
|
||||
<Smartphone className="h-5 w-5 text-gray-500" />
|
||||
) : (
|
||||
<Laptop className="h-5 w-5 text-gray-500" />
|
||||
)}
|
||||
<div>
|
||||
<div className="font-medium">{device.name}</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{device.model} | {device.account}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="text-sm">
|
||||
成功率:{" "}
|
||||
<span className={device.successRate > 90 ? "text-green-600" : "text-yellow-600"}>
|
||||
{device.successRate}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
限制次数:{" "}
|
||||
<span className={device.restrictCount === 0 ? "text-green-600" : "text-red-600"}>
|
||||
{device.restrictCount}
|
||||
</span>
|
||||
</div>
|
||||
<Badge className={`${getStatusColor(device.status)} text-white`}>
|
||||
{getStatusText(device.status)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{filteredDevices.length === 0 && (
|
||||
<div className="p-4 text-center text-gray-500">没有找到符合条件的设备</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="grid" className="mt-2">
|
||||
<ScrollArea className="h-[400px] rounded-md border">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
|
||||
{filteredDevices.map((device) => (
|
||||
<div
|
||||
key={device.id}
|
||||
className={`border rounded-md p-3 ${
|
||||
selectedDevices.includes(device.id) ? "border-blue-500 bg-blue-50" : ""
|
||||
} ${device.status === "offline" ? "opacity-60" : ""}`}
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div className="flex items-center">
|
||||
{device.type === "mobile" ? (
|
||||
<Smartphone className="h-4 w-4 text-gray-500 mr-1" />
|
||||
) : (
|
||||
<Laptop className="h-4 w-4 text-gray-500 mr-1" />
|
||||
)}
|
||||
<span className="font-medium truncate">{device.name}</span>
|
||||
</div>
|
||||
<Badge className={`${getStatusColor(device.status)} text-white text-xs`}>
|
||||
{getStatusText(device.status)}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-gray-500 mb-2">{device.model}</div>
|
||||
<div className="text-xs text-gray-500 mb-3">{device.account}</div>
|
||||
|
||||
<div className="flex justify-between text-xs mb-3">
|
||||
<div>
|
||||
成功率:{" "}
|
||||
<span className={device.successRate > 90 ? "text-green-600" : "text-yellow-600"}>
|
||||
{device.successRate}%
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
限制:{" "}
|
||||
<span className={device.restrictCount === 0 ? "text-green-600" : "text-red-600"}>
|
||||
{device.restrictCount}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant={selectedDevices.includes(device.id) ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="w-full"
|
||||
onClick={() => handleDeviceToggle(device.id)}
|
||||
disabled={device.status === "offline"}
|
||||
>
|
||||
{selectedDevices.includes(device.id) ? (
|
||||
<>
|
||||
<CheckCircle2 className="h-4 w-4 mr-1" /> 已选择
|
||||
</>
|
||||
) : (
|
||||
"选择设备"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{filteredDevices.length === 0 && (
|
||||
<div className="col-span-full p-4 text-center text-gray-500">没有找到符合条件的设备</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{selectedDevices.length === 0 && (
|
||||
<div className="flex items-center p-3 bg-yellow-50 rounded-md text-yellow-800">
|
||||
<AlertCircle className="h-4 w-4 mr-2" />
|
||||
请至少选择一台设备来执行建群任务
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<Button variant="outline" onClick={onPrevious}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={onNext} className="bg-blue-500 hover:bg-blue-600" disabled={selectedDevices.length === 0}>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Search, Plus } from "lucide-react"
|
||||
import { Table } from "@/components/ui/table"
|
||||
|
||||
interface DeviceSelectorProps {
|
||||
selectedDevices: string[]
|
||||
onChange: (devices: string[]) => void
|
||||
}
|
||||
|
||||
export function DeviceSelector({ selectedDevices, onChange }: DeviceSelectorProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="mt-1.5">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
选择设备
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-4xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>选择设备</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input placeholder="搜索设备" className="pl-9" />
|
||||
</div>
|
||||
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备id</th>
|
||||
<th>当前客服</th>
|
||||
<th>在线状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan={5} className="text-center py-4 text-gray-500">
|
||||
暂无数据
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<div className="flex justify-end space-x-4">
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={() => setOpen(false)} className="bg-blue-600 hover:bg-blue-700">
|
||||
确定
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
127
Cunkebao/app/workspace/auto-group/components/group-assistant.tsx
Normal file
127
Cunkebao/app/workspace/auto-group/components/group-assistant.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Search, RefreshCw, Users } from "lucide-react"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Avatar } from "@/components/ui/avatar"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
|
||||
interface Friend {
|
||||
id: string
|
||||
name: string
|
||||
wxid: string
|
||||
avatar: string
|
||||
selected?: boolean
|
||||
}
|
||||
|
||||
interface GroupAssistantProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onCreateGroup: (friends: Friend[]) => void
|
||||
}
|
||||
|
||||
export function GroupAssistant({ open, onOpenChange, onCreateGroup }: GroupAssistantProps) {
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [selectedTag, setSelectedTag] = useState("")
|
||||
const [friends, setFriends] = useState<Friend[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setLoading(true)
|
||||
// TODO: 刷新好友列表
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const handleCreateGroup = () => {
|
||||
const selectedFriends = friends.filter((f) => f.selected)
|
||||
onCreateGroup(selectedFriends)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-4xl h-[80vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>建群助手</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex space-x-4 mb-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="请输入好友信息筛选"
|
||||
className="pl-9"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Select value={selectedTag} onValueChange={setSelectedTag}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="好友分组" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部好友</SelectItem>
|
||||
<SelectItem value="new">新好友</SelectItem>
|
||||
<SelectItem value="business">商务合作</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline" onClick={handleRefresh} disabled={loading}>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto border rounded-md">
|
||||
{friends.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500">
|
||||
<Users className="h-12 w-12 mb-2" />
|
||||
<p>暂无好友数据</p>
|
||||
<Button variant="link" onClick={handleRefresh} disabled={loading}>
|
||||
点击刷新
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{friends.map((friend) => (
|
||||
<div key={friend.id} className="flex items-center space-x-4 p-4 hover:bg-gray-50">
|
||||
<Checkbox
|
||||
checked={friend.selected}
|
||||
onCheckedChange={(checked) => {
|
||||
setFriends(friends.map((f) => (f.id === friend.id ? { ...f, selected: !!checked } : f)))
|
||||
}}
|
||||
/>
|
||||
<Avatar className="h-10 w-10">
|
||||
<img src={friend.avatar || "/placeholder.svg"} alt={friend.name} />
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{friend.name}</div>
|
||||
<div className="text-sm text-gray-500">{friend.wxid}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-4">
|
||||
<div className="text-sm text-gray-500">已选择 {friends.filter((f) => f.selected).length} 个好友</div>
|
||||
<div className="space-x-4">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCreateGroup}
|
||||
disabled={friends.filter((f) => f.selected).length === 0}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
创建群聊
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { GroupPreview } from "./group-preview"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { AlertCircle, CheckCircle2 } from "lucide-react"
|
||||
|
||||
interface GroupCreationProgressProps {
|
||||
planId: string
|
||||
onComplete: () => void
|
||||
}
|
||||
|
||||
export function GroupCreationProgress({ planId, onComplete }: GroupCreationProgressProps) {
|
||||
const [groups, setGroups] = useState<any[]>([])
|
||||
const [currentGroupIndex, setCurrentGroupIndex] = useState(0)
|
||||
const [status, setStatus] = useState<"preparing" | "creating" | "completed">("preparing")
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
// 模拟获取分组数据
|
||||
const mockGroups = Array.from({ length: 5 }).map((_, index) => ({
|
||||
id: `group-${index}`,
|
||||
members: Array.from({ length: Math.floor(Math.random() * 10) + 30 }).map((_, mIndex) => ({
|
||||
id: `member-${index}-${mIndex}`,
|
||||
nickname: `用户${mIndex + 1}`,
|
||||
wechatId: `wx_${mIndex}`,
|
||||
tags: [`标签${(mIndex % 3) + 1}`],
|
||||
})),
|
||||
}))
|
||||
setGroups(mockGroups)
|
||||
setStatus("creating")
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (status === "creating" && currentGroupIndex < groups.length) {
|
||||
const timer = setTimeout(() => {
|
||||
if (currentGroupIndex === groups.length - 1) {
|
||||
setStatus("completed")
|
||||
onComplete()
|
||||
} else {
|
||||
setCurrentGroupIndex((prev) => prev + 1)
|
||||
}
|
||||
}, 3000)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [status, currentGroupIndex, groups.length, onComplete])
|
||||
|
||||
const handleRetryGroup = (groupIndex: number) => {
|
||||
// 模拟重试逻辑
|
||||
setGroups((prev) =>
|
||||
prev.map((group, index) => {
|
||||
if (index === groupIndex) {
|
||||
return {
|
||||
...group,
|
||||
members: [
|
||||
...group.members,
|
||||
{
|
||||
id: `retry-member-${Date.now()}`,
|
||||
nickname: `补充用户${group.members.length + 1}`,
|
||||
wechatId: `wx_retry_${Date.now()}`,
|
||||
tags: ["新加入"],
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
return group
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg font-medium">
|
||||
建群进度
|
||||
<Badge className="ml-2">
|
||||
{status === "preparing" ? "准备中" : status === "creating" ? "创建中" : "已完成"}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<div className="text-sm text-gray-500">
|
||||
{currentGroupIndex + 1}/{groups.length}组
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Progress value={Math.round(((currentGroupIndex + 1) / groups.length) * 100)} className="h-2" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<ScrollArea className="h-[calc(100vh-300px)]">
|
||||
<div className="space-y-4">
|
||||
{groups.map((group, index) => (
|
||||
<GroupPreview
|
||||
key={group.id}
|
||||
groupIndex={index}
|
||||
members={group.members}
|
||||
isCreating={status === "creating" && index === currentGroupIndex}
|
||||
isCompleted={status === "completed" || index < currentGroupIndex}
|
||||
onRetry={() => handleRetryGroup(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{status === "completed" && (
|
||||
<Alert>
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
<AlertDescription>所有群组已创建完成</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Users, AlertCircle, CheckCircle2 } from "lucide-react"
|
||||
|
||||
interface Friend {
|
||||
id: string
|
||||
nickname: string
|
||||
wechatId: string
|
||||
tags: string[]
|
||||
}
|
||||
|
||||
interface GroupPreviewProps {
|
||||
groupIndex: number
|
||||
members: Friend[]
|
||||
isCreating: boolean
|
||||
isCompleted: boolean
|
||||
onRetry?: () => void
|
||||
}
|
||||
|
||||
export function GroupPreview({ groupIndex, members, isCreating, isCompleted, onRetry }: GroupPreviewProps) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
|
||||
return (
|
||||
<Card className="w-full">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg font-medium">
|
||||
群 {groupIndex + 1}
|
||||
<Badge variant={isCompleted ? "success" : isCreating ? "default" : "secondary"} className="ml-2">
|
||||
{isCompleted ? "已完成" : isCreating ? "创建中" : "等待中"}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Users className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-sm text-gray-500">{members.length}/38</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isCreating && !isCompleted && (
|
||||
<div className="mb-4">
|
||||
<Progress value={Math.round((members.length / 38) * 100)} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{expanded ? (
|
||||
<div className="space-y-2">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{members.map((member) => (
|
||||
<div key={member.id} className="text-sm flex items-center space-x-2 bg-gray-50 p-2 rounded">
|
||||
<span className="truncate">{member.nickname}</span>
|
||||
{member.tags.length > 0 && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{member.tags[0]}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="w-full mt-2" onClick={() => setExpanded(false)}>
|
||||
收起
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button variant="ghost" size="sm" className="w-full" onClick={() => setExpanded(true)}>
|
||||
查看成员 ({members.length})
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{!isCompleted && members.length < 38 && (
|
||||
<div className="mt-4 flex items-center text-amber-500 text-sm">
|
||||
<AlertCircle className="w-4 h-4 mr-2" />
|
||||
群人数不足38人
|
||||
{onRetry && (
|
||||
<Button variant="ghost" size="sm" className="ml-2 text-blue-500" onClick={onRetry}>
|
||||
继续拉人
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isCompleted && (
|
||||
<div className="mt-4 flex items-center text-green-500 text-sm">
|
||||
<CheckCircle2 className="w-4 h-4 mr-2" />
|
||||
群创建完成
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
474
Cunkebao/app/workspace/auto-group/components/group-settings.tsx
Normal file
474
Cunkebao/app/workspace/auto-group/components/group-settings.tsx
Normal file
@@ -0,0 +1,474 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { AlertCircle, Info, Plus, Minus, User, Users, X, Search } from "lucide-react"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
|
||||
interface WechatFriend {
|
||||
id: string
|
||||
nickname: string
|
||||
wechatId: string
|
||||
avatar: string
|
||||
tags: string[]
|
||||
}
|
||||
|
||||
interface GroupSettingsProps {
|
||||
onNext: () => void
|
||||
initialValues?: {
|
||||
name: string
|
||||
fixedWechatIds: string[]
|
||||
groupingOption: "all" | "fixed"
|
||||
fixedGroupCount: number
|
||||
}
|
||||
onValuesChange: (values: {
|
||||
name: string
|
||||
fixedWechatIds: string[]
|
||||
groupingOption: "all" | "fixed"
|
||||
fixedGroupCount: number
|
||||
}) => void
|
||||
}
|
||||
|
||||
export function GroupSettings({ onNext, initialValues, onValuesChange }: GroupSettingsProps) {
|
||||
const [name, setName] = useState(initialValues?.name || "新建群计划")
|
||||
const [fixedWechatIds, setFixedWechatIds] = useState<string[]>(initialValues?.fixedWechatIds || [])
|
||||
const [newWechatId, setNewWechatId] = useState("")
|
||||
const [groupingOption, setGroupingOption] = useState<"all" | "fixed">(initialValues?.groupingOption || "all")
|
||||
const [fixedGroupCount, setFixedGroupCount] = useState(initialValues?.fixedGroupCount || 5)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [warning, setWarning] = useState<string | null>(null)
|
||||
const [friendSelectorOpen, setFriendSelectorOpen] = useState(false)
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [friends, setFriends] = useState<WechatFriend[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [selectedFriends, setSelectedFriends] = useState<WechatFriend[]>([])
|
||||
|
||||
// 微信群人数固定为38人
|
||||
const GROUP_SIZE = 38
|
||||
// 系统建议的最大群组数
|
||||
const RECOMMENDED_MAX_GROUPS = 20
|
||||
// 最多可选择的微信号数量
|
||||
const MAX_WECHAT_IDS = 5
|
||||
|
||||
// 只在组件挂载时执行一次初始验证
|
||||
useEffect(() => {
|
||||
validateSettings()
|
||||
fetchFriends()
|
||||
}, [])
|
||||
|
||||
// 当值变化时，通知父组件
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
onValuesChange({
|
||||
name,
|
||||
fixedWechatIds,
|
||||
groupingOption,
|
||||
fixedGroupCount,
|
||||
})
|
||||
}, 300)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}, [name, fixedWechatIds, groupingOption, fixedGroupCount, onValuesChange])
|
||||
|
||||
const fetchFriends = async () => {
|
||||
setLoading(true)
|
||||
// 模拟从API获取好友列表
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
const mockFriends = Array.from({ length: 20 }, (_, i) => ({
|
||||
id: `friend-${i}`,
|
||||
nickname: `好友${i + 1}`,
|
||||
wechatId: `wxid_${Math.random().toString(36).substring(2, 8)}`,
|
||||
avatar: `/placeholder.svg?height=40&width=40&text=${i + 1}`,
|
||||
tags: i % 3 === 0 ? ["重要客户"] : i % 3 === 1 ? ["潜在客户", "已沟通"] : ["新客户"],
|
||||
}))
|
||||
setFriends(mockFriends)
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const validateSettings = () => {
|
||||
setError(null)
|
||||
setWarning(null)
|
||||
|
||||
if (!name.trim()) {
|
||||
setError("计划名称不能为空")
|
||||
return false
|
||||
}
|
||||
|
||||
if (fixedWechatIds.length === 0) {
|
||||
setError("请至少添加一个固定微信号")
|
||||
return false
|
||||
}
|
||||
|
||||
if (groupingOption === "fixed") {
|
||||
if (fixedGroupCount <= 0) {
|
||||
setError("群组数必须大于0")
|
||||
return false
|
||||
}
|
||||
|
||||
if (fixedGroupCount > RECOMMENDED_MAX_GROUPS) {
|
||||
setWarning(`创建${fixedGroupCount}个群可能会消耗较多资源，建议减少群组数量`)
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
if (validateSettings()) {
|
||||
onNext()
|
||||
}
|
||||
}
|
||||
|
||||
const adjustGroupCount = (delta: number) => {
|
||||
setFixedGroupCount((prev) => {
|
||||
const newValue = Math.max(1, prev + delta)
|
||||
return newValue
|
||||
})
|
||||
}
|
||||
|
||||
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setName(e.target.value)
|
||||
}
|
||||
|
||||
const handleNewWechatIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setNewWechatId(e.target.value)
|
||||
}
|
||||
|
||||
const handleGroupCountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = Number.parseInt(e.target.value) || 0
|
||||
setFixedGroupCount(value)
|
||||
}
|
||||
|
||||
const handleGroupingOptionChange = (value: string) => {
|
||||
setGroupingOption(value as "all" | "fixed")
|
||||
}
|
||||
|
||||
const addWechatId = () => {
|
||||
if (!newWechatId.trim()) return
|
||||
|
||||
if (fixedWechatIds.includes(newWechatId.trim())) {
|
||||
setError("该微信号已添加")
|
||||
return
|
||||
}
|
||||
|
||||
if (fixedWechatIds.length >= MAX_WECHAT_IDS) {
|
||||
setError(`最多只能添加${MAX_WECHAT_IDS}个微信号`)
|
||||
return
|
||||
}
|
||||
|
||||
setFixedWechatIds((prev) => [...prev, newWechatId.trim()])
|
||||
setNewWechatId("")
|
||||
setError(null)
|
||||
}
|
||||
|
||||
const removeWechatId = (id: string) => {
|
||||
setFixedWechatIds((prev) => prev.filter((wid) => wid !== id))
|
||||
}
|
||||
|
||||
const openFriendSelector = () => {
|
||||
if (fixedWechatIds.length >= MAX_WECHAT_IDS) {
|
||||
setError(`最多只能添加${MAX_WECHAT_IDS}个微信号`)
|
||||
return
|
||||
}
|
||||
setFriendSelectorOpen(true)
|
||||
}
|
||||
|
||||
const handleFriendSelection = () => {
|
||||
const newIds = selectedFriends.map((f) => f.wechatId).filter((id) => !fixedWechatIds.includes(id))
|
||||
|
||||
const combinedIds = [...fixedWechatIds, ...newIds]
|
||||
|
||||
if (combinedIds.length > MAX_WECHAT_IDS) {
|
||||
setError(`最多只能添加${MAX_WECHAT_IDS}个微信号，已自动截取前${MAX_WECHAT_IDS}个`)
|
||||
setFixedWechatIds(combinedIds.slice(0, MAX_WECHAT_IDS))
|
||||
} else {
|
||||
setFixedWechatIds(combinedIds)
|
||||
}
|
||||
|
||||
setFriendSelectorOpen(false)
|
||||
setSelectedFriends([])
|
||||
}
|
||||
|
||||
const toggleFriendSelection = (friend: WechatFriend) => {
|
||||
setSelectedFriends((prev) => {
|
||||
const isSelected = prev.some((f) => f.id === friend.id)
|
||||
if (isSelected) {
|
||||
return prev.filter((f) => f.id !== friend.id)
|
||||
} else {
|
||||
return [...prev, friend]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const filteredFriends = friends.filter(
|
||||
(friend) =>
|
||||
friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
)
|
||||
|
||||
// 计算总人数
|
||||
const totalMembers = groupingOption === "fixed" ? fixedGroupCount * GROUP_SIZE : "根据好友总数自动计算"
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name" className="text-base font-medium">
|
||||
计划名称<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input id="name" value={name} onChange={handleNameChange} placeholder="请输入计划名称" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-base font-medium flex items-center">
|
||||
固定微信号<span className="text-red-500">*</span>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-4 w-4 ml-1 inline text-gray-400" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>这些微信号将被添加到每个群中</p>
|
||||
<p>如不在好友列表中，系统将先添加为好友</p>
|
||||
<p>最多可添加5个微信号</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</Label>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<div className="relative flex-1">
|
||||
<User className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
value={newWechatId}
|
||||
onChange={handleNewWechatIdChange}
|
||||
placeholder="请输入微信号"
|
||||
className="pl-9"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault()
|
||||
addWechatId()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
onClick={addWechatId}
|
||||
disabled={!newWechatId.trim() || fixedWechatIds.length >= MAX_WECHAT_IDS}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
onClick={openFriendSelector}
|
||||
disabled={fixedWechatIds.length >= MAX_WECHAT_IDS}
|
||||
>
|
||||
选择好友
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{fixedWechatIds.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
{fixedWechatIds.map((id) => (
|
||||
<Badge key={id} variant="secondary" className="px-3 py-1">
|
||||
{id}
|
||||
<button
|
||||
type="button"
|
||||
className="ml-2 text-gray-500 hover:text-gray-700"
|
||||
onClick={() => removeWechatId(id)}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
已添加 {fixedWechatIds.length}/{MAX_WECHAT_IDS} 个微信号
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 pt-2">
|
||||
<Label className="text-base font-medium">分组方式</Label>
|
||||
<RadioGroup value={groupingOption} onValueChange={handleGroupingOptionChange}>
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="flex items-start space-x-2">
|
||||
<RadioGroupItem value="all" id="all" className="mt-1" />
|
||||
<div>
|
||||
<Label htmlFor="all" className="font-medium">
|
||||
所有好友自动分组
|
||||
</Label>
|
||||
<p className="text-sm text-gray-500">系统将根据好友总数自动计算需要创建的群数量</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start space-x-2">
|
||||
<RadioGroupItem value="fixed" id="fixed" className="mt-1" />
|
||||
<div className="flex-1">
|
||||
<Label htmlFor="fixed" className="font-medium">
|
||||
指定群数量
|
||||
</Label>
|
||||
<p className="text-sm text-gray-500 mb-2">手动指定需要创建的群数量</p>
|
||||
|
||||
{groupingOption === "fixed" && (
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
<Label htmlFor="groupCount" className="whitespace-nowrap">
|
||||
计划创建群组数:
|
||||
</Label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => adjustGroupCount(-1)}
|
||||
disabled={fixedGroupCount <= 1}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<Input
|
||||
id="groupCount"
|
||||
type="number"
|
||||
value={fixedGroupCount}
|
||||
onChange={handleGroupCountChange}
|
||||
className="w-20 text-center"
|
||||
min={1}
|
||||
/>
|
||||
<Button type="button" variant="outline" size="icon" onClick={() => adjustGroupCount(1)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-gray-500">组</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-blue-50 rounded-md">
|
||||
<div className="flex items-center mb-2">
|
||||
<Users className="h-5 w-5 mr-2 text-blue-700" />
|
||||
<span className="text-blue-700 font-medium">群配置信息</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-blue-700">每个群人数:</span>
|
||||
<span className="text-blue-700 font-bold">{GROUP_SIZE} 人</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-1">
|
||||
<span className="text-blue-700">预计总人数:</span>
|
||||
<span className="text-blue-700 font-bold">{totalMembers}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{warning && (
|
||||
<Alert variant="warning" className="bg-yellow-50 border-yellow-200 text-yellow-800">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{warning}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
onClick={handleNext}
|
||||
className="bg-blue-500 hover:bg-blue-600"
|
||||
disabled={fixedWechatIds.length === 0 || !!error}
|
||||
>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Dialog open={friendSelectorOpen} onOpenChange={setFriendSelectorOpen}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>选择微信好友</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="relative">
|
||||
<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>
|
||||
<ScrollArea className="mt-4 h-[400px]">
|
||||
<div className="space-y-2">
|
||||
{loading ? (
|
||||
<div className="text-center py-4">加载中...</div>
|
||||
) : filteredFriends.length === 0 ? (
|
||||
<div className="text-center py-4">未找到匹配的好友</div>
|
||||
) : (
|
||||
filteredFriends.map((friend) => (
|
||||
<div
|
||||
key={friend.id}
|
||||
className="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer"
|
||||
onClick={() => toggleFriendSelection(friend)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={selectedFriends.some((f) => f.id === friend.id)}
|
||||
onCheckedChange={() => toggleFriendSelection(friend)}
|
||||
/>
|
||||
<Avatar>
|
||||
<AvatarImage src={friend.avatar} />
|
||||
<AvatarFallback>{friend.nickname[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{friend.nickname}</div>
|
||||
<div className="text-sm text-gray-500">{friend.wechatId}</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{friend.tags.map((tag) => (
|
||||
<Badge key={tag} variant="outline" className="text-xs">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
<div className="flex justify-end space-x-2 mt-4">
|
||||
<Button variant="outline" onClick={() => setFriendSelectorOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleFriendSelection} disabled={selectedFriends.length === 0}>
|
||||
确定 ({selectedFriends.length})
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
285
Cunkebao/app/workspace/auto-group/components/new-plan-form.tsx
Normal file
285
Cunkebao/app/workspace/auto-group/components/new-plan-form.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Plus, X } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface NewPlanFormProps {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function NewPlanForm({ onClose }: NewPlanFormProps) {
|
||||
const [step, setStep] = useState(1)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
customerType: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
groupSize: 38,
|
||||
welcomeMessage: "欢迎进群",
|
||||
specificWechatIds: [] as string[],
|
||||
keywords: [] as string[],
|
||||
tags: [] as string[],
|
||||
deviceId: "",
|
||||
operatorId: "",
|
||||
})
|
||||
|
||||
const [tempInput, setTempInput] = useState({
|
||||
wechatId: "",
|
||||
keyword: "",
|
||||
tag: "",
|
||||
})
|
||||
|
||||
const handleAddWechatId = () => {
|
||||
if (tempInput.wechatId && !formData.specificWechatIds.includes(tempInput.wechatId)) {
|
||||
setFormData({
|
||||
...formData,
|
||||
specificWechatIds: [...formData.specificWechatIds, tempInput.wechatId],
|
||||
})
|
||||
setTempInput({ ...tempInput, wechatId: "" })
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddKeyword = () => {
|
||||
if (tempInput.keyword && !formData.keywords.includes(tempInput.keyword)) {
|
||||
setFormData({
|
||||
...formData,
|
||||
keywords: [...formData.keywords, tempInput.keyword],
|
||||
})
|
||||
setTempInput({ ...tempInput, keyword: "" })
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddTag = () => {
|
||||
if (tempInput.tag && !formData.tags.includes(tempInput.tag)) {
|
||||
setFormData({
|
||||
...formData,
|
||||
tags: [...formData.tags, tempInput.tag],
|
||||
})
|
||||
setTempInput({ ...tempInput, tag: "" })
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
try {
|
||||
// TODO: 实现提交逻辑
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
onClose()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>新建自动拉群计划</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{step === 1 && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name" className="text-base">
|
||||
计划名称<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="请输入计划名称"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="customerType" className="text-base">
|
||||
建群客户类型
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.customerType}
|
||||
onValueChange={(value) => setFormData({ ...formData, customerType: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择客户类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="high_value">高价值客户</SelectItem>
|
||||
<SelectItem value="regular">普通客户</SelectItem>
|
||||
<SelectItem value="potential">潜在客户</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="startDate" className="text-base">
|
||||
开始日期
|
||||
</Label>
|
||||
<Input
|
||||
id="startDate"
|
||||
type="date"
|
||||
value={formData.startDate}
|
||||
onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="endDate" className="text-base">
|
||||
结束日期
|
||||
</Label>
|
||||
<Input
|
||||
id="endDate"
|
||||
type="date"
|
||||
value={formData.endDate}
|
||||
onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-base">群人数设置</Label>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setFormData({ ...formData, groupSize: Math.max(1, formData.groupSize - 1) })}
|
||||
>
|
||||
-
|
||||
</Button>
|
||||
<span className="w-12 text-center">{formData.groupSize}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setFormData({ ...formData, groupSize: formData.groupSize + 1 })}
|
||||
>
|
||||
+
|
||||
</Button>
|
||||
<span>人/群</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="welcomeMessage" className="text-base">
|
||||
入群欢迎语
|
||||
</Label>
|
||||
<Textarea
|
||||
id="welcomeMessage"
|
||||
value={formData.welcomeMessage}
|
||||
onChange={(e) => setFormData({ ...formData, welcomeMessage: e.target.value })}
|
||||
placeholder="请输入欢迎语"
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-base">指定微信号</Label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Input
|
||||
value={tempInput.wechatId}
|
||||
onChange={(e) => setTempInput({ ...tempInput, wechatId: e.target.value })}
|
||||
placeholder="输入微信号"
|
||||
/>
|
||||
<Button type="button" variant="outline" size="icon" onClick={handleAddWechatId}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{formData.specificWechatIds.map((id) => (
|
||||
<Badge key={id} variant="secondary" className="flex items-center gap-1">
|
||||
{id}
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer"
|
||||
onClick={() =>
|
||||
setFormData({
|
||||
...formData,
|
||||
specificWechatIds: formData.specificWechatIds.filter((i) => i !== id),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-base">关键词筛选</Label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Input
|
||||
value={tempInput.keyword}
|
||||
onChange={(e) => setTempInput({ ...tempInput, keyword: e.target.value })}
|
||||
placeholder="输入关键词"
|
||||
/>
|
||||
<Button type="button" variant="outline" size="icon" onClick={handleAddKeyword}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{formData.keywords.map((keyword) => (
|
||||
<Badge key={keyword} variant="secondary" className="flex items-center gap-1">
|
||||
{keyword}
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer"
|
||||
onClick={() =>
|
||||
setFormData({
|
||||
...formData,
|
||||
keywords: formData.keywords.filter((k) => k !== keyword),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between pt-4">
|
||||
{step > 1 && (
|
||||
<Button type="button" variant="outline" onClick={() => setStep(step - 1)}>
|
||||
上一步
|
||||
</Button>
|
||||
)}
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
{step < 2 ? (
|
||||
<Button type="button" onClick={() => setStep(step + 1)} className="bg-blue-500 hover:bg-blue-600">
|
||||
下一步
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className={cn("bg-blue-500 hover:bg-blue-600", loading && "opacity-50 cursor-not-allowed")}
|
||||
>
|
||||
{loading ? "创建中..." : "确定"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
"use client"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface StepIndicatorProps {
|
||||
currentStep: number
|
||||
steps: { title: string; description: string }[]
|
||||
onStepClick?: (step: number) => void
|
||||
}
|
||||
|
||||
export function StepIndicator({ currentStep, steps, onStepClick }: StepIndicatorProps) {
|
||||
return (
|
||||
<div className="w-full mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
{steps.map((step, index) => (
|
||||
<div key={index} className="flex flex-col items-center relative w-full">
|
||||
{/* 连接线 */}
|
||||
{index > 0 && (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute h-[2px] w-full top-4 -left-1/2 z-0",
|
||||
index <= currentStep ? "bg-blue-500" : "bg-gray-200",
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 步骤圆点 */}
|
||||
<button
|
||||
onClick={() => index < currentStep && onStepClick?.(index)}
|
||||
disabled={index > currentStep}
|
||||
className={cn(
|
||||
"w-8 h-8 rounded-full flex items-center justify-center z-10 mb-2 transition-all",
|
||||
index < currentStep
|
||||
? "bg-blue-500 text-white cursor-pointer hover:bg-blue-600"
|
||||
: index === currentStep
|
||||
? "bg-blue-500 text-white"
|
||||
: "bg-gray-200 text-gray-500 cursor-not-allowed",
|
||||
)}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
|
||||
{/* 步骤标题 */}
|
||||
<div className="text-sm font-medium">{step.title}</div>
|
||||
<div className="text-xs text-gray-500">{step.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
409
Cunkebao/app/workspace/auto-group/components/tag-selection.tsx
Normal file
409
Cunkebao/app/workspace/auto-group/components/tag-selection.tsx
Normal file
@@ -0,0 +1,409 @@
|
||||
"use client"
|
||||
|
||||
import { AlertDescription } from "@/components/ui/alert"
|
||||
|
||||
import { Alert } from "@/components/ui/alert"
|
||||
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Search, TagIcon, Users, Filter, AlertCircle, UserMinus } from "lucide-react"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
|
||||
// 模拟人群标签数据
|
||||
const mockAudienceTags = [
|
||||
{ id: "tag-1", name: "高价值客户", description: "消费能力强的客户", count: 120 },
|
||||
{ id: "tag-2", name: "潜在客户", description: "有购买意向但未成交", count: 350 },
|
||||
{ id: "tag-3", name: "教师", description: "教育行业从业者", count: 85 },
|
||||
{ id: "tag-4", name: "医生", description: "医疗行业从业者", count: 64 },
|
||||
{ id: "tag-5", name: "企业白领", description: "企业中高层管理人员", count: 210 },
|
||||
{ id: "tag-6", name: "摄影爱好者", description: "对摄影有浓厚兴趣", count: 175 },
|
||||
{ id: "tag-7", name: "运动达人", description: "经常参与体育运动", count: 230 },
|
||||
{ id: "tag-8", name: "美食爱好者", description: "对美食有特别偏好", count: 320 },
|
||||
{ id: "tag-9", name: "20-30岁", description: "年龄在20-30岁之间", count: 450 },
|
||||
{ id: "tag-10", name: "30-40岁", description: "年龄在30-40岁之间", count: 380 },
|
||||
{ id: "tag-11", name: "高消费", description: "消费水平较高", count: 150 },
|
||||
{ id: "tag-12", name: "中等消费", description: "消费水平中等", count: 420 },
|
||||
]
|
||||
|
||||
// 模拟流量词数据
|
||||
const mockTrafficTags = [
|
||||
{ id: "traffic-1", name: "健身器材", description: "对健身器材有兴趣", count: 95 },
|
||||
{ id: "traffic-2", name: "减肥产品", description: "对减肥产品有需求", count: 130 },
|
||||
{ id: "traffic-3", name: "护肤品", description: "对护肤品有兴趣", count: 210 },
|
||||
{ id: "traffic-4", name: "旅游度假", description: "有旅游度假需求", count: 180 },
|
||||
{ id: "traffic-5", name: "教育培训", description: "对教育培训有需求", count: 160 },
|
||||
{ id: "traffic-6", name: "投资理财", description: "对投资理财有兴趣", count: 110 },
|
||||
{ id: "traffic-7", name: "房产购买", description: "有购房需求", count: 75 },
|
||||
{ id: "traffic-8", name: "汽车购买", description: "有购车需求", count: 90 },
|
||||
]
|
||||
|
||||
// 模拟排除标签数据
|
||||
const mockExcludeTags = [
|
||||
{ id: "exclude-1", name: "已拉群", description: "已被拉入群聊的用户", count: 320 },
|
||||
{ id: "exclude-2", name: "黑名单", description: "被标记为黑名单的用户", count: 45 },
|
||||
{ id: "exclude-3", name: "已转化", description: "已完成转化的用户", count: 180 },
|
||||
]
|
||||
|
||||
interface TagSelectionProps {
|
||||
onPrevious: () => void
|
||||
onComplete: () => void
|
||||
initialValues?: {
|
||||
audienceTags: string[]
|
||||
trafficTags: string[]
|
||||
matchLogic: "and" | "or"
|
||||
excludeTags: string[]
|
||||
}
|
||||
onValuesChange: (values: {
|
||||
audienceTags: string[]
|
||||
trafficTags: string[]
|
||||
matchLogic: "and" | "or"
|
||||
excludeTags: string[]
|
||||
}) => void
|
||||
}
|
||||
|
||||
export function TagSelection({ onPrevious, onComplete, initialValues, onValuesChange }: TagSelectionProps) {
|
||||
const [audienceTags, setAudienceTags] = useState<string[]>(initialValues?.audienceTags || [])
|
||||
const [trafficTags, setTrafficTags] = useState<string[]>(initialValues?.trafficTags || [])
|
||||
const [matchLogic, setMatchLogic] = useState<"and" | "or">(initialValues?.matchLogic || "or")
|
||||
const [excludeTags, setExcludeTags] = useState<string[]>(initialValues?.excludeTags || ["exclude-1"])
|
||||
const [audienceSearchQuery, setAudienceSearchQuery] = useState("")
|
||||
const [trafficSearchQuery, setTrafficSearchQuery] = useState("")
|
||||
const [excludeSearchQuery, setExcludeSearchQuery] = useState("")
|
||||
const [autoTagEnabled, setAutoTagEnabled] = useState(true)
|
||||
|
||||
// 使用ref来跟踪是否已经通知了父组件初始选择
|
||||
const initialNotificationRef = useRef(false)
|
||||
// 使用ref来存储上一次的值，避免不必要的更新
|
||||
const prevValuesRef = useRef({ audienceTags, trafficTags, matchLogic, excludeTags })
|
||||
|
||||
// 只在值变化时通知父组件，使用防抖
|
||||
useEffect(() => {
|
||||
if (!initialNotificationRef.current) {
|
||||
initialNotificationRef.current = true
|
||||
return
|
||||
}
|
||||
|
||||
// 检查值是否真的变化了
|
||||
const prevValues = prevValuesRef.current
|
||||
const valuesChanged =
|
||||
prevValues.audienceTags.length !== audienceTags.length ||
|
||||
prevValues.trafficTags.length !== trafficTags.length ||
|
||||
prevValues.matchLogic !== matchLogic ||
|
||||
prevValues.excludeTags.length !== excludeTags.length
|
||||
|
||||
if (!valuesChanged) return
|
||||
|
||||
// 更新ref中存储的上一次值
|
||||
prevValuesRef.current = { audienceTags, trafficTags, matchLogic, excludeTags }
|
||||
|
||||
// 使用防抖延迟通知父组件
|
||||
const timer = setTimeout(() => {
|
||||
onValuesChange({ audienceTags, trafficTags, matchLogic, excludeTags })
|
||||
}, 300)
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}, [audienceTags, trafficTags, matchLogic, excludeTags, onValuesChange])
|
||||
|
||||
const filteredAudienceTags = mockAudienceTags.filter(
|
||||
(tag) =>
|
||||
tag.name.toLowerCase().includes(audienceSearchQuery.toLowerCase()) ||
|
||||
tag.description.toLowerCase().includes(audienceSearchQuery.toLowerCase()),
|
||||
)
|
||||
|
||||
const filteredTrafficTags = mockTrafficTags.filter(
|
||||
(tag) =>
|
||||
tag.name.toLowerCase().includes(trafficSearchQuery.toLowerCase()) ||
|
||||
tag.description.toLowerCase().includes(trafficSearchQuery.toLowerCase()),
|
||||
)
|
||||
|
||||
const filteredExcludeTags = mockExcludeTags.filter(
|
||||
(tag) =>
|
||||
tag.name.toLowerCase().includes(excludeSearchQuery.toLowerCase()) ||
|
||||
tag.description.toLowerCase().includes(excludeSearchQuery.toLowerCase()),
|
||||
)
|
||||
|
||||
const handleAudienceTagToggle = (tagId: string) => {
|
||||
setAudienceTags((prev) => (prev.includes(tagId) ? prev.filter((id) => id !== tagId) : [...prev, tagId]))
|
||||
}
|
||||
|
||||
const handleTrafficTagToggle = (tagId: string) => {
|
||||
setTrafficTags((prev) => (prev.includes(tagId) ? prev.filter((id) => id !== tagId) : [...prev, tagId]))
|
||||
}
|
||||
|
||||
const handleExcludeTagToggle = (tagId: string) => {
|
||||
setExcludeTags((prev) => (prev.includes(tagId) ? prev.filter((id) => id !== tagId) : [...prev, tagId]))
|
||||
}
|
||||
|
||||
// 计算匹配的预估人数
|
||||
const calculateEstimatedMatches = () => {
|
||||
if (audienceTags.length === 0 && trafficTags.length === 0) return 0
|
||||
|
||||
const selectedAudienceTags = mockAudienceTags.filter((tag) => audienceTags.includes(tag.id))
|
||||
const selectedTrafficTags = mockTrafficTags.filter((tag) => trafficTags.includes(tag.id))
|
||||
const selectedExcludeTags = mockExcludeTags.filter((tag) => excludeTags.includes(tag.id))
|
||||
|
||||
let estimatedTotal = 0
|
||||
|
||||
if (audienceTags.length === 0) {
|
||||
estimatedTotal = selectedTrafficTags.reduce((sum, tag) => sum + tag.count, 0)
|
||||
} else if (trafficTags.length === 0) {
|
||||
estimatedTotal = selectedAudienceTags.reduce((sum, tag) => sum + tag.count, 0)
|
||||
} else {
|
||||
// 如果两种标签都有选择，根据匹配逻辑计算
|
||||
if (matchLogic === "and") {
|
||||
// 取交集，估算为较小集合的70%
|
||||
const minCount = Math.min(
|
||||
selectedAudienceTags.reduce((sum, tag) => sum + tag.count, 0),
|
||||
selectedTrafficTags.reduce((sum, tag) => sum + tag.count, 0),
|
||||
)
|
||||
estimatedTotal = Math.floor(minCount * 0.7)
|
||||
} else {
|
||||
// 取并集，估算为两者之和的80%（考虑重叠）
|
||||
const totalCount =
|
||||
selectedAudienceTags.reduce((sum, tag) => sum + tag.count, 0) +
|
||||
selectedTrafficTags.reduce((sum, tag) => sum + tag.count, 0)
|
||||
estimatedTotal = Math.floor(totalCount * 0.8)
|
||||
}
|
||||
}
|
||||
|
||||
// 减去排除标签的人数
|
||||
const excludeCount = selectedExcludeTags.reduce((sum, tag) => sum + tag.count, 0)
|
||||
return Math.max(0, estimatedTotal - excludeCount)
|
||||
}
|
||||
|
||||
const estimatedMatches = calculateEstimatedMatches()
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-6">
|
||||
<Tabs defaultValue="include" className="w-full">
|
||||
<TabsList className="grid w-full max-w-md grid-cols-2">
|
||||
<TabsTrigger value="include">包含条件</TabsTrigger>
|
||||
<TabsTrigger value="exclude">排除条件</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="include" className="space-y-6 mt-4">
|
||||
<div className="space-y-4">
|
||||
<Label className="text-base font-medium flex items-center">
|
||||
<TagIcon className="h-4 w-4 mr-2" />
|
||||
人群标签选择
|
||||
</Label>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="搜索人群标签"
|
||||
value={audienceSearchQuery}
|
||||
onChange={(e) => setAudienceSearchQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="h-[200px] rounded-md border">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2 p-3">
|
||||
{filteredAudienceTags.map((tag) => (
|
||||
<div
|
||||
key={tag.id}
|
||||
className={`border rounded-md p-2 cursor-pointer hover:bg-gray-50 ${
|
||||
audienceTags.includes(tag.id) ? "border-blue-500 bg-blue-50" : ""
|
||||
}`}
|
||||
onClick={() => handleAudienceTagToggle(tag.id)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="font-medium">{tag.name}</div>
|
||||
<Checkbox
|
||||
checked={audienceTags.includes(tag.id)}
|
||||
onCheckedChange={() => handleAudienceTagToggle(tag.id)}
|
||||
className="pointer-events-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{tag.description}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
<Users className="h-3 w-3 inline mr-1" />
|
||||
{tag.count}人
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{filteredAudienceTags.length === 0 && (
|
||||
<div className="col-span-full p-4 text-center text-gray-500">没有找到符合条件的人群标签</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label className="text-base font-medium flex items-center">
|
||||
<Filter className="h-4 w-4 mr-2" />
|
||||
流量词选择
|
||||
</Label>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="搜索流量词"
|
||||
value={trafficSearchQuery}
|
||||
onChange={(e) => setTrafficSearchQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="h-[200px] rounded-md border">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2 p-3">
|
||||
{filteredTrafficTags.map((tag) => (
|
||||
<div
|
||||
key={tag.id}
|
||||
className={`border rounded-md p-2 cursor-pointer hover:bg-gray-50 ${
|
||||
trafficTags.includes(tag.id) ? "border-blue-500 bg-blue-50" : ""
|
||||
}`}
|
||||
onClick={() => handleTrafficTagToggle(tag.id)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="font-medium">{tag.name}</div>
|
||||
<Checkbox
|
||||
checked={trafficTags.includes(tag.id)}
|
||||
onCheckedChange={() => handleTrafficTagToggle(tag.id)}
|
||||
className="pointer-events-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{tag.description}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
<Users className="h-3 w-3 inline mr-1" />
|
||||
{tag.count}人
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{filteredTrafficTags.length === 0 && (
|
||||
<div className="col-span-full p-4 text-center text-gray-500">没有找到符合条件的流量词</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-base font-medium">标签匹配逻辑</Label>
|
||||
<RadioGroup value={matchLogic} onValueChange={(value) => setMatchLogic(value as "and" | "or")}>
|
||||
<div className="flex space-x-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="and" id="and" />
|
||||
<Label htmlFor="and">同时满足所有标签（AND）</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="or" id="or" />
|
||||
<Label htmlFor="or">满足任一标签即可（OR）</Label>
|
||||
</div>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="exclude" className="space-y-6 mt-4">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-base font-medium flex items-center">
|
||||
<UserMinus className="h-4 w-4 mr-2" />
|
||||
排除标签
|
||||
</Label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="auto-tag" checked={autoTagEnabled} onCheckedChange={setAutoTagEnabled} />
|
||||
<Label htmlFor="auto-tag" className="text-sm">
|
||||
自动为拉群成员添加标签
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="搜索排除标签"
|
||||
value={excludeSearchQuery}
|
||||
onChange={(e) => setExcludeSearchQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="h-[200px] rounded-md border">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2 p-3">
|
||||
{filteredExcludeTags.map((tag) => (
|
||||
<div
|
||||
key={tag.id}
|
||||
className={`border rounded-md p-2 cursor-pointer hover:bg-gray-50 ${
|
||||
excludeTags.includes(tag.id) ? "border-red-500 bg-red-50" : ""
|
||||
}`}
|
||||
onClick={() => handleExcludeTagToggle(tag.id)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="font-medium">{tag.name}</div>
|
||||
<Checkbox
|
||||
checked={excludeTags.includes(tag.id)}
|
||||
onCheckedChange={() => handleExcludeTagToggle(tag.id)}
|
||||
className="pointer-events-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{tag.description}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
<Users className="h-3 w-3 inline mr-1" />
|
||||
{tag.count}人
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{filteredExcludeTags.length === 0 && (
|
||||
<div className="col-span-full p-4 text-center text-gray-500">没有找到符合条件的排除标签</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<Alert className="bg-yellow-50 border-yellow-200 text-yellow-800">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
启用自动标记后，系统将为所有被拉入群的用户添加"已拉群"标签，避免重复拉人
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="p-4 bg-blue-50 rounded-md">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-blue-700 font-medium">预估匹配人数:</span>
|
||||
<span className="text-blue-700 font-bold">{estimatedMatches} 人</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{audienceTags.length === 0 && trafficTags.length === 0 && (
|
||||
<div className="flex items-center p-3 bg-yellow-50 rounded-md text-yellow-800">
|
||||
<AlertCircle className="h-4 w-4 mr-2" />
|
||||
请至少选择一个人群标签或流量词
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<Button variant="outline" onClick={onPrevious}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onComplete}
|
||||
className="bg-blue-500 hover:bg-blue-600"
|
||||
disabled={audienceTags.length === 0 && trafficTags.length === 0}
|
||||
>
|
||||
完成
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Search, Plus } from "lucide-react"
|
||||
import { Table } from "@/components/ui/table"
|
||||
|
||||
interface WechatAccountSelectorProps {
|
||||
selectedAccounts: string[]
|
||||
onChange: (accounts: string[]) => void
|
||||
}
|
||||
|
||||
export function WechatAccountSelector({ selectedAccounts, onChange }: WechatAccountSelectorProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="mt-1.5 space-x-2">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
选择客户
|
||||
</Button>
|
||||
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
外部账号
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-4xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>选择微信账号</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input placeholder="请输入关键字筛选" className="pl-9" />
|
||||
</div>
|
||||
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>微信号</th>
|
||||
<th>在线状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan={4} className="text-center py-4 text-gray-500">
|
||||
暂无数据
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<div className="flex justify-end space-x-4">
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={() => setOpen(false)} className="bg-blue-600 hover:bg-blue-700">
|
||||
确定
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user