fnvtk/ckb-SuperAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【操盘手】 流量分发功能提交

Browse Source
This commit is contained in:
wong
2025-06-04 11:38:43 +08:00
parent 1f2a1dab00
commit 296464bff9
9 changed files with 199 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
const [formData, setFormData] = useState({
name: initialData.name ?? `流量分发 ${format(new Date(), "yyyyMMdd HHmm")}`,
distributeType: initialData.distributeType ?? "1",
maxPerDay: initialData.maxPerDay ?? 50,
maxPerDay: initialData.maxPerDay ?? 100,
timeType: initialData.timeType ?? "2",
startTime: initialData.startTime ?? "09:00",
endTime: initialData.endTime ?? "18:00",
@@ -69,7 +69,7 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
均分配 <span className="text-gray-500 text-sm">(流量将均分配给所有客服)</span>
</Label>
</div>
<div className="flex items-center space-x-2">
{/* <div className="flex items-center space-x-2">
<RadioGroupItem value="2" id="priority" />
<Label htmlFor="priority" className="cursor-pointer">
优先级分配 <span className="text-gray-500 text-sm">(按客服优先级顺序分配)</span>
@@ -80,7 +80,7 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
<Label htmlFor="ratio" className="cursor-pointer">
比例分配 <span className="text-gray-500 text-sm">(按设定比例分配流量)</span>
</Label>
</div>
</div> */}
</RadioGroup>
</div>

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

@@ -103,18 +103,19 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
</div>
{/* 设备选择弹窗 */}
<Dialog open={deviceDialogOpen} onOpenChange={setDeviceDialogOpen}>
<DialogContent className="max-w-xl w-full p-0">
<DialogTitle className="text-lg font-bold text-center mb-4">选择设备</DialogTitle>
<div className="p-6 pt-0">
<DialogContent className="max-w-xl w-full p-0 rounded-2xl shadow-2xl max-h-[80vh]">
<DialogTitle className="text-lg font-bold text-center py-3 border-b">选择设备</DialogTitle>
<div className="p-6 pt-4">
{/* 搜索和筛选 */}
<div className="flex items-center gap-2 mb-4">
<Input
placeholder="搜索设备IMEI/备注/微信号"
value={search}
onChange={e => setSearch(e.target.value)}
className="flex-1"
className="flex-1 rounded-lg border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
/>
<select
className="border rounded px-2 py-1 text-sm"
className="border rounded-lg px-3 py-2 text-sm bg-gray-50 focus:border-blue-500"
value={statusFilter}
onChange={e => setStatusFilter(e.target.value)}
>
@@ -123,7 +124,8 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
<option value="offline">离线</option>
</select>
</div>
<div className="max-h-72 overflow-y-auto divide-y">
{/* 设备列表 */}
<div className="max-h-[500px] overflow-y-auto space-y-2">
{loading ? (
<div className="text-center text-gray-400 py-8">加载中...</div>
) : filteredDevices.length === 0 ? (
@@ -132,11 +134,15 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
filteredDevices.map(device => (
<label
key={device.id}
className="flex items-center px-2 py-3 cursor-pointer hover:bg-gray-50"
className={`
flex items-center gap-3 p-4 rounded-xl border
${selectedDeviceIds.includes(String(device.id)) ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"}
hover:border-blue-400 transition-colors cursor-pointer
`}
>
<input
type="checkbox"
className="mr-3 accent-blue-500"
className="accent-blue-500 scale-110"
checked={selectedDeviceIds.includes(String(device.id))}
onChange={() => {
setSelectedDeviceIds(prev =>
@@ -147,17 +153,26 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
}}
/>
<div className="flex-1">
<div className="font-medium text-base">{device.memo || device.nickname || device.name}</div>
<div className="font-semibold text-base">{device.memo || device.nickname || device.name}</div>
<div className="text-xs text-gray-500">IMEI: {device.imei}</div>
<div className="text-xs text-gray-500">微信号: {device.wechatId || '--'}（{device.nickname || '--'}）</div>
<div className="text-xs text-gray-400">微信号: {device.wechatId || '--'}（{device.nickname || '--'}）</div>
</div>
<span className={`ml-2 text-xs ${device.alive === 1 ? 'text-green-600' : 'text-gray-400'}`}>{device.alive === 1 ? '在线' : '离线'}</span>
<span className="flex items-center gap-1 text-xs font-medium">
<span className={`w-2 h-2 rounded-full ${device.alive === 1 ? 'bg-green-500' : 'bg-gray-300'}`}></span>
<span className={device.alive === 1 ? 'text-green-600' : 'text-gray-400'}>
{device.alive === 1 ? '在线' : '离线'}
</span>
</span>
</label>
))
)}
</div>
<div className="flex justify-end mt-6">
<Button className="w-full" onClick={handleDialogConfirm}>
{/* 确认按钮 */}
<div className="flex justify-center mt-8">
<Button
className="w-4/5 py-3 rounded-full text-base font-bold shadow-md"
onClick={handleDialogConfirm}
>
确认
</Button>
</div>

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

@@ -113,25 +113,29 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {}, de
</div>
</div>
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="max-w-xl w-full p-0">
<DialogTitle className="text-lg font-bold text-center mb-4">选择流量池</DialogTitle>
<div className="p-6 pt-0">
<DialogContent className="max-w-xl w-full p-0 rounded-2xl shadow-2xl max-h-[80vh]">
<DialogTitle className="text-lg font-bold text-center py-3 border-b">选择流量池</DialogTitle>
<div className="p-6 pt-4">
{/* 搜索栏 */}
<div className="relative mb-4">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
<Input
placeholder="搜索流量池"
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
className="pl-10"
className="pl-10 rounded-lg border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
/>
</div>
<div className="overflow-y-auto max-h-96">
{/* 流量池列表 */}
<div className="overflow-y-auto max-h-[400px] space-y-3">
{pagedPools.map((pool) => (
<Card
<div
key={pool.label}
className={`flex items-center justify-between rounded-xl shadow-sm border transition-colors duration-150 mb-4 cursor-pointer
className={`
flex items-center justify-between rounded-xl shadow-sm border transition-colors duration-150 cursor-pointer
${selectedPools.includes(pool.label) ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"}
hover:border-blue-400`}
hover:border-blue-400
`}
onClick={() => togglePool(pool.label)}
>
<div className="flex items-center space-x-3 p-4 flex-1">
@@ -143,27 +147,35 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {}, de
<p className="text-sm text-gray-500">{poolDescMap[pool.label] || ""}</p>
</div>
</div>
<div className="flex items-center space-x-3 pr-4">
<span className="text-sm text-gray-500">{pool.count} 人</span>
<Checkbox
checked={selectedPools.includes(pool.label)}
onCheckedChange={() => togglePool(pool.label)}
onClick={e => e.stopPropagation()}
/>
</div>
</Card>
<span className="text-sm text-gray-500 mr-4">{pool.count} 人</span>
<input
type="checkbox"
className="accent-blue-500 scale-125 mr-6"
checked={selectedPools.includes(pool.label)}
onChange={e => {
e.stopPropagation();
togglePool(pool.label);
}}
onClick={e => e.stopPropagation()}
/>
</div>
))}
</div>
{/* 分页按钮 */}
{totalPages > 1 && (
<div className="flex justify-center items-center gap-2 mt-4">
<div className="flex justify-center items-center gap-2 mt-6">
<Button size="sm" variant="outline" disabled={currentPage === 1} onClick={() => setCurrentPage(p => Math.max(1, p - 1))}>上一页</Button>
<span className="text-sm text-gray-500">第 {currentPage} / {totalPages} 页</span>
<Button size="sm" variant="outline" disabled={currentPage === totalPages} onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}>下一页</Button>
</div>
)}
<div className="flex justify-end mt-6">
<Button className="w-full" onClick={() => setDialogOpen(false)} disabled={selectedPools.length === 0}>
{/* 确认按钮 */}
<div className="flex justify-center mt-8">
<Button
className="w-4/5 py-3 rounded-full text-base font-bold shadow-md"
onClick={() => setDialogOpen(false)}
disabled={selectedPools.length === 0}
>
确认
</Button>
</div>