refactor: overhaul system navigation based on 5 HTML docs
Reorganize modules, add AI Agent smart interaction, include prompt settings, enhance data output with subscriptions, and separate system monitoring. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
540
app/ai-agent/data-cleaning/page.tsx
Normal file
540
app/ai-agent/data-cleaning/page.tsx
Normal file
@@ -0,0 +1,540 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
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 { Progress } from "@/components/ui/progress"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import {
|
||||
Sparkles, Play, Pause, Settings, FileText, Database,
|
||||
CheckCircle2, XCircle, Clock, AlertTriangle, Eye, Trash2,
|
||||
RefreshCw, Download, ChevronRight, Zap, Bot
|
||||
} from "lucide-react"
|
||||
|
||||
// AI清洗规则数据
|
||||
const aiCleaningRules = [
|
||||
{
|
||||
id: "1",
|
||||
name: "手机号格式标准化",
|
||||
prompt: "识别并标准化所有手机号格式，去除空格、括号等特殊字符，统一为11位纯数字格式",
|
||||
dataSource: "用户主表",
|
||||
targetField: "phone",
|
||||
status: "running",
|
||||
confidence: 0.95,
|
||||
processedCount: 12580,
|
||||
totalCount: 15000,
|
||||
errorCount: 23,
|
||||
lastRun: "2024-01-15 10:30:00",
|
||||
needsReview: false,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "地址信息补全",
|
||||
prompt: "根据已有地址信息，智能补全省市区三级地址，并标准化地址格式",
|
||||
dataSource: "用户主表",
|
||||
targetField: "address",
|
||||
status: "pending_review",
|
||||
confidence: 0.78,
|
||||
processedCount: 8900,
|
||||
totalCount: 8900,
|
||||
errorCount: 156,
|
||||
lastRun: "2024-01-15 09:15:00",
|
||||
needsReview: true,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "姓名脱敏处理",
|
||||
prompt: "对姓名字段进行脱敏处理，保留姓氏，名字用*替代",
|
||||
dataSource: "交易记录表",
|
||||
targetField: "customer_name",
|
||||
status: "completed",
|
||||
confidence: 0.99,
|
||||
processedCount: 50000,
|
||||
totalCount: 50000,
|
||||
errorCount: 5,
|
||||
lastRun: "2024-01-14 18:00:00",
|
||||
needsReview: false,
|
||||
},
|
||||
]
|
||||
|
||||
// 待审核数据
|
||||
const pendingReviewData = [
|
||||
{
|
||||
id: "r1",
|
||||
ruleId: "2",
|
||||
ruleName: "地址信息补全",
|
||||
originalValue: "北京朝阳区",
|
||||
aiSuggestedValue: "北京市朝阳区建国路88号",
|
||||
confidence: 0.72,
|
||||
reason: "根据用户历史订单地址推断",
|
||||
},
|
||||
{
|
||||
id: "r2",
|
||||
ruleId: "2",
|
||||
ruleName: "地址信息补全",
|
||||
originalValue: "上海浦东",
|
||||
aiSuggestedValue: "上海市浦东新区陆家嘴环路1000号",
|
||||
confidence: 0.65,
|
||||
reason: "根据IP定位和常用地址推断",
|
||||
},
|
||||
]
|
||||
|
||||
export default function AIDataCleaningPage() {
|
||||
const [activeTab, setActiveTab] = useState("rules")
|
||||
const [showCreateDialog, setShowCreateDialog] = useState(false)
|
||||
const [showReviewDialog, setShowReviewDialog] = useState(false)
|
||||
const [selectedReview, setSelectedReview] = useState<typeof pendingReviewData[0] | null>(null)
|
||||
const [newRule, setNewRule] = useState({
|
||||
name: "",
|
||||
prompt: "",
|
||||
dataSource: "",
|
||||
targetField: "",
|
||||
autoApprove: false,
|
||||
confidenceThreshold: 0.9,
|
||||
})
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "running":
|
||||
return <Badge className="bg-blue-100 text-blue-700">运行中</Badge>
|
||||
case "completed":
|
||||
return <Badge className="bg-green-100 text-green-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>
|
||||
default:
|
||||
return <Badge variant="secondary">未知</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
const handleApprove = (id: string) => {
|
||||
console.log("Approved:", id)
|
||||
setShowReviewDialog(false)
|
||||
}
|
||||
|
||||
const handleReject = (id: string) => {
|
||||
console.log("Rejected:", id)
|
||||
setShowReviewDialog(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">AI数据清洗</h1>
|
||||
<p className="text-muted-foreground">通过AI提示词自动识别和清洗数据，支持人工审核机制</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowCreateDialog(true)}>
|
||||
<Sparkles className="mr-2 h-4 w-4" />
|
||||
创建AI清洗规则
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">活跃规则</p>
|
||||
<p className="text-2xl font-bold">12</p>
|
||||
</div>
|
||||
<Bot className="h-8 w-8 text-blue-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">今日处理</p>
|
||||
<p className="text-2xl font-bold">71,480</p>
|
||||
</div>
|
||||
<Zap className="h-8 w-8 text-green-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">待审核</p>
|
||||
<p className="text-2xl font-bold text-yellow-600">156</p>
|
||||
</div>
|
||||
<AlertTriangle className="h-8 w-8 text-yellow-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">平均置信度</p>
|
||||
<p className="text-2xl font-bold">92.3%</p>
|
||||
</div>
|
||||
<CheckCircle2 className="h-8 w-8 text-purple-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="rules">清洗规则</TabsTrigger>
|
||||
<TabsTrigger value="review">
|
||||
人工审核
|
||||
<Badge className="ml-2 bg-yellow-100 text-yellow-700">156</Badge>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="history">执行历史</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="rules" className="space-y-4">
|
||||
{aiCleaningRules.map((rule) => (
|
||||
<Card key={rule.id}>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="font-semibold text-lg">{rule.name}</h3>
|
||||
{getStatusBadge(rule.status)}
|
||||
{rule.needsReview && (
|
||||
<Badge variant="outline" className="text-yellow-600 border-yellow-300">
|
||||
需要审核
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="bg-muted/50 rounded-lg p-3 mb-3">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<span className="font-medium text-foreground">AI提示词：</span>
|
||||
{rule.prompt}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-6 text-sm text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Database className="h-4 w-4" />
|
||||
{rule.dataSource} / {rule.targetField}
|
||||
</span>
|
||||
<span>置信度: {(rule.confidence * 100).toFixed(0)}%</span>
|
||||
<span>错误: {rule.errorCount}</span>
|
||||
<span>最后执行: {rule.lastRun}</span>
|
||||
</div>
|
||||
{rule.status === "running" && (
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center justify-between text-sm mb-1">
|
||||
<span>处理进度</span>
|
||||
<span>{rule.processedCount.toLocaleString()} / {rule.totalCount.toLocaleString()}</span>
|
||||
</div>
|
||||
<Progress value={(rule.processedCount / rule.totalCount) * 100} className="h-2" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 ml-4">
|
||||
{rule.status === "running" ? (
|
||||
<Button variant="outline" size="sm">
|
||||
<Pause className="h-4 w-4 mr-1" />
|
||||
暂停
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="outline" size="sm">
|
||||
<Play className="h-4 w-4 mr-1" />
|
||||
执行
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="outline" size="sm">
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
预览
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="review" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>待审核清洗结果</CardTitle>
|
||||
<CardDescription>AI清洗结果中置信度较低或需要人工确认的数据</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>规则名称</TableHead>
|
||||
<TableHead>原始值</TableHead>
|
||||
<TableHead>AI建议值</TableHead>
|
||||
<TableHead>置信度</TableHead>
|
||||
<TableHead>推理依据</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{pendingReviewData.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell className="font-medium">{item.ruleName}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{item.originalValue}</TableCell>
|
||||
<TableCell className="text-blue-600">{item.aiSuggestedValue}</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
className={item.confidence >= 0.7 ? "bg-yellow-100 text-yellow-700" : "bg-red-100 text-red-700"}
|
||||
>
|
||||
{(item.confidence * 100).toFixed(0)}%
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="max-w-[200px] truncate text-muted-foreground">
|
||||
{item.reason}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="text-green-600 hover:text-green-700 bg-transparent"
|
||||
onClick={() => handleApprove(item.id)}
|
||||
>
|
||||
<CheckCircle2 className="h-4 w-4 mr-1" />
|
||||
通过
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="text-red-600 hover:text-red-700 bg-transparent"
|
||||
onClick={() => handleReject(item.id)}
|
||||
>
|
||||
<XCircle className="h-4 w-4 mr-1" />
|
||||
拒绝
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setSelectedReview(item)
|
||||
setShowReviewDialog(true)
|
||||
}}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="history" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>执行历史</CardTitle>
|
||||
<CardDescription>查看AI清洗规则的历史执行记录</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>规则名称</TableHead>
|
||||
<TableHead>执行时间</TableHead>
|
||||
<TableHead>处理数量</TableHead>
|
||||
<TableHead>成功率</TableHead>
|
||||
<TableHead>耗时</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell className="font-medium">手机号格式标准化</TableCell>
|
||||
<TableCell>2024-01-15 10:30:00</TableCell>
|
||||
<TableCell>15,000</TableCell>
|
||||
<TableCell>99.8%</TableCell>
|
||||
<TableCell>2分35秒</TableCell>
|
||||
<TableCell><Badge className="bg-green-100 text-green-700">成功</Badge></TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="sm">
|
||||
<FileText className="h-4 w-4 mr-1" />
|
||||
日志
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="font-medium">地址信息补全</TableCell>
|
||||
<TableCell>2024-01-15 09:15:00</TableCell>
|
||||
<TableCell>8,900</TableCell>
|
||||
<TableCell>98.2%</TableCell>
|
||||
<TableCell>5分12秒</TableCell>
|
||||
<TableCell><Badge className="bg-yellow-100 text-yellow-700">部分完成</Badge></TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="sm">
|
||||
<FileText className="h-4 w-4 mr-1" />
|
||||
日志
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* 创建AI清洗规则弹窗 */}
|
||||
<Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>创建AI清洗规则</DialogTitle>
|
||||
<DialogDescription>通过自然语言描述清洗需求，AI将自动识别和处理数据</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>规则名称</Label>
|
||||
<Input
|
||||
placeholder="输入规则名称"
|
||||
value={newRule.name}
|
||||
onChange={(e) => setNewRule({...newRule, name: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>数据源</Label>
|
||||
<Select
|
||||
value={newRule.dataSource}
|
||||
onValueChange={(v) => setNewRule({...newRule, dataSource: v})}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择数据源" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="user_main">用户主表</SelectItem>
|
||||
<SelectItem value="transaction">交易记录表</SelectItem>
|
||||
<SelectItem value="behavior">行为日志表</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>目标字段</Label>
|
||||
<Input
|
||||
placeholder="输入要清洗的字段名"
|
||||
value={newRule.targetField}
|
||||
onChange={(e) => setNewRule({...newRule, targetField: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>AI清洗提示词</Label>
|
||||
<Textarea
|
||||
placeholder="用自然语言描述清洗需求，例如：识别并标准化所有手机号格式，去除空格和特殊字符，统一为11位纯数字格式"
|
||||
className="min-h-[120px]"
|
||||
value={newRule.prompt}
|
||||
onChange={(e) => setNewRule({...newRule, prompt: e.target.value})}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
提示：描述越详细，AI清洗效果越好。可以包含具体的格式要求、异常处理方式等。
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
|
||||
<div>
|
||||
<Label>自动审批</Label>
|
||||
<p className="text-sm text-muted-foreground">置信度高于阈值时自动通过</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Switch
|
||||
checked={newRule.autoApprove}
|
||||
onCheckedChange={(v) => setNewRule({...newRule, autoApprove: v})}
|
||||
/>
|
||||
{newRule.autoApprove && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-sm">阈值:</Label>
|
||||
<Select
|
||||
value={newRule.confidenceThreshold.toString()}
|
||||
onValueChange={(v) => setNewRule({...newRule, confidenceThreshold: parseFloat(v)})}
|
||||
>
|
||||
<SelectTrigger className="w-24">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="0.95">95%</SelectItem>
|
||||
<SelectItem value="0.9">90%</SelectItem>
|
||||
<SelectItem value="0.85">85%</SelectItem>
|
||||
<SelectItem value="0.8">80%</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowCreateDialog(false)}>取消</Button>
|
||||
<Button>
|
||||
<Sparkles className="mr-2 h-4 w-4" />
|
||||
创建规则
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 审核详情弹窗 */}
|
||||
<Dialog open={showReviewDialog} onOpenChange={setShowReviewDialog}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>审核详情</DialogTitle>
|
||||
<DialogDescription>查看AI清洗建议的详细信息</DialogDescription>
|
||||
</DialogHeader>
|
||||
{selectedReview && (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-muted-foreground">规则名称</Label>
|
||||
<p className="font-medium">{selectedReview.ruleName}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">置信度</Label>
|
||||
<p className="font-medium">{(selectedReview.confidence * 100).toFixed(0)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">原始值</Label>
|
||||
<p className="p-2 bg-red-50 rounded border border-red-200 text-red-700">{selectedReview.originalValue}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">AI建议值</Label>
|
||||
<p className="p-2 bg-green-50 rounded border border-green-200 text-green-700">{selectedReview.aiSuggestedValue}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">推理依据</Label>
|
||||
<p className="p-2 bg-muted rounded">{selectedReview.reason}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => handleReject(selectedReview?.id || "")}>
|
||||
<XCircle className="mr-2 h-4 w-4" />
|
||||
拒绝
|
||||
</Button>
|
||||
<Button onClick={() => handleApprove(selectedReview?.id || "")}>
|
||||
<CheckCircle2 className="mr-2 h-4 w-4" />
|
||||
通过
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
234
app/ai-agent/report/page.tsx
Normal file
234
app/ai-agent/report/page.tsx
Normal file
@@ -0,0 +1,234 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import {
|
||||
FileText, Download, Share2, Clock, Eye, Sparkles,
|
||||
BarChart3, Users, TrendingUp, Calendar, Plus, Trash2
|
||||
} from "lucide-react"
|
||||
|
||||
const reportTemplates = [
|
||||
{ id: "1", name: "用户增长分析报告", description: "分析用户增长趋势和渠道效果", icon: TrendingUp },
|
||||
{ id: "2", name: "用户画像洞察报告", description: "深度分析用户特征和行为偏好", icon: Users },
|
||||
{ id: "3", name: "数据质量评估报告", description: "评估数据完整性和准确性", icon: BarChart3 },
|
||||
{ id: "4", name: "营销效果分析报告", description: "评估营销活动ROI和转化效果", icon: TrendingUp },
|
||||
]
|
||||
|
||||
const recentReports = [
|
||||
{
|
||||
id: "r1",
|
||||
name: "2024年1月用户增长分析报告",
|
||||
template: "用户增长分析报告",
|
||||
createdAt: "2024-01-15 14:30",
|
||||
status: "completed",
|
||||
pages: 12,
|
||||
},
|
||||
{
|
||||
id: "r2",
|
||||
name: "高价值用户画像洞察",
|
||||
template: "用户画像洞察报告",
|
||||
createdAt: "2024-01-14 10:20",
|
||||
status: "completed",
|
||||
pages: 8,
|
||||
},
|
||||
{
|
||||
id: "r3",
|
||||
name: "Q4数据质量评估",
|
||||
template: "数据质量评估报告",
|
||||
createdAt: "2024-01-10 16:45",
|
||||
status: "generating",
|
||||
pages: 0,
|
||||
},
|
||||
]
|
||||
|
||||
export default function AIReportPage() {
|
||||
const [showCreateDialog, setShowCreateDialog] = useState(false)
|
||||
const [selectedTemplate, setSelectedTemplate] = useState("")
|
||||
const [reportConfig, setReportConfig] = useState({
|
||||
name: "",
|
||||
dateRange: "last_30_days",
|
||||
userSegment: "all",
|
||||
customPrompt: "",
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">智能报告</h1>
|
||||
<p className="text-muted-foreground">AI自动生成数据分析报告，支持自定义模板和提示词</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowCreateDialog(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
生成报告
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 报告模板 */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-4">报告模板</h2>
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
{reportTemplates.map((template) => (
|
||||
<Card
|
||||
key={template.id}
|
||||
className="cursor-pointer hover:border-primary transition-colors"
|
||||
onClick={() => {
|
||||
setSelectedTemplate(template.id)
|
||||
setShowCreateDialog(true)
|
||||
}}
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="p-3 rounded-full bg-primary/10 mb-3">
|
||||
<template.icon className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-medium mb-1">{template.name}</h3>
|
||||
<p className="text-sm text-muted-foreground">{template.description}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 最近报告 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>最近报告</CardTitle>
|
||||
<CardDescription>查看和管理已生成的报告</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{recentReports.map((report) => (
|
||||
<div
|
||||
key={report.id}
|
||||
className="flex items-center justify-between p-4 border rounded-lg hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 rounded-lg bg-primary/10">
|
||||
<FileText className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium">{report.name}</h4>
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<span>{report.template}</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{report.createdAt}
|
||||
</span>
|
||||
{report.status === "completed" && (
|
||||
<span>{report.pages}页</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{report.status === "generating" ? (
|
||||
<Badge className="bg-blue-100 text-blue-700">
|
||||
<Sparkles className="h-3 w-3 mr-1 animate-pulse" />
|
||||
生成中
|
||||
</Badge>
|
||||
) : (
|
||||
<>
|
||||
<Button variant="outline" size="sm">
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
预览
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
下载
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Share2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 创建报告弹窗 */}
|
||||
<Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>生成智能报告</DialogTitle>
|
||||
<DialogDescription>选择模板并配置报告参数，AI将自动生成分析报告</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>报告名称</Label>
|
||||
<Input
|
||||
placeholder="输入报告名称"
|
||||
value={reportConfig.name}
|
||||
onChange={(e) => setReportConfig({...reportConfig, name: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>时间范围</Label>
|
||||
<Select
|
||||
value={reportConfig.dateRange}
|
||||
onValueChange={(v) => setReportConfig({...reportConfig, dateRange: v})}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="last_7_days">最近7天</SelectItem>
|
||||
<SelectItem value="last_30_days">最近30天</SelectItem>
|
||||
<SelectItem value="last_90_days">最近90天</SelectItem>
|
||||
<SelectItem value="custom">自定义</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>用户群体</Label>
|
||||
<Select
|
||||
value={reportConfig.userSegment}
|
||||
onValueChange={(v) => setReportConfig({...reportConfig, userSegment: v})}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部用户</SelectItem>
|
||||
<SelectItem value="high_value">高价值用户</SelectItem>
|
||||
<SelectItem value="new_users">新用户</SelectItem>
|
||||
<SelectItem value="active">活跃用户</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>自定义分析要求（可选）</Label>
|
||||
<Textarea
|
||||
placeholder="输入额外的分析要求，例如：重点分析转化漏斗、对比上月数据等"
|
||||
value={reportConfig.customPrompt}
|
||||
onChange={(e) => setReportConfig({...reportConfig, customPrompt: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowCreateDialog(false)}>取消</Button>
|
||||
<Button>
|
||||
<Sparkles className="mr-2 h-4 w-4" />
|
||||
开始生成
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
464
app/data-output/api-market/page.tsx
Normal file
464
app/data-output/api-market/page.tsx
Normal file
@@ -0,0 +1,464 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import {
|
||||
Server, Plus, Key, FileText, BarChart3, Settings,
|
||||
Eye, Copy, Trash2, CheckCircle2, XCircle, Clock,
|
||||
Activity, ExternalLink, Code, Shield
|
||||
} from "lucide-react"
|
||||
|
||||
const apis = [
|
||||
{
|
||||
id: "1",
|
||||
name: "用户画像查询API",
|
||||
endpoint: "/api/v1/user/portrait",
|
||||
method: "GET",
|
||||
description: "根据用户ID查询完整画像信息",
|
||||
status: "active",
|
||||
callCount: 125680,
|
||||
avgLatency: 45,
|
||||
errorRate: 0.02,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "标签批量查询API",
|
||||
endpoint: "/api/v1/tags/batch",
|
||||
method: "POST",
|
||||
description: "批量查询用户标签",
|
||||
status: "active",
|
||||
callCount: 89420,
|
||||
avgLatency: 120,
|
||||
errorRate: 0.05,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "CLV评分API",
|
||||
endpoint: "/api/v1/clv/score",
|
||||
method: "GET",
|
||||
description: "获取用户CLV评分和预测值",
|
||||
status: "maintenance",
|
||||
callCount: 45230,
|
||||
avgLatency: 85,
|
||||
errorRate: 0.01,
|
||||
},
|
||||
]
|
||||
|
||||
const apiKeys = [
|
||||
{ id: "1", name: "生产环境密钥", key: "sk_prod_****8a9b", created: "2024-01-01", lastUsed: "2024-01-15", status: "active" },
|
||||
{ id: "2", name: "测试环境密钥", key: "sk_test_****3c2d", created: "2024-01-05", lastUsed: "2024-01-14", status: "active" },
|
||||
]
|
||||
|
||||
export default function APIMarketPage() {
|
||||
const [activeTab, setActiveTab] = useState("apis")
|
||||
const [showDocDialog, setShowDocDialog] = useState(false)
|
||||
const [showKeyDialog, setShowKeyDialog] = useState(false)
|
||||
const [showMonitorDialog, setShowMonitorDialog] = useState(false)
|
||||
const [selectedApi, setSelectedApi] = useState<typeof apis[0] | null>(null)
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "active":
|
||||
return <Badge className="bg-green-100 text-green-700">运行中</Badge>
|
||||
case "maintenance":
|
||||
return <Badge className="bg-yellow-100 text-yellow-700">维护中</Badge>
|
||||
case "disabled":
|
||||
return <Badge className="bg-gray-100 text-gray-700">已停用</Badge>
|
||||
default:
|
||||
return <Badge variant="secondary">未知</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">API市场</h1>
|
||||
<p className="text-muted-foreground">管理和监控数据API服务</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => setShowKeyDialog(true)}>
|
||||
<Key className="mr-2 h-4 w-4" />
|
||||
管理密钥
|
||||
</Button>
|
||||
<Button>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
发布API
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">API总数</p>
|
||||
<p className="text-2xl font-bold">12</p>
|
||||
</div>
|
||||
<Server className="h-8 w-8 text-blue-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">今日调用</p>
|
||||
<p className="text-2xl font-bold">45.2K</p>
|
||||
</div>
|
||||
<Activity className="h-8 w-8 text-green-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">平均延迟</p>
|
||||
<p className="text-2xl font-bold">68ms</p>
|
||||
</div>
|
||||
<Clock className="h-8 w-8 text-purple-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">成功率</p>
|
||||
<p className="text-2xl font-bold">99.8%</p>
|
||||
</div>
|
||||
<CheckCircle2 className="h-8 w-8 text-cyan-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="apis">API列表</TabsTrigger>
|
||||
<TabsTrigger value="keys">API密钥</TabsTrigger>
|
||||
<TabsTrigger value="logs">调用日志</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="apis" className="space-y-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>API名称</TableHead>
|
||||
<TableHead>端点</TableHead>
|
||||
<TableHead>方法</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead>调用量</TableHead>
|
||||
<TableHead>延迟</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{apis.map((api) => (
|
||||
<TableRow key={api.id}>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="font-medium">{api.name}</p>
|
||||
<p className="text-sm text-muted-foreground">{api.description}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<code className="text-sm bg-muted px-2 py-1 rounded">{api.endpoint}</code>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline">{api.method}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{getStatusBadge(api.status)}</TableCell>
|
||||
<TableCell>{api.callCount.toLocaleString()}</TableCell>
|
||||
<TableCell>{api.avgLatency}ms</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedApi(api)
|
||||
setShowDocDialog(true)
|
||||
}}
|
||||
>
|
||||
<FileText className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedApi(api)
|
||||
setShowMonitorDialog(true)
|
||||
}}
|
||||
>
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="keys" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>API密钥</CardTitle>
|
||||
<CardDescription>管理API访问密钥</CardDescription>
|
||||
</div>
|
||||
<Button size="sm">
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
创建密钥
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>名称</TableHead>
|
||||
<TableHead>密钥</TableHead>
|
||||
<TableHead>创建时间</TableHead>
|
||||
<TableHead>最后使用</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{apiKeys.map((key) => (
|
||||
<TableRow key={key.id}>
|
||||
<TableCell className="font-medium">{key.name}</TableCell>
|
||||
<TableCell>
|
||||
<code className="text-sm bg-muted px-2 py-1 rounded">{key.key}</code>
|
||||
</TableCell>
|
||||
<TableCell>{key.created}</TableCell>
|
||||
<TableCell>{key.lastUsed}</TableCell>
|
||||
<TableCell>
|
||||
<Badge className="bg-green-100 text-green-700">活跃</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button variant="ghost" size="sm">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="text-red-600">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="logs" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>调用日志</CardTitle>
|
||||
<CardDescription>查看API调用历史记录</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>时间</TableHead>
|
||||
<TableHead>API</TableHead>
|
||||
<TableHead>方法</TableHead>
|
||||
<TableHead>状态码</TableHead>
|
||||
<TableHead>延迟</TableHead>
|
||||
<TableHead>IP</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>2024-01-15 14:30:25</TableCell>
|
||||
<TableCell>/api/v1/user/portrait</TableCell>
|
||||
<TableCell><Badge variant="outline">GET</Badge></TableCell>
|
||||
<TableCell><Badge className="bg-green-100 text-green-700">200</Badge></TableCell>
|
||||
<TableCell>42ms</TableCell>
|
||||
<TableCell>192.168.1.***</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>2024-01-15 14:30:18</TableCell>
|
||||
<TableCell>/api/v1/tags/batch</TableCell>
|
||||
<TableCell><Badge variant="outline">POST</Badge></TableCell>
|
||||
<TableCell><Badge className="bg-green-100 text-green-700">200</Badge></TableCell>
|
||||
<TableCell>118ms</TableCell>
|
||||
<TableCell>192.168.1.***</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>2024-01-15 14:30:05</TableCell>
|
||||
<TableCell>/api/v1/clv/score</TableCell>
|
||||
<TableCell><Badge variant="outline">GET</Badge></TableCell>
|
||||
<TableCell><Badge className="bg-red-100 text-red-700">500</Badge></TableCell>
|
||||
<TableCell>-</TableCell>
|
||||
<TableCell>192.168.2.***</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* API文档弹窗 */}
|
||||
<Dialog open={showDocDialog} onOpenChange={setShowDocDialog}>
|
||||
<DialogContent className="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{selectedApi?.name} - 接口文档</DialogTitle>
|
||||
<DialogDescription>{selectedApi?.description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">{selectedApi?.method}</Badge>
|
||||
<code className="flex-1 bg-muted px-3 py-2 rounded text-sm">{selectedApi?.endpoint}</code>
|
||||
<Button variant="outline" size="sm">
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-sm font-medium">请求参数</Label>
|
||||
<div className="mt-2 bg-muted rounded-lg p-4">
|
||||
<pre className="text-sm">{`{
|
||||
"user_id": "string (必填) - 用户唯一标识",
|
||||
"fields": "array (可选) - 需要返回的字段列表"
|
||||
}`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-sm font-medium">响应示例</Label>
|
||||
<div className="mt-2 bg-muted rounded-lg p-4">
|
||||
<pre className="text-sm">{`{
|
||||
"code": 200,
|
||||
"data": {
|
||||
"user_id": "U12345",
|
||||
"portrait": {
|
||||
"basic": { "age": 28, "gender": "M" },
|
||||
"tags": ["高价值", "活跃用户"],
|
||||
"clv_score": 92
|
||||
}
|
||||
}
|
||||
}`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowDocDialog(false)}>关闭</Button>
|
||||
<Button>
|
||||
<ExternalLink className="mr-2 h-4 w-4" />
|
||||
在线调试
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 监控弹窗 */}
|
||||
<Dialog open={showMonitorDialog} onOpenChange={setShowMonitorDialog}>
|
||||
<DialogContent className="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{selectedApi?.name} - 性能监控</DialogTitle>
|
||||
<DialogDescription>查看API实时性能指标</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Card className="p-4">
|
||||
<p className="text-sm text-muted-foreground">今日调用</p>
|
||||
<p className="text-2xl font-bold">{selectedApi?.callCount.toLocaleString()}</p>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<p className="text-sm text-muted-foreground">平均延迟</p>
|
||||
<p className="text-2xl font-bold">{selectedApi?.avgLatency}ms</p>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<p className="text-sm text-muted-foreground">错误率</p>
|
||||
<p className="text-2xl font-bold">{((selectedApi?.errorRate || 0) * 100).toFixed(2)}%</p>
|
||||
</Card>
|
||||
</div>
|
||||
<Card className="p-4">
|
||||
<p className="text-sm font-medium mb-4">调用趋势 (最近24小时)</p>
|
||||
<div className="h-48 flex items-end justify-between gap-1">
|
||||
{Array.from({ length: 24 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 bg-primary/20 rounded-t"
|
||||
style={{ height: `${Math.random() * 100}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowMonitorDialog(false)}>关闭</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 密钥管理弹窗 */}
|
||||
<Dialog open={showKeyDialog} onOpenChange={setShowKeyDialog}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>创建API密钥</DialogTitle>
|
||||
<DialogDescription>创建新的API访问密钥</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>密钥名称</Label>
|
||||
<Input placeholder="输入密钥名称，如：生产环境密钥" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>权限范围</Label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<label className="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-muted">
|
||||
<input type="checkbox" defaultChecked />
|
||||
<span>用户画像API</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-muted">
|
||||
<input type="checkbox" defaultChecked />
|
||||
<span>标签查询API</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-muted">
|
||||
<input type="checkbox" />
|
||||
<span>CLV评分API</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-muted">
|
||||
<input type="checkbox" />
|
||||
<span>流量包API</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowKeyDialog(false)}>取消</Button>
|
||||
<Button>创建密钥</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
377
app/data-output/packages/page.tsx
Normal file
377
app/data-output/packages/page.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import {
|
||||
Package, Plus, Download, Eye, Trash2, RefreshCw,
|
||||
Users, Calendar, Tag, Filter, MoreHorizontal, Share2,
|
||||
CheckCircle2, Clock, AlertCircle
|
||||
} from "lucide-react"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
|
||||
const packages = [
|
||||
{
|
||||
id: "1",
|
||||
name: "高价值用户流量包",
|
||||
description: "CLV评分前20%的活跃用户",
|
||||
userCount: 15680,
|
||||
tags: ["高价值", "活跃用户"],
|
||||
status: "active",
|
||||
createdAt: "2024-01-10",
|
||||
lastUpdated: "2024-01-15",
|
||||
downloadCount: 23,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "潜力用户营销包",
|
||||
description: "近30天有浏览但未转化的用户",
|
||||
userCount: 8920,
|
||||
tags: ["潜力用户", "营销"],
|
||||
status: "active",
|
||||
createdAt: "2024-01-08",
|
||||
lastUpdated: "2024-01-14",
|
||||
downloadCount: 15,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "流失预警用户包",
|
||||
description: "预测30天内可能流失的用户",
|
||||
userCount: 3240,
|
||||
tags: ["流失预警", "挽回"],
|
||||
status: "updating",
|
||||
createdAt: "2024-01-05",
|
||||
lastUpdated: "2024-01-15",
|
||||
downloadCount: 8,
|
||||
},
|
||||
]
|
||||
|
||||
export default function PackagesPage() {
|
||||
const [showCreateDialog, setShowCreateDialog] = useState(false)
|
||||
const [showPreviewDialog, setShowPreviewDialog] = useState(false)
|
||||
const [selectedPackage, setSelectedPackage] = useState<typeof packages[0] | null>(null)
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "active":
|
||||
return <Badge className="bg-green-100 text-green-700">可用</Badge>
|
||||
case "updating":
|
||||
return <Badge className="bg-blue-100 text-blue-700">更新中</Badge>
|
||||
case "expired":
|
||||
return <Badge className="bg-gray-100 text-gray-700">已过期</Badge>
|
||||
default:
|
||||
return <Badge variant="secondary">未知</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">流量包管理</h1>
|
||||
<p className="text-muted-foreground">创建和管理用户流量包，支持多维度筛选和导出</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowCreateDialog(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
创建流量包
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">流量包总数</p>
|
||||
<p className="text-2xl font-bold">24</p>
|
||||
</div>
|
||||
<Package className="h-8 w-8 text-blue-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">覆盖用户</p>
|
||||
<p className="text-2xl font-bold">156.8K</p>
|
||||
</div>
|
||||
<Users className="h-8 w-8 text-green-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">本月下载</p>
|
||||
<p className="text-2xl font-bold">89</p>
|
||||
</div>
|
||||
<Download className="h-8 w-8 text-purple-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">活跃包</p>
|
||||
<p className="text-2xl font-bold">18</p>
|
||||
</div>
|
||||
<CheckCircle2 className="h-8 w-8 text-cyan-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 流量包列表 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>流量包列表</CardTitle>
|
||||
<CardDescription>管理所有已创建的用户流量包</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input placeholder="搜索流量包..." className="w-64" />
|
||||
<Button variant="outline" size="icon">
|
||||
<Filter className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>名称</TableHead>
|
||||
<TableHead>用户数</TableHead>
|
||||
<TableHead>标签</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead>更新时间</TableHead>
|
||||
<TableHead>下载次数</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{packages.map((pkg) => (
|
||||
<TableRow key={pkg.id}>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="font-medium">{pkg.name}</p>
|
||||
<p className="text-sm text-muted-foreground">{pkg.description}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{pkg.userCount.toLocaleString()}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-1">
|
||||
{pkg.tags.map((tag) => (
|
||||
<Badge key={tag} variant="outline" className="text-xs">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{getStatusBadge(pkg.status)}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{pkg.lastUpdated}</TableCell>
|
||||
<TableCell>{pkg.downloadCount}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedPackage(pkg)
|
||||
setShowPreviewDialog(true)
|
||||
}}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Download className="h-4 w-4" />
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
刷新数据
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Share2 className="h-4 w-4 mr-2" />
|
||||
分享
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-red-600">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
删除
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 创建流量包弹窗 */}
|
||||
<Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>创建流量包</DialogTitle>
|
||||
<DialogDescription>通过设置筛选条件创建用户流量包</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>流量包名称</Label>
|
||||
<Input placeholder="输入流量包名称" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>描述</Label>
|
||||
<Input placeholder="输入流量包描述" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>筛选条件</Label>
|
||||
<Card className="p-4">
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择字段" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="clv_score">CLV评分</SelectItem>
|
||||
<SelectItem value="rfm_level">RFM等级</SelectItem>
|
||||
<SelectItem value="last_active">最后活跃</SelectItem>
|
||||
<SelectItem value="purchase_count">购买次数</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择条件" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="gt">大于</SelectItem>
|
||||
<SelectItem value="lt">小于</SelectItem>
|
||||
<SelectItem value="eq">等于</SelectItem>
|
||||
<SelectItem value="between">介于</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input placeholder="输入值" />
|
||||
</div>
|
||||
<Button variant="outline" size="sm">
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
添加条件
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>标签</Label>
|
||||
<Input placeholder="输入标签，用逗号分隔" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowCreateDialog(false)}>取消</Button>
|
||||
<Button>
|
||||
<Eye className="mr-2 h-4 w-4" />
|
||||
预览结果
|
||||
</Button>
|
||||
<Button>创建</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 预览弹窗 */}
|
||||
<Dialog open={showPreviewDialog} onOpenChange={setShowPreviewDialog}>
|
||||
<DialogContent className="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>流量包预览 - {selectedPackage?.name}</DialogTitle>
|
||||
<DialogDescription>{selectedPackage?.description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Card className="p-4">
|
||||
<p className="text-sm text-muted-foreground">用户总数</p>
|
||||
<p className="text-2xl font-bold">{selectedPackage?.userCount.toLocaleString()}</p>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<p className="text-sm text-muted-foreground">平均CLV</p>
|
||||
<p className="text-2xl font-bold">¥2,580</p>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<p className="text-sm text-muted-foreground">活跃率</p>
|
||||
<p className="text-2xl font-bold">78.5%</p>
|
||||
</Card>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">用户样本</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>用户ID</TableHead>
|
||||
<TableHead>CLV评分</TableHead>
|
||||
<TableHead>RFM等级</TableHead>
|
||||
<TableHead>最后活跃</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>U****001</TableCell>
|
||||
<TableCell>92</TableCell>
|
||||
<TableCell>A</TableCell>
|
||||
<TableCell>2024-01-15</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>U****002</TableCell>
|
||||
<TableCell>88</TableCell>
|
||||
<TableCell>A</TableCell>
|
||||
<TableCell>2024-01-14</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>U****003</TableCell>
|
||||
<TableCell>85</TableCell>
|
||||
<TableCell>B</TableCell>
|
||||
<TableCell>2024-01-15</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowPreviewDialog(false)}>关闭</Button>
|
||||
<Button>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
导出数据
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
243
app/data-output/subscription/page.tsx
Normal file
243
app/data-output/subscription/page.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, 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 { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import {
|
||||
Webhook, Plus, Settings, Trash2, Play, Pause,
|
||||
CheckCircle2, XCircle, Clock, RefreshCw, Eye
|
||||
} from "lucide-react"
|
||||
|
||||
const subscriptions = [
|
||||
{
|
||||
id: "1",
|
||||
name: "用户标签变更通知",
|
||||
type: "webhook",
|
||||
endpoint: "https://api.example.com/webhook/tags",
|
||||
event: "tag_changed",
|
||||
status: "active",
|
||||
lastTriggered: "2024-01-15 14:20:00",
|
||||
successRate: 99.5,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "高价值用户预警",
|
||||
type: "webhook",
|
||||
endpoint: "https://api.example.com/webhook/alerts",
|
||||
event: "high_value_alert",
|
||||
status: "active",
|
||||
lastTriggered: "2024-01-15 10:15:00",
|
||||
successRate: 98.2,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "数据同步完成通知",
|
||||
type: "email",
|
||||
endpoint: "admin@example.com",
|
||||
event: "sync_completed",
|
||||
status: "paused",
|
||||
lastTriggered: "2024-01-14 23:00:00",
|
||||
successRate: 100,
|
||||
},
|
||||
]
|
||||
|
||||
export default function SubscriptionPage() {
|
||||
const [showCreateDialog, setShowCreateDialog] = useState(false)
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "active":
|
||||
return <Badge className="bg-green-100 text-green-700">运行中</Badge>
|
||||
case "paused":
|
||||
return <Badge className="bg-yellow-100 text-yellow-700">已暂停</Badge>
|
||||
case "error":
|
||||
return <Badge className="bg-red-100 text-red-700">异常</Badge>
|
||||
default:
|
||||
return <Badge variant="secondary">未知</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">数据订阅</h1>
|
||||
<p className="text-muted-foreground">配置数据变更的实时推送和通知</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowCreateDialog(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
创建订阅
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">订阅总数</p>
|
||||
<p className="text-2xl font-bold">8</p>
|
||||
</div>
|
||||
<Webhook className="h-8 w-8 text-blue-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">今日推送</p>
|
||||
<p className="text-2xl font-bold">1,256</p>
|
||||
</div>
|
||||
<RefreshCw className="h-8 w-8 text-green-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">成功率</p>
|
||||
<p className="text-2xl font-bold">99.2%</p>
|
||||
</div>
|
||||
<CheckCircle2 className="h-8 w-8 text-purple-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">活跃订阅</p>
|
||||
<p className="text-2xl font-bold">6</p>
|
||||
</div>
|
||||
<Play className="h-8 w-8 text-cyan-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 订阅列表 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>订阅列表</CardTitle>
|
||||
<CardDescription>管理所有数据订阅配置</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>订阅名称</TableHead>
|
||||
<TableHead>类型</TableHead>
|
||||
<TableHead>目标地址</TableHead>
|
||||
<TableHead>触发事件</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead>成功率</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{subscriptions.map((sub) => (
|
||||
<TableRow key={sub.id}>
|
||||
<TableCell className="font-medium">{sub.name}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline">{sub.type === "webhook" ? "Webhook" : "邮件"}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<code className="text-xs bg-muted px-2 py-1 rounded truncate max-w-[200px] block">
|
||||
{sub.endpoint}
|
||||
</code>
|
||||
</TableCell>
|
||||
<TableCell>{sub.event}</TableCell>
|
||||
<TableCell>{getStatusBadge(sub.status)}</TableCell>
|
||||
<TableCell>{sub.successRate}%</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button variant="ghost" size="sm">
|
||||
{sub.status === "active" ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="text-red-600">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 创建订阅弹窗 */}
|
||||
<Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>创建数据订阅</DialogTitle>
|
||||
<DialogDescription>配置数据变更的实时推送</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>订阅名称</Label>
|
||||
<Input placeholder="输入订阅名称" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>推送类型</Label>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择推送类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="webhook">Webhook</SelectItem>
|
||||
<SelectItem value="email">邮件通知</SelectItem>
|
||||
<SelectItem value="sms">短信通知</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>目标地址</Label>
|
||||
<Input placeholder="输入Webhook URL或邮箱地址" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>触发事件</Label>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择触发事件" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="tag_changed">标签变更</SelectItem>
|
||||
<SelectItem value="portrait_updated">画像更新</SelectItem>
|
||||
<SelectItem value="high_value_alert">高价值用户预警</SelectItem>
|
||||
<SelectItem value="churn_alert">流失预警</SelectItem>
|
||||
<SelectItem value="sync_completed">数据同步完成</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-3 bg-muted rounded-lg">
|
||||
<div>
|
||||
<Label>启用订阅</Label>
|
||||
<p className="text-sm text-muted-foreground">创建后立即开始推送</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowCreateDialog(false)}>取消</Button>
|
||||
<Button>创建订阅</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
346
app/system/alerts/page.tsx
Normal file
346
app/system/alerts/page.tsx
Normal file
@@ -0,0 +1,346 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import {
|
||||
Bell, Plus, Settings, CheckCircle2, AlertTriangle,
|
||||
XCircle, Clock, Eye, Trash2, BellOff
|
||||
} from "lucide-react"
|
||||
|
||||
const alerts = [
|
||||
{
|
||||
id: "1",
|
||||
title: "磁盘使用率超过70%",
|
||||
description: "服务器磁盘使用率达到72%，建议清理或扩容",
|
||||
severity: "warning",
|
||||
source: "系统监控",
|
||||
time: "2024-01-15 14:30:00",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "AI推理服务延迟升高",
|
||||
description: "AI推理服务平均延迟达到230ms，超过预设阈值200ms",
|
||||
severity: "warning",
|
||||
source: "AI Agent",
|
||||
time: "2024-01-15 13:45:00",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "数据同步任务失败",
|
||||
description: "用户行为数据同步任务执行失败，已自动重试",
|
||||
severity: "error",
|
||||
source: "数据接入",
|
||||
time: "2024-01-15 10:20:00",
|
||||
status: "resolved",
|
||||
},
|
||||
]
|
||||
|
||||
const alertRules = [
|
||||
{ id: "1", name: "CPU使用率告警", condition: "CPU > 80%", severity: "critical", enabled: true },
|
||||
{ id: "2", name: "内存使用率告警", condition: "内存 > 85%", severity: "critical", enabled: true },
|
||||
{ id: "3", name: "磁盘使用率告警", condition: "磁盘 > 70%", severity: "warning", enabled: true },
|
||||
{ id: "4", name: "API延迟告警", condition: "延迟 > 500ms", severity: "warning", enabled: true },
|
||||
{ id: "5", name: "任务失败告警", condition: "失败次数 > 3", severity: "error", enabled: false },
|
||||
]
|
||||
|
||||
export default function AlertsPage() {
|
||||
const [activeTab, setActiveTab] = useState("active")
|
||||
const [showCreateDialog, setShowCreateDialog] = useState(false)
|
||||
|
||||
const getSeverityBadge = (severity: string) => {
|
||||
switch (severity) {
|
||||
case "critical":
|
||||
return <Badge className="bg-red-100 text-red-700">严重</Badge>
|
||||
case "error":
|
||||
return <Badge className="bg-red-100 text-red-700">错误</Badge>
|
||||
case "warning":
|
||||
return <Badge className="bg-yellow-100 text-yellow-700">警告</Badge>
|
||||
case "info":
|
||||
return <Badge className="bg-blue-100 text-blue-700">信息</Badge>
|
||||
default:
|
||||
return <Badge variant="secondary">未知</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
const getSeverityIcon = (severity: string) => {
|
||||
switch (severity) {
|
||||
case "critical":
|
||||
case "error":
|
||||
return <XCircle className="h-5 w-5 text-red-500" />
|
||||
case "warning":
|
||||
return <AlertTriangle className="h-5 w-5 text-yellow-500" />
|
||||
default:
|
||||
return <Bell className="h-5 w-5 text-blue-500" />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">告警中心</h1>
|
||||
<p className="text-muted-foreground">查看和管理系统告警</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowCreateDialog(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
新建告警规则
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">活跃告警</p>
|
||||
<p className="text-2xl font-bold text-yellow-600">2</p>
|
||||
</div>
|
||||
<AlertTriangle className="h-8 w-8 text-yellow-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">今日告警</p>
|
||||
<p className="text-2xl font-bold">5</p>
|
||||
</div>
|
||||
<Bell className="h-8 w-8 text-blue-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">已解决</p>
|
||||
<p className="text-2xl font-bold text-green-600">3</p>
|
||||
</div>
|
||||
<CheckCircle2 className="h-8 w-8 text-green-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">告警规则</p>
|
||||
<p className="text-2xl font-bold">5</p>
|
||||
</div>
|
||||
<Settings className="h-8 w-8 text-purple-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="active">
|
||||
活跃告警
|
||||
<Badge className="ml-2 bg-yellow-100 text-yellow-700">2</Badge>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="history">历史告警</TabsTrigger>
|
||||
<TabsTrigger value="rules">告警规则</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="active" className="space-y-4">
|
||||
{alerts.filter(a => a.status === "active").map((alert) => (
|
||||
<Card key={alert.id}>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
{getSeverityIcon(alert.severity)}
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-semibold">{alert.title}</h3>
|
||||
{getSeverityBadge(alert.severity)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-2">{alert.description}</p>
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span>来源: {alert.source}</span>
|
||||
<span>时间: {alert.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm">
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
详情
|
||||
</Button>
|
||||
<Button size="sm">
|
||||
<CheckCircle2 className="h-4 w-4 mr-1" />
|
||||
确认
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="history" className="space-y-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>告警标题</TableHead>
|
||||
<TableHead>严重程度</TableHead>
|
||||
<TableHead>来源</TableHead>
|
||||
<TableHead>时间</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{alerts.map((alert) => (
|
||||
<TableRow key={alert.id}>
|
||||
<TableCell className="font-medium">{alert.title}</TableCell>
|
||||
<TableCell>{getSeverityBadge(alert.severity)}</TableCell>
|
||||
<TableCell>{alert.source}</TableCell>
|
||||
<TableCell>{alert.time}</TableCell>
|
||||
<TableCell>
|
||||
{alert.status === "resolved" ? (
|
||||
<Badge className="bg-green-100 text-green-700">已解决</Badge>
|
||||
) : (
|
||||
<Badge className="bg-yellow-100 text-yellow-700">活跃</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="rules" className="space-y-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>规则名称</TableHead>
|
||||
<TableHead>触发条件</TableHead>
|
||||
<TableHead>严重程度</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{alertRules.map((rule) => (
|
||||
<TableRow key={rule.id}>
|
||||
<TableCell className="font-medium">{rule.name}</TableCell>
|
||||
<TableCell>
|
||||
<code className="text-sm bg-muted px-2 py-1 rounded">{rule.condition}</code>
|
||||
</TableCell>
|
||||
<TableCell>{getSeverityBadge(rule.severity)}</TableCell>
|
||||
<TableCell>
|
||||
<Switch checked={rule.enabled} />
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button variant="ghost" size="sm">
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="text-red-600">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* 创建告警规则弹窗 */}
|
||||
<Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>新建告警规则</DialogTitle>
|
||||
<DialogDescription>配置系统告警触发条件和通知方式</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>规则名称</Label>
|
||||
<Input placeholder="输入规则名称" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>监控指标</Label>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择指标" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="cpu">CPU使用率</SelectItem>
|
||||
<SelectItem value="memory">内存使用率</SelectItem>
|
||||
<SelectItem value="disk">磁盘使用率</SelectItem>
|
||||
<SelectItem value="latency">API延迟</SelectItem>
|
||||
<SelectItem value="error_rate">错误率</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>阈值</Label>
|
||||
<Input placeholder="输入阈值" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>严重程度</Label>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择严重程度" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="critical">严重</SelectItem>
|
||||
<SelectItem value="warning">警告</SelectItem>
|
||||
<SelectItem value="info">信息</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>通知方式</Label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<label className="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-muted">
|
||||
<input type="checkbox" defaultChecked />
|
||||
<span>站内通知</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-muted">
|
||||
<input type="checkbox" />
|
||||
<span>邮件</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-muted">
|
||||
<input type="checkbox" />
|
||||
<span>短信</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowCreateDialog(false)}>取消</Button>
|
||||
<Button>创建规则</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
229
app/system/health/page.tsx
Normal file
229
app/system/health/page.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import {
|
||||
Activity, Server, Database, Cpu, HardDrive,
|
||||
Wifi, CheckCircle2, AlertTriangle, XCircle, Clock
|
||||
} from "lucide-react"
|
||||
|
||||
const services = [
|
||||
{ name: "数据接入服务", status: "healthy", uptime: "99.99%", latency: "12ms" },
|
||||
{ name: "标签计算引擎", status: "healthy", uptime: "99.95%", latency: "45ms" },
|
||||
{ name: "AI推理服务", status: "warning", uptime: "98.50%", latency: "230ms" },
|
||||
{ name: "API网关", status: "healthy", uptime: "99.99%", latency: "8ms" },
|
||||
{ name: "数据存储服务", status: "healthy", uptime: "99.99%", latency: "25ms" },
|
||||
{ name: "消息队列", status: "healthy", uptime: "99.98%", latency: "5ms" },
|
||||
]
|
||||
|
||||
const metrics = [
|
||||
{ name: "CPU使用率", value: 45, max: 100, unit: "%", status: "normal" },
|
||||
{ name: "内存使用率", value: 68, max: 100, unit: "%", status: "normal" },
|
||||
{ name: "磁盘使用率", value: 72, max: 100, unit: "%", status: "warning" },
|
||||
{ name: "网络带宽", value: 35, max: 100, unit: "%", status: "normal" },
|
||||
]
|
||||
|
||||
export default function SystemHealthPage() {
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case "healthy":
|
||||
return <CheckCircle2 className="h-5 w-5 text-green-500" />
|
||||
case "warning":
|
||||
return <AlertTriangle className="h-5 w-5 text-yellow-500" />
|
||||
case "error":
|
||||
return <XCircle className="h-5 w-5 text-red-500" />
|
||||
default:
|
||||
return <Clock className="h-5 w-5 text-gray-500" />
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "healthy":
|
||||
return <Badge className="bg-green-100 text-green-700">健康</Badge>
|
||||
case "warning":
|
||||
return <Badge className="bg-yellow-100 text-yellow-700">警告</Badge>
|
||||
case "error":
|
||||
return <Badge className="bg-red-100 text-red-700">故障</Badge>
|
||||
default:
|
||||
return <Badge variant="secondary">未知</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
const getProgressColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "normal":
|
||||
return "bg-green-500"
|
||||
case "warning":
|
||||
return "bg-yellow-500"
|
||||
case "critical":
|
||||
return "bg-red-500"
|
||||
default:
|
||||
return "bg-gray-500"
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题 */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">系统健康</h1>
|
||||
<p className="text-muted-foreground">监控系统运行状态和资源使用情况</p>
|
||||
</div>
|
||||
|
||||
{/* 整体状态 */}
|
||||
<Card className="border-green-200 bg-green-50/50">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 rounded-full bg-green-100">
|
||||
<CheckCircle2 className="h-8 w-8 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-green-800">系统运行正常</h2>
|
||||
<p className="text-green-600">所有核心服务运行正常，1个服务有轻微警告</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 资源监控 */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
{metrics.map((metric) => (
|
||||
<Card key={metric.name}>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm text-muted-foreground">{metric.name}</span>
|
||||
<span className="text-lg font-bold">{metric.value}{metric.unit}</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={metric.value}
|
||||
className={`h-2 ${metric.status === "warning" ? "[&>div]:bg-yellow-500" : "[&>div]:bg-green-500"}`}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 服务状态 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>服务状态</CardTitle>
|
||||
<CardDescription>各微服务运行状态监控</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{services.map((service) => (
|
||||
<div
|
||||
key={service.name}
|
||||
className="flex items-center justify-between p-4 border rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{getStatusIcon(service.status)}
|
||||
<div>
|
||||
<p className="font-medium">{service.name}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
延迟: {service.latency}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
{getStatusBadge(service.status)}
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
可用率: {service.uptime}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 数据库连接 */}
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Database className="h-5 w-5" />
|
||||
数据库连接
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span>主数据库 (MySQL)</span>
|
||||
<Badge className="bg-green-100 text-green-700">已连接</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>缓存 (Redis)</span>
|
||||
<Badge className="bg-green-100 text-green-700">已连接</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>分析库 (ClickHouse)</span>
|
||||
<Badge className="bg-green-100 text-green-700">已连接</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4 pt-4 border-t">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">活跃连接</p>
|
||||
<p className="text-xl font-bold">128</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">查询/秒</p>
|
||||
<p className="text-xl font-bold">1,250</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">平均延迟</p>
|
||||
<p className="text-xl font-bold">8ms</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Server className="h-5 w-5" />
|
||||
服务器资源
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between text-sm mb-1">
|
||||
<span>CPU (8核)</span>
|
||||
<span>45%</span>
|
||||
</div>
|
||||
<Progress value={45} className="h-2" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between text-sm mb-1">
|
||||
<span>内存 (32GB)</span>
|
||||
<span>68%</span>
|
||||
</div>
|
||||
<Progress value={68} className="h-2" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between text-sm mb-1">
|
||||
<span>磁盘 (500GB)</span>
|
||||
<span>72%</span>
|
||||
</div>
|
||||
<Progress value={72} className="h-2 [&>div]:bg-yellow-500" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 pt-4 border-t">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">运行时间</p>
|
||||
<p className="text-xl font-bold">45天</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">最后重启</p>
|
||||
<p className="text-xl font-bold">12-01</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
238
app/system/logs/page.tsx
Normal file
238
app/system/logs/page.tsx
Normal file
@@ -0,0 +1,238 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import {
|
||||
ScrollText, Search, Download, Filter, User,
|
||||
Database, Settings, Tag, Package, Bot
|
||||
} from "lucide-react"
|
||||
|
||||
const logs = [
|
||||
{
|
||||
id: "1",
|
||||
time: "2024-01-15 14:35:22",
|
||||
user: "admin@example.com",
|
||||
action: "创建流量包",
|
||||
module: "数据输出",
|
||||
detail: "创建流量包「高价值用户包」，包含15,680个用户",
|
||||
ip: "192.168.1.100",
|
||||
status: "success",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
time: "2024-01-15 14:30:15",
|
||||
user: "analyst@example.com",
|
||||
action: "执行AI打标",
|
||||
module: "AI Agent",
|
||||
detail: "执行AI打标任务，处理8,500条用户数据",
|
||||
ip: "192.168.1.101",
|
||||
status: "success",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
time: "2024-01-15 14:25:08",
|
||||
user: "admin@example.com",
|
||||
action: "修改标签规则",
|
||||
module: "标签画像",
|
||||
detail: "修改标签「高价值用户」的计算规则",
|
||||
ip: "192.168.1.100",
|
||||
status: "success",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
time: "2024-01-15 14:20:00",
|
||||
user: "system",
|
||||
action: "数据同步",
|
||||
module: "数据接入",
|
||||
detail: "MySQL数据源同步完成，新增12,500条记录",
|
||||
ip: "-",
|
||||
status: "success",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
time: "2024-01-15 14:15:30",
|
||||
user: "analyst@example.com",
|
||||
action: "导出数据",
|
||||
module: "数据输出",
|
||||
detail: "导出用户画像数据，共5,000条记录",
|
||||
ip: "192.168.1.101",
|
||||
status: "success",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
time: "2024-01-15 14:10:00",
|
||||
user: "system",
|
||||
action: "任务执行失败",
|
||||
module: "数据接入",
|
||||
detail: "API数据源同步失败：连接超时",
|
||||
ip: "-",
|
||||
status: "failed",
|
||||
},
|
||||
]
|
||||
|
||||
const getModuleIcon = (module: string) => {
|
||||
switch (module) {
|
||||
case "数据接入":
|
||||
return <Database className="h-4 w-4" />
|
||||
case "标签画像":
|
||||
return <Tag className="h-4 w-4" />
|
||||
case "AI Agent":
|
||||
return <Bot className="h-4 w-4" />
|
||||
case "数据输出":
|
||||
return <Package className="h-4 w-4" />
|
||||
default:
|
||||
return <Settings className="h-4 w-4" />
|
||||
}
|
||||
}
|
||||
|
||||
export default function LogsPage() {
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [moduleFilter, setModuleFilter] = useState("all")
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">操作日志</h1>
|
||||
<p className="text-muted-foreground">查看系统操作记录和审计日志</p>
|
||||
</div>
|
||||
<Button variant="outline">
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
导出日志
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">今日操作</p>
|
||||
<p className="text-2xl font-bold">256</p>
|
||||
</div>
|
||||
<ScrollText className="h-8 w-8 text-blue-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">活跃用户</p>
|
||||
<p className="text-2xl font-bold">12</p>
|
||||
</div>
|
||||
<User className="h-8 w-8 text-green-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">成功率</p>
|
||||
<p className="text-2xl font-bold">98.5%</p>
|
||||
</div>
|
||||
<Badge className="bg-green-100 text-green-700 text-lg">正常</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">失败操作</p>
|
||||
<p className="text-2xl font-bold text-red-600">4</p>
|
||||
</div>
|
||||
<Badge className="bg-red-100 text-red-700 text-lg">异常</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 日志列表 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>操作记录</CardTitle>
|
||||
<CardDescription>系统所有操作的详细记录</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="搜索操作..."
|
||||
className="pl-9 w-64"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Select value={moduleFilter} onValueChange={setModuleFilter}>
|
||||
<SelectTrigger className="w-36">
|
||||
<SelectValue placeholder="所有模块" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有模块</SelectItem>
|
||||
<SelectItem value="data-ingestion">数据接入</SelectItem>
|
||||
<SelectItem value="tag-portrait">标签画像</SelectItem>
|
||||
<SelectItem value="ai-agent">AI Agent</SelectItem>
|
||||
<SelectItem value="data-output">数据输出</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>时间</TableHead>
|
||||
<TableHead>用户</TableHead>
|
||||
<TableHead>操作</TableHead>
|
||||
<TableHead>模块</TableHead>
|
||||
<TableHead>详情</TableHead>
|
||||
<TableHead>IP</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{logs.map((log) => (
|
||||
<TableRow key={log.id}>
|
||||
<TableCell className="text-muted-foreground whitespace-nowrap">
|
||||
{log.time}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{log.user}</TableCell>
|
||||
<TableCell>{log.action}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-1">
|
||||
{getModuleIcon(log.module)}
|
||||
<span>{log.module}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="max-w-[300px] truncate text-muted-foreground">
|
||||
{log.detail}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{log.ip}</TableCell>
|
||||
<TableCell>
|
||||
{log.status === "success" ? (
|
||||
<Badge className="bg-green-100 text-green-700">成功</Badge>
|
||||
) : (
|
||||
<Badge className="bg-red-100 text-red-700">失败</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
224
app/system/metrics/page.tsx
Normal file
224
app/system/metrics/page.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import {
|
||||
Users, Database, Tag, Bot, Package, TrendingUp,
|
||||
TrendingDown, Activity, BarChart3, PieChart
|
||||
} from "lucide-react"
|
||||
|
||||
const businessMetrics = [
|
||||
{
|
||||
title: "用户总量",
|
||||
value: "1,256,890",
|
||||
change: "+12.5%",
|
||||
trend: "up",
|
||||
description: "累计注册用户数",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
title: "日活用户",
|
||||
value: "125,680",
|
||||
change: "+8.2%",
|
||||
trend: "up",
|
||||
description: "今日活跃用户数",
|
||||
icon: Activity,
|
||||
},
|
||||
{
|
||||
title: "标签覆盖率",
|
||||
value: "92.5%",
|
||||
change: "+2.1%",
|
||||
trend: "up",
|
||||
description: "有标签的用户占比",
|
||||
icon: Tag,
|
||||
},
|
||||
{
|
||||
title: "AI处理量",
|
||||
value: "45,280",
|
||||
change: "+25.6%",
|
||||
trend: "up",
|
||||
description: "今日AI处理记录数",
|
||||
icon: Bot,
|
||||
},
|
||||
]
|
||||
|
||||
const dataMetrics = [
|
||||
{ name: "数据接入量", today: "1.2M", week: "8.5M", month: "32M" },
|
||||
{ name: "标签计算量", today: "850K", week: "5.2M", month: "21M" },
|
||||
{ name: "API调用量", today: "125K", week: "890K", month: "3.5M" },
|
||||
{ name: "流量包下载", today: "23", week: "156", month: "620" },
|
||||
]
|
||||
|
||||
export default function MetricsPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">业务指标</h1>
|
||||
<p className="text-muted-foreground">核心业务数据和运营指标</p>
|
||||
</div>
|
||||
<Select defaultValue="today">
|
||||
<SelectTrigger className="w-36">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="today">今日</SelectItem>
|
||||
<SelectItem value="week">本周</SelectItem>
|
||||
<SelectItem value="month">本月</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 核心指标 */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
{businessMetrics.map((metric) => (
|
||||
<Card key={metric.title}>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">{metric.title}</p>
|
||||
<p className="text-2xl font-bold mt-1">{metric.value}</p>
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
{metric.trend === "up" ? (
|
||||
<TrendingUp className="h-4 w-4 text-green-500" />
|
||||
) : (
|
||||
<TrendingDown className="h-4 w-4 text-red-500" />
|
||||
)}
|
||||
<span className={`text-sm ${metric.trend === "up" ? "text-green-600" : "text-red-600"}`}>
|
||||
{metric.change}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 rounded-lg bg-primary/10">
|
||||
<metric.icon className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">{metric.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 数据处理统计 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>数据处理统计</CardTitle>
|
||||
<CardDescription>各模块数据处理量统计</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
{dataMetrics.map((metric) => (
|
||||
<div key={metric.name} className="p-4 border rounded-lg">
|
||||
<p className="font-medium mb-3">{metric.name}</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">今日</span>
|
||||
<span className="font-bold">{metric.today}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">本周</span>
|
||||
<span className="font-medium">{metric.week}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">本月</span>
|
||||
<span className="font-medium">{metric.month}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 趋势图表 */}
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<BarChart3 className="h-5 w-5" />
|
||||
用户增长趋势
|
||||
</CardTitle>
|
||||
<CardDescription>最近30天新增用户数</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-64 flex items-end justify-between gap-1">
|
||||
{Array.from({ length: 30 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 bg-primary/20 hover:bg-primary/40 rounded-t transition-colors"
|
||||
style={{ height: `${30 + Math.random() * 70}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-muted-foreground mt-2">
|
||||
<span>30天前</span>
|
||||
<span>今天</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<PieChart className="h-5 w-5" />
|
||||
用户分布
|
||||
</CardTitle>
|
||||
<CardDescription>按价值等级分布</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="relative w-48 h-48">
|
||||
<svg viewBox="0 0 100 100" className="transform -rotate-90">
|
||||
<circle cx="50" cy="50" r="40" fill="none" stroke="#e5e7eb" strokeWidth="20" />
|
||||
<circle
|
||||
cx="50" cy="50" r="40" fill="none"
|
||||
stroke="#3b82f6" strokeWidth="20"
|
||||
strokeDasharray="75.4 251.2"
|
||||
/>
|
||||
<circle
|
||||
cx="50" cy="50" r="40" fill="none"
|
||||
stroke="#10b981" strokeWidth="20"
|
||||
strokeDasharray="50.3 251.2"
|
||||
strokeDashoffset="-75.4"
|
||||
/>
|
||||
<circle
|
||||
cx="50" cy="50" r="40" fill="none"
|
||||
stroke="#f59e0b" strokeWidth="20"
|
||||
strokeDasharray="62.8 251.2"
|
||||
strokeDashoffset="-125.7"
|
||||
/>
|
||||
<circle
|
||||
cx="50" cy="50" r="40" fill="none"
|
||||
stroke="#ef4444" strokeWidth="20"
|
||||
strokeDasharray="62.7 251.2"
|
||||
strokeDashoffset="-188.5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 mt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-blue-500" />
|
||||
<span className="text-sm">高价值 (30%)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-green-500" />
|
||||
<span className="text-sm">中价值 (20%)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500" />
|
||||
<span className="text-sm">潜力 (25%)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500" />
|
||||
<span className="text-sm">低价值 (25%)</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user