import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Logo } from '@/components/icons';
import { siteConfig } from '@/config/site';
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);
// 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: '/profile',
label: '我的',
icon: (
)
}
];
useEffect(() => {
// 兼容处理：如果没有admin字段，根据role_id判断（0为管理员）
let adminFlag = localStorage.getItem('admin') === 'true';
if (localStorage.getItem('admin') === null) {
const roleId = parseInt(localStorage.getItem('role_id') || '1', 10);
adminFlag = roleId === 0;
// 补充设置admin字段，避免下次再次判断
localStorage.setItem('admin', adminFlag.toString());
}
setIsAdmin(adminFlag);
}, []);
// Tab点击处理
const handleTabClick = (path: string) => {
navigate(path);
};
// 过滤tab项（根据权限）
const filteredTabItems = tabItems.filter(item =>
!item.adminOnly || isAdmin
);
return (
{/* 顶部导航栏 */}
{/* 主内容区域 */}
{children}
{/* 底部Tabbar */}