@jetlinks-web/components 3.0.0-rc → 3.0.0

package/es/ProLayout/SiderMenu/BaseMenu.js

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { isVNode as _isVNode } from "vue";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
@@ -12,10 +11,6 @@ import IconFont from '../../Icon';
 import { regular } from '@jetlinks-web/utils';
 import { Menu } from 'ant-design-vue';
 import { createFromIconfontCN } from '@ant-design/icons-vue';
-import 'ant-design-vue/es/_util/vue-types';
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
-}
 export var baseMenuProps = _objectSpread(_objectSpread({}, defaultSettingProps), {}, {
   prefixCls: {
     type: String,
@@ -119,8 +114,7 @@ var MenuUtil = /*#__PURE__*/_createClass(function MenuUtil(_props, ctx) {
   });
   _defineProperty(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 = withCtx(_this.props.subMenuItemRender, _this.ctx);
@@ -133,21 +127,13 @@ var MenuUtil = /*#__PURE__*/_createClass(function MenuUtil(_props, ctx) {
         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) ? _createVNode("span", {
+      var defaultTitle = (_item$meta5 = item.meta) !== null && _item$meta5 !== void 0 && _item$meta5.icon ? _createVNode("span", {
         "class": "".concat(prefixCls, "-menu-item")
       }, [_createVNode("span", {
         "class": "".concat(prefixCls, "-menu-item-title")
-      }, _isSlot(menuTitle) ? menuTitle : {
-        default: function _default() {
-          return [menuTitle];
-        }
-      })]) : _createVNode("span", {
+      }, [menuTitle])]) : _createVNode("span", {
         "class": "".concat(prefixCls, "-menu-item")
-      }, _isSlot(menuTitle) ? menuTitle : {
-        default: function _default() {
-          return [menuTitle];
-        }
-      });
+      }, [menuTitle]);
       return _createVNode(Menu.SubMenu, {
         "title": defaultTitle,
         "key": item.path,
@@ -156,9 +142,9 @@ var MenuUtil = /*#__PURE__*/_createClass(function MenuUtil(_props, ctx) {
           "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,14 +161,13 @@ var MenuUtil = /*#__PURE__*/_createClass(function MenuUtil(_props, ctx) {
       "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];
       }
     });
   });
   _defineProperty(this, "getMenuItem", function (item) {
-    var _slot2;
     var _item$meta9, _item$meta10, _item$meta11, _item$meta12, _item$meta13;
     var meta = _objectSpread({}, item.meta);
     var target = meta.target || null;
@@ -205,27 +190,19 @@ var MenuUtil = /*#__PURE__*/_createClass(function MenuUtil(_props, ctx) {
       "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) ? _createVNode(CustomTag, _objectSpread(_objectSpread(_objectSpread({}, attrs), props), {}, {
+    var defaultTitle = (_item$meta13 = item.meta) !== null && _item$meta13 !== void 0 && _item$meta13.icon ? _createVNode(CustomTag, _objectSpread(_objectSpread(_objectSpread({}, attrs), props), {}, {
       "class": "".concat(prefixCls, "-menu-item")
     }), {
       default: function _default() {
         return [icon, _createVNode("span", {
           "class": "".concat(prefixCls, "-menu-item-title")
-        }, _isSlot(menuTitle) ? menuTitle : {
-          default: function _default() {
-            return [menuTitle];
-          }
-        })];
+        }, [menuTitle])];
       }
     }) : _createVNode(CustomTag, _objectSpread(_objectSpread(_objectSpread({}, attrs), props), {}, {
       "class": "".concat(prefixCls, "-menu-item")
-    }), _isSlot(_slot2 = _createVNode("span", null, _isSlot(menuTitle) ? menuTitle : {
-      default: function _default() {
-        return [menuTitle];
-      }
-    })) ? _slot2 : {
+    }), {
       default: function _default() {
-        return [_slot2];
+        return [_createVNode("span", null, [menuTitle])];
       }
     });
     return [defaultTitle, icon];
@@ -263,7 +240,6 @@ export default defineComponent({
       emit('click', args);
     };
     return function () {
-      var _slot3;
       return _createVNode(Menu, _objectSpread({
         "key": "Menu",
         "inlineIndent": 16,
@@ -274,9 +250,9 @@ export default 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/es/ProLayout/SiderMenu/SiderMenu.js

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createVNode as _createVNode, resolveDirective as _resolveDirective, createTextVNode as _createTextVNode, isVNode as _isVNode, Fragment as _Fragment } from "vue";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment } from "vue";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { LayoutSider as Sider, Menu, Tooltip } from 'ant-design-vue';
 import BaseMenu, { baseMenuProps } from './BaseMenu';
@@ -10,9 +11,7 @@ import IconFont from '../../Icon';
 import { useRouteContext } from '../RouteContext';
 import { computed, unref } from 'vue';
 import "../typings";
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
-}
+import useProLayoutStyle from '../style';
 export var siderMenuProps = _objectSpread(_objectSpread(_objectSpread({}, defaultSettingProps), baseMenuProps), {}, {
   logo: {
     type: [Object, String, Function],
@@ -145,11 +144,7 @@ export var defaultRenderLogoAndTitle = function defaultRenderLogoAndTitle(props)
   if (layout === 'mix' && renderFunction === false) {
     return null;
   }
-  var titleDom = _createVNode("h1", null, _isSlot(title) ? title : {
-    default: function _default() {
-      return [title];
-    }
-  });
+  var titleDom = _createVNode("h1", null, [title]);
   if (renderKey === 'menuHeaderRender') {
     return null;
   }
@@ -159,11 +154,7 @@ export var defaultRenderLogoAndTitle = function defaultRenderLogoAndTitle(props)
     return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
   }
   if (Array.isArray(renderFunction)) {
-    return _createVNode(_Fragment, null, _isSlot(renderFunction) ? renderFunction : {
-      default: function _default() {
-        return [renderFunction];
-      }
-    });
+    return _createVNode(_Fragment, null, [renderFunction]);
   }
   return _createVNode("a", null, [logoDom, props.collapsed ? null : titleDom]);
 };
@@ -175,7 +166,6 @@ export var defaultRenderCollapsedButton = function defaultRenderCollapsedButton(
   }, null);
 };
 var SiderMenu = function SiderMenu(props) {
-  var _slot;
   var collapsed = props.collapsed,
     siderWidth = props.siderWidth,
     breakpoint = props.breakpoint,
@@ -189,6 +179,13 @@ var SiderMenu = function SiderMenu(props) {
     collapsedButtonRender = _props$collapsedButto === void 0 ? defaultRenderCollapsedButton : _props$collapsedButto,
     linksRender = props.linksRender,
     theme = props.theme;
+  var prefixCls = computed(function () {
+    return 'pro-layout';
+  });
+  var _useProLayoutStyle = useProLayoutStyle(prefixCls),
+    _useProLayoutStyle2 = _slicedToArray(_useProLayoutStyle, 2),
+    wrapSSR = _useProLayoutStyle2[0],
+    hashId = _useProLayoutStyle2[1];
   var context = useRouteContext();
   var getPrefixCls = context.getPrefixCls;
   var baseClassName = getPrefixCls('sider');
@@ -199,7 +196,7 @@ var SiderMenu = function SiderMenu(props) {
     return props.collapsed ? props.collapsedWidth : props.siderWidth;
   });
   var classNames = computed(function () {
-    return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, baseClassName, true), "".concat(baseClassName, "-fixed"), context.fixSiderbar), "".concat(baseClassName, "-").concat(theme), true), "".concat(baseClassName, "-layout-").concat(props.layout), props.layout);
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, 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 = computed(function () {
     return _defineProperty(_defineProperty({}, "".concat(baseClassName, "-logo"), true), "".concat(baseClassName, "-logo-card"), props.layoutType === LayoutType.CARD);
@@ -242,7 +239,6 @@ var SiderMenu = function SiderMenu(props) {
     },
     'onUpdate:selectedKeys': handleSelect
   }, null);
-  console.log('context', context.fixSiderbar);
   return _createVNode(_Fragment, null, [context.fixSiderbar && _createVNode("div", {
     "style": {
       width: "".concat(sSideWidth.value, "px"),
@@ -277,17 +273,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 && _createVNode("div", {
+      }, [headerDom]), extraDom && _createVNode("div", {
         "class": _defineProperty(_defineProperty({}, "".concat(baseClassName, "-extra"), true), "".concat(baseClassName, "-extra-no-logo"), !headerDom)
-      }, _isSlot(extraDom) ? extraDom : {
-        default: function _default() {
-          return [extraDom];
-        }
-      }), _createVNode("div", {
+      }, [extraDom]), _createVNode("div", {
         "class": "".concat(baseClassName, "-body"),
         "style": "flex: 1; overflow: hidden auto;"
       }, [props.layoutType !== LayoutType.CARD ? menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), _createVNode("div", {
@@ -304,17 +292,17 @@ var SiderMenu = function SiderMenu(props) {
             props.onCollapse(!props.collapsed);
           }
         }
-      }, _isSlot(_slot = _createVNode(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 [_createVNode(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/es/ProLayout/SiderMenu/style.js

@@ -0,0 +1,166 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Keyframes } from "ant-design-vue";
+export var genSiderMenuStyle = function genSiderMenuStyle(config) {
+  var _$concat8;
+  var token = config.token;
+  var proLayoutSiderMenuCls = "".concat(token.antCls, "-pro-sider");
+  var proLayoutHeaderHeight = '48px';
+  var proLayoutTitleHideKeyframes = new Keyframes('pro-layout-title-hide', {
+    '0%': {
+      display: 'none',
+      opacity: 0
+    },
+    '80%': {
+      display: 'none',
+      opacity: 0
+    },
+    '100%': {
+      display: 'unset',
+      opacity: 1
+    }
+  });
+  return _defineProperty(_defineProperty(_defineProperty({}, "".concat(proLayoutSiderMenuCls), (_$concat8 = {
+    position: 'relative',
+    backgroundColor: '#001529',
+    borderRight: 0,
+    // FIXME: 临时修正(可能不会做兼容)
+    zIndex: 20
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat8, "".concat(token.antCls, "-menu"), {
+    background: 'transparent'
+  }), "&".concat(token.antCls, "-layout-sider-light"), _defineProperty(_defineProperty({}, "".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"), _defineProperty({
+    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"), _defineProperty(_defineProperty({}, "".concat(token.antCls, "-menu-inline-collapsed"), {
+    width: '48px'
+  }), "".concat(proLayoutSiderMenuCls), _defineProperty({}, "".concat(proLayoutSiderMenuCls, "-logo"), {
+    padding: '16px 24px'
+  }))), "&".concat(token.antCls, "-layout-sider").concat(proLayoutSiderMenuCls, "-fixed"), _defineProperty({
+    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"), _defineProperty({}, ":not".concat(proLayoutSiderMenuCls, "-link-menu"), {
+    height: "calc(100vh - ".concat(proLayoutHeaderHeight, ")"),
+    overflowY: 'auto'
+  }))), "".concat(proLayoutSiderMenuCls, "-light"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    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)
+  })), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat8, "".concat(proLayoutSiderMenuCls, "-icon"), {
+    width: '14px',
+    verticalAlign: 'baseline'
+  }), "".concat(proLayoutSiderMenuCls, "-link"), _defineProperty({
+    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"), _defineProperty({}, ".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/es/ProLayout/TopHeader/index.js

@@ -1,20 +1,18 @@
-import { isVNode as _isVNode } from "vue";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { createVNode as _createVNode } from "vue";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 var _excluded = ["rightContentRender"];
 import { computed, ref } from 'vue';
-import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
+import { default as ResizeObserver } from "ant-design-vue/es/vc-resize-observer";
 import { defaultRenderLogoAndTitle, siderMenuProps } from '../SiderMenu/SiderMenu';
-import PropTypes from 'ant-design-vue/es/_util/vue-types';
+import PropTypes from "ant-design-vue/es/_util/vue-types";
 import { defaultSettingProps, LayoutType } from '../defaultSettings';
 import { defaultPrefixCls, useRouteContext } from '../RouteContext';
 import BaseMenu from '../SiderMenu/BaseMenu';
 import { clearMenuItem } from '../util';
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
-}
+import useProLayoutStyle from '../style';
 export var baseHeaderProps = _objectSpread(_objectSpread({}, defaultSettingProps), {}, {
   prefixCls: PropTypes.string.def('ant-pro'),
   collapsed: PropTypes.looseBool,
@@ -99,6 +97,13 @@ export var TopNavHeader = function TopNavHeader(props) {
     mode = props.mode;
   var context = useRouteContext();
   var prefixCls = "".concat(propPrefixCls || defaultPrefixCls, "-top-nav-header");
+  var stylePrefixCls = computed(function () {
+    return 'pro-layout';
+  });
+  var _useProLayoutStyle = useProLayoutStyle(stylePrefixCls),
+    _useProLayoutStyle2 = _slicedToArray(_useProLayoutStyle, 2),
+    wrapSSR = _useProLayoutStyle2[0],
+    hashId = _useProLayoutStyle2[1];
   var headerDom = defaultRenderLogoAndTitle(_objectSpread(_objectSpread({}, props), {}, {
     collapsed: false
   }),
@@ -121,7 +126,7 @@ export var TopNavHeader = function TopNavHeader(props) {
     return props.layout === 'mix' && props.splitMenus ? 'horizontal' : mode;
   });
   var className = computed(function () {
-    return _defineProperty(_defineProperty(_defineProperty({}, prefixCls, true), "light", props.theme === 'light'), "dark", props.theme === 'dark');
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, prefixCls, true), hashId.value, true), "light", props.theme === 'light'), "dark", props.theme === 'dark');
   });
   var paddingLeft = computed(function () {
     return context.layoutType === LayoutType.PAD && props.collapsed ? context.headerLeftWidth + 'px' : 0;
@@ -141,11 +146,7 @@ export var TopNavHeader = function TopNavHeader(props) {
     "class": "".concat(prefixCls, "-logo"),
     "key": "logo",
     "id": "logo"
-  }, _isSlot(headerDom) ? headerDom : {
-    default: function _default() {
-      return [headerDom];
-    }
-  })]), _createVNode("div", {
+  }, [headerDom])]), _createVNode("div", {
     "style": {
       flex: 1
     },

package/es/ProLayout/TopHeader/style.js

@@ -0,0 +1,126 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+export var 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 _defineProperty(_defineProperty(_defineProperty({}, proLayoutGlobalHeaderCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    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"), _defineProperty({}, "".concat(proLayoutGlobalHeaderCls, "-layout-mix"), _defineProperty(_defineProperty({
+    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"), _defineProperty({
+    '.anticon': {
+      marginRight: '8px'
+    }
+  }, "".concat(token.antCls, "-dropdown-menu-item"), {
+    minWidth: '160px'
+  })), '.dark', {
+    height: '48px',
+    '.action': _defineProperty({
+      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, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    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', _defineProperty(_defineProperty({
+    backgroundColor: token.colorBgContainer
+  }, "".concat(topNavHeaderCls, "-logo"), {
+    h1: {
+      color: token.colorTextHeading
+    }
+  }), '.anticon', {
+    color: 'inherit'
+  })), "".concat(topNavHeaderCls, "-main"), _defineProperty({
+    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"), _defineProperty({
+    minWidth: 0
+  }, "".concat(token.antCls, "-menu").concat(token.antCls, "-meu-horizontal"), _defineProperty({
+    height: '100%',
+    border: 'none'
+  }, "".concat(token.antCls, "-menu-item"), _defineProperty({
+    height: '100%'
+  }, "".concat(token.antCls, "-badge"), {
+    color: 'unset'
+  }))))), "".concat(token.antCls, "-pro-menu-popup"), _defineProperty({}, "".concat(token.antCls, "-badge"), {
+    color: 'unset'
+  }));
+};

package/es/ProLayout/style/index.js

@@ -1 +1,7 @@
-import './style.less';
+import genCompoentStyle from '../../style/styleRegister';
+import { genBasicLayoutStyle } from '../Basic/BasicLayoutStyle';
+import { genHeaderStyle } from '../Basic/HeaderStyle';
+import { genPageContainerStyle } from '../PageContainer/style';
+import { genSiderMenuStyle } from '../SiderMenu/style';
+import { genTopHeaderStyle } from '../TopHeader/style';
+export default genCompoentStyle([genBasicLayoutStyle, genHeaderStyle, genPageContainerStyle, genSiderMenuStyle, genTopHeaderStyle]);

package/es/ProLayout/util.js

@@ -3,14 +3,14 @@ export function clearMenuItem(menusData) {
   return menusData.map(function (item) {
     var _finalItem$meta;
     var finalItem = _objectSpread({}, item);
-    if ((_finalItem$meta = finalItem.meta) === null || _finalItem$meta === void 0 ? void 0 : _finalItem$meta.hideInMenu) {
+    if ((_finalItem$meta = finalItem.meta) !== null && _finalItem$meta !== void 0 && _finalItem$meta.hideInMenu) {
       return null;
     }
-    if (finalItem && (finalItem === null || finalItem === void 0 ? void 0 : finalItem.children)) {
+    if (finalItem && finalItem !== null && finalItem !== void 0 && finalItem.children) {
       var _finalItem$meta2;
-      if (!((_finalItem$meta2 = finalItem.meta) === null || _finalItem$meta2 === void 0 ? void 0 : _finalItem$meta2.hideChildInMenu) && finalItem.children.some(function (child) {
+      if (!((_finalItem$meta2 = finalItem.meta) !== null && _finalItem$meta2 !== void 0 && _finalItem$meta2.hideChildInMenu) && finalItem.children.some(function (child) {
         var _child$meta;
-        return child && child.name && !((_child$meta = child.meta) === null || _child$meta === void 0 ? void 0 : _child$meta.hideInMenu);
+        return child && child.name && !((_child$meta = child.meta) !== null && _child$meta !== void 0 && _child$meta.hideInMenu);
       })) {
         return _objectSpread(_objectSpread({}, item), {}, {
           children: clearMenuItem(finalItem.children)
@@ -27,7 +27,7 @@ export function flatMap(menusData) {
   return menusData.map(function (item) {
     var _finalItem$meta3;
     var finalItem = _objectSpread({}, item);
-    if (!finalItem.name || ((_finalItem$meta3 = finalItem.meta) === null || _finalItem$meta3 === void 0 ? void 0 : _finalItem$meta3.hideInMenu)) {
+    if (!finalItem.name || (_finalItem$meta3 = finalItem.meta) !== null && _finalItem$meta3 !== void 0 && _finalItem$meta3.hideInMenu) {
       return null;
     }
     if (finalItem.children) {