@lemon-fe/components 0.0.0 → 0.0.3

package/es/BaseTable/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseTableProps as Props } from './typings';
 declare function BaseTable<T extends Record<string, any>>(props: Props<T>): JSX.Element;
 declare namespace BaseTable {

package/es/DurationPicker/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Moment } from 'moment';
 import type { RangePickerProps } from 'antd/lib/date-picker';
 declare type Value = {

package/es/EditableTable/EditableTableFormItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormItemProps } from 'antd';
 import { EditableTableProps } from './typings';
 declare type Props<T> = Pick<FormItemProps, 'name' | 'label' | 'labelCol' | 'wrapperCol' | 'className' | 'required' | 'style' | 'colon'> & EditableTableProps<T>;

package/es/Filter/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ComponentOption, FilterProps } from './typings';
 declare function Filter<T extends Record<string, any> = Record<string, any>>(props: FilterProps<T>): JSX.Element;
 declare namespace Filter {

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

@@ -0,0 +1,7 @@
+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,396 @@
+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, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import { useDebounce } from '@lemon-fe/hooks';
+import { PREFIX_CLS as prefixCls } from '../../../constants';
+var drawerIcon = /*#__PURE__*/React.createElement("svg", {
+  width: "20",
+  height: "20",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+  fill: "currentColor"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M4.75,5 L15.25,5 C15.6642136,5 16,5.33578644 16,5.75 C16,6.16421356 15.6642136,6.5 15.25,6.5 L4.75,6.5 C4.33578644,6.5 4,6.16421356 4,5.75 C4,5.33578644 4.33578644,5 4.75,5 Z",
+  opacity: ".7",
+  transform: "translate(-274.000000, -586.000000) translate(274.000000, 586.000000)"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M4.75,9 L15.25,9 C15.6642136,9 16,9.33578644 16,9.75 C16,10.1642136 15.6642136,10.5 15.25,10.5 L4.75,10.5 C4.33578644,10.5 4,10.1642136 4,9.75 C4,9.33578644 4.33578644,9 4.75,9 Z",
+  opacity: ".7",
+  transform: "translate(-274.000000, -586.000000) translate(274.000000, 586.000000)"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M4.75,13 L15.25,13 C15.6642136,13 16,13.3357864 16,13.75 C16,14.1642136 15.6642136,14.5 15.25,14.5 L4.75,14.5 C4.33578644,14.5 4,14.1642136 4,13.75 C4,13.3357864 4.33578644,13 4.75,13 Z",
+  opacity: ".7",
+  transform: "translate(-274.000000, -586.000000) translate(274.000000, 586.000000)"
+})))));
+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 drawer = useRef(null);
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      collapsed = _useState4[0],
+      setCollapsed = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      visible = _useState6[0],
+      setVisible = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      top = _useState8[0],
+      setTop = _useState8[1];
+
+  var activeMenu = useMemo(function () {
+    var check = function check(path) {
+      if (path) {
+        return new RegExp("".concat(path, "(?![^\\/])")).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 {
+          path: [i],
+          key: topPath
+        };
+      }
+
+      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 {
+            path: [i, j],
+            key: subPath
+          };
+        }
+
+        for (var k = 0; k < items.length; k += 1) {
+          if (check(items[k].path)) {
+            return {
+              path: [i, j, k],
+              key: items[k].path
+            };
+          }
+        }
+      }
+    }
+  }, [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);
+    } else {
+      setPopover(null);
+    }
+  };
+
+  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);
+    }
+  };
+
+  useEffect(function () {
+    if (!visible) {
+      return;
+    }
+
+    var target = drawer.current;
+
+    if (target !== null) {
+      var handler = function handler(e) {
+        if (!target.contains(e.target)) {
+          closeDrawer();
+        }
+      };
+
+      requestAnimationFrame(function () {
+        window.addEventListener('click', handler);
+      });
+      return function () {
+        window.removeEventListener('click', handler);
+      };
+    }
+  }, [visible]);
+
+  var openDrawer = function openDrawer() {
+    setVisible(true);
+    setTimeout(function () {
+      var _drawer$current;
+
+      (_drawer$current = drawer.current) === null || _drawer$current === void 0 ? void 0 : _drawer$current.classList.add('animated');
+    }, 16);
+  };
+
+  var closeDrawer = function closeDrawer() {
+    if (drawer.current) {
+      drawer.current.classList.remove('animated');
+
+      var handler = function handler() {
+        var _drawer$current2;
+
+        (_drawer$current2 = drawer.current) === null || _drawer$current2 === void 0 ? void 0 : _drawer$current2.removeEventListener('transitionend', handler);
+        setVisible(false);
+      };
+
+      drawer.current.addEventListener('transitionend', handler);
+    }
+  };
+
+  var handleClick = function handleClick(item) {
+    if (item.path) {
+      onClick(item);
+      closeDrawer();
+      closeMenu();
+    }
+  };
+
+  var renderItem = function renderItem(item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: classNames("".concat(prefixCls, "-menu-item"), _defineProperty({}, "".concat(prefixCls, "-menu-active"), activeMenu !== undefined && activeMenu.key === item.path)),
+      onClick: function onClick() {
+        return handleClick(item);
+      }
+    }, item.name);
+  };
+
+  var renderDrawerItems = function renderDrawerItems() {
+    var cols = [[], [], []];
+    var value = [0, 0, 0];
+    menus.forEach(function (item) {
+      var list = [/*#__PURE__*/React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-menu-drawer-1"), _defineProperty({}, "".concat(prefixCls, "-menu-drawer-1-path"), item.path !== undefined)),
+        key: item.name,
+        onClick: function onClick() {
+          return handleClick(item);
+        }
+      }, item.name)];
+
+      if (item.children) {
+        item.children.forEach(function (subItem) {
+          list.push( /*#__PURE__*/React.createElement("div", {
+            className: "".concat(prefixCls, "-menu-drawer-2"),
+            key: "2-".concat(subItem.name),
+            onClick: function onClick() {
+              return handleClick(subItem);
+            }
+          }, subItem.name));
+
+          if (subItem.children) {
+            subItem.children.forEach(function (child) {
+              list.push( /*#__PURE__*/React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-menu-drawer-3"), _defineProperty({}, "".concat(prefixCls, "-menu-active"), activeMenu !== undefined && activeMenu.key === child.path)),
+                key: "3-".concat(child.name),
+                onClick: function onClick() {
+                  return handleClick(child);
+                }
+              }, child.name));
+            });
+          }
+        });
+      }
+
+      var node = /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-menu-drawer-block")
+      }, /*#__PURE__*/React.createElement("div", null, list));
+      var target = 0;
+      var min = Infinity;
+
+      for (var i = 0; i < value.length; i++) {
+        if (value[i] < min) {
+          target = i;
+          min = value[i];
+        }
+      }
+
+      value[target] += list.length;
+      cols[target].push(node);
+    });
+    return cols.map(function (items, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-menu-drawer-col"),
+        key: index
+      }, items);
+    });
+  };
+
+  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",
+    fillRule: "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 _classNames5;
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: classNames("".concat(prefixCls, "-menu-top-item"), (_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefixCls, "-menu-top-item-active"), activeMenu !== undefined && activeMenu.path[0] === index), _defineProperty(_classNames5, "".concat(prefixCls, "-menu-top-item-popover-active"), item === popover), _classNames5)),
+      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));
+  })), false && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-gutter")
+  }), collapsed ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-top-item"),
+    onClick: openDrawer
+  }, drawerIcon) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-label")
+  }, "\u6CA1\u6709\u627E\u5230\u60F3\u8981\u7684\u529F\u80FD?"), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-more"),
+    onClick: openDrawer
+  }, drawerIcon, /*#__PURE__*/React.createElement("span", null, "\u67E5\u770B\u5168\u90E8")))), visible && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-drawer"),
+    ref: drawer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-drawer-header")
+  }, /*#__PURE__*/React.createElement("div", null, "\u67E5\u770B\u5168\u90E8"), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-drawer-close"),
+    onClick: closeDrawer
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    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", {
+    transform: "translate(-1880.000000, -20.000000) translate(1880.000000, 20.000000)",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("rect", {
+    transform: "translate(8.000000, 8.000000) rotate(-45.000000) translate(-8.000000, -8.000000)",
+    x: "7.25",
+    y: "1",
+    width: "1.5",
+    height: "14",
+    rx: ".75"
+  }), /*#__PURE__*/React.createElement("rect", {
+    transform: "translate(8.000000, 8.000000) scale(-1, 1) rotate(-45.000000) translate(-8.000000, -8.000000)",
+    x: "7.25",
+    y: "1",
+    width: "1.5",
+    height: "14",
+    rx: ".75"
+  }))))))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-drawer-body")
+  }, renderDrawerItems())), document.body));
+}

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

@@ -0,0 +1,356 @@
+.transition() {
+  transition: background-color 0.2s;
+}
+
+.@{prefixCls}-menu {
+  flex: 0 0 200px;
+  min-width: 0;
+  height: 100%;
+  padding: 16px 0;
+  white-space: nowrap;
+  transition: flex 0.1s;
+
+  &-collapsed {
+    flex: 0 0 52px;
+  }
+
+  &-bar {
+    position: relative;
+    z-index: 3;
+    box-sizing: border-box;
+    width: 100%;
+    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 &-popup {
+    left: 52px;
+  }
+
+  &-top-item {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: 44px;
+    margin: 0 12px;
+    padding: 0 4px;
+    overflow: hidden;
+    color: #333;
+    font-size: 14px;
+    border-radius: 8px;
+    cursor: pointer;
+    .transition();
+
+    &: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 {
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+    font-size: 16px;
+    opacity: 0.7;
+  }
+
+  &-top-item-active &-icon {
+    opacity: 1;
+  }
+
+  &-title {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-popup {
+    position: absolute;
+    top: 0;
+    left: 200px;
+    z-index: 2;
+    transition: left 0.1s;
+
+    &-body {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      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.2s;
+    }
+
+    &.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: rgba(51, 51, 51, 0.5);
+    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, 1);
+    font-size: 14px;
+    line-height: 40px;
+    border-radius: 8px;
+    cursor: pointer;
+    .transition();
+
+    &:hover {
+      background-color: #e6e6e6;
+    }
+
+    &-favorite {
+      display: none;
+
+      &-active {
+        display: block;
+      }
+
+      & > svg {
+        display: block;
+      }
+    }
+
+    &:hover &-favorite {
+      display: block;
+    }
+  }
+
+  &-gutter {
+    height: 1px;
+    margin: 12px 0 16px 12px;
+    background-color: rgba(196, 196, 196, 0.2);
+  }
+
+  &-collapsed &-gutter {
+    margin: 0 12px;
+  }
+
+  &-label {
+    margin: 0 0 12px 12px;
+    color: rgba(0, 0, 0, 0.5);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  &-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 107px;
+    height: 36px;
+    margin-left: 12px;
+    color: rgba(5, 96, 253, 1);
+    font-size: 14px;
+    text-align: center;
+    background-color: #fff;
+    border: 1px solid rgba(5, 96, 253, 1);
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    .transition();
+
+    &:hover {
+      background-color: rgba(222, 234, 255, 1);
+    }
+
+    & > span {
+      margin-left: 8px;
+    }
+  }
+
+  &-drawer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+    width: 740px;
+    height: 100vh;
+    background-color: #fff;
+    box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
+      0px 6px 16px -8px rgba(0, 0, 0, 0.08);
+    transform: translate3d(60px, 0, 0);
+    opacity: 0;
+    transition: all 0.2s;
+
+    &.animated {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 56px;
+      padding: 0 24px;
+      color: #333;
+      font-weight: 500;
+      font-size: 16px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    }
+
+    &-body {
+      height: calc(100vh - 56px);
+      padding: 16px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    &-col {
+      display: inline-block;
+      width: 33.33333333%;
+      vertical-align: top;
+    }
+
+    .item() {
+      height: 44px;
+      padding: 0 16px;
+      font-size: 14px;
+      line-height: 44px;
+    }
+
+    &-1 {
+      color: rgba(51, 51, 51, 1);
+      font-weight: 500;
+      .item();
+
+      &-path {
+        cursor: pointer;
+        .transition();
+
+        &:hover {
+          color: rgba(5, 96, 253, 1);
+          background-color: rgba(238, 238, 238, 1);
+        }
+      }
+    }
+
+    &-2 {
+      color: rgba(51, 51, 51, 0.5);
+      font-weight: 500;
+      .item();
+    }
+
+    &-3 {
+      color: rgba(51, 51, 51, 1);
+      cursor: pointer;
+      .item();
+      .transition();
+
+      &:hover {
+        color: rgba(5, 96, 253, 1);
+        background-color: rgba(238, 238, 238, 1);
+      }
+    }
+
+    &-block {
+      padding: 8px;
+
+      & > div {
+        overflow: hidden;
+        background-color: rgba(238, 238, 238, 0.5);
+        border-radius: 8px;
+      }
+    }
+
+    &-close {
+      cursor: pointer;
+
+      &:hover {
+        color: rgba(5, 96, 253, 1);
+      }
+    }
+  }
+
+  &-active {
+    color: rgba(5, 96, 253, 1);
+  }
+}

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

@@ -0,0 +1,8 @@
+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/SiderTree/TreeNodeTitle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OperationType, TreeData } from './typings';
 interface Props<T> {
     node: TreeData<T>;

package/es/Table/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { TableProps } from './typings';
 export default function Table<RecordType extends Record<string, any>>(props: TableProps<RecordType>): JSX.Element;

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.3",
   "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.3",
     "antd": "^4.17.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
@@ -39,5 +35,6 @@
     "@types/color-string": "^1.5.2",
     "@types/lodash": "^4.14.179",
     "@types/react-resizable": "^1.7.4"
-  }
+  },
+  "gitHead": "4793be25184347a233655cd67038427b79767c46"
 }