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