feat: 更新心情记录功能和界面
- 调整启动画面中的图片宽度，提升视觉效果 - 移除引导页面相关组件，简化应用结构 - 新增心情统计页面，支持用户查看和分析心情数据 - 优化心情卡片组件，增强用户交互体验 - 更新登录页面标题，提升品牌一致性 - 新增心情日历和编辑功能，支持用户记录和管理心情
This commit is contained in:
richarjiang
287
app/mood-statistics.tsx
Normal file
287
app/mood-statistics.tsx
Normal file
@@ -0,0 +1,287 @@
|
||||
import { MoodHistoryCard } from '@/components/MoodHistoryCard';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import {
|
||||
fetchMoodHistory,
|
||||
fetchMoodStatistics,
|
||||
selectMoodLoading,
|
||||
selectMoodRecords,
|
||||
selectMoodStatistics
|
||||
} from '@/store/moodSlice';
|
||||
import dayjs from 'dayjs';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
export default function MoodStatisticsScreen() {
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
const { isLoggedIn } = useAuthGuard();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
// 从 Redux 获取数据
|
||||
const moodRecords = useAppSelector(selectMoodRecords);
|
||||
const statistics = useAppSelector(selectMoodStatistics);
|
||||
const loading = useAppSelector(selectMoodLoading);
|
||||
|
||||
// 获取最近30天的心情数据
|
||||
const loadMoodData = async () => {
|
||||
if (!isLoggedIn) return;
|
||||
|
||||
try {
|
||||
const endDate = dayjs().format('YYYY-MM-DD');
|
||||
const startDate = dayjs().subtract(30, 'days').format('YYYY-MM-DD');
|
||||
|
||||
// 并行加载历史记录和统计数据
|
||||
await Promise.all([
|
||||
dispatch(fetchMoodHistory({ startDate, endDate })),
|
||||
dispatch(fetchMoodStatistics({ startDate, endDate }))
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('加载心情数据失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadMoodData();
|
||||
}, [isLoggedIn, dispatch]);
|
||||
|
||||
// 将 moodRecords 转换为数组格式
|
||||
const moodCheckins = Object.values(moodRecords).flat();
|
||||
|
||||
// 使用统一的渐变背景色
|
||||
const backgroundGradientColors = [colorTokens.backgroundGradientStart, colorTokens.backgroundGradientEnd] as const;
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<LinearGradient
|
||||
colors={backgroundGradientColors}
|
||||
style={styles.gradientBackground}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
/>
|
||||
<SafeAreaView style={styles.safeArea}>
|
||||
<View style={styles.centerContainer}>
|
||||
<Text style={styles.loginPrompt}>请先登录查看心情统计</Text>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<LinearGradient
|
||||
colors={backgroundGradientColors}
|
||||
style={styles.gradientBackground}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
/>
|
||||
<SafeAreaView style={styles.safeArea}>
|
||||
<ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
|
||||
<Text style={styles.title}>心情统计</Text>
|
||||
|
||||
{loading.history || loading.statistics ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color={colorTokens.primary} />
|
||||
<Text style={styles.loadingText}>加载中...</Text>
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
{/* 统计概览 */}
|
||||
{statistics && (
|
||||
<View style={styles.statsOverview}>
|
||||
<Text style={styles.sectionTitle}>统计概览</Text>
|
||||
<View style={styles.statsGrid}>
|
||||
<View style={styles.statCard}>
|
||||
<Text style={styles.statNumber}>{statistics.totalCheckins}</Text>
|
||||
<Text style={styles.statLabel}>总打卡次数</Text>
|
||||
</View>
|
||||
<View style={styles.statCard}>
|
||||
<Text style={styles.statNumber}>{statistics.averageIntensity.toFixed(1)}</Text>
|
||||
<Text style={styles.statLabel}>平均强度</Text>
|
||||
</View>
|
||||
<View style={styles.statCard}>
|
||||
<Text style={styles.statNumber}>
|
||||
{statistics.mostFrequentMood ? statistics.moodDistribution[statistics.mostFrequentMood] || 0 : 0}
|
||||
</Text>
|
||||
<Text style={styles.statLabel}>最常见心情</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 心情历史记录 */}
|
||||
<MoodHistoryCard
|
||||
moodCheckins={moodCheckins}
|
||||
title="最近30天心情记录"
|
||||
/>
|
||||
|
||||
{/* 心情分布 */}
|
||||
{statistics && (
|
||||
<View style={styles.distributionContainer}>
|
||||
<Text style={styles.sectionTitle}>心情分布</Text>
|
||||
<View style={styles.distributionList}>
|
||||
{Object.entries(statistics.moodDistribution)
|
||||
.sort(([, a], [, b]) => b - a)
|
||||
.map(([moodType, count]) => (
|
||||
<View key={moodType} style={styles.distributionItem}>
|
||||
<Text style={styles.moodType}>{moodType}</Text>
|
||||
<View style={styles.countContainer}>
|
||||
<Text style={styles.count}>{count}</Text>
|
||||
<Text style={styles.percentage}>
|
||||
({((count / statistics.totalCheckins) * 100).toFixed(1)}%)
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
gradientBackground: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
safeArea: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
centerContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
loginPrompt: {
|
||||
fontSize: 16,
|
||||
color: '#666',
|
||||
textAlign: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: '800',
|
||||
color: '#192126',
|
||||
marginTop: 24,
|
||||
marginBottom: 24,
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 60,
|
||||
},
|
||||
loadingText: {
|
||||
fontSize: 16,
|
||||
color: '#666',
|
||||
marginTop: 16,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: '700',
|
||||
color: '#192126',
|
||||
marginBottom: 16,
|
||||
},
|
||||
statsOverview: {
|
||||
marginBottom: 24,
|
||||
},
|
||||
statsGrid: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
gap: 12,
|
||||
},
|
||||
statCard: {
|
||||
flex: 1,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
alignItems: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 3.84,
|
||||
elevation: 5,
|
||||
},
|
||||
statNumber: {
|
||||
fontSize: 24,
|
||||
fontWeight: '800',
|
||||
color: '#192126',
|
||||
marginBottom: 8,
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 14,
|
||||
color: '#6B7280',
|
||||
textAlign: 'center',
|
||||
},
|
||||
distributionContainer: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
marginBottom: 24,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 3.84,
|
||||
elevation: 5,
|
||||
},
|
||||
distributionList: {
|
||||
gap: 12,
|
||||
},
|
||||
distributionItem: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 8,
|
||||
},
|
||||
moodType: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
color: '#192126',
|
||||
},
|
||||
countContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
count: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
},
|
||||
percentage: {
|
||||
fontSize: 14,
|
||||
color: '#6B7280',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user