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