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
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user