|  |  | 
 |  |  |     '': '', | 
 |  |  |     '': '', | 
 |  |  |     '': '', | 
 |  |  |     'map.drawer.json': 'JSON', | 
 |  |  |     '': '', | 
 |  |  |     '': '', | 
 |  |  |     '': '', | 
 |  |  |     '': '', | 
 |  |  |     '': '', | 
 |  |  |     '': '', | 
 |  |  |     '': '', | 
 |  |  |     'map.settings.more': 'More', | 
 
 |  |  | 
 |  |  |                         <Button onClick={handleCancel}> | 
 |  |  |                             <FormattedMessage id='common.cancel' defaultMessage='取消' /> | 
 |  |  |                         </Button> | 
 |  |  |                         <Button onClick={handleOk} type="primary"> | 
 |  |  |                         <Button hidden={true} onClick={handleOk} type="primary"> | 
 |  |  |                             <FormattedMessage id='common.submit' defaultMessage='保存' /> | 
 |  |  |                         </Button> | 
 |  |  |                     </Space> | 
 
 |  |  | 
 |  |  | import React, { useState, useRef, useEffect } from 'react'; | 
 |  |  | import { Drawer, Space, Button } from 'antd'; | 
 |  |  | import { Card, Form, Button } from 'antd'; | 
 |  |  | import { FormattedMessage, useIntl, useModel } from '@umijs/max'; | 
 |  |  | import { createStyles } from 'antd-style'; | 
 |  |  | import * as Utils from '../../utils' | 
 |  |  | import Http from '@/utils/http'; | 
 |  |  | import JSON from './json'; | 
 |  |  |  | 
 |  |  | const useStyles = createStyles(({ token, css }) => { | 
 |  |  |  | 
 |  |  | 
 |  |  | const ShelfDrawer = (props) => { | 
 |  |  |     const intl = useIntl(); | 
 |  |  |     const { styles } = useStyles(); | 
 |  |  |     const [activeTabKey, setActiveTabKey] = useState('json'); | 
 |  |  |  | 
 |  |  |     const [jsonForm] = Form.useForm(); | 
 |  |  |  | 
 |  |  |     const contentList = { | 
 |  |  |         json: ( | 
 |  |  |             <JSON | 
 |  |  |                 refCurr={props.refCurr} | 
 |  |  |                 curSprite={props.curSprite} | 
 |  |  |                 setSpriteBySettings={props.setSpriteBySettings} | 
 |  |  |                 setDidClickSprite={props.setDidClickSprite} | 
 |  |  |                 onSubmit={props.onSubmit} | 
 |  |  |                 jsonForm={jsonForm} | 
 |  |  |             /> | 
 |  |  |         ), | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const handleCancel = () => { | 
 |  |  |         props.onCancel(); | 
 |  |  | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |         <h1>Shelf</h1> | 
 |  |  |             <Card | 
 |  |  |                 hoverable | 
 |  |  |                 bordered={false} | 
 |  |  |                 type='inner' | 
 |  |  |                 tabList={[ | 
 |  |  |                     { | 
 |  |  |                         key: 'json', | 
 |  |  |                         tab: intl.formatMessage({ id: 'map.drawer.json', defaultMessage: 'JSON' }), | 
 |  |  |                         // icon: <BorderOuterOutlined /> | 
 |  |  |  | 
 |  |  |                     }, | 
 |  |  |                     { | 
 |  |  |                         key: 'config', | 
 |  |  |                         tab: intl.formatMessage({ id: 'map.settings.config.param', defaultMessage: '系统参数' }), | 
 |  |  |                         // icon: <BranchesOutlined /> | 
 |  |  |                     }, | 
 |  |  |                 ]} | 
 |  |  |                 activeTabKey={activeTabKey} | 
 |  |  |                 onTabChange={(key) => { | 
 |  |  |                     setActiveTabKey(key) | 
 |  |  |                 }} | 
 |  |  |                 tabProps={{ | 
 |  |  |                     centered: true, | 
 |  |  |                     size: 'large', | 
 |  |  |                     type: "card", | 
 |  |  |                     style: { | 
 |  |  |                     } | 
 |  |  |                 }} | 
 |  |  |             > | 
 |  |  |                 {contentList[activeTabKey]} | 
 |  |  |             </Card> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } | 
 
| New file | 
 |  |  | 
 |  |  | import React, { useState, useRef, useEffect } from 'react'; | 
 |  |  | import { Card, Space, Button } from 'antd'; | 
 |  |  | import { FormattedMessage, useIntl, useModel } from '@umijs/max'; | 
 |  |  | import { createStyles } from 'antd-style'; | 
 |  |  | import * as Utils from '../../utils' | 
 |  |  | import Http from '@/utils/http'; | 
 |  |  |  | 
 |  |  | const useStyles = createStyles(({ token, css }) => { | 
 |  |  |  | 
 |  |  | }) | 
 |  |  |  | 
 |  |  | const JSON = () => { | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |             <h1>JSON</h1> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  |  | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  | export default JSON; |