@jetlinks-web/components 3.0.0-rc → 3.0.0

package/lib/ProLayout/PageContainer/style.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genPageContainerStyle = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var genPageContainerStyle = exports.genPageContainerStyle = function genPageContainerStyle(config) {
+  var token = config.token;
+  var proLayoutPageContainerCls = "".concat(token.antCls, "-pro-page-container");
+  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutPageContainerCls, "-children-content"), {
+    margin: '24px 24px 0'
+  }), "".concat(proLayoutPageContainerCls), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutPageContainerCls, "-warp"), (0, _defineProperty2.default)({
+    backgroundColor: token.colorBgContainer
+  }, "".concat(token.antCls, "-tabs-bar"), {
+    margin: 0
+  })), "".concat(proLayoutPageContainerCls, "-ghost"), (0, _defineProperty2.default)({}, "".concat(proLayoutPageContainerCls, "-warp"), {
+    backgroundColor: token.colorBgContainer
+  }))), "".concat(proLayoutPageContainerCls, "-main"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutPageContainerCls, "-detail"), {
+    display: 'flex'
+  }), "".concat(proLayoutPageContainerCls, "-row"), {
+    display: 'flex',
+    width: '100%'
+  }), "".concat(proLayoutPageContainerCls, "-title-content"), {
+    marginBottom: '16px'
+  }), "".concat(proLayoutPageContainerCls, "-title,").concat(proLayoutPageContainerCls, "-content"), {
+    flex: 'auto'
+  }), "".concat(proLayoutPageContainerCls, "-extraContent,").concat(proLayoutPageContainerCls, "-main"), {
+    flex: '0 1 auto'
+  }), "".concat(proLayoutPageContainerCls, "-title"), {
+    marginBottom: '16px'
+  }), "".concat(proLayoutPageContainerCls, "-logo"), {
+    marginBottom: '16px'
+  }), "".concat(proLayoutPageContainerCls, "-extraContent"), {
+    minWidth: '242px',
+    marginLeft: '88px',
+    textAlign: 'right'
+  })), "@media screen and (max-width: ".concat(token.screenXl, "px)"), (0, _defineProperty2.default)({}, "".concat(proLayoutPageContainerCls, "-main"), (0, _defineProperty2.default)({}, "".concat(proLayoutPageContainerCls, "-extraContent"), {
+    marginLeft: '44px'
+  }))), "@media screen and (max-width: ".concat(token.screenLG, "px)"), (0, _defineProperty2.default)({}, "".concat(proLayoutPageContainerCls, "-main"), (0, _defineProperty2.default)({}, "".concat(proLayoutPageContainerCls, "-extraContent"), {
+    marginLeft: '20px'
+  }))), "@media screen and (max-width: ".concat(token.screenMD, "px)"), (0, _defineProperty2.default)({}, "".concat(proLayoutPageContainerCls, "-main"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutPageContainerCls, "-row"), {
+    display: 'block'
+  }), "".concat(proLayoutPageContainerCls, "-extraContent,").concat(proLayoutPageContainerCls, "-action"), {
+    marginLeft: 0,
+    textAlign: 'left'
+  }))), "@media screen and (max-width: ".concat(token.screenSM, "px)"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutPageContainerCls, "-detail"), {
+    display: 'block'
+  }), "".concat(proLayoutPageContainerCls, "-extraContent"), {
+    marginLeft: 0
+  }));
+};

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,21 +133,13 @@ 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,
@@ -161,9 +148,9 @@ var MenuUtil = /*#__PURE__*/(0, _createClass2.default)(function MenuUtil(_props,
           "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)];
         }
       });
     }
@@ -180,14 +167,13 @@ var MenuUtil = /*#__PURE__*/(0, _createClass2.default)(function MenuUtil(_props,
       "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 : {
+    }, {
       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 meta = (0, _objectSpread2.default)({}, item.meta);
     var target = meta.target || null;
@@ -210,27 +196,19 @@ var MenuUtil = /*#__PURE__*/(0, _createClass2.default)(function MenuUtil(_props,
       "icon": (_item$meta10 = item.meta) === null || _item$meta10 === void 0 ? void 0 : _item$meta10.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 defaultTitle = (_item$meta13 = item.meta) !== null && _item$meta13 !== void 0 && _item$meta13.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,9 @@ var _vueTypes = _interopRequireDefault(require("ant-design-vue/es/_util/vue-type
 var _Icon = _interopRequireDefault(require("../../Icon"));
 var _RouteContext = require("../RouteContext");
 require("../typings");
+var _style = _interopRequireDefault(require("../style"));
 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 siderMenuProps = exports.siderMenuProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), _BaseMenu.baseMenuProps), {}, {
   logo: {
     type: [Object, String, Function],
@@ -154,11 +153,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 +163,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 +175,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 +188,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 +205,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 +248,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 +282,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 +301,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
     },