🆕 完善dooring文档

2025-12-11 01:12:49 +00:00 · 2021-01-17 21:57:34 +08:00 · 2021-01-17 21:57:34 +08:00 · ffeedd75f5
commit ffeedd75f5
parent a9aaff45c2
25 changed files with 308 additions and 255 deletions
--- a/doc/.vuepress/config.js
+++ b/doc/.vuepress/config.js
@ -5,23 +5,13 @@
 * @LastEditTime: 2020-12-18 16:46:50
 * @FilePath: /his-doc/docs/.vuepress/config.js
 */
-// const sidebar = require('./utils/gen-sidebar')()
-// const navConf = require("./nav.conf.json.js.js");
 const isDev = process.env.NODE_ENV === 'development';
 // console.log(process.env.NODE_ENV === 'development', 888)

 module.exports = {
  base: '/',
-  title: 'dooring',
-  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
-  // themeConfig: {
-  //     nav: navConf,
-  //     sidebarDepth: 3,
-  //     lastUpdated: "Last Updated",
-  //     repo: "winning-finance/his-doc",
-  //     repoLabel: "查看源码",
-  // },
-  dest: './dist',
+  title: 'h5-dooring',
+  dest: './doc-dist',
  themeConfig: {
    search: false,
    searchMaxSuggestions: 10,
@ -35,105 +25,99 @@ module.exports = {
    ],
    sidebar: [
      {
-        title: '基本介绍', // 必要的
-        path: '/zh/guide/', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-        collapsable: false, // 可选的, 默认值是 true,
-        sidebarDepth: 1, // 可选的, 默认值是 1
+        title: '基本介绍',
+        path: '/zh/guide/',
+        collapsable: false,
+        sidebarDepth: 1,
      },
      {
-        title: 'doring如何工作', // 必要的
-        path: '/zh/guide/introduced', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-        collapsable: false, // 可选的, 默认值是 true,
-        sidebarDepth: 1, // 可选的, 默认值是 1
+        title: 'doring如何工作',
+        path: '/zh/guide/introduced',
+        collapsable: false,
+        sidebarDepth: 1,
      },
      {
-        title: '快速上手', // 必要的
-        path: '/zh/guide/startedQuickly', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-        collapsable: false, // 可选的, 默认值是 true,
-        sidebarDepth: 1, // 可选的, 默认值是 1
+        title: '快速上手',
+        path: '/zh/guide/startedQuickly',
+        collapsable: false,
+        sidebarDepth: 1,
      },
      {
-        title: '目录结构', // 必要的
-        path: '/zh/guide/directoryStructure', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-        collapsable: false, // 可选的, 默认值是 true,
-        sidebarDepth: 1, // 可选的, 默认值是 1
+        title: '目录结构',
+        path: '/zh/guide/directoryStructure',
+        collapsable: false,
+        sidebarDepth: 1,
      },
      {
-        title: '组件开发', // 必要的
-        collapsable: false, // 可选的, 默认值是 true,
-        sidebarDepth: 1, // 可选的, 默认值是 1
+        title: '组件开发',
+        collapsable: false,
+        sidebarDepth: 1,
        type: 'group',
        children: [
          {
            name: 'componentStructure',
-            title: '组件结构', // 必要的
-            path: '/zh/guide/componentDev/componentStructure', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-            collapsable: false, // 可选的, 默认值是 true,
-            sidebarDepth: 2, // 可选的, 默认值是 1
+            title: '组件结构',
+            path: '/zh/guide/componentDev/componentStructure',
+            collapsable: false,
+            sidebarDepth: 2,
          },
          {
            name: 'DSLAnalysis',
-            title: 'DSL设计', // 必要的
-            path: '/zh/guide/componentDev/DSLAnalysis', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-            collapsable: false, // 可选的, 默认值是 true,
-            sidebarDepth: 2, // 可选的, 默认值是 1
+            title: 'DSL设计',
+            path: '/zh/guide/componentDev/DSLAnalysis',
+            collapsable: false,
+            sidebarDepth: 2,
          },
          {
            name: 'dynamicLoading',
-            title: '动态加载', // 必要的
-            path: '/zh/guide/componentDev/dynamicLoading', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-            collapsable: false, // 可选的, 默认值是 true,
-            sidebarDepth: 1, // 可选的, 默认值是 1
+            title: '动态加载',
+            path: '/zh/guide/componentDev/dynamicLoading',
+            collapsable: false,
+            sidebarDepth: 1,
          },
        ],
      },
      {
-        title: '功能实现', // 必要的
-        collapsable: false, // 可选的, 默认值是 true,
-        sidebarDepth: 1, // 可选的, 默认值是 1
+        title: '功能实现',
+        collapsable: false,
+        sidebarDepth: 1,
        type: 'group',
        children: [
          {
-            title: '模板库', // 必要的
-            path: '/zh/guide/functionRealization/templateLibrary', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-            collapsable: false, // 可选的, 默认值是 true,
-            sidebarDepth: 1, // 可选的, 默认值是 1
+            title: '模板库',
+            path: '/zh/guide/functionRealization/templateLibrary',
+            collapsable: false,
+            sidebarDepth: 1,
          },
          {
-            title: '保存json', // 必要的
-            path: '/zh/guide/functionRealization/saveJson', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-            collapsable: false, // 可选的, 默认值是 true,
-            sidebarDepth: 1, // 可选的, 默认值是 1
+            title: '保存json',
+            path: '/zh/guide/functionRealization/saveJson',
+            collapsable: false,
+            sidebarDepth: 1,
          },
          {
-            title: '导入json生成页面', // 必要的
-            path: '/zh/guide/functionRealization/generatePagesByJson', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-            collapsable: false, // 可选的, 默认值是 true,
-            sidebarDepth: 1, // 可选的, 默认值是 1
+            title: '网页预览',
+            path: '/zh/guide/functionRealization/pagePreview',
+            collapsable: false,
+            sidebarDepth: 1,
          },
          {
-            title: '网页预览', // 必要的
-            path: '/zh/guide/functionRealization/pagePreview', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-            collapsable: false, // 可选的, 默认值是 true,
-            sidebarDepth: 1, // 可选的, 默认值是 1
+            title: '真机预览',
+            path: '/zh/guide/functionRealization/machinePreview',
+            collapsable: false,
+            sidebarDepth: 1,
          },
          {
-            title: '真机预览', // 必要的
-            path: '/zh/guide/functionRealization/machinePreview', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-            collapsable: false, // 可选的, 默认值是 true,
-            sidebarDepth: 1, // 可选的, 默认值是 1
+            title: '撤销/重做',
+            path: '/zh/guide/functionRealization/revocation',
+            collapsable: false,
+            sidebarDepth: 1,
          },
          {
-            title: '撤销/重做', // 必要的
-            path: '/zh/guide/functionRealization/revocation', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-            collapsable: false, // 可选的, 默认值是 true,
-            sidebarDepth: 1, // 可选的, 默认值是 1
-          },
-          {
-            title: '截图功能', // 必要的
-            path: '/zh/guide/functionRealization/screenshot', // 可选的/, 标题的跳转链接，应为绝对路径且必须存在
-            collapsable: false, // 可选的, 默认值是 true,
-            sidebarDepth: 1, // 可选的, 默认值是 1
+            title: '截图功能',
+            path: '/zh/guide/functionRealization/screenshot',
+            collapsable: false,
+            sidebarDepth: 1,
          },
        ],
      },
--- a/doc/.vuepress/nav.conf.json
+++ b/doc/.vuepress/nav.conf.json
@ -1,9 +0,0 @@
-[
-  {
-    "text": "指南",
-    "link": "/guide/",
-    "sort": ["index", "quick-start", "introduction", "config", "api", "issues"]
-  },
-  { "text": "工具", "link": "/tool/" },
-  { "text": "规范", "link": "/standard/" }
-]
--- a/doc/.vuepress/public/favicon.ico
+++ b/doc/.vuepress/public/favicon.ico
--- a/doc/.vuepress/templates/dev.html
+++ b/doc/.vuepress/templates/dev.html
@ -11,7 +11,7 @@
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-        <link rel="icon" href="./favicon.png" rel="shortcut icon" type="image/vnd.microsoft.icon" />
+        <link rel="icon" href="/favcion.png" rel="shortcut icon" type="image/vnd.microsoft.icon" />
        <title>dooring-前端开发手册</title>
    </head>
    <body>
--- a/doc/.vuepress/theme/enhanceApp.js
+++ b/doc/.vuepress/theme/enhanceApp.js
@ -1,11 +1,3 @@
-/*
- * @Author: smallalso<hu141418@gmail.com>
- * @Date: 2020-11-16 11:07:22
- * @LastEditors: smallalso<hu141418@gmail.com>
- * @LastEditTime: 2020-12-15 17:46:54
- * @FilePath: /his-doc/docs/.vuepress/theme/enhanceApp.js
- */
-
 import './styles/main.scss';

 // 使用异步函数也是可以的
--- a/doc/.vuepress/theme/index.js
+++ b/doc/.vuepress/theme/index.js
@ -1,10 +1,3 @@
-/*
- * @Author: smallalso<hu141418@gmail.com>
- * @Date: 2020-12-14 16:55:21
- * @LastEditors: smallalso<hu141418@gmail.com>
- * @LastEditTime: 2020-12-14 16:55:22
- * @FilePath: /his-doc/docs/.vuepress/theme/index.js
- */
 module.exports = {
  extend: '@vuepress/theme-default',
 };
--- a/doc/.vuepress/theme/styles/_code.css
+++ b/doc/.vuepress/theme/styles/_code.css
@ -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;
- }
- 
--- 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';
--- a/doc/img/componentDev/dynamic.png
+++ b/doc/img/componentDev/dynamic.png
--- a/doc/img/functionRealization/preview-flow.png
+++ b/doc/img/functionRealization/preview-flow.png
--- a/doc/img/functionRealization/preview-machine.png
+++ b/doc/img/functionRealization/preview-machine.png
--- a/doc/img/functionRealization/preview-page.png
+++ b/doc/img/functionRealization/preview-page.png
--- a/doc/img/functionRealization/screenshot.png
+++ b/doc/img/functionRealization/screenshot.png
--- a/doc/img/functionRealization/template-bg.png
+++ b/doc/img/functionRealization/template-bg.png
--- a/doc/img/functionRealization/template-ft.png
+++ b/doc/img/functionRealization/template-ft.png
--- 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一一对应。
--- a/doc/zh/guide/componentDev/componentStructure.md
+++ b/doc/zh/guide/componentDev/componentStructure.md
@ -1 +1,61 @@
-基本介绍--组件结构
+<!--
+ * @Date: 2021-01-17 12:25:33
+ * @LastEditors: chentianshang
+ * @LastEditTime: 2021-01-17 19:42:42
+ * @FilePath: /github-h5-Dooring/doc/zh/guide/componentDev/componentStructure.md
+-->
+# 组件结构
+
+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 ? (
+    <div>
+      < img style={{width: '100%'}} src={logos} alt="" />
+    </div>
+  ) : (
+    <header className={styles.header} style={{ backgroundColor: bgColor }}>
+      <div className={styles.logo}>
+        < img src={logo && logo[0].url} alt={logoText} />
+      </div>
+      <div className={styles.title} style={{ fontSize, color }}>
+        {logoText}
+      </div>
+    </header>
+  );
+});
+```
+
+我们只需要按照上面的方式编写组件即可，props是DSL定义的数据层，用来控制组件的shape，也就是组件的表现。我们看看header对应的template。
+
+## template设计
+
+```js
+const template = {
+  type: 'Header',
+  h: 28,
+  displayName: '页头组件'
+};
+export default template;
+```
+
+以上就是我们template的结构，type用来定义组件的类型，方便渲染器动态查找，h代表组件的初始化高度，我们可以自由设置。displayName是组件的中文名，用来在左侧组件面板中展示，方便用户理解，我们可以在template中自定义更多辅助信息，方便使用者更高效的使用我们的编辑器。
--- a/doc/zh/guide/componentDev/dynamicLoading.md
+++ b/doc/zh/guide/componentDev/dynamicLoading.md
@ -1 +1,17 @@
-动态加载
+<!--
+ * @Date: 2021-01-17 14:24:40
+ * @LastEditors: chentianshang
+ * @LastEditTime: 2021-01-17 19:42:53
+ * @FilePath: /github-h5-Dooring/doc/zh/guide/componentDev/dynamicLoading.md
+-->
+# 组件动态加载
+
+目前H5-Dooring的组件都是通过动态加载的方式引入，好处是我们在页面中只会加载我们需要的组件，不需要的组件不会被加载，这样可以提高页面加载的速度，这样做也会出现一些问题，比如一个长页面，配置了很多组件，那么一个页面加载过程可以会触发多次请求，目前还没有遇到性能问题，但后续会逐渐优化这个问题。
+
+## umi3提供的dynamic
+
+目前组件的动态加载我们采用的umi的dynamic方案，基于它我们上层封装了一个组件动态加载器，原理如下：
+
+<img src="../../../img/componentDev/dynamic.png" alt="foo">
+
+具体代码可以参考Dooring的Github地址：[https://github.com/MrXujiang/h5-Dooring](https://github.com/MrXujiang/h5-Dooring)
--- a/doc/zh/guide/functionRealization/generatePagesByJson.md
+++ b/doc/zh/guide/functionRealization/generatePagesByJson.md
@ -1 +0,0 @@
-导入 json 生成页面
--- a/doc/zh/guide/functionRealization/machinePreview.md
+++ b/doc/zh/guide/functionRealization/machinePreview.md
@ -1 +1,13 @@
-真机预览
+<!--
+ * @Date: 2021-01-17 14:27:13
+ * @LastEditors: chentianshang
+ * @LastEditTime: 2021-01-17 21:49:26
+ * @FilePath: /github-h5-Dooring/doc/zh/guide/functionRealization/machinePreview.md
+-->
+# 真机预览
+
+真机预览和网页预览的流程类似，工作流程如下：
+
+<img src="../../../img/functionRealization/preview-machine.png" alt="foo">
+
+由于不同机型预览的效果有些许不同，最终效果以实际看到的为主。
--- a/doc/zh/guide/functionRealization/pagePreview.md
+++ b/doc/zh/guide/functionRealization/pagePreview.md
@ -1 +1,15 @@
-网页预览
+<!--
+ * @Date: 2021-01-17 14:26:41
+ * @LastEditors: chentianshang
+ * @LastEditTime: 2021-01-17 21:49:18
+ * @FilePath: /github-h5-Dooring/doc/zh/guide/functionRealization/pagePreview.md
+-->
+# 网页预览
+
+我们看看网页预览的工作流程：
+
+<img src="../../../img/functionRealization/preview-flow.png" alt="foo">
+
+前端预览界面：
+
+<img src="../../../img/functionRealization/preview-page.png" alt="foo">
--- a/doc/zh/guide/functionRealization/revocation.md
+++ b/doc/zh/guide/functionRealization/revocation.md
@ -1 +1,35 @@
-撤销/重做
+<!--
+ * @Date: 2021-01-17 14:27:28
+ * @LastEditors: chentianshang
+ * @LastEditTime: 2021-01-17 21:50:17
+ * @FilePath: /github-h5-Dooring/doc/zh/guide/functionRealization/revocation.md
+-->
+# 撤销/重做
+
+撤销重做我们主要使用了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<any, AnyAction>) => {
+      let undoReducer = undoable(reducer);
+      return function(state: StateWithHistory<any>, 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的日志输出。
--- a/doc/zh/guide/functionRealization/saveJson.md
+++ b/doc/zh/guide/functionRealization/saveJson.md
@ -1 +1,11 @@
-保存 json
+<!--
+ * @Date: 2021-01-17 14:26:00
+ * @LastEditors: chentianshang
+ * @LastEditTime: 2021-01-17 21:32:58
+ * @FilePath: /github-h5-Dooring/doc/zh/guide/functionRealization/saveJson.md
+-->
+# 保存json
+
+我们配置好H5页面之后，如果希望其他人观看，我们可以保存页面并发送链接。但是如果有多人协作的需求，比如一个H5页面可能由多个人完成，这个时候该怎么实现呢？基于已有的方案，我们可以采用socket实现多人协同编辑，但是成本比较大，所有这里我们提供了保存json的功能。
+
+我们可以将配置好的页面导出为json，发送给另一个人，这样另一个人通过导入该json文件可以实时看到当前的页面，这里还是依靠我们的页面渲染引擎viewEngine。实现思路也很简单，可以在github[[https://github.com/MrXujiang/h5-Dooring](https://github.com/MrXujiang/h5-Dooring)]上参考体验。
--- a/doc/zh/guide/functionRealization/screenshot.md
+++ b/doc/zh/guide/functionRealization/screenshot.md
@ -1 +1,11 @@
-截图功能
+<!--
+ * @Date: 2021-01-17 14:27:49
+ * @LastEditors: chentianshang
+ * @LastEditTime: 2021-01-17 21:49:46
+ * @FilePath: /github-h5-Dooring/doc/zh/guide/functionRealization/screenshot.md
+-->
+# 截图功能
+
+截图功能这里我们主要使用了dom-to-image这个库，来将html转化为图片，并进行分享。
+
+<img src="../../../img/functionRealization/screenshot.png" alt="foo">
--- a/doc/zh/guide/functionRealization/templateLibrary.md
+++ b/doc/zh/guide/functionRealization/templateLibrary.md
@ -1 +1,17 @@
-模板库
+<!--
+ * @Date: 2021-01-17 14:25:29
+ * @LastEditors: chentianshang
+ * @LastEditTime: 2021-01-17 21:48:34
+ * @FilePath: /github-h5-Dooring/doc/zh/guide/functionRealization/templateLibrary.md
+-->
+## 模板库实现思路
+
+我们目前开放了模板库功能，一方面我们会定期配置行业模板，另一个方面Dooring还支持用户自己配置模板，可以一键保存到云端供用户使用。我们也可以将模板变成自己的页面共享给其他人。实现方式本质上是保存用户的配置信息，上传到服务器中做存储，在后台提供了管理模板的模块，可以修改，删除模板。如下图所示：
+
+### 模板前台展示：
+
+<img src="../../../img/functionRealization/template-ft.png" alt="foo">
+
+### 模板后台展示：
+
+<img src="../../../img/functionRealization/template-bg.png" alt="foo">