HeXi/hexi/web/src/pages/home/index.tsx

import { Avatar, Card, Spinner } from '@heroui/react'
import { useConnection } from '../../connection'
import { fmtBytes, fmtRate, fmtUptime } from '../../lib/format'

interface BotInfo {
  self_id: string
  adapter: string
  nick: string
  avatar: string
  ws_connected: boolean
  online: boolean | null
  msg_recv: number | null
  msg_sent: number | null
}
interface SystemInfo {
  hostname: string
  os: string
  python: string
  nonebot: string
  boot_time: number
  system_uptime_seconds: number
  bot_uptime_seconds: number
}
interface CpuInfo {
  percent: number
  per_core: number[]
  logical: number | null
  physical: number | null
  brand: string
  load_avg: number[] | null
}
interface MemInfo {
  percent: number
  used: number
  total: number
  available: number
  process_rss: number
  process_percent: number
}
interface ProcessInfo {
  pid: number
  name: string
  rss: number
  cpu_percent: number
  memory_percent: number
  create_time: number
}
interface DiskInfo {
  mount: string
  device: string
  percent: number
  used: number
  total: number
}
interface NicInfo {
  name: string
  up: boolean
  sent: number
  recv: number
  ip: string
}
interface NetworkInfo {
  sent: number
  recv: number
  sent_rate: number
  recv_rate: number
  packets_sent: number
  packets_recv: number
  interfaces: NicInfo[]
}
interface BackendInfo {
  nonebot_version: string
  plugin_count: number
  python: string
  driver: string
  driver_type: string
}
interface DashboardData {
  ok: boolean
  bots: BotInfo[]
  system: SystemInfo
  cpu: CpuInfo
  memory: MemInfo
  process: ProcessInfo
  disk: DiskInfo[]
  network: NetworkInfo
  backend: BackendInfo
}

function Bar({ value, color }: { value: number; color?: string }) {
  const v = Math.max(0, Math.min(100, value))
  const c = color || (v >= 80 ? 'bg-rose-500' : v >= 60 ? 'bg-amber-500' : 'bg-indigo-500')
  return (
    <div className="h-2 rounded-full bg-slate-100 overflow-hidden">
      <div className={'h-full rounded-full transition-all ' + c} style={{ width: v + '%' }} />
    </div>
  )
}

function coreColor(v: number): string {
  if (v >= 80) return 'bg-rose-500'
  if (v >= 60) return 'bg-amber-500'
  if (v >= 30) return 'bg-indigo-500'
  return 'bg-emerald-500'
}

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between border-b border-slate-100 pb-1.5">
      <span className="text-xs text-slate-400">{label}</span>
      <span className="text-sm font-medium text-slate-700 text-right">{value || '—'}</span>
    </div>
  )
}

function SectionTitle({ title, desc }: { title: string; desc: string }) {
  return (
    <div className="mb-1">
      <h3 className="text-base font-semibold text-slate-800">{title}</h3>
      <p className="text-xs text-slate-400">{desc}</p>
    </div>
  )
}

export default function HomePage() {
  // 数据与连接状态来自全局 ConnectionProvider（顶栏已显示状态徽章）
  const { data: rawData, error } = useConnection()
  const data = rawData as DashboardData | null

  const cpu = data?.cpu
  const mem = data?.memory
  const proc = data?.process
  const sys = data?.system
  const net = data?.network
  const backend = data?.backend

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold text-slate-800">总览</h2>
        <p className="text-sm text-slate-400">主机与 BOT 综合状态（实时刷新）</p>
      </div>

      {error && !data && <Card className="border border-red-200 bg-red-50"><Card.Content><p className="text-sm text-red-600">{error}</p></Card.Content></Card>}

      {/* 顶部：BOT 协议端信息 + BOT 后端信息 一行两列 */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2 items-stretch">
        {/* BOT 协议端信息：登录账号昵称 / 账号 / 适配器类型 */}
        <Card className="border border-slate-200 bg-white h-full">
          <Card.Header>
            <SectionTitle title="BOT 协议端信息" desc="当前登录的账户昵称 / 账号 / 适配器类型" />
          </Card.Header>
          <Card.Content>
            {!data ? (
              <div className="flex justify-center py-8"><Spinner /></div>
            ) : !data.bots.length ? (
              <p className="text-sm text-slate-400">暂无在线 QQ 账号</p>
            ) : (
              <div className="space-y-2">
                {data.bots.map(bot => (
                  <div key={bot.self_id} className="flex items-center gap-3 rounded-xl border border-slate-100 px-4 py-3">
                    <Avatar size="sm">
                      <Avatar.Image src={bot.avatar} alt={bot.nick} />
                      <Avatar.Fallback>{(bot.nick || bot.self_id).charAt(0).toUpperCase()}</Avatar.Fallback>
                    </Avatar>
                    <div className="min-w-0 flex-1">
                      <div className="truncate text-sm font-medium text-slate-800">{bot.nick}</div>
                      <div className="truncate text-xs text-slate-400">{bot.self_id} · {bot.adapter}</div>
                    </div>
                    <div className="flex items-center gap-3">
                      {bot.msg_recv != null && <span className="text-xs text-slate-400">收 {bot.msg_recv}</span>}
                      {bot.msg_sent != null && <span className="text-xs text-slate-400">发 {bot.msg_sent}</span>}
                      {bot.online != null && <span className="text-xs text-slate-400">{bot.online ? '在线' : '离线'}</span>}
                      <span className="inline-flex items-center gap-1.5 text-xs">
                        <span className={'size-2 rounded-full ' + (bot.ws_connected ? 'bg-emerald-500' : 'bg-slate-300')} />
                        <span className={bot.ws_connected ? 'text-emerald-600' : 'text-slate-400'}>{bot.ws_connected ? '已连接' : '未连接'}</span>
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </Card.Content>
        </Card>
        {/* BOT 后端信息：NoneBot 版本 / 驱动方式 / 装载插件数 */}
        <Card className="border border-slate-200 bg-white h-full">
          <Card.Header>
            <SectionTitle title="BOT 后端信息" desc="NoneBot 版本 / 驱动方式 / 装载插件数" />
          </Card.Header>
          <Card.Content>
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="rounded-xl border border-slate-200 p-4">
                <div className="text-xs text-slate-400">NoneBot 版本</div>
                <div className="mt-1 text-lg font-semibold text-slate-800">{backend?.nonebot_version || '—'}</div>
              </div>
              <div className="rounded-xl border border-slate-200 p-4">
                <div className="text-xs text-slate-400">驱动方式</div>
                <div className="mt-1 truncate text-sm font-medium text-slate-700" title={backend?.driver}>{backend?.driver || '—'}</div>
                <div className="text-xs text-slate-400">{backend?.driver_type || ''}</div>
              </div>
              <div className="rounded-xl border border-slate-200 p-4">
                <div className="text-xs text-slate-400">装载插件数</div>
                <div className="mt-1 text-lg font-semibold text-slate-800">{backend?.plugin_count ?? '—'} 个</div>
              </div>
              <div className="rounded-xl border border-slate-200 p-4">
                <div className="text-xs text-slate-400">Python</div>
                <div className="mt-1 truncate text-sm font-medium text-slate-700" title={backend?.python}>{backend?.python || '—'}</div>
                <div className="text-xs text-slate-400">bot 运行 {sys ? fmtUptime(sys.bot_uptime_seconds) : '—'}</div>
              </div>
            </div>
          </Card.Content>
        </Card>

      </div>
      {/* 1. 主机规格信息：系统 / 处理器 / 内存 / 硬盘 */}
      <Card className="border border-slate-200 bg-white">
        <Card.Header>
          <SectionTitle title="主机规格信息" desc="系统 / 处理器 / 内存 / 硬盘" />
        </Card.Header>
        <Card.Content>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            <div className="rounded-xl border border-slate-200 p-4">
              <div className="mb-2 text-sm font-medium text-slate-700">系统</div>
              <div className="space-y-1.5">
                <InfoRow label="主机名" value={sys?.hostname || ''} />
                <InfoRow label="操作系统" value={sys?.os || ''} />
                <InfoRow label="运行时长" value={sys ? fmtUptime(sys.system_uptime_seconds) : '—'} />
              </div>
            </div>
            <div className="rounded-xl border border-slate-200 p-4">
              <div className="mb-2 text-sm font-medium text-slate-700">处理器</div>
              <div className="space-y-1.5">
                <InfoRow label="型号" value={cpu?.brand || ''} />
                <InfoRow label="逻辑核心" value={cpu?.logical != null ? cpu.logical + ' 核' : '—'} />
                <InfoRow label="物理核心" value={cpu?.physical != null ? cpu.physical + ' 核' : '—'} />
              </div>
            </div>
            <div className="rounded-xl border border-slate-200 p-4">
              <div className="mb-2 text-sm font-medium text-slate-700">内存</div>
              <div className="space-y-1.5">
                <InfoRow label="总量" value={mem ? fmtBytes(mem.total) : '—'} />
                <InfoRow label="可用" value={mem ? fmtBytes(mem.available) : '—'} />
                <InfoRow label="本进程占用" value={mem ? fmtBytes(mem.process_rss) : '—'} />
              </div>
            </div>
          </div>
          <div className="mt-4">
            <div className="mb-2 text-sm font-medium text-slate-700">硬盘</div>
            {!data ? (
              <div className="flex justify-center py-8"><Spinner /></div>
            ) : !data.disk.length ? (
              <p className="text-sm text-slate-400">未获取到磁盘信息</p>
            ) : (
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {data.disk.map((d) => (
                  <div key={d.mount} className="rounded-xl border border-slate-200 p-4">
                    <div className="flex items-center justify-between">
                      <span className="truncate text-xs font-medium text-slate-600" title={d.mount}>{d.mount}</span>
                      <span className="text-xs text-slate-500">{d.percent}%</span>
                    </div>
                    <div className="mt-2"><Bar value={d.percent} /></div>
                    <p className="mt-2 text-xs text-slate-400">{fmtBytes(d.used)} / {fmtBytes(d.total)}</p>
                  </div>
                ))}
              </div>
            )}
          </div>
        </Card.Content>
      </Card>

      {/* 2. 资源占用信息：CPU / 内存 / 网络 */}
      <Card className="border border-slate-200 bg-white">
        <Card.Header>
          <SectionTitle title="资源占用信息" desc="CPU / 内存 / 网络实时占用" />
        </Card.Header>
        <Card.Content>
          <div className="grid gap-4 md:grid-cols-3">
            {/* CPU */}
            <div className="rounded-xl border border-slate-200 p-4">
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium text-slate-700">CPU 使用率{cpu?.logical ? ' ' + cpu.logical + ' 核' : ''}</span>
                <span className="text-sm font-semibold text-slate-800">{cpu ? cpu.percent + '%' : '—'}</span>
              </div>
              <div className="mt-3"><Bar value={cpu?.percent || 0} /></div>
              <p className="mt-2 text-xs text-slate-400">负载: {cpu?.load_avg ? cpu.load_avg.join(' / ') : '—'}</p>
              {cpu?.per_core?.length ? (
                <div className="mt-3 grid grid-cols-4 gap-2">
                  {cpu.per_core.map((v, i) => (
                    <div key={i} className="flex flex-col items-center rounded-lg border border-slate-100 bg-slate-50 px-2 py-1.5">
                      <span className="text-xs text-slate-400">{i}</span>
                      <div className={'mt-1 h-1.5 w-full rounded-full ' + coreColor(v)} />
                      <span className="mt-1 text-[10px] text-slate-500">{v.toFixed(0)}%</span>
                    </div>
                  ))}
                </div>
              ) : null}
            </div>

            {/* 内存 */}
            <div className="rounded-xl border border-slate-200 p-4">
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium text-slate-700">内存使用</span>
                <span className="text-sm font-semibold text-slate-800">{mem ? mem.percent + '%' : '—'}</span>
              </div>
              <div className="mt-3"><Bar value={mem?.percent || 0} /></div>
              <p className="mt-2 text-xs text-slate-400">已用 {mem ? fmtBytes(mem.used) : '—'} · 可用 {mem ? fmtBytes(mem.available) : '—'}</p>
              <p className="mt-1 text-xs text-slate-400">共 {mem ? fmtBytes(mem.total) : '—'}</p>
            </div>

            {/* 网络 */}
            <div className="rounded-xl border border-slate-200 p-4">
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium text-slate-700">网络流量</span>
                {net?.interfaces?.length ? <span className="text-xs text-slate-400">{net.interfaces.length} 网卡</span> : null}
              </div>
              <div className="mt-3 space-y-2 text-xs">
                <div className="flex justify-between"><dt className="text-slate-400">↓ 下行速率</dt><dd className="text-slate-700">{net ? fmtRate(net.recv_rate) : '—'}</dd></div>
                <div className="flex justify-between"><dt className="text-slate-400">↑ 上行速率</dt><dd className="text-slate-700">{net ? fmtRate(net.sent_rate) : '—'}</dd></div>
                <div className="flex justify-between"><dt className="text-slate-400">累计下行</dt><dd className="text-slate-700">{net ? fmtBytes(net.recv) : '—'}</dd></div>
                <div className="flex justify-between"><dt className="text-slate-400">累计上行</dt><dd className="text-slate-700">{net ? fmtBytes(net.sent) : '—'}</dd></div>
              </div>
            </div>
          </div>

          {/* 本进程 */}
          <div className="mt-4 rounded-xl border border-slate-200 p-4">
            <div className="mb-2 text-sm font-medium text-slate-700">运行进程（bot）</div>
            <dl className="grid grid-cols-2 gap-2 text-xs sm:grid-cols-3 lg:grid-cols-5">
              <div className="flex flex-col"><dt className="text-slate-400">PID</dt><dd className="text-slate-700">{proc?.pid ?? '—'}</dd></div>
              <div className="flex flex-col"><dt className="text-slate-400">进程名</dt><dd className="text-slate-700">{proc?.name || '—'}</dd></div>
              <div className="flex flex-col"><dt className="text-slate-400">CPU</dt><dd className="text-slate-700">{proc?.cpu_percent != null ? proc.cpu_percent + '%' : '—'}</dd></div>
              <div className="flex flex-col"><dt className="text-slate-400">内存占用</dt><dd className="text-slate-700">{proc?.memory_percent != null ? proc.memory_percent + '%' : '—'}</dd></div>
              <div className="flex flex-col"><dt className="text-slate-400">RSS</dt><dd className="text-slate-700">{proc ? fmtBytes(proc.rss) : '—'}</dd></div>
            </dl>
          </div>
        </Card.Content>
      </Card>

    </div>
  )
}