@luck-design-biz/luckda 0.0.22-4 → 0.0.22-6

package/lib/lowcode/painter/panel-section/Icon.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("luck-design/antd");
+var _icon = _interopRequireDefault(require("../style/icon.less"));
+var _apiUrl = require("../../constants/api-url");
+/**
+ * 一个简单的图标选择器组件，展示了一个图标并允许用户点击选择。
+ * 该组件使用了`Icon.createFromIconfontCN`来创建一个可以从Iconfont.cn加载图标的`IconFont`组件。
+ * 当图标被点击时，会调用`onSelect`回调函数，并传递一个对象，其中包含了`field`字段。
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <IconSelector
+ *   field="iconField"
+ *   onSelect={({ field }) => console.log(`Selected icon field: ${field}`)}
+ *   value="icon-example"
+ * />
+ * ```
+ *
+ * @param {Object} props 组件的props
+ * @param {string} props.field 用于识别选择的图标字段的标识符。
+ * @param {Function} props.onSelect 当图标被点击时触发的回调函数。
+ *                                  接收一个对象参数，该对象包含`field`字段。
+ * @param {string} [props.value='iconyingyongguanli'] 初始化时图标的类型，
+ *                                                     默认为'iconyingyongguanli'。
+ *
+ * @returns {React.Element} 渲染的React元素。
+ */
+function _default(_ref) {
+  var field = _ref.field,
+    onSelect = _ref.onSelect,
+    value = _ref.value,
+    next = _ref.next;
+  var IconFont = _antd.Icon.createFromIconfontCN({
+    scriptUrl: _apiUrl.ICONLIST_JS
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _icon.default['lc-painter-panel-section-icon'],
+    onClick: function onClick() {
+      return next();
+    }
+  }, /*#__PURE__*/_react.default.createElement(IconFont, {
+    type: value !== null && value !== void 0 ? value : 'iconyingyongguanli'
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: _icon.default['selecor']
+  }, "\u8BF7\u9009\u62E9 >"));
+}

package/lib/lowcode/painter/panel-section/IconSelector.js

@@ -0,0 +1,146 @@
+"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 = _default;
+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 _antd = require("luck-design/antd");
+var _iconSelector = _interopRequireDefault(require("../style/icon-selector.less"));
+var _utils = require("@luck-design-biz/base/utils");
+var _apiUrl = require("../../constants/api-url");
+var Search = _antd.Input.Search;
+
+/**
+ * 一个用于选择图标的组件，提供了图标的搜索和选择功能。
+ *
+ * 该组件首先从预定义的URL加载图标列表，然后显示这些图标。用户可以通过输入框搜索图标，
+ * 点击图标时，会通过 `onChange` 回调将选中的图标信息返回给父组件。
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <IconSelector
+ *   field="iconField"
+ *   onChange={(selectedIcon) => console.log(selectedIcon)}
+ * />
+ * ```
+ *
+ * @param {Object} props 组件接受的props
+ * @param {string} props.field 用于标识选中图标的字段名
+ * @param {Function} props.onChange 当图标被选中时触发的回调函数，接受选中图标的信息作为参数
+ */
+function _default(_ref) {
+  var field = _ref.field,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    iconData = _useState2[0],
+    setIconData = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    searchTerm = _useState4[0],
+    setSearchTerm = _useState4[1];
+  var IconFont = _antd.Icon.createFromIconfontCN({
+    scriptUrl: _apiUrl.ICONLIST_JS
+  });
+  function getIconList() {
+    return _getIconList.apply(this, arguments);
+  }
+  function _getIconList() {
+    _getIconList = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            return _context2.abrupt("return", (0, _utils.request)(_apiUrl.ICONLIST_URL, {
+              method: 'get'
+            }));
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return _getIconList.apply(this, arguments);
+  }
+  (0, _react.useEffect)(function () {
+    var fetchData = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+        var data;
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return getIconList();
+            case 3:
+              data = _context.sent;
+              setIconData(data);
+              _context.next = 10;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              console.error('获取数据失败', _context.t0);
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 7]]);
+      }));
+      return function fetchData() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    fetchData();
+  }, []);
+  var handleSearch = (0, _react.useCallback)(function (e) {
+    setSearchTerm(e.target.value.toLowerCase());
+  }, []);
+  var filteredData = (0, _react.useMemo)(function () {
+    if (iconData && iconData.glyphs) {
+      return iconData.glyphs.filter(function (item) {
+        return item.name.toLowerCase().includes(searchTerm) || item.font_class.toLowerCase().includes(searchTerm);
+      });
+    }
+    return [];
+  }, [iconData, searchTerm]);
+  var handleClick = (0, _react.useCallback)(function (icon) {
+    if (onChange) onChange({
+      field: field,
+      value: icon
+    });
+  }, [onChange, field]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _iconSelector.default['lc-painter-panel-section-iconselector']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _iconSelector.default['components-search']
+  }, /*#__PURE__*/_react.default.createElement(Search, {
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.components.search',
+      label: '搜索组件'
+    }),
+    onChange: handleSearch
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _iconSelector.default['icon-warp']
+  }, filteredData && filteredData.length > 0 && filteredData.map(function (iconItem) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: iconItem.font_class,
+      className: _iconSelector.default['icon-box'],
+      onClick: function onClick() {
+        return handleClick(iconItem);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      placement: "top",
+      title: iconItem.name
+    }, /*#__PURE__*/_react.default.createElement(IconFont, {
+      className: _iconSelector.default['icon-item'],
+      type: "".concat(iconData.css_prefix_text).concat(iconItem.font_class)
+    })));
+  })));
+}

package/lib/lowcode/painter/panel-section/LayoutRatio.js

@@ -0,0 +1,148 @@
+"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 _ahooks = require("ahooks");
+var _layoutRatio = _interopRequireDefault(require("../style/layout-ratio.less"));
+var _utils = require("@luck-design-biz/base/utils");
+var _RuleInput = _interopRequireDefault(require("../components/RuleInput"));
+var _PanelItem = _interopRequireDefault(require("../components/PanelItem"));
+var _RATIOS_ = ['12', '6:6', '3:9', '9:3', '4:4:4', '3:6:3', '3:3:3:3', '2:2:2:2:2:2'];
+var _DEFAULTRATIO_ = '12:3:9';
+
+/**
+ * `LayoutRatio`组件提供了一个布局比例选择器，允许用户选择或输入特定的比例配置。
+ * 支持的比例配置包括预定义的比例数组`_RATIOS_`，用户还可以通过输入框自定义比例，
+ * 自定义比例需要符合一定的规则：是数字或数字与冒号的组合，且数字之和必须等于12。
+ * ，
+ * 允许父组件获取当前选中的布局比例。
+ *
+ * @component
+ * @example
+ * ```jsxsdsdsdsdsdsdsd
+ * <LayoutRatio
+ *   field="layoutRatio"
+ *   value="6:6"
+ *   onChange={({ field, option }) => console.log(field, option)}
+ * />
+ * ```
+ *
+ * @param {Object} props
+ * @param {string} props.field 标识选中布局比例的字段名称。
+ * @param {string} [props.value='12'] 初始化时选中的布局比例，默认为"12"。
+ * @param {Function} props.onChange 当用户选择一个新的布局比例时调用的回调函数。
+ *                                  函数接收一个对象参数，包含`field`和`option`两个字段。
+ *
+ * @returns {React.Element} 渲染的React元素。
+ */
+var LayoutRatio = function LayoutRatio(_ref) {
+  var field = _ref.field,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(defaultValue || _DEFAULTRATIO_),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentRatio = _useState2[0],
+    setCurrentRatio = _useState2[1];
+  var handleInputChange = function handleInputChange(_, value) {
+    // console.log('value', value);
+    // if (!value) value = _DEFAULTRATIO_;
+    setCurrentRatio(value);
+    onChange === null || onChange === void 0 || onChange({
+      field: field,
+      value: value
+    });
+  };
+  var handGridClick = function handGridClick(selectedRadio) {
+    // console.log('selectedRadio', selectedRadio);
+    setCurrentRatio(selectedRadio);
+    onChange === null || onChange === void 0 || onChange({
+      field: field,
+      value: selectedRadio
+    });
+  };
+
+  // 定义验证规则
+  var rules = [{
+    func: function func(value) {
+      // 首先，检查value是否为字符串
+      if (typeof value !== 'string') return false;
+
+      // 使用正则表达式检查字符串是否只包含数字和冒号，并且不以冒号开始或结束
+      return /^[0-9]+(:[0-9]+)*$/.test(value);
+    },
+    err: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.err',
+      label: '必须是数字或者数字加:号的组合，且数字之和必须等于12'
+    })
+  }];
+  var _useCreation = (0, _ahooks.useCreation)(function () {
+      return {
+        isCurrentInRatios: _RATIOS_.includes(currentRatio),
+        currentItemRatios: currentRatio.split(':')
+      };
+    }, [currentRatio]),
+    isCurrentInRatios = _useCreation.isCurrentInRatios,
+    currentItemRatios = _useCreation.currentItemRatios;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['lc-painter-panel-section-layoutratio']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['ratio-view']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['gridbox-container']
+  }, _RATIOS_.map(function (ratio, i) {
+    var itemRatios = ratio.split(':');
+    var isCurrent = ratio == currentRatio;
+    var className = _layoutRatio.default['gridbox'];
+    if (isCurrent) className = className + ' ' + _layoutRatio.default['current'];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "grid-".concat(i),
+      className: className,
+      onClick: function onClick() {
+        return handGridClick(ratio);
+      }
+    }, itemRatios.map(function (itemRatio, j) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: "gridItem-".concat(j),
+        className: _layoutRatio.default['girditem'],
+        style: {
+          gridColumn: 'span ' + itemRatio
+        }
+      });
+    }));
+  }), !isCurrentInRatios && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_layoutRatio.default['gridbox'], " ").concat(_layoutRatio.default['current']),
+    onClick: function onClick() {
+      return handGridClick(ratio);
+    }
+  }, currentItemRatios.map(function (itemRatio, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "itemRatio-".concat(index),
+      className: _layoutRatio.default['girditem'],
+      style: {
+        gridColumn: 'span ' + itemRatio
+      }
+    });
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['ratio-input']
+  }, /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.label',
+      label: '列比例'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_RuleInput.default, {
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',
+      label: '请输入列比例'
+    }),
+    rules: rules,
+    onValueChange: handleInputChange,
+    value: currentRatio
+  }))));
+};
+var _default = exports.default = LayoutRatio;

package/lib/lowcode/painter/panel-section/TabItems.js

@@ -0,0 +1,245 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _uiDesign = require("@luck-helper/ui-design");
+var _tabitems = _interopRequireDefault(require("../style/tabitems.less"));
+var _SortBox = require("../components/SortBox");
+var _TabEditor = require("../components/TabEditor");
+var _PopConfirm = _interopRequireDefault(require("../components/PopConfirm"));
+var _PopForm = require("../components/PopForm");
+function itemsReducer(state, action) {
+  switch (action.type) {
+    case 'add':
+      return [].concat((0, _toConsumableArray2.default)(state), [action.payload]);
+    case 'delete':
+      return state.filter(function (item) {
+        return item.id !== action.payload;
+      });
+    case 'edit':
+      return state.map(function (item) {
+        return item.id === action.payload.id ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), action.payload.data) : item;
+      });
+    case 'active':
+      return state.map(function (item) {
+        item.active = false;
+        return item.id === action.payload.id ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), action.payload.data) : item;
+      });
+    case 'new':
+      return (0, _toConsumableArray2.default)(action.payload);
+    case 'sort':
+      var sortItems = action.payload;
+      var newItems = state.sort(function (a, b) {
+        var indexA = sortItems.indexOf(a.id);
+        var indexB = sortItems.indexOf(b.id);
+        return indexA - indexB;
+      });
+      return (0, _toConsumableArray2.default)(newItems);
+    default:
+      throw new Error();
+  }
+}
+var TabItems = function TabItems(_ref) {
+  var options = _ref.options,
+    onChange = _ref.onChange;
+  var _useReducer = (0, _react.useReducer)(itemsReducer, options),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    items = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var isFirstRender = (0, _react.useRef)(true);
+  (0, _react.useEffect)(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if (onChange) onChange(items);
+  }, [items, onChange]);
+  var handleAdd = function handleAdd() {
+    dispatch({
+      type: 'add',
+      payload: {
+        id: "tab_".concat((0, _utils.suid)()),
+        name: "\u9009\u9879".concat(items.length + 1),
+        active: false,
+        resid: null,
+        effect: 'disable'
+      }
+    });
+  };
+  var handleSortChange = function handleSortChange(sortItems) {
+    dispatch({
+      type: 'sort',
+      payload: sortItems
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_SortBox.SortBox, {
+    datas: items.map(function (item) {
+      return item.id;
+    }),
+    onChange: handleSortChange
+  }, /*#__PURE__*/_react.default.createElement(_TabEditor.TabEditor, {
+    handleAdd: handleAdd
+  }, items.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_SortBox.SortItem, {
+      id: item.id
+    }, /*#__PURE__*/_react.default.createElement(_TabEditor.TabEditorItem, {
+      left: /*#__PURE__*/_react.default.createElement(TabItemLeft, {
+        item: item,
+        dispatch: dispatch
+      }),
+      right: /*#__PURE__*/_react.default.createElement(TabItemRight, {
+        item: item,
+        dispatch: dispatch
+      }),
+      item: item,
+      dispatch: dispatch
+    }));
+  })));
+};
+var TabItemLeft = function TabItemLeft(_ref2) {
+  var item = _ref2.item,
+    dispatch = _ref2.dispatch;
+  var handleActiveChange = function handleActiveChange() {
+    dispatch({
+      type: 'active',
+      payload: {
+        id: item.id,
+        data: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          active: true
+        })
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    checked: item.active,
+    onClick: handleActiveChange
+  })), /*#__PURE__*/_react.default.createElement("div", null, item.name));
+};
+var TabItemRight = function TabItemRight(_ref3) {
+  var item = _ref3.item,
+    dispatch = _ref3.dispatch;
+  var handleDelete = function handleDelete() {
+    dispatch({
+      type: 'delete',
+      payload: item.id
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.tabsitems.edit',
+      label: '添加'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_PopConfirm.default, {
+    placement: "bottomLeft",
+    title: /*#__PURE__*/_react.default.createElement(TabItemEditor, {
+      item: item,
+      dispatch: dispatch
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    className: _tabitems.default['tabitem-action'],
+    type: "edit"
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.tabsitems.delete',
+      label: '删除'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    className: _tabitems.default['tabitem-action'],
+    type: "delete",
+    onClick: handleDelete
+  })));
+};
+var TabItemEditor = function TabItemEditor(_ref4) {
+  var item = _ref4.item,
+    dispatch = _ref4.dispatch;
+  var options = [{
+    label: '禁用',
+    value: 'disable'
+  }, {
+    label: '隐藏',
+    value: 'middle'
+  }];
+  var handleNameChange = function handleNameChange(e) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          name: e.target.value
+        })
+      }
+    });
+  };
+  var handleEffectChange = function handleEffectChange(value) {
+    console.log('value', value);
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          effect: value.option.value
+        })
+      }
+    });
+  };
+  var handleResChange = function handleResChange(e) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: item.id,
+        data: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          resid: e.target.value
+        })
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_PopForm.PopForm, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItem, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemLeft, null, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.tabname',
+    label: '名称'
+  })), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemRight, null, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    value: item.name,
+    onChange: handleNameChange,
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.tabname.placeholder',
+      label: '请输入标签名称'
+    })
+  }))), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItem, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemLeft, null, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.id',
+    label: '编号'
+  })), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemRight, null, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    value: item.id,
+    disabled: true
+  }))), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItem, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemLeft, null, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.reskey',
+    label: '资源串'
+  })), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemRight, null, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    value: item.resid,
+    onChange: handleResChange,
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.reskey.placeholder',
+      label: '请输入资源串'
+    })
+  }))), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItem, null, /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemLeft, null, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.reskey',
+    label: '控制效果'
+  })), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemRight, null, /*#__PURE__*/_react.default.createElement(_uiDesign.Segmented, {
+    field: "effect",
+    options: options,
+    onChange: handleEffectChange,
+    value: item.effect
+  }))));
+};
+var _default = exports.default = TabItems;

package/lib/lowcode/painter/services/I18n.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.doAddLang = doAddLang;
+exports.doDeleteLang = doDeleteLang;
+exports.doUpdateLang = doUpdateLang;
+exports.readAllLang = readAllLang;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _qs = require("qs");
+var _utils = require("@luck-design-biz/base/utils");
+var _ApiConfig = _interopRequireDefault(require("@/services/ApiConfig"));
+function readAllLang(_x, _x2) {
+  return _readAllLang.apply(this, arguments);
+}
+function _readAllLang() {
+  _readAllLang = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(params, body) {
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          return _context.abrupt("return", (0, _utils.request)("".concat(_ApiConfig.default.BASE_HOST, "/lang/sysLanguageKeys/readAll?").concat((0, _qs.stringify)(params)), {
+            method: 'POST',
+            body: body
+          }));
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _readAllLang.apply(this, arguments);
+}
+function doAddLang(_x3, _x4) {
+  return _doAddLang.apply(this, arguments);
+}
+function _doAddLang() {
+  _doAddLang = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(params, body) {
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          return _context2.abrupt("return", (0, _utils.request)("".concat(_ApiConfig.default.BASE_HOST, "/lang/sysLanguageKeys/add?").concat((0, _qs.stringify)(params)), {
+            method: 'POST',
+            body: body
+          }));
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _doAddLang.apply(this, arguments);
+}
+function doUpdateLang(_x5, _x6) {
+  return _doUpdateLang.apply(this, arguments);
+}
+function _doUpdateLang() {
+  _doUpdateLang = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3(params, body) {
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          return _context3.abrupt("return", (0, _utils.request)("".concat(_ApiConfig.default.BASE_HOST, "/lang/sysLanguageKeys/update?").concat((0, _qs.stringify)(params)), {
+            method: 'POST',
+            body: body
+          }));
+        case 1:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _doUpdateLang.apply(this, arguments);
+}
+function doDeleteLang(_x7, _x8) {
+  return _doDeleteLang.apply(this, arguments);
+}
+function _doDeleteLang() {
+  _doDeleteLang = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4(params, body) {
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          return _context4.abrupt("return", (0, _utils.request)("".concat(_ApiConfig.default.BASE_HOST, "/lang/sysLanguageKeys/delete?").concat((0, _qs.stringify)(params)), {
+            method: 'POST',
+            body: body
+          }));
+        case 1:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return _doDeleteLang.apply(this, arguments);
+}