sansenhoshiandClaude Code
c53b210413
- Global connection badge in app header (persistent dashboard SSE via ConnectionProvider) - LogProvider keeps log data and SSE stream alive across page switches (no reload spinner) - Config drawer: password reveal toggle, array-type row editor for list fields - Plugin management: optimistic updates, race-free loading, reset all group overrides - Logs: load-earlier pagination; backend tail-read optimization (before/end offsets) - web_auth: Web password changes persist (sync_admin seeding only when .env has explicit key) - Dashboard: collect in thread pool + 1s result cache - ErrorBoundary + local Suspense: plugin chunk loading stays inside content area - UI polish: table row hover, mobile header/breadcrumb fixes, wider config drawer - config_standard: array type inference for list fields; array env skip - random_jm_code / steam_info: array schema migration; README web frontend note Co-Authored-By: Claude Code <noreply@anthropic.com>
342 lines
16 KiB
TypeScript
342 lines
16 KiB
TypeScript
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>
|
||
)
|
||
}
|