@jetlinks-web/components 3.0.1-rc → 3.0.1

package/lib/ProLayout/SiderMenu/BaseMenu.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.baseMenuProps = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _vue = require("vue");
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _vue = require("vue");
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _defaultSettings = require("../defaultSettings");
 var _RouteContext = require("../RouteContext");
@@ -17,10 +17,6 @@ var _Icon = _interopRequireDefault(require("../../Icon"));
 var _utils = require("@jetlinks-web/utils");
 var _antDesignVue = require("ant-design-vue");
 var _iconsVue = require("@ant-design/icons-vue/lib/icons");
-require("ant-design-vue/es/_util/vue-types");
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
-}
 var baseMenuProps = exports.baseMenuProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), {}, {
   prefixCls: {
     type: String,
@@ -124,8 +120,7 @@ var MenuUtil = /*#__PURE__*/(0, _createClass2.default)(function MenuUtil(_props,
   });
   (0, _defineProperty2.default)(this, "getSubMenuOrItem", function (item) {
     var _item$meta, _item$meta2, _item$meta7, _item$meta8;
-    if (Array.isArray(item.children) && item.children.length > 0 && !(item === null || item === void 0 ? void 0 : (_item$meta = item.meta) === null || _item$meta === void 0 ? void 0 : _item$meta.hideInMenu) && !(item === null || item === void 0 ? void 0 : (_item$meta2 = item.meta) === null || _item$meta2 === void 0 ? void 0 : _item$meta2.hideChildrenInMenu)) {
-      var _slot;
+    if (Array.isArray(item.children) && item.children.length > 0 && !(item !== null && item !== void 0 && (_item$meta = item.meta) !== null && _item$meta !== void 0 && _item$meta.hideInMenu) && !(item !== null && item !== void 0 && (_item$meta2 = item.meta) !== null && _item$meta2 !== void 0 && _item$meta2.hideChildrenInMenu)) {
       var _item$meta3, _item$meta4, _item$meta5, _item$meta6;
       if (_this.props.subMenuItemRender) {
         var subMenuItemRender = (0, _vue.withCtx)(_this.props.subMenuItemRender, _this.ctx);
@@ -138,32 +133,24 @@ var MenuUtil = /*#__PURE__*/(0, _createClass2.default)(function MenuUtil(_props,
         prefixCls = _this$props.prefixCls,
         locale = _this$props.locale;
       var menuTitle = locale && locale((_item$meta3 = item.meta) === null || _item$meta3 === void 0 ? void 0 : _item$meta3.title) || ((_item$meta4 = item.meta) === null || _item$meta4 === void 0 ? void 0 : _item$meta4.title);
-      var defaultTitle = ((_item$meta5 = item.meta) === null || _item$meta5 === void 0 ? void 0 : _item$meta5.icon) ? (0, _vue.createVNode)("span", {
+      var defaultTitle = (_item$meta5 = item.meta) !== null && _item$meta5 !== void 0 && _item$meta5.icon ? (0, _vue.createVNode)("span", {
         "class": "".concat(prefixCls, "-menu-item")
       }, [(0, _vue.createVNode)("span", {
         "class": "".concat(prefixCls, "-menu-item-title")
-      }, _isSlot(menuTitle) ? menuTitle : {
-        default: function _default() {
-          return [menuTitle];
-        }
-      })]) : (0, _vue.createVNode)("span", {
+      }, [menuTitle])]) : (0, _vue.createVNode)("span", {
         "class": "".concat(prefixCls, "-menu-item")
-      }, _isSlot(menuTitle) ? menuTitle : {
-        default: function _default() {
-          return [menuTitle];
-        }
-      });
+      }, [menuTitle]);
       return (0, _vue.createVNode)(_antDesignVue.Menu.SubMenu, {
         "title": defaultTitle,
-        "key": item.path,
+        "key": item.key || item.path,
         "popupClassName": "".concat(prefixCls, "-menu-popup"),
         "icon": (0, _vue.createVNode)(LazyIcon, {
           "iconUrl": _this.props.iconfontUrl,
           "icon": (_item$meta6 = item.meta) === null || _item$meta6 === void 0 ? void 0 : _item$meta6.icon
         }, null)
-      }, _isSlot(_slot = _this.getNavMenuItems(item.children)) ? _slot : {
+      }, {
         default: function _default() {
-          return [_slot];
+          return [_this.getNavMenuItems(item.children)];
         }
       });
     }
@@ -179,16 +166,15 @@ var MenuUtil = /*#__PURE__*/(0, _createClass2.default)(function MenuUtil(_props,
     }) || (0, _vue.createVNode)(_antDesignVue.Menu.Item, {
       "disabled": (_item$meta7 = item.meta) === null || _item$meta7 === void 0 ? void 0 : _item$meta7.disabled,
       "danger": (_item$meta8 = item.meta) === null || _item$meta8 === void 0 ? void 0 : _item$meta8.danger,
-      "key": item.path
-    }, _isSlot(title) ? title : {
+      "key": item.key || item.path
+    }, {
       default: function _default() {
         return [title];
       }
     });
   });
   (0, _defineProperty2.default)(this, "getMenuItem", function (item) {
-    var _slot2;
-    var _item$meta9, _item$meta10, _item$meta11, _item$meta12, _item$meta13;
+    var _item$meta9, _item$meta0, _item$meta1, _item$meta10, _item$meta11;
     var meta = (0, _objectSpread2.default)({}, item.meta);
     var target = meta.target || null;
     var hasUrl = _utils.regular.isUrl(item.path);
@@ -207,30 +193,22 @@ var MenuUtil = /*#__PURE__*/(0, _createClass2.default)(function MenuUtil(_props,
       locale = _this$props2.locale;
     var icon = ((_item$meta9 = item.meta) === null || _item$meta9 === void 0 ? void 0 : _item$meta9.icon) && (0, _vue.createVNode)(LazyIcon, {
       "iconUrl": _this.props.iconfontUrl,
-      "icon": (_item$meta10 = item.meta) === null || _item$meta10 === void 0 ? void 0 : _item$meta10.icon
+      "icon": (_item$meta0 = item.meta) === null || _item$meta0 === void 0 ? void 0 : _item$meta0.icon
     }, null) || undefined;
-    var menuTitle = locale && locale((_item$meta11 = item.meta) === null || _item$meta11 === void 0 ? void 0 : _item$meta11.title) || ((_item$meta12 = item.meta) === null || _item$meta12 === void 0 ? void 0 : _item$meta12.title);
-    var defaultTitle = ((_item$meta13 = item.meta) === null || _item$meta13 === void 0 ? void 0 : _item$meta13.icon) ? (0, _vue.createVNode)(CustomTag, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), props), {}, {
+    var menuTitle = locale && locale((_item$meta1 = item.meta) === null || _item$meta1 === void 0 ? void 0 : _item$meta1.title) || ((_item$meta10 = item.meta) === null || _item$meta10 === void 0 ? void 0 : _item$meta10.title);
+    var defaultTitle = (_item$meta11 = item.meta) !== null && _item$meta11 !== void 0 && _item$meta11.icon ? (0, _vue.createVNode)(CustomTag, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), props), {}, {
       "class": "".concat(prefixCls, "-menu-item")
     }), {
       default: function _default() {
         return [icon, (0, _vue.createVNode)("span", {
           "class": "".concat(prefixCls, "-menu-item-title")
-        }, _isSlot(menuTitle) ? menuTitle : {
-          default: function _default() {
-            return [menuTitle];
-          }
-        })];
+        }, [menuTitle])];
       }
     }) : (0, _vue.createVNode)(CustomTag, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), props), {}, {
       "class": "".concat(prefixCls, "-menu-item")
-    }), _isSlot(_slot2 = (0, _vue.createVNode)("span", null, _isSlot(menuTitle) ? menuTitle : {
-      default: function _default() {
-        return [menuTitle];
-      }
-    })) ? _slot2 : {
+    }), {
       default: function _default() {
-        return [_slot2];
+        return [(0, _vue.createVNode)("span", null, [menuTitle])];
       }
     });
     return [defaultTitle, icon];
@@ -268,7 +246,6 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
       emit('click', args);
     };
     return function () {
-      var _slot3;
       return (0, _vue.createVNode)(_antDesignVue.Menu, (0, _objectSpread2.default)({
         "key": "Menu",
         "inlineIndent": 16,
@@ -279,9 +256,9 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
         "onOpenChange": handleOpenChange,
         "onSelect": handleSelect,
         "onClick": handleClick
-      }, props.menuProps), _isSlot(_slot3 = menuUtil.getNavMenuItems(props.menuData)) ? _slot3 : {
+      }, props.menuProps), {
         default: function _default() {
-          return [_slot3];
+          return [menuUtil.getNavMenuItems(props.menuData)];
         }
       });
     };

package/lib/ProLayout/SiderMenu/SiderMenu.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.siderMenuProps = exports.defaultRenderLogoAndTitle = exports.defaultRenderLogo = exports.defaultRenderCollapsedButton = exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _vue = require("vue");
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _antDesignVue = require("ant-design-vue");
@@ -17,11 +18,8 @@ var _vueTypes = _interopRequireDefault(require("ant-design-vue/es/_util/vue-type
 var _Icon = _interopRequireDefault(require("../../Icon"));
 var _RouteContext = require("../RouteContext");
 require("../typings");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
-}
+var _style = _interopRequireDefault(require("../style"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var siderMenuProps = exports.siderMenuProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), _BaseMenu.baseMenuProps), {}, {
   logo: {
     type: [Object, String, Function],
@@ -154,11 +152,7 @@ var defaultRenderLogoAndTitle = exports.defaultRenderLogoAndTitle = function def
   if (layout === 'mix' && renderFunction === false) {
     return null;
   }
-  var titleDom = (0, _vue.createVNode)("h1", null, _isSlot(title) ? title : {
-    default: function _default() {
-      return [title];
-    }
-  });
+  var titleDom = (0, _vue.createVNode)("h1", null, [title]);
   if (renderKey === 'menuHeaderRender') {
     return null;
   }
@@ -168,11 +162,7 @@ var defaultRenderLogoAndTitle = exports.defaultRenderLogoAndTitle = function def
     return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
   }
   if (Array.isArray(renderFunction)) {
-    return (0, _vue.createVNode)(_vue.Fragment, null, _isSlot(renderFunction) ? renderFunction : {
-      default: function _default() {
-        return [renderFunction];
-      }
-    });
+    return (0, _vue.createVNode)(_vue.Fragment, null, [renderFunction]);
   }
   return (0, _vue.createVNode)("a", null, [logoDom, props.collapsed ? null : titleDom]);
 };
@@ -184,7 +174,6 @@ var defaultRenderCollapsedButton = exports.defaultRenderCollapsedButton = functi
   }, null);
 };
 var SiderMenu = function SiderMenu(props) {
-  var _slot;
   var collapsed = props.collapsed,
     siderWidth = props.siderWidth,
     breakpoint = props.breakpoint,
@@ -198,6 +187,13 @@ var SiderMenu = function SiderMenu(props) {
     collapsedButtonRender = _props$collapsedButto === void 0 ? defaultRenderCollapsedButton : _props$collapsedButto,
     linksRender = props.linksRender,
     theme = props.theme;
+  var prefixCls = (0, _vue.computed)(function () {
+    return 'pro-layout';
+  });
+  var _useProLayoutStyle = (0, _style.default)(prefixCls),
+    _useProLayoutStyle2 = (0, _slicedToArray2.default)(_useProLayoutStyle, 2),
+    wrapSSR = _useProLayoutStyle2[0],
+    hashId = _useProLayoutStyle2[1];
   var context = (0, _RouteContext.useRouteContext)();
   var getPrefixCls = context.getPrefixCls;
   var baseClassName = getPrefixCls('sider');
@@ -208,7 +204,7 @@ var SiderMenu = function SiderMenu(props) {
     return props.collapsed ? props.collapsedWidth : props.siderWidth;
   });
   var classNames = (0, _vue.computed)(function () {
-    return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, baseClassName, true), "".concat(baseClassName, "-fixed"), context.fixSiderbar), "".concat(baseClassName, "-").concat(theme), true), "".concat(baseClassName, "-layout-").concat(props.layout), props.layout);
+    return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, baseClassName, true), "".concat(baseClassName, "-fixed"), context.fixSiderbar), "".concat(baseClassName, "-").concat(theme), true), "".concat(baseClassName, "-layout-").concat(props.layout), props.layout), hashId.value, true);
   });
   var logCls = (0, _vue.computed)(function () {
     return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-logo"), true), "".concat(baseClassName, "-logo-card"), props.layoutType === _defaultSettings.LayoutType.CARD);
@@ -251,7 +247,6 @@ var SiderMenu = function SiderMenu(props) {
     },
     'onUpdate:selectedKeys': handleSelect
   }, null);
-  console.log('context', context.fixSiderbar);
   return (0, _vue.createVNode)(_vue.Fragment, null, [context.fixSiderbar && (0, _vue.createVNode)("div", {
     "style": {
       width: "".concat(sSideWidth.value, "px"),
@@ -286,17 +281,9 @@ var SiderMenu = function SiderMenu(props) {
         "onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
         "id": "logo",
         "style": props === null || props === void 0 ? void 0 : props.logoStyle
-      }, _isSlot(headerDom) ? headerDom : {
-        default: function _default() {
-          return [headerDom];
-        }
-      }), extraDom && (0, _vue.createVNode)("div", {
+      }, [headerDom]), extraDom && (0, _vue.createVNode)("div", {
         "class": (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-extra"), true), "".concat(baseClassName, "-extra-no-logo"), !headerDom)
-      }, _isSlot(extraDom) ? extraDom : {
-        default: function _default() {
-          return [extraDom];
-        }
-      }), (0, _vue.createVNode)("div", {
+      }, [extraDom]), (0, _vue.createVNode)("div", {
         "class": "".concat(baseClassName, "-body"),
         "style": "flex: 1; overflow: hidden auto;"
       }, [props.layoutType !== _defaultSettings.LayoutType.CARD ? menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), (0, _vue.createVNode)("div", {
@@ -313,17 +300,17 @@ var SiderMenu = function SiderMenu(props) {
             props.onCollapse(!props.collapsed);
           }
         }
-      }, _isSlot(_slot = (0, _vue.createVNode)(_antDesignVue.Menu.Item, {
-        "key": 'collapsed-button',
-        "class": "".concat(baseClassName, "-collapsed-button"),
-        "title": false
       }, {
         default: function _default() {
-          return [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender];
-        }
-      })) ? _slot : {
-        default: function _default() {
-          return [_slot];
+          return [(0, _vue.createVNode)(_antDesignVue.Menu.Item, {
+            "key": 'collapsed-button',
+            "class": "".concat(baseClassName, "-collapsed-button"),
+            "title": false
+          }, {
+            default: function _default() {
+              return [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender];
+            }
+          })];
         }
       }) : null])];
     }

package/lib/ProLayout/SiderMenu/style.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genSiderMenuStyle = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _antDesignVue = require("ant-design-vue");
+var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(config) {
+  var _$concat8;
+  var token = config.token;
+  var proLayoutSiderMenuCls = "".concat(token.antCls, "-pro-sider");
+  var proLayoutHeaderHeight = '48px';
+  var proLayoutTitleHideKeyframes = new _antDesignVue.Keyframes('pro-layout-title-hide', {
+    '0%': {
+      display: 'none',
+      opacity: 0
+    },
+    '80%': {
+      display: 'none',
+      opacity: 0
+    },
+    '100%': {
+      display: 'unset',
+      opacity: 1
+    }
+  });
+  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls), (_$concat8 = {
+    position: 'relative',
+    backgroundColor: '#001529',
+    borderRight: 0,
+    // FIXME: 临时修正(可能不会做兼容)
+    zIndex: 20
+  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat8, "".concat(token.antCls, "-menu"), {
+    background: 'transparent'
+  }), "&".concat(token.antCls, "-layout-sider-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-item a"), {
+    color: token.colorTextHeading
+  }), "".concat(token.antCls, "-menu-item-selected a, ").concat(token.antCls, "-menu-item a:hover"), {
+    color: token.colorPrimary
+  })), "".concat(proLayoutSiderMenuCls, "-logo"), {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    padding: '16px 16px',
+    cursor: 'pointer',
+    transition: 'padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+    '> a': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: 32
+    },
+    'img': {
+      display: 'inline-block',
+      height: 32,
+      verticalAlign: 'middle'
+    },
+    'h1': {
+      display: 'inline-block',
+      height: '32px',
+      margin: '0 0 0 12px',
+      color: 'white',
+      fontWeight: 600,
+      fontSize: '18px',
+      lineHeight: '32px',
+      verticalAlign: 'middle',
+      animationName: proLayoutTitleHideKeyframes,
+      animationDuration: '0.3s'
+    }
+  }), "".concat(proLayoutSiderMenuCls, "-logo-card"), {
+    padding: '16px 0',
+    justifyContent: 'center'
+  }), "".concat(proLayoutSiderMenuCls, "-extra"), (0, _defineProperty2.default)({
+    marginBottom: '16px',
+    padding: '0 16px'
+  }, "".concat(proLayoutSiderMenuCls, "-extra-no-logo"), {
+    marginTop: '16px'
+  })), "".concat(proLayoutSiderMenuCls, "-menu"), {
+    position: 'relative',
+    zIndex: 10,
+    minHeight: '100%',
+    boxShadow: '2px 0 6px rgba(0, 21, 41, 0.35)'
+  }), "".concat(token.antCls, "-layout-sider-children"), {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    '::-webkit-scrollbar': {
+      width: '6px',
+      height: '6px'
+    },
+    '::webkit-scrollbar-track': {
+      background: 'rgba(255, 255, 255, 0.15)',
+      borderRadius: '3px',
+      boxShadow: 'inset 0 0 5px rgba(37, 37, 37, 0.05)'
+    },
+    /* 滚动条滑块 */
+    '::-webkit-scrollbar-thumb': {
+      background: 'rgba(255, 255, 255, 0.2)',
+      borderRadius: '3px',
+      boxShadow: 'inset 0 0 5px rgba(255, 255, 255, 0.05)'
+    }
+  }), "&".concat(token.antCls, "-layout-sider-collapsed"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-inline-collapsed"), {
+    width: '48px'
+  }), "".concat(proLayoutSiderMenuCls), (0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls, "-logo"), {
+    padding: '16px 24px'
+  }))), "&".concat(token.antCls, "-layout-sider").concat(proLayoutSiderMenuCls, "-fixed"), (0, _defineProperty2.default)({
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    zIndex: 99,
+    height: '100%',
+    overflow: 'auto',
+    overflowX: 'hidden',
+    boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.05)'
+  }, "> ".concat(token.antCls, "-menu-root"), (0, _defineProperty2.default)({}, ":not".concat(proLayoutSiderMenuCls, "-link-menu"), {
+    height: "calc(100vh - ".concat(proLayoutHeaderHeight, ")"),
+    overflowY: 'auto'
+  }))), "".concat(proLayoutSiderMenuCls, "-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    backgroundColor: token.colorBgContainer,
+    boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.05)'
+  }, "".concat(token.antCls, "-layout-sider-children"), {
+    '::webkit-scrollbar-track': {
+      background: 'rgba(0, 0, 0, 0.06)',
+      borderRadius: '3px',
+      boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)',
+      /* 滚动条滑块 */
+      '::-webkit-scrollbar-thumb': {
+        background: 'rgba(0, 0, 0, 0.12)',
+        borderRadius: '3px',
+        boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)'
+      }
+    }
+  }), "".concat(proLayoutSiderMenuCls, "-logo"), {
+    'h1': {
+      color: token.colorPrimary
+    }
+  }), "".concat(token.antCls, "-menu-light"), {
+    borderRightColor: 'transparent'
+  }), "".concat(proLayoutSiderMenuCls, "-collapsed-button"), {
+    borderTop: "".concat(token.lineWidth, " solid ").concat(token.colorSplit)
+  })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat8, "".concat(proLayoutSiderMenuCls, "-icon"), {
+    width: '14px',
+    verticalAlign: 'baseline'
+  }), "".concat(proLayoutSiderMenuCls, "-link"), (0, _defineProperty2.default)({
+    width: '100%'
+  }, "ul".concat(token.antCls, "-menu-root"), {
+    height: 'auto'
+  })), "".concat(proLayoutSiderMenuCls, "-collapsed-button"), {
+    borderTop: "".concat(token.lineWidth, " solid rgba(0, 0, 0, 0.25)"),
+    '.anticon': {
+      fontSize: '16px'
+    }
+  }), ".top-nav-menu li".concat(token.antCls, "-menu-item"), {
+    height: '100%',
+    lineHeight: 1
+  }), '.drawer .drawer-content', {
+    background: "#001529"
+  }))), "".concat(token.antCls, "-pro-menu-item"), (0, _defineProperty2.default)({}, ".anticon".concat(token.antCls, "-pro-menu-item-title"), {
+    marginLeft: '10px'
+  })), '.sider-app-menus', {
+    width: '100px',
+    backgroundColor: '#fff',
+    cursor: 'pointer',
+    padding: '6px',
+    transition: 'all .3s',
+    borderRadius: '4px',
+    color: '#333',
+    '&:hover': {
+      backgroundColor: '#efefef'
+    }
+  });
+};

package/lib/ProLayout/TopHeader/index.js

@@ -5,21 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.topNavHeaderProps = exports.baseHeaderProps = exports.TopNavHeader = void 0;
-var _vue = require("vue");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _vue = require("vue");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _vcResizeObserver = _interopRequireDefault(require("ant-design-vue/es/vc-resize-observer"));
+var _vcResizeObserver = _interopRequireDefault(require("ant-design-vue/lib/vc-resize-observer"));
 var _SiderMenu = require("../SiderMenu/SiderMenu");
-var _vueTypes = _interopRequireDefault(require("ant-design-vue/es/_util/vue-types"));
+var _vueTypes = _interopRequireDefault(require("ant-design-vue/lib/_util/vue-types"));
 var _defaultSettings = require("../defaultSettings");
 var _RouteContext = require("../RouteContext");
 var _BaseMenu = _interopRequireDefault(require("../SiderMenu/BaseMenu"));
 var _util = require("../util");
+var _style = _interopRequireDefault(require("../style"));
 var _excluded = ["rightContentRender"];
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
-}
 var baseHeaderProps = exports.baseHeaderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), {}, {
   prefixCls: _vueTypes.default.string.def('ant-pro'),
   collapsed: _vueTypes.default.looseBool,
@@ -104,6 +103,13 @@ var TopNavHeader = exports.TopNavHeader = function TopNavHeader(props) {
     mode = props.mode;
   var context = (0, _RouteContext.useRouteContext)();
   var prefixCls = "".concat(propPrefixCls || _RouteContext.defaultPrefixCls, "-top-nav-header");
+  var stylePrefixCls = (0, _vue.computed)(function () {
+    return 'pro-layout';
+  });
+  var _useProLayoutStyle = (0, _style.default)(stylePrefixCls),
+    _useProLayoutStyle2 = (0, _slicedToArray2.default)(_useProLayoutStyle, 2),
+    wrapSSR = _useProLayoutStyle2[0],
+    hashId = _useProLayoutStyle2[1];
   var headerDom = (0, _SiderMenu.defaultRenderLogoAndTitle)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     collapsed: false
   }),
@@ -126,7 +132,7 @@ var TopNavHeader = exports.TopNavHeader = function TopNavHeader(props) {
     return props.layout === 'mix' && props.splitMenus ? 'horizontal' : mode;
   });
   var className = (0, _vue.computed)(function () {
-    return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, prefixCls, true), "light", props.theme === 'light'), "dark", props.theme === 'dark');
+    return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, prefixCls, true), hashId.value, true), "light", props.theme === 'light'), "dark", props.theme === 'dark');
   });
   var paddingLeft = (0, _vue.computed)(function () {
     return context.layoutType === _defaultSettings.LayoutType.PAD && props.collapsed ? context.headerLeftWidth + 'px' : 0;
@@ -146,11 +152,7 @@ var TopNavHeader = exports.TopNavHeader = function TopNavHeader(props) {
     "class": "".concat(prefixCls, "-logo"),
     "key": "logo",
     "id": "logo"
-  }, _isSlot(headerDom) ? headerDom : {
-    default: function _default() {
-      return [headerDom];
-    }
-  })]), (0, _vue.createVNode)("div", {
+  }, [headerDom])]), (0, _vue.createVNode)("div", {
     "style": {
       flex: 1
     },

package/lib/ProLayout/TopHeader/style.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genTopHeaderStyle = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(config) {
+  var token = config.token;
+  var topNavHeaderCls = "".concat(token.antCls, "-pro-top-nav-header");
+  var proLayoutGlobalHeaderCls = "".concat(token.antCls, "-pro-global-header");
+  var proLayoutHeaderBg = token.colorBgContainer;
+  var proLayoutHeaderHoverBg = token.colorBgContainer;
+  var proLayoutHeaderBoxShadow = '0 1px 4px rgba(0, 21, 41, 0.08)';
+  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, proLayoutGlobalHeaderCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+    padding: '0 16px',
+    backgroundColor: proLayoutHeaderBg,
+    boxShadow: proLayoutHeaderBoxShadow,
+    '> *': {
+      height: '100%'
+    }
+  }, "".concat(proLayoutGlobalHeaderCls, "-coppapsed-button"), {
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: '16px',
+    fontSize: '20px'
+  }), "".concat(proLayoutGlobalHeaderCls, "-layout"), (0, _defineProperty2.default)({}, "".concat(proLayoutGlobalHeaderCls, "-layout-mix"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    backgroundColor: '#001529'
+  }, "".concat(proLayoutGlobalHeaderCls, "-logo"), {
+    'h1': {
+      color: '#fff'
+    }
+  }), '.anticon', {
+    color: '#fff'
+  }))), "".concat(proLayoutGlobalHeaderCls, "-logo"), {
+    position: 'relative',
+    overflow: 'hidden',
+    a: {
+      display: 'flex',
+      alignItems: 'center',
+      height: '100%',
+      img: {
+        height: '28px'
+      },
+      h1: {
+        height: '32px',
+        margin: '0 0 0 12px',
+        color: token.colorPrimary,
+        fontWeight: 600,
+        fontSize: '18px',
+        lineHeight: '32px'
+      }
+    }
+  }), "".concat(proLayoutGlobalHeaderCls, "-menu"), (0, _defineProperty2.default)({
+    '.anticon': {
+      marginRight: '8px'
+    }
+  }, "".concat(token.antCls, "-dropdown-menu-item"), {
+    minWidth: '160px'
+  })), '.dark', {
+    height: '48px',
+    '.action': (0, _defineProperty2.default)({
+      color: 'rgba(255, 255, 255, 0.85)',
+      '> i': {
+        color: 'rgba(255, 255, 255, 0.85)'
+      },
+      '&:hover,&.opend': {
+        background: token.colorPrimary
+      }
+    }, "".concat(token.antCls, "-badge"), {
+      color: 'rgba(255, 255, 255, 0.85)'
+    })
+  })), topNavHeaderCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    boxShadow: '0 1px 4px 0 rgba(0, 21, 41, 0.12)',
+    transition: 'background 0.3s, width 0.2s'
+  }, "".concat(token.antCls, "-menu"), {
+    backgroundColor: 'transparent'
+  }), '&.light', (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    backgroundColor: token.colorBgContainer
+  }, "".concat(topNavHeaderCls, "-logo"), {
+    h1: {
+      color: token.colorTextHeading
+    }
+  }), '.anticon', {
+    color: 'inherit'
+  })), "".concat(topNavHeaderCls, "-main"), (0, _defineProperty2.default)({
+    display: 'flex',
+    height: '100%',
+    paddingLeft: '16px'
+  }, "".concat(topNavHeaderCls, "-main-left"), {
+    display: 'flex',
+    minWidth: '192px'
+  })), '.anticon', {
+    color: '#fff'
+  }), "".concat(topNavHeaderCls, "-logo"), {
+    position: 'relative',
+    minWidth: '165px',
+    height: '100%',
+    overflow: 'hidden',
+    img: {
+      display: 'inline-block',
+      height: '32px',
+      verticalAlign: 'middle'
+    },
+    h1: {
+      display: 'inline-block',
+      margin: '0 0 0 12px',
+      color: token.colorPrimary,
+      fontWeight: 600,
+      fontSize: '16px',
+      verticalAlign: 'top'
+    }
+  }), "".concat(topNavHeaderCls, "-menu"), (0, _defineProperty2.default)({
+    minWidth: 0
+  }, "".concat(token.antCls, "-menu").concat(token.antCls, "-meu-horizontal"), (0, _defineProperty2.default)({
+    height: '100%',
+    border: 'none'
+  }, "".concat(token.antCls, "-menu-item"), (0, _defineProperty2.default)({
+    height: '100%'
+  }, "".concat(token.antCls, "-badge"), {
+    color: 'unset'
+  }))))), "".concat(token.antCls, "-pro-menu-popup"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-badge"), {
+    color: 'unset'
+  }));
+};