feat:编辑器框架代码整理

packages/designer/package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "dependencies": {
     "@ali/iceluna-sdk": "^1.0.5-beta.12",
-    "@ali/lowcode-editor-framework": "^0.0.1",
+    "@ali/lowcode-editor-core": "^0.0.1",
     "@recore/obx": "^1.0.8",
     "@recore/obx-react": "^1.0.7",
     "@types/medium-editor": "^5.0.3",

packages/editor-core/es/editor.d.ts

@@ -8,7 +8,7 @@ declare global {
     }
 }
 export interface HooksFuncs {
-    [idx: number]: (msg: string, handler: (...args: any[]) => void) => void;
+    [idx: number]: (msg: string, handler: (...args: []) => void) => void;
 }
 export default class Editor extends EventEmitter {
     static getInstance: (config: EditorConfig, components: PluginClassSet, utils?: Utils) => Editor;

packages/editor-core/es/editor.js

@@ -79,9 +79,6 @@ var Editor = /*#__PURE__*/function (_EventEmitter) {
     _this.components = components;
     _this.utils = _extends({}, editorUtils, {}, utils);
     instance = _assertThisInitialized(_this);
-
-    _this.init();
-
     return _this;
   }
 

packages/editor-core/es/request.d.ts

@@ -0,0 +1,6 @@
+import 'whatwg-fetch';
+export declare function serialize(obj: object): string;
+export declare function buildUrl(dataAPI: string, params: object): string;
+export declare function get(dataAPI: string, params?: object, headers?: object, otherProps?: object): Promise<any>;
+export declare function post(dataAPI: string, params?: object, headers?: object, otherProps?: object): Promise<any>;
+export declare function request(dataAPI: string, method?: string, data?: object | string, headers?: object, otherProps?: object): Promise<any>;

packages/editor-core/es/request.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/extends";
+import 'whatwg-fetch';
+import Debug from 'debug';
+var debug = Debug('request');
+export function serialize(obj) {
+  var rst = [];
+  Object.entries(obj || {}).forEach(function (_ref) {
+    var key = _ref[0],
+        val = _ref[1];
+    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, params) {
+  var paramStr = serialize(params);
+
+  if (paramStr) {
+    return dataAPI.indexOf('?') > 0 ? dataAPI + "&" + paramStr : dataAPI + "?" + paramStr;
+  }
+
+  return dataAPI;
+}
+export function get(dataAPI, params, headers, otherProps) {
+  var fetchHeaders = _extends({
+    Accept: 'application/json'
+  }, headers);
+
+  return request(buildUrl(dataAPI, params), 'GET', null, fetchHeaders, otherProps);
+}
+export function post(dataAPI, params, headers, otherProps) {
+  var fetchHeaders = _extends({
+    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, method, data, headers, otherProps) {
+  if (method === void 0) {
+    method = 'GET';
+  }
+
+  return new Promise(function (resolve, reject) {
+    if (otherProps && otherProps.timeout) {
+      setTimeout(function () {
+        reject(new Error('timeout'));
+      }, otherProps.timeout);
+    }
+
+    fetch(dataAPI, _extends({
+      method: method,
+      credentials: 'include',
+      headers: headers,
+      body: data
+    }, otherProps)).then(function (response) {
+      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(function (res) {
+            return {
+              __success: false,
+              code: response.status,
+              data: res
+            };
+          })["catch"](function () {
+            return {
+              __success: false,
+              code: response.status
+            };
+          });
+
+        default:
+          return null;
+      }
+    }).then(function (json) {
+      if (json && json.__success !== false) {
+        resolve(json);
+      } else {
+        delete json.__success;
+        reject(json);
+      }
+    })["catch"](function (err) {
+      debug(err);
+      reject(err);
+    });
+  });
+}

packages/editor-core/es/utils.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export { get, post, request } from './request';
 import Editor from './editor';
 import { EditorConfig, I18nFunction, I18nMessages, LocaleType, ShortCutsConfig } from './definitions';
 export declare const pick: any;
@@ -68,4 +69,3 @@ export declare function comboEditorConfig(defaultConfig: EditorConfig, customCon
  * @param {*} Comp 需要判断的组件
  */
 export declare function acceptsRef(Comp: React.ReactNode): boolean;
-export {};

packages/editor-core/es/utils.js

@@ -8,6 +8,7 @@ import _deepEqual from 'lodash/isEqualWith';
 import _pick from 'lodash/pick';
 import _throttle from 'lodash/throttle';
 import _serialize from 'serialize-javascript';
+export { get, post, request } from './request';
 export var pick = _pick;
 export var deepEqual = _deepEqual;
 export var clone = _clone;

packages/editor-core/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ali/lowcode-editor-framework",
+  "name": "@ali/lowcode-editor-core",
   "version": "0.0.1",
   "description": "alibaba lowcode editor core",
   "files": [
@@ -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.alibaba-inc.com/@ali/lowcode-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/editor.ts

@@ -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 {
@@ -95,7 +95,6 @@ export default class Editor extends EventEmitter {
     this.components = components;
     this.utils = { ...editorUtils, ...utils };
     instance = this;
-    this.init();
   }
 
   public init(): Promise<any> {

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';
 

packages/editor-skeleton/es/components/LeftPlugin/index.d.ts

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import Editor from '@ali/lowcode-editor-framework';
+import Editor from '@ali/lowcode-editor-core';
-import { PluginConfig, PluginClass } from '@ali/lowcode-editor-framework/lib/definitions';
+import { PluginConfig, PluginClass } from '@ali/lowcode-editor-core/lib/definitions';
 import './index.scss';
 export interface LeftPluginProps {
     active?: boolean;

packages/editor-skeleton/es/components/TopPlugin/index.d.ts

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import Editor from '@ali/lowcode-editor-framework';
+import Editor from '@ali/lowcode-editor-core';
-import { PluginConfig, PluginClass } from '@ali/lowcode-editor-framework/lib/definitions';
+import { PluginConfig, PluginClass } from '@ali/lowcode-editor-core/lib/definitions';
 import './index.scss';
 export interface TopPluginProps {
     active?: boolean;

packages/editor-skeleton/es/layouts/CenterArea/index.d.ts

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import Editor from '@ali/lowcode-editor-framework';
+import Editor from '@ali/lowcode-editor-core';
 import './index.scss';
 export interface CenterAreaProps {
     editor: Editor;

packages/editor-skeleton/es/layouts/CenterArea/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
-import { AreaManager } from '@ali/lowcode-editor-framework';
+import { AreaManager } from '@ali/lowcode-editor-core';
 import './index.scss';
 
 var CenterArea = /*#__PURE__*/function (_PureComponent) {

packages/editor-skeleton/es/layouts/LeftArea/nav.d.ts

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
-import Editor from '@ali/lowcode-editor-framework';
+import Editor from '@ali/lowcode-editor-core';
-import { PluginConfig } from '@ali/lowcode-editor-framework/lib/definitions';
 import './index.scss';
 export interface LeftAreaNavProps {
     editor: Editor;
@@ -17,8 +16,8 @@ export default class LeftAreaNav extends PureComponent<LeftAreaNavProps, LeftAre
     componentWillUnmount(): void;
     handleSkeletonUpdate: () => void;
     handlePluginChange: (key: string) => void;
-    handlePluginClick: (item: PluginConfig) => void;
+    handlePluginClick: (item: any) => void;
     updateActiveKey: (key: string) => void;
-    renderPluginList: (list?: PluginConfig[]) => any[];
+    renderPluginList: (list?: any[]) => any[];
     render(): React.ReactNode;
 }

packages/editor-skeleton/es/layouts/LeftArea/nav.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import LeftPlugin from '../../components/LeftPlugin';
-import { utils, AreaManager } from '@ali/lowcode-editor-framework';
+import { utils, AreaManager } from '@ali/lowcode-editor-core';
 import './index.scss';
 var isEmpty = utils.isEmpty;
 

packages/editor-skeleton/es/layouts/LeftArea/panel.d.ts

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import Editor from '@ali/lowcode-editor-framework';
+import Editor from '@ali/lowcode-editor-core';
 import './index.scss';
 export interface LeftAreaPanelProps {
     editor: Editor;

packages/editor-skeleton/es/layouts/LeftArea/panel.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent, Fragment } from 'react';
-import { AreaManager } from '@ali/lowcode-editor-framework';
+import { AreaManager } from '@ali/lowcode-editor-core';
 import Panel from '../../components/Panel';
 import './index.scss';
 

packages/editor-skeleton/es/layouts/RightArea/index.d.ts

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
-import Editor from '@ali/lowcode-editor-framework';
+import Editor from '@ali/lowcode-editor-core';
-import { PluginConfig } from '@ali/lowcode-editor-framework/lib/definitions';
 import './index.scss';
 export interface RightAreaProps {
     editor: Editor;
@@ -17,8 +16,8 @@ export default class RightArea extends PureComponent<RightAreaProps, RightAreaSt
     componentWillUnmount(): void;
     handleSkeletonUpdate: () => void;
     handlePluginChange: (key: string, isinit?: boolean) => void;
-    renderTabTitle: (config: PluginConfig) => any;
+    renderTabTitle: (config: any) => any;
-    renderTabPanels: (list: PluginConfig[], height: string) => any;
+    renderTabPanels: (list: any[], height: string) => any;
-    renderPanels: (list: PluginConfig[], height: string) => any;
+    renderPanels: (list: any[], height: string) => any;
     render(): React.ReactNode;
 }

packages/editor-skeleton/es/layouts/RightArea/index.js

@@ -5,7 +5,7 @@ import _Icon from "@alifd/next/es/icon";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
-import { AreaManager, utils } from '@ali/lowcode-editor-framework';
+import { AreaManager, utils } from '@ali/lowcode-editor-core';
 import './index.scss';
 var isEmpty = utils.isEmpty;
 

packages/editor-skeleton/es/layouts/TopArea/index.d.ts

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
-import Editor from '@ali/lowcode-editor-framework';
+import Editor from '@ali/lowcode-editor-core';
-import { PluginConfig } from '@ali/lowcode-editor-framework/lib/definitions';
 import './index.scss';
 export interface TopAreaProps {
     editor: Editor;
@@ -13,6 +12,6 @@ export default class TopArea extends PureComponent<TopAreaProps> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     handleSkeletonUpdate: () => void;
-    renderPluginList: (list?: PluginConfig[]) => any[];
+    renderPluginList: (list?: any[]) => any[];
     render(): React.ReactNode;
 }

packages/editor-skeleton/es/layouts/TopArea/index.js

@@ -1,7 +1,7 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import _Grid from "@alifd/next/es/grid";
 import React, { PureComponent } from 'react';
-import { AreaManager } from '@ali/lowcode-editor-framework';
+import { AreaManager } from '@ali/lowcode-editor-core';
 import TopPlugin from '../../components/TopPlugin';
 import './index.scss';
 var Row = _Grid.Row,

packages/editor-skeleton/es/skeleton.d.ts

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import Editor from '@ali/lowcode-editor-framework';
+import Editor from '@ali/lowcode-editor-core';
-import { EditorConfig, Utils, PluginClassSet } from '@ali/lowcode-editor-framework/lib/definitions';
+import { EditorConfig, Utils, PluginClassSet } from '@ali/lowcode-editor-core/lib/definitions';
 import './global.scss';
 declare global {
     interface Window {

packages/editor-skeleton/es/skeleton.js

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import { HashRouter as Router, Route } from 'react-router-dom';
-import Editor, { utils } from '@ali/lowcode-editor-framework';
+import Editor, { utils } from '@ali/lowcode-editor-core';
 import defaultConfig from './config/skeleton';
 import skeletonUtils from './config/utils';
 import TopArea from './layouts/TopArea';
@@ -68,8 +68,7 @@ export var Skeleton = /*#__PURE__*/function (_PureComponent) {
           skeletonKey: isReset ? "skeleton" + ++renderIdx : _this.state.skeletonKey
         }, function () {
           editor.emit('editor.ready');
-          editor.emit('ide.ready');
+          isReset && editor.emit('editor.afterReset');
-          isReset && editor.emit('ide.afterReset');
         });
       });
     };

packages/editor-skeleton/es/style.js

@@ -1,6 +1,5 @@
 import '@alifd/next/es/config-provider/style';
 import '@alifd/next/es/loading/style';
-import '@ali/lowcode-editor-framework/es/style';
 import '@alifd/next/es/grid/style';
 import '@alifd/next/es/balloon/style';
 import '@alifd/next/es/dialog/style';

packages/editor-skeleton/package.json

@@ -24,7 +24,7 @@
   ],
   "author": "xiayang.xy",
   "dependencies": {
-    "@ali/lowcode-editor-framework": "0.0.1",
+    "@ali/lowcode-editor-core": "0.0.1",
     "@alifd/next": "^1.x",
     "prop-types": "^15.5.8",
     "react": "^16.8.1",

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

@@ -1,11 +1,11 @@
 import React, { PureComponent, Fragment } from 'react';
 import classNames from 'classnames';
 import { Balloon, Dialog, Icon, Badge } from '@alifd/next';
-import Editor from '@ali/lowcode-editor-framework';
+import Editor from '@ali/lowcode-editor-core';
 import {
   PluginConfig,
   PluginClass,
-} from '@ali/lowcode-editor-framework/lib/definitions';
+} from '@ali/lowcode-editor-core/lib/definitions';
 import './index.scss';
 
 export interface LeftPluginProps {

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

@@ -1,11 +1,11 @@
 import React, { PureComponent, Fragment } from 'react';
 
 import { Balloon, Badge, Dialog } from '@alifd/next';
-import Editor from '@ali/lowcode-editor-framework';
+import Editor from '@ali/lowcode-editor-core';
 import {
   PluginConfig,
   PluginClass,
-} from '@ali/lowcode-editor-framework/lib/definitions';
+} from '@ali/lowcode-editor-core/lib/definitions';
 import TopIcon from '../TopIcon';
 
 import './index.scss';

packages/editor-skeleton/src/index.ts

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

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

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import Editor, { AreaManager } from '@ali/lowcode-editor-framework';
+import Editor, { AreaManager } from '@ali/lowcode-editor-core';
 import './index.scss';
 
 export interface CenterAreaProps {

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

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import LeftPlugin from '../../components/LeftPlugin';
-import Editor, { utils, AreaManager } from '@ali/lowcode-editor-framework';
+import Editor, { utils, AreaManager } from '@ali/lowcode-editor-core';
-import { PluginConfig } from '@ali/lowcode-editor-framework/lib/definitions';
+import { PluginConfig } from '@ali/lowcode-editor-core/lib/definitions';
 
 import './index.scss';
 

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

@@ -1,5 +1,5 @@
 import React, { PureComponent, Fragment } from 'react';
-import Editor, { AreaManager } from '@ali/lowcode-editor-framework';
+import Editor, { AreaManager } from '@ali/lowcode-editor-core';
 import Panel from '../../components/Panel';
 
 import './index.scss';

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

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import { Tab, Badge, Icon } from '@alifd/next';
 import classNames from 'classnames';
-import Editor, { AreaManager, utils } from '@ali/lowcode-editor-framework';
+import Editor, { AreaManager, utils } from '@ali/lowcode-editor-core';
-import { PluginConfig } from '@ali/lowcode-editor-framework/lib/definitions';
+import { PluginConfig } from '@ali/lowcode-editor-core/lib/definitions';
 import './index.scss';
 
 const { isEmpty } = utils;

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

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Grid } from '@alifd/next';
-import Editor, { AreaManager } from '@ali/lowcode-editor-framework';
+import Editor, { AreaManager } from '@ali/lowcode-editor-core';
-import { PluginConfig } from '@ali/lowcode-editor-framework/lib/definitions';
+import { PluginConfig } from '@ali/lowcode-editor-core/lib/definitions';
 import TopPlugin from '../../components/TopPlugin';
 import './index.scss';
 

packages/editor-skeleton/src/skeleton.tsx

@@ -2,12 +2,12 @@ import React, { PureComponent } from 'react';
 
 import { Loading, ConfigProvider } from '@alifd/next';
 import { HashRouter as Router, Route } from 'react-router-dom';
-import Editor, { utils } from '@ali/lowcode-editor-framework';
+import Editor, { utils } from '@ali/lowcode-editor-core';
 import {
   EditorConfig,
   Utils,
   PluginClassSet,
-} from '@ali/lowcode-editor-framework/lib/definitions';
+} from '@ali/lowcode-editor-core/lib/definitions';
 import defaultConfig from './config/skeleton';
 import skeletonUtils from './config/utils';
 
@@ -113,8 +113,7 @@ export class Skeleton extends PureComponent<SkeletonProps, SkeletonState> {
         },
         (): void => {
           editor.emit('editor.ready');
-          editor.emit('ide.ready');
+          isReset && editor.emit('editor.afterReset');
-          isReset && editor.emit('ide.afterReset');
         },
       );
     });

packages/editor/package.json

@@ -3,16 +3,14 @@
   "version": "0.0.1",
   "description": "低代码编辑器",
   "dependencies": {
-    "@ali/lowcode-editor-framework": "0.0.1",
+    "@ali/lowcode-editor-core": "0.0.1",
     "@ali/lowcode-editor-skeleton": "0.0.1",
     "@ali/lowcode-plugin-logo": "0.0.1",
     "@ali/lowcode-plugin-undo-redo": "0.0.1",
     "@ali/lowcode-plugin-save": "0.0.1",
-    "@ali/iceluna-addon-2": "^1.0.3",
+    "@ali/lowcode-plugin-designer": "0.0.1",
-    "@ali/iceluna-addon-component-list": "^1.0.11",
+    "@ali/lowcode-plugin-components-pane": "^1.0.11",
-    "@ali/iceluna-sdk": "^1.0.5-beta.26",
     "@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/editor/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/editor/src/config/assets.js

@@ -1250,7 +1250,7 @@ export default {
           {
             name: 'value',
             title: '受控值',
-            setter: 'StringSetter',
+            setter: 'StringSetter'
           },
           {
             name: 'hasBorder',
@@ -1447,25 +1447,30 @@ export default {
                       componentName: 'ObjectSetter',
                       props: {
                         config: {
-                          items: [{
+                          items: [
+                            {
                               name: 'username',
                               title: '姓名',
                               setter: 'StringSetter',
-                            important: true,
+                              important: true
-                          }, {
+                            },
+                            {
                               name: 'phone',
                               title: '电话',
                               setter: 'StringSetter',
-                            important: true,
+                              important: true
-                          }, {
+                            },
+                            {
                               name: 'age',
                               title: '年龄',
                               setter: 'NumberSetter'
-                          }, {
+                            },
+                            {
                               name: 'married',
                               title: '婚否',
                               setter: 'BoolSetter'
-                          }, {
+                            },
+                            {
                               type: 'group',
                               title: 'work',
                               items: [
@@ -1475,16 +1480,20 @@ export default {
                                   setter: {
                                     componentName: 'SelectSetter',
                                     props: {
-                                    dataSource: [{
+                                      dataSource: [
+                                        {
                                           label: '工程师',
                                           value: 1
-                                    }, {
+                                        },
+                                        {
                                           label: '高级工程师',
                                           value: 2
-                                    }, {
+                                        },
+                                        {
                                           label: '资深工程师',
                                           value: 3
-                                    }]
+                                        }
+                                      ]
                                     }
                                   }
                                 },
@@ -1494,10 +1503,11 @@ export default {
                                   setter: 'TextAreaSetter'
                                 }
                               ]
-                          }],
+                            }
+                          ]
                         }
                       },
-                      initialValue: {},
+                      initialValue: {}
                     }
                   }
                 }
@@ -1512,22 +1522,26 @@ export default {
                       componentName: 'ObjectSetter',
                       props: {
                         config: {
-                          items: [{
+                          items: [
+                            {
                               name: 'username',
                               title: '姓名',
                               setter: 'StringSetter',
-                            important: true,
+                              important: true
-                          }, {
+                            },
+                            {
                               name: 'age',
                               title: '年龄',
                               setter: 'NumberSetter',
-                            important: true,
+                              important: true
-                          }, {
+                            },
+                            {
                               name: 'married',
                               title: '婚否',
                               setter: 'BoolSetter',
-                            important: true,
+                              important: true
-                          }, {
+                            },
+                            {
                               name: 'log',
                               title: '到访记录',
                               setter: {
@@ -1536,8 +1550,9 @@ export default {
                                   itemSetter: 'StringSetter'
                                 }
                               },
-                            important: true,
+                              important: true
-                          }, {
+                            },
+                            {
                               type: 'group',
                               title: 'work',
                               items: [
@@ -1547,16 +1562,20 @@ export default {
                                   setter: {
                                     componentName: 'SelectSetter',
                                     props: {
-                                    dataSource: [{
+                                      dataSource: [
+                                        {
                                           label: '工程师',
                                           value: 1
-                                    }, {
+                                        },
+                                        {
                                           label: '高级工程师',
                                           value: 2
-                                    }, {
+                                        },
+                                        {
                                           label: '资深工程师',
                                           value: 3
-                                    }]
+                                        }
+                                      ]
                                     }
                                   }
                                 },
@@ -1566,18 +1585,19 @@ export default {
                                   setter: 'TextAreaSetter'
                                 }
                               ]
-                          }],
+                            }
+                          ]
                         }
                       },
-                      initialValue: {},
+                      initialValue: {}
                     },
                     mode: 'popup'
                   }
                 }
-              },
+              }
             ],
             extraProps: {
-              defaultCollapsed: false,
+              defaultCollapsed: false
             }
           },
           {
@@ -1591,22 +1611,26 @@ export default {
                   componentName: 'ObjectSetter',
                   props: {
                     config: {
-                      items: [{
+                      items: [
+                        {
                           name: 'username',
                           title: '姓名',
                           setter: 'StringSetter',
-                        important: true,
+                          important: true
-                      }, {
+                        },
+                        {
                           name: 'age',
                           title: '年龄',
                           setter: 'NumberSetter',
-                        important: true,
+                          important: true
-                      }, {
+                        },
+                        {
                           name: 'married',
                           title: '婚否',
                           setter: 'BoolSetter',
-                        important: true,
+                          important: true
-                      }, {
+                        },
+                        {
                           name: 'log',
                           title: '到访记录',
                           setter: {
@@ -1615,8 +1639,9 @@ export default {
                               itemSetter: 'StringSetter'
                             }
                           },
-                        important: true,
+                          important: true
-                      }, {
+                        },
+                        {
                           type: 'group',
                           title: 'work',
                           items: [
@@ -1626,16 +1651,20 @@ export default {
                               setter: {
                                 componentName: 'SelectSetter',
                                 props: {
-                                dataSource: [{
+                                  dataSource: [
+                                    {
                                       label: '工程师',
                                       value: 1
-                                }, {
+                                    },
+                                    {
                                       label: '高级工程师',
                                       value: 2
-                                }, {
+                                    },
+                                    {
                                       label: '资深工程师',
                                       value: 3
-                                }]
+                                    }
+                                  ]
                                 }
                               }
                             },
@@ -1645,10 +1674,11 @@ export default {
                               setter: 'TextAreaSetter'
                             }
                           ]
-                      }],
+                        }
+                      ]
                     }
                   },
-                  initialValue: {},
+                  initialValue: {}
                 }
               },
               {
@@ -1659,22 +1689,26 @@ export default {
                   props: {
                     mode: 'popup',
                     config: {
-                      items: [{
+                      items: [
+                        {
                           name: 'username',
                           title: '姓名',
                           setter: 'StringSetter',
-                        important: true,
+                          important: true
-                      }, {
+                        },
+                        {
                           name: 'age',
                           title: '年龄',
                           setter: 'NumberSetter',
-                        important: true,
+                          important: true
-                      }, {
+                        },
+                        {
                           name: 'married',
                           title: '婚否',
                           setter: 'BoolSetter',
-                        important: true,
+                          important: true
-                      }, {
+                        },
+                        {
                           name: 'log',
                           title: '到访记录',
                           setter: {
@@ -1683,8 +1717,9 @@ export default {
                               itemSetter: 'StringSetter'
                             }
                           },
-                        important: true,
+                          important: true
-                      }, {
+                        },
+                        {
                           type: 'group',
                           title: 'work',
                           items: [
@@ -1694,16 +1729,20 @@ export default {
                               setter: {
                                 componentName: 'SelectSetter',
                                 props: {
-                                dataSource: [{
+                                  dataSource: [
+                                    {
                                       label: '工程师',
                                       value: 1
-                                }, {
+                                    },
+                                    {
                                       label: '高级工程师',
                                       value: 2
-                                }, {
+                                    },
+                                    {
                                       label: '资深工程师',
                                       value: 3
-                                }]
+                                    }
+                                  ]
                                 }
                               }
                             },
@@ -1713,10 +1752,11 @@ export default {
                               setter: 'TextAreaSetter'
                             }
                           ]
-                      }],
+                        }
+                      ]
                     }
                   },
-                  initialValue: {},
+                  initialValue: {}
                 }
               }
             ]

packages/editor/src/config/components.js

@@ -8,14 +8,14 @@ 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 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 {PluginFactory} from '@ali/lowcode-editor-framework';
+import { PluginFactory } from '@ali/lowcode-editor-core';
 
 export default {
   logo: PluginFactory(logo),
@@ -33,5 +33,5 @@ export default {
   rightPanel2: PluginFactory(rightPanel2),
   rightPanel3: PluginFactory(rightPanel3),
   rightPanel4: PluginFactory(rightPanel4),
-  componentList: PluginFactory(componentList)
+  componentsPane: PluginFactory(componentsPane)
 };

packages/editor/src/config/skeleton.js

@@ -1,5 +1,3 @@
-import assets from './assets';
-
 export default {
   version: '^1.0.2',
   theme: {
@@ -31,73 +29,6 @@ export default {
           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',
@@ -132,7 +63,7 @@ export default {
     ],
     leftArea: [
       {
-        pluginKey: 'componentList',
+        pluginKey: 'componentsPane',
         type: 'PanelIcon',
         props: {
           align: 'top',
@@ -140,101 +71,12 @@ export default {
           title: '组件库'
         },
         config: {
-          package: '@ali/iceluna-addon-component-list',
+          package: '@ali/iceluna-plugin-components-pane',
           version: '^1.0.4'
         },
         pluginProps: {
           disableAppComponent: true
         }
-      },
-      {
-        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: [
@@ -243,55 +85,11 @@ export default {
         type: 'Panel',
         props: {},
         config: {
+          package: '@ali/lowcode-plugin-settings-pane',
           version: '^1.0.0'
         },
         pluginProps: {}
       }
-      // {
-      //   pluginKey: 'rightPanel1',
-      //   type: 'TabPanel',
-      //   props: {
-      //     title: '样式'
-      //   },
-      //   config: {
-      //     version: '^1.0.0'
-      //   },
-      //   pluginProps: {}
-      // },
-      // {
-      //   pluginKey: 'rightPanel2',
-      //   type: 'TabPanel',
-      //   props: {
-      //     title: '属性',
-      //     icon: 'dengpao'
-      //   },
-      //   config: {
-      //     version: '^1.0.0'
-      //   },
-      //   pluginProps: {}
-      // },
-      // {
-      //   pluginKey: 'rightPanel3',
-      //   type: 'TabPanel',
-      //   props: {
-      //     title: '事件'
-      //   },
-      //   config: {
-      //     version: '^1.0.0'
-      //   },
-      //   pluginProps: {}
-      // },
-      // {
-      //   pluginKey: 'rightPanel4',
-      //   type: 'TabPanel',
-      //   props: {
-      //     title: '数据'
-      //   },
-      //   config: {
-      //     version: '^1.0.0'
-      //   },
-      //   pluginProps: {}
-      // }
     ],
     centerArea: [
       {
@@ -306,57 +104,15 @@ export default {
   hooks: [],
   shortCuts: [],
   lifeCycles: {
-    init: function init(editor) {
+    init: async function init(editor) {
-      const transformMaterial = componentList => {
+      const assets = await editor.utils.get('/assets.json');
-        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,
+        assets,
-        componentMaterial: {
+        componentsMap: assets.components
-          library: [
-            {
-              name: 'Fusion组件库',
-              id: '2'
-            }, {
-              name: '其他',
-              id: '3'
-            }
-          ],
-          list
-        }
       });
 
-      editor.set('dndHelper', {
+      editor.utils.get('/schema.json').then(res => {
-        handleResourceDragStart: function(ev, tagName, schema) {
+        editor.emit('schema.reset', res);
-          // 物料面板中组件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.tsx

@@ -16,6 +16,4 @@ if (!ICE_CONTAINER) {
   throw new Error('当前页面不存在 <div id="ice-container"></div> 节点.');
 }
 
-ReactDOM.render(<Skeleton config={config} utils={utils} components={components}/>,
+ReactDOM.render(<Skeleton config={config} utils={utils} components={components} />, ICE_CONTAINER);
-  ICE_CONTAINER
-);

packages/editor/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 {
@@ -157,23 +155,46 @@ 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}
         className="lowcode-plugin-designer"
         defaultSchema={SCHEMA as any}
         eventPipe={editor as any}
-        componentsDescription={Object.values(assets.components) as any}
+        componentsDescription={Object.values(assets.components || {}) as any}
         simulatorProps={{
-          library: Object.values(assets.packages),
+          library: Object.values(assets.packages || {})
         }}
       />
     );

packages/material-parser/package.json

@@ -42,7 +42,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ali/lowcode-editor-framework": "^0.0.1",
+    "@ali/lowcode-editor-core": "^0.0.1",
     "@babel/generator": "^7.8.4",
     "@babel/parser": "^7.8.4",
     "@babel/traverse": "^7.8.4",

packages/plugin-component-pane/src/index.tsx

@@ -0,0 +1,24 @@
+import React, {PureComponent} from '../node_modules/_@types_react@16.9.25@@types/react';
+import {
+  Search,
+  Select
+} from '../node_modules/_@alifd_next@1.19.19@@alifd/next/types';
+import './index.scss';
+import ComponentList from '../node_modules/_@ali_iceluna-addon-component-list@1.0.12@@ali/iceluna-addon-component-list/lib';
+import { PluginProps } from './node_modules/@ali/lowcode-editor-core/lib/definitions';
+
+export default class ComponentListPlugin extends PureComponent<PluginProps> {
+  static displayName = 'LowcodeComponentListPlugin';
+
+
+
+  render(): React.ReactNode {
+    return (
+      <div className="lowcode-component-list">
+        
+      </div>
+    )
+  }
+
+
+}

packages/plugin-components-pane/.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

packages/plugin-components-pane/.eslintignore

@@ -0,0 +1,11 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/
+
+# 忽略文件
+**/*-min.js
+**/*.min.js

packages/plugin-components-pane/.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/plugin-components-pane/.gitignore

@@ -0,0 +1,20 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# production
+/build
+/dist
+
+# misc
+.idea/
+.happypack
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# ignore d.ts auto generated by css-modules-typescript-loader
+*.module.scss.d.ts

packages/plugin-components-pane/.stylelintignore

@@ -0,0 +1,7 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/

packages/plugin-components-pane/.stylelintrc.js

@@ -0,0 +1,3 @@
+const { stylelint } = require('@ice/spec');
+
+module.exports = stylelint;

packages/plugin-components-pane/README.md

@@ -0,0 +1 @@
+## todo

packages/plugin-components-pane/abc.json

@@ -0,0 +1,4 @@
+{
+  "type": "ice-scripts",
+  "builder": "@ali/builder-ice-scripts"
+}

packages/plugin-components-pane/build.json

@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "build-plugin-component",
+    "build-plugin-fusion",
+    ["build-plugin-moment-locales", {
+      "locales": ["zh-cn"]
+    }]
+  ]
+}

packages/plugin-components-pane/demo/usage.md

@@ -0,0 +1,24 @@
+---
+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/plugin-components-pane/es/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.scss';
+import { PluginProps } from '@ali/lowcode-editor-core/lib/definitions';
+export interface IProps {
+    logo?: string;
+    href?: string;
+}
+declare const Logo: React.FC<IProps & PluginProps>;
+export default Logo;

packages/plugin-components-pane/es/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './index.scss';
+
+var Logo = function Logo(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "lowcode-plugin-logo"
+  }, /*#__PURE__*/React.createElement("a", {
+    className: "logo",
+    target: "blank",
+    href: props.href || '/',
+    style: {
+      backgroundImage: "url(" + props.logo + ")"
+    }
+  }));
+};
+
+export default Logo;

packages/plugin-components-pane/es/index.scss

@@ -0,0 +1,13 @@
+.lowcode-plugin-logo {
+  padding: 14px 8px;
+  padding-left: 8px;
+  .logo {
+    display: block;
+    width: 56px;
+    height: 20px;
+    cursor: pointer;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+}

packages/plugin-components-pane/es/style.js

@@ -0,0 +1 @@
+import './index.scss';

packages/plugin-components-pane/jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "react",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

packages/plugin-components-pane/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@ali/lowcode-plugin-components-pane",
+  "version": "0.0.1",
+  "description": "alibaba lowcode editor component-list plugin",
+  "files": [
+    "demo/",
+    "es/",
+    "lib/",
+    "build/"
+  ],
+  "main": "lib/index.tsx",
+  "module": "es/index.js",
+  "stylePath": "style.js",
+  "scripts": {
+    "start": "build-scripts start",
+    "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}\" "
+  },
+  "keywords": [
+    "lowcode",
+    "editor"
+  ],
+  "author": "xiayang.xy",
+  "dependencies": {
+    "@ali/iceluna-addon-component-list": "^1.0.11",
+    "@ali/iceluna-comp-material-show": "^1.0.10",
+    "@alifd/next": "^1.19.19",
+    "prop-types": "^15.5.8",
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1",
+    "react-router-dom": "^5.1.2"
+  },
+  "peerDependencies": {
+    "@ali/lowcode-editor-core": "0.0.1"
+  },
+  "devDependencies": {
+    "@alib/build-scripts": "^0.1.3",
+    "@alifd/next": "1.x",
+    "@ice/spec": "^0.1.1",
+    "@types/lodash": "^4.14.149",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
+    "build-plugin-component": "^0.2.7-1",
+    "build-plugin-fusion": "^0.1.0",
+    "build-plugin-moment-locales": "^0.1.0",
+    "eslint": "^6.0.1",
+    "prettier": "^1.19.1",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ice-lab/react-materials/tree/master/scaffolds/ice-ts"
+  },
+  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-engine-skeleton@0.0.1/build/index.html"
+}

packages/plugin-components-pane/src/index.scss

@@ -0,0 +1,25 @@
+.lowcode-component-list {
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  .title {
+    height: 40px;
+    line-height: 39px;
+    border-bottom: 1px solid $color-line1-1;
+    padding: 0 8px;
+    position: relative;
+  }
+  .search {
+    display: block;
+    width: auto;
+    margin: 8px 8px 0;
+  }
+  .select {
+    display: block;
+    margin: 8px 8px 4px;
+  }
+  .components-show {
+    flex: 1 1 0%;
+    overflow: hidden;
+  }
+}

packages/plugin-components-pane/src/index.tsx

@@ -0,0 +1,189 @@
+import React, { PureComponent } from 'react';
+import { Icon, Search, Select } from '@alifd/next';
+import MaterialShow from '@ali/iceluna-comp-material-show';
+import { PluginProps } from '@ali/lowcode-editor-core/lib/definitions';
+
+import './index.scss';
+
+export interface LibrayInfo {
+  label: string;
+  value: string;
+}
+
+export interface IState {
+  loading: boolean;
+  libs: LibrayInfo[];
+  searchKey: string;
+  currentLib: string;
+  componentList: object[];
+}
+
+export default class ComponentListPlugin extends PureComponent<
+  PluginProps,
+  IState
+> {
+  static displayName = 'LowcodeComponentListPlugin';
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      libs: [
+        {
+          label: '全部',
+          value: 'all',
+        },
+      ],
+      searchKey: '',
+      currentLib: 'all',
+      componentList: [],
+    };
+  }
+
+  componentDidMount(): void {
+    const { editor } = this.props;
+    if (editor.assets) {
+      this.initComponentList();
+    } else {
+      editor.once('editor.ready', this.initComponentList);
+    }
+  }
+
+  transformMaterial = (componentList): any => {
+    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),
+              };
+            }),
+          };
+        }),
+      };
+    });
+  };
+
+  initComponentList = (): void => {
+    const { editor } = this.props;
+    const assets = editor.assets || {};
+    const list: string[] = [];
+    const libs: LibrayInfo[] = [];
+    Object.values(assets.packages).forEach((item): void => {
+      list.push(item.library);
+      libs.push({
+        label: item.title,
+        value: item.library,
+      });
+    });
+
+    if (list.length > 1) {
+      libs.unshift({
+        label: '全部',
+        value: list.join(','),
+      });
+    }
+
+    const componentList = this.transformMaterial(assets.componentList);
+
+    this.setState({
+      libs,
+      componentList,
+      currentLib: libs[0] && libs[0].value,
+    });
+
+    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,
+          );
+        }
+      },
+    });
+  };
+
+  searchAction = (value: string): void => {
+    this.setState({
+      searchKey: value,
+    });
+  };
+
+  filterMaterial = (): any => {
+    const { searchKey, currentLib, componentList } = this.state;
+    const libs = currentLib.split(',');
+    return (componentList || [])
+      .map(cate => {
+        return {
+          ...cate,
+          items: (cate.items || []).filter(item => {
+            let libFlag = libs.some(lib => lib == item.library);
+
+            let keyFlag = true;
+            if (searchKey) {
+              keyFlag =
+                `${item.name || ''} ${item.title || ''}`
+                  .toLowerCase()
+                  .indexOf(searchKey.trim().toLowerCase()) >= 0;
+            } else {
+              keyFlag = item.is_show === undefined || !!(item.is_show == 1);
+            }
+            return libFlag && keyFlag;
+          }),
+        };
+      })
+      .filter(cate => {
+        return cate.items && cate.items.length > 0;
+      });
+  };
+
+  render(): React.ReactNode {
+    const { libs, loading, currentLib } = this.state;
+    return (
+      <div className="lowcode-component-list">
+        <div className="title">
+          <Icon type="jihe" size="small" />
+          <span>组件库</span>
+        </div>
+        <Search
+          shape="simple"
+          size="small"
+          className="search"
+          placeholder="请输入关键词"
+          onChange={this.searchAction}
+          onSearch={this.searchAction}
+          hasClear
+        />
+        <Select
+          size="small"
+          className="select"
+          dataSource={libs}
+          value={currentLib}
+          onChange={(value): void => {
+            this.setState({
+              currentLib: value,
+            });
+          }}
+        />
+        <MaterialShow
+          className="components-show"
+          loading={loading}
+          type="component"
+          dataSource={this.filterMaterial()}
+        />
+      </div>
+    );
+  }
+}

packages/plugin-components-pane/tests/index.js

@@ -0,0 +1 @@
+// test file

packages/plugin-components-pane/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "noUnusedLocals": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/*.ts", "src/*.tsx"],
+  "exclude": ["node_modules", "build", "public"]
+}

packages/plugin-designer/.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

packages/plugin-designer/.eslintignore

@@ -0,0 +1,11 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/
+
+# 忽略文件
+**/*-min.js
+**/*.min.js

packages/plugin-designer/.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/plugin-designer/.gitignore

@@ -0,0 +1,20 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# production
+/build
+/dist
+
+# misc
+.idea/
+.happypack
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# ignore d.ts auto generated by css-modules-typescript-loader
+*.module.scss.d.ts

packages/plugin-designer/.stylelintignore

@@ -0,0 +1,7 @@
+# 忽略目录
+build/
+tests/
+demo/
+
+# node 覆盖率文件
+coverage/

packages/plugin-designer/.stylelintrc.js

@@ -0,0 +1,3 @@
+const { stylelint } = require('@ice/spec');
+
+module.exports = stylelint;

packages/plugin-designer/README.md

@@ -0,0 +1 @@
+## todo