@teamias/pro-layout 0.0.14 → 0.0.16

package/dist/markdowns/example1/BasicProLayout/index.js

@@ -3,6 +3,7 @@ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyri
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 import { ProLayoutMemo } from "../../..";
+import { RexProConfigProvider } from '@teamias/rex-design';
 import { sleep } from 'radash';
 import { useEffect } from 'react';
 import ReactDom from 'react-dom';
@@ -11,66 +12,69 @@ import { menuData, pageComponentMap } from "./testData";
 import { jsx as _jsx } from "react/jsx-runtime";
 var BasicProLayout = function BasicProLayout() {
   return /*#__PURE__*/_jsx(MemoryRouter, {
-    children: /*#__PURE__*/_jsx(ProLayoutMemo, {
-      basename: "/",
-      projectId: "demo-project",
-      pageComponentMap: pageComponentMap,
-      placeholderElement: /*#__PURE__*/_jsx("div", {
-        children: "\u5360\u4F4D\u5143\u7D20: \u9875\u9762\u6B63\u5728\u5F00\u53D1\u4E2D..."
-      }),
-      requestUserInfoMenuData: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return sleep(100);
-            case 2:
-              return _context.abrupt("return", {
-                userInfo: {
-                  id: '1',
-                  username: 'demo-user'
-                },
-                menuData: menuData
-              });
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      })),
-      onLogin: ( /*#__PURE__*/function () {
-        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(params) {
-          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-            while (1) switch (_context2.prev = _context2.next) {
+    children: /*#__PURE__*/_jsx(RexProConfigProvider, {
+      value: {},
+      children: /*#__PURE__*/_jsx(ProLayoutMemo, {
+        basename: "/",
+        projectId: "demo-project",
+        pageComponentMap: pageComponentMap,
+        placeholderElement: /*#__PURE__*/_jsx("div", {
+          children: "\u5360\u4F4D\u5143\u7D20: \u9875\u9762\u6B63\u5728\u5F00\u53D1\u4E2D..."
+        }),
+        requestUserInfoMenuData: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
               case 0:
-                return _context2.abrupt("return", {
-                  token: 'demo-token',
+                _context.next = 2;
+                return sleep(100);
+              case 2:
+                return _context.abrupt("return", {
                   userInfo: {
                     id: '1',
                     username: 'demo-user'
-                  }
+                  },
+                  menuData: menuData
                 });
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        })),
+        onLogin: ( /*#__PURE__*/function () {
+          var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(params) {
+            return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  return _context2.abrupt("return", {
+                    token: 'demo-token',
+                    userInfo: {
+                      id: '1',
+                      username: 'demo-user'
+                    }
+                  });
+                case 1:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _callee2);
+          }));
+          return function (_x) {
+            return _ref2.apply(this, arguments);
+          };
+        }()),
+        onLogout: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
+              case 0:
+                console.log('退出');
               case 1:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
-          }, _callee2);
-        }));
-        return function (_x) {
-          return _ref2.apply(this, arguments);
-        };
-      }()),
-      onLogout: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              console.log('退出');
-            case 1:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3);
-      }))
+          }, _callee3);
+        }))
+      })
     })
   });
 };

package/dist/markdowns/example1/BasicProLayout/pages/Home.js

@@ -23,7 +23,12 @@ export var Home = function Home() {
       onClick: function onClick() {
         return navigate('/some-path');
       },
-      children: "\u8DF3\u8F6C"
+      children: "\u8DF3\u8F6C404"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return navigate('/menu/page2');
+      },
+      children: "\u8DF3\u8F6C \u83DC\u5355-\u4E8C\u7EA7"
     })]
   });
 };

package/dist/pro-layout/components/DocumentTitle.js

@@ -16,7 +16,8 @@ export var DocumentTitle = function DocumentTitle(_ref) {
     pageStatus = _useAccessRouter$loca.pageStatus,
     pathname = _useAccessRouter$loca.pathname,
     pageTitle = _useAccessRouter$loca.pageTitle,
-    intlMenuConfig = _useAccessRouter$loca.intlMenuConfig;
+    intlMenuConfig = _useAccessRouter$loca.intlMenuConfig,
+    localLangKey = _useAccessRouter$loca.localLangKey;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   useEffect(function () {
@@ -28,9 +29,9 @@ export var DocumentTitle = function DocumentTitle(_ref) {
     //   document.title = pageStatus + '';
     //   return;
     // }
-    document.title = pageTitle || formatMessage(_objectSpread(_objectSpread({}, intlMenuConfig), {}, {
-      id: (intlMenuConfig === null || intlMenuConfig === void 0 ? void 0 : intlMenuConfig.id) || 'menu.unknown'
+    document.title = pageTitle || formatMessage(_objectSpread(_objectSpread({}, intlMenuConfig || localLangKey), {}, {
+      id: (intlMenuConfig === null || intlMenuConfig === void 0 ? void 0 : intlMenuConfig.id) || (localLangKey === null || localLangKey === void 0 ? void 0 : localLangKey.id) || 'menu.unknown'
     }));
-  }, [pathname, pageStatus, pageTitle, intlMenuConfig, title]);
+  }, [pathname, pageStatus, pageTitle, intlMenuConfig, localLangKey, title]);
   return /*#__PURE__*/_jsx(_Fragment, {});
 };

package/dist/pro-layout/components/KeepAlive/KeepAliveClass.d.ts

@@ -17,13 +17,18 @@ export declare class KeepAliveClass {
     updateAllComponent(type?: 'all' | 'pagesHook' | 'context'): Promise<void>;
     /** 获取页面数据 */
     getPages(): (import("react-router-dom").Location & {
-        pageStatus: 200 | 404 | 403;
+        pageStatus: 404 | 403 | 200;
         pageTitle: string;
         intlMenuConfig?: {
             id: string;
             defaultMessage: string;
             localConfigPath: string;
         } | undefined;
+        localLangKey?: {
+            id: string;
+            defaultMessage: string;
+            localConfigPath: string;
+        } | undefined;
     })[];
     /** 关闭页面 */
     closePage(assignKey: string): number;
@@ -33,22 +38,37 @@ export declare class KeepAliveClass {
     closeOtherPage(isRetainCurrentKey?: boolean, retainKeys?: string[]): void;
     /** 刷新页面 */
     refreshPage(assignKey: string): Promise<void>;
-    /** hooks 回调页面 初次加载 或 再次加载，以及参数的变化 */
+    /**
+     * @desc hooks 回调页面 初次加载 或 再次加载，以及参数的变化
+     * TODO: 使用时候需要注意闭包问题
+     */
     useLifeCycle: (callback: IPageLifeCycleCallback) => void;
     /** 获取缓存页面数组 */
     useKeepAlivePages: () => (import("react-router-dom").Location & {
-        pageStatus: 200 | 404 | 403;
+        pageStatus: 404 | 403 | 200;
         pageTitle: string;
         intlMenuConfig?: {
             id: string;
             defaultMessage: string;
             localConfigPath: string;
         } | undefined;
+        localLangKey?: {
+            id: string;
+            defaultMessage: string;
+            localConfigPath: string;
+        } | undefined;
     })[];
     /** 更新当前路由页面 */
     updateCurrentPage(index?: number): void;
     /** 根渲染容器组件 */
     Content: () => import("react/jsx-runtime").JSX.Element;
+    /** 自动刷新 KeepAliveItem 组件(只在再次激活时候有效)
+     *  注意：此组件被定义为类属性而不是独立函数组件，是为了能够直接访问
+     *  KeepAliveClass 实例上的方法和状态（例如 this.useLifeCycle、this.refreshPage）。
+     *  如需修改为独立组件，需要通过 props 显式传入这些依赖，这里为了简化内部实现，
+     *  保留为类属性组件的实现方式是有意为之。
+     */
+    private AutoRefreshKeepAliveItem;
     /** 页面挂载组件 */
     private KeepAliveItem;
 }

package/dist/pro-layout/components/KeepAlive/KeepAliveClass.js

@@ -54,23 +54,11 @@ export var KeepAliveClass = /*#__PURE__*/function () {
       /** 最后打开页面的Location */
       lastLocation: undefined
     });
-    /** hooks 回调页面 初次加载 或 再次加载，以及参数的变化 */
+    /**
+     * @desc hooks 回调页面 初次加载 或 再次加载，以及参数的变化
+     * TODO: 使用时候需要注意闭包问题
+     */
     _defineProperty(this, "useLifeCycle", function (callback) {
-      // const local = useLocation();
-      // const lock = useRef(false);
-      // const fn = useCallback(() => {
-      //   const map = this.keepAliveData.pageLifeCycle;
-      //   const key = this.keepAliveData.currentPathname;
-      //   const oldMap = map[key];
-
-      //   if (!oldMap || !oldMap.callback) {
-      //     map[key] = {...oldMap, callback};
-      //     map[key]?.notification?.();
-      //   }
-      // }, []);
-
-      // !lock.current && fn();
-
       var _useRef = useRef({
           /** 初次执行锁 */
           lock: false,
@@ -172,12 +160,40 @@ export var KeepAliveClass = /*#__PURE__*/function () {
         })]
       });
     });
+    /** 自动刷新 KeepAliveItem 组件(只在再次激活时候有效)
+     *  注意：此组件被定义为类属性而不是独立函数组件，是为了能够直接访问
+     *  KeepAliveClass 实例上的方法和状态（例如 this.useLifeCycle、this.refreshPage）。
+     *  如需修改为独立组件，需要通过 props 显式传入这些依赖，这里为了简化内部实现，
+     *  保留为类属性组件的实现方式是有意为之。
+     */
+    _defineProperty(this, "AutoRefreshKeepAliveItem", function () {
+      var _useAccessRouter2 = useAccessRouter(),
+        location = _useAccessRouter2.location;
+      var ref = useRef(location);
+      var count = useRef(0);
+      // 计数器大于该阈值才生效，避免初次加载时触发自动刷新
+      var ACTIVATION_COUNT_THRESHOLD = 2;
+      ref.current = location;
+      _this.useLifeCycle(function (type) {
+        // 计数器大于2次才生效，避免初次加载时候触发
+        if (type === ELifeCycleType.ACTIVATED && count.current > ACTIVATION_COUNT_THRESHOLD) {
+          var _ref$current$state;
+          // console.log('ACTIVATED', ref.current);
+          if (!((_ref$current$state = ref.current.state) !== null && _ref$current$state !== void 0 && _ref$current$state.disabledReload)) {
+            // debugger;
+            _this.refreshPage(ref.current.pathname);
+          }
+        }
+        count.current += 1;
+      });
+      return /*#__PURE__*/_jsx(_Fragment, {});
+    });
     /** 页面挂载组件 */
     _defineProperty(this, "KeepAliveItem", function (_ref) {
       var activate = _ref.activate,
         idKey = _ref.idKey;
-      var _useAccessRouter2 = useAccessRouter(),
-        page = _useAccessRouter2.page;
+      var _useAccessRouter3 = useAccessRouter(),
+        page = _useAccessRouter3.page;
       var _useState3 = useState({}),
         _useState4 = _slicedToArray(_useState3, 2),
         update = _useState4[1];
@@ -211,7 +227,7 @@ export var KeepAliveClass = /*#__PURE__*/function () {
 
       useEffect(function () {
         if (activate && _this.contentDom) {
-          cache.portal = cache.portal || /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(ErrorBoundary, {
+          cache.portal = cache.portal || /*#__PURE__*/createPortal( /*#__PURE__*/_jsxs(ErrorBoundary, {
             fallbackRender: function fallbackRender(_ref2) {
               var error = _ref2.error;
               return /*#__PURE__*/_jsx(_Fragment, {
@@ -229,7 +245,7 @@ export var KeepAliveClass = /*#__PURE__*/function () {
                 })
               });
             },
-            children: (page === null || page === void 0 ? void 0 : page.element) || /*#__PURE__*/_jsx(NoFoundPage, {})
+            children: [(page === null || page === void 0 ? void 0 : page.element) || /*#__PURE__*/_jsx(NoFoundPage, {}), /*#__PURE__*/_jsx(_this.AutoRefreshKeepAliveItem, {})]
           }), cache.div);
           _this.contentDom.appendChild(cache.div);
           cache.mount = true;

package/dist/pro-layout/components/KeepAlive/index.d.ts

@@ -6,13 +6,18 @@ export declare const keepAliveControl: KeepAliveClass;
 export declare const useLifeCycle: (callback: import("./types").IPageLifeCycleCallback) => void;
 /** 获取页面数组 */
 export declare const useKeepAlivePages: () => (import("react-router-dom").Location & {
-    pageStatus: 200 | 404 | 403;
+    pageStatus: 404 | 403 | 200;
     pageTitle: string;
     intlMenuConfig?: {
         id: string;
         defaultMessage: string;
         localConfigPath: string;
     } | undefined;
+    localLangKey?: {
+        id: string;
+        defaultMessage: string;
+        localConfigPath: string;
+    } | undefined;
 })[];
 /** 根 */
 export declare const KeepAliveRoot: () => import("react/jsx-runtime").JSX.Element;

package/dist/pro-layout/components/NoFoundPage/index.js

@@ -48,7 +48,11 @@ export var NoFoundPage = function NoFoundPage(_ref) {
             _context.next = 5;
             return sleep(0);
           case 5:
-            navigate((home === null || home === void 0 ? void 0 : home.key) || '/');
+            navigate((home === null || home === void 0 ? void 0 : home.key) || '/', {
+              state: {
+                disabledReload: true
+              }
+            });
           case 6:
           case "end":
             return _context.stop();

package/dist/pro-layout/components/TabsLayout/index.js

@@ -41,9 +41,17 @@ export var TabsLayout = function TabsLayout() {
       var search = (_pathNameList$find = pathNameList.find(function (ii) {
         return ii.pathname === to;
       })) === null || _pathNameList$find === void 0 ? void 0 : _pathNameList$find.search;
-      navigate("".concat(to).concat(search));
+      navigate("".concat(to).concat(search), {
+        state: {
+          disabledReload: true
+        }
+      });
     } else {
-      navigate(to);
+      navigate(to, {
+        state: {
+          disabledReload: true
+        }
+      });
     }
   };
 
@@ -133,14 +141,14 @@ export var TabsLayout = function TabsLayout() {
       };
     }()),
     items: pathNameList.map(function (item) {
-      var _item$intlMenuConfig;
+      var _item$intlMenuConfig, _item$localLangKey;
       // 判断是否当前活跃标签
       var isCurrent = eq(state.activeKey, item.pathname);
       return {
         key: item.pathname,
         label: /*#__PURE__*/_jsx(TabItem, {
-          pageTitle: item.pageTitle || /*#__PURE__*/_jsx(FormattedMessage, _objectSpread(_objectSpread({}, item.intlMenuConfig), {}, {
-            id: ((_item$intlMenuConfig = item.intlMenuConfig) === null || _item$intlMenuConfig === void 0 ? void 0 : _item$intlMenuConfig.id) || 'menu.unknown'
+          pageTitle: item.pageTitle || /*#__PURE__*/_jsx(FormattedMessage, _objectSpread(_objectSpread({}, item.intlMenuConfig || item.localLangKey), {}, {
+            id: ((_item$intlMenuConfig = item.intlMenuConfig) === null || _item$intlMenuConfig === void 0 ? void 0 : _item$intlMenuConfig.id) || ((_item$localLangKey = item.localLangKey) === null || _item$localLangKey === void 0 ? void 0 : _item$localLangKey.id) || 'menu.unknown'
           })),
           pathname: item.pathname,
           isCurrent: isCurrent,

package/dist/pro-layout/hooks/index.d.ts

@@ -19,5 +19,11 @@ export declare const useAccessRouter: () => {
             defaultMessage: string;
             localConfigPath: string;
         } | undefined;
+        /** 兼容历史数据保留的, 只在使用时候会用到 */
+        localLangKey?: {
+            id: string;
+            defaultMessage: string;
+            localConfigPath: string;
+        } | undefined;
     };
 };

package/dist/pro-layout/utils/menu.js

@@ -64,7 +64,10 @@ export var handleMenuData = function handleMenuData() {
         // 菜单页面收集
         item.label = /*#__PURE__*/_jsxs(_Fragment, {
           children: [item.label, /*#__PURE__*/_jsx(Link, {
-            to: item.key
+            to: item.key,
+            state: {
+              disabledReload: true
+            }
           })]
         });
         fullPathDataMap[item.key] = item;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamias/pro-layout",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",