初始化提交

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 中