存客宝 React

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

@@ -0,0 +1,160 @@
+"use client"
+
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { Plus, Minus, Clock, HelpCircle } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+
+interface BasicSettingsProps {
+  formData: {
+    taskName: string
+    startTime: string
+    endTime: string
+    syncCount: number
+    accountType: "business" | "personal"
+    enabled: boolean
+  }
+  onChange: (data: Partial<BasicSettingsProps["formData"]>) => void
+  onNext: () => void
+}
+
+export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
+  return (
+    <div className="space-y-8 px-6">
+      <div>
+        <div className="text-base font-medium mb-2">任务名称</div>
+        <Input
+          value={formData.taskName}
+          onChange={(e) => onChange({ taskName: e.target.value })}
+          placeholder="请输入任务名称"
+          className="h-12 border-0 border-b border-gray-200 rounded-none focus-visible:ring-0 focus-visible:border-blue-600 px-0 text-base"
+        />
+      </div>
+
+      <div>
+        <div className="text-base font-medium mb-2">允许发布时间段</div>
+        <div className="flex items-center space-x-4">
+          <div className="relative flex-1">
+            <Input
+              type="time"
+              value={formData.startTime}
+              onChange={(e) => onChange({ startTime: e.target.value })}
+              className="h-12 pl-10 rounded-xl border-gray-200 text-base"
+            />
+            <Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
+          </div>
+          <span className="text-gray-500">至</span>
+          <div className="relative flex-1">
+            <Input
+              type="time"
+              value={formData.endTime}
+              onChange={(e) => onChange({ endTime: e.target.value })}
+              className="h-12 pl-10 rounded-xl border-gray-200 text-base"
+            />
+            <Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div className="text-base font-medium mb-2">每日同步数量</div>
+        <div className="flex items-center space-x-5">
+          <Button
+            variant="outline"
+            size="lg"
+            onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
+            className="h-12 w-12 rounded-xl"
+          >
+            <Minus className="h-5 w-5" />
+          </Button>
+          <span className="w-8 text-center text-lg font-medium">{formData.syncCount}</span>
+          <Button
+            variant="outline"
+            size="lg"
+            onClick={() => onChange({ syncCount: formData.syncCount + 1 })}
+            className="h-12 w-12 rounded-xl"
+          >
+            <Plus className="h-5 w-5" />
+          </Button>
+          <span className="text-gray-500">条朋友圈</span>
+        </div>
+      </div>
+
+      <div>
+        <div className="text-base font-medium mb-2">账号类型</div>
+        <div className="flex space-x-4">
+          <div className="flex-1 relative">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    onClick={() => onChange({ accountType: "business" })}
+                    className={`w-full h-12 justify-between rounded-lg ${
+                      formData.accountType === "business"
+                        ? "bg-blue-600 hover:bg-blue-600 text-white"
+                        : "bg-white hover:bg-gray-50"
+                    }`}
+                  >
+                    业务号
+                    <HelpCircle
+                      className={`h-4 w-4 ${formData.accountType === "business" ? "text-white/70" : "text-gray-400"}`}
+                    />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="max-w-[300px]">
+                  <p>
+                    业务号能够循环推送内容库中的内容。当内容库所有内容循环推送完毕后，若有新内容则优先推送新内容，若无新内容则继续循环推送。
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+          <div className="flex-1 relative">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    onClick={() => onChange({ accountType: "personal" })}
+                    className={`w-full h-12 justify-between rounded-lg ${
+                      formData.accountType === "personal"
+                        ? "bg-blue-600 hover:bg-blue-600 text-white"
+                        : "bg-white hover:bg-gray-50"
+                    }`}
+                  >
+                    人设号
+                    <HelpCircle
+                      className={`h-4 w-4 ${formData.accountType === "personal" ? "text-white/70" : "text-gray-400"}`}
+                    />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>用于实时更新同步，有新动态时进行同步，无动态则不同步。</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between py-2">
+        <span className="text-base font-medium">是否启用</span>
+        <Switch
+          checked={formData.enabled}
+          onCheckedChange={(checked) => onChange({ enabled: checked })}
+          className="data-[state=checked]:bg-blue-600 h-7 w-12"
+        />
+      </div>
+
+      <Button
+        onClick={onNext}
+        className="w-full h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base font-medium shadow-sm"
+      >
+        下一步
+      </Button>
+    </div>
+  )
+}
+