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

package/es/lowcode/painter/Panel.js

@@ -1,8 +1,245 @@
-import React, { useState, useEffect, useRef } from 'react';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["type", "key", "name", "desc", "default", "props", "panelItem", "next", "repositioning"];
+import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { useBoolean, useCreation, useMemoizedFn } from 'ahooks';
+import { Breadcrumb, Drawer, Icon } from 'luck-design/antd';
+import classNames from 'classnames';
+import { startsWith, takeRight, cloneDeep, isNil } from 'lodash';
+import { useLDContext } from "../engine/provider/ContextProvider";
+import PanelItem from "./components/PanelItem";
+import PanelItemFactory from "../engine/factory/panel-item-factory";
+import { modifyById } from "../engine/tools/dataProcess";
 import styles from "./style/panel.less";
+import StylePanel from "./panel-section/StylePanel";
+var _TAB_LIST_ = [{
+  title: '属性',
+  key: 'attrs'
+}, {
+  title: '样式',
+  key: 'styles'
+}, {
+  title: '高级',
+  key: 'advance'
+}];
 var Panel = function Panel() {
+  var _nextRef$current, _nextRef$current2;
+  var activeTabRef = useRef(null);
+  var underLineRef = useRef(null);
+  var nextRef = useRef(null);
+  var factory = useRef(new PanelItemFactory());
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeNode = _useState2[0],
+    setActiveNode = _useState2[1];
+  var _useState3 = useState('attrs'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeTabKey = _useState4[0],
+    setActiveTabKey = _useState4[1];
+  var _useBoolean = useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    open = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    setTrue = _useBoolean2$.setTrue,
+    setFalse = _useBoolean2$.setFalse;
+  var context = useLDContext();
+  var handleChange = useMemoizedFn(function (field, value, repositioning) {
+    var component = context.componentMap.get(activeNode.node.id);
+    var _component$api$getSel = component.api.getSelfAndParentLCData(),
+      node = _component$api$getSel.node;
+    var cloneData = cloneDeep(context.pageData);
+    modifyById(cloneData, activeNode.node.id, _objectSpread(_objectSpread({}, node.props), {}, _defineProperty({}, field, value)));
+    context._setPageData(cloneData).then(function (newData) {
+      context.$publisher(context.topics.COMPONENT_MODIFY, {
+        id: activeNode.node.id,
+        pageData: cloneDeep(newData)
+      });
+      if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
+        id: activeNode.node.id
+      });
+    });
+    if (nextRef.current.autoClose) {
+      setFalse();
+    }
+  });
+  var handleStyleChange = useMemoizedFn(function (newStyle, newCss) {
+    console.log('style', newStyle, newCss);
+    // setCss(newCss);
+  });
+  var goNext = useMemoizedFn(function (_next) {
+    if (!_next) return;
+    nextRef.current = {
+      name: _next.name,
+      autoClose: _next.autoClose,
+      NextComp: renderPanelItems(_next.props)
+    };
+    setTrue();
+  });
+  var renderPanelItems = useMemoizedFn(function (items) {
+    return items.map(function (_ref) {
+      var type = _ref.type,
+        key = _ref.key,
+        name = _ref.name,
+        desc = _ref.desc,
+        defaultValue = _ref.default,
+        props = _ref.props,
+        panelItem = _ref.panelItem,
+        _next2 = _ref.next,
+        repositioning = _ref.repositioning,
+        rest = _objectWithoutProperties(_ref, _excluded);
+      var Comp = factory.current.getPanelItemFor(startsWith(type, '_') ? 'dynamic' : type, type);
+      if (type === 'group') {
+        return /*#__PURE__*/React.createElement(Comp, {
+          key: key,
+          field: key,
+          label: name,
+          next: _next2 ? function () {
+            return goNext(_next2);
+          } : null,
+          defaultCollapsed: defaultValue,
+          desc: desc
+        }, renderPanelItems(props || []));
+      }
+      var _context$componentMap = context.componentMap.get(activeNode.node.id).api.getSelfAndParentLCData(),
+        node = _context$componentMap.node;
+      return /*#__PURE__*/React.createElement(PanelItem, _extends({
+        key: key,
+        field: key,
+        label: name,
+        desc: desc
+      }, panelItem), Comp && /*#__PURE__*/React.createElement(Comp, _extends({
+        defaultValue: isNil(node.props[key]) ? defaultValue : node.props[key],
+        next: function next() {
+          return goNext(_next2);
+        },
+        onChange: function onChange(value) {
+          return handleChange(key, value, repositioning);
+        },
+        size: "small"
+      }, rest)));
+    });
+  });
+  var PropsComps = useCreation(function () {
+    setActiveTabKey('attrs');
+    var _meta;
+    try {
+      _meta = require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
+    } catch (e) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return renderPanelItems(_meta.props);
+  }, [activeNode]);
+  useEffect(function () {
+    if (!open) {
+      nextRef.current = null;
+    }
+  }, [open]);
+  useEffect(function () {
+    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      setFalse();
+      if (!payload.id) {
+        setActiveNode(null);
+        return;
+      }
+      var component = context.componentMap.get(payload.id);
+      var _component$api$getSel2 = component.api.getSelfAndParentLCData(),
+        node = _component$api$getSel2.node;
+      var levelNodes = takeRight(component.api.getLevelNodes(), 4);
+      setActiveNode({
+        node: node.props,
+        level: levelNodes
+      });
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+    };
+  }, []);
+  useLayoutEffect(function () {
+    underLineRef.current.style.left = "".concat(activeTabRef.current.offsetLeft + activeTabRef.current.offsetWidth / 2 - 10, "px");
+  }, [activeTabKey, !!activeNode]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-panel']
-  }, "Panel");
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['lc-painter-panel-topbar'], _defineProperty({}, styles.hidden, !activeNode))
+  }, /*#__PURE__*/React.createElement(Breadcrumb, {
+    separator: ">",
+    style: {
+      fontSize: 12
+    }
+  }, activeNode === null || activeNode === void 0 ? void 0 : activeNode.level.map(function (_ref2) {
+    var id = _ref2.id,
+      name = _ref2.name;
+    return /*#__PURE__*/React.createElement(Breadcrumb.Item, {
+      key: id,
+      className: classNames(_defineProperty({}, styles['active-node-level'], id !== activeNode.node.id)),
+      onMouseEnter: function onMouseEnter() {
+        if (id === activeNode.node.id) return;
+        context.$publisher(context.topics.COMPONENT_HOVER, {
+          id: id
+        });
+      },
+      onMouseLeave: function onMouseLeave() {
+        if (id === activeNode.node.id) return;
+        context.$publisher(context.topics.COMPONENT_HOVER, null);
+      },
+      onClick: function onClick() {
+        if (id === activeNode.node.id) return;
+        context.$publisher(context.topics.COMPONENT_ACTIVE, {
+          id: id
+        });
+      }
+    }, name);
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['lc-painter-panel-tabbar'], _defineProperty({}, styles.hidden, !activeNode))
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: styles.headerList
+  }, (activeNode !== null && activeNode !== void 0 && activeNode.node.style ? _TAB_LIST_ : [_TAB_LIST_[0], _TAB_LIST_[2]]).map(function (_item) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: _item.key,
+      ref: activeTabKey === _item.key ? activeTabRef : null,
+      className: classNames(_defineProperty({}, styles.actived, activeTabKey === _item.key)),
+      onClick: function onClick() {
+        return setActiveTabKey(_item.key);
+      }
+    }, _item.title);
+  })), /*#__PURE__*/React.createElement("div", {
+    ref: underLineRef,
+    className: styles.underline
+  })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['lc-painter-panel-content'], _defineProperty(_defineProperty({}, styles.hidden, !activeNode), styles.showNext, open))
+  }, PropsComps, /*#__PURE__*/React.createElement(Drawer, {
+    visible: open,
+    width: 320,
+    mask: false,
+    closable: false,
+    getContainer: false,
+    destroyOnClose: true,
+    style: {
+      position: 'absolute'
+    },
+    bodyStyle: {
+      padding: 0,
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['next-content']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['next-content-header'],
+    onClick: setFalse
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "left"
+  }), (_nextRef$current = nextRef.current) === null || _nextRef$current === void 0 ? void 0 : _nextRef$current.name, /*#__PURE__*/React.createElement(Icon, {
+    type: "close"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['next-content-body']
+  }, (_nextRef$current2 = nextRef.current) === null || _nextRef$current2 === void 0 ? void 0 : _nextRef$current2.NextComp)))), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/React.createElement(StylePanel, {
+    onChange: handleStyleChange,
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.style
+  }), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/React.createElement("div", null, "\u9AD8\u7EA7\u9762\u677F"), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['lc-painter-panel-empty'], _defineProperty({}, styles.hidden, !!activeNode))
+  }, "\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9"));
 };
 export default Panel;

package/es/lowcode/painter/Ribbon.js

@@ -1,15 +1,33 @@
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
-import { useCreation } from 'ahooks';
-import { dynamic } from 'umi';
 import { Box } from 'luck-design';
 import { Icon, Tooltip, Drawer } from 'luck-design/antd';
+import Outline from "./Outline";
+import Components from "./Components";
+import I18n from "./I18n";
 import { formatMessage } from '@luck-design-biz/base/utils';
-import { upperFirst } from 'lodash';
 import styles from "./style/ribbon.less";
 var _WIDTH_ = 48;
+var _DRAWER_PROPS = {
+  placement: 'left',
+  mask: false,
+  getContainer: false,
+  zIndex: 10000,
+  headerStyle: {
+    borderBottom: 'none'
+  },
+  style: {
+    position: 'absolute',
+    left: _WIDTH_
+  },
+  bodyStyle: {
+    overflowY: 'auto',
+    height: 'calc(100% - 55px)',
+    padding: 0
+  }
+};
 var _DRAWER_OUTLINE_ = {
   width: 300,
   key: 'outline',
@@ -20,7 +38,7 @@ var _DRAWER_COMPONENTS_ = {
   width: 310,
   key: 'components',
   title: '组件',
-  fix: false
+  fix: true
 };
 var _DRAWER_I18N_ = {
   width: 450,
@@ -33,40 +51,6 @@ var Ribbon = function Ribbon() {
     _useState2 = _slicedToArray(_useState, 2),
     drawer = _useState2[0],
     setDrawer = _useState2[1];
-  var Detail = useCreation(function () {
-    return dynamic({
-      loader: function () {
-        var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-          var name, _yield$import, Comp;
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                if (!drawer) {
-                  _context.next = 7;
-                  break;
-                }
-                name = upperFirst(drawer.key);
-                _context.next = 4;
-                return import("./".concat(name));
-              case 4:
-                _yield$import = _context.sent;
-                Comp = _yield$import.default;
-                return _context.abrupt("return", Comp);
-              case 7:
-                return _context.abrupt("return", null);
-              case 8:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        function loader() {
-          return _loader.apply(this, arguments);
-        }
-        return loader;
-      }()
-    });
-  }, [drawer]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
     className: styles['lc-painter-ribbon'],
     width: _WIDTH_,
@@ -109,28 +93,50 @@ var Ribbon = function Ribbon() {
     onClick: function onClick() {
       return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key ? null : _DRAWER_I18N_);
     }
-  }))), /*#__PURE__*/React.createElement(Drawer, {
+  }))), /*#__PURE__*/React.createElement(Drawer, _extends({
     title: drawer ? formatMessage({
       id: "luckda.lowcode.".concat(drawer.key),
       label: drawer.title
     }) : '',
-    placement: "left",
     width: (drawer === null || drawer === void 0 ? void 0 : drawer.width) || 0,
-    visible: !!drawer,
-    mask: false,
-    getContainer: false,
+    visible: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key,
     onClose: function onClose() {
       return setDrawer(null);
-    },
-    style: {
-      position: 'absolute',
-      left: _WIDTH_
-    },
-    bodyStyle: {
-      overflowY: 'auto',
-      height: 'calc(100% - 55px)',
-      padding: 0
     }
-  }, Detail && /*#__PURE__*/React.createElement(Detail, null)));
+  }, _DRAWER_PROPS, {
+    style: _objectSpread(_objectSpread({}, _DRAWER_PROPS.style), {}, {
+      display: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key ? 'block' : 'none'
+    })
+  }), /*#__PURE__*/React.createElement(Outline, {
+    open: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key
+  })), /*#__PURE__*/React.createElement(Drawer, _extends({
+    title: drawer ? formatMessage({
+      id: "luckda.lowcode.".concat(drawer.key),
+      label: drawer.title
+    }) : '',
+    width: (drawer === null || drawer === void 0 ? void 0 : drawer.width) || 0,
+    visible: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_COMPONENTS_.key,
+    onClose: function onClose() {
+      return setDrawer(null);
+    }
+  }, _DRAWER_PROPS, {
+    style: _objectSpread(_objectSpread({}, _DRAWER_PROPS.style), {}, {
+      display: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_COMPONENTS_.key ? 'block' : 'none'
+    })
+  }), /*#__PURE__*/React.createElement(Components, null)), /*#__PURE__*/React.createElement(Drawer, _extends({
+    title: drawer ? formatMessage({
+      id: "luckda.lowcode.".concat(drawer.key),
+      label: drawer.title
+    }) : '',
+    width: (drawer === null || drawer === void 0 ? void 0 : drawer.width) || 0,
+    visible: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key,
+    onClose: function onClose() {
+      return setDrawer(null);
+    }
+  }, _DRAWER_PROPS, {
+    style: _objectSpread(_objectSpread({}, _DRAWER_PROPS.style), {}, {
+      display: (drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key ? 'block' : 'none'
+    })
+  }), /*#__PURE__*/React.createElement(I18n, null)));
 };
 export default Ribbon;

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

@@ -0,0 +1,90 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { useMemoizedFn, useCreation } from 'ahooks';
+import styles from "../style/collapse.less";
+import { Icon, Tooltip } from 'luck-design/antd';
+
+/**
+ * Collapse 组件是一个可折叠区域的实现，用于显示或隐藏内容。它支持自定义标签、描述以及默认的折叠状态。
+ * 该组件还可以通过 `next` 函数来自定义点击操作，而不是简单地切换折叠状态。
+ * 提供的工具提示可以显示额外信息，如字段名和描述，以帮助用户更好地理解折叠内容的作用。
+ * 
+ * @component
+ * @example
+ * <Collapse
+ *   field="exampleField"
+ *   label="示例标签"
+ *   desc="这是一个用于演示的折叠组件"
+ *   defaultCollapsed={true}
+ *   next={() => console.log('Custom next function executed')}
+ * >
+ *   <p>这里是可折叠的内容</p>
+ * </Collapse>
+ * 
+ * @param {Object} props - 组件的属性。
+ * @param {React.ReactNode} children - 折叠区域展开时显示的内容。
+ * @param {string} [props.field] - 与折叠内容相关联的字段名。
+ * @param {string} props.label - 折叠区域的标签名称。
+ * @param {string} [props.desc] - 关于折叠内容的描述信息。
+ * @param {boolean} [props.defaultCollapsed=false] - 折叠区域的默认状态。如果为 true，则默认为折叠状态。
+ * @param {Function} [props.next] - 点击操作的自定义函数。如果提供，点击时将执行此函数，而不是切换折叠状态。
+ * 
+ * @returns {ReactElement} 返回一个 React 元素，表示一个具有可折叠功能的容器。
+ */
+export default function (_ref) {
+  var children = _ref.children,
+    field = _ref.field,
+    label = _ref.label,
+    desc = _ref.desc,
+    _ref$defaultCollapsed = _ref.defaultCollapsed,
+    defaultCollapsed = _ref$defaultCollapsed === void 0 ? false : _ref$defaultCollapsed,
+    next = _ref.next;
+  var _useState = useState(defaultCollapsed),
+    _useState2 = _slicedToArray(_useState, 2),
+    collapsed = _useState2[0],
+    setCollapsed = _useState2[1];
+  var handleClick = useMemoizedFn(function () {
+    if (next) {
+      next();
+    } else {
+      setCollapsed(!collapsed);
+    }
+  });
+  var tip = useCreation(function () {
+    var str = void 0;
+    if (field) {
+      str = "\u5C5E\u6027\uFF1A".concat(field);
+    }
+    if (desc) {
+      str += "".concat(str ? ' | ' : '', "\u8BF4\u660E\uFF1A").concat(desc);
+    }
+    return str;
+  }, [field, desc]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-components-collapse']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['head'],
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    overlayStyle: {
+      fontSize: '12px'
+    },
+    title: tip,
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['label'],
+    style: {
+      cursor: desc ? 'help' : 'default'
+    }
+  }, label)), /*#__PURE__*/React.createElement("span", {
+    className: styles['action']
+  }, next ? /*#__PURE__*/React.createElement(Icon, {
+    type: "right"
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    type: collapsed ? 'down' : 'up'
+  }))), !collapsed && /*#__PURE__*/React.createElement("div", {
+    className: styles['body']
+  }, children));
+}

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

@@ -0,0 +1,125 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "onChange", "wrapperStyle"];
+import React, { useState } from 'react';
+import { useUpdateEffect } from 'ahooks';
+import PopConfirm from "./PopConfirm";
+import { Input } from 'luck-design/antd';
+import styles from "../style/color-input.less";
+import { SketchPicker } from 'react-color';
+
+/**
+ * ColorInput 组件是一个集成颜色选择器的输入框组件，允许用户以 RGBA 或十六进制格式输入颜色值。
+ * 组件内部通过 PopConfirm 弹出一个 SketchPicker 颜色选择器，以提供一个直观的颜色选择界面。
+ * 用户输入的颜色值在内部转换为适当的格式，并通过 onChange 回调暴露给外部使用。
+ * 此组件还支持通过传入的 value 属性初始化颜色值，并响应其后续更改。
+ *
+ * @component
+ * @example
+ * const handleColorChange = (newColor) => {
+ *   console.log('Selected color:', newColor);
+ * };
+ * <ColorInput
+ *   value="rgba(255, 0, 0, 0.5)"
+ *   onChange={handleColorChange}
+ *   wrapperStyle={{ margin: '20px' }}
+ * />
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {string} props.value - 初始化颜色值，支持 RGBA 字符串或十六进制格式。
+ * @param {Function} props.onChange - 当颜色值变更时触发的回调函数。传递新的颜色值作为参数。
+ * @param {Object} [props.wrapperStyle] - 自定义包装器 div 的样式对象。
+ * @param {Object} rest - 传递给 Input 组件的其他属性。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，表示一个带有颜色选择器的输入框组件。
+ */
+export default function (_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    wrapperStyle = _ref.wrapperStyle,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(fromRGBA(value)),
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
+  var handleChange = function handleChange(color) {
+    changeColor(color.rgb);
+  };
+  var handleInputChange = function handleInputChange(e) {
+    changeColor(e.target.value);
+  };
+  var changeColor = function changeColor(value) {
+    if (onChange) onChange(toRGBA(value));
+    setColor(value);
+  };
+  useUpdateEffect(function () {
+    setColor(fromRGBA(value));
+  }, [value]);
+  var rgbaColor = toRGBA(color);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-components-color-input'],
+    style: wrapperStyle
+  }, /*#__PURE__*/React.createElement(PopConfirm, {
+    placement: "top",
+    title: /*#__PURE__*/React.createElement(SketchPicker, {
+      color: color !== null && color !== void 0 ? color : '#ffffff',
+      onChange: handleChange
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['color-input-wrap']
+  }, /*#__PURE__*/React.createElement(Input, _extends({
+    onChange: handleInputChange,
+    className: styles['color-input'],
+    value: rgbaColor,
+    size: "small",
+    placeholder: "rgba(0,0,0,0)"
+  }, rest)), /*#__PURE__*/React.createElement("div", {
+    className: "color-display",
+    style: {
+      backgroundColor: rgbaColor
+    }
+  }))));
+}
+function toRGBA(colorObj) {
+  // 首先检查 colorObj 是否为 null 或 undefined
+  if (colorObj === null || typeof colorObj === 'undefined') {
+    return null;
+  }
+
+  // 检查是否为对象且包含 r, g, b, a 属性
+  if (_typeof(colorObj) === 'object' && 'r' in colorObj && 'g' in colorObj && 'b' in colorObj && 'a' in colorObj) {
+    return "rgba(".concat(colorObj.r, ", ").concat(colorObj.g, ", ").concat(colorObj.b, ", ").concat(colorObj.a, ")");
+  } else if (typeof colorObj === 'string' && colorObj.startsWith('#')) {
+    // 如果是以#号开头的字符串，则直接返回该字符串
+    return colorObj;
+  }
+
+  // 如果不符合上述任何一种情况，返回一个空字符串
+  return null;
+}
+function fromRGBA(rgbaString) {
+  if (rgbaString === null || typeof rgbaString === 'undefined') {
+    return null;
+  }
+
+  // 检查输入是否是有效的 rgba 字符串
+  var rgbaPattern = /rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d*\.?\d+)\)/;
+  var match = rgbaString.match(rgbaPattern);
+  if (match) {
+    // 如果匹配成功，则提取 rgba 值
+    return {
+      r: parseInt(match[1], 10),
+      g: parseInt(match[2], 10),
+      b: parseInt(match[3], 10),
+      a: parseFloat(match[4])
+    };
+  } else if (typeof rgbaString === 'string' && rgbaString.startsWith('#')) {
+    // 对于十六进制颜色字符串，直接返回原始字符串
+    return rgbaString;
+  }
+
+  // 如果不符合上述任何一种情况，返回 null
+  return null;
+}