111 lines
3.0 KiB
Markdown
111 lines
3.0 KiB
Markdown
# 萌芽监控面板 - 前端
|
||
|
||
## 概述
|
||
服务器监控面板前端应用，使用 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 中
|