kne-union · zhipenglin · Jun 25, 2026 · Jun 25, 2026
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kne/system-layout",
-  "version": "0.2.0-alpha.15",
+  "version": "0.2.0-alpha.16",
   "description": "用于一个系统初始化布局",
   "syntax": {
     "esmodules": true

diff --git a/src/Layout/index.js b/src/Layout/index.js
@@ -1,4 +1,4 @@
-import { useMemo, useState, useRef, useEffect } from 'react';
+import { useMemo, useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { Flex, Row, Col } from 'antd';
 import classnames from 'classnames';
 import localStorage from '@kne/local-storage';
@@ -61,8 +61,16 @@ const Layout = ({
     };
   }, [deviceIsMobile, logo, userAvatar]);
   const topRef = useRef(null);
+  const pageRef = useRef(null);
+  const [computedToolbarTarget, setComputedToolbarTarget] = useState(toolbarTarget || null);
   const location = useLocation();
 
+  useLayoutEffect(() => {
+    if (!toolbarTarget) {
+      setComputedToolbarTarget(document.body);
+    }
+  }, [toolbarTarget]);
+
   useEffect(() => {
     topRef.current && topRef.current.scrollIntoView();
   }, [location]);
@@ -149,7 +157,7 @@ const Layout = ({
               )}
             </div>
           </div>
-          <Flex flex={1} className={classnames('page', style['page'])}>
+          <Flex flex={1} ref={pageRef} className={classnames('page', style['page'])}>
             <Row className={classnames('page-content', style['page-content'])}>
               {!deviceIsMobile && aiDialog && aiType === 'inner' && (
                 <Col span={8} className={classnames('page-dialog-outer', style['page-dialog-outer'])}>
@@ -225,7 +233,7 @@ const Layout = ({
             </div>
           )}
         </Flex>
-        <Toolbar {...menu} className={classnames(style['toolbar'])} show={deviceIsMobile && toolbarShow} target={toolbarTarget} />
+        <Toolbar {...menu} className={classnames(style['toolbar'])} show={deviceIsMobile && toolbarShow} target={computedToolbarTarget} />
       </div>
     </Provider>
   );

diff --git a/src/Layout/style.module.scss b/src/Layout/style.module.scss
@@ -141,13 +141,14 @@
   --page-content-height: var(--page-height);
   --page-inner-height: calc(var(--page-height) - var(--nav-height) - var(--toolbar-height));
   &.has-toolbar {
-    --toolbar-height: 60px;
+    --toolbar-height: 72px;
   }
   &.has-navbar {
     --nav-height: 48px;
   }
   .menu {
-    position: absolute;
+    position: fixed;
+    top: 0;
     left: calc(var(--menu-min-width) * -1);
     z-index: 900;
     background: var(--background);
@@ -159,7 +160,7 @@
     }
   }
   .layer-menu {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     right: 0;
@@ -181,6 +182,8 @@
   .page {
     border-radius: 0;
     border: 0;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
   }
   .toolbar {
     display: block;

diff --git a/src/Page/index.js b/src/Page/index.js
@@ -1,5 +1,5 @@
 import { Flex, Button, Skeleton } from 'antd';
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Icon from '@kne/react-icon';
 import ButtonGroup from '@kne/button-group';
 import classnames from 'classnames';
@@ -21,13 +21,37 @@ const PageLoading = () => {
 const Page = ({ title, extra = null, back, buttonProps, children, toolbar = true, navbar = true, noPadding }) => {
   const { setToolbarShow, setNavbarShow, setMenuOpen, deviceIsMobile, userAvatar } = useContext();
   const navigate = useNavigate();
+  const navbarRef = useRef(null);
+  const [isScrolled, setIsScrolled] = useState(false);
   useEffect(() => {
     setToolbarShow && setToolbarShow(!!toolbar);
     setNavbarShow && setNavbarShow(!!navbar);
   }, [toolbar, navbar]);
 
+  useEffect(() => {
+    if (!deviceIsMobile || !navbar) {
+      return;
+    }
+    const handleScroll = () => {
+      const threshold = navbarRef.current ? navbarRef.current.offsetHeight : 48;
+      setIsScrolled(window.scrollY > threshold);
+    };
+    handleScroll();
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [deviceIsMobile, navbar]);
+
   const navbarEl = navbar ? (
-    <Flex justify="space-between" align="center" gap={20} className={classnames('page-header', style['page-header'])}>
+    <Flex
+      ref={navbarRef}
+      justify="space-between"
+      align="center"
+      gap={20}
+      className={classnames('page-header', style['page-header'], {
+        ['is-scrolled']: isScrolled,
+        [style['is-scrolled']]: isScrolled
+      })}
+    >
       <Flex className={classnames('page-title-outer', style['page-title-outer'])} align="center" gap={4}>
         {back && (
           <Button

diff --git a/src/Page/style.module.scss b/src/Page/style.module.scss
@@ -5,15 +5,108 @@
     padding: 0 16px;
     background: #ffffff;
     margin-bottom: 0;
+    position: fixed;
+    top: var(--safe-area-inset-top, 0px);
+    left: 0;
+    right: 0;
+    z-index: 600;
+    transition:
+      height 0.3s ease,
+      padding 0.3s ease,
+      background 0.3s ease,
+      margin 0.3s ease,
+      top 0.3s ease;
+
+    &.is-scrolled {
+      height: 36px;
+      padding: 0;
+      background: transparent;
+      margin: 8px 16px;
+      top: calc(8px + var(--safe-area-inset-top, 0px));
+
+      .page-title-outer {
+        border-radius: 999px;
+        padding: 0 12px;
+        height: 36px;
+        border: 1px solid rgba(255, 255, 255, 0.5);
+        box-shadow:
+          0 8px 32px 0 rgba(78, 96, 139, 0.18),
+          0 2px 8px 0 rgba(78, 96, 139, 0.1),
+          inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
+        background: rgba(255, 255, 255, 0.25);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+
+        &:active {
+          animation: capsule-click 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+      }
+
+      .page-title-extra {
+        border-radius: 999px;
+        padding: 0 8px;
+        height: 36px;
+        border: 1px solid rgba(255, 255, 255, 0.5);
+        box-shadow:
+          0 8px 32px 0 rgba(78, 96, 139, 0.18),
+          0 2px 8px 0 rgba(78, 96, 139, 0.1),
+          inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
+        background: rgba(255, 255, 255, 0.25);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+
+        &:active {
+          animation: capsule-click 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+      }
+
+      .page-title {
+        font-size: 14px;
+        color: #333;
+      }
+
+      :global(.ant-btn) {
+        color: #333 !important;
+      }
+
+      :global(.ant-btn):hover {
+        color: #555 !important;
+      }
+    }
+  }
+
+  @keyframes capsule-click {
+    0% {
+      transform: scaleX(1) scaleY(1);
+      filter: brightness(1);
+    }
+    25% {
+      transform: scaleX(0.97) scaleY(1.03);
+      filter: brightness(1.2);
+    }
+    55% {
+      transform: scaleX(1.015) scaleY(0.99);
+      filter: brightness(1.08);
+    }
+    100% {
+      transform: scale(1);
+      filter: brightness(1);
+    }
   }
   .page-title {
     font-size: 16px;
     flex: 1;
     color: var(--primary-color);
+    transition:
+      font-size 0.3s ease,
+      color 0.3s ease;
   }
   .page-title-extra {
     flex: none;
   }
+  .page-top {
+    padding-top: calc(52px + var(--safe-area-inset-top, 0px));
+  }
   .page-inner {
     box-sizing: border-box;
     --content-height: calc(var(--page-inner-height) - 24px);
@@ -22,7 +115,7 @@
     &:after {
       content: '';
       display: block;
-      height: var(--toolbar-height);
+      height: calc(var(--toolbar-height) + 48px + var(--safe-area-inset-bottom));
     }
 
     &.no-padding {