refactor: 提取 useToast hook + Toast 组件,消除 4 处重复的通知逻辑

将 state + setTimeout 自动消失逻辑封装为 useToast hook,
Toast UI 统一为组件支持 top/bottom 两种位置,净减约 12 行。
This commit is contained in:
2026-02-26 17:50:28 +08:00
parent 948274bcb9
commit b98920858c
6 changed files with 86 additions and 98 deletions
+17
View File
@@ -0,0 +1,17 @@
import { useState, useCallback, useRef } from "react";
export function useToast(duration = 2200) {
const [message, setMessage] = useState("");
const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
const show = useCallback(
(msg: string) => {
clearTimeout(timerRef.current);
setMessage(msg);
timerRef.current = setTimeout(() => setMessage(""), duration);
},
[duration],
);
return { message, show } as const;
}