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-08-21 15:34:47 +08:00
parent b93a863e25
commit a7607e0f74
4 changed files with 656 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
app/(tabs)/statistics.tsx
View File

@@ -1,6 +1,7 @@
import { AnimatedNumber } from '@/components/AnimatedNumber';
import { BMICard } from '@/components/BMICard';
import { FitnessRingsCard } from '@/components/FitnessRingsCard';
import { MoodModal } from '@/components/MoodModal';
import { NutritionRadarCard } from '@/components/NutritionRadarCard';
import { ProgressBar } from '@/components/ProgressBar';
import { StressMeter } from '@/components/StressMeter';
@@ -88,7 +89,7 @@ export default function ExploreScreen() {
const { pushIfAuthedElseLogin, isLoggedIn } = useAuthGuard();
// 使用 dayjs：当月日期与默认选中“今天”
// 使用 dayjs：当月日期与默认选中"今天"
const days = getMonthDaysZh();
const [selectedIndex, setSelectedIndex] = useState(getTodayIndexInMonth());
const tabBarHeight = useBottomTabBarHeight();
@@ -161,11 +162,29 @@ export default function ExploreScreen() {
const [nutritionSummary, setNutritionSummary] = useState<NutritionSummary | null>(null);
const [isNutritionLoading, setIsNutritionLoading] = useState(false);
// 记录最近一次请求的“日期键”，避免旧请求覆盖新结果
// 心情相关状态
const [moodModalVisible, setMoodModalVisible] = useState(false);
const [moodRecords, setMoodRecords] = useState<Array<{ mood: string, date: string, time: string }>>([]);
// 记录最近一次请求的"日期键"，避免旧请求覆盖新结果
const latestRequestKeyRef = useRef<string | null>(null);
const getDateKey = (d: Date) => `${dayjs(d).year()}-${dayjs(d).month() + 1}-${dayjs(d).date()}`;
// 心情保存处理函数
const handleMoodSave = (mood: string, time: string) => {
const today = new Date();
const dateString = `${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日`;
const newRecord = {
mood,
date: dateString,
time
};
setMoodRecords(prev => [newRecord, ...prev]);
setMoodModalVisible(false);
};
const loadHealthData = async (targetDate?: Date) => {
try {
@@ -288,7 +307,6 @@ export default function ExploreScreen() {
}
};
// 使用统一的渐变背景色
const backgroundGradientColors = [colorTokens.backgroundGradientStart, colorTokens.backgroundGradientEnd] as const;
@@ -404,6 +422,26 @@ export default function ExploreScreen() {
showLabel={false}
/>
</FloatingCard>
{/* 心情卡片 */}
<FloatingCard style={[styles.masonryCard, styles.moodCard]} delay={1500}>
<TouchableOpacity onPress={() => setMoodModalVisible(true)} style={styles.moodCardContent}>
<View style={styles.cardHeaderRow}>
<View style={styles.moodIconContainer}>
<Text style={styles.moodIcon}>😊</Text>
</View>
<Text style={styles.cardTitle}>心情</Text>
</View>
<Text style={styles.moodSubtitle}>记录你的每日心情</Text>
{moodRecords.length > 0 ? (
<View style={styles.moodPreview}>
<Text style={styles.moodPreviewText}>今日：{moodRecords[0].mood}</Text>
<Text style={styles.moodPreviewTime}>{moodRecords[0].time}</Text>
</View>
) : (
<Text style={styles.moodEmptyText}>点击记录心情</Text>
)}
</TouchableOpacity>
</FloatingCard>
</View>
{/* 右列 */}
@@ -413,7 +451,6 @@ export default function ExploreScreen() {
weight={userProfile?.weight ? parseFloat(userProfile.weight) : undefined}
height={userProfile?.height ? parseFloat(userProfile.height) : undefined}
style={styles.bmiCardOverride}
// compact={true}
/>
</FloatingCard>
@@ -441,15 +478,19 @@ export default function ExploreScreen() {
<Text style={styles.sleepValue}>——</Text>
)}
</FloatingCard>
</View>
</View>
</ScrollView>
</SafeAreaView>
{/* 心情弹窗 */}
<MoodModal
visible={moodModalVisible}
onClose={() => setMoodModalVisible(false)}
onSave={handleMoodSave}
/>
</View>
);
}
@@ -580,7 +621,6 @@ const styles = StyleSheet.create({
trainingCard: {
backgroundColor: '#EEE9FF',
},
cardTitleSecondary: {
color: '#9AA3AE',
fontSize: 10,
@@ -823,4 +863,49 @@ const styles = StyleSheet.create({
top: 0,
padding: 4,
},
moodCard: {
backgroundColor: '#F0FDF4',
},
moodCardContent: {
width: '100%',
},
moodIconContainer: {
width: 24,
height: 24,
borderRadius: 8,
backgroundColor: '#DCFCE7',
alignItems: 'center',
justifyContent: 'center',
marginRight: 10,
},
moodIcon: {
fontSize: 14,
},
moodSubtitle: {
fontSize: 12,
color: '#6B7280',
marginTop: 4,
marginBottom: 8,
},
moodPreview: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 4,
},
moodPreviewText: {
fontSize: 14,
color: '#059669',
fontWeight: '600',
},
moodPreviewTime: {
fontSize: 12,
color: '#6B7280',
},
moodEmptyText: {
fontSize: 12,
color: '#9CA3AF',
fontStyle: 'italic',
marginTop: 4,
},
});

76
components/MoodCard.tsx Normal file
View File

@@ -0,0 +1,76 @@
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ThemedText } from './ThemedText';
import { ThemedView } from './ThemedView';
interface MoodCardProps {
onPress: () => void;
}
export function MoodCard({ onPress }: MoodCardProps) {
return (
<ThemedView style={styles.container}>
<View style={styles.header}>
<ThemedText style={styles.title}>心情</ThemedText>
<ThemedText style={styles.subtitle}>记录你的每日心情</ThemedText>
</View>
<TouchableOpacity style={styles.content} onPress={onPress}>
<View style={styles.moodIcon}>
<Text style={styles.emoji}>😊</Text>
</View>
<ThemedText style={styles.moodText}>点击记录今日心情</ThemedText>
</TouchableOpacity>
</ThemedView>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
borderRadius: 16,
padding: 16,
marginBottom: 16,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.1,
shadowRadius: 3.84,
elevation: 5,
},
header: {
marginBottom: 12,
},
title: {
fontSize: 18,
fontWeight: '600',
marginBottom: 4,
},
subtitle: {
fontSize: 14,
opacity: 0.6,
},
content: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 8,
},
moodIcon: {
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: '#f0f0f0',
justifyContent: 'center',
alignItems: 'center',
marginRight: 12,
},
emoji: {
fontSize: 20,
},
moodText: {
fontSize: 16,
flex: 1,
},
});

63
components/MoodCardCompact.tsx Normal file
View File

@@ -0,0 +1,63 @@
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
interface MoodCardCompactProps {
onPress: () => void;
}
export function MoodCardCompact({ onPress }: MoodCardCompactProps) {
return (
<TouchableOpacity style={styles.container} onPress={onPress}>
<View style={styles.header}>
<Text style={styles.title}>心情</Text>
</View>
<View style={styles.content}>
<View style={styles.moodIcon}>
<Text style={styles.emoji}>😊</Text>
</View>
<Text style={styles.moodText}>记录今日心情</Text>
</View>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#E8F5E8',
borderRadius: 16,
padding: 16,
minHeight: 100,
},
header: {
marginBottom: 8,
},
title: {
fontSize: 14,
fontWeight: '800',
color: '#192126',
},
content: {
flexDirection: 'row',
alignItems: 'center',
flex: 1,
},
moodIcon: {
width: 32,
height: 32,
borderRadius: 16,
backgroundColor: '#4CAF50',
justifyContent: 'center',
alignItems: 'center',
marginRight: 8,
},
emoji: {
fontSize: 16,
},
moodText: {
fontSize: 12,
color: '#2E7D32',
fontWeight: '600',
flex: 1,
},
});

422
components/MoodModal.tsx Normal file
View File

@@ -0,0 +1,422 @@
import React, { useState } from 'react';
import {
Dimensions,
Modal,
SafeAreaView,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
const { width, height } = Dimensions.get('window');
interface MoodModalProps {
visible: boolean;
onClose: () => void;
onSave: (mood: string, date: string) => void;
}
// 心情日历数据
const generateCalendarData = () => {
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const firstDayOfWeek = new Date(year, month, 1).getDay();
const calendar = [];
const weeks = [];
// 添加空白日期
for (let i = 0; i < firstDayOfWeek; i++) {
weeks.push(null);
}
// 添加实际日期
for (let day = 1; day <= daysInMonth; day++) {
weeks.push(day);
}
// 按周分组
for (let i = 0; i < weeks.length; i += 7) {
calendar.push(weeks.slice(i, i + 7));
}
return { calendar, today: today.getDate(), month: month + 1, year };
};
const moodOptions = [
{ emoji: '😊', label: '开心', color: '#4CAF50' },
{ emoji: '😢', label: '难过', color: '#2196F3' },
{ emoji: '😰', label: '焦虑', color: '#FF9800' },
{ emoji: '😴', label: '疲惫', color: '#9C27B0' },
{ emoji: '😡', label: '愤怒', color: '#F44336' },
{ emoji: '😐', label: '平静', color: '#607D8B' },
];
export function MoodModal({ visible, onClose, onSave }: MoodModalProps) {
const [selectedMood, setSelectedMood] = useState<string>('');
const { calendar, today, month, year } = generateCalendarData();
const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
const handleSave = () => {
if (selectedMood) {
const now = new Date();
const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
onSave(selectedMood, timeString);
onClose();
setSelectedMood('');
}
};
const renderMoodIcon = (day: number | null, isToday: boolean) => {
if (!day) return null;
if (isToday && selectedMood) {
const mood = moodOptions.find(m => m.label === selectedMood);
return (
<View style={[styles.moodIconContainer, { backgroundColor: mood?.color }]}>
<View style={styles.bearIcon}>
<Text style={styles.bearEmoji}>🐻</Text>
</View>
</View>
);
}
return (
<View style={styles.defaultMoodIcon}>
<Text style={styles.defaultMoodEmoji}>😊</Text>
</View>
);
};
return (
<Modal
visible={visible}
animationType="slide"
presentationStyle="pageSheet"
onRequestClose={onClose}
>
<SafeAreaView style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={onClose}>
<Text style={styles.backButton}>←</Text>
</TouchableOpacity>
<Text style={styles.headerTitle}>{year}年{monthNames[month - 1]}</Text>
<TouchableOpacity>
<Text style={styles.nextButton}>→</Text>
</TouchableOpacity>
</View>
<ScrollView style={styles.content}>
{/* 日历视图 */}
<View style={styles.calendar}>
<View style={styles.weekHeader}>
{weekDays.map((day, index) => (
<Text key={index} style={styles.weekDay}>{day}</Text>
))}
</View>
{calendar.map((week, weekIndex) => (
<View key={weekIndex} style={styles.weekRow}>
{week.map((day, dayIndex) => (
<View key={dayIndex} style={styles.dayContainer}>
{day && (
<>
<Text style={[
styles.dayNumber,
day === today && styles.todayNumber
]}>
{day.toString().padStart(2, '0')}
</Text>
{renderMoodIcon(day, day === today)}
</>
)}
</View>
))}
</View>
))}
</View>
{/* 心情选择 */}
<View style={styles.moodSection}>
<Text style={styles.sectionTitle}>选择今日心情</Text>
<View style={styles.moodOptions}>
{moodOptions.map((mood, index) => (
<TouchableOpacity
key={index}
style={[
styles.moodOption,
selectedMood === mood.label && styles.selectedMoodOption
]}
onPress={() => setSelectedMood(mood.label)}
>
<Text style={styles.moodEmoji}>{mood.emoji}</Text>
<Text style={styles.moodLabel}>{mood.label}</Text>
</TouchableOpacity>
))}
</View>
</View>
{/* 近期记录 */}
<View style={styles.recentSection}>
<Text style={styles.sectionTitle}>近期记录</Text>
<Text style={styles.recentDate}>{year}年{month}月{today}日</Text>
{selectedMood && (
<View style={styles.recentRecord}>
<View style={styles.recordIcon}>
<View style={styles.bearIcon}>
<Text style={styles.bearEmoji}>🐻</Text>
</View>
</View>
<Text style={styles.recordMood}>{selectedMood}</Text>
<View style={styles.spacer} />
<Text style={styles.recordTime}>
{new Date().getHours()}:{new Date().getMinutes().toString().padStart(2, '0')}
</Text>
</View>
)}
</View>
</ScrollView>
{/* 保存按钮 */}
<View style={styles.footer}>
<TouchableOpacity
style={[styles.saveButton, !selectedMood && styles.disabledButton]}
onPress={handleSave}
disabled={!selectedMood}
>
<Text style={styles.saveButtonText}>保存心情</Text>
</TouchableOpacity>
</View>
{/* 添加按钮 */}
<TouchableOpacity style={styles.addButton} onPress={handleSave}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</SafeAreaView>
</Modal>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 20,
paddingVertical: 16,
backgroundColor: '#fff',
},
backButton: {
fontSize: 24,
color: '#666',
},
headerTitle: {
fontSize: 20,
fontWeight: '600',
color: '#333',
},
nextButton: {
fontSize: 24,
color: '#666',
},
content: {
flex: 1,
},
calendar: {
backgroundColor: '#fff',
margin: 16,
borderRadius: 16,
padding: 16,
},
weekHeader: {
flexDirection: 'row',
justifyContent: 'space-around',
marginBottom: 16,
},
weekDay: {
fontSize: 14,
color: '#666',
textAlign: 'center',
width: (width - 64) / 7,
},
weekRow: {
flexDirection: 'row',
justifyContent: 'space-around',
marginBottom: 16,
},
dayContainer: {
width: (width - 64) / 7,
alignItems: 'center',
},
dayNumber: {
fontSize: 14,
color: '#999',
marginBottom: 8,
},
todayNumber: {
color: '#333',
fontWeight: '600',
},
moodIconContainer: {
width: 40,
height: 40,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
},
bearIcon: {
width: 24,
height: 24,
borderRadius: 12,
backgroundColor: 'rgba(255,255,255,0.9)',
justifyContent: 'center',
alignItems: 'center',
},
bearEmoji: {
fontSize: 12,
},
defaultMoodIcon: {
width: 40,
height: 40,
borderRadius: 20,
borderWidth: 1,
borderColor: '#ddd',
borderStyle: 'dashed',
justifyContent: 'center',
alignItems: 'center',
},
defaultMoodEmoji: {
fontSize: 16,
opacity: 0.3,
},
moodSection: {
backgroundColor: '#fff',
margin: 16,
marginTop: 0,
borderRadius: 16,
padding: 16,
},
sectionTitle: {
fontSize: 18,
fontWeight: '600',
color: '#333',
marginBottom: 16,
},
moodOptions: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
moodOption: {
width: (width - 80) / 3,
alignItems: 'center',
paddingVertical: 16,
marginBottom: 16,
borderRadius: 12,
backgroundColor: '#f8f8f8',
},
selectedMoodOption: {
backgroundColor: '#e8f5e8',
borderWidth: 2,
borderColor: '#4CAF50',
},
moodEmoji: {
fontSize: 24,
marginBottom: 8,
},
moodLabel: {
fontSize: 14,
color: '#333',
},
recentSection: {
backgroundColor: '#fff',
margin: 16,
marginTop: 0,
borderRadius: 16,
padding: 16,
},
recentDate: {
fontSize: 14,
color: '#999',
marginBottom: 16,
},
recentRecord: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 12,
},
recordIcon: {
width: 48,
height: 48,
borderRadius: 24,
backgroundColor: '#4CAF50',
justifyContent: 'center',
alignItems: 'center',
marginRight: 12,
},
recordMood: {
fontSize: 16,
color: '#333',
fontWeight: '500',
},
spacer: {
flex: 1,
},
recordTime: {
fontSize: 14,
color: '#999',
},
footer: {
padding: 16,
backgroundColor: '#fff',
},
saveButton: {
backgroundColor: '#4CAF50',
borderRadius: 12,
paddingVertical: 16,
alignItems: 'center',
},
disabledButton: {
backgroundColor: '#ccc',
},
saveButtonText: {
color: '#fff',
fontSize: 16,
fontWeight: '600',
},
addButton: {
position: 'absolute',
bottom: 100,
right: 20,
width: 56,
height: 56,
borderRadius: 28,
backgroundColor: '#00C853',
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
addButtonText: {
color: '#fff',
fontSize: 24,
fontWeight: '300',
},
});