@lemon-fe/components 0.0.19 → 0.0.23

package/es/BaseTable/index.less

@@ -11,8 +11,6 @@
 }
 
 .ant-table-body {
-  scrollbar-width: thin;
-
   &::-webkit-scrollbar {
     width: 8px;
     height: 8px;

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

@@ -0,0 +1,10 @@
+export default function DownBar<T extends {
+    title: string;
+    closable?: boolean;
+}>(props: {
+    tabs: T[];
+    active: number;
+    visible?: boolean;
+    onClick: (active: number) => void;
+    onClose: (active: number) => void;
+}): JSX.Element;

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

@@ -0,0 +1,84 @@
+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';
+import { Dropdown } from 'antd';
+export default function DownBar(props) {
+  var tabs = props.tabs,
+      active = props.active,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? false : _props$visible,
+      _onClick = props.onClick,
+      onClose = props.onClose;
+
+  var handleClose = function handleClose(e, index) {
+    e.stopPropagation();
+    onClose(index);
+  };
+
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    overlayStyle: visible ? {
+      visibility: 'visible'
+    } : {
+      visibility: 'hidden'
+    },
+    placement: "bottomRight",
+    overlay: /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-down-tabs")
+    }, tabs.map(function (item, index) {
+      var key = item.title;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-down-tab"), _defineProperty({}, "".concat(prefixCls, "-down-tab-active"), index === active)),
+        onClick: function onClick() {
+          return _onClick(index);
+        },
+        key: key
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-down-tab-title")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-down-tab-inner")
+      }, item.title), item.closable !== false && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-down-tab-close"),
+        onClick: function onClick(e) {
+          return handleClose(e, index);
+        }
+      }, /*#__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", {
+        fill: "currentColor"
+      }, /*#__PURE__*/React.createElement("g", {
+        fillRule: "nonzero"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M7.74992318,2.75006802 L7.74992318,11.250068 C7.74992318,11.6642816 7.41413675,12.000068 6.99992318,12.000068 C6.58570962,12.000068 6.24992318,11.6642816 6.24992318,11.250068 L6.24992318,2.75006802 C6.24992318,2.33585446 6.58570962,2.00006802 6.99992318,2.00006802 C7.41413675,2.00006802 7.74992318,2.33585446 7.74992318,2.75006802 Z",
+        transform: "translate(-367.000000, -21.000000) translate(367.000000, 21.000000) translate(6.999923, 7.000068) rotate(45.000000) translate(-6.999923, -7.000068)"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M7.74994595,2.75007682 L7.74994595,11.2500768 C7.74994595,11.6642904 7.41415952,12.0000768 6.99994595,12.0000768 C6.58573239,12.0000768 6.24994595,11.6642904 6.24994595,11.2500768 L6.24994595,2.75007682 C6.24994595,2.33586325 6.58573239,2.00007682 6.99994595,2.00007682 C7.41415952,2.00007682 7.74994595,2.33586325 7.74994595,2.75007682 Z",
+        transform: "translate(-367.000000, -21.000000) translate(367.000000, 21.000000) translate(6.999946, 7.000077) rotate(-45.000000) translate(-6.999946, -7.000077)"
+      }))))))));
+    }))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-down-tab-icon"),
+    style: visible ? {
+      visibility: 'visible'
+    } : {
+      visibility: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4.707 5.293L3.293 6.707 8 11.414l4.707-4.707-1.414-1.414L8 8.586z",
+    color: "#6D6D6D",
+    opacity: ".9",
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }))));
+}

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

@@ -0,0 +1,108 @@
+.@{prefixCls}-down-tabs {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 120px;
+  overflow-x: hidden;
+  background-color: #fcfcfc;
+  border-radius: 8px;
+  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05),
+    0px 6px 16px -8px rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(13px);
+}
+
+.@{prefixCls}-down-tab {
+  position: relative;
+  box-sizing: content-box;
+  width: 100%;
+  height: 43px;
+  cursor: pointer;
+
+  &-title {
+    position: relative;
+    z-index: 4;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding: 0 12px;
+    transition: background-color 0.2s;
+  }
+
+  &:hover:not(&-active) &-title,
+  &:hover:not(&-active)::after {
+    background-color: #f2f2f2;
+  }
+
+  &-active &-title,
+  &-active::after {
+    background-color: #eeeeee;
+  }
+
+  &: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: 43px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    opacity: 0.7;
+
+    &::after {
+      display: inline-block;
+      width: 16px;
+      content: ' ';
+    }
+  }
+
+  &-close {
+    display: none;
+  }
+  &:hover &-close {
+    display: block;
+    width: 14px;
+    height: 14px;
+    color: #c4c4c4;
+    line-height: 14px;
+    text-align: center;
+    border-radius: 50%;
+    &:hover {
+      color: #f2f2f2;
+      background-color: #c1c1c1;
+    }
+  }
+}
+
+.@{prefixCls}-down-tab-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  cursor: pointer;
+  &:hover {
+    background-color: #eeeeee;
+  }
+}

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

@@ -1,6 +1,8 @@
-import type { MenuItem } from '../../typings';
+import type { MenuFavorites, MenuItem } from '../../typings';
 interface Props {
     data: MenuItem[];
+    favorites?: MenuFavorites;
+    onFavoritesChange?: (items: MenuFavorites) => void;
     onClick: (item: MenuItem) => void;
 }
 export default function Menu(props: Props): JSX.Element;

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

@@ -1,4 +1,10 @@
-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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -12,11 +18,47 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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, { 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';
+import { Divider } from 'antd';
+
+function Star(props) {
+  if (props.active) {
+    return /*#__PURE__*/React.createElement("svg", {
+      className: props.className,
+      width: "20",
+      height: "20",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "m9.666 15.526-3.584 1.27a1 1 0 0 1-1.334-.97l.1-3.8a1 1 0 0 0-.206-.636L2.326 8.373a1 1 0 0 1 .51-1.567l3.646-1.08a1 1 0 0 0 .54-.393L9.176 2.2a1 1 0 0 1 1.648 0l2.154 3.134a1 1 0 0 0 .54.393l3.646 1.08a1 1 0 0 1 .51 1.567l-2.316 3.017a1 1 0 0 0-.206.635l.1 3.801a1 1 0 0 1-1.334.97l-3.584-1.27a1 1 0 0 0-.668 0Z",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement("svg", {
+    className: props.className,
+    width: "20",
+    height: "20",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "m9.954 2.52 2.406 3.238c.227.33.56.573.945.687l3.646 1.08a.25.25 0 0 1 .179.22l-2.367 3.188a1.75 1.75 0 0 0-.36 1.112l.1 3.801a.25.25 0 0 1-.156.238l-3.77-1.267a1.75 1.75 0 0 0-1.161.002l-3.585 1.27a.25.25 0 0 1-.274-.075l.04-3.976a1.75 1.75 0 0 0-.36-1.105L2.92 7.917a.25.25 0 0 1-.014-.284l3.794-1.19a1.75 1.75 0 0 0 .94-.685l2.153-3.134a.25.25 0 0 1 .16-.104Z",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    fill: "none",
+    fillRule: "evenodd"
+  }));
+}
+
 var drawerIcon = /*#__PURE__*/React.createElement("svg", {
   width: "20",
   height: "20",
@@ -39,9 +81,124 @@ var drawerIcon = /*#__PURE__*/React.createElement("svg", {
   opacity: ".7",
   transform: "translate(-274.000000, -586.000000) translate(274.000000, 586.000000)"
 })))));
+
+function FavoritesEmpty(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread(_objectSpread({}, props), {}, {
+    width: "72",
+    height: "72",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+    d: "M3.2 0h27.475a3.2 3.2 0 0 1 2.262.937l10.126 10.126c.6.6.937 1.414.937 2.262V46.8a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 46.8V3.2A3.2 3.2 0 0 1 3.2 0Z",
+    id: "a"
+  })), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10.766 23.2h20.889a3.2 3.2 0 0 1 3.051 2.236l9.98 31.6a3.2 3.2 0 0 1-3.052 4.164H20.745a3.2 3.2 0 0 1-3.051-2.236l-9.98-31.6a3.2 3.2 0 0 1 3.052-4.164Z",
+    fill: "#E7E7E7",
+    opacity: ".4"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#E7E7E7",
+    x: "49.2",
+    y: "11.2",
+    width: "14.8",
+    height: "14.8",
+    rx: "3.2"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(20 11.2)"
+  }, /*#__PURE__*/React.createElement("mask", {
+    id: "b",
+    fill: "#fff"
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#a"
+  })), /*#__PURE__*/React.createElement("use", {
+    fill: "#E7E7E7",
+    xlinkHref: "#a"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#CFCFCF",
+    mask: "url(#b)",
+    cx: "31.8",
+    cy: "17",
+    r: "35.4"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#BEBEBE",
+    mask: "url(#b)",
+    x: "29.2",
+    width: "14.8",
+    height: "14.8",
+    rx: "3.2"
+  })), /*#__PURE__*/React.createElement("rect", {
+    fill: "#FFF",
+    x: "30",
+    y: "31.6",
+    width: "24",
+    height: "2.4",
+    rx: "1.2"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#FFF",
+    x: "30",
+    y: "39.6",
+    width: "12.8",
+    height: "2.4",
+    rx: "1.2"
+  })));
+}
+
+var favoriteIcon = /*#__PURE__*/React.createElement("svg", {
+  width: "20px",
+  height: "20px",
+  viewBox: "0 0 20 20",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink"
+}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("rect", {
+  x: "0",
+  y: "0",
+  width: "20",
+  height: "20"
+})), /*#__PURE__*/React.createElement("g", {
+  stroke: "none",
+  strokeWidth: "1",
+  fill: "none",
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("g", {
+  transform: "translate(-1398.000000, -481.000000)"
+}, /*#__PURE__*/React.createElement("g", {
+  transform: "translate(1398.000000, 481.000000)"
+}, /*#__PURE__*/React.createElement("mask", {
+  fill: "white"
+}, /*#__PURE__*/React.createElement("use", {
+  xlinkHref: "#path-1"
+})), /*#__PURE__*/React.createElement("use", {
+  fillOpacity: "0",
+  fill: "#C4C4C4",
+  xlinkHref: "#path-1"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M17.4350762,7.192388 L17.4350762,13.192388 C17.4350762,15.9538117 15.1964999,18.192388 12.4350762,18.192388 C9.67365243,18.192388 7.43507618,15.9538117 7.43507618,13.192388 L7.43507618,7.192388 C7.43507618,4.43096425 9.67365243,2.192388 12.4350762,2.192388 C15.1964999,2.192388 17.4350762,4.43096425 17.4350762,7.192388 Z",
+  fill: "currentColor",
+  opacity: "0.5",
+  mask: "url(#mask-2)",
+  transform: "translate(12.435076, 10.192388) rotate(45.000000) translate(-12.435076, -10.192388) "
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M13.192388,7.19236523 L13.192388,13.1923652 C13.192388,15.953789 10.9538117,18.1923652 8.192388,18.1923652 C5.43096425,18.1923652 3.192388,15.953789 3.192388,13.1923652 L3.192388,7.19236523 C3.192388,4.43094148 5.43096425,2.19236523 8.192388,2.19236523 C10.9538117,2.19236523 13.192388,4.43094148 13.192388,7.19236523 Z",
+  fill: "currentColor",
+  fillRule: "nonzero",
+  mask: "url(#mask-2)",
+  transform: "translate(8.192388, 10.192365) rotate(-45.000000) translate(-8.192388, -10.192365) "
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M6,6 C5.5,6 4,6.5 4,8.5",
+  stroke: "#F2F2F2",
+  strokeLinecap: "round",
+  strokeDasharray: "0,0",
+  mask: "url(#mask-2)"
+})))));
 export default function Menu(props) {
   var menus = props.data,
-      onClick = props.onClick;
+      onClick = props.onClick,
+      onFavoritesChange = props.onFavoritesChange,
+      _props$favorites = props.favorites,
+      favorites = _props$favorites === void 0 ? [] : _props$favorites;
   var location = window.location;
 
   var _useState = useState(null),
@@ -67,6 +224,7 @@ export default function Menu(props) {
       top = _useState8[0],
       setTop = _useState8[1];
 
+  var FAVORITES_POPOVER = 'FAVORITES_POPOVER';
   var activeMenu = useMemo(function () {
     var check = function check(path) {
       if (path) {
@@ -115,7 +273,7 @@ export default function Menu(props) {
   }, [location.pathname, menus]);
 
   var openMenu = function openMenu(item, elm) {
-    if (item.children !== undefined && item.children.length > 0 || collapsed) {
+    if (item.name === FAVORITES_POPOVER || item.children !== undefined && item.children.length > 0 || collapsed) {
       setPopover(item);
       setTop(elm.offsetTop);
       setTimeout(function () {
@@ -210,14 +368,52 @@ export default function Menu(props) {
     }
   };
 
+  var favoritesMap = useMemo(function () {
+    return new Map(favorites.map(function (item) {
+      return [item.path || '', item];
+    }));
+  }, [favorites]);
+
+  var toggleFavorite = function toggleFavorite(e, item) {
+    e.stopPropagation();
+    var nextMap = new Map(favoritesMap);
+    var key = item.path || '';
+
+    if (nextMap.has(key)) {
+      nextMap.delete(key);
+    } else {
+      nextMap.set(key, {
+        name: item.name,
+        path: item.path
+      });
+    }
+
+    if (onFavoritesChange) {
+      onFavoritesChange(_toConsumableArray(nextMap.values()));
+    }
+  };
+
   var renderItem = function renderItem(item, index) {
+    var favorited = favoritesMap.has(item.path || '');
     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);
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        overflow: 'hidden'
+      }
+    }, item.name), /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(prefixCls, "-menu-item-favorite"), _defineProperty({}, "".concat(prefixCls, "-menu-item-favorite-active"), favorited)),
+      onClick: function onClick(e) {
+        toggleFavorite(e, item);
+      }
+    }, /*#__PURE__*/React.createElement(Star, {
+      className: "".concat(prefixCls, "-menu-favorite-star"),
+      active: favorited
+    })));
   };
 
   var renderDrawerItems = function renderDrawerItems() {
@@ -285,7 +481,7 @@ export default function Menu(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-bar"),
     onMouseLeave: function onMouseLeave() {
-      return toggle(closeMenu);
+      toggle(closeMenu);
     }
   }, popover !== null && /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-popup"),
@@ -296,7 +492,14 @@ export default function Menu(props) {
     onMouseEnter: function onMouseEnter() {
       return toggle.cancel();
     }
-  }, popover.children !== undefined ? /*#__PURE__*/React.createElement("div", {
+  }, popover.children !== undefined ? popover.name === FAVORITES_POPOVER ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-popup-body"),
+    key: "pop"
+  }, popover.children !== undefined && popover.children.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-block-favorite")
+  }, popover.children.map(renderItem)) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-block-empty")
+  }, /*#__PURE__*/React.createElement(FavoritesEmpty, null), /*#__PURE__*/React.createElement("span", null, "\u6682\u65E0\u6536\u85CF"))) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-popup-body"),
     key: "pop"
   }, popover.children.map(function (item, index) {
@@ -341,11 +544,11 @@ export default function Menu(props) {
     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;
+    var _classNames6;
 
     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)),
+      className: classNames("".concat(prefixCls, "-menu-top-item"), (_classNames6 = {}, _defineProperty(_classNames6, "".concat(prefixCls, "-menu-top-item-active"), activeMenu !== undefined && activeMenu.path[0] === index), _defineProperty(_classNames6, "".concat(prefixCls, "-menu-top-item-popover-active"), item === popover), _classNames6)),
       onClick: function onClick() {
         return handleClick(item);
       },
@@ -363,7 +566,32 @@ export default function Menu(props) {
     }, item.icon), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-menu-title")
     }, item.name));
-  })), false && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-menu-divider-div"), _defineProperty({}, "".concat(prefixCls, "-menu-divider-div-collapsed"), collapsed))
+  }, /*#__PURE__*/React.createElement(Divider, {
+    className: "".concat(prefixCls, "-menu-divider")
+  })), !collapsed ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-other-title")
+  }, "\u529F\u80FD\u7BA1\u7406") : null, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-menu-top-item"), _defineProperty({}, "".concat(prefixCls, "-menu-top-item-popover-active"), (popover === null || popover === void 0 ? void 0 : popover.name) === FAVORITES_POPOVER)),
+    onMouseEnter: function onMouseEnter(e) {
+      var target = e.currentTarget;
+      toggle(function () {
+        return openMenu({
+          name: 'FAVORITES_POPOVER',
+          children: _toConsumableArray(favoritesMap.values())
+        }, target);
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-icon")
+  }, favoriteIcon), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-title")
+  }, "\u6536\u85CF")), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-menu-divider-div"), _defineProperty({}, "".concat(prefixCls, "-menu-divider-div-collapsed"), collapsed))
+  }, /*#__PURE__*/React.createElement(Divider, {
+    className: "".concat(prefixCls, "-menu-divider")
+  }))), 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"),

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

@@ -92,6 +92,10 @@
     font-size: 16px;
   }
 
+  &-favorite-star {
+    color: var(--ant-primary-color);
+  }
+
   &-title {
     overflow: hidden;
     white-space: nowrap;
@@ -120,7 +124,7 @@
       display: flex;
       margin-left: 4px;
       padding: 8px;
-      background: #f9f9f9;
+      background: #fff;
       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);
@@ -158,15 +162,24 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      height: 100%;
-      padding: 0 16px;
-      writing-mode: horizontal-tb;
+      width: 256px;
+      height: 180px;
 
       & > span {
-        color: rgba(51, 51, 51, 0.65);
-        font-size: 12px;
+        margin-top: 24px;
+        color: #333333;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        opacity: 0.5;
       }
     }
+
+    &-favorite {
+      display: grid;
+      grid-auto-flow: column;
+      grid-template-rows: repeat(5, auto);
+    }
   }
 
   &-sub-item {
@@ -187,7 +200,7 @@
     box-sizing: border-box;
     width: 120px;
     height: 40px;
-    padding: 0 16px;
+    padding: 9px 4px 9px 16px;
     color: rgba(51, 51, 51, 1);
     font-size: 14px;
     line-height: 40px;
@@ -234,6 +247,29 @@
     line-height: 22px;
   }
 
+  &-divider-div {
+    padding-left: 16px;
+  }
+
+  &-divider-div-collapsed {
+    padding-right: 12px;
+    padding-left: 12px;
+  }
+
+  &-divider {
+    margin-top: 12px;
+    margin-bottom: 16px;
+  }
+
+  &-other-title {
+    margin: 0 0 8px 16px;
+    color: #000000;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    opacity: 0.5;
+  }
+
   &-more {
     display: flex;
     align-items: center;

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

@@ -9,10 +9,10 @@
   &::before {
     position: absolute;
     top: 0;
-    left: 6px;
+    left: 0;
     z-index: 4;
     display: block;
-    width: 10px;
+    width: 16px;
     height: 100%;
     background-color: #fff;
     border-bottom-right-radius: 10px;
@@ -22,10 +22,10 @@
   &::after {
     position: absolute;
     top: 0;
-    right: 6px;
+    right: 0;
     z-index: 4;
     display: block;
-    width: 10px;
+    width: 16px;
     height: 100%;
     background-color: #fff;
     border-bottom-left-radius: 10px;
@@ -36,7 +36,7 @@
 .@{prefixCls}-nav-tab {
   position: relative;
   box-sizing: content-box;
-  min-width: 14px;
+  min-width: 66px;
   max-width: 120px;
   height: 43px;
   cursor: pointer;
@@ -109,7 +109,7 @@
 
   &-inner {
     flex: 1;
-    min-width: 0;
+    min-width: 28px;
     overflow: hidden;
     color: #333;
     font-size: 14px;

package/es/MainFramework/index.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from 'react';
-import type { MenuItem } from './typings';
+import type { MenuFavorites, MenuItem } from './typings';
 interface Props<T> {
     active: number;
     tabs: T[];
@@ -11,6 +11,8 @@ interface Props<T> {
     children?: ReactNode;
     logo?: string | false | ReactElement;
     title: string | ReactNode;
+    favorites?: MenuFavorites;
+    onFavoritesChange?: (value: MenuFavorites) => void;
 }
 export default function MainFramework<TabType extends {
     title: string;

package/es/MainFramework/index.js

@@ -1,7 +1,21 @@
-import React from 'react';
+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, useRef, useState } from 'react';
 import TabBar from './components/TabBar';
 import Menu from './components/Menu';
 import { PREFIX_CLS as prefixCls } from '../constants';
+import DownBar from './components/DownBar';
+import { useDebounce } from '@lemon-fe/hooks';
 export default function MainFramework(props) {
   var tabs = props.tabs,
       active = props.active,
@@ -12,11 +26,48 @@ export default function MainFramework(props) {
       onMenuClick = props.onMenuClick,
       onTabClose = props.onTabClose,
       logo = props.logo,
-      title = props.title;
+      title = props.title,
+      favorites = props.favorites,
+      onFavoritesChange = props.onFavoritesChange;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hideTabs = _useState2[0],
+      setHideTabs = _useState2[1];
+
+  var tabRef = useRef(null);
+  var handleDownBar = useDebounce(function () {
+    var _tabRef$current$query, _tabRef$current$query2;
+
+    if (tabRef.current === null) {
+      return;
+    }
+
+    var leftLength = (_tabRef$current$query = tabRef.current.querySelector(".".concat(prefixCls, "-nav-left"))) === null || _tabRef$current$query === void 0 ? void 0 : _tabRef$current$query.offsetWidth;
+    var rightLength = (_tabRef$current$query2 = tabRef.current.querySelector(".".concat(prefixCls, "-nav-right"))) === null || _tabRef$current$query2 === void 0 ? void 0 : _tabRef$current$query2.offsetWidth;
+    var minWidth = 66 * tabs.length + 32;
+    var width = window.innerWidth - (leftLength || 0) - (rightLength || 0);
+
+    if (tabs.length && minWidth >= width) {
+      setHideTabs(true);
+    } else if (minWidth < width) {
+      setHideTabs(false);
+    }
+  }, 300);
+  useEffect(function () {
+    window.addEventListener('resize', handleDownBar);
+    return function () {
+      window.removeEventListener('resize', handleDownBar);
+    };
+  }, []);
+  useEffect(function () {
+    handleDownBar();
+  }, [tabs, active]);
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-main")
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-nav")
+    className: "".concat(prefixCls, "-nav"),
+    ref: tabRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-nav-left")
   }, logo !== false && /*#__PURE__*/React.createElement("div", {
@@ -41,11 +92,19 @@ export default function MainFramework(props) {
     onClose: onTabClose
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-nav-right")
-  }, right)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(DownBar, {
+    visible: hideTabs,
+    tabs: tabs,
+    active: active,
+    onClick: onTabClick,
+    onClose: onTabClose
+  }), right)), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-body")
   }, /*#__PURE__*/React.createElement(Menu, {
     data: menus,
-    onClick: onMenuClick
+    onClick: onMenuClick,
+    favorites: favorites,
+    onFavoritesChange: onFavoritesChange
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-content")
   }, children)));

package/es/MainFramework/index.less

@@ -1,5 +1,6 @@
 @import './components/Menu/index.less';
 @import './components/TabBar/index.less';
+@import './components/DownBar/index.less';
 
 .@{prefixCls}-main {
   display: flex;
@@ -14,9 +15,10 @@
   position: relative;
   z-index: 4;
   display: flex;
+  flex-wrap: nowrap;
   align-items: center;
   box-sizing: border-box;
-  width: 100vw;
+  width: 100%;
   height: 50px;
   padding: 0 16px;
   background: #ffff;
@@ -54,8 +56,8 @@
   }
 
   &-right {
+    flex-shrink: 0;
     justify-content: flex-end;
-    min-width: 180px;
     margin-left: auto;
   }
 }

package/es/MainFramework/typings.d.ts

@@ -6,3 +6,5 @@ export type MenuItem = {
   icon?: string | ReactElement;
   children?: MenuItem[];
 };
+
+export type MenuFavorites = { name: string; path?: string }[];

package/es/Popup/index.d.ts

@@ -16,6 +16,7 @@ export interface PopupProps<ValueType> extends ModalProps {
     showLabel?: boolean;
     placeholder?: string;
     disabledTip?: string;
+    bordered?: boolean;
     onClick?: () => void;
 }
 interface ValuedPopupProps<ValueType> extends Omit<PopupProps<ValueType>, 'value' | 'onChange'> {

package/es/Popup/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["value", "onChange", "component", "children", "formatLabel", "disabled", "allowClear", "autoFocus", "showLabel", "beforeOk", "placeholder", "onClick", "disabledTip"];
+var _excluded = ["value", "onChange", "component", "children", "formatLabel", "disabled", "allowClear", "autoFocus", "showLabel", "beforeOk", "placeholder", "onClick", "disabledTip", "bordered"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -49,6 +49,8 @@ function Popup(props) {
       placeholder = props.placeholder,
       onClick = props.onClick,
       disabledTip = props.disabledTip,
+      _props$bordered = props.bordered,
+      bordered = _props$bordered === void 0 ? true : _props$bordered,
       restProps = _objectWithoutProperties(props, _excluded);
 
   var prefixCls = "".concat(PREFIX_CLS, "-popup");
@@ -160,6 +162,7 @@ function Popup(props) {
       disabled: disabled,
       autoFocus: autoFocus,
       placeholder: placeholder,
+      bordered: bordered,
       suffix: /*#__PURE__*/React.createElement(React.Fragment, null, !disabled && allowClear && label && /*#__PURE__*/React.createElement(CloseCircleFilled, {
         className: "ant-input-clear-icon",
         onClick: handleClear

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.0.19",
+  "version": "0.0.23",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -16,7 +16,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@lemon-fe/hooks": "^0.0.19",
+    "@lemon-fe/hooks": "^0.0.23",
     "antd": "^4.17.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
@@ -39,5 +39,5 @@
     "@types/lodash": "^4.14.179",
     "@types/react-resizable": "^1.7.4"
   },
-  "gitHead": "d8fb8deb89c0064c02ae23a664462780696ae008"
+  "gitHead": "51cd80caa890be326c23be9c84fa1dfb42226e8c"
 }