docs: 1.2.0文档

.github/workflows/pages.yml

@@ -38,7 +38,7 @@ jobs:
         run: mkdir dist && mkdir dist/docs && mkdir dist/playground
 
       - name: move to dist
-        run: mv docs/dist/* dist/docs && mv playground/dist/* dist/playground
+        run: mv docs/.vitepress/dist/* dist/docs && mv playground/dist/* dist/playground
 
       - name: Deploy to GitHub Pages
         uses: crazy-max/ghaction-github-pages@v2

docs/.gitignore

@@ -1,3 +0,0 @@
-node_modules
-.temp
-.cache

docs/.vitepress/config.ts

@@ -0,0 +1,395 @@
+import path from 'path';
+import { defineConfig, DefaultTheme } from 'vitepress'
+
+export default defineConfig({
+  title: 'tmagic-editor',
+  description: '页面可视化平台',
+
+  head: [
+    ['meta', { name: 'theme-color', content: '#646cff' }],
+  ],
+
+  themeConfig: {
+    logo: './favicon.png',
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/Tencent/tmagic-editor' }
+    ],
+
+    footer: {
+      message: 'Powered by 腾讯视频会员平台技术中心',
+      copyright: 'Copyright (C) 2021 THL A29 Limited, a Tencent company.'
+    },
+
+    nav: [
+      { text: '文档', link: '/guide/', activeMatch: '/guide/' },
+      { text: 'API', link: '/api/editor/props', activeMatch: '/api/' },
+      { text: '表单配置', link: '/form-config/fields/text', activeMatch: '/form-config/' },
+      { text: '更新日志', link: 'https://github.com/Tencent/tmagic-editor/releases' },
+      { text: 'Playground', link: 'https://tencent.github.io/tmagic-editor/playground/index.html' },
+    ],
+
+    sidebar: {
+      '/guide/': [
+        {
+          text: '文档',
+          items: [
+            {
+              text: '介绍',
+              link: '/guide/introduction.md'
+            },
+            {
+              text: '快速开始',
+              link: '/guide/'
+            },
+            {
+              text: '基础概念',
+              link: '/guide/conception.md',
+            },
+            {
+              text: '页面发布',
+              link: '/guide/publish.md'
+            },
+            {
+              text: 'RUNTIME',
+              link: '/guide/runtime.md'
+            },
+            {
+              text: '组件开发',
+              link: '/guide/component.md'
+            },
+            {
+              text: '编辑器扩展',
+              link: '/guide/editor-expand.md'
+            },
+          ]
+        },
+        {
+          text: '进阶指南',
+          items: [
+            {
+              text: 'JS Schema',
+              link: '/guide/advanced/js-schema.md',
+            },
+            {
+              text: '布局原理',
+              link: '/guide/advanced/layout.md',
+            },
+            {
+              text: '页面渲染',
+              link: '/guide/advanced/page.md',
+            },
+            {
+              text: '联动原理',
+              link: '/guide/advanced/coupling.md',
+            },
+            {
+              text: '代码块',
+              link: '/guide/advanced/code-block.md',
+            },
+            {
+              text: '@tmagic/ui',
+              link: '/guide/advanced/tmagic-ui.md',
+            },
+            {
+              text: '@tmagic/form',
+              link: '/guide/advanced/tmagic-form.md',
+            },
+          ],
+        },
+        {
+          text: '教程',
+          items: [
+            {
+              text: '写在前面',
+              link: '/guide/tutorial/'
+            },
+            {
+              text: '1.Hello World',
+              link: '/guide/tutorial/hello-world.md'
+            },
+            {
+              text: '2.Runtime',
+              link: '/guide/tutorial/runtime.md'
+            },
+            {
+              text: '3.DSL解析渲染',
+              link: '/guide/tutorial/render.md'
+            }
+          ]
+        }
+      ],
+      '/api/': [
+        {
+          text: '编辑器',
+          items: [
+            {
+              text: 'Editor组件',
+              items: [
+                {
+                  text: 'props',
+                  link: '/api/editor/props.md'
+                },
+                {
+                  text: 'slots',
+                  link: '/api/editor/slots.md'
+                },
+                {
+                  text: 'events',
+                  link: '/api/editor/events.md'
+                },
+              ]
+            },
+            {
+              text: 'editorService',
+              items: [
+                {
+                  text: '方法',
+                  link: '/api/editor/editorServiceMethods.md',
+                },
+                {
+                  text: '事件',
+                  link: '/api/editor/editorServiceEvents.md',
+                },
+              ],
+            },
+            {
+              text: 'propsService',
+              items: [
+                {
+                  text: '方法',
+                  link: '/api/editor/propsServiceMethods.md',
+                },
+                {
+                  text: '事件',
+                  link: '/api/editor/propsServiceEvents.md',
+                }
+              ],
+            },
+            {
+              text: 'historyService',
+              items: [
+                {
+                  text: '方法',
+                  link: '/api/editor/historyServiceMethods.md',
+                },
+                {
+                  text: '事件',
+                  link: '/api/editor/historyServiceEvents.md',
+                }
+              ],
+            },
+            {
+              text: 'eventsService',
+              link: '/api/editor/eventsServiceMethods.md',
+            },
+            {
+              text: 'uiService',
+              link: '/api/editor/uiServiceMethods.md',
+            },
+            {
+              text: 'codeBlockService',
+              link: '/api/editor/codeBlockServiceMethods.md',
+            },
+            {
+              text: 'componentListService',
+              link: '/api/editor/componentListServiceMethods.md',
+            },
+            {
+              text: 'storageService',
+              link: '/api/editor/storageServiceMethods.md',
+            },
+          ]
+        },
+        {
+          text: '表单',
+          items: [
+            {
+              text: 'Form组件',
+              items: [
+                {
+                  text: 'props',
+                  link: '/api/form/form-props'
+                },
+                {
+                  text: 'methods',
+                  link: '/api/form/form-methods'
+                },
+                {
+                  text: 'events',
+                  link: '/api/form/form-events'
+                },
+              ]
+            },
+            {
+              text: 'FormDialog组件',
+              items: [
+                {
+                  text: 'props',
+                  link: '/api/form/form-dialog-props'
+                },
+                {
+                  text: 'methods',
+                  link: '/api/form/form-dialog-methods'
+                },
+                {
+                  text: 'events',
+                  link: '/api/form/form-dialog-events'
+                },
+              ]
+            },
+          ],
+        },
+        {
+          text: '表格',
+          items: [
+            {
+              text: 'Table组件',
+              items: [
+                {
+                  text: 'props',
+                  link: '/api/table/props'
+                },
+                {
+                  text: 'methods',
+                  link: '/api/table/methods'
+                },
+                {
+                  text: 'events',
+                  link: '/api/table/events'
+                },
+              ]
+            }
+          ]
+        },
+        {
+          text: 'stage',
+          items: [
+            {
+              text: 'StageCore',
+              items: [
+                {
+                  text: '方法',
+                  link: '/api/stage/coreMethods',
+                },
+                {
+                  text: '事件',
+                  link: '/api/stage/coreEvents',
+                }
+              ]
+            },
+          ],
+        },
+      ],
+      '/form-config/': [
+        {
+          text: '基础配置',
+          items: [
+            {
+              text: 'Input输入框',
+              link: '/form-config/fields/text.md'
+            },
+            {
+              text: 'Textarea文本域',
+              link: '/form-config/fields/textarea.md'
+            },
+            {
+              text: 'InputNumber计数器',
+              link: '/form-config/fields/number.md'
+            },
+            {
+              text: 'Display只读文本',
+              link: '/form-config/fields/display.md'
+            },
+            {
+              text: 'Hidden隐藏域',
+              link: '/form-config/fields/hidden.md'
+            },
+            {
+              text: 'Link链接',
+              link: '/form-config/fields/link.md'
+            },
+            {
+              text: 'Checkbox多选框',
+              link: '/form-config/fields/checkbox.md'
+            },
+            {
+              text: 'Radio单选框',
+              link: '/form-config/fields/radio.md'
+            },
+            {
+              text: 'Switch开关',
+              link: '/form-config/fields/switch.md'
+            },
+            {
+              text: 'Select选择器',
+              link: '/form-config/fields/select.md'
+            },
+            {
+              text: 'Cascader级联选择器',
+              link: '/form-config/fields/select.md'
+            },
+            {
+              text: 'ColorPicker颜色选择器',
+              link: '/form-config/fields/color-picker.md'
+            },
+            {
+              text: 'DatePick日期选择器',
+              link: '/form-config/fields/date-picker.md'
+            },
+            {
+              text: 'DatetimePick日期时间选择器',
+              link: '/form-config/fields/datetime-picker.md'
+            },
+            {
+              text: 'TimePick时间选择器',
+              link: '/form-config/fields/time-picker.md'
+            }
+          ]
+        },
+        {
+          text: '布局配置',
+          items: [
+            {
+              text: '布局',
+              link: '/form-config/layout.md',
+            }
+          ]
+        },
+        {
+          text: '联动配置',
+          items: [
+            {
+              text: '联动',
+              link: '/form-config/relate.md',
+            }
+          ]
+        }
+      ]
+    },
+  },
+
+  vite: {
+    base: '/tmagic-editor/docs/',
+
+    optimizeDeps: {
+      esbuildOptions: {
+        define: {
+          global: 'globalThis',
+        },
+      },
+    },
+    resolve: {
+      alias:[
+        { find: /^@tmagic\/form/, replacement: path.join(__dirname, '../../packages/form/src/index.ts') },
+        { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
+        { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
+        { find: /^@tmagic\/design/, replacement: path.join(__dirname, '../../packages/design/src/index.ts') },
+        { find: /^@tmagic\/element-plus-adapter/, replacement: path.join(__dirname, '../../packages/element-plus-adapter/src/index.ts') },
+      ]
+    },
+    ssr: {
+      noExternal: ['lodash-es'],
+    }
+  }
+});

docs/.vitepress/theme/index.ts

@@ -1,16 +1,21 @@
 import 'element-plus/dist/index.css';
 import 'highlight.js/styles/github.css';
 
-import './polyfills';
-import { defineClientConfig  } from '@vuepress/client';
 import ElementPlus from 'element-plus';
+import Theme from 'vitepress/theme';
+
 import TMagicDesign from '@tmagic/design';
 import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
 import MagicForm from '@tmagic/form';
-import DemoBlock from './demo-block.vue';
 
-export default defineClientConfig({
+import DemoBlock from './components/demo-block.vue';
-  enhance({ app, router, siteData }) {
+
+import './styles/vars.css';
+
+export default {
+  ...Theme,
+
+  enhanceApp({ app }) {
     app.use(ElementPlus);
     app.use(TMagicDesign, MagicElementPlusAdapter)
     app.use(MagicForm, {
@@ -35,8 +40,7 @@ export default defineClientConfig({
         }
       }),
     });
+
     app.component('demo-block', DemoBlock);
   },
-  setup() {},
+};
-  rootComponents: [],
-})

docs/.vitepress/theme/styles/vars.css

@@ -0,0 +1,10 @@
+:root {
+  --vp-c-brand: #2882e0;
+  --vp-button-brand-border: #2882e0;
+  --vp-button-brand-hover-border: #2882e0;
+  --vp-c-brand-light: #559ce7;
+  --vp-c-brand-lighter: #2882e0;
+  --vp-c-brand-lightest: #2882e0;
+  --vp-c-brand-dark: #2882e0;
+  --vp-c-brand-darker: #2882e0;
+}

docs/api/editor/codeBlockServiceMethods.md

@@ -0,0 +1,357 @@
+# codeBlockService方法
+
+
+
+## setCodeDsl
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getCodeDsl
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getCodeDslSync
+
+## getCodeContentById
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setCodeDslById
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getCodeDslByIds
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setCodeEditorShowStatus
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getCodeEditorShowStatus
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setCodeEditorContent
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getCurrentDsl
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getEditStatus
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+## setEditStatus
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setId
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getId
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getMode
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setMode
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setCombineIds
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getCombineIds
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## refreshCombineInfo
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getCombineInfo
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getUndeletableList
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setUndeleteableList
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setCodeDraft
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getCodeDraft
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## removeCodeDraft
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## deleteCodeDslByIds
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getUniqueId
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## deleteCompsInRelation
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## destroy
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**

docs/api/editor/componentListServiceMethods.md

@@ -0,0 +1,37 @@
+# componentListService方法
+
+## setList
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getList
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## destroy
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**

docs/api/editor/editorServiceEvents.md

@@ -0,0 +1,35 @@
+
+# editorService事件
+
+## root-change
+
+- **详情：** dsl跟节点发生变化，[editorService.set('root', {})](./editorServiceMethods.md#set)后触发
+
+- **回调函数：** (value: [MApp](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73) => void
+
+## select
+
+- **详情：** 选中组价，[editorService.select()](./editorServiceMethods.md#select)后触发
+
+- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)) => void
+
+## add
+
+- **详情：** 选中组价，[editorService.add()](./editorServiceMethods.md#add)后触发
+
+- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]) => void
+
+
+## remove
+
+- **详情：** 选中组价，[editorService.remove()](./editorServiceMethods.md#remove)后触发
+
+- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]) => void
+
+
+## update
+
+- **详情：** 选中组价，[editorService.update()](./editorServiceMethods.md#update)后触发
+
+- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]) => void
+

docs/api/editor/editorServiceMethods.md

@@ -0,0 +1,632 @@
+# editorService方法
+
+## get
+
+- **参数：**
+
+  - `{'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'modifiedNodeIds' | 'pageLength' | 'stage'} name`
+
+- **返回：**
+
+  - `{any} value`
+  
+- **详情：**
+
+  获取当前指指定name的值
+  
+  'root': 当前整个配置，也就是当前编辑器的值
+
+  'page': 当前正在编辑的页面配置
+
+  'parent': 当前选中的节点的父节点
+
+  'node': 当前选中的第一个节点
+
+  'highlightNode': 当前高亮的节点
+
+  'nodes': 当前选中的所有节点
+
+  'modifiedNodeIds': 当前页面所有改动过的节点id
+
+  'pageLength': 所以页面个数
+
+  'stage': [StageCore](../stage/coreMethods.md)实例
+
+- **示例：**
+
+```js
+import { editorService } from '@tmagic/editor';
+
+const node = editorService.get('node');
+```
+
+## set
+  - `{'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'modifiedNodeIds' | 'pageLength' | 'stage'} name`
+  - `{any} value`
+
+- **详情：**
+  参考[get](#get)方法
+
+- **示例：**
+
+```js
+import { editorService } from '@tmagic/editor';
+
+const node = editorService.get('node');
+
+editorService.set('node', {
+  ...node,
+  name: 'new name'
+});
+
+```
+
+## getNodeInfo
+
+- **参数：**
+
+  - `{number | string}` id 组件id
+  
+  - `{boolean}` raw 是否使用toRaw，默认为true
+
+:::tip
+如果raw为false，对获取到的对象进行操作会触发vue响应式处理
+:::
+
+- **返回：**
+
+  - {[EditorNodeInfo](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L139-L143)}
+
+- **详情：**
+
+  根据id获取组件、组件的父组件以及组件所属的页面节点
+
+- **示例：**
+
+```js
+import { editorService } from '@tmagic/editor';
+
+const info = editorService.getNodeInfo('text_123');
+
+console.log(info.node);
+console.log(info.parent);
+console.log(info.page);
+```
+
+## getNodeById
+
+- **参数：**
+
+  - `{number | string}` id
+  
+  - `{boolean}` raw 是否使用toRaw，默认为true
+
+- **返回：**
+
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} 组件节点配置
+
+- **详情：**
+
+  根据id获取组件的信息
+
+- **示例：**
+
+```js
+import { editorService } from '@tmagic/editor';
+
+const node = editorService.getNodeById('text_123');
+
+console.log(node);
+```
+
+## getParentById
+
+- **参数：**
+
+  - `{number | string}` id
+  
+  - `{boolean}` raw 是否使用toRaw，默认为true
+
+- **返回：**
+
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} 指点组件的父节点配置
+
+- **详情：**
+
+  根据ID获取指点节点的父节点配置
+
+- **示例：**
+
+```js
+import { editorService } from '@tmagic/editor';
+
+const parent = editorService.getParentById('text_123');
+
+console.log(parent);
+```
+
+## getLayout
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} parent
+  
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} node 可选
+
+- **返回：**
+
+  - {Promise<[Layout](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L297-L302)>} 当前布局模式
+
+- **详情：**
+
+  只有容器拥有布局，目前支持的布局有流式布局（relative），绝对定位布局（absolute），固定定位布局（fixed）
+
+  :::tip
+  固定定位布局需要从当前选中节点判断，固需要传递可选参数 node
+
+  其他布局则是从父组件（容器）来判断
+  :::
+
+- **示例：**
+
+```js
+import { editorService } from '@tmagic/editor';
+
+const parent = editorService.getParentById('text_123');
+editorService.getLayout(parent).then((layout) => {
+  console.log(parent);
+});
+```
+
+## select
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {number | string | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要选中的节点或节点ID
+
+- **返回：**
+
+  - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} 当前选中的节点配置
+
+- **详情：**
+
+  选中指点节点（将指点节点设置成当前选中状态）
+
+  :::tip
+  editorService.select只是设置了编辑器的选中状态，并没有设置画布的选中状态，所以根据实际情况可以调用[stage.select](../stage/coreMethods.md#select)来设置画布的选中态
+  :::
+
+- **示例：**
+
+```js
+import { editorService } from '@tmagic/editor';
+
+editorService.select('text_123');
+editorService.get('stage')?.select('text_123');
+```
+
+## multiSelect
+
+- **参数：**
+
+  - {(number | string)[]} ids 需要选中的节点ID集合
+  
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+  选中多个节点
+
+  :::tip
+  editorService.multiSelect只是设置了编辑器的选中状态，并没有设置画布的选中状态，所以根据实际情况可以调用[stage.multiSelect](../stage/coreMethods.md#multiSelect)来设置画布的选中态
+  :::
+
+- **示例：**
+
+```js
+import { editorService } from '@tmagic/editor';
+
+editorService.multiSelect(['text_123', 'button_123']);
+editorService.get('stage')?.multiSelect(['text_123', 'button_123']);
+```
+
+## highlight
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {number | string | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要高亮的节点或节点ID
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+  高亮指定节点
+
+- **示例：**
+
+```js
+import { editorService } from '@tmagic/editor';
+
+editorService.highlight('text_123');
+```
+
+## doAdd
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} node 新组件节点
+
+  - {[MContainer](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L54-L59)} parent 指定的容器节点
+
+- **返回：**
+
+  - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} 新增的组件
+
+- **详情：**
+
+  往指定的容器中添加组件
+
+## add
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]} node 新组件节点配置或多个节点集合
+
+  - {[MContainer](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L54-L59)} parent 指定的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
+
+- **返回：**
+
+  - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} 新增的组件或组件集合
+
+- **详情：**
+
+  往指定的容器或当前容器中添加组件
+
+  :::tip
+  **与[doAdd](#doadd)的区别：**
+
+  add可以支持一次添加多个组件，add是通过调用[doAdd](#doadd)来最终实现添加的。
+
+  编辑器内部添加组件都是调用add来实现的，add除了添加操作外，还会记录历史堆栈，还会更新编辑中相关的状态，而[doAdd](#doadd)就仅仅是完成添加的行为
+  :::
+
+## doRemove
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+  
+- **参数：**
+
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} node 要删除的节点
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+  删除指定的组件或者页面
+
+
+## remove
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[])} node 要删除的节点或节点集合
+  
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+  删除指定的组件或者页面或组件集合
+
+  :::tip
+  **与[doRemove](#doRemove)的区别：**
+
+  remove可以支持一次删除多个组件，remove是通过调用[doRemove](#doRemove)来最终实现删除的。
+
+  编辑器内部删除组件都是调用remove来实现的，remove除了删除操作外，还会记录历史堆。
+  :::
+
+## doUpdate
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+ - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99))} node 新的节点
+
+- **返回：**
+
+  - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} 新的节点
+
+- **详情：**
+
+  更新节点
+
+  :::tip
+  节点中应该要有id，不然不知道要更新哪个节点
+  :::
+
+## update
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} node 新的节点或节点集合
+
+
+- **返回：**
+
+  - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} 新的节点或节点集合
+
+- **详情：**
+
+  更新单个或多个节点
+
+  :::tip
+  **与[doUpdate](#doupdate)的区别：**
+
+  update可以支持一次更新多个组件，update是通过调用[doUpdate](#doupdate)来最终实现更新的。
+
+  编辑器内部更新组件都是调用update来实现的，update除了更新操作外，还会记录历史堆，还会更新[代码块](../../guide/advanced/code-block.md)关系链。
+  :::
+
+## sort
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{ string | number }` id1
+  - `{ string | number }` id2
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+  将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
+
+  用于流式布局下的组件拖动更新
+
+## copy
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} node 需要复制的节点或节点集合
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+  
+复制组件节点或节点集合
+
+通过[storageService.setItem](./storageServiceMethods.md#setitem),将组将节点配置转化成string，然后存储到localStorage中
+
+## doPaste
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+粘贴前置操作：返回分配了新id以及校准了坐标的配置
+
+## paste
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[PastePosition](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L152-L163)} position 粘贴的坐标
+
+- **返回：**
+
+  - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>}  添加后的组件节点配置
+
+- **详情：**
+
+粘贴组件节点或节点集合
+
+通过[storageService.getItem](./storageServiceMethods.md#setitem),从localStorage中获取节点，然后添加到当前容器中
+
+
+## doAlignCenter
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要居中的组件
+
+- **返回：**
+
+  - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>}
+
+- **详情：**
+
+  水平居中组件节点，仅在[流式布局](../../guide/advanced/layout.md)下有效
+
+  :::warning
+  仅是计算出left，并未更新到编辑器中
+  :::
+
+## alignCenter
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} config 需要居中的组件或者组件集合
+
+- **返回：**
+
+  - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>}
+
+
+- **详情：**
+
+水平居中组件或者组件集合，仅在[流式布局](../../guide/advanced/layout.md)下有效
+
+:::tip
+**与[doAlignCenter](#doaligncentere)的区别：**
+
+alignCenter可以支持一次水平居中多个组件，alignCenter是通过调用[doAlignCenter](#doaligncentere)来获取到已设置好水平居中的位置信息的节点，然后调用update更新。
+:::
+## moveLayer
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{number | 'top' | 'bottom'}` offset
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+  移动当前选中节点位置
+
+  用于实现上移一层、下移一层、置顶、置底
+
+
+## moveToContainer
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要移动的节点
+  - `{string | number}` targetId 容器ID
+
+- **返回：**
+
+  - Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | undefined>
+
+- **详情：**
+
+  移动到指定容器中
+
+## undo
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **返回：**
+
+  - {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
+
+- **详情：**
+
+  撤销当前操作
+
+## redo
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **返回：**
+
+  - {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
+
+- **详情：**
+
+  恢复到下一步
+
+## move
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{number}` left
+  - `{number}` top
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+  更新当前选中组件位置，通常用于键盘上下左右快捷键操作
+
+## destroy
+
+- **详情：**
+
+  销毁editorService
+
+## resetModifiedNodeId
+
+- **详情：**
+
+重置当前记录的修改过的节点id记录，通常用于保存之后
+
+## getCodeDsl
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **返回：**
+
+  - {Promise<[CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L75) | null>}
+
+- **详情：**
+
+  从dsl中的codeBlocks字段读取活动的代码块
+
+## getCodeDslSync
+
+- **返回：**
+
+  - [CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L75) | null
+
+- **详情：**
+  
+  从dsl中的codeBlocks字段读取活动的代码块
+
+## setCodeDsl
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L75)} CodeBlockDSL
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+  设置代码块到dsl的codeBlocks字段

docs/api/editor/events.md

@@ -0,0 +1,7 @@
+# Editor组件 events
+
+## props-panel-mounted
+
+- **详情：** 编辑器右侧组件属性配置加载完毕后触发
+
+- **回调函数：** (formState: [FomState](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)) => void

docs/api/editor/eventsServiceMethods.md

@@ -0,0 +1,97 @@
+# eventService方法
+
+## init
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setEvents
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setEvent
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getEvent
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setMethods
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setMethod
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getMethod
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## destroy
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**

docs/api/editor/historyServiceEvents.md

@@ -0,0 +1,14 @@
+# historyService事件
+
+## page-change
+
+- **详情：** 页面切换
+
+- **回调函数：** (undoRedo: [undoRedo](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/utils/undo-redo.ts)) => void
+
+## change
+
+- **详情：** 历史记录发生变化
+
+- **回调函数：** (state: [StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404)) => void
+

docs/api/editor/historyServiceMethods.md

@@ -0,0 +1,62 @@
+# historyService方法
+
+## reset
+
+- **详情：**
+
+  重置记录
+
+## changePage
+
+- **参数：**
+
+  - {[MPage](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L61)} page
+
+- **详情：**
+
+  按页面切换历史堆栈
+
+## empty
+
+- **详情：**
+
+  重置记录，同[reset](#reset)
+## push
+
+- **参数：**
+
+  - {[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404)} state
+
+- **返回：**
+
+  - {[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null}
+
+- **详情：**
+
+  添加一条历史记录
+
+## undo
+
+- **返回：**
+
+  - {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
+
+- **详情：**
+
+  撤销当前操作
+
+## redo
+
+- **返回：**
+
+  - {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
+
+- **详情：**
+
+  恢复到下一步
+
+## destroy
+
+- **详情：**
+
+  销毁

docs/api/editor/props.md

@@ -0,0 +1,776 @@
+# Editor组件 props
+
+## modelValue/v-model
+
+- **详情：**
+  
+  页面初始值
+
+- **默认值：** `{}`
+  
+
+- **类型：** [MApp](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73)[]
+
+- **示例：**
+  
+```html
+<template>
+  <m-editor v-model="dsl"></m-editor>
+</template>
+
+<script setup>
+import { ref } from 'Vue';
+
+const dsl = ref({
+  type: 'app',
+  id: 'app_1',
+  items: [
+    {
+      type: 'page',
+      id: 'page_1',
+      items: [
+        {
+          type: 'text',
+          id: 'text_1',
+          text: '文本'
+        },
+      ],
+    },
+  ],
+});
+</script>
+```
+
+## componentGroupList
+
+- **详情：**
+  
+  左侧面板中的组件列表
+
+- **默认值：** `[]`
+
+- **类型：** [ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L279-L284)
+
+::: tip
+icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
+
+也可直接使用url，例如
+```js
+{
+  icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'
+}
+```
+:::
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :component-group-list="componentGroupList"></m-editor>
+</template>
+
+<script setup>
+import { ref, markRaw } from 'Vue';
+import { FolderOpened, SwitchButton, Tickets } from '@element-plus/icons-vue';
+
+const componentGroupList = ref([
+  {
+    title: '容器',
+    items: [
+      {
+        icon: markRaw(FolderOpened),
+        text: '组',
+        type: 'container',
+      },
+    ],
+  },
+  {
+    title: '基础组件',
+    items: [
+      {
+        icon: markRaw(Tickets),
+        text: '文本',
+        type: 'text',
+      },
+      {
+        icon: markRaw(SwitchButton),
+        text: '按钮',
+        type: 'button',
+      },
+    ],
+  },
+]);
+</script>
+```
+
+::: warning
+此配置仅在[sidebar](#sidebar)中配置了'component-list'时有效
+:::
+
+## sidebar
+
+- **详情：**
+  
+  左侧面板，目前只支持type: 'tabs';
+
+- **默认值：** 
+
+```js
+{
+  type: 'tabs',
+  status: '组件',
+  items: ['component-list', 'layer', 'code-block'],
+}
+```
+
+- **类型：** [SideBarData](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L258-L265)
+
+- **示例：**
+  
+```html
+<template>
+  <m-editor :sidebar="sidebar"></m-editor>
+</template>
+
+<script setup>
+import { ref, markRaw } from 'Vue';
+import { List } from '@element-plus/icons-vue';
+import ModListPanel from '../components/sidebars/ModListPanel.vue';
+
+const sidebar = ref({
+  type: 'tabs',
+  status: '组件',
+  items: [
+    'component-list',
+    'layer',
+    {
+      type: 'component',
+      icon: markRaw(List),
+      component: markRaw(ModListPanel),
+      text: '模块',
+    },
+});
+</script>
+
+```
+
+::: tip
+icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
+
+也可直接使用url，例如
+```js
+{
+  icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'
+}
+```
+:::
+
+## menu
+
+- **详情：**
+  
+  顶部工具栏
+
+  系统提供了几个常用功能： `'/' | 'delete' | 'undo' | 'redo' | 'zoom-in' | 'zoom-out' | 'zoom' | 'guides' | 'rule' | 'scale-to-original' | 'scale-to-fit'`
+
+  '/': 分隔符
+
+  'delete': 删除按钮
+
+  'undo': 撤销按钮
+
+  'redo': 恢复按钮
+
+  'zoom-in': 放大按钮
+  
+  'zoom-out': 缩小按钮
+
+  'zoom': 缩放(zoom-in', 'zoom-out', 'scale-to-original', 'scale-to-fit' 的集合)
+
+  'guides': 显示隐藏参考线
+  
+  'rule': 显示隐藏标尺
+
+  'scale-to-original': 缩放到实际大小
+
+  'scale-to-fit': 缩放以适应
+
+- **默认值：**
+  
+```js
+{ left: [], center: [], right: [] }
+```
+
+- **类型：** [MenuBarData](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L235-L242)
+
+- **示例：**
+  
+```html
+<template>
+  <m-editor :menu="menu"></m-editor>
+</template>
+
+<script setup>
+import { ref, markRaw, toRaw } from 'Vue';
+import { ArrowLeft, Coin } from '@element-plus/icons-vue';
+
+const menu = ref({
+  left: [
+    {
+      type: 'button',
+      icon: markRaw(ArrowLeft),
+      tooltip: '返回',
+    },
+    '/',
+    {
+      type: 'text',
+      text: '.temp',
+    },
+  ],
+  center: ['delete', 'undo', 'redo', 'zoom'],
+  right: [
+    {
+      type: 'button',
+      text: '保存',
+      icon: markRaw(Coin),
+      disabled: true,
+      handler: ({ editorService }) => {
+        console.log(toRaw(editorService.get('root'));
+      }),
+    },
+  ],
+})
+</script>
+```
+
+## layerContentMenu
+
+- **详情：** 扩展已选组件（组件树）右键菜单
+
+- **默认值：** `[]`
+
+- **类型：** ([MenuButton](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L168-L195) | [MenuComponent](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L197-L210))[]
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :layer-content-menu="layerContentMenu"></m-editor>
+</template>
+
+<script setup>
+import { ref, toRaw } from 'Vue';
+import { Upload } from '@element-plus/icons-vue';
+
+const layerContentMenu = ref([
+  {
+    {
+      type: 'button',
+      icon: toRow(Upload),
+      text: '导出',
+      handler: () => {
+        console.log('export')
+      },
+    },
+  },
+]);
+</script>
+```
+
+## stageContentMenu
+
+- **详情：** 扩展stage（画布区域）右键菜单
+
+- **默认值：** `[]`
+
+- **类型：** ([MenuButton](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L168-L195) | [MenuComponent](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L197-L210))[]
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :stage-content-menu="stageContentMenu"></m-editor>
+</template>
+
+<script setup>
+import { ref, toRaw } from 'Vue';
+import { Upload } from '@element-plus/icons-vue';
+
+const stageContentMenu = ref([
+  {
+    {
+      type: 'button',
+      icon: toRow(Upload),
+      text: '导出',
+      handler: () => {
+        console.log('export')
+      },
+    },
+  },
+]);
+</script>
+```
+
+## runtimeUrl
+
+- **详情：**
+
+  [runtime](../../guide/runtime.md)的HTML地址
+
+  在编辑器画布中渲染组件是使用iframe实现，runtimeUrl就是配置在iframe上的src属性
+
+- **默认值：** `undefined`
+
+- **类型：** `string`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor
+    runtime-url="https://tencent.github.io/tmagic-editor/playground/runtime/vue3/playground/index.html"
+  ></m-editor>
+</template>
+```
+
+## render
+
+- **详情：**
+  
+  中间工作区域中画布渲染的内容，通常是通过解析[modelValue](#modelValue)来渲染出DOM，return的DOM结构需要有一个根节点。
+
+  :::tip
+  [runtimeUrl](#runtimeurl)与render有且只需要配置一个
+  :::
+  
+- **默认值：** `undefined`
+
+- **类型：** (stage: [StageCore](../stage/coreMethods.md)) => `HTMLDivElement` | Promise<`HTMLDivElement`>
+  
+
+- **示例：**
+
+```html
+<template>
+  <m-editor
+    :render="renderFunction"
+  ></m-editor>
+</template>
+
+<script setup>
+const renderFunction = async (stage) => {
+  const { iframe } = stage.renderer;
+
+  if (!iframe) throw new Error('iframe 未创建');
+
+  return iframe.contentDocument.createElement('div');
+}
+</script>
+```
+
+## autoScrollIntoView
+
+- **详情：**
+  
+  选中组件时，是否自动滚动该组件到可视区域
+  
+- **默认值：** `undefined`
+
+- **类型：** `boolean`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :auto-scroll-intoView="true"></m-editor>
+</template>
+```
+
+## propsConfigs
+
+- **详情：**
+  
+  组件的属性配置[表单的dsl](../../form-config/fields/text.md)
+
+  :::tip
+  该属性最终会设置到[propsService](./propsServiceMethods.md)中，所以也可直接调用[propsService.setPropsConfigs()](./propsServiceMethods.md#setPropsConfigs)方法来配置
+  :::
+
+  当选中一个组件时，会根据组件的type值从propsConfigs中获取对应的[表单的dsl](../../form-config/fields/text.md)，并在属性面板中渲染出来
+
+  :::tip
+  获取[表单的dsl](../../form-config/fields/text.md)后实际上还会经过[propsService.fillConfig()](./propsServiceMethods.md#fillConfig)方法来处理，用于添加公共配置
+  :::
+  
+- **默认值：** `{}`
+- 
+- **类型：** Record<string, [FormConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L706)>
+
+- **示例：**
+  
+```html
+<template>
+  <m-editor :props-configs="propsConfigs"></m-editor>
+</template>
+
+<script setup>
+const propsConfigs = {
+  text: [
+    {
+      name: 'text',
+      text: '文本',
+    },
+    {
+      name: 'multiple',
+      text: '多行文本',
+      type: 'switch',
+    },
+  ],
+  button: [
+    {
+      name: 'text',
+      text: '文本',
+    },
+  ]
+}
+</script>
+```
+
+## propsValues
+
+- **详情：**
+  
+  添加组件时的默认值
+
+  添加组件时，组件节点DSL的生成过程为，先从[componentGroupList](#componentgrouplist)中items中item的data得到一个基础配置，然后再通过[propsService.getPropsValue()](./propsServiceMethods.md#getPropsValue)方法，获取到propsValues中对应type的默认值，二者合并生成新增节点的DSL配置
+
+  :::tip
+  该属性最终会设置到[propsService](./propsServiceMethods.md)中，所以也可直接调用[propsService.setPropsValues()](./propsServiceMethods.md#setPropsValues)方法来配置
+  :::
+  
+- **默认值：** `{}`
+
+- **类型：** `Record<string, Object>`
+  
+- **示例：**
+
+```html
+<template>
+  <m-editor :props-values="propsValues"></m-editor>
+</template>
+
+<script setup>
+const propsValues = {
+  text: {
+    text: '文本',
+    // 多行文本
+    multiple: true,
+  },
+  button: {
+    text: '按钮',
+  },
+};
+</script>
+```
+
+## eventMethodList
+
+- **详情：**
+  
+  组件属性配置中事件tab中的事件名与动作的下拉选项列表
+
+  :::tip
+  该属性最终会设置到[eventsService](./eventsServiceMethods.md)中，所以也可直接调用[eventsService.setEvents()](./eventsServiceMethods.md#setEvents)与[eventsService.setMethods()](./eventsServiceMethods#setMethods)方法来配置
+  :::
+
+- **默认值：** `{}`
+
+- **类型：** Record<string, { events: [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]; methods: [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[] }>
+  
+- **示例：**
+
+```html
+<template>
+  <m-editor :event-method-list="eventMethodList"></m-editor>
+</template>
+
+<script setup>
+const eventMethodList = {
+  page: {
+    methods: [
+      {
+        label: '刷新',
+        value: 'refresh',
+      },
+    ],
+    events: [
+      {
+        label: '加载',
+        value: 'load',
+      },
+    ],
+  },
+};
+</script>
+```
+
+## moveableOptions
+
+- **详情：**
+  
+  画布中的选中框配置选项，使用的是[moveable](https://github.com/daybrush/moveable)第三方库，可以用来控制组件在画布中是否能被拖动等行为
+
+- **默认值：** `{}`
+
+- **类型：** ((config?: [CustomizeMoveableOptionsCallbackConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/stage/src/types.ts#L97-L109)) => MoveableOptions) | [MoveableOptions](https://daybrush.com/moveable/release/latest/doc/)
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :moveable-options="moveableOptions"></m-editor>
+</template>
+
+<script setup>
+const moveableOptions = ({ targetId }) => {
+  const options = {};
+  const node = editorService.getNodeById(id);
+
+  if (!node) return options;
+
+  const isPage = node.type === 'page';
+
+  // 页面不允许拖动
+  options.draggable = !isPage;
+  options.resizable = !isPage
+
+  return options;
+};
+</script>
+```
+
+## defaultSelected
+
+- **详情：**
+  
+  编辑器初始化后默认选中的组件节点id
+
+- **默认值：** `undefined`
+
+- **类型：** `string | number`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :default-selected="defaultSelected"></m-editor>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const defaultSelected = ref('');
+
+// 加载dsl后设置默认选中节点
+getDsl().then(() => {
+  defaultSelected.value = 'xxx';
+});
+</script>
+```
+
+## canSelect
+
+- **详情：**
+  
+  鼠标在画布点击时，当前坐标下的dom节点是否可以选中，当前坐标下的dom可能不止只有一个，当有多个时会遍历这些节点并调用canSelect方法进行判断，第一个返回true的dom节点将被选中
+
+  :::tip
+  获取坐标下的节点是通过[document.elementsFromPoint](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementsFromPoint)方法
+  :::
+
+- **默认值：** `(el: HTMLElement) => Boolean(el.id)`
+
+- **类型：** `(el: HTMLElement) => boolean | Promise<boolean>`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :can-select="canSelect"></m-editor>
+</template>
+
+<script setup>
+// 只有dom id为纯数字时才可以被选中
+const canSelect = (el) => /^\d+$/.test(el.id);
+</script>
+```
+
+## isContainer
+
+- **详情：**
+  
+  当组件拖动过程中停留在画布上超过 [containerHighlightDuration](#containerHighlightDuration) 时长时，识别当前是否有容器
+
+  当停留超过[containerHighlightDuration](#containerHighlightDuration) 时长时，会通过停留的坐标获取当前坐标下所有dom节点，然后遍历这些节点并通过isContainer方法判断，第一个返回true的节点将视为容器
+
+  :::tip
+  获取坐标下的节点是通过[document.elementsFromPoint](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementsFromPoint)方法
+  :::
+
+- **默认值：** `(el: HTMLElement) => el.classList.contains('magic-ui-container')`
+
+- **类型：** `(el: HTMLDivElement) => boolean | Promise<boolean>;`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :is-container="isContainer"></m-editor>
+</template>
+
+<script setup>
+const canSelect = (el) => /^\d+$/.test(el.id);
+
+const isContainer = (el) =>
+  canSelect(el) &&
+  (el.classList.contains('magic-ui-container') ||
+    el.classList.contains('magic-ui-pc-container') ||
+    el.classList.contains('magic-ui-page') ||
+    el.classList.contains('magic-ui-pop-content'));
+</script>
+```
+
+## containerHighlightClassName
+
+- **详情：**
+  
+识别到容器后，会给其dom上添加的class
+
+- **默认值：** `'tmagic-stage-container-highlight'`
+
+- **类型：** `string`
+
+## containerHighlightDuration
+
+- **详情：**
+  
+当组件拖动过程中停留在画布上超过 [containerHighlightDuration](#containerHighlightDuration) 时长时，识别当前是否有容器
+
+- **默认值：** `800` （单位为ms）
+
+- **类型：** `number`
+
+
+## containerHighlightType
+
+- **详情：**
+
+在画布中，将组件拖入其他容器的方式
+  
+启动方式
+
+default: 停留在画布上启动识别
+
+alt: 按住alt键启动识别
+
+其他值：不启动
+  
+- **默认值：** `'default'`
+
+
+- **类型：** `'default' | 'alt' | ''`
+  
+## stageRect
+
+- **详情：**
+
+  画布的大小
+
+  :::tip
+  该属性最终会设置到[uiService](./uiServiceMethods.md)中，所以也可直接调用[uiService.set('stageRect', value)](./uiServiceMethods.md#set)方法来配置
+  :::
+  
+- **默认值：**
+  
+```js
+{
+  width: 375,
+  height: 817,
+}
+```
+
+- **类型：**
+
+```ts
+interface StageRect {
+  width: number;
+  height: number;
+}
+```
+
+## codeOptions
+
+- **详情：**
+
+  编辑器中的代码编辑器配置
+
+  :::tip
+  tmagic-editor中的所有代码编辑器都使用[monaco-editor](https://microsoft.github.io/monaco-editor/)，详细配置请前往[monaco-editor](https://microsoft.github.io/monaco-editor/)官网查看
+  :::
+  
+- **默认值：** ``{}
+
+- **类型：** `Object`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :code-options="codeOptions"></m-editor>
+</template>
+
+<script setup>
+const codeOptions = {
+  tabSize: 2,
+  fontSize: 16,
+  formatOnPaste: true,
+}
+</script>
+```
+
+## updateDragEl
+
+- **详情：**
+  
+当选中框与组件不贴合时，可以通过此方法进行调整
+
+:::tip
+由于画布中组件是渲染在iframe中，而选中框是渲染在编辑器中，所以会导致两者的坐标系有差异，为了解决这个问题，在[canSelect](#canselect)为true后会在编辑中创建一个位置大小与组件（target）一致的dom（el）
+:::
+
+- **类型：** `(el: HTMLElement | SVGElement, target: HTMLElement | SVGElement) => void`
+  
+- **默认值：** `undefined`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :update-drag-el="updateDragEl"></m-editor>
+</template>
+
+<script setup>
+const updateDragEl = (el, target) => {
+  const node = editorStore.pop;
+  if (!node || !isPop(node)) {
+    return;
+  }
+
+  const { top, left } = target.getBoundingClientRect();
+
+  el.style.transform = 'none';
+  el.style.top = `${top}px`;
+  el.style.left = `${left}px`;
+};
+```
+  

docs/api/editor/propsServiceEvents.md

@@ -0,0 +1,7 @@
+# propsService事件
+
+## props-configs-change
+
+- **详情：** [propsService.setPropsConfigs()](./propsServiceMethods.md#setPropsConfigs)后触发
+
+- **回调函数：** () => void

docs/api/editor/propsServiceMethods.md

@@ -0,0 +1,166 @@
+# propsService方法
+
+## fillConfig
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config
+
+- **返回：**
+
+  - {Promise<[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)>}
+
+- **详情：**
+
+  扩展属性表单配置DSL，用于为所有表单配置添加公共配置
+
+## setPropsConfigs
+
+- **参数：**
+
+  - {Record<string, [FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)>} configs 
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置组件与属性表单配置DSL的对应关系
+
+## setPropsConfig
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 组件类型
+  - {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config 属性表单配置DSL
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+  为指定类型组件设置组件属性表单配置
+
+## getPropsConfig
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 组件类型
+
+- **返回：**
+
+  - {Promise<[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)>}
+
+- **详情：**
+
+  获取指点类型的组件属性表单配置
+
+## setPropsValues
+
+- **参数：**
+
+  - {Record<string, [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} values
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置组件与属性表单默认值的对应关系
+
+## setPropsValue
+
+- **参数：**
+
+  - `{string}` type 组件类型
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} value 组件初始值
+
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+  设置组件与属性表单默认值的对应关系
+
+
+## getPropsValue
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 组件类型
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} value 组件默认值，可选
+
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+  获取指定类型的组件初始值
+
+## createId
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {string} type 组件列席
+
+- **返回：**
+
+  - `{Promise<string>}`
+
+- **详情：**
+
+  生成组件id
+## setNewItemId
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config
+
+- **返回：**
+
+  - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>}
+
+- **详情：**
+
+  将组件与组件的子元素配置中的id都设置成一个新的ID
+
+## getDefaultPropsValue
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 组件类型
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+  获取默认属性配置
+
+## destroy
+
+- **详情：**
+
+  销毁propsService

docs/api/editor/slots.md

@@ -0,0 +1,121 @@
+# Editor组件 slots
+
+## nav
+
+- **详情：** 编辑器顶部菜单栏
+
+- **默认：** [NavMenu.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/NavMenu.vue)
+
+:::warning
+属性配置[menu](./props.md#menu)由默认组件接收，如设置该slot，[menu](./props.md#menu)配置将失效
+:::
+
+## sidebar
+
+- **详情：** 左边栏
+
+- **默认：** [Sidebar.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/sidebar/Sidebar.vue)
+
+:::warning
+属性配置[sidebar](./props.md#sidebar)由默认组件接收，如设置该slot，[sidebar](./props.md#sidebar)配置将失效
+:::
+
+## component-list-panel-header
+
+- **详情：** 左边栏中的组件列表内上方位置
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## component-list-item
+
+- **详情：** 左边栏中的组件列表中组件item
+
+- **默认：** 图片加文案
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## layer-panel-header
+
+- **详情：** 左边栏中的已选组件（组件树）内顶部位置
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## layer-node-content
+
+- **详情：** 左边栏中的已选组件（组件树）节点
+
+- **默认：** 组件名称加id
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## code-block-panel-header
+
+- **详情：** 左边栏中的代码块列表内顶部位置
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## code-block-panel-tool
+
+- **详情：** 左边栏中的代码块列表中代码块右侧位置
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## code-block-edit-panel-header
+
+- **详情：** 代码块弹窗编辑器中弹窗顶部区域
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## workspace
+
+- **详情：** 编辑器中间区域
+
+- **默认：** [Workspace.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Workspace.vue)
+
+## stage
+
+- **详情：** 画布
+
+- **默认：** [Stage.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Stage.vue)
+
+## workspace-content
+
+- **详情：** 编辑器中间区域内
+
+## page-bar-title
+
+- **详情：** 编辑器中间区域底部页面标题
+
+## page-bar-popover
+
+- **详情：** 编辑器中间区域底部页面标题悬浮框
+
+## props-panel
+
+- **详情：** 编辑器右侧属性配置
+
+- **默认：** [PropsPanel.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/PropsPanel.vue)
+
+## props-panel-header
+
+- **详情：** 编辑器右侧属性配置内顶部区域
+
+## empty
+
+- **详情：** 当前没有页面时，编辑器中间区域
+
+- **默认：** [AddPageBox.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/AddPageBox.vue)

docs/api/editor/storageServiceMethods.md

@@ -0,0 +1,109 @@
+# storageService方法
+
+## getStorage
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getNamespace
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## clear
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## getItem
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## key
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## removeItem
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## setItem
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+## destroy
+
+- **参数：**
+
+  - 
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**

docs/api/editor/uiServiceMethods.md

@@ -0,0 +1,29 @@
+# uiService方法
+
+## zoom
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{number}` zoom 缩放倍数
+
+- **返回：**
+
+  - `{Promise<void>}`
+
+- **详情：**
+
+设置缩放倍数，最小为0.1
+
+## calcZoom
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **返回：**
+
+  - `{Promise<number>}`
+
+- **详情：**
+
+计算出缩放以适应的倍数

docs/api/form/form-dialog-events.md

@@ -0,0 +1,27 @@
+# FormDialog组件 events
+
+## close
+
+- **详情：** 弹出关闭
+
+- **回调函数：** () => void
+
+
+## submit
+
+- **详情：** 调用[save()](./form-dialog-methods.md#save)
+
+- **回调函数：** (values: any) => void
+
+## error
+
+- **详情：** 表单校验不同
+
+- **回调函数：** (error: any) => void
+
+## change
+
+- **详情：** 表单中任何值发生变化
+
+- **回调函数：** (values: any) => void
+

docs/api/form/form-dialog-methods.md

@@ -0,0 +1,13 @@
+# FormDialog组件 methods
+
+## cancel
+
+- **详情：** 关闭弹窗
+
+## save
+
+- **返回：**
+
+  - `{Promise<any>}`
+
+- **详情：** 获取表单的值

docs/api/form/form-dialog-props.md

@@ -0,0 +1,110 @@
+# FormDialog组件 props
+
+## config
+
+- **详情：**  表单配置
+
+- **默认值：** `[]`
+
+- **类型：** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)
+
+- **示例：**
+  
+```html
+<template>
+  <m-form-dialog :config="config"></m-form-dialog>
+</template>
+
+<script setup>
+import { ref } from 'Vue';
+
+const config = ref([
+  {
+    name: 'text',
+    text: '文本',
+  },
+  {
+    name: 'multiple',
+    text: '多行文本',
+    type: 'switch',
+  },
+]);
+</script>
+```
+
+## values
+
+- **详情：**  表单初始化值
+
+- **默认值：** `{}`
+
+- **类型：** `Object`
+
+- **示例：**
+  
+```html
+<template>
+  <m-form-dialog :values="values"></m-form-dialog>
+</template>
+
+<script setup>
+import { ref } from 'Vue';
+
+const values = ref([
+  text: 'text',
+  multiply: true,
+]);
+</script>
+```
+
+## width
+
+- **详情：** 弹窗宽度
+
+- **类型：** `string | number`
+
+## labelWidth
+
+- **详情：** 
+
+表单域标签的宽度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto
+
+- **默认值：** `'200px'`
+
+- **类型：** `string | number`
+
+## fullscreen
+
+- **详情：** 弹出是否全屏
+  
+- **默认值：** false
+
+- **类型：** boolean
+
+## disabled
+
+- **详情：** 是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效
+
+- **默认值：** false
+
+- **类型：**  `boolean`
+
+## title
+
+- **详情：** 弹出标题
+
+- **类型：** `string`
+
+## size
+
+- **详情：** 用于控制该表单内组件的尺寸
+
+- **类型：** `'small' | 'default' | 'large'`
+
+## confirmText
+
+- **详情：** 提交按钮文案
+
+- **默认值：** `'确定'`
+
+- **类型：** `string`

docs/api/form/form-events.md

@@ -0,0 +1,7 @@
+# Form组件 events
+
+## change
+
+- **详情：** 表单中任何值发生变化
+
+- **回调函数：** (values: any) => void

docs/api/form/form-methods.md

@@ -0,0 +1,13 @@
+# Form组件 methods
+
+## resetForm
+
+- **详情：** 重置该表单项，将其值重置为初始值，并移除校验结果
+
+## submitForm
+
+- **返回：**
+
+  - `{Promise<any>}`
+
+- **详情：** 提交表单，获取表单的值

docs/api/form/form-props.md

@@ -0,0 +1,137 @@
+# Form组件属性 props
+
+## config
+
+- **详情：**  表单配置
+
+- **默认值：** `[]`
+
+- **类型：** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)
+
+- **示例：**
+  
+```html
+<template>
+  <m-form-dialog :config="config"></m-form-dialog>
+</template>
+
+<script setup>
+import { ref } from 'Vue';
+
+const config = ref([
+  {
+    name: 'text',
+    text: '文本',
+  },
+  {
+    name: 'multiple',
+    text: '多行文本',
+    type: 'switch',
+  },
+]);
+</script>
+```
+
+## initValues
+
+- **详情：**  表单初始化值
+
+- **默认值：** `{}`
+
+- **类型：** `Object`
+
+- **示例：**
+  
+```html
+<template>
+  <m-form-dialog :init-values="initValues"></m-form-dialog>
+</template>
+
+<script setup>
+import { ref } from 'Vue';
+
+const initValues = ref([
+  text: 'text',
+  multiply: true,
+]);
+</script>
+```
+
+## labelWidth
+
+- **详情：** 
+
+表单域标签的宽度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto
+
+- **默认值：** `'200px'`
+
+- **类型：** `string | number`
+
+## disabled
+
+- **详情：** 是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效
+
+- **默认值：** false
+
+- **类型：**  `boolean`
+
+## height
+
+- **详情：**
+  
+  
+
+- **默认值：** 
+
+
+
+- **类型：** 
+
+## stepActive
+
+- **详情：**
+  
+  
+
+- **默认值：** 
+
+
+
+- **类型：** 
+
+## size
+
+- **详情：** 用于控制该表单内组件的尺寸
+
+- **类型：** `'small' | 'default' | 'large'`
+
+
+## inline
+
+- **详情：** 行内表单模式	
+
+- **默认值：** false
+
+- **类型：** `boolean`
+
+## labelPosition
+
+- **详情：** 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性
+  
+- **默认值：**  ’right'
+
+- **类型：** `'left' | 'right' | 'top`
+
+## keyProp
+
+- **详情：** 作为表单项的组件实例的key
+
+- **默认值：** `'__key'`
+
+- **类型：** `string`
+
+## popperClass
+
+- **详情：** tooltip弹出层的class
+
+- **类型：** `string`

docs/api/stage/coreEvents.md

@@ -0,0 +1,21 @@
+# stage事件
+
+## runtime-ready
+
+## mounted
+
+## highlight
+
+## update
+
+## select
+
+## multi-select
+
+## select-parent
+
+## sort
+
+## update
+
+## change-guides

docs/api/stage/coreMethods.md

@@ -0,0 +1,58 @@
+# stage方法
+
+## select
+
+- **详情：** 单选选中元素
+
+## multiSelect
+
+- **详情：** 多选选中多个元素
+
+## highlight
+
+- **详情：** 高亮选中元素
+
+## update
+
+- **详情：** 更新组件
+
+## add
+
+- **详情：** 往画布增加一个组件
+
+## remove
+
+- **详情：** 从画布删除一个组件
+
+## setZoom
+
+- **详情：** 
+
+## mount
+
+- **详情：** 挂载Dom节点
+
+## clearGuides
+
+- **详情：** 清空所有参考线
+
+## clearGuides
+
+- **详情：** 清空所有参考线
+
+## delayedMarkContainer
+
+- **详情：**
+
+鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记
+
+标记的作用：
+
+1、高亮容器，给用户一个加入容器的交互感知；
+
+2、释放鼠标后，通过标记的标志找到要加入的容器
+
+## destroy
+
+- **详情：** 销毁实例
+

docs/api/table/events.md

@@ -0,0 +1,15 @@
+# Table组件 events
+
+## sort-change
+
+## after-action
+
+## select
+
+## select-all
+
+## selection-change
+
+## expand-change
+
+## cell-click

docs/api/table/methods.md

@@ -0,0 +1,7 @@
+# Table组件 methods
+
+## toggleRowSelection
+
+## toggleRowExpansion
+
+## clearSelection

docs/api/table/props.md

@@ -0,0 +1,124 @@
+# Table组件 props
+
+## data
+
+- **详情：**
+  
+  
+
+- **默认值：** 
+
+
+
+- **类型：** 
+
+
+## columns
+
+- **详情：**
+  
+  
+
+- **默认值：** 
+
+
+
+- **类型：** 
+
+
+## spanMethod
+
+- **详情：** 合并行或列的计算方法
+  
+  
+
+- **默认值：** 
+
+
+
+- **类型：** 
+
+## loading
+
+- **详情：**
+  
+  
+
+- **默认值：** 
+
+
+
+- **类型：** 
+
+
+## showHeader
+
+- **详情：** 是否显示表头
+  
+
+- **默认值：** 
+
+
+
+- **类型：** 
+
+## bodyHeight
+
+- **详情：** Table的最大高度。合法的值为数字或者单位为 px 的高度
+  
+- **默认值：** 
+
+
+
+- **类型：** 
+
+## emptyText
+
+- **详情：** 空数据时显示的文本内容
+  
+- **默认值：** 
+
+
+
+- **类型：** 
+
+
+
+
+## defaultExpandAll
+
+- **详情：** 是否默认展开所有行，当Table包含展开行存在或者为树形表格时有效
+  
+- **默认值：** 
+
+
+- **类型：** 
+
+
+
+
+## rowkeyName
+
+- **详情：**
+  
+  
+
+- **默认值：** 
+
+
+
+- **类型：** 
+
+
+## border
+
+- **详情：**
+  
+  
+
+- **默认值：** 
+
+
+
+- **类型：** 
+

docs/guide/advanced/coupling.md

@@ -4,7 +4,7 @@ tmagic-editor的联动，指这两种情况：
 - 页面中的组件之间，需要联动触发行为。
 
 ## 表单联动
-表单的详细内容，可以参考[@tmagic/form](../advanced/magic-form)。我们通过 [JS Schema](../advanced/js-schema) 描述的表单配置，实现联动的方式，就是写一个简单 js 函数。
+表单的详细内容，可以参考[@tmagic/form](./tmagic-form)。我们通过 [JS Schema](./js-schema) 描述的表单配置，实现联动的方式，就是写一个简单 js 函数。
 
 比如下面的例子，我们希望改变选项时，同时改变文本框的内容。
 
@@ -27,7 +27,7 @@ tmagic-editor的联动，指这两种情况：
 
 在经过表单渲染器时，所有指出函数 API 都会传入当前渲染的**表单组件实例(vm)**，**当前项目(value)**，**当前表单model**，**表单值formValue**，model 即 vue 的[表单输入绑定](https://v3.cn.vuejs.org/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95)，可以通过修改他来实现值联动。
 
-当然我们也可以通过上述的参数传入，以及其他函数 API 实现更多灵活的表单联动，具体参考[表单 API](../../api/base-config)。
+当然我们也可以通过上述的参数传入，以及其他函数 API 实现更多灵活的表单联动，具体参考[表单 API](../../form-config/relate)。
 
 ## 组件联动
 tmagic-editor在 @tmagic/core 中，实现了组件的事件绑定/分发机制。在组件渲染时，每个组件在 @tmagic/ui 中经过基础组件渲染时，会被基础组件注入公共方法的实现。如下对按钮配置了**点击使文本隐藏**的联动事件，那么在对应按钮被点击时，将会触发对应绑定文本的隐藏。
@@ -35,7 +35,7 @@ tmagic-editor在 @tmagic/core 中，实现了组件的事件绑定/分发机制
 <img src="https://image.video.qpic.cn/oa_88b7d-10_2117738923_1637238863127559">
 
 ### 添加组件自定义事件
-如何开发一个完整组件可以参考[组件开发](../../component/introduction)，这一节我们主要讲述如何配置定义事件。
+如何开发一个完整组件可以参考[组件开发](../component)，这一节我们主要讲述如何配置定义事件。
 
 在组件开发过程中，我们可以通过声明组件中的 event 文件，在文件中描述当前组件可以配置的事件名，和可以被触发的动作。
 ```javascript

docs/guide/advanced/js-schema.md

@@ -1,7 +1,7 @@
 # JS Schema
-tmagic-editor的业务组件需要有表单配置能力，我们通过一份配置来描述表单，我们采用的描述方案是 JS schema。当我们在编辑器中配置一个页面时，页面的基本信息和页面包含的组件信息，也是采用 JS schema 描述的。JS schema 描述方案，也是我们提供[高级函数](../advanced/high-level-function)功能的基础。
+tmagic-editor的业务组件需要有表单配置能力，我们通过一份配置来描述表单，我们采用的描述方案是 JS schema。当我们在编辑器中配置一个页面时，页面的基本信息和页面包含的组件信息，也是采用 JS schema 描述的。JS schema 描述方案，也是我们提供[代码块](../advanced/code-block)功能的基础。
 
-组件的**配置描述**，参考[示例](../advanced/magic-form.html#示例)，是由开发者在开发组件时，通过 [@tmagic/form](../advanced/magic-form) 支持的表单项来提供的。
+组件的**配置描述**，参考[示例](./tmagic-form.html#示例)，是由开发者在开发组件时，通过 [@tmagic/form](./tmagic-form) 支持的表单项来提供的。
 
 在编辑器中对页面进行编辑，保存得到的是一份关于页面基本信息、页面所包含组件以及组件配置信息的配置，我们称为 **DSL**，这份配置是最终页面渲染需要的描述信息。
 

docs/guide/advanced/tmagic-form.md

@@ -2,17 +2,17 @@
 
 tmagic-editor的表单配置，核心就是使用了 @tmagic/form 来作为渲染器。@tmagic/form 是一个 npm 包，可以安装它，在你想使用的地方单独使用。
 
-@tmagic/form 接受一个表单配置，详细配置可参考[表单 api](../../api/form.md)。
+@tmagic/form 接受一个表单配置，详细配置可参考[表单 api](../../api/form/form-props.md)。
 
 ## 安装
 
 ```bash
 # 最新稳定版
-$ npm install @tmagic/form@latest
+$ npm install @tmagic/form@beta
 ```
 
 ```bash
-$ npm install element-plus
+$ npm install @tmagic/element-plus-adapter@beta @tmagic/design@beta element-plus -S
 ```
 
 ## 快速上手
@@ -26,20 +26,26 @@ MagicForm 使用了 element-ui 库
 在 main.js 中写入以下内容：
 
 ```javascript
-import { createApp } from "vue";
+import { createApp } from 'vue';
-import ElementPlus from "element-plus";
+import ElementPlus from 'element-plus';
-import MagicForm from "@tmagic/form";
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
 
-import "element-plus/dist/index.css";
+import TMagicDesign from '@tmagic/design';
+import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
+import MagicForm from '@tmagic/form';
 
-import App from "./App.vue";
+import App from './App.vue';
 
 const app = createApp(App);
-app.use(ElementUI);
+app.use(ElementPlus, {
+  locale: zhCn,
+});
+app.use(TMagicDesign, MagicElementPlusAdapter);
 app.use(MagicForm);
 app.mount("#app");
 ```
 
+
 以上代码便完成了 @tmagic/form 的引入。需要注意的是，ElementUI 的样式文件需要单独引入。
 
 在 App.Vue 中写入以下内容：

docs/guide/advanced/tmagic-ui.md

@@ -1,11 +1,11 @@
 # @tmagic/ui
 在前面[页面渲染](../advanced/page)中提到的 UI 渲染器，就是包含在 @tmagic/ui 中的渲染器组件。
 
-tmagic-editor的设计是希望发布的页面支持多个前端框架，即各个业务方可以根据自己熟悉的语言来开发组件、发布页面。也可以通过 [实现一个 runtime](../../page/advanced.html#实现一个-runtime) 的方式，来实现一个自己的 @tmagic/ui。
+tmagic-editor的设计是希望发布的页面支持多个前端框架，即各个业务方可以根据自己熟悉的语言来开发组件、发布页面。也可以通过 [实现一个 runtime](../runtime.html) 的方式，来实现一个自己的 @tmagic/ui。
 
-所以tmagic-editor的设计中，针对每个前端框架，都需要有一个对应的 @tmagic/ui 来承担渲染器职责。同时，也需要一个使用和 @tmagic/ui 相同前端框架的 runtime 来 @tmagic/ui 和业务组件的，具体 runtime 概念，可以参考[页面发布](../../page/introduction)。
+所以tmagic-editor的设计中，针对每个前端框架，都需要有一个对应的 @tmagic/ui 来承担渲染器职责。同时，也需要一个使用和 @tmagic/ui 相同前端框架的 runtime 来 @tmagic/ui 和业务组件的，具体 runtime 概念，可以参考[页面发布](../publish)。
 
-@tmagic/ui 在tmagic-editor设计中，承担的是业务逻辑无关的，基础组件渲染的功能。一切和业务相关的逻辑，都应该在 [runtime](../../page/introduction.html#runtime) 中实现。这样 @tmagic/ui 就能保持其通用性。
+@tmagic/ui 在tmagic-editor设计中，承担的是业务逻辑无关的，基础组件渲染的功能。一切和业务相关的逻辑，都应该在 [runtime](../runtime.html) 中实现。这样 @tmagic/ui 就能保持其通用性。
 
 我们以项目代码中提供的 vue3 版本的 @tmagic/ui 作为示例介绍其中包含的内容。
 
@@ -22,7 +22,7 @@ tmagic-editor的设计是希望发布的页面支持多个前端框架，即各
 
 其中 page/container/Component 是 UI 的基础，是每个框架的 UI 都应该实现的。
 
-button/text 其实就是一个组件开发的示例，具体组件开发相关规范可以参考[组件开发](../../component/introduction)。
+button/text 其实就是一个组件开发的示例，具体组件开发相关规范可以参考[组件开发](../component)。
 
 ## @tmagic/ui 示例
 - [vue3 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui)

docs/guide/component.md

@@ -119,7 +119,7 @@ export default Test;
 ```
 
 ### 2. 使用tmagic-cli
-在 runtime vue3 中，我们已经提供好一份示例。在 tmagic.config.ts 文件中。只需要在 packages 加入你创建的组件的路径（如果是个 npm 包，则将路径替换为包名即可），打包脚本就会自动识别到你的组件。[tmagic-cli](../page/introduction.md#tmagic-cli)
+在 runtime vue3 中，我们已经提供好一份示例。在 tmagic.config.ts 文件中。只需要在 packages 加入你创建的组件的路径（如果是个 npm 包，则将路径替换为包名即可），打包工具就会自动识别到你的组件。
 
 ### 3. 启动 playground
 在上面的步骤完成后，在 playground/src/page/Editor.vue 中。找到组件栏的基础组件列表，在其中加入你的开发组件

docs/guide/conception.md

@@ -16,7 +16,7 @@
 - 拓展描述，这部分内容目前还未有严格定义，但是我们保留这个扩展能力。
 - 组件 `type`, 是组件的类型，这是用来告诉编辑器，我们要渲染的是什么组件。每个组件在开发时就应该确定这样一个唯一、不和其他组件冲突的组件 `type`。
 
-```
+```js
 [
   {
     text: '文本',
@@ -56,7 +56,7 @@ DSL 是编辑器搭建页面的最终产物（描述文件），其中包含了
 页面是tmagic-editor作为一个可视化编辑器经过配置后，最终得到的呈现结果。搭建后的页面会被发布上线，供用户访问。
 
 ### runtime
-我们把页面统一称为 runtime，更具体的 runtime 概念可以查看[页面发布](../page/introduction.html#runtime)。**runtime 是承载tmagic-editor项目页面的运行环境**。编辑器的工作区是 runtime 的一个具体实例，另一个就是我们发布上线后，用户访问的真实项目页面。
+我们把页面统一称为 runtime，更具体的 runtime 概念可以查看[页面发布](./publish.html#runtime)。**runtime 是承载tmagic-editor项目页面的运行环境**。编辑器的工作区是 runtime 的一个具体实例，另一个就是我们发布上线后，用户访问的真实项目页面。
 
 ### @tmagic/ui
 @tmagic/ui 包含了tmagic-editor的基础组件库，提供了容器、文本、按钮这样的基础组件。我们提供了不同语言框架的 @tmagic/ui，如 vue2 和 vue3。
@@ -74,6 +74,3 @@ DSL 是编辑器搭建页面的最终产物（描述文件），其中包含了
 ### 组件联动
 组件 A 在完成点击事件后，希望组件 B 可以展示一个弹窗，就是组件联动的一个示例。tmagic-editor通过事件绑定方式，可以为组件 A 和 B 配置事件关联，实现上述的组件联动。
 <img src="https://image.video.qpic.cn/oa_88b7d-37_723692309_1636032154483681" alt="组件联动">
-
-
-

docs/guide/editor-expand.md

@@ -0,0 +1,5 @@
+# 编辑器扩展
+
+## UI扩展
+
+## 行为扩展

docs/guide/index.md

@@ -6,49 +6,53 @@ tmagic-editor的编辑器我们已经封装成一个 npm 包，可以直接安
 
 node.js > 14
 
-可以通过[Vite](https://github.com/vitejs/vite) 或 [Vue CLI](https://cli.vuejs.org/zh/)快速创建项目。
+可以通过[Vite](https://cn.vitejs.dev/) 或 [Vue CLI](https://cli.vuejs.org/zh/)快速创建项目。
-
-推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
 
 > 使用Vue CLI生成的项目需要在vue.config.js中加上配置：transpileDependencies: [/@tmagic/]
 
 ```bash
-# 最新稳定版
+$ npm install @tmagic/editor@beta @tmagic/form@beta -S
-$ npm install @tmagic/editor@latest -S
 ```
 
-editor 中组件自定义属性配置由[@tmagic/form](./advanced/magic-form.md)提供，需要添加@tmagic/form 依赖；editor 与 form 中使用到的 UI 组件都由 [element-plus](https://element-plus.org/)提供，需要添加 element-plus 依赖。
+由于在实际应用中项目常常会用到例如[element-plus](https://element-plus.org/)、[tdesign-vue-next](https://tdesign.tencent.com/vue-next/overview)等UI组件库。为了能让使用者能够选择不同UI库，[@tmagic/editor](https://github.com/Tencent/tmagic-editor/tree/master/packages/editor)将其中使用到的UI组件封装到[@tmagic/design](https://github.com/Tencent/tmagic-editor/tree/master/packages/design)中，然后通过不同的adapter来指定使用具体的对应的UI库，我们提供了[@tmagic/element-plus-adapter](https://github.com/Tencent/tmagic-editor/tree/master/packages/element-plus-adapter)来支持[element-plus](https://element-plus.org/)，所以还需要安装相关的依赖。
 
 ```bash
-$ npm install @tmagic/form@latest element-plus -S
+$ npm install @tmagic/element-plus-adapter@beta @tmagic/design@beta element-plus -S
 ```
 
-editor 中还包含了[monaco-editor](https://github.com/microsoft/monaco-editor)，可以参考 monaco-editor 的[配置指引](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)。
+editor 中还包含了[monaco-editor](https://microsoft.github.io/monaco-editor/)，所以还需安装monaco-editor，可以参考 monaco-editor 的[配置指引](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)。
+
+```bash
+$ npm install monaco-editor -S
+```
 
 ## 快速上手
 
-### 引入 @tmagic/editor
+## 引入 @tmagic/editor
 
 在 main.js 中写入以下内容：
 
 ```js
-import { createApp } from "vue";
+import { createApp } from 'vue';
-import ElementPlus from "element-plus";
+import ElementPlus from 'element-plus';
-import zhCn from "element-plus/es/locale/lang/zh-cn";
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
 
-import MagicEditor from "@tmagic/editor";
+import TMagicDesign from '@tmagic/design';
-import MagicForm from "@tmagic/form";
+import MagicEditor from '@tmagic/editor';
+import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
+import MagicForm from '@tmagic/form';
 
-import App from "./App.vue";
+import App from './App.vue';
 
-import "element-plus/dist/index.css";
+import 'element-plus/dist/index.css';
-import "@tmagic/editor/dist/style.css";
+import '@tmagic/editor/dist/style.css';
-import "@tmagic/form/dist/style.css";
+import '@tmagic/form/dist/style.css';
 
 const app = createApp(App);
 app.use(ElementPlus, {
   locale: zhCn,
 });
+app.use(TMagicDesign, MagicElementPlusAdapter);
 app.use(MagicEditor);
 app.use(MagicForm);
 app.mount("#app");
@@ -56,14 +60,16 @@ app.mount("#app");
 
 以上代码便完成了 @tmagic/editor 的引入。需要注意的是，样式文件需要单独引入。
 
-### 使用 m-editor 组件
+可以参考我们提供的[Playground](https://github.com/Tencent/tmagic-editor/blob/master/playground/src/main.ts)示例实现代码
+
+## 使用 m-editor 组件
 
 在 App.vue 中写入以下内容：
 
 ```html
 <template>
   <m-editor
-    v-model="data"
+    v-model="dsl"
     :menu="menu"
     :runtime-url="runtimeUrl"
     :props-configs="propsConfigs"
@@ -93,11 +99,12 @@ app.mount("#app");
           ],
         }),
 
-        data: ref({
+        dsl: ref({
           // 初始化页面数据
         }),
 
-        runtimeUrl: "/runtime/vue3/playground.html",
+        runtimeUrl: "/runtime/vue3/playground/index.html",
+
         propsConfigs: [
           // 组件属性列表
         ],
@@ -127,25 +134,25 @@ app.mount("#app");
 </style>
 ```
 
-关于 [@tmagic/editor](https://www.npmjs.com/package/@tmagic/editor) 组件，更多的属性配置详情请参考[编辑器 API](../api/editor/editor.md)。
+关于 [@tmagic/editor](https://github.com/Tencent/tmagic-editor/tree/master/packages/editor) 组件，更多的属性配置详情请参考[编辑器 API](../api/editor/props.md)。
 
 其中，**有四个需要注意的属性配置项**：`runtimeUrl` `values` `configs` `componentGroupList`。这是能让我们的编辑器正常运行的关键。
 
-### runtimeUrl
+## runtimeUrl
 
-该配置涉及到 [runtime 概念](conception.html#runtime)，tmagic-editor编辑器中心的模拟器画布，是一个 iframe（这里的 `runtimeUrl` 配置的，就是你提供的 iframe 的 url），其中渲染了一个 runtime，用来响应编辑器中的组件增删改等操作。
+该配置涉及到 [runtime 概念](runtime.md)，tmagic-editor编辑器中心的模拟器画布，是一个 iframe（这里的 `runtimeUrl` 配置的，就是你提供的 iframe 的 url），其中渲染了一个 runtime，用来响应编辑器中的组件增删改等操作。
 
 ::: tip 如何快速得到一个 runtime
-如果要快速启动，可以使用[tmagic-editor项目源码](https://github.com/Tencent/tmagic-editor)中的 runtime，在提供的三个框架 vue2/vue3/react runtime 目录中选择一个，执行 `npm run build` 得到产物，并将产物放到你的项目中，此处的 runtimeUrl 指向你放置 playground.html 的路径。
+如果要快速启动，可以使用[tmagic-editor项目源码](https://github.com/Tencent/tmagic-editor)中的 runtime，在提供的三个框架 vue2/vue3/react runtime 目录中选择一个，执行 `npm run build:admin` 得到产物，并将产物放到你的项目中，此处的 runtimeUrl 指向你放置 runtime/playground/index.html 的路径。
 :::
 
-### componentGroupList
+## componentGroupList
 
-`componentGroupList` 是指定左侧组件库内容的配置。此处定义了在编辑器组件库中有什么组件。在添加的时候通过组件 `type` 来确定 runtime 中要渲染什么组件。可以参考 [componentGroupList 配置](../api/editor/editor.html#componentgrouplist)。
+`componentGroupList` 是指定左侧组件库内容的配置。此处定义了在编辑器组件库中有什么组件。在添加的时候通过组件 `type` 来确定 runtime 中要渲染什么组件。可以参考 [componentGroupList 配置](../api/editor/props.html#componentgrouplist)。
 
-### propsConfigs/propsValues
+## propsConfigs/propsValues
 
-`propsConfigs` `propsValues` 和 `componentGroupList` 中声明的组件是一一对应的，通过 `type` 来识别属于哪个组件，该配置涉及的内容，就是组件的表单配置描述，在[组件开发中](../component/introduction.html#组件开发)会通过 formConfig 配置来声明这份内容。
+`propsConfigs` `propsValues` 和 `componentGroupList` 中声明的组件是一一对应的，通过 `type` 来识别属于哪个组件，该配置涉及的内容，就是组件的表单配置描述，在[组件开发中](./component.md)会通过 formConfig 配置来声明这份内容。
 
 `configs` 既可以通过 hardcode 方式写上每个组件的表单配置，也可以通过组件打包方式得到对应内容，然后通过异步加载来载入。比如：
 
@@ -161,16 +168,11 @@ setup() {
 ```
 
 ::: tip 如何快速得到一个 configs/values
-上述的 runtime 产物中，assets 目录中即包含一个 configs 文件，在你的项目组件初始化之后，异步加载它。并如上面代码中，赋值给 configs/values 即可。
+上述的 runtime 产物中，dist 目录中即包含一个 entry 文件夹，在你的项目组件初始化之后，分别异步加载里面的config/index.umd.js、value/index.umd.js。并如上面代码中，赋值给 configs/values 即可。
 :::
 
-### 更多
+## 更多
 
-通过上述步骤，可以快速得到一个初始化的简单编辑器。在编辑器中，对于使用者来说，需要了解的核心内容：
+通过上述步骤，可以快速得到一个初始化的简单编辑器。
-
-- [tmagic-editor编辑器的基础概念](conception)
-- [编辑器的产物 DSL](../page/introduction.html#编辑器产物-dsl)
-- [runtime 的概念](../page/introduction.html)
-- [如何实现一个 runtime](../page/advanced.html)
 
 除了上述内容外，文档的其他章节中，也会更深入的描述整个tmagic-editor的设计理念和实现细节。同时你也可以查看我们的[项目源码](https://github.com/Tencent/tmagic-editor)，从源码提供的 playground 和 runtime 示例来开发和理解tmagic-editor。

docs/guide/introduction.md

@@ -37,7 +37,6 @@ tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目
 - **@tmagic/ui-vue2** 提供一些vue2基础组件。
 - **@tmagic/ui-react** 提供一些react基础组件。
 - **runtime** 实现在编辑器中对使用不同框架的组件的渲染。
-- **page** 项目提供最终页面发布的执行环境与组件构建。
 
 可以查阅 tmagic 的[源代码](https://github.com/Tencent/tmagic-editor)，与文档描述内容可以逐一对应上，希望文档内容可以为开发者带来比较好的开发体验。
 

docs/guide/publish.md

@@ -2,7 +2,7 @@
 本章主要介绍tmagic-editor页面打包、发布相关的基础概念，打包原理，打包方案实现。使用了tmagic-editor开源代码的业务方可以自由定制页面的打包构建方案。
 
 ## 编辑器产物 DSL
-编辑器中最终保存得到的配置结果，同时也是tmagic-editor页面最终渲染的描述文件，就是一份 JS schema 形式的 DSL。其具体形式就是在 [JS Schema](/docs/guide/advanced/js-schema.html#DSL) 我们示例中提到的内容。
+编辑器中最终保存得到的配置结果，同时也是tmagic-editor页面最终渲染的描述文件，就是一份 JS schema 形式的 DSL。其具体形式就是在 [JS Schema](./advanced/js-schema.html#DSL) 我们示例中提到的内容。
 
 在tmagic-editor编辑器中，所有的操作和配置信息，最终都保存成这一份 DSL。这份配置在tmagic-editor runtime 中被加载和渲染，最终呈现出tmagic-editor项目页。
 
@@ -39,7 +39,7 @@ tmagic-editor提供了三个版本的 runtime 示例，可以参考：
 
 ## @tmagic/cli
 
-在[组件开发](../component/introduction.md)中可以知道，一个组件是由组件(component)、表单配置(formConfig)、初始值(initValue)三个部分组成，其中表单配置跟初始值是提供给@tmagic/editor使用的，组件则是提供给runtime使用的。所以提供了@tmagic/cli来生成这几个部分的入口文件，处理以上提到的三个部分，还有组件的事件配置列表(@tmagic/editor中使用)，插件列表(runtime中使用)，总共5个入口文件。
+在[组件开发](./component.md)中可以知道，一个组件是由组件(component)、表单配置(formConfig)、初始值(initValue)三个部分组成，其中表单配置跟初始值是提供给@tmagic/editor使用的，组件则是提供给runtime使用的。所以提供了@tmagic/cli来生成这几个部分的入口文件，处理以上提到的三个部分，还有组件的事件配置列表(@tmagic/editor中使用)，插件列表(runtime中使用)，总共5个入口文件。
 
 ### 使用方法
 

docs/guide/runtime.md

@@ -0,0 +1,72 @@
+# RUNTIME
+本章详细介绍如何深入理解tmagic-editor的打包，以及如何根据需求定制，修改tmagic-editor的页面打包发布方案。页面发布、打包相关的定制化开发，需要使用tmagic-editor的业务方，搭建好基于开源tmagic-editor的管理平台、存储服务等配套设施。
+
+## 实现一个 runtime
+在 [@tmagic/ui](./advanced/tmagic-ui.html) 部分，我们已经说过，runtime 和 UI 是配套实现的。每个版本的 runtime 都需要一个对应的 UI 来作为渲染器，实现渲染 DSL 呈现页面的功能。
+
+### UI
+一个 UI 应该至少包含一个渲染器，来实现[页面渲染](./advanced/page.html)。同时可以提供一些基础组件。具体实现可以参考[@tmagic/ui](./advanced/tmagic-ui.html)。
+
+### page
+runtime 的 `page` 部分，就是真实项目页面的渲染环境。发布出去的项目页都需要基于该部分来实现渲染功能。而 `page` 的主要逻辑，就是需要加载 UI，同时实现业务方需要的业务逻辑，比如：
+- 提供页面需要的全局 api
+- 业务需要的特殊实现逻辑
+- 加载第三方全局组件/插件等
+
+具体的 page 实现示例，可以参考
+- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3/page)
+- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2/page)
+- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react/page)
+
+### playground
+runtime 的 `playground` 部分，和 `page` 做的事情几乎一致，业务方可以包含上述 `page` 所拥有的全部能力。但是，因为 playground 需要被编辑器加载，作为编辑器中页面模拟器的渲染容器，和编辑器通信，接受编辑器中组件的增删改查。所以，除了保持和 `page` 一样的渲染逻辑之外，`playground` 还要额外实现一套既定通信内容和 api，才能实现和编辑器的通信功能。
+
+#### onRuntimeReady
+**在 playground 页面渲染后**，需要调用接口通知编辑器完成加载。该调用需要传入一个参数 API，即挂载了增删改查功能的对象示例，提供给编辑器。
+```javascript
+window.magic?.onRuntimeReady(API)
+```
+
+#### onPageElUpdate
+**playground 在每次更新了页面配置后**，调用一次 onPageElUpdate 并传入一个 DOM 节点，该方法作用是传入一个页面渲染组件的根节点，用来告知编辑器的模拟器遮罩如何作出反应。
+```javascript
+window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
+```
+
+#### 提供 API
+| API      | 说明    | 参数      | 
+|---------- |-------- |---------- |
+|updateRootConfig| 根节点更新 | `root: MApp`  |
+|updatePageId| 更新当前页面 id | `id: string` |
+|select| 选中组件 | `id: string`|
+|add| 增加组件 | { `config` , `root` }: `UpdateData` |
+|update| 更新组件 | { `config` , `root` }: `UpdateData`  |
+|remove| 删除组件 | { `config` , `root` }: `UpdateData`  |
+|sortNode| 组件在容器间排序 |{ `src` , `dist`, `root` }: `SortEventData`  |
+
+runtime 的实现示例，可以参考tmagic-editor提供的：
+- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3)
+- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2)
+- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react)
+
+### 页面发布
+如介绍中提到的，tmagic-editor页面发布方案，是对构建产物 `page/index.html` 进行项目信息注入。项目信息就是搭建平台存储的页面配置。发布时，将注入项目信息的 `page/index.html` 发布出去即可。
+
+## 版本管理
+基于上一步提到的打包原理，每次构建后，得到的产物都可以进行归档编号，存为版本。涉及到的组件改动和新增修改，体现在各个版本中。
+
+<img src="https://image.video.qpic.cn/oa_88b7d-32_1233288257_1633783105283986" width="40%" alt="版本选择">
+
+版本管理具体如何实现，这取决于使用tmagic-editor的业务方。版本管理具有如下优点：
+1. 对于已经配置好发布的项目，使用固定版本，不会被新版本的特性影响，保证项目线上稳定运行
+2. 发布的新版本如果出现问题，可以及时回退选择使用旧版本
+
+## 结合业务定制
+tmagic-editor的静态资源构建，项目配置保存，页面发布，在tmagic-editor的提供的示例方案中，流程是：
+1. 触发构建，执行流水线，基于 runtime 执行 build 
+2. 将构建产物归档推送至 cdn，存为一个ui版本
+3. 项目配保存后，项目发布时，将项目配置发布至 CDN 存储为 DSL.js，同时根据当前项目使用的ui版本，获取到 page/index.html，将 DSL.js 引用方式以 script 标签形式写入。
+4. 将注入信息的 page/index.html 发布为项目静态资源 act.html
+5. 线上可加载 act.html 访问项目
+
+其中各个步骤的定制，可以交由业务方根据tmagic-editor提供的示例进行自定义修改。

docs/guide/tutorial/hello-world.md

@@ -123,13 +123,13 @@ body {
 npm run serve
 ```
 
-到这里一个空白的编辑器就运行起来了。不出意外，通过浏览器访问http://localhost:8081/，将看到
+到这里一个空白的编辑器就运行起来了。不出意外，通过浏览器访问 **http:\/\/localhost:8081/** ，将看到
 
 <img src="/tutorial/one/init.png" />
 
 ## 添加组件列表
 
-api详情：[componentGroupList](../api/editor/editor.md#componentGroupList)
+api详情：[componentGroupList](../../api/editor/props.md#componentgrouplist)
 
 ```ts
 const componentGroupList = ref([
@@ -152,7 +152,7 @@ const componentGroupList = ref([
 
 ## 设置编辑器初始值
 
-api详情：[modelValue](../api/editor/editor.md#modelValue)
+api详情：[modelValue](../../api/editor/props.md#modelvalue-v-model)
 
 ```ts
 const value = ref({
@@ -163,11 +163,11 @@ const value = ref({
 
 加上初始值后，点击新增页面就可以渲染出一个画布了，但是点击添加HelloWorld组件依然没有反应
 
-这是因为这时的编辑器并能理解HelloWorld是什么，需要在[render](../api/editor/editor.html#render)函数中处理
+这是因为这时的编辑器并能理解HelloWorld是什么，需要在[render](../../api/editor/props.html#render)函数中处理
 
 ## 渲染
 
-api详情：[render](../api/editor/editor.md#render)
+api详情：[render](../../api/editor/props.md#render)
 
 ```ts
 const render = () => {
@@ -205,7 +205,7 @@ configureWebpack: {
 ```
 
 > render函数中获取page是通过value.value.items[0]，这样只是表示第一个页面，如果页面有多个页面就会有问题
-> 可以通过[editorService.get('page')](../api/editor/services.md#get)获取到当前选中的页面
+> 可以通过[editorService.get('page')](../../api/editor/editorServiceMethods.md#get)获取到当前选中的页面
 
 ```ts
 import { editorService } from '@tmagic/editor';
@@ -222,7 +222,7 @@ const page = computed(() => editorService.get<MPage>('page'))
 renderer.iframe.contentWindow.magic?.onRuntimeReady({});
 renderer.iframe.contentWindow.magic?.onPageElUpdate(root);
 ```
-> render函数接收一个stageCore参数 [StageCore](../api/stage/core.md)
+> render函数接收一个stageCore参数 [StageCore](../../api/stage/coreMethods.md)
 
 最终完整的render函数实现
 
@@ -280,7 +280,7 @@ const render = async ({ renderer }: StageCore) => {
 };
 ```
 
-以上就是一个简单的搭建编辑器的示例，安装上面的步骤完成后会发现，可以添加组件，也可选中组件，但是无法拖动，配置属性中的样式也无法生效，这是因为上述的render函数并不完整，没有处理dsl中style，下一节将详细介绍runtime的搭建，将不再使用render函数的方式而是使用[runtimeUrl](../api/editor/editor.md#runtimeurl)。
+以上就是一个简单的搭建编辑器的示例，安装上面的步骤完成后会发现，可以添加组件，也可选中组件，但是无法拖动，配置属性中的样式也无法生效，这是因为上述的render函数并不完整，没有处理dsl中style，下一节将详细介绍runtime的搭建，将不再使用render函数的方式而是使用[runtimeUrl](../../api/editor/props.md#runtimeurl)。
 
 ::: tip
 并不是render函数不好，但是从设计上将，render函数还是让渲染逻辑落到了编辑器中，@tmagic/editor的设计是希望做到渲染跟编辑器解耦

docs/guide/tutorial/index.md

@@ -0,0 +1,15 @@
+# 写在前面
+
+本教程将一步一步引导大家实现一个完整的可视化编辑器，每个章节都是在前一章节的基础上进行，后一章节会比前一章节的功能更加完善，旨在绑架大家理解编辑器的各个组成部分的实现思路
+
+[第一章 Hello World](./hello-world.md)
+
+通过搭建一个最简单的编辑器，让大家对编辑器有一个最基本的认识。
+
+[第二章 Runtime](./runtime.md)
+
+通过将组件渲染从编辑器中解耦分离出来，实现编辑器对不同技术栈实现的组件的支持
+
+[第三章 DSL解析渲染](./render.md)
+
+理解DSL，并将DSL渲染成对应的组件

docs/guide/tutorial/render.md

@@ -1,4 +1,4 @@
-# 3.[DSL](../guide/conception.md#dsl) 解析渲染
+# 3.[DSL](../conception.md#dsl) 解析渲染
 
 tmagic 提供了 vue3/vue2/react 三个版本的解析渲染组件，可以直接使用
 
@@ -55,9 +55,9 @@ items: 容器下包含的节点组成的数组，items中不能有page,app
 
 在hello-ui下创建 Component.vue 文件
 
-由于节点的type是由业务自行定义的，所以需要使用动态组件渲染，在vue下可以使用[component](https://cn.vuejs.org/v2/api/#component)组件来实现
+由于节点的type是由业务自行定义的，所以需要使用动态组件渲染，在vue下可以使用[component](https://cn.vuejs.org/api/built-in-special-elements.html#component)组件来实现
 
-[component](https://cn.vuejs.org/v2/api/#component) 是通过is参数来决定哪个组件被渲染，所以将type与组件做绑定
+[component](https://cn.vuejs.org/api/built-in-special-elements.html#component) 是通过is参数来决定哪个组件被渲染，所以将type与组件做绑定
 
 例如有组件 HelloWorld，可以将组件全局注册
 

docs/index.md

@@ -1,8 +1,24 @@
 ---
-home: true
+layout: home
-heroImage: ./favicon.png
+
-heroText: tmagic-editor页面可视化平台
+title: tmagic-editor
-tagline: null
+titleTemplate: tmagic-editor
+
+hero:
+  name: tmagic-editor
+  text: 页面可视化平台
+  image:
+    src: ./favicon.png
+    alt: TMagicEditor
+
+  actions:
+    - theme: brand
+      text: 开始
+      link: /guide/
+    - theme: alt
+      text: GitHub
+      link: https://github.com/Tencent/tmagic-editor
+
 
 features:
   - title: 所见即所得

docs/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "docs",
-  "private": true,
-  "version": "1.2.0-beta.18",
-  "scripts": {
-    "clean:top": "rimraf dist",
-    "dev": "vuepress dev src",
-    "build": "npm run clean:top && vuepress build src -d dist"
-  },
-  "dependencies": {
-    "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/design": "1.2.0-beta.18",
-    "@tmagic/element-plus-adapter": "1.2.0-beta.18",
-    "@tmagic/form": "1.2.0-beta.18",
-    "@tmagic/schema": "1.2.0-beta.18",
-    "@tmagic/utils": "1.2.0-beta.18",
-    "element-plus": "^2.2.19",
-    "highlight.js": "^11.2.0",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "serialize-javascript": "^6.0.0",
-    "vue": "^3.2.37"
-  },
-  "devDependencies": {
-    "@vuepress/bundler-vite": "^2.0.0-beta.51",
-    "@vuepress/cli": "^2.0.0-beta.51",
-    "@vuepress/client": "^2.0.0-beta.51",
-    "@vuepress/plugin-search": "^2.0.0-beta.51",
-    "@vuepress/theme-default": "^2.0.0-beta.51",
-    "vite": "~3.1.3",
-    "vuepress": "^2.0.0-beta.51"
-  }
-}

docs/src/.vuepress/config.ts

@@ -1,241 +0,0 @@
-import { viteBundler } from '@vuepress/bundler-vite';
-import { defineUserConfig } from '@vuepress/cli';
-import { defaultTheme } from '@vuepress/theme-default';
-import { searchPlugin } from '@vuepress/plugin-search'
-
-import path from 'path';
-
-const sidebar = {
-  guide: [
-    {
-      text: '使用指南',
-      children: [
-        '/guide/introduction',
-        '/guide/installation',
-        '/guide/conception',
-      ]
-    }, {
-      text: '进阶指南',
-      children: [
-        '/guide/advanced/js-schema.md',
-        '/guide/advanced/layout.md',
-        '/guide/advanced/page.md',
-        '/guide/advanced/high-level-function.md',
-        '/guide/advanced/magic-ui.md',
-        '/guide/advanced/magic-form.md',
-        '/guide/advanced/coupling.md',
-      ]
-    }
-  ],
-  page: [
-    {
-      text: '页面发布',
-      sidebarDepth: 2,
-      children: [
-        '/page/introduction',
-        '/page/advanced',
-      ]
-    }
-  ],
-  admin: [
-    {
-      text: '管理端Demo',
-      children: [
-        '/admin/introduction',
-      ]
-    }
-  ],
-  component: [
-    {
-      text: '组件开发',
-      children: [
-        '/component/introduction',
-      ]
-    }
-  ],
-  editorApi: [
-    {
-      text: '编辑器(@tmagic/editor)',
-      children: [
-        '/api/editor/editor',
-        '/api/editor/services',
-      ]
-    },
-  ],
-  formApi: [
-    {
-      text: '表单(@tmagic/form)',
-      children: [
-        '/api/form/form',
-      ]
-    },
-  ],
-  formConfig: [
-    {
-      text: '表单配置',
-      children: [
-        '/api/form-config/layout',
-      ]
-    },
-    {
-      text: 'field配置',
-      children: [
-        '/api/form-config/fields/cascader',
-        '/api/form-config/fields/checkbox',
-        '/api/form-config/fields/color-picker',
-        '/api/form-config/fields/date-picker',
-        '/api/form-config/fields/datetime-picker',
-        '/api/form-config/fields/display',
-        '/api/form-config/fields/hidden',
-        '/api/form-config/fields/number',
-        '/api/form-config/fields/input',
-        '/api/form-config/fields/link',
-        '/api/form-config/fields/redio',
-        '/api/form-config/fields/select',
-        '/api/form-config/fields/switch',
-        '/api/form-config/fields/textarea',
-        '/api/form-config/fields/time-picker',
-      ]
-    },
-    {
-      text: '联动配置',
-      children: [
-        '/api/form-config/relate',
-      ]
-    },
-  ],
-  stageApi: [
-    {
-      text: '画布(@tmagic/stage)',
-      children: [
-        '/api/stage/core',
-        '/api/stage/mask',
-        '/api/stage/render',
-        '/api/stage/drag-resize',
-      ]
-    },
-  ],
-  tutorial: [
-    {
-      text: '教程',
-      children: [
-        '/tutorial/hello-world',
-        '/tutorial/runtime',
-        '/tutorial/render',
-      ]
-    },
-  ]
-};
-
-export default defineUserConfig({
-  title: 'tmagic-editor',
-  description: 'tmagic',
-  lang: 'zh-CN',
-  base: '/tmagic-editor/docs/',
-  theme: defaultTheme({
-    logo: './favicon.png',
-    navbar: [
-      {
-        text: '文档',
-        children: [
-          {
-            text: '使用指南',
-            link: '/guide/introduction'
-          },
-          {
-            text: '组件开发',
-            link: '/component/introduction'
-          },
-          {
-            text: '页面发布',
-            link: '/page/introduction'
-          },
-          {
-            text: '管理端Demo',
-            link: '/admin/introduction'
-          },
-        ]
-      },
-      {
-        text: 'API参考',
-        children: [
-          {
-            text: '编辑器',
-            link: '/api/editor/editor'
-          },
-          {
-            text: '表单',
-            link: '/api/form/form'
-          },
-          {
-            text: '表单配置',
-            link: '/api/form-config/layout'
-          },
-          {
-            text: '画布(Stage)',
-            link: '/api/stage/core'
-          },
-        ],
-      }, {
-        text: '教程',
-        link: '/tutorial/hello-world',
-      }, {
-        text: '查看源码',
-        link: 'https://github.com/Tencent/tmagic-editor'
-      }, {
-        text: 'Playground',
-        link: 'https://tencent.github.io/tmagic-editor/playground/index.html'
-      }
-    ],
-    docsDir: 'src',
-    sidebarDepth: 2,
-    sidebar: {
-      '/guide/': sidebar.guide,
-      '/page/': sidebar.page,
-      '/component/': sidebar.component,
-      '/api/editor': sidebar.editorApi,
-      '/api/form': sidebar.formApi,
-      '/api/form-config': sidebar.formConfig,
-      '/api/stage': sidebar.stageApi,
-      '/tutorial': sidebar.tutorial,
-    },
-    lastUpdated: false,
-    contributors: false,
-
-  }),
-  plugins: [
-    searchPlugin(),
-  ],
-  bundler: viteBundler({
-    vuePluginOptions: {
-      template: {
-        ssr: true,
-        compilerOptions: {
-          directiveTransforms: {
-            loading: () => {
-              return {
-                props: [],
-                needRuntime: true,
-              };
-            },
-          },
-        },
-      },
-    },
-    viteOptions: {
-      resolve: {
-        alias:[
-          { find: /^@tmagic\/form/, replacement: path.join(__dirname, '../../../packages/form/src/index.ts') },
-          { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../../packages/utils/src/index.ts') },
-          { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../../packages/schema/src/index.ts') },
-          { find: /^@tmagic\/design/, replacement: path.join(__dirname, '../../../packages/design/src/index.ts') },
-          { find: /^@tmagic\/element-plus-adapter/, replacement: path.join(__dirname, '../../../packages/element-plus-adapter/src/index.ts') },
-        ]
-      },
-       // @ts-expect-error: vite 还没有给 ssr 配置项提供类型
-      ssr: {
-        noExternal: ['lodash-es'],
-      }
-    },
-  }),
-});

docs/src/.vuepress/polyfills.ts

@@ -1,8 +0,0 @@
-// serialize-javascript 依赖的 randombytes 依赖全局的 global 对象，因此此处需添加 global polyfill
-if (typeof global === 'undefined') {
-  (window as any).global = window;
-}
-
-if (typeof globalThis === 'undefined') {
-  (window as any).globalThis = window;
-}

docs/src/.vuepress/styles/index.scss

@@ -1,3 +0,0 @@
-:root {
-  --c-brand: #2882e0;
-}

docs/src/admin/introduction.md

@@ -1,218 +0,0 @@
-# 介绍
-
-我们提供了可视化搭建平台管理端（magic-admin）供开发者直接使用，与可视化编辑器（@tmagic/editor）、自定义表单（@tmagic/form）配套。管理端代码存放于[开源仓库](https://github.com/Tencent/tmagic-editor)"magic-admin"目录下，可作为一个独立项目运行。我们期望，一方面开发者可以更清晰的了解一个项目从编辑到生成的整个流程；另一方面，开发者也可以在 magic-admin 的基础上快速搭建适合自己业务的管理平台，构建一个完整的页面可视化搭建系统。
-
-管理端提供了如下能力：
-
-- 项目列表展示，查询
-- 项目创建，复制
-- 项目编辑以及 AB TEST 配置能力
-- 项目发布以及发布状态查看和管理
-
-<img src="https://vfiles.gtimg.cn/vupload/20211129/81d34a1638168945248.png">
-
-## 开发调试
-
-magic-admin 管理端分为 web 端和 server 端，目录结构如下：
-
-**web 目录结构**
-
-```
-.
-├── babel.config.js
-├── jest.config.js
-├── package.json
-├── package-lock.json
-├── public
-│   ├── favicon.ico
-│   └── index.html
-├── README.md
-├── src
-│   ├── api（web 端接口文件）
-│   ├── App.vue
-│   ├── assets
-│   ├── components（组件文件）
-│   ├── config（表单和状态配置文件）
-│   ├── main.ts（入口文件）
-│   ├── plugins（插件）
-│   ├── router（路由）
-│   ├── shims-vue.d.ts
-│   ├── store（全局变量的封装）
-│   ├── typings
-│   ├── use（核心逻辑）
-│   ├── util（公共方法）
-│   └── views
-├── tests
-│   ├── unit（测试用例文件）
-│   └── utils.ts
-├── tsconfig.json
-├── types（声明文件）
-│   ├── axios-jsonp
-│   ├── index.d.ts
-│   └── shims-vue.d.ts
-└── vue.config.js
-```
-
-**server 目录结构**
-
-```
-.
-├── jest.config.ts
-├── package.json
-├── package-lock.json
-├── pm2.config.js
-├── src
-│   ├── config（配置文件）
-│   ├── controller（控制器）
-│   ├── database（数据库初始化 sql 文件）
-│   ├── index.ts（入口文件）
-│   ├── models（数据库模型定义，使用`sequelize`）
-│   ├── routers（路由文件）
-│   ├── sequelize（数据库实例初始化文件）
-│   ├── service（service 文件）
-│   ├── template（发布所需模板文件）
-│   ├── typings（声明文件）
-│   └── utils（公共方法文件）
-├── tests
-│   └── unit（测试用例）
-└── tsconfig.json
-```
-
-**开发者本地调试 magic-admin 请按照如下步骤：**
-
-- 数据库：
-  我们在 magic-admin/server/src/database/init.sql 中准备了库表初始化文件，开发者首先需要创建所需数据表
-
-  - 表名：magic_act_info
-    项目基础信息表，包含项目 ID，项目名称，项目负责人，项目时间等项目基础信息。
-  - 表名：magic_ui_config
-    页面配置表，magic-admin 支持了一个项目中包含多个项目页面的能力，因此每个页面的组件配置信息将分别存储。
-
-- 启动 web 端：
-
-```bash
-$ cd magic-admin/web
-$ npm i
-$ npm run serve
-```
-
-- 启动 server 端
-
-```bash
-$ cd magic-admin/server
-$ npm i
-$ npm run dev
-```
-
-server 文件夹下面这些敏感文件，需要开发者参考示例进行替换：
-
-```
-.
-├── src
-│   ├── config
-│   │   ├── databaseExample.ts（数据库配置文件）
-│   │   ├── keyExample.ts（加密秘钥配置）
-```
-
-- 关于登录态：
-  magic-admin 在库表中为开发者预留了用户信息字段（项目负责人），开发者可以根据自身业务需要，实现用户登录态
-
-```js
-// web/src/App.vue
-watchEffect(async () => {
-  // 登录态获取交由开发者实现
-  const userName = process.env.VUE_APP_USER_NAME || "defaultName";
-  Cookies.set("userName", userName);
-});
-```
-
-## 管理端能力
-
-- **项目状态**
-
-我们将项目的状态分为三种：修改中，部分页面已发布，全部页面已发布。在项目列表页面，可以展开查看每个项目页面的状态。
-
-修改中：项目所有页面均在编辑状态
-
-部分已发布：项目的一些页面在编辑状态，一些页面已发布
-
-已发布：项目所有页面均已发布
-
-- **在管理端引入 runtime**
-
-在管理端中我们提供了一个可视化的模拟画布，他需要依赖 runtime 核心库，我们已经在 magic-admin/server/static 中内置了一个 vue3 版本的 runtime，开发者可以直接使用
-如果需要使用或调试最新版本的 runtime，那么需要在 magic 根目录下运行以下命令进行 runtime 打包构建
-
-```js
-cd tmatic-editor
-npm run build:runtime:admin
-```
-
-将/runtime/{vue3 | vue2 | react}/dist 中所有文件以及文件夹复制到 /magic-admin/server/static 目录下
-
-上面的操作我们提供了/magic-admin/setup.sh 脚本文件来实现，开发者可以参考该脚本文件来搭建流水线。
-
-[runtime 详细介绍](https://tencent.github.io/tmagic-editor/docs/page/introduction.html#runtime)
-
-- **AB TEST**
-
-当项目开发者需要对页面进行 AB TEST 测试时，可以在项目中创建多个项目页面，并且在项目配置中进行配置
-<img src="https://vfiles.gtimg.cn/vupload/20211129/c11fa81638173475771.png">
-这里仅为管理端的配置，通过这里我们将在项目配置文件中得到类似如下结构的 abtest 信息，开发者可以在页面加载时根据 DSL 的 abtest 字段进行判断。
-
-```js
-abTest: [
-  {
-    name: "abtest1",
-    type: ["pgv_pvid"],
-    pageList: [
-      {
-        pageName: "page_1",
-        proportion: "50",
-      },
-      {
-        pageName: "page_2",
-        proportion: "50",
-      },
-    ],
-  },
-];
-```
-
-- **项目保存**
-
-项目创建之后的配置信息分为两部份：项目基础信息，页面组件配置信息。
-项目基础信息是整个项目共用的配置项，对应 magic_act_info 数据表
-页面组件配置信息是一个项目中单个页面的配置项，对应 magic_ui_config 数据表
-
-项目基础信息不在 magic-editor 支持范围以内，需要开发者自行结合 @tmagic/form 按需开发。管理端示例中这部分内容在页面右上角【项目配置】抽屉页
-
-页面组件配置信息是指 magic-editor 中的 modelValue，他是一份 js schema 包含了页面内组件的配置内容，也是页面渲染的关键依赖文件。[DSL 概念参考](https://tencent.github.io/tmagic-editor/docs/page/introduction.html#%E7%BC%96%E8%BE%91%E5%99%A8%E4%BA%A7%E7%89%A9-DSL)
-
-magic-admin 支持一个项目中创建多个项目页面的能力，因此，在项目保存的时候，我们的做法是将每个页面单独作为一条记录保存，比如项目 A 中包含页面 1 和页面 2
-保存之后我们将得到
-
-magic_act_info 表
-| act_id | act_name | operator | act_status | abtest_raw | ... |
-| --- | --- | --- | --- |--- |--- |
-| 123 |项目 A | username | 修改中| []|... |
-
-magic_ui_config 表
-| id | act_id | c_dist_code | page_title | page_publish_status |... |
-| --- | --- | --- | --- |--- | --- |
-| 1 |123 | 页面 1 的 DSL 配置 |页面 1 |修改中|...|
-| 2 |123 | 页面 2 的 DSL 配置 |页面 2|修改中|...|
-
-- **项目发布**
-
-  管理端的项目发布是对[页面发布](https://tencent.github.io/tmagic-editor/docs/page/introduction.html#%E9%A1%B5%E9%9D%A2%E5%8F%91%E5%B8%83) 的实践。
-  原始的页面框架 page.html 需要通过 runtime 打包生成，注入的 DSL 保存在 magic_ui_config 表 c_dist_code 字段中。
-  发布时将 DSL 文件注入到 page.html 中，写入 server/assets/publish 目录下，访问路径： http://localhost/publish/${page_name}.html
-
-## 部署
-
-::: tip
-前提条件：node 环境>=14.15
-:::
-
-如需使用流水线部署，请参考 /magic-admin/setup.sh

docs/src/api/editor/editor.md

@@ -1,404 +0,0 @@
-# m-editor
-
-## props
-
-### modelValue
-
-- **类型：** [MApp](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)[]
-  
-- **默认值：** {}
-  
-- **详情：**
-  
-  页面初始值
-
-- **示例：**
-  
-```js
-{
-  type: 'app',
-  id: 'app_1',
-  items: [
-    {
-      type: 'page',
-      id: 'page_1',
-      items: [
-        {
-          type: 'text',
-          id: 'text_1',
-          text: '文本'
-        }
-      ]
-    }
-  ]
-}
-```
-
-### componentGroupList
-
-- **类型：** [ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)[]
-  
-- **默认值：** []
-  
-- **详情：**
-  
-  左侧面板中的组件列表
-
-- **示例：**
-
-```js
-import { FolderOpened, SwitchButton, Tickets } from '@element-plus/icons-vue';
-
-[
-  {
-    title: '容器',
-    items: [
-      {
-        icon: FolderOpened,
-        text: '组',
-        type: 'container',
-      },
-    ],
-  },
-  {
-    title: '基础组件',
-    items: [
-      {
-        icon: Tickets,
-        text: '文本',
-        type: 'text',
-      },
-      {
-        icon: SwitchButton,
-        text: '按钮',
-        type: 'button',
-      },
-    ],
-  },
-]
-```
-
-::: tip
-icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
-
-也可直接使用url，例如
-```js
-{
-  icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'
-}
-```
-:::
-
-::: warning
-此配置仅在[sidebar](#sidebar)中配置了'component-list'时有效
-:::
-
-### sidebar
-
-- **类型：** [SideBarData](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)
-  
-- **默认值：** { type: 'tabs', status: '组件', items: ['component-list', 'layer'] }
-  
-- **详情：**
-  
-  左侧面板，目前只支持type: 'tabs';
-
-  component-list的text为'组件'
-
-- **示例：**
-  
-```js
-import { List } from '@element-plus/icons-vue';
-import ModListPanel from '../components/sidebars/ModListPanel.vue';
-
-{
-  type: 'tabs',
-  status: '组件',
-  items: [
-    'component-list',
-    'layer',
-    {
-      type: 'component',
-      icon: List,
-      component: ModListPanel,
-      text: '模块',
-    },
-}
-```
-
-::: tip
-icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
-
-也可直接使用url，例如
-```js
-{
-  icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'
-}
-```
-:::
-
-### menu
-
-- **类型：** [MenuBarData](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)
-  
-- **默认值：** { left: [], center: [], right: [] }
-  
-- **详情：**
-  
-  顶部工具栏
-
-  系统提供了几个常用功能： '/' | 'delete' | 'undo' | 'redo' | 'zoom-in' | 'zoom-out' | 'zoom'
-
-  '/': 分隔符
-
-  'delete': 删除按钮
-
-  'undo': 撤销按钮
-
-  'redo': 恢复按钮
-
-  'zoom-in': 放大按钮
-  
-  'zoom-out': 缩小按钮
-
-  'zoom': 缩放
-
-- **示例：**
-
-```js
-import { toRaw } from 'vue';
-import { ArrowLeft, Coin } from '@element-plus/icons-vue';
-
-{
-  left: [
-    {
-      type: 'button',
-      icon: ArrowLeft,
-      tooltip: '返回',
-    },
-    '/',
-    {
-      type: 'text',
-      text: '.temp',
-    },
-  ],
-  center: ['delete', 'undo', 'redo', 'zoom'],
-  right: [
-    {
-      type: 'button',
-      text: '保存',
-      icon: Coin,
-      disabled: true,
-      handler: ({ editorService }) => console.log(toRaw(editorService.get('root'))),
-    },
-  ],
-}
-```
-
-::: tip
-icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
-
-也可直接使用url，例如
-```js
-{
-  icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'
-}
-```
-:::
-
-### render
-
-- **类型：** Function
-  
-- **默认值：** undefined
-  
-- **详情：**
-  
-  中间工作区域中画布渲染的内容，通常是通过解析[modelValue](#modelValue)来渲染出DOM，return的DOM结构需要有一个根节点。
-
-- **示例：**
-
-```js
-(renderer) => renderer.contentWindow.document.createElement('div')
-```
-
-### runtimeUrl
-
-- **类型：** string
-  
-- **默认值：** undefined
-  
-- **详情：**
-  
-  runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径
-
-### propsConfigs
-
-- **类型：** { [type: string]: [FormConfig](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) }
-  
-- **默认值：** {}
-  
-- **详情：**
-  
-  组件的属性配置表单的dsl
-
-- **示例：**
-  
-```js
-{
-  text: [
-    {
-      name: 'text',
-      text: '文本',
-    },
-    {
-      name: 'multiple',
-      text: '多行文本',
-      type: 'switch',
-    },
-  ],
-  button: [
-    {
-      name: 'text',
-      text: '文本',
-    },
-  ]
-}
-```
-
-### propsValues
-
-- **类型：** { [type: string]: Object }
-  
-- **默认值：** {}
-  
-- **详情：**
-  
-  添加组件时的默认值
-
-- **示例：**
-
-```js
-{
-  text: {
-    text: '文本',
-    multiple: true,
-  },
-  button: {
-    text: '按钮',
-  },
-}
-```
-
-### moveableOptions
-
-- **类型：** ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions) | [MoveableOptions](https://daybrush.com/moveable/release/latest/doc/)
-  
-- **默认值：** {}
-  
-- **详情：**
-  
-  画布中的选中框配置选项，使用的是[moveable](https://github.com/daybrush/moveable)第三方库
-
-### stageRect
-
-- **类型：** { width: number; height: number }
-
-- **默认值：** { width: 375, height: 817 }
-  
-- **详情：**
-  
-  画布的大小配置
-
-### autoScrollIntoView
-
-- **类型：** boolean
-  
-- **默认值：** undefined
-  
-- **详情：**
-  
-选中组件时，是否自动滚动该组件到可视区域
-
-### updateDragEl
-
-- **类型：** (el: HTMLDivElement, target: HTMLElement) => void;
-  
-- **默认值：** undefined
-  
-- **详情：**
-  
-当选中框与组件不贴合时，可以通过此方法进行调整
-
-### isContainer
-
-- **类型：** (el: HTMLDivElement) => boolean | Promise\<boolean\>;
-  
-- **默认值：** (el: HTMLElement) => el.classList.contains('magic-ui-container')
-  
-- **详情：**
-  
-当组件拖动过程中停留在画布上超过 [containerHighlightDuration](#containerHighlightDuration) 时长时，识别当前是否有容器
-
-### containerHighlightDuration
-
-- **类型：** number;
-  
-- **默认值：** 800（单位为ms）
-  
-- **详情：**
-  
-当组件拖动过程中停留在画布上超过 [containerHighlightDuration](#containerHighlightDuration) 时长时，识别当前是否有容器
-
-### containerHighlightClassName
-
-- **类型：** string;
-  
-- **默认值：** 'tmagic-stage-container-highlight'
-  
-- **详情：**
-  
-识别到容器后，会给其dom上添加的class
-
-### containerHighlightType
-
-- **类型：** 'default' | 'alt' | '';
-  
-- **默认值：** 'default'
-  
-- **详情：**
-  
-启动方式
-
-default: 停留在画布上启动识别
-
-alt: 按住alt键启动识别
-
-其他值：不启动
-
-
-## slots
-
-### nav
-
-- **详情：** 工具栏
-
-### sidebar
-
-- **详情：** 左侧栏
-
-### workspace
-
-- **详情：** 中间工作区域
-
-### workspace-content
-
-- **详情：** 中间工作区域内部
-  
-:::tip
-在没有 workspace slots 的时候才可以用
-:::
-
-### propsPanel
-
-- **详情：** 属性面板

docs/src/api/editor/services.md

@@ -1,618 +0,0 @@
-# Services
-
-## editorService
-
-### set
-
-- **参数：**
-
-  - `{'root' | 'page' | 'parent' | 'node'} name`
-  - `{MNode} value`
-
-- **返回：**
-
-  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)}
-
-- **用法：**
-
-  设置当前指点节点配置
-  
-  'root': 当前整个配置，也就是当前编辑器的值
-
-  'page': 当前正在编辑的页面配置
-
-  'parent': 当前选中的节点的父节点
-
-  'node': 当前选中的节点
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-const node = editorService.get('node');
-
-node.name = 'new name';
-
-editorService.set('node', node);
-
-```
-
-### get
-
-
-- **参数：**
-
-  - `{'root' | 'page' | 'parent' | 'node' | 'stage' | 'highlightNode' | 'pageLength'} name`
-
-- **返回：**
-
-  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)}
-
-- **用法：**
-
-  获取当前指点节点配置
-
-  'root': 当前整个配置，也就是当前编辑器的值
-
-  'page': 当前正在编辑的页面配置
-
-  'parent': 当前选中的节点的父节点
-
-  'node': 当前选中的节点
-
-  'stage': [StageCore](../../api/stage/core.md)实例
-
-  'highlightNode': 当前高亮的Dom
-
-  'modifiedNodeIds': 当前已修改未保存的组件id
-
-  'pageLength': 当前的页面数量
-
-- **示例：**
-
-```js
-import { toRaw } from 'vue';
-import { editorService } from '@tmagic/editor';
-
-const node = editorService.get('node');
-
-console.log(toRaw(node));
-```
-
-### getNodeInfo
-
-- **参数：**
-
-  - `{number | string}` id
-
-- **返回：**
-
-  - {[EditorNodeInfo](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)}
-
-- **用法：**
-
-  根据id获取组件、组件的父组件以及组件所属的页面节点
-
-- **示例：**
-
-```js
-import { toRaw } from 'vue';
-import { editorService } from '@tmagic/editor';
-
-const info = editorService.getNodeInfo('text_123');
-
-console.log(toRaw(info.node));
-console.log(toRaw(info.parent));
-console.log(toRaw(info.page));
-```
-
-### getNodeById
-
-- **参数：**
-
-  - `{number | string}` id
-
-- **返回：**
-
-  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)} 组件节点配置
-
-- **用法：**
-
-  根据id获取组件的信息
-
-- **示例：**
-
-```js
-import { toRaw } from 'vue';
-import { editorService } from '@tmagic/editor';
-
-const node = editorService.getNodeById('text_123');
-
-console.log(toRaw(node));
-```
-
-### getParentById
-
-- **参数：**
-
-  - `{number | string}` id
-
-- **返回：**
-
-  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)} 指点组件的父节点配置
-
-- **用法：**
-
-  根据ID获取指点节点的父节点配置
-
-- **示例：**
-
-```js
-import { toRaw } from 'vue';
-import { editorService } from '@tmagic/editor';
-
-const parent = editorService.getParentById('text_123');
-
-console.log(toRaw(parent));
-```
-
-
-### select
-
-- **参数：**
-
-  - `{number | string | MNode}` config
-
-- **返回：**
-
-  当前选中的节点配置
-
-- **用法：**
-
-  选中指点节点（将指点节点设置成当前选中状态）
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-editorService.select('text_123');
-```
-
-### add
-
-- **参数：**
-
-  - {[AddMNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)} param0 将要添加的组件节点配置
-  - {[MContainer](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts) | null} parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
-
-- **返回：**
-
-  添加后的节点
-
-- **用法：**
-
-  向指点容器添加组件节点
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-editorService.add({
-  type: 'text',
-  // ...
-});
-
-const parent = editorService.getParentById('text_123');
-
-editorService.add({
-  type: 'text',
-  // ...
-}, parent);
-```
-
-### remove
-
-- **参数：**
-
-  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)} node
-
-- **返回：**
-
-  删除的组件配置
-
-- **用法：**
-
-  删除组件
-
-- **示例：**
-
-
-```js
-import { editorService } from '@tmagic/editor';
-
-const node = editorService.get('node');
-editorService.remove(node);
-```
-
-- ### update
-
-- **参数：**
-
-  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)} config
-
-- **返回：**
-
-  更新后的节点配置
-
-- **用法：**
-
-  更新节点
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-const node = editorService.get('node');
-node.name = 'new name';
-editorService.update(node);
-```
-
-- ### sort
-
-- **参数：**
-
-  - `{number | string}` id1
-  - `{number | string}` id2
-
-- **用法：**
-
-  将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-const parent = editorService.get('parent');
-editorService.update(parent[0].id, parent[3].id);
-```
-
-- ### copy
-
-- **参数：**
-
-  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)} config
-
-- **用法：**
-
-  将组将节点配置转化成string，然后存储到localStorage中
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-const node = editorService.get('node');
-editorService.copy(node);
-```
-
-- ### paste
-
-- **参数：**
-
-  - `{Position}` position 可选，如果设置，指定组件位置
-
-- **返回：**
-
-  添加后的组件节点配置
-
-- **用法：**
-
-  从localStorage中获取节点，然后添加到当前容器中
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-editorService.paste({ left: 0, top: 0 });`
-```
-
-- ### alignCenter
-
-- **参数：**
-
-  {[MNode](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)} config
-
-- **返回：**
-
-  当前组件节点配置
-
-- **用法：**
-
-  将指点节点设置居中
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-const node = editorService.get('node');
-editorService.alignCenter(node);
-```
-
-- ### moveLayer
-
-- **参数：**
-
-  - `{number | 'top' | 'bottom'` offset
-
-- **用法：**
-
-  移动当前选中节点位置
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-editorService.moveLayer('top'); // 置底
-editorService.moveLayer('bottom'); // 置顶
-editorService.moveLayer(1); // 上移一层 
-editorService.moveLayer(-1); // 下移一层 
-```
-
-- ### undo
-
-- **返回：**
-
-  上一次数据
-
-- **用法：**
-
-  撤销当前操作
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-editorService.undo();
-```
-
-- ### redo
-
-- **返回：**
-
-  下一步数据
-
-- **用法：**
-
-  恢复到下一步
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-editorService.redo();
-```
-
-- ### move
-
-- **参数：**
-
-  - `{number}` left
-  - `{number}` top
-
-
-- **用法：**
-
-  绝对定位布局下，移动组件位置
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-editorService.move(1, 1);
-```
-
-### usePlugin
-
-- **参数：**
-
-  - `{Record<string, Function>` options
-  
-
-- **用法：**
-  扩展editorService中的方法（'select', 'add', 'remove', 'update', 'sort', 'copy', 'paste', 'center', 'moveLayer', 'undo', 'redo'）
-
-  对于每一个方法，都可以为其添加before/after两个扩展方法，分别在该方法运行前与运行后调用
-
-  调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after最后一个个参数则是原方法的return值
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-editorService.usePlugin({
-  beforeAdd(value) {
-    console.log(value); // { type: 'text' }
-    console.log('before add');
-    return [{
-      type: 'button',
-    }];
-  },
-  afterAdd(value, result) {
-    console.log(value) // { type: 'button' }
-    console.log('after add');
-  },
-});
-
-const node = await editorService.add({
-  type: 'text';
-});
-
-console.log(node); // { type: 'button' }
-
-// console 输出如下：
-// { type: 'text' }
-// before add
-// add
-// { type: 'button' }
-// after add
-// { type: 'button' }
-```
-
-### use
-
-- **参数：**
-
-  - `{Record<string, Function>` options
-  
-
-- **用法：**
-  使用中间的方式扩展editorService中的方法（'select', 'add', 'remove', 'update', 'sort', 'copy', 'paste', 'center', 'moveLayer', 'undo', 'redo'）
-
-- **示例：**
-
-```js
-import { editorService } from '@tmagic/editor';
-
-editorService.use({
-  add(value, next) {
-    console.log('before');
-    next();
-    console.log('after')
-  },
-});
-
-editorService.add({
-  type: 'text';
-});
-
-// console 输出如下：
-// before
-// add
-// after
-```
-
-
-:::tip
-可以多次为同一个方法添加扩展，运行时会根据添加的顺序依次调用
-:::
-
-## propsService
-
-### setPropsConfig
-
-- **参数：**
-
-  - `{string}` type 组件类型
-  - [FormConfig](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) config 组件属性表单配置
-
-- **用法：**
-
-  为指定类型组件设置组件属性表单配置
-
-- **示例：**
-
-```js
-import { propsService } from '@tmagic/editor';
-
-propsService.setPropsConfig('text', [
-  {
-    name: 'text',
-    text: '文本',
-  },
-  {
-    name: 'multiple',
-    text: '多行文本',
-    type: 'switch',
-  },
-]);
-```
-
-### getPropsConfig
-
-- **参数：**
-
-  - `{string}` type 组件类型
-
-- **返回：**
-
-  组件属性表单配置
-
-- **用法：**
-
-  获取指点类型的组件属性表单配置
-
-- **示例：**
-
-```js
-import { propsService } from '@tmagic/editor';
-
-propsService.getPropsConfig('text');
-```
-
-### setPropsValue
-
-- **参数：**
-
-  - `{string}` type 组件类型
-  - `{Object}` value 组件初始值
-
-- **用法：**
-
-  为指点类型组件设置组件初始值
-
-- **示例：**
-
-```js
-import { propsService } from '@tmagic/editor';
-
-propsService.setPropsValue('text', {
-  text: '文本',
-  multiple: true,
-});
-```
-
-### getPropsValue
-
-- **参数：**
-
-  - `{string}` type 组件类型
-
-- **返回：**
-
-  组件初始值
-
-- **用法：**
-
-  获取指定类型的组件初始值
-
-- **示例：**
-
-```js
-import { propsService } from '@tmagic/editor';
-
-propsService.getPropsValue('text');
-```
-
-### usePlugin
-
-扩展propsService中的方法（'setConfig', 'getConfig', 'setValue', 'getValue'）
-
-参照[editorService.usePlugin](#useplugin)
-
-### use
-
-扩展propsService中的方法（'setConfig', 'getConfig', 'setValue', 'getValue'）
-
-参照[editorService.use](#use)

docs/src/api/form-config/fields/select.md~Stashed changes

@@ -1,200 +0,0 @@
-# Select 选择器
-
-当选项过多时，使用下拉菜单展示并选择内容。
-
-## 基础用法
-
-适用广泛的基础单选
-
-<demo-block type="form" :config="[{
-  type: 'select',
-  name: 'select',
-  text: '选项',
-  placeholder: '请选择',
-  options: [
-    { text: '选项1', value: 1 },
-    { text: '选项2', value: 2 }
-  ]
-}]">
-  <template #source>
-    <p>
-      type为'select'
-    </p>
-  </template>
-</demo-block>
-
-## 有禁用选项
-
-<demo-block type="form" :config="[{
-  type: 'select',
-  name: 'select',
-  text: '选项',
-  placeholder: '请选择',
-  options: [
-    { text: '选项1', value: 1 },
-    { text: '选项2', value: 2, disabled: true }
-  ]
-}]">
-  <template #source>
-    <p>
-      在 opitons 选项配置中，设定 disabled 值为 true，即可禁用该选项
-    </p>
-  </template>
-</demo-block>
-
-## 禁用状态
-
-选择器不可用状态
-
-<demo-block type="form" :config="[{
-  type: 'select',
-  name: 'select',
-  text: '选项',
-  placeholder: '请选择',
-  disabled: true,
-  options: [
-    { text: '选项1', value: 1 },
-    { text: '选项2', value: 2 }
-  ]
-}]">
-  <template #source>
-    <p>
-      为 el-select 设置 disabled 属性，则整个选择器不可用
-    </p>
-  </template>
-</demo-block>
-
-## 基础多选
-
-适用性较广的基础多选，用 Tag 展示已选项
-
-<demo-block type="form" :config="[{
-  type: 'select',
-  name: 'select',
-  text: '选项',
-  placeholder: '请选择',
-  multiple: true,
-  options: [
-    { text: '选项1', value: 1 },
-    { text: '选项2', value: 2 },
-    { text: '选项3', value: 3 }
-  ]
-}]"></demo-block>
-
-## 分组
-
-备选项进行分组展示
-
-<demo-block type="form" :config="[{
-  type: 'select',
-  name: 'select',
-  text: '选项',
-  placeholder: '请选择',
-  group: true,
-  options: [
-    {
-      label: 'group1',
-      options: [
-        { text: '选项1', value: 1 },
-        { text: '选项2', value: 2 },
-        { text: '选项3', value: 3 }
-      ],
-      disabled: true
-    }, {
-      label: 'group2',
-      options: [
-        { text: '选项4', value: 4 },
-        { text: '选项5', value: 5 },
-        { text: '选项6', value: 6 }
-      ]
-    }
-  ]
-}]">
-  <template #source>
-    <p>
-      配置group为true
-    </p>
-  </template>
-</demo-block>
-
-## 创建条目
-
-可以创建并选中选项中不存在的条目
-
-<demo-block type="form" :config="[{
-  type: 'select',
-  name: 'select',
-  text: '选项',
-  placeholder: '请选择',
-  allowCreate: true,
-  options: [
-    { text: '选项1', value: 1 },
-    { text: '选项2', value: 2 }
-  ]
-}]"></demo-block>
-
-## 远程选项
-
-通过接口请求获取选项列表
-
-<demo-block type="form" :config="[{
-  type: 'select',
-  name: 'select',
-  text: '选项',
-  placeholder: '请选择',
-  remote: true,
-  option: {
-    url: 'select/remote',
-    root: 'data',
-    method: 'post',
-    mode: 'cors',
-    headers: { 'Content-Type': 'application/json' },
-    body: { query: '' },
-    json: true,
-    text: option => `${option.name}`,
-    value: option => `${option.id}`,
-  }
-}]">
-  <template #source>
-    <p>
-      配置remote为true，然后配置option，而不是options
-    </p>
-  </template>
-</demo-block>
-
-:::tip
-如果 Select 的绑定值为对象类型，请务必指定 valueKey 作为它的唯一性标识。
-:::
-
-## Select Attributes
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| name | 绑定值 | string | — | — |
-| placeholder  | 输入框占位文本   | string |       —        |      —   |
-| text     | 表单标签   | string |       —        |      —   |
-| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
-| multiple | 是否多选 | boolean | — | false |
-| valueKey | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
-| allowCreate | 是否允许用户创建新条目 | boolean | — | false |
-| remote | 是否为远程搜索 | boolean | — | false |
-| group | 是否选择分组 | boolean | — | false |
-| onChange  | 值变化时触发的函数  | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
-| options  | 选项  | Array   | — | -   |
-| option  | 选项  | Object   | — | -   |
-
-## options item
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| text |  | 选项的标签 | string/number/object | — | — |
-| value | 选项的值	 | string | — | — |
-| disabled  | 是否禁用    | boolean | — | false   |
-| label |  string | — | — | — |
-| options | Array | — | — | — |
-
-## option
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| url | string | — | — | — |
-| root | string | — | — | — |
-| text | string / Function | — | — | — |
-| value | string / Function | — | — | — |

docs/src/api/form/form.md

@@ -1,163 +0,0 @@
-# m-form
-
-## props
-
-### initValues
-
-- **类型：** Object
-  
-- **默认值：** {}
-  
-- **详情：**
-  
-  表单初始化值
-
-- **示例：**
-
-```js
-{
-  text: 'text',
-  multiple: true,
-}
-```
-
-:::tip
-initValues应该是与config一一对应的，如果initValues中的key没有出现在config的name中，那么这个值将被丢掉
-:::
-
-### config
-
-- **类型：** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)
-  
-- **默认值：** []
-  
-- **详情：**
-  
-  表单配置
-
-- **示例：**
-
-```js
-[
-  {
-    name: 'text',
-    text: '文本',
-  },
-  {
-    name: 'multiple',
-    text: '多行文本',
-    type: 'switch',
-  },
-]
-```
-
-### labelWidth
-
-- **类型：** string | number
-  
-- **默认值：** '200px'
-  
-- **详情：**
-  
-  表单域标签的宽度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto
-
-### disabled
-
-- **类型：** boolean
-  
-- **默认值：** false
-  
-- **详情：**
-  
-  是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效
-
-- **示例：**
-
-### height
-
-- **类型：** string
-  
-- **默认值：** 'auto'
-  
-- **详情：**
-  
-  表单高度
-
-### stepActive
-
-- **类型：** string | number
-  
-- **默认值：** 1
-  
-- **详情：**
-  
-  使用了 step 组件时，默认的选中的步骤数
-
-### size
-
-- **类型：**  'medium' | 'small' | 'mini'
-  
-- **默认值：** 'small'
-  
-- **详情：**
-  
-  用于控制该表单内组件的尺寸
-
-### inline
-
-- **类型：** boolean
-  
-- **默认值：** false
-  
-- **详情：**
-  
-  行内表单模式	
-
-### labelPosition
-
-- **类型：** 'right' | 'left' | 'top'
-  
-- **默认值：** 'right'
-  
-- **详情：**
-  
-  表单域标签的位置， 如果值为 left 或者 right 时，则需要设置 label-width
-
-### keyProp
-
-- **类型：** string
-  
-- **默认值：** '__key'
-  
-- **详情：**
-  
-  作为表单项的组件实例的key
-
-- **示例：**
-
-```js
-[
-  {
-    name: 'text',
-    type: 'text',
-    text: '文本',
-    __key: 123,
-  }
-]
-```
-
-## instance methods
-
-### submitForm
-
-- **参数：**
-
-  - `{boolean}` native
-
-- **返回：**
-
-  - `{Object}` 整个表单的值
-
-- **用法：**
-
-  提交表单，获取表单的值

docs/src/api/stage/core.md

@@ -1,286 +0,0 @@
-# StageCore
-
-## 配置
-
-### canSelect
-
-- **类型：** Function
-  
-- **默认值：** (el: HTMLElement) => !!el.id
-  
-- **详情：**
-  
-  判断Dom节点是否能被选中
-
-### moveableOptions
-
-- **类型：** (el: HTMLElement) => boolean
-  
-- **默认值：** (el: HTMLElement) => !!el.id
-  
-- **详情：**
-  
-  选中框配置选项，使用的是[moveable](https://github.com/daybrush/moveable)第三方库
-  
-  ### runtimeUrl
-
-- **类型：** string
-  
-- **默认值：** undefined
-  
-- **详情：**
-  
-  runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径
-  
-  ### render
-
-- **类型：** (renderer: StageCore) => Promise\<HTMLElement\> | HTMLElement
-  
-- **默认值：** undefined
-  
-- **详情：**
-  
-  画布渲染的内容，通常是通过解析[modelValue](#modelValue)来渲染出DOM，return的DOM结构需要有一个根节点。
-
-### autoScrollIntoView
-
-- **类型：** boolean
-  
-- **默认值：** undefined
-  
-- **详情：**
-  
-选中组件时，是否自动滚动该组件到可视区域
-
-
-### updateDragEl
-
-- **类型：** (el: HTMLDivElement, target: HTMLElement) => void;
-  
-- **默认值：** undefined
-  
-- **详情：**
-  
-当选中框与组件不贴合时，可以通过此方法进行调整
-
-
-## 属性
-
-### selectedDom
-
-- **类型：** Element | undefined
-  
-- **详情：**
-  
-当前选中的Dom
-
-### highlightedDom
-
-- **类型：** Element | undefined
-  
-- **详情：**
-  
-当前高亮的Dom
-
-### renderer
-
-- **类型：** [StageRender](./render.md)
-  
-- **详情：**
-  
-StageRender实例
-
-### mask
-
-- **类型：** [StageMask](./mask.md)
-  
-- **详情：**
-  
-StageMask实例
-
-
-### dr
-
-- **类型：** [StageDragResize](./drag-resize.md)
-  
-- **详情：**
-  
-StageDragResize实例
-
-### config
-
-- **类型：** Object
-  
-- **详情：**
-  
-初始化配置
-
-### container
-
-- **类型：** HTMLDivElement
-  
-- **详情：**
-  
-画布根节点
-
-## 方法
-
-### mount
-
-- **参数：**
-
-  - `{HTMLDivElement} el` 将stage挂载到该Dom节点上
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  挂载Dom节点
-
-### clearGuides
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  清空所有参考线
-
-### destroy
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  销毁实例
-
-
-### getElementFromPoint
-
-- **参数：**
-
-  - `{MouseEvent} event`
-
-- **返回：**
-
-  - `{Promise<void>}`
-
-
-### select
-
-- **参数：**
-
-  - `{Id | HTMLElement} idOrEl` 组件Dom节点的id属性，或者Dom节点
-  - `{MouseEvent} MouseEvent`
-
-- **返回：**
-
-  - `{Promise<void>}`
-
-- **用法：**
-
-  选中组件
-
-### update
-
-- **参数：**
-
-  - `{UpdateData} data` 更新的数据
-
-```ts
-interface UpdateData {
-  config: MNode;
-  root: MApp;
-}
-```
-
-- **返回：**
-
-  - `{Promise<void>}`
-
-- **用法：**
-
-  更新选中的节点
-
-### highlight
-
-- **参数：**
-
-  - `{HTMLElement | Id} idOrEl` 组件Dom节点的id属性，或者Dom节点
-
-- **返回：**
-
-  - `{Promise<void>}`
-
-- **用法：**
-
-  高亮选中组件
-
-### sortNode
-
-- **参数：**
-
-  - `{SortEventData} data`
-
-```ts
-interface SortEventData {
-  src: Id;
-  dist: Id;
-  root?: MApp;
-}
-```
-
-- **返回：**
-
-  - `{Promise<void>}`
-
-### add
-
-- **参数：**
-
-  - `{UpdateData} data`
-
-
-```ts
-interface UpdateData {
-  config: MNode;
-  root: MApp;
-}
-```
-
-- **返回：**
-
-  - `{Promise<void>}`
-
-### remove
-
-- **参数：**
-
-  - `{UpdateData} data`
-
-
-```ts
-interface UpdateData {
-  config: MNode;
-  root: MApp;
-}
-```
-
-- **返回：**
-
-  - `{Promise<void>}`
-
-### setZoom
-
-- **参数：**
-
-  - `{number} zoom`
-
-- **返回：**
-
-  - `{void}`

docs/src/api/stage/drag-resize.md

@@ -1,182 +0,0 @@
-# StageDragResize
-
-## 配置
-
-### core
-
-- **类型：** [StageCore](./core.md)
-  
-- **详情：**
-  
-StageCore实例
-
-### container
-
-- **类型：** HTMLElement
-  
-- **详情：**
-  
-选中框容器
-
-## 属性
-
-### core
-
-- **类型：** [StageCore](./core.md)
-  
-- **详情：**
-
-### container
-
-- **类型：** HTMLElement
-  
-- **详情：**
-  
-选中框容器
-
-### target
-
-- **类型：** HTMLElement
-  
-- **详情：**
-  
-目标节点
-
-### dragEl
-
-- **类型：** HTMLElement
-  
-- **详情：**
-  
-目标节点在蒙层中的占位节点
-
-### moveable
-
-- **类型：** [moveable](https://github.com/daybrush/moveable)
-  
-- **详情：**
-  
-moveable实例
-
-### horizontalGuidelines
-
-- **类型：** number[]
-  
-- **详情：**
-  
-水平参考线
-
-### verticalGuidelines
-
-- **类型：** number[]
-  
-- **详情：**
-  
-垂直参考线
-
-### elementGuidelines
-
-- **类型：** HTMLElement[]
-  
-- **详情：**
-  
-对齐元素集合
-
-### mode
-
-- **类型：** Mode
-
-```ts
-enum Mode {
-  /** 绝对定位布局 */
-  ABSOLUTE = 'absolute',
-  /** 固定定位布局 */
-  FIXED = 'fixed',
-  /** 流式布局 */
-  SORTABLE = 'sortable',
-}
-```
-  
-- **详情：**
-  
-布局方式：流式布局、绝对定位、固定定位
-
-## 方法
-
-
-### select
-
-- **参数：**
-
-  - `{HTMLElement} el` 组件Dom节点
-  - `{MouseEvent} MouseEvent`
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  将选中框渲染并覆盖到选中的组件Dom节点上方
-
-  当选中的节点是不是absolute时，会创建一个新的节点出来作为拖拽目标
-
-### updateMoveable
-
-- **参数：**
-
-  - `{HTMLElement} el` 组件Dom节点
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  初始化选中框并渲染出来
-
-### setGuidelines
-
-- **参数：**
-
-  - `{GuidesType} type` 参考线类型
-  - `{number[]} guidelines` 参考线偏移值
-
-```ts
-/** 参考线类型 */
-export enum GuidesType {
-  /** 水平 */
-  HORIZONTAL = 'horizontal',
-  /** 垂直 */
-  VERTICAL = 'vertical',
-}
-```
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  设置参考线
-
-### clearGuides
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  情况参考线
-
-### destroy
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  销毁实例
-

docs/src/api/stage/mask.md

@@ -1,173 +0,0 @@
-# StageMask
-
-## 配置
-
-### core
-
-- **类型：** [StageCore](./core.md)
-  
-- **详情：**
-  
-StageCore实例
-
-## 属性
-
-### content
-
-- **类型：** HTMLDivElement
-  
-- **详情：**
-  
-蒙层的Dom节点
-
-### wrapper
-
-- **类型：** HTMLDivElement
-  
-- **详情：**
-  
-蒙层的容器Dom节点，用于实现滚动
-
-### core
-
-- **类型：** [StageCore](./core.md)
-  
-- **详情：**
-  
-StageCore实例
-
-### page
-
-- **类型：** HTMLElement | null
-  
-- **详情：**
-  
-当前页面组件Dom节点
-
-### pageScrollParent
-
-- **类型：** HTMLElement | null
-  
-- **详情：**
-  
-页面组件的滚动父节点
-
-### scrollTop
-
-- **类型：** number
-  
-- **详情：**
-  
-垂直滚动位移
-
-### scrollLeft
-
-- **类型：** number
-  
-- **详情：**
-  
-水平滚动位移
-
-### width
-
-- **类型：** number
-  
-- **详情：**
-  
-蒙层宽度，不应该手动设置，会自动同步[page](#page)
-
-### height
-
-- **类型：** number
-  
-- **详情：**
-  
-蒙层高度，不应该手动设置，会自动同步[page](#page)
-
-### wrapperHeight
-
-- **类型：** number
-  
-- **详情：**
-  
-蒙层容器高度
-
-### wrapperWidth
-
-- **类型：** number
-  
-- **详情：**
-  
-蒙层容器宽度
-
-### maxScrollTop
-
-- **类型：** number
-  
-- **详情：**
-  
-最大垂直滚动位移
-
-### maxScrollLeft
-
-- **类型：** number
-  
-- **详情：**
-  
-最大水平滚动位移
-
-## 方法
-
-### mount
-
-- **参数：**
-
-  - `{HTMLDivElement} el` 将蒙层挂载到该Dom节点上
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  挂载Dom节点
-
-### scrollIntoView
-
-- **参数：**
-
-  - `{Element} el` 需要滚动的节点
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  将指定节点滚动到可视区域
-
-### destroy
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  销毁实例
-
-### setLayout
-
-- **参数：**
-
-  - `{Element} el`
-
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  根据节点设置模式，固定模式wrap与content宽高保持一直
-

docs/src/api/stage/render.md

@@ -1,110 +0,0 @@
-# StageRender
-
-## 配置
-
-### core
-
-- **类型：** [StageCore](./core.md)
-  
-- **详情：**
-  
-StageCore实例
-
-## 属性
-
-### core
-
-- **类型：** [StageCore](./core.md)
-  
-- **详情：**
-
-StageCore实例
-
-### contentWindow
-
-- **类型：** RuntimeWindow | null
-
-```ts
-interface RuntimeWindow extends Window {
-  magic: Magic;
-}
-
-interface Magic {
-  /** 当前页面的根节点变化时调用该方法，编辑器会同步该el和stage的大小，该方法由stage注入到iframe.contentWindow中 */
-  onPageElUpdate: (el: HTMLElement) => void;
-
-  onRuntimeReady: (runtime: Runtime) => void;
-}
-```
-  
-- **详情：**
-
-组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow
-
-### runtime
-
-- **类型：** Runtime | null
-
-```ts
-interface Runtime {
-  getApp?: () => Core;
-  beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
-  // 编辑器Dsl整个改变时调用
-  updateRootConfig?: (config: MApp) => void;
-  // 选择页面时调用
-  updatePageId?: (id: Id) => void;
-  // 选中组件时调用
-  select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
-  // 添加组件时调用
-  add?: (data: UpdateData) => void;
-  // 更新组件时调用
-  update?: (data: UpdateData) => void;
-  // 流式布局下拖动组件后调用
-  sortNode?: (data: SortEventData) => void;
-  // 删除组件时调用
-  remove?: (data: RemoveData) => void;
-}
-```
-  
-- **详情：**
-
-用于编辑器与画布的交互
-
-### iframe
-
-- **类型：** HTMLIFrameElement
-  
-- **详情：**
-
-### runtimeUrl
-
-- **类型：** string
-  
-- **详情：**
-
-## 方法
-
-### destroy
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  销毁实例
-
-### mount
-
-- **参数：**
-
-  - `{HTMLDivElement} el` 将页面挂载到该Dom节点上
-
-- **返回：**
-
-  - `{void}`
-
-- **用法：**
-
-  挂载Dom节点
-

docs/src/guide/advanced/high-level-function.md

@@ -1,45 +0,0 @@
-# 高级函数
-tmagic-editor的一个高级特性，就是支持开发者在不修改组件代码的情况下，对项目页面进行特定的修改，方式即支持开发者在线编码，让这份代码特定时机执行。
-
-<img src="https://image.video.qpic.cn/oa_88b7d-37_1895524853_1636348113209218">
-
-## @tmagic/core
-我们在 @tmagic/core 这个包中，实现了tmagic-editor组件节点的 Node 类，每个组件在tmagic-editor的运行环境被渲染前，都会对应初始化一个 Node 类实例。而这些 Node 实例上包含了一些基础功能，包括触发指定钩子函数。这是一个框架无关的核心库，所以支持在各个语言框架中使用。但是具体触发时机需要由各个框架的渲染器实现。
-
-在 react 和 vue 两种框架下的执行时机，可以参考我们的 runtime 实现:
-
-- [react runtime 执行钩子时机](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-react/src/useApp.ts)
-- [vue runtime 执行钩子时机](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui/src/useApp.ts)
-
-## 函数编写
-在编辑中，即写入一个执行函数，tmagic-editor会在对应组件的指定声明周期中执行该函数。同时**传入当前组件的 Node 实例对象**，作为执行参数。
-
-传入的实例对象，可以根据各语言框架实现的 ui 提供的特性能力，来支持业务组件的能力实现。这个功能提供给开发者自由实现黑科技的机会。
-
-<img src="https://image.video.qpic.cn/oa_2a552e-0_934618672_1636348294258073">
-
-### 函数参数
-在 Magic-Core 中，我们对执行钩子函数传入了对应的 [Node](https://github.com/Tencent/tmagic-editor/blob/master/packages/core/src/Node.ts) 实例对象。在 react 和 vue 中会稍有差异。差异在于 [Node](https://github.com/Tencent/tmagic-editor/blob/master/packages/core/src/Node.ts) 实例的 instance 属性。
-
-- [Node 实例描述](https://github.com/Tencent/tmagic-editor/blob/master/packages/core/src/Node.ts)
-
-### instance
-Magic-Core 会在监听到对应事件时，将 payload 赋值给 Node 实例的 instace 属性。
-
-其中 instance 属性的值，即我们在上面描述的，各个框架的钩子执行时机时发送的 payload 数据，各个框架发送的 instance 数据依据框架而定。instance 上会挂载一个 $el 对象，是各个框架 runtime 实现后，在组件 mounted 时候会得到的 dom 引用实例。
-
-在示例中可以找到对应的触发事件和监听事件的形式如下：
-
-```javascript
-// runtime 中发送数据
-app.emit('created', instance)
-
-// class Node 
-this.once('created', (instance: any) => {
-  this.instance = instance;
-});
-```
-
-- [Node 类监听声明周期](https://github.com/Tencent/tmagic-editor/blob/master/packages/core/src/Node.ts)
-- [react runtime 执行钩子时机](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-react/src/useApp.ts)
-- [vue runtime 执行钩子时机](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui/src/useApp.ts)

docs/src/page/advanced.md

@@ -1,142 +0,0 @@
-# 深入
-本章详细介绍如何深入理解tmagic-editor的打包，以及如何根据需求定制，修改tmagic-editor的页面打包发布方案。页面发布、打包相关的定制化开发，需要使用tmagic-editor的业务方，搭建好基于开源tmagic-editor的管理平台、存储服务等配套设施。
-
-## 实现一个 runtime
-在 [@tmagic/ui](../guide/advanced/magic-ui.html) 部分，我们已经说过，runtime 和 UI 是配套实现的。每个版本的 runtime 都需要一个对应的 UI 来作为渲染器，实现渲染 DSL 呈现页面的功能。
-
-### UI
-一个 UI 应该至少包含一个渲染器，来实现[页面渲染](../guide/advanced/page.html)。同时可以提供一些基础组件。具体实现可以参考[@tmagic/ui](../guide/advanced/magic-ui.html)。
-
-### page
-runtime 的 `page` 部分，就是真实项目页面的渲染环境。发布出去的项目页都需要基于该部分来实现渲染功能。而 `page` 的主要逻辑，就是需要加载 UI，同时实现业务方需要的业务逻辑，比如：
-- 提供页面需要的全局 api
-- 业务需要的特殊实现逻辑
-- 加载第三方全局组件/插件等
-
-具体的 page 实现示例，可以参考
-- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3/src/page)
-- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2/src/page)
-- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react/src/page)
-
-### playground
-runtime 的 `playground` 部分，和 `page` 做的事情几乎一致，业务方可以包含上述 `page` 所拥有的全部能力。但是，因为 playground 需要被编辑器加载，作为编辑器中页面模拟器的渲染容器，和编辑器通信，接受编辑器中组件的增删改查。所以，除了保持和 `page` 一样的渲染逻辑之外，`playground` 还要额外实现一套既定通信内容和 api，才能实现和编辑器的通信功能。
-
-#### onRuntimeReady
-**在 playground 页面渲染后**，需要调用接口通知编辑器完成加载。该调用需要传入一个参数 API，即挂载了增删改查功能的对象示例，提供给编辑器。
-```javascript
-window.magic?.onRuntimeReady(API)
-```
-
-#### onPageElUpdate
-**playground 在每次更新了页面配置后**，调用一次 onPageElUpdate 并传入一个 DOM 节点，该方法作用是传入一个页面渲染组件的根节点，用来告知编辑器的模拟器遮罩如何作出反应。
-```javascript
-window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
-```
-
-#### 提供 API
-| API      | 说明    | 参数      | 
-|---------- |-------- |---------- |
-|updateRootConfig| 根节点更新 | `root: MApp`  |
-|updatePageId| 更新当前页面 id | `id: string` |
-|select| 选中组件 | `id: string`|
-|add| 增加组件 | { `config` , `root` }: `UpdateData` |
-|update| 更新组件 | { `config` , `root` }: `UpdateData`  |
-|remove| 删除组件 | { `config` , `root` }: `UpdateData`  |
-|sortNode| 组件在容器间排序 |{ `src` , `dist`, `root` }: `SortEventData`  |
-
-runtime 的实现示例，可以参考tmagic-editor提供的：
-- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3)
-- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2)
-- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react)
-
-## 打包原理
-在tmagic-editor的示例打包方案中，是基于 runtime 代码，以及 runtime 的打包配置进行的打包构建，将构建得到的产物发布，在tmagic-editor页面最终发布时，通过加载构建产物和 DSL 来实现页面渲染。
-
-### 打包配置
-在 vite.config.ts 中有如下配置：
-```javascript
-export default {
-  build: {
-    sourcemap: true,
-    minify: false,
-
-    rollupOptions: {
-      input: {
-        page: './page.html',
-        playground: './playground.html',
-        components: './src/comp-entry.ts',
-        config: './src/config-entry.ts',
-        value: './src/value-entry.ts',
-      },
-      output: {
-        entryFileNames: 'assets/[name].js',
-      },
-    },
-  }
-}
-```
-打包时，即会生成对应的静态资源，我们在对应地方使用时，加载对应入口文件的打包产物即可。其中 page.html 和 playground.html 在示例项目中，而另外三个入口是在打包过程中动态生成的。
-
-### 打包产物
-执行打包命令`npm run build`后，会在 runtime/src 中生成三个入口文件
-```
-comp-entry.ts
-config-entry.ts
-value-entry.ts
-```
-
-这三个入口文件是基于 scripts/units.js 中描述的组件信息生成的，units.js 中的组件信息如何获取和生成，需要由使用tmagic-editor代码的业务方自行处理。更多关于tmagic-editor组件规范相关可以查阅[组件开发文档](../component/introduction.html)。示例的 units.js 文件中，组件描述是以组件在tmagic-editor中定义的 type 为 key，包名（或本地路径）为 value 的对象。
-
-tmagic-editor的[打包脚本](../page/introduction.html#打包脚本)会根据这个组件声明，进行分析，生成上述三个入口文件：
-::: tip 生成步骤为
-1. 分析包结构，是否符合tmagic-editor组件规范
-2. 分析每个组件包内的 config value 和组件逻辑代码的入口
-3. 生成包含所有组件信息的三个入口文件
-:::
-
-同时得到打包产物 dist 目录。包含了如下的主要文件:
-```
-|----dist
-      |----assets
-      |     |----components.js
-      |     |----config.js
-      |     |----value.js
-      |----page.html
-      |----playground.html
-```
-
-::: tip 各个文件作用说明
-- page.html 即真实项目页渲染时，用户加载的页面框架，tmagic-editor在发布时，会将项目页面所需的信息注入到 page.html 中，让用户加载了页面后，能拉取到对应的项目信息。
-- playground.html 是编辑器中模拟器使用的静态资源。tmagic-editor的模拟器使用 iframe 渲染，即加载了 playground.html，并注入编辑器中的配置信息，实现页面渲染。
-- component.js 是所有自定义组件的入口，在 runtime 中需要加载组件，交由渲染器渲染页面。
-- config.js 和 value.js 是编辑器中的各个组件的表单配置信息和表单初始值的入口，仅在编辑器中会被使用到。
-:::
-
-
-打开项目页面加载的产物资源：
-<img src="https://image.video.qpic.cn/oa_88b7d-36_1166112390_1633782654899174" width="100%" alt="tmagic-editor runtime page 示意图">
-
-在编辑器中加载的产物资源：
-<img src="https://image.video.qpic.cn/oa_fd3c9c-2_217204702_1633782657315434" width="100%" alt="tmagic-editor runtime playground 示意图">
-
-### 页面发布
-如介绍中提到的，tmagic-editor页面发布方案，是对构建产物 page.html 进行项目信息注入。项目信息就是搭建平台存储的页面配置。发布时，将注入项目信息的 page.html 发布出去即可。
-
-## 版本管理
-基于上一步提到的打包原理，每次执行`npm run build`后，得到的产物都可以进行归档编号，存为版本。涉及到的组件改动和新增修改，体现在各个版本中。
-
-<img src="https://image.video.qpic.cn/oa_88b7d-32_1233288257_1633783105283986" width="40%" alt="版本选择">
-
-版本管理具体如何实现，这取决于使用tmagic-editor的业务方。版本管理具有如下优点：
-1. 对于已经配置好发布的项目，使用固定版本，不会被新版本的特性影响，保证项目线上稳定运行
-2. 发布的新版本如果出现问题，可以及时回退选择使用旧版本
-
-## 结合业务定制
-tmagic-editor的静态资源构建，项目配置保存，页面发布，在tmagic-editor的提供的示例方案中，流程是：
-1. 触发构建，执行流水线，基于 runtime 执行 build 
-2. 将构建产物归档推送至 cdn，存为一个ui版本
-3. 项目配保存后，项目发布时，将项目配置发布至 CDN 存储为 DSL.js，同时根据当前项目使用的ui版本，获取到 page.html，将 DSL.js 引用方式以 script 标签形式写入。
-4. 将注入信息的 page.html 发布为项目静态资源 act.html
-5. 线上可加载 act.html 访问项目
-
-其中各个步骤的定制，可以交由业务方根据tmagic-editor提供的示例进行自定义修改。

package.json

@@ -19,8 +19,9 @@
     "build": "pnpm --filter \"@tmagic/*\" build",
     "build:runtime:admin": "pnpm --filter \"runtime-*\" build:admin",
     "build:playground": "pnpm --filter \"runtime-vue3\" build && pnpm --filter \"tmagic-playground\" build",
-    "docs": "pnpm --filter \"docs\" dev",
+    "docs:dev": "vitepress dev docs",
-    "build:docs": "pnpm --filter \"docs\" build",
+    "docs:serve": "vitepress serve docs",
+    "docs:build": "vitepress build docs",
     "reinstall": "pnpm clean:all && pnpm bootstrap",
     "test": "vitest run",
     "coverage": "vitest run --coverage",
@@ -44,6 +45,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "devDependencies": {
+    "@algolia/client-search": ">= 4.9.1 < 6",
     "@babel/core": "^7.18.0",
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
@@ -57,6 +59,7 @@
     "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.2.2",
     "cz-conventional-changelog": "^3.3.0",
+    "element-plus": "^2.2.19",
     "enquirer": "^2.3.6",
     "eslint": "^7.29.0",
     "eslint-config-tencent": "^1.0.1",
@@ -65,6 +68,7 @@
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-vue": "^7.11.1",
     "execa": "^4.0.2",
+    "highlight.js": "^11.7.0",
     "husky": "^7.0.0",
     "jsdom": "^19.0.0",
     "lint-staged": "^11.0.1",
@@ -73,9 +77,11 @@
     "recast": "^0.20.4",
     "rimraf": "^3.0.2",
     "semver": "^7.3.7",
+    "serialize-javascript": "^6.0.0",
     "shx": "^0.3.4",
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
+    "vitepress": "1.0.0-alpha.29",
     "vitest": "^0.23.4",
     "vue": "^3.2.37"
   },

packages/editor/src/Editor.vue

@@ -69,7 +69,7 @@ import { defineComponent, onUnmounted, PropType, provide, reactive, toRaw, watch
 import { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
-import {
+import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
   CustomizeMoveableOptionsCallbackConfig,
@@ -122,25 +122,27 @@ export default defineComponent({
       type: Object as PropType<SideBarData>,
     },
 
-    layerContentMenu: {
-      type: Array as PropType<(MenuButton | MenuComponent)[]>,
-      default: () => [],
-    },
-
-    stageContentMenu: {
-      type: Array as PropType<(MenuButton | MenuComponent)[]>,
-      default: () => [],
-    },
-
     /** 顶部工具栏配置 */
     menu: {
       type: Object as PropType<MenuBarData>,
       default: () => ({ left: [], right: [] }),
     },
 
+    /** 组件树右键菜单 */
+    layerContentMenu: {
+      type: Array as PropType<(MenuButton | MenuComponent)[]>,
+      default: () => [],
+    },
+
+    /** 画布右键菜单 */
+    stageContentMenu: {
+      type: Array as PropType<(MenuButton | MenuComponent)[]>,
+      default: () => [],
+    },
+
     /** 中间工作区域中画布渲染的内容 */
     render: {
-      type: Function as PropType<() => HTMLDivElement>,
+      type: Function as PropType<(stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>>,
     },
 
     /** 中间工作区域中画布通过iframe渲染时的页面url */
@@ -163,7 +165,7 @@ export default defineComponent({
 
     /** 组件联动事件选项列表 */
     eventMethodList: {
-      type: Object,
+      type: Object as PropType<Record<string, { events: EventOption[]; methods: EventOption[] }>>,
       default: () => ({}),
     },
 

packages/editor/src/services/editor.ts

@@ -91,9 +91,8 @@ class Editor extends BaseService {
 
   /**
    * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes'
+   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
    * @param value MNode
-   * @returns MNode
    */
   public set<T = MNode>(name: keyof StoreState, value: T) {
     this.state[name] = value as any;
@@ -109,7 +108,7 @@ class Editor extends BaseService {
 
   /**
    * 获取当前指点节点配置
-   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes'
+   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
    * @returns MNode
    */
   public get<T = MNode>(name: keyof StoreState): T {
@@ -432,7 +431,6 @@ class Editor extends BaseService {
   /**
    * 删除组件
    * @param {Object} node
-   * @return {Object} 删除的组件配置
    */
   public async remove(nodeOrNodeList: MNode | MNode[]): Promise<void> {
     const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];

packages/editor/src/services/props.ts

@@ -91,7 +91,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @param value 组件初始值
    */
-  public setPropsValue(type: string, value: MNode) {
+  public async setPropsValue(type: string, value: MNode) {
     this.state.propsValueMap[type] = value;
   }
 

packages/editor/src/type.ts

@@ -62,7 +62,7 @@ export interface StageOptions {
   containerHighlightClassName: string;
   containerHighlightDuration: number;
   containerHighlightType: ContainerHighlightType;
-  render: () => HTMLDivElement;
+  render: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
   moveableOptions: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
   isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
@@ -170,18 +170,17 @@ export interface MenuButton {
    * 按钮类型
    * button: 只有文字不带边框的按钮
    * text: 纯文本
+   * divider: 分割线
    * dropdown: 下拉菜单
-   * divider: 分隔线
-   * zoom: 放大缩小
    */
-  type: 'button' | 'dropdown' | 'text' | 'divider' | 'zoom';
+  type: 'button' | 'text' | 'divider' | 'dropdown';
   /** 当type为divider时有效，分割线方向, 默认vertical */
   direction?: 'horizontal' | 'vertical';
   /** 展示的文案 */
   text?: string;
   /** 鼠标悬浮是显示的气泡中的文案 */
   tooltip?: string;
-  /** element-plus icon class */
+  /** Vue组件或url */
   icon?: string | Component<{}, {}, any>;
   /** 是否置灰，默认为false */
   disabled?: boolean | ((data?: Services) => boolean);
@@ -189,8 +188,8 @@ export interface MenuButton {
   display?: boolean | ((data?: Services) => boolean);
   /** type为button/dropdown时点击运行的方法 */
   handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
-  /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
   className?: string;
+  /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
   items?: MenuButton[];
 }
 
@@ -214,8 +213,13 @@ export interface MenuComponent {
  * 'delete': 删除按钮
  * 'undo': 撤销按钮
  * 'redo': 恢复按钮
+ * 'zoom': 'zoom-in', 'zoom-out', 'scale-to-original', 'scale-to-fit' 的集合
  * 'zoom-in': 放大按钮
  * 'zoom-out': 缩小按钮
+ * 'guides': 显示隐藏参考线
+ * 'rule': 显示隐藏标尺
+ * 'scale-to-original': 缩放到实际大小
+ * 'scale-to-fit': 缩放以适应
  */
 export type MenuItem =
   | '/'
@@ -227,6 +231,8 @@ export type MenuItem =
   | 'zoom-out'
   | 'guides'
   | 'rule'
+  | 'scale-to-original'
+  | 'scale-to-fit'
   | MenuButton
   | MenuComponent
   | string;
@@ -244,13 +250,14 @@ export interface MenuBarData {
 export interface SideComponent extends MenuComponent {
   /** 显示文案 */
   text: string;
-  /** element-plus icon class */
+  /** vue组件或url */
   icon: Component<{}, {}, any>;
 }
 
 /**
  * component-list: 组件列表
  * layer: 已选组件树
+ * code-block: 代码块
  */
 export type SideItem = 'component-list' | 'layer' | 'code-block' | SideComponent;
 
@@ -269,8 +276,9 @@ export interface ComponentItem {
   text: string;
   /** 组件类型 */
   type: string;
-  /** element-plus icon class */
+  /** Vue组件或url */
-  icon?: string | Component;
+  icon?: string | Component<{}, {}, any>;
+  /** 新增组件时需要透传到组价节点上的数据 */
   data?: {
     [key: string]: any;
   };

packages/table/src/ActionsColumn.vue

@@ -55,7 +55,7 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['afterAction']);
+const emit = defineEmits(['after-action']);
 
 const display = (fuc: boolean | Function | undefined, row: any) => {
   if (typeof fuc === 'function') {
@@ -101,13 +101,13 @@ const save = async (index: number, config: ColumnConfig) => {
     if (res.ret === 0) {
       tMagicMessage.success('保存成功');
       props.editState[index] = undefined;
-      emit('afterAction');
+      emit('after-action');
     } else {
       tMagicMessage.error(res.msg || '保存失败');
     }
   } else {
     props.editState[index] = undefined;
-    emit('afterAction');
+    emit('after-action');
   }
 };
 </script>

packages/table/src/Table.vue

@@ -42,7 +42,7 @@
           :rowkey-name="rowkeyName"
           :edit-state="editState"
           :key="columnIndex"
-          @afterAction="$emit('afterAction')"
+          @after-action="$emit('after-action')"
         ></ActionsColumn>
       </template>
 
@@ -98,7 +98,7 @@ const props = withDefaults(
 
 const emit = defineEmits([
   'sort-change',
-  'afterAction',
+  'after-action',
   'select',
   'select-all',
   'selection-change',