@luck-design-biz/luckda 1.0.2-2 → 1.0.2-20

package/es/lowcode/painter/panel-section/ProxyLinker.js

@@ -0,0 +1,137 @@
+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, { useState } from 'react';
+import { getCreateHistoryOptions } from 'umi';
+import { useRequest, useMemoizedFn } from 'ahooks';
+import { TreeSelect, Tooltip, Button } from 'luck-design/antd';
+import styled from 'styled-components';
+import { reduce } from 'lodash';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useGet, modifyNode, getSelfAndParent } from "../../engine/provider/ContextProvider";
+import { fetchMenuTree } from "../../constants/api-url";
+import { getLDMetaAttr, dataToTree } from "../../engine/tools/helper";
+import { LC_BUILDIN_UNIT_KEY } from "../../constants";
+var Wrapper = styled.div.withConfig({
+  displayName: "Wrapper",
+  componentId: "luckda-6530__sc-r11awc-0"
+})(["width:100%;display:flex;align-items:center;"]);
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.proxy-linker';
+var ProxyLinker = function ProxyLinker(_ref) {
+  var nodeId = _ref.nodeId,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var _proxyCode = useGet({
+    id: nodeId,
+    path: 'props.proxyCode'
+  }) || defaultValue;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    menuTree = _useState2[0],
+    setMenuTree = _useState2[1];
+  var _useRequest = useRequest(function () {
+      return fetchMenuTree({
+        dataModelKey: getLDMetaAttr('dataModelKey'),
+        menuType: 'SITE'
+      });
+    }, {
+      onSuccess: function onSuccess(_ref2) {
+        var code = _ref2.code,
+          list = _ref2.list,
+          detail = _ref2.detail;
+        if (code === 1) {
+          var data = reduce(list, function (res, _id) {
+            var _item = detail[_id];
+            if (_item.accessType === -1 || _item.accessType === 0 && _item.moduleCode) {
+              var isLeaf = _item.accessType === 0;
+              res.push({
+                id: _id,
+                parentId: _item.parentId,
+                key: _item.moduleCode,
+                value: _item.moduleCode,
+                title: isLeaf ? "".concat(_item.name, "(").concat(_item.code, ")") : _item.name,
+                disabled: !isLeaf
+              });
+            }
+            return res;
+          }, []);
+          setMenuTree(dataToTree(data));
+        }
+      }
+    }),
+    loading = _useRequest.loading,
+    refresh = _useRequest.refresh;
+  var handleAddMenu = useMemoizedFn(function () {
+    var _getCreateHistoryOpti = getCreateHistoryOptions(),
+      basename = _getCreateHistoryOpti.basename;
+    var url = "".concat(basename === '/' ? '' : basename, "/ccm-dev/page-set/").concat(getLDMetaAttr('dataModelKey'), "?activeKey=menuManage");
+    window.open(url, '_blank');
+  });
+  var handleEditPage = useMemoizedFn(function () {
+    var _getCreateHistoryOpti2 = getCreateHistoryOptions(),
+      basename = _getCreateHistoryOpti2.basename;
+    var url = "".concat(basename === '/' ? '' : basename, "/ccm-dev/page-set/").concat(getLDMetaAttr('dataModelKey'), "?activeKey=pageDesign&code=").concat(_proxyCode, "&mode=edit");
+    window.open(url, '_blank');
+  });
+  var handleSelect = useMemoizedFn(function (val) {
+    onChange(val);
+    var _getSelfAndParent = getSelfAndParent(LC_BUILDIN_UNIT_KEY.PAGE_ROOT),
+      pageRoot = _getSelfAndParent.node;
+    modifyNode(LC_BUILDIN_UNIT_KEY.PAGE_ROOT, {
+      proxy: _objectSpread(_objectSpread({}, pageRoot.props.proxy), {}, _defineProperty({}, nodeId, val))
+    });
+  });
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(TreeSelect, {
+    showSearch: true,
+    style: {
+      width: 136
+    },
+    size: "small",
+    treeData: menuTree,
+    value: _proxyCode,
+    treeNodeFilterProp: "title",
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    onSelect: handleSelect
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".add"),
+      label: '新建页面'
+    })
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    icon: "plus",
+    style: {
+      marginLeft: 4
+    },
+    onClick: handleAddMenu
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".edit"),
+      label: '编辑页面'
+    })
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    icon: "edit",
+    style: {
+      marginLeft: 4
+    },
+    disabled: !_proxyCode,
+    onClick: handleEditPage
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".sync"),
+      label: '同步数据'
+    })
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    icon: "cloud-sync",
+    style: {
+      marginLeft: 4
+    },
+    loading: loading,
+    onClick: refresh
+  })));
+};
+export default ProxyLinker;

package/es/lowcode/painter/panel-section/ProxyParams.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button } from 'luck-design/antd';
+import { useGet } from "../../engine/provider/ContextProvider";
+import { formatMessage } from '@luck-design-biz/base/utils';
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.proxy-params';
+export default function (_ref) {
+  var nodeId = _ref.nodeId,
+    defaultValue = _ref.defaultValue,
+    next = _ref.next;
+  var value = useGet({
+    id: nodeId,
+    path: 'props.proxyParams'
+  }) || defaultValue;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '0 12px'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    block: true,
+    size: "small",
+    onClick: function onClick() {
+      return next();
+    }
+  }, formatMessage({
+    id: _I18N_PREFIX_,
+    label: '页面参数配置'
+  }), "(", (value === null || value === void 0 ? void 0 : value.length) || 0, ")"));
+}

package/es/lowcode/painter/panel-section/ProxyParamsSetter.js

@@ -0,0 +1,240 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useRef, useEffect } from 'react';
+import { useMap, useMemoizedFn } from 'ahooks';
+import { Button, Collapse, Icon, Form, Input, Select, InputNumber, Switch } from 'luck-design/antd';
+import styled from 'styled-components';
+import { formatMessage, suid } from '@luck-design-biz/base/utils';
+var SmallForm = styled(Form).withConfig({
+  displayName: "SmallForm",
+  componentId: "luckda-6530__sc-1aq87r3-0"
+})(["font-size:12px;padding-top:8px;.ant-form-item{font-size:12px;margin-bottom:8px;.ant-form-item-label,.ant-form-item-control{height:24px;line-height:24px !important;}.ant-form-item-control.has-error{height:36px;.ant-form-explain{font-size:12px;}}label{font-size:12px;}}"]);
+var SmallCollapse = styled(Collapse).withConfig({
+  displayName: "SmallCollapse",
+  componentId: "luckda-6530__sc-1aq87r3-1"
+})(["font-size:12px;margin-bottom:8px;& > .ant-collapse-item > .ant-collapse-header{padding:4px 8px 4px 36px;}.ant-collapse-content > .ant-collapse-content-box{padding:4px 8px;}"]);
+var ButtonWrapper = styled.div.withConfig({
+  displayName: "ButtonWrapper",
+  componentId: "luckda-6530__sc-1aq87r3-2"
+})(["display:grid;grid-template-columns:1fr 1fr;gap:8px;"]);
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.proxy-params-setter';
+var _OPTIONS_ = [{
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".param-origin.state"),
+    label: '页面全局状态'
+  }),
+  value: 'state'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".param-origin.global"),
+    label: '页面全局变量'
+  }),
+  value: 'global'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".param-origin.url"),
+    label: '页面URL参数'
+  }),
+  value: 'url'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".param-origin.string"),
+    label: '字符串常量'
+  }),
+  value: 'string'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".param-origin.num"),
+    label: '数字常量'
+  }),
+  value: 'num'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".param-origin.bool"),
+    label: '布尔常量'
+  }),
+  value: 'bool'
+}];
+var ParamForm = Form.create({
+  name: 'param_form',
+  onValuesChange: function onValuesChange(props, _, allValues) {
+    props.onChange(props.id, allValues);
+  }
+})(function (_ref) {
+  var form = _ref.form,
+    getForm = _ref.getForm,
+    defaultValue = _ref.defaultValue;
+  useEffect(function () {
+    getForm(form);
+  }, []);
+  var formItemCol = {
+    labelCol: {
+      span: 8
+    },
+    wrapperCol: {
+      span: 16
+    }
+  };
+  return /*#__PURE__*/React.createElement(SmallForm, {
+    hideRequiredMark: true,
+    layout: "horizontal"
+  }, /*#__PURE__*/React.createElement(Form.Item, _extends({
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".param-name"),
+      label: '参数名称'
+    })
+  }, formItemCol), form.getFieldDecorator('name', {
+    initialValue: defaultValue.name,
+    rules: [{
+      required: true,
+      message: formatMessage({
+        id: "".concat(_I18N_PREFIX_, ".warn.param-name"),
+        label: '请输入参数名称'
+      })
+    }]
+  })( /*#__PURE__*/React.createElement(Input, {
+    size: "small"
+  }))), /*#__PURE__*/React.createElement(Form.Item, _extends({
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".param-origin"),
+      label: '参数来源'
+    })
+  }, formItemCol), form.getFieldDecorator('origin', {
+    initialValue: defaultValue.origin || 'state'
+  })( /*#__PURE__*/React.createElement(Select, {
+    size: "small"
+  }, _OPTIONS_.map(function (item) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: item.value,
+      value: item.value
+    }, item.label);
+  })))), ['state', 'global', 'url', 'string'].includes(form.getFieldValue('origin')) && /*#__PURE__*/React.createElement(Form.Item, _extends({
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".param-value"),
+      label: '值或变量名'
+    })
+  }, formItemCol), form.getFieldDecorator('value', {
+    initialValue: defaultValue.value,
+    rules: [{
+      required: true,
+      message: formatMessage({
+        id: "".concat(_I18N_PREFIX_, ".warn.param-value"),
+        label: '请输入参数值或变量名'
+      })
+    }]
+  })( /*#__PURE__*/React.createElement(Input, {
+    size: "small"
+  }))), form.getFieldValue('origin') === 'num' && /*#__PURE__*/React.createElement(Form.Item, _extends({
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".param-value"),
+      label: '值或变量名'
+    })
+  }, formItemCol), form.getFieldDecorator('value', {
+    initialValue: defaultValue.value || 0
+  })( /*#__PURE__*/React.createElement(InputNumber, {
+    size: "small"
+  }))), form.getFieldValue('origin') === 'bool' && /*#__PURE__*/React.createElement(Form.Item, _extends({
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".param-value"),
+      label: '值或变量名'
+    })
+  }, formItemCol), form.getFieldDecorator('value', {
+    initialValue: defaultValue.value || false,
+    valuePropName: 'checked'
+  })( /*#__PURE__*/React.createElement(Switch, {
+    size: "small"
+  }))));
+});
+var ProxyParamsSetter = function ProxyParamsSetter(_ref2) {
+  var defaultValue = _ref2.defaultValue,
+    onChange = _ref2.onChange;
+  var formsRef = useRef([]);
+  var _useMap = useMap(defaultValue.map(function (item) {
+      return [item.id, item];
+    })),
+    _useMap2 = _slicedToArray(_useMap, 2),
+    map = _useMap2[0],
+    _useMap2$ = _useMap2[1],
+    set = _useMap2$.set,
+    remove = _useMap2$.remove;
+  var handleAdd = useMemoizedFn(function () {
+    var _id = suid();
+    set(_id, {
+      id: _id,
+      origin: 'state'
+    });
+  });
+  var handleSave = useMemoizedFn(function () {
+    var isValid = true;
+    formsRef.current.some(function (_form) {
+      _form.validateFields(function (err, val) {
+        isValid = !err;
+      });
+      return !isValid;
+    });
+    if (!isValid) return;
+    onChange(Array.from(map).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        id = _ref4[0],
+        item = _ref4[1];
+      return _objectSpread(_objectSpread({}, item), {}, {
+        id: id
+      });
+    }));
+  });
+  var handleChange = useMemoizedFn(function (id, val) {
+    set(id, val);
+  });
+  var handleDelete = useMemoizedFn(function (id, index) {
+    formsRef.current = [];
+    remove(id);
+  });
+  return /*#__PURE__*/React.createElement("div", null, Array.from(map).map(function (_ref5, index) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+      id = _ref6[0],
+      item = _ref6[1];
+    return /*#__PURE__*/React.createElement(SmallCollapse, {
+      key: id,
+      activeKey: "panel"
+    }, /*#__PURE__*/React.createElement(Collapse.Panel, {
+      header: "".concat(formatMessage({
+        id: "".concat(_I18N_PREFIX_, ".param"),
+        label: "\u9875\u9762\u53C2\u6570"
+      })).concat(index + 1),
+      key: "panel",
+      extra: /*#__PURE__*/React.createElement(Icon, {
+        type: "minus-circle",
+        style: {
+          color: 'var(--luck-color-danger)'
+        },
+        onClick: function onClick() {
+          return handleDelete(id);
+        }
+      })
+    }, /*#__PURE__*/React.createElement(ParamForm, {
+      id: id,
+      defaultValue: item,
+      getForm: function getForm(_form) {
+        return formsRef.current[index] = _form;
+      },
+      onChange: handleChange
+    })));
+  }), /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    block: true,
+    onClick: handleAdd
+  }, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".add"),
+    label: '添加参数'
+  })), /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    block: true,
+    type: "primary",
+    onClick: handleSave
+  }, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".save"),
+    label: '保存并返回'
+  }))));
+};
+export default ProxyParamsSetter;

package/es/lowcode/painter/panel-section/StylePanel/MainPanel.js

@@ -1,10 +1,10 @@
-import React, { useCallback } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useState } from 'react';
 import { formatMessage } from '@luck-design-biz/base/utils';
+import { useLatest } from 'ahooks';
 import { Button } from 'luck-design/antd';
 import Collapse from "../../components/Collapse";
-import PopConfirm from "../../components/PopConfirm";
 import CssEditor from "../../components/code-editor/CssEditor";
-import FullScreenEditor from "../../components/code-editor/FullScreenEditor";
 import styles from "../../style/style-panel.less";
 import { useStyle, useStyleDispatch, useEditor, styleToEditor } from "./StyleContext";
 import WidthHeight from "./WidthHeight";
@@ -18,6 +18,7 @@ import BorderRadius from "./BorderRadius";
 import Shadow from "./Shadow";
 import Opacity from "./Opacity";
 import Pointer from "./Pointer";
+import { LuckModal } from 'luck-design';
 
 /**
  * 主样式面板
@@ -26,21 +27,20 @@ var MainPanel = function MainPanel() {
   var style = useStyle(true);
   var dispatch = useStyleDispatch();
   var editorRef = useEditor();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var lasestStyle = useLatest(style);
   var handleCodeChange = useCallback(function (code) {
     dispatch({
       type: 'code',
       payload: code
     });
+    // editorRef.current.editor.setValue(code)
   }, []);
-  var handleEditorLayoutChange = useCallback(function (code) {
-    dispatch({
-      type: 'code',
-      payload: code
-    });
-    editorRef.current.editor.setValue(code);
-  }, []);
-  var handleEditorLoad = useCallback(function () {
-    styleToEditor(style).then(function (css) {
+  var handleOnload = useCallback(function () {
+    styleToEditor(lasestStyle.current).then(function (css) {
       editorRef.current.editor.setValue(css);
     });
   }, []);
@@ -53,24 +53,35 @@ var MainPanel = function MainPanel() {
     })
   }, /*#__PURE__*/React.createElement("div", {
     className: styles['style-editor']
-  }, /*#__PURE__*/React.createElement(PopConfirm, {
-    placement: "bottomRight",
-    title: /*#__PURE__*/React.createElement(FullScreenEditor, {
-      ref: editorRef,
-      EditorComponent: CssEditor,
-      width: "280px",
-      height: "300px",
-      onChange: handleCodeChange,
-      onLayoutChange: handleEditorLayoutChange,
-      onLoad: handleEditorLoad
-    })
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(LuckModal, {
+    title: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
+      label: '源码编辑'
+    }),
+    visible: show,
+    fullScreen: true,
+    mask: false,
+    footer: null,
+    maskClosable: false,
+    onClose: function onClose() {
+      setShow(false);
+    }
+  }, /*#__PURE__*/React.createElement(CssEditor, {
+    ref: editorRef,
+    width: "100%",
+    height: "100%",
+    onChange: handleCodeChange,
+    onLoad: handleOnload
+  })), /*#__PURE__*/React.createElement(Button, {
     type: "primary",
-    size: "small"
+    size: "small",
+    onClick: function onClick() {
+      setShow(true);
+    }
   }, formatMessage({
     id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
     label: '源码编辑'
-  })))), /*#__PURE__*/React.createElement(WidthHeight, {
+  }))), /*#__PURE__*/React.createElement(WidthHeight, {
     field: "width",
     label: formatMessage({
       id: 'luckda.lowcode.painter.panel-section.style-panel.width',

package/es/lowcode/painter/style/action-bind-modal.less

@@ -85,7 +85,7 @@
       font-size: 14px;
       font-weight: 700;
       margin-bottom: 8px;
-      color: rgba(0, 0, 0, 0.8);
+      color: @text-color;
       display: flex;
       -webkit-box-align: center;
       align-items: center;

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

@@ -66,7 +66,7 @@
 
         span {
           font-size: 12px;
-          color: #333;
+          color: var(--font-color);
           white-space: nowrap; // 防止文字换行
           overflow: hidden; // 隐藏溢出的文字
           text-overflow: ellipsis; // 使用省略号表示溢出

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

@@ -0,0 +1,46 @@
+.lc-painter-history {
+
+  .historyToolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 16px 8px 8px 8px;
+    margin-bottom: 8px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    background-color: transparent;
+    backdrop-filter: blur(6px);
+  }
+  .timelineItem {
+    padding: 0 8px;
+    .timelineItemHeader {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      div {
+        font-weight: bold;
+      }
+      .timelineItemActions {
+        display: none;
+        i {
+          cursor: pointer;
+        }
+      }
+    }
+    &:hover {
+      .timelineItemHeader > .timelineItemActions {
+        display: block;
+      }
+    }
+    .timelineItemUser {
+      display: flex;
+      align-items: center;
+      margin-top: 4px;
+    }
+    .timelineItemTime {
+      margin-top: 4px;
+    }
+  }
+}

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

@@ -16,7 +16,7 @@
   }
   .page-node:hover,
   .page-node.page-node-active {
-    background-color: #f6f7f8;
+    background: ~'var(--@{luck-ant-prefix}-layout-treeNode-wrapper, #f6f7f8)';
   }
 
   :global {

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

@@ -19,6 +19,7 @@
       align-items: center;
       gap: 4px;
       user-select: none;
+      flex-shrink: 0;
     }
 
     .item-component {

package/es/lowcode/preview/DebugTool.js

@@ -0,0 +1,78 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import { useMemoizedFn, useDrag, useBoolean } from 'ahooks';
+import { Icon, Drawer } from 'luck-design/antd';
+import styled from 'styled-components';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import DebugToolDetail from "./DebugToolDetail";
+var Wrapper = styled.div.withConfig({
+  displayName: "Wrapper",
+  componentId: "luckda-6530__sc-1x7h5jv-0"
+})(["position:fixed;border-top-left-radius:16px;border-bottom-left-radius:16px;cursor:pointer;z-index:1000;background:rgba(40,40,40,0.5);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;transition:right 0.4s ease-in-out;"]);
+var MoveIcon = styled.div.withConfig({
+  displayName: "MoveIcon",
+  componentId: "luckda-6530__sc-1x7h5jv-1"
+})(["height:46px;border-left:1px solid rgb(191,191,191,0.4);cursor:move;&:hover{background:transparent;backdrop-filter:blur(6px);}"]);
+var DebugTool = function DebugTool() {
+  var dragRef = useRef();
+  var _useState = useState([-32, 100]),
+    _useState2 = _slicedToArray(_useState, 2),
+    _useState2$ = _slicedToArray(_useState2[0], 2),
+    right = _useState2$[0],
+    top = _useState2$[1],
+    setPostion = _useState2[1];
+  var _useBoolean = useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    show = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    setTrue = _useBoolean2$.setTrue,
+    setFalse = _useBoolean2$.setFalse;
+  var handleMouseEnter = useMemoizedFn(function () {
+    setPostion([0, top]);
+  });
+  var handleMouseLeave = useMemoizedFn(function () {
+    setPostion([-32, top]);
+  });
+  var handleDragEnd = useMemoizedFn(function (event) {
+    setPostion([right, event.y]);
+  });
+  useDrag('', dragRef, {
+    onDragEnd: handleDragEnd
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Wrapper, {
+    style: {
+      right: right,
+      top: "".concat(top, "px")
+    },
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "bug",
+    style: {
+      padding: '16px 8px 16px 16px'
+    },
+    onClick: setTrue
+  }), /*#__PURE__*/React.createElement(MoveIcon, {
+    ref: dragRef
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 1024 1024",
+    width: "20",
+    height: "46"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M320 64a64 64 0 1 0 0 128 64 64 0 0 0 0-128zM704 64a64 64 0 1 0 0 128 64 64 0 0 0 0-128zM256 384a64 64 0 1 1 128 0 64 64 0 0 1-128 0zM704 320a64 64 0 1 0 0 128 64 64 0 0 0 0-128zM256 640a64 64 0 1 1 128 0 64 64 0 0 1-128 0zM320 832a64 64 0 1 0 0 128 64 64 0 0 0 0-128zM640 640a64 64 0 1 1 128 0 64 64 0 0 1-128 0zM704 832a64 64 0 1 0 0 128 64 64 0 0 0 0-128z",
+    fill: "#bfbfbf"
+  })))), /*#__PURE__*/React.createElement(Drawer, {
+    title: formatMessage({
+      id: 'luckda.lowcode.design.toolbar.debugTool',
+      label: '调试工具'
+    }),
+    visible: show,
+    onClose: setFalse,
+    footer: false,
+    mask: false,
+    bodyStyle: {
+      padding: '4px 16px'
+    }
+  }, /*#__PURE__*/React.createElement(DebugToolDetail, null)));
+};
+export default DebugTool;