feat: 本次提交更新内容如下

场景获客列表搞定

Cunkebao/app/content/new/steps/basic-settings.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Switch } from "@/components/ui/switch"
+import { HelpCircle } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import type { ContentLibraryFormData } from "../page"
+
+interface BasicSettingsProps {
+  formData: ContentLibraryFormData
+  updateFormData: (field: string, value: any) => void
+  onNext: () => void
+}
+
+export function BasicSettings({ formData, updateFormData, onNext }: BasicSettingsProps) {
+  const isFormValid = formData.name.trim() !== ""
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="pt-6">
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-lg font-medium">基础设置</h2>
+              <p className="text-sm text-gray-500 mt-1">设置内容库的基本信息</p>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="name" className="text-base">
+                    内容库名称
+                  </Label>
+                  <span className="text-sm text-gray-500">必填</span>
+                </div>
+                <Input
+                  id="name"
+                  value={formData.name}
+                  onChange={(e) => updateFormData("name", e.target.value)}
+                  placeholder="请输入内容库名称"
+                  className="mt-1.5"
+                />
+                {formData.name.trim() === "" && <p className="text-sm text-red-500 mt-1">请输入内容库名称</p>}
+              </div>
+
+              <div>
+                <Label htmlFor="description" className="text-base">
+                  内容库描述
+                </Label>
+                <Textarea
+                  id="description"
+                  value={formData.description}
+                  onChange={(e) => updateFormData("description", e.target.value)}
+                  placeholder="请输入内容库描述（选填）"
+                  className="mt-1.5 min-h-[100px]"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label className="text-base">内容库类型</Label>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <HelpCircle className="h-4 w-4 text-gray-400 cursor-help" />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-xs">
+                        <p className="text-sm">选择内容库的类型，不同类型的内容库适用于不同的场景。</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+                <RadioGroup
+                  value={formData.type}
+                  onValueChange={(value) => updateFormData("type", value)}
+                  className="mt-2"
+                >
+                  <div className="flex items-start space-x-2 p-3 border rounded-md">
+                    <RadioGroupItem value="friends" id="friends" className="mt-1" />
+                    <div className="flex-1">
+                      <Label htmlFor="friends" className="font-medium">
+                        微信好友
+                      </Label>
+                      <p className="text-sm text-gray-500 mt-1">从微信好友中收集内容，适用于个人互动和一对一营销</p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start space-x-2 p-3 border rounded-md mt-2">
+                    <RadioGroupItem value="groups" id="groups" className="mt-1" />
+                    <div className="flex-1">
+                      <Label htmlFor="groups" className="font-medium">
+                        微信群
+                      </Label>
+                      <p className="text-sm text-gray-500 mt-1">从微信群中收集内容，适用于群组互动和社群营销</p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start space-x-2 p-3 border rounded-md mt-2">
+                    <RadioGroupItem value="moments" id="moments" className="mt-1" />
+                    <div className="flex-1">
+                      <Label htmlFor="moments" className="font-medium">
+                        朋友圈
+                      </Label>
+                      <p className="text-sm text-gray-500 mt-1">从朋友圈中收集内容，适用于社交媒体营销和品牌曝光</p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start space-x-2 p-3 border rounded-md mt-2">
+                    <RadioGroupItem value="mixed" id="mixed" className="mt-1" />
+                    <div className="flex-1">
+                      <Label htmlFor="mixed" className="font-medium">
+                        混合来源
+                      </Label>
+                      <p className="text-sm text-gray-500 mt-1">从多种来源收集内容，适用于全方位的内容收集和分析</p>
+                    </div>
+                  </div>
+                </RadioGroup>
+              </div>
+
+              <div className="flex items-center justify-between p-3 border rounded-md">
+                <div>
+                  <Label htmlFor="enabled" className="font-medium">
+                    启用状态
+                  </Label>
+                  <p className="text-sm text-gray-500 mt-1">设置内容库的初始状态，可以随时更改</p>
+                </div>
+                <Switch
+                  id="enabled"
+                  checked={formData.enabled}
+                  onCheckedChange={(checked) => updateFormData("enabled", checked)}
+                />
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button onClick={onNext} disabled={!isFormValid}>
+          下一步
+        </Button>
+      </div>
+    </div>
+  )
+}