Logan
e363ded445
- 新增 PageShell/PageTabs/ContentPanel/PageLoading/PageEmpty 页面骨架 - index.css 设计令牌文档化，布局令牌与纯色主按钮（去除渐变粉彩） - 全站路由页接入 PageShell，云账单三 Tab 为标杆 - 主题体系：跟随系统 + 主流/开发者分组，新增 Dracula/Tokyo Night，One Dark 暖灰差异化 - 登录页/侧栏/顶栏去渐变光球，企业克制风 - 修复 AIAlertAnalyzer JSX 与构建依赖导入问题
40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
// 监控中心 — 4个监控标签页的容器 // Logan.Li
|
|
import { useState } from 'react';
|
|
import { Cpu } from 'lucide-react';
|
|
import { PageShell } from '@/components/layout/PageShell';
|
|
import { HostMonitor } from './HostMonitor';
|
|
import { MiddlewareMonitor } from './MiddlewareMonitor';
|
|
import { SNMPMonitor } from './SNMPMonitor';
|
|
import { SiteMonitor } from './SiteMonitor';
|
|
|
|
type TabId = 'host' | 'middleware' | 'snmp' | 'site';
|
|
|
|
const tabs: { id: TabId; name: string; description: string }[] = [
|
|
{ id: 'host', name: '主机监控', description: 'CPU / 内存 / 磁盘 / 网络 / 磁盘IO' },
|
|
{ id: 'middleware', name: '中间件监控', description: 'Redis / MySQL 指标采集' },
|
|
{ id: 'snmp', name: 'SNMP 监控', description: '网络设备 / 服务器硬件 (OID 模板)' },
|
|
{ id: 'site', name: '站点拨测', description: 'HTTP / PING / DNS / TCP / WS 拨测' },
|
|
];
|
|
|
|
export function MonitorCenter() {
|
|
const [activeTab, setActiveTab] = useState<TabId>('host');
|
|
const current = tabs.find((t) => t.id === activeTab);
|
|
|
|
return (
|
|
<PageShell
|
|
variant="list"
|
|
title="监控中心"
|
|
subtitle={current?.description ?? '全面的基础设施与应用监控'}
|
|
icon={<Cpu className="h-5 w-5" />}
|
|
tabs={tabs.map((t) => ({ id: t.id, label: t.name }))}
|
|
activeTab={activeTab}
|
|
onTabChange={(id) => setActiveTab(id as TabId)}
|
|
contentClassName="min-h-[400px]"
|
|
>
|
|
{activeTab === 'host' && <HostMonitor embedded />}
|
|
{activeTab === 'middleware' && <MiddlewareMonitor />}
|
|
{activeTab === 'snmp' && <SNMPMonitor />}
|
|
{activeTab === 'site' && <SiteMonitor />}
|
|
</PageShell>
|
|
);
|
|
} |