mengyamonitor/mengyamonitor-frontend/README.md

萌芽监控面板 - 前端

概述

服务器监控面板前端应用，使用 React + TypeScript + Vite 构建。

功能特性

• 🖥️ 多服务器监控支持
• 📊 实时数据展示（CPU、内存、存储、GPU）
• 🔄 自动刷新（2秒轮询）
• 📱 响应式设计
• 🎨 白色柔和风格界面
• 💾 本地存储配置

开发

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:2929

构建生产版本

npm run build

生产文件将输出到 dist 目录

预览生产版本

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 配置：

server: {
  port: 2929,  // 修改为你想要的端口
}

修改轮询间隔

编辑 src/App.tsx 文件中的 useServerMonitor 第二个参数：

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 中