import { InputNumber, Tabs, Tooltip } from 'antd'; import { useContext } from 'react'; import { AppContext } from 'src/context'; import CssEdit from './css-edit'; import styles from './index.module.scss'; import ComponentEdit from './component-edit'; import Attribute from './attribute'; import { CloseSquareOutlined, ColumnWidthOutlined } from '@ant-design/icons'; import { useState } from 'react'; import { useEffect } from 'react'; const { TabPane } = Tabs; const DrawerWidth = 'drawer-width'; const Drawer: React.FC<{}> = () => { const [width, setWidth] = useState(300); const [isShow, setShow] = useState(false); const { appService } = useContext(AppContext); const page = appService.project.getCurrentPage(); useEffect(() => { setShow(!!page?.currentNode[0]); // eslint-disable-next-line }, [page?.currentNode, page?.currentNode[0]]); useEffect(() => { setWidth(Number(localStorage.getItem(DrawerWidth) ?? 300)); }, []); return ( <div className={styles.drawer} style={{ display: isShow ? 'flex' : 'none', width: width }} > <div className={styles.header}> <div className={styles.slider}> <Tooltip placement="bottom" title="宽度"> <span> <ColumnWidthOutlined /> </span> </Tooltip> <InputNumber min={300} value={width} size="small" style={{ width: 60 }} max={500} onChange={value => { setWidth(value); localStorage.setItem(DrawerWidth, String(value)); }} /> </div> <div className={styles.close} onClick={() => setShow(false)}> <CloseSquareOutlined /> </div> </div> <Tabs className={styles.tabs}> <> <TabPane tab="属性" key="style"> <Attribute page={page} /> </TabPane> <TabPane tab="组件" key="component" className="tests"> <ComponentEdit page={page} /> </TabPane> <TabPane tab="CSS" key="css"> <CssEdit page={page} /> </TabPane> </> </Tabs> </div> ); }; export default Drawer;