diff --git a/packages/dooringx-dumi-doc/.umirc.ts b/packages/dooringx-dumi-doc/.umirc.ts
index 0c84f41..03e288e 100644
--- a/packages/dooringx-dumi-doc/.umirc.ts
+++ b/packages/dooringx-dumi-doc/.umirc.ts
@@ -2,13 +2,21 @@ import { defineConfig } from 'dumi';
 export default defineConfig({
 	title: 'Dooringx',
 	favicon: 'https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/dooringxlogo.png',
-	logo: 'https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/dooringxlogo.png',
+	logo: 'https://img-blog.csdnimg.cn/img_convert/520863a38a93d960862f92c805bc97cc.png#pic_center',
 	outputPath: 'docs-dist',
 	mode: 'site',
 	locales: [
 		['zh', '中文'],
 		['en', 'English'],
 	],
+	styles: [
+		`
+  .__dumi-default-navbar-logo{
+    padding-left: 200px !important;
+    text-indent: -10000px;
+  }
+  `,
+	],
 	navs: {
 		// 多语言 key 值需与 locales 配置中的 key 一致
 		en: [
diff --git a/packages/dooringx-dumi-doc/docs/API/index.md b/packages/dooringx-dumi-doc/docs/API/index.md
index 12f1f50..908000c 100644
--- a/packages/dooringx-dumi-doc/docs/API/index.md
+++ b/packages/dooringx-dumi-doc/docs/API/index.md
@@ -2,21 +2,549 @@
 title: API
 toc: menu
 ---
-
 ## useStoreState
 
+用于将json中的block转换为react中的state，可插入block变更订阅函数。
+
+示例：
+```js
+	const config = useContext(configContext);
+	const locale = useContext(LocaleContext);
+
+	const everyFn = () => {};
+
+	const subscribeFn = useCallback(() => {
+		//需要去预览前判断下弹窗。
+		localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
+	}, [config]);
+
+	const [state] = useStoreState(config, subscribeFn, everyFn);
+```
 
 
-#### 传参：
-
-| 属性名                         | 类型                   |  说明 |
+| 参数                         | 类型                   |  说明 |
 | ----------------------------  | ----------------       | ---- |
-| config                        | UserConfig         |                |
-| extraFn                       | Function = () => {}   |             |
-| everyFn                       | Function = () => {}     |       |
+| config                        | UserConfig         |       总的配置项    |
+| extraFn                       | Function = () => {}   |     订阅store变更函数        |
+| everyFn                       | Function = () => {}     |   暂时无用，可穿插运行函数   |
 
 
-#### 返回值：
+| 返回值                         | 说明             |    
+| ----------------------------  | ---------------- |
+| [IStoreData]                  | 转变为state的block ，用于后续渲染   |
 
-`[IStoreData]`
+## useDynamicAddEventCenter
 
+用于在组件中注册时机。
+
+示例：
+```js
+	useDynamicAddEventCenter(props, `${props.data.id}-click`, '点击执行时机');
+```
+
+
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+| props            | ComponentRenderConfigProps   |   传入组件的对象{data,context,store,config}        |
+| eventName          | string  |     添加的名称        |
+| displayName          | string    |    展示的名称  |
+
+
+| 返回值                         | 说明             |    
+| ----------------------------  | ---------------- |
+| void                 | 无    |
+
+## Container
+
+画布
+
+示例：
+```js
+	<Container state={state} config={config} context="edit"></Container>
+```
+
+
+
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+| state            | IStoreData  |   传入useStoreState转换的state |
+| context          |  'edit' \|  'preview'    |    根据预览或者编辑传  |
+| config          | UserConfig    |  总配置项    |
+| editContainerStyle          |  CSSProperties   |    可以修改样式  |
+| previewContainerStyle          | CSSProperties    |    可以修改样式  |
+
+| 返回值                         | 说明             |    
+| ----------------------------  | ---------------- |
+| JSX.Element                 | 无    |
+
+## LeftConfig
+
+左侧面板
+
+
+示例：
+```js
+		<LeftConfig footerConfig={footerConfig()} config={config}></LeftConfig>
+```
+
+
+
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+| config            | UserConfig | 总配置项  |
+| showName            | Boolean? |   是否显示名称 |
+| footerConfig            | ReactNode? |  面板footer插槽 |
+| mode            |  'horizontal' | 'vertical' |  模式 |
+
+
+
+
+| 返回值                         | 说明             |    
+| ----------------------------  | ---------------- |
+| JSX.Element                 | 无    |
+
+
+## Preview
+
+预览组件，包含了preview模式的container，以及一些加载逻辑。
+
+示例：
+```js
+	<Preview
+				//loadingState={loading}
+				// completeFn={() => {
+				// 	setTimeout(() => {
+				// 		setLoading(false);
+				// 	}, 10000);
+				// }}
+				config={config}
+	></Preview>
+```
+
+
+
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+| config            | UserConfig | 总配置项  |
+| loadText            | ReactNode? |   加载中插槽 |
+| loadingState            | boolean? |  手动维护加载状态 |
+| completeFn            |  Function? |  页面装载完成调用 |
+| previewContainerStyle            |  CSSProperties? |  样式修改 |
+
+
+| 返回值                         | 说明             |    
+| ----------------------------  | ---------------- |
+| JSX.Element                 | 无    |
+
+## RightConfig
+
+右侧面板
+
+示例：
+```js
+	<RightConfig state={state} config={config}></RightConfig>
+```
+
+
+
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+| state            | IStoreData |  传入useStoreState转换的state |
+| config            | UserConfig |   总配置项 |
+| globalExtra            | ReactNode? |  全局属性部分添加位置插槽 |
+| modalExtra            |  ReactNode? |  弹窗属性添加插槽 |
+
+
+| 返回值                         | 说明             |    
+| ----------------------------  | ---------------- |
+| JSX.Element                 | 无    |
+
+## ContainerWrapper
+
+画布外层，主要包含了滚轮放大缩小，刻度等。
+
+示例：
+```js
+<ContainerWrapper config={config}>
+  <>
+    <Control
+      config={config}
+      style={{ position: 'fixed', bottom: '160px', right: '450px', zIndex: 100 }}
+    ></Control>
+    <Container state={state} config={config} context="edit"></Container>
+  </>
+</ContainerWrapper>
+```
+
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+| config            | UserConfig |   总配置项 |
+| classNames            | string? |  样式修改 |
+| style            |  CSSProperties? |  样式修改 |
+
+
+| 返回值                         | 说明             |    
+| ----------------------------  | ---------------- |
+| JSX.Element                 | 无    |
+## Control
+
+全局、弹窗等画布控制器。
+
+示例：
+```js
+<Control
+  config={config}
+  style={{ position: 'fixed', bottom: '160px', right: '450px', zIndex: 100 }}
+></Control>
+```
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+| config            | UserConfig |   总配置项 |
+| style            |  CSSProperties? |  样式修改 |
+
+
+| 返回值                         | 说明             |    
+| ----------------------------  | ---------------- |
+| JSX.Element                 | 无    |
+
+
+## LeftDataPannel
+
+左侧数据源tab，用来装载在左侧面板上。
+
+示例：
+```js
+leftRenderListCategory: [
+  ...,
+		{
+			type: 'datax',
+			icon: <ContainerOutlined />,
+			custom: true,
+			displayName: '数据源',
+			customRender: (config) => <LeftDataPannel config={config}></LeftDataPannel>,
+		},
+	],
+```
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+| config            | UserConfig |   总配置项 |
+
+| 返回值                         | 说明             |    
+| ----------------------------  | ---------------- |
+| JSX.Element                 | 无    |
+
+## innerContainerDragUp
+
+放到外层容器属性里，主要包含多种up类型事件处理逻辑。
+
+示例：
+```js
+<div {...innerContainerDragUp(config)}>
+</div>
+```
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+| config            | UserConfig |   总配置项 |
+
+| 返回值                         | 说明             |    
+| ----------------------------  | ---------------- |
+|  mouseUp moseMove等      | 无    |
+
+## unmountContextMenu
+
+卸载右键dom，用于关闭右键菜单，也可以在contextMenuState.unmountContextMenu中取到
+
+示例：
+```js
+const ContextMenu = () => {
+	const handleclick = () => {
+		unmountContextMenu();
+	};
+	return (
+		<div
+			style={{
+				left: contextMenuState.left,
+				top: contextMenuState.top,
+				position: 'fixed',
+				background: 'rgb(24, 23, 23)',
+			}}
+		>
+			<div
+				style={{ width: '100%' }}
+				onClick={() => {
+					commander.exec('redo');
+					handleclick();
+				}}
+			>
+				<Button>自定义</Button>
+			</div>
+		</div>
+	);
+};
+```
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+| config            | UserConfig |   总配置项 |
+
+| 返回值                         | 说明             |    
+| ----------------------------  | ---------------- |
+|  mouseUp moseMove等      | 无    |
+
+
+## UserConfig
+总设置项，包括可以获取store commander等，也需传递给组件。
+
+待补全文档
+
+## userConfigMerge
+
+合并配置项,用于合并他人的配置项。
+
+ * 部分无法合并属性如果b传了会以b为准
+ * initstore不合并
+ * leftallregistmap合并
+ * leftRenderListCategory合并
+ * rightRenderListCategory合并
+ * rightGlobalCustom 不合并
+ * initComponentCache合并
+ * initFunctionMap合并
+ * initDataCenterMap合并
+ * initCommandModule合并
+ * initFormComponents合并
+ * containerIcon不合并
+
+示例：
+
+```js
+const merge = userConfigMerge(a: Partial<InitConfig>, b?: Partial<InitConfig>):
+```
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+|  InitConfig: initStoreData      |  IStoreData[] |   store初始值 |
+|  InitConfig: leftAllRegistMap      |  leftAllRegistMap[] |   左边tab页组件渲染包括异步路径 { type: 'basic', component: 'button', img: 'http://xxxx/1.jpg' ,url:'' } |
+|  InitConfig: leftRenderListCategory      |  leftRenderListCategory[] |   左边tab页图标配置 |
+|  InitConfig: rightRenderListCategory      |  RightMapRenderListPropsItemCategory[] | 右边tab页图标配置 |
+|  InitConfig: initComponentCache      | CacheComponentType |   组件加载缓存判定，用来设置不异步加载的组件 |
+|  InitConfig: initFunctionMap      |  FunctionCenterType |  内置函数配置 |
+|  InitConfig: initDataCenterMap      |  Record\<string, any\> |   内置数据中心配置数据 |
+|  InitConfig: initCommandModule      |  CommanderItemFactory[] |   commander 指令集合 |
+|  InitConfig: rightGlobalCustom      |   ((config: UserConfig) => React.ReactNode) \| null \| undefined |   右侧全局自定义 |
+|  InitConfig: initFormComponents      |   Record\<string, React.FunctionComponent\<any\> \| React.ComponentClass\<any, any\>\>|   右侧配置项 |
+|  InitConfig: containerIcon      |  React.ReactNode |   容器拉伸图标 |
+
+| 返回值                         | 说明             |    
+| ----------------------------  | ---------------- |
+|  InitConfig    | 无    |
+
+## scaleFn
+
+制作放大缩小的函数
+
+示例：
+
+```js
+scaleFn.increase(0.1,config)
+scaleFn.decrease(0.1,config)
+```
+
+ 
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+|  number     |  number  |    放大缩小比例 |
+| config            | UserConfig |   总配置项 |
+
+## ComponentItemFactory
+
+制作组件函数，如果想传递对象请使用createComponent。
+
+示例：
+```js
+new ComponentItemFactory(
+	'button',
+	'按钮',
+	{
+		style: [
+			createPannelOptions<FormMap, 'input'>('input', {
+				receive: 'text',
+				label: '文字',
+			}),
+		],
+		fn: [
+			createPannelOptions<FormMap, 'switch'>('switch', {
+				receive: 'op1',
+				label: '改变文本函数',
+			}),
+		],
+		animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
+		actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
+	},
+	{
+		props: {
+			text: 'yehuozhili',
+			sizeData: [100, 30],
+			backgroundColor: 'rgba(0,132,255,1)',
+			lineHeight: 1,
+			borderRadius: 0,
+			op1: false,
+			borderData: {
+				borderWidth: 0,
+				borderColor: 'rgba(0,0,0,1)',
+				borderStyle: 'solid',
+			},
+			fontData: {
+				fontSize: 14,
+				textDecoration: 'none',
+				fontStyle: 'normal',
+				color: 'rgba(255,255,255,1)',
+				fontWeight: 'normal',
+			},
+		},
+		width: 100, // 绝对定位元素初始必须有宽高，否则适配会有问题。
+		height: 30, // 绝对定位元素初始必须有宽高，否则适配会有问题。
+		rotate: {
+			canRotate: true,
+			value: 0,
+		},
+		canDrag: true, // false就不能拖
+	},
+	(data, context, store, config) => {
+		return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>;
+	},
+	true
+);
+```
+
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+|  name     |  string  | map上key名唯一    |
+| display| string | 展示的名称 |
+| props| Record\<string, CreateOptionsResAll[]\>|  配置项属性 |
+| initData| Partial\<IBlockType\>| 初始值  |
+| render|(data: IBlockType, context: any, store: Store, config: UserConfig) => JSX.Element|  渲染函数  |
+| resize| boolean = true | 是否拉伸 |
+| needPosition| boolean = true| 是否用拖拽点位定初始位置   |
+| init| () => void| 加载时函数   |
+| destroy| () => void| 销毁时函数  |
+| remoteConfig|  Record\<string, any\>|  远程组件配置项   |
+
+## createComponent
+
+制作组件函数，对象形式new ComponentItemFactory,属性同上。
+
+示例：
+
+```js
+createComponent({
+	name: 'testco',
+	display: '测试按钮',
+	props: {
+		style: [
+			createPannelOptions<FormMap, 'input'>('input', {
+				receive: 'text',
+				label: '文字',
+			}),
+		],
+		fn: [
+			createPannelOptions<FormMap, 'switch'>('switch', {
+				receive: 'op1',
+				label: '改变文本函数',
+			}),
+		],
+		animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
+		actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
+	},
+	initData: {
+		props: {
+			text: 'yehuozhili',
+			sizeData: [100, 30],
+			backgroundColor: 'rgba(0,132,255,1)',
+			lineHeight: 1,
+			borderRadius: 0,
+			op1: false,
+			borderData: {
+				borderWidth: 0,
+				borderColor: 'rgba(0,0,0,1)',
+				borderStyle: 'solid',
+			},
+			fontData: {
+				fontSize: 14,
+				textDecoration: 'none',
+				fontStyle: 'normal',
+				color: 'rgba(255,255,255,1)',
+				fontWeight: 'normal',
+			},
+		},
+		width: 100, // 绝对定位元素初始必须有宽高，否则适配会有问题。
+		height: 30, // 绝对定位元素初始必须有宽高，否则适配会有问题。
+		rotate: {
+			canRotate: true,
+			value: 0,
+		},
+		canDrag: true, // false就不能拖
+	},
+	render: (data, context, store, config) => {
+		return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>;
+	},
+	resize: true,
+});
+```
+
+
+## createPannelOptions
+
+用制作组件配置项函数
+
+示例：
+```js
+	createPannelOptions<FormMap, 'input'>('input', {
+				receive: 'text',
+				label: '文字',
+	})
+```
+| 参数                 | 类型                   |  说明 |
+| -----------------  | ----------------       | ---- |
+|  type   |  string  |  右侧配置组件对应的name    |
+| option| any | 发给该右侧配置组件的属性（根据右侧组件定义） |
+
+
+## useRegistFunc 
+
+用于制作函数
+
+## CommanderItemFactory
+
+用于制作快捷键
+## changeUserValueRecord
+
+用于制作函数转换
+
+## changeUserValue
+
+用于制作函数转换
+
+
+## dragEventResolve
+
+用于菜单拖拽函数
+
+
+## defaultStore
+
+默认store
+
+## deepCopy
+
+用于深拷贝
+
+## specialCoList
+
+需要特殊处理的组件，用于弹窗mask，一般不做处理
+
+## specialFnList
+
+需要特殊处理的函数，通过includes判断，函数不会像组件函数一样卸载。
+
+
+## locale
+
+国际化设置