83 lines
1.8 KiB
TypeScript
83 lines
1.8 KiB
TypeScript
|
/*
|
||
|
|
* @Author: yehuozhili
|
||
|
|
* @Date: 2021-05-15 12:49:28
|
||
|
|
* @LastEditors: yehuozhili
|
||
|
|
* @LastEditTime: 2021-07-10 19:08:25
|
||
|
|
* @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx
|
||
|
|
*/
|
||
|
|
import {
|
||
|
|
RightConfig,
|
||
|
|
Container,
|
||
|
|
useStoreState,
|
||
|
|
innerContainerDragUp,
|
||
|
|
LeftConfig,
|
||
|
|
ContainerWrapper,
|
||
|
|
Control,
|
||
|
|
} from 'dooringx-lib';
|
||
|
|
import { useContext } from 'react';
|
||
|
|
import { configContext } from '@/layouts';
|
||
|
|
import { useCallback } from 'react';
|
||
|
|
import { PREVIEWSTATE } from '@/constant';
|
||
|
|
|
||
|
|
export const HeaderHeight = '40px';
|
||
|
|
|
||
|
|
export default function IndexPage() {
|
||
|
|
const config = useContext(configContext);
|
||
|
|
|
||
|
|
const everyFn = () => {};
|
||
|
|
|
||
|
|
const subscribeFn = useCallback(() => {
|
||
|
|
localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
|
||
|
|
}, [config]);
|
||
|
|
|
||
|
|
const [state] = useStoreState(config, subscribeFn, everyFn);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div {...innerContainerDragUp()}>
|
||
|
|
<div style={{ height: HeaderHeight }}>
|
||
|
|
head
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
window.open('/iframe');
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
go preview
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
window.open('/preview');
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
go preview
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
height: `calc(100vh - ${HeaderHeight})`,
|
||
|
|
width: '100vw',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div style={{ height: '100%' }}>
|
||
|
|
<LeftConfig config={config}></LeftConfig>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ContainerWrapper>
|
||
|
|
<>
|
||
|
|
<Control
|
||
|
|
config={config}
|
||
|
|
style={{ position: 'fixed', bottom: '60px', right: '450px' }}
|
||
|
|
></Control>
|
||
|
|
<Container state={state} config={config} context="edit"></Container>
|
||
|
|
</>
|
||
|
|
</ContainerWrapper>
|
||
|
|
<div className="rightrender" style={{ height: '100%' }}>
|
||
|
|
<RightConfig state={state} config={config}></RightConfig>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|