refactor: overhaul UI for streamlined user experience
Redesign navigation, home overview, user portrait, and valuation pages with improved functionality and responsive design. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
284
app/workspace/auto-group/components/new-plan-form.tsx
Normal file
284
app/workspace/auto-group/components/new-plan-form.tsx
Normal file
@@ -0,0 +1,284 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Plus, X } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface NewPlanFormProps {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function NewPlanForm({ onClose }: NewPlanFormProps) {
|
||||
const [step, setStep] = useState(1)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
customerType: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
groupSize: 38,
|
||||
welcomeMessage: "欢迎进群",
|
||||
specificWechatIds: [] as string[],
|
||||
keywords: [] as string[],
|
||||
tags: [] as string[],
|
||||
deviceId: "",
|
||||
operatorId: "",
|
||||
})
|
||||
|
||||
const [tempInput, setTempInput] = useState({
|
||||
wechatId: "",
|
||||
keyword: "",
|
||||
tag: "",
|
||||
})
|
||||
|
||||
const handleAddWechatId = () => {
|
||||
if (tempInput.wechatId && !formData.specificWechatIds.includes(tempInput.wechatId)) {
|
||||
setFormData({
|
||||
...formData,
|
||||
specificWechatIds: [...formData.specificWechatIds, tempInput.wechatId],
|
||||
})
|
||||
setTempInput({ ...tempInput, wechatId: "" })
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddKeyword = () => {
|
||||
if (tempInput.keyword && !formData.keywords.includes(tempInput.keyword)) {
|
||||
setFormData({
|
||||
...formData,
|
||||
keywords: [...formData.keywords, tempInput.keyword],
|
||||
})
|
||||
setTempInput({ ...tempInput, keyword: "" })
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddTag = () => {
|
||||
if (tempInput.tag && !formData.tags.includes(tempInput.tag)) {
|
||||
setFormData({
|
||||
...formData,
|
||||
tags: [...formData.tags, tempInput.tag],
|
||||
})
|
||||
setTempInput({ ...tempInput, tag: "" })
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
try {
|
||||
// TODO: 实现提交逻辑
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
onClose()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>新建自动拉群计划</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{step === 1 && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name" className="text-base">
|
||||
计划名称<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="请输入计划名称"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="customerType" className="text-base">
|
||||
建群客户类型
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.customerType}
|
||||
onValueChange={(value) => setFormData({ ...formData, customerType: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择客户类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="high_value">高价值客户</SelectItem>
|
||||
<SelectItem value="regular">普通客户</SelectItem>
|
||||
<SelectItem value="potential">潜在客户</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="startDate" className="text-base">
|
||||
开始日期
|
||||
</Label>
|
||||
<Input
|
||||
id="startDate"
|
||||
type="date"
|
||||
value={formData.startDate}
|
||||
onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="endDate" className="text-base">
|
||||
结束日期
|
||||
</Label>
|
||||
<Input
|
||||
id="endDate"
|
||||
type="date"
|
||||
value={formData.endDate}
|
||||
onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-base">群人数设置</Label>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setFormData({ ...formData, groupSize: Math.max(1, formData.groupSize - 1) })}
|
||||
>
|
||||
-
|
||||
</Button>
|
||||
<span className="w-12 text-center">{formData.groupSize}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setFormData({ ...formData, groupSize: formData.groupSize + 1 })}
|
||||
>
|
||||
+
|
||||
</Button>
|
||||
<span>人/群</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="welcomeMessage" className="text-base">
|
||||
入群欢迎语
|
||||
</Label>
|
||||
<Textarea
|
||||
id="welcomeMessage"
|
||||
value={formData.welcomeMessage}
|
||||
onChange={(e) => setFormData({ ...formData, welcomeMessage: e.target.value })}
|
||||
placeholder="请输入欢迎语"
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-base">指定微信号</Label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Input
|
||||
value={tempInput.wechatId}
|
||||
onChange={(e) => setTempInput({ ...tempInput, wechatId: e.target.value })}
|
||||
placeholder="输入微信号"
|
||||
/>
|
||||
<Button type="button" variant="outline" size="icon" onClick={handleAddWechatId}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{formData.specificWechatIds.map((id) => (
|
||||
<Badge key={id} variant="secondary" className="flex items-center gap-1">
|
||||
{id}
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer"
|
||||
onClick={() =>
|
||||
setFormData({
|
||||
...formData,
|
||||
specificWechatIds: formData.specificWechatIds.filter((i) => i !== id),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-base">关键词筛选</Label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Input
|
||||
value={tempInput.keyword}
|
||||
onChange={(e) => setTempInput({ ...tempInput, keyword: e.target.value })}
|
||||
placeholder="输入关键词"
|
||||
/>
|
||||
<Button type="button" variant="outline" size="icon" onClick={handleAddKeyword}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{formData.keywords.map((keyword) => (
|
||||
<Badge key={keyword} variant="secondary" className="flex items-center gap-1">
|
||||
{keyword}
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer"
|
||||
onClick={() =>
|
||||
setFormData({
|
||||
...formData,
|
||||
keywords: formData.keywords.filter((k) => k !== keyword),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between pt-4">
|
||||
{step > 1 && (
|
||||
<Button type="button" variant="outline" onClick={() => setStep(step - 1)}>
|
||||
上一步
|
||||
</Button>
|
||||
)}
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
{step < 2 ? (
|
||||
<Button type="button" onClick={() => setStep(step + 1)} className="bg-blue-500 hover:bg-blue-600">
|
||||
下一步
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className={cn("bg-blue-500 hover:bg-blue-600", loading && "opacity-50 cursor-not-allowed")}
|
||||
>
|
||||
{loading ? "创建中..." : "确定"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user