daily tag

packages/editor-framework/demo/usage.md

@@ -8,13 +8,11 @@ order: 1
 ````jsx
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import Demo from 'editor-framework';
 
 class App extends Component {
   render() {
     return (
       <div>
-        <Demo />
       </div>
     );
   }

packages/editor-framework/es/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const context: import("react").Context<{}>;
+export default context;

packages/editor-framework/es/context.js

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

packages/editor-framework/es/index.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare function TSDemo(props: any): JSX.Element;
-declare namespace TSDemo {
-    var propTypes: {};
-    var defaultProps: {};
-}
-export default TSDemo;

packages/editor-framework/es/index.js

@@ -1,13 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-import * as React from 'react';
-export default function TSDemo(props) {
-  var type = props.type,
-      others = _objectWithoutPropertiesLoose(props, ["type"]);
-
-  return React.createElement("div", _extends({
-    className: "TSDemo"
-  }, others), "Hello TSDemo");
-}
-TSDemo.propTypes = {};
-TSDemo.defaultProps = {};

packages/editor-framework/es/index.scss

@@ -1,4 +0,0 @@
-/* write style here */
-.TSDemo {
-
-}

packages/editor-framework/es/style.js

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

packages/editor-framework/package.json

@@ -28,7 +28,8 @@
     "events": "^3.1.0",
     "intl-messageformat": "^7.8.4",
     "lodash": "^4.17.15",
-    "prop-types": "^15.5.8"
+    "prop-types": "^15.5.8",
+    "store": "^2.0.12"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.3",

packages/editor-framework/src/editor.ts

@@ -1,7 +1,46 @@
 import EventEmitter from 'events';
 import Debug from 'debug';
-let instance = null;
+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;
 
@@ -9,7 +48,7 @@ export interface editor {
 
 };
 
-export class Editor extends EventEmitter {
+export default class Editor extends EventEmitter {
   static getInstance = () => {
     if (!instance) {
       instance = new Editor();
@@ -21,22 +60,62 @@ export class Editor extends EventEmitter {
     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, val) {
+  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 => {
@@ -45,18 +124,63 @@ export class Editor extends EventEmitter {
     }
   }
 
-  batchOn(events, lisenter) {
+  batchOn(events:Array<string>, lisenter:function):void {
     if (!Array.isArray(events)) return;
     events.forEach(event => this.on(event, lisenter));
   }
 
-  batchOnce(events, lisenter) {
+  batchOnce(events:Array<string>, lisenter:function):void {
     if (!Array.isArray(events)) return;
     events.forEach(event => this.once(event, lisenter));
   }
 
-  batchOff(events, 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

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

packages/editor-framework/src/utils.ts

@@ -73,3 +73,145 @@ export function getEnv() {
   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) {
+
+}

packages/editor-skeleton/build.json

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

packages/editor-skeleton/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/editor-skeleton/es/components/TopIcon/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface Props {
+    name: string;
+}
+declare const Greeting: ({ name }: Props) => JSX.Element;
+export default Greeting;

packages/editor-skeleton/es/components/TopIcon/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+var Greeting = function Greeting(_ref) {
+  var name = _ref.name;
+  return React.createElement("div", {
+    style: {
+      textAlign: 'center',
+      fontSize: '40px',
+      fontWeight: 'bold'
+    }
+  }, "Hello, ", name);
+};
+
+export default Greeting;

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

@@ -0,0 +1,14 @@
+declare const routerConfig: {
+    path: string;
+    component: any;
+    children: ({
+        path: string;
+        component: any;
+        redirect?: undefined;
+    } | {
+        path: string;
+        redirect: string;
+        component?: undefined;
+    })[];
+}[];
+export default routerConfig;

packages/editor-skeleton/es/config/skeleton.js

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

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

@@ -0,0 +1,2 @@
+declare const asideMenuConfig: any[];
+export { asideMenuConfig };

packages/editor-skeleton/es/config/utils.js

@@ -0,0 +1,3 @@
+// 菜单配置
+var asideMenuConfig = [];
+export { asideMenuConfig };

packages/editor-skeleton/es/global.scss

@@ -0,0 +1,23 @@
+.next-loading {
+  .next-loading-wrap {
+    height: 100%;
+  }
+}
+.lowcode-editor {
+  .lowcode-main-content {
+    position: absolute;
+    top: 54px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+  }
+  .lowcode-center-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: #f7f7f7;
+    padding: 10px;
+    overflow: auto;
+  }
+}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PureComponent } from 'react-dom';
+import './global.scss';
+export default class Skeleton extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}

packages/editor-skeleton/es/index.js

@@ -0,0 +1,43 @@
+import _ConfigProvider from "@alifd/next/es/config-provider";
+import _Loading from "@alifd/next/es/loading";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react-dom'; // import Editor from '@ali/lowcode-engine-editor';
+
+import './global.scss';
+
+var Skeleton = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(Skeleton, _PureComponent);
+
+  function Skeleton(props) {
+    return _PureComponent.call(this, props) || this; // this.editor = new Editor(props.config, props.utils);
+  }
+
+  var _proto = Skeleton.prototype;
+
+  _proto.componentWillUnmount = function componentWillUnmount() {// this.editor && this.editor.destroy();
+    // this.editor = null;
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        location = _this$props.location,
+        history = _this$props.history,
+        messages = _this$props.messages;
+    return React.createElement(_ConfigProvider, {
+      locale: messages[appHelper.locale]
+    }, React.createElement(_Loading, {
+      tip: this.i18n('loading'),
+      size: "large",
+      visible: loading || !initReady,
+      shape: "fusion-reactor",
+      fullScreen: true
+    }, React.createElement("div", {
+      className: "lowcode-editor"
+    })));
+  };
+
+  return Skeleton;
+}(PureComponent);
+
+Skeleton.displayName = 'lowcodeEditorSkeleton';
+export { Skeleton as default };

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

@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class CenterArea extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var CenterArea = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(CenterArea, _PureComponent);
+
+  function CenterArea(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = CenterArea.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-center-area"
+    });
+  };
+
+  return CenterArea;
+}(PureComponent);
+
+CenterArea.displayName = 'lowcodeCenterArea';
+export { CenterArea as default };

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    Nav: any;
+    Panel: any;
+};
+export default _default;

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

@@ -0,0 +1,6 @@
+import Nav from './nav';
+import Panel from './panel';
+export default {
+  Nav: Nav,
+  Panel: Panel
+};

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

@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class LeftAreaPanel extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var LeftAreaPanel = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(LeftAreaPanel, _PureComponent);
+
+  function LeftAreaPanel(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = LeftAreaPanel.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-left-area-nav"
+    });
+  };
+
+  return LeftAreaPanel;
+}(PureComponent);
+
+LeftAreaPanel.displayName = 'lowcodeLeftAreaNav';
+export { LeftAreaPanel as default };

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

@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class LeftAreaPanel extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var LeftAreaPanel = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(LeftAreaPanel, _PureComponent);
+
+  function LeftAreaPanel(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = LeftAreaPanel.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-left-area"
+    });
+  };
+
+  return LeftAreaPanel;
+}(PureComponent);
+
+LeftAreaPanel.displayName = 'lowcodeLeftAreaPanel';
+export { LeftAreaPanel as default };

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

@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class RightArea extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var RightArea = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(RightArea, _PureComponent);
+
+  function RightArea(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = RightArea.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-right-area"
+    });
+  };
+
+  return RightArea;
+}(PureComponent);
+
+RightArea.displayName = 'lowcodeRightArea';
+export { RightArea as default };

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

@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+import './index.scss';
+export default class TopArea extends PureComponent {
+    static displayName: string;
+    constructor(props: any);
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import './index.scss';
+
+var TopArea = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(TopArea, _PureComponent);
+
+  function TopArea(props) {
+    return _PureComponent.call(this, props) || this;
+  }
+
+  var _proto = TopArea.prototype;
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      className: "lowcode-top-area"
+    });
+  };
+
+  return TopArea;
+}(PureComponent);
+
+TopArea.displayName = 'lowcodeTopArea';
+export { TopArea as default };

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

@@ -0,0 +1,10 @@
+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/es/locale/ja-JP.js

@@ -0,0 +1 @@
+export default {};

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

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

packages/editor-skeleton/es/locale/zh-TW.js

@@ -0,0 +1 @@
+export default {};

packages/editor-skeleton/es/style.js

@@ -0,0 +1,2 @@
+import '@alifd/next/es/config-provider/style';
+import '@alifd/next/es/loading/style';

packages/editor-skeleton/package.json

@@ -15,20 +15,26 @@
     "react-router-dom": "^5.0.1"
   },
   "devDependencies": {
+    "@alib/build-scripts": "^0.1.3",
+    "@alifd/next": "1.x",
     "@ice/spec": "^0.1.1",
-    "css-modules-typescript-loader": "^2.0.4",
+    "@types/lodash": "^4.14.149",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
+    "build-plugin-component": "^0.2.0",
+    "build-plugin-fusion": "^0.1.0",
+    "build-plugin-moment-locales": "^0.1.0",
     "eslint": "^6.0.1",
-    "ice-plugin-fusion": "^0.1.4",
+    "prettier": "^1.19.1",
-    "ice-plugin-moment-locales": "^0.1.0",
+    "react": "^16.8.0",
-    "ice-scripts": "^2.0.0",
+    "react-dom": "^16.8.0"
-    "stylelint": "^10.1.0"
   },
   "scripts": {
-    "start": "ice-scripts dev",
+    "start": "build-scripts start",
-    "build": "ice-scripts build",
+    "build": "build-scripts build",
-    "lint": "npm run eslint && npm run stylelint",
+    "prepublishOnly": "npm run prettier && npm run build",
-    "eslint": "eslint --cache --ext .js,.jsx ./",
+    "lint": "eslint --cache --ext .js,.jsx ./",
-    "stylelint": "stylelint ./**/*.scss"
+    "prettier": "prettier  --write \"./src/**/*.{ts,tsx,js,jsx,ejs,less,css,scss,json}\" "
   },
   "engines": {
     "node": ">=8.0.0"
@@ -43,5 +49,6 @@
   "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/editor-skeleton/src/components/Guide/index.module.scss

@@ -1,11 +0,0 @@
-.item {
-  height: 34px;
-  line-height: 34px;
-}
-.title {
-  text-align: center;
-}
-.container {
-  width: 470px;
-  margin: 40px auto;
-}

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

@@ -1,71 +0,0 @@
-import React from 'react';
-import { Button } from '@alifd/next';
-import styles from './index.module.scss';
-
-const Guide = () => {
-  return (
-    <div className={styles.container}>
-      <h2 className={styles.title}>使用指南</h2>
-      <ul>
-        <li className={styles.item}>
-          1. 该模板适用于从 0 到 1 开始搭建项目，内置引导页面，路由和菜单展示。
-        </li>
-        <li className={styles.item}>2. 菜单配置: menuConfig.js。</li>
-        <li className={styles.item}>3. 路由配置: routerConfig.js。</li>
-        <li className={styles.item}>
-          4. 通过 GUI 工具{' '}
-          <a
-            href="https://alibaba.github.io/ice/iceworks"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Iceworks
-          </a>{' '}
-          创建页面，会同步的更新菜单和路由配置。
-        </li>
-        <li className={styles.item}>
-          5. 基于{' '}
-          <a
-            href="https://alibaba.github.io/ice/block"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            物料
-          </a>{' '}
-          生成的页面将会添加在 pages 目录。
-        </li>
-        <li className={styles.item}>
-          6. 让前端工程变的轻松便捷，
-          <a
-            href="https://alibaba.github.io/ice/docs/iceworks"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            下载 iceworks
-          </a>{' '}
-          。
-        </li>
-      </ul>
-      <div style={{ textAlign: 'center', marginTop: '40px' }}>
-        <a
-          href="https://alibaba.github.io/ice/docs/iceworks"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Button type="secondary" style={{ marginRight: '20px' }}>
-            快速开始{' '}
-          </Button>
-        </a>
-        <a
-          href="https://www.tslang.cn/docs/home.html"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Button type="primary">学习 TypeScript</Button>
-        </a>
-      </div>
-    </div>
-  );
-};
-
-export default Guide;

packages/editor-skeleton/src/global.scss

@@ -1,6 +1,23 @@
-// 引入默认全局样式
+.next-loading {
-@import '@alifd/next/reset.scss';
+  .next-loading-wrap {
-
+    height: 100%;
-body {
+  }
-  -webkit-font-smoothing: antialiased;
+}
+.lowcode-editor {
+  .lowcode-main-content {
+    position: absolute;
+    top: 54px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+  }
+  .lowcode-center-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: #f7f7f7;
+    padding: 10px;
+    overflow: auto;
+  }
 }

packages/editor-skeleton/src/index.tsx

@@ -1,13 +1,52 @@
-import ReactDOM from 'react-dom';
+import React, {PureComponent} from 'react-dom';
+
+// 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';
 
-import router from './router';
+export default class Skeleton extends PureComponent {
+  static displayName = 'lowcodeEditorSkeleton';
 
-const ICE_CONTAINER = document.getElementById('ice-container');
+  constructor(props) {
+    super(props);
+    // this.editor = new Editor(props.config, props.utils);
+  }
 
-if (!ICE_CONTAINER) {
+  componentWillUnmount() {
-  throw new Error('当前页面不存在 <div id="ice-container"></div> 节点.');
+    // this.editor && this.editor.destroy();
+    // this.editor = null;
+  }
+
+  render() {
+    const { location, history, messages } = this.props;
+    
+    return (
+      <ConfigProvider locale={messages[appHelper.locale]}>
+        <Loading
+          tip={this.i18n('loading')}
+          size="large"
+          visible={loading || !initReady}
+          shape="fusion-reactor"
+          fullScreen
+        >
+          <div className="lowcode-editor">
+            {/* <TopArea/>
+            <div className="lowcode-main-content">
+              <LeftArea.Nav/>
+              <LeftArea.Panel/>
+              <CenterArea/>
+              <RightArea/>
+            </div> */}
+          </div>
+        </Loading>
+      </ConfigProvider>
+    );
+  }
 }
-
-ReactDOM.render(router(), ICE_CONTAINER);

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

@@ -1,9 +0,0 @@
-import React from 'react';
-
-export default function BasicLayout({ children }) {
-  return (
-    <div style={{ paddingTop: '100px' }}>
-      {children}
-    </div>
-  );
-}

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

@@ -0,0 +1,17 @@
+import React, {PureComponent} from 'react';
+
+import './index.scss';
+
+export default class CenterArea extends PureComponent {
+  static displayName = 'lowcodeCenterArea';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="lowcode-center-area" />
+    );
+  }
+}

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

@@ -0,0 +1,7 @@
+import Nav from './nav';
+import Panel from './panel';
+
+export default {
+  Nav,
+  Panel
+};

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

@@ -0,0 +1,17 @@
+import React, {PureComponent} from 'react';
+
+import './index.scss';
+
+export default class LeftAreaPanel extends PureComponent {
+  static displayName = 'lowcodeLeftAreaNav';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="lowcode-left-area-nav"/>
+    );
+  }
+}

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

@@ -0,0 +1,17 @@
+import React, {PureComponent} from 'react';
+
+import './index.scss';
+
+export default class LeftAreaPanel extends PureComponent {
+  static displayName = 'lowcodeLeftAreaPanel';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="lowcode-left-area"/>
+    );
+  }
+}

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

@@ -0,0 +1,17 @@
+import React, {PureComponent} from 'react';
+
+import './index.scss';
+
+export default class RightArea extends PureComponent {
+  static displayName = 'lowcodeRightArea';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="lowcode-right-area"/>
+    );
+  }
+}

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

@@ -0,0 +1,17 @@
+import React, {PureComponent} from 'react';
+
+import './index.scss';
+
+export default class TopArea extends PureComponent {
+  static displayName = 'lowcodeTopArea';
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="lowcode-top-area"/>
+    );
+  }
+}

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

@@ -0,0 +1,10 @@
+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/ja-JP.js

@@ -0,0 +1 @@
+export default {};

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

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

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

@@ -0,0 +1 @@
+export default {};

packages/editor-skeleton/src/pages/Dashboard/index.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Guide from '@/components/Guide';
-import Greeting from '@/components/Greeting';
-
-export default function Dashboard() {
-  return (
-    <div>
-      <Greeting name="TypeScript" />
-      <Guide />
-    </div>
-  );
-}

packages/editor-skeleton/src/router.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
-import path from 'path';
-import routes from '@/config/routes';
-
-const RouteItem = (props) => {
-  const { redirect, path: routePath, component, key } = props;
-  if (redirect) {
-    return (
-      <Redirect
-        exact
-        key={key}
-        from={routePath}
-        to={redirect}
-      />
-    );
-  }
-  return (
-    <Route
-      key={key}
-      component={component}
-      path={routePath}
-    />
-  );
-};
-
-const router = () => {
-  return (
-    <Router>
-      <Switch>
-        {routes.map((route, id) => {
-          const { component: RouteComponent, children, ...others } = route;
-          return (
-            <Route
-              key={id}
-              {...others}
-              component={(props) => {
-                return (
-                  children ? (
-                    <RouteComponent key={id} {...props}>
-                      <Switch>
-                        {children.map((routeChild, idx) => {
-                          const { redirect, path: childPath, component } = routeChild;
-                          return RouteItem({
-                            key: `${id}-${idx}`,
-                            redirect,
-                            path: childPath && path.join(route.path, childPath),
-                            component,
-                          });
-                        })}
-                      </Switch>
-                    </RouteComponent>
-                  ) : (
-                    <>
-                      {
-                        RouteItem({
-                          key: id,
-                          ...route,
-                        })
-                      }
-                    </>
-                  )
-                );
-              }}
-            />
-          );
-        })}
-      </Switch>
-    </Router>
-  );
-};
-
-export default router;

packages/editor-skeleton/tsconfig.json

@@ -2,30 +2,20 @@
   "compileOnSave": false,
   "buildOnSave": false,
   "compilerOptions": {
-    "baseUrl": ".",
     "outDir": "build",
     "module": "esnext",
     "target": "es6",
     "jsx": "react",
     "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
     "lib": ["es6", "dom"],
     "sourceMap": true,
     "allowJs": true,
-    "rootDir": "src",
+    "noUnusedLocals": true,
-    "forceConsistentCasingInFileNames": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
-    "noImplicitAny": false,
+    "noImplicitAny": true,
-    "importHelpers": true,
+    "skipLibCheck": true
-    "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true,
-    "skipLibCheck": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
   },
-  "include": ["src/*"],
+  "include": ["src/*.ts", "src/*.tsx"],
   "exclude": ["node_modules", "build", "public"]
 }

packages/editor/.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/editor/.eslintignore

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

packages/editor/.eslintrc.js

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

packages/editor/.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/editor/.stylelintignore

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

packages/editor/.stylelintrc.js

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

packages/editor/README.md

@@ -0,0 +1,20 @@
+# ice-typescript-starter
+
+## 使用
+
+- 启动调试服务: `npm start`
+- 构建 dist: `npm run build`
+
+## 目录结构
+
+- 入口文件: `src/index.jsx`
+- 导航配置: `src/config/menu.js`
+- 路由配置: `src/config/routes.js`
+- 路由入口: `src/router.jsx`
+- 布局文件: `src/layouts`
+- 通用组件: `src/components`
+- 页面文件: `src/pages`
+
+## 效果图
+
+![screenshot](https://img.alicdn.com/tfs/TB13AFlH6TpK1RjSZKPXXa3UpXa-2860-1580.png)

packages/editor/abc.json

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

packages/editor/jsconfig.json

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

packages/editor/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@icedesign/ts-scaffold",
+  "version": "0.0.1",
+  "description": "低代码编辑器",
+  "dependencies": {
+    "@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-dom": "^16.4.1",
+    "react-router-dom": "^5.1.2"
+  },
+  "devDependencies": {
+    "@ice/spec": "^0.1.1",
+    "css-modules-typescript-loader": "^2.0.4",
+    "eslint": "^6.0.1",
+    "ice-plugin-fusion": "^0.1.4",
+    "ice-plugin-moment-locales": "^0.1.0",
+    "ice-scripts": "^2.0.0",
+    "stylelint": "^10.1.0"
+  },
+  "scripts": {
+    "start": "ice-scripts dev",
+    "build": "ice-scripts build",
+    "lint": "npm run eslint && npm run stylelint",
+    "eslint": "eslint --cache --ext .js,.jsx ./",
+    "stylelint": "stylelint ./**/*.scss"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  },
+  "iceworks": {
+    "type": "react",
+    "adapter": "adapter-react-v3"
+  },
+  "ideMode": {
+    "name": "ice-react"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ice-lab/react-materials/tree/master/scaffolds/ice-ts"
+  }
+}

packages/editor/src/config/components.js

@@ -0,0 +1,3 @@
+
+export default {
+};

packages/editor/src/config/constants.js

@@ -0,0 +1,3 @@
+export default {
+  "namespace": "page"
+}

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

@@ -0,0 +1 @@
+export default {};

packages/editor/src/config/locale/index.js

@@ -0,0 +1,10 @@
+import en_us from './en-US';
+import zh_cn from './zh-CN';
+import zh_tw from './zh-TW';
+import ja_jp from './ja-JP';
+export default {
+  'en-US': en_us,
+  'zh-CN': zh_cn,
+  'zh-TW': zh_tw,
+  'ja-JP': ja_jp
+};