import { DevHeader } from './dev-header'; import { useSetFullScreenLoading } from './page-loading'; import { useHistoryReplace } from '@/hooks/use-history'; import { useInDev } from '@/hooks/use-in-dev'; import { isBextClient } from '@/util/config'; import { Pivot, PivotItem } from '@fluentui/react'; import { FC, useCallback } from 'react'; import { useLocation, useRouteMatch } from 'umi'; const NormalHeader = () => { const location = useLocation(); const historyReplace = useHistoryReplace(); const route = `/${location.pathname.split('/')[1]}`; const onLinkClick = useCallback( (key: string) => { historyReplace(key); }, [history], ); return ( <> <header className="px-6 flex items-center"> <span className="text-xl font-extralight mr-4" onClick={() => historyReplace('/', { previewId: undefined, previewMeta: undefined, }) } > Bext </span> <Pivot selectedKey={route} onLinkClick={(item) => onLinkClick(item?.props.itemKey || '/')} > <PivotItem headerText="首页" itemKey="/" /> <PivotItem headerText="脚本" itemKey="/meta" /> <PivotItem headerText="工具" itemKey="/tool" /> <PivotItem headerText="开发" itemKey="/dev" /> <PivotItem headerText="更多" itemKey="/more" /> </Pivot> </header> </> ); }; export const Header: FC = () => { const inDev = useInDev(); const inReview = !!useRouteMatch('/meta/:id/review'); useSetFullScreenLoading(); if (inReview) { return null; } return inDev ? <DevHeader /> : isBextClient ? null : <NormalHeader />; };