422 lines
15 KiB
TypeScript
422 lines
15 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import {
|
||
ChevronLeft,
|
||
Plus,
|
||
Filter,
|
||
Search,
|
||
RefreshCw,
|
||
MoreVertical,
|
||
Clock,
|
||
Edit,
|
||
Trash2,
|
||
Eye,
|
||
Copy,
|
||
ChevronDown,
|
||
ChevronUp,
|
||
Settings,
|
||
Calendar,
|
||
Users,
|
||
ThumbsUp,
|
||
} from "lucide-react"
|
||
import { Card } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Input } from "@/components/ui/input"
|
||
import Link from "next/link"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { useRouter } from "next/navigation"
|
||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||
import { Switch } from "@/components/ui/switch"
|
||
import { Progress } from "@/components/ui/progress"
|
||
import { api } from "@/lib/api"
|
||
import { showToast } from "@/lib/toast"
|
||
|
||
interface TaskConfig {
|
||
id: number
|
||
workbenchId: number
|
||
interval: number
|
||
maxLikes: number
|
||
startTime: string
|
||
endTime: string
|
||
contentTypes: string[]
|
||
devices: number[]
|
||
targetGroups: string[]
|
||
tagOperator: number
|
||
createTime: string
|
||
updateTime: string
|
||
}
|
||
|
||
interface Task {
|
||
id: number
|
||
name: string
|
||
type: number
|
||
status: number
|
||
autoStart: number
|
||
createTime: string
|
||
updateTime: string
|
||
config: TaskConfig
|
||
}
|
||
|
||
interface TaskListResponse {
|
||
code: number
|
||
msg: string
|
||
data: {
|
||
list: Task[]
|
||
total: number
|
||
}
|
||
}
|
||
|
||
interface ApiResponse {
|
||
code: number
|
||
msg: string
|
||
}
|
||
|
||
export default function AutoLikePage() {
|
||
const router = useRouter()
|
||
const [expandedTaskId, setExpandedTaskId] = useState<number | null>(null)
|
||
const [tasks, setTasks] = useState<Task[]>([])
|
||
const [loading, setLoading] = useState(false)
|
||
const [searchName, setSearchName] = useState("")
|
||
const [currentPage, setCurrentPage] = useState(1)
|
||
const [total, setTotal] = useState(0)
|
||
const pageSize = 10
|
||
|
||
const fetchTasks = async (page: number, name?: string) => {
|
||
const loadingToast = showToast("正在加载任务列表...", "loading", true);
|
||
try {
|
||
setLoading(true)
|
||
const queryParams = new URLSearchParams({
|
||
type: '1',
|
||
page: page.toString(),
|
||
limit: pageSize.toString(),
|
||
})
|
||
if (name) {
|
||
queryParams.append('name', name)
|
||
}
|
||
const response = await api.get<TaskListResponse>(`/v1/workbench/list?${queryParams.toString()}`)
|
||
|
||
if (response.code === 200) {
|
||
setTasks(response.data.list)
|
||
setTotal(response.data.total)
|
||
} else {
|
||
showToast(response.msg || "请稍后再试", "error")
|
||
}
|
||
} catch (error: any) {
|
||
console.error("获取任务列表失败:", error)
|
||
showToast(error?.message || "请检查网络连接", "error")
|
||
} finally {
|
||
loadingToast.remove();
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
fetchTasks(currentPage, searchName)
|
||
}, [currentPage])
|
||
|
||
const handleSearch = () => {
|
||
setCurrentPage(1)
|
||
fetchTasks(1, searchName)
|
||
}
|
||
|
||
const handleRefresh = () => {
|
||
fetchTasks(currentPage, searchName)
|
||
}
|
||
|
||
const toggleExpand = (taskId: number) => {
|
||
setExpandedTaskId(expandedTaskId === taskId ? null : taskId)
|
||
}
|
||
|
||
const handleDelete = async (taskId: number) => {
|
||
const loadingToast = showToast("正在删除任务...", "loading", true);
|
||
try {
|
||
const response = await api.delete<ApiResponse>(`/v1/workbench/delete?id=${taskId}`)
|
||
|
||
if (response.code === 200) {
|
||
// 删除成功后刷新列表
|
||
loadingToast.remove();
|
||
fetchTasks(currentPage, searchName)
|
||
showToast(response.msg || "已成功删除点赞任务", "success")
|
||
} else {
|
||
loadingToast.remove();
|
||
showToast(response.msg || "请稍后再试", "error")
|
||
}
|
||
} catch (error: any) {
|
||
console.error("删除任务失败:", error)
|
||
loadingToast.remove();
|
||
showToast(error?.message || "请检查网络连接", "error")
|
||
}
|
||
}
|
||
|
||
const handleEdit = (taskId: number) => {
|
||
router.push(`/workspace/auto-like/${taskId}/edit`)
|
||
}
|
||
|
||
const handleView = (taskId: number) => {
|
||
router.push(`/workspace/auto-like/${taskId}`)
|
||
}
|
||
|
||
const handleCopy = async (taskId: number) => {
|
||
const loadingToast = showToast("正在复制任务...", "loading", true);
|
||
try {
|
||
const response = await api.post<ApiResponse>('/v1/workbench/copy', {
|
||
id: taskId
|
||
})
|
||
|
||
if (response.code === 200) {
|
||
// 复制成功后刷新列表
|
||
loadingToast.remove();
|
||
fetchTasks(currentPage, searchName)
|
||
showToast(response.msg || "已成功复制点赞任务", "success")
|
||
} else {
|
||
loadingToast.remove();
|
||
showToast(response.msg || "请稍后再试", "error")
|
||
}
|
||
} catch (error: any) {
|
||
console.error("复制任务失败:", error)
|
||
loadingToast.remove();
|
||
showToast(error?.message || "请检查网络连接", "error")
|
||
}
|
||
}
|
||
|
||
const toggleTaskStatus = async (taskId: number, currentStatus: number) => {
|
||
const loadingToast = showToast("正在更新任务状态...", "loading", true);
|
||
try {
|
||
const response = await api.post<ApiResponse>('/v1/workbench/update-status', {
|
||
id: taskId,
|
||
status: currentStatus === 1 ? 2 : 1
|
||
})
|
||
|
||
if (response.code === 200) {
|
||
// 更新本地状态
|
||
setTasks(tasks.map(task =>
|
||
task.id === taskId
|
||
? { ...task, status: currentStatus === 1 ? 2 : 1 }
|
||
: task
|
||
))
|
||
|
||
const newStatus = currentStatus === 1 ? 2 : 1
|
||
loadingToast.remove();
|
||
showToast(response.msg || `任务${newStatus === 1 ? "已启动" : "已暂停"}`, "success")
|
||
} else {
|
||
loadingToast.remove();
|
||
showToast(response.msg || "请稍后再试", "error")
|
||
}
|
||
} catch (error: any) {
|
||
console.error("更新任务状态失败:", error)
|
||
loadingToast.remove();
|
||
showToast(error?.message || "请检查网络连接", "error")
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="flex-1 bg-gray-50 min-h-screen pb-20">
|
||
<header className="sticky top-0 z-10 bg-white border-b">
|
||
<div className="flex items-center justify-between p-4">
|
||
<div className="flex items-center space-x-3">
|
||
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
||
<ChevronLeft className="h-5 w-5" />
|
||
</Button>
|
||
<h1 className="text-lg font-medium">自动点赞</h1>
|
||
</div>
|
||
<Link href="/workspace/auto-like/new">
|
||
<Button>
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
新建任务
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="p-4">
|
||
<Card className="p-4 mb-4">
|
||
<div className="flex items-center space-x-2">
|
||
<div className="relative flex-1">
|
||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||
<Input
|
||
placeholder="搜索任务名称"
|
||
className="pl-9"
|
||
value={searchName}
|
||
onChange={(e) => setSearchName(e.target.value)}
|
||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||
/>
|
||
</div>
|
||
<Button variant="outline" size="icon" onClick={handleSearch}>
|
||
<Filter className="h-4 w-4" />
|
||
</Button>
|
||
<Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
|
||
<RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
|
||
<div className="space-y-4">
|
||
{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.status === 1 ? "default" : "secondary"}>
|
||
{task.status === 1 ? "进行中" : "已暂停"}
|
||
</Badge>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Switch checked={task.status === 1} onCheckedChange={() => toggleTaskStatus(task.id, task.status)} />
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
|
||
<MoreVertical className="h-4 w-4" />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end">
|
||
<DropdownMenuItem onClick={() => handleView(task.id)}>
|
||
<Eye className="h-4 w-4 mr-2" />
|
||
查看
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem onClick={() => handleEdit(task.id)}>
|
||
<Edit className="h-4 w-4 mr-2" />
|
||
编辑
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem onClick={() => handleCopy(task.id)}>
|
||
<Copy className="h-4 w-4 mr-2" />
|
||
复制
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem onClick={() => handleDelete(task.id)}>
|
||
<Trash2 className="h-4 w-4 mr-2" />
|
||
删除
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||
<div className="text-sm text-gray-500">
|
||
<div>执行设备：{task.config.devices.length} 个</div>
|
||
<div>目标人群：{
|
||
task.config.targetGroups.length > 2
|
||
? `${task.config.targetGroups[0]} 等${task.config.targetGroups.length - 1}个标签`
|
||
: task.config.targetGroups.join(', ')
|
||
}</div>
|
||
</div>
|
||
<div className="text-sm text-gray-500">
|
||
<div>点赞间隔：{task.config.interval} 秒</div>
|
||
<div>每日上限：{task.config.maxLikes} 次</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.updateTime}
|
||
</div>
|
||
<div className="flex items-center">
|
||
<span>创建时间：{task.createTime}</span>
|
||
<Button variant="ghost" size="sm" className="ml-2 p-0 h-6 w-6" onClick={() => toggleExpand(task.id)}>
|
||
{expandedTaskId === task.id ? (
|
||
<ChevronUp className="h-4 w-4" />
|
||
) : (
|
||
<ChevronDown className="h-4 w-4" />
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{expandedTaskId === task.id && (
|
||
<div className="mt-4 pt-4 border-t border-dashed">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div className="space-y-4">
|
||
<div className="flex items-center">
|
||
<Settings className="h-5 w-5 mr-2 text-gray-500" />
|
||
<h4 className="font-medium">基本设置</h4>
|
||
</div>
|
||
<div className="space-y-2 pl-7">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-500">点赞间隔：</span>
|
||
<span>{task.config.interval} 秒</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-500">每日最大点赞数：</span>
|
||
<span>{task.config.maxLikes} 次</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-500">执行时间段：</span>
|
||
<span>
|
||
{task.config.startTime} - {task.config.endTime}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="flex items-center">
|
||
<Users className="h-5 w-5 mr-2 text-gray-500" />
|
||
<h4 className="font-medium">目标人群</h4>
|
||
</div>
|
||
<div className="space-y-2 pl-7">
|
||
<div className="flex flex-wrap gap-2">
|
||
{task.config.targetGroups.map((tag) => (
|
||
<Badge key={tag} variant="outline" className="bg-gray-50">
|
||
{tag}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
<div className="text-sm text-gray-500">
|
||
匹配方式：{task.config.tagOperator === 1 ? "满足所有标签" : "满足任一标签"}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="flex items-center">
|
||
<ThumbsUp className="h-5 w-5 mr-2 text-gray-500" />
|
||
<h4 className="font-medium">点赞内容类型</h4>
|
||
</div>
|
||
<div className="space-y-2 pl-7">
|
||
<div className="flex flex-wrap gap-2">
|
||
{task.config.contentTypes.map((type) => (
|
||
<Badge key={type} variant="outline" className="bg-gray-50">
|
||
{type === "text" ? "文字" : type === "image" ? "图片" : "视频"}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
{/* 分页 */}
|
||
{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>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setCurrentPage(prev => Math.min(Math.ceil(total / pageSize), prev + 1))}
|
||
disabled={currentPage >= Math.ceil(total / pageSize) || loading}
|
||
>
|
||
下一页
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|