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>
399 lines
15 KiB
TypeScript
399 lines
15 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 { Search, Plus, Filter, Play, Pause, Edit, Trash2, MoreHorizontal, FileText, Clock } from "lucide-react"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Switch } from "@/components/ui/switch"
|
|
import { RuleEditor } from "@/components/tag-rules/rule-editor"
|
|
import { RuleExecutionHistory } from "@/components/tag-rules/rule-execution-history"
|
|
|
|
interface TagRule {
|
|
id: string
|
|
name: string
|
|
description: string
|
|
targetTag: string
|
|
condition: string
|
|
status: "active" | "inactive" | "draft"
|
|
priority: number
|
|
createdAt: string
|
|
lastRun: string
|
|
affectedUsers: number
|
|
}
|
|
|
|
const mockRules: TagRule[] = [
|
|
{
|
|
id: "1",
|
|
name: "高价值用户识别",
|
|
description: "根据用户消费金额和频次识别高价值用户",
|
|
targetTag: "高价值用户",
|
|
condition: "消费金额 > 5000 AND 消费频次 > 10",
|
|
status: "active",
|
|
priority: 1,
|
|
createdAt: "2023-05-12",
|
|
lastRun: "2023-07-21 15:30",
|
|
affectedUsers: 1250,
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "游戏爱好者标记",
|
|
description: "根据用户浏览和购买行为识别游戏爱好者",
|
|
targetTag: "游戏爱好者",
|
|
condition: "游戏类目浏览时长 > 30min OR 游戏类目购买次数 > 2",
|
|
status: "active",
|
|
priority: 2,
|
|
createdAt: "2023-04-18",
|
|
lastRun: "2023-07-21 14:45",
|
|
affectedUsers: 2840,
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "流失风险预警",
|
|
description: "识别30天内可能流失的用户",
|
|
targetTag: "流失风险高",
|
|
condition: "最近登录时间 > 15天 AND 最近30天活跃度下降率 > 50%",
|
|
status: "active",
|
|
priority: 1,
|
|
createdAt: "2023-06-30",
|
|
lastRun: "2023-07-21 13:20",
|
|
affectedUsers: 890,
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "周末活跃用户",
|
|
description: "识别周末活跃度高的用户",
|
|
targetTag: "周末活跃",
|
|
condition: "周末活跃时长 > 工作日活跃时长 * 1.5",
|
|
status: "inactive",
|
|
priority: 3,
|
|
createdAt: "2023-05-28",
|
|
lastRun: "2023-07-10 09:15",
|
|
affectedUsers: 3520,
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "潜在高转化用户",
|
|
description: "识别浏览量高但未转化的潜在用户",
|
|
targetTag: "潜在高转化",
|
|
condition: "浏览商品数 > 20 AND 加购次数 > 5 AND 购买次数 = 0",
|
|
status: "draft",
|
|
priority: 2,
|
|
createdAt: "2023-07-15",
|
|
lastRun: "-",
|
|
affectedUsers: 0,
|
|
},
|
|
]
|
|
|
|
export default function TagRulesPage() {
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
|
|
const [newRule, setNewRule] = useState({
|
|
name: "",
|
|
description: "",
|
|
targetTag: "",
|
|
condition: "",
|
|
priority: 2,
|
|
status: "draft",
|
|
})
|
|
const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null)
|
|
|
|
const handleCreateRule = () => {
|
|
// 这里应该是创建规则的逻辑
|
|
console.log("创建规则:", newRule)
|
|
setIsCreateDialogOpen(false)
|
|
setNewRule({
|
|
name: "",
|
|
description: "",
|
|
targetTag: "",
|
|
condition: "",
|
|
priority: 2,
|
|
status: "draft",
|
|
})
|
|
}
|
|
|
|
const filteredRules = mockRules.filter(
|
|
(rule) =>
|
|
rule.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
rule.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
rule.targetTag.toLowerCase().includes(searchQuery.toLowerCase()),
|
|
)
|
|
|
|
const getStatusBadge = (status: TagRule["status"]) => {
|
|
switch (status) {
|
|
case "active":
|
|
return <Badge className="bg-green-100 text-green-800">运行中</Badge>
|
|
case "inactive":
|
|
return <Badge className="bg-yellow-100 text-yellow-800">已暂停</Badge>
|
|
case "draft":
|
|
return <Badge className="bg-gray-100 text-gray-800">草稿</Badge>
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto p-6 space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">标签规则引擎</h1>
|
|
<p className="text-muted-foreground mt-1">管理和执行用户标签生成规则</p>
|
|
</div>
|
|
<div className="flex space-x-2">
|
|
<Button variant="outline">
|
|
<Clock className="mr-2 h-4 w-4" />
|
|
执行历史
|
|
</Button>
|
|
<Button onClick={() => setIsCreateDialogOpen(true)}>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
创建规则
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">规则总数</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">24</div>
|
|
<p className="text-xs text-muted-foreground mt-1">较上月增加 3 个</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">活跃规则</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">18</div>
|
|
<p className="text-xs text-muted-foreground mt-1">占总规则的 75%</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">今日执行次数</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">36</div>
|
|
<p className="text-xs text-muted-foreground mt-1">影响用户 12,580 人</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Tabs defaultValue="rules" className="space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<TabsList>
|
|
<TabsTrigger value="rules">规则列表</TabsTrigger>
|
|
<TabsTrigger value="editor">规则编辑器</TabsTrigger>
|
|
<TabsTrigger value="history">执行历史</TabsTrigger>
|
|
</TabsList>
|
|
<div className="flex space-x-2">
|
|
<div className="relative w-64">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
type="text"
|
|
placeholder="搜索规则..."
|
|
className="pl-8"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
<Button variant="outline" size="icon">
|
|
<Filter className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<TabsContent value="rules" className="space-y-4">
|
|
<Card>
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>规则名称</TableHead>
|
|
<TableHead>目标标签</TableHead>
|
|
<TableHead>状态</TableHead>
|
|
<TableHead>优先级</TableHead>
|
|
<TableHead>创建时间</TableHead>
|
|
<TableHead>最后执行</TableHead>
|
|
<TableHead>影响用户数</TableHead>
|
|
<TableHead className="text-right">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredRules.map((rule) => (
|
|
<TableRow key={rule.id}>
|
|
<TableCell className="font-medium">
|
|
<div>{rule.name}</div>
|
|
<div className="text-xs text-muted-foreground">{rule.description}</div>
|
|
</TableCell>
|
|
<TableCell>{rule.targetTag}</TableCell>
|
|
<TableCell>{getStatusBadge(rule.status)}</TableCell>
|
|
<TableCell>{rule.priority}</TableCell>
|
|
<TableCell>{rule.createdAt}</TableCell>
|
|
<TableCell>{rule.lastRun}</TableCell>
|
|
<TableCell>{rule.affectedUsers.toLocaleString()}</TableCell>
|
|
<TableCell className="text-right">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon">
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => setSelectedRuleId(rule.id)}>
|
|
<Edit className="mr-2 h-4 w-4" />
|
|
编辑
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
{rule.status === "active" ? (
|
|
<>
|
|
<Pause className="mr-2 h-4 w-4" />
|
|
暂停
|
|
</>
|
|
) : (
|
|
<>
|
|
<Play className="mr-2 h-4 w-4" />
|
|
启动
|
|
</>
|
|
)}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<FileText className="mr-2 h-4 w-4" />
|
|
查看详情
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
删除
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="editor" className="space-y-4">
|
|
<RuleEditor ruleId={selectedRuleId} />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="history" className="space-y-4">
|
|
<RuleExecutionHistory />
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
{/* 创建规则对话框 */}
|
|
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
|
<DialogContent className="sm:max-w-[600px]">
|
|
<DialogHeader>
|
|
<DialogTitle>创建新规则</DialogTitle>
|
|
<DialogDescription>添加新的标签生成规则</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="rule-name" className="text-right">
|
|
规则名称
|
|
</Label>
|
|
<Input
|
|
id="rule-name"
|
|
value={newRule.name}
|
|
onChange={(e) => setNewRule({ ...newRule, name: e.target.value })}
|
|
className="col-span-3"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="rule-description" className="text-right">
|
|
规则描述
|
|
</Label>
|
|
<Textarea
|
|
id="rule-description"
|
|
value={newRule.description}
|
|
onChange={(e) => setNewRule({ ...newRule, description: e.target.value })}
|
|
className="col-span-3"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="target-tag" className="text-right">
|
|
目标标签
|
|
</Label>
|
|
<Input
|
|
id="target-tag"
|
|
value={newRule.targetTag}
|
|
onChange={(e) => setNewRule({ ...newRule, targetTag: e.target.value })}
|
|
className="col-span-3"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="rule-condition" className="text-right">
|
|
规则条件
|
|
</Label>
|
|
<Textarea
|
|
id="rule-condition"
|
|
value={newRule.condition}
|
|
onChange={(e) => setNewRule({ ...newRule, condition: e.target.value })}
|
|
className="col-span-3"
|
|
placeholder="例如: 消费金额 > 5000 AND 消费频次 > 10"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="rule-priority" className="text-right">
|
|
优先级
|
|
</Label>
|
|
<Select
|
|
value={newRule.priority.toString()}
|
|
onValueChange={(value) => setNewRule({ ...newRule, priority: Number.parseInt(value) })}
|
|
>
|
|
<SelectTrigger className="col-span-3">
|
|
<SelectValue placeholder="选择优先级" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="1">1 - 高</SelectItem>
|
|
<SelectItem value="2">2 - 中</SelectItem>
|
|
<SelectItem value="3">3 - 低</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="rule-status" className="text-right">
|
|
规则状态
|
|
</Label>
|
|
<div className="flex items-center space-x-2 col-span-3">
|
|
<Switch
|
|
id="rule-status"
|
|
checked={newRule.status === "active"}
|
|
onCheckedChange={(checked) => setNewRule({ ...newRule, status: checked ? "active" : "draft" })}
|
|
/>
|
|
<Label htmlFor="rule-status">{newRule.status === "active" ? "立即启用" : "保存为草稿"}</Label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
|
|
取消
|
|
</Button>
|
|
<Button onClick={handleCreateRule}>创建</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|