@luck-design-biz/luckda 0.0.25-9 → 0.0.26

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

@@ -1,92 +1,20 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState, useEffect } from 'react';
-import { useMemoizedFn, useCreation } from 'ahooks';
-import { Tooltip, Icon } from 'luck-design/antd';
-import { startsWith } from 'lodash';
-import classNames from 'classnames';
+import React from 'react';
 import styles from "../style/panel-item.less";
 
 /**
- * `PanelItem` 组件用于展示属性面板中的单个属性项。
- * 它支持展示一个标签（属性名称）及对应的组件（例如输入框、选择器等），并可通过传入的 `addon` 属性添加额外的内容。
- * 此组件支持折叠功能，可以通过 `collapsed` 属性控制初始折叠状态。
- *
- * @component
- * @example
- * ```jsx
- * <PanelItem
- *   label="属性名称"
- *   collapsed={false}
- *   addon={<div>额外内容</div>}
- * >
- *   <input type="text" />
- * </PanelItem>
- * ```
- *
- * @param {Object} props 组件接收的参数。
- * @param {string} props.label 显示的属性名称。如果标签以 `#` 开头，则不显示。
- * @param {boolean} [props.collapsed=true] 初始是否折叠。默认为 `true`。
- * @param {React.ReactNode} props.addon 当属性项展开时，可以在下方显示额外内容。
- * @param {React.ReactNode} props.children 对应于属性名称的组件，可以是输入框、下拉菜单等 React 节点。
- *
- * @returns {React.Element} 渲染属性名称、对应的组件以及可选的额外内容。
+ * 属性面板属性行组件
+ * @param {string} label 属性名
+ * @param {React.ReactNode} component 属性组件
+ * @returns 
  */
 export default function (_ref) {
-  var field = _ref.field,
-    label = _ref.label,
-    desc = _ref.desc,
-    _ref$collapsed = _ref.collapsed,
-    collapsed = _ref$collapsed === void 0 ? true : _ref$collapsed,
-    addon = _ref.addon,
-    suppressPadding = _ref.suppressPadding,
-    children = _ref.children;
-  var _useState = useState(collapsed),
-    _useState2 = _slicedToArray(_useState, 2),
-    curClps = _useState2[0],
-    setCurClps = _useState2[1];
-  var HandleClick = useMemoizedFn(function () {
-    if (!addon) return;
-    setCurClps(!curClps);
-  });
-  var tip = useCreation(function () {
-    var str = void 0;
-    if (field) {
-      str = "\u5C5E\u6027\uFF1A".concat(field);
-    }
-    if (desc) {
-      str = "".concat(str ? "".concat(str, " | ") : '', "\u8BF4\u660E\uFF1A").concat(desc);
-    }
-    return str;
-  }, [field, desc]);
-  useEffect(function () {
-    setCurClps(collapsed);
-  }, [collapsed]);
+  var label = _ref.label,
+    component = _ref.component;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles['lc-painter-components-panelitem'], _defineProperty({}, styles['no-padding'], !!suppressPadding))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles['panelrow']
-  }, label && !startsWith(label, '#') && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles['item-label']).concat(addon ? ' panel-pointer' : ''),
-    onClick: HandleClick
-  }, addon && /*#__PURE__*/React.createElement(Icon, {
-    className: styles['item-icon'],
-    type: !curClps ? 'down' : 'right'
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    overlayStyle: {
-      fontSize: '12px'
-    },
-    title: tip,
-    getPopupContainer: function getPopupContainer() {
-      return document.getElementById('lc-design-workspace');
-    }
+    className: styles['lc-painter-components-panelitem']
   }, /*#__PURE__*/React.createElement("span", {
-    style: desc ? {
-      cursor: 'help'
-    } : null
-  }, label))), /*#__PURE__*/React.createElement("span", {
+    className: styles['item-label']
+  }, label), /*#__PURE__*/React.createElement("span", {
     className: styles['item-component']
-  }, children)), !curClps && addon && /*#__PURE__*/React.createElement("div", {
-    className: styles['addon']
-  }, addon));
+  }, component));
 }

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

@@ -1,13 +1,10 @@
 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", "defaultValue"];
+var _excluded = ["onValueChange", "rules", "value"];
 import React, { forwardRef, useState, useEffect } from 'react';
-import { useUpdateEffect } from 'ahooks';
 import { Input, Tooltip } from 'luck-design/antd';
-import classNames from 'classnames';
 import styles from "../style/rule-input.less";
 
 /**
@@ -45,9 +42,8 @@ export default /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onValueChange = _ref.onValueChange,
     rules = _ref.rules,
     value = _ref.value,
-    defaultValue = _ref.defaultValue,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(value || defaultValue),
+  var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     inputValue = _useState2[0],
     setInputValue = _useState2[1]; // 托管输入值的状态
@@ -57,7 +53,7 @@ export default /*#__PURE__*/forwardRef(function (_ref, ref) {
     setErr = _useState4[1];
 
   // 使用useEffect钩子监听value的变化
-  useUpdateEffect(function () {
+  useEffect(function () {
     setInputValue(value);
     setErr(null);
   }, [value]);
@@ -89,14 +85,16 @@ export default /*#__PURE__*/forwardRef(function (_ref, ref) {
       onValueChange(e, value);
     } else {
       setErr(error);
-      console.error(error);
+      console.log('err', 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: classNames(styles['lc-painter-components-ruleinput'], _defineProperty({}, styles.err, !!err)),
+    className: className,
     size: "small",
     value: inputValue // 绑定输入值
     ,

package/es/lowcode/painter/index.js

@@ -8,17 +8,12 @@ import Design from "./Design";
 import Panel from "./Panel";
 import { RUNTIME } from "../constants/index";
 import styles from "./style/index.less";
-import DragDropContext from "./components/DragDrop/DragDropContext";
 var Painter = function Painter(_ref) {
-  var className = _ref.className,
-    code = _ref.code;
+  var className = _ref.className;
   return /*#__PURE__*/React.createElement(EventBusProvider, {
     runtime: RUNTIME.DESIGN
-  }, /*#__PURE__*/React.createElement(ContextProvider, {
-    code: code
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "lc-design-workspace",
+  }, /*#__PURE__*/React.createElement(ContextProvider, null, /*#__PURE__*/React.createElement("div", {
     className: classNames(styles['lc-painter'], _defineProperty({}, className, !!className))
-  }, /*#__PURE__*/React.createElement(DragDropContext, null, /*#__PURE__*/React.createElement(Ribbon, null), /*#__PURE__*/React.createElement(Design, null), /*#__PURE__*/React.createElement(Panel, null)))));
+  }, /*#__PURE__*/React.createElement(Ribbon, null), /*#__PURE__*/React.createElement(Design, null), /*#__PURE__*/React.createElement(Panel, null))));
 };
 export default Painter;

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

@@ -1,53 +1,44 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState } from 'react';
-import { useCreation, useMemoizedFn } from 'ahooks';
+import React, { useState, useImperativeHandle, forwardRef } from 'react';
 import styles from "../style/layout-ratio.less";
 import { formatMessage } from '@luck-design-biz/base/utils';
 import RuleInput from "../components/RuleInput";
 import PanelItem from "../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';
+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';
 
 /**
- * `LayoutRatio`组件提供了一个布局比例选择器，允许用户选择或输入特定的比例配置。
- * 支持的比例配置包括预定义的比例数组`_RATIOS_`，用户还可以通过输入框自定义比例，
- * 自定义比例需要符合一定的规则：是数字或数字与冒号的组合，且数字之和必须等于12。
- * ，
- * 允许父组件获取当前选中的布局比例。
- *
- * @component
- * @example
- * ```jsxsdsdsdsdsdsdsd
- * <LayoutRatio
- *   value="6:6"
- *   onChange={(option) => console.log(option)}
- * />
- * ```
- *
- * @param {Object} props
- * @param {string} [props.value='12'] 初始化时选中的布局比例，默认为"12"。
- * @param {Function} props.onChange 当用户选择一个新的布局比例时调用的回调函数。
- *
- * @returns {React.Element} 渲染的React元素。
+ * 布局比例组件
+ * 
+ * @param {string} value 默认值
+ * @param {Function} onChange 当合法数据变化时触发
+ * @returns 
  */
-var LayoutRatio = function LayoutRatio(_ref) {
-  var defaultValue = _ref.defaultValue,
+var LayoutRatio = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var value = _ref.value,
     onChange = _ref.onChange;
-  var _useState = useState(defaultValue || _DEFAULTRATIO_),
+  var _useState = useState(value || defaultRatio),
     _useState2 = _slicedToArray(_useState, 2),
     currentRatio = _useState2[0],
     setCurrentRatio = _useState2[1];
-  var handleInputChange = useMemoizedFn(function (_, value) {
-    // console.log('value', value);
-    // if (!value) value = _DEFAULTRATIO_;
+  var handleInputChange = function handleInputChange(_, value) {
+    console.log('value', value);
+    if (!value) value = defaultRatio;
     setCurrentRatio(value);
-    onChange === null || onChange === void 0 || onChange(value);
-  });
-  var handGridClick = useMemoizedFn(function (selectedRadio) {
+  };
+  var handGridClick = function handGridClick(selectedRadio) {
     // console.log('selectedRadio', selectedRadio);
     setCurrentRatio(selectedRadio);
-    onChange === null || onChange === void 0 || onChange(selectedRadio);
+    if (onChange) onChange(selectedRadio);
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      getValue: function getValue() {
+        return currentRatio;
+      }
+    };
   });
+
   // 定义验证规则
   var rules = [{
     func: function func(value) {
@@ -55,41 +46,44 @@ var LayoutRatio = function LayoutRatio(_ref) {
       if (typeof value !== 'string') return false;
 
       // 使用正则表达式检查字符串是否只包含数字和冒号，并且不以冒号开始或结束
-      return /^[0-9]+(:[0-9]+)*$/.test(value);
+      if (!/^[0-9]+(:[0-9]+)*$/.test(value)) return false;
+
+      // 使用冒号分割字符串，并将分割后的每个元素转换为数字
+      var numbers = value.split(':').map(Number);
+
+      // 计算所有数字的总和
+      var sum = numbers.reduce(function (acc, cur) {
+        return acc + cur;
+      }, 0);
+
+      // 判断总和是否等于12
+      return sum === 12;
     },
     err: formatMessage({
       id: 'luckda.lowcode.painter.panel-section.Layoutratio.err',
-      label: '必须是数字或者数字加:号的组合'
+      label: '必须是数字或者数字加:号的组合，且数字之和必须等于12'
     })
   }];
-  var _useCreation = useCreation(function () {
-      return {
-        isCurrentInRatios: _RATIOS_.includes(currentRatio),
-        currentItemRatios: currentRatio.split(':')
-      };
-    }, [currentRatio]),
-    isCurrentInRatios = _useCreation.isCurrentInRatios,
-    currentItemRatios = _useCreation.currentItemRatios;
+  var isCurrentInRatios = ratios.includes(currentRatio);
+  var currentItemRatios = currentRatio.split(':');
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-panel-section-layoutratio']
   }, /*#__PURE__*/React.createElement("div", {
     className: styles['ratio-view']
   }, /*#__PURE__*/React.createElement("div", {
     className: styles['gridbox-container']
-  }, _RATIOS_.map(function (ratio, i) {
+  }, ratios.map(function (ratio) {
     var itemRatios = ratio.split(':');
     var isCurrent = ratio == currentRatio;
     var className = styles['gridbox'];
     if (isCurrent) className = className + ' ' + styles['current'];
     return /*#__PURE__*/React.createElement("div", {
-      key: "grid-".concat(i),
       className: className,
       onClick: function onClick() {
         return handGridClick(ratio);
       }
-    }, itemRatios.map(function (itemRatio, j) {
+    }, itemRatios.map(function (itemRatio) {
       return /*#__PURE__*/React.createElement("div", {
-        key: "gridItem-".concat(j),
         className: styles['girditem'],
         style: {
           gridColumn: 'span ' + itemRatio
@@ -101,9 +95,8 @@ var LayoutRatio = function LayoutRatio(_ref) {
     onClick: function onClick() {
       return handGridClick(ratio);
     }
-  }, currentItemRatios.map(function (itemRatio, index) {
+  }, currentItemRatios.map(function (itemRatio) {
     return /*#__PURE__*/React.createElement("div", {
-      key: "itemRatio-".concat(index),
       className: styles['girditem'],
       style: {
         gridColumn: 'span ' + itemRatio
@@ -116,15 +109,15 @@ var LayoutRatio = function LayoutRatio(_ref) {
       id: 'luckda.lowcode.painter.panel-section.Layoutratio.label',
       label: '列比例'
     }),
-    suppressPadding: true
-  }, /*#__PURE__*/React.createElement(RuleInput, {
-    placeholder: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',
-      label: '请输入列比例'
-    }),
-    rules: rules,
-    onValueChange: handleInputChange,
-    value: currentRatio
-  }))));
-};
+    component: /*#__PURE__*/React.createElement(RuleInput, {
+      placeholder: formatMessage({
+        id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',
+        label: '请输入列比例'
+      }),
+      rules: rules,
+      onValueChange: handleInputChange,
+      value: currentRatio
+    })
+  })));
+});
 export default LayoutRatio;

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

@@ -0,0 +1,58 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import styles from "../style/radio.less";
+
+/**
+ * Radio组件允许用户从一组选项中选择一个。它接收一个`options`数组来渲染选项，以及一个可选的`onChange`回调函数，
+ * 当用户选择不同的选项时，`onChange`会被调用并传递当前选中的选项对象。
+ * 
+ * @component
+ * @example
+ * const options = [
+ *   { label: '小', value: 'small' },
+ *   { label: '中', value: 'middle' },
+ *   { label: '大', value: 'large' }
+ * ];
+ * 
+ * function handleChange(option) {
+ *   console.log(option);
+ * }
+ * 
+ * <Radio options={options} onChange={handleChange} />
+ * 
+ * @param {Object} props - 组件的props。
+ * @param {Object[]} props.options - 选项数组，每个对象都应包含`label`和`value`。
+ * @param {string} props.options[].label - 选项的显示文本。
+ * @param {string} props.options[].value - 选项的值，应唯一。
+ * @param {Function} [props.onChange] - 可选，当选项变化时调用的回调函数。传递当前选中的选项对象。
+ */
+var Radio = function Radio(_ref) {
+  var _options$;
+  var options = _ref.options,
+    onChange = _ref.onChange;
+  var _useState = useState((_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeValue = _useState2[0],
+    setActiveValue = _useState2[1];
+
+  // 点击事件处理函数
+  var handleClick = function handleClick(option) {
+    // 设置当前激活的选项
+    setActiveValue(option.value);
+    if (onChange) {
+      onChange(option);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-radio']
+  }, options.map(function (option) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: option.value,
+      className: "".concat(styles['radio-item'], " ").concat(activeValue === option.value ? 'active' : ''),
+      onClick: function onClick() {
+        return handleClick(option);
+      }
+    }, option.label);
+  }));
+};
+export default Radio;

package/es/lowcode/painter/style/components.less

@@ -42,7 +42,6 @@
       border-radius: 4px;
       transition: border-color 0.3s;
       box-sizing: border-box; // 确保边框和填充不会增加元素的宽度
-      user-select: none;
 
       &:hover {
         cursor: pointer;
@@ -79,12 +78,12 @@
     }
   }
 
-  :global {
-    .ant-tabs-nav-scroll {
+  :global{
+    .ant-tabs-nav-scroll{
       display: flex;
       justify-content: center;
-      .ant-tabs-tab {
-        font-size: 14px !important;
+      .ant-tabs-tab{
+        font-size: 14px!important;
       }
     }
   }

package/es/lowcode/painter/style/design.less

@@ -4,22 +4,11 @@
   height: 0;
   top: 0;
   left: 0;
+  display: none;
   pointer-events: none;
   cursor: pointer;
   overflow: visible;
-  z-index: 1001;
-}
-
-.selector-item {
-  height: 20px;
-  background-color: var(--ant-primary-color);
-  color: #fff;
-  font-size: 16px;
-  line-height: 20px;
-  min-width: 20px;
-  text-align: center;
-  cursor: pointer;
-  border-radius: 3px;
+  z-index: 9999;
 }
 
 .lc-painter-design {
@@ -28,125 +17,22 @@
   height: 100%;
   overflow: auto;
 
-  &-toolbar {
-    width: 100%;
-    height: 40px;
-    padding: 8px 16px;
-    border-bottom: 1px solid #e3e3e3;
-    background-color: white;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    .i18n-selecter {
-      width: 125px;
-      padding: 0 8px;
-    }
-
-    .toolbar-item {
-      display: inline-block;
-      width: 32px;
-      height: 32px;
-      border-radius: 3px;
-      padding: 6px;
-      margin: 0 2px;
-      cursor: pointer;
-      text-align: center;
-      color: #8c8c8c;
-    }
-
-    .toolbar-item:hover {
-      color: #262626;
-    }
-
-    .toolbar-item.actived {
-      color: #8c8c8c;
-      background: #f1f2f3;
-    }
-
-    .toolbar-item.disabled {
-      color: #d9d9d9;
-      cursor: not-allowed;
-    }
-  }
-
-  &-workspace {
-    width: calc(100% - 16px);
-    height: calc(100% - 48px);
-    position: relative;
-    margin: 8px 8px 0 8px;
-    background-color: transparent;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  &-simulator {
-    min-height: 100%;
+  .simulator {
     :global {
-      .ant-form-item, .ant-collapse-header, .resizer {
+      .ant-form-item {
         pointer-events: none;
       }
-      .luck-grid-table {
-        .topLayout,
-        .gridTableBody {
-          pointer-events: none;
-        }
-      }
     }
   }
 
-  &-detector {
+  .detector {
     border: 1px dashed var(--ant-primary-color);
     background-color: color-mix(in sRGB, var(--ant-primary-color), transparent 95%);
     .box();
-
-    &-name{
-      position: absolute;
-      color: var(--ant-primary-color);
-      font-size: 12px;
-      line-height: 20px;
-    }
   }
 
-  &-selector {
+  .selector {
     border: 2px solid var(--ant-primary-6);
     .box();
-
-    .lc-borders-actions {
-      position: absolute;
-      right: -2px;
-      pointer-events: all;
-      cursor: default;
-      display: flex;
-
-      & > div {
-        .selector-item();
-      }
-
-      :global {
-        .instance-node-selector {
-          padding: 0 6px;
-          margin-right: 3px;
-          font-size: 12px !important;
-        }
-      }
-    }
-  }
-}
-
-.next-overlay-wrapper {
-  z-index: 3000;
-  display: flex;
-  flex-direction: column;
-  & > div > span {
-    .selector-item();
-
-    display: inline-block;
-    font-size: 12px;
-    padding: 0 6px;
-    background-color: #78869a;
-    &:not(:last-child) {
-      margin-bottom: 3px;
-    }
   }
 }

package/es/lowcode/painter/style/index.less

@@ -3,4 +3,5 @@
   height: 100%;
   position: relative;
   display: flex;
+  background-color: #fff;
 }

package/es/lowcode/painter/style/layout-ratio.less

@@ -1,5 +1,5 @@
 .lc-painter-panel-section-layoutratio {
-  @gridbox-width: 58px; // 定义变量
+  @gridbox-width: 66px; // 定义变量
   @grid-gap: 10px; // 间隔变量
   @grid-items-per-row: 4; // 每行的gridbox数量
 

package/es/lowcode/painter/style/outline.less

@@ -1,6 +1,4 @@
 .lc-painter-outline {
-  background-color: #fff;
-
   .page-node {
     cursor: pointer;
     display: flex;

package/es/lowcode/painter/style/panel-item.less

@@ -1,54 +1,21 @@
 .lc-painter-components-panelitem {
-  padding: 0 16px;
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: center;
+  min-height: 28px;
 
-  &:not(:last-child) {
-    margin-bottom: 4px;
+  .item-label {
+    font-size: 12px;
   }
 
-  .panelrow {
+  .item-component {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    min-height: 28px;
-
-    .item-label {
-      font-size: 12px;
-      width: 80px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      gap: 4px;
-      user-select: none;
-    }
-
-    .item-component {
-      display: flex;
-      flex: 1;
-    }
-
-    .item-icon {
-      font-size: 8px;
-      cursor: pointer;
-    }
-
-    /* 使.item-component-box的直接子元素铺满 */
-    .item-component > *:not(:global(.ant-switch)) {
-      flex-grow: 1;
-    }
-    .panel-pointer {
-      cursor: pointer;
-    }
+    width: 215px;
   }
 
-  .addon {
-    background-color: rgba(31, 56, 88, 0.04);
-    min-height: 20px;
-    margin-bottom: 6px;
-    margin-top: 6px;
-    padding: 4px 8px;
-    border-radius: 6px;
+  /* 使.item-component-box的直接子元素铺满 */
+  .item-component > * {
+    flex-grow: 1;
   }
 }
-.lc-painter-components-panelitem.no-padding {
-  padding: 0;
-}