2408d50cb0
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>
308 lines
13 KiB
TypeScript
308 lines
13 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Textarea } from "@/components/ui/textarea"
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||
import { Switch } from "@/components/ui/switch"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { Calendar } from "@/components/ui/calendar"
|
||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||
import { CalendarIcon, Plus, Tag, X } from "lucide-react"
|
||
import { format } from "date-fns"
|
||
import { cn } from "@/lib/utils"
|
||
|
||
export function TaskCreation() {
|
||
const [selectedTags, setSelectedTags] = useState<string[]>([])
|
||
const [newTag, setNewTag] = useState("")
|
||
const [date, setDate] = useState<Date>()
|
||
|
||
const addTag = () => {
|
||
if (newTag && !selectedTags.includes(newTag)) {
|
||
setSelectedTags([...selectedTags, newTag])
|
||
setNewTag("")
|
||
}
|
||
}
|
||
|
||
const removeTag = (tag: string) => {
|
||
setSelectedTags(selectedTags.filter((t) => t !== tag))
|
||
}
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>创建标签任务</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Tabs defaultValue="basic" className="space-y-4">
|
||
<TabsList>
|
||
<TabsTrigger value="basic">基本信息</TabsTrigger>
|
||
<TabsTrigger value="target">目标设置</TabsTrigger>
|
||
<TabsTrigger value="action">动作配置</TabsTrigger>
|
||
<TabsTrigger value="schedule">计划设置</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="basic" className="space-y-4">
|
||
<div className="grid grid-cols-1 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="task-name">任务名称</Label>
|
||
<Input id="task-name" placeholder="输入任务名称" />
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="task-description">任务描述</Label>
|
||
<Textarea id="task-description" placeholder="输入任务描述" />
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="platform">目标平台</Label>
|
||
<Select>
|
||
<SelectTrigger id="platform">
|
||
<SelectValue placeholder="选择目标平台" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="jd">京东</SelectItem>
|
||
<SelectItem value="taobao">淘宝</SelectItem>
|
||
<SelectItem value="dangdang">当当网</SelectItem>
|
||
<SelectItem value="xiaohongshu">小红书</SelectItem>
|
||
<SelectItem value="zhihu">知乎</SelectItem>
|
||
<SelectItem value="bilibili">哔哩哔哩</SelectItem>
|
||
<SelectItem value="douyin">抖音</SelectItem>
|
||
<SelectItem value="other">其他平台</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="priority">任务优先级</Label>
|
||
<Select defaultValue="medium">
|
||
<SelectTrigger id="priority">
|
||
<SelectValue placeholder="选择优先级" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="high">高</SelectItem>
|
||
<SelectItem value="medium">中</SelectItem>
|
||
<SelectItem value="low">低</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="target" className="space-y-4">
|
||
<div className="grid grid-cols-1 gap-4">
|
||
<div className="space-y-2">
|
||
<Label>目标用户标签</Label>
|
||
<div className="flex flex-wrap gap-2 mb-2">
|
||
{selectedTags.map((tag) => (
|
||
<Badge key={tag} variant="outline" className="flex items-center gap-1">
|
||
<Tag className="h-3 w-3" />
|
||
{tag}
|
||
<button onClick={() => removeTag(tag)} className="ml-1">
|
||
<X className="h-3 w-3" />
|
||
</button>
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
<div className="flex space-x-2">
|
||
<Input
|
||
placeholder="输入标签名称"
|
||
value={newTag}
|
||
onChange={(e) => setNewTag(e.target.value)}
|
||
onKeyDown={(e) => e.key === "Enter" && addTag()}
|
||
/>
|
||
<Button type="button" size="sm" onClick={addTag}>
|
||
<Plus className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="user-segment">用户分群</Label>
|
||
<Select>
|
||
<SelectTrigger id="user-segment">
|
||
<SelectValue placeholder="选择用户分群" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">全部用户</SelectItem>
|
||
<SelectItem value="active">活跃用户</SelectItem>
|
||
<SelectItem value="new">新注册用户</SelectItem>
|
||
<SelectItem value="high-value">高价值用户</SelectItem>
|
||
<SelectItem value="inactive">不活跃用户</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="user-count">目标用户数量</Label>
|
||
<Input id="user-count" type="number" placeholder="输入目标用户数量" />
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="sampling-method">抽样方式</Label>
|
||
<Select defaultValue="random">
|
||
<SelectTrigger id="sampling-method">
|
||
<SelectValue placeholder="选择抽样方式" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="random">随机抽样</SelectItem>
|
||
<SelectItem value="stratified">分层抽样</SelectItem>
|
||
<SelectItem value="systematic">系统抽样</SelectItem>
|
||
<SelectItem value="all">全量用户</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="action" className="space-y-4">
|
||
<div className="grid grid-cols-1 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="action-type">动作类型</Label>
|
||
<Select>
|
||
<SelectTrigger id="action-type">
|
||
<SelectValue placeholder="选择动作类型" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="login">登录检测</SelectItem>
|
||
<SelectItem value="purchase">购买记录检测</SelectItem>
|
||
<SelectItem value="browse">浏览行为检测</SelectItem>
|
||
<SelectItem value="search">搜索行为检测</SelectItem>
|
||
<SelectItem value="content">内容偏好检测</SelectItem>
|
||
<SelectItem value="custom">自定义动作</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="action-params">动作参数</Label>
|
||
<Textarea id="action-params" placeholder="输入动作参数（JSON格式）" />
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="success-criteria">成功标准</Label>
|
||
<Select>
|
||
<SelectTrigger id="success-criteria">
|
||
<SelectValue placeholder="选择成功标准" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="login-success">登录成功</SelectItem>
|
||
<SelectItem value="purchase-complete">完成购买</SelectItem>
|
||
<SelectItem value="browse-time">浏览时间超过阈值</SelectItem>
|
||
<SelectItem value="search-count">搜索次数超过阈值</SelectItem>
|
||
<SelectItem value="content-interaction">内容互动</SelectItem>
|
||
<SelectItem value="custom">自定义标准</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>新增标签设置</Label>
|
||
<div className="space-y-2">
|
||
<div className="flex items-center space-x-2">
|
||
<Input placeholder="输入新标签名称" />
|
||
<Select>
|
||
<SelectTrigger className="w-[180px]">
|
||
<SelectValue placeholder="标签分类" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="behavior">行为特征</SelectItem>
|
||
<SelectItem value="preference">偏好特征</SelectItem>
|
||
<SelectItem value="value">价值特征</SelectItem>
|
||
<SelectItem value="lifecycle">生命周期</SelectItem>
|
||
<SelectItem value="custom">自定义分类</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<Button type="button" size="sm">
|
||
<Plus className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex items-center space-x-2">
|
||
<Switch id="auto-apply" />
|
||
<Label htmlFor="auto-apply">自动应用标签</Label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="schedule" className="space-y-4">
|
||
<div className="grid grid-cols-1 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="execution-mode">执行模式</Label>
|
||
<Select defaultValue="immediate">
|
||
<SelectTrigger id="execution-mode">
|
||
<SelectValue placeholder="选择执行模式" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="immediate">立即执行</SelectItem>
|
||
<SelectItem value="scheduled">定时执行</SelectItem>
|
||
<SelectItem value="recurring">周期执行</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>计划执行时间</Label>
|
||
<Popover>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant={"outline"}
|
||
className={cn("w-full justify-start text-left font-normal", !date && "text-muted-foreground")}
|
||
>
|
||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||
{date ? format(date, "PPP") : "选择日期"}
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent className="w-auto p-0">
|
||
<Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
|
||
</PopoverContent>
|
||
</Popover>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="execution-time">执行时间</Label>
|
||
<Input id="execution-time" type="time" />
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="recurrence-pattern">重复模式</Label>
|
||
<Select disabled={true}>
|
||
<SelectTrigger id="recurrence-pattern">
|
||
<SelectValue placeholder="选择重复模式" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="daily">每天</SelectItem>
|
||
<SelectItem value="weekly">每周</SelectItem>
|
||
<SelectItem value="monthly">每月</SelectItem>
|
||
<SelectItem value="custom">自定义</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex items-center space-x-2">
|
||
<Switch id="notify-completion" />
|
||
<Label htmlFor="notify-completion">任务完成通知</Label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
</Tabs>
|
||
|
||
<div className="flex justify-end space-x-2 mt-6">
|
||
<Button variant="outline">取消</Button>
|
||
<Button>创建任务</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|