OpenFlare/frontend/app/(main)/admin/demo/tabs/dashboard-tab.tsx

// Copyright 2026 Arctel.net
// SPDX-License-Identifier: Apache-2.0

"use client"

import * as React from "react"
import {Code, Cpu, Database, HardDrive} from "lucide-react"
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card"
import {Progress} from "@/components/ui/progress"

export function DashboardTab() {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* CPU */}
        <Card className="border-dashed shadow-none">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <span className="text-xs font-medium text-muted-foreground">容器 CPU 使用率</span>
            <Cpu className="size-4 text-primary" />
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="text-2xl font-semibold tracking-tight">42.8 %</div>
            <Progress value={42.8} className="h-1.5" />
            <p className="text-[10px] text-muted-foreground flex items-center gap-1">
              <span className="size-1.5 rounded-full bg-emerald-500 inline-block animate-pulse" />
              容器运行正常，负载平稳
            </p>
          </CardContent>
        </Card>

        {/* Storage */}
        <Card className="border-dashed shadow-none">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <span className="text-xs font-medium text-muted-foreground">存储已用容量</span>
            <HardDrive className="size-4 text-primary" />
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="text-2xl font-semibold tracking-tight">72.4 GB <span className="text-xs text-muted-foreground">/ 100 GB</span></div>
            <Progress value={72.4} className="h-1.5" />
            <p className="text-[10px] text-muted-foreground">
              数据已同步远端 S3 存储桶，支持自动过期
            </p>
          </CardContent>
        </Card>

        {/* DB Overview */}
        <Card className="border-dashed shadow-none">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <span className="text-xs font-medium text-muted-foreground">物理数据库</span>
            <Database className="size-4 text-primary" />
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="text-2xl font-semibold tracking-tight">PostgreSQL <span className="text-xs font-normal text-muted-foreground">(v16.2)</span></div>
            <div className="flex items-center gap-3 text-xs text-muted-foreground">
              <div>活跃连接: <span className="font-semibold text-foreground">12</span></div>
              <div>总表数量: <span className="font-semibold text-foreground">34</span></div>
            </div>
            <p className="text-[10px] text-muted-foreground">
              链接池自动维护中，最大连接限制为 100
            </p>
          </CardContent>
        </Card>
      </div>

      {/* 指标卡片规范与代码 */}
      <Card className="border-dashed shadow-none bg-muted/20">
        <CardHeader className="pb-3">
          <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
            <Code className="size-4 text-primary" />
            指标卡片 & 仪表盘设计规范
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <ul className="list-disc pl-4 text-xs text-muted-foreground space-y-1.5">
            <li>指标卡片统一采用 <code className="bg-muted px-1 py-0.5 rounded font-mono">border-dashed shadow-none</code> 作为边框和投影。</li>
            <li>头部使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">flex flex-row items-center justify-between pb-2</code> 布局，左侧为标题小字，右侧为直接呈现的 Lucide 图标。</li>
            <li>数值强调使用且仅使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">text-2xl font-semibold tracking-tight</code> 展示。</li>
            <li>进度条使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">h-1.5</code> 细条高度，不喧宾夺主。</li>
            <li>底部的次要说明信息必须统一使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">text-[10px] text-muted-foreground</code> 等辅助类。</li>
          </ul>
          <pre className="text-[11px] font-mono text-muted-foreground overflow-x-auto p-3 bg-background rounded border border-border/40 leading-relaxed">
{`<Card className="border-dashed shadow-none">
  <CardHeader className="flex flex-row items-center justify-between pb-2">
    <span className="text-xs font-medium text-muted-foreground">指标标题</span>
    <Cpu className="size-4 text-primary" />
  </CardHeader>
  <CardContent className="space-y-2">
    <div className="text-2xl font-semibold tracking-tight">42.8 %</div>
    <Progress value={42.8} className="h-1.5" />
    <p className="text-[10px] text-muted-foreground">状态说明小字</p>
  </CardContent>
</Card>`}
          </pre>
        </CardContent>
      </Card>
    </div>
  )
}