chore: 🤖 update structure

.gitignore

@@ -13,6 +13,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
+# package-lock.json
 
 # Runtime data
 pids

packages/demo/package.json

@@ -3,11 +3,14 @@
   "version": "0.0.1",
   "description": "低代码编辑器",
   "dependencies": {
-    "@ali/iceluna-addon-2": "^1.0.3",
+    "@ali/lowcode-editor-core": "0.0.1",
-    "@ali/iceluna-addon-component-list": "^1.0.11",
+    "@ali/lowcode-editor-skeleton": "0.0.1",
-    "@ali/iceluna-sdk": "^1.0.5-beta.26",
+    "@ali/lowcode-plugin-logo": "0.0.1",
+    "@ali/lowcode-plugin-undo-redo": "0.0.1",
+    "@ali/lowcode-plugin-save": "0.0.1",
+    "@ali/lowcode-plugin-designer": "0.0.1",
+    "@ali/lowcode-plugin-components-pane": "0.0.1",
     "@alifd/next": "^1.x",
-    "@alife/dpl-iceluna": "^2.3.2",
     "@alife/theme-lowcode-dark": "^0.1.0",
     "@alife/theme-lowcode-light": "^0.1.0",
     "@icedesign/theme": "^1.x",

packages/demo/public/schema.json

@@ -0,0 +1,110 @@
+{
+  "componentName": "Page",
+  "fileName": "test",
+  "dataSource": {
+    "list": []
+  },
+  "state": {
+    "text": "outter"
+  },
+  "props": {
+    "ref": "outterView",
+    "autoLoading": true,
+    "style": {
+      "padding": 20
+    }
+  },
+  "children": [{
+    "componentName": "Form",
+    "props": {
+      "labelCol": 3,
+      "style": {},
+      "ref": "testForm"
+    },
+    "children": [{
+      "componentName": "Form.Item",
+      "props": {
+        "label": "姓名：",
+        "name": "name",
+        "initValue": "李雷"
+      },
+      "children": [{
+        "componentName": "Input",
+        "props": {
+          "placeholder": "请输入",
+          "size": "medium",
+          "style": {
+            "width": 320
+          }
+        }
+      }]
+    }, {
+      "componentName": "Form.Item",
+      "props": {
+        "label": "年龄：",
+        "name": "age",
+        "initValue": "22"
+      },
+      "children": [{
+        "componentName": "NumberPicker",
+        "props": {
+          "size": "medium",
+          "type": "normal"
+        }
+      }]
+    }, {
+      "componentName": "Form.Item",
+      "props": {
+        "label": "职业：",
+        "name": "profession"
+      },
+      "children": [{
+        "componentName": "Select",
+        "props": {
+          "dataSource": [{
+            "label": "教师",
+            "value": "t"
+          }, {
+            "label": "医生",
+            "value": "d"
+          }, {
+            "label": "歌手",
+            "value": "s"
+          }]
+        }
+      }]
+    }, {
+      "componentName": "Div",
+      "props": {
+        "style": {
+          "textAlign": "center"
+        }
+      },
+      "children": [{
+        "componentName": "Button.Group",
+        "props": {},
+        "children": [{
+          "componentName": "Button",
+          "props": {
+            "type": "primary",
+            "style": {
+              "margin": "0 5px 0 5px"
+            },
+            "htmlType": "submit"
+          },
+          "children": "提交"
+        }, {
+          "componentName": "Button",
+          "props": {
+            "type": "normal",
+            "style": {
+              "margin": "0 5px 0 5px"
+            },
+            "htmlType": "reset"
+          },
+          "children": "重置"
+        }]
+      }]
+    }]
+  }]
+}

packages/demo/src/config/assets.js

@@ -1255,7 +1255,7 @@ export default {
           {
             name: 'value',
             title: '受控值',
-            setter: 'StringSetter',
+            setter: 'StringSetter'
           },
           {
             name: 'hasBorder',
@@ -1452,57 +1452,67 @@ export default {
                       componentName: 'ObjectSetter',
                       props: {
                         config: {
-                          items: [{
+                          items: [
-                            name: 'username',
+                            {
-                            title: '姓名',
+                              name: 'username',
-                            setter: 'StringSetter',
+                              title: '姓名',
-                            important: true,
+                              setter: 'StringSetter',
-                          }, {
+                              important: true
-                            name: 'phone',
+                            },
-                            title: '电话',
+                            {
-                            setter: 'StringSetter',
+                              name: 'phone',
-                            important: true,
+                              title: '电话',
-                          }, {
+                              setter: 'StringSetter',
-                            name: 'age',
+                              important: true
-                            title: '年龄',
+                            },
-                            setter: 'NumberSetter'
+                            {
-                          }, {
+                              name: 'age',
-                            name: 'married',
+                              title: '年龄',
-                            title: '婚否',
+                              setter: 'NumberSetter'
-                            setter: 'BoolSetter'
+                            },
-                          }, {
+                            {
-                            type: 'group',
+                              name: 'married',
-                            title: 'work',
+                              title: '婚否',
-                            items: [
+                              setter: 'BoolSetter'
-                              {
+                            },
-                                name: 'job',
+                            {
-                                title: '工作岗位',
+                              type: 'group',
-                                setter: {
+                              title: 'work',
-                                  componentName: 'SelectSetter',
+                              items: [
-                                  props: {
+                                {
-                                    dataSource: [{
+                                  name: 'job',
-                                      label: '工程师',
+                                  title: '工作岗位',
-                                      value: 1
+                                  setter: {
-                                    }, {
+                                    componentName: 'SelectSetter',
-                                      label: '高级工程师',
+                                    props: {
-                                      value: 2
+                                      dataSource: [
-                                    }, {
+                                        {
-                                      label: '资深工程师',
+                                          label: '工程师',
-                                      value: 3
+                                          value: 1
-                                    }]
+                                        },
+                                        {
+                                          label: '高级工程师',
+                                          value: 2
+                                        },
+                                        {
+                                          label: '资深工程师',
+                                          value: 3
+                                        }
+                                      ]
+                                    }
                                   }
+                                },
+                                {
+                                  name: 'address',
+                                  title: '工作地点',
+                                  setter: 'TextAreaSetter'
                                 }
-                              },
+                              ]
-                              {
+                            }
-                                name: 'address',
+                          ]
-                                title: '工作地点',
-                                setter: 'TextAreaSetter'
-                              }
-                            ]
-                          }],
                         }
                       },
-                      initialValue: {},
+                      initialValue: {}
                     }
                   }
                 }
@@ -1517,72 +1527,82 @@ export default {
                       componentName: 'ObjectSetter',
                       props: {
                         config: {
-                          items: [{
+                          items: [
-                            name: 'username',
+                            {
-                            title: '姓名',
+                              name: 'username',
-                            setter: 'StringSetter',
+                              title: '姓名',
-                            important: true,
+                              setter: 'StringSetter',
-                          }, {
+                              important: true
-                            name: 'age',
-                            title: '年龄',
-                            setter: 'NumberSetter',
-                            important: true,
-                          }, {
-                            name: 'married',
-                            title: '婚否',
-                            setter: 'BoolSetter',
-                            important: true,
-                          }, {
-                            name: 'log',
-                            title: '到访记录',
-                            setter: {
-                              componentName: 'ArraySetter',
-                              props: {
-                                itemSetter: 'StringSetter'
-                              }
                             },
-                            important: true,
+                            {
-                          }, {
+                              name: 'age',
-                            type: 'group',
+                              title: '年龄',
-                            title: 'work',
+                              setter: 'NumberSetter',
-                            items: [
+                              important: true
-                              {
+                            },
-                                name: 'job',
+                            {
-                                title: '工作岗位',
+                              name: 'married',
-                                setter: {
+                              title: '婚否',
-                                  componentName: 'SelectSetter',
+                              setter: 'BoolSetter',
-                                  props: {
+                              important: true
-                                    dataSource: [{
+                            },
-                                      label: '工程师',
+                            {
-                                      value: 1
+                              name: 'log',
-                                    }, {
+                              title: '到访记录',
-                                      label: '高级工程师',
+                              setter: {
-                                      value: 2
+                                componentName: 'ArraySetter',
-                                    }, {
+                                props: {
-                                      label: '资深工程师',
+                                  itemSetter: 'StringSetter'
-                                      value: 3
-                                    }]
-                                  }
                                 }
                               },
-                              {
+                              important: true
-                                name: 'address',
+                            },
-                                title: '工作地点',
+                            {
-                                setter: 'TextAreaSetter'
+                              type: 'group',
-                              }
+                              title: 'work',
-                            ]
+                              items: [
-                          }],
+                                {
+                                  name: 'job',
+                                  title: '工作岗位',
+                                  setter: {
+                                    componentName: 'SelectSetter',
+                                    props: {
+                                      dataSource: [
+                                        {
+                                          label: '工程师',
+                                          value: 1
+                                        },
+                                        {
+                                          label: '高级工程师',
+                                          value: 2
+                                        },
+                                        {
+                                          label: '资深工程师',
+                                          value: 3
+                                        }
+                                      ]
+                                    }
+                                  }
+                                },
+                                {
+                                  name: 'address',
+                                  title: '工作地点',
+                                  setter: 'TextAreaSetter'
+                                }
+                              ]
+                            }
+                          ]
                         }
                       },
-                      initialValue: {},
+                      initialValue: {}
                     },
                     mode: 'popup'
                   }
                 }
-              },
+              }
             ],
             extraProps: {
-              defaultCollapsed: false,
+              defaultCollapsed: false
             }
           },
           {
@@ -1596,64 +1616,74 @@ export default {
                   componentName: 'ObjectSetter',
                   props: {
                     config: {
-                      items: [{
+                      items: [
-                        name: 'username',
+                        {
-                        title: '姓名',
+                          name: 'username',
-                        setter: 'StringSetter',
+                          title: '姓名',
-                        important: true,
+                          setter: 'StringSetter',
-                      }, {
+                          important: true
-                        name: 'age',
-                        title: '年龄',
-                        setter: 'NumberSetter',
-                        important: true,
-                      }, {
-                        name: 'married',
-                        title: '婚否',
-                        setter: 'BoolSetter',
-                        important: true,
-                      }, {
-                        name: 'log',
-                        title: '到访记录',
-                        setter: {
-                          componentName: 'ArraySetter',
-                          props: {
-                            itemSetter: 'StringSetter'
-                          }
                         },
-                        important: true,
+                        {
-                      }, {
+                          name: 'age',
-                        type: 'group',
+                          title: '年龄',
-                        title: 'work',
+                          setter: 'NumberSetter',
-                        items: [
+                          important: true
-                          {
+                        },
-                            name: 'job',
+                        {
-                            title: '工作岗位',
+                          name: 'married',
-                            setter: {
+                          title: '婚否',
-                              componentName: 'SelectSetter',
+                          setter: 'BoolSetter',
-                              props: {
+                          important: true
-                                dataSource: [{
+                        },
-                                  label: '工程师',
+                        {
-                                  value: 1
+                          name: 'log',
-                                }, {
+                          title: '到访记录',
-                                  label: '高级工程师',
+                          setter: {
-                                  value: 2
+                            componentName: 'ArraySetter',
-                                }, {
+                            props: {
-                                  label: '资深工程师',
+                              itemSetter: 'StringSetter'
-                                  value: 3
-                                }]
-                              }
                             }
                           },
-                          {
+                          important: true
-                            name: 'address',
+                        },
-                            title: '工作地点',
+                        {
-                            setter: 'TextAreaSetter'
+                          type: 'group',
-                          }
+                          title: 'work',
-                        ]
+                          items: [
-                      }],
+                            {
+                              name: 'job',
+                              title: '工作岗位',
+                              setter: {
+                                componentName: 'SelectSetter',
+                                props: {
+                                  dataSource: [
+                                    {
+                                      label: '工程师',
+                                      value: 1
+                                    },
+                                    {
+                                      label: '高级工程师',
+                                      value: 2
+                                    },
+                                    {
+                                      label: '资深工程师',
+                                      value: 3
+                                    }
+                                  ]
+                                }
+                              }
+                            },
+                            {
+                              name: 'address',
+                              title: '工作地点',
+                              setter: 'TextAreaSetter'
+                            }
+                          ]
+                        }
+                      ]
                     }
                   },
-                  initialValue: {},
+                  initialValue: {}
                 }
               },
               {
@@ -1664,64 +1694,74 @@ export default {
                   props: {
                     mode: 'popup',
                     config: {
-                      items: [{
+                      items: [
-                        name: 'username',
+                        {
-                        title: '姓名',
+                          name: 'username',
-                        setter: 'StringSetter',
+                          title: '姓名',
-                        important: true,
+                          setter: 'StringSetter',
-                      }, {
+                          important: true
-                        name: 'age',
-                        title: '年龄',
-                        setter: 'NumberSetter',
-                        important: true,
-                      }, {
-                        name: 'married',
-                        title: '婚否',
-                        setter: 'BoolSetter',
-                        important: true,
-                      }, {
-                        name: 'log',
-                        title: '到访记录',
-                        setter: {
-                          componentName: 'ArraySetter',
-                          props: {
-                            itemSetter: 'StringSetter'
-                          }
                         },
-                        important: true,
+                        {
-                      }, {
+                          name: 'age',
-                        type: 'group',
+                          title: '年龄',
-                        title: 'work',
+                          setter: 'NumberSetter',
-                        items: [
+                          important: true
-                          {
+                        },
-                            name: 'job',
+                        {
-                            title: '工作岗位',
+                          name: 'married',
-                            setter: {
+                          title: '婚否',
-                              componentName: 'SelectSetter',
+                          setter: 'BoolSetter',
-                              props: {
+                          important: true
-                                dataSource: [{
+                        },
-                                  label: '工程师',
+                        {
-                                  value: 1
+                          name: 'log',
-                                }, {
+                          title: '到访记录',
-                                  label: '高级工程师',
+                          setter: {
-                                  value: 2
+                            componentName: 'ArraySetter',
-                                }, {
+                            props: {
-                                  label: '资深工程师',
+                              itemSetter: 'StringSetter'
-                                  value: 3
-                                }]
-                              }
                             }
                           },
-                          {
+                          important: true
-                            name: 'address',
+                        },
-                            title: '工作地点',
+                        {
-                            setter: 'TextAreaSetter'
+                          type: 'group',
-                          }
+                          title: 'work',
-                        ]
+                          items: [
-                      }],
+                            {
+                              name: 'job',
+                              title: '工作岗位',
+                              setter: {
+                                componentName: 'SelectSetter',
+                                props: {
+                                  dataSource: [
+                                    {
+                                      label: '工程师',
+                                      value: 1
+                                    },
+                                    {
+                                      label: '高级工程师',
+                                      value: 2
+                                    },
+                                    {
+                                      label: '资深工程师',
+                                      value: 3
+                                    }
+                                  ]
+                                }
+                              }
+                            },
+                            {
+                              name: 'address',
+                              title: '工作地点',
+                              setter: 'TextAreaSetter'
+                            }
+                          ]
+                        }
+                      ]
                     }
                   },
-                  initialValue: {},
+                  initialValue: {}
                 }
               }
             ]

packages/demo/src/config/components.js

@@ -0,0 +1,19 @@
+import componentsPane from '@ali/lowcode-plugin-components-pane';
+import Settings from '../../../plugin-settings';
+import undoRedo from '@ali/lowcode-plugin-undo-redo';
+import Designer from '../plugins/designer';
+import logo from '@ali/lowcode-plugin-logo';
+import save from '@ali/lowcode-plugin-save';
+import OutlineTree from '../../../plugin-outline-tree';
+
+import { PluginFactory } from '@ali/lowcode-editor-core';
+
+export default {
+  logo: PluginFactory(logo),
+  save: PluginFactory(save),
+  designer: PluginFactory(Designer),
+  settings: PluginFactory(Settings),
+  outlineTree: PluginFactory(OutlineTree),
+  undoRedo: PluginFactory(undoRedo),
+  componentsPane: PluginFactory(componentsPane)
+};

packages/demo/src/config/skeleton.js

@@ -0,0 +1,132 @@
+export default {
+  version: '^1.0.2',
+  theme: {
+    fusion: {
+      package: '@alife/dpl-iceluna',
+      version: '^2.3.0'
+    },
+    scss: ''
+  },
+  constants: {
+    namespace: 'page'
+  },
+  utils: [],
+  plugins: {
+    topArea: [
+      {
+        pluginKey: 'logo',
+        type: 'Custom',
+        props: {
+          align: 'left',
+          width: 100
+        },
+        config: {
+          package: '@ali/lowcode-plugin-logo',
+          version: '1.0.0'
+        },
+        pluginProps: {
+          logo: 'https://img.alicdn.com/tfs/TB1hoI9x1H2gK0jSZFEXXcqMpXa-146-40.png',
+          href: '/'
+        }
+      },
+      {
+        pluginKey: 'undoRedo',
+        type: 'Custom',
+        props: {
+          align: 'right',
+          width: 88
+        },
+        config: {
+          package: '@ali/lowcode-plugin-undo-redo',
+          version: '1.0.0'
+        }
+      },
+      {
+        pluginKey: 'divider',
+        type: 'Divider',
+        props: {
+          align: 'right'
+        }
+      },
+      {
+        pluginKey: 'save',
+        type: 'Custom',
+        props: {
+          align: 'right',
+          width: 64
+        },
+        config: {
+          package: '@ali/lowcode-plugin-save',
+          version: '1.0.0'
+        }
+      }
+    ],
+    leftArea: [
+      {
+        pluginKey: 'componentsPane',
+        type: 'PanelIcon',
+        props: {
+          align: 'top',
+          icon: 'zujianku',
+          title: '组件库'
+        },
+        config: {
+          package: '@ali/iceluna-plugin-components-pane',
+          version: '0.0.1'
+        },
+        pluginProps: {
+          disableAppComponent: true
+        }
+      },
+      {
+        pluginKey: 'outlineTree',
+        type: 'PanelIcon',
+        props: {
+          align: 'top',
+          icon: 'dengpao',
+          title: '大纲树'
+        },
+        config: {
+          version: '^1.0.0'
+        },
+        pluginProps: {}
+      }
+    ],
+    rightArea: [
+      {
+        pluginKey: 'settings',
+        type: 'Panel',
+        props: {},
+        config: {
+          package: '@ali/lowcode-plugin-settings-pane',
+          version: '^1.0.0'
+        },
+        pluginProps: {}
+      }
+    ],
+    centerArea: [
+      {
+        pluginKey: 'designer',
+        config: {
+          package: '@ali/lowcode-plugin-designer',
+          version: '1.0.0'
+        }
+      }
+    ]
+  },
+  hooks: [],
+  shortCuts: [],
+  lifeCycles: {
+    init: async function init(editor) {
+      const assets = await editor.utils.get('/assets.json');
+      editor.set({
+        assets,
+        componentsMap: assets.components
+      });
+
+      editor.utils.get('/schema.json').then(res => {
+        editor.emit('schema.reset', res);
+      });
+    }
+  }
+};

packages/demo/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Skeleton from '@ali/lowcode-editor-skeleton';
+import config from './config/skeleton';
+import components from './config/components';
+import utils from './config/utils';
+import './config/locale';
+import '../../plugin-setters';
+
+import './global.scss';
+import './config/theme.scss';
+
+const ICE_CONTAINER = document.getElementById('ice-container');
+
+if (!ICE_CONTAINER) {
+  throw new Error('当前页面不存在 <div id="ice-container"></div> 节点.');
+}
+
+ReactDOM.render(<Skeleton config={config} utils={utils} components={components} />, ICE_CONTAINER);

packages/demo/src/plugins/designer/index.tsx

@@ -1,13 +1,11 @@
 import React, { PureComponent } from 'react';
 
-import Editor from '../../framework/index';
+import Editor from '@ali/lowcode-editor-core';
-import { PluginConfig } from '../../framework/definitions';
+import { PluginConfig } from '@ali/lowcode-editor-core/lib/definitions';
-
+import assets from '../../config/assets';
 // @ts-ignore
 import Designer from '../../../../designer';
 
-import assets from '../../config/assets';
-
 import './index.scss';
 
 export interface PluginProps {
@@ -30,13 +28,16 @@ const SCHEMA = {
       },
       props: {
         ref: 'outterView',
-        autoLoading: true
+        autoLoading: true,
+        style: {
+          padding: 20
+        }
       },
       children: [
         {
           componentName: 'Form',
           props: {
-            labelCol: 4,
+            labelCol: 3,
             style: {},
             ref: 'testForm'
           },
@@ -165,14 +166,37 @@ const SCHEMA = {
 export default class DesignerPlugin extends PureComponent<PluginProps> {
   displayName: 'LowcodePluginDesigner';
 
+  componentDidMount(): void {
+    const { editor } = this.props;
+    editor.on('schema.reset', this.handleSchemaReset);
+  }
+
+  componentWillUmount(): void {
+    const { editor } = this.props;
+    editor.off('schema.reset', this.handleSchemaReset);
+  }
+
+  handleSchemaReset = (schema: object): void => {
+    // const {editor} = this.props;
+    // if (this.designer) {
+    //   this.designer.setSchema(schema);
+    // } else {
+    //   editor.once('designer.ready', (designer): void => {
+    //     designer.setSchema(schema);
+    //   });
+    // }
+  };
+
   handleDesignerMount = (designer): void => {
     const { editor } = this.props;
+    this.designer = designer;
     editor.set('designer', designer);
     editor.emit('designer.ready', designer);
   };
 
   render(): React.ReactNode {
     const { editor } = this.props;
+    // const assets = editor.get('assets') || {};
     return (
       <Designer
         onMount={this.handleDesignerMount}
@@ -181,7 +205,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps> {
         eventPipe={editor as any}
         componentMetadatas={Object.values(assets.components) as any}
         simulatorProps={{
-          library: Object.values(assets.packages),
+          library: Object.values(assets.packages || {})
         }}
       />
     );

packages/editor-core/.eslintrc.js

@@ -0,0 +1,16 @@
+const { tslint, deepmerge } = require('@ice/spec');
+
+module.exports = deepmerge(tslint, {
+  rules: {
+    "global-require": 0,
+    "comma-dangle": 0,
+    "no-unused-expressions": 0,
+    "object-shorthand": 0,
+    "jsx-a11y/anchor-has-content": 0,
+    "react/sort-comp": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx", "ts"] }],
+    "@typescript-eslint/interface-name-prefix": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/explicit-member-accessibility": 0
+  },
+});

packages/editor-core/README.md

@@ -0,0 +1,11 @@
+# demo component
+
+t-s-demo
+
+intro component
+
+## API
+
+| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
+| ------ | ---- | ---- | ---- | ------ | ---- |
+|        |      |      |      |        |      |

packages/editor-core/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ali/lowcode-editor",
+  "name": "@ali/lowcode-editor-core",
   "version": "0.0.1",
   "description": "alibaba lowcode editor core",
   "files": [
@@ -13,7 +13,7 @@
   "stylePath": "style.js",
   "scripts": {
     "start": "build-scripts start",
-    "build": "build-scripts build",
+    "build": "build-scripts build --skip-demo",
     "prepublishOnly": "npm run prettier && npm run build",
     "lint": "eslint --cache --ext .js,.jsx ./",
     "prettier": "prettier  --write \"./src/**/*.{ts,tsx,js,jsx,ejs,less,css,scss,json}\" "
@@ -29,7 +29,8 @@
     "intl-messageformat": "^7.8.4",
     "lodash": "^4.17.15",
     "prop-types": "^15.5.8",
-    "store": "^2.0.12"
+    "store": "^2.0.12",
+    "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.3",
@@ -51,5 +52,5 @@
     "@alifd/next": "1.x"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/editor-framework@0.0.1/build/index.html"
+  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-editor-core@0.0.1/build/index.html"
 }

packages/editor-core/src/areaManager.ts

@@ -1,4 +1,4 @@
-import { PluginConfig, PluginStatus } from './definitions';
+import { PluginConfig, PluginStatus, PluginClass, HOCPlugin } from './definitions';
 import Editor from './index';
 import { clone, deepEqual } from './utils';
 
@@ -18,14 +18,16 @@ export default class AreaManager {
     this.pluginStatus = clone(editor.pluginStatus);
   }
 
-  public isPluginStatusUpdate(pluginType?: string): boolean {
+  public isPluginStatusUpdate(pluginType?: string, notUpdateStatus?: boolean): boolean {
     const { pluginStatus } = this.editor;
     const list = pluginType ? this.config.filter((item): boolean => item.type === pluginType) : this.config;
 
     const isUpdate = list.some(
-      (item): boolean => !deepEqual(pluginStatus[item.pluginKey], this.pluginStatus[item.pluginKey])
+      (item): boolean => !deepEqual(pluginStatus[item.pluginKey], this.pluginStatus[item.pluginKey]),
     );
-    this.pluginStatus = clone(pluginStatus);
+    if (!notUpdateStatus) {
+      this.pluginStatus = clone(pluginStatus);
+    }
     return isUpdate;
   }
 
@@ -36,7 +38,28 @@ export default class AreaManager {
     return pluginType ? res.filter((item): boolean => item.type === pluginType) : res;
   }
 
-  public getPluginConfig(): PluginConfig[] {
+  public getPlugin(pluginKey: string): HOCPlugin | void {
+    if (pluginKey) {
+      return this.editor && this.editor.plugins && this.editor.plugins[pluginKey];
+    }
+  }
+
+  public getPluginConfig(pluginKey?: string): PluginConfig[] | PluginConfig | undefined {
+    if (pluginKey) {
+      return this.config.find(item => item.pluginKey === pluginKey);
+    }
     return this.config;
   }
+
+  public getPluginClass(pluginKey: string): PluginClass | void {
+    if (pluginKey) {
+      return this.editor && this.editor.components && this.editor.components[pluginKey];
+    }
+  }
+
+  public getPluginStatus(pluginKey: string): PluginStatus | void {
+    if (pluginKey) {
+      return this.editor && this.editor.pluginStatus && this.editor.pluginStatus[pluginKey];
+    }
+  }
 }

packages/editor-core/src/definitions.ts

@@ -25,7 +25,7 @@ export interface NpmConfig {
 export interface SkeletonConfig {
   config: NpmConfig;
   props?: object;
-  handler?: (EditorConfig) => EditorConfig;
+  handler?: (config: EditorConfig) => EditorConfig;
 }
 
 export interface FusionTheme {
@@ -38,7 +38,7 @@ export interface ThemeConfig {
 }
 
 export interface PluginsConfig {
-  [propName: string]: PluginConfig[];
+  [key: string]: PluginConfig[];
 }
 
 export interface PluginConfig {
@@ -68,7 +68,7 @@ export type HooksConfig = HookConfig[];
 export interface HookConfig {
   message: string;
   type: 'on' | 'once';
-  handler: (editor: Editor, ...args) => void;
+  handler: (editor: Editor, ...args: []) => void;
 }
 
 export type ShortCutsConfig = ShortCutConfig[];
@@ -83,7 +83,7 @@ export type UtilsConfig = UtilConfig[];
 export interface UtilConfig {
   name: string;
   type: 'npm' | 'function';
-  content: NpmConfig | ((...args) => any);
+  content: NpmConfig | ((...args: []) => any);
 }
 
 export type ConstantsConfig = object;
@@ -109,7 +109,7 @@ export interface I18nConfig {
 export type I18nFunction = (key: string, params: any) => string;
 
 export interface Utils {
-  [key: string]: (...args) => any;
+  [key: string]: (...args: []) => any;
 }
 
 export interface PluginProps {
@@ -136,6 +136,10 @@ export interface PluginSet {
 
 export type PluginClass = React.ComponentType<PluginProps> & {
   init?: (editor: Editor) => void;
+  defaultProps?: {
+    locale?: LocaleType;
+    messages?: I18nMessages;
+  };
 };
 
 export interface PluginClassSet {

packages/editor-core/src/editor.ts

@@ -1,5 +1,5 @@
 import Debug from 'debug';
-import EventEmitter from 'events';
+import { EventEmitter } from 'events';
 import store from 'store';
 import {
   EditorConfig,
@@ -8,7 +8,7 @@ import {
   PluginStatusSet,
   Utils,
   PluginClassSet,
-  PluginSet
+  PluginSet,
 } from './definitions';
 
 import * as editorUtils from './utils';
@@ -64,7 +64,7 @@ const debug = Debug('editor');
 EventEmitter.defaultMaxListeners = 100;
 
 export interface HooksFuncs {
-  [idx: number]: (msg: string, handler: (...args) => void) => void;
+  [idx: number]: (msg: string, handler: (...args: []) => void) => void;
 }
 
 export default class Editor extends EventEmitter {
@@ -87,14 +87,6 @@ export default class Editor extends EventEmitter {
 
   public locale: LocaleType;
 
-  public emit: (msg: string, ...args) => void;
-
-  public on: (msg: string, handler: (...args) => void) => void;
-
-  public once: (msg: string, handler: (...args) => void) => void;
-
-  public off: (msg: string, handler: (...args) => void) => void;
-
   private hooksFuncs: HooksFuncs;
 
   constructor(config: EditorConfig, components: PluginClassSet, utils?: Utils) {
@@ -103,7 +95,6 @@ export default class Editor extends EventEmitter {
     this.components = components;
     this.utils = { ...editorUtils, ...utils };
     instance = this;
-    this.init();
   }
 
   public init(): Promise<any> {
@@ -165,21 +156,27 @@ export default class Editor extends EventEmitter {
     if (!Array.isArray(events)) {
       return;
     }
-    events.forEach((event): void => this.on(event, lisenter));
+    events.forEach((event): void => {
+      this.on(event, lisenter);
+    });
   }
 
   public batchOnce(events: string[], lisenter: (...args) => void): void {
     if (!Array.isArray(events)) {
       return;
     }
-    events.forEach((event): void => this.once(event, lisenter));
+    events.forEach((event): void => {
+      this.once(event, lisenter);
+    });
   }
 
   public batchOff(events: string[], lisenter: (...args) => void): void {
     if (!Array.isArray(events)) {
       return;
     }
-    events.forEach((event): void => this.off(event, lisenter));
+    events.forEach((event): void => {
+      this.off(event, lisenter);
+    });
   }
 
   // 销毁hooks中的消息监听
@@ -216,7 +213,7 @@ export default class Editor extends EventEmitter {
         res[plugin.pluginKey] = {
           visible: typeof visible === 'boolean' ? visible : true,
           disabled: typeof disabled === 'boolean' ? disabled : false,
-          marked: typeof marked === 'boolean' ? marked : false
+          marked: typeof marked === 'boolean' ? marked : false,
         };
         const pluginClass = this.components[plugin.pluginKey];
         // 判断如果编辑器插件有init静态方法，则在此执行init方法

packages/editor-core/src/index.ts

@@ -1,12 +1,12 @@
 import Editor from './editor';
 
-import * as editorUtils from './utils';
+import * as utils from './utils';
-import * as editorDefinitions from './definitions';
+import * as definitions from './definitions';
 
 export { default as PluginFactory } from './pluginFactory';
 export { default as EditorContext } from './context';
+export { default as AreaManager } from './areaManager';
 
 export default Editor;
 
-export const utils = editorUtils;
+export { utils, definitions };
-export const definitions = editorDefinitions;

packages/editor-core/src/pluginFactory.tsx

@@ -27,21 +27,26 @@ export default function pluginFactory(Comp: PluginClass): React.ComponentType<Pl
         console.warn('lowcode editor plugin has wrong config');
         return;
       }
-      const { locale, messages, editor } = props;
+      const { editor } = props;
       this.ref = createRef<React.ReactElement>();
       // 注册插件
       this.editor = editor;
-      this.i18n = generateI18n(locale, messages);
       this.pluginKey = props.config.pluginKey;
+      const defaultProps = Comp.defaultProps || {};
+      const locale = this.editor.get('locale') || defaultProps.locale || 'zh-CN';
+      const editorMessages = this.editor.get('messages') || {};
+      const messages = editorMessages[this.pluginKey] || defaultProps.messages || {};
+      this.i18n = generateI18n(locale, messages);
+
       editor.set('plugins', {
         ...editor.plugins,
-        [this.pluginKey]: this
+        [this.pluginKey]: this,
       });
     }
 
     public componentWillUnmount(): void {
       // 销毁插件
-      if (this.editor && this.editor.plugins) {
+      if (this.pluginKey && this.editor && this.editor.plugins) {
         delete this.editor.plugins[this.pluginKey];
       }
     }
@@ -66,7 +71,7 @@ export default function pluginFactory(Comp: PluginClass): React.ComponentType<Pl
         i18n: this.i18n,
         editor: this.editor,
         config,
-        ...config.pluginProps
+        ...config.pluginProps,
       };
       if (acceptsRef(Comp)) {
         props.ref = this.ref;

packages/editor-core/src/request.ts

@@ -0,0 +1,125 @@
+import 'whatwg-fetch';
+import Debug from 'debug';
+const debug = Debug('request');
+
+export function serialize(obj: object): string {
+  const rst: string[] = [];
+  Object.entries(obj || {}).forEach(([key, val]): void => {
+    if (val === null || val === undefined || val === '') return;
+    if (typeof val === 'object') rst.push(`${key}=${encodeURIComponent(JSON.stringify(val))}`);
+    else rst.push(`${key}=${encodeURIComponent(val)}`);
+  });
+  return rst.join('&');
+}
+
+export function buildUrl(dataAPI: string, params: object): string {
+  const paramStr = serialize(params);
+  if (paramStr) {
+    return dataAPI.indexOf('?') > 0 ? `${dataAPI}&${paramStr}` : `${dataAPI}?${paramStr}`;
+  }
+  return dataAPI;
+}
+
+export function get(dataAPI: string, params?: object, headers?: object, otherProps?: object): Promise<any> {
+  const fetchHeaders = {
+    Accept: 'application/json',
+    ...headers,
+  };
+  return request(buildUrl(dataAPI, params), 'GET', null, fetchHeaders, otherProps);
+}
+
+export function post(dataAPI: string, params?: object, headers?: object, otherProps?: object): Promise<any> {
+  const fetchHeaders = {
+    Accept: 'application/json',
+    'Content-Type': 'application/x-www-form-urlencoded',
+    ...headers,
+  };
+  return request(
+    dataAPI,
+    'POST',
+    fetchHeaders['Content-Type'].indexOf('application/json') > -1 || Array.isArray(params)
+      ? JSON.stringify(params)
+      : serialize(params),
+    fetchHeaders,
+    otherProps,
+  );
+}
+
+export function request(
+  dataAPI: string,
+  method: string = 'GET',
+  data?: object | string,
+  headers?: object,
+  otherProps?: object,
+): Promise<any> {
+  return new Promise((resolve, reject): void => {
+    if (otherProps && otherProps.timeout) {
+      setTimeout((): void => {
+        reject(new Error('timeout'));
+      }, otherProps.timeout);
+    }
+    fetch(dataAPI, {
+      method,
+      credentials: 'include',
+      headers,
+      body: data,
+      ...otherProps,
+    })
+      .then((response: Response): any => {
+        switch (response.status) {
+          case 200:
+          case 201:
+          case 202:
+            return response.json();
+          case 204:
+            if (method === 'DELETE') {
+              return {
+                success: true,
+              };
+            } else {
+              return {
+                __success: false,
+                code: response.status,
+              };
+            }
+          case 400:
+          case 401:
+          case 403:
+          case 404:
+          case 406:
+          case 410:
+          case 422:
+          case 500:
+            return response
+              .json()
+              .then((res: object): any => {
+                return {
+                  __success: false,
+                  code: response.status,
+                  data: res,
+                };
+              })
+              .catch((): object => {
+                return {
+                  __success: false,
+                  code: response.status,
+                };
+              });
+          default:
+            return null;
+        }
+      })
+      .then((json: object): void => {
+        if (json && json.__success !== false) {
+          resolve(json);
+        } else {
+          delete json.__success;
+          reject(json);
+        }
+      })
+      .catch((err: Error): void => {
+        debug(err);
+        reject(err);
+      });
+  });
+}

packages/editor-core/src/utils.ts

@@ -9,6 +9,7 @@ import _pick from 'lodash/pick';
 import _throttle from 'lodash/throttle';
 
 import _serialize from 'serialize-javascript';
+export { get, post, request } from './request';
 import Editor from './editor';
 import { EditorConfig, I18nFunction, I18nMessages, LocaleType, ShortCutsConfig } from './definitions';
 
@@ -25,7 +26,7 @@ const ENV = {
   TBE: 'TBE',
   WEBIDE: 'WEB-IDE',
   VSCODE: 'VSCODE',
-  WEB: 'WEB'
+  WEB: 'WEB',
 };
 
 declare global {
@@ -92,7 +93,7 @@ export function goldlog(gmKey: string, params: object = {}, logKey: string = 'ot
   const sendIDEMessage = window.sendIDEMessage || window.parent.sendIDEMessage;
   const goKey = serializeParams({
     env: getEnv(),
-    ...params
+    ...params,
   });
   if (sendIDEMessage) {
     sendIDEMessage({
@@ -100,8 +101,8 @@ export function goldlog(gmKey: string, params: object = {}, logKey: string = 'ot
       data: {
         logKey: `/iceluna.core.${logKey}`,
         gmKey,
-        goKey
+        goKey,
-      }
+      },
     });
   }
   if (window.goldlog) {
@@ -214,7 +215,7 @@ export function comboEditorConfig(defaultConfig: EditorConfig = {}, customConfig
   if (skeleton && skeleton.handler && typeof skeleton.handler === 'function') {
     return skeleton.handler({
       skeleton,
-      ...defaultConfig
+      ...defaultConfig,
     });
   }
 
@@ -225,34 +226,34 @@ export function comboEditorConfig(defaultConfig: EditorConfig = {}, customConfig
   localeList.forEach((key): void => {
     i18nConfig[key] = {
       ...(defaultConfig.i18n && defaultConfig.i18n[key]),
-      ...(i18n && i18n[key])
+      ...(i18n && i18n[key]),
     };
   });
   return {
     skeleton,
     theme: {
       ...defaultConfig.theme,
-      ...theme
+      ...theme,
     },
     plugins: {
       ...defaultConfig.plugins,
-      ...plugins
+      ...plugins,
     },
     hooks: [...(defaultConfig.hooks || []), ...(hooks || [])],
     shortCuts: Object.values({
       ...defaultShortCuts,
-      ...customShortCuts
+      ...customShortCuts,
     }),
     lifeCycles: {
       ...defaultConfig.lifeCycles,
-      ...lifeCycles
+      ...lifeCycles,
     },
     constants: {
       ...defaultConfig.constants,
-      ...constants
+      ...constants,
     },
     utils: [...(defaultConfig.utils || []), ...(utils || [])],
-    i18n: i18nConfig
+    i18n: i18nConfig,
   };
 }
 

packages/editor-framework/.eslintrc.js

@@ -1,5 +0,0 @@
-const { eslint, deepmerge } = require('@ice/spec');
-
-module.exports = deepmerge(eslint, {
-  rules: {},
-});

packages/editor-framework/demo/usage.md

@@ -1,24 +0,0 @@
----
-title: Simple Usage
-order: 1
----
-
-本 Demo 演示一行文字的用法。
-
-````jsx
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-
-class App extends Component {
-  render() {
-    return (
-      <div>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render((
-  <App />
-), mountNode);
-````

packages/editor-framework/src/context.ts

@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-const context = createContext({});
-export default context;

packages/editor-framework/src/definitions.ts

@@ -1,48 +0,0 @@
-
-export interface EditorConfig {
-
-};
-
-export interface NpmConfig {
-  version: string,
-  package: string,
-  main?: string,
-  exportName?: string,
-  subName?: string,
-  destructuring?: boolean
-};
-
-export interface SkeletonConfig {
-  config: NpmConfig,
-  props?: object,
-  handler?: (EditorConfig) => EditorConfig
-};
-
-export interface FusionTheme {
-  package: string,
-  version: string
-};
-
-export interface ThemeConfig {
-  fusion?: FusionTheme
-}
-
-export interface PluginsConfig {
-  [key]: Array<PluginConfig>
-};
-
-export interface PluginConfig {
-  pluginKey: string,
-  type: string,
-  props: object,
-  config: NpmConfig,
-  pluginProps: object
-};
-
-export type HooksConfig = Array<HookConfig>;
-
-export interface HookConfig {
-
-};
-
-

packages/editor-framework/src/editor.ts

@@ -1,186 +0,0 @@
-import EventEmitter from 'events';
-import Debug from 'debug';
-import store from 'store';
-
-import {
-  unRegistShortCuts,
-  registShortCuts,
-  transformToPromise,
-  generateI18n
-} from './utils';
-
-// 根据url参数设置debug选项
-const res = /_?debug=(.*?)(&|$)/.exec(location.search);
-if (res && res[1]) {
-  window.__isDebug = true;
-  store.storage.write('debug', res[1] === 'true' ? '*' : res[1]);
-} else {
-  window.__isDebug = false;
-  store.remove('debug');
-}
-
-//重要，用于矫正画布执行new Function的window对象上下文
-window.__newFunc = funContext => {
-  return new Function(funContext);
-};
-
-//关闭浏览器前提醒,只有产生过交互才会生效
-window.onbeforeunload = function(e) {
-  e = e || window.event;
-  // 本地调试不生效
-  if (location.href.indexOf('localhost') > 0) return;
-  var msg = '您确定要离开此页面吗？';
-  e.cancelBubble = true;
-  e.returnValue = msg;
-  if (e.stopPropagation) {
-    e.stopPropagation();
-    e.preventDefault();
-  }
-  return msg;
-};
-
-
-let instance = null;
-const debug = Debug('editor');
-EventEmitter.defaultMaxListeners = 100;
-
-export interface editor {
-
-};
-
-export default class Editor extends EventEmitter {
-  static getInstance = () => {
-    if (!instance) {
-      instance = new Editor();
-    }
-    return instance;
-  };
-
-  constructor(config) {
-    super();
-    instance = this;
-    Object.assign(this, config);
-    this.init();
-  }
-
-  init() {
-    const {
-      hooks,
-      shortCuts,
-      lifeCycles
-    } = this.config || {};
-    this.destroy();
-    this.locale = store.get('lowcode-editor-locale') || 'zh-CN';
-    this.messages = this.messagesSet[this.locale];
-    this.i18n = generateI18n(this.locale, this.messages);
-    this.pluginStatus = this.initPluginStatus();
-    this.initHooks(hooks, appHelper);
-
-    appHelper.emit('editor.beforeInit');
-    const init = lifeCycles && lifeCycles.init || () => {};
-    // 用户可以通过设置extensions.init自定义初始化流程；
-    transformToPromise(init(this))
-      .then(() => {
-        // 注册快捷键
-        registShortCuts(shortCuts, this);
-        this.emit('editor.afterInit');
-      })
-      .catch(err => {
-        console.warn(err);
-      });
-  }
-
-  destroy() {
-    try {
-        const {
-          hooks = [],
-          shortCuts = [],
-          lifeCycles = {}
-        } = this.config;
-        unRegistShortCuts(shortCuts);
-        this.destroyHooks(hooks);
-        lifeCycles.destroy && lifeCycles.destroy();
-      } catch (err) {
-        console.warn(err);
-        return;
-      }
-  }
-
-  get(key:string):any {
-    return this[key];
-  }
-
-  set(key:string|object, val:any):void {
-    if (typeof key === 'string') {
-      if (['init', 'destroy', 'get', 'set', 'batchOn', 'batchOff', 'batchOnce'].includes(key)) {
-        console.warning('init, destroy, get, set, batchOn, batchOff, batchOnce is private attribute');
-        return;
-      }
-      this[key] = val;
-    } else if (typeof key === 'object') {
-      Object.keys(key).forEach(item => {
-        this[item] = key[item];
-      });
-    }
-  }
-
-  batchOn(events:Array<string>, lisenter:function):void {
-    if (!Array.isArray(events)) return;
-    events.forEach(event => this.on(event, lisenter));
-  }
-
-  batchOnce(events:Array<string>, lisenter:function):void {
-    if (!Array.isArray(events)) return;
-    events.forEach(event => this.once(event, lisenter));
-  }
-
-  batchOff(events:Array<string>, lisenter:function):void {
-    if (!Array.isArray(events)) return;
-    events.forEach(event => this.off(event, lisenter));
-  }
-
-  //销毁hooks中的消息监听
-  private destroyHooks(hooks = []) {
-    hooks.forEach((item, idx) => {
-      if (typeof this.__hooksFuncs[idx] === 'function') {
-        this.appHelper.off(item.message, this.__hooksFuncs[idx]);
-      }
-    });
-    delete this.__hooksFuncs;
-  };
-
-  //初始化hooks中的消息监听
-  private initHooks(hooks = []) {
-    this.__hooksFuncs = hooks.map(item => {
-      const func = (...args) => {
-        item.handler(this, ...args);
-      };
-      this[item.type](item.message, func);
-      return func;
-    });
-  };
-
-
-  private initPluginStatus () {
-    const {plugins = {}} = this.config;
-    const pluginAreas = Object.keys(plugins);
-    const res = {};
-    pluginAreas.forEach(area => {
-      (plugins[area] || []).forEach(plugin => {
-        if (plugin.type === 'Divider') return;
-        const { visible, disabled, dotted } = plugin.props || {};
-        res[plugin.pluginKey] = {
-          visible: typeof visible === 'boolean' ? visible : true,
-          disabled: typeof disabled === 'boolean' ? disabled : false,
-          dotted: typeof dotted === 'boolean' ? dotted : false
-        };
-        const pluginClass = this.props.components[skeletonUtils.generateAddonCompName(addon.addonKey)];
-        // 判断如果编辑器插件有init静态方法，则在此执行init方法
-        if (pluginClass && pluginClass.init) {
-          pluginClass.init(this);
-        }
-      });
-    });
-    return res;
-  };
-}

packages/editor-framework/src/index.ts

@@ -1,4 +0,0 @@
-import Editor from './editor';
-
-
-export default Editor;

packages/editor-framework/src/plugin.ts

@@ -1,129 +0,0 @@
-import { PureComponent } from 'react';
-
-import EditorContext from './context';
-import { isEmpty, generateI18n, goldlog } from './utils';
-
-export interface pluginProps {
-  config: object,
-  editor: object,
-  locale: string,
-  messages: object
-}
-
-export default function plugin(Comp) {
-
-  class Plugin extends PureComponent<pluginProps> {
-    static displayName = 'lowcode-editor-plugin';
-    static defaultProps = {
-      config: {}
-    };
-    static contextType = EditorContext;
-    constructor(props, context) {
-      super(props, context);
-      if (isEmpty(props.config) || !props.config.pluginKey) {
-        console.warn('lowcode editor plugin has wrong config');
-        return;
-      }
-
-      const { locale, messages, editor } = props;
-      // 注册插件
-      this.editor = editor;
-      this.i18n = generateI18n(locale, messages);
-      this.pluginKey = props.config.pluginKey;
-      editor.plugins = editor.plugins || {};
-      editor.plugins[this.pluginKey] = this;
-    }
-
-    componentWillUnmount() {
-      // 销毁插件
-      if (this.editor && this.editor.plugins) {
-        delete this.editor.plugins[this.pluginKey];
-      }
-    }
-
-    render() {
-      const {
-        config
-      } = this.props;
-      return <Comp i18n={this.i18n} editor={this.editor} config={config} {...config.pluginProps}/>
-    }
-  }
-
-  return Plugin;
-}
-
-
-
-export class Plugin extends PureComponent<pluginProps> {
-  static displayName = 'lowcode-editor-plugin';
-  static defaultProps = {
-    config: {}
-  };
-  static contextType = EditorContext;
-  constructor(props, context) {
-    super(props, context);
-    if (isEmpty(props.config) || !props.config.addonKey) {
-      console.warn('luna addon has wrong config');
-      return;
-    }
-
-  
-    const { locale, messages, editor } = props;
-    // 注册插件
-    this.editor = editor;
-    this.i18n = generateI18n(locale, messages);
-    this.pluginKey = props.config.pluginKey;
-    editor.plugins = editor.plugins || {};
-    editor.plugins[this.pluginKey] = this;
-  }
-
-  async componentWillUnmount() {
-    // 销毁插件
-    if (this.editor && this.editor.plugins) {
-      delete this.editor.plugins[this.pluginKey];
-    }
-  }
-
-  open = () => {
-    return true;
-  };
-
-  close = () => {
-    return true;
-  };
-
-  goldlog = (goKey:string, params:any) => {
-    const { pluginKey, config = {} } = this.props.config || {};
-    goldlog(
-      goKey,
-      {
-        pluginKey,
-        package: config.package,
-        version: config.version,
-        ...this.editor.logParams,
-        ...params
-      },
-      'addon'
-    );
-  };
-
-  get utils() {
-    return this.editor.utils;
-  }
-
-  get constants() {
-    return this.editor.constants;
-  }
-
-  get history() {
-    return this.editor.history;
-  }
-
-  get location() {
-    return this.editor.location;
-  }
-
-  render() {
-    return null;
-  }
-}

packages/editor-framework/src/utils.ts

@@ -1,242 +0,0 @@
-
-import IntlMessageFormat from 'intl-messageformat';
-import _isEmpty from 'lodash/isEmpty';
-
-export const isEmpty = _isEmpty;
-
-/**
- * 用于构造国际化字符串处理函数
- * @param {*} locale 国际化标识，例如 zh-CN、en-US
- * @param {*} messages 国际化语言包
- */
-export function generateI18n(locale = 'zh-CN', messages = {}) {
-  return (key, values = {}) => {
-    if (!messages || !messages[key]) return '';
-    const formater = new IntlMessageFormat(messages[key], locale);
-    return formater.format(values);
-  };
-}
-
-/**
- * 序列化参数
- * @param {*} obj 参数
- */
-export function serializeParams(obj:object):string {
-  if (typeof obj !== 'object') return '';
-
-  const res:Array<string> = [];
-  Object.entries(obj).forEach(([key, val]) => {
-    if (val === null || val === undefined || val === '') return;
-    if (typeof val === 'object') {
-      res.push(`${encodeURIComponent(key)}=${encodeURIComponent(JSON.stringify(val))}`);
-    } else {
-      res.push(`${encodeURIComponent(key)}=${encodeURIComponent(val)}`);
-    }
-  });
-  return res.join('&');
-}
-
-/**
- * 黄金令箭埋点
- * @param {String} gmKey 为黄金令箭业务类型
- * @param {Object} params 参数
- * @param {String} logKey 属性串
- */
-export function goldlog(gmKey, params = {}, logKey = 'other') {
-  const sendIDEMessage = window.sendIDEMessage || window.parent.sendIDEMessage;
-  const goKey = serializeParams({
-    sdkVersion: pkg.version,
-    env: getEnv(),
-    ...params
-  });
-  if (sendIDEMessage) {
-    sendIDEMessage({
-      action: 'goldlog',
-      data: {
-        logKey: `/iceluna.core.${logKey}`,
-        gmKey,
-        goKey
-      }
-    });
-  }
-  window.goldlog && window.goldlog.record(`/iceluna.core.${logKey}`, gmKey, goKey, 'POST');
-}
-
-/**
- * 获取当前编辑器环境
- */
-export function getEnv() {
-  const userAgent = navigator.userAgent;
-  const isVscode = /Electron\//.test(userAgent);
-  if (isVscode) return ENV.VSCODE;
-  const isTheia = window.is_theia === true;
-  if (isTheia) return ENV.WEBIDE;
-  return ENV.WEB;
-}
-
-// 注册快捷键
-export function registShortCuts(config, editor) {
-  const keyboardFilter = (keymaster.filter = event => {
-    let eTarget = event.target || event.srcElement;
-    let tagName = eTarget.tagName;
-    let isInput = !!(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
-    let isContenteditable = !!eTarget.getAttribute('contenteditable');
-    if (isInput || isContenteditable) {
-      if (event.metaKey === true && [70, 83].includes(event.keyCode)) event.preventDefault(); //禁止触发chrome原生的页面保存或查找
-      return false;
-    } else {
-      return true;
-    }
-  });
-
-  const ideMessage = appHelper.utils && appHelper.utils.ideMessage;
-
-  //复制
-  if (!document.copyListener) {
-    document.copyListener = e => {
-      if (!keyboardFilter(e) || appHelper.isCopying) return;
-      const schema = appHelper.schemaHelper && appHelper.schemaHelper.schemaMap[appHelper.activeKey];
-      if (!schema || !isSchema(schema)) return;
-      appHelper.isCopying = true;
-      const schemaStr = serialize(transformSchemaToPure(schema), {
-        unsafe: true
-      });
-      setClipboardData(schemaStr)
-        .then(() => {
-          ideMessage && ideMessage('success', '当前内容已复制到剪贴板，请使用快捷键Command+v进行粘贴');
-          appHelper.emit('schema.copy', schemaStr, schema);
-          appHelper.isCopying = false;
-        })
-        .catch(errMsg => {
-          ideMessage && ideMessage('error', errMsg);
-          appHelper.isCopying = false;
-        });
-    };
-    document.addEventListener('copy', document.copyListener);
-    if (window.parent.vscode) {
-      keymaster('command+c', document.copyListener);
-    }
-  }
-
-  //粘贴
-  if (!document.pasteListener) {
-    const doPaste = (e, text) => {
-      if (!keyboardFilter(e) || appHelper.isPasting) return;
-      const schemaHelper = appHelper.schemaHelper;
-      let targetKey = appHelper.activeKey;
-      let direction = 'after';
-      const topKey = schemaHelper.schema && schemaHelper.schema.__ctx && schemaHelper.schema.__ctx.lunaKey;
-      if (!targetKey || topKey === targetKey) {
-        const schemaHelper = appHelper.schemaHelper;
-        const topKey = schemaHelper.schema && schemaHelper.schema.__ctx && schemaHelper.schema.__ctx.lunaKey;
-        if (!topKey) return;
-        targetKey = topKey;
-        direction = 'in';
-      }
-      appHelper.isPasting = true;
-      const schema = parseObj(text);
-      if (!isSchema(schema)) {
-        appHelper.emit('illegalSchema.paste', text);
-        // ideMessage && ideMessage('error', '当前内容不是模型结构，不能粘贴进来！');
-        console.warn('paste schema illegal');
-        appHelper.isPasting = false;
-        return;
-      }
-      appHelper.emit('material.add', {
-        schema,
-        targetKey,
-        direction
-      });
-      appHelper.isPasting = false;
-      appHelper.emit('schema.paste', schema);
-    };
-    document.pasteListener = e => {
-      const clipboardData = e.clipboardData || window.clipboardData;
-      const text = clipboardData && clipboardData.getData('text');
-      doPaste(e, text);
-    };
-    document.addEventListener('paste', document.pasteListener);
-    if (window.parent.vscode) {
-      keymaster('command+v', e => {
-        const sendIDEMessage = window.parent.sendIDEMessage;
-        sendIDEMessage &&
-          sendIDEMessage({
-            action: 'readClipboard'
-          })
-            .then(text => {
-              doPaste(e, text);
-            })
-            .catch(err => {
-              console.warn(err);
-            });
-      });
-    }
-  }
-
-  (config || []).forEach(item => {
-    keymaster(item.keyboard, ev => {
-      ev.preventDefault();
-      item.handler(ev, appHelper, keymaster);
-    });
-  });
-}
-
-// 取消注册快捷
-export function unRegistShortCuts(config) {
-  (config || []).forEach(item => {
-    keymaster.unbind(item.keyboard);
-  });
-  if (window.parent.vscode) {
-    keymaster.unbind('command+c');
-    keymaster.unbind('command+v');
-  }
-  if (document.copyListener) {
-    document.removeEventListener('copy', document.copyListener);
-    delete document.copyListener;
-  }
-  if (document.pasteListener) {
-    document.removeEventListener('paste', document.pasteListener);
-    delete document.pasteListener;
-  }
-}
-
-// 将函数返回结果转成promise形式，如果函数有返回值则根据返回值的bool类型判断是reject还是resolve，若函数无返回值默认执行resolve
-export function transformToPromise(input) {
-  if (input instanceof Promise) return input;
-  return new Promise((resolve, reject) => {
-    if (input || input === undefined) {
-      resolve();
-    } else {
-      reject();
-    }
-  });
-}
-
-export function comboEditorConfig(defaultConfig, customConfig) {
-  const { ideConfig = {}, utils = {} } = this.props;
-    const comboShortCuts = () => {
-      const defaultShortCuts = defaultIdeConfig.shortCuts;
-      const shortCuts = ideConfig.shortCuts || [];
-      const configMap = skeletonUtils.transformArrayToMap(defaultShortCuts, 'keyboard');
-      (shortCuts || []).forEach(item => {
-        configMap[item.keyboard] = item;
-      });
-      return Object.keys(configMap).map(key => configMap[key]);
-    };
-    return {
-      ...ideConfig,
-      utils: {
-        ...skeletonUtils,
-        ...utils
-      },
-      constants: {
-        ...defaultIdeConfig.constants,
-        ...ideConfig.constants
-      },
-      extensions: {
-        ...defaultIdeConfig.extensions,
-        ...ideConfig.extensions
-      },
-      shortCuts: comboShortCuts()
-    };
-}

packages/editor-skeleton/.eslintrc.js

@@ -1,7 +1,16 @@
-const { eslint, deepmerge } = require('@ice/spec');
+const { tslint, deepmerge } = require('@ice/spec');
 
-module.exports = deepmerge(eslint, {
+module.exports = deepmerge(tslint, {
   rules: {
     "global-require": 0,
+    "comma-dangle": 0,
+    "no-unused-expressions": 0,
+    "object-shorthand": 0,
+    "jsx-a11y/anchor-has-content": 0,
+    "react/sort-comp": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx", "ts"] }],
+    "@typescript-eslint/interface-name-prefix": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/explicit-member-accessibility": 0
   },
 });

packages/editor-skeleton/demo/usage.md

@@ -1,24 +0,0 @@
----
-title: Simple Usage
-order: 1
----
-
-本 Demo 演示一行文字的用法。
-
-````jsx
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-
-class App extends Component {
-  render() {
-    return (
-      <div>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render((
-  <App />
-), mountNode);
-````

packages/editor-skeleton/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ali/lowcode-skeleton",
+  "name": "@ali/lowcode-editor-skeleton",
   "version": "0.0.1",
   "description": "alibaba lowcode editor skeleton",
   "files": [
@@ -24,15 +24,13 @@
   ],
   "author": "xiayang.xy",
   "dependencies": {
+    "@ali/lowcode-editor-core": "0.0.1",
     "@alifd/next": "^1.x",
-    "@icedesign/theme": "^1.x",
-    "@types/react": "^16.8.3",
-    "@types/react-dom": "^16.8.2",
-    "moment": "^2.23.0",
     "prop-types": "^15.5.8",
-    "react": "^16.4.1",
+    "react": "^16.8.1",
-    "react-dom": "^16.4.1",
+    "react-dom": "^16.8.1",
-    "react-router-dom": "^5.0.1"
+    "react-router-dom": "^5.1.2",
+    "store": "^2.0.12"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.3",

packages/editor-skeleton/src/components/LeftPlugin/index.scss

@@ -1,59 +1,59 @@
-.luna-left-addon {
+.lowcode-left-plugin {
-  font-size: 16px;
+  font-size: 20px;
   text-align: center;
-  line-height: 36px;
+  line-height: 44px;
-  height: 36px;
+  height: 44px;
   position: relative;
   cursor: pointer;
   transition: all 0.3s ease;
-  color: #777;
+  color: $color-text1-3;
-  &.collapse {
-    height: 40px;
-    color: #8c8c8c;
-    border-bottom: 1px solid #bfbfbf;
-  }
   &.locked {
     color: red !important;
   }
-  &.active {
-    color: #fff !important;
-    background-color: $color-brand1-9 !important;
-    &.disabled {
-      color: #fff;
-      background-color: $color-fill1-7;
-    }
-  }
-  &.disabled {
-    cursor: not-allowed;
-    color: $color-text1-1;
-  }
   &:hover {
-    background-color: $color-brand1-1;
     color: $color-brand1-6;
     &:before {
       content: attr(data-tooltip);
       display: block;
       position: absolute;
-      left: 50px;
+      left: 45px;
-      top: 5px;
+      top: 8px;
       line-height: 18px;
       font-size: 12px;
       white-space: nowrap;
       padding: 6px 8px;
       border-radius: 4px;
-      background: rgba(0, 0, 0, 0.75);
+      background: $balloon-normal-color-bg;
-      color: #fff;
+      border: 1px solid $balloon-normal-color-border;
+      color: $color-text1-3;
       z-index: 100;
     }
     &:after {
       content: '';
       display: block;
       position: absolute;
+      width: 10px;
+      height: 10px;
+      transform: rotate(45deg);
       left: 40px;
-      top: 15px;
+      top: 18px;
-      border: 5px solid transparent;
+      background: $balloon-normal-color-bg;
-      border-right-color: rgba(0, 0, 0, 0.75);
+      border-left: 1px solid $balloon-normal-color-border;
+      border-bottom: 1px solid $balloon-normal-color-border;
       z-index: 100;
     }
   }
+  &.active {
+    color: $color-brand1-9;
+    &.disabled {
+      color: $color-text1-1;
+    }
+    &:hover {
+      color: $color-brand1-6;
+    }
+  }
+  &.disabled {
+    cursor: not-allowed;
+    color: $color-text1-1;
+  }
 }

packages/editor-skeleton/src/components/LeftPlugin/index.tsx

@@ -1,79 +1,74 @@
 import React, { PureComponent, Fragment } from 'react';
-
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import AppContext from '@ali/iceluna-sdk/lib/context/appContext';
+import { Balloon, Dialog, Icon, Badge } from '@alifd/next';
-import { Balloon, Dialog, Icon, Badge } from '@alife/next';
+import Editor from '@ali/lowcode-editor-core';
-
+import {
+  PluginConfig,
+  PluginClass,
+} from '@ali/lowcode-editor-core/lib/definitions';
 import './index.scss';
-export default class LeftAddon extends PureComponent {
+
-  static displayName = 'LunaLeftAddon';
+export interface LeftPluginProps {
-  static propTypes = {
+  active?: boolean;
-    active: PropTypes.bool,
+  config: PluginConfig;
-    config: PropTypes.shape({
+  disabled?: boolean;
-      addonKey: PropTypes.string,
+  editor: Editor;
-      addonProps: PropTypes.object,
+  locked?: boolean;
-      props: PropTypes.object,
+  marked?: boolean;
-      type: PropTypes.oneOf([
+  onClick?: () => void;
-        'DialogIcon',
+  pluginClass: PluginClass | undefined;
-        'BalloonIcon',
+}
-        'PanelIcon',
+
-        'LinkIcon',
+export interface LeftPluginState {
-        'Icon',
+  dialogVisible: boolean;
-        'Custom',
+}
-      ]),
+
-    }),
+export default class LeftPlugin extends PureComponent<
-    disabled: PropTypes.bool,
+  LeftPluginProps,
-    dotted: PropTypes.bool,
+  LeftPluginState
-    locked: PropTypes.bool,
+> {
-    onClick: PropTypes.func,
+  static displayName = 'LowcodeLeftPlugin';
-  };
+
   static defaultProps = {
     active: false,
     config: {},
     disabled: false,
-    dotted: false,
+    marked: false,
     locked: false,
-    onClick: () => {},
+    onClick: (): void => {},
   };
-  static contextType = AppContext;
 
   constructor(props, context) {
     super(props, context);
     this.state = {
       dialogVisible: false,
     };
-    this.appHelper = context.appHelper;
-    this.utils = this.appHelper.utils;
-    this.constants = this.appHelper.constants;
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
-    const { config } = this.props;
+    const { config, editor } = this.props;
-    const addonKey = config && config.addonKey;
+    const pluginKey = config && config.pluginKey;
-    const appHelper = this.appHelper;
+    if (editor && pluginKey) {
-    if (appHelper && addonKey) {
+      editor.on(`${pluginKey}.dialog.show`, this.handleShow);
-      appHelper.on(`${addonKey}.dialog.show`, this.handleShow);
+      editor.on(`${pluginKey}.dialog.close`, this.handleClose);
-      appHelper.on(`${addonKey}.dialog.close`, this.handleClose);
     }
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
-    const { config } = this.props;
+    const { config, editor } = this.props;
-    const appHelper = this.appHelper;
+    const pluginKey = config && config.pluginKey;
-    const addonKey = config && config.addonKey;
+    if (editor && pluginKey) {
-    if (appHelper && addonKey) {
+      editor.off(`${pluginKey}.dialog.show`, this.handleShow);
-      appHelper.off(`${addonKey}.dialog.show`, this.handleShow);
+      editor.off(`${pluginKey}.dialog.close`, this.handleClose);
-      appHelper.off(`${addonKey}.dialog.close`, this.handleClose);
     }
   }
 
-  handleClose = () => {
+  handleClose = (): void => {
-    const addonKey = this.props.config && this.props.config.addonKey;
+    const { config, editor } = this.props;
-    const currentAddon =
+    const pluginKey = config && config.pluginKey;
-      this.appHelper.addons && this.appHelper.addons[addonKey];
+    const plugin = editor.plugins && editor.plugins[pluginKey];
-    if (currentAddon) {
+    if (plugin) {
-      this.utils.transformToPromise(currentAddon.close()).then(() => {
+      plugin.close().then((): void => {
         this.setState({
           dialogVisible: false,
         });
@@ -81,43 +76,48 @@ export default class LeftAddon extends PureComponent {
     }
   };
 
-  handleOpen = () => {
+  handleOpen = (): void => {
     // todo 对话框类型的插件初始时拿不到插件实例
     this.setState({
       dialogVisible: true,
     });
   };
 
-  handleShow = () => {
+  handleShow = (): void => {
-    const { disabled, config, onClick } = this.props;
+    const { disabled, config, onClick, editor } = this.props;
-    const addonKey = config && config.addonKey;
+    const pluginKey = config && config.pluginKey;
-    if (disabled || !addonKey) return;
+    if (disabled || !pluginKey) return;
-    //考虑到弹窗情况，延时发送消息
-    setTimeout(() => this.appHelper.emit(`${addonKey}.addon.activate`), 0);
     this.handleOpen();
-    onClick && onClick();
+    // 考虑到弹窗情况，延时发送消息
+    setTimeout((): void => {
+      editor.emit(`${pluginKey}.plugin.activate`);
+    }, 0);
+    if (onClick) {
+      onClick();
+    }
   };
 
-  renderIcon = clickCallback => {
+  renderIcon = (clickCallback): React.ReactNode => {
-    const { active, disabled, dotted, locked, onClick, config } = this.props;
+    const { active, disabled, marked, locked, onClick, config } = this.props;
-    const { addonKey, props } = config || {};
+    const { pluginKey, props } = config || {};
     const { icon, title } = props || {};
     return (
       <div
-        className={classNames('luna-left-addon', addonKey, {
+        className={classNames('lowcode-left-plugin', pluginKey, {
           active,
           disabled,
           locked,
         })}
         data-tooltip={title}
-        onClick={() => {
+        onClick={(): void => {
           if (disabled) return;
-          //考虑到弹窗情况，延时发送消息
+          // 考虑到弹窗情况，延时发送消息
           clickCallback && clickCallback();
+
           onClick && onClick();
         }}
       >
-        {dotted ? (
+        {marked ? (
           <Badge dot>
             <Icon type={icon} size="small" />
           </Badge>
@@ -128,67 +128,66 @@ export default class LeftAddon extends PureComponent {
     );
   };
 
-  render() {
+  render(): React.ReactNode {
-    const { dotted, locked, active, disabled, config } = this.props;
+    const {
-    const { addonKey, props, type, addonProps } = config || {};
+      marked,
+      locked,
+      active,
+      disabled,
+      config,
+      editor,
+      pluginClass: Comp,
+    } = this.props;
+    const { pluginKey, props, type, pluginProps } = config || {};
     const { onClick, title } = props || {};
     const { dialogVisible } = this.state;
-    const { appHelper, components } = this.context;
+    if (!pluginKey || !type || !props) return null;
-    if (!addonKey || !type || !props) return null;
-    const componentName = appHelper.utils.generateAddonCompName(addonKey);
-    const localeProps = {};
-    const { locale, messages } = appHelper;
-    if (locale) {
-      localeProps.locale = locale;
-    }
-    if (messages && messages[componentName]) {
-      localeProps.messages = messages[componentName];
-    }
-    const AddonComp = components && components[componentName];
-    const node =
-      (AddonComp && (
-        <AddonComp
-          active={active}
-          locked={locked}
-          disabled={disabled}
-          config={config}
-          onClick={() => {
-            onClick && onClick.call(null, appHelper);
-          }}
-          {...localeProps}
-          {...(addonProps || {})}
-        />
-      )) ||
-      null;
 
+    const node = Comp ? (
+      <Comp
+        editor={editor}
+        active={active}
+        locked={locked}
+        disabled={disabled}
+        config={config}
+        onClick={(): void => {
+          onClick && onClick.call(null, editor);
+        }}
+        {...pluginProps}
+      />
+    ) : null;
     switch (type) {
       case 'LinkIcon':
         return (
           <a {...(props.linkProps || {})}>
-            {this.renderIcon(() => {
+            {this.renderIcon((): void => {
-              onClick && onClick.call(null, appHelper);
+              onClick && onClick.call(null, editor);
             })}
           </a>
         );
       case 'Icon':
-        return this.renderIcon(() => {
+        return this.renderIcon((): void => {
-          onClick && onClick.call(null, appHelper);
+          onClick && onClick.call(null, editor);
         });
       case 'DialogIcon':
         return (
           <Fragment>
-            {this.renderIcon(() => {
+            {this.renderIcon((): void => {
-              onClick && onClick.call(null, appHelper);
+              onClick && onClick.call(null, editor);
               this.handleOpen();
             })}
             <Dialog
-              onOk={() => {
+              onOk={(): void => {
-                appHelper.emit(`${addonKey}.dialog.onOk`);
+                editor.emit(`${pluginKey}.dialog.onOk`);
                 this.handleClose();
               }}
               onCancel={this.handleClose}
               onClose={this.handleClose}
               title={title}
+              style={{
+                width: 500,
+                ...(props.dialogProps && props.dialogProps.style),
+              }}
               {...(props.dialogProps || {})}
               visible={dialogVisible}
             >
@@ -199,8 +198,8 @@ export default class LeftAddon extends PureComponent {
       case 'BalloonIcon':
         return (
           <Balloon
-            trigger={this.renderIcon(() => {
+            trigger={this.renderIcon((): void => {
-              onClick && onClick.call(null, appHelper);
+              onClick && onClick.call(null, editor);
             })}
             align="r"
             triggerType={['click', 'hover']}
@@ -210,12 +209,11 @@ export default class LeftAddon extends PureComponent {
           </Balloon>
         );
       case 'PanelIcon':
-        return this.renderIcon(() => {
+        return this.renderIcon((): void => {
-          onClick && onClick.call(null, appHelper);
+          onClick && onClick.call(null, editor);
-          this.handleOpen();
         });
       case 'Custom':
-        return dotted ? <Badge dot>{node}</Badge> : node;
+        return marked ? <Badge dot>{node}</Badge> : node;
       default:
         return null;
     }

packages/editor-skeleton/src/components/Panel/index.tsx

@@ -0,0 +1,60 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+
+import './index.scss';
+
+export interface PanelProps {
+  align: 'left' | 'right';
+  defaultWidth: number;
+  minWidth: number;
+  draggable: boolean;
+  floatable: boolean;
+  children: Plugin;
+  visible: boolean;
+}
+
+export interface PanelState {
+  width: number;
+}
+
+export default class Panel extends PureComponent<PanelProps, PanelState> {
+  static displayName = 'LowcodePanel';
+
+  static defaultProps = {
+    align: 'left',
+    defaultWidth: 240,
+    minWidth: 100,
+    draggable: true,
+    floatable: false,
+    visible: true,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      width: props.defaultWidth,
+    };
+  }
+
+  render(): React.ReactNode {
+    const { align, draggable, floatable, visible } = this.props;
+    const { width } = this.state;
+    return (
+      <div
+        className={classNames('lowcode-panel', align, {
+          draggable,
+          floatable,
+          visible,
+        })}
+        style={{
+          width,
+          display: visible ? '' : 'none',
+        }}
+      >
+        {this.props.children}
+        <div className="drag-area" />
+      </div>
+    );
+  }
+}

packages/editor-skeleton/src/components/TopIcon/index.scss

@@ -1,22 +1,67 @@
-.next-btn.next-large.lowcode-top-btn {
+.lowcode-top-icon {
+  display: inline-block;
   width: 44px;
-  height: 44px;
+  font-size: 20px;
-  padding: 0;
+  line-height: 48px;
-  margin: 4px -2px;
+  color: $color-text1-3;
-  text-align: center;
+  position: relative;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  color: #777;
   &.disabled {
     cursor: not-allowed;
     color: $color-text1-1;
+    &:hover {
+      color: $color-text1-1;
+    }
+  }
+  &.active {
+    color: $color-brand1-9;
+    &:hover {
+      color: $color-brand1-6;
+    }
   }
   &.locked {
     color: red !important;
   }
+  &:hover {
+    color: $color-brand1-6;
+    &:before {
+      content: attr(data-tooltip);
+      display: block;
+      height: auto;
+      width: auto;
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 0);
+      bottom: -32px;
+      line-height: 18px;
+      font-size: 12px;
+      white-space: nowrap;
+      padding: 6px 8px;
+      border-radius: 4px;
+      background: $balloon-normal-color-bg;
+      border: 1px solid $balloon-normal-color-border;
+      color: $color-text1-3;
+      z-index: 100;
+    }
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      left: 50%;
+      transform: translate(-50%, 0) rotate(45deg);
+      bottom: -5px;
+      background: $balloon-normal-color-bg;
+      border-left: 1px solid $balloon-normal-color-border;
+      border-top: 1px solid $balloon-normal-color-border;
+      opacity: 1;
+      visibility: visible;
+      z-index: 100;
+    }
+  }
   i.next-icon {
     &:before {
-      font-size: 17px;
+      font-size: 16px;
     }
     margin-right: 0;
     line-height: 18px;

packages/editor-skeleton/src/components/TopIcon/index.tsx

@@ -1,23 +1,25 @@
 import React, { PureComponent } from 'react';
-
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Icon, Button } from '@alifd/next';
+import { Icon } from '@alifd/next';
+
 import './index.scss';
-export default class TopIcon extends PureComponent {
+
-  static displayName = 'TopIcon';
+export interface TopIconProps {
-  static propTypes = {
+  active?: boolean;
-    active: PropTypes.bool,
+  className?: string;
-    className: PropTypes.string,
+  disabled?: boolean;
-    disabled: PropTypes.bool,
+  icon: string;
-    icon: PropTypes.string,
+  id?: string;
-    id: PropTypes.string,
+  locked?: boolean;
-    locked: PropTypes.bool,
+  marked?: boolean;
-    onClick: PropTypes.func,
+  onClick?: () => void;
-    showTitle: PropTypes.bool,
+  style?: React.CSSProperties;
-    style: PropTypes.object,
+  title?: string;
-    title: PropTypes.string,
+}
-  };
+
+export default class TopIcon extends PureComponent<TopIconProps> {
+  static displayName = 'LowcodeTopIcon';
+
   static defaultProps = {
     active: false,
     className: '',
@@ -25,13 +27,12 @@ export default class TopIcon extends PureComponent {
     icon: '',
     id: '',
     locked: false,
-    onClick: () => {},
+    onClick: (): void => {},
-    showTitle: false,
     style: {},
     title: '',
   };
 
-  render() {
+  render(): React.ReactNode {
     const {
       active,
       disabled,
@@ -41,28 +42,22 @@ export default class TopIcon extends PureComponent {
       className,
       id,
       style,
-      showTitle,
       onClick,
     } = this.props;
     return (
-      <Button
+      <div
-        type="normal"
+        className={classNames('lowcode-top-icon', className, {
-        size="large"
-        text={true}
-        className={classNames('lowcode-top-btn', className, {
           active,
           disabled,
           locked,
         })}
+        data-tooltip={title}
         id={id}
         style={style}
-        onClick={disabled ? null : onClick}
+        onClick={disabled ? undefined : onClick}
       >
-        <div>
+        <Icon type={icon} />
-          <Icon size="large" type={icon} />
+      </div>
-          {showTitle && <span>{title}</span>}
-        </div>
-      </Button>
     );
   }
 }

packages/editor-skeleton/src/components/TopPlugin/index.tsx

@@ -1,20 +1,43 @@
 import React, { PureComponent, Fragment } from 'react';
 
-import PropTypes from 'prop-types';
-import TopIcon from '../TopIcon';
 import { Balloon, Badge, Dialog } from '@alifd/next';
+import Editor from '@ali/lowcode-editor-core';
+import {
+  PluginConfig,
+  PluginClass,
+} from '@ali/lowcode-editor-core/lib/definitions';
+import TopIcon from '../TopIcon';
 
 import './index.scss';
-export default class TopPlugin extends PureComponent {
+
-  static displayName = 'lowcodeTopPlugin';
+export interface TopPluginProps {
+  active?: boolean;
+  config: PluginConfig;
+  disabled?: boolean;
+  editor: Editor;
+  locked?: boolean;
+  marked?: boolean;
+  onClick?: () => void;
+  pluginClass: PluginClass | undefined;
+}
+
+export interface TopPluginState {
+  dialogVisible: boolean;
+}
+
+export default class TopPlugin extends PureComponent<
+  TopPluginProps,
+  TopPluginState
+> {
+  static displayName = 'LowcodeTopPlugin';
 
   static defaultProps = {
     active: false,
     config: {},
     disabled: false,
-    dotted: false,
+    marked: false,
     locked: false,
-    onClick: () => {},
+    onClick: (): void => {},
   };
 
   constructor(props, context) {
@@ -24,42 +47,42 @@ export default class TopPlugin extends PureComponent {
     };
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
-    const { config } = this.props;
+    const { config, editor } = this.props;
     const pluginKey = config && config.pluginKey;
-    // const appHelper = this.appHelper;
+    if (editor && pluginKey) {
-    // if (appHelper && addonKey) {
+      editor.on(`${pluginKey}.dialog.show`, this.handleShow);
-    //   appHelper.on(`${addonKey}.dialog.show`, this.handleShow);
+      editor.on(`${pluginKey}.dialog.close`, this.handleClose);
-    //   appHelper.on(`${addonKey}.dialog.close`, this.handleClose);
+    }
-    // }
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
-    // const { config } = this.props;
+    const { config, editor } = this.props;
-    // const addonKey = config && config.addonKey;
+    const pluginKey = config && config.pluginKey;
-    // const appHelper = this.appHelper;
+    if (editor && pluginKey) {
-    // if (appHelper && addonKey) {
+      editor.off(`${pluginKey}.dialog.show`, this.handleShow);
-    //   appHelper.off(`${addonKey}.dialog.show`, this.handleShow);
+      editor.off(`${pluginKey}.dialog.close`, this.handleClose);
-    //   appHelper.off(`${addonKey}.dialog.close`, this.handleClose);
+    }
-    // }
   }
 
-  handleShow = () => {
+  handleShow = (): void => {
-    const { disabled, config, onClick } = this.props;
+    const { disabled, config, onClick, editor } = this.props;
-    const addonKey = config && config.addonKey;
+    const pluginKey = config && config.pluginKey;
-    if (disabled || !addonKey) return;
+    if (disabled || !pluginKey) return;
-    //考虑到弹窗情况，延时发送消息
-    setTimeout(() => this.appHelper.emit(`${addonKey}.addon.activate`), 0);
     this.handleOpen();
+    // 考虑到弹窗情况，延时发送消息
+    setTimeout((): void => {
+      editor.emit(`${pluginKey}.plugin.activate`);
+    }, 0);
     onClick && onClick();
   };
 
-  handleClose = () => {
+  handleClose = (): void => {
-    const addonKey = this.props.config && this.props.config.addonKey;
+    const { config, editor } = this.props;
-    const currentAddon =
+    const pluginKey = config && config.pluginKey;
-      this.appHelper.addons && this.appHelper.addons[addonKey];
+    const plugin = editor.plugins && editor.plugins[pluginKey];
-    if (currentAddon) {
+    if (plugin) {
-      this.utils.transformToPromise(currentAddon.close()).then(() => {
+      plugin.close().then((): void => {
         this.setState({
           dialogVisible: false,
         });
@@ -67,85 +90,107 @@ export default class TopPlugin extends PureComponent {
     }
   };
 
-  handleOpen = () => {
+  handleOpen = (): void => {
     // todo dialog类型的插件初始时拿不动插件实例
     this.setState({
       dialogVisible: true,
     });
   };
 
-  renderIcon = clickCallback => {
+  renderIcon = (clickCallback): React.ReactNode => {
-    const { active, disabled, dotted, locked, config, onClick } = this.props;
+    const {
+      active,
+      disabled,
+      marked,
+      locked,
+      config,
+      onClick,
+      editor,
+    } = this.props;
     const { pluginKey, props } = config || {};
     const { icon, title } = props || {};
     const node = (
       <TopIcon
-        className={`lowcode-top-addon ${pluginKey}`}
+        className={`lowcode-top-plugin ${pluginKey}`}
         active={active}
         disabled={disabled}
         locked={locked}
         icon={icon}
         title={title}
-        onClick={() => {
+        onClick={(): void => {
           if (disabled) return;
-          //考虑到弹窗情况，延时发送消息
+          // 考虑到弹窗情况，延时发送消息
-          setTimeout(
+          setTimeout((): void => {
-            () => this.appHelper.emit(`${pluginKey}.addon.activate`),
+            editor.emit(`${pluginKey}.plugin.activate`);
-            0,
+          }, 0);
-          );
           clickCallback && clickCallback();
           onClick && onClick();
         }}
       />
     );
-    return dotted ? <Badge dot>{node}</Badge> : node;
+    return marked ? <Badge dot>{node}</Badge> : node;
   };
 
-  render() {
+  render(): React.ReactNode {
-    const { active, dotted, locked, disabled, config, editor, pluginClass: Comp } = this.props;
+    const {
+      active,
+      marked,
+      locked,
+      disabled,
+      config,
+      editor,
+      pluginClass: Comp,
+    } = this.props;
     const { pluginKey, pluginProps, props, type } = config || {};
     const { onClick, title } = props || {};
     const { dialogVisible } = this.state;
-    if (!pluginKey || !type || !Comp) return null;
+    if (!pluginKey || !type) return null;
-    const node = <Comp 
+    const node = Comp ? (
-      active={active}
+      <Comp
-      locked={locked}
+        editor={editor}
-      disabled={disabled}
+        active={active}
-      config={config}
+        locked={locked}
-      onClick={() => {
+        disabled={disabled}
-        onClick && onClick.call(null, editor);
+        config={config}
-      }}
+        onClick={(): void => {
-      {...pluginProps}
+          onClick && onClick.call(null, editor);
-    />;
+        }}
+        {...pluginProps}
+      />
+    ) : null;
 
     switch (type) {
       case 'LinkIcon':
         return (
           <a {...props.linkProps}>
-            {this.renderIcon(() => {
+            {this.renderIcon((): void => {
               onClick && onClick.call(null, editor);
             })}
           </a>
         );
       case 'Icon':
-        return this.renderIcon(() => {
+        return this.renderIcon((): void => {
           onClick && onClick.call(null, editor);
         });
       case 'DialogIcon':
         return (
           <Fragment>
-            {this.renderIcon(() => {
+            {this.renderIcon((): void => {
               onClick && onClick.call(null, editor);
               this.handleOpen();
             })}
             <Dialog
-              onOk={() => {
+              onOk={(): void => {
                 editor.emit(`${pluginKey}.dialog.onOk`);
                 this.handleClose();
               }}
               onCancel={this.handleClose}
               onClose={this.handleClose}
               title={title}
+              style={{
+                width: 500,
+                ...(props.dialogProps && props.dialogProps.style),
+              }}
               {...props.dialogProps}
               visible={dialogVisible}
             >
@@ -156,7 +201,7 @@ export default class TopPlugin extends PureComponent {
       case 'BalloonIcon':
         return (
           <Balloon
-            trigger={this.renderIcon(() => {
+            trigger={this.renderIcon((): void => {
               onClick && onClick.call(null, editor);
             })}
             triggerType={['click', 'hover']}
@@ -166,7 +211,7 @@ export default class TopPlugin extends PureComponent {
           </Balloon>
         );
       case 'Custom':
-        return dotted ? <Badge dot>{node}</Badge> : node;
+        return marked ? <Badge dot>{node}</Badge> : node;
       default:
         return null;
     }

packages/editor-skeleton/src/config/skeleton.ts

@@ -1,21 +1 @@
-import Dashboard from '@/pages/Dashboard';
+export default {};
-import BasicLayout from '@/layouts/BasicLayout';
-
-const routerConfig = [
-  {
-    path: '/',
-    component: BasicLayout,
-    children: [
-      {
-        path: '/dashboard',
-        component: Dashboard,
-      },
-      {
-        path: '/',
-        redirect: '/dashboard',
-      },
-    ],
-  },
-];
-
-export default routerConfig;

packages/editor-skeleton/src/config/utils.ts

@@ -1,5 +1 @@
-// 菜单配置
+export default {};
-
-const asideMenuConfig = [];
-
-export { asideMenuConfig };

packages/editor-skeleton/src/global.scss

@@ -7,7 +7,9 @@ body {
   * {
     box-sizing: border-box;
   }
+  color: $color-text1-3;
 }
+
 .next-loading {
   .next-loading-wrap {
     height: 100%;
@@ -16,18 +18,17 @@ body {
 .lowcode-editor {
   .lowcode-main-content {
     position: absolute;
-    top: 48px;
+    top: 50px;
     left: 0;
     right: 0;
     bottom: 0;
     display: flex;
-    background-color: #d8d8d8;
+    background-color: rgba(31, 56, 88, 0.06);
   }
   .lowcode-center-area {
     flex: 1;
     display: flex;
     flex-direction: column;
-    padding: 10px;
     overflow: auto;
   }
 }

packages/editor-skeleton/src/index.ts

@@ -0,0 +1,7 @@
+import Skeleton from './skeleton';
+import Panel from './components/Panel';
+import TopIcon from './components/TopIcon';
+
+export default Skeleton;
+
+export { Panel, TopIcon };

packages/editor-skeleton/src/index.tsx

@@ -1,60 +0,0 @@
-import React, { PureComponent } from 'react';
-
-// import Editor from '@ali/lowcode-engine-editor';
-import { Loading, ConfigProvider } from '@alifd/next';
-import defaultConfig from './config/skeleton';
-
-import TopArea from './layouts/TopArea';
-import LeftArea from './layouts/LeftArea';
-import CenterArea from './layouts/CenterArea';
-import RightArea from './layouts/RightArea';
-
-import './global.scss';
-
-export default class Skeleton extends PureComponent {
-  static displayName = 'lowcodeEditorSkeleton';
-
-  constructor(props) {
-    super(props);
-    // this.editor = new Editor(props.config, props.utils);
-    this.editor = {
-      on: () => {},
-      off: () => {},
-      config: props.config,
-      pluginComponents: props.pluginComponents
-    };
-  }
-
-  componentWillUnmount() {
-    // this.editor && this.editor.destroy();
-    // this.editor = null;
-  }
-
-  render() {
-    const { location, history, messages } = this.props;
-    this.editor.location = location;
-    this.editor.history = history;
-    this.editor.messages = messages;
-    return (
-      <ConfigProvider>
-        <Loading
-          tip="Loading"
-          size="large"
-          visible={false}
-          shape="fusion-reactor"
-          fullScreen
-        >
-          <div className="lowcode-editor">
-            <TopArea editor={this.editor}/>
-            <div className="lowcode-main-content">
-              <LeftArea.Nav editor={this.editor}/>
-              <LeftArea.Panel editor={this.editor}/>
-              <CenterArea editor={this.editor}/>
-              <RightArea editor={this.editor}/>
-            </div>
-          </div>
-        </Loading>
-      </ConfigProvider>
-    );
-  }
-}

packages/editor-skeleton/src/layouts/CenterArea/index.scss

@@ -1,3 +1,3 @@
 .lowcode-center-area {
-  padding: 12px;
+  padding: 0;
 }

packages/editor-skeleton/src/layouts/CenterArea/index.tsx

@@ -1,15 +1,60 @@
 import React, { PureComponent } from 'react';
-
+import Editor, { AreaManager } from '@ali/lowcode-editor-core';
 import './index.scss';
 
-export default class CenterArea extends PureComponent {
+export interface CenterAreaProps {
-  static displayName = 'lowcodeCenterArea';
+  editor: Editor;
+}
+
+export default class CenterArea extends PureComponent<CenterAreaProps> {
+  static displayName = 'LowcodeCenterArea';
+
+  private editor: Editor;
+
+  private areaManager: AreaManager;
 
   constructor(props) {
     super(props);
+    this.editor = props.editor;
+    this.areaManager = new AreaManager(this.editor, 'centerArea');
   }
 
-  render() {
+  componentDidMount(): void {
-    return <div className="lowcode-center-area"></div>;
+    this.editor.on('skeleton.update', this.handleSkeletonUpdate);
+  }
+
+  componentWillUnmount(): void {
+    this.editor.off('skeleton.update', this.handleSkeletonUpdate);
+  }
+
+  handleSkeletonUpdate = (): void => {
+    // 当前区域插件状态改变是更新区域
+    if (this.areaManager.isPluginStatusUpdate()) {
+      this.forceUpdate();
+    }
+  };
+
+  render(): React.ReactNode {
+    const visiblePluginList = this.areaManager.getVisiblePluginList();
+    return (
+      <div className="lowcode-center-area">
+        {visiblePluginList.map(
+          (item): React.ReactNode => {
+            const Comp = this.areaManager.getPluginClass(item.pluginKey);
+            if (Comp) {
+              return (
+                <Comp
+                  key={item.pluginKey}
+                  editor={this.editor}
+                  config={item}
+                  {...item.pluginProps}
+                />
+              );
+            }
+            return null;
+          },
+        )}
+      </div>
+    );
   }
 }

packages/editor-skeleton/src/layouts/LeftArea/index.scss

@@ -1,21 +1,23 @@
 .lowcode-left-area-nav {
-  width: 48px;
+  width: 50px;
   height: 100%;
-  background: #ffffff;
+  background-color: $card-background;
-  border-right: 1px solid #e8ebee;
+  border-right: 2px solid $color-line1-1;
   position: relative;
   .top-area {
     position: absolute;
     top: 0;
     width: 100%;
-    background: #ffffff;
+    padding: 12px 0;
+    background-color: $card-background;
     max-height: 100%;
   }
   .bottom-area {
     position: absolute;
-    bottom: 20px;
+    bottom: 0;
     width: 100%;
-    background: #ffffff;
+    padding: 12px 0;
+    background-color: $card-background;
     max-height: calc(100% - 20px);
   }
 }

packages/editor-skeleton/src/layouts/LeftArea/nav.tsx

@@ -1,15 +1,148 @@
 import React, { PureComponent } from 'react';
+import LeftPlugin from '../../components/LeftPlugin';
+import Editor, { utils, AreaManager } from '@ali/lowcode-editor-core';
+import { PluginConfig } from '@ali/lowcode-editor-core/lib/definitions';
 
 import './index.scss';
 
-export default class LeftAreaPanel extends PureComponent {
+const { isEmpty } = utils;
-  static displayName = 'lowcodeLeftAreaNav';
+
+export interface LeftAreaNavProps {
+  editor: Editor;
+}
+
+export interface LeftAreaNavState {
+  activeKey: string;
+}
+
+export default class LeftAreaNav extends PureComponent<
+  LeftAreaNavProps,
+  LeftAreaNavState
+> {
+  static displayName = 'LowcodeLeftAreaNav';
+
+  private editor: Editor;
+
+  private areaManager: AreaManager;
 
   constructor(props) {
     super(props);
+    this.editor = props.editor;
+    this.areaManager = new AreaManager(this.editor, 'leftArea');
+
+    this.state = {
+      activeKey: 'none',
+    };
   }
 
-  render() {
+  componentDidMount(): void {
-    return <div className="lowcode-left-area-nav" />;
+    this.editor.on('skeleton.update', this.handleSkeletonUpdate);
+    this.editor.on('leftNav.change', this.handlePluginChange);
+    const visiblePanelPluginList = this.areaManager.getVisiblePluginList(
+      'IconPanel',
+    );
+    const defaultKey =
+      (visiblePanelPluginList[0] && visiblePanelPluginList[0].pluginKey) ||
+      'componentAttr';
+    this.handlePluginChange(defaultKey);
+  }
+
+  componentWillUnmount(): void {
+    this.editor.off('skeleton.update', this.handleSkeletonUpdate);
+    this.editor.off('leftNav.change', this.handlePluginChange);
+  }
+
+  handleSkeletonUpdate = (): void => {
+    // 当前区域插件状态改变是更新区域
+    if (this.areaManager.isPluginStatusUpdate()) {
+      this.forceUpdate();
+    }
+  };
+
+  handlePluginChange = (key: string): void => {
+    const { activeKey } = this.state;
+    const plugins = this.editor.plugins;
+    const prePlugin = plugins[activeKey];
+    const nextPlugin = plugins[key];
+    if (activeKey === 'none') {
+      if (nextPlugin) {
+        nextPlugin.open().then((): void => {
+          this.updateActiveKey(key);
+        });
+      }
+    } else if (activeKey === key) {
+      if (prePlugin) {
+        prePlugin.close().then((): void => {
+          this.updateActiveKey('none');
+        });
+      }
+    } else if (prePlugin) {
+      // 先关后开
+      prePlugin.close().then((): void => {
+        if (nextPlugin) {
+          nextPlugin.open().then((): void => {
+            this.updateActiveKey(key);
+          });
+        }
+      });
+    }
+  };
+
+  handlePluginClick = (item: PluginConfig): void => {
+    if (item.type === 'PanelIcon') {
+      this.handlePluginChange(item.pluginKey);
+    }
+  };
+
+  updateActiveKey = (key: string): void => {
+    this.editor.set('leftNav', key);
+    this.setState({ activeKey: key });
+    this.editor.emit('leftPanel.show', key);
+  };
+
+  renderPluginList = (list: PluginConfig[] = []): React.ReactElement[] => {
+    const { activeKey } = this.state;
+    return list.map(
+      (item): React.ReactElement => {
+        const pluginStatus = this.areaManager.getPluginStatus(item.pluginKey);
+        const pluginClass = this.areaManager.getPluginClass(item.pluginKey);
+        return (
+          <LeftPlugin
+            key={item.pluginKey}
+            config={item}
+            editor={this.editor}
+            pluginClass={pluginClass}
+            onClick={(): void => this.handlePluginClick(item)}
+            active={activeKey === item.pluginKey}
+            {...pluginStatus}
+          />
+        );
+      },
+    );
+  };
+
+  render(): React.ReactNode {
+    const topList: PluginConfig[] = [];
+    const bottomList: PluginConfig[] = [];
+    const visiblePluginList = this.areaManager.getVisiblePluginList();
+    if (isEmpty(visiblePluginList)) {
+      return null;
+    }
+    visiblePluginList.forEach((item): void => {
+      const align =
+        item.props && item.props.align === 'bottom' ? 'bottom' : 'top';
+      if (align === 'bottom') {
+        bottomList.push(item);
+      } else {
+        topList.push(item);
+      }
+    });
+
+    return (
+      <div className="lowcode-left-area-nav">
+        <div className="bottom-area">{this.renderPluginList(bottomList)}</div>
+        <div className="top-area">{this.renderPluginList(topList)}</div>
+      </div>
+    );
   }
 }

packages/editor-skeleton/src/layouts/LeftArea/panel.tsx

@@ -1,15 +1,88 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
+import Editor, { AreaManager } from '@ali/lowcode-editor-core';
+import Panel from '../../components/Panel';
 
 import './index.scss';
 
-export default class LeftAreaPanel extends PureComponent {
+export interface LeftAreaPanelProps {
-  static displayName = 'lowcodeLeftAreaPanel';
+  editor: Editor;
+}
+
+export interface LeftAreaPanelState {
+  activeKey: string;
+}
+
+export default class LeftAreaPanel extends PureComponent<
+  LeftAreaPanelProps,
+  LeftAreaPanelState
+> {
+  static displayName = 'LowcodeLeftAreaPanel';
+
+  private editor: Editor;
+
+  private areaManager: AreaManager;
 
   constructor(props) {
     super(props);
+    this.editor = props.editor;
+    this.areaManager = new AreaManager(this.editor, 'leftArea');
+
+    this.state = {
+      activeKey: 'none',
+    };
   }
 
-  render() {
+  componentDidMount(): void {
-    return <div className="lowcode-left-area-panel" />;
+    this.editor.on('skeleton.update', this.handleSkeletonUpdate);
+    this.editor.on('leftPanel.show', this.handlePluginChange);
+  }
+
+  componentWillUnmount(): void {
+    this.editor.off('skeleton.update', this.handleSkeletonUpdate);
+    this.editor.off('leftPanel.show', this.handlePluginChange);
+  }
+
+  handleSkeletonUpdate = (): void => {
+    // 当前区域插件状态改变是更新区域
+    if (this.areaManager.isPluginStatusUpdate('PanelIcon')) {
+      this.forceUpdate();
+    }
+  };
+
+  handlePluginChange = (key: string): void => {
+    this.setState({
+      activeKey: key,
+    });
+  };
+
+  render(): React.ReactNode {
+    const { activeKey } = this.state;
+    const list = this.areaManager.getVisiblePluginList('PanelIcon');
+
+    return (
+      <Fragment>
+        {list.map(
+          (item): React.ReactNode => {
+            const Comp = this.areaManager.getPluginClass(item.pluginKey);
+            if (Comp) {
+              return (
+                <Panel
+                  key={item.pluginKey}
+                  visible={item.pluginKey === activeKey}
+                  {...(item.props && item.props.panelProps)}
+                >
+                  <Comp
+                    editor={this.editor}
+                    config={item}
+                    {...item.pluginProps}
+                  />
+                </Panel>
+              );
+            }
+            return null;
+          },
+        )}
+      </Fragment>
+    );
   }
 }

packages/editor-skeleton/src/layouts/RightArea/index.scss

@@ -1,155 +1,37 @@
 .lowcode-right-area {
-  width: 300px;
+  width: 262px;
   height: 100%;
-  background-color: #ffffff;
+  background-color: $card-background;
-  border-left: 1px solid #e8ebee;
+  border-left: 2px solid $color-line1-1;
-  .right-plugin-title {
+
-    &.locked {
+  .right-panel {
-      color: red !important;
+    overflow: auto;
-    }
+    // border-top: 2px solid $color-line1-1;
-    &.active {
-      color: $color-brand1-9 !important;
-    }
-    &.disabled {
-      cursor: not-allowed;
-      color: $color-text1-1;
-    }
   }
 
   //tab定义
-  .next-tabs-wrapped.right-tabs {
+  .right-tabs.next-tabs {
-    display: flex;
-    flex-direction: column;
-    margin-top: -1px;
-    .next-tabs-bar {
-      z-index: 1;
-    }
     .next-tabs-nav {
-      display: block;
+      width: 100%;
-      .next-tabs-tab {
+      .next-tabs-tab-inner {
-        &:first-child {
+        padding-left: 0;
-          border-left: none;
+        padding-right: 0;
-        }
+      }
-        font-size: 14px;
+      .right-plugin-title {
         text-align: center;
-        border-right: none !important;
+        &.locked {
-        margin-right: 0 !important;
+          color: red !important;
-        width: 25%;
+        }
         &.active {
-          background: none;
+          color: $color-brand1-9 !important;
-          border-bottom-color: #f7f7f7 !important;
         }
-      }
+        &.disabled {
-    }
+          cursor: not-allowed;
-  }
+          color: $color-text1-1;
-  .next-tabs-content {
-    flex: 1;
-    .next-tabs-tabpane.active {
-      height: 100%;
-      overflow-y: auto;
-    }
-  }
-  //组件
-  .select-comp {
-    padding: 10px 16px;
-    line-height: 16px;
-    color: #989a9c;
-    & > span {
-      font-size: 12px;
-      line-height: 16px;
-      font-weight: 400;
-    }
-    & > .btn-wrap,
-    & > .next-btn {
-      width: auto;
-      margin: 0 5px;
-      float: right;
-    }
-  }
-
-  .unselected {
-    padding: 60px 0;
-    text-align: center;
-  }
-  //右侧属性面板样式调整;
-  .offset-56 {
-    padding-left: 56px;
-    margin-bottom: 16px;
-    overflow: hidden;
-  }
-  .fixedSpan.next-form-item {
-    & > .next-form-item-label {
-      width: 56px;
-      flex: none;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-    & > .next-form-item-control {
-      padding-right: 24px;
-    }
-  }
-  .fixedSpan.next-form-item,
-  .offset-56 .next-form-item {
-    display: flex;
-    & > .next-form-item-control {
-      width: auto;
-      flex: 1;
-      max-width: none;
-      .next-input,
-      .next-select,
-      .next-radio-group,
-      .next-number-picker,
-      .luna-reactnode-btn,
-      .luna-monaco-button button,
-      .luna-object-button button {
-        width: 100%;
-      }
-      .next-number-picker {
-        width: 100%;
-        .next-after {
-          padding-right: 5px;
         }
-      }
+        .next-icon {
-      .next-radio-group {
+          line-height: 15px;
-        display: flex;
+          margin-right: 2px;
-        label {
-          flex: 1;
-          text-align: center;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-  .topSpan.next-form-item {
-    margin-bottom: 4px;
-    & > .next-form-item-control {
-      padding-right: 24px;
-      .next-input,
-      .next-select,
-      .next-radio-group,
-      .next-number-picker,
-      .luna-reactnode-btn,
-      .luna-monaco-button button,
-      .luna-object-button button {
-        width: 100%;
-      }
-      .next-number-picker {
-        width: 100%;
-        .next-after {
-          padding-right: 5px;
-        }
-      }
-      .next-radio-group {
-        display: flex;
-        label {
-          flex: 1;
-          text-align: center;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
         }
       }
     }

packages/editor-skeleton/src/layouts/RightArea/index.tsx

@@ -1,15 +1,214 @@
 import React, { PureComponent } from 'react';
-
+import { Tab, Badge, Icon } from '@alifd/next';
+import classNames from 'classnames';
+import Editor, { AreaManager, utils } from '@ali/lowcode-editor-core';
+import { PluginConfig } from '@ali/lowcode-editor-core/lib/definitions';
 import './index.scss';
 
-export default class RightArea extends PureComponent {
+const { isEmpty } = utils;
-  static displayName = 'lowcodeRightArea';
+
+export interface RightAreaProps {
+  editor: Editor;
+}
+
+export interface RightAreaState {
+  activeKey: string;
+}
+
+export default class RightArea extends PureComponent<
+  RightAreaProps,
+  RightAreaState
+> {
+  static displayName = 'LowcodeRightArea';
+
+  private editor: Editor;
+
+  private areaManager: AreaManager;
 
   constructor(props) {
     super(props);
+    this.editor = props.editor;
+    this.areaManager = new AreaManager(this.editor, 'rightArea');
+    this.state = {
+      activeKey: '',
+    };
   }
 
-  render() {
+  componentDidMount(): void {
-    return <div className="lowcode-right-area" />;
+    this.editor.on('skeleton.update', this.handleSkeletonUpdate);
+    this.editor.on('rightNav.change', this.handlePluginChange);
+    const visiblePluginList = this.areaManager.getVisiblePluginList('TabPanel');
+    const defaultKey =
+      (visiblePluginList[0] && visiblePluginList[0].pluginKey) ||
+      'componentAttr';
+    this.handlePluginChange(defaultKey, true);
+  }
+
+  componentWillUnmount(): void {
+    this.editor.off('skeleton.update', this.handleSkeletonUpdate);
+    this.editor.off('rightNav.change', this.handlePluginChange);
+  }
+
+  handleSkeletonUpdate = (): void => {
+    // 当前区域插件状态改变是更新区域
+    if (this.areaManager.isPluginStatusUpdate()) {
+      const activeKey = this.state.activeKey;
+      const activePluginStatus = this.areaManager.getPluginStatus(activeKey);
+      if (activePluginStatus && activePluginStatus.visible) {
+        this.forceUpdate();
+      } else {
+        const currentPlugin = this.areaManager.getPlugin(activeKey);
+        if (currentPlugin) {
+          currentPlugin.close().then((): void => {
+            this.setState(
+              {
+                activeKey: '',
+              },
+              (): void => {
+                const visiblePluginList = this.areaManager.getVisiblePluginList(
+                  'TabPanel',
+                );
+                const firstPlugin = visiblePluginList && visiblePluginList[0];
+                if (firstPlugin) {
+                  this.handlePluginChange(firstPlugin.pluginKey);
+                }
+              },
+            );
+          });
+        }
+      }
+    }
+  };
+
+  handlePluginChange = (key: string, isinit?: boolean): void => {
+    const activeKey = this.state.activeKey;
+    const currentPlugin = this.areaManager.getPlugin(activeKey);
+    const nextPlugin = this.areaManager.getPlugin(key);
+    const openPlugin = (): void => {
+      if (!nextPlugin) {
+        console.error(`plugin ${key} has not regist in the editor`);
+        return;
+      }
+      nextPlugin.open().then((): void => {
+        this.editor.set('rightNav', key);
+        this.setState({
+          activeKey: key,
+        });
+      });
+    };
+    if (key === activeKey && !isinit) return;
+    if (currentPlugin) {
+      currentPlugin.close().then((): void => {
+        openPlugin();
+      });
+    } else {
+      openPlugin();
+    }
+  };
+
+  renderTabTitle = (config: PluginConfig): React.ReactElement => {
+    const { icon, title } = config.props || {};
+    const pluginStatus = this.editor.pluginStatus[config.pluginKey];
+    const { marked, disabled, locked } = pluginStatus;
+    const active = this.state.activeKey === config.pluginKey;
+
+    const renderTitle = (): React.ReactElement => (
+      <div
+        className={classNames('right-plugin-title', {
+          active,
+          locked,
+          disabled,
+        })}
+      >
+        {!!icon && <Icon size="xs" type={icon} />}
+        {title}
+      </div>
+    );
+    if (marked) {
+      return <Badge dot>{renderTitle()}</Badge>;
+    }
+    return renderTitle();
+  };
+
+  renderTabPanels = (list: PluginConfig[], height: string): React.ReactNode => {
+    if (isEmpty(list)) {
+      return null;
+    }
+    return (
+      <Tab
+        className="right-tabs"
+        style={{
+          height,
+        }}
+        activeKey={this.state.activeKey}
+        lazyLoad={false}
+        onChange={this.handlePluginChange}
+      >
+        {list.map(
+          (item): React.ReactNode => {
+            const Comp = this.areaManager.getPluginClass(item.pluginKey);
+            if (Comp) {
+              return (
+                <Tab.Item
+                  key={item.pluginKey}
+                  title={this.renderTabTitle(item)}
+                  disabled={this.editor.pluginStatus[item.pluginKey].disabled}
+                  style={{
+                    width: `${100 / list.length}%`,
+                  }}
+                >
+                  <Comp
+                    editor={this.editor}
+                    config={item}
+                    {...item.pluginProps}
+                  />
+                </Tab.Item>
+              );
+            }
+            return null;
+          },
+        )}
+      </Tab>
+    );
+  };
+
+  renderPanels = (list: PluginConfig[], height: string): React.ReactNode => {
+    return list.map(
+      (item): React.ReactNode => {
+        const Comp = this.areaManager.getPluginClass(item.pluginKey);
+        if (Comp) {
+          return (
+            <div
+              className="right-panel"
+              style={{ height }}
+              key={item.pluginKey}
+            >
+              <Comp editor={this.editor} config={item} {...item.pluginProps} />
+            </div>
+          );
+        }
+        return null;
+      },
+    );
+  };
+
+  render(): React.ReactNode {
+    const tabList = this.areaManager.getVisiblePluginList('TabPanel');
+    const panelList = this.areaManager.getVisiblePluginList('Panel');
+    if (isEmpty(panelList) && isEmpty(tabList)) {
+      return null;
+    } else if (tabList.length === 1) {
+      panelList.unshift(tabList[0]);
+      tabList.splice(0, 1);
+    }
+    const height = `${Math.floor(
+      100 / (panelList.length + (tabList.length > 0 ? 1 : 0)),
+    )}%`;
+    return (
+      <div className="lowcode-right-area">
+        {this.renderTabPanels(tabList, height)}
+        {this.renderPanels(panelList, height)}
+      </div>
+    );
   }
 }

packages/editor-skeleton/src/layouts/TopArea/index.scss

@@ -1,5 +1,30 @@
 .lowcode-top-area {
-  height: 48px;
+  position: absolute;
-  background-color: #ffffff;
+  top: 0;
-  border-bottom: 1px solid #e8ebee;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  background-color: $card-background;
+  border-bottom: 2px solid $color-line1-1;
+  user-select: none;
+  .divider {
+    max-width: 0;
+    margin: 12px 16px;
+    height: 24px;
+    border-right: 1px solid $color-line1-2;
+  }
+  .next-col {
+    text-align: center;
+  }
+  .left-area {
+    padding: 0 16px;
+  }
+  .right-area {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 0 16px;
+    height: 100%;
+    background: $card-background;
+  }
 }

packages/editor-skeleton/src/layouts/TopArea/index.tsx

@@ -1,61 +1,81 @@
 import React, { PureComponent } from 'react';
 import { Grid } from '@alifd/next';
+import Editor, { AreaManager } from '@ali/lowcode-editor-core';
+import { PluginConfig } from '@ali/lowcode-editor-core/lib/definitions';
 import TopPlugin from '../../components/TopPlugin';
 import './index.scss';
 
 const { Row, Col } = Grid;
 
-export default class TopArea extends PureComponent {
+export interface TopAreaProps {
-  static displayName = 'lowcodeTopArea';
+  editor: Editor;
+}
+
+export default class TopArea extends PureComponent<TopAreaProps> {
+  static displayName = 'LowcodeTopArea';
+
+  private areaManager: AreaManager;
+
+  private editor: Editor;
 
   constructor(props) {
     super(props);
     this.editor = props.editor;
-    this.config = this.editor.config.plugins && this.editor.config.plugins.topArea;
+    this.areaManager = new AreaManager(props.editor, 'topArea');
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
-  }
+    this.editor.on('skeleton.update', this.handleSkeletonUpdate);
-  componentWillUnmount() {
   }
 
-  handlePluginStatusChange = () => {};
+  componentWillUnmount(): void {
+    this.editor.off('skeleton.update', this.handleSkeletonUpdate);
+  }
 
-  renderPluginList = (list = []) => {
+  handleSkeletonUpdate = (): void => {
-    return list.map((item, idx) => {
+    // 当前区域插件状态改变是更新区域
-      const isDivider = item.type === 'Divider';
+    if (this.areaManager.isPluginStatusUpdate()) {
-
+      this.forceUpdate();
-      return (
+    }
-        <Col
-          className={isDivider ? 'divider' : ''}
-          key={isDivider ? idx : item.pluginKey}
-          style={{
-            width: (item.props && item.props.width) || 40,
-            flex: 'none',
-          }}
-        >
-          {!isDivider && (
-            <TopPlugin
-              config={item}
-              pluginClass={this.editor.pluginComponents[item.pluginKey]}
-              status={this.editor.pluginStatus[item.pluginKey]}
-            />
-          )}
-        </Col>
-      );
-    });
   };
 
-  render() {
+  renderPluginList = (list: PluginConfig[] = []): React.ReactElement[] => {
-    if (!this.config) return null;
+    return list.map(
-    const leftList = [];
+      (item, idx): React.ReactElement => {
-    const rightList = [];
+        const isDivider = item.type === 'Divider';
-    this.config.forEach(item => {
+        const PluginClass = this.areaManager.getPluginClass(item.pluginKey);
+        return (
+          <Col
+            className={isDivider ? 'divider' : ''}
+            key={isDivider ? idx : item.pluginKey}
+            style={{
+              width: (item.props && item.props.width) || 36,
+              flex: 'none',
+            }}
+          >
+            {!isDivider && (
+              <TopPlugin
+                config={item}
+                pluginClass={PluginClass}
+                editor={this.editor}
+              />
+            )}
+          </Col>
+        );
+      },
+    );
+  };
+
+  render(): React.ReactNode {
+    const leftList: PluginConfig[] = [];
+    const rightList: PluginConfig[] = [];
+    const visiblePluginList = this.areaManager.getVisiblePluginList();
+    visiblePluginList.forEach((item): void => {
       const align =
         item.props && item.props.align === 'right' ? 'right' : 'left';
       // 分隔符不允许相邻
       if (item.type === 'Divider') {
-        const currentList = align === 'right' ? rightList : leftList;
+        const currList = align === 'right' ? rightList : leftList;
         if (
           currList.length === 0 ||
           currList[currList.length - 1].type === 'Divider'
@@ -68,11 +88,14 @@ export default class TopArea extends PureComponent {
         leftList.push(item);
       }
     });
-
     return (
       <div className="lowcode-top-area">
-        <div className="left-area">{this.renderPluginList(leftList)}</div>
+        <div className="left-area">
-        <div classname="right-area">{this.renderPluginList(rightList)}</div>
+          <Row>{this.renderPluginList(leftList)}</Row>
+        </div>
+        <div className="right-area">
+          <Row justify="end">{this.renderPluginList(rightList)}</Row>
+        </div>
       </div>
     );
   }

packages/editor-skeleton/src/locale/en-US.js

@@ -1,10 +1 @@
-export default {
+export default {};
-  loading: 'loading...',
-  rejectRedirect: 'Redirect is not allowed',
-  expand: 'Unfold',
-  fold: 'Fold',
-  pageNotExist: 'The current Page not exist',
-  enterFromAppCenter: 'Please enter from the app center',
-  noPermission: 'Sorry, you do not have the develop permission',
-  getPermission: 'Please connect the app owners {owners} to get the permission',
-};

packages/editor-skeleton/src/locale/zh-CN.js

@@ -1,10 +1 @@
-export default {
+export default {};
-  loading: '加载中...',
-  rejectRedirect: '开发中，已阻止发生跳转',
-  expand: '展开',
-  fold: '收起',
-  pageNotExist: '当前访问地址不存在',
-  enterFromAppCenter: '请从应用中心入口重新进入',
-  noPermission: '抱歉，您暂无开发权限',
-  getPermission: '请移步应用中心申请开发权限, 或联系 {owners} 开通权限',
-};

packages/editor-skeleton/src/skeleton.tsx

@@ -1,11 +1,13 @@
 import React, { PureComponent } from 'react';
 
 import { Loading, ConfigProvider } from '@alifd/next';
-
+import { HashRouter as Router, Route } from 'react-router-dom';
-import Editor from '../framework/editor';
+import Editor, { utils } from '@ali/lowcode-editor-core';
-import { EditorConfig, Utils, PluginClassSet } from '../framework/definitions';
+import {
-import { comboEditorConfig, parseSearch } from '../framework/utils';
+  EditorConfig,
-
+  Utils,
+  PluginClassSet,
+} from '@ali/lowcode-editor-core/lib/definitions';
 import defaultConfig from './config/skeleton';
 import skeletonUtils from './config/utils';
 
@@ -13,9 +15,10 @@ import TopArea from './layouts/TopArea';
 import LeftArea from './layouts/LeftArea';
 import CenterArea from './layouts/CenterArea';
 import RightArea from './layouts/RightArea';
-
 import './global.scss';
 
+const { comboEditorConfig, parseSearch } = utils;
+
 let renderIdx = 0;
 
 declare global {
@@ -42,12 +45,12 @@ export interface SkeletonState {
   __hasError?: boolean;
 }
 
-export default class Skeleton extends PureComponent<SkeletonProps, SkeletonState> {
+export class Skeleton extends PureComponent<SkeletonProps, SkeletonState> {
   static displayName = 'LowcodeEditorSkeleton';
 
   static getDerivedStateFromError(): SkeletonState {
     return {
-      __hasError: true
+      __hasError: true,
     };
   }
 
@@ -58,7 +61,7 @@ export default class Skeleton extends PureComponent<SkeletonProps, SkeletonState
 
     this.state = {
       initReady: false,
-      skeletonKey: `skeleton${renderIdx}`
+      skeletonKey: `skeleton${renderIdx}`,
     };
 
     this.init();
@@ -77,19 +80,23 @@ export default class Skeleton extends PureComponent<SkeletonProps, SkeletonState
       this.editor.destroy();
     }
     const { utils, config, components } = this.props;
-    const editor = new Editor(comboEditorConfig(defaultConfig, config), components, {
+    const editor = new Editor(
-      ...skeletonUtils,
+      comboEditorConfig(defaultConfig, config),
-      ...utils
+      components,
-    });
+      {
+        ...skeletonUtils,
+        ...utils,
+      },
+    );
     this.editor = editor;
     // eslint-disable-next-line no-underscore-dangle
     window.__ctx = {
       editor,
-      appHelper: editor
+      appHelper: editor,
     };
     editor.once('editor.reset', (): void => {
       this.setState({
-        initReady: false
+        initReady: false,
       });
       editor.emit('editor.beforeReset');
       this.init(true);
@@ -100,13 +107,14 @@ export default class Skeleton extends PureComponent<SkeletonProps, SkeletonState
         {
           initReady: true,
           // 刷新IDE时生成新的skeletonKey保证插件生命周期重新执行
-          skeletonKey: isReset ? `skeleton${++renderIdx}` : this.state.skeletonKey
+          skeletonKey: isReset
+            ? `skeleton${++renderIdx}`
+            : this.state.skeletonKey,
         },
         (): void => {
           editor.emit('editor.ready');
-          editor.emit('ide.ready');
+          isReset && editor.emit('editor.afterReset');
-          isReset && editor.emit('ide.afterReset');
+        },
-        }
       );
     });
   };
@@ -125,7 +133,7 @@ export default class Skeleton extends PureComponent<SkeletonProps, SkeletonState
 
     return (
       <ConfigProvider>
-        <Loading tip="Loading" size="large" visible={!initReady} shape="fusion-reactor" fullScreen>
+        <Loading tip="Loading" size="large" visible={!initReady} fullScreen>
           <div className="lowcode-editor" key={skeletonKey}>
             <TopArea editor={this.editor} />
             <div className="lowcode-main-content">
@@ -140,3 +148,33 @@ export default class Skeleton extends PureComponent<SkeletonProps, SkeletonState
     );
   }
 }
+
+// 通过React-Router包裹，支持编辑器内页面根据路由切换
+export interface SkeletonWithRouterProps {
+  components: PluginClassSet;
+  config: EditorConfig;
+  utils: Utils;
+}
+
+const SkeletonWithRouter: React.FC<SkeletonWithRouterProps> = (
+  props,
+): React.ReactElement => {
+  const { config, ...otherProps } = props;
+  return (
+    <Router>
+      <Route
+        path="/*"
+        component={routerProps => (
+          <Skeleton
+            {...routerProps}
+            {...otherProps}
+            {...(config.skeleton && config.skeleton.props)}
+            config={config}
+          />
+        )}
+      />
+    </Router>
+  );
+};
+
+export default SkeletonWithRouter;

packages/editor/src/config/components.js

@@ -1,39 +0,0 @@
-import topBalloonIcon from '@ali/iceluna-addon-2';
-import topDialogIcon from '@ali/iceluna-addon-2';
-import leftPanelIcon from '@ali/iceluna-addon-2';
-import leftPanelIcon2 from '@ali/iceluna-addon-2';
-import leftBalloonIcon from '@ali/iceluna-addon-2';
-import leftDialogIcon from '@ali/iceluna-addon-2';
-import rightPanel1 from '@ali/iceluna-addon-2';
-import rightPanel2 from '@ali/iceluna-addon-2';
-import rightPanel3 from '@ali/iceluna-addon-2';
-import rightPanel4 from '@ali/iceluna-addon-2';
-import componentList from '@ali/iceluna-addon-component-list';
-import Settings from '../../../plugin-settings';
-import undoRedo from '../plugins/undoRedo';
-import Designer from '../plugins/designer';
-import logo from '../plugins/logo';
-import save from '../plugins/save';
-import OutlineTree from '../../../plugin-outline-tree';
-
-import PluginFactory from '../framework/pluginFactory';
-
-export default {
-  logo: PluginFactory(logo),
-  save: PluginFactory(save),
-  designer: PluginFactory(Designer),
-  settings: PluginFactory(Settings),
-  outlineTree: PluginFactory(OutlineTree),
-  undoRedo: PluginFactory(undoRedo),
-  topBalloonIcon: PluginFactory(topBalloonIcon),
-  topDialogIcon: PluginFactory(topDialogIcon),
-  leftPanelIcon: PluginFactory(leftPanelIcon),
-  leftPanelIcon2: PluginFactory(leftPanelIcon2),
-  leftBalloonIcon: PluginFactory(leftBalloonIcon),
-  leftDialogIcon: PluginFactory(leftDialogIcon),
-  rightPanel1: PluginFactory(rightPanel1),
-  rightPanel2: PluginFactory(rightPanel2),
-  rightPanel3: PluginFactory(rightPanel3),
-  rightPanel4: PluginFactory(rightPanel4),
-  componentList: PluginFactory(componentList)
-};

packages/editor/src/config/skeleton.js

@@ -1,331 +0,0 @@
-import assets from './assets';
-
-export default {
-  version: '^1.0.2',
-  theme: {
-    dpl: {
-      package: '@alife/dpl-iceluna',
-      version: '^2.3.0'
-    },
-    scss: ''
-  },
-  constants: {
-    namespace: 'page'
-  },
-  utils: [],
-  plugins: {
-    topArea: [
-      {
-        pluginKey: 'logo',
-        type: 'Custom',
-        props: {
-          align: 'left',
-          width: 100
-        },
-        config: {
-          package: '@ali/lowcode-plugin-logo',
-          version: '1.0.0'
-        },
-        pluginProps: {
-          logo: 'https://img.alicdn.com/tfs/TB1hoI9x1H2gK0jSZFEXXcqMpXa-146-40.png',
-          href: '/'
-        }
-      },
-      {
-        pluginKey: 'topBalloonIcon',
-        type: 'BalloonIcon',
-        props: {
-          align: 'left',
-          title: 'balloon',
-          icon: 'dengpao',
-          balloonProps: {
-            triggerType: 'click'
-          }
-        },
-        config: {
-          package: '@ali/iceluna-addon-2',
-          version: '^1.0.0'
-        },
-        pluginProps: {}
-      },
-      {
-        pluginKey: 'divider',
-        type: 'Divider',
-        props: {
-          align: 'left'
-        }
-      },
-      {
-        pluginKey: 'topDialogIcon',
-        type: 'DialogIcon',
-        props: {
-          align: 'left',
-          title: 'dialog',
-          icon: 'dengpao'
-        },
-        config: {
-          package: '@ali/iceluna-addon-2',
-          version: '^1.0.0'
-        },
-        pluginProps: {}
-      },
-      {
-        pluginKey: 'topLinkIcon',
-        type: 'LinkIcon',
-        props: {
-          align: 'left',
-          title: 'link',
-          icon: 'dengpao',
-          linkProps: {
-            href: '//www.taobao.com',
-            target: 'blank'
-          }
-        },
-        config: {},
-        pluginProps: {}
-      },
-      {
-        pluginKey: 'topIcon',
-        type: 'Icon',
-        props: {
-          align: 'left',
-          title: 'icon',
-          icon: 'dengpao',
-          onClick(editor) {
-            alert(`icon addon invoke, current activeKey: ${editor.activeKey}`);
-          }
-        },
-        config: {},
-        pluginProps: {}
-      },
-      {
-        pluginKey: 'undoRedo',
-        type: 'Custom',
-        props: {
-          align: 'right',
-          width: 88
-        },
-        config: {
-          package: '@ali/lowcode-plugin-undo-redo',
-          version: '1.0.0'
-        }
-      },
-      {
-        pluginKey: 'divider',
-        type: 'Divider',
-        props: {
-          align: 'right'
-        }
-      },
-      {
-        pluginKey: 'save',
-        type: 'Custom',
-        props: {
-          align: 'right',
-          width: 64
-        },
-        config: {
-          package: '@ali/lowcode-plugin-save',
-          version: '1.0.0'
-        }
-      }
-    ],
-    leftArea: [
-      {
-        pluginKey: 'componentList',
-        type: 'PanelIcon',
-        props: {
-          align: 'top',
-          icon: 'zujianku',
-          title: '组件库'
-        },
-        config: {
-          package: '@ali/iceluna-addon-component-list',
-          version: '^1.0.4'
-        },
-        pluginProps: {
-          disableAppComponent: true
-        }
-      },
-      {
-        pluginKey: 'outlineTree',
-        type: 'PanelIcon',
-        props: {
-          align: 'top',
-          icon: 'dengpao',
-          title: '大纲树'
-        },
-        config: {
-          version: '^1.0.0'
-        },
-        pluginProps: {}
-      },
-      {
-        pluginKey: 'leftPanelIcon',
-        type: 'PanelIcon',
-        props: {
-          align: 'top',
-          title: 'panel',
-          icon: 'dengpao'
-        },
-        config: {
-          package: '@ali/iceluna-addon-2',
-          version: '^1.0.0'
-        },
-        pluginProps: {}
-      },
-      {
-        pluginKey: 'leftBalloonIcon',
-        type: 'BalloonIcon',
-        props: {
-          align: 'top',
-          title: 'balloon',
-          icon: 'dengpao'
-        },
-        config: {
-          package: '@ali/iceluna-addon-2',
-          version: '^1.0.0'
-        },
-        pluginProps: {}
-      },
-      {
-        pluginKey: 'leftPanelIcon2',
-        type: 'PanelIcon',
-        props: {
-          align: 'top',
-          title: 'panel2',
-          icon: 'dengpao',
-          panelProps: {
-            defaultWidth: 400,
-            floatable: true
-          }
-        },
-        config: {
-          package: '@ali/iceluna-addon-2',
-          version: '^1.0.0'
-        },
-        pluginProps: {}
-      },
-      {
-        pluginKey: 'leftDialogIcon',
-        type: 'DialogIcon',
-        props: {
-          align: 'bottom',
-          title: 'dialog',
-          icon: 'dengpao'
-        },
-        config: {
-          package: '@ali/iceluna-addon-2',
-          version: '^1.0.0'
-        },
-        pluginProps: {}
-      },
-      {
-        pluginKey: 'leftLinkIcon',
-        type: 'LinkIcon',
-        props: {
-          align: 'bottom',
-          title: 'link',
-          icon: 'dengpao',
-          linkProps: {
-            href: '//www.taobao.com',
-            target: 'blank'
-          }
-        },
-        config: {},
-        pluginProps: {}
-      },
-      {
-        pluginKey: 'leftIcon',
-        type: 'Icon',
-        props: {
-          align: 'bottom',
-          title: 'icon',
-          icon: 'dengpao',
-          onClick(editor) {
-            alert(`icon addon invoke, current activeKey: ${editor.activeKey}`);
-          }
-        },
-        config: {},
-        pluginProps: {}
-      }
-    ],
-    rightArea: [
-      {
-        pluginKey: 'settings',
-        type: 'Panel',
-        props: {},
-        config: {
-          version: '^1.0.0'
-        },
-        pluginProps: {}
-      },
-    ],
-    centerArea: [
-      {
-        pluginKey: 'designer',
-        config: {
-          package: '@ali/lowcode-plugin-designer',
-          version: '1.0.0'
-        }
-      }
-    ]
-  },
-  hooks: [],
-  shortCuts: [],
-  lifeCycles: {
-    init: function init(editor) {
-      const transformMaterial = componentList => {
-        return componentList.map(category => {
-          return {
-            name: category.title,
-            items: category.children.map(comp => {
-              return {
-                ...comp,
-                name: comp.componentName,
-                snippets: comp.snippets.map(snippet => {
-                  return {
-                    name: snippet.title,
-                    screenshot: snippet.screenshot,
-                    code: JSON.stringify(snippet.schema)
-                  };
-                })
-              };
-            })
-          };
-        });
-      };
-
-      const list = transformMaterial(assets.componentList);
-      console.log('++++', list);
-      editor.set({
-        componentsMap: assets.components,
-        componentMaterial: {
-          library: [
-            {
-              name: 'Fusion组件库',
-              id: '2'
-            }, {
-              name: '其他',
-              id: '3'
-            }
-          ],
-          list
-        }
-      });
-
-      editor.set('dndHelper', {
-        handleResourceDragStart: function(ev, tagName, schema) {
-          // 物料面板中组件snippet的dragStart回调
-          // ev: 原始的domEvent；tagName: 组件的描述文案；schema: snippet的schema
-          if (editor.designer) {
-            editor.designer.dragon.boost({
-              type: 'nodedata',
-              data: schema
-            }, ev.nativeEvent);
-          }
-        }
-      });
-    }
-  }
-};

packages/editor/src/index.d.ts

@@ -1,8 +0,0 @@
-interface Window {
-  sendIDEMessage?: (IDEMessageParams) => void;
-  goldlog?: {
-    record: (logKey: string, gmKey: string, goKey: string, method: 'GET' | 'POST') => void;
-  };
-  is_theia?: boolean;
-  vscode?: boolean;
-}

packages/editor/src/index.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-// import Skeleton from '@ali/lowcode-engine-skeleton';
-import { HashRouter as Router, Route } from 'react-router-dom';
-import Skeleton from './skeleton';
-import config from './config/skeleton';
-import components from './config/components';
-import utils from './config/utils';
-import constants from './config/constants';
-import './config/locale';
-import '../../plugin-setters';
-
-import './global.scss';
-import './config/theme.scss';
-
-const ICE_CONTAINER = document.getElementById('ice-container');
-
-if (!ICE_CONTAINER) {
-  throw new Error('当前页面不存在 <div id="ice-container"></div> 节点.');
-}
-
-ReactDOM.render(
-  <Router>
-    <Route
-      path="/*"
-      component={(props): React.ReactNode => (
-        <Skeleton
-          {...props}
-          {...(config.skeleton && config.skeleton.props)}
-          config={config}
-          utils={utils}
-          constants={constants}
-          components={components}
-        />
-      )}
-    />
-  </Router>,
-  ICE_CONTAINER
-);

packages/editor/src/plugins/undoRedo/index.tsx

@@ -1,72 +0,0 @@
-import React, { PureComponent } from 'react';
-import './index.scss';
-import { PluginProps } from '../../framework/definitions';
-import TopIcon from '../../skeleton/components/TopIcon/index';
-
-export interface IProps {
-  editor: any;
-  logo?: string;
-}
-
-export interface IState {
-  undoEnable: boolean;
-  redoEnable: boolean;
-}
-
-export default class UndoRedo extends PureComponent<IProps & PluginProps, IState> {
-  public static display = 'LowcodeUndoRedo';
-
-  private history: any;
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      undoEnable: false,
-      redoEnable: false
-    };
-    if (props.editor.designer) {
-      this.init();
-    } else {
-      props.editor.on('designer.ready', () => {
-        this.init();
-      });
-    }
-  }
-
-  init = (): void => {
-    const { editor } = this.props;
-
-    this.history = editor.designer?.currentHistory;
-    this.updateState(this.history?.getState() || 0);
-
-    editor.on('designer.history-change', (history): void => {
-      this.history = history;
-      this.updateState(this.history?.getState() || 0);
-    });
-  };
-
-  updateState = (state: number): void => {
-    this.setState({
-      undoEnable: !!(state & 1),
-      redoEnable: !!(state & 2)
-    });
-  };
-
-  handleUndoClick = (): void => {
-    this.history?.back();
-  };
-
-  handleRedoClick = (): void => {
-    this.history?.forward();
-  };
-
-  render(): React.ReactNode {
-    const { undoEnable, redoEnable } = this.state;
-    return (
-      <div className="lowcode-plugin-undo-redo">
-        <TopIcon icon="houtui" title="后退" disabled={!undoEnable} onClick={this.handleUndoClick} />
-        <TopIcon icon="qianjin" title="前进" disabled={!redoEnable} onClick={this.handleRedoClick} />
-      </div>
-    );
-  }
-}

packages/editor/src/skeleton/components/LeftPlugin/index.scss

@@ -1,54 +0,0 @@
-.lowcode-left-plugin {
-  font-size: 20px;
-  text-align: center;
-  line-height: 44px;
-  height: 44px;
-  position: relative;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  color: $color-text1-3;
-  &.locked {
-    color: red !important;
-  }
-  &:hover {
-    color: $color-brand1-6;
-    &:before {
-      content: attr(data-tooltip);
-      display: block;
-      position: absolute;
-      left: 50px;
-      top: 5px;
-      line-height: 18px;
-      font-size: 12px;
-      white-space: nowrap;
-      padding: 6px 8px;
-      border-radius: 4px;
-      background: $balloon-tooltip-color-bg;
-      color: $color-text1-3;
-      z-index: 100;
-    }
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      left: 40px;
-      top: 15px;
-      border: 5px solid transparent;
-      border-right: 5px solid $balloon-tooltip-color-bg;
-      z-index: 100;
-    }
-  }
-  &.active {
-    color: $color-brand1-9;
-    &.disabled {
-      color: $color-text1-1;
-    }
-    &:hover {
-      color: $color-brand1-6;
-    }
-  }
-  &.disabled {
-    cursor: not-allowed;
-    color: $color-text1-1;
-  }
-}

packages/editor/src/skeleton/components/LeftPlugin/index.tsx

@@ -1,210 +0,0 @@
-import React, { PureComponent, Fragment } from 'react';
-import classNames from 'classnames';
-import { Balloon, Dialog, Icon, Badge } from '@alifd/next';
-
-import './index.scss';
-import Editor from '../../../framework/editor';
-import { PluginConfig, PluginClass } from '../../../framework/definitions';
-
-export interface LeftPluginProps {
-  active?: boolean;
-  config: PluginConfig;
-  disabled?: boolean;
-  editor: Editor;
-  locked?: boolean;
-  marked?: boolean;
-  onClick?: () => void;
-  pluginClass: PluginClass;
-}
-
-export interface LeftPluginState {
-  dialogVisible: boolean;
-}
-
-export default class LeftPlugin extends PureComponent<LeftPluginProps, LeftPluginState> {
-  static displayName = 'LowcodeLeftPlugin';
-
-  static defaultProps = {
-    active: false,
-    config: {},
-    disabled: false,
-    marked: false,
-    locked: false,
-    onClick: (): void => {}
-  };
-
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      dialogVisible: false
-    };
-  }
-
-  componentDidMount(): void {
-    const { config, editor } = this.props;
-    const pluginKey = config && config.pluginKey;
-    if (editor && pluginKey) {
-      editor.on(`${pluginKey}.dialog.show`, this.handleShow);
-      editor.on(`${pluginKey}.dialog.close`, this.handleClose);
-    }
-  }
-
-  componentWillUnmount(): void {
-    const { config, editor } = this.props;
-    const pluginKey = config && config.pluginKey;
-    if (editor && pluginKey) {
-      editor.off(`${pluginKey}.dialog.show`, this.handleShow);
-      editor.off(`${pluginKey}.dialog.close`, this.handleClose);
-    }
-  }
-
-  handleClose = (): void => {
-    const { config, editor } = this.props;
-    const pluginKey = config && config.pluginKey;
-    const plugin = editor.plugins && editor.plugins[pluginKey];
-    if (plugin && plugin.close) {
-      plugin.close().then((): void => {
-        this.setState({
-          dialogVisible: false
-        });
-      });
-    }
-  };
-
-  handleOpen = (): void => {
-    // todo 对话框类型的插件初始时拿不到插件实例
-    this.setState({
-      dialogVisible: true
-    });
-  };
-
-  handleShow = (): void => {
-    const { disabled, config, onClick, editor } = this.props;
-    const pluginKey = config && config.pluginKey;
-    if (disabled || !pluginKey) return;
-    // 考虑到弹窗情况，延时发送消息
-    setTimeout((): void => editor.emit(`${pluginKey}.plugin.activate`), 0);
-    this.handleOpen();
-    if (onClick) {
-      onClick();
-    }
-  };
-
-  renderIcon = (clickCallback): React.ReactNode => {
-    const { active, disabled, marked, locked, onClick, config } = this.props;
-    const { pluginKey, props } = config || {};
-    const { icon, title } = props || {};
-    return (
-      <div
-        className={classNames('lowcode-left-plugin', pluginKey, {
-          active,
-          disabled,
-          locked
-        })}
-        data-tooltip={title}
-        onClick={(): void => {
-          if (disabled) return;
-          // 考虑到弹窗情况，延时发送消息
-          clickCallback && clickCallback();
-
-          onClick && onClick();
-        }}
-      >
-        {marked ? (
-          <Badge dot>
-            <Icon type={icon} size="small" />
-          </Badge>
-        ) : (
-          <Icon type={icon} size="small" />
-        )}
-      </div>
-    );
-  };
-
-  render(): React.ReactNode {
-    const { marked, locked, active, disabled, config, editor, pluginClass: Comp } = this.props;
-    const { pluginKey, props, type, pluginProps } = config || {};
-    const { onClick, title } = props || {};
-    const { dialogVisible } = this.state;
-    if (!pluginKey || !type || !props) return null;
-
-    const node =
-      (Comp && (
-        <Comp
-          editor={editor}
-          active={active}
-          locked={locked}
-          disabled={disabled}
-          config={config}
-          onClick={(): void => {
-            onClick && onClick.call(null, editor);
-          }}
-          {...pluginProps}
-        />
-      )) ||
-      null;
-
-    switch (type) {
-      case 'LinkIcon':
-        return (
-          <a {...(props.linkProps || {})}>
-            {this.renderIcon((): void => {
-              onClick && onClick.call(null, editor);
-            })}
-          </a>
-        );
-      case 'Icon':
-        return this.renderIcon((): void => {
-          onClick && onClick.call(null, editor);
-        });
-      case 'DialogIcon':
-        return (
-          <Fragment>
-            {this.renderIcon((): void => {
-              onClick && onClick.call(null, editor);
-              this.handleOpen();
-            })}
-            <Dialog
-              onOk={(): void => {
-                editor.emit(`${pluginKey}.dialog.onOk`);
-                this.handleClose();
-              }}
-              onCancel={this.handleClose}
-              onClose={this.handleClose}
-              title={title}
-              style={{
-                width: 500,
-                ...(props.dialogProps && props.dialogProps.style)
-              }}
-              {...(props.dialogProps || {})}
-              visible={dialogVisible}
-            >
-              {node}
-            </Dialog>
-          </Fragment>
-        );
-      case 'BalloonIcon':
-        return (
-          <Balloon
-            trigger={this.renderIcon((): void => {
-              onClick && onClick.call(null, editor);
-            })}
-            align="r"
-            triggerType={['click', 'hover']}
-            {...(props.balloonProps || {})}
-          >
-            {node}
-          </Balloon>
-        );
-      case 'PanelIcon':
-        return this.renderIcon((): void => {
-          onClick && onClick.call(null, editor);
-          this.handleOpen();
-        });
-      case 'Custom':
-        return marked ? <Badge dot>{node}</Badge> : node;
-      default:
-        return null;
-    }
-  }
-}

packages/editor/src/skeleton/components/Panel/index.tsx

@@ -1,60 +0,0 @@
-import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-
-import './index.scss';
-
-export interface PanelProps {
-  align: 'left' | 'right';
-  defaultWidth: number;
-  minWidth: number;
-  draggable: boolean;
-  floatable: boolean;
-  children: Plugin;
-  visible: boolean;
-}
-
-export interface PanelState {
-  width: number;
-}
-
-export default class Panel extends PureComponent<PanelProps, PanelState> {
-  static displayName = 'LowcodePanel';
-
-  static defaultProps = {
-    align: 'left',
-    defaultWidth: 240,
-    minWidth: 100,
-    draggable: true,
-    floatable: false,
-    visible: true
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      width: props.defaultWidth
-    };
-  }
-
-  render(): React.ReactNode {
-    const { align, draggable, floatable, visible } = this.props;
-    const { width } = this.state;
-    return (
-      <div
-        className={classNames('lowcode-panel', align, {
-          draggable,
-          floatable,
-          visible
-        })}
-        style={{
-          width,
-          display: visible ? '' : 'none'
-        }}
-      >
-        {this.props.children}
-        <div className="drag-area" />
-      </div>
-    );
-  }
-}

packages/editor/src/skeleton/components/TopIcon/index.scss

@@ -1,73 +0,0 @@
-.lowcode-top-icon {
-  display: inline-block;
-  width: 44px;
-  font-size: 20px;
-  line-height: 48px;
-  color: $color-text1-3;
-  position: relative;
-  &.disabled {
-    cursor: not-allowed;
-    color: $color-text1-1;
-    &:hover {
-      color: $color-text1-1;
-    }
-  }
-  &.active {
-    color: $color-brand1-9;
-    &:hover {
-      color: $color-brand1-6;
-    }
-  }
-  &.locked {
-    color: red !important;
-  }
-  &:hover {
-    color: $color-brand1-6;
-    &:before {
-      content: attr(data-tooltip);
-      display: block;
-      height: auto;
-      width: auto;
-      position: absolute;
-      left: 50%;
-      transform: translate(-50%, 0);
-      bottom: -35px;
-      line-height: 18px;
-      font-size: 12px;
-      white-space: nowrap;
-      padding: 6px 8px;
-      border-radius: 4px;
-      background: $balloon-tooltip-color-bg;
-      color: $color-text1-3;
-      z-index: 100;
-    }
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      left: 50%;
-      transform: translate(-50%, 0);
-      bottom: -5px;
-      border: 5px solid transparent;
-      border-bottom-color: $balloon-tooltip-color-bg;
-      opacity: 1;
-      visibility: visible;
-      z-index: 100;
-    }
-  }
-  i.next-icon {
-    &:before {
-      font-size: 16px;
-    }
-    margin-right: 0;
-    line-height: 18px;
-  }
-  span {
-    display: block;
-    margin: 0px -5px 0;
-    line-height: 16px;
-    text-align: center;
-    font-size: 12px;
-    transform: scale(0.8);
-  }
-}

packages/editor/src/skeleton/components/TopIcon/index.tsx

@@ -1,53 +0,0 @@
-import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-import { Icon } from '@alifd/next';
-
-import './index.scss';
-
-export interface TopIconProps {
-  active?: boolean;
-  className?: string;
-  disabled?: boolean;
-  icon: string;
-  id?: string;
-  locked?: boolean;
-  marked?: boolean;
-  onClick?: () => void;
-  style?: React.CSSProperties;
-  title?: string;
-}
-
-export default class TopIcon extends PureComponent<TopIconProps> {
-  static displayName = 'LowcodeTopIcon';
-
-  static defaultProps = {
-    active: false,
-    className: '',
-    disabled: false,
-    icon: '',
-    id: '',
-    locked: false,
-    onClick: (): void => {},
-    style: {},
-    title: ''
-  };
-
-  render(): React.ReactNode {
-    const { active, disabled, icon, locked, title, className, id, style, onClick } = this.props;
-    return (
-      <div
-        className={classNames('lowcode-top-icon', className, {
-          active,
-          disabled,
-          locked
-        })}
-        data-tooltip={title}
-        id={id}
-        style={style}
-        onClick={disabled ? undefined : onClick}
-      >
-        <Icon type={icon} />
-      </div>
-    );
-  }
-}