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

package/lib/lowcode/painter/DesignOperator.js

@@ -0,0 +1,278 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../engine/provider/ContextProvider");
+var _dataProcess = require("../engine/tools/dataProcess");
+var _constants = require("../constants");
+var _design = _interopRequireDefault(require("./style/design.less"));
+var _MODAL_COMPONENT_ = ['Dialog', 'Drawer'];
+var getOperatorStyle = function getOperatorStyle(page, cellNode) {
+  var _page$getBoundingClie = page.getBoundingClientRect(),
+    pageLeft = _page$getBoundingClie.left,
+    pageTop = _page$getBoundingClie.top;
+  var _cellNode$getBounding = cellNode.getBoundingClientRect(),
+    cellNodeLeft = _cellNode$getBounding.left,
+    cellNodeTop = _cellNode$getBounding.top;
+  return {
+    left: "".concat(cellNodeLeft - pageLeft, "px"),
+    top: "".concat(cellNodeTop - pageTop, "px"),
+    width: "".concat(cellNode.offsetWidth, "px"),
+    height: "".concat(cellNode.offsetHeight, "px")
+  };
+};
+var DesignOperator = function DesignOperator(_ref) {
+  var _getDomById, _getDomById2;
+  var target = _ref.target;
+  var context = (0, _ContextProvider.useLDContext)();
+  var size = (0, _ahooks.useSize)(target);
+  var _useState = (0, _react.useState)((0, _utils.suid)()),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    positionKey = _useState2[0],
+    setPositionKey = _useState2[1];
+  var _useSetState = (0, _ahooks.useSetState)({
+      selector: null,
+      detector: null
+    }),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    operatorId = _useSetState2[0],
+    setOperatorId = _useSetState2[1];
+  var lastSelectorId = (0, _ahooks.useLatest)(operatorId.selector);
+  var currentModal = (0, _react.useRef)(null);
+  var getDomById = (0, _ahooks.useMemoizedFn)(function (id) {
+    return context.componentMap.get(id).dom;
+  });
+  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+      id: _key
+    } : null);
+  });
+  var handleHover = (0, _ahooks.useMemoizedFn)(function (_key) {
+    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
+      id: _key
+    } : null);
+  });
+  var handleDelete = (0, _ahooks.useMemoizedFn)(function (_ref2) {
+    var id = _ref2.id,
+      parentId = _ref2.parentId;
+    context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+    var cloneData = (0, _lodash.cloneDeep)(context.pageData);
+    (0, _dataProcess.deleteById)(cloneData, id);
+    context._setPageData(cloneData).then(function (newData) {
+      context.$publisher(context.topics.COMPONENT_DELETE, {
+        id: id,
+        parentId: parentId,
+        pageData: newData
+      });
+    });
+  });
+  var addComponent = (0, _ahooks.useMemoizedFn)(function (data, targetId) {
+    var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
+    var _id = "".concat(data.component.toLowerCase(), "_").concat((0, _utils.suid)());
+    var cloneData = (0, _lodash.cloneDeep)(context.pageData);
+    (0, _dataProcess.add)(cloneData, targetId, _id, json);
+    context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref3) {
+      var mountCompId = _ref3.id;
+      if (mountCompId === _id) {
+        context.$publisher(context.topics.COMPONENT_APPEND, {
+          id: _id,
+          pageData: cloneData
+        });
+      }
+    }).watch();
+    context._setPageData(cloneData);
+  });
+  var acticeProps = (0, _ahooks.useCreation)(function () {
+    if (!operatorId.selector) return null;
+    var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
+    return {
+      props: (0, _lodash.last)(levelNodes),
+      menu: /*#__PURE__*/_react.default.createElement("div", {
+        className: _design.default['next-overlay-wrapper'],
+        onMouseLeave: function onMouseLeave() {
+          return handleHover();
+        }
+      }, (0, _lodash.reverse)((0, _lodash.initial)(levelNodes)).map(function (m) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: m.id
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          onClick: function onClick() {
+            return handleSelect(m.id);
+          },
+          onMouseOver: function onMouseOver() {
+            return handleHover(m.id);
+          }
+        }, m.name));
+      }))
+    };
+  }, [operatorId.selector]);
+  var lastDetectorNode = (0, _ahooks.useCreation)(function () {
+    return operatorId.detector ? (0, _lodash.last)(context.componentMap.get(operatorId.detector).api.getLevelNodes()) : null;
+  }, [operatorId.detector]);
+  (0, _ahooks.useEventListener)('mousemove', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
+    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
+    if (targetCellId && targetCellId !== operatorId.detector && targetCellId !== operatorId.selector) {
+      setOperatorId({
+        detector: targetCellId
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, {
+        id: targetCellId
+      });
+    } else if (!targetCell || targetCellId === operatorId.selector) {
+      setOperatorId({
+        detector: null
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: target
+  });
+  (0, _ahooks.useEventListener)('mouseleave', function () {
+    if (operatorId.detector) {
+      setOperatorId({
+        detector: null
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: target
+  });
+  (0, _ahooks.useEventListener)('click', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
+    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
+    if (!targetCellId || targetCellId === operatorId.selector) return;
+    context.$publisher(context.topics.COMPONENT_HOVER, null);
+    context.$publisher(context.topics.COMPONENT_ACTIVE, {
+      id: targetCell.id
+    });
+  }, {
+    target: target
+  });
+  (0, _react.useEffect)(function () {
+    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
+      var data = _ref4.data;
+      if (_MODAL_COMPONENT_.includes(data.component)) {
+        context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref5) {
+          var compId = _ref5.id;
+          context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+            toggle: true,
+            id: compId
+          });
+          context.$publisher(context.topics.COMPONENT_ACTIVE, {
+            id: compId
+          });
+        }).watch();
+        addComponent(data, _constants.CELL_KEY.PAGE_ROOT);
+        return;
+      }
+      if (!lastSelectorId.current) {
+        _antd.message.info('请在右侧画布选择节点');
+        return;
+      }
+      if (context.componentMap.get(lastSelectorId.current).dom.getAttribute('name') !== 'box') {
+        _antd.message.info('该节点不支持添加子节点');
+        return;
+      }
+      addComponent(data, lastSelectorId.current);
+    }).watch();
+    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
+      if (payload.id) setOperatorId({
+        detector: payload.id
+      });else setOperatorId({
+        detector: null
+      });
+    }).watch();
+    var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      if (payload.id) {
+        setOperatorId({
+          selector: payload.id,
+          detector: null
+        });
+      } else {
+        setOperatorId({
+          selector: null
+        });
+      }
+    }).watch();
+    var cmtid = context.$subscriber(context.topics.COMPONENT_MODAL_TOGGLE).on(function (_ref6) {
+      var toggle = _ref6.toggle,
+        id = _ref6.id;
+      if (toggle) {
+        target.current.style.setProperty('overflow', 'hidden');
+        var _modal = context.componentMap.get(id);
+        var _prevModal = currentModal.current ? context.componentMap.get(currentModal.current) : null;
+        _prevModal === null || _prevModal === void 0 || _prevModal.api.doClose();
+        _modal.api.doOpen();
+        currentModal.current = id;
+      } else {
+        target.current.style.removeProperty('overflow');
+        var _modal2 = context.componentMap.get(id || currentModal.current);
+        _modal2.api.doClose();
+        currentModal.current = void 0;
+      }
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
+      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
+      context.$unsubscriber(context.topics.MODAL_OPEN, cmtid);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    var crid = context.$subscriber(context.topics.COMPONENT_REPOSITIONING).on(function (payload) {
+      if (payload.id === operatorId.selector) setPositionKey((0, _utils.suid)());
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_REPOSITIONING, crid);
+    };
+  }, [operatorId.selector]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, operatorId.detector && /*#__PURE__*/_react.default.createElement("div", {
+    id: "lc-detector",
+    className: _design.default['lc-painter-design-detector'],
+    style: getOperatorStyle(target.current, getDomById(operatorId.detector))
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _design.default['lc-painter-design-detector-name'],
+    style: {
+      top: ((_getDomById = getDomById(operatorId.detector)) === null || _getDomById === void 0 ? void 0 : _getDomById.offsetTop) < 23 ? 0 : '-23px'
+    }
+  }, lastDetectorNode ? "".concat(lastDetectorNode.name, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/_react.default.createElement("div", {
+    id: "lc-selector",
+    key: "".concat((size === null || size === void 0 ? void 0 : size.width) || 0, "-").concat((size === null || size === void 0 ? void 0 : size.height) || 0, "-").concat(positionKey),
+    className: _design.default['lc-painter-design-selector'],
+    style: getOperatorStyle(target.current, getDomById(operatorId.selector))
+  }, acticeProps && /*#__PURE__*/_react.default.createElement("div", {
+    className: _design.default['lc-borders-actions'],
+    style: acticeProps.props.id === _constants.CELL_KEY.PAGE_ROOT ? {
+      top: 0
+    } : ((_getDomById2 = getDomById(operatorId.selector)) === null || _getDomById2 === void 0 ? void 0 : _getDomById2.offsetTop) < 23 ? {
+      bottom: '-23px'
+    } : {
+      top: '-23px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
+    overlay: acticeProps.menu,
+    placement: "bottomLeft"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "instance-node-selector"
+  }, acticeProps.props.name)), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: function onClick() {
+      return handleDelete(acticeProps.props);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "delete"
+  })))));
+};
+var _default = exports.default = DesignOperator;

package/lib/lowcode/painter/DesignToolbar.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _antd = require("luck-design/antd");
+var _ContextProvider = require("../engine/provider/ContextProvider");
+var _constants = require("../constants");
+var _design = _interopRequireDefault(require("./style/design.less"));
+var DesignToolbar = function DesignToolbar(_ref) {
+  var locale = _ref.locale,
+    onLangChange = _ref.onLangChange;
+  var context = (0, _ContextProvider.useLDContext)();
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    langList = _useState2[0],
+    setLangList = _useState2[1];
+  var _useState3 = (0, _react.useState)('pc'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activedTarget = _useState4[0],
+    setActivedTarget = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref2) {
+      var _langList = _ref2.langList;
+      return setLangList(_langList);
+    }).watch();
+    return function () {
+      return context.$unsubscriber(context.topics.LANG_SETTING_SELECT, topicId);
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _design.default['lc-painter-design-toolbar']
+  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    size: "small",
+    value: langList ? locale : undefined,
+    className: _design.default['i18n-selecter'],
+    style: {
+      fontSize: 12
+    },
+    onSelect: onLangChange
+  }, langList === null || langList === void 0 ? void 0 : langList.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+      key: item.field,
+      value: item.field
+    }, item.title);
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'pc')),
+    onClick: function onClick() {
+      return setActivedTarget('pc');
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "laptop"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'mobile')),
+    onClick: function onClick() {
+      return setActivedTarget('mobile');
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "mobile"
+  })), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      width: 'auto',
+      fontSize: 12
+    },
+    className: _design.default['toolbar-item'],
+    onClick: function onClick() {
+      context.$publisher(context.topics.COMPONENT_ACTIVE, {
+        id: _constants.CELL_KEY.PAGE_ROOT
+      });
+    }
+  }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "small",
+    style: {
+      fontSize: 12,
+      margin: '0 2px'
+    }
+  }, "\u9884\u89C8"), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "small",
+    type: "primary",
+    style: {
+      fontSize: 12,
+      margin: '0 0 0 2px'
+    }
+  }, "\u4FDD\u5B58"));
+};
+var _default = exports.default = DesignToolbar;

package/lib/lowcode/painter/I18n.js

@@ -1,12 +1,213 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _umi = require("umi");
+var _ahooks = require("ahooks");
+var _luckDesign = require("luck-design");
+var _lodash = require("lodash");
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../engine/provider/ContextProvider");
+var _I18n = require("./services/I18n");
+var _getDvaApp;
+var Search = _antd.Input.Search;
+var _getDvaApp$_store = (_getDvaApp = (0, _umi.getDvaApp)()) === null || _getDvaApp === void 0 ? void 0 : _getDvaApp._store,
+  dispatch = _getDvaApp$_store.dispatch;
+var getLangKey = function getLangKey() {
+  return "app.lowcode.".concat((0, _utils.suid)());
+};
+var formatDataFunc = function formatDataFunc(data) {
+  return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, data), (0, _lodash.reduce)(data.languages, function (ret, value, key) {
+    ret[key] = value;
+    return ret;
+  }, {}));
+};
 var I18n = function I18n() {
-  return /*#__PURE__*/_react.default.createElement("div", null, "i18n");
+  var context = (0, _ContextProvider.useLDContext)();
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    langList = _useState2[0],
+    setLangList = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    dataSource = _useState4[0],
+    setDataSource = _useState4[1];
+  (0, _ahooks.useAsyncEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+    var _langList;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return dispatch({
+            type: 'global/getDatadic',
+            payload: {
+              snamealias: 'base_lang'
+            },
+            format: function format(list, detail) {
+              return list.map(function (id) {
+                return {
+                  title: detail[id].sname,
+                  field: detail[id].sfactvalue,
+                  editable: true,
+                  filter: false
+                };
+              });
+            }
+          });
+        case 2:
+          _langList = _context.sent;
+          setLangList(_langList);
+          context.$publisher(context.topics.LANG_SETTING_SELECT, {
+            langList: _langList
+          });
+          doQuery();
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), []);
+  var doQuery = (0, _ahooks.useMemoizedFn)(function () {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    (0, _I18n.readAllLang)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, value), {}, {
+      classifyKey: '__LOWCODE__'
+    })).then(function (res) {
+      var code = res.code,
+        list = res.list,
+        detail = res.detail;
+      if (code === 1) setDataSource(list.map(function (id) {
+        return formatDataFunc(detail[id]);
+      }));
+    });
+  });
+  var actionsColumn = (0, _ahooks.useCreation)(function () {
+    return {
+      width: 60,
+      getActions: function getActions() {
+        return [{
+          wanted: 'update',
+          title: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+            type: "copy"
+          }),
+          action: function action(_data) {
+            var data = {
+              languages: (0, _lodash.reduce)(langList, function (result, value) {
+                result[value.field] = _data[value.field];
+                return result;
+              }, {})
+            };
+            handleAdd(data);
+          }
+        }, {
+          wanted: 'delete',
+          title: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+            type: "delete"
+          }),
+          confirm: {
+            title: (0, _utils.formatMessage)({
+              id: 'app.base.confirm.delete'
+            })
+          },
+          action: handleDelete
+        }];
+      }
+    };
+  }, [langList]);
+  var handleAdd = (0, _ahooks.useMemoizedFn)(function () {
+    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var addItems = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, data), {}, {
+      langKey: getLangKey(),
+      classifyKey: '__LOWCODE__'
+    });
+    (0, _I18n.doAddLang)({}, addItems).then(function (res) {
+      var code = res.code,
+        list = res.list,
+        detail = res.detail;
+      if (code === 1) setDataSource([formatDataFunc(detail[list[0]])].concat(dataSource));
+    });
+  });
+  var handleValueChange = (0, _ahooks.useMemoizedFn)(function (field, newValue, oldValue, record) {
+    (0, _I18n.doUpdateLang)({}, {
+      classifyKey: '__LOWCODE__',
+      langKey: record.langKey,
+      indocno: record.indocno,
+      languages: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, (0, _lodash.reduce)(langList, function (result, value) {
+        result[value.field] = record[value.field];
+        return result;
+      }, {})), {}, (0, _defineProperty2.default)({}, field, newValue))
+    });
+  });
+  var handleDelete = (0, _ahooks.useMemoizedFn)(function (data) {
+    (0, _I18n.doDeleteLang)({}, {
+      delList: [{
+        indocno: data.indocno
+      }]
+    }).then(function (_ref2) {
+      var code = _ref2.code;
+      if (code === 1) {
+        var _data = (0, _lodash.cloneDeep)(dataSource);
+        (0, _lodash.remove)(_data, function (n) {
+          return n.indocno === data.indocno;
+        });
+        setDataSource(_data);
+      }
+      ;
+    });
+  });
+  var handleSearch = (0, _lodash.debounce)(doQuery, 300);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100%',
+      padding: '16px 24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(Search, {
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.I18n.search',
+      label: '搜索文案'
+    }),
+    onChange: function onChange(e) {
+      return handleSearch({
+        value: e.target.value
+      });
+    },
+    style: {
+      width: '100%'
+    },
+    allowClear: true
+  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    ghost: true,
+    size: "small",
+    style: {
+      margin: '16px 0'
+    },
+    onClick: function onClick() {
+      return handleAdd();
+    }
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.I18n.add',
+    label: '新增文案'
+  })), /*#__PURE__*/_react.default.createElement(_luckDesign.GridTable, {
+    height: 480,
+    columns: langList,
+    dataSource: dataSource,
+    renderIndex: false,
+    showStatusBar: false,
+    actionsColumn: actionsColumn,
+    onValueChange: handleValueChange,
+    operates: ['add', 'update', 'delete'],
+    bordered: false
+  }));
 };
 var _default = exports.default = I18n;