存客宝 React

Cunkebao/app/workspace/moments-sync/[id]/edit/steps/basic-settings.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { Plus, Minus } from "lucide-react"
+
+interface BasicSettingsProps {
+  formData: {
+    taskName: string
+    startTime: string
+    endTime: string
+    syncCount: number
+    accountType: string
+    enabled: boolean
+  }
+  onChange: (data: Partial<BasicSettingsProps["formData"]>) => void
+  onNext: () => void
+}
+
+export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <div className="text-sm mb-2">任务名称</div>
+        <Input
+          value={formData.taskName}
+          onChange={(e) => onChange({ taskName: e.target.value })}
+          placeholder="请输入任务名称"
+        />
+      </div>
+
+      <div>
+        <div className="text-sm mb-2">允许发布时间段</div>
+        <div className="flex items-center space-x-3">
+          <Input
+            type="time"
+            value={formData.startTime}
+            onChange={(e) => onChange({ startTime: e.target.value })}
+            className="w-32"
+          />
+          <span className="text-gray-500">至</span>
+          <Input
+            type="time"
+            value={formData.endTime}
+            onChange={(e) => onChange({ endTime: e.target.value })}
+            className="w-32"
+          />
+        </div>
+      </div>
+
+      <div>
+        <div className="text-sm mb-2">每日同步数量</div>
+        <div className="flex items-center space-x-4">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
+          >
+            <Minus className="h-4 w-4" />
+          </Button>
+          <span className="w-8 text-center">{formData.syncCount}</span>
+          <Button variant="outline" size="icon" onClick={() => onChange({ syncCount: formData.syncCount + 1 })}>
+            <Plus className="h-4 w-4" />
+          </Button>
+          <span className="text-gray-500">条朋友圈</span>
+        </div>
+      </div>
+
+      <div>
+        <div className="text-sm mb-2">账号类型</div>
+        <div className="flex space-x-4">
+          <Button
+            variant={formData.accountType === "business" ? "default" : "outline"}
+            onClick={() => onChange({ accountType: "business" })}
+            className="flex-1"
+          >
+            业务号
+          </Button>
+          <Button
+            variant={formData.accountType === "personal" ? "default" : "outline"}
+            onClick={() => onChange({ accountType: "personal" })}
+            className="flex-1"
+          >
+            人设号
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <span className="text-sm">是否启用</span>
+        <Switch checked={formData.enabled} onCheckedChange={(checked) => onChange({ enabled: checked })} />
+      </div>
+
+      <Button onClick={onNext} className="w-full mt-8">
+        下一步
+      </Button>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/moments-sync/[id]/edit/steps/content-library-selection.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search } from "lucide-react"
+
+interface ContentLibrarySelectionProps {
+  selectedLibraries: string[]
+  onChange: (libraries: string[]) => void
+  onComplete: () => void
+  onPrev: () => void
+}
+
+export function ContentLibrarySelection({
+  selectedLibraries,
+  onChange,
+  onComplete,
+  onPrev,
+}: ContentLibrarySelectionProps) {
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+        <Input placeholder="选择内容库" className="pl-9" />
+      </div>
+
+      <div className="min-h-[300px] flex items-center justify-center text-gray-400">选择内容库组件将在这里实现</div>
+
+      <div className="flex space-x-3 mt-8">
+        <Button variant="outline" onClick={onPrev} className="flex-1">
+          上一步
+        </Button>
+        <Button onClick={onComplete} className="flex-1">
+          完成
+        </Button>
+      </div>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/moments-sync/[id]/edit/steps/device-selection.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search } from "lucide-react"
+
+interface DeviceSelectionProps {
+  selectedDevices: string[]
+  onChange: (devices: string[]) => void
+  onNext: () => void
+  onPrev: () => void
+}
+
+export function DeviceSelection({ selectedDevices, onChange, onNext, onPrev }: DeviceSelectionProps) {
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+        <Input placeholder="选择设备" className="pl-9" />
+      </div>
+
+      <div className="min-h-[300px] flex items-center justify-center text-gray-400">选择设备组件将在这里实现</div>
+
+      <div className="flex space-x-3 mt-8">
+        <Button variant="outline" onClick={onPrev} className="flex-1">
+          上一步
+        </Button>
+        <Button onClick={onNext} className="flex-1">
+          下一步
+        </Button>
+      </div>
+    </div>
+  )
+}
+