index.tsx

import React, {useEffect, useState} from 'react';
import {Card, Tabs} from 'antd'
import Topology from './components/tabs/Topology'
import Site from './components/tabs/Site'
import Group from './components/tabs/Group'
import classNames from "classnames";
import utilsStyles from "@/utils/utils.less";
import {insideAccess} from '@/access'

type SystemTabKey = 'topology' | 'site' | 'group'

const {TabPane} = Tabs

const Index: React.FC = () => {
  const [tabKey, setTabKey] = useState<SystemTabKey>('topology');
  const tabChange = (tabKeys: string) => {
    setTabKey(tabKeys as SystemTabKey)
  }

  useEffect(() => {
    const tab = insideAccess('cxTricOxVtF') ? 'topology' : 'group'
    setTabKey(tab)
  }, [])

  return (
    <div className={ classNames(utilsStyles.disFlexCol, utilsStyles.fullContainer) }>
      <div className={ utilsStyles.subMenus } style={{padding: '0 15px'}}>
        <Tabs onChange={tabChange}>
          {insideAccess('cxTricOxVtF') && (
            <>
              <TabPane tab="系统拓扑" key="topology"/>
              <TabPane tab="站点管理" key="site"/>
            </>
          )}
          <TabPane tab="设备组" key="group"/>
        </Tabs>
      </div>
      <Card size="small" style={{flex: 1}} bodyStyle={{display: 'flex', flexDirection: 'column', height: '100%'}}>
        {insideAccess('cxTricOxVtF') && (
          <>
            {tabKey === 'topology' && <Topology/>}
            {tabKey === 'site' && <Site/>}
          </>
        )}
         {tabKey === 'group' && <Group />}
      </Card>
    </div>
  );
};

export default Index;