feat: 优化步数柱状图显示，增加背景柱体并调整动画逻辑

components/StepsCard.tsx

@@ -97,18 +97,33 @@ const StepsCard: React.FC<StepsCardProps> = ({
               });
 
               return (
-                <Animated.View
+                <View key={`bar-container-${index}`} style={styles.barContainer}>
-                  key={`bar-${index}`}
+                  {/* 背景柱体 - 始终显示，使用相似色系的淡色 */}
+                  <View
                     style={[
                       styles.chartBar,
                       {
-                      height: data.height || 2, // 最小高度2px
+                        height: 20, // 背景柱体占满整个高度
-                      backgroundColor: isCurrent && isActive ? '#FFC365' : '#FFEBCB',
+                        backgroundColor: isCurrent ? '#FFF4E6' : '#FFF8F0', // 更淡的相似色系
+                      }
+                    ]}
+                  />
+                  
+                  {/* 数据柱体 - 只有当有数据时才显示并执行动画 */}
+                  {isActive && (
+                    <Animated.View
+                      style={[
+                        styles.chartBar,
+                        {
+                          height: data.height,
+                          backgroundColor: isCurrent ? '#FFC365' : '#FFEBCB',
                           transform: [{ scaleY: animatedScale }],
                           opacity: animatedOpacity,
                         }
                       ]}
                     />
+                  )}
+                </View>
               );
             })}
           </View>
@@ -171,10 +186,18 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     paddingHorizontal: 4,
   },
+  barContainer: {
+    width: 4,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    position: 'relative',
+  },
   chartBar: {
     width: 4,
     borderRadius: 1,
-    alignSelf: 'flex-end',
+    position: 'absolute',
+    bottom: 0,
   },
   statsContainer: {
     alignItems: 'flex-start',