@creekjs/web-components 1.0.16 → 1.0.18

package/.turbo/turbo-father$colon$build.log

@@ -1,54 +1,54 @@
 
 
-> @creekjs/web-components@1.0.15 father:build /Users/ernestwang/Documents/code-resoorce/creek/packages/web-components
+> @creekjs/web-components@1.0.17 father:build /Users/ernestwang/Documents/code-resoorce/creek/packages/web-components
 > father build
 
 info  - Clean output directories
 info  - Bundless for src directory to cjs format
 event - Bundless CreekConfigContext.tsx to dist/creek-config-provider/CreekConfigContext.js (with declaration)
-event - Bundless index.tsx to dist/creek-config-provider/index.js (with declaration)
+event - Bundless CreekI18nProvider.tsx to dist/creek-config-provider/CreekI18nProvider.js (with declaration)
 event - Bundless ModalHelper.tsx to dist/creek-hooks/useApp/ModalHelper.js (with declaration)
-event - Bundless index.ts to dist/creek-hooks/index.js (with declaration)
+event - Bundless index.tsx to dist/creek-config-provider/index.js (with declaration)
 event - Bundless index.tsx to dist/creek-hooks/useApp/index.js (with declaration)
 event - Bundless index.tsx to dist/creek-icon/index.js (with declaration)
-event - Bundless types.ts to dist/creek-hooks/useApp/types.js (with declaration)
-event - Bundless DrawerHelper.tsx to dist/creek-hooks/useApp/DrawerHelper.js (with declaration)
 event - Bundless useViewportHeight.tsx to dist/creek-hooks/useViewportHeight.js (with declaration)
+event - Bundless index.ts to dist/creek-hooks/index.js (with declaration)
 event - Bundless FullScreen.tsx to dist/creek-layout/ActionRender/FullScreen.js (with declaration)
-event - Bundless CreekI18nProvider.tsx to dist/creek-config-provider/CreekI18nProvider.js (with declaration)
-event - Bundless index.tsx to dist/creek-layout/ActionRender/index.js (with declaration)
-event - Bundless UserInfo.tsx to dist/creek-layout/ActionRender/UserInfo.js (with declaration)
+event - Bundless LayoutSettings.tsx to dist/creek-layout/ActionRender/LayoutSettings.js (with declaration)
+event - Bundless types.ts to dist/creek-hooks/useApp/types.js (with declaration)
+event - Bundless DrawerHelper.tsx to dist/creek-hooks/useApp/DrawerHelper.js (with declaration)
 event - Bundless NotFound.tsx to dist/creek-layout/Exception/NotFound.js (with declaration)
-event - Bundless index.tsx to dist/creek-layout/Exception/index.js (with declaration)
 event - Bundless NotFoundPage.tsx to dist/creek-layout/Exception/NotFoundPage.js (with declaration)
-event - Bundless index.ts to dist/creek-style/index.js (with declaration)
-event - Bundless LayoutSettings.tsx to dist/creek-layout/ActionRender/LayoutSettings.js (with declaration)
-event - Bundless index.tsx to dist/creek-layout/index.js (with declaration)
+event - Bundless UserInfo.tsx to dist/creek-layout/ActionRender/UserInfo.js (with declaration)
+event - Bundless CollapseButton.tsx to dist/creek-layout/CollapseButton.js (with declaration)
+event - Bundless index.tsx to dist/creek-layout/Exception/index.js (with declaration)
 event - Bundless index.tsx to dist/creek-page-container/index.js (with declaration)
+event - Bundless index.tsx to dist/creek-loading/index.js (with declaration)
 event - Bundless useLayoutSettingsStore.ts to dist/creek-layout/useLayoutSettingsStore.js (with declaration)
+event - Bundless index.tsx to dist/creek-locale-button/index.js (with declaration)
 event - Bundless scrollbar.ts to dist/creek-style/scrollbar.js (with declaration)
 event - Bundless DensityIcon.tsx to dist/creek-table/components/DensityIcon.js (with declaration)
-event - Bundless index.tsx to dist/creek-loading/index.js (with declaration)
-event - Bundless index.tsx to dist/creek-locale-button/index.js (with declaration)
-event - Bundless index.tsx to dist/creek-table/components/index.js (with declaration)
-event - Bundless useElementDistance.tsx to dist/creek-table/hooks/useElementDistance.js (with declaration)
 event - Bundless useAdaptiveToolBar.tsx to dist/creek-table/hooks/useAdaptiveToolBar.js (with declaration)
+event - Bundless index.ts to dist/creek-style/index.js (with declaration)
+event - Bundless useElementDistance.tsx to dist/creek-table/hooks/useElementDistance.js (with declaration)
 event - Bundless useIndexColumn.tsx to dist/creek-table/hooks/useIndexColumn.js (with declaration)
 event - Bundless EllipsisTooltip.tsx to dist/creek-table/components/EllipsisTooltip.js (with declaration)
 event - Bundless useAutoWidthColumns.tsx to dist/creek-table/hooks/useAutoWidthColumns.js (with declaration)
-event - Bundless useEllipsisColumns.tsx to dist/creek-table/hooks/useEllipsisColumns.js (with declaration)
-event - Bundless useTableOptions.tsx to dist/creek-table/hooks/useTableOptions.js (with declaration)
 event - Bundless index.ts to dist/creek-table/hooks/index.js (with declaration)
-event - Bundless index.tsx to dist/creek-table/index.js (with declaration)
+event - Bundless index.tsx to dist/creek-table/components/index.js (with declaration)
+event - Bundless useResizableColumns.tsx to dist/creek-table/hooks/useResizableColumns.js (with declaration)
+event - Bundless useTableOptions.tsx to dist/creek-table/hooks/useTableOptions.js (with declaration)
+event - Bundless useEllipsisColumns.tsx to dist/creek-table/hooks/useEllipsisColumns.js (with declaration)
 event - Bundless useTableScrollHeight.tsx to dist/creek-table/hooks/useTableScrollHeight.js (with declaration)
+event - Bundless useStatusColumns.tsx to dist/creek-table/hooks/useStatusColumns.js (with declaration)
 event - Bundless type.ts to dist/creek-table/type.js (with declaration)
 event - Bundless index.tsx to dist/index.js (with declaration)
-event - Bundless SearchTable.tsx to dist/creek-table/SearchTable.js (with declaration)
-event - Bundless zh_CN.ts to dist/locales/zh_CN.js (with declaration)
 event - Bundless en_US.ts to dist/locales/en_US.js (with declaration)
-event - Bundless CollapseButton.tsx to dist/creek-layout/CollapseButton.js (with declaration)
-event - Bundless useStatusColumns.tsx to dist/creek-table/hooks/useStatusColumns.js (with declaration)
-event - Bundless useResizableColumns.tsx to dist/creek-table/hooks/useResizableColumns.js (with declaration)
+event - Bundless zh_CN.ts to dist/locales/zh_CN.js (with declaration)
+event - Bundless SearchTable.tsx to dist/creek-table/SearchTable.js (with declaration)
+event - Bundless index.tsx to dist/creek-table/index.js (with declaration)
+event - Bundless index.tsx to dist/creek-layout/ActionRender/index.js (with declaration)
 event - Bundless index.tsx to dist/creek-keep-alive/index.js (with declaration)
+event - Bundless index.tsx to dist/creek-layout/index.js (with declaration)
 event - Generate declaration files...
-event - Transformed successfully in 3562 ms (45 files)
+event - Transformed successfully in 6590 ms (45 files)

package/dist/creek-keep-alive/index.d.ts

@@ -16,5 +16,9 @@ export interface CreekKeepAliveProps {
      * 最大缓存数量，默认为 20
      */
     maxTabCount?: number;
+    /**
+     * 路由配置（含 element），用于解析每个路径对应的页面组件
+     */
+    routes?: any[];
 }
 export declare const CreekKeepAlive: React.FC<CreekKeepAliveProps>;

package/dist/creek-keep-alive/index.js

@@ -30,16 +30,21 @@ var import_react_router_dom = require("react-router-dom");
 var import_react2 = require("@creekjs/i18n/react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var CreekKeepAlive = (props) => {
-  const { exclude = [], getTabTitle, tabBarStyle, maxTabCount = 20 } = props;
+  const { exclude = [], getTabTitle, tabBarStyle, maxTabCount = 20, routes = [] } = props;
   const t = (0, import_react2.useT)();
-  const outlet = (0, import_react_router_dom.useOutlet)();
   const location = (0, import_react_router_dom.useLocation)();
   const navigate = (0, import_react_router_dom.useNavigate)();
   const [tabItems, setTabItems] = (0, import_react.useState)([]);
   const [activeKey, setActiveKey] = (0, import_react.useState)("");
-  const [cachedPages, setCachedPages] = (0, import_react.useState)({});
-  const outletRef = (0, import_react.useRef)(outlet);
-  outletRef.current = outlet;
+  const [cachedElements, setCachedElements] = (0, import_react.useState)({});
+  const resolveElement = (path) => {
+    if (!(routes == null ? void 0 : routes.length))
+      return null;
+    const matches = (0, import_react_router_dom.matchRoutes)(routes, path);
+    if (!(matches == null ? void 0 : matches.length))
+      return null;
+    return matches[matches.length - 1].route.element ?? null;
+  };
   const isPathExcluded = (path) => {
     return exclude.some((item) => {
       if ((0, import_lodash.isString)(item)) {
@@ -53,20 +58,18 @@ var CreekKeepAlive = (props) => {
   };
   (0, import_react.useEffect)(() => {
     const currentPath = location.pathname;
+    if (isPathExcluded(currentPath))
+      return;
+    const element = resolveElement(currentPath);
+    if (!element)
+      return;
+    if (!cachedElements[currentPath]) {
+      setCachedElements((prev) => ({ ...prev, [currentPath]: element }));
+    }
     setActiveKey(currentPath);
-    setCachedPages((prev) => {
-      if (prev[currentPath]) {
-        return prev;
-      }
-      return {
-        ...prev,
-        [currentPath]: outletRef.current
-      };
-    });
     setTabItems((prev) => {
       if (prev.find((i) => i.key === currentPath)) {
-        const updated = prev.map((i) => ({ ...i, closable: prev.length > 1 }));
-        return updated;
+        return prev.map((i) => ({ ...i, closable: prev.length > 1 }));
       }
       const title = (getTabTitle == null ? void 0 : getTabTitle(currentPath)) || currentPath;
       const newItems = [...prev, { key: currentPath, label: title, closable: prev.length > 0 }];
@@ -77,19 +80,25 @@ var CreekKeepAlive = (props) => {
         const indexToRemove = newItems.findIndex((item) => item.closable && item.key !== currentPath);
         if (indexToRemove !== -1) {
           const itemToRemove = newItems[indexToRemove];
-          setCachedPages((currentCached) => (0, import_lodash.omit)(currentCached, [itemToRemove.key]));
+          setCachedElements((prev2) => {
+            const next = { ...prev2 };
+            delete next[itemToRemove.key];
+            return next;
+          });
           newItems.splice(indexToRemove, 1);
         }
       }
       return newItems;
     });
-  }, [location.pathname, getTabTitle, maxTabCount]);
-  (0, import_react.useEffect)(() => {
-  }, []);
+  }, [location.pathname, getTabTitle, maxTabCount, cachedElements]);
   const closeTab = (0, import_ahooks.useMemoizedFn)((targetKey) => {
     const targetIndex = tabItems.findIndex((item) => item.key === targetKey);
     const newTabItems = tabItems.filter((item) => item.key !== targetKey);
-    setCachedPages((prev) => (0, import_lodash.omit)(prev, [targetKey]));
+    setCachedElements((prev) => {
+      const next = { ...prev };
+      delete next[targetKey];
+      return next;
+    });
     setTabItems(newTabItems);
     if (targetKey === activeKey) {
       if (newTabItems.length > 0) {
@@ -105,14 +114,14 @@ var CreekKeepAlive = (props) => {
       return;
     const newTabItems = [{ ...currentTab, closable: false }];
     setTabItems(newTabItems);
-    const keepKeys = newTabItems.map((i) => i.key);
-    setCachedPages((prev) => {
-      const newCachedPages = {};
+    const keepKeys = new Set(newTabItems.map((i) => i.key));
+    setCachedElements((prev) => {
+      const next = {};
       keepKeys.forEach((k) => {
         if (prev[k])
-          newCachedPages[k] = prev[k];
+          next[k] = prev[k];
       });
-      return newCachedPages;
+      return next;
     });
     if (activeKey !== currentKey) {
       navigate(currentKey);
@@ -121,11 +130,17 @@ var CreekKeepAlive = (props) => {
   const closeRightTabs = (0, import_ahooks.useMemoizedFn)((currentKey) => {
     const currentIndex = tabItems.findIndex((i) => i.key === currentKey);
     const rightItems = tabItems.slice(currentIndex + 1);
-    const rightKeys = rightItems.map((i) => i.key);
-    const newTabItems = tabItems.filter((i) => !rightKeys.includes(i.key));
+    const rightKeys = new Set(rightItems.map((i) => i.key));
+    const newTabItems = tabItems.filter((i) => !rightKeys.has(i.key));
     setTabItems(newTabItems);
-    setCachedPages((prev) => (0, import_lodash.omit)(prev, rightKeys));
-    if (rightKeys.includes(activeKey)) {
+    setCachedElements((prev) => {
+      const next = { ...prev };
+      rightKeys.forEach((key) => {
+        delete next[key];
+      });
+      return next;
+    });
+    if (rightKeys.has(activeKey)) {
       navigate(currentKey);
     }
   });
@@ -170,7 +185,7 @@ var CreekKeepAlive = (props) => {
       items: tabItems.map((item) => ({
         ...item,
         label: renderTabLabel(item),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "100%", display: activeKey === item.key ? "block" : "none" }, children: activeKey === item.key ? outlet : !isPathExcluded(item.key) ? cachedPages[item.key] : null }, item.key)
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "100%", display: activeKey === item.key ? "block" : "none" }, children: cachedElements[item.key] ?? null }, item.key)
       }))
     }
   ) });

package/dist/creek-keep-alive/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/creek-keep-alive/index.tsx"],
-  "sourcesContent": ["import { useMemoizedFn } from 'ahooks';\nimport { Dropdown, MenuProps, Tabs } from 'antd';\nimport { isRegExp, isString, omit } from 'lodash';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useLocation, useNavigate, useOutlet } from 'react-router-dom';\n\nimport { useT } from '@creekjs/i18n/react';\n\nexport interface CreekKeepAliveProps {\n  /**\n   * 不需要缓存的路径\n   */\n  exclude?: (string | RegExp)[];\n  /**\n   * 自定义Tab标题获取方法\n   */\n  getTabTitle?: (pathname: string) => React.ReactNode;\n  /**\n   * Tabs的样式\n   */\n  tabBarStyle?: React.CSSProperties;\n  /**\n   * 最大缓存数量，默认为 20\n   */\n  maxTabCount?: number;\n}\n\ninterface TabItem {\n  key: string;\n  label: React.ReactNode;\n  closable?: boolean;\n}\n\nexport const CreekKeepAlive: React.FC<CreekKeepAliveProps> = (props) => {\n  const { exclude = [], getTabTitle, tabBarStyle, maxTabCount = 20 } = props;\n\n  const t = useT();\n  const outlet = useOutlet();\n  const location = useLocation();\n  const navigate = useNavigate();\n\n  const [tabItems, setTabItems] = useState<TabItem[]>([]);\n  const [activeKey, setActiveKey] = useState<string>('');\n  const [cachedPages, setCachedPages] = useState<Record<string, React.ReactNode>>({});\n\n  // 用 ref 存储 outlet，避免 outlet 引用变化导致 useEffect 无限循环\n  const outletRef = useRef(outlet);\n  outletRef.current = outlet;\n\n  // 判断是否不需要缓存\n  const isPathExcluded = (path: string) => {\n    return exclude.some((item) => {\n      if (isString(item)) {\n        return item === path;\n      }\n      if (isRegExp(item)) {\n        return item.test(path);\n      }\n      return false;\n    });\n  };\n\n  // 初始化或路由变化时更新\n  useEffect(() => {\n    const currentPath = location.pathname;\n    setActiveKey(currentPath);\n\n    // 更新页面内容缓存\n    setCachedPages((prev) => {\n      if (prev[currentPath]) {\n        return prev;\n      }\n      return {\n        ...prev,\n        [currentPath]: outletRef.current,\n      };\n    });\n\n    // 更新 Tab 列表\n    setTabItems((prev) => {\n      if (prev.find((i) => i.key === currentPath)) {\n        // 更新现有 tab 的 closable 状态（只有最后一个 tab 时不可关闭）\n        const updated = prev.map((i) => ({ ...i, closable: prev.length > 1 }));\n        return updated;\n      }\n      const title = getTabTitle?.(currentPath) || currentPath;\n      const newItems = [...prev, { key: currentPath, label: title, closable: prev.length > 0 }];\n\n      // 更新所有 tab 的 closable 状态：只有1个 tab 时全部不可关闭\n      if (newItems.length === 1) {\n        newItems[0].closable = false;\n      }\n\n      // 超过最大数量限制\n      if (newItems.length > maxTabCount) {\n        // 找到第一个可以关闭的 Tab（非首页、非当前页）\n        // 这里策略是移除最早加入的那个可关闭 Tab。prev[0] 是最早的。\n        // 但要注意不要移除当前页（currentPath），虽然 currentPath 是刚加进去的，但在极端情况下（比如 max=1）\n        // 简单策略：移除第一个 closable 且 key !== currentPath 的 item\n        const indexToRemove = newItems.findIndex((item) => item.closable && item.key !== currentPath);\n        if (indexToRemove !== -1) {\n          const itemToRemove = newItems[indexToRemove];\n          // 顺便移除缓存\n          setCachedPages((currentCached) => omit(currentCached, [itemToRemove.key]));\n          newItems.splice(indexToRemove, 1);\n        }\n      }\n      return newItems;\n    });\n  }, [location.pathname, getTabTitle, maxTabCount]);\n\n  // 清理不需要缓存的页面\n  useEffect(() => {\n    // 监听路由离开\n    // 这里比较 tricky，因为 useEffect 拿到的 activeKey 已经是新的了\n    // 我们需要知道\"上一个\"路径\n    // 简化处理：每次 render 时，检查 pages 里哪些是不需要缓存且不处于 active 状态的，将其移除？\n    // 但如果在 setState 里做会导致死循环。\n    // 另一种策略：不缓存 = 离开时销毁。\n    // 我们可以在 pages 渲染时控制。\n  }, []);\n\n  const closeTab = useMemoizedFn((targetKey: string) => {\n    const targetIndex = tabItems.findIndex((item) => item.key === targetKey);\n    const newTabItems = tabItems.filter((item) => item.key !== targetKey);\n\n    // 移除缓存\n    setCachedPages((prev) => omit(prev, [targetKey]));\n    setTabItems(newTabItems);\n\n    // 如果关闭的是当前页，跳转到临近页\n    if (targetKey === activeKey) {\n      if (newTabItems.length > 0) {\n        // 尝试跳到右边，没有则左边\n        const nextIndex = targetIndex >= newTabItems.length ? newTabItems.length - 1 : targetIndex;\n        const nextKey = newTabItems[nextIndex].key;\n        navigate(nextKey);\n      }\n    }\n  });\n\n  const closeOtherTabs = useMemoizedFn((currentKey: string) => {\n    const currentTab = tabItems.find((item) => item.key === currentKey);\n    if (!currentTab) return;\n    const newTabItems = [{ ...currentTab, closable: false }];\n    setTabItems(newTabItems);\n\n    const keepKeys = newTabItems.map((i) => i.key);\n    setCachedPages((prev) => {\n      const newCachedPages: Record<string, React.ReactNode> = {};\n      keepKeys.forEach((k) => {\n        if (prev[k]) newCachedPages[k] = prev[k];\n      });\n      return newCachedPages;\n    });\n\n    if (activeKey !== currentKey) {\n      navigate(currentKey);\n    }\n  });\n\n  const closeRightTabs = useMemoizedFn((currentKey: string) => {\n    const currentIndex = tabItems.findIndex((i) => i.key === currentKey);\n    const rightItems = tabItems.slice(currentIndex + 1);\n    const rightKeys = rightItems.map((i) => i.key);\n\n    const newTabItems = tabItems.filter((i) => !rightKeys.includes(i.key));\n    setTabItems(newTabItems);\n\n    setCachedPages((prev) => omit(prev, rightKeys));\n\n    if (rightKeys.includes(activeKey)) {\n      navigate(currentKey);\n    }\n  });\n\n  const handleTabEdit = (targetKey: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => {\n    if (action === 'remove' && isString(targetKey)) {\n      closeTab(targetKey);\n    }\n  };\n\n  const handleTabClick = (key: string) => {\n    navigate(key);\n  };\n\n  const renderTabLabel = (item: TabItem) => {\n    const menuItems: MenuProps['items'] = [\n      {\n        key: 'close',\n        label: t('creek-keep-alive.index.guanBiDangQian', '关闭当前'),\n        disabled: tabItems.length <= 1,\n        onClick: () => closeTab(item.key),\n      },\n      {\n        key: 'closeOthers',\n        label: t('creek-keep-alive.index.guanBiQiTa', '关闭其他'),\n        onClick: () => closeOtherTabs(item.key),\n      },\n      {\n        key: 'closeRight',\n        label: t('creek-keep-alive.index.guanBiYouCe', '关闭右侧'),\n        onClick: () => closeRightTabs(item.key),\n      },\n    ];\n\n    return (\n      <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>\n        <span>{item.label}</span>\n      </Dropdown>\n    );\n  };\n\n  return (\n    <div className=\"creek-keep-alive\">\n      <Tabs\n        activeKey={activeKey}\n        type=\"editable-card\"\n        hideAdd\n        onChange={handleTabClick}\n        onEdit={handleTabEdit}\n        tabBarStyle={{ margin: 0, ...tabBarStyle }}\n        items={tabItems.map((item) => ({\n          ...item,\n          label: renderTabLabel(item),\n          children: (\n            <div key={item.key} style={{ height: '100%', display: activeKey === item.key ? 'block' : 'none' }}>\n              {/* 当前激活页渲染实时outlet，非激活页渲染缓存 */}\n              {activeKey === item.key\n                ? outlet\n                : !isPathExcluded(item.key)\n                  ? cachedPages[item.key]\n                  : null}\n            </div>\n          ),\n        }))}\n      />\n    </div>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA8B;AAC9B,kBAA0C;AAC1C,oBAAyC;AACzC,mBAAmD;AACnD,8BAAoD;AAEpD,IAAAA,gBAAqB;AA0Mb;AA/KD,IAAM,iBAAgD,CAAC,UAAU;AACtE,QAAM,EAAE,UAAU,CAAC,GAAG,aAAa,aAAa,cAAc,GAAG,IAAI;AAErE,QAAM,QAAI,oBAAK;AACf,QAAM,aAAS,mCAAU;AACzB,QAAM,eAAW,qCAAY;AAC7B,QAAM,eAAW,qCAAY;AAE7B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAoB,CAAC,CAAC;AACtD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAiB,EAAE;AACrD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA0C,CAAC,CAAC;AAGlF,QAAM,gBAAY,qBAAO,MAAM;AAC/B,YAAU,UAAU;AAGpB,QAAM,iBAAiB,CAAC,SAAiB;AACvC,WAAO,QAAQ,KAAK,CAAC,SAAS;AAC5B,cAAI,wBAAS,IAAI,GAAG;AAClB,eAAO,SAAS;AAAA,MAClB;AACA,cAAI,wBAAS,IAAI,GAAG;AAClB,eAAO,KAAK,KAAK,IAAI;AAAA,MACvB;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAGA,8BAAU,MAAM;AACd,UAAM,cAAc,SAAS;AAC7B,iBAAa,WAAW;AAGxB,mBAAe,CAAC,SAAS;AACvB,UAAI,KAAK,WAAW,GAAG;AACrB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,QACL,GAAG;AAAA,QACH,CAAC,WAAW,GAAG,UAAU;AAAA,MAC3B;AAAA,IACF,CAAC;AAGD,gBAAY,CAAC,SAAS;AACpB,UAAI,KAAK,KAAK,CAAC,MAAM,EAAE,QAAQ,WAAW,GAAG;AAE3C,cAAM,UAAU,KAAK,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,UAAU,KAAK,SAAS,EAAE,EAAE;AACrE,eAAO;AAAA,MACT;AACA,YAAM,SAAQ,2CAAc,iBAAgB;AAC5C,YAAM,WAAW,CAAC,GAAG,MAAM,EAAE,KAAK,aAAa,OAAO,OAAO,UAAU,KAAK,SAAS,EAAE,CAAC;AAGxF,UAAI,SAAS,WAAW,GAAG;AACzB,iBAAS,CAAC,EAAE,WAAW;AAAA,MACzB;AAGA,UAAI,SAAS,SAAS,aAAa;AAKjC,cAAM,gBAAgB,SAAS,UAAU,CAAC,SAAS,KAAK,YAAY,KAAK,QAAQ,WAAW;AAC5F,YAAI,kBAAkB,IAAI;AACxB,gBAAM,eAAe,SAAS,aAAa;AAE3C,yBAAe,CAAC,sBAAkB,oBAAK,eAAe,CAAC,aAAa,GAAG,CAAC,CAAC;AACzE,mBAAS,OAAO,eAAe,CAAC;AAAA,QAClC;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,UAAU,aAAa,WAAW,CAAC;AAGhD,8BAAU,MAAM;AAAA,EAQhB,GAAG,CAAC,CAAC;AAEL,QAAM,eAAW,6BAAc,CAAC,cAAsB;AACpD,UAAM,cAAc,SAAS,UAAU,CAAC,SAAS,KAAK,QAAQ,SAAS;AACvE,UAAM,cAAc,SAAS,OAAO,CAAC,SAAS,KAAK,QAAQ,SAAS;AAGpE,mBAAe,CAAC,aAAS,oBAAK,MAAM,CAAC,SAAS,CAAC,CAAC;AAChD,gBAAY,WAAW;AAGvB,QAAI,cAAc,WAAW;AAC3B,UAAI,YAAY,SAAS,GAAG;AAE1B,cAAM,YAAY,eAAe,YAAY,SAAS,YAAY,SAAS,IAAI;AAC/E,cAAM,UAAU,YAAY,SAAS,EAAE;AACvC,iBAAS,OAAO;AAAA,MAClB;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,qBAAiB,6BAAc,CAAC,eAAuB;AAC3D,UAAM,aAAa,SAAS,KAAK,CAAC,SAAS,KAAK,QAAQ,UAAU;AAClE,QAAI,CAAC;AAAY;AACjB,UAAM,cAAc,CAAC,EAAE,GAAG,YAAY,UAAU,MAAM,CAAC;AACvD,gBAAY,WAAW;AAEvB,UAAM,WAAW,YAAY,IAAI,CAAC,MAAM,EAAE,GAAG;AAC7C,mBAAe,CAAC,SAAS;AACvB,YAAM,iBAAkD,CAAC;AACzD,eAAS,QAAQ,CAAC,MAAM;AACtB,YAAI,KAAK,CAAC;AAAG,yBAAe,CAAC,IAAI,KAAK,CAAC;AAAA,MACzC,CAAC;AACD,aAAO;AAAA,IACT,CAAC;AAED,QAAI,cAAc,YAAY;AAC5B,eAAS,UAAU;AAAA,IACrB;AAAA,EACF,CAAC;AAED,QAAM,qBAAiB,6BAAc,CAAC,eAAuB;AAC3D,UAAM,eAAe,SAAS,UAAU,CAAC,MAAM,EAAE,QAAQ,UAAU;AACnE,UAAM,aAAa,SAAS,MAAM,eAAe,CAAC;AAClD,UAAM,YAAY,WAAW,IAAI,CAAC,MAAM,EAAE,GAAG;AAE7C,UAAM,cAAc,SAAS,OAAO,CAAC,MAAM,CAAC,UAAU,SAAS,EAAE,GAAG,CAAC;AACrE,gBAAY,WAAW;AAEvB,mBAAe,CAAC,aAAS,oBAAK,MAAM,SAAS,CAAC;AAE9C,QAAI,UAAU,SAAS,SAAS,GAAG;AACjC,eAAS,UAAU;AAAA,IACrB;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,CAAC,WAA4D,WAA6B;AAC9G,QAAI,WAAW,gBAAY,wBAAS,SAAS,GAAG;AAC9C,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,iBAAiB,CAAC,QAAgB;AACtC,aAAS,GAAG;AAAA,EACd;AAEA,QAAM,iBAAiB,CAAC,SAAkB;AACxC,UAAM,YAAgC;AAAA,MACpC;AAAA,QACE,KAAK;AAAA,QACL,OAAO,EAAE,yCAAyC,MAAM;AAAA,QACxD,UAAU,SAAS,UAAU;AAAA,QAC7B,SAAS,MAAM,SAAS,KAAK,GAAG;AAAA,MAClC;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,OAAO,EAAE,qCAAqC,MAAM;AAAA,QACpD,SAAS,MAAM,eAAe,KAAK,GAAG;AAAA,MACxC;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,OAAO,EAAE,sCAAsC,MAAM;AAAA,QACrD,SAAS,MAAM,eAAe,KAAK,GAAG;AAAA,MACxC;AAAA,IACF;AAEA,WACE,4CAAC,wBAAS,MAAM,EAAE,OAAO,UAAU,GAAG,SAAS,CAAC,aAAa,GAC3D,sDAAC,UAAM,eAAK,OAAM,GACpB;AAAA,EAEJ;AAEA,SACE,4CAAC,SAAI,WAAU,oBACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,aAAa,EAAE,QAAQ,GAAG,GAAG,YAAY;AAAA,MACzC,OAAO,SAAS,IAAI,CAAC,UAAU;AAAA,QAC7B,GAAG;AAAA,QACH,OAAO,eAAe,IAAI;AAAA,QAC1B,UACE,4CAAC,SAAmB,OAAO,EAAE,QAAQ,QAAQ,SAAS,cAAc,KAAK,MAAM,UAAU,OAAO,GAE7F,wBAAc,KAAK,MAChB,SACA,CAAC,eAAe,KAAK,GAAG,IACtB,YAAY,KAAK,GAAG,IACpB,QANE,KAAK,GAOf;AAAA,MAEJ,EAAE;AAAA;AAAA,EACJ,GACF;AAEJ;",
-  "names": ["import_react"]
+  "sourcesContent": ["import { useMemoizedFn } from 'ahooks';\nimport { Dropdown, MenuProps, Tabs } from 'antd';\nimport { isRegExp, isString } from 'lodash';\nimport React, { useEffect, useState } from 'react';\nimport { matchRoutes, useLocation, useNavigate } from 'react-router-dom';\n\nimport { useT } from '@creekjs/i18n/react';\n\nexport interface CreekKeepAliveProps {\n  /**\n   * 不需要缓存的路径\n   */\n  exclude?: (string | RegExp)[];\n  /**\n   * 自定义Tab标题获取方法\n   */\n  getTabTitle?: (pathname: string) => React.ReactNode;\n  /**\n   * Tabs的样式\n   */\n  tabBarStyle?: React.CSSProperties;\n  /**\n   * 最大缓存数量，默认为 20\n   */\n  maxTabCount?: number;\n  /**\n   * 路由配置（含 element），用于解析每个路径对应的页面组件\n   */\n  routes?: any[];\n}\n\ninterface TabItem {\n  key: string;\n  label: React.ReactNode;\n  closable?: boolean;\n}\n\nexport const CreekKeepAlive: React.FC<CreekKeepAliveProps> = (props) => {\n  const { exclude = [], getTabTitle, tabBarStyle, maxTabCount = 20, routes = [] } = props;\n\n  const t = useT();\n  const location = useLocation();\n  const navigate = useNavigate();\n\n  const [tabItems, setTabItems] = useState<TabItem[]>([]);\n  const [activeKey, setActiveKey] = useState<string>('');\n\n  // 缓存每个路径对应的 React element，保证同一页面始终复用同一个 element 引用\n  // 这样 React reconciler 不会卸载/重新挂载组件，从而实现 keep-alive\n  // 使用 state 以便缓存变化时触发重新渲染\n  const [cachedElements, setCachedElements] = useState<Record<string, React.ReactNode>>({});\n\n  // 根据路由配置，解析指定路径对应的叶子路由 element\n  const resolveElement = (path: string): React.ReactNode | null => {\n    if (!routes?.length) return null;\n    const matches = matchRoutes(routes, path);\n    if (!matches?.length) return null;\n    // 取最后一个 match（叶子路由），即实际页面组件\n    return matches[matches.length - 1].route.element ?? null;\n  };\n\n  // 判断是否不需要缓存\n  const isPathExcluded = (path: string) => {\n    return exclude.some((item) => {\n      if (isString(item)) {\n        return item === path;\n      }\n      if (isRegExp(item)) {\n        return item.test(path);\n      }\n      return false;\n    });\n  };\n\n  // 初始化或路由变化时更新\n  useEffect(() => {\n    const currentPath = location.pathname;\n\n    // 不需要缓存的路径，不创建 tab\n    if (isPathExcluded(currentPath)) return;\n\n    // 如果路由配置中没有对应的 element（如纯 redirect 路由），不创建 tab\n    const element = resolveElement(currentPath);\n    if (!element) return;\n\n    // 缓存当前路径的 element（仅首次缓存，后续复用同一个 element 引用）\n    if (!cachedElements[currentPath]) {\n      setCachedElements((prev) => ({ ...prev, [currentPath]: element }));\n    }\n\n    setActiveKey(currentPath);\n\n    // 更新 Tab 列表\n    setTabItems((prev) => {\n      if (prev.find((i) => i.key === currentPath)) {\n        // 更新现有 tab 的 closable 状态（只有最后一个 tab 时不可关闭）\n        return prev.map((i) => ({ ...i, closable: prev.length > 1 }));\n      }\n      const title = getTabTitle?.(currentPath) || currentPath;\n      const newItems = [...prev, { key: currentPath, label: title, closable: prev.length > 0 }];\n\n      // 只有1个 tab 时不可关闭\n      if (newItems.length === 1) {\n        newItems[0].closable = false;\n      }\n\n      // 超过最大数量限制，移除最早的可关闭 tab\n      if (newItems.length > maxTabCount) {\n        const indexToRemove = newItems.findIndex((item) => item.closable && item.key !== currentPath);\n        if (indexToRemove !== -1) {\n          const itemToRemove = newItems[indexToRemove];\n          setCachedElements((prev) => {\n            const next = { ...prev };\n            delete next[itemToRemove.key];\n            return next;\n          });\n          newItems.splice(indexToRemove, 1);\n        }\n      }\n      return newItems;\n    });\n  }, [location.pathname, getTabTitle, maxTabCount, cachedElements]);\n\n  const closeTab = useMemoizedFn((targetKey: string) => {\n    const targetIndex = tabItems.findIndex((item) => item.key === targetKey);\n    const newTabItems = tabItems.filter((item) => item.key !== targetKey);\n\n    // 移除缓存，组件将卸载\n    setCachedElements((prev) => {\n      const next = { ...prev };\n      delete next[targetKey];\n      return next;\n    });\n    setTabItems(newTabItems);\n\n    // 如果关闭的是当前页，跳转到临近页\n    if (targetKey === activeKey) {\n      if (newTabItems.length > 0) {\n        const nextIndex = targetIndex >= newTabItems.length ? newTabItems.length - 1 : targetIndex;\n        const nextKey = newTabItems[nextIndex].key;\n        navigate(nextKey);\n      }\n    }\n  });\n\n  const closeOtherTabs = useMemoizedFn((currentKey: string) => {\n    const currentTab = tabItems.find((item) => item.key === currentKey);\n    if (!currentTab) return;\n    const newTabItems = [{ ...currentTab, closable: false }];\n    setTabItems(newTabItems);\n\n    // 仅保留当前 tab 的缓存\n    const keepKeys = new Set(newTabItems.map((i) => i.key));\n    setCachedElements((prev) => {\n      const next: Record<string, React.ReactNode> = {};\n      keepKeys.forEach((k) => {\n        if (prev[k]) next[k] = prev[k];\n      });\n      return next;\n    });\n\n    if (activeKey !== currentKey) {\n      navigate(currentKey);\n    }\n  });\n\n  const closeRightTabs = useMemoizedFn((currentKey: string) => {\n    const currentIndex = tabItems.findIndex((i) => i.key === currentKey);\n    const rightItems = tabItems.slice(currentIndex + 1);\n    const rightKeys = new Set(rightItems.map((i) => i.key));\n\n    const newTabItems = tabItems.filter((i) => !rightKeys.has(i.key));\n    setTabItems(newTabItems);\n\n    // 移除右侧 tab 的缓存\n    setCachedElements((prev) => {\n      const next = { ...prev };\n      rightKeys.forEach((key) => { delete next[key]; });\n      return next;\n    });\n\n    if (rightKeys.has(activeKey)) {\n      navigate(currentKey);\n    }\n  });\n\n  const handleTabEdit = (targetKey: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => {\n    if (action === 'remove' && isString(targetKey)) {\n      closeTab(targetKey);\n    }\n  };\n\n  const handleTabClick = (key: string) => {\n    navigate(key);\n  };\n\n  const renderTabLabel = (item: TabItem) => {\n    const menuItems: MenuProps['items'] = [\n      {\n        key: 'close',\n        label: t('creek-keep-alive.index.guanBiDangQian', '关闭当前'),\n        disabled: tabItems.length <= 1,\n        onClick: () => closeTab(item.key),\n      },\n      {\n        key: 'closeOthers',\n        label: t('creek-keep-alive.index.guanBiQiTa', '关闭其他'),\n        onClick: () => closeOtherTabs(item.key),\n      },\n      {\n        key: 'closeRight',\n        label: t('creek-keep-alive.index.guanBiYouCe', '关闭右侧'),\n        onClick: () => closeRightTabs(item.key),\n      },\n    ];\n\n    return (\n      <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>\n        <span>{item.label}</span>\n      </Dropdown>\n    );\n  };\n\n  return (\n    <div className=\"creek-keep-alive\">\n      <Tabs\n        activeKey={activeKey}\n        type=\"editable-card\"\n        hideAdd\n        onChange={handleTabClick}\n        onEdit={handleTabEdit}\n        tabBarStyle={{ margin: 0, ...tabBarStyle }}\n        items={tabItems.map((item) => ({\n          ...item,\n          label: renderTabLabel(item),\n          children: (\n            <div key={item.key} style={{ height: '100%', display: activeKey === item.key ? 'block' : 'none' }}>\n              {cachedElements[item.key] ?? null}\n            </div>\n          ),\n        }))}\n      />\n    </div>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["import_react", "prev"]
 }

package/dist/creek-layout/ActionRender/UserInfo.js

@@ -47,8 +47,8 @@ var UserInfo = (props) => {
   const { styles } = useStyles();
   const { name, avatar, menu } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Dropdown, { arrow: true, placement: "bottom", overlayClassName: styles.userInfoDropdownOverlay, menu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Space, { size: 4, align: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Avatar, { className: styles.avatarContainer, src: avatar, children: name }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: name })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Avatar, { className: styles.avatarContainer, src: avatar, children: typeof name === "string" ? name.charAt(0).toUpperCase() : name }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Typography.Text, { strong: true, children: name })
   ] }) });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/creek-layout/ActionRender/UserInfo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/creek-layout/ActionRender/UserInfo.tsx"],
-  "sourcesContent": ["import { Avatar, Dropdown, DropDownProps, Space } from \"antd\";\nimport { createStyles } from \"antd-style\";\n\nconst useStyles = createStyles(({ token}) => ({\n  avatarContainer: {\n    backgroundColor: token.colorPrimary,\n    width: 24,\n    height: 24,\n  },\n  userInfoDropdownOverlay: {\n    \".ant-dropdown-menu\": {\n      padding: \"8px 0\",\n    },\n    \".ant-dropdown-menu-item\": {\n      \".ant-dropdown-menu-item-icon\": {\n        fontSize: \"18px\",\n        marginRight: \"8px\",\n      },\n    },\n  },\n}));\n\nexport interface UserInfoProps {\n  name?: React.ReactNode;\n  avatar?: string;\n  menu?: DropDownProps['menu'];\n}\n\nexport const UserInfo = (props: UserInfoProps) => {\n  const { styles } = useStyles();\n  const { name, avatar, menu } = props;\n\n  return (\n    <Dropdown arrow placement=\"bottom\" overlayClassName={styles.userInfoDropdownOverlay} menu={menu}>\n      <Space size={4} align=\"center\">\n        <Avatar className={styles.avatarContainer} src={avatar}>\n          {name}\n        </Avatar>\n        <span>{name}</span>\n      </Space>\n    </Dropdown>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAuD;AACvD,wBAA6B;AAiCvB;AA/BN,IAAM,gBAAY,gCAAa,CAAC,EAAE,MAAK,OAAO;AAAA,EAC5C,iBAAiB;AAAA,IACf,iBAAiB,MAAM;AAAA,IACvB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,yBAAyB;AAAA,IACvB,sBAAsB;AAAA,MACpB,SAAS;AAAA,IACX;AAAA,IACA,2BAA2B;AAAA,MACzB,gCAAgC;AAAA,QAC9B,UAAU;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,EAAE;AAQK,IAAM,WAAW,CAAC,UAAyB;AAChD,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,QAAM,EAAE,MAAM,QAAQ,KAAK,IAAI;AAE/B,SACE,4CAAC,wBAAS,OAAK,MAAC,WAAU,UAAS,kBAAkB,OAAO,yBAAyB,MACnF,uDAAC,qBAAM,MAAM,GAAG,OAAM,UACpB;AAAA,gDAAC,sBAAO,WAAW,OAAO,iBAAiB,KAAK,QAC7C,gBACH;AAAA,IACA,4CAAC,UAAM,gBAAK;AAAA,KACd,GACF;AAEJ;",
+  "sourcesContent": ["import { Avatar, Dropdown, DropDownProps, Space, Typography } from \"antd\";\nimport { createStyles } from \"antd-style\";\n\nconst useStyles = createStyles(({ token}) => ({\n  avatarContainer: {\n    backgroundColor: token.colorPrimary,\n    width: 24,\n    height: 24,\n  },\n  userInfoDropdownOverlay: {\n    \".ant-dropdown-menu\": {\n      padding: \"8px 0\",\n    },\n    \".ant-dropdown-menu-item\": {\n      \".ant-dropdown-menu-item-icon\": {\n        fontSize: \"18px\",\n        marginRight: \"8px\",\n      },\n    },\n  },\n}));\n\nexport interface UserInfoProps {\n  name?: React.ReactNode;\n  avatar?: string;\n  menu?: DropDownProps['menu'];\n}\n\nexport const UserInfo = (props: UserInfoProps) => {\n  const { styles } = useStyles();\n  const { name, avatar, menu } = props;\n\n  return (\n    <Dropdown arrow placement=\"bottom\" overlayClassName={styles.userInfoDropdownOverlay} menu={menu}>\n      <Space size={4} align=\"center\">\n        <Avatar className={styles.avatarContainer} src={avatar}>\n          {typeof name === 'string' ? name.charAt(0).toUpperCase() : name}\n        </Avatar>\n        <Typography.Text strong>{name}</Typography.Text>\n      </Space>\n    </Dropdown>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmE;AACnE,wBAA6B;AAiCvB;AA/BN,IAAM,gBAAY,gCAAa,CAAC,EAAE,MAAK,OAAO;AAAA,EAC5C,iBAAiB;AAAA,IACf,iBAAiB,MAAM;AAAA,IACvB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,yBAAyB;AAAA,IACvB,sBAAsB;AAAA,MACpB,SAAS;AAAA,IACX;AAAA,IACA,2BAA2B;AAAA,MACzB,gCAAgC;AAAA,QAC9B,UAAU;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,EAAE;AAQK,IAAM,WAAW,CAAC,UAAyB;AAChD,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,QAAM,EAAE,MAAM,QAAQ,KAAK,IAAI;AAE/B,SACE,4CAAC,wBAAS,OAAK,MAAC,WAAU,UAAS,kBAAkB,OAAO,yBAAyB,MACnF,uDAAC,qBAAM,MAAM,GAAG,OAAM,UACpB;AAAA,gDAAC,sBAAO,WAAW,OAAO,iBAAiB,KAAK,QAC7C,iBAAO,SAAS,WAAW,KAAK,OAAO,CAAC,EAAE,YAAY,IAAI,MAC7D;AAAA,IACA,4CAAC,uBAAW,MAAX,EAAgB,QAAM,MAAE,gBAAK;AAAA,KAChC,GACF;AAEJ;",
   "names": []
 }

package/dist/creek-layout/ActionRender/index.d.ts

@@ -1,3 +1,3 @@
 export { FullScreen } from './FullScreen';
-export { UserInfo } from './UserInfo';
+export { UserInfo, type UserInfoProps } from './UserInfo';
 export { LayoutSettings } from './LayoutSettings';

package/dist/creek-layout/ActionRender/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/creek-layout/ActionRender/index.tsx"],
-  "sourcesContent": ["export { FullScreen } from './FullScreen';\nexport { UserInfo } from './UserInfo';\nexport { LayoutSettings } from './LayoutSettings';\n\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAA2B;AAC3B,sBAAyB;AACzB,4BAA+B;",
+  "sourcesContent": ["export { FullScreen } from './FullScreen';\nexport { UserInfo, type UserInfoProps } from './UserInfo';\nexport { LayoutSettings } from './LayoutSettings';\n\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAA2B;AAC3B,sBAA6C;AAC7C,4BAA+B;",
   "names": []
 }

package/dist/creek-layout/index.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { ProLayoutProps } from '@ant-design/pro-components';
 import { CreekKeepAliveProps } from '../creek-keep-alive';
-export type LayoutProps = ProLayoutProps & {
+import { UserInfoProps } from './ActionRender';
+export type CreekLayoutProps = ProLayoutProps & {
     runtimeConfig: ProLayoutProps;
     userConfig?: ProLayoutProps;
     navigate?: (path?: string | number) => void;
@@ -16,6 +17,15 @@ export type LayoutProps = ProLayoutProps & {
     };
     keepAlive?: boolean | CreekKeepAliveProps;
     extraActions?: React.ReactNode[];
+    clientRoutes?: any[];
+    iconFontCNs?: string[];
+    /**
+     * 用户信息区域，支持传入配置对象（名称、头像、下拉菜单）或自定义渲染函数
+     * - 传对象：自动使用 UserInfo 组件渲染
+     * - 传函数：返回 ReactNode 直接渲染，返回 UserInfoProps 对象则使用 UserInfo 组件渲染
+     */
+    renderUser?: UserInfoProps | (() => React.ReactNode | UserInfoProps);
 };
-export declare const CreekLayout: (props: LayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CreekLayout: (props: CreekLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export * from './Exception';
+export { UserInfo, type UserInfoProps } from './ActionRender';

package/dist/creek-layout/index.js

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/creek-layout/index.tsx
 var creek_layout_exports = {};
 __export(creek_layout_exports, {
-  CreekLayout: () => CreekLayout
+  CreekLayout: () => CreekLayout,
+  UserInfo: () => import_ActionRender2.UserInfo
 });
 module.exports = __toCommonJS(creek_layout_exports);
 var import_pro_components = require("@ant-design/pro-components");
@@ -48,6 +49,7 @@ var import_CollapseButton = require("./CollapseButton");
 var import_Exception = require("./Exception");
 var import_useLayoutSettingsStore = require("./useLayoutSettingsStore");
 __reExport(creek_layout_exports, require("./Exception"), module.exports);
+var import_ActionRender2 = require("./ActionRender");
 var import_jsx_runtime = require("react/jsx-runtime");
 var MenuName = ({ name, path }) => {
   const t = (0, import_react2.useT)();
@@ -68,6 +70,9 @@ var CreekLayout = (props) => {
     showThemeColor = true,
     keepAlive = false,
     extraActions = [],
+    clientRoutes,
+    iconFontCNs,
+    renderUser,
     ...more
   } = props;
   const { useToken } = import_antd.theme;
@@ -124,6 +129,12 @@ var CreekLayout = (props) => {
     return hasI18n ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuName, { name: title, path: pathname }) : title;
   });
   const actions = [...extraActions];
+  if (renderUser) {
+    let result = typeof renderUser === "function" ? renderUser() : renderUser;
+    const isUserInfoProps = (val) => val !== null && typeof val === "object" && ("name" in val || "avatar" in val || "menu" in val);
+    const userInfoNode = isUserInfoProps(result) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionRender.UserInfo, { ...result }) : result;
+    actions.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: userInfoNode }, "user-info"));
+  }
   if (actualShowFullScreen) {
     actions.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionRender.FullScreen, {}, "full-screen"));
   }
@@ -175,7 +186,7 @@ var CreekLayout = (props) => {
       ...more,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_scrollbar.GlobalScrollbarStyle, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Exception.Exception, { children: actualKeepAlive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_creek_keep_alive.CreekKeepAlive, { getTabTitle, ...keepAliveProps }) : children })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Exception.Exception, { children: actualKeepAlive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_creek_keep_alive.CreekKeepAlive, { getTabTitle, routes: clientRoutes ?? (route == null ? void 0 : route.routes), ...keepAliveProps }) : children })
       ]
     }
   );
@@ -184,6 +195,7 @@ var CreekLayout = (props) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CreekLayout,
+  UserInfo,
   ...require("./Exception")
 });
 //# sourceMappingURL=index.js.map

package/dist/creek-layout/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/creek-layout/index.tsx"],
-  "sourcesContent": ["import { MenuDataItem, ProLayout, ProLayoutProps } from '@ant-design/pro-components';\nimport { useMemoizedFn } from 'ahooks';\nimport { theme } from 'antd';\nimport _ from 'lodash';\nimport { useContext } from 'react';\n\nimport classnames from 'classnames';\n\nimport { IntlContext, useT } from '@creekjs/i18n/react';\n\nimport { CreekKeepAlive, CreekKeepAliveProps } from '../creek-keep-alive';\nimport { CreekLocaleButton } from '../creek-locale-button';\nimport { GlobalScrollbarStyle } from '../creek-style/scrollbar';\nimport { FullScreen, LayoutSettings } from './ActionRender';\nimport { CollapsedButton, useCollapsedStore } from './CollapseButton';\nimport { Exception } from './Exception';\nimport { useLayoutSettingsStore } from './useLayoutSettingsStore';\n\nexport type LayoutProps = ProLayoutProps & {\n  runtimeConfig: ProLayoutProps;\n  userConfig?: ProLayoutProps;\n  navigate?: (path?: string | number) => void;\n  showFullScreen?: boolean;\n  showLocaleButton?: boolean;\n  showSettingsButton?: boolean;\n  showThemeColor?: boolean;\n  initialInfo?: {\n    initialState: any;\n    loading: boolean;\n    setInitialState: () => void;\n  };\n  keepAlive?: boolean | CreekKeepAliveProps;\n  extraActions?: React.ReactNode[];\n};\n\nconst MenuName = ({ name, path }: { name?: string; path?: string }) => {\n  const t = useT();\n  const key = !path || path === '/' ? 'menu.home' : `menu${path.replace(/\\//g, '.')}`;\n  return t(key, name);\n};\n\nexport const CreekLayout = (props: LayoutProps) => {\n  const {\n    route,\n    userConfig,\n    runtimeConfig,\n    children,\n    location,\n    navigate,\n    showFullScreen = false,\n    showLocaleButton = false,\n    showSettingsButton = false,\n    showThemeColor = true,\n    keepAlive = false,\n    extraActions = [],\n    ...more\n  } = props;\n\n  const { useToken } = theme;\n  const { token } = useToken();\n\n  const { collapsed } = useCollapsedStore();\n  const settingsStore = useLayoutSettingsStore();\n\n  const actualShowFullScreen = showFullScreen && (settingsStore.showFullScreen ?? true);\n  const actualShowLocaleButton = showLocaleButton && (settingsStore.showLocaleButton ?? true);\n  const colorPrimary = settingsStore.colorPrimary || token.colorPrimary;\n  const actualKeepAlive = keepAlive && (settingsStore.keepAlive ?? true);\n\n  const _userConfig = { ...userConfig, ...runtimeConfig };\n\n  const intlContext = useContext(IntlContext);\n  const hasI18n = !!intlContext && actualShowLocaleButton;\n\n  const menuDataRender = useMemoizedFn((menuData: MenuDataItem[]) => {\n    // 根据当前是否开启了国际化（上下文是否存在）以及用户配置来判断是否包裹菜单翻译\n    const isLocaleEnabled = hasI18n;\n\n    const mapMenu = (items: MenuDataItem[]): MenuDataItem[] => {\n      return items.map((item) => {\n        return {\n          ...item,\n          name: (isLocaleEnabled ? <MenuName name={item.name} path={item.path} /> : item.name) as string,\n          children: item.children ? mapMenu(item.children) : undefined,\n        };\n      });\n    };\n    return mapMenu(menuData);\n  });\n\n  const menuItemRender: ProLayoutProps['menuItemRender'] = useMemoizedFn((itemProps, defaultDom) => {\n    return (\n      <span\n        onClick={() => {\n          if (navigate) {\n            navigate(itemProps.path);\n          }\n        }}\n      >\n        {defaultDom}\n      </span>\n    );\n  });\n\n  const getTabTitle = useMemoizedFn((pathname: string): string | React.ReactNode => {\n    const routes = (route?.routes ?? []) as MenuDataItem[];\n\n    const findTitle = (items: MenuDataItem[]): string | undefined => {\n      for (const item of items) {\n        if (item.path === pathname) return item.name ?? item.title;\n        if (item.children) {\n          const found = findTitle(item.children);\n          if (found) return found;\n        }\n      }\n    };\n\n    const title = findTitle(routes) ?? pathname;\n\n    return hasI18n ? <MenuName name={title} path={pathname} /> : title;\n  });\n\n  const actions: React.ReactNode[] = [...extraActions];\n\n  if (actualShowFullScreen) {\n    actions.push(<FullScreen key=\"full-screen\" />);\n  }\n\n  if (actualShowLocaleButton) {\n    actions.push(<CreekLocaleButton key=\"locale-button\" />);\n  }\n\n  if (showSettingsButton) {\n    actions.push(<LayoutSettings key=\"settings\" defaultShowFullScreen={showFullScreen} defaultShowLocaleButton={showLocaleButton} defaultShowThemeColor={showThemeColor} defaultKeepAlive={_.isBoolean(keepAlive) ? keepAlive : true} />);\n  }\n\n  const keepAliveProps = _.isBoolean(keepAlive) ? {} : keepAlive;\n\n  const layoutContent = (\n    <ProLayout\n      className={classnames('creek-layout-container', _userConfig?.className)}\n      route={route}\n      title={_userConfig?.title}\n      siderWidth={200}\n      location={location}\n      menuDataRender={menuDataRender}\n      menuItemRender={menuItemRender}\n      actionsRender={() => actions}\n      token={{\n        header: {\n          colorBgHeader: '#fff',\n          colorHeaderTitle: 'rgba(0, 0, 0, 0.80);',\n          colorTextMenuSelected: colorPrimary,\n          heightLayoutHeader: 48,\n        },\n        sider: {\n          colorMenuBackground: '#f7f8fa',\n          colorBgMenuItemSelected: 'transparent',\n          colorTextMenuActive: colorPrimary,\n          colorTextMenuSelected: colorPrimary,\n          colorTextMenuItemHover: colorPrimary,\n          colorTextMenu: '#333',\n        },\n        pageContainer: {\n          paddingBlockPageContainerContent: 0,\n          paddingInlinePageContainerContent: 0,\n          colorBgPageContainer: 'linear-gradient(180deg, #F7F9FF 0%, #FFF 45.59%);',\n        },\n      }}\n      fixSiderbar\n      fixedHeader\n      collapsed={collapsed}\n      collapsedButtonRender={(collapsed) => {\n        return <CollapsedButton collapsed={collapsed} />;\n      }}\n      {...more}\n    >\n      <GlobalScrollbarStyle />\n      <Exception>{actualKeepAlive ? <CreekKeepAlive getTabTitle={getTabTitle} {...keepAliveProps} /> : children}</Exception>\n    </ProLayout>\n  );\n\n  return layoutContent;\n};\n\nexport * from './Exception';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAwD;AACxD,oBAA8B;AAC9B,kBAAsB;AACtB,oBAAc;AACd,mBAA2B;AAE3B,wBAAuB;AAEvB,IAAAA,gBAAkC;AAElC,8BAAoD;AACpD,iCAAkC;AAClC,uBAAqC;AACrC,0BAA2C;AAC3C,4BAAmD;AACnD,uBAA0B;AAC1B,oCAAuC;AAyKvC,iCAAc,wBAzLd;AAkFmC;AA/CnC,IAAM,WAAW,CAAC,EAAE,MAAM,KAAK,MAAwC;AACrE,QAAM,QAAI,oBAAK;AACf,QAAM,MAAM,CAAC,QAAQ,SAAS,MAAM,cAAc,OAAO,KAAK,QAAQ,OAAO,GAAG;AAChF,SAAO,EAAE,KAAK,IAAI;AACpB;AAEO,IAAM,cAAc,CAAC,UAAuB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,eAAe,CAAC;AAAA,IAChB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,MAAM,IAAI,SAAS;AAE3B,QAAM,EAAE,UAAU,QAAI,yCAAkB;AACxC,QAAM,oBAAgB,sDAAuB;AAE7C,QAAM,uBAAuB,mBAAmB,cAAc,kBAAkB;AAChF,QAAM,yBAAyB,qBAAqB,cAAc,oBAAoB;AACtF,QAAM,eAAe,cAAc,gBAAgB,MAAM;AACzD,QAAM,kBAAkB,cAAc,cAAc,aAAa;AAEjE,QAAM,cAAc,EAAE,GAAG,YAAY,GAAG,cAAc;AAEtD,QAAM,kBAAc,yBAAW,yBAAW;AAC1C,QAAM,UAAU,CAAC,CAAC,eAAe;AAEjC,QAAM,qBAAiB,6BAAc,CAAC,aAA6B;AAEjE,UAAM,kBAAkB;AAExB,UAAM,UAAU,CAAC,UAA0C;AACzD,aAAO,MAAM,IAAI,CAAC,SAAS;AACzB,eAAO;AAAA,UACL,GAAG;AAAA,UACH,MAAO,kBAAkB,4CAAC,YAAS,MAAM,KAAK,MAAM,MAAM,KAAK,MAAM,IAAK,KAAK;AAAA,UAC/E,UAAU,KAAK,WAAW,QAAQ,KAAK,QAAQ,IAAI;AAAA,QACrD;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO,QAAQ,QAAQ;AAAA,EACzB,CAAC;AAED,QAAM,qBAAmD,6BAAc,CAAC,WAAW,eAAe;AAChG,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,cAAI,UAAU;AACZ,qBAAS,UAAU,IAAI;AAAA,UACzB;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ,CAAC;AAED,QAAM,kBAAc,6BAAc,CAAC,aAA+C;AAChF,UAAM,UAAU,+BAAO,WAAU,CAAC;AAElC,UAAM,YAAY,CAAC,UAA8C;AAC/D,iBAAW,QAAQ,OAAO;AACxB,YAAI,KAAK,SAAS;AAAU,iBAAO,KAAK,QAAQ,KAAK;AACrD,YAAI,KAAK,UAAU;AACjB,gBAAM,QAAQ,UAAU,KAAK,QAAQ;AACrC,cAAI;AAAO,mBAAO;AAAA,QACpB;AAAA,MACF;AAAA,IACF;AAEA,UAAM,QAAQ,UAAU,MAAM,KAAK;AAEnC,WAAO,UAAU,4CAAC,YAAS,MAAM,OAAO,MAAM,UAAU,IAAK;AAAA,EAC/D,CAAC;AAED,QAAM,UAA6B,CAAC,GAAG,YAAY;AAEnD,MAAI,sBAAsB;AACxB,YAAQ,KAAK,4CAAC,oCAAe,aAAc,CAAE;AAAA,EAC/C;AAEA,MAAI,wBAAwB;AAC1B,YAAQ,KAAK,4CAAC,kDAAsB,eAAgB,CAAE;AAAA,EACxD;AAEA,MAAI,oBAAoB;AACtB,YAAQ,KAAK,4CAAC,sCAA8B,uBAAuB,gBAAgB,yBAAyB,kBAAkB,uBAAuB,gBAAgB,kBAAkB,cAAAC,QAAE,UAAU,SAAS,IAAI,YAAY,QAA3L,UAAiM,CAAE;AAAA,EACtO;AAEA,QAAM,iBAAiB,cAAAA,QAAE,UAAU,SAAS,IAAI,CAAC,IAAI;AAErD,QAAM,gBACJ;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,kBAAAC,SAAW,0BAA0B,2CAAa,SAAS;AAAA,MACtE;AAAA,MACA,OAAO,2CAAa;AAAA,MACpB,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,MAAM;AAAA,MACrB,OAAO;AAAA,QACL,QAAQ;AAAA,UACN,eAAe;AAAA,UACf,kBAAkB;AAAA,UAClB,uBAAuB;AAAA,UACvB,oBAAoB;AAAA,QACtB;AAAA,QACA,OAAO;AAAA,UACL,qBAAqB;AAAA,UACrB,yBAAyB;AAAA,UACzB,qBAAqB;AAAA,UACrB,uBAAuB;AAAA,UACvB,wBAAwB;AAAA,UACxB,eAAe;AAAA,QACjB;AAAA,QACA,eAAe;AAAA,UACb,kCAAkC;AAAA,UAClC,mCAAmC;AAAA,UACnC,sBAAsB;AAAA,QACxB;AAAA,MACF;AAAA,MACA,aAAW;AAAA,MACX,aAAW;AAAA,MACX;AAAA,MACA,uBAAuB,CAACC,eAAc;AACpC,eAAO,4CAAC,yCAAgB,WAAWA,YAAW;AAAA,MAChD;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,oDAAC,yCAAqB;AAAA,QACtB,4CAAC,8BAAW,4BAAkB,4CAAC,0CAAe,aAA2B,GAAG,gBAAgB,IAAK,UAAS;AAAA;AAAA;AAAA,EAC5G;AAGF,SAAO;AACT;",
-  "names": ["import_react", "_", "classnames", "collapsed"]
+  "sourcesContent": ["import { MenuDataItem, ProLayout, ProLayoutProps } from '@ant-design/pro-components';\nimport { useMemoizedFn } from 'ahooks';\nimport { theme } from 'antd';\nimport _ from 'lodash';\nimport { useContext } from 'react';\n\nimport classnames from 'classnames';\n\nimport { IntlContext, useT } from '@creekjs/i18n/react';\n\nimport { CreekKeepAlive, CreekKeepAliveProps } from '../creek-keep-alive';\nimport { CreekLocaleButton } from '../creek-locale-button';\nimport { GlobalScrollbarStyle } from '../creek-style/scrollbar';\nimport { FullScreen, LayoutSettings, UserInfo, UserInfoProps } from './ActionRender';\nimport { CollapsedButton, useCollapsedStore } from './CollapseButton';\nimport { Exception } from './Exception';\nimport { useLayoutSettingsStore } from './useLayoutSettingsStore';\n\nexport type CreekLayoutProps = ProLayoutProps & {\n  runtimeConfig: ProLayoutProps;\n  userConfig?: ProLayoutProps;\n  navigate?: (path?: string | number) => void;\n  showFullScreen?: boolean;\n  showLocaleButton?: boolean;\n  showSettingsButton?: boolean;\n  showThemeColor?: boolean;\n  initialInfo?: {\n    initialState: any;\n    loading: boolean;\n    setInitialState: () => void;\n  };\n  keepAlive?: boolean | CreekKeepAliveProps;\n  extraActions?: React.ReactNode[];\n  clientRoutes?: any[];\n  iconFontCNs?: string[];\n  /**\n   * 用户信息区域，支持传入配置对象（名称、头像、下拉菜单）或自定义渲染函数\n   * - 传对象：自动使用 UserInfo 组件渲染\n   * - 传函数：返回 ReactNode 直接渲染，返回 UserInfoProps 对象则使用 UserInfo 组件渲染\n   */\n  renderUser?: UserInfoProps | (() => React.ReactNode | UserInfoProps);\n};\n\nconst MenuName = ({ name, path }: { name?: string; path?: string }) => {\n  const t = useT();\n  const key = !path || path === '/' ? 'menu.home' : `menu${path.replace(/\\//g, '.')}`;\n  return t(key, name);\n};\n\nexport const CreekLayout = (props: CreekLayoutProps) => {\n  const {\n    route,\n    userConfig,\n    runtimeConfig,\n    children,\n    location,\n    navigate,\n    showFullScreen = false,\n    showLocaleButton = false,\n    showSettingsButton = false,\n    showThemeColor = true,\n    keepAlive = false,\n    extraActions = [],\n    clientRoutes,\n    iconFontCNs,\n    renderUser,\n    ...more\n  } = props;\n\n  const { useToken } = theme;\n  const { token } = useToken();\n\n  const { collapsed } = useCollapsedStore();\n  const settingsStore = useLayoutSettingsStore();\n\n  const actualShowFullScreen = showFullScreen && (settingsStore.showFullScreen ?? true);\n  const actualShowLocaleButton = showLocaleButton && (settingsStore.showLocaleButton ?? true);\n  const colorPrimary = settingsStore.colorPrimary || token.colorPrimary;\n  const actualKeepAlive = keepAlive && (settingsStore.keepAlive ?? true);\n\n  const _userConfig = { ...userConfig, ...runtimeConfig };\n\n  const intlContext = useContext(IntlContext);\n  const hasI18n = !!intlContext && actualShowLocaleButton;\n\n  const menuDataRender = useMemoizedFn((menuData: MenuDataItem[]) => {\n    // 根据当前是否开启了国际化（上下文是否存在）以及用户配置来判断是否包裹菜单翻译\n    const isLocaleEnabled = hasI18n;\n\n    const mapMenu = (items: MenuDataItem[]): MenuDataItem[] => {\n      return items.map((item) => {\n        return {\n          ...item,\n          name: (isLocaleEnabled ? <MenuName name={item.name} path={item.path} /> : item.name) as string,\n          children: item.children ? mapMenu(item.children) : undefined,\n        };\n      });\n    };\n    return mapMenu(menuData);\n  });\n\n  const menuItemRender: ProLayoutProps['menuItemRender'] = useMemoizedFn((itemProps, defaultDom) => {\n    return (\n      <span\n        onClick={() => {\n          if (navigate) {\n            navigate(itemProps.path);\n          }\n        }}\n      >\n        {defaultDom}\n      </span>\n    );\n  });\n\n  const getTabTitle = useMemoizedFn((pathname: string): string | React.ReactNode => {\n    const routes = (route?.routes ?? []) as MenuDataItem[];\n\n    const findTitle = (items: MenuDataItem[]): string | undefined => {\n      for (const item of items) {\n        if (item.path === pathname) return item.name ?? item.title;\n        if (item.children) {\n          const found = findTitle(item.children);\n          if (found) return found;\n        }\n      }\n    };\n\n    const title = findTitle(routes) ?? pathname;\n\n    return hasI18n ? <MenuName name={title} path={pathname} /> : title;\n  });\n\n  const actions: React.ReactNode[] = [...extraActions];\n\n  if (renderUser) {\n    let result = typeof renderUser === 'function' ? renderUser() : renderUser;\n    const isUserInfoProps = (val: unknown): val is UserInfoProps =>\n      val !== null && typeof val === 'object' && ('name' in val || 'avatar' in val || 'menu' in val);\n    const userInfoNode = isUserInfoProps(result) ? <UserInfo {...result} /> : result;\n    actions.push(<span key=\"user-info\">{userInfoNode}</span>);\n  }\n\n  if (actualShowFullScreen) {\n    actions.push(<FullScreen key=\"full-screen\" />);\n  }\n\n  if (actualShowLocaleButton) {\n    actions.push(<CreekLocaleButton key=\"locale-button\" />);\n  }\n\n  if (showSettingsButton) {\n    actions.push(<LayoutSettings key=\"settings\" defaultShowFullScreen={showFullScreen} defaultShowLocaleButton={showLocaleButton} defaultShowThemeColor={showThemeColor} defaultKeepAlive={_.isBoolean(keepAlive) ? keepAlive : true} />);\n  }\n\n  const keepAliveProps = _.isBoolean(keepAlive) ? {} : keepAlive;\n\n  const layoutContent = (\n    <ProLayout\n      className={classnames('creek-layout-container', _userConfig?.className)}\n      route={route}\n      title={_userConfig?.title}\n      siderWidth={200}\n      location={location}\n      menuDataRender={menuDataRender}\n      menuItemRender={menuItemRender}\n      actionsRender={() => actions}\n      token={{\n        header: {\n          colorBgHeader: '#fff',\n          colorHeaderTitle: 'rgba(0, 0, 0, 0.80);',\n          colorTextMenuSelected: colorPrimary,\n          heightLayoutHeader: 48,\n        },\n        sider: {\n          colorMenuBackground: '#f7f8fa',\n          colorBgMenuItemSelected: 'transparent',\n          colorTextMenuActive: colorPrimary,\n          colorTextMenuSelected: colorPrimary,\n          colorTextMenuItemHover: colorPrimary,\n          colorTextMenu: '#333',\n        },\n        pageContainer: {\n          paddingBlockPageContainerContent: 0,\n          paddingInlinePageContainerContent: 0,\n          colorBgPageContainer: 'linear-gradient(180deg, #F7F9FF 0%, #FFF 45.59%);',\n        },\n      }}\n      fixSiderbar\n      fixedHeader\n      collapsed={collapsed}\n      collapsedButtonRender={(collapsed) => {\n        return <CollapsedButton collapsed={collapsed} />;\n      }}\n      {...more}\n    >\n      <GlobalScrollbarStyle />\n      <Exception>{actualKeepAlive ? <CreekKeepAlive getTabTitle={getTabTitle} routes={clientRoutes ?? route?.routes} {...keepAliveProps} /> : children}</Exception>\n    </ProLayout>\n  );\n\n  return layoutContent;\n};\n\nexport * from './Exception';\nexport { UserInfo, type UserInfoProps } from './ActionRender';\n"],
+  "mappings": "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",
+  "names": ["import_react", "import_ActionRender", "_", "classnames", "collapsed"]
 }

package/dist/creek-table/hooks/useTableScrollHeight.js

@@ -24,6 +24,18 @@ __export(useTableScrollHeight_exports, {
 module.exports = __toCommonJS(useTableScrollHeight_exports);
 var import_ahooks = require("ahooks");
 var import_react = require("react");
+var getScrollParent = (element) => {
+  let parent = element.parentElement;
+  while (parent) {
+    const style = window.getComputedStyle(parent);
+    const overflowY = style.overflowY;
+    if (overflowY === "auto" || overflowY === "scroll") {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return window;
+};
 var useTableScrollHeight = (prefixCls, tableRef, pageFixedBottom = true, offsetBottom = 0) => {
   const [scrollY, setScrollY] = (0, import_react.useState)(void 0);
   const [tableHeight, setTableHeight] = (0, import_react.useState)(void 0);
@@ -64,16 +76,24 @@ var useTableScrollHeight = (prefixCls, tableRef, pageFixedBottom = true, offsetB
       }
       const windowHeight = window.innerHeight;
       let height = windowHeight - top - currentContentPadding - currentCardContentPadding - offsetBottom;
-      let currentTableHeight = windowHeight - tableEl.getBoundingClientRect().top;
+      const scrollParent = getScrollParent(tableEl);
+      let parentTop = 0;
+      if (scrollParent instanceof HTMLElement) {
+        parentTop = scrollParent.getBoundingClientRect().top;
+      }
+      const tableTopRelativeToParent = tableEl.getBoundingClientRect().top - parentTop;
+      let currentTableHeight = windowHeight - tableTopRelativeToParent - offsetBottom;
       const pagination = tableEl.querySelector(`.${prefixCls}-pagination`);
       if (pagination) {
         const paginationHeight = pagination.clientHeight;
         const styles = window.getComputedStyle(pagination);
         const totalPaginationMargin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
         height = height - paginationHeight - totalPaginationMargin;
+        currentTableHeight = currentTableHeight - paginationHeight - totalPaginationMargin;
         setTableHeight(0);
       } else {
         height = height - 40;
+        currentTableHeight = currentTableHeight - 40;
         setTableHeight(currentTableHeight);
       }
       let currentHasScroll = false;
@@ -97,6 +117,7 @@ var useTableScrollHeight = (prefixCls, tableRef, pageFixedBottom = true, offsetB
     return () => observer.disconnect();
   }, [tableRef, pageFixedBottom, prefixCls]);
   (0, import_ahooks.useEventListener)("resize", calcHeight);
+  (0, import_ahooks.useEventListener)("scroll", calcHeight, { target: window });
   return {
     scrollY,
     tableHeight,

package/dist/creek-table/hooks/useTableScrollHeight.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/creek-table/hooks/useTableScrollHeight.tsx"],
-  "sourcesContent": ["import { useDebounceFn, useEventListener } from 'ahooks';\nimport { useEffect, useState } from 'react';\n\nexport const useTableScrollHeight = (prefixCls: string, tableRef: React.RefObject<HTMLDivElement>, pageFixedBottom: boolean = true, offsetBottom: number = 0) => {\n  const [scrollY, setScrollY] = useState<number | undefined>(undefined);\n  const [tableHeight, setTableHeight] = useState<number | undefined>(undefined);\n  const [tableContainerHeight, setTableContainerHeight] = useState<number | undefined>(0);\n  const [hasScroll, setHasScroll] = useState<boolean>(false);\n\n  const { run: calcHeight } = useDebounceFn(\n    () => {\n      if (!pageFixedBottom || !tableRef.current) return;\n\n      const tableEl = tableRef.current;\n\n      // 如果元素不可见（例如在 display: none 的 tab 中），不进行计算，防止计算出错误的高度\n      if (tableEl.offsetParent === null) return;\n\n      const tableHeader = tableEl.querySelector(`.${prefixCls}-table-thead`);\n      const tableBody = tableEl.querySelector(`.${prefixCls}-table-tbody`);\n\n      // 尝试动态获取 layout content padding\n      // Ant Design Pro Layout 的 content 容器通常有 class 包含 'pro-layout-content'\n      // 例如：ant-pro-layout-content, my-prefix-pro-layout-content\n      let currentContentPadding = 0; // 默认使用传入的\n\n      const layoutContentEl = tableEl.closest(`div[class*=\"pro-layout-content\"]`);\n      if (layoutContentEl) {\n        const style = window.getComputedStyle(layoutContentEl);\n        // 我们主要关心底部的 padding，因为它影响到底部留白\n        const paddingBottom = parseFloat(style.paddingBottom);\n        if (!isNaN(paddingBottom)) {\n          currentContentPadding = paddingBottom;\n        }\n      }\n\n      // 尝试动态获取 layout content padding\n      // Ant Design Pro Layout 的 content 容器通常有 class 包含 'pro-layout-content'\n      // 例如：ant-pro-layout-content, my-prefix-pro-layout-content\n      let currentCardContentPadding = 0; // 默认使用传入的\n\n      const cardContentEl = tableEl.querySelector(`.${prefixCls}-pro-card-body`);\n      if (cardContentEl) {\n        const style = window.getComputedStyle(cardContentEl);\n        // 我们主要关心底部的 padding，因为它影响到底部留白\n        const paddingBottom = parseFloat(style.paddingBottom);\n        if (!isNaN(paddingBottom)) {\n          currentCardContentPadding = paddingBottom;\n        }\n      }\n\n      let top = 0;\n      if (tableHeader) {\n        top = tableHeader.getBoundingClientRect().bottom;\n      } else if (tableBody) {\n        top = tableBody.getBoundingClientRect().top;\n      }\n\n      const windowHeight = window.innerHeight;\n\n      let height = windowHeight - top - currentContentPadding - currentCardContentPadding - offsetBottom;\n      let currentTableHeight = windowHeight - tableEl.getBoundingClientRect().top;\n\n      const pagination = tableEl.querySelector(`.${prefixCls}-pagination`);\n\n      if (pagination) {\n        const paginationHeight = pagination.clientHeight;\n\n        const styles = window.getComputedStyle(pagination);\n        const totalPaginationMargin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);\n\n        height = height - paginationHeight - totalPaginationMargin;\n        setTableHeight(0);\n      } else {\n        // 如果没有找到分页，预留一个高度（假设分页高度为 24px + margin 16px = 40px）\n        // 这样可以避免初始加载时高度过大，导致出现滚动条，然后分页出现后高度又变小\n        height = height - 40;\n\n        setTableHeight(currentTableHeight);\n      }\n\n      let currentHasScroll = false;\n      if (tableBody) {\n        currentHasScroll = tableBody.scrollHeight > height;\n      }\n      setHasScroll(currentHasScroll);\n\n      // Minimum height to avoid crashes or ugly rendering\n      setScrollY(height);\n\n      if (tableHeader) {\n        setTableContainerHeight(height + tableHeader?.clientHeight);\n      }\n    },\n    { wait: 16,leading: true },\n  );\n\n  useEffect(() => {\n    // Initial calculation\n    calcHeight();\n\n    // Observer for DOM changes that might affect position\n    const observer = new MutationObserver(calcHeight);\n    if (tableRef.current) {\n      observer.observe(tableRef.current, { childList: true, subtree: true });\n    }\n    return () => observer.disconnect();\n  }, [tableRef, pageFixedBottom, prefixCls]);\n\n  useEventListener('resize', calcHeight);\n\n  return {\n    scrollY,\n    tableHeight,\n    tableContainerHeight,\n    hasScroll,\n  };\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAgD;AAChD,mBAAoC;AAE7B,IAAM,uBAAuB,CAAC,WAAmB,UAA2C,kBAA2B,MAAM,eAAuB,MAAM;AAC/J,QAAM,CAAC,SAAS,UAAU,QAAI,uBAA6B,MAAS;AACpE,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA6B,MAAS;AAC5E,QAAM,CAAC,sBAAsB,uBAAuB,QAAI,uBAA6B,CAAC;AACtF,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAkB,KAAK;AAEzD,QAAM,EAAE,KAAK,WAAW,QAAI;AAAA,IAC1B,MAAM;AACJ,UAAI,CAAC,mBAAmB,CAAC,SAAS;AAAS;AAE3C,YAAM,UAAU,SAAS;AAGzB,UAAI,QAAQ,iBAAiB;AAAM;AAEnC,YAAM,cAAc,QAAQ,cAAc,IAAI,uBAAuB;AACrE,YAAM,YAAY,QAAQ,cAAc,IAAI,uBAAuB;AAKnE,UAAI,wBAAwB;AAE5B,YAAM,kBAAkB,QAAQ,QAAQ,kCAAkC;AAC1E,UAAI,iBAAiB;AACnB,cAAM,QAAQ,OAAO,iBAAiB,eAAe;AAErD,cAAM,gBAAgB,WAAW,MAAM,aAAa;AACpD,YAAI,CAAC,MAAM,aAAa,GAAG;AACzB,kCAAwB;AAAA,QAC1B;AAAA,MACF;AAKA,UAAI,4BAA4B;AAEhC,YAAM,gBAAgB,QAAQ,cAAc,IAAI,yBAAyB;AACzE,UAAI,eAAe;AACjB,cAAM,QAAQ,OAAO,iBAAiB,aAAa;AAEnD,cAAM,gBAAgB,WAAW,MAAM,aAAa;AACpD,YAAI,CAAC,MAAM,aAAa,GAAG;AACzB,sCAA4B;AAAA,QAC9B;AAAA,MACF;AAEA,UAAI,MAAM;AACV,UAAI,aAAa;AACf,cAAM,YAAY,sBAAsB,EAAE;AAAA,MAC5C,WAAW,WAAW;AACpB,cAAM,UAAU,sBAAsB,EAAE;AAAA,MAC1C;AAEA,YAAM,eAAe,OAAO;AAE5B,UAAI,SAAS,eAAe,MAAM,wBAAwB,4BAA4B;AACtF,UAAI,qBAAqB,eAAe,QAAQ,sBAAsB,EAAE;AAExE,YAAM,aAAa,QAAQ,cAAc,IAAI,sBAAsB;AAEnE,UAAI,YAAY;AACd,cAAM,mBAAmB,WAAW;AAEpC,cAAM,SAAS,OAAO,iBAAiB,UAAU;AACjD,cAAM,wBAAwB,WAAW,OAAO,SAAS,IAAI,WAAW,OAAO,YAAY;AAE3F,iBAAS,SAAS,mBAAmB;AACrC,uBAAe,CAAC;AAAA,MAClB,OAAO;AAGL,iBAAS,SAAS;AAElB,uBAAe,kBAAkB;AAAA,MACnC;AAEA,UAAI,mBAAmB;AACvB,UAAI,WAAW;AACb,2BAAmB,UAAU,eAAe;AAAA,MAC9C;AACA,mBAAa,gBAAgB;AAG7B,iBAAW,MAAM;AAEjB,UAAI,aAAa;AACf,gCAAwB,UAAS,2CAAa,aAAY;AAAA,MAC5D;AAAA,IACF;AAAA,IACA,EAAE,MAAM,IAAG,SAAS,KAAK;AAAA,EAC3B;AAEA,8BAAU,MAAM;AAEd,eAAW;AAGX,UAAM,WAAW,IAAI,iBAAiB,UAAU;AAChD,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,SAAS,SAAS,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AAAA,IACvE;AACA,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,UAAU,iBAAiB,SAAS,CAAC;AAEzC,sCAAiB,UAAU,UAAU;AAErC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useDebounceFn, useEventListener } from 'ahooks';\nimport { useEffect, useState } from 'react';\n\n/**\n * 获取最近的可滚动父容器\n */\nconst getScrollParent = (element: HTMLElement): HTMLElement | Window => {\n  let parent: HTMLElement | null = element.parentElement;\n  while (parent) {\n    const style = window.getComputedStyle(parent);\n    const overflowY = style.overflowY;\n    if (overflowY === 'auto' || overflowY === 'scroll') {\n      return parent;\n    }\n    parent = parent.parentElement;\n  }\n  return window;\n};\n\nexport const useTableScrollHeight = (prefixCls: string, tableRef: React.RefObject<HTMLDivElement>, pageFixedBottom: boolean = true, offsetBottom: number = 0) => {\n  const [scrollY, setScrollY] = useState<number | undefined>(undefined);\n  const [tableHeight, setTableHeight] = useState<number | undefined>(undefined);\n  const [tableContainerHeight, setTableContainerHeight] = useState<number | undefined>(0);\n  const [hasScroll, setHasScroll] = useState<boolean>(false);\n\n  const { run: calcHeight } = useDebounceFn(\n    () => {\n      if (!pageFixedBottom || !tableRef.current) return;\n\n      const tableEl = tableRef.current;\n\n      // 如果元素不可见（例如在 display: none 的 tab 中），不进行计算，防止计算出错误的高度\n      if (tableEl.offsetParent === null) return;\n\n      const tableHeader = tableEl.querySelector(`.${prefixCls}-table-thead`);\n      const tableBody = tableEl.querySelector(`.${prefixCls}-table-tbody`);\n\n      // 尝试动态获取 layout content padding\n      // Ant Design Pro Layout 的 content 容器通常有 class 包含 'pro-layout-content'\n      // 例如：ant-pro-layout-content, my-prefix-pro-layout-content\n      let currentContentPadding = 0; // 默认使用传入的\n\n      const layoutContentEl = tableEl.closest(`div[class*=\"pro-layout-content\"]`);\n      if (layoutContentEl) {\n        const style = window.getComputedStyle(layoutContentEl);\n        // 我们主要关心底部的 padding，因为它影响到底部留白\n        const paddingBottom = parseFloat(style.paddingBottom);\n        if (!isNaN(paddingBottom)) {\n          currentContentPadding = paddingBottom;\n        }\n      }\n\n      // 尝试动态获取 layout content padding\n      // Ant Design Pro Layout 的 content 容器通常有 class 包含 'pro-layout-content'\n      // 例如：ant-pro-layout-content, my-prefix-pro-layout-content\n      let currentCardContentPadding = 0; // 默认使用传入的\n\n      const cardContentEl = tableEl.querySelector(`.${prefixCls}-pro-card-body`);\n      if (cardContentEl) {\n        const style = window.getComputedStyle(cardContentEl);\n        // 我们主要关心底部的 padding，因为它影响到底部留白\n        const paddingBottom = parseFloat(style.paddingBottom);\n        if (!isNaN(paddingBottom)) {\n          currentCardContentPadding = paddingBottom;\n        }\n      }\n\n      let top = 0;\n      if (tableHeader) {\n        top = tableHeader.getBoundingClientRect().bottom;\n      } else if (tableBody) {\n        top = tableBody.getBoundingClientRect().top;\n      }\n\n      const windowHeight = window.innerHeight;\n\n      let height = windowHeight - top - currentContentPadding - currentCardContentPadding - offsetBottom;\n\n      // 计算表格容器高度：相对于滚动父容器的位置，而非视口位置\n      // 这样即使表格上方有其他内容，高度计算也不会受页面滚动影响\n      const scrollParent = getScrollParent(tableEl);\n      let parentTop = 0;\n      if (scrollParent instanceof HTMLElement) {\n        parentTop = scrollParent.getBoundingClientRect().top;\n      }\n      const tableTopRelativeToParent = tableEl.getBoundingClientRect().top - parentTop;\n      let currentTableHeight = windowHeight - tableTopRelativeToParent - offsetBottom;\n\n      const pagination = tableEl.querySelector(`.${prefixCls}-pagination`);\n\n      if (pagination) {\n        const paginationHeight = pagination.clientHeight;\n\n        const styles = window.getComputedStyle(pagination);\n        const totalPaginationMargin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);\n\n        height = height - paginationHeight - totalPaginationMargin;\n        currentTableHeight = currentTableHeight - paginationHeight - totalPaginationMargin;\n        setTableHeight(0);\n      } else {\n        // 如果没有找到分页，预留一个高度（假设分页高度为 24px + margin 16px = 40px）\n        // 这样可以避免初始加载时高度过大，导致出现滚动条，然后分页出现后高度又变小\n        height = height - 40;\n        currentTableHeight = currentTableHeight - 40;\n\n        setTableHeight(currentTableHeight);\n      }\n\n      let currentHasScroll = false;\n      if (tableBody) {\n        currentHasScroll = tableBody.scrollHeight > height;\n      }\n      setHasScroll(currentHasScroll);\n\n      // Minimum height to avoid crashes or ugly rendering\n      setScrollY(height);\n\n      if (tableHeader) {\n        setTableContainerHeight(height + tableHeader?.clientHeight);\n      }\n    },\n    { wait: 16,leading: true },\n  );\n\n  useEffect(() => {\n    // Initial calculation\n    calcHeight();\n\n    // Observer for DOM changes that might affect position\n    const observer = new MutationObserver(calcHeight);\n    if (tableRef.current) {\n      observer.observe(tableRef.current, { childList: true, subtree: true });\n    }\n    return () => observer.disconnect();\n  }, [tableRef, pageFixedBottom, prefixCls]);\n\n  useEventListener('resize', calcHeight);\n  // 监听滚动事件，确保页面滚动时也能正确计算高度\n  useEventListener('scroll', calcHeight, { target: window });\n\n  return {\n    scrollY,\n    tableHeight,\n    tableContainerHeight,\n    hasScroll,\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@creekjs/web-components",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "",
   "main": "dist/index.js",
   "keywords": [],

package/src/creek-keep-alive/index.tsx

@@ -1,8 +1,8 @@
 import { useMemoizedFn } from 'ahooks';
 import { Dropdown, MenuProps, Tabs } from 'antd';
-import { isRegExp, isString, omit } from 'lodash';
-import React, { useEffect, useRef, useState } from 'react';
-import { useLocation, useNavigate, useOutlet } from 'react-router-dom';
+import { isRegExp, isString } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { matchRoutes, useLocation, useNavigate } from 'react-router-dom';
 
 import { useT } from '@creekjs/i18n/react';
 
@@ -23,6 +23,10 @@ export interface CreekKeepAliveProps {
    * 最大缓存数量，默认为 20
    */
   maxTabCount?: number;
+  /**
+   * 路由配置（含 element），用于解析每个路径对应的页面组件
+   */
+  routes?: any[];
 }
 
 interface TabItem {
@@ -32,20 +36,28 @@ interface TabItem {
 }
 
 export const CreekKeepAlive: React.FC<CreekKeepAliveProps> = (props) => {
-  const { exclude = [], getTabTitle, tabBarStyle, maxTabCount = 20 } = props;
+  const { exclude = [], getTabTitle, tabBarStyle, maxTabCount = 20, routes = [] } = props;
 
   const t = useT();
-  const outlet = useOutlet();
   const location = useLocation();
   const navigate = useNavigate();
 
   const [tabItems, setTabItems] = useState<TabItem[]>([]);
   const [activeKey, setActiveKey] = useState<string>('');
-  const [cachedPages, setCachedPages] = useState<Record<string, React.ReactNode>>({});
 
-  // 用 ref 存储 outlet，避免 outlet 引用变化导致 useEffect 无限循环
-  const outletRef = useRef(outlet);
-  outletRef.current = outlet;
+  // 缓存每个路径对应的 React element，保证同一页面始终复用同一个 element 引用
+  // 这样 React reconciler 不会卸载/重新挂载组件，从而实现 keep-alive
+  // 使用 state 以便缓存变化时触发重新渲染
+  const [cachedElements, setCachedElements] = useState<Record<string, React.ReactNode>>({});
+
+  // 根据路由配置，解析指定路径对应的叶子路由 element
+  const resolveElement = (path: string): React.ReactNode | null => {
+    if (!routes?.length) return null;
+    const matches = matchRoutes(routes, path);
+    if (!matches?.length) return null;
+    // 取最后一个 match（叶子路由），即实际页面组件
+    return matches[matches.length - 1].route.element ?? null;
+  };
 
   // 判断是否不需要缓存
   const isPathExcluded = (path: string) => {
@@ -63,75 +75,67 @@ export const CreekKeepAlive: React.FC<CreekKeepAliveProps> = (props) => {
   // 初始化或路由变化时更新
   useEffect(() => {
     const currentPath = location.pathname;
-    setActiveKey(currentPath);
 
-    // 更新页面内容缓存
-    setCachedPages((prev) => {
-      if (prev[currentPath]) {
-        return prev;
-      }
-      return {
-        ...prev,
-        [currentPath]: outletRef.current,
-      };
-    });
+    // 不需要缓存的路径，不创建 tab
+    if (isPathExcluded(currentPath)) return;
+
+    // 如果路由配置中没有对应的 element（如纯 redirect 路由），不创建 tab
+    const element = resolveElement(currentPath);
+    if (!element) return;
+
+    // 缓存当前路径的 element（仅首次缓存，后续复用同一个 element 引用）
+    if (!cachedElements[currentPath]) {
+      setCachedElements((prev) => ({ ...prev, [currentPath]: element }));
+    }
+
+    setActiveKey(currentPath);
 
     // 更新 Tab 列表
     setTabItems((prev) => {
       if (prev.find((i) => i.key === currentPath)) {
         // 更新现有 tab 的 closable 状态（只有最后一个 tab 时不可关闭）
-        const updated = prev.map((i) => ({ ...i, closable: prev.length > 1 }));
-        return updated;
+        return prev.map((i) => ({ ...i, closable: prev.length > 1 }));
       }
       const title = getTabTitle?.(currentPath) || currentPath;
       const newItems = [...prev, { key: currentPath, label: title, closable: prev.length > 0 }];
 
-      // 更新所有 tab 的 closable 状态：只有1个 tab 时全部不可关闭
+      // 只有1个 tab 时不可关闭
       if (newItems.length === 1) {
         newItems[0].closable = false;
       }
 
-      // 超过最大数量限制
+      // 超过最大数量限制，移除最早的可关闭 tab
       if (newItems.length > maxTabCount) {
-        // 找到第一个可以关闭的 Tab（非首页、非当前页）
-        // 这里策略是移除最早加入的那个可关闭 Tab。prev[0] 是最早的。
-        // 但要注意不要移除当前页（currentPath），虽然 currentPath 是刚加进去的，但在极端情况下（比如 max=1）
-        // 简单策略：移除第一个 closable 且 key !== currentPath 的 item
         const indexToRemove = newItems.findIndex((item) => item.closable && item.key !== currentPath);
         if (indexToRemove !== -1) {
           const itemToRemove = newItems[indexToRemove];
-          // 顺便移除缓存
-          setCachedPages((currentCached) => omit(currentCached, [itemToRemove.key]));
+          setCachedElements((prev) => {
+            const next = { ...prev };
+            delete next[itemToRemove.key];
+            return next;
+          });
           newItems.splice(indexToRemove, 1);
         }
       }
       return newItems;
     });
-  }, [location.pathname, getTabTitle, maxTabCount]);
-
-  // 清理不需要缓存的页面
-  useEffect(() => {
-    // 监听路由离开
-    // 这里比较 tricky，因为 useEffect 拿到的 activeKey 已经是新的了
-    // 我们需要知道"上一个"路径
-    // 简化处理：每次 render 时，检查 pages 里哪些是不需要缓存且不处于 active 状态的，将其移除？
-    // 但如果在 setState 里做会导致死循环。
-    // 另一种策略：不缓存 = 离开时销毁。
-    // 我们可以在 pages 渲染时控制。
-  }, []);
+  }, [location.pathname, getTabTitle, maxTabCount, cachedElements]);
 
   const closeTab = useMemoizedFn((targetKey: string) => {
     const targetIndex = tabItems.findIndex((item) => item.key === targetKey);
     const newTabItems = tabItems.filter((item) => item.key !== targetKey);
 
-    // 移除缓存
-    setCachedPages((prev) => omit(prev, [targetKey]));
+    // 移除缓存，组件将卸载
+    setCachedElements((prev) => {
+      const next = { ...prev };
+      delete next[targetKey];
+      return next;
+    });
     setTabItems(newTabItems);
 
     // 如果关闭的是当前页，跳转到临近页
     if (targetKey === activeKey) {
       if (newTabItems.length > 0) {
-        // 尝试跳到右边，没有则左边
         const nextIndex = targetIndex >= newTabItems.length ? newTabItems.length - 1 : targetIndex;
         const nextKey = newTabItems[nextIndex].key;
         navigate(nextKey);
@@ -145,13 +149,14 @@ export const CreekKeepAlive: React.FC<CreekKeepAliveProps> = (props) => {
     const newTabItems = [{ ...currentTab, closable: false }];
     setTabItems(newTabItems);
 
-    const keepKeys = newTabItems.map((i) => i.key);
-    setCachedPages((prev) => {
-      const newCachedPages: Record<string, React.ReactNode> = {};
+    // 仅保留当前 tab 的缓存
+    const keepKeys = new Set(newTabItems.map((i) => i.key));
+    setCachedElements((prev) => {
+      const next: Record<string, React.ReactNode> = {};
       keepKeys.forEach((k) => {
-        if (prev[k]) newCachedPages[k] = prev[k];
+        if (prev[k]) next[k] = prev[k];
       });
-      return newCachedPages;
+      return next;
     });
 
     if (activeKey !== currentKey) {
@@ -162,14 +167,19 @@ export const CreekKeepAlive: React.FC<CreekKeepAliveProps> = (props) => {
   const closeRightTabs = useMemoizedFn((currentKey: string) => {
     const currentIndex = tabItems.findIndex((i) => i.key === currentKey);
     const rightItems = tabItems.slice(currentIndex + 1);
-    const rightKeys = rightItems.map((i) => i.key);
+    const rightKeys = new Set(rightItems.map((i) => i.key));
 
-    const newTabItems = tabItems.filter((i) => !rightKeys.includes(i.key));
+    const newTabItems = tabItems.filter((i) => !rightKeys.has(i.key));
     setTabItems(newTabItems);
 
-    setCachedPages((prev) => omit(prev, rightKeys));
+    // 移除右侧 tab 的缓存
+    setCachedElements((prev) => {
+      const next = { ...prev };
+      rightKeys.forEach((key) => { delete next[key]; });
+      return next;
+    });
 
-    if (rightKeys.includes(activeKey)) {
+    if (rightKeys.has(activeKey)) {
       navigate(currentKey);
     }
   });
@@ -225,12 +235,7 @@ export const CreekKeepAlive: React.FC<CreekKeepAliveProps> = (props) => {
           label: renderTabLabel(item),
           children: (
             <div key={item.key} style={{ height: '100%', display: activeKey === item.key ? 'block' : 'none' }}>
-              {/* 当前激活页渲染实时outlet，非激活页渲染缓存 */}
-              {activeKey === item.key
-                ? outlet
-                : !isPathExcluded(item.key)
-                  ? cachedPages[item.key]
-                  : null}
+              {cachedElements[item.key] ?? null}
             </div>
           ),
         }))}

package/src/creek-layout/ActionRender/UserInfo.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Dropdown, DropDownProps, Space } from "antd";
+import { Avatar, Dropdown, DropDownProps, Space, Typography } from "antd";
 import { createStyles } from "antd-style";
 
 const useStyles = createStyles(({ token}) => ({
@@ -34,9 +34,9 @@ export const UserInfo = (props: UserInfoProps) => {
     <Dropdown arrow placement="bottom" overlayClassName={styles.userInfoDropdownOverlay} menu={menu}>
       <Space size={4} align="center">
         <Avatar className={styles.avatarContainer} src={avatar}>
-          {name}
+          {typeof name === 'string' ? name.charAt(0).toUpperCase() : name}
         </Avatar>
-        <span>{name}</span>
+        <Typography.Text strong>{name}</Typography.Text>
       </Space>
     </Dropdown>
   );

package/src/creek-layout/ActionRender/index.tsx

@@ -1,4 +1,4 @@
 export { FullScreen } from './FullScreen';
-export { UserInfo } from './UserInfo';
+export { UserInfo, type UserInfoProps } from './UserInfo';
 export { LayoutSettings } from './LayoutSettings';
 

package/src/creek-layout/index.tsx

@@ -11,12 +11,12 @@ import { IntlContext, useT } from '@creekjs/i18n/react';
 import { CreekKeepAlive, CreekKeepAliveProps } from '../creek-keep-alive';
 import { CreekLocaleButton } from '../creek-locale-button';
 import { GlobalScrollbarStyle } from '../creek-style/scrollbar';
-import { FullScreen, LayoutSettings } from './ActionRender';
+import { FullScreen, LayoutSettings, UserInfo, UserInfoProps } from './ActionRender';
 import { CollapsedButton, useCollapsedStore } from './CollapseButton';
 import { Exception } from './Exception';
 import { useLayoutSettingsStore } from './useLayoutSettingsStore';
 
-export type LayoutProps = ProLayoutProps & {
+export type CreekLayoutProps = ProLayoutProps & {
   runtimeConfig: ProLayoutProps;
   userConfig?: ProLayoutProps;
   navigate?: (path?: string | number) => void;
@@ -31,6 +31,14 @@ export type LayoutProps = ProLayoutProps & {
   };
   keepAlive?: boolean | CreekKeepAliveProps;
   extraActions?: React.ReactNode[];
+  clientRoutes?: any[];
+  iconFontCNs?: string[];
+  /**
+   * 用户信息区域，支持传入配置对象（名称、头像、下拉菜单）或自定义渲染函数
+   * - 传对象：自动使用 UserInfo 组件渲染
+   * - 传函数：返回 ReactNode 直接渲染，返回 UserInfoProps 对象则使用 UserInfo 组件渲染
+   */
+  renderUser?: UserInfoProps | (() => React.ReactNode | UserInfoProps);
 };
 
 const MenuName = ({ name, path }: { name?: string; path?: string }) => {
@@ -39,7 +47,7 @@ const MenuName = ({ name, path }: { name?: string; path?: string }) => {
   return t(key, name);
 };
 
-export const CreekLayout = (props: LayoutProps) => {
+export const CreekLayout = (props: CreekLayoutProps) => {
   const {
     route,
     userConfig,
@@ -53,6 +61,9 @@ export const CreekLayout = (props: LayoutProps) => {
     showThemeColor = true,
     keepAlive = false,
     extraActions = [],
+    clientRoutes,
+    iconFontCNs,
+    renderUser,
     ...more
   } = props;
 
@@ -122,6 +133,14 @@ export const CreekLayout = (props: LayoutProps) => {
 
   const actions: React.ReactNode[] = [...extraActions];
 
+  if (renderUser) {
+    let result = typeof renderUser === 'function' ? renderUser() : renderUser;
+    const isUserInfoProps = (val: unknown): val is UserInfoProps =>
+      val !== null && typeof val === 'object' && ('name' in val || 'avatar' in val || 'menu' in val);
+    const userInfoNode = isUserInfoProps(result) ? <UserInfo {...result} /> : result;
+    actions.push(<span key="user-info">{userInfoNode}</span>);
+  }
+
   if (actualShowFullScreen) {
     actions.push(<FullScreen key="full-screen" />);
   }
@@ -176,7 +195,7 @@ export const CreekLayout = (props: LayoutProps) => {
       {...more}
     >
       <GlobalScrollbarStyle />
-      <Exception>{actualKeepAlive ? <CreekKeepAlive getTabTitle={getTabTitle} {...keepAliveProps} /> : children}</Exception>
+      <Exception>{actualKeepAlive ? <CreekKeepAlive getTabTitle={getTabTitle} routes={clientRoutes ?? route?.routes} {...keepAliveProps} /> : children}</Exception>
     </ProLayout>
   );
 
@@ -184,3 +203,4 @@ export const CreekLayout = (props: LayoutProps) => {
 };
 
 export * from './Exception';
+export { UserInfo, type UserInfoProps } from './ActionRender';

package/src/creek-table/hooks/useTableScrollHeight.tsx

@@ -1,6 +1,22 @@
 import { useDebounceFn, useEventListener } from 'ahooks';
 import { useEffect, useState } from 'react';
 
+/**
+ * 获取最近的可滚动父容器
+ */
+const getScrollParent = (element: HTMLElement): HTMLElement | Window => {
+  let parent: HTMLElement | null = element.parentElement;
+  while (parent) {
+    const style = window.getComputedStyle(parent);
+    const overflowY = style.overflowY;
+    if (overflowY === 'auto' || overflowY === 'scroll') {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return window;
+};
+
 export const useTableScrollHeight = (prefixCls: string, tableRef: React.RefObject<HTMLDivElement>, pageFixedBottom: boolean = true, offsetBottom: number = 0) => {
   const [scrollY, setScrollY] = useState<number | undefined>(undefined);
   const [tableHeight, setTableHeight] = useState<number | undefined>(undefined);
@@ -59,7 +75,16 @@ export const useTableScrollHeight = (prefixCls: string, tableRef: React.RefObjec
       const windowHeight = window.innerHeight;
 
       let height = windowHeight - top - currentContentPadding - currentCardContentPadding - offsetBottom;
-      let currentTableHeight = windowHeight - tableEl.getBoundingClientRect().top;
+
+      // 计算表格容器高度：相对于滚动父容器的位置，而非视口位置
+      // 这样即使表格上方有其他内容，高度计算也不会受页面滚动影响
+      const scrollParent = getScrollParent(tableEl);
+      let parentTop = 0;
+      if (scrollParent instanceof HTMLElement) {
+        parentTop = scrollParent.getBoundingClientRect().top;
+      }
+      const tableTopRelativeToParent = tableEl.getBoundingClientRect().top - parentTop;
+      let currentTableHeight = windowHeight - tableTopRelativeToParent - offsetBottom;
 
       const pagination = tableEl.querySelector(`.${prefixCls}-pagination`);
 
@@ -70,11 +95,13 @@ export const useTableScrollHeight = (prefixCls: string, tableRef: React.RefObjec
         const totalPaginationMargin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
 
         height = height - paginationHeight - totalPaginationMargin;
+        currentTableHeight = currentTableHeight - paginationHeight - totalPaginationMargin;
         setTableHeight(0);
       } else {
         // 如果没有找到分页，预留一个高度（假设分页高度为 24px + margin 16px = 40px）
         // 这样可以避免初始加载时高度过大，导致出现滚动条，然后分页出现后高度又变小
         height = height - 40;
+        currentTableHeight = currentTableHeight - 40;
 
         setTableHeight(currentTableHeight);
       }
@@ -108,6 +135,8 @@ export const useTableScrollHeight = (prefixCls: string, tableRef: React.RefObjec
   }, [tableRef, pageFixedBottom, prefixCls]);
 
   useEventListener('resize', calcHeight);
+  // 监听滚动事件，确保页面滚动时也能正确计算高度
+  useEventListener('scroll', calcHeight, { target: window });
 
   return {
     scrollY,