5814044cee
- 在 AI 教练聊天界面中添加训练记录分析功能，允许用户基于近期训练记录获取分析建议 - 更新 Redux 状态管理，集成每日步数和卡路里目标 - 在个人信息页面中优化用户头像显示，支持从库中选择头像 - 修改首页布局，添加可拖动的教练徽章，提升用户交互体验 - 更新样式以适应新功能的展示和交互
95 lines
2.0 KiB
TypeScript
95 lines
2.0 KiB
TypeScript
import { ProgressBar } from '@/components/ProgressBar';
|
|
import React from 'react';
|
|
import { Image, StyleSheet, Text, View } from 'react-native';
|
|
|
|
type Level = '初学者' | '中级' | '高级';
|
|
|
|
type PlanCardProps = {
|
|
image: string;
|
|
title: string;
|
|
subtitle: string;
|
|
level?: Level;
|
|
progress: number; // 0 - 1
|
|
};
|
|
|
|
export function PlanCard({ image, title, subtitle, level, progress }: PlanCardProps) {
|
|
return (
|
|
<View style={styles.card}>
|
|
<Image source={{ uri: image }} style={styles.image} />
|
|
<View style={styles.content}>
|
|
{level && (
|
|
<View style={styles.badgeContainer}>
|
|
<View style={styles.badge}>
|
|
<Text style={styles.badgeText}>{level}</Text>
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
<Text style={styles.title}>{title}</Text>
|
|
<Text style={styles.subtitle}>{subtitle}</Text>
|
|
|
|
<View style={styles.progressWrapper}>
|
|
<ProgressBar progress={progress} showLabel={true} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
flexDirection: 'row',
|
|
backgroundColor: '#FFFFFF',
|
|
borderRadius: 28,
|
|
padding: 20,
|
|
marginBottom: 18,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 12,
|
|
elevation: 3,
|
|
},
|
|
image: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 22,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
paddingLeft: 18,
|
|
justifyContent: 'center',
|
|
},
|
|
badgeContainer: {
|
|
position: 'absolute',
|
|
top: -10,
|
|
right: -10,
|
|
},
|
|
badge: {
|
|
backgroundColor: '#192126',
|
|
borderTopRightRadius: 12,
|
|
borderBottomLeftRadius: 12,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 6,
|
|
},
|
|
badgeText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 12,
|
|
fontWeight: '500',
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
color: '#192126',
|
|
fontWeight: '800',
|
|
},
|
|
subtitle: {
|
|
marginTop: 8,
|
|
fontSize: 12,
|
|
color: '#B1B6BD',
|
|
},
|
|
progressWrapper: {
|
|
marginTop: 18,
|
|
},
|
|
});
|
|
|
|
|