【操盘手】 流量分发支持选择账号分配

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 } from "lucide-react"
+import { Search, Users, Smartphone } from "lucide-react"
 import { Input } from "@/components/ui/input"
 import { api } from "@/lib/api"
 import { DeviceSelectionDialog } from "@/app/components/device-selection-dialog"
@@ -40,6 +40,14 @@ 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) : [];
@@ -53,6 +61,29 @@ 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 === "" ||
@@ -64,7 +95,7 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
   })
 
   const handleSubmit = () => {
-    onNext({ devices: selectedDeviceIds })
+    onNext({ devices: selectedDeviceIds, accounts: selectedAccountIds })
   }
 
   // 弹窗内确认选择
@@ -75,9 +106,15 @@ 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>
+      {/* 设备选择 */}
       <div className="mb-4">
         <div className="relative w-full">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
@@ -90,16 +127,43 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {}, s
           />
         </div>
       </div>
-      <div className="space-y-3 mt-4 max-h-80 overflow-y-auto">
-        {selectedDeviceIds.length === 0 ? (
-          <div className="text-gray-400">未选择设备</div>
-        ) : (
-          <div className="text-base text-gray-500">已选设备：{selectedDeviceIds.length} 个</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="mt-8 flex justify-between">
+      {/* 已选账号/设备展示优化 */}
+      <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>
+          {selectedDeviceIds.length === 0 ? (
+            <span className="text-gray-400">未选择</span>
+          ) : (
+            <span className="bg-green-50 text-green-600 rounded px-2 py-0.5 font-semibold">{selectedDeviceIds.length} 个</span>
+          )}
+        </div>
+      </div>
+      <div className="mt-10 flex justify-between">
         <Button variant="outline" onClick={onBack}>← 上一步</Button>
-        <Button onClick={handleSubmit} disabled={selectedDeviceIds.length === 0}>下一步 →</Button>
+        <Button onClick={handleSubmit} disabled={selectedDeviceIds.length === 0} className="px-8 font-bold shadow-md">下一步 →</Button>
       </div>
       {/* 设备选择弹窗 */}
       <Dialog open={deviceDialogOpen} onOpenChange={setDeviceDialogOpen}>
@@ -179,6 +243,66 @@ 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>
   )
 }

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

@@ -27,6 +27,7 @@ interface TrafficPoolStepProps {
 
 export default function TrafficPoolStep({ onSubmit, onBack, initialData = {}, devices = [] }: TrafficPoolStepProps) {
   const [selectedPools, setSelectedPools] = useState<string[]>(initialData.selectedPools || [])
+  const [searchInput, setSearchInput] = useState("")
   const [searchTerm, setSearchTerm] = useState("")
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [deviceLabels, setDeviceLabels] = useState<{ label: string; count: number }[]>([])
@@ -34,6 +35,7 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {}, de
   const [currentPage, setCurrentPage] = useState(1)
   const pageSize = 10
   const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(false)
   const filteredPools = deviceLabels.filter(
     (pool) =>
       pool.label && pool.label.toLowerCase().includes(searchTerm.toLowerCase())
@@ -41,7 +43,7 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {}, de
   const totalPages = Math.ceil(total / pageSize)
   const pagedPools = filteredPools.slice((currentPage - 1) * pageSize, currentPage * pageSize)
 
-  // 监听 devices 变化，请求标签
+  // 监听 devices、currentPage、searchTerm 变化，请求标签（后端分页+搜索）
   useEffect(() => {
     if (!devices || devices.length === 0) {
       setDeviceLabels([])
@@ -49,12 +51,13 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {}, de
       return
     }
     const fetchLabels = async () => {
+      setLoading(true)
       try {
         const params = devices.join(",")
-        const res = await api.get<{ code: number; msg: string; data: { label: string; count: number }[]; total?: number }>(`/v1/workbench/device-labels?deviceIds=${params}`)
-        if (res.code === 200 && Array.isArray(res.data)) {
-          setDeviceLabels(res.data)
-          setTotal(res.total || res.data.length)
+        const res = await api.get<{ code: number; msg: string; data: { list: { label: string; count: number }[]; total: number } }>(`/v1/workbench/device-labels?deviceIds=${params}&page=${currentPage}&pageSize=${pageSize}&keyword=${encodeURIComponent(searchTerm)}`)
+        if (res.code === 200 && Array.isArray(res.data?.list)) {
+          setDeviceLabels(res.data.list)
+          setTotal(res.data.total || 0)
         } else {
           setDeviceLabels([])
           setTotal(0)
@@ -62,10 +65,18 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {}, de
       } catch (e) {
         setDeviceLabels([])
         setTotal(0)
+      } finally {
+        setLoading(false)
       }
     }
     fetchLabels()
-  }, [devices])
+  }, [devices, currentPage, searchTerm])
+
+  // 搜索时重置分页并触发搜索
+  const handleSearch = () => {
+    setCurrentPage(1)
+    setSearchTerm(searchInput)
+  }
 
   // label 到描述的映射
   const poolDescMap: Record<string, string> = {
@@ -117,49 +128,58 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {}, de
           <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 rounded-lg border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
-              />
+            <div className="relative mb-4 flex gap-2">
+              <div className="flex-1 relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                <Input
+                  placeholder="搜索流量池"
+                  value={searchInput}
+                  onChange={e => setSearchInput(e.target.value)}
+                  className="pl-10 rounded-lg border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
+                />
+              </div>
+              <Button onClick={handleSearch} className="px-4">搜索</Button>
             </div>
             {/* 流量池列表 */}
             <div className="overflow-y-auto max-h-[400px] space-y-3">
-              {pagedPools.map((pool) => (
-                <div
-                  key={pool.label}
-                  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
-                  `}
-                  onClick={() => togglePool(pool.label)}
-                >
-                  <div className="flex items-center space-x-3 p-4 flex-1">
-                    <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-bold text-base">{pool.label}</p>
-                      <p className="text-sm text-gray-500">{poolDescMap[pool.label] || ""}</p>
+              {loading ? (
+                <div className="text-center text-gray-400 py-8">加载中...</div>
+              ) : filteredPools.length === 0 ? (
+                <div className="text-center text-gray-400 py-8">暂无流量池</div>
+              ) : (
+                filteredPools.map((pool) => (
+                  <div
+                    key={pool.label}
+                    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`
+                    }
+                    onClick={() => togglePool(pool.label)}
+                  >
+                    <div className="flex items-center space-x-3 p-4 flex-1">
+                      <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-bold text-base">{pool.label}</p>
+                        <p className="text-sm text-gray-500">{poolDescMap[pool.label] || ""}</p>
+                      </div>
                     </div>
+                    <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>
-                  <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 && (