296 lines
9.2 KiB
TypeScript
Executable File
296 lines
9.2 KiB
TypeScript
Executable File
"use client"
|
||
|
||
import { useState, useCallback } from "react"
|
||
import { Button } from "@/components/ui/button"
|
||
import { PlusCircle, ArrowLeft } from "lucide-react"
|
||
import { StepIndicator } from "./components/step-indicator"
|
||
import { GroupSettings } from "./components/group-settings"
|
||
import { DeviceSelection } from "./components/device-selection"
|
||
import { TagSelection } from "./components/tag-selection"
|
||
import { useToast } from "@/components/ui/use-toast"
|
||
|
||
// 保留原有的卡片列表视图
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Users, Settings, RefreshCcw } from "lucide-react"
|
||
|
||
interface Plan {
|
||
id: string
|
||
name: string
|
||
groupCount: number
|
||
groupSize: number
|
||
totalFriends: number
|
||
tags: string[]
|
||
status: "running" | "stopped" | "completed"
|
||
lastUpdated: string
|
||
}
|
||
|
||
const mockPlans: Plan[] = [
|
||
{
|
||
id: "1",
|
||
name: "品牌推广群",
|
||
groupCount: 6,
|
||
groupSize: 38,
|
||
totalFriends: 228,
|
||
tags: ["品牌", "推广"],
|
||
status: "running",
|
||
lastUpdated: "2024-02-24 10:30",
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "客户服务群",
|
||
groupCount: 4,
|
||
groupSize: 38,
|
||
totalFriends: 152,
|
||
tags: ["客服", "售后"],
|
||
status: "stopped",
|
||
lastUpdated: "2024-02-23 15:45",
|
||
},
|
||
]
|
||
|
||
const steps = [
|
||
{ title: "群配置", description: "设置群人数与组数" },
|
||
{ title: "设备选择", description: "选择执行设备" },
|
||
{ title: "人群标签", description: "选择目标人群" },
|
||
]
|
||
|
||
export default function AutoGroupPage() {
|
||
const [isCreating, setIsCreating] = useState(false)
|
||
const [currentStep, setCurrentStep] = useState(0)
|
||
const { toast } = useToast()
|
||
|
||
const [formData, setFormData] = useState({
|
||
name: "新建群计划",
|
||
fixedWechatIds: [] as string[],
|
||
groupingOption: "all" as "all" | "fixed",
|
||
fixedGroupCount: 5,
|
||
selectedDevices: [] as string[],
|
||
audienceTags: [] as string[],
|
||
trafficTags: [] as string[],
|
||
matchLogic: "or" as "and" | "or",
|
||
excludeTags: ["已拉群"] as string[],
|
||
})
|
||
|
||
const handleStepClick = useCallback((step: number) => {
|
||
setCurrentStep(step)
|
||
}, [])
|
||
|
||
const handleNext = useCallback(() => {
|
||
setCurrentStep((prev) => prev + 1)
|
||
}, [])
|
||
|
||
const handlePrevious = useCallback(() => {
|
||
setCurrentStep((prev) => prev - 1)
|
||
}, [])
|
||
|
||
const handleComplete = useCallback(() => {
|
||
// 这里可以添加表单提交逻辑
|
||
console.log("Form submitted:", formData)
|
||
toast({
|
||
title: "计划创建成功",
|
||
description: `已成功创建"${formData.name}"计划`,
|
||
})
|
||
setIsCreating(false)
|
||
setCurrentStep(0)
|
||
// 重置表单数据
|
||
setFormData({
|
||
name: "新建群计划",
|
||
fixedWechatIds: [],
|
||
groupingOption: "all",
|
||
fixedGroupCount: 5,
|
||
selectedDevices: [],
|
||
audienceTags: [],
|
||
trafficTags: [],
|
||
matchLogic: "or",
|
||
excludeTags: ["已拉群"],
|
||
})
|
||
}, [formData, toast])
|
||
|
||
const handleCancel = useCallback(() => {
|
||
setIsCreating(false)
|
||
setCurrentStep(0)
|
||
}, [])
|
||
|
||
// 使用useCallback包装回调函数，避免不必要的重新创建
|
||
const handleGroupSettingsChange = useCallback(
|
||
(values: {
|
||
name: string
|
||
fixedWechatIds: string[]
|
||
groupingOption: "all" | "fixed"
|
||
fixedGroupCount: number
|
||
}) => {
|
||
setFormData((prev) => ({ ...prev, ...values }))
|
||
},
|
||
[],
|
||
)
|
||
|
||
const handleDevicesChange = useCallback((devices: string[]) => {
|
||
setFormData((prev) => ({ ...prev, selectedDevices: devices }))
|
||
}, [])
|
||
|
||
const handleTagsChange = useCallback(
|
||
(values: {
|
||
audienceTags: string[]
|
||
trafficTags: string[]
|
||
matchLogic: "and" | "or"
|
||
excludeTags: string[]
|
||
}) => {
|
||
setFormData((prev) => ({ ...prev, ...values }))
|
||
},
|
||
[],
|
||
)
|
||
|
||
const getStatusColor = (status: Plan["status"]) => {
|
||
switch (status) {
|
||
case "running":
|
||
return "bg-green-500/10 text-green-500"
|
||
case "stopped":
|
||
return "bg-red-500/10 text-red-500"
|
||
case "completed":
|
||
return "bg-blue-500/10 text-blue-500"
|
||
default:
|
||
return "bg-gray-500/10 text-gray-500"
|
||
}
|
||
}
|
||
|
||
const getStatusText = (status: Plan["status"]) => {
|
||
switch (status) {
|
||
case "running":
|
||
return "运行中"
|
||
case "stopped":
|
||
return "已停止"
|
||
case "completed":
|
||
return "已完成"
|
||
default:
|
||
return status
|
||
}
|
||
}
|
||
|
||
if (isCreating) {
|
||
return (
|
||
<div className="container p-4 mx-auto max-w-7xl">
|
||
<div className="flex items-center mb-6">
|
||
<Button variant="ghost" size="sm" onClick={handleCancel} className="mr-2">
|
||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||
返回
|
||
</Button>
|
||
<h1 className="text-xl font-semibold">新建自动拉群计划</h1>
|
||
</div>
|
||
|
||
<div className="mb-8">
|
||
<StepIndicator currentStep={currentStep} steps={steps} onStepClick={handleStepClick} />
|
||
</div>
|
||
|
||
{currentStep === 0 && (
|
||
<GroupSettings
|
||
onNext={handleNext}
|
||
initialValues={{
|
||
name: formData.name,
|
||
fixedWechatIds: formData.fixedWechatIds,
|
||
groupingOption: formData.groupingOption,
|
||
fixedGroupCount: formData.fixedGroupCount,
|
||
}}
|
||
onValuesChange={handleGroupSettingsChange}
|
||
/>
|
||
)}
|
||
|
||
{currentStep === 1 && (
|
||
<DeviceSelection
|
||
onNext={handleNext}
|
||
onPrevious={handlePrevious}
|
||
initialSelectedDevices={formData.selectedDevices}
|
||
onDevicesChange={handleDevicesChange}
|
||
/>
|
||
)}
|
||
|
||
{currentStep === 2 && (
|
||
<TagSelection
|
||
onPrevious={handlePrevious}
|
||
onComplete={handleComplete}
|
||
initialValues={{
|
||
audienceTags: formData.audienceTags,
|
||
trafficTags: formData.trafficTags,
|
||
matchLogic: formData.matchLogic,
|
||
excludeTags: formData.excludeTags,
|
||
}}
|
||
onValuesChange={handleTagsChange}
|
||
/>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="container p-4 mx-auto max-w-7xl">
|
||
<div className="flex flex-col space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<h1 className="text-xl font-semibold">微信自动拉群</h1>
|
||
<Button onClick={() => setIsCreating(true)} className="bg-blue-500 hover:bg-blue-600">
|
||
<PlusCircle className="w-4 h-4 mr-2" />
|
||
新建计划
|
||
</Button>
|
||
</div>
|
||
|
||
<Tabs defaultValue="active" className="w-full">
|
||
<TabsList className="grid w-full max-w-md grid-cols-2">
|
||
<TabsTrigger value="active">进行中</TabsTrigger>
|
||
<TabsTrigger value="completed">已完成</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="active" className="mt-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{mockPlans.map((plan) => (
|
||
<Card key={plan.id} className="border border-gray-100">
|
||
<CardHeader className="pb-2">
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="text-lg font-medium">{plan.name}</CardTitle>
|
||
<Badge className={getStatusColor(plan.status)}>{getStatusText(plan.status)}</Badge>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-2 gap-2 text-sm text-gray-500">
|
||
<div className="flex items-center">
|
||
<Users className="w-4 h-4 mr-2" />
|
||
已建群数：{plan.groupCount}
|
||
</div>
|
||
<div className="flex items-center">
|
||
<Settings className="w-4 h-4 mr-2" />
|
||
群规模：{plan.groupSize}
|
||
</div>
|
||
<div className="flex items-center">
|
||
<RefreshCcw className="w-4 h-4 mr-2" />
|
||
更新时间：{plan.lastUpdated}
|
||
</div>
|
||
</div>
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
{plan.tags.map((tag) => (
|
||
<Badge key={tag} variant="secondary" className="text-xs">
|
||
{tag}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
<div className="mt-4 flex justify-end space-x-2">
|
||
<Button variant="outline" size="sm">
|
||
编辑
|
||
</Button>
|
||
<Button variant="destructive" size="sm" className="bg-red-500 hover:bg-red-600">
|
||
停止
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="completed">
|
||
<div className="h-[calc(100vh-200px)] flex items-center justify-center text-gray-500">暂无已完成的计划</div>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|