@teamias/pro-layout 0.0.15 → 0.0.17

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/KeepAlive/KeepAliveClass.d.ts

@@ -17,7 +17,7 @@ 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;
@@ -38,11 +38,14 @@ 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;
@@ -59,6 +62,13 @@ export declare class KeepAliveClass {
     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,16 +160,78 @@ export var KeepAliveClass = /*#__PURE__*/function () {
         })]
       });
     });
-    /** 页面挂载组件 */
-    _defineProperty(this, "KeepAliveItem", function (_ref) {
-      var activate = _ref.activate,
-        idKey = _ref.idKey;
+    /** 自动刷新 KeepAliveItem 组件(只在再次激活时候有效)
+     *  注意：此组件被定义为类属性而不是独立函数组件，是为了能够直接访问
+     *  KeepAliveClass 实例上的方法和状态（例如 this.useLifeCycle、this.refreshPage）。
+     *  如需修改为独立组件，需要通过 props 显式传入这些依赖，这里为了简化内部实现，
+     *  保留为类属性组件的实现方式是有意为之。
+     */
+    _defineProperty(this, "AutoRefreshKeepAliveItem", function (_ref) {
+      var children = _ref.children;
       var _useAccessRouter2 = useAccessRouter(),
-        page = _useAccessRouter2.page;
+        location = _useAccessRouter2.location;
       var _useState3 = useState({}),
         _useState4 = _slicedToArray(_useState3, 2),
         update = _useState4[1];
       var _useRef2 = useRef({
+          divId: "auto-refresh-keep-alive-item-".concat(Date.now(), "-").concat(Math.random().toString(36).substring(2)),
+          div: document.createElement('div'),
+          portal: null,
+          show: true,
+          count: 0,
+          location: location
+        }),
+        cache = _useRef2.current;
+      // 计数器大于该阈值才生效，避免初次加载时触发自动刷新
+      var ACTIVATION_COUNT_THRESHOLD = 2;
+      cache.location = location;
+      _this.useLifeCycle(function (type) {
+        // 计数器大于2次才生效，避免初次加载时候触发
+        if (type === ELifeCycleType.ACTIVATED && cache.count > ACTIVATION_COUNT_THRESHOLD) {
+          var _cache$location$state;
+          // console.log('ACTIVATED', ref.current);
+          if (!((_cache$location$state = cache.location.state) !== null && _cache$location$state !== void 0 && _cache$location$state.disabledReload)) {
+            // debugger;
+            _this.refreshPage(cache.location.pathname);
+          } else {
+            cache.show = true;
+            update({});
+          }
+        } else if (type === ELifeCycleType.DEACTIVATED) {
+          // console.log('DEACTIVATED', location);
+          cache.show = false;
+          update({});
+        }
+        cache.count += 1;
+      });
+      useEffect(function () {
+        cache.portal = cache.portal || /*#__PURE__*/createPortal(children, cache.div);
+        // update({});
+        if (cache.show) {
+          var _document$getElementB;
+          // debugger;
+          (_document$getElementB = document.getElementById(cache.divId)) === null || _document$getElementB === void 0 || (_document$getElementB = _document$getElementB.parentElement) === null || _document$getElementB === void 0 || _document$getElementB.appendChild(cache.div);
+        } else {
+          cache.div.remove();
+        }
+        update({});
+      }, [cache.show]);
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          id: cache.divId
+        }), cache.portal]
+      });
+    });
+    /** 页面挂载组件 */
+    _defineProperty(this, "KeepAliveItem", function (_ref2) {
+      var activate = _ref2.activate,
+        idKey = _ref2.idKey;
+      var _useAccessRouter3 = useAccessRouter(),
+        page = _useAccessRouter3.page;
+      var _useState5 = useState({}),
+        _useState6 = _slicedToArray(_useState5, 2),
+        update = _useState6[1];
+      var _useRef3 = useRef({
           div: document.createElement('div'),
           portal: null,
           /** 是否挂载 */
@@ -191,7 +241,7 @@ export var KeepAliveClass = /*#__PURE__*/function () {
           /** 开启生命周期回调 */
           useLifeCycle: false
         }),
-        cache = _useRef2.current;
+        cache = _useRef3.current;
       var lifeCycle = _this.keepAliveData.pageLifeCycle[idKey] = _this.keepAliveData.pageLifeCycle[idKey] || {
         callbacks: [],
         notification: function notification() {
@@ -212,8 +262,8 @@ export var KeepAliveClass = /*#__PURE__*/function () {
       useEffect(function () {
         if (activate && _this.contentDom) {
           cache.portal = cache.portal || /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(ErrorBoundary, {
-            fallbackRender: function fallbackRender(_ref2) {
-              var error = _ref2.error;
+            fallbackRender: function fallbackRender(_ref3) {
+              var error = _ref3.error;
               return /*#__PURE__*/_jsx(_Fragment, {
                 children: /*#__PURE__*/_jsx(Result, {
                   status: "error",
@@ -229,7 +279,9 @@ export var KeepAliveClass = /*#__PURE__*/function () {
                 })
               });
             },
-            children: (page === null || page === void 0 ? void 0 : page.element) || /*#__PURE__*/_jsx(NoFoundPage, {})
+            children: /*#__PURE__*/_jsx(_this.AutoRefreshKeepAliveItem, {
+              children: (page === null || page === void 0 ? void 0 : page.element) || /*#__PURE__*/_jsx(NoFoundPage, {})
+            })
           }), cache.div);
           _this.contentDom.appendChild(cache.div);
           cache.mount = true;

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

@@ -6,7 +6,7 @@ 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;

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
+        }
+      });
     }
   };
 

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.15",
+  "version": "0.0.17",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",