13 changed files with 165 additions and 101 deletions
			
			
		| @ -1,22 +0,0 @@ | |||
| .container { | |||
| 
 | |||
|   display: flex; | |||
|   flex-direction: column; | |||
|   width: 100%; | |||
|   height: 100%; | |||
| 
 | |||
|   .body { | |||
| 
 | |||
|     flex: 1; | |||
|     display: flex; | |||
|     flex-direction: row; | |||
|     width: 100%; | |||
|     height: 100%; | |||
| 
 | |||
|     .full { | |||
|       flex: 1; | |||
|       display: flex; | |||
|       flex-direction: column; | |||
|     } | |||
|   } | |||
| } | |||
| @ -0,0 +1,44 @@ | |||
| .container { | |||
| 
 | |||
|   display: flex; | |||
|   flex-direction: column; | |||
|   width: 100%; | |||
|   height: 100%; | |||
| 
 | |||
|   .header { | |||
|     width: 100%; | |||
|     height: 48px; | |||
|     border-bottom: 1px solid #D9D9D9; | |||
|   } | |||
| 
 | |||
|   .body { | |||
| 
 | |||
|     flex: 1; | |||
|     display: flex; | |||
|     flex-direction: row; | |||
|     width: 100%; | |||
|     height: 100%; | |||
| 
 | |||
|     .sideBar { | |||
|       width: 235px; | |||
|       border-right: 1px solid #D9D9D9; | |||
|     } | |||
| 
 | |||
|     .full { | |||
| 
 | |||
|       flex: 1; | |||
|       display: flex; | |||
|       flex-direction: column; | |||
| 
 | |||
|       .toolBar { | |||
|         height: 43px; | |||
|       } | |||
|     } | |||
| 
 | |||
|     .settingBar { | |||
|       width: 350px; | |||
|       height: 100%; | |||
|       border-left: 1px solid #D9D9D9; | |||
|     } | |||
|   } | |||
| } | |||
| @ -0,0 +1,54 @@ | |||
| import React from 'react'; | |||
| 
 | |||
| import styles from './index.module.less'; | |||
| 
 | |||
| import {Graph} from '@antv/x6'; | |||
| 
 | |||
| interface ISubComponentProps { | |||
|   flowChart: Graph; | |||
| } | |||
| 
 | |||
| interface IProps { | |||
|   flowChart: Graph | undefined; | |||
|   Header: React.FC<ISubComponentProps>; | |||
|   SideBar: React.FC<ISubComponentProps>; | |||
|   ToolBar: React.FC<ISubComponentProps>; | |||
|   SettingBar: React.FC<ISubComponentProps>; | |||
| } | |||
| 
 | |||
| const Layout: React.FC<IProps> = (props) => { | |||
| 
 | |||
|   const {flowChart, Header, SideBar, ToolBar, SettingBar} = props; | |||
| 
 | |||
|   let header, sideBar, toolBar, settingBar; | |||
|   if(flowChart) { | |||
|     header = <Header flowChart={flowChart}/>; | |||
|     sideBar = <SideBar flowChart={flowChart}/>; | |||
|     toolBar = <ToolBar flowChart={flowChart}/>; | |||
|     settingBar = <SettingBar flowChart={flowChart}/>; | |||
|   } | |||
| 
 | |||
|   return ( | |||
|     <div className={styles.container}> | |||
|       <div className={styles.header}> | |||
|         {header} | |||
|       </div> | |||
|       <div className={styles.body}> | |||
|         <div className={styles.sideBar}> | |||
|           {sideBar} | |||
|         </div> | |||
|         <div className={styles.full}> | |||
|           <div className={styles.toolBar}> | |||
|             {toolBar} | |||
|           </div> | |||
|           {props.children} | |||
|         </div> | |||
|         <div className={styles.settingBar}> | |||
|           {settingBar} | |||
|         </div> | |||
|       </div> | |||
|     </div> | |||
|   ); | |||
| }; | |||
| 
 | |||
| export default Layout; | |||
					Loading…
					
					
				
		Reference in new issue