【操盘手】 流量分发页面整体优化
This commit is contained in:
wong
@@ -51,6 +51,19 @@ interface SyncHistory {
|
||||
errorMessage?: string
|
||||
}
|
||||
|
||||
// 新增朋友圈发布记录类型
|
||||
type MomentRecord = {
|
||||
id: number
|
||||
workbenchId: number
|
||||
publishTime: number
|
||||
contentType: number // 1文本 2视频 3图片
|
||||
content: string
|
||||
resUrls: string[]
|
||||
urls: string[]
|
||||
operatorName: string
|
||||
operatorAvatar: string
|
||||
}
|
||||
|
||||
export default function MomentsSyncDetailPage({ params }: { params: { id: string } }) {
|
||||
const router = useRouter()
|
||||
const [taskDetail, setTaskDetail] = useState<TaskDetail | null>(null)
|
||||
@@ -58,13 +71,15 @@ export default function MomentsSyncDetailPage({ params }: { params: { id: string
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [activeTab, setActiveTab] = useState("overview")
|
||||
const [showDeleteAlert, setShowDeleteAlert] = useState(false)
|
||||
const [momentRecords, setMomentRecords] = useState<MomentRecord[]>([])
|
||||
const [isMomentLoading, setIsMomentLoading] = useState(false)
|
||||
|
||||
// 获取任务详情
|
||||
useEffect(() => {
|
||||
const fetchTaskDetail = async () => {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
const response = await api.get<ApiResponse>(`/v1/workbench/detail?id=${params.id}`)
|
||||
const response = await api.get<ApiResponse>(`/v1/workbench/moments-records?workbenchId=${params.id}`)
|
||||
if (response.code === 200 && response.data) {
|
||||
setTaskDetail(response.data)
|
||||
|
||||
@@ -103,12 +118,33 @@ export default function MomentsSyncDetailPage({ params }: { params: { id: string
|
||||
}
|
||||
}
|
||||
|
||||
// 获取朋友圈发布记录
|
||||
type MomentsApiResponse = { code: number; msg: string; data: { list: MomentRecord[] } }
|
||||
const fetchMomentRecords = async () => {
|
||||
setIsMomentLoading(true)
|
||||
try {
|
||||
const response = await api.get<MomentsApiResponse>(`/v1/workbench/moments-records?workbenchId=${params.id}`)
|
||||
if (response.code === 200 && response.data) {
|
||||
setMomentRecords(response.data.list || [])
|
||||
} else {
|
||||
setMomentRecords([])
|
||||
}
|
||||
} catch (error) {
|
||||
setMomentRecords([])
|
||||
} finally {
|
||||
setIsMomentLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 切换Tab时加载数据
|
||||
const handleTabChange = (value: string) => {
|
||||
setActiveTab(value)
|
||||
if (value === "history" && syncHistory.length === 0) {
|
||||
fetchSyncHistory()
|
||||
}
|
||||
if (value === "moments" && momentRecords.length === 0) {
|
||||
fetchMomentRecords()
|
||||
}
|
||||
}
|
||||
|
||||
// 切换任务状态
|
||||
@@ -275,10 +311,11 @@ export default function MomentsSyncDetailPage({ params }: { params: { id: string
|
||||
</Card>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={handleTabChange} className="mb-4">
|
||||
<TabsList className="grid grid-cols-3">
|
||||
<TabsList className="grid grid-cols-4">
|
||||
<TabsTrigger value="overview">基本信息</TabsTrigger>
|
||||
<TabsTrigger value="devices">设备列表</TabsTrigger>
|
||||
<TabsTrigger value="history">同步历史</TabsTrigger>
|
||||
<TabsTrigger value="moments">发布记录</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="mt-4">
|
||||
@@ -385,6 +422,65 @@ export default function MomentsSyncDetailPage({ params }: { params: { id: string
|
||||
)}
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="moments" className="mt-4">
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-medium">朋友圈发布记录</h3>
|
||||
<Button variant="outline" size="sm" onClick={fetchMomentRecords} disabled={isMomentLoading}>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
{isMomentLoading ? (
|
||||
<div className="text-center py-8 text-gray-500">加载中...</div>
|
||||
) : momentRecords.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500">暂无发布记录</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{momentRecords.map((rec) => (
|
||||
<div key={rec.id} className="border rounded-lg p-3 flex gap-3">
|
||||
<Avatar className="h-10 w-10">
|
||||
{rec.operatorAvatar ? (
|
||||
<img src={rec.operatorAvatar} alt={rec.operatorName} />
|
||||
) : (
|
||||
<div className="bg-blue-100 text-blue-600 h-full w-full flex items-center justify-center">
|
||||
{rec.operatorName?.charAt(0) || "?"}
|
||||
</div>
|
||||
)}
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-medium text-sm">{rec.operatorName}</span>
|
||||
<span className="text-xs text-gray-400">{rec.publishTime ? new Date(rec.publishTime * 1000).toLocaleString() : "-"}</span>
|
||||
</div>
|
||||
<div className="mb-1 text-gray-800 text-sm">
|
||||
{rec.contentType === 1 && rec.content}
|
||||
{rec.contentType === 3 && rec.content}
|
||||
</div>
|
||||
{/* 图片展示 */}
|
||||
{rec.contentType === 3 && rec.resUrls && rec.resUrls.length > 0 && (
|
||||
<div className="flex gap-2 flex-wrap mt-1">
|
||||
{rec.resUrls.map((url, idx) => (
|
||||
<img key={idx} src={url} alt="图片" className="h-20 w-20 object-cover rounded" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* 视频展示 */}
|
||||
{rec.contentType === 2 && rec.urls && rec.urls.length > 0 && (
|
||||
<div className="mt-1">
|
||||
{rec.urls.map((url, idx) => (
|
||||
<video key={idx} src={url} controls className="h-32 w-48 rounded" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,514 +1,89 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { ChevronLeft, Info, Users, Target, Settings, ArrowRight, ArrowLeft } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
|
||||
import { Slider } from "@/components/ui/slider"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { TrafficPoolSelector } from "@/app/components/traffic-pool-selector"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
import { useToast } from "@/components/ui/use-toast"
|
||||
|
||||
// 模拟数据
|
||||
const planDetails = {
|
||||
const mockDistributionRule = {
|
||||
id: "1",
|
||||
name: "抖音直播引流计划",
|
||||
description: "从抖音直播间获取的潜在客户流量分发",
|
||||
status: "active",
|
||||
source: "douyin",
|
||||
sourceIcon: "🎬",
|
||||
distributionMethod: "even",
|
||||
targetGroups: ["新客户", "潜在客户"],
|
||||
devices: ["iPhone 13", "华为 P40", "小米 11"],
|
||||
totalUsers: 1250,
|
||||
dailyAverage: 85,
|
||||
weeklyData: [42, 56, 78, 64, 85, 92, 76],
|
||||
createdAt: "2024-03-10T08:30:00Z",
|
||||
lastUpdated: "2024-03-18T10:30:00Z",
|
||||
rules: {
|
||||
maxPerDay: 50,
|
||||
timeRestriction: "custom",
|
||||
customTimeStart: "09:00",
|
||||
customTimeEnd: "21:00",
|
||||
userFilters: [],
|
||||
excludeTags: [],
|
||||
},
|
||||
selectedUsers: [],
|
||||
dailyDistributionLimit: 85,
|
||||
deviceIds: ["dev1", "dev2", "dev3"],
|
||||
trafficPoolIds: ["pool1", "pool2"],
|
||||
distributionStrategy: "even",
|
||||
autoAdjust: true,
|
||||
}
|
||||
|
||||
export default function EditTrafficDistributionPage({ params }: { params: { id: string } }) {
|
||||
const router = useRouter()
|
||||
const [currentStep, setCurrentStep] = useState(1)
|
||||
const { toast } = useToast()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [isDeviceDialogOpen, setIsDeviceDialogOpen] = useState(false)
|
||||
const [isPoolDialogOpen, setIsPoolDialogOpen] = useState(false)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
id: "",
|
||||
name: "",
|
||||
description: "",
|
||||
source: "",
|
||||
distributionMethod: "even", // even, priority, ratio
|
||||
targetGroups: [] as string[],
|
||||
targetDevices: [] as string[],
|
||||
autoTag: true,
|
||||
activeStatus: true,
|
||||
priorityOrder: [] as string[],
|
||||
ratioSettings: {} as Record<string, number>,
|
||||
rules: {
|
||||
maxPerDay: 50,
|
||||
timeRestriction: "all", // all, custom
|
||||
customTimeStart: "09:00",
|
||||
customTimeEnd: "21:00",
|
||||
userFilters: [] as string[],
|
||||
excludeTags: [] as string[],
|
||||
},
|
||||
selectedUsers: [],
|
||||
isPoolSelectorOpen: false,
|
||||
status: "active",
|
||||
dailyDistributionLimit: 100,
|
||||
deviceIds: [] as string[],
|
||||
trafficPoolIds: [] as string[],
|
||||
distributionStrategy: "even", // even, weighted, priority
|
||||
autoAdjust: true,
|
||||
})
|
||||
|
||||
// 加载计划详情
|
||||
useEffect(() => {
|
||||
// 模拟API请求
|
||||
setFormData({
|
||||
name: planDetails.name,
|
||||
description: planDetails.description || "",
|
||||
source: planDetails.source,
|
||||
distributionMethod: planDetails.distributionMethod,
|
||||
targetGroups: planDetails.targetGroups,
|
||||
targetDevices: planDetails.devices,
|
||||
autoTag: true,
|
||||
activeStatus: planDetails.status === "active",
|
||||
priorityOrder: planDetails.targetGroups,
|
||||
ratioSettings: planDetails.targetGroups.reduce(
|
||||
(acc, group, index, arr) => {
|
||||
acc[group] = Math.floor(100 / arr.length)
|
||||
return acc
|
||||
},
|
||||
{} as Record<string, number>,
|
||||
),
|
||||
rules: planDetails.rules,
|
||||
selectedUsers: planDetails.selectedUsers || [],
|
||||
isPoolSelectorOpen: false,
|
||||
})
|
||||
}, [params.id])
|
||||
// 模拟API请求获取计划详情
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
// 实际项目中应从API获取数据
|
||||
// const response = await fetch(`/api/traffic-distribution/${params.id}`)
|
||||
// const data = await response.json()
|
||||
// setFormData(data)
|
||||
|
||||
const updateFormData = (field: string, value: any) => {
|
||||
setFormData((prev) => {
|
||||
if (field.includes(".")) {
|
||||
const [parent, child] = field.split(".")
|
||||
return {
|
||||
...prev,
|
||||
[parent]: {
|
||||
...prev[parent as keyof typeof prev],
|
||||
[child]: value,
|
||||
},
|
||||
}
|
||||
}
|
||||
return { ...prev, [field]: value }
|
||||
})
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
setCurrentStep((prev) => prev + 1)
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
if (currentStep > 1) {
|
||||
setCurrentStep((prev) => prev - 1)
|
||||
} else {
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (formData: any) => {
|
||||
try {
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/v1/api/traffic-distribution/${params.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (data.code === 200) {
|
||||
// 使用模拟数据
|
||||
setTimeout(() => {
|
||||
setFormData({
|
||||
...mockDistributionRule,
|
||||
id: params.id,
|
||||
})
|
||||
setLoading(false)
|
||||
}, 500)
|
||||
} catch (error) {
|
||||
console.error("获取分发规则失败:", error)
|
||||
toast({
|
||||
title: "保存成功",
|
||||
description: "流量分配计划已更新",
|
||||
});
|
||||
router.push('/workspace/traffic-distribution');
|
||||
} else {
|
||||
toast({
|
||||
title: "保存失败",
|
||||
description: data.msg || "请稍后重试",
|
||||
title: "加载失败",
|
||||
description: "无法加载分发规则详情",
|
||||
variant: "destructive",
|
||||
});
|
||||
})
|
||||
setLoading(false)
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "保存失败",
|
||||
description: "网络错误，请稍后重试",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const isStep1Valid = formData.name && formData.source
|
||||
const isStep2Valid = formData.targetGroups.length > 0 || formData.targetDevices.length > 0
|
||||
const isStep3Valid = true // 规则设置可以有默认值
|
||||
fetchData()
|
||||
}, [params.id, toast])
|
||||
|
||||
return (
|
||||
<div className="flex-1 bg-white min-h-screen">
|
||||
<header className="sticky top-0 z-10 bg-white border-b">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button variant="ghost" size="icon" onClick={handleBack}>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h1 className="text-lg font-medium">编辑流量分发</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target
|
||||
setFormData((prev) => ({ ...prev, [name]: value }))
|
||||
}
|
||||
|
||||
<div className="p-4 max-w-3xl mx-auto">
|
||||
{/* 步骤指示器 */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
{[
|
||||
{ step: 1, title: "基本信息", icon: <Info className="h-4 w-4" /> },
|
||||
{ step: 2, title: "目标设置", icon: <Target className="h-4 w-4" /> },
|
||||
{ step: 3, title: "规则配置", icon: <Settings className="h-4 w-4" /> },
|
||||
].map(({ step, title, icon }) => (
|
||||
<div key={step} className="flex flex-col items-center">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||
step === currentStep
|
||||
? "bg-blue-600 text-white"
|
||||
: step < currentStep
|
||||
? "bg-green-500 text-white"
|
||||
: "bg-gray-200 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{step < currentStep ? "✓" : icon}
|
||||
</div>
|
||||
<span className="text-xs mt-1">{title}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative mt-2">
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-gray-200"></div>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-1 bg-blue-600 transition-all"
|
||||
style={{ width: `${((currentStep - 1) / 2) * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
const handleSwitchChange = (checked: boolean, name: string) => {
|
||||
setFormData((prev) => ({ ...prev, [name]: checked }))
|
||||
}
|
||||
|
||||
{/* 步骤1：基本信息 */}
|
||||
{currentStep === 1 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>基本信息</CardTitle>
|
||||
<CardDescription>设置流量分发计划的基本信息</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">
|
||||
计划名称 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder="输入分发计划名称"
|
||||
value={formData.name}
|
||||
onChange={(e) => updateFormData("name", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
const handleSelectChange = (value: string, name: string) => {
|
||||
setFormData((prev) => ({ ...prev, [name]: value }))
|
||||
}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">计划描述</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="简要描述该分发计划的目标和用途"
|
||||
value={formData.description}
|
||||
onChange={(e) => updateFormData("description", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="source">
|
||||
流量来源 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Select value={formData.source} onValueChange={(value) => updateFormData("source", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择流量来源" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="douyin">抖音</SelectItem>
|
||||
<SelectItem value="xiaohongshu">小红书</SelectItem>
|
||||
<SelectItem value="wechat">微信</SelectItem>
|
||||
<SelectItem value="weibo">微博</SelectItem>
|
||||
<SelectItem value="other">其他来源</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-end">
|
||||
<Button onClick={handleNext} disabled={!isStep1Valid}>
|
||||
下一步
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 步骤2：目标设置 */}
|
||||
{currentStep === 2 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>目标设置</CardTitle>
|
||||
<CardDescription>选择流量分发的目标人群或设备</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Tabs defaultValue="groups">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="groups">目标人群</TabsTrigger>
|
||||
<TabsTrigger value="devices">目标设备</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="groups" className="pt-4">
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{["新客户", "潜在客户", "老客户", "会员", "高价值用户", "流失用户"].map((group) => (
|
||||
<Card
|
||||
key={group}
|
||||
className={`cursor-pointer hover:border-blue-400 transition-colors ${
|
||||
formData.targetGroups.includes(group) ? "border-blue-500 bg-blue-50" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
const newGroups = formData.targetGroups.includes(group)
|
||||
? formData.targetGroups.filter((g) => g !== group)
|
||||
: [...formData.targetGroups, group]
|
||||
updateFormData("targetGroups", newGroups)
|
||||
}}
|
||||
>
|
||||
<CardContent className="p-3 text-center">{group}</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">选择需要分发流量的目标人群，可多选</p>
|
||||
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => updateFormData("isPoolSelectorOpen", true)}
|
||||
className="w-full"
|
||||
>
|
||||
<Users className="mr-2 h-4 w-4" />
|
||||
从流量池选择特定用户
|
||||
</Button>
|
||||
|
||||
{formData.selectedUsers.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<p className="text-sm font-medium mb-1">已选择 {formData.selectedUsers.length} 个用户</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{formData.selectedUsers.slice(0, 3).map((user: any) => (
|
||||
<Badge key={user.id} variant="secondary">
|
||||
{user.nickname}
|
||||
</Badge>
|
||||
))}
|
||||
{formData.selectedUsers.length > 3 && (
|
||||
<Badge variant="secondary">+{formData.selectedUsers.length - 3}</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="devices" className="pt-4">
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm">选择需要接收流量的设备</p>
|
||||
<Button variant="outline" className="w-full">
|
||||
选择设备
|
||||
</Button>
|
||||
<p className="text-xs text-gray-500">您可以选择特定设备接收分发的流量</p>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="pt-4 flex justify-between">
|
||||
<Button variant="outline" onClick={handleBack}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={handleNext} disabled={!isStep2Valid}>
|
||||
下一步
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 步骤3：规则配置 */}
|
||||
{currentStep === 3 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>规则配置</CardTitle>
|
||||
<CardDescription>设置流量分发的规则和限制</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium">分发方式</h3>
|
||||
<RadioGroup
|
||||
value={formData.distributionMethod}
|
||||
onValueChange={(value) => updateFormData("distributionMethod", value)}
|
||||
className="space-y-3"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="even" id="even" />
|
||||
<Label htmlFor="even" className="cursor-pointer">
|
||||
均匀分发
|
||||
</Label>
|
||||
<span className="text-xs text-gray-500 ml-2">(流量将均匀分配给所有目标)</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="priority" id="priority" />
|
||||
<Label htmlFor="priority" className="cursor-pointer">
|
||||
优先级分发
|
||||
</Label>
|
||||
<span className="text-xs text-gray-500 ml-2">(按目标优先级顺序分发)</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="ratio" id="ratio" />
|
||||
<Label htmlFor="ratio" className="cursor-pointer">
|
||||
比例分发
|
||||
</Label>
|
||||
<span className="text-xs text-gray-500 ml-2">(按设定比例分配流量)</span>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 border-t pt-4">
|
||||
<h3 className="text-sm font-medium">分发限制</h3>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="maxPerDay">每日最大分发量</Label>
|
||||
<span className="text-sm font-medium">{formData.rules.maxPerDay} 人/天</span>
|
||||
</div>
|
||||
<Slider
|
||||
id="maxPerDay"
|
||||
min={10}
|
||||
max={200}
|
||||
step={10}
|
||||
value={[formData.rules.maxPerDay]}
|
||||
onValueChange={(value) => updateFormData("rules.maxPerDay", value[0])}
|
||||
/>
|
||||
<p className="text-xs text-gray-500">限制每天最多分发的流量数量</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>时间限制</Label>
|
||||
<RadioGroup
|
||||
value={formData.rules.timeRestriction}
|
||||
onValueChange={(value) => updateFormData("rules.timeRestriction", value)}
|
||||
className="space-y-3"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="all" id="all-time" />
|
||||
<Label htmlFor="all-time" className="cursor-pointer">
|
||||
全天分发
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="custom" id="custom-time" />
|
||||
<Label htmlFor="custom-time" className="cursor-pointer">
|
||||
自定义时间段
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
|
||||
{formData.rules.timeRestriction === "custom" && (
|
||||
<div className="grid grid-cols-2 gap-2 mt-2">
|
||||
<div>
|
||||
<Label htmlFor="timeStart" className="text-xs">
|
||||
开始时间
|
||||
</Label>
|
||||
<Input
|
||||
id="timeStart"
|
||||
type="time"
|
||||
value={formData.rules.customTimeStart}
|
||||
onChange={(e) => updateFormData("rules.customTimeStart", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="timeEnd" className="text-xs">
|
||||
结束时间
|
||||
</Label>
|
||||
<Input
|
||||
id="timeEnd"
|
||||
type="time"
|
||||
value={formData.rules.customTimeEnd}
|
||||
onChange={(e) => updateFormData("rules.customTimeEnd", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="autoTag">自动标记</Label>
|
||||
<Switch
|
||||
id="autoTag"
|
||||
checked={formData.autoTag}
|
||||
onCheckedChange={(checked) => updateFormData("autoTag", checked)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">启用后，系统将自动为分发的流量添加来源标签</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="activeStatus">立即激活</Label>
|
||||
<Switch
|
||||
id="activeStatus"
|
||||
checked={formData.activeStatus}
|
||||
onCheckedChange={(checked) => updateFormData("activeStatus", checked)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">启用后，创建完成后立即开始流量分发</p>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-between">
|
||||
<Button variant="outline" onClick={handleBack}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={() => handleSubmit(formData)} disabled={!isStep3Valid}>
|
||||
保存修改
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 流量池选择器 */}
|
||||
<TrafficPoolSelector
|
||||
open={formData.isPoolSelectorOpen}
|
||||
onOpenChange={(open) => updateFormData("isPoolSelectorOpen", open)}
|
||||
selectedUsers={formData.selectedUsers}
|
||||
onSelect={(users) => updateFormData("selectedUsers", users)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
const handleDeviceSelection = (selectedDevices: string[]) => {
|
||||
setFormData((prev) => ({ ...prev, deviceIds: selectedDevices }))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -96,4 +96,3 @@ export default function TrafficDistributionDetailLoading() {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,324 +1,279 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { ChevronLeft, Settings, Users, BarChart3, Download, Clock } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { ChevronLeft, Users, Database, TrendingUp, Calendar, Clock } from "lucide-react"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import BottomNav from "@/app/components/BottomNav"
|
||||
|
||||
// 模拟数据
|
||||
const planDetails = {
|
||||
id: "1",
|
||||
name: "抖音直播引流计划",
|
||||
description: "从抖音直播间获取的潜在客户流量分发",
|
||||
status: "active",
|
||||
source: "douyin",
|
||||
sourceIcon: "🎬",
|
||||
distributionMethod: "even",
|
||||
targetGroups: ["新客户", "潜在客户"],
|
||||
devices: ["iPhone 13", "华为 P40", "小米 11"],
|
||||
totalUsers: 1250,
|
||||
dailyAverage: 85,
|
||||
weeklyData: [42, 56, 78, 64, 85, 92, 76],
|
||||
createdAt: "2024-03-10T08:30:00Z",
|
||||
lastUpdated: "2024-03-18T10:30:00Z",
|
||||
rules: {
|
||||
maxPerDay: 50,
|
||||
timeRestriction: "custom",
|
||||
customTimeStart: "09:00",
|
||||
customTimeEnd: "21:00",
|
||||
},
|
||||
interface DistributionPlan {
|
||||
id: string
|
||||
name: string
|
||||
status: "active" | "paused"
|
||||
source: string
|
||||
sourceIcon: string
|
||||
targetGroups: string[]
|
||||
totalUsers: number
|
||||
dailyAverage: number
|
||||
deviceCount: number
|
||||
poolCount: number
|
||||
lastUpdated: string
|
||||
createTime: string
|
||||
creator: string
|
||||
devices: {
|
||||
id: string
|
||||
name: string
|
||||
status: "online" | "offline"
|
||||
}[]
|
||||
pools: {
|
||||
id: string
|
||||
name: string
|
||||
count: number
|
||||
keywords: string[]
|
||||
}[]
|
||||
dailyStats: {
|
||||
date: string
|
||||
distributed: number
|
||||
}[]
|
||||
}
|
||||
|
||||
// 模拟流量数据
|
||||
const trafficData = [
|
||||
{ id: "1", name: "张三", source: "抖音直播", time: "2024-03-20 09:45", target: "新客户", device: "iPhone 13" },
|
||||
{ id: "2", name: "李四", source: "抖音评论", time: "2024-03-20 10:12", target: "潜在客户", device: "华为 P40" },
|
||||
{ id: "3", name: "王五", source: "抖音私信", time: "2024-03-20 11:30", target: "新客户", device: "小米 11" },
|
||||
{ id: "4", name: "赵六", source: "抖音直播", time: "2024-03-20 13:15", target: "潜在客户", device: "iPhone 13" },
|
||||
{ id: "5", name: "孙七", source: "抖音评论", time: "2024-03-20 14:22", target: "新客户", device: "华为 P40" },
|
||||
]
|
||||
|
||||
export default function TrafficDistributionDetailPage({ params }: { params: { id: string } }) {
|
||||
export default function DistributionPlanDetailPage({ params }: { params: { id: string } }) {
|
||||
const { id } = params
|
||||
const router = useRouter()
|
||||
const [activeTab, setActiveTab] = useState("overview")
|
||||
const [isActive, setIsActive] = useState(planDetails.status === "active")
|
||||
const [timeRange, setTimeRange] = useState("7days")
|
||||
const [plan, setPlan] = useState<DistributionPlan | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
// 模拟API请求
|
||||
setTimeout(() => {
|
||||
setPlan({
|
||||
id: id,
|
||||
name: "抖音直播引流计划",
|
||||
status: "active",
|
||||
source: "douyin",
|
||||
sourceIcon: "🎬",
|
||||
targetGroups: ["新客户", "潜在客户"],
|
||||
totalUsers: 1250,
|
||||
dailyAverage: 85,
|
||||
deviceCount: 3,
|
||||
poolCount: 2,
|
||||
lastUpdated: "2024-03-18 10:30:00",
|
||||
createTime: "2024-03-10 08:30:00",
|
||||
creator: "admin",
|
||||
devices: [
|
||||
{ id: "dev1", name: "iPhone 13", status: "online" },
|
||||
{ id: "dev2", name: "Xiaomi 12", status: "online" },
|
||||
{ id: "dev3", name: "Huawei P40", status: "offline" },
|
||||
],
|
||||
pools: [
|
||||
{ id: "pool1", name: "抖音流量池", count: 850, keywords: ["抖音直播", "短视频", "网红"] },
|
||||
{ id: "pool2", name: "通用流量池", count: 400, keywords: ["电商", "购物", "促销"] },
|
||||
],
|
||||
dailyStats: [
|
||||
{ date: "03-15", distributed: 78 },
|
||||
{ date: "03-16", distributed: 92 },
|
||||
{ date: "03-17", distributed: 85 },
|
||||
{ date: "03-18", distributed: 103 },
|
||||
{ date: "03-19", distributed: 67 },
|
||||
{ date: "03-20", distributed: 89 },
|
||||
{ date: "03-21", distributed: 95 },
|
||||
],
|
||||
})
|
||||
setLoading(false)
|
||||
}, 500)
|
||||
}, [id])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex-1 bg-gray-50 min-h-screen p-4 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
|
||||
<p className="mt-4 text-gray-500">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!plan) {
|
||||
return (
|
||||
<div className="flex-1 bg-gray-50 min-h-screen p-4">
|
||||
<div className="text-center py-12">
|
||||
<h2 className="text-xl font-medium text-gray-700">未找到计划</h2>
|
||||
<p className="text-gray-500 mt-2">无法找到ID为 {id} 的分发计划</p>
|
||||
<Button className="mt-4" onClick={() => router.push("/workspace/traffic-distribution")}>
|
||||
返回列表
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 bg-white min-h-screen">
|
||||
<div className="flex-1 bg-gray-50 min-h-screen pb-16">
|
||||
<header className="sticky top-0 z-10 bg-white border-b">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h1 className="text-lg font-medium">{planDetails.name}</h1>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex items-center mr-4">
|
||||
<span className="mr-2 text-sm">状态:</span>
|
||||
<Switch checked={isActive} onCheckedChange={setIsActive} />
|
||||
<span className="ml-2 text-sm">{isActive ? "进行中" : "已暂停"}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => router.push(`/workspace/traffic-distribution/${params.id}/edit`)}
|
||||
>
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
编辑
|
||||
</Button>
|
||||
<h1 className="text-lg font-medium">计划详情</h1>
|
||||
</div>
|
||||
<Button variant="outline" onClick={() => router.push(`/workspace/traffic-distribution/${id}/edit`)}>
|
||||
编辑计划
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-4">
|
||||
<Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="grid w-full grid-cols-3 mb-6">
|
||||
<TabsTrigger value="overview">概览</TabsTrigger>
|
||||
<TabsTrigger value="traffic">流量记录</TabsTrigger>
|
||||
<TabsTrigger value="rules">分发规则</TabsTrigger>
|
||||
<div className="p-4 space-y-4">
|
||||
{/* 计划概览 */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="text-2xl">{plan.sourceIcon}</div>
|
||||
<CardTitle>{plan.name}</CardTitle>
|
||||
</div>
|
||||
<Badge variant={plan.status === "active" ? "success" : "secondary"}>
|
||||
{plan.status === "active" ? "进行中" : "已暂停"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 gap-4 mt-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Users className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-sm text-gray-500">创建人: {plan.creator}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Calendar className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-sm text-gray-500">创建时间: {plan.createTime.split(" ")[0]}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Clock className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-sm text-gray-500">最近更新: {plan.lastUpdated.split(" ")[0]}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计数据区域：上3下2布局，单元格加分隔线 */}
|
||||
<div className="grid grid-cols-3 bg-white rounded-t-lg overflow-hidden border-t border-l border-r mt-6">
|
||||
<div className="flex flex-col items-center justify-center py-4 border-r border-gray-200">
|
||||
<div className="text-2xl font-bold text-gray-900 mb-1">{plan.dailyAverage}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">日均分发人数</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center py-4 border-r border-gray-200">
|
||||
<div className="text-2xl font-bold text-gray-900 mb-1">{plan.deviceCount}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">分发设备</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center py-4">
|
||||
<div className="text-2xl font-bold text-gray-900 mb-1">{plan.poolCount}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">流量池</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 横向分隔线 */}
|
||||
<div className="border-t border-gray-200 mx-auto w-full" style={{height: 0}} />
|
||||
<div className="grid grid-cols-2 bg-white rounded-b-lg overflow-hidden border-b border-l border-r">
|
||||
<div className="flex flex-col items-center justify-center py-4 border-r border-gray-200">
|
||||
<div className="text-2xl font-bold text-gray-900 mb-1">{plan.dailyAverage}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">日均分发量</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center py-4">
|
||||
<div className="text-2xl font-bold text-gray-900 mb-1">{plan.totalUsers}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">总流量池数量</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 详细信息标签页 */}
|
||||
<Tabs defaultValue="devices" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="devices">设备</TabsTrigger>
|
||||
<TabsTrigger value="pools">流量池</TabsTrigger>
|
||||
<TabsTrigger value="stats">分发统计</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* 概览标签页 */}
|
||||
<TabsContent value="overview" className="space-y-6">
|
||||
{/* 数据卡片 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">总流量</p>
|
||||
<p className="text-2xl font-bold text-blue-600">{planDetails.totalUsers.toLocaleString()}</p>
|
||||
</div>
|
||||
<Users className="h-8 w-8 text-blue-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">日均获取</p>
|
||||
<p className="text-2xl font-bold text-green-600">{planDetails.dailyAverage}</p>
|
||||
</div>
|
||||
<BarChart3 className="h-8 w-8 text-green-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 图表 */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>流量趋势</CardTitle>
|
||||
<Select value={timeRange} onValueChange={setTimeRange}>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue placeholder="选择时间范围" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="7days">近7天</SelectItem>
|
||||
<SelectItem value="30days">近30天</SelectItem>
|
||||
<SelectItem value="90days">近90天</SelectItem>
|
||||
<SelectItem value="custom">自定义</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4">
|
||||
<div className="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
|
||||
{/* 这里可以放置实际的图表组件 */}
|
||||
<div className="text-center">
|
||||
<BarChart3 className="h-12 w-12 text-gray-300 mx-auto mb-2" />
|
||||
<p className="text-gray-500">流量趋势图表</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 基本信息 */}
|
||||
<TabsContent value="devices" className="mt-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>基本信息</CardTitle>
|
||||
<CardTitle className="text-base">分发设备 ({plan.devices.length})</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">流量来源</p>
|
||||
<p className="font-medium">{planDetails.sourceIcon} 抖音</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">分发方式</p>
|
||||
<p className="font-medium">
|
||||
{planDetails.distributionMethod === "even"
|
||||
? "均匀分发"
|
||||
: planDetails.distributionMethod === "priority"
|
||||
? "优先级分发"
|
||||
: "比例分发"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">创建时间</p>
|
||||
<p className="font-medium">{new Date(planDetails.createdAt).toLocaleDateString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">最近更新</p>
|
||||
<p className="font-medium">{new Date(planDetails.lastUpdated).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-2">目标人群</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{planDetails.targetGroups.map((group) => (
|
||||
<Badge key={group} variant="outline">
|
||||
{group}
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{plan.devices.map((device) => (
|
||||
<div key={device.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<div className="font-medium">{device.name}</div>
|
||||
<div className="text-sm text-gray-500">ID: {device.id}</div>
|
||||
</div>
|
||||
<Badge variant={device.status === "online" ? "success" : "secondary"}>
|
||||
{device.status === "online" ? "在线" : "离线"}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 mb-2">目标设备</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{planDetails.devices.map((device) => (
|
||||
<Badge key={device} variant="outline">
|
||||
{device}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* 流量记录标签页 */}
|
||||
<TabsContent value="traffic" className="space-y-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-lg font-medium">流量记录</h2>
|
||||
<Button variant="outline" size="sm">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
导出数据
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left p-3">用户</th>
|
||||
<th className="text-left p-3">来源</th>
|
||||
<th className="text-left p-3">时间</th>
|
||||
<th className="text-left p-3">目标</th>
|
||||
<th className="text-left p-3">设备</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{trafficData.map((item) => (
|
||||
<tr key={item.id} className="border-b hover:bg-gray-50">
|
||||
<td className="p-3">{item.name}</td>
|
||||
<td className="p-3">{item.source}</td>
|
||||
<td className="p-3">{item.time}</td>
|
||||
<td className="p-3">{item.target}</td>
|
||||
<td className="p-3">{item.device}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Button variant="outline">加载更多</Button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* 分发规则标签页 */}
|
||||
<TabsContent value="rules" className="space-y-6">
|
||||
<TabsContent value="pools" className="mt-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>分发规则</CardTitle>
|
||||
<CardTitle className="text-base">流量池 ({plan.pools.length})</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">分发方式</p>
|
||||
<p className="font-medium">
|
||||
{planDetails.distributionMethod === "even"
|
||||
? "均匀分发"
|
||||
: planDetails.distributionMethod === "priority"
|
||||
? "优先级分发"
|
||||
: "比例分发"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">每日最大分发量</p>
|
||||
<p className="font-medium">{planDetails.rules.maxPerDay} 人/天</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">时间限制</p>
|
||||
<div className="flex items-center mt-1">
|
||||
<Clock className="h-4 w-4 mr-2 text-gray-400" />
|
||||
{planDetails.rules.timeRestriction === "all" ? (
|
||||
<p className="font-medium">全天分发</p>
|
||||
) : (
|
||||
<p className="font-medium">
|
||||
{planDetails.rules.customTimeStart} - {planDetails.rules.customTimeEnd}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-4">
|
||||
<p className="text-sm text-gray-500 mb-2">目标人群优先级</p>
|
||||
{planDetails.distributionMethod === "priority" ? (
|
||||
<div className="space-y-2">
|
||||
{planDetails.targetGroups.map((group, index) => (
|
||||
<div key={group} className="flex items-center">
|
||||
<Badge variant="outline" className="mr-2">
|
||||
{index + 1}
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{plan.pools.map((pool) => (
|
||||
<div key={pool.id} className="p-3 bg-gray-50 rounded-lg">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="font-medium">{pool.name}</div>
|
||||
<Badge variant="outline">{pool.count} 人</Badge>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{pool.keywords.map((keyword, idx) => (
|
||||
<Badge key={idx} variant="secondary" className="bg-white">
|
||||
{keyword}
|
||||
</Badge>
|
||||
<span>{group}</span>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500">当前分发方式不使用优先级</p>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<div className="border-t pt-4">
|
||||
<p className="text-sm text-gray-500 mb-2">分发比例设置</p>
|
||||
{planDetails.distributionMethod === "ratio" ? (
|
||||
<div className="space-y-2">
|
||||
{planDetails.targetGroups.map((group) => (
|
||||
<div key={group} className="flex items-center justify-between">
|
||||
<span>{group}</span>
|
||||
<Badge>{Math.floor(100 / planDetails.targetGroups.length)}%</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500">当前分发方式不使用比例设置</p>
|
||||
)}
|
||||
<TabsContent value="stats" className="mt-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">分发统计</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-64 w-full">
|
||||
{/* 这里可以放置图表组件，例如使用 recharts 或其他图表库 */}
|
||||
<div className="h-full flex items-end justify-between gap-2">
|
||||
{plan.dailyStats.map((stat, idx) => (
|
||||
<div key={idx} className="flex flex-col items-center">
|
||||
<div
|
||||
className="bg-blue-500 rounded-t-sm w-10"
|
||||
style={{ height: `${(stat.distributed / 120) * 100}%` }}
|
||||
></div>
|
||||
<div className="text-xs mt-1">{stat.date}</div>
|
||||
<div className="text-xs font-medium">{stat.distributed}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center mt-4 text-sm text-gray-500">最近7天分发数据统计</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<BottomNav />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { MoreHorizontal, Edit, Copy, Code, Trash2, Play, Pause } from "lucide-react"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { formatDate } from "@/app/lib/utils"
|
||||
|
||||
// 分发规则类型定义
|
||||
export interface DistributionRule {
|
||||
id: string
|
||||
name: string
|
||||
status: "active" | "paused" | "completed"
|
||||
deviceCount: number
|
||||
dailyDistribution: number
|
||||
trafficPoolCount: number
|
||||
totalDistributed: number
|
||||
lastExecuted?: string
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
interface DistributionRuleCardProps {
|
||||
rule: DistributionRule
|
||||
onDelete: (id: string) => void
|
||||
onStatusChange: (id: string, status: "active" | "paused") => void
|
||||
}
|
||||
|
||||
export function DistributionRuleCard({ rule, onDelete, onStatusChange }: DistributionRuleCardProps) {
|
||||
const router = useRouter()
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||
|
||||
// 状态标签颜色映射
|
||||
const statusColorMap = {
|
||||
active: "bg-green-100 text-green-800 hover:bg-green-200",
|
||||
paused: "bg-yellow-100 text-yellow-800 hover:bg-yellow-200",
|
||||
completed: "bg-blue-100 text-blue-800 hover:bg-blue-200",
|
||||
}
|
||||
|
||||
// 状态文本映射
|
||||
const statusTextMap = {
|
||||
active: "进行中",
|
||||
paused: "已暂停",
|
||||
completed: "已完成",
|
||||
}
|
||||
|
||||
// 处理编辑按钮点击
|
||||
const handleEdit = () => {
|
||||
router.push(`/workspace/traffic-distribution/${rule.id}/edit`)
|
||||
}
|
||||
|
||||
// 处理复制按钮点击
|
||||
const handleCopy = () => {
|
||||
// 实现复制功能
|
||||
console.log("复制分发规则:", rule.id)
|
||||
}
|
||||
|
||||
// 处理接口按钮点击
|
||||
const handleAPI = () => {
|
||||
router.push(`/workspace/traffic-distribution/${rule.id}/api`)
|
||||
}
|
||||
|
||||
// 处理删除按钮点击
|
||||
const handleDelete = () => {
|
||||
onDelete(rule.id)
|
||||
}
|
||||
|
||||
// 处理状态切换
|
||||
const handleStatusToggle = () => {
|
||||
const newStatus = rule.status === "active" ? "paused" : "active"
|
||||
onStatusChange(rule.id, newStatus)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-full hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="text-lg font-semibold">{rule.name}</h3>
|
||||
<Badge className={statusColorMap[rule.status]}>{statusTextMap[rule.status]}</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mt-3">
|
||||
<div className="bg-gray-50 rounded-lg p-3 text-center">
|
||||
<div className="text-sm text-gray-500">日均分发人数</div>
|
||||
<div className="text-xl font-bold mt-1">{rule.dailyDistribution}</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-lg p-3 text-center">
|
||||
<div className="text-sm text-gray-500">分发设备</div>
|
||||
<div className="text-xl font-bold mt-1">{rule.deviceCount}</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-lg p-3 text-center">
|
||||
<div className="text-sm text-gray-500">流量池</div>
|
||||
<div className="text-xl font-bold mt-1">{rule.trafficPoolCount}</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-lg p-3 text-center">
|
||||
<div className="text-sm text-gray-500">日均分发量</div>
|
||||
<div className="text-xl font-bold mt-1">{rule.dailyDistribution}</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-lg p-3 text-center">
|
||||
<div className="text-sm text-gray-500">总流量池数量</div>
|
||||
<div className="text-xl font-bold mt-1">{rule.totalDistributed}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
|
||||
<DropdownMenuTrigger className="focus:outline-none">
|
||||
<div className="p-2 rounded-full hover:bg-gray-100">
|
||||
<MoreHorizontal className="h-5 w-5 text-gray-500" />
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-[180px]">
|
||||
<DropdownMenuItem onClick={handleEdit} className="cursor-pointer">
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
<span>编辑计划</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleCopy} className="cursor-pointer">
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
<span>复制计划</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleAPI} className="cursor-pointer">
|
||||
<Code className="mr-2 h-4 w-4" />
|
||||
<span>计划接口</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleStatusToggle} className="cursor-pointer">
|
||||
{rule.status === "active" ? (
|
||||
<>
|
||||
<Pause className="mr-2 h-4 w-4" />
|
||||
<span>暂停计划</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
<span>启动计划</span>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleDelete} className="cursor-pointer text-red-600">
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
<span>删除计划</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{rule.lastExecuted && (
|
||||
<div className="flex items-center text-sm text-gray-500 mt-4">
|
||||
<span className="flex items-center">上次执行: {formatDate(rule.lastExecuted)}</span>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,280 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
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 { Switch } from "@/components/ui/switch"
|
||||
import { useToast } from "@/components/ui/use-toast"
|
||||
import TrafficPoolSelector from "../components/traffic-pool-selector"
|
||||
import { useRouter } from "next/navigation"
|
||||
|
||||
// 定义分发规则表单的属性接口
|
||||
interface DistributionRuleFormProps {
|
||||
initialData?: {
|
||||
id?: string
|
||||
name?: string
|
||||
description?: string
|
||||
trafficPoolId?: string
|
||||
trafficPoolName?: string
|
||||
keywords?: string[]
|
||||
isActive?: boolean
|
||||
distributionRatio?: number
|
||||
targetAudience?: string
|
||||
}
|
||||
onSubmit?: (data: any) => void
|
||||
isEdit?: boolean
|
||||
}
|
||||
|
||||
// 导出分发规则表单组件
|
||||
export default function DistributionRuleForm({
|
||||
initialData = {},
|
||||
onSubmit,
|
||||
isEdit = false,
|
||||
}: DistributionRuleFormProps) {
|
||||
const router = useRouter()
|
||||
const { toast } = useToast()
|
||||
|
||||
// 表单状态
|
||||
const [formData, setFormData] = useState({
|
||||
name: initialData.name || "",
|
||||
description: initialData.description || "",
|
||||
trafficPoolId: initialData.trafficPoolId || "",
|
||||
trafficPoolName: initialData.trafficPoolName || "",
|
||||
keywords: initialData.keywords || [],
|
||||
isActive: initialData.isActive !== undefined ? initialData.isActive : true,
|
||||
distributionRatio: initialData.distributionRatio || 50,
|
||||
targetAudience: initialData.targetAudience || "",
|
||||
})
|
||||
|
||||
const [keywordInput, setKeywordInput] = useState("")
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
// 处理表单输入变化
|
||||
const handleChange = (field: string, value: any) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }))
|
||||
}
|
||||
|
||||
// 处理关键词添加
|
||||
const handleAddKeyword = () => {
|
||||
if (keywordInput.trim() && !formData.keywords.includes(keywordInput.trim())) {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
keywords: [...prev.keywords, keywordInput.trim()],
|
||||
}))
|
||||
setKeywordInput("")
|
||||
}
|
||||
}
|
||||
|
||||
// 处理关键词删除
|
||||
const handleRemoveKeyword = (keyword: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
keywords: prev.keywords.filter((k) => k !== keyword),
|
||||
}))
|
||||
}
|
||||
|
||||
// 处理流量池选择
|
||||
const handlePoolSelect = (poolId: string, poolName: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
trafficPoolId: poolId,
|
||||
trafficPoolName: poolName,
|
||||
}))
|
||||
}
|
||||
|
||||
// 处理表单提交
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
// 表单验证
|
||||
if (!formData.name) {
|
||||
toast({
|
||||
title: "错误",
|
||||
description: "请输入分发规则名称",
|
||||
variant: "destructive",
|
||||
})
|
||||
setIsSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
if (!formData.trafficPoolId) {
|
||||
toast({
|
||||
title: "错误",
|
||||
description: "请选择流量池",
|
||||
variant: "destructive",
|
||||
})
|
||||
setIsSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
// 如果有onSubmit回调，则调用
|
||||
if (onSubmit) {
|
||||
await onSubmit(formData)
|
||||
} else {
|
||||
// 模拟API调用
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
toast({
|
||||
title: isEdit ? "更新成功" : "创建成功",
|
||||
description: isEdit ? "流量分发规则已成功更新" : "新的流量分发规则已创建",
|
||||
})
|
||||
|
||||
// 返回列表页
|
||||
router.push("/workspace/traffic-distribution")
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("提交表单时出错:", error)
|
||||
toast({
|
||||
title: "提交失败",
|
||||
description: "保存分发规则时发生错误，请重试",
|
||||
variant: "destructive",
|
||||
})
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>{isEdit ? "编辑流量分发规则" : "创建新的流量分发规则"}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 基本信息 */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="name">规则名称</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleChange("name", e.target.value)}
|
||||
placeholder="输入规则名称"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="description">规则描述</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) => handleChange("description", e.target.value)}
|
||||
placeholder="描述该规则的用途和目标"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 流量池选择 */}
|
||||
<div className="space-y-2">
|
||||
<Label>选择流量池</Label>
|
||||
<TrafficPoolSelector selectedPoolId={formData.trafficPoolId} onSelect={handlePoolSelect} />
|
||||
{formData.trafficPoolName && (
|
||||
<div className="text-sm text-muted-foreground mt-1">已选择: {formData.trafficPoolName}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 关键词设置 */}
|
||||
<div className="space-y-2">
|
||||
<Label>关键词设置</Label>
|
||||
<div className="flex space-x-2">
|
||||
<Input
|
||||
value={keywordInput}
|
||||
onChange={(e) => setKeywordInput(e.target.value)}
|
||||
placeholder="添加关键词"
|
||||
className="flex-1"
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault()
|
||||
handleAddKeyword()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button type="button" onClick={handleAddKeyword}>
|
||||
添加
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{formData.keywords.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{formData.keywords.map((keyword, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-secondary text-secondary-foreground px-3 py-1 rounded-full flex items-center text-sm"
|
||||
>
|
||||
{keyword}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveKeyword(keyword)}
|
||||
className="ml-2 text-secondary-foreground/70 hover:text-secondary-foreground"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 目标受众 */}
|
||||
<div>
|
||||
<Label htmlFor="targetAudience">目标受众</Label>
|
||||
<Select value={formData.targetAudience} onValueChange={(value) => handleChange("targetAudience", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择目标受众" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有用户</SelectItem>
|
||||
<SelectItem value="new">新用户</SelectItem>
|
||||
<SelectItem value="returning">回访用户</SelectItem>
|
||||
<SelectItem value="highValue">高价值用户</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 分发比例 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="distributionRatio">分发比例 ({formData.distributionRatio}%)</Label>
|
||||
<Input
|
||||
id="distributionRatio"
|
||||
type="range"
|
||||
min="1"
|
||||
max="100"
|
||||
value={formData.distributionRatio}
|
||||
onChange={(e) => handleChange("distributionRatio", Number.parseInt(e.target.value))}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 启用状态 */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="isActive"
|
||||
checked={formData.isActive}
|
||||
onCheckedChange={(checked) => handleChange("isActive", checked)}
|
||||
/>
|
||||
<Label htmlFor="isActive">启用该规则</Label>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="flex justify-between">
|
||||
<Button type="button" variant="outline" onClick={() => router.push("/workspace/traffic-distribution")}>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "保存中..." : isEdit ? "更新规则" : "创建规则"}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -177,4 +177,3 @@ export default function KeywordSelector({ onSelect, initialSelected = [] }: Keyw
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useDebounce } from "@/hooks/use-debounce"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
|
||||
// 模拟流量池数据
|
||||
const mockTrafficPools = [
|
||||
{ id: "1", name: "抖音流量池", source: "douyin", count: 1250 },
|
||||
{ id: "2", name: "微信流量池", source: "wechat", count: 3420 },
|
||||
{ id: "3", name: "电话流量池", source: "phone", count: 890 },
|
||||
{ id: "4", name: "海报流量池", source: "poster", count: 1670 },
|
||||
{ id: "5", name: "高意向客户池", source: "mixed", count: 520 },
|
||||
{ id: "6", name: "新客户流量池", source: "mixed", count: 780 },
|
||||
]
|
||||
|
||||
interface TrafficPoolSelectorProps {
|
||||
selectedPoolId?: string
|
||||
onSelect: (poolId: string, poolName: string) => void
|
||||
}
|
||||
|
||||
export default function TrafficPoolSelector({ selectedPoolId, onSelect }: TrafficPoolSelectorProps) {
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [pools, setPools] = useState<any[]>([])
|
||||
|
||||
const debouncedSearchTerm = useDebounce(searchTerm, 300)
|
||||
|
||||
// 加载流量池数据
|
||||
useEffect(() => {
|
||||
const fetchPools = async () => {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
// 模拟API调用
|
||||
await new Promise((resolve) => setTimeout(resolve, 800))
|
||||
|
||||
// 根据搜索词过滤
|
||||
const filteredPools = mockTrafficPools.filter((pool) =>
|
||||
pool.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase()),
|
||||
)
|
||||
|
||||
setPools(filteredPools)
|
||||
} catch (error) {
|
||||
console.error("获取流量池数据失败:", error)
|
||||
setPools([])
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchPools()
|
||||
}, [debouncedSearchTerm])
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
placeholder="搜索流量池..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="mb-4"
|
||||
/>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Card key={i} className="cursor-pointer">
|
||||
<CardContent className="p-4">
|
||||
<Skeleton className="h-6 w-3/4 mb-2" />
|
||||
<Skeleton className="h-4 w-1/2" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : pools.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{pools.map((pool) => (
|
||||
<Card
|
||||
key={pool.id}
|
||||
className={`cursor-pointer transition-all ${
|
||||
selectedPoolId === pool.id ? "border-primary bg-primary/5" : "hover:border-primary/50"
|
||||
}`}
|
||||
onClick={() => onSelect(pool.id, pool.name)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="font-medium">{pool.name}</div>
|
||||
<div className="text-sm text-muted-foreground">{pool.count} 条数据</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-muted-foreground">未找到匹配的流量池</p>
|
||||
<Button variant="link" className="mt-2" onClick={() => setSearchTerm("")}>
|
||||
清除搜索
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -85,4 +85,3 @@ export default function TrafficDistributionLoading() {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
import { Slider } from "@/components/ui/slider"
|
||||
import { format } from "date-fns"
|
||||
|
||||
interface BasicInfoStepProps {
|
||||
onNext: (data: any) => void
|
||||
initialData?: any
|
||||
}
|
||||
|
||||
export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoStepProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
name: initialData.name || `流量分发 ${format(new Date(), "yyyyMMdd HHmm")}`,
|
||||
distributionMethod: initialData.distributionMethod || "equal",
|
||||
dailyLimit: initialData.dailyLimit || 50,
|
||||
timeRestriction: initialData.timeRestriction || "custom",
|
||||
startTime: initialData.startTime || "09:00",
|
||||
endTime: initialData.endTime || "18:00",
|
||||
})
|
||||
|
||||
const handleChange = (field: string, value: any) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }))
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
onNext(formData)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm">
|
||||
<h2 className="text-xl font-bold mb-6">基本信息</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name" className="flex items-center">
|
||||
计划名称 <span className="text-red-500 ml-1">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleChange("name", e.target.value)}
|
||||
placeholder="请输入计划名称"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>分配方式</Label>
|
||||
<RadioGroup
|
||||
value={formData.distributionMethod}
|
||||
onValueChange={(value) => handleChange("distributionMethod", value)}
|
||||
className="space-y-2"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="equal" id="equal" />
|
||||
<Label htmlFor="equal" className="cursor-pointer">
|
||||
均分配 <span className="text-gray-500 text-sm">(流量将均分配给所有客服)</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="priority" id="priority" />
|
||||
<Label htmlFor="priority" className="cursor-pointer">
|
||||
优先级分配 <span className="text-gray-500 text-sm">(按客服优先级顺序分配)</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="ratio" id="ratio" />
|
||||
<Label htmlFor="ratio" className="cursor-pointer">
|
||||
比例分配 <span className="text-gray-500 text-sm">(按设定比例分配流量)</span>
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label>分配限制</Label>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span>每日最大分配量</span>
|
||||
<span className="font-medium">{formData.dailyLimit} 人/天</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[formData.dailyLimit]}
|
||||
min={1}
|
||||
max={200}
|
||||
step={1}
|
||||
onValueChange={(value) => handleChange("dailyLimit", value[0])}
|
||||
className="py-4"
|
||||
/>
|
||||
<p className="text-sm text-gray-500">限制每天最多分配的流量数量</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 pt-4">
|
||||
<Label>时间限制</Label>
|
||||
<RadioGroup
|
||||
value={formData.timeRestriction}
|
||||
onValueChange={(value) => handleChange("timeRestriction", value)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="allDay" id="allDay" />
|
||||
<Label htmlFor="allDay" className="cursor-pointer">
|
||||
全天分配
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="custom" id="custom" />
|
||||
<Label htmlFor="custom" className="cursor-pointer">
|
||||
自定义时间段
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
|
||||
{formData.timeRestriction === "custom" && (
|
||||
<div className="grid grid-cols-2 gap-4 pt-2">
|
||||
<div>
|
||||
<Label htmlFor="startTime" className="mb-2 block">
|
||||
开始时间
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="startTime"
|
||||
type="time"
|
||||
value={formData.startTime}
|
||||
onChange={(e) => handleChange("startTime", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="endTime" className="mb-2 block">
|
||||
结束时间
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="endTime"
|
||||
type="time"
|
||||
value={formData.endTime}
|
||||
onChange={(e) => handleChange("endTime", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex justify-end">
|
||||
<Button onClick={handleSubmit} className="px-8">
|
||||
下一步 →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface StepIndicatorProps {
|
||||
currentStep: number
|
||||
steps: {
|
||||
id: number
|
||||
title: string
|
||||
icon: React.ReactNode
|
||||
}[]
|
||||
}
|
||||
|
||||
export default function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
|
||||
return (
|
||||
<div className="flex justify-between items-center w-full mb-6 px-4">
|
||||
{steps.map((step, index) => (
|
||||
<div key={step.id} className="flex flex-col items-center">
|
||||
<div
|
||||
className={cn(
|
||||
"w-16 h-16 rounded-full flex items-center justify-center mb-2",
|
||||
currentStep === index ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500",
|
||||
)}
|
||||
>
|
||||
{step.icon}
|
||||
</div>
|
||||
<span className={cn("text-sm", currentStep === index ? "text-blue-500 font-medium" : "text-gray-500")}>
|
||||
{step.title}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Avatar } from "@/components/ui/avatar"
|
||||
import { Search } from "lucide-react"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
interface Device {
|
||||
id: string
|
||||
name: string
|
||||
status: "online" | "offline"
|
||||
avatar?: string
|
||||
}
|
||||
|
||||
interface CustomerService {
|
||||
id: string
|
||||
name: string
|
||||
status: "online" | "offline"
|
||||
avatar?: string
|
||||
}
|
||||
|
||||
interface TargetSettingsStepProps {
|
||||
onNext: (data: any) => void
|
||||
onBack: () => void
|
||||
initialData?: any
|
||||
}
|
||||
|
||||
export default function TargetSettingsStep({ onNext, onBack, initialData = {} }: TargetSettingsStepProps) {
|
||||
const [selectedDevices, setSelectedDevices] = useState<string[]>(initialData.selectedDevices || [])
|
||||
const [selectedCustomerServices, setSelectedCustomerServices] = useState<string[]>(
|
||||
initialData.selectedCustomerServices || [],
|
||||
)
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
|
||||
// 模拟设备数据
|
||||
const devices: Device[] = [
|
||||
{ id: "1", name: "设备 1", status: "online" },
|
||||
{ id: "2", name: "设备 2", status: "online" },
|
||||
{ id: "3", name: "设备 3", status: "offline" },
|
||||
{ id: "4", name: "设备 4", status: "online" },
|
||||
{ id: "5", name: "设备 5", status: "offline" },
|
||||
]
|
||||
|
||||
// 模拟客服数据
|
||||
const customerServices: CustomerService[] = [
|
||||
{ id: "1", name: "客服 A", status: "online" },
|
||||
{ id: "2", name: "客服 B", status: "online" },
|
||||
{ id: "3", name: "客服 C", status: "offline" },
|
||||
{ id: "4", name: "客服 D", status: "online" },
|
||||
]
|
||||
|
||||
const filteredDevices = devices.filter((device) => device.name.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
|
||||
const filteredCustomerServices = customerServices.filter((cs) =>
|
||||
cs.name.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
)
|
||||
|
||||
const toggleDevice = (id: string) => {
|
||||
setSelectedDevices((prev) => (prev.includes(id) ? prev.filter((deviceId) => deviceId !== id) : [...prev, id]))
|
||||
}
|
||||
|
||||
const toggleCustomerService = (id: string) => {
|
||||
setSelectedCustomerServices((prev) => (prev.includes(id) ? prev.filter((csId) => csId !== id) : [...prev, id]))
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
onNext({
|
||||
selectedDevices,
|
||||
selectedCustomerServices,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm">
|
||||
<h2 className="text-xl font-bold mb-6">目标设置</h2>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
|
||||
<Input
|
||||
placeholder="搜索设备或客服"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="devices" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2 mb-4">
|
||||
<TabsTrigger value="devices">设备选择</TabsTrigger>
|
||||
<TabsTrigger value="customerService">客服选择</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="devices" className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{filteredDevices.map((device) => (
|
||||
<Card
|
||||
key={device.id}
|
||||
className={`cursor-pointer border ${selectedDevices.includes(device.id) ? "border-blue-500" : "border-gray-200"}`}
|
||||
>
|
||||
<CardContent className="p-3 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar>
|
||||
<div
|
||||
className={`w-full h-full flex items-center justify-center ${device.status === "online" ? "bg-green-100" : "bg-gray-100"}`}
|
||||
>
|
||||
<span className={`text-sm ${device.status === "online" ? "text-green-600" : "text-gray-600"}`}>
|
||||
{device.name.substring(0, 1)}
|
||||
</span>
|
||||
</div>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="font-medium">{device.name}</p>
|
||||
<p className={`text-xs ${device.status === "online" ? "text-green-600" : "text-gray-500"}`}>
|
||||
{device.status === "online" ? "在线" : "离线"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Checkbox
|
||||
checked={selectedDevices.includes(device.id)}
|
||||
onCheckedChange={() => toggleDevice(device.id)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="customerService" className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{filteredCustomerServices.map((cs) => (
|
||||
<Card
|
||||
key={cs.id}
|
||||
className={`cursor-pointer border ${selectedCustomerServices.includes(cs.id) ? "border-blue-500" : "border-gray-200"}`}
|
||||
>
|
||||
<CardContent className="p-3 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar>
|
||||
<div
|
||||
className={`w-full h-full flex items-center justify-center ${cs.status === "online" ? "bg-green-100" : "bg-gray-100"}`}
|
||||
>
|
||||
<span className={`text-sm ${cs.status === "online" ? "text-green-600" : "text-gray-600"}`}>
|
||||
{cs.name.substring(0, 1)}
|
||||
</span>
|
||||
</div>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="font-medium">{cs.name}</p>
|
||||
<p className={`text-xs ${cs.status === "online" ? "text-green-600" : "text-gray-500"}`}>
|
||||
{cs.status === "online" ? "在线" : "离线"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Checkbox
|
||||
checked={selectedCustomerServices.includes(cs.id)}
|
||||
onCheckedChange={() => toggleCustomerService(cs.id)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="mt-8 flex justify-between">
|
||||
<Button variant="outline" onClick={onBack}>
|
||||
← 上一步
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={selectedDevices.length === 0 && selectedCustomerServices.length === 0}>
|
||||
下一步 →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Search } from "lucide-react"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Database } from "lucide-react"
|
||||
|
||||
interface TrafficPool {
|
||||
id: string
|
||||
name: string
|
||||
count: number
|
||||
description: string
|
||||
}
|
||||
|
||||
interface TrafficPoolStepProps {
|
||||
onSubmit: (data: any) => void
|
||||
onBack: () => void
|
||||
initialData?: any
|
||||
}
|
||||
|
||||
export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }: TrafficPoolStepProps) {
|
||||
const [selectedPools, setSelectedPools] = useState<string[]>(initialData.selectedPools || [])
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
// 模拟流量池数据
|
||||
const trafficPools: TrafficPool[] = [
|
||||
{ id: "1", name: "新客流量池", count: 1250, description: "新获取的客户流量" },
|
||||
{ id: "2", name: "高意向流量池", count: 850, description: "有购买意向的客户" },
|
||||
{ id: "3", name: "复购流量池", count: 620, description: "已购买过产品的客户" },
|
||||
{ id: "4", name: "活跃流量池", count: 1580, description: "近期活跃的客户" },
|
||||
{ id: "5", name: "沉睡流量池", count: 2300, description: "长期未活跃的客户" },
|
||||
]
|
||||
|
||||
const filteredPools = trafficPools.filter(
|
||||
(pool) =>
|
||||
pool.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
pool.description.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
)
|
||||
|
||||
const togglePool = (id: string) => {
|
||||
setSelectedPools((prev) => (prev.includes(id) ? prev.filter((poolId) => poolId !== id) : [...prev, id]))
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
// 这里可以添加实际的提交逻辑
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000)) // 模拟API请求
|
||||
|
||||
onSubmit({
|
||||
selectedPools,
|
||||
// 可以添加其他需要提交的数据
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("提交失败:", error)
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm">
|
||||
<h2 className="text-xl font-bold mb-6">流量池选择</h2>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
|
||||
<Input
|
||||
placeholder="搜索流量池"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mt-4">
|
||||
{filteredPools.map((pool) => (
|
||||
<Card
|
||||
key={pool.id}
|
||||
className={`cursor-pointer border ${selectedPools.includes(pool.id) ? "border-blue-500" : "border-gray-200"}`}
|
||||
onClick={() => togglePool(pool.id)}
|
||||
>
|
||||
<CardContent className="p-4 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
|
||||
<Database className="h-5 w-5 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{pool.name}</p>
|
||||
<p className="text-sm text-gray-500">{pool.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-sm text-gray-500">{pool.count} 人</span>
|
||||
<Checkbox
|
||||
checked={selectedPools.includes(pool.id)}
|
||||
onCheckedChange={() => togglePool(pool.id)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex justify-between">
|
||||
<Button variant="outline" onClick={onBack}>
|
||||
← 上一步
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={selectedPools.length === 0 || isSubmitting}>
|
||||
{isSubmitting ? "提交中..." : "完成"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -2,450 +2,106 @@
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { ChevronLeft, Users, Target, Settings, ArrowRight, ArrowLeft, Smartphone } from "lucide-react"
|
||||
import { ChevronLeft, Plus, Users, Database, Settings } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { TrafficPoolSelector } from "@/app/components/traffic-pool-selector"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
import { useToast } from "@/components/ui/use-toast"
|
||||
import StepIndicator from "./components/step-indicator"
|
||||
import BasicInfoStep from "./components/basic-info-step"
|
||||
import TargetSettingsStep from "./components/target-settings-step"
|
||||
import TrafficPoolStep from "./components/traffic-pool-step"
|
||||
|
||||
export default function NewTrafficDistributionPage() {
|
||||
export default function NewTrafficDistribution() {
|
||||
const router = useRouter()
|
||||
const [currentStep, setCurrentStep] = useState(1)
|
||||
const { toast } = useToast()
|
||||
const [currentStep, setCurrentStep] = useState(0)
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
description: "",
|
||||
priority: "high",
|
||||
autoDistribute: true,
|
||||
createAsPackage: false,
|
||||
packagePrice: 0,
|
||||
allDevices: false,
|
||||
newDevices: false,
|
||||
targetDevices: [] as string[],
|
||||
showDeviceSelector: false,
|
||||
selectedPool: "",
|
||||
isPoolSelectorOpen: false,
|
||||
selectedUsers: [],
|
||||
basicInfo: {},
|
||||
targetSettings: {},
|
||||
trafficPool: {},
|
||||
})
|
||||
|
||||
const updateFormData = (field: string, value: any) => {
|
||||
setFormData((prev) => {
|
||||
if (field.includes(".")) {
|
||||
const [parent, child] = field.split(".")
|
||||
return {
|
||||
...prev,
|
||||
[parent]: {
|
||||
...prev[parent as keyof typeof prev],
|
||||
[child]: value,
|
||||
},
|
||||
}
|
||||
}
|
||||
return { ...prev, [field]: value }
|
||||
})
|
||||
const steps = [
|
||||
{ id: 1, title: "基本信息", icon: <Plus className="h-6 w-6" /> },
|
||||
{ id: 2, title: "目标设置", icon: <Users className="h-6 w-6" /> },
|
||||
{ id: 3, title: "流量池选择", icon: <Database className="h-6 w-6" /> },
|
||||
]
|
||||
|
||||
const handleBasicInfoNext = (data: any) => {
|
||||
setFormData((prev) => ({ ...prev, basicInfo: data }))
|
||||
setCurrentStep(1)
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
if (currentStep === 1 && !formData.name) {
|
||||
toast({
|
||||
title: "请填写规则名称",
|
||||
description: "规则名称为必填项",
|
||||
variant: "destructive",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (currentStep === 2 && !formData.allDevices && (!formData.targetDevices || formData.targetDevices.length === 0)) {
|
||||
toast({
|
||||
title: "请选择设备",
|
||||
description: "请选择至少一台设备或选择所有设备",
|
||||
variant: "destructive",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (currentStep === 3 && !formData.selectedPool) {
|
||||
toast({
|
||||
title: "请选择流量池",
|
||||
description: "请选择一个流量池进行分发",
|
||||
variant: "destructive",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (currentStep < 3) {
|
||||
setCurrentStep((prev) => prev + 1)
|
||||
} else {
|
||||
handleSubmit()
|
||||
}
|
||||
const handleTargetSettingsNext = (data: any) => {
|
||||
setFormData((prev) => ({ ...prev, targetSettings: data }))
|
||||
setCurrentStep(2)
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
if (currentStep > 1) {
|
||||
setCurrentStep((prev) => prev - 1)
|
||||
} else {
|
||||
router.back()
|
||||
}
|
||||
const handleTargetSettingsBack = () => {
|
||||
setCurrentStep(0)
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
toast({
|
||||
title: "创建成功",
|
||||
description: "流量分发规则已创建",
|
||||
})
|
||||
router.push("/workspace/traffic-distribution")
|
||||
const handleTrafficPoolBack = () => {
|
||||
setCurrentStep(1)
|
||||
}
|
||||
|
||||
const handleSubmit = async (data: any) => {
|
||||
const finalData = {
|
||||
...formData,
|
||||
trafficPool: data,
|
||||
}
|
||||
|
||||
try {
|
||||
// 这里可以添加实际的API调用
|
||||
console.log("提交的数据:", finalData)
|
||||
|
||||
toast({
|
||||
title: "创建成功",
|
||||
description: "流量分发规则已成功创建",
|
||||
})
|
||||
|
||||
// 跳转到列表页
|
||||
router.push("/workspace/traffic-distribution")
|
||||
} catch (error) {
|
||||
console.error("提交失败:", error)
|
||||
toast({
|
||||
title: "创建失败",
|
||||
description: "请稍后重试",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 bg-white min-h-screen">
|
||||
<header className="sticky top-0 z-10 bg-white border-b">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button variant="ghost" size="icon" onClick={handleBack}>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h1 className="text-lg font-medium">新建流量分发</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-4 max-w-3xl mx-auto">
|
||||
{/* 步骤指示器 */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
{[
|
||||
{ step: 1, title: "规则设定", icon: <Settings className="h-4 w-4" /> },
|
||||
{ step: 2, title: "选择设备", icon: <Smartphone className="h-4 w-4" /> },
|
||||
{ step: 3, title: "选择流量池", icon: <Users className="h-4 w-4" /> },
|
||||
].map(({ step, title, icon }) => (
|
||||
<div key={step} className="flex flex-col items-center">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||
step === currentStep
|
||||
? "bg-blue-600 text-white"
|
||||
: step < currentStep
|
||||
? "bg-green-500 text-white"
|
||||
: "bg-gray-200 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{step < currentStep ? "✓" : icon}
|
||||
</div>
|
||||
<span className="text-xs mt-1">{title}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative mt-2">
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-gray-200"></div>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-1 bg-blue-600 transition-all"
|
||||
style={{ width: `${((currentStep - 1) / 2) * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="container max-w-md mx-auto pb-20">
|
||||
<div className="sticky top-0 bg-white z-10 pb-2">
|
||||
<div className="flex items-center py-4 border-b">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.back()} className="mr-2">
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h1 className="text-lg font-bold">新建流量分发</h1>
|
||||
<Button variant="ghost" size="icon" className="ml-auto">
|
||||
<Settings className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 步骤1：规则设定 */}
|
||||
{currentStep === 1 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>规则设定</CardTitle>
|
||||
<CardDescription>设置流量分发的基本规则和优先级</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">
|
||||
规则名称 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder="输入分发规则名称"
|
||||
value={formData.name}
|
||||
onChange={(e) => updateFormData("name", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">规则描述</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="简要描述该分发规则的目标和用途"
|
||||
value={formData.description}
|
||||
onChange={(e) => updateFormData("description", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium">优先级</h3>
|
||||
<RadioGroup
|
||||
value={formData.priority || "high"}
|
||||
onValueChange={(value) => updateFormData("priority", value)}
|
||||
className="space-y-3"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="high" id="high-priority" />
|
||||
<Label htmlFor="high-priority" className="cursor-pointer">
|
||||
高优先
|
||||
</Label>
|
||||
<span className="text-xs text-gray-500 ml-2">(高优先级规则将优先执行)</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="low" id="low-priority" />
|
||||
<Label htmlFor="low-priority" className="cursor-pointer">
|
||||
低优先
|
||||
</Label>
|
||||
<span className="text-xs text-gray-500 ml-2">(当高优先级规则不匹配时执行)</span>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="autoDistribute">自动分发</Label>
|
||||
<Switch
|
||||
id="autoDistribute"
|
||||
checked={formData.autoDistribute !== false}
|
||||
onCheckedChange={(checked) => updateFormData("autoDistribute", checked)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">启用后，系统将自动按规则分发流量；关闭则需手动触发分发</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="createAsPackage">创建为流量包</Label>
|
||||
<Switch
|
||||
id="createAsPackage"
|
||||
checked={formData.createAsPackage || false}
|
||||
onCheckedChange={(checked) => updateFormData("createAsPackage", checked)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">启用后，可创建为可售卖流量包并设置价格</p>
|
||||
</div>
|
||||
|
||||
{formData.createAsPackage && (
|
||||
<div className="space-y-2 pl-4 border-l-2 border-blue-100">
|
||||
<Label htmlFor="packagePrice">流量包价格 (元/包)</Label>
|
||||
<Input
|
||||
id="packagePrice"
|
||||
type="number"
|
||||
placeholder="输入价格"
|
||||
value={formData.packagePrice || ""}
|
||||
onChange={(e) => updateFormData("packagePrice", Number.parseFloat(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pt-4 flex justify-end">
|
||||
<Button onClick={handleNext}>
|
||||
下一步
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 步骤2：选择设备 */}
|
||||
{currentStep === 2 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>选择设备</CardTitle>
|
||||
<CardDescription>选择需要接收流量的设备</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="allDevices"
|
||||
checked={formData.allDevices || false}
|
||||
onCheckedChange={(checked) => {
|
||||
updateFormData("allDevices", checked === true)
|
||||
if (checked) updateFormData("targetDevices", [])
|
||||
}}
|
||||
/>
|
||||
<Label htmlFor="allDevices" className="font-medium">
|
||||
所有设备
|
||||
</Label>
|
||||
<span className="text-xs text-gray-500">(系统自动分配流量到所有在线设备)</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="newDevices"
|
||||
checked={formData.newDevices || false}
|
||||
onCheckedChange={(checked) => updateFormData("newDevices", checked === true)}
|
||||
disabled={formData.allDevices}
|
||||
/>
|
||||
<Label htmlFor="newDevices" className="font-medium">
|
||||
新添加设备
|
||||
</Label>
|
||||
<span className="text-xs text-gray-500">(仅针对新添加设备进行流量分发)</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 pt-4">
|
||||
<Label className="font-medium">指定设备</Label>
|
||||
<p className="text-xs text-gray-500 mb-2">选择特定的设备进行流量分发</p>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
disabled={formData.allDevices}
|
||||
onClick={() => updateFormData("showDeviceSelector", true)}
|
||||
>
|
||||
<Smartphone className="mr-2 h-4 w-4" />
|
||||
选择设备
|
||||
{formData.targetDevices?.length > 0 && (
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
已选 {formData.targetDevices.length} 台
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-between">
|
||||
<Button variant="outline" onClick={handleBack}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={handleNext}>
|
||||
下一步
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 步骤3：选择流量池 */}
|
||||
{currentStep === 3 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>选择流量池</CardTitle>
|
||||
<CardDescription>选择需要分发的流量池</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* 普通流量包 */}
|
||||
<Card
|
||||
className={`cursor-pointer hover:border-blue-400 transition-colors ${
|
||||
formData.selectedPool === "normal" ? "border-blue-500 bg-blue-50" : ""
|
||||
}`}
|
||||
onClick={() => updateFormData("selectedPool", "normal")}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">普通流量包</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500">价格:</span>
|
||||
<span className="font-medium">0.50元/流量包</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500">总添加人数:</span>
|
||||
<span className="font-medium">10人</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
<Badge variant="outline">新用户</Badge>
|
||||
<Badge variant="outline">低活跃度</Badge>
|
||||
<Badge variant="outline">全国</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 高质量流量 */}
|
||||
<Card
|
||||
className={`cursor-pointer hover:border-blue-400 transition-colors ${
|
||||
formData.selectedPool === "high" ? "border-blue-500 bg-blue-50" : ""
|
||||
}`}
|
||||
onClick={() => updateFormData("selectedPool", "high")}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">高质量流量</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500">价格:</span>
|
||||
<span className="font-medium">2.50元/流量包</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500">总添加人数:</span>
|
||||
<span className="font-medium">25人</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
<Badge variant="outline">高消费</Badge>
|
||||
<Badge variant="outline">高活跃度</Badge>
|
||||
<Badge variant="outline">一线城市</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 精准营销流量 */}
|
||||
<Card
|
||||
className={`cursor-pointer hover:border-blue-400 transition-colors ${
|
||||
formData.selectedPool === "precise" ? "border-blue-500 bg-blue-50" : ""
|
||||
}`}
|
||||
onClick={() => updateFormData("selectedPool", "precise")}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">精准营销流量</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500">价格:</span>
|
||||
<span className="font-medium">3.80元/流量包</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500">总添加人数:</span>
|
||||
<span className="font-medium">50人</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
<Badge variant="outline">潜在客户</Badge>
|
||||
<Badge variant="outline">有购买意向</Badge>
|
||||
<Badge variant="outline">华东地区</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<Button variant="outline" className="w-full" onClick={() => updateFormData("isPoolSelectorOpen", true)}>
|
||||
<Target className="mr-2 h-4 w-4" />
|
||||
从流量池中挑选特定标签用户
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-between">
|
||||
<Button variant="outline" onClick={handleBack}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={!formData.selectedPool}>
|
||||
完成创建
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<StepIndicator currentStep={currentStep} steps={steps} />
|
||||
</div>
|
||||
|
||||
{/* 流量池选择器 */}
|
||||
<TrafficPoolSelector
|
||||
open={formData.isPoolSelectorOpen}
|
||||
onOpenChange={(open) => updateFormData("isPoolSelectorOpen", open)}
|
||||
selectedUsers={formData.selectedUsers}
|
||||
onSelect={(users) => updateFormData("selectedUsers", users)}
|
||||
/>
|
||||
<div className="mt-4">
|
||||
{currentStep === 0 && <BasicInfoStep onNext={handleBasicInfoNext} initialData={formData.basicInfo} />}
|
||||
|
||||
{currentStep === 1 && (
|
||||
<TargetSettingsStep
|
||||
onNext={handleTargetSettingsNext}
|
||||
onBack={handleTargetSettingsBack}
|
||||
initialData={formData.targetSettings}
|
||||
/>
|
||||
)}
|
||||
|
||||
{currentStep === 2 && (
|
||||
<TrafficPoolStep onSubmit={handleSubmit} onBack={handleTrafficPoolBack} initialData={formData.trafficPool} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,24 +5,23 @@ import { useRouter } from "next/navigation"
|
||||
import {
|
||||
ChevronLeft,
|
||||
Plus,
|
||||
Filter,
|
||||
Search,
|
||||
RefreshCw,
|
||||
MoreVertical,
|
||||
Clock,
|
||||
MoreHorizontal,
|
||||
Play,
|
||||
Pause,
|
||||
Edit,
|
||||
Trash2,
|
||||
Eye,
|
||||
TrendingUp,
|
||||
Users,
|
||||
Trash2,
|
||||
Database,
|
||||
Clock,
|
||||
} from "lucide-react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import Link from "next/link"
|
||||
import BottomNav from "@/app/components/BottomNav"
|
||||
|
||||
interface DistributionPlan {
|
||||
id: string
|
||||
@@ -33,6 +32,8 @@ interface DistributionPlan {
|
||||
targetGroups: string[]
|
||||
totalUsers: number
|
||||
dailyAverage: number
|
||||
deviceCount: number
|
||||
poolCount: number
|
||||
lastUpdated: string
|
||||
createTime: string
|
||||
creator: string
|
||||
@@ -40,9 +41,6 @@ interface DistributionPlan {
|
||||
|
||||
export default function TrafficDistributionPage() {
|
||||
const router = useRouter()
|
||||
const [showFilterDialog, setShowFilterDialog] = useState(false)
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [sourceFilter, setSourceFilter] = useState("all")
|
||||
const [plans, setPlans] = useState<DistributionPlan[]>([
|
||||
{
|
||||
id: "1",
|
||||
@@ -53,6 +51,8 @@ export default function TrafficDistributionPage() {
|
||||
targetGroups: ["新客户", "潜在客户"],
|
||||
totalUsers: 1250,
|
||||
dailyAverage: 85,
|
||||
deviceCount: 3,
|
||||
poolCount: 2,
|
||||
lastUpdated: "2024-03-18 10:30:00",
|
||||
createTime: "2024-03-10 08:30:00",
|
||||
creator: "admin",
|
||||
@@ -66,6 +66,8 @@ export default function TrafficDistributionPage() {
|
||||
targetGroups: ["女性用户", "美妆爱好者"],
|
||||
totalUsers: 980,
|
||||
dailyAverage: 65,
|
||||
deviceCount: 2,
|
||||
poolCount: 1,
|
||||
lastUpdated: "2024-03-17 14:20:00",
|
||||
createTime: "2024-03-12 09:15:00",
|
||||
creator: "marketing",
|
||||
@@ -79,16 +81,16 @@ export default function TrafficDistributionPage() {
|
||||
targetGroups: ["老客户", "会员"],
|
||||
totalUsers: 2340,
|
||||
dailyAverage: 0,
|
||||
deviceCount: 5,
|
||||
poolCount: 3,
|
||||
lastUpdated: "2024-03-15 09:45:00",
|
||||
createTime: "2024-02-28 11:20:00",
|
||||
creator: "social",
|
||||
},
|
||||
])
|
||||
|
||||
// 根据筛选条件过滤计划
|
||||
const filteredPlans = plans
|
||||
.filter((plan) => searchQuery === "" || plan.name.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
.filter((plan) => sourceFilter === "all" || plan.source === sourceFilter)
|
||||
// 直接使用plans而不是filteredPlans
|
||||
const plansList = plans
|
||||
|
||||
const handleDelete = (planId: string) => {
|
||||
setPlans(plans.filter((plan) => plan.id !== planId))
|
||||
@@ -111,7 +113,7 @@ export default function TrafficDistributionPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 bg-gray-50 min-h-screen">
|
||||
<div className="flex-1 bg-gray-50 min-h-screen pb-16">
|
||||
<header className="sticky top-0 z-10 bg-white border-b">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
@@ -130,136 +132,120 @@ export default function TrafficDistributionPage() {
|
||||
</header>
|
||||
|
||||
<div className="p-4">
|
||||
<Card className="p-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="搜索分发计划"
|
||||
className="pl-9"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="icon" onClick={() => setShowFilterDialog(true)}>
|
||||
<Filter className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon">
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
{plansList.length === 0 ? (
|
||||
<div className="text-center py-12 bg-white rounded-lg border mt-4">
|
||||
<div className="text-gray-500">暂无数据</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
onClick={() => router.push("/workspace/traffic-distribution/new")}
|
||||
>
|
||||
创建分发计划
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="space-y-4">
|
||||
{filteredPlans.length === 0 ? (
|
||||
<div className="text-center py-12 bg-white rounded-lg border">
|
||||
<div className="text-gray-500">暂无数据</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
onClick={() => router.push("/workspace/traffic-distribution/new")}
|
||||
>
|
||||
创建分发计划
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
filteredPlans.map((plan) => (
|
||||
<Card key={plan.id} className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xl mr-1">{plan.sourceIcon}</span>
|
||||
<h3 className="font-medium">{plan.name}</h3>
|
||||
<Badge variant={plan.status === "active" ? "success" : "secondary"}>
|
||||
{plan.status === "active" ? "进行中" : "已暂停"}
|
||||
</Badge>
|
||||
) : (
|
||||
<div className="space-y-4 mt-2">
|
||||
{plansList.map((plan) => (
|
||||
<Card key={plan.id} className="overflow-hidden">
|
||||
{/* 卡片头部 */}
|
||||
<div className="p-4 bg-white border-b flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="text-2xl">{plan.sourceIcon}</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-lg">{plan.name}</h3>
|
||||
<div className="flex items-center space-x-2 mt-1">
|
||||
<Badge variant={plan.status === "active" ? "success" : "secondary"}>
|
||||
{plan.status === "active" ? "进行中" : "已暂停"}
|
||||
</Badge>
|
||||
{plan.targetGroups.map((group, index) => (
|
||||
<Badge key={index} variant="outline">
|
||||
{group}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch checked={plan.status === "active"} onCheckedChange={() => togglePlanStatus(plan.id)} />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem onClick={() => handleView(plan.id)}>
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
查看
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleEdit(plan.id)}>
|
||||
<TrendingUp className="h-4 w-4 mr-2" />
|
||||
编辑
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(plan.id)}>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
删除
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleView(plan.id)}>
|
||||
<Eye className="mr-2 h-4 w-4" />
|
||||
查看详情
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleEdit(plan.id)}>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
编辑计划
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => togglePlanStatus(plan.id)}>
|
||||
{plan.status === "active" ? (
|
||||
<>
|
||||
<Pause className="mr-2 h-4 w-4" />
|
||||
暂停计划
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
启动计划
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(plan.id)} className="text-red-600">
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
删除计划
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{/* 卡片内容 - 上3下2布局，图标在文字左侧 */}
|
||||
<div className="bg-white">
|
||||
<div className="grid grid-cols-3">
|
||||
<div className="p-3 text-center border-r border-gray-200">
|
||||
<div className="text-lg font-semibold">{plan.dailyAverage}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">日均分发人数</div>
|
||||
</div>
|
||||
<div className="p-3 text-center border-r border-gray-200">
|
||||
<div className="text-lg font-semibold">{plan.deviceCount}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">分发设备</div>
|
||||
</div>
|
||||
<div className="p-3 text-center">
|
||||
<div className="text-lg font-semibold">{plan.poolCount}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">流量池</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 横向分隔线 */}
|
||||
<div className="border-t border-gray-200 mx-auto w-full" style={{height: 0}} />
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="p-3 text-center border-r border-gray-200">
|
||||
<div className="text-lg font-semibold">{plan.dailyAverage}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">日均分发量</div>
|
||||
</div>
|
||||
<div className="p-3 text-center">
|
||||
<div className="text-lg font-semibold">{plan.totalUsers}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">总流量池数量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div className="text-sm text-gray-500">
|
||||
<div>目标人群：{plan.targetGroups.join(", ")}</div>
|
||||
<div>总流量：{plan.totalUsers} 人</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
<div>日均获取：{plan.dailyAverage} 人</div>
|
||||
<div>创建人：{plan.creator}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
|
||||
{/* 底部信息 */}
|
||||
<div className="p-3 bg-gray-50 text-sm text-gray-500 flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<Clock className="w-4 h-4 mr-1" />
|
||||
上次更新：{plan.lastUpdated}
|
||||
<Clock className="h-4 w-4 mr-1" />
|
||||
<span>上次执行: {plan.lastUpdated.split(" ")[0]}</span>
|
||||
</div>
|
||||
<div>创建时间：{plan.createTime}</div>
|
||||
<div>创建人: {plan.creator}</div>
|
||||
</div>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 筛选弹窗 */}
|
||||
<Dialog open={showFilterDialog} onOpenChange={setShowFilterDialog}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>筛选分发计划</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">流量来源</label>
|
||||
<Select value={sourceFilter} onValueChange={setSourceFilter}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择流量来源" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部来源</SelectItem>
|
||||
<SelectItem value="douyin">抖音</SelectItem>
|
||||
<SelectItem value="xiaohongshu">小红书</SelectItem>
|
||||
<SelectItem value="wechat">微信</SelectItem>
|
||||
<SelectItem value="weibo">微博</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-2 pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setSourceFilter("all")
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
<Button onClick={() => setShowFilterDialog(false)}>应用筛选</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</div>
|
||||
<BottomNav />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -97,7 +97,7 @@ export const request = async <T>(
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('userInfo');
|
||||
// 使用 window.location 进行一次性重定向
|
||||
window.location.href = '/login';
|
||||
window.location.href = '/login';
|
||||
}
|
||||
throw new Error(result.msg || '登录已过期，请重新登录');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user