初始化提交

2025-12-14 15:25:31 +08:00
commit 4fa42f7115
48 changed files with 8718 additions and 0 deletions
--- a/mengyamonitor-frontend/README.md
+++ b/mengyamonitor-frontend/README.md
@@ -0,0 +1,110 @@
+# 萌芽监控面板 - 前端
+
+## 概述
+服务器监控面板前端应用，使用 React + TypeScript + Vite 构建。
+
+## 功能特性
+- 🖥️ 多服务器监控支持
+- 📊 实时数据展示（CPU、内存、存储、GPU）
+- 🔄 自动刷新（2秒轮询）
+- 📱 响应式设计
+- 🎨 白色柔和风格界面
+- 💾 本地存储配置
+
+## 开发
+
+### 安装依赖
+```bash
+npm install
+```
+
+### 启动开发服务器
+```bash
+npm run dev
+```
+访问 http://localhost:2929
+
+### 构建生产版本
+```bash
+npm run build
+```
+生产文件将输出到 `dist` 目录
+
+### 预览生产版本
+```bash
+npm run preview
+```
+
+## 使用说明
+
+### 添加服务器
+1. 点击右上角"添加服务器"按钮
+2. 输入服务器名称（如：生产服务器1）
+3. 输入服务器地址（如：http://192.168.1.100:9292）
+4. 点击"添加"按钮
+
+### 查看详情
+点击服务器卡片上的"查看详情"按钮，可以查看完整的系统信息：
+- 系统信息（主机名、操作系统、内核、架构、运行时间）
+- CPU 详细信息（型号、核心数、使用率、负载）
+- 内存详细信息（总容量、已使用、可用、使用率）
+- 存储详细信息（挂载点、容量、使用情况）
+- GPU 信息（名称、显存、利用率）
+
+### 移除服务器
+点击服务器卡片右上角的"×"按钮，确认后即可移除。
+
+## 项目结构
+```
+src/
+├── api/              # API 调用
+│   └── monitor.ts    # 监控 API
+├── components/       # React 组件
+│   ├── ServerCard/   # 服务器卡片组件
+│   └── ServerDetail/ # 服务器详情弹窗
+├── hooks/            # 自定义 Hooks
+│   └── useServerMonitor.ts  # 服务器监控 Hook
+├── types/            # TypeScript 类型定义
+│   └── index.ts
+├── utils/            # 工具函数
+│   ├── format.ts     # 格式化函数
+│   └── storage.ts    # 本地存储
+├── App.tsx           # 主应用组件
+├── App.css           # 主应用样式
+├── main.tsx          # 应用入口
+└── index.css         # 全局样式
+```
+
+## 配置说明
+
+### 修改端口
+编辑 `vite.config.ts` 文件中的 `server.port` 配置：
+```typescript
+server: {
+  port: 2929,  // 修改为你想要的端口
+}
+```
+
+### 修改轮询间隔
+编辑 `src/App.tsx` 文件中的 `useServerMonitor` 第二个参数：
+```typescript
+const statuses = useServerMonitor(servers, 2000); // 2000ms = 2秒
+```
+
+## 部署
+
+### 静态文件部署
+1. 构建项目：`npm run build`
+2. 将 `dist` 目录部署到 Web 服务器（如 Nginx、Apache）
+3. 或使用静态托管服务（如 Vercel、Netlify）
+
+### 桌面应用
+可以使用 Electron 或 Tauri 将前端打包成桌面应用：
+- Electron: https://www.electronjs.org/
+- Tauri: https://tauri.app/
+
+## 注意事项
+- 确保后端服务器已启动并可访问
+- 后端服务器需要配置 CORS 允许跨域访问
+- 服务器地址需要包含协议（http:// 或 https://）
+- 本地存储的服务器配置保存在浏览器 localStorage 中
--- a/mengyamonitor-frontend/eslint.config.js
+++ b/mengyamonitor-frontend/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/mengyamonitor-frontend/index.html
+++ b/mengyamonitor-frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>萌芽监控面板</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/mengyamonitor-frontend/package-lock.json
+++ b/mengyamonitor-frontend/package-lock.json
--- a/mengyamonitor-frontend/package.json
+++ b/mengyamonitor-frontend/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "mengyamonitor-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}
--- a/mengyamonitor-frontend/public/logo.png
+++ b/mengyamonitor-frontend/public/logo.png
--- a/mengyamonitor-frontend/public/logo2.png
+++ b/mengyamonitor-frontend/public/logo2.png
--- a/mengyamonitor-frontend/src/App.css
+++ b/mengyamonitor-frontend/src/App.css
@@ -0,0 +1,178 @@
+.app {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 1rem;
+  min-height: 100vh;
+}
+
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding: 0.5rem 1rem;
+  background: var(--surface-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
+}
+
+.app-header h1 {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--text-light);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 400;
+}
+
+.app-logo {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.btn-add {
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 0.5rem;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  font-size: 1.25rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.btn-add:hover {
+  background: var(--primary-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.add-form {
+  background: var(--surface-color);
+  padding: 1.5rem;
+  border-radius: var(--radius-md);
+  margin-bottom: 1rem;
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  border: 1px solid var(--border-color);
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.add-form input {
+  flex: 1;
+  min-width: 250px;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  transition: all 0.2s;
+  background: var(--bg-color);
+  color: var(--text-main);
+}
+
+.add-form input:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.1);
+  background: var(--surface-color);
+}
+
+.btn-submit {
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 0.75rem 2rem;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-submit:hover {
+  background: var(--primary-hover);
+}
+
+.server-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 1.5rem;
+}
+
+.empty-state {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 4rem 2rem;
+  background: var(--surface-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px dashed var(--border-color);
+}
+
+.empty-state p {
+  margin: 0.5rem 0;
+  font-size: 1.125rem;
+  color: var(--text-secondary);
+}
+
+.empty-state .hint {
+  color: var(--text-light);
+  font-size: 0.875rem;
+}
+
+@media (max-width: 768px) {
+  .app {
+    padding: 1rem;
+  }
+
+  .app-header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+    text-align: center;
+    padding: 1rem;
+  }
+
+  .app-header h1 {
+    justify-content: center;
+  }
+
+  .server-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .add-form {
+    flex-direction: column;
+    padding: 1.5rem;
+  }
+
+  .add-form input {
+    min-width: 100%;
+  }
+}
--- a/mengyamonitor-frontend/src/App.tsx
+++ b/mengyamonitor-frontend/src/App.tsx
@@ -0,0 +1,130 @@
+import { useState, useEffect } from 'react';
+import type { ServerConfig } from './types';
+import { loadServers, saveServers, removeServer } from './utils/storage';
+import { useServerMonitor } from './hooks/useServerMonitor';
+import { ServerCard } from './components/ServerCard/ServerCard';
+import { ServerDetail } from './components/ServerDetail/ServerDetail';
+import './App.css';
+
+function App() {
+  const [servers, setServers] = useState<ServerConfig[]>([]);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [selectedServerId, setSelectedServerId] = useState<string | null>(null);
+  const [newServerForm, setNewServerForm] = useState({ name: '', url: '' });
+
+  const statuses = useServerMonitor(servers, 2000);
+
+  useEffect(() => {
+    const loaded = loadServers();
+    setServers(loaded);
+  }, []);
+
+  const handleAddServer = () => {
+    if (!newServerForm.name || !newServerForm.url) {
+      alert('请填写服务器名称和地址');
+      return;
+    }
+
+    const newServer: ServerConfig = {
+      id: Date.now().toString(),
+      name: newServerForm.name,
+      url: newServerForm.url,
+      enabled: true,
+    };
+
+    const updated = [...servers, newServer];
+    setServers(updated);
+    saveServers(updated);
+    setNewServerForm({ name: '', url: '' });
+    setShowAddForm(false);
+  };
+
+  const handleRemoveServer = (serverId: string) => {
+    if (confirm('确定要移除这个服务器吗？')) {
+      const updated = servers.filter(s => s.id !== serverId);
+      setServers(updated);
+      removeServer(serverId);
+    }
+  };
+
+  const handleShowDetail = (serverId: string) => {
+    setSelectedServerId(serverId);
+  };
+
+  const selectedStatus = selectedServerId ? statuses[selectedServerId] : null;
+  const selectedServer = servers.find(s => s.id === selectedServerId);
+
+  return (
+    <div className="app">
+      <header className="app-header">
+        <h1>
+          <img className="app-logo" src="/logo.png" alt="萌芽监控面板" />
+          萌芽监控面板
+        </h1>
+        <button className="btn-add" onClick={() => setShowAddForm(!showAddForm)} title={showAddForm ? '取消' : '添加服务器'}>
+          {showAddForm ? '×' : '+'}
+        </button>
+      </header>
+
+      {showAddForm && (
+        <div className="add-form">
+          <input
+            type="text"
+            placeholder="服务器名称"
+            value={newServerForm.name}
+            onChange={(e) => setNewServerForm({ ...newServerForm, name: e.target.value })}
+          />
+          <input
+            type="text"
+            placeholder="服务器地址 (例如: http://192.168.1.100:9292)"
+            value={newServerForm.url}
+            onChange={(e) => setNewServerForm({ ...newServerForm, url: e.target.value })}
+          />
+          <button className="btn-submit" onClick={handleAddServer}>
+            添加
+          </button>
+        </div>
+      )}
+
+      <main className="server-grid">
+        {servers.length === 0 ? (
+          <div className="empty-state">
+            <p>还没有添加任何服务器</p>
+            <p className="hint">点击右上角的"添加服务器"按钮开始使用</p>
+          </div>
+        ) : (
+          servers.map((server) => {
+            const status = statuses[server.id];
+            // Calculate storage usage (max of all mounts)
+            const storageUsage = status?.metrics?.storage?.reduce((max, s) => Math.max(max, s.usedPercent), 0) || 0;
+            
+            return (
+              <ServerCard
+                key={server.id}
+                server={server}
+                online={status?.online || false}
+                metrics={status?.metrics}
+                cpuUsage={status?.metrics?.cpu.usagePercent || 0}
+                memoryUsage={status?.metrics?.memory.usedPercent || 0}
+                storageUsage={storageUsage} // Pass max storage usage
+                uptime={status?.metrics?.uptimeSeconds}
+                onDetail={handleShowDetail}
+                onRemove={handleRemoveServer}
+              />
+            );
+          })
+        )}
+      </main>
+
+      {selectedStatus?.metrics && selectedServer && (
+        <ServerDetail
+          metrics={selectedStatus.metrics}
+          serverName={selectedServer.name}
+          onClose={() => setSelectedServerId(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+export default App;
--- a/mengyamonitor-frontend/src/api/monitor.ts
+++ b/mengyamonitor-frontend/src/api/monitor.ts
@@ -0,0 +1,101 @@
+import type { ServerMetrics } from '../types';
+
+export const fetchServerMetrics = async (serverUrl: string): Promise<ServerMetrics> => {
+  // 测量客户端到服务器的延迟（使用健康检查端点）
+  const clientToServerLatency = await measureLatency(`${serverUrl}/api/health`);
+  
+  // 并行请求各个端点
+  const endpoints = [
+    '/api/metrics/cpu',
+    '/api/metrics/memory',
+    '/api/metrics/storage',
+    '/api/metrics/gpu',
+    '/api/metrics/network',
+    '/api/metrics/system',
+    '/api/metrics/docker',
+    '/api/metrics/latency',
+  ];
+
+  const results = await Promise.all(
+    endpoints.map(endpoint =>
+      fetch(`${serverUrl}${endpoint}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+        .then(res => {
+          if (!res.ok) throw new Error(`Failed to fetch ${endpoint}`);
+          return res.json();
+        })
+        .catch(err => {
+          console.error(`Error fetching ${endpoint}:`, err);
+          return null;
+        })
+    )
+  );
+
+  // 合并所有结果
+  const [cpuRes, memRes, storageRes, gpuRes, networkRes, systemRes, dockerRes, latencyRes] = results;
+
+  const system = systemRes?.data || {};
+  const docker = dockerRes?.data || {};
+  const latency = latencyRes?.data || {};
+  
+  // 将 docker 数据合并到 system.dockerStats
+  return {
+    hostname: system.hostname || 'Unknown',
+    timestamp: new Date().toISOString(),
+    cpu: cpuRes?.data || {},
+    memory: memRes?.data || {},
+    storage: storageRes?.data || [],
+    gpu: gpuRes?.data || [],
+    network: networkRes?.data || [],
+    system: {
+      ...system,
+      dockerStats: docker
+    },
+    os: system.os || { kernel: '', distro: '', architecture: '' },
+    uptimeSeconds: system.uptimeSeconds || 0,
+    latency: {
+      clientToServer: clientToServerLatency,
+      external: latency.external || {},
+    },
+  };
+};
+
+// 测量延迟
+async function measureLatency(url: string): Promise<number> {
+  try {
+    const startTime = performance.now();
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    const endTime = performance.now();
+    
+    if (response.ok) {
+      return Math.round(endTime - startTime);
+    }
+    return -1; // 表示失败
+  } catch {
+    return -1; // 表示超时或失败
+  }
+}
+
+export const checkServerHealth = async (serverUrl: string): Promise<boolean> => {
+  try {
+    const url = `${serverUrl}/api/health`;
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    return response.ok;
+  } catch {
+    return false;
+  }
+};
--- a/mengyamonitor-frontend/src/assets/react.svg
+++ b/mengyamonitor-frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/mengyamonitor-frontend/src/components/Common/CircularProgress.css
+++ b/mengyamonitor-frontend/src/components/Common/CircularProgress.css
@@ -0,0 +1,41 @@
+.circular-progress {
+  position: relative;
+  display: inline-block;
+}
+
+.circular-progress svg {
+  transform: rotate(-90deg);
+}
+
+.progress-ring-bg {
+  fill: none;
+  stroke: #e2e8f0;
+  transition: stroke 0.3s ease;
+}
+
+.progress-ring-circle {
+  fill: none;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.5s ease;
+}
+
+.progress-value {
+  font-weight: 700;
+  fill: var(--text-main);
+  transform: rotate(90deg);
+  transform-origin: center;
+}
+
+.progress-label {
+  fill: var(--text-secondary);
+  font-weight: 500;
+  transform: rotate(90deg);
+  transform-origin: center;
+}
+
+.progress-sublabel {
+  fill: var(--text-light);
+  font-weight: 400;
+  transform: rotate(90deg);
+  transform-origin: center;
+}
--- a/mengyamonitor-frontend/src/components/Common/CircularProgress.tsx
+++ b/mengyamonitor-frontend/src/components/Common/CircularProgress.tsx
@@ -0,0 +1,83 @@
+import './CircularProgress.css';
+
+interface CircularProgressProps {
+  value: number;
+  label: string;
+  color?: string;
+  size?: number;
+  subLabel?: string;
+}
+
+export const CircularProgress = ({ 
+  value, 
+  label, 
+  color = 'var(--primary-color)',
+  size = 150,
+  subLabel
+}: CircularProgressProps) => {
+  const radius = size * 0.36; // 36% of size
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (value / 100) * circumference;
+  const center = size / 2;
+  
+  // 根据尺寸动态计算字体大小
+  const valueFontSize = size * 0.12; // 12% of size
+  const subLabelFontSize = size * 0.08; // 8% of size
+  const labelFontSize = size * 0.09; // 9% of size
+  
+  return (
+    <div className="circular-progress" style={{ width: size, height: size }}>
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <circle
+          className="progress-ring-bg"
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={size * 0.08}
+        />
+        <circle
+          className="progress-ring-circle"
+          stroke={color}
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeDashoffset={offset}
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={size * 0.08}
+        />
+        {subLabel ? (
+          <text 
+            x={center} 
+            y={center} 
+            className="progress-value" 
+            textAnchor="middle" 
+            dy="0.3em"
+            fontSize={valueFontSize}
+          >
+            {subLabel}
+          </text>
+        ) : (
+          <text 
+            x={center} 
+            y={center} 
+            className="progress-value" 
+            textAnchor="middle" 
+            dy="0.3em"
+            fontSize={valueFontSize}
+          >
+            {Math.round(value)}%
+          </text>
+        )}
+        <text 
+          x={center} 
+          y={center + size * 0.22} 
+          className="progress-label" 
+          textAnchor="middle"
+          fontSize={labelFontSize}
+        >
+          {label}
+        </text>
+      </svg>
+    </div>
+  );
+};
--- a/mengyamonitor-frontend/src/components/ServerCard/ServerCard.css
+++ b/mengyamonitor-frontend/src/components/ServerCard/ServerCard.css
@@ -0,0 +1,381 @@
+.server-card {
+  background: var(--surface-color);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.3s ease;
+  border: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.server-card:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-4px);
+  border-color: var(--primary-color);
+}
+
+.server-card.online {
+  border-top: 4px solid var(--success-color);
+}
+
+.server-card.offline {
+  border-top: 4px solid var(--text-light);
+  opacity: 0.9;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+}
+
+.server-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.status-indicator {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  position: relative;
+}
+
+.status-online {
+  background: var(--success-color);
+  box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.2);
+}
+
+.status-online::after {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+  border: 1px solid var(--success-color);
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); opacity: 0.5; }
+  70% { transform: scale(1.5); opacity: 0; }
+  100% { transform: scale(1); opacity: 0; }
+}
+
+.status-offline {
+  background: var(--text-light);
+}
+
+.server-name-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.server-name {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-main);
+}
+
+.server-hostname {
+  font-size: 0.75rem;
+  color: var(--text-light);
+  font-weight: 400;
+}
+
+.btn-remove {
+  background: transparent;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--text-light);
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.btn-remove:hover {
+  background: var(--danger-color);
+  color: white;
+}
+
+/* Main Metrics */
+.card-main-metrics {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.metrics-grid-main {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0.5rem 0;
+}
+
+.circular-progress-small {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.circular-progress-small .progress-ring-bg {
+  fill: none;
+  stroke: #e2e8f0;
+  stroke-width: 6;
+}
+
+.circular-progress-small .progress-ring-circle {
+  fill: none;
+  stroke-width: 6;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.5s ease;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+
+.circular-progress-small .progress-value-small {
+  font-size: 14px;
+  font-weight: 600;
+  fill: var(--text-main);
+}
+
+.circular-progress-small .progress-label-small {
+  font-size: 10px;
+  fill: var(--text-secondary);
+}
+
+/* Info Grid */
+.card-info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--bg-color);
+  border-radius: var(--radius-md);
+}
+
+.info-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.75rem;
+  writing-mode: horizontal-tb;
+  text-orientation: mixed;
+}
+
+.info-label {
+  color: var(--text-light);
+  font-weight: 500;
+  writing-mode: horizontal-tb;
+  text-orientation: mixed;
+  white-space: nowrap;
+}
+
+.info-value {
+  color: var(--text-main);
+  font-weight: 600;
+  font-family: monospace;
+  font-size: 0.7rem;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+}
+
+/* Performance Grid */
+.card-performance-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--bg-color);
+  border-radius: var(--radius-md);
+}
+
+.performance-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.performance-header {
+  margin-bottom: 0.25rem;
+}
+
+.performance-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.performance-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.performance-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.7rem;
+}
+
+.performance-item-label {
+  color: var(--text-light);
+  font-weight: 500;
+}
+
+.performance-item-value {
+  color: var(--primary-color);
+  font-weight: 600;
+  font-family: monospace;
+  text-align: right;
+}
+
+/* Footer Info */
+.card-footer-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem;
+  background: var(--bg-color);
+  border-radius: var(--radius-md);
+  margin-top: 0.5rem;
+}
+
+.footer-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.footer-label {
+  color: var(--text-light);
+  font-weight: 500;
+}
+
+.footer-value {
+  color: var(--text-main);
+  font-weight: 600;
+  font-family: monospace;
+}
+
+
+/* Metrics List */
+.metrics-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.metric-item {
+  width: 100%;
+}
+
+.metric-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.metric-label {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.metric-value {
+  font-weight: 600;
+  color: var(--text-main);
+}
+
+.progress-bar-bg {
+  width: 100%;
+  height: 8px;
+  background: var(--bg-color);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.5s ease;
+}
+
+.uptime-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.875rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.uptime-label {
+  color: var(--text-light);
+}
+
+.uptime-value {
+  color: var(--text-secondary);
+  font-family: monospace;
+}
+
+.offline-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-color);
+  border-radius: var(--radius-md);
+  margin-bottom: 1.5rem;
+  color: var(--text-light);
+}
+
+.card-footer {
+  margin-top: auto;
+}
+
+.btn-detail {
+  width: 100%;
+  background: var(--surface-hover);
+  border: 1px solid var(--border-color);
+  padding: 0.75rem;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-detail:hover {
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+}
--- a/mengyamonitor-frontend/src/components/ServerCard/ServerCard.tsx
+++ b/mengyamonitor-frontend/src/components/ServerCard/ServerCard.tsx
@@ -0,0 +1,281 @@
+import type { ServerConfig, ServerMetrics } from '../../types';
+import { formatUptime, formatBytes } from '../../utils/format';
+import './ServerCard.css';
+
+const CircularProgress = ({ value, label, color, size = 60 }: { value: number; label: string; color: string; size?: number }) => {
+  const radius = size * 0.36;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (value / 100) * circumference;
+  
+  return (
+    <div className="circular-progress-small">
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <circle
+          className="progress-ring-bg"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+        />
+        <circle
+          className="progress-ring-circle"
+          stroke={color}
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeDashoffset={offset}
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+        />
+        <text x={size / 2} y={size / 2 - 8} className="progress-value-small" textAnchor="middle" dy="7px">
+          {Math.round(value)}%
+        </text>
+        <text x={size / 2} y={size / 2 + 12} className="progress-label-small" textAnchor="middle">
+          {label}
+        </text>
+      </svg>
+    </div>
+  );
+};
+
+const LoadProgress = ({ value, maxValue = 1.0, size = 80 }: { value: number; maxValue?: number; size?: number }) => {
+  const percentage = Math.min((value / maxValue) * 100, 100);
+  const radius = size * 0.36;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (percentage / 100) * circumference;
+  const color = percentage > 80 ? '#f87171' : percentage > 50 ? '#fde047' : '#86efac';
+  
+  return (
+    <div className="circular-progress-small">
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <circle
+          className="progress-ring-bg"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+        />
+        <circle
+          className="progress-ring-circle"
+          stroke={color}
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeDashoffset={offset}
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+        />
+        <text x={size / 2} y={size / 2 - 8} className="progress-value-small" textAnchor="middle" dy="7px">
+          {value.toFixed(2)}
+        </text>
+        <text x={size / 2} y={size / 2 + 12} className="progress-label-small" textAnchor="middle">
+          负载
+        </text>
+      </svg>
+    </div>
+  );
+};
+
+export interface ServerCardProps {
+  server: ServerConfig;
+  online: boolean;
+  metrics?: ServerMetrics;
+  cpuUsage?: number;
+  memoryUsage?: number;
+  storageUsage?: number;
+  uptime?: number;
+  onDetail: (serverId: string) => void;
+  onRemove: (serverId: string) => void;
+}
+
+export const ServerCard = ({
+  server,
+  online,
+  metrics,
+  cpuUsage = 0,
+  memoryUsage = 0,
+  storageUsage = 0,
+  uptime,
+  onDetail,
+  onRemove,
+}: ServerCardProps) => {
+  // 从 URL 提取 IP 地址
+  const extractIP = (url: string): string => {
+    try {
+      const urlObj = new URL(url);
+      return urlObj.hostname;
+    } catch {
+      return url;
+    }
+  };
+
+  // 获取主 IP 地址（从网络接口）
+  const getMainIP = (): string => {
+    if (metrics?.network && metrics.network.length > 0) {
+      const mainInterface = metrics.network.find(iface => 
+        iface.ipAddress && iface.ipAddress !== 'N/A' && !iface.ipAddress.startsWith('127.')
+      );
+      return mainInterface?.ipAddress || extractIP(server.url);
+    }
+    return extractIP(server.url);
+  };
+
+  const mainIP = getMainIP();
+  const loadAverage = metrics?.cpu?.loadAverages?.[0] || 0;
+  const cpuCores = metrics?.cpu?.cores || 1;
+  const temperature = metrics?.system?.temperature || metrics?.cpu?.temperature || 0;
+  const hostname = metrics?.hostname || 'Unknown';
+  const osDistro = metrics?.os?.distro || 'Unknown';
+  const architecture = metrics?.os?.architecture || 'Unknown';
+  const diskReadSpeed = metrics?.system?.diskReadSpeed || 0;
+  const diskWriteSpeed = metrics?.system?.diskWriteSpeed || 0;
+  const networkRxSpeed = metrics?.system?.networkRxSpeed || 0;
+  const networkTxSpeed = metrics?.system?.networkTxSpeed || 0;
+  const latency = metrics?.latency?.clientToServer || -1;
+  const processCount = metrics?.system?.processCount || 0;
+  const packageCount = metrics?.system?.packageCount || 0;
+
+  // 延迟颜色判断
+  const getLatencyColor = (latency: number): string => {
+    if (latency < 0) return '#ef4444'; // 超时/失败 - 红色
+    if (latency < 50) return '#86efac'; // 低延迟 - 绿色
+    if (latency < 200) return '#fde047'; // 中延迟 - 黄色
+    return '#f87171'; // 高延迟 - 红色
+  };
+
+  const latencyColor = getLatencyColor(latency);
+
+  return (
+    <div className={`server-card ${online ? 'online' : 'offline'}`}>
+      <div className="card-header">
+        <div className="server-info">
+          <div className={`status-indicator ${online ? 'status-online' : 'status-offline'}`} />
+          <div className="server-name-group">
+            <h3 className="server-name">{server.name}</h3>
+            {online && hostname !== 'Unknown' && (
+              <span className="server-hostname">{hostname}</span>
+            )}
+          </div>
+        </div>
+        <button className="btn-remove" onClick={() => onRemove(server.id)} title="移除服务器">
+          ×
+        </button>
+      </div>
+
+      {online && metrics ? (
+        <>
+          <div className="card-main-metrics">
+            <div className="metrics-grid-main">
+              {loadAverage > 0 && (
+                <LoadProgress value={loadAverage} maxValue={cpuCores} size={80} />
+              )}
+              <CircularProgress 
+                value={cpuUsage} 
+                label="CPU" 
+                color={cpuUsage > 80 ? '#f87171' : '#86efac'} 
+                size={80}
+              />
+              <CircularProgress 
+                value={memoryUsage} 
+                label="内存" 
+                color={memoryUsage > 80 ? '#fde047' : '#6ee7b7'} 
+                size={80}
+              />
+              <CircularProgress 
+                value={storageUsage} 
+                label="存储" 
+                color={storageUsage > 90 ? '#f87171' : '#a7f3d0'} 
+                size={80}
+              />
+            </div>
+
+            <div className="card-info-grid">
+              <div className="info-section">
+                <div className="info-row">
+                  <span className="info-label">系统</span>
+                  <span className="info-value">{osDistro}</span>
+                </div>
+                <div className="info-row">
+                  <span className="info-label">架构</span>
+                  <span className="info-value">{architecture}</span>
+                </div>
+                <div className="info-row">
+                  <span className="info-label">IP</span>
+                  <span className="info-value">{mainIP}</span>
+                </div>
+              </div>
+
+              <div className="info-section">
+                <div className="info-row">
+                  <span className="info-label">温度</span>
+                  <span className="info-value">{temperature > 0 ? `${temperature.toFixed(1)}°C` : 'N/A'}</span>
+                </div>
+                <div className="info-row">
+                  <span className="info-label">进程</span>
+                  <span className="info-value">{processCount}</span>
+                </div>
+                <div className="info-row">
+                  <span className="info-label">软件包</span>
+                  <span className="info-value">{packageCount}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="card-performance-grid">
+              <div className="performance-section">
+                <div className="performance-header">
+                  <span className="performance-label">磁盘</span>
+                </div>
+                <div className="performance-row">
+                  <span className="performance-item">
+                    <span className="performance-item-label">读取</span>
+                    <span className="performance-item-value">{diskReadSpeed > 0 ? formatBytes(diskReadSpeed * 1024 * 1024) + '/s' : '0 B/s'}</span>
+                  </span>
+                  <span className="performance-item">
+                    <span className="performance-item-label">写入</span>
+                    <span className="performance-item-value">{diskWriteSpeed > 0 ? formatBytes(diskWriteSpeed * 1024 * 1024) + '/s' : '0 B/s'}</span>
+                  </span>
+                </div>
+              </div>
+
+              <div className="performance-section">
+                <div className="performance-header">
+                  <span className="performance-label">网络</span>
+                </div>
+                <div className="performance-row">
+                  <span className="performance-item">
+                    <span className="performance-item-label">下载</span>
+                    <span className="performance-item-value">{networkRxSpeed > 0 ? formatBytes(networkRxSpeed * 1024 * 1024) + '/s' : '0 B/s'}</span>
+                  </span>
+                  <span className="performance-item">
+                    <span className="performance-item-label">上传</span>
+                    <span className="performance-item-value">{networkTxSpeed > 0 ? formatBytes(networkTxSpeed * 1024 * 1024) + '/s' : '0 B/s'}</span>
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="card-footer-info">
+              <div className="footer-row">
+                <span className="footer-label">运行时间</span>
+                <span className="footer-value">{uptime !== undefined ? formatUptime(uptime) : 'N/A'}</span>
+              </div>
+              <div className="footer-row">
+                <span className="footer-label">延迟</span>
+                <span className="footer-value" style={{ color: latencyColor }}>
+                  {latency > 0 ? `${latency} ms` : latency === -1 ? '超时' : 'N/A'}
+                </span>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="offline-state">
+          <p>服务器连接断开</p>
+        </div>
+      )}
+      
+      <div className="card-footer">
+        <button className="btn-detail" onClick={() => onDetail(server.id)}>
+          查看详情
+        </button>
+      </div>
+    </div>
+  );
+};
--- a/mengyamonitor-frontend/src/components/ServerDetail/ServerDetail.css
+++ b/mengyamonitor-frontend/src/components/ServerDetail/ServerDetail.css
--- a/mengyamonitor-frontend/src/components/ServerDetail/ServerDetail.tsx
+++ b/mengyamonitor-frontend/src/components/ServerDetail/ServerDetail.tsx
@@ -0,0 +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 (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>{serverName} - 详细信息</h2>
+          <button className="btn-close" onClick={onClose}>×</button>
+        </div>
+        
+        <div className="modal-body">
+          <section className="detail-section">
+            <h3>系统信息</h3>
+            <div className="system-info-container">
+              {/* 系统基本信息 */}
+              <div className="system-info-group">
+                <h4 className="info-group-title">基本信息</h4>
+                <div className="system-info-grid">
+                  <div className="system-info-item">
+                    <div className="system-info-content">
+                      <span className="system-info-label">主机名</span>
+                      <span className="system-info-value">{metrics.hostname}</span>
+                    </div>
+                  </div>
+                  <div className="system-info-item">
+                    <div className="system-info-content">
+                      <span className="system-info-label">操作系统</span>
+                      <span className="system-info-value">{metrics.os.distro}</span>
+                    </div>
+                  </div>
+
+                  <div className="system-info-item">
+                    <div className="system-info-content">
+                      <span className="system-info-label">架构</span>
+                      <span className="system-info-value">{metrics.os.architecture}</span>
+                    </div>
+                  </div>
+
+                  <div className="system-info-item system-info-item-full">
+                    <div className="system-info-content">
+                      <span className="system-info-label">内核版本</span>
+                      <span className="system-info-value system-info-value-long">{metrics.os.kernel}</span>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+
+              {/* 运行时信息 */}
+              <div className="system-info-group">
+                <h4 className="info-group-title">运行时信息</h4>
+                <div className="system-info-grid">
+                  <div className="system-info-item system-info-item-highlight">
+                    <div className="system-info-content">
+                      <span className="system-info-label">运行时间</span>
+                      <span className="system-info-value highlight">{formatUptime(metrics.uptimeSeconds)}</span>
+                    </div>
+                  </div>
+                  <div className="system-info-item">
+                    <div className="system-info-content">
+                      <span className="system-info-label">进程数量</span>
+                      <span className="system-info-value">{metrics.system.processCount}</span>
+                    </div>
+                  </div>
+                  {metrics.system.packageCount > 0 && (
+                    <div className="system-info-item">
+                      <div className="system-info-content">
+                        <span className="system-info-label">已安装软件包</span>
+                        <span className="system-info-value">{metrics.system.packageCount} <span className="system-info-sub">({metrics.system.packageManager})</span></span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* 性能指标 */}
+              <div className="system-info-group">
+                <h4 className="info-group-title">性能指标</h4>
+                <div className="system-info-grid">
+                  <div className="system-info-item">
+                    <div className="system-info-content">
+                      <span className="system-info-label">磁盘读取</span>
+                      <span className="system-info-value">{metrics.system.diskReadSpeed.toFixed(2)} MB/s</span>
+                    </div>
+                  </div>
+                  <div className="system-info-item">
+                    <div className="system-info-content">
+                      <span className="system-info-label">磁盘写入</span>
+                      <span className="system-info-value">{metrics.system.diskWriteSpeed.toFixed(2)} MB/s</span>
+                    </div>
+                  </div>
+                  {metrics.system.temperature && metrics.system.temperature > 0 && (
+                    <div className="system-info-item system-info-item-temperature">
+                      <div className="system-info-content">
+                        <span className="system-info-label">系统温度</span>
+                        <span className="system-info-value temperature-value">{metrics.system.temperature.toFixed(1)}°C</span>
+                      </div>
+                    </div>
+                  )}
+                  {(metrics.system.networkRxSpeed !== undefined || metrics.system.networkTxSpeed !== undefined) && (
+                    <>
+                      <div className="system-info-item">
+                        <div className="system-info-content">
+                          <span className="system-info-label">网络下载</span>
+                          <span className="system-info-value">{(metrics.system.networkRxSpeed || 0).toFixed(2)} MB/s</span>
+                        </div>
+                      </div>
+                      <div className="system-info-item">
+                        <div className="system-info-content">
+                          <span className="system-info-label">网络上传</span>
+                          <span className="system-info-value">{(metrics.system.networkTxSpeed || 0).toFixed(2)} MB/s</span>
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+
+              {/* 延迟信息 */}
+              {metrics.latency && (
+                <div className="system-info-group">
+                  <h4 className="info-group-title">延迟检测</h4>
+                  <div className="system-info-grid">
+                    <div className="system-info-item system-info-item-highlight">
+                      <div className="system-info-content">
+                        <span className="system-info-label">客户端到服务器</span>
+                        <span className="system-info-value highlight">
+                          {metrics.latency.clientToServer >= 0 ? `${metrics.latency.clientToServer} ms` : '超时'}
+                        </span>
+                      </div>
+                    </div>
+                    {metrics.latency.external && (
+                      <>
+                        <div className="system-info-item">
+                          <div className="system-info-content">
+                            <span className="system-info-label">百度 (baidu.com)</span>
+                            <span className="system-info-value">{metrics.latency.external['baidu.com'] || '超时'}</span>
+                          </div>
+                        </div>
+                        <div className="system-info-item">
+                          <div className="system-info-content">
+                            <span className="system-info-label">谷歌 (google.com)</span>
+                            <span className="system-info-value">{metrics.latency.external['google.com'] || '超时'}</span>
+                          </div>
+                        </div>
+                        <div className="system-info-item">
+                          <div className="system-info-content">
+                            <span className="system-info-label">GitHub (github.com)</span>
+                            <span className="system-info-value">{metrics.latency.external['github.com'] || '超时'}</span>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </section>
+
+          <section className="detail-section">
+            <h3>CPU</h3>
+            <div className="cpu-section-content">
+              <div className="cpu-circular-group">
+                <div className="cpu-circular">
+                  <CircularProgress
+                    value={metrics.cpu.usagePercent}
+                    label=""
+                    size={140}
+                    color={metrics.cpu.usagePercent > 80 ? '#f87171' : '#86efac'}
+                    subLabel={formatPercent(metrics.cpu.usagePercent)}
+                  />
+                </div>
+                {metrics.cpu.loadAverages && metrics.cpu.loadAverages.length > 0 && metrics.cpu.cores > 0 && (
+                  <div className="cpu-load-circular">
+                    <CircularProgress
+                      value={Math.min((metrics.cpu.loadAverages[0] / metrics.cpu.cores) * 100, 100)}
+                      label="负载"
+                      size={140}
+                      color={metrics.cpu.loadAverages[0] / metrics.cpu.cores > 0.8 ? '#fde047' : '#a7f3d0'}
+                      subLabel={metrics.cpu.loadAverages[0].toFixed(2)}
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="detail-grid">
+                <div className="detail-item">
+                  <span className="item-label">型号</span>
+                  <span className="item-value">{metrics.cpu.model}</span>
+                </div>
+                <div className="detail-item">
+                  <span className="item-label">核心数</span>
+                  <span className="item-value">{metrics.cpu.cores}</span>
+                </div>
+                <div className="detail-item">
+                  <span className="item-label">使用率</span>
+                  <span className="item-value highlight">{formatPercent(metrics.cpu.usagePercent)}</span>
+                </div>
+                {metrics.cpu.temperature && metrics.cpu.temperature > 0 && (
+                  <div className="detail-item">
+                    <span className="item-label">温度</span>
+                    <span className="item-value">{metrics.cpu.temperature.toFixed(1)}°C</span>
+                  </div>
+                )}
+                {metrics.cpu.loadAverages && metrics.cpu.loadAverages.length > 0 && (
+                  <div className="detail-item">
+                    <span className="item-label">负载平均值</span>
+                    <span className="item-value">{metrics.cpu.loadAverages.join(' / ')}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+            
+            {metrics.cpu.perCoreUsage && metrics.cpu.perCoreUsage.length > 0 && (
+              <div className="per-core-section">
+                <h4>各核心使用率</h4>
+                <div className="core-grid-circular">
+                  {metrics.cpu.perCoreUsage.map((core) => (
+                    <div key={core.core} className="core-item-circular">
+                      <CircularProgress
+                        value={core.percent}
+                        label={`Core ${core.core}`}
+                        size={140}
+                        color={core.percent > 80 ? '#f87171' : '#86efac'}
+                        subLabel={formatPercent(core.percent)}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </section>
+
+          <section className="detail-section">
+            <h3>内存</h3>
+            <div className="memory-section-content">
+              <div className="memory-circular">
+                <CircularProgress
+                  value={metrics.memory.usedPercent}
+                  label=""
+                  size={140}
+                  color={metrics.memory.usedPercent > 80 ? '#fde047' : '#6ee7b7'}
+                  subLabel={formatPercent(metrics.memory.usedPercent)}
+                />
+              </div>
+              <div className="detail-grid">
+                <div className="detail-item">
+                  <span className="item-label">总容量</span>
+                  <span className="item-value">{formatBytes(metrics.memory.totalBytes)}</span>
+                </div>
+                <div className="detail-item">
+                  <span className="item-label">已使用</span>
+                  <span className="item-value">{formatBytes(metrics.memory.usedBytes)}</span>
+                </div>
+                <div className="detail-item">
+                  <span className="item-label">可用</span>
+                  <span className="item-value">{formatBytes(metrics.memory.freeBytes)}</span>
+                </div>
+                <div className="detail-item">
+                  <span className="item-label">使用率</span>
+                  <span className="item-value highlight">{formatPercent(metrics.memory.usedPercent)}</span>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section className="detail-section">
+            <h3>存储</h3>
+            <div className="storage-grid-circular">
+              {metrics.storage.map((disk, index) => (
+                <div key={index} className="storage-item-circular">
+                   <CircularProgress
+                      value={disk.usedPercent}
+                      label={disk.mount}
+                      size={160}
+                      color={disk.usedPercent > 90 ? '#f87171' : '#a7f3d0'}
+                      subLabel={formatPercent(disk.usedPercent)}
+                    />
+                    <div className="storage-details-mini">
+                      <div>总: {formatBytes(disk.totalBytes)}</div>
+                      <div>用: {formatBytes(disk.usedBytes)}</div>
+                    </div>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {metrics.gpu && metrics.gpu.length > 0 && metrics.gpu[0].status !== 'not_available' && (
+            <section className="detail-section">
+              <h3>GPU</h3>
+              {metrics.gpu.map((gpu, index) => (
+                <div key={index} className="gpu-item">
+                  <div className="gpu-header">
+                    <strong>{gpu.name}</strong>
+                    <span className={`gpu-status ${gpu.status}`}>{gpu.status}</span>
+                  </div>
+                  <div className="gpu-bar-container">
+                    <div className="gpu-bar-label">利用率</div>
+                    <div className="gpu-bar-bg">
+                        <div 
+                            className="gpu-bar"
+                            style={{ width: `${gpu.utilizationPercent}%` }}
+                        />
+                    </div>
+                    <div className="gpu-bar-value">{formatPercent(gpu.utilizationPercent)}</div>
+                  </div>
+                  <div className="detail-grid">
+                    <div className="detail-item">
+                      <span className="item-label">显存总量</span>
+                      <span className="item-value">{gpu.memoryTotalMB} MB</span>
+                    </div>
+                    <div className="detail-item">
+                      <span className="item-label">显存使用</span>
+                      <span className="item-value">{gpu.memoryUsedMB} MB</span>
+                    </div>
+                    {gpu.temperature && gpu.temperature > 0 && (
+                      <div className="detail-item">
+                        <span className="item-label">温度</span>
+                        <span className="item-value">{gpu.temperature.toFixed(1)}°C</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </section>
+          )}
+
+          {metrics.network && metrics.network.length > 0 && (
+            <section className="detail-section">
+              <h3>网络接口</h3>
+              <div className="network-list">
+                {metrics.network.map((iface, index) => (
+                  <div key={index} className="network-item">
+                    <div className="network-header">
+                      <div className="network-name-group">
+                        <div className="network-name-info">
+                          <strong className="network-name">{iface.name}</strong>
+                          {iface.ipAddress && (
+                            <span className="network-ip has-ip">
+                              {iface.ipAddress}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="network-details">
+                      {(iface.macAddress || iface.ipAddress) && (
+                        <div className="network-detail-row">
+                          {iface.macAddress && (
+                            <div className="network-detail-item">
+                              <span className="network-detail-label">MAC 地址</span>
+                              <span className="network-detail-value">{iface.macAddress}</span>
+                            </div>
+                          )}
+                          {iface.ipAddress && (
+                            <div className="network-detail-item">
+                              <span className="network-detail-label">IP 地址</span>
+                              <span className="network-detail-value">{iface.ipAddress}</span>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                      <div className="network-traffic">
+                        <div className="traffic-item">
+                          <div className="traffic-header">
+                            <span className="traffic-label">接收流量</span>
+                            <span className="traffic-value">{formatBytes(iface.rxBytes)}</span>
+                          </div>
+                        </div>
+                        <div className="traffic-item">
+                          <div className="traffic-header">
+                            <span className="traffic-label">发送流量</span>
+                            <span className="traffic-value">{formatBytes(iface.txBytes)}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+
+          {metrics.system.topProcesses && metrics.system.topProcesses.length > 0 && (
+            <section className="detail-section">
+              <h3>Top 5 进程</h3>
+              <div className="process-list">
+                {metrics.system.topProcesses.map((proc, index) => (
+                  <div key={index} className="process-item">
+                    <div className="process-rank">{index + 1}</div>
+                    <div className="process-content">
+                      <div className="process-header">
+                        <div className="process-name-group">
+                          <strong className="process-name">{proc.name}</strong>
+                          <span className="process-pid">PID: {proc.pid}</span>
+                        </div>
+                      </div>
+                      <div className="process-metrics">
+                        <div className="process-metric-item">
+                          <div className="metric-header">
+                            <span className="metric-label">CPU</span>
+                            <span className="metric-value">{proc.cpu}%</span>
+                          </div>
+                          <div className="metric-bar-container">
+                            <div 
+                              className="metric-bar cpu-bar"
+                              style={{ width: `${Math.min(proc.cpu, 100)}%` }}
+                            />
+                          </div>
+                        </div>
+                        <div className="process-metric-item">
+                          <div className="metric-header">
+                            <span className="metric-label">内存</span>
+                            <span className="metric-value">{proc.memory}% ({proc.memoryMB.toFixed(1)} MB)</span>
+                          </div>
+                          <div className="metric-bar-container">
+                            <div 
+                              className="metric-bar memory-bar"
+                              style={{ width: `${Math.min(proc.memory, 100)}%` }}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+
+          {metrics.system.dockerStats && metrics.system.dockerStats.available && (
+            <section className="detail-section">
+              <h3>Docker 信息</h3>
+              {metrics.system.dockerStats.version && (
+                <div className="detail-grid">
+                  <div className="detail-item">
+                    <span className="item-label">Docker 版本</span>
+                    <span className="item-value">{metrics.system.dockerStats.version}</span>
+                  </div>
+                  <div className="detail-item">
+                    <span className="item-label">运行中的容器</span>
+                    <span className="item-value">{metrics.system.dockerStats.running}</span>
+                  </div>
+                  <div className="detail-item">
+                    <span className="item-label">停止的容器</span>
+                    <span className="item-value">{metrics.system.dockerStats.stopped}</span>
+                  </div>
+                  <div className="detail-item">
+                    <span className="item-label">镜像数量</span>
+                    <span className="item-value">{metrics.system.dockerStats.imageCount}</span>
+                  </div>
+                </div>
+              )}
+              
+              {metrics.system.dockerStats.runningNames && metrics.system.dockerStats.runningNames.length > 0 && (
+                <div className="docker-containers-section">
+                  <h4>运行中的容器</h4>
+                  <div className="docker-names-list">
+                    {metrics.system.dockerStats.runningNames.map((name, index) => (
+                      <span key={index} className="docker-name-tag running">
+                        {name}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+              
+              {metrics.system.dockerStats.stoppedNames && metrics.system.dockerStats.stoppedNames.length > 0 && (
+                <div className="docker-containers-section">
+                  <h4>停止的容器</h4>
+                  <div className="docker-names-list">
+                    {metrics.system.dockerStats.stoppedNames.map((name, index) => (
+                      <span key={index} className="docker-name-tag stopped">
+                        {name}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+              
+              {metrics.system.dockerStats.imageNames && metrics.system.dockerStats.imageNames.length > 0 && (
+                <div className="docker-containers-section">
+                  <h4>镜像列表</h4>
+                  <div className="docker-names-list">
+                    {metrics.system.dockerStats.imageNames.map((name, index) => (
+                      <span key={index} className="docker-name-tag image">
+                        {name}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </section>
+          )}
+
+          {metrics.system.systemLogs && metrics.system.systemLogs.length > 0 && (
+            <section className="detail-section">
+              <h3>系统日志</h3>
+              <div className="logs-container">
+                {metrics.system.systemLogs.map((log, index) => (
+                  <div key={index} className="log-line">
+                    {log}
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/mengyamonitor-frontend/src/hooks/useServerMonitor.ts
+++ b/mengyamonitor-frontend/src/hooks/useServerMonitor.ts
@@ -0,0 +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<Record<string, ServerStatus>>({});
+
+  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;
+};
--- a/mengyamonitor-frontend/src/index.css
+++ b/mengyamonitor-frontend/src/index.css
@@ -0,0 +1,74 @@
+* {
+  box-sizing: border-box;
+}
+
+/* 隐藏所有滚动条 */
+* {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+*::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+:root {
+  /* Theme Colors - 淡绿色/淡黄绿色渐变 */
+  --primary-color: #86efac;
+  --primary-hover: #6ee7b7;
+  --secondary-color: #a7f3d0;
+  --warning-color: #fde047;
+  --danger-color: #f87171;
+  --success-color: #86efac;
+  
+  /* Backgrounds - 纯白色 */
+  --bg-color: #ffffff;
+  --surface-color: #ffffff;
+  --surface-hover: #ffffff;
+  
+  /* Text */
+  --text-main: #0f172a;
+  --text-secondary: #64748b;
+  --text-light: #94a3b8;
+  
+  /* Borders & Shadows - 灰白色边框 */
+  --border-color: #e2e8f0;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  
+  /* Radius */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 1rem;
+  
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light;
+  color: var(--text-main);
+  background-color: var(--bg-color);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: var(--bg-color);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--text-main);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+button {
+  font-family: inherit;
+}
--- a/mengyamonitor-frontend/src/main.tsx
+++ b/mengyamonitor-frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/mengyamonitor-frontend/src/types/index.ts
+++ b/mengyamonitor-frontend/src/types/index.ts
@@ -0,0 +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;
+}
--- a/mengyamonitor-frontend/src/utils/format.ts
+++ b/mengyamonitor-frontend/src/utils/format.ts
@@ -0,0 +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}%`;
+};
--- a/mengyamonitor-frontend/src/utils/storage.ts
+++ b/mengyamonitor-frontend/src/utils/storage.ts
@@ -0,0 +1,53 @@
+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, 'id'>): 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<ServerConfig>): 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);
+};
--- a/mengyamonitor-frontend/tsconfig.app.json
+++ b/mengyamonitor-frontend/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/mengyamonitor-frontend/tsconfig.json
+++ b/mengyamonitor-frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/mengyamonitor-frontend/tsconfig.node.json
+++ b/mengyamonitor-frontend/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/mengyamonitor-frontend/vite.config.ts
+++ b/mengyamonitor-frontend/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 2929,
+    host: true,
+  },
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>