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

package/es/lowcode/painter/Design.js

@@ -1,61 +1,95 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useEffect, useState } from 'react';
-import { useEventListener, useSize, useScroll } from 'ahooks';
-import { Select, Button, Icon, Divider, message } from 'luck-design/antd';
+import moment from 'moment';
 import classNames from 'classnames';
-import { cloneDeep } from 'lodash';
+import { last, initial } from 'lodash';
+import { RawIntlProvider, getLocale, getIntl, localeInfo } from 'umi';
+import { useEventListener, useSetState, useMemoizedFn, useCreation } from 'ahooks';
+import { Select, Button, Icon, Divider, ConfigProvider, Dropdown, message } from 'luck-design/antd';
+import { cloneDeep, reverse } from 'lodash';
+import { suid } from '@luck-design-biz/base/utils';
 import { useLDContext } from "../engine/provider/ContextProvider";
 import Page from "../view/Page";
 import { add } from "../engine/tools/dataProcess";
-import generateShortUuid from "../engine/tools/lcid";
 import { CELL_KEY, CELL_CLASS_NAME } from "../constants";
 import styles from "./style/design.less";
-var setRect = function setRect(page, node, cellNode) {
+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;
-  node.style.left = "".concat(cellNodeLeft - pageLeft, "px");
-  node.style.top = "".concat(cellNodeTop - pageTop, "px");
-  node.style.width = "".concat(cellNode.offsetWidth, "px");
-  node.style.height = "".concat(cellNode.offsetHeight, "px");
+  return {
+    left: "".concat(cellNodeLeft - pageLeft, "px"),
+    top: "".concat(cellNodeTop - pageTop, "px"),
+    width: "".concat(cellNode.offsetWidth, "px"),
+    height: "".concat(cellNode.offsetHeight, "px")
+  };
 };
 var Design = function Design() {
+  var _selectorRef$current, _localeInfo$locale2;
   var context = useLDContext();
-  var detectorRef = useRef(null);
   var selectorRef = useRef(null);
   var simulatorRef = useRef(null);
-  var hoverCellRef = useRef(null);
-  var activeCellRef = useRef(null);
-  var size = useSize(simulatorRef);
-  var scroll = useScroll(simulatorRef);
-  var _useState = useState('pc'),
+  var _useSetState = useSetState({
+      selector: null,
+      detector: null
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    operatorId = _useSetState2[0],
+    setOperatorId = _useSetState2[1];
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    activedTarget = _useState2[0],
-    setActivedTarget = _useState2[1];
+    acticeProps = _useState2[0],
+    setActiceProps = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    langList = _useState4[0],
+    setLangList = _useState4[1];
+  var _useState5 = useState(function () {
+      return getLocale();
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    locale = _useState6[0],
+    setLocale = _useState6[1];
+  var _useState7 = useState(function () {
+      return getIntl(locale, true);
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    intl = _useState8[0],
+    setContainerIntl = _useState8[1];
+  var _useState9 = useState('pc'),
+    _useState10 = _slicedToArray(_useState9, 2),
+    activedTarget = _useState10[0],
+    setActivedTarget = _useState10[1];
   useEventListener('mousemove', function (event) {
     var elem = event.target;
     var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
-    if (targetCell && !targetCell.isEqualNode(hoverCellRef.current) && !targetCell.isEqualNode(activeCellRef.current)) {
-      var _id = targetCell.id;
-      hoverCellRef.current = targetCell;
+    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: _id,
+        id: targetCellId,
         cellNode: targetCell
       });
-    } else if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) {
-      hoverCellRef.current = null;
+    } else if (!targetCell || targetCellId === operatorId.selector) {
+      setOperatorId({
+        detector: null
+      });
       context.$publisher(context.topics.COMPONENT_HOVER, null);
     }
   }, {
     target: simulatorRef
   });
   useEventListener('mouseleave', function () {
-    if (hoverCellRef.current) {
-      hoverCellRef.current = null;
+    if (operatorId.detector) {
+      setOperatorId({
+        detector: null
+      });
       context.$publisher(context.topics.COMPONENT_HOVER, null);
     }
   }, {
@@ -64,7 +98,8 @@ var Design = function Design() {
   useEventListener('click', function (event) {
     var elem = event.target;
     var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
-    if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) return;
+    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,
@@ -73,34 +108,30 @@ var Design = function Design() {
   }, {
     target: simulatorRef
   });
-  useEffect(function () {
-    if (selectorRef.current && activeCellRef.current) setRect(simulatorRef.current, selectorRef.current, activeCellRef.current);
-    if (detectorRef.current && hoverCellRef.current) setRect(simulatorRef.current, detectorRef.current, hoverCellRef.current);
-  }, [size, scroll]);
   useEffect(function () {
     var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
-      if (payload.id) {
-        detectorRef.current.style.display = 'block';
-        setRect(simulatorRef.current, detectorRef.current, payload.cellNode);
-      } else {
-        detectorRef.current.style.display = 'none';
-      }
+      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) {
-        activeCellRef.current = payload.cellNode;
-        hoverCellRef.current = null;
-        selectorRef.current.style.display = 'block';
-        setRect(simulatorRef.current, selectorRef.current, payload.cellNode);
+        setOperatorId({
+          selector: payload.id,
+          detector: null
+        });
+        setActiceProps(context.componentMap.get(payload.id).api.getLevelNodes());
       } else {
-        selectorRef.current.style.display = 'none';
+        setActiceProps(null);
       }
     }).watch();
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
       context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
     };
-  }, [scroll]);
+  }, [context.pageData]);
   useEffect(function () {
     var moid = context.$subscriber(context.topics.MODAL_OPEN).on(function () {
       simulatorRef.current.style['overflow-y'] = 'hidden';
@@ -108,31 +139,35 @@ var Design = function Design() {
     var mcid = context.$subscriber(context.topics.MODAL_CLOSE).on(function () {
       simulatorRef.current.style['overflow-y'] = 'auto';
     }).watch();
+    var laid = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref) {
+      var _langList = _ref.langList;
+      return setLangList(_langList);
+    }).watch();
     return function () {
       context.$unsubscriber(context.topics.MODAL_OPEN, moid);
       context.$unsubscriber(context.topics.MODAL_CLOSE, mcid);
+      context.$unsubscriber(context.topics.LANG_SETTING_SELECT, laid);
     };
   }, []);
   useEffect(function () {
-    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref) {
-      var data = _ref.data;
-      if (!activeCellRef.current) {
+    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref2) {
+      var data = _ref2.data;
+      if (!operatorId.selector) {
         message.info('请在右侧画布选择节点');
         return;
       }
-      if (activeCellRef.current.getAttribute('name') !== 'box') {
+      if (context.componentMap.get(operatorId.selector).dom.getAttribute('name') !== 'box') {
         message.info('该节点不支持添加子节点');
         return;
       }
       var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
-      var _id = "".concat(data.component.toLowerCase(), "_").concat(generateShortUuid());
+      var _id = "".concat(data.component.toLowerCase(), "_").concat(suid());
       var cloneData = cloneDeep(context.pageData);
-      add(cloneData, activeCellRef.current.id, _id, json);
-      context._setPageData(cloneData);
-      setTimeout(function () {
+      add(cloneData, operatorId.selector, _id, json);
+      context._setPageData(cloneData).then(function (newData) {
         context.$publisher(context.topics.COMPONENT_APPEND, {
           id: _id,
-          pageData: cloneDeep(cloneData)
+          pageData: newData
         });
       });
     }).watch();
@@ -140,22 +175,68 @@ var Design = function Design() {
       return context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
     };
   }, [context.pageData]);
+  var getDomById = useMemoizedFn(function (id) {
+    return context.componentMap.get(id).dom;
+  });
+  var handleLangChange = useMemoizedFn(function (locale) {
+    if (moment !== null && moment !== void 0 && moment.locale) {
+      var _localeInfo$locale;
+      moment.locale(((_localeInfo$locale = localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.momentLocale) || 'en');
+    }
+    setLocale(locale);
+    setContainerIntl(getIntl(locale));
+  });
+  var handleSelect = function handleSelect(_key) {
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+      id: _key,
+      cellNode: getDomById(_key)
+    } : null);
+  };
+  var handleHover = function handleHover(_key) {
+    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
+      id: _key,
+      cellNode: getDomById(_key)
+    } : null);
+  };
+  var menu = useCreation(function () {
+    if ((acticeProps === null || acticeProps === void 0 ? void 0 : acticeProps.length) > 0) return /*#__PURE__*/React.createElement("div", {
+      className: styles['next-overlay-wrapper'],
+      onMouseLeave: function onMouseLeave() {
+        return handleHover();
+      }
+    }, reverse(initial(acticeProps)).map(function (m) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: m.id
+      }, /*#__PURE__*/React.createElement("span", {
+        onClick: function onClick() {
+          return handleSelect(m.id);
+        },
+        onMouseOver: function onMouseOver() {
+          return handleHover(m.id);
+        }
+      }, m.name));
+    }));
+    return [];
+  }, [acticeProps]);
+  console.log('operatorId', operatorId);
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design']
   }, /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design-toolbar']
   }, /*#__PURE__*/React.createElement(Select, {
     size: "small",
-    defaultValue: "chinese",
+    value: langList ? locale : undefined,
     className: styles['i18n-selecter'],
     style: {
       fontSize: 12
-    }
-  }, /*#__PURE__*/React.createElement(Select.Option, {
-    value: "chinese"
-  }, "\u7B80\u4F53\u4E2D\u6587"), /*#__PURE__*/React.createElement(Select.Option, {
-    value: "endlish"
-  }, "English")), /*#__PURE__*/React.createElement("span", {
+    },
+    onSelect: handleLangChange
+  }, langList === null || langList === void 0 ? void 0 : langList.map(function (item) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: item.field,
+      value: item.field
+    }, item.title);
+  })), /*#__PURE__*/React.createElement("span", {
     className: classNames(styles['toolbar-item'], _defineProperty({}, styles.actived, activedTarget === 'pc')),
     onClick: function onClick() {
       return setActivedTarget('pc');
@@ -180,31 +261,61 @@ var Design = function Design() {
     onClick: function onClick() {
       context.$publisher(context.topics.COMPONENT_ACTIVE, {
         id: CELL_KEY.PAGE_ROOT,
-        cellNode: context.componentMap.get(CELL_KEY.PAGE_ROOT).dom
+        cellNode: getDomById(CELL_KEY.PAGE_ROOT)
       });
     }
   }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/React.createElement(Divider, {
     type: "vertical"
+  }), /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    style: {
+      fontSize: 12,
+      margin: '0 2px'
+    }
+  }, "\u9884\u89C8"), /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical"
   }), /*#__PURE__*/React.createElement(Button, {
     size: "small",
     type: "primary",
     style: {
-      fontSize: 12
+      fontSize: 12,
+      margin: '0 0 0 2px'
     }
   }, "\u4FDD\u5B58")), /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design-workspace']
-  }, /*#__PURE__*/React.createElement("div", {
+  }, operatorId.detector && /*#__PURE__*/React.createElement("div", {
     id: "lc-detector",
-    ref: detectorRef,
-    className: styles['lc-painter-design-detector']
-  }), /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-design-detector'],
+    style: getOperatorStyle(simulatorRef.current, getDomById(operatorId.detector))
+  }), operatorId.selector && /*#__PURE__*/React.createElement("div", {
     id: "lc-selector",
     ref: selectorRef,
-    className: styles['lc-painter-design-selector']
-  }), /*#__PURE__*/React.createElement(Page, {
+    className: styles['lc-painter-design-selector'],
+    style: getOperatorStyle(simulatorRef.current, getDomById(operatorId.selector))
+  }, acticeProps && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-borders-actions'],
+    style: last(acticeProps).id === "page_root" ? {
+      top: 0
+    } : ((_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.offsetTop) < 23 ? {
+      bottom: '-23px'
+    } : {
+      top: '-23px'
+    }
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    placement: "bottomLeft"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "instance-node-selector"
+  }, last(acticeProps).name)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
+    type: "delete"
+  }))))), /*#__PURE__*/React.createElement(ConfigProvider, {
+    locale: ((_localeInfo$locale2 = localeInfo[locale]) === null || _localeInfo$locale2 === void 0 ? void 0 : _localeInfo$locale2.antd) || {}
+  }, /*#__PURE__*/React.createElement(RawIntlProvider, {
+    value: intl
+  }, /*#__PURE__*/React.createElement(Page, {
     ref: simulatorRef,
     pageCode: "mk2i87qb",
     className: styles['lc-painter-design-simulator']
-  })));
+  })))));
 };
 export default Design;

package/es/lowcode/painter/I18n.js

@@ -6,19 +6,18 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 var _getDvaApp;
 import React, { useState } from 'react';
 import { getDvaApp } from 'umi';
-import { useAsyncEffect, useCreation } from 'ahooks';
+import { useAsyncEffect, useCreation, useMemoizedFn } from 'ahooks';
 import { GridTable } from 'luck-design';
 import { reduce, remove, cloneDeep, debounce } from 'lodash';
 import { Input, Button, Icon } from 'luck-design/antd';
-import { formatMessage } from '@luck-design-biz/base/utils';
-import lcid from "../engine/tools/lcid";
+import { formatMessage, suid } from '@luck-design-biz/base/utils';
+import { useLDContext } from "../engine/provider/ContextProvider";
 import { readAllLang, doAddLang, doUpdateLang, doDeleteLang } from "./services/I18n";
-import { useMemoizedFn } from 'ahooks';
 var Search = Input.Search;
 var _getDvaApp$_store = (_getDvaApp = getDvaApp()) === null || _getDvaApp === void 0 ? void 0 : _getDvaApp._store,
   dispatch = _getDvaApp$_store.dispatch;
 var getLangKey = function getLangKey() {
-  return "app.lowcode.".concat(lcid());
+  return "app.lowcode.".concat(suid());
 };
 var formatDataFunc = function formatDataFunc(data) {
   return _objectSpread(_objectSpread({}, data), reduce(data.languages, function (ret, value, key) {
@@ -27,6 +26,7 @@ var formatDataFunc = function formatDataFunc(data) {
   }, {}));
 };
 var I18n = function I18n() {
+  var context = useLDContext();
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     langList = _useState2[0],
@@ -60,8 +60,11 @@ var I18n = function I18n() {
         case 2:
           _langList = _context.sent;
           setLangList(_langList);
+          context.$publisher(context.topics.LANG_SETTING_SELECT, {
+            langList: _langList
+          });
           doQuery();
-        case 5:
+        case 6:
         case "end":
           return _context.stop();
       }

package/es/lowcode/painter/Panel.js

@@ -48,7 +48,12 @@ var Panel = function Panel() {
     console.log('handleChange', activeNode, field, value);
     var cloneData = cloneDeep(context.pageData);
     modifyById(cloneData, activeNode.node.id, _objectSpread(_objectSpread({}, activeNode.node), {}, _defineProperty({}, field, value)));
-    context._setPageData(cloneData);
+    context._setPageData(cloneData).then(function (newData) {
+      context.$publisher(context.topics.COMPONENT_MODIFY, {
+        id: activeNode.node.id,
+        pageData: cloneDeep(newData)
+      });
+    });
     setFalse();
   });
   var renderPanelItems = useMemoizedFn(function (items) {
@@ -59,7 +64,7 @@ var Panel = function Panel() {
         label: item.name
       }, Comp && /*#__PURE__*/React.createElement(Comp, {
         field: item.key,
-        value: activeNode.node[item.key],
+        defaultValue: activeNode.node[item.key],
         next: function next() {
           if (!item.next) return;
           nextRef.current = {

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

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["onValueChange", "rules", "value"];
 import React, { forwardRef, useState, useEffect } from 'react';
 import { Input, Tooltip } from 'luck-design/antd';
+import classNames from 'classnames';
 import styles from "../style/rule-input.less";
 
 /**
@@ -85,16 +87,14 @@ export default /*#__PURE__*/forwardRef(function (_ref, ref) {
       onValueChange(e, value);
     } else {
       setErr(error);
-      console.log('err', error);
+      console.error(error);
     }
   };
-  var className = styles['lc-painter-components-ruleinput'];
-  if (err) className += ' ' + styles['err'];
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     title: err,
     visible: err
   }, /*#__PURE__*/React.createElement(Input, _extends({
-    className: className,
+    className: classNames(styles['lc-painter-components-ruleinput'], _defineProperty({}, styles.err, !!err)),
     size: "small",
     value: inputValue // 绑定输入值
     ,

package/es/lowcode/painter/panel-section/ButtonType.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["field", "onChange"];
+import React from 'react';
+import { Select, Button } from 'luck-design/antd';
+import styles from "../style/button-type.less";
+var ButtonType = function ButtonType(_ref) {
+  var field = _ref.field,
+    _onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    onChange: function onChange(value) {
+      return _onChange({
+        field: field,
+        value: value
+      });
+    },
+    className: styles['lc-painter-panel-section-components-buttontype']
+  }), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "primary"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    size: "small",
+    className: styles['lc-painter-panel-section-components-buttontype-option']
+  }, "primary")), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "default"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "default",
+    size: "small",
+    className: styles['lc-painter-panel-section-components-buttontype-option']
+  }, "default")), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "dashed"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "dashed",
+    size: "small",
+    className: styles['lc-painter-panel-section-components-buttontype-option']
+  }, "dashed")), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "danger"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "danger",
+    size: "small",
+    className: styles['lc-painter-panel-section-components-buttontype-option']
+  }, "danger")));
+};
+export default ButtonType;

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

@@ -35,9 +35,9 @@ var _DEFAULTRATIO_ = '12:3:9';
  */
 var LayoutRatio = function LayoutRatio(_ref) {
   var field = _ref.field,
-    value = _ref.value,
+    defaultValue = _ref.defaultValue,
     onChange = _ref.onChange;
-  var _useState = useState(value || _DEFAULTRATIO_),
+  var _useState = useState(defaultValue || _DEFAULTRATIO_),
     _useState2 = _slicedToArray(_useState, 2),
     currentRatio = _useState2[0],
     setCurrentRatio = _useState2[1];

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

@@ -3,10 +3,9 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import React, { useRef, useReducer, useEffect } from 'react';
 import { Radio, Icon, Tooltip, Input } from 'luck-design/antd';
-import { formatMessage } from '@luck-design-biz/base/utils';
+import { formatMessage, suid } from '@luck-design-biz/base/utils';
 import { Segmented } from '@luck-helper/ui-design';
 import styles from "../style/tabitems.less";
-import generateShortUuid from "../../engine/tools/lcid";
 import { SortBox, SortItem } from "../components/SortBox";
 import { TabEditor, TabEditorItem } from "../components/TabEditor";
 import PopConfirm from "../components/PopConfirm";
@@ -61,7 +60,7 @@ var TabItems = function TabItems(_ref) {
     dispatch({
       type: 'add',
       payload: {
-        id: "tab_".concat(generateShortUuid()),
+        id: "tab_".concat(suid()),
         name: "\u9009\u9879".concat(items.length + 1),
         active: false,
         resid: null,

package/es/lowcode/painter/style/button-type.less

@@ -0,0 +1,5 @@
+.lc-painter-panel-section-components-buttontype {
+  &-option {
+    width: 100%;
+  }
+}