- * @LastEditTime: 2020-12-14 16:55:22
- * @FilePath: /his-doc/docs/.vuepress/theme/index.js
- */
module.exports = {
extend: '@vuepress/theme-default',
};
diff --git a/doc/.vuepress/theme/styles/_code.css b/doc/.vuepress/theme/styles/_code.css
deleted file mode 100755
index d318e11..0000000
--- a/doc/.vuepress/theme/styles/_code.css
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-
- code[class*="language-"],
- pre[class*="language-"] {
- color: black;
- background: none;
- text-shadow: 0 1px white;
- font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
- font-size: 1em;
- text-align: left;
- white-space: pre;
- word-spacing: normal;
- word-break: normal;
- word-wrap: normal;
- line-height: 1.5;
-
- -moz-tab-size: 4;
- -o-tab-size: 4;
- tab-size: 4;
-
- -webkit-hyphens: none;
- -moz-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
- }
-
- pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
- code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
- text-shadow: none;
- background: #b3d4fc;
- }
-
- pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
- code[class*="language-"]::selection, code[class*="language-"] ::selection {
- text-shadow: none;
- background: #b3d4fc;
- }
-
- @media print {
- code[class*="language-"],
- pre[class*="language-"] {
- text-shadow: none;
- }
- }
-
- /* Code blocks */
- pre[class*="language-"] {
- padding: 1em;
- margin: .5em 0;
- overflow: auto;
- }
-
- :not(pre) > code[class*="language-"],
- pre[class*="language-"] {
- background: #f9fafb;
- }
-
- /* Inline code */
- :not(pre) > code[class*="language-"] {
- padding: .1em;
- border-radius: .3em;
- white-space: normal;
- }
-
- .token.comment,
- .token.prolog,
- .token.doctype,
- .token.cdata {
- color: slategray;
- }
-
- .token.punctuation {
- color: #999;
- }
-
- .token.namespace {
- opacity: .7;
- }
-
- .token.property,
- .token.tag,
- .token.boolean,
- .token.number,
- .token.constant,
- .token.symbol,
- .token.deleted {
- color: #905;
- }
-
- .token.selector,
- .token.attr-name,
- .token.string,
- .token.char,
- .token.builtin,
- .token.inserted {
- color: #690;
- }
-
- .token.operator,
- .token.entity,
- .token.url,
- .language-css .token.string,
- .style .token.string {
- color: #9a6e3a;
- /* This background color was intended by the author of this theme. */
- background: hsla(0, 0%, 100%, .5);
- }
-
- .token.atrule,
- .token.attr-value,
- .token.keyword {
- color: #329aff;
- }
-
- .token.function,
- .token.class-name {
- color: #DD4A68;
- }
-
- .token.regex,
- .token.important,
- .token.variable {
- color: #e90;
- }
-
- .token.important,
- .token.bold {
- font-weight: bold;
- }
- .token.italic {
- font-style: italic;
- }
-
- .token.entity {
- cursor: help;
- }
-
\ No newline at end of file
diff --git a/doc/.vuepress/theme/styles/main.scss b/doc/.vuepress/theme/styles/main.scss
index 956d336..8478a83 100755
--- a/doc/.vuepress/theme/styles/main.scss
+++ b/doc/.vuepress/theme/styles/main.scss
@@ -1,3 +1,2 @@
-@import "reset";
-@import "layout";
-@import "code";
+@import 'reset';
+@import 'layout';
diff --git a/doc/img/componentDev/dynamic.png b/doc/img/componentDev/dynamic.png
new file mode 100644
index 0000000..cdb94f1
Binary files /dev/null and b/doc/img/componentDev/dynamic.png differ
diff --git a/doc/img/functionRealization/preview-flow.png b/doc/img/functionRealization/preview-flow.png
new file mode 100644
index 0000000..952bc36
Binary files /dev/null and b/doc/img/functionRealization/preview-flow.png differ
diff --git a/doc/img/functionRealization/preview-machine.png b/doc/img/functionRealization/preview-machine.png
new file mode 100644
index 0000000..d4af158
Binary files /dev/null and b/doc/img/functionRealization/preview-machine.png differ
diff --git a/doc/img/functionRealization/preview-page.png b/doc/img/functionRealization/preview-page.png
new file mode 100644
index 0000000..714b83c
Binary files /dev/null and b/doc/img/functionRealization/preview-page.png differ
diff --git a/doc/img/functionRealization/screenshot.png b/doc/img/functionRealization/screenshot.png
new file mode 100644
index 0000000..91b3502
Binary files /dev/null and b/doc/img/functionRealization/screenshot.png differ
diff --git a/doc/img/functionRealization/template-bg.png b/doc/img/functionRealization/template-bg.png
new file mode 100644
index 0000000..cd97386
Binary files /dev/null and b/doc/img/functionRealization/template-bg.png differ
diff --git a/doc/img/functionRealization/template-ft.png b/doc/img/functionRealization/template-ft.png
new file mode 100644
index 0000000..bb84679
Binary files /dev/null and b/doc/img/functionRealization/template-ft.png differ
diff --git a/doc/zh/guide/componentDev/DSLAnalysis.md b/doc/zh/guide/componentDev/DSLAnalysis.md
index 42736ee..e4fef87 100644
--- a/doc/zh/guide/componentDev/DSLAnalysis.md
+++ b/doc/zh/guide/componentDev/DSLAnalysis.md
@@ -1 +1,65 @@
-DSL设计
+# DSL设计
+
+DSL层主要约定了Dooring组件的数据协议，包括组件的可编辑属性、编辑类型、初始值等，之所以定义一致的协议层，主要是方便后期的组件扩展，配置后移，有助于不同后端语言开发和数据存储，接下来我们看看header组件的schema。
+
+1.editData 可编辑的属性类型DSL
+
+2.config 可编辑组件的默认属性
+
+```js
+const Header: IHeaderSchema = {
+ editData: [
+ {
+ key: 'bgColor',
+ name: '背景色',
+ type: 'Color',
+ },
+ {
+ key: 'height',
+ name: '高度',
+ type: 'Number',
+ },
+ {
+ key: 'logo',
+ name: 'logo',
+ type: 'Upload',
+ isCrop: true,
+ cropRate: 1000 / 618,
+ },
+ {
+ key: 'logoText',
+ name: 'logo文字',
+ type: 'Text',
+ },
+ {
+ key: 'color',
+ name: '文字颜色',
+ type: 'Color',
+ },
+ {
+ key: 'fontSize',
+ name: '文字大小',
+ type: 'Number',
+ }
+ ],
+ config: {
+ bgColor: 'rgba(245,245,245,1)',
+ logo: [
+ {
+ uid: '001',
+ name: 'image.png',
+ status: 'done',
+ url: `${serverUrl}/uploads/3_1740be8a482.png`,
+ },
+ ],
+ logoText: '页头Header',
+ fontSize: 20,
+ color: 'rgba(47,84,235,1)',
+ height: 50
+ },
+};
+```
+
+由以上代码可知，我们可以在editData属性中给组件添加可编辑的属性，比如背景图，然后再component中接受属性从而设置样式。
+
+在config属性中，我们可以设置组件默认属性值，和editData中每一项的key一一对应。
diff --git a/doc/zh/guide/componentDev/componentStructure.md b/doc/zh/guide/componentDev/componentStructure.md
index 98e9412..d273357 100644
--- a/doc/zh/guide/componentDev/componentStructure.md
+++ b/doc/zh/guide/componentDev/componentStructure.md
@@ -1 +1,61 @@
-基本介绍--组件结构
+
+# 组件结构
+
+dooring的组件设计包含以下3个部分组件：
+
+ 1、component 组件主体
+
+ 2、schema 组件的DSL，结构协议层
+
+ 3、template 定义了组件的类型、外观、从属关系，后期考虑纳入schema
+
+接下来我会介绍一个基本的组件主体设计，以为template设计，在下一章会具体介绍schema部分。
+
+
+## 组件设计
+
+我们这里拿基本的header组件来举例，如下是header组件的代码：
+
+```jsx
+interface HeaderPropTypes extends IHeaderConfig {
+ isTpl: boolean;
+}
+
+const Header = memo((props: HeaderPropTypes) => {
+ const { bgColor, logo, logoText, fontSize, color } = props;
+ return props.isTpl ? (
+
+ < img style={{width: '100%'}} src={logos} alt="" />
+
+ ) : (
+
+ );
+});
+```
+
+我们只需要按照上面的方式编写组件即可，props是DSL定义的数据层，用来控制组件的shape，也就是组件的表现。我们看看header对应的template。
+
+## template设计
+
+```js
+const template = {
+ type: 'Header',
+ h: 28,
+ displayName: '页头组件'
+};
+export default template;
+```
+
+以上就是我们template的结构，type用来定义组件的类型，方便渲染器动态查找，h代表组件的初始化高度，我们可以自由设置。displayName是组件的中文名，用来在左侧组件面板中展示，方便用户理解，我们可以在template中自定义更多辅助信息，方便使用者更高效的使用我们的编辑器。
diff --git a/doc/zh/guide/componentDev/dynamicLoading.md b/doc/zh/guide/componentDev/dynamicLoading.md
index 51183fb..facde61 100644
--- a/doc/zh/guide/componentDev/dynamicLoading.md
+++ b/doc/zh/guide/componentDev/dynamicLoading.md
@@ -1 +1,17 @@
-动态加载
+
+# 组件动态加载
+
+目前H5-Dooring的组件都是通过动态加载的方式引入，好处是我们在页面中只会加载我们需要的组件，不需要的组件不会被加载，这样可以提高页面加载的速度，这样做也会出现一些问题，比如一个长页面，配置了很多组件，那么一个页面加载过程可以会触发多次请求，目前还没有遇到性能问题，但后续会逐渐优化这个问题。
+
+## umi3提供的dynamic
+
+目前组件的动态加载我们采用的umi的dynamic方案，基于它我们上层封装了一个组件动态加载器，原理如下：
+
+
+
+具体代码可以参考Dooring的Github地址：[https://github.com/MrXujiang/h5-Dooring](https://github.com/MrXujiang/h5-Dooring)
diff --git a/doc/zh/guide/functionRealization/generatePagesByJson.md b/doc/zh/guide/functionRealization/generatePagesByJson.md
deleted file mode 100644
index 3e38e5e..0000000
--- a/doc/zh/guide/functionRealization/generatePagesByJson.md
+++ /dev/null
@@ -1 +0,0 @@
-导入 json 生成页面
diff --git a/doc/zh/guide/functionRealization/machinePreview.md b/doc/zh/guide/functionRealization/machinePreview.md
index 23e0d91..23b74b5 100644
--- a/doc/zh/guide/functionRealization/machinePreview.md
+++ b/doc/zh/guide/functionRealization/machinePreview.md
@@ -1 +1,13 @@
-真机预览
+
+# 真机预览
+
+真机预览和网页预览的流程类似，工作流程如下：
+
+
+
+由于不同机型预览的效果有些许不同，最终效果以实际看到的为主。
diff --git a/doc/zh/guide/functionRealization/pagePreview.md b/doc/zh/guide/functionRealization/pagePreview.md
index cea34c0..b567fd4 100644
--- a/doc/zh/guide/functionRealization/pagePreview.md
+++ b/doc/zh/guide/functionRealization/pagePreview.md
@@ -1 +1,15 @@
-网页预览
+
+# 网页预览
+
+我们看看网页预览的工作流程：
+
+
+
+前端预览界面：
+
+
diff --git a/doc/zh/guide/functionRealization/revocation.md b/doc/zh/guide/functionRealization/revocation.md
index 7fcf5aa..cb3df7b 100644
--- a/doc/zh/guide/functionRealization/revocation.md
+++ b/doc/zh/guide/functionRealization/revocation.md
@@ -1 +1,35 @@
-撤销/重做
+
+# 撤销/重做
+
+撤销重做我们主要使用了redux-undo这个库，配合Dva使用，具体使用方法参考如下操作：
+
+```js
+import { createLogger } from 'redux-logger';
+import { message } from 'antd';
+import undoable, { StateWithHistory } from 'redux-undo';
+import { Reducer, AnyAction } from 'redux';
+
+export const dva = {
+ config: {
+ onAction: createLogger(),
+ onError(e: Error) {
+ message.error(e.message, 3);
+ },
+ onReducer: (reducer: Reducer) => {
+ let undoReducer = undoable(reducer);
+ return function(state: StateWithHistory, action: AnyAction) {
+ let newState = undoReducer(state, action);
+ let router = newState.present.router ? newState.present.router : newState.present.routing;
+ return { ...newState, router: router };
+ };
+ },
+ },
+};
+```
+
+以上我们就实现了全局配置redux-undo，在撤销重做按钮中我们就可以触发对应的方法来实现撤销重做的功能，其次我们还使用了redux-logger来实现redux的日志输出。
diff --git a/doc/zh/guide/functionRealization/saveJson.md b/doc/zh/guide/functionRealization/saveJson.md
index 0bceb1e..5a86175 100644
--- a/doc/zh/guide/functionRealization/saveJson.md
+++ b/doc/zh/guide/functionRealization/saveJson.md
@@ -1 +1,11 @@
-保存 json
+
+# 保存json
+
+我们配置好H5页面之后，如果希望其他人观看，我们可以保存页面并发送链接。但是如果有多人协作的需求，比如一个H5页面可能由多个人完成，这个时候该怎么实现呢？基于已有的方案，我们可以采用socket实现多人协同编辑，但是成本比较大，所有这里我们提供了保存json的功能。
+
+我们可以将配置好的页面导出为json，发送给另一个人，这样另一个人通过导入该json文件可以实时看到当前的页面，这里还是依靠我们的页面渲染引擎viewEngine。实现思路也很简单，可以在github[[https://github.com/MrXujiang/h5-Dooring](https://github.com/MrXujiang/h5-Dooring)]上参考体验。
diff --git a/doc/zh/guide/functionRealization/screenshot.md b/doc/zh/guide/functionRealization/screenshot.md
index f787c80..e93c7fe 100644
--- a/doc/zh/guide/functionRealization/screenshot.md
+++ b/doc/zh/guide/functionRealization/screenshot.md
@@ -1 +1,11 @@
-截图功能
+
+# 截图功能
+
+截图功能这里我们主要使用了dom-to-image这个库，来将html转化为图片，并进行分享。
+
+
diff --git a/doc/zh/guide/functionRealization/templateLibrary.md b/doc/zh/guide/functionRealization/templateLibrary.md
index d7210ff..bdc0ab9 100644
--- a/doc/zh/guide/functionRealization/templateLibrary.md
+++ b/doc/zh/guide/functionRealization/templateLibrary.md
@@ -1 +1,17 @@
-模板库
+
+## 模板库实现思路
+
+我们目前开放了模板库功能，一方面我们会定期配置行业模板，另一个方面Dooring还支持用户自己配置模板，可以一键保存到云端供用户使用。我们也可以将模板变成自己的页面共享给其他人。实现方式本质上是保存用户的配置信息，上传到服务器中做存储，在后台提供了管理模板的模块，可以修改，删除模板。如下图所示：
+
+### 模板前台展示：
+
+
+
+### 模板后台展示：
+
+