236 lines
7.8 KiB
TypeScript
236 lines
7.8 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect, use } from "react"
|
||
import { useRouter } from "next/navigation"
|
||
import { ChevronLeft, Search } from "lucide-react"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Input } from "@/components/ui/input"
|
||
import { StepIndicator } from "../../components/step-indicator"
|
||
import { BasicSettings } from "../../components/basic-settings"
|
||
import { DeviceSelectionDialog } from "../../components/device-selection-dialog"
|
||
import { TagSelector } from "../../components/tag-selector"
|
||
import { api, ApiResponse } 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
|
||
}
|
||
|
||
export default function EditAutoLikePage({ params }: { params: Promise<{ id: string }> }) {
|
||
const resolvedParams = use(params)
|
||
const router = useRouter()
|
||
const [currentStep, setCurrentStep] = useState(1)
|
||
const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
|
||
const [loading, setLoading] = useState(true)
|
||
const [formData, setFormData] = useState({
|
||
taskName: "",
|
||
likeInterval: 5,
|
||
maxLikesPerDay: 200,
|
||
timeRange: { start: "08:00", end: "22:00" },
|
||
contentTypes: ["text", "image", "video"],
|
||
enabled: true,
|
||
selectedDevices: [] as number[],
|
||
selectedTags: [] as string[],
|
||
tagOperator: "and" as "and" | "or",
|
||
})
|
||
|
||
useEffect(() => {
|
||
fetchTaskDetail()
|
||
}, [])
|
||
|
||
const fetchTaskDetail = async () => {
|
||
const loadingToast = showToast("正在加载任务信息...", "loading", true);
|
||
try {
|
||
const response = await api.get<{code: number, msg: string, data: Task}>(`/v1/workbench/detail?id=${resolvedParams.id}`)
|
||
|
||
if (response.code === 200 && response.data) {
|
||
const task = response.data
|
||
setFormData({
|
||
taskName: task.name,
|
||
likeInterval: task.config.interval,
|
||
maxLikesPerDay: task.config.maxLikes,
|
||
timeRange: {
|
||
start: task.config.startTime,
|
||
end: task.config.endTime
|
||
},
|
||
contentTypes: task.config.contentTypes,
|
||
enabled: task.status === 1,
|
||
selectedDevices: task.config.devices,
|
||
selectedTags: task.config.targetGroups,
|
||
tagOperator: task.config.tagOperator === 1 ? "and" : "or"
|
||
})
|
||
} else {
|
||
showToast(response.msg || "获取任务信息失败", "error")
|
||
router.back()
|
||
}
|
||
} catch (error: any) {
|
||
console.error("获取任务详情失败:", error)
|
||
showToast(error?.message || "请检查网络连接", "error")
|
||
router.back()
|
||
} finally {
|
||
loadingToast.remove()
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleUpdateFormData = (data: Partial<typeof formData>) => {
|
||
setFormData((prev) => ({ ...prev, ...data }))
|
||
}
|
||
|
||
const handleNext = () => {
|
||
setCurrentStep((prev) => Math.min(prev + 1, 3))
|
||
}
|
||
|
||
const handlePrev = () => {
|
||
setCurrentStep((prev) => Math.max(prev - 1, 1))
|
||
}
|
||
|
||
const handleComplete = async () => {
|
||
const loadingToast = showToast("正在更新任务...", "loading", true);
|
||
try {
|
||
const response = await api.post<ApiResponse>('/v1/workbench/update', {
|
||
id: resolvedParams.id,
|
||
type: 1,
|
||
name: formData.taskName,
|
||
interval: formData.likeInterval,
|
||
maxLikes: formData.maxLikesPerDay,
|
||
startTime: formData.timeRange.start,
|
||
endTime: formData.timeRange.end,
|
||
contentTypes: formData.contentTypes,
|
||
enabled: formData.enabled,
|
||
devices: formData.selectedDevices,
|
||
targetGroups: formData.selectedTags,
|
||
tagOperator: formData.tagOperator === 'and' ? 1 : 2
|
||
});
|
||
|
||
if (response.code === 200) {
|
||
loadingToast.remove();
|
||
showToast(response.msg || "更新成功", "success");
|
||
router.push("/workspace/auto-like");
|
||
} else {
|
||
loadingToast.remove();
|
||
showToast(response.msg || "请稍后再试", "error");
|
||
}
|
||
} catch (error: any) {
|
||
console.error("更新自动点赞任务失败:", error);
|
||
loadingToast.remove();
|
||
showToast(error?.message || "请检查网络连接或稍后再试", "error");
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#F8F9FA] pb-20">
|
||
<header className="sticky top-0 z-10 bg-white">
|
||
<div className="flex items-center h-14 px-4">
|
||
<Button variant="ghost" size="icon" onClick={() => router.back()} className="hover:bg-gray-50">
|
||
<ChevronLeft className="h-6 w-6" />
|
||
</Button>
|
||
<h1 className="ml-2 text-lg font-medium">编辑自动点赞</h1>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="mt-8">
|
||
<StepIndicator currentStep={currentStep} />
|
||
|
||
<div className="mt-8">
|
||
{currentStep === 1 && (
|
||
<BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
|
||
)}
|
||
|
||
{currentStep === 2 && (
|
||
<div className="space-y-6 px-6">
|
||
<div className="relative">
|
||
<Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
|
||
<Input
|
||
placeholder="选择设备"
|
||
className="h-12 pl-11 rounded-xl border-gray-200 text-base"
|
||
onClick={() => setDeviceDialogOpen(true)}
|
||
readOnly
|
||
value={formData.selectedDevices.length > 0 ? `已选择 ${formData.selectedDevices.length} 个设备` : ""}
|
||
/>
|
||
</div>
|
||
|
||
{formData.selectedDevices.length > 0 && (
|
||
<div className="text-base text-gray-500">已选设备：{formData.selectedDevices.length} 个</div>
|
||
)}
|
||
|
||
<div className="flex space-x-4 pt-4">
|
||
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
|
||
上一步
|
||
</Button>
|
||
<Button
|
||
onClick={handleNext}
|
||
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
|
||
disabled={formData.selectedDevices.length === 0}
|
||
>
|
||
下一步
|
||
</Button>
|
||
</div>
|
||
|
||
<DeviceSelectionDialog
|
||
open={deviceDialogOpen}
|
||
onOpenChange={setDeviceDialogOpen}
|
||
selectedDevices={formData.selectedDevices}
|
||
onSelect={(devices) => {
|
||
handleUpdateFormData({ selectedDevices: devices })
|
||
setDeviceDialogOpen(false)
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{currentStep === 3 && (
|
||
<div className="px-6">
|
||
<TagSelector
|
||
selectedTags={formData.selectedTags}
|
||
tagOperator={formData.tagOperator}
|
||
onTagsChange={(tags) => handleUpdateFormData({ selectedTags: tags })}
|
||
onOperatorChange={(operator) => handleUpdateFormData({ tagOperator: operator })}
|
||
onBack={handlePrev}
|
||
onComplete={handleComplete}
|
||
/>
|
||
|
||
<div className="flex space-x-4 pt-4">
|
||
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
|
||
上一步
|
||
</Button>
|
||
<Button
|
||
onClick={handleComplete}
|
||
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
|
||
>
|
||
完成
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|