@luck-design-biz/luckda 0.0.22 → 0.0.23

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

@@ -0,0 +1,90 @@
+.lc-painter-components {
+  .components-search {
+    padding: 0 20px;
+  }
+
+  .components-content {
+    border-top: 1px solid #e3e3e3;
+    margin-top: 20px;
+    padding-top: 10px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    .components-wrapper {
+      padding: 0 20px;
+      flex-basis: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 20px;
+
+      h3 {
+        width: 100%; // 使标题占满整行
+        margin-left: 0;
+        margin-bottom: 10px;
+      }
+    }
+
+    .components-item {
+      display: flex;
+      width: 121px;
+      height: 37px;
+      align-items: center;
+      justify-content: center; // 水平居中对齐
+      padding: 10px;
+      border: 1px solid #ddd;
+      margin-right: 10px; // 添加右边距来分隔项
+      margin-bottom: 10px; // 添加底边距来分隔行
+      border-radius: 4px;
+      transition: border-color 0.3s;
+      box-sizing: border-box; // 确保边框和填充不会增加元素的宽度
+
+      &:hover {
+        cursor: pointer;
+        border-color: #3478ff;
+        color: #3478ff; // 文本颜色
+        .icon-wrapper {
+          color: #3478ff; // Icon颜色（如果Icon组件接受color属性）
+        }
+      }
+
+      .icon-wrapper {
+        display: flex;
+        font-size: 12px;
+        align-items: center;
+        margin-right: 10px;
+      }
+
+      .text-content {
+        flex-grow: 1;
+        text-align: left;
+
+        span {
+          font-size: 12px;
+          color: #333;
+          white-space: nowrap; // 防止文字换行
+          overflow: hidden; // 隐藏溢出的文字
+          text-overflow: ellipsis; // 使用省略号表示溢出
+        }
+
+        p {
+          display: none; // 隐藏描述，因为在这个组件尺寸中无法显示
+        }
+      }
+    }
+  }
+
+  :global{
+    .ant-tabs-nav-scroll{
+      display: flex;
+      justify-content: center;
+      .ant-tabs-tab{
+        font-size: 14px!important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+.box {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+  display: none;
+  pointer-events: none;
+  cursor: pointer;
+  overflow: visible;
+  z-index: 9999;
+}
+
+.lc-painter-design {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+
+  .simulator {
+    :global {
+      .ant-form-item {
+        pointer-events: none;
+      }
+    }
+  }
+
+  .detector {
+    border: 1px dashed var(--ant-primary-color);
+    background-color: color-mix(in sRGB, var(--ant-primary-color), transparent 95%);
+    .box();
+  }
+
+  .selector {
+    border: 2px solid var(--ant-primary-6);
+    .box();
+  }
+}

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

@@ -0,0 +1,7 @@
+.lc-painter {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  background-color: #fff;
+}

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

@@ -0,0 +1,51 @@
+.lc-painter-panel-section-layoutratio {
+  @gridbox-width: 66px; // 定义变量
+  @grid-gap: 10px; // 间隔变量
+  @grid-items-per-row: 4; // 每行的gridbox数量
+
+  margin: 0;
+  align-items: center;
+
+  .ratio-view {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+
+    .gridbox-container {
+      width: calc(@grid-items-per-row * @gridbox-width + (@grid-items-per-row - 1) * @grid-gap);
+      margin: 0 auto; // 保持这个居中
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: @grid-gap;
+    }
+
+    .gridbox {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 2px;
+      width: @gridbox-width;
+      height: 34px;
+      border-radius: 5px;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      padding: 3px;
+
+      &:hover {
+        cursor: pointer;
+        border-color: #3478ff;
+      }
+
+      &.current {
+        border-color: #3478ff;
+      }
+
+      .girditem {
+        background-color: rgb(192, 194, 196);
+      }
+    }
+  }
+
+  .ratio-input {
+    margin-top: 20px;
+  }
+}

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

@@ -0,0 +1,26 @@
+.lc-painter-outline {
+  .page-node {
+    cursor: pointer;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    height: 32px;
+    box-sizing: border-box;
+    position: relative;
+    transform: translateZ(0);
+    padding: 0 5px;
+  }
+  .page-node:hover,
+  .page-node.page-node-active {
+    background-color: #f6f7f8;
+  }
+
+  :global {
+    .ant-tree.ant-tree-show-line li:not(:last-child)::before {
+      height: calc(100% - 34px);
+    }
+    .ant-tree-switcher-noop svg {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+.lc-painter-components-panelitem {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: center;
+  min-height: 28px;
+
+  .item-label {
+    font-size: 12px;
+  }
+
+  .item-component {
+    display: flex;
+    width: 215px;
+  }
+
+  /* 使.item-component-box的直接子元素铺满 */
+  .item-component > * {
+    flex-grow: 1;
+  }
+}

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

@@ -0,0 +1,5 @@
+.lc-painter-panel {
+  width: 320px;
+  height: 100%;
+  border-left: 1px solid #e8e8e8;
+}

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

@@ -0,0 +1,24 @@
+.lc-painter-panel-section-radio {
+  background-color: #f1f2f3;
+  border-radius: 6px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+
+  .radio-item {
+    display: flex;
+    flex: 1;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    font-size: 12px;
+    margin: 2px;
+    border-radius: 6px;
+    cursor: pointer;
+
+    &.active{
+      background-color: #ffffff;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+.lc-painter-ribbon {
+  border-right: 1px solid #e8e8e8;
+  font-size: 16px;
+}

package/es/lowcode/painter/style/rule-input.less

@@ -0,0 +1,13 @@
+.lc-painter-components-ruleinput {
+  &.err, &.err:hover {
+    border-color: #ff4d4f;
+    color: red;
+  }
+  &.err:focus {
+    border-color: #ff4d4f;
+    border-right-width: 1px !important;
+    outline: 0;
+    -webkit-box-shadow: 0 0 0 2px rgba(245,34,45,.2);
+    box-shadow: 0 0 0 2px rgba(245,34,45,.2);
+  }
+}

package/es/lowcode/view/Canvas.js

@@ -0,0 +1,135 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["props", "children"];
+import React, { useRef, useState } from 'react';
+import { dynamic } from 'umi';
+import { useMemoizedFn, useDeepCompareLayoutEffect } from 'ahooks';
+import { reduce } from 'lodash';
+import Wrapper from "./lc-components/Wrapper";
+import { CELL_KEY } from "../constants";
+import styles from "./style/canvas.less";
+var PAGE_CELL = [CELL_KEY.PAGE_HEADER, CELL_KEY.PAGE_CONTENT, CELL_KEY.PAGE_FOOTER];
+var Canvas = function Canvas(_ref) {
+  var dataSource = _ref.dataSource;
+  console.log('dataSource', dataSource);
+  var headerRef = useRef();
+  var contentRef = useRef();
+  var footerRef = useRef();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    header = _useState2[0],
+    setHeader = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    content = _useState4[0],
+    setContent = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    footer = _useState6[0],
+    setFooter = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    modal = _useState8[0],
+    setModal = _useState8[1];
+  var render = useMemoizedFn(function (_ref2) {
+    var props = _ref2.props,
+      children = _ref2.children,
+      childrenMap = _objectWithoutProperties(_ref2, _excluded);
+    if (props && !PAGE_CELL.includes(props.id)) {
+      var Comp = dynamic({
+        loader: function () {
+          var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+            var _yield$import, _Comp;
+            return _regeneratorRuntime().wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return import("./lc-components/".concat(props.type));
+                case 2:
+                  _yield$import = _context.sent;
+                  _Comp = _yield$import.default;
+                  return _context.abrupt("return", _Comp);
+                case 5:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          function loader() {
+            return _loader.apply(this, arguments);
+          }
+          return loader;
+        }()
+      });
+      return /*#__PURE__*/React.createElement(Comp, {
+        id: props.id,
+        lcdata: props
+      }, (children || []).map(function (_id) {
+        return render(childrenMap[_id]);
+      }));
+    }
+    return (children || []).map(function (_id) {
+      return render(childrenMap[_id]);
+    });
+  });
+  useDeepCompareLayoutEffect(function () {
+    setHeader(render(dataSource[CELL_KEY.PAGE_HEADER]));
+  }, [dataSource[CELL_KEY.PAGE_HEADER]]);
+  useDeepCompareLayoutEffect(function () {
+    setContent(render(dataSource[CELL_KEY.PAGE_CONTENT]));
+  }, [dataSource[CELL_KEY.PAGE_CONTENT]]);
+  useDeepCompareLayoutEffect(function () {
+    setFooter(render(dataSource[CELL_KEY.PAGE_FOOTER]));
+  }, [dataSource[CELL_KEY.PAGE_FOOTER]]);
+  useDeepCompareLayoutEffect(function () {
+    var pageModal = reduce(dataSource.children, function (result, _id) {
+      if (!PAGE_CELL.includes(_id)) {
+        result[_id] = dataSource[_id];
+        if (!result.children) {
+          result.children = [];
+        }
+        result.children.push(_id);
+      }
+      return result;
+    }, {});
+    setModal(render(pageModal));
+  }, [dataSource.children]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "page-canvas",
+    className: styles['lc-view-canvas']
+  }, /*#__PURE__*/React.createElement(Wrapper, {
+    id: CELL_KEY.PAGE_HEADER,
+    getTargetDom: function getTargetDom() {
+      return headerRef.current;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: headerRef,
+    style: {
+      width: '100%',
+      height: 120,
+      backgroundColor: '#d3f261'
+    }
+  }, header)), /*#__PURE__*/React.createElement(Wrapper, {
+    id: CELL_KEY.PAGE_CONTENT,
+    getTargetDom: function getTargetDom() {
+      return contentRef.current;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef
+  }, content)), /*#__PURE__*/React.createElement(Wrapper, {
+    id: CELL_KEY.PAGE_HEADER,
+    getTargetDom: function getTargetDom() {
+      return footerRef.current;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: footerRef,
+    style: {
+      width: '100%',
+      height: 80,
+      backgroundColor: '#69c0ff'
+    }
+  }, footer)), modal);
+};
+export default Canvas;

package/es/lowcode/view/Loading.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from "./style/loading.less";
+var Loading = function Loading() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-loading']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['cube']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['side'], styles['side1'])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['side'], styles['side2'])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['side'], styles['side3'])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['side'], styles['side4'])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['side'], styles['side5'])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['side'], styles['side6'])
+  })));
+};
+export default Loading;

package/es/lowcode/view/Page.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["pageCode", "className"];
+import React, { useRef, useEffect, forwardRef } from 'react';
+import { useMemoizedFn, useBoolean } from 'ahooks';
+import classNames from 'classnames';
+import { useLDContext } from "../engine/provider/ContextProvider";
+import Loading from "./Loading";
+import Wrapper from "./lc-components/Wrapper";
+import Canvas from "./Canvas";
+import { decompress, compress } from "../engine/tools/dataProcess";
+import { CELL_KEY } from "../constants";
+import styles from "./style/page.less";
+var mock = function mock(_pageCode) {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      var data = 'ᯡࠣ䂼྆ڑÙ⁅䁆䞠䌣䰪ぞ婈Ø䀦䉑Ŝ持䀥ດ⠦榠⍼Ⲉᗣᠱ嵜䐠׆Ⱐॼ哘ᄳࡠ֕惂ᬠ౪Ӕ沥尡㸴Ƭ䎰嫀䗠ވ䀻▯ἰ湬⥒ᓡᰀ᪡㱲璻䞠ೣⰊ焥⍂へ僸簠ⷌ)䔠ԂࠡⰠಢ㍬[婿ԯဧデ匒<̰N䁞椌狲⎣℁ࡈ琤ᶡ৅桎睑砢◛㶤ს㕍Ʃ䅌欫㊓㢛粠᙭⃀㤠ȉᑤզ愕ۦ厁䷅ᜧ㱯䀦密䭋氠㞘㵵朞礒⺛㺕婐㰵占マ១犚弐x㙁䘸㮱劐ش೮䈈J毟䈦Ⳙీฺ㐠槬⁽Ჰ栰帿࿠٠䂠㐳楂唏៣爭ᡘℼ撘䑼㴷ᨀ᭖䶀㠤嫯䐢䌵n皹᪑ᣬ䭅曢冪富ધ䤲瘠೯嗰ᾕ㍿䎋㪣⣷⟕䃎䌪㟨媽⽸㝐墎㲂暘抮ⴳ₂†ٳõᶢ㹕ㄢà㵠g❌L檪䠨晴⸨ⶱ淛္≢曈廳ܥ䁀⊸ᱥႫ帲墛ᷯ猦↕埄㩀磫ῠ琉Ẁ崆㴮梌棖巶翖㈈䏕䒒⪭掩犕὚唹䠽䊗ࣾᅡ爌䩛㓧࿠ⲑ㲥Ꮸ®㏾❰僷戦熂濛紎玈㋻్羜㺗㸌᠁猑℄畛㶋泧₀¥毗䚼⬦Сღ䀮劶☔⟫㢯਎㵏Ⰺ渍཮װ爊㱏ᘇ給㮄̋ᐆ͈䇑෫˅ࠢ⑰樼↫⦉ࡋᖃ䌍ࠤ效✿䃫༼䂁ߏ籈涎㑽ᗎ甥ᙉ抸咈ǰ䪠ˢᛦ儏ⰲ㐹೺浦☉Ȱ䗁䤘ⲇ沞ⵑ梾䣡炕߄哾ߢ^ສࣀ旔▨॒⍨夿੒ᠷ䦩焲╨ᥖ❒—囓恦 ⊱ᯮ㥝ဤ羊}璀̰塎㎥⥸ᗸၠ㢿΀⨾⋠㮾≴璺碠⋄喵૊哵䃝礔۔垵䫚囵棜ゥ὜᠙⣖䞮ွ⌵哄ω䀵Ⳇ捜䐯䤪ㅦ⡊㕦欐硤娪Ф⥪㥥⢊㽸䔙ᓯચɳ嫬怷ʚ‫橔²ᵼ嚻᝻৷剛䆃塯彁Ⱟ䈕㺿啴૰˻磡ᠯ㻿喀亾䮲眝囕ົṖ⛘䵕曍ᐠ';
+      resolve(data);
+    }, 400);
+  });
+};
+var LCPage = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var pageCode = _ref2.pageCode,
+    className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var _ref = useRef(null);
+  var _rootRef = ref || _ref;
+  var context = useLDContext();
+  var _useBoolean = useBoolean(true),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    loading = _useBoolean2[0],
+    setFalse = _useBoolean2[1].setFalse;
+  useEffect(function () {
+    context._pageCode.current = pageCode;
+    mock(pageCode).then(function (pageData) {
+      context._pageData.current = decompress(pageData);
+      setFalse();
+    });
+  }, []);
+  var getTargetDom = useMemoizedFn(function () {
+    return _rootRef.current;
+  });
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    id: CELL_KEY.PAGE_ROOT,
+    getTargetDom: getTargetDom
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: _rootRef,
+    className: classNames(styles['lc-view-page'], _defineProperty({}, className, !!className))
+  }, props), loading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement(Canvas, {
+    dataSource: context.pageData
+  })));
+});
+export default LCPage;

package/es/lowcode/view/index.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["pageCode"];
+import React from 'react';
+import EventBusProvider from "../engine/provider/EventBusProvider";
+import ContextProvider from "../engine/provider/ContextProvider";
+import Page from "./Page";
+import { RUNTIME } from "../constants/index";
+var View = function View(_ref) {
+  var pageCode = _ref.pageCode,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(EventBusProvider, {
+    runtime: RUNTIME.LIVE
+  }, /*#__PURE__*/React.createElement(ContextProvider, null, /*#__PURE__*/React.createElement(Page, _extends({
+    pageCode: pageCode
+  }, props))));
+};
+export default View;

package/es/lowcode/view/lc-components/Box/index.js

@@ -0,0 +1,21 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "children"];
+import React, { useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import Wrapper from "../Wrapper";
+var LCBox = function LCBox(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var ref = useRef();
+  var getTargetDom = useMemoizedFn(function () {
+    return ref.current;
+  });
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    id: id,
+    getTargetDom: getTargetDom
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, "LCBox", children));
+};
+export default LCBox;

package/es/lowcode/view/lc-components/Button/index.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "children"];
+import React, { useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { useLDContext } from "../../../engine/provider/ContextProvider";
+import { Button } from 'luck-design/antd';
+import Wrapper from "../Wrapper";
+import { RUNTIME } from "../../../constants";
+var LCButton = function LCButton(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var context = useLDContext();
+  var ref = useRef();
+  var getTargetDom = useMemoizedFn(function () {
+    return ref.current.buttonNode;
+  });
+  var handleClick = useMemoizedFn(function (e) {
+    if (context.runtime !== RUNTIME.LIVE) {
+      e.preventDefault();
+      return;
+    }
+    console.log('click', context);
+    context.$publisher(context.topics.COMPONENT_MOUNT, {
+      id: id
+    });
+  });
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    id: id,
+    getTargetDom: getTargetDom
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref,
+    onClick: handleClick
+  }, props), "LCButton-", id));
+};
+export default LCButton;

package/es/lowcode/view/lc-components/CardList/index.js

@@ -0,0 +1,20 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id"];
+import React, { useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import Wrapper from "../Wrapper";
+var LCCardList = function LCCardList(_ref) {
+  var id = _ref.id,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var ref = useRef();
+  var getTargetDom = useMemoizedFn(function () {
+    return ref.current;
+  });
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    id: id,
+    getTargetDom: getTargetDom
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, "LCCardList"));
+};
+export default LCCardList;

package/es/lowcode/view/lc-components/Dialog/index.js

@@ -0,0 +1,50 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "children"];
+import React, { useRef, useImperativeHandle } from 'react';
+import { useMemoizedFn, useBoolean } from 'ahooks';
+import { Modal } from 'luck-design/antd';
+import classNames from 'classnames';
+import { useLDContext } from "../../../engine/provider/ContextProvider";
+import { CELL_KEY, RUNTIME } from "../../../constants";
+import Wrapper from "../Wrapper";
+import styles from "./index.less";
+var LCDialog = function LCDialog(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var apiRef = useRef();
+  var context = useLDContext();
+  var _useBoolean = useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    open = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    setTrue = _useBoolean2$.setTrue,
+    setFalse = _useBoolean2$.setFalse,
+    toggle = _useBoolean2$.toggle;
+  var getTargetDom = useMemoizedFn(function () {
+    return (context.runtime === RUNTIME.DESIGN ? context.componentMap.get(CELL_KEY.PAGE_ROOT).dom : document).getElementsByClassName('ant-modal-content')[0];
+  });
+  useImperativeHandle(apiRef, function () {
+    return {
+      open: open,
+      doOpen: setTrue,
+      doClose: setFalse,
+      toggle: toggle
+    };
+  });
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    id: id,
+    getTargetDom: getTargetDom,
+    api: apiRef
+  }, /*#__PURE__*/React.createElement(Modal, {
+    visible: open,
+    getContainer: context.runtime !== RUNTIME.DESIGN,
+    wrapClassName: classNames(styles['lc-component-modal-wrapper'], _defineProperty({}, styles['runtime-design'], context.runtime === RUNTIME.DESIGN)),
+    maskStyle: {
+      position: context.runtime !== RUNTIME.DESIGN ? 'fixed' : 'absolute'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, "LCDialog-", id), children));
+};
+export default LCDialog;

package/es/lowcode/view/lc-components/Dialog/index.less

@@ -0,0 +1,3 @@
+.lc-component-modal-wrapper.runtime-design {
+  position: absolute !important;
+}