feat: 支持饮水记录卡片

components/StepsCard.tsx

@@ -1,13 +1,14 @@
-import React, { useMemo, useRef, useEffect } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import {
+  Animated,
   StyleSheet,
   Text,
   View,
-  ViewStyle,
-  Animated
+  ViewStyle
 } from 'react-native';
 
 import { HourlyStepData } from '@/utils/health';
+import { AnimatedNumber } from './AnimatedNumber';
 // 使用原生View来替代SVG，避免导入问题
 // import Svg, { Rect } from 'react-native-svg';
 
@@ -53,7 +54,7 @@ const StepsCard: React.FC<StepsCardProps> = ({
     if (chartData && chartData.length > 0) {
       // 重置所有动画值
       animatedValues.forEach(animValue => animValue.setValue(0));
-      
+
       // 同时启动所有柱体的弹性动画，有步数的柱体才执行动画
       chartData.forEach((data, index) => {
         if (data.steps > 0) {
@@ -108,7 +109,7 @@ const StepsCard: React.FC<StepsCardProps> = ({
                       }
                     ]}
                   />
-                  
+
                   {/* 数据柱体 - 只有当有数据时才显示并执行动画 */}
                   {isActive && (
                     <Animated.View
@@ -132,9 +133,12 @@ const StepsCard: React.FC<StepsCardProps> = ({
 
       {/* 步数和目标显示 */}
       <View style={styles.statsContainer}>
-        <Text style={styles.stepCount}>
-          {stepCount !== null ? stepCount.toLocaleString() : '——'}
-        </Text>
+        <AnimatedNumber
+          value={stepCount || 0}
+          style={styles.stepCount}
+          format={(v) => stepCount !== null ? `${Math.round(v)}` : '——'}
+          resetToken={stepCount}
+        />
       </View>
     </View>
   );