feat: 添加 utils 面板

packages/demo/src/editor/components.ts

@@ -2,8 +2,9 @@ import logo from '@ali/lowcode-plugin-sample-logo';
 import samplePreview from '@ali/lowcode-plugin-sample-preview';
 import undoRedo from '@ali/lowcode-plugin-undo-redo';
 import componentsPane from '@ali/lowcode-plugin-components-pane';
-import outline, { OutlinePane } from '@ali/lowcode-plugin-outline-pane';
+import outline from '@ali/lowcode-plugin-outline-pane';
 import dataSourcePane from '@ali/lowcode-plugin-datasource-pane';
+import utilsPane from '@ali/lowcode-plugin-utils-pane';
 import zhEn from '@ali/lowcode-plugin-zh-en';
 import eventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
 import variableBindDialog from '@ali/lowcode-plugin-variable-bind-dialog';
@@ -18,6 +19,7 @@ export default {
   undoRedo,
   componentsPane,
   outline,
+  utilsPane,
   zhEn,
   eventBindDialog,
   variableBindDialog,

packages/demo/src/editor/config.ts

@@ -83,6 +83,16 @@ export default {
         },
         pluginProps: {},
       },
+      {
+        pluginKey: 'utilsPane',
+        type: 'PanelIcon',
+        props: {
+          align: 'top',
+          icon: 'util',
+          description: '工具类',
+        },
+        pluginProps: {},
+      },
       {
         pluginKey: 'sourceEditor',
         type: 'PanelIcon',

packages/plugin-utils-pane/CHANGELOG.md

@@ -0,0 +1 @@
+# Change Log

packages/plugin-utils-pane/README.md

@@ -0,0 +1,3 @@
+## 关于 @ali/lowcode-plugin-utils-pane
+
+这是低代码引擎的 utils 面板。

packages/plugin-utils-pane/build.json

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

packages/plugin-utils-pane/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@ali/lowcode-plugin-utils-pane",
+  "version": "1.0.8-0",
+  "description": "alibaba lowcode editor utils pane plugin",
+  "files": [
+    "es/",
+    "lib/"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "stylePath": "style.js",
+  "scripts": {
+    "build": "build-scripts build --skip-demo",
+    "test": "ava",
+    "test:snapshot": "ava --update-snapshots"
+  },
+  "keywords": [
+    "lowcode",
+    "editor"
+  ],
+  "author": "changyun.pcy",
+  "dependencies": {
+    "@alifd/next": "1.x"
+  },
+  "peerDependencies": {
+    "@ali/lowcode-editor-core": "^1.0.8-0",
+    "prop-types": "^15.5.8",
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1",
+    "react-router-dom": "^5.1.2"
+  },
+  "devDependencies": {
+    "@alib/build-scripts": "^0.1.3",
+    "@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"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npm.alibaba-inc.com"
+  }
+}

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

@@ -0,0 +1,12 @@
+.lowcode-plugin-utils-pane {
+  position: relative;
+  font-size: 100%;
+  width: 100%;
+  transform: scale(1); // 这是为了让下面的弹层能正确地计算宽度
+
+  .lc-popup-placeholder {
+    position: fixed;
+    width: 100%;
+    transform: translateY(-100px);
+  }
+}

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

@@ -0,0 +1,213 @@
+import './index.scss';
+
+import React, { isValidElement, PureComponent } from 'react';
+
+import { Designer, SettingEntry, SettingField, SettingPropEntry } from '@ali/lowcode-designer';
+import { Editor, getSetter } from '@ali/lowcode-editor-core';
+import { PopupService } from '@ali/lowcode-editor-skeleton';
+
+import type { PluginProps, SetterType, FieldConfig, UtilsMap } from '@ali/lowcode-types';
+
+// 插件自定义props
+export interface UtilsPaneProps {}
+
+// 插件自定义state
+interface State {
+  utils: UtilsMap;
+}
+
+export class UtilsPane extends PureComponent<UtilsPaneProps & PluginProps, State> {
+  static displayName = 'UtilsPane';
+
+  // 插件初始化处理函数
+  static init = function (editor: Editor): void {};
+
+  state: State = {
+    utils: this.props.editor.get('designer')?.project?.get('utils') || [],
+  };
+
+  private _itemSetter: SetterType = {
+    componentName: 'ObjectSetter',
+    props: {
+      config: {
+        items: [
+          {
+            name: 'name',
+            title: '名称',
+            setter: {
+              componentName: 'StringSetter',
+            },
+          },
+          {
+            name: 'type',
+            title: '类型',
+            initialValue: 'npm',
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                dataSource: [
+                  { label: 'NPM 包', value: 'npm' },
+                  // { label: '自定义函数', value: 'function' },
+                ],
+              },
+            },
+          },
+          {
+            name: 'content',
+            title: '内容',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'componentName',
+                      title: '组件名称',
+                      setter: {
+                        componentName: 'StringSetter',
+                      },
+                    },
+                    {
+                      name: 'package',
+                      title: '包名',
+                      setter: {
+                        componentName: 'StringSetter',
+                      },
+                    },
+                    {
+                      name: 'version',
+                      title: '版本号',
+                      setter: {
+                        componentName: 'StringSetter',
+                      },
+                    },
+                    {
+                      name: 'destructuring',
+                      title: '解构',
+                      setter: {
+                        componentName: 'BoolSetter',
+                      },
+                    },
+                    {
+                      name: 'exportName',
+                      title: '导出名',
+                      setter: {
+                        componentName: 'StringSetter',
+                      },
+                    },
+                    {
+                      name: 'subName',
+                      title: '子导出名',
+                      setter: {
+                        componentName: 'StringSetter',
+                      },
+                    },
+                    {
+                      name: 'main',
+                      title: '主入口',
+                      setter: {
+                        componentName: 'StringSetter',
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  };
+
+  private _field = new SettingField(this._getSettingEntry(), this._getFieldConfig());
+  private _cleanups: Array<() => void> = [];
+
+  // 打开或激活插件前的切片处理函数
+  open(): void | boolean | Promise<void> {}
+
+  // 关闭或挂起插件前的切片处理函数
+  close(): void | boolean | Promise<void> {}
+
+  componentDidMount() {
+    this._cleanups.push(
+      this._field.onValueChange(() => {
+        this.setState({
+          utils: this._field.getHotValue(),
+        });
+      }),
+    );
+  }
+
+  componentWillUnmount() {
+    this._cleanups.forEach((clean) => {
+      clean();
+    });
+  }
+
+  render(): React.ReactNode {
+    const ArraySetter = this._getArraySetter();
+
+    return (
+      <div className="lowcode-plugin-utils-pane">
+        <p>I am a lowcode engine demo</p>
+        <PopupService align="r">
+          <ArraySetter
+            field={this._field}
+            value={this.state.utils}
+            onChange={this._handleValueChange}
+            mode="list"
+            itemSetter={this._itemSetter}
+          />
+        </PopupService>
+      </div>
+    );
+  }
+
+  private _handleValueChange = (value: UtilsMap) => {
+    this.setState({ utils: value });
+    this._updateProjectUtils(value);
+  };
+
+  private _getSettingEntry(): SettingEntry {
+    const editor = this.props.editor;
+    const designer = editor.get('designer') as Designer;
+    const document = designer.currentDocument!;
+    const rootNode = document.rootNode!;
+
+    // TODO: remove debug code :
+    Object.assign(window, { editor, designer, utilsPane: this });
+
+    return new SettingPropEntry(rootNode.settingEntry, '__internal', 'field');
+  }
+
+  private _getFieldConfig(): FieldConfig {
+    return {
+      name: '__utils',
+      setter: this._itemSetter,
+    };
+  }
+
+  private _getArraySetter(): React.ComponentType<any> {
+    const arraySetter = getSetter('ArraySetter');
+    if (!arraySetter) {
+      return () => <span>Error: ArraySetter is missing!</span>;
+    }
+
+    const { component: ArraySetter } = arraySetter;
+    if (isValidElement(ArraySetter)) {
+      return (props: unknown) => React.cloneElement(ArraySetter);
+    }
+
+    return ArraySetter;
+  }
+
+  private get _designer(): Designer {
+    return this.props.editor.get('designer')!;
+  }
+
+  private _updateProjectUtils(utils: UtilsMap) {
+    this._designer.project.set('utils', utils);
+  }
+}
+
+export default UtilsPane;

packages/plugin-utils-pane/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "lib"
+  },
+  "include": [
+    "./src/"
+  ]
+}
+