流量分发优化

2025-06-17 17:58:51 +08:00
parent 2488b0210b
commit 117b5a2bfd
4 changed files with 203 additions and 159 deletions
--- a/Cunkebao/app/workspace/traffic-distribution/new/components/basic-info-step.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/new/components/basic-info-step.tsx
@@ -1,28 +1,59 @@
 "use client"

-import { useState } from "react"
+import { useState, useEffect } 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"
+import { Search, Users } from "lucide-react"
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
+import { api } from "@/lib/api"

 interface BasicInfoStepProps {
  onNext: (data: any) => void
-  initialData?: any
+  initialData?: {
+    name?: string
+    distributeType?: string | number
+    maxPerDay?: number
+    timeType?: string | number
+    startTime?: string
+    endTime?: string
+    accounts?: string[]
+    account?: string[]
+  }
 }

 export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoStepProps) {
  const [formData, setFormData] = useState({
    name: initialData.name ?? `流量分发 ${format(new Date(), "yyyyMMdd HHmm")}`,
-    distributeType: initialData.distributeType ?? "1",
-    maxPerDay: initialData.maxPerDay ?? 100,
-    timeType: initialData.timeType ?? "2",
+    distributeType: String(initialData.distributeType ?? "1"),
+    maxPerDay: initialData.maxPerDay ?? 200,
+    timeType: String(initialData.timeType ?? "2"),
    startTime: initialData.startTime ?? "09:00",
    endTime: initialData.endTime ?? "18:00",
  })

+  // 账号选择相关状态
+  const [accountDialogOpen, setAccountDialogOpen] = useState(false)
+  const [accountList, setAccountList] = useState<any[]>([])
+  const [selectedAccountIds, setSelectedAccountIds] = useState<string[]>(
+    (initialData.account || initialData.accounts || []).map(String)
+  )
+  const [accountPage, setAccountPage] = useState(1)
+  const [accountTotal, setAccountTotal] = useState(0)
+  const [accountLoading, setAccountLoading] = useState(false)
+
+  // 拉取账号列表
+  useEffect(() => {
+    setAccountLoading(true)
+    api.get(`/v1/workbench/account-list?page=${accountPage}&size=10`).then((res: any) => {
+      setAccountList(res.data?.list || [])
+      setAccountTotal(res.data?.total || 0)
+    }).finally(() => setAccountLoading(false))
+  }, [accountPage])
+
  const handleChange = (field: string, value: any) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }
@@ -35,9 +66,16 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
      timeType: Number(formData.timeType),
      startTime: formData.timeType == "2" ? formData.startTime : "09:00",
      endTime: formData.timeType == "2" ? formData.endTime : "21:00",
+      account: selectedAccountIds,
+      accounts: selectedAccountIds,
    })
  }

+  // 账号弹窗确认
+  const handleAccountDialogConfirm = () => {
+    setAccountDialogOpen(false)
+  }
+
  return (
    <div className="bg-white rounded-lg p-6 shadow-sm">
      <h2 className="text-xl font-bold mb-6">基本信息</h2>
@@ -69,18 +107,6 @@ 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">
-              <RadioGroupItem value="2" 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="3" id="ratio" />
-              <Label htmlFor="ratio" className="cursor-pointer">
-                比例分配 <span className="text-gray-500 text-sm">(按设定比例分配流量)</span>
-              </Label>
-            </div> */}
          </RadioGroup>
        </div>

@@ -95,12 +121,12 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
            <Slider
              value={[formData.maxPerDay]}
              min={1}
-              max={200}
+              max={1000}
              step={1}
              onValueChange={(value) => handleChange("maxPerDay", value[0])}
              className="py-4"
            />
-            <p className="text-sm text-gray-500">限制每天最多分配的流量数量</p>
+            <p className="text-sm text-gray-500">限制每天最多分配的流量数量（1-1000）</p>
          </div>

          <div className="space-y-4 pt-4">
@@ -156,13 +182,91 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
            )}
          </div>
        </div>
+
+        {/* 账号选择 */}
+        <div className="space-y-2">
+          <Label>选择账号 <span className="text-red-500 ml-1">*</span></Label>
+          <div className="relative w-full">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+            <Input
+              placeholder="选择账号"
+              value={selectedAccountIds.length > 0 ? `已选择${selectedAccountIds.length}个账号` : ''}
+              readOnly
+              className="pl-10 cursor-pointer"
+              onClick={() => setAccountDialogOpen(true)}
+            />
+          </div>
+          <div className="flex items-center gap-2 text-sm text-gray-500">
+            <Users className="w-4 h-4 text-blue-500" />
+            <span>已选账号：</span>
+            {selectedAccountIds.length === 0 ? (
+              <span className="text-gray-400">未选择</span>
+            ) : (
+              <span className="bg-blue-50 text-blue-600 rounded px-2 py-0.5 font-semibold">{selectedAccountIds.length} 个</span>
+            )}
+          </div>
+        </div>
      </div>

      <div className="mt-8 flex justify-end">
-        <Button onClick={handleSubmit} className="px-8">
+        <Button onClick={handleSubmit} disabled={selectedAccountIds.length === 0} className="px-8">
          下一步 →
        </Button>
      </div>
+
+      {/* 账号选择弹窗 */}
+      <Dialog open={accountDialogOpen} onOpenChange={setAccountDialogOpen}>
+        <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="max-h-[500px] overflow-y-auto space-y-2">
+              {accountLoading ? (
+                <div className="text-center text-gray-400 py-8">加载中...</div>
+              ) : accountList.length === 0 ? (
+                <div className="text-center text-gray-400 py-8">暂无账号</div>
+              ) : (
+                accountList.map(account => (
+                  <label
+                    key={account.id}
+                    className={`
+                      flex items-center gap-3 p-4 rounded-xl border
+                      ${selectedAccountIds.includes(String(account.id)) ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"}
+                      hover:border-blue-400 transition-colors cursor-pointer
+                    `}
+                  >
+                    <input
+                      type="checkbox"
+                      className="accent-blue-500 scale-110"
+                      checked={selectedAccountIds.includes(String(account.id))}
+                      onChange={() => {
+                        setSelectedAccountIds(prev =>
+                          prev.includes(String(account.id))
+                            ? prev.filter(id => id !== String(account.id))
+                            : [...prev, String(account.id)]
+                        )
+                      }}
+                    />
+                    <div className="flex-1">
+                      <div className="font-semibold text-base">{account.realName || account.nickname}</div>
+                      <div className="text-xs text-gray-500">账号: {account.userName || '--'}</div>
+                    </div>
+                  </label>
+                ))
+              )}
+            </div>
+            {/* 确认按钮 */}
+            <div className="flex justify-center mt-8">
+              <Button
+                className="w-4/5 py-3 rounded-full text-base font-bold shadow-md"
+                onClick={handleAccountDialogConfirm}
+              >
+                确认
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
    </div>
  )
 }
--- a/Cunkebao/app/workspace/traffic-distribution/new/components/target-settings-step.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/new/components/target-settings-step.tsx
@@ -6,7 +6,7 @@ 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, Users, Smartphone } from "lucide-react"
+import { Search, Smartphone } from "lucide-react"
 import { Input } from "@/components/ui/input"
 import { api } from "@/lib/api"
 import { DeviceSelectionDialog } from "@/app/components/device-selection-dialog"
@@ -19,13 +19,6 @@ interface Device {
  avatar?: string
 }

-interface CustomerService {
-  id: string
-  name: string
-  status: "online" | "offline"
-  avatar?: string
-}
-
 interface TargetSettingsStepProps {
  onNext: (data: any) => void
  onBack: () => void
@@ -40,14 +33,6 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
  const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
  const [statusFilter, setStatusFilter] = useState("all")

-  // 账号选择相关状态
-  const [accountDialogOpen, setAccountDialogOpen] = useState(false)
-  const [accountList, setAccountList] = useState<any[]>([])
-  const [selectedAccountIds, setSelectedAccountIds] = useState<string[]>([])
-  const [accountPage, setAccountPage] = useState(1)
-  const [accountTotal, setAccountTotal] = useState(0)
-  const [accountLoading, setAccountLoading] = useState(false)
-
  // 每次 initialData.devices 变化时，同步 selectedDeviceIds
  useEffect(() => {
    const ids = Array.isArray(initialData.devices) ? initialData.devices.map(String) : [];
@@ -61,29 +46,6 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
    }).finally(() => setLoading(false))
  }, [])

-  // 同步初始账号
-  useEffect(() => {
-    const ids = Array.isArray(initialData.accounts) ? initialData.accounts.map(String) : [];
-    setSelectedAccountIds(ids);
-  }, [initialData.accounts])
-
-  // 拉取账号列表
-  useEffect(() => {
-    setAccountLoading(true)
-    api.get(`/v1/workbench/account-list?page=${accountPage}&size=10`).then((res: any) => {
-      setAccountList(res.data?.list || [])
-      setAccountTotal(res.data?.total || 0)
-    }).finally(() => setAccountLoading(false))
-  }, [accountPage])
-
-  // 账号弹窗每次打开时同步反选
-  useEffect(() => {
-    if (accountDialogOpen) {
-      const ids = Array.isArray(initialData.accounts) ? initialData.accounts.map(String) : [];
-      setSelectedAccountIds(ids);
-    }
-  }, [accountDialogOpen, initialData.accounts])
-
  const filteredDevices = deviceList.filter(device => {
    const matchesSearch =
      search === "" ||
@@ -95,7 +57,7 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
  })

  const handleSubmit = () => {
-    onNext({ devices: selectedDeviceIds, accounts: selectedAccountIds })
+    onNext({ devices: selectedDeviceIds })
  }

  // 弹窗内确认选择
@@ -106,11 +68,6 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
    setDeviceDialogOpen(false)
  }

-  // 账号弹窗确认
-  const handleAccountDialogConfirm = () => {
-    setAccountDialogOpen(false)
-  }
-
  return (
    <div className="bg-white rounded-lg p-6 shadow-sm">
      <h2 className="text-xl font-bold mb-6">目标设置</h2>
@@ -127,30 +84,8 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
          />
        </div>
      </div>
-      {/* 账号选择 */}
-      <div className="mb-4">
-        <div className="relative w-full">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
-          <Input
-            placeholder="选择账号"
-            value={selectedAccountIds.length > 0 ? `已选择${selectedAccountIds.length}个账号` : ''}
-            readOnly
-            className="pl-10 cursor-pointer"
-            onClick={() => setAccountDialogOpen(true)}
-          />
-        </div>
-      </div>
-      {/* 已选账号/设备展示优化 */}
+      {/* 已选设备展示优化 */}
      <div className="flex flex-col gap-2 mb-6">
-        <div className="flex items-center gap-2 text-sm text-gray-500">
-          <Users className="w-4 h-4 text-blue-500" />
-          <span>已选账号：</span>
-          {selectedAccountIds.length === 0 ? (
-            <span className="text-gray-400">未选择</span>
-          ) : (
-            <span className="bg-blue-50 text-blue-600 rounded px-2 py-0.5 font-semibold">{selectedAccountIds.length} 个</span>
-          )}
-        </div>
        <div className="flex items-center gap-2 text-sm text-gray-500">
          <Smartphone className="w-4 h-4 text-green-500" />
          <span>已选设备：</span>
@@ -243,66 +178,6 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
          </div>
        </DialogContent>
      </Dialog>
-      {/* 账号选择弹窗 */}
-      <Dialog open={accountDialogOpen} onOpenChange={setAccountDialogOpen}>
-        <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="max-h-[400px] overflow-y-auto space-y-2">
-              {accountLoading ? (
-                <div className="text-center text-gray-400 py-8">加载中...</div>
-              ) : accountList.length === 0 ? (
-                <div className="text-center text-gray-400 py-8">暂无账号</div>
-              ) : (
-                accountList.map(account => (
-                  <label
-                    key={account.id}
-                    className={`
-                      flex items-center gap-3 p-4 rounded-xl border
-                      ${selectedAccountIds.includes(String(account.id)) ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"}
-                      hover:border-blue-400 transition-colors cursor-pointer
-                    `}
-                  >
-                    <input
-                      type="checkbox"
-                      className="accent-blue-500 scale-110"
-                      checked={selectedAccountIds.includes(String(account.id))}
-                      onChange={() => {
-                        setSelectedAccountIds(prev =>
-                          prev.includes(String(account.id))
-                            ? prev.filter(id => id !== String(account.id))
-                            : [...prev, String(account.id)]
-                        )
-                      }}
-                    />
-                    <div className="flex-1">
-                      <div className="font-semibold text-base">{account.realName || account.nickname || account.userName}</div>
-                      <div className="text-xs text-gray-500">账号: {account.userName}</div>
-                      <div className="text-xs text-gray-400">昵称: {account.nickname || '--'} 备注: {account.memo || '--'}</div>
-                    </div>
-                  </label>
-                ))
-              )}
-            </div>
-            {/* 分页 */}
-            <div className="flex justify-center items-center gap-4 mt-4">
-              <Button size="sm" variant="outline" disabled={accountPage === 1} onClick={() => setAccountPage(p => Math.max(1, p - 1))}>上一页</Button>
-              <span className="text-sm">第 {accountPage} 页 / 共 {Math.ceil(accountTotal / 10) || 1} 页</span>
-              <Button size="sm" variant="outline" disabled={accountPage >= Math.ceil(accountTotal / 10)} onClick={() => setAccountPage(p => p + 1)}>下一页</Button>
-            </div>
-            {/* 确认按钮 */}
-            <div className="flex justify-center mt-8">
-              <Button
-                className="w-4/5 py-3 rounded-full text-base font-bold shadow-md"
-                onClick={handleAccountDialogConfirm}
-              >
-                确认
-              </Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
    </div>
  )
 }