feat(Theme): enhance theming and UI consistency across components

- Updated app.json to set userInterfaceStyle to automatic for improved theme adaptability.
- Refactored layout components to utilize useAppColors for dynamic theming, ensuring consistent color usage.
- Introduced SystemChrome component to manage system UI background color based on theme.
- Enhanced TabsLayout, ProfileStackLayout, and other components to leverage new theming structure.
- Improved QRCodeScanner, SearchBar, and CommentItem styles to align with the updated theme system.
- Consolidated styles in SystemMessageItem and TabBar for better maintainability and visual coherence.

src/components/common/SmartImage.tsx

@@ -4,7 +4,7 @@
  * 基于 expo-image 封装，原生支持 GIF/WebP 动图
  */
 
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -17,7 +17,36 @@ import {
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, borderRadius } from '../../theme';
+import { borderRadius, useAppColors, type AppColors } from '../../theme';
+
+function createSmartImageStyles(colors: AppColors) {
+  return StyleSheet.create({
+    image: {
+      flex: 1,
+      width: '100%',
+      height: '100%',
+    },
+    variantImage: {
+      flex: 1,
+    },
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: colors.background.disabled,
+    },
+    loadingContainer: {
+      padding: 8,
+      borderRadius: borderRadius.md,
+      backgroundColor: `${colors.background.paper}E6`,
+    },
+    errorContainer: {
+      padding: 12,
+      borderRadius: borderRadius.md,
+      backgroundColor: `${colors.text.primary}0D`,
+    },
+  });
+}
 
 // 图片加载状态
 export type ImageLoadState = 'loading' | 'success' | 'error';
@@ -91,6 +120,8 @@ export const SmartImage: React.FC<SmartImageProps> = ({
   lazyRootMargin = '160px',
   cachePolicy = 'memory-disk',
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createSmartImageStyles(colors), [colors]);
   const [loadState, setLoadState] = useState<ImageLoadState>('loading');
   const [isVisible, setIsVisible] = useState(() => !lazyLoad || Platform.OS !== 'web');
   const [shouldLoadOriginal, setShouldLoadOriginal] = useState(false);
@@ -244,7 +275,7 @@ export const SmartImage: React.FC<SmartImageProps> = ({
       <View
         ref={Platform.OS === 'web' ? lazyTargetRef : undefined}
         collapsable={false}
-        style={[containerStyle, style as ViewStyle, { backgroundColor: '#F5F5F5' }]}
+        style={[containerStyle, style as ViewStyle, { backgroundColor: colors.background.default }]}
         testID={testID}
       />
     );
@@ -328,36 +359,15 @@ export const VariantImage: React.FC<ImageVariantProps> = ({
     <SmartImage
       {...props}
       style={finalStyle}
-      imageStyle={[styles.variantImage, imageStyle]}
+      imageStyle={[variantStyles.variantImage, imageStyle]}
     />
   );
 };
 
-const styles = StyleSheet.create({
-  image: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
+const variantStyles = StyleSheet.create({
   variantImage: {
     flex: 1,
   },
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: colors.background.disabled,
-  },
-  loadingContainer: {
-    padding: 8,
-    borderRadius: borderRadius.md,
-    backgroundColor: 'rgba(255, 255, 255, 0.9)',
-  },
-  errorContainer: {
-    padding: 12,
-    borderRadius: borderRadius.md,
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-  },
 });
 
 export default SmartImage;