clxx 2.1.2 → 2.1.4

package/build/ScrollView/index.js

@@ -10,12 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Indicator } from "../Indicator";
 import { RowCenter } from "../Flex/Row";
 import { style } from "./style";
 export function ScrollView(props) {
-    const { children, height, reachTopThreshold = 50, onReachTop, reachBottomThreshold = 50, onReachBottom, showLoading = true, loadingContent, onScroll, containerStyle, wrapperStyle, loadingStyle } = props, attrs = __rest(props, ["children", "height", "reachTopThreshold", "onReachTop", "reachBottomThreshold", "onReachBottom", "showLoading", "loadingContent", "onScroll", "containerStyle", "wrapperStyle", "loadingStyle"]);
+    const { children, height, reachTopThreshold = 50, onReachTop, reachBottomThreshold = 50, onReachBottom, showLoading = true, loadingContent, onScroll, scrollThrottle = 16, containerStyle, wrapperStyle, loadingStyle } = props, attrs = __rest(props, ["children", "height", "reachTopThreshold", "onReachTop", "reachBottomThreshold", "onReachBottom", "showLoading", "loadingContent", "onScroll", "scrollThrottle", "containerStyle", "wrapperStyle", "loadingStyle"]);
     // 容器高度
     const heightStyle = {};
     if (height) {
@@ -23,58 +23,142 @@ export function ScrollView(props) {
     }
     // 滚动容器
     const container = useRef(null);
-    const child = useRef(null);
     // 当前滚动到顶部的距离
-    const top = useRef(0);
-    const scrollCallback = (rawEvent) => {
-        var _a, _b;
+    const lastScrollTop = useRef(0);
+    // 防止重复触发的标记
+    const hasReachedTop = useRef(false);
+    const hasReachedBottom = useRef(false);
+    // 节流控制
+    const throttleTimer = useRef(undefined);
+    const lastCallTime = useRef(0);
+    // 使用 ref 保存最新的回调函数，避免闭包陈旧
+    const callbacksRef = useRef({
+        onScroll,
+        onReachTop,
+        onReachBottom,
+    });
+    // 每次渲染都更新 ref 中的回调
+    callbacksRef.current = {
+        onScroll,
+        onReachTop,
+        onReachBottom,
+    };
+    // container是否有滚动条
+    const [hasScrollBar, setHasScrollBar] = useState(false);
+    // 检查是否有滚动条
+    const checkScrollBar = useCallback(() => {
+        if (container.current) {
+            const hasScroll = container.current.scrollHeight > container.current.clientHeight;
+            setHasScrollBar(hasScroll);
+        }
+    }, []);
+    // 使用 ResizeObserver 监听内容高度变化
+    useLayoutEffect(() => {
+        const containerEl = container.current;
+        if (!containerEl)
+            return;
+        // 初始检查
+        checkScrollBar();
+        // 使用 ResizeObserver 监听尺寸变化
+        const resizeObserver = new ResizeObserver(() => {
+            checkScrollBar();
+        });
+        // 观察容器和内容
+        resizeObserver.observe(containerEl);
+        if (containerEl.firstElementChild) {
+            resizeObserver.observe(containerEl.firstElementChild);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [checkScrollBar]);
+    // 滚动回调（带节流）
+    const scrollCallback = useCallback((rawEvent) => {
+        const now = Date.now();
+        // 节流控制
+        if (scrollThrottle > 0 && now - lastCallTime.current < scrollThrottle) {
+            // 清除之前的定时器
+            if (throttleTimer.current) {
+                clearTimeout(throttleTimer.current);
+            }
+            // 设置新的定时器，确保最后一次调用会被执行
+            throttleTimer.current = window.setTimeout(() => {
+                handleScroll(rawEvent);
+            }, scrollThrottle);
+            return;
+        }
+        lastCallTime.current = now;
+        handleScroll(rawEvent);
+    }, [scrollThrottle, reachTopThreshold, reachBottomThreshold]);
+    // 实际的滚动处理逻辑
+    const handleScroll = useCallback((rawEvent) => {
+        var _a, _b, _c, _d, _e, _f;
         const box = container.current;
+        if (!box)
+            return;
         // 已经滚动的距离
         const scrollTop = box.scrollTop;
         // 滚动容器的包含滚动内容的高度
         const contentHeight = box.scrollHeight;
         // 滚动容器的视口高度
         const containerHeight = Math.min(box.clientHeight, box.offsetHeight);
-        // 加载指示的高度，如果加载指示不存在，则高度为0
-        const loadingHeight = (_b = (_a = box.children.item(1)) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+        // 最大可滚动距离
         const maxScroll = contentHeight - containerHeight;
+        // 计算滚动方向
+        const direction = scrollTop > lastScrollTop.current ? "downward" : "upward";
         // 生成滚动事件参数
         const event = {
             containerHeight,
             contentHeight,
             maxScroll,
             scrollTop,
-            direction: scrollTop > top.current ? "downward" : "upward",
+            direction,
             rawEvent,
         };
-        // 调用输入的滚动事件
-        onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
-        // 判断是否触发触顶事件
-        if (event.direction === "upward" && scrollTop < reachTopThreshold) {
-            onReachTop === null || onReachTop === void 0 ? void 0 : onReachTop(event);
+        // 调用通用滚动事件（使用 ref 中的最新回调）
+        (_b = (_a = callbacksRef.current).onScroll) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        // 触顶逻辑（防止重复触发）
+        if (direction === "upward" && scrollTop <= reachTopThreshold) {
+            if (!hasReachedTop.current) {
+                hasReachedTop.current = true;
+                hasReachedBottom.current = false; // 重置触底标记
+                (_d = (_c = callbacksRef.current).onReachTop) === null || _d === void 0 ? void 0 : _d.call(_c, event);
+            }
         }
-        // 判断是否触发触底事件
-        if (event.direction === "downward" && scrollTop > maxScroll - reachBottomThreshold - loadingHeight) {
-            onReachBottom === null || onReachBottom === void 0 ? void 0 : onReachBottom(event);
+        else if (scrollTop > reachTopThreshold) {
+            hasReachedTop.current = false;
+        }
+        // 触底逻辑（防止重复触发）
+        if (direction === "downward" && scrollTop >= maxScroll - reachBottomThreshold) {
+            if (!hasReachedBottom.current) {
+                hasReachedBottom.current = true;
+                hasReachedTop.current = false; // 重置触顶标记
+                (_f = (_e = callbacksRef.current).onReachBottom) === null || _f === void 0 ? void 0 : _f.call(_e, event);
+            }
+        }
+        else if (scrollTop < maxScroll - reachBottomThreshold) {
+            hasReachedBottom.current = false;
         }
         // 更新scrollTop上次的值
-        top.current = scrollTop;
-    };
+        lastScrollTop.current = scrollTop;
+    }, [reachTopThreshold, reachBottomThreshold]);
+    // 清理节流定时器
+    useLayoutEffect(() => {
+        return () => {
+            if (throttleTimer.current) {
+                clearTimeout(throttleTimer.current);
+            }
+        };
+    }, []);
     // loading内容
     let showLoadingContent = null;
     if (showLoading) {
         if (!loadingContent) {
-            showLoadingContent = (_jsxs(RowCenter, Object.assign({ css: [style.loading, loadingStyle] }, { children: [_jsx(Indicator, { barColor: "#333", barCount: 12 }), _jsx("p", { children: "\u6570\u636E\u52A0\u8F7D\u4E2D..." })] })));
+            showLoadingContent = (_jsxs(RowCenter, { css: [style.loading, loadingStyle], children: [_jsx(Indicator, { barColor: "#333", barCount: 12 }), _jsx("p", { children: "\u6570\u636E\u52A0\u8F7D\u4E2D..." })] }));
         }
         else {
             showLoadingContent = loadingContent;
         }
     }
-    // container是否有滚动条
-    const [hasScrollBar, setHasScrollBar] = useState(false);
-    useEffect(() => {
-        let hasScrollBar = container.current.scrollHeight > container.current.clientHeight;
-        setHasScrollBar(hasScrollBar);
-    });
-    return (_jsxs("div", Object.assign({ css: [style.container, heightStyle, containerStyle], onScroll: scrollCallback, ref: container }, attrs, { children: [_jsx("div", Object.assign({ css: wrapperStyle, ref: child }, { children: children })), hasScrollBar && showLoadingContent] })));
+    return (_jsxs("div", Object.assign({ css: [style.container, heightStyle, containerStyle], onScroll: scrollCallback, ref: container }, attrs, { children: [_jsx("div", { css: wrapperStyle, children: children }), hasScrollBar && showLoadingContent] })));
 }

package/build/Toast/Toast.js

@@ -23,16 +23,16 @@ export function Toast(props) {
             setAnimation(animation);
         }, duration);
         return () => {
-            window.clearInterval(timer);
+            window.clearTimeout(timer);
         };
-    }, [position]);
+    }, [position, duration]);
     let showContent;
     const middleStyle = position === "middle" ? style.contentMiddle : undefined;
     if (React.isValidElement(content)) {
-        showContent = _jsx("div", Object.assign({ css: [middleStyle, contentStyle] }, { children: content }));
+        showContent = _jsx("div", { css: [middleStyle, contentStyle], children: content });
     }
     else {
-        showContent = (_jsx("p", Object.assign({ css: [style.content(radius), middleStyle, contentStyle] }, { children: content })));
+        showContent = (_jsx("p", { css: [style.content(radius), middleStyle, contentStyle], children: content }));
     }
     // toast消失动画结束触发
     const animationEnd = (event) => {

package/build/Toast/style.d.ts

@@ -1,10 +1,40 @@
 import { Keyframes } from "@emotion/serialize";
-export declare const middleShowAnimation: Keyframes;
-export declare const middleHideAnimation: Keyframes;
-export declare const topShowAnimation: Keyframes;
-export declare const topHideAnimation: Keyframes;
-export declare const bottomShowAnimation: Keyframes;
-export declare const bottomHideAnimation: Keyframes;
+export declare const middleShowAnimation: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
+export declare const middleHideAnimation: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
+export declare const topShowAnimation: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
+export declare const topHideAnimation: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
+export declare const bottomShowAnimation: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
+export declare const bottomHideAnimation: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;
 /**
  * 根据位置和类型获取动画
  * @param position
@@ -13,14 +43,14 @@ export declare const bottomHideAnimation: Keyframes;
  */
 export declare function getAnimation(position: "top" | "middle" | "bottom", type: "show" | "hide"): {
     keyframes: Keyframes;
-    animation: import("@emotion/utils").SerializedStyles;
+    animation: import("@emotion/react").SerializedStyles;
 };
 export declare const style: {
-    container(): import("@emotion/utils").SerializedStyles;
-    top(offset: number): import("@emotion/utils").SerializedStyles;
-    middle: import("@emotion/utils").SerializedStyles;
-    bottom(offset: number): import("@emotion/utils").SerializedStyles;
-    content: (radius?: number) => import("@emotion/utils").SerializedStyles;
+    container(): import("@emotion/react").SerializedStyles;
+    top(offset: number): import("@emotion/react").SerializedStyles;
+    middle: import("@emotion/react").SerializedStyles;
+    bottom(offset: number): import("@emotion/react").SerializedStyles;
+    content: (radius?: number) => import("@emotion/react").SerializedStyles;
     contentMiddle: {
         transform: string;
     };

package/build/Toast/style.js

@@ -1,64 +1,64 @@
 import { css, keyframes } from "@emotion/react";
 import { adaptive } from "../utils/cssUtil";
-export const middleShowAnimation = keyframes `
-  from {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
+export const middleShowAnimation = keyframes `
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
 `;
-export const middleHideAnimation = keyframes `
-  from {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.9);
-  }
+export const middleHideAnimation = keyframes `
+  from {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.9);
+  }
 `;
-export const topShowAnimation = keyframes `
-  from {
-    opacity: 0;
-    transform: translate(-50%, -100%);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
+export const topShowAnimation = keyframes `
+  from {
+    opacity: 0;
+    transform: translate(-50%, -100%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
 `;
-export const topHideAnimation = keyframes `
-  from {
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, -100%);
-  }
+export const topHideAnimation = keyframes `
+  from {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -100%);
+  }
 `;
-export const bottomShowAnimation = keyframes `
-  from {
-    opacity: 0;
-    transform: translate(-50%, 100%);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
+export const bottomShowAnimation = keyframes `
+  from {
+    opacity: 0;
+    transform: translate(-50%, 100%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
 `;
-export const bottomHideAnimation = keyframes `
-  from {
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, 100%);
-  }
+export const bottomHideAnimation = keyframes `
+  from {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, 100%);
+  }
 `;
 /**
  * 根据位置和类型获取动画

package/build/index.d.ts

@@ -14,6 +14,9 @@ export { createApp, history, getHistory } from './utils/createApp';
 export { createPortalDOM } from './utils/dom';
 export { useInterval } from './Effect/useInterval';
 export { useTick } from './Effect/useTick';
+export { useUpdate } from './Effect/useUpdate';
+export { useWindowResize } from './Effect/useWindowResize';
+export { useViewport } from './Effect/useViewport';
 export { Ago } from './Ago';
 export { Container } from './Container';
 export { Flex, FlexItem } from './Flex';

package/build/index.js

@@ -14,6 +14,9 @@ export { createApp, history, getHistory } from './utils/createApp';
 export { createPortalDOM } from './utils/dom';
 export { useInterval } from './Effect/useInterval';
 export { useTick } from './Effect/useTick';
+export { useUpdate } from './Effect/useUpdate';
+export { useWindowResize } from './Effect/useWindowResize';
+export { useViewport } from './Effect/useViewport';
 export { Ago } from './Ago';
 export { Container } from './Container';
 export { Flex, FlexItem } from './Flex';

package/build/utils/Countdown.d.ts

@@ -33,7 +33,9 @@ export declare class Countdown {
     stop(): void;
     /**
      * 格式化每次更新的值
-     * @param remainTime
+     * 注意：format 的顺序决定了如何分配时间
+     * 例如：format='his' 时，72小时会显示为 72:00:00
+     *      format='dhis' 时，72小时会显示为 3:0:00:00（3天）
      */
     formatValue(): CountdownValue;
 }

package/build/utils/Countdown.js

@@ -54,6 +54,7 @@ export class Countdown {
         (_d = this._onUpdate) === null || _d === void 0 ? void 0 : _d.call(this, this.formatValue());
         // 记录倒计时开启时的时间
         const start = Date.now();
+        // 使用 1000ms 间隔，避免每帧都执行（性能优化）
         this._stopTick = tick(() => {
             var _a, _b, _c, _d;
             // 获取倒计时已经持续的时间
@@ -72,7 +73,7 @@ export class Countdown {
                 this.remain = currentRemain;
                 (_d = this._onUpdate) === null || _d === void 0 ? void 0 : _d.call(this, this.formatValue());
             }
-        });
+        }, 1000); // ← 添加 1000ms 间隔
     }
     // 停止倒计时
     stop() {
@@ -82,7 +83,9 @@ export class Countdown {
     }
     /**
      * 格式化每次更新的值
-     * @param remainTime
+     * 注意：format 的顺序决定了如何分配时间
+     * 例如：format='his' 时，72小时会显示为 72:00:00
+     *      format='dhis' 时，72小时会显示为 3:0:00:00（3天）
      */
     formatValue() {
         let remainTime = this.remain;

package/build/utils/createApp.d.ts

@@ -1,20 +1,21 @@
-import React from 'react';
-import { History } from 'history';
-import { ContainerProps } from '../Container';
-import { ContextValue } from '../context';
-export type RouteMethod = 'browser' | 'hash' | 'memory';
+import React from "react";
+import { History } from "history";
+import { ContainerProps } from "../Container";
+import { ContextValue } from "../context";
+export type RouterMode = "browser" | "hash" | "memory";
 export type AwaitValue<T> = T | Promise<T>;
-export interface CreateAppOption extends Omit<ContainerProps, 'children'>, ContextValue {
-    onBeforeRenderPage?: (pathname?: string) => AwaitValue<void>;
-    onAfterRenderPage?: (pathname?: string) => AwaitValue<void>;
-    onLoadingPage?: (pathname?: string) => AwaitValue<React.ReactNode>;
-    renderPage?: (pathname?: string) => AwaitValue<React.ReactNode>;
-    routeMethod?: RouteMethod;
-    defaultRoute?: string;
+export interface CreateAppOption extends Omit<ContainerProps, "children">, ContextValue {
+    onBefore?: (pathname: string) => AwaitValue<void>;
+    onAfter?: (pathname: string) => AwaitValue<void>;
+    loading?: (pathname: string) => AwaitValue<React.ReactNode>;
+    render?: (pathname: string) => AwaitValue<React.ReactNode>;
+    notFound?: (pathname: string) => AwaitValue<React.ReactNode>;
+    mode?: RouterMode;
+    default?: string;
     target: string | HTMLElement;
 }
 export declare let history: null | History;
-export declare function getHistory(routeMethod?: RouteMethod): History;
+export declare function getHistory(mode?: RouterMode): History;
 /**
  * 创建带路由的APP对象，全局对象，绝大部分情况下只需要调用一次
  * @param option CreateAppOption

package/build/utils/createApp.js

@@ -7,24 +7,24 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
-import { createRoot } from 'react-dom/client';
-import { createBrowserHistory, createHashHistory, createMemoryHistory, } from 'history';
-import { Container } from '../Container';
-import { setContextValue } from '../context';
-import pick from 'lodash/pick';
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { createBrowserHistory, createHashHistory, createMemoryHistory, } from "history";
+import { Container } from "../Container";
+import { setContextValue } from "../context";
+import pick from "lodash/pick";
 // 存储历史记录对象
 export let history = null;
 // 获取历史记录对象
-export function getHistory(routeMethod = 'browser') {
+export function getHistory(mode = "browser") {
     if (history === null) {
         const createMap = {
             browser: createBrowserHistory,
             hash: createHashHistory,
             memory: createMemoryHistory,
         };
-        history = createMap[routeMethod]();
+        history = createMap[mode]();
     }
     return history;
 }
@@ -35,25 +35,31 @@ export function getHistory(routeMethod = 'browser') {
 export function createApp(option) {
     return __awaiter(this, void 0, void 0, function* () {
         // 设置默认的路由方式
-        if (!option.routeMethod ||
-            ['browser', 'hash', 'memory'].indexOf(option.routeMethod) === -1) {
-            option.routeMethod = 'browser';
+        if (!option.mode ||
+            ["browser", "hash", "memory"].indexOf(option.mode) === -1) {
+            option.mode = "browser";
         }
         // 设置默认路由路径
-        if (!option.defaultRoute) {
-            option.defaultRoute = '/index';
+        if (!option.default) {
+            option.default = "/index";
         }
         // 这里是为了确保历史记录对象在组件渲染之前一定存在
-        history = getHistory(option.routeMethod);
+        history = getHistory(option.mode);
         // 提取关键数据
-        const context = pick(option, ['minDocWidth', 'maxDocWidth']);
+        const context = pick(option, ["minDocWidth", "maxDocWidth"]);
         const containerProps = pick(option, [
-            'designWidth',
-            'globalStyle',
+            "designWidth",
+            "globalStyle",
         ]);
-        const { onBeforeRenderPage, onAfterRenderPage, onLoadingPage, renderPage } = option;
+        const { onBefore, onAfter, loading, render, notFound } = option;
         // 设置上下文属性
         setContextValue(context);
+        // 规范化路径：移除首尾斜杠
+        const PATH_TRIM_REGEX = /^\/*|\/*$/g;
+        const normalizePath = (path) => {
+            const normalized = path.replace(PATH_TRIM_REGEX, "");
+            return normalized || option.default.replace(PATH_TRIM_REGEX, "");
+        };
         /**
          * 全局APP组件对象
          * @returns
@@ -61,50 +67,60 @@ export function createApp(option) {
         const App = () => {
             const [page, setPage] = useState(null);
             /**
-             * 渲染一个新页面
+             * 加载并渲染页面
              */
-            const showPage = useCallback((pathname) => __awaiter(this, void 0, void 0, function* () {
-                const pathReg = /^\/*|\/*$/g;
-                pathname = pathname.replace(pathReg, '');
-                if (!pathname) {
-                    pathname = option.defaultRoute.replace(pathReg, '');
-                }
-                // 如果有loading，要先显示loading
-                if (typeof onLoadingPage === 'function') {
-                    setPage(yield (onLoadingPage === null || onLoadingPage === void 0 ? void 0 : onLoadingPage(pathname)));
+            const loadAndRenderPage = useCallback((pathname) => __awaiter(this, void 0, void 0, function* () {
+                const normalizedPath = normalizePath(pathname);
+                // 如果有 loading 占位符，先显示
+                if (typeof loading === "function") {
+                    setPage(yield loading(normalizedPath));
                 }
-                // 加载页面之前可能会存在的逻辑
-                yield (onBeforeRenderPage === null || onBeforeRenderPage === void 0 ? void 0 : onBeforeRenderPage(pathname));
+                // 页面加载前钩子
+                yield (onBefore === null || onBefore === void 0 ? void 0 : onBefore(normalizedPath));
                 // 加载并显示页面
-                setPage(yield (renderPage === null || renderPage === void 0 ? void 0 : renderPage(pathname)));
-                // 加载页面之后可能存在的逻辑
-                yield (onAfterRenderPage === null || onAfterRenderPage === void 0 ? void 0 : onAfterRenderPage());
-            }), []);
+                if (typeof render === "function") {
+                    const pageContent = yield render(normalizedPath);
+                    // 如果返回 null/undefined，视为页面未找到
+                    if (pageContent === null || pageContent === undefined) {
+                        if (typeof notFound === "function") {
+                            setPage(yield notFound(normalizedPath));
+                        }
+                        else {
+                            // 默认 404 页面
+                            setPage(_jsxs("div", { children: ["Not Found: ", normalizedPath] }));
+                        }
+                        return;
+                    }
+                    setPage(pageContent);
+                }
+                // 页面加载后钩子
+                yield (onAfter === null || onAfter === void 0 ? void 0 : onAfter(normalizedPath));
+            }), [onBefore, onAfter, loading, render, notFound]);
             /**
-             * 监听变化
+             * 监听路由变化
              */
             useEffect(() => {
                 // 监听页面变化，一旦变化渲染新页面
                 const unlisten = history.listen(({ location }) => {
-                    showPage(location.pathname);
+                    loadAndRenderPage(location.pathname);
                 });
-                // 初始化时渲染一个页面
-                showPage(history.location.pathname);
+                // 初始化时渲染当前路径对应的页面
+                loadAndRenderPage(history.location.pathname);
                 // 卸载时，取消监听
                 return unlisten;
-            }, []);
+            }, [loadAndRenderPage]);
             return _jsx(Container, Object.assign({}, containerProps, { children: page }));
         };
         // 获取挂载对象
         let mount = null;
-        if (typeof option.target === 'string') {
+        if (typeof option.target === "string") {
             mount = document.querySelector(option.target);
         }
         else if (option.target instanceof HTMLElement) {
             mount = option.target;
         }
         else {
-            throw new Error('No mounted object is specified');
+            throw new Error("No mounted object is specified");
         }
         const root = createRoot(mount);
         root.render(_jsx(App, {}));