import React, { useState, useEffect } from "react"; import { useNavigate, useLocation } from "react-router-dom"; import toast from "react-hot-toast"; import { BrandLogo } from "@/components/brand-logo"; import { siteConfig } from "@/config/site"; import { getMonitorAccess } from "@/api"; import { getAdminFlag } from "@/utils/session"; import { useScrollTopOnPathChange } from "@/hooks/useScrollTopOnPathChange"; interface TabItem { path: string; label: string; icon: React.ReactNode; adminOnly?: boolean; } export default function H5Layout({ children }: { children: React.ReactNode }) { const navigate = useNavigate(); const location = useLocation(); const [isAdmin, setIsAdmin] = useState(false); const [monitorAllowed, setMonitorAllowed] = useState(null); const [monitorAccessReason, setMonitorAccessReason] = useState( null, ); useScrollTopOnPathChange(); // Tabbar配置 const tabItems: TabItem[] = [ { path: "/dashboard", label: "首页", icon: ( ), }, { path: "/forward", label: "规则", icon: ( ), }, { path: "/tunnel", label: "隧道", icon: ( ), adminOnly: true, }, { path: "/node", label: "节点", icon: ( ), adminOnly: true, }, { path: "/monitor", label: "监控", icon: ( ), }, { path: "/profile", label: "我的", icon: ( ), }, ]; useEffect(() => { const adminFlag = getAdminFlag(); setIsAdmin(adminFlag); if (adminFlag) { setMonitorAllowed(true); setMonitorAccessReason(null); return; } let cancelled = false; (async () => { try { const res = await getMonitorAccess(); if (cancelled) return; if (res.code === 0 && res.data) { setMonitorAllowed(Boolean(res.data.allowed)); setMonitorAccessReason( res.data.allowed ? null : (res.data.reason || null), ); return; } setMonitorAllowed(true); setMonitorAccessReason(null); } catch { if (cancelled) return; setMonitorAllowed(true); setMonitorAccessReason(null); } })(); return () => { cancelled = true; }; }, []); // Tab点击处理 const handleTabClick = (path: string) => { if (path === "/monitor" && monitorAllowed !== true) { if (monitorAllowed == null) { toast("正在检查监控权限，请稍后重试"); return; } const hint = monitorAccessReason === "need_admin_grant" ? "暂无监控权限，请联系管理员授权" : "暂无监控权限"; toast.error(hint); return; } navigate(path); }; // 过滤tab项（根据权限） const filteredTabItems = tabItems.filter( (item) => !item.adminOnly || isAdmin, ); return (

{/* 顶部导航栏 */}

{siteConfig.name}

{/* 主内容区域 */}

{children}

{/* 用于给固定 Tabbar 腾出空间的占位元素 */}

{/* 底部Tabbar */}

); }