{topSlot}
: null}
+
{/* 统计概览 */}
{searchTerm ? '没有找到匹配的网站' : '还没有添加任何监控网站'}
- {!searchTerm && ( + {!searchTerm && !readOnly && ( )} + {!searchTerm && readOnly && ( +站点由管理员在「管理后台」维护
+ )}
- {primaryUrl ? (
+ {cardIconSrc ? (
}`})
{
@@ -93,8 +101,8 @@ export default function WebsiteCard({ website, onRefresh, onEdit, onDelete }) {
/>
) : null}
{website.website?.name?.[0] || '?'}
@@ -172,7 +180,7 @@ export default function WebsiteCard({ website, onRefresh, onEdit, onDelete }) {
{/* IP 地址（IPv4 / IPv6 分开显示） */}
- {website.website?.ip_addresses?.length > 0 && (() => {
+ {!isIntranet && website.website?.ip_addresses?.length > 0 && (() => {
const ipv4 = website.website.ip_addresses.filter(ip => !ip.includes(':'));
const ipv6 = website.website.ip_addresses.filter(ip => ip.includes(':'));
return (ipv4.length > 0 || ipv6.length > 0) && (
@@ -222,42 +230,47 @@ export default function WebsiteCard({ website, onRefresh, onEdit, onDelete }) {
))}
+ {/* 操作按钮（仅管理后台） */}
+
)}
diff --git a/mengyaping-frontend/src/constants/events.js b/mengyaping-frontend/src/constants/events.js
new file mode 100644
index 0000000..e256d81
--- /dev/null
+++ b/mengyaping-frontend/src/constants/events.js
@@ -0,0 +1,2 @@
+/** 分类增删改后广播，便于监控页立即刷新分组与站点 */
+export const GROUPS_CHANGED_EVENT = 'mengyaping:groups-changed';
diff --git a/mengyaping-frontend/src/main.jsx b/mengyaping-frontend/src/main.jsx
index fba4204..4233fff 100644
--- a/mengyaping-frontend/src/main.jsx
+++ b/mengyaping-frontend/src/main.jsx
@@ -1,5 +1,6 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
import './index.css'
import App from './App.jsx'
@@ -13,6 +14,8 @@ if (import.meta.env.PROD && 'serviceWorker' in navigator) {
createRoot(document.getElementById('root')).render(
{formatTime(website.last_checked)}
-
-
-
-
-
+ {!readOnly && (
+
+
+
+
+
+ )}
+
+
+ {loading ? (
+
+
+ 全局检测周期
++ 所有站点共用同一轮询间隔，保存后立即调整后台定时器（仍会先跑完上一轮逻辑）。 +
+
+
+
+ 公开页
+
+
+ 加载中…
+ ) : ( + + )} + {err ?{err}
: null} +
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ 
+
+
+
+
+ 萌芽Ping · 管理后台
+请输入与服务端 ADMIN_TOKEN 一致的口令
++ + ← 返回公开页 + +
+
+
+
+ }
+ />
+ );
+}
diff --git a/mengyaping-frontend/src/pages/Dashboard.jsx b/mengyaping-frontend/src/pages/Dashboard.jsx
index 29cef3c..142321d 100644
--- a/mengyaping-frontend/src/pages/Dashboard.jsx
+++ b/mengyaping-frontend/src/pages/Dashboard.jsx
@@ -1,23 +1,107 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
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';
+import {
+ getWebsites,
+ deleteWebsite,
+ checkWebsiteNow,
+ getGroups,
+ getMonitorSettings,
+ verifyAdminToken,
+ setStoredAdminToken,
+} from '../services/api';
+import { GROUPS_CHANGED_EVENT } from '../constants/events';
+
+const LOGO_TAP_WINDOW_MS = 2000;
+const LOGO_TAPS_TO_OPEN = 5;
+
+export default function Dashboard({ readOnly = false, topSlot = null }) {
+ const navigate = useNavigate();
+ const logoTapCountRef = useRef(0);
+ const logoTapResetTimerRef = useRef(null);
-export default function Dashboard() {
const [modalOpen, setModalOpen] = useState(false);
const [editData, setEditData] = useState(null);
const [selectedGroup, setSelectedGroup] = useState('all');
const [searchTerm, setSearchTerm] = useState('');
+ const [adminGateOpen, setAdminGateOpen] = useState(false);
+ const [adminGateToken, setAdminGateToken] = useState('');
+ const [adminGateErr, setAdminGateErr] = useState('');
+ const [adminGateBusy, setAdminGateBusy] = useState(false);
+
+ useEffect(() => {
+ return () => {
+ const t = logoTapResetTimerRef.current;
+ if (t != null) {
+ clearTimeout(t);
+ }
+ };
+ }, []);
+
+ const handleLogoTap = () => {
+ if (!readOnly) return;
+ if (logoTapResetTimerRef.current != null) {
+ clearTimeout(logoTapResetTimerRef.current);
+ }
+ logoTapCountRef.current += 1;
+ if (logoTapCountRef.current >= LOGO_TAPS_TO_OPEN) {
+ logoTapCountRef.current = 0;
+ logoTapResetTimerRef.current = null;
+ setAdminGateOpen(true);
+ setAdminGateErr('');
+ setAdminGateToken('');
+ return;
+ }
+ logoTapResetTimerRef.current = setTimeout(() => {
+ logoTapCountRef.current = 0;
+ logoTapResetTimerRef.current = null;
+ }, LOGO_TAP_WINDOW_MS);
+ };
+
+ const handleAdminGateSubmit = async (e) => {
+ e.preventDefault();
+ const t = adminGateToken.trim();
+ if (!t) {
+ setAdminGateErr('请输入令牌');
+ return;
+ }
+ setAdminGateBusy(true);
+ setAdminGateErr('');
+ try {
+ await verifyAdminToken(t);
+ setStoredAdminToken(t);
+ setAdminGateOpen(false);
+ navigate('/admin');
+ } catch (err) {
+ setAdminGateErr(err.message || '验证失败');
+ } finally {
+ setAdminGateBusy(false);
+ }
+ };
+
// 获取网站数据
const fetchData = useCallback(() => getWebsites(), []);
const { data: websites, loading, error, refresh } = useAutoRefresh(fetchData, 30000);
// 获取分组数据
const fetchGroups = useCallback(() => getGroups(), []);
- const { data: groups } = useAutoRefresh(fetchGroups, 60000);
+ const { data: groups, refresh: refreshGroups } = useAutoRefresh(fetchGroups, 60000);
+
+ const fetchMonitorSettings = useCallback(() => getMonitorSettings(), []);
+ const { data: monitorSettings } = useAutoRefresh(fetchMonitorSettings, 120000);
+
+ useEffect(() => {
+ const onGroupsChanged = () => {
+ refreshGroups();
+ refresh();
+ };
+ window.addEventListener(GROUPS_CHANGED_EVENT, onGroupsChanged);
+ return () => window.removeEventListener(GROUPS_CHANGED_EVENT, onGroupsChanged);
+ }, [refreshGroups, refresh]);
// 处理添加网站
const handleAdd = () => {
@@ -102,44 +186,67 @@ export default function Dashboard() {
};
return (
-
+ setModalOpen(false)}
- onSuccess={refresh}
- editData={editData}
- />
+ {!readOnly && (
+ setModalOpen(false)}
+ onSuccess={refresh}
+ editData={editData}
+ />
+ )}
+
+ {adminGateOpen && (
+
);
}
diff --git a/mengyaping-frontend/src/pages/PublicDashboard.jsx b/mengyaping-frontend/src/pages/PublicDashboard.jsx
new file mode 100644
index 0000000..c79ffd3
--- /dev/null
+++ b/mengyaping-frontend/src/pages/PublicDashboard.jsx
@@ -0,0 +1,5 @@
+import Dashboard from './Dashboard';
+
+export default function PublicDashboard() {
+ return
{/* 顶部导航 */}
{/* 主内容区 */}
+ {topSlot ?
) : (
{/* Logo */}
-
-
- {/* 添加按钮 */}
-
+
+
+
+
萌芽Ping
-网站监控面板
+ {monitorSettings?.interval_minutes ? ( ++ 检测周期：每 {monitorSettings.interval_minutes} 分钟 +
+ ) : null}
+ {readOnly ? null : (
+ <>
+
+ 公开页
+
+
+
+ )}
+
@@ -250,9 +361,10 @@ export default function Dashboard() {
@@ -269,12 +381,61 @@ export default function Dashboard() {
{/* 添加/编辑弹窗 */}
- setAdminGateOpen(false)}
+ >
+
+ )}
e.stopPropagation()}
+ >
+
+ + 管理员验证 +
+请输入与服务端配置一致的管理员令牌
+ +