feat: custom toast

zeevenn · zeevenn · commit e5d8ad5dba19 · 2025-07-28T19:28:04.000+08:00
diff --git a/.cursor/rules/app.mdc b/.cursor/rules/app.mdc
@@ -12,6 +12,8 @@ This project is a monorepo for cross-platform development.
 
 Before starting, you need to know the current technical stack structure and the construction of the monorepo.
 
+When you are writing code, you should adapt the dark/light mode of the system.
+
 ## For React Native
 
 - React 19
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
@@ -9,6 +9,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { adaptNavigationTheme, PaperProvider } from 'react-native-paper'
 import TrackPlayer from 'react-native-track-player'
 import { ThemedView } from '@/components/ui/ThemedView'
+import { ToastProvider } from '@/components/ui/Toast'
 import Themes from '@/constants/Themes'
 import { useInitLocalTracks } from '@/hooks/useInitLocalTracks'
 import { Player } from '@/modules/player'
@@ -47,11 +48,13 @@ export default function RootLayout() {
     <PaperProvider theme={paperTheme}>
       <ThemeProvider value={effectiveColorScheme === 'dark' ? DarkTheme : LightTheme}>
         <GestureHandlerRootView style={{ flex: 1 }}>
-          <ThemedView style={{ flex: 1 }} testID="root-surface">
-            <StatusBar style={statusBarStyle} />
-            <Slot />
-            <Player />
-          </ThemedView>
+          <ToastProvider>
+            <ThemedView style={{ flex: 1 }} testID="root-surface">
+              <StatusBar style={statusBarStyle} />
+              <Slot />
+              <Player />
+            </ThemedView>
+          </ToastProvider>
         </GestureHandlerRootView>
       </ThemeProvider>
     </PaperProvider>
diff --git a/apps/mobile/components/ui/Toast.tsx b/apps/mobile/components/ui/Toast.tsx
@@ -0,0 +1,236 @@
+import type { ToastConfig } from '@/context/ToastContext'
+import { merge } from '@flow/core'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Animated, Dimensions, StyleSheet, Text, View } from 'react-native'
+import { useTheme } from 'react-native-paper'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ToastContext } from '@/context/ToastContext'
+
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window')
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [visible, setVisible] = useState(false)
+  const [config, setConfig] = useState<ToastConfig>({
+    message: '',
+    type: 'info',
+    duration: 3000,
+    position: 'bottom',
+  })
+
+  const opacity = useRef(new Animated.Value(0)).current
+  const translateY = useRef(new Animated.Value(50)).current
+  const scale = useRef(new Animated.Value(0.9)).current
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  const insets = useSafeAreaInsets()
+  const theme = useTheme()
+
+  const hideToast = useCallback(() => {
+    // 执行退出动画
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateY, {
+        toValue: config.position === 'top' ? -50 : 50,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(scale, {
+        toValue: 0.9,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      setVisible(false)
+    })
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+  }, [opacity, translateY, scale, config.position])
+
+  const showToast = useCallback((newConfig: ToastConfig) => {
+    // 清除之前的定时器
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+
+    const defaultConfig: ToastConfig = {
+      duration: 3000,
+      type: 'info',
+      position: 'bottom',
+      message: '',
+    }
+
+    const finalConfig = merge(defaultConfig, newConfig)
+
+    setConfig(finalConfig)
+    setVisible(true)
+
+    // 重置动画值
+    opacity.setValue(0)
+    translateY.setValue(finalConfig.position === 'top' ? -50 : 50)
+    scale.setValue(0.9)
+
+    // 执行进入动画
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.spring(scale, {
+        toValue: 1,
+        tension: 100,
+        friction: 8,
+        useNativeDriver: true,
+      }),
+    ]).start()
+
+    // 设置自动隐藏
+    if (finalConfig.duration && finalConfig.duration > 0) {
+      timeoutRef.current = setTimeout(() => {
+        hideToast()
+      }, finalConfig.duration)
+    }
+  }, [opacity, translateY, scale, hideToast])
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  const getToastStyle = () => {
+    const baseStyle = {
+      position: 'absolute' as const,
+      left: 16,
+      right: 16,
+      zIndex: 9999,
+    }
+
+    switch (config.position) {
+      case 'top':
+        return {
+          ...baseStyle,
+          top: insets.top + 16,
+        }
+      case 'center':
+        return {
+          ...baseStyle,
+          top: (screenHeight - 56) / 2, // 56 是大概的 toast 高度
+        }
+      case 'bottom':
+      default:
+        return {
+          ...baseStyle,
+          bottom: insets.bottom + 16,
+        }
+    }
+  }
+
+  const getToastColors = () => {
+    const { colors } = theme
+
+    switch (config.type) {
+      case 'success':
+        return {
+          background: colors.primaryContainer,
+          text: colors.onPrimaryContainer,
+        }
+      case 'error':
+        return {
+          background: colors.errorContainer,
+          text: colors.onErrorContainer,
+        }
+      case 'warning':
+        return {
+          background: colors.secondaryContainer,
+          text: colors.onSecondaryContainer,
+        }
+      case 'info':
+      default:
+        return {
+          background: colors.tertiaryContainer,
+          text: colors.onTertiaryContainer,
+        }
+    }
+  }
+
+  const toastColors = getToastColors()
+  const contextValue = useMemo(() => ({ showToast, hideToast }), [showToast, hideToast])
+
+  return (
+    <ToastContext value={contextValue}>
+      {children}
+      {visible && (
+        <Animated.View
+          style={[
+            getToastStyle(),
+            {
+              opacity,
+              transform: [{ translateY }, { scale }],
+            },
+          ]}
+          pointerEvents="none"
+        >
+          <View
+            style={[
+              styles.toastContainer,
+              {
+                backgroundColor: toastColors.background,
+                shadowColor: theme.colors.shadow,
+              },
+            ]}
+          >
+            <Text
+              style={[
+                styles.toastText,
+                {
+                  color: toastColors.text,
+                },
+              ]}
+              numberOfLines={2}
+            >
+              {config.message}
+            </Text>
+          </View>
+        </Animated.View>
+      )}
+    </ToastContext>
+  )
+}
+
+const styles = StyleSheet.create({
+  toastContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 8,
+    maxWidth: screenWidth - 32,
+    alignSelf: 'center',
+    // Material Design 阴影
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  toastText: {
+    fontSize: 14,
+    fontWeight: '500',
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+})
diff --git a/apps/mobile/context/ToastContext.ts b/apps/mobile/context/ToastContext.ts
@@ -0,0 +1,18 @@
+import { createContext } from 'react'
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning'
+export type ToastPosition = 'top' | 'center' | 'bottom'
+
+export interface ToastConfig {
+  message: string
+  type?: ToastType
+  duration?: number
+  position?: ToastPosition
+}
+
+export interface ToastContextType {
+  showToast: (config: ToastConfig) => void
+  hideToast: () => void
+}
+
+export const ToastContext = createContext<ToastContextType | null>(null)
diff --git a/apps/mobile/hooks/useToast.ts b/apps/mobile/hooks/useToast.ts
@@ -0,0 +1,47 @@
+import type { ToastConfig, ToastPosition } from '@/context/ToastContext'
+import { use, useCallback } from 'react'
+import { ToastContext } from '@/context/ToastContext'
+
+interface Toast {
+  success: (message: string, position?: ToastPosition, duration?: number) => void
+  error: (message: string, position?: ToastPosition, duration?: number) => void
+  warning: (message: string, position?: ToastPosition, duration?: number) => void
+  info: (message: string, position?: ToastPosition, duration?: number) => void
+  show: (config: ToastConfig) => void
+  hide: () => void
+}
+
+export function useToast(): Toast {
+  const context = use(ToastContext)
+
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider')
+  }
+
+  const showSuccess = useCallback((message: string, position?: ToastPosition, duration?: number) => {
+    context.showToast({ message, type: 'success', position, duration })
+  }, [context])
+
+  const showError = useCallback((message: string, position?: ToastPosition, duration?: number) => {
+    context.showToast({ message, type: 'error', position, duration })
+  }, [context])
+
+  const showWarning = useCallback((message: string, position?: ToastPosition, duration?: number) => {
+    context.showToast({ message, type: 'warning', position, duration })
+  }, [context])
+
+  const showInfo = useCallback((message: string, position?: ToastPosition, duration?: number) => {
+    context.showToast({ message, type: 'info', position, duration })
+  }, [context])
+
+  const toast: Toast = {
+    success: showSuccess,
+    error: showError,
+    warning: showWarning,
+    info: showInfo,
+    hide: context.hideToast,
+    show: context.showToast,
+  }
+
+  return toast
+}
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
@@ -1,3 +1,4 @@
 export * from './debugger'
 export * from './logger'
+export * from './merge'
 export * from './time'
diff --git a/packages/core/src/utils/merge.ts b/packages/core/src/utils/merge.ts
@@ -0,0 +1,54 @@
+/**
+ * 合并对象，只有当源对象的属性不是 undefined 时才覆盖目标对象的属性
+ * @param target 目标对象（默认配置）
+ * @param source 源对象（用户配置）
+ * @returns 合并后的新对象
+ */
+export function merge<T extends Record<string, any>, U extends Partial<T>>(
+  target: T,
+  source: U,
+): T & U {
+  const result = { ...target } as T & U
+
+  for (const key in source) {
+    if (source[key] !== undefined) {
+      ;(result as any)[key] = source[key]
+    }
+  }
+
+  return result
+}
+
+/**
+ * 深度合并对象，只有当源对象的属性不是 undefined 时才覆盖目标对象的属性
+ * @param target 目标对象（默认配置）
+ * @param source 源对象（用户配置）
+ * @returns 合并后的新对象
+ */
+export function deepMerge<T extends Record<string, any>, U extends Partial<T>>(
+  target: T,
+  source: U,
+): T & U {
+  const result = { ...target } as T & U
+
+  for (const key in source) {
+    if (source[key] !== undefined) {
+      if (
+        typeof source[key] === 'object'
+        && source[key] !== null
+        && !Array.isArray(source[key])
+        && typeof target[key] === 'object'
+        && target[key] !== null
+        && !Array.isArray(target[key])
+      ) {
+        // 递归深度合并对象
+        ;(result as any)[key] = deepMerge(target[key], source[key])
+      }
+      else {
+        ;(result as any)[key] = source[key]
+      }
+    }
+  }
+
+  return result
+}
diff --git a/packages/store/src/settingStore.ts b/packages/store/src/settingStore.ts
