@lemon-fe/components 0.1.91 → 0.1.93

package/es/Layout/index.less

@@ -106,6 +106,8 @@
     flex-direction: column;
     min-width: 0;
     overflow: auto;
+
+    .scrollBar(8px);
   }
 
   &-footer {

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

@@ -209,6 +209,7 @@ export default function Menu(props) {
       setPopover = _useState2[1];
 
   var popup = useRef(null);
+  var popupContainer = useRef(null);
   var drawer = useRef(null);
   var clientWidth = useRef(document.body.clientWidth);
 
@@ -275,9 +276,13 @@ export default function Menu(props) {
   }, [location.pathname, menus]);
 
   var openMenu = function openMenu(item, elm) {
-    if (item.name === FAVORITES_POPOVER || item.children !== undefined && item.children.length > 0 || collapsed) {
+    var isFavorite = item.name === FAVORITES_POPOVER;
+
+    if (isFavorite || item.children !== undefined && item.children.length > 0 || collapsed) {
+      var _popupContainer$curre;
+
       setPopover(item);
-      setTop(elm.offsetTop);
+      setTop(elm.offsetTop - (isFavorite ? 0 : ((_popupContainer$curre = popupContainer.current) === null || _popupContainer$curre === void 0 ? void 0 : _popupContainer$curre.scrollTop) || 0));
       setTimeout(function () {
         if (popup.current) {
           popup.current.classList.add('animated');
@@ -563,12 +568,15 @@ export default function Menu(props) {
     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) {
+  })))))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-top-items"),
+    ref: popupContainer
+  }, 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)),
+      className: classNames("".concat(prefixCls, "-menu-top-item"), (_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefixCls, "-menu-top-item-active"), (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.path[0]) === index), _defineProperty(_classNames5, "".concat(prefixCls, "-menu-top-item-popover-active"), item === popover), _classNames5)),
       onClick: function onClick() {
         return handleClick(item);
       },
@@ -578,6 +586,8 @@ export default function Menu(props) {
           return openMenu(item, target);
         });
       }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-menu-top-item-content")
     }, typeof item.icon === 'string' ? /*#__PURE__*/React.createElement("img", {
       className: "".concat(prefixCls, "-menu-icon"),
       src: item.icon
@@ -585,8 +595,8 @@ export default function Menu(props) {
       className: "".concat(prefixCls, "-menu-icon")
     }, item.icon), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-menu-title")
-    }, item.name));
-  }), /*#__PURE__*/React.createElement("div", {
+    }, item.name)));
+  })), /*#__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")
@@ -603,11 +613,13 @@ export default function Menu(props) {
         }, target);
       });
     }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-top-item-content")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-icon")
   }, favoriteIcon), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-menu-title")
-  }, "\u6536\u85CF"))), false && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, "\u6536\u85CF")))), 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

@@ -17,8 +17,11 @@
   &-bar {
     position: relative;
     z-index: 3;
+    display: flex;
+    flex-direction: column;
     box-sizing: border-box;
     width: 100%;
+    height: 100%;
     background: #f2f2f2;
   }
 
@@ -49,11 +52,17 @@
     left: 52px;
   }
 
+  &-top-items {
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .scrollBar();
+  }
+
   &-top-item {
-    display: flex;
-    align-items: center;
     box-sizing: border-box;
     height: 44px;
+    min-height: 44px;
     padding: 0 16px;
     overflow: hidden;
     color: #333;
@@ -62,6 +71,15 @@
     cursor: pointer;
     .transition();
 
+    &-content {
+      position: relative;
+      left: 50%;
+      display: flex;
+      align-items: center;
+      height: 100%;
+      transform: translateX(-50%);
+    }
+
     &:hover,
     &-popover-active {
       background: #e6e6e6;
@@ -84,6 +102,12 @@
     }
   }
 
+  &-collapsed &-top-item-content {
+    width: 100%;
+    min-width: 20px;
+    overflow: hidden;
+  }
+
   &-icon {
     width: 20px;
     height: 20px;

package/es/overrides.less

@@ -34,18 +34,7 @@ a[title='站长统计'] {
 }
 
 .ant-table-body {
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #ddd;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: #fff;
-  }
+  .scrollBar(8px);
 }
 
 .ant-table-tbody > tr.ant-table-row-selected > td {

package/es/utils.less

@@ -89,3 +89,22 @@
     }
   }
 }
+
+.scrollBar (@width: 6px) {
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: @width;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: #fff;
+    border-radius: 10px; // 滑块颜色
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #ddd;
+    border-radius: 10px; // 滑块颜色
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.1.91",
+  "version": "0.1.93",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -39,5 +39,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "407f33c49a0de8ae9b3fc07002ee9eace8dbd179"
+  "gitHead": "6c934e2c6083e08ec81d7436e6a8eac6fe37da5f"
 }