@luck-design-biz/luckda 0.0.27 → 1.0.0-alpha

package/lib/lowcode/painter/DesignToolbar.js

@@ -0,0 +1,444 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+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 _react = _interopRequireWildcard(require("react"));
+var _umi = require("umi");
+var _classnames = _interopRequireDefault(require("classnames"));
+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 _JsonEditor = _interopRequireDefault(require("../painter/components/code-editor/JsonEditor"));
+var _PreviewIframe = _interopRequireDefault(require("./components/PreviewIframe"));
+var _constants = require("../constants");
+var _design = _interopRequireDefault(require("./style/design.less"));
+var _apiUrl = require("../constants/api-url");
+var _helper = require("../engine/tools/helper");
+var _excluded = ["key", "label"];
+var DesignToolbar = function DesignToolbar(_ref) {
+  var locale = _ref.locale,
+    onLangChange = _ref.onLangChange;
+  var location = (0, _umi.useLocation)();
+  var editorRef = (0, _react.useRef)();
+  var context = (0, _ContextProvider.useContext)();
+  var pageData = (0, _ContextProvider.useGet)();
+  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];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    show = _useState6[0],
+    setShow = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    showPreview = _useState8[0],
+    setShowPreview = _useState8[1];
+  var _useState9 = (0, _react.useState)([]),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    userOptions = _useState10[0],
+    setUserOptions = _useState10[1];
+  var _useTemporalStore = (0, _ContextProvider.useTemporalStore)(function (state) {
+      return {
+        undo: state.undo,
+        redo: state.redo,
+        pastStates: state.pastStates,
+        futureStates: state.futureStates
+      };
+    }),
+    canUndo = _useTemporalStore.canUndo,
+    canRedo = _useTemporalStore.canRedo,
+    undo = _useTemporalStore.undo,
+    redo = _useTemporalStore.redo;
+  var _useCookieState = (0, _ahooks.useCookieState)(_constants.COOKIE_VIRTUAL_ACCOUNT_KEY),
+    _useCookieState2 = (0, _slicedToArray2.default)(_useCookieState, 2),
+    userId = _useCookieState2[0],
+    setUserId = _useCookieState2[1];
+  var _useRequest = (0, _ahooks.useRequest)(_apiUrl.fetchClearCache, {
+      manual: true
+    }),
+    clearCacheLoading = _useRequest.loading,
+    runClearCache = _useRequest.runAsync;
+  var _useRequest2 = (0, _ahooks.useRequest)(_apiUrl.fetchUpdatePageData, {
+      manual: true,
+      debounceWait: 300
+    }),
+    updatePageDataLoading = _useRequest2.loading,
+    runAsync = _useRequest2.runAsync;
+  (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);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!showPreview) {
+      setUserId(void 0);
+    }
+  }, [showPreview]);
+  var handleSave = (0, _ahooks.useMemoizedFn)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+    var _yield$runAsync, code;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _antd.message.loading({
+            content: (0, _utils.formatMessage)({
+              id: 'luckda.lowcode.design.toolbar.save.on',
+              label: '保存中...'
+            }),
+            key: 'saveLoading'
+          });
+          _context.next = 3;
+          return runAsync({
+            pageData: JSON.stringify(pageData),
+            pageCode: (0, _helper.getLDMetaAttr)('pageCode')
+          });
+        case 3:
+          _yield$runAsync = _context.sent;
+          code = _yield$runAsync.code;
+          if (code === 1) {
+            (0, _ContextProvider.setNeedPrompt)(false);
+            _antd.message.success({
+              content: (0, _utils.formatMessage)({
+                id: 'luckda.lowcode.design.toolbar.save.success',
+                label: '保存成功'
+              }),
+              key: 'saveLoading'
+            });
+          } else {
+            _antd.message.error({
+              content: (0, _utils.formatMessage)({
+                id: 'luckda.lowcode.design.toolbar.save.error',
+                label: '保存失败'
+              }),
+              key: 'saveLoading'
+            });
+          }
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), []);
+  var handleClearCache = (0, _ahooks.useMemoizedFn)(function () {
+    _antd.Modal.confirm({
+      title: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.design.toolbar.clear.tip',
+        label: '清除提示'
+      }),
+      content: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.design.toolbar.clear',
+        label: '确定清除当前页面及模块缓存么？'
+      }),
+      getContainer: function getContainer() {
+        return document.getElementById('lc-design-workspace');
+      },
+      onOk: function onOk() {
+        return runClearCache({
+          moduleCode: (0, _helper.getLDMetaAttr)('moduleCode')
+        });
+      }
+    });
+  });
+  var handleOk = (0, _ahooks.useMemoizedFn)(function () {
+    var code = editorRef.current.editor.getValue();
+    try {
+      var data = JSON.parse(code);
+      (0, _ContextProvider.resetPageData)(data);
+      setShow(false);
+    } catch (e) {
+      console.error(e);
+      _antd.message.warning((0, _utils.formatMessage)({
+        id: 'luckda.lowcode.error.pagedata',
+        label: '页面数据错误'
+      }));
+    }
+  });
+  var _useDebounceFn = (0, _ahooks.useDebounceFn)( /*#__PURE__*/function () {
+      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(value) {
+        var _yield$fetchSearchUse, code, list, detail;
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return (0, _apiUrl.fetchSearchUser)({
+                sname: value
+              });
+            case 2:
+              _yield$fetchSearchUse = _context2.sent;
+              code = _yield$fetchSearchUse.code;
+              list = _yield$fetchSearchUse.list;
+              detail = _yield$fetchSearchUse.detail;
+              if (code === 1) {
+                setUserOptions(list.map(function (id) {
+                  var item = detail[id];
+                  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+                    key: "".concat(item.indocno),
+                    label: item.sname
+                  });
+                }));
+              }
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x) {
+        return _ref4.apply(this, arguments);
+      };
+    }(), {
+      wait: 500
+    }),
+    handleSearch = _useDebounceFn.run;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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", {
+    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.disabled, !canUndo)),
+    onClick: function onClick() {
+      return canUndo && undo();
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 1024 1024",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    style: {
+      transform: 'rotateY(180deg)'
+    }
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M946.8 420L651.9 125.1c-19.5-19.5-52.7-5.7-52.7 21.8v174c-79.3-1.8-501.8 14.9-532.3 569.6-0.9 17.2 22.1 24.3 30.6 9.3C255 621 396.6 553.3 599.1 561.5v175.2c0 27.5 33.3 41.3 52.8 21.9l294.8-294.9c12.1-12.1 12.1-31.6 0.1-43.7z"
+  }))), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.disabled, !canRedo)),
+    onClick: function onClick() {
+      return canRedo && redo();
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 1024 1024",
+    width: "20",
+    height: "20",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M946.8 420L651.9 125.1c-19.5-19.5-52.7-5.7-52.7 21.8v174c-79.3-1.8-501.8 14.9-532.3 569.6-0.9 17.2 22.1 24.3 30.6 9.3C255 621 396.6 553.3 599.1 561.5v175.2c0 27.5 33.3 41.3 52.8 21.9l294.8-294.9c12.1-12.1 12.1-31.6 0.1-43.7z"
+  }))), /*#__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, {
+        target: _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT
+      });
+    }
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.design.toolbar.pageAttrs',
+    label: '页面属性'
+  })), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "small",
+    style: {
+      fontSize: 12,
+      margin: '0 4px 0 2px'
+    },
+    disabled: clearCacheLoading,
+    onClick: handleClearCache
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.design.toolbar.clear',
+    label: '清除缓存'
+  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "small",
+    style: {
+      fontSize: 12,
+      margin: '0 4px 0 2px'
+    },
+    disabled: updatePageDataLoading,
+    onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!(0, _ContextProvider.getNeedPrompt)()) {
+              _context3.next = 3;
+              break;
+            }
+            _context3.next = 3;
+            return handleSave();
+          case 3:
+            context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+            setShowPreview(true);
+          case 5:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }))
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.design.toolbar.preview',
+    label: '预览'
+  }), /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "bug"
+  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "small",
+    type: "primary",
+    disabled: updatePageDataLoading,
+    style: {
+      fontSize: 12,
+      padding: '0 7px 0 0',
+      marginLeft: 2
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline-block',
+      padding: '0 7px'
+    },
+    onClick: handleSave
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.design.toolbar.save',
+    label: '保存'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline-block'
+    },
+    onClick: function onClick() {
+      return setShow(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "eye"
+  })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    visible: show,
+    width: 1024,
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    onOk: handleOk,
+    onCancel: function onCancel() {
+      return setShow(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_JsonEditor.default, {
+    ref: editorRef,
+    style: {
+      height: '70vh'
+    }
+  }, JSON.stringify(pageData, null, '\t'))), /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
+    title: /*#__PURE__*/_react.default.createElement("div", {
+      id: "preview-drawer-header",
+      style: {
+        display: 'flex',
+        height: 54,
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      }
+    }, /*#__PURE__*/_react.default.createElement("h3", {
+      style: {
+        marginBottom: 0
+      }
+    }, (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.design.toolbar.pagePreview',
+      label: '页面预览'
+    })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+      placeholder: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.design.toolbar.selectUser',
+        label: '请选择模拟登录人'
+      }),
+      allowClear: true,
+      style: {
+        width: 180
+      },
+      filterOption: false,
+      labelInValue: true,
+      showSearch: true,
+      getPopupContainer: function getPopupContainer() {
+        return document.getElementById('preview-drawer-header').closest('.ant-drawer-wrapper-body');
+      },
+      onSearch: handleSearch,
+      onChange: function onChange(_, _opt) {
+        if (_opt) {
+          setUserId(_opt.props.sloginid);
+        } else {
+          setUserId(void 0);
+        }
+      }
+    }, userOptions.map(function (_ref6) {
+      var key = _ref6.key,
+        label = _ref6.label,
+        rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, (0, _extends2.default)({
+        key: key,
+        value: key
+      }, rest), label);
+    })))),
+    placement: "bottom",
+    height: "94vh",
+    footer: false,
+    headerStyle: {
+      padding: '0 48px 0 24px'
+    },
+    bodyStyle: {
+      height: 'calc(100% - 54px)',
+      backgroundColor: '#F0F2F5'
+    },
+    visible: showPreview,
+    destroyOnClose: true,
+    onClose: function onClose() {
+      return setShowPreview(false);
+    },
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    }
+  }, /*#__PURE__*/_react.default.createElement(_PreviewIframe.default, {
+    code: location.query.code,
+    userId: userId
+  })));
+};
+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.useContext)();
+  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;