264 lines
9.5 KiB
TypeScript
264 lines
9.5 KiB
TypeScript
|
"use client"
|
|||
|
|
|
|||
|
|
import { useState } from "react"
|
|||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|||
|
|
import { Label } from "@/components/ui/label"
|
|||
|
|
import { Switch } from "@/components/ui/switch"
|
|||
|
|
import { Slider } from "@/components/ui/slider"
|
|||
|
|
import { Input } from "@/components/ui/input"
|
|||
|
|
import { Button } from "@/components/ui/button"
|
|||
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|||
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
|||
|
|
import { Info, Trash2 } from "lucide-react"
|
|||
|
|
import { Badge } from "@/components/ui/badge"
|
|||
|
|
|
|||
|
|
export interface LikeConfigData {
|
|||
|
|
taskName: string
|
|||
|
|
maxLikesPerDay: number
|
|||
|
|
likeOldContent: boolean
|
|||
|
|
contentTypes: string[]
|
|||
|
|
keywordFilters: string[]
|
|||
|
|
startImmediately: boolean
|
|||
|
|
likeFirstPageOnly: boolean
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface LikeConfigProps {
|
|||
|
|
initialData?: Partial<LikeConfigData>
|
|||
|
|
onSave: (data: LikeConfigData) => void
|
|||
|
|
onBack: () => void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function LikeConfig({ initialData, onSave, onBack }: LikeConfigProps) {
|
|||
|
|
const [formData, setFormData] = useState<LikeConfigData>({
|
|||
|
|
taskName: initialData?.taskName ?? "朋友圈自动点赞任务",
|
|||
|
|
maxLikesPerDay: initialData?.maxLikesPerDay ?? 50,
|
|||
|
|
likeOldContent: initialData?.likeOldContent ?? false,
|
|||
|
|
contentTypes: initialData?.contentTypes ?? ["text", "image", "video"],
|
|||
|
|
keywordFilters: initialData?.keywordFilters ?? [],
|
|||
|
|
startImmediately: initialData?.startImmediately ?? true,
|
|||
|
|
likeFirstPageOnly: initialData?.likeFirstPageOnly ?? false,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const [newKeyword, setNewKeyword] = useState("")
|
|||
|
|
|
|||
|
|
// 内容类型选项
|
|||
|
|
const contentTypeOptions = [
|
|||
|
|
{ id: "text", label: "纯文字动态" },
|
|||
|
|
{ id: "image", label: "图片动态" },
|
|||
|
|
{ id: "video", label: "视频动态" },
|
|||
|
|
{ id: "link", label: "链接分享" },
|
|||
|
|
{ id: "original", label: "仅原创内容" },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 添加关键词
|
|||
|
|
const addKeyword = () => {
|
|||
|
|
if (newKeyword.trim() && !formData.keywordFilters.includes(newKeyword.trim())) {
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
keywordFilters: [...formData.keywordFilters, newKeyword.trim()],
|
|||
|
|
})
|
|||
|
|
setNewKeyword("")
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除关键词
|
|||
|
|
const removeKeyword = (keyword: string) => {
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
keywordFilters: formData.keywordFilters.filter((k) => k !== keyword),
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 切换内容类型
|
|||
|
|
const toggleContentType = (typeId: string) => {
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
contentTypes: formData.contentTypes.includes(typeId)
|
|||
|
|
? formData.contentTypes.filter((id) => id !== typeId)
|
|||
|
|
: [...formData.contentTypes, typeId],
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理表单提交
|
|||
|
|
const handleSubmit = () => {
|
|||
|
|
onSave(formData)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle>点赞配置设置</CardTitle>
|
|||
|
|
<CardDescription>配置点赞任务的名称、内容和数量</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-6">
|
|||
|
|
{/* 任务名称 */}
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label htmlFor="taskName" className="font-medium">
|
|||
|
|
任务名称
|
|||
|
|
</Label>
|
|||
|
|
<Input
|
|||
|
|
id="taskName"
|
|||
|
|
value={formData.taskName}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, taskName: e.target.value })}
|
|||
|
|
placeholder="输入任务名称"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 每日点赞数量 */}
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<Label htmlFor="maxLikesPerDay" className="font-medium">
|
|||
|
|
每日最大点赞数
|
|||
|
|
</Label>
|
|||
|
|
<span className="text-sm text-muted-foreground">{formData.maxLikesPerDay}个</span>
|
|||
|
|
</div>
|
|||
|
|
<Slider
|
|||
|
|
id="maxLikesPerDay"
|
|||
|
|
min={10}
|
|||
|
|
max={200}
|
|||
|
|
step={10}
|
|||
|
|
value={[formData.maxLikesPerDay]}
|
|||
|
|
onValueChange={(value) => setFormData({ ...formData, maxLikesPerDay: value[0] })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 内容类型设置 */}
|
|||
|
|
<div className="space-y-3 pt-4 border-t">
|
|||
|
|
<Label className="font-medium">点赞内容类型</Label>
|
|||
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
|||
|
|
{contentTypeOptions.map((type) => (
|
|||
|
|
<div key={type.id} className="flex items-center space-x-2">
|
|||
|
|
<Checkbox
|
|||
|
|
id={`content-${type.id}`}
|
|||
|
|
checked={formData.contentTypes.includes(type.id)}
|
|||
|
|
onCheckedChange={() => toggleContentType(type.id)}
|
|||
|
|
/>
|
|||
|
|
<Label htmlFor={`content-${type.id}`} className="text-sm">
|
|||
|
|
{type.label}
|
|||
|
|
</Label>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 关键词过滤 */}
|
|||
|
|
<div className="space-y-3 pt-4 border-t">
|
|||
|
|
<Label className="font-medium">关键词过滤</Label>
|
|||
|
|
<div className="flex space-x-2">
|
|||
|
|
<Input
|
|||
|
|
placeholder="输入关键词"
|
|||
|
|
value={newKeyword}
|
|||
|
|
onChange={(e) => setNewKeyword(e.target.value)}
|
|||
|
|
className="flex-1"
|
|||
|
|
/>
|
|||
|
|
<Button type="button" onClick={addKeyword} disabled={!newKeyword.trim()}>
|
|||
|
|
添加
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
{formData.keywordFilters.length > 0 && (
|
|||
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|||
|
|
{formData.keywordFilters.map((keyword) => (
|
|||
|
|
<Badge key={keyword} variant="secondary" className="flex items-center gap-1">
|
|||
|
|
{keyword}
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="icon"
|
|||
|
|
className="h-4 w-4 p-0 hover:bg-transparent"
|
|||
|
|
onClick={() => removeKeyword(keyword)}
|
|||
|
|
>
|
|||
|
|
<Trash2 className="h-3 w-3" />
|
|||
|
|
<span className="sr-only">Remove</span>
|
|||
|
|
</Button>
|
|||
|
|
</Badge>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<p className="text-xs text-muted-foreground">添加关键词后，系统将只对包含这些关键词的内容进行点赞</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 其他选项 */}
|
|||
|
|
<div className="space-y-4 pt-4 border-t">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<Label htmlFor="likeOldContent" className="font-medium">
|
|||
|
|
点赞历史内容
|
|||
|
|
</Label>
|
|||
|
|
<TooltipProvider>
|
|||
|
|
<Tooltip>
|
|||
|
|
<TooltipTrigger asChild>
|
|||
|
|
<Info className="h-4 w-4 text-muted-foreground" />
|
|||
|
|
</TooltipTrigger>
|
|||
|
|
<TooltipContent>
|
|||
|
|
<p>开启后系统将点赞好友的历史朋友圈内容</p>
|
|||
|
|
</TooltipContent>
|
|||
|
|
</Tooltip>
|
|||
|
|
</TooltipProvider>
|
|||
|
|
</div>
|
|||
|
|
<Switch
|
|||
|
|
id="likeOldContent"
|
|||
|
|
checked={formData.likeOldContent}
|
|||
|
|
onCheckedChange={(checked) => setFormData({ ...formData, likeOldContent: checked })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<Label htmlFor="startImmediately" className="font-medium">
|
|||
|
|
立即开始点赞
|
|||
|
|
</Label>
|
|||
|
|
<TooltipProvider>
|
|||
|
|
<Tooltip>
|
|||
|
|
<TooltipTrigger asChild>
|
|||
|
|
<Info className="h-4 w-4 text-muted-foreground" />
|
|||
|
|
</TooltipTrigger>
|
|||
|
|
<TooltipContent>
|
|||
|
|
<p>开启后任务创建完成将立即开始执行</p>
|
|||
|
|
</TooltipContent>
|
|||
|
|
</Tooltip>
|
|||
|
|
</TooltipProvider>
|
|||
|
|
</div>
|
|||
|
|
<Switch
|
|||
|
|
id="startImmediately"
|
|||
|
|
checked={formData.startImmediately}
|
|||
|
|
onCheckedChange={(checked) => setFormData({ ...formData, startImmediately: checked })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<Label htmlFor="likeFirstPageOnly" className="font-medium">
|
|||
|
|
仅点赞第一页
|
|||
|
|
</Label>
|
|||
|
|
<TooltipProvider>
|
|||
|
|
<Tooltip>
|
|||
|
|
<TooltipTrigger asChild>
|
|||
|
|
<Info className="h-4 w-4 text-muted-foreground" />
|
|||
|
|
</TooltipTrigger>
|
|||
|
|
<TooltipContent>
|
|||
|
|
<p>开启后系统将只点赞朋友圈第一页的内容</p>
|
|||
|
|
</TooltipContent>
|
|||
|
|
</Tooltip>
|
|||
|
|
</TooltipProvider>
|
|||
|
|
</div>
|
|||
|
|
<Switch
|
|||
|
|
id="likeFirstPageOnly"
|
|||
|
|
checked={formData.likeFirstPageOnly}
|
|||
|
|
onCheckedChange={(checked) => setFormData({ ...formData, likeFirstPageOnly: checked })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<div className="flex justify-between">
|
|||
|
|
<Button variant="outline" onClick={onBack}>
|
|||
|
|
返回上一步
|
|||
|
|
</Button>
|
|||
|
|
<Button onClick={handleSubmit}>保存并继续</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|