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

Merge branch 'yongpxu-dev' into yongpxu-master

Browse Source 
# Conflicts:
#	nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx   resolved by yongpxu-dev version
This commit is contained in:
笔记本里的永平
2025-07-09 20:48:55 +08:00
parent d04a593724 b785998c4d
commit a1383510e8
9 changed files with 1008 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
Cunkebao/app/workspace/traffic-distribution/new/components/basic-info-step.tsx
View File

@@ -8,13 +8,22 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Slider } from "@/components/ui/slider"
import { format } from "date-fns"
interface BasicInfoData {
name: string
distributionMethod: "equal" | "priority" | "ratio"
dailyLimit: number
timeRestriction: "allDay" | "custom"
startTime: string
endTime: string
}
interface BasicInfoStepProps {
onNext: (data: any) => void
initialData?: any
onNext: (data: BasicInfoData) => void
initialData?: Partial<BasicInfoData>
}
export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoStepProps) {
const [formData, setFormData] = useState({
const [formData, setFormData] = useState<BasicInfoData>({
name: initialData.name || `流量分发 ${format(new Date(), "yyyyMMdd HHmm")}`,
distributionMethod: initialData.distributionMethod || "equal",
dailyLimit: initialData.dailyLimit || 50,
@@ -23,7 +32,7 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
endTime: initialData.endTime || "18:00",
})
const handleChange = (field: string, value: any) => {
const handleChange = (field: keyof BasicInfoData, value: string | number) => {
setFormData((prev) => ({ ...prev, [field]: value }))
}
@@ -45,7 +54,6 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
value={formData.name}
onChange={(e) => handleChange("name", e.target.value)}
placeholder="请输入计划名称"
required
/>
</div>
@@ -53,7 +61,7 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
<Label>分配方式</Label>
<RadioGroup
value={formData.distributionMethod}
onValueChange={(value) => handleChange("distributionMethod", value)}
onValueChange={(value) => handleChange("distributionMethod", value as "equal" | "priority" | "ratio")}
className="space-y-2"
>
<div className="flex items-center space-x-2">
@@ -100,7 +108,7 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
<Label>时间限制</Label>
<RadioGroup
value={formData.timeRestriction}
onValueChange={(value) => handleChange("timeRestriction", value)}
onValueChange={(value) => handleChange("timeRestriction", value as "allDay" | "custom")}
className="space-y-4"
>
<div className="flex items-center space-x-2">

51
Cunkebao/app/workspace/traffic-distribution/new/components/step-indicator.tsx
View File

@@ -4,33 +4,44 @@ import type React from "react"
import { cn } from "@/lib/utils"
interface Step {
id: number
title: string
icon: React.ReactNode
}
interface StepIndicatorProps {
currentStep: number
steps: {
id: number
title: string
icon: React.ReactNode
}[]
steps: Step[]
}
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 className="flex justify-between items-center w-full mb-6 px-4 relative">
{/* 连接线 */}
<div className="absolute top-8 left-0 right-0 h-0.5 bg-gray-200 -z-10"></div>
{steps.map((step, index) => {
const isCompleted = index < currentStep
const isActive = index === currentStep
return (
<div key={step.id} className="flex flex-col items-center z-10">
<div
className={cn(
"w-16 h-16 rounded-full flex items-center justify-center mb-2",
isActive ? "bg-blue-500 text-white" :
isCompleted ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500",
)}
>
{step.icon}
</div>
<span className={cn("text-sm", isActive ? "text-blue-500 font-medium" : isCompleted ? "text-blue-500" : "text-gray-500")}>
{step.title}
</span>
</div>
<span className={cn("text-sm", currentStep === index ? "text-blue-500 font-medium" : "text-gray-500")}>
{step.title}
</span>
</div>
))}
)
})}
</div>
)
}

33
Cunkebao/app/workspace/traffic-distribution/new/components/target-settings-step.tsx
View File

@@ -23,10 +23,15 @@ interface CustomerService {
avatar?: string
}
interface TargetSettingsData {
selectedDevices: string[]
selectedCustomerServices: string[]
}
interface TargetSettingsStepProps {
onNext: (data: any) => void
onNext: (data: TargetSettingsData) => void
onBack: () => void
initialData?: any
initialData?: Partial<TargetSettingsData>
}
export default function TargetSettingsStep({ onNext, onBack, initialData = {} }: TargetSettingsStepProps) {
@@ -99,11 +104,12 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {} }:
<TabsContent value="devices" className="space-y-4">
<div className="grid grid-cols-1 gap-3">
{filteredDevices.map((device) => (
<Card
<div
key={device.id}
className={`cursor-pointer border ${selectedDevices.includes(device.id) ? "border-blue-500" : "border-gray-200"}`}
className={`cursor-pointer border rounded-lg ${selectedDevices.includes(device.id) ? "border-blue-500" : "border-gray-200"}`}
onClick={() => toggleDevice(device.id)}
>
<CardContent className="p-3 flex items-center justify-between">
<div className="p-3 flex items-center justify-between">
<div className="flex items-center space-x-3">
<Avatar>
<div
@@ -124,9 +130,10 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {} }:
<Checkbox
checked={selectedDevices.includes(device.id)}
onCheckedChange={() => toggleDevice(device.id)}
onClick={(e) => e.stopPropagation()}
/>
</CardContent>
</Card>
</div>
</div>
))}
</div>
</TabsContent>
@@ -134,11 +141,12 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {} }:
<TabsContent value="customerService" className="space-y-4">
<div className="grid grid-cols-1 gap-3">
{filteredCustomerServices.map((cs) => (
<Card
<div
key={cs.id}
className={`cursor-pointer border ${selectedCustomerServices.includes(cs.id) ? "border-blue-500" : "border-gray-200"}`}
className={`cursor-pointer border rounded-lg ${selectedCustomerServices.includes(cs.id) ? "border-blue-500" : "border-gray-200"}`}
onClick={() => toggleCustomerService(cs.id)}
>
<CardContent className="p-3 flex items-center justify-between">
<div className="p-3 flex items-center justify-between">
<div className="flex items-center space-x-3">
<Avatar>
<div
@@ -159,9 +167,10 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {} }:
<Checkbox
checked={selectedCustomerServices.includes(cs.id)}
onCheckedChange={() => toggleCustomerService(cs.id)}
onClick={(e) => e.stopPropagation()}
/>
</CardContent>
</Card>
</div>
</div>
))}
</div>
</TabsContent>

23
Cunkebao/app/workspace/traffic-distribution/new/components/traffic-pool-step.tsx
View File

@@ -2,11 +2,9 @@
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 { Search, Database } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Database } from "lucide-react"
interface TrafficPool {
id: string
@@ -15,10 +13,14 @@ interface TrafficPool {
description: string
}
interface TrafficPoolData {
selectedPools: string[]
}
interface TrafficPoolStepProps {
onSubmit: (data: any) => void
onSubmit: (data: TrafficPoolData) => void
onBack: () => void
initialData?: any
initialData?: Partial<TrafficPoolData>
}
export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }: TrafficPoolStepProps) {
@@ -54,7 +56,6 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }:
onSubmit({
selectedPools,
// 可以添加其他需要提交的数据
})
} catch (error) {
console.error("提交失败:", error)
@@ -81,12 +82,12 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }:
<div className="space-y-3 mt-4">
{filteredPools.map((pool) => (
<Card
<div
key={pool.id}
className={`cursor-pointer border ${selectedPools.includes(pool.id) ? "border-blue-500" : "border-gray-200"}`}
className={`cursor-pointer border rounded-lg ${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="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" />
@@ -104,8 +105,8 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }:
onClick={(e) => e.stopPropagation()}
/>
</div>
</CardContent>
</Card>
</div>
</div>
))}
</div>

41
Cunkebao/app/workspace/traffic-distribution/new/page.tsx
View File

@@ -10,28 +10,59 @@ import BasicInfoStep from "./components/basic-info-step"
import TargetSettingsStep from "./components/target-settings-step"
import TrafficPoolStep from "./components/traffic-pool-step"
// 定义类型
interface BasicInfoData {
name: string
distributionMethod: "equal" | "priority" | "ratio"
dailyLimit: number
timeRestriction: "allDay" | "custom"
startTime: string
endTime: string
}
interface TargetSettingsData {
selectedDevices: string[]
selectedCustomerServices: string[]
}
interface TrafficPoolData {
selectedPools: string[]
}
interface FormData {
basicInfo: Partial<BasicInfoData>
targetSettings: Partial<TargetSettingsData>
trafficPool: Partial<TrafficPoolData>
}
interface Step {
id: number
title: string
icon: React.ReactNode
}
export default function NewTrafficDistribution() {
const router = useRouter()
const { toast } = useToast()
const [currentStep, setCurrentStep] = useState(0)
const [formData, setFormData] = useState({
const [formData, setFormData] = useState<FormData>({
basicInfo: {},
targetSettings: {},
trafficPool: {},
})
const steps = [
const steps: Step[] = [
{ 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) => {
const handleBasicInfoNext = (data: BasicInfoData) => {
setFormData((prev) => ({ ...prev, basicInfo: data }))
setCurrentStep(1)
}
const handleTargetSettingsNext = (data: any) => {
const handleTargetSettingsNext = (data: TargetSettingsData) => {
setFormData((prev) => ({ ...prev, targetSettings: data }))
setCurrentStep(2)
}
@@ -44,7 +75,7 @@ export default function NewTrafficDistribution() {
setCurrentStep(1)
}
const handleSubmit = async (data: any) => {
const handleSubmit = async (data: TrafficPoolData) => {
const finalData = {
...formData,
trafficPool: data,

11
nkebao/src/App.tsx
View File

@@ -16,6 +16,7 @@ import Workspace from './pages/workspace/Workspace';
import AutoLike from './pages/workspace/auto-like/AutoLike';
import NewAutoLike from './pages/workspace/auto-like/NewAutoLike';
import AutoLikeDetail from './pages/workspace/auto-like/AutoLikeDetail';
import NewDistribution from './pages/workspace/traffic-distribution/NewDistribution';
import AutoGroup from './pages/workspace/auto-group/AutoGroup';
import AutoGroupDetail from './pages/workspace/auto-group/Detail';
import GroupPush from './pages/workspace/group-push/GroupPush';
@@ -58,10 +59,12 @@ function App() {
<Route path="/wechat-accounts" element={<WechatAccounts />} />
<Route path="/wechat-accounts/:id" element={<WechatAccountDetail />} />
<Route path="/workspace" element={<Workspace />} />
<Route path="/workspace/auto-like" element={<AutoLike />} />
<Route path="/workspace/auto-like/new" element={<NewAutoLike />} />
<Route path="/workspace/auto-like/:id" element={<AutoLikeDetail />} />
<Route path="/workspace/auto-like/:id/edit" element={<NewAutoLike />} />
<Route path="/workspace/auto-like" element={<AutoLike />} />
<Route path="/workspace/auto-like/new" element={<NewAutoLike />} />
<Route path="/workspace/auto-like/:id" element={<AutoLikeDetail />} />
<Route path="/workspace/auto-like/:id/edit" element={<NewAutoLike />} />
<Route path="/workspace/traffic-distribution" element={<TrafficDistribution />} />
<Route path="/workspace/traffic-distribution/new" element={<NewDistribution />} />
<Route path="/workspace/auto-group" element={<AutoGroup />} />
<Route path="/workspace/auto-group/:id" element={<AutoGroupDetail />} />
<Route path="/workspace/group-push" element={<GroupPush />} />

620
nkebao/src/pages/workspace/traffic-distribution/NewDistribution.tsx Normal file
View File

@@ -0,0 +1,620 @@
import React, { useState, ChangeEvent } from 'react';
import { useNavigate } from 'react-router-dom';
import {
ChevronLeft,
Plus,
Users,
Database,
Settings,
Search,
} from 'lucide-react';
import { Steps, StepItem } from 'tdesign-mobile-react'; // 添加这一行
import 'tdesign-mobile-react/es/style/index.css'; // 添加这一行
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 { 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 { useToast } from '@/components/ui/toast';
import { format } from 'date-fns';
// 类型定义
interface Step {
id: number;
title: string;
icon: React.ReactNode;
}
interface StepIndicatorProps {
currentStep: number;
steps: Step[];
}
interface BasicInfoData {
name: string;
distributionMethod: string;
dailyLimit: number;
timeRestriction: string;
startTime: string;
endTime: string;
}
interface BasicInfoStepProps {
onNext: (data: BasicInfoData) => void;
initialData?: Partial<BasicInfoData>;
}
interface TargetSettingsData {
selectedDevices: string[];
selectedCustomerServices: string[];
}
interface TargetSettingsStepProps {
onNext: (data: TargetSettingsData) => void;
onBack: () => void;
initialData?: Partial<TargetSettingsData>;
}
interface Device {
id: string;
name: string;
status: 'online' | 'offline';
}
interface CustomerService {
id: string;
name: string;
status: 'online' | 'offline';
}
interface TrafficPoolData {
selectedPools: string[];
}
interface TrafficPoolStepProps {
onSubmit: (data: TrafficPoolData) => void;
onBack: () => void;
initialData?: Partial<TrafficPoolData>;
}
interface TrafficPool {
id: string;
name: string;
count: number;
description: string;
}
// 步骤指示器组件
function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
return (
<div className="w-full mb-6 px-12">
<Steps current={currentStep} layout="horizontal">
{steps.map((step, index) => (
<StepItem
key={step.id}
title={step.title}
icon={step.icon}
status={
index === currentStep ? 'process' :
index < currentStep ? 'finish' : 'default'
}
/>
))}
</Steps>
</div>
);
}
// 基本信息步骤组件
function BasicInfoStep({ onNext, initialData = {} }: BasicInfoStepProps) {
const [formData, setFormData] = useState<BasicInfoData>({
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: keyof BasicInfoData, value: string | number) => {
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="请输入计划名称"
/>
</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>
<input
type="range"
value={formData.dailyLimit}
min={1}
max={200}
step={1}
onChange={(e) => handleChange("dailyLimit", parseInt(e.target.value))}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
/>
<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>
);
}
// 目标设置步骤组件
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" onClick={() => toggleDevice(device.id)}>
<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" onClick={() => toggleCustomerService(cs.id)}>
<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>
);
}
// 流量池选择步骤组件
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) => (
<div
key={pool.id}
className={`cursor-pointer border rounded-lg ${selectedPools.includes(pool.id) ? "border-blue-500" : "border-gray-200"}`}
onClick={() => togglePool(pool.id)}
>
<div 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)}
/>
</div>
</div>
</div>
))}
</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>
);
}
// 主组件
interface FormData {
basicInfo: Partial<BasicInfoData>;
targetSettings: Partial<TargetSettingsData>;
trafficPool: Partial<TrafficPoolData>;
}
export default function NewDistribution() {
const navigate = useNavigate();
const { toast } = useToast();
const [currentStep, setCurrentStep] = useState(0);
const [formData, setFormData] = useState<FormData>({
basicInfo: {},
targetSettings: {},
trafficPool: {},
});
const steps: Step[] = [
{ 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: BasicInfoData) => {
setFormData((prev) => ({ ...prev, basicInfo: data }));
setCurrentStep(1);
};
const handleTargetSettingsNext = (data: TargetSettingsData) => {
setFormData((prev) => ({ ...prev, targetSettings: data }));
setCurrentStep(2);
};
const handleTargetSettingsBack = () => {
setCurrentStep(0);
};
const handleTrafficPoolBack = () => {
setCurrentStep(1);
};
const handleSubmit = async (data: TrafficPoolData) => {
const finalData = {
...formData,
trafficPool: data,
};
try {
// 这里可以添加实际的API调用
console.log("提交的数据:", finalData);
toast({
title: "创建成功",
description: "流量分发规则已成功创建",
});
// 跳转到列表页
navigate("/workspace/traffic-distribution");
} catch (error) {
console.error("提交失败:", error);
toast({
title: "创建失败",
description: "请稍后重试",
variant: "destructive",
});
}
};
return (
<div className="flex-1 bg-gray-50 min-h-screen pb-20">
<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={() => navigate(-1)}>
<ChevronLeft className="h-5 w-5" />
</Button>
<h1 className="text-lg font-medium">新建流量分发</h1>
</div>
<Button variant="ghost" size="icon">
<Settings className="h-5 w-5" />
</Button>
</div>
<StepIndicator currentStep={currentStep} steps={steps} />
</header>
<div className="container max-w-md mx-auto p-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>
);
}

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

@@ -10,7 +10,7 @@ import {
Edit,
Trash2,
Pause,
Users,
Share2,
} from 'lucide-react';
import { Card } from '@/components/ui/card';
@@ -18,14 +18,6 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
// 不再使用 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';
@@ -101,7 +93,26 @@ export default function TrafficDistribution() {
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);
@@ -187,7 +198,31 @@ export default function TrafficDistribution() {
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 '未知';
}
};
// 模拟加载数据
useEffect(() => {

559
nkebao/yarn.lock
View File

File diff suppressed because it is too large Load Diff