增加国际化面板、数据源面板、JS面板

packages/designer/src/document/node/node.ts

@@ -97,6 +97,10 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
    */
   readonly props: Props;
   protected _children?: NodeChildren;
+  /**
+   * @deprecated
+   */
+  private _addons: { [key: string]: any } = {};
   @obx.ref private _parent: ParentalNode | null = null;
   /**
    * 父级节点
@@ -482,11 +486,22 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     }
 
     const { props = {}, extras } = this.props.export(stage) || {};
+    const _extras_: {[key: string]: any} = {
+      ...extras,
+    };
+    if (_extras_) {
+      Object.keys(_extras_).forEach((key) => {
+        const addon = this._addons[key];
+        if (addon) {
+          _extras_[key] = addon();
+        }
+      });
+    }
 
     const schema: any = {
       ...baseSchema,
       props: this.document.designer.transformProps(props, this, stage),
-      ...extras,
+      ..._extras_,
     };
 
     if (this.isParental() && this.children.size > 0) {
@@ -627,8 +642,22 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
    * @deprecated
    */
   getAddonData(key: string) {
+    const addon = this._addons[key];
+    if (addon) {
+      return addon();
+    }
     return this.getExtraProp(key)?.value;
   }
+  /**
+   * @deprecated
+   */
+  registerAddon(key: string, exportData: any) {
+    if (this._addons[key]) {
+      throw new Error(`node addon ${key} exist`);
+    }
+
+    this._addons[key] = exportData;
+  }
   
   toString() {
     return this.id;

packages/vision-polyfill/package.json

@@ -21,7 +21,10 @@
     "@ali/lowcode-plugin-undo-redo": "^0.8.6",
     "@ali/lowcode-plugin-zh-en": "^0.8.8",
     "@ali/lowcode-setters": "^0.8.8",
+    "@ali/ve-action-pane": "^4.7.0-beta.0",
     "@ali/ve-datapool-pane": "^6.4.3",
+    "@ali/ve-i18n-manage-pane": "^4.3.0",
+    "@ali/ve-i18n-pane": "^4.0.0-beta.0",
     "@ali/ve-i18n-util": "^2.0.2",
     "@ali/ve-icons": "^4.1.9",
     "@ali/ve-less-variables": "2.0.3",

packages/vision-polyfill/public/index.html

@@ -25,7 +25,7 @@
         pageType: 'single',
         deviceType: 'web',
         appName: '基础包管理后台',
-        appType: 'legao_base_packages',
+        appType: '',
         templateType: '',
         pageId: 'FORM-3KYJN7RV-DIOD8LLK1WGQ89S7NHA92-QJVH497K-V',
         slug: 'test',
@@ -36,10 +36,10 @@
         formType: 'display',
         title: { en_US: '测试', type: 'i18n', zh_CN: '测试' },
         urlPrefix: 'https://go.alibaba-inc.com',
-        APIUrlPrefix: 'https://go.alibaba-inc.com',
+        APIUrlPrefix: 'https://mocks.alibaba-inc.com/mock/lowCodeEngine',
         devVersion: '0.1.0', // 这个是子应用的变更 id
         subAppType: '0.1.0',
-        appKey: 'legao_base_packages',
+        appKey: '',
         RE_VERSION: '7.1.1',
         appSource: '',
         isDomainDefault: 'n',

packages/vision-polyfill/src/demo/index.ts

@@ -3,7 +3,10 @@ import { createElement } from 'react';
 import { Button } from '@alifd/next';
 import Engine, { Panes } from '@ali/visualengine';
 import getTrunkPane from '@ali/ve-trunk-pane';
-import datapoolPane from '@ali/ve-datapool-pane';
+import DatapoolPane from '@ali/ve-datapool-pane';
+// import I18nPane from '@ali/ve-i18n-pane';
+import I18nManagePane from '@ali/ve-i18n-manage-pane';
+import ActionPane from '@ali/ve-action-pane';
 import fetchContext from '@ali/vu-legao-design-fetch-context';
 import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
 import loadUrls from './loader';
@@ -12,101 +15,6 @@ import { isCSSUrl } from '@ali/lowcode-globals';
 
 const { editor, skeleton } = Engine;
 
-// demo
-skeleton.add({
-  name: 'eventBindDialog',
-  type: 'Widget',
-  content: EventBindDialog,
-});
-skeleton.add({
-  area: 'leftArea',
-  name: 'icon1',
-  type: 'Dock',
-  props: {
-    align: 'bottom',
-    icon: 'set',
-    description: '设置',
-  },
-});
-skeleton.add({
-  area: 'leftArea',
-  name: 'icon2',
-  type: 'Dock',
-  props: {
-    align: 'bottom',
-    icon: 'help',
-    description: '帮助',
-  },
-});
-
-skeleton.add({
-  area: 'topArea',
-  type: 'Dock',
-  name: 'publish',
-  props: {
-    align: 'right',
-  },
-  content: createElement(Button, {
-    size: 'small',
-    type: 'secondary',
-    children: '发布',
-  }),
-});
-skeleton.add({
-  area: 'topArea',
-  type: 'Dock',
-  name: 'save',
-  props: {
-    align: 'right',
-  },
-  content: createElement(Button, {
-    size: 'small',
-    type: 'primary',
-    children: '保存',
-  }),
-});
-skeleton.add({
-  area: 'topArea',
-  type: 'Dock',
-  name: 'preview4',
-  props: {
-    align: 'center',
-  },
-  content: createElement('img', {
-    src: 'https://img.alicdn.com/tfs/TB1WW.VC.z1gK0jSZLeXXb9kVXa-486-64.png',
-    style: {
-      height: 32,
-    },
-  }),
-});
-skeleton.add({
-  area: 'topArea',
-  type: 'Dock',
-  name: 'preview1',
-  props: {
-    align: 'left',
-  },
-  content: createElement('img', {
-    src: 'https://img.alicdn.com/tfs/TB1zqBfDlr0gK0jSZFnXXbRRXXa-440-64.png',
-    style: {
-      height: 32,
-    },
-  }),
-});
-
-initTrunkPane();
-initDataPoolPane();
-Engine.init();
-
-load();
-Engine.Env.setEnv('RE_VERSION', '5.0.1');
-
-async function load() {
-  await loadAssets();
-
-  loadSchema();
-}
-
 const externals = ['react', 'react-dom', 'prop-types', 'react-router', 'react-router-dom', '@ali/recore'];
 
 async function loadAssets() {
@@ -160,6 +68,90 @@ async function loadSchema() {
   editor.set('schema', schema);
 }
 
+// demo
+function initDemoPanes() {
+  skeleton.add({
+    name: 'eventBindDialog',
+    type: 'Widget',
+    content: EventBindDialog,
+  });
+  skeleton.add({
+    area: 'leftArea',
+    name: 'icon1',
+    type: 'Dock',
+    props: {
+      align: 'bottom',
+      icon: 'set',
+      description: '设置',
+    },
+  });
+  skeleton.add({
+    area: 'leftArea',
+    name: 'icon2',
+    type: 'Dock',
+    props: {
+      align: 'bottom',
+      icon: 'help',
+      description: '帮助',
+    },
+  });
+  
+  skeleton.add({
+    area: 'topArea',
+    type: 'Dock',
+    name: 'publish',
+    props: {
+      align: 'right',
+    },
+    content: createElement(Button, {
+      size: 'small',
+      type: 'secondary',
+      children: '发布',
+    }),
+  });
+  skeleton.add({
+    area: 'topArea',
+    type: 'Dock',
+    name: 'save',
+    props: {
+      align: 'right',
+    },
+    content: createElement(Button, {
+      size: 'small',
+      type: 'primary',
+      children: '保存',
+    }),
+  });
+  skeleton.add({
+    area: 'topArea',
+    type: 'Dock',
+    name: 'preview4',
+    props: {
+      align: 'center',
+    },
+    content: createElement('img', {
+      src: 'https://img.alicdn.com/tfs/TB1WW.VC.z1gK0jSZLeXXb9kVXa-486-64.png',
+      style: {
+        height: 32,
+      },
+    }),
+  });
+  skeleton.add({
+    area: 'topArea',
+    type: 'Dock',
+    name: 'preview1',
+    props: {
+      align: 'left',
+    },
+    content: createElement('img', {
+      src: 'https://img.alicdn.com/tfs/TB1zqBfDlr0gK0jSZFnXXbRRXXa-440-64.png',
+      style: {
+        height: 32,
+      },
+    }),
+  });
+}
+
 async function initTrunkPane() {
   const assets = await editor.onceGot('legao-assets');
   const config = {
@@ -233,7 +225,61 @@ function initDataPoolPane() {
     api: fetchContext.api.DataPoolPaneAPI,
   };
 
-  Panes.add(datapoolPane, {
+  Panes.add(DatapoolPane, {
     props,
   });
 }
+
+// 国际化面板
+function initI18nPane() {
+  fetchContext.create('I18nManagePaneAPI', {
+    // 绑定美杜莎
+    bindMedusa: {
+      url: 'query/app/createMedusa.json',
+    },
+
+    // 解除绑定
+    unbindMedusa: {
+      url: 'query/app/removeMedusa.json',
+    },
+
+    // 同步美杜莎
+    syncMedusa: {
+      url: 'query/formi18n/syncI18n.json',
+    },
+  });
+
+  Panes.add(I18nManagePane, {
+    props: {
+      enableMedusa: true,
+      api: fetchContext.api.I18nManagePaneAPI,
+    },
+  });
+}
+
+// 动作面板
+function initActionPane() {
+  const props = {
+    enableGlobalJS: false,
+    enableVsCodeEdit: false,
+    enableHeaderTip: true,
+  };
+
+  Panes.add(ActionPane, {
+    props,
+  });
+}
+
+async function init() {
+  Engine.Env.setEnv('RE_VERSION', '7.2.0');
+  await loadAssets();
+  await loadSchema();
+  await initTrunkPane();
+  initDataPoolPane();
+  initI18nPane();
+  initActionPane();
+  initDemoPanes();
+
+  Engine.init();
+}
+init();

packages/vision-polyfill/src/editor.ts

@@ -100,17 +100,17 @@ skeleton.add({
   content: Preview,
 });
 
-skeleton.add({
-  name: 'sourceEditor',
-  type: 'PanelDock',
-  props: {
-    align: 'top',
-    icon: 'code',
-    description: '组件库',
-  },
-  panelProps: {
-    width: 500
-    // area: 'leftFixedArea'
-  },
-  content: SourceEditor,
-});
+// skeleton.add({
+//   name: 'sourceEditor',
+//   type: 'PanelDock',
+//   props: {
+//     align: 'top',
+//     icon: 'code',
+//     description: '组件库',
+//   },
+//   panelProps: {
+//     width: 500
+//     // area: 'leftFixedArea'
+//   },
+//   content: SourceEditor,
+// });

packages/vision-polyfill/src/skeleton/workbench.less

@@ -108,7 +108,7 @@ body {
 .lc-panel {
   height: 100%;
   width: 100%;
-  overflow: auto;
+  // overflow: auto;
   &.hidden {
     display: none;
   }
@@ -211,7 +211,7 @@ body {
       position: absolute;
       top: 0;
       bottom: 0;
-      width: var(--dock-pane-width);
+      // width: var(--dock-pane-width);
       left: calc(var(--left-area-width) + 1px);
       background-color: var(--color-pane-background);
       box-shadow: 4px 0 16px 0 rgba(31,50,88,0.08);