存客宝 React

Cunkebao/app/components/acquisition/NewAcquisitionPlanForm.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { TrafficTeamSettings } from "@/app/components/TrafficTeamSettings"
+
+interface NewAcquisitionPlanFormProps {
+  onSubmit: (data: any) => void
+  onCancel: () => void
+}
+
+export function NewAcquisitionPlanForm({ onSubmit, onCancel }: NewAcquisitionPlanFormProps) {
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    trafficTeams: [], // Initialize trafficTeams as an empty array
+  })
+
+  const [currentStep, setCurrentStep] = useState(1)
+
+  const handleChange = (data: any) => {
+    setFormData(data)
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSubmit(formData)
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="steps-container">
+        {/* 步骤指示器 */}
+        <div className="step-indicators flex justify-between mb-8">
+          {[1, 2, 3, 4].map((step) => (
+            <div
+              key={step}
+              className={`flex flex-col items-center ${currentStep >= step ? "text-primary" : "text-gray-400"}`}
+            >
+              <div
+                className={`flex items-center justify-center w-8 h-8 rounded-full mb-2 ${
+                  currentStep >= step ? "bg-primary text-white" : "bg-gray-100 text-gray-400"
+                }`}
+              >
+                {step}
+              </div>
+              <div className="text-sm font-medium">
+                {step === 1 && "基础设置"}
+                {step === 2 && "好友设置"}
+                {step === 3 && "消息设置"}
+                {step === 4 && "流量标签"}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <Card className="p-6">
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold">基本信息</h2>
+          <div className="space-y-2">
+            <Label>计划名称</Label>
+            <Input
+              placeholder="输入计划名称"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>计划描述</Label>
+            <Input
+              placeholder="输入计划描述"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+            />
+          </div>
+        </div>
+      </Card>
+
+      <TrafficTeamSettings formData={formData} onChange={handleChange} />
+
+      <div className="flex justify-end space-x-4">
+        <Button type="button" variant="outline" onClick={onCancel}>
+          取消
+        </Button>
+        <Button type="submit">创建计划</Button>
+      </div>
+    </form>
+  )
+}
+