244 lines
9.3 KiB
TypeScript
244 lines
9.3 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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
|||
|
|
import { Info, Plus, Trash2 } from "lucide-react"
|
|||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|||
|
|
|
|||
|
|
export interface TimeRange {
|
|||
|
|
id: string
|
|||
|
|
start: string
|
|||
|
|
end: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export interface TimeSettingsData {
|
|||
|
|
enableAutoLike: boolean
|
|||
|
|
timeRanges: TimeRange[]
|
|||
|
|
likeInterval: number
|
|||
|
|
randomizeInterval: boolean
|
|||
|
|
minInterval?: number
|
|||
|
|
maxInterval?: number
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface TimeSettingsProps {
|
|||
|
|
initialData?: Partial<TimeSettingsData>
|
|||
|
|
onSave: (data: TimeSettingsData) => void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function TimeSettings({ initialData, onSave }: TimeSettingsProps) {
|
|||
|
|
const [formData, setFormData] = useState<TimeSettingsData>({
|
|||
|
|
enableAutoLike: initialData?.enableAutoLike ?? true,
|
|||
|
|
timeRanges: initialData?.timeRanges ?? [{ id: "1", start: "06:00", end: "08:00" }],
|
|||
|
|
likeInterval: initialData?.likeInterval ?? 15,
|
|||
|
|
randomizeInterval: initialData?.randomizeInterval ?? false,
|
|||
|
|
minInterval: initialData?.minInterval ?? 5,
|
|||
|
|
maxInterval: initialData?.maxInterval ?? 30,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 添加时间范围
|
|||
|
|
const addTimeRange = () => {
|
|||
|
|
const newId = String(formData.timeRanges.length + 1)
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
timeRanges: [...formData.timeRanges, { id: newId, start: "12:00", end: "14:00" }],
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除时间范围
|
|||
|
|
const removeTimeRange = (id: string) => {
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
timeRanges: formData.timeRanges.filter((range) => range.id !== id),
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新时间范围
|
|||
|
|
const updateTimeRange = (id: string, field: "start" | "end", value: string) => {
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
timeRanges: formData.timeRanges.map((range) => (range.id === id ? { ...range, [field]: value } : range)),
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理表单提交
|
|||
|
|
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-4">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<Label htmlFor="enableAutoLike" 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="enableAutoLike"
|
|||
|
|
checked={formData.enableAutoLike}
|
|||
|
|
onCheckedChange={(checked) => setFormData({ ...formData, enableAutoLike: checked })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 时间范围设置 */}
|
|||
|
|
<div className="space-y-3 pt-4">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<Label className="font-medium">点赞时间段</Label>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={addTimeRange}
|
|||
|
|
disabled={!formData.enableAutoLike || formData.timeRanges.length >= 5}
|
|||
|
|
>
|
|||
|
|
<Plus className="h-4 w-4 mr-1" />
|
|||
|
|
添加时间段
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{formData.timeRanges.map((range) => (
|
|||
|
|
<div key={range.id} className="flex items-center space-x-2">
|
|||
|
|
<Input
|
|||
|
|
type="time"
|
|||
|
|
value={range.start}
|
|||
|
|
onChange={(e) => updateTimeRange(range.id, "start", e.target.value)}
|
|||
|
|
className="w-32"
|
|||
|
|
disabled={!formData.enableAutoLike}
|
|||
|
|
/>
|
|||
|
|
<span>至</span>
|
|||
|
|
<Input
|
|||
|
|
type="time"
|
|||
|
|
value={range.end}
|
|||
|
|
onChange={(e) => updateTimeRange(range.id, "end", e.target.value)}
|
|||
|
|
className="w-32"
|
|||
|
|
disabled={!formData.enableAutoLike}
|
|||
|
|
/>
|
|||
|
|
{formData.timeRanges.length > 1 && (
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="icon"
|
|||
|
|
onClick={() => removeTimeRange(range.id)}
|
|||
|
|
disabled={!formData.enableAutoLike}
|
|||
|
|
>
|
|||
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<p className="text-xs text-muted-foreground">设置点赞的时间段，系统将在这些时间段内执行点赞任务</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-2 pt-4">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<Label htmlFor="intervalType" className="font-medium">
|
|||
|
|
点赞间隔设置
|
|||
|
|
</Label>
|
|||
|
|
<Select
|
|||
|
|
value={formData.randomizeInterval ? "random" : "fixed"}
|
|||
|
|
onValueChange={(value) => setFormData({ ...formData, randomizeInterval: value === "random" })}
|
|||
|
|
disabled={!formData.enableAutoLike}
|
|||
|
|
>
|
|||
|
|
<SelectTrigger className="w-[180px]">
|
|||
|
|
<SelectValue placeholder="选择间隔类型" />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
<SelectItem value="fixed">固定间隔</SelectItem>
|
|||
|
|
<SelectItem value="random">随机间隔</SelectItem>
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{formData.randomizeInterval ? (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<Label htmlFor="minInterval" className="text-sm">
|
|||
|
|
最小间隔（分钟）
|
|||
|
|
</Label>
|
|||
|
|
<span className="text-sm text-muted-foreground">{formData.minInterval}分钟</span>
|
|||
|
|
</div>
|
|||
|
|
<Slider
|
|||
|
|
id="minInterval"
|
|||
|
|
min={1}
|
|||
|
|
max={30}
|
|||
|
|
step={1}
|
|||
|
|
value={[formData.minInterval || 5]}
|
|||
|
|
onValueChange={(value) => setFormData({ ...formData, minInterval: value[0] })}
|
|||
|
|
disabled={!formData.enableAutoLike}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<Label htmlFor="maxInterval" className="text-sm">
|
|||
|
|
最大间隔（分钟）
|
|||
|
|
</Label>
|
|||
|
|
<span className="text-sm text-muted-foreground">{formData.maxInterval}分钟</span>
|
|||
|
|
</div>
|
|||
|
|
<Slider
|
|||
|
|
id="maxInterval"
|
|||
|
|
min={formData.minInterval || 5}
|
|||
|
|
max={120}
|
|||
|
|
step={1}
|
|||
|
|
value={[formData.maxInterval || 30]}
|
|||
|
|
onValueChange={(value) => setFormData({ ...formData, maxInterval: value[0] })}
|
|||
|
|
disabled={!formData.enableAutoLike}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<Label htmlFor="likeInterval" className="text-sm">
|
|||
|
|
点赞间隔（分钟）
|
|||
|
|
</Label>
|
|||
|
|
<span className="text-sm text-muted-foreground">{formData.likeInterval}分钟</span>
|
|||
|
|
</div>
|
|||
|
|
<Slider
|
|||
|
|
id="likeInterval"
|
|||
|
|
min={1}
|
|||
|
|
max={60}
|
|||
|
|
step={1}
|
|||
|
|
value={[formData.likeInterval]}
|
|||
|
|
onValueChange={(value) => setFormData({ ...formData, likeInterval: value[0] })}
|
|||
|
|
disabled={!formData.enableAutoLike}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<div className="flex justify-end">
|
|||
|
|
<Button onClick={handleSubmit}>下一步</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|