@lemon-fe/components 0.0.0 → 0.0.1

package/es/MainFramework/components/Menu/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { MenuItem } from '../../typings';
+interface Props {
+    data: MenuItem[];
+    onClick: (item: MenuItem) => void;
+}
+export default function Menu(props: Props): JSX.Element;
+export {};

package/es/MainFramework/components/Menu/index.js

@@ -0,0 +1,203 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { useDebounce } from '@lemon-fe/hooks';
+import { PREFIX_CLS as prefixCls } from '../../../constants';
+export default function Menu(props) {
+  var menus = props.data,
+      onClick = props.onClick;
+  var location = window.location;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      popover = _useState2[0],
+      setPopover = _useState2[1];
+
+  var popup = useRef(null);
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      collapsed = _useState4[0],
+      setCollapsed = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      top = _useState6[0],
+      setTop = _useState6[1];
+
+  var activeMenu = useMemo(function () {
+    var check = function check(path) {
+      if (path) {
+        return new RegExp("".concat(path, "\\b")).test(location.pathname);
+      }
+
+      return false;
+    };
+
+    for (var i = 0; i < menus.length; i += 1) {
+      var _menus$i = menus[i],
+          _menus$i$children = _menus$i.children,
+          subMenus = _menus$i$children === void 0 ? [] : _menus$i$children,
+          topPath = _menus$i.path;
+
+      if (check(topPath)) {
+        return i;
+      }
+
+      for (var j = 0; j < subMenus.length; j += 1) {
+        var _subMenus$j = subMenus[j],
+            subPath = _subMenus$j.path,
+            _subMenus$j$children = _subMenus$j.children,
+            items = _subMenus$j$children === void 0 ? [] : _subMenus$j$children;
+
+        if (check(subPath)) {
+          return i;
+        }
+
+        for (var k = 0; k < items.length; k += 1) {
+          if (check(items[k].path)) {
+            return i;
+          }
+        }
+      }
+    }
+  }, [location.pathname, menus]);
+
+  var openMenu = function openMenu(item, elm) {
+    if (item.children && item.children.length > 0) {
+      setPopover(item);
+      setTop(elm.offsetTop);
+      setTimeout(function () {
+        if (popup.current) {
+          popup.current.classList.add('animated');
+        }
+      }, 16);
+    }
+  };
+
+  var handleClick = function handleClick(item) {
+    if (item.path) {
+      setPopover(null);
+      onClick(item);
+    }
+  };
+
+  var handleMouseEnter = useDebounce(openMenu, 200);
+
+  var toggleMenu = function toggleMenu() {
+    setCollapsed(function (prev) {
+      return !prev;
+    });
+  };
+
+  var closeMenu = function closeMenu() {
+    handleMouseEnter.cancel();
+
+    if (popup.current) {
+      popup.current.classList.remove('animated');
+
+      var handler = function handler() {
+        var _popup$current;
+
+        setPopover(null);
+        (_popup$current = popup.current) === null || _popup$current === void 0 ? void 0 : _popup$current.removeEventListener('transitionend', handler);
+      };
+
+      popup.current.addEventListener('transitionend', handler);
+    }
+  };
+
+  var renderItem = function renderItem(item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "".concat(prefixCls, "-menu-item"),
+      onClick: function onClick() {
+        return handleClick(item);
+      }
+    }, item.name);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-menu"), _defineProperty({}, "".concat(prefixCls, "-menu-collapsed"), collapsed))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-bar"),
+    onMouseLeave: closeMenu
+  }, popover !== null && popover.children !== undefined && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-popup"),
+    style: {
+      top: top
+    },
+    ref: popup,
+    onMouseEnter: function onMouseEnter() {
+      return handleMouseEnter.cancel();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-popup-body")
+  }, popover.children.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-menu-block"),
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-menu-sub-item")
+    }, item.name), item.children !== undefined && item.children.map(renderItem));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-collapse"),
+    onClick: toggleMenu
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    opacity: ".7"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "M14.75,5 C15.1642136,5 15.5,5.33578644 15.5,5.75 L15.5,14.25 C15.5,14.6642136 15.1642136,15 14.75,15 C14.3357864,15 14,14.6642136 14,14.25 L14,5.75 C14,5.33578644 14.3357864,5 14.75,5 Z",
+    fill: "currentColor",
+    transform: "translate(-274.000000, -57.000000) translate(284.000000, 67.000000) scale(-1, 1) translate(-284.000000, -67.000000) translate(274.000000, 57.000000)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15,10 C15,10.4142136 14.6642136,10.75 14.25,10.75 L5,10.75 L5,10.75 L5,9.25 L14.25,9.25 C14.6642136,9.25 15,9.58578644 15,10 Z",
+    fill: "currentColor",
+    "fill-rule": "nonzero",
+    transform: "translate(-274.000000, -57.000000) translate(284.000000, 67.000000) scale(-1, 1) translate(-284.000000, -67.000000) translate(274.000000, 57.000000)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.7426212,6.79290128 L5.32842371,6.79290128 L5.32842371,13.2070987",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeDasharray: "0,0",
+    transform: "translate(-274.000000, -57.000000) translate(284.000000, 67.000000) scale(-1, 1) translate(-284.000000, -67.000000) translate(274.000000, 57.000000) translate(8.535522, 10.000000) rotate(-45.000000) translate(-8.535522, -10.000000)"
+  })))))), menus.map(function (item, index) {
+    var _classNames2;
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: classNames("".concat(prefixCls, "-menu-top-item"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-menu-top-item-active"), index === activeMenu), _defineProperty(_classNames2, "".concat(prefixCls, "-menu-top-item-popover-active"), item === popover), _classNames2)),
+      onClick: function onClick() {
+        return handleClick(item);
+      },
+      onMouseEnter: function onMouseEnter(e) {
+        return handleMouseEnter(item, e.currentTarget);
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      className: "".concat(prefixCls, "-menu-icon"),
+      src: item.icon
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-menu-title")
+    }, item.name));
+  })));
+}

package/es/MainFramework/components/Menu/index.less

@@ -0,0 +1,205 @@
+.@{prefixCls}-menu {
+  flex: 0 0 200px;
+  min-width: 0;
+  height: 100%;
+  transition: flex 0.1s;
+
+  &-collapsed {
+    flex: 0 0 52px;
+  }
+
+  &-bar {
+    position: relative;
+    z-index: 3;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 16px 0;
+    background: #f2f2f2;
+  }
+
+  &-collapse {
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    box-sizing: content-box;
+    width: 20px;
+    height: 20px;
+    padding: 12px;
+    color: #333;
+    transform: rotate(180deg);
+    cursor: pointer;
+
+    &:hover {
+      color: .primary() [];
+    }
+  }
+
+  &-collapsed &-collapse {
+    position: static;
+    padding: 12px 16px;
+    transform: rotate(0);
+  }
+
+  &-collapsed &-top-item {
+    margin: 0;
+    padding: 0 16px;
+  }
+
+  &-collapsed &-title {
+    display: none;
+  }
+
+  &-collapsed &-popup {
+    left: 52px;
+  }
+
+  &-top-item {
+    box-sizing: border-box;
+    height: 44px;
+    margin: 0 12px;
+    padding: 0 4px;
+    overflow: hidden;
+    color: #333;
+    font-size: 14px;
+    line-height: 44px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover,
+    &-popover-active {
+      background: #e6e6e6;
+    }
+
+    &-active {
+      font-weight: 500;
+      background-color: #e6e6e6;
+
+      &::before {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        display: block;
+        width: 2px;
+        height: 14px;
+        margin-top: -7px;
+        content: '';
+      }
+    }
+  }
+
+  &-icon {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+    font-size: 16px;
+    vertical-align: middle;
+    opacity: 0.7;
+  }
+
+  &-top-item-active &-icon {
+    opacity: 1;
+  }
+
+  &-title {
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+  }
+
+  &-popup {
+    position: absolute;
+    top: 0;
+    left: 200px;
+    z-index: 2;
+    transition: left 0.1s;
+
+    &-body {
+      position: relative;
+      z-index: 1;
+      margin-left: 4px;
+      padding: 8px;
+      background: #f9f9f9;
+      border-radius: 10px;
+      box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
+        0 6px 16px -8px rgba(0, 0, 0, 0.08);
+      transform: translate3d(-40px, 0, 0);
+      opacity: 0;
+      transition: all 0.3s;
+    }
+
+    &.animated &-body {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+  }
+
+  &-block {
+    display: inline-block;
+
+    &-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 0 16px;
+      writing-mode: horizontal-tb;
+
+      & > span {
+        color: rgba(51, 51, 51, 0.65);
+        font-size: 12px;
+      }
+    }
+  }
+
+  &-sub-item {
+    box-sizing: border-box;
+    width: 120px;
+    height: 40px;
+    padding: 0 16px;
+    color: #979797;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 40px;
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    width: 120px;
+    height: 40px;
+    padding: 0 16px;
+    color: rgba(51, 51, 51, 0.85);
+    font-size: 14px;
+    line-height: 40px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: #e6e6e6;
+    }
+
+    &-favorite {
+      display: none;
+
+      &-active {
+        display: block;
+      }
+
+      & > svg {
+        display: block;
+      }
+    }
+
+    &:hover &-favorite {
+      display: block;
+    }
+  }
+}

package/es/MainFramework/components/TabBar/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export default function TabBar<T extends {
+    title: string;
+}>(props: {
+    tabs: T[];
+    active: number;
+    onClick: (active: number) => void;
+    onClose: (active: number) => void;
+}): JSX.Element;

package/es/MainFramework/components/TabBar/index.js

@@ -0,0 +1,61 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+import classNames from 'classnames';
+import { PREFIX_CLS as prefixCls } from '../../../constants';
+export default function TabBar(props) {
+  var tabs = props.tabs,
+      active = props.active,
+      _onClick = props.onClick,
+      onClose = props.onClose;
+
+  var handleClose = function handleClose(e, index) {
+    e.stopPropagation();
+    onClose(index);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-tabs")
+  }, tabs.map(function (item, index) {
+    var key = item.title;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(prefixCls, "-nav-tab"), _defineProperty({}, "".concat(prefixCls, "-nav-tab-active"), index === active)),
+      onClick: function onClick() {
+        return _onClick(index);
+      },
+      key: key
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-nav-tab-title")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-nav-tab-inner")
+    }, item.title), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-nav-tab-close"),
+      onClick: function onClick(e) {
+        return handleClose(e, index);
+      }
+    }, /*#__PURE__*/React.createElement("svg", {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 9 9",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("g", {
+      fill: "#000",
+      fillRule: "evenodd",
+      fillOpacity: ".25"
+    }, /*#__PURE__*/React.createElement("rect", {
+      transform: "rotate(45 4.559 4.559)",
+      x: "3.976",
+      y: ".059",
+      width: "1",
+      height: "9",
+      rx: ".5"
+    }), /*#__PURE__*/React.createElement("rect", {
+      transform: "rotate(-45 4.559 4.441)",
+      x: "3.976",
+      y: "-.059",
+      width: "1",
+      height: "9",
+      rx: ".5"
+    }))))));
+  }));
+}

package/es/MainFramework/components/TabBar/index.less

@@ -0,0 +1,139 @@
+.@{prefixCls}-nav-tabs {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+  padding: 7px 16px 0;
+  overflow-x: hidden;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 6px;
+    z-index: 4;
+    display: block;
+    width: 10px;
+    height: 100%;
+    background-color: #fff;
+    border-bottom-right-radius: 10px;
+    content: '';
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 6px;
+    z-index: 4;
+    display: block;
+    width: 10px;
+    height: 100%;
+    background-color: #fff;
+    border-bottom-left-radius: 10px;
+    content: '';
+  }
+}
+
+.@{prefixCls}-nav-tab {
+  position: relative;
+  box-sizing: content-box;
+  min-width: 14px;
+  max-width: 120px;
+  height: 49px;
+  cursor: pointer;
+
+  &::before {
+    position: absolute;
+    top: 15px;
+    left: 0;
+    z-index: 5;
+    display: block;
+    width: 1px;
+    height: 12px;
+    background-color: #c4c4c4;
+    opacity: 0.2;
+    content: '';
+  }
+
+  &::after {
+    position: absolute;
+    right: -10px;
+    bottom: 0;
+    left: -10px;
+    z-index: 1;
+    display: block;
+    height: 10px;
+    background-color: #fff;
+    transition: background-color 0.2s;
+    content: '';
+  }
+
+  &-title {
+    position: relative;
+    z-index: 4;
+    display: flex;
+    align-items: center;
+    padding: 10px 10px 17px;
+    background-color: #fff;
+    border-radius: 10px;
+    transition: background-color 0.2s;
+  }
+
+  &:hover:not(&-active) &-title,
+  &:hover:not(&-active)::after {
+    background-color: #f9f9f9;
+  }
+
+  &-active &-title,
+  &-active::after {
+    background-color: #f2f2f2;
+  }
+
+  &:hover::after {
+    z-index: 2;
+  }
+
+  &-active::after {
+    z-index: 3;
+  }
+
+  &-active::before,
+  &-active + &::before,
+  &:hover::before,
+  &:hover + &::before {
+    opacity: 0;
+  }
+
+  &-active &-inner {
+    opacity: 1;
+  }
+
+  &-inner {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    color: #333;
+    font-size: 14px;
+    line-height: 22px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    opacity: 0.7;
+
+    &::after {
+      display: inline-block;
+      width: 16px;
+      content: ' ';
+    }
+  }
+
+  &-close {
+    width: 14px;
+    height: 14px;
+    line-height: 14px;
+    text-align: center;
+    border-radius: 50%;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.15);
+    }
+  }
+}

package/es/MainFramework/index.d.ts

@@ -0,0 +1,18 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { MenuItem } from './typings';
+interface Props<T> {
+    active: number;
+    tabs: T[];
+    menus: MenuItem[];
+    onTabClick: (index: number) => void;
+    onTabClose: (index: number) => void;
+    onMenuClick: (menu: MenuItem) => void;
+    right?: ReactNode;
+    children?: ReactNode;
+    logo?: string | false | ReactElement;
+    title: string | ReactNode;
+}
+export default function MainFramework<TabType extends {
+    title: string;
+}>(props: Props<TabType>): JSX.Element;
+export {};

package/es/MainFramework/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import TabBar from './components/TabBar';
+import Menu from './components/Menu';
+import { PREFIX_CLS as prefixCls } from '../constants';
+export default function MainFramework(props) {
+  var tabs = props.tabs,
+      active = props.active,
+      children = props.children,
+      right = props.right,
+      menus = props.menus,
+      onTabClick = props.onTabClick,
+      onMenuClick = props.onMenuClick,
+      onTabClose = props.onTabClose,
+      logo = props.logo,
+      title = props.title;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-main")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-left")
+  }, logo !== false && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-logo")
+  }, typeof logo === 'string' ? /*#__PURE__*/React.createElement("img", {
+    src: logo
+  }) : logo || /*#__PURE__*/React.createElement("svg", {
+    width: "15",
+    height: "22",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M3.403 10.313c.194-.163.393-.324.6-.481 1.47-1.123 2.592-2.339 3.333-3.622a7.805 7.805 0 0 0 1.101-4.036L8.427.966C8.159.657 7.906.335 7.67 0c-.26.384-.544.752-.849 1.103a15.52 15.52 0 0 1-2.336 2.165C2.853 4.514 1.67 5.858.938 7.28c.563 1.06 1.391 2.073 2.461 3.027M3.602 12.008a17.318 17.318 0 0 1-.835-.711C1.782 10.4.99 9.44.402 8.437a8.004 8.004 0 0 0 .362 5.91c.677 1.448 1.812 2.814 3.375 4.053.502.398.981.828 1.434 1.288v-.264a8.913 8.913 0 0 1 .99-4.146c-.687-1.157-1.683-2.256-2.96-3.276M11.025 12.036c-1.482 1.092-2.611 2.27-3.355 3.51a7.355 7.355 0 0 0-1.107 3.91l.008 1.173c.272.298.528.61.764.933.263-.372.549-.73.856-1.07a15.398 15.398 0 0 1 2.346-2.098c2.984-2.196 4.486-4.693 4.463-7.42a7.134 7.134 0 0 0-.489-2.537c-.802 1.278-1.971 2.484-3.486 3.597M11.353 9.828c.186.156.371.317.553.485.945-.983 1.668-2.02 2.156-3.096-.675-1.429-1.765-2.778-3.239-4.01-.496-.411-.968-.856-1.414-1.332v.268a9.617 9.617 0 0 1-.972 4.298c.68 1.201 1.661 2.34 2.917 3.387"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-title")
+  }, title)), /*#__PURE__*/React.createElement(TabBar, {
+    tabs: tabs,
+    active: active,
+    onClick: onTabClick,
+    onClose: onTabClose
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-right")
+  }, right)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body")
+  }, /*#__PURE__*/React.createElement(Menu, {
+    data: menus,
+    onClick: onMenuClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, children)));
+}

package/es/MainFramework/index.less

@@ -0,0 +1,88 @@
+@import './components/Menu/index.less';
+@import './components/TabBar/index.less';
+
+.@{prefixCls}-main {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  min-width: 768px;
+  height: 100vh;
+  background: #f2f2f2;
+}
+
+.@{prefixCls}-nav {
+  position: relative;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100vw;
+  height: 56px;
+  padding: 0 16px;
+  background: #ffff;
+
+  &-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    margin-right: 8px;
+    color: .primary(1) [];
+
+    & > img {
+      display: block;
+      height: 24px;
+      margin: 0 auto;
+    }
+  }
+
+  &-title {
+    color: #000;
+    font-weight: 500;
+    font-size: 16px;
+  }
+
+  &-left,
+  &-right {
+    display: flex;
+    align-items: center;
+  }
+
+  &-left {
+    flex: 0 0 184px;
+    box-sizing: border-box;
+  }
+
+  &-right {
+    justify-content: flex-end;
+    min-width: 180px;
+    margin-left: auto;
+  }
+}
+
+.@{prefixCls}-body {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.@{prefixCls}-content {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  min-width: 0;
+
+  &-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+
+  & > div {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+}

package/es/MainFramework/typings.d.ts

@@ -0,0 +1,6 @@
+export type MenuItem = {
+  name: string;
+  path?: string;
+  icon?: string;
+  children?: MenuItem[];
+};

package/es/index.d.ts

@@ -17,5 +17,6 @@ export { default as Popup } from './Popup';
 export { default as SiderTree } from './SiderTree';
 export { default as Icons } from './Icons';
 export { default as FormLayout } from './FormLayout';
+export { default as MainFramework } from './MainFramework';
 export { default as init } from './init';
 export * from './constants';

package/es/index.js

@@ -13,5 +13,6 @@ export { default as Popup } from './Popup';
 export { default as SiderTree } from './SiderTree';
 export { default as Icons } from './Icons';
 export { default as FormLayout } from './FormLayout';
+export { default as MainFramework } from './MainFramework';
 export { default as init } from './init';
 export * from './constants';

package/es/index.less

@@ -1,3 +1,5 @@
+@import '~antd/dist/antd.variable.less';
+@import './theme.less';
 @import './Actions/index.less';
 @import './Layout/index.less';
 @import './Section/index.less';
@@ -12,7 +14,7 @@
 @import './FormLayout/index.less';
 @import './EditableTable/index.less';
 @import './PageLoading/index.less';
-@import '~antd/dist/antd.variable.less';
+@import './MainFramework/index.less';
 
 @blue-base: #2357df;
 

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.0.0",
-  "private": false,
+  "version": "0.0.1",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -10,14 +9,11 @@
   "files": [
     "es"
   ],
-  "publishConfig": {
-    "@lemon-fe:registry": "https://registry.npmjs.org"
-  },
   "scripts": {
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@lemon-fe/hooks": "^0.0.0",
+    "@lemon-fe/hooks": "^0.0.1",
     "antd": "^4.17.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",