存客宝 React

Cunkebao/app/workspace/group-sync/components/basic-settings.tsx

@@ -0,0 +1,196 @@
+"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 { 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">
+      <div className="space-y-4">
+        <div className="grid gap-2">
+          <Label htmlFor="taskName" className="flex items-center">
+            <span className="text-red-500 mr-1">*</span>任务名称:
+          </Label>
+          <Input
+            id="taskName"
+            value={values.name}
+            onChange={(e) => handleChange("name", e.target.value)}
+            placeholder="请输入任务名称"
+            className="max-w-md"
+          />
+        </div>
+
+        <div className="grid gap-2">
+          <Label className="flex items-center">允许推送的时间段:</Label>
+          <div className="flex items-center space-x-2 max-w-md">
+            <Input
+              type="time"
+              value={values.pushTimeStart}
+              onChange={(e) => handleChange("pushTimeStart", e.target.value)}
+              className="w-32"
+            />
+            <span>至</span>
+            <Input
+              type="time"
+              value={values.pushTimeEnd}
+              onChange={(e) => handleChange("pushTimeEnd", e.target.value)}
+              className="w-32"
+            />
+          </div>
+        </div>
+
+        <div className="grid gap-2">
+          <Label className="flex items-center">每日推送:</Label>
+          <div className="flex items-center space-x-2 max-w-md">
+            <Button variant="outline" size="icon" type="button" onClick={() => handleCountChange(false)}>
+              <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)}>
+              <Plus className="h-4 w-4" />
+            </Button>
+            <span>条内容</span>
+          </div>
+        </div>
+
+        <div className="grid gap-2">
+          <Label className="flex items-center">推送顺序:</Label>
+          <div className="flex items-center space-x-2 max-w-md">
+            <div className="flex">
+              <Button
+                type="button"
+                variant={values.pushOrder === "earliest" ? "default" : "outline"}
+                className={`rounded-r-none ${values.pushOrder === "earliest" ? "" : "text-gray-500"}`}
+                onClick={() => handleChange("pushOrder", "earliest")}
+              >
+                按最早
+              </Button>
+              <Button
+                type="button"
+                variant={values.pushOrder === "latest" ? "default" : "outline"}
+                className={`rounded-l-none ${values.pushOrder === "latest" ? "" : "text-gray-500"}`}
+                onClick={() => handleChange("pushOrder", "latest")}
+              >
+                按最新
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid gap-2">
+          <Label htmlFor="isLoopPush" className="flex items-center">
+            <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="grid gap-2">
+          <Label htmlFor="isImmediatePush" className="flex items-center">
+            <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>
+          {values.isImmediatePush && (
+            <p className="text-sm text-gray-500">如果启用，系统会把内容库里所有的内容按顺序推送到指定的社群</p>
+          )}
+        </div>
+
+        <div className="grid gap-2">
+          <Label htmlFor="isEnabled" className="flex items-center">
+            <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>
+
+      <div className="flex space-x-2">
+        <Button type="button" onClick={() => onNext(values)}>
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={() => onSave(values)}>
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel}>
+          取消
+        </Button>
+      </div>
+    </div>
+  )
+}
+