@tker-react/layout 0.2.5 → 0.2.7

package/dist/index.d.mts

@@ -39,6 +39,10 @@ interface MenuAdapterProps {
     mode: "side" | "top";
     width: string;
     onSelect: (path: string) => void;
+    /** 当前展开的子菜单路径集合（side-menu 模式使用） */
+    openKeys: Set<string>;
+    /** 统一菜单点击入口，自动处理展开/折叠/导航，替代 onSelect 时 adapter 无需自行判断菜单类型 */
+    onMenuItemClick: (path: string) => void;
 }
 interface BreadcrumbAdapterProps {
     breadcrumbData: BreadcrumbItem[];
@@ -77,17 +81,11 @@ interface LayoutContextValue {
     setUserAvatarAdapter: (component: ComponentType<UserAvatarAdapterProps>) => void;
     menuData: MenuItem[];
     activePath: string;
-    collapsed: boolean;
     expandedWidth: string;
     collapsedWidth: string;
     layoutMode: "side-menu" | "top-menu";
     setMenus: (data: MenuItem[]) => void;
     setActivePath: (path: string, fullPath?: string) => void;
-    toggleCollapse: () => void;
-    setCollapsed: (collapsed: boolean) => void;
-    openKeys: Set<string>;
-    toggleMenuOpen: (path: string, forceOpen?: boolean) => void;
-    menuItemClick: (path: string) => void;
     setExpandedWidth: (width: string) => void;
     setCollapsedWidth: (width: string) => void;
     setLayoutMode: (mode: "side-menu" | "top-menu") => void;
@@ -105,5 +103,5 @@ declare function LayoutProvider({ children }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-export { Layout, LayoutProvider, useLayoutContext as useLayout, useLayoutContext };
+export { Layout, LayoutProvider, useLayoutContext as useLayout };
 export type { BreadcrumbAdapterProps, BreadcrumbItem, LayoutAdapters, LogoAdapterProps, MenuAdapterProps, MenuItem, TabAdapterProps, TabItem, UserAvatarAdapterProps };

package/dist/index.d.ts

@@ -39,6 +39,10 @@ interface MenuAdapterProps {
     mode: "side" | "top";
     width: string;
     onSelect: (path: string) => void;
+    /** 当前展开的子菜单路径集合（side-menu 模式使用） */
+    openKeys: Set<string>;
+    /** 统一菜单点击入口，自动处理展开/折叠/导航，替代 onSelect 时 adapter 无需自行判断菜单类型 */
+    onMenuItemClick: (path: string) => void;
 }
 interface BreadcrumbAdapterProps {
     breadcrumbData: BreadcrumbItem[];
@@ -77,17 +81,11 @@ interface LayoutContextValue {
     setUserAvatarAdapter: (component: ComponentType<UserAvatarAdapterProps>) => void;
     menuData: MenuItem[];
     activePath: string;
-    collapsed: boolean;
     expandedWidth: string;
     collapsedWidth: string;
     layoutMode: "side-menu" | "top-menu";
     setMenus: (data: MenuItem[]) => void;
     setActivePath: (path: string, fullPath?: string) => void;
-    toggleCollapse: () => void;
-    setCollapsed: (collapsed: boolean) => void;
-    openKeys: Set<string>;
-    toggleMenuOpen: (path: string, forceOpen?: boolean) => void;
-    menuItemClick: (path: string) => void;
     setExpandedWidth: (width: string) => void;
     setCollapsedWidth: (width: string) => void;
     setLayoutMode: (mode: "side-menu" | "top-menu") => void;
@@ -105,5 +103,5 @@ declare function LayoutProvider({ children }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-export { Layout, LayoutProvider, useLayoutContext as useLayout, useLayoutContext };
+export { Layout, LayoutProvider, useLayoutContext as useLayout };
 export type { BreadcrumbAdapterProps, BreadcrumbItem, LayoutAdapters, LogoAdapterProps, MenuAdapterProps, MenuItem, TabAdapterProps, TabItem, UserAvatarAdapterProps };

package/dist/index.mjs

@@ -44,6 +44,14 @@ function generateBreadcrumb(menuData, activePath) {
 }
 
 const LayoutContext = createContext(null);
+const LayoutInteractionContext = createContext(null);
+function useLayoutInteractionContext() {
+  const ctx = useContext(LayoutInteractionContext);
+  if (!ctx) {
+    throw new Error("useLayoutInteractionContext \u5FC5\u987B\u5728 <Layout> \u5185\u90E8\u4F7F\u7528");
+  }
+  return ctx;
+}
 function useLayoutContext() {
   const ctx = useContext(LayoutContext);
   if (!ctx) {
@@ -107,6 +115,8 @@ function LayoutProvider({ children }) {
   collapsedRef.current = collapsed;
   const menuDataRef = useRef(menuData);
   menuDataRef.current = menuData;
+  const layoutModeRef = useRef(layoutMode);
+  layoutModeRef.current = layoutMode;
   const toggleMenuOpen = useCallback((path, forceOpen) => {
     setOpenKeys((prev) => {
       const next = new Set(prev);
@@ -125,7 +135,9 @@ function LayoutProvider({ children }) {
   const menuItemClick = useCallback((path) => {
     const item = findMenuItemByPath(menuDataRef.current, path);
     const hasChildren = !!(item?.children && item.children.length > 0);
+    const isSide = layoutModeRef.current === "side-menu";
     if (hasChildren) {
+      if (!isSide) return;
       if (collapsedRef.current) {
         setCollapsedState(false);
         const restored = new Set(savedOpenKeysRef.current);
@@ -183,6 +195,26 @@ function LayoutProvider({ children }) {
   const setMaxTabs = useCallback((max) => {
     setMaxTabsState(max);
   }, []);
+  const setCollapsed = useCallback((val) => {
+    if (val) {
+      savedOpenKeysRef.current = new Set(openKeysRef.current);
+      setOpenKeys(/* @__PURE__ */ new Set());
+    } else {
+      setOpenKeys(new Set(savedOpenKeysRef.current));
+    }
+    setCollapsedState(val);
+  }, []);
+  const interactionValue = useMemo(
+    () => ({
+      collapsed,
+      toggleCollapse,
+      setCollapsed,
+      openKeys,
+      toggleMenuOpen,
+      menuItemClick
+    }),
+    [collapsed, toggleCollapse, setCollapsed, openKeys, toggleMenuOpen, menuItemClick]
+  );
   const value = useMemo(
     () => ({
       adapters,
@@ -194,26 +226,11 @@ function LayoutProvider({ children }) {
       setUserAvatarAdapter,
       menuData,
       activePath,
-      collapsed,
       expandedWidth,
       collapsedWidth,
       layoutMode,
       setMenus,
       setActivePath,
-      toggleCollapse,
-      // setCollapsed 同样处理 openKeys 保存/恢复，与 toggleCollapse 逻辑一致
-      setCollapsed: (val) => {
-        if (val) {
-          savedOpenKeysRef.current = new Set(openKeysRef.current);
-          setOpenKeys(/* @__PURE__ */ new Set());
-        } else {
-          setOpenKeys(new Set(savedOpenKeysRef.current));
-        }
-        setCollapsedState(val);
-      },
-      openKeys,
-      toggleMenuOpen,
-      menuItemClick,
       setExpandedWidth,
       setCollapsedWidth,
       setLayoutMode,
@@ -236,16 +253,11 @@ function LayoutProvider({ children }) {
       setUserAvatarAdapter,
       menuData,
       activePath,
-      collapsed,
       expandedWidth,
       collapsedWidth,
       layoutMode,
       setMenus,
       setActivePath,
-      toggleCollapse,
-      openKeys,
-      toggleMenuOpen,
-      menuItemClick,
       isConcretePage,
       getFullPath,
       setNavigateAdapter,
@@ -256,22 +268,21 @@ function LayoutProvider({ children }) {
       setMaxTabs
     ]
   );
-  return /* @__PURE__ */ jsx(LayoutContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(LayoutContext.Provider, { value, children: /* @__PURE__ */ jsx(LayoutInteractionContext.Provider, { value: interactionValue, children }) });
 }
 
 function LayoutAside() {
   const {
     adapters,
-    collapsed,
     expandedWidth,
     collapsedWidth,
     menuData,
     activePath,
     layoutMode,
     getFullPath,
-    navigate,
-    toggleCollapse
+    navigate
   } = useLayoutContext();
+  const { collapsed, toggleCollapse, openKeys, menuItemClick } = useLayoutInteractionContext();
   const menuMode = layoutMode === "top-menu" ? "top" : "side";
   const handleMenuSelect = useCallback(
     (path) => {
@@ -293,7 +304,9 @@ function LayoutAside() {
         collapsed,
         mode: menuMode,
         width: asideWidth,
-        onSelect: handleMenuSelect
+        openKeys,
+        onSelect: handleMenuSelect,
+        onMenuItemClick: menuItemClick
       }
     ),
     /* @__PURE__ */ jsx(
@@ -484,7 +497,6 @@ function openTabInData(tabData, path, config) {
 function LayoutHeader() {
   const {
     adapters,
-    collapsed,
     expandedWidth,
     collapsedWidth,
     menuData,
@@ -494,6 +506,7 @@ function LayoutHeader() {
     isConcretePage,
     navigate
   } = useLayoutContext();
+  const { collapsed, menuItemClick } = useLayoutInteractionContext();
   const isTopMenu = layoutMode === "top-menu";
   const isSideMenu = layoutMode === "side-menu";
   const breadcrumbData = useMemo(
@@ -542,7 +555,9 @@ function LayoutHeader() {
           collapsed: false,
           mode: "top",
           width: logoWidth,
-          onSelect: handleMenuSelect
+          openKeys: /* @__PURE__ */ new Set(),
+          onSelect: handleMenuSelect,
+          onMenuItemClick: menuItemClick
         }
       ),
       BreadcrumbAdapter && isSideMenu && /* @__PURE__ */ jsx(
@@ -575,4 +590,4 @@ function Layout({ children }) {
   return /* @__PURE__ */ jsx(LayoutProvider, { children: /* @__PURE__ */ jsx(LayoutInner, { children }) });
 }
 
-export { Layout, LayoutProvider, useLayoutContext as useLayout, useLayoutContext };
+export { Layout, LayoutProvider, useLayoutContext as useLayout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tker-react/layout",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "private": false,
   "license": "MIT",
   "type": "module",