@arcblock/ux 2.12.3 → 2.12.5

package/src/NavMenu/style.ts

@@ -5,11 +5,12 @@ type NavMenuProps = {
   $textColor: string;
 };
 
-// .navmenu-root
-export const NavMenuRoot = styled('nav', {
+// .navmenu
+export const NavMenuStyled = styled('nav', {
   shouldForwardProp: (prop) => prop !== '$bgColor' && prop !== '$textColor',
 })<NavMenuProps>(({ $bgColor, $textColor }) => ({
-  padding: '8px 16px',
+  position: 'relative',
+  padding: '0 16px',
   minWidth: '50px',
   // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
   flexGrow: 100,
@@ -18,15 +19,15 @@ export const NavMenuRoot = styled('nav', {
   fontSize: '16px',
 }));
 
-// .navmenu-list
-export const NavMenuList = styled('ul')(() => ({
+// .navmenu-root
+export const NavMenuRoot = styled('ul')(() => ({
   listStyle: 'none',
   margin: 0,
   padding: 0,
   display: 'flex',
   alignItems: 'center',
   // inline 布局
-  '&.navmenu-list--inline ': {
+  '&.navmenu-root--inline ': {
     flexDirection: 'column',
     alignItems: 'stretch',
   },
@@ -38,14 +39,16 @@ type NavMenuItemProps = {
 // 菜单项 .navmenu-item
 export const NavMenuItem = styled('li', {
   shouldForwardProp: (prop) => prop !== '$activeTextColor',
-})<NavMenuItemProps>(({ $activeTextColor }) => ({
+})<NavMenuItemProps>(({ $activeTextColor, theme }) => ({
   display: 'flex',
   alignItems: 'center',
   position: 'relative',
-  padding: '0 12px',
+  padding: '8px 12px',
   whiteSpace: 'nowrap',
   cursor: 'pointer',
-  transition: 'color 0.2s ease-in-out',
+  transition: theme.transitions.create('color', {
+    duration: theme.transitions.duration.standard,
+  }),
   // 间距调整
   '&:first-of-type': {
     paddingLeft: 0,
@@ -98,7 +101,9 @@ export const NavMenuItem = styled('li', {
       marginLeft: '6px',
       fontSize: '14px',
       opacity: 0,
-      transition: 'opacity 0.2s ease-in-out',
+      transition: theme.transitions.create('opacity', {
+        duration: theme.transitions.duration.standard,
+      }),
     },
   },
   '.navmenu-item__desc': {
@@ -136,13 +141,17 @@ export const NavMenuItem = styled('li', {
     },
     '&:hover': {
       background: '#f9f9fb',
-      transition: 'background 0.2s ease-in-out',
+      transition: theme.transitions.create('background', {
+        duration: theme.transitions.duration.standard,
+      }),
       '.navmenu-item__label-arrow': {
         opacity: 1,
       },
       '.navmenu-item__desc': {
         color: '#26292e',
-        transition: 'color 0.2s ease-in-out',
+        transition: theme.transitions.create('color', {
+          duration: theme.transitions.duration.standard,
+        }),
       },
     },
     '&.navmenu-item--active': {
@@ -160,24 +169,26 @@ export const NavMenuItem = styled('li', {
 }));
 
 // 包含子菜单的导航项 .navmenu-item .navmenu-sub
-export const NavMenuSub = styled(NavMenuItem)(() => ({
+export const NavMenuSub = styled(NavMenuItem)(({ theme }) => ({
   '.navmenu-item': {
     marginLeft: 0,
+    overflow: 'hidden',
   },
   '& .navmenu-sub__container': {
-    visibility: 'hidden',
+    pointerEvents: 'none',
     opacity: 0,
     position: 'absolute',
     top: '100%',
-    left: '50%',
+    left: 0,
     zIndex: 1,
-    transform: 'translateX(-50%)',
-    paddingTop: '16px',
-    transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
   },
   '&.navmenu-sub--opened > .navmenu-sub__container': {
-    visibility: 'visible',
+    pointerEvents: 'auto',
     opacity: 1,
+    transition: theme.transitions.create('opacity', {
+      duration: theme.transitions.duration.standard,
+      easing: theme.transitions.easing.easeOut,
+    }),
   },
   // 扩展图标
   '.navmenu-sub__expand-icon': {
@@ -188,7 +199,9 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
     '& > *': {
       width: '0.8em',
       height: '0.8em',
-      transition: 'transform 0.2s ease-in-out',
+      transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.standard,
+      }),
     },
     '.navmenu-item--inline &': {
       marginLeft: 'auto',
@@ -204,7 +217,9 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
       padding: 0,
       height: 0,
       overflow: 'hidden',
-      transition: 'height 0.2s ease-in-out',
+      transition: theme.transitions.create('height', {
+        duration: theme.transitions.duration.standard,
+      }),
     },
     '&.navmenu-sub--opened > .navmenu-sub__container': {
       height: 'auto',
@@ -214,10 +229,13 @@ export const NavMenuSub = styled(NavMenuItem)(() => ({
       paddingLeft: '16px',
       boxShadow: 'none',
     },
+    '.navmenu-item__content': {
+      height: '48px',
+    },
   },
 }));
 
-// 下拉子菜单 .navmenu-sub-list
+// 下拉子菜单 .navmenu-sub__list
 export const NavMenuSubList = styled('ul')(() => ({
   margin: 0,
   padding: '16px',

package/src/NavMenu/sub-container.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+interface SubContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+const paddingTop = 8;
+
+// 下拉子菜单容器
+export function SubContainer({ children, ...props }: SubContainerProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState(0); // 只需要保存水平偏移量
+
+  const updatePosition = () => {
+    if (!rootRef.current) return;
+    const anchor = rootRef.current.parentElement; // 以父容器作为参照
+    if (!anchor) return;
+
+    const anchorRect = anchor.getBoundingClientRect();
+    const containerRect = rootRef.current.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    const padding = 32;
+
+    // 1. 计算相对于父元素的水平居中位置
+    let left = (anchorRect.width - containerRect.width) / 2;
+
+    // 2. 检查容器在视口中的绝对位置
+    const absoluteLeft = anchorRect.left + left;
+
+    // 3. 调整水平位置确保不超出窗口
+    if (absoluteLeft < 0) {
+      // 如果超出左边界，向右偏移
+      left = left - absoluteLeft + padding;
+    } else if (absoluteLeft + containerRect.width > windowWidth) {
+      // 如果超出右边界，向左偏移
+      left -= absoluteLeft + containerRect.width - windowWidth + padding;
+    }
+
+    setPosition(left);
+  };
+
+  // 监听自身大小变化
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      updatePosition();
+    });
+
+    resizeObserver.observe(rootRef.current!);
+
+    return () => resizeObserver.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 监听 anchor 的大小变化
+  useEffect(() => {
+    const anchor = rootRef.current?.parentElement;
+    let resizeObserver: ResizeObserver | null = null;
+
+    if (anchor) {
+      resizeObserver = new ResizeObserver(() => {
+        updatePosition();
+      });
+
+      resizeObserver.observe(anchor);
+    }
+
+    return () => resizeObserver?.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 监听窗口大小变化
+  useEffect(() => {
+    const handleResize = () => {
+      updatePosition();
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      ref={rootRef}
+      className="navmenu-sub__container"
+      style={{
+        paddingTop: `${paddingTop}px`,
+        transform: `translateX(${position}px)`,
+      }}
+      {...props}>
+      {children}
+    </div>
+  );
+}
+
+export default SubContainer;