fix: 优化 dashboard toast 自动消失

Author: SengokuCola

dashboard/src/components/ui/toast.tsx

@@ -17,10 +17,10 @@ const ToastViewport = React.forwardRef<
     <ToastPrimitives.Viewport
       ref={ref}
       className={cn(
-        "fixed z-[100] flex max-h-screen w-full gap-2 p-4",
+        "fixed z-[100] flex max-h-screen w-full gap-2 p-4 pointer-events-none",
         isMobile 
           ? "top-0 left-0 right-0 flex-col items-center" 
-          : "bottom-0 right-0 flex-col-reverse sm:max-w-[420px]",
+          : "top-0 right-0 flex-col sm:max-w-[420px]",
         className
       )}
       {...props}

dashboard/src/hooks/use-toast.ts

@@ -10,6 +10,7 @@ import type {
 
 const TOAST_LIMIT = 5
 const TOAST_REMOVE_DELAY = 5000
+const TOAST_AUTO_DISMISS_DELAY = 2000
 
 type ToasterToast = ToastProps & {
   id: string
@@ -55,6 +56,17 @@ interface State {
 }
 
 const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+const toastAutoDismissTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const clearAutoDismissTimeout = (toastId: string) => {
+  const timeout = toastAutoDismissTimeouts.get(toastId)
+  if (!timeout) {
+    return
+  }
+
+  clearTimeout(timeout)
+  toastAutoDismissTimeouts.delete(toastId)
+}
 
 const addToRemoveQueue = (toastId: string) => {
   if (toastTimeouts.has(toastId)) {
@@ -94,8 +106,11 @@ export const reducer = (state: State, action: Action): State => {
       // ! Side effects ! - This could be extracted into a dismissToast() action,
       // but I'll keep it here for simplicity
       if (toastId) {
+        clearAutoDismissTimeout(toastId)
         addToRemoveQueue(toastId)
       } else {
+        toastAutoDismissTimeouts.forEach((timeout) => clearTimeout(timeout))
+        toastAutoDismissTimeouts.clear()
         state.toasts.forEach((toast) => {
           addToRemoveQueue(toast.id)
         })
@@ -115,11 +130,14 @@ export const reducer = (state: State, action: Action): State => {
     }
     case "REMOVE_TOAST":
       if (action.toastId === undefined) {
+        toastAutoDismissTimeouts.forEach((timeout) => clearTimeout(timeout))
+        toastAutoDismissTimeouts.clear()
         return {
           ...state,
           toasts: [],
         }
       }
+      clearAutoDismissTimeout(action.toastId)
       return {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
@@ -142,6 +160,8 @@ type Toast = Omit<ToasterToast, "id">
 
 function toast({ ...props }: Toast) {
   const id = genId()
+  const autoDismissDuration =
+    typeof props.duration === "number" ? props.duration : TOAST_AUTO_DISMISS_DELAY
 
   const update = (props: ToasterToast) =>
     dispatch({
@@ -162,6 +182,15 @@ function toast({ ...props }: Toast) {
     },
   })
 
+  if (Number.isFinite(autoDismissDuration) && autoDismissDuration > 0) {
+    const timeout = setTimeout(() => {
+      toastAutoDismissTimeouts.delete(id)
+      dispatch({ type: "DISMISS_TOAST", toastId: id })
+    }, autoDismissDuration)
+
+    toastAutoDismissTimeouts.set(id, timeout)
+  }
+
   return {
     id: id,
     dismiss,