chore: sync local changes (2026-03-12)
This commit is contained in:
7
build-frontend.bat
Normal file
7
build-frontend.bat
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
@echo off
|
||||||
|
chcp 65001 >nul
|
||||||
|
echo 构建前端项目...
|
||||||
|
cd mengyamonitor-frontend
|
||||||
|
echo 正在安装依赖...
|
||||||
|
call npm install
|
||||||
|
npm run build
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
# 编译说明 - 兼容旧版本系统
|
|
||||||
|
|
||||||
## 问题说明
|
|
||||||
|
|
||||||
如果在 Debian 11 或其他旧版本系统上运行时出现 GLIBC 版本错误：
|
|
||||||
```
|
|
||||||
./mengyamonitor-backend: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.34' not found
|
|
||||||
```
|
|
||||||
|
|
||||||
这是因为编译时使用了较新版本的 GLIBC，而目标系统的 GLIBC 版本较旧。
|
|
||||||
|
|
||||||
## 解决方案
|
|
||||||
|
|
||||||
### 方案 1：在目标系统上编译（推荐）
|
|
||||||
|
|
||||||
在 Debian 11 服务器上直接编译：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd mengyamonitor-backend
|
|
||||||
|
|
||||||
# 禁用 CGO，静态链接
|
|
||||||
export CGO_ENABLED=0
|
|
||||||
go build -ldflags="-s -w" -o mengyamonitor-backend .
|
|
||||||
|
|
||||||
# 或者使用提供的脚本
|
|
||||||
chmod +x build.sh
|
|
||||||
./build.sh
|
|
||||||
```
|
|
||||||
|
|
||||||
### 方案 2：使用静态链接编译
|
|
||||||
|
|
||||||
在任何系统上编译，但使用静态链接：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd mengyamonitor-backend
|
|
||||||
|
|
||||||
# 禁用 CGO
|
|
||||||
export CGO_ENABLED=0
|
|
||||||
export GOOS=linux
|
|
||||||
export GOARCH=amd64
|
|
||||||
|
|
||||||
# 编译（静态链接，不依赖系统库）
|
|
||||||
go build -ldflags="-s -w" -o mengyamonitor-backend .
|
|
||||||
```
|
|
||||||
|
|
||||||
### 方案 3：使用 Docker 编译
|
|
||||||
|
|
||||||
使用 Docker 在 Debian 11 环境中编译：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 使用 Debian 11 镜像编译
|
|
||||||
docker run --rm -v $(pwd):/app -w /app golang:1.21-bullseye sh -c "
|
|
||||||
export CGO_ENABLED=0
|
|
||||||
go build -ldflags='-s -w' -o mengyamonitor-backend .
|
|
||||||
"
|
|
||||||
|
|
||||||
# 或者使用多阶段构建
|
|
||||||
docker build -t mengyamonitor-backend -f Dockerfile.build .
|
|
||||||
```
|
|
||||||
|
|
||||||
## 验证编译结果
|
|
||||||
|
|
||||||
编译完成后，检查二进制文件：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 检查文件类型
|
|
||||||
file mengyamonitor-backend
|
|
||||||
|
|
||||||
# 检查依赖（如果是静态链接，应该显示 "not a dynamic executable"）
|
|
||||||
ldd mengyamonitor-backend
|
|
||||||
|
|
||||||
# 检查 GLIBC 依赖（应该没有或很少）
|
|
||||||
objdump -T mengyamonitor-backend | grep GLIBC
|
|
||||||
```
|
|
||||||
|
|
||||||
## 编译参数说明
|
|
||||||
|
|
||||||
- `CGO_ENABLED=0`: 禁用 CGO，使用纯 Go 实现，不依赖系统 C 库
|
|
||||||
- `-ldflags="-s -w"`: 减小二进制文件大小
|
|
||||||
- `-s`: 省略符号表和调试信息
|
|
||||||
- `-w`: 省略 DWARF 符号表
|
|
||||||
|
|
||||||
## 注意事项
|
|
||||||
|
|
||||||
1. 禁用 CGO 后，某些需要 C 库的功能可能不可用，但本项目不依赖 CGO
|
|
||||||
2. 静态链接的二进制文件会稍大一些，但兼容性更好
|
|
||||||
3. 如果必须使用 CGO，需要在目标系统上编译，或使用相同 GLIBC 版本的系统编译
|
|
||||||
|
|
||||||
30
mengyamonitor-backend/build_arm64.sh
Normal file
30
mengyamonitor-backend/build_arm64.sh
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# Linux ARM64 交叉编译脚本
|
||||||
|
|
||||||
|
echo "开始交叉编译 mengyamonitor-backend (Linux ARM64)..."
|
||||||
|
|
||||||
|
# 禁用 CGO，使用纯 Go 编译（不依赖系统 C 库）
|
||||||
|
export CGO_ENABLED=0
|
||||||
|
|
||||||
|
# 设置目标平台为 Linux ARM64
|
||||||
|
export GOOS=linux
|
||||||
|
export GOARCH=arm64
|
||||||
|
|
||||||
|
# 编译（静态链接）
|
||||||
|
go build -ldflags="-s -w" -o mengyamonitor-backend-arm64 .
|
||||||
|
|
||||||
|
if [ $? -eq 0 ]; then
|
||||||
|
echo "编译成功！"
|
||||||
|
echo "二进制文件: mengyamonitor-backend-arm64"
|
||||||
|
echo ""
|
||||||
|
echo "目标平台: Linux ARM64"
|
||||||
|
echo "编译模式: 静态链接，无外部依赖"
|
||||||
|
echo ""
|
||||||
|
echo "检查文件信息:"
|
||||||
|
file mengyamonitor-backend-arm64 2>/dev/null || echo "文件已生成: mengyamonitor-backend-arm64"
|
||||||
|
echo ""
|
||||||
|
ls -lh mengyamonitor-backend-arm64
|
||||||
|
else
|
||||||
|
echo "编译失败！"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
@@ -29,6 +29,8 @@ func readNetworkInterfaces() []NetworkInterface {
|
|||||||
// 跳过 Docker 相关网络接口
|
// 跳过 Docker 相关网络接口
|
||||||
if strings.HasPrefix(ifName, "docker") ||
|
if strings.HasPrefix(ifName, "docker") ||
|
||||||
strings.HasPrefix(ifName, "br-") ||
|
strings.HasPrefix(ifName, "br-") ||
|
||||||
|
strings.HasPrefix(ifName, "wwan") ||
|
||||||
|
strings.HasPrefix(ifName, "nm-bridge") ||
|
||||||
strings.HasPrefix(ifName, "veth") {
|
strings.HasPrefix(ifName, "veth") {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,15 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/logo.png" />
|
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
|
||||||
|
<link rel="apple-touch-icon" href="/logo.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="theme-color" content="#1a1a2e" />
|
||||||
|
<meta name="description" content="服务器监控面板 - 萌芽监控" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="萌芽监控" />
|
||||||
<title>萌芽监控面板</title>
|
<title>萌芽监控面板</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
4457
mengyamonitor-frontend/package-lock.json
generated
4457
mengyamonitor-frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -10,6 +10,9 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@dnd-kit/core": "^6.3.1",
|
||||||
|
"@dnd-kit/sortable": "^10.0.0",
|
||||||
|
"@dnd-kit/utilities": "^3.2.2",
|
||||||
"react": "^19.2.0",
|
"react": "^19.2.0",
|
||||||
"react-dom": "^19.2.0"
|
"react-dom": "^19.2.0"
|
||||||
},
|
},
|
||||||
@@ -25,6 +28,7 @@
|
|||||||
"globals": "^16.5.0",
|
"globals": "^16.5.0",
|
||||||
"typescript": "~5.9.3",
|
"typescript": "~5.9.3",
|
||||||
"typescript-eslint": "^8.46.4",
|
"typescript-eslint": "^8.46.4",
|
||||||
"vite": "^7.2.4"
|
"vite": "^7.2.4",
|
||||||
|
"vite-plugin-pwa": "^1.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
16
mengyamonitor-frontend/public/logo.svg
Normal file
16
mengyamonitor-frontend/public/logo.svg
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#1a1a2e"/>
|
||||||
|
<stop offset="100%" style="stop-color:#16213e"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="leaf" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#4ecca3"/>
|
||||||
|
<stop offset="100%" style="stop-color:#2d8f7a"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="512" height="512" rx="96" fill="url(#bg)"/>
|
||||||
|
<path fill="url(#leaf)" d="M256 96c-20 80-80 160-80 240 0 53 35.8 96 80 96s80-43 80-96c0-80-60-160-80-240z"/>
|
||||||
|
<path fill="url(#leaf)" opacity=".9" d="M256 96c20 80 60 160 60 240 0 53-35.8 96-80 96s-80-43-80-96c0-80 40-160 60-240z"/>
|
||||||
|
<ellipse cx="256" cy="336" rx="48" ry="24" fill="url(#leaf)" opacity=".7"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 867 B |
@@ -16,25 +16,87 @@
|
|||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
box-shadow: var(--shadow-sm);
|
box-shadow: var(--shadow-sm);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-header h1 {
|
.app-header h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 0.75rem;
|
font-size: 1.5rem;
|
||||||
color: var(--text-light);
|
color: var(--text-main);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.25rem;
|
gap: 0.75rem;
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
|
transform: translateY(-3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-logo {
|
.app-logo {
|
||||||
width: 16px;
|
width: 36px;
|
||||||
height: 16px;
|
height: 36px;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
background: var(--surface-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon:hover {
|
||||||
|
background: var(--bg-color);
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-show-header {
|
||||||
|
position: fixed;
|
||||||
|
top: 5px;
|
||||||
|
right: 5px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
z-index: 1000;
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: all 0.2s;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-show-header:hover {
|
||||||
|
opacity: 1;
|
||||||
|
background: var(--surface-color);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
transform: scale(1.1);
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
.btn-add {
|
.btn-add {
|
||||||
background: var(--primary-color);
|
background: var(--primary-color);
|
||||||
color: white;
|
color: white;
|
||||||
@@ -163,16 +225,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.server-grid {
|
.header-actions {
|
||||||
grid-template-columns: 1fr;
|
justify-content: center;
|
||||||
}
|
|
||||||
|
|
||||||
.add-form {
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-form input {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,34 +1,80 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import type { ServerConfig } from './types';
|
import type { ServerConfig } from './types';
|
||||||
import { loadServers, saveServers, removeServer } from './utils/storage';
|
import { loadServers, saveServers, removeServer, exportServersToClipboard, importServersFromClipboard } from './utils/storage';
|
||||||
import { useServerMonitor } from './hooks/useServerMonitor';
|
import { useServerMonitor } from './hooks/useServerMonitor';
|
||||||
import { ServerCard } from './components/ServerCard/ServerCard';
|
import { ServerCard } from './components/ServerCard/ServerCard';
|
||||||
import { ServerDetail } from './components/ServerDetail/ServerDetail';
|
import { ServerDetail } from './components/ServerDetail/ServerDetail';
|
||||||
|
import {
|
||||||
|
DndContext,
|
||||||
|
closestCenter,
|
||||||
|
KeyboardSensor,
|
||||||
|
PointerSensor,
|
||||||
|
useSensor,
|
||||||
|
useSensors,
|
||||||
|
} from '@dnd-kit/core';
|
||||||
|
import type { DragEndEvent } from '@dnd-kit/core';
|
||||||
|
import {
|
||||||
|
arrayMove,
|
||||||
|
SortableContext,
|
||||||
|
sortableKeyboardCoordinates,
|
||||||
|
rectSortingStrategy,
|
||||||
|
} from '@dnd-kit/sortable';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
|
|
||||||
|
const formatServerUrl = (url: string) => {
|
||||||
|
let formatted = url.trim();
|
||||||
|
|
||||||
|
// Fix common typo .op -> .top based on user requirement
|
||||||
|
if (formatted.endsWith('.op')) {
|
||||||
|
formatted = formatted.slice(0, -3) + '.top';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formatted && !/^https?:\/\//i.test(formatted)) {
|
||||||
|
return `http://${formatted}`;
|
||||||
|
}
|
||||||
|
return formatted;
|
||||||
|
};
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [servers, setServers] = useState<ServerConfig[]>([]);
|
const [servers, setServers] = useState<ServerConfig[]>([]);
|
||||||
const [showAddForm, setShowAddForm] = useState(false);
|
const [showAddForm, setShowAddForm] = useState(false);
|
||||||
const [selectedServerId, setSelectedServerId] = useState<string | null>(null);
|
const [selectedServerId, setSelectedServerId] = useState<string | null>(null);
|
||||||
const [newServerForm, setNewServerForm] = useState({ name: '', url: '' });
|
const [newServerForm, setNewServerForm] = useState({ name: '', url: '' });
|
||||||
|
const [showHeader, setShowHeader] = useState(true);
|
||||||
|
|
||||||
const statuses = useServerMonitor(servers, 2000);
|
const statuses = useServerMonitor(servers, 2000);
|
||||||
|
|
||||||
|
const sensors = useSensors(
|
||||||
|
useSensor(PointerSensor),
|
||||||
|
useSensor(KeyboardSensor, {
|
||||||
|
coordinateGetter: sortableKeyboardCoordinates,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loaded = loadServers();
|
const loaded = loadServers();
|
||||||
setServers(loaded);
|
setServers(loaded);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const handleUrlBlur = () => {
|
||||||
|
const formatted = formatServerUrl(newServerForm.url);
|
||||||
|
if (formatted !== newServerForm.url) {
|
||||||
|
setNewServerForm(prev => ({ ...prev, url: formatted }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleAddServer = () => {
|
const handleAddServer = () => {
|
||||||
if (!newServerForm.name || !newServerForm.url) {
|
if (!newServerForm.name || !newServerForm.url) {
|
||||||
alert('请填写服务器名称和地址');
|
alert('请填写服务器名称和地址');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const formattedUrl = formatServerUrl(newServerForm.url);
|
||||||
|
|
||||||
const newServer: ServerConfig = {
|
const newServer: ServerConfig = {
|
||||||
id: Date.now().toString(),
|
id: Date.now().toString(),
|
||||||
name: newServerForm.name,
|
name: newServerForm.name,
|
||||||
url: newServerForm.url,
|
url: formattedUrl,
|
||||||
enabled: true,
|
enabled: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -51,20 +97,94 @@ function App() {
|
|||||||
setSelectedServerId(serverId);
|
setSelectedServerId(serverId);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleExportServers = async () => {
|
||||||
|
try {
|
||||||
|
await exportServersToClipboard();
|
||||||
|
alert('服务器配置已复制到剪贴板！');
|
||||||
|
} catch (error) {
|
||||||
|
alert(error instanceof Error ? error.message : '导出失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImportServers = async () => {
|
||||||
|
if (!confirm('导入服务器配置将添加到现有服务器列表中，是否继续？')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const importedServers = await importServersFromClipboard();
|
||||||
|
const updated = [...servers, ...importedServers];
|
||||||
|
setServers(updated);
|
||||||
|
saveServers(updated);
|
||||||
|
alert(`成功导入 ${importedServers.length} 个服务器配置！`);
|
||||||
|
} catch (error) {
|
||||||
|
alert(error instanceof Error ? error.message : '导入失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDragEnd = (event: DragEndEvent) => {
|
||||||
|
const { active, over } = event;
|
||||||
|
|
||||||
|
if (over && active.id !== over.id) {
|
||||||
|
setServers((items) => {
|
||||||
|
const oldIndex = items.findIndex((item) => item.id === active.id);
|
||||||
|
const newIndex = items.findIndex((item) => item.id === over.id);
|
||||||
|
const newOrder = arrayMove(items, oldIndex, newIndex);
|
||||||
|
saveServers(newOrder);
|
||||||
|
return newOrder;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const selectedStatus = selectedServerId ? statuses[selectedServerId] : null;
|
const selectedStatus = selectedServerId ? statuses[selectedServerId] : null;
|
||||||
const selectedServer = servers.find(s => s.id === selectedServerId);
|
const selectedServer = servers.find(s => s.id === selectedServerId);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="app">
|
<div className="app">
|
||||||
|
{!showHeader && (
|
||||||
|
<button
|
||||||
|
className="btn-show-header"
|
||||||
|
onClick={() => setShowHeader(true)}
|
||||||
|
title="显示导航栏"
|
||||||
|
>
|
||||||
|
👁️
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showHeader && (
|
||||||
<header className="app-header">
|
<header className="app-header">
|
||||||
<h1>
|
<h1>
|
||||||
<img className="app-logo" src="/logo.png" alt="萌芽监控面板" />
|
<img className="app-logo" src="/logo.svg" alt="萌芽监控面板" />
|
||||||
萌芽监控面板
|
萌芽监控面板
|
||||||
</h1>
|
</h1>
|
||||||
|
<div className="header-actions">
|
||||||
|
<button
|
||||||
|
className="btn-icon"
|
||||||
|
onClick={() => setShowHeader(false)}
|
||||||
|
title="隐藏导航栏"
|
||||||
|
>
|
||||||
|
👁️
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn-icon"
|
||||||
|
onClick={handleExportServers}
|
||||||
|
title="导出服务器配置到剪贴板"
|
||||||
|
>
|
||||||
|
📤
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn-icon"
|
||||||
|
onClick={handleImportServers}
|
||||||
|
title="从剪贴板导入服务器配置"
|
||||||
|
>
|
||||||
|
📥
|
||||||
|
</button>
|
||||||
<button className="btn-add" onClick={() => setShowAddForm(!showAddForm)} title={showAddForm ? '取消' : '添加服务器'}>
|
<button className="btn-add" onClick={() => setShowAddForm(!showAddForm)} title={showAddForm ? '取消' : '添加服务器'}>
|
||||||
{showAddForm ? '×' : '+'}
|
{showAddForm ? '×' : '+'}
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
)}
|
||||||
|
|
||||||
{showAddForm && (
|
{showAddForm && (
|
||||||
<div className="add-form">
|
<div className="add-form">
|
||||||
@@ -79,6 +199,7 @@ function App() {
|
|||||||
placeholder="服务器地址 (例如: http://192.168.1.100:9292)"
|
placeholder="服务器地址 (例如: http://192.168.1.100:9292)"
|
||||||
value={newServerForm.url}
|
value={newServerForm.url}
|
||||||
onChange={(e) => setNewServerForm({ ...newServerForm, url: e.target.value })}
|
onChange={(e) => setNewServerForm({ ...newServerForm, url: e.target.value })}
|
||||||
|
onBlur={handleUrlBlur}
|
||||||
/>
|
/>
|
||||||
<button className="btn-submit" onClick={handleAddServer}>
|
<button className="btn-submit" onClick={handleAddServer}>
|
||||||
添加
|
添加
|
||||||
@@ -93,7 +214,13 @@ function App() {
|
|||||||
<p className="hint">点击右上角的"添加服务器"按钮开始使用</p>
|
<p className="hint">点击右上角的"添加服务器"按钮开始使用</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
servers.map((server) => {
|
<DndContext
|
||||||
|
sensors={sensors}
|
||||||
|
collisionDetection={closestCenter}
|
||||||
|
onDragEnd={handleDragEnd}
|
||||||
|
>
|
||||||
|
<SortableContext items={servers.map((s) => s.id)} strategy={rectSortingStrategy}>
|
||||||
|
{servers.map((server) => {
|
||||||
const status = statuses[server.id];
|
const status = statuses[server.id];
|
||||||
// Calculate storage usage (max of all mounts)
|
// Calculate storage usage (max of all mounts)
|
||||||
const storageUsage = status?.metrics?.storage?.reduce((max, s) => Math.max(max, s.usedPercent), 0) || 0;
|
const storageUsage = status?.metrics?.storage?.reduce((max, s) => Math.max(max, s.usedPercent), 0) || 0;
|
||||||
@@ -112,7 +239,9 @@ function App() {
|
|||||||
onRemove={handleRemoveServer}
|
onRemove={handleRemoveServer}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})
|
})}
|
||||||
|
</SortableContext>
|
||||||
|
</DndContext>
|
||||||
)}
|
)}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -52,7 +52,7 @@ export const CircularProgress = ({
|
|||||||
className="progress-value"
|
className="progress-value"
|
||||||
textAnchor="middle"
|
textAnchor="middle"
|
||||||
dy="0.3em"
|
dy="0.3em"
|
||||||
fontSize={valueFontSize}
|
fontSize={subLabelFontSize}
|
||||||
>
|
>
|
||||||
{subLabel}
|
{subLabel}
|
||||||
</text>
|
</text>
|
||||||
|
|||||||
@@ -30,6 +30,12 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
|
cursor: grab;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header:active {
|
||||||
|
cursor: grabbing;
|
||||||
}
|
}
|
||||||
|
|
||||||
.server-info {
|
.server-info {
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
import type { ServerConfig, ServerMetrics } from '../../types';
|
import type { ServerConfig, ServerMetrics } from '../../types';
|
||||||
import { formatUptime, formatBytes } from '../../utils/format';
|
import { formatUptime, formatBytes } from '../../utils/format';
|
||||||
|
import { useSortable } from '@dnd-kit/sortable';
|
||||||
|
import { CSS } from '@dnd-kit/utilities';
|
||||||
import './ServerCard.css';
|
import './ServerCard.css';
|
||||||
|
|
||||||
const CircularProgress = ({ value, label, color, size = 60 }: { value: number; label: string; color: string; size?: number }) => {
|
const CircularProgress = ({ value, label, color, size = 60 }: { value: number; label: string; color: string; size?: number }) => {
|
||||||
@@ -95,6 +97,21 @@ export const ServerCard = ({
|
|||||||
onDetail,
|
onDetail,
|
||||||
onRemove,
|
onRemove,
|
||||||
}: ServerCardProps) => {
|
}: ServerCardProps) => {
|
||||||
|
const {
|
||||||
|
attributes,
|
||||||
|
listeners,
|
||||||
|
setNodeRef,
|
||||||
|
transform,
|
||||||
|
transition,
|
||||||
|
isDragging,
|
||||||
|
} = useSortable({ id: server.id });
|
||||||
|
|
||||||
|
const style = {
|
||||||
|
transform: CSS.Transform.toString(transform),
|
||||||
|
transition,
|
||||||
|
opacity: isDragging ? 0.5 : 1,
|
||||||
|
};
|
||||||
|
|
||||||
// 从 URL 提取 IP 地址
|
// 从 URL 提取 IP 地址
|
||||||
const extractIP = (url: string): string => {
|
const extractIP = (url: string): string => {
|
||||||
try {
|
try {
|
||||||
@@ -142,8 +159,12 @@ export const ServerCard = ({
|
|||||||
const latencyColor = getLatencyColor(latency);
|
const latencyColor = getLatencyColor(latency);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`server-card ${online ? 'online' : 'offline'}`}>
|
<div
|
||||||
<div className="card-header">
|
ref={setNodeRef}
|
||||||
|
style={style}
|
||||||
|
className={`server-card ${online ? 'online' : 'offline'}`}
|
||||||
|
>
|
||||||
|
<div className="card-header" {...attributes} {...listeners}>
|
||||||
<div className="server-info">
|
<div className="server-info">
|
||||||
<div className={`status-indicator ${online ? 'status-online' : 'status-offline'}`} />
|
<div className={`status-indicator ${online ? 'status-online' : 'status-offline'}`} />
|
||||||
<div className="server-name-group">
|
<div className="server-name-group">
|
||||||
@@ -153,7 +174,15 @@ export const ServerCard = ({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button className="btn-remove" onClick={() => onRemove(server.id)} title="移除服务器">
|
<button
|
||||||
|
className="btn-remove"
|
||||||
|
onPointerDown={(e) => e.stopPropagation()}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onRemove(server.id);
|
||||||
|
}}
|
||||||
|
title="移除服务器"
|
||||||
|
>
|
||||||
×
|
×
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -51,3 +51,65 @@ export const removeServer = (id: string): void => {
|
|||||||
const filtered = servers.filter(s => s.id !== id);
|
const filtered = servers.filter(s => s.id !== id);
|
||||||
saveServers(filtered);
|
saveServers(filtered);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导出服务器配置到剪贴板
|
||||||
|
* @returns Promise<string> 返回导出的 JSON 字符串
|
||||||
|
*/
|
||||||
|
export const exportServersToClipboard = async (): Promise<string> => {
|
||||||
|
const servers = loadServers();
|
||||||
|
const json = JSON.stringify(servers, null, 2);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(json);
|
||||||
|
return json;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to copy to clipboard:', error);
|
||||||
|
throw new Error('无法复制到剪贴板，请检查浏览器权限');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 从剪贴板导入服务器配置
|
||||||
|
* @returns Promise<ServerConfig[]> 返回导入的服务器配置数组
|
||||||
|
*/
|
||||||
|
export const importServersFromClipboard = async (): Promise<ServerConfig[]> => {
|
||||||
|
try {
|
||||||
|
const text = await navigator.clipboard.readText();
|
||||||
|
const parsed = JSON.parse(text);
|
||||||
|
|
||||||
|
if (!Array.isArray(parsed)) {
|
||||||
|
throw new Error('无效的配置格式：必须是服务器配置数组');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证每个配置项的基本结构
|
||||||
|
const validServers: ServerConfig[] = [];
|
||||||
|
for (const item of parsed) {
|
||||||
|
if (item && typeof item === 'object' &&
|
||||||
|
typeof item.name === 'string' &&
|
||||||
|
typeof item.url === 'string') {
|
||||||
|
// 为新导入的服务器生成新的 ID，避免 ID 冲突
|
||||||
|
validServers.push({
|
||||||
|
id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
|
||||||
|
name: item.name,
|
||||||
|
url: item.url,
|
||||||
|
enabled: item.enabled !== undefined ? item.enabled : true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (validServers.length === 0) {
|
||||||
|
throw new Error('未找到有效的服务器配置');
|
||||||
|
}
|
||||||
|
|
||||||
|
return validServers;
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof SyntaxError) {
|
||||||
|
throw new Error('无效的 JSON 格式');
|
||||||
|
}
|
||||||
|
if (error instanceof Error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
throw new Error('读取剪贴板失败，请检查浏览器权限');
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -1,9 +1,49 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import react from '@vitejs/plugin-react'
|
import react from '@vitejs/plugin-react'
|
||||||
|
import { VitePWA } from 'vite-plugin-pwa'
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react()],
|
plugins: [
|
||||||
|
react(),
|
||||||
|
VitePWA({
|
||||||
|
registerType: 'autoUpdate',
|
||||||
|
includeAssets: ['logo.svg'],
|
||||||
|
manifest: {
|
||||||
|
name: '萌芽监控面板',
|
||||||
|
short_name: '萌芽监控',
|
||||||
|
description: '服务器监控面板 - 萌芽监控',
|
||||||
|
theme_color: '#1a1a2e',
|
||||||
|
background_color: '#16213e',
|
||||||
|
display: 'standalone',
|
||||||
|
orientation: 'portrait-primary',
|
||||||
|
scope: '/',
|
||||||
|
start_url: '/',
|
||||||
|
icons: [
|
||||||
|
{ src: '/logo.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any maskable' }
|
||||||
|
],
|
||||||
|
categories: ['utilities', 'productivity']
|
||||||
|
},
|
||||||
|
workbox: {
|
||||||
|
globPatterns: ['**/*.{js,css,html,ico,svg,woff2}'],
|
||||||
|
runtimeCaching: [
|
||||||
|
{
|
||||||
|
urlPattern: /^https:\/\/.*\/api\//i,
|
||||||
|
handler: 'NetworkFirst',
|
||||||
|
options: {
|
||||||
|
cacheName: 'api-cache',
|
||||||
|
expiration: { maxEntries: 32, maxAgeSeconds: 60 * 5 },
|
||||||
|
networkTimeoutSeconds: 10,
|
||||||
|
cacheableResponse: { statuses: [0, 200] }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
devOptions: {
|
||||||
|
enabled: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
],
|
||||||
server: {
|
server: {
|
||||||
port: 2929,
|
port: 2929,
|
||||||
host: true,
|
host: true,
|
||||||
|
|||||||
6
start-backend.bat
Normal file
6
start-backend.bat
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
@echo off
|
||||||
|
chcp 65001 >nul
|
||||||
|
echo 启动后端服务器...
|
||||||
|
cd mengyadriftbottle-backend
|
||||||
|
go mod tidy
|
||||||
|
go run main.go
|
||||||
7
start-frontend.bat
Normal file
7
start-frontend.bat
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
@echo off
|
||||||
|
chcp 65001 >nul
|
||||||
|
echo 启动前端开发服务器...
|
||||||
|
cd mengyamonitor-frontend
|
||||||
|
echo 正在安装依赖...
|
||||||
|
call npm install
|
||||||
|
npm run dev
|
||||||
Reference in New Issue
Block a user