【操盘手端】自动点赞提交

Cunkebao/app/workspace/auto-like/page.tsx

@@ -1,129 +1,403 @@
 "use client"
 
-import { useState } from "react"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+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 { StepIndicator } from "./components/step-indicator"
-import { TimeSettings, type TimeSettingsData } from "./components/time-settings"
-import { DeviceSelection, type DeviceSelectionData } from "./components/device-selection"
-import type { LikeConfigData } from "./components/like-config"
+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"
 
-const steps = [
-  {
-    id: "device-selection",
-    name: "设备选择",
-    description: "选择执行自动点赞的设备",
-  },
-  {
-    id: "audience-selection",
-    name: "人群选择",
-    description: "选择点赞目标人群",
-  },
-  {
-    id: "time-settings",
-    name: "时间设置",
-    description: "设置点赞时间和频率",
-  },
-]
+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 [currentStep, setCurrentStep] = useState(0)
-  const [formData, setFormData] = useState({
-    deviceSelection: {
-      selectedDevices: [],
-      selectedDatabase: "",
-      selectedAudience: "",
-    } as DeviceSelectionData,
-    timeSettings: {
-      enableAutoLike: true,
-      timeRanges: [{ id: "1", start: "06:00", end: "08:00" }],
-      likeInterval: 15,
-      randomizeInterval: false,
-    } as TimeSettingsData,
-    likeConfig: {
-      likeAll: false,
-      likeFirstPage: true,
-      maxLikesPerDay: 50,
-      likeImmediately: true,
-      excludeTags: [],
-      includeTags: [],
-    } as LikeConfigData,
-  })
+  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 handleDeviceSelectionSave = (data: DeviceSelectionData) => {
-    setFormData({ ...formData, deviceSelection: data })
-    setCurrentStep(1)
-  }
+  const fetchTasks = async (page: number, name?: string) => {
+    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()}`)
 
-  const handleTimeSettingsSave = (data: TimeSettingsData) => {
-    setFormData({ ...formData, timeSettings: data })
-    setCurrentStep(2)
-  }
-
-  const handleLikeConfigSave = (data: LikeConfigData) => {
-    setFormData({ ...formData, likeConfig: data })
-    // 提交表单或导航到确认页面
-    router.push("/workspace")
-  }
-
-  const handleStepClick = (index: number) => {
-    if (index <= currentStep) {
-      setCurrentStep(index)
+      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 {
+      setLoading(false)
     }
   }
 
-  const handleBack = () => {
-    if (currentStep > 0) {
-      setCurrentStep(currentStep - 1)
-    } else {
-      router.push("/workspace")
+  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) => {
+    try {
+      const response = await api.delete<ApiResponse>(`/v1/workbench/delete?id=${taskId}`)
+
+      if (response.code === 200) {
+        // 删除成功后刷新列表
+        fetchTasks(currentPage, searchName)
+        showToast(response.msg || "已成功删除点赞任务", "success")
+      } else {
+        showToast(response.msg || "请稍后再试", "error")
+      }
+    } catch (error: any) {
+      console.error("删除任务失败:", error)
+      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) => {
+    try {
+      const response = await api.post<ApiResponse>('/v1/workbench/copy', {
+        id: taskId
+      })
+
+      if (response.code === 200) {
+        // 复制成功后刷新列表
+        fetchTasks(currentPage, searchName)
+        showToast(response.msg || "已成功复制点赞任务", "success")
+      } else {
+        showToast(response.msg || "请稍后再试", "error")
+      }
+    } catch (error: any) {
+      console.error("复制任务失败:", error)
+      showToast(error?.message || "请检查网络连接", "error")
+    }
+  }
+
+  const toggleTaskStatus = async (taskId: number, currentStatus: number) => {
+    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
+        showToast(response.msg || `任务${newStatus === 1 ? "已启动" : "已暂停"}`, "success")
+      } else {
+        showToast(response.msg || "请稍后再试", "error")
+      }
+    } catch (error: any) {
+      console.error("更新任务状态失败:", error)
+      showToast(error?.message || "请检查网络连接", "error")
     }
   }
 
   return (
-    <div className="container mx-auto py-6 max-w-4xl">
-      <div className="mb-6">
-        <Button variant="ghost" onClick={handleBack} className="mb-4">
-          ← 返回
-        </Button>
-        <h1 className="text-2xl font-bold">自动点赞</h1>
-        <p className="text-muted-foreground">设置自动点赞功能，提高互动率和活跃度</p>
-      </div>
+    <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="mb-8">
-        <StepIndicator steps={steps} currentStep={currentStep} onStepClick={handleStepClick} />
-      </div>
-
-      {currentStep === 0 && (
-        <DeviceSelection
-          initialData={formData.deviceSelection}
-          onSave={handleDeviceSelectionSave}
-          onBack={handleBack}
-        />
-      )}
-
-      {currentStep === 1 && (
-        <Card>
-          <CardHeader>
-            <CardTitle>人群选择</CardTitle>
-            <CardDescription>选择需要自动点赞的目标人群</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            {/* 这里可以添加人群选择的具体内容 */}
-            <div className="flex justify-between">
-              <Button variant="outline" onClick={() => setCurrentStep(0)}>
-                上一步
-              </Button>
-              <Button onClick={() => setCurrentStep(2)}>下一步</Button>
+      <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>
-          </CardContent>
+            <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>
-      )}
 
-      {currentStep === 2 && <TimeSettings initialData={formData.timeSettings} onSave={handleTimeSettingsSave} />}
+        <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.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>
   )
 }
-