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

package/lib/lowcode/painter/components/code-editor/FullScreenEditor.js

@@ -13,23 +13,44 @@ var _react = _interopRequireWildcard(require("react"));
 var _antd = require("luck-design/antd");
 var _utils = require("@luck-design-biz/base/utils");
 var _fullscreenEditor = _interopRequireDefault(require("../../style/fullscreen-editor.less"));
+var _ahooks = require("ahooks");
 var _excluded = ["EditorComponent", "onLoad", "children"];
+/**
+ * FullScreenEditor 组件是一个支持全屏编辑模式的 React 组件，它利用提供的 EditorComponent 来实现代码编辑功能。
+ * 该组件使用 ahooks 的 useFullscreen 钩子来实现全屏切换，并在全屏模式下调整编辑器布局。
+ * 全屏/非全屏模式下编辑器的某些选项可能会有所不同，以适应不同的布局需求。
+ *
+ * @component
+ * @example
+ * const MyEditor = React.forwardRef((props, ref) => <BaseEditor {...props} ref={ref} />);
+ * <FullScreenEditor
+ *   EditorComponent={MyEditor}
+ *   onLoad={() => console.log('Editor loaded')}
+ * >
+ *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
+ * </FullScreenEditor>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {Function} props.EditorComponent - 用于编辑的组件，该组件需要支持 ref 引用以调用编辑器的方法。
+ * @param {Function} [props.onLoad] - 编辑器加载完成时的回调函数。
+ * @param {React.ReactNode} children - 传递给 EditorComponent 的 children，通常是初始代码或内容。
+ * @param {Object} rest - 传递给 EditorComponent 的其他属性。
+ * @param {React.Ref} ref - React ref 引用，用于在外部组件中访问 EditorComponent 实例的方法。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有全屏切换功能的编辑器界面。
+ */
 var FullScreenEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var EditorComponent = _ref.EditorComponent,
     onLoad = _ref.onLoad,
     children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isFullScreen = _useState2[0],
-    setIsFullScreen = _useState2[1];
+  var fullscreenRef = (0, _react.useRef)(null);
+  var _useFullscreen = (0, _ahooks.useFullscreen)(fullscreenRef),
+    _useFullscreen2 = (0, _slicedToArray2.default)(_useFullscreen, 2),
+    isFullscreen = _useFullscreen2[0],
+    toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
   var handleFullscreen = function handleFullscreen() {
-    if (ref.current && ref.current.toggleFullScreen) {
-      ref.current.toggleFullScreen();
-    }
-  };
-  var HandleFullscreenChange = function HandleFullscreenChange(fullscrean) {
-    setIsFullScreen(fullscrean);
+    toggleFullscreen();
   };
   (0, _react.useEffect)(function () {
     if (onLoad) onLoad();
@@ -47,11 +68,12 @@ var FullScreenEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     type: "fullscreen",
     onClick: handleFullscreen
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: isFullScreen ? _fullscreenEditor.default['fullscreen'] : ''
+    className: isFullscreen ? _fullscreenEditor.default['fullscreen'] : '',
+    ref: fullscreenRef
   }, /*#__PURE__*/_react.default.createElement(EditorComponent, (0, _extends2.default)({
     ref: ref,
-    onFullscreenChange: HandleFullscreenChange,
-    options: isFullScreen ? {} : {
+    isFullscreen: isFullscreen,
+    options: isFullscreen ? {} : {
       lineNumbers: 'off',
       glyphMargin: false,
       folding: false,

package/lib/lowcode/painter/components/code-editor/JSEditor.js

@@ -82,6 +82,28 @@ var setupAutocomplete = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
+
+/**
+ * JSEditor 组件是一个专为 JavaScript 编辑设计的 React 组件，它基于 BaseEditor 组件构建，并集成了自动完成功能。
+ * 该组件利用 monaco-editor 提供的 API，通过 setupAutocomplete 函数设置自动完成项，从而增强代码编辑体验。
+ * 自动完成逻辑包括从预定义的自动完成模块中加载补全项，以及在编辑器中键入特定字符（如"."）时触发补全建议。
+ * 
+ * @component
+ * @example
+ * <JSEditor
+ *   language="javascript"
+ *   options={{ fontSize: 14 }}
+ * >
+ *   {`function sayHello() {\n  console.log('Hello, World!');\n}`}
+ * </JSEditor>
+ * 
+ * @param {Object} props - 组件的属性。
+ * @param {React.ReactNode} children - 传递给 BaseEditor 的 children，通常是初始代码或内容。
+ * @param {Object} rest - 传递给 BaseEditor 组件的其他属性。
+ * @param {React.Ref} ref - React ref 引用，用于在外部组件中访问 BaseEditor 实例的方法。
+ * 
+ * @returns {ReactElement} 返回一个 React 元素，其中包含了一个具有自动完成功能的 JavaScript 编辑器实例。
+ */
 var JSEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var children = _ref2.children,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);

package/lib/lowcode/painter/index.js

@@ -20,7 +20,8 @@ var _index2 = _interopRequireDefault(require("./style/index.less"));
 // import { formatMessage } from '@luck-design-biz/base/utils';
 
 var Painter = function Painter(_ref) {
-  var className = _ref.className;
+  var className = _ref.className,
+    code = _ref.code;
   // 修改后刷新提示功能，暂时关掉，等待提供数据对比进行判断
   // useEffect(() => {
   //   const handleBeforeUnload = (event) => {
@@ -47,7 +48,10 @@ var Painter = function Painter(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_EventBusProvider.default, {
     runtime: _index.RUNTIME.DESIGN
-  }, /*#__PURE__*/_react.default.createElement(_ContextProvider.default, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_ContextProvider.default, {
+    code: code
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "lc-design-workspace",
     className: (0, _classnames.default)(_index2.default['lc-painter'], (0, _defineProperty2.default)({}, className, !!className))
   }, /*#__PURE__*/_react.default.createElement(_Ribbon.default, null), /*#__PURE__*/_react.default.createElement(_Design.default, null), /*#__PURE__*/_react.default.createElement(_Panel.default, null))));
 };

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

@@ -0,0 +1,69 @@
+"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 _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _apiUrl = require("../../constants/api-url");
+var DataSetSelector = function DataSetSelector(_ref) {
+  var defaultValue = _ref.defaultValue,
+    size = _ref.size,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    options = _useState2[0],
+    setOptions = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setOptions([{
+      value: 'dsWmsOutboundOrder',
+      label: '出库单'
+    }, {
+      value: 'dsWmsMaterialsData',
+      label: '物料主数据'
+    }, {
+      value: 'dsStockInboundOrder',
+      label: '库存台账'
+    }]);
+    // request(
+    //   `${SERVICE_READ_DATASET}`,
+    //   {
+    //     method: 'GET',
+    //     body: { dataModelKey: '' },
+    //   }.then((res) => {
+    //     console.log('res', res);
+    //     setOptions([
+    //       { value: 'dsWmsOutboundOrder', label: '出库单' },
+    //       { value: 'dsWmsMaterialsData', label: '物料主数据' },
+    //       { value: 'dsStockInboundOrder', label: '库存台账' },
+    //     ]);
+    //   }),
+    // );
+  }, []);
+  var handleChange = (0, _ahooks.useMemoizedFn)(function (value) {
+    console.log('value', value);
+    onChange(value);
+  });
+  return /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    defaultValue: defaultValue,
+    size: size,
+    onChange: handleChange,
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    }
+  }, options.map(function (_ref2) {
+    var value = _ref2.value,
+      label = _ref2.label;
+    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+      key: value,
+      value: value
+    }, label);
+  }));
+};
+var _default = exports.default = DataSetSelector;

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

@@ -124,7 +124,8 @@ var LayoutRatio = function LayoutRatio(_ref) {
     label: (0, _utils.formatMessage)({
       id: 'luckda.lowcode.painter.panel-section.Layoutratio.label',
       label: '列比例'
-    })
+    }),
+    suppressPadding: true
   }, /*#__PURE__*/_react.default.createElement(_RuleInput.default, {
     placeholder: (0, _utils.formatMessage)({
       id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',

package/lib/lowcode/painter/panel-section/StylePanel/BackGround.js

@@ -0,0 +1,68 @@
+"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 _utils = require("@luck-design-biz/base/utils");
+var _StyleContext = require("./StyleContext");
+var _stylePanel = _interopRequireDefault(require("../../style/style-panel.less"));
+var _StyleRow = _interopRequireDefault(require("./StyleRow"));
+var _antd = require("luck-design/antd");
+var _ColorInput = _interopRequireDefault(require("../../components/ColorInput"));
+var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
+var _HightLightSvg = _interopRequireDefault(require("./HightLightSvg"));
+var textRelatedStyles = ['background-color'];
+
+/**
+ * 背景设置控件
+ */
+function _default() {
+  return /*#__PURE__*/_react.default.createElement(_HighLightPanel.default, {
+    highLightFields: textRelatedStyles,
+    addon: /*#__PURE__*/_react.default.createElement(BackGroundEditor, null),
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.background',
+      label: '背景'
+    })
+  });
+}
+var BackGroundEditor = function BackGroundEditor() {
+  var style = (0, _StyleContext.useStyle)();
+  var dispatch = (0, _StyleContext.useStyleDispatch)();
+  var handleChange = function handleChange(field, value) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: field,
+        value: value
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StyleRow.default, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    placement: "top",
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.font.weight',
+      label: '字重'
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylePanel.default['svg-label']
+  }, /*#__PURE__*/_react.default.createElement(_HightLightSvg.default, {
+    field: "background-color",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 1024 1024"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M881.2544 1004.3392c-50.9952 0-92.3648-41.3696-92.3648-92.3648 0-50.9952 92.3648-215.6544 92.3648-215.6544s92.3648 164.6592 92.3648 215.6544S932.4544 1004.3392 881.2544 1004.3392L881.2544 1004.3392zM50.3808 546.6112 449.9456 151.552l399.7696 395.264-399.7696 395.264L50.3808 546.6112 50.3808 546.6112zM449.9456 239.2064l-277.0944 272.384 554.3936 0L449.9456 239.2064 449.9456 239.2064zM272.384 63.488l44.4416-43.8272L449.9456 151.552 405.504 195.3792 272.384 63.488 272.384 63.488zM272.384 63.488"
+  })))), /*#__PURE__*/_react.default.createElement(_ColorInput.default, {
+    wrapperStyle: {
+      flex: 1
+    },
+    value: style['background-color'],
+    onChange: function onChange(value) {
+      return handleChange('background-color', value);
+    }
+  })));
+};

package/lib/lowcode/painter/panel-section/StylePanel/Border.js

@@ -0,0 +1,158 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@luck-design-biz/base/utils");
+var _StyleContext = require("./StyleContext");
+var _BorderSelector = _interopRequireDefault(require("./BorderSelector"));
+var _borderEditor = _interopRequireDefault(require("../../style/border-editor.less"));
+var _antd = require("luck-design/antd");
+var _Size = _interopRequireDefault(require("./Size"));
+var _ColorInput = _interopRequireDefault(require("../../components/ColorInput"));
+var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
+var _HighLigthtSpan = _interopRequireDefault(require("./HighLigthtSpan"));
+var Option = _antd.Select.Option;
+var borderMainProps = ['border-width', 'border-color', 'border-style'];
+var borderSideProps = ['border-top-width', 'border-top-color', 'border-top-style', 'border-right-width', 'border-right-color', 'border-right-style', 'border-bottom-width', 'border-bottom-color', 'border-bottom-style', 'border-left-width', 'border-left-color', 'border-left-style'];
+var textRelatedStyles = [].concat(borderMainProps, borderSideProps);
+var getPropName = function getPropName(str) {
+  return str.split('-').pop();
+};
+
+/**
+ * 边框样式设置控件
+ */
+function _default() {
+  return /*#__PURE__*/_react.default.createElement(_HighLightPanel.default, {
+    highLightFields: textRelatedStyles,
+    addon: /*#__PURE__*/_react.default.createElement(BorderEditor, null),
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.border',
+      label: '边框'
+    })
+  });
+}
+var BorderEditor = function BorderEditor() {
+  var _style$styleField;
+  var _useState = (0, _react.useState)('all'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    curDirection = _useState2[0],
+    setCurDirection = _useState2[1];
+  var style = (0, _StyleContext.useStyle)();
+  var dispatch = (0, _StyleContext.useStyleDispatch)();
+  var handleChange = function handleChange(field, value) {
+    if (curDirection == 'all') {
+      var mainPropsName = getPropName(field);
+      borderSideProps.forEach(function (item) {
+        if (mainPropsName === getPropName(item)) delete style[item];
+      });
+    }
+    if (value) {
+      style[field] = value;
+    } else {
+      delete style[field];
+    }
+    dispatch({
+      type: 'new',
+      payload: style
+    });
+  };
+  var handleDirectChange = function handleDirectChange(value) {
+    setCurDirection(value);
+  };
+  var styleField = 'border-style';
+  var widthField = 'border-width';
+  var colorField = 'border-color';
+  if (curDirection != 'all') {
+    styleField = "border-".concat(curDirection, "-style");
+    widthField = "border-".concat(curDirection, "-width");
+    colorField = "border-".concat(curDirection, "-color");
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderEditor.default['lc-painter-panel-section-style-panel-border-editor']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderEditor.default['border-editor-wrapper']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderEditor.default['wrapper-left']
+  }, /*#__PURE__*/_react.default.createElement(_BorderSelector.default, {
+    onChange: handleDirectChange
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderEditor.default['wrapper-right']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderEditor.default['editor-item']
+  }, /*#__PURE__*/_react.default.createElement(_HighLigthtSpan.default, {
+    highLightFields: [styleField]
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style',
+    label: '边框'
+  })), /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    style: {
+      flex: 1
+    },
+    size: "small",
+    onChange: function onChange(value) {
+      handleChange(styleField, value);
+    },
+    value: (_style$styleField = style[styleField]) !== null && _style$styleField !== void 0 ? _style$styleField : ''
+  }, /*#__PURE__*/_react.default.createElement(Option, {
+    value: ""
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.none',
+    label: '无'
+  })), /*#__PURE__*/_react.default.createElement(Option, {
+    value: "solid"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.solid',
+    label: '实线条'
+  })), /*#__PURE__*/_react.default.createElement(Option, {
+    value: "dotted"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.dotted',
+    label: '点线'
+  })), /*#__PURE__*/_react.default.createElement(Option, {
+    value: "dashed"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.dashed',
+    label: '虚线'
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderEditor.default['editor-item']
+  }, /*#__PURE__*/_react.default.createElement(_HighLigthtSpan.default, {
+    highLightFields: [widthField]
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.width',
+    label: '线宽'
+  })), /*#__PURE__*/_react.default.createElement(_Size.default, {
+    field: widthField,
+    style: {
+      flex: 1
+    },
+    placeholder: (0, _utils.formatMessage)({
+      id: "luckda.lowcode.painter.panel-section.style-panel.border.width.ph",
+      label: '线宽'
+    }),
+    onChange: function onChange(value) {
+      return handleChange(widthField, value);
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderEditor.default['editor-item']
+  }, /*#__PURE__*/_react.default.createElement(_HighLigthtSpan.default, {
+    highLightFields: [colorField]
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.color',
+    label: '颜色'
+  })), /*#__PURE__*/_react.default.createElement(_ColorInput.default, {
+    wrapperStyle: {
+      flex: 1
+    },
+    value: style[colorField],
+    onChange: function onChange(value) {
+      return handleChange(colorField, value);
+    }
+  })))));
+};

package/lib/lowcode/painter/panel-section/StylePanel/BorderRadius.js

@@ -0,0 +1,95 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@luck-design-biz/base/utils");
+var _StyleContext = require("./StyleContext");
+var _BorderRadiusSelector = _interopRequireDefault(require("./BorderRadiusSelector"));
+var _borderEditor = _interopRequireDefault(require("../../style/border-editor.less"));
+var _Size = _interopRequireDefault(require("./Size"));
+var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
+var _HighLigthtSpan = _interopRequireDefault(require("./HighLigthtSpan"));
+var borderMainProps = ['border-radius'];
+var borderSideProps = ['border-top-right-radius', 'border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'];
+var textRelatedStyles = [].concat(borderMainProps, borderSideProps);
+
+/**
+ * 圆角样式设置控件
+ */
+function _default() {
+  return /*#__PURE__*/_react.default.createElement(_HighLightPanel.default, {
+    highLightFields: textRelatedStyles,
+    addon: /*#__PURE__*/_react.default.createElement(BorderRadiusEditor, null),
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.border-radius',
+      label: ' 圆角'
+    })
+  });
+}
+var BorderRadiusEditor = function BorderRadiusEditor() {
+  var _useState = (0, _react.useState)('all'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    curDirection = _useState2[0],
+    setCurDirection = _useState2[1];
+  var style = (0, _StyleContext.useStyle)();
+  var dispatch = (0, _StyleContext.useStyleDispatch)();
+  var handleChange = function handleChange(field, value) {
+    if (curDirection == 'all') {
+      borderSideProps.forEach(function (item) {
+        delete style[item];
+      });
+    }
+    if (value) {
+      style[field] = value;
+    } else {
+      delete style[field];
+    }
+    dispatch({
+      type: 'new',
+      payload: style
+    });
+  };
+  var handleDirectChange = function handleDirectChange(value) {
+    setCurDirection(value);
+  };
+  var field = 'border-radius';
+  if (curDirection != 'all') {
+    field = "border-".concat(curDirection, "-radius");
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderEditor.default['lc-painter-panel-section-style-panel-border-editor']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderEditor.default['border-editor-wrapper']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderEditor.default['wrapper-left']
+  }, /*#__PURE__*/_react.default.createElement(_BorderRadiusSelector.default, {
+    onChange: handleDirectChange
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderEditor.default['wrapper-right-single']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderEditor.default['editor-item']
+  }, /*#__PURE__*/_react.default.createElement(_HighLigthtSpan.default, {
+    highLightFields: [field]
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border-radius.width',
+    label: '半径'
+  })), /*#__PURE__*/_react.default.createElement(_Size.default, {
+    field: field,
+    style: {
+      flex: 1
+    },
+    placeholder: (0, _utils.formatMessage)({
+      id: "luckda.lowcode.painter.panel-section.style-panel.border-radius.width.ph",
+      label: '半径'
+    }),
+    onChange: function onChange(value) {
+      return handleChange(field, value);
+    }
+  })))));
+};

package/lib/lowcode/painter/panel-section/StylePanel/BorderRadiusSelector.js

@@ -0,0 +1,73 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _borderRadiusSelector = _interopRequireDefault(require("../../style/border-radius-selector.less"));
+/**
+ * 圆角设置组件
+ */
+function _default(_ref) {
+  var onChange = _ref.onChange;
+  var _useState = (0, _react.useState)('all'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    curSelect = _useState2[0],
+    setCurSelect = _useState2[1];
+  var handleSelected = function handleSelected(direction) {
+    if (onChange) onChange(direction);
+    setCurSelect(direction);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderRadiusSelector.default['lc-painter-panel-section-style-panel-border-radius-selector']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderRadiusSelector.default['selector-box']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _borderRadiusSelector.default['selector-row']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderRadiusSelector.default['selector-row'], " ").concat(_borderRadiusSelector.default['b-left'])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderRadiusSelector.default['selector-wrapper']).concat(curSelect === 'top-left' ? " ".concat(_borderRadiusSelector.default['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('top-left');
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _borderRadiusSelector.default['selector-item']
+  }, "\u250F")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderRadiusSelector.default['selector-wrapper']).concat(curSelect === 'bottom-left' ? " ".concat(_borderRadiusSelector.default['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('bottom-left');
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _borderRadiusSelector.default['selector-item']
+  }, "\u2517")))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderRadiusSelector.default['selector-row'], " ").concat(_borderRadiusSelector.default['b-center'])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderRadiusSelector.default['selector-wrapper']).concat(curSelect === 'all' ? " ".concat(_borderRadiusSelector.default['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('all');
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _borderRadiusSelector.default['selector-item']
+  }, "\u254B"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderRadiusSelector.default['selector-row'], " ").concat(_borderRadiusSelector.default['b-right'])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderRadiusSelector.default['selector-wrapper']).concat(curSelect === 'top-right' ? " ".concat(_borderRadiusSelector.default['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('top-right');
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _borderRadiusSelector.default['selector-item']
+  }, "\u2513")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_borderRadiusSelector.default['selector-wrapper']).concat(curSelect === 'bottom-right' ? " ".concat(_borderRadiusSelector.default['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('bottom-right');
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _borderRadiusSelector.default['selector-item']
+  }, "\u251B")))));
+}