@luck-design-biz/luckda 0.0.22-4 → 0.0.22-6

package/es/lowcode/painter/Outline.js

@@ -0,0 +1,208 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["props", "children"];
+import React, { useRef, useState, useEffect } from 'react';
+import { useMemoizedFn, useDeepCompareLayoutEffect, useLatest } from 'ahooks';
+import { uniq, split, reduce } from 'lodash';
+import classNames from 'classnames';
+import { Card, Tree, Icon } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useLDContext } from "../engine/provider/ContextProvider";
+import { CELL_KEY } from "../constants";
+import { getPathById } from "../engine/tools/dataProcess";
+import styles from "./style/outline.less";
+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),
+    _useState2 = _slicedToArray(_useState, 2),
+    pageAndModal = _useState2[0],
+    setPageAndModal = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    modalExpandedKeys = _useState6[0],
+    setModalExpandedKeys = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    pageExpandedKeys = _useState8[0],
+    setPageExpandedKeys = _useState8[1];
+  var latestModalExpandedKeysRef = useLatest(modalExpandedKeys);
+  var lastPageExpandedKeysRef = useLatest(pageExpandedKeys);
+  useEffect(function () {
+    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      setSelectedKey(payload.id);
+      if (clickBySelf.current) {
+        clickBySelf.current = false;
+        return;
+      }
+      if (openModal.current) {
+        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), '/')))));
+      }
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+    };
+  }, [context.pageData]);
+  var handleSelect = function handleSelect(_key) {
+    clickBySelf.current = true;
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+      id: _key,
+      cellNode: context.componentMap.get(_key).dom
+    } : 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,
+      children = _ref2.children,
+      childrenMap = _objectWithoutProperties(_ref2, _excluded);
+    if (props) {
+      return /*#__PURE__*/React.createElement(TreeNode, {
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          type: "layout"
+        }),
+        title: props.name,
+        key: props.id
+      }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
+        return render(childrenMap[_id]);
+      }));
+    }
+    return (children || []).map(function (_id) {
+      return render(childrenMap[_id]);
+    });
+  });
+  useDeepCompareLayoutEffect(function () {
+    if (!context.pageData) {
+      return;
+    }
+    var _reduce = reduce(context.pageData.children, function (result, _id) {
+        var resultKey = PAGE_CELL.includes(_id) ? 'page' : 'modal';
+        result[resultKey][_id] = context.pageData[_id];
+        if (!result[resultKey].children) {
+          result[resultKey].children = [];
+        }
+        result[resultKey].children.push(_id);
+        return result;
+      }, {
+        page: {},
+        modal: {}
+      }),
+      page = _reduce.page,
+      modal = _reduce.modal;
+    setPageAndModal({
+      page: render(page),
+      modal: render(modal)
+    });
+  }, [context.pageData]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-outline']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['page-node'], _defineProperty({}, styles['page-node-active'], selectedKey === CELL_KEY.PAGE_ROOT)),
+    onClick: function onClick() {
+      return handleSelect(CELL_KEY.PAGE_ROOT);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "layout"
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 5
+    }
+  }, formatMessage({
+    id: 'luckda.lowcode.page',
+    label: '页面'
+  }))), /*#__PURE__*/React.createElement(Card, {
+    size: "small",
+    type: "inner",
+    hoverable: true,
+    title: formatMessage({
+      id: 'luckda.lowcode.model',
+      label: '模态视图层'
+    }),
+    style: {
+      margin: 5
+    },
+    bodyStyle: {
+      padding: 0
+    }
+  }, /*#__PURE__*/React.createElement(Tree, {
+    showLine: true,
+    showIcon: true,
+    blockNode: true,
+    switcherIcon: /*#__PURE__*/React.createElement(Icon, {
+      type: "down"
+    }),
+    selectedKeys: [selectedKey],
+    onSelect: function onSelect(_ref3, _ref4) {
+      var _ref5 = _slicedToArray(_ref3, 1),
+        _key = _ref5[0];
+      var selected = _ref4.selected,
+        node = _ref4.node;
+      if (selected && node.props.pos.split('-').length === 2) {
+        handleOpenModal(_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;
+        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);
+        }
+      }
+    },
+    expandedKeys: modalExpandedKeys,
+    onExpand: function onExpand(_keys, _ref6) {
+      var expanded = _ref6.expanded,
+        node = _ref6.node;
+      if (expanded && node.props.pos.split('-').length === 2) {
+        handleSelect(null);
+        handleOpenModal(node.props.eventKey);
+      }
+      setModalExpandedKeys(_keys);
+    }
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), open && /*#__PURE__*/React.createElement(Tree, {
+    showLine: true,
+    showIcon: true,
+    blockNode: true,
+    switcherIcon: /*#__PURE__*/React.createElement(Icon, {
+      type: "down"
+    }),
+    selectedKeys: [selectedKey],
+    onSelect: function onSelect(_ref7, _ref8) {
+      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;
+      }
+      handleSelect(node.props.eventKey);
+    },
+    expandedKeys: pageExpandedKeys,
+    onExpand: setPageExpandedKeys
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.page));
+};
+export default Outline;

package/es/lowcode/painter/Panel.js

@@ -0,0 +1,200 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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 { 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";
+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 (_ref) {
+    var field = _ref.field,
+      value = _ref.value;
+    console.log('handleChange', activeNode, field, value);
+    var cloneData = cloneDeep(context.pageData);
+    modifyById(cloneData, activeNode.node.id, _objectSpread(_objectSpread({}, activeNode.node), {}, _defineProperty({}, field, value)));
+    context._setPageData(cloneData).then(function (newData) {
+      context.$publisher(context.topics.COMPONENT_MODIFY, {
+        id: activeNode.node.id,
+        pageData: cloneDeep(newData)
+      });
+    });
+    setFalse();
+  });
+  var renderPanelItems = useMemoizedFn(function (items) {
+    return items.map(function (item) {
+      var Comp = factory.current.getPanelItemFor(startsWith(item.type, '_') ? 'dynamic' : item.type, item.type);
+      return /*#__PURE__*/React.createElement(PanelItem, {
+        key: item.key,
+        label: item.name
+      }, Comp && /*#__PURE__*/React.createElement(Comp, {
+        field: item.key,
+        defaultValue: activeNode.node[item.key],
+        next: function next() {
+          if (!item.next) return;
+          nextRef.current = {
+            name: item.next.name,
+            NextComp: renderPanelItems(item.next.props)
+          };
+          setTrue();
+        },
+        options: item.options,
+        disabled: item.disabled,
+        onChange: handleChange,
+        size: "small"
+      }));
+    });
+  });
+  var PropsComps = useCreation(function () {
+    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) {
+      if (!payload.id) {
+        setActiveNode(null);
+        return;
+      }
+      var component = context.componentMap.get(payload.id);
+      var _component$api$getSel = component.api.getSelfAndParentLCData(),
+        node = _component$api$getSel.node;
+      var levelNodes = takeRight(component.api.getLevelNodes(), 4);
+      setActiveNode({
+        node: node.props,
+        level: levelNodes
+      });
+    }).watch();
+    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]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-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,
+          cellNode: context.componentMap.get(id).dom
+        });
+      },
+      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,
+          cellNode: context.componentMap.get(id).dom
+        });
+      }
+    }, name);
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['lc-painter-panel-tabbar'], _defineProperty({}, styles.hidden, !activeNode))
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: styles.headerList
+  }, _TAB_LIST_.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({}, styles.hidden, !activeNode))
+  }, 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("div", null, "\u6837\u5F0F\u9762\u677F"), 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

@@ -0,0 +1,142 @@
+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 { 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 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',
+  title: '大纲树',
+  fix: true
+};
+var _DRAWER_COMPONENTS_ = {
+  width: 310,
+  key: 'components',
+  title: '组件',
+  fix: true
+};
+var _DRAWER_I18N_ = {
+  width: 450,
+  key: 'i18n',
+  title: '多语言文案管理',
+  fix: false
+};
+var Ribbon = function Ribbon() {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    drawer = _useState2[0],
+    setDrawer = _useState2[1];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: styles['lc-painter-ribbon'],
+    width: _WIDTH_,
+    heitht: "100%",
+    direction: "column",
+    align: "center",
+    style: {
+      marginRight: drawer !== null && drawer !== void 0 && drawer.fix ? drawer.width : 0
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "right",
+    title: formatMessage({
+      id: 'luckda.lowcode.outline',
+      label: _DRAWER_OUTLINE_.title
+    })
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "apartment",
+    onClick: function onClick() {
+      return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_OUTLINE_.key ? null : _DRAWER_OUTLINE_);
+    }
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "right",
+    title: formatMessage({
+      id: 'luckda.lowcode.components',
+      label: _DRAWER_COMPONENTS_.title
+    })
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "appstore",
+    onClick: function onClick() {
+      return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_COMPONENTS_.key ? null : _DRAWER_COMPONENTS_);
+    }
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "right",
+    title: formatMessage({
+      id: 'luckda.lowcode.i18n',
+      label: _DRAWER_I18N_.title
+    })
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "global",
+    onClick: function onClick() {
+      return setDrawer((drawer === null || drawer === void 0 ? void 0 : drawer.key) === _DRAWER_I18N_.key ? null : _DRAWER_I18N_);
+    }
+  }))), /*#__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_OUTLINE_.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_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/PanelItem.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { startsWith } from 'lodash';
+import styles from "../style/panel-item.less";
+
+/**
+ * `PanelItem` 组件表示属性面板中的一个属性项。
+ * 它展示了一个标签（通常是属性名称）和对应的组件（比如输入框、选择器等）。
+ * 这个组件可以用于构建具有多个属性输入的UI，如设置面板或配置界面。
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <PanelItem
+ *   label="属性名称"
+ *   component={<input type="text" />}
+ * />
+ * ```
+ *
+ * @param {Object} props 组件接收的参数
+ * @param {string} props.label 用于显示的属性名称。
+ * @param {React.ReactNode} props.children 与属性名称对应的组件，可以是输入框、下拉菜单等React节点。
+ *
+ * @returns {React.Element} 返回一个React元素，渲染属性名称和对应的组件。
+ */
+export default function (_ref) {
+  var label = _ref.label,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-components-panelitem']
+  }, label && !startsWith(label, '#') && /*#__PURE__*/React.createElement("span", {
+    className: styles['item-label']
+  }, label), /*#__PURE__*/React.createElement("span", {
+    className: styles['item-component']
+  }, children));
+}

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

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import { Popconfirm } from 'luck-design/antd';
+import styles from "../style/pop-confirm.less";
+
+/**
+ * 这个组件是对 luck-design/antd 的 Popconfirm 组件的封装。
+ * 它提供了一个带有自定义样式的弹出确认框，用于在用户尝试执行重要操作前提示确认信息。
+ * 通过传入的 props 可以自定义 Popconfirm 组件的行为和外观。
+ * 
+ * @param {Object} props - 传递给 Popconfirm 组件的属性。这包括所有标准的 Popconfirm 属性，
+ *                         以及任何额外的属性，如事件处理器或自定义内容。
+ * @returns {ReactNode} 返回一个配置了自定义样式和指定属性的 Popconfirm 组件实例。
+ */
+export default function (props) {
+  return /*#__PURE__*/React.createElement(Popconfirm, _extends({
+    overlayClassName: styles['lc-painter-panel-section-components-popconfirm'],
+    icon: null
+  }, props));
+}

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

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"],
+  _excluded2 = ["children"],
+  _excluded3 = ["children"],
+  _excluded4 = ["children"];
+import React from 'react';
+import styles from "../style/pop-form.less";
+
+/**
+ * PopForm 是一个为弹出式表单布局提供容器的组件，它使用特定的样式来组织表单内容。
+ * 
+ * @param {Object} props - 组件的 props。
+ * @param {ReactNode} props.children - 组件内包含的子元素。
+ * @param {Object} rest - 传递给组件的其余属性，这些属性将直接传递给根 div 元素。
+ */
+export var PopForm = function PopForm(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: styles['lc-painter-panel-section-components-popform']
+  }, rest), children);
+};
+
+/**
+ * PopFormItem 是 PopForm 组件的一个子项，用于包装表单的每个独立字段。
+ * 它提供了一致的布局和样式封装，用于表单项的展示。
+ * 
+ * @param {Object} props - 组件的 props。
+ * @param {ReactNode} props.children - 组件内包含的子元素。
+ * @param {Object} rest - 传递给组件的其余属性，这些属性将直接传递给根 div 元素。
+ */
+export var PopFormItem = function PopFormItem(_ref2) {
+  var children = _ref2.children,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: styles['item']
+  }, rest), children);
+};
+
+/**
+ * PopFormItemLeft 是 PopFormItem 的子组件，用于展示表单项的标签或标题部分。
+ * 它通常用于放置字段名或说明性文本。
+ * 
+ * @param {Object} props - 组件的 props。
+ * @param {ReactNode} props.children - 组件内包含的子元素。
+ * @param {Object} rest - 传递给组件的其余属性，这些属性将直接传递给根 div 元素。
+ */
+export var PopFormItemLeft = function PopFormItemLeft(_ref3) {
+  var children = _ref3.children,
+    rest = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: styles['left']
+  }, rest), children);
+};
+
+/**
+ * PopFormItemRight 是 PopFormItem 的子组件，用于包含表单项的输入字段。
+ * 它是表单项布局中用于用户输入的部分，可以容纳各种类型的输入控件。
+ * 
+ * @param {Object} props - 组件的 props。
+ * @param {ReactNode} props.children - 组件内包含的子元素。
+ * @param {Object} rest - 传递给组件的其余属性，这些属性将直接传递给根 div 元素。
+ */
+export var PopFormItemRight = function PopFormItemRight(_ref4) {
+  var children = _ref4.children,
+    rest = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: styles['right']
+  }, rest), children);
+};