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

package/es/lowcode/painter/DesignToolbar.js

@@ -0,0 +1,91 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { Select, Button, Icon, Divider } from 'luck-design/antd';
+import { useLDContext } from "../engine/provider/ContextProvider";
+import { CELL_KEY } from "../constants";
+import styles from "./style/design.less";
+var DesignToolbar = function DesignToolbar(_ref) {
+  var locale = _ref.locale,
+    onLangChange = _ref.onLangChange;
+  var context = useLDContext();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    langList = _useState2[0],
+    setLangList = _useState2[1];
+  var _useState3 = useState('pc'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activedTarget = _useState4[0],
+    setActivedTarget = _useState4[1];
+  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.createElement("div", {
+    className: styles['lc-painter-design-toolbar']
+  }, /*#__PURE__*/React.createElement(Select, {
+    size: "small",
+    value: langList ? locale : undefined,
+    className: styles['i18n-selecter'],
+    style: {
+      fontSize: 12
+    },
+    onSelect: onLangChange
+  }, 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');
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "laptop"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.actived, activedTarget === 'mobile')),
+    onClick: function onClick() {
+      return setActivedTarget('mobile');
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "mobile"
+  })), /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 'auto',
+      fontSize: 12
+    },
+    className: styles['toolbar-item'],
+    onClick: function onClick() {
+      context.$publisher(context.topics.COMPONENT_ACTIVE, {
+        id: 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,
+      margin: '0 0 0 2px'
+    }
+  }, "\u4FDD\u5B58"));
+};
+export default DesignToolbar;

package/es/lowcode/painter/I18n.js

@@ -1,5 +1,205 @@
-import React from 'react';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _getDvaApp;
+import React, { useState } from 'react';
+import { getDvaApp } from 'umi';
+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, suid } from '@luck-design-biz/base/utils';
+import { useLDContext } from "../engine/provider/ContextProvider";
+import { readAllLang, doAddLang, doUpdateLang, doDeleteLang } from "./services/I18n";
+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(suid());
+};
+var formatDataFunc = function formatDataFunc(data) {
+  return _objectSpread(_objectSpread({}, data), reduce(data.languages, function (ret, value, key) {
+    ret[key] = value;
+    return ret;
+  }, {}));
+};
 var I18n = function I18n() {
-  return /*#__PURE__*/React.createElement("div", null, "i18n");
+  var context = useLDContext();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    langList = _useState2[0],
+    setLangList = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dataSource = _useState4[0],
+    setDataSource = _useState4[1];
+  useAsyncEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _langList;
+    return _regeneratorRuntime().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 = useMemoizedFn(function () {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    readAllLang(_objectSpread(_objectSpread({}, 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 = useCreation(function () {
+    return {
+      width: 60,
+      getActions: function getActions() {
+        return [{
+          wanted: 'update',
+          title: /*#__PURE__*/React.createElement(Icon, {
+            type: "copy"
+          }),
+          action: function action(_data) {
+            var data = {
+              languages: reduce(langList, function (result, value) {
+                result[value.field] = _data[value.field];
+                return result;
+              }, {})
+            };
+            handleAdd(data);
+          }
+        }, {
+          wanted: 'delete',
+          title: /*#__PURE__*/React.createElement(Icon, {
+            type: "delete"
+          }),
+          confirm: {
+            title: formatMessage({
+              id: 'app.base.confirm.delete'
+            })
+          },
+          action: handleDelete
+        }];
+      }
+    };
+  }, [langList]);
+  var handleAdd = useMemoizedFn(function () {
+    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var addItems = _objectSpread(_objectSpread({}, data), {}, {
+      langKey: getLangKey(),
+      classifyKey: '__LOWCODE__'
+    });
+    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 = useMemoizedFn(function (field, newValue, oldValue, record) {
+    doUpdateLang({}, {
+      classifyKey: '__LOWCODE__',
+      langKey: record.langKey,
+      indocno: record.indocno,
+      languages: _objectSpread(_objectSpread({}, reduce(langList, function (result, value) {
+        result[value.field] = record[value.field];
+        return result;
+      }, {})), {}, _defineProperty({}, field, newValue))
+    });
+  });
+  var handleDelete = useMemoizedFn(function (data) {
+    doDeleteLang({}, {
+      delList: [{
+        indocno: data.indocno
+      }]
+    }).then(function (_ref2) {
+      var code = _ref2.code;
+      if (code === 1) {
+        var _data = cloneDeep(dataSource);
+        remove(_data, function (n) {
+          return n.indocno === data.indocno;
+        });
+        setDataSource(_data);
+      }
+      ;
+    });
+  });
+  var handleSearch = debounce(doQuery, 300);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      padding: '16px 24px'
+    }
+  }, /*#__PURE__*/React.createElement(Search, {
+    placeholder: 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.createElement(Button, {
+    type: "primary",
+    ghost: true,
+    size: "small",
+    style: {
+      margin: '16px 0'
+    },
+    onClick: function onClick() {
+      return handleAdd();
+    }
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.I18n.add',
+    label: '新增文案'
+  })), /*#__PURE__*/React.createElement(GridTable, {
+    height: 480,
+    columns: langList,
+    dataSource: dataSource,
+    renderIndex: false,
+    showStatusBar: false,
+    actionsColumn: actionsColumn,
+    onValueChange: handleValueChange,
+    operates: ['add', 'update', 'delete'],
+    bordered: false
+  }));
 };
 export default I18n;

package/es/lowcode/painter/Outline.js

@@ -4,7 +4,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["props", "children"];
 import React, { useRef, useState, useEffect } from 'react';
-import { useMemoizedFn, useDeepCompareLayoutEffect } from 'ahooks';
+import { useMemoizedFn, useDeepCompareLayoutEffect, useLatest } from 'ahooks';
 import { uniq, split, reduce } from 'lodash';
 import classNames from 'classnames';
 import { Card, Tree, Icon } from 'luck-design/antd';
@@ -15,10 +15,8 @@ import { getPathById } from "../engine/tools/dataProcess";
 import styles from "./style/outline.less";
 var TreeNode = Tree.TreeNode;
 var PAGE_CELL = [CELL_KEY.PAGE_HEADER, CELL_KEY.PAGE_CONTENT, CELL_KEY.PAGE_FOOTER];
-var Outline = function Outline() {
-  var modalTreeRef = useRef();
-  var pageTreeRef = useRef();
-  var openModal = useRef(void 0);
+var Outline = function Outline(_ref) {
+  var open = _ref.open;
   var clickBySelf = useRef(false);
   var context = useLDContext();
   var _useState = useState(null),
@@ -37,6 +35,8 @@ var Outline = function Outline() {
     _useState8 = _slicedToArray(_useState7, 2),
     pageExpandedKeys = _useState8[0],
     setPageExpandedKeys = _useState8[1];
+  var latestModalExpandedKeysRef = useLatest(modalExpandedKeys);
+  var lastPageExpandedKeysRef = useLatest(pageExpandedKeys);
   useEffect(function () {
     var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
       setSelectedKey(payload.id);
@@ -44,36 +44,35 @@ var Outline = function Outline() {
         clickBySelf.current = false;
         return;
       }
-      setModalExpandedKeys(uniq([].concat(_toConsumableArray((openModal.current ? modalTreeRef : pageTreeRef).current.props.expandedKeys), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
+      var _split = split(getPathById(context.pageData, payload.id), '/'),
+        _split2 = _slicedToArray(_split, 1),
+        _root = _split2[0];
+      if (!PAGE_CELL.includes(_root)) {
+        setModalExpandedKeys(uniq([].concat(_toConsumableArray(latestModalExpandedKeysRef.current), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
+      } else {
+        setPageExpandedKeys(uniq([].concat(_toConsumableArray(lastPageExpandedKeysRef.current), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
+      }
     }).watch();
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
-  }, []);
-  var handleSelect = function handleSelect(_key) {
+  }, [context.pageData]);
+  var handleSelect = useMemoizedFn(function (_key) {
     clickBySelf.current = true;
     context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
-      id: _key,
-      cellNode: context.componentMap.get(_key).dom
+      id: _key
     } : null);
-  };
-  var handleOpenModal = useMemoizedFn(function (_key) {
-    var _comp = context.componentMap.get(_key);
-    var _prevComp = openModal.current ? context.componentMap.get(openModal.current) : null;
-    _prevComp === null || _prevComp === void 0 || _prevComp.api.doClose();
-    _comp.api.doOpen();
-    openModal.current = _key;
   });
-  var render = useMemoizedFn(function (_ref) {
-    var props = _ref.props,
-      children = _ref.children,
-      childrenMap = _objectWithoutProperties(_ref, _excluded);
+  var render = useMemoizedFn(function (_ref2) {
+    var props = _ref2.props,
+      children = _ref2.children,
+      childrenMap = _objectWithoutProperties(_ref2, _excluded);
     if (props) {
       return /*#__PURE__*/React.createElement(TreeNode, {
         icon: /*#__PURE__*/React.createElement(Icon, {
           type: "layout"
         }),
-        title: props.label,
+        title: props.name,
         key: props.id
       }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
         return render(childrenMap[_id]);
@@ -84,6 +83,9 @@ var Outline = function Outline() {
     });
   });
   useDeepCompareLayoutEffect(function () {
+    if (!context.pageData) {
+      return;
+    }
     var _reduce = reduce(context.pageData.children, function (result, _id) {
         var resultKey = PAGE_CELL.includes(_id) ? 'page' : 'modal';
         result[resultKey][_id] = context.pageData[_id];
@@ -124,7 +126,7 @@ var Outline = function Outline() {
     type: "inner",
     hoverable: true,
     title: formatMessage({
-      id: 'luckda.lowcode.model',
+      id: 'luckda.lowcode.modal',
       label: '模态视图层'
     }),
     style: {
@@ -134,7 +136,6 @@ var Outline = function Outline() {
       padding: 0
     }
   }, /*#__PURE__*/React.createElement(Tree, {
-    ref: modalTreeRef,
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -142,41 +143,51 @@ var Outline = function Outline() {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    onSelect: function onSelect(_ref2, _ref3) {
-      var _ref4 = _slicedToArray(_ref2, 1),
-        _key = _ref4[0];
-      var selected = _ref3.selected,
-        node = _ref3.node;
+    onSelect: function onSelect(_ref3, _ref4) {
+      var _ref5 = _slicedToArray(_ref3, 1),
+        _key = _ref5[0];
+      var selected = _ref4.selected,
+        node = _ref4.node;
       if (selected && node.props.pos.split('-').length === 2) {
-        handleOpenModal(_key);
+        // 选中节点是模态视图，则打开模态视图组件
+        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: true,
+          id: _key
+        });
         handleSelect(_key);
       } else if (!selected && node.props.pos.split('-').length === 2) {
-        var _comp = context.componentMap.get(openModal.current);
-        _comp.api.doClose();
-        openModal.current = void 0;
+        // 取消选中节点是模态视图，则关闭模态视图
+        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: false,
+          id: _key
+        });
         handleSelect(null);
       } else {
+        // 选中节点是模态视图下的子组件，则打开该组件的模态视图组件
         handleSelect(node.props.eventKey);
-        var _split = split(getPathById(context.pageData, node.props.eventKey), '/'),
-          _split2 = _slicedToArray(_split, 1),
-          parentModal = _split2[0];
-        if (!openModal.current || openModal.current !== parentModal) {
-          handleOpenModal(parentModal);
-        }
+        var _split3 = split(getPathById(context.pageData, node.props.eventKey), '/'),
+          _split4 = _slicedToArray(_split3, 1),
+          parentModal = _split4[0];
+        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: true,
+          id: parentModal
+        });
       }
     },
     expandedKeys: modalExpandedKeys,
-    onExpand: function onExpand(_keys, _ref5) {
-      var expanded = _ref5.expanded,
-        node = _ref5.node;
+    onExpand: function onExpand(_keys, _ref6) {
+      var expanded = _ref6.expanded,
+        node = _ref6.node;
       if (expanded && node.props.pos.split('-').length === 2) {
         handleSelect(null);
-        handleOpenModal(node.props.eventKey);
+        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: true,
+          id: node.props.eventKey
+        });
       }
       setModalExpandedKeys(_keys);
     }
-  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), /*#__PURE__*/React.createElement(Tree, {
-    ref: pageTreeRef,
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), open && /*#__PURE__*/React.createElement(Tree, {
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -184,15 +195,13 @@ var Outline = function Outline() {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    onSelect: function onSelect(_ref6, _ref7) {
-      var _ref8 = _slicedToArray(_ref6, 1),
-        _key = _ref8[0];
-      var node = _ref7.node;
-      if (openModal.current) {
-        var _prevComp = context.componentMap.get(openModal.current);
-        _prevComp.api.doClose();
-        openModal.current = void 0;
-      }
+    onSelect: function onSelect(_ref7, _ref8) {
+      var _ref9 = _slicedToArray(_ref7, 1),
+        _key = _ref9[0];
+      var node = _ref8.node;
+      context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+        toggle: false
+      });
       handleSelect(node.props.eventKey);
     },
     expandedKeys: pageExpandedKeys,