add doc

packages/dooringx-doc/src/api/1.1.md

@@ -0,0 +1,9 @@
+---
+title: 待定
+sTitle: API
+order: 1
+---
+
+## 待定
+
+

packages/dooringx-doc/src/api/dd.md

@@ -1,15 +0,0 @@
----
-title: xcxzc
-sTitle: vc
-order: 4
----
-
-## dsas
-
-saff
-sa
-d
-ad
-sa
-d
-fsad

packages/dooringx-doc/src/changelog/1.1.md

@@ -1,8 +1,11 @@
+
 ---
 title: CHANGELOG
 order: 1
 ---
 
+## changelog
+
 ## 0.6.0
 
 已支持编辑模式使用Iframe！
@@ -13,6 +16,7 @@ order: 1
 ## 0.5.1
 
 修复右侧选中不能取消选中问题。
+
 ## 0.5.0
 
 修复control组件宽度不够问题。
@@ -26,7 +30,6 @@ order: 1
 修改markline样式。
 
 全局设置增加容器高度。
-
 ## 0.4.1
 
 去除lib自动导入样式。
@@ -77,4 +80,4 @@ commander的传递进行修改，可以获得config了，commander不再从index
 删除未作按钮，增加fixed配置
 ## 0.1.4 
 
-基础功能
+基础功能

packages/dooringx-doc/src/docs/1.3.md

@@ -12,4 +12,249 @@ order: 3
 npm i dooringx-lib
 ```
 
+dooringx-lib在编辑时提供两种容器，可以根据需要选择使用。
+
+一种是普通容器，一种是iframe容器，这2种容器在某些实现上略有不同。
+
+使用普通容器即在编辑时为普通的div并非iframe，而使用iframe则编辑时看见的为iframe内容。在预览时，使用preview组件，preview可以放到任何容器，包括去使用iframe查看。
+
+普通容器使用参考demo:
+
+```js
+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(config)}>
+			<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 config={config}>
+					<>
+						<Control
+							config={config}
+							style={{ position: 'fixed', bottom: '60px', right: '450px', zIndex: 100 }}
+						></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>
+	);
+}
+```
+
+
+iframe容器使用参考demo：
+
+
+index.tsx
+```js
+import {
+	RightConfig,
+	useStoreState,
+	innerContainerDragUp,
+	LeftConfig,
+	IframeContainerWrapper,
+	Control,
+	useIframeHook,
+	IframeTarget,
+} 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 subscribeFn = useCallback(() => {
+		localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
+	}, [config]);
+
+	const [state] = useStoreState(config, subscribeFn);
+	useIframeHook(`${location.origin}/container`, config);
+
+	return (
+		<div {...innerContainerDragUp(config, true)}>
+			<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>
+
+				<IframeContainerWrapper
+					config={config}
+					extra={
+						<Control
+							config={config}
+							style={{ position: 'fixed', bottom: '60px', right: '450px', zIndex: 100 }}
+						></Control>
+					}
+				>
+					<IframeTarget
+						config={config}
+						iframeProps={{
+							src: '/container',
+						}}
+					></IframeTarget>
+				</IframeContainerWrapper>
+				<div className="rightrender" style={{ height: '100%' }}>
+					<RightConfig state={state} config={config}></RightConfig>
+				</div>
+			</div>
+		</div>
+	);
+}
+```
+
+container 路由：
+
+```js
+import { configContext } from '@/layouts';
+import { useContext } from 'react';
+import { IframeContainer } from 'dooringx-lib';
+
+function ContainerPage() {
+	const config = useContext(configContext);
+	return (
+		<div>
+			<IframeContainer config={config} context="edit"></IframeContainer>
+		</div>
+	);
+}
+
+export default ContainerPage;
+```
+
+
+
+预览时preview套iframe:
+
+```html
+		<div
+			style={{
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+			}}
+		>
+			<iframe style={{ width: '375px', height: '667px' }} src="/preview"></iframe>
+		</div>
+```
+preview路由：
+
+```js
+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;
+```
+
 有关 api 部分请参考 api

packages/dooringx-doc/src/lib/Header/index.svelte

@@ -3,7 +3,7 @@
 	import { base } from '$app/paths';
 	import Button from '../Button/index.svelte';
 	import Switch from '../Switch/index.svelte';
-	import logo from './svelte-logo.svg';
+	import logo from './logo.svg';
 	import { getContext } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	const lang = getContext<Writable<string>>('lang');
@@ -37,7 +37,7 @@
 				<Button href={changelog} color={$page.path === '/changelog' ? '#4569d4' : '#4d5164'}>更新</Button>
 			</div>
 			<div class:active={$page.path === '/about'}>
-				<Button>Github</Button>
+				<Button href={'https://github.com/H5-Dooring/dooringx'}>Github</Button>
 			</div>
 
 			<!-- <Switch

packages/dooringx-doc/src/lib/Header/logo.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="69px" height="96px" viewBox="0 0 69 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>dooringX图标@1x</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="dooringX图标" transform="translate(34.500000, 48.000000) scale(1, -1) translate(-34.500000, -48.000000) ">
+            <polygon id="Rectangle-42-Copy-16" fill="#5271ED" points="-9.09494702e-13 17.5 27 0 27 16 13 24.5 13.5 72 -9.09494702e-13 80"></polygon>
+            <polygon id="Rectangle-42-Copy-17" fill="#5271ED" points="41 40.5 55 32 55 64 27 80 27 64 41 56"></polygon>
+            <polygon id="Rectangle-42-Copy-18" fill="#E6EBFF" points="0 80.0502832 13.4014599 72.0251416 26.8029197 80.0502832 54.5985401 64 68 72.0251416 26.3065693 96"></polygon>
+            <polygon id="Rectangle-42-Copy-19" fill="#9CB0FF" points="27 0 69 24.4491525 69 72 55.2830686 64.0150631 55.2830686 32 27 16"></polygon>
+            <polygon id="Rectangle-42-Copy-20" fill="#9CB0FF" points="13 24.9279279 27 33 27 80 13.5 71.9279279"></polygon>
+            <polygon id="Rectangle-42-Copy-21" fill="#E6EBFF" points="13 24.6734694 27 16 55 32.3265306 41 41"></polygon>
+        </g>
+    </g>
+</svg>

packages/dooringx-doc/src/lib/Header/svelte-logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>