@kne/system-layout 0.2.0-alpha.2 → 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,7 +9,8 @@ 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');
@@ -16,6 +18,8 @@ var reactIntl = require('@kne/react-intl');
 var SimpleBar = require('simplebar-react');
 require('simplebar-react/dist/simplebar.min.css');
 var ButtonGroup = require('@kne/button-group');
+var merge = require('lodash/merge');
+var transform = require('lodash/transform');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,10 +28,13 @@ 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 ButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(ButtonGroup);
+var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
+var transform__default = /*#__PURE__*/_interopDefaultLegacy(transform);
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -39,7 +46,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var style$3 = {"layout":"_sK89O","has-toolbar":"_gyKfI","menu":"_-LpWn","open":"_G-zuN","layer-menu":"_6TCwG","ai-entry":"_5qnw5","page":"_HnwkM","toolbar":"_h8PAW","page-children":"_OM1Q2","is-mobile":"_udBgQ","menu-inner":"_7wq3X","logo":"_-T-Dc","menu-header":"_LOrmu","logo-img":"_2cRWf","expand-btn-wrapper":"_5D-Oq","expand-btn-bg":"_p4eOE","expand-btn":"_8dzE7","username":"_b7XeQ","user-description":"_U0YTk","menu-list":"_8gqbZ","ai-dialog-window":"_UAJc-","pulse-dialog-window":"_VjIWn","page-dialog-outer":"_I7Anv","page-dialog":"_UhsFd","pulse-page-dialog":"_H7slV","page-window-content":"_2mdNn","is-scroller":"_6gjkS","page-content":"_nyAa2","ai-dialog-window-title":"_33Tja","ai-dialog-window-content":"_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,
@@ -47,7 +54,8 @@ const UserCard = ({
   email,
   phone,
   description,
-  menuOpen
+  menuOpen,
+  extra
 }) => {
   if (!menuOpen) {
     return /*#__PURE__*/jsxRuntime.jsx(reactFile.Image.Avatar, {
@@ -75,13 +83,17 @@ const UserCard = ({
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: classnames__default["default"]('user-description', style$3['user-description']),
         children: email || phone || description || '-'
-      })]
+      }), extra]
     })]
   });
 };
 
-var style$2 = {"menu-group":"_Rfzv4","menu-item-icon":"_qoDtD","menu-group-split":"_socoO","menu-item":"_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,
@@ -92,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":"_SLK-0","toolbar-list":"_GTQvM","toolbar-item":"_fAZ3n","toolbar-item-icon":"_qOB9o","toolbar-item-label":"_h48es"};
+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,
@@ -191,89 +278,229 @@ 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([]);
+  const firstRenderRef = react.useRef(true);
+  const [indicator, setIndicator] = react.useState({
+    left: 0,
+    width: 0,
+    scale: 1,
+    visible: false
+  });
+  const [clicked, setClicked] = react.useState(false);
+  const [scrolling, setScrolling] = react.useState(false);
+  const scrollTimerRef = react.useRef(null);
+  const activeIndex = toolbarMenu.findIndex(item => {
+    if (typeof activeKey === 'string') {
+      return activeKey === item.key;
+    }
+    if (typeof activeKey === 'function') {
+      return activeKey(item, {
+        base
+      });
+    }
+    if (typeof item.path === 'string') {
+      return ensureSlash__default["default"](currentPathname) === ensureSlash__default["default"](item.path);
+    }
+    return false;
+  });
+  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;
+    }
+    const item = itemRefs.current[activeIndex];
+    const list = listRef.current;
+    if (!item || !list) {
+      return;
+    }
+    const itemRect = item.getBoundingClientRect();
+    const listRect = list.getBoundingClientRect();
+    const newLeft = itemRect.left - listRect.left;
+    const newWidth = itemRect.width;
+    if (firstRenderRef.current) {
+      firstRenderRef.current = false;
+      setIndicator({
+        left: newLeft,
+        width: newWidth,
+        scale: 1,
+        visible: true
+      });
+      return;
+    }
+    setIndicator(prev => ({
+      ...prev,
+      scale: 1.15
+    }));
+    const t1 = setTimeout(() => {
+      setIndicator(prev => ({
+        ...prev,
+        left: newLeft,
+        width: newWidth
+      }));
+    }, 120);
+    const t2 = setTimeout(() => {
+      setIndicator(prev => ({
+        ...prev,
+        scale: 1
+      }));
+    }, 380);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+    };
+  }, [activeIndex, show, target, useBoundaryMount, useViewportFixed]);
+  react.useEffect(() => {
+    const scrollEl = getScrollElement();
+    if (!scrollEl || typeof scrollEl.addEventListener !== 'function') {
+      return;
+    }
+    const handleScroll = () => {
+      setScrolling(true);
+      if (scrollTimerRef.current) {
+        clearTimeout(scrollTimerRef.current);
+      }
+      scrollTimerRef.current = setTimeout(() => {
+        setScrolling(false);
+      }, 500);
+    };
+    scrollEl.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return () => {
+      scrollEl.removeEventListener('scroll', handleScroll);
+      if (scrollTimerRef.current) {
+        clearTimeout(scrollTimerRef.current);
+      }
+    };
+  }, [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.jsx(antd.Flex, {
-      className: classnames__default["default"]('toolbar-list', style$1['toolbar-list']),
-      children: toolbarMenu.map((item, index) => {
-        const active = (() => {
-          if (typeof activeKey === 'string') {
-            return activeKey === item.key;
+  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: {
+        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;
           }
-          if (typeof activeKey === 'function') {
-            return activeKey(item, {
-              base
+          setClicked(true);
+          onChange && onChange(item, {
+            base
+          });
+          if (typeof item.onClick === 'function') {
+            item.onClick(item, {
+              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({
-          active
-        }) : item.icon;
-        return /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
-          vertical: true,
-          flex: 1,
-          justify: "center",
-          align: "center",
-          className: classnames__default["default"]('toolbar-item', style$1['toolbar-item'], {
-            ['is-active']: active
-          }),
-          onClick: e => {
-            if (active) {
-              return;
-            }
-            onChange && onChange(item, {
-              base
+        },
+        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 (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);
-      })
-    }), target ? typeof target === 'function' ? target() : target : document.body)
+          }
+          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 = {
@@ -322,313 +549,573 @@ const ErrorBoundary = props => {
   });
 };
 
-const isMobile = () => {
-  return /iPhone|iPod|Android|ios|iPad/i.test(navigator.userAgent);
+const hasParentResponsiveProvider = parent => {
+  return parent.getBoundaryElement !== responsiveUtils.defaultResponsiveContextValue.getBoundaryElement || parent.getScrollElement !== responsiveUtils.defaultResponsiveContextValue.getScrollElement;
 };
-
-const context = /*#__PURE__*/react.createContext({});
-const useContext = () => {
-  return react.useContext(context);
+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 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 {
-  Provider,
-  Consumer
-} = context;
-
 const LayoutMenuOpenKey = 'LAYOUT_MENU_OPEN';
-const Layout = _ref => {
-  let {
-    className,
-    menu,
-    background = 'linear-gradient(0deg, #BBCFE7 0%, #BBCFE7 100%), #FFFFFF',
-    menuMaxWidth = '254px',
-    menuMinWidth = '84px',
-    logo,
-    menuHeader,
-    userInfo,
-    aiDialog = null,
-    openScrollbar: openScrollbarProps,
-    isMobile: isMobileProps,
-    toolbarTarget,
-    children
-  } = _ref;
+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 [menuOpen, setMenuOpen] = react.useState(typeof localMenuOpen === 'boolean' ? localMenuOpen : true);
-  const [toolbarShow, setToolbarShow] = react.useState(true);
-  const [aiType, setAiType] = react.useState('closed');
-  const deviceIsMobile = typeof isMobileProps === 'boolean' ? isMobileProps : isMobile();
+  const isMobile = responsiveUtils.useIsMobile();
+  const responsiveContext = responsiveUtils.useResponsiveContext();
+  const deviceIsMobile = typeof isMobileProps === 'boolean' ? isMobileProps : isMobile;
+  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),
+    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(() => {
     return {
       setToolbarShow,
+      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 layoutBoundaryRef = react.useRef(null);
+  const pageScrollRef = react.useRef(null);
   const location = reactRouterDom.useLocation();
+  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;
+    }
+    const target = typeof responsiveContext.getBoundaryElement === 'function' ? responsiveContext.getBoundaryElement() : null;
+    setMenuPortalTarget(target || null);
+  }, [useMenuPortal, responsiveContext, scrollReady]);
   react.useEffect(() => {
-    topRef.current && topRef.current.scrollIntoView();
-  }, [location]);
-  return /*#__PURE__*/jsxRuntime.jsxs(Provider, {
-    value: contextValue,
+    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)));
+  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': toolbarShow,
-        [style$3['has-toolbar']]: toolbarShow
-      }),
-      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
-                }) : menuHeader : /*#__PURE__*/jsxRuntime.jsx(UserCard, _extends({
-                  menuOpen: menuOpen
-                }, Object.assign({}, userInfo)))
-              })
-            }), /*#__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,
-          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: toolbarShow,
-        target: toolbarTarget
-      }))]
-    })]
+        }), /*#__PURE__*/jsxRuntime.jsx(Toolbar, _extends({}, menu, {
+          className: classnames__default["default"](style$3['toolbar']),
+          show: deviceIsMobile && toolbarShow,
+          target: toolbarTarget
+        }))]
+      })]
+    })
   });
 };
 
-var style = {"page":"_c1kXt","page-header":"_h-YXH","page-title":"_IOVGr","page-title-extra":"_mKsLu","page-inner":"_wHWje","is-mobile":"_yRZMx","back-icon":"_07Mna"};
+var style = {"page":"kne-system-layout_c1kXt","page-header":"kne-system-layout_h-YXH","is-scrolled":"kne-system-layout_dEXMy","page-title-outer":"kne-system-layout_jhcGo","capsule-click":"kne-system-layout_Ps1FA","page-title-extra":"kne-system-layout_mKsLu","page-title":"kne-system-layout_IOVGr","page-top":"kne-system-layout_Y1y7o","page-inner":"kne-system-layout_wHWje","no-padding":"kne-system-layout_tBnAD","is-mobile":"kne-system-layout_yRZMx","page-loading":"kne-system-layout_vcf3J","page-bottom":"kne-system-layout_vXk1s","back-icon":"kne-system-layout_07Mna"};
 
+const PageLoading = () => {
+  return /*#__PURE__*/jsxRuntime.jsx(antd.Flex, {
+    flex: 1,
+    justify: "center",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: style['page-loading'],
+      children: /*#__PURE__*/jsxRuntime.jsx(antd.Skeleton, {
+        active: true
+      })
+    })
+  });
+};
 const Page = _ref => {
-  let {
-    title,
-    extra = null,
-    back,
-    buttonProps,
-    children,
-    toolbar = true
-  } = _ref;
-  const {
-    setToolbarShow,
-    setMenuOpen,
-    deviceIsMobile,
-    userAvatar
-  } = useContext();
+  let title = _ref.title,
+    _ref$extra = _ref.extra,
+    extra = _ref$extra === void 0 ? null : _ref$extra,
+    back = _ref.back,
+    buttonProps = _ref.buttonProps,
+    children = _ref.children,
+    _ref$toolbar = _ref.toolbar,
+    toolbar = _ref$toolbar === void 0 ? true : _ref$toolbar,
+    _ref$navbar = _ref.navbar,
+    navbar = _ref$navbar === void 0 ? true : _ref$navbar,
+    noPadding = _ref.noPadding;
+  const _useContext = useContext(),
+    setToolbarShow = _useContext.setToolbarShow,
+    setNavbarShow = _useContext.setNavbarShow,
+    setMenuOpen = _useContext.setMenuOpen,
+    deviceIsMobile = _useContext.deviceIsMobile,
+    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],
+    setIsScrolled = _useState[1];
   react.useEffect(() => {
     setToolbarShow && setToolbarShow(!!toolbar);
-  }, [toolbar]);
-  return /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
-    vertical: true,
-    gap: 24,
-    className: classnames__default["default"]('page', style['page'], {
-      ['is-mobile']: deviceIsMobile,
-      [style['is-mobile']]: deviceIsMobile
+    setNavbarShow && setNavbarShow(!!navbar);
+  }, [toolbar, navbar]);
+  react.useEffect(() => {
+    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(scrollEl.scrollTop > threshold);
+    };
+    handleScroll();
+    scrollEl.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return () => scrollEl.removeEventListener('scroll', handleScroll);
+  }, [deviceIsMobile, navbar, getScrollElement, scrollReady]);
+  const navbarEl = navbar ? /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
+    ref: navbarRef,
+    justify: "space-between",
+    align: "center",
+    gap: 20,
+    className: classnames__default["default"]('page-header', style['page-header'], {
+      ['is-scrolled']: isScrolled,
+      [style['is-scrolled']]: isScrolled
     }),
     children: [/*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
-      justify: "space-between",
+      className: classnames__default["default"]('page-title-outer', style['page-title-outer']),
       align: "center",
-      gap: 20,
-      className: classnames__default["default"]('page-header', style['page-header']),
-      children: [/*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
-        className: classnames__default["default"]('page-title-outer', style['page-title-outer']),
-        align: "center",
-        gap: 4,
-        children: [back && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
-          type: "text",
-          icon: /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
-            className: style['back-icon'],
-            type: "a-Typearrow_forward_ios",
-            fontClassName: "system"
-          })
-        }), !back && deviceIsMobile && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
-          type: "link",
-          icon: /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
-            className: style['back-icon'],
-            type: "a-Typeequal",
-            fontClassName: "system"
-          }),
-          onClick: () => {
-            setMenuOpen(open => !open);
-          }
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classnames__default["default"]('page-title', style['page-title']),
-          children: title
-        })]
+      gap: 4,
+      children: [back && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+        type: "text",
+        icon: /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
+          className: style['back-icon'],
+          type: "a-Typearrow_forward_ios",
+          fontClassName: "system"
+        }),
+        onClick: () => {
+          navigate(-1);
+        }
+      }), !back && deviceIsMobile && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+        type: "link",
+        icon: /*#__PURE__*/jsxRuntime.jsx(Icon__default["default"], {
+          className: style['back-icon'],
+          type: "a-Typeequal",
+          fontClassName: "system"
+        }),
+        onClick: () => {
+          setMenuOpen(open => !open);
+        }
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classnames__default["default"]('page-title-extra', style['page-title-extra']),
-        children: extra ? extra : deviceIsMobile ? /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
-          gap: 4,
-          align: "center",
-          children: [buttonProps && /*#__PURE__*/jsxRuntime.jsx(ButtonGroup__default["default"], _extends({}, Object.assign({}, buttonProps, deviceIsMobile ? {
-            showLength: 0,
-            moreType: 'link'
-          } : {}))), /*#__PURE__*/jsxRuntime.jsx(reactFile.Image.Avatar, {
-            id: userAvatar,
-            src: userAvatar,
-            shape: "circle",
-            size: 30,
-            alt: "avatar"
-          })]
-        }) : buttonProps && /*#__PURE__*/jsxRuntime.jsx(ButtonGroup__default["default"], _extends({}, buttonProps))
+        className: classnames__default["default"]('page-title', style['page-title']),
+        children: title
       })]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classnames__default["default"]('page-inner', style['page-inner']),
-      children: children
+      className: classnames__default["default"]('page-title-extra', style['page-title-extra']),
+      children: extra ? extra : deviceIsMobile ? /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
+        gap: 4,
+        align: "center",
+        children: [buttonProps && /*#__PURE__*/jsxRuntime.jsx(ButtonGroup__default["default"], _extends({}, Object.assign({}, buttonProps, deviceIsMobile ? {
+          showLength: 0,
+          moreType: 'link'
+        } : {}))), /*#__PURE__*/jsxRuntime.jsx(reactFile.Image.Avatar, {
+          id: userAvatar,
+          src: userAvatar,
+          shape: "circle",
+          size: 30,
+          alt: "avatar"
+        })]
+      }) : buttonProps && /*#__PURE__*/jsxRuntime.jsx(ButtonGroup__default["default"], _extends({}, buttonProps))
     })]
+  }) : null;
+  const pageInnerClassNameOrigin = classnames__default["default"]('page-inner', style['page-inner']);
+  const pageInnerClassName = classnames__default["default"](pageInnerClassNameOrigin, {
+    ['no-padding']: noPadding,
+    [style['no-padding']]: noPadding
   });
+  const render = _ref2 => {
+    let children = _ref2.children,
+      className = _ref2.className;
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: style['page-top']
+      }), /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
+        vertical: true,
+        flex: 1,
+        children: [navbarEl, /*#__PURE__*/jsxRuntime.jsx(antd.Flex, {
+          vertical: true,
+          flex: 1,
+          className: classnames__default["default"](pageInnerClassNameOrigin, className),
+          children: children
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: style['page-bottom']
+      })]
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(antd.Flex, {
+    vertical: true,
+    flex: 1,
+    className: classnames__default["default"]('page', style['page'], {
+      ['is-mobile']: deviceIsMobile,
+      [style['is-mobile']]: deviceIsMobile
+    }),
+    children: typeof children === 'function' ? children({
+      navbar: navbarEl,
+      className: pageInnerClassName,
+      render,
+      pageLoading: render({
+        children: /*#__PURE__*/jsxRuntime.jsx(PageLoading, {})
+      })
+    }) : render({
+      children
+    })
+  });
+};
+Page.PageLoading = PageLoading;
+
+const isMobile = () => {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return false;
+  }
+  return window.matchMedia(responsiveUtils.IS_MOBILE_QUERY).matches;
 };
 
-Promise.resolve().then(function () { return require('./index-48821d71.js'); });
+const transparentBgContainer = {
+  colorBgContainer: 'transparent'
+};
+const transparentBgContainerComponents = ['Input', 'InputNumber', 'Card', 'Tree', 'Select', 'DatePicker'];
+const themeToken = {
+  components: merge__default["default"]({}, transform__default["default"](transparentBgContainerComponents, (result, component) => {
+    result[component] = transparentBgContainer;
+  }, {}))
+};
 
+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.useLayoutContext = useContext;
 //# sourceMappingURL=index.js.map