【操盘手】 社群推送列表、添加、编辑

Cunkebao/app/workspace/group-push/components/group-selector.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Card, CardContent } from "@/components/ui/card"
@@ -8,40 +8,8 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/u
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Search, Plus, Trash2 } from "lucide-react"
 import type { WechatGroup } from "@/types/group-push"
-
-// 模拟数据
-const mockGroups: WechatGroup[] = [
-  {
-    id: "1",
-    name: "快捷语",
-    avatar: "/placeholder.svg?height=40&width=40",
-    serviceAccount: {
-      id: "sa1",
-      name: "贝蒂喜品牌wxid_rtlwsjytjk1991",
-      avatar: "/placeholder.svg?height=40&width=40",
-    },
-  },
-  {
-    id: "2",
-    name: "产品交流群",
-    avatar: "/placeholder.svg?height=40&width=40",
-    serviceAccount: {
-      id: "sa1",
-      name: "贝蒂喜品牌wxid_rtlwsjytjk1991",
-      avatar: "/placeholder.svg?height=40&width=40",
-    },
-  },
-  {
-    id: "3",
-    name: "客户服务群",
-    avatar: "/placeholder.svg?height=40&width=40",
-    serviceAccount: {
-      id: "sa2",
-      name: "客服小助手wxid_abc123",
-      avatar: "/placeholder.svg?height=40&width=40",
-    },
-  },
-]
+import { api } from "@/lib/api"
+import { showToast } from "@/lib/toast"
 
 interface GroupSelectorProps {
   selectedGroups: WechatGroup[]
@@ -63,6 +31,63 @@ export function GroupSelector({
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [searchTerm, setSearchTerm] = useState("")
   const [serviceFilter, setServiceFilter] = useState("")
+  const [groups, setGroups] = useState<WechatGroup[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const [currentPage, setCurrentPage] = useState(1)
+  const pageSize = 10
+
+  // 拉取群列表
+  const fetchGroups = async (page = 1, keyword = "") => {
+    setLoading(true)
+    try {
+      const params = new URLSearchParams({
+        page: page.toString(),
+        limit: pageSize.toString(),
+        keyword: keyword.trim(),
+      })
+      const res = await api.get(`/v1/workbench/group-list?${params.toString()}`) as any
+      if (res.code === 200 && Array.isArray(res.data.list)) {
+        const mappedList = (res.data.list || []).map((item: any) => ({
+          ...item, // 保留所有原始字段，方便渲染
+          id: String(item.id),
+          name: item.groupName,
+          avatar: item.groupAvatar,
+          serviceAccount: {
+            id: item.ownerWechatId,
+            name: item.nickName,
+            avatar: item.avatar, // 可补充
+          },
+        }))
+        setGroups(mappedList)
+        setTotal(res.data.total || mappedList.length)
+      } else {
+        setGroups([])
+        setTotal(0)
+        showToast(res.msg || "获取群列表失败", "error")
+      }
+    } catch (e) {
+      setGroups([])
+      setTotal(0)
+      showToast((e as any)?.message || "网络错误", "error")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // 弹窗打开/搜索/翻页时拉取
+  useEffect(() => {
+    if (isDialogOpen) {
+      fetchGroups(currentPage, searchTerm)
+    }
+    // eslint-disable-next-line
+  }, [isDialogOpen, currentPage])
+
+  // 搜索时重置页码
+  const handleSearch = () => {
+    setCurrentPage(1)
+    fetchGroups(1, searchTerm)
+  }
 
   const handleAddGroup = (group: WechatGroup) => {
     if (!selectedGroups.some((g) => g.id === group.id)) {
@@ -75,10 +100,10 @@ export function GroupSelector({
     onGroupsChange(selectedGroups.filter((group) => group.id !== groupId))
   }
 
-  const filteredGroups = mockGroups.filter((group) => {
-    const matchesSearch = group.name.toLowerCase().includes(searchTerm.toLowerCase())
-    const matchesService = !serviceFilter || group.serviceAccount.name.includes(serviceFilter)
-    return matchesSearch && matchesService
+  // 过滤客服（本地过滤）
+  const filteredGroups = groups.filter((group) => {
+    const matchesService = !serviceFilter || group.serviceAccount?.name?.includes(serviceFilter)
+    return matchesService
   })
 
   return (
@@ -121,22 +146,14 @@ export function GroupSelector({
                                 className="w-full h-full object-cover"
                               />
                             </div>
-                            <span className="text-sm truncate">{group.name}</span>
+                            <div>
+                              <div className="font-medium text-sm">{group.name}</div>
+                              <div className="text-xs text-gray-500">群主：{group.serviceAccount?.name}</div>
+                            </div>
                           </div>
                         </TableCell>
                         <TableCell>
-                          <div className="flex items-center space-x-2">
-                            <div className="flex -space-x-2 flex-shrink-0">
-                              <div className="w-8 h-8 rounded-full overflow-hidden border-2 border-white">
-                                <img
-                                  src={group.serviceAccount.avatar || "/placeholder.svg?height=32&width=32"}
-                                  alt={group.serviceAccount.name}
-                                  className="w-full h-full object-cover"
-                                />
-                              </div>
-                            </div>
-                            <span className="text-xs truncate">{group.serviceAccount.name}</span>
-                          </div>
+                          <span className="text-xs text-gray-500">群主：{group.serviceAccount?.name}</span>
                         </TableCell>
                         <TableCell>
                           <Button
@@ -191,6 +208,7 @@ export function GroupSelector({
                   className="pl-8"
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
+                  onKeyDown={e => e.key === 'Enter' && handleSearch()}
                 />
               </div>
               <div className="sm:w-64">
@@ -200,51 +218,69 @@ export function GroupSelector({
                   onChange={(e) => setServiceFilter(e.target.value)}
                 />
               </div>
+              <Button size="sm" variant="outline" onClick={handleSearch}>搜索</Button>
             </div>
-
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="w-16">序号</TableHead>
-                    <TableHead>群信息</TableHead>
-                    <TableHead>归属客服</TableHead>
-                    <TableHead className="w-20">操作</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredGroups.map((group, index) => (
-                    <TableRow key={group.id}>
-                      <TableCell>{index + 1}</TableCell>
-                      <TableCell>
-                        <div className="flex items-center space-x-2">
-                          <div className="w-8 h-8 rounded overflow-hidden flex-shrink-0">
-                            <img
-                              src={group.avatar || "/placeholder.svg?height=32&width=32"}
-                              alt={group.name}
-                              className="w-full h-full object-cover"
-                            />
-                          </div>
-                          <span className="text-sm truncate">{group.name}</span>
-                        </div>
-                      </TableCell>
-                      <TableCell className="truncate">{group.serviceAccount.name}</TableCell>
-                      <TableCell>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => handleAddGroup(group)}
-                          disabled={selectedGroups.some((g) => g.id === group.id)}
-                          className="whitespace-nowrap"
-                        >
-                          {selectedGroups.some((g) => g.id === group.id) ? "已选择" : "选择"}
-                        </Button>
-                      </TableCell>
+            <div className="overflow-x-auto max-h-96">
+              {loading ? (
+                <div className="text-center text-gray-400 py-8">加载中...</div>
+              ) : filteredGroups.length === 0 ? (
+                <div className="text-center text-gray-400 py-8">暂无群聊</div>
+              ) : (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-16">序号</TableHead>
+                      <TableHead>群信息</TableHead>
+                      <TableHead>推送客服</TableHead>
+                      <TableHead className="w-20">操作</TableHead>
                     </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredGroups.map((group, index) => (
+                      <TableRow key={group.id}>
+                        <TableCell>{(currentPage - 1) * pageSize + index + 1}</TableCell>
+                        <TableCell>
+                          <div className="flex items-center space-x-2">
+                            <div className="w-8 h-8 rounded overflow-hidden flex-shrink-0">
+                              <img
+                                src={group.avatar || "/placeholder.svg?height=32&width=32"}
+                                alt={group.name}
+                                className="w-full h-full object-cover"
+                              />
+                            </div>
+                            <div>
+                              <div className="font-medium text-sm">{group.name}</div>
+                              <div className="text-xs text-gray-500">群主：{group.serviceAccount?.name}</div>
+                            </div>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-xs text-gray-500">群主：{group.serviceAccount?.name}</span>
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            variant="default"
+                            size="sm"
+                            onClick={() => handleAddGroup(group)}
+                            disabled={selectedGroups.some((g) => g.id === group.id)}
+                          >
+                            {selectedGroups.some((g) => g.id === group.id) ? "已添加" : "添加"}
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              )}
             </div>
+            {/* 分页 */}
+            {total > pageSize && (
+              <div className="flex justify-center items-center gap-2 mt-4">
+                <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} / {Math.ceil(total / pageSize)} 页</span>
+                <Button size="sm" variant="outline" disabled={currentPage === Math.ceil(total / pageSize)} onClick={() => setCurrentPage(p => Math.min(Math.ceil(total / pageSize), p + 1))}>下一页</Button>
+              </div>
+            )}
           </div>
         </DialogContent>
       </Dialog>