fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 本次提交更新内容如下 同步

Browse Source
This commit is contained in:
笔记本里的永平
2025-07-09 17:45:40 +08:00
parent ee61cf54a2
commit a86996ab28
4 changed files with 526 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
nkebao/package-lock.json generated
View File

@@ -30,7 +30,7 @@
"@radix-ui/react-scroll-area": "latest",
"@radix-ui/react-select": "latest",
"@radix-ui/react-separator": "^1.1.1",
"@radix-ui/react-slider": "latest",
"@radix-ui/react-slider": "^1.3.5",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-switch": "latest",
"@radix-ui/react-tabs": "latest",
@@ -58,7 +58,7 @@
"date-fns": "latest",
"embla-carousel-react": "8.5.1",
"input-otp": "1.4.1",
"lucide-react": "^0.454.0",
"lucide-react": "^0.525.0",
"react": "^18.2.0",
"react-day-picker": "latest",
"react-dom": "^18.2.0",
@@ -70,7 +70,7 @@
"recharts": "latest",
"regenerator-runtime": "latest",
"sonner": "^1.7.4",
"tailwind-merge": "^2.5.5",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7",
"tdesign-mobile-react": "^0.16.0",
"vaul": "^0.9.6",
@@ -4581,7 +4581,7 @@
},
"node_modules/@radix-ui/react-slider": {
"version": "1.3.5",
"resolved": "https://registry.npmmirror.com/@radix-ui/react-slider/-/react-slider-1.3.5.tgz",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.5.tgz",
"integrity": "sha512-rkfe2pU2NBAYfGaxa3Mqosi7VZEWX5CxKaanRv0vZd4Zhl9fvQrg0VM93dv3xGLGfrHuoTRF3JXH8nb9g+B3fw==",
"license": "MIT",
"dependencies": {
@@ -8022,7 +8022,7 @@
},
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmmirror.com/clsx/-/clsx-2.1.1.tgz",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"license": "MIT",
"engines": {
@@ -14297,12 +14297,12 @@
}
},
"node_modules/lucide-react": {
"version": "0.454.0",
"resolved": "https://registry.npmmirror.com/lucide-react/-/lucide-react-0.454.0.tgz",
"integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==",
"version": "0.525.0",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz",
"integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==",
"license": "ISC",
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/lz-string": {
@@ -19362,7 +19362,7 @@
},
"node_modules/tailwind-merge": {
"version": "2.6.0",
"resolved": "https://registry.npmmirror.com/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
"integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
"license": "MIT",
"funding": {

4
nkebao/package.json
View File

@@ -25,7 +25,7 @@
"@radix-ui/react-scroll-area": "latest",
"@radix-ui/react-select": "latest",
"@radix-ui/react-separator": "^1.1.1",
"@radix-ui/react-slider": "latest",
"@radix-ui/react-slider": "^1.3.5",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-switch": "latest",
"@radix-ui/react-tabs": "latest",
@@ -65,7 +65,7 @@
"recharts": "latest",
"regenerator-runtime": "latest",
"sonner": "^1.7.4",
"tailwind-merge": "^2.5.5",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7",
"tdesign-mobile-react": "^0.16.0",
"vaul": "^0.9.6",

418
nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import {
Plus,
@@ -9,17 +9,9 @@ import {
Clock,
Edit,
Trash2,
Eye,
Copy,
ChevronDown,
ChevronUp,
Settings,
// Calendar,
Pause,
Users,
Share2,
// CheckCircle,
// XCircle,
TrendingUp,
} from 'lucide-react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
@@ -27,12 +19,13 @@ 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';
// 不再使用 DropdownMenu 组件
// 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';
@@ -61,18 +54,19 @@ interface DistributionRule {
export default function TrafficDistribution() {
const navigate = useNavigate();
const { toast } = useToast();
const [expandedRuleId, setExpandedRuleId] = useState<string | null>(null);
// 移除expandedRuleId状态
const [searchTerm, setSearchTerm] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [tasks, setTasks] = useState<DistributionRule[]>([
{
id: '1',
name: 'VIP客户流量分发',
deviceCount: 3,
totalTraffic: 1000,
distributedTraffic: 756,
lastDistributionTime: '2025-02-06 13:12:35',
name: '流量分发',
deviceCount: 2,
totalTraffic: 2,
distributedTraffic: 125,
lastDistributionTime: '2025-07-02 09:00',
createTime: '2024-11-20 19:04:14',
creator: 'admin',
creator: '售前',
status: 'running',
distributionInterval: 300,
maxDistributionPerDay: 2000,
@@ -86,32 +80,9 @@ export default function TrafficDistribution() {
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);
@@ -169,7 +140,67 @@ export default function TrafficDistribution() {
const handleCreateNew = () => {
navigate('/workspace/traffic-distribution/new');
toast({
title: '创建新分发',
description: '正在前往创建页面',
});
};
// 添加卡片菜单组件
type CardMenuProps = {
onEdit: () => void;
onPause: () => void;
onDelete: () => void;
};
function CardMenu({ onEdit, onPause, onDelete }: CardMenuProps) {
const [open, setOpen] = useState(false);
const menuRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
setOpen(false);
}
}
if (open) document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, [open]);
return (
<div style={{ position: "relative" }}>
<button onClick={() => setOpen((v) => !v)} style={{ background: "none", border: "none", padding: 0, margin: 0, cursor: "pointer" }}>
<MoreVertical className="h-4 w-4" />
</button>
{open && (
<div
ref={menuRef}
style={{
position: "absolute",
right: 0,
top: 28,
background: "#fff",
borderRadius: 8,
boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
zIndex: 100,
minWidth: 120,
padding: 4,
}}
>
<div onClick={() => { onEdit(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
<Edit className="h-4 w-4 mr-2" />编辑计划
</div>
<div onClick={() => { onPause(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
<Pause className="h-4 w-4 mr-2" />暂停计划
</div>
<div onClick={() => { onDelete(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, color: "#e53e3e", transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
<Trash2 className="h-4 w-4 mr-2" />删除计划
</div>
</div>
)}
</div>
);
}
const filteredRules = tasks.filter((rule) =>
rule.name.toLowerCase().includes(searchTerm.toLowerCase()),
@@ -201,31 +232,32 @@ export default function TrafficDistribution() {
}
};
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';
}
};
// 模拟加载数据
useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
try {
// 这里可以添加实际的API调用
// const response = await fetch('/api/traffic-distribution');
// const data = await response.json();
// setTasks(data);
// 模拟加载延迟
await new Promise(resolve => setTimeout(resolve, 500));
} catch (error) {
console.error('获取流量分发数据失败:', error);
toast({
title: '获取数据失败',
description: '无法获取流量分发数据，请稍后重试',
variant: 'destructive',
});
} finally {
setIsLoading(false);
}
};
const getPriorityText = (priority: string) => {
switch (priority) {
case 'high':
return '高';
case 'medium':
return '中';
case 'low':
return '低';
default:
return '未知';
}
};
fetchData();
}, [toast]);
return (
<Layout
@@ -234,9 +266,9 @@ export default function TrafficDistribution() {
title="流量分发"
defaultBackPath="/workspace"
rightContent={
<Button onClick={handleCreateNew}>
<Button onClick={handleCreateNew} className="bg-blue-600 hover:bg-blue-700">
<Plus className="h-4 w-4 mr-2" />
新建规则
新建分发
</Button>
}
/>
@@ -251,7 +283,7 @@ export default function TrafficDistribution() {
<div className="relative flex-1">
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
<Input
placeholder="搜索规则名称"
placeholder="搜索计划名称"
className="pl-9"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
@@ -260,7 +292,7 @@ export default function TrafficDistribution() {
<Button variant="outline" size="icon">
<Filter className="h-4 w-4" />
</Button>
<Button variant="outline" size="icon">
<Button variant="outline" size="icon" onClick={() => window.location.reload()}>
<RefreshCw className="h-4 w-4" />
</Button>
</div>
@@ -268,189 +300,81 @@ export default function TrafficDistribution() {
{/* 规则列表 */}
<div className="space-y-4">
{filteredRules.length === 0 ? (
{isLoading ? (
// 加载状态
<div className="flex justify-center items-center py-12">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
) : 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>
<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">
<Card key={rule.id} className="overflow-hidden">
<div className="p-4 border-b">
<div className="flex items-center justify-between">
<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 className="flex items-center space-x-2">
<Badge className="bg-blue-100 text-blue-800 rounded-full px-3">
进行中
</Badge>
<Switch
checked={rule.status === 'running'}
onCheckedChange={() => toggleRuleStatus(rule.id)}
disabled={rule.status === 'completed'}
/>
<CardMenu
onEdit={() => handleEdit(rule.id)}
onPause={() => toggleRuleStatus(rule.id)}
onDelete={() => handleDelete(rule.id)}
/>
</div>
</div>
)}
</div>
{/* 统计数据 - 第一行 */}
<div className="grid grid-cols-3 divide-x text-center">
<div className="py-3">
<div className="text-2xl font-bold">2</div>
<div className="text-xs text-gray-500 mt-1">分发账号</div>
</div>
<div className="py-3">
<div className="text-2xl font-bold">7</div>
<div className="text-xs text-gray-500 mt-1">分发设备</div>
</div>
<div className="py-3">
<div className="text-2xl font-bold">ALL</div>
<div className="text-xs text-gray-500 mt-1">流量池</div>
</div>
</div>
{/* 统计数据 - 第二行 */}
<div className="grid grid-cols-2 divide-x text-center border-t">
<div className="py-3">
<div className="text-2xl font-bold">125</div>
<div className="text-xs text-gray-500 mt-1">日均分发量</div>
</div>
<div className="py-3">
<div className="text-2xl font-bold">2</div>
<div className="text-xs text-gray-500 mt-1">总流量池数量</div>
</div>
</div>
{/* 底部信息 */}
<div className="flex items-center justify-between text-xs text-gray-500 p-3 border-t">
<div className="flex items-center">
<Clock className="w-4 h-4 mr-1" />
上次执行: {rule.lastDistributionTime}
</div>
<div>创建人: {rule.creator}</div>
</div>
</Card>
))
)}

571
nkebao/yarn.lock
View File

File diff suppressed because it is too large Load Diff