+
@@ -153,7 +174,15 @@ export const ServerCard = ({
)}
-
diff --git a/mengyamonitor-frontend/src/components/ServerDetail/ServerDetail.tsx b/mengyamonitor-frontend/src/components/ServerDetail/ServerDetail.tsx
index c9f43c7..e64b971 100644
--- a/mengyamonitor-frontend/src/components/ServerDetail/ServerDetail.tsx
+++ b/mengyamonitor-frontend/src/components/ServerDetail/ServerDetail.tsx
@@ -1,521 +1,521 @@
-import type { ServerMetrics } from '../../types';
-import { formatBytes, formatUptime, formatPercent } from '../../utils/format';
-import { CircularProgress } from '../Common/CircularProgress';
-import './ServerDetail.css';
-
-interface ServerDetailProps {
- metrics: ServerMetrics;
- serverName: string;
- onClose: () => void;
-}
-
-export const ServerDetail = ({ metrics, serverName, onClose }: ServerDetailProps) => {
- return (
-
-
e.stopPropagation()}>
-
-
{serverName} - 详细信息
-
-
-
-
-
- 系统信息
-
- {/* 系统基本信息 */}
-
-
基本信息
-
-
-
- 主机名
- {metrics.hostname}
-
-
-
-
- 操作系统
- {metrics.os.distro}
-
-
-
-
-
- 架构
- {metrics.os.architecture}
-
-
-
-
-
- 内核版本
- {metrics.os.kernel}
-
-
-
-
-
-
- {/* 运行时信息 */}
-
-
运行时信息
-
-
-
- 运行时间
- {formatUptime(metrics.uptimeSeconds)}
-
-
-
-
- 进程数量
- {metrics.system.processCount}
-
-
- {metrics.system.packageCount > 0 && (
-
-
- 已安装软件包
- {metrics.system.packageCount} ({metrics.system.packageManager})
-
-
- )}
-
-
-
- {/* 性能指标 */}
-
-
性能指标
-
-
-
- 磁盘读取
- {metrics.system.diskReadSpeed.toFixed(2)} MB/s
-
-
-
-
- 磁盘写入
- {metrics.system.diskWriteSpeed.toFixed(2)} MB/s
-
-
- {metrics.system.temperature && metrics.system.temperature > 0 && (
-
-
- 系统温度
- {metrics.system.temperature.toFixed(1)}°C
-
-
- )}
- {(metrics.system.networkRxSpeed !== undefined || metrics.system.networkTxSpeed !== undefined) && (
- <>
-
-
- 网络下载
- {(metrics.system.networkRxSpeed || 0).toFixed(2)} MB/s
-
-
-
-
- 网络上传
- {(metrics.system.networkTxSpeed || 0).toFixed(2)} MB/s
-
-
-
- )}
-
-
-
- {/* 延迟信息 */}
- {metrics.latency && (
-
-
延迟检测
-
-
-
- 客户端到服务器
-
- {metrics.latency.clientToServer >= 0 ? `${metrics.latency.clientToServer} ms` : '超时'}
-
-
-
- {metrics.latency.external && (
- <>
-
-
- 百度 (baidu.com)
- {metrics.latency.external['baidu.com'] || '超时'}
-
-
-
-
- 谷歌 (google.com)
- {metrics.latency.external['google.com'] || '超时'}
-
-
-
-
- GitHub (github.com)
- {metrics.latency.external['github.com'] || '超时'}
-
-
-
- )}
-
-
- )}
-
-
-
- CPU
-
-
-
- 80 ? '#f87171' : '#86efac'}
- subLabel={formatPercent(metrics.cpu.usagePercent)}
- />
-
- {metrics.cpu.loadAverages && metrics.cpu.loadAverages.length > 0 && metrics.cpu.cores > 0 && (
-
- 0.8 ? '#fde047' : '#a7f3d0'}
- subLabel={metrics.cpu.loadAverages[0].toFixed(2)}
- />
-
- )}
-
-
-
- 型号
- {metrics.cpu.model}
-
-
- 核心数
- {metrics.cpu.cores}
-
-
- 使用率
- {formatPercent(metrics.cpu.usagePercent)}
-
- {metrics.cpu.temperature && metrics.cpu.temperature > 0 && (
-
- 温度
- {metrics.cpu.temperature.toFixed(1)}°C
-
- )}
- {metrics.cpu.loadAverages && metrics.cpu.loadAverages.length > 0 && (
-
- 负载平均值
- {metrics.cpu.loadAverages.join(' / ')}
-
- )}
-
-
-
各核心使用率
-
- {metrics.cpu.perCoreUsage.map((core) => (
-
- 80 ? '#f87171' : '#86efac'}
- subLabel={formatPercent(core.percent)}
- />
-
- ))}
-
-
-
-
- 内存
-
-
- 80 ? '#fde047' : '#6ee7b7'}
- subLabel={formatPercent(metrics.memory.usedPercent)}
- />
-
-
-
- 总容量
- {formatBytes(metrics.memory.totalBytes)}
-
-
- 已使用
- {formatBytes(metrics.memory.usedBytes)}
-
-
- 可用
- {formatBytes(metrics.memory.freeBytes)}
-
-
- 使用率
- {formatPercent(metrics.memory.usedPercent)}
-
-
-
-
-
- 存储
-
- {metrics.storage.map((disk, index) => (
-
-
90 ? '#f87171' : '#a7f3d0'}
- subLabel={formatPercent(disk.usedPercent)}
- />
-
-
总: {formatBytes(disk.totalBytes)}
-
用: {formatBytes(disk.usedBytes)}
-
- ))}
-
-
- {metrics.gpu && metrics.gpu.length > 0 && metrics.gpu[0].status !== 'not_available' && (
-
- GPU
- {metrics.gpu.map((gpu, index) => (
-
-
- {gpu.name}
- {gpu.status}
-
-
-
利用率
-
-
{formatPercent(gpu.utilizationPercent)}
-
-
-
- 显存总量
- {gpu.memoryTotalMB} MB
-
-
- 显存使用
- {gpu.memoryUsedMB} MB
-
- {gpu.temperature && gpu.temperature > 0 && (
-
- 温度
- {gpu.temperature.toFixed(1)}°C
-
- )}
-
-
- )}
-
- {metrics.network && metrics.network.length > 0 && (
-
- 网络接口
-
- {metrics.network.map((iface, index) => (
-
-
-
-
- {iface.name}
- {iface.ipAddress && (
-
- {iface.ipAddress}
-
- )}
-
-
-
-
- {(iface.macAddress || iface.ipAddress) && (
-
- {iface.macAddress && (
-
- MAC 地址
- {iface.macAddress}
-
- )}
- {iface.ipAddress && (
-
- IP 地址
- {iface.ipAddress}
-
- )}
-
- )}
-
-
-
- 接收流量
- {formatBytes(iface.rxBytes)}
-
-
-
-
- 发送流量
- {formatBytes(iface.txBytes)}
-
-
-
-
-
- ))}
-
- )}
-
- {metrics.system.topProcesses && metrics.system.topProcesses.length > 0 && (
-
- Top 5 进程
-
- {metrics.system.topProcesses.map((proc, index) => (
-
-
{index + 1}
-
-
-
- {proc.name}
- PID: {proc.pid}
-
-
-
-
-
- CPU
- {proc.cpu}%
-
-
-
-
-
- 内存
- {proc.memory}% ({proc.memoryMB.toFixed(1)} MB)
-
-
-
-
-
-
- ))}
-
- )}
-
- {metrics.system.dockerStats && metrics.system.dockerStats.available && (
-
- Docker 信息
- {metrics.system.dockerStats.version && (
-
-
- Docker 版本
- {metrics.system.dockerStats.version}
-
-
- 运行中的容器
- {metrics.system.dockerStats.running}
-
-
- 停止的容器
- {metrics.system.dockerStats.stopped}
-
-
- 镜像数量
- {metrics.system.dockerStats.imageCount}
-
-
-
运行中的容器
-
- {metrics.system.dockerStats.runningNames.map((name, index) => (
-
- {name}
-
- ))}
-
-
-
停止的容器
-
- {metrics.system.dockerStats.stoppedNames.map((name, index) => (
-
- {name}
-
- ))}
-
-
-
镜像列表
-
- {metrics.system.dockerStats.imageNames.map((name, index) => (
-
- {name}
-
- ))}
-
-
- )}
-
- {metrics.system.systemLogs && metrics.system.systemLogs.length > 0 && (
-
- 系统日志
-
- {metrics.system.systemLogs.map((log, index) => (
-
- {log}
-
- ))}
-
- )}
-
-
-
- );
-};
+import type { ServerMetrics } from '../../types';
+import { formatBytes, formatUptime, formatPercent } from '../../utils/format';
+import { CircularProgress } from '../Common/CircularProgress';
+import './ServerDetail.css';
+
+interface ServerDetailProps {
+ metrics: ServerMetrics;
+ serverName: string;
+ onClose: () => void;
+}
+
+export const ServerDetail = ({ metrics, serverName, onClose }: ServerDetailProps) => {
+ return (
+
+
e.stopPropagation()}>
+
+
{serverName} - 详细信息
+
+
+
+
+
+ 系统信息
+
+ {/* 系统基本信息 */}
+
+
基本信息
+
+
+
+ 主机名
+ {metrics.hostname}
+
+
+
+
+ 操作系统
+ {metrics.os.distro}
+
+
+
+
+
+ 架构
+ {metrics.os.architecture}
+
+
+
+
+
+ 内核版本
+ {metrics.os.kernel}
+
+
+
+
+
+
+ {/* 运行时信息 */}
+
+
运行时信息
+
+
+
+ 运行时间
+ {formatUptime(metrics.uptimeSeconds)}
+
+
+
+
+ 进程数量
+ {metrics.system.processCount}
+
+
+ {metrics.system.packageCount > 0 && (
+
+
+ 已安装软件包
+ {metrics.system.packageCount} ({metrics.system.packageManager})
+
+
+ )}
+
+
+
+ {/* 性能指标 */}
+
+
性能指标
+
+
+
+ 磁盘读取
+ {metrics.system.diskReadSpeed.toFixed(2)} MB/s
+
+
+
+
+ 磁盘写入
+ {metrics.system.diskWriteSpeed.toFixed(2)} MB/s
+
+
+ {metrics.system.temperature && metrics.system.temperature > 0 && (
+
+
+ 系统温度
+ {metrics.system.temperature.toFixed(1)}°C
+
+
+ )}
+ {(metrics.system.networkRxSpeed !== undefined || metrics.system.networkTxSpeed !== undefined) && (
+ <>
+
+
+ 网络下载
+ {(metrics.system.networkRxSpeed || 0).toFixed(2)} MB/s
+
+
+
+
+ 网络上传
+ {(metrics.system.networkTxSpeed || 0).toFixed(2)} MB/s
+
+
+
+ )}
+
+
+
+ {/* 延迟信息 */}
+ {metrics.latency && (
+
+
延迟检测
+
+
+
+ 客户端到服务器
+
+ {metrics.latency.clientToServer >= 0 ? `${metrics.latency.clientToServer} ms` : '超时'}
+
+
+
+ {metrics.latency.external && (
+ <>
+
+
+ 百度 (baidu.com)
+ {metrics.latency.external['baidu.com'] || '超时'}
+
+
+
+
+ 谷歌 (google.com)
+ {metrics.latency.external['google.com'] || '超时'}
+
+
+
+
+ GitHub (github.com)
+ {metrics.latency.external['github.com'] || '超时'}
+
+
+
+ )}
+
+
+ )}
+
+
+
+ CPU
+
+
+
+ 80 ? '#f87171' : '#86efac'}
+ subLabel={formatPercent(metrics.cpu.usagePercent)}
+ />
+
+ {metrics.cpu.loadAverages && metrics.cpu.loadAverages.length > 0 && metrics.cpu.cores > 0 && (
+
+ 0.8 ? '#fde047' : '#a7f3d0'}
+ subLabel={metrics.cpu.loadAverages[0].toFixed(2)}
+ />
+
+ )}
+
+
+
+ 型号
+ {metrics.cpu.model}
+
+
+ 核心数
+ {metrics.cpu.cores}
+
+
+ 使用率
+ {formatPercent(metrics.cpu.usagePercent)}
+
+ {metrics.cpu.temperature && metrics.cpu.temperature > 0 && (
+
+ 温度
+ {metrics.cpu.temperature.toFixed(1)}°C
+
+ )}
+ {metrics.cpu.loadAverages && metrics.cpu.loadAverages.length > 0 && (
+
+ 负载平均值
+ {metrics.cpu.loadAverages.join(' / ')}
+
+ )}
+
+
+
各核心使用率
+
+ {metrics.cpu.perCoreUsage.map((core) => (
+
+ 80 ? '#f87171' : '#86efac'}
+ subLabel={formatPercent(core.percent)}
+ />
+
+ ))}
+
+
+
+
+ 内存
+
+
+ 80 ? '#fde047' : '#6ee7b7'}
+ subLabel={formatPercent(metrics.memory.usedPercent)}
+ />
+
+
+
+ 总容量
+ {formatBytes(metrics.memory.totalBytes)}
+
+
+ 已使用
+ {formatBytes(metrics.memory.usedBytes)}
+
+
+ 可用
+ {formatBytes(metrics.memory.freeBytes)}
+
+
+ 使用率
+ {formatPercent(metrics.memory.usedPercent)}
+
+
+
+
+
+ 存储
+
+ {metrics.storage.map((disk, index) => (
+
+
90 ? '#f87171' : '#a7f3d0'}
+ subLabel={formatPercent(disk.usedPercent)}
+ />
+
+
总: {formatBytes(disk.totalBytes)}
+
用: {formatBytes(disk.usedBytes)}
+
+ ))}
+
+
+ {metrics.gpu && metrics.gpu.length > 0 && metrics.gpu[0].status !== 'not_available' && (
+
+ GPU
+ {metrics.gpu.map((gpu, index) => (
+
+
+ {gpu.name}
+ {gpu.status}
+
+
+
利用率
+
+
{formatPercent(gpu.utilizationPercent)}
+
+
+
+ 显存总量
+ {gpu.memoryTotalMB} MB
+
+
+ 显存使用
+ {gpu.memoryUsedMB} MB
+
+ {gpu.temperature && gpu.temperature > 0 && (
+
+ 温度
+ {gpu.temperature.toFixed(1)}°C
+
+ )}
+
+
+ )}
+
+ {metrics.network && metrics.network.length > 0 && (
+
+ 网络接口
+
+ {metrics.network.map((iface, index) => (
+
+
+
+
+ {iface.name}
+ {iface.ipAddress && (
+
+ {iface.ipAddress}
+
+ )}
+
+
+
+
+ {(iface.macAddress || iface.ipAddress) && (
+
+ {iface.macAddress && (
+
+ MAC 地址
+ {iface.macAddress}
+
+ )}
+ {iface.ipAddress && (
+
+ IP 地址
+ {iface.ipAddress}
+
+ )}
+
+ )}
+
+
+
+ 接收流量
+ {formatBytes(iface.rxBytes)}
+
+
+
+
+ 发送流量
+ {formatBytes(iface.txBytes)}
+
+
+
+
+
+ ))}
+
+ )}
+
+ {metrics.system.topProcesses && metrics.system.topProcesses.length > 0 && (
+
+ Top 5 进程
+
+ {metrics.system.topProcesses.map((proc, index) => (
+
+
{index + 1}
+
+
+
+ {proc.name}
+ PID: {proc.pid}
+
+
+
+
+
+ CPU
+ {proc.cpu}%
+
+
+
+
+
+ 内存
+ {proc.memory}% ({proc.memoryMB.toFixed(1)} MB)
+
+
+
+
+
+
+ ))}
+
+ )}
+
+ {metrics.system.dockerStats && metrics.system.dockerStats.available && (
+
+ Docker 信息
+ {metrics.system.dockerStats.version && (
+
+
+ Docker 版本
+ {metrics.system.dockerStats.version}
+
+
+ 运行中的容器
+ {metrics.system.dockerStats.running}
+
+
+ 停止的容器
+ {metrics.system.dockerStats.stopped}
+
+
+ 镜像数量
+ {metrics.system.dockerStats.imageCount}
+
+
+
运行中的容器
+
+ {metrics.system.dockerStats.runningNames.map((name, index) => (
+
+ {name}
+
+ ))}
+
+
+
停止的容器
+
+ {metrics.system.dockerStats.stoppedNames.map((name, index) => (
+
+ {name}
+
+ ))}
+
+
+
镜像列表
+
+ {metrics.system.dockerStats.imageNames.map((name, index) => (
+
+ {name}
+
+ ))}
+
+
+ )}
+
+ {metrics.system.systemLogs && metrics.system.systemLogs.length > 0 && (
+
+ 系统日志
+
+ {metrics.system.systemLogs.map((log, index) => (
+
+ {log}
+
+ ))}
+
+ )}
+
+
+
+ );
+};
diff --git a/mengyamonitor-frontend/src/hooks/useServerMonitor.ts b/mengyamonitor-frontend/src/hooks/useServerMonitor.ts
index 36dad51..1105267 100644
--- a/mengyamonitor-frontend/src/hooks/useServerMonitor.ts
+++ b/mengyamonitor-frontend/src/hooks/useServerMonitor.ts
@@ -1,58 +1,58 @@
-import { useState, useEffect, useCallback } from 'react';
-import type { ServerConfig, ServerStatus } from '../types';
-import { fetchServerMetrics } from '../api/monitor';
-
-export const useServerMonitor = (servers: ServerConfig[], interval: number = 2000) => {
- const [statuses, setStatuses] = useState
>({});
-
- const fetchMetrics = useCallback(async (server: ServerConfig) => {
- if (!server.enabled) {
- return;
- }
-
- try {
- const metrics = await fetchServerMetrics(server.url);
- setStatuses(prev => ({
- ...prev,
- [server.id]: {
- serverId: server.id,
- online: true,
- metrics,
- lastUpdate: Date.now(),
- },
- }));
- } catch (error) {
- setStatuses(prev => ({
- ...prev,
- [server.id]: {
- serverId: server.id,
- online: false,
- error: error instanceof Error ? error.message : 'Unknown error',
- lastUpdate: Date.now(),
- },
- }));
- }
- }, []);
-
- useEffect(() => {
- // Initial fetch
- servers.forEach(server => {
- if (server.enabled) {
- fetchMetrics(server);
- }
- });
-
- // Set up polling
- const timer = setInterval(() => {
- servers.forEach(server => {
- if (server.enabled) {
- fetchMetrics(server);
- }
- });
- }, interval);
-
- return () => clearInterval(timer);
- }, [servers, interval, fetchMetrics]);
-
- return statuses;
-};
+import { useState, useEffect, useCallback } from 'react';
+import type { ServerConfig, ServerStatus } from '../types';
+import { fetchServerMetrics } from '../api/monitor';
+
+export const useServerMonitor = (servers: ServerConfig[], interval: number = 2000) => {
+ const [statuses, setStatuses] = useState>({});
+
+ const fetchMetrics = useCallback(async (server: ServerConfig) => {
+ if (!server.enabled) {
+ return;
+ }
+
+ try {
+ const metrics = await fetchServerMetrics(server.url);
+ setStatuses(prev => ({
+ ...prev,
+ [server.id]: {
+ serverId: server.id,
+ online: true,
+ metrics,
+ lastUpdate: Date.now(),
+ },
+ }));
+ } catch (error) {
+ setStatuses(prev => ({
+ ...prev,
+ [server.id]: {
+ serverId: server.id,
+ online: false,
+ error: error instanceof Error ? error.message : 'Unknown error',
+ lastUpdate: Date.now(),
+ },
+ }));
+ }
+ }, []);
+
+ useEffect(() => {
+ // Initial fetch
+ servers.forEach(server => {
+ if (server.enabled) {
+ fetchMetrics(server);
+ }
+ });
+
+ // Set up polling
+ const timer = setInterval(() => {
+ servers.forEach(server => {
+ if (server.enabled) {
+ fetchMetrics(server);
+ }
+ });
+ }, interval);
+
+ return () => clearInterval(timer);
+ }, [servers, interval, fetchMetrics]);
+
+ return statuses;
+};
diff --git a/mengyamonitor-frontend/src/types/index.ts b/mengyamonitor-frontend/src/types/index.ts
index 92b98b7..1bd6af4 100644
--- a/mengyamonitor-frontend/src/types/index.ts
+++ b/mengyamonitor-frontend/src/types/index.ts
@@ -1,125 +1,125 @@
-export interface ServerConfig {
- id: string;
- name: string;
- url: string;
- enabled: boolean;
-}
-
-export interface CPUMetrics {
- model: string;
- cores: number;
- usagePercent: number;
- loadAverages?: number[];
- temperature?: number;
- perCoreUsage?: CoreUsage[];
-}
-
-export interface CoreUsage {
- core: number;
- percent: number;
-}
-
-export interface MemoryMetrics {
- totalBytes: number;
- usedBytes: number;
- freeBytes: number;
- usedPercent: number;
-}
-
-export interface StorageMetrics {
- mount: string;
- totalBytes: number;
- usedBytes: number;
- freeBytes: number;
- usedPercent: number;
-}
-
-export interface GPUMetrics {
- name: string;
- memoryTotalMB: number;
- memoryUsedMB: number;
- utilizationPercent: number;
- temperature?: number;
- status: string;
-}
-
-export interface NetworkInterface {
- name: string;
- ipAddress: string;
- macAddress: string;
- rxBytes: number;
- txBytes: number;
- rxSpeed: number;
- txSpeed: number;
-}
-
-export interface SystemStats {
- processCount: number;
- packageCount: number;
- packageManager: string;
- temperature?: number;
- diskReadSpeed: number;
- diskWriteSpeed: number;
- networkRxSpeed?: number;
- networkTxSpeed?: number;
- topProcesses: ProcessInfo[];
- dockerStats: DockerStats;
- systemLogs?: string[];
-}
-
-export interface ProcessInfo {
- pid: number;
- name: string;
- cpu: number;
- memory: number;
- memoryMB: number;
- command: string;
-}
-
-export interface DockerStats {
- available: boolean;
- version?: string;
- running: number;
- stopped: number;
- imageCount: number;
- runningNames?: string[];
- stoppedNames?: string[];
- imageNames?: string[];
-}
-
-export interface OSInfo {
- kernel: string;
- distro: string;
- architecture: string;
-}
-
-export interface LatencyInfo {
- clientToServer: number;
- external: {
- 'baidu.com'?: string;
- 'google.com'?: string;
- 'github.com'?: string;
- };
-}
-
-export interface ServerMetrics {
- hostname: string;
- timestamp: string;
- cpu: CPUMetrics;
- memory: MemoryMetrics;
- storage: StorageMetrics[];
- gpu: GPUMetrics[];
- network: NetworkInterface[];
- system: SystemStats;
- os: OSInfo;
- uptimeSeconds: number;
- latency?: LatencyInfo;
-}
-
-export interface ServerStatus {
- serverId: string;
- online: boolean;
- metrics?: ServerMetrics;
- error?: string;
- lastUpdate: number;
-}
+export interface ServerConfig {
+ id: string;
+ name: string;
+ url: string;
+ enabled: boolean;
+}
+
+export interface CPUMetrics {
+ model: string;
+ cores: number;
+ usagePercent: number;
+ loadAverages?: number[];
+ temperature?: number;
+ perCoreUsage?: CoreUsage[];
+}
+
+export interface CoreUsage {
+ core: number;
+ percent: number;
+}
+
+export interface MemoryMetrics {
+ totalBytes: number;
+ usedBytes: number;
+ freeBytes: number;
+ usedPercent: number;
+}
+
+export interface StorageMetrics {
+ mount: string;
+ totalBytes: number;
+ usedBytes: number;
+ freeBytes: number;
+ usedPercent: number;
+}
+
+export interface GPUMetrics {
+ name: string;
+ memoryTotalMB: number;
+ memoryUsedMB: number;
+ utilizationPercent: number;
+ temperature?: number;
+ status: string;
+}
+
+export interface NetworkInterface {
+ name: string;
+ ipAddress: string;
+ macAddress: string;
+ rxBytes: number;
+ txBytes: number;
+ rxSpeed: number;
+ txSpeed: number;
+}
+
+export interface SystemStats {
+ processCount: number;
+ packageCount: number;
+ packageManager: string;
+ temperature?: number;
+ diskReadSpeed: number;
+ diskWriteSpeed: number;
+ networkRxSpeed?: number;
+ networkTxSpeed?: number;
+ topProcesses: ProcessInfo[];
+ dockerStats: DockerStats;
+ systemLogs?: string[];
+}
+
+export interface ProcessInfo {
+ pid: number;
+ name: string;
+ cpu: number;
+ memory: number;
+ memoryMB: number;
+ command: string;
+}
+
+export interface DockerStats {
+ available: boolean;
+ version?: string;
+ running: number;
+ stopped: number;
+ imageCount: number;
+ runningNames?: string[];
+ stoppedNames?: string[];
+ imageNames?: string[];
+}
+
+export interface OSInfo {
+ kernel: string;
+ distro: string;
+ architecture: string;
+}
+
+export interface LatencyInfo {
+ clientToServer: number;
+ external: {
+ 'baidu.com'?: string;
+ 'google.com'?: string;
+ 'github.com'?: string;
+ };
+}
+
+export interface ServerMetrics {
+ hostname: string;
+ timestamp: string;
+ cpu: CPUMetrics;
+ memory: MemoryMetrics;
+ storage: StorageMetrics[];
+ gpu: GPUMetrics[];
+ network: NetworkInterface[];
+ system: SystemStats;
+ os: OSInfo;
+ uptimeSeconds: number;
+ latency?: LatencyInfo;
+}
+
+export interface ServerStatus {
+ serverId: string;
+ online: boolean;
+ metrics?: ServerMetrics;
+ error?: string;
+ lastUpdate: number;
+}
diff --git a/mengyamonitor-frontend/src/utils/format.ts b/mengyamonitor-frontend/src/utils/format.ts
index bc3dfa4..1817dca 100644
--- a/mengyamonitor-frontend/src/utils/format.ts
+++ b/mengyamonitor-frontend/src/utils/format.ts
@@ -1,45 +1,45 @@
-export const formatBytes = (bytes: number): string => {
- if (bytes === 0 || bytes === null || bytes === undefined || isNaN(bytes) || !isFinite(bytes)) {
- return '0 B';
- }
-
- // 处理负数
- if (bytes < 0) {
- bytes = 0;
- }
-
- const k = 1024;
- const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-
- // 处理小于 1 的情况
- if (bytes < 1) {
- return bytes.toFixed(2) + ' ' + sizes[0];
- }
-
- const i = Math.floor(Math.log(bytes) / Math.log(k));
- // 确保索引在有效范围内
- const sizeIndex = Math.max(0, Math.min(i, sizes.length - 1));
- const value = Math.round((bytes / Math.pow(k, sizeIndex)) * 100) / 100;
-
- // 确保 sizes[sizeIndex] 存在
- const unit = sizes[sizeIndex] || sizes[0];
-
- return value + ' ' + unit;
-};
-
-export const formatUptime = (seconds: number): string => {
- const days = Math.floor(seconds / 86400);
- const hours = Math.floor((seconds % 86400) / 3600);
- const minutes = Math.floor((seconds % 3600) / 60);
-
- const parts: string[] = [];
- if (days > 0) parts.push(`${days}天`);
- if (hours > 0) parts.push(`${hours}小时`);
- if (minutes > 0) parts.push(`${minutes}分钟`);
-
- return parts.length > 0 ? parts.join(' ') : '刚刚启动';
-};
-
-export const formatPercent = (value: number): string => {
- return `${Math.round(value * 10) / 10}%`;
-};
+export const formatBytes = (bytes: number): string => {
+ if (bytes === 0 || bytes === null || bytes === undefined || isNaN(bytes) || !isFinite(bytes)) {
+ return '0 B';
+ }
+
+ // 处理负数
+ if (bytes < 0) {
+ bytes = 0;
+ }
+
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+
+ // 处理小于 1 的情况
+ if (bytes < 1) {
+ return bytes.toFixed(2) + ' ' + sizes[0];
+ }
+
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ // 确保索引在有效范围内
+ const sizeIndex = Math.max(0, Math.min(i, sizes.length - 1));
+ const value = Math.round((bytes / Math.pow(k, sizeIndex)) * 100) / 100;
+
+ // 确保 sizes[sizeIndex] 存在
+ const unit = sizes[sizeIndex] || sizes[0];
+
+ return value + ' ' + unit;
+};
+
+export const formatUptime = (seconds: number): string => {
+ const days = Math.floor(seconds / 86400);
+ const hours = Math.floor((seconds % 86400) / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+
+ const parts: string[] = [];
+ if (days > 0) parts.push(`${days}天`);
+ if (hours > 0) parts.push(`${hours}小时`);
+ if (minutes > 0) parts.push(`${minutes}分钟`);
+
+ return parts.length > 0 ? parts.join(' ') : '刚刚启动';
+};
+
+export const formatPercent = (value: number): string => {
+ return `${Math.round(value * 10) / 10}%`;
+};
diff --git a/mengyamonitor-frontend/src/utils/storage.ts b/mengyamonitor-frontend/src/utils/storage.ts
index 01014eb..7a4bdc0 100644
--- a/mengyamonitor-frontend/src/utils/storage.ts
+++ b/mengyamonitor-frontend/src/utils/storage.ts
@@ -1,53 +1,115 @@
-import type { ServerConfig } from '../types';
-
-const STORAGE_KEY = 'mengya_monitor_servers';
-
-export const loadServers = (): ServerConfig[] => {
- try {
- const stored = localStorage.getItem(STORAGE_KEY);
- if (stored) {
- const parsed = JSON.parse(stored);
- // Ensure it's an array
- if (Array.isArray(parsed)) {
- return parsed;
- }
- }
- } catch (error) {
- console.error('Failed to load servers:', error);
- }
- return [];
-};
-
-export const saveServers = (servers: ServerConfig[]): void => {
- try {
- localStorage.setItem(STORAGE_KEY, JSON.stringify(servers));
- } catch (error) {
- console.error('Failed to save servers:', error);
- }
-};
-
-export const addServer = (server: Omit): ServerConfig => {
- const servers = loadServers();
- const newServer: ServerConfig = {
- ...server,
- id: Date.now().toString(),
- };
- servers.push(newServer);
- saveServers(servers);
- return newServer;
-};
-
-export const updateServer = (id: string, updates: Partial): void => {
- const servers = loadServers();
- const index = servers.findIndex(s => s.id === id);
- if (index !== -1) {
- servers[index] = { ...servers[index], ...updates };
- saveServers(servers);
- }
-};
-
-export const removeServer = (id: string): void => {
- const servers = loadServers();
- const filtered = servers.filter(s => s.id !== id);
- saveServers(filtered);
-};
+import type { ServerConfig } from '../types';
+
+const STORAGE_KEY = 'mengya_monitor_servers';
+
+export const loadServers = (): ServerConfig[] => {
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ if (stored) {
+ const parsed = JSON.parse(stored);
+ // Ensure it's an array
+ if (Array.isArray(parsed)) {
+ return parsed;
+ }
+ }
+ } catch (error) {
+ console.error('Failed to load servers:', error);
+ }
+ return [];
+};
+
+export const saveServers = (servers: ServerConfig[]): void => {
+ try {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(servers));
+ } catch (error) {
+ console.error('Failed to save servers:', error);
+ }
+};
+
+export const addServer = (server: Omit): ServerConfig => {
+ const servers = loadServers();
+ const newServer: ServerConfig = {
+ ...server,
+ id: Date.now().toString(),
+ };
+ servers.push(newServer);
+ saveServers(servers);
+ return newServer;
+};
+
+export const updateServer = (id: string, updates: Partial): void => {
+ const servers = loadServers();
+ const index = servers.findIndex(s => s.id === id);
+ if (index !== -1) {
+ servers[index] = { ...servers[index], ...updates };
+ saveServers(servers);
+ }
+};
+
+export const removeServer = (id: string): void => {
+ const servers = loadServers();
+ const filtered = servers.filter(s => s.id !== id);
+ saveServers(filtered);
+};
+
+/**
+ * 导出服务器配置到剪贴板
+ * @returns Promise 返回导出的 JSON 字符串
+ */
+export const exportServersToClipboard = async (): Promise => {
+ const servers = loadServers();
+ const json = JSON.stringify(servers, null, 2);
+
+ try {
+ await navigator.clipboard.writeText(json);
+ return json;
+ } catch (error) {
+ console.error('Failed to copy to clipboard:', error);
+ throw new Error('无法复制到剪贴板，请检查浏览器权限');
+ }
+};
+
+/**
+ * 从剪贴板导入服务器配置
+ * @returns Promise 返回导入的服务器配置数组
+ */
+export const importServersFromClipboard = async (): Promise => {
+ try {
+ const text = await navigator.clipboard.readText();
+ const parsed = JSON.parse(text);
+
+ if (!Array.isArray(parsed)) {
+ throw new Error('无效的配置格式：必须是服务器配置数组');
+ }
+
+ // 验证每个配置项的基本结构
+ const validServers: ServerConfig[] = [];
+ for (const item of parsed) {
+ if (item && typeof item === 'object' &&
+ typeof item.name === 'string' &&
+ typeof item.url === 'string') {
+ // 为新导入的服务器生成新的 ID，避免 ID 冲突
+ validServers.push({
+ id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
+ name: item.name,
+ url: item.url,
+ enabled: item.enabled !== undefined ? item.enabled : true,
+ });
+ }
+ }
+
+ if (validServers.length === 0) {
+ throw new Error('未找到有效的服务器配置');
+ }
+
+ return validServers;
+ } catch (error) {
+ if (error instanceof SyntaxError) {
+ throw new Error('无效的 JSON 格式');
+ }
+ if (error instanceof Error) {
+ throw error;
+ }
+ throw new Error('读取剪贴板失败，请检查浏览器权限');
+ }
+};
\ No newline at end of file
diff --git a/mengyamonitor-frontend/vite.config.ts b/mengyamonitor-frontend/vite.config.ts
index a4807b9..b59b8f6 100644
--- a/mengyamonitor-frontend/vite.config.ts
+++ b/mengyamonitor-frontend/vite.config.ts
@@ -1,9 +1,49 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
// https://vite.dev/config/
export default defineConfig({
- plugins: [react()],
+ plugins: [
+ react(),
+ VitePWA({
+ registerType: 'autoUpdate',
+ includeAssets: ['logo.svg'],
+ manifest: {
+ name: '萌芽监控面板',
+ short_name: '萌芽监控',
+ description: '服务器监控面板 - 萌芽监控',
+ theme_color: '#1a1a2e',
+ background_color: '#16213e',
+ display: 'standalone',
+ orientation: 'portrait-primary',
+ scope: '/',
+ start_url: '/',
+ icons: [
+ { src: '/logo.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any maskable' }
+ ],
+ categories: ['utilities', 'productivity']
+ },
+ workbox: {
+ globPatterns: ['**/*.{js,css,html,ico,svg,woff2}'],
+ runtimeCaching: [
+ {
+ urlPattern: /^https:\/\/.*\/api\//i,
+ handler: 'NetworkFirst',
+ options: {
+ cacheName: 'api-cache',
+ expiration: { maxEntries: 32, maxAgeSeconds: 60 * 5 },
+ networkTimeoutSeconds: 10,
+ cacheableResponse: { statuses: [0, 200] }
+ }
+ }
+ ]
+ },
+ devOptions: {
+ enabled: true
+ }
+ })
+ ],
server: {
port: 2929,
host: true,
diff --git a/start-backend.bat b/start-backend.bat
new file mode 100644
index 0000000..c7d4de8
--- /dev/null
+++ b/start-backend.bat
@@ -0,0 +1,6 @@
+@echo off
+chcp 65001 >nul
+echo 启动后端服务器...
+cd mengyadriftbottle-backend
+go mod tidy
+go run main.go
diff --git a/start-frontend.bat b/start-frontend.bat
new file mode 100644
index 0000000..958c19b
--- /dev/null
+++ b/start-frontend.bat
@@ -0,0 +1,7 @@
+@echo off
+chcp 65001 >nul
+echo 启动前端开发服务器...
+cd mengyamonitor-frontend
+echo 正在安装依赖...
+call npm install
+npm run dev
\ No newline at end of file
diff --git a/萌芽监控面板 b/萌芽监控面板
new file mode 100644
index 0000000..e69de29
diff --git a/需求.txt b/需求.txt
index 18f5df8..4067185 100644
--- a/需求.txt
+++ b/需求.txt
@@ -1,8 +1,8 @@
-1.实现一个服务器监控面板，目前初步支持Linux服务器，监控服务器基本信息，比如：cpu/GPU,内存,储存,操作系统等
-2.采用企业级前后端分离架构,前端使用React框架，后端使用golang原版自带的net库
-3.原理十分简单，后端go获取Linux相关硬件信息，并封装成相关后端json API路由，前端每隔1秒或者2秒获取后端信息
-4.对外访问使用默认端口：2929 后端默认端口为9292
-5.由于是监控面板 前端可以一次性对接多个服务器后端卡片式展示相关信息，前端面板可以展示一些基本信息，用户可以点击详情按钮查看更多详细信息
-6.前端项目已经初始化 前后端代码架构必须分类整齐符合标准方便我阅读修改
-7.注意前端相当于一个只是客户端用于请求可以配置后端服务器，这两个是分开的，前端可以打包部署在用户电脑上比如做成软件app，而后端构建打包后放到各个服务器上
+1.实现一个服务器监控面板，目前初步支持Linux服务器，监控服务器基本信息，比如：cpu/GPU,内存,储存,操作系统等
+2.采用企业级前后端分离架构,前端使用React框架，后端使用golang原版自带的net库
+3.原理十分简单，后端go获取Linux相关硬件信息，并封装成相关后端json API路由，前端每隔1秒或者2秒获取后端信息
+4.对外访问使用默认端口：2929 后端默认端口为9292
+5.由于是监控面板 前端可以一次性对接多个服务器后端卡片式展示相关信息，前端面板可以展示一些基本信息，用户可以点击详情按钮查看更多详细信息
+6.前端项目已经初始化 前后端代码架构必须分类整齐符合标准方便我阅读修改
+7.注意前端相当于一个只是客户端用于请求可以配置后端服务器，这两个是分开的，前端可以打包部署在用户电脑上比如做成软件app，而后端构建打包后放到各个服务器上
8.前端页面风格偏白色柔和风
\ No newline at end of file
- 萌芽监控面板
-