feat: 本次提交更新内容如下
修复
This commit is contained in:
笔记本里的永平
@@ -1,5 +1,462 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Plus,
|
||||
Filter,
|
||||
Search,
|
||||
RefreshCw,
|
||||
MoreVertical,
|
||||
Clock,
|
||||
Edit,
|
||||
Trash2,
|
||||
Eye,
|
||||
Copy,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Settings,
|
||||
Calendar,
|
||||
Users,
|
||||
Share2,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
TrendingUp,
|
||||
} 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 { Switch } from '@/components/ui/switch';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import Layout from '@/components/Layout';
|
||||
import PageHeader from '@/components/PageHeader';
|
||||
import BottomNav from '@/components/BottomNav';
|
||||
import { useToast } from '@/components/ui/toast';
|
||||
import '@/components/Layout.css';
|
||||
|
||||
interface DistributionRule {
|
||||
id: string;
|
||||
name: string;
|
||||
status: 'running' | 'paused' | 'completed';
|
||||
deviceCount: number;
|
||||
totalTraffic: number;
|
||||
distributedTraffic: number;
|
||||
lastDistributionTime: string;
|
||||
createTime: string;
|
||||
creator: string;
|
||||
distributionInterval: number;
|
||||
maxDistributionPerDay: number;
|
||||
timeRange: { start: string; end: string };
|
||||
targetChannels: string[];
|
||||
distributionRatio: Record<string, number>;
|
||||
priority: 'high' | 'medium' | 'low';
|
||||
filterConditions: string[];
|
||||
}
|
||||
|
||||
export default function TrafficDistribution() {
|
||||
return <div>流量分配页</div>;
|
||||
const navigate = useNavigate();
|
||||
const { toast } = useToast();
|
||||
const [expandedRuleId, setExpandedRuleId] = useState<string | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [tasks, setTasks] = useState<DistributionRule[]>([
|
||||
{
|
||||
id: '1',
|
||||
name: 'VIP客户流量分发',
|
||||
deviceCount: 3,
|
||||
totalTraffic: 1000,
|
||||
distributedTraffic: 756,
|
||||
lastDistributionTime: '2025-02-06 13:12:35',
|
||||
createTime: '2024-11-20 19:04:14',
|
||||
creator: 'admin',
|
||||
status: 'running',
|
||||
distributionInterval: 300,
|
||||
maxDistributionPerDay: 2000,
|
||||
timeRange: { start: '08:00', end: '22:00' },
|
||||
targetChannels: ['抖音', '小红书', '公众号'],
|
||||
distributionRatio: {
|
||||
'抖音': 40,
|
||||
'小红书': 35,
|
||||
'公众号': 25,
|
||||
},
|
||||
priority: 'high',
|
||||
filterConditions: ['VIP客户', '高价值'],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '新客户流量分发',
|
||||
deviceCount: 2,
|
||||
totalTraffic: 500,
|
||||
distributedTraffic: 234,
|
||||
lastDistributionTime: '2024-03-04 14:09:35',
|
||||
createTime: '2024-03-04 14:29:04',
|
||||
creator: 'manager',
|
||||
status: 'paused',
|
||||
distributionInterval: 600,
|
||||
maxDistributionPerDay: 1000,
|
||||
timeRange: { start: '09:00', end: '21:00' },
|
||||
targetChannels: ['抖音', '快手'],
|
||||
distributionRatio: {
|
||||
'抖音': 60,
|
||||
'快手': 40,
|
||||
},
|
||||
priority: 'medium',
|
||||
filterConditions: ['新客户', '潜在客户'],
|
||||
},
|
||||
]);
|
||||
|
||||
const toggleExpand = (ruleId: string) => {
|
||||
setExpandedRuleId(expandedRuleId === ruleId ? null : ruleId);
|
||||
};
|
||||
|
||||
const handleDelete = (ruleId: string) => {
|
||||
const ruleToDelete = tasks.find((rule) => rule.id === ruleId);
|
||||
if (!ruleToDelete) return;
|
||||
|
||||
if (!window.confirm(`确定要删除"${ruleToDelete.name}"吗？`)) return;
|
||||
|
||||
setTasks(tasks.filter((rule) => rule.id !== ruleId));
|
||||
toast({
|
||||
title: '删除成功',
|
||||
description: '已成功删除分发规则',
|
||||
});
|
||||
};
|
||||
|
||||
const handleEdit = (ruleId: string) => {
|
||||
navigate(`/workspace/traffic-distribution/${ruleId}/edit`);
|
||||
};
|
||||
|
||||
const handleView = (ruleId: string) => {
|
||||
navigate(`/workspace/traffic-distribution/${ruleId}`);
|
||||
};
|
||||
|
||||
const handleCopy = (ruleId: string) => {
|
||||
const ruleToCopy = tasks.find((rule) => rule.id === ruleId);
|
||||
if (ruleToCopy) {
|
||||
const newRule = {
|
||||
...ruleToCopy,
|
||||
id: `${Date.now()}`,
|
||||
name: `${ruleToCopy.name} (复制)`,
|
||||
createTime: new Date().toISOString().replace('T', ' ').substring(0, 19),
|
||||
};
|
||||
setTasks([...tasks, newRule]);
|
||||
toast({
|
||||
title: '复制成功',
|
||||
description: '已成功复制分发规则',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const toggleRuleStatus = (ruleId: string) => {
|
||||
const rule = tasks.find((r) => r.id === ruleId);
|
||||
if (!rule) return;
|
||||
|
||||
setTasks(
|
||||
tasks.map((rule) =>
|
||||
rule.id === ruleId ? { ...rule, status: rule.status === 'running' ? 'paused' : 'running' } : rule,
|
||||
),
|
||||
);
|
||||
|
||||
toast({
|
||||
title: rule.status === 'running' ? '已暂停' : '已启动',
|
||||
description: `${rule.name}规则${rule.status === 'running' ? '已暂停' : '已启动'}`,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreateNew = () => {
|
||||
navigate('/workspace/traffic-distribution/new');
|
||||
};
|
||||
|
||||
const filteredRules = tasks.filter((rule) =>
|
||||
rule.name.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
);
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'running':
|
||||
return 'bg-green-100 text-green-800';
|
||||
case 'paused':
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
case 'completed':
|
||||
return 'bg-blue-100 text-blue-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'running':
|
||||
return '进行中';
|
||||
case 'paused':
|
||||
return '已暂停';
|
||||
case 'completed':
|
||||
return '已完成';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
const getPriorityColor = (priority: string) => {
|
||||
switch (priority) {
|
||||
case 'high':
|
||||
return 'bg-red-100 text-red-800';
|
||||
case 'medium':
|
||||
return 'bg-yellow-100 text-yellow-800';
|
||||
case 'low':
|
||||
return 'bg-green-100 text-green-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
const getPriorityText = (priority: string) => {
|
||||
switch (priority) {
|
||||
case 'high':
|
||||
return '高';
|
||||
case 'medium':
|
||||
return '中';
|
||||
case 'low':
|
||||
return '低';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<PageHeader
|
||||
title="流量分发"
|
||||
defaultBackPath="/workspace"
|
||||
rightContent={
|
||||
<Button onClick={handleCreateNew}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
新建规则
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
}
|
||||
footer={<BottomNav />}
|
||||
>
|
||||
<div className="bg-gray-50 min-h-screen pb-20">
|
||||
<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={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="icon">
|
||||
<Filter className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon">
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 规则列表 */}
|
||||
<div className="space-y-4">
|
||||
{filteredRules.length === 0 ? (
|
||||
<Card className="p-8 text-center">
|
||||
<Share2 className="h-12 w-12 text-gray-300 mx-auto mb-3" />
|
||||
<p className="text-gray-500 text-lg font-medium mb-2">暂无分发规则</p>
|
||||
<p className="text-gray-400 text-sm mb-4">创建您的第一个流量分发规则</p>
|
||||
<Button onClick={handleCreateNew}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
创建第一个规则
|
||||
</Button>
|
||||
</Card>
|
||||
) : (
|
||||
filteredRules.map((rule) => (
|
||||
<Card key={rule.id} className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<h3 className="font-medium">{rule.name}</h3>
|
||||
<Badge className={getStatusColor(rule.status)}>
|
||||
{getStatusText(rule.status)}
|
||||
</Badge>
|
||||
<Badge className={getPriorityColor(rule.priority)}>
|
||||
优先级: {getPriorityText(rule.priority)}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
checked={rule.status === 'running'}
|
||||
onCheckedChange={() => toggleRuleStatus(rule.id)}
|
||||
disabled={rule.status === 'completed'}
|
||||
/>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleView(rule.id)}>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
查看
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleEdit(rule.id)}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
编辑
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleCopy(rule.id)}>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
复制
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(rule.id)}>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
删除
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div className="text-sm text-gray-500">
|
||||
<div>执行设备：{rule.deviceCount} 个</div>
|
||||
<div>目标渠道：{rule.targetChannels.length} 个</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
<div>已分发：{rule.distributedTraffic}/{rule.totalTraffic}</div>
|
||||
<div>创建人：{rule.creator}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 分发进度 */}
|
||||
<div className="mb-4">
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span className="text-gray-500">分发进度</span>
|
||||
<span className="font-medium">
|
||||
{Math.round((rule.distributedTraffic / rule.totalTraffic) * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={(rule.distributedTraffic / rule.totalTraffic) * 100}
|
||||
className="h-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
|
||||
<div className="flex items-center">
|
||||
<Clock className="w-4 h-4 mr-1" />
|
||||
上次分发：{rule.lastDistributionTime}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span>创建时间：{rule.createTime}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="ml-2 p-0 h-6 w-6"
|
||||
onClick={() => toggleExpand(rule.id)}
|
||||
>
|
||||
{expandedRuleId === rule.id ? (
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expandedRuleId === rule.id && (
|
||||
<div className="mt-4 pt-4 border-t border-dashed">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center">
|
||||
<Settings className="h-5 w-5 mr-2 text-gray-500" />
|
||||
<h4 className="font-medium">基本设置</h4>
|
||||
</div>
|
||||
<div className="space-y-2 pl-7">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-500">分发间隔：</span>
|
||||
<span>{rule.distributionInterval} 秒</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-500">每日最大分发数：</span>
|
||||
<span>{rule.maxDistributionPerDay}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-500">执行时间段：</span>
|
||||
<span>
|
||||
{rule.timeRange.start} - {rule.timeRange.end}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-500">优先级：</span>
|
||||
<span>{getPriorityText(rule.priority)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center">
|
||||
<Share2 className="h-5 w-5 mr-2 text-gray-500" />
|
||||
<h4 className="font-medium">分发渠道</h4>
|
||||
</div>
|
||||
<div className="space-y-2 pl-7">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{rule.targetChannels.map((channel) => (
|
||||
<Badge key={channel} variant="outline" className="bg-gray-50">
|
||||
{channel}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center">
|
||||
<TrendingUp className="h-5 w-5 mr-2 text-gray-500" />
|
||||
<h4 className="font-medium">分发比例</h4>
|
||||
</div>
|
||||
<div className="space-y-2 pl-7">
|
||||
{Object.entries(rule.distributionRatio).map(([channel, ratio]) => (
|
||||
<div key={channel} className="flex justify-between text-sm">
|
||||
<span className="text-gray-500">{channel}：</span>
|
||||
<span>{ratio}%</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center">
|
||||
<Users className="h-5 w-5 mr-2 text-gray-500" />
|
||||
<h4 className="font-medium">筛选条件</h4>
|
||||
</div>
|
||||
<div className="space-y-2 pl-7">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{rule.filterConditions.map((condition) => (
|
||||
<Badge key={condition} variant="outline" className="bg-gray-50">
|
||||
{condition}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user