@jetlinks-web/components 2.7.0 → 3.0.0

package/es/ProLayout/SiderMenu/SiderMenu.js

@@ -1,8 +1,9 @@
 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/es/';
+import { LayoutSider as Sider, Menu, Tooltip } from 'ant-design-vue';
 import BaseMenu, { baseMenuProps } from './BaseMenu';
 import { defaultSettingProps, LayoutType } from '../defaultSettings';
 import PropTypes from 'ant-design-vue/es/_util/vue-types';
@@ -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);
@@ -276,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", {
@@ -303,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 { 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) {

package/es/ProTable/Alert.js

@@ -20,19 +20,23 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "computed": "setup-const",
   "_alertProps": "setup-maybe-ref",
   "useLocaleReceiver": "setup-maybe-ref",
+  "useProTableStyle": "setup-maybe-ref",
   "contextLocale": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "emits": "setup-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "_message": "setup-ref",
   "onClose": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { renderSlot as _renderSlot, unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = { class: "jtable-alert" };
-import { Alert, Button } from 'ant-design-vue/es/';
+import { unref as _unref, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { Alert, Button } from 'ant-design-vue';
 import { computed } from "vue";
 import { _alertProps } from "./setting";
 import { useLocaleReceiver } from "../LocaleReciver/index";
+import useProTableStyle from './style';
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'Alert'
@@ -43,6 +47,8 @@ const __sfc_main__ = _defineComponent({
         const [contextLocale] = useLocaleReceiver('ProTable');
         const props = __props;
         const emits = __emit;
+        const prefixCls = computed(() => 'pro-table');
+        const [wrapSSR, hashId] = useProTableStyle(prefixCls);
         const _message = computed(() => {
             let locale = _optionalChain([contextLocale, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.alert, 'optionalAccess', _4 => _4.selectItem]) || '';
             [_optionalChain([props, 'access', _5 => _5.rowSelection, 'optionalAccess', _6 => _6.selectedRowKeys, 'optionalAccess', _7 => _7.length]) || 0].forEach((item, index) => {
@@ -54,7 +60,9 @@ const __sfc_main__ = _defineComponent({
             emits('close');
         };
         return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass(['jtable-alert', _unref(hashId)])
+            }, [
                 _renderSlot(_ctx.$slots, "default", {}, () => [
                     _createVNode(_unref(Alert), {
                         type: "info",
@@ -74,7 +82,7 @@ const __sfc_main__ = _defineComponent({
                         _: 1 /* STABLE */
                     }, 8 /* PROPS */, ["message"])
                 ])
-            ]));
+            ], 2 /* CLASS */));
         };
     }
 });