From 41eebd402775fef2a594a000cc7bc37396f1a466 Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Sun, 26 Apr 2020 14:53:47 +0800 Subject: [PATCH 1/5] add datapoolPane --- packages/vision-polyfill/package.json | 4 +- packages/vision-polyfill/src/demo/index.ts | 66 ++++++++++++++++++++++ packages/vision-polyfill/src/panes.ts | 13 ++++- 3 files changed, 81 insertions(+), 2 deletions(-) diff --git a/packages/vision-polyfill/package.json b/packages/vision-polyfill/package.json index 569c60e6d..c3622c862 100644 --- a/packages/vision-polyfill/package.json +++ b/packages/vision-polyfill/package.json @@ -21,6 +21,7 @@ "@ali/lowcode-plugin-undo-redo": "^0.8.6", "@ali/lowcode-plugin-zh-en": "^0.8.8", "@ali/lowcode-setters": "^0.8.8", + "@ali/ve-datapool-pane": "^6.4.3", "@ali/ve-i18n-util": "^2.0.2", "@ali/ve-icons": "^4.1.9", "@ali/ve-less-variables": "2.0.3", @@ -28,6 +29,7 @@ "@ali/ve-trunk-pane": "^5.1.0-beta.14", "@ali/ve-utils": "^1.1.0", "@ali/vu-css-style": "^1.1.3", + "@ali/vu-legao-design-fetch-context": "^1.0.3", "@ali/vu-logger": "^1.0.7", "@ali/vu-style-sheet": "^2.4.0", "@alifd/next": "^1.19.12", @@ -45,6 +47,6 @@ "build-plugin-moment-locales": "^0.1.0", "build-plugin-react-app": "^1.1.2", "tsconfig-paths-webpack-plugin": "^3.2.0", - "monaco-editor-webpack-plugin":"^1.9.0" + "monaco-editor-webpack-plugin": "^1.9.0" } } diff --git a/packages/vision-polyfill/src/demo/index.ts b/packages/vision-polyfill/src/demo/index.ts index d6410841d..15bb6f45f 100644 --- a/packages/vision-polyfill/src/demo/index.ts +++ b/packages/vision-polyfill/src/demo/index.ts @@ -3,6 +3,8 @@ 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 fetchContext from '@ali/vu-legao-design-fetch-context'; import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog'; import loadUrls from './loader'; import { upgradeAssetsBundle } from './upgrade-assets'; @@ -93,6 +95,7 @@ skeleton.add({ }); initTrunkPane(); +initDataPoolPane(); Engine.init(); load(); @@ -105,6 +108,7 @@ async function load() { } const externals = ['react', 'react-dom', 'prop-types', 'react-router', 'react-router-dom', '@ali/recore']; + async function loadAssets() { const legaoAssets = await editor.utils.get('./legao-assets.json'); @@ -172,3 +176,65 @@ async function initTrunkPane() { const TrunkPane = getTrunkPane(config); Panes.add(TrunkPane); } + +// 数据源面板 +function initDataPoolPane() { + const dpConfigs = {}; + + if (!dpConfigs) { + return; + } + + fetchContext.create('DataPoolPaneAPI', { + saveGlobalConfig: { + url: 'query/appConfig/saveGlobalConfig.json', + method: 'POST', + }, + saveOrUpdateAppDataPool: { + url: 'query/appDataPool/saveOrUpdateAppDataPool.json', + method: 'POST', + }, + batchSaveOrUpdateAppDataPool: { + url: 'query/appDataPool/batchSaveOrUpdateAppDataPool.json', + method: 'POST' + }, + listAppDataPool: { + url: 'query/appDataPool/listAppDataPool.json', + method: 'GET', + }, + getAppDataPool: { + url: 'query/appDataPool/getAppDataPool.json', + method: 'POST', + }, + getEpaasApiInApp: { + url: 'query/formdesign/getEpaasApiInApp.jsonp', + method: 'GET', + }, + getFormListOrder: { + url: 'query/formdesign/getFormListOrder.json', + method: 'GET', + }, + // 实时修改 effectForm + operateAppDpBind: { + url: 'query/appDataPool/operateAppDpBind.json', + method: 'POST', + }, + // 校验全局数据源是否被其他页面修改 + checkAppDataPoolModified: { + url: 'query/appDataPool/checkAppDataPoolModified.json', + method: 'POST', + }, + }); + + const props = { + enableGateService: true, + enableGlobalFitConfig: true, + enableOneAPIService: true, + formUuid: 'xxx', + api: fetchContext.api.DataPoolPaneAPI, + }; + + Panes.add(datapoolPane, { + props, + }); +} diff --git a/packages/vision-polyfill/src/panes.ts b/packages/vision-polyfill/src/panes.ts index 268bc2d75..aa60b5554 100644 --- a/packages/vision-polyfill/src/panes.ts +++ b/packages/vision-polyfill/src/panes.ts @@ -67,7 +67,18 @@ function upgradeConfig(config: OldPaneConfig): IWidgetBaseConfig & { area: strin if (type === 'dock') { newConfig.type = 'PanelDock'; newConfig.area = 'left'; - const { contents, hideTitleBar, tip, width, maxWidth, height, maxHeight, position, menu, isAction } = config; + newConfig.props.description = description || title; + const { + contents, + hideTitleBar, + tip, + width, + maxWidth, + height, + maxHeight, + menu, + isAction + } = config; if (menu) { newConfig.props.title = menu; } From 4bbee864083aa6380010af731d21928884253453 Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Sun, 26 Apr 2020 14:54:25 +0800 Subject: [PATCH 2/5] =?UTF-8?q?node=20=E6=96=B0=E5=A2=9E=20api:=20getAddon?= =?UTF-8?q?Data?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/designer/src/document/node/node.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index ab206662f..e066bb01d 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -595,6 +595,10 @@ export class Node { } return { container: this.parent, ref: this }; } + + getAddonData(key: string) { + return this.getExtraProp(key)?.value; + } } export interface ParentalNode extends Node { From d8e436fa495811f9f35f347848ce1a35ecbdfda7 Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Sun, 26 Apr 2020 14:54:44 +0800 Subject: [PATCH 3/5] EXTRA_KEY_PREFIX chang to '___' --- packages/designer/src/document/node/props/props.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/designer/src/document/node/props/props.ts b/packages/designer/src/document/node/props/props.ts index 57200134b..0e9d293dc 100644 --- a/packages/designer/src/document/node/props/props.ts +++ b/packages/designer/src/document/node/props/props.ts @@ -4,7 +4,7 @@ import { Prop, IPropParent, UNSET } from './prop'; import { Node } from '../node'; import { ExportType } from '../export-type'; -export const EXTRA_KEY_PREFIX = '__'; +export const EXTRA_KEY_PREFIX = '___'; export class Props implements IPropParent { readonly id = uniqueId('props'); From c3c46004d5ca919893bd8e5de5d229b5c856b1bf Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Mon, 27 Apr 2020 20:46:20 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9B=BD=E9=99=85?= =?UTF-8?q?=E5=8C=96=E9=9D=A2=E6=9D=BF=E3=80=81=E6=95=B0=E6=8D=AE=E6=BA=90?= =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E3=80=81JS=E9=9D=A2=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/designer/src/document/node/node.ts | 31 ++- packages/vision-polyfill/package.json | 3 + packages/vision-polyfill/public/index.html | 6 +- packages/vision-polyfill/src/demo/index.ts | 240 +++++++++++------- packages/vision-polyfill/src/editor.ts | 28 +- .../src/skeleton/workbench.less | 4 +- 6 files changed, 195 insertions(+), 117 deletions(-) diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index ffaa13aac..aa759f767 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -97,6 +97,10 @@ export class Node { */ 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 { } 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 { * @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; diff --git a/packages/vision-polyfill/package.json b/packages/vision-polyfill/package.json index c3622c862..14aa54c13 100644 --- a/packages/vision-polyfill/package.json +++ b/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", diff --git a/packages/vision-polyfill/public/index.html b/packages/vision-polyfill/public/index.html index 95ebbe0d2..d7faa8f56 100644 --- a/packages/vision-polyfill/public/index.html +++ b/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', diff --git a/packages/vision-polyfill/src/demo/index.ts b/packages/vision-polyfill/src/demo/index.ts index 3991f7e77..f8f029bb9 100644 --- a/packages/vision-polyfill/src/demo/index.ts +++ b/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(); diff --git a/packages/vision-polyfill/src/editor.ts b/packages/vision-polyfill/src/editor.ts index 8c5a1afed..5eab68ca4 100644 --- a/packages/vision-polyfill/src/editor.ts +++ b/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, +// }); diff --git a/packages/vision-polyfill/src/skeleton/workbench.less b/packages/vision-polyfill/src/skeleton/workbench.less index 92deeeacd..c4019db63 100644 --- a/packages/vision-polyfill/src/skeleton/workbench.less +++ b/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); From a8be56bcf5b6b45c128d93cf96fd05da45dcd332 Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Tue, 28 Apr 2020 17:10:18 +0800 Subject: [PATCH 5/5] eslint-disable --- packages/demo/src/vision/index.ts | 1 + packages/demo/src/vision/loader.js | 1 + packages/demo/src/vision/upgrade-assets.js | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/demo/src/vision/index.ts b/packages/demo/src/vision/index.ts index 492ccb964..7e46e904e 100644 --- a/packages/demo/src/vision/index.ts +++ b/packages/demo/src/vision/index.ts @@ -1,3 +1,4 @@ +/* eslint-disable */ import { createElement } from 'react'; import { Button } from '@alifd/next'; import Engine, { Panes } from '@ali/visualengine'; diff --git a/packages/demo/src/vision/loader.js b/packages/demo/src/vision/loader.js index 0774ae32a..4f4bd1a24 100644 --- a/packages/demo/src/vision/loader.js +++ b/packages/demo/src/vision/loader.js @@ -1,3 +1,4 @@ +/* eslint-disable */ function getStylePoint(id, level) { if (stylePointTable[id]) { return stylePointTable[id]; diff --git a/packages/demo/src/vision/upgrade-assets.js b/packages/demo/src/vision/upgrade-assets.js index 770bdf796..3548aaac5 100644 --- a/packages/demo/src/vision/upgrade-assets.js +++ b/packages/demo/src/vision/upgrade-assets.js @@ -1,3 +1,4 @@ +/* eslint-disable */ export function upgradeAssetsBundle(assets) { const components = []; const xPrototypes = [];