From ed694f6142526a062f9b95553f452e44dff69895 Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Mon, 1 Sep 2025 18:47:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=AD=A5=E6=95=B0?=
 =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE=E6=98=BE=E7=A4=BA=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E8=83=8C=E6=99=AF=E6=9F=B1=E4=BD=93=E5=B9=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=8A=A8=E7=94=BB=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/StepsCard.tsx | 49 +++++++++++++++++++++++++++++-----------
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/components/StepsCard.tsx b/components/StepsCard.tsx
index cec50e8..8fd0f87 100644
--- a/components/StepsCard.tsx
+++ b/components/StepsCard.tsx
@@ -97,18 +97,33 @@ const StepsCard: React.FC<StepsCardProps> = ({
               });
 
               return (
-                <Animated.View
-                  key={`bar-${index}`}
-                  style={[
-                    styles.chartBar,
-                    {
-                      height: data.height || 2, // 最小高度2px
-                      backgroundColor: isCurrent && isActive ? '#FFC365' : '#FFEBCB',
-                      transform: [{ scaleY: animatedScale }],
-                      opacity: animatedOpacity,
-                    }
-                  ]}
-                />
+                <View key={`bar-container-${index}`} style={styles.barContainer}>
+                  {/* 背景柱体 - 始终显示，使用相似色系的淡色 */}
+                  <View
+                    style={[
+                      styles.chartBar,
+                      {
+                        height: 20, // 背景柱体占满整个高度
+                        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',