add example

packages/dooringx-example/src/pages/iframe/index.tsx

@@ -0,0 +1,22 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-07 20:16:00
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-07 22:18:55
+ * @FilePath: \visual-editor\src\pages\iframe\index.tsx
+ */
+
+function IframePage() {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+			}}
+		>
+			<iframe style={{ width: '375px', height: '667px' }} src="/preview"></iframe>
+		</div>
+	);
+}
+export default IframePage;

packages/dooringx-example/src/pages/index.tsx

@@ -0,0 +1,82 @@
+/*
+ * @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>
+	);
+}

packages/dooringx-example/src/pages/preview/index.tsx

@@ -0,0 +1,38 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-07 20:05:48
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-10 18:01:15
+ * @FilePath: \dooringx\packages\dooringx-example\src\pages\preview\index.tsx
+ */
+
+import { PREVIEWSTATE } from '@/constant';
+import { Preview, UserConfig } from 'dooringx-lib';
+import plugin from '../../plugin';
+
+const config = new UserConfig(plugin);
+
+function PreviewPage() {
+	const data = localStorage.getItem(PREVIEWSTATE);
+	if (data) {
+		try {
+			const json = JSON.parse(data);
+			config.resetData([json]);
+		} catch {
+			console.log('err');
+		}
+	}
+	return (
+		<div
+			style={{
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+			}}
+		>
+			<Preview config={config}></Preview>
+		</div>
+	);
+}
+
+export default PreviewPage;