# 萌芽监控面板 - 前端

## 概述
服务器监控面板前端应用，使用 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 中