@tker-react/layout 0.2.8 → 0.2.10

package/README.md

@@ -148,14 +148,22 @@ import type { MenuAdapterProps, MenuItem } from "@tker-react/layout";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { cn } from "@/lib/utils";
 
-function MenuAdapter({ menuData, activePath, collapsed, mode, onSelect }: MenuAdapterProps) {
+function MenuAdapter({
+  menuData,
+  activePath,
+  collapsed,
+  mode,
+  openKeys,
+  onSelect,
+  onMenuItemClick,
+}: MenuAdapterProps) {
   if (mode === "top") {
     return (
       <nav className="flex items-center gap-1 h-full">
         {menuData.map((item) => (
           <button
             key={item.path}
-            onClick={() => onSelect(item.path)}
+            onClick={() => onMenuItemClick(item.path)}
             className={cn(
               "px-3 py-1 text-sm rounded-md",
               activePath === item.path ? "bg-accent text-accent-foreground" : "hover:bg-muted"
@@ -177,7 +185,8 @@ function MenuAdapter({ menuData, activePath, collapsed, mode, onSelect }: MenuAd
           item={item}
           activePath={activePath}
           collapsed={collapsed}
-          onSelect={onSelect}
+          openKeys={openKeys}
+          onMenuItemClick={onMenuItemClick}
         />
       ))}
     </nav>
@@ -188,20 +197,23 @@ function MenuItemRenderer({
   item,
   activePath,
   collapsed,
-  onSelect,
+  openKeys,
+  onMenuItemClick,
   depth = 0,
 }: {
   item: MenuItem;
   activePath: string;
   collapsed: boolean;
-  onSelect: (path: string) => void;
+  openKeys: Set<string>;
+  onMenuItemClick: (path: string) => void;
   depth?: number;
 }) {
   const hasChildren = item.children && item.children.length > 0;
+  const isOpen = openKeys.has(item.path);
 
   if (hasChildren) {
     return (
-      <Collapsible>
+      <Collapsible open={isOpen} onOpenChange={() => onMenuItemClick(item.path)}>
         <CollapsibleTrigger
           className={cn(
             "flex items-center w-full rounded-md text-sm hover:bg-muted px-2 py-1.5",
@@ -224,7 +236,8 @@ function MenuItemRenderer({
               item={child}
               activePath={activePath}
               collapsed={collapsed}
-              onSelect={onSelect}
+              openKeys={openKeys}
+              onMenuItemClick={onMenuItemClick}
               depth={depth + 1}
             />
           ))}
@@ -235,7 +248,7 @@ function MenuItemRenderer({
 
   return (
     <button
-      onClick={() => onSelect(item.path)}
+      onClick={() => onMenuItemClick(item.path)}
       className={cn(
         "flex items-center rounded-md text-sm px-2 py-1.5",
         activePath === item.path
@@ -308,7 +321,6 @@ function TabAdapter({
   onClose,
   onCloseOther,
   onCloseAll,
-  onRefresh,
 }: TabAdapterProps) {
   return (
     <div className="flex items-center h-9 bg-muted border-b">
@@ -337,9 +349,6 @@ function TabAdapter({
           </div>
         ))}
       </div>
-      <button onClick={onRefresh} className="p-2 hover:bg-muted shrink-0">
-        <RotateCw className="w-3.5 h-3.5" />
-      </button>
       <DropdownMenu>
         <DropdownMenuTrigger className="p-2 hover:bg-muted shrink-0">
           <ChevronDown className="w-3.5 h-3.5" />
@@ -493,8 +502,8 @@ useLayoutEffect(() => {
 
 | Adapter | Props |
 |---------|-------|
-| `menu` | `menuData`, `activePath`, `collapsed`, `mode` (`"side"|"top"`), `width`, `onSelect(path)` |
-| `tab` | `tabData`, `activeTab`, `onSelect(path)`, `onClose(path)`, `onCloseOther(path?)`, `onCloseAll()`, `onRefresh()`, `onSetFixed(path, fixed)` |
+| `menu` | `menuData`, `activePath`, `collapsed`, `mode` (`"side"|"top"`), `width`, `openKeys`, `onSelect(path)`, `onMenuItemClick(path)` |
+| `tab` | `tabData`, `activeTab`, `onSelect(path)`, `onClose(path)`, `onCloseOther(path?)`, `onCloseAll()`, `onSetFixed(path, fixed)` |
 | `breadcrumb` | `breadcrumbData`, `onSelect(path)` |
 | `logo` | `collapsed`, `width` |
 | `toolbar` | 无 props |

package/dist/index.d.mts

@@ -3,8 +3,10 @@ import { ReactNode, ComponentType } from 'react';
 
 interface LayoutProps {
     children?: ReactNode;
+    activePath?: string;
+    activeFullPath?: string;
 }
-declare function Layout({ children }: LayoutProps): react_jsx_runtime.JSX.Element;
+declare function Layout({ children, ...props }: LayoutProps): react_jsx_runtime.JSX.Element;
 
 interface BreadcrumbItem {
     path: string;
@@ -55,7 +57,6 @@ interface TabAdapterProps {
     onClose: (path: string) => void;
     onCloseOther: (path?: string) => void;
     onCloseAll: () => void;
-    onRefresh: () => void;
     onSetFixed: (path: string, fixed: boolean) => void;
 }
 interface UserAvatarAdapterProps {
@@ -71,37 +72,26 @@ interface LayoutAdapters {
     userAvatar?: ComponentType<UserAvatarAdapterProps>;
 }
 
-interface LayoutContextValue {
-    adapters: LayoutAdapters;
-    setMenuAdapter: (component: ComponentType<MenuAdapterProps>) => void;
-    setTabAdapter: (component: ComponentType<TabAdapterProps>) => void;
-    setBreadcrumbAdapter: (component: ComponentType<BreadcrumbAdapterProps>) => void;
-    setLogoAdapter: (component: ComponentType<LogoAdapterProps>) => void;
-    setToolbarAdapter: (component: ComponentType) => void;
-    setUserAvatarAdapter: (component: ComponentType<UserAvatarAdapterProps>) => void;
-    menuData: MenuItem[];
-    activePath: string;
-    expandedWidth: string;
-    collapsedWidth: string;
-    layoutMode: "side-menu" | "top-menu";
-    setMenus: (data: MenuItem[]) => void;
-    setActivePath: (path: string, fullPath?: string) => void;
-    setExpandedWidth: (width: string) => void;
-    setCollapsedWidth: (width: string) => void;
-    setLayoutMode: (mode: "side-menu" | "top-menu") => void;
-    isConcretePage: (path: string) => boolean;
-    getFullPath: (path: string) => string;
-    setNavigateAdapter: (fn: (path: string) => void) => void;
-    navigate: (path: string) => void;
-    homePath: string;
-    setHomePath: (path: string) => void;
-    maxTabs: number;
-    setMaxTabs: (max: number) => void;
+interface LayoutProviderProps {
+    children?: ReactNode;
+    activePath?: string;
+    activeFullPath?: string;
 }
-declare function useLayoutContext(): LayoutContextValue;
-declare function LayoutProvider({ children }: {
-    children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+declare function LayoutProvider({ children, activePath, activeFullPath, }: LayoutProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function setMenus(data: MenuItem[]): void;
+declare function setMenuAdapter(c: ComponentType<MenuAdapterProps>): void;
+declare function setTabAdapter(c: ComponentType<TabAdapterProps>): void;
+declare function setBreadcrumbAdapter(c: ComponentType<BreadcrumbAdapterProps>): void;
+declare function setLogoAdapter(c: ComponentType<LogoAdapterProps>): void;
+declare function setToolbarAdapter(c: ComponentType): void;
+declare function setUserAvatarAdapter(c: ComponentType<UserAvatarAdapterProps>): void;
+declare function setHomePath(path: string): void;
+declare function setMaxTabs(max: number): void;
+declare function setLayoutMode(mode: "side-menu" | "top-menu"): void;
+declare function setExpandedWidth(width: string): void;
+declare function setCollapsedWidth(width: string): void;
+declare function setNavigateAdapter(fn: (path: string) => void): void;
 
-export { Layout, LayoutProvider, useLayoutContext as useLayout };
+export { Layout, LayoutProvider, setBreadcrumbAdapter, setCollapsedWidth, setExpandedWidth, setHomePath, setLayoutMode, setLogoAdapter, setMaxTabs, setMenuAdapter, setMenus, setNavigateAdapter, setTabAdapter, setToolbarAdapter, setUserAvatarAdapter };
 export type { BreadcrumbAdapterProps, BreadcrumbItem, LayoutAdapters, LogoAdapterProps, MenuAdapterProps, MenuItem, TabAdapterProps, TabItem, UserAvatarAdapterProps };

package/dist/index.d.ts

@@ -3,8 +3,10 @@ import { ReactNode, ComponentType } from 'react';
 
 interface LayoutProps {
     children?: ReactNode;
+    activePath?: string;
+    activeFullPath?: string;
 }
-declare function Layout({ children }: LayoutProps): react_jsx_runtime.JSX.Element;
+declare function Layout({ children, ...props }: LayoutProps): react_jsx_runtime.JSX.Element;
 
 interface BreadcrumbItem {
     path: string;
@@ -55,7 +57,6 @@ interface TabAdapterProps {
     onClose: (path: string) => void;
     onCloseOther: (path?: string) => void;
     onCloseAll: () => void;
-    onRefresh: () => void;
     onSetFixed: (path: string, fixed: boolean) => void;
 }
 interface UserAvatarAdapterProps {
@@ -71,37 +72,26 @@ interface LayoutAdapters {
     userAvatar?: ComponentType<UserAvatarAdapterProps>;
 }
 
-interface LayoutContextValue {
-    adapters: LayoutAdapters;
-    setMenuAdapter: (component: ComponentType<MenuAdapterProps>) => void;
-    setTabAdapter: (component: ComponentType<TabAdapterProps>) => void;
-    setBreadcrumbAdapter: (component: ComponentType<BreadcrumbAdapterProps>) => void;
-    setLogoAdapter: (component: ComponentType<LogoAdapterProps>) => void;
-    setToolbarAdapter: (component: ComponentType) => void;
-    setUserAvatarAdapter: (component: ComponentType<UserAvatarAdapterProps>) => void;
-    menuData: MenuItem[];
-    activePath: string;
-    expandedWidth: string;
-    collapsedWidth: string;
-    layoutMode: "side-menu" | "top-menu";
-    setMenus: (data: MenuItem[]) => void;
-    setActivePath: (path: string, fullPath?: string) => void;
-    setExpandedWidth: (width: string) => void;
-    setCollapsedWidth: (width: string) => void;
-    setLayoutMode: (mode: "side-menu" | "top-menu") => void;
-    isConcretePage: (path: string) => boolean;
-    getFullPath: (path: string) => string;
-    setNavigateAdapter: (fn: (path: string) => void) => void;
-    navigate: (path: string) => void;
-    homePath: string;
-    setHomePath: (path: string) => void;
-    maxTabs: number;
-    setMaxTabs: (max: number) => void;
+interface LayoutProviderProps {
+    children?: ReactNode;
+    activePath?: string;
+    activeFullPath?: string;
 }
-declare function useLayoutContext(): LayoutContextValue;
-declare function LayoutProvider({ children }: {
-    children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+declare function LayoutProvider({ children, activePath, activeFullPath, }: LayoutProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function setMenus(data: MenuItem[]): void;
+declare function setMenuAdapter(c: ComponentType<MenuAdapterProps>): void;
+declare function setTabAdapter(c: ComponentType<TabAdapterProps>): void;
+declare function setBreadcrumbAdapter(c: ComponentType<BreadcrumbAdapterProps>): void;
+declare function setLogoAdapter(c: ComponentType<LogoAdapterProps>): void;
+declare function setToolbarAdapter(c: ComponentType): void;
+declare function setUserAvatarAdapter(c: ComponentType<UserAvatarAdapterProps>): void;
+declare function setHomePath(path: string): void;
+declare function setMaxTabs(max: number): void;
+declare function setLayoutMode(mode: "side-menu" | "top-menu"): void;
+declare function setExpandedWidth(width: string): void;
+declare function setCollapsedWidth(width: string): void;
+declare function setNavigateAdapter(fn: (path: string) => void): void;
 
-export { Layout, LayoutProvider, useLayoutContext as useLayout };
+export { Layout, LayoutProvider, setBreadcrumbAdapter, setCollapsedWidth, setExpandedWidth, setHomePath, setLayoutMode, setLogoAdapter, setMaxTabs, setMenuAdapter, setMenus, setNavigateAdapter, setTabAdapter, setToolbarAdapter, setUserAvatarAdapter };
 export type { BreadcrumbAdapterProps, BreadcrumbItem, LayoutAdapters, LogoAdapterProps, MenuAdapterProps, MenuItem, TabAdapterProps, TabItem, UserAvatarAdapterProps };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import "./layout.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useCallback, useState, useMemo, useEffect } from 'react';
+import { useRef, useCallback, useMemo, useState, useEffect, createContext, useContext } from 'react';
 
 function findMenuItemByPath(menuData, path) {
   for (const item of menuData) {
@@ -43,88 +43,143 @@ function generateBreadcrumb(menuData, activePath) {
   }));
 }
 
+let _menus = [];
+let _menuAdapter;
+let _tabAdapter;
+let _breadcrumbAdapter;
+let _logoAdapter;
+let _toolbarAdapter;
+let _userAvatarAdapter;
+let _homePath = "";
+let _maxTabs = 10;
+let _layoutMode = "side-menu";
+let _expandedWidth = "200px";
+let _collapsedWidth = "64px";
+let _navigateAdapter = null;
+function setMenus(data) {
+  _menus = data;
+}
+function setMenuAdapter(c) {
+  _menuAdapter = c;
+}
+function setTabAdapter(c) {
+  _tabAdapter = c;
+}
+function setBreadcrumbAdapter(c) {
+  _breadcrumbAdapter = c;
+}
+function setLogoAdapter(c) {
+  _logoAdapter = c;
+}
+function setToolbarAdapter(c) {
+  _toolbarAdapter = c;
+}
+function setUserAvatarAdapter(c) {
+  _userAvatarAdapter = c;
+}
+function setHomePath(path) {
+  _homePath = path;
+}
+function setMaxTabs(max) {
+  _maxTabs = max;
+}
+function setLayoutMode(mode) {
+  _layoutMode = mode;
+}
+function setExpandedWidth(width) {
+  _expandedWidth = width;
+}
+function setCollapsedWidth(width) {
+  _collapsedWidth = width;
+}
+function setNavigateAdapter(fn) {
+  _navigateAdapter = fn;
+}
+function consumeLayoutConfig() {
+  return {
+    menus: _menus,
+    menuAdapter: _menuAdapter,
+    tabAdapter: _tabAdapter,
+    breadcrumbAdapter: _breadcrumbAdapter,
+    logoAdapter: _logoAdapter,
+    toolbarAdapter: _toolbarAdapter,
+    userAvatarAdapter: _userAvatarAdapter,
+    homePath: _homePath,
+    maxTabs: _maxTabs,
+    layoutMode: _layoutMode,
+    expandedWidth: _expandedWidth,
+    collapsedWidth: _collapsedWidth,
+    navigateAdapter: _navigateAdapter
+  };
+}
+
 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");
-  }
+  if (!ctx) throw new Error("useLayoutInteractionContext \u5FC5\u987B\u5728 <Layout> \u5185\u90E8\u4F7F\u7528");
   return ctx;
 }
 const LayoutOpenKeysContext = createContext(null);
 function useLayoutOpenKeysContext() {
   const ctx = useContext(LayoutOpenKeysContext);
-  if (!ctx) {
-    throw new Error("useLayoutOpenKeysContext \u5FC5\u987B\u5728 <Layout> \u5185\u90E8\u4F7F\u7528");
-  }
+  if (!ctx) throw new Error("useLayoutOpenKeysContext \u5FC5\u987B\u5728 <Layout> \u5185\u90E8\u4F7F\u7528");
   return ctx;
 }
 function useLayoutContext() {
   const ctx = useContext(LayoutContext);
-  if (!ctx) {
-    throw new Error("useLayoutContext \u5FC5\u987B\u5728 <Layout> \u5185\u90E8\u4F7F\u7528");
-  }
+  if (!ctx) throw new Error("useLayoutContext \u5FC5\u987B\u5728 <Layout> \u5185\u90E8\u4F7F\u7528");
   return ctx;
 }
-function LayoutProvider({ children }) {
+function LayoutProvider({
+  children,
+  activePath = "",
+  activeFullPath
+}) {
+  const config = consumeLayoutConfig();
   const navigateRef = useRef(null);
-  const setNavigateAdapter = useCallback(
-    (fn) => {
-      navigateRef.current = fn;
-    },
-    []
-  );
+  navigateRef.current = config.navigateAdapter;
   const navigate = useCallback(
     (path) => {
       navigateRef.current?.(path);
     },
     []
   );
-  const [adapters, setAdapters] = useState({});
-  const setMenuAdapter = useCallback(
-    (c) => setAdapters((prev) => prev.menu === c ? prev : { ...prev, menu: c }),
-    []
-  );
-  const setTabAdapter = useCallback(
-    (c) => setAdapters((prev) => prev.tab === c ? prev : { ...prev, tab: c }),
-    []
-  );
-  const setBreadcrumbAdapter = useCallback(
-    (c) => setAdapters((prev) => prev.breadcrumb === c ? prev : { ...prev, breadcrumb: c }),
-    []
-  );
-  const setLogoAdapter = useCallback(
-    (c) => setAdapters((prev) => prev.logo === c ? prev : { ...prev, logo: c }),
-    []
-  );
-  const setToolbarAdapter = useCallback(
-    (c) => setAdapters((prev) => prev.toolbar === c ? prev : { ...prev, toolbar: c }),
-    []
-  );
-  const setUserAvatarAdapter = useCallback(
-    (c) => setAdapters((prev) => prev.userAvatar === c ? prev : { ...prev, userAvatar: c }),
-    []
+  const adapters = useMemo(
+    () => ({
+      menu: config.menuAdapter,
+      tab: config.tabAdapter,
+      breadcrumb: config.breadcrumbAdapter,
+      logo: config.logoAdapter,
+      toolbar: config.toolbarAdapter,
+      userAvatar: config.userAvatarAdapter
+    }),
+    [
+      config.menuAdapter,
+      config.tabAdapter,
+      config.breadcrumbAdapter,
+      config.logoAdapter,
+      config.toolbarAdapter,
+      config.userAvatarAdapter
+    ]
   );
-  const [menuData, setMenuData] = useState([]);
-  const [activePath, setActivePathState] = useState("");
   const [collapsed, setCollapsedState] = useState(false);
-  const [expandedWidth, setExpandedWidth] = useState("200px");
-  const [collapsedWidth, setCollapsedWidth] = useState("64px");
-  const [layoutMode, setLayoutMode] = useState(
-    "side-menu"
-  );
-  const setMenus = useCallback((data) => setMenuData(data), []);
   const [openKeys, setOpenKeys] = useState(/* @__PURE__ */ new Set());
   const savedOpenKeysRef = useRef(/* @__PURE__ */ new Set());
   const openKeysRef = useRef(openKeys);
   openKeysRef.current = openKeys;
   const collapsedRef = useRef(collapsed);
   collapsedRef.current = collapsed;
-  const menuDataRef = useRef(menuData);
-  menuDataRef.current = menuData;
-  const layoutModeRef = useRef(layoutMode);
-  layoutModeRef.current = layoutMode;
+  const menuDataRef = useRef(config.menus);
+  menuDataRef.current = config.menus;
+  const layoutModeRef = useRef(config.layoutMode);
+  layoutModeRef.current = config.layoutMode;
+  const pathParamsMap = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (activeFullPath && activeFullPath !== activePath) {
+      pathParamsMap.current.set(activePath, activeFullPath);
+    }
+  }, [activePath, activeFullPath]);
   const toggleMenuOpen = useCallback((path, forceOpen) => {
     setOpenKeys((prev) => {
       const next = new Set(prev);
@@ -171,38 +226,17 @@ function LayoutProvider({ children }) {
     }
     setCollapsedState(nextCollapsed);
   }, []);
-  const pathParamsMap = useRef(/* @__PURE__ */ new Map());
-  const storePathParams = useCallback((path, fullPath) => {
-    if (fullPath && fullPath !== path) {
-      pathParamsMap.current.set(path, fullPath);
-    }
-  }, []);
   const getFullPath = useCallback(
     (path) => pathParamsMap.current.get(path) || path,
     []
   );
-  const setActivePath = useCallback(
-    (path, fullPath) => {
-      setActivePathState(path);
-      if (fullPath) storePathParams(path, fullPath);
-    },
-    [storePathParams]
-  );
   const isConcretePage = useCallback(
     (path) => {
-      const item = findMenuItemByPath(menuData, path);
+      const item = findMenuItemByPath(config.menus, path);
       return !item?.children || item.children.length === 0;
     },
-    [menuData]
+    [config.menus]
   );
-  const [homePath, setHomePathState] = useState("");
-  const [maxTabs, setMaxTabsState] = useState(10);
-  const setHomePath = useCallback((path) => {
-    setHomePathState(path);
-  }, []);
-  const setMaxTabs = useCallback((max) => {
-    setMaxTabsState(max);
-  }, []);
   const setCollapsed = useCallback((val) => {
     if (val) {
       savedOpenKeysRef.current = new Set(openKeysRef.current);
@@ -213,12 +247,7 @@ function LayoutProvider({ children }) {
     setCollapsedState(val);
   }, []);
   const interactionValue = useMemo(
-    () => ({
-      collapsed,
-      toggleCollapse,
-      setCollapsed,
-      menuItemClick
-    }),
+    () => ({ collapsed, toggleCollapse, setCollapsed, menuItemClick }),
     [collapsed, toggleCollapse, setCollapsed, menuItemClick]
   );
   const openKeysValue = useMemo(
@@ -228,54 +257,29 @@ function LayoutProvider({ children }) {
   const value = useMemo(
     () => ({
       adapters,
-      setMenuAdapter,
-      setTabAdapter,
-      setBreadcrumbAdapter,
-      setLogoAdapter,
-      setToolbarAdapter,
-      setUserAvatarAdapter,
-      menuData,
+      menuData: config.menus,
       activePath,
-      expandedWidth,
-      collapsedWidth,
-      layoutMode,
-      setMenus,
-      setActivePath,
-      setExpandedWidth,
-      setCollapsedWidth,
-      setLayoutMode,
+      expandedWidth: config.expandedWidth,
+      collapsedWidth: config.collapsedWidth,
+      layoutMode: config.layoutMode,
+      homePath: config.homePath,
+      maxTabs: config.maxTabs,
       isConcretePage,
       getFullPath,
-      setNavigateAdapter,
-      navigate,
-      homePath,
-      setHomePath,
-      maxTabs,
-      setMaxTabs
+      navigate
     }),
     [
       adapters,
-      setMenuAdapter,
-      setTabAdapter,
-      setBreadcrumbAdapter,
-      setLogoAdapter,
-      setToolbarAdapter,
-      setUserAvatarAdapter,
-      menuData,
+      config.menus,
       activePath,
-      expandedWidth,
-      collapsedWidth,
-      layoutMode,
-      setMenus,
-      setActivePath,
+      config.expandedWidth,
+      config.collapsedWidth,
+      config.layoutMode,
+      config.homePath,
+      config.maxTabs,
       isConcretePage,
       getFullPath,
-      setNavigateAdapter,
-      navigate,
-      homePath,
-      setHomePath,
-      maxTabs,
-      setMaxTabs
+      navigate
     ]
   );
   return /* @__PURE__ */ jsx(LayoutContext.Provider, { value, children: /* @__PURE__ */ jsx(LayoutInteractionContext.Provider, { value: interactionValue, children: /* @__PURE__ */ jsx(LayoutOpenKeysContext.Provider, { value: openKeysValue, children }) }) });
@@ -357,7 +361,6 @@ function LayoutContent({ children }) {
   const isTopMenu = layoutMode === "top-menu";
   const [tabData, setTabData] = useState([]);
   const [activeTab, setActiveTab] = useState("");
-  const [refreshKey, setRefreshKey] = useState(0);
   const menuDataRef = useRef(menuData);
   menuDataRef.current = menuData;
   const activeTabRef = useRef(activeTab);
@@ -441,9 +444,6 @@ function LayoutContent({ children }) {
       (prev) => prev.map((t) => t.path === path ? { ...t, fixed } : t)
     );
   }, []);
-  const handleRefresh = useCallback(() => {
-    setRefreshKey((k) => k + 1);
-  }, []);
   const TabAdapter = adapters.tab;
   return /* @__PURE__ */ jsxs("main", { className: "tker-layout-content", children: [
     !isTopMenu && TabAdapter && /* @__PURE__ */ jsx(
@@ -455,11 +455,10 @@ function LayoutContent({ children }) {
         onClose: handleTabClose,
         onCloseOther: handleCloseOtherTabs,
         onCloseAll: handleCloseAllTabs,
-        onRefresh: handleRefresh,
         onSetFixed: handleSetFixed
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "tker-layout-content__body", children }, refreshKey)
+    /* @__PURE__ */ jsx("div", { className: "tker-layout-content__body", children })
   ] });
 }
 function openTabInData(tabData, path, config) {
@@ -541,6 +540,7 @@ function LayoutHeader() {
     },
     [getFullPath, navigate, isConcretePage]
   );
+  const emptyOpenKeysRef = useRef(/* @__PURE__ */ new Set());
   const leftContent = isTopMenu ? ["logo", "menu"] : ["logo", "breadcrumb"];
   const logoWidth = isSideMenu ? collapsed ? collapsedWidth : expandedWidth : expandedWidth;
   const LogoAdapter = adapters.logo;
@@ -566,7 +566,7 @@ function LayoutHeader() {
           collapsed: false,
           mode: "top",
           width: logoWidth,
-          openKeys: /* @__PURE__ */ new Set(),
+          openKeys: emptyOpenKeysRef.current,
           onSelect: handleMenuSelect,
           onMenuItemClick: menuItemClick
         }
@@ -597,8 +597,8 @@ function LayoutInner({ children }) {
     ] })
   ] });
 }
-function Layout({ children }) {
-  return /* @__PURE__ */ jsx(LayoutProvider, { children: /* @__PURE__ */ jsx(LayoutInner, { children }) });
+function Layout({ children, ...props }) {
+  return /* @__PURE__ */ jsx(LayoutProvider, { ...props, children: /* @__PURE__ */ jsx(LayoutInner, { children }) });
 }
 
-export { Layout, LayoutProvider, useLayoutContext as useLayout };
+export { Layout, LayoutProvider, setBreadcrumbAdapter, setCollapsedWidth, setExpandedWidth, setHomePath, setLayoutMode, setLogoAdapter, setMaxTabs, setMenuAdapter, setMenus, setNavigateAdapter, setTabAdapter, setToolbarAdapter, setUserAvatarAdapter };

package/package.json

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