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/business/SearchBar.tsx

@@ -3,10 +3,10 @@
  * 用于搜索内容
  */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
 
 interface SearchBarProps {
   value: string;
@@ -18,6 +18,63 @@ interface SearchBarProps {
   autoFocus?: boolean;
 }
 
+function createSearchBarStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.full,
+      paddingHorizontal: spacing.xs,
+      height: 46,
+      borderWidth: 1,
+      borderColor: colors.divider,
+      shadowColor: 'transparent',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0,
+    },
+    containerFocused: {
+      borderColor: colors.primary.main,
+      shadowColor: 'transparent',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0,
+    },
+    searchIconWrap: {
+      width: 30,
+      height: 30,
+      marginLeft: spacing.xs,
+      marginRight: spacing.xs,
+      borderRadius: borderRadius.full,
+      backgroundColor: `${colors.text.secondary}12`,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    searchIconWrapFocused: {
+      backgroundColor: `${colors.primary.main}1A`,
+    },
+    input: {
+      flex: 1,
+      fontSize: fontSizes.md,
+      color: colors.text.primary,
+      paddingVertical: spacing.sm + 1,
+      paddingHorizontal: spacing.xs,
+    },
+    clearButton: {
+      width: 24,
+      height: 24,
+      marginHorizontal: spacing.xs,
+      borderRadius: borderRadius.full,
+      backgroundColor: `${colors.text.secondary}14`,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  });
+}
+
 const SearchBar: React.FC<SearchBarProps> = ({
   value,
   onChangeText,
@@ -27,6 +84,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
   onBlur,
   autoFocus = false,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createSearchBarStyles(colors), [colors]);
   const [isFocused, setIsFocused] = useState(false);
 
   const handleFocus = () => {
@@ -59,7 +118,6 @@ const SearchBar: React.FC<SearchBarProps> = ({
         onFocus={handleFocus}
         onBlur={handleBlur}
         autoFocus={autoFocus}
-        // 确保光标可见
         cursorColor={colors.primary.main}
         selectionColor={`${colors.primary.main}40`}
       />
@@ -69,73 +127,11 @@ const SearchBar: React.FC<SearchBarProps> = ({
           style={styles.clearButton}
           activeOpacity={0.7}
         >
-          <MaterialCommunityIcons
-            name="close"
-            size={14}
-            color={colors.text.secondary}
-          />
+          <MaterialCommunityIcons name="close" size={14} color={colors.text.secondary} />
         </TouchableOpacity>
       )}
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.full,
-    paddingHorizontal: spacing.xs,
-    height: 46,
-    borderWidth: 1,
-    borderColor: '#E7E7E7',
-    // 减少常态阴影，避免看起来像"黑框"
-    shadowColor: 'transparent',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-    elevation: 0,
-  },
-  containerFocused: {
-    // 焦点时使用更柔和的边框颜色
-    borderColor: colors.primary.main,
-    // 不添加额外的阴影，保持简洁
-    shadowColor: 'transparent',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-    elevation: 0,
-  },
-  searchIconWrap: {
-    width: 30,
-    height: 30,
-    marginLeft: spacing.xs,
-    marginRight: spacing.xs,
-    borderRadius: borderRadius.full,
-    backgroundColor: `${colors.text.secondary}12`,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  searchIconWrapFocused: {
-    backgroundColor: `${colors.primary.main}1A`,
-  },
-  input: {
-    flex: 1,
-    fontSize: fontSizes.md,
-    color: colors.text.primary,
-    paddingVertical: spacing.sm + 1,
-    paddingHorizontal: spacing.xs,
-  },
-  clearButton: {
-    width: 24,
-    height: 24,
-    marginHorizontal: spacing.xs,
-    borderRadius: borderRadius.full,
-    backgroundColor: `${colors.text.secondary}14`,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
 export default SearchBar;