import React, { useState } from 'react'; import { PageContainer } from '@ant-design/pro-layout'; import { Tabs } from 'antd'; import menuTree from '@/services/mocks/web4site'; import styles from './index.less'; import SiteConfig from './componets/siteConfig'; const { TabPane } = Tabs; const WebConfigPage = props => { const [configVisible, setConfigVisible] = useState(false); const renderPage = () => {}; const renderTabPane = tabPaneItem => ( <TabPane key={tabPaneItem.id} tab={tabPaneItem.text}> <SiteConfig visible={configVisible} setVisible={setConfigVisible} /> </TabPane> ); const onEdit = (targetKey, action) => { // console.log(targetKey, action); // action: add|remove }; return ( <PageContainer> <div className={styles.webConfigContainer}> <Tabs type="editable-card" onEdit={onEdit}> {menuTree.children.map(renderTabPane)} </Tabs> </div> </PageContainer> ); }; export default WebConfigPage;