richard/digital-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化营养记录和卡路里环图组件，增加毛玻璃背景和动画效果

Browse Source
This commit is contained in:
richarjiang
2025-09-04 11:28:31 +08:00
parent 4ae419754a
commit 5e00cb7788
6 changed files with 302 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
components/weight/WeightHistoryCard.tsx
View File

@@ -127,7 +127,7 @@ export function WeightHistoryCard() {
const height = interpolate(
animationProgress.value,
[0, 1],
[40, 200], // 从摘要高度到图表高度
[80, 200], // 从摘要高度到图表高度，适应毛玻璃背景
Extrapolation.CLAMP
);
@@ -308,41 +308,43 @@ export function WeightHistoryCard() {
<Animated.View style={[styles.animationContainer, containerAnimatedStyle]}>
{/* 默认信息显示 - 带动画 */}
<Animated.View style={[styles.summaryInfo, summaryAnimatedStyle]}>
<View style={styles.summaryRow}>
<View style={styles.summaryItem}>
<Text style={styles.summaryLabel}>当前体重</Text>
<Text style={styles.summaryValue}>{userProfile.weight}kg</Text>
</View>
<View style={styles.summaryItem}>
<Text style={styles.summaryLabel}>记录天数</Text>
<Text style={styles.summaryValue}>{sortedHistory.length}天</Text>
</View>
<View style={styles.summaryItem}>
<Text style={styles.summaryLabel}>变化范围</Text>
<Text style={styles.summaryValue}>
{minWeight.toFixed(1)}-{maxWeight.toFixed(1)}
</Text>
</View>
{bmiResult && (
<View style={styles.summaryBackground}>
<View style={styles.summaryRow}>
<View style={styles.summaryItem}>
<Text style={styles.summaryLabel}>BMI</Text>
<View style={styles.bmiValueContainer}>
<Text style={[styles.bmiValue, { color: bmiResult.color }]}>
{bmiResult.value}
</Text>
<TouchableOpacity
onPress={(e) => {
e.stopPropagation();
handleShowBMIModal();
}}
style={styles.bmiInfoButton}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
>
<Ionicons name="information-circle-outline" size={12} color="#9AA3AE" />
</TouchableOpacity>
</View>
<Text style={styles.summaryLabel}>当前体重</Text>
<Text style={styles.summaryValue}>{userProfile.weight}kg</Text>
</View>
)}
<View style={styles.summaryItem}>
<Text style={styles.summaryLabel}>记录天数</Text>
<Text style={styles.summaryValue}>{sortedHistory.length}天</Text>
</View>
<View style={styles.summaryItem}>
<Text style={styles.summaryLabel}>变化范围</Text>
<Text style={styles.summaryValue}>
{minWeight.toFixed(1)}-{maxWeight.toFixed(1)}
</Text>
</View>
{bmiResult && (
<View style={styles.summaryItem}>
<Text style={styles.summaryLabel}>BMI</Text>
<View style={styles.bmiValueContainer}>
<Text style={[styles.bmiValue, { color: bmiResult.color }]}>
{bmiResult.value}
</Text>
<TouchableOpacity
onPress={(e) => {
e.stopPropagation();
handleShowBMIModal();
}}
style={styles.bmiInfoButton}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
>
<Ionicons name="information-circle-outline" size={12} color="#9AA3AE" />
</TouchableOpacity>
</View>
</View>
)}
</View>
</View>
</Animated.View>
@@ -631,13 +633,29 @@ const styles = StyleSheet.create({
animationContainer: {
position: 'relative',
overflow: 'hidden',
minHeight: 50,
minHeight: 80, // 增加最小高度以容纳毛玻璃背景
},
summaryInfo: {
position: 'absolute',
width: '100%',
marginTop: 8,
},
summaryBackground: {
backgroundColor: 'rgba(248, 250, 252, 0.8)', // 毛玻璃背景色
borderRadius: 12,
padding: 12,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.06,
shadowRadius: 3,
elevation: 1,
// 添加边框增强毛玻璃效果
borderWidth: 0.5,
borderColor: 'rgba(255, 255, 255, 0.8)',
},
chartContainer: {
position: 'absolute',
width: '100%',