@luck-design-biz/luckda 0.0.24-2 → 0.0.25

package/es/lowcode/engine/provider/{ContextProvider.js → ContextProvider/index.js}

@@ -4,13 +4,13 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["source"];
 import React, { createContext, useContext, useRef, useEffect } from 'react';
 import { history } from 'umi';
-import { useRequest, useMemoizedFn } from 'ahooks';
-import { useLDEventBus } from "./EventBusProvider";
-import usePromiseState from "../tools/usePromiseState";
-import { doAction } from "../../../helper/action";
-import * as topics from "../../constants/event-topics";
-import { decompress } from "../tools/dataProcess";
-import { fetchPageData } from "../../constants/api-url";
+import { useRequest, useMemoizedFn, useSetState } from 'ahooks';
+import { useLDEventBus } from "../EventBusProvider";
+import usePromiseState from "../../tools/usePromiseState";
+import * as topics from "../../../constants/event-topics";
+import { decompress } from "../../tools/dataProcess";
+import { executeCode } from "../../tools/helper";
+import { fetchPageData } from "../../../constants/api-url";
 export var Context = /*#__PURE__*/createContext(null);
 export var useLDContext = function useLDContext() {
   return useContext(Context);
@@ -34,6 +34,14 @@ export default (function (_ref) {
    */
   var _pageinfo = useRef(null);
 
+  /**
+   * 页面公共资源
+   */
+  var _useSetState = useSetState(null),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    pagePublicResource = _useSetState2[0],
+    _setPagePublicResource = _useSetState2[1];
+
   /**
    * 组件列表
    */
@@ -55,7 +63,7 @@ export default (function (_ref) {
    * id:string 组件id
    * component:ReactNode 组件
    */
-  var register = useMemoizedFn(function (id, component) {
+  var _register = useMemoizedFn(function (id, component) {
     _componentList.current.push([id, component]);
   });
 
@@ -63,7 +71,7 @@ export default (function (_ref) {
    * 注销组件
    * id:string 组件id
    */
-  var unregister = useMemoizedFn(function (id) {
+  var _unregister = useMemoizedFn(function (id) {
     _componentList.current = _componentList.current.filter(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 1),
         _id = _ref3[0];
@@ -110,6 +118,17 @@ export default (function (_ref) {
    * return:object
    */
   var getUrlParams = useMemoizedFn(function () {});
+  var doAction = useMemoizedFn(function (action) {
+    executeCode(ctx, action.actionCode);
+    Promise.all(action.actionPool.map(function (actionKey) {
+      return new Promise(function (resolve) {
+        setTimeout(function () {
+          console.log("doAction:".concat(actionKey));
+          resolve(actionKey);
+        }, 400);
+      });
+    })).then();
+  });
   var _useRequest = useRequest(fetchPageData, {
       manual: true
     }),
@@ -132,38 +151,49 @@ export default (function (_ref) {
       }
     });
   }, [code]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: new Proxy(_objectSpread({
-      _setPageData: _setPageData,
-      loading: loading,
-      pageData: pageData,
-      history: history,
-      topics: topics,
-      register: register,
-      unregister: unregister,
-      getElementById: getElementById,
-      getParentElement: getParentElement,
-      getElementPathById: getElementPathById,
-      getModule: getModule,
-      getDataSetById: getDataSetById,
-      doAction: doAction,
-      getUrlParams: getUrlParams
-    }, eventBus), {
-      get: function get(target, property, receiver) {
-        if (PRIVATE_KEYS.includes(property)) {
-          var _privateGetter$curren;
-          return (_privateGetter$curren = _privateGetter.current) === null || _privateGetter$curren === void 0 ? void 0 : _privateGetter$curren[property]();
-        }
-        return Reflect.get(target, property, receiver);
-      },
-      set: function set(target, property, receiver) {
-        console.log('set', target, property, receiver);
-        if (PRIVATE_KEYS.includes(property)) {
-          throw new Error("\u5C5E\u6027 \"".concat(property, "\" \u662F\u53EA\u8BFB\u7684"));
-        } else {
-          return Reflect.set(target, property, receiver);
-        }
+  var ctx = new Proxy(_objectSpread({
+    _setPageData: _setPageData,
+    _register: _register,
+    _unregister: _unregister,
+    loading: loading,
+    pageData: pageData,
+    pagePublicResource: pagePublicResource,
+    history: history,
+    topics: topics,
+    getElementById: getElementById,
+    /**
+     * @method
+     * @param {string} id - 组件id
+     * @return {object}
+     */
+    getParentElement: getParentElement,
+    getElementPathById: getElementPathById,
+    getModule: getModule,
+    getDataSetById: getDataSetById,
+    doAction: doAction,
+    /**
+     * @method
+     * @return {object}
+     */
+    getUrlParams: getUrlParams
+  }, eventBus), {
+    get: function get(target, property, receiver) {
+      if (PRIVATE_KEYS.includes(property)) {
+        var _privateGetter$curren;
+        return (_privateGetter$curren = _privateGetter.current) === null || _privateGetter$curren === void 0 ? void 0 : _privateGetter$curren[property]();
       }
-    })
+      return Reflect.get(target, property, receiver);
+    },
+    set: function set(target, property, receiver) {
+      console.log('set', target, property, receiver);
+      if (PRIVATE_KEYS.includes(property)) {
+        throw new Error("\u5C5E\u6027 \"".concat(property, "\" \u662F\u53EA\u8BFB\u7684"));
+      } else {
+        return Reflect.set(target, property, receiver);
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: ctx
   }, children);
 });

package/es/lowcode/engine/tools/helper.js

@@ -1,7 +1,8 @@
+import _construct from "@babel/runtime/helpers/esm/construct";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-import { omit } from 'lodash';
+import { omit, omitBy, startsWith, isNil, isString, isArray } from 'lodash';
 export function isPromise(value) {
   return !!value && _typeof(value) === 'object' && typeof value.then === 'function';
 }
@@ -69,4 +70,31 @@ export function listReducer(state, action) {
     default:
       throw new Error();
   }
+}
+export function getCtx(context) {
+  return omitBy(context, function (_, key) {
+    return startsWith(key, '_');
+  });
+}
+export function getFuncBody(funcCode) {
+  var regex = /{([\s\S]*?)}(?![\s\S]*})/;
+  var matches = funcCode.match(regex);
+  if (matches) {
+    return matches[1].replace(/\s*\n\s*/g, ' ').trim();
+  }
+  return '';
+}
+export function executeCode(context, code, argsName) {
+  if (!isString(code)) {
+    throw new Error('executeCode编码参数无效');
+  }
+  for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+    args[_key - 3] = arguments[_key];
+  }
+  if (isNil(argsName) && args.length > 0 || !isNil(argsName) && !isArray(argsName) || isArray(argsName) && argsName.length !== (args === null || args === void 0 ? void 0 : args.length)) {
+    throw new Error('executeCode参数不匹配');
+  }
+  var ctx = getCtx(context);
+  var func = _construct(Function, _toConsumableArray(argsName || []).concat(['ctx', getFuncBody(code)]));
+  return func.apply(void 0, args.concat([ctx]));
 }

package/es/lowcode/engine/tools/usePromiseState.js

@@ -1,11 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useRef, useCallback } from 'react';
-import { useSafeState, useDeepCompareEffect } from 'ahooks';
+import { useResetState, useDeepCompareEffect } from 'ahooks';
 var usePromiseState = function usePromiseState(initialState) {
-  var _useSafeState = useSafeState(initialState),
-    _useSafeState2 = _slicedToArray(_useSafeState, 2),
-    state = _useSafeState2[0],
-    setState = _useSafeState2[1];
+  var _useResetState = useResetState(initialState),
+    _useResetState2 = _slicedToArray(_useResetState, 3),
+    state = _useResetState2[0],
+    setState = _useResetState2[1],
+    resetState = _useResetState2[2];
   var promiseRef = useRef(null);
   var setStatePromise = useCallback(function (_state) {
     return new Promise(function (resolve) {
@@ -19,6 +20,6 @@ var usePromiseState = function usePromiseState(initialState) {
       promiseRef.current = null;
     }
   }, [state]);
-  return [state, setStatePromise];
+  return [state, setStatePromise, resetState];
 };
 export default usePromiseState;

package/es/lowcode/painter/Panel.js

@@ -1,36 +1,41 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["type", "key", "name", "desc", "default", "props", "panelItem", "next", "repositioning"];
 import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
-import { useBoolean, useCreation, useMemoizedFn } from 'ahooks';
-import { Breadcrumb, Drawer, Icon } from 'luck-design/antd';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { Breadcrumb } from 'luck-design/antd';
 import classNames from 'classnames';
-import { startsWith, takeRight, cloneDeep, isNil } from 'lodash';
+import { takeRight, cloneDeep, isNil } from 'lodash';
+import { formatMessage } from '@luck-design-biz/base/utils';
 import { useLDContext } from "../engine/provider/ContextProvider";
-import PanelItem from "./components/PanelItem";
-import PanelItemFactory from "../engine/factory/panel-item-factory";
+import AttrsPanel from "./components/AttrsPanel";
+import StylePanel from "./panel-section/StylePanel";
+import AdvancePanel from "./components/AdvancePanel";
 import { modifyById } from "../engine/tools/dataProcess";
 import styles from "./style/panel.less";
-import StylePanel from "./panel-section/StylePanel";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel';
 var _TAB_LIST_ = [{
-  title: '属性',
+  title: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".attrs"),
+    label: '属性'
+  }),
   key: 'attrs'
 }, {
-  title: '样式',
+  title: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".styles"),
+    label: '样式'
+  }),
   key: 'styles'
 }, {
-  title: '高级',
+  title: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".advance"),
+    label: '高级'
+  }),
   key: 'advance'
 }];
 var Panel = function Panel() {
-  var _nextRef$current, _nextRef$current2;
   var activeTabRef = useRef(null);
   var underLineRef = useRef(null);
-  var nextRef = useRef(null);
-  var factory = useRef(new PanelItemFactory());
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     activeNode = _useState2[0],
@@ -39,13 +44,10 @@ var Panel = function Panel() {
     _useState4 = _slicedToArray(_useState3, 2),
     activeTabKey = _useState4[0],
     setActiveTabKey = _useState4[1];
-  var _useBoolean = useBoolean(false),
-    _useBoolean2 = _slicedToArray(_useBoolean, 2),
-    open = _useBoolean2[0],
-    _useBoolean2$ = _useBoolean2[1],
-    setTrue = _useBoolean2$.setTrue,
-    setFalse = _useBoolean2$.setFalse;
   var context = useLDContext();
+  var meta = useCreation(function () {
+    return isNil(activeNode) ? null : require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
+  }, [activeNode]);
   var handleChange = useMemoizedFn(function (field, value, repositioning) {
     var component = context.componentMap.get(activeNode.node.id);
     var _component$api$getSel = component.api.getSelfAndParentLCData(),
@@ -61,85 +63,10 @@ var Panel = function Panel() {
         id: activeNode.node.id
       });
     });
-    if (nextRef.current.autoClose) {
-      setFalse();
-    }
-  });
-  var handleStyleChange = useMemoizedFn(function (newStyle, newCss) {
-    console.log('style', newStyle, newCss);
-    // setCss(newCss);
-  });
-  var goNext = useMemoizedFn(function (_next) {
-    if (!_next) return;
-    nextRef.current = {
-      name: _next.name,
-      autoClose: _next.autoClose,
-      NextComp: renderPanelItems(_next.props)
-    };
-    setTrue();
-  });
-  var renderPanelItems = useMemoizedFn(function (items) {
-    return items.map(function (_ref) {
-      var type = _ref.type,
-        key = _ref.key,
-        name = _ref.name,
-        desc = _ref.desc,
-        defaultValue = _ref.default,
-        props = _ref.props,
-        panelItem = _ref.panelItem,
-        _next2 = _ref.next,
-        repositioning = _ref.repositioning,
-        rest = _objectWithoutProperties(_ref, _excluded);
-      var Comp = factory.current.getPanelItemFor(startsWith(type, '_') ? 'dynamic' : type, type);
-      if (type === 'group') {
-        return /*#__PURE__*/React.createElement(Comp, {
-          key: key,
-          field: key,
-          label: name,
-          next: _next2 ? function () {
-            return goNext(_next2);
-          } : null,
-          defaultCollapsed: defaultValue,
-          desc: desc
-        }, renderPanelItems(props || []));
-      }
-      var _context$componentMap = context.componentMap.get(activeNode.node.id).api.getSelfAndParentLCData(),
-        node = _context$componentMap.node;
-      return /*#__PURE__*/React.createElement(PanelItem, _extends({
-        key: key,
-        field: key,
-        label: name,
-        desc: desc
-      }, panelItem), Comp && /*#__PURE__*/React.createElement(Comp, _extends({
-        defaultValue: isNil(node.props[key]) ? defaultValue : node.props[key],
-        next: function next() {
-          return goNext(_next2);
-        },
-        onChange: function onChange(value) {
-          return handleChange(key, value, repositioning);
-        },
-        size: "small"
-      }, rest)));
-    });
   });
-  var PropsComps = useCreation(function () {
-    setActiveTabKey('attrs');
-    var _meta;
-    try {
-      _meta = require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
-    } catch (e) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null);
-    }
-    return renderPanelItems(_meta.props);
-  }, [activeNode]);
-  useEffect(function () {
-    if (!open) {
-      nextRef.current = null;
-    }
-  }, [open]);
   useEffect(function () {
     var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
-      setFalse();
+      setActiveTabKey('attrs');
       if (!payload.id) {
         setActiveNode(null);
         return;
@@ -154,7 +81,7 @@ var Panel = function Panel() {
       });
     }).watch();
     return function () {
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+      return context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
   }, []);
   useLayoutEffect(function () {
@@ -169,9 +96,9 @@ var Panel = function Panel() {
     style: {
       fontSize: 12
     }
-  }, activeNode === null || activeNode === void 0 ? void 0 : activeNode.level.map(function (_ref2) {
-    var id = _ref2.id,
-      name = _ref2.name;
+  }, activeNode === null || activeNode === void 0 ? void 0 : activeNode.level.map(function (_ref) {
+    var id = _ref.id,
+      name = _ref.name;
     return /*#__PURE__*/React.createElement(Breadcrumb.Item, {
       key: id,
       className: classNames(_defineProperty({}, styles['active-node-level'], id !== activeNode.node.id)),
@@ -196,7 +123,7 @@ var Panel = function Panel() {
     className: classNames(styles['lc-painter-panel-tabbar'], _defineProperty({}, styles.hidden, !activeNode))
   }, /*#__PURE__*/React.createElement("ul", {
     className: styles.headerList
-  }, (activeNode !== null && activeNode !== void 0 && activeNode.node.style ? _TAB_LIST_ : [_TAB_LIST_[0], _TAB_LIST_[2]]).map(function (_item) {
+  }, (activeNode !== null && activeNode !== void 0 && activeNode.node.css ? _TAB_LIST_ : [_TAB_LIST_[0], _TAB_LIST_[2]]).map(function (_item) {
     return /*#__PURE__*/React.createElement("li", {
       key: _item.key,
       ref: activeTabKey === _item.key ? activeTabRef : null,
@@ -208,38 +135,28 @@ var Panel = function Panel() {
   })), /*#__PURE__*/React.createElement("div", {
     ref: underLineRef,
     className: styles.underline
-  })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles['lc-painter-panel-content'], _defineProperty(_defineProperty({}, styles.hidden, !activeNode), styles.showNext, open))
-  }, PropsComps, /*#__PURE__*/React.createElement(Drawer, {
-    visible: open,
-    width: 320,
-    mask: false,
-    closable: false,
-    getContainer: false,
-    destroyOnClose: true,
-    style: {
-      position: 'absolute'
-    },
-    bodyStyle: {
-      padding: 0,
-      height: '100%'
+  })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/React.createElement(AttrsPanel, {
+    meta: meta,
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node,
+    onChange: function onChange(field, value, repositioning) {
+      return handleChange(field, value, repositioning);
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles['next-content']
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles['next-content-header'],
-    onClick: setFalse
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "left"
-  }), (_nextRef$current = nextRef.current) === null || _nextRef$current === void 0 ? void 0 : _nextRef$current.name, /*#__PURE__*/React.createElement(Icon, {
-    type: "close"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles['next-content-body']
-  }, (_nextRef$current2 = nextRef.current) === null || _nextRef$current2 === void 0 ? void 0 : _nextRef$current2.NextComp)))), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/React.createElement(StylePanel, {
-    onChange: handleStyleChange,
-    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.style
-  }), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/React.createElement("div", null, "\u9AD8\u7EA7\u9762\u677F"), /*#__PURE__*/React.createElement("div", {
+  }), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/React.createElement(StylePanel, {
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.css,
+    onChange: function onChange(_, newCss) {
+      return handleChange('css', newCss);
+    }
+  }), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/React.createElement(AdvancePanel, {
+    meta: meta,
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node,
+    onChange: function onChange(val) {
+      return handleChange('advance', val);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
     className: classNames(styles['lc-painter-panel-empty'], _defineProperty({}, styles.hidden, !!activeNode))
-  }, "\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9"));
+  }, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".empty"),
+    label: '请在左侧画布选中节点'
+  })));
 };
 export default Panel;

package/es/lowcode/painter/Ribbon.js

@@ -14,7 +14,7 @@ var _DRAWER_PROPS = {
   placement: 'left',
   mask: false,
   getContainer: false,
-  zIndex: 10000,
+  zIndex: 2000,
   headerStyle: {
     borderBottom: 'none'
   },

package/es/lowcode/painter/components/ActionBindModal.js

@@ -0,0 +1,180 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, forwardRef, useImperativeHandle } from 'react';
+import { useMemoizedFn, useCreation, useMap } from 'ahooks';
+import { Modal, Icon, Input, Checkbox } from 'luck-design/antd';
+import classNames from 'classnames';
+import { reduce } from 'lodash';
+import { useLDContext } from "../../engine/provider/ContextProvider";
+import JSEditor from "./code-editor/JSEditor";
+import { formatMessage } from '@luck-design-biz/base/utils';
+import styles from "../style/action-bind-modal.less";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.actionBindModal';
+var _ACTION_CATEGORY_ = [{
+  key: 'actions',
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".actions"),
+    label: '页面行为'
+  })
+}, {
+  key: 'trigger',
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".trigger"),
+    label: '触发器'
+  })
+}, {
+  key: 'code',
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".code"),
+    label: '自定义动作'
+  })
+}];
+var _CATEGORY_CODE_ITEMS = [{
+  key: 'coding',
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".coding"),
+    label: '动作编写'
+  })
+}];
+var ActionBindModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var activeNode = _ref.activeNode,
+    onComfirm = _ref.onComfirm;
+  var context = useLDContext();
+  var _useState = useState(void 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    title = _useState2[0],
+    setTitle = _useState2[1];
+  var _useState3 = useState('actions'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    category = _useState4[0],
+    setCategory = _useState4[1];
+  var _useMap = useMap([]),
+    _useMap2 = _slicedToArray(_useMap, 2),
+    actionPool = _useMap2[0],
+    _useMap2$ = _useMap2[1],
+    set = _useMap2$.set,
+    remove = _useMap2$.remove,
+    reset = _useMap2$.reset,
+    get = _useMap2$.get;
+  var selectItems = useCreation(function () {
+    if (category === 'actions') {
+      return [];
+    } else if (category === 'trigger') {
+      return reduce(context.componentList, function (ret, _ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          target = _ref3[1];
+        if (key !== activeNode.id) {
+          ret.push({
+            key: key,
+            label: "".concat(target.api.getSelfAndParentLCData().node.props.name, "(").concat(key, ")")
+          });
+        }
+        return ret;
+      }, []);
+    } else if (category === 'code') {
+      return _CATEGORY_CODE_ITEMS;
+    }
+    return [];
+  }, [category]);
+  var handleClose = useMemoizedFn(function () {
+    setTitle(void 0);
+  });
+  var handleComfirm = useMemoizedFn(function () {
+    handleClose();
+  });
+  var handleSearch = useMemoizedFn(function (val) {});
+  useImperativeHandle(ref, function () {
+    return {
+      doOpen: function doOpen(title) {
+        setTitle(title);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Modal, {
+    className: styles['lc-painter-panel-action-bind-modal'],
+    bodyStyle: {
+      marginTop: 0,
+      padding: '4px 24px'
+    },
+    title: title,
+    visible: !!title,
+    width: 960,
+    closable: false,
+    maskClosable: false,
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    zIndex: 3000,
+    onCancel: handleClose,
+    onOk: handleComfirm
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-action-bind-modal-body']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-action-bind-modal-body-left']
+  }, /*#__PURE__*/React.createElement("p", null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".bind"),
+    label: '绑定动作'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-box']
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: classNames(styles['selector-box-ul'], styles['action-category'])
+  }, _ACTION_CATEGORY_.map(function (_ref4) {
+    var key = _ref4.key,
+      label = _ref4.label;
+    return /*#__PURE__*/React.createElement("li", {
+      key: key,
+      className: classNames(_defineProperty({}, styles.active, key === category)),
+      onClick: function onClick() {
+        return setCategory(key);
+      }
+    }, label, key === category && /*#__PURE__*/React.createElement(Icon, {
+      type: "check",
+      className: styles['check-icon']
+    }));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['selecter-items-box']
+  }, category !== 'code' && /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 42,
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Input.Search, {
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".search"),
+      label: '搜索'
+    }),
+    size: "small",
+    onSearch: handleSearch,
+    style: {
+      width: 170,
+      alignSelf: 'center'
+    }
+  })), /*#__PURE__*/React.createElement("ul", {
+    className: classNames(styles['selector-box-ul'], styles['selecter-items'])
+  }, selectItems.map(function (_ref5) {
+    var key = _ref5.key,
+      label = _ref5.label;
+    return /*#__PURE__*/React.createElement("li", {
+      key: key,
+      className: classNames(_defineProperty({}, styles.active, actionPool.has(key))),
+      onClick: function onClick() {
+        return set(key, label);
+      }
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      checked: actionPool.has(key),
+      style: {
+        marginRight: 4
+      }
+    }), label);
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-action-bind-modal-body-right']
+  }, category === 'code' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".coding"),
+    label: '动作编写'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['code-box']
+  }, /*#__PURE__*/React.createElement(JSEditor, null))))));
+});
+export default ActionBindModal;