@kne/system-layout 0.2.0-alpha.16 → 0.2.0-alpha.20

package/dist/index.js

@@ -1,4 +1,5 @@
 var react = require('react');
+var reactDom = require('react-dom');
 var antd = require('antd');
 var classnames = require('classnames');
 var localStorage = require('@kne/local-storage');
@@ -8,13 +9,13 @@ var reactRouterDom = require('react-router-dom');
 var Icon = require('@kne/react-icon');
 var ensureSlash = require('@kne/ensure-slash');
 var isPlainObject = require('lodash/isPlainObject');
-var reactDom = require('react-dom');
+var VirtualList = require('rc-virtual-list');
+var responsiveUtils = require('@kne/responsive-utils');
 var defaultLogo = require('./defaultLogo~beHinxEU.svg');
 var expand_bdCTnjYJ_svg = require('./expand~bdCTnjYJ.svg');
 var ReactErrorBoundary = require('@kne/react-error-boundary');
 var reactIntl = require('@kne/react-intl');
 var SimpleBar = require('simplebar-react');
-var throttle = require('lodash/throttle');
 require('simplebar-react/dist/simplebar.min.css');
 var ButtonGroup = require('@kne/button-group');
 var merge = require('lodash/merge');
@@ -27,10 +28,10 @@ var localStorage__default = /*#__PURE__*/_interopDefaultLegacy(localStorage);
 var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
 var ensureSlash__default = /*#__PURE__*/_interopDefaultLegacy(ensureSlash);
 var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
+var VirtualList__default = /*#__PURE__*/_interopDefaultLegacy(VirtualList);
 var defaultLogo__default = /*#__PURE__*/_interopDefaultLegacy(defaultLogo);
 var ReactErrorBoundary__default = /*#__PURE__*/_interopDefaultLegacy(ReactErrorBoundary);
 var SimpleBar__default = /*#__PURE__*/_interopDefaultLegacy(SimpleBar);
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 var ButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(ButtonGroup);
 var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 var transform__default = /*#__PURE__*/_interopDefaultLegacy(transform);
@@ -45,7 +46,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var style$3 = {"layout":"kne-system-layout_sK89O","has-toolbar":"kne-system-layout_gyKfI","has-navbar":"kne-system-layout_X1wZG","menu":"kne-system-layout_-LpWn","open":"kne-system-layout_G-zuN","layer-menu":"kne-system-layout_6TCwG","ai-entry":"kne-system-layout_5qnw5","page":"kne-system-layout_HnwkM","toolbar":"kne-system-layout_h8PAW","page-children":"kne-system-layout_OM1Q2","is-mobile":"kne-system-layout_udBgQ","menu-inner":"kne-system-layout_7wq3X","logo":"kne-system-layout_-T-Dc","menu-header":"kne-system-layout_LOrmu","logo-img":"kne-system-layout_2cRWf","expand-btn-wrapper":"kne-system-layout_5D-Oq","expand-btn-bg":"kne-system-layout_p4eOE","expand-btn":"kne-system-layout_8dzE7","username":"kne-system-layout_b7XeQ","user-description":"kne-system-layout_U0YTk","menu-list":"kne-system-layout_8gqbZ","ai-dialog-window":"kne-system-layout_UAJc-","pulse-dialog-window":"kne-system-layout_VjIWn","page-dialog-outer":"kne-system-layout_I7Anv","page-dialog":"kne-system-layout_UhsFd","pulse-page-dialog":"kne-system-layout_H7slV","page-window-content":"kne-system-layout_2mdNn","is-scroller":"kne-system-layout_6gjkS","page-content":"kne-system-layout_nyAa2","ai-dialog-window-title":"kne-system-layout_33Tja","ai-dialog-window-content":"kne-system-layout_YmBhl"};
+var style$3 = {"kne-responsive-boundary":"kne-system-layout_VtEb1","kne-responsive-scroll":"kne-system-layout_UMzfg","layout":"kne-system-layout_sK89O","has-toolbar":"kne-system-layout_gyKfI","has-navbar":"kne-system-layout_X1wZG","menu":"kne-system-layout_-LpWn","open":"kne-system-layout_G-zuN","layer-menu":"kne-system-layout_6TCwG","ai-entry":"kne-system-layout_5qnw5","page":"kne-system-layout_HnwkM","page-content":"kne-system-layout_nyAa2","toolbar":"kne-system-layout_h8PAW","page-children":"kne-system-layout_OM1Q2","is-scroller":"kne-system-layout_6gjkS","is-mobile":"kne-system-layout_udBgQ","logo":"kne-system-layout_-T-Dc","menu-header":"kne-system-layout_LOrmu","menu-boundary-overlay":"kne-system-layout_-cMpV","is-portaled":"kne-system-layout_leFsD","logo-img":"kne-system-layout_2cRWf","expand-btn-wrapper":"kne-system-layout_5D-Oq","expand-btn-bg":"kne-system-layout_p4eOE","expand-btn":"kne-system-layout_8dzE7","menu-inner":"kne-system-layout_7wq3X","menu-list":"kne-system-layout_8gqbZ","username":"kne-system-layout_b7XeQ","user-description":"kne-system-layout_U0YTk","ai-dialog-window":"kne-system-layout_UAJc-","pulse-dialog-window":"kne-system-layout_VjIWn","page-dialog-outer":"kne-system-layout_I7Anv","page-dialog":"kne-system-layout_UhsFd","pulse-page-dialog":"kne-system-layout_H7slV","page-window-content":"kne-system-layout_2mdNn","ai-dialog-window-title":"kne-system-layout_33Tja","ai-dialog-window-content":"kne-system-layout_YmBhl"};
 
 const UserCard = ({
   name,
@@ -87,8 +88,12 @@ const UserCard = ({
   });
 };
 
-var style$2 = {"menu-group":"kne-system-layout_Rfzv4","menu-item-icon":"kne-system-layout_qoDtD","menu-group-split":"kne-system-layout_socoO","menu-item":"kne-system-layout_Xa-2h"};
+var style$2 = {"menu-list":"kne-system-layout_dVWvr","menu-group":"kne-system-layout_Rfzv4","menu-item-icon":"kne-system-layout_qoDtD","menu-group-split":"kne-system-layout_socoO","menu-item":"kne-system-layout_Xa-2h"};
 
+const MENU_ITEM_HEIGHT = 52;
+const MENU_GROUP_HEIGHT = 48;
+const MENU_GROUP_SPLIT_HEIGHT = 17;
+const getItemKey = (item, index) => item.key || item.path || index;
 const Menu = ({
   className,
   menuOpen,
@@ -99,94 +104,169 @@ const Menu = ({
 }) => {
   const location = reactRouterDom.useLocation();
   const navigate = reactRouterDom.useNavigate();
+  const listRef = react.useRef(null);
+  const virtualListRef = react.useRef(null);
+  const [listHeight, setListHeight] = react.useState(0);
   const currentPathname = base ? location.pathname.replace(new RegExp(`^${base}`), '') : location.pathname;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classnames__default["default"]('menu', className, style$2['menu-list']),
-    children: items.map((item, index) => {
-      const active = (() => {
-        if (typeof activeKey === 'string') {
-          return activeKey === item.key;
+  const isItemActive = react.useCallback(item => {
+    if (typeof activeKey === 'string') {
+      return activeKey === item.key;
+    }
+    if (typeof activeKey === 'function') {
+      return activeKey(item, {
+        menuOpen,
+        base
+      });
+    }
+    if (typeof item.path === 'string') {
+      return ensureSlash__default["default"](currentPathname) === ensureSlash__default["default"](item.path);
+    }
+    return false;
+  }, [activeKey, base, currentPathname, menuOpen]);
+  const getEstimatedItemHeight = react.useCallback((item, index) => {
+    const hasGroup = item.group && item.group !== items[index - 1]?.group;
+    if (!hasGroup) {
+      return MENU_ITEM_HEIGHT;
+    }
+    return MENU_ITEM_HEIGHT + (menuOpen ? MENU_GROUP_HEIGHT : MENU_GROUP_SPLIT_HEIGHT);
+  }, [items, menuOpen]);
+  const estimatedItemHeight = react.useMemo(() => {
+    if (!items.length) {
+      return MENU_ITEM_HEIGHT;
+    }
+    const total = items.reduce((sum, item, index) => sum + getEstimatedItemHeight(item, index), 0);
+    return Math.max(MENU_ITEM_HEIGHT, Math.ceil(total / items.length));
+  }, [getEstimatedItemHeight, items]);
+  const listData = react.useMemo(() => items.map((item, index) => ({
+    item,
+    index,
+    key: getItemKey(item, index)
+  })), [items]);
+  const activeIndex = react.useMemo(() => listData.findIndex(({
+    item
+  }) => isItemActive(item)), [isItemActive, listData]);
+  react.useLayoutEffect(() => {
+    const el = listRef.current;
+    if (!el) {
+      return;
+    }
+    const updateHeight = () => {
+      const styles = getComputedStyle(el);
+      const paddingY = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
+      setListHeight(el.clientHeight - paddingY);
+    };
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  react.useLayoutEffect(() => {
+    if (activeIndex < 0 || listHeight <= 0) {
+      return;
+    }
+    virtualListRef.current?.scrollTo({
+      index: activeIndex,
+      align: 'auto'
+    });
+  }, [activeIndex, listHeight, menuOpen, listData.length]);
+  const renderMenuItem = (item, index) => {
+    const active = isItemActive(item);
+    const icon = typeof item.icon === 'function' ? item.icon({
+      menuOpen,
+      active
+    }) : item.icon;
+    const hasGroup = item.group && item.group !== items[index - 1]?.group;
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      title: item.label,
+      onClick: e => {
+        if (active) {
+          return;
         }
-        if (typeof activeKey === 'function') {
-          return activeKey(item, {
+        onChange && onChange(item, {
+          menuOpen,
+          base
+        });
+        if (typeof item.onClick === 'function') {
+          item.onClick(item, {
             menuOpen,
-            base
+            base,
+            event: e
           });
+          return;
         }
-        if (typeof item.path === 'string') {
-          return ensureSlash__default["default"](currentPathname) === ensureSlash__default["default"](item.path);
+        if (item.path) {
+          navigate(ensureSlash__default["default"](`${base}${item.path}`));
         }
-        return false;
-      })();
-      const icon = typeof item.icon === 'function' ? item.icon({
-        menuOpen,
-        active
-      }) : item.icon;
-      const hasGroup = item.group && item.group !== items[index - 1]?.group;
-      return /*#__PURE__*/jsxRuntime.jsxs("div", {
-        title: item.label,
-        onClick: e => {
-          if (active) {
-            return;
+      },
+      children: [hasGroup && menuOpen ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"]('menu-group', style$2['menu-group']),
+        children: item.groupLabel || item.group
+      }) : null, hasGroup && !menuOpen ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"]('menu-group-split', style$2['menu-group-split'])
+      }) : null, /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
+        className: classnames__default["default"]('menu-item', style$2['menu-item'], {
+          ['is-active']: active,
+          ['is-closed']: !menuOpen
+        }),
+        align: "center",
+        gap: 8,
+        children: [(icon => {
+          if (typeof icon === 'string') {
+            return /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
+              className: classnames__default["default"]('menu-item-icon', style$2['menu-item-icon']),
+              type: icon,
+              fontClassName: "system"
+            });
           }
-          onChange && onChange(item, {
-            menuOpen,
-            base
-          });
-          if (typeof item.onClick === 'function') {
-            item.onClick(item, {
-              menuOpen,
-              base,
-              event: e
+          if (/*#__PURE__*/react.isValidElement(icon)) {
+            return /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: classnames__default["default"]('menu-item-icon', style$2['menu-item-icon']),
+              children: icon
             });
-            return;
           }
-          if (item.path) {
-            navigate(ensureSlash__default["default"](`${base}${item.path}`));
+          if (isPlainObject__default["default"](icon) && typeof icon.type === 'string') {
+            return /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
+              ...icon,
+              className: classnames__default["default"]('menu-item-icon', style$2['menu-item-icon'])
+            });
           }
-        },
-        children: [hasGroup && menuOpen ? /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classnames__default["default"]('menu-group', style$2['menu-group']),
-          children: item.groupLabel || item.group
-        }) : null, hasGroup && !menuOpen ? /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classnames__default["default"]('menu-group-split', style$2['menu-group-split'])
-        }) : null, /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
-          className: classnames__default["default"]('menu-item', style$2['menu-item'], {
-            ['is-active']: active,
-            ['is-closed']: !menuOpen
-          }),
-          align: "center",
-          gap: 8,
-          children: [(icon => {
-            if (typeof icon === 'string') {
-              return /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
-                className: classnames__default["default"]('menu-item-icon', style$2['menu-item-icon']),
-                type: icon,
-                fontClassName: "system"
-              });
-            }
-            if (/*#__PURE__*/react.isValidElement(icon)) {
-              return /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: classnames__default["default"]('menu-item-icon', style$2['menu-item-icon']),
-                children: icon
-              });
-            }
-            if (isPlainObject__default["default"](icon) && typeof icon.type === 'string') {
-              return /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
-                ...icon,
-                className: classnames__default["default"]('menu-item-icon', style$2['menu-item-icon'])
-              });
-            }
-            return null;
-          })(icon), menuOpen && item.label]
-        })]
-      }, item.key || item.path || index);
-    })
+          return null;
+        })(icon), menuOpen && item.label]
+      })]
+    }, getItemKey(item, index));
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: listRef,
+    className: classnames__default["default"]('menu', className, style$2['menu-list']),
+    children: listHeight > 0 ? /*#__PURE__*/jsxRuntime.jsx(VirtualList__default["default"], {
+      ref: virtualListRef,
+      data: listData,
+      height: listHeight,
+      itemHeight: estimatedItemHeight,
+      itemKey: "key",
+      virtual: listData.length > 0,
+      children: ({
+        item,
+        index
+      }) => renderMenuItem(item, index)
+    }) : null
   });
 };
 
-var style$1 = {"toolbar":"kne-system-layout_SLK-0","toolbar-list":"kne-system-layout_GTQvM","toolbar-item":"kne-system-layout_fAZ3n","toolbar-item-icon":"kne-system-layout_qOB9o","is-hidden":"kne-system-layout_ss5zk","toolbar-item-label":"kne-system-layout_h48es","toolbar-indicator":"kne-system-layout_1s-bc","toolbar-click":"kne-system-layout_Ys3yu"};
+var style$1 = {"toolbar":"kne-system-layout_SLK-0","toolbar-inline":"kne-system-layout_RgKpk","toolbar-boundary-overlay":"kne-system-layout_VEMgn","toolbar-list":"kne-system-layout_GTQvM","is-viewport":"kne-system-layout_c6f0m","is-boundary":"kne-system-layout_3ctCY","toolbar-item":"kne-system-layout_fAZ3n","toolbar-item-icon":"kne-system-layout_qOB9o","is-hidden":"kne-system-layout_ss5zk","toolbar-item-label":"kne-system-layout_h48es","toolbar-indicator":"kne-system-layout_1s-bc","toolbar-click":"kne-system-layout_Ys3yu"};
 
+const context = /*#__PURE__*/react.createContext({});
+const useContext = () => {
+  return react.useContext(context);
+};
+const Provider = context.Provider;
+
+const resolveTarget = target => {
+  if (!target) {
+    return null;
+  }
+  return typeof target === 'function' ? target() : target;
+};
 const Toolbar = ({
   show = true,
   className,
@@ -198,6 +278,15 @@ const Toolbar = ({
 }) => {
   const location = reactRouterDom.useLocation();
   const navigate = reactRouterDom.useNavigate();
+  const getScrollElement = responsiveUtils.useScrollElement();
+  const getBoundaryElement = responsiveUtils.usePopupContainer();
+  const {
+    mode
+  } = responsiveUtils.useResponsiveContext();
+  const isMobile = responsiveUtils.useIsMobile();
+  const {
+    scrollReady
+  } = useContext();
   const currentPathname = base ? location.pathname.replace(new RegExp(`^${base}`), '') : location.pathname;
   const toolbarMenu = items.filter(item => item.toolbar);
   const itemRefs = react.useRef([]);
@@ -227,6 +316,10 @@ const Toolbar = ({
   });
   const displayIndex = activeIndex >= 0 ? activeIndex : 0;
   const listRef = react.useRef(null);
+  const explicitTarget = resolveTarget(target);
+  const useBoundaryMount = isMobile && mode === 'container' && !explicitTarget;
+  const useViewportFixed = isMobile && mode !== 'container' && !explicitTarget;
+  const boundaryTarget = useBoundaryMount ? getBoundaryElement() : null;
   react.useLayoutEffect(() => {
     if (activeIndex < 0) {
       return;
@@ -250,14 +343,10 @@ const Toolbar = ({
       });
       return;
     }
-
-    // Phase 1: scale up
     setIndicator(prev => ({
       ...prev,
       scale: 1.15
     }));
-
-    // Phase 2: move
     const t1 = setTimeout(() => {
       setIndicator(prev => ({
         ...prev,
@@ -265,8 +354,6 @@ const Toolbar = ({
         width: newWidth
       }));
     }, 120);
-
-    // Phase 3: scale down
     const t2 = setTimeout(() => {
       setIndicator(prev => ({
         ...prev,
@@ -277,10 +364,10 @@ const Toolbar = ({
       clearTimeout(t1);
       clearTimeout(t2);
     };
-  }, [activeIndex, show, target]);
-  const resolvedTarget = target ? typeof target === 'function' ? target() : target : null;
+  }, [activeIndex, show, target, useBoundaryMount, useViewportFixed]);
   react.useEffect(() => {
-    if (!resolvedTarget) {
+    const scrollEl = getScrollElement();
+    if (!scrollEl || typeof scrollEl.addEventListener !== 'function') {
       return;
     }
     const handleScroll = () => {
@@ -292,115 +379,128 @@ const Toolbar = ({
         setScrolling(false);
       }, 500);
     };
-    window.addEventListener('scroll', handleScroll, {
+    scrollEl.addEventListener('scroll', handleScroll, {
       passive: true
     });
-    document.addEventListener('scroll', handleScroll, {
-      passive: true,
-      capture: true
-    });
     return () => {
-      window.removeEventListener('scroll', handleScroll);
-      document.removeEventListener('scroll', handleScroll, {
-        capture: true
-      });
+      scrollEl.removeEventListener('scroll', handleScroll);
       if (scrollTimerRef.current) {
         clearTimeout(scrollTimerRef.current);
       }
     };
-  }, [resolvedTarget]);
+  }, [getScrollElement, show, scrollReady]);
   if (!show) {
     return null;
   }
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classnames__default["default"]('toolbar', style$1['toolbar'], className),
-    children: /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
-      ref: listRef,
-      className: classnames__default["default"]('toolbar-list', style$1['toolbar-list'], {
-        ['is-clicked']: clicked,
-        ['is-scrolling']: scrolling
-      }),
+  const toolbarList = /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
+    ref: listRef,
+    className: classnames__default["default"]('toolbar-list', style$1['toolbar-list'], {
+      ['is-clicked']: clicked,
+      ['is-scrolling']: scrolling,
+      [style$1['is-boundary']]: useBoundaryMount,
+      [style$1['is-viewport']]: useViewportFixed
+    }),
+    style: {
+      '--toolbar-count': toolbarMenu.length || 1
+    },
+    onAnimationEnd: () => {
+      if (clicked) {
+        setClicked(false);
+      }
+    },
+    children: [indicator.visible && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames__default["default"]('toolbar-indicator', style$1['toolbar-indicator']),
       style: {
-        '--toolbar-count': toolbarMenu.length || 1
-      },
-      onAnimationEnd: () => {
-        if (clicked) {
-          setClicked(false);
-        }
-      },
-      children: [indicator.visible && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classnames__default["default"]('toolbar-indicator', style$1['toolbar-indicator']),
-        style: {
-          left: `${indicator.left}px`,
-          width: `${indicator.width}px`,
-          transform: `scale(${indicator.scale})`
-        }
-      }), toolbarMenu.map((item, index) => {
-        const active = index === activeIndex;
-        const icon = typeof item.icon === 'function' ? item.icon({
-          active
-        }) : item.icon;
-        return /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
-          ref: el => {
-            itemRefs.current[index] = el;
-          },
-          vertical: true,
-          flex: 1,
-          justify: "center",
-          align: "center",
-          className: classnames__default["default"]('toolbar-item', style$1['toolbar-item'], {
-            ['is-active']: active,
-            [style$1['is-hidden']]: scrolling && index !== displayIndex
-          }),
-          onClick: e => {
-            if (active) {
-              return;
-            }
-            setClicked(true);
-            onChange && onChange(item, {
-              base
+        left: `${indicator.left}px`,
+        width: `${indicator.width}px`,
+        transform: `scale(${indicator.scale})`
+      }
+    }), toolbarMenu.map((item, index) => {
+      const active = index === activeIndex;
+      const icon = typeof item.icon === 'function' ? item.icon({
+        active
+      }) : item.icon;
+      return /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
+        ref: el => {
+          itemRefs.current[index] = el;
+        },
+        vertical: true,
+        flex: 1,
+        justify: "center",
+        align: "center",
+        className: classnames__default["default"]('toolbar-item', style$1['toolbar-item'], {
+          ['is-active']: active,
+          [style$1['is-hidden']]: scrolling && index !== displayIndex
+        }),
+        onClick: e => {
+          if (active) {
+            return;
+          }
+          setClicked(true);
+          onChange && onChange(item, {
+            base
+          });
+          if (typeof item.onClick === 'function') {
+            item.onClick(item, {
+              base,
+              event: e
             });
-            if (typeof item.onClick === 'function') {
-              item.onClick(item, {
-                menuOpen,
-                base,
-                event: e
-              });
-              return;
-            }
-            if (item.path) {
-              navigate(ensureSlash__default["default"](`${base}${item.path}`));
-            }
-          },
-          children: [(icon => {
-            if (typeof icon === 'string') {
-              return /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
-                className: classnames__default["default"]('toolbar-item-icon', style$1['toolbar-item-icon']),
-                type: icon,
-                fontClassName: "system"
-              });
-            }
-            if (/*#__PURE__*/react.isValidElement(icon)) {
-              return /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: classnames__default["default"]('toolbar-item-icon', style$1['toolbar-item-icon']),
-                children: icon
-              });
-            }
-            if (isPlainObject__default["default"](icon) && typeof icon.type === 'string') {
-              return /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
-                ...icon,
-                className: classnames__default["default"]('toolbar-item-icon', style$1['toolbar-item-icon'])
-              });
-            }
-            return null;
-          })(icon), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: classnames__default["default"]('toolbar-item-label', style$1['toolbar-item-label']),
-            children: item.label
-          })]
-        }, item.key || item.path || index);
-      })]
-    }), resolvedTarget || document.body)
+            return;
+          }
+          if (item.path) {
+            navigate(ensureSlash__default["default"](`${base}${item.path}`));
+          }
+        },
+        children: [(icon => {
+          if (typeof icon === 'string') {
+            return /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
+              className: classnames__default["default"]('toolbar-item-icon', style$1['toolbar-item-icon']),
+              type: icon,
+              fontClassName: "system"
+            });
+          }
+          if (/*#__PURE__*/react.isValidElement(icon)) {
+            return /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: classnames__default["default"]('toolbar-item-icon', style$1['toolbar-item-icon']),
+              children: icon
+            });
+          }
+          if (isPlainObject__default["default"](icon) && typeof icon.type === 'string') {
+            return /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
+              ...icon,
+              className: classnames__default["default"]('toolbar-item-icon', style$1['toolbar-item-icon'])
+            });
+          }
+          return null;
+        })(icon), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classnames__default["default"]('toolbar-item-label', style$1['toolbar-item-label']),
+          children: item.label
+        })]
+      }, item.key || item.path || index);
+    })]
   });
+  if (useBoundaryMount && boundaryTarget) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames__default["default"]('toolbar', style$1['toolbar'], className),
+      children: /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"]('toolbar-boundary-overlay', style$1['toolbar-boundary-overlay']),
+        children: toolbarList
+      }), boundaryTarget)
+    });
+  }
+  if (useViewportFixed) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames__default["default"]('toolbar', style$1['toolbar'], style$1['toolbar-inline'], className),
+      children: toolbarList
+    });
+  }
+  if (explicitTarget) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames__default["default"]('toolbar', style$1['toolbar'], className),
+      children: /*#__PURE__*/reactDom.createPortal(toolbarList, explicitTarget)
+    });
+  }
+  return null;
 };
 
 const locale$1 = {
@@ -449,66 +549,90 @@ const ErrorBoundary = props => {
   });
 };
 
-const context = /*#__PURE__*/react.createContext({});
-const useContext = () => {
-  return react.useContext(context);
+const hasParentResponsiveProvider = parent => {
+  return parent.getBoundaryElement !== responsiveUtils.defaultResponsiveContextValue.getBoundaryElement || parent.getScrollElement !== responsiveUtils.defaultResponsiveContextValue.getScrollElement;
 };
-const Provider = context.Provider;
-
-const isMobile = () => {
-  return /iPhone|iPod|Android|ios|iPad/i.test(navigator.userAgent) || window.innerWidth < 768;
+const resolvePageScrollElement = (pageScrollRef, openScrollbar, deviceIsMobile) => {
+  if (deviceIsMobile && !openScrollbar) {
+    const anchor = pageScrollRef.current;
+    if (anchor && anchor.parentElement) {
+      const parentScroll = responsiveUtils.findResponsiveScroll(anchor.parentElement);
+      if (parentScroll) {
+        return parentScroll;
+      }
+    }
+    return responsiveUtils.getDefaultScrollElement();
+  }
+  const anchor = pageScrollRef.current;
+  if (anchor && typeof anchor.getScrollElement === 'function') {
+    return anchor.getScrollElement();
+  }
+  if (anchor && anchor.nodeType === 1 && openScrollbar) {
+    const wrapper = anchor.querySelector('.simplebar-content-wrapper');
+    if (wrapper) {
+      return wrapper;
+    }
+  }
+  return responsiveUtils.findResponsiveScroll(anchor) || responsiveUtils.getDefaultScrollElement();
 };
-
-const useIsMobile = () => {
-  const _useState = react.useState(() => isMobile()),
-    isMobile$1 = _useState[0],
-    setIsMobile = _useState[1];
-  react.useEffect(() => {
-    const handler = throttle__default["default"](() => {
-      setIsMobile(isMobile());
-    }, 500);
-    window.addEventListener('resize', handler);
-    return () => {
-      window.removeEventListener('resize', handler);
-    };
-  }, []);
-  return isMobile$1;
+const LayoutResponsiveScope = _ref => {
+  let boundaryRef = _ref.boundaryRef,
+    scrollRef = _ref.scrollRef,
+    getScrollElement = _ref.getScrollElement,
+    children = _ref.children;
+  const parent = responsiveUtils.useResponsiveContext();
+  if (hasParentResponsiveProvider(parent)) {
+    return children;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(responsiveUtils.ResponsiveProvider, {
+    boundaryRef: boundaryRef,
+    scrollRef: scrollRef,
+    getScrollElement: getScrollElement,
+    children: children
+  });
 };
-
 const LayoutMenuOpenKey = 'LAYOUT_MENU_OPEN';
-const Layout = _ref => {
-  let className = _ref.className,
-    menu = _ref.menu,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? 'linear-gradient(0deg, #BBCFE7 0%, #BBCFE7 100%), #FFFFFF' : _ref$background,
-    _ref$menuMaxWidth = _ref.menuMaxWidth,
-    menuMaxWidth = _ref$menuMaxWidth === void 0 ? '254px' : _ref$menuMaxWidth,
-    _ref$menuMinWidth = _ref.menuMinWidth,
-    menuMinWidth = _ref$menuMinWidth === void 0 ? '84px' : _ref$menuMinWidth,
-    logo = _ref.logo,
-    menuHeader = _ref.menuHeader,
-    userInfo = _ref.userInfo,
-    _ref$aiDialog = _ref.aiDialog,
-    aiDialog = _ref$aiDialog === void 0 ? null : _ref$aiDialog,
-    openScrollbarProps = _ref.openScrollbar,
-    isMobileProps = _ref.isMobile,
-    toolbarTarget = _ref.toolbarTarget,
-    children = _ref.children;
+const Layout = _ref2 => {
+  let className = _ref2.className,
+    menu = _ref2.menu,
+    _ref2$background = _ref2.background,
+    background = _ref2$background === void 0 ? 'linear-gradient(0deg, #BBCFE7 0%, #BBCFE7 100%), #FFFFFF' : _ref2$background,
+    _ref2$menuMaxWidth = _ref2.menuMaxWidth,
+    menuMaxWidth = _ref2$menuMaxWidth === void 0 ? '254px' : _ref2$menuMaxWidth,
+    _ref2$menuMinWidth = _ref2.menuMinWidth,
+    menuMinWidth = _ref2$menuMinWidth === void 0 ? '84px' : _ref2$menuMinWidth,
+    logo = _ref2.logo,
+    menuHeader = _ref2.menuHeader,
+    userInfo = _ref2.userInfo,
+    _ref2$aiDialog = _ref2.aiDialog,
+    aiDialog = _ref2$aiDialog === void 0 ? null : _ref2$aiDialog,
+    openScrollbarProps = _ref2.openScrollbar,
+    isMobileProps = _ref2.isMobile,
+    toolbarTarget = _ref2.toolbarTarget,
+    children = _ref2.children;
   const localMenuOpen = localStorage__default["default"].getItem(LayoutMenuOpenKey);
-  const isMobile = useIsMobile();
+  const isMobile = responsiveUtils.useIsMobile();
+  const responsiveContext = responsiveUtils.useResponsiveContext();
   const deviceIsMobile = typeof isMobileProps === 'boolean' ? isMobileProps : isMobile;
-  const _useState = react.useState(typeof localMenuOpen === 'boolean' && !deviceIsMobile ? localMenuOpen : !deviceIsMobile),
-    menuOpen = _useState[0],
-    setMenuOpen = _useState[1];
-  const _useState2 = react.useState(true),
-    toolbarShow = _useState2[0],
-    setToolbarShow = _useState2[1];
+  const useMenuPortal = deviceIsMobile && responsiveContext.mode === 'container';
+  const _useState = react.useState(null),
+    menuPortalTarget = _useState[0],
+    setMenuPortalTarget = _useState[1];
+  const _useState2 = react.useState(typeof localMenuOpen === 'boolean' && !deviceIsMobile ? localMenuOpen : !deviceIsMobile),
+    menuOpen = _useState2[0],
+    setMenuOpen = _useState2[1];
   const _useState3 = react.useState(true),
-    navbarShow = _useState3[0],
-    setNavbarShow = _useState3[1];
-  const _useState4 = react.useState('closed'),
-    aiType = _useState4[0],
-    setAiType = _useState4[1];
+    toolbarShow = _useState3[0],
+    setToolbarShow = _useState3[1];
+  const _useState4 = react.useState(true),
+    navbarShow = _useState4[0],
+    setNavbarShow = _useState4[1];
+  const _useState5 = react.useState('closed'),
+    aiType = _useState5[0],
+    setAiType = _useState5[1];
+  const _useState6 = react.useState(0),
+    scrollReady = _useState6[0],
+    setScrollReady = _useState6[1];
   const openScrollbar = typeof openScrollbarProps === 'boolean' ? openScrollbarProps : !deviceIsMobile && !window.__COMPONENTS_CORE_SIMPLE_BAR_DISABLED;
   const userAvatar = userInfo == null ? void 0 : userInfo.avatar;
   const contextValue = react.useMemo(() => {
@@ -517,196 +641,245 @@ const Layout = _ref => {
       setNavbarShow,
       setMenuOpen,
       deviceIsMobile,
+      scrollReady,
       logo: Object.assign({}, logo ? logo : {
         src: defaultLogo__default["default"]
       }),
       userAvatar
     };
-  }, [deviceIsMobile, logo, userAvatar]);
+  }, [deviceIsMobile, logo, userAvatar, scrollReady]);
   const topRef = react.useRef(null);
   const pageRef = react.useRef(null);
-  const _useState5 = react.useState(toolbarTarget || null),
-    computedToolbarTarget = _useState5[0],
-    setComputedToolbarTarget = _useState5[1];
+  const layoutBoundaryRef = react.useRef(null);
+  const pageScrollRef = react.useRef(null);
   const location = reactRouterDom.useLocation();
-  react.useLayoutEffect(() => {
-    if (!toolbarTarget) {
-      setComputedToolbarTarget(document.body);
+  const getPageScrollElement = react.useCallback(() => {
+    return resolvePageScrollElement(pageScrollRef, openScrollbar, deviceIsMobile);
+  }, [openScrollbar, deviceIsMobile]);
+  const handlePageScrollRef = react.useCallback(node => {
+    pageScrollRef.current = node;
+    if (node) {
+      setScrollReady(version => version + 1);
+    }
+  }, []);
+  react.useEffect(() => {
+    if (!useMenuPortal) {
+      setMenuPortalTarget(null);
+      return;
     }
-  }, [toolbarTarget]);
+    const target = typeof responsiveContext.getBoundaryElement === 'function' ? responsiveContext.getBoundaryElement() : null;
+    setMenuPortalTarget(target || null);
+  }, [useMenuPortal, responsiveContext, scrollReady]);
   react.useEffect(() => {
-    topRef.current && topRef.current.scrollIntoView();
-  }, [location]);
+    var _topRef$current;
+    const scrollEl = getPageScrollElement();
+    if (scrollEl && typeof scrollEl.scrollTo === 'function') {
+      scrollEl.scrollTo(0, 0);
+      return;
+    }
+    (_topRef$current = topRef.current) == null || _topRef$current.scrollIntoView();
+  }, [location, getPageScrollElement]);
   const userCard = /*#__PURE__*/jsxRuntime.jsx(UserCard, _extends({
     menuOpen: menuOpen
   }, Object.assign({}, userInfo)));
-  return /*#__PURE__*/jsxRuntime.jsxs(Provider, {
-    value: contextValue,
+  const menuPortalVars = useMenuPortal ? {
+    '--menu-max-width': menuMaxWidth,
+    '--menu-min-width': menuMinWidth,
+    '--background': background
+  } : undefined;
+  const layerMenuNode = deviceIsMobile ? /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classnames__default["default"]('layer-menu', style$3['layer-menu'], {
+      ['open']: menuOpen,
+      [style$3['open']]: menuOpen,
+      [style$3['is-portaled']]: useMenuPortal
+    }),
+    style: menuPortalVars,
+    onClick: () => {
+      setMenuOpen(false);
+    }
+  }) : null;
+  const menuNode = /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classnames__default["default"]('menu', style$3['menu'], {
+      ['open']: menuOpen,
+      [style$3['open']]: menuOpen,
+      [style$3['is-portaled']]: useMenuPortal
+    }),
+    style: menuPortalVars,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      ref: topRef
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classnames__default["default"](className, 'layout', style$3['layout'], {
-        'is-mobile': deviceIsMobile,
-        [style$3['is-mobile']]: deviceIsMobile,
-        'has-toolbar': deviceIsMobile && toolbarShow,
-        [style$3['has-toolbar']]: deviceIsMobile && toolbarShow,
-        'has-navbar': deviceIsMobile && navbarShow,
-        [style$3['has-navbar']]: deviceIsMobile && navbarShow
-      }),
-      style: {
-        '--menu-max-width': menuMaxWidth,
-        '--menu-min-width': menuMinWidth,
-        '--background': background
+      className: classnames__default["default"]('logo', style$3['logo']),
+      children: /*#__PURE__*/jsxRuntime.jsx(reactFile.Image, _extends({
+        className: style$3['logo-img']
+      }, contextValue.logo))
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames__default["default"]('expand-btn-wrapper', style$3['expand-btn-wrapper']),
+      onClick: () => {
+        setMenuOpen(menuOpen => {
+          localStorage__default["default"].setItem(LayoutMenuOpenKey, !menuOpen);
+          return !menuOpen;
+        });
       },
-      children: [deviceIsMobile && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classnames__default["default"]('layer-menu', style$3['layer-menu'], {
-          ['open']: menuOpen,
-          [style$3['open']]: menuOpen
-        }),
+      children: /*#__PURE__*/jsxRuntime.jsx(expand_bdCTnjYJ_svg.ReactComponent, {
+        className: classnames__default["default"]('expand-btn', style$3['expand-btn'], {
+          'is-closed': !menuOpen
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classnames__default["default"]('menu-inner', style$3['menu-inner']),
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"]('menu-header', style$3['menu-header']),
+        children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
+          children: menuHeader ? typeof menuHeader === 'function' ? menuHeader({
+            menuOpen,
+            userCard
+          }) : menuHeader : userCard
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Menu, _extends({
+          className: classnames__default["default"]('menu-list', style$3['menu-list']),
+          menuOpen: menuOpen
+        }, menu, {
+          onChange: () => {
+            deviceIsMobile && setMenuOpen(false);
+          }
+        }))
+      }), aiDialog && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"]('ai-entry', style$3['ai-entry']),
         onClick: () => {
-          setMenuOpen(false);
-        }
-      }), /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: classnames__default["default"]('menu', style$3['menu'], {
-            ['open']: menuOpen,
-            [style$3['open']]: menuOpen
-          }),
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: classnames__default["default"]('logo', style$3['logo']),
-            children: /*#__PURE__*/jsxRuntime.jsx(reactFile.Image, _extends({
-              className: style$3['logo-img']
-            }, contextValue.logo))
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: classnames__default["default"]('expand-btn-wrapper', style$3['expand-btn-wrapper']),
-            onClick: () => {
-              setMenuOpen(menuOpen => {
-                localStorage__default["default"].setItem(LayoutMenuOpenKey, !menuOpen);
-                return !menuOpen;
-              });
-            },
-            children: /*#__PURE__*/jsxRuntime.jsx(expand_bdCTnjYJ_svg.ReactComponent, {
-              className: classnames__default["default"]('expand-btn', style$3['expand-btn'], {
-                'is-closed': !menuOpen
-              })
-            })
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: classnames__default["default"]('menu-inner', style$3['menu-inner']),
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-              className: classnames__default["default"]('menu-header', style$3['menu-header']),
-              children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
-                children: menuHeader ? typeof menuHeader === 'function' ? menuHeader({
-                  menuOpen,
-                  userCard
-                }) : menuHeader : userCard
-              })
-            }), /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
-              children: /*#__PURE__*/jsxRuntime.jsx(Menu, _extends({
-                className: classnames__default["default"]('menu-list', style$3['menu-list']),
-                menuOpen: menuOpen
-              }, menu, {
-                onChange: () => {
-                  deviceIsMobile && setMenuOpen(false);
-                }
-              }))
-            }), aiDialog && /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: classnames__default["default"]('ai-entry', style$3['ai-entry']),
-              onClick: () => {
-                setAiType('small');
-              },
-              children: /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
-                type: "system-prompt",
-                colorful: true
-              })
-            })]
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsx(antd.Flex, {
-          flex: 1,
-          ref: pageRef,
-          className: classnames__default["default"]('page', style$3['page']),
-          children: /*#__PURE__*/jsxRuntime.jsxs(antd.Row, {
-            className: classnames__default["default"]('page-content', style$3['page-content']),
-            children: [!deviceIsMobile && aiDialog && aiType === 'inner' && /*#__PURE__*/jsxRuntime.jsx(antd.Col, {
-              span: 8,
-              className: classnames__default["default"]('page-dialog-outer', style$3['page-dialog-outer']),
-              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: classnames__default["default"]('page-dialog', style$3['page-dialog']),
-                children: [/*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
-                  className: classnames__default["default"]('ai-dialog-window-title', style$3['ai-dialog-window-title']),
-                  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                    children: aiDialog.title
-                  }), /*#__PURE__*/jsxRuntime.jsx(antd.Flex, {
-                    gap: 10,
-                    children: /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
-                      className: "btn",
-                      type: "icon-a-Typeclose",
-                      fontClassName: "system",
-                      onClick: () => {
-                        setAiType('closed');
-                      }
+          setAiType('small');
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
+          type: "system-prompt",
+          colorful: true
+        })
+      })]
+    })]
+  });
+  const portalMenu = useMenuPortal && menuPortalTarget;
+  return /*#__PURE__*/jsxRuntime.jsx(LayoutResponsiveScope, {
+    boundaryRef: layoutBoundaryRef,
+    scrollRef: pageScrollRef,
+    getScrollElement: getPageScrollElement,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Provider, {
+      value: contextValue,
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: topRef
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        ref: layoutBoundaryRef,
+        className: classnames__default["default"](className, 'layout', style$3['layout'], responsiveUtils.RESPONSIVE_BOUNDARY_CLASS, {
+          'is-mobile': deviceIsMobile,
+          [style$3['is-mobile']]: deviceIsMobile,
+          'has-toolbar': deviceIsMobile && toolbarShow,
+          [style$3['has-toolbar']]: deviceIsMobile && toolbarShow,
+          'has-navbar': deviceIsMobile && navbarShow,
+          [style$3['has-navbar']]: deviceIsMobile && navbarShow
+        }),
+        style: {
+          '--menu-max-width': menuMaxWidth,
+          '--menu-min-width': menuMinWidth,
+          '--background': background
+        },
+        children: [!portalMenu && layerMenuNode, /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
+          style: {
+            flex: 1,
+            minHeight: 0,
+            width: '100%',
+            height: 0
+          },
+          children: [!portalMenu && menuNode, portalMenu && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: classnames__default["default"](style$3['menu-boundary-overlay']),
+            style: menuPortalVars,
+            children: [layerMenuNode, menuNode]
+          }), menuPortalTarget), /*#__PURE__*/jsxRuntime.jsx(antd.Flex, {
+            flex: 1,
+            ref: pageRef,
+            className: classnames__default["default"]('page', style$3['page']),
+            children: /*#__PURE__*/jsxRuntime.jsxs(antd.Row, {
+              className: classnames__default["default"]('page-content', style$3['page-content']),
+              children: [!deviceIsMobile && aiDialog && aiType === 'inner' && /*#__PURE__*/jsxRuntime.jsx(antd.Col, {
+                span: 8,
+                className: classnames__default["default"]('page-dialog-outer', style$3['page-dialog-outer']),
+                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: classnames__default["default"]('page-dialog', style$3['page-dialog']),
+                  children: [/*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
+                    className: classnames__default["default"]('ai-dialog-window-title', style$3['ai-dialog-window-title']),
+                    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                      children: aiDialog.title
+                    }), /*#__PURE__*/jsxRuntime.jsx(antd.Flex, {
+                      gap: 10,
+                      children: /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
+                        className: "btn",
+                        type: "icon-a-Typeclose",
+                        fontClassName: "system",
+                        onClick: () => {
+                          setAiType('closed');
+                        }
+                      })
+                    })]
+                  }), /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
+                    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: classnames__default["default"]('page-window-content', style$3['page-window-content']),
+                      children: aiDialog.content
                     })
                   })]
-                }), /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
-                  children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                    className: classnames__default["default"]('page-window-content', style$3['page-window-content']),
-                    children: aiDialog.content
+                })
+              }), /*#__PURE__*/jsxRuntime.jsx(antd.Col, {
+                span: !deviceIsMobile && aiDialog && aiType === 'inner' ? 16 : 24,
+                className: responsiveUtils.RESPONSIVE_CONTAINER_CLASS,
+                children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
+                  children: openScrollbar ? /*#__PURE__*/jsxRuntime.jsx(SimpleBar__default["default"], {
+                    ref: handlePageScrollRef,
+                    className: classnames__default["default"]('page-children', style$3['page-children'], responsiveUtils.RESPONSIVE_SCROLL_CLASS, {
+                      ['has-left']: aiType === 'inner'
+                    }),
+                    children: children
+                  }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+                    ref: handlePageScrollRef,
+                    className: classnames__default["default"]('page-children', style$3['page-children'], !deviceIsMobile && 'is-scroller', !deviceIsMobile && style$3['is-scroller'], !deviceIsMobile && responsiveUtils.RESPONSIVE_SCROLL_CLASS, {
+                      ['has-left']: aiType === 'inner'
+                    }),
+                    children: children
                   })
-                })]
-              })
-            }), /*#__PURE__*/jsxRuntime.jsx(antd.Col, {
-              span: !deviceIsMobile && aiDialog && aiType === 'inner' ? 16 : 24,
-              children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
-                children: openScrollbar ? /*#__PURE__*/jsxRuntime.jsx(SimpleBar__default["default"], {
-                  className: classnames__default["default"]('page-children', style$3['page-children'], {
-                    ['has-left']: aiType === 'inner'
-                  }),
-                  children: children
-                }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: classnames__default["default"]('page-children', 'is-scroller', style$3['page-children'], style$3['is-scroller'], {
-                    ['has-left']: aiType === 'inner'
-                  }),
-                  children: children
                 })
-              })
-            })]
-          })
-        }), aiDialog && aiType === 'small' && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: classnames__default["default"]('ai-dialog-window', style$3['ai-dialog-window']),
-          children: [/*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
-            className: classnames__default["default"]('ai-dialog-window-title', style$3['ai-dialog-window-title']),
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-              children: aiDialog.title
-            }), /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
-              gap: 10,
-              children: [/*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
-                className: "btn",
-                type: "icon-a-Typeopen_in_full",
-                fontClassName: "system",
-                onClick: () => {
-                  setAiType('inner');
-                }
-              }), /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
-                className: "btn",
-                type: "icon-a-Typeclose",
-                fontClassName: "system",
-                onClick: () => {
-                  setAiType('closed');
-                }
               })]
-            })]
-          }), /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: classnames__default["default"]('ai-dialog-window-content', style$3['ai-dialog-window-content']),
-              children: aiDialog.content
             })
+          }), aiDialog && aiType === 'small' && /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: classnames__default["default"]('ai-dialog-window', style$3['ai-dialog-window']),
+            children: [/*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
+              className: classnames__default["default"]('ai-dialog-window-title', style$3['ai-dialog-window-title']),
+              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                children: aiDialog.title
+              }), /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
+                gap: 10,
+                children: [/*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
+                  className: "btn",
+                  type: "icon-a-Typeopen_in_full",
+                  fontClassName: "system",
+                  onClick: () => {
+                    setAiType('inner');
+                  }
+                }), /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
+                  className: "btn",
+                  type: "icon-a-Typeclose",
+                  fontClassName: "system",
+                  onClick: () => {
+                    setAiType('closed');
+                  }
+                })]
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: classnames__default["default"]('ai-dialog-window-content', style$3['ai-dialog-window-content']),
+                children: aiDialog.content
+              })
+            })]
           })]
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx(Toolbar, _extends({}, menu, {
-        className: classnames__default["default"](style$3['toolbar']),
-        show: deviceIsMobile && toolbarShow,
-        target: computedToolbarTarget
-      }))]
-    })]
+        }), /*#__PURE__*/jsxRuntime.jsx(Toolbar, _extends({}, menu, {
+          className: classnames__default["default"](style$3['toolbar']),
+          show: deviceIsMobile && toolbarShow,
+          target: toolbarTarget
+        }))]
+      })]
+    })
   });
 };
 
@@ -741,8 +914,10 @@ const Page = _ref => {
     setNavbarShow = _useContext.setNavbarShow,
     setMenuOpen = _useContext.setMenuOpen,
     deviceIsMobile = _useContext.deviceIsMobile,
-    userAvatar = _useContext.userAvatar;
+    userAvatar = _useContext.userAvatar,
+    scrollReady = _useContext.scrollReady;
   const navigate = reactRouterDom.useNavigate();
+  const getScrollElement = responsiveUtils.useScrollElement();
   const navbarRef = react.useRef(null);
   const _useState = react.useState(false),
     isScrolled = _useState[0],
@@ -755,16 +930,20 @@ const Page = _ref => {
     if (!deviceIsMobile || !navbar) {
       return;
     }
+    const scrollEl = getScrollElement();
+    if (!scrollEl || typeof scrollEl.addEventListener !== 'function') {
+      return;
+    }
     const handleScroll = () => {
       const threshold = navbarRef.current ? navbarRef.current.offsetHeight : 48;
-      setIsScrolled(window.scrollY > threshold);
+      setIsScrolled(scrollEl.scrollTop > threshold);
     };
     handleScroll();
-    window.addEventListener('scroll', handleScroll, {
+    scrollEl.addEventListener('scroll', handleScroll, {
       passive: true
     });
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [deviceIsMobile, navbar]);
+    return () => scrollEl.removeEventListener('scroll', handleScroll);
+  }, [deviceIsMobile, navbar, getScrollElement, scrollReady]);
   const navbarEl = navbar ? /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
     ref: navbarRef,
     justify: "space-between",
@@ -866,6 +1045,13 @@ const Page = _ref => {
 };
 Page.PageLoading = PageLoading;
 
+const isMobile = () => {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return false;
+  }
+  return window.matchMedia(responsiveUtils.IS_MOBILE_QUERY).matches;
+};
+
 const transparentBgContainer = {
   colorBgContainer: 'transparent'
 };
@@ -876,13 +1062,60 @@ const themeToken = {
   }, {}))
 };
 
-Promise.resolve().then(function () { return require('./index-b1c94af4.js'); });
+Promise.resolve().then(function () { return require('./index-0c46f1c7.js'); });
 
+Object.defineProperty(exports, 'MOBILE_BREAKPOINT', {
+  enumerable: true,
+  get: function () { return responsiveUtils.MOBILE_BREAKPOINT; }
+});
+Object.defineProperty(exports, 'RESPONSIVE_BOUNDARY_CLASS', {
+  enumerable: true,
+  get: function () { return responsiveUtils.RESPONSIVE_BOUNDARY_CLASS; }
+});
+Object.defineProperty(exports, 'RESPONSIVE_CONTAINER_CLASS', {
+  enumerable: true,
+  get: function () { return responsiveUtils.RESPONSIVE_CONTAINER_CLASS; }
+});
+Object.defineProperty(exports, 'RESPONSIVE_SCROLL_CLASS', {
+  enumerable: true,
+  get: function () { return responsiveUtils.RESPONSIVE_SCROLL_CLASS; }
+});
+Object.defineProperty(exports, 'ResponsiveProvider', {
+  enumerable: true,
+  get: function () { return responsiveUtils.ResponsiveProvider; }
+});
+Object.defineProperty(exports, 'mobileBreakpoint', {
+  enumerable: true,
+  get: function () { return responsiveUtils.MOBILE_BREAKPOINT; }
+});
+Object.defineProperty(exports, 'useBreakpoint', {
+  enumerable: true,
+  get: function () { return responsiveUtils.useBreakpoint; }
+});
+Object.defineProperty(exports, 'useIsMobile', {
+  enumerable: true,
+  get: function () { return responsiveUtils.useIsMobile; }
+});
+Object.defineProperty(exports, 'useMediaQuery', {
+  enumerable: true,
+  get: function () { return responsiveUtils.useMediaQuery; }
+});
+Object.defineProperty(exports, 'usePopupContainer', {
+  enumerable: true,
+  get: function () { return responsiveUtils.usePopupContainer; }
+});
+Object.defineProperty(exports, 'useResponsiveContext', {
+  enumerable: true,
+  get: function () { return responsiveUtils.useResponsiveContext; }
+});
+Object.defineProperty(exports, 'useScrollElement', {
+  enumerable: true,
+  get: function () { return responsiveUtils.useScrollElement; }
+});
 exports.Layout = Layout;
 exports.Page = Page;
 exports["default"] = Layout;
 exports.isMobile = isMobile;
 exports.themeToken = themeToken;
-exports.useIsMobile = useIsMobile;
 exports.useLayoutContext = useContext;
 //# sourceMappingURL=index.js.map