98 lines
3.0 KiB
TypeScript
Executable File
98 lines
3.0 KiB
TypeScript
Executable File
"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>
|
|
)
|
|
}
|
|
|