@jetlinks-web/components 2.7.0 → 3.0.0

package/lib/ProLayout/PageContainer/index.js

@@ -11,17 +11,15 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _type = require("ant-design-vue/lib/_util/type");
-var _lib = require("ant-design-vue/lib/");
+var _antDesignVue = require("ant-design-vue");
 var _pageHeader = require("ant-design-vue/lib/page-header");
 var _RouteContext = require("../RouteContext");
 var _util = require("../util");
-require("ant-design-vue/lib/_util/vue-types");
+require("ant-design-vue/es/_util/vue-types");
 var _defaultSettings = require("../defaultSettings");
 var _LocaleReciver = require("../../LocaleReciver");
+var _style = _interopRequireDefault(require("../style"));
 var _excluded = ["title", "tabList", "tabActiveKey", "content", "pageHeaderRender", "header", "extraContent", "prefixedClassName", "prefixCls", "fixedHeader", "showBack"];
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
-}
 var pageHeaderTabConfig = exports.pageHeaderTabConfig = {
   /**
    * @name tabs 的列表
@@ -157,8 +155,7 @@ var renderFooter = function renderFooter(props) {
     }, [item.tab]);
   };
   if (tabList && tabList.length) {
-    var _slot;
-    return (0, _vue.createVNode)(_lib.Tabs, (0, _objectSpread2.default)({
+    return (0, _vue.createVNode)(_antDesignVue.Tabs, (0, _objectSpread2.default)({
       "class": "page-container-tabs",
       "activeKey": tabActiveKey,
       "onChange": function onChange(key) {
@@ -167,14 +164,14 @@ var renderFooter = function renderFooter(props) {
         }
       },
       "tabBarExtraContent": tabBarExtraContent
-    }, tabProps), _isSlot(_slot = tabList.map(function (item) {
-      return (0, _vue.createVNode)(_lib.Tabs.TabPane, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-        "tab": tabPane(item),
-        "key": item.key
-      }), null);
-    })) ? _slot : {
+    }, tabProps), {
       default: function _default() {
-        return [_slot];
+        return [tabList.map(function (item) {
+          return (0, _vue.createVNode)(_antDesignVue.Tabs.TabPane, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+            "tab": tabPane(item),
+            "key": item.key
+          }), null);
+        })];
       }
     });
   }
@@ -235,7 +232,7 @@ var ProPageHeader = function ProPageHeader(props) {
   var backProps = {};
   if (showBack) {
     // @ts-ignore
-    backProps.backIcon = (0, _vue.createVNode)(_lib.Button, null, {
+    backProps.backIcon = (0, _vue.createVNode)(_antDesignVue.Button, null, {
       default: function _default() {
         return [contextLocale.value.pageContainer.back];
       }
@@ -250,7 +247,7 @@ var ProPageHeader = function ProPageHeader(props) {
   } : {};
   return (0, _vue.createVNode)("div", {
     "class": "".concat(prefixedClassName, "-wrap")
-  }, [(0, _vue.createVNode)(_lib.PageHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+  }, [(0, _vue.createVNode)(_antDesignVue.PageHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
     "style": styles
   }, backProps), restProps), {}, {
     "title": pageHeaderTitle,
@@ -281,11 +278,18 @@ var PageContainer = (0, _vue.defineComponent)({
     var value = (0, _RouteContext.useRouteContext)();
     var getPrefixCls = value.getPrefixCls;
     var prefixCls = props.prefixCls || getPrefixCls();
+    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 prefixedClassName = (0, _vue.computed)(function () {
       return "".concat(prefixCls, "-page-container");
     });
     var classNames = (0, _vue.computed)(function () {
-      return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, prefixedClassName.value, true), "".concat(prefixCls, "-page-container-ghost"), ghost.value);
+      return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, hashId.value, true), prefixedClassName.value, true), "".concat(prefixCls, "-page-container-ghost"), ghost.value);
     });
     var headerDom = (0, _vue.computed)(function () {
       // const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags');
@@ -315,7 +319,7 @@ var PageContainer = (0, _vue.defineComponent)({
       }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]) : (0, _vue.createVNode)("div", {
         "class": classNames.value,
         "style": (0, _objectSpread2.default)({}, attrs.style || {})
-      }, [fixedHeader && headerDom.value ? (0, _vue.createVNode)(_lib.Affix, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, affixProps.value), {}, {
+      }, [fixedHeader && headerDom.value ? (0, _vue.createVNode)(_antDesignVue.Affix, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, affixProps.value), {}, {
         "offsetTop": value.hasHeader && value.fixedHeader ? value.headerHeight : 0
       }), {
         default: function _default() {
@@ -323,8 +327,8 @@ var PageContainer = (0, _vue.defineComponent)({
         }
       }) : headerDom.value, (0, _vue.createVNode)("div", {
         "class": "".concat(prefixedClassName.value, "-grid-content")
-      }, [loading.value ? (0, _vue.createVNode)(_lib.Spin, null, null) : slots.default ? (0, _vue.createVNode)("div", null, [(0, _vue.createVNode)("div", {
-        "class": "".concat(prefixedClassName.value, "-children-content ").concat(childrenFullHeight.value ? 'children-full-height' : ''),
+      }, [loading.value ? (0, _vue.createVNode)(_antDesignVue.Spin, null, null) : slots.default ? (0, _vue.createVNode)("div", null, [(0, _vue.createVNode)("div", {
+        "class": "".concat(prefixedClassName.value, "-children-content ").concat(childrenFullHeight.value ? 'children-full-height' : '', " ").concat(hashId.value),
         "style": (0, _objectSpread2.default)({}, props.contentStyle || {})
       }, [slots.default()]), value.hasFooterToolbar && (0, _vue.createVNode)("div", {
         "style": {

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,20 +6,17 @@ 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");
 var _Icon = _interopRequireDefault(require("../../Icon"));
 var _utils = require("@jetlinks-web/utils");
-var _lib = require("ant-design-vue/lib/");
+var _antDesignVue = require("ant-design-vue");
 var _iconsVue = require("@ant-design/icons-vue/lib/icons");
-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,
@@ -123,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);
@@ -137,22 +133,14 @@ 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];
-        }
-      });
-      return (0, _vue.createVNode)(_lib.Menu.SubMenu, {
+      }, [menuTitle]);
+      return (0, _vue.createVNode)(_antDesignVue.Menu.SubMenu, {
         "title": defaultTitle,
         "key": item.path,
         "popupClassName": "".concat(prefixCls, "-menu-popup"),
@@ -160,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)];
         }
       });
     }
@@ -175,18 +163,17 @@ var MenuUtil = /*#__PURE__*/(0, _createClass2.default)(function MenuUtil(_props,
       item: item,
       title: title,
       icon: icon
-    }) || (0, _vue.createVNode)(_lib.Menu.Item, {
+    }) || (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 : {
+    }, {
       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;
@@ -209,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];
@@ -267,8 +246,7 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
       emit('click', args);
     };
     return function () {
-      var _slot3;
-      return (0, _vue.createVNode)(_lib.Menu, (0, _objectSpread2.default)({
+      return (0, _vue.createVNode)(_antDesignVue.Menu, (0, _objectSpread2.default)({
         "key": "Menu",
         "inlineIndent": 16,
         "mode": props.mode,
@@ -278,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,20 +8,19 @@ 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 _lib = require("ant-design-vue/lib/");
+var _antDesignVue = require("ant-design-vue");
 var _BaseMenu = _interopRequireWildcard(require("./BaseMenu"));
 var _defaultSettings = require("../defaultSettings");
-var _vueTypes = _interopRequireDefault(require("ant-design-vue/lib/_util/vue-types"));
+var _vueTypes = _interopRequireDefault(require("ant-design-vue/es/_util/vue-types"));
 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],
@@ -105,7 +104,7 @@ var defaultRenderLogo = exports.defaultRenderLogo = function defaultRenderLogo(l
     return logo();
   }
   if (typeof logo === 'string') {
-    return application.length ? (0, _vue.createVNode)(_lib.Tooltip, {
+    return application.length ? (0, _vue.createVNode)(_antDesignVue.Tooltip, {
       "placement": "rightTop",
       "color": "#fff",
       "arrowPointAtCenter": true
@@ -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);
@@ -260,7 +257,7 @@ var SiderMenu = function SiderMenu(props) {
       minWidth: "".concat(sSideWidth.value, "px"),
       transition: "background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
     }
-  }, null), (0, _vue.createVNode)(_lib.LayoutSider, {
+  }, null), (0, _vue.createVNode)(_antDesignVue.LayoutSider, {
     "collapsible": true,
     "trigger": null,
     "collapsed": collapsed,
@@ -285,22 +282,14 @@ 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", {
         "class": "".concat(baseClassName, "-links")
-      }, [linksRender ? linksRender() : collapsedButtonRender !== false ? (0, _vue.createVNode)(_lib.Menu, {
+      }, [linksRender ? linksRender() : collapsedButtonRender !== false ? (0, _vue.createVNode)(_antDesignVue.Menu, {
         "class": "".concat(baseClassName, "-link-menu"),
         "inlineIndent": 16,
         "theme": theme,
@@ -312,17 +301,17 @@ var SiderMenu = function SiderMenu(props) {
             props.onCollapse(!props.collapsed);
           }
         }
-      }, _isSlot(_slot = (0, _vue.createVNode)(_lib.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'
+    }
+  });
+};