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

package/lib/lowcode/view/lc-components/ImEx/FunctionPreview.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _index = _interopRequireDefault(require("./index"));
+var _excluded = ["children"];
+var FunctionPreview = function FunctionPreview(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_index.default, props, children);
+};
+var _default = exports.default = FunctionPreview;

package/lib/lowcode/view/lc-components/ImEx/index.js

@@ -20,6 +20,7 @@ var LCImEx = function LCImEx(_ref) {
   });
   return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
     id: id,
+    displayName: "ImEx",
     getTargetDom: getTargetDom
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref

package/lib/lowcode/view/lc-components/ImEx/meta.json

@@ -34,7 +34,7 @@
       "key": "title",
       "name": "标题",
       "desc": "按钮上显示的文字",
-      "type": "string",
+      "type": "_I18nInput",
       "default": "导入｜导出"
     },
     {
@@ -50,7 +50,7 @@
       "type": "string"
     }
   ],
-  "style": {},
+  "css": {},
   "advance": {
     "events": [
       {

package/lib/lowcode/view/lc-components/Image/FunctionPreview.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _index = _interopRequireDefault(require("./index"));
+var _excluded = ["children"];
+var FunctionPreview = function FunctionPreview(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_index.default, props, children);
+};
+var _default = exports.default = FunctionPreview;

package/lib/lowcode/view/lc-components/Image/index.js

@@ -20,6 +20,7 @@ var LCImage = function LCImage(_ref) {
   });
   return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
     id: id,
+    displayName: "Image",
     getTargetDom: getTargetDom
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref

package/lib/lowcode/view/lc-components/Image/meta.json

@@ -72,13 +72,13 @@
       "key": "title",
       "name": "标题",
       "desc": "图片html原生title",
-      "type": "string"
+      "type": "_I18nInput"
     },
     {
       "key": "alt",
       "name": "替代文本",
       "desc": "图片加载失败的占位文字",
-      "type": "string"
+      "type": "_I18nInput"
     },
     {
       "key": "preview",
@@ -88,7 +88,7 @@
       "default": false
     }
   ],
-  "style": {},
+  "css": {},
   "advance": {
     "events": [
       {

package/lib/lowcode/view/lc-components/JSX/FunctionPreview.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _index = _interopRequireDefault(require("./index"));
+var _excluded = ["children"];
+var FunctionPreview = function FunctionPreview(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_index.default, props, children);
+};
+var _default = exports.default = FunctionPreview;

package/lib/lowcode/view/lc-components/JSX/index.js

@@ -6,23 +6,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _ahooks = require("ahooks");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ContextProvider = require("../../../engine/provider/ContextProvider");
 var _Wrapper = _interopRequireDefault(require("../Wrapper"));
-var _excluded = ["id"];
+var _LdRuntimeCom = _interopRequireDefault(require("../../../../components/LdRuntimeCom"));
+var JSXWrapper = _styledComponents.default.div.withConfig({
+  displayName: "JSXWrapper",
+  componentId: "luckda-6530__sc-23r5qk-0"
+})(["", ""], function (props) {
+  return props.$css;
+});
 var LCJSX = function LCJSX(_ref) {
   var id = _ref.id,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    render = _ref.render,
+    css = _ref.css;
   var ref = (0, _react.useRef)();
+  var ctx = (0, _ContextProvider.useContext)();
   var getTargetDom = (0, _ahooks.useMemoizedFn)(function () {
     return ref.current;
   });
   return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
     id: id,
+    displayName: "JSX",
     getTargetDom: getTargetDom
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref
-  }, "JSX"));
+  }, /*#__PURE__*/_react.default.createElement(JSXWrapper, {
+    ref: ref,
+    $css: css
+  }, /*#__PURE__*/_react.default.createElement(_LdRuntimeCom.default, {
+    ctx: ctx
+  }, render)));
 };
 var _default = exports.default = LCJSX;

package/lib/lowcode/view/lc-components/JSX/meta.json

@@ -9,17 +9,20 @@
   "props": [
     {
       "key": "id",
-      "desc": "唯一标识",
+      "name": "唯一标识",
       "type": "string",
       "disabled": true
     },
     {
       "key": "render",
       "name": "编辑jsx代码",
-      "desc": "可执行的jsx代码",
-      "type": "_CodeEditor"
+      "desc": "编写可执行的完整jsx组件代码",
+      "type": "_JSEditor",
+      "default": "function Component() {\n\treturn(\n\t\t<div>\n\t\t\t此为自定义代码组件，请使用 JSX 语法\n\t\t</div>\n\t)\n}",
+      "mustConfirm": true,
+      "wrapper": "collapse",
+      "wrapperProps": { "suppressIcon": true }
     }
   ],
-  "style": {},
-  "advance": {}
+  "css": "width: 100%; height: auto;"
 }

package/lib/lowcode/view/lc-components/Layout/FunctionDesign.js

@@ -1,62 +1,65 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _ahooks = require("ahooks");
 var _lodash = require("lodash");
 var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../../../engine/provider/ContextProvider");
 var _index = _interopRequireDefault(require("./index"));
 var _dataProcess = require("../../../engine/tools/dataProcess");
 var _boxPropsDefault = _interopRequireDefault(require("../../../engine/meta/box.props.default.json"));
-var _excluded = ["children", "context", "id", "columnRatio"],
-  _excluded2 = ["style"];
+var _excluded = ["children", "id", "columnRatio"];
 var LayoutFunctionDesign = function LayoutFunctionDesign(_ref) {
   var children = _ref.children,
-    context = _ref.context,
     id = _ref.id,
     columnRatio = _ref.columnRatio,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var ctx = (0, _ContextProvider.useContext)();
+  var _usePageData = (0, _ContextProvider.usePageData)(),
+    _usePageData2 = (0, _slicedToArray2.default)(_usePageData, 2),
+    setPageData = _usePageData2[1].setPageData;
   var refreshChild = (0, _ahooks.useMemoizedFn)(function (_pageData) {
-    var cloneData = (0, _lodash.cloneDeep)(_pageData);
-    var _findNodeAndParent = (0, _dataProcess.findNodeAndParent)(id, cloneData),
+    var _findNodeAndParent = (0, _dataProcess.findNodeAndParent)(id, _pageData),
       current = _findNodeAndParent.node;
     var ratioArr = columnRatio.split(':');
     (0, _lodash.drop)(current.children, ratioArr.length).forEach(function (boxId) {
-      (0, _dataProcess.deleteById)(cloneData, boxId);
+      (0, _dataProcess.deleteById)(_pageData, boxId);
     });
     ratioArr.forEach(function (item, index) {
       var _current$children;
       var ratio = parseInt(item, 10);
       var boxId = (_current$children = current.children) === null || _current$children === void 0 ? void 0 : _current$children[index];
       if (boxId) {
-        (0, _dataProcess.modifyById)(cloneData, current.children[index], (0, _objectSpread2.default)((0, _objectSpread2.default)({}, current[boxId].props), {}, {
-          style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, current[boxId].props.style), {}, {
+        (0, _dataProcess.modifyById)(_pageData, current.children[index], (0, _objectSpread2.default)((0, _objectSpread2.default)({}, current[boxId].props), {}, {
+          style: {
             gridColumn: 'span ' + ratio
-          })
+          }
         }));
       } else {
         boxId = "box_".concat((0, _utils.suid)());
-        var style = _boxPropsDefault.default.style,
-          json = (0, _objectWithoutProperties2.default)(_boxPropsDefault.default, _excluded2);
-        (0, _dataProcess.add)(cloneData, id, boxId, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, json), {}, {
-          style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
+        (0, _dataProcess.add)(_pageData, id, boxId, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _boxPropsDefault.default), {}, {
+          buildIn: true,
+          style: {
             gridColumn: 'span ' + ratio
-          })
+          }
         }));
       }
     });
-    context._setPageData(cloneData);
+    setPageData(_pageData);
   });
   (0, _ahooks.useCreation)(function () {
     if (children !== null && children !== void 0 && children.length) return;
-    context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref2) {
+    ctx.$subscriber(ctx.topics.COMPONENT_APPEND).once(function (_ref2) {
       var compId = _ref2.id,
         pageData = _ref2.pageData;
       if (compId !== id) return;
@@ -64,19 +67,18 @@ var LayoutFunctionDesign = function LayoutFunctionDesign(_ref) {
     }).watch();
   }, []);
   (0, _react.useEffect)(function () {
-    var cmid = context.$subscriber(context.topics.COMPONENT_MODIFY).on(function (_ref3) {
+    var cmid = ctx.$subscriber(ctx.topics.COMPONENT_MODIFY).on(function (_ref3) {
       var compId = _ref3.id,
         pageData = _ref3.pageData;
       if (compId !== id) return;
       refreshChild(pageData);
     }).watch();
     return function () {
-      return context.$unsubscriber(context.topics.COMPONENT_MODIFY, cmid);
+      return ctx.$unsubscriber(ctx.topics.COMPONENT_MODIFY, cmid);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(_index.default, (0, _extends2.default)({
-    id: id,
-    context: context
+  return /*#__PURE__*/_react.default.createElement(_index.default, (0, _extends2.default)({
+    id: id
   }, props), children);
 };
 var _default = exports.default = LayoutFunctionDesign;

package/lib/lowcode/view/lc-components/Layout/FunctionLive.js

@@ -5,18 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("./index"));
-var _excluded = ["children", "context", "id"];
+var _excluded = ["children"];
 var LayoutFunctionLive = function LayoutFunctionLive(_ref) {
   var children = _ref.children,
-    context = _ref.context,
-    id = _ref.id,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(_index.default, (0, _extends2.default)({
-    id: id,
-    context: context
-  }, props), children);
+  return /*#__PURE__*/_react.default.createElement(_index.default, props, children);
 };
 var _default = exports.default = LayoutFunctionLive;

package/lib/lowcode/view/lc-components/Layout/FunctionPreview.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _index = _interopRequireDefault(require("./index"));
+var _excluded = ["children"];
+var LayoutFunctionPreview = function LayoutFunctionPreview(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_index.default, props, children);
+};
+var _default = exports.default = LayoutFunctionPreview;

package/lib/lowcode/view/lc-components/Layout/index.js

@@ -26,6 +26,7 @@ var LCLayout = function LCLayout(_ref) {
   });
   return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
     id: id,
+    displayName: "Layout",
     getTargetDom: getTargetDom
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,

package/lib/lowcode/view/lc-components/Layout/meta.json

@@ -10,7 +10,6 @@
     {
       "key": "id",
       "name": "唯一标识",
-      "desc": "组件的唯一标识符，不能够与其它组件重名，不能够为空，且只能够使用以字母开头的，下划线以及数字的组合",
       "type": "string",
       "disabled": true
     },
@@ -88,7 +87,7 @@
       "default": 16
     }
   ],
-  "style": {},
+  "css": {},
   "advance": {
     "events": [
       {

package/lib/lowcode/view/lc-components/Link/FunctionPreview.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _index = _interopRequireDefault(require("./index"));
+var _excluded = ["children"];
+var FunctionPreview = function FunctionPreview(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_index.default, props, children);
+};
+var _default = exports.default = FunctionPreview;

package/lib/lowcode/view/lc-components/Link/index.js

@@ -20,6 +20,7 @@ var LCLink = function LCLink(_ref) {
   });
   return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
     id: id,
+    displayName: "Link",
     getTargetDom: getTargetDom
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref

package/lib/lowcode/view/lc-components/Link/meta.json

@@ -17,7 +17,7 @@
       "key": "content",
       "name": "内容",
       "desc": "超链接的展示内容",
-      "type": "string"
+      "type": "_I18nInput"
     },
     {
       "key": "textOverflow",
@@ -66,7 +66,7 @@
       "key": "serials",
       "name": "资源串",
       "desc": "挂接模块资源串",
-      "type": "string"
+      "type": "_SerialsSelector"
     },
     {
       "key": "effect",
@@ -86,7 +86,7 @@
       "default": "hidden"
     }
   ],
-  "style": {},
+  "css": {},
   "advance": {
     "events": [
       {

package/lib/lowcode/view/lc-components/Page/meta.json

@@ -0,0 +1,49 @@
+{
+  "component": "Page",
+  "name": "页面",
+  "group": "build-in",
+  "props": [
+    {
+      "key": "pageSlot",
+      "name": "页面插槽",
+      "type": "group",
+      "props": [
+        {
+          "key": "enableHeader",
+          "name": "启用页头",
+          "type": "switch",
+          "default": "false"
+        },
+        {
+          "key": "fixedHeader",
+          "name": "固定页头",
+          "type": "switch",
+          "default": "true"
+        },
+        {
+          "key": "enableFooter",
+          "name": "启用页尾",
+          "type": "switch",
+          "default": "false"
+        }
+      ]
+    }
+  ],
+  "css": "background-color: transparent;",
+  "advance": {
+    "events": [
+      {
+        "key": "onPageMount",
+        "name": "组件首次渲染时",
+        "desc": "在组件首次渲染时，执行方法",
+        "func": "(params)=>{\n\t\n}"
+      },
+      {
+        "key": "onPageUnmount",
+        "name": "组件卸载时",
+        "desc": "在组件卸载时，执行方法。",
+        "func": "(params)=>{\n\t\n}"
+      }
+    ]
+  }
+}

package/lib/lowcode/view/lc-components/PageContent/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ContextProvider = require("../../../engine/provider/ContextProvider");
+var _useCanvasRender = _interopRequireDefault(require("../../../engine/tools/useCanvasRender"));
+var _Wrapper = _interopRequireDefault(require("../Wrapper"));
+var _constants = require("../../../constants");
+var _helper = require("../../../engine/tools/helper");
+var Div = _styledComponents.default.div.withConfig({
+  displayName: "Div",
+  componentId: "luckda-6530__sc-19wkpor-0"
+})(["", ""], function (props) {
+  return props.$css;
+});
+var PageContent = function PageContent() {
+  var ref = (0, _react.useRef)();
+  var _usePageData = (0, _ContextProvider.usePageData)([_constants.LC_BUILDIN_UNIT_KEY.PAGE_CONTENT, 'props.enableHeader', "".concat(_constants.LC_BUILDIN_UNIT_KEY.PAGE_HEADER, ".props.css")]),
+    _usePageData2 = (0, _slicedToArray2.default)(_usePageData, 1),
+    _usePageData2$ = (0, _slicedToArray2.default)(_usePageData2[0], 3),
+    pagecontent = _usePageData2$[0],
+    enableHeader = _usePageData2$[1],
+    headercss = _usePageData2$[2];
+  var canvas = (0, _useCanvasRender.default)(pagecontent);
+  var contentStyle = (0, _ahooks.useCreation)(function () {
+    if (enableHeader) {
+      var headerCss = (0, _helper.parseCSS)(headercss);
+      var _h = "calc(100% - ".concat(headerCss.height || '0px', " - ").concat(headerCss['margin-bottom'] || '0px', " - ").concat(headerCss['margin-top'] || '0px', ")");
+      return {
+        width: '100%',
+        height: 'auto',
+        minHeight: _h
+      };
+    }
+    return {
+      width: '100%',
+      height: '100%'
+    };
+  }, [enableHeader, headercss]);
+  var getTargetDom = (0, _ahooks.useMemoizedFn)(function () {
+    return ref.current;
+  });
+  return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
+    id: _constants.LC_BUILDIN_UNIT_KEY.PAGE_CONTENT,
+    displayName: "PageContent",
+    getTargetDom: getTargetDom
+  }, /*#__PURE__*/_react.default.createElement(Div, {
+    ref: ref,
+    $css: pagecontent.props.css,
+    style: contentStyle
+  }, canvas));
+};
+var _default = exports.default = PageContent;

package/lib/lowcode/view/lc-components/PageContent/meta.json

@@ -0,0 +1,9 @@
+{
+  "component": "PageContent",
+  "name": "页面内容",
+  "group": "build-in",
+  "props": [
+    
+  ],
+  "css": "background-color: transparent"
+}

package/lib/lowcode/view/lc-components/PageFooter/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ContextProvider = require("../../../engine/provider/ContextProvider");
+var _useCanvasRender = _interopRequireDefault(require("../../../engine/tools/useCanvasRender"));
+var _Wrapper = _interopRequireDefault(require("../Wrapper"));
+var _constants = require("../../../constants");
+var Div = _styledComponents.default.div.withConfig({
+  displayName: "Div",
+  componentId: "luckda-6530__sc-1d40970-0"
+})(["", ""], function (props) {
+  return props.$css;
+});
+var PageFooter = function PageFooter() {
+  var ref = (0, _react.useRef)();
+  var _usePageData = (0, _ContextProvider.usePageData)(_constants.LC_BUILDIN_UNIT_KEY.PAGE_FOOTER),
+    _usePageData2 = (0, _slicedToArray2.default)(_usePageData, 1),
+    pagefoot = _usePageData2[0];
+  var canvas = (0, _useCanvasRender.default)(pagefoot);
+  var getTargetDom = (0, _ahooks.useMemoizedFn)(function () {
+    return ref.current;
+  });
+  return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
+    id: _constants.LC_BUILDIN_UNIT_KEY.PAGE_FOOTER,
+    displayName: "PageFooter",
+    getTargetDom: getTargetDom
+  }, /*#__PURE__*/_react.default.createElement(Div, {
+    ref: ref,
+    $css: pagefoot.props.css,
+    style: {
+      width: '100%',
+      height: 80,
+      background: '#69c0ff'
+    }
+  }, canvas));
+};
+var _default = exports.default = PageFooter;

package/lib/lowcode/view/lc-components/PageFooter/meta.json

@@ -0,0 +1,9 @@
+{
+  "component": "PageFooter",
+  "name": "页面尾",
+  "group": "build-in",
+  "props": [
+    
+  ],
+  "css": "width: 100%; height: 80px; background-color: transparent"
+}

package/lib/lowcode/view/lc-components/PageHeader/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ContextProvider = require("../../../engine/provider/ContextProvider");
+var _useCanvasRender = _interopRequireDefault(require("../../../engine/tools/useCanvasRender"));
+var _Wrapper = _interopRequireDefault(require("../Wrapper"));
+var _constants = require("../../../constants");
+var Div = _styledComponents.default.div.withConfig({
+  displayName: "Div",
+  componentId: "luckda-6530__sc-1t2cxpy-0"
+})(["", ""], function (props) {
+  return props.$css;
+});
+var PageHeader = function PageHeader() {
+  var ref = (0, _react.useRef)();
+  var _usePageData = (0, _ContextProvider.usePageData)([_constants.LC_BUILDIN_UNIT_KEY.PAGE_HEADER, 'props.fixedHeader']),
+    _usePageData2 = (0, _slicedToArray2.default)(_usePageData, 1),
+    _usePageData2$ = (0, _slicedToArray2.default)(_usePageData2[0], 2),
+    pageheader = _usePageData2$[0],
+    fixed = _usePageData2$[1];
+  var canvas = (0, _useCanvasRender.default)(pageheader);
+  var getTargetDom = (0, _ahooks.useMemoizedFn)(function () {
+    return ref.current;
+  });
+  return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
+    id: _constants.LC_BUILDIN_UNIT_KEY.PAGE_HEADER,
+    displayName: "PageHeader",
+    getTargetDom: getTargetDom
+  }, /*#__PURE__*/_react.default.createElement(Div, {
+    ref: ref,
+    $css: pageheader.props.css,
+    style: fixed ? {
+      position: 'sticky',
+      top: 0,
+      zIndex: 10
+    } : null
+  }, canvas));
+};
+var _default = exports.default = PageHeader;

package/lib/lowcode/view/lc-components/PageHeader/meta.json

@@ -0,0 +1,9 @@
+{
+  "component": "PageHeader",
+  "name": "页面头",
+  "group": "build-in",
+  "props": [
+    
+  ],
+  "css": "width: 100%; height:120px; background-color: #fff; margin-bottom: 8px"
+}