be0a8e7393
- 在 CoachScreen 中调整键盘高度计算，移除不必要的 insets.bottom - 更新 Statistics 组件，移除未使用的健康数据相关函数，简化代码 - 修改多个统计卡片，移除不必要的图标属性，提升组件简洁性 - 优化 HealthDataCard 和其他统计卡片的样式，提升视觉一致性 - 更新健康数据获取逻辑，确保数据处理更为准确 - 移除 MoodCard 中的多余元素，简化心情记录展示 - 调整 StressMeter 和其他组件的样式，提升用户体验
78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import { MoodCheckin, getMoodConfig } from '@/services/moodCheckins';
|
|
import dayjs from 'dayjs';
|
|
import React from 'react';
|
|
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
interface MoodCardProps {
|
|
moodCheckin: MoodCheckin | null;
|
|
onPress: () => void;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function MoodCard({ moodCheckin, onPress, isLoading = false }: MoodCardProps) {
|
|
const moodConfig = moodCheckin ? getMoodConfig(moodCheckin.moodType) : null;
|
|
|
|
return (
|
|
<TouchableOpacity onPress={onPress} style={styles.moodCardContent} disabled={isLoading}>
|
|
<Text style={styles.cardTitle}>心情</Text>
|
|
|
|
|
|
{isLoading ? (
|
|
<View style={styles.moodPreview}>
|
|
<Text style={styles.moodLoadingText}>加载中...</Text>
|
|
</View>
|
|
) : moodCheckin ? (
|
|
<View style={styles.moodPreview}>
|
|
<Text style={styles.moodPreviewText}>
|
|
{moodConfig?.label || moodCheckin.moodType}
|
|
</Text>
|
|
<Text style={styles.moodPreviewTime}>
|
|
{dayjs(moodCheckin.createdAt).format('HH:mm')}
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<Text style={styles.moodEmptyText}>点击记录心情</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
moodCardContent: {
|
|
width: '100%',
|
|
},
|
|
|
|
cardTitle: {
|
|
fontSize: 14,
|
|
fontWeight: '800',
|
|
color: '#192126',
|
|
},
|
|
|
|
moodPreview: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginTop: 22,
|
|
},
|
|
moodPreviewText: {
|
|
fontSize: 14,
|
|
color: '#059669',
|
|
fontWeight: '600',
|
|
},
|
|
moodPreviewTime: {
|
|
fontSize: 12,
|
|
color: '#6B7280',
|
|
},
|
|
moodEmptyText: {
|
|
fontSize: 12,
|
|
color: '#9CA3AF',
|
|
fontStyle: 'italic',
|
|
marginTop: 22,
|
|
},
|
|
moodLoadingText: {
|
|
fontSize: 12,
|
|
color: '#9CA3AF',
|
|
fontStyle: 'italic',
|
|
marginTop: 22,
|
|
},
|
|
}); |