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

package/es/lowcode/painter/DesignToolbar.js

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

package/es/lowcode/painter/Outline.js

@@ -17,7 +17,6 @@ var TreeNode = Tree.TreeNode;
 var PAGE_CELL = [CELL_KEY.PAGE_HEADER, CELL_KEY.PAGE_CONTENT, CELL_KEY.PAGE_FOOTER];
 var Outline = function Outline(_ref) {
   var open = _ref.open;
-  var openModal = useRef(void 0);
   var clickBySelf = useRef(false);
   var context = useLDContext();
   var _useState = useState(null),
@@ -45,7 +44,10 @@ var Outline = function Outline(_ref) {
         clickBySelf.current = false;
         return;
       }
-      if (openModal.current) {
+      var _split = split(getPathById(context.pageData, payload.id), '/'),
+        _split2 = _slicedToArray(_split, 1),
+        _root = _split2[0];
+      if (!PAGE_CELL.includes(_root)) {
         setModalExpandedKeys(uniq([].concat(_toConsumableArray(latestModalExpandedKeysRef.current), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
       } else {
         setPageExpandedKeys(uniq([].concat(_toConsumableArray(lastPageExpandedKeysRef.current), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
@@ -55,18 +57,11 @@ var Outline = function Outline(_ref) {
       context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
   }, [context.pageData]);
-  var handleSelect = function handleSelect(_key) {
+  var handleSelect = useMemoizedFn(function (_key) {
     clickBySelf.current = true;
     context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
       id: _key
     } : null);
-  };
-  var handleOpenModal = useMemoizedFn(function (_key) {
-    var _comp = context.componentMap.get(_key);
-    var _prevComp = openModal.current ? context.componentMap.get(openModal.current) : null;
-    _prevComp === null || _prevComp === void 0 || _prevComp.api.doClose();
-    _comp.api.doOpen();
-    openModal.current = _key;
   });
   var render = useMemoizedFn(function (_ref2) {
     var props = _ref2.props,
@@ -131,7 +126,7 @@ var Outline = function Outline(_ref) {
     type: "inner",
     hoverable: true,
     title: formatMessage({
-      id: 'luckda.lowcode.model',
+      id: 'luckda.lowcode.modal',
       label: '模态视图层'
     }),
     style: {
@@ -154,21 +149,29 @@ var Outline = function Outline(_ref) {
       var selected = _ref4.selected,
         node = _ref4.node;
       if (selected && node.props.pos.split('-').length === 2) {
-        handleOpenModal(_key);
+        // 选中节点是模态视图，则打开模态视图组件
+        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: true,
+          id: _key
+        });
         handleSelect(_key);
       } else if (!selected && node.props.pos.split('-').length === 2) {
-        var _comp = context.componentMap.get(openModal.current);
-        _comp.api.doClose();
-        openModal.current = void 0;
+        // 取消选中节点是模态视图，则关闭模态视图
+        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: false,
+          id: _key
+        });
         handleSelect(null);
       } else {
+        // 选中节点是模态视图下的子组件，则打开该组件的模态视图组件
         handleSelect(node.props.eventKey);
-        var _split = split(getPathById(context.pageData, node.props.eventKey), '/'),
-          _split2 = _slicedToArray(_split, 1),
-          parentModal = _split2[0];
-        if (!openModal.current || openModal.current !== parentModal) {
-          handleOpenModal(parentModal);
-        }
+        var _split3 = split(getPathById(context.pageData, node.props.eventKey), '/'),
+          _split4 = _slicedToArray(_split3, 1),
+          parentModal = _split4[0];
+        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: true,
+          id: parentModal
+        });
       }
     },
     expandedKeys: modalExpandedKeys,
@@ -177,7 +180,10 @@ var Outline = function Outline(_ref) {
         node = _ref6.node;
       if (expanded && node.props.pos.split('-').length === 2) {
         handleSelect(null);
-        handleOpenModal(node.props.eventKey);
+        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: true,
+          id: node.props.eventKey
+        });
       }
       setModalExpandedKeys(_keys);
     }
@@ -193,11 +199,9 @@ var Outline = function Outline(_ref) {
       var _ref9 = _slicedToArray(_ref7, 1),
         _key = _ref9[0];
       var node = _ref8.node;
-      if (openModal.current) {
-        var _prevComp = context.componentMap.get(openModal.current);
-        _prevComp.api.doClose();
-        openModal.current = void 0;
-      }
+      context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+        toggle: false
+      });
       handleSelect(node.props.eventKey);
     },
     expandedKeys: pageExpandedKeys,

package/es/lowcode/painter/Panel.js

@@ -1,16 +1,20 @@
+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 } from 'lodash';
+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'
@@ -42,7 +46,7 @@ var Panel = function Panel() {
     setTrue = _useBoolean2$.setTrue,
     setFalse = _useBoolean2$.setFalse;
   var context = useLDContext();
-  var handleChange = useMemoizedFn(function (field, value) {
+  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;
@@ -53,43 +57,73 @@ var Panel = function Panel() {
         id: activeNode.node.id,
         pageData: cloneDeep(newData)
       });
+      if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
+        id: activeNode.node.id
+      });
     });
-    setFalse();
+    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 (item) {
-      var Comp = factory.current.getPanelItemFor(startsWith(item.type, '_') ? 'dynamic' : item.type, item.type);
-      if (item.type === 'group') {
+    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: item.key,
-          label: item.name,
-          defaultCollapsed: true
-        }, renderPanelItems(item.props));
+          key: key,
+          field: key,
+          label: name,
+          next: _next2 ? function () {
+            return goNext(_next2);
+          } : null,
+          defaultCollapsed: defaultValue,
+          desc: desc
+        }, renderPanelItems(props || []));
       }
-      console.log(11111, item.key, activeNode.node);
-      return /*#__PURE__*/React.createElement(PanelItem, {
-        key: item.key,
-        label: item.name
-      }, Comp && /*#__PURE__*/React.createElement(Comp, {
-        defaultValue: activeNode.node[item.key],
+      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() {
-          if (!item.next) return;
-          nextRef.current = {
-            name: item.next.name,
-            NextComp: renderPanelItems(item.next.props)
-          };
-          setTrue();
+          return goNext(_next2);
         },
-        options: item.options,
-        disabled: item.disabled,
         onChange: function onChange(value) {
-          return handleChange(item.key, 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"));
@@ -105,6 +139,7 @@ var Panel = function Panel() {
   }, [open]);
   useEffect(function () {
     var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      setFalse();
       if (!payload.id) {
         setActiveNode(null);
         return;
@@ -121,7 +156,7 @@ var Panel = function Panel() {
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
-  }, [context.pageData]);
+  }, []);
   useLayoutEffect(function () {
     underLineRef.current.style.left = "".concat(activeTabRef.current.offsetLeft + activeTabRef.current.offsetWidth / 2 - 10, "px");
   }, [activeTabKey, !!activeNode]);
@@ -134,9 +169,9 @@ var Panel = function Panel() {
     style: {
       fontSize: 12
     }
-  }, activeNode === null || activeNode === void 0 ? void 0 : activeNode.level.map(function (_ref) {
-    var id = _ref.id,
-      name = _ref.name;
+  }, 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)),
@@ -161,7 +196,7 @@ var Panel = function Panel() {
     className: classNames(styles['lc-painter-panel-tabbar'], _defineProperty({}, styles.hidden, !activeNode))
   }, /*#__PURE__*/React.createElement("ul", {
     className: styles.headerList
-  }, _TAB_LIST_.map(function (_item) {
+  }, (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,
@@ -174,7 +209,7 @@ var Panel = function Panel() {
     ref: underLineRef,
     className: styles.underline
   })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles['lc-painter-panel-content'], _defineProperty({}, styles.hidden, !activeNode))
+    className: classNames(styles['lc-painter-panel-content'], _defineProperty(_defineProperty({}, styles.hidden, !activeNode), styles.showNext, open))
   }, PropsComps, /*#__PURE__*/React.createElement(Drawer, {
     visible: open,
     width: 320,
@@ -200,7 +235,10 @@ var Panel = function Panel() {
     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("div", null, "\u6837\u5F0F\u9762\u677F"), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/React.createElement("div", null, "\u9AD8\u7EA7\u9762\u677F"), /*#__PURE__*/React.createElement("div", {
+  }, (_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"));
 };

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

@@ -1,29 +1,88 @@
 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 } from 'luck-design/antd';
+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;
+    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 = function handleClick() {
-    setCollapsed(!collapsed);
-  };
+  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']
-  }, label), /*#__PURE__*/React.createElement("span", {
+    className: styles['label'],
+    style: {
+      cursor: desc ? 'help' : 'default'
+    }
+  }, label)), /*#__PURE__*/React.createElement("span", {
     className: styles['action']
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, next ? /*#__PURE__*/React.createElement(Icon, {
+    type: "right"
+  }) : /*#__PURE__*/React.createElement(Icon, {
     type: collapsed ? 'down' : 'up'
   }))), !collapsed && /*#__PURE__*/React.createElement("div", {
     className: styles['body']

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;
+}