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

313
Cunkebao/app/workspace/group-push/[id]/edit/page.tsx
View File

@@ -1,121 +1,137 @@
"use client"
import { useState, useEffect } from "react"
import { use, useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { StepIndicator } from "../../components/step-indicator"
import { MessageEditor } from "../../components/message-editor"
import { FriendSelector } from "../../components/friend-selector"
import { ArrowLeft, ArrowRight, Check, Loader2 } from "lucide-react"
import { BasicSettings } from "../../components/basic-settings"
import { GroupSelector } from "../../components/group-selector"
import { ContentSelector } from "../../components/content-selector"
import type { WechatGroup, ContentLibrary } from "@/types/group-push"
import { useToast } from "@/components/ui/use-toast"
import { api } from "@/lib/api"
import { showToast } from "@/lib/toast"
const steps = ["推送信息", "选择好友"]
const steps = [
{ id: 1, title: "步骤 1", subtitle: "基础设置" },
{ id: 2, title: "步骤 2", subtitle: "选择社群" },
{ id: 3, title: "步骤 3", subtitle: "选择内容库" },
{ id: 4, title: "步骤 4", subtitle: "京东联盟" },
]
// 模拟数据
const mockPushTasks = {
"1": {
id: "1",
name: "618活动推广消息",
content: {
text: "618年中大促，全场商品5折起！限时抢购，先到先得！",
images: ["/placeholder.svg?height=200&width=200"],
video: null,
link: "https://example.com/618",
},
selectedFriends: ["1", "3", "5"],
pushTime: "2025-06-18 10:00:00",
progress: 100,
status: "已完成",
},
"2": {
id: "2",
name: "新品上市通知",
content: {
text: "我们的新产品已经上市，快来体验吧！",
images: [],
video: "/placeholder.svg?height=400&width=400",
link: null,
},
selectedFriends: ["2", "4", "6", "8"],
pushTime: "2025-03-25 09:30:00",
progress: 75,
status: "进行中",
},
}
export default function EditPushPage({ params }: { params: { id: string } }) {
export default function EditGroupPushPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = use(params)
const router = useRouter()
const { toast } = useToast()
const [currentStep, setCurrentStep] = useState(1)
const [loading, setLoading] = useState(true)
const [currentStep, setCurrentStep] = useState(0)
const [taskName, setTaskName] = useState("")
const [messageContent, setMessageContent] = useState({
text: "",
images: [],
video: null,
link: null,
const [formData, setFormData] = useState({
name: "",
pushTimeStart: "06:00",
pushTimeEnd: "23:59",
dailyPushCount: 20,
pushOrder: "latest" as "earliest" | "latest",
isLoopPush: false,
isImmediatePush: false,
isEnabled: false,
groups: [] as WechatGroup[],
contentLibraries: [] as ContentLibrary[],
})
const [selectedFriends, setSelectedFriends] = useState<string[]>([])
// 拉取详情
useEffect(() => {
// 模拟加载数据
setTimeout(() => {
const task = mockPushTasks[params.id as keyof typeof mockPushTasks]
if (task) {
setTaskName(task.name)
setMessageContent(task.content)
setSelectedFriends(task.selectedFriends)
}
setLoading(false)
}, 500)
}, [params.id])
const handleNext = () => {
if (currentStep === 0) {
// 验证第一步
if (!taskName.trim()) {
toast({
title: "请输入任务名称",
variant: "destructive",
})
return
}
if (!messageContent.text && messageContent.images.length === 0 && !messageContent.video && !messageContent.link) {
toast({
title: "请添加至少一种消息内容",
variant: "destructive",
})
return
const fetchDetail = async () => {
setLoading(true)
try {
const res = await api.get(`/v1/workbench/detail?id=${id}`) as any
if (res.code === 200 && res.data) {
const data = res.data
setFormData({
name: data.name || "",
pushTimeStart: data.config?.startTime || "06:00",
pushTimeEnd: data.config?.endTime || "23:59",
dailyPushCount: data.config?.maxPerDay || 20,
pushOrder: data.config?.pushOrder === 2 ? "latest" : "earliest",
isLoopPush: data.config?.isLoop === 1,
isImmediatePush: false, // 详情接口如有此字段可补充
isEnabled: data.status === 1,
groups: (data.config.groupList || []).map((item: any) => ({
id: String(item.id),
name: item.groupName,
avatar: item.groupAvatar || item.avatar,
serviceAccount: {
id: item.ownerWechatId,
name: item.nickName,
avatar: "",
},
})),
contentLibraries: (data.config.contentLibraryList || []).map((item: any) => ({
id: String(item.id),
name: item.name,
sourceType: item.sourceType,
selectedFriends: item.selectedFriends || [],
selectedGroups: item.selectedGroups || [],
})),
})
} else {
showToast(res.msg || "获取详情失败", "error")
}
} catch (e) {
showToast((e as any)?.message || "网络错误", "error")
} finally {
setLoading(false)
}
}
fetchDetail()
// eslint-disable-next-line
}, [id])
setCurrentStep((prev) => prev + 1)
const handleBasicSettingsNext = (values: any) => {
setFormData((prev) => ({ ...prev, ...values }))
setCurrentStep(2)
}
const handlePrevious = () => {
setCurrentStep((prev) => prev - 1)
const handleGroupsChange = (groups: WechatGroup[]) => {
setFormData((prev) => ({ ...prev, groups }))
}
const handleSubmit = () => {
if (selectedFriends.length === 0) {
toast({
title: "请选择至少一个好友",
variant: "destructive",
})
return
const handleLibrariesChange = (contentLibraries: ContentLibrary[]) => {
setFormData((prev) => ({ ...prev, contentLibraries }))
}
const handleSave = async () => {
const loadingToast = showToast("正在保存...", "loading", true)
try {
const paramsData = {
id,
name: formData.name,
type: 3,
pushType: 1,
startTime: formData.pushTimeStart,
endTime: formData.pushTimeEnd,
maxPerDay: formData.dailyPushCount,
pushOrder: formData.pushOrder === "latest" ? 2 : 1,
isLoop: formData.isLoopPush ? 1 : 0,
status: formData.isEnabled ? 1 : 0,
groups: (formData.groups || []).filter(g => g && g.id).map((g: any) => g.id),
contentLibraries: (formData.contentLibraries || []).filter(c => c && c.id).map((c: any) => c.id),
}
const res = await api.post("/v1/workbench/update", paramsData) as any
loadingToast.remove()
if (res.code === 200) {
showToast("保存成功", "success")
router.push("/workspace/group-push")
} else {
showToast(res.msg || "保存失败", "error")
}
} catch (e) {
loadingToast.remove()
showToast((e as any)?.message || "网络错误", "error")
}
}
// 模拟提交
toast({
title: "推送任务更新成功",
description: `已更新推送任务 "${taskName}"`,
})
// 跳转回列表页
const handleCancel = () => {
router.push("/workspace/group-push")
}
@@ -123,7 +139,7 @@ export default function EditPushPage({ params }: { params: { id: string } }) {
return (
<div className="container mx-auto py-6 flex justify-center items-center min-h-[60vh]">
<div className="flex flex-col items-center">
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
<span className="animate-spin h-8 w-8 text-blue-500">⏳</span>
<p className="mt-2 text-gray-500">加载中...</p>
</div>
</div>
@@ -131,62 +147,77 @@ export default function EditPushPage({ params }: { params: { id: string } }) {
}
return (
<div className="container mx-auto py-6">
{/* 顶部导航栏 */}
<div className="flex items-center justify-between mb-6 relative">
<Button variant="ghost" size="icon" onClick={() => router.push("/workspace/group-push")} className="mr-auto">
<div className="container mx-auto py-4 px-4 sm:px-6 md:py-6">
<div className="flex items-center mb-6">
<Button variant="ghost" size="icon" onClick={() => router.push("/workspace/group-push")} className="mr-2">
<ArrowLeft className="h-5 w-5" />
</Button>
<h1 className="text-2xl font-bold absolute left-1/2 transform -translate-x-1/2">编辑推送</h1>
<div className="w-10"></div> {/* 占位元素，保持标题居中 */}
<h1 className="text-xl font-bold">编辑社群推送任务</h1>
</div>
<StepIndicator currentStep={currentStep} steps={steps} />
<Card>
<CardContent className="pt-6">
{currentStep === 0 ? (
<div className="space-y-6">
<div>
<Label htmlFor="task-name">任务名称</Label>
<Input
id="task-name"
placeholder="请输入任务名称"
value={taskName}
onChange={(e) => setTaskName(e.target.value)}
/>
</div>
<div className="mt-8">
{currentStep === 1 && (
<BasicSettings
defaultValues={{
name: formData.name,
pushTimeStart: formData.pushTimeStart,
pushTimeEnd: formData.pushTimeEnd,
dailyPushCount: formData.dailyPushCount,
pushOrder: formData.pushOrder,
isLoopPush: formData.isLoopPush,
isImmediatePush: formData.isImmediatePush,
isEnabled: formData.isEnabled,
}}
onNext={handleBasicSettingsNext}
onSave={handleSave}
onCancel={handleCancel}
/>
)}
<div>
<Label>消息内容</Label>
<MessageEditor onMessageChange={setMessageContent} defaultValues={messageContent} />
</div>
{currentStep === 2 && (
<GroupSelector
selectedGroups={formData.groups}
onGroupsChange={handleGroupsChange}
onPrevious={() => setCurrentStep(1)}
onNext={() => setCurrentStep(3)}
onSave={handleSave}
onCancel={handleCancel}
/>
)}
<div className="flex justify-end">
<Button onClick={handleNext}>
下一步
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
</div>
{currentStep === 3 && (
<ContentSelector
selectedLibraries={formData.contentLibraries}
onLibrariesChange={handleLibrariesChange}
onPrevious={() => setCurrentStep(2)}
onNext={() => setCurrentStep(4)}
onSave={handleSave}
onCancel={handleCancel}
/>
)}
{currentStep === 4 && (
<div className="space-y-6">
<div className="border rounded-md p-8 text-center text-gray-500">
京东联盟设置（此步骤为占位，实际功能待开发）
</div>
) : (
<div className="space-y-6">
<FriendSelector onSelectionChange={setSelectedFriends} defaultSelectedFriendIds={selectedFriends} />
<div className="flex justify-between">
<Button variant="outline" onClick={handlePrevious}>
<ArrowLeft className="mr-2 h-4 w-4" />
上一步
</Button>
<Button onClick={handleSubmit}>
<Check className="mr-2 h-4 w-4" />
确认
</Button>
</div>
<div className="flex space-x-2 justify-center sm:justify-end">
<Button type="button" variant="outline" onClick={() => setCurrentStep(3)} className="flex-1 sm:flex-none">
上一步
</Button>
<Button type="button" onClick={handleSave} className="flex-1 sm:flex-none">
完成
</Button>
<Button type="button" variant="outline" onClick={handleCancel} className="flex-1 sm:flex-none">
取消
</Button>
</div>
)}
</CardContent>
</Card>
</div>
)}
</div>
</div>
)
}

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>

37
Cunkebao/app/workspace/group-push/new/page.tsx
View File

@@ -10,6 +10,8 @@ import { GroupSelector } from "../components/group-selector"
import { ContentSelector } from "../components/content-selector"
import type { WechatGroup, ContentLibrary } from "@/types/group-push"
import { useToast } from "@/components/ui/use-toast"
import { api } from "@/lib/api"
import { showToast } from "@/lib/toast"
const steps = [
{ id: 1, title: "步骤 1", subtitle: "基础设置" },
@@ -48,13 +50,34 @@ export default function NewGroupPushPage() {
setFormData((prev) => ({ ...prev, contentLibraries }))
}
const handleSave = () => {
// 这里可以添加保存逻辑，例如API调用
toast({
title: "保存成功",
description: `社群推送任务"${formData.name || "未命名任务"}"已保存`,
})
router.push("/workspace/group-push")
const handleSave = async () => {
const loadingToast = showToast("正在保存...", "loading", true)
try {
const params = {
name: formData.name,
type: 3,
pushType: 1,
startTime: formData.pushTimeStart,
endTime: formData.pushTimeEnd,
maxPerDay: formData.dailyPushCount,
pushOrder: formData.pushOrder === "latest" ? 2 : 1,
isLoop: formData.isLoopPush ? 1 : 0,
status: formData.isEnabled ? 1 : 0,
groups: formData.groups.map(g => g.id),
contentLibraries: formData.contentLibraries.map(c => c.id),
}
const res = await api.post("/v1/workbench/create", params)
loadingToast.remove()
if (res.code === 200) {
showToast("保存成功", "success")
router.push("/workspace/group-push")
} else {
showToast(res.msg || "保存失败", "error")
}
} catch (e) {
loadingToast.remove()
showToast(e?.message || "网络错误", "error")
}
}
const handleCancel = () => {

238
Cunkebao/app/workspace/group-push/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { useState } from "react"
import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
@@ -18,78 +18,121 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
import { PlusCircle, MoreVertical, Edit, Trash2, ArrowLeft, Clock, Search, Filter, RefreshCw } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { api } from "@/lib/api"
import { showToast } from "@/lib/toast"
// 模拟数据
const mockTasks = [
{
id: "1",
name: "社群推送测试",
pushTimeRange: "06:00 - 23:59",
dailyPushCount: 20,
pushOrder: "latest",
isLoopPush: false,
isEnabled: true,
groupCount: 3,
contentLibraryCount: 2,
createdAt: "2025-03-15 14:30",
lastPushTime: "2025-03-20 10:25",
totalPushCount: 245,
},
{
id: "2",
name: "产品更新推送",
pushTimeRange: "09:00 - 21:00",
dailyPushCount: 15,
pushOrder: "earliest",
isLoopPush: true,
isEnabled: false,
groupCount: 5,
contentLibraryCount: 1,
createdAt: "2025-03-10 10:15",
lastPushTime: "2025-03-19 16:45",
totalPushCount: 128,
},
{
id: "3",
name: "新客户欢迎",
pushTimeRange: "08:00 - 22:00",
dailyPushCount: 10,
pushOrder: "latest",
isLoopPush: true,
isEnabled: true,
groupCount: 2,
contentLibraryCount: 1,
createdAt: "2025-03-05 09:20",
lastPushTime: "2025-03-18 11:30",
totalPushCount: 87,
},
]
interface GroupPushTask {
id: string
name: string
status: number
config: {
maxPerDay: number
pushOrder: number
isLoop: number
groups: any[]
contentLibraries: any[]
lastPushTime: string
createTime: string
}
}
export default function GroupPushPage() {
const router = useRouter()
const [tasks, setTasks] = useState(mockTasks)
const [tasks, setTasks] = useState<GroupPushTask[]>([])
const [searchTerm, setSearchTerm] = useState("")
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
const [taskToDelete, setTaskToDelete] = useState<string | null>(null)
const [loading, setLoading] = useState(false)
const [currentPage, setCurrentPage] = useState(1)
const [total, setTotal] = useState(0)
const pageSize = 10
// 拉取数据
const fetchTasks = async (page = 1, search = "") => {
setLoading(true)
const loadingToast = showToast("正在加载...", "loading", true)
try {
const params = new URLSearchParams({
type: "3",
page: page.toString(),
limit: pageSize.toString(),
})
if (search) params.append("keyword", search)
const res = await api.get(`/v1/workbench/list?${params.toString()}`) as any
loadingToast.remove()
if (res.code === 200) {
setTasks(res.data.list)
setTotal(res.data.total)
} else {
showToast(res.msg || "获取失败", "error")
}
} catch (e) {
loadingToast.remove()
showToast((e as any)?.message || "网络错误", "error")
} finally {
setLoading(false)
}
}
useEffect(() => {
fetchTasks(currentPage, searchTerm)
// eslint-disable-next-line
}, [currentPage])
const handleDelete = (id: string) => {
setTaskToDelete(id)
setDeleteDialogOpen(true)
}
const confirmDelete = () => {
const confirmDelete = async () => {
if (taskToDelete) {
setTasks(tasks.filter((task) => task.id !== taskToDelete))
const loadingToast = showToast("正在删除...", "loading", true)
try {
const res = await api.delete(`/v1/workbench/delete?id=${taskToDelete}`) as any
loadingToast.remove()
if (res.code === 200) {
showToast("删除成功", "success")
fetchTasks(currentPage, searchTerm)
} else {
showToast(res.msg || "删除失败", "error")
}
} catch (e) {
loadingToast.remove()
showToast((e as any)?.message || "网络错误", "error")
}
setTaskToDelete(null)
}
setDeleteDialogOpen(false)
}
const handleToggleStatus = (id: string, isEnabled: boolean) => {
setTasks(tasks.map((task) => (task.id === id ? { ...task, isEnabled } : task)))
const handleToggleStatus = async (id: string, enabled: boolean) => {
const loadingToast = showToast("正在更新状态...", "loading", true)
try {
const res = await api.post('/v1/workbench/update-status', {
id,
status: enabled ? 1 : 0
}) as any
loadingToast.remove()
if (res.code === 200) {
showToast("状态已更新", "success")
fetchTasks(currentPage, searchTerm)
} else {
showToast(res.msg || "操作失败", "error")
}
} catch (e) {
loadingToast.remove()
showToast((e as any)?.message || "网络错误", "error")
}
}
const filteredTasks = tasks.filter((task) => task.name.toLowerCase().includes(searchTerm.toLowerCase()))
const handleSearch = () => {
setCurrentPage(1)
fetchTasks(1, searchTerm)
}
const handleRefresh = () => {
fetchTasks(currentPage, searchTerm)
}
return (
<div className="bg-gray-50 min-h-screen pb-16">
@@ -122,31 +165,59 @@ export default function GroupPushPage() {
className="pl-9"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
onKeyDown={e => e.key === 'Enter' && handleSearch()}
/>
</div>
<Button variant="outline" size="icon">
<Button variant="outline" size="icon" onClick={handleSearch}>
<Filter className="h-4 w-4" />
</Button>
<Button variant="outline" size="icon">
<RefreshCw className="h-4 w-4" />
<Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
<RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
</Button>
</div>
</Card>
{/* 任务列表 */}
{loading ? (
<div className="space-y-4">
{filteredTasks.map((task) => (
{[...Array(3)].map((_, index) => (
<Card key={index} className="p-4 animate-pulse">
<div className="h-6 bg-gray-200 rounded w-1/4 mb-4"></div>
<div className="space-y-3">
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
<div className="h-4 bg-gray-200 rounded w-1/2"></div>
</div>
</Card>
))}
</div>
) : tasks.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-center">
<div className="bg-gray-100 p-4 rounded-full mb-4">
<Clock className="h-10 w-10 text-gray-400" />
</div>
<h3 className="text-lg font-medium text-gray-900 mb-1">暂无社群推送任务</h3>
<p className="text-gray-500 mb-4">点击"新建任务"按钮创建您的第一个社群推送任务</p>
<Link href="/workspace/group-push/new">
<Button>
<PlusCircle className="h-4 w-4 mr-2" />
新建任务
</Button>
</Link>
</div>
) : (
<div className="space-y-4 mt-2">
{tasks.map((task) => (
<Card key={task.id} className="p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
<h3 className="font-medium">{task.name}</h3>
<Badge variant={task.isEnabled ? "success" : "secondary"}>
{task.isEnabled ? "进行中" : "已暂停"}
<Badge variant={task.status === 1 ? "success" : "secondary"}>
{task.status === 1 ? "进行中" : "已暂停"}
</Badge>
</div>
<div className="flex items-center space-x-2">
<Switch
checked={task.isEnabled}
checked={task.status === 1}
onCheckedChange={(checked) => handleToggleStatus(task.id, checked)}
/>
<DropdownMenu>
@@ -193,42 +264,51 @@ export default function GroupPushPage() {
<div className="grid grid-cols-2 gap-4 mb-4">
<div className="text-sm text-gray-500">
<div>推送设备：{task.groupCount} 个</div>
<div>内容库：{task.contentLibraryCount} 个</div>
<div>推送时间：{task.pushTimeRange}</div>
<div>推送群数：{task.config.groups?.length || 0} 个</div>
<div>内容库：{task.config.contentLibraries?.length || 0} 个</div>
</div>
<div className="text-sm text-gray-500">
<div>每日推送：{task.dailyPushCount} 条</div>
<div>已推送：{task.totalPushCount} 条</div>
<div>推送顺序：{task.pushOrder === "latest" ? "按最新" : "按最早"}</div>
<div>每日推送：{task.config.maxPerDay} 条</div>
<div>推送顺序：{task.config.pushOrder === 2 ? "按最新" : "按最早"}</div>
<div>循环推送：{task.config.isLoop === 1 ? "是" : "否"}</div>
</div>
</div>
<div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
<div className="flex items-center">
<Clock className="w-4 h-4 mr-1" />
上次推送：{task.lastPushTime}
上次推送：{task.config.lastPushTime || "--"}
</div>
<div>创建时间：{task.createdAt}</div>
<div>创建时间：{task.config.createTime || "--"}</div>
</div>
</Card>
))}
</div>
)}
{/* 空状态 */}
{filteredTasks.length === 0 && (
<div className="flex flex-col items-center justify-center py-12 text-center">
<div className="bg-gray-100 p-4 rounded-full mb-4">
<Clock className="h-10 w-10 text-gray-400" />
{/* 分页 */}
{!loading && total > pageSize && (
<div className="flex justify-center mt-6 space-x-2">
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
disabled={currentPage === 1 || loading}
>
上一页
</Button>
<div className="flex items-center space-x-1">
<span className="text-sm text-gray-500">第 {currentPage} 页</span>
<span className="text-sm text-gray-500">共 {Math.ceil(total / pageSize)} 页</span>
</div>
<h3 className="text-lg font-medium text-gray-900 mb-1">暂无社群推送任务</h3>
<p className="text-gray-500 mb-4">点击"新建任务"按钮创建您的第一个社群推送任务</p>
<Link href="/workspace/group-push/new">
<Button>
<PlusCircle className="h-4 w-4 mr-2" />
新建任务
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage(prev => Math.min(Math.ceil(total / pageSize), prev + 1))}
disabled={currentPage >= Math.ceil(total / pageSize) || loading}
>
下一页
</Button>
</Link>
</div>
)}
</div>