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

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

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
-import { useCreation } from 'ahooks';
+import { useCreation, useMemoizedFn } from 'ahooks';
 import styles from "../style/layout-ratio.less";
 import { formatMessage } from '@luck-design-biz/base/utils';
 import RuleInput from "../components/RuleInput";
@@ -37,18 +37,17 @@ var LayoutRatio = function LayoutRatio(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     currentRatio = _useState2[0],
     setCurrentRatio = _useState2[1];
-  var handleInputChange = function handleInputChange(_, value) {
+  var handleInputChange = useMemoizedFn(function (_, value) {
     // console.log('value', value);
     // if (!value) value = _DEFAULTRATIO_;
     setCurrentRatio(value);
     onChange === null || onChange === void 0 || onChange(value);
-  };
-  var handGridClick = function handGridClick(selectedRadio) {
+  });
+  var handGridClick = useMemoizedFn(function (selectedRadio) {
     // console.log('selectedRadio', selectedRadio);
     setCurrentRatio(selectedRadio);
     onChange === null || onChange === void 0 || onChange(selectedRadio);
-  };
-
+  });
   // 定义验证规则
   var rules = [{
     func: function func(value) {
@@ -60,7 +59,7 @@ var LayoutRatio = function LayoutRatio(_ref) {
     },
     err: formatMessage({
       id: 'luckda.lowcode.painter.panel-section.Layoutratio.err',
-      label: '必须是数字或者数字加:号的组合，且数字之和必须等于12'
+      label: '必须是数字或者数字加:号的组合'
     })
   }];
   var _useCreation = useCreation(function () {

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Select, Button } from 'luck-design/antd';
+import { useRemoteSource } from "../../engine/provider/ContextProvider";
+var Div = styled.div.withConfig({
+  displayName: "Div",
+  componentId: "luckda-6530__sc-nsshdj-0"
+})(["display:flex;align-items:center;"]);
+var SerialsSelector = function SerialsSelector(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    size = _ref.size;
+  var _useRemoteSource = useRemoteSource(),
+    serials = _useRemoteSource.serials,
+    refreshSerials = _useRemoteSource.refreshSerials,
+    fetchAllSerialsLoading = _useRemoteSource.fetchAllSerialsLoading;
+  return /*#__PURE__*/React.createElement(Div, null, /*#__PURE__*/React.createElement(Select, {
+    defaultValue: defaultValue,
+    size: size,
+    allowClear: true,
+    onChange: onChange,
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    style: {
+      flex: 1
+    },
+    loading: fetchAllSerialsLoading
+  }, serials.map(function (opt) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: opt.uid,
+      value: opt.serial
+    }, opt.name);
+  })), /*#__PURE__*/React.createElement(Button, {
+    size: size,
+    icon: "cloud-sync",
+    loading: fetchAllSerialsLoading,
+    style: {
+      marginLeft: 4
+    },
+    onClick: refreshSerials
+  }));
+};
+export default SerialsSelector;

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

@@ -0,0 +1,248 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import { useMemoizedFn, useCreation } from 'ahooks';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import { isString, drop } from 'lodash';
+import { Tooltip, Segmented, Icon } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import RuleInput from "../components/RuleInput";
+import PanelItem from "../components/PanelItem";
+import styles from "../style/split-display.less";
+var _TYPES_ = ['normal', 'lr', 'lmr', 'ltb'];
+var _OPTIONS_ = [{
+  label: formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.splitdisplay.splitVertical',
+    label: '横向'
+  }),
+  value: 'vertical'
+}, {
+  label: formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.splitdisplay.splitHorizontal',
+    label: '纵向'
+  }),
+  value: 'horizontal'
+}];
+var _RULES_ = [{
+  func: function func(value) {
+    // 首先，检查value是否为字符串
+    if (!isString(value)) return false;
+
+    // 使用正则表达式检查字符串是否只包含数字和冒号，并且不以冒号开始或结束
+    return /^[0-9]+(:[0-9]+)*$/.test(value);
+  },
+  err: formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.splitdisplay.err',
+    label: '必须是数字或者数字加:号的组合'
+  })
+}];
+var _FAST_TO_MAPPING_ = {
+  right: 'left',
+  left: 'right',
+  up: 'down',
+  down: 'up'
+};
+var FastToBox = styled.div.withConfig({
+  displayName: "FastToBox",
+  componentId: "luckda-6530__sc-aassai-0"
+})(["display:flex;justify-content:flex-start;align-items:center;i:not(:last-child){margin-right:4px;}"]);
+var SplitDisplay = function SplitDisplay(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var valueRef = useRef(defaultValue);
+  var _useState = useState(defaultValue.type || 'normal'),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeType = _useState2[0],
+    setActiveType = _useState2[1];
+  var _useState3 = useState(defaultValue.split || 'vertical'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    split = _useState4[0],
+    setSplit = _useState4[1];
+  var _useState5 = useState(defaultValue.ratio || '1:1'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    ratio = _useState6[0],
+    setRatio = _useState6[1];
+  var ratioArr = useCreation(function () {
+    return ratio.split(':').map(function (r) {
+      return parseInt(r);
+    });
+  }, [ratio]);
+  var _useState7 = useState(function () {
+      return drop(ratioArr).map(function () {
+        return split === 'vertical' ? 'right' : 'down';
+      });
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fastTo = _useState8[0],
+    setFastTo = _useState8[1];
+  var handleTypeChange = useMemoizedFn(function (value) {
+    setActiveType(value);
+    if (value === 'normal') {
+      valueRef.current = {
+        type: value,
+        fastTo: fastTo,
+        split: split,
+        ratio: ratio
+      };
+    } else {
+      valueRef.current = {
+        type: value
+      };
+    }
+    onChange(valueRef.current);
+  });
+  var handleFastToItemClick = useMemoizedFn(function (d, i) {
+    var _fastTo = _toConsumableArray(fastTo);
+    _fastTo[i] = _FAST_TO_MAPPING_[d];
+    setFastTo(_fastTo);
+    valueRef.current.fastTo = _fastTo;
+    onChange(_objectSpread({}, valueRef.current));
+  });
+  var handleSplitChange = useMemoizedFn(function (value) {
+    var _fastTo = drop(ratio.split(':')).map(function () {
+      return value === 'vertical' ? 'right' : 'down';
+    });
+    setSplit(value);
+    setFastTo(_fastTo);
+    valueRef.current.split = value;
+    valueRef.current.fastTo = _fastTo;
+    onChange(_objectSpread({}, valueRef.current));
+  });
+  var handleInputChange = useMemoizedFn(function (_, value) {
+    var _fastTo = drop(value.split(':')).map(function () {
+      return split === 'vertical' ? 'right' : 'down';
+    });
+    setRatio(value);
+    setFastTo(_fastTo);
+    valueRef.current.ratio = value;
+    valueRef.current.fastTo = _fastTo;
+    onChange(_objectSpread({}, valueRef.current));
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-splitdisplay']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['display-type-box']
+  }, _TYPES_.map(function (_type) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      key: _type,
+      title: _type
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles['display-type-item'], _defineProperty({}, styles.active, activeType === _type)),
+      style: {
+        flexDirection: _type === 'normal' && split === 'horizontal' ? 'column' : 'row'
+      },
+      onClick: function onClick() {
+        return handleTypeChange(_type);
+      }
+    }, _type === 'normal' && ratioArr.map(function (r, i) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: i,
+        style: _defineProperty({
+          flex: r
+        }, split === 'horizontal' ? 'borderBottom' : 'borderRight', i < ratioArr.length - 1 ? '1px solid #eee' : 'none'),
+        className: styles['item-block']
+      });
+    }), _type === 'lr' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        marginRight: 4
+      },
+      className: styles['item-block']
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 3
+      },
+      className: styles['item-block']
+    })), _type === 'lmr' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        marginRight: 4
+      },
+      className: styles['item-block']
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 3,
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '50%',
+        borderRight: '1px solid #eee'
+      },
+      className: styles['item-block']
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '50%'
+      },
+      className: styles['item-block']
+    }))), _type === 'ltb' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        marginRight: 4
+      },
+      className: styles['item-block']
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 3,
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '50%',
+        borderBottom: '1px solid #eee'
+      },
+      className: styles['item-block']
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '50%'
+      },
+      className: styles['item-block']
+    })))));
+  })), activeType === 'normal' && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 8
+    }
+  }, /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.splitdisplay.fastTo',
+      label: '收缩方向'
+    }),
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(FastToBox, null, fastTo.map(function (d, i) {
+    return /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-".concat(d),
+      onClick: function onClick() {
+        return handleFastToItemClick(d, i);
+      }
+    });
+  }))), /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.splitdisplay.split',
+      label: '分割方向'
+    }),
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    options: _OPTIONS_,
+    defaultValue: split,
+    onChange: handleSplitChange
+  })), /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.splitdisplay.ratio',
+      label: '列比例'
+    }),
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(RuleInput, {
+    placeholder: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',
+      label: '请输入列比例'
+    }),
+    rules: _RULES_,
+    onValueChange: handleInputChange,
+    value: ratio
+  }))));
+};
+export default SplitDisplay;

package/es/lowcode/painter/panel-section/StylePanel/MainPanel.js

@@ -38,7 +38,7 @@ var MainPanel = function MainPanel() {
       payload: code
     });
   }, []);
-  var handOnEditorLoad = useCallback(function () {
+  var handleEditorLoad = useCallback(function () {
     editorRef.current.editor.setValue(currentCoce.current);
   }, []);
   return /*#__PURE__*/React.createElement("div", {
@@ -58,7 +58,7 @@ var MainPanel = function MainPanel() {
       width: "280px",
       height: "300px",
       onChange: handleCodeChange,
-      onLoad: handOnEditorLoad
+      onLoad: handleEditorLoad
     })
   }, /*#__PURE__*/React.createElement(Button, {
     type: "primary",

package/es/lowcode/painter/panel-section/StylePanel/StyleContext.js

@@ -5,6 +5,7 @@ import { createContext, useContext, useReducer, useRef } from 'react';
 import postcss from 'postcss';
 import { isNil } from 'lodash';
 import { useUpdateEffect } from 'ahooks';
+import { parseCSS } from "../../../engine/tools/helper";
 var StyleContext = /*#__PURE__*/createContext(null);
 var StyleDispatchContext = /*#__PURE__*/createContext(null);
 var EditorContext = /*#__PURE__*/createContext(null);
@@ -44,7 +45,7 @@ export function StyleProvider(_ref) {
         throw new Error();
     }
   };
-  var _useReducer = useReducer(styleReducer, parseCSS(value)),
+  var _useReducer = useReducer(styleReducer, parseCSS(":root{".concat(value, "}"))),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     style = _useReducer2[0],
     dispatch = _useReducer2[1];
@@ -80,27 +81,6 @@ function removeRootBrackets(cssText) {
     return innerContent.trim();
   });
 }
-var parseCSS = function parseCSS(cssString) {
-  // 创建一个空对象来存储解析后的样式
-  var parsedStyles = {};
-  if (cssString) {
-    try {
-      // 解析CSS字符串
-      var ast = postcss.parse(cssString);
-
-      // 遍历AST中的每个规则
-      ast.walkDecls(function (decl) {
-        // 将每个声明的属性和值存储在对象中
-        parsedStyles[decl.prop] = decl.value;
-      });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  // 返回包含所有样式的对象
-  return parsedStyles;
-};
 export var styleToCSS = function styleToCSS(styleObject) {
   // Create a PostCSS root node
   var root = postcss.root();

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

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useReducer, useEffect } from 'react';
-import { Radio, Icon, Tooltip, Input } from 'luck-design/antd';
+import { Radio, Icon, Tooltip, Input, Switch } from 'luck-design/antd';
 import { formatMessage, suid } from '@luck-design-biz/base/utils';
 import { Segmented } from '@luck-helper/ui-design';
 import styles from "../style/tabitems.less";
@@ -10,10 +10,24 @@ import { ListEditor, ListEditorItem } from "../components/ListEditor";
 import PopConfirm from "../components/PopConfirm";
 import { PopForm, PopFormItem, PopFormItemLeft, PopFormItemRight } from "../components/PopForm";
 import { listReducer } from "../../engine/tools/helper";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.tabsitems';
+var _SERIAL_EFFECT_OPTIONS_ = [{
+  label: formatMessage({
+    id: 'luckda.lowcode.painter.hidden',
+    label: '隐藏'
+  }),
+  value: 'hidden'
+}, {
+  label: formatMessage({
+    id: 'luckda.lowcode.painter.disable',
+    label: '禁用'
+  }),
+  value: 'disable'
+}];
 var TabItems = function TabItems(_ref) {
-  var options = _ref.options,
+  var defaultValue = _ref.defaultValue,
     onChange = _ref.onChange;
-  var _useReducer = useReducer(listReducer, options),
+  var _useReducer = useReducer(listReducer, defaultValue),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     items = _useReducer2[0],
     dispatch = _useReducer2[1];
@@ -30,10 +44,11 @@ var TabItems = function TabItems(_ref) {
       type: 'add',
       payload: {
         id: "tab_".concat(suid()),
-        name: "\u9009\u9879".concat(items.length + 1),
+        name: '标签项',
         active: false,
-        resid: null,
-        effect: 'disable'
+        destory: false,
+        serial: null,
+        serialEffect: 'hidden'
       }
     });
   };
@@ -49,6 +64,9 @@ var TabItems = function TabItems(_ref) {
     }),
     onChange: handleSortChange
   }, /*#__PURE__*/React.createElement(ListEditor, {
+    style: {
+      padding: '0 16px'
+    },
     handleAdd: handleAdd
   }, items.map(function (item) {
     return /*#__PURE__*/React.createElement(SortItem, {
@@ -98,8 +116,8 @@ var TabItemRight = function TabItemRight(_ref3) {
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     title: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.tabsitems.edit',
-      label: '添加'
+      id: 'luckda.lowcode.painter.edit',
+      label: '编辑'
     })
   }, /*#__PURE__*/React.createElement(PopConfirm, {
     placement: "bottomLeft",
@@ -112,7 +130,7 @@ var TabItemRight = function TabItemRight(_ref3) {
     type: "edit"
   }))), /*#__PURE__*/React.createElement(Tooltip, {
     title: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.tabsitems.delete',
+      id: 'luckda.lowcode.painter.delete',
       label: '删除'
     })
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -124,13 +142,6 @@ var TabItemRight = function TabItemRight(_ref3) {
 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',
@@ -149,7 +160,7 @@ var TabItemEditor = function TabItemEditor(_ref4) {
       payload: {
         id: item.id,
         data: _objectSpread(_objectSpread({}, item), {}, {
-          effect: value.option.value
+          serialEffect: value.option.value
         })
       }
     });
@@ -160,48 +171,53 @@ var TabItemEditor = function TabItemEditor(_ref4) {
       payload: {
         id: item.id,
         data: _objectSpread(_objectSpread({}, item), {}, {
-          resid: e.target.value
+          serial: e.target.value
         })
       }
     });
   };
   return /*#__PURE__*/React.createElement(PopForm, null, /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.tabname',
+    id: "".concat(_I18N_PREFIX_, ".editor.tabname"),
     label: '名称'
   })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Input, {
     size: "small",
     value: item.name,
     onChange: handleNameChange,
     placeholder: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.tabname.placeholder',
+      id: "".concat(_I18N_PREFIX_, ".editor.tabname.placeholder"),
       label: '请输入标签名称'
     })
   }))), /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.id',
+    id: "".concat(_I18N_PREFIX_, ".editor.id"),
     label: '编号'
   })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Input, {
     size: "small",
     value: item.id,
     disabled: true
   }))), /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.reskey',
+    id: "".concat(_I18N_PREFIX_, ".editor.destory"),
+    label: '隐藏销毁'
+  })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Switch, {
+    size: "small",
+    value: item.destory
+  }))), /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".editor.serial"),
     label: '资源串'
   })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Input, {
     size: "small",
-    value: item.resid,
+    value: item.serial,
     onChange: handleResChange,
     placeholder: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.reskey.placeholder',
-      label: '请输入资源串'
+      id: "".concat(_I18N_PREFIX_, ".editor.serial.placeholder"),
+      label: '请输入资源串名称'
     })
   }))), /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.tabsitems.editor.reskey',
-    label: '控制效果'
+    id: "".concat(_I18N_PREFIX_, ".editor.serialEffect"),
+    label: '越权效果'
   })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Segmented, {
-    field: "effect",
-    options: options,
+    options: _SERIAL_EFFECT_OPTIONS_,
     onChange: handleEffectChange,
-    value: item.effect
+    value: item.serialEffect
   }))));
 };
 export default TabItems;