@oceanbase/ui 1.0.0-alpha.2 → 1.0.0-alpha.20

package/lib/BasicLayout/index.js

@@ -1,57 +1,41 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/BasicLayout/index.tsx
-var BasicLayout_exports = {};
-__export(BasicLayout_exports, {
-  default: () => BasicLayout_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(BasicLayout_exports);
-var import_icons = require("@oceanbase/icons");
-var import_pro_components = require("@ant-design/pro-components");
-var import_design = require("@oceanbase/design");
-var import_util = require("@oceanbase/util");
-var import_design2 = require("@oceanbase/design");
-var import_classnames = __toESM(require("classnames"));
-var import_lodash = require("lodash");
-var import_path_to_regexp = require("path-to-regexp");
-var import_react = __toESM(require("react"));
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_util2 = require("../_util");
-var import_useNavigate = __toESM(require("../_util/useNavigate"));
-var import_Header = __toESM(require("./Header"));
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var import_style = __toESM(require("./style"));
-var { Content, Sider } = import_design2.Layout;
-var { SubMenu, Item } = import_design2.Menu;
-var BasicLayout = ({
+exports.default = void 0;
+var _icons = require("@oceanbase/icons");
+var _proComponents = require("@ant-design/pro-components");
+var _design = require("@oceanbase/design");
+var _util = require("@oceanbase/util");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = require("lodash");
+var _pathToRegexp = require("path-to-regexp");
+var _react = _interopRequireWildcard(require("react"));
+var _LocaleWrapper = _interopRequireDefault(require("../locale/LocaleWrapper"));
+var _util2 = require("../_util");
+var _useNavigate = _interopRequireDefault(require("../_util/useNavigate"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _zhCN = _interopRequireDefault(require("./locale/zh-CN"));
+var _style = _interopRequireDefault(require("./style"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && Object.prototype.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const {
+  Content,
+  Sider
+} = _design.Layout;
+const {
+  SubMenu,
+  Item,
+  ItemGroup
+} = _design.Menu;
+const BasicLayout = ({
   children,
-  location: { pathname } = {},
+  location: {
+    pathname
+  } = {},
   banner,
   iconUrl,
   logoUrl,
@@ -66,24 +50,36 @@ var BasicLayout = ({
   subSideMenus,
   className,
   prefixCls: customizePrefixCls,
+  locale,
   ...restProps
 }) => {
-  const { token } = import_design.theme.useToken();
-  const { getPrefixCls } = (0, import_react.useContext)(import_design2.ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls("pro-basic-layout", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const navigate = (0, import_useNavigate.default)();
-  const [collapsed, setCollapsed] = (0, import_react.useState)(defaultCollapsed);
-  const [selectedKeys, setSelectedKeys] = (0, import_react.useState)(defaultSelectedKeys);
-  const [openKeys, setOpenKeys] = (0, import_react.useState)(defaultOpenKeys);
-  (0, import_react.useEffect)(() => {
-    const selectedMenuKeys = (0, import_util2.urlToList)(pathname).map((itemPath) => getMenuMatches(getFlatMenuKeys(menus), itemPath).pop()) || [];
-    const newSelectedKeys = selectedMenuKeys.filter((item) => item);
+  const {
+    token
+  } = _design.theme.useToken();
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-basic-layout', customizePrefixCls);
+  const {
+    wrapSSR
+  } = (0, _style.default)(prefixCls);
+  const navigate = (0, _useNavigate.default)();
+  // 侧边栏导航是否收起
+  const [collapsed, setCollapsed] = (0, _react.useState)(defaultCollapsed);
+  const [selectedKeys, setSelectedKeys] = (0, _react.useState)(defaultSelectedKeys);
+  const [openKeys, setOpenKeys] = (0, _react.useState)(defaultOpenKeys);
+  (0, _react.useEffect)(() => {
+    // 获取当前选中的菜单
+    const selectedMenuKeys = (0, _util2.urlToList)(pathname).map(itemPath => getMenuMatches(getFlatMenuKeys(menus), itemPath).pop()) || [];
+    const newSelectedKeys = selectedMenuKeys.filter(item => item);
     if (newSelectedKeys.length > 0) {
+      // use last selected key to avoid multiple selected menus
       const selectedKey = newSelectedKeys[newSelectedKeys.length - 1];
       setSelectedKeys([selectedKey]);
+      // get parent keys of current selectedKey
       const selectedParentKeys = getParentKeys(menus, selectedKey);
-      setOpenKeys((0, import_lodash.uniq)([...openKeys, ...selectedParentKeys]));
+      // append parent keys as open keys
+      setOpenKeys((0, _lodash.uniq)([...openKeys, ...selectedParentKeys]));
     } else {
       setSelectedKeys([]);
     }
@@ -91,163 +87,178 @@ var BasicLayout = ({
   const menuProps = {
     selectedKeys,
     openKeys,
-    onSelect: ({ selectedKeys: newSelectedKeys }) => {
+    onSelect: ({
+      selectedKeys: newSelectedKeys
+    }) => {
       setSelectedKeys(newSelectedKeys);
     },
-    onOpenChange: (newOpenKeys) => {
+    onOpenChange: newOpenKeys => {
       setOpenKeys(newOpenKeys);
     }
   };
   const getMenuMatches = (flatMenuKeys, path) => {
-    return flatMenuKeys.filter((item) => {
-      return (0, import_path_to_regexp.pathToRegexp)(item).test(path);
+    return flatMenuKeys.filter(item => {
+      return (0, _pathToRegexp.pathToRegexp)(item).test(path);
     });
   };
   const getParentKeys = (menuList, selectedKey) => {
     let keys = [];
-    (menuList || []).forEach((item) => {
+    (menuList || []).forEach(item => {
       const itemChildren = item.children || [];
-      const childrenKeys = itemChildren.map((child) => child.link);
-      if (childrenKeys.includes(selectedKey)) {
-        keys = [...keys, item.link];
+      if (item.type === 'group') {
+        keys = [...keys, ...getParentKeys(itemChildren, selectedKey)];
       } else {
-        keys = [...keys, getParentKeys(itemChildren, selectedKey)];
+        const childrenKeys = itemChildren.map(child => child.link).filter(Boolean);
+        if (childrenKeys.includes(selectedKey)) {
+          keys = [...keys, item.link];
+        } else {
+          keys = [...keys, ...getParentKeys(itemChildren, selectedKey)];
+        }
       }
     });
     return keys;
   };
-  const getFlatMenuKeys = (menuList) => {
+  const getFlatMenuKeys = menuList => {
     let keys = [];
-    (menuList || []).forEach((item) => {
-      if (item.children) {
-        keys = keys.concat(getFlatMenuKeys(item.children));
+    (menuList || []).forEach(item => {
+      if (item.type === 'group') {
+        keys = keys.concat(getFlatMenuKeys(item.children || []));
+      } else {
+        if (item.children) {
+          keys = keys.concat(getFlatMenuKeys(item.children));
+        }
+        keys.push(item.link || '');
       }
-      keys.push(item.link || "");
     });
     return keys;
   };
+  const isCurrentMenuPage = link => !!link && selectedKeys[0] === link;
+
+  // 渲染菜单中的图标
   const renderIcon = (item, isSubSider = false) => {
     const realSelectedKeys = isSubSider ? subSideMenuProps.selectedKeys || subSideMenuProps.defaultSelectedKeys : selectedKeys;
-    return realSelectedKeys.includes(item.link) || (0, import_lodash.some)(item.children || [], (child) => realSelectedKeys.includes(child.link)) ? item.selectedIcon || item.icon : item.icon;
+    // 渲染 selectedIcon 的条件: 1. 菜单项被选中  2. 子菜单被选中
+    return realSelectedKeys.includes(item.link) || (0, _lodash.some)(item.children || [], child => realSelectedKeys.includes(child.link)) ? item.selectedIcon || item.icon : item.icon;
   };
-  const renderMenu = (data) => {
-    return data.reduce((pre, item) => {
-      var _a;
-      const { accessible = true } = item;
-      if (item.children && ((0, import_util.isNullValue)(item.accessible) ? (
-        // 如果子菜单本身没有设置 accessible，但只要其 children 之一可访问，则子菜单仍然展示
-        (_a = item.children) == null ? void 0 : _a.some(({ accessible: childAccessible = true }) => childAccessible)
-      ) : item.accessible)) {
-        pre.push(
-          /* @__PURE__ */ import_react.default.createElement(
-            SubMenu,
-            {
-              "data-testid": "menu.sub",
-              key: item.link,
-              title: /* @__PURE__ */ import_react.default.createElement("div", null, renderIcon(item), /* @__PURE__ */ import_react.default.createElement(
-                import_design.Typography.Text,
-                {
-                  ellipsis: {
-                    tooltip: {
-                      placement: "right"
-                    }
-                  },
-                  style: {
-                    lineHeight: "40px",
-                    maxWidth: 80
-                  }
-                },
-                item.title
-              ))
-            },
-            renderMenu(item.children)
-          )
-        );
-      } else if (!item.children && accessible) {
-        pre.push(
-          /* @__PURE__ */ import_react.default.createElement(
-            Item,
-            {
-              "data-testid": "menu.item",
-              key: item.link,
-              onClick: () => {
-                if (pathname !== item.link) {
-                  navigate == null ? void 0 : navigate(item.link);
+
+  // 渲染菜单
+  const renderMenu = data => {
+    return data.reduce((pre, item, index) => {
+      const {
+        accessible = true
+      } = item;
+      if (item.type === 'group' && item.children?.length && accessible) {
+        pre.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemGroup, {
+          title: item.title,
+          children: renderMenu(item.children)
+        }, item.title ?? `group-${index}`));
+      } else if (item.children && ((0, _util.isNullValue)(item.accessible) ?
+      // 如果子菜单本身没有设置 accessible，但只要其 children 之一可访问，则子菜单仍然展示
+      item.children?.some(({
+        accessible: childAccessible = true
+      }) => childAccessible) : item.accessible)) {
+        pre.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(SubMenu, {
+          "data-testid": "menu.sub",
+          title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [renderIcon(item), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Typography.Text, {
+              ellipsis: {
+                tooltip: {
+                  placement: 'right'
                 }
-              }
-            },
-            /* @__PURE__ */ import_react.default.createElement("div", null, renderIcon(item), /* @__PURE__ */ import_react.default.createElement(
-              import_design.Typography.Text,
-              {
-                ellipsis: {
-                  tooltip: {
-                    placement: "right"
-                  }
-                },
-                style: {
-                  lineHeight: "40px",
-                  maxWidth: 116
+              },
+              style: {
+                lineHeight: '40px',
+                maxWidth: 80
+              },
+              children: item.title
+            })]
+          }),
+          children: renderMenu(item.children)
+        }, item.link));
+      } else if (!item.children && accessible && item.link) {
+        pre.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+          "data-testid": "menu.item",
+          "aria-current": isCurrentMenuPage(item.link) ? 'page' : undefined,
+          onClick: () => {
+            if (pathname !== item.link) {
+              navigate?.(item.link);
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [renderIcon(item), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Typography.Text, {
+              ellipsis: {
+                tooltip: {
+                  placement: 'right'
                 }
               },
-              item.title
-            ))
-          )
-        );
+              style: {
+                lineHeight: '40px',
+                maxWidth: 116
+              },
+              children: item.title
+            })]
+          })
+        }, item.link));
       }
       if (item.divider && accessible) {
-        pre.push(
-          /* @__PURE__ */ import_react.default.createElement(
-            import_design2.Divider,
-            {
-              style: {
-                // 渐变的分隔线
-                borderImage: `linear-gradient(90deg, ${token.colorTextQuaternary} 0%, ${(0, import_pro_components.setAlpha)(
-                  token.colorTextQuaternary,
-                  0
-                )} 100%) 1`
-              }
-            }
-          )
-        );
+        pre.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Divider, {
+          style: {
+            // 渐变的分隔线
+            borderImage: `linear-gradient(90deg, ${token.colorTextQuaternary} 0%, ${(0, _proComponents.setAlpha)(token.colorTextQuaternary, 0)} 100%) 1`
+          }
+        }));
       }
       return pre;
     }, []);
   };
+
+  // 渲染收起菜单
   const renderCollapsedMenu = (data, isSubSider = false) => {
-    return data.reduce((pre, item) => {
-      var _a;
-      const { accessible = true } = item;
-      if (item.children && ((0, import_util.isNullValue)(item.accessible) ? (
-        // 如果子菜单本身没有设置 accessible，但只要其 children 之一可访问，则子菜单仍然展示
-        (_a = item.children) == null ? void 0 : _a.some(({ accessible: childAccessible = true }) => childAccessible)
-      ) : item.accessible)) {
-        pre.push(
-          /* @__PURE__ */ import_react.default.createElement(SubMenu, { key: item.link, title: renderIcon(item, isSubSider) }, renderMenu(item.children))
-        );
-      } else if (!item.children && accessible) {
-        pre.push(
-          /* @__PURE__ */ import_react.default.createElement(
-            Item,
-            {
-              "data-testid": "menu.item",
-              key: item.link,
-              onClick: () => {
-                if (pathname !== item.link) {
-                  navigate == null ? void 0 : navigate(item.link);
-                }
-              }
-            },
-            /* @__PURE__ */ import_react.default.createElement(import_design2.Tooltip, { placement: "right", title: item.title, getPopupContainer: () => document.body }, /* @__PURE__ */ import_react.default.createElement("div", null, renderIcon(item, isSubSider)))
-          )
-        );
+    return data.reduce((pre, item, index) => {
+      const {
+        accessible = true
+      } = item;
+      if (item.type === 'group' && item.children?.length && accessible) {
+        pre.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemGroup, {
+          title: item.title,
+          children: renderMenu(item.children)
+        }, item.title ?? `group-${index}`));
+      } else if (item.children && ((0, _util.isNullValue)(item.accessible) ?
+      // 如果子菜单本身没有设置 accessible，但只要其 children 之一可访问，则子菜单仍然展示
+      item.children?.some(({
+        accessible: childAccessible = true
+      }) => childAccessible) : item.accessible)) {
+        pre.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(SubMenu, {
+          title: renderIcon(item, isSubSider),
+          children: renderMenu(item.children)
+        }, item.link));
+      } else if (!item.children && accessible && item.link) {
+        pre.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+          "data-testid": "menu.item",
+          "aria-current": isCurrentMenuPage(item.link) ? 'page' : undefined,
+          onClick: () => {
+            if (pathname !== item.link) {
+              navigate?.(item.link);
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Tooltip, {
+            placement: "right",
+            title: item.title,
+            getPopupContainer: () => document.body,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: renderIcon(item, isSubSider)
+            })
+          })
+        }, item.link));
       }
       if (item.divider && accessible) {
-        pre.push(/* @__PURE__ */ import_react.default.createElement(import_design2.Divider, null));
+        pre.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Divider, {}));
       }
       return pre;
     }, []);
   };
   let siderWidth = 0;
+  // 根据菜单项的配置计算侧边栏的宽度
   if (subSideMenus && menus) {
     siderWidth = collapsed ? 52 * 2 : 208;
   } else if (subSideMenus && !menus) {
@@ -257,120 +268,123 @@ var BasicLayout = ({
   } else if (!subSideMenus && !menus) {
     siderWidth = 0;
   }
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, banner && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-banner-wrapper` }, banner), /* @__PURE__ */ import_react.default.createElement(
-      import_design2.Layout,
-      {
-        className: (0, import_classnames.default)(
-          prefixCls,
-          {
-            [`${prefixCls}-with-banner`]: banner,
-            [`${prefixCls}-sider-${siderWidth}`]: true
-          },
-          className
-        ),
-        ...restProps
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-        import_Header.default,
-        {
-          prefixCls,
-          pathname,
-          iconUrl,
-          logoUrl,
-          simpleLogoUrl,
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [banner && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${prefixCls}-banner-wrapper`,
+      children: banner
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Layout, {
+      className: (0, _classnames.default)(prefixCls, {
+        [`${prefixCls}-with-banner`]: banner,
+        [`${prefixCls}-sider-${siderWidth}`]: true
+      }, className),
+      ...restProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
+          prefixCls: prefixCls,
+          pathname: pathname,
+          iconUrl: iconUrl,
+          logoUrl: logoUrl,
+          simpleLogoUrl: simpleLogoUrl,
           ...topHeader
-        }
-      ), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
-        import_design2.Layout,
-        {
-          className: `${prefixCls}-content-layout`,
-          style: {
-            marginTop: 48
-          }
-        },
-        (subSideMenus || menus) && /* @__PURE__ */ import_react.default.createElement(
-          Sider,
-          {
-            theme: "light",
-            width: siderWidth,
-            className: (0, import_classnames.default)(`${prefixCls}-sider`, {
-              [`${prefixCls}-sider-collapsed`]: collapsed,
-              [`${prefixCls}-sider-has-sub-sider`]: subSideMenus
-            })
-          },
-          /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-sider-wrapper` }, subSideMenus && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-sub-sider` }, /* @__PURE__ */ import_react.default.createElement(
-            import_design2.Menu,
-            {
-              ...subSideMenuProps,
-              mode: "vertical",
-              className: `${prefixCls}-menu-vertical`
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Layout, {
+            className: `${prefixCls}-content-layout`,
+            style: {
+              marginTop: 48
             },
-            renderCollapsedMenu(subSideMenus, true)
-          )), (sideHeader || menus) && /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
+            children: [(subSideMenus || menus) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Sider, {
+              theme: "light",
+              width: siderWidth,
+              className: (0, _classnames.default)(`${prefixCls}-sider`, {
+                [`${prefixCls}-sider-collapsed`]: collapsed,
+                [`${prefixCls}-sider-has-sub-sider`]: subSideMenus
+              }),
+              role: "navigation",
+              "aria-label": locale?.sideNavigation,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: `${prefixCls}-sider-wrapper`,
+                children: [subSideMenus && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: `${prefixCls}-sub-sider`,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Menu, {
+                    ...subSideMenuProps,
+                    mode: "vertical",
+                    className: `${prefixCls}-menu-vertical`,
+                    children: renderCollapsedMenu(subSideMenus, true)
+                  })
+                }), (sideHeader || menus) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  style: {
+                    display: 'flex',
+                    width: '100%'
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                    className: `${prefixCls}-sider-content`,
+                    children: [sideHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      className: `${prefixCls}-sider-header`,
+                      children: sideHeader
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      className: `${prefixCls}-menu-wrapper`,
+                      children: collapsed ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                        className: `${prefixCls}-menu-collapsed`,
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Menu, {
+                          ...menuProps,
+                          mode: "vertical",
+                          className: `${prefixCls}-menu-vertical`,
+                          children: renderCollapsedMenu(menus, false)
+                        })
+                      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Menu, {
+                        ...menuProps,
+                        mode: "inline",
+                        expandIcon: ({
+                          isOpen
+                        }) => {
+                          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CaretRightFilled, {
+                            rotate: isOpen ? 90 : 0,
+                            style: {
+                              fontSize: 12
+                            }
+                          });
+                        },
+                        className: `${prefixCls}-menu`,
+                        children: renderMenu(menus)
+                      })
+                    })]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    className: `${prefixCls}-sider-border`,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                      type: "button",
+                      className: `${prefixCls}-sider-collapse`,
+                      "aria-expanded": !collapsed,
+                      "aria-label": collapsed ? locale?.expandSider : locale?.collapseSider,
+                      onClick: () => {
+                        setCollapsed(!collapsed);
+                        // 导航展开/收起时，重置 openKeys
+                        setOpenKeys([]);
+                      },
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        "aria-hidden": true,
+                        children: collapsed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeftOutlined, {})
+                      })
+                    })
+                  })]
+                })]
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+              className: (0, _classnames.default)(`${prefixCls}-content`, `${prefixCls}-content-${siderWidth}`),
               style: {
-                display: "flex",
-                width: "100%"
-              }
-            },
-            /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-sider-content` }, sideHeader && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-sider-header` }, sideHeader), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-menu-wrapper` }, collapsed ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-menu-collapsed` }, /* @__PURE__ */ import_react.default.createElement(
-              import_design2.Menu,
-              {
-                ...menuProps,
-                mode: "vertical",
-                className: `${prefixCls}-menu-vertical`
-              },
-              renderCollapsedMenu(menus, false)
-            )) : /* @__PURE__ */ import_react.default.createElement(
-              import_design2.Menu,
-              {
-                ...menuProps,
-                mode: "inline",
-                expandIcon: ({ isOpen }) => {
-                  return /* @__PURE__ */ import_react.default.createElement(
-                    import_icons.CaretRightFilled,
-                    {
-                      rotate: isOpen ? 90 : 0,
-                      style: {
-                        fontSize: 12
-                      }
-                    }
-                  );
-                },
-                className: `${prefixCls}-menu`
+                marginLeft: siderWidth
               },
-              renderMenu(menus)
-            ))),
-            /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-sider-border` }, /* @__PURE__ */ import_react.default.createElement(
-              "div",
-              {
-                className: `${prefixCls}-sider-collapse`,
-                onClick: () => {
-                  setCollapsed(!collapsed);
-                  setOpenKeys([]);
-                }
-              },
-              collapsed ? /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
-            ))
-          ))
-        ),
-        /* @__PURE__ */ import_react.default.createElement(
-          Content,
-          {
-            className: (0, import_classnames.default)(`${prefixCls}-content`, `${prefixCls}-content-${siderWidth}`),
-            style: {
-              marginLeft: siderWidth
-            }
-          },
-          children
-        )
-      )))
-    ))
-  );
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("main", {
+                className: `${prefixCls}-content-main`,
+                children: children
+              })
+            })]
+          })
+        })]
+      })
+    })]
+  }));
 };
-var BasicLayout_default = (0, import_LocaleWrapper.default)({
-  componentName: "BasicLayout",
-  defaultLocale: import_zh_CN.default
-})(BasicLayout);
+var _default = exports.default = (0, _LocaleWrapper.default)({
+  componentName: 'BasicLayout',
+  defaultLocale: _zhCN.default
+})(BasicLayout);