220 lines
8.2 KiB
TypeScript
220 lines
8.2 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Switch } from "@/components/ui/switch"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { Minus, Plus } from "lucide-react"
|
||
|
||
interface BasicSettingsProps {
|
||
defaultValues?: {
|
||
name: string
|
||
pushTimeStart: string
|
||
pushTimeEnd: string
|
||
dailyPushCount: number
|
||
pushOrder: "earliest" | "latest"
|
||
isLoopPush: boolean
|
||
isImmediatePush: boolean
|
||
isEnabled: boolean
|
||
}
|
||
onNext: (values: any) => void
|
||
onSave: (values: any) => void
|
||
onCancel: () => void
|
||
}
|
||
|
||
export function BasicSettings({
|
||
defaultValues = {
|
||
name: "",
|
||
pushTimeStart: "06:00",
|
||
pushTimeEnd: "23:59",
|
||
dailyPushCount: 20,
|
||
pushOrder: "latest",
|
||
isLoopPush: false,
|
||
isImmediatePush: false,
|
||
isEnabled: false,
|
||
},
|
||
onNext,
|
||
onSave,
|
||
onCancel,
|
||
}: BasicSettingsProps) {
|
||
const [values, setValues] = useState(defaultValues)
|
||
|
||
const handleChange = (field: string, value: any) => {
|
||
setValues((prev) => ({ ...prev, [field]: value }))
|
||
}
|
||
|
||
const handleCountChange = (increment: boolean) => {
|
||
setValues((prev) => ({
|
||
...prev,
|
||
dailyPushCount: increment ? prev.dailyPushCount + 1 : Math.max(1, prev.dailyPushCount - 1),
|
||
}))
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<Card>
|
||
<CardContent className="p-4 sm:p-6">
|
||
<div className="space-y-4">
|
||
{/* 任务名称 */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="taskName" className="flex items-center text-sm font-medium">
|
||
<span className="text-red-500 mr-1">*</span>任务名称:
|
||
</Label>
|
||
<Input
|
||
id="taskName"
|
||
value={values.name}
|
||
onChange={(e) => handleChange("name", e.target.value)}
|
||
placeholder="请输入任务名称"
|
||
/>
|
||
</div>
|
||
|
||
{/* 允许推送的时间段 */}
|
||
<div className="space-y-2">
|
||
<Label className="text-sm font-medium">允许推送的时间段:</Label>
|
||
<div className="flex items-center space-x-2">
|
||
<Input
|
||
type="time"
|
||
value={values.pushTimeStart}
|
||
onChange={(e) => handleChange("pushTimeStart", e.target.value)}
|
||
className="w-full"
|
||
/>
|
||
<span className="text-gray-500">至</span>
|
||
<Input
|
||
type="time"
|
||
value={values.pushTimeEnd}
|
||
onChange={(e) => handleChange("pushTimeEnd", e.target.value)}
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 每日推送 */}
|
||
<div className="space-y-2">
|
||
<Label className="text-sm font-medium">每日推送:</Label>
|
||
<div className="flex items-center space-x-2">
|
||
<Button
|
||
variant="outline"
|
||
size="icon"
|
||
type="button"
|
||
onClick={() => handleCountChange(false)}
|
||
className="h-9 w-9"
|
||
>
|
||
<Minus className="h-4 w-4" />
|
||
</Button>
|
||
<Input
|
||
type="number"
|
||
value={values.dailyPushCount}
|
||
onChange={(e) => handleChange("dailyPushCount", Number.parseInt(e.target.value) || 1)}
|
||
className="w-20 text-center"
|
||
min="1"
|
||
/>
|
||
<Button
|
||
variant="outline"
|
||
size="icon"
|
||
type="button"
|
||
onClick={() => handleCountChange(true)}
|
||
className="h-9 w-9"
|
||
>
|
||
<Plus className="h-4 w-4" />
|
||
</Button>
|
||
<span className="text-gray-500">条内容</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 推送顺序 */}
|
||
<div className="space-y-2">
|
||
<Label className="text-sm font-medium">推送顺序:</Label>
|
||
<div className="flex">
|
||
<Button
|
||
type="button"
|
||
variant={values.pushOrder === "earliest" ? "default" : "outline"}
|
||
className={`rounded-r-none flex-1 ${values.pushOrder === "earliest" ? "" : "text-gray-500"}`}
|
||
onClick={() => handleChange("pushOrder", "earliest")}
|
||
>
|
||
按最早
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant={values.pushOrder === "latest" ? "default" : "outline"}
|
||
className={`rounded-l-none flex-1 ${values.pushOrder === "latest" ? "" : "text-gray-500"}`}
|
||
onClick={() => handleChange("pushOrder", "latest")}
|
||
>
|
||
按最新
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 是否循环推送 */}
|
||
<div className="flex items-center justify-between">
|
||
<Label htmlFor="isLoopPush" className="flex items-center text-sm font-medium">
|
||
<span className="text-red-500 mr-1">*</span>是否循环推送:
|
||
</Label>
|
||
<div className="flex items-center space-x-2">
|
||
<span className={values.isLoopPush ? "text-gray-400" : "text-gray-900"}>否</span>
|
||
<Switch
|
||
id="isLoopPush"
|
||
checked={values.isLoopPush}
|
||
onCheckedChange={(checked) => handleChange("isLoopPush", checked)}
|
||
/>
|
||
<span className={values.isLoopPush ? "text-gray-900" : "text-gray-400"}>是</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 是否立即推送 */}
|
||
<div className="flex items-center justify-between">
|
||
<Label htmlFor="isImmediatePush" className="flex items-center text-sm font-medium">
|
||
<span className="text-red-500 mr-1">*</span>是否立即推送:
|
||
</Label>
|
||
<div className="flex items-center space-x-2">
|
||
<span className={values.isImmediatePush ? "text-gray-400" : "text-gray-900"}>否</span>
|
||
<Switch
|
||
id="isImmediatePush"
|
||
checked={values.isImmediatePush}
|
||
onCheckedChange={(checked) => handleChange("isImmediatePush", checked)}
|
||
/>
|
||
<span className={values.isImmediatePush ? "text-gray-900" : "text-gray-400"}>是</span>
|
||
</div>
|
||
</div>
|
||
{values.isImmediatePush && (
|
||
<div className="bg-yellow-50 border border-yellow-200 rounded-md p-3 text-sm text-yellow-700">
|
||
如果启用，系统会把内容库里所有的内容按顺序推送到指定的社群
|
||
</div>
|
||
)}
|
||
|
||
{/* 是否启用 */}
|
||
<div className="flex items-center justify-between">
|
||
<Label htmlFor="isEnabled" className="flex items-center text-sm font-medium">
|
||
<span className="text-red-500 mr-1">*</span>是否启用:
|
||
</Label>
|
||
<div className="flex items-center space-x-2">
|
||
<span className={values.isEnabled ? "text-gray-400" : "text-gray-900"}>否</span>
|
||
<Switch
|
||
id="isEnabled"
|
||
checked={values.isEnabled}
|
||
onCheckedChange={(checked) => handleChange("isEnabled", checked)}
|
||
/>
|
||
<span className={values.isEnabled ? "text-gray-900" : "text-gray-400"}>是</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<div className="flex space-x-2 justify-center sm:justify-end">
|
||
<Button type="button" onClick={() => onNext(values)} className="flex-1 sm:flex-none">
|
||
下一步
|
||
</Button>
|
||
<Button type="button" variant="outline" onClick={() => onSave(values)} className="flex-1 sm:flex-none">
|
||
保存
|
||
</Button>
|
||
<Button type="button" variant="outline" onClick={onCancel} className="flex-1 sm:flex-none">
|
||
取消
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|