feat: 优化体重记录页面，使用useCallback提升加载历史记录性能，调整样式以支持深色模式

app/weight-records.tsx

@@ -9,7 +9,7 @@ import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Alert,
   Modal,
@@ -34,18 +34,17 @@ export default function WeightRecordsPage() {
 
   console.log('userProfile:', userProfile);
 
-
+  const loadWeightHistory = useCallback(async () => {
-  useEffect(() => {
-    loadWeightHistory();
-  }, []);
-
-  const loadWeightHistory = async () => {
     try {
       await dispatch(fetchWeightHistory() as any);
     } catch (error) {
       console.error('加载体重历史失败:', error);
     }
-  };
+  }, [dispatch]);
+
+  useEffect(() => {
+    loadWeightHistory();
+  }, [loadWeightHistory]);
 
   const handleGoBack = () => {
     router.back();
@@ -465,7 +464,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(255, 149, 0, 0.1)',
   },
   monthContainer: {
-    marginBottom: 16,
+    marginBottom: 20,
   },
   monthHeaderCard: {
     backgroundColor: '#FFFFFF',

components/weight/WeightRecordCard.tsx

@@ -1,4 +1,5 @@
 import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
 import { WeightHistoryItem } from '@/store/userSlice';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
@@ -20,6 +21,8 @@ export const WeightRecordCard: React.FC<WeightRecordCardProps> = ({
   weightChange = 0
 }) => {
   const swipeableRef = useRef<Swipeable>(null);
+  const colorScheme = useColorScheme();
+  const themeColors = Colors[colorScheme ?? 'light'];
 
   // 处理删除操作
   const handleDelete = () => {
@@ -66,10 +69,10 @@ export const WeightRecordCard: React.FC<WeightRecordCardProps> = ({
       overshootRight={false}
     >
       <View
-        style={styles.recordCard}
+        style={[styles.recordCard, colorScheme === 'dark' && styles.recordCardDark]}
       >
         <View style={styles.recordHeader}>
-          <Text style={styles.recordDateTime}>
+          <Text style={[styles.recordDateTime, { color: themeColors.textSecondary }]}>
             {dayjs(record.createdAt).format('MM月DD日 HH:mm')}
           </Text>
           <TouchableOpacity
@@ -80,8 +83,8 @@ export const WeightRecordCard: React.FC<WeightRecordCardProps> = ({
           </TouchableOpacity>
         </View>
         <View style={styles.recordContent}>
-          <Text style={styles.recordWeightLabel}>体重：</Text>
+          <Text style={[styles.recordWeightLabel, { color: themeColors.textSecondary }]}>体重：</Text>
-          <Text style={styles.recordWeightValue}>{record.weight}kg</Text>
+          <Text style={[styles.recordWeightValue, { color: themeColors.text }]}>{record.weight}kg</Text>
           {Math.abs(weightChange) > 0 && (
             <View style={[
               styles.weightChangeTag,
@@ -108,15 +111,13 @@ export const WeightRecordCard: React.FC<WeightRecordCardProps> = ({
 
 const styles = StyleSheet.create({
   recordCard: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: '#F0F0F0',
     borderRadius: 16,
     padding: 20,
     marginBottom: 12,
-    shadowColor: '#000',
+  },
-    shadowOffset: { width: 0, height: 1 },
+  recordCardDark: {
-    shadowOpacity: 0.06,
+    backgroundColor: '#1F2937',
-    shadowRadius: 8,
-    elevation: 2,
   },
   recordHeader: {
     flexDirection: 'row',