first commit
This commit is contained in:
24
mengyaping-frontend/.gitignore
vendored
Normal file
24
mengyaping-frontend/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
16
mengyaping-frontend/README.md
Normal file
16
mengyaping-frontend/README.md
Normal file
@@ -0,0 +1,16 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
29
mengyaping-frontend/eslint.config.js
Normal file
29
mengyaping-frontend/eslint.config.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||
},
|
||||
},
|
||||
])
|
||||
18
mengyaping-frontend/index.html
Normal file
18
mengyaping-frontend/index.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="萌芽Ping - 网站监控面板" />
|
||||
<title>萌芽Ping - 网站监控面板</title>
|
||||
<link rel="apple-touch-icon" href="/logo.png" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
3492
mengyaping-frontend/package-lock.json
generated
Normal file
3492
mengyaping-frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
mengyaping-frontend/package.json
Normal file
31
mengyaping-frontend/package.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "mengyaping-frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"autoprefixer": "^10.4.23",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^4.1.18",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
BIN
mengyaping-frontend/public/favicon.ico
Normal file
BIN
mengyaping-frontend/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
mengyaping-frontend/public/logo.png
Normal file
BIN
mengyaping-frontend/public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
42
mengyaping-frontend/src/App.css
Normal file
42
mengyaping-frontend/src/App.css
Normal file
@@ -0,0 +1,42 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
7
mengyaping-frontend/src/App.jsx
Normal file
7
mengyaping-frontend/src/App.jsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import Dashboard from './pages/Dashboard'
|
||||
|
||||
function App() {
|
||||
return <Dashboard />
|
||||
}
|
||||
|
||||
export default App
|
||||
145
mengyaping-frontend/src/components/StatsCard.jsx
Normal file
145
mengyaping-frontend/src/components/StatsCard.jsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { formatUptime, getUptimeColor } from '../hooks/useMonitor';
|
||||
|
||||
// 统计概览卡片
|
||||
export default function StatsCard({ websites }) {
|
||||
// 计算统计数据
|
||||
const stats = {
|
||||
total: websites?.length || 0,
|
||||
online: 0,
|
||||
offline: 0,
|
||||
avgUptime24h: 0,
|
||||
avgUptime7d: 0,
|
||||
avgLatency: 0,
|
||||
};
|
||||
|
||||
if (websites && websites.length > 0) {
|
||||
let totalUptime24h = 0;
|
||||
let totalUptime7d = 0;
|
||||
let totalLatency = 0;
|
||||
let latencyCount = 0;
|
||||
|
||||
websites.forEach(site => {
|
||||
// 检查所有URL的状态
|
||||
const hasOnlineUrl = site.url_statuses?.some(us => us.current_state?.is_up);
|
||||
if (hasOnlineUrl) {
|
||||
stats.online++;
|
||||
} else {
|
||||
stats.offline++;
|
||||
}
|
||||
|
||||
totalUptime24h += site.uptime_24h || 0;
|
||||
totalUptime7d += site.uptime_7d || 0;
|
||||
|
||||
site.url_statuses?.forEach(us => {
|
||||
if (us.current_state?.latency) {
|
||||
totalLatency += us.current_state.latency;
|
||||
latencyCount++;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
stats.avgUptime24h = totalUptime24h / stats.total;
|
||||
stats.avgUptime7d = totalUptime7d / stats.total;
|
||||
stats.avgLatency = latencyCount > 0 ? Math.round(totalLatency / latencyCount) : 0;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{/* 监控网站数 */}
|
||||
<div className="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">监控网站</p>
|
||||
<p className="text-2xl font-bold text-gray-800 mt-1">{stats.total}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center mt-3 text-xs">
|
||||
<span className="text-green-500 flex items-center">
|
||||
<span className="w-2 h-2 rounded-full bg-green-500 mr-1"></span>
|
||||
{stats.online} 在线
|
||||
</span>
|
||||
<span className="text-gray-300 mx-2">|</span>
|
||||
<span className="text-red-500 flex items-center">
|
||||
<span className="w-2 h-2 rounded-full bg-red-500 mr-1"></span>
|
||||
{stats.offline} 离线
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 24小时可用率 */}
|
||||
<div className="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">24h 可用率</p>
|
||||
<p className={`text-2xl font-bold mt-1 ${getUptimeColor(stats.avgUptime24h)}`}>
|
||||
{formatUptime(stats.avgUptime24h)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-50 to-emerald-100 flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-emerald-400 to-green-500 rounded-full"
|
||||
style={{ width: `${Math.min(stats.avgUptime24h, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 7天可用率 */}
|
||||
<div className="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">7d 可用率</p>
|
||||
<p className={`text-2xl font-bold mt-1 ${getUptimeColor(stats.avgUptime7d)}`}>
|
||||
{formatUptime(stats.avgUptime7d)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-green-400 to-teal-500 rounded-full"
|
||||
style={{ width: `${Math.min(stats.avgUptime7d, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 平均延迟 */}
|
||||
<div className="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">平均延迟</p>
|
||||
<p className="text-2xl font-bold text-gray-800 mt-1">
|
||||
{stats.avgLatency}
|
||||
<span className="text-sm font-normal text-gray-500 ml-1">ms</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-50 to-purple-100 flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center mt-3 text-xs text-gray-500">
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
每5分钟检测一次
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
212
mengyaping-frontend/src/components/UptimeChart.jsx
Normal file
212
mengyaping-frontend/src/components/UptimeChart.jsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import { useMemo } from 'react';
|
||||
|
||||
// 简易折线图组件
|
||||
export default function UptimeChart({ data, height = 120, showLabels = true }) {
|
||||
// 处理数据
|
||||
const chartData = useMemo(() => {
|
||||
if (!data || data.length === 0) {
|
||||
// 生成模拟数据点
|
||||
return Array(24).fill(null).map((_, i) => ({
|
||||
hour: i,
|
||||
uptime: null,
|
||||
avgLatency: 0,
|
||||
}));
|
||||
}
|
||||
|
||||
// 按时间排序
|
||||
const sorted = [...data].sort((a, b) =>
|
||||
new Date(a.hour).getTime() - new Date(b.hour).getTime()
|
||||
);
|
||||
|
||||
return sorted.map(item => ({
|
||||
hour: new Date(item.hour).getHours(),
|
||||
uptime: item.uptime,
|
||||
avgLatency: item.avg_latency,
|
||||
}));
|
||||
}, [data]);
|
||||
|
||||
// 计算图表尺寸
|
||||
const padding = { top: 20, right: 20, bottom: showLabels ? 30 : 10, left: showLabels ? 40 : 10 };
|
||||
const width = 400;
|
||||
const chartWidth = width - padding.left - padding.right;
|
||||
const chartHeight = height - padding.top - padding.bottom;
|
||||
|
||||
// 生成路径
|
||||
const pathData = useMemo(() => {
|
||||
const validPoints = chartData.filter(d => d.uptime !== null);
|
||||
if (validPoints.length === 0) return '';
|
||||
|
||||
const xStep = chartWidth / (chartData.length - 1 || 1);
|
||||
|
||||
let path = '';
|
||||
let lastValidIndex = -1;
|
||||
|
||||
chartData.forEach((d, i) => {
|
||||
if (d.uptime !== null) {
|
||||
const x = i * xStep;
|
||||
const y = chartHeight - (d.uptime / 100 * chartHeight);
|
||||
|
||||
if (lastValidIndex === -1) {
|
||||
path += `M ${x} ${y}`;
|
||||
} else {
|
||||
path += ` L ${x} ${y}`;
|
||||
}
|
||||
lastValidIndex = i;
|
||||
}
|
||||
});
|
||||
|
||||
return path;
|
||||
}, [chartData, chartWidth, chartHeight]);
|
||||
|
||||
// 生成填充区域
|
||||
const areaPath = useMemo(() => {
|
||||
if (!pathData) return '';
|
||||
|
||||
const validPoints = chartData.filter(d => d.uptime !== null);
|
||||
if (validPoints.length === 0) return '';
|
||||
|
||||
const xStep = chartWidth / (chartData.length - 1 || 1);
|
||||
const firstValidIndex = chartData.findIndex(d => d.uptime !== null);
|
||||
const lastValidIndex = chartData.length - 1 - [...chartData].reverse().findIndex(d => d.uptime !== null);
|
||||
|
||||
const startX = firstValidIndex * xStep;
|
||||
const endX = lastValidIndex * xStep;
|
||||
|
||||
return `${pathData} L ${endX} ${chartHeight} L ${startX} ${chartHeight} Z`;
|
||||
}, [pathData, chartData, chartWidth, chartHeight]);
|
||||
|
||||
// 获取颜色
|
||||
const getColor = (uptime) => {
|
||||
if (uptime >= 99) return '#10b981'; // emerald-500
|
||||
if (uptime >= 95) return '#34d399'; // emerald-400
|
||||
if (uptime >= 90) return '#fbbf24'; // amber-400
|
||||
return '#ef4444'; // red-500
|
||||
};
|
||||
|
||||
// 计算平均可用率
|
||||
const avgUptime = useMemo(() => {
|
||||
const validPoints = chartData.filter(d => d.uptime !== null);
|
||||
if (validPoints.length === 0) return null;
|
||||
return validPoints.reduce((sum, d) => sum + d.uptime, 0) / validPoints.length;
|
||||
}, [chartData]);
|
||||
|
||||
const color = avgUptime !== null ? getColor(avgUptime) : '#d1d5db';
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<svg
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
className="w-full h-auto"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="uptimeGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stopColor={color} stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor={color} stopOpacity="0.05" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g transform={`translate(${padding.left}, ${padding.top})`}>
|
||||
{/* 网格线 */}
|
||||
{[0, 25, 50, 75, 100].map(v => (
|
||||
<g key={v}>
|
||||
<line
|
||||
x1={0}
|
||||
y1={chartHeight - (v / 100 * chartHeight)}
|
||||
x2={chartWidth}
|
||||
y2={chartHeight - (v / 100 * chartHeight)}
|
||||
stroke="#e5e7eb"
|
||||
strokeDasharray="4 2"
|
||||
/>
|
||||
{showLabels && (
|
||||
<text
|
||||
x={-8}
|
||||
y={chartHeight - (v / 100 * chartHeight) + 4}
|
||||
fill="#9ca3af"
|
||||
fontSize="10"
|
||||
textAnchor="end"
|
||||
>
|
||||
{v}%
|
||||
</text>
|
||||
)}
|
||||
</g>
|
||||
))}
|
||||
|
||||
{/* 填充区域 */}
|
||||
{areaPath && (
|
||||
<path
|
||||
d={areaPath}
|
||||
fill="url(#uptimeGradient)"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 折线 */}
|
||||
{pathData && (
|
||||
<path
|
||||
d={pathData}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 数据点 */}
|
||||
{chartData.map((d, i) => {
|
||||
if (d.uptime === null) return null;
|
||||
const xStep = chartWidth / (chartData.length - 1 || 1);
|
||||
const x = i * xStep;
|
||||
const y = chartHeight - (d.uptime / 100 * chartHeight);
|
||||
return (
|
||||
<circle
|
||||
key={i}
|
||||
cx={x}
|
||||
cy={y}
|
||||
r="3"
|
||||
fill="white"
|
||||
stroke={getColor(d.uptime)}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* X轴时间标签 */}
|
||||
{showLabels && chartData.length > 0 && (
|
||||
<>
|
||||
{[0, Math.floor(chartData.length / 2), chartData.length - 1].map(i => {
|
||||
if (i >= chartData.length) return null;
|
||||
const xStep = chartWidth / (chartData.length - 1 || 1);
|
||||
return (
|
||||
<text
|
||||
key={i}
|
||||
x={i * xStep}
|
||||
y={chartHeight + 20}
|
||||
fill="#9ca3af"
|
||||
fontSize="10"
|
||||
textAnchor="middle"
|
||||
>
|
||||
{chartData[i]?.hour || 0}:00
|
||||
</text>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* 无数据提示 */}
|
||||
{!pathData && (
|
||||
<text
|
||||
x={width / 2}
|
||||
y={height / 2}
|
||||
fill="#9ca3af"
|
||||
fontSize="12"
|
||||
textAnchor="middle"
|
||||
>
|
||||
暂无数据
|
||||
</text>
|
||||
)}
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
207
mengyaping-frontend/src/components/WebsiteCard.jsx
Normal file
207
mengyaping-frontend/src/components/WebsiteCard.jsx
Normal file
@@ -0,0 +1,207 @@
|
||||
import { useState } from 'react';
|
||||
import { formatLatency, formatUptime, formatTime, getStatusColor, getUptimeColor, getLatencyColor } from '../hooks/useMonitor';
|
||||
|
||||
// 网站状态卡片组件
|
||||
export default function WebsiteCard({ website, onRefresh, onEdit, onDelete }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
// 获取第一个URL的状态作为主状态
|
||||
const primaryStatus = website.url_statuses?.[0];
|
||||
const isUp = primaryStatus?.current_state?.is_up ?? false;
|
||||
const statusCode = primaryStatus?.current_state?.status_code ?? 0;
|
||||
const latency = primaryStatus?.current_state?.latency ?? 0;
|
||||
const primaryUrl = website.website?.urls?.[0]?.url || website.url_statuses?.[0]?.url_info?.url;
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow">
|
||||
{/* 卡片头部 */}
|
||||
<div
|
||||
className="p-3 cursor-pointer"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
>
|
||||
{/* 第一行：图标、名称、状态 */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center space-x-2 min-w-0 flex-1">
|
||||
{/* Favicon */}
|
||||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-green-50 to-emerald-100 flex items-center justify-center overflow-hidden flex-shrink-0">
|
||||
{website.website?.favicon ? (
|
||||
<img
|
||||
src={website.website.favicon}
|
||||
alt=""
|
||||
className="w-7 h-7 object-contain drop-shadow"
|
||||
onError={(e) => {
|
||||
e.target.style.display = 'none';
|
||||
e.target.nextSibling.style.display = 'flex';
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<span
|
||||
className={`text-base font-bold text-emerald-600 ${website.website?.favicon ? 'hidden' : ''}`}
|
||||
style={{ display: website.website?.favicon ? 'none' : 'flex' }}
|
||||
>
|
||||
{website.website?.name?.[0] || '?'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 网站名称 */}
|
||||
<h3 className="font-semibold text-gray-800 truncate">
|
||||
{website.website?.name || '未知网站'}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* 展开箭头 */}
|
||||
<svg
|
||||
className={`w-4 h-4 text-gray-400 transform transition-transform flex-shrink-0 ${expanded ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* 第二行：状态、延迟、访问按钮 */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* 状态徽章 */}
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${getStatusColor(isUp, statusCode)}`}>
|
||||
{isUp ? `${statusCode}` : '离线'}
|
||||
</span>
|
||||
|
||||
{/* 延迟 */}
|
||||
<span className={`text-xs font-medium ${getLatencyColor(latency)}`}>
|
||||
{formatLatency(latency)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 访问按钮 */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (primaryUrl) {
|
||||
window.open(primaryUrl, '_blank', 'noopener,noreferrer');
|
||||
}
|
||||
}}
|
||||
disabled={!primaryUrl}
|
||||
className={`flex items-center space-x-1 px-2.5 py-1 text-xs font-medium rounded-full transition-all flex-shrink-0 ${
|
||||
primaryUrl
|
||||
? 'text-white bg-gradient-to-r from-emerald-500 to-green-500 hover:from-emerald-600 hover:to-green-600 shadow-sm hover:shadow'
|
||||
: 'text-gray-400 bg-gray-100 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
<span>访问</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 网站描述 */}
|
||||
<p className="text-xs text-gray-500 truncate mb-2">
|
||||
{website.website?.title || website.website?.urls?.[0]?.url || '-'}
|
||||
</p>
|
||||
|
||||
{/* 可用率条 */}
|
||||
<div className="mt-3">
|
||||
<div className="flex justify-between text-xs text-gray-500 mb-1">
|
||||
<span>24h可用率</span>
|
||||
<span className={getUptimeColor(website.uptime_24h || 0)}>
|
||||
{formatUptime(website.uptime_24h)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-emerald-400 to-green-500 rounded-full transition-all"
|
||||
style={{ width: `${Math.min(website.uptime_24h || 0, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 展开详情 */}
|
||||
{expanded && (
|
||||
<div className="border-t border-gray-100 bg-gray-50 p-4">
|
||||
{/* URL列表 */}
|
||||
<div className="space-y-3">
|
||||
{website.url_statuses?.map((urlStatus, index) => (
|
||||
<div
|
||||
key={urlStatus.url_info?.id || index}
|
||||
className="bg-white rounded-lg p-3 border border-gray-100"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm text-gray-600 truncate flex-1 mr-2">
|
||||
{urlStatus.url_info?.url}
|
||||
</span>
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${
|
||||
getStatusColor(urlStatus.current_state?.is_up, urlStatus.current_state?.status_code)
|
||||
}`}>
|
||||
{urlStatus.current_state?.is_up ? urlStatus.current_state?.status_code : '离线'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 text-xs">
|
||||
<div>
|
||||
<span className="text-gray-400">延迟</span>
|
||||
<p className={`font-medium ${getLatencyColor(urlStatus.current_state?.latency)}`}>
|
||||
{formatLatency(urlStatus.current_state?.latency)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">24h</span>
|
||||
<p className={`font-medium ${getUptimeColor(urlStatus.uptime_24h)}`}>
|
||||
{formatUptime(urlStatus.uptime_24h)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">7d</span>
|
||||
<p className={`font-medium ${getUptimeColor(urlStatus.uptime_7d)}`}>
|
||||
{formatUptime(urlStatus.uptime_7d)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex justify-end space-x-2 mt-4">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRefresh?.(website.website?.id);
|
||||
}}
|
||||
className="px-3 py-1.5 text-xs font-medium text-emerald-600 bg-emerald-50 rounded-lg hover:bg-emerald-100 transition-colors"
|
||||
>
|
||||
立即检测
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEdit?.(website);
|
||||
}}
|
||||
className="px-3 py-1.5 text-xs font-medium text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
编辑
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (confirm('确定要删除这个网站吗？')) {
|
||||
onDelete?.(website.website?.id);
|
||||
}
|
||||
}}
|
||||
className="px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition-colors"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 最后检测时间 */}
|
||||
<div className="text-xs text-gray-400 text-right mt-2">
|
||||
最后检测: {formatTime(website.last_checked)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
223
mengyaping-frontend/src/components/WebsiteModal.jsx
Normal file
223
mengyaping-frontend/src/components/WebsiteModal.jsx
Normal file
@@ -0,0 +1,223 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getGroups, createWebsite, updateWebsite } from '../services/api';
|
||||
|
||||
export default function WebsiteModal({ isOpen, onClose, onSuccess, editData }) {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
group: 'normal',
|
||||
urls: [''],
|
||||
});
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadGroups();
|
||||
if (editData) {
|
||||
setFormData({
|
||||
name: editData.website?.name || '',
|
||||
group: editData.website?.group || 'normal',
|
||||
urls: editData.website?.urls?.map(u => u.url) || [''],
|
||||
});
|
||||
} else {
|
||||
setFormData({ name: '', group: 'normal', urls: [''] });
|
||||
}
|
||||
setError('');
|
||||
}
|
||||
}, [isOpen, editData]);
|
||||
|
||||
const loadGroups = async () => {
|
||||
try {
|
||||
const data = await getGroups();
|
||||
setGroups(data || []);
|
||||
} catch (err) {
|
||||
console.error('加载分组失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddUrl = () => {
|
||||
setFormData({ ...formData, urls: [...formData.urls, ''] });
|
||||
};
|
||||
|
||||
const handleRemoveUrl = (index) => {
|
||||
if (formData.urls.length > 1) {
|
||||
const newUrls = formData.urls.filter((_, i) => i !== index);
|
||||
setFormData({ ...formData, urls: newUrls });
|
||||
}
|
||||
};
|
||||
|
||||
const handleUrlChange = (index, value) => {
|
||||
const newUrls = [...formData.urls];
|
||||
newUrls[index] = value;
|
||||
setFormData({ ...formData, urls: newUrls });
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
// 验证
|
||||
if (!formData.name.trim()) {
|
||||
setError('请输入网站名称');
|
||||
return;
|
||||
}
|
||||
|
||||
const validUrls = formData.urls.filter(url => url.trim());
|
||||
if (validUrls.length === 0) {
|
||||
setError('请至少输入一个网站地址');
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证URL格式
|
||||
for (const url of validUrls) {
|
||||
try {
|
||||
new URL(url);
|
||||
} catch {
|
||||
setError(`无效的URL: ${url}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = {
|
||||
name: formData.name.trim(),
|
||||
group: formData.group,
|
||||
urls: validUrls,
|
||||
};
|
||||
|
||||
if (editData) {
|
||||
await updateWebsite(editData.website.id, data);
|
||||
} else {
|
||||
await createWebsite(data);
|
||||
}
|
||||
|
||||
onSuccess?.();
|
||||
onClose();
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-2xl shadow-xl w-full max-w-md max-h-[90vh] overflow-hidden">
|
||||
{/* 标题 */}
|
||||
<div className="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-emerald-50 to-green-50">
|
||||
<h2 className="text-lg font-semibold text-gray-800">
|
||||
{editData ? '编辑网站' : '添加监控网站'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* 表单 */}
|
||||
<form onSubmit={handleSubmit} className="p-6 overflow-y-auto max-h-[calc(90vh-140px)]">
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-red-50 border border-red-100 rounded-lg text-sm text-red-600">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 网站名称 */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
网站名称 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="例如：我的博客"
|
||||
className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 所属分组 */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
所属分组
|
||||
</label>
|
||||
<select
|
||||
value={formData.group}
|
||||
onChange={(e) => setFormData({ ...formData, group: e.target.value })}
|
||||
className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all bg-white"
|
||||
>
|
||||
{groups.map(group => (
|
||||
<option key={group.id} value={group.id}>{group.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* 网站地址列表 */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
网站地址 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<p className="text-xs text-gray-500 mb-2">
|
||||
一个网站可以有多个访问地址，将分别监控
|
||||
</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
{formData.urls.map((url, index) => (
|
||||
<div key={index} className="flex space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
value={url}
|
||||
onChange={(e) => handleUrlChange(index, e.target.value)}
|
||||
placeholder="https://example.com"
|
||||
className="flex-1 px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all"
|
||||
/>
|
||||
{formData.urls.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveUrl(index)}
|
||||
className="px-3 py-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAddUrl}
|
||||
className="mt-2 text-sm text-emerald-600 hover:text-emerald-700 flex items-center"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
添加更多地址
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* 按钮 */}
|
||||
<div className="px-6 py-4 border-t border-gray-100 bg-gray-50 flex justify-end space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-emerald-500 to-green-500 rounded-lg hover:from-emerald-600 hover:to-green-600 transition-all disabled:opacity-50"
|
||||
>
|
||||
{loading ? '处理中...' : (editData ? '保存' : '添加')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
83
mengyaping-frontend/src/hooks/useMonitor.js
Normal file
83
mengyaping-frontend/src/hooks/useMonitor.js
Normal file
@@ -0,0 +1,83 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
|
||||
// 自动刷新数据Hook
|
||||
export function useAutoRefresh(fetchFn, interval = 30000) {
|
||||
const [data, setData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const result = await fetchFn();
|
||||
setData(result);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [fetchFn]);
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
|
||||
const timer = setInterval(refresh, interval);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [refresh, interval]);
|
||||
|
||||
return { data, loading, error, refresh };
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
export function formatTime(dateString) {
|
||||
if (!dateString) return '-';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
// 格式化延迟
|
||||
export function formatLatency(ms) {
|
||||
if (ms === undefined || ms === null) return '-';
|
||||
if (ms < 1000) return `${ms}ms`;
|
||||
return `${(ms / 1000).toFixed(2)}s`;
|
||||
}
|
||||
|
||||
// 格式化可用率
|
||||
export function formatUptime(uptime) {
|
||||
if (uptime === undefined || uptime === null) return '-';
|
||||
return `${uptime.toFixed(2)}%`;
|
||||
}
|
||||
|
||||
// 获取状态颜色类名
|
||||
export function getStatusColor(isUp, statusCode) {
|
||||
if (!isUp) return 'text-red-500 bg-red-100';
|
||||
if (statusCode >= 200 && statusCode < 300) return 'text-green-500 bg-green-100';
|
||||
if (statusCode >= 300 && statusCode < 400) return 'text-yellow-500 bg-yellow-100';
|
||||
return 'text-red-500 bg-red-100';
|
||||
}
|
||||
|
||||
// 获取可用率颜色
|
||||
export function getUptimeColor(uptime) {
|
||||
if (uptime >= 99) return 'text-green-500';
|
||||
if (uptime >= 95) return 'text-green-400';
|
||||
if (uptime >= 90) return 'text-yellow-500';
|
||||
if (uptime >= 80) return 'text-orange-500';
|
||||
return 'text-red-500';
|
||||
}
|
||||
|
||||
// 获取延迟颜色
|
||||
export function getLatencyColor(ms) {
|
||||
if (ms < 200) return 'text-green-500';
|
||||
if (ms < 500) return 'text-green-400';
|
||||
if (ms < 1000) return 'text-yellow-500';
|
||||
if (ms < 2000) return 'text-orange-500';
|
||||
return 'text-red-500';
|
||||
}
|
||||
68
mengyaping-frontend/src/index.css
Normal file
68
mengyaping-frontend/src/index.css
Normal file
@@ -0,0 +1,68 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
color-scheme: light;
|
||||
color: #374151;
|
||||
background-color: #f0fdf4;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 自定义滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #10b981;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 640px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
10
mengyaping-frontend/src/main.jsx
Normal file
10
mengyaping-frontend/src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
274
mengyaping-frontend/src/pages/Dashboard.jsx
Normal file
274
mengyaping-frontend/src/pages/Dashboard.jsx
Normal file
@@ -0,0 +1,274 @@
|
||||
import { useState, useCallback, useMemo } from 'react';
|
||||
import WebsiteCard from '../components/WebsiteCard';
|
||||
import WebsiteModal from '../components/WebsiteModal';
|
||||
import StatsCard from '../components/StatsCard';
|
||||
import { useAutoRefresh } from '../hooks/useMonitor';
|
||||
import { getWebsites, deleteWebsite, checkWebsiteNow, getGroups } from '../services/api';
|
||||
|
||||
export default function Dashboard() {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [editData, setEditData] = useState(null);
|
||||
const [selectedGroup, setSelectedGroup] = useState('all');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
// 获取网站数据
|
||||
const fetchData = useCallback(() => getWebsites(), []);
|
||||
const { data: websites, loading, error, refresh } = useAutoRefresh(fetchData, 30000);
|
||||
|
||||
// 获取分组数据
|
||||
const fetchGroups = useCallback(() => getGroups(), []);
|
||||
const { data: groups } = useAutoRefresh(fetchGroups, 60000);
|
||||
|
||||
// 处理添加网站
|
||||
const handleAdd = () => {
|
||||
setEditData(null);
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
// 处理编辑网站
|
||||
const handleEdit = (website) => {
|
||||
setEditData(website);
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
|
||||
// 处理删除网站
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await deleteWebsite(id);
|
||||
refresh();
|
||||
} catch (err) {
|
||||
alert('删除失败: ' + err.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理立即检测
|
||||
const handleRefresh = async (id) => {
|
||||
try {
|
||||
await checkWebsiteNow(id);
|
||||
setTimeout(refresh, 2000); // 2秒后刷新数据
|
||||
} catch (err) {
|
||||
alert('检测失败: ' + err.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 按分组和搜索过滤网站
|
||||
const filteredWebsites = useMemo(() => {
|
||||
if (!websites) return [];
|
||||
|
||||
return websites.filter(site => {
|
||||
// 分组过滤
|
||||
if (selectedGroup !== 'all' && site.website?.group !== selectedGroup) {
|
||||
return false;
|
||||
}
|
||||
// 搜索过滤
|
||||
if (searchTerm) {
|
||||
const term = searchTerm.toLowerCase();
|
||||
return (
|
||||
site.website?.name?.toLowerCase().includes(term) ||
|
||||
site.website?.title?.toLowerCase().includes(term) ||
|
||||
site.website?.urls?.some(u => u.url.toLowerCase().includes(term))
|
||||
);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [websites, selectedGroup, searchTerm]);
|
||||
|
||||
// 按分组分类网站
|
||||
const groupedWebsites = useMemo(() => {
|
||||
const grouped = {};
|
||||
|
||||
filteredWebsites.forEach(site => {
|
||||
const groupId = site.website?.group || 'normal';
|
||||
if (!grouped[groupId]) {
|
||||
grouped[groupId] = [];
|
||||
}
|
||||
grouped[groupId].push(site);
|
||||
});
|
||||
|
||||
return grouped;
|
||||
}, [filteredWebsites]);
|
||||
|
||||
// 获取分组名称
|
||||
const getGroupName = (groupId) => {
|
||||
const group = groups?.find(g => g.id === groupId);
|
||||
return group?.name || groupId;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-emerald-50 via-green-50 to-teal-50">
|
||||
{/* 顶部导航 */}
|
||||
<header className="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-40">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-xl overflow-hidden shadow-lg shadow-emerald-200">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="萌芽Ping"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold bg-gradient-to-r from-emerald-600 to-green-600 bg-clip-text text-transparent">
|
||||
萌芽Ping
|
||||
</h1>
|
||||
<p className="text-xs text-gray-500">网站监控面板</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 添加按钮 */}
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="flex items-center px-4 py-2 bg-gradient-to-r from-emerald-500 to-green-500 text-white rounded-lg hover:from-emerald-600 hover:to-green-600 transition-all shadow-md shadow-emerald-200"
|
||||
>
|
||||
<svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
<span className="hidden sm:inline">添加监控</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<main className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
{/* 统计概览 */}
|
||||
<section className="mb-6">
|
||||
<StatsCard websites={websites} />
|
||||
</section>
|
||||
|
||||
{/* 过滤和搜索 */}
|
||||
<section className="mb-6">
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
{/* 分组选择 */}
|
||||
<div className="flex items-center space-x-2 overflow-x-auto pb-2 sm:pb-0">
|
||||
<button
|
||||
onClick={() => setSelectedGroup('all')}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all ${
|
||||
selectedGroup === 'all'
|
||||
? 'bg-emerald-500 text-white shadow-md shadow-emerald-200'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
{groups?.map(group => (
|
||||
<button
|
||||
key={group.id}
|
||||
onClick={() => setSelectedGroup(group.id)}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all ${
|
||||
selectedGroup === group.id
|
||||
? 'bg-emerald-500 text-white shadow-md shadow-emerald-200'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{group.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 搜索框 */}
|
||||
<div className="flex-1 sm:max-w-xs">
|
||||
<div className="relative">
|
||||
<svg className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索网站..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 网站列表 */}
|
||||
<section>
|
||||
{loading && !websites ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-emerald-500"></div>
|
||||
<span className="ml-3 text-gray-500">加载中...</span>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 flex items-center justify-center">
|
||||
<svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-500 mb-4">加载失败: {error}</p>
|
||||
<button
|
||||
onClick={refresh}
|
||||
className="px-4 py-2 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 transition-colors"
|
||||
>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
) : filteredWebsites.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
|
||||
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-500 mb-4">
|
||||
{searchTerm ? '没有找到匹配的网站' : '还没有添加任何监控网站'}
|
||||
</p>
|
||||
{!searchTerm && (
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="px-4 py-2 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 transition-colors"
|
||||
>
|
||||
添加第一个网站
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{Object.keys(groupedWebsites).map(groupId => (
|
||||
<div key={groupId}>
|
||||
{selectedGroup === 'all' && (
|
||||
<h2 className="text-sm font-medium text-gray-600 mb-3 flex items-center">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
||||
{getGroupName(groupId)}
|
||||
<span className="ml-2 text-gray-400">({groupedWebsites[groupId].length})</span>
|
||||
</h2>
|
||||
)}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4">
|
||||
{groupedWebsites[groupId].map(website => (
|
||||
<WebsiteCard
|
||||
key={website.website?.id}
|
||||
website={website}
|
||||
onRefresh={handleRefresh}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* 底部信息 */}
|
||||
<footer className="py-6 text-center text-sm text-gray-500">
|
||||
<p>萌芽Ping © 2026 </p>
|
||||
</footer>
|
||||
|
||||
{/* 添加/编辑弹窗 */}
|
||||
<WebsiteModal
|
||||
isOpen={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
onSuccess={refresh}
|
||||
editData={editData}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
77
mengyaping-frontend/src/services/api.js
Normal file
77
mengyaping-frontend/src/services/api.js
Normal file
@@ -0,0 +1,77 @@
|
||||
// API服务
|
||||
// 根据环境变量判断使用哪个 API 地址
|
||||
const API_BASE = import.meta.env.PROD
|
||||
? 'https://ping.api.shumengya.top/api' // 生产环境
|
||||
: 'http://localhost:8080/api'; // 开发环境
|
||||
|
||||
// 通用请求方法
|
||||
async function request(url, options = {}) {
|
||||
const response = await fetch(`${API_BASE}${url}`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...options.headers,
|
||||
},
|
||||
...options,
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.code !== 0) {
|
||||
throw new Error(data.message || '请求失败');
|
||||
}
|
||||
|
||||
return data.data;
|
||||
}
|
||||
|
||||
// 获取所有网站状态
|
||||
export async function getWebsites() {
|
||||
return request('/websites');
|
||||
}
|
||||
|
||||
// 获取单个网站状态
|
||||
export async function getWebsite(id) {
|
||||
return request(`/websites/${id}`);
|
||||
}
|
||||
|
||||
// 创建网站
|
||||
export async function createWebsite(data) {
|
||||
return request('/websites', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
// 更新网站
|
||||
export async function updateWebsite(id, data) {
|
||||
return request(`/websites/${id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
// 删除网站
|
||||
export async function deleteWebsite(id) {
|
||||
return request(`/websites/${id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
}
|
||||
|
||||
// 立即检测网站
|
||||
export async function checkWebsiteNow(id) {
|
||||
return request(`/websites/${id}/check`, {
|
||||
method: 'POST',
|
||||
});
|
||||
}
|
||||
|
||||
// 获取所有分组
|
||||
export async function getGroups() {
|
||||
return request('/groups');
|
||||
}
|
||||
|
||||
// 添加分组
|
||||
export async function addGroup(name) {
|
||||
return request('/groups', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
}
|
||||
8
mengyaping-frontend/tailwind.config.js
Normal file
8
mengyaping-frontend/tailwind.config.js
Normal file
@@ -0,0 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
8
mengyaping-frontend/vite.config.js
Normal file
8
mengyaping-frontend/vite.config.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
})
|
||||
Reference in New Issue
Block a user