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/TabBar.tsx

@@ -4,10 +4,10 @@
  * 新增胶囊式、分段式等现代设计风格
  */
 
-import React, { ReactNode } from 'react';
-import { View, TouchableOpacity, StyleSheet, ScrollView, Animated, ViewStyle, StyleProp } from 'react-native';
+import React, { ReactNode, useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet, ScrollView, ViewStyle, StyleProp } 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';
 import Text from '../common/Text';
 
 type TabBarVariant = 'default' | 'pill' | 'segmented' | 'modern';
@@ -20,10 +20,168 @@ interface TabBarProps {
   rightContent?: ReactNode;
   variant?: TabBarVariant;
   icons?: string[];
-  /** 合并到最外层容器，用于按页面微调外边距等 */
   style?: StyleProp<ViewStyle>;
 }
 
+function createTabBarStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      backgroundColor: colors.background.paper,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.divider,
+      alignItems: 'center',
+      paddingRight: spacing.xs,
+    },
+    scrollableContainer: {
+      flexDirection: 'row',
+      paddingHorizontal: spacing.md,
+      backgroundColor: colors.background.paper,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.divider,
+      flex: 1,
+    },
+    tab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: spacing.md,
+      position: 'relative',
+    },
+    activeTab: {},
+    tabText: {
+      fontWeight: '500',
+    },
+    activeTabText: {
+      fontWeight: '600',
+    },
+    activeIndicator: {
+      position: 'absolute',
+      bottom: 0,
+      left: '25%',
+      right: '25%',
+      height: 3,
+      backgroundColor: colors.primary.main,
+      borderTopLeftRadius: borderRadius.sm,
+      borderTopRightRadius: borderRadius.sm,
+    },
+    rightContent: {
+      paddingLeft: spacing.sm,
+    },
+    pillContainer: {
+      flexDirection: 'row',
+      backgroundColor: colors.background.default,
+      padding: spacing.sm,
+      gap: spacing.sm,
+    },
+    pillTab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: spacing.sm,
+      paddingHorizontal: spacing.md,
+      borderRadius: borderRadius.lg,
+      backgroundColor: colors.background.paper,
+    },
+    pillTabActive: {
+      backgroundColor: colors.primary.main,
+    },
+    pillTabText: {
+      fontWeight: '600',
+    },
+    segmentedContainer: {
+      flexDirection: 'row',
+      backgroundColor: colors.background.default,
+      padding: spacing.xs,
+      marginHorizontal: spacing.md,
+      marginVertical: spacing.sm,
+      borderRadius: borderRadius.lg,
+    },
+    segmentedTab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: spacing.sm,
+      backgroundColor: 'transparent',
+    },
+    segmentedTabActive: {
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.md,
+      shadowColor: colors.chat.shadow,
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 2,
+      elevation: 2,
+    },
+    segmentedTabFirst: {
+      borderTopLeftRadius: borderRadius.md,
+      borderBottomLeftRadius: borderRadius.md,
+    },
+    segmentedTabLast: {
+      borderTopRightRadius: borderRadius.md,
+      borderBottomRightRadius: borderRadius.md,
+    },
+    segmentedTabText: {
+      fontWeight: '600',
+    },
+    segmentedTabContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    segmentedTabIcon: {
+      marginRight: spacing.xs,
+    },
+    modernContainer: {
+      flexDirection: 'row',
+      backgroundColor: colors.background.paper,
+      borderRadius: borderRadius.xl,
+      marginHorizontal: spacing.lg,
+      marginVertical: spacing.md,
+      padding: spacing.xs,
+      shadowColor: colors.chat.shadow,
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.08,
+      shadowRadius: 8,
+      elevation: 3,
+    },
+    modernTab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: spacing.sm,
+      borderRadius: borderRadius.lg,
+      position: 'relative',
+    },
+    modernTabActive: {
+      backgroundColor: colors.primary.main + '15',
+    },
+    modernTabContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    modernTabIcon: {
+      marginRight: spacing.xs,
+    },
+    modernTabText: {
+      fontWeight: '500',
+      fontSize: fontSizes.md,
+    },
+    modernTabTextActive: {
+      fontWeight: '700',
+    },
+    modernTabIndicator: {
+      position: 'absolute',
+      bottom: 4,
+      width: 20,
+      height: 3,
+      backgroundColor: colors.primary.main,
+      borderRadius: borderRadius.full,
+    },
+  });
+}
+
 const TabBar: React.FC<TabBarProps> = ({
   tabs,
   activeIndex,
@@ -34,6 +192,9 @@ const TabBar: React.FC<TabBarProps> = ({
   icons,
   style,
 }) => {
+  const colors = useAppColors();
+  const styles = useMemo(() => createTabBarStyles(colors), [colors]);
+
   const renderTabs = () => {
     return tabs.map((tab, index) => {
       const isActive = index === activeIndex;
@@ -112,11 +273,7 @@ const TabBar: React.FC<TabBarProps> = ({
                   style={styles.segmentedTabIcon}
                 />
               )}
-              <Text
-                variant="body"
-                color={isActive ? colors.primary.main : colors.text.secondary}
-                style={styles.segmentedTabText}
-              >
+              <Text variant="body" color={isActive ? colors.primary.main : colors.text.secondary} style={styles.segmentedTabText}>
                 {tab}
               </Text>
             </View>
@@ -124,7 +281,6 @@ const TabBar: React.FC<TabBarProps> = ({
         );
       }
 
-      // default variant
       return (
         <TouchableOpacity
           key={index}
@@ -161,11 +317,7 @@ const TabBar: React.FC<TabBarProps> = ({
   if (scrollable) {
     return (
       <View style={[getContainerStyle(), style]}>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.scrollableContainer}
-        >
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scrollableContainer}>
           {renderTabs()}
         </ScrollView>
         {rightContent && <View style={styles.rightContent}>{rightContent}</View>}
@@ -181,170 +333,4 @@ const TabBar: React.FC<TabBarProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  // Default variant
-  container: {
-    flexDirection: 'row',
-    backgroundColor: colors.background.paper,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
-    alignItems: 'center',
-    paddingRight: spacing.xs,
-  },
-  scrollableContainer: {
-    flexDirection: 'row',
-    paddingHorizontal: spacing.md,
-    backgroundColor: colors.background.paper,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
-    flex: 1,
-  },
-  tab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: spacing.md,
-    position: 'relative',
-  },
-  activeTab: {
-    // 激活状态样式
-  },
-  tabText: {
-    fontWeight: '500',
-  },
-  activeTabText: {
-    fontWeight: '600',
-  },
-  activeIndicator: {
-    position: 'absolute',
-    bottom: 0,
-    left: '25%',
-    right: '25%',
-    height: 3,
-    backgroundColor: colors.primary.main,
-    borderTopLeftRadius: borderRadius.sm,
-    borderTopRightRadius: borderRadius.sm,
-  },
-  rightContent: {
-    paddingLeft: spacing.sm,
-  },
-  
-  // Pill variant
-  pillContainer: {
-    flexDirection: 'row',
-    backgroundColor: colors.background.default,
-    padding: spacing.sm,
-    gap: spacing.sm,
-  },
-  pillTab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: spacing.sm,
-    paddingHorizontal: spacing.md,
-    borderRadius: borderRadius.lg,
-    backgroundColor: colors.background.paper,
-  },
-  pillTabActive: {
-    backgroundColor: colors.primary.main,
-  },
-  pillTabText: {
-    fontWeight: '600',
-  },
-  
-  // Segmented variant
-  segmentedContainer: {
-    flexDirection: 'row',
-    backgroundColor: colors.background.default,
-    padding: spacing.xs,
-    marginHorizontal: spacing.md,
-    marginVertical: spacing.sm,
-    borderRadius: borderRadius.lg,
-  },
-  segmentedTab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: spacing.sm,
-    backgroundColor: 'transparent',
-  },
-  segmentedTabActive: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.md,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  segmentedTabFirst: {
-    borderTopLeftRadius: borderRadius.md,
-    borderBottomLeftRadius: borderRadius.md,
-  },
-  segmentedTabLast: {
-    borderTopRightRadius: borderRadius.md,
-    borderBottomRightRadius: borderRadius.md,
-  },
-  segmentedTabText: {
-    fontWeight: '600',
-  },
-  segmentedTabContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  segmentedTabIcon: {
-    marginRight: spacing.xs,
-  },
-
-  // Modern variant - 现代化标签栏
-  modernContainer: {
-    flexDirection: 'row',
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.xl,
-    marginHorizontal: spacing.lg,
-    marginVertical: spacing.md,
-    padding: spacing.xs,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.08,
-    shadowRadius: 8,
-    elevation: 3,
-  },
-  modernTab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: spacing.sm,
-    borderRadius: borderRadius.lg,
-    position: 'relative',
-  },
-  modernTabActive: {
-    backgroundColor: colors.primary.main + '15', // 10% opacity
-  },
-  modernTabContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  modernTabIcon: {
-    marginRight: spacing.xs,
-  },
-  modernTabText: {
-    fontWeight: '500',
-    fontSize: fontSizes.md,
-  },
-  modernTabTextActive: {
-    fontWeight: '700',
-  },
-  modernTabIndicator: {
-    position: 'absolute',
-    bottom: 4,
-    width: 20,
-    height: 3,
-    backgroundColor: colors.primary.main,
-    borderRadius: borderRadius.full,
-  },
-});
-
 export default TabBar;