@alifd/chat 0.1.6 → 0.1.8

package/es/float-button/hooks/useAutoHide.js

@@ -83,7 +83,7 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
         setHide(hide);
     };
     const debounceTriggerHide = useDebounce(triggerHide, 100);
-    const throttleSetHideByMouse = useThrottle(setHideByMouse, 250);
+    const throttleSetHideByMouse = useThrottle(setHideByMouse, 50);
     const throttleSetHideByApi = useThrottle(setHideByApi, 250);
     useEffect(() => {
         if (!dom) {

package/es/float-button/hooks/useNestleEdge.d.ts

@@ -6,8 +6,8 @@ export declare function useNestleEdge(dom: HTMLElement | null, { enable, safeAre
     enable?: boolean;
     safeAreaMargin?: Margin;
     interactiveEdges?: Edge[];
-    onUpdate?: (position: Position) => void | false;
-    onUpdateEnd?: (position: Position) => void;
+    onUpdate?: (position: Position, edge: Edge) => void | false;
+    onUpdateEnd?: (position: Position, edge: Edge) => void;
 }): {
-    update: (animation?: boolean) => void;
+    update: (animation?: boolean | undefined) => void;
 };

package/es/float-button/hooks/useNestleEdge.js

@@ -1,17 +1,10 @@
-import { useEffect, useLayoutEffect, useRef } from 'react';
-import { useDebounce } from '../../utils';
+import { useEffect, useLayoutEffect } from 'react';
+import { throttle, useDebounce, useThrottle } from '../../utils';
 import { getScreenSize, getNearlyEdge, adjustBySafeAreaMargin } from '../util';
 /**
  * 吸边逻辑
  */
 export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }) {
-    const eventTimerRef = useRef();
-    const triggerUpdateEnd = (position) => {
-        clearTimeout(eventTimerRef.current);
-        eventTimerRef.current = setTimeout(() => {
-            onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position);
-        }, 300);
-    };
     const update = (animation = true) => {
         if (!enable || !dom) {
             return;
@@ -20,7 +13,7 @@ export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, o
         const { left, top, width, height } = rect;
         const { width: screenWidth, height: screenHeight } = getScreenSize();
         const [edge] = getNearlyEdge(dom, interactiveEdges, rect);
-        const position = { left, top };
+        let position = { left, top };
         switch (edge) {
             case 'top': {
                 position.top = 0;
@@ -38,30 +31,45 @@ export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, o
                 position.left = 0;
                 break;
             }
-            // no default
+            default: {
+                return;
+            }
         }
-        if (position.left !== left || position.left !== top) {
-            const { left, top } = adjustBySafeAreaMargin(position, dom.getBoundingClientRect(), safeAreaMargin) ||
-                position;
-            const shouldContinue = onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate({ left, top });
-            if (shouldContinue === false) {
+        position = adjustBySafeAreaMargin(position, { width, height }, safeAreaMargin) || position;
+        if (position.left !== left || position.top !== top) {
+            if ((onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(position, edge)) === false) {
                 return;
             }
             dom.style.left = '0px';
             dom.style.top = '0px';
             if (animation) {
                 dom.style.transition = 'transform 0.25s';
+                let isRemoved = false;
+                const onEnd = throttle(() => {
+                    onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position, edge);
+                    dom.removeEventListener('transitionend', onEnd);
+                    isRemoved = true;
+                }, 10);
+                dom.addEventListener('transitionend', onEnd);
+                // 超时 500ms 移除监听
+                setTimeout(() => {
+                    if (!isRemoved) {
+                        dom.removeEventListener('transitionend', onEnd);
+                    }
+                }, 500);
+                dom.style.transform = `translate(${position.left}px, ${position.top}px)`;
             }
             else {
                 dom.style.transition = '';
+                dom.style.transform = `translate(${position.left}px, ${position.top}px)`;
+                onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position, edge);
             }
-            dom.style.transform = `translate(${left}px, ${top}px)`;
-            triggerUpdateEnd({ left, top });
         }
     };
     const debounceUpdate = useDebounce(() => update(), 100);
+    const throttleUpdate = useThrottle(update, 16);
     useLayoutEffect(() => {
-        update(false);
+        throttleUpdate(false);
     });
     useEffect(() => {
         window.addEventListener('resize', debounceUpdate);
@@ -70,6 +78,6 @@ export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, o
         };
     }, []);
     return {
-        update,
+        update: throttleUpdate,
     };
 }

package/es/float-button/types.d.ts

@@ -164,6 +164,19 @@ export interface FloatButtonProps extends CommonProps {
      * @defaultValue true
      */
     autoNestleEdge?: boolean;
+    /**
+     * 当触发边缘吸附前的回调
+     * @param position - 吸附位置
+     * @param edge - 吸附的边
+     * @returns false 则不允许吸附
+     */
+    beforeNestleEdge?: (position: Position, edge: Edge) => false | void;
+    /**
+     * 吸附到边缘后的回调
+     * @param position - 吸附位置
+     * @param edge - 吸附的边
+     */
+    afterNestleEdge?: (position: Position, edge: Edge) => void;
     /**
      * 在屏幕边缘时是否自动隐藏
      */
@@ -181,10 +194,6 @@ export interface FloatButtonProps extends CommonProps {
      * 触发节点
      */
     trigger: NonNullable<BalloonProps['trigger']>;
-    /**
-     * 隐藏时的触发节点，默认为 trigger
-     */
-    hiddenTrigger?: BalloonProps['trigger'];
     /**
      * 触发方式
      * @defaultValue 'click'

package/es/float-button/util.d.ts

@@ -5,4 +5,7 @@ export declare function getScreenSize(): {
 };
 export declare function getNearlyEdge(el: HTMLElement, interactiveEdges?: Edge[], rect?: DOMRect): [] | [nearestEdge: Edge, subNearestEdge?: Edge];
 export declare function isInScreen(dom: HTMLElement): boolean;
-export declare function adjustBySafeAreaMargin(position: Position | undefined, rect: DOMRect | null, safeAreaMargin?: Margin): Position | undefined;
+export declare function adjustBySafeAreaMargin(position: Position | undefined, rect: {
+    width: number;
+    height: number;
+} | null, safeAreaMargin?: Margin): Position | undefined;

package/es/float-button/view/float-button.js

@@ -27,7 +27,7 @@ import { useDragable } from '../hooks/useDragable';
  * | SPACE       | Trigger the onClick event    |
  */
 const FloatButton = forwardRef((props, ref) => {
-    const { className, style, addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = false, align, balloonProps, children, _renderView } = props, others = __rest(props, ["className", "style", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children", "_renderView"]);
+    const { className, style, addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = false, align, balloonProps, children, _renderView, beforeNestleEdge, afterNestleEdge } = props, others = __rest(props, ["className", "style", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children", "_renderView", "beforeNestleEdge", "afterNestleEdge"]);
     const elRef = useRef(null);
     const triggerRef = useRef(null);
     const [el, setEl] = useState(null);
@@ -63,14 +63,18 @@ const FloatButton = forwardRef((props, ref) => {
         enable: !!autoNestleEdge,
         safeAreaMargin,
         interactiveEdges,
-        onUpdate(position) {
+        onUpdate(position, edge) {
             if (isHideRef.current) {
                 saveRestorePosition(position);
                 return false;
             }
+            if ((beforeNestleEdge === null || beforeNestleEdge === void 0 ? void 0 : beforeNestleEdge(position, edge)) === false) {
+                return false;
+            }
         },
-        onUpdateEnd() {
+        onUpdateEnd(position, edge) {
             updateAlign();
+            afterNestleEdge === null || afterNestleEdge === void 0 ? void 0 : afterNestleEdge(position, edge);
         },
     });
     useImperativeHandle(ref, () => ({
@@ -100,7 +104,7 @@ const FloatButton = forwardRef((props, ref) => {
         },
         onDragend() {
             if (!isHideRef.current) {
-                Promise.resolve().then(() => updateNestleEdge());
+                updateNestleEdge();
             }
         },
     });

package/es/float-button/view/inner-drawer.js

@@ -22,7 +22,7 @@ function getMountTarget(prefix, target) {
         parent = document.createElement('div');
         parent.classList.add(`${prefix}outer`);
         parent.dataset.chat = 'drawer';
-        oldParent.appendChild(parent);
+        oldParent.insertBefore(parent, dom);
         parent.appendChild(dom);
     }
     let mountTarget = parent.childNodes[1];
@@ -35,11 +35,27 @@ function getMountTarget(prefix, target) {
         parent.appendChild(mountTarget);
     }
     dom.classList.add(`${prefix}inner-start`);
-    return mountTarget;
+    return {
+        mountTarget,
+        unmount() {
+            // 这里直接根据 mountTarget 的 dom 结构来卸载，防止 dom 结构发生变化导致报错
+            if (!document.body.contains(mountTarget)) {
+                return;
+            }
+            const outer = mountTarget.parentElement;
+            if (!outer.dataset.chat) {
+                return;
+            }
+            const dom = outer.childNodes[0];
+            dom.classList.remove(`${prefix}inner-start`);
+            outer.parentElement.replaceChild(dom, outer);
+        },
+    };
 }
 export function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable = true, title, cache = false, width = 400, beforeOpen, beforeClose, afterOpen, afterClose, }) {
     const cls = `${prefix}inner-drawer`;
     const [mountTarget, setMountTarget] = useState(null);
+    const effectsRef = useRef(new Map());
     const [showPane, setShowPane] = useState(!!visible);
     const propsRef = useRef({ visible, afterOpen, afterClose });
     propsRef.current = {
@@ -54,10 +70,29 @@ export function InnerDrawer({ className, prefix, target, children, trigger, trig
     };
     useEffect(() => {
         if (visible) {
-            setMountTarget(getMountTarget(`${cls}-`, target));
+            const prefix = `${cls}-`;
+            const results = getMountTarget(prefix, target);
+            if (!results) {
+                return;
+            }
+            setMountTarget(pre => {
+                var _a;
+                if (pre !== results.mountTarget) {
+                    // 当挂载节点发生变化时，清除上一次的副作用，保存本次的副作用清除函数
+                    (_a = effectsRef.current.get('mount')) === null || _a === void 0 ? void 0 : _a();
+                    effectsRef.current.set('mount', results.unmount);
+                }
+                return results.mountTarget;
+            });
             setShowPane(true);
         }
     }, [visible]);
+    useEffect(() => {
+        return () => {
+            // 组件卸载，清除副作用
+            effectsRef.current.forEach(f => f());
+        };
+    }, []);
     const handleVisibleChange = (nextVisible, type) => {
         onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextVisible, type);
     };

package/es/index.js

@@ -5,4 +5,4 @@ export { default as FloatButton } from './float-button';
 export { default as Text } from './text';
 export { default as Tag } from './tag';
 export { default as Tab } from './tab';
-export const version = '0.1.6';
+export const version = '0.1.8';

package/lib/float-button/hooks/useAutoHide.js

@@ -86,7 +86,7 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
         setHide(hide);
     };
     const debounceTriggerHide = (0, utils_1.useDebounce)(triggerHide, 100);
-    const throttleSetHideByMouse = (0, utils_1.useThrottle)(setHideByMouse, 250);
+    const throttleSetHideByMouse = (0, utils_1.useThrottle)(setHideByMouse, 50);
     const throttleSetHideByApi = (0, utils_1.useThrottle)(setHideByApi, 250);
     (0, react_1.useEffect)(() => {
         if (!dom) {

package/lib/float-button/hooks/useNestleEdge.d.ts

@@ -6,8 +6,8 @@ export declare function useNestleEdge(dom: HTMLElement | null, { enable, safeAre
     enable?: boolean;
     safeAreaMargin?: Margin;
     interactiveEdges?: Edge[];
-    onUpdate?: (position: Position) => void | false;
-    onUpdateEnd?: (position: Position) => void;
+    onUpdate?: (position: Position, edge: Edge) => void | false;
+    onUpdateEnd?: (position: Position, edge: Edge) => void;
 }): {
-    update: (animation?: boolean) => void;
+    update: (animation?: boolean | undefined) => void;
 };

package/lib/float-button/hooks/useNestleEdge.js

@@ -8,13 +8,6 @@ const util_1 = require("../util");
  * 吸边逻辑
  */
 function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }) {
-    const eventTimerRef = (0, react_1.useRef)();
-    const triggerUpdateEnd = (position) => {
-        clearTimeout(eventTimerRef.current);
-        eventTimerRef.current = setTimeout(() => {
-            onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position);
-        }, 300);
-    };
     const update = (animation = true) => {
         if (!enable || !dom) {
             return;
@@ -23,7 +16,7 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
         const { left, top, width, height } = rect;
         const { width: screenWidth, height: screenHeight } = (0, util_1.getScreenSize)();
         const [edge] = (0, util_1.getNearlyEdge)(dom, interactiveEdges, rect);
-        const position = { left, top };
+        let position = { left, top };
         switch (edge) {
             case 'top': {
                 position.top = 0;
@@ -41,30 +34,45 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
                 position.left = 0;
                 break;
             }
-            // no default
+            default: {
+                return;
+            }
         }
-        if (position.left !== left || position.left !== top) {
-            const { left, top } = (0, util_1.adjustBySafeAreaMargin)(position, dom.getBoundingClientRect(), safeAreaMargin) ||
-                position;
-            const shouldContinue = onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate({ left, top });
-            if (shouldContinue === false) {
+        position = (0, util_1.adjustBySafeAreaMargin)(position, { width, height }, safeAreaMargin) || position;
+        if (position.left !== left || position.top !== top) {
+            if ((onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(position, edge)) === false) {
                 return;
             }
             dom.style.left = '0px';
             dom.style.top = '0px';
             if (animation) {
                 dom.style.transition = 'transform 0.25s';
+                let isRemoved = false;
+                const onEnd = (0, utils_1.throttle)(() => {
+                    onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position, edge);
+                    dom.removeEventListener('transitionend', onEnd);
+                    isRemoved = true;
+                }, 10);
+                dom.addEventListener('transitionend', onEnd);
+                // 超时 500ms 移除监听
+                setTimeout(() => {
+                    if (!isRemoved) {
+                        dom.removeEventListener('transitionend', onEnd);
+                    }
+                }, 500);
+                dom.style.transform = `translate(${position.left}px, ${position.top}px)`;
             }
             else {
                 dom.style.transition = '';
+                dom.style.transform = `translate(${position.left}px, ${position.top}px)`;
+                onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position, edge);
             }
-            dom.style.transform = `translate(${left}px, ${top}px)`;
-            triggerUpdateEnd({ left, top });
         }
     };
     const debounceUpdate = (0, utils_1.useDebounce)(() => update(), 100);
+    const throttleUpdate = (0, utils_1.useThrottle)(update, 16);
     (0, react_1.useLayoutEffect)(() => {
-        update(false);
+        throttleUpdate(false);
     });
     (0, react_1.useEffect)(() => {
         window.addEventListener('resize', debounceUpdate);
@@ -73,7 +81,7 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
         };
     }, []);
     return {
-        update,
+        update: throttleUpdate,
     };
 }
 exports.useNestleEdge = useNestleEdge;

package/lib/float-button/types.d.ts

@@ -164,6 +164,19 @@ export interface FloatButtonProps extends CommonProps {
      * @defaultValue true
      */
     autoNestleEdge?: boolean;
+    /**
+     * 当触发边缘吸附前的回调
+     * @param position - 吸附位置
+     * @param edge - 吸附的边
+     * @returns false 则不允许吸附
+     */
+    beforeNestleEdge?: (position: Position, edge: Edge) => false | void;
+    /**
+     * 吸附到边缘后的回调
+     * @param position - 吸附位置
+     * @param edge - 吸附的边
+     */
+    afterNestleEdge?: (position: Position, edge: Edge) => void;
     /**
      * 在屏幕边缘时是否自动隐藏
      */
@@ -181,10 +194,6 @@ export interface FloatButtonProps extends CommonProps {
      * 触发节点
      */
     trigger: NonNullable<BalloonProps['trigger']>;
-    /**
-     * 隐藏时的触发节点，默认为 trigger
-     */
-    hiddenTrigger?: BalloonProps['trigger'];
     /**
      * 触发方式
      * @defaultValue 'click'

package/lib/float-button/util.d.ts

@@ -5,4 +5,7 @@ export declare function getScreenSize(): {
 };
 export declare function getNearlyEdge(el: HTMLElement, interactiveEdges?: Edge[], rect?: DOMRect): [] | [nearestEdge: Edge, subNearestEdge?: Edge];
 export declare function isInScreen(dom: HTMLElement): boolean;
-export declare function adjustBySafeAreaMargin(position: Position | undefined, rect: DOMRect | null, safeAreaMargin?: Margin): Position | undefined;
+export declare function adjustBySafeAreaMargin(position: Position | undefined, rect: {
+    width: number;
+    height: number;
+} | null, safeAreaMargin?: Margin): Position | undefined;

package/lib/float-button/view/float-button.js

@@ -29,7 +29,7 @@ const useDragable_1 = require("../hooks/useDragable");
  * | SPACE       | Trigger the onClick event    |
  */
 const FloatButton = (0, react_1.forwardRef)((props, ref) => {
-    const { className, style, addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = false, align, balloonProps, children, _renderView } = props, others = tslib_1.__rest(props, ["className", "style", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children", "_renderView"]);
+    const { className, style, addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = false, align, balloonProps, children, _renderView, beforeNestleEdge, afterNestleEdge } = props, others = tslib_1.__rest(props, ["className", "style", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children", "_renderView", "beforeNestleEdge", "afterNestleEdge"]);
     const elRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
     const [el, setEl] = (0, react_1.useState)(null);
@@ -65,14 +65,18 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
         enable: !!autoNestleEdge,
         safeAreaMargin,
         interactiveEdges,
-        onUpdate(position) {
+        onUpdate(position, edge) {
             if (isHideRef.current) {
                 saveRestorePosition(position);
                 return false;
             }
+            if ((beforeNestleEdge === null || beforeNestleEdge === void 0 ? void 0 : beforeNestleEdge(position, edge)) === false) {
+                return false;
+            }
         },
-        onUpdateEnd() {
+        onUpdateEnd(position, edge) {
             updateAlign();
+            afterNestleEdge === null || afterNestleEdge === void 0 ? void 0 : afterNestleEdge(position, edge);
         },
     });
     (0, react_1.useImperativeHandle)(ref, () => ({
@@ -102,7 +106,7 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
         },
         onDragend() {
             if (!isHideRef.current) {
-                Promise.resolve().then(() => updateNestleEdge());
+                updateNestleEdge();
             }
         },
     });

package/lib/float-button/view/inner-drawer.js

@@ -25,7 +25,7 @@ function getMountTarget(prefix, target) {
         parent = document.createElement('div');
         parent.classList.add(`${prefix}outer`);
         parent.dataset.chat = 'drawer';
-        oldParent.appendChild(parent);
+        oldParent.insertBefore(parent, dom);
         parent.appendChild(dom);
     }
     let mountTarget = parent.childNodes[1];
@@ -38,11 +38,27 @@ function getMountTarget(prefix, target) {
         parent.appendChild(mountTarget);
     }
     dom.classList.add(`${prefix}inner-start`);
-    return mountTarget;
+    return {
+        mountTarget,
+        unmount() {
+            // 这里直接根据 mountTarget 的 dom 结构来卸载，防止 dom 结构发生变化导致报错
+            if (!document.body.contains(mountTarget)) {
+                return;
+            }
+            const outer = mountTarget.parentElement;
+            if (!outer.dataset.chat) {
+                return;
+            }
+            const dom = outer.childNodes[0];
+            dom.classList.remove(`${prefix}inner-start`);
+            outer.parentElement.replaceChild(dom, outer);
+        },
+    };
 }
 function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable = true, title, cache = false, width = 400, beforeOpen, beforeClose, afterOpen, afterClose, }) {
     const cls = `${prefix}inner-drawer`;
     const [mountTarget, setMountTarget] = (0, react_1.useState)(null);
+    const effectsRef = (0, react_1.useRef)(new Map());
     const [showPane, setShowPane] = (0, react_1.useState)(!!visible);
     const propsRef = (0, react_1.useRef)({ visible, afterOpen, afterClose });
     propsRef.current = {
@@ -57,10 +73,29 @@ function InnerDrawer({ className, prefix, target, children, trigger, triggerType
     };
     (0, react_1.useEffect)(() => {
         if (visible) {
-            setMountTarget(getMountTarget(`${cls}-`, target));
+            const prefix = `${cls}-`;
+            const results = getMountTarget(prefix, target);
+            if (!results) {
+                return;
+            }
+            setMountTarget(pre => {
+                var _a;
+                if (pre !== results.mountTarget) {
+                    // 当挂载节点发生变化时，清除上一次的副作用，保存本次的副作用清除函数
+                    (_a = effectsRef.current.get('mount')) === null || _a === void 0 ? void 0 : _a();
+                    effectsRef.current.set('mount', results.unmount);
+                }
+                return results.mountTarget;
+            });
             setShowPane(true);
         }
     }, [visible]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            // 组件卸载，清除副作用
+            effectsRef.current.forEach(f => f());
+        };
+    }, []);
     const handleVisibleChange = (nextVisible, type) => {
         onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextVisible, type);
     };

package/lib/index.js

@@ -18,4 +18,4 @@ var tag_1 = require("./tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return __importDefault(tag_1).default; } });
 var tab_1 = require("./tab");
 Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return __importDefault(tab_1).default; } });
-exports.version = '0.1.6';
+exports.version = '0.1.8';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",