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>

app/system/alerts/page.tsx

@@ -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>
+  )
+}

app/system/health/page.tsx

@@ -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>
+  )
+}

app/system/logs/page.tsx

@@ -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>
+  )
+}

app/system/metrics/page.tsx

@@ -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>
+  )
+}