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

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

Browse Source
This commit is contained in:
wong
2025-06-06 14:45:06 +08:00
parent 94722fb051
commit c0f80df780
9 changed files with 816 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
Cunkebao/app/workspace/group-push/components/basic-settings.tsx
View File

@@ -16,7 +16,7 @@ interface BasicSettingsProps {
dailyPushCount: number
pushOrder: "earliest" | "latest"
isLoopPush: boolean
isImmediatePush: boolean
pushTypePush: boolean
isEnabled: boolean
}
onNext: (values: any) => void
@@ -32,7 +32,7 @@ export function BasicSettings({
dailyPushCount: 20,
pushOrder: "latest",
isLoopPush: false,
isImmediatePush: false,
pushTypePush: false,
isEnabled: false,
},
onNext,
@@ -164,20 +164,20 @@ export function BasicSettings({
{/* 是否立即推送 */}
<div className="flex items-center justify-between">
<Label htmlFor="isImmediatePush" className="flex items-center text-sm font-medium">
<Label htmlFor="pushTypePush" className="flex items-center text-sm font-medium">
<span className="text-red-500 mr-1">*</span>是否立即推送:
</Label>
<div className="flex items-center space-x-2">
<span className={values.isImmediatePush ? "text-gray-400" : "text-gray-900"}>否</span>
<span className={values.pushTypePush ? "text-gray-400" : "text-gray-900"}>否</span>
<Switch
id="isImmediatePush"
checked={values.isImmediatePush}
onCheckedChange={(checked) => handleChange("isImmediatePush", checked)}
id="pushTypePush"
checked={values.pushTypePush}
onCheckedChange={(checked) => handleChange("pushTypePush", checked)}
/>
<span className={values.isImmediatePush ? "text-gray-900" : "text-gray-400"}>是</span>
<span className={values.pushTypePush ? "text-gray-900" : "text-gray-400"}>是</span>
</div>
</div>
{values.isImmediatePush && (
{values.pushTypePush && (
<div className="bg-yellow-50 border border-yellow-200 rounded-md p-3 text-sm text-yellow-700">
如果启用，系统会把内容库里所有的内容按顺序推送到指定的社群
</div>

100
Cunkebao/app/workspace/group-push/components/content-selector.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { useState } from "react"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
@@ -8,32 +8,8 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
import { Input } from "@/components/ui/input"
import { Search, Plus, Trash2 } from "lucide-react"
import type { ContentLibrary } from "@/types/group-push"
// 模拟数据
const mockContentLibraries: ContentLibrary[] = [
{
id: "1",
name: "测试11",
targets: [{ id: "t1", avatar: "/placeholder.svg?height=40&width=40" }],
},
{
id: "2",
name: "测试166666",
targets: [
{ id: "t2", avatar: "/placeholder.svg?height=40&width=40" },
{ id: "t3", avatar: "/placeholder.svg?height=40&width=40" },
{ id: "t4", avatar: "/placeholder.svg?height=40&width=40" },
],
},
{
id: "3",
name: "产品介绍",
targets: [
{ id: "t5", avatar: "/placeholder.svg?height=40&width=40" },
{ id: "t6", avatar: "/placeholder.svg?height=40&width=40" },
],
},
]
import { api } from "@/lib/api"
import { showToast } from "@/lib/toast"
interface ContentSelectorProps {
selectedLibraries: ContentLibrary[]
@@ -54,6 +30,44 @@ export function ContentSelector({
}: ContentSelectorProps) {
const [isDialogOpen, setIsDialogOpen] = useState(false)
const [searchTerm, setSearchTerm] = useState("")
const [libraries, setLibraries] = useState<ContentLibrary[]>([])
const [loading, setLoading] = useState(false)
// 拉取内容库列表
const fetchLibraries = async (keyword = "") => {
setLoading(true)
try {
const params = new URLSearchParams({
page: "1",
limit: "100",
keyword: keyword.trim(),
})
const res = await api.get(`/v1/content/library/list?${params.toString()}`) as any
if (res.code === 200 && Array.isArray(res.data?.list)) {
setLibraries(res.data.list)
} else {
setLibraries([])
showToast(res.msg || "获取内容库失败", "error")
}
} catch (e) {
setLibraries([])
showToast((e as any)?.message || "网络错误", "error")
} finally {
setLoading(false)
}
}
// 弹窗打开/搜索时拉取
useEffect(() => {
if (isDialogOpen) {
fetchLibraries(searchTerm)
}
// eslint-disable-next-line
}, [isDialogOpen])
const handleSearch = () => {
fetchLibraries(searchTerm)
}
const handleAddLibrary = (library: ContentLibrary) => {
if (!selectedLibraries.some((l) => l.id === library.id)) {
@@ -66,7 +80,7 @@ export function ContentSelector({
onLibrariesChange(selectedLibraries.filter((library) => library.id !== libraryId))
}
const filteredLibraries = mockContentLibraries.filter((library) =>
const filteredLibraries = libraries.filter((library) =>
library.name.toLowerCase().includes(searchTerm.toLowerCase()),
)
@@ -104,14 +118,14 @@ export function ContentSelector({
<TableCell>{library.name}</TableCell>
<TableCell>
<div className="flex -space-x-2 flex-wrap">
{library.targets.map((target) => (
{(((library as any).sourceType === 1 ? (library as any).selectedFriends : (library as any).selectedGroups) || []).map((target: any) => (
<div
key={target.id}
className="w-10 h-10 rounded-md overflow-hidden border-2 border-white"
>
<img
src={target.avatar || "/placeholder.svg?height=40&width=40"}
alt="Target"
alt={target.nickname || target.name || "Target"}
className="w-full h-full object-cover"
/>
</div>
@@ -161,17 +175,24 @@ export function ContentSelector({
<DialogTitle>选择内容库</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div className="relative">
<div className="relative flex items-center gap-2">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
<Input
placeholder="搜索内容库名称"
className="pl-8"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
onKeyDown={e => e.key === 'Enter' && handleSearch()}
/>
<Button size="sm" variant="outline" onClick={handleSearch}>搜索</Button>
</div>
<div className="overflow-x-auto">
{loading ? (
<div className="text-center text-gray-400 py-8">加载中...</div>
) : filteredLibraries.length === 0 ? (
<div className="text-center text-gray-400 py-8">暂无内容库</div>
) : (
<Table>
<TableHeader>
<TableRow>
@@ -188,11 +209,14 @@ export function ContentSelector({
<TableCell>{library.name}</TableCell>
<TableCell>
<div className="flex -space-x-2 flex-wrap">
{library.targets.map((target) => (
<div key={target.id} className="w-10 h-10 rounded-md overflow-hidden border-2 border-white">
{(((library as any).sourceType === 1 ? (library as any).selectedFriends : (library as any).selectedGroups) || []).map((target: any) => (
<div
key={target.id}
className="w-10 h-10 rounded-md overflow-hidden border-2 border-white"
>
<img
src={target.avatar || "/placeholder.svg?height=40&width=40"}
alt="Target"
alt={target.nickname || target.name || "Target"}
className="w-full h-full object-cover"
/>
</div>
@@ -201,19 +225,19 @@ export function ContentSelector({
</TableCell>
<TableCell>
<Button
variant="outline"
variant="default"
size="sm"
onClick={() => handleAddLibrary(library)}
disabled={selectedLibraries.some((l) => l.id === library.id)}
className="whitespace-nowrap"
disabled={selectedLibraries.some((l) => String(l.id) === String(library.id))}
>
{selectedLibraries.some((l) => l.id === library.id) ? "已选择" : "选择"}
{selectedLibraries.some((l) => String(l.id) === String(library.id)) ? "已添加" : "添加"}
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</div>
</div>
</DialogContent>

224
Cunkebao/app/workspace/group-push/components/group-selector.tsx
View File

@@ -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>