smallstonesk
4 years ago
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