chore: 以本地为准,上传全部并替换 GitHub
This commit is contained in:
@@ -1,14 +1,12 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useState, useEffect } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -24,523 +22,537 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import {
|
||||
Tags,
|
||||
Plus,
|
||||
Search,
|
||||
Sparkles,
|
||||
Play,
|
||||
Pause,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
AlertCircle,
|
||||
Settings,
|
||||
FileText,
|
||||
Plus,
|
||||
CheckCircle2,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Sparkles,
|
||||
ThumbsUp,
|
||||
ThumbsDown,
|
||||
Tags,
|
||||
Database,
|
||||
Brain,
|
||||
Edit,
|
||||
Trash2,
|
||||
Copy,
|
||||
Eye,
|
||||
MoreVertical,
|
||||
Bot,
|
||||
Clock,
|
||||
Target,
|
||||
Zap,
|
||||
} from "lucide-react"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
|
||||
// 第四部分:AI Agent - AI打标
|
||||
export default function AISmartTagPage() {
|
||||
// 打标任务接口
|
||||
interface TaggingTask {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
promptTemplate: string
|
||||
sourceDb: string
|
||||
sourceCollection: string
|
||||
targetTags: string[]
|
||||
status: 'idle' | 'running' | 'paused' | 'completed'
|
||||
progress: number
|
||||
stats: {
|
||||
totalRecords: number
|
||||
processedRecords: number
|
||||
taggedRecords: number
|
||||
accuracy: number
|
||||
}
|
||||
createdAt: string
|
||||
lastRunAt?: string
|
||||
}
|
||||
|
||||
// 默认提示词模板
|
||||
const DEFAULT_PROMPTS = {
|
||||
value: {
|
||||
name: '价值类打标',
|
||||
prompt: `你是用户资产数字化专家。请分析以下用户数据,生成价值类标签:
|
||||
|
||||
用户数据: {user_data}
|
||||
|
||||
打标规则:
|
||||
- RFM评分≥90: 输出"高价值用户"
|
||||
- RFM评分≥70: 输出"优质用户"
|
||||
- RFM评分≥50: 输出"普通用户"
|
||||
- RFM评分<50: 输出"待激活用户"
|
||||
- 近30天无活跃且历史RFM≥60: 输出"流失风险"
|
||||
|
||||
输出格式: ["标签1", "标签2", ...]
|
||||
只输出标签数组,不要其他内容。`,
|
||||
},
|
||||
behavior: {
|
||||
name: '行为类打标',
|
||||
prompt: `分析用户行为数据,生成行为类标签:
|
||||
|
||||
用户数据: {user_data}
|
||||
|
||||
打标规则:
|
||||
- 日活跃(每日登录): 输出"高频用户"
|
||||
- 周活跃(每周≥3天): 输出"活跃用户"
|
||||
- 月活跃(每月≥5天): 输出"普通用户"
|
||||
- 30天+未活跃: 输出"沉默用户"
|
||||
- 注册≤7天: 输出"新用户"
|
||||
|
||||
输出格式: ["标签1", "标签2", ...]`,
|
||||
},
|
||||
preference: {
|
||||
name: '偏好类打标',
|
||||
prompt: `分析用户消费和行为数据,生成偏好类标签:
|
||||
|
||||
用户数据: {user_data}
|
||||
|
||||
打标规则:
|
||||
- 电商消费≥5次/月: 输出"电商活跃"
|
||||
- 社交互动≥10次/天: 输出"社交达人"
|
||||
- 浏览金融产品: 输出"金融偏好"
|
||||
- 游戏时长≥2h/天: 输出"游戏玩家"
|
||||
|
||||
输出格式: ["标签1", "标签2", ...]`,
|
||||
},
|
||||
region: {
|
||||
name: '地域类打标',
|
||||
prompt: `分析用户地理位置数据,生成地域类标签:
|
||||
|
||||
用户数据: {user_data}
|
||||
|
||||
打标规则:
|
||||
- 省份为北京/上海/广州/深圳: 输出"一线城市"
|
||||
- 省份为福建且城市为厦门: 输出"厦门本地"
|
||||
- 根据省份输出对应地域标签
|
||||
|
||||
输出格式: ["标签1", "标签2", ...]`,
|
||||
},
|
||||
}
|
||||
|
||||
// 预定义任务
|
||||
const DEFAULT_TASKS: TaggingTask[] = [
|
||||
{
|
||||
id: 'task_1',
|
||||
name: '腾讯QQ用户价值打标',
|
||||
description: '基于RFM评分为QQ用户打价值类标签',
|
||||
promptTemplate: DEFAULT_PROMPTS.value.prompt,
|
||||
sourceDb: 'KR_腾讯',
|
||||
sourceCollection: 'qq_phone',
|
||||
targetTags: ['高价值用户', '优质用户', '普通用户', '待激活用户', '流失风险'],
|
||||
status: 'completed',
|
||||
progress: 100,
|
||||
stats: {
|
||||
totalRecords: 705000000,
|
||||
processedRecords: 705000000,
|
||||
taggedRecords: 680000000,
|
||||
accuracy: 96.4,
|
||||
},
|
||||
createdAt: '2024-01-15',
|
||||
lastRunAt: '2024-01-30 14:30',
|
||||
},
|
||||
{
|
||||
id: 'task_2',
|
||||
name: '京东用户行为打标',
|
||||
description: '基于消费行为为京东用户打行为类标签',
|
||||
promptTemplate: DEFAULT_PROMPTS.behavior.prompt,
|
||||
sourceDb: 'KR_京东',
|
||||
sourceCollection: 'users',
|
||||
targetTags: ['高频用户', '活跃用户', '普通用户', '沉默用户', '新用户'],
|
||||
status: 'running',
|
||||
progress: 65,
|
||||
stats: {
|
||||
totalRecords: 89000000,
|
||||
processedRecords: 57850000,
|
||||
taggedRecords: 55000000,
|
||||
accuracy: 94.2,
|
||||
},
|
||||
createdAt: '2024-01-20',
|
||||
lastRunAt: '2024-01-30 15:00',
|
||||
},
|
||||
{
|
||||
id: 'task_3',
|
||||
name: '存客宝用户偏好打标',
|
||||
description: '基于CRM数据为存客宝用户打偏好标签',
|
||||
promptTemplate: DEFAULT_PROMPTS.preference.prompt,
|
||||
sourceDb: 'cunkebao_v3',
|
||||
sourceCollection: 'users',
|
||||
targetTags: ['电商活跃', '社交达人', '金融偏好', '游戏玩家'],
|
||||
status: 'idle',
|
||||
progress: 0,
|
||||
stats: {
|
||||
totalRecords: 216000,
|
||||
processedRecords: 0,
|
||||
taggedRecords: 0,
|
||||
accuracy: 0,
|
||||
},
|
||||
createdAt: '2024-01-25',
|
||||
},
|
||||
]
|
||||
|
||||
export default function SmartTagPage() {
|
||||
const [tasks, setTasks] = useState<TaggingTask[]>(DEFAULT_TASKS)
|
||||
const [activeTab, setActiveTab] = useState("tasks")
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [selectedTask, setSelectedTask] = useState<TaggingTask | null>(null)
|
||||
const [showCreateDialog, setShowCreateDialog] = useState(false)
|
||||
const [showReviewDialog, setShowReviewDialog] = useState(false)
|
||||
const [selectedTask, setSelectedTask] = useState<any>(null)
|
||||
const [selectedItems, setSelectedItems] = useState<string[]>([])
|
||||
const [showPromptDialog, setShowPromptDialog] = useState(false)
|
||||
const [editingPrompt, setEditingPrompt] = useState('')
|
||||
const [selectedPromptType, setSelectedPromptType] = useState<keyof typeof DEFAULT_PROMPTS>('value')
|
||||
|
||||
// AI打标任务列表
|
||||
const tagTasks = [
|
||||
{
|
||||
id: "1",
|
||||
name: "高价值用户识别",
|
||||
prompt: "根据用户的消费金额、频次、最近活跃时间,识别高价值用户",
|
||||
status: "completed",
|
||||
targetTag: "高价值用户",
|
||||
dataSource: "用户表+交易表",
|
||||
affectedCount: 45678,
|
||||
confidence: 0.92,
|
||||
createdAt: "2026-01-30 10:00",
|
||||
completedAt: "2026-01-30 10:15",
|
||||
needReview: false,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "流失风险预警",
|
||||
prompt: "识别最近30天未登录且之前活跃的用户,标记为流失风险",
|
||||
status: "pending_review",
|
||||
targetTag: "流失风险",
|
||||
dataSource: "用户行为表",
|
||||
affectedCount: 12456,
|
||||
confidence: 0.87,
|
||||
createdAt: "2026-01-31 09:00",
|
||||
completedAt: "2026-01-31 09:12",
|
||||
needReview: true,
|
||||
reviewStats: { approved: 0, rejected: 0, pending: 12456 },
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "兴趣标签推断",
|
||||
prompt: "根据用户浏览和购买记录,推断用户兴趣偏好",
|
||||
status: "running",
|
||||
targetTag: "兴趣标签",
|
||||
dataSource: "行为日志表",
|
||||
affectedCount: 0,
|
||||
confidence: 0,
|
||||
createdAt: "2026-01-31 14:00",
|
||||
progress: 67,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "地域特征识别",
|
||||
prompt: "根据IP地址和收货地址,识别用户地域特征",
|
||||
status: "failed",
|
||||
targetTag: "地域标签",
|
||||
dataSource: "用户表+订单表",
|
||||
affectedCount: 0,
|
||||
confidence: 0,
|
||||
createdAt: "2026-01-29 15:00",
|
||||
error: "数据源连接超时",
|
||||
},
|
||||
]
|
||||
|
||||
// 待审核的标签结果
|
||||
const pendingReviews = [
|
||||
{ id: "r1", userId: "U10001", userName: "张三", currentTags: ["活跃用户"], newTag: "流失风险", confidence: 0.92, reason: "30天未登录" },
|
||||
{ id: "r2", userId: "U10002", userName: "李四", currentTags: ["普通用户"], newTag: "流失风险", confidence: 0.88, reason: "25天未登录" },
|
||||
{ id: "r3", userId: "U10003", userName: "王五", currentTags: ["新用户"], newTag: "流失风险", confidence: 0.75, reason: "注册后未活跃" },
|
||||
{ id: "r4", userId: "U10004", userName: "赵六", currentTags: ["VIP用户"], newTag: "流失风险", confidence: 0.65, reason: "消费频次下降" },
|
||||
{ id: "r5", userId: "U10005", userName: "钱七", currentTags: ["活跃用户"], newTag: "流失风险", confidence: 0.58, reason: "互动减少" },
|
||||
]
|
||||
const formatNumber = (num: number): string => {
|
||||
if (num >= 1000000000) return `${(num / 1000000000).toFixed(2)}B`
|
||||
if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`
|
||||
if (num >= 1000) return `${(num / 1000).toFixed(0)}K`
|
||||
return num.toLocaleString()
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "completed":
|
||||
return <Badge className="bg-green-100 text-green-700">已完成</Badge>
|
||||
case "running":
|
||||
return <Badge className="bg-blue-100 text-blue-700">执行中</Badge>
|
||||
case "pending_review":
|
||||
return <Badge className="bg-yellow-100 text-yellow-700">待审核</Badge>
|
||||
case "failed":
|
||||
return <Badge className="bg-red-100 text-red-700">失败</Badge>
|
||||
case 'completed':
|
||||
return <Badge className="bg-green-100 text-green-700"><CheckCircle2 className="h-3 w-3 mr-1" />已完成</Badge>
|
||||
case 'running':
|
||||
return <Badge className="bg-blue-100 text-blue-700"><Loader2 className="h-3 w-3 mr-1 animate-spin" />运行中</Badge>
|
||||
case 'paused':
|
||||
return <Badge className="bg-yellow-100 text-yellow-700"><Pause className="h-3 w-3 mr-1" />已暂停</Badge>
|
||||
default:
|
||||
return <Badge variant="secondary">未知</Badge>
|
||||
return <Badge className="bg-gray-100 text-gray-700">待执行</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
const getConfidenceColor = (confidence: number) => {
|
||||
if (confidence >= 0.8) return "text-green-600"
|
||||
if (confidence >= 0.6) return "text-yellow-600"
|
||||
return "text-red-600"
|
||||
// 模拟进度更新
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setTasks(prev => prev.map(t => {
|
||||
if (t.status === 'running' && t.progress < 100) {
|
||||
const newProgress = Math.min(t.progress + Math.random() * 2, 100)
|
||||
return {
|
||||
...t,
|
||||
progress: newProgress,
|
||||
status: newProgress >= 100 ? 'completed' as const : t.status,
|
||||
stats: {
|
||||
...t.stats,
|
||||
processedRecords: Math.floor(t.stats.totalRecords * newProgress / 100),
|
||||
taggedRecords: Math.floor(t.stats.totalRecords * newProgress / 100 * 0.95),
|
||||
}
|
||||
}
|
||||
}
|
||||
return t
|
||||
}))
|
||||
}, 3000)
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
const runTask = (taskId: string) => {
|
||||
setTasks(tasks.map(t => t.id === taskId ? { ...t, status: 'running' as const } : t))
|
||||
}
|
||||
|
||||
const handleOpenReview = (task: any) => {
|
||||
const pauseTask = (taskId: string) => {
|
||||
setTasks(tasks.map(t => t.id === taskId ? { ...t, status: 'paused' as const } : t))
|
||||
}
|
||||
|
||||
const openPromptEditor = (task: TaggingTask) => {
|
||||
setSelectedTask(task)
|
||||
setShowReviewDialog(true)
|
||||
setEditingPrompt(task.promptTemplate)
|
||||
setShowPromptDialog(true)
|
||||
}
|
||||
|
||||
const handleBatchApprove = () => {
|
||||
console.log("批量通过", selectedItems)
|
||||
setSelectedItems([])
|
||||
}
|
||||
|
||||
const handleBatchReject = () => {
|
||||
console.log("批量拒绝", selectedItems)
|
||||
setSelectedItems([])
|
||||
const savePrompt = () => {
|
||||
if (selectedTask) {
|
||||
setTasks(tasks.map(t => t.id === selectedTask.id ? { ...t, promptTemplate: editingPrompt } : t))
|
||||
setShowPromptDialog(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/20">
|
||||
<div className="p-6 space-y-6">
|
||||
{/* 顶部标题 */}
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">AI智能打标</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">使用AI自动识别用户特征并打标签,支持人工审核确认</p>
|
||||
<p className="text-sm text-gray-500 mt-1">配置提示词,让AI自动为用户打标签</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="outline">
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
刷新
|
||||
</Button>
|
||||
<Button onClick={() => setShowCreateDialog(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
创建打标任务
|
||||
新建任务
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card className="bg-white/80 backdrop-blur border-0 shadow-sm">
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<Card className="border-0 shadow-sm bg-white/80 backdrop-blur">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">任务总数</p>
|
||||
<p className="text-2xl font-bold text-gray-900">{tagTasks.length}</p>
|
||||
<p className="text-sm text-gray-500">打标任务</p>
|
||||
<p className="text-2xl font-bold">{tasks.length}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-xl bg-purple-100">
|
||||
<Sparkles className="h-6 w-6 text-purple-600" />
|
||||
</div>
|
||||
<Bot className="h-8 w-8 text-purple-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-white/80 backdrop-blur border-0 shadow-sm">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">待审核</p>
|
||||
<p className="text-2xl font-bold text-yellow-600">
|
||||
{tagTasks.filter((t) => t.status === "pending_review").length}
|
||||
</p>
|
||||
</div>
|
||||
<Clock className="h-8 w-8 text-yellow-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-white/80 backdrop-blur border-0 shadow-sm">
|
||||
<Card className="border-0 shadow-sm bg-white/80 backdrop-blur">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">已打标用户</p>
|
||||
<p className="text-2xl font-bold text-green-600">58,134</p>
|
||||
<p className="text-2xl font-bold text-green-600">{formatNumber(tasks.reduce((sum, t) => sum + t.stats.taggedRecords, 0))}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-xl bg-green-100">
|
||||
<Tags className="h-6 w-6 text-green-600" />
|
||||
</div>
|
||||
<Tags className="h-8 w-8 text-green-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-white/80 backdrop-blur border-0 shadow-sm">
|
||||
<Card className="border-0 shadow-sm bg-white/80 backdrop-blur">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">平均置信度</p>
|
||||
<p className="text-2xl font-bold text-blue-600">87.5%</p>
|
||||
<p className="text-sm text-gray-500">平均准确率</p>
|
||||
<p className="text-2xl font-bold text-blue-600">
|
||||
{(tasks.filter(t => t.stats.accuracy > 0).reduce((sum, t) => sum + t.stats.accuracy, 0) / tasks.filter(t => t.stats.accuracy > 0).length || 0).toFixed(1)}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-xl bg-blue-100">
|
||||
<Target className="h-6 w-6 text-blue-600" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border-0 shadow-sm bg-white/80 backdrop-blur">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">运行中</p>
|
||||
<p className="text-2xl font-bold text-orange-600">{tasks.filter(t => t.status === 'running').length}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-xl bg-orange-100">
|
||||
<Zap className="h-6 w-6 text-orange-600" />
|
||||
</div>
|
||||
<Sparkles className="h-8 w-8 text-blue-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
{/* 标签页 */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<div className="flex items-center justify-between">
|
||||
<TabsList className="bg-white">
|
||||
<TabsTrigger value="tasks">打标任务</TabsTrigger>
|
||||
<TabsTrigger value="review">审核中心</TabsTrigger>
|
||||
<TabsTrigger value="history">历史记录</TabsTrigger>
|
||||
</TabsList>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="搜索任务..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9 w-64 bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<TabsList className="bg-white/80 backdrop-blur">
|
||||
<TabsTrigger value="tasks">打标任务</TabsTrigger>
|
||||
<TabsTrigger value="prompts">提示词模板</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="tasks" className="mt-4">
|
||||
<div className="space-y-4">
|
||||
{tagTasks.map((task) => (
|
||||
<Card key={task.id} className="bg-white/80 backdrop-blur border-0 shadow-sm">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
{/* 打标任务列表 */}
|
||||
<TabsContent value="tasks" className="mt-4 space-y-3">
|
||||
{tasks.map(task => (
|
||||
<Card key={task.id} className="border-0 shadow-sm bg-white/80 backdrop-blur hover:shadow-lg transition-all">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2.5 rounded-xl bg-gradient-to-r from-purple-500 to-blue-500">
|
||||
<Sparkles className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-semibold text-gray-900">{task.name}</h3>
|
||||
{getStatusBadge(task.status)}
|
||||
<Badge variant="outline">{task.targetTag}</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mb-3">{task.prompt}</p>
|
||||
<div className="flex items-center gap-6 text-sm text-gray-500">
|
||||
<span>数据源:{task.dataSource}</span>
|
||||
{task.affectedCount > 0 && (
|
||||
<span>影响用户:{task.affectedCount.toLocaleString()}</span>
|
||||
)}
|
||||
{task.confidence > 0 && (
|
||||
<span className={getConfidenceColor(task.confidence)}>
|
||||
置信度:{(task.confidence * 100).toFixed(0)}%
|
||||
</span>
|
||||
)}
|
||||
<span>创建时间:{task.createdAt}</span>
|
||||
<p className="text-sm text-gray-500">{task.description}</p>
|
||||
<div className="text-xs text-gray-400 mt-1 font-mono">
|
||||
{task.sourceDb}.{task.sourceCollection}
|
||||
</div>
|
||||
{task.status === "running" && (
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center justify-between text-sm mb-1">
|
||||
<span className="text-gray-500">执行进度</span>
|
||||
<span className="text-blue-600">{task.progress}%</span>
|
||||
</div>
|
||||
<div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-blue-500 rounded-full transition-all"
|
||||
style={{ width: `${task.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{task.status === "failed" && (
|
||||
<div className="mt-3 p-3 bg-red-50 rounded-lg text-sm text-red-600">
|
||||
错误信息:{task.error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{task.status === "pending_review" && (
|
||||
<Button size="sm" onClick={() => handleOpenReview(task)}>
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
审核
|
||||
</Button>
|
||||
)}
|
||||
{task.status === "failed" && (
|
||||
<Button size="sm" variant="outline">
|
||||
<RefreshCw className="h-4 w-4 mr-1" />
|
||||
重试
|
||||
</Button>
|
||||
)}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>
|
||||
<FileText className="h-4 w-4 mr-2" />
|
||||
查看日志
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
编辑配置
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => openPromptEditor(task)}
|
||||
>
|
||||
<Edit className="h-4 w-4 mr-1" />
|
||||
编辑提示词
|
||||
</Button>
|
||||
{task.status === 'idle' && (
|
||||
<Button size="sm" onClick={() => runTask(task.id)}>
|
||||
<Play className="h-4 w-4 mr-1" /> 执行
|
||||
</Button>
|
||||
)}
|
||||
{task.status === 'running' && (
|
||||
<Button size="sm" variant="outline" onClick={() => pauseTask(task.id)}>
|
||||
<Pause className="h-4 w-4 mr-1" /> 暂停
|
||||
</Button>
|
||||
)}
|
||||
{task.status === 'paused' && (
|
||||
<Button size="sm" onClick={() => runTask(task.id)}>
|
||||
<Play className="h-4 w-4 mr-1" /> 继续
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 进度条 */}
|
||||
<div className="mb-3">
|
||||
<div className="flex items-center justify-between text-sm mb-1">
|
||||
<span className="text-gray-500">处理进度</span>
|
||||
<span className="font-medium">{task.progress.toFixed(0)}%</span>
|
||||
</div>
|
||||
<Progress value={task.progress} className="h-2" />
|
||||
</div>
|
||||
|
||||
{/* 目标标签 */}
|
||||
<div className="flex flex-wrap gap-1 mb-3">
|
||||
{task.targetTags.map((tag, i) => (
|
||||
<Badge key={i} variant="secondary" className="text-xs">{tag}</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 统计信息 */}
|
||||
<div className="grid grid-cols-4 gap-4 text-sm pt-3 border-t">
|
||||
<div>
|
||||
<span className="text-gray-500">总记录:</span>
|
||||
<span className="ml-2 font-medium">{formatNumber(task.stats.totalRecords)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">已处理:</span>
|
||||
<span className="ml-2 font-medium text-blue-600">{formatNumber(task.stats.processedRecords)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">已打标:</span>
|
||||
<span className="ml-2 font-medium text-green-600">{formatNumber(task.stats.taggedRecords)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">准确率:</span>
|
||||
<span className="ml-2 font-medium text-purple-600">{task.stats.accuracy}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</TabsContent>
|
||||
|
||||
{/* 提示词模板 */}
|
||||
<TabsContent value="prompts" className="mt-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{Object.entries(DEFAULT_PROMPTS).map(([key, config]) => (
|
||||
<Card key={key} className="border-0 shadow-sm bg-white/80 backdrop-blur">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<Brain className="h-4 w-4 text-purple-500" />
|
||||
{config.name}
|
||||
</span>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Copy className="h-3 w-3" />
|
||||
</Button>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<pre className="text-xs text-gray-600 bg-gray-50 p-3 rounded-lg overflow-x-auto whitespace-pre-wrap max-h-[200px] overflow-y-auto">
|
||||
{config.prompt}
|
||||
</pre>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="review" className="mt-4">
|
||||
<Card className="bg-white/80 backdrop-blur border-0 shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">待审核标签(共 {pendingReviews.length} 条)</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
{selectedItems.length > 0 && (
|
||||
<>
|
||||
<span className="text-sm text-gray-500">已选 {selectedItems.length} 项</span>
|
||||
<Button size="sm" onClick={handleBatchApprove}>
|
||||
<ThumbsUp className="h-4 w-4 mr-1" />
|
||||
批量通过
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={handleBatchReject}>
|
||||
<ThumbsDown className="h-4 w-4 mr-1" />
|
||||
批量拒绝
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{pendingReviews.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`flex items-center justify-between p-4 rounded-lg border transition-colors ${
|
||||
selectedItems.includes(item.id) ? "bg-blue-50 border-blue-200" : "bg-gray-50 border-transparent"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<Checkbox
|
||||
checked={selectedItems.includes(item.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedItems([...selectedItems, item.id])
|
||||
} else {
|
||||
setSelectedItems(selectedItems.filter((id) => id !== item.id))
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-gray-900">{item.userName}</span>
|
||||
<span className="text-sm text-gray-500">({item.userId})</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-sm text-gray-500">现有标签:</span>
|
||||
{item.currentTags.map((tag, index) => (
|
||||
<Badge key={index} variant="secondary" className="text-xs">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
<span className="text-gray-400">→</span>
|
||||
<Badge className="bg-yellow-100 text-yellow-700 text-xs">
|
||||
+ {item.newTag}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-1">原因:{item.reason}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-gray-500">置信度</p>
|
||||
<p className={`font-semibold ${getConfidenceColor(item.confidence)}`}>
|
||||
{(item.confidence * 100).toFixed(0)}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button size="sm" variant="outline" className="text-green-600 border-green-200 hover:bg-green-50 bg-transparent">
|
||||
<ThumbsUp className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" className="text-red-600 border-red-200 hover:bg-red-50 bg-transparent">
|
||||
<ThumbsDown className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="history" className="mt-4">
|
||||
<Card className="bg-white/80 backdrop-blur border-0 shadow-sm">
|
||||
<CardContent className="p-6 text-center text-gray-500">
|
||||
历史记录将显示所有已完成的打标任务及其审核结果
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* 创建任务弹窗 */}
|
||||
{/* 新建任务弹窗 */}
|
||||
<Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>创建AI打标任务</DialogTitle>
|
||||
<DialogDescription>配置AI打标规则,AI将自动识别符合条件的用户并打标签</DialogDescription>
|
||||
<DialogTitle>新建AI打标任务</DialogTitle>
|
||||
<DialogDescription>配置数据源和打标提示词</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label>任务名称</Label>
|
||||
<Input placeholder="例如:高价值用户识别" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>AI提示词</Label>
|
||||
<Textarea
|
||||
placeholder="描述你希望AI如何识别用户,例如:根据用户的消费金额、频次、最近活跃时间,识别高价值用户"
|
||||
rows={4}
|
||||
/>
|
||||
<p className="text-xs text-gray-400">
|
||||
提示:清晰描述识别条件,AI将自动分析数据并打标签
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>目标标签</Label>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择或创建标签" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="high-value">高价值用户</SelectItem>
|
||||
<SelectItem value="churn-risk">流失风险</SelectItem>
|
||||
<SelectItem value="new-user">新用户</SelectItem>
|
||||
<SelectItem value="vip">VIP用户</SelectItem>
|
||||
<SelectItem value="custom">创建新标签...</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Label>任务名称</Label>
|
||||
<Input placeholder="例如:高价值用户打标" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>数据源</Label>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择数据源" />
|
||||
<SelectValue placeholder="选择数据库" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="users">用户表</SelectItem>
|
||||
<SelectItem value="transactions">交易表</SelectItem>
|
||||
<SelectItem value="behaviors">行为表</SelectItem>
|
||||
<SelectItem value="all">全部数据</SelectItem>
|
||||
<SelectItem value="kr_tencent">KR_腾讯.qq_phone</SelectItem>
|
||||
<SelectItem value="kr_weibo">KR_微博.users</SelectItem>
|
||||
<SelectItem value="kr_jd">KR_京东.users</SelectItem>
|
||||
<SelectItem value="ckb">cunkebao_v3.users</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>置信度阈值</Label>
|
||||
<div className="flex items-center gap-4">
|
||||
<Input type="number" defaultValue="0.7" min="0" max="1" step="0.1" className="w-24" />
|
||||
<span className="text-sm text-gray-500">低于此阈值的结果需要人工审核</span>
|
||||
</div>
|
||||
<Label>选择提示词模板</Label>
|
||||
<Select value={selectedPromptType} onValueChange={(v) => setSelectedPromptType(v as keyof typeof DEFAULT_PROMPTS)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(DEFAULT_PROMPTS).map(([key, config]) => (
|
||||
<SelectItem key={key} value={key}>{config.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox id="auto-approve" />
|
||||
<Label htmlFor="auto-approve" className="text-sm font-normal">
|
||||
高置信度结果自动通过(置信度 ≥ 90%)
|
||||
</Label>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>提示词内容 <span className="text-gray-400 text-xs">(可自定义修改)</span></Label>
|
||||
<Textarea
|
||||
value={DEFAULT_PROMPTS[selectedPromptType].prompt}
|
||||
rows={10}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>目标标签 <span className="text-gray-400 text-xs">(逗号分隔)</span></Label>
|
||||
<Input placeholder="高价值用户, 优质用户, 普通用户" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowCreateDialog(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setShowCreateDialog(false)}>取消</Button>
|
||||
<Button onClick={() => setShowCreateDialog(false)}>
|
||||
<Zap className="h-4 w-4 mr-2" />
|
||||
开始执行
|
||||
<Sparkles className="h-4 w-4 mr-2" />
|
||||
创建任务
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 审核弹窗 */}
|
||||
<Dialog open={showReviewDialog} onOpenChange={setShowReviewDialog}>
|
||||
<DialogContent className="max-w-4xl max-h-[80vh]">
|
||||
{/* 编辑提示词弹窗 */}
|
||||
<Dialog open={showPromptDialog} onOpenChange={setShowPromptDialog}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>审核 - {selectedTask?.name}</DialogTitle>
|
||||
<DialogDescription>
|
||||
共 {selectedTask?.affectedCount.toLocaleString()} 条待审核,请确认AI打标结果
|
||||
</DialogDescription>
|
||||
<DialogTitle>编辑提示词</DialogTitle>
|
||||
<DialogDescription>{selectedTask?.name}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="py-4 max-h-96 overflow-y-auto">
|
||||
<div className="space-y-3">
|
||||
{pendingReviews.map((item) => (
|
||||
<div key={item.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<span className="font-medium">{item.userName}</span>
|
||||
<span className="text-gray-500 ml-2">({item.userId})</span>
|
||||
<p className="text-sm text-gray-500 mt-1">{item.reason}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={getConfidenceColor(item.confidence)}>
|
||||
{(item.confidence * 100).toFixed(0)}%
|
||||
</span>
|
||||
<Button size="sm" variant="outline" className="text-green-600 bg-transparent">
|
||||
<ThumbsUp className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" className="text-red-600 bg-transparent">
|
||||
<ThumbsDown className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="p-3 rounded-lg bg-blue-50 text-sm text-blue-700">
|
||||
💡 提示词中使用 <code className="bg-blue-100 px-1 rounded">{'{user_data}'}</code> 作为用户数据占位符
|
||||
</div>
|
||||
<Textarea
|
||||
value={editingPrompt}
|
||||
onChange={(e) => setEditingPrompt(e.target.value)}
|
||||
rows={15}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowReviewDialog(false)}>
|
||||
关闭
|
||||
<Button variant="outline" onClick={() => setShowPromptDialog(false)}>取消</Button>
|
||||
<Button onClick={savePrompt}>
|
||||
<CheckCircle2 className="h-4 w-4 mr-2" />
|
||||
保存提示词
|
||||
</Button>
|
||||
<Button variant="outline">全部拒绝</Button>
|
||||
<Button>全部通过</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Reference in New Issue
Block a user