feat(Comment): enhance like functionality for comments and replies

- Updated CommentItem component to accept the comment object in the onLike callback, allowing for more detailed like handling.
- Added a like button for replies, improving user interaction with nested comments.
- Refactored handleLikeComment function in PostDetailScreen for optimized state management and error handling during like operations.
- Enhanced SettingsScreen to provide debug information for theme preferences, improving user experience in theme selection.
- Updated themeStore to dynamically manage system theme changes and improve overall theme handling.

src/stores/themeStore.ts

@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useColorScheme } from 'react-native';
+import { Appearance, AppState, AppStateStatus } from 'react-native';
 import { create } from 'zustand';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { lightColors, darkColors, type AppColors } from '../theme/palettes';
 import { buildPaperTheme } from '../theme/paperTheme';
 import type { MD3Theme } from 'react-native-paper';
@@ -46,13 +46,19 @@ type ThemeState = {
   hydrate: () => Promise<void>;
 };
 
-const initialSystem: ResolvedScheme = 'light';
+/** 获取系统主题 */
+function getSystemScheme(): ResolvedScheme {
+  const scheme = Appearance.getColorScheme();
+  return scheme === 'dark' ? 'dark' : 'light';
+}
+
+const initialSystemScheme = getSystemScheme();
 
 export const useThemeStore = create<ThemeState>((set, get) => ({
   preference: 'system',
-  systemScheme: initialSystem,
+  systemScheme: initialSystemScheme,
   hydrated: false,
-  ...buildState('system', initialSystem),
+  ...buildState('system', initialSystemScheme),
 
   setSystemScheme: (systemScheme) => {
     const { preference, systemScheme: cur } = get();
@@ -86,10 +92,11 @@ export const useThemeStore = create<ThemeState>((set, get) => ({
     } catch {
       /* ignore */
     }
-    const { systemScheme } = get();
+    const systemScheme = getSystemScheme();
     set({
       preference,
       hydrated: true,
+      systemScheme,
       ...buildState(preference, systemScheme),
     });
   },
@@ -97,17 +104,42 @@ export const useThemeStore = create<ThemeState>((set, get) => ({
 
 /** 在根布局中同步系统配色并恢复持久化偏好 */
 export function ThemeBootstrap() {
-  const system = useColorScheme();
   const setSystemScheme = useThemeStore((s) => s.setSystemScheme);
   const hydrate = useThemeStore((s) => s.hydrate);
+  const appState = useRef<AppStateStatus>(AppState.currentState);
 
   useEffect(() => {
     void hydrate();
   }, [hydrate]);
 
+  // 监听系统主题变化
   useEffect(() => {
-    setSystemScheme(system === 'dark' ? 'dark' : 'light');
-  }, [system, setSystemScheme]);
+    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+      const newScheme = colorScheme === 'dark' ? 'dark' : 'light';
+      setSystemScheme(newScheme);
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [setSystemScheme]);
+
+  // 监听应用状态变化，从后台恢复时重新检测系统主题
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', (nextAppState) => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      ) {
+        setSystemScheme(getSystemScheme());
+      }
+      appState.current = nextAppState;
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [setSystemScheme]);
 
   return null;
 }
@@ -131,3 +163,6 @@ export function useSetThemePreference() {
 export function usePaperThemeFromStore() {
   return useThemeStore((s) => s.paperTheme);
 }
+
+// 导出调试函数
+export { getSystemScheme };