Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
5b46104564 | ||
|
|
be0dd750eb | ||
|
|
a47f0fb72e | ||
| a309123b35 | |||
| 83b77615cf | |||
|
|
bca6670390 | ||
|
|
fbe0c92f0f | ||
|
|
08adf0f20d | ||
|
|
18d83091a9 | ||
|
|
01388a5c4f | ||
|
|
518282ecb8 |
2
app.json
2
app.json
@@ -2,7 +2,7 @@
|
||||
"expo": {
|
||||
"name": "Out Live",
|
||||
"slug": "digital-pilates",
|
||||
"version": "1.0.20",
|
||||
"version": "1.1.4",
|
||||
"orientation": "portrait",
|
||||
"scheme": "digitalpilates",
|
||||
"userInterfaceStyle": "light",
|
||||
|
||||
@@ -602,14 +602,14 @@ const styles = StyleSheet.create({
|
||||
marginBottom: 26,
|
||||
},
|
||||
title: {
|
||||
fontSize: 32,
|
||||
fontSize: 24,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 1,
|
||||
fontFamily: 'AliBold'
|
||||
},
|
||||
subtitle: {
|
||||
marginTop: 6,
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
opacity: 0.8,
|
||||
fontFamily: 'AliRegular'
|
||||
@@ -619,8 +619,8 @@ const styles = StyleSheet.create({
|
||||
alignItems: 'center',
|
||||
},
|
||||
joinButtonGlass: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 16,
|
||||
minWidth: 70,
|
||||
alignItems: 'center',
|
||||
@@ -629,7 +629,7 @@ const styles = StyleSheet.create({
|
||||
borderColor: 'rgba(255,255,255,0.45)',
|
||||
},
|
||||
joinButtonLabel: {
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
color: '#0f1528',
|
||||
letterSpacing: 0.5,
|
||||
@@ -639,8 +639,8 @@ const styles = StyleSheet.create({
|
||||
backgroundColor: 'rgba(255,255,255,0.7)',
|
||||
},
|
||||
createButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
|
||||
@@ -5,6 +5,7 @@ import { TakenMedicationsStack } from '@/components/medication/TakenMedicationsS
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
import { IconSymbol } from '@/components/ui/IconSymbol';
|
||||
import { MedicalDisclaimerSheet } from '@/components/ui/MedicalDisclaimerSheet';
|
||||
import { MedicationAiSummaryInfoSheet } from '@/components/ui/MedicationAiSummaryInfoSheet';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useMembershipModal } from '@/contexts/MembershipModalContext';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
@@ -59,6 +60,7 @@ export default function MedicationsScreen() {
|
||||
const [isCelebrationVisible, setIsCelebrationVisible] = useState(false);
|
||||
const [disclaimerVisible, setDisclaimerVisible] = useState(false);
|
||||
const [pendingAction, setPendingAction] = useState<'manual' | null>(null);
|
||||
const [aiSummaryInfoVisible, setAiSummaryInfoVisible] = useState(false);
|
||||
|
||||
// 从 Redux 获取数据
|
||||
const selectedKey = selectedDate.format('YYYY-MM-DD');
|
||||
@@ -115,6 +117,33 @@ export default function MedicationsScreen() {
|
||||
setPendingAction(null);
|
||||
}, []);
|
||||
|
||||
const handleOpenAiSummary = useCallback(async () => {
|
||||
// 先检查登录状态
|
||||
const isLoggedIn = await ensureLoggedIn();
|
||||
if (!isLoggedIn) return;
|
||||
|
||||
// 检查 VIP 权限
|
||||
const access = checkServiceAccess();
|
||||
if (!access.canUseService) {
|
||||
// 非会员显示介绍弹窗
|
||||
setAiSummaryInfoVisible(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// 会员直接跳转到 AI 总结页面
|
||||
router.push('/medications/ai-summary');
|
||||
}, [checkServiceAccess, ensureLoggedIn]);
|
||||
|
||||
const handleAiSummaryInfoConfirm = useCallback(() => {
|
||||
setAiSummaryInfoVisible(false);
|
||||
// 点击"我要订阅"后,弹出会员订阅弹窗
|
||||
openMembershipModal();
|
||||
}, [openMembershipModal]);
|
||||
|
||||
const handleAiSummaryInfoClose = useCallback(() => {
|
||||
setAiSummaryInfoVisible(false);
|
||||
}, []);
|
||||
|
||||
const handleOpenMedicationManagement = useCallback(() => {
|
||||
router.push('/medications/manage-medications');
|
||||
}, []);
|
||||
@@ -285,31 +314,59 @@ export default function MedicationsScreen() {
|
||||
</ThemedText>
|
||||
</View>
|
||||
<View style={styles.headerActions}>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={handleOpenMedicationManagement}
|
||||
>
|
||||
{isLiquidGlassAvailable() ? (
|
||||
{isLiquidGlassAvailable() ? (
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={handleOpenAiSummary}
|
||||
>
|
||||
<GlassView
|
||||
style={styles.headerAddButton}
|
||||
glassEffectStyle="clear"
|
||||
tintColor="rgba(255, 255, 255, 0.3)"
|
||||
tintColor="rgba(255, 255, 255, 0.36)"
|
||||
isInteractive={true}
|
||||
>
|
||||
<IconSymbol name="pills.fill" size={18} color="#333" />
|
||||
<IconSymbol name="sparkles" size={18} color="#333" />
|
||||
</GlassView>
|
||||
) : (
|
||||
<View style={[styles.headerAddButton, styles.fallbackAddButton]}>
|
||||
<IconSymbol name="pills.fill" size={18} color="#333" />
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={handleOpenAiSummary}
|
||||
style={[styles.headerAddButton, styles.fallbackAddButton]}
|
||||
>
|
||||
<IconSymbol name="sparkles" size={18} color="#333" />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={handleAddMedication}
|
||||
>
|
||||
{isLiquidGlassAvailable() ? (
|
||||
{isLiquidGlassAvailable() ? (
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={handleOpenMedicationManagement}
|
||||
>
|
||||
<GlassView
|
||||
style={styles.headerAddButton}
|
||||
glassEffectStyle="clear"
|
||||
tintColor="rgba(255, 255, 255, 0.3)"
|
||||
isInteractive={true}
|
||||
>
|
||||
<IconSymbol name="pills.fill" size={18} color="#333" />
|
||||
</GlassView>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={handleOpenMedicationManagement}
|
||||
style={[styles.headerAddButton, styles.fallbackAddButton]}
|
||||
>
|
||||
<IconSymbol name="pills.fill" size={18} color="#333" />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
{isLiquidGlassAvailable() ? (
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={handleAddMedication}
|
||||
>
|
||||
<GlassView
|
||||
style={styles.headerAddButton}
|
||||
glassEffectStyle="clear"
|
||||
@@ -318,12 +375,16 @@ export default function MedicationsScreen() {
|
||||
>
|
||||
<IconSymbol name="plus" size={18} color="#333" />
|
||||
</GlassView>
|
||||
) : (
|
||||
<View style={[styles.headerAddButton, styles.fallbackAddButton]}>
|
||||
<IconSymbol name="plus" size={18} color="#333" />
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={handleAddMedication}
|
||||
style={[styles.headerAddButton, styles.fallbackAddButton]}
|
||||
>
|
||||
<IconSymbol name="plus" size={18} color="#333" />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -430,6 +491,13 @@ export default function MedicationsScreen() {
|
||||
onClose={handleDisclaimerClose}
|
||||
onConfirm={handleDisclaimerConfirm}
|
||||
/>
|
||||
|
||||
{/* AI 用药总结介绍弹窗 */}
|
||||
<MedicationAiSummaryInfoSheet
|
||||
visible={aiSummaryInfoVisible}
|
||||
onClose={handleAiSummaryInfoClose}
|
||||
onConfirm={handleAiSummaryInfoConfirm}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -498,12 +566,14 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 30,
|
||||
},
|
||||
greeting: {
|
||||
fontSize: 24,
|
||||
fontSize: 20,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
welcome: {
|
||||
marginTop: 6,
|
||||
fontSize: 14,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
sectionSpacing: {
|
||||
gap: 16,
|
||||
@@ -514,10 +584,12 @@ const styles = StyleSheet.create({
|
||||
sectionTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
sectionHeader: {
|
||||
fontSize: 20,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
segmentedControl: {
|
||||
flexDirection: 'row',
|
||||
@@ -537,6 +609,7 @@ const styles = StyleSheet.create({
|
||||
segmentLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
segmentBadge: {
|
||||
minWidth: 24,
|
||||
@@ -549,6 +622,7 @@ const styles = StyleSheet.create({
|
||||
segmentBadgeText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
emptyState: {
|
||||
alignItems: 'center',
|
||||
@@ -566,11 +640,13 @@ const styles = StyleSheet.create({
|
||||
textAlign: 'center',
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
emptySubtitle: {
|
||||
textAlign: 'center',
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
primaryButton: {
|
||||
marginTop: 8,
|
||||
@@ -584,6 +660,7 @@ const styles = StyleSheet.create({
|
||||
primaryButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
cardsWrapper: {
|
||||
gap: 16,
|
||||
@@ -597,5 +674,6 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
loadingText: {
|
||||
fontSize: 14,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -5,10 +5,13 @@ import { palette } from '@/constants/Colors';
|
||||
import { ROUTES } from '@/constants/Routes';
|
||||
import { getTabBarBottomPadding } from '@/constants/TabBar';
|
||||
import { useMembershipModal } from '@/contexts/MembershipModalContext';
|
||||
import { useVersionCheck } from '@/contexts/VersionCheckContext';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import type { BadgeDto } from '@/services/badges';
|
||||
import { reportBadgeShowcaseDisplayed } from '@/services/badges';
|
||||
import { updateUser, type UserLanguage } from '@/services/users';
|
||||
import { getCurrentAppVersion } from '@/services/version';
|
||||
import { fetchAvailableBadges, selectBadgeCounts, selectBadgePreview, selectSortedBadges } from '@/store/badgesSlice';
|
||||
import { selectActiveMembershipPlanName } from '@/store/membershipSlice';
|
||||
import { DEFAULT_MEMBER_NAME, fetchActivityHistory, fetchMyProfile } from '@/store/userSlice';
|
||||
@@ -65,6 +68,7 @@ export default function PersonalScreen() {
|
||||
const [languageModalVisible, setLanguageModalVisible] = useState(false);
|
||||
const [isSwitchingLanguage, setIsSwitchingLanguage] = useState(false);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const { checkForUpdate, isChecking: isCheckingVersion, updateInfo } = useVersionCheck();
|
||||
|
||||
const languageOptions = useMemo<LanguageOption[]>(() => ([
|
||||
{
|
||||
@@ -81,6 +85,16 @@ export default function PersonalScreen() {
|
||||
|
||||
const activeLanguageCode = getNormalizedLanguage(i18n.language);
|
||||
const activeLanguageLabel = languageOptions.find((option) => option.code === activeLanguageCode)?.label || '';
|
||||
const currentAppVersion = useMemo(() => getCurrentAppVersion(), []);
|
||||
const versionRightText = useMemo(() => {
|
||||
if (isCheckingVersion) {
|
||||
return t('personal.versionCheck.checking');
|
||||
}
|
||||
if (updateInfo?.needsUpdate) {
|
||||
return t('personal.versionCheck.updateBadge', { version: updateInfo.latestVersion });
|
||||
}
|
||||
return `v${currentAppVersion}`;
|
||||
}, [currentAppVersion, isCheckingVersion, t, updateInfo?.latestVersion, updateInfo?.needsUpdate]);
|
||||
|
||||
const handleLanguageSelect = useCallback(async (language: AppLanguage) => {
|
||||
setLanguageModalVisible(false);
|
||||
@@ -89,13 +103,33 @@ export default function PersonalScreen() {
|
||||
}
|
||||
try {
|
||||
setIsSwitchingLanguage(true);
|
||||
|
||||
// 将 AppLanguage ('zh' | 'en') 映射到 UserLanguage ('zh-CN' | 'en-US')
|
||||
const languageMap: Record<AppLanguage, UserLanguage> = {
|
||||
'zh': 'zh-CN',
|
||||
'en': 'en-US',
|
||||
};
|
||||
const userLanguage = languageMap[language];
|
||||
|
||||
// 先切换本地语言
|
||||
await changeAppLanguage(language);
|
||||
|
||||
// 如果用户已登录,同步更新服务器语言设置
|
||||
if (isLoggedIn) {
|
||||
try {
|
||||
await updateUser({ language: userLanguage });
|
||||
log.info('语言设置已同步到服务器', { language: userLanguage });
|
||||
} catch (error) {
|
||||
log.warn('同步语言设置到服务器失败', error);
|
||||
// 服务器更新失败不影响本地语言切换,静默处理
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
log.warn('语言切换失败', error);
|
||||
} finally {
|
||||
setIsSwitchingLanguage(false);
|
||||
}
|
||||
}, [activeLanguageCode, isSwitchingLanguage]);
|
||||
}, [activeLanguageCode, isSwitchingLanguage, isLoggedIn]);
|
||||
|
||||
// 推送通知设置仅在独立页面管理
|
||||
|
||||
@@ -635,6 +669,19 @@ export default function PersonalScreen() {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: t('personal.versionCheck.sectionTitle'),
|
||||
items: [
|
||||
{
|
||||
icon: 'cloud-download-outline' as React.ComponentProps<typeof Ionicons>['name'],
|
||||
title: t('personal.versionCheck.menuTitle'),
|
||||
onPress: () => {
|
||||
void checkForUpdate({ manual: true });
|
||||
},
|
||||
rightText: versionRightText,
|
||||
},
|
||||
],
|
||||
},
|
||||
// 开发者section(需要连续点击三次用户名激活)
|
||||
...(showDeveloperSection ? [{
|
||||
title: t('personal.sections.developer'),
|
||||
@@ -981,16 +1028,20 @@ const styles = StyleSheet.create({
|
||||
fontWeight: 'bold',
|
||||
color: '#2C3E50',
|
||||
marginBottom: 4,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
userRole: {
|
||||
fontSize: 14,
|
||||
color: '#9370DB',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliBold',
|
||||
|
||||
},
|
||||
userMemberNumber: {
|
||||
fontSize: 10,
|
||||
color: '#6C757D',
|
||||
marginTop: 4,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
aiUsageContainer: {
|
||||
flexDirection: 'row',
|
||||
@@ -1002,6 +1053,7 @@ const styles = StyleSheet.create({
|
||||
color: '#9370DB',
|
||||
marginLeft: 2,
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
editButton: {
|
||||
backgroundColor: '#9370DB',
|
||||
@@ -1020,6 +1072,7 @@ const styles = StyleSheet.create({
|
||||
color: 'white',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
editButtonTextGlass: {
|
||||
color: 'rgba(147, 112, 219, 1)',
|
||||
@@ -1041,11 +1094,13 @@ const styles = StyleSheet.create({
|
||||
fontWeight: 'bold',
|
||||
color: '#9370DB',
|
||||
marginBottom: 4,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 12,
|
||||
color: '#6C757D',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
badgesRowCard: {
|
||||
flexDirection: 'row',
|
||||
@@ -1065,6 +1120,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#111827',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
badgesRowContent: {
|
||||
flexDirection: 'row',
|
||||
@@ -1103,6 +1159,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: '#475467',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
badgeCompactOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
@@ -1122,11 +1179,14 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
color: '#5B21B6',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
badgesRowEmpty: {
|
||||
fontSize: 13,
|
||||
color: '#6B7280',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliBold',
|
||||
|
||||
},
|
||||
// 菜单项
|
||||
menuItem: {
|
||||
@@ -1151,6 +1211,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 13,
|
||||
color: '#6C757D',
|
||||
marginRight: 6,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
iconContainer: {
|
||||
width: 32,
|
||||
@@ -1179,6 +1240,7 @@ const styles = StyleSheet.create({
|
||||
fontWeight: 'bold',
|
||||
color: '#2C3E50',
|
||||
marginLeft: 4,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
languageModalOverlay: {
|
||||
flex: 1,
|
||||
@@ -1204,11 +1266,13 @@ const styles = StyleSheet.create({
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#2C3E50',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
languageModalSubtitle: {
|
||||
fontSize: 13,
|
||||
color: '#6C757D',
|
||||
marginBottom: 4,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
languageOption: {
|
||||
flexDirection: 'row',
|
||||
@@ -1233,11 +1297,13 @@ const styles = StyleSheet.create({
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#2C3E50',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
languageOptionDescription: {
|
||||
fontSize: 12,
|
||||
color: '#6C757D',
|
||||
marginTop: 4,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
languageModalClose: {
|
||||
marginTop: 4,
|
||||
@@ -1247,5 +1313,6 @@ const styles = StyleSheet.create({
|
||||
fontSize: 15,
|
||||
fontWeight: '500',
|
||||
color: '#9370DB',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -14,17 +14,19 @@ import { WorkoutSummaryCard } from '@/components/WorkoutSummaryCard';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import { BackgroundTaskManager } from '@/services/backgroundTaskManagerV2';
|
||||
import { syncHealthKitToServer } from '@/services/healthKitSync';
|
||||
import { setHealthData } from '@/store/healthSlice';
|
||||
import { fetchDailyMoodCheckins, selectLatestMoodRecordByDate } from '@/store/moodSlice';
|
||||
import { updateUserProfile } from '@/store/userSlice';
|
||||
import { fetchTodayWaterStats } from '@/store/waterSlice';
|
||||
import { getMonthDaysZh, getTodayIndexInMonth } from '@/utils/date';
|
||||
import { fetchHealthDataForDate, testHRVDataFetch } from '@/utils/health';
|
||||
import { fetchHealthDataForDate } from '@/utils/health';
|
||||
import { logger } from '@/utils/logger';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import dayjs from 'dayjs';
|
||||
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { debounce } from 'lodash';
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@@ -63,8 +65,8 @@ export default function ExploreScreen() {
|
||||
const stepGoal = useAppSelector((s) => s.user.profile?.dailyStepsGoal) ?? 2000;
|
||||
const userProfile = useAppSelector((s) => s.user.profile);
|
||||
|
||||
const { pushIfAuthedElseLogin, isLoggedIn } = useAuthGuard();
|
||||
|
||||
const { pushIfAuthedElseLogin, isLoggedIn, ensureLoggedIn } = useAuthGuard();
|
||||
const router = useRouter();
|
||||
|
||||
// 使用 dayjs:当月日期与默认选中"今天"
|
||||
const [selectedIndex, setSelectedIndex] = useState(getTodayIndexInMonth());
|
||||
@@ -80,7 +82,11 @@ export default function ExploreScreen() {
|
||||
return dayjs(currentSelectedDate).format('YYYY-MM-DD');
|
||||
}, [currentSelectedDate]);
|
||||
|
||||
|
||||
const handleOpenGallery = React.useCallback(async () => {
|
||||
const ok = await ensureLoggedIn();
|
||||
if (!ok) return;
|
||||
router.push('/gallery');
|
||||
}, [ensureLoggedIn, router]);
|
||||
|
||||
// 用于触发动画重置的 token(当日期或数据变化时更新)
|
||||
const [animToken, setAnimToken] = useState(0);
|
||||
@@ -384,42 +390,41 @@ export default function ExploreScreen() {
|
||||
{/* 顶部信息栏 */}
|
||||
<View style={styles.headerContainer}>
|
||||
<View style={styles.headerContent}>
|
||||
{/* 左边logo */}
|
||||
<Image
|
||||
source={require('@/assets/machine.png')}
|
||||
style={styles.logoImage}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
<View style={styles.headerLeft}>
|
||||
<Image
|
||||
source={require('@/assets/machine.png')}
|
||||
style={styles.logoImage}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
|
||||
{/* 右边文字区域 */}
|
||||
<View style={styles.headerTextContainer}>
|
||||
<Text style={styles.headerTitle}>{t('statistics.title')}</Text>
|
||||
{/* 右边文字区域 */}
|
||||
<View style={styles.headerTextContainer}>
|
||||
<Text style={styles.headerTitle}>{t('statistics.title')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 开发环境调试按钮 */}
|
||||
{__DEV__ && (
|
||||
<View style={styles.debugButtonsContainer}>
|
||||
<TouchableOpacity
|
||||
style={styles.debugButton}
|
||||
onPress={async () => {
|
||||
console.log('🔧 Manual background task test...');
|
||||
await BackgroundTaskManager.getInstance().triggerTaskForTesting();
|
||||
}}
|
||||
>
|
||||
<Text style={styles.debugButtonText}>🔧</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.headerActions}>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.85}
|
||||
onPress={handleOpenGallery}
|
||||
>
|
||||
{isLiquidGlassAvailable() ? (
|
||||
<GlassView
|
||||
style={styles.liquidGlassButton}
|
||||
glassEffectStyle="regular"
|
||||
tintColor="rgba(255, 255, 255, 0.3)"
|
||||
isInteractive={true}
|
||||
>
|
||||
<Ionicons name="sparkles-outline" size={18} color="#0F172A" />
|
||||
</GlassView>
|
||||
) : (
|
||||
<View style={[styles.liquidGlassButton, styles.liquidGlassFallback]}>
|
||||
<Ionicons name="sparkles-outline" size={18} color="#0F172A" />
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.debugButton, styles.hrvTestButton]}
|
||||
onPress={async () => {
|
||||
console.log('🫀 Testing HRV data fetch...');
|
||||
await testHRVDataFetch();
|
||||
}}
|
||||
>
|
||||
<Text style={styles.debugButtonText}>🫀</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -524,6 +529,7 @@ export default function ExploreScreen() {
|
||||
{/* 血氧饱和度卡片 */}
|
||||
<FloatingCard style={styles.masonryCard}>
|
||||
<OxygenSaturationCard
|
||||
selectedDate={currentSelectedDate}
|
||||
style={styles.basalMetabolismCardOverride}
|
||||
/>
|
||||
</FloatingCard>
|
||||
@@ -536,6 +542,7 @@ export default function ExploreScreen() {
|
||||
{/* 围度数据卡片 - 占满底部一行 */}
|
||||
<CircumferenceCard style={styles.circumferenceCard} />
|
||||
</ScrollView>
|
||||
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -584,6 +591,13 @@ const styles = StyleSheet.create({
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 12,
|
||||
},
|
||||
headerLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
},
|
||||
logoImage: {
|
||||
width: 28,
|
||||
@@ -598,7 +612,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#192126',
|
||||
fontFamily: 'AliRegular'
|
||||
fontFamily: 'AliBold'
|
||||
},
|
||||
debugButtonsContainer: {
|
||||
flexDirection: 'row',
|
||||
@@ -625,6 +639,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
debugButtonText: {
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
metricsRow: {
|
||||
flexDirection: 'row',
|
||||
@@ -658,13 +673,15 @@ const styles = StyleSheet.create({
|
||||
fontSize: 18,
|
||||
lineHeight: 18,
|
||||
fontWeight: '600',
|
||||
textAlignVertical: 'bottom'
|
||||
textAlignVertical: 'bottom',
|
||||
fontFamily: 'AliBold'
|
||||
},
|
||||
caloriesUnit: {
|
||||
color: '#515558ff',
|
||||
fontSize: 12,
|
||||
marginLeft: 4,
|
||||
lineHeight: 18,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
trainingContent: {
|
||||
marginTop: 8,
|
||||
@@ -698,6 +715,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
color: '#8B74F3',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
cyclingHeader: {
|
||||
flexDirection: 'row',
|
||||
@@ -717,6 +735,7 @@ const styles = StyleSheet.create({
|
||||
color: '#FFFFFF',
|
||||
fontSize: 20,
|
||||
fontWeight: '800',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
mapArea: {
|
||||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||||
@@ -756,6 +775,7 @@ const styles = StyleSheet.create({
|
||||
cardTitle: {
|
||||
fontSize: 14,
|
||||
color: '#192126',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
heartCard: {
|
||||
backgroundColor: '#FFE5E5',
|
||||
@@ -776,12 +796,14 @@ const styles = StyleSheet.create({
|
||||
alignSelf: 'flex-end',
|
||||
color: '#5B5B5B',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
stepsValue: {
|
||||
fontSize: 14,
|
||||
color: '#7A6A42',
|
||||
fontWeight: '700',
|
||||
marginBottom: 8,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
errorContainer: {
|
||||
flexDirection: 'row',
|
||||
@@ -797,6 +819,7 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '600',
|
||||
marginLeft: 8,
|
||||
flex: 1,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
retryButton: {
|
||||
padding: 4,
|
||||
@@ -811,11 +834,13 @@ const styles = StyleSheet.create({
|
||||
viewMoreText: {
|
||||
fontSize: 14,
|
||||
color: '#192126',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
viewMoreIcon: {
|
||||
fontSize: 16,
|
||||
color: '#192126',
|
||||
marginLeft: 4,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
stressCardRow: {
|
||||
flexDirection: 'row',
|
||||
@@ -886,6 +911,7 @@ const styles = StyleSheet.create({
|
||||
color: '#0369A1',
|
||||
fontWeight: '800',
|
||||
marginTop: 8,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
addWeightButton: {
|
||||
position: 'absolute',
|
||||
@@ -906,6 +932,54 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '700',
|
||||
color: '#192126',
|
||||
textAlign: 'left',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
headerActions: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
reportButton: {
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
paddingHorizontal: 12,
|
||||
backgroundColor: '#F6F7FB',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
reportIconWrapper: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
reportButtonLabel: {
|
||||
fontSize: 14,
|
||||
fontFamily: 'AliBold',
|
||||
color: '#0F172A',
|
||||
},
|
||||
// Liquid Glass 风格按钮
|
||||
liquidGlassButton: {
|
||||
height: 40,
|
||||
width: 40,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
liquidGlassFallback: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.6)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.8)',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
|
||||
|
||||
|
||||
@@ -32,6 +32,7 @@ import { AppState, AppStateStatus } from 'react-native';
|
||||
import { DialogProvider } from '@/components/ui/DialogProvider';
|
||||
import { MembershipModalProvider } from '@/contexts/MembershipModalContext';
|
||||
import { ToastProvider } from '@/contexts/ToastContext';
|
||||
import { VersionCheckProvider } from '@/contexts/VersionCheckContext';
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import { STORAGE_KEYS, setUnauthorizedHandler } from '@/services/api';
|
||||
import { BackgroundTaskManager } from '@/services/backgroundTaskManagerV2';
|
||||
@@ -524,30 +525,32 @@ export default function RootLayout() {
|
||||
<Provider store={store}>
|
||||
<Bootstrapper>
|
||||
<ToastProvider>
|
||||
<ThemeProvider value={DefaultTheme}>
|
||||
<Stack screenOptions={{ headerShown: false }}>
|
||||
<Stack.Screen name="onboarding" />
|
||||
<Stack.Screen name="(tabs)" />
|
||||
<Stack.Screen name="profile/edit" />
|
||||
<Stack.Screen name="fasting/[planId]" options={{ headerShown: false }} />
|
||||
<VersionCheckProvider>
|
||||
<ThemeProvider value={DefaultTheme}>
|
||||
<Stack screenOptions={{ headerShown: false }}>
|
||||
<Stack.Screen name="onboarding" />
|
||||
<Stack.Screen name="(tabs)" />
|
||||
<Stack.Screen name="profile/edit" />
|
||||
<Stack.Screen name="fasting/[planId]" options={{ headerShown: false }} />
|
||||
|
||||
<Stack.Screen name="auth/login" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="legal/user-agreement" options={{ headerShown: true, title: '用户协议' }} />
|
||||
<Stack.Screen name="legal/privacy-policy" options={{ headerShown: true, title: '隐私政策' }} />
|
||||
<Stack.Screen name="article/[id]" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="workout/notification-settings" options={{ headerShown: false }} />
|
||||
<Stack.Screen
|
||||
name="health-data-permissions"
|
||||
options={{ headerShown: false }}
|
||||
/>
|
||||
<Stack.Screen name="medications/ai-camera" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="medications/ai-progress" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="badges/index" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="settings/tab-bar-config" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="+not-found" />
|
||||
</Stack>
|
||||
<StatusBar style="dark" />
|
||||
</ThemeProvider>
|
||||
<Stack.Screen name="auth/login" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="legal/user-agreement" options={{ headerShown: true, title: '用户协议' }} />
|
||||
<Stack.Screen name="legal/privacy-policy" options={{ headerShown: true, title: '隐私政策' }} />
|
||||
<Stack.Screen name="article/[id]" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="workout/notification-settings" options={{ headerShown: false }} />
|
||||
<Stack.Screen
|
||||
name="health-data-permissions"
|
||||
options={{ headerShown: false }}
|
||||
/>
|
||||
<Stack.Screen name="medications/ai-camera" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="medications/ai-progress" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="badges/index" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="settings/tab-bar-config" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="+not-found" />
|
||||
</Stack>
|
||||
<StatusBar style="dark" />
|
||||
</ThemeProvider>
|
||||
</VersionCheckProvider>
|
||||
</ToastProvider>
|
||||
</Bootstrapper>
|
||||
</Provider>
|
||||
|
||||
@@ -13,6 +13,7 @@ import { PRIVACY_POLICY_URL, USER_AGREEMENT_URL } from '@/constants/Agree';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useAppDispatch } from '@/hooks/redux';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { fetchMyProfile, login } from '@/store/userSlice';
|
||||
import Toast from 'react-native-toast-message';
|
||||
|
||||
@@ -23,6 +24,7 @@ export default function LoginScreen() {
|
||||
const color = Colors[scheme];
|
||||
const pageBackground = scheme === 'light' ? color.pageBackgroundEmphasis : color.background;
|
||||
const dispatch = useAppDispatch();
|
||||
const { t } = useI18n();
|
||||
const AnimatedLinear = useMemo(() => Animated.createAnimatedComponent(LinearGradient), []);
|
||||
|
||||
// 背景动效:轻微平移/旋转与呼吸动画
|
||||
@@ -79,12 +81,12 @@ export default function LoginScreen() {
|
||||
const guardAgreement = useCallback((action: () => void) => {
|
||||
if (!hasAgreed) {
|
||||
Alert.alert(
|
||||
'请先阅读并同意',
|
||||
'继续登录前,请阅读并勾选《隐私政策》和《用户协议》。点击“同意并继续”将默认勾选并继续登录。',
|
||||
t('login.agreement.alert.title'),
|
||||
t('login.agreement.alert.message'),
|
||||
[
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{ text: t('login.agreement.alert.cancel'), style: 'cancel' },
|
||||
{
|
||||
text: '同意并继续',
|
||||
text: t('login.agreement.alert.confirm'),
|
||||
onPress: () => {
|
||||
setHasAgreed(true);
|
||||
setTimeout(() => action(), 0);
|
||||
@@ -96,7 +98,7 @@ export default function LoginScreen() {
|
||||
return;
|
||||
}
|
||||
action();
|
||||
}, [hasAgreed]);
|
||||
}, [hasAgreed, t]);
|
||||
|
||||
const onAppleLogin = useCallback(async () => {
|
||||
if (!appleAvailable) return;
|
||||
@@ -110,7 +112,7 @@ export default function LoginScreen() {
|
||||
});
|
||||
const identityToken = (credential as any)?.identityToken;
|
||||
if (!identityToken || typeof identityToken !== 'string') {
|
||||
throw new Error('未获取到 Apple 身份令牌');
|
||||
throw new Error(t('login.errors.appleIdentityTokenMissing'));
|
||||
}
|
||||
await dispatch(login({ appleIdentityToken: identityToken })).unwrap();
|
||||
|
||||
@@ -118,7 +120,7 @@ export default function LoginScreen() {
|
||||
await dispatch(fetchMyProfile())
|
||||
|
||||
Toast.show({
|
||||
text1: '登录成功',
|
||||
text1: t('login.success.loginSuccess'),
|
||||
type: 'success',
|
||||
});
|
||||
// 登录成功后处理重定向
|
||||
@@ -145,12 +147,12 @@ export default function LoginScreen() {
|
||||
console.log('err.code', err.code);
|
||||
|
||||
if (err?.code === 'ERR_CANCELED' || err?.code === 'ERR_REQUEST_CANCELED') return;
|
||||
const message = err?.message || '登录失败,请稍后再试';
|
||||
Alert.alert('登录失败', message);
|
||||
const message = err?.message || t('login.errors.loginFailed');
|
||||
Alert.alert(t('login.errors.loginFailedTitle'), message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [appleAvailable, router, searchParams?.redirectParams, searchParams?.redirectTo]);
|
||||
}, [appleAvailable, router, searchParams?.redirectParams, searchParams?.redirectTo, dispatch, t]);
|
||||
|
||||
|
||||
// 登录按钮不再因未勾选协议而禁用,仅在加载中禁用
|
||||
@@ -244,14 +246,14 @@ export default function LoginScreen() {
|
||||
<Ionicons name="chevron-back" size={24} color={scheme === 'dark' ? '#ECEDEE' : '#192126'} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
<Text style={[styles.headerTitle, { color: color.text }]}>登录</Text>
|
||||
<Text style={[styles.headerTitle, { color: color.text }]}>{t('login.title')}</Text>
|
||||
<View style={{ width: 32 }} />
|
||||
</View>
|
||||
|
||||
<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
|
||||
<View style={styles.headerWrap}>
|
||||
<ThemedText style={[styles.title, { color: color.text }]}>Out Live</ThemedText>
|
||||
<ThemedText style={[styles.subtitle, { color: color.textMuted }]}>健康生活,自律让我更自由</ThemedText>
|
||||
<ThemedText style={[styles.subtitle, { color: color.textMuted }]}>{t('login.subtitle')}</ThemedText>
|
||||
</View>
|
||||
|
||||
{/* Apple 登录 */}
|
||||
@@ -276,12 +278,12 @@ export default function LoginScreen() {
|
||||
color="#FFFFFF"
|
||||
style={{ marginRight: 10 }}
|
||||
/>
|
||||
<Text style={styles.appleText}>登录中...</Text>
|
||||
<Text style={styles.appleText}>{t('login.loggingIn')}</Text>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="logo-apple" size={22} color="#FFFFFF" style={{ marginRight: 10 }} />
|
||||
<Text style={styles.appleText}>使用 Apple 登录</Text>
|
||||
<Text style={styles.appleText}>{t('login.appleLogin')}</Text>
|
||||
</>
|
||||
)}
|
||||
</GlassView>
|
||||
@@ -294,12 +296,12 @@ export default function LoginScreen() {
|
||||
color="#FFFFFF"
|
||||
style={{ marginRight: 10 }}
|
||||
/>
|
||||
<Text style={styles.appleText}>登录中...</Text>
|
||||
<Text style={styles.appleText}>{t('login.loggingIn')}</Text>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="logo-apple" size={22} color="#FFFFFF" style={{ marginRight: 10 }} />
|
||||
<Text style={styles.appleText}>使用 Apple 登录</Text>
|
||||
<Text style={styles.appleText}>{t('login.appleLogin')}</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
@@ -319,13 +321,13 @@ export default function LoginScreen() {
|
||||
{hasAgreed && <Ionicons name="checkmark" size={14} color={color.onPrimary} />}
|
||||
</View>
|
||||
</Pressable>
|
||||
<Text style={[styles.agreementText, { color: color.textMuted }]}>我已阅读并同意</Text>
|
||||
<Text style={[styles.agreementText, { color: color.textMuted }]}>{t('login.agreement.readAndAgree')}</Text>
|
||||
<Pressable onPress={() => Linking.openURL(PRIVACY_POLICY_URL)}>
|
||||
<Text style={[styles.link, { color: color.primary }]}>《隐私政策》</Text>
|
||||
<Text style={[styles.link, { color: color.primary }]}>{t('login.agreement.privacyPolicy')}</Text>
|
||||
</Pressable>
|
||||
<Text style={[styles.agreementText, { color: color.textMuted }]}>和</Text>
|
||||
<Text style={[styles.agreementText, { color: color.textMuted }]}>{t('login.agreement.and')}</Text>
|
||||
<Pressable onPress={() => Linking.openURL(USER_AGREEMENT_URL)}>
|
||||
<Text style={[styles.link, { color: color.primary }]}>《用户协议》</Text>
|
||||
<Text style={[styles.link, { color: color.primary }]}>{t('login.agreement.userAgreement')}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
|
||||
@@ -2,9 +2,10 @@ import { DateSelector } from '@/components/DateSelector';
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useAppSelector } from '@/hooks/redux';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import { selectUserAge, selectUserProfile } from '@/store/userSlice';
|
||||
import { getMonthDaysZh, getTodayIndexInMonth } from '@/utils/date';
|
||||
import { getLocalizedDateFormat, getMonthDays, getTodayIndexInMonth } from '@/utils/date';
|
||||
import { fetchBasalEnergyBurned } from '@/utils/health';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import dayjs from 'dayjs';
|
||||
@@ -24,6 +25,7 @@ type BasalMetabolismData = {
|
||||
};
|
||||
|
||||
export default function BasalMetabolismDetailScreen() {
|
||||
const { t, i18n } = useI18n();
|
||||
const userProfile = useAppSelector(selectUserProfile);
|
||||
const userAge = useAppSelector(selectUserAge);
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
@@ -140,9 +142,9 @@ export default function BasalMetabolismDetailScreen() {
|
||||
|
||||
// 获取当前选中日期
|
||||
const currentSelectedDate = useMemo(() => {
|
||||
const days = getMonthDaysZh();
|
||||
const days = getMonthDays(undefined, i18n.language as 'zh' | 'en');
|
||||
return days[selectedIndex]?.date?.toDate() ?? new Date();
|
||||
}, [selectedIndex]);
|
||||
}, [selectedIndex, i18n.language]);
|
||||
|
||||
|
||||
// 计算BMR范围
|
||||
@@ -203,7 +205,7 @@ export default function BasalMetabolismDetailScreen() {
|
||||
setSelectedIndex(index);
|
||||
|
||||
// 获取选中日期
|
||||
const days = getMonthDaysZh();
|
||||
const days = getMonthDays(undefined, i18n.language as 'zh' | 'en');
|
||||
const selectedDate = days[index]?.date?.toDate();
|
||||
|
||||
if (selectedDate) {
|
||||
@@ -247,7 +249,7 @@ export default function BasalMetabolismDetailScreen() {
|
||||
}
|
||||
} catch (err) {
|
||||
if (!isCancelled) {
|
||||
setError(err instanceof Error ? err.message : '获取数据失败');
|
||||
setError(err instanceof Error ? err.message : t('basalMetabolismDetail.chart.error.fetchFailed'));
|
||||
}
|
||||
} finally {
|
||||
if (!isCancelled) {
|
||||
@@ -280,7 +282,8 @@ export default function BasalMetabolismDetailScreen() {
|
||||
// 显示周数
|
||||
const weekOfYear = dayjs(item.date).week();
|
||||
const firstWeekOfYear = dayjs(item.date).startOf('year').week();
|
||||
return `第${weekOfYear - firstWeekOfYear + 1}周`;
|
||||
const weekNumber = weekOfYear - firstWeekOfYear + 1;
|
||||
return t('basalMetabolismDetail.chart.weekLabel', { week: weekNumber });
|
||||
default:
|
||||
return dayjs(item.date).format('MM-DD');
|
||||
}
|
||||
@@ -319,7 +322,7 @@ export default function BasalMetabolismDetailScreen() {
|
||||
|
||||
{/* 头部导航 */}
|
||||
<HeaderBar
|
||||
title="基础代谢"
|
||||
title={t('basalMetabolismDetail.title')}
|
||||
transparent
|
||||
right={
|
||||
<TouchableOpacity
|
||||
@@ -355,7 +358,9 @@ export default function BasalMetabolismDetailScreen() {
|
||||
{/* 当前日期基础代谢显示 */}
|
||||
<View style={styles.currentDataCard}>
|
||||
<Text style={styles.currentDataTitle}>
|
||||
{dayjs(currentSelectedDate).format('M月D日')} 基础代谢
|
||||
{t('basalMetabolismDetail.currentData.title', {
|
||||
date: getLocalizedDateFormat(dayjs(currentSelectedDate), i18n.language as 'zh' | 'en')
|
||||
})}
|
||||
</Text>
|
||||
<View style={styles.currentValueContainer}>
|
||||
<Text style={styles.currentValue}>
|
||||
@@ -366,21 +371,24 @@ export default function BasalMetabolismDetailScreen() {
|
||||
if (selectedDateData?.value) {
|
||||
return Math.round(selectedDateData.value).toString();
|
||||
}
|
||||
return '--';
|
||||
return t('basalMetabolismDetail.currentData.noData');
|
||||
})()}
|
||||
</Text>
|
||||
<Text style={styles.currentUnit}>千卡</Text>
|
||||
<Text style={styles.currentUnit}>{t('basalMetabolismDetail.currentData.unit')}</Text>
|
||||
</View>
|
||||
{bmrRange && (
|
||||
<Text style={styles.rangeText}>
|
||||
正常范围: {bmrRange.min}-{bmrRange.max} 千卡
|
||||
{t('basalMetabolismDetail.currentData.normalRange', {
|
||||
min: bmrRange.min,
|
||||
max: bmrRange.max
|
||||
})}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 基础代谢统计 */}
|
||||
<View style={styles.statsCard}>
|
||||
<Text style={styles.statsTitle}>基础代谢统计</Text>
|
||||
<Text style={styles.statsTitle}>{t('basalMetabolismDetail.stats.title')}</Text>
|
||||
|
||||
{/* Tab 切换 */}
|
||||
<View style={styles.tabContainer}>
|
||||
@@ -390,7 +398,7 @@ export default function BasalMetabolismDetailScreen() {
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={[styles.tabText, activeTab === 'week' && styles.activeTabText]}>
|
||||
按周
|
||||
{t('basalMetabolismDetail.stats.tabs.week')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
@@ -399,7 +407,7 @@ export default function BasalMetabolismDetailScreen() {
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={[styles.tabText, activeTab === 'month' && styles.activeTabText]}>
|
||||
按月
|
||||
{t('basalMetabolismDetail.stats.tabs.month')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -408,28 +416,30 @@ export default function BasalMetabolismDetailScreen() {
|
||||
{isLoading ? (
|
||||
<View style={styles.loadingChart}>
|
||||
<ActivityIndicator size="large" color="#4ECDC4" />
|
||||
<Text style={styles.loadingText}>加载中...</Text>
|
||||
<Text style={styles.loadingText}>{t('basalMetabolismDetail.chart.loadingText')}</Text>
|
||||
</View>
|
||||
) : error ? (
|
||||
<View style={styles.errorChart}>
|
||||
<Text style={styles.errorText}>加载失败: {error}</Text>
|
||||
<Text style={styles.errorText}>
|
||||
{t('basalMetabolismDetail.chart.error.text', { error })}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.retryButton}
|
||||
onPress={() => {
|
||||
// 重新加载数据
|
||||
// {t('basalMetabolismDetail.comments.reloadData')}
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
fetchBasalMetabolismData(activeTab).then(data => {
|
||||
setChartData(data);
|
||||
setIsLoading(false);
|
||||
}).catch(err => {
|
||||
setError(err instanceof Error ? err.message : '获取数据失败');
|
||||
setError(err instanceof Error ? err.message : t('basalMetabolismDetail.chart.error.fetchFailed'));
|
||||
setIsLoading(false);
|
||||
});
|
||||
}}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.retryText}>重试</Text>
|
||||
<Text style={styles.retryText}>{t('basalMetabolismDetail.chart.error.retry')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : processedChartData.datasets.length > 0 && processedChartData.datasets[0].data.length > 0 ? (
|
||||
@@ -441,7 +451,7 @@ export default function BasalMetabolismDetailScreen() {
|
||||
width={Dimensions.get('window').width - 80}
|
||||
height={220}
|
||||
yAxisLabel=""
|
||||
yAxisSuffix="千卡"
|
||||
yAxisSuffix={t('basalMetabolismDetail.chart.yAxisSuffix')}
|
||||
chartConfig={{
|
||||
backgroundColor: '#ffffff',
|
||||
backgroundGradientFrom: '#ffffff',
|
||||
@@ -470,7 +480,7 @@ export default function BasalMetabolismDetailScreen() {
|
||||
/>
|
||||
) : (
|
||||
<View style={styles.emptyChart}>
|
||||
<Text style={styles.emptyChartText}>暂无数据</Text>
|
||||
<Text style={styles.emptyChartText}>{t('basalMetabolismDetail.chart.empty')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
@@ -490,56 +500,66 @@ export default function BasalMetabolismDetailScreen() {
|
||||
style={styles.closeButton}
|
||||
onPress={() => setInfoModalVisible(false)}
|
||||
>
|
||||
<Text style={styles.closeButtonText}>×</Text>
|
||||
<Text style={styles.closeButtonText}>{t('basalMetabolismDetail.modal.closeButton')}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* 标题 */}
|
||||
<Text style={styles.modalTitle}>基础代谢</Text>
|
||||
<Text style={styles.modalTitle}>{t('basalMetabolismDetail.modal.title')}</Text>
|
||||
|
||||
{/* 基础代谢定义 */}
|
||||
<Text style={styles.modalDescription}>
|
||||
基础代谢,也称基础代谢率(BMR),是指人体在完全静息状态下维持基本生命功能(心跳、呼吸、体温调节等)所需的最低能量消耗,通常以卡路里为单位。
|
||||
{t('basalMetabolismDetail.modal.description')}
|
||||
</Text>
|
||||
|
||||
{/* 为什么重要 */}
|
||||
<Text style={styles.sectionTitle}>为什么重要?</Text>
|
||||
<Text style={styles.sectionTitle}>{t('basalMetabolismDetail.modal.sections.importance.title')}</Text>
|
||||
<Text style={styles.sectionContent}>
|
||||
基础代谢占总能量消耗的60-75%,是能量平衡的基础。了解您的基础代谢有助于制定科学的营养计划、优化体重管理策略,以及评估代谢健康状态。
|
||||
{t('basalMetabolismDetail.modal.sections.importance.content')}
|
||||
</Text>
|
||||
|
||||
{/* 正常范围 */}
|
||||
<Text style={styles.sectionTitle}>正常范围</Text>
|
||||
<Text style={styles.sectionTitle}>{t('basalMetabolismDetail.modal.sections.normalRange.title')}</Text>
|
||||
<Text style={styles.formulaText}>
|
||||
- 男性:BMR = 10 × 体重(kg) + 6.25 × 身高(cm) - 5 × 年龄 + 5
|
||||
- {t('basalMetabolismDetail.modal.sections.normalRange.formulas.male')}
|
||||
</Text>
|
||||
<Text style={styles.formulaText}>
|
||||
- 女性:BMR = 10 × 体重(kg) + 6.25 × 身高(cm) - 5 × 年龄 - 161
|
||||
- {t('basalMetabolismDetail.modal.sections.normalRange.formulas.female')}
|
||||
</Text>
|
||||
|
||||
{bmrRange ? (
|
||||
<>
|
||||
<Text style={styles.rangeText}>您的正常区间:{bmrRange.min}-{bmrRange.max}千卡/天</Text>
|
||||
<Text style={styles.rangeText}>
|
||||
{t('basalMetabolismDetail.modal.sections.normalRange.userRange', {
|
||||
min: bmrRange.min,
|
||||
max: bmrRange.max
|
||||
})}
|
||||
</Text>
|
||||
<Text style={styles.rangeNote}>
|
||||
(在公式基础计算值上下浮动15%都属于正常范围)
|
||||
{t('basalMetabolismDetail.modal.sections.normalRange.rangeNote')}
|
||||
</Text>
|
||||
<Text style={styles.userInfoText}>
|
||||
基于您的信息:{userProfile.gender === 'male' ? '男性' : '女性'},{userAge}岁,{userProfile.height}cm,{userProfile.weight}kg
|
||||
{t('basalMetabolismDetail.modal.sections.normalRange.userInfo', {
|
||||
gender: t(`basalMetabolismDetail.gender.${userProfile.gender === 'male' ? 'male' : 'female'}`),
|
||||
age: userAge,
|
||||
height: userProfile.height,
|
||||
weight: userProfile.weight
|
||||
})}
|
||||
</Text>
|
||||
</>
|
||||
) : (
|
||||
<Text style={styles.rangeText}>请完善基本信息以计算您的代谢率</Text>
|
||||
<Text style={styles.rangeText}>
|
||||
{t('basalMetabolismDetail.modal.sections.normalRange.incompleteInfo')}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{/* 提高代谢率的策略 */}
|
||||
<Text style={styles.sectionTitle}>提高代谢率的策略</Text>
|
||||
<Text style={styles.strategyText}>科学研究支持以下方法:</Text>
|
||||
<Text style={styles.sectionTitle}>{t('basalMetabolismDetail.modal.sections.strategies.title')}</Text>
|
||||
<Text style={styles.strategyText}>{t('basalMetabolismDetail.modal.sections.strategies.subtitle')}</Text>
|
||||
|
||||
<View style={styles.strategyList}>
|
||||
<Text style={styles.strategyItem}>1.增加肌肉量 (每周2-3次力量训练)</Text>
|
||||
<Text style={styles.strategyItem}>2.高强度间歇训练 (HIIT)</Text>
|
||||
<Text style={styles.strategyItem}>3.充分蛋白质摄入 (体重每公斤1.6-2.2g)</Text>
|
||||
<Text style={styles.strategyItem}>4.保证充足睡眠 (7-9小时/晚)</Text>
|
||||
<Text style={styles.strategyItem}>5.避免过度热量限制 (不低于BMR的80%)</Text>
|
||||
{(t('basalMetabolismDetail.modal.sections.strategies.items', { returnObjects: true }) as string[]).map((item: string, index: number) => (
|
||||
<Text key={index} style={styles.strategyItem}>{item}</Text>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -7,11 +7,15 @@ import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { ChallengeSource } from '@/services/challengesApi';
|
||||
import {
|
||||
archiveCustomChallengeThunk,
|
||||
fetchChallengeDetail,
|
||||
fetchChallengeRankings,
|
||||
fetchChallenges,
|
||||
joinChallenge,
|
||||
leaveChallenge,
|
||||
reportChallengeProgress,
|
||||
selectArchiveError,
|
||||
selectArchiveStatus,
|
||||
selectChallengeById,
|
||||
selectChallengeDetailError,
|
||||
selectChallengeDetailStatus,
|
||||
@@ -117,6 +121,10 @@ export default function ChallengeDetailScreen() {
|
||||
const leaveStatus = useAppSelector((state) => (leaveStatusSelector ? leaveStatusSelector(state) : 'idle'));
|
||||
const leaveErrorSelector = useMemo(() => (id ? selectLeaveError(id) : undefined), [id]);
|
||||
const leaveError = useAppSelector((state) => (leaveErrorSelector ? leaveErrorSelector(state) : undefined));
|
||||
const archiveStatusSelector = useMemo(() => (id ? selectArchiveStatus(id) : undefined), [id]);
|
||||
const archiveStatus = useAppSelector((state) => (archiveStatusSelector ? archiveStatusSelector(state) : 'idle'));
|
||||
const archiveErrorSelector = useMemo(() => (id ? selectArchiveError(id) : undefined), [id]);
|
||||
const archiveError = useAppSelector((state) => (archiveErrorSelector ? archiveErrorSelector(state) : undefined));
|
||||
|
||||
const progressStatusSelector = useMemo(() => (id ? selectProgressStatus(id) : undefined), [id]);
|
||||
const progressStatus = useAppSelector((state) => (progressStatusSelector ? progressStatusSelector(state) : 'idle'));
|
||||
@@ -160,9 +168,13 @@ export default function ChallengeDetailScreen() {
|
||||
};
|
||||
}, [showCelebration]);
|
||||
|
||||
|
||||
const progress = challenge?.progress;
|
||||
const isJoined = challenge?.isJoined ?? false;
|
||||
const isCustomChallenge = challenge?.source === ChallengeSource.CUSTOM;
|
||||
const isCreator = challenge?.isCreator ?? false;
|
||||
const isCustomCreator = isCustomChallenge && isCreator;
|
||||
const canEdit = isCustomChallenge && isCreator;
|
||||
const lastProgressAt = useMemo(() => {
|
||||
const progressRecord = challenge?.progress as { lastProgressAt?: string; last_progress_at?: string } | undefined;
|
||||
return progressRecord?.lastProgressAt ?? progressRecord?.last_progress_at;
|
||||
@@ -275,6 +287,20 @@ export default function ChallengeDetailScreen() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleArchive = async () => {
|
||||
if (!id || archiveStatus === 'loading') {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await dispatch(archiveCustomChallengeThunk(id)).unwrap();
|
||||
Toast.success(t('challengeDetail.alert.archiveSuccess'));
|
||||
await dispatch(fetchChallenges());
|
||||
router.back();
|
||||
} catch (error) {
|
||||
Toast.error(t('challengeDetail.alert.archiveFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleLeaveConfirm = () => {
|
||||
if (!id || leaveStatus === 'loading') {
|
||||
return;
|
||||
@@ -295,6 +321,26 @@ export default function ChallengeDetailScreen() {
|
||||
);
|
||||
};
|
||||
|
||||
const handleArchiveConfirm = () => {
|
||||
if (!id || archiveStatus === 'loading') {
|
||||
return;
|
||||
}
|
||||
Alert.alert(
|
||||
t('challengeDetail.alert.archiveConfirm.title'),
|
||||
t('challengeDetail.alert.archiveConfirm.message'),
|
||||
[
|
||||
{ text: t('challengeDetail.alert.archiveConfirm.cancel'), style: 'cancel' },
|
||||
{
|
||||
text: t('challengeDetail.alert.archiveConfirm.confirm'),
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
void handleArchive();
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const handleProgressReport = async () => {
|
||||
if (!id || progressStatus === 'loading') {
|
||||
return;
|
||||
@@ -391,6 +437,9 @@ export default function ChallengeDetailScreen() {
|
||||
const joinCtaLabel = joinStatus === 'loading' ? t('challengeDetail.cta.joining') : challenge.ctaLabel ?? t('challengeDetail.cta.join');
|
||||
const isUpcoming = challenge.status === 'upcoming';
|
||||
const isExpired = challenge.status === 'expired';
|
||||
const deleteCtaLabel = archiveStatus === 'loading'
|
||||
? t('challengeDetail.cta.deleting')
|
||||
: t('challengeDetail.cta.delete');
|
||||
const upcomingStartLabel = formatMonthDay(challenge.startAt);
|
||||
const upcomingHighlightTitle = t('challengeDetail.highlight.upcoming.title');
|
||||
const upcomingHighlightSubtitle = upcomingStartLabel
|
||||
@@ -420,10 +469,17 @@ export default function ChallengeDetailScreen() {
|
||||
? `分享码 ${challenge?.shareCode ?? ''}`
|
||||
: leaveHighlightTitle;
|
||||
floatingHighlightSubtitle = showShareCode ? '' : leaveHighlightSubtitle;
|
||||
floatingCtaLabel = leaveCtaLabel;
|
||||
floatingOnPress = handleLeaveConfirm;
|
||||
floatingDisabled = leaveStatus === 'loading';
|
||||
floatingError = leaveError;
|
||||
if (isCustomCreator) {
|
||||
floatingCtaLabel = deleteCtaLabel;
|
||||
floatingOnPress = handleArchiveConfirm;
|
||||
floatingDisabled = archiveStatus === 'loading';
|
||||
floatingError = archiveError;
|
||||
} else {
|
||||
floatingCtaLabel = leaveCtaLabel;
|
||||
floatingOnPress = handleLeaveConfirm;
|
||||
floatingDisabled = leaveStatus === 'loading';
|
||||
floatingError = leaveError;
|
||||
}
|
||||
}
|
||||
|
||||
if (isUpcoming) {
|
||||
@@ -539,7 +595,7 @@ export default function ChallengeDetailScreen() {
|
||||
<Ionicons name="flag-outline" size={20} color="#5E8BFF" />
|
||||
</View>
|
||||
<View style={styles.shareInfoTextWrapper}>
|
||||
<Text style={styles.shareInfoLabel}>{challenge.requirementLabel}</Text>
|
||||
{challenge.requirementLabel ? <Text style={styles.shareInfoLabel}>{challenge.requirementLabel}</Text> : null}
|
||||
<Text style={styles.shareInfoMeta}>{t('challengeDetail.shareCard.info.checkInDaily')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -573,29 +629,63 @@ export default function ChallengeDetailScreen() {
|
||||
transparent
|
||||
withSafeTop={false}
|
||||
right={
|
||||
isLiquidGlassAvailable() ? (
|
||||
<TouchableOpacity
|
||||
onPress={handleShare}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<GlassView
|
||||
style={styles.shareButton}
|
||||
glassEffectStyle="clear"
|
||||
tintColor="rgba(255, 255, 255, 0.3)"
|
||||
isInteractive={true}
|
||||
<View style={styles.headerButtons}>
|
||||
{canEdit && (
|
||||
isLiquidGlassAvailable() ? (
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push({
|
||||
pathname: '/challenges/create-custom',
|
||||
params: { id, mode: 'edit' }
|
||||
})}
|
||||
activeOpacity={0.7}
|
||||
style={styles.editButton}
|
||||
>
|
||||
<GlassView
|
||||
style={styles.editButtonGlass}
|
||||
glassEffectStyle="clear"
|
||||
tintColor="rgba(255, 255, 255, 0.3)"
|
||||
isInteractive={true}
|
||||
>
|
||||
<Ionicons name="create-outline" size={20} color="#ffffff" />
|
||||
</GlassView>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push({
|
||||
pathname: '/challenges/create-custom',
|
||||
params: { id, mode: 'edit' }
|
||||
})}
|
||||
activeOpacity={0.7}
|
||||
style={[styles.editButton, styles.fallbackEditButton]}
|
||||
>
|
||||
<Ionicons name="create-outline" size={20} color="#ffffff" />
|
||||
</TouchableOpacity>
|
||||
)
|
||||
)}
|
||||
{isLiquidGlassAvailable() ? (
|
||||
<TouchableOpacity
|
||||
onPress={handleShare}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<GlassView
|
||||
style={styles.shareButton}
|
||||
glassEffectStyle="clear"
|
||||
tintColor="rgba(255, 255, 255, 0.3)"
|
||||
isInteractive={true}
|
||||
>
|
||||
<Ionicons name="share-social-outline" size={20} color="#ffffff" />
|
||||
</GlassView>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
onPress={handleShare}
|
||||
style={[styles.shareButton, styles.fallbackShareButton]}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Ionicons name="share-social-outline" size={20} color="#ffffff" />
|
||||
</GlassView>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
onPress={handleShare}
|
||||
style={[styles.shareButton, styles.fallbackShareButton]}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Ionicons name="share-social-outline" size={20} color="#ffffff" />
|
||||
</TouchableOpacity>
|
||||
)
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
@@ -653,7 +743,7 @@ export default function ChallengeDetailScreen() {
|
||||
<Ionicons name="flag-outline" size={20} color="#4F5BD5" />
|
||||
</View>
|
||||
<View style={styles.detailTextWrapper}>
|
||||
<Text style={styles.detailLabel}>{challenge.requirementLabel}</Text>
|
||||
{challenge.requirementLabel ? <Text style={styles.detailLabel}>{challenge.requirementLabel}</Text> : null}
|
||||
<Text style={styles.detailMeta}>{t('challengeDetail.detail.requirement')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -746,52 +836,129 @@ export default function ChallengeDetailScreen() {
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<View pointerEvents="box-none" style={[styles.floatingCTAContainer, { paddingBottom: insets.bottom }]}>
|
||||
<BlurView intensity={10} tint="light" style={styles.floatingCTABlur}>
|
||||
<View style={styles.floatingCTAContent}>
|
||||
{showShareCode ? (
|
||||
<View style={[styles.highlightCopy, styles.highlightCopyCompact]}>
|
||||
<View style={styles.shareCodeRow}>
|
||||
<Text style={styles.highlightTitle}>{floatingHighlightTitle}</Text>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.85}
|
||||
style={styles.shareCodeIconButton}
|
||||
onPress={handleCopyShareCode}
|
||||
>
|
||||
<Ionicons name="copy-outline" size={18} color="#4F5BD5" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{floatingHighlightSubtitle ? (
|
||||
<Text style={styles.highlightSubtitle}>{floatingHighlightSubtitle}</Text>
|
||||
) : null}
|
||||
{floatingError ? <Text style={styles.ctaErrorText}>{floatingError}</Text> : null}
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.highlightCopy}>
|
||||
<Text style={styles.highlightTitle}>{floatingHighlightTitle}</Text>
|
||||
<Text style={styles.highlightSubtitle}>{floatingHighlightSubtitle}</Text>
|
||||
{floatingError ? <Text style={styles.ctaErrorText}>{floatingError}</Text> : null}
|
||||
</View>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
style={styles.highlightButton}
|
||||
activeOpacity={0.9}
|
||||
onPress={floatingOnPress}
|
||||
disabled={floatingDisabled}
|
||||
<View pointerEvents="box-none" style={[styles.floatingCTAContainer, { paddingBottom: insets.bottom || 20 }]}>
|
||||
{isLiquidGlassAvailable() ? (
|
||||
<View style={styles.glassWrapper}>
|
||||
{/* 顶部高光线条 */}
|
||||
<LinearGradient
|
||||
colors={['rgba(255,255,255,0.9)', 'rgba(255,255,255,0.2)', 'transparent']}
|
||||
start={{ x: 0.5, y: 0 }}
|
||||
end={{ x: 0.5, y: 1 }}
|
||||
style={styles.glassHighlight}
|
||||
/>
|
||||
<GlassView
|
||||
style={styles.glassContainer}
|
||||
glassEffectStyle="regular"
|
||||
tintColor="rgba(243, 244, 251, 0.55)"
|
||||
isInteractive={true}
|
||||
>
|
||||
{/* 内部微光渐变 */}
|
||||
<LinearGradient
|
||||
colors={floatingGradientColors}
|
||||
colors={['rgba(255,255,255,0.6)', 'rgba(255,255,255,0.0)']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.highlightButtonBackground}
|
||||
>
|
||||
<Text style={[styles.highlightButtonLabel, isDisabledButtonState && styles.highlightButtonLabelDisabled]}>
|
||||
{floatingCtaLabel}
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
end={{ x: 0, y: 0.6 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
pointerEvents="none"
|
||||
/>
|
||||
<View style={styles.floatingCTAContent}>
|
||||
{showShareCode ? (
|
||||
<View style={[styles.highlightCopy, styles.highlightCopyCompact]}>
|
||||
<View style={styles.shareCodeRow}>
|
||||
<Text style={styles.highlightTitle}>{floatingHighlightTitle}</Text>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
style={styles.shareCodeIconButton}
|
||||
onPress={handleCopyShareCode}
|
||||
>
|
||||
<Ionicons name="copy-outline" size={18} color="#4F5BD5" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{floatingHighlightSubtitle ? (
|
||||
<Text style={styles.highlightSubtitle}>{floatingHighlightSubtitle}</Text>
|
||||
) : null}
|
||||
{floatingError ? <Text style={styles.ctaErrorText}>{floatingError}</Text> : null}
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.highlightCopy}>
|
||||
<Text style={styles.highlightTitle}>{floatingHighlightTitle}</Text>
|
||||
<Text style={styles.highlightSubtitle}>{floatingHighlightSubtitle}</Text>
|
||||
{floatingError ? <Text style={styles.ctaErrorText}>{floatingError}</Text> : null}
|
||||
</View>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
style={styles.highlightButton}
|
||||
activeOpacity={0.85}
|
||||
onPress={floatingOnPress}
|
||||
disabled={floatingDisabled}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={floatingGradientColors}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.highlightButtonBackground}
|
||||
>
|
||||
{/* 按钮内部高光 */}
|
||||
<LinearGradient
|
||||
colors={['rgba(255,255,255,0.4)', 'transparent']}
|
||||
start={{ x: 0.5, y: 0 }}
|
||||
end={{ x: 0.5, y: 0.5 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<Text style={[styles.highlightButtonLabel, isDisabledButtonState && styles.highlightButtonLabelDisabled]}>
|
||||
{floatingCtaLabel}
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</GlassView>
|
||||
</View>
|
||||
</BlurView>
|
||||
) : (
|
||||
<BlurView intensity={20} tint="light" style={styles.floatingCTABlur}>
|
||||
<View style={styles.floatingCTAContent}>
|
||||
{showShareCode ? (
|
||||
<View style={[styles.highlightCopy, styles.highlightCopyCompact]}>
|
||||
<View style={styles.shareCodeRow}>
|
||||
<Text style={styles.highlightTitle}>{floatingHighlightTitle}</Text>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.85}
|
||||
style={styles.shareCodeIconButton}
|
||||
onPress={handleCopyShareCode}
|
||||
>
|
||||
<Ionicons name="copy-outline" size={18} color="#4F5BD5" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{floatingHighlightSubtitle ? (
|
||||
<Text style={styles.highlightSubtitle}>{floatingHighlightSubtitle}</Text>
|
||||
) : null}
|
||||
{floatingError ? <Text style={styles.ctaErrorText}>{floatingError}</Text> : null}
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.highlightCopy}>
|
||||
<Text style={styles.highlightTitle}>{floatingHighlightTitle}</Text>
|
||||
<Text style={styles.highlightSubtitle}>{floatingHighlightSubtitle}</Text>
|
||||
{floatingError ? <Text style={styles.ctaErrorText}>{floatingError}</Text> : null}
|
||||
</View>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
style={styles.highlightButton}
|
||||
activeOpacity={0.9}
|
||||
onPress={floatingOnPress}
|
||||
disabled={floatingDisabled}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={floatingGradientColors}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.highlightButtonBackground}
|
||||
>
|
||||
<Text style={[styles.highlightButtonLabel, isDisabledButtonState && styles.highlightButtonLabelDisabled]}>
|
||||
{floatingCtaLabel}
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</BlurView>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
{showCelebration && (
|
||||
@@ -850,13 +1017,47 @@ const styles = StyleSheet.create({
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingHorizontal: 20,
|
||||
zIndex: 100,
|
||||
},
|
||||
floatingCTABlur: {
|
||||
borderRadius: 24,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.6)',
|
||||
backgroundColor: 'rgba(243, 244, 251, 0.85)',
|
||||
backgroundColor: 'rgba(243, 244, 251, 0.9)',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 12,
|
||||
elevation: 5,
|
||||
},
|
||||
glassWrapper: {
|
||||
borderRadius: 24,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
shadowColor: '#5E8BFF',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 8,
|
||||
},
|
||||
shadowOpacity: 0.18,
|
||||
shadowRadius: 20,
|
||||
elevation: 10,
|
||||
},
|
||||
glassHighlight: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 1,
|
||||
zIndex: 2,
|
||||
opacity: 0.9,
|
||||
},
|
||||
glassContainer: {
|
||||
borderRadius: 24,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
floatingCTAContent: {
|
||||
flexDirection: 'row',
|
||||
@@ -890,6 +1091,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
color: '#596095',
|
||||
letterSpacing: 0.2,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
title: {
|
||||
marginTop: 10,
|
||||
@@ -897,6 +1099,7 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '800',
|
||||
color: '#1c1f3a',
|
||||
textAlign: 'center',
|
||||
fontFamily: 'AliBold'
|
||||
},
|
||||
summary: {
|
||||
marginTop: 12,
|
||||
@@ -904,6 +1107,7 @@ const styles = StyleSheet.create({
|
||||
lineHeight: 20,
|
||||
color: '#7080b4',
|
||||
textAlign: 'center',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
inlineError: {
|
||||
marginTop: 12,
|
||||
@@ -950,11 +1154,13 @@ const styles = StyleSheet.create({
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
detailMeta: {
|
||||
marginTop: 4,
|
||||
fontSize: 12,
|
||||
color: '#6f7ba7',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
avatarRow: {
|
||||
flexDirection: 'row',
|
||||
@@ -982,6 +1188,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 12,
|
||||
color: '#4F5BD5',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
checkInCard: {
|
||||
marginTop: 4,
|
||||
@@ -999,12 +1206,14 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
checkInSubtitle: {
|
||||
marginTop: 4,
|
||||
fontSize: 12,
|
||||
color: '#6f7ba7',
|
||||
lineHeight: 18,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
checkInButton: {
|
||||
borderRadius: 18,
|
||||
@@ -1022,6 +1231,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
color: '#ffffff',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
checkInButtonLabelDisabled: {
|
||||
color: '#6f7799',
|
||||
@@ -1037,11 +1247,13 @@ const styles = StyleSheet.create({
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
sectionAction: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
color: '#5F6BF0',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
sectionSubtitle: {
|
||||
marginTop: 8,
|
||||
@@ -1049,6 +1261,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 13,
|
||||
color: '#6f7ba7',
|
||||
lineHeight: 18,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
rankingCard: {
|
||||
marginTop: 20,
|
||||
@@ -1069,17 +1282,20 @@ const styles = StyleSheet.create({
|
||||
emptyRankingText: {
|
||||
fontSize: 14,
|
||||
color: '#6f7ba7',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
highlightTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
highlightSubtitle: {
|
||||
marginTop: 4,
|
||||
fontSize: 12,
|
||||
color: '#5f6a97',
|
||||
lineHeight: 18,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
shareCodeIconButton: {
|
||||
paddingHorizontal: 4,
|
||||
@@ -1105,10 +1321,38 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
color: '#ffffff',
|
||||
fontFamily: 'AliBold',
|
||||
|
||||
},
|
||||
highlightButtonLabelDisabled: {
|
||||
color: '#6f7799',
|
||||
},
|
||||
headerButtons: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
},
|
||||
editButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
editButtonGlass: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
fallbackEditButton: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.24)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.45)',
|
||||
},
|
||||
shareButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
@@ -1131,6 +1375,7 @@ const styles = StyleSheet.create({
|
||||
missingText: {
|
||||
fontSize: 16,
|
||||
textAlign: 'center',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
retryButton: {
|
||||
marginTop: 18,
|
||||
@@ -1142,6 +1387,7 @@ const styles = StyleSheet.create({
|
||||
retryText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
celebrationOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
@@ -1185,6 +1431,7 @@ const styles = StyleSheet.create({
|
||||
textShadowColor: 'rgba(0, 0, 0, 0.3)',
|
||||
textShadowOffset: { width: 0, height: 2 },
|
||||
textShadowRadius: 4,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
shareCardSummary: {
|
||||
fontSize: 15,
|
||||
@@ -1195,6 +1442,7 @@ const styles = StyleSheet.create({
|
||||
textShadowColor: 'rgba(0, 0, 0, 0.25)',
|
||||
textShadowOffset: { width: 0, height: 1 },
|
||||
textShadowRadius: 3,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
shareProgressContainer: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
@@ -1229,11 +1477,13 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
shareInfoMeta: {
|
||||
fontSize: 12,
|
||||
color: '#707baf',
|
||||
marginTop: 2,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
shareProgressHeader: {
|
||||
flexDirection: 'row',
|
||||
@@ -1245,11 +1495,13 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
shareProgressValue: {
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
color: '#5E8BFF',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
shareProgressTrack: {
|
||||
height: 8,
|
||||
@@ -1268,6 +1520,7 @@ const styles = StyleSheet.create({
|
||||
marginTop: 12,
|
||||
textAlign: 'center',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
shareCardFooter: {
|
||||
alignItems: 'center',
|
||||
@@ -1278,5 +1531,6 @@ const styles = StyleSheet.create({
|
||||
color: '#ffffff',
|
||||
opacity: 0.8,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -4,6 +4,7 @@ import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import {
|
||||
fetchChallengeDetail,
|
||||
@@ -37,6 +38,7 @@ export default function ChallengeLeaderboardScreen() {
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
const insets = useSafeAreaInsets();
|
||||
const { t } = useI18n();
|
||||
|
||||
const challengeSelector = useMemo(() => (id ? selectChallengeById(id) : undefined), [id]);
|
||||
const challenge = useAppSelector((state) => (challengeSelector ? challengeSelector(state) : undefined));
|
||||
@@ -75,12 +77,12 @@ export default function ChallengeLeaderboardScreen() {
|
||||
if (!id) {
|
||||
return (
|
||||
<View style={[styles.safeArea, { backgroundColor: colorTokens.background }]}>
|
||||
<HeaderBar title="排行榜" onBack={() => router.back()} withSafeTop />
|
||||
<HeaderBar title={t('challengeDetail.leaderboard.title')} onBack={() => router.back()} withSafeTop />
|
||||
<View style={{
|
||||
paddingTop: safeAreaTop
|
||||
}} />
|
||||
<View style={styles.missingContainer}>
|
||||
<Text style={[styles.missingText, { color: colorTokens.textSecondary }]}>未找到该挑战。</Text>
|
||||
<Text style={[styles.missingText, { color: colorTokens.textSecondary }]}>{t('challengeDetail.leaderboard.notFound')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@@ -89,10 +91,10 @@ export default function ChallengeLeaderboardScreen() {
|
||||
if (detailStatus === 'loading' && !challenge) {
|
||||
return (
|
||||
<View style={[styles.safeArea, { backgroundColor: '#f3f4fb' }]}>
|
||||
<HeaderBar title="排行榜" onBack={() => router.back()} withSafeTop />
|
||||
<HeaderBar title={t('challengeDetail.leaderboard.title')} onBack={() => router.back()} withSafeTop />
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator color={colorTokens.primary} />
|
||||
<Text style={[styles.loadingText, { color: colorTokens.textSecondary }]}>加载榜单中…</Text>
|
||||
<Text style={[styles.loadingText, { color: colorTokens.textSecondary }]}>{t('challengeDetail.leaderboard.loading')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@@ -131,10 +133,10 @@ export default function ChallengeLeaderboardScreen() {
|
||||
if (!challenge) {
|
||||
return (
|
||||
<View style={[styles.safeArea, { backgroundColor: '#f3f4fb' }]}>
|
||||
<HeaderBar title="排行榜" onBack={() => router.back()} withSafeTop />
|
||||
<HeaderBar title={t('challengeDetail.leaderboard.title')} onBack={() => router.back()} withSafeTop />
|
||||
<View style={styles.missingContainer}>
|
||||
<Text style={[styles.missingText, { color: colorTokens.textSecondary }]}>
|
||||
{detailError ?? '暂时无法加载榜单,请稍后再试。'}
|
||||
{detailError ?? t('challengeDetail.leaderboard.loadFailed')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -146,7 +148,7 @@ export default function ChallengeLeaderboardScreen() {
|
||||
|
||||
return (
|
||||
<View style={[styles.safeArea, { backgroundColor: '#f3f4fb' }]}>
|
||||
<HeaderBar title="排行榜" onBack={() => router.back()} withSafeTop />
|
||||
<HeaderBar title={t('challengeDetail.leaderboard.title')} onBack={() => router.back()} withSafeTop />
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={{ paddingBottom: insets.bottom + 40, paddingTop: safeAreaTop }}
|
||||
@@ -178,7 +180,7 @@ export default function ChallengeLeaderboardScreen() {
|
||||
{showInitialRankingLoading ? (
|
||||
<View style={styles.rankingLoading}>
|
||||
<ActivityIndicator color={colorTokens.primary} />
|
||||
<Text style={[styles.loadingText, { color: colorTokens.textSecondary }]}>加载榜单中…</Text>
|
||||
<Text style={[styles.loadingText, { color: colorTokens.textSecondary }]}>{t('challengeDetail.leaderboard.loading')}</Text>
|
||||
</View>
|
||||
) : rankingData.length ? (
|
||||
rankingData.map((item, index) => (
|
||||
@@ -196,18 +198,18 @@ export default function ChallengeLeaderboardScreen() {
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.emptyRanking}>
|
||||
<Text style={styles.emptyRankingText}>榜单即将开启,快来抢占席位。</Text>
|
||||
<Text style={styles.emptyRankingText}>{t('challengeDetail.leaderboard.empty')}</Text>
|
||||
</View>
|
||||
)}
|
||||
{isLoadingMore ? (
|
||||
<View style={styles.loadMoreIndicator}>
|
||||
<ActivityIndicator color={colorTokens.primary} size="small" />
|
||||
<Text style={[styles.loadingText, { color: colorTokens.textSecondary, marginTop: 8 }]}>加载更多…</Text>
|
||||
<Text style={[styles.loadingText, { color: colorTokens.textSecondary, marginTop: 8 }]}>{t('challengeDetail.leaderboard.loadMore')}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
{rankingLoadMoreStatus === 'failed' ? (
|
||||
<View style={styles.loadMoreIndicator}>
|
||||
<Text style={styles.loadMoreErrorText}>加载更多失败,请下拉刷新重试</Text>
|
||||
<Text style={styles.loadMoreErrorText}>{t('challengeDetail.leaderboard.loadMoreFailed')}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import i18n from '@/i18n';
|
||||
import dayjs from 'dayjs';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import * as Clipboard from 'expo-clipboard';
|
||||
import { Image } from 'expo-image';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
@@ -27,22 +28,33 @@ import { Colors } from '@/constants/Colors';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useCosUpload } from '@/hooks/useCosUpload';
|
||||
import { ChallengeType, type CreateCustomChallengePayload } from '@/services/challengesApi';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import {
|
||||
ChallengeType,
|
||||
type CreateCustomChallengePayload,
|
||||
type UpdateCustomChallengePayload,
|
||||
} from '@/services/challengesApi';
|
||||
import { store } from '@/store';
|
||||
import {
|
||||
createCustomChallengeThunk,
|
||||
fetchChallenges,
|
||||
selectChallengeById,
|
||||
selectCreateChallengeError,
|
||||
selectCreateChallengeStatus,
|
||||
selectUpdateChallengeError,
|
||||
selectUpdateChallengeStatus,
|
||||
updateCustomChallengeThunk
|
||||
} from '@/store/challengesSlice';
|
||||
import { Toast } from '@/utils/toast.utils';
|
||||
|
||||
const typeOptions: { value: ChallengeType; label: string; accent: string }[] = [
|
||||
{ value: ChallengeType.WATER, label: '喝水', accent: '#5E8BFF' },
|
||||
{ value: ChallengeType.EXERCISE, label: '运动', accent: '#6B6CFF' },
|
||||
{ value: ChallengeType.DIET, label: '饮食', accent: '#38BDF8' },
|
||||
{ value: ChallengeType.SLEEP, label: '睡眠', accent: '#7C3AED' },
|
||||
{ value: ChallengeType.MOOD, label: '心情', accent: '#F97316' },
|
||||
{ value: ChallengeType.WEIGHT, label: '体重', accent: '#22C55E' },
|
||||
const getTypeOptions = (t: (key: string) => string): { value: ChallengeType; label: string; accent: string }[] => [
|
||||
{ value: ChallengeType.WATER, label: t('challenges.createCustom.typeLabels.water'), accent: '#5E8BFF' },
|
||||
{ value: ChallengeType.EXERCISE, label: t('challenges.createCustom.typeLabels.exercise'), accent: '#6B6CFF' },
|
||||
{ value: ChallengeType.DIET, label: t('challenges.createCustom.typeLabels.diet'), accent: '#38BDF8' },
|
||||
{ value: ChallengeType.SLEEP, label: t('challenges.createCustom.typeLabels.sleep'), accent: '#7C3AED' },
|
||||
{ value: ChallengeType.MOOD, label: t('challenges.createCustom.typeLabels.mood'), accent: '#F97316' },
|
||||
{ value: ChallengeType.WEIGHT, label: t('challenges.createCustom.typeLabels.weight'), accent: '#22C55E' },
|
||||
{ value: ChallengeType.CUSTOM, label: t('challenges.createCustom.typeLabels.custom'), accent: '#8B5CF6' },
|
||||
];
|
||||
|
||||
const FALLBACK_IMAGE =
|
||||
@@ -51,6 +63,9 @@ const FALLBACK_IMAGE =
|
||||
type PickerType = 'start' | 'end' | null;
|
||||
|
||||
export default function CreateCustomChallengeScreen() {
|
||||
const { id, mode } = useLocalSearchParams<{ id?: string; mode?: 'edit' }>();
|
||||
const isEditMode = mode === 'edit' && !!id;
|
||||
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
const dispatch = useAppDispatch();
|
||||
@@ -58,7 +73,14 @@ export default function CreateCustomChallengeScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const createStatus = useAppSelector(selectCreateChallengeStatus);
|
||||
const createError = useAppSelector(selectCreateChallengeError);
|
||||
const updateError = useAppSelector(selectUpdateChallengeError);
|
||||
const updateStatus = useAppSelector(selectUpdateChallengeStatus);
|
||||
const inlineError = isEditMode ? updateError : createError;
|
||||
|
||||
const isCreating = createStatus === 'loading';
|
||||
const isUpdating = updateStatus === 'loading';
|
||||
const { t } = useI18n();
|
||||
const typeOptions = useMemo(() => getTypeOptions(t), [t]);
|
||||
|
||||
const today = useMemo(() => dayjs().startOf('day').toDate(), []);
|
||||
const defaultEnd = useMemo(() => dayjs().add(21, 'day').startOf('day').toDate(), []);
|
||||
@@ -74,10 +96,10 @@ export default function CreateCustomChallengeScreen() {
|
||||
const [minimumCheckInDays, setMinimumCheckInDays] = useState('');
|
||||
const [requirementLabel, setRequirementLabel] = useState('');
|
||||
const [summary, setSummary] = useState('');
|
||||
const [progressUnit] = useState('天');
|
||||
const [progressUnit, setProgressUnit] = useState('');
|
||||
const [periodLabel, setPeriodLabel] = useState('');
|
||||
const [periodEdited, setPeriodEdited] = useState(false);
|
||||
const [rankingDescription] = useState('连续打卡榜');
|
||||
const [rankingDescription] = useState(t('challenges.createCustom.rankingDescription'));
|
||||
const [isPublic, setIsPublic] = useState(true);
|
||||
const [maxParticipants, setMaxParticipants] = useState('100');
|
||||
const [minimumEdited, setMinimumEdited] = useState(false);
|
||||
@@ -88,6 +110,28 @@ export default function CreateCustomChallengeScreen() {
|
||||
|
||||
const [pickerType, setPickerType] = useState<PickerType>(null);
|
||||
|
||||
// 编辑模式下预填充数据
|
||||
useEffect(() => {
|
||||
if (isEditMode && id) {
|
||||
const challengeSelector = selectChallengeById(id);
|
||||
const challenge = challengeSelector(store.getState());
|
||||
if (challenge) {
|
||||
setTitle(challenge.title || '');
|
||||
setImage(challenge.image);
|
||||
setType(challenge.type);
|
||||
setStartDate(new Date(challenge.startAt || Date.now()));
|
||||
setEndDate(new Date(challenge.endAt || Date.now()));
|
||||
setTargetValue(String(challenge.progress?.target || ''));
|
||||
setMinimumCheckInDays(String(challenge.minimumCheckInDays || ''));
|
||||
setSummary(challenge.summary || '');
|
||||
setProgressUnit(challenge.unit || '');
|
||||
setPeriodLabel(challenge.periodLabel || '');
|
||||
setIsPublic(challenge.isPublic ?? true);
|
||||
setMaxParticipants(challenge.maxParticipants?.toString() || '100');
|
||||
}
|
||||
}
|
||||
}, [isEditMode, id]);
|
||||
|
||||
const durationDays = useMemo(
|
||||
() =>
|
||||
Math.max(
|
||||
@@ -96,16 +140,16 @@ export default function CreateCustomChallengeScreen() {
|
||||
),
|
||||
[startDate, endDate]
|
||||
);
|
||||
const durationLabel = useMemo(() => `持续${durationDays}天`, [durationDays]);
|
||||
const durationLabel = useMemo(() => t('challenges.createCustom.durationDays', { days: durationDays }), [durationDays, t]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!periodEdited) {
|
||||
setPeriodLabel(`${durationDays}天挑战`);
|
||||
setPeriodLabel(t('challenges.createCustom.durationDaysChallenge', { days: durationDays }));
|
||||
}
|
||||
if (!minimumEdited) {
|
||||
setMinimumCheckInDays(String(durationDays));
|
||||
}
|
||||
}, [durationDays, minimumEdited, periodEdited]);
|
||||
}, [durationDays, minimumEdited, periodEdited, t]);
|
||||
|
||||
const handleConfirmDate = (date: Date) => {
|
||||
if (!pickerType) return;
|
||||
@@ -128,47 +172,43 @@ export default function CreateCustomChallengeScreen() {
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (isCreating) return;
|
||||
if (isCreating || isUpdating) return;
|
||||
if (!title.trim()) {
|
||||
Toast.warning('请填写挑战标题');
|
||||
Toast.warning(t('challenges.createCustom.alerts.titleRequired'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!requirementLabel.trim()) {
|
||||
Toast.warning('请填写挑战要求说明');
|
||||
return;
|
||||
}
|
||||
|
||||
const startTimestamp = dayjs(startDate).valueOf();
|
||||
const endTimestamp = dayjs(endDate).valueOf();
|
||||
if (endTimestamp <= startTimestamp) {
|
||||
Toast.warning('结束时间需要晚于开始时间');
|
||||
Toast.warning(t('challenges.createCustom.alerts.endTimeError'));
|
||||
return;
|
||||
}
|
||||
|
||||
const target = Number(targetValue);
|
||||
if (!Number.isFinite(target) || target < 1 || target > 1000) {
|
||||
Toast.warning('每日目标值需在 1-1000 之间');
|
||||
Toast.warning(t('challenges.createCustom.alerts.targetValueError'));
|
||||
return;
|
||||
}
|
||||
|
||||
const minDays = Number(minimumCheckInDays) || durationDays;
|
||||
if (!Number.isFinite(minDays) || minDays < 1 || minDays > 365) {
|
||||
Toast.warning('最少打卡天数需在 1-365 之间');
|
||||
Toast.warning(t('challenges.createCustom.alerts.minimumDaysError'));
|
||||
return;
|
||||
}
|
||||
if (minDays > durationDays) {
|
||||
Toast.warning('最少打卡天数不能超过持续天数');
|
||||
Toast.warning(t('challenges.createCustom.alerts.minimumDaysExceedError'));
|
||||
return;
|
||||
}
|
||||
|
||||
const maxP = maxParticipants ? Number(maxParticipants) : null;
|
||||
if (maxP !== null && (!Number.isFinite(maxP) || maxP < 2 || maxP > 10000)) {
|
||||
Toast.warning('参与人数需在 2-10000 之间,或留空表示无限制');
|
||||
Toast.warning(t('challenges.createCustom.alerts.participantsError'));
|
||||
return;
|
||||
}
|
||||
|
||||
const safeTitle = title.trim() || '自定义挑战';
|
||||
const safeTitle = title.trim() || t('challenges.createCustom.defaultTitle');
|
||||
const payload: CreateCustomChallengePayload = {
|
||||
title: safeTitle,
|
||||
type,
|
||||
@@ -178,24 +218,39 @@ export default function CreateCustomChallengeScreen() {
|
||||
targetValue: target,
|
||||
minimumCheckInDays: minDays,
|
||||
durationLabel,
|
||||
requirementLabel: requirementLabel.trim() || '请填写挑战要求',
|
||||
requirementLabel: '',
|
||||
summary: summary.trim() || undefined,
|
||||
progressUnit: progressUnit.trim() || '天',
|
||||
progressUnit: progressUnit.trim(),
|
||||
periodLabel: periodLabel.trim() || undefined,
|
||||
rankingDescription: rankingDescription.trim() || undefined,
|
||||
isPublic,
|
||||
maxParticipants: maxP,
|
||||
};
|
||||
|
||||
const updatePayload: UpdateCustomChallengePayload = {
|
||||
title: safeTitle,
|
||||
image: image?.trim() || undefined,
|
||||
summary: summary.trim() || undefined,
|
||||
isPublic,
|
||||
maxParticipants: maxP ?? undefined,
|
||||
};
|
||||
|
||||
try {
|
||||
if (isEditMode && id) {
|
||||
await dispatch(updateCustomChallengeThunk({ id, payload: updatePayload })).unwrap();
|
||||
Toast.success(t('challenges.createCustom.alerts.updateSuccess'));
|
||||
dispatch(fetchChallenges());
|
||||
return;
|
||||
}
|
||||
|
||||
const created = await dispatch(createCustomChallengeThunk(payload)).unwrap();
|
||||
setShareCode(created.shareCode ?? null);
|
||||
setCreatedChallengeId(created.id);
|
||||
setShareModalVisible(true);
|
||||
Toast.success('自定义挑战已创建');
|
||||
Toast.success(t('challenges.createCustom.alerts.createSuccess'));
|
||||
dispatch(fetchChallenges());
|
||||
} catch (error) {
|
||||
const message = typeof error === 'string' ? error : '创建失败,请稍后再试';
|
||||
const message = typeof error === 'string' ? error : t('challenges.createCustom.alerts.createFailed');
|
||||
Toast.error(message);
|
||||
}
|
||||
};
|
||||
@@ -203,7 +258,7 @@ export default function CreateCustomChallengeScreen() {
|
||||
const handleCopyShareCode = async () => {
|
||||
if (!shareCode) return;
|
||||
await Clipboard.setStringAsync(shareCode);
|
||||
Toast.success('邀请码已复制');
|
||||
Toast.success(t('challenges.createCustom.shareModal.copyCode'));
|
||||
};
|
||||
|
||||
const handleTargetInputChange = (value: string) => {
|
||||
@@ -235,16 +290,16 @@ export default function CreateCustomChallengeScreen() {
|
||||
|
||||
const handlePickImage = useCallback(() => {
|
||||
Alert.alert(
|
||||
'选择封面图',
|
||||
'请选择封面来源',
|
||||
t('challenges.createCustom.imageUpload.selectSource'),
|
||||
t('challenges.createCustom.imageUpload.selectMessage'),
|
||||
[
|
||||
{
|
||||
text: '拍照',
|
||||
text: t('challenges.createCustom.imageUpload.camera'),
|
||||
onPress: async () => {
|
||||
try {
|
||||
const permission = await ImagePicker.requestCameraPermissionsAsync();
|
||||
if (permission.status !== 'granted') {
|
||||
Alert.alert('权限不足', '需要相机权限以拍摄封面');
|
||||
Alert.alert(t('challenges.createCustom.imageUpload.cameraPermission'), t('challenges.createCustom.imageUpload.cameraPermissionMessage'));
|
||||
return;
|
||||
}
|
||||
const result = await ImagePicker.launchCameraAsync({
|
||||
@@ -269,21 +324,21 @@ export default function CreateCustomChallengeScreen() {
|
||||
setImagePreview(null);
|
||||
} catch (error) {
|
||||
console.error('[CHALLENGE] 封面上传失败', error);
|
||||
Alert.alert('上传失败', '封面上传失败,请稍后重试');
|
||||
Alert.alert(t('challenges.createCustom.imageUpload.uploadFailed'), t('challenges.createCustom.imageUpload.uploadFailedMessage'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[CHALLENGE] 拍照失败', error);
|
||||
Alert.alert('拍照失败', '无法打开相机,请稍后再试');
|
||||
Alert.alert(t('challenges.createCustom.imageUpload.cameraFailed'), t('challenges.createCustom.imageUpload.cameraFailedMessage'));
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '从相册选择',
|
||||
text: t('challenges.createCustom.imageUpload.album'),
|
||||
onPress: async () => {
|
||||
try {
|
||||
const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
if (permission.status !== 'granted') {
|
||||
Alert.alert('权限不足', '需要相册权限以选择封面');
|
||||
Alert.alert(t('challenges.createCustom.imageUpload.cameraPermission'), t('challenges.createCustom.imageUpload.albumPermissionMessage'));
|
||||
return;
|
||||
}
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
@@ -307,19 +362,19 @@ export default function CreateCustomChallengeScreen() {
|
||||
setImagePreview(null);
|
||||
} catch (error) {
|
||||
console.error('[CHALLENGE] 封面上传失败', error);
|
||||
Alert.alert('上传失败', '封面上传失败,请稍后重试');
|
||||
Alert.alert(t('challenges.createCustom.imageUpload.uploadFailed'), t('challenges.createCustom.imageUpload.uploadFailedMessage'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[CHALLENGE] 选择封面失败', error);
|
||||
Alert.alert('选择失败', '无法打开相册,请稍后再试');
|
||||
Alert.alert(t('challenges.createCustom.imageUpload.selectFailed'), t('challenges.createCustom.imageUpload.selectFailedMessage'));
|
||||
}
|
||||
},
|
||||
},
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{ text: t('challenges.createCustom.imageUpload.cancel'), style: 'cancel' },
|
||||
],
|
||||
{ cancelable: true }
|
||||
);
|
||||
}, [upload]);
|
||||
}, [upload, t]);
|
||||
|
||||
const handleViewChallenge = () => {
|
||||
setShareModalVisible(false);
|
||||
@@ -370,7 +425,7 @@ export default function CreateCustomChallengeScreen() {
|
||||
</View>
|
||||
);
|
||||
|
||||
const progressMeta = `${durationDays} 天 · ${progressUnit || '天'}`;
|
||||
const progressMeta = `${durationDays} ${t('challenges.createCustom.dayUnit')}${progressUnit ? ` · ${progressUnit}` : ''}`;
|
||||
const heroImageSource = imagePreview || image || FALLBACK_IMAGE;
|
||||
|
||||
return (
|
||||
@@ -379,7 +434,7 @@ export default function CreateCustomChallengeScreen() {
|
||||
colors={[colorTokens.backgroundGradientStart, colorTokens.backgroundGradientEnd]}
|
||||
style={StyleSheet.absoluteFillObject}
|
||||
/>
|
||||
<HeaderBar title="新建挑战" transparent />
|
||||
<HeaderBar title={isEditMode ? t('challenges.createCustom.editTitle') : t('challenges.createCustom.title')} transparent />
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1 }}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
@@ -403,20 +458,20 @@ export default function CreateCustomChallengeScreen() {
|
||||
style={StyleSheet.absoluteFillObject}
|
||||
/>
|
||||
<View style={styles.heroOverlay}>
|
||||
<Text style={styles.heroKicker}>自定义挑战</Text>
|
||||
<Text style={styles.heroTitle}>{title || '你的专属挑战'}</Text>
|
||||
<Text style={styles.heroKicker}>{t('challenges.customChallenges')}</Text>
|
||||
<Text style={styles.heroTitle}>{title || t('challenges.createCustom.yourChallenge')}</Text>
|
||||
<Text style={styles.heroMeta}>{progressMeta}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.formCard}>
|
||||
<View style={styles.formHeader}>
|
||||
<Text style={styles.sectionTitle}>基础信息</Text>
|
||||
{createError ? <Text style={styles.inlineError}>{createError}</Text> : null}
|
||||
<Text style={styles.sectionTitle}>{t('challenges.createCustom.basicInfo')}</Text>
|
||||
{inlineError ? <Text style={styles.inlineError}>{inlineError}</Text> : null}
|
||||
</View>
|
||||
{renderField('标题', title, setTitle, '挑战标题(最多100字)')}
|
||||
{renderField(t('challenges.createCustom.fields.title'), title, setTitle, t('challenges.createCustom.fields.titlePlaceholder'))}
|
||||
<View style={styles.fieldBlock}>
|
||||
<Text style={styles.fieldLabel}>封面图</Text>
|
||||
<Text style={styles.fieldLabel}>{t('challenges.createCustom.fields.coverImage')}</Text>
|
||||
<View style={styles.uploadRow}>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.9}
|
||||
@@ -424,7 +479,7 @@ export default function CreateCustomChallengeScreen() {
|
||||
onPress={handlePickImage}
|
||||
disabled={uploading}
|
||||
>
|
||||
<Text style={styles.uploadButtonLabel}>{uploading ? '上传中…' : '上传封面'}</Text>
|
||||
<Text style={styles.uploadButtonLabel}>{uploading ? t('challenges.createCustom.imageUpload.uploading') : t('challenges.createCustom.fields.uploadCover')}</Text>
|
||||
</TouchableOpacity>
|
||||
{image || imagePreview ? (
|
||||
<TouchableOpacity
|
||||
@@ -434,20 +489,20 @@ export default function CreateCustomChallengeScreen() {
|
||||
setImage(undefined);
|
||||
}}
|
||||
>
|
||||
<Text style={styles.clearUpload}>清除</Text>
|
||||
<Text style={styles.clearUpload}>{t('challenges.createCustom.imageUpload.clear')}</Text>
|
||||
</TouchableOpacity>
|
||||
) : null}
|
||||
</View>
|
||||
<Text style={styles.helperText}>建议比例 16:9,清晰展示挑战氛围</Text>
|
||||
<Text style={styles.helperText}>{t('challenges.createCustom.imageUpload.helper')}</Text>
|
||||
</View>
|
||||
{renderTextarea('挑战说明', summary, setSummary, '简单介绍这个挑战的目标与要求')}
|
||||
{renderTextarea(t('challenges.createCustom.fields.challengeDescription'), summary, setSummary, t('challenges.createCustom.fields.descriptionPlaceholder'))}
|
||||
</View>
|
||||
|
||||
<View style={styles.formCard}>
|
||||
<Text style={styles.sectionTitle}>挑战设置</Text>
|
||||
<Text style={styles.sectionTitle}>{t('challenges.createCustom.challengeSettings')}</Text>
|
||||
|
||||
<View style={styles.fieldBlock}>
|
||||
<Text style={styles.fieldLabel}>挑战类型</Text>
|
||||
<Text style={styles.fieldLabel}>{t('challenges.createCustom.fields.challengeType')}</Text>
|
||||
<View style={styles.chipRow}>
|
||||
{typeOptions.map((option) => {
|
||||
const active = option.value === type;
|
||||
@@ -455,16 +510,19 @@ export default function CreateCustomChallengeScreen() {
|
||||
<TouchableOpacity
|
||||
key={option.value}
|
||||
activeOpacity={0.9}
|
||||
onPress={() => setType(option.value)}
|
||||
onPress={() => !isEditMode && setType(option.value)}
|
||||
disabled={isEditMode}
|
||||
style={[
|
||||
styles.chip,
|
||||
active && { backgroundColor: `${option.accent}1A`, borderColor: option.accent },
|
||||
isEditMode && styles.chipDisabled,
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.chipLabel,
|
||||
active && { color: option.accent, fontWeight: '700' },
|
||||
isEditMode && styles.chipLabelDisabled,
|
||||
]}
|
||||
>
|
||||
{option.label}
|
||||
@@ -473,17 +531,18 @@ export default function CreateCustomChallengeScreen() {
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
<Text style={styles.helperText}>{t('challenges.createCustom.fields.challengeTypeHelper')}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.fieldBlock}>
|
||||
<Text style={styles.fieldLabel}>时间范围</Text>
|
||||
<Text style={styles.fieldLabel}>{t('challenges.createCustom.fields.timeRange')}</Text>
|
||||
<View style={styles.dateRow}>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.9}
|
||||
style={styles.datePill}
|
||||
onPress={() => setPickerType('start')}
|
||||
>
|
||||
<Text style={styles.dateLabel}>开始</Text>
|
||||
<Text style={styles.dateLabel}>{t('challenges.createCustom.fields.start')}</Text>
|
||||
<Text style={styles.dateValue}>{dayjs(startDate).format('YYYY.MM.DD')}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
@@ -491,7 +550,7 @@ export default function CreateCustomChallengeScreen() {
|
||||
style={styles.datePill}
|
||||
onPress={() => setPickerType('end')}
|
||||
>
|
||||
<Text style={styles.dateLabel}>结束</Text>
|
||||
<Text style={styles.dateLabel}>{t('challenges.createCustom.fields.end')}</Text>
|
||||
<Text style={styles.dateValue}>{dayjs(endDate).format('YYYY.MM.DD')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -499,48 +558,59 @@ export default function CreateCustomChallengeScreen() {
|
||||
|
||||
<View style={styles.inlineFields}>
|
||||
<View style={styles.fieldBlock}>
|
||||
<Text style={styles.fieldLabel}>持续时间</Text>
|
||||
<Text style={styles.fieldLabel}>{t('challenges.createCustom.fields.duration')}</Text>
|
||||
<View style={styles.readonlyPill}>
|
||||
<Text style={styles.readonlyText}>{durationLabel}</Text>
|
||||
</View>
|
||||
</View>
|
||||
{renderField('周期标签', periodLabel, (v) => {
|
||||
{renderField(t('challenges.createCustom.fields.periodLabel'), periodLabel, (v) => {
|
||||
setPeriodEdited(true);
|
||||
setPeriodLabel(v);
|
||||
}, '如:21天挑战')}
|
||||
}, t('challenges.createCustom.fields.periodLabelPlaceholder'))}
|
||||
</View>
|
||||
|
||||
<View style={styles.inlineFields}>
|
||||
{renderField('每日目标值', targetValue, handleTargetInputChange, '如:8', 'numeric')}
|
||||
<View style={styles.fieldBlock}>
|
||||
<Text style={styles.fieldLabel}>进度单位</Text>
|
||||
<View style={styles.readonlyPill}>
|
||||
<Text style={styles.readonlyText}>{progressUnit}</Text>
|
||||
</View>
|
||||
<View style={styles.fieldBlock}>
|
||||
<Text style={styles.fieldLabel}>{t('challenges.createCustom.fields.dailyTargetAndUnit')}</Text>
|
||||
<View style={styles.targetUnitRow}>
|
||||
<TextInput
|
||||
value={targetValue}
|
||||
onChangeText={handleTargetInputChange}
|
||||
placeholder={t('challenges.createCustom.fields.dailyTargetPlaceholder')}
|
||||
placeholderTextColor="#9ca3af"
|
||||
style={[styles.input, styles.targetInput]}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
<TextInput
|
||||
value={progressUnit}
|
||||
onChangeText={setProgressUnit}
|
||||
placeholder={t('challenges.createCustom.fields.unitPlaceholder')}
|
||||
placeholderTextColor="#9ca3af"
|
||||
style={[styles.input, styles.unitInput]}
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.helperText}>{t('challenges.createCustom.fields.unitHelper')}</Text>
|
||||
</View>
|
||||
|
||||
{renderField('最少打卡天数', minimumCheckInDays, handleMinimumDaysChange, '至少1天', 'numeric')}
|
||||
{renderField(t('challenges.createCustom.fields.minimumCheckInDays'), minimumCheckInDays, handleMinimumDaysChange, t('challenges.createCustom.fields.minimumCheckInDaysPlaceholder'), 'numeric')}
|
||||
|
||||
{renderField('挑战要求说明', requirementLabel, setRequirementLabel, '例如:每日完成 30 分钟运动')}
|
||||
</View>
|
||||
|
||||
<View style={styles.formCard}>
|
||||
<Text style={styles.sectionTitle}>展示&互动</Text>
|
||||
<Text style={styles.sectionTitle}>{t('challenges.createCustom.displayInteraction')}</Text>
|
||||
<View style={styles.inlineFields}>
|
||||
{renderField('参与人数上限', maxParticipants, (v) => {
|
||||
{renderField(t('challenges.createCustom.fields.maxParticipants'), maxParticipants, (v) => {
|
||||
const digits = v.replace(/\D/g, '');
|
||||
if (!digits) {
|
||||
setMaxParticipants('');
|
||||
return;
|
||||
}
|
||||
setMaxParticipants(String(parseInt(digits, 10)));
|
||||
}, '留空表示无限制', 'numeric')}
|
||||
}, t('challenges.createCustom.fields.noLimit'), 'numeric')}
|
||||
</View>
|
||||
<View style={styles.switchRow}>
|
||||
<View>
|
||||
<Text style={styles.fieldLabel}>是否公开</Text>
|
||||
<Text style={styles.switchHint}>公开后其他用户可通过邀请码加入</Text>
|
||||
<Text style={styles.fieldLabel}>{t('challenges.createCustom.fields.isPublic')}</Text>
|
||||
<Text style={styles.switchHint}>{t('challenges.createCustom.fields.publicDescription')}</Text>
|
||||
</View>
|
||||
<Switch
|
||||
value={isPublic}
|
||||
@@ -557,14 +627,24 @@ export default function CreateCustomChallengeScreen() {
|
||||
<BlurView intensity={14} tint="light" style={styles.floatingBlur}>
|
||||
<View style={styles.floatingContent}>
|
||||
<View style={styles.floatingCopy}>
|
||||
<Text style={styles.floatingTitle}>生成自定义挑战</Text>
|
||||
<Text style={styles.floatingSubtitle}>自动创建分享码,邀请好友一起挑战</Text>
|
||||
<Text style={styles.floatingTitle}>
|
||||
{isEditMode
|
||||
? t('challenges.createCustom.floatingCTA.editTitle')
|
||||
: t('challenges.createCustom.floatingCTA.title')
|
||||
}
|
||||
</Text>
|
||||
<Text style={styles.floatingSubtitle}>
|
||||
{isEditMode
|
||||
? t('challenges.createCustom.floatingCTA.editSubtitle')
|
||||
: t('challenges.createCustom.floatingCTA.subtitle')
|
||||
}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.9}
|
||||
style={styles.floatingButton}
|
||||
onPress={handleSubmit}
|
||||
disabled={isCreating}
|
||||
disabled={isCreating || isUpdating}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#5E8BFF', '#6B6CFF']}
|
||||
@@ -573,7 +653,14 @@ export default function CreateCustomChallengeScreen() {
|
||||
style={styles.floatingButtonBackground}
|
||||
>
|
||||
<Text style={styles.floatingButtonLabel}>
|
||||
{isCreating ? '创建中…' : '创建并生成邀请码'}
|
||||
{isCreating
|
||||
? t('challenges.createCustom.buttons.creating')
|
||||
: isUpdating
|
||||
? t('challenges.createCustom.buttons.updating')
|
||||
: isEditMode
|
||||
? t('challenges.createCustom.buttons.updateAndSave')
|
||||
: t('challenges.createCustom.buttons.createAndGenerateCode')
|
||||
}
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
@@ -588,6 +675,9 @@ export default function CreateCustomChallengeScreen() {
|
||||
minimumDate={pickerType === 'end' ? dayjs(startDate).add(1, 'day').toDate() : dayjs().add(1, 'day').toDate()}
|
||||
onConfirm={handleConfirmDate}
|
||||
onCancel={() => setPickerType(null)}
|
||||
locale={i18n.language}
|
||||
confirmTextIOS={t('challenges.createCustom.datePicker.confirm')}
|
||||
cancelTextIOS={t('challenges.createCustom.datePicker.cancel')}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
@@ -598,10 +688,10 @@ export default function CreateCustomChallengeScreen() {
|
||||
>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.shareCard}>
|
||||
<Text style={styles.shareTitle}>邀请码已生成</Text>
|
||||
<Text style={styles.shareSubtitle}>分享给好友即可加入挑战</Text>
|
||||
<Text style={styles.shareTitle}>{t('challenges.createCustom.shareModal.title')}</Text>
|
||||
<Text style={styles.shareSubtitle}>{t('challenges.createCustom.shareModal.subtitle')}</Text>
|
||||
<View style={styles.shareCodeBadge}>
|
||||
<Text style={styles.shareCode}>{shareCode ?? '获取中…'}</Text>
|
||||
<Text style={styles.shareCode}>{shareCode ?? t('challenges.createCustom.shareModal.generatingCode')}</Text>
|
||||
</View>
|
||||
<View style={styles.shareActions}>
|
||||
<TouchableOpacity
|
||||
@@ -610,7 +700,7 @@ export default function CreateCustomChallengeScreen() {
|
||||
onPress={handleCopyShareCode}
|
||||
disabled={!shareCode}
|
||||
>
|
||||
<Text style={styles.shareButtonGhostLabel}>复制邀请码</Text>
|
||||
<Text style={styles.shareButtonGhostLabel}>{t('challenges.createCustom.shareModal.copyCode')}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.9}
|
||||
@@ -623,7 +713,7 @@ export default function CreateCustomChallengeScreen() {
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.shareButtonPrimary}
|
||||
>
|
||||
<Text style={styles.shareButtonPrimaryLabel}>查看挑战</Text>
|
||||
<Text style={styles.shareButtonPrimaryLabel}>{t('challenges.createCustom.shareModal.viewChallenge')}</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -632,7 +722,7 @@ export default function CreateCustomChallengeScreen() {
|
||||
activeOpacity={0.8}
|
||||
onPress={() => setShareModalVisible(false)}
|
||||
>
|
||||
<Text style={styles.shareCloseLabel}>稍后再说</Text>
|
||||
<Text style={styles.shareCloseLabel}>{t('challenges.createCustom.shareModal.later')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
@@ -720,6 +810,16 @@ const styles = StyleSheet.create({
|
||||
fontSize: 15,
|
||||
color: '#111827',
|
||||
},
|
||||
targetUnitRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
targetInput: {
|
||||
flex: 1,
|
||||
},
|
||||
unitInput: {
|
||||
flex: 1,
|
||||
},
|
||||
textarea: {
|
||||
minHeight: 90,
|
||||
},
|
||||
@@ -736,10 +836,17 @@ const styles = StyleSheet.create({
|
||||
borderWidth: 1,
|
||||
borderColor: '#e5e7eb',
|
||||
},
|
||||
chipDisabled: {
|
||||
opacity: 0.5,
|
||||
backgroundColor: '#f1f5f9',
|
||||
},
|
||||
chipLabel: {
|
||||
fontSize: 13,
|
||||
color: '#334155',
|
||||
},
|
||||
chipLabelDisabled: {
|
||||
color: '#94a3b8',
|
||||
},
|
||||
uploadRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
|
||||
@@ -25,6 +25,7 @@ const CIRCUMFERENCE_TYPES = [
|
||||
{ key: 'calfCircumference', label: '小腿围', color: '#DDA0DD' },
|
||||
];
|
||||
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import { CircumferencePeriod } from '@/services/circumferenceAnalysis';
|
||||
|
||||
@@ -35,6 +36,7 @@ export default function CircumferenceDetailScreen() {
|
||||
const dispatch = useAppDispatch();
|
||||
const userProfile = useAppSelector(selectUserProfile);
|
||||
const { ensureLoggedIn } = useAuthGuard();
|
||||
const { t } = useI18n();
|
||||
|
||||
// 日期相关状态
|
||||
const [selectedIndex, setSelectedIndex] = useState(getTodayIndexInMonth());
|
||||
@@ -78,37 +80,37 @@ export default function CircumferenceDetailScreen() {
|
||||
const measurements = [
|
||||
{
|
||||
key: 'chestCircumference',
|
||||
label: '胸围',
|
||||
label: t('circumferenceDetail.measurements.chest'),
|
||||
value: userProfile?.chestCircumference,
|
||||
color: '#FF6B6B',
|
||||
},
|
||||
{
|
||||
key: 'waistCircumference',
|
||||
label: '腰围',
|
||||
label: t('circumferenceDetail.measurements.waist'),
|
||||
value: userProfile?.waistCircumference,
|
||||
color: '#4ECDC4',
|
||||
},
|
||||
{
|
||||
key: 'upperHipCircumference',
|
||||
label: '上臀围',
|
||||
label: t('circumferenceDetail.measurements.upperHip'),
|
||||
value: userProfile?.upperHipCircumference,
|
||||
color: '#45B7D1',
|
||||
},
|
||||
{
|
||||
key: 'armCircumference',
|
||||
label: '臂围',
|
||||
label: t('circumferenceDetail.measurements.arm'),
|
||||
value: userProfile?.armCircumference,
|
||||
color: '#96CEB4',
|
||||
},
|
||||
{
|
||||
key: 'thighCircumference',
|
||||
label: '大腿围',
|
||||
label: t('circumferenceDetail.measurements.thigh'),
|
||||
value: userProfile?.thighCircumference,
|
||||
color: '#FFEAA7',
|
||||
},
|
||||
{
|
||||
key: 'calfCircumference',
|
||||
label: '小腿围',
|
||||
label: t('circumferenceDetail.measurements.calf'),
|
||||
value: userProfile?.calfCircumference,
|
||||
color: '#DDA0DD',
|
||||
},
|
||||
@@ -243,10 +245,10 @@ export default function CircumferenceDetailScreen() {
|
||||
// 将YYYY-MM-DD格式转换为第几周
|
||||
const weekOfYear = dayjs(item.label).week();
|
||||
const firstWeekOfMonth = dayjs(item.label).startOf('month').week();
|
||||
return `第${weekOfYear - firstWeekOfMonth + 1}周`;
|
||||
return t('circumferenceDetail.chart.weekLabel', { week: weekOfYear - firstWeekOfMonth + 1 });
|
||||
case 'year':
|
||||
// 将YYYY-MM格式转换为月份
|
||||
return dayjs(item.label).format('M月');
|
||||
return t('circumferenceDetail.chart.monthLabel', { month: dayjs(item.label).format('M') });
|
||||
default:
|
||||
return item.label;
|
||||
}
|
||||
@@ -287,7 +289,7 @@ export default function CircumferenceDetailScreen() {
|
||||
|
||||
{/* 头部导航 */}
|
||||
<HeaderBar
|
||||
title="围度统计"
|
||||
title={t('circumferenceDetail.title')}
|
||||
transparent
|
||||
/>
|
||||
|
||||
@@ -338,7 +340,7 @@ export default function CircumferenceDetailScreen() {
|
||||
|
||||
{/* 围度统计 */}
|
||||
<View style={styles.statsCard}>
|
||||
<Text style={styles.statsTitle}>围度统计</Text>
|
||||
<Text style={styles.statsTitle}>{t('circumferenceDetail.title')}</Text>
|
||||
|
||||
{/* Tab 切换 */}
|
||||
<View style={styles.tabContainer}>
|
||||
@@ -348,7 +350,7 @@ export default function CircumferenceDetailScreen() {
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={[styles.tabText, activeTab === 'week' && styles.activeTabText]}>
|
||||
按周
|
||||
{t('circumferenceDetail.tabs.week')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
@@ -357,7 +359,7 @@ export default function CircumferenceDetailScreen() {
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={[styles.tabText, activeTab === 'month' && styles.activeTabText]}>
|
||||
按月
|
||||
{t('circumferenceDetail.tabs.month')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
@@ -366,7 +368,7 @@ export default function CircumferenceDetailScreen() {
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={[styles.tabText, activeTab === 'year' && styles.activeTabText]}>
|
||||
按年
|
||||
{t('circumferenceDetail.tabs.year')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -390,7 +392,7 @@ export default function CircumferenceDetailScreen() {
|
||||
styles.legendText,
|
||||
!isVisible && styles.legendTextHidden
|
||||
]}>
|
||||
{type.label}
|
||||
{t(`circumferenceDetail.measurements.${type.key.replace('Circumference', '')}`)}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
@@ -401,17 +403,17 @@ export default function CircumferenceDetailScreen() {
|
||||
{isLoading ? (
|
||||
<View style={styles.loadingChart}>
|
||||
<ActivityIndicator size="large" color="#4ECDC4" />
|
||||
<Text style={styles.loadingText}>加载中...</Text>
|
||||
<Text style={styles.loadingText}>{t('circumferenceDetail.loading')}</Text>
|
||||
</View>
|
||||
) : error ? (
|
||||
<View style={styles.errorChart}>
|
||||
<Text style={styles.errorText}>加载失败: {error}</Text>
|
||||
<Text style={styles.errorText}>{t('circumferenceDetail.error')}: {error}</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.retryButton}
|
||||
onPress={() => dispatch(fetchCircumferenceAnalysis(activeTab))}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.retryText}>重试</Text>
|
||||
<Text style={styles.retryText}>{t('circumferenceDetail.retry')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : processedChartData.datasets.length > 0 ? (
|
||||
@@ -453,8 +455,8 @@ export default function CircumferenceDetailScreen() {
|
||||
<View style={styles.emptyChart}>
|
||||
<Text style={styles.emptyChartText}>
|
||||
{processedChartData.datasets.length === 0 && !isLoading && !error
|
||||
? '暂无数据'
|
||||
: '请选择要显示的围度数据'
|
||||
? t('circumferenceDetail.chart.empty')
|
||||
: t('circumferenceDetail.chart.noSelection')
|
||||
}
|
||||
</Text>
|
||||
</View>
|
||||
@@ -469,12 +471,12 @@ export default function CircumferenceDetailScreen() {
|
||||
setModalVisible(false);
|
||||
setSelectedMeasurement(null);
|
||||
}}
|
||||
title={selectedMeasurement ? `设置${selectedMeasurement.label}` : '设置围度'}
|
||||
title={selectedMeasurement ? t('circumferenceDetail.modal.title', { label: selectedMeasurement.label }) : t('circumferenceDetail.modal.defaultTitle')}
|
||||
items={circumferenceOptions}
|
||||
selectedValue={selectedMeasurement?.currentValue}
|
||||
onValueChange={() => { }} // Real-time update not needed
|
||||
onConfirm={handleUpdateMeasurement}
|
||||
confirmButtonText="确认"
|
||||
confirmButtonText={t('circumferenceDetail.modal.confirm')}
|
||||
pickerHeight={180}
|
||||
/>
|
||||
</View>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { ThemedView } from '@/components/ThemedView';
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import {
|
||||
fetchActivityRingsForDate,
|
||||
@@ -34,6 +35,8 @@ import {
|
||||
TouchableOpacity,
|
||||
View
|
||||
} from 'react-native';
|
||||
import 'dayjs/locale/en';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
// 配置 dayjs 插件
|
||||
dayjs.extend(utc);
|
||||
@@ -51,7 +54,8 @@ type WeekData = {
|
||||
};
|
||||
|
||||
export default function FitnessRingsDetailScreen() {
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
const { t, i18n } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop();
|
||||
const colorScheme = useColorScheme();
|
||||
const [weekData, setWeekData] = useState<WeekData[]>([]);
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
||||
@@ -82,7 +86,7 @@ export default function FitnessRingsDetailScreen() {
|
||||
exerciseInfoAnim.setValue(0);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载锻炼分钟说明偏好失败:', error);
|
||||
console.error(t('fitnessRingsDetail.errors.loadExerciseInfoPreference'), error);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -98,7 +102,15 @@ export default function FitnessRingsDetailScreen() {
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const currentDay = startOfWeek.add(i, 'day');
|
||||
const isToday = currentDay.isSame(today, 'day');
|
||||
const dayNames = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
||||
const dayNames = [
|
||||
t('fitnessRingsDetail.weekDays.monday'),
|
||||
t('fitnessRingsDetail.weekDays.tuesday'),
|
||||
t('fitnessRingsDetail.weekDays.wednesday'),
|
||||
t('fitnessRingsDetail.weekDays.thursday'),
|
||||
t('fitnessRingsDetail.weekDays.friday'),
|
||||
t('fitnessRingsDetail.weekDays.saturday'),
|
||||
t('fitnessRingsDetail.weekDays.sunday')
|
||||
];
|
||||
|
||||
try {
|
||||
const activityRingsData = await fetchActivityRingsForDate(currentDay.toDate());
|
||||
@@ -164,8 +176,9 @@ export default function FitnessRingsDetailScreen() {
|
||||
|
||||
// 格式化头部显示的日期
|
||||
const formatHeaderDate = (date: Date) => {
|
||||
const dayJsDate = dayjs(date).tz('Asia/Shanghai');
|
||||
return `${dayJsDate.format('YYYY年MM月DD日')}`;
|
||||
const dayJsDate = dayjs(date).tz('Asia/Shanghai').locale(i18n.language === 'zh' ? 'zh-cn' : 'en');
|
||||
const dateFormat = t('fitnessRingsDetail.dateFormats.header', { defaultValue: 'YYYY年MM月DD日' });
|
||||
return dayJsDate.format(dateFormat);
|
||||
};
|
||||
|
||||
const renderWeekRingItem = (item: WeekData, index: number) => {
|
||||
@@ -303,7 +316,7 @@ export default function FitnessRingsDetailScreen() {
|
||||
setShowExerciseInfo(false);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('保存锻炼分钟说明偏好失败:', error);
|
||||
console.error(t('fitnessRingsDetail.errors.saveExerciseInfoPreference'), error);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -380,7 +393,7 @@ export default function FitnessRingsDetailScreen() {
|
||||
{/* 活动热量卡片 */}
|
||||
<View style={styles.metricCard}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.cardTitle}>活动热量</Text>
|
||||
<Text style={styles.cardTitle}>{t('fitnessRingsDetail.cards.activeCalories.title')}</Text>
|
||||
<TouchableOpacity style={styles.helpButton}>
|
||||
<Text style={styles.helpIcon}>?</Text>
|
||||
</TouchableOpacity>
|
||||
@@ -390,25 +403,25 @@ export default function FitnessRingsDetailScreen() {
|
||||
<Text style={[styles.valueText, { color: '#FF3B30' }]}>
|
||||
{Math.round(activeEnergyBurned)}/{activeEnergyBurnedGoal}
|
||||
</Text>
|
||||
<Text style={styles.unitText}>千卡</Text>
|
||||
<Text style={styles.unitText}>{t('fitnessRingsDetail.cards.activeCalories.unit')}</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.cardSubtext}>
|
||||
{Math.round(activeEnergyBurned)}千卡
|
||||
{Math.round(activeEnergyBurned)}{t('fitnessRingsDetail.cards.activeCalories.unit')}
|
||||
</Text>
|
||||
|
||||
{renderBarChart(
|
||||
hourlyCaloriesData.map(h => h.calories),
|
||||
Math.max(activeEnergyBurnedGoal / 24, 1),
|
||||
'#FF3B30',
|
||||
'千卡'
|
||||
t('fitnessRingsDetail.cards.activeCalories.unit')
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 锻炼分钟卡片 */}
|
||||
<View style={styles.metricCard}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.cardTitle}>锻炼分钟数</Text>
|
||||
<Text style={styles.cardTitle}>{t('fitnessRingsDetail.cards.exerciseMinutes.title')}</Text>
|
||||
<TouchableOpacity style={styles.helpButton}>
|
||||
<Text style={styles.helpIcon}>?</Text>
|
||||
</TouchableOpacity>
|
||||
@@ -418,18 +431,18 @@ export default function FitnessRingsDetailScreen() {
|
||||
<Text style={[styles.valueText, { color: '#FF9500' }]}>
|
||||
{Math.round(appleExerciseTime)}/{appleExerciseTimeGoal}
|
||||
</Text>
|
||||
<Text style={styles.unitText}>分钟</Text>
|
||||
<Text style={styles.unitText}>{t('fitnessRingsDetail.cards.exerciseMinutes.unit')}</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.cardSubtext}>
|
||||
{Math.round(appleExerciseTime)}分钟
|
||||
{Math.round(appleExerciseTime)}{t('fitnessRingsDetail.cards.exerciseMinutes.unit')}
|
||||
</Text>
|
||||
|
||||
{renderBarChart(
|
||||
hourlyExerciseData.map(h => h.minutes),
|
||||
Math.max(appleExerciseTimeGoal / 8, 1),
|
||||
'#FF9500',
|
||||
'分钟'
|
||||
t('fitnessRingsDetail.cards.exerciseMinutes.unit')
|
||||
)}
|
||||
|
||||
{/* 锻炼分钟说明 */}
|
||||
@@ -450,15 +463,15 @@ export default function FitnessRingsDetailScreen() {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Text style={styles.exerciseTitle}>锻炼分钟数:</Text>
|
||||
<Text style={styles.exerciseTitle}>{t('fitnessRingsDetail.cards.exerciseMinutes.info.title')}</Text>
|
||||
<Text style={styles.exerciseDesc}>
|
||||
进行强度不低于"快走"的运动锻炼,就会积累对应时长的锻炼分钟数。
|
||||
{t('fitnessRingsDetail.cards.exerciseMinutes.info.description')}
|
||||
</Text>
|
||||
<Text style={styles.exerciseRecommendation}>
|
||||
世卫组织推荐的成年人每天至少保持30分钟以上的中高强度运动。
|
||||
{t('fitnessRingsDetail.cards.exerciseMinutes.info.recommendation')}
|
||||
</Text>
|
||||
<TouchableOpacity style={styles.knowButton} onPress={handleKnowButtonPress}>
|
||||
<Text style={styles.knowButtonText}>知道了</Text>
|
||||
<Text style={styles.knowButtonText}>{t('fitnessRingsDetail.cards.exerciseMinutes.info.knowButton')}</Text>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
)}
|
||||
@@ -467,7 +480,7 @@ export default function FitnessRingsDetailScreen() {
|
||||
{/* 活动小时数卡片 */}
|
||||
<View style={styles.metricCard}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.cardTitle}>活动小时数</Text>
|
||||
<Text style={styles.cardTitle}>{t('fitnessRingsDetail.cards.standHours.title')}</Text>
|
||||
<TouchableOpacity style={styles.helpButton}>
|
||||
<Text style={styles.helpIcon}>?</Text>
|
||||
</TouchableOpacity>
|
||||
@@ -477,18 +490,18 @@ export default function FitnessRingsDetailScreen() {
|
||||
<Text style={[styles.valueText, { color: '#007AFF' }]}>
|
||||
{Math.round(appleStandHours)}/{appleStandHoursGoal}
|
||||
</Text>
|
||||
<Text style={styles.unitText}>小时</Text>
|
||||
<Text style={styles.unitText}>{t('fitnessRingsDetail.cards.standHours.unit')}</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.cardSubtext}>
|
||||
{Math.round(appleStandHours)}小时
|
||||
{Math.round(appleStandHours)}{t('fitnessRingsDetail.cards.standHours.unit')}
|
||||
</Text>
|
||||
|
||||
{renderBarChart(
|
||||
hourlyStandData.map(h => h.hasStood),
|
||||
1,
|
||||
'#007AFF',
|
||||
'小时'
|
||||
t('fitnessRingsDetail.cards.standHours.unit')
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
@@ -536,9 +549,9 @@ export default function FitnessRingsDetailScreen() {
|
||||
{/* 周闭环天数统计 */}
|
||||
<View style={styles.statsContainer}>
|
||||
<View style={styles.statRow}>
|
||||
<Text style={[styles.statLabel, { color: Colors[colorScheme ?? 'light'].text }]}>周闭环天数</Text>
|
||||
<Text style={[styles.statLabel, { color: Colors[colorScheme ?? 'light'].text }]}>{t('fitnessRingsDetail.stats.weeklyClosedRings')}</Text>
|
||||
<View style={styles.statValue}>
|
||||
<Text style={[styles.statNumber, { color: Colors[colorScheme ?? 'light'].text }]}>{getClosedRingCount()}天</Text>
|
||||
<Text style={[styles.statNumber, { color: Colors[colorScheme ?? 'light'].text }]}>{getClosedRingCount()}{t('fitnessRingsDetail.stats.daysUnit')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@@ -559,7 +572,7 @@ export default function FitnessRingsDetailScreen() {
|
||||
display={Platform.OS === 'ios' ? 'inline' : 'calendar'}
|
||||
minimumDate={new Date(2020, 0, 1)}
|
||||
maximumDate={new Date()}
|
||||
{...(Platform.OS === 'ios' ? { locale: 'zh-CN' } : {})}
|
||||
{...(Platform.OS === 'ios' ? { locale: i18n.language === 'zh' ? 'zh-CN' : 'en-US' } : {})}
|
||||
onChange={(event, date) => {
|
||||
if (Platform.OS === 'ios') {
|
||||
if (date) setPickerDate(date);
|
||||
@@ -575,12 +588,12 @@ export default function FitnessRingsDetailScreen() {
|
||||
{Platform.OS === 'ios' && (
|
||||
<View style={styles.modalActions}>
|
||||
<Pressable onPress={closeDatePicker} style={[styles.modalBtn]}>
|
||||
<Text style={styles.modalBtnText}>取消</Text>
|
||||
<Text style={styles.modalBtnText}>{t('fitnessRingsDetail.datePicker.cancel')}</Text>
|
||||
</Pressable>
|
||||
<Pressable onPress={() => {
|
||||
onConfirmDate(pickerDate);
|
||||
}} style={[styles.modalBtn, styles.modalBtnPrimary]}>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary]}>确定</Text>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary]}>{t('fitnessRingsDetail.datePicker.confirm')}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
)}
|
||||
@@ -874,4 +887,4 @@ const styles = StyleSheet.create({
|
||||
color: '#FFFFFF',
|
||||
fontWeight: '700',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -3,6 +3,7 @@ import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { ROUTES } from '@/constants/Routes';
|
||||
import { useAppSelector } from '@/hooks/redux';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import { addDietRecord, type CreateDietRecordDto, type MealType } from '@/services/dietRecords';
|
||||
import { selectFoodRecognitionResult } from '@/store/foodRecognitionSlice';
|
||||
@@ -65,15 +66,8 @@ const mockFoodItems = [
|
||||
}
|
||||
];
|
||||
|
||||
// 餐次映射
|
||||
const MEAL_TYPE_MAP = {
|
||||
breakfast: '早餐',
|
||||
lunch: '午餐',
|
||||
dinner: '晚餐',
|
||||
snack: '加餐'
|
||||
};
|
||||
|
||||
export default function FoodAnalysisResultScreen() {
|
||||
const { t } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
const router = useRouter();
|
||||
const params = useLocalSearchParams<{
|
||||
@@ -190,6 +184,15 @@ export default function FoodAnalysisResultScreen() {
|
||||
}
|
||||
};
|
||||
|
||||
// 餐次映射
|
||||
const MEAL_TYPE_MAP = {
|
||||
breakfast: t('nutritionRecords.mealTypes.breakfast'),
|
||||
lunch: t('nutritionRecords.mealTypes.lunch'),
|
||||
dinner: t('nutritionRecords.mealTypes.dinner'),
|
||||
snack: t('nutritionRecords.mealTypes.snack'),
|
||||
other: t('nutritionRecords.mealTypes.other'),
|
||||
};
|
||||
|
||||
// 计算所有食物的总营养数据
|
||||
const totalCalories = foodItems.reduce((sum, item) => sum + item.calories, 0);
|
||||
const totalProtein = foodItems.reduce((sum, item) => sum + item.protein, 0);
|
||||
@@ -253,24 +256,24 @@ export default function FoodAnalysisResultScreen() {
|
||||
|
||||
// 餐次选择选项
|
||||
const mealOptions = [
|
||||
{ key: 'breakfast' as const, label: '早餐', color: '#FF6B35' },
|
||||
{ key: 'lunch' as const, label: '午餐', color: '#4CAF50' },
|
||||
{ key: 'dinner' as const, label: '晚餐', color: '#2196F3' },
|
||||
{ key: 'snack' as const, label: '加餐', color: '#FF9800' },
|
||||
{ key: 'breakfast' as const, label: t('nutritionRecords.mealTypes.breakfast'), color: '#FF6B35' },
|
||||
{ key: 'lunch' as const, label: t('nutritionRecords.mealTypes.lunch'), color: '#4CAF50' },
|
||||
{ key: 'dinner' as const, label: t('nutritionRecords.mealTypes.dinner'), color: '#2196F3' },
|
||||
{ key: 'snack' as const, label: t('nutritionRecords.mealTypes.snack'), color: '#FF9800' },
|
||||
];
|
||||
|
||||
if (!imageUri && !recognitionResult) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<HeaderBar
|
||||
title="分析结果"
|
||||
title={t('foodAnalysisResult.title')}
|
||||
onBack={() => router.back()}
|
||||
/>
|
||||
<View style={{
|
||||
paddingTop: safeAreaTop
|
||||
}} />
|
||||
<View style={styles.errorContainer}>
|
||||
<Text style={styles.errorText}>未找到图片或识别结果</Text>
|
||||
<Text style={styles.errorText}>{t('foodAnalysisResult.error.notFound')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@@ -287,7 +290,7 @@ export default function FoodAnalysisResultScreen() {
|
||||
/>
|
||||
|
||||
<HeaderBar
|
||||
title="分析结果"
|
||||
title={t('foodAnalysisResult.title')}
|
||||
onBack={() => router.back()}
|
||||
transparent={true}
|
||||
/>
|
||||
@@ -316,7 +319,7 @@ export default function FoodAnalysisResultScreen() {
|
||||
<View style={styles.placeholderContainer}>
|
||||
<View style={styles.placeholderContent}>
|
||||
<Ionicons name="restaurant-outline" size={48} color="#666" />
|
||||
<Text style={styles.placeholderText}>营养记录</Text>
|
||||
<Text style={styles.placeholderText}>{t('foodAnalysisResult.placeholder')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
@@ -325,8 +328,8 @@ export default function FoodAnalysisResultScreen() {
|
||||
<View style={styles.descriptionBubble}>
|
||||
<Text style={styles.descriptionText}>
|
||||
{recognitionResult ?
|
||||
`置信度: ${recognitionResult.confidence}%` :
|
||||
dayjs().format('YYYY年M月D日')
|
||||
t('foodAnalysisResult.confidence', { value: recognitionResult.confidence }) :
|
||||
dayjs().format(t('foodAnalysisResult.dateFormats.today'))
|
||||
}
|
||||
</Text>
|
||||
</View>
|
||||
@@ -337,31 +340,31 @@ export default function FoodAnalysisResultScreen() {
|
||||
{/* 卡路里 */}
|
||||
<View style={styles.calorieSection}>
|
||||
<Text style={styles.calorieValue}>{totalCalories}</Text>
|
||||
<Text style={styles.calorieUnit}>千卡</Text>
|
||||
<Text style={styles.calorieUnit}>{t('foodAnalysisResult.nutrients.caloriesUnit')}</Text>
|
||||
</View>
|
||||
|
||||
{/* 营养圆环图 */}
|
||||
<View style={styles.nutritionRings}>
|
||||
<NutritionRing
|
||||
label="蛋白质"
|
||||
label={t('foodAnalysisResult.nutrients.protein')}
|
||||
value={totalProtein.toFixed(1)}
|
||||
unit="克"
|
||||
unit={t('foodAnalysisResult.nutrients.unit')}
|
||||
percentage={Math.min(100, proteinPercentage)}
|
||||
color="#4CAF50"
|
||||
resetToken={animationTrigger}
|
||||
/>
|
||||
<NutritionRing
|
||||
label="脂肪"
|
||||
label={t('foodAnalysisResult.nutrients.fat')}
|
||||
value={totalFat.toFixed(1)}
|
||||
unit="克"
|
||||
unit={t('foodAnalysisResult.nutrients.unit')}
|
||||
percentage={Math.min(100, fatPercentage)}
|
||||
color="#FF9800"
|
||||
resetToken={animationTrigger}
|
||||
/>
|
||||
<NutritionRing
|
||||
label="碳水"
|
||||
label={t('foodAnalysisResult.nutrients.carbs')}
|
||||
value={totalCarbohydrate.toFixed(1)}
|
||||
unit="克"
|
||||
unit={t('foodAnalysisResult.nutrients.unit')}
|
||||
percentage={Math.min(100, carbohydratePercentage)}
|
||||
color="#2196F3"
|
||||
resetToken={animationTrigger}
|
||||
@@ -372,7 +375,7 @@ export default function FoodAnalysisResultScreen() {
|
||||
{/* 食物摄入部分 */}
|
||||
<View style={styles.foodIntakeSection}>
|
||||
<Text style={styles.foodIntakeTitle}>
|
||||
{recognitionResult ? '识别结果' : '食物摄入'}
|
||||
{recognitionResult ? t('foodAnalysisResult.sections.recognitionResult') : t('foodAnalysisResult.sections.foodIntake')}
|
||||
</Text>
|
||||
{recognitionResult && recognitionResult.analysisText && (
|
||||
<Text style={styles.analysisText}>{recognitionResult.analysisText}</Text>
|
||||
@@ -384,15 +387,15 @@ export default function FoodAnalysisResultScreen() {
|
||||
<View style={styles.nonFoodIcon}>
|
||||
<Ionicons name="alert-circle-outline" size={48} color="#FF9800" />
|
||||
</View>
|
||||
<Text style={styles.nonFoodTitle}>未识别到食物</Text>
|
||||
<Text style={styles.nonFoodTitle}>{t('foodAnalysisResult.nonFood.title')}</Text>
|
||||
<Text style={styles.nonFoodMessage}>
|
||||
{recognitionResult.nonFoodMessage || recognitionResult.analysisText}
|
||||
</Text>
|
||||
<View style={styles.nonFoodSuggestions}>
|
||||
<Text style={styles.nonFoodSuggestionsTitle}>建议:</Text>
|
||||
<Text style={styles.nonFoodSuggestionItem}>• 确保图片中包含食物</Text>
|
||||
<Text style={styles.nonFoodSuggestionItem}>• 尝试更清晰的照片角度</Text>
|
||||
<Text style={styles.nonFoodSuggestionItem}>• 避免过度模糊或光线不足</Text>
|
||||
<Text style={styles.nonFoodSuggestionsTitle}>{t('foodAnalysisResult.nonFood.suggestions.title')}</Text>
|
||||
<Text style={styles.nonFoodSuggestionItem}>{t('foodAnalysisResult.nonFood.suggestions.item1')}</Text>
|
||||
<Text style={styles.nonFoodSuggestionItem}>{t('foodAnalysisResult.nonFood.suggestions.item2')}</Text>
|
||||
<Text style={styles.nonFoodSuggestionItem}>{t('foodAnalysisResult.nonFood.suggestions.item3')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
@@ -411,7 +414,7 @@ export default function FoodAnalysisResultScreen() {
|
||||
</View>
|
||||
|
||||
<View style={styles.foodIntakeCalories}>
|
||||
<Text style={styles.foodIntakeCaloriesValue}>{item.calories}千卡</Text>
|
||||
<Text style={styles.foodIntakeCaloriesValue}>{item.calories}{t('foodAnalysisResult.nutrients.caloriesUnit')}</Text>
|
||||
{shouldHideRecordBar ? null : <TouchableOpacity
|
||||
style={styles.editButton}
|
||||
onPress={() => handleEditFood(item)}
|
||||
@@ -442,7 +445,7 @@ export default function FoodAnalysisResultScreen() {
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Ionicons name="camera-outline" size={20} color={Colors.light.onPrimary} style={{ marginRight: 8 }} />
|
||||
<Text style={styles.retakePhotoButtonText}>重新拍照</Text>
|
||||
<Text style={styles.retakePhotoButtonText}>{t('foodAnalysisResult.actions.retake')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : (
|
||||
@@ -471,7 +474,7 @@ export default function FoodAnalysisResultScreen() {
|
||||
{isRecording ? (
|
||||
<ActivityIndicator size="small" color="#FFF" />
|
||||
) : (
|
||||
<Text style={styles.recordButtonText}>记录</Text>
|
||||
<Text style={styles.recordButtonText}>{t('foodAnalysisResult.actions.record')}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -492,7 +495,7 @@ export default function FoodAnalysisResultScreen() {
|
||||
/>
|
||||
<View style={styles.mealSelectorModal}>
|
||||
<View style={styles.mealSelectorHeader}>
|
||||
<Text style={styles.mealSelectorTitle}>选择餐次</Text>
|
||||
<Text style={styles.mealSelectorTitle}>{t('foodAnalysisResult.mealSelector.title')}</Text>
|
||||
<TouchableOpacity onPress={() => setShowMealSelector(false)}>
|
||||
<Ionicons name="close" size={24} color="#666" />
|
||||
</TouchableOpacity>
|
||||
@@ -539,8 +542,8 @@ export default function FoodAnalysisResultScreen() {
|
||||
<View style={styles.imageViewerHeader}>
|
||||
<Text style={styles.imageViewerHeaderText}>
|
||||
{recognitionResult ?
|
||||
`置信度: ${recognitionResult.confidence}%` :
|
||||
dayjs().format('YYYY年M月D日 HH:mm')
|
||||
t('foodAnalysisResult.confidence', { value: recognitionResult.confidence }) :
|
||||
dayjs().format(t('foodAnalysisResult.dateFormats.full'))
|
||||
}
|
||||
</Text>
|
||||
</View>
|
||||
@@ -551,7 +554,7 @@ export default function FoodAnalysisResultScreen() {
|
||||
style={styles.imageViewerFooterButton}
|
||||
onPress={() => setShowImagePreview(false)}
|
||||
>
|
||||
<Text style={styles.imageViewerFooterButtonText}>关闭</Text>
|
||||
<Text style={styles.imageViewerFooterButtonText}>{t('foodAnalysisResult.actions.close')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
@@ -587,6 +590,8 @@ function FoodEditModal({
|
||||
onFormDataChange({ ...formData, [field]: value });
|
||||
};
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
@@ -598,14 +603,14 @@ function FoodEditModal({
|
||||
<View style={styles.editModalSheet}>
|
||||
<View style={styles.modalHandle} />
|
||||
|
||||
<Text style={styles.modalTitle}>编辑食物信息</Text>
|
||||
<Text style={styles.modalTitle}>{t('foodAnalysisResult.editModal.title')}</Text>
|
||||
|
||||
{/* 食物名称 */}
|
||||
<View style={styles.editFieldContainer}>
|
||||
<Text style={styles.editFieldLabel}>食物名称</Text>
|
||||
<Text style={styles.editFieldLabel}>{t('foodAnalysisResult.editModal.fields.name')}</Text>
|
||||
<TextInput
|
||||
style={styles.editInput}
|
||||
placeholder="输入食物名称"
|
||||
placeholder={t('foodAnalysisResult.editModal.fields.namePlaceholder')}
|
||||
placeholderTextColor="#999"
|
||||
value={formData.name}
|
||||
onChangeText={(value) => handleFieldChange('name', value)}
|
||||
@@ -615,10 +620,10 @@ function FoodEditModal({
|
||||
|
||||
{/* 重量/数量 */}
|
||||
<View style={styles.editFieldContainer}>
|
||||
<Text style={styles.editFieldLabel}>重量 (克)</Text>
|
||||
<Text style={styles.editFieldLabel}>{t('foodAnalysisResult.editModal.fields.amount')}</Text>
|
||||
<TextInput
|
||||
style={styles.editInput}
|
||||
placeholder="输入重量"
|
||||
placeholder={t('foodAnalysisResult.editModal.fields.amountPlaceholder')}
|
||||
placeholderTextColor="#999"
|
||||
value={formData.amount}
|
||||
onChangeText={(value) => handleFieldChange('amount', value)}
|
||||
@@ -628,10 +633,10 @@ function FoodEditModal({
|
||||
|
||||
{/* 卡路里 */}
|
||||
<View style={styles.editFieldContainer}>
|
||||
<Text style={styles.editFieldLabel}>卡路里 (千卡)</Text>
|
||||
<Text style={styles.editFieldLabel}>{t('foodAnalysisResult.editModal.fields.calories')}</Text>
|
||||
<TextInput
|
||||
style={styles.editInput}
|
||||
placeholder="输入卡路里"
|
||||
placeholder={t('foodAnalysisResult.editModal.fields.caloriesPlaceholder')}
|
||||
placeholderTextColor="#999"
|
||||
value={formData.calories}
|
||||
onChangeText={(value) => handleFieldChange('calories', value)}
|
||||
@@ -645,13 +650,13 @@ function FoodEditModal({
|
||||
onPress={onClose}
|
||||
style={styles.modalCancelBtn}
|
||||
>
|
||||
<Text style={styles.modalCancelText}>取消</Text>
|
||||
<Text style={styles.modalCancelText}>{t('foodAnalysisResult.editModal.actions.cancel')}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={onSave}
|
||||
style={[styles.modalSaveBtn, { backgroundColor: Colors.light.primary }]}
|
||||
>
|
||||
<Text style={[styles.modalSaveText, { color: Colors.light.onPrimary }]}>保存</Text>
|
||||
<Text style={[styles.modalSaveText, { color: Colors.light.onPrimary }]}>{t('foodAnalysisResult.editModal.actions.save')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,6 @@
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import {
|
||||
deleteNutritionAnalysisRecord,
|
||||
@@ -30,6 +31,7 @@ import {
|
||||
import ImageViewing from 'react-native-image-viewing';
|
||||
|
||||
export default function NutritionAnalysisHistoryScreen() {
|
||||
const { t } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop();
|
||||
const router = useRouter();
|
||||
|
||||
@@ -95,15 +97,15 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
setHasMore(page < response.data.totalPages);
|
||||
setCurrentPage(page);
|
||||
} else {
|
||||
const errorMessage = response.message || '获取历史记录失败';
|
||||
const errorMessage = response.message || t('nutritionAnalysisHistory.errors.fetchFailed');
|
||||
setError(errorMessage);
|
||||
Alert.alert('错误', errorMessage);
|
||||
Alert.alert(t('nutritionAnalysisHistory.errors.error'), errorMessage);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[HISTORY] 获取历史记录失败:', error);
|
||||
const errorMessage = '获取历史记录失败,请稍后重试';
|
||||
const errorMessage = t('nutritionAnalysisHistory.errors.fetchFailedRetry');
|
||||
setError(errorMessage);
|
||||
Alert.alert('错误', errorMessage);
|
||||
Alert.alert(t('nutritionAnalysisHistory.errors.error'), errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
@@ -173,13 +175,13 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'success':
|
||||
return '成功';
|
||||
return t('nutritionAnalysisHistory.status.success');
|
||||
case 'failed':
|
||||
return '失败';
|
||||
return t('nutritionAnalysisHistory.status.failed');
|
||||
case 'processing':
|
||||
return '处理中';
|
||||
return t('nutritionAnalysisHistory.status.processing');
|
||||
default:
|
||||
return '未知';
|
||||
return t('nutritionAnalysisHistory.status.unknown');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -208,15 +210,15 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
// 处理删除记录
|
||||
const handleDeleteRecord = useCallback((recordId: number) => {
|
||||
Alert.alert(
|
||||
'确认删除',
|
||||
'确定要删除这条营养分析记录吗?此操作无法撤销。',
|
||||
t('nutritionAnalysisHistory.delete.confirmTitle'),
|
||||
t('nutritionAnalysisHistory.delete.confirmMessage'),
|
||||
[
|
||||
{
|
||||
text: '取消',
|
||||
text: t('nutritionAnalysisHistory.delete.cancel'),
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
text: t('nutritionAnalysisHistory.delete.delete'),
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
try {
|
||||
@@ -231,10 +233,10 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
triggerLightHaptic();
|
||||
|
||||
// 显示成功提示
|
||||
Alert.alert('成功', '记录已删除');
|
||||
Alert.alert(t('nutritionAnalysisHistory.delete.successTitle'), t('nutritionAnalysisHistory.delete.successMessage'));
|
||||
} catch (error) {
|
||||
console.error('[HISTORY] 删除记录失败:', error);
|
||||
Alert.alert('错误', '删除失败,请稍后重试');
|
||||
Alert.alert(t('nutritionAnalysisHistory.errors.error'), t('nutritionAnalysisHistory.errors.deleteFailed'));
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
}
|
||||
@@ -256,11 +258,11 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
<View style={styles.recordInfo}>
|
||||
{isSuccess && (
|
||||
<Text style={styles.recordTitle}>
|
||||
识别 {item.nutritionCount} 项营养素
|
||||
{t('nutritionAnalysisHistory.recognized', { count: item.nutritionCount })}
|
||||
</Text>
|
||||
)}
|
||||
<Text style={styles.recordDate}>
|
||||
{dayjs(item.createdAt).format('YYYY年M月D日 HH:mm')}
|
||||
{dayjs(item.createdAt).format(t('nutritionAnalysisHistory.dateFormat'))}
|
||||
</Text>
|
||||
<View style={[styles.statusBadge, { backgroundColor: getStatusColor(item.status) }]}>
|
||||
<Text style={styles.statusText}>{getStatusText(item.status)}</Text>
|
||||
@@ -327,25 +329,25 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
<>
|
||||
{mainNutrients.energy && (
|
||||
<View style={styles.nutritionItem}>
|
||||
<Text style={styles.nutritionLabel}>热量</Text>
|
||||
<Text style={styles.nutritionLabel}>{t('nutritionAnalysisHistory.nutrients.energy')}</Text>
|
||||
<Text style={styles.nutritionValue}>{mainNutrients.energy}</Text>
|
||||
</View>
|
||||
)}
|
||||
{mainNutrients.protein && (
|
||||
<View style={styles.nutritionItem}>
|
||||
<Text style={styles.nutritionLabel}>蛋白质</Text>
|
||||
<Text style={styles.nutritionLabel}>{t('nutritionAnalysisHistory.nutrients.protein')}</Text>
|
||||
<Text style={styles.nutritionValue}>{mainNutrients.protein}</Text>
|
||||
</View>
|
||||
)}
|
||||
{mainNutrients.carbs && (
|
||||
<View style={styles.nutritionItem}>
|
||||
<Text style={styles.nutritionLabel}>碳水</Text>
|
||||
<Text style={styles.nutritionLabel}>{t('nutritionAnalysisHistory.nutrients.carbs')}</Text>
|
||||
<Text style={styles.nutritionValue}>{mainNutrients.carbs}</Text>
|
||||
</View>
|
||||
)}
|
||||
{mainNutrients.fat && (
|
||||
<View style={styles.nutritionItem}>
|
||||
<Text style={styles.nutritionLabel}>脂肪</Text>
|
||||
<Text style={styles.nutritionLabel}>{t('nutritionAnalysisHistory.nutrients.fat')}</Text>
|
||||
<Text style={styles.nutritionValue}>{mainNutrients.fat}</Text>
|
||||
</View>
|
||||
)}
|
||||
@@ -371,7 +373,7 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.expandButtonText}>
|
||||
{isExpanded ? '收起详情' : '展开详情'}
|
||||
{isExpanded ? t('nutritionAnalysisHistory.actions.collapse') : t('nutritionAnalysisHistory.actions.expand')}
|
||||
</Text>
|
||||
<Ionicons
|
||||
name={isExpanded ? 'chevron-up-outline' : 'chevron-down-outline'}
|
||||
@@ -383,7 +385,7 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
{/* 详细信息 */}
|
||||
{isExpanded && isSuccess && item.analysisResult && item.analysisResult.data && (
|
||||
<View style={styles.detailsContainer}>
|
||||
<Text style={styles.detailsTitle}>详细营养成分</Text>
|
||||
<Text style={styles.detailsTitle}>{t('nutritionAnalysisHistory.details.title')}</Text>
|
||||
{item.analysisResult.data.map((nutritionItem: NutritionItem) => (
|
||||
<View key={nutritionItem.key} style={styles.detailItem}>
|
||||
<View style={styles.nutritionInfo}>
|
||||
@@ -397,8 +399,8 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
))}
|
||||
|
||||
<View style={styles.metaInfo}>
|
||||
<Text style={styles.metaText}>AI 模型: {item.aiModel}</Text>
|
||||
<Text style={styles.metaText}>服务提供商: {item.aiProvider}</Text>
|
||||
<Text style={styles.metaText}>{t('nutritionAnalysisHistory.details.aiModel')}: {item.aiModel}</Text>
|
||||
<Text style={styles.metaText}>{t('nutritionAnalysisHistory.details.provider')}: {item.aiProvider}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
@@ -410,8 +412,8 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
const renderEmptyState = () => (
|
||||
<View style={styles.emptyState}>
|
||||
<Ionicons name="document-text-outline" size={64} color="#CCC" />
|
||||
<Text style={styles.emptyStateText}>暂无历史记录</Text>
|
||||
<Text style={styles.emptyStateSubtext}>开始识别营养成分表吧</Text>
|
||||
<Text style={styles.emptyStateText}>{t('nutritionAnalysisHistory.empty.title')}</Text>
|
||||
<Text style={styles.emptyStateSubtext}>{t('nutritionAnalysisHistory.empty.subtitle')}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
@@ -419,8 +421,8 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
const renderErrorState = () => (
|
||||
<View style={styles.errorState}>
|
||||
<Ionicons name="alert-circle-outline" size={64} color="#F44336" />
|
||||
<Text style={styles.errorStateText}>加载失败</Text>
|
||||
<Text style={styles.errorStateSubtext}>{error || '未知错误'}</Text>
|
||||
<Text style={styles.errorStateText}>{t('nutritionAnalysisHistory.errors.loadFailed')}</Text>
|
||||
<Text style={styles.errorStateSubtext}>{error || t('nutritionAnalysisHistory.errors.unknownError')}</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.retryButton}
|
||||
onPress={() => {
|
||||
@@ -428,7 +430,7 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
fetchRecords(1, true);
|
||||
}}
|
||||
>
|
||||
<Text style={styles.retryButtonText}>重试</Text>
|
||||
<Text style={styles.retryButtonText}>{t('nutritionAnalysisHistory.actions.retry')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
@@ -440,7 +442,7 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
return (
|
||||
<View style={styles.loadingFooter}>
|
||||
<ActivityIndicator size="small" color={Colors.light.primary} />
|
||||
<Text style={styles.loadingFooterText}>加载更多...</Text>
|
||||
<Text style={styles.loadingFooterText}>{t('nutritionAnalysisHistory.loadingMore')}</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
@@ -456,7 +458,7 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
/>
|
||||
|
||||
<HeaderBar
|
||||
title="历史记录"
|
||||
title={t('nutritionAnalysisHistory.title')}
|
||||
onBack={() => router.back()}
|
||||
transparent={true}
|
||||
/>
|
||||
@@ -477,7 +479,7 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={[styles.filterButtonText, !statusFilter && styles.filterButtonTextActive]}>
|
||||
全部
|
||||
{t('nutritionAnalysisHistory.filter.all')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
@@ -494,7 +496,7 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={[styles.filterButtonText, statusFilter === 'success' && styles.filterButtonTextActive]}>
|
||||
成功
|
||||
{t('nutritionAnalysisHistory.status.success')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
@@ -511,7 +513,7 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={[styles.filterButtonText, statusFilter === 'failed' && styles.filterButtonTextActive]}>
|
||||
失败
|
||||
{t('nutritionAnalysisHistory.status.failed')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -520,7 +522,7 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
{loading ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color={Colors.light.primary} />
|
||||
<Text style={styles.loadingText}>加载历史记录...</Text>
|
||||
<Text style={styles.loadingText}>{t('nutritionAnalysisHistory.loading')}</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
@@ -555,7 +557,7 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
HeaderComponent={() => (
|
||||
<View style={styles.imageViewerHeader}>
|
||||
<Text style={styles.imageViewerHeaderText}>
|
||||
{dayjs().format('YYYY年M月D日 HH:mm')}
|
||||
{dayjs().format(t('nutritionAnalysisHistory.dateFormat'))}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
@@ -565,7 +567,7 @@ export default function NutritionAnalysisHistoryScreen() {
|
||||
style={styles.imageViewerFooterButton}
|
||||
onPress={() => setShowImagePreview(false)}
|
||||
>
|
||||
<Text style={styles.imageViewerFooterButtonText}>关闭</Text>
|
||||
<Text style={styles.imageViewerFooterButtonText}>{t('nutritionLabelAnalysis.actions.close')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import { useCosUpload } from '@/hooks/useCosUpload';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import {
|
||||
analyzeNutritionImage,
|
||||
@@ -29,6 +30,7 @@ import {
|
||||
import ImageViewing from 'react-native-image-viewing';
|
||||
|
||||
export default function NutritionLabelAnalysisScreen() {
|
||||
const { t } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop();
|
||||
const router = useRouter();
|
||||
const { pushIfAuthedElseLogin, ensureLoggedIn } = useAuthGuard();
|
||||
@@ -77,7 +79,7 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
const requestCameraPermission = async () => {
|
||||
const { status } = await ImagePicker.requestCameraPermissionsAsync();
|
||||
if (status !== 'granted') {
|
||||
Alert.alert('权限不足', '需要相机权限才能拍摄成分表');
|
||||
Alert.alert(t('nutritionLabelAnalysis.camera.permissionDenied'), t('nutritionLabelAnalysis.camera.permissionMessage'));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
@@ -153,7 +155,7 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
// 直接使用服务端返回的数据,不做任何转换
|
||||
setNewAnalysisResult(analysisResponse);
|
||||
} else {
|
||||
throw new Error(analysisResponse.message || '分析失败');
|
||||
throw new Error(analysisResponse.message || t('nutritionLabelAnalysis.errors.analysisFailed.defaultMessage'));
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('[NUTRITION_ANALYSIS] 新API分析失败:', error);
|
||||
@@ -162,8 +164,8 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
|
||||
// 显示错误提示
|
||||
Alert.alert(
|
||||
'分析失败',
|
||||
error.message || '无法识别成分表,请尝试拍摄更清晰的照片'
|
||||
t('nutritionLabelAnalysis.errors.analysisFailed.title'),
|
||||
error.message || t('nutritionLabelAnalysis.errors.analysisFailed.message')
|
||||
);
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
@@ -182,7 +184,7 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
/>
|
||||
|
||||
<HeaderBar
|
||||
title="成分表分析"
|
||||
title={t('nutritionLabelAnalysis.title')}
|
||||
onBack={() => router.back()}
|
||||
transparent={true}
|
||||
right={
|
||||
@@ -253,7 +255,7 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Ionicons name="search-outline" size={20} color="#FFF" />
|
||||
<Text style={styles.analyzeButtonText}>开始分析</Text>
|
||||
<Text style={styles.analyzeButtonText}>{t('nutritionLabelAnalysis.actions.startAnalysis')}</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
@@ -274,7 +276,7 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
<View style={styles.placeholderContainer}>
|
||||
<View style={styles.placeholderContent}>
|
||||
<Ionicons name="document-text-outline" size={48} color="#666" />
|
||||
<Text style={styles.placeholderText}>拍摄或选择成分表照片</Text>
|
||||
<Text style={styles.placeholderText}>{t('nutritionLabelAnalysis.placeholder.text')}</Text>
|
||||
</View>
|
||||
{/* 操作按钮区域 */}
|
||||
<View style={styles.imageActionButtonsContainer}>
|
||||
@@ -284,7 +286,7 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Ionicons name="camera-outline" size={20} color={Colors.light.onPrimary} />
|
||||
<Text style={styles.imageActionButtonText}>拍摄</Text>
|
||||
<Text style={styles.imageActionButtonText}>{t('nutritionLabelAnalysis.actions.takePhoto')}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.imageActionButton, styles.imageActionButtonSecondary]}
|
||||
@@ -292,7 +294,7 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Ionicons name="image-outline" size={20} color={Colors.light.primary} />
|
||||
<Text style={[styles.imageActionButtonText, { color: Colors.light.primary }]}>相册</Text>
|
||||
<Text style={[styles.imageActionButtonText, { color: Colors.light.primary }]}>{t('nutritionLabelAnalysis.actions.selectFromAlbum')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
@@ -307,7 +309,7 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
<View style={styles.analysisSectionHeaderIcon}>
|
||||
<Ionicons name="document-text-outline" size={18} color="#6B6ED6" />
|
||||
</View>
|
||||
<Text style={styles.analysisSectionTitle}>营养成分详细分析</Text>
|
||||
<Text style={styles.analysisSectionTitle}>{t('nutritionLabelAnalysis.results.title')}</Text>
|
||||
</View>
|
||||
<View style={styles.analysisCardsWrapper}>
|
||||
{newAnalysisResult.data.map((item, index) => (
|
||||
@@ -352,7 +354,7 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color={Colors.light.primary} />
|
||||
<Text style={styles.loadingText}>
|
||||
正在上传图片... {uploadProgress > 0 ? `${Math.round(uploadProgress)}%` : ''}
|
||||
{t('nutritionLabelAnalysis.status.uploading')} {uploadProgress > 0 ? `${Math.round(uploadProgress)}%` : ''}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
@@ -361,7 +363,7 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
{isAnalyzing && !newAnalysisResult && !isUploading && (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color={Colors.light.primary} />
|
||||
<Text style={styles.loadingText}>正在分析成分表...</Text>
|
||||
<Text style={styles.loadingText}>{t('nutritionLabelAnalysis.status.analyzing')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
@@ -377,7 +379,7 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
HeaderComponent={() => (
|
||||
<View style={styles.imageViewerHeader}>
|
||||
<Text style={styles.imageViewerHeaderText}>
|
||||
{dayjs().format('YYYY年M月D日 HH:mm')}
|
||||
{dayjs().format(t('nutritionLabelAnalysis.imageViewer.dateFormat'))}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
@@ -387,7 +389,7 @@ export default function NutritionLabelAnalysisScreen() {
|
||||
style={styles.imageViewerFooterButton}
|
||||
onPress={() => setShowImagePreview(false)}
|
||||
>
|
||||
<Text style={styles.imageViewerFooterButtonText}>关闭</Text>
|
||||
<Text style={styles.imageViewerFooterButtonText}>{t('nutritionLabelAnalysis.actions.close')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
@@ -514,7 +516,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
imageActionButtonText: {
|
||||
color: Colors.light.onPrimary,
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginLeft: 6,
|
||||
},
|
||||
|
||||
687
app/gallery/index.tsx
Normal file
687
app/gallery/index.tsx
Normal file
@@ -0,0 +1,687 @@
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { useMembershipModal } from '@/contexts/MembershipModalContext';
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import { useVipService } from '@/hooks/useVipService';
|
||||
import { AiReportRecord, generateAiReport, getAiReportHistory } from '@/services/aiReport';
|
||||
import { getAuthToken } from '@/services/api';
|
||||
import { Toast } from '@/utils/toast.utils';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import dayjs from 'dayjs';
|
||||
import * as FileSystem from 'expo-file-system/legacy';
|
||||
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
|
||||
import { Image as ExpoImage } from 'expo-image';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import * as MediaLibrary from 'expo-media-library';
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Animated,
|
||||
Platform,
|
||||
Pressable,
|
||||
RefreshControl,
|
||||
ScrollView,
|
||||
Share,
|
||||
StatusBar,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
useWindowDimensions
|
||||
} from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
export default function GalleryScreen() {
|
||||
const { t, i18n } = useTranslation();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { ensureLoggedIn } = useAuthGuard();
|
||||
const { checkServiceAccess } = useVipService();
|
||||
const { openMembershipModal } = useMembershipModal();
|
||||
const { width: screenWidth, height: screenHeight } = useWindowDimensions();
|
||||
|
||||
// 报告历史列表
|
||||
const [reports, setReports] = useState<AiReportRecord[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
||||
|
||||
const [isGeneratingReport, setIsGeneratingReport] = useState(false);
|
||||
const [reportImageUrl, setReportImageUrl] = useState<string | null>(null);
|
||||
const [reportLocalUri, setReportLocalUri] = useState<string | null>(null);
|
||||
const [reportModalVisible, setReportModalVisible] = useState(false);
|
||||
const [isSavingReport, setIsSavingReport] = useState(false);
|
||||
const [isSharingReport, setIsSharingReport] = useState(false);
|
||||
const reportSpinAnim = useRef(new Animated.Value(0)).current;
|
||||
const reportIconSpin = reportSpinAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: ['0deg', '360deg']
|
||||
});
|
||||
|
||||
const emptyImageHeight = useMemo(() => screenHeight / 1.5, [screenHeight]);
|
||||
|
||||
const todayString = useMemo(() => dayjs().format('YYYY-MM-DD'), []);
|
||||
|
||||
const reportImageSize = useMemo(() => {
|
||||
const maxWidth = Math.min(screenWidth - 40, 440);
|
||||
const maxHeight = screenHeight - 240;
|
||||
let width = maxWidth;
|
||||
let height = (maxWidth * 16) / 9;
|
||||
if (height > maxHeight) {
|
||||
height = maxHeight;
|
||||
width = (maxHeight * 9) / 16;
|
||||
}
|
||||
return { width, height };
|
||||
}, [screenHeight, screenWidth]);
|
||||
|
||||
// 加载报告历史
|
||||
const loadReports = useCallback(async (pageNum: number, refresh = false) => {
|
||||
try {
|
||||
const response = await getAiReportHistory({
|
||||
page: pageNum,
|
||||
pageSize: 10,
|
||||
status: 'success',
|
||||
});
|
||||
|
||||
if (refresh) {
|
||||
setReports(response.records);
|
||||
} else {
|
||||
setReports(prev => [...prev, ...response.records]);
|
||||
}
|
||||
setHasMore(pageNum < response.totalPages);
|
||||
setPage(pageNum);
|
||||
} catch (error: any) {
|
||||
console.error('load-ai-report-history-failed', error);
|
||||
if (refresh) {
|
||||
Toast.error(t('statistics.aiReport.loadFailed', '加载报告历史失败'));
|
||||
}
|
||||
}
|
||||
}, [t]);
|
||||
|
||||
// 初始加载
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
setIsLoading(true);
|
||||
await loadReports(1, true);
|
||||
setIsLoading(false);
|
||||
};
|
||||
init();
|
||||
}, [loadReports]);
|
||||
|
||||
// 下拉刷新
|
||||
const handleRefresh = useCallback(async () => {
|
||||
setIsRefreshing(true);
|
||||
await loadReports(1, true);
|
||||
setIsRefreshing(false);
|
||||
}, [loadReports]);
|
||||
|
||||
// 加载更多
|
||||
const handleLoadMore = useCallback(async () => {
|
||||
if (isLoadingMore || !hasMore) return;
|
||||
setIsLoadingMore(true);
|
||||
await loadReports(page + 1, false);
|
||||
setIsLoadingMore(false);
|
||||
}, [isLoadingMore, hasMore, page, loadReports]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isGeneratingReport) {
|
||||
reportSpinAnim.stopAnimation();
|
||||
return;
|
||||
}
|
||||
reportSpinAnim.setValue(0);
|
||||
const loop = Animated.loop(
|
||||
Animated.timing(reportSpinAnim, {
|
||||
toValue: 1,
|
||||
duration: 1400,
|
||||
useNativeDriver: true,
|
||||
})
|
||||
);
|
||||
loop.start();
|
||||
return () => loop.stop();
|
||||
}, [isGeneratingReport, reportSpinAnim]);
|
||||
|
||||
const handleGenerateReport = useCallback(async () => {
|
||||
const ok = await ensureLoggedIn();
|
||||
if (!ok || isGeneratingReport) return;
|
||||
|
||||
// 检查 VIP 权限
|
||||
const access = checkServiceAccess();
|
||||
if (!access.canUseService) {
|
||||
openMembershipModal({
|
||||
onPurchaseSuccess: () => {
|
||||
// 购买成功后自动触发生成
|
||||
handleGenerateReport();
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsGeneratingReport(true);
|
||||
setReportLocalUri(null);
|
||||
Toast.info(t('statistics.aiReport.generating', '正在生成健康报告,预计 10~30 秒…'));
|
||||
try {
|
||||
const response = await generateAiReport({ date: todayString });
|
||||
const imageUrl = (response as any)?.imageUrl ?? (response as any)?.url ?? (response as any)?.image_url;
|
||||
if (!imageUrl) {
|
||||
throw new Error(t('statistics.aiReport.missing', '未获取到报告图片,请稍后重试'));
|
||||
}
|
||||
setReportImageUrl(imageUrl);
|
||||
setReportModalVisible(true);
|
||||
Toast.success(t('statistics.aiReport.success', '报告已生成'));
|
||||
// 生成成功后刷新列表
|
||||
handleRefresh();
|
||||
} catch (error: any) {
|
||||
console.error('generate-ai-report-failed', error);
|
||||
Toast.error(error?.message ?? t('statistics.aiReport.failed', '生成报告失败,请稍后重试'));
|
||||
} finally {
|
||||
setIsGeneratingReport(false);
|
||||
}
|
||||
}, [ensureLoggedIn, isGeneratingReport, checkServiceAccess, openMembershipModal, t, todayString, handleRefresh]);
|
||||
|
||||
const prepareLocalReportImage = useCallback(async () => {
|
||||
if (!reportImageUrl) {
|
||||
throw new Error(t('statistics.aiReport.missing', '未获取到报告图片,请稍后重试'));
|
||||
}
|
||||
if (reportLocalUri) {
|
||||
return reportLocalUri;
|
||||
}
|
||||
const fileUri = `${FileSystem.cacheDirectory}ai-report-${Date.now()}.jpg`;
|
||||
const token = await getAuthToken();
|
||||
const download = await FileSystem.downloadAsync(
|
||||
reportImageUrl,
|
||||
fileUri,
|
||||
token ? { headers: { Authorization: `Bearer ${token}` } } : undefined,
|
||||
);
|
||||
if (!download?.uri) {
|
||||
throw new Error(t('statistics.aiReport.missing', '未获取到报告图片,请稍后重试'));
|
||||
}
|
||||
setReportLocalUri(download.uri);
|
||||
return download.uri;
|
||||
}, [reportImageUrl, reportLocalUri, t]);
|
||||
|
||||
const handleSaveReport = useCallback(async () => {
|
||||
if (isSavingReport) return;
|
||||
try {
|
||||
setIsSavingReport(true);
|
||||
const permission = await MediaLibrary.requestPermissionsAsync();
|
||||
if (permission.status !== 'granted') {
|
||||
Toast.warning(t('statistics.aiReport.permission', '需要相册权限才能保存图片'));
|
||||
return;
|
||||
}
|
||||
const localUri = await prepareLocalReportImage();
|
||||
await MediaLibrary.saveToLibraryAsync(localUri);
|
||||
Toast.success(t('statistics.aiReport.saved', '已保存到相册'));
|
||||
} catch (error: any) {
|
||||
console.error('save-ai-report-failed', error);
|
||||
Toast.error(error?.message ?? t('statistics.aiReport.saveFailed', '保存失败,请稍后重试'));
|
||||
} finally {
|
||||
setIsSavingReport(false);
|
||||
}
|
||||
}, [isSavingReport, prepareLocalReportImage, t]);
|
||||
|
||||
const handleShareReport = useCallback(async () => {
|
||||
if (isSharingReport) return;
|
||||
try {
|
||||
setIsSharingReport(true);
|
||||
const localUri = await prepareLocalReportImage();
|
||||
await Share.share({
|
||||
message: t('statistics.aiReport.shareMessage', '这是我的 AI 健康报告,分享给你看看!'),
|
||||
url: Platform.OS === 'ios' ? localUri : `file://${localUri}`,
|
||||
title: t('statistics.aiReport.shareTitle', 'AI 健康报告')
|
||||
});
|
||||
} catch (error: any) {
|
||||
console.error('share-ai-report-failed', error);
|
||||
Toast.error(error?.message ?? t('statistics.aiReport.shareFailed', '分享失败,请稍后重试'));
|
||||
} finally {
|
||||
setIsSharingReport(false);
|
||||
}
|
||||
}, [isSharingReport, prepareLocalReportImage, t]);
|
||||
|
||||
// 点击卡片查看报告
|
||||
const handleCardPress = useCallback((report: AiReportRecord) => {
|
||||
if (!report.imageUrl) return;
|
||||
setReportImageUrl(report.imageUrl);
|
||||
setReportLocalUri(null);
|
||||
setReportModalVisible(true);
|
||||
}, []);
|
||||
|
||||
// 滚动到底部加载更多
|
||||
const handleScroll = useCallback((event: any) => {
|
||||
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
|
||||
const paddingToBottom = 100;
|
||||
if (layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom) {
|
||||
handleLoadMore();
|
||||
}
|
||||
}, [handleLoadMore]);
|
||||
|
||||
const headerRight = isLiquidGlassAvailable() ? (
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={handleGenerateReport}
|
||||
disabled={isGeneratingReport}
|
||||
>
|
||||
<GlassView
|
||||
style={styles.reportButton}
|
||||
glassEffectStyle="clear"
|
||||
isInteractive
|
||||
>
|
||||
<Animated.View style={[styles.reportIconWrapper, isGeneratingReport && { transform: [{ rotate: reportIconSpin }] }]}>
|
||||
<Ionicons name="sparkles-outline" size={18} color="#0F172A" />
|
||||
</Animated.View>
|
||||
</GlassView>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.9}
|
||||
onPress={handleGenerateReport}
|
||||
style={[styles.reportButton, styles.reportButtonFallback]}
|
||||
disabled={isGeneratingReport}
|
||||
>
|
||||
<Animated.View style={[styles.reportIconWrapper, isGeneratingReport && { transform: [{ rotate: reportIconSpin }] }]}>
|
||||
<Ionicons name="sparkles-outline" size={18} color="#0F172A" />
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
const headerTitle = (
|
||||
<View style={styles.headerCenter}>
|
||||
<Text style={styles.headerTitle}>{t('statistics.aiReport.galleryTitle', 'AI 报告画廊')}</Text>
|
||||
<Text style={styles.headerSubtitle}>{t('statistics.aiReport.gallerySubtitle', '沉浸式浏览你的健康报告')}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar barStyle="dark-content" />
|
||||
<LinearGradient
|
||||
colors={['#f0f4ff', '#fdf8ff', '#f6f8fa']}
|
||||
style={StyleSheet.absoluteFill}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
/>
|
||||
<HeaderBar
|
||||
title={headerTitle}
|
||||
right={headerRight}
|
||||
tone="light"
|
||||
transparent
|
||||
/>
|
||||
<ScrollView
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{
|
||||
paddingTop: insets.top + 56,
|
||||
paddingBottom: 40,
|
||||
paddingHorizontal: 16,
|
||||
...(reports.length === 0 && !isLoading ? { flexGrow: 1, justifyContent: 'center' } : {})
|
||||
}}
|
||||
showsVerticalScrollIndicator={false}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={isRefreshing}
|
||||
onRefresh={handleRefresh}
|
||||
tintColor="#6B7280"
|
||||
/>
|
||||
}
|
||||
onScroll={handleScroll}
|
||||
scrollEventThrottle={400}
|
||||
>
|
||||
{isLoading ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#3B82F6" />
|
||||
</View>
|
||||
) : reports.length === 0 ? (
|
||||
<View style={styles.emptyContainer}>
|
||||
<Pressable
|
||||
style={styles.emptyImageCard}
|
||||
onPress={() => {
|
||||
const imageUrl = i18n.language?.startsWith('en')
|
||||
? 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/gallary/empty_en.jpg'
|
||||
: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/gallary/empty_zh.jpg';
|
||||
setReportImageUrl(imageUrl);
|
||||
setReportLocalUri(null);
|
||||
setReportModalVisible(true);
|
||||
}}
|
||||
>
|
||||
<ExpoImage
|
||||
source={{
|
||||
uri: i18n.language?.startsWith('en')
|
||||
? 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/gallary/empty_en.jpg'
|
||||
: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/gallary/empty_zh.jpg'
|
||||
}}
|
||||
style={[styles.emptyImage, { height: emptyImageHeight }]}
|
||||
contentFit="contain"
|
||||
transition={300}
|
||||
/>
|
||||
<View style={styles.emptyImageOverlay}>
|
||||
<View style={styles.previewHint}>
|
||||
<Ionicons name="expand-outline" size={14} color="#fff" />
|
||||
<Text style={styles.previewHintText}>{t('statistics.aiReport.clickToPreview', '点击预览模板')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
<View style={styles.emptyContent}>
|
||||
<Text style={styles.emptyTitle}>{t('statistics.aiReport.emptyHistory', '暂无报告记录')}</Text>
|
||||
<Text style={styles.emptySubtitle}>{t('statistics.aiReport.emptyHistoryHint', '点击右上方按钮生成你的第一份报告')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.galleryGrid}>
|
||||
{reports.map((report) => (
|
||||
<Pressable
|
||||
key={report.id}
|
||||
style={({ pressed }) => [styles.card, pressed && styles.cardPressed]}
|
||||
onPress={() => handleCardPress(report)}
|
||||
>
|
||||
<ExpoImage
|
||||
source={{ uri: report.imageUrl }}
|
||||
style={styles.cardImage}
|
||||
contentFit="cover"
|
||||
transition={250}
|
||||
/>
|
||||
<View style={styles.cardBody}>
|
||||
<Text numberOfLines={1} style={styles.cardTitle}>
|
||||
{dayjs(report.reportDate).format('YYYY年M月D日')}
|
||||
</Text>
|
||||
<Text style={styles.cardSubtitle}>
|
||||
{dayjs(report.createdAt).format('HH:mm')} {t('statistics.aiReport.generated', '生成')}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
))}
|
||||
{isLoadingMore && (
|
||||
<View style={styles.loadingMoreContainer}>
|
||||
<ActivityIndicator size="small" color="#6B7280" />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
{reportModalVisible && (
|
||||
<View style={styles.modalOverlay}>
|
||||
<Pressable style={StyleSheet.absoluteFill} onPress={() => setReportModalVisible(false)} />
|
||||
<View style={styles.modalCard}>
|
||||
{reportImageUrl ? (
|
||||
<ExpoImage
|
||||
source={{ uri: reportImageUrl }}
|
||||
style={[styles.reportImage, { width: reportImageSize.width, height: reportImageSize.height }]}
|
||||
contentFit="cover"
|
||||
/>
|
||||
) : (
|
||||
<View style={[styles.reportImageFallback, { width: reportImageSize.width, height: reportImageSize.height }]}>
|
||||
<Text style={styles.reportFallbackText}>{t('statistics.aiReport.missing', '未获取到报告图片,请稍后重试')}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.modalActions}>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalButton, isSavingReport && styles.modalButtonDisabled]}
|
||||
onPress={handleSaveReport}
|
||||
disabled={isSavingReport}
|
||||
>
|
||||
<Ionicons name="download-outline" size={18} color="#0F172A" />
|
||||
<Text style={styles.modalButtonText}>
|
||||
{isSavingReport ? t('statistics.aiReport.saving', '保存中…') : t('statistics.aiReport.save', '保存')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalButton, isSharingReport && styles.modalButtonDisabled]}
|
||||
onPress={handleShareReport}
|
||||
disabled={isSharingReport}
|
||||
>
|
||||
<Ionicons name="share-social-outline" size={18} color="#0F172A" />
|
||||
<Text style={styles.modalButtonText}>
|
||||
{isSharingReport ? t('statistics.aiReport.sharing', '分享中…') : t('statistics.aiReport.share', '分享')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<Pressable style={styles.closeRow} onPress={() => setReportModalVisible(false)}>
|
||||
<Ionicons name="close" size={18} color="#4B5563" />
|
||||
<Text style={styles.closeLabel}>{t('statistics.aiReport.close', '收起')}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f7f8fb',
|
||||
},
|
||||
headerCenter: {
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 18,
|
||||
fontFamily: 'AliBold',
|
||||
color: '#0F172A',
|
||||
textAlign: 'center',
|
||||
},
|
||||
headerSubtitle: {
|
||||
marginTop: 2,
|
||||
color: '#6B7280',
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliRegular',
|
||||
textAlign: 'center',
|
||||
},
|
||||
reportButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
reportButtonFallback: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.5)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
},
|
||||
reportIconWrapper: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#E0F2FE',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
paddingTop: 100,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
emptyContainer: {
|
||||
alignItems: 'center',
|
||||
gap: 24,
|
||||
},
|
||||
emptyImageCard: {
|
||||
width: '100%',
|
||||
borderRadius: 20,
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 16,
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
elevation: 6,
|
||||
},
|
||||
emptyImage: {
|
||||
width: '100%',
|
||||
height: 380,
|
||||
},
|
||||
emptyImageOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.15)',
|
||||
borderRadius: 20,
|
||||
},
|
||||
previewHint: {
|
||||
position: 'absolute',
|
||||
top: 12,
|
||||
right: 12,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 14,
|
||||
},
|
||||
previewHintText: {
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliRegular',
|
||||
color: '#fff',
|
||||
},
|
||||
emptyContent: {
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
emptyTitle: {
|
||||
fontSize: 18,
|
||||
fontFamily: 'AliBold',
|
||||
color: '#1F2937',
|
||||
textAlign: 'center',
|
||||
},
|
||||
emptySubtitle: {
|
||||
fontSize: 14,
|
||||
fontFamily: 'AliRegular',
|
||||
color: '#6B7280',
|
||||
textAlign: 'center',
|
||||
lineHeight: 20,
|
||||
},
|
||||
emptyButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
paddingHorizontal: 28,
|
||||
paddingVertical: 14,
|
||||
backgroundColor: '#3B82F6',
|
||||
borderRadius: 28,
|
||||
marginTop: 8,
|
||||
shadowColor: '#3B82F6',
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 12,
|
||||
shadowOffset: { width: 0, height: 6 },
|
||||
elevation: 4,
|
||||
},
|
||||
emptyButtonText: {
|
||||
fontSize: 16,
|
||||
fontFamily: 'AliBold',
|
||||
color: '#fff',
|
||||
},
|
||||
loadingMoreContainer: {
|
||||
paddingVertical: 20,
|
||||
alignItems: 'center',
|
||||
},
|
||||
galleryGrid: {
|
||||
gap: 18,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 22,
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 12,
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
elevation: 6,
|
||||
},
|
||||
cardPressed: {
|
||||
transform: [{ scale: 0.99 }],
|
||||
},
|
||||
cardImage: {
|
||||
width: '100%',
|
||||
height: 360,
|
||||
},
|
||||
cardBody: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
gap: 4,
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: 16,
|
||||
fontFamily: 'AliBold',
|
||||
color: '#111827',
|
||||
},
|
||||
cardSubtitle: {
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliRegular',
|
||||
color: '#9CA3AF',
|
||||
},
|
||||
modalOverlay: {
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
backgroundColor: 'rgba(12, 18, 27, 0.78)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 16,
|
||||
},
|
||||
modalCard: {
|
||||
backgroundColor: '#FDFDFE',
|
||||
borderRadius: 20,
|
||||
padding: 14,
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
shadowOpacity: 0.28,
|
||||
shadowRadius: 18,
|
||||
elevation: 16,
|
||||
},
|
||||
reportImage: {
|
||||
borderRadius: 14,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
reportImageFallback: {
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#F3F4F6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
reportFallbackText: {
|
||||
textAlign: 'center',
|
||||
color: '#111827',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
modalActions: {
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
},
|
||||
modalButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
backgroundColor: '#E0F2FE',
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: '#BAE6FD',
|
||||
},
|
||||
modalButtonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
modalButtonText: {
|
||||
fontSize: 14,
|
||||
color: '#0F172A',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
closeRow: {
|
||||
marginTop: 4,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
closeLabel: {
|
||||
fontSize: 14,
|
||||
color: '#4B5563',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
});
|
||||
@@ -559,19 +559,17 @@ export default function MedicationDetailScreen() {
|
||||
|
||||
const formLabel = medication ? t(`medications.manage.formLabels.${medication.form}`) : '';
|
||||
const dosageLabel = medication ? `${medication.dosageValue} ${medication.dosageUnit}` : '--';
|
||||
const startDateLabel = medication
|
||||
? dayjs(medication.startDate).format('YYYY年M月D日')
|
||||
: '--';
|
||||
|
||||
|
||||
// 计算服药周期显示
|
||||
const medicationPeriodLabel = useMemo(() => {
|
||||
if (!medication) return '--';
|
||||
|
||||
const startDate = dayjs(medication.startDate).format('YYYY年M月D日');
|
||||
const format = t('medications.detail.plan.dateFormat', { defaultValue: 'YYYY年M月D日' });
|
||||
const startDate = dayjs(medication.startDate).format(format);
|
||||
|
||||
if (medication.endDate) {
|
||||
// 有结束日期,显示开始日期到结束日期
|
||||
const endDate = dayjs(medication.endDate).format('YYYY年M月D日');
|
||||
const endDate = dayjs(medication.endDate).format(format);
|
||||
return `${startDate} - ${endDate}`;
|
||||
} else {
|
||||
// 没有结束日期,显示长期
|
||||
@@ -581,22 +579,23 @@ export default function MedicationDetailScreen() {
|
||||
|
||||
// 计算有效期显示
|
||||
const expiryDateLabel = useMemo(() => {
|
||||
if (!medication?.expiryDate) return '未设置';
|
||||
if (!medication?.expiryDate) return t('medications.detail.plan.expiryStatus.notSet');
|
||||
|
||||
const expiry = dayjs(medication.expiryDate);
|
||||
const today = dayjs();
|
||||
const daysUntilExpiry = expiry.diff(today, 'day');
|
||||
const format = t('medications.detail.plan.dateFormat', { defaultValue: 'YYYY年M月D日' });
|
||||
|
||||
if (daysUntilExpiry < 0) {
|
||||
return `${expiry.format('YYYY年M月D日')} (已过期)`;
|
||||
return `${expiry.format(format)} (${t('medications.detail.plan.expiryStatus.expired')})`;
|
||||
} else if (daysUntilExpiry === 0) {
|
||||
return `${expiry.format('YYYY年M月D日')} (今天到期)`;
|
||||
return `${expiry.format(format)} (${t('medications.detail.plan.expiryStatus.expiresToday')})`;
|
||||
} else if (daysUntilExpiry <= 30) {
|
||||
return `${expiry.format('YYYY年M月D日')} (${daysUntilExpiry}天后到期)`;
|
||||
return `${expiry.format(format)} (${t('medications.detail.plan.expiryStatus.expiresInDays', { days: daysUntilExpiry })})`;
|
||||
} else {
|
||||
return expiry.format('YYYY年M月D日');
|
||||
return expiry.format(format);
|
||||
}
|
||||
}, [medication?.expiryDate]);
|
||||
}, [medication?.expiryDate, t]);
|
||||
|
||||
const reminderTimes = medication?.medicationTimes?.length
|
||||
? medication.medicationTimes.join('、')
|
||||
@@ -617,8 +616,8 @@ export default function MedicationDetailScreen() {
|
||||
const aiActionLabel = aiAnalysisLoading
|
||||
? t('medications.detail.aiAnalysis.analyzingButton')
|
||||
: hasAiAnalysis
|
||||
? '重新分析'
|
||||
: '获取 AI 分析';
|
||||
? t('medications.detail.aiAnalysis.reanalyzeButton')
|
||||
: t('medications.detail.aiAnalysis.getAnalysisButton');
|
||||
|
||||
const handleOpenNoteModal = useCallback(() => {
|
||||
setNoteDraft(medication?.note ?? '');
|
||||
@@ -645,15 +644,15 @@ export default function MedicationDetailScreen() {
|
||||
const trimmed = nameDraft.trim();
|
||||
if (!trimmed) {
|
||||
Alert.alert(
|
||||
'提示',
|
||||
'药物名称不能为空'
|
||||
t('common.hint'),
|
||||
t('medications.detail.name.errors.empty')
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (Array.from(trimmed).length > 10) {
|
||||
Alert.alert(
|
||||
'提示',
|
||||
'药物名称不能超过10个字'
|
||||
t('common.hint'),
|
||||
t('medications.detail.name.errors.tooLong')
|
||||
);
|
||||
return;
|
||||
}
|
||||
@@ -675,8 +674,8 @@ export default function MedicationDetailScreen() {
|
||||
} catch (err) {
|
||||
console.error('更新药物名称失败', err);
|
||||
Alert.alert(
|
||||
'提示',
|
||||
'名称更新失败,请稍后再试'
|
||||
t('common.hint'),
|
||||
t('medications.detail.name.errors.updateFailed')
|
||||
);
|
||||
} finally {
|
||||
setNameSaving(false);
|
||||
@@ -908,16 +907,17 @@ export default function MedicationDetailScreen() {
|
||||
const handleStartDatePress = useCallback(() => {
|
||||
if (!medication) return;
|
||||
|
||||
const startDate = dayjs(medication.startDate).format('YYYY年M月D日');
|
||||
const format = t('medications.detail.plan.dateFormat', { defaultValue: 'YYYY年M月D日' });
|
||||
const startDate = dayjs(medication.startDate).format(format);
|
||||
let message;
|
||||
if (medication.endDate) {
|
||||
const endDate = dayjs(medication.endDate).format('YYYY年M月D日');
|
||||
message = `从 ${startDate} 至 ${endDate}`;
|
||||
const endDate = dayjs(medication.endDate).format(format);
|
||||
message = t('medications.detail.plan.periodRange', { startDate, endDate, defaultValue: `从 ${startDate} 至 ${endDate}` });
|
||||
} else {
|
||||
message = `从 ${startDate} 至长期`;
|
||||
message = t('medications.detail.plan.periodLongTerm', { startDate, defaultValue: `从 ${startDate} 至长期` });
|
||||
}
|
||||
|
||||
Alert.alert('服药周期', message);
|
||||
Alert.alert(t('medications.detail.plan.period'), message);
|
||||
}, [medication, t]);
|
||||
|
||||
const handleTimePress = useCallback(() => {
|
||||
@@ -990,7 +990,7 @@ export default function MedicationDetailScreen() {
|
||||
|
||||
} catch (err) {
|
||||
console.error('更新有效期失败', err);
|
||||
Alert.alert('更新失败', '有效期更新失败,请稍后重试');
|
||||
Alert.alert(t('medications.detail.updateErrors.expiryDate'), t('medications.detail.updateErrors.expiryDateMessage'));
|
||||
} finally {
|
||||
setUpdatePending(false);
|
||||
}
|
||||
@@ -1185,7 +1185,7 @@ export default function MedicationDetailScreen() {
|
||||
});
|
||||
} catch (err: any) {
|
||||
console.error('[MEDICATION_DETAIL] AI 草稿保存失败', err);
|
||||
Alert.alert('保存失败', err?.message || '请稍后再试');
|
||||
Alert.alert(t('medications.detail.aiDraft.saveError.title'), err?.message || t('medications.detail.aiDraft.saveError.message'));
|
||||
} finally {
|
||||
setAiDraftSaving(false);
|
||||
}
|
||||
@@ -1297,7 +1297,7 @@ export default function MedicationDetailScreen() {
|
||||
<View style={styles.photoUploadingIndicator}>
|
||||
<ActivityIndicator color={colors.primary} size="small" />
|
||||
<Text style={[styles.uploadingText, { color: '#FFF' }]}>
|
||||
上传中...
|
||||
{t('medications.detail.photo.uploading')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
@@ -1415,12 +1415,12 @@ export default function MedicationDetailScreen() {
|
||||
</TouchableOpacity>
|
||||
</Section>
|
||||
|
||||
<Section title="AI 分析" color={colors.text}>
|
||||
<Section title={t('medications.detail.sections.aiAnalysis')} color={colors.text}>
|
||||
<View style={[styles.aiCardContainer, { backgroundColor: colors.surface }]}>
|
||||
<View style={styles.aiHeaderRow}>
|
||||
<View style={styles.aiHeaderLeft}>
|
||||
<Ionicons name="sparkles-outline" size={18} color={colors.primary} />
|
||||
<Text style={[styles.aiHeaderTitle, { color: colors.text }]}>分析结果</Text>
|
||||
<Text style={[styles.aiHeaderTitle, { color: colors.text }]}>{t('medications.detail.aiAnalysis.title')}</Text>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
@@ -1439,7 +1439,7 @@ export default function MedicationDetailScreen() {
|
||||
{ color: hasAiAnalysis ? '#16a34a' : aiAnalysisLocked ? '#ef4444' : colors.primary },
|
||||
]}
|
||||
>
|
||||
{hasAiAnalysis ? '已生成' : aiAnalysisLocked ? '会员专享' : '待生成'}
|
||||
{hasAiAnalysis ? t('medications.detail.aiAnalysis.status.generated') : aiAnalysisLocked ? t('medications.detail.aiAnalysis.status.memberExclusive') : t('medications.detail.aiAnalysis.status.pending')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -1467,7 +1467,7 @@ export default function MedicationDetailScreen() {
|
||||
style={styles.aiScoreBadge}
|
||||
>
|
||||
<Ionicons name="thumbs-up-outline" size={14} color="#fff" />
|
||||
<Text style={styles.aiScoreBadgeText}>AI 推荐</Text>
|
||||
<Text style={styles.aiScoreBadgeText}>{t('medications.detail.aiAnalysis.recommendation')}</Text>
|
||||
</LinearGradient>
|
||||
)}
|
||||
</View>
|
||||
@@ -1476,7 +1476,7 @@ export default function MedicationDetailScreen() {
|
||||
{medication.name}
|
||||
</Text>
|
||||
<Text style={[styles.aiHeroSubtitle, { color: colors.textSecondary }]} numberOfLines={3}>
|
||||
{aiAnalysisResult?.mainUsage || '获取 AI 分析,快速了解适用人群、成分安全与使用建议。'}
|
||||
{aiAnalysisResult?.mainUsage || t('medications.detail.aiAnalysis.placeholder')}
|
||||
</Text>
|
||||
<View style={styles.aiChipRow}>
|
||||
<View style={styles.aiChip}>
|
||||
@@ -1527,7 +1527,7 @@ export default function MedicationDetailScreen() {
|
||||
<View style={styles.aiColumns}>
|
||||
<View style={[styles.aiBubbleCard, { backgroundColor: '#ECFEFF', borderColor: '#BAF2F4' }]}>
|
||||
<View style={styles.aiBubbleHeader}>
|
||||
<Text style={[styles.aiBubbleTitle, { color: '#0284c7' }]}>适合人群</Text>
|
||||
<Text style={[styles.aiBubbleTitle, { color: '#0284c7' }]}>{t('medications.detail.aiAnalysis.categories.suitableFor')}</Text>
|
||||
<Ionicons name="checkmark-circle" size={16} color="#0ea5e9" />
|
||||
</View>
|
||||
{aiAnalysisResult.suitableFor.map((item, idx) => (
|
||||
@@ -1540,7 +1540,7 @@ export default function MedicationDetailScreen() {
|
||||
|
||||
<View style={[styles.aiBubbleCard, { backgroundColor: '#FEF2F2', borderColor: '#FEE2E2' }]}>
|
||||
<View style={styles.aiBubbleHeader}>
|
||||
<Text style={[styles.aiBubbleTitle, { color: '#ef4444' }]}>不适合人群</Text>
|
||||
<Text style={[styles.aiBubbleTitle, { color: '#ef4444' }]}>{t('medications.detail.aiAnalysis.categories.unsuitableFor')}</Text>
|
||||
<Ionicons name="alert-circle" size={16} color="#ef4444" />
|
||||
</View>
|
||||
{aiAnalysisResult.unsuitableFor.map((item, idx) => (
|
||||
@@ -1552,9 +1552,9 @@ export default function MedicationDetailScreen() {
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{renderAdviceCard('可能的副作用', aiAnalysisResult.sideEffects, 'warning-outline', '#f59e0b', '#FFFBEB')}
|
||||
{renderAdviceCard('储存建议', aiAnalysisResult.storageAdvice, 'cube-outline', '#10b981', '#ECFDF3')}
|
||||
{renderAdviceCard('健康/使用建议', aiAnalysisResult.healthAdvice, 'sparkles-outline', '#6366f1', '#EEF2FF')}
|
||||
{renderAdviceCard(t('medications.detail.aiAnalysis.categories.sideEffects'), aiAnalysisResult.sideEffects, 'warning-outline', '#f59e0b', '#FFFBEB')}
|
||||
{renderAdviceCard(t('medications.detail.aiAnalysis.categories.storageAdvice'), aiAnalysisResult.storageAdvice, 'cube-outline', '#10b981', '#ECFDF3')}
|
||||
{renderAdviceCard(t('medications.detail.aiAnalysis.categories.healthAdvice'), aiAnalysisResult.healthAdvice, 'sparkles-outline', '#6366f1', '#EEF2FF')}
|
||||
</>
|
||||
) : null}
|
||||
|
||||
@@ -1580,8 +1580,8 @@ export default function MedicationDetailScreen() {
|
||||
<View style={styles.aiMembershipLeft}>
|
||||
<Ionicons name="diamond-outline" size={18} color="#f59e0b" />
|
||||
<View>
|
||||
<Text style={styles.aiMembershipTitle}>会员专享 AI 深度解读</Text>
|
||||
<Text style={styles.aiMembershipSub}>解锁完整药品分析与无限次使用</Text>
|
||||
<Text style={styles.aiMembershipTitle}>{t('medications.detail.aiAnalysis.membershipCard.title')}</Text>
|
||||
<Text style={styles.aiMembershipSub}>{t('medications.detail.aiAnalysis.membershipCard.subtitle')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={18} color="#f59e0b" />
|
||||
@@ -1622,22 +1622,67 @@ export default function MedicationDetailScreen() {
|
||||
{isAiDraft ? (
|
||||
<View style={styles.footerButtonContainer}>
|
||||
<TouchableOpacity
|
||||
style={styles.secondaryFooterBtn}
|
||||
activeOpacity={0.9}
|
||||
onPress={() => router.replace('/medications/ai-camera')}
|
||||
>
|
||||
<Text style={styles.secondaryFooterText}>重新拍摄</Text>
|
||||
{isLiquidGlassAvailable() ? (
|
||||
<GlassView
|
||||
style={[styles.secondaryFooterBtn, { borderWidth: 0, overflow: 'hidden', backgroundColor: 'transparent' }]}
|
||||
glassEffectStyle="regular"
|
||||
isInteractive={true}
|
||||
>
|
||||
<Text style={styles.secondaryFooterText}>{t('medications.detail.aiDraft.reshoot')}</Text>
|
||||
</GlassView>
|
||||
) : (
|
||||
<View style={styles.secondaryFooterBtn}>
|
||||
<Text style={styles.secondaryFooterText}>{t('medications.detail.aiDraft.reshoot')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.primaryFooterBtn, { backgroundColor: colors.primary }]}
|
||||
style={{ flex: 1 }}
|
||||
activeOpacity={0.9}
|
||||
onPress={handleAiDraftSave}
|
||||
disabled={aiDraftSaving}
|
||||
>
|
||||
{aiDraftSaving ? (
|
||||
<ActivityIndicator color={colors.onPrimary} />
|
||||
{isLiquidGlassAvailable() ? (
|
||||
<GlassView
|
||||
style={[
|
||||
styles.primaryFooterBtn,
|
||||
{
|
||||
width: '100%',
|
||||
shadowOpacity: 0,
|
||||
backgroundColor: 'transparent',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
]}
|
||||
glassEffectStyle="regular"
|
||||
tintColor={colors.primary}
|
||||
isInteractive={true}
|
||||
>
|
||||
{aiDraftSaving ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={[styles.primaryFooterText, { color: '#fff' }]}>
|
||||
{t('medications.detail.aiDraft.saveAndCreate')}
|
||||
</Text>
|
||||
)}
|
||||
</GlassView>
|
||||
) : (
|
||||
<Text style={[styles.primaryFooterText, { color: colors.onPrimary }]}>保存并创建</Text>
|
||||
<View
|
||||
style={[
|
||||
styles.primaryFooterBtn,
|
||||
{ width: '100%', backgroundColor: colors.primary },
|
||||
]}
|
||||
>
|
||||
{aiDraftSaving ? (
|
||||
<ActivityIndicator color={colors.onPrimary} />
|
||||
) : (
|
||||
<Text style={[styles.primaryFooterText, { color: colors.onPrimary }]}>
|
||||
{t('medications.detail.aiDraft.saveAndCreate')}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -1726,7 +1771,7 @@ export default function MedicationDetailScreen() {
|
||||
<View style={styles.modalHandle} />
|
||||
<View style={styles.modalHeader}>
|
||||
<Text style={[styles.modalTitle, { color: colors.text }]}>
|
||||
编辑药物名称
|
||||
{t('medications.detail.name.edit')}
|
||||
</Text>
|
||||
<TouchableOpacity onPress={handleCloseNameModal} hitSlop={12}>
|
||||
<Ionicons name="close" size={20} color={colors.textSecondary} />
|
||||
@@ -1744,7 +1789,7 @@ export default function MedicationDetailScreen() {
|
||||
<TextInput
|
||||
value={nameDraft}
|
||||
onChangeText={handleNameChange}
|
||||
placeholder="请输入药物名称"
|
||||
placeholder={t('medications.detail.name.placeholder')}
|
||||
placeholderTextColor={colors.textMuted}
|
||||
style={[styles.nameInput, { color: colors.text }]}
|
||||
autoFocus
|
||||
@@ -1777,7 +1822,7 @@ export default function MedicationDetailScreen() {
|
||||
<ActivityIndicator color={colors.onPrimary} size="small" />
|
||||
) : (
|
||||
<Text style={[styles.modalActionPrimaryText, { color: colors.onPrimary }]}>
|
||||
保存
|
||||
{t('common.save')}
|
||||
</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
@@ -2599,7 +2644,7 @@ const styles = StyleSheet.create({
|
||||
elevation: 4,
|
||||
},
|
||||
aiScoreBadgeText: {
|
||||
fontSize: 12,
|
||||
fontSize: 10,
|
||||
fontWeight: '700',
|
||||
color: '#fff',
|
||||
},
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Colors } from '@/constants/Colors';
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useCosUpload } from '@/hooks/useCosUpload';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { createMedicationRecognitionTask } from '@/services/medications';
|
||||
import { getItem, setItem } from '@/utils/kvStore';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
@@ -39,9 +40,9 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
const MEDICATION_GUIDE_SEEN_KEY = 'medication_ai_camera_guide_seen';
|
||||
|
||||
const captureSteps = [
|
||||
{ key: 'front', title: '正面', subtitle: '保证药品名称清晰可见', mandatory: true },
|
||||
{ key: 'side', title: '背面', subtitle: '包含规格、成分等信息', mandatory: true },
|
||||
{ key: 'aux', title: '侧面', subtitle: '补充更多细节提升准确率', mandatory: false },
|
||||
{ key: 'front', mandatory: true },
|
||||
{ key: 'side', mandatory: true },
|
||||
{ key: 'aux', mandatory: false },
|
||||
] as const;
|
||||
|
||||
type CaptureKey = (typeof captureSteps)[number]['key'];
|
||||
@@ -51,6 +52,7 @@ type Shot = {
|
||||
};
|
||||
|
||||
export default function MedicationAiCameraScreen() {
|
||||
const { t } = useI18n();
|
||||
const insets = useSafeAreaInsets();
|
||||
const scheme = (useColorScheme() ?? 'light') as keyof typeof Colors;
|
||||
const colors = Colors[scheme];
|
||||
@@ -113,7 +115,14 @@ export default function MedicationAiCameraScreen() {
|
||||
}
|
||||
}, [allRequiredCaptured]);
|
||||
|
||||
const stepTitle = useMemo(() => `步骤 ${currentStepIndex + 1} / ${captureSteps.length}`, [currentStepIndex]);
|
||||
const stepTitle = useMemo(
|
||||
() =>
|
||||
t('medications.aiCamera.steps.stepProgress', {
|
||||
current: currentStepIndex + 1,
|
||||
total: captureSteps.length,
|
||||
}),
|
||||
[currentStepIndex, t]
|
||||
);
|
||||
|
||||
// 计算固定的相机高度,不受按钮状态影响,避免布局跳动
|
||||
const cameraHeight = useMemo(() => {
|
||||
@@ -149,7 +158,7 @@ export default function MedicationAiCameraScreen() {
|
||||
if (!result.canceled && result.assets?.length) {
|
||||
const asset = result.assets[0];
|
||||
setShots((prev) => ({ ...prev, [currentStep.key]: { uri: asset.uri } }));
|
||||
|
||||
|
||||
// 拍摄完成后自动进入下一步(如果还有下一步)
|
||||
if (currentStepIndex < captureSteps.length - 1) {
|
||||
setTimeout(() => {
|
||||
@@ -159,7 +168,10 @@ export default function MedicationAiCameraScreen() {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[MEDICATION_AI] pick image failed', error);
|
||||
Alert.alert('选择失败', '请重试或更换图片');
|
||||
Alert.alert(
|
||||
t('medications.aiCamera.alerts.pickFailed.title'),
|
||||
t('medications.aiCamera.alerts.pickFailed.message')
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -169,7 +181,7 @@ export default function MedicationAiCameraScreen() {
|
||||
const photo = await cameraRef.current.takePictureAsync({ quality: 0.85 });
|
||||
if (photo?.uri) {
|
||||
setShots((prev) => ({ ...prev, [currentStep.key]: { uri: photo.uri } }));
|
||||
|
||||
|
||||
// 拍摄完成后自动进入下一步(如果还有下一步)
|
||||
if (currentStepIndex < captureSteps.length - 1) {
|
||||
setTimeout(() => {
|
||||
@@ -179,7 +191,10 @@ export default function MedicationAiCameraScreen() {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[MEDICATION_AI] take picture failed', error);
|
||||
Alert.alert('拍摄失败', '请重试');
|
||||
Alert.alert(
|
||||
t('medications.aiCamera.alerts.captureFailed.title'),
|
||||
t('medications.aiCamera.alerts.captureFailed.message')
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -192,7 +207,10 @@ export default function MedicationAiCameraScreen() {
|
||||
const handleStartRecognition = async () => {
|
||||
// 检查必需照片是否完成
|
||||
if (!allRequiredCaptured) {
|
||||
Alert.alert('照片不足', '请至少完成正面和背面拍摄');
|
||||
Alert.alert(
|
||||
t('medications.aiCamera.alerts.insufficientPhotos.title'),
|
||||
t('medications.aiCamera.alerts.insufficientPhotos.message')
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -209,7 +227,9 @@ export default function MedicationAiCameraScreen() {
|
||||
const [frontUpload, sideUpload, auxUpload] = await Promise.all([
|
||||
upload({ uri: shots.front.uri, name: `front-${Date.now()}.jpg`, type: 'image/jpeg' }),
|
||||
upload({ uri: shots.side.uri, name: `side-${Date.now()}.jpg`, type: 'image/jpeg' }),
|
||||
shots.aux ? upload({ uri: shots.aux.uri, name: `aux-${Date.now()}.jpg`, type: 'image/jpeg' }) : Promise.resolve(null),
|
||||
shots.aux
|
||||
? upload({ uri: shots.aux.uri, name: `aux-${Date.now()}.jpg`, type: 'image/jpeg' })
|
||||
: Promise.resolve(null),
|
||||
]);
|
||||
|
||||
const task = await createMedicationRecognitionTask({
|
||||
@@ -227,7 +247,10 @@ export default function MedicationAiCameraScreen() {
|
||||
});
|
||||
} catch (error: any) {
|
||||
console.error('[MEDICATION_AI] recognize failed', error);
|
||||
Alert.alert('创建任务失败', error?.message || '请检查网络后重试');
|
||||
Alert.alert(
|
||||
t('medications.aiCamera.alerts.taskFailed.title'),
|
||||
error?.message || t('medications.aiCamera.alerts.taskFailed.defaultMessage')
|
||||
);
|
||||
} finally {
|
||||
setCreatingTask(false);
|
||||
}
|
||||
@@ -278,12 +301,16 @@ export default function MedicationAiCameraScreen() {
|
||||
isInteractive={true}
|
||||
>
|
||||
<Ionicons name="camera-reverse-outline" size={20} color="#0f172a" />
|
||||
<Text style={styles.secondaryBtnText}>翻转</Text>
|
||||
<Text style={styles.secondaryBtnText}>
|
||||
{t('medications.aiCamera.buttons.flip')}
|
||||
</Text>
|
||||
</GlassView>
|
||||
) : (
|
||||
<View style={[styles.secondaryBtn, styles.fallbackSecondaryBtn]}>
|
||||
<Ionicons name="camera-reverse-outline" size={20} color="#0f172a" />
|
||||
<Text style={styles.secondaryBtnText}>翻转</Text>
|
||||
<Text style={styles.secondaryBtnText}>
|
||||
{t('medications.aiCamera.buttons.flip')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
@@ -440,12 +467,16 @@ export default function MedicationAiCameraScreen() {
|
||||
isInteractive={true}
|
||||
>
|
||||
<Ionicons name="camera" size={20} color="#0ea5e9" />
|
||||
<Text style={styles.splitButtonLabel}>拍照</Text>
|
||||
<Text style={styles.splitButtonLabel}>
|
||||
{t('medications.aiCamera.buttons.capture')}
|
||||
</Text>
|
||||
</GlassView>
|
||||
) : (
|
||||
<View style={[styles.splitButton, styles.fallbackSplitButton]}>
|
||||
<Ionicons name="camera" size={20} color="#0ea5e9" />
|
||||
<Text style={styles.splitButtonLabel}>拍照</Text>
|
||||
<Text style={styles.splitButtonLabel}>
|
||||
{t('medications.aiCamera.buttons.capture')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
@@ -470,7 +501,9 @@ export default function MedicationAiCameraScreen() {
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="checkmark-circle" size={20} color="#10b981" />
|
||||
<Text style={styles.splitButtonLabel}>完成</Text>
|
||||
<Text style={styles.splitButtonLabel}>
|
||||
{t('medications.aiCamera.buttons.complete')}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</GlassView>
|
||||
@@ -481,7 +514,9 @@ export default function MedicationAiCameraScreen() {
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="checkmark-circle" size={20} color="#10b981" />
|
||||
<Text style={styles.splitButtonLabel}>完成</Text>
|
||||
<Text style={styles.splitButtonLabel}>
|
||||
{t('medications.aiCamera.buttons.complete')}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
@@ -501,12 +536,25 @@ export default function MedicationAiCameraScreen() {
|
||||
if (!permission.granted) {
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: '#f8fafc' }]}>
|
||||
<HeaderBar title="AI 用药识别" onBack={() => router.back()} transparent />
|
||||
<HeaderBar
|
||||
title={t('medications.aiCamera.title')}
|
||||
onBack={() => router.back()}
|
||||
transparent
|
||||
/>
|
||||
<View style={[styles.permissionCard, { marginTop: insets.top + 60 }]}>
|
||||
<Text style={styles.permissionTitle}>需要相机权限</Text>
|
||||
<Text style={styles.permissionTip}>授权后即可快速拍摄药品包装,自动识别信息</Text>
|
||||
<TouchableOpacity style={[styles.permissionBtn, { backgroundColor: colors.primary }]} onPress={requestPermission}>
|
||||
<Text style={styles.permissionBtnText}>授权访问相机</Text>
|
||||
<Text style={styles.permissionTitle}>
|
||||
{t('medications.aiCamera.permission.title')}
|
||||
</Text>
|
||||
<Text style={styles.permissionTip}>
|
||||
{t('medications.aiCamera.permission.description')}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={[styles.permissionBtn, { backgroundColor: colors.primary }]}
|
||||
onPress={requestPermission}
|
||||
>
|
||||
<Text style={styles.permissionBtnText}>
|
||||
{t('medications.aiCamera.permission.button')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
@@ -524,14 +572,14 @@ export default function MedicationAiCameraScreen() {
|
||||
<View style={styles.container}>
|
||||
<LinearGradient colors={['#fefefe', '#f4f7fb']} style={StyleSheet.absoluteFill} />
|
||||
<HeaderBar
|
||||
title="AI 用药识别"
|
||||
title={t('medications.aiCamera.title')}
|
||||
onBack={() => router.back()}
|
||||
transparent
|
||||
right={
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowGuideModal(true)}
|
||||
activeOpacity={0.7}
|
||||
accessibilityLabel="查看拍摄说明"
|
||||
accessibilityLabel={t('medications.aiCamera.guideModal.title')}
|
||||
>
|
||||
{isLiquidGlassAvailable() ? (
|
||||
<GlassView
|
||||
@@ -556,8 +604,12 @@ export default function MedicationAiCameraScreen() {
|
||||
<View style={styles.metaBadge}>
|
||||
<Text style={styles.metaBadgeText}>{stepTitle}</Text>
|
||||
</View>
|
||||
<Text style={styles.metaTitle}>{currentStep.title}</Text>
|
||||
<Text style={styles.metaSubtitle}>{currentStep.subtitle}</Text>
|
||||
<Text style={styles.metaTitle}>
|
||||
{t(`medications.aiCamera.steps.${currentStep.key}.title`)}
|
||||
</Text>
|
||||
<Text style={styles.metaSubtitle}>
|
||||
{t(`medications.aiCamera.steps.${currentStep.key}.subtitle`)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.cameraCard}>
|
||||
@@ -587,14 +639,22 @@ export default function MedicationAiCameraScreen() {
|
||||
style={[styles.shotCard, active && styles.shotCardActive]}
|
||||
>
|
||||
<Text style={[styles.shotLabel, active && styles.shotLabelActive]}>
|
||||
{step.title}
|
||||
{!step.mandatory ? '(可选)' : ''}
|
||||
{t(`medications.aiCamera.steps.${step.key}.title`)}
|
||||
{!step.mandatory
|
||||
? ` ${t('medications.aiCamera.steps.optional')}`
|
||||
: ''}
|
||||
</Text>
|
||||
{shot ? (
|
||||
<Image source={{ uri: shot.uri }} style={styles.shotThumb} contentFit="cover" />
|
||||
<Image
|
||||
source={{ uri: shot.uri }}
|
||||
style={styles.shotThumb}
|
||||
contentFit="cover"
|
||||
/>
|
||||
) : (
|
||||
<View style={styles.shotPlaceholder}>
|
||||
<Text style={styles.shotPlaceholderText}>未拍摄</Text>
|
||||
<Text style={styles.shotPlaceholderText}>
|
||||
{t('medications.aiCamera.steps.notTaken')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
@@ -617,12 +677,16 @@ export default function MedicationAiCameraScreen() {
|
||||
isInteractive={true}
|
||||
>
|
||||
<Ionicons name="images-outline" size={20} color="#0f172a" />
|
||||
<Text style={styles.secondaryBtnText}>从相册</Text>
|
||||
<Text style={styles.secondaryBtnText}>
|
||||
{t('medications.aiCamera.buttons.album')}
|
||||
</Text>
|
||||
</GlassView>
|
||||
) : (
|
||||
<View style={[styles.secondaryBtn, styles.fallbackSecondaryBtn]}>
|
||||
<Ionicons name="images-outline" size={20} color="#0f172a" />
|
||||
<Text style={styles.secondaryBtnText}>从相册</Text>
|
||||
<Text style={styles.secondaryBtnText}>
|
||||
{t('medications.aiCamera.buttons.album')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { Colors, palette } from '@/constants/Colors';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { getMedicationRecognitionStatus } from '@/services/medications';
|
||||
import { MedicationRecognitionTask } from '@/types/medication';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
@@ -13,14 +14,15 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get('window');
|
||||
|
||||
const STATUS_STEPS: { key: MedicationRecognitionTask['status']; label: string }[] = [
|
||||
{ key: 'analyzing_product', label: '正在进行产品分析...' },
|
||||
{ key: 'analyzing_suitability', label: '正在检测适宜人群...' },
|
||||
{ key: 'analyzing_ingredients', label: '正在评估成分信息...' },
|
||||
{ key: 'analyzing_effects', label: '正在生成安全建议...' },
|
||||
const STEP_KEYS: MedicationRecognitionTask['status'][] = [
|
||||
'analyzing_product',
|
||||
'analyzing_suitability',
|
||||
'analyzing_ingredients',
|
||||
'analyzing_effects',
|
||||
];
|
||||
|
||||
export default function MedicationAiProgressScreen() {
|
||||
const { t } = useI18n();
|
||||
const { taskId, cover } = useLocalSearchParams<{ taskId?: string; cover?: string }>();
|
||||
const insets = useSafeAreaInsets();
|
||||
const [task, setTask] = useState<MedicationRecognitionTask | null>(null);
|
||||
@@ -35,11 +37,16 @@ export default function MedicationAiProgressScreen() {
|
||||
const floatAnim = useRef(new Animated.Value(0)).current;
|
||||
const opacityAnim = useRef(new Animated.Value(0.3)).current;
|
||||
|
||||
const steps = useMemo(() => STEP_KEYS.map(key => ({
|
||||
key,
|
||||
label: t(`medications.aiProgress.steps.${key}`)
|
||||
})), [t]);
|
||||
|
||||
const currentStepIndex = useMemo(() => {
|
||||
if (!task) return 0;
|
||||
const idx = STATUS_STEPS.findIndex((step) => step.key === task.status);
|
||||
const idx = STEP_KEYS.indexOf(task.status as any);
|
||||
if (idx >= 0) return idx;
|
||||
if (task.status === 'completed') return STATUS_STEPS.length;
|
||||
if (task.status === 'completed') return STEP_KEYS.length;
|
||||
return 0;
|
||||
}, [task]);
|
||||
|
||||
@@ -77,12 +84,12 @@ export default function MedicationAiProgressScreen() {
|
||||
pollingTimerRef.current = null;
|
||||
}
|
||||
// 显示错误提示弹窗
|
||||
setErrorMessage(data.errorMessage || '识别失败,请重新拍摄');
|
||||
setErrorMessage(data.errorMessage || t('medications.aiProgress.errors.default'));
|
||||
setShowErrorModal(true);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('[MEDICATION_AI] status failed', err);
|
||||
setError(err?.message || '查询失败,请稍后再试');
|
||||
setError(err?.message || t('medications.aiProgress.errors.queryFailed'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -148,12 +155,12 @@ export default function MedicationAiProgressScreen() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const progress = task?.progress ?? Math.min(100, (currentStepIndex / STATUS_STEPS.length) * 100 + 10);
|
||||
const progress = task?.progress ?? Math.min(100, (currentStepIndex / steps.length) * 100 + 10);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<LinearGradient colors={['#fdfdfd', '#f3f6fb']} style={StyleSheet.absoluteFill} />
|
||||
<HeaderBar title="识别中" onBack={() => router.back()} transparent />
|
||||
<LinearGradient colors={[palette.gray[25], palette.gray[50]]} style={StyleSheet.absoluteFill} />
|
||||
<HeaderBar title={t('medications.aiProgress.title')} onBack={() => router.back()} transparent />
|
||||
<View style={{ height: insets.top }} />
|
||||
|
||||
<View style={styles.heroCard}>
|
||||
@@ -172,7 +179,7 @@ export default function MedicationAiProgressScreen() {
|
||||
|
||||
{/* 渐变蒙版边框,增加视觉层次 */}
|
||||
<LinearGradient
|
||||
colors={['rgba(14, 165, 233, 0.3)', 'rgba(6, 182, 212, 0.2)', 'transparent']}
|
||||
colors={[Colors.light.primary + '4D', Colors.light.accentPurple + '33', 'transparent']}
|
||||
style={styles.gradientBorder}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
@@ -206,7 +213,7 @@ export default function MedicationAiProgressScreen() {
|
||||
</View>
|
||||
|
||||
<View style={styles.stepList}>
|
||||
{STATUS_STEPS.map((step, index) => {
|
||||
{steps.map((step, index) => {
|
||||
const active = index === currentStepIndex;
|
||||
const done = index < currentStepIndex;
|
||||
return (
|
||||
@@ -221,7 +228,7 @@ export default function MedicationAiProgressScreen() {
|
||||
{task?.status === 'completed' && (
|
||||
<View style={styles.stepRow}>
|
||||
<View style={[styles.bullet, styles.bulletDone]} />
|
||||
<Text style={[styles.stepLabel, styles.stepLabelDone]}>识别完成,正在载入详情...</Text>
|
||||
<Text style={[styles.stepLabel, styles.stepLabelDone]}>{t('medications.aiProgress.steps.completed')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
@@ -251,7 +258,7 @@ export default function MedicationAiProgressScreen() {
|
||||
<View style={styles.errorModalContent}>
|
||||
|
||||
{/* 标题 */}
|
||||
<Text style={styles.errorModalTitle}>需要重新拍摄</Text>
|
||||
<Text style={styles.errorModalTitle}>{t('medications.aiProgress.modal.title')}</Text>
|
||||
|
||||
{/* 提示信息 */}
|
||||
<View style={styles.errorMessageBox}>
|
||||
@@ -268,29 +275,29 @@ export default function MedicationAiProgressScreen() {
|
||||
<GlassView
|
||||
style={styles.retryButton}
|
||||
glassEffectStyle="regular"
|
||||
tintColor="rgba(14, 165, 233, 0.9)"
|
||||
tintColor={Colors.light.primary}
|
||||
isInteractive={true}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['rgba(14, 165, 233, 0.95)', 'rgba(6, 182, 212, 0.95)']}
|
||||
colors={[Colors.light.primary, Colors.light.accentPurple]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={styles.retryButtonGradient}
|
||||
>
|
||||
<Ionicons name="camera" size={20} color="#FFFFFF" style={{ marginRight: 8 }} />
|
||||
<Text style={styles.retryButtonText}>重新拍摄</Text>
|
||||
<Text style={styles.retryButtonText}>{t('medications.aiProgress.modal.retry')}</Text>
|
||||
</LinearGradient>
|
||||
</GlassView>
|
||||
) : (
|
||||
<View style={styles.retryButton}>
|
||||
<LinearGradient
|
||||
colors={['#0ea5e9', '#06b6d4']}
|
||||
colors={[Colors.light.primary, Colors.light.accentPurple]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={styles.retryButtonGradient}
|
||||
>
|
||||
<Ionicons name="camera" size={20} color="#FFFFFF" style={{ marginRight: 8 }} />
|
||||
<Text style={styles.retryButtonText}>重新拍摄</Text>
|
||||
<Text style={styles.retryButtonText}>{t('medications.aiProgress.modal.retry')}</Text>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
)}
|
||||
@@ -311,9 +318,9 @@ const styles = StyleSheet.create({
|
||||
marginHorizontal: 20,
|
||||
marginTop: 24,
|
||||
borderRadius: 24,
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: Colors.light.card,
|
||||
padding: 16,
|
||||
shadowColor: '#0f172a',
|
||||
shadowColor: Colors.light.text,
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 18,
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
@@ -322,7 +329,7 @@ const styles = StyleSheet.create({
|
||||
height: 230,
|
||||
borderRadius: 18,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#e2e8f0',
|
||||
backgroundColor: palette.gray[50],
|
||||
},
|
||||
heroImage: {
|
||||
width: '100%',
|
||||
@@ -330,7 +337,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
heroPlaceholder: {
|
||||
flex: 1,
|
||||
backgroundColor: '#e2e8f0',
|
||||
backgroundColor: palette.gray[50],
|
||||
},
|
||||
// 深色蒙版层,让点阵更清晰可见
|
||||
overlayMask: {
|
||||
@@ -368,15 +375,15 @@ const styles = StyleSheet.create({
|
||||
width: 5,
|
||||
height: 5,
|
||||
borderRadius: 2.5,
|
||||
backgroundColor: '#FFFFFF',
|
||||
shadowColor: '#0ea5e9',
|
||||
backgroundColor: Colors.light.background,
|
||||
shadowColor: Colors.light.primary,
|
||||
shadowOpacity: 0.9,
|
||||
shadowRadius: 6,
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
},
|
||||
progressRow: {
|
||||
height: 8,
|
||||
backgroundColor: '#f1f5f9',
|
||||
backgroundColor: palette.gray[50],
|
||||
borderRadius: 10,
|
||||
marginTop: 14,
|
||||
overflow: 'hidden',
|
||||
@@ -384,13 +391,13 @@ const styles = StyleSheet.create({
|
||||
progressBar: {
|
||||
height: '100%',
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#0ea5e9',
|
||||
backgroundColor: Colors.light.primary,
|
||||
},
|
||||
progressText: {
|
||||
marginTop: 8,
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
color: '#0f172a',
|
||||
color: Colors.light.text,
|
||||
textAlign: 'right',
|
||||
},
|
||||
stepList: {
|
||||
@@ -407,24 +414,24 @@ const styles = StyleSheet.create({
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 7,
|
||||
backgroundColor: '#e2e8f0',
|
||||
backgroundColor: palette.gray[50],
|
||||
},
|
||||
bulletActive: {
|
||||
backgroundColor: '#0ea5e9',
|
||||
backgroundColor: Colors.light.primary,
|
||||
},
|
||||
bulletDone: {
|
||||
backgroundColor: '#22c55e',
|
||||
backgroundColor: Colors.light.success,
|
||||
},
|
||||
stepLabel: {
|
||||
fontSize: 15,
|
||||
color: '#94a3b8',
|
||||
color: Colors.light.textMuted,
|
||||
},
|
||||
stepLabelActive: {
|
||||
color: '#0f172a',
|
||||
color: Colors.light.text,
|
||||
fontWeight: '700',
|
||||
},
|
||||
stepLabelDone: {
|
||||
color: '#16a34a',
|
||||
color: Colors.light.successDark,
|
||||
fontWeight: '700',
|
||||
},
|
||||
loadingBox: {
|
||||
@@ -433,7 +440,7 @@ const styles = StyleSheet.create({
|
||||
gap: 12,
|
||||
},
|
||||
errorText: {
|
||||
color: '#ef4444',
|
||||
color: Colors.light.danger,
|
||||
fontSize: 14,
|
||||
},
|
||||
// Modal 样式
|
||||
@@ -445,10 +452,10 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
errorModalContainer: {
|
||||
width: SCREEN_WIDTH - 48,
|
||||
backgroundColor: '#FFFFFF',
|
||||
backgroundColor: Colors.light.card,
|
||||
borderRadius: 28,
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#0ea5e9',
|
||||
shadowColor: Colors.light.primary,
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 24,
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
@@ -465,36 +472,36 @@ const styles = StyleSheet.create({
|
||||
width: 96,
|
||||
height: 96,
|
||||
borderRadius: 48,
|
||||
backgroundColor: 'rgba(14, 165, 233, 0.08)',
|
||||
backgroundColor: palette.purple[50],
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
errorModalTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: '700',
|
||||
color: '#0f172a',
|
||||
color: Colors.light.text,
|
||||
marginBottom: 16,
|
||||
textAlign: 'center',
|
||||
},
|
||||
errorMessageBox: {
|
||||
backgroundColor: '#f0f9ff',
|
||||
backgroundColor: palette.purple[25],
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
marginBottom: 28,
|
||||
width: '100%',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(14, 165, 233, 0.2)',
|
||||
borderColor: palette.purple[200],
|
||||
},
|
||||
errorMessageText: {
|
||||
fontSize: 15,
|
||||
lineHeight: 24,
|
||||
color: '#475569',
|
||||
color: Colors.light.textSecondary,
|
||||
textAlign: 'center',
|
||||
},
|
||||
retryButton: {
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#0ea5e9',
|
||||
shadowColor: Colors.light.primary,
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 12,
|
||||
shadowOffset: { width: 0, height: 6 },
|
||||
@@ -509,6 +516,6 @@ const styles = StyleSheet.create({
|
||||
retryButtonText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#FFFFFF',
|
||||
color: Colors.light.onPrimary,
|
||||
},
|
||||
});
|
||||
|
||||
886
app/medications/ai-summary.tsx
Normal file
886
app/medications/ai-summary.tsx
Normal file
@@ -0,0 +1,886 @@
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { IconSymbol } from '@/components/ui/IconSymbol';
|
||||
import { getMedicationAiSummary } from '@/services/medications';
|
||||
import { type MedicationAiSummary, type MedicationAiSummaryItem } from '@/types/medication';
|
||||
import { useFocusEffect } from '@react-navigation/native';
|
||||
import dayjs from 'dayjs';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Modal,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
export default function MedicationAiSummaryScreen() {
|
||||
const { t } = useTranslation();
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
const [summary, setSummary] = useState<MedicationAiSummary | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [lastUpdated, setLastUpdated] = useState<string>('');
|
||||
const [showInfoModal, setShowInfoModal] = useState(false);
|
||||
const [showCompletionInfoModal, setShowCompletionInfoModal] = useState(false);
|
||||
|
||||
const fetchSummary = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await getMedicationAiSummary();
|
||||
setSummary(data);
|
||||
setLastUpdated(dayjs().format('YYYY.MM.DD HH:mm'));
|
||||
} catch (err: any) {
|
||||
const status = err?.status;
|
||||
if (status === 403) {
|
||||
setError(t('medications.aiSummary.error403'));
|
||||
} else {
|
||||
setError(err?.message || t('medications.aiSummary.genericError'));
|
||||
}
|
||||
setSummary(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [t]);
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
fetchSummary();
|
||||
}, [fetchSummary])
|
||||
);
|
||||
|
||||
const handleExplainRefresh = useCallback(() => {
|
||||
setShowInfoModal(true);
|
||||
}, []);
|
||||
|
||||
const handleExplainCompletion = useCallback(() => {
|
||||
setShowCompletionInfoModal(true);
|
||||
}, []);
|
||||
|
||||
const medicationItems = summary?.medicationAnalysis ?? [];
|
||||
const isEmpty = !loading && !error && medicationItems.length === 0;
|
||||
|
||||
const stats = useMemo(() => {
|
||||
const plannedDoses = medicationItems.reduce((acc, item) => acc + (item.plannedDoses || 0), 0);
|
||||
const takenDoses = medicationItems.reduce((acc, item) => acc + (item.takenDoses || 0), 0);
|
||||
const completion = plannedDoses > 0 ? takenDoses / plannedDoses : 0;
|
||||
const avgCompletion =
|
||||
medicationItems.length > 0
|
||||
? medicationItems.reduce((acc, item) => acc + (item.completionRate || 0), 0) /
|
||||
medicationItems.length
|
||||
: 0;
|
||||
const plannedDays = medicationItems.reduce((acc, item) => acc + (item.plannedDays || 0), 0);
|
||||
|
||||
return {
|
||||
plannedDoses,
|
||||
takenDoses,
|
||||
completion,
|
||||
avgCompletion,
|
||||
plannedDays,
|
||||
activePlans: medicationItems.length,
|
||||
};
|
||||
}, [medicationItems]);
|
||||
|
||||
const completionPercent = Math.min(100, Math.round(stats.completion * 100));
|
||||
|
||||
const renderMedicationCard = (item: MedicationAiSummaryItem) => {
|
||||
const percent = Math.min(100, Math.round((item.completionRate || 0) * 100));
|
||||
return (
|
||||
<View key={item.id} style={styles.planCard}>
|
||||
<View style={styles.planHeader}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<ThemedText style={styles.planName}>{item.name}</ThemedText>
|
||||
<ThemedText style={styles.planMeta}>
|
||||
{t('medications.aiSummary.daysLabel', {
|
||||
days: item.plannedDays,
|
||||
times: item.timesPerDay,
|
||||
})}
|
||||
</ThemedText>
|
||||
</View>
|
||||
<View style={styles.planChip}>
|
||||
<IconSymbol name="sparkles" size={14} color="#d6b37f" />
|
||||
<ThemedText style={styles.planChipText}>
|
||||
{t('medications.aiSummary.badges.adherence')}
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.progressRow}>
|
||||
<View style={styles.progressTrack}>
|
||||
<View style={[styles.progressFill, { width: `${percent}%` }]} />
|
||||
</View>
|
||||
<ThemedText style={styles.progressValue}>
|
||||
{t('medications.aiSummary.completionLabel', { value: percent })}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.planFooter}>
|
||||
<ThemedText style={styles.planStat}>
|
||||
{t('medications.aiSummary.doseSummary', {
|
||||
taken: item.takenDoses,
|
||||
planned: item.plannedDoses,
|
||||
})}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.planDate}>
|
||||
{dayjs(item.startDate).format('YYYY.MM.DD')}
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const headerTitle = (
|
||||
<View style={styles.headerTitle}>
|
||||
<ThemedText style={styles.title}>{t('medications.aiSummary.title')}</ThemedText>
|
||||
<ThemedText style={styles.subtitle}>{t('medications.aiSummary.subtitle')}</ThemedText>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<LinearGradient
|
||||
colors={['#0a0e16', '#0b101a', '#0b0f16']}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<View style={styles.glowTop} />
|
||||
<View style={styles.glowBottom} />
|
||||
|
||||
<HeaderBar
|
||||
title={headerTitle}
|
||||
tone="dark"
|
||||
transparent
|
||||
variant="minimal"
|
||||
right={
|
||||
<TouchableOpacity
|
||||
style={styles.iconButton}
|
||||
onPress={handleExplainRefresh}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<IconSymbol name="info.circle" size={20} color="#dfe8ff" />
|
||||
</TouchableOpacity>
|
||||
}
|
||||
/>
|
||||
|
||||
<ScrollView
|
||||
contentContainerStyle={[
|
||||
styles.scrollContent,
|
||||
{ paddingBottom: insets.bottom + 32, paddingTop: insets.top + 80 },
|
||||
]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#131a28', '#0f1623']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.heroCard}
|
||||
>
|
||||
<View style={styles.heroHeader}>
|
||||
<ThemedText style={styles.heroLabel}>
|
||||
{t('medications.aiSummary.overviewTitle')}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.updatedAt}>
|
||||
{lastUpdated ? t('medications.aiSummary.updatedAt', { time: lastUpdated }) : ' '}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.heroMainRow}>
|
||||
<View style={styles.heroLeft}>
|
||||
<ThemedText style={styles.heroValue}>{completionPercent}%</ThemedText>
|
||||
<ThemedText style={styles.heroCaption}>
|
||||
{t('medications.aiSummary.doseSummary', {
|
||||
taken: stats.takenDoses,
|
||||
planned: stats.plannedDoses,
|
||||
})}
|
||||
</ThemedText>
|
||||
<View style={styles.heroProgressTrack}>
|
||||
<View style={[styles.heroProgressFill, { width: `${completionPercent}%` }]} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.heroChip}>
|
||||
<ThemedText style={styles.heroChipLabel}>
|
||||
{t('medications.aiSummary.badges.safety')}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.heroChipValue}>{stats.activePlans}</ThemedText>
|
||||
<ThemedText style={styles.heroChipHint}>
|
||||
{t('medications.aiSummary.stats.activePlans')}
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.heroStatsRow}>
|
||||
<View style={styles.heroStatItem}>
|
||||
<ThemedText style={styles.heroStatLabel}>
|
||||
{t('medications.aiSummary.stats.avgCompletion')}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.heroStatValue}>
|
||||
{Math.round(stats.avgCompletion * 100)}%
|
||||
</ThemedText>
|
||||
</View>
|
||||
<View style={styles.heroStatItem}>
|
||||
<ThemedText style={styles.heroStatLabel}>
|
||||
{t('medications.aiSummary.stats.activeDays')}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.heroStatValue}>{stats.plannedDays}</ThemedText>
|
||||
</View>
|
||||
<View style={styles.heroStatItem}>
|
||||
<ThemedText style={styles.heroStatLabel}>
|
||||
{t('medications.aiSummary.stats.takenDoses')}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.heroStatValue}>{stats.takenDoses}</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
|
||||
{error ? (
|
||||
<View style={styles.errorCard}>
|
||||
<ThemedText style={styles.errorTitle}>{error}</ThemedText>
|
||||
<TouchableOpacity style={styles.retryButton} onPress={fetchSummary} activeOpacity={0.85}>
|
||||
<ThemedText style={styles.retryText}>{t('medications.aiSummary.retry')}</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<View style={styles.sectionCard}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<ThemedText style={styles.sectionTitle}>
|
||||
{t('medications.aiSummary.keyInsights')}
|
||||
</ThemedText>
|
||||
<View style={styles.pillChip}>
|
||||
<IconSymbol name="sparkles" size={14} color="#0b0f16" />
|
||||
<ThemedText style={styles.pillChipText}>
|
||||
{t('medications.aiSummary.pillChip')}
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
<ThemedText style={styles.insightText}>
|
||||
{summary?.keyInsights || t('medications.aiSummary.keyInsightPlaceholder')}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.sectionCard}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<ThemedText style={styles.sectionTitle}>
|
||||
{t('medications.aiSummary.listTitle')}
|
||||
</ThemedText>
|
||||
<TouchableOpacity
|
||||
style={styles.infoIconButton}
|
||||
onPress={handleExplainCompletion}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<IconSymbol name="info.circle" size={16} color="#8b94a8" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{loading ? (
|
||||
<View style={styles.loadingRow}>
|
||||
<ActivityIndicator color="#d6b37f" />
|
||||
<ThemedText style={styles.loadingText}>
|
||||
{t('medications.aiSummary.refresh')}
|
||||
</ThemedText>
|
||||
</View>
|
||||
) : isEmpty ? (
|
||||
<View style={styles.emptyState}>
|
||||
<ThemedText style={styles.emptyTitle}>
|
||||
{t('medications.aiSummary.emptyTitle')}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.emptySubtitle}>
|
||||
{t('medications.aiSummary.emptyDescription')}
|
||||
</ThemedText>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.planList}>{medicationItems.map(renderMedicationCard)}</View>
|
||||
)}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
<Modal
|
||||
visible={showInfoModal}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setShowInfoModal(false)}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={styles.infoOverlay}
|
||||
activeOpacity={1}
|
||||
onPress={() => setShowInfoModal(false)}
|
||||
>
|
||||
<TouchableOpacity
|
||||
activeOpacity={1}
|
||||
onPress={(e) => e.stopPropagation()}
|
||||
style={styles.infoModal}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#111827', '#0b1220']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.infoGradient}
|
||||
>
|
||||
<View style={styles.infoHeader}>
|
||||
<ThemedText style={styles.infoBadge}>{t('medications.aiSummary.infoModal.badge')}</ThemedText>
|
||||
<ThemedText style={styles.infoTitle}>{t('medications.aiSummary.infoModal.title')}</ThemedText>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowInfoModal(false)}
|
||||
style={styles.infoClose}
|
||||
accessibilityLabel="close"
|
||||
>
|
||||
<IconSymbol name="xmark" size={18} color="#e5e7eb" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.infoContent}>
|
||||
<Text style={styles.infoText}>
|
||||
{t('medications.aiSummary.infoModal.point1')}
|
||||
</Text>
|
||||
<Text style={styles.infoText}>
|
||||
{t('medications.aiSummary.infoModal.point2')}
|
||||
</Text>
|
||||
<Text style={styles.infoText}>
|
||||
{t('medications.aiSummary.infoModal.point3')}
|
||||
</Text>
|
||||
<Text style={styles.infoText}>
|
||||
{t('medications.aiSummary.infoModal.point4')}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.infoButtonContainer}>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowInfoModal(false)}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#d6b37f', '#c59b63']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={styles.infoButton}
|
||||
>
|
||||
<Text style={styles.infoButtonText}>{t('medications.aiSummary.infoModal.button')}</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</TouchableOpacity>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
visible={showCompletionInfoModal}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setShowCompletionInfoModal(false)}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={styles.infoOverlay}
|
||||
activeOpacity={1}
|
||||
onPress={() => setShowCompletionInfoModal(false)}
|
||||
>
|
||||
<TouchableOpacity
|
||||
activeOpacity={1}
|
||||
onPress={(e) => e.stopPropagation()}
|
||||
style={styles.infoModal}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#111827', '#0b1220']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.infoGradient}
|
||||
>
|
||||
<View style={styles.infoHeader}>
|
||||
<ThemedText style={styles.infoBadge}>{t('medications.aiSummary.completionInfoModal.badge')}</ThemedText>
|
||||
<ThemedText style={styles.infoTitle}>{t('medications.aiSummary.completionInfoModal.title')}</ThemedText>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowCompletionInfoModal(false)}
|
||||
style={styles.infoClose}
|
||||
accessibilityLabel="close"
|
||||
>
|
||||
<IconSymbol name="xmark" size={18} color="#e5e7eb" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.infoContent}>
|
||||
<Text style={styles.infoText}>
|
||||
{t('medications.aiSummary.completionInfoModal.point1')}
|
||||
</Text>
|
||||
<Text style={styles.infoText}>
|
||||
{t('medications.aiSummary.completionInfoModal.point2')}
|
||||
</Text>
|
||||
<Text style={styles.infoText}>
|
||||
{t('medications.aiSummary.completionInfoModal.point3')}
|
||||
</Text>
|
||||
<Text style={styles.infoText}>
|
||||
{t('medications.aiSummary.completionInfoModal.point4')}
|
||||
</Text>
|
||||
<Text style={styles.infoText}>
|
||||
{t('medications.aiSummary.completionInfoModal.point5')}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.infoButtonContainer}>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowCompletionInfoModal(false)}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#d6b37f', '#c59b63']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={styles.infoButton}
|
||||
>
|
||||
<Text style={styles.infoButtonText}>{t('medications.aiSummary.completionInfoModal.button')}</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</TouchableOpacity>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#0b0f16',
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: 20,
|
||||
gap: 20,
|
||||
},
|
||||
glowTop: {
|
||||
position: 'absolute',
|
||||
top: -80,
|
||||
left: -40,
|
||||
width: 200,
|
||||
height: 200,
|
||||
backgroundColor: '#1b2a44',
|
||||
opacity: 0.35,
|
||||
borderRadius: 140,
|
||||
},
|
||||
glowBottom: {
|
||||
position: 'absolute',
|
||||
bottom: -120,
|
||||
right: -60,
|
||||
width: 240,
|
||||
height: 240,
|
||||
backgroundColor: '#123125',
|
||||
opacity: 0.25,
|
||||
borderRadius: 200,
|
||||
},
|
||||
iconButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.08)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(255,255,255,0.04)',
|
||||
},
|
||||
headerTitle: {
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
gap: 6,
|
||||
},
|
||||
badge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 999,
|
||||
backgroundColor: '#d6b37f',
|
||||
},
|
||||
badgeText: {
|
||||
color: '#0b0f16',
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
title: {
|
||||
color: '#f6f7fb',
|
||||
fontSize: 22,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
subtitle: {
|
||||
color: '#b9c2d3',
|
||||
fontSize: 14,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
heroCard: {
|
||||
borderRadius: 24,
|
||||
padding: 18,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.06)',
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 16,
|
||||
gap: 14,
|
||||
},
|
||||
heroHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
heroLabel: {
|
||||
color: '#f5f6fb',
|
||||
fontSize: 16,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
updatedAt: {
|
||||
color: '#8b94a8',
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
heroMainRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
gap: 16,
|
||||
},
|
||||
heroLeft: {
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
},
|
||||
heroValue: {
|
||||
color: '#36d0a5',
|
||||
fontSize: 38,
|
||||
lineHeight: 42,
|
||||
fontFamily: 'AliBold',
|
||||
letterSpacing: 0.5,
|
||||
flexShrink: 1,
|
||||
},
|
||||
heroCaption: {
|
||||
color: '#c2ccdf',
|
||||
fontSize: 13,
|
||||
fontFamily: 'AliRegular',
|
||||
marginTop: 4,
|
||||
},
|
||||
heroProgressTrack: {
|
||||
marginTop: 12,
|
||||
height: 10,
|
||||
borderRadius: 10,
|
||||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
heroProgressFill: {
|
||||
height: '100%',
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#36d0a5',
|
||||
},
|
||||
heroChip: {
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 18,
|
||||
backgroundColor: 'rgba(214, 179, 127, 0.12)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(214, 179, 127, 0.3)',
|
||||
minWidth: 120,
|
||||
alignItems: 'flex-start',
|
||||
gap: 4,
|
||||
},
|
||||
heroChipLabel: {
|
||||
color: '#d6b37f',
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
heroChipValue: {
|
||||
color: '#f6f7fb',
|
||||
fontSize: 20,
|
||||
fontFamily: 'AliBold',
|
||||
lineHeight: 24,
|
||||
},
|
||||
heroChipHint: {
|
||||
color: '#b9c2d3',
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
heroStatsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
heroStatItem: {
|
||||
flex: 1,
|
||||
padding: 12,
|
||||
borderRadius: 14,
|
||||
backgroundColor: 'rgba(255,255,255,0.04)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.04)',
|
||||
},
|
||||
heroStatLabel: {
|
||||
color: '#9dabc4',
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
heroStatValue: {
|
||||
color: '#f6f7fb',
|
||||
fontSize: 18,
|
||||
marginTop: 6,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
sectionCard: {
|
||||
borderRadius: 20,
|
||||
padding: 16,
|
||||
backgroundColor: 'rgba(255,255,255,0.03)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.05)',
|
||||
gap: 12,
|
||||
},
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
sectionTitle: {
|
||||
color: '#f5f6fb',
|
||||
fontSize: 16,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
pillChip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
backgroundColor: '#d6b37f',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 999,
|
||||
},
|
||||
pillChipText: {
|
||||
color: '#0b0f16',
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
insightText: {
|
||||
color: '#d9e2f2',
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
planList: {
|
||||
gap: 12,
|
||||
},
|
||||
planCard: {
|
||||
borderRadius: 16,
|
||||
padding: 14,
|
||||
backgroundColor: 'rgba(255,255,255,0.04)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.06)',
|
||||
gap: 10,
|
||||
},
|
||||
planHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
planName: {
|
||||
color: '#f6f7fb',
|
||||
fontSize: 16,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
planMeta: {
|
||||
color: '#9dabc4',
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliRegular',
|
||||
marginTop: 2,
|
||||
},
|
||||
planChip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 999,
|
||||
backgroundColor: 'rgba(214, 179, 127, 0.15)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(214, 179, 127, 0.35)',
|
||||
},
|
||||
planChipText: {
|
||||
color: '#d6b37f',
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
progressRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
progressTrack: {
|
||||
flex: 1,
|
||||
height: 10,
|
||||
borderRadius: 10,
|
||||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
progressFill: {
|
||||
height: '100%',
|
||||
backgroundColor: '#36d0a5',
|
||||
borderRadius: 10,
|
||||
},
|
||||
progressValue: {
|
||||
color: '#f6f7fb',
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
planFooter: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
planStat: {
|
||||
color: '#c7d1e4',
|
||||
fontSize: 13,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
planDate: {
|
||||
color: '#7f8aa4',
|
||||
fontSize: 12,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
errorCard: {
|
||||
padding: 16,
|
||||
borderRadius: 16,
|
||||
backgroundColor: 'rgba(255, 86, 86, 0.08)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 86, 86, 0.3)',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
},
|
||||
errorTitle: {
|
||||
color: '#ff9c9c',
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
retryButton: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 999,
|
||||
backgroundColor: '#ff9c9c',
|
||||
},
|
||||
retryText: {
|
||||
color: '#0b0f16',
|
||||
fontSize: 13,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
loadingRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
loadingText: {
|
||||
color: '#c7d1e4',
|
||||
fontSize: 13,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
emptyState: {
|
||||
paddingVertical: 12,
|
||||
gap: 6,
|
||||
},
|
||||
emptyTitle: {
|
||||
color: '#f6f7fb',
|
||||
fontSize: 15,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
emptySubtitle: {
|
||||
color: '#9dabc4',
|
||||
fontSize: 13,
|
||||
fontFamily: 'AliRegular',
|
||||
lineHeight: 20,
|
||||
},
|
||||
infoOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
infoModal: {
|
||||
width: '100%',
|
||||
maxWidth: 400,
|
||||
borderRadius: 24,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
},
|
||||
infoGradient: {
|
||||
padding: 24,
|
||||
gap: 20,
|
||||
},
|
||||
infoHeader: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 4,
|
||||
},
|
||||
infoBadge: {
|
||||
color: '#d6b37f',
|
||||
fontSize: 24,
|
||||
lineHeight: 28,
|
||||
fontFamily: 'AliBold',
|
||||
marginBottom: 10,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
infoTitle: {
|
||||
color: '#f6f7fb',
|
||||
fontSize: 16,
|
||||
fontFamily: 'AliBold',
|
||||
textAlign: 'center',
|
||||
},
|
||||
infoClose: {
|
||||
position: 'absolute',
|
||||
right: -4,
|
||||
top: -4,
|
||||
padding: 8,
|
||||
width: 36,
|
||||
height: 36,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 18,
|
||||
backgroundColor: 'rgba(255,255,255,0.05)',
|
||||
},
|
||||
infoContent: {
|
||||
gap: 14,
|
||||
},
|
||||
infoText: {
|
||||
color: '#d9e2f2',
|
||||
fontSize: 14,
|
||||
lineHeight: 18,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
infoButtonContainer: {
|
||||
marginTop: 12,
|
||||
alignItems: 'center',
|
||||
},
|
||||
infoButtonWrapper: {
|
||||
// minWidth: 120,
|
||||
// maxWidth: 180,
|
||||
},
|
||||
infoButton: {
|
||||
borderRadius: 12,
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 28,
|
||||
alignItems: 'center',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
infoButtonGlass: {
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 28,
|
||||
alignItems: 'center',
|
||||
},
|
||||
infoButtonText: {
|
||||
color: '#0b0f16',
|
||||
fontSize: 15,
|
||||
fontFamily: 'AliBold',
|
||||
letterSpacing: 0.2,
|
||||
},
|
||||
infoIconButton: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(139, 148, 168, 0.1)',
|
||||
},
|
||||
});
|
||||
@@ -1,5 +1,6 @@
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { useAppSelector } from '@/hooks/redux';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useMoodData } from '@/hooks/useMoodData';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import { getMoodOptions } from '@/services/moodCheckins';
|
||||
@@ -61,6 +62,7 @@ const generateCalendarData = (targetDate: Date) => {
|
||||
};
|
||||
|
||||
export default function MoodCalendarScreen() {
|
||||
const { t } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
const params = useLocalSearchParams();
|
||||
const { fetchMoodRecords, fetchMoodHistoryRecords } = useMoodData();
|
||||
@@ -89,9 +91,30 @@ export default function MoodCalendarScreen() {
|
||||
return selectLatestMoodRecordByDate(selectedDateString)(state);
|
||||
});
|
||||
|
||||
const moodOptions = getMoodOptions();
|
||||
const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
||||
const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||||
const moodOptions = getMoodOptions(t);
|
||||
const weekDays = [
|
||||
t('mood.calendar.weekDays.monday'),
|
||||
t('mood.calendar.weekDays.tuesday'),
|
||||
t('mood.calendar.weekDays.wednesday'),
|
||||
t('mood.calendar.weekDays.thursday'),
|
||||
t('mood.calendar.weekDays.friday'),
|
||||
t('mood.calendar.weekDays.saturday'),
|
||||
t('mood.calendar.weekDays.sunday'),
|
||||
];
|
||||
const monthNames = [
|
||||
t('mood.calendar.months.january'),
|
||||
t('mood.calendar.months.february'),
|
||||
t('mood.calendar.months.march'),
|
||||
t('mood.calendar.months.april'),
|
||||
t('mood.calendar.months.may'),
|
||||
t('mood.calendar.months.june'),
|
||||
t('mood.calendar.months.july'),
|
||||
t('mood.calendar.months.august'),
|
||||
t('mood.calendar.months.september'),
|
||||
t('mood.calendar.months.october'),
|
||||
t('mood.calendar.months.november'),
|
||||
t('mood.calendar.months.december'),
|
||||
];
|
||||
|
||||
// 生成当前月份的日历数据
|
||||
const { calendar, today, month, year } = generateCalendarData(currentMonth);
|
||||
@@ -103,7 +126,7 @@ export default function MoodCalendarScreen() {
|
||||
const endDate = dayjs(targetMonth).endOf('month').format('YYYY-MM-DD');
|
||||
await fetchMoodHistoryRecordsRef.current({ startDate, endDate });
|
||||
} catch (error) {
|
||||
console.error('加载月份心情数据失败:', error);
|
||||
console.error(t('mood.calendar.errors.loadMonthDataFailed'), error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
@@ -112,7 +135,7 @@ export default function MoodCalendarScreen() {
|
||||
try {
|
||||
await fetchMoodRecordsRef.current(dateString);
|
||||
} catch (error) {
|
||||
console.error('加载心情记录失败:', error);
|
||||
console.error(t('mood.calendar.errors.loadDailyDataFailed'), error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
@@ -235,7 +258,7 @@ export default function MoodCalendarScreen() {
|
||||
|
||||
<View style={styles.safeArea}>
|
||||
<HeaderBar
|
||||
title="心情日历"
|
||||
title={t('mood.calendar.title')}
|
||||
onBack={() => router.back()}
|
||||
withSafeTop={false}
|
||||
transparent={true}
|
||||
@@ -255,7 +278,7 @@ export default function MoodCalendarScreen() {
|
||||
>
|
||||
<Text style={styles.navButtonText}>‹</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.monthTitle}>{year}年{monthNames[month - 1]}</Text>
|
||||
<Text style={styles.monthTitle}>{year} {monthNames[month - 1]}</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.navButton}
|
||||
onPress={goToNextMonth}
|
||||
@@ -315,13 +338,13 @@ export default function MoodCalendarScreen() {
|
||||
<View style={styles.selectedDateSection}>
|
||||
<View style={styles.selectedDateHeader}>
|
||||
<Text style={styles.selectedDateTitle}>
|
||||
{selectedDay ? dayjs(currentMonth).date(selectedDay).format('YYYY年M月D日') : '请选择日期'}
|
||||
{selectedDay ? dayjs(currentMonth).date(selectedDay).format(t('mood.calendar.selectedDate.dateFormat')) : t('mood.calendar.selectedDate.selectDate')}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.addMoodButton}
|
||||
onPress={openMoodEdit}
|
||||
>
|
||||
<Text style={styles.addMoodButtonText}>记录</Text>
|
||||
<Text style={styles.addMoodButtonText}>{t('mood.calendar.selectedDate.record')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
@@ -343,7 +366,7 @@ export default function MoodCalendarScreen() {
|
||||
<Text style={styles.recordMood}>
|
||||
{moodOptions.find(m => m.type === selectedDateMood.moodType)?.label}
|
||||
</Text>
|
||||
<Text style={styles.recordIntensity}>强度: {selectedDateMood.intensity}</Text>
|
||||
<Text style={styles.recordIntensity}>{t('mood.calendar.selectedDate.intensity')}: {selectedDateMood.intensity}</Text>
|
||||
{selectedDateMood.description && (
|
||||
<Text style={styles.recordDescription}>{selectedDateMood.description}</Text>
|
||||
)}
|
||||
@@ -355,14 +378,14 @@ export default function MoodCalendarScreen() {
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<View style={styles.emptyRecord}>
|
||||
<Text style={styles.emptyRecordText}>暂无心情记录</Text>
|
||||
<Text style={styles.emptyRecordSubtext}>点击右上角"记录"按钮添加心情</Text>
|
||||
<Text style={styles.emptyRecordText}>{t('mood.calendar.selectedDate.noRecord')}</Text>
|
||||
<Text style={styles.emptyRecordSubtext}>{t('mood.calendar.selectedDate.noRecordHint')}</Text>
|
||||
</View>
|
||||
)
|
||||
) : (
|
||||
<View style={styles.emptyRecord}>
|
||||
<Text style={styles.emptyRecordText}>请先选择一个日期</Text>
|
||||
<Text style={styles.emptyRecordSubtext}>点击日历中的日期,然后点击"记录"按钮添加心情</Text>
|
||||
<Text style={styles.emptyRecordText}>{t('mood.calendar.selectedDate.noDateSelected')}</Text>
|
||||
<Text style={styles.emptyRecordSubtext}>{t('mood.calendar.selectedDate.noDateSelectedHint')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import { getMoodOptions, MoodType } from '@/services/moodCheckins';
|
||||
import {
|
||||
@@ -31,6 +32,7 @@ import {
|
||||
} from 'react-native';
|
||||
|
||||
export default function MoodEditScreen() {
|
||||
const { t } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
@@ -51,7 +53,7 @@ export default function MoodEditScreen() {
|
||||
const scrollViewRef = useRef<ScrollView>(null);
|
||||
const textInputRef = useRef<TextInput>(null);
|
||||
|
||||
const moodOptions = getMoodOptions();
|
||||
const moodOptions = getMoodOptions(t);
|
||||
|
||||
// 从 Redux 获取数据
|
||||
const moodRecords = useAppSelector(selectMoodRecordsByDate(selectedDate));
|
||||
@@ -95,7 +97,7 @@ export default function MoodEditScreen() {
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!selectedMood) {
|
||||
Alert.alert('提示', '请选择心情');
|
||||
Alert.alert(t('common.alert'), t('mood.edit.alerts.selectMood'));
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -120,12 +122,12 @@ export default function MoodEditScreen() {
|
||||
})).unwrap();
|
||||
}
|
||||
|
||||
Alert.alert('成功', existingMood ? '心情记录已更新' : '心情记录已保存', [
|
||||
{ text: '确定', onPress: () => router.back() }
|
||||
Alert.alert(t('common.success'), existingMood ? t('mood.edit.alerts.updateSuccess') : t('mood.edit.alerts.saveSuccess'), [
|
||||
{ text: t('common.confirm'), onPress: () => router.back() }
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('保存心情失败:', error);
|
||||
Alert.alert('错误', '保存心情失败,请重试');
|
||||
Alert.alert(t('common.error'), t('mood.edit.alerts.saveError'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
@@ -135,24 +137,24 @@ export default function MoodEditScreen() {
|
||||
if (!existingMood) return;
|
||||
|
||||
Alert.alert(
|
||||
'确认删除',
|
||||
'确定要删除这条心情记录吗?',
|
||||
t('mood.edit.alerts.confirmDeleteTitle'),
|
||||
t('mood.edit.alerts.confirmDelete'),
|
||||
[
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{ text: t('common.cancel'), style: 'cancel' },
|
||||
{
|
||||
text: '删除',
|
||||
text: t('common.delete'),
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
try {
|
||||
setIsDeleting(true);
|
||||
await dispatch(deleteMoodRecord({ id: existingMood.id })).unwrap();
|
||||
|
||||
Alert.alert('成功', '心情记录已删除', [
|
||||
{ text: '确定', onPress: () => router.back() }
|
||||
Alert.alert(t('common.success'), t('mood.edit.alerts.deleteSuccess'), [
|
||||
{ text: t('common.confirm'), onPress: () => router.back() }
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('删除心情失败:', error);
|
||||
Alert.alert('错误', '删除心情失败,请重试');
|
||||
Alert.alert(t('common.error'), t('mood.edit.alerts.deleteError'));
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
@@ -183,7 +185,7 @@ export default function MoodEditScreen() {
|
||||
<View style={styles.decorativeCircle2} />
|
||||
<View style={styles.safeArea} >
|
||||
<HeaderBar
|
||||
title={existingMood ? '编辑心情' : '记录心情'}
|
||||
title={existingMood ? t('mood.edit.editTitle') : t('mood.edit.title')}
|
||||
onBack={() => router.back()}
|
||||
withSafeTop={false}
|
||||
transparent={true}
|
||||
@@ -207,13 +209,13 @@ export default function MoodEditScreen() {
|
||||
{/* 日期显示 */}
|
||||
<View style={styles.dateSection}>
|
||||
<Text style={styles.dateTitle}>
|
||||
{dayjs(selectedDate).format('YYYY年M月D日')}
|
||||
{dayjs(selectedDate).format(t('mood.edit.dateFormat'))}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 心情选择 */}
|
||||
<View style={styles.moodSection}>
|
||||
<Text style={styles.sectionTitle}>选择心情</Text>
|
||||
<Text style={styles.sectionTitle}>{t('mood.edit.selectMood')}</Text>
|
||||
<View style={styles.moodOptions}>
|
||||
{moodOptions.map((mood, index) => (
|
||||
<TouchableOpacity
|
||||
@@ -233,7 +235,7 @@ export default function MoodEditScreen() {
|
||||
|
||||
{/* 心情强度选择 */}
|
||||
<View style={styles.intensitySection}>
|
||||
<Text style={styles.sectionTitle}>心情强度</Text>
|
||||
<Text style={styles.sectionTitle}>{t('mood.edit.intensity')}</Text>
|
||||
<MoodIntensitySlider
|
||||
value={intensity}
|
||||
onValueChange={handleIntensityChange}
|
||||
@@ -248,18 +250,12 @@ export default function MoodEditScreen() {
|
||||
{/* 心情描述 */}
|
||||
|
||||
<View style={styles.descriptionSection}>
|
||||
<Text style={styles.sectionTitle}>心情日记</Text>
|
||||
<Text style={styles.diarySubtitle}>记录你的心情,珍藏美好回忆</Text>
|
||||
<Text style={styles.sectionTitle}>{t('mood.edit.diary')}</Text>
|
||||
<Text style={styles.diarySubtitle}>{t('mood.edit.diarySubtitle')}</Text>
|
||||
<TextInput
|
||||
ref={textInputRef}
|
||||
style={styles.descriptionInput}
|
||||
placeholder={`今天的心情如何?
|
||||
|
||||
你经历过什么特别的事情吗?
|
||||
有什么让你开心的事?
|
||||
或者,有什么让你感到困扰?
|
||||
|
||||
写下你的感受,让这些时刻成为你珍贵的记忆...`}
|
||||
placeholder={t('mood.edit.placeholder')}
|
||||
placeholderTextColor="#a8a8a8"
|
||||
value={description}
|
||||
onChangeText={setDescription}
|
||||
@@ -289,7 +285,7 @@ export default function MoodEditScreen() {
|
||||
disabled={!selectedMood || isLoading}
|
||||
>
|
||||
<Text style={styles.saveButtonText}>
|
||||
{isLoading ? '保存中...' : existingMood ? '更新心情' : '保存心情'}
|
||||
{isLoading ? t('mood.edit.saving') : existingMood ? t('mood.edit.update') : t('mood.edit.save')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
{existingMood && (
|
||||
|
||||
@@ -7,6 +7,7 @@ import { Colors } from '@/constants/Colors';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import { DietRecord } from '@/services/dietRecords';
|
||||
import { type FoodRecognitionResponse } from '@/services/foodRecognition';
|
||||
@@ -20,16 +21,20 @@ import {
|
||||
selectNutritionRecordsByDate,
|
||||
selectNutritionSummaryByDate
|
||||
} from '@/store/nutritionSlice';
|
||||
import { getMonthDaysZh, getMonthTitleZh, getTodayIndexInMonth } from '@/utils/date';
|
||||
import { getTodayIndexInMonth } from '@/utils/date';
|
||||
import { fetchBasalEnergyBurned } from '@/utils/health';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useFocusEffect } from '@react-navigation/native';
|
||||
import dayjs from 'dayjs';
|
||||
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
|
||||
import { Image } from 'expo-image';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { router } from 'expo-router';
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
FlatList,
|
||||
RefreshControl,
|
||||
StatusBar,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
@@ -39,26 +44,21 @@ import {
|
||||
type ViewMode = 'daily' | 'all';
|
||||
|
||||
export default function NutritionRecordsScreen() {
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
const { t } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop();
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
const dispatch = useAppDispatch();
|
||||
const isGlassAvailable = isLiquidGlassAvailable();
|
||||
|
||||
const { isLoggedIn } = useAuthGuard()
|
||||
const { isLoggedIn } = useAuthGuard();
|
||||
|
||||
// 日期相关状态 - 使用与统计页面相同的日期逻辑
|
||||
const days = getMonthDaysZh();
|
||||
// 日期相关状态
|
||||
const [selectedIndex, setSelectedIndex] = useState(getTodayIndexInMonth());
|
||||
const monthTitle = getMonthTitleZh();
|
||||
// 直接使用 state 管理当前选中日期,而不是从 days 数组派生,以支持 DateSelector 内部月份切换
|
||||
const [currentSelectedDate, setCurrentSelectedDate] = useState<Date>(new Date());
|
||||
|
||||
// 获取当前选中日期 - 使用 useMemo 避免每次渲染都创建新对象
|
||||
const currentSelectedDate = useMemo(() => {
|
||||
return days[selectedIndex]?.date?.toDate() ?? new Date();
|
||||
}, [selectedIndex, days]);
|
||||
|
||||
const currentSelectedDateString = useMemo(() => {
|
||||
return dayjs(currentSelectedDate).format('YYYY-MM-DD');
|
||||
}, [currentSelectedDate]);
|
||||
const currentSelectedDateString = dayjs(currentSelectedDate).format('YYYY-MM-DD');
|
||||
|
||||
// 从 Redux 获取数据
|
||||
const healthData = useAppSelector(selectHealthDataByDate(currentSelectedDateString));
|
||||
@@ -89,7 +89,6 @@ export default function NutritionRecordsScreen() {
|
||||
const displayRecords = viewMode === 'daily' ? nutritionRecords : allRecords;
|
||||
const loading = viewMode === 'daily' ? nutritionLoading.records : allRecordsLoading;
|
||||
|
||||
|
||||
// 页面聚焦时自动刷新数据
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
@@ -123,7 +122,7 @@ export default function NutritionRecordsScreen() {
|
||||
|
||||
loadAllRecords();
|
||||
}
|
||||
}, [viewMode, currentSelectedDateString, dispatch])
|
||||
}, [viewMode, currentSelectedDateString, dispatch, isLoggedIn])
|
||||
);
|
||||
|
||||
// 当选中日期或视图模式变化时重新加载数据
|
||||
@@ -327,71 +326,6 @@ export default function NutritionRecordsScreen() {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 渲染日期选择器(仅在按天查看模式下显示)
|
||||
const renderDateSelector = () => {
|
||||
if (viewMode !== 'daily') return null;
|
||||
|
||||
return (
|
||||
<DateSelector
|
||||
selectedIndex={selectedIndex}
|
||||
onDateSelect={(index, date) => setSelectedIndex(index)}
|
||||
showMonthTitle={true}
|
||||
disableFutureDates={true}
|
||||
showCalendarIcon={true}
|
||||
containerStyle={{
|
||||
paddingHorizontal: 16
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const renderEmptyState = () => (
|
||||
<View style={styles.emptyContainer}>
|
||||
<View style={styles.emptyContent}>
|
||||
<Ionicons name="restaurant-outline" size={48} color={colorTokens.textSecondary} />
|
||||
<Text style={[styles.emptyTitle, { color: colorTokens.text }]}>
|
||||
{viewMode === 'daily' ? '今天还没有记录' : '暂无营养记录'}
|
||||
</Text>
|
||||
<Text style={[styles.emptySubtitle, { color: colorTokens.textSecondary }]}>
|
||||
{viewMode === 'daily' ? '开始记录今日营养摄入' : '开始记录你的营养摄入吧'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderRecord = ({ item, index }: { item: DietRecord; index: number }) => (
|
||||
<NutritionRecordCard
|
||||
record={item}
|
||||
onPress={() => handleRecordPress(item)}
|
||||
onDelete={() => handleDeleteRecord(item.id)}
|
||||
/>
|
||||
);
|
||||
|
||||
const renderFooter = () => {
|
||||
if (!hasMoreData) {
|
||||
return (
|
||||
<View style={styles.footerContainer}>
|
||||
<Text style={[styles.footerText, { color: colorTokens.textSecondary }]}>
|
||||
没有更多数据了
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (viewMode === 'all' && displayRecords.length > 0) {
|
||||
return (
|
||||
<TouchableOpacity style={styles.loadMoreButton} onPress={loadMoreRecords}>
|
||||
<Text style={[styles.loadMoreText, { color: colorTokens.primary }]}>
|
||||
加载更多
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
// 根据当前时间智能判断餐次类型
|
||||
const getCurrentMealType = (): 'breakfast' | 'lunch' | 'dinner' | 'snack' => {
|
||||
const hour = new Date().getHours();
|
||||
@@ -415,68 +349,160 @@ export default function NutritionRecordsScreen() {
|
||||
// 渲染右侧添加按钮
|
||||
const renderRightButton = () => (
|
||||
<TouchableOpacity
|
||||
style={[styles.addButton, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}
|
||||
onPress={handleAddFood}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Ionicons name="add" size={20} color={colorTokens.primary} />
|
||||
{isGlassAvailable ? (
|
||||
<GlassView
|
||||
style={styles.glassAddButton}
|
||||
glassEffectStyle="regular"
|
||||
tintColor="rgba(255, 255, 255, 0.4)"
|
||||
isInteractive={true}
|
||||
>
|
||||
<Ionicons name="add" size={24} color={colorTokens.primary} />
|
||||
</GlassView>
|
||||
) : (
|
||||
<View style={[styles.fallbackAddButton, { backgroundColor: 'rgba(255,255,255,0.8)' }]}>
|
||||
<Ionicons name="add" size={24} color={colorTokens.primary} />
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
|
||||
<HeaderBar
|
||||
title="营养记录"
|
||||
onBack={() => router.back()}
|
||||
right={renderRightButton()}
|
||||
/>
|
||||
|
||||
<View style={{
|
||||
paddingTop: safeAreaTop
|
||||
}}>
|
||||
|
||||
{/* {renderViewModeToggle()} */}
|
||||
{renderDateSelector()}
|
||||
|
||||
{/* Calorie Ring Chart */}
|
||||
<CalorieRingChart
|
||||
metabolism={basalMetabolism}
|
||||
exercise={healthData?.activeEnergyBurned || 0}
|
||||
consumed={nutritionSummary?.totalCalories || 0}
|
||||
protein={nutritionSummary?.totalProtein || 0}
|
||||
fat={nutritionSummary?.totalFat || 0}
|
||||
carbs={nutritionSummary?.totalCarbohydrate || 0}
|
||||
proteinGoal={nutritionGoals.proteinGoal}
|
||||
fatGoal={nutritionGoals.fatGoal}
|
||||
carbsGoal={nutritionGoals.carbsGoal}
|
||||
const renderEmptyState = () => (
|
||||
<View style={styles.emptySimpleContainer}>
|
||||
<Image
|
||||
source={require('@/assets/images/icons/icon-yingyang.png')}
|
||||
style={styles.emptySimpleImage}
|
||||
contentFit="contain"
|
||||
/>
|
||||
<Text style={styles.emptySimpleText}>
|
||||
{t('nutritionRecords.empty.title')}
|
||||
</Text>
|
||||
<TouchableOpacity onPress={handleAddFood}>
|
||||
<Text style={[styles.emptyActionText, { color: colorTokens.primary }]}>
|
||||
{t('nutritionRecords.empty.action')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
|
||||
{(
|
||||
<FlatList
|
||||
data={displayRecords}
|
||||
renderItem={({ item, index }) => renderRecord({ item, index })}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
contentContainerStyle={[
|
||||
styles.listContainer,
|
||||
{ paddingBottom: 40, paddingTop: 16 }
|
||||
]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={colorTokens.primary}
|
||||
colors={[colorTokens.primary]}
|
||||
/>
|
||||
}
|
||||
ListEmptyComponent={renderEmptyState}
|
||||
ListFooterComponent={renderFooter}
|
||||
onEndReached={viewMode === 'all' ? loadMoreRecords : undefined}
|
||||
onEndReachedThreshold={0.1}
|
||||
const renderRecord = ({ item }: { item: DietRecord }) => (
|
||||
<NutritionRecordCard
|
||||
record={item}
|
||||
onPress={() => handleRecordPress(item)}
|
||||
onDelete={() => handleDeleteRecord(item.id)}
|
||||
/>
|
||||
);
|
||||
|
||||
const renderFooter = () => {
|
||||
if (!hasMoreData) {
|
||||
if (displayRecords.length === 0) return null;
|
||||
return (
|
||||
<View style={styles.footerContainer}>
|
||||
<Text style={[styles.footerText, { color: colorTokens.textSecondary }]}>
|
||||
{t('nutritionRecords.footer.end')}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (viewMode === 'all' && displayRecords.length > 0) {
|
||||
return (
|
||||
<TouchableOpacity style={styles.loadMoreButton} onPress={loadMoreRecords}>
|
||||
<Text style={[styles.loadMoreText, { color: colorTokens.primary }]}>
|
||||
{t('nutritionRecords.footer.loadMore')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const ListHeader = () => (
|
||||
<View>
|
||||
<View style={styles.headerContent}>
|
||||
{viewMode === 'daily' && (
|
||||
<DateSelector
|
||||
selectedIndex={selectedIndex}
|
||||
onDateSelect={(index, date) => {
|
||||
setSelectedIndex(index);
|
||||
setCurrentSelectedDate(date);
|
||||
}}
|
||||
showMonthTitle={true}
|
||||
disableFutureDates={true}
|
||||
showCalendarIcon={true}
|
||||
containerStyle={styles.dateSelectorContainer}
|
||||
/>
|
||||
)}
|
||||
|
||||
<View style={styles.chartWrapper}>
|
||||
<CalorieRingChart
|
||||
metabolism={basalMetabolism}
|
||||
exercise={healthData?.activeEnergyBurned || 0}
|
||||
consumed={nutritionSummary?.totalCalories || 0}
|
||||
protein={nutritionSummary?.totalProtein || 0}
|
||||
fat={nutritionSummary?.totalFat || 0}
|
||||
carbs={nutritionSummary?.totalCarbohydrate || 0}
|
||||
proteinGoal={nutritionGoals.proteinGoal}
|
||||
fatGoal={nutritionGoals.fatGoal}
|
||||
carbsGoal={nutritionGoals.carbsGoal}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.listTitleContainer}>
|
||||
<Text style={styles.listTitle}>{t('nutritionRecords.listTitle')}</Text>
|
||||
{displayRecords.length > 0 && (
|
||||
<Text style={styles.listSubtitle}>{t('nutritionRecords.recordCount', { count: displayRecords.length })}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: '#f3f4fb' }]}>
|
||||
<StatusBar barStyle="dark-content" />
|
||||
|
||||
{/* 顶部柔和渐变背景 */}
|
||||
<LinearGradient
|
||||
colors={['rgba(255, 243, 224, 0.8)', 'rgba(243, 244, 251, 0)']}
|
||||
style={styles.topGradient}
|
||||
start={{ x: 0.5, y: 0 }}
|
||||
end={{ x: 0.5, y: 1 }}
|
||||
/>
|
||||
|
||||
<HeaderBar
|
||||
title={t('nutritionRecords.title')}
|
||||
onBack={() => router.back()}
|
||||
right={renderRightButton()}
|
||||
transparent={true}
|
||||
/>
|
||||
|
||||
<FlatList
|
||||
data={displayRecords}
|
||||
renderItem={renderRecord}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
contentContainerStyle={[
|
||||
styles.listContainer,
|
||||
{ paddingTop: safeAreaTop }
|
||||
]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={colorTokens.primary}
|
||||
colors={[colorTokens.primary]}
|
||||
/>
|
||||
}
|
||||
ListHeaderComponent={ListHeader}
|
||||
ListEmptyComponent={renderEmptyState}
|
||||
ListFooterComponent={renderFooter}
|
||||
onEndReached={viewMode === 'all' ? loadMoreRecords : undefined}
|
||||
onEndReachedThreshold={0.1}
|
||||
/>
|
||||
|
||||
{/* 食物添加悬浮窗 */}
|
||||
<FloatingFoodOverlay
|
||||
@@ -492,130 +518,105 @@ const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
viewModeContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
marginBottom: 8,
|
||||
},
|
||||
monthTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: '800',
|
||||
},
|
||||
toggleContainer: {
|
||||
flexDirection: 'row',
|
||||
borderRadius: 20,
|
||||
padding: 2,
|
||||
},
|
||||
toggleButton: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 18,
|
||||
minWidth: 80,
|
||||
alignItems: 'center',
|
||||
},
|
||||
toggleText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
},
|
||||
daysContainer: {
|
||||
marginBottom: 12,
|
||||
},
|
||||
daysScrollContainer: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
dayPill: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 34,
|
||||
marginRight: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
dayNumber: {
|
||||
fontSize: 18,
|
||||
textAlign: 'center',
|
||||
},
|
||||
dayLabel: {
|
||||
fontSize: 12,
|
||||
marginTop: 2,
|
||||
textAlign: 'center',
|
||||
},
|
||||
addButton: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: 12,
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
topGradient: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
height: 320,
|
||||
},
|
||||
listContainer: {
|
||||
paddingBottom: 100, // 留出底部空间防止遮挡
|
||||
},
|
||||
headerContent: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
dateSelectorContainer: {
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 8,
|
||||
marginBottom: 16,
|
||||
},
|
||||
emptyContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 60,
|
||||
paddingHorizontal: 16,
|
||||
chartWrapper: {
|
||||
marginBottom: 24,
|
||||
shadowColor: 'rgba(30, 41, 59, 0.05)',
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 12,
|
||||
elevation: 4,
|
||||
},
|
||||
emptyContent: {
|
||||
alignItems: 'center',
|
||||
maxWidth: 320,
|
||||
listTitleContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'baseline',
|
||||
paddingHorizontal: 24,
|
||||
marginBottom: 12,
|
||||
gap: 8,
|
||||
},
|
||||
emptyTitle: {
|
||||
listTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
marginTop: 16,
|
||||
marginBottom: 8,
|
||||
textAlign: 'center',
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
emptySubtitle: {
|
||||
listSubtitle: {
|
||||
fontSize: 13,
|
||||
color: '#6f7ba7',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
glassAddButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 20,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
fallbackAddButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 20,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(0,0,0,0.05)',
|
||||
},
|
||||
emptySimpleContainer: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 60,
|
||||
},
|
||||
emptySimpleImage: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
opacity: 0.4,
|
||||
marginBottom: 12,
|
||||
},
|
||||
emptySimpleText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
textAlign: 'center',
|
||||
lineHeight: 20,
|
||||
color: '#94A3B8',
|
||||
fontFamily: 'AliRegular',
|
||||
marginBottom: 8,
|
||||
},
|
||||
emptyActionText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
footerContainer: {
|
||||
paddingVertical: 20,
|
||||
paddingVertical: 24,
|
||||
alignItems: 'center',
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
opacity: 0.6,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
loadMoreButton: {
|
||||
paddingVertical: 16,
|
||||
alignItems: 'center',
|
||||
},
|
||||
loadMoreText: {
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import { useVipService } from '@/hooks/useVipService';
|
||||
import {
|
||||
resetToDefault,
|
||||
selectTabBarConfigs,
|
||||
@@ -7,11 +8,9 @@ import {
|
||||
type TabConfig,
|
||||
} from '@/store/tabBarConfigSlice';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { isLiquidGlassAvailable } from 'expo-glass-effect';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useRouter } from 'expo-router';
|
||||
import React, { useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
ScrollView,
|
||||
@@ -22,26 +21,50 @@ import {
|
||||
View
|
||||
} from 'react-native';
|
||||
|
||||
import { MembershipModal } from '@/components/model/MembershipModal';
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { IconSymbol } from '@/components/ui/IconSymbol';
|
||||
import { palette } from '@/constants/Colors';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
|
||||
export default function TabBarConfigScreen() {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const dispatch = useAppDispatch();
|
||||
const safeAreaTop = useSafeAreaTop(60);
|
||||
const configs = useAppSelector(selectTabBarConfigs);
|
||||
const isGlassAvailable = isLiquidGlassAvailable();
|
||||
const { isVip } = useVipService();
|
||||
const [showMembershipModal, setShowMembershipModal] = useState(false);
|
||||
|
||||
// 处理开关切换
|
||||
const handleToggle = useCallback(
|
||||
(tabId: string) => {
|
||||
dispatch(toggleTabEnabled(tabId));
|
||||
// 直接检查用户是否是 VIP(底部栏配置不是权益类功能,而是基础功能)
|
||||
if (isVip) {
|
||||
// VIP 用户可以正常切换
|
||||
dispatch(toggleTabEnabled(tabId));
|
||||
} else {
|
||||
// 非 VIP 用户显示购买弹窗
|
||||
setShowMembershipModal(true);
|
||||
}
|
||||
},
|
||||
[dispatch]
|
||||
[dispatch, isVip]
|
||||
);
|
||||
|
||||
// 页面加载时检查 VIP 状态
|
||||
useEffect(() => {
|
||||
if (!isVip) {
|
||||
// 非 VIP 用户进入页面时立即显示购买弹窗
|
||||
setShowMembershipModal(true);
|
||||
}
|
||||
}, [isVip]);
|
||||
|
||||
// 购买成功回调
|
||||
const handlePurchaseSuccess = useCallback(() => {
|
||||
// 购买成功后可以执行一些操作,比如刷新用户信息
|
||||
console.log('会员购买成功');
|
||||
}, []);
|
||||
|
||||
// 恢复默认设置
|
||||
const handleReset = useCallback(() => {
|
||||
Alert.alert(
|
||||
@@ -82,6 +105,11 @@ export default function TabBarConfigScreen() {
|
||||
{t('personal.tabBarConfig.cannotDisable')}
|
||||
</Text>
|
||||
)}
|
||||
{item.canBeDisabled && !isVip && (
|
||||
<Text style={styles.vipSubtitle}>
|
||||
{t('personal.tabBarConfig.vipOnly')}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -89,7 +117,7 @@ export default function TabBarConfigScreen() {
|
||||
<Switch
|
||||
value={item.enabled}
|
||||
onValueChange={() => handleToggle(item.id)}
|
||||
disabled={!item.canBeDisabled}
|
||||
disabled={!item.canBeDisabled || !isVip}
|
||||
trackColor={{ false: '#E5E5E5', true: '#9370DB' }}
|
||||
thumbColor="#FFFFFF"
|
||||
style={styles.switch}
|
||||
@@ -155,6 +183,13 @@ export default function TabBarConfigScreen() {
|
||||
</View>
|
||||
|
||||
</ScrollView>
|
||||
|
||||
{/* 会员购买弹窗 */}
|
||||
<MembershipModal
|
||||
visible={showMembershipModal}
|
||||
onClose={() => setShowMembershipModal(false)}
|
||||
onPurchaseSuccess={handlePurchaseSuccess}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -255,6 +290,10 @@ const styles = StyleSheet.create({
|
||||
fontSize: 12,
|
||||
color: '#9370DB',
|
||||
},
|
||||
vipSubtitle: {
|
||||
fontSize: 12,
|
||||
color: '#FF6B6B',
|
||||
},
|
||||
switch: {
|
||||
transform: [{ scaleX: 0.9 }, { scaleY: 0.9 }],
|
||||
},
|
||||
|
||||
1155
app/sleep-detail.tsx
1155
app/sleep-detail.tsx
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,6 @@
|
||||
import { DateSelector } from '@/components/DateSelector';
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import { getMonthDaysZh, getTodayIndexInMonth } from '@/utils/date';
|
||||
import { fetchHourlyStepSamples, fetchStepCount, HourlyStepData } from '@/utils/health';
|
||||
@@ -17,6 +18,7 @@ import {
|
||||
} from 'react-native';
|
||||
|
||||
export default function StepsDetailScreen() {
|
||||
const { t } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
|
||||
// 获取路由参数
|
||||
@@ -169,11 +171,11 @@ export default function StepsDetailScreen() {
|
||||
|
||||
// 活动等级配置
|
||||
const activityLevels = useMemo(() => [
|
||||
{ key: 'inactive', label: '不怎么动', minSteps: 0, maxSteps: 3000, color: '#B8C8D6' },
|
||||
{ key: 'light', label: '轻度活跃', minSteps: 3000, maxSteps: 7500, color: '#93C5FD' },
|
||||
{ key: 'moderate', label: '中等活跃', minSteps: 7500, maxSteps: 10000, color: '#FCD34D' },
|
||||
{ key: 'very_active', label: '非常活跃', minSteps: 10000, maxSteps: Infinity, color: '#FB923C' }
|
||||
], []);
|
||||
{ key: 'inactive', label: t('stepsDetail.activityLevel.levels.inactive'), minSteps: 0, maxSteps: 3000, color: '#B8C8D6' },
|
||||
{ key: 'light', label: t('stepsDetail.activityLevel.levels.light'), minSteps: 3000, maxSteps: 7500, color: '#93C5FD' },
|
||||
{ key: 'moderate', label: t('stepsDetail.activityLevel.levels.moderate'), minSteps: 7500, maxSteps: 10000, color: '#FCD34D' },
|
||||
{ key: 'very_active', label: t('stepsDetail.activityLevel.levels.very_active'), minSteps: 10000, maxSteps: Infinity, color: '#FB923C' }
|
||||
], [t]);
|
||||
|
||||
// 计算当前活动等级
|
||||
const currentActivityLevel = useMemo(() => {
|
||||
@@ -211,7 +213,7 @@ export default function StepsDetailScreen() {
|
||||
/>
|
||||
|
||||
<HeaderBar
|
||||
title="步数详情"
|
||||
title={t('stepsDetail.title')}
|
||||
/>
|
||||
|
||||
<ScrollView
|
||||
@@ -233,23 +235,23 @@ export default function StepsDetailScreen() {
|
||||
<View style={styles.statsCard}>
|
||||
{isLoading ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<Text style={styles.loadingText}>加载中...</Text>
|
||||
<Text style={styles.loadingText}>{t('stepsDetail.loading')}</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.statsRow}>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{totalSteps.toLocaleString()}</Text>
|
||||
<Text style={styles.statLabel}>总步数</Text>
|
||||
<Text style={styles.statLabel}>{t('stepsDetail.stats.totalSteps')}</Text>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{averageHourlySteps}</Text>
|
||||
<Text style={styles.statLabel}>平均每小时</Text>
|
||||
<Text style={styles.statLabel}>{t('stepsDetail.stats.averagePerHour')}</Text>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>
|
||||
{mostActiveHour ? `${mostActiveHour.hour}:00` : '--'}
|
||||
</Text>
|
||||
<Text style={styles.statLabel}>最活跃时段</Text>
|
||||
<Text style={styles.statLabel}>{t('stepsDetail.stats.mostActiveTime')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
@@ -258,7 +260,7 @@ export default function StepsDetailScreen() {
|
||||
{/* 详细柱状图卡片 */}
|
||||
<View style={styles.chartCard}>
|
||||
<View style={styles.chartHeader}>
|
||||
<Text style={styles.chartTitle}>每小时步数分布</Text>
|
||||
<Text style={styles.chartTitle}>{t('stepsDetail.chart.title')}</Text>
|
||||
<Text style={styles.chartSubtitle}>
|
||||
{dayjs(currentSelectedDate).format('YYYY年MM月DD日')}
|
||||
</Text>
|
||||
@@ -290,7 +292,7 @@ export default function StepsDetailScreen() {
|
||||
))}
|
||||
</View>
|
||||
<Text style={styles.averageLineLabel}>
|
||||
平均 {averageHourlySteps}步
|
||||
{t('stepsDetail.chart.averageLabel', { steps: averageHourlySteps })}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
@@ -354,9 +356,9 @@ export default function StepsDetailScreen() {
|
||||
|
||||
{/* 底部时间轴标签 */}
|
||||
<View style={styles.timeLabels}>
|
||||
<Text style={styles.timeLabel}>0:00</Text>
|
||||
<Text style={styles.timeLabel}>12:00</Text>
|
||||
<Text style={styles.timeLabel}>24:00</Text>
|
||||
<Text style={styles.timeLabel}>{t('stepsDetail.timeLabels.midnight')}</Text>
|
||||
<Text style={styles.timeLabel}>{t('stepsDetail.timeLabels.noon')}</Text>
|
||||
<Text style={styles.timeLabel}>{t('stepsDetail.timeLabels.nextDay')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@@ -366,7 +368,7 @@ export default function StepsDetailScreen() {
|
||||
|
||||
|
||||
{/* 活动级别文本 */}
|
||||
<Text style={styles.activityMainText}>你今天的活动量处于</Text>
|
||||
<Text style={styles.activityMainText}>{t('stepsDetail.activityLevel.currentActivity')}</Text>
|
||||
<Text style={styles.activityLevelText}>{currentActivityLevel.label}</Text>
|
||||
|
||||
{/* 进度条 */}
|
||||
@@ -388,14 +390,14 @@ export default function StepsDetailScreen() {
|
||||
<View style={styles.stepsInfoContainer}>
|
||||
<View style={styles.currentStepsInfo}>
|
||||
<Text style={styles.stepsValue}>{totalSteps.toLocaleString()} 步</Text>
|
||||
<Text style={styles.stepsLabel}>当前</Text>
|
||||
<Text style={styles.stepsLabel}>{t('stepsDetail.activityLevel.progress.current')}</Text>
|
||||
</View>
|
||||
<View style={styles.nextStepsInfo}>
|
||||
<Text style={styles.stepsValue}>
|
||||
{nextActivityLevel ? `${nextActivityLevel.minSteps.toLocaleString()} 步` : '--'}
|
||||
</Text>
|
||||
<Text style={styles.stepsLabel}>
|
||||
{nextActivityLevel ? `下一级: ${nextActivityLevel.label}` : '已达最高级'}
|
||||
{nextActivityLevel ? t('stepsDetail.activityLevel.progress.nextLevel', { level: nextActivityLevel.label }) : t('stepsDetail.activityLevel.progress.highestLevel')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Colors } from '@/constants/Colors';
|
||||
import { useAppDispatch } from '@/hooks/redux';
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import { analyzeFoodFromText } from '@/services/foodRecognition';
|
||||
import { saveRecognitionResult, setError, setLoading } from '@/store/foodRecognitionSlice';
|
||||
@@ -24,6 +25,7 @@ import {
|
||||
type VoiceRecordState = 'idle' | 'listening' | 'processing' | 'result' | 'analyzing';
|
||||
|
||||
export default function VoiceRecordScreen() {
|
||||
const { t } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
const theme = useColorScheme() ?? 'light';
|
||||
const colorTokens = Colors[theme];
|
||||
@@ -118,7 +120,7 @@ export default function VoiceRecordScreen() {
|
||||
|
||||
// 语音识别回调 - 使用 useCallback 避免每次渲染重新创建
|
||||
const onSpeechStart = useCallback(() => {
|
||||
console.log('语音开始');
|
||||
console.log('Voice started');
|
||||
if (!isMountedRef.current) return;
|
||||
|
||||
setIsListening(true);
|
||||
@@ -128,11 +130,11 @@ export default function VoiceRecordScreen() {
|
||||
}, []);
|
||||
|
||||
const onSpeechRecognized = useCallback(() => {
|
||||
console.log('语音识别中...');
|
||||
console.log('Voice recognition in progress...');
|
||||
}, []);
|
||||
|
||||
const onSpeechEnd = useCallback(() => {
|
||||
console.log('语音结束');
|
||||
console.log('Voice ended');
|
||||
if (!isMountedRef.current) return;
|
||||
|
||||
setIsListening(false);
|
||||
@@ -141,7 +143,7 @@ export default function VoiceRecordScreen() {
|
||||
}, []);
|
||||
|
||||
const onSpeechError = useCallback((error: any) => {
|
||||
console.log('语音识别错误:', error);
|
||||
console.log('Voice recognition error:', error);
|
||||
if (!isMountedRef.current) return;
|
||||
|
||||
setIsListening(false);
|
||||
@@ -150,16 +152,16 @@ export default function VoiceRecordScreen() {
|
||||
|
||||
// 显示更友好的错误信息
|
||||
if (error.error?.code === '7') {
|
||||
Alert.alert('提示', '没有检测到语音输入,请重试');
|
||||
Alert.alert(t('voiceRecord.alerts.noVoiceInput'), t('voiceRecord.alerts.noVoiceInput'));
|
||||
} else if (error.error?.code === '2') {
|
||||
Alert.alert('提示', '网络连接异常,请检查网络后重试');
|
||||
Alert.alert(t('voiceRecord.alerts.networkError'), t('voiceRecord.alerts.networkError'));
|
||||
} else {
|
||||
Alert.alert('提示', '语音识别出现问题,请重试');
|
||||
Alert.alert(t('voiceRecord.alerts.voiceError'), t('voiceRecord.alerts.voiceError'));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const onSpeechResults = useCallback((event: any) => {
|
||||
console.log('语音识别结果:', event);
|
||||
console.log('Voice recognition result:', event);
|
||||
if (!isMountedRef.current) return;
|
||||
|
||||
const text = event.value?.[0] || '';
|
||||
@@ -168,7 +170,7 @@ export default function VoiceRecordScreen() {
|
||||
setRecordState('result');
|
||||
} else {
|
||||
setRecordState('idle');
|
||||
Alert.alert('提示', '未识别到有效内容,请重新录音');
|
||||
Alert.alert(t('voiceRecord.alerts.noValidContent'), t('voiceRecord.alerts.noValidContent'));
|
||||
}
|
||||
stopAnimations();
|
||||
}, []);
|
||||
@@ -215,7 +217,7 @@ export default function VoiceRecordScreen() {
|
||||
await Voice.destroy();
|
||||
Voice.removeAllListeners();
|
||||
} catch (error) {
|
||||
console.log('清理语音识别资源失败:', error);
|
||||
console.log('Failed to clean up voice recognition resources:', error);
|
||||
}
|
||||
};
|
||||
cleanup();
|
||||
@@ -246,22 +248,22 @@ export default function VoiceRecordScreen() {
|
||||
await Voice.start('zh-CN');
|
||||
|
||||
} catch (error) {
|
||||
console.log('启动语音识别失败:', error);
|
||||
console.log('Failed to start voice recognition:', error);
|
||||
setRecordState('idle');
|
||||
setIsListening(false);
|
||||
Alert.alert('录音失败', '无法启动语音识别,请检查麦克风权限设置');
|
||||
Alert.alert(t('voiceRecord.alerts.recordingFailed'), t('voiceRecord.alerts.recordingPermissionError'));
|
||||
}
|
||||
};
|
||||
|
||||
// 停止录音
|
||||
const stopRecording = async () => {
|
||||
try {
|
||||
console.log('停止录音');
|
||||
console.log('Stop recording');
|
||||
setIsListening(false);
|
||||
await Voice.stop();
|
||||
triggerHapticFeedback('impactLight');
|
||||
} catch (error) {
|
||||
console.log('停止语音识别失败:', error);
|
||||
console.log('Failed to stop voice recognition:', error);
|
||||
setIsListening(false);
|
||||
setRecordState('idle');
|
||||
}
|
||||
@@ -287,7 +289,7 @@ export default function VoiceRecordScreen() {
|
||||
startRecording();
|
||||
}, 200);
|
||||
} catch (error) {
|
||||
console.log('重新录音失败:', error);
|
||||
console.log('Failed to retry recording:', error);
|
||||
setRecordState('idle');
|
||||
setIsListening(false);
|
||||
}
|
||||
@@ -296,7 +298,7 @@ export default function VoiceRecordScreen() {
|
||||
// 确认并分析食物文本
|
||||
const confirmResult = async () => {
|
||||
if (!recognizedText.trim()) {
|
||||
Alert.alert('提示', '请先进行语音识别');
|
||||
Alert.alert(t('voiceRecord.alerts.pleaseRecordFirst'), t('voiceRecord.alerts.pleaseRecordFirst'));
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -382,7 +384,7 @@ export default function VoiceRecordScreen() {
|
||||
|
||||
const errorMessage = error instanceof Error ? error.message : '分析失败,请重试';
|
||||
dispatch(setError(errorMessage));
|
||||
Alert.alert('分析失败', errorMessage);
|
||||
Alert.alert(t('voiceRecord.alerts.analysisFailed'), errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -401,7 +403,7 @@ export default function VoiceRecordScreen() {
|
||||
|
||||
router.back();
|
||||
} catch (error) {
|
||||
console.log('返回时清理资源失败:', error);
|
||||
console.log('Failed to clean up resources when returning:', error);
|
||||
router.back();
|
||||
}
|
||||
};
|
||||
@@ -410,15 +412,15 @@ export default function VoiceRecordScreen() {
|
||||
const getStatusText = () => {
|
||||
switch (recordState) {
|
||||
case 'idle':
|
||||
return '轻触麦克风开始录音';
|
||||
return t('voiceRecord.status.idle');
|
||||
case 'listening':
|
||||
return '正在聆听中,请开始说话...';
|
||||
return t('voiceRecord.status.listening');
|
||||
case 'processing':
|
||||
return 'AI正在处理语音内容...';
|
||||
return t('voiceRecord.status.processing');
|
||||
case 'analyzing':
|
||||
return 'AI大模型深度分析营养成分中...';
|
||||
return t('voiceRecord.status.analyzing');
|
||||
case 'result':
|
||||
return '语音识别完成,请确认结果';
|
||||
return t('voiceRecord.status.result');
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
@@ -470,7 +472,7 @@ export default function VoiceRecordScreen() {
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: colorTokens.background }]}>
|
||||
<HeaderBar
|
||||
title="一句话记录"
|
||||
title={t('voiceRecord.title')}
|
||||
onBack={handleBack}
|
||||
tone={theme}
|
||||
variant="elevated"
|
||||
@@ -485,7 +487,7 @@ export default function VoiceRecordScreen() {
|
||||
<View style={styles.topSection}>
|
||||
<View style={styles.introContainer}>
|
||||
<Text style={[styles.introDescription, { color: colorTokens.textSecondary }]}>
|
||||
通过语音描述您的饮食内容,AI将智能分析营养成分和卡路里
|
||||
{t('voiceRecord.intro.description')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -605,7 +607,7 @@ export default function VoiceRecordScreen() {
|
||||
|
||||
{recordState === 'listening' && (
|
||||
<Text style={[styles.hintText, { color: colorTokens.textSecondary }]}>
|
||||
说出您想记录的食物内容
|
||||
{t('voiceRecord.hints.listening')}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
@@ -614,18 +616,18 @@ export default function VoiceRecordScreen() {
|
||||
<BlurView intensity={20} tint={theme} style={styles.examplesContainer}>
|
||||
<View style={styles.examplesContent}>
|
||||
<Text style={[styles.examplesTitle, { color: colorTokens.text }]}>
|
||||
记录示例:
|
||||
{t('voiceRecord.examples.title')}
|
||||
</Text>
|
||||
<View style={styles.examplesList}>
|
||||
<Text style={[styles.exampleText, { color: colorTokens.textSecondary }]}>
|
||||
“今早吃了两个煎蛋、一片全麦面包和一杯牛奶”
|
||||
</Text>
|
||||
<Text style={[styles.exampleText, { color: colorTokens.textSecondary }]}>
|
||||
“午饭吃了红烧肉约150克、米饭一小碗、青菜一份”
|
||||
</Text>
|
||||
<Text style={[styles.exampleText, { color: colorTokens.textSecondary }]}>
|
||||
“晚饭吃了蒸蛋羹、紫菜蛋花汤、小米粥一碗”
|
||||
</Text>
|
||||
{[
|
||||
t('voiceRecord.examples.items.0'),
|
||||
t('voiceRecord.examples.items.1'),
|
||||
t('voiceRecord.examples.items.2')
|
||||
].map((example: string, index: number) => (
|
||||
<Text key={index} style={[styles.exampleText, { color: colorTokens.textSecondary }]}>
|
||||
“{example}”
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</BlurView>
|
||||
@@ -634,7 +636,7 @@ export default function VoiceRecordScreen() {
|
||||
{recordState === 'analyzing' && (
|
||||
<View style={styles.analysisProgressContainer}>
|
||||
<Text style={[styles.progressText, { color: colorTokens.text }]}>
|
||||
分析进度: {Math.round(analysisProgress)}%
|
||||
{t('voiceRecord.analysis.progress', { progress: Math.round(analysisProgress) })}
|
||||
</Text>
|
||||
<View style={styles.progressBarContainer}>
|
||||
<Animated.View
|
||||
@@ -650,7 +652,7 @@ export default function VoiceRecordScreen() {
|
||||
/>
|
||||
</View>
|
||||
<Text style={[styles.analysisHint, { color: colorTokens.textSecondary }]}>
|
||||
AI正在深度分析您的食物描述...
|
||||
{t('voiceRecord.analysis.hint')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
@@ -662,7 +664,7 @@ export default function VoiceRecordScreen() {
|
||||
<BlurView intensity={20} tint={theme} style={styles.resultContainer}>
|
||||
<View style={styles.resultContent}>
|
||||
<Text style={[styles.resultLabel, { color: colorTokens.textSecondary }]}>
|
||||
识别结果:
|
||||
{t('voiceRecord.result.label')}
|
||||
</Text>
|
||||
<Text style={[styles.resultText, { color: colorTokens.text }]}>
|
||||
{recognizedText}
|
||||
@@ -675,7 +677,7 @@ export default function VoiceRecordScreen() {
|
||||
onPress={retryRecording}
|
||||
>
|
||||
<Ionicons name="refresh" size={16} color="#7B68EE" />
|
||||
<Text style={styles.retryButtonText}>重新录音</Text>
|
||||
<Text style={styles.retryButtonText}>{t('voiceRecord.actions.retry')}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
@@ -683,7 +685,7 @@ export default function VoiceRecordScreen() {
|
||||
onPress={confirmResult}
|
||||
>
|
||||
<Ionicons name="checkmark" size={16} color="white" />
|
||||
<Text style={styles.confirmButtonText}>确认使用</Text>
|
||||
<Text style={styles.confirmButtonText}>{t('voiceRecord.actions.confirm')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useWaterDataByDate } from '@/hooks/useWaterData';
|
||||
import { getQuickWaterAmount } from '@/utils/userPreferences';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
|
||||
import { Image } from 'expo-image';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { router, useLocalSearchParams } from 'expo-router';
|
||||
@@ -20,6 +21,7 @@ import {
|
||||
import { Swipeable } from 'react-native-gesture-handler';
|
||||
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
@@ -28,6 +30,7 @@ interface WaterDetailProps {
|
||||
}
|
||||
|
||||
const WaterDetail: React.FC<WaterDetailProps> = () => {
|
||||
const { t } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
|
||||
const { selectedDate } = useLocalSearchParams<{ selectedDate?: string }>();
|
||||
@@ -37,22 +40,14 @@ const WaterDetail: React.FC<WaterDetailProps> = () => {
|
||||
const [dailyGoal, setDailyGoal] = useState<string>('2000');
|
||||
const [quickAddAmount, setQuickAddAmount] = useState<string>('250');
|
||||
|
||||
// Remove modal states as they are now in separate settings page
|
||||
|
||||
// 使用新的 hook 来处理指定日期的饮水数据
|
||||
const { waterRecords, dailyWaterGoal, updateWaterGoal, removeWaterRecord } = useWaterDataByDate(selectedDate);
|
||||
|
||||
|
||||
|
||||
|
||||
// 处理设置按钮点击 - 跳转到设置页面
|
||||
const handleSettingsPress = () => {
|
||||
router.push('/water/settings');
|
||||
};
|
||||
|
||||
// Remove all modal-related functions as they are now in separate settings page
|
||||
|
||||
|
||||
// 删除饮水记录
|
||||
const handleDeleteRecord = async (recordId: string) => {
|
||||
await removeWaterRecord(recordId);
|
||||
@@ -70,13 +65,17 @@ const WaterDetail: React.FC<WaterDetailProps> = () => {
|
||||
setDailyGoal(dailyWaterGoal.toString());
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载用户偏好设置失败:', error);
|
||||
console.error(t('waterDetail.loadingUserPreferences'), error);
|
||||
}
|
||||
};
|
||||
|
||||
loadUserPreferences();
|
||||
}, [dailyWaterGoal]);
|
||||
|
||||
const totalAmount = waterRecords?.reduce((sum, record) => sum + record.amount, 0) || 0;
|
||||
const currentGoal = dailyWaterGoal || 2000;
|
||||
const progress = Math.min(100, (totalAmount / currentGoal) * 100);
|
||||
|
||||
// 新增:饮水记录卡片组件
|
||||
const WaterRecordCard = ({ record, onDelete }: { record: any; onDelete: () => void }) => {
|
||||
const swipeableRef = React.useRef<Swipeable>(null);
|
||||
@@ -84,15 +83,15 @@ const WaterDetail: React.FC<WaterDetailProps> = () => {
|
||||
// 处理删除操作
|
||||
const handleDelete = () => {
|
||||
Alert.alert(
|
||||
'确认删除',
|
||||
'确定要删除这条饮水记录吗?此操作无法撤销。',
|
||||
t('waterDetail.deleteConfirm.title'),
|
||||
t('waterDetail.deleteConfirm.message'),
|
||||
[
|
||||
{
|
||||
text: '取消',
|
||||
text: t('waterDetail.deleteConfirm.cancel'),
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
text: t('waterDetail.deleteConfirm.confirm'),
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
onDelete();
|
||||
@@ -112,7 +111,6 @@ const WaterDetail: React.FC<WaterDetailProps> = () => {
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Ionicons name="trash" size={20} color="#FFFFFF" />
|
||||
<Text style={styles.deleteSwipeButtonText}>删除</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
@@ -125,29 +123,29 @@ const WaterDetail: React.FC<WaterDetailProps> = () => {
|
||||
rightThreshold={40}
|
||||
overshootRight={false}
|
||||
>
|
||||
<View style={[styles.recordCard, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
|
||||
<View style={styles.recordCard}>
|
||||
<View style={styles.recordMainContent}>
|
||||
<View style={[styles.recordIconContainer, { backgroundColor: colorTokens.background }]}>
|
||||
<View style={styles.recordIconContainer}>
|
||||
<Image
|
||||
source={require('@/assets/images/icons/IconGlass.png')}
|
||||
style={styles.recordIcon}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.recordInfo}>
|
||||
<Text style={[styles.recordLabel, { color: colorTokens.text }]}>水</Text>
|
||||
<Text style={styles.recordLabel}>{t('waterDetail.water')}</Text>
|
||||
<View style={styles.recordTimeContainer}>
|
||||
<Ionicons name="time-outline" size={14} color={colorTokens.textSecondary} />
|
||||
<Text style={[styles.recordTimeText, { color: colorTokens.textSecondary }]}>
|
||||
<Ionicons name="time-outline" size={14} color="#6f7ba7" />
|
||||
<Text style={styles.recordTimeText}>
|
||||
{dayjs(record.recordedAt || record.createdAt).format('HH:mm')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.recordAmountContainer}>
|
||||
<Text style={[styles.recordAmount, { color: colorTokens.text }]}>{record.amount}ml</Text>
|
||||
<Text style={styles.recordAmount}>{record.amount}ml</Text>
|
||||
</View>
|
||||
</View>
|
||||
{record.note && (
|
||||
<Text style={[styles.recordNote, { color: colorTokens.textSecondary }]}>{record.note}</Text>
|
||||
<Text style={styles.recordNote}>{record.note}</Text>
|
||||
)}
|
||||
</View>
|
||||
</Swipeable>
|
||||
@@ -157,32 +155,47 @@ const WaterDetail: React.FC<WaterDetailProps> = () => {
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* 背景渐变 */}
|
||||
{/* 背景 */}
|
||||
<LinearGradient
|
||||
colors={['#f5e5fbff', '#e5fcfeff', '#eefdffff', '#e6f6fcff']}
|
||||
style={styles.gradientBackground}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
colors={['#f3f4fb', '#f3f4fb']}
|
||||
style={StyleSheet.absoluteFillObject}
|
||||
/>
|
||||
{/* 顶部装饰性渐变 - 模仿挑战页面的柔和背景感 */}
|
||||
<LinearGradient
|
||||
colors={['rgba(229, 252, 254, 0.8)', 'rgba(243, 244, 251, 0)']}
|
||||
style={styles.topGradient}
|
||||
start={{ x: 0.5, y: 0 }}
|
||||
end={{ x: 0.5, y: 1 }}
|
||||
/>
|
||||
|
||||
{/* 装饰性圆圈 */}
|
||||
<View style={styles.decorativeCircle1} />
|
||||
<View style={styles.decorativeCircle2} />
|
||||
|
||||
<HeaderBar
|
||||
title="饮水详情"
|
||||
onBack={() => {
|
||||
// 这里会通过路由自动处理返回
|
||||
router.back();
|
||||
}}
|
||||
title={t('waterDetail.title')}
|
||||
onBack={() => router.back()}
|
||||
right={
|
||||
<TouchableOpacity
|
||||
style={styles.settingsButton}
|
||||
onPress={handleSettingsPress}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Ionicons name="settings-outline" size={24} color={colorTokens.text} />
|
||||
</TouchableOpacity>
|
||||
isLiquidGlassAvailable() ? (
|
||||
<TouchableOpacity
|
||||
onPress={handleSettingsPress}
|
||||
activeOpacity={0.7}
|
||||
style={styles.settingsButtonWrapper}
|
||||
>
|
||||
<GlassView
|
||||
style={styles.settingsButtonGlass}
|
||||
glassEffectStyle="regular"
|
||||
tintColor="rgba(255, 255, 255, 0.4)"
|
||||
isInteractive={true}
|
||||
>
|
||||
<Ionicons name="settings-outline" size={22} color="#1c1f3a" />
|
||||
</GlassView>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
style={styles.settingsButtonFallback}
|
||||
onPress={handleSettingsPress}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Ionicons name="settings-outline" size={22} color="#1c1f3a" />
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -197,13 +210,37 @@ const WaterDetail: React.FC<WaterDetailProps> = () => {
|
||||
}]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
|
||||
{/* 第二部分:饮水记录 */}
|
||||
<View style={styles.section}>
|
||||
<Text style={[styles.sectionTitle, { color: colorTokens.text }]}>
|
||||
{selectedDate ? dayjs(selectedDate).format('MM月DD日') : '今日'}饮水记录
|
||||
<View style={styles.headerBlock}>
|
||||
<Text style={styles.pageTitle}>
|
||||
{selectedDate ? dayjs(selectedDate).format('MM-DD') : t('waterDetail.today')}
|
||||
</Text>
|
||||
<Text style={styles.pageSubtitle}>{t('waterDetail.waterRecord')}</Text>
|
||||
</View>
|
||||
|
||||
{/* 进度卡片 */}
|
||||
<View style={styles.progressCard}>
|
||||
<View style={styles.progressInfo}>
|
||||
<View>
|
||||
<Text style={styles.progressLabel}>{t('waterDetail.total')}</Text>
|
||||
<Text style={styles.progressValue}>{totalAmount}<Text style={styles.progressUnit}>ml</Text></Text>
|
||||
</View>
|
||||
<View style={{ alignItems: 'flex-end' }}>
|
||||
<Text style={styles.progressLabel}>{t('waterDetail.goal')}</Text>
|
||||
<Text style={styles.progressGoalValue}>{currentGoal}<Text style={styles.progressUnit}>ml</Text></Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.progressBarBg}>
|
||||
<LinearGradient
|
||||
colors={['#4F5BD5', '#6B6CFF']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={[styles.progressBarFill, { width: `${progress}%` }]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 记录列表 */}
|
||||
<View style={styles.section}>
|
||||
{waterRecords && waterRecords.length > 0 ? (
|
||||
<View style={styles.recordsList}>
|
||||
{waterRecords.map((record) => (
|
||||
@@ -213,29 +250,20 @@ const WaterDetail: React.FC<WaterDetailProps> = () => {
|
||||
onDelete={() => handleDeleteRecord(record.id)}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* 总计显示 */}
|
||||
<View style={[styles.recordsSummary, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
|
||||
<Text style={[styles.summaryText, { color: colorTokens.text }]}>
|
||||
总计:{waterRecords.reduce((sum, record) => sum + record.amount, 0)}ml
|
||||
</Text>
|
||||
<Text style={[styles.summaryGoal, { color: colorTokens.textSecondary }]}>
|
||||
目标:{dailyWaterGoal}ml
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.noRecordsContainer}>
|
||||
<Ionicons name="water-outline" size={48} color={colorTokens.textSecondary} />
|
||||
<Text style={[styles.noRecordsText, { color: colorTokens.textSecondary }]}>暂无饮水记录</Text>
|
||||
<Text style={[styles.noRecordsSubText, { color: colorTokens.textSecondary }]}>点击"添加记录"开始记录饮水量</Text>
|
||||
<Image
|
||||
source={require('@/assets/images/icons/IconGlass.png')}
|
||||
style={{ width: 60, height: 60, opacity: 0.5, marginBottom: 16 }}
|
||||
/>
|
||||
<Text style={styles.noRecordsText}>{t('waterDetail.noRecords')}</Text>
|
||||
<Text style={styles.noRecordsSubText}>{t('waterDetail.noRecordsSubtitle')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
|
||||
{/* All modals have been moved to the separate water-settings page */}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
@@ -245,32 +273,12 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
backgroundColor: '#f3f4fb',
|
||||
},
|
||||
gradientBackground: {
|
||||
topGradient: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
decorativeCircle1: {
|
||||
position: 'absolute',
|
||||
top: 80,
|
||||
right: 30,
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
backgroundColor: '#4F5BD5',
|
||||
opacity: 0.08,
|
||||
},
|
||||
decorativeCircle2: {
|
||||
position: 'absolute',
|
||||
bottom: 100,
|
||||
left: -20,
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
backgroundColor: '#4F5BD5',
|
||||
opacity: 0.06,
|
||||
height: 300,
|
||||
},
|
||||
keyboardAvoidingView: {
|
||||
flex: 1,
|
||||
@@ -279,54 +287,107 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingBottom: 40,
|
||||
},
|
||||
headerBlock: {
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 20,
|
||||
marginTop: 10,
|
||||
marginBottom: 24,
|
||||
},
|
||||
section: {
|
||||
marginBottom: 36,
|
||||
pageTitle: {
|
||||
fontSize: 28,
|
||||
fontWeight: '800',
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
marginBottom: 4,
|
||||
},
|
||||
sectionTitle: {
|
||||
pageSubtitle: {
|
||||
fontSize: 16,
|
||||
color: '#6f7ba7',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
|
||||
// 进度卡片
|
||||
progressCard: {
|
||||
marginHorizontal: 24,
|
||||
marginBottom: 32,
|
||||
padding: 24,
|
||||
borderRadius: 28,
|
||||
backgroundColor: '#ffffff',
|
||||
shadowColor: 'rgba(30, 41, 59, 0.1)',
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 0.18,
|
||||
shadowRadius: 20,
|
||||
elevation: 8,
|
||||
},
|
||||
progressInfo: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-end',
|
||||
marginBottom: 16,
|
||||
},
|
||||
progressLabel: {
|
||||
fontSize: 14,
|
||||
color: '#6f7ba7',
|
||||
marginBottom: 6,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
progressValue: {
|
||||
fontSize: 28,
|
||||
fontWeight: '800',
|
||||
color: '#4F5BD5',
|
||||
fontFamily: 'AliBold',
|
||||
lineHeight: 32,
|
||||
},
|
||||
progressGoalValue: {
|
||||
fontSize: 20,
|
||||
fontWeight: '700',
|
||||
marginBottom: 24,
|
||||
letterSpacing: -0.5,
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
lineHeight: 32,
|
||||
},
|
||||
subsectionTitle: {
|
||||
progressUnit: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
marginBottom: 16,
|
||||
letterSpacing: -0.3,
|
||||
color: '#1c1f3a',
|
||||
},
|
||||
sectionSubtitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
lineHeight: 20,
|
||||
color: '#6f7ba7',
|
||||
marginLeft: 2,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
// 饮水记录相关样式
|
||||
progressBarBg: {
|
||||
height: 12,
|
||||
backgroundColor: '#F0F2F5',
|
||||
borderRadius: 6,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
progressBarFill: {
|
||||
height: '100%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
|
||||
section: {
|
||||
paddingHorizontal: 24,
|
||||
},
|
||||
|
||||
// 记录列表样式
|
||||
recordsList: {
|
||||
gap: 16,
|
||||
},
|
||||
recordCardContainer: {
|
||||
// iOS 阴影效果 - 增强阴影效果
|
||||
shadowColor: 'rgba(30, 41, 59, 0.18)',
|
||||
shadowColor: 'rgba(30, 41, 59, 0.08)',
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
shadowOpacity: 0.16,
|
||||
shadowRadius: 16,
|
||||
// Android 阴影效果
|
||||
elevation: 6,
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 12,
|
||||
elevation: 4,
|
||||
marginBottom: 2,
|
||||
},
|
||||
recordCard: {
|
||||
borderRadius: 20,
|
||||
borderRadius: 24,
|
||||
padding: 18,
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
recordMainContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
recordIconContainer: {
|
||||
width: 48,
|
||||
@@ -334,7 +395,7 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(79, 91, 213, 0.08)',
|
||||
backgroundColor: '#f5f6ff',
|
||||
},
|
||||
recordIcon: {
|
||||
width: 24,
|
||||
@@ -345,15 +406,21 @@ const styles = StyleSheet.create({
|
||||
marginLeft: 16,
|
||||
},
|
||||
recordLabel: {
|
||||
fontSize: 17,
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#1c1f3a',
|
||||
marginBottom: 6,
|
||||
marginBottom: 4,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
recordTimeContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
gap: 4,
|
||||
},
|
||||
recordTimeText: {
|
||||
fontSize: 13,
|
||||
color: '#6f7ba7',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
recordAmountContainer: {
|
||||
alignItems: 'flex-end',
|
||||
@@ -362,364 +429,74 @@ const styles = StyleSheet.create({
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#4F5BD5',
|
||||
},
|
||||
deleteSwipeButton: {
|
||||
backgroundColor: '#EF4444',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: 80,
|
||||
borderRadius: 16,
|
||||
marginLeft: 12,
|
||||
},
|
||||
deleteSwipeButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginTop: 4,
|
||||
},
|
||||
recordTimeText: {
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
color: '#6f7ba7',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
recordNote: {
|
||||
marginTop: 12,
|
||||
marginTop: 14,
|
||||
padding: 12,
|
||||
backgroundColor: 'rgba(79, 91, 213, 0.04)',
|
||||
backgroundColor: '#F8F9FC',
|
||||
borderRadius: 12,
|
||||
fontSize: 14,
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 20,
|
||||
fontSize: 13,
|
||||
lineHeight: 18,
|
||||
color: '#5f6a97',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
recordsSummary: {
|
||||
marginTop: 24,
|
||||
padding: 20,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#ffffff',
|
||||
shadowColor: 'rgba(30, 41, 59, 0.12)',
|
||||
shadowOpacity: 0.16,
|
||||
shadowRadius: 18,
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
elevation: 6,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
deleteSwipeButton: {
|
||||
backgroundColor: '#FF6B6B',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: 70,
|
||||
height: '100%',
|
||||
borderRadius: 24,
|
||||
marginLeft: 12,
|
||||
},
|
||||
summaryText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#1c1f3a',
|
||||
},
|
||||
summaryGoal: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#6f7ba7',
|
||||
},
|
||||
|
||||
noRecordsContainer: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 60,
|
||||
gap: 20,
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 28,
|
||||
shadowColor: 'rgba(30, 41, 59, 0.06)',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 12,
|
||||
},
|
||||
noRecordsText: {
|
||||
fontSize: 17,
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
lineHeight: 24,
|
||||
color: '#6f7ba7',
|
||||
color: '#1c1f3a',
|
||||
marginBottom: 8,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
noRecordsSubText: {
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
lineHeight: 20,
|
||||
color: '#9ba3c7',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
modalBackdrop: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
|
||||
// Settings Button
|
||||
settingsButtonWrapper: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
modalSheet: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
padding: 16,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
// iOS 阴影效果
|
||||
shadowColor: '#000000',
|
||||
shadowOffset: { width: 0, height: -2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
// Android 阴影效果
|
||||
elevation: 16,
|
||||
},
|
||||
modalHandle: {
|
||||
width: 36,
|
||||
height: 4,
|
||||
backgroundColor: '#E0E0E0',
|
||||
borderRadius: 2,
|
||||
alignSelf: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
pickerContainer: {
|
||||
height: 200,
|
||||
marginBottom: 20,
|
||||
},
|
||||
picker: {
|
||||
height: 200,
|
||||
},
|
||||
modalActions: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
gap: 12,
|
||||
},
|
||||
modalBtn: {
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 10,
|
||||
minWidth: 80,
|
||||
settingsButtonGlass: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
modalBtnPrimary: {
|
||||
// backgroundColor will be set dynamically
|
||||
},
|
||||
modalBtnText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
modalBtnTextPrimary: {
|
||||
// color will be set dynamically
|
||||
},
|
||||
settingsButton: {
|
||||
settingsButtonFallback: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.24)',
|
||||
backgroundColor: '#ffffff',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.45)',
|
||||
},
|
||||
settingsModalSheet: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
padding: 16,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
shadowColor: '#000000',
|
||||
shadowOffset: { width: 0, height: -2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 16,
|
||||
},
|
||||
settingsModalTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
settingsMenuContainer: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
settingsMenuItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#F1F3F4',
|
||||
},
|
||||
settingsMenuItemLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
},
|
||||
settingsIconContainer: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 6,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
settingsMenuItemContent: {
|
||||
flex: 1,
|
||||
},
|
||||
settingsMenuItemTitle: {
|
||||
fontSize: 15,
|
||||
fontWeight: '500',
|
||||
marginBottom: 2,
|
||||
},
|
||||
settingsMenuItemSubtitle: {
|
||||
fontSize: 12,
|
||||
marginBottom: 4,
|
||||
},
|
||||
settingsMenuItemValue: {
|
||||
fontSize: 14,
|
||||
},
|
||||
// 喝水提醒配置弹窗样式
|
||||
waterReminderModalSheet: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
padding: 16,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
maxHeight: '80%',
|
||||
shadowColor: '#000000',
|
||||
shadowOffset: { width: 0, height: -2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 16,
|
||||
},
|
||||
waterReminderContent: {
|
||||
flex: 1,
|
||||
marginBottom: 20,
|
||||
},
|
||||
waterReminderSection: {
|
||||
marginBottom: 24,
|
||||
},
|
||||
waterReminderSectionHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 8,
|
||||
},
|
||||
waterReminderSectionTitleContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
waterReminderSectionTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
waterReminderSectionDesc: {
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
marginTop: 4,
|
||||
},
|
||||
timeRangeContainer: {
|
||||
flexDirection: 'row',
|
||||
gap: 16,
|
||||
marginTop: 16,
|
||||
},
|
||||
timePickerContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
timeLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
marginBottom: 8,
|
||||
},
|
||||
timePicker: {
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 8,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
timePickerText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
},
|
||||
timePickerIcon: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
intervalContainer: {
|
||||
marginTop: 16,
|
||||
},
|
||||
intervalPickerContainer: {
|
||||
backgroundColor: '#F8F9FA',
|
||||
borderRadius: 8,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
intervalPicker: {
|
||||
height: 120,
|
||||
},
|
||||
// 时间选择器弹窗样式
|
||||
timePickerModalSheet: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
padding: 16,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
maxHeight: '60%',
|
||||
shadowColor: '#000000',
|
||||
shadowOffset: { width: 0, height: -2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 16,
|
||||
},
|
||||
timePickerContent: {
|
||||
flex: 1,
|
||||
marginBottom: 20,
|
||||
},
|
||||
timePickerSection: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
timePickerLabel: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
marginBottom: 12,
|
||||
textAlign: 'center',
|
||||
},
|
||||
hourPickerContainer: {
|
||||
backgroundColor: '#F8F9FA',
|
||||
borderRadius: 8,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
hourPicker: {
|
||||
height: 160,
|
||||
},
|
||||
timeRangePreview: {
|
||||
backgroundColor: '#F0F8FF',
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
marginTop: 16,
|
||||
alignItems: 'center',
|
||||
},
|
||||
timeRangePreviewLabel: {
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
marginBottom: 4,
|
||||
},
|
||||
timeRangePreviewText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
marginBottom: 8,
|
||||
},
|
||||
timeRangeWarning: {
|
||||
fontSize: 12,
|
||||
color: '#FF6B6B',
|
||||
textAlign: 'center',
|
||||
lineHeight: 18,
|
||||
borderColor: 'rgba(0,0,0,0.05)',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -22,9 +22,11 @@ import {
|
||||
} from 'react-native';
|
||||
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
|
||||
const WaterReminderSettings: React.FC = () => {
|
||||
const { t } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
@@ -71,9 +73,9 @@ const WaterReminderSettings: React.FC = () => {
|
||||
setStartTimePickerVisible(false);
|
||||
} else {
|
||||
Alert.alert(
|
||||
'时间设置提示',
|
||||
'开始时间不能晚于或等于结束时间,请重新选择',
|
||||
[{ text: '确定' }]
|
||||
t('waterReminderSettings.alerts.timeValidation.title'),
|
||||
t('waterReminderSettings.alerts.timeValidation.startTimeInvalid'),
|
||||
[{ text: t('waterReminderSettings.buttons.confirm') }]
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -91,9 +93,9 @@ const WaterReminderSettings: React.FC = () => {
|
||||
setEndTimePickerVisible(false);
|
||||
} else {
|
||||
Alert.alert(
|
||||
'时间设置提示',
|
||||
'结束时间不能早于或等于开始时间,请重新选择',
|
||||
[{ text: '确定' }]
|
||||
t('waterReminderSettings.alerts.timeValidation.title'),
|
||||
t('waterReminderSettings.alerts.timeValidation.endTimeInvalid'),
|
||||
[{ text: t('waterReminderSettings.buttons.confirm') }]
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -125,18 +127,28 @@ const WaterReminderSettings: React.FC = () => {
|
||||
|
||||
if (waterReminderSettings.enabled) {
|
||||
const timeInfo = `${waterReminderSettings.startTime}-${waterReminderSettings.endTime}`;
|
||||
const intervalInfo = `每${waterReminderSettings.interval}分钟`;
|
||||
const intervalInfo = `${waterReminderSettings.interval}${t('waterReminderSettings.labels.minutes')}`;
|
||||
Alert.alert(
|
||||
'设置成功',
|
||||
`喝水提醒已开启\n\n时间段:${timeInfo}\n提醒间隔:${intervalInfo}\n\n我们将在指定时间段内定期提醒您喝水`,
|
||||
[{ text: '确定', onPress: () => router.back() }]
|
||||
t('waterReminderSettings.alerts.success.enabled'),
|
||||
t('waterReminderSettings.alerts.success.enabledMessage', {
|
||||
timeRange: timeInfo,
|
||||
interval: intervalInfo
|
||||
}),
|
||||
[{ text: t('waterReminderSettings.buttons.confirm'), onPress: () => router.back() }]
|
||||
);
|
||||
} else {
|
||||
Alert.alert('设置成功', '喝水提醒已关闭', [{ text: '确定', onPress: () => router.back() }]);
|
||||
Alert.alert(
|
||||
t('waterReminderSettings.alerts.success.disabled'),
|
||||
t('waterReminderSettings.alerts.success.disabledMessage'),
|
||||
[{ text: t('waterReminderSettings.buttons.confirm'), onPress: () => router.back() }]
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存喝水提醒设置失败:', error);
|
||||
Alert.alert('保存失败', '无法保存喝水提醒设置,请重试');
|
||||
Alert.alert(
|
||||
t('waterReminderSettings.alerts.error.title'),
|
||||
t('waterReminderSettings.alerts.error.message')
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -176,7 +188,7 @@ const WaterReminderSettings: React.FC = () => {
|
||||
<View style={styles.decorativeCircle2} />
|
||||
|
||||
<HeaderBar
|
||||
title="喝水提醒"
|
||||
title={t('waterReminderSettings.title')}
|
||||
onBack={() => {
|
||||
router.back();
|
||||
}}
|
||||
@@ -198,7 +210,7 @@ const WaterReminderSettings: React.FC = () => {
|
||||
<View style={styles.waterReminderSectionHeader}>
|
||||
<View style={styles.waterReminderSectionTitleContainer}>
|
||||
<Ionicons name="notifications-outline" size={20} color={colorTokens.text} />
|
||||
<Text style={[styles.waterReminderSectionTitle, { color: colorTokens.text }]}>推送提醒</Text>
|
||||
<Text style={[styles.waterReminderSectionTitle, { color: colorTokens.text }]}>{t('waterReminderSettings.sections.notifications')}</Text>
|
||||
</View>
|
||||
<Switch
|
||||
value={waterReminderSettings.enabled}
|
||||
@@ -208,7 +220,7 @@ const WaterReminderSettings: React.FC = () => {
|
||||
/>
|
||||
</View>
|
||||
<Text style={[styles.waterReminderSectionDesc, { color: colorTokens.textSecondary }]}>
|
||||
开启后将在指定时间段内定期推送喝水提醒
|
||||
{t('waterReminderSettings.descriptions.notifications')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
@@ -216,15 +228,15 @@ const WaterReminderSettings: React.FC = () => {
|
||||
{waterReminderSettings.enabled && (
|
||||
<>
|
||||
<View style={styles.waterReminderSection}>
|
||||
<Text style={[styles.waterReminderSectionTitle, { color: colorTokens.text }]}>提醒时间段</Text>
|
||||
<Text style={[styles.waterReminderSectionTitle, { color: colorTokens.text }]}>{t('waterReminderSettings.sections.timeRange')}</Text>
|
||||
<Text style={[styles.waterReminderSectionDesc, { color: colorTokens.textSecondary }]}>
|
||||
只在指定时间段内发送提醒,避免打扰您的休息
|
||||
{t('waterReminderSettings.descriptions.timeRange')}
|
||||
</Text>
|
||||
|
||||
<View style={styles.timeRangeContainer}>
|
||||
{/* 开始时间 */}
|
||||
<View style={styles.timePickerContainer}>
|
||||
<Text style={[styles.timeLabel, { color: colorTokens.text }]}>开始时间</Text>
|
||||
<Text style={[styles.timeLabel, { color: colorTokens.text }]}>{t('waterReminderSettings.labels.startTime')}</Text>
|
||||
<Pressable
|
||||
style={[styles.timePicker, { backgroundColor: 'white' }]}
|
||||
onPress={openStartTimePicker}
|
||||
@@ -236,7 +248,7 @@ const WaterReminderSettings: React.FC = () => {
|
||||
|
||||
{/* 结束时间 */}
|
||||
<View style={styles.timePickerContainer}>
|
||||
<Text style={[styles.timeLabel, { color: colorTokens.text }]}>结束时间</Text>
|
||||
<Text style={[styles.timeLabel, { color: colorTokens.text }]}>{t('waterReminderSettings.labels.endTime')}</Text>
|
||||
<Pressable
|
||||
style={[styles.timePicker, { backgroundColor: 'white' }]}
|
||||
onPress={openEndTimePicker}
|
||||
@@ -250,9 +262,9 @@ const WaterReminderSettings: React.FC = () => {
|
||||
|
||||
{/* 提醒间隔设置 */}
|
||||
<View style={styles.waterReminderSection}>
|
||||
<Text style={[styles.waterReminderSectionTitle, { color: colorTokens.text }]}>提醒间隔</Text>
|
||||
<Text style={[styles.waterReminderSectionTitle, { color: colorTokens.text }]}>{t('waterReminderSettings.sections.interval')}</Text>
|
||||
<Text style={[styles.waterReminderSectionDesc, { color: colorTokens.textSecondary }]}>
|
||||
选择提醒的频率,建议30-120分钟为宜
|
||||
{t('waterReminderSettings.descriptions.interval')}
|
||||
</Text>
|
||||
|
||||
<View style={styles.intervalContainer}>
|
||||
@@ -263,7 +275,7 @@ const WaterReminderSettings: React.FC = () => {
|
||||
style={styles.intervalPicker}
|
||||
>
|
||||
{[30, 45, 60, 90, 120, 150, 180].map(interval => (
|
||||
<Picker.Item key={interval} label={`${interval}分钟`} value={interval} />
|
||||
<Picker.Item key={interval} label={`${interval}${t('waterReminderSettings.labels.minutes')}`} value={interval} />
|
||||
))}
|
||||
</Picker>
|
||||
</View>
|
||||
@@ -279,7 +291,7 @@ const WaterReminderSettings: React.FC = () => {
|
||||
onPress={handleWaterReminderSave}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={[styles.saveButtonText, { color: colorTokens.onPrimary }]}>保存设置</Text>
|
||||
<Text style={[styles.saveButtonText, { color: colorTokens.onPrimary }]}>{t('waterReminderSettings.labels.saveSettings')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
@@ -295,11 +307,11 @@ const WaterReminderSettings: React.FC = () => {
|
||||
<Pressable style={styles.modalBackdrop} onPress={() => setStartTimePickerVisible(false)} />
|
||||
<View style={styles.timePickerModalSheet}>
|
||||
<View style={styles.modalHandle} />
|
||||
<Text style={[styles.modalTitle, { color: colorTokens.text }]}>选择开始时间</Text>
|
||||
<Text style={[styles.modalTitle, { color: colorTokens.text }]}>{t('waterReminderSettings.labels.startTime')}</Text>
|
||||
|
||||
<View style={styles.timePickerContent}>
|
||||
<View style={styles.timePickerSection}>
|
||||
<Text style={[styles.timePickerLabel, { color: colorTokens.text }]}>小时</Text>
|
||||
<Text style={[styles.timePickerLabel, { color: colorTokens.text }]}>{t('waterReminderSettings.labels.hours')}</Text>
|
||||
<View style={styles.hourPickerContainer}>
|
||||
<Picker
|
||||
selectedValue={tempStartHour}
|
||||
@@ -314,12 +326,12 @@ const WaterReminderSettings: React.FC = () => {
|
||||
</View>
|
||||
|
||||
<View style={styles.timeRangePreview}>
|
||||
<Text style={[styles.timeRangePreviewLabel, { color: colorTokens.textSecondary }]}>时间段预览</Text>
|
||||
<Text style={[styles.timeRangePreviewLabel, { color: colorTokens.textSecondary }]}>{t('waterReminderSettings.labels.timeRangePreview')}</Text>
|
||||
<Text style={[styles.timeRangePreviewText, { color: colorTokens.text }]}>
|
||||
{String(tempStartHour).padStart(2, '0')}:00 - {waterReminderSettings.endTime}
|
||||
</Text>
|
||||
{!isValidTimeRange(`${String(tempStartHour).padStart(2, '0')}:00`, waterReminderSettings.endTime) && (
|
||||
<Text style={styles.timeRangeWarning}>⚠️ 开始时间不能晚于或等于结束时间</Text>
|
||||
<Text style={styles.timeRangeWarning}>⚠️ {t('waterReminderSettings.alerts.timeValidation.startTimeInvalid')}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
@@ -329,13 +341,13 @@ const WaterReminderSettings: React.FC = () => {
|
||||
onPress={() => setStartTimePickerVisible(false)}
|
||||
style={[styles.modalBtn, { backgroundColor: 'white' }]}
|
||||
>
|
||||
<Text style={[styles.modalBtnText, { color: colorTokens.text }]}>取消</Text>
|
||||
<Text style={[styles.modalBtnText, { color: colorTokens.text }]}>{t('waterReminderSettings.buttons.cancel')}</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={confirmStartTime}
|
||||
style={[styles.modalBtn, styles.modalBtnPrimary, { backgroundColor: colorTokens.primary }]}
|
||||
>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary, { color: colorTokens.onPrimary }]}>确定</Text>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary, { color: colorTokens.onPrimary }]}>{t('waterReminderSettings.buttons.confirm')}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
@@ -351,11 +363,11 @@ const WaterReminderSettings: React.FC = () => {
|
||||
<Pressable style={styles.modalBackdrop} onPress={() => setEndTimePickerVisible(false)} />
|
||||
<View style={styles.timePickerModalSheet}>
|
||||
<View style={styles.modalHandle} />
|
||||
<Text style={[styles.modalTitle, { color: colorTokens.text }]}>选择结束时间</Text>
|
||||
<Text style={[styles.modalTitle, { color: colorTokens.text }]}>{t('waterReminderSettings.labels.endTime')}</Text>
|
||||
|
||||
<View style={styles.timePickerContent}>
|
||||
<View style={styles.timePickerSection}>
|
||||
<Text style={[styles.timePickerLabel, { color: colorTokens.text }]}>小时</Text>
|
||||
<Text style={[styles.timePickerLabel, { color: colorTokens.text }]}>{t('waterReminderSettings.labels.hours')}</Text>
|
||||
<View style={styles.hourPickerContainer}>
|
||||
<Picker
|
||||
selectedValue={tempEndHour}
|
||||
@@ -370,12 +382,12 @@ const WaterReminderSettings: React.FC = () => {
|
||||
</View>
|
||||
|
||||
<View style={styles.timeRangePreview}>
|
||||
<Text style={[styles.timeRangePreviewLabel, { color: colorTokens.textSecondary }]}>时间段预览</Text>
|
||||
<Text style={[styles.timeRangePreviewLabel, { color: colorTokens.textSecondary }]}>{t('waterReminderSettings.labels.timeRangePreview')}</Text>
|
||||
<Text style={[styles.timeRangePreviewText, { color: colorTokens.text }]}>
|
||||
{waterReminderSettings.startTime} - {String(tempEndHour).padStart(2, '0')}:00
|
||||
</Text>
|
||||
{!isValidTimeRange(waterReminderSettings.startTime, `${String(tempEndHour).padStart(2, '0')}:00`) && (
|
||||
<Text style={styles.timeRangeWarning}>⚠️ 结束时间不能早于或等于开始时间</Text>
|
||||
<Text style={styles.timeRangeWarning}>⚠️ {t('waterReminderSettings.alerts.timeValidation.endTimeInvalid')}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
@@ -385,13 +397,13 @@ const WaterReminderSettings: React.FC = () => {
|
||||
onPress={() => setEndTimePickerVisible(false)}
|
||||
style={[styles.modalBtn, { backgroundColor: 'white' }]}
|
||||
>
|
||||
<Text style={[styles.modalBtnText, { color: colorTokens.text }]}>取消</Text>
|
||||
<Text style={[styles.modalBtnText, { color: colorTokens.text }]}>{t('waterReminderSettings.buttons.cancel')}</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={confirmEndTime}
|
||||
style={[styles.modalBtn, styles.modalBtnPrimary, { backgroundColor: colorTokens.primary }]}
|
||||
>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary, { color: colorTokens.onPrimary }]}>确定</Text>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary, { color: colorTokens.onPrimary }]}>{t('waterReminderSettings.buttons.confirm')}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -21,9 +21,11 @@ import {
|
||||
} from 'react-native';
|
||||
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
|
||||
const WaterSettings: React.FC = () => {
|
||||
const { t } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
@@ -74,7 +76,10 @@ const WaterSettings: React.FC = () => {
|
||||
setGoalModalVisible(false);
|
||||
|
||||
// 这里可以添加保存到本地存储或发送到后端的逻辑
|
||||
Alert.alert('设置成功', `每日饮水目标已设置为 ${tempGoal}ml`);
|
||||
Alert.alert(
|
||||
t('waterSettings.alerts.goalSuccess.title'),
|
||||
t('waterSettings.alerts.goalSuccess.message', { amount: tempGoal })
|
||||
);
|
||||
};
|
||||
|
||||
// 处理快速添加默认值确认
|
||||
@@ -84,9 +89,15 @@ const WaterSettings: React.FC = () => {
|
||||
|
||||
try {
|
||||
await setQuickWaterAmount(tempQuickAdd);
|
||||
Alert.alert('设置成功', `快速添加默认值已设置为 ${tempQuickAdd}ml`);
|
||||
Alert.alert(
|
||||
t('waterSettings.alerts.quickAddSuccess.title'),
|
||||
t('waterSettings.alerts.quickAddSuccess.message', { amount: tempQuickAdd })
|
||||
);
|
||||
} catch {
|
||||
Alert.alert('设置失败', '无法保存快速添加默认值,请重试');
|
||||
Alert.alert(
|
||||
t('waterSettings.alerts.quickAddFailed.title'),
|
||||
t('waterSettings.alerts.quickAddFailed.message')
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -101,7 +112,7 @@ const WaterSettings: React.FC = () => {
|
||||
const reminderSettings = await getWaterReminderSettings();
|
||||
setWaterReminderSettings(reminderSettings);
|
||||
} catch (error) {
|
||||
console.error('加载用户偏好设置失败:', error);
|
||||
console.error('Failed to load user preferences:', error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
@@ -132,7 +143,7 @@ const WaterSettings: React.FC = () => {
|
||||
<View style={styles.decorativeCircle2} />
|
||||
|
||||
<HeaderBar
|
||||
title="饮水设置"
|
||||
title={t('waterSettings.title')}
|
||||
onBack={() => {
|
||||
router.back();
|
||||
}}
|
||||
@@ -156,8 +167,8 @@ const WaterSettings: React.FC = () => {
|
||||
<Ionicons name="flag-outline" size={20} color="#9370DB" />
|
||||
</View>
|
||||
<View style={styles.settingsMenuItemContent}>
|
||||
<Text style={[styles.settingsMenuItemTitle, { color: colorTokens.text }]}>每日饮水目标</Text>
|
||||
<Text style={[styles.settingsMenuItemValue, { color: colorTokens.textSecondary }]}>{currentWaterGoal}ml</Text>
|
||||
<Text style={[styles.settingsMenuItemTitle, { color: colorTokens.text }]}>{t('waterSettings.sections.dailyGoal')}</Text>
|
||||
<Text style={[styles.settingsMenuItemValue, { color: colorTokens.textSecondary }]}>{currentWaterGoal}{t('waterSettings.labels.ml')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={20} color="#CCCCCC" />
|
||||
@@ -169,11 +180,11 @@ const WaterSettings: React.FC = () => {
|
||||
<Ionicons name="add-outline" size={20} color="#9370DB" />
|
||||
</View>
|
||||
<View style={styles.settingsMenuItemContent}>
|
||||
<Text style={[styles.settingsMenuItemTitle, { color: colorTokens.text }]}>快速添加默认值</Text>
|
||||
<Text style={[styles.settingsMenuItemTitle, { color: colorTokens.text }]}>{t('waterSettings.sections.quickAdd')}</Text>
|
||||
<Text style={[styles.settingsMenuItemSubtitle, { color: colorTokens.textSecondary }]}>
|
||||
设置点击"+"按钮时添加的默认饮水量
|
||||
{t('waterSettings.descriptions.quickAdd')}
|
||||
</Text>
|
||||
<Text style={[styles.settingsMenuItemValue, { color: colorTokens.textSecondary }]}>{quickAddAmount}ml</Text>
|
||||
<Text style={[styles.settingsMenuItemValue, { color: colorTokens.textSecondary }]}>{quickAddAmount}{t('waterSettings.labels.ml')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={20} color="#CCCCCC" />
|
||||
@@ -185,12 +196,19 @@ const WaterSettings: React.FC = () => {
|
||||
<Ionicons name="notifications-outline" size={20} color="#3498DB" />
|
||||
</View>
|
||||
<View style={styles.settingsMenuItemContent}>
|
||||
<Text style={[styles.settingsMenuItemTitle, { color: colorTokens.text }]}>喝水提醒</Text>
|
||||
<Text style={[styles.settingsMenuItemTitle, { color: colorTokens.text }]}>{t('waterSettings.sections.reminder')}</Text>
|
||||
<Text style={[styles.settingsMenuItemSubtitle, { color: colorTokens.textSecondary }]}>
|
||||
设置定时提醒您补充水分
|
||||
{t('waterSettings.descriptions.reminder')}
|
||||
</Text>
|
||||
<Text style={[styles.settingsMenuItemValue, { color: colorTokens.textSecondary }]}>
|
||||
{waterReminderSettings.enabled ? `${waterReminderSettings.startTime}-${waterReminderSettings.endTime}, 每${waterReminderSettings.interval}分钟` : '已关闭'}
|
||||
{waterReminderSettings.enabled
|
||||
? t('waterSettings.status.reminderEnabled', {
|
||||
startTime: waterReminderSettings.startTime,
|
||||
endTime: waterReminderSettings.endTime,
|
||||
interval: waterReminderSettings.interval
|
||||
})
|
||||
: t('waterSettings.labels.disabled')
|
||||
}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -211,7 +229,7 @@ const WaterSettings: React.FC = () => {
|
||||
<Pressable style={styles.modalBackdrop} onPress={() => setGoalModalVisible(false)} />
|
||||
<View style={styles.modalSheet}>
|
||||
<View style={styles.modalHandle} />
|
||||
<Text style={[styles.modalTitle, { color: colorTokens.text }]}>每日饮水目标</Text>
|
||||
<Text style={[styles.modalTitle, { color: colorTokens.text }]}>{t('waterSettings.sections.dailyGoal')}</Text>
|
||||
<View style={styles.pickerContainer}>
|
||||
<Picker
|
||||
selectedValue={tempGoal}
|
||||
@@ -219,7 +237,7 @@ const WaterSettings: React.FC = () => {
|
||||
style={styles.picker}
|
||||
>
|
||||
{Array.from({ length: 96 }, (_, i) => 500 + i * 100).map(goal => (
|
||||
<Picker.Item key={goal} label={`${goal}ml`} value={goal} />
|
||||
<Picker.Item key={goal} label={`${goal}${t('waterSettings.labels.ml')}`} value={goal} />
|
||||
))}
|
||||
</Picker>
|
||||
</View>
|
||||
@@ -228,13 +246,13 @@ const WaterSettings: React.FC = () => {
|
||||
onPress={() => setGoalModalVisible(false)}
|
||||
style={[styles.modalBtn, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}
|
||||
>
|
||||
<Text style={[styles.modalBtnText, { color: colorTokens.text }]}>取消</Text>
|
||||
<Text style={[styles.modalBtnText, { color: colorTokens.text }]}>{t('waterSettings.buttons.cancel')}</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={handleGoalConfirm}
|
||||
style={[styles.modalBtn, styles.modalBtnPrimary, { backgroundColor: colorTokens.primary }]}
|
||||
>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary, { color: colorTokens.onPrimary }]}>确定</Text>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary, { color: colorTokens.onPrimary }]}>{t('waterSettings.buttons.confirm')}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
@@ -250,7 +268,7 @@ const WaterSettings: React.FC = () => {
|
||||
<Pressable style={styles.modalBackdrop} onPress={() => setQuickAddModalVisible(false)} />
|
||||
<View style={styles.modalSheet}>
|
||||
<View style={styles.modalHandle} />
|
||||
<Text style={[styles.modalTitle, { color: colorTokens.text }]}>快速添加默认值</Text>
|
||||
<Text style={[styles.modalTitle, { color: colorTokens.text }]}>{t('waterSettings.sections.quickAdd')}</Text>
|
||||
<View style={styles.pickerContainer}>
|
||||
<Picker
|
||||
selectedValue={tempQuickAdd}
|
||||
@@ -258,7 +276,7 @@ const WaterSettings: React.FC = () => {
|
||||
style={styles.picker}
|
||||
>
|
||||
{Array.from({ length: 41 }, (_, i) => 50 + i * 10).map(amount => (
|
||||
<Picker.Item key={amount} label={`${amount}ml`} value={amount} />
|
||||
<Picker.Item key={amount} label={`${amount}${t('waterSettings.labels.ml')}`} value={amount} />
|
||||
))}
|
||||
</Picker>
|
||||
</View>
|
||||
@@ -267,13 +285,13 @@ const WaterSettings: React.FC = () => {
|
||||
onPress={() => setQuickAddModalVisible(false)}
|
||||
style={[styles.modalBtn, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}
|
||||
>
|
||||
<Text style={[styles.modalBtnText, { color: colorTokens.text }]}>取消</Text>
|
||||
<Text style={[styles.modalBtnText, { color: colorTokens.text }]}>{t('waterSettings.buttons.cancel')}</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={handleQuickAddConfirm}
|
||||
style={[styles.modalBtn, styles.modalBtnPrimary, { backgroundColor: colorTokens.primary }]}
|
||||
>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary, { color: colorTokens.onPrimary }]}>确定</Text>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary, { color: colorTokens.onPrimary }]}>{t('waterSettings.buttons.confirm')}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -5,16 +5,18 @@ import { Colors } from '@/constants/Colors';
|
||||
import { getTabBarBottomPadding } from '@/constants/TabBar';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import { appStoreReviewService } from '@/services/appStoreReview';
|
||||
import { deleteWeightRecord, fetchWeightHistory, updateUserProfile, updateWeightRecord, WeightHistoryItem } from '@/store/userSlice';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import dayjs from 'dayjs';
|
||||
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { router } from 'expo-router';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
Image,
|
||||
Modal,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
@@ -24,6 +26,7 @@ import {
|
||||
} from 'react-native';
|
||||
|
||||
export default function WeightRecordsPage() {
|
||||
const { t } = useI18n();
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
@@ -37,13 +40,11 @@ export default function WeightRecordsPage() {
|
||||
const colorScheme = useColorScheme();
|
||||
const themeColors = Colors[colorScheme ?? 'light'];
|
||||
|
||||
console.log('userProfile:', userProfile);
|
||||
|
||||
const loadWeightHistory = useCallback(async () => {
|
||||
try {
|
||||
await dispatch(fetchWeightHistory() as any);
|
||||
} catch (error) {
|
||||
console.error('加载体重历史失败:', error);
|
||||
console.error(t('weightRecords.loadingHistory'), error);
|
||||
}
|
||||
}, [dispatch]);
|
||||
|
||||
@@ -51,10 +52,6 @@ export default function WeightRecordsPage() {
|
||||
loadWeightHistory();
|
||||
}, [loadWeightHistory]);
|
||||
|
||||
const handleGoBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
const initializeInput = (weight: number) => {
|
||||
setInputWeight(weight.toString());
|
||||
};
|
||||
@@ -92,15 +89,15 @@ export default function WeightRecordsPage() {
|
||||
await dispatch(deleteWeightRecord(id) as any);
|
||||
await loadWeightHistory();
|
||||
} catch (error) {
|
||||
console.error('删除体重记录失败:', error);
|
||||
Alert.alert('错误', '删除体重记录失败,请重试');
|
||||
console.error(t('weightRecords.alerts.deleteFailed'), error);
|
||||
Alert.alert('错误', t('weightRecords.alerts.deleteFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleWeightSave = async () => {
|
||||
const weight = parseFloat(inputWeight);
|
||||
if (isNaN(weight) || weight <= 0 || weight > 500) {
|
||||
alert('请输入有效的体重值(0-500kg)');
|
||||
alert(t('weightRecords.alerts.invalidWeight'));
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -130,8 +127,8 @@ export default function WeightRecordsPage() {
|
||||
setEditingRecord(null);
|
||||
await loadWeightHistory();
|
||||
} catch (error) {
|
||||
console.error('保存体重失败:', error);
|
||||
Alert.alert('错误', '保存体重失败,请重试');
|
||||
console.error(t('weightRecords.alerts.saveFailed'), error);
|
||||
Alert.alert('错误', t('weightRecords.alerts.saveFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -164,7 +161,11 @@ export default function WeightRecordsPage() {
|
||||
|
||||
// Group by month
|
||||
const groupedHistory = sortedHistory.reduce((acc, item) => {
|
||||
const monthKey = dayjs(item.createdAt).format('YYYY年MM月');
|
||||
const date = dayjs(item.createdAt);
|
||||
const monthKey = t('weightRecords.historyMonthFormat', {
|
||||
year: date.format('YYYY'),
|
||||
month: date.format('MM')
|
||||
});
|
||||
if (!acc[monthKey]) {
|
||||
acc[monthKey] = [];
|
||||
}
|
||||
@@ -181,109 +182,160 @@ export default function WeightRecordsPage() {
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* 背景渐变 */}
|
||||
{/* 背景 */}
|
||||
<LinearGradient
|
||||
colors={['#F0F9FF', '#E0F2FE']}
|
||||
style={styles.gradientBackground}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
colors={['#f3f4fb', '#f3f4fb']}
|
||||
style={StyleSheet.absoluteFillObject}
|
||||
/>
|
||||
{/* 顶部装饰性渐变 */}
|
||||
<LinearGradient
|
||||
colors={['rgba(229, 252, 254, 0.8)', 'rgba(243, 244, 251, 0)']}
|
||||
style={styles.topGradient}
|
||||
start={{ x: 0.5, y: 0 }}
|
||||
end={{ x: 0.5, y: 1 }}
|
||||
/>
|
||||
|
||||
<HeaderBar
|
||||
title="体重记录"
|
||||
right={<TouchableOpacity onPress={handleAddWeight} style={styles.addButton}>
|
||||
<Ionicons name="add" size={24} color="#192126" />
|
||||
</TouchableOpacity>}
|
||||
title={t('weightRecords.title')}
|
||||
right={
|
||||
isLiquidGlassAvailable() ? (
|
||||
<TouchableOpacity
|
||||
onPress={handleAddWeight}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<GlassView
|
||||
style={styles.addButtonGlass}
|
||||
glassEffectStyle="regular"
|
||||
tintColor="rgba(255, 255, 255, 0.4)"
|
||||
isInteractive={true}
|
||||
>
|
||||
<Ionicons name="add" size={24} color="#1c1f3a" />
|
||||
</GlassView>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
style={styles.addButtonFallback}
|
||||
onPress={handleAddWeight}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Ionicons name="add" size={24} color="#1c1f3a" />
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<View style={{
|
||||
paddingTop: safeAreaTop
|
||||
}} />
|
||||
{/* Weight Statistics */}
|
||||
<View style={[styles.statsContainer]}>
|
||||
<View style={styles.statsRow}>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{totalWeightLoss.toFixed(1)}kg</Text>
|
||||
<Text style={styles.statLabel}>累计减重</Text>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{currentWeight.toFixed(1)}kg</Text>
|
||||
<Text style={styles.statLabel}>当前体重</Text>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{initialWeight.toFixed(1)}kg</Text>
|
||||
<View style={styles.statLabelContainer}>
|
||||
<Text style={styles.statLabel}>初始体重</Text>
|
||||
<TouchableOpacity onPress={handleEditInitialWeight} style={styles.editIcon}>
|
||||
<Ionicons name="create-outline" size={14} color="#FF9500" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{targetWeight.toFixed(1)}kg</Text>
|
||||
<View style={styles.statLabelContainer}>
|
||||
<Text style={styles.statLabel}>目标体重</Text>
|
||||
<TouchableOpacity onPress={handleEditTargetWeight} style={styles.editIcon}>
|
||||
<Ionicons name="create-outline" size={14} color="#FF9500" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
style={styles.content}
|
||||
contentContainerStyle={[styles.contentContainer, { paddingBottom: getTabBarBottomPadding() + 20 }]}
|
||||
contentContainerStyle={[styles.contentContainer, { paddingBottom: getTabBarBottomPadding() + 20, paddingTop: safeAreaTop }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View style={styles.headerBlock}>
|
||||
<Text style={styles.pageTitle}>{t('weightRecords.title')}</Text>
|
||||
<Text style={styles.pageSubtitle}>{t('weightRecords.pageSubtitle')}</Text>
|
||||
</View>
|
||||
|
||||
{/* Weight Statistics Cards */}
|
||||
<View style={styles.statsGrid}>
|
||||
{/* Current Weight - Hero Card */}
|
||||
<View style={styles.mainStatCard}>
|
||||
<View style={styles.mainStatContent}>
|
||||
<Text style={styles.mainStatLabel}>{t('weightRecords.stats.currentWeight')}</Text>
|
||||
<View style={styles.mainStatValueContainer}>
|
||||
<Text style={styles.mainStatValue}>{currentWeight.toFixed(1)}</Text>
|
||||
<Text style={styles.mainStatUnit}>kg</Text>
|
||||
</View>
|
||||
<View style={styles.totalLossTag}>
|
||||
<Ionicons name={totalWeightLoss <= 0 ? "trending-down" : "trending-up"} size={16} color="#ffffff" />
|
||||
<Text style={styles.totalLossText}>
|
||||
{totalWeightLoss > 0 ? '+' : ''}{totalWeightLoss.toFixed(1)} kg
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<LinearGradient
|
||||
colors={['#4F5BD5', '#6B6CFF']}
|
||||
style={StyleSheet.absoluteFillObject}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
// @ts-ignore
|
||||
borderRadius={24}
|
||||
/>
|
||||
<Image
|
||||
source={require('@/assets/images/icons/iconWeight.png')}
|
||||
style={styles.statIconBg}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Secondary Stats Row */}
|
||||
<View style={styles.secondaryStatsRow}>
|
||||
{/* Initial Weight */}
|
||||
<TouchableOpacity
|
||||
style={styles.secondaryStatCard}
|
||||
onPress={handleEditInitialWeight}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.secondaryStatHeader}>
|
||||
<Text style={styles.secondaryStatLabel}>{t('weightRecords.stats.initialWeight')}</Text>
|
||||
<Ionicons name="create-outline" size={14} color="#9ba3c7" />
|
||||
</View>
|
||||
<Text style={styles.secondaryStatValue}>{initialWeight.toFixed(1)}<Text style={styles.secondaryStatUnit}>kg</Text></Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Target Weight */}
|
||||
<TouchableOpacity
|
||||
style={styles.secondaryStatCard}
|
||||
onPress={handleEditTargetWeight}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.secondaryStatHeader}>
|
||||
<Text style={styles.secondaryStatLabel}>{t('weightRecords.stats.targetWeight')}</Text>
|
||||
<Ionicons name="create-outline" size={14} color="#9ba3c7" />
|
||||
</View>
|
||||
<Text style={styles.secondaryStatValue}>{targetWeight.toFixed(1)}<Text style={styles.secondaryStatUnit}>kg</Text></Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Monthly Records */}
|
||||
{Object.keys(groupedHistory).length > 0 ? (
|
||||
Object.entries(groupedHistory).map(([month, records]) => (
|
||||
<View key={month} style={styles.monthContainer}>
|
||||
{/* Month Header Card */}
|
||||
{/* <View style={styles.monthHeaderCard}>
|
||||
<View style={styles.monthTitleRow}>
|
||||
<Text style={styles.monthNumber}>
|
||||
{dayjs(month, 'YYYY年MM月').format('MM')}
|
||||
</Text>
|
||||
<Text style={styles.monthText}>月</Text>
|
||||
<Text style={styles.yearText}>
|
||||
{dayjs(month, 'YYYY年MM月').format('YYYY年')}
|
||||
</Text>
|
||||
<View style={styles.expandIcon}>
|
||||
<Ionicons name="chevron-up" size={16} color="#FF9500" />
|
||||
</View>
|
||||
</View>
|
||||
<Text style={styles.monthStatsText}>
|
||||
累计减重:<Text style={styles.statsBold}>{totalWeightLoss.toFixed(1)}kg</Text> 日均减重:<Text style={styles.statsBold}>{avgWeightLoss.toFixed(1)}kg</Text>
|
||||
</Text>
|
||||
</View> */}
|
||||
<View style={styles.historySection}>
|
||||
<Text style={styles.sectionTitle}>{t('weightRecords.history')}</Text>
|
||||
{Object.entries(groupedHistory).map(([month, records]) => (
|
||||
<View key={month} style={styles.monthContainer}>
|
||||
<View style={styles.monthHeader}>
|
||||
<Text style={styles.monthTitle}>{month}</Text>
|
||||
</View>
|
||||
|
||||
{/* Individual Record Cards */}
|
||||
{records.map((record, recordIndex) => {
|
||||
// Calculate weight change from previous record
|
||||
const prevRecord = recordIndex < records.length - 1 ? records[recordIndex + 1] : null;
|
||||
const weightChange = prevRecord ?
|
||||
parseFloat(record.weight) - parseFloat(prevRecord.weight) : 0;
|
||||
{/* Individual Record Cards */}
|
||||
<View style={styles.recordsList}>
|
||||
{records.map((record, recordIndex) => {
|
||||
// Calculate weight change from previous record
|
||||
const prevRecord = recordIndex < records.length - 1 ? records[recordIndex + 1] : null;
|
||||
const weightChange = prevRecord ?
|
||||
parseFloat(record.weight) - parseFloat(prevRecord.weight) : 0;
|
||||
|
||||
return (
|
||||
<WeightRecordCard
|
||||
key={`${record.createdAt}-${recordIndex}`}
|
||||
record={record}
|
||||
onPress={handleEditWeightRecord}
|
||||
onDelete={handleDeleteWeightRecord}
|
||||
weightChange={weightChange}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
))
|
||||
return (
|
||||
<WeightRecordCard
|
||||
key={`${record.createdAt}-${recordIndex}`}
|
||||
record={record}
|
||||
onPress={handleEditWeightRecord}
|
||||
onDelete={handleDeleteWeightRecord}
|
||||
weightChange={weightChange}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.emptyContainer}>
|
||||
<Image
|
||||
source={require('@/assets/images/icons/iconWeight.png')}
|
||||
style={{ width: 80, height: 80, opacity: 0.5, marginBottom: 16, tintColor: '#cbd5e1' }}
|
||||
/>
|
||||
<View style={styles.emptyContent}>
|
||||
<Text style={styles.emptyText}>暂无体重记录</Text>
|
||||
<Text style={styles.emptySubtext}>点击右上角添加按钮开始记录</Text>
|
||||
<Text style={styles.emptyText}>{t('weightRecords.empty.title')}</Text>
|
||||
<Text style={styles.emptySubtext}>{t('weightRecords.empty.subtitle')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
@@ -302,17 +354,20 @@ export default function WeightRecordsPage() {
|
||||
activeOpacity={1}
|
||||
onPress={() => setShowWeightPicker(false)}
|
||||
/>
|
||||
<View style={[styles.modalSheet, { backgroundColor: themeColors.background }]}>
|
||||
<View style={[styles.modalSheet, { backgroundColor: '#ffffff' }]}>
|
||||
{/* Header */}
|
||||
<View style={styles.modalHeader}>
|
||||
<TouchableOpacity onPress={() => setShowWeightPicker(false)}>
|
||||
<Ionicons name="close" size={24} color={themeColors.text} />
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowWeightPicker(false)}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<Ionicons name="close" size={24} color="#1c1f3a" />
|
||||
</TouchableOpacity>
|
||||
<Text style={[styles.modalTitle, { color: themeColors.text }]}>
|
||||
{pickerType === 'current' && '记录体重'}
|
||||
{pickerType === 'initial' && '编辑初始体重'}
|
||||
{pickerType === 'target' && '编辑目标体重'}
|
||||
{pickerType === 'edit' && '编辑体重记录'}
|
||||
<Text style={styles.modalTitle}>
|
||||
{pickerType === 'current' && t('weightRecords.modal.recordWeight')}
|
||||
{pickerType === 'initial' && t('weightRecords.modal.editInitialWeight')}
|
||||
{pickerType === 'target' && t('weightRecords.modal.editTargetWeight')}
|
||||
{pickerType === 'edit' && t('weightRecords.modal.editRecord')}
|
||||
</Text>
|
||||
<View style={{ width: 24 }} />
|
||||
</View>
|
||||
@@ -325,25 +380,26 @@ export default function WeightRecordsPage() {
|
||||
<View style={styles.inputSection}>
|
||||
<View style={styles.weightInputContainer}>
|
||||
<View style={styles.weightIcon}>
|
||||
<Ionicons name="scale-outline" size={20} color="#6366F1" />
|
||||
<Image
|
||||
source={require('@/assets/images/icons/iconWeight.png')}
|
||||
style={{ width: 24, height: 24, tintColor: '#4F5BD5' }}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.inputWrapper}>
|
||||
<Text style={[styles.weightDisplay, { color: inputWeight ? themeColors.text : themeColors.textSecondary }]}>
|
||||
{inputWeight || '输入体重'}
|
||||
<Text style={[
|
||||
styles.weightDisplay,
|
||||
{ color: inputWeight ? '#1c1f3a' : '#9ba3c7' }
|
||||
]}>
|
||||
{inputWeight || t('weightRecords.modal.inputPlaceholder')}
|
||||
</Text>
|
||||
<Text style={[styles.unitLabel, { color: themeColors.textSecondary }]}>kg</Text>
|
||||
<Text style={styles.unitLabel}>{t('weightRecords.modal.unit')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Weight Range Hint */}
|
||||
<Text style={[styles.hintText, { color: themeColors.textSecondary }]}>
|
||||
请输入 0-500 之间的数值,支持小数
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Quick Selection */}
|
||||
<View style={styles.quickSelectionSection}>
|
||||
<Text style={[styles.quickSelectionTitle, { color: themeColors.text }]}>快速选择</Text>
|
||||
<Text style={styles.quickSelectionTitle}>{t('weightRecords.modal.quickSelection')}</Text>
|
||||
<View style={styles.quickButtons}>
|
||||
{[50, 60, 70, 80, 90].map((weight) => (
|
||||
<TouchableOpacity
|
||||
@@ -353,12 +409,13 @@ export default function WeightRecordsPage() {
|
||||
inputWeight === weight.toString() && styles.quickButtonSelected
|
||||
]}
|
||||
onPress={() => setInputWeight(weight.toString())}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={[
|
||||
styles.quickButtonText,
|
||||
inputWeight === weight.toString() && styles.quickButtonTextSelected
|
||||
]}>
|
||||
{weight}kg
|
||||
{weight}{t('weightRecords.modal.unit')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
@@ -385,8 +442,16 @@ export default function WeightRecordsPage() {
|
||||
]}
|
||||
onPress={handleWeightSave}
|
||||
disabled={!inputWeight.trim()}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={styles.saveButtonText}>确定</Text>
|
||||
<LinearGradient
|
||||
colors={['#4F5BD5', '#6B6CFF']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={styles.saveButtonGradient}
|
||||
>
|
||||
<Text style={styles.saveButtonText}>{t('weightRecords.modal.confirm')}</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
@@ -400,143 +465,202 @@ const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
gradientBackground: {
|
||||
topGradient: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingTop: 60,
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
backButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
addButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: 300,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
contentContainer: {
|
||||
flexGrow: 1,
|
||||
paddingBottom: 40,
|
||||
},
|
||||
statsContainer: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
marginBottom: 20,
|
||||
marginLeft: 20,
|
||||
marginRight: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
headerBlock: {
|
||||
paddingHorizontal: 24,
|
||||
marginTop: 10,
|
||||
marginBottom: 24,
|
||||
},
|
||||
statsRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
statItem: {
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
},
|
||||
statValue: {
|
||||
fontSize: 16,
|
||||
pageTitle: {
|
||||
fontSize: 28,
|
||||
fontWeight: '800',
|
||||
color: '#192126',
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
marginBottom: 4,
|
||||
},
|
||||
statLabelContainer: {
|
||||
flexDirection: 'row',
|
||||
pageSubtitle: {
|
||||
fontSize: 16,
|
||||
color: '#6f7ba7',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
// Add Button Styles
|
||||
addButtonGlass: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 20,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 12,
|
||||
color: '#687076',
|
||||
marginRight: 4,
|
||||
addButtonFallback: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#ffffff',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(0,0,0,0.05)',
|
||||
},
|
||||
editIcon: {
|
||||
padding: 2,
|
||||
borderRadius: 8,
|
||||
backgroundColor: 'rgba(255, 149, 0, 0.1)',
|
||||
|
||||
// Stats Grid
|
||||
statsGrid: {
|
||||
paddingHorizontal: 24,
|
||||
marginBottom: 32,
|
||||
gap: 16,
|
||||
},
|
||||
monthContainer: {
|
||||
marginBottom: 20,
|
||||
mainStatCard: {
|
||||
backgroundColor: '#4F5BD5',
|
||||
borderRadius: 28,
|
||||
padding: 24,
|
||||
height: 160,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#4F5BD5',
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 16,
|
||||
elevation: 8,
|
||||
},
|
||||
monthHeaderCard: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
marginBottom: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.08,
|
||||
mainStatContent: {
|
||||
zIndex: 2,
|
||||
height: '100%',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
mainStatLabel: {
|
||||
fontSize: 16,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
mainStatValueContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'baseline',
|
||||
},
|
||||
mainStatValue: {
|
||||
fontSize: 48,
|
||||
fontWeight: '800',
|
||||
color: '#ffffff',
|
||||
fontFamily: 'AliBold',
|
||||
marginRight: 8,
|
||||
},
|
||||
mainStatUnit: {
|
||||
fontSize: 20,
|
||||
fontWeight: '600',
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
totalLossTag: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 12,
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
totalLossText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#ffffff',
|
||||
marginLeft: 4,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
statIconBg: {
|
||||
position: 'absolute',
|
||||
right: -20,
|
||||
bottom: -20,
|
||||
width: 140,
|
||||
height: 140,
|
||||
opacity: 0.2,
|
||||
transform: [{ rotate: '-15deg' }],
|
||||
tintColor: '#ffffff'
|
||||
},
|
||||
secondaryStatsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 16,
|
||||
},
|
||||
secondaryStatCard: {
|
||||
flex: 1,
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 24,
|
||||
padding: 16,
|
||||
shadowColor: 'rgba(30, 41, 59, 0.06)',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 12,
|
||||
elevation: 3,
|
||||
},
|
||||
monthTitleRow: {
|
||||
secondaryStatHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'baseline',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
monthNumber: {
|
||||
fontSize: 48,
|
||||
fontWeight: '800',
|
||||
color: '#192126',
|
||||
lineHeight: 48,
|
||||
secondaryStatLabel: {
|
||||
fontSize: 13,
|
||||
color: '#6f7ba7',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
monthText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
marginLeft: 4,
|
||||
marginRight: 8,
|
||||
},
|
||||
yearText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
color: '#687076',
|
||||
flex: 1,
|
||||
},
|
||||
expandIcon: {
|
||||
padding: 4,
|
||||
},
|
||||
monthStatsText: {
|
||||
fontSize: 14,
|
||||
color: '#687076',
|
||||
lineHeight: 20,
|
||||
},
|
||||
statsBold: {
|
||||
secondaryStatValue: {
|
||||
fontSize: 20,
|
||||
fontWeight: '700',
|
||||
color: '#192126',
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
secondaryStatUnit: {
|
||||
fontSize: 14,
|
||||
color: '#6f7ba7',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliRegular',
|
||||
marginLeft: 2,
|
||||
},
|
||||
|
||||
// History Section
|
||||
historySection: {
|
||||
paddingHorizontal: 24,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#1c1f3a',
|
||||
marginBottom: 16,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
monthContainer: {
|
||||
marginBottom: 24,
|
||||
},
|
||||
monthHeader: {
|
||||
marginBottom: 12,
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
monthTitle: {
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
color: '#6f7ba7',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
recordsList: {
|
||||
gap: 12,
|
||||
},
|
||||
|
||||
emptyContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: 300,
|
||||
paddingVertical: 60,
|
||||
},
|
||||
emptyContent: {
|
||||
alignItems: 'center',
|
||||
@@ -544,145 +668,161 @@ const styles = StyleSheet.create({
|
||||
emptyText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#192126',
|
||||
color: '#1c1f3a',
|
||||
marginBottom: 8,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
emptySubtext: {
|
||||
fontSize: 14,
|
||||
color: '#687076',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
// Modal Styles
|
||||
|
||||
// Modal Styles (Retain but refined)
|
||||
modalContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
modalBackdrop: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
},
|
||||
modalSheet: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
borderTopLeftRadius: 32,
|
||||
borderTopRightRadius: 32,
|
||||
maxHeight: '85%',
|
||||
minHeight: 500,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: -4 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 12,
|
||||
elevation: 10,
|
||||
},
|
||||
modalHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 20,
|
||||
paddingBottom: 10,
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 24,
|
||||
paddingBottom: 16,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
modalContent: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 20,
|
||||
paddingHorizontal: 24,
|
||||
},
|
||||
inputSection: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
backgroundColor: '#F8F9FC',
|
||||
borderRadius: 24,
|
||||
padding: 24,
|
||||
marginBottom: 24,
|
||||
marginTop: 8,
|
||||
},
|
||||
weightInputContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 8,
|
||||
},
|
||||
weightIcon: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#F0F9FF',
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
backgroundColor: '#EEF0FF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
marginRight: 16,
|
||||
},
|
||||
inputWrapper: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
alignItems: 'baseline',
|
||||
borderBottomWidth: 2,
|
||||
borderBottomColor: '#E5E7EB',
|
||||
paddingBottom: 6,
|
||||
borderBottomColor: '#E2E8F0',
|
||||
paddingBottom: 8,
|
||||
},
|
||||
weightDisplay: {
|
||||
flex: 1,
|
||||
fontSize: 24,
|
||||
fontWeight: '600',
|
||||
fontSize: 36,
|
||||
fontWeight: '700',
|
||||
textAlign: 'center',
|
||||
paddingVertical: 4,
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
unitLabel: {
|
||||
fontSize: 18,
|
||||
fontWeight: '500',
|
||||
fontWeight: '600',
|
||||
color: '#6f7ba7',
|
||||
marginLeft: 8,
|
||||
},
|
||||
hintText: {
|
||||
fontSize: 12,
|
||||
textAlign: 'center',
|
||||
marginTop: 4,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
quickSelectionSection: {
|
||||
paddingHorizontal: 4,
|
||||
marginBottom: 20,
|
||||
marginBottom: 24,
|
||||
},
|
||||
quickSelectionTitle: {
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#6f7ba7',
|
||||
marginBottom: 12,
|
||||
textAlign: 'center',
|
||||
fontFamily: 'AliRegular',
|
||||
marginLeft: 4,
|
||||
},
|
||||
quickButtons: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
quickButton: {
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 18,
|
||||
backgroundColor: '#F3F4F6',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
minWidth: 60,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#F1F5F9',
|
||||
minWidth: 64,
|
||||
alignItems: 'center',
|
||||
},
|
||||
quickButtonSelected: {
|
||||
backgroundColor: '#6366F1',
|
||||
borderColor: '#6366F1',
|
||||
backgroundColor: '#4F5BD5',
|
||||
},
|
||||
quickButtonText: {
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
color: '#6B7280',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#64748B',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
quickButtonTextSelected: {
|
||||
color: '#FFFFFF',
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
},
|
||||
modalFooter: {
|
||||
paddingHorizontal: 20,
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 16,
|
||||
paddingBottom: 25,
|
||||
paddingBottom: 34,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#F1F5F9',
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: '#6366F1',
|
||||
borderRadius: 16,
|
||||
borderRadius: 24,
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#4F5BD5',
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 12,
|
||||
elevation: 8,
|
||||
},
|
||||
saveButtonGradient: {
|
||||
paddingVertical: 16,
|
||||
alignItems: 'center',
|
||||
},
|
||||
saveButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
});
|
||||
@@ -3,6 +3,7 @@ import { useFocusEffect } from '@react-navigation/native';
|
||||
import dayjs from 'dayjs';
|
||||
import isBetween from 'dayjs/plugin/isBetween';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useLocalSearchParams } from 'expo-router';
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
@@ -16,6 +17,7 @@ import {
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { IntensityBadge, WorkoutDetailModal } from '@/components/workout/WorkoutDetailModal';
|
||||
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||||
import { getWorkoutDetailMetrics, WorkoutDetailMetrics } from '@/services/workoutDetail';
|
||||
import {
|
||||
@@ -233,23 +235,23 @@ function computeMonthlyStats(workouts: WorkoutData[]): MonthlyStatsInfo | null {
|
||||
};
|
||||
}
|
||||
|
||||
function getIntensityBadge(totalCalories?: number, durationInSeconds?: number) {
|
||||
function getIntensityBadge(t: (key: string, options?: any) => string, totalCalories?: number, durationInSeconds?: number): { label: string; color: string; background: string } {
|
||||
if (!totalCalories || !durationInSeconds) {
|
||||
return { label: '低强度', color: '#7C85A3', background: '#E4E7F2' };
|
||||
return { label: t('workoutHistory.intensity.low'), color: '#7C85A3', background: '#E4E7F2' };
|
||||
}
|
||||
|
||||
const minutes = Math.max(durationInSeconds / 60, 1);
|
||||
const caloriesPerMinute = totalCalories / minutes;
|
||||
|
||||
if (caloriesPerMinute >= 9) {
|
||||
return { label: '高强度', color: '#F85959', background: '#FFE6E6' };
|
||||
return { label: t('workoutHistory.intensity.high'), color: '#F85959', background: '#FFE6E6' };
|
||||
}
|
||||
|
||||
if (caloriesPerMinute >= 5) {
|
||||
return { label: '中强度', color: '#0EAF71', background: '#E4F6EF' };
|
||||
return { label: t('workoutHistory.intensity.medium'), color: '#0EAF71', background: '#E4F6EF' };
|
||||
}
|
||||
|
||||
return { label: '低强度', color: '#5966FF', background: '#E7EBFF' };
|
||||
return { label: t('workoutHistory.intensity.low'), color: '#5966FF', background: '#E7EBFF' };
|
||||
}
|
||||
|
||||
function groupWorkouts(workouts: WorkoutData[]): WorkoutSection[] {
|
||||
@@ -265,13 +267,15 @@ function groupWorkouts(workouts: WorkoutData[]): WorkoutSection[] {
|
||||
return Object.keys(grouped)
|
||||
.sort((a, b) => dayjs(b).valueOf() - dayjs(a).valueOf())
|
||||
.map((dateKey) => ({
|
||||
title: dayjs(dateKey).format('M月D日'),
|
||||
title: dayjs(dateKey).format('M月D日'), // 保持中文格式,因为这是日期格式
|
||||
data: grouped[dateKey]
|
||||
.sort((a, b) => dayjs(b.startDate || b.endDate).valueOf() - dayjs(a.startDate || a.endDate).valueOf()),
|
||||
}));
|
||||
}
|
||||
|
||||
export default function WorkoutHistoryScreen() {
|
||||
const { t } = useI18n();
|
||||
const { workoutId: workoutIdParam } = useLocalSearchParams<{ workoutId?: string | string[] }>();
|
||||
const [sections, setSections] = useState<WorkoutSection[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -283,8 +287,19 @@ export default function WorkoutHistoryScreen() {
|
||||
const [selectedIntensity, setSelectedIntensity] = useState<IntensityBadge | null>(null);
|
||||
const [monthOccurrenceText, setMonthOccurrenceText] = useState<string | null>(null);
|
||||
const [monthlyStats, setMonthlyStats] = useState<MonthlyStatsInfo | null>(null);
|
||||
const [pendingWorkoutId, setPendingWorkoutId] = useState<string | null>(null);
|
||||
|
||||
const safeAreaTop = useSafeAreaTop()
|
||||
const safeAreaTop = useSafeAreaTop();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!workoutIdParam) {
|
||||
return;
|
||||
}
|
||||
const idParam = Array.isArray(workoutIdParam) ? workoutIdParam[0] : workoutIdParam;
|
||||
if (idParam) {
|
||||
setPendingWorkoutId(idParam);
|
||||
}
|
||||
}, [workoutIdParam]);
|
||||
|
||||
const loadHistory = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
@@ -302,7 +317,7 @@ export default function WorkoutHistoryScreen() {
|
||||
|
||||
if (!hasPermission) {
|
||||
setSections([]);
|
||||
setError('尚未授予健康数据权限');
|
||||
setError(t('workoutHistory.error.permissionDenied'));
|
||||
setMonthlyStats(null);
|
||||
return;
|
||||
}
|
||||
@@ -315,8 +330,8 @@ export default function WorkoutHistoryScreen() {
|
||||
setMonthlyStats(computeMonthlyStats(filteredWorkouts));
|
||||
setSections(groupWorkouts(filteredWorkouts));
|
||||
} catch (err) {
|
||||
console.error('加载锻炼历史失败:', err);
|
||||
setError('加载锻炼记录失败,请稍后再试');
|
||||
console.error('Failed to load workout history:', err);
|
||||
setError(t('workoutHistory.error.loadFailed'));
|
||||
setSections([]);
|
||||
setMonthlyStats(null);
|
||||
} finally {
|
||||
@@ -350,9 +365,9 @@ export default function WorkoutHistoryScreen() {
|
||||
? dayjs(monthlyStats.snapshotDate).format('M月D日')
|
||||
: dayjs().format('M月D日');
|
||||
const overviewText = monthlyStats
|
||||
? `截至${snapshotLabel},你已完成${monthlyStats.totalCount}次锻炼,累计${formatDurationShort(monthlyStats.totalDuration)}。`
|
||||
: '本月还没有锻炼记录,动起来收集第一条吧!';
|
||||
const periodText = `统计周期:1日 - ${monthEndDay}日(本月)`;
|
||||
? t('workoutHistory.monthlyStats.overviewWithStats', { date: snapshotLabel, count: monthlyStats.totalCount, duration: formatDurationShort(monthlyStats.totalDuration) })
|
||||
: t('workoutHistory.monthlyStats.overviewEmpty');
|
||||
const periodText = t('workoutHistory.monthlyStats.periodText', { day: monthEndDay });
|
||||
const maxDuration = statsItems[0]?.duration || 1;
|
||||
|
||||
return (
|
||||
@@ -369,7 +384,7 @@ export default function WorkoutHistoryScreen() {
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.monthlyStatsCard}
|
||||
>
|
||||
<Text style={styles.statSectionLabel}>锻炼时间</Text>
|
||||
<Text style={styles.statSectionLabel}>{t('workoutHistory.monthlyStats.title')}</Text>
|
||||
<Text style={styles.statPeriodText}>{periodText}</Text>
|
||||
<Text style={styles.statDescription}>{overviewText}</Text>
|
||||
|
||||
@@ -403,7 +418,7 @@ export default function WorkoutHistoryScreen() {
|
||||
) : (
|
||||
<View style={styles.statEmptyState}>
|
||||
<MaterialCommunityIcons name="calendar-blank" size={20} color="#7C85A3" />
|
||||
<Text style={styles.statEmptyText}>本月还没有锻炼数据</Text>
|
||||
<Text style={styles.statEmptyText}>{t('workoutHistory.monthlyStats.emptyData')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</LinearGradient>
|
||||
@@ -416,8 +431,8 @@ export default function WorkoutHistoryScreen() {
|
||||
const emptyComponent = useMemo(() => (
|
||||
<View style={styles.emptyContainer}>
|
||||
<MaterialCommunityIcons name="calendar-blank" size={40} color="#9AA4C4" />
|
||||
<Text style={styles.emptyText}>暂无锻炼记录</Text>
|
||||
<Text style={styles.emptySubText}>完成一次锻炼后即可在此查看详细历史</Text>
|
||||
<Text style={styles.emptyText}>{t('workoutHistory.empty.title')}</Text>
|
||||
<Text style={styles.emptySubText}>{t('workoutHistory.empty.subtitle')}</Text>
|
||||
</View>
|
||||
), []);
|
||||
|
||||
@@ -453,7 +468,7 @@ export default function WorkoutHistoryScreen() {
|
||||
}
|
||||
|
||||
const activityLabel = getWorkoutTypeDisplayName(workout.workoutActivityType);
|
||||
return `这是你${workoutDate.format('M月')}的第 ${index + 1} 次${activityLabel}。`;
|
||||
return t('workoutHistory.monthOccurrence', { month: workoutDate.format('M月'), index: index + 1, activity: activityLabel });
|
||||
}, [sections]);
|
||||
|
||||
const loadWorkoutDetail = useCallback(async (workout: WorkoutData) => {
|
||||
@@ -463,16 +478,16 @@ export default function WorkoutHistoryScreen() {
|
||||
const metrics = await getWorkoutDetailMetrics(workout);
|
||||
setDetailMetrics(metrics);
|
||||
} catch (err) {
|
||||
console.error('加载锻炼详情失败:', err);
|
||||
console.error('Failed to load workout details:', err);
|
||||
setDetailMetrics(null);
|
||||
setDetailError('加载锻炼详情失败,请稍后再试');
|
||||
setDetailError(t('workoutHistory.error.detailLoadFailed'));
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleWorkoutPress = useCallback((workout: WorkoutData) => {
|
||||
const intensity = getIntensityBadge(workout.totalEnergyBurned, workout.duration || 0);
|
||||
const intensity = getIntensityBadge(t, workout.totalEnergyBurned, workout.duration || 0);
|
||||
setSelectedIntensity(intensity);
|
||||
setSelectedWorkout(workout);
|
||||
setDetailMetrics(null);
|
||||
@@ -482,6 +497,22 @@ export default function WorkoutHistoryScreen() {
|
||||
loadWorkoutDetail(workout);
|
||||
}, [computeMonthlyOccurrenceText, loadWorkoutDetail]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!pendingWorkoutId || isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
const allWorkouts = sections.flatMap((section) => section.data);
|
||||
const targetWorkout = allWorkouts.find((workout) => workout.id === pendingWorkoutId);
|
||||
|
||||
if (targetWorkout) {
|
||||
handleWorkoutPress(targetWorkout);
|
||||
}
|
||||
|
||||
// 清理待处理状态,避免重复触发
|
||||
setPendingWorkoutId(null);
|
||||
}, [pendingWorkoutId, isLoading, sections, handleWorkoutPress]);
|
||||
|
||||
const handleRetryDetail = useCallback(() => {
|
||||
if (selectedWorkout) {
|
||||
loadWorkoutDetail(selectedWorkout);
|
||||
@@ -495,7 +526,7 @@ export default function WorkoutHistoryScreen() {
|
||||
const renderItem = useCallback(({ item }: { item: WorkoutData }) => {
|
||||
const calories = Math.round(item.totalEnergyBurned || 0);
|
||||
const minutes = Math.max(Math.round((item.duration || 0) / 60), 1);
|
||||
const intensity = getIntensityBadge(item.totalEnergyBurned, item.duration || 0);
|
||||
const intensity = getIntensityBadge(t, item.totalEnergyBurned, item.duration || 0);
|
||||
const iconName = ICON_MAP[item.workoutActivityType as WorkoutActivityType] || 'arm-flex';
|
||||
const time = dayjs(item.startDate || item.endDate).format('HH:mm');
|
||||
const activityLabel = getWorkoutTypeDisplayName(item.workoutActivityType);
|
||||
@@ -512,12 +543,12 @@ export default function WorkoutHistoryScreen() {
|
||||
|
||||
<View style={styles.cardContent}>
|
||||
<View style={styles.cardTitleRow}>
|
||||
<Text style={styles.cardTitle}>{calories}千卡 · {minutes}分钟</Text>
|
||||
<Text style={styles.cardTitle}>{t('workoutHistory.historyCard.calories', { calories, minutes })}</Text>
|
||||
<View style={[styles.intensityBadge, { backgroundColor: intensity.background }]}>
|
||||
<Text style={[styles.intensityText, { color: intensity.color }]}>{intensity.label}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={styles.cardSubtitle}>{activityLabel},{time}</Text>
|
||||
<Text style={styles.cardSubtitle}>{t('workoutHistory.historyCard.activityTime', { activity: activityLabel, time })}</Text>
|
||||
</View>
|
||||
|
||||
{/* <Ionicons name="chevron-forward" size={20} color="#9AA4C4" /> */}
|
||||
@@ -535,11 +566,11 @@ export default function WorkoutHistoryScreen() {
|
||||
colors={["#F3F5FF", "#FFFFFF"]}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<HeaderBar title="锻炼总结" variant="minimal" transparent={true} />
|
||||
<HeaderBar title={t('workoutHistory.title')} variant="minimal" transparent={true} />
|
||||
{isLoading ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#5C55FF" />
|
||||
<Text style={styles.loadingText}>正在加载锻炼记录...</Text>
|
||||
<Text style={styles.loadingText}>{t('workoutHistory.loading')}</Text>
|
||||
</View>
|
||||
) : (
|
||||
<SectionList
|
||||
@@ -556,7 +587,7 @@ export default function WorkoutHistoryScreen() {
|
||||
<MaterialCommunityIcons name="alert-circle" size={40} color="#F85959" />
|
||||
<Text style={[styles.emptyText, { color: '#F85959' }]}>{error}</Text>
|
||||
<TouchableOpacity style={styles.retryButton} onPress={loadHistory}>
|
||||
<Text style={styles.retryText}>重试</Text>
|
||||
<Text style={styles.retryText}>{t('workoutHistory.retry')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : emptyComponent}
|
||||
|
||||
BIN
assets/images/medicine/medicine-ai-summary.png
Normal file
BIN
assets/images/medicine/medicine-ai-summary.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
@@ -242,6 +242,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
color: '#0F172A',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
titleIcon: {
|
||||
width: 16,
|
||||
@@ -256,6 +257,7 @@ const styles = StyleSheet.create({
|
||||
statusText: {
|
||||
fontSize: 11,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
valueSection: {
|
||||
flexDirection: 'row',
|
||||
@@ -267,10 +269,12 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '600',
|
||||
color: '#0F172A',
|
||||
lineHeight: 28,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
unit: {
|
||||
fontSize: 12,
|
||||
color: '#64748B',
|
||||
marginLeft: 6,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useThemeColor } from '@/hooks/useThemeColor';
|
||||
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Animated, StyleSheet, View } from 'react-native';
|
||||
import Svg, { Circle } from 'react-native-svg';
|
||||
import Svg, { Circle, Defs, Stop, LinearGradient as SvgLinearGradient } from 'react-native-svg';
|
||||
|
||||
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
|
||||
|
||||
@@ -26,12 +26,8 @@ export function CalorieRingChart({
|
||||
protein,
|
||||
fat,
|
||||
carbs,
|
||||
proteinGoal,
|
||||
fatGoal,
|
||||
carbsGoal,
|
||||
|
||||
}: CalorieRingChartProps) {
|
||||
const surfaceColor = useThemeColor({}, 'surface');
|
||||
const { t } = useI18n();
|
||||
const textColor = useThemeColor({}, 'text');
|
||||
const textSecondaryColor = useThemeColor({}, 'textSecondary');
|
||||
|
||||
@@ -46,9 +42,9 @@ export function CalorieRingChart({
|
||||
const totalAvailable = metabolism + exercise;
|
||||
const progressPercentage = totalAvailable > 0 ? Math.min((consumed / totalAvailable) * 100, 100) : 0;
|
||||
|
||||
// 圆环参数 - 减小尺寸以优化空间占用
|
||||
const radius = 48;
|
||||
const strokeWidth = 8; // 增加圆环厚度
|
||||
// 圆环参数 - 缩小尺寸
|
||||
const radius = 42;
|
||||
const strokeWidth = 8;
|
||||
const center = radius + strokeWidth;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const strokeDasharray = circumference;
|
||||
@@ -70,34 +66,32 @@ export function CalorieRingChart({
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: surfaceColor }]}>
|
||||
{/* 左上角公式展示 */}
|
||||
<View style={styles.formulaContainer}>
|
||||
<ThemedText style={[styles.formulaText, { color: textSecondaryColor }]}>
|
||||
还能吃 = 代谢 + 运动 - 饮食
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
{/* 主要内容区域 */}
|
||||
<View style={styles.container}>
|
||||
<View style={styles.mainContent}>
|
||||
{/* 左侧圆环图 */}
|
||||
<View style={styles.chartContainer}>
|
||||
<Svg width={center * 2} height={center * 2}>
|
||||
<Defs>
|
||||
<SvgLinearGradient id="progressGradient" x1="0" y1="0" x2="1" y2="1">
|
||||
<Stop offset="0" stopColor={progressPercentage > 80 ? "#FF9966" : "#4facfe"} stopOpacity="1" />
|
||||
<Stop offset="1" stopColor={progressPercentage > 80 ? "#FF5E62" : "#00f2fe"} stopOpacity="1" />
|
||||
</SvgLinearGradient>
|
||||
</Defs>
|
||||
{/* 背景圆环 */}
|
||||
<Circle
|
||||
cx={center}
|
||||
cy={center}
|
||||
r={radius}
|
||||
stroke="#F0F0F0"
|
||||
stroke="#F5F7FA"
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
/>
|
||||
{/* 进度圆环 - 保持固定颜色 */}
|
||||
{/* 进度圆环 */}
|
||||
<AnimatedCircle
|
||||
cx={center}
|
||||
cy={center}
|
||||
r={radius}
|
||||
stroke={progressPercentage > 80 ? "#FF6B6B" : "#4ECDC4"}
|
||||
stroke="url(#progressGradient)"
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
strokeDasharray={`${strokeDasharray}`}
|
||||
@@ -109,68 +103,68 @@ export function CalorieRingChart({
|
||||
|
||||
{/* 中心内容 */}
|
||||
<View style={styles.centerContent}>
|
||||
<ThemedText style={[styles.centerLabel, { color: textSecondaryColor }]}>
|
||||
还能吃
|
||||
<ThemedText style={styles.centerLabel}>
|
||||
{t('nutritionRecords.chart.remaining')}
|
||||
</ThemedText>
|
||||
<ThemedText style={[styles.centerValue, { color: textColor }]}>
|
||||
{Math.round(canEat)}千卡
|
||||
<ThemedText style={styles.centerValue}>
|
||||
{Math.round(canEat)}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.centerUnit}>
|
||||
{t('nutritionRecords.nutrients.caloriesUnit')}
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 右侧数据展示 */}
|
||||
{/* 右侧数据展示 - 优化布局 */}
|
||||
<View style={styles.dataContainer}>
|
||||
<View style={styles.dataBackground}>
|
||||
{/* 左右两列布局 */}
|
||||
<View style={styles.dataColumns}>
|
||||
{/* 左列:卡路里数据 */}
|
||||
<View style={styles.dataColumn}>
|
||||
<View style={styles.dataItem}>
|
||||
<ThemedText style={[styles.dataLabel, { color: textSecondaryColor }]}>代谢</ThemedText>
|
||||
<ThemedText style={[styles.dataValue, { color: textColor }]}>
|
||||
{Math.round(metabolism)}千卡
|
||||
</ThemedText>
|
||||
</View>
|
||||
{/* 公式 */}
|
||||
<View style={styles.formulaContainer}>
|
||||
<ThemedText style={styles.formulaText}>
|
||||
{t('nutritionRecords.chart.formula')}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.dataItem}>
|
||||
<ThemedText style={[styles.dataLabel, { color: textSecondaryColor }]}>运动</ThemedText>
|
||||
<ThemedText style={[styles.dataValue, { color: textColor }]}>
|
||||
{Math.round(exercise)}千卡
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.dataItem}>
|
||||
<ThemedText style={[styles.dataLabel, { color: textSecondaryColor }]}>饮食</ThemedText>
|
||||
<ThemedText style={[styles.dataValue, { color: textColor }]}>
|
||||
{Math.round(consumed)}千卡
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 右列:营养数据 */}
|
||||
<View style={styles.dataColumn}>
|
||||
<View style={styles.dataItem}>
|
||||
<ThemedText style={[styles.dataLabel, { color: textSecondaryColor }]}>蛋白质</ThemedText>
|
||||
<ThemedText style={[styles.dataValue, { color: textColor }]}>
|
||||
{Math.round(protein)}g
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.dataItem}>
|
||||
<ThemedText style={[styles.dataLabel, { color: textSecondaryColor }]}>脂肪</ThemedText>
|
||||
<ThemedText style={[styles.dataValue, { color: textColor }]}>
|
||||
{Math.round(fat)}g
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.dataItem}>
|
||||
<ThemedText style={[styles.dataLabel, { color: textSecondaryColor }]}>碳水</ThemedText>
|
||||
<ThemedText style={[styles.dataValue, { color: textColor }]}>
|
||||
{Math.round(carbs)}g
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
{/* 代谢 & 运动 & 饮食 */}
|
||||
<View style={styles.statsGroup}>
|
||||
<View style={styles.statRowCompact}>
|
||||
<View style={styles.labelWithDot}>
|
||||
<View style={styles.dotMetabolism} />
|
||||
<ThemedText style={styles.statLabel}>{t('nutritionRecords.chart.metabolism')}</ThemedText>
|
||||
</View>
|
||||
<ThemedText style={styles.statValue}>{Math.round(metabolism)}</ThemedText>
|
||||
</View>
|
||||
<View style={styles.statRowCompact}>
|
||||
<View style={styles.labelWithDot}>
|
||||
<View style={styles.dotExercise} />
|
||||
<ThemedText style={styles.statLabel}>{t('nutritionRecords.chart.exercise')}</ThemedText>
|
||||
</View>
|
||||
<ThemedText style={styles.statValue}>{Math.round(exercise)}</ThemedText>
|
||||
</View>
|
||||
<View style={styles.statRowCompact}>
|
||||
<View style={styles.labelWithDot}>
|
||||
<View style={styles.dotConsumed} />
|
||||
<ThemedText style={styles.statLabel}>{t('nutritionRecords.chart.diet')}</ThemedText>
|
||||
</View>
|
||||
<ThemedText style={styles.statValue}>{Math.round(consumed)}</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
{/* 营养素 - 水平排布 */}
|
||||
<View style={styles.nutritionRow}>
|
||||
<View style={styles.nutritionItem}>
|
||||
<ThemedText style={styles.statValueSmall}>{Math.round(protein)}{t('nutritionRecords.nutrients.unit')}</ThemedText>
|
||||
<ThemedText style={styles.statLabelSmall}>{t('nutritionRecords.nutrients.protein')}</ThemedText>
|
||||
</View>
|
||||
<View style={styles.nutritionItem}>
|
||||
<ThemedText style={styles.statValueSmall}>{Math.round(fat)}{t('nutritionRecords.nutrients.unit')}</ThemedText>
|
||||
<ThemedText style={styles.statLabelSmall}>{t('nutritionRecords.nutrients.fat')}</ThemedText>
|
||||
</View>
|
||||
<View style={styles.nutritionItem}>
|
||||
<ThemedText style={styles.statValueSmall}>{Math.round(carbs)}{t('nutritionRecords.nutrients.unit')}</ThemedText>
|
||||
<ThemedText style={styles.statLabelSmall}>{t('nutritionRecords.nutrients.carbs')}</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@@ -181,40 +175,35 @@ export function CalorieRingChart({
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
borderRadius: 24,
|
||||
padding: 16,
|
||||
marginHorizontal: 16,
|
||||
marginBottom: 8,
|
||||
shadowColor: '#000000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.04,
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
marginHorizontal: 20,
|
||||
shadowColor: 'rgba(30, 41, 59, 0.08)',
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 16,
|
||||
elevation: 6,
|
||||
},
|
||||
formulaContainer: {
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: 12,
|
||||
},
|
||||
formulaText: {
|
||||
fontSize: 12,
|
||||
fontSize: 10,
|
||||
fontWeight: '500',
|
||||
color: '#999999',
|
||||
lineHeight: 16,
|
||||
color: '#94A3B8',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
mainContent: {
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 0, // 移除底部间距,因为不再有底部营养容器
|
||||
paddingHorizontal: 8,
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
chartContainer: {
|
||||
position: 'relative',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: 112, // 减少宽度以匹配更小的圆环 (48*2 + 8*2)
|
||||
flexShrink: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
marginTop: 8,
|
||||
},
|
||||
centerContent: {
|
||||
position: 'absolute',
|
||||
@@ -222,71 +211,95 @@ const styles = StyleSheet.create({
|
||||
justifyContent: 'center',
|
||||
},
|
||||
centerLabel: {
|
||||
fontSize: 11,
|
||||
fontSize: 10,
|
||||
fontWeight: '500',
|
||||
color: '#999999',
|
||||
marginBottom: 2,
|
||||
color: '#94A3B8',
|
||||
marginBottom: 1,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
centerValue: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#333333',
|
||||
marginBottom: 1,
|
||||
fontSize: 20,
|
||||
fontWeight: '800',
|
||||
color: '#1E293B',
|
||||
lineHeight: 24,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
centerPercentage: {
|
||||
fontSize: 11,
|
||||
fontWeight: '500',
|
||||
color: '#999999',
|
||||
centerUnit: {
|
||||
fontSize: 10,
|
||||
fontWeight: '600',
|
||||
color: '#64748B',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
dataContainer: {
|
||||
flex: 1,
|
||||
marginLeft: 16,
|
||||
marginLeft: 20,
|
||||
},
|
||||
dataBackground: {
|
||||
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)',
|
||||
gap: 4,
|
||||
statsGroup: {
|
||||
gap: 6,
|
||||
},
|
||||
dataItem: {
|
||||
statRowCompact: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
dataIcon: {
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
labelWithDot: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
dataLabel: {
|
||||
fontSize: 11,
|
||||
fontWeight: '500',
|
||||
color: '#999999',
|
||||
minWidth: 28,
|
||||
dotMetabolism: {
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
backgroundColor: '#94A3B8',
|
||||
marginRight: 6,
|
||||
},
|
||||
dataValue: {
|
||||
fontSize: 11,
|
||||
dotExercise: {
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
backgroundColor: '#4facfe',
|
||||
marginRight: 6,
|
||||
},
|
||||
dotConsumed: {
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
backgroundColor: '#FF9966',
|
||||
marginRight: 6,
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 12,
|
||||
color: '#64748B',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
statValue: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
color: '#333333',
|
||||
color: '#334155',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
dataColumns: {
|
||||
divider: {
|
||||
height: 1,
|
||||
backgroundColor: '#F1F5F9',
|
||||
marginVertical: 10,
|
||||
},
|
||||
nutritionRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
gap: 12,
|
||||
},
|
||||
dataColumn: {
|
||||
flex: 1,
|
||||
gap: 4,
|
||||
nutritionItem: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
statLabelSmall: {
|
||||
fontSize: 10,
|
||||
color: '#94A3B8',
|
||||
marginTop: 2,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
statValueSmall: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
color: '#475569',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
});
|
||||
@@ -1,4 +1,5 @@
|
||||
import { getMonthDaysZh, getMonthTitleZh, getTodayIndexInMonth } from '@/utils/date';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { getMonthDays, getMonthTitle, getTodayIndexInMonth } from '@/utils/date';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import DateTimePicker from '@react-native-community/datetimepicker';
|
||||
import dayjs from 'dayjs';
|
||||
@@ -50,6 +51,8 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
|
||||
autoScrollToSelected = true,
|
||||
showCalendarIcon = true,
|
||||
}) => {
|
||||
const { t, i18n } = useI18n();
|
||||
|
||||
// 内部状态管理
|
||||
const [internalSelectedIndex, setInternalSelectedIndex] = useState(getTodayIndexInMonth());
|
||||
const [currentMonth, setCurrentMonth] = useState(dayjs()); // 当前显示的月份
|
||||
@@ -59,8 +62,8 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
|
||||
const isGlassAvailable = isLiquidGlassAvailable();
|
||||
|
||||
// 获取日期数据
|
||||
const days = getMonthDaysZh(currentMonth);
|
||||
const monthTitle = externalMonthTitle ?? getMonthTitleZh(currentMonth);
|
||||
const days = getMonthDays(currentMonth, i18n.language as 'zh' | 'en');
|
||||
const monthTitle = externalMonthTitle ?? getMonthTitle(currentMonth, i18n.language as 'zh' | 'en');
|
||||
|
||||
// 判断当前选中的日期是否是今天
|
||||
const isSelectedDateToday = () => {
|
||||
@@ -201,7 +204,7 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
|
||||
setCurrentMonth(selectedMonth);
|
||||
|
||||
// 计算选中日期在新月份中的索引
|
||||
const newMonthDays = getMonthDaysZh(selectedMonth);
|
||||
const newMonthDays = getMonthDays(selectedMonth, i18n.language as 'zh' | 'en');
|
||||
const selectedDay = selectedMonth.date();
|
||||
const newSelectedIndex = newMonthDays.findIndex(day => day.dayOfMonth === selectedDay);
|
||||
|
||||
@@ -219,7 +222,7 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
|
||||
const handleGoToday = () => {
|
||||
const today = dayjs();
|
||||
setCurrentMonth(today);
|
||||
const todayDays = getMonthDaysZh(today);
|
||||
const todayDays = getMonthDays(today, i18n.language as 'zh' | 'en');
|
||||
const newSelectedIndex = todayDays.findIndex(day => day.dayOfMonth === today.date());
|
||||
|
||||
if (newSelectedIndex !== -1) {
|
||||
@@ -250,11 +253,11 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
|
||||
tintColor="rgba(124, 58, 237, 0.08)"
|
||||
isInteractive={true}
|
||||
>
|
||||
<Text style={styles.todayButtonText}>回到今天</Text>
|
||||
<Text style={styles.todayButtonText}>{t('dateSelector.backToToday')}</Text>
|
||||
</GlassView>
|
||||
) : (
|
||||
<View style={[styles.todayButton, styles.todayButtonFallback]}>
|
||||
<Text style={styles.todayButtonText}>回到今天</Text>
|
||||
<Text style={styles.todayButtonText}>{t('dateSelector.backToToday')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
@@ -379,7 +382,7 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
|
||||
display={Platform.OS === 'ios' ? 'inline' : 'calendar'}
|
||||
minimumDate={dayjs().subtract(6, 'month').toDate()}
|
||||
maximumDate={disableFutureDates ? new Date() : undefined}
|
||||
{...(Platform.OS === 'ios' ? { locale: 'zh-CN' } : {})}
|
||||
{...(Platform.OS === 'ios' ? { locale: i18n.language === 'zh' ? 'zh-CN' : 'en-US' } : {})}
|
||||
onChange={(event, date) => {
|
||||
if (Platform.OS === 'ios') {
|
||||
if (date) setPickerDate(date);
|
||||
@@ -395,12 +398,12 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
|
||||
{Platform.OS === 'ios' && (
|
||||
<View style={styles.modalActions}>
|
||||
<TouchableOpacity onPress={closeDatePicker} style={[styles.modalBtn]}>
|
||||
<Text style={styles.modalBtnText}>取消</Text>
|
||||
<Text style={styles.modalBtnText}>{t('dateSelector.cancel')}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => {
|
||||
onConfirmDate(pickerDate);
|
||||
}} style={[styles.modalBtn, styles.modalBtnPrimary]}>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary]}>确定</Text>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary]}>{t('dateSelector.confirm')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
@@ -413,7 +416,7 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
|
||||
display={Platform.OS === 'ios' ? 'inline' : 'calendar'}
|
||||
minimumDate={dayjs().subtract(6, 'month').toDate()}
|
||||
maximumDate={disableFutureDates ? new Date() : undefined}
|
||||
{...(Platform.OS === 'ios' ? { locale: 'zh-CN' } : {})}
|
||||
{...(Platform.OS === 'ios' ? { locale: i18n.language === 'zh' ? 'zh-CN' : 'en-US' } : {})}
|
||||
onChange={(event, date) => {
|
||||
if (Platform.OS === 'ios') {
|
||||
if (date) setPickerDate(date);
|
||||
@@ -429,12 +432,12 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
|
||||
{Platform.OS === 'ios' && (
|
||||
<View style={styles.modalActions}>
|
||||
<TouchableOpacity onPress={closeDatePicker} style={[styles.modalBtn]}>
|
||||
<Text style={styles.modalBtnText}>取消</Text>
|
||||
<Text style={styles.modalBtnText}>{t('dateSelector.cancel')}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => {
|
||||
onConfirmDate(pickerDate);
|
||||
}} style={[styles.modalBtn, styles.modalBtnPrimary]}>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary]}>确定</Text>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary]}>{t('dateSelector.confirm')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
@@ -460,15 +463,16 @@ const styles = StyleSheet.create({
|
||||
alignItems: 'center',
|
||||
},
|
||||
monthTitle: {
|
||||
fontSize: 22,
|
||||
fontSize: 26,
|
||||
fontWeight: '800',
|
||||
color: '#1a1a1a',
|
||||
letterSpacing: -0.5,
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
marginLeft: 8,
|
||||
},
|
||||
calendarIconButton: {
|
||||
padding: 4,
|
||||
borderRadius: 6,
|
||||
marginLeft: 4,
|
||||
padding: 6,
|
||||
borderRadius: 12,
|
||||
marginLeft: 8,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
calendarIconFallback: {
|
||||
@@ -477,22 +481,20 @@ const styles = StyleSheet.create({
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
todayButton: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 12,
|
||||
marginRight: 8,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 16,
|
||||
marginRight: 4,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
todayButtonFallback: {
|
||||
backgroundColor: '#EEF2FF',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(124, 58, 237, 0.2)',
|
||||
},
|
||||
todayButtonText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
color: '#7c3aed',
|
||||
letterSpacing: 0.2,
|
||||
color: '#5F6BF0',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
daysContainer: {
|
||||
paddingBottom: 8,
|
||||
@@ -503,8 +505,8 @@ const styles = StyleSheet.create({
|
||||
marginRight: 8,
|
||||
},
|
||||
dayPill: {
|
||||
width: 40,
|
||||
height: 60,
|
||||
width: 48,
|
||||
height: 68,
|
||||
borderRadius: 24,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@@ -518,14 +520,12 @@ const styles = StyleSheet.create({
|
||||
transform: [{ scale: 0.96 }],
|
||||
},
|
||||
dayPillSelectedFallback: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.5)',
|
||||
backgroundColor: '#5F6BF0',
|
||||
shadowColor: 'rgba(95, 107, 240, 0.3)',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
dayPillDisabled: {
|
||||
backgroundColor: 'transparent',
|
||||
@@ -533,27 +533,31 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
dayLabel: {
|
||||
fontSize: 11,
|
||||
fontWeight: '700',
|
||||
color: '#8e8e93',
|
||||
marginBottom: 2,
|
||||
letterSpacing: 0.1,
|
||||
fontWeight: '600',
|
||||
color: '#94A3B8',
|
||||
marginBottom: 4,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
dayLabelSelected: {
|
||||
color: '#1a1a1a',
|
||||
fontWeight: '800',
|
||||
fontWeight: '700',
|
||||
fontFamily: 'AliBold',
|
||||
opacity: 0.9,
|
||||
},
|
||||
dayLabelDisabled: {
|
||||
color: '#c7c7cc',
|
||||
},
|
||||
dayDate: {
|
||||
fontSize: 13,
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
color: '#8e8e93',
|
||||
letterSpacing: -0.2,
|
||||
color: '#64748B',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
dayDateSelected: {
|
||||
color: '#1a1a1a',
|
||||
fontWeight: '800',
|
||||
fontSize: 16,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
dayDateDisabled: {
|
||||
color: '#c7c7cc',
|
||||
@@ -607,11 +611,13 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '700',
|
||||
fontSize: 14,
|
||||
letterSpacing: 0.1,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
modalBtnTextPrimary: {
|
||||
color: '#FFFFFF',
|
||||
fontWeight: '700',
|
||||
fontSize: 14,
|
||||
letterSpacing: 0.1,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { ROUTES } from '@/constants/Routes';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { ChallengeType } from '@/services/challengesApi';
|
||||
import { reportChallengeProgress, selectChallengeList } from '@/store/challengesSlice';
|
||||
import { ActivityRingsData, fetchActivityRingsForDate } from '@/utils/health';
|
||||
@@ -26,6 +27,7 @@ export function FitnessRingsCard({
|
||||
selectedDate,
|
||||
resetToken,
|
||||
}: FitnessRingsCardProps) {
|
||||
const { t } = useI18n();
|
||||
const dispatch = useAppDispatch();
|
||||
const challenges = useAppSelector(selectChallengeList);
|
||||
const [activityData, setActivityData] = useState<ActivityRingsData | null>(null);
|
||||
@@ -135,6 +137,24 @@ export function FitnessRingsCard({
|
||||
const exerciseProgress = Math.min(1, Math.max(0, exerciseMinutes / exerciseMinutesGoal));
|
||||
const standProgress = Math.min(1, Math.max(0, standHours / standHoursGoal));
|
||||
|
||||
const units = useMemo(
|
||||
() => ({
|
||||
kcal: t('statistics.components.fitness.kcal'),
|
||||
minutes: t('statistics.components.fitness.minutes'),
|
||||
hours: t('statistics.components.fitness.hours'),
|
||||
}),
|
||||
[t]
|
||||
);
|
||||
|
||||
const fitnessRows = useMemo(
|
||||
() => [
|
||||
{ key: 'active', value: Math.round(activeCalories), goal: activeCaloriesGoal, unit: units.kcal },
|
||||
{ key: 'exercise', value: Math.round(exerciseMinutes), goal: exerciseMinutesGoal, unit: units.minutes },
|
||||
{ key: 'stand', value: Math.round(standHours), goal: standHoursGoal, unit: units.hours },
|
||||
],
|
||||
[activeCalories, activeCaloriesGoal, exerciseMinutes, exerciseMinutesGoal, standHours, standHoursGoal, units]
|
||||
);
|
||||
|
||||
const handlePress = () => {
|
||||
router.push(ROUTES.FITNESS_RINGS_DETAIL);
|
||||
};
|
||||
@@ -191,47 +211,23 @@ export function FitnessRingsCard({
|
||||
|
||||
{/* 右侧数据显示 */}
|
||||
<View style={styles.dataContainer}>
|
||||
<View style={styles.dataRow}>
|
||||
<Text style={styles.dataText}>
|
||||
{loading ? (
|
||||
<Text style={styles.dataValue}>--</Text>
|
||||
) : (
|
||||
<>
|
||||
<Text style={styles.dataValue}>{Math.round(activeCalories)}</Text>
|
||||
<Text style={styles.dataGoal}>/{activeCaloriesGoal}</Text>
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
<Text style={styles.dataUnit}>千卡</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.dataRow}>
|
||||
<Text style={styles.dataText}>
|
||||
{loading ? (
|
||||
<Text style={styles.dataValue}>--</Text>
|
||||
) : (
|
||||
<>
|
||||
<Text style={styles.dataValue}>{Math.round(exerciseMinutes)}</Text>
|
||||
<Text style={styles.dataGoal}>/{exerciseMinutesGoal}</Text>
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
<Text style={styles.dataUnit}>分钟</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.dataRow}>
|
||||
<Text style={styles.dataText}>
|
||||
{loading ? (
|
||||
<Text style={styles.dataValue}>--</Text>
|
||||
) : (
|
||||
<>
|
||||
<Text style={styles.dataValue}>{Math.round(standHours)}</Text>
|
||||
<Text style={styles.dataGoal}>/{standHoursGoal}</Text>
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
<Text style={styles.dataUnit}>小时</Text>
|
||||
</View>
|
||||
{fitnessRows.map((row) => (
|
||||
<View key={row.key} style={styles.dataRow}>
|
||||
<Text style={styles.dataText}>
|
||||
{loading ? (
|
||||
<Text style={styles.dataValue}>--</Text>
|
||||
) : (
|
||||
<>
|
||||
<Text style={styles.dataValue}>{row.value}</Text>
|
||||
<Text style={styles.dataGoal}>
|
||||
{t('statistics.components.fitnessRings.goal', { goal: row.goal })}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
<Text style={styles.dataUnit}>{row.unit}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
@@ -285,6 +281,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
flex: 1,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
dataValue: {
|
||||
color: '#192126',
|
||||
@@ -298,5 +295,6 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '500',
|
||||
minWidth: 25,
|
||||
textAlign: 'right',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { ROUTES } from '@/constants/Routes';
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { useRouter } from 'expo-router';
|
||||
@@ -20,6 +21,7 @@ interface FloatingFoodOverlayProps {
|
||||
|
||||
export function FloatingFoodOverlay({ visible, onClose, mealType = 'dinner' }: FloatingFoodOverlayProps) {
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
const { pushIfAuthedElseLogin } = useAuthGuard()
|
||||
|
||||
@@ -41,21 +43,21 @@ export function FloatingFoodOverlay({ visible, onClose, mealType = 'dinner' }: F
|
||||
const menuItems = [
|
||||
{
|
||||
id: 'scan',
|
||||
title: 'AI识别',
|
||||
title: t('nutritionRecords.overlay.scan'),
|
||||
icon: '📷',
|
||||
backgroundColor: '#4FC3F7',
|
||||
onPress: handlePhotoRecognition,
|
||||
},
|
||||
{
|
||||
id: 'food-library',
|
||||
title: '食物库',
|
||||
title: t('nutritionRecords.overlay.foodLibrary'),
|
||||
icon: '🍎',
|
||||
backgroundColor: '#FF9500',
|
||||
onPress: handleFoodLibrary,
|
||||
},
|
||||
{
|
||||
id: 'voice-record',
|
||||
title: '一句话记录',
|
||||
title: t('nutritionRecords.overlay.voiceRecord'),
|
||||
icon: '🎤',
|
||||
backgroundColor: '#7B68EE',
|
||||
onPress: handleVoiceRecord,
|
||||
@@ -81,7 +83,7 @@ export function FloatingFoodOverlay({ visible, onClose, mealType = 'dinner' }: F
|
||||
<View style={styles.container}>
|
||||
<BlurView intensity={80} tint="light" style={styles.blurContainer}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>记录方式</Text>
|
||||
<Text style={styles.title}>{t('nutritionRecords.overlay.title')}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.menuGrid}>
|
||||
|
||||
@@ -13,7 +13,7 @@ interface MoodCardProps {
|
||||
|
||||
export function MoodCard({ moodCheckin, onPress }: MoodCardProps) {
|
||||
const { t } = useTranslation();
|
||||
const moodConfig = moodCheckin ? getMoodConfig(moodCheckin.moodType) : null;
|
||||
const moodConfig = moodCheckin ? getMoodConfig(moodCheckin.moodType, t) : null;
|
||||
const animationRef = useRef<LottieView>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -82,7 +82,8 @@ const styles = StyleSheet.create({
|
||||
cardTitle: {
|
||||
fontSize: 14,
|
||||
color: '#192126',
|
||||
fontWeight: '600'
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
|
||||
lottieAnimation: {
|
||||
@@ -100,21 +101,25 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
color: '#059669',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
moodPreviewTime: {
|
||||
fontSize: 12,
|
||||
color: '#6B7280',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
moodEmptyText: {
|
||||
fontSize: 12,
|
||||
color: '#9CA3AF',
|
||||
fontStyle: 'italic',
|
||||
marginTop: 22,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
moodLoadingText: {
|
||||
fontSize: 12,
|
||||
color: '#9CA3AF',
|
||||
fontStyle: 'italic',
|
||||
marginTop: 22,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { MoodCheckin, getMoodConfig } from '@/services/moodCheckins';
|
||||
import dayjs from 'dayjs';
|
||||
import React from 'react';
|
||||
@@ -8,7 +9,9 @@ interface MoodHistoryCardProps {
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export function MoodHistoryCard({ moodCheckins, title = '心情记录' }: MoodHistoryCardProps) {
|
||||
export function MoodHistoryCard({ moodCheckins, title }: MoodHistoryCardProps) {
|
||||
const { t } = useI18n();
|
||||
const defaultTitle = t('mood.history.title');
|
||||
// 计算心情统计
|
||||
const moodStats = React.useMemo(() => {
|
||||
const stats = {
|
||||
@@ -26,7 +29,7 @@ export function MoodHistoryCard({ moodCheckins, title = '心情记录' }: MoodHi
|
||||
|
||||
// 计算心情分布
|
||||
moodCheckins.forEach(checkin => {
|
||||
const moodLabel = getMoodConfig(checkin.moodType)?.label || checkin.moodType;
|
||||
const moodLabel = getMoodConfig(checkin.moodType, t)?.label || checkin.moodType;
|
||||
stats.moodDistribution[moodLabel] = (stats.moodDistribution[moodLabel] || 0) + 1;
|
||||
});
|
||||
|
||||
@@ -45,11 +48,11 @@ export function MoodHistoryCard({ moodCheckins, title = '心情记录' }: MoodHi
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
<Text style={styles.title}>{title || defaultTitle}</Text>
|
||||
|
||||
{moodCheckins.length === 0 ? (
|
||||
<View style={styles.emptyState}>
|
||||
<Text style={styles.emptyText}>暂无心情记录</Text>
|
||||
<Text style={styles.emptyText}>{t('mood.history.noRecords')}</Text>
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
@@ -57,36 +60,36 @@ export function MoodHistoryCard({ moodCheckins, title = '心情记录' }: MoodHi
|
||||
<View style={styles.statsContainer}>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{moodStats.total}</Text>
|
||||
<Text style={styles.statLabel}>总记录</Text>
|
||||
<Text style={styles.statLabel}>{t('mood.history.totalRecords')}</Text>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{moodStats.averageIntensity}</Text>
|
||||
<Text style={styles.statLabel}>平均强度</Text>
|
||||
<Text style={styles.statLabel}>{t('mood.history.averageIntensity')}</Text>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{moodStats.mostFrequentMood}</Text>
|
||||
<Text style={styles.statLabel}>最常见</Text>
|
||||
<Text style={styles.statLabel}>{t('mood.history.mostFrequent')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 最近记录 */}
|
||||
<View style={styles.recentContainer}>
|
||||
<Text style={styles.sectionTitle}>最近记录</Text>
|
||||
<Text style={styles.sectionTitle}>{t('mood.history.recentRecords')}</Text>
|
||||
{recentMoods.map((checkin, index) => {
|
||||
const moodConfig = getMoodConfig(checkin.moodType);
|
||||
const moodConfig = getMoodConfig(checkin.moodType, t);
|
||||
return (
|
||||
<View key={checkin.id} style={styles.moodItem}>
|
||||
<View style={styles.moodInfo}>
|
||||
<Text style={styles.moodEmoji}>{moodConfig?.emoji}</Text>
|
||||
<Text style={styles.moodEmoji}>😊</Text>
|
||||
<View style={styles.moodDetails}>
|
||||
<Text style={styles.moodLabel}>{moodConfig?.label}</Text>
|
||||
<Text style={styles.moodDate}>
|
||||
{dayjs(checkin.createdAt).format('MM月DD日 HH:mm')}
|
||||
{dayjs(checkin.createdAt).format(t('mood.history.dateTimeFormat'))}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.moodIntensity}>
|
||||
<Text style={styles.intensityText}>强度 {checkin.intensity}</Text>
|
||||
<Text style={styles.intensityText}>{t('mood.history.intensity')} {checkin.intensity}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Gesture,
|
||||
GestureDetector,
|
||||
@@ -38,6 +39,7 @@ export default function MoodIntensitySlider({
|
||||
width = 320,
|
||||
height = 16, // 更粗的进度条
|
||||
}: MoodIntensitySliderProps) {
|
||||
const { t } = useTranslation();
|
||||
const thumbSize = 32; // 合适的触摸区域
|
||||
const translateX = useSharedValue(0);
|
||||
const isDragging = useSharedValue(0);
|
||||
@@ -175,8 +177,8 @@ export default function MoodIntensitySlider({
|
||||
|
||||
{/* 标签 */}
|
||||
<View style={[styles.labelsContainer, { width: width }]}>
|
||||
<Text style={styles.labelText}>轻微</Text>
|
||||
<Text style={styles.labelText}>强烈</Text>
|
||||
<Text style={styles.labelText}>{t('mood.edit.intensityLow')}</Text>
|
||||
<Text style={styles.labelText}>{t('mood.edit.intensityHigh')}</Text>
|
||||
</View>
|
||||
|
||||
{/* 刻度 */}
|
||||
|
||||
@@ -6,11 +6,13 @@ import {
|
||||
TouchableOpacity,
|
||||
View
|
||||
} from 'react-native';
|
||||
import { useI18n } from '../hooks/useI18n';
|
||||
import { useNotifications } from '../hooks/useNotifications';
|
||||
import { ThemedText } from './ThemedText';
|
||||
import { ThemedView } from './ThemedView';
|
||||
|
||||
export const NotificationTest: React.FC = () => {
|
||||
const { t } = useI18n();
|
||||
const {
|
||||
isInitialized,
|
||||
permissionStatus,
|
||||
@@ -95,8 +97,8 @@ export const NotificationTest: React.FC = () => {
|
||||
|
||||
const handleSendMoodCheckinReminder = async () => {
|
||||
try {
|
||||
await sendMoodCheckinReminder('心情打卡', '记得记录今天的心情状态哦');
|
||||
Alert.alert('成功', '心情打卡提醒已发送');
|
||||
await sendMoodCheckinReminder(t('notifications.moodReminder.title'), t('notifications.moodReminder.body'));
|
||||
Alert.alert(t('common.success'), t('notifications.moodReminder.sent'));
|
||||
} catch (error) {
|
||||
Alert.alert('错误', '发送心情打卡提醒失败');
|
||||
}
|
||||
|
||||
@@ -82,10 +82,10 @@ const SimpleRingProgress = ({
|
||||
/>
|
||||
</Svg>
|
||||
<View style={{ position: 'absolute', alignItems: 'center', justifyContent: 'center', top: 0, left: 0, right: 0, bottom: 0 }}>
|
||||
<Text style={{ fontSize: 12, fontWeight: '600', color: '#192126' }}>
|
||||
<Text style={{ fontSize: 12, fontWeight: '600', color: '#192126', fontFamily: 'AliBold' }}>
|
||||
{Math.round(remainingCalories)}
|
||||
</Text>
|
||||
<Text style={{ fontSize: 8, color: '#9AA3AE' }}>{t('statistics.components.diet.remaining')}</Text>
|
||||
<Text style={{ fontSize: 8, color: '#9AA3AE', fontFamily: 'AliRegular' }}>{t('statistics.components.diet.remaining')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@@ -361,12 +361,14 @@ const styles = StyleSheet.create({
|
||||
cardTitle: {
|
||||
fontSize: 14,
|
||||
color: '#192126',
|
||||
fontWeight: '600'
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
cardSubtitle: {
|
||||
fontSize: 10,
|
||||
color: '#9AA3AE',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
contentContainer: {
|
||||
flexDirection: 'row',
|
||||
@@ -419,11 +421,13 @@ const styles = StyleSheet.create({
|
||||
fontSize: 10,
|
||||
color: '#9AA3AE',
|
||||
flex: 1,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
statValue: {
|
||||
fontSize: 12,
|
||||
color: '#192126',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
// 卡路里相关样式
|
||||
calorieSection: {
|
||||
@@ -442,6 +446,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 16,
|
||||
fontWeight: '800',
|
||||
color: '#192126',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
calorieContent: {
|
||||
},
|
||||
@@ -450,6 +455,7 @@ const styles = StyleSheet.create({
|
||||
color: '#64748B',
|
||||
fontWeight: '600',
|
||||
marginRight: 4,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
calculationRow: {
|
||||
flexDirection: 'row',
|
||||
@@ -461,11 +467,13 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
calculationText: {
|
||||
fontSize: 10,
|
||||
fontWeight: '600',
|
||||
color: '#64748B',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
calculationItem: {
|
||||
flexDirection: 'row',
|
||||
@@ -476,11 +484,13 @@ const styles = StyleSheet.create({
|
||||
fontSize: 9,
|
||||
color: '#64748B',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
calculationValue: {
|
||||
fontSize: 11,
|
||||
fontWeight: '700',
|
||||
color: '#192126',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
remainingCaloriesContainer: {
|
||||
flexDirection: 'row',
|
||||
@@ -491,6 +501,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 10,
|
||||
color: '#64748B',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
mealsContainer: {
|
||||
flexDirection: 'row',
|
||||
@@ -514,6 +525,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 10,
|
||||
color: '#64748B',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
// 食物选项样式
|
||||
foodOptionsContainer: {
|
||||
@@ -559,5 +571,6 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '500',
|
||||
color: '#192126',
|
||||
textAlign: 'center',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useThemeColor } from '@/hooks/useThemeColor';
|
||||
import { DietRecord } from '@/services/dietRecords';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
@@ -15,14 +16,6 @@ export type NutritionRecordCardProps = {
|
||||
onDelete?: () => void;
|
||||
};
|
||||
|
||||
const MEAL_TYPE_LABELS = {
|
||||
breakfast: '早餐',
|
||||
lunch: '午餐',
|
||||
dinner: '晚餐',
|
||||
snack: '加餐',
|
||||
other: '其他',
|
||||
} as const;
|
||||
|
||||
const MEAL_TYPE_ICONS = {
|
||||
breakfast: 'sunny-outline',
|
||||
lunch: 'partly-sunny-outline',
|
||||
@@ -44,46 +37,40 @@ export function NutritionRecordCard({
|
||||
onPress,
|
||||
onDelete
|
||||
}: NutritionRecordCardProps) {
|
||||
const surfaceColor = useThemeColor({}, 'surface');
|
||||
const { t } = useI18n();
|
||||
const textColor = useThemeColor({}, 'text');
|
||||
const textSecondaryColor = useThemeColor({}, 'textSecondary');
|
||||
|
||||
// Popover 状态管理
|
||||
const [showPopover, setShowPopover] = useState(false);
|
||||
const popoverRef = useRef<any>(null);
|
||||
|
||||
// 左滑删除相关
|
||||
const swipeableRef = useRef<Swipeable>(null);
|
||||
|
||||
// 添加滑动状态管理,防止滑动时触发点击事件
|
||||
const [isSwiping, setIsSwiping] = useState(false);
|
||||
|
||||
// 营养数据统计
|
||||
const nutritionStats = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
label: '蛋白质',
|
||||
value: record.proteinGrams ? `${record.proteinGrams.toFixed(1)}g` : '-',
|
||||
icon: '🥩',
|
||||
color: '#FF6B6B'
|
||||
label: t('nutritionRecords.nutrients.protein'),
|
||||
value: record.proteinGrams ? `${Math.round(record.proteinGrams)}` : '-',
|
||||
unit: t('nutritionRecords.nutrients.unit'),
|
||||
color: '#64748B'
|
||||
},
|
||||
{
|
||||
label: '脂肪',
|
||||
value: record.fatGrams ? `${record.fatGrams.toFixed(1)}g` : '-',
|
||||
icon: '🥑',
|
||||
color: '#FFB366'
|
||||
label: t('nutritionRecords.nutrients.fat'),
|
||||
value: record.fatGrams ? `${Math.round(record.fatGrams)}` : '-',
|
||||
unit: t('nutritionRecords.nutrients.unit'),
|
||||
color: '#64748B'
|
||||
},
|
||||
{
|
||||
label: '碳水',
|
||||
value: record.carbohydrateGrams ? `${record.carbohydrateGrams.toFixed(1)}g` : '-',
|
||||
icon: '🍞',
|
||||
color: '#4ECDC4'
|
||||
label: t('nutritionRecords.nutrients.carbs'),
|
||||
value: record.carbohydrateGrams ? `${Math.round(record.carbohydrateGrams)}` : '-',
|
||||
unit: t('nutritionRecords.nutrients.unit'),
|
||||
color: '#64748B'
|
||||
},
|
||||
];
|
||||
}, [record]);
|
||||
}, [record, t]);
|
||||
|
||||
const mealTypeColor = MEAL_TYPE_COLORS[record.mealType];
|
||||
const mealTypeLabel = MEAL_TYPE_LABELS[record.mealType];
|
||||
const mealTypeLabel = t(`nutritionRecords.mealTypes.${record.mealType}`);
|
||||
|
||||
// 处理点击事件,只有在非滑动状态下才触发
|
||||
const handlePress = () => {
|
||||
@@ -92,31 +79,17 @@ export function NutritionRecordCard({
|
||||
}
|
||||
};
|
||||
|
||||
// 处理滑动开始
|
||||
const handleSwipeableWillOpen = () => {
|
||||
setIsSwiping(true);
|
||||
};
|
||||
const handleSwipeableWillOpen = () => setIsSwiping(true);
|
||||
const handleSwipeableClose = () => setTimeout(() => setIsSwiping(false), 100);
|
||||
|
||||
// 处理滑动结束
|
||||
const handleSwipeableClose = () => {
|
||||
// 延迟重置滑动状态,防止滑动结束时立即触发点击
|
||||
setTimeout(() => {
|
||||
setIsSwiping(false);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// 处理删除操作
|
||||
const handleDelete = () => {
|
||||
Alert.alert(
|
||||
'确认删除',
|
||||
`确定要删除这条营养记录吗?此操作无法撤销。`,
|
||||
t('nutritionRecords.delete.title'),
|
||||
t('nutritionRecords.delete.message'),
|
||||
[
|
||||
{ text: t('nutritionRecords.delete.cancel'), style: 'cancel' },
|
||||
{
|
||||
text: '取消',
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
text: t('nutritionRecords.delete.confirm'),
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
onDelete?.();
|
||||
@@ -127,7 +100,6 @@ export function NutritionRecordCard({
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染删除按钮
|
||||
const renderRightActions = () => {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
@@ -136,7 +108,6 @@ export function NutritionRecordCard({
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Ionicons name="trash" size={20} color="#FFFFFF" />
|
||||
<Text style={styles.deleteButtonText}>删除</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
@@ -152,239 +123,228 @@ export function NutritionRecordCard({
|
||||
onSwipeableClose={handleSwipeableClose}
|
||||
>
|
||||
<RectButton
|
||||
style={[
|
||||
styles.card,
|
||||
|
||||
]}
|
||||
style={styles.card}
|
||||
onPress={handlePress}
|
||||
// activeOpacity={0.7}
|
||||
>
|
||||
{/* 主要内容区域 - 水平布局 */}
|
||||
<View style={styles.mainContent}>
|
||||
{/* 左侧:食物图片 */}
|
||||
<View style={[styles.foodImageContainer, !record.imageUrl && styles.foodImagePlaceholder]}>
|
||||
{record.imageUrl ? (
|
||||
<Image
|
||||
source={{ uri: record.imageUrl }}
|
||||
style={styles.foodImage}
|
||||
cachePolicy={'memory-disk'}
|
||||
/>
|
||||
) : (
|
||||
<Ionicons name="restaurant" size={28} color={textSecondaryColor} />
|
||||
)}
|
||||
{/* 左侧:时间线和图标 */}
|
||||
<View style={styles.leftSection}>
|
||||
<View style={styles.mealIconContainer}>
|
||||
<Image
|
||||
source={require('@/assets/images/icons/icon-food.png')}
|
||||
style={styles.mealIcon}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 中间:食物信息 */}
|
||||
<View style={styles.foodInfoContainer}>
|
||||
{/* 食物名称 */}
|
||||
<ThemedText style={[styles.foodName, { color: textColor }]}>
|
||||
{record.foodName}
|
||||
</ThemedText>
|
||||
|
||||
{/* 时间 */}
|
||||
<ThemedText style={[styles.mealTime, { color: textSecondaryColor }]}>
|
||||
{record.mealTime ? dayjs(record.mealTime).format('HH:mm') : '--:--'}
|
||||
</ThemedText>
|
||||
|
||||
{/* 营养信息 - 水平排列 */}
|
||||
<View style={styles.nutritionContainer}>
|
||||
{/* 中间:主要信息 */}
|
||||
<View style={styles.centerSection}>
|
||||
<View style={styles.titleRow}>
|
||||
<ThemedText style={styles.foodName} numberOfLines={1}>
|
||||
{record.foodName}
|
||||
</ThemedText>
|
||||
<View style={[styles.mealTag, { backgroundColor: `${mealTypeColor}15` }]}>
|
||||
<Text style={[styles.mealTagText, { color: mealTypeColor }]}>{mealTypeLabel}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.metaRow}>
|
||||
<Ionicons name="time-outline" size={12} color="#94A3B8" />
|
||||
<Text style={styles.timeText}>
|
||||
{record.mealTime ? dayjs(record.mealTime).format('HH:mm') : '--:--'}
|
||||
</Text>
|
||||
{record.portionDescription && (
|
||||
<>
|
||||
<Text style={styles.dotSeparator}>·</Text>
|
||||
<Text style={styles.portionText} numberOfLines={1}>{record.portionDescription}</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 营养微缩信息 */}
|
||||
<View style={styles.nutritionRow}>
|
||||
{nutritionStats.map((stat, index) => (
|
||||
<View key={stat.label} style={styles.nutritionItem}>
|
||||
<ThemedText style={styles.nutritionIcon}>{stat.icon}</ThemedText>
|
||||
<ThemedText style={[styles.nutritionValue, { color: textColor }]}>
|
||||
{stat.value}
|
||||
</ThemedText>
|
||||
</View>
|
||||
<View key={index} style={styles.nutritionItem}>
|
||||
<Text style={styles.nutritionValue}>{stat.value}<Text style={styles.nutritionUnit}>{stat.unit}</Text></Text>
|
||||
<Text style={styles.nutritionLabel}>{stat.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 右侧:热量和餐次标签 */}
|
||||
{/* 右侧:热量 */}
|
||||
<View style={styles.rightSection}>
|
||||
{/* 热量显示 */}
|
||||
<View style={styles.caloriesContainer}>
|
||||
<ThemedText style={[styles.caloriesText]}>
|
||||
{record.estimatedCalories ? `${Math.round(record.estimatedCalories)} kcal` : '- kcal'}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
{/* 餐次标签 */}
|
||||
<View style={[styles.mealTypeBadge]}>
|
||||
<ThemedText style={[styles.mealTypeText, { color: mealTypeColor }]}>
|
||||
{mealTypeLabel}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<Text style={styles.caloriesValue}>
|
||||
{record.estimatedCalories ? Math.round(record.estimatedCalories) : '-'}
|
||||
</Text>
|
||||
<Text style={styles.caloriesUnit}>{t('nutritionRecords.nutrients.caloriesUnit')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 如果有图片,显示图片缩略图 */}
|
||||
{record.imageUrl && (
|
||||
<View style={styles.imageSection}>
|
||||
<Image
|
||||
source={{ uri: record.imageUrl }}
|
||||
style={styles.foodImage}
|
||||
contentFit="cover"
|
||||
transition={200}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</RectButton>
|
||||
</Swipeable>
|
||||
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginBottom: 16,
|
||||
// iOS 阴影效果 - 更自然的阴影
|
||||
shadowColor: '#000000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
marginBottom: 12,
|
||||
marginHorizontal: 24,
|
||||
shadowColor: 'rgba(30, 41, 59, 0.05)',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
// Android 阴影效果
|
||||
elevation: 3,
|
||||
shadowRadius: 12,
|
||||
elevation: 2,
|
||||
},
|
||||
card: {
|
||||
flex: 1,
|
||||
minHeight: 100,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 24,
|
||||
padding: 16,
|
||||
},
|
||||
mainContent: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
},
|
||||
leftSection: {
|
||||
marginRight: 12,
|
||||
alignItems: 'center',
|
||||
},
|
||||
foodImageContainer: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 12,
|
||||
marginRight: 16,
|
||||
mealIconContainer: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#F8FAFC',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
mealIcon: {
|
||||
width: 20,
|
||||
height: 20,
|
||||
opacity: 0.8,
|
||||
},
|
||||
centerSection: {
|
||||
flex: 1,
|
||||
marginRight: 12,
|
||||
},
|
||||
titleRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 4,
|
||||
gap: 8,
|
||||
},
|
||||
foodName: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#1E293B',
|
||||
fontFamily: 'AliBold',
|
||||
flexShrink: 1,
|
||||
},
|
||||
mealTag: {
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 6,
|
||||
},
|
||||
mealTagText: {
|
||||
fontSize: 10,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
metaRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
timeText: {
|
||||
fontSize: 12,
|
||||
color: '#94A3B8',
|
||||
marginLeft: 4,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
dotSeparator: {
|
||||
marginHorizontal: 4,
|
||||
color: '#CBD5E1',
|
||||
},
|
||||
portionText: {
|
||||
fontSize: 12,
|
||||
color: '#64748B',
|
||||
fontFamily: 'AliRegular',
|
||||
flex: 1,
|
||||
},
|
||||
nutritionRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
nutritionItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'baseline',
|
||||
gap: 2,
|
||||
},
|
||||
nutritionValue: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
color: '#475569',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
nutritionUnit: {
|
||||
fontSize: 10,
|
||||
fontWeight: '500',
|
||||
color: '#94A3B8',
|
||||
marginLeft: 1,
|
||||
},
|
||||
nutritionLabel: {
|
||||
fontSize: 10,
|
||||
color: '#94A3B8',
|
||||
marginLeft: 2,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
rightSection: {
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'flex-start',
|
||||
paddingTop: 2,
|
||||
},
|
||||
caloriesValue: {
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
color: '#1E293B',
|
||||
fontFamily: 'AliBold',
|
||||
lineHeight: 22,
|
||||
},
|
||||
caloriesUnit: {
|
||||
fontSize: 10,
|
||||
color: '#94A3B8',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
imageSection: {
|
||||
marginTop: 12,
|
||||
height: 120,
|
||||
width: '100%',
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#F1F5F9',
|
||||
},
|
||||
foodImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: 8,
|
||||
},
|
||||
foodImagePlaceholder: {
|
||||
backgroundColor: '#F8F9FA',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
foodInfoContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
foodName: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#333333',
|
||||
lineHeight: 20,
|
||||
},
|
||||
mealTime: {
|
||||
fontSize: 12,
|
||||
fontWeight: '400',
|
||||
color: '#999999',
|
||||
lineHeight: 16,
|
||||
},
|
||||
nutritionContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 16,
|
||||
marginTop: 2,
|
||||
},
|
||||
nutritionItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
nutritionIcon: {
|
||||
fontSize: 14,
|
||||
},
|
||||
nutritionValue: {
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
color: '#666666',
|
||||
},
|
||||
rightSection: {
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
minHeight: 60,
|
||||
},
|
||||
caloriesContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
caloriesText: {
|
||||
fontSize: 14,
|
||||
color: '#333333',
|
||||
fontWeight: '600',
|
||||
},
|
||||
mealTypeBadge: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
backgroundColor: 'rgba(0,0,0,0.05)',
|
||||
},
|
||||
mealTypeText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
},
|
||||
moreButton: {
|
||||
padding: 2,
|
||||
},
|
||||
notesSection: {
|
||||
marginTop: 8,
|
||||
paddingTop: 12,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: 'rgba(0,0,0,0.06)',
|
||||
},
|
||||
notesText: {
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
lineHeight: 18,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
popoverContainer: {
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#FFFFFF',
|
||||
// iOS 阴影效果
|
||||
shadowColor: '#000000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 12,
|
||||
// Android 阴影效果
|
||||
elevation: 8,
|
||||
// 添加边框
|
||||
borderWidth: 0.5,
|
||||
borderColor: 'rgba(0, 0, 0, 0.08)',
|
||||
},
|
||||
popoverBackground: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
popoverContent: {
|
||||
minWidth: 140,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
popoverItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
gap: 12,
|
||||
},
|
||||
popoverText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
},
|
||||
deleteButton: {
|
||||
backgroundColor: '#EF4444',
|
||||
backgroundColor: '#FF6B6B',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: 80,
|
||||
borderRadius: 12,
|
||||
marginLeft: 8,
|
||||
},
|
||||
deleteButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginTop: 4,
|
||||
width: 70,
|
||||
height: '100%',
|
||||
borderRadius: 24,
|
||||
marginLeft: 12,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
Animated,
|
||||
InteractionManager,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
ViewStyle
|
||||
Animated,
|
||||
InteractionManager,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
ViewStyle
|
||||
} from 'react-native';
|
||||
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { ChallengeType } from '@/services/challengesApi';
|
||||
import { reportChallengeProgress, selectChallengeList } from '@/store/challengesSlice';
|
||||
import { fetchHourlyStepSamples, fetchStepCount, HourlyStepData } from '@/utils/health';
|
||||
import { logger } from '@/utils/logger';
|
||||
import dayjs from 'dayjs';
|
||||
@@ -20,8 +23,8 @@ import { AnimatedNumber } from './AnimatedNumber';
|
||||
// import Svg, { Rect } from 'react-native-svg';
|
||||
|
||||
interface StepsCardProps {
|
||||
curDate: Date
|
||||
stepGoal: number;
|
||||
curDate: Date;
|
||||
stepGoal?: number;
|
||||
style?: ViewStyle;
|
||||
}
|
||||
|
||||
@@ -31,9 +34,20 @@ const StepsCard: React.FC<StepsCardProps> = ({
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const dispatch = useAppDispatch();
|
||||
const challenges = useAppSelector(selectChallengeList);
|
||||
|
||||
const [stepCount, setStepCount] = useState(0)
|
||||
const [hourlySteps, setHourSteps] = useState<HourlyStepData[]>([])
|
||||
const [stepCount, setStepCount] = useState(0);
|
||||
const [hourlySteps, setHourSteps] = useState<HourlyStepData[]>([]);
|
||||
|
||||
// 过滤出已参加的步数挑战
|
||||
const joinedStepsChallenges = useMemo(
|
||||
() => challenges.filter((challenge) => challenge.type === ChallengeType.STEP && challenge.isJoined && challenge.status === 'ongoing'),
|
||||
[challenges]
|
||||
);
|
||||
|
||||
// 跟踪上次上报的记录,避免重复上报
|
||||
const lastReportedRef = useRef<{ date: string; value: number } | null>(null);
|
||||
|
||||
|
||||
const getStepData = useCallback(async (date: Date) => {
|
||||
@@ -59,6 +73,42 @@ const StepsCard: React.FC<StepsCardProps> = ({
|
||||
}
|
||||
}, [curDate]);
|
||||
|
||||
// 步数挑战进度上报逻辑
|
||||
useEffect(() => {
|
||||
if (!curDate || !stepCount || !joinedStepsChallenges.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果当前日期不是今天,不上报
|
||||
if (!dayjs(curDate).isSame(dayjs(), 'day')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const dateKey = dayjs(curDate).format('YYYY-MM-DD');
|
||||
const lastReport = lastReportedRef.current;
|
||||
|
||||
if (lastReport && lastReport.date === dateKey && lastReport.value === stepCount) {
|
||||
return;
|
||||
}
|
||||
|
||||
const reportProgress = async () => {
|
||||
const stepsChallenge = joinedStepsChallenges.find((c) => c.type === ChallengeType.STEP);
|
||||
if (!stepsChallenge) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await dispatch(reportChallengeProgress({ id: stepsChallenge.id, value: stepCount })).unwrap();
|
||||
} catch (error) {
|
||||
logger.warn('StepsCard: Challenge progress report failed', { error, challengeId: stepsChallenge.id });
|
||||
}
|
||||
|
||||
lastReportedRef.current = { date: dateKey, value: stepCount };
|
||||
};
|
||||
|
||||
reportProgress();
|
||||
}, [dispatch, joinedStepsChallenges, curDate, stepCount]);
|
||||
|
||||
// 优化:减少动画值数量,只为有数据的小时创建动画
|
||||
const animatedValues = useRef<Map<number, Animated.Value>>(new Map()).current;
|
||||
|
||||
@@ -244,7 +294,8 @@ const styles = StyleSheet.create({
|
||||
title: {
|
||||
fontSize: 14,
|
||||
color: '#192126',
|
||||
fontWeight: '600'
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
footprintIcons: {
|
||||
flexDirection: 'row',
|
||||
@@ -290,6 +341,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
@@ -1,323 +0,0 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
Animated,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
ViewStyle,
|
||||
InteractionManager
|
||||
} from 'react-native';
|
||||
|
||||
import { fetchHourlyStepSamples, fetchStepCount, HourlyStepData } from '@/utils/health';
|
||||
import { logger } from '@/utils/logger';
|
||||
import dayjs from 'dayjs';
|
||||
import { Image } from 'expo-image';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { AnimatedNumber } from './AnimatedNumber';
|
||||
|
||||
interface StepsCardProps {
|
||||
curDate: Date
|
||||
stepGoal: number;
|
||||
style?: ViewStyle;
|
||||
}
|
||||
|
||||
const StepsCardOptimized: React.FC<StepsCardProps> = ({
|
||||
curDate,
|
||||
style,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
|
||||
const [stepCount, setStepCount] = useState(0)
|
||||
const [hourlySteps, setHourSteps] = useState<HourlyStepData[]>([])
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
// 优化:使用debounce减少频繁的数据获取
|
||||
const debounceTimer = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
const getStepData = useCallback(async (date: Date) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
logger.info('获取步数数据...');
|
||||
|
||||
// 先获取步数,立即更新UI
|
||||
const steps = await fetchStepCount(date);
|
||||
setStepCount(steps);
|
||||
|
||||
// 清除之前的定时器
|
||||
if (debounceTimer.current) {
|
||||
clearTimeout(debounceTimer.current);
|
||||
}
|
||||
|
||||
// 使用 InteractionManager 在空闲时获取更复杂的小时数据
|
||||
InteractionManager.runAfterInteractions(async () => {
|
||||
try {
|
||||
const hourly = await fetchHourlyStepSamples(date);
|
||||
setHourSteps(hourly);
|
||||
} catch (error) {
|
||||
logger.error('获取小时步数数据失败:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
logger.error('获取步数数据失败:', error);
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (curDate) {
|
||||
getStepData(curDate);
|
||||
}
|
||||
}, [curDate, getStepData]);
|
||||
|
||||
// 优化:减少动画值数量,只为有数据的小时创建动画
|
||||
const animatedValues = useRef<Map<number, Animated.Value>>(new Map()).current;
|
||||
|
||||
// 优化:简化柱状图数据计算,减少计算量
|
||||
const chartData = useMemo(() => {
|
||||
if (!hourlySteps || hourlySteps.length === 0) {
|
||||
return Array.from({ length: 24 }, (_, i) => ({ hour: i, steps: 0, height: 0 }));
|
||||
}
|
||||
|
||||
// 优化:只计算有数据的小时的最大步数
|
||||
const activeSteps = hourlySteps.filter(data => data.steps > 0);
|
||||
if (activeSteps.length === 0) {
|
||||
return Array.from({ length: 24 }, (_, i) => ({ hour: i, steps: 0, height: 0 }));
|
||||
}
|
||||
|
||||
const maxSteps = Math.max(...activeSteps.map(data => data.steps));
|
||||
const maxHeight = 20;
|
||||
|
||||
return hourlySteps.map(data => ({
|
||||
...data,
|
||||
height: data.steps > 0 ? (data.steps / maxSteps) * maxHeight : 0
|
||||
}));
|
||||
}, [hourlySteps]);
|
||||
|
||||
// 获取当前小时
|
||||
const currentHour = new Date().getHours();
|
||||
|
||||
// 优化:延迟执行动画,减少UI阻塞
|
||||
useEffect(() => {
|
||||
const hasData = chartData && chartData.length > 0 && chartData.some(data => data.steps > 0);
|
||||
|
||||
if (hasData && !isLoading) {
|
||||
// 使用 InteractionManager 确保动画不会阻塞用户交互
|
||||
InteractionManager.runAfterInteractions(() => {
|
||||
// 只为有数据的小时创建和执行动画
|
||||
const animations = chartData
|
||||
.map((data, index) => {
|
||||
if (data.steps > 0) {
|
||||
// 懒创建动画值
|
||||
if (!animatedValues.has(index)) {
|
||||
animatedValues.set(index, new Animated.Value(0));
|
||||
}
|
||||
|
||||
const animValue = animatedValues.get(index)!;
|
||||
animValue.setValue(0);
|
||||
|
||||
// 使用更高性能的timing动画替代spring
|
||||
return Animated.timing(animValue, {
|
||||
toValue: 1,
|
||||
duration: 200, // 减少动画时长
|
||||
useNativeDriver: false,
|
||||
});
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter(Boolean) as Animated.CompositeAnimation[];
|
||||
|
||||
// 批量执行动画,提高性能
|
||||
if (animations.length > 0) {
|
||||
Animated.stagger(50, animations).start();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [chartData, animatedValues, isLoading]);
|
||||
|
||||
// 优化:使用React.memo包装复杂的渲染组件
|
||||
const ChartBars = useMemo(() => {
|
||||
return chartData.map((data, index) => {
|
||||
// 判断是否是当前小时或者有活动的小时
|
||||
const isActive = data.steps > 0;
|
||||
const isCurrent = index <= currentHour;
|
||||
|
||||
// 优化:只为有数据的柱体创建动画插值
|
||||
const animValue = animatedValues.get(index);
|
||||
let animatedScale: Animated.AnimatedInterpolation<number> | undefined;
|
||||
let animatedOpacity: Animated.AnimatedInterpolation<number> | undefined;
|
||||
|
||||
if (animValue && isActive) {
|
||||
animatedScale = animValue.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, 1],
|
||||
});
|
||||
|
||||
animatedOpacity = animValue.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, 1],
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<View key={`bar-container-${index}`} style={styles.barContainer}>
|
||||
{/* 背景柱体 - 始终显示,使用相似色系的淡色 */}
|
||||
<View
|
||||
style={[
|
||||
styles.chartBar,
|
||||
{
|
||||
height: 20, // 背景柱体占满整个高度
|
||||
backgroundColor: isCurrent ? '#FFF4E6' : '#FFF8F0', // 更淡的相似色系
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 数据柱体 - 只有当有数据时才显示并执行动画 */}
|
||||
{isActive && (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.chartBar,
|
||||
{
|
||||
height: data.height,
|
||||
backgroundColor: isCurrent ? '#FFC365' : '#FFEBCB',
|
||||
transform: animatedScale ? [{ scaleY: animatedScale }] : undefined,
|
||||
opacity: animatedOpacity || 1,
|
||||
}
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
});
|
||||
}, [chartData, currentHour, animatedValues]);
|
||||
|
||||
const CardContent = () => (
|
||||
<>
|
||||
{/* 标题和步数显示 */}
|
||||
<View style={styles.header}>
|
||||
<Image
|
||||
source={require('@/assets/images/icons/icon-step.png')}
|
||||
style={styles.titleIcon}
|
||||
/>
|
||||
<Text style={styles.title}>步数</Text>
|
||||
{isLoading && <Text style={styles.loadingText}>加载中...</Text>}
|
||||
</View>
|
||||
|
||||
{/* 柱状图 */}
|
||||
<View style={styles.chartContainer}>
|
||||
<View style={styles.chartWrapper}>
|
||||
<View style={styles.chartArea}>
|
||||
{ChartBars}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 步数和目标显示 */}
|
||||
<View style={styles.statsContainer}>
|
||||
<AnimatedNumber
|
||||
value={stepCount || 0}
|
||||
style={styles.stepCount}
|
||||
format={(v) => stepCount !== null ? `${Math.round(v)}` : '——'}
|
||||
resetToken={stepCount}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.container, style]}
|
||||
onPress={() => {
|
||||
// 传递当前日期参数到详情页
|
||||
const dateParam = dayjs(curDate).format('YYYY-MM-DD');
|
||||
router.push(`/steps/detail?date=${dateParam}`);
|
||||
}}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<CardContent />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'space-between',
|
||||
borderRadius: 20,
|
||||
padding: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 4,
|
||||
},
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 20,
|
||||
elevation: 8,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
},
|
||||
titleIcon: {
|
||||
width: 16,
|
||||
height: 16,
|
||||
marginRight: 6,
|
||||
resizeMode: 'contain',
|
||||
},
|
||||
title: {
|
||||
fontSize: 14,
|
||||
color: '#192126',
|
||||
fontWeight: '600'
|
||||
},
|
||||
loadingText: {
|
||||
fontSize: 10,
|
||||
color: '#666',
|
||||
marginLeft: 8,
|
||||
},
|
||||
chartContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
marginTop: 6
|
||||
},
|
||||
chartWrapper: {
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
},
|
||||
chartArea: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
height: 20,
|
||||
width: '100%',
|
||||
maxWidth: 240,
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
barContainer: {
|
||||
width: 4,
|
||||
height: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
position: 'relative',
|
||||
},
|
||||
chartBar: {
|
||||
width: 4,
|
||||
borderRadius: 1,
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
},
|
||||
statsContainer: {
|
||||
alignItems: 'flex-start',
|
||||
marginTop: 6
|
||||
},
|
||||
stepCount: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
},
|
||||
});
|
||||
|
||||
export default StepsCardOptimized;
|
||||
@@ -158,7 +158,8 @@ const styles = StyleSheet.create({
|
||||
title: {
|
||||
fontSize: 14,
|
||||
color: '#192126',
|
||||
fontWeight: '600'
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
valueSection: {
|
||||
flexDirection: 'row',
|
||||
@@ -171,12 +172,14 @@ const styles = StyleSheet.create({
|
||||
color: '#192126',
|
||||
lineHeight: 20,
|
||||
marginTop: 2,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
unit: {
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
color: '#9AA3AE',
|
||||
marginLeft: 4,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
progressContainer: {
|
||||
height: 6,
|
||||
|
||||
343
components/VersionUpdateModal.tsx
Normal file
343
components/VersionUpdateModal.tsx
Normal file
@@ -0,0 +1,343 @@
|
||||
import type { VersionInfo } from '@/services/version';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
Modal,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
type VersionUpdateModalProps = {
|
||||
visible: boolean;
|
||||
info: VersionInfo | null;
|
||||
currentVersion: string;
|
||||
onClose: () => void;
|
||||
onUpdate: () => void;
|
||||
strings: {
|
||||
title: string;
|
||||
tag: string;
|
||||
currentVersionLabel: string;
|
||||
latestVersionLabel: string;
|
||||
updatesTitle: string;
|
||||
fallbackNote: string;
|
||||
remindLater: string;
|
||||
updateCta: string;
|
||||
};
|
||||
};
|
||||
|
||||
export function VersionUpdateModal({
|
||||
visible,
|
||||
info,
|
||||
currentVersion,
|
||||
onClose,
|
||||
onUpdate,
|
||||
strings,
|
||||
}: VersionUpdateModalProps) {
|
||||
const notes = useMemo(() => {
|
||||
if (!info) return [];
|
||||
|
||||
if (info.releaseNotes && info.releaseNotes.trim().length > 0) {
|
||||
return info.releaseNotes
|
||||
.split(/\r?\n+/)
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
if (info.updateMessage && info.updateMessage.trim().length > 0) {
|
||||
return [info.updateMessage.trim()];
|
||||
}
|
||||
|
||||
return [];
|
||||
}, [info]);
|
||||
|
||||
if (!info) return null;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
animationType="fade"
|
||||
transparent
|
||||
visible={visible}
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<View style={styles.overlay}>
|
||||
<Pressable style={StyleSheet.absoluteFill} onPress={onClose} />
|
||||
<View style={styles.cardShadow}>
|
||||
<LinearGradient
|
||||
colors={['#0F1B61', '#0F274A', '#0A1A3A']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.card}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['rgba(255,255,255,0.18)', 'rgba(255,255,255,0.03)']}
|
||||
style={styles.glowOrb}
|
||||
/>
|
||||
<LinearGradient
|
||||
colors={['rgba(255,255,255,0.08)', 'transparent']}
|
||||
style={styles.ribbon}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
/>
|
||||
<View style={styles.headerRow}>
|
||||
<View style={styles.tag}>
|
||||
<Ionicons name="sparkles" size={14} color="#0F1B61" />
|
||||
<Text style={styles.tagText}>{strings.tag}</Text>
|
||||
</View>
|
||||
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
|
||||
<Ionicons name="close" size={18} color="#E5E7EB" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.titleBlock}>
|
||||
<Text style={styles.title}>{strings.title}</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
{info.latestVersion ? `v${info.latestVersion}` : ''}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.metaRow}>
|
||||
<View style={styles.metaChip}>
|
||||
<Ionicons name="time-outline" size={14} color="#C7D2FE" />
|
||||
<Text style={styles.metaText}>
|
||||
{strings.currentVersionLabel} v{currentVersion}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.metaChip}>
|
||||
<Ionicons name="arrow-up-circle-outline" size={14} color="#C7D2FE" />
|
||||
<Text style={styles.metaText}>
|
||||
{strings.latestVersionLabel} v{info.latestVersion}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.noteCard}>
|
||||
<Text style={styles.noteTitle}>{strings.updatesTitle}</Text>
|
||||
{notes.length > 0 ? (
|
||||
notes.map((line, idx) => (
|
||||
<View key={`${idx}-${line}`} style={styles.noteItem}>
|
||||
<View style={styles.bullet}>
|
||||
<Ionicons name="ellipse" size={6} color="#6EE7B7" />
|
||||
</View>
|
||||
<Text style={styles.noteText}>{line}</Text>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Text style={styles.noteText}>{strings.fallbackNote}</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.actions}>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.85}
|
||||
onPress={onClose}
|
||||
style={styles.secondaryButton}
|
||||
>
|
||||
<Text style={styles.secondaryText}>{strings.remindLater}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.9}
|
||||
onPress={onUpdate}
|
||||
style={styles.primaryButtonShadow}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#6EE7B7', '#3B82F6']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.primaryButton}
|
||||
>
|
||||
<Ionicons name="cloud-download-outline" size={18} color="#0B1236" />
|
||||
<Text style={styles.primaryText}>{strings.updateCta}</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(7, 11, 34, 0.65)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
cardShadow: {
|
||||
width: '100%',
|
||||
maxWidth: 420,
|
||||
shadowColor: '#0B1236',
|
||||
shadowOpacity: 0.35,
|
||||
shadowOffset: { width: 0, height: 16 },
|
||||
shadowRadius: 30,
|
||||
elevation: 8,
|
||||
},
|
||||
card: {
|
||||
borderRadius: 24,
|
||||
padding: 20,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.08)',
|
||||
},
|
||||
glowOrb: {
|
||||
position: 'absolute',
|
||||
width: 220,
|
||||
height: 220,
|
||||
borderRadius: 110,
|
||||
right: -60,
|
||||
top: -80,
|
||||
opacity: 0.8,
|
||||
},
|
||||
ribbon: {
|
||||
position: 'absolute',
|
||||
left: -120,
|
||||
bottom: -120,
|
||||
width: 260,
|
||||
height: 260,
|
||||
transform: [{ rotate: '-8deg' }],
|
||||
opacity: 0.6,
|
||||
},
|
||||
headerRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
tag: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#A5B4FC',
|
||||
},
|
||||
tagText: {
|
||||
color: '#0F1B61',
|
||||
fontWeight: '700',
|
||||
marginLeft: 6,
|
||||
fontSize: 12,
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
closeButton: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(255,255,255,0.06)',
|
||||
},
|
||||
titleBlock: {
|
||||
marginTop: 14,
|
||||
marginBottom: 8,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: '800',
|
||||
color: '#F9FAFB',
|
||||
letterSpacing: 0.2,
|
||||
},
|
||||
subtitle: {
|
||||
color: '#C7D2FE',
|
||||
marginTop: 6,
|
||||
fontSize: 15,
|
||||
},
|
||||
metaRow: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 10,
|
||||
gap: 8,
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
metaChip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
metaText: {
|
||||
color: '#E5E7EB',
|
||||
marginLeft: 6,
|
||||
fontSize: 12,
|
||||
},
|
||||
noteCard: {
|
||||
marginTop: 16,
|
||||
borderRadius: 16,
|
||||
padding: 14,
|
||||
backgroundColor: 'rgba(255,255,255,0.06)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.04)',
|
||||
},
|
||||
noteTitle: {
|
||||
color: '#F9FAFB',
|
||||
fontWeight: '700',
|
||||
fontSize: 15,
|
||||
marginBottom: 8,
|
||||
},
|
||||
noteItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
marginTop: 8,
|
||||
},
|
||||
bullet: {
|
||||
width: 18,
|
||||
alignItems: 'center',
|
||||
marginTop: 6,
|
||||
},
|
||||
noteText: {
|
||||
flex: 1,
|
||||
color: '#E5E7EB',
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
},
|
||||
actions: {
|
||||
marginTop: 18,
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
},
|
||||
secondaryButton: {
|
||||
flex: 1,
|
||||
height: 48,
|
||||
borderRadius: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.16)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||||
},
|
||||
secondaryText: {
|
||||
color: '#E5E7EB',
|
||||
fontWeight: '600',
|
||||
fontSize: 14,
|
||||
},
|
||||
primaryButtonShadow: {
|
||||
flex: 1,
|
||||
height: 48,
|
||||
borderRadius: 14,
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#1E40AF',
|
||||
shadowOpacity: 0.4,
|
||||
shadowOffset: { width: 0, height: 12 },
|
||||
shadowRadius: 14,
|
||||
elevation: 6,
|
||||
},
|
||||
primaryButton: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
primaryText: {
|
||||
color: '#0B1236',
|
||||
fontWeight: '800',
|
||||
fontSize: 15,
|
||||
},
|
||||
});
|
||||
|
||||
export default VersionUpdateModal;
|
||||
@@ -309,6 +309,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
color: '#192126',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
addButton: {
|
||||
borderRadius: 16,
|
||||
@@ -323,6 +324,7 @@ const styles = StyleSheet.create({
|
||||
color: '#6366F1',
|
||||
fontWeight: '700',
|
||||
lineHeight: 10,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
chartContainer: {
|
||||
flex: 1,
|
||||
@@ -363,11 +365,13 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
targetIntake: {
|
||||
fontSize: 12,
|
||||
color: '#6B7280',
|
||||
marginLeft: 4,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -269,6 +269,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 16,
|
||||
color: '#1F2355',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
addButton: {
|
||||
width: 28,
|
||||
@@ -287,6 +288,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 20,
|
||||
color: '#7A8FFF',
|
||||
marginTop: -2,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
metricsRow: {
|
||||
flexDirection: 'row',
|
||||
@@ -310,12 +312,14 @@ const styles = StyleSheet.create({
|
||||
fontSize: 24,
|
||||
fontWeight: '700',
|
||||
color: '#1F2355',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
metricLabel: {
|
||||
fontSize: 12,
|
||||
color: '#4A5677',
|
||||
fontWeight: '500',
|
||||
marginBottom: 2,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
detailsRow: {
|
||||
flexDirection: 'row',
|
||||
@@ -331,14 +335,17 @@ const styles = StyleSheet.create({
|
||||
fontSize: 13,
|
||||
color: '#1F2355',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
lastWorkoutTime: {
|
||||
fontSize: 12,
|
||||
color: '#7C85A3',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
sourceText: {
|
||||
fontSize: 11,
|
||||
color: '#9AA3C0',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
badgesRow: {
|
||||
flexDirection: 'row',
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import type { RankingItem } from '@/store/challengesSlice';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { Image } from 'expo-image';
|
||||
@@ -18,34 +19,34 @@ const formatNumber = (value: number): string => {
|
||||
return value.toFixed(2).replace(/0+$/, '').replace(/\.$/, '');
|
||||
};
|
||||
|
||||
const formatMinutes = (value: number): string => {
|
||||
const safeValue = Math.max(0, Math.round(value));
|
||||
const hours = safeValue / 60;
|
||||
return `${hours.toFixed(1)} 小时`;
|
||||
};
|
||||
|
||||
const formatValueWithUnit = (value: number | undefined, unit?: string): string | undefined => {
|
||||
if (typeof value !== 'number' || Number.isNaN(value)) {
|
||||
return undefined;
|
||||
}
|
||||
if (unit === 'min') {
|
||||
return formatMinutes(value);
|
||||
}
|
||||
const formatted = formatNumber(value);
|
||||
return unit ? `${formatted} ${unit}` : formatted;
|
||||
};
|
||||
|
||||
export function ChallengeRankingItem({ item, index, showDivider = false, unit }: ChallengeRankingItemProps) {
|
||||
console.log('unit', unit);
|
||||
const { t } = useI18n();
|
||||
|
||||
const formatMinutes = (value: number): string => {
|
||||
const safeValue = Math.max(0, Math.round(value));
|
||||
const hours = safeValue / 60;
|
||||
return `${hours.toFixed(1)} ${t('challengeDetail.ranking.hour')}`;
|
||||
};
|
||||
|
||||
const formatValueWithUnit = (value: number | undefined, unit?: string): string | undefined => {
|
||||
if (typeof value !== 'number' || Number.isNaN(value)) {
|
||||
return undefined;
|
||||
}
|
||||
if (unit === 'min') {
|
||||
return formatMinutes(value);
|
||||
}
|
||||
const formatted = formatNumber(value);
|
||||
return unit ? `${formatted} ${unit}` : formatted;
|
||||
};
|
||||
|
||||
const reportedLabel = formatValueWithUnit(item.todayReportedValue, unit);
|
||||
const targetLabel = formatValueWithUnit(item.todayTargetValue, unit);
|
||||
const progressLabel = reportedLabel && targetLabel
|
||||
? `今日 ${reportedLabel} / ${targetLabel}`
|
||||
? `${t('challengeDetail.ranking.today')} ${reportedLabel} / ${targetLabel}`
|
||||
: reportedLabel
|
||||
? `今日 ${reportedLabel}`
|
||||
? `${t('challengeDetail.ranking.today')} ${reportedLabel}`
|
||||
: targetLabel
|
||||
? `今日目标 ${targetLabel}`
|
||||
? `${t('challengeDetail.ranking.todayGoal')} ${targetLabel}`
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
|
||||
import { Image } from 'expo-image';
|
||||
@@ -25,6 +26,8 @@ interface MedicationPhotoGuideModalProps {
|
||||
* 展示如何正确拍摄药品照片的说明和示例
|
||||
*/
|
||||
export function MedicationPhotoGuideModal({ visible, onClose }: MedicationPhotoGuideModalProps) {
|
||||
const { t } = useI18n();
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
@@ -48,8 +51,12 @@ export function MedicationPhotoGuideModal({ visible, onClose }: MedicationPhotoG
|
||||
>
|
||||
{/* 标题部分 */}
|
||||
<View style={styles.guideHeader}>
|
||||
<Text style={styles.guideStepBadge}>规范</Text>
|
||||
<Text style={styles.guideTitle}>拍摄图片清晰</Text>
|
||||
<Text style={styles.guideStepBadge}>
|
||||
{t('medications.aiCamera.guideModal.badge')}
|
||||
</Text>
|
||||
<Text style={styles.guideTitle}>
|
||||
{t('medications.aiCamera.guideModal.title')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 示例图片 */}
|
||||
@@ -99,10 +106,10 @@ export function MedicationPhotoGuideModal({ visible, onClose }: MedicationPhotoG
|
||||
{/* 说明文字 */}
|
||||
<View style={styles.guideDescription}>
|
||||
<Text style={styles.guideDescriptionText}>
|
||||
请拍摄药品正面\背面的产品名称\说明部分。
|
||||
{t('medications.aiCamera.guideModal.description1')}
|
||||
</Text>
|
||||
<Text style={styles.guideDescriptionText}>
|
||||
注意拍摄时光线充分,没有反光,文字部分清晰可见。照片的清晰度会影响识别的准确率。
|
||||
{t('medications.aiCamera.guideModal.description2')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
@@ -124,7 +131,9 @@ export function MedicationPhotoGuideModal({ visible, onClose }: MedicationPhotoG
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={styles.guideConfirmButtonGradient}
|
||||
>
|
||||
<Text style={styles.guideConfirmButtonText}>知道了!</Text>
|
||||
<Text style={styles.guideConfirmButtonText}>
|
||||
{t('medications.aiCamera.guideModal.button')}
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
</GlassView>
|
||||
) : (
|
||||
@@ -135,7 +144,9 @@ export function MedicationPhotoGuideModal({ visible, onClose }: MedicationPhotoG
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={styles.guideConfirmButtonGradient}
|
||||
>
|
||||
<Text style={styles.guideConfirmButtonText}>知道了!</Text>
|
||||
<Text style={styles.guideConfirmButtonText}>
|
||||
{t('medications.aiCamera.guideModal.button')}
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
)}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import CustomCheckBox from '@/components/ui/CheckBox';
|
||||
import { USER_AGREEMENT_URL } from '@/constants/Agree';
|
||||
import { useAppDispatch } from '@/hooks/redux';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import {
|
||||
MEMBERSHIP_PLAN_META,
|
||||
extractMembershipProductsFromOfferings,
|
||||
@@ -65,51 +66,6 @@ interface BenefitItem {
|
||||
regular: PermissionConfig;
|
||||
}
|
||||
|
||||
// 权益对比配置
|
||||
const BENEFIT_COMPARISON: BenefitItem[] = [
|
||||
{
|
||||
title: 'AI拍照记录热量',
|
||||
description: '通过拍照识别食物并自动记录热量',
|
||||
vip: {
|
||||
type: 'unlimited',
|
||||
text: '无限次使用',
|
||||
vipText: '无限次使用'
|
||||
},
|
||||
regular: {
|
||||
type: 'limited',
|
||||
text: '有限次使用',
|
||||
vipText: '每日3次'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'AI拍照识别包装',
|
||||
description: '识别食品包装上的营养成分信息',
|
||||
vip: {
|
||||
type: 'unlimited',
|
||||
text: '无限次使用',
|
||||
vipText: '无限次使用'
|
||||
},
|
||||
regular: {
|
||||
type: 'limited',
|
||||
text: '有限次使用',
|
||||
vipText: '每日5次'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '每日健康提醒',
|
||||
description: '根据个人目标提供个性化健康提醒',
|
||||
vip: {
|
||||
type: 'unlimited',
|
||||
text: '完全支持',
|
||||
vipText: '智能提醒'
|
||||
},
|
||||
regular: {
|
||||
type: 'unlimited',
|
||||
text: '基础提醒',
|
||||
vipText: '基础提醒'
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
const PLAN_STYLE_CONFIG: Record<MembershipPlanType, { gradient: readonly [string, string]; accent: string }> = {
|
||||
lifetime: {
|
||||
@@ -151,6 +107,7 @@ const getPermissionIcon = (type: PermissionType, isVip: boolean) => {
|
||||
};
|
||||
|
||||
export function MembershipModal({ visible, onClose, onPurchaseSuccess }: MembershipModalProps) {
|
||||
const { t } = useI18n();
|
||||
const dispatch = useAppDispatch();
|
||||
const [selectedProduct, setSelectedProduct] = useState<PurchasesStoreProduct | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -165,6 +122,94 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
// 保存监听器引用,用于移除监听器
|
||||
const purchaseListenerRef = useRef<((customerInfo: CustomerInfo) => void) | null>(null);
|
||||
|
||||
// 权益对比配置 - Move inside component to use t function
|
||||
const benefitComparison: BenefitItem[] = [
|
||||
{
|
||||
title: t('membershipModal.benefits.items.aiCalories.title'),
|
||||
description: t('membershipModal.benefits.items.aiCalories.description'),
|
||||
vip: {
|
||||
type: 'unlimited',
|
||||
text: t('membershipModal.benefits.permissions.unlimited'),
|
||||
vipText: t('membershipModal.benefits.permissions.unlimited')
|
||||
},
|
||||
regular: {
|
||||
type: 'limited',
|
||||
text: t('membershipModal.benefits.permissions.limited'),
|
||||
vipText: t('membershipModal.benefits.permissions.dailyLimit', { count: 3 })
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('membershipModal.benefits.items.aiNutrition.title'),
|
||||
description: t('membershipModal.benefits.items.aiNutrition.description'),
|
||||
vip: {
|
||||
type: 'unlimited',
|
||||
text: t('membershipModal.benefits.permissions.unlimited'),
|
||||
vipText: t('membershipModal.benefits.permissions.unlimited')
|
||||
},
|
||||
regular: {
|
||||
type: 'limited',
|
||||
text: t('membershipModal.benefits.permissions.limited'),
|
||||
vipText: t('membershipModal.benefits.permissions.dailyLimit', { count: 5 })
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('membershipModal.benefits.items.healthReminder.title'),
|
||||
description: t('membershipModal.benefits.items.healthReminder.description'),
|
||||
vip: {
|
||||
type: 'unlimited',
|
||||
text: t('membershipModal.benefits.permissions.fullSupport'),
|
||||
vipText: t('membershipModal.benefits.permissions.smartReminder')
|
||||
},
|
||||
regular: {
|
||||
type: 'unlimited',
|
||||
text: t('membershipModal.benefits.permissions.basicSupport'),
|
||||
vipText: t('membershipModal.benefits.permissions.basicSupport')
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('membershipModal.benefits.items.aiMedication.title'),
|
||||
description: t('membershipModal.benefits.items.aiMedication.description'),
|
||||
vip: {
|
||||
type: 'exclusive',
|
||||
text: t('membershipModal.benefits.permissions.fullAnalysis'),
|
||||
vipText: t('membershipModal.benefits.permissions.fullAnalysis')
|
||||
},
|
||||
regular: {
|
||||
type: 'exclusive',
|
||||
text: t('membershipModal.benefits.permissions.notSupported'),
|
||||
vipText: t('membershipModal.benefits.permissions.notSupported')
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('membershipModal.benefits.items.customChallenge.title'),
|
||||
description: t('membershipModal.benefits.items.customChallenge.description'),
|
||||
vip: {
|
||||
type: 'exclusive',
|
||||
text: t('membershipModal.benefits.permissions.createUnlimited'),
|
||||
vipText: t('membershipModal.benefits.permissions.createUnlimited')
|
||||
},
|
||||
regular: {
|
||||
type: 'exclusive',
|
||||
text: t('membershipModal.benefits.permissions.notSupported'),
|
||||
vipText: t('membershipModal.benefits.permissions.notSupported')
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('membershipModal.benefits.items.tabBarCustomization.title'),
|
||||
description: t('membershipModal.benefits.items.tabBarCustomization.description'),
|
||||
vip: {
|
||||
type: 'exclusive',
|
||||
text: t('membershipModal.benefits.permissions.fullSupport'),
|
||||
vipText: t('membershipModal.benefits.permissions.unlimited')
|
||||
},
|
||||
regular: {
|
||||
type: 'exclusive',
|
||||
text: t('membershipModal.benefits.permissions.notSupported'),
|
||||
vipText: t('membershipModal.benefits.permissions.notSupported')
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
// 根据选中的产品生成tips内容
|
||||
const getTipsContent = (product: PurchasesStoreProduct | null): string => {
|
||||
if (!product) return '';
|
||||
@@ -176,11 +221,11 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
|
||||
switch (plan.type) {
|
||||
case 'lifetime':
|
||||
return '终身陪伴,见证您的每一次健康蜕变';
|
||||
return t('membershipModal.plans.lifetime.subtitle');
|
||||
case 'quarterly':
|
||||
return '3个月科学计划,让健康成为生活习惯';
|
||||
return t('membershipModal.plans.quarterly.subtitle');
|
||||
case 'weekly':
|
||||
return '7天体验期,感受专业健康指导的力量';
|
||||
return t('membershipModal.plans.weekly.subtitle');
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
@@ -326,7 +371,7 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
|
||||
// 显示成功提示
|
||||
GlobalToast.show({
|
||||
message: '会员开通成功',
|
||||
message: t('membershipModal.success.purchase'),
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
@@ -492,11 +537,11 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
// 验证是否已同意协议
|
||||
if (!agreementAccepted) {
|
||||
Alert.alert(
|
||||
'请阅读并同意相关协议',
|
||||
'购买前需要同意用户协议、会员协议和自动续费协议',
|
||||
t('membershipModal.agreements.alert.title'),
|
||||
t('membershipModal.agreements.alert.message'),
|
||||
[
|
||||
{
|
||||
text: '确定',
|
||||
text: t('membershipModal.agreements.alert.confirm'),
|
||||
style: 'default',
|
||||
}
|
||||
]
|
||||
@@ -517,11 +562,11 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
// 验证是否选择了产品
|
||||
if (!selectedProduct) {
|
||||
Alert.alert(
|
||||
'请选择会员套餐',
|
||||
t('membershipModal.errors.selectPlan'),
|
||||
'',
|
||||
[
|
||||
{
|
||||
text: '确定',
|
||||
text: t('membershipModal.agreements.alert.confirm'),
|
||||
style: 'default',
|
||||
}
|
||||
]
|
||||
@@ -579,32 +624,32 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
if (error.userCancelled || error.code === Purchases.PURCHASES_ERROR_CODE.PURCHASE_CANCELLED_ERROR) {
|
||||
// 用户取消购买
|
||||
GlobalToast.show({
|
||||
message: '购买已取消',
|
||||
message: t('membershipModal.errors.purchaseCancelled'),
|
||||
});
|
||||
} else if (error.code === Purchases.PURCHASES_ERROR_CODE.PRODUCT_ALREADY_PURCHASED_ERROR) {
|
||||
// 商品已拥有
|
||||
GlobalToast.show({
|
||||
message: '您已拥有此商品',
|
||||
message: t('membershipModal.errors.alreadyPurchased'),
|
||||
});
|
||||
} else if (error.code === Purchases.PURCHASES_ERROR_CODE.NETWORK_ERROR) {
|
||||
// 网络错误
|
||||
GlobalToast.show({
|
||||
message: '网络连接失败',
|
||||
message: t('membershipModal.errors.networkError'),
|
||||
});
|
||||
} else if (error.code === Purchases.PURCHASES_ERROR_CODE.PAYMENT_PENDING_ERROR) {
|
||||
// 支付待处理
|
||||
GlobalToast.show({
|
||||
message: '支付正在处理中',
|
||||
message: t('membershipModal.errors.paymentPending'),
|
||||
});
|
||||
} else if (error.code === Purchases.PURCHASES_ERROR_CODE.INVALID_CREDENTIALS_ERROR) {
|
||||
// 凭据无效
|
||||
GlobalToast.show({
|
||||
message: '账户验证失败',
|
||||
message: t('membershipModal.errors.invalidCredentials'),
|
||||
});
|
||||
} else {
|
||||
// 其他错误
|
||||
GlobalToast.show({
|
||||
message: '购买失败',
|
||||
message: t('membershipModal.errors.purchaseFailed'),
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
@@ -701,7 +746,7 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
onClose?.();
|
||||
|
||||
GlobalToast.show({
|
||||
message: '恢复购买成功',
|
||||
message: t('membershipModal.errors.restoreSuccess'),
|
||||
});
|
||||
|
||||
} catch (apiError: any) {
|
||||
@@ -720,7 +765,7 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
// 即使后台接口失败,也显示恢复成功(因为 RevenueCat 已经确认有购买记录)
|
||||
// 但不关闭弹窗,让用户知道可能需要重试
|
||||
GlobalToast.show({
|
||||
message: '恢复购买部分失败',
|
||||
message: t('membershipModal.errors.restorePartialFailed'),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -734,7 +779,7 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
activeSubscriptionsCount: activeSubscriptionIds.length
|
||||
});
|
||||
GlobalToast.show({
|
||||
message: '没有找到购买记录',
|
||||
message: t('membershipModal.errors.noPurchasesFound'),
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
@@ -754,19 +799,19 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
// 处理特定的恢复购买错误
|
||||
if (error.userCancelled || error.code === Purchases.PURCHASES_ERROR_CODE.PURCHASE_CANCELLED_ERROR) {
|
||||
GlobalToast.show({
|
||||
message: '恢复购买已取消',
|
||||
message: t('membershipModal.errors.restoreCancelled'),
|
||||
});
|
||||
} else if (error.code === Purchases.PURCHASES_ERROR_CODE.NETWORK_ERROR) {
|
||||
GlobalToast.show({
|
||||
message: '网络错误',
|
||||
message: t('membershipModal.errors.networkError'),
|
||||
});
|
||||
} else if (error.code === Purchases.PURCHASES_ERROR_CODE.INVALID_CREDENTIALS_ERROR) {
|
||||
GlobalToast.show({
|
||||
message: '账户验证失败',
|
||||
message: t('membershipModal.errors.invalidCredentials'),
|
||||
});
|
||||
} else {
|
||||
GlobalToast.show({
|
||||
message: '恢复购买失败',
|
||||
message: t('membershipModal.errors.restoreFailed'),
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
@@ -780,7 +825,19 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
const renderPlanCard = (product: PurchasesStoreProduct) => {
|
||||
const planMeta = getPlanMetaById(product.identifier);
|
||||
const isSelected = selectedProduct === product;
|
||||
const displayTitle = resolvePlanDisplayName(product, planMeta);
|
||||
|
||||
// 优先使用翻译的标题,如果找不到 meta 则回退到产品标题
|
||||
let displayTitle = product.title;
|
||||
let displaySubtitle = planMeta?.subtitle ?? '';
|
||||
|
||||
if (planMeta) {
|
||||
displayTitle = t(`membershipModal.plans.${planMeta.type}.title`);
|
||||
displaySubtitle = t(`membershipModal.plans.${planMeta.type}.subtitle`);
|
||||
} else {
|
||||
// 如果没有 meta,尝试使用 resolvePlanDisplayName (虽然这里主要依赖 meta)
|
||||
displayTitle = resolvePlanDisplayName(product, planMeta);
|
||||
}
|
||||
|
||||
const priceLabel = product.priceString || '';
|
||||
const styleConfig = planMeta ? PLAN_STYLE_CONFIG[planMeta.type] : undefined;
|
||||
|
||||
@@ -797,7 +854,7 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
activeOpacity={loading ? 1 : 0.8}
|
||||
accessible={true}
|
||||
accessibilityLabel={`${displayTitle} ${priceLabel}`}
|
||||
accessibilityHint={loading ? '购买进行中,无法切换套餐' : `选择${displayTitle}套餐`}
|
||||
accessibilityHint={loading ? t('membershipModal.loading.purchase') : t('membershipModal.actions.selectPlan', { plan: displayTitle })}
|
||||
accessibilityState={{ disabled: loading, selected: isSelected }}
|
||||
>
|
||||
<LinearGradient
|
||||
@@ -809,7 +866,7 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
<View style={styles.planCardTopSection}>
|
||||
{planMeta?.tag && (
|
||||
<View style={styles.planTag}>
|
||||
<Text style={styles.planTagText}>{planMeta.tag}</Text>
|
||||
<Text style={styles.planTagText}>{t('membershipModal.plans.tag')}</Text>
|
||||
</View>
|
||||
)}
|
||||
<Text style={styles.planCardTitle}>{displayTitle}</Text>
|
||||
@@ -825,7 +882,7 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
</View>
|
||||
|
||||
<View style={styles.planCardBottomSection}>
|
||||
<Text style={styles.planCardDescription}>{planMeta?.subtitle ?? ''}</Text>
|
||||
<Text style={styles.planCardDescription}>{displaySubtitle}</Text>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
@@ -854,8 +911,8 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
onPress={onClose}
|
||||
activeOpacity={0.7}
|
||||
accessible={true}
|
||||
accessibilityLabel="返回"
|
||||
accessibilityHint="关闭会员购买弹窗"
|
||||
accessibilityLabel={t('membershipModal.actions.back')}
|
||||
accessibilityHint={t('membershipModal.actions.close')}
|
||||
style={styles.floatingBackButtonContainer}
|
||||
>
|
||||
{isLiquidGlassAvailable() ? (
|
||||
@@ -887,14 +944,14 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
<View style={styles.sectionTitleBadge}>
|
||||
<Ionicons name="star" size={16} color="#7B2CBF" />
|
||||
</View>
|
||||
<Text style={styles.sectionTitle}>会员套餐</Text>
|
||||
<Text style={styles.sectionTitle}>{t('membershipModal.sectionTitle.plans')}</Text>
|
||||
</View>
|
||||
<Text style={styles.sectionSubtitle}>灵活选择,跟随节奏稳步提升</Text>
|
||||
<Text style={styles.sectionSubtitle}>{t('membershipModal.sectionTitle.plansSubtitle')}</Text>
|
||||
|
||||
{products.length === 0 ? (
|
||||
<View style={styles.configurationNotice}>
|
||||
<Text style={styles.configurationText}>
|
||||
暂未获取到会员商品,请在 RevenueCat 中配置 iOS 产品并同步到当前 Offering。
|
||||
{t('membershipModal.errors.noProducts')}
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
@@ -917,17 +974,17 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
<View style={styles.sectionTitleBadge}>
|
||||
<Ionicons name="checkbox" size={16} color="#FF9F0A" />
|
||||
</View>
|
||||
<Text style={styles.sectionTitle}>权益对比</Text>
|
||||
<Text style={styles.sectionTitle}>{t('membershipModal.benefits.title')}</Text>
|
||||
</View>
|
||||
<Text style={styles.sectionSubtitle}>核心权益一目了然,选择更安心</Text>
|
||||
<Text style={styles.sectionSubtitle}>{t('membershipModal.benefits.subtitle')}</Text>
|
||||
|
||||
<View style={styles.comparisonTable}>
|
||||
<View style={[styles.tableRow, styles.tableHeader]}>
|
||||
<Text style={[styles.tableHeaderText, styles.tableTitleCell]}>权益</Text>
|
||||
<Text style={[styles.tableHeaderText, styles.tableVipCell]}>VIP</Text>
|
||||
<Text style={[styles.tableHeaderText, styles.tableNormalCell]}>普通用户</Text>
|
||||
<Text style={[styles.tableHeaderText, styles.tableTitleCell]}>{t('membershipModal.benefits.table.benefit')}</Text>
|
||||
<Text style={[styles.tableHeaderText, styles.tableVipCell]}>{t('membershipModal.benefits.table.vip')}</Text>
|
||||
<Text style={[styles.tableHeaderText, styles.tableNormalCell]}>{t('membershipModal.benefits.table.regular')}</Text>
|
||||
</View>
|
||||
{BENEFIT_COMPARISON.map((row, index) => (
|
||||
{benefitComparison.map((row, index) => (
|
||||
<View
|
||||
key={row.title}
|
||||
style={[
|
||||
@@ -963,39 +1020,46 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
</View>
|
||||
|
||||
<View style={styles.bottomSection}>
|
||||
<View style={styles.agreementRow}>
|
||||
<CustomCheckBox
|
||||
checked={agreementAccepted}
|
||||
onCheckedChange={setAgreementAccepted}
|
||||
size={16}
|
||||
checkedColor="#E91E63"
|
||||
uncheckedColor="#999"
|
||||
/>
|
||||
<Text style={styles.agreementPrefix}>开通即视为同意</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
Linking.openURL(USER_AGREEMENT_URL);
|
||||
captureMessage('click user agreement');
|
||||
}}
|
||||
>
|
||||
<Text style={styles.agreementLink}>《用户协议》</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.agreementSeparator}>|</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
captureMessage('click membership agreement');
|
||||
}}
|
||||
>
|
||||
<Text style={styles.agreementLink}>《会员协议》</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.agreementSeparator}>|</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
captureMessage('click auto renewal agreement');
|
||||
}}
|
||||
>
|
||||
<Text style={styles.agreementLink}>《自动续费协议》</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.agreementContainer}>
|
||||
<View style={styles.checkboxWrapper}>
|
||||
<CustomCheckBox
|
||||
checked={agreementAccepted}
|
||||
onCheckedChange={setAgreementAccepted}
|
||||
size={16}
|
||||
checkedColor="#E91E63"
|
||||
uncheckedColor="#999"
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.agreementText}>
|
||||
{t('membershipModal.agreements.prefix')}
|
||||
<Text
|
||||
style={styles.agreementLink}
|
||||
onPress={() => {
|
||||
Linking.openURL(USER_AGREEMENT_URL);
|
||||
captureMessage('click user agreement');
|
||||
}}
|
||||
>
|
||||
{t('membershipModal.agreements.userAgreement')}
|
||||
</Text>
|
||||
<Text style={styles.agreementSeparator}> | </Text>
|
||||
<Text
|
||||
style={styles.agreementLink}
|
||||
onPress={() => {
|
||||
captureMessage('click membership agreement');
|
||||
}}
|
||||
>
|
||||
{t('membershipModal.agreements.membershipAgreement')}
|
||||
</Text>
|
||||
<Text style={styles.agreementSeparator}> | </Text>
|
||||
<Text
|
||||
style={styles.agreementLink}
|
||||
onPress={() => {
|
||||
captureMessage('click auto renewal agreement');
|
||||
}}
|
||||
>
|
||||
{t('membershipModal.agreements.autoRenewalAgreement')}
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
@@ -1006,10 +1070,10 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
{restoring ? (
|
||||
<View style={styles.restoreButtonContent}>
|
||||
<ActivityIndicator size="small" color="#666" style={styles.restoreButtonLoader} />
|
||||
<Text style={styles.restoreButtonText}>恢复中...</Text>
|
||||
<Text style={styles.restoreButtonText}>{t('membershipModal.actions.restoring')}</Text>
|
||||
</View>
|
||||
) : (
|
||||
<Text style={styles.restoreButtonText}>恢复购买</Text>
|
||||
<Text style={styles.restoreButtonText}>{t('membershipModal.actions.restore')}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -1031,15 +1095,15 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
onPress={handlePurchase}
|
||||
disabled={loading || products.length === 0}
|
||||
accessible={true}
|
||||
accessibilityLabel={loading ? '正在处理购买' : '购买会员'}
|
||||
accessibilityLabel={loading ? t('membershipModal.actions.processing') : t('membershipModal.actions.subscribe')}
|
||||
accessibilityHint={
|
||||
loading
|
||||
? '购买正在进行中,请稍候'
|
||||
? t('membershipModal.loading.purchase')
|
||||
: products.length === 0
|
||||
? '正在加载会员套餐,请稍候'
|
||||
? t('membershipModal.loading.products')
|
||||
: !selectedProduct
|
||||
? '请选择会员套餐后再进行购买'
|
||||
: `点击购买${selectedProduct.title || '已选'}会员套餐`
|
||||
? t('membershipModal.errors.selectPlan')
|
||||
: t('membershipModal.actions.purchaseHint', { plan: selectedProduct.title || '已选' })
|
||||
}
|
||||
accessibilityState={{ disabled: loading || products.length === 0 }}
|
||||
style={styles.purchaseButtonContent}
|
||||
@@ -1047,10 +1111,10 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
{loading ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="small" color="white" style={styles.loadingSpinner} />
|
||||
<Text style={styles.purchaseButtonText}>正在处理购买...</Text>
|
||||
<Text style={styles.purchaseButtonText}>{t('membershipModal.actions.processing')}</Text>
|
||||
</View>
|
||||
) : (
|
||||
<Text style={styles.purchaseButtonText}>立即订阅</Text>
|
||||
<Text style={styles.purchaseButtonText}>{t('membershipModal.actions.subscribe')}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</GlassView>
|
||||
@@ -1066,15 +1130,15 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
onPress={handlePurchase}
|
||||
disabled={loading || products.length === 0}
|
||||
accessible={true}
|
||||
accessibilityLabel={loading ? '正在处理购买' : '购买会员'}
|
||||
accessibilityLabel={loading ? t('membershipModal.actions.processing') : t('membershipModal.actions.subscribe')}
|
||||
accessibilityHint={
|
||||
loading
|
||||
? '购买正在进行中,请稍候'
|
||||
? t('membershipModal.loading.purchase')
|
||||
: products.length === 0
|
||||
? '正在加载会员套餐,请稍候'
|
||||
? t('membershipModal.loading.products')
|
||||
: !selectedProduct
|
||||
? '请选择会员套餐后再进行购买'
|
||||
: `点击购买${selectedProduct.title || '已选'}会员套餐`
|
||||
? t('membershipModal.errors.selectPlan')
|
||||
: t('membershipModal.actions.purchaseHint', { plan: selectedProduct.title || '已选' })
|
||||
}
|
||||
accessibilityState={{ disabled: loading || products.length === 0 }}
|
||||
style={styles.purchaseButtonContent}
|
||||
@@ -1082,10 +1146,10 @@ export function MembershipModal({ visible, onClose, onPurchaseSuccess }: Members
|
||||
{loading ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="small" color="white" style={styles.loadingSpinner} />
|
||||
<Text style={styles.purchaseButtonText}>正在处理购买...</Text>
|
||||
<Text style={styles.purchaseButtonText}>{t('membershipModal.actions.processing')}</Text>
|
||||
</View>
|
||||
) : (
|
||||
<Text style={styles.purchaseButtonText}>立即订阅</Text>
|
||||
<Text style={styles.purchaseButtonText}>{t('membershipModal.actions.subscribe')}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -1168,12 +1232,14 @@ const styles = StyleSheet.create({
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#2B2B2E',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
sectionSubtitle: {
|
||||
fontSize: 13,
|
||||
color: '#6B6B73',
|
||||
marginTop: 6,
|
||||
marginBottom: 16,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
configurationNotice: {
|
||||
borderRadius: 16,
|
||||
@@ -1185,6 +1251,7 @@ const styles = StyleSheet.create({
|
||||
color: '#B86A04',
|
||||
textAlign: 'center',
|
||||
lineHeight: 20,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
plansContainer: {
|
||||
flexDirection: 'row',
|
||||
@@ -1217,35 +1284,40 @@ const styles = StyleSheet.create({
|
||||
alignSelf: 'flex-start',
|
||||
backgroundColor: '#2F2F36',
|
||||
borderRadius: 14,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 6,
|
||||
marginBottom: 12,
|
||||
},
|
||||
planTagText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 11,
|
||||
fontSize: 10,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
planCardTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#241F1F',
|
||||
},
|
||||
planCardPrice: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#241F1F',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
planCardPrice: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
marginTop: 12,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
planCardOriginalPrice: {
|
||||
fontSize: 13,
|
||||
color: '#8E8EA1',
|
||||
textDecorationLine: 'line-through',
|
||||
marginTop: 2,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
planCardDescription: {
|
||||
fontSize: 12,
|
||||
color: '#6C6C77',
|
||||
lineHeight: 17,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
planCardTopSection: {
|
||||
flex: 1,
|
||||
@@ -1275,6 +1347,7 @@ const styles = StyleSheet.create({
|
||||
color: '#9B6200',
|
||||
marginLeft: 6,
|
||||
lineHeight: 16,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
comparisonTable: {
|
||||
borderRadius: 16,
|
||||
@@ -1298,10 +1371,12 @@ const styles = StyleSheet.create({
|
||||
color: '#575764',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.4,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
tableCellText: {
|
||||
fontSize: 13,
|
||||
color: '#3E3E44',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
tableTitleCell: {
|
||||
flex: 1.5,
|
||||
@@ -1361,6 +1436,7 @@ const styles = StyleSheet.create({
|
||||
color: '#FFFFFF',
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
loadingContainer: {
|
||||
flexDirection: 'row',
|
||||
@@ -1369,29 +1445,34 @@ const styles = StyleSheet.create({
|
||||
loadingSpinner: {
|
||||
marginRight: 8,
|
||||
},
|
||||
agreementRow: {
|
||||
agreementContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
marginBottom: 16,
|
||||
marginBottom: 20,
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
agreementPrefix: {
|
||||
fontSize: 10,
|
||||
checkboxWrapper: {
|
||||
marginTop: 2, // Align with text line-height
|
||||
marginRight: 8,
|
||||
},
|
||||
agreementText: {
|
||||
flex: 1,
|
||||
fontSize: 11,
|
||||
lineHeight: 16,
|
||||
color: '#666672',
|
||||
marginRight: 4,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
agreementLink: {
|
||||
fontSize: 10,
|
||||
fontSize: 11,
|
||||
color: '#E91E63',
|
||||
textDecorationLine: 'underline',
|
||||
fontWeight: '500',
|
||||
marginHorizontal: 2,
|
||||
textDecorationLine: 'underline',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
agreementSeparator: {
|
||||
fontSize: 10,
|
||||
fontSize: 11,
|
||||
color: '#A0A0B0',
|
||||
marginHorizontal: 2,
|
||||
},
|
||||
restoreButton: {
|
||||
alignSelf: 'center',
|
||||
@@ -1401,6 +1482,7 @@ const styles = StyleSheet.create({
|
||||
color: '#6F6F7A',
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
disabledRestoreButton: {
|
||||
opacity: 0.5,
|
||||
@@ -1422,6 +1504,7 @@ const styles = StyleSheet.create({
|
||||
color: '#8E8E93',
|
||||
marginTop: 2,
|
||||
lineHeight: 14,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
permissionContainer: {
|
||||
alignItems: 'center',
|
||||
@@ -1435,5 +1518,6 @@ const styles = StyleSheet.create({
|
||||
marginTop: 4,
|
||||
textAlign: 'center',
|
||||
lineHeight: 12,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import { useAppSelector } from '@/hooks/redux';
|
||||
import { useCosUpload } from '@/hooks/useCosUpload';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { Image } from 'expo-image';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
@@ -15,11 +20,11 @@ import {
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { useAppSelector } from '@/hooks/redux';
|
||||
import { useCosUpload } from '@/hooks/useCosUpload';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
|
||||
const CTA_GRADIENT: [string, string] = ['#5E8BFF', '#6B6CFF'];
|
||||
const CTA_DISABLED_GRADIENT: [string, string] = ['#d3d7e8', '#c1c6da'];
|
||||
|
||||
export interface CreateCustomFoodModalProps {
|
||||
visible: boolean;
|
||||
@@ -43,9 +48,10 @@ export function CreateCustomFoodModal({
|
||||
onClose,
|
||||
onSave
|
||||
}: CreateCustomFoodModalProps) {
|
||||
const { t } = useI18n();
|
||||
const [foodName, setFoodName] = useState('');
|
||||
const [defaultAmount, setDefaultAmount] = useState('100');
|
||||
const [caloriesUnit, setCaloriesUnit] = useState('千卡');
|
||||
const [caloriesUnit, setCaloriesUnit] = useState(t('createCustomFood.units.kcal'));
|
||||
const [calories, setCalories] = useState('100');
|
||||
const [imageUrl, setImageUrl] = useState<string>('');
|
||||
const [protein, setProtein] = useState('0');
|
||||
@@ -93,7 +99,7 @@ export function CreateCustomFoodModal({
|
||||
if (visible) {
|
||||
setFoodName('');
|
||||
setDefaultAmount('100');
|
||||
setCaloriesUnit('千卡');
|
||||
setCaloriesUnit(t('createCustomFood.units.kcal'));
|
||||
setCalories('100');
|
||||
setImageUrl('');
|
||||
setProtein('0');
|
||||
@@ -102,16 +108,16 @@ export function CreateCustomFoodModal({
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
// 选择热量单位
|
||||
|
||||
|
||||
// 选择图片
|
||||
const handleSelectImage = async () => {
|
||||
try {
|
||||
const resp = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
const libGranted = resp.status === 'granted' || (resp as any).accessPrivileges === 'limited';
|
||||
if (!libGranted) {
|
||||
Alert.alert('权限不足', '需要相册权限以选择照片');
|
||||
Alert.alert(
|
||||
t('createCustomFood.alerts.permissionDenied.title'),
|
||||
t('createCustomFood.alerts.permissionDenied.message')
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -137,11 +143,17 @@ export function CreateCustomFoodModal({
|
||||
setImageUrl(url);
|
||||
} catch (e) {
|
||||
console.warn('上传照片失败', e);
|
||||
Alert.alert('上传失败', '照片上传失败,请重试');
|
||||
Alert.alert(
|
||||
t('createCustomFood.alerts.uploadFailed.title'),
|
||||
t('createCustomFood.alerts.uploadFailed.message')
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
Alert.alert('发生错误', '选择照片失败,请重试');
|
||||
Alert.alert(
|
||||
t('createCustomFood.alerts.error.title'),
|
||||
t('createCustomFood.alerts.error.message')
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -151,12 +163,18 @@ export function CreateCustomFoodModal({
|
||||
// 保存自定义食物
|
||||
const handleSave = () => {
|
||||
if (!foodName.trim()) {
|
||||
Alert.alert('提示', '请输入食物名称');
|
||||
Alert.alert(
|
||||
t('createCustomFood.alerts.validation.title'),
|
||||
t('createCustomFood.alerts.validation.nameRequired')
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!calories.trim() || parseFloat(calories) <= 0) {
|
||||
Alert.alert('提示', '请输入有效的热量值');
|
||||
Alert.alert(
|
||||
t('createCustomFood.alerts.validation.title'),
|
||||
t('createCustomFood.alerts.validation.caloriesRequired')
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -175,75 +193,99 @@ export function CreateCustomFoodModal({
|
||||
onClose();
|
||||
};
|
||||
|
||||
const isSaveDisabled = !foodName.trim() || !calories.trim();
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
animationType="fade"
|
||||
animationType="slide"
|
||||
transparent={true}
|
||||
onRequestClose={onClose}
|
||||
presentationStyle="overFullScreen"
|
||||
>
|
||||
<View style={styles.overlay}>
|
||||
<BlurView intensity={20} tint="dark" style={styles.overlay}>
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
style={styles.keyboardAvoidingView}
|
||||
>
|
||||
<View style={[
|
||||
styles.modalContainer,
|
||||
keyboardHeight > 0 && {
|
||||
height: screenHeight - keyboardHeight,
|
||||
maxHeight: screenHeight - keyboardHeight,
|
||||
}
|
||||
]}>
|
||||
<TouchableOpacity activeOpacity={1} onPress={onClose} style={styles.dismissArea} />
|
||||
<View
|
||||
style={[
|
||||
styles.modalContainer,
|
||||
keyboardHeight > 0 && {
|
||||
height: screenHeight - keyboardHeight - 60,
|
||||
maxHeight: screenHeight - keyboardHeight - 60,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.modalHeaderBar}>
|
||||
<View style={styles.dragIndicator} />
|
||||
</View>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
paddingBottom: keyboardHeight > 0 ? 20 : 0
|
||||
paddingBottom: keyboardHeight > 0 ? 20 : 40,
|
||||
}}
|
||||
>
|
||||
{/* 头部 */}
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity onPress={onClose} style={styles.backButton}>
|
||||
<Ionicons name="chevron-back" size={24} color="#333" />
|
||||
<TouchableOpacity onPress={onClose} style={styles.backButton} activeOpacity={0.7}>
|
||||
<Ionicons name="close-circle" size={32} color="#E2E8F0" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>创建自定义食物</Text>
|
||||
<Text style={styles.headerTitle}>{t('createCustomFood.title')}</Text>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.saveButton,
|
||||
(!foodName.trim() || !calories.trim()) && styles.saveButtonDisabled
|
||||
]}
|
||||
style={[styles.saveButton, isSaveDisabled && styles.saveButtonDisabled]}
|
||||
onPress={handleSave}
|
||||
disabled={!foodName.trim() || !calories.trim()}
|
||||
disabled={isSaveDisabled}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={[
|
||||
styles.saveButtonText,
|
||||
(!foodName.trim() || !calories.trim()) && styles.saveButtonTextDisabled
|
||||
]}>保存</Text>
|
||||
<LinearGradient
|
||||
colors={isSaveDisabled ? CTA_DISABLED_GRADIENT : CTA_GRADIENT}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.saveButtonGradient}
|
||||
>
|
||||
<Text style={styles.saveButtonText}>{t('createCustomFood.save')}</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* 效果预览区域 */}
|
||||
<View style={styles.previewSection}>
|
||||
<Text style={styles.sectionTitle}>效果预览</Text>
|
||||
<View style={styles.previewCard}>
|
||||
<LinearGradient
|
||||
colors={['#ffffff', '#F8F9FF']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<View style={styles.previewHeader}>
|
||||
<Text style={styles.sectionTitle}>{t('createCustomFood.preview.title')}</Text>
|
||||
</View>
|
||||
<View style={styles.previewContent}>
|
||||
{imageUrl ? (
|
||||
<Image style={styles.previewImage} source={{ uri: imageUrl }} />
|
||||
) : (
|
||||
<View style={styles.previewImagePlaceholder}>
|
||||
<Ionicons name="restaurant" size={20} color="#999" />
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.imageWrapper}>
|
||||
{imageUrl ? (
|
||||
<Image style={styles.previewImage} source={{ uri: imageUrl }} />
|
||||
) : (
|
||||
<View style={styles.previewImagePlaceholder}>
|
||||
<Ionicons name="restaurant" size={24} color="#94A3B8" />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.previewInfo}>
|
||||
<Text style={styles.previewName}>
|
||||
{foodName || '食物名称'}
|
||||
</Text>
|
||||
<Text style={styles.previewCalories}>
|
||||
{actualCalories}{caloriesUnit}/{defaultAmount}g
|
||||
<Text style={styles.previewName} numberOfLines={1}>
|
||||
{foodName || t('createCustomFood.preview.defaultName')}
|
||||
</Text>
|
||||
<View style={styles.previewBadge}>
|
||||
<Ionicons name="flame" size={14} color="#F59E0B" />
|
||||
<Text style={styles.previewCalories}>
|
||||
{actualCalories} {caloriesUnit} / {defaultAmount}
|
||||
{t('createCustomFood.units.g')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@@ -252,21 +294,21 @@ export function CreateCustomFoodModal({
|
||||
{/* 基本信息 */}
|
||||
<View style={styles.section}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionTitle}>基本信息</Text>
|
||||
<Text style={styles.sectionTitle}>{t('createCustomFood.basicInfo.title')}</Text>
|
||||
<Text style={styles.requiredIndicator}>*</Text>
|
||||
</View>
|
||||
<View style={styles.sectionCard}>
|
||||
{/* 食物名称和单位 */}
|
||||
{/* 食物名称 */}
|
||||
<View style={styles.inputRowContainer}>
|
||||
<Text style={styles.inputRowLabel}>食物名称</Text>
|
||||
<Text style={styles.inputRowLabel}>{t('createCustomFood.basicInfo.name')}</Text>
|
||||
<View style={styles.inputRowContent}>
|
||||
<View style={styles.numberInputContainer}>
|
||||
<View style={styles.modernInputContainer}>
|
||||
<TextInput
|
||||
style={styles.modernNumberInput}
|
||||
value={foodName}
|
||||
onChangeText={setFoodName}
|
||||
placeholder="例如,汉堡"
|
||||
placeholderTextColor="#A0A0A0"
|
||||
placeholder={t('createCustomFood.basicInfo.namePlaceholder')}
|
||||
placeholderTextColor="#94A3B8"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
@@ -274,36 +316,36 @@ export function CreateCustomFoodModal({
|
||||
|
||||
{/* 默认数量 */}
|
||||
<View style={styles.inputRowContainer}>
|
||||
<Text style={styles.inputRowLabel}>默认数量</Text>
|
||||
<Text style={styles.inputRowLabel}>{t('createCustomFood.basicInfo.defaultAmount')}</Text>
|
||||
<View style={styles.inputRowContent}>
|
||||
<View style={styles.numberInputContainer}>
|
||||
<View style={styles.modernInputContainer}>
|
||||
<TextInput
|
||||
style={styles.modernNumberInput}
|
||||
value={defaultAmount}
|
||||
onChangeText={setDefaultAmount}
|
||||
keyboardType="numeric"
|
||||
placeholder="100"
|
||||
placeholderTextColor="#A0A0A0"
|
||||
placeholderTextColor="#94A3B8"
|
||||
/>
|
||||
<Text style={styles.unitText}>g</Text>
|
||||
<Text style={styles.unitText}>{t('createCustomFood.units.g')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 食物热量 */}
|
||||
<View style={[styles.inputRowContainer, { marginBottom: 0 }]}>
|
||||
<Text style={styles.inputRowLabel}>食物热量</Text>
|
||||
<Text style={styles.inputRowLabel}>{t('createCustomFood.basicInfo.calories')}</Text>
|
||||
<View style={styles.inputRowContent}>
|
||||
<View style={styles.numberInputContainer}>
|
||||
<View style={styles.modernInputContainer}>
|
||||
<TextInput
|
||||
style={styles.modernNumberInput}
|
||||
value={calories}
|
||||
onChangeText={setCalories}
|
||||
keyboardType="numeric"
|
||||
placeholder="100"
|
||||
placeholderTextColor="#A0A0A0"
|
||||
placeholder="0"
|
||||
placeholderTextColor="#94A3B8"
|
||||
/>
|
||||
<Text style={styles.unitText}>千卡</Text>
|
||||
<Text style={styles.unitText}>{t('createCustomFood.units.kcal')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@@ -312,23 +354,26 @@ export function CreateCustomFoodModal({
|
||||
|
||||
{/* 可选信息 */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>可选信息</Text>
|
||||
<Text style={styles.sectionTitle}>{t('createCustomFood.optionalInfo.title')}</Text>
|
||||
<View style={styles.sectionCard}>
|
||||
{/* 照片 */}
|
||||
<View style={styles.inputRowContainer}>
|
||||
<Text style={styles.inputRowLabel}>照片</Text>
|
||||
<Text style={styles.inputRowLabel}>{t('createCustomFood.optionalInfo.photo')}</Text>
|
||||
<View style={styles.inputRowContent}>
|
||||
<TouchableOpacity
|
||||
style={styles.modernImageSelector}
|
||||
<TouchableOpacity
|
||||
style={styles.modernImageSelector}
|
||||
onPress={handleSelectImage}
|
||||
disabled={uploading}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
{imageUrl ? (
|
||||
<Image style={styles.selectedImage} source={{ uri: imageUrl }} />
|
||||
) : (
|
||||
<View style={styles.modernImagePlaceholder}>
|
||||
<Ionicons name="camera" size={28} color="#A0A0A0" />
|
||||
<Text style={styles.imagePlaceholderText}>添加照片</Text>
|
||||
<Ionicons name="camera-outline" size={28} color="#94A3B8" />
|
||||
<Text style={styles.imagePlaceholderText}>
|
||||
{t('createCustomFood.optionalInfo.addPhoto')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{uploading && (
|
||||
@@ -342,54 +387,56 @@ export function CreateCustomFoodModal({
|
||||
|
||||
{/* 蛋白质 */}
|
||||
<View style={styles.inputRowContainer}>
|
||||
<Text style={styles.inputRowLabel}>蛋白质</Text>
|
||||
<Text style={styles.inputRowLabel}>{t('createCustomFood.optionalInfo.protein')}</Text>
|
||||
<View style={styles.inputRowContent}>
|
||||
<View style={styles.numberInputContainer}>
|
||||
<View style={styles.modernInputContainer}>
|
||||
<TextInput
|
||||
style={styles.modernNumberInput}
|
||||
value={protein}
|
||||
onChangeText={setProtein}
|
||||
keyboardType="numeric"
|
||||
placeholder="0"
|
||||
placeholderTextColor="#A0A0A0"
|
||||
placeholderTextColor="#94A3B8"
|
||||
/>
|
||||
<Text style={styles.unitText}>克</Text>
|
||||
<Text style={styles.unitText}>{t('createCustomFood.units.gram')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 脂肪 */}
|
||||
<View style={styles.inputRowContainer}>
|
||||
<Text style={styles.inputRowLabel}>脂肪</Text>
|
||||
<Text style={styles.inputRowLabel}>{t('createCustomFood.optionalInfo.fat')}</Text>
|
||||
<View style={styles.inputRowContent}>
|
||||
<View style={styles.numberInputContainer}>
|
||||
<View style={styles.modernInputContainer}>
|
||||
<TextInput
|
||||
style={styles.modernNumberInput}
|
||||
value={fat}
|
||||
onChangeText={setFat}
|
||||
keyboardType="numeric"
|
||||
placeholder="0"
|
||||
placeholderTextColor="#A0A0A0"
|
||||
placeholderTextColor="#94A3B8"
|
||||
/>
|
||||
<Text style={styles.unitText}>克</Text>
|
||||
<Text style={styles.unitText}>{t('createCustomFood.units.gram')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 碳水化合物 */}
|
||||
<View style={[styles.inputRowContainer, { marginBottom: 0 }]}>
|
||||
<Text style={styles.inputRowLabel}>碳水化合物</Text>
|
||||
<Text style={styles.inputRowLabel}>
|
||||
{t('createCustomFood.optionalInfo.carbohydrate')}
|
||||
</Text>
|
||||
<View style={styles.inputRowContent}>
|
||||
<View style={styles.numberInputContainer}>
|
||||
<View style={styles.modernInputContainer}>
|
||||
<TextInput
|
||||
style={styles.modernNumberInput}
|
||||
value={carbohydrate}
|
||||
onChangeText={setCarbohydrate}
|
||||
keyboardType="numeric"
|
||||
placeholder="0"
|
||||
placeholderTextColor="#A0A0A0"
|
||||
placeholderTextColor="#94A3B8"
|
||||
/>
|
||||
<Text style={styles.unitText}>克</Text>
|
||||
<Text style={styles.unitText}>{t('createCustomFood.units.gram')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@@ -398,7 +445,7 @@ export function CreateCustomFoodModal({
|
||||
</ScrollView>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</BlurView>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -408,331 +455,272 @@ const { height: screenHeight } = Dimensions.get('window');
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
keyboardAvoidingView: {
|
||||
flex: 1,
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
dismissArea: {
|
||||
flex: 1,
|
||||
},
|
||||
modalContainer: {
|
||||
flex: 1,
|
||||
backgroundColor: '#FFFFFF',
|
||||
marginTop: 50,
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
backgroundColor: '#F1F5F9', // Slate 100
|
||||
borderTopLeftRadius: 32,
|
||||
borderTopRightRadius: 32,
|
||||
height: '90%',
|
||||
maxHeight: '90%',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: -4,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 12,
|
||||
elevation: 20,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
modalHeaderBar: {
|
||||
width: '100%',
|
||||
height: 24,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#F1F5F9',
|
||||
},
|
||||
dragIndicator: {
|
||||
width: 40,
|
||||
height: 4,
|
||||
backgroundColor: '#CBD5E1',
|
||||
borderRadius: 2,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F1F5F9',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 20,
|
||||
},
|
||||
backButton: {
|
||||
padding: 4,
|
||||
marginLeft: -8,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
flex: 1,
|
||||
fontSize: 20,
|
||||
fontWeight: '800',
|
||||
color: '#1E293B',
|
||||
textAlign: 'center',
|
||||
marginHorizontal: 20,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
saveButton: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 16,
|
||||
borderRadius: 20,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
saveButtonDisabled: {
|
||||
opacity: 0.5,
|
||||
opacity: 0.6,
|
||||
},
|
||||
saveButtonGradient: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
},
|
||||
saveButtonText: {
|
||||
fontSize: 16,
|
||||
color: Colors.light.primary,
|
||||
fontWeight: '500',
|
||||
},
|
||||
saveButtonTextDisabled: {
|
||||
color: Colors.light.textMuted,
|
||||
fontSize: 14,
|
||||
color: '#FFFFFF',
|
||||
fontWeight: '700',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
previewSection: {
|
||||
paddingHorizontal: 16,
|
||||
paddingBottom: 16,
|
||||
paddingHorizontal: 20,
|
||||
marginBottom: 24,
|
||||
},
|
||||
previewCard: {
|
||||
backgroundColor: '#F8F9FA',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginTop: 8,
|
||||
borderRadius: 24,
|
||||
padding: 20,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#FFFFFF',
|
||||
shadowColor: 'rgba(30, 41, 59, 0.08)',
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 12,
|
||||
elevation: 4,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.6)',
|
||||
},
|
||||
previewHeader: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
previewContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
imageWrapper: {
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
previewImage: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 4,
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#F8FAFC',
|
||||
},
|
||||
previewImagePlaceholder: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 4,
|
||||
backgroundColor: '#E5E5E5',
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#F1F5F9',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
},
|
||||
previewInfo: {
|
||||
flex: 1,
|
||||
marginLeft: 12,
|
||||
marginLeft: 16,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
previewName: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
color: '#333',
|
||||
marginBottom: 2,
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#1E293B',
|
||||
marginBottom: 6,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
previewBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#FFFBEB',
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 8,
|
||||
alignSelf: 'flex-start',
|
||||
gap: 4,
|
||||
},
|
||||
previewCalories: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
fontSize: 13,
|
||||
color: '#D97706',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
section: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 20,
|
||||
marginBottom: 24,
|
||||
},
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 4,
|
||||
|
||||
marginBottom: 12,
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 14,
|
||||
color: '#333',
|
||||
marginLeft: 8
|
||||
fontWeight: '700',
|
||||
color: '#64748B',
|
||||
fontFamily: 'AliBold',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
requiredIndicator: {
|
||||
fontSize: 16,
|
||||
color: '#FF4444',
|
||||
fontSize: 14,
|
||||
color: '#EF4444',
|
||||
marginLeft: 4,
|
||||
},
|
||||
inputGroup: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
inputRowGroup: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
marginBottom: 20,
|
||||
},
|
||||
inputRowItem: {
|
||||
flex: 1,
|
||||
},
|
||||
inputLabel: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
fontWeight: '500',
|
||||
},
|
||||
modernTextInput: {
|
||||
flex: 1,
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
fontSize: 16,
|
||||
marginLeft: 20,
|
||||
color: '#333',
|
||||
backgroundColor: '#FFFFFF',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
elevation: 1,
|
||||
},
|
||||
numberInputContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: 12,
|
||||
|
||||
backgroundColor: '#FFFFFF',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
elevation: 1,
|
||||
},
|
||||
modernNumberInput: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
fontSize: 16,
|
||||
color: '#333',
|
||||
textAlign: 'right',
|
||||
},
|
||||
unitText: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
paddingRight: 16,
|
||||
minWidth: 40,
|
||||
textAlign: 'center',
|
||||
},
|
||||
modernSelectButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
borderWidth: 1.5,
|
||||
borderColor: '#E8E8E8',
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
backgroundColor: '#FFFFFF',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
elevation: 1,
|
||||
},
|
||||
selectButtonText: {
|
||||
fontSize: 14,
|
||||
color: 'gray',
|
||||
fontWeight: '500',
|
||||
},
|
||||
modernImageSelector: {
|
||||
alignSelf: 'flex-end',
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
selectedImage: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 16,
|
||||
},
|
||||
modernImagePlaceholder: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#F8F8F8',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1.5,
|
||||
borderColor: '#E8E8E8',
|
||||
borderStyle: 'dashed',
|
||||
},
|
||||
imagePlaceholderText: {
|
||||
fontSize: 12,
|
||||
color: '#A0A0A0',
|
||||
marginTop: 4,
|
||||
fontWeight: '500',
|
||||
},
|
||||
nutritionRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
marginBottom: 20,
|
||||
},
|
||||
nutritionItem: {
|
||||
flex: 1,
|
||||
},
|
||||
// 保留旧样式以防兼容性问题
|
||||
textInput: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E5E5',
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 12,
|
||||
fontSize: 16,
|
||||
color: '#333',
|
||||
backgroundColor: '#FFFFFF',
|
||||
},
|
||||
numberInput: {
|
||||
flex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E5E5',
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 12,
|
||||
fontSize: 16,
|
||||
color: '#333',
|
||||
backgroundColor: '#FFFFFF',
|
||||
textAlign: 'right',
|
||||
},
|
||||
inputWithUnit: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
inputUnit: {
|
||||
fontSize: 16,
|
||||
color: '#666',
|
||||
minWidth: 30,
|
||||
},
|
||||
selectButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E5E5',
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 12,
|
||||
backgroundColor: '#FFFFFF',
|
||||
},
|
||||
imageSelector: {
|
||||
alignSelf: 'flex-end',
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
imagePlaceholder: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#F0F0F0',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E5E5',
|
||||
},
|
||||
disclaimer: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 20,
|
||||
paddingBottom: 40,
|
||||
},
|
||||
disclaimerText: {
|
||||
fontSize: 12,
|
||||
color: '#999',
|
||||
lineHeight: 18,
|
||||
fontWeight: '700',
|
||||
},
|
||||
sectionCard: {
|
||||
backgroundColor: '#F8F9FA',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginTop: 8,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 24,
|
||||
padding: 20,
|
||||
shadowColor: 'rgba(30, 41, 59, 0.05)',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.5,
|
||||
shadowRadius: 10,
|
||||
elevation: 2,
|
||||
},
|
||||
// 新增行布局样式
|
||||
inputRowContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
marginBottom: 16,
|
||||
},
|
||||
inputRowLabel: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
fontWeight: '500',
|
||||
width: 80,
|
||||
fontSize: 15,
|
||||
color: '#475569',
|
||||
fontWeight: '600',
|
||||
width: 90,
|
||||
marginRight: 12,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
inputRowContent: {
|
||||
flex: 1,
|
||||
},
|
||||
imageLoadingOverlay: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
modernInputContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#F8FAFC',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
modernNumberInput: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
fontSize: 16,
|
||||
color: '#1E293B',
|
||||
textAlign: 'right',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
unitText: {
|
||||
fontSize: 14,
|
||||
color: '#94A3B8',
|
||||
paddingRight: 16,
|
||||
minWidth: 40,
|
||||
textAlign: 'center',
|
||||
fontWeight: '500',
|
||||
},
|
||||
modernImageSelector: {
|
||||
alignSelf: 'flex-end',
|
||||
borderRadius: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
selectedImage: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 20,
|
||||
},
|
||||
modernImagePlaceholder: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#F8FAFC',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
borderStyle: 'dashed',
|
||||
},
|
||||
imagePlaceholderText: {
|
||||
fontSize: 11,
|
||||
color: '#94A3B8',
|
||||
marginTop: 4,
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
},
|
||||
imageLoadingOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.3)',
|
||||
borderRadius: 20,
|
||||
},
|
||||
});
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
|
||||
// 睡眠详情数据类型
|
||||
export type SleepDetailData = {
|
||||
@@ -41,15 +42,22 @@ const SleepGradeCard = ({
|
||||
range: string;
|
||||
isActive?: boolean;
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
|
||||
const getGradeColor = (grade: string) => {
|
||||
switch (grade) {
|
||||
case '低': case '较差': return { bg: '#FECACA', text: '#DC2626' };
|
||||
case '正常': case '一般': return { bg: '#D1FAE5', text: '#065F46' };
|
||||
case '良好': return { bg: '#D1FAE5', text: '#065F46' };
|
||||
case '优秀': return { bg: '#FEF3C7', text: '#92400E' };
|
||||
case t('sleepDetail.sleepGrades.low'):
|
||||
case t('sleepDetail.sleepGrades.poor'):
|
||||
return { bg: '#FECACA', text: '#DC2626' };
|
||||
case t('sleepDetail.sleepGrades.normal'):
|
||||
case t('sleepDetail.sleepGrades.fair'):
|
||||
return { bg: '#D1FAE5', text: '#065F46' };
|
||||
case t('sleepDetail.sleepGrades.good'):
|
||||
return { bg: '#D1FAE5', text: '#065F46' };
|
||||
case t('sleepDetail.sleepGrades.excellent'):
|
||||
return { bg: '#FEF3C7', text: '#92400E' };
|
||||
default: return { bg: colorTokens.pageBackgroundEmphasis, text: colorTokens.textSecondary };
|
||||
}
|
||||
};
|
||||
@@ -97,6 +105,7 @@ export const InfoModal = ({
|
||||
type: 'sleep-time' | 'sleep-quality';
|
||||
sleepData: SleepDetailData;
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
const slideAnim = useState(new Animated.Value(0))[0];
|
||||
@@ -153,26 +162,26 @@ export const InfoModal = ({
|
||||
const currentSleepQualityGrade = getSleepQualityGrade(sleepData.sleepQualityPercentage || 94); // 默认94%
|
||||
|
||||
const sleepTimeGrades = [
|
||||
{ icon: 'alert-circle-outline', grade: '低', range: '< 6h', isActive: currentSleepTimeGrade === 0 },
|
||||
{ icon: 'checkmark-circle-outline', grade: '正常', range: '6h - 7h or > 9h', isActive: currentSleepTimeGrade === 1 },
|
||||
{ icon: 'checkmark-circle', grade: '良好', range: '7h - 8h', isActive: currentSleepTimeGrade === 2 },
|
||||
{ icon: 'star', grade: '优秀', range: '8h - 9h', isActive: currentSleepTimeGrade === 3 },
|
||||
{ icon: 'alert-circle-outline', grade: t('sleepDetail.sleepGrades.low'), range: '< 6h', isActive: currentSleepTimeGrade === 0 },
|
||||
{ icon: 'checkmark-circle-outline', grade: t('sleepDetail.sleepGrades.normal'), range: '6h - 7h or > 9h', isActive: currentSleepTimeGrade === 1 },
|
||||
{ icon: 'checkmark-circle', grade: t('sleepDetail.sleepGrades.good'), range: '7h - 8h', isActive: currentSleepTimeGrade === 2 },
|
||||
{ icon: 'star', grade: t('sleepDetail.sleepGrades.excellent'), range: '8h - 9h', isActive: currentSleepTimeGrade === 3 },
|
||||
];
|
||||
|
||||
const sleepQualityGrades = [
|
||||
{ icon: 'alert-circle-outline', grade: '较差', range: '< 55%', isActive: currentSleepQualityGrade === 0 },
|
||||
{ icon: 'checkmark-circle-outline', grade: '一般', range: '55% - 69%', isActive: currentSleepQualityGrade === 1 },
|
||||
{ icon: 'checkmark-circle', grade: '良好', range: '70% - 84%', isActive: currentSleepQualityGrade === 2 },
|
||||
{ icon: 'star', grade: '优秀', range: '85% - 100%', isActive: currentSleepQualityGrade === 3 },
|
||||
{ icon: 'alert-circle-outline', grade: t('sleepDetail.sleepGrades.poor'), range: '< 55%', isActive: currentSleepQualityGrade === 0 },
|
||||
{ icon: 'checkmark-circle-outline', grade: t('sleepDetail.sleepGrades.fair'), range: '55% - 69%', isActive: currentSleepQualityGrade === 1 },
|
||||
{ icon: 'checkmark-circle', grade: t('sleepDetail.sleepGrades.good'), range: '70% - 84%', isActive: currentSleepQualityGrade === 2 },
|
||||
{ icon: 'star', grade: t('sleepDetail.sleepGrades.excellent'), range: '85% - 100%', isActive: currentSleepQualityGrade === 3 },
|
||||
];
|
||||
|
||||
const currentGrades = type === 'sleep-time' ? sleepTimeGrades : sleepQualityGrades;
|
||||
|
||||
const getDescription = () => {
|
||||
if (type === 'sleep-time') {
|
||||
return '睡眠最重要 - 它占据了你睡眠得分的一半以上。长时间的睡眠可以减少睡眠债务,但是规律的睡眠时间对于高质量的休息至关重要。';
|
||||
return t('sleepDetail.sleepTimeDescription');
|
||||
} else {
|
||||
return '睡眠质量综合评估您的睡眠效率、深度睡眠时长、REM睡眠比例等多个指标。高质量的睡眠不仅仅取决于时长,还包括睡眠的连续性和各睡眠阶段的平衡。';
|
||||
return t('sleepDetail.sleepQualityDescription');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { formatTime, getSleepStageColor, SleepStage, type SleepSample } from '@/utils/sleepHealthKit';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import dayjs from 'dayjs';
|
||||
@@ -7,19 +8,26 @@ import React, { useMemo } from 'react';
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import Svg, { Rect, Text as SvgText } from 'react-native-svg';
|
||||
|
||||
import { StyleProp, ViewStyle } from 'react-native';
|
||||
|
||||
export type SleepStageTimelineProps = {
|
||||
sleepSamples: SleepSample[];
|
||||
bedtime: string;
|
||||
wakeupTime: string;
|
||||
onInfoPress?: () => void;
|
||||
hideHeader?: boolean;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
};
|
||||
|
||||
export const SleepStageTimeline = ({
|
||||
sleepSamples,
|
||||
bedtime,
|
||||
wakeupTime,
|
||||
onInfoPress
|
||||
onInfoPress,
|
||||
hideHeader = false,
|
||||
style
|
||||
}: SleepStageTimelineProps) => {
|
||||
const { t } = useI18n();
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
|
||||
@@ -130,18 +138,22 @@ export const SleepStageTimeline = ({
|
||||
// 如果没有数据,显示空状态
|
||||
if (timelineData.length === 0) {
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: colorTokens.background }]}>
|
||||
<View style={styles.header}>
|
||||
<Text style={[styles.title, { color: colorTokens.text }]}>睡眠阶段图</Text>
|
||||
{onInfoPress && (
|
||||
<TouchableOpacity style={styles.infoButton} onPress={onInfoPress}>
|
||||
<Ionicons name="help-circle-outline" size={20} color={colorTokens.textSecondary} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
<View style={[styles.container, { backgroundColor: colorTokens.background }, style]}>
|
||||
{!hideHeader && (
|
||||
<View style={styles.header}>
|
||||
<Text style={[styles.title, { color: colorTokens.text }]}>
|
||||
{t('sleepDetail.sleepStages')}
|
||||
</Text>
|
||||
{onInfoPress && (
|
||||
<TouchableOpacity style={styles.infoButton} onPress={onInfoPress}>
|
||||
<Ionicons name="help-circle-outline" size={20} color={colorTokens.textSecondary} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.emptyState}>
|
||||
<Text style={[styles.emptyText, { color: colorTokens.textSecondary }]}>
|
||||
暂无睡眠阶段数据
|
||||
{t('sleepDetail.noData')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -149,27 +161,35 @@ export const SleepStageTimeline = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: colorTokens.background }]}>
|
||||
<View style={[styles.container, { backgroundColor: colorTokens.background }, style]}>
|
||||
{/* 标题栏 */}
|
||||
<View style={styles.header}>
|
||||
<Text style={[styles.title, { color: colorTokens.text }]}>睡眠阶段图</Text>
|
||||
{onInfoPress && (
|
||||
<TouchableOpacity style={styles.infoButton} onPress={onInfoPress}>
|
||||
<Ionicons name="help-circle-outline" size={20} color={colorTokens.textSecondary} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
{!hideHeader && (
|
||||
<View style={styles.header}>
|
||||
<Text style={[styles.title, { color: colorTokens.text }]}>
|
||||
{t('sleepDetail.sleepStages')}
|
||||
</Text>
|
||||
{onInfoPress && (
|
||||
<TouchableOpacity style={styles.infoButton} onPress={onInfoPress}>
|
||||
<Ionicons name="help-circle-outline" size={20} color={colorTokens.textSecondary} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 睡眠时间范围 */}
|
||||
<View style={styles.timeRange}>
|
||||
<View style={styles.timePoint}>
|
||||
<Text style={[styles.timeLabel, { color: colorTokens.textSecondary }]}>入睡</Text>
|
||||
<Text style={[styles.timeLabel, { color: colorTokens.textSecondary }]}>
|
||||
{t('sleepDetail.infoModalTitles.sleepTime')}
|
||||
</Text>
|
||||
<Text style={[styles.timeValue, { color: colorTokens.text }]}>
|
||||
{formatTime(bedtime)}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.timePoint}>
|
||||
<Text style={[styles.timeLabel, { color: colorTokens.textSecondary }]}>起床</Text>
|
||||
<Text style={[styles.timeLabel, { color: colorTokens.textSecondary }]}>
|
||||
{t('sleepDetail.sleepDuration')}
|
||||
</Text>
|
||||
<Text style={[styles.timeValue, { color: colorTokens.text }]}>
|
||||
{formatTime(wakeupTime)}
|
||||
</Text>
|
||||
@@ -223,21 +243,29 @@ export const SleepStageTimeline = ({
|
||||
<View style={styles.legendRow}>
|
||||
<View style={styles.legendItem}>
|
||||
<View style={[styles.legendDot, { backgroundColor: getSleepStageColor(SleepStage.Deep) }]} />
|
||||
<Text style={[styles.legendText, { color: colorTokens.textSecondary }]}>深度睡眠</Text>
|
||||
<Text style={[styles.legendText, { color: colorTokens.textSecondary }]}>
|
||||
{t('sleepDetail.deep')}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.legendItem}>
|
||||
<View style={[styles.legendDot, { backgroundColor: getSleepStageColor(SleepStage.Core) }]} />
|
||||
<Text style={[styles.legendText, { color: colorTokens.textSecondary }]}>核心睡眠</Text>
|
||||
<Text style={[styles.legendText, { color: colorTokens.textSecondary }]}>
|
||||
{t('sleepDetail.core')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.legendRow}>
|
||||
<View style={styles.legendItem}>
|
||||
<View style={[styles.legendDot, { backgroundColor: getSleepStageColor(SleepStage.REM) }]} />
|
||||
<Text style={[styles.legendText, { color: colorTokens.textSecondary }]}>快速眼动</Text>
|
||||
<Text style={[styles.legendText, { color: colorTokens.textSecondary }]}>
|
||||
{t('sleepDetail.rem')}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.legendItem}>
|
||||
<View style={[styles.legendDot, { backgroundColor: getSleepStageColor(SleepStage.Awake) }]} />
|
||||
<Text style={[styles.legendText, { color: colorTokens.textSecondary }]}>清醒时间</Text>
|
||||
<Text style={[styles.legendText, { color: colorTokens.textSecondary }]}>
|
||||
{t('sleepDetail.awake')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
|
||||
// Sleep Stages Info Modal 组件
|
||||
export const SleepStagesInfoModal = ({
|
||||
@@ -22,6 +23,7 @@ export const SleepStagesInfoModal = ({
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
const slideAnim = useState(new Animated.Value(0))[0];
|
||||
@@ -82,7 +84,7 @@ export const SleepStagesInfoModal = ({
|
||||
|
||||
<View style={styles.sleepStagesModalHeader}>
|
||||
<Text style={[styles.sleepStagesModalTitle, { color: colorTokens.text }]}>
|
||||
了解你的睡眠阶段
|
||||
{t('sleepDetail.sleepStagesInfo.title')}
|
||||
</Text>
|
||||
<TouchableOpacity onPress={onClose} style={styles.infoModalCloseButton}>
|
||||
<Ionicons name="close" size={24} color={colorTokens.textSecondary} />
|
||||
@@ -97,7 +99,7 @@ export const SleepStagesInfoModal = ({
|
||||
scrollEnabled={true}
|
||||
>
|
||||
<Text style={[styles.sleepStagesDescription, { color: colorTokens.textSecondary }]}>
|
||||
人们对睡眠阶段和睡眠质量有许多误解。有些人可能需要更多深度睡眠,其他人则不然。科学家和医生仍在探索不同睡眠阶段的作用及其对身体的影响。通过跟踪睡眠阶段并留意每天清晨的感受,你或许能深入了解自己的睡眠。
|
||||
{t('sleepDetail.sleepStagesInfo.description')}
|
||||
</Text>
|
||||
|
||||
{/* 清醒时间 */}
|
||||
@@ -105,11 +107,11 @@ export const SleepStagesInfoModal = ({
|
||||
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
||||
<View style={styles.sleepStageInfoTitleContainer}>
|
||||
<View style={[styles.sleepStageDot, { backgroundColor: '#F59E0B' }]} />
|
||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>清醒时间</Text>
|
||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>{t('sleepDetail.sleepStagesInfo.awake.title')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
||||
一次睡眠期间,你可能会醒来几次。偶尔醒来很正常。可能你会立刻再次入睡,并不记得曾在夜间醒来。
|
||||
{t('sleepDetail.sleepStagesInfo.awake.description')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
@@ -118,11 +120,11 @@ export const SleepStagesInfoModal = ({
|
||||
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
||||
<View style={styles.sleepStageInfoTitleContainer}>
|
||||
<View style={[styles.sleepStageDot, { backgroundColor: '#EC4899' }]} />
|
||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>快速动眼睡眠</Text>
|
||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>{t('sleepDetail.sleepStagesInfo.rem.title')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
||||
这一睡眠阶段可能对学习和记忆产生一定影响。在此阶段,你的肌肉最为放松,眼球也会快速左右移动。这也是你大多数梦境出现的阶段。
|
||||
{t('sleepDetail.sleepStagesInfo.rem.description')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
@@ -131,11 +133,11 @@ export const SleepStagesInfoModal = ({
|
||||
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
||||
<View style={styles.sleepStageInfoTitleContainer}>
|
||||
<View style={[styles.sleepStageDot, { backgroundColor: '#8B5CF6' }]} />
|
||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>核心睡眠</Text>
|
||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>{t('sleepDetail.sleepStagesInfo.core.title')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
||||
这一阶段有时也称为浅睡期,与其他阶段一样重要。此阶段通常占据你每晚大部分的睡眠时间。对于认知至关重要的脑电波会在这一阶段产生。
|
||||
{t('sleepDetail.sleepStagesInfo.core.description')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
@@ -144,11 +146,11 @@ export const SleepStagesInfoModal = ({
|
||||
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
||||
<View style={styles.sleepStageInfoTitleContainer}>
|
||||
<View style={[styles.sleepStageDot, { backgroundColor: '#3B82F6' }]} />
|
||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>深度睡眠</Text>
|
||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>{t('sleepDetail.sleepStagesInfo.deep.title')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
||||
因为脑电波的特征,这一阶段也称为慢波睡眠。在此阶段,身体组织得到修复,并释放重要荷尔蒙。它通常出现在睡眠的前半段,且持续时间较长。深度睡眠期间,身体非常放松,因此相较于其他阶段,你可能更难在此阶段醒来。
|
||||
{t('sleepDetail.sleepStagesInfo.deep.description')}
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
@@ -207,6 +207,7 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
marginBottom: 16,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
measurementsContainer: {
|
||||
flexDirection: 'row',
|
||||
@@ -221,6 +222,7 @@ const styles = StyleSheet.create({
|
||||
color: '#888',
|
||||
marginBottom: 8,
|
||||
textAlign: 'center',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
valueContainer: {
|
||||
backgroundColor: '#F5F5F7',
|
||||
@@ -236,6 +238,7 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
textAlign: 'center',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -72,6 +72,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
color: '#192126',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
valueContainer: {
|
||||
flexDirection: 'row',
|
||||
@@ -81,6 +82,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
unit: {
|
||||
fontSize: 12,
|
||||
@@ -88,6 +90,7 @@ const styles = StyleSheet.create({
|
||||
marginLeft: 4,
|
||||
marginBottom: 2,
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { fetchOxygenSaturation } from '@/utils/health';
|
||||
import { useFocusEffect } from '@react-navigation/native';
|
||||
import { ensureHealthPermissions, fetchOxygenSaturation } from '@/utils/health';
|
||||
import { HealthKitUtils } from '@/utils/healthKit';
|
||||
import { useIsFocused } from '@react-navigation/native';
|
||||
import dayjs from 'dayjs';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import HealthDataCard from './HealthDataCard';
|
||||
|
||||
@@ -15,42 +16,52 @@ const OxygenSaturationCard: React.FC<OxygenSaturationCardProps> = ({
|
||||
selectedDate
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const isFocused = useIsFocused();
|
||||
const [oxygenSaturation, setOxygenSaturation] = useState<number | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const loadingRef = useRef(false);
|
||||
|
||||
// 获取血氧饱和度数据 - 在页面聚焦、日期变化时触发
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
const loadOxygenSaturationData = async () => {
|
||||
const dateToUse = selectedDate || new Date();
|
||||
useEffect(() => {
|
||||
const loadOxygenSaturationData = async () => {
|
||||
const dateToUse = selectedDate || new Date();
|
||||
|
||||
// 防止重复请求
|
||||
if (loadingRef.current) return;
|
||||
if (!isFocused) return;
|
||||
if (!HealthKitUtils.isAvailable()) {
|
||||
setOxygenSaturation(null);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
loadingRef.current = true;
|
||||
setLoading(true);
|
||||
// 防止重复请求
|
||||
if (loadingRef.current) return;
|
||||
|
||||
const options = {
|
||||
startDate: dayjs(dateToUse).startOf('day').toDate().toISOString(),
|
||||
endDate: dayjs(dateToUse).endOf('day').toDate().toISOString()
|
||||
};
|
||||
try {
|
||||
loadingRef.current = true;
|
||||
setLoading(true);
|
||||
|
||||
const data = await fetchOxygenSaturation(options);
|
||||
setOxygenSaturation(data);
|
||||
} catch (error) {
|
||||
console.error('OxygenSaturationCard: Failed to get blood oxygen data:', error);
|
||||
const hasPermission = await ensureHealthPermissions();
|
||||
if (!hasPermission) {
|
||||
setOxygenSaturation(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
loadingRef.current = false;
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
loadOxygenSaturationData();
|
||||
}, [selectedDate])
|
||||
);
|
||||
const options = {
|
||||
startDate: dayjs(dateToUse).startOf('day').toDate().toISOString(),
|
||||
endDate: dayjs(dateToUse).endOf('day').toDate().toISOString()
|
||||
};
|
||||
|
||||
const data = await fetchOxygenSaturation(options);
|
||||
setOxygenSaturation(data);
|
||||
} catch (error) {
|
||||
console.error('OxygenSaturationCard: Failed to get blood oxygen data:', error);
|
||||
setOxygenSaturation(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
loadingRef.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
loadOxygenSaturationData();
|
||||
}, [isFocused, selectedDate]);
|
||||
|
||||
return (
|
||||
<HealthDataCard
|
||||
@@ -62,4 +73,4 @@ const OxygenSaturationCard: React.FC<OxygenSaturationCardProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default OxygenSaturationCard;
|
||||
export default OxygenSaturationCard;
|
||||
|
||||
@@ -127,12 +127,14 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
color: '#192126',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
sleepValue: {
|
||||
fontSize: 16,
|
||||
color: '#1E40AF',
|
||||
fontWeight: '700',
|
||||
marginTop: 8,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -30,6 +30,9 @@ const MAPPING = {
|
||||
'info.circle': 'info',
|
||||
'magnifyingglass': 'search',
|
||||
'xmark': 'close',
|
||||
'chevron.left': 'chevron-left',
|
||||
'sparkles': 'auto-awesome',
|
||||
'arrow.clockwise': 'refresh',
|
||||
} as IconMapping;
|
||||
|
||||
/**
|
||||
|
||||
454
components/ui/MedicationAiSummaryInfoSheet.tsx
Normal file
454
components/ui/MedicationAiSummaryInfoSheet.tsx
Normal file
@@ -0,0 +1,454 @@
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import { Image } from 'expo-image';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Animated,
|
||||
BackHandler,
|
||||
Dimensions,
|
||||
Modal,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View
|
||||
} from 'react-native';
|
||||
import ImageViewing from 'react-native-image-viewing';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useI18n } from '../../hooks/useI18n';
|
||||
import { triggerLightHaptic } from '../../utils/haptics';
|
||||
|
||||
const { height: screenHeight } = Dimensions.get('window');
|
||||
|
||||
interface MedicationAiSummaryInfoSheetProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* AI 用药总结介绍弹窗组件
|
||||
* 用于展示 AI 用药总结功能的介绍和说明
|
||||
*/
|
||||
export function MedicationAiSummaryInfoSheet({
|
||||
visible,
|
||||
onClose,
|
||||
onConfirm,
|
||||
loading = false,
|
||||
}: MedicationAiSummaryInfoSheetProps) {
|
||||
const { t } = useI18n();
|
||||
const insets = useSafeAreaInsets();
|
||||
const translateY = useRef(new Animated.Value(screenHeight)).current;
|
||||
const backdropOpacity = useRef(new Animated.Value(0)).current;
|
||||
const [showImagePreview, setShowImagePreview] = useState(false);
|
||||
|
||||
// 预览图片 - 直接使用 require 资源
|
||||
const imageSource = require('@/assets/images/medicine/medicine-ai-summary.png');
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
translateY.setValue(screenHeight);
|
||||
backdropOpacity.setValue(0);
|
||||
|
||||
Animated.parallel([
|
||||
Animated.timing(backdropOpacity, {
|
||||
toValue: 1,
|
||||
duration: 200,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.spring(translateY, {
|
||||
toValue: 0,
|
||||
useNativeDriver: true,
|
||||
bounciness: 6,
|
||||
speed: 12,
|
||||
}),
|
||||
]).start();
|
||||
} else {
|
||||
Animated.parallel([
|
||||
Animated.timing(backdropOpacity, {
|
||||
toValue: 0,
|
||||
duration: 150,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(translateY, {
|
||||
toValue: screenHeight,
|
||||
duration: 240,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start(() => {
|
||||
translateY.setValue(screenHeight);
|
||||
backdropOpacity.setValue(0);
|
||||
});
|
||||
}
|
||||
}, [visible, backdropOpacity, translateY]);
|
||||
|
||||
// 处理Android返回键关闭图片预览
|
||||
useEffect(() => {
|
||||
const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
|
||||
if (showImagePreview) {
|
||||
setShowImagePreview(false);
|
||||
return true; // 阻止默认返回行为
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
return () => backHandler.remove();
|
||||
}, [showImagePreview]);
|
||||
|
||||
// 处理图片预览
|
||||
const handleImagePreview = useCallback(() => {
|
||||
triggerLightHaptic();
|
||||
setShowImagePreview(true);
|
||||
}, []);
|
||||
|
||||
const handleClose = () => {
|
||||
// 安全地执行触觉反馈,避免因触觉反馈失败导致页面卡顿
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch((error) => {
|
||||
console.warn('[AI_SUMMARY] Haptic feedback failed:', error);
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (loading) return;
|
||||
// 安全地执行触觉反馈,避免因触觉反馈失败导致页面卡顿
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success).catch((error) => {
|
||||
console.warn('[AI_SUMMARY] Haptic feedback failed:', error);
|
||||
});
|
||||
onConfirm();
|
||||
};
|
||||
|
||||
if (!visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent
|
||||
animationType="none"
|
||||
onRequestClose={handleClose}
|
||||
statusBarTranslucent
|
||||
>
|
||||
<View style={styles.overlay}>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.backdrop,
|
||||
{
|
||||
opacity: backdropOpacity,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<TouchableOpacity style={StyleSheet.absoluteFillObject} activeOpacity={1} onPress={handleClose} />
|
||||
</Animated.View>
|
||||
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.sheet,
|
||||
{
|
||||
transform: [{ translateY }],
|
||||
paddingBottom: Math.max(insets.bottom, 20),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.handle} />
|
||||
|
||||
{/* 图标和标题 */}
|
||||
<View style={styles.header}>
|
||||
<View style={styles.iconContainer}>
|
||||
<Ionicons name="sparkles" size={24} color="#8B5CF6" />
|
||||
</View>
|
||||
<Text style={styles.title}>{t('medications.aiSummaryInfo.title')}</Text>
|
||||
</View>
|
||||
|
||||
{/* 介绍图片区域 */}
|
||||
<View style={styles.imageContainer}>
|
||||
<Image
|
||||
source={require('@/assets/images/medicine/medicine-ai-summary.png')}
|
||||
style={styles.introImage}
|
||||
contentFit='contain'
|
||||
/>
|
||||
{/* 右上角查看大图提示按钮 */}
|
||||
<TouchableOpacity
|
||||
style={styles.viewImageButton}
|
||||
onPress={handleImagePreview}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
{isLiquidGlassAvailable() ? (
|
||||
<GlassView
|
||||
style={styles.glassViewButton}
|
||||
glassEffectStyle="clear"
|
||||
tintColor="rgba(255, 255, 255, 0.3)"
|
||||
isInteractive={true}
|
||||
>
|
||||
<Ionicons name="expand-outline" size={16} color="#333" />
|
||||
</GlassView>
|
||||
) : (
|
||||
<View style={[styles.glassViewButton, styles.fallbackViewButton]}>
|
||||
<Ionicons name="expand-outline" size={16} color="#333" />
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* 功能介绍内容 */}
|
||||
<View style={styles.contentContainer}>
|
||||
<View style={styles.featureItem}>
|
||||
<View style={styles.featureIcon}>
|
||||
<Ionicons name="analytics" size={20} color="#8B5CF6" />
|
||||
</View>
|
||||
<View style={styles.featureContent}>
|
||||
<Text style={styles.featureTitle}>{t('medications.aiSummaryInfo.features.intelligent.title')}</Text>
|
||||
<Text style={styles.featureDescription}>
|
||||
{t('medications.aiSummaryInfo.features.intelligent.description')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.featureItem}>
|
||||
<View style={styles.featureIcon}>
|
||||
<Ionicons name="time" size={20} color="#8B5CF6" />
|
||||
</View>
|
||||
<View style={styles.featureContent}>
|
||||
<Text style={styles.featureTitle}>{t('medications.aiSummaryInfo.features.tracking.title')}</Text>
|
||||
<Text style={styles.featureDescription}>
|
||||
{t('medications.aiSummaryInfo.features.tracking.description')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.featureItem}>
|
||||
<View style={styles.featureIcon}>
|
||||
<Ionicons name="shield-checkmark" size={20} color="#8B5CF6" />
|
||||
</View>
|
||||
<View style={styles.featureContent}>
|
||||
<Text style={styles.featureTitle}>{t('medications.aiSummaryInfo.features.professional.title')}</Text>
|
||||
<Text style={styles.featureDescription}>
|
||||
{t('medications.aiSummaryInfo.features.professional.description')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 确认按钮 - 支持 Liquid Glass */}
|
||||
<View style={styles.actions}>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.9}
|
||||
onPress={handleConfirm}
|
||||
disabled={loading}
|
||||
>
|
||||
{isLiquidGlassAvailable() ? (
|
||||
<GlassView
|
||||
style={styles.confirmButton}
|
||||
glassEffectStyle="regular"
|
||||
tintColor="rgba(139, 92, 246, 0.8)"
|
||||
isInteractive={true}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="arrow-forward" size={20} color="#fff" />
|
||||
<Text style={styles.confirmText}>{t('medications.aiSummaryInfo.confirmButton')}</Text>
|
||||
</>
|
||||
)}
|
||||
</GlassView>
|
||||
) : (
|
||||
<View style={[styles.confirmButton, styles.fallbackButton]}>
|
||||
{loading ? (
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="arrow-forward" size={20} color="#fff" />
|
||||
<Text style={styles.confirmText}>{t('medications.aiSummaryInfo.confirmButton')}</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
{/* 图片预览 */}
|
||||
<ImageViewing
|
||||
images={[imageSource]}
|
||||
imageIndex={0}
|
||||
visible={showImagePreview}
|
||||
onRequestClose={() => setShowImagePreview(false)}
|
||||
swipeToCloseEnabled={true}
|
||||
doubleTapToZoomEnabled={true}
|
||||
FooterComponent={() => (
|
||||
<View style={styles.imageViewerFooter}>
|
||||
<TouchableOpacity
|
||||
style={styles.imageViewerFooterButton}
|
||||
onPress={() => setShowImagePreview(false)}
|
||||
>
|
||||
<Text style={styles.imageViewerFooterButtonText}>{t('medications.detail.imageViewer.close')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
justifyContent: 'flex-end',
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
backdrop: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(15, 23, 42, 0.45)',
|
||||
},
|
||||
sheet: {
|
||||
backgroundColor: '#fff',
|
||||
borderTopLeftRadius: 28,
|
||||
borderTopRightRadius: 28,
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 16,
|
||||
shadowOffset: { width: 0, height: -4 },
|
||||
elevation: 16,
|
||||
gap: 20,
|
||||
},
|
||||
handle: {
|
||||
width: 50,
|
||||
height: 4,
|
||||
borderRadius: 2,
|
||||
backgroundColor: '#E5E7EB',
|
||||
alignSelf: 'center',
|
||||
marginBottom: 8,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
},
|
||||
iconContainer: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#F3E8FF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: '700',
|
||||
color: '#111827',
|
||||
},
|
||||
imageContainer: {
|
||||
width: '100%',
|
||||
height: 380,
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#F9FAFB',
|
||||
},
|
||||
introImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: 16,
|
||||
},
|
||||
contentContainer: {
|
||||
gap: 16,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
featureItem: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
featureIcon: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
backgroundColor: '#F3E8FF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
featureContent: {
|
||||
flex: 1,
|
||||
},
|
||||
featureTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#111827',
|
||||
marginBottom: 4,
|
||||
},
|
||||
featureDescription: {
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
color: '#6B7280',
|
||||
},
|
||||
actions: {
|
||||
marginTop: 8,
|
||||
},
|
||||
confirmButton: {
|
||||
height: 56,
|
||||
borderRadius: 18,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
overflow: 'hidden', // 保证玻璃边界圆角效果
|
||||
},
|
||||
fallbackButton: {
|
||||
backgroundColor: '#8B5CF6',
|
||||
shadowColor: 'rgba(139, 92, 246, 0.45)',
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 1,
|
||||
shadowRadius: 20,
|
||||
elevation: 6,
|
||||
},
|
||||
confirmText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#fff',
|
||||
},
|
||||
// 图片预览相关样式
|
||||
viewImageButton: {
|
||||
position: 'absolute',
|
||||
top: 12,
|
||||
right: 12,
|
||||
zIndex: 1,
|
||||
},
|
||||
glassViewButton: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
fallbackViewButton: {
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(0, 0, 0, 0.1)',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
||||
},
|
||||
imageViewerFooter: {
|
||||
position: 'absolute',
|
||||
bottom: 60,
|
||||
left: 20,
|
||||
right: 20,
|
||||
alignItems: 'center',
|
||||
zIndex: 1,
|
||||
},
|
||||
imageViewerFooterButton: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 20,
|
||||
},
|
||||
imageViewerFooterButtonText: {
|
||||
color: '#FFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
},
|
||||
});
|
||||
@@ -348,7 +348,8 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
color: '#192126',
|
||||
flex: 1,
|
||||
fontWeight: '600'
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
headerButtons: {
|
||||
flexDirection: 'row',
|
||||
@@ -406,6 +407,7 @@ const styles = StyleSheet.create({
|
||||
color: '#192126',
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
chartContainer: {
|
||||
width: '100%',
|
||||
@@ -424,6 +426,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 11,
|
||||
color: '#687076',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
infoValue: {
|
||||
fontSize: 14,
|
||||
@@ -446,6 +449,7 @@ const styles = StyleSheet.create({
|
||||
textAlign: 'center',
|
||||
marginBottom: 24,
|
||||
letterSpacing: -0.5,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
bmiModalIntroSection: {
|
||||
marginBottom: 32,
|
||||
@@ -456,6 +460,7 @@ const styles = StyleSheet.create({
|
||||
lineHeight: 24,
|
||||
textAlign: 'center',
|
||||
marginBottom: 16,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
bmiModalFormulaContainer: {
|
||||
backgroundColor: '#F3F4F6',
|
||||
@@ -467,6 +472,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
bmiModalSectionTitle: {
|
||||
fontSize: 20,
|
||||
@@ -474,6 +480,7 @@ const styles = StyleSheet.create({
|
||||
color: '#111827',
|
||||
marginBottom: 16,
|
||||
letterSpacing: -0.5,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
bmiModalStatsCard: {
|
||||
marginBottom: 32,
|
||||
@@ -493,14 +500,17 @@ const styles = StyleSheet.create({
|
||||
bmiModalStatTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
bmiModalStatRange: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
bmiModalStatAdvice: {
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
bmiModalHealthTips: {
|
||||
marginBottom: 32,
|
||||
@@ -520,6 +530,7 @@ const styles = StyleSheet.create({
|
||||
marginLeft: 12,
|
||||
flex: 1,
|
||||
lineHeight: 20,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
bmiModalDisclaimer: {
|
||||
flexDirection: 'row',
|
||||
@@ -535,6 +546,7 @@ const styles = StyleSheet.create({
|
||||
marginLeft: 8,
|
||||
flex: 1,
|
||||
lineHeight: 18,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
bmiModalBottomContainer: {
|
||||
padding: 20,
|
||||
@@ -553,6 +565,7 @@ const styles = StyleSheet.create({
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#FFFFFF',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
bmiModalHomeIndicator: {
|
||||
height: 5,
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { WeightHistoryItem } from '@/store/userSlice';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import dayjs from 'dayjs';
|
||||
import React, { useRef } from 'react';
|
||||
import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { Alert, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { Swipeable } from 'react-native-gesture-handler';
|
||||
|
||||
interface WeightRecordCardProps {
|
||||
@@ -20,6 +21,7 @@ export const WeightRecordCard: React.FC<WeightRecordCardProps> = ({
|
||||
onDelete,
|
||||
weightChange = 0
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const swipeableRef = useRef<Swipeable>(null);
|
||||
const colorScheme = useColorScheme();
|
||||
const themeColors = Colors[colorScheme ?? 'light'];
|
||||
@@ -27,15 +29,15 @@ export const WeightRecordCard: React.FC<WeightRecordCardProps> = ({
|
||||
// 处理删除操作
|
||||
const handleDelete = () => {
|
||||
Alert.alert(
|
||||
'确认删除',
|
||||
`确定要删除这条体重记录吗?此操作无法撤销。`,
|
||||
t('weightRecords.card.deleteConfirmTitle'),
|
||||
t('weightRecords.card.deleteConfirmMessage'),
|
||||
[
|
||||
{
|
||||
text: '取消',
|
||||
text: t('weightRecords.card.cancelButton'),
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
text: t('weightRecords.card.deleteButton'),
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
const recordId = record.id || record.createdAt;
|
||||
@@ -56,124 +58,174 @@ export const WeightRecordCard: React.FC<WeightRecordCardProps> = ({
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Ionicons name="trash" size={20} color="#FFFFFF" />
|
||||
<Text style={styles.deleteButtonText}>删除</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Swipeable
|
||||
ref={swipeableRef}
|
||||
renderRightActions={renderRightActions}
|
||||
rightThreshold={40}
|
||||
overshootRight={false}
|
||||
>
|
||||
<View
|
||||
style={[styles.recordCard]}
|
||||
<View style={styles.cardContainer}>
|
||||
<Swipeable
|
||||
ref={swipeableRef}
|
||||
renderRightActions={renderRightActions}
|
||||
rightThreshold={40}
|
||||
overshootRight={false}
|
||||
>
|
||||
<View style={styles.recordHeader}>
|
||||
<Text style={[styles.recordDateTime, { color: themeColors.textSecondary }]}>
|
||||
{dayjs(record.createdAt).format('MM月DD日 HH:mm')}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.recordEditButton}
|
||||
onPress={() => onPress?.(record)}
|
||||
>
|
||||
<Ionicons name="create-outline" size={16} color="#FF9500" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.recordContent}>
|
||||
<Text style={[styles.recordWeightLabel, { color: themeColors.textSecondary }]}>体重:</Text>
|
||||
<Text style={[styles.recordWeightValue, { color: themeColors.text }]}>{record.weight}kg</Text>
|
||||
{Math.abs(weightChange) > 0 && (
|
||||
<View style={[
|
||||
styles.weightChangeTag,
|
||||
{ backgroundColor: weightChange < 0 ? '#E8F5E8' : '#FFF2E8' }
|
||||
]}>
|
||||
<Ionicons
|
||||
name={weightChange < 0 ? "arrow-down" : "arrow-up"}
|
||||
size={12}
|
||||
color={weightChange < 0 ? Colors.light.accentGreen : '#FF9500'}
|
||||
<View style={styles.recordCard}>
|
||||
<View style={styles.leftContent}>
|
||||
<View style={styles.iconContainer}>
|
||||
<Image
|
||||
source={require('@/assets/images/icons/iconWeight.png')}
|
||||
style={styles.icon}
|
||||
/>
|
||||
<Text style={[
|
||||
styles.weightChangeText,
|
||||
{ color: weightChange < 0 ? Colors.light.accentGreen : '#FF9500' }
|
||||
]}>
|
||||
{Math.abs(weightChange).toFixed(1)}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.textContent}>
|
||||
<View style={styles.dateTimeContainer}>
|
||||
<Text style={styles.dateText}>
|
||||
{dayjs(record.createdAt).format('MM-DD')}
|
||||
</Text>
|
||||
<Text style={styles.timeText}>
|
||||
{dayjs(record.createdAt).format('HH:mm')}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.weightInfo}>
|
||||
<Text style={styles.weightValue}>{record.weight}<Text style={styles.unitText}>{t('weightRecords.modal.unit')}</Text></Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.rightContent}>
|
||||
{Math.abs(weightChange) > 0 && (
|
||||
<View style={[
|
||||
styles.changeTag,
|
||||
{ backgroundColor: weightChange < 0 ? '#E8F5E8' : '#FFF2E8' }
|
||||
]}>
|
||||
<Ionicons
|
||||
name={weightChange < 0 ? "arrow-down" : "arrow-up"}
|
||||
size={10}
|
||||
color={weightChange < 0 ? '#22C55E' : '#FF9500'}
|
||||
/>
|
||||
<Text style={[
|
||||
styles.changeText,
|
||||
{ color: weightChange < 0 ? '#22C55E' : '#FF9500' }
|
||||
]}>
|
||||
{Math.abs(weightChange).toFixed(1)}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
style={styles.editButton}
|
||||
onPress={() => onPress?.(record)}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<Ionicons name="ellipsis-vertical" size={16} color="#9ba3c7" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Swipeable>
|
||||
</Swipeable>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
cardContainer: {
|
||||
shadowColor: 'rgba(30, 41, 59, 0.08)',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 12,
|
||||
elevation: 4,
|
||||
},
|
||||
recordCard: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
marginBottom: 12,
|
||||
},
|
||||
recordHeader: {
|
||||
borderRadius: 24,
|
||||
padding: 16,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
recordDateTime: {
|
||||
fontSize: 14,
|
||||
color: '#687076',
|
||||
fontWeight: '500',
|
||||
},
|
||||
recordEditButton: {
|
||||
padding: 6,
|
||||
borderRadius: 8,
|
||||
backgroundColor: 'rgba(255, 149, 0, 0.1)',
|
||||
},
|
||||
recordContent: {
|
||||
leftContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
recordWeightLabel: {
|
||||
fontSize: 16,
|
||||
color: '#687076',
|
||||
fontWeight: '500',
|
||||
},
|
||||
recordWeightValue: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
marginLeft: 4,
|
||||
flex: 1,
|
||||
},
|
||||
weightChangeTag: {
|
||||
iconContainer: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
backgroundColor: '#F0F2F5',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 16,
|
||||
},
|
||||
icon: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
tintColor: '#4F5BD5',
|
||||
},
|
||||
textContent: {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
dateTimeContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
marginLeft: 12,
|
||||
marginBottom: 4,
|
||||
},
|
||||
weightChangeText: {
|
||||
fontSize: 12,
|
||||
dateText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#1c1f3a',
|
||||
marginRight: 8,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
timeText: {
|
||||
fontSize: 12,
|
||||
color: '#6f7ba7',
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
weightInfo: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'baseline',
|
||||
},
|
||||
weightValue: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#1c1f3a',
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
unitText: {
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
color: '#6f7ba7',
|
||||
marginLeft: 2,
|
||||
fontFamily: 'AliRegular',
|
||||
},
|
||||
rightContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
},
|
||||
changeTag: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 8,
|
||||
},
|
||||
changeText: {
|
||||
fontSize: 11,
|
||||
fontWeight: '700',
|
||||
marginLeft: 2,
|
||||
fontFamily: 'AliBold',
|
||||
},
|
||||
editButton: {
|
||||
padding: 4,
|
||||
},
|
||||
deleteButton: {
|
||||
backgroundColor: '#EF4444',
|
||||
backgroundColor: '#FF6B6B',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: 80,
|
||||
borderRadius: 16,
|
||||
marginBottom: 12,
|
||||
marginLeft: 8,
|
||||
},
|
||||
deleteButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginTop: 4,
|
||||
width: 70,
|
||||
borderRadius: 24,
|
||||
marginLeft: 12,
|
||||
height: '100%',
|
||||
},
|
||||
});
|
||||
@@ -1,10 +1,11 @@
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/en';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Animated,
|
||||
Dimensions,
|
||||
Modal,
|
||||
ScrollView,
|
||||
@@ -15,6 +16,7 @@ import {
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import {
|
||||
HeartRateZoneStat,
|
||||
WorkoutDetailMetrics,
|
||||
@@ -59,62 +61,49 @@ export function WorkoutDetailModal({
|
||||
onRetry,
|
||||
errorMessage,
|
||||
}: WorkoutDetailModalProps) {
|
||||
const animation = useRef(new Animated.Value(visible ? 1 : 0)).current;
|
||||
const { t, i18n } = useI18n();
|
||||
const [isMounted, setIsMounted] = useState(visible);
|
||||
const [shouldRenderChart, setShouldRenderChart] = useState(visible);
|
||||
const [showIntensityInfo, setShowIntensityInfo] = useState(false);
|
||||
|
||||
const locale = useMemo(() => (i18n.language?.startsWith('en') ? 'en' : 'zh-cn'), [i18n.language]);
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
setIsMounted(true);
|
||||
Animated.timing(animation, {
|
||||
toValue: 1,
|
||||
duration: 280,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
setShouldRenderChart(true);
|
||||
} else {
|
||||
Animated.timing(animation, {
|
||||
toValue: 0,
|
||||
duration: 240,
|
||||
useNativeDriver: true,
|
||||
}).start(({ finished }) => {
|
||||
if (finished) {
|
||||
setIsMounted(false);
|
||||
}
|
||||
});
|
||||
|
||||
setShouldRenderChart(false);
|
||||
setIsMounted(false);
|
||||
setShowIntensityInfo(false);
|
||||
}
|
||||
}, [visible, animation]);
|
||||
|
||||
const translateY = animation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [SHEET_MAX_HEIGHT, 0],
|
||||
});
|
||||
|
||||
const backdropOpacity = animation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, 1],
|
||||
});
|
||||
}, [visible]);
|
||||
|
||||
const activityName = workout
|
||||
? getWorkoutTypeDisplayName(workout.workoutActivityType as WorkoutActivityType)
|
||||
: '';
|
||||
const chartWidth = useMemo(
|
||||
() => Math.max(Dimensions.get('window').width - 96, 240),
|
||||
[]
|
||||
);
|
||||
|
||||
const dateInfo = useMemo(() => {
|
||||
if (!workout) {
|
||||
return { title: '', subtitle: '' };
|
||||
}
|
||||
|
||||
const date = dayjs(workout.startDate || workout.endDate);
|
||||
const date = dayjs(workout.startDate || workout.endDate).locale(locale);
|
||||
if (!date.isValid()) {
|
||||
return { title: '', subtitle: '' };
|
||||
}
|
||||
|
||||
return {
|
||||
title: date.format('M月D日'),
|
||||
subtitle: date.format('YYYY年M月D日 dddd HH:mm'),
|
||||
title: locale === 'en' ? date.format('MMM D') : date.format('M月D日'),
|
||||
subtitle: locale === 'en'
|
||||
? date.format('dddd, MMM D, YYYY HH:mm')
|
||||
: date.format('YYYY年M月D日 dddd HH:mm'),
|
||||
};
|
||||
}, [workout]);
|
||||
}, [locale, workout]);
|
||||
|
||||
const heartRateChart = useMemo(() => {
|
||||
if (!metrics?.heartRateSeries?.length) {
|
||||
@@ -156,23 +145,16 @@ export function WorkoutDetailModal({
|
||||
return (
|
||||
<Modal
|
||||
transparent
|
||||
visible={isMounted}
|
||||
animationType="none"
|
||||
visible={visible}
|
||||
animationType='slide'
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<View style={styles.modalContainer}>
|
||||
<TouchableWithoutFeedback onPress={handleBackdropPress}>
|
||||
<Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]} />
|
||||
<View style={styles.backdrop} />
|
||||
</TouchableWithoutFeedback>
|
||||
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.sheetContainer,
|
||||
{
|
||||
transform: [{ translateY }],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.sheetContainer}>
|
||||
<LinearGradient
|
||||
colors={['#FFFFFF', '#F3F5FF']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
@@ -206,7 +188,7 @@ export function WorkoutDetailModal({
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.contentContainer}
|
||||
>
|
||||
<View style={styles.summaryCard}>
|
||||
<View style={[styles.summaryCard, loading ? styles.summaryCardLoading : null]}>
|
||||
<View style={styles.summaryHeader}>
|
||||
<Text style={styles.activityName}>{activityName}</Text>
|
||||
{intensityBadge ? (
|
||||
@@ -223,32 +205,34 @@ export function WorkoutDetailModal({
|
||||
) : null}
|
||||
</View>
|
||||
<Text style={styles.summarySubtitle}>
|
||||
{dayjs(workout?.startDate || workout?.endDate).format('YYYY年M月D日 dddd HH:mm')}
|
||||
{dayjs(workout?.startDate || workout?.endDate)
|
||||
.locale(locale)
|
||||
.format(locale === 'en' ? 'dddd, MMM D, YYYY HH:mm' : 'YYYY年M月D日 dddd HH:mm')}
|
||||
</Text>
|
||||
|
||||
{loading ? (
|
||||
<View style={styles.loadingBlock}>
|
||||
<ActivityIndicator color="#5C55FF" />
|
||||
<Text style={styles.loadingLabel}>正在加载锻炼详情...</Text>
|
||||
<Text style={styles.loadingLabel}>{t('workoutDetail.loading')}</Text>
|
||||
</View>
|
||||
) : metrics ? (
|
||||
<>
|
||||
<View style={styles.metricsRow}>
|
||||
<View style={styles.metricItem}>
|
||||
<Text style={styles.metricTitle}>体能训练时间</Text>
|
||||
<Text style={styles.metricTitle}>{t('workoutDetail.metrics.duration')}</Text>
|
||||
<Text style={styles.metricValue}>{metrics.durationLabel}</Text>
|
||||
</View>
|
||||
<View style={styles.metricItem}>
|
||||
<Text style={styles.metricTitle}>运动热量</Text>
|
||||
<Text style={styles.metricTitle}>{t('workoutDetail.metrics.calories')}</Text>
|
||||
<Text style={styles.metricValue}>
|
||||
{metrics.calories != null ? `${metrics.calories} 千卡` : '--'}
|
||||
{metrics.calories != null ? `${metrics.calories} ${t('workoutDetail.metrics.caloriesUnit')}` : '--'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.metricsRow}>
|
||||
<View style={styles.metricItem}>
|
||||
<View style={styles.metricTitleRow}>
|
||||
<Text style={styles.metricTitle}>运动强度</Text>
|
||||
<Text style={styles.metricTitle}>{t('workoutDetail.metrics.intensity')}</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowIntensityInfo(true)}
|
||||
style={styles.metricInfoButton}
|
||||
@@ -262,9 +246,9 @@ export function WorkoutDetailModal({
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.metricItem}>
|
||||
<Text style={styles.metricTitle}>平均心率</Text>
|
||||
<Text style={styles.metricTitle}>{t('workoutDetail.metrics.averageHeartRate')}</Text>
|
||||
<Text style={styles.metricValue}>
|
||||
{metrics.averageHeartRate != null ? `${metrics.averageHeartRate} 次/分` : '--'}
|
||||
{metrics.averageHeartRate != null ? `${metrics.averageHeartRate} ${t('workoutDetail.metrics.heartRateUnit')}` : '--'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -275,20 +259,20 @@ export function WorkoutDetailModal({
|
||||
) : (
|
||||
<View style={styles.errorBlock}>
|
||||
<Text style={styles.errorText}>
|
||||
{errorMessage || '未能获取到完整的锻炼详情'}
|
||||
{errorMessage || t('workoutDetail.errors.loadFailed')}
|
||||
</Text>
|
||||
{onRetry ? (
|
||||
<TouchableOpacity style={styles.retryButton} onPress={onRetry}>
|
||||
<Text style={styles.retryButtonText}>重新加载</Text>
|
||||
<Text style={styles.retryButtonText}>{t('workoutDetail.retry')}</Text>
|
||||
</TouchableOpacity>
|
||||
) : null}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<View style={[styles.section, loading ? styles.sectionHeartRateLoading : null]}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionTitle}>心率范围</Text>
|
||||
<Text style={styles.sectionTitle}>{t('workoutDetail.sections.heartRateRange')}</Text>
|
||||
</View>
|
||||
|
||||
{loading ? (
|
||||
@@ -299,21 +283,21 @@ export function WorkoutDetailModal({
|
||||
<>
|
||||
<View style={styles.heartRateSummaryRow}>
|
||||
<View style={styles.heartRateStat}>
|
||||
<Text style={styles.statLabel}>平均心率</Text>
|
||||
<Text style={styles.statLabel}>{t('workoutDetail.sections.averageHeartRate')}</Text>
|
||||
<Text style={styles.statValue}>
|
||||
{metrics.averageHeartRate != null ? `${metrics.averageHeartRate}次/分` : '--'}
|
||||
{metrics.averageHeartRate != null ? `${metrics.averageHeartRate} ${t('workoutDetail.sections.heartRateUnit')}` : '--'}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.heartRateStat}>
|
||||
<Text style={styles.statLabel}>最高心率</Text>
|
||||
<Text style={styles.statLabel}>{t('workoutDetail.sections.maximumHeartRate')}</Text>
|
||||
<Text style={styles.statValue}>
|
||||
{metrics.maximumHeartRate != null ? `${metrics.maximumHeartRate}次/分` : '--'}
|
||||
{metrics.maximumHeartRate != null ? `${metrics.maximumHeartRate} ${t('workoutDetail.sections.heartRateUnit')}` : '--'}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.heartRateStat}>
|
||||
<Text style={styles.statLabel}>最低心率</Text>
|
||||
<Text style={styles.statLabel}>{t('workoutDetail.sections.minimumHeartRate')}</Text>
|
||||
<Text style={styles.statValue}>
|
||||
{metrics.minimumHeartRate != null ? `${metrics.minimumHeartRate}次/分` : '--'}
|
||||
{metrics.minimumHeartRate != null ? `${metrics.minimumHeartRate} ${t('workoutDetail.sections.heartRateUnit')}` : '--'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -321,67 +305,75 @@ export function WorkoutDetailModal({
|
||||
{heartRateChart ? (
|
||||
LineChart ? (
|
||||
<View style={styles.chartWrapper}>
|
||||
{/* @ts-ignore - react-native-chart-kit types are outdated */}
|
||||
<LineChart
|
||||
data={{
|
||||
labels: heartRateChart.labels,
|
||||
datasets: [
|
||||
{
|
||||
data: heartRateChart.data,
|
||||
color: () => '#5C55FF',
|
||||
strokeWidth: 2,
|
||||
{shouldRenderChart ? (
|
||||
/* @ts-ignore - react-native-chart-kit types are outdated */
|
||||
<LineChart
|
||||
data={{
|
||||
labels: heartRateChart.labels,
|
||||
datasets: [
|
||||
{
|
||||
data: heartRateChart.data,
|
||||
color: () => '#5C55FF',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
],
|
||||
}}
|
||||
width={chartWidth}
|
||||
height={220}
|
||||
fromZero={false}
|
||||
yAxisSuffix={t('workoutDetail.sections.heartRateUnit')}
|
||||
withInnerLines={false}
|
||||
bezier
|
||||
paddingRight={48}
|
||||
chartConfig={{
|
||||
backgroundColor: '#FFFFFF',
|
||||
backgroundGradientFrom: '#FFFFFF',
|
||||
backgroundGradientTo: '#FFFFFF',
|
||||
decimalPlaces: 0,
|
||||
color: (opacity = 1) => `rgba(92, 85, 255, ${opacity})`,
|
||||
labelColor: (opacity = 1) => `rgba(98, 105, 138, ${opacity})`,
|
||||
propsForDots: {
|
||||
r: '3',
|
||||
strokeWidth: '2',
|
||||
stroke: '#FFFFFF',
|
||||
},
|
||||
],
|
||||
}}
|
||||
width={Dimensions.get('window').width - 72}
|
||||
height={220}
|
||||
fromZero={false}
|
||||
yAxisSuffix="次/分"
|
||||
withInnerLines={false}
|
||||
bezier
|
||||
chartConfig={{
|
||||
backgroundColor: '#FFFFFF',
|
||||
backgroundGradientFrom: '#FFFFFF',
|
||||
backgroundGradientTo: '#FFFFFF',
|
||||
decimalPlaces: 0,
|
||||
color: (opacity = 1) => `rgba(92, 85, 255, ${opacity})`,
|
||||
labelColor: (opacity = 1) => `rgba(98, 105, 138, ${opacity})`,
|
||||
propsForDots: {
|
||||
r: '3',
|
||||
strokeWidth: '2',
|
||||
stroke: '#FFFFFF',
|
||||
},
|
||||
fillShadowGradientFromOpacity: 0.1,
|
||||
fillShadowGradientToOpacity: 0.02,
|
||||
}}
|
||||
style={styles.chartStyle}
|
||||
/>
|
||||
fillShadowGradientFromOpacity: 0.1,
|
||||
fillShadowGradientToOpacity: 0.02,
|
||||
}}
|
||||
style={styles.chartStyle}
|
||||
/>
|
||||
) : (
|
||||
<View style={[styles.chartLoading, { width: chartWidth }]}>
|
||||
<ActivityIndicator color="#5C55FF" />
|
||||
<Text style={styles.chartLoadingText}>{t('workoutDetail.loading')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.chartEmpty}>
|
||||
<MaterialCommunityIcons name="chart-line-variant" size={32} color="#C5CBE2" />
|
||||
<Text style={styles.chartEmptyText}>图表组件不可用,无法展示心率曲线</Text>
|
||||
<Text style={styles.chartEmptyText}>{t('workoutDetail.chart.unavailable')}</Text>
|
||||
</View>
|
||||
)
|
||||
) : (
|
||||
<View style={styles.chartEmpty}>
|
||||
<MaterialCommunityIcons name="heart-off-outline" size={32} color="#C5CBE2" />
|
||||
<Text style={styles.chartEmptyText}>暂无心率采样数据</Text>
|
||||
<Text style={styles.chartEmptyText}>{t('workoutDetail.chart.noData')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<View style={styles.sectionError}>
|
||||
<Text style={styles.errorTextSmall}>
|
||||
{errorMessage || '未获取到心率数据'}
|
||||
{errorMessage || t('workoutDetail.errors.noHeartRateData')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<View style={[styles.section, loading ? styles.sectionZonesLoading : null]}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionTitle}>心率训练区间</Text>
|
||||
<Text style={styles.sectionTitle}>{t('workoutDetail.sections.heartRateZones')}</Text>
|
||||
</View>
|
||||
|
||||
{loading ? (
|
||||
@@ -389,15 +381,15 @@ export function WorkoutDetailModal({
|
||||
<ActivityIndicator color="#5C55FF" />
|
||||
</View>
|
||||
) : metrics ? (
|
||||
metrics.heartRateZones.map(renderHeartRateZone)
|
||||
metrics.heartRateZones.map((zone) => renderHeartRateZone(zone, t))
|
||||
) : (
|
||||
<Text style={styles.errorTextSmall}>暂无区间统计</Text>
|
||||
<Text style={styles.errorTextSmall}>{t('workoutDetail.errors.noZoneStats')}</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.homeIndicatorSpacer} />
|
||||
</ScrollView>
|
||||
</Animated.View>
|
||||
</View>
|
||||
{showIntensityInfo ? (
|
||||
<Modal
|
||||
transparent
|
||||
@@ -410,36 +402,36 @@ export function WorkoutDetailModal({
|
||||
<TouchableWithoutFeedback onPress={() => { }}>
|
||||
<View style={styles.intensityInfoSheet}>
|
||||
<View style={styles.intensityHandle} />
|
||||
<Text style={styles.intensityInfoTitle}>什么是运动强度?</Text>
|
||||
<Text style={styles.intensityInfoTitle}>{t('workoutDetail.intensityInfo.title')}</Text>
|
||||
<Text style={styles.intensityInfoText}>
|
||||
运动强度是你完成一项任务所用的能量估算,是衡量锻炼和其他日常活动能耗强度的指标,单位为 MET(千卡/(千克·小时))。
|
||||
{t('workoutDetail.intensityInfo.description1')}
|
||||
</Text>
|
||||
<Text style={styles.intensityInfoText}>
|
||||
因为每个人的代谢状况不同,MET 以身体的静息能耗作为参考,便于衡量不同活动的强度。
|
||||
{t('workoutDetail.intensityInfo.description2')}
|
||||
</Text>
|
||||
<Text style={styles.intensityInfoText}>
|
||||
例如:散步(约 3 km/h)相当于 2 METs,意味着它需要消耗静息状态 2 倍的能量。
|
||||
{t('workoutDetail.intensityInfo.description3')}
|
||||
</Text>
|
||||
<Text style={styles.intensityInfoText}>
|
||||
注:当设备未提供 METs 值时,系统会根据您的卡路里消耗和锻炼时长自动计算(使用70公斤估算体重)。
|
||||
{t('workoutDetail.intensityInfo.description4')}
|
||||
</Text>
|
||||
<View style={styles.intensityFormula}>
|
||||
<Text style={styles.intensityFormulaLabel}>运动强度计算公式</Text>
|
||||
<Text style={styles.intensityFormulaValue}>METs = 活动能耗(千卡/小时) ÷ 静息能耗(1 千卡/小时)</Text>
|
||||
<Text style={styles.intensityFormulaLabel}>{t('workoutDetail.intensityInfo.formula.title')}</Text>
|
||||
<Text style={styles.intensityFormulaValue}>{t('workoutDetail.intensityInfo.formula.value')}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.intensityLegend}>
|
||||
<View style={styles.intensityLegendRow}>
|
||||
<Text style={styles.intensityLegendRange}>{'< 3'}</Text>
|
||||
<Text style={[styles.intensityLegendLabel, styles.intensityLow]}>低强度活动</Text>
|
||||
<Text style={styles.intensityLegendRange}>{t('workoutDetail.intensityInfo.legend.low')}</Text>
|
||||
<Text style={[styles.intensityLegendLabel, styles.intensityLow]}>{t('workoutDetail.intensityInfo.legend.lowLabel')}</Text>
|
||||
</View>
|
||||
<View style={styles.intensityLegendRow}>
|
||||
<Text style={styles.intensityLegendRange}>3 - 6</Text>
|
||||
<Text style={[styles.intensityLegendLabel, styles.intensityMedium]}>中强度活动</Text>
|
||||
<Text style={styles.intensityLegendRange}>{t('workoutDetail.intensityInfo.legend.medium')}</Text>
|
||||
<Text style={[styles.intensityLegendLabel, styles.intensityMedium]}>{t('workoutDetail.intensityInfo.legend.mediumLabel')}</Text>
|
||||
</View>
|
||||
<View style={styles.intensityLegendRow}>
|
||||
<Text style={styles.intensityLegendRange}>{'≥ 6'}</Text>
|
||||
<Text style={[styles.intensityLegendLabel, styles.intensityHigh]}>高强度活动</Text>
|
||||
<Text style={styles.intensityLegendRange}>{t('workoutDetail.intensityInfo.legend.high')}</Text>
|
||||
<Text style={[styles.intensityLegendLabel, styles.intensityHigh]}>{t('workoutDetail.intensityInfo.legend.highLabel')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@@ -511,6 +503,7 @@ function trimHeartRateSeries(series: WorkoutDetailMetrics['heartRateSeries']) {
|
||||
|
||||
// 遍历所有点,选择重要点
|
||||
let minDistance = Math.max(1, Math.floor(n / HEART_RATE_CHART_MAX_POINTS));
|
||||
let lastSelectedIndex = 0;
|
||||
|
||||
for (let i = 1; i < n - 1; i++) {
|
||||
const shouldKeep =
|
||||
@@ -523,11 +516,9 @@ function trimHeartRateSeries(series: WorkoutDetailMetrics['heartRateSeries']) {
|
||||
|
||||
if (shouldKeep) {
|
||||
// 检查与上一个选中点的距离,避免过于密集
|
||||
const lastSelectedIndex = result.length > 0 ?
|
||||
series.findIndex(p => p.timestamp === result[result.length - 1].timestamp) : 0;
|
||||
|
||||
if (i - lastSelectedIndex >= minDistance || isLocalExtremum(i)) {
|
||||
result.push(series[i]);
|
||||
lastSelectedIndex = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -553,7 +544,21 @@ function trimHeartRateSeries(series: WorkoutDetailMetrics['heartRateSeries']) {
|
||||
return result;
|
||||
}
|
||||
|
||||
function renderHeartRateZone(zone: HeartRateZoneStat) {
|
||||
function renderHeartRateZone(
|
||||
zone: HeartRateZoneStat,
|
||||
t: (key: string, options?: Record<string, any>) => string
|
||||
) {
|
||||
const label = t(`workoutDetail.zones.labels.${zone.key}`, {
|
||||
defaultValue: zone.label,
|
||||
});
|
||||
const range = t(`workoutDetail.zones.ranges.${zone.key}`, {
|
||||
defaultValue: zone.rangeText,
|
||||
});
|
||||
const meta = t('workoutDetail.zones.summary', {
|
||||
minutes: zone.durationMinutes,
|
||||
range,
|
||||
});
|
||||
|
||||
return (
|
||||
<View key={zone.key} style={styles.zoneRow}>
|
||||
<View style={[styles.zoneBar, { backgroundColor: `${zone.color}33` }]}>
|
||||
@@ -568,10 +573,8 @@ function renderHeartRateZone(zone: HeartRateZoneStat) {
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.zoneInfo}>
|
||||
<Text style={styles.zoneLabel}>{zone.label}</Text>
|
||||
<Text style={styles.zoneMeta}>
|
||||
{zone.durationMinutes} 分钟 · {zone.rangeText}
|
||||
</Text>
|
||||
<Text style={styles.zoneLabel}>{label}</Text>
|
||||
<Text style={styles.zoneMeta}>{meta}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@@ -666,20 +669,28 @@ const styles = StyleSheet.create({
|
||||
shadowRadius: 22,
|
||||
elevation: 8,
|
||||
},
|
||||
summaryCardLoading: {
|
||||
minHeight: 240,
|
||||
},
|
||||
summaryHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
flexWrap: 'wrap',
|
||||
gap: 10,
|
||||
},
|
||||
activityName: {
|
||||
fontSize: 24,
|
||||
fontWeight: '700',
|
||||
color: '#1E2148',
|
||||
flex: 1,
|
||||
flexShrink: 1,
|
||||
lineHeight: 30,
|
||||
},
|
||||
intensityPill: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 999,
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
intensityPillText: {
|
||||
fontSize: 12,
|
||||
@@ -766,6 +777,12 @@ const styles = StyleSheet.create({
|
||||
shadowRadius: 20,
|
||||
elevation: 4,
|
||||
},
|
||||
sectionHeartRateLoading: {
|
||||
minHeight: 360,
|
||||
},
|
||||
sectionZonesLoading: {
|
||||
minHeight: 200,
|
||||
},
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
@@ -809,11 +826,22 @@ const styles = StyleSheet.create({
|
||||
color: '#1E2148',
|
||||
},
|
||||
chartWrapper: {
|
||||
alignItems: 'flex-start',
|
||||
overflow: 'visible',
|
||||
},
|
||||
chartLoading: {
|
||||
height: 220,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
chartLoadingText: {
|
||||
marginTop: 8,
|
||||
fontSize: 12,
|
||||
color: '#7E86A7',
|
||||
},
|
||||
chartStyle: {
|
||||
marginLeft: -10,
|
||||
marginRight: -10,
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
},
|
||||
chartEmpty: {
|
||||
paddingVertical: 32,
|
||||
@@ -947,4 +975,3 @@ const styles = StyleSheet.create({
|
||||
height: 40,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
135
contexts/VersionCheckContext.tsx
Normal file
135
contexts/VersionCheckContext.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import VersionUpdateModal from '@/components/VersionUpdateModal';
|
||||
import { useToast } from '@/contexts/ToastContext';
|
||||
import { fetchVersionInfo, getCurrentAppVersion, type VersionInfo } from '@/services/version';
|
||||
import { log } from '@/utils/logger';
|
||||
import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Linking } from 'react-native';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
type VersionCheckContextValue = {
|
||||
isChecking: boolean;
|
||||
updateInfo: VersionInfo | null;
|
||||
checkForUpdate: (options?: { manual?: boolean }) => Promise<VersionInfo | null>;
|
||||
openStore: () => Promise<void>;
|
||||
};
|
||||
|
||||
const VersionCheckContext = createContext<VersionCheckContextValue | undefined>(undefined);
|
||||
|
||||
export function VersionCheckProvider({ children }: { children: React.ReactNode }) {
|
||||
const { showSuccess, showError } = useToast();
|
||||
const { t } = useTranslation();
|
||||
const [isChecking, setIsChecking] = useState(false);
|
||||
const [updateInfo, setUpdateInfo] = useState<VersionInfo | null>(null);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const hasAutoCheckedRef = useRef(false);
|
||||
const currentVersion = useMemo(() => getCurrentAppVersion(), []);
|
||||
|
||||
const openStore = useCallback(async () => {
|
||||
if (!updateInfo?.appStoreUrl) {
|
||||
showError(t('personal.versionCheck.missingUrl'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const supported = await Linking.canOpenURL(updateInfo.appStoreUrl);
|
||||
if (!supported) {
|
||||
throw new Error('URL not supported');
|
||||
}
|
||||
await Linking.openURL(updateInfo.appStoreUrl);
|
||||
log.info('version-update-open-store', { url: updateInfo.appStoreUrl });
|
||||
} catch (error) {
|
||||
log.error('version-update-open-store-failed', error);
|
||||
showError(t('personal.versionCheck.openStoreFailed'));
|
||||
}
|
||||
}, [showError, t, updateInfo]);
|
||||
|
||||
const checkForUpdate = useCallback(
|
||||
async ({ manual = false }: { manual?: boolean } = {}) => {
|
||||
if (isChecking) {
|
||||
if (manual) {
|
||||
showSuccess(t('personal.versionCheck.checking'));
|
||||
}
|
||||
return updateInfo;
|
||||
}
|
||||
|
||||
setIsChecking(true);
|
||||
try {
|
||||
const info = await fetchVersionInfo();
|
||||
setUpdateInfo(info);
|
||||
setModalVisible(Boolean(info?.needsUpdate));
|
||||
|
||||
if (info?.needsUpdate && manual) {
|
||||
showSuccess(
|
||||
t('personal.versionCheck.updateFound', {
|
||||
version: info.latestVersion,
|
||||
})
|
||||
);
|
||||
} else if (!info?.needsUpdate && manual) {
|
||||
showSuccess(t('personal.versionCheck.upToDate'));
|
||||
}
|
||||
|
||||
return info;
|
||||
} catch (error) {
|
||||
log.error('version-check-failed', error);
|
||||
if (manual) {
|
||||
showError(t('personal.versionCheck.failed'));
|
||||
}
|
||||
return null;
|
||||
} finally {
|
||||
setIsChecking(false);
|
||||
}
|
||||
},
|
||||
[isChecking, showError, showSuccess, t, updateInfo]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (hasAutoCheckedRef.current) return;
|
||||
hasAutoCheckedRef.current = true;
|
||||
checkForUpdate({ manual: false }).catch((error) => {
|
||||
log.error('auto-version-check-failed', error);
|
||||
});
|
||||
}, [checkForUpdate]);
|
||||
|
||||
const strings = useMemo(
|
||||
() => ({
|
||||
title: t('personal.versionCheck.modalTitle'),
|
||||
tag: t('personal.versionCheck.modalTag'),
|
||||
currentVersionLabel: t('personal.versionCheck.currentVersion'),
|
||||
latestVersionLabel: t('personal.versionCheck.latestVersion'),
|
||||
updatesTitle: t('personal.versionCheck.releaseNotesTitle'),
|
||||
fallbackNote: t('personal.versionCheck.fallbackNotes'),
|
||||
remindLater: t('personal.versionCheck.later'),
|
||||
updateCta: t('personal.versionCheck.updateNow'),
|
||||
}),
|
||||
[t]
|
||||
);
|
||||
|
||||
return (
|
||||
<VersionCheckContext.Provider
|
||||
value={{
|
||||
isChecking,
|
||||
updateInfo,
|
||||
checkForUpdate,
|
||||
openStore,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
<VersionUpdateModal
|
||||
visible={modalVisible && Boolean(updateInfo?.needsUpdate)}
|
||||
info={updateInfo}
|
||||
currentVersion={currentVersion}
|
||||
onClose={() => setModalVisible(false)}
|
||||
onUpdate={openStore}
|
||||
strings={strings}
|
||||
/>
|
||||
</VersionCheckContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useVersionCheck(): VersionCheckContextValue {
|
||||
const context = useContext(VersionCheckContext);
|
||||
if (!context) {
|
||||
throw new Error('useVersionCheck must be used within VersionCheckProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import { Alert } from 'react-native';
|
||||
|
||||
import { ROUTES } from '@/constants/Routes';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { STORAGE_KEYS, api } from '@/services/api';
|
||||
import { logout as logoutAction } from '@/store/userSlice';
|
||||
|
||||
@@ -21,6 +22,7 @@ export function useAuthGuard() {
|
||||
const dispatch = useAppDispatch();
|
||||
const currentPath = usePathname();
|
||||
const user = useAppSelector(state => state.user);
|
||||
const { t } = useI18n();
|
||||
|
||||
// 判断登录状态:优先使用 token,因为 token 是登录的根本凭证
|
||||
// profile.id 可能在初始化时还未加载,但 token 已经从 AsyncStorage 恢复
|
||||
@@ -74,28 +76,28 @@ export function useAuthGuard() {
|
||||
router.push('/auth/login');
|
||||
} catch (error) {
|
||||
console.error('退出登录失败:', error);
|
||||
Alert.alert('错误', '退出登录失败,请稍后重试');
|
||||
Alert.alert(t('authGuard.logout.error'), t('authGuard.logout.errorMessage'));
|
||||
}
|
||||
}, [dispatch, router]);
|
||||
}, [dispatch, router, t]);
|
||||
|
||||
// 带确认对话框的退出登录
|
||||
const confirmLogout = useCallback(() => {
|
||||
Alert.alert(
|
||||
'确认退出',
|
||||
'确定要退出当前账号吗?',
|
||||
t('authGuard.confirmLogout.title'),
|
||||
t('authGuard.confirmLogout.message'),
|
||||
[
|
||||
{
|
||||
text: '取消',
|
||||
text: t('authGuard.confirmLogout.cancelButton'),
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: '确定',
|
||||
text: t('authGuard.confirmLogout.confirmButton'),
|
||||
style: 'default',
|
||||
onPress: handleLogout,
|
||||
},
|
||||
]
|
||||
);
|
||||
}, [handleLogout]);
|
||||
}, [handleLogout, t]);
|
||||
|
||||
// 注销账号功能
|
||||
const handleDeleteAccount = useCallback(async () => {
|
||||
@@ -109,38 +111,38 @@ export function useAuthGuard() {
|
||||
// 执行退出登录逻辑
|
||||
await dispatch(logoutAction()).unwrap();
|
||||
|
||||
Alert.alert('账号已注销', '您的账号已成功注销', [
|
||||
Alert.alert(t('authGuard.deleteAccount.successTitle'), t('authGuard.deleteAccount.successMessage'), [
|
||||
{
|
||||
text: '确定',
|
||||
text: t('authGuard.deleteAccount.confirmButton'),
|
||||
onPress: () => router.push('/auth/login'),
|
||||
},
|
||||
]);
|
||||
} catch (error: any) {
|
||||
console.error('注销账号失败:', error);
|
||||
const message = error?.message || '注销失败,请稍后重试';
|
||||
Alert.alert('注销失败', message);
|
||||
const message = error?.message || t('authGuard.deleteAccount.errorMessage');
|
||||
Alert.alert(t('authGuard.deleteAccount.errorTitle'), message);
|
||||
}
|
||||
}, [dispatch, router]);
|
||||
}, [dispatch, router, t]);
|
||||
|
||||
// 带确认对话框的注销账号
|
||||
const confirmDeleteAccount = useCallback(() => {
|
||||
Alert.alert(
|
||||
'确认注销账号',
|
||||
'此操作不可恢复,将删除您的账号及相关数据。确定继续吗?',
|
||||
t('authGuard.confirmDeleteAccount.title'),
|
||||
t('authGuard.confirmDeleteAccount.message'),
|
||||
[
|
||||
{
|
||||
text: '取消',
|
||||
text: t('authGuard.confirmDeleteAccount.cancelButton'),
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: '确认注销',
|
||||
text: t('authGuard.confirmDeleteAccount.confirmButton'),
|
||||
style: 'destructive',
|
||||
onPress: handleDeleteAccount,
|
||||
},
|
||||
],
|
||||
{ cancelable: true }
|
||||
);
|
||||
}, [handleDeleteAccount]);
|
||||
}, [handleDeleteAccount, t]);
|
||||
|
||||
return {
|
||||
isLoggedIn,
|
||||
|
||||
303
i18n/en/challenge.ts
Normal file
303
i18n/en/challenge.ts
Normal file
@@ -0,0 +1,303 @@
|
||||
export const challengeDetail = {
|
||||
title: 'Challenge Details',
|
||||
notFound: 'Challenge not found, please try again later.',
|
||||
loading: 'Loading challenge details…',
|
||||
retry: 'Reload',
|
||||
share: {
|
||||
generating: 'Generating share card...',
|
||||
failed: 'Share failed, please try again later',
|
||||
messageJoined: 'I\'m participating in "{{title}}" challenge, completed {{completed}}/{{target}} days! Join me!',
|
||||
messageNotJoined: 'Found an amazing challenge "{{title}}", let\'s join together!',
|
||||
},
|
||||
dateRange: {
|
||||
format: '{{start}} - {{end}}',
|
||||
monthDay: 'Month {{month}} Day {{day}}',
|
||||
ongoing: 'Ongoing updates',
|
||||
},
|
||||
participants: {
|
||||
count: '{{count}} participants',
|
||||
ongoing: 'Ongoing updates',
|
||||
more: 'More',
|
||||
},
|
||||
detail: {
|
||||
requirement: 'Daily check-in auto accumulates',
|
||||
viewAllRanking: 'View All',
|
||||
},
|
||||
checkIn: {
|
||||
title: 'Challenge Check-in',
|
||||
todayChecked: 'Checked in today',
|
||||
subtitle: 'Daily check-ins accumulate progress towards goal',
|
||||
subtitleChecked: 'Today\'s progress recorded, keep it up tomorrow',
|
||||
button: {
|
||||
checkIn: 'Check In Now',
|
||||
checking: 'Checking in…',
|
||||
checked: 'Checked in today',
|
||||
notJoined: 'Join to check in',
|
||||
upcoming: 'Not started yet',
|
||||
expired: 'Challenge ended',
|
||||
},
|
||||
toast: {
|
||||
alreadyChecked: 'Already checked in today',
|
||||
notStarted: 'Challenge not started yet, check in after it begins',
|
||||
expired: 'Challenge has ended, cannot check in',
|
||||
mustJoin: 'Join the challenge to check in',
|
||||
success: 'Check-in successful, keep going!',
|
||||
failed: 'Check-in failed, please try again',
|
||||
},
|
||||
},
|
||||
cta: {
|
||||
join: 'Join Challenge',
|
||||
joining: 'Joining…',
|
||||
leave: 'Leave Challenge',
|
||||
leaving: 'Leaving…',
|
||||
delete: 'Delete Challenge',
|
||||
deleting: 'Deleting…',
|
||||
upcoming: 'Starting Soon',
|
||||
expired: 'Challenge Ended',
|
||||
},
|
||||
highlight: {
|
||||
join: {
|
||||
title: 'Join Challenge Now',
|
||||
subtitle: 'Invite friends to persist together, achieve more easily',
|
||||
},
|
||||
leave: {
|
||||
title: 'Don\'t leave just yet',
|
||||
subtitle: 'Keep going, the next milestone is around the corner',
|
||||
},
|
||||
upcoming: {
|
||||
title: 'Challenge Starting Soon',
|
||||
subtitle: 'Starts on {{date}}, stay tuned',
|
||||
subtitleFallback: 'Challenge coming soon, stay tuned',
|
||||
},
|
||||
expired: {
|
||||
title: 'Challenge Ended',
|
||||
subtitle: 'Ended on {{date}}, look forward to the next one',
|
||||
subtitleFallback: 'This round has ended, look forward to the next challenge',
|
||||
},
|
||||
},
|
||||
alert: {
|
||||
leaveConfirm: {
|
||||
title: 'Confirm leaving challenge?',
|
||||
message: 'You will need to rejoin to continue.',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Leave Challenge',
|
||||
},
|
||||
joinFailed: 'Failed to join challenge',
|
||||
leaveFailed: 'Failed to leave challenge',
|
||||
archiveConfirm: {
|
||||
title: 'Delete this challenge?',
|
||||
message: 'This cannot be undone and participants will lose access.',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Delete Challenge',
|
||||
},
|
||||
archiveFailed: 'Failed to delete challenge',
|
||||
archiveSuccess: 'Challenge deleted',
|
||||
},
|
||||
ranking: {
|
||||
title: 'Leaderboard',
|
||||
description: '',
|
||||
empty: 'Leaderboard opening soon, grab your spot.',
|
||||
today: 'Today',
|
||||
todayGoal: 'Today\'s Goal',
|
||||
hour: 'hrs',
|
||||
},
|
||||
leaderboard: {
|
||||
title: 'Leaderboard',
|
||||
loading: 'Loading leaderboard…',
|
||||
notFound: 'Challenge not found.',
|
||||
loadFailed: 'Unable to load leaderboard, please try again later.',
|
||||
empty: 'Leaderboard opening soon, grab your spot.',
|
||||
loadMore: 'Loading more…',
|
||||
loadMoreFailed: 'Failed to load more, pull to refresh and retry',
|
||||
},
|
||||
shareCard: {
|
||||
footer: 'Out Live · Beyond Life',
|
||||
progress: {
|
||||
label: 'My Progress',
|
||||
days: '{{completed}} / {{target}} days',
|
||||
completed: '🎉 Challenge Completed!',
|
||||
remaining: '{{remaining}} days to complete',
|
||||
},
|
||||
info: {
|
||||
checkInDaily: 'Daily check-in',
|
||||
joinUs: 'Join us!',
|
||||
},
|
||||
shareCode: {
|
||||
copied: 'Share code copied',
|
||||
},
|
||||
},
|
||||
shareCode: {
|
||||
copied: 'Share code copied',
|
||||
},
|
||||
};
|
||||
|
||||
export const badges = {
|
||||
title: 'Badge Gallery',
|
||||
subtitle: 'Celebrate every effort',
|
||||
hero: {
|
||||
highlight: 'Keep checking in to unlock rarer badges.',
|
||||
earnedLabel: 'Earned',
|
||||
totalLabel: 'Total',
|
||||
progressLabel: 'Progress',
|
||||
},
|
||||
categories: {
|
||||
all: 'All',
|
||||
sleep: 'Sleep',
|
||||
exercise: 'Exercise',
|
||||
diet: 'Nutrition',
|
||||
challenge: 'Challenge',
|
||||
social: 'Social',
|
||||
special: 'Special',
|
||||
},
|
||||
rarities: {
|
||||
common: 'Common',
|
||||
uncommon: 'Uncommon',
|
||||
rare: 'Rare',
|
||||
epic: 'Epic',
|
||||
legendary: 'Legendary',
|
||||
},
|
||||
status: {
|
||||
earned: 'Unlocked',
|
||||
locked: 'Locked',
|
||||
earnedAt: 'Unlocked on {{date}}',
|
||||
},
|
||||
legend: 'Rarity legend',
|
||||
filterLabel: 'Badge categories',
|
||||
empty: {
|
||||
title: 'No badges yet',
|
||||
description: 'Complete sleep, workout, or challenge tasks to earn your first badge.',
|
||||
action: 'Explore plans',
|
||||
},
|
||||
};
|
||||
|
||||
export const challenges = {
|
||||
title: 'Challenges',
|
||||
subtitle: 'Join challenges to stay consistent',
|
||||
loading: 'Loading challenges…',
|
||||
loadFailed: 'Failed to load challenges, please try again later.',
|
||||
retry: 'Retry',
|
||||
empty: 'No challenges yet. Join one to get started.',
|
||||
customChallenges: 'Custom Challenges',
|
||||
officialChallengesTitle: 'Official Challenges',
|
||||
officialChallenges: 'Official challenges launching soon.',
|
||||
join: 'Join',
|
||||
joined: 'Joined',
|
||||
invalidInviteCode: 'Please enter a valid invite code',
|
||||
joinSuccess: 'Joined challenge successfully',
|
||||
joinFailed: 'Failed to join challenge',
|
||||
joinModal: {
|
||||
title: 'Join via invite code',
|
||||
description: 'Enter the invite code to join a challenge',
|
||||
confirm: 'Join',
|
||||
joining: 'Joining…',
|
||||
cancel: 'Cancel',
|
||||
placeholder: 'Enter invite code',
|
||||
},
|
||||
statusLabels: {
|
||||
upcoming: 'Upcoming',
|
||||
ongoing: 'Ongoing',
|
||||
expired: 'Ended',
|
||||
},
|
||||
createCustom: {
|
||||
title: 'Create Challenge',
|
||||
editTitle: 'Edit Challenge',
|
||||
yourChallenge: 'Your challenge',
|
||||
basicInfo: 'Basic Info',
|
||||
challengeSettings: 'Challenge Settings',
|
||||
displayInteraction: 'Display & Interaction',
|
||||
durationDays: '{{days}} days',
|
||||
durationDaysChallenge: '{{days}}-day challenge',
|
||||
dayUnit: 'days',
|
||||
defaultTitle: 'Custom Challenge',
|
||||
rankingDescription: 'Leaderboard updates daily',
|
||||
typeLabels: {
|
||||
water: 'Hydration',
|
||||
exercise: 'Exercise',
|
||||
diet: 'Diet',
|
||||
sleep: 'Sleep',
|
||||
mood: 'Mood',
|
||||
weight: 'Weight',
|
||||
custom: 'Custom',
|
||||
},
|
||||
fields: {
|
||||
title: 'Challenge title',
|
||||
titlePlaceholder: 'e.g., 21-day hydration',
|
||||
coverImage: 'Cover image',
|
||||
uploadCover: 'Upload cover',
|
||||
challengeDescription: 'Challenge description',
|
||||
descriptionPlaceholder: 'Describe the goal and check-in rules',
|
||||
challengeType: 'Challenge type',
|
||||
challengeTypeHelper: 'Pick the category closest to your goal',
|
||||
timeRange: 'Time range',
|
||||
start: 'Start date',
|
||||
end: 'End date',
|
||||
duration: 'Duration',
|
||||
periodLabel: 'Period label',
|
||||
periodLabelPlaceholder: 'e.g., 21-day sprint',
|
||||
dailyTargetAndUnit: 'Daily target & unit',
|
||||
dailyTargetPlaceholder: 'Daily target value',
|
||||
unitPlaceholder: 'Unit (cups / mins / steps...)',
|
||||
unitHelper: 'Optional, shown after the daily target',
|
||||
minimumCheckInDays: 'Minimum check-in days',
|
||||
minimumCheckInDaysPlaceholder: 'Cannot exceed total duration',
|
||||
maxParticipants: 'Max participants',
|
||||
noLimit: 'No limit',
|
||||
isPublic: 'Allow public join',
|
||||
publicDescription: 'Others can join with the invite code when enabled.',
|
||||
},
|
||||
floatingCTA: {
|
||||
title: 'Generate invite code',
|
||||
subtitle: 'Create a challenge and share it with friends',
|
||||
editTitle: 'Save changes',
|
||||
editSubtitle: 'Update the challenge for all participants',
|
||||
},
|
||||
buttons: {
|
||||
createAndGenerateCode: 'Create & generate code',
|
||||
creating: 'Creating…',
|
||||
updateAndSave: 'Save changes',
|
||||
updating: 'Saving…',
|
||||
},
|
||||
datePicker: {
|
||||
confirm: 'Confirm',
|
||||
cancel: 'Cancel',
|
||||
},
|
||||
alerts: {
|
||||
titleRequired: 'Please enter a challenge title',
|
||||
endTimeError: 'End date must be after start date',
|
||||
targetValueError: 'Daily target must be between 1 and 1000',
|
||||
minimumDaysError: 'Minimum check-in days must be between 1 and 365',
|
||||
minimumDaysExceedError: 'Minimum check-in days cannot exceed total duration',
|
||||
participantsError: 'Participants must be between 2 and 10000 or leave empty',
|
||||
createFailed: 'Failed to create challenge',
|
||||
createSuccess: 'Challenge created',
|
||||
updateSuccess: 'Challenge updated',
|
||||
},
|
||||
imageUpload: {
|
||||
selectSource: 'Choose cover',
|
||||
selectMessage: 'Take a photo or pick from album',
|
||||
camera: 'Camera',
|
||||
album: 'Album',
|
||||
cancel: 'Cancel',
|
||||
cameraPermission: 'Camera permission required',
|
||||
cameraPermissionMessage: 'Enable camera access to take a photo.',
|
||||
albumPermissionMessage: 'Enable photo access to choose from library.',
|
||||
cameraFailed: 'Failed to open camera',
|
||||
cameraFailedMessage: 'Please try again or choose from album.',
|
||||
selectFailed: 'Selection failed',
|
||||
selectFailedMessage: 'Could not select an image, please try again.',
|
||||
uploadFailed: 'Upload failed',
|
||||
uploadFailedMessage: 'Cover upload failed, please retry.',
|
||||
uploading: 'Uploading…',
|
||||
clear: 'Remove cover',
|
||||
helper: 'Use a 16:9 cover under 2MB for better results.',
|
||||
},
|
||||
shareModal: {
|
||||
title: 'Invite code generated',
|
||||
subtitle: 'Share this code so others can join your challenge',
|
||||
generatingCode: 'Generating…',
|
||||
copyCode: 'Copy code',
|
||||
viewChallenge: 'View challenge',
|
||||
later: 'Share later',
|
||||
},
|
||||
},
|
||||
};
|
||||
14
i18n/en/common.ts
Normal file
14
i18n/en/common.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
export const dateSelector = {
|
||||
backToToday: 'Back to Today',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm',
|
||||
};
|
||||
|
||||
export const common = {
|
||||
alert: 'Alert',
|
||||
success: 'Success',
|
||||
error: 'Error',
|
||||
delete: 'Delete',
|
||||
confirm: 'Confirm',
|
||||
cancel: 'Cancel',
|
||||
};
|
||||
551
i18n/en/diet.ts
Normal file
551
i18n/en/diet.ts
Normal file
@@ -0,0 +1,551 @@
|
||||
export const nutritionRecords = {
|
||||
title: 'Nutrition Records',
|
||||
listTitle: 'Today\'s Meals',
|
||||
recordCount: '{{count}} records',
|
||||
empty: {
|
||||
title: 'No records today',
|
||||
action: 'Add Record',
|
||||
},
|
||||
footer: {
|
||||
end: '- No more records -',
|
||||
loadMore: 'Load More',
|
||||
},
|
||||
delete: {
|
||||
title: 'Confirm Delete',
|
||||
message: 'Are you sure you want to delete this nutrition record? This action cannot be undone.',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Delete',
|
||||
},
|
||||
mealTypes: {
|
||||
breakfast: 'Breakfast',
|
||||
lunch: 'Lunch',
|
||||
dinner: 'Dinner',
|
||||
snack: 'Snack',
|
||||
other: 'Other',
|
||||
},
|
||||
nutrients: {
|
||||
protein: 'Protein',
|
||||
fat: 'Fat',
|
||||
carbs: 'Carbs',
|
||||
unit: 'g',
|
||||
caloriesUnit: 'kcal',
|
||||
},
|
||||
overlay: {
|
||||
title: 'Record Method',
|
||||
scan: 'AI Scan',
|
||||
foodLibrary: 'Food Library',
|
||||
voiceRecord: 'Voice Log',
|
||||
},
|
||||
chart: {
|
||||
remaining: 'Remaining',
|
||||
formula: 'Remaining = Metabolism + Exercise - Diet',
|
||||
metabolism: 'Metabolism',
|
||||
exercise: 'Exercise',
|
||||
diet: 'Diet',
|
||||
},
|
||||
};
|
||||
|
||||
export const foodCamera = {
|
||||
title: 'Food Camera',
|
||||
hint: 'Keep food within the frame',
|
||||
permission: {
|
||||
title: 'Camera Permission Required',
|
||||
description: 'Camera access is needed to capture food for AI recognition',
|
||||
button: 'Allow Access',
|
||||
},
|
||||
guide: {
|
||||
title: 'Shooting Guide',
|
||||
description: 'Please upload or take clear photos of food to improve recognition accuracy',
|
||||
button: 'Got it',
|
||||
good: 'Good lighting, clear subject',
|
||||
bad: 'Blurry, poor lighting',
|
||||
},
|
||||
buttons: {
|
||||
album: 'Album',
|
||||
capture: 'Capture',
|
||||
help: 'Help',
|
||||
},
|
||||
alerts: {
|
||||
captureFailed: {
|
||||
title: 'Capture Failed',
|
||||
message: 'Please try again',
|
||||
},
|
||||
pickFailed: {
|
||||
title: 'Selection Failed',
|
||||
message: 'Please try again',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const foodRecognition = {
|
||||
title: 'Food Recognition',
|
||||
header: {
|
||||
confirm: 'Confirm Food',
|
||||
recognizing: 'AI Recognizing',
|
||||
},
|
||||
errors: {
|
||||
noImage: 'Image not found',
|
||||
generic: 'Food recognition failed, please try again',
|
||||
unknown: 'Unknown error',
|
||||
noFoodDetected: 'Recognition failed: No food detected',
|
||||
processError: 'Error during recognition process',
|
||||
},
|
||||
logs: {
|
||||
uploading: '📤 Uploading image to cloud...',
|
||||
uploadSuccess: '✅ Image upload completed',
|
||||
analyzing: '🤖 AI model analyzing...',
|
||||
analysisSuccess: '✅ AI analysis completed',
|
||||
confidence: '🎯 Confidence: {{value}}%',
|
||||
itemsFound: '🍽️ Detected {{count}} food items',
|
||||
failed: '❌ Recognition failed: No food detected',
|
||||
error: '❌ Error during recognition process',
|
||||
},
|
||||
status: {
|
||||
idle: {
|
||||
title: 'Ready',
|
||||
subtitle: 'Please wait...',
|
||||
},
|
||||
uploading: {
|
||||
title: 'Uploading Image',
|
||||
subtitle: 'Uploading image to cloud server...',
|
||||
},
|
||||
recognizing: {
|
||||
title: 'AI Analyzing',
|
||||
subtitle: 'AI model is analyzing food ingredients...',
|
||||
},
|
||||
completed: {
|
||||
title: 'Success',
|
||||
subtitle: 'Redirecting to analysis results...',
|
||||
},
|
||||
failed: {
|
||||
title: 'Failed',
|
||||
subtitle: 'Please check network or try again later',
|
||||
},
|
||||
processing: {
|
||||
title: 'Processing...',
|
||||
subtitle: 'Please wait...',
|
||||
},
|
||||
},
|
||||
mealTypes: {
|
||||
breakfast: 'Breakfast',
|
||||
lunch: 'Lunch',
|
||||
dinner: 'Dinner',
|
||||
snack: 'Snack',
|
||||
unknown: 'Unknown',
|
||||
},
|
||||
info: {
|
||||
title: 'Smart Food Recognition',
|
||||
description: 'AI will analyze the photo, identify food types, estimate nutrition, and generate a detailed report.',
|
||||
},
|
||||
actions: {
|
||||
start: 'Start Recognition',
|
||||
retry: 'Retry',
|
||||
logs: 'Process Logs',
|
||||
logsPlaceholder: 'Ready to start...',
|
||||
},
|
||||
alerts: {
|
||||
recognizing: {
|
||||
title: 'Recognition in progress',
|
||||
message: 'Recognition is not complete. Are you sure you want to go back?',
|
||||
continue: 'Continue',
|
||||
back: 'Go Back',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const foodAnalysisResult = {
|
||||
title: 'Analysis Result',
|
||||
error: {
|
||||
notFound: 'Image or recognition result not found',
|
||||
},
|
||||
placeholder: 'Nutrition Record',
|
||||
nutrients: {
|
||||
caloriesUnit: 'kcal',
|
||||
protein: 'Protein',
|
||||
fat: 'Fat',
|
||||
carbs: 'Carbs',
|
||||
unit: 'g',
|
||||
},
|
||||
sections: {
|
||||
recognitionResult: 'Recognition Result',
|
||||
foodIntake: 'Food Intake',
|
||||
},
|
||||
nonFood: {
|
||||
title: 'No Food Detected',
|
||||
suggestions: {
|
||||
title: 'Suggestions:',
|
||||
item1: '• Ensure food is in the frame',
|
||||
item2: '• Try a clearer angle',
|
||||
item3: '• Avoid blur or poor lighting',
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
retake: 'Retake',
|
||||
record: 'Record',
|
||||
close: 'Close',
|
||||
},
|
||||
mealSelector: {
|
||||
title: 'Select Meal',
|
||||
},
|
||||
editModal: {
|
||||
title: 'Edit Food Info',
|
||||
fields: {
|
||||
name: 'Food Name',
|
||||
namePlaceholder: 'Enter food name',
|
||||
amount: 'Weight (g)',
|
||||
amountPlaceholder: 'Enter weight',
|
||||
calories: 'Calories (kcal)',
|
||||
caloriesPlaceholder: 'Enter calories',
|
||||
},
|
||||
actions: {
|
||||
cancel: 'Cancel',
|
||||
save: 'Save',
|
||||
},
|
||||
},
|
||||
confidence: 'Confidence: {{value}}%',
|
||||
dateFormats: {
|
||||
today: 'MMM D, YYYY',
|
||||
full: 'MMM D, YYYY HH:mm',
|
||||
},
|
||||
};
|
||||
|
||||
export const foodLibrary = {
|
||||
title: 'Food Library',
|
||||
custom: 'Custom',
|
||||
search: {
|
||||
placeholder: 'Search food...',
|
||||
loading: 'Searching...',
|
||||
empty: 'No relevant food found',
|
||||
noData: 'No food data',
|
||||
},
|
||||
loading: 'Loading food library...',
|
||||
retry: 'Retry',
|
||||
mealTypes: {
|
||||
breakfast: 'Breakfast',
|
||||
lunch: 'Lunch',
|
||||
dinner: 'Dinner',
|
||||
snack: 'Snack',
|
||||
},
|
||||
actions: {
|
||||
record: 'Record',
|
||||
selectMeal: 'Select Meal',
|
||||
},
|
||||
alerts: {
|
||||
deleteFailed: {
|
||||
title: 'Delete Failed',
|
||||
message: 'Error occurred while deleting food, please try again later',
|
||||
},
|
||||
createFailed: {
|
||||
title: 'Create Failed',
|
||||
message: 'Error occurred while creating custom food, please try again later',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const createCustomFood = {
|
||||
title: 'Create Custom Food',
|
||||
save: 'Save',
|
||||
preview: {
|
||||
title: 'Preview',
|
||||
defaultName: 'Food Name',
|
||||
},
|
||||
basicInfo: {
|
||||
title: 'Basic Info',
|
||||
name: 'Food Name',
|
||||
namePlaceholder: 'e.g. Hamburger',
|
||||
defaultAmount: 'Default Amount',
|
||||
calories: 'Calories',
|
||||
},
|
||||
optionalInfo: {
|
||||
title: 'Optional Info',
|
||||
photo: 'Photo',
|
||||
addPhoto: 'Add Photo',
|
||||
protein: 'Protein',
|
||||
fat: 'Fat',
|
||||
carbohydrate: 'Carbs',
|
||||
},
|
||||
units: {
|
||||
kcal: 'kcal',
|
||||
g: 'g',
|
||||
gram: 'g',
|
||||
},
|
||||
alerts: {
|
||||
permissionDenied: {
|
||||
title: 'Permission Denied',
|
||||
message: 'Photo library permission is required to select photos',
|
||||
},
|
||||
uploadFailed: {
|
||||
title: 'Upload Failed',
|
||||
message: 'Photo upload failed, please try again',
|
||||
},
|
||||
error: {
|
||||
title: 'Error',
|
||||
message: 'Failed to select photo, please try again',
|
||||
},
|
||||
validation: {
|
||||
title: 'Notice',
|
||||
nameRequired: 'Please enter food name',
|
||||
caloriesRequired: 'Please enter valid calories',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const voiceRecord = {
|
||||
title: 'Voice Log',
|
||||
intro: {
|
||||
description: 'Describe your meal with voice, AI will intelligently analyze nutrition and calories',
|
||||
},
|
||||
status: {
|
||||
idle: 'Tap microphone to start recording',
|
||||
listening: 'Listening... Please start speaking...',
|
||||
processing: 'AI is processing voice content...',
|
||||
analyzing: 'AI model is deeply analyzing nutritional components...',
|
||||
result: 'Voice recognition completed, please confirm the result',
|
||||
},
|
||||
hints: {
|
||||
listening: 'Tell us about the food you want to record',
|
||||
},
|
||||
examples: {
|
||||
title: 'Recording Examples:',
|
||||
items: [
|
||||
'This morning I had two fried eggs, a slice of whole wheat bread and a glass of milk',
|
||||
'For lunch I had about 150g of braised pork, a small bowl of rice and a serving of vegetables',
|
||||
'For dinner I had steamed egg custard, seaweed egg drop soup and a bowl of millet porridge',
|
||||
],
|
||||
},
|
||||
analysis: {
|
||||
progress: 'Analysis Progress: {{progress}}%',
|
||||
hint: 'AI is deeply analyzing your food description...',
|
||||
},
|
||||
result: {
|
||||
label: 'Recognition Result:',
|
||||
},
|
||||
actions: {
|
||||
retry: 'Retry Recording',
|
||||
confirm: 'Confirm & Use',
|
||||
},
|
||||
alerts: {
|
||||
noVoiceInput: 'No voice input detected, please try again',
|
||||
networkError: 'Network connection error, please check network and try again',
|
||||
voiceError: 'Voice recognition problem occurred, please try again',
|
||||
noValidContent: 'No valid content recognized, please record again',
|
||||
pleaseRecordFirst: 'Please perform voice recognition first',
|
||||
recordingFailed: 'Recording Failed',
|
||||
recordingPermissionError: 'Unable to start voice recognition, please check microphone permission settings',
|
||||
analysisFailed: 'Analysis Failed',
|
||||
},
|
||||
};
|
||||
|
||||
export const nutritionLabelAnalysis = {
|
||||
title: 'Nutrition Label Analysis',
|
||||
camera: {
|
||||
permissionDenied: 'Permission Denied',
|
||||
permissionMessage: 'Camera permission is required to take nutrition label photos',
|
||||
},
|
||||
actions: {
|
||||
takePhoto: 'Take Photo',
|
||||
selectFromAlbum: 'Select from Album',
|
||||
startAnalysis: 'Start Analysis',
|
||||
close: 'Close',
|
||||
},
|
||||
placeholder: {
|
||||
text: 'Take or select a nutrition label photo',
|
||||
},
|
||||
status: {
|
||||
uploading: 'Uploading image...',
|
||||
analyzing: 'Analyzing nutrition label...',
|
||||
},
|
||||
errors: {
|
||||
analysisFailed: {
|
||||
title: 'Analysis Failed',
|
||||
message: 'Error occurred while analyzing the image, please try again',
|
||||
defaultMessage: 'Analysis service is temporarily unavailable',
|
||||
},
|
||||
cannotRecognize: 'Unable to recognize nutrition label, please try taking a clearer photo',
|
||||
cameraPermissionDenied: 'Camera permission is required to take nutrition label photos',
|
||||
},
|
||||
results: {
|
||||
title: 'Detailed Nutrition Analysis',
|
||||
detailedAnalysis: 'Detailed Nutrition Analysis',
|
||||
},
|
||||
imageViewer: {
|
||||
close: 'Close',
|
||||
dateFormat: 'MMM D, YYYY HH:mm',
|
||||
},
|
||||
};
|
||||
|
||||
export const nutritionAnalysisHistory = {
|
||||
title: 'History',
|
||||
dateFormat: 'MMM D, YYYY HH:mm',
|
||||
recognized: 'Recognized {{count}} nutrients',
|
||||
loadingMore: 'Loading more...',
|
||||
loading: 'Loading history...',
|
||||
filter: {
|
||||
all: 'All',
|
||||
},
|
||||
filters: {
|
||||
all: 'All',
|
||||
success: 'Success',
|
||||
failed: 'Failed',
|
||||
},
|
||||
status: {
|
||||
success: 'Success',
|
||||
failed: 'Failed',
|
||||
processing: 'Processing',
|
||||
unknown: 'Unknown',
|
||||
},
|
||||
nutrients: {
|
||||
energy: 'Energy',
|
||||
protein: 'Protein',
|
||||
carbs: 'Carbs',
|
||||
fat: 'Fat',
|
||||
},
|
||||
delete: {
|
||||
confirmTitle: 'Confirm Delete',
|
||||
confirmMessage: 'Are you sure you want to delete this record?',
|
||||
cancel: 'Cancel',
|
||||
delete: 'Delete',
|
||||
successTitle: 'Deleted Successfully',
|
||||
successMessage: 'Record has been deleted successfully',
|
||||
},
|
||||
actions: {
|
||||
expand: 'Expand Details',
|
||||
collapse: 'Collapse Details',
|
||||
expandDetails: 'Expand Details',
|
||||
collapseDetails: 'Collapse Details',
|
||||
confirmDelete: 'Confirm Delete',
|
||||
delete: 'Delete',
|
||||
cancel: 'Cancel',
|
||||
retry: 'Retry',
|
||||
},
|
||||
empty: {
|
||||
title: 'No History Records',
|
||||
subtitle: 'Start recognizing nutrition labels',
|
||||
},
|
||||
errors: {
|
||||
error: 'Error',
|
||||
loadFailed: 'Load Failed',
|
||||
unknownError: 'Unknown Error',
|
||||
fetchFailed: 'Failed to fetch history records',
|
||||
fetchFailedRetry: 'Failed to fetch history records, please retry',
|
||||
deleteFailed: 'Delete failed, please try again later',
|
||||
},
|
||||
loadingState: {
|
||||
records: 'Loading history...',
|
||||
more: 'Loading more...',
|
||||
},
|
||||
details: {
|
||||
title: 'Detailed Nutrition Information',
|
||||
nutritionDetails: 'Detailed Nutrition Information',
|
||||
aiModel: 'AI Model',
|
||||
provider: 'Service Provider',
|
||||
serviceProvider: 'Service Provider',
|
||||
},
|
||||
records: {
|
||||
nutritionCount: 'Recognized {{count}} nutrients',
|
||||
},
|
||||
imageViewer: {
|
||||
close: 'Close',
|
||||
},
|
||||
};
|
||||
|
||||
export const waterDetail = {
|
||||
title: 'Water Details',
|
||||
waterRecord: 'Water Records',
|
||||
today: 'Today',
|
||||
total: 'Total: ',
|
||||
goal: 'Goal: ',
|
||||
noRecords: 'No water records',
|
||||
noRecordsSubtitle: 'Tap "Add Record" to start tracking water intake',
|
||||
deleteConfirm: {
|
||||
title: 'Confirm Delete',
|
||||
message: 'Are you sure you want to delete this water record? This action cannot be undone.',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Delete',
|
||||
},
|
||||
deleteButton: 'Delete',
|
||||
water: 'Water',
|
||||
loadingUserPreferences: 'Failed to load user preferences',
|
||||
};
|
||||
|
||||
export const waterSettings = {
|
||||
title: 'Water Settings',
|
||||
sections: {
|
||||
dailyGoal: 'Daily Water Goal',
|
||||
quickAdd: 'Quick Add Default',
|
||||
reminder: 'Water Reminder',
|
||||
},
|
||||
descriptions: {
|
||||
quickAdd: 'Set the default water amount when clicking the "+" button',
|
||||
reminder: 'Set periodic reminders to replenish water',
|
||||
},
|
||||
labels: {
|
||||
ml: 'ml',
|
||||
disabled: 'Disabled',
|
||||
},
|
||||
alerts: {
|
||||
goalSuccess: {
|
||||
title: 'Settings Saved',
|
||||
message: 'Daily water goal has been set to {{amount}}ml',
|
||||
},
|
||||
quickAddSuccess: {
|
||||
title: 'Settings Saved',
|
||||
message: 'Quick add default has been set to {{amount}}ml',
|
||||
},
|
||||
quickAddFailed: {
|
||||
title: 'Save Failed',
|
||||
message: 'Unable to save quick add default, please try again',
|
||||
},
|
||||
},
|
||||
buttons: {
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm',
|
||||
},
|
||||
status: {
|
||||
reminderEnabled: '{{startTime}}-{{endTime}}, every {{interval}} minutes',
|
||||
},
|
||||
};
|
||||
|
||||
export const waterReminderSettings = {
|
||||
title: 'Water Reminder',
|
||||
sections: {
|
||||
notifications: 'Push Notifications',
|
||||
timeRange: 'Reminder Time Range',
|
||||
interval: 'Reminder Interval',
|
||||
},
|
||||
descriptions: {
|
||||
notifications: 'Enable to receive periodic water reminders during specified time periods',
|
||||
timeRange: 'Only send reminders during specified time periods to avoid disturbing your rest',
|
||||
interval: 'Choose the reminder frequency, recommended 30-120 minutes',
|
||||
},
|
||||
labels: {
|
||||
startTime: 'Start Time',
|
||||
endTime: 'End Time',
|
||||
interval: 'Reminder Interval',
|
||||
saveSettings: 'Save Settings',
|
||||
hours: 'Hours',
|
||||
timeRangePreview: 'Time Range Preview',
|
||||
minutes: 'Minutes',
|
||||
},
|
||||
alerts: {
|
||||
timeValidation: {
|
||||
title: 'Time Setting Tip',
|
||||
startTimeInvalid: 'Start time cannot be later than or equal to end time, please select again',
|
||||
endTimeInvalid: 'End time cannot be earlier than or equal to start time, please select again',
|
||||
},
|
||||
success: {
|
||||
enabled: 'Settings Saved',
|
||||
enabledMessage: 'Water reminder has been enabled\n\nTime range: {{timeRange}}\nReminder interval: {{interval}}\n\nWe will periodically remind you to drink water during the specified time period',
|
||||
disabled: 'Settings Saved',
|
||||
disabledMessage: 'Water reminder has been disabled',
|
||||
},
|
||||
error: {
|
||||
title: 'Save Failed',
|
||||
message: 'Unable to save water reminder settings, please try again',
|
||||
},
|
||||
},
|
||||
buttons: {
|
||||
confirm: 'Confirm',
|
||||
cancel: 'Cancel',
|
||||
},
|
||||
};
|
||||
689
i18n/en/health.ts
Normal file
689
i18n/en/health.ts
Normal file
@@ -0,0 +1,689 @@
|
||||
export const healthPermissions = {
|
||||
title: 'Health data disclosure',
|
||||
subtitle: 'We integrate with Apple Health through HealthKit and CareKit to deliver precise training, recovery, and reminder experiences.',
|
||||
cards: {
|
||||
usage: {
|
||||
title: 'Data we read or write',
|
||||
items: [
|
||||
'Activity: steps, active energy, and workouts fuel performance charts and rings.',
|
||||
'Body metrics: height, weight, and body fat keep plans and nutrition tips personalized.',
|
||||
'Sleep & recovery: duration and stages unlock recovery advice and reminders.',
|
||||
'Hydration: we read and write water intake so Health and the app stay in sync.',
|
||||
],
|
||||
},
|
||||
purpose: {
|
||||
title: 'Why we need it',
|
||||
items: [
|
||||
'Generate adaptive training plans, challenges, and recovery nudges.',
|
||||
'Display long-term trends so you can understand progress at a glance.',
|
||||
'Reduce manual input by syncing reminders and challenge progress automatically.',
|
||||
],
|
||||
},
|
||||
control: {
|
||||
title: 'Your control',
|
||||
items: [
|
||||
'Permissions are granted inside Apple Health; change them anytime under iOS Settings > Health > Data Access & Devices.',
|
||||
'We never access data you do not authorize, and cached values are removed if you revoke access.',
|
||||
'Core functionality keeps working and offers manual input alternatives.',
|
||||
],
|
||||
},
|
||||
privacy: {
|
||||
title: 'Storage & privacy',
|
||||
items: [
|
||||
'Health data stays on your device — we do not upload it or share it with third parties.',
|
||||
'Only aggregated, anonymized stats are synced when absolutely necessary.',
|
||||
"We follow Apple's review requirements and will notify you before any changes.",
|
||||
],
|
||||
},
|
||||
},
|
||||
callout: {
|
||||
title: 'What if I skip authorization?',
|
||||
items: [
|
||||
'The related modules will ask for permission and provide manual logging options.',
|
||||
'Declining does not break other areas of the app that do not rely on Health data.',
|
||||
],
|
||||
},
|
||||
contact: {
|
||||
title: 'Need help?',
|
||||
description: 'Questions about HealthKit or CareKit? Reach out via email or the in-app feedback form:',
|
||||
email: 'richardwei1995@gmail.com',
|
||||
},
|
||||
};
|
||||
|
||||
export const statistics = {
|
||||
title: 'Out Live',
|
||||
aiReport: {
|
||||
button: 'Report',
|
||||
generating: 'Generating your AI health report, this may take 10–30s…',
|
||||
generatingShort: 'Generating',
|
||||
success: 'Report ready',
|
||||
failed: 'Failed to generate report, please try again',
|
||||
missing: 'Report is not ready yet, please try again',
|
||||
permission: 'Media permission is required to save the report',
|
||||
saved: 'Saved to Photos',
|
||||
saveFailed: 'Save failed, please try again',
|
||||
save: 'Save',
|
||||
saving: 'Saving…',
|
||||
share: 'Share',
|
||||
sharing: 'Sharing…',
|
||||
shareFailed: 'Share failed, please try again',
|
||||
shareTitle: 'AI Health Report',
|
||||
shareMessage: 'Here is my AI health report—take a look!',
|
||||
close: 'Close',
|
||||
galleryTitle: 'AI Report Gallery',
|
||||
gallerySubtitle: 'Browse and keep your immersive reports',
|
||||
bannerDesc: 'Tap generate on the top right, takes about 10–30s',
|
||||
loadFailed: 'Failed to load report history',
|
||||
emptyHistory: 'No reports yet',
|
||||
emptyHistoryHint: 'Tap the top right to generate your first report',
|
||||
generated: 'generated',
|
||||
},
|
||||
sections: {
|
||||
bodyMetrics: 'Body Metrics',
|
||||
},
|
||||
components: {
|
||||
diet: {
|
||||
title: 'Diet Analysis',
|
||||
loading: 'Loading...',
|
||||
updated: 'Updated: {{time}}',
|
||||
remaining: 'Can Still Eat',
|
||||
calories: 'Calories',
|
||||
protein: 'Protein',
|
||||
carb: 'Carbs',
|
||||
fat: 'Fat',
|
||||
fiber: 'Fiber',
|
||||
sodium: 'Sodium',
|
||||
basal: 'Basal',
|
||||
exercise: 'Exercise',
|
||||
diet: 'Diet',
|
||||
kcal: 'kcal',
|
||||
aiRecognition: 'AI Scan',
|
||||
foodLibrary: 'Food Library',
|
||||
voiceRecord: 'Voice Log',
|
||||
nutritionLabel: 'Nutrition Label',
|
||||
},
|
||||
fitness: {
|
||||
kcal: 'kcal',
|
||||
minutes: 'min',
|
||||
hours: 'hrs',
|
||||
},
|
||||
steps: {
|
||||
title: 'Steps',
|
||||
},
|
||||
mood: {
|
||||
title: 'Mood',
|
||||
empty: 'Tap to record mood',
|
||||
},
|
||||
stress: {
|
||||
title: 'Stress',
|
||||
unit: 'ms',
|
||||
},
|
||||
water: {
|
||||
title: 'Water',
|
||||
unit: 'ml',
|
||||
addButton: '+ {{amount}}ml',
|
||||
},
|
||||
metabolism: {
|
||||
title: 'Metabolism',
|
||||
loading: 'Loading...',
|
||||
unit: 'kcal/day',
|
||||
status: {
|
||||
high: 'High',
|
||||
normal: 'Normal',
|
||||
low: 'Low',
|
||||
veryLow: 'Very Low',
|
||||
unknown: 'Unknown',
|
||||
},
|
||||
},
|
||||
sleep: {
|
||||
title: 'Sleep',
|
||||
loading: 'Loading...',
|
||||
},
|
||||
oxygen: {
|
||||
title: 'Blood Oxygen',
|
||||
},
|
||||
circumference: {
|
||||
title: 'Circumference (cm)',
|
||||
setTitle: 'Set {{label}}',
|
||||
confirm: 'Confirm',
|
||||
measurements: {
|
||||
chest: 'Chest',
|
||||
waist: 'Waist',
|
||||
hip: 'Hip',
|
||||
arm: 'Arm',
|
||||
thigh: 'Thigh',
|
||||
calf: 'Calf',
|
||||
},
|
||||
},
|
||||
workout: {
|
||||
title: 'Recent Workout',
|
||||
minutes: 'min',
|
||||
kcal: 'kcal',
|
||||
noData: 'No workout data',
|
||||
syncing: 'Syncing...',
|
||||
sourceWaiting: 'Source: Syncing...',
|
||||
sourceUnknown: 'Source: Unknown',
|
||||
sourceFormat: 'Source: {{source}}',
|
||||
sourceFormatMultiple: 'Source: {{source}} et al.',
|
||||
lastWorkout: 'Latest Workout',
|
||||
updated: 'Updated',
|
||||
},
|
||||
weight: {
|
||||
title: 'Weight Records',
|
||||
addButton: 'Record Weight',
|
||||
bmi: 'BMI',
|
||||
weight: 'Weight',
|
||||
days: 'days',
|
||||
range: 'Range',
|
||||
unit: 'kg',
|
||||
bmiModal: {
|
||||
title: 'BMI Index Explanation',
|
||||
description: 'BMI (Body Mass Index) is an internationally recognized health indicator for assessing weight relative to height',
|
||||
formula: 'Formula: weight(kg) ÷ height²(m)',
|
||||
classificationTitle: 'BMI Classification Standards',
|
||||
healthTipsTitle: 'Health Tips',
|
||||
tips: {
|
||||
nutrition: 'Maintain a balanced diet and control calorie intake',
|
||||
exercise: 'At least 150 minutes of moderate-intensity exercise per week',
|
||||
sleep: 'Ensure 7-9 hours of adequate sleep',
|
||||
monitoring: 'Regularly monitor weight changes and adjust promptly',
|
||||
},
|
||||
disclaimer: 'BMI is for reference only and cannot reflect muscle mass, bone density, etc. If you have health concerns, please consult a professional doctor.',
|
||||
continueButton: 'Continue',
|
||||
},
|
||||
},
|
||||
fitnessRings: {
|
||||
title: 'Fitness Rings',
|
||||
activeCalories: 'Active Calories',
|
||||
exerciseMinutes: 'Exercise Minutes',
|
||||
standHours: 'Stand Hours',
|
||||
goal: '/{{goal}}',
|
||||
ringLabels: {
|
||||
active: 'Active',
|
||||
exercise: 'Exercise',
|
||||
stand: 'Stand',
|
||||
},
|
||||
},
|
||||
},
|
||||
tabs: {
|
||||
health: 'Health',
|
||||
medications: 'Meds',
|
||||
fasting: 'Fasting',
|
||||
challenges: 'Challenges',
|
||||
personal: 'Me',
|
||||
},
|
||||
activityHeatMap: {
|
||||
subtitle: 'Active {{days}} days in the last 6 months',
|
||||
activeRate: '{{rate}}%',
|
||||
popover: {
|
||||
title: 'Accumulated energy can be redeemed for AI-related benefits',
|
||||
subtitle: 'How to earn',
|
||||
rules: {
|
||||
login: '1. Daily login earns energy +1',
|
||||
mood: '2. Daily mood record earns energy +1',
|
||||
diet: '3. Diet record earns energy +1',
|
||||
goal: '4. Complete a goal earns energy +1',
|
||||
},
|
||||
},
|
||||
months: {
|
||||
1: 'Jan',
|
||||
2: 'Feb',
|
||||
3: 'Mar',
|
||||
4: 'Apr',
|
||||
5: 'May',
|
||||
6: 'Jun',
|
||||
7: 'Jul',
|
||||
8: 'Aug',
|
||||
9: 'Sep',
|
||||
10: 'Oct',
|
||||
11: 'Nov',
|
||||
12: 'Dec',
|
||||
},
|
||||
legend: {
|
||||
less: 'Less',
|
||||
more: 'More',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const sleepDetail = {
|
||||
title: 'Sleep Details',
|
||||
loading: 'Loading sleep data...',
|
||||
today: 'Today',
|
||||
sleepScore: 'Sleep Score',
|
||||
noData: 'No sleep data available',
|
||||
noDataRecommendation: 'Please ensure you are running on a real iOS device with authorized health data access, or wait until you have sleep data to view.',
|
||||
sleepDuration: 'Sleep Duration',
|
||||
sleepQuality: 'Sleep Quality',
|
||||
sleepStages: 'Sleep Stages',
|
||||
learnMore: 'Learn More',
|
||||
awake: 'Awake',
|
||||
rem: 'REM',
|
||||
core: 'Core Sleep',
|
||||
deep: 'Deep Sleep',
|
||||
unknown: 'Unknown',
|
||||
rawData: 'Raw Data',
|
||||
rawDataDescription: 'Contains {{count}} HealthKit sleep sample records',
|
||||
infoModalTitles: {
|
||||
sleepTime: 'Sleep Time',
|
||||
sleepQuality: 'Sleep Quality',
|
||||
},
|
||||
sleepGrades: {
|
||||
low: 'Low',
|
||||
normal: 'Normal',
|
||||
good: 'Good',
|
||||
excellent: 'Excellent',
|
||||
poor: 'Poor',
|
||||
fair: 'Fair',
|
||||
},
|
||||
sleepTimeDescription: 'Sleep is most important - it accounts for more than half of your sleep score. Longer sleep can reduce sleep debt, but regular sleep times are crucial for quality rest.',
|
||||
sleepQualityDescription: 'Sleep quality comprehensively evaluates multiple indicators such as your sleep efficiency, deep sleep duration, REM sleep ratio, etc. High-quality sleep depends not only on duration but also on sleep continuity and balance of sleep stages.',
|
||||
sleepStagesInfo: {
|
||||
title: 'Understand Your Sleep Stages',
|
||||
description: 'People have many misconceptions about sleep stages and sleep quality. Some people may need more deep sleep, while others may not. Scientists and doctors are still exploring the role of different sleep stages and their effects on the body. By tracking sleep stages and paying attention to how you feel each morning, you may gain deeper insights into your own sleep.',
|
||||
awake: {
|
||||
title: 'Awake Time',
|
||||
description: 'During a sleep period, you may wake up several times. Occasional waking is normal. You may fall back asleep immediately and not remember waking up during the night.',
|
||||
},
|
||||
rem: {
|
||||
title: 'REM Sleep',
|
||||
description: 'This sleep stage may have some impact on learning and memory. During this stage, your muscles are most relaxed and your eyes move rapidly left and right. This is also the stage where most of your dreams occur.',
|
||||
},
|
||||
core: {
|
||||
title: 'Core Sleep',
|
||||
description: 'This stage is sometimes called light sleep and is as important as other stages. This stage usually occupies most of your sleep time each night. Brain waves that are crucial for cognition are generated during this stage.',
|
||||
},
|
||||
deep: {
|
||||
title: 'Deep Sleep',
|
||||
description: 'Due to the characteristics of brain waves, this stage is also called slow-wave sleep. During this stage, body tissues are repaired and important hormones are released. It usually occurs in the first half of sleep and lasts longer. During deep sleep, the body is very relaxed, so you may find it harder to wake up during this stage compared to other stages.',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const sleepQuality = {
|
||||
excellent: {
|
||||
description: 'You feel refreshed and energized',
|
||||
recommendation: 'Congratulations on getting quality sleep! If you feel energized, consider moderate exercise to maintain a healthy lifestyle and further reduce stress for optimal sleep.'
|
||||
},
|
||||
good: {
|
||||
description: 'Good sleep quality, decent mental state',
|
||||
recommendation: 'Your sleep quality is decent but has room for improvement.建议 maintaining regular sleep schedules, avoiding electronic devices before bed, and creating a quiet, comfortable sleep environment.'
|
||||
},
|
||||
fair: {
|
||||
description: 'Fair sleep quality, may affect daytime performance',
|
||||
recommendation: 'Your sleep needs improvement.建议 establishing a fixed bedtime routine, limiting caffeine intake, ensuring appropriate bedroom temperature, and considering light exercise to improve sleep quality.'
|
||||
},
|
||||
poor: {
|
||||
description: 'Poor sleep quality, attention to sleep health recommended',
|
||||
recommendation: 'Your sleep quality needs serious attention.建议 consulting a doctor or sleep specialist to check for sleep disorders, while improving sleep environment and habits, avoiding stimulating activities before bed.'
|
||||
}
|
||||
};
|
||||
|
||||
export const stepsDetail = {
|
||||
title: 'Steps Details',
|
||||
loading: 'Loading...',
|
||||
stats: {
|
||||
totalSteps: 'Total Steps',
|
||||
averagePerHour: 'Average Per Hour',
|
||||
mostActiveTime: 'Most Active Time',
|
||||
},
|
||||
chart: {
|
||||
title: 'Hourly Steps Distribution',
|
||||
averageLabel: 'Average {{steps}} steps',
|
||||
},
|
||||
activityLevel: {
|
||||
currentActivity: 'Your activity level today is',
|
||||
levels: {
|
||||
inactive: 'Inactive',
|
||||
light: 'Lightly Active',
|
||||
moderate: 'Moderately Active',
|
||||
very_active: 'Very Active',
|
||||
},
|
||||
progress: {
|
||||
current: 'Current',
|
||||
nextLevel: 'Next: {{level}}',
|
||||
highestLevel: 'Highest Level',
|
||||
},
|
||||
},
|
||||
timeLabels: {
|
||||
midnight: '0:00',
|
||||
noon: '12:00',
|
||||
nextDay: '24:00',
|
||||
},
|
||||
};
|
||||
|
||||
export const fitnessRingsDetail = {
|
||||
title: 'Fitness Rings Detail',
|
||||
loading: 'Loading...',
|
||||
weekDays: {
|
||||
monday: 'Mon',
|
||||
tuesday: 'Tue',
|
||||
wednesday: 'Wed',
|
||||
thursday: 'Thu',
|
||||
friday: 'Fri',
|
||||
saturday: 'Sat',
|
||||
sunday: 'Sun',
|
||||
},
|
||||
dateFormats: {
|
||||
header: 'MMM D, YYYY',
|
||||
},
|
||||
cards: {
|
||||
activeCalories: {
|
||||
title: 'Active Calories',
|
||||
unit: 'kcal',
|
||||
},
|
||||
exerciseMinutes: {
|
||||
title: 'Exercise Minutes',
|
||||
unit: 'minutes',
|
||||
info: {
|
||||
title: 'Exercise Minutes:',
|
||||
description: 'Exercise at an intensity of at least "brisk walking" will accumulate corresponding exercise minutes.',
|
||||
recommendation: 'WHO recommends adults to maintain at least 30 minutes of moderate to high-intensity exercise daily.',
|
||||
knowButton: 'Got it',
|
||||
},
|
||||
},
|
||||
standHours: {
|
||||
title: 'Stand Hours',
|
||||
unit: 'hours',
|
||||
},
|
||||
},
|
||||
stats: {
|
||||
weeklyClosedRings: 'Weekly Closed Rings',
|
||||
daysUnit: 'days',
|
||||
},
|
||||
datePicker: {
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm',
|
||||
},
|
||||
errors: {
|
||||
loadExerciseInfoPreference: 'Failed to load exercise minutes info preference',
|
||||
saveExerciseInfoPreference: 'Failed to save exercise minutes info preference',
|
||||
},
|
||||
};
|
||||
|
||||
export const circumferenceDetail = {
|
||||
title: 'Circumference Statistics',
|
||||
loading: 'Loading...',
|
||||
error: 'Loading failed',
|
||||
retry: 'Retry',
|
||||
noData: 'No data available',
|
||||
noDataSelected: 'Please select circumference data to display',
|
||||
tabs: {
|
||||
week: 'By Week',
|
||||
month: 'By Month',
|
||||
year: 'By Year',
|
||||
},
|
||||
measurements: {
|
||||
chest: 'Chest',
|
||||
waist: 'Waist',
|
||||
upperHip: 'Upper Hip',
|
||||
arm: 'Arm',
|
||||
thigh: 'Thigh',
|
||||
calf: 'Calf',
|
||||
},
|
||||
modal: {
|
||||
title: 'Set {{label}}',
|
||||
defaultTitle: 'Set Circumference',
|
||||
confirm: 'Confirm',
|
||||
},
|
||||
chart: {
|
||||
weekLabel: 'Week {{week}}',
|
||||
monthLabel: '{{month}}',
|
||||
empty: 'No data available',
|
||||
noSelection: 'Please select circumference data to display',
|
||||
},
|
||||
};
|
||||
|
||||
export const basalMetabolismDetail = {
|
||||
title: 'Metabolism',
|
||||
currentData: {
|
||||
title: '{{date}} Basal Metabolism',
|
||||
unit: 'kcal',
|
||||
normalRange: 'Normal range: {{min}}-{{max}} kcal',
|
||||
noData: '--',
|
||||
},
|
||||
stats: {
|
||||
title: 'Basal Metabolism Statistics',
|
||||
tabs: {
|
||||
week: 'By Week',
|
||||
month: 'By Month',
|
||||
},
|
||||
},
|
||||
chart: {
|
||||
loading: 'Loading...',
|
||||
loadingText: 'Loading...',
|
||||
error: {
|
||||
text: 'Loading failed: {{error}}',
|
||||
retry: 'Retry',
|
||||
fetchFailed: 'Failed to fetch data',
|
||||
},
|
||||
empty: 'No data available',
|
||||
yAxisSuffix: 'kcal',
|
||||
weekLabel: 'Week {{week}}',
|
||||
},
|
||||
modal: {
|
||||
title: 'Basal Metabolism',
|
||||
closeButton: '×',
|
||||
description: 'Basal metabolism, also known as Basal Metabolic Rate (BMR), refers to the minimum energy consumption required for the human body to maintain basic life functions (heartbeat, breathing, body temperature regulation, etc.) in a completely resting state, usually measured in calories.',
|
||||
sections: {
|
||||
importance: {
|
||||
title: 'Why is it important?',
|
||||
content: 'Basal metabolism accounts for 60-75% of total energy consumption and is the foundation of energy balance. Understanding your basal metabolism helps develop scientific nutrition plans, optimize weight management strategies, and assess metabolic health status.',
|
||||
},
|
||||
normalRange: {
|
||||
title: 'Normal Range',
|
||||
formulas: {
|
||||
male: 'Male: BMR = 10 × weight(kg) + 6.25 × height(cm) - 5 × age + 5',
|
||||
female: 'Female: BMR = 10 × weight(kg) + 6.25 × height(cm) - 5 × age - 161',
|
||||
},
|
||||
userRange: 'Your normal range: {{min}}-{{max}} kcal/day',
|
||||
rangeNote: '(Within 15% above or below the calculated value is considered normal)',
|
||||
userInfo: 'Based on your information: {{gender}}, {{age}} years old, {{height}}cm, {{weight}}kg',
|
||||
incompleteInfo: 'Please complete basic information to calculate your metabolic rate',
|
||||
},
|
||||
strategies: {
|
||||
title: 'Strategies to Boost Metabolism',
|
||||
subtitle: 'Scientific research supports the following methods:',
|
||||
items: [
|
||||
'1. Increase muscle mass (2-3 strength training sessions per week)',
|
||||
'2. High-intensity interval training (HIIT)',
|
||||
'3. Adequate protein intake (1.6-2.2g per kg of body weight)',
|
||||
'4. Ensure adequate sleep (7-9 hours per night)',
|
||||
'5. Avoid excessive calorie restriction (not less than 80% of BMR)',
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
gender: {
|
||||
male: 'Male',
|
||||
female: 'Female',
|
||||
},
|
||||
comments: {
|
||||
reloadData: 'Reload data',
|
||||
},
|
||||
};
|
||||
|
||||
export const workoutTypes = {
|
||||
americanfootball: 'American Football',
|
||||
archery: 'Archery',
|
||||
australianfootball: 'Australian Football',
|
||||
badminton: 'Badminton',
|
||||
baseball: 'Baseball',
|
||||
basketball: 'Basketball',
|
||||
bowling: 'Bowling',
|
||||
boxing: 'Boxing',
|
||||
climbing: 'Climbing',
|
||||
cricket: 'Cricket',
|
||||
crosstraining: 'Cross Training',
|
||||
curling: 'Curling',
|
||||
cycling: 'Cycling',
|
||||
dance: 'Dance',
|
||||
danceinspiredtraining: 'Dance Inspired Training',
|
||||
elliptical: 'Elliptical',
|
||||
equestriansports: 'Equestrian Sports',
|
||||
fencing: 'Fencing',
|
||||
fishing: 'Fishing',
|
||||
functionalstrengthtraining: 'Functional Strength Training',
|
||||
golf: 'Golf',
|
||||
gymnastics: 'Gymnastics',
|
||||
handball: 'Handball',
|
||||
hiking: 'Hiking',
|
||||
hockey: 'Hockey',
|
||||
hunting: 'Hunting',
|
||||
lacrosse: 'Lacrosse',
|
||||
martialarts: 'Martial Arts',
|
||||
mindandbody: 'Mind and Body',
|
||||
mixedmetaboliccardiotraining: 'Mixed Metabolic Cardio Training',
|
||||
paddlesports: 'Paddle Sports',
|
||||
play: 'Play',
|
||||
preparationandrecovery: 'Preparation & Recovery',
|
||||
racquetball: 'Racquetball',
|
||||
rowing: 'Rowing',
|
||||
rugby: 'Rugby',
|
||||
running: 'Running',
|
||||
sailing: 'Sailing',
|
||||
skatingsports: 'Skating Sports',
|
||||
snowsports: 'Snow Sports',
|
||||
soccer: 'Soccer',
|
||||
softball: 'Softball',
|
||||
squash: 'Squash',
|
||||
stairclimbing: 'Stair Climbing',
|
||||
surfingsports: 'Surfing Sports',
|
||||
swimming: 'Swimming',
|
||||
tabletennis: 'Table Tennis',
|
||||
tennis: 'Tennis',
|
||||
trackandfield: 'Track and Field',
|
||||
traditionalstrengthtraining: 'Traditional Strength Training',
|
||||
volleyball: 'Volleyball',
|
||||
walking: 'Walking',
|
||||
waterfitness: 'Water Fitness',
|
||||
waterpolo: 'Water Polo',
|
||||
watersports: 'Water Sports',
|
||||
wrestling: 'Wrestling',
|
||||
yoga: 'Yoga',
|
||||
barre: 'Barre',
|
||||
coretraining: 'Core Training',
|
||||
crosscountryskiing: 'Cross-Country Skiing',
|
||||
downhillskiing: 'Downhill Skiing',
|
||||
flexibility: 'Flexibility',
|
||||
highintensityintervaltraining: 'High-Intensity Interval Training',
|
||||
jumprope: 'Jump Rope',
|
||||
kickboxing: 'Kickboxing',
|
||||
pilates: 'Pilates',
|
||||
snowboarding: 'Snowboarding',
|
||||
stairs: 'Stairs',
|
||||
steptraining: 'Step Training',
|
||||
wheelchairwalkpace: 'Wheelchair Walk Pace',
|
||||
wheelchairrunpace: 'Wheelchair Run Pace',
|
||||
taichi: 'Tai Chi',
|
||||
mixedcardio: 'Mixed Cardio',
|
||||
handcycling: 'Hand Cycling',
|
||||
discsports: 'Disc Sports',
|
||||
fitnessgaming: 'Fitness Gaming',
|
||||
cardiodance: 'Cardio Dance',
|
||||
socialdance: 'Social Dance',
|
||||
pickleball: 'Pickleball',
|
||||
cooldown: 'Cooldown',
|
||||
swimbikerun: 'Swim Bike Run',
|
||||
transition: 'Transition',
|
||||
underwaterdiving: 'Underwater Diving',
|
||||
other: 'Other',
|
||||
};
|
||||
|
||||
export const workoutDetail = {
|
||||
loading: 'Loading workout details...',
|
||||
retry: 'Retry',
|
||||
errors: {
|
||||
loadFailed: 'Failed to load workout details',
|
||||
noHeartRateData: 'No heart rate data available',
|
||||
noZoneStats: 'No heart rate zone data',
|
||||
},
|
||||
metrics: {
|
||||
duration: 'Duration',
|
||||
calories: 'Calories',
|
||||
caloriesUnit: 'kcal',
|
||||
intensity: 'Intensity',
|
||||
averageHeartRate: 'Average Heart Rate',
|
||||
heartRateUnit: 'bpm',
|
||||
},
|
||||
sections: {
|
||||
heartRateRange: 'Heart Rate Range',
|
||||
averageHeartRate: 'Average',
|
||||
maximumHeartRate: 'Maximum',
|
||||
minimumHeartRate: 'Minimum',
|
||||
heartRateUnit: 'bpm',
|
||||
heartRateZones: 'Heart Rate Zones',
|
||||
},
|
||||
chart: {
|
||||
unavailable: 'Chart unavailable',
|
||||
noData: 'No heart rate chart data yet',
|
||||
},
|
||||
intensityInfo: {
|
||||
title: 'About workout intensity (METs)',
|
||||
description1: 'METs (metabolic equivalent) reflect energy cost; resting equals 1 MET.',
|
||||
description2: '3-6 METs is moderate intensity, above 6 METs is high intensity.',
|
||||
description3: 'Higher values mean more energy burned per minute—adjust to your fitness level.',
|
||||
description4: 'Warm up and cool down before and after sustained high-intensity sessions.',
|
||||
formula: {
|
||||
title: 'Formula',
|
||||
value: 'METs = Exercise VO₂ ÷ Resting VO₂',
|
||||
},
|
||||
legend: {
|
||||
low: '2-3 METs',
|
||||
lowLabel: 'Low intensity',
|
||||
medium: '3-6 METs',
|
||||
mediumLabel: 'Moderate',
|
||||
high: '>6 METs',
|
||||
highLabel: 'High intensity',
|
||||
},
|
||||
},
|
||||
zones: {
|
||||
summary: '{{minutes}} min · {{range}}',
|
||||
labels: {
|
||||
warmup: 'Warm-up',
|
||||
fatburn: 'Fat burn',
|
||||
aerobic: 'Aerobic',
|
||||
anaerobic: 'Anaerobic',
|
||||
max: 'Max effort',
|
||||
},
|
||||
ranges: {
|
||||
warmup: '<100 bpm',
|
||||
fatburn: '100-119 bpm',
|
||||
aerobic: '120-149 bpm',
|
||||
anaerobic: '150-169 bpm',
|
||||
max: '≥170 bpm',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const workoutHistory = {
|
||||
title: 'Workout Summary',
|
||||
loading: 'Loading workout records...',
|
||||
error: {
|
||||
permissionDenied: 'Health data permission not granted',
|
||||
loadFailed: 'Failed to load workout records, please try again later',
|
||||
detailLoadFailed: 'Failed to load workout details, please try again later',
|
||||
},
|
||||
retry: 'Retry',
|
||||
monthlyStats: {
|
||||
title: 'Workout Time',
|
||||
periodText: 'Statistics period: 1st - {{day}} (This month)',
|
||||
overviewWithStats: 'As of {{date}}, you have completed {{count}} workouts, totaling {{duration}}.',
|
||||
overviewEmpty: 'No workout records this month yet, start moving to collect your first one!',
|
||||
emptyData: 'No workout data this month',
|
||||
},
|
||||
intensity: {
|
||||
low: 'Low Intensity',
|
||||
medium: 'Medium Intensity',
|
||||
high: 'High Intensity',
|
||||
},
|
||||
historyCard: {
|
||||
calories: '{{calories}} kcal · {{minutes}} min',
|
||||
activityTime: '{{activity}}, {{time}}',
|
||||
},
|
||||
empty: {
|
||||
title: 'No Workout Records',
|
||||
subtitle: 'Complete a workout to view detailed history here',
|
||||
},
|
||||
monthOccurrence: 'This is your {{index}} {{activity}} in {{month}}.',
|
||||
};
|
||||
20
i18n/en/index.ts
Normal file
20
i18n/en/index.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import * as Challenge from './challenge';
|
||||
import * as Common from './common';
|
||||
import * as Diet from './diet';
|
||||
import * as Health from './health';
|
||||
import * as Medication from './medication';
|
||||
import * as Mood from './mood';
|
||||
import * as Personal from './personal';
|
||||
import * as Weight from './weight';
|
||||
|
||||
export default {
|
||||
...Personal,
|
||||
...Health,
|
||||
...Diet,
|
||||
...Medication,
|
||||
...Weight,
|
||||
...Challenge,
|
||||
...Mood,
|
||||
...Common,
|
||||
...Common.common, // 确保通用翻译被正确导出
|
||||
};
|
||||
543
i18n/en/medication.ts
Normal file
543
i18n/en/medication.ts
Normal file
@@ -0,0 +1,543 @@
|
||||
export const medications = {
|
||||
greeting: 'Hello, {{name}}',
|
||||
welcome: 'Welcome to Medication Assistant!',
|
||||
todayMedications: 'Today\'s Medications',
|
||||
filters: {
|
||||
all: 'All',
|
||||
taken: 'Taken',
|
||||
missed: 'Missed',
|
||||
},
|
||||
emptyState: {
|
||||
title: 'No medications scheduled for today',
|
||||
subtitle: 'No medication plans added yet. Let\'s add some.',
|
||||
},
|
||||
stack: {
|
||||
completed: 'Completed ({{count}})',
|
||||
},
|
||||
dateFormats: {
|
||||
today: 'Today, {{date}}',
|
||||
other: '{{date}}',
|
||||
},
|
||||
// MedicationCard
|
||||
card: {
|
||||
status: {
|
||||
missed: 'Missed',
|
||||
timeToTake: 'Time to take',
|
||||
remaining: '{{time}} remaining',
|
||||
},
|
||||
action: {
|
||||
takeNow: 'Take Now',
|
||||
taken: 'Taken',
|
||||
skipped: 'Skipped',
|
||||
skip: 'Skip',
|
||||
submitting: 'Submitting...',
|
||||
},
|
||||
skipAlert: {
|
||||
title: 'Confirm Skip',
|
||||
message: 'Are you sure you want to skip this medication?\n\nIt will not be recorded as taken.',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm Skip',
|
||||
},
|
||||
earlyTakeAlert: {
|
||||
title: 'Not yet time to take medication',
|
||||
message: 'This medication is scheduled for {{time}}, which is more than 1 hour from now.\n\nHave you already taken this medication?',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm Taken',
|
||||
},
|
||||
takeError: {
|
||||
title: 'Operation Failed',
|
||||
message: 'An error occurred while recording medication, please try again later',
|
||||
confirm: 'OK',
|
||||
},
|
||||
skipError: {
|
||||
title: 'Operation Failed',
|
||||
message: 'Skip operation failed, please try again later',
|
||||
confirm: 'OK',
|
||||
},
|
||||
},
|
||||
// Add Medication Page
|
||||
add: {
|
||||
title: 'Add Medication',
|
||||
steps: {
|
||||
name: 'Medication Name',
|
||||
dosage: 'Dosage & Form',
|
||||
frequency: 'Frequency',
|
||||
time: 'Reminder Time',
|
||||
note: 'Notes',
|
||||
},
|
||||
descriptions: {
|
||||
name: 'Name the medication and upload package photo for easy identification',
|
||||
dosage: 'Select tablet type and fill in dosage per administration',
|
||||
frequency: 'Set medication frequency and daily times',
|
||||
time: 'Add and manage daily reminder times',
|
||||
note: 'Fill in notes or doctor instructions (optional)',
|
||||
},
|
||||
name: {
|
||||
placeholder: 'Enter or search medication name',
|
||||
},
|
||||
photo: {
|
||||
title: 'Upload Medication Photo',
|
||||
subtitle: 'Take a photo or select from album to help identify medication packaging',
|
||||
selectTitle: 'Select Image',
|
||||
selectMessage: 'Please select image source',
|
||||
camera: 'Camera',
|
||||
album: 'From Album',
|
||||
cancel: 'Cancel',
|
||||
retake: 'Retake',
|
||||
uploading: 'Uploading...',
|
||||
uploadingText: 'Uploading',
|
||||
remove: 'Remove',
|
||||
cameraPermission: 'Camera permission is required to take medication photos',
|
||||
albumPermission: 'Album permission is required to select medication photos',
|
||||
uploadFailed: 'Upload Failed',
|
||||
uploadFailedMessage: 'Image upload failed, please try again later',
|
||||
cameraFailed: 'Camera Failed',
|
||||
cameraFailedMessage: 'Unable to open camera, please try again later',
|
||||
selectFailed: 'Selection Failed',
|
||||
selectFailedMessage: 'Unable to open album, please try again later',
|
||||
},
|
||||
dosage: {
|
||||
label: 'Dosage per administration',
|
||||
placeholder: '0.5',
|
||||
type: 'Type',
|
||||
unitSelector: 'Select dosage unit',
|
||||
},
|
||||
frequency: {
|
||||
label: 'Times per day',
|
||||
value: '{{count}} times/day',
|
||||
period: 'Medication period',
|
||||
start: 'Start',
|
||||
end: 'End',
|
||||
longTerm: 'Long-term',
|
||||
startDateInvalid: 'Invalid date',
|
||||
startDateInvalidMessage: 'Start date cannot be earlier than today',
|
||||
endDateInvalid: 'Invalid date',
|
||||
endDateInvalidMessage: 'End date cannot be earlier than start date',
|
||||
},
|
||||
time: {
|
||||
label: 'Daily reminder times',
|
||||
addTime: 'Add Time',
|
||||
editTime: 'Edit Reminder Time',
|
||||
addTimeButton: 'Add Time',
|
||||
},
|
||||
note: {
|
||||
label: 'Notes',
|
||||
placeholder: 'Record precautions, doctor instructions or custom reminders',
|
||||
voiceNotSupported: 'Voice-to-text is not supported on this device, you can type notes directly',
|
||||
voiceError: 'Voice recognition unavailable',
|
||||
voiceErrorMessage: 'Unable to use voice input, please check permission settings and try again',
|
||||
voiceStartError: 'Unable to start voice input',
|
||||
voiceStartErrorMessage: 'Please check microphone and voice recognition permissions and try again',
|
||||
},
|
||||
actions: {
|
||||
previous: 'Previous',
|
||||
next: 'Next',
|
||||
complete: 'Complete',
|
||||
},
|
||||
success: {
|
||||
title: 'Added Successfully',
|
||||
message: 'Successfully added medication "{{name}}"',
|
||||
confirm: 'OK',
|
||||
},
|
||||
error: {
|
||||
title: 'Add Failed',
|
||||
message: 'An error occurred while creating medication, please try again later',
|
||||
confirm: 'OK',
|
||||
},
|
||||
datePickers: {
|
||||
startDate: 'Select Start Date',
|
||||
endDate: 'Select End Date',
|
||||
time: 'Select Time',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm',
|
||||
},
|
||||
pickers: {
|
||||
timesPerDay: 'Select Times Per Day',
|
||||
dosageUnit: 'Select Dosage Unit',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm',
|
||||
},
|
||||
},
|
||||
// Medication Management Page
|
||||
manage: {
|
||||
title: 'Medication Management',
|
||||
subtitle: 'Manage status and reminders for all medications',
|
||||
filters: {
|
||||
all: 'All',
|
||||
active: 'Active',
|
||||
inactive: 'Inactive',
|
||||
},
|
||||
loading: 'Loading medication information...',
|
||||
empty: {
|
||||
title: 'No Medications',
|
||||
subtitle: 'No medication records yet, click the top right to add',
|
||||
},
|
||||
deactivate: {
|
||||
title: 'Deactivate {{name}}?',
|
||||
description: 'After deactivation, medication plans generated for the day will be deleted and cannot be recovered.',
|
||||
confirm: 'Confirm Deactivation',
|
||||
cancel: 'Cancel',
|
||||
error: {
|
||||
title: 'Operation Failed',
|
||||
message: 'An error occurred while deactivating medication, please try again later.',
|
||||
},
|
||||
},
|
||||
toggleError: {
|
||||
title: 'Operation Failed',
|
||||
message: 'An error occurred while toggling medication status, please try again later.',
|
||||
},
|
||||
formLabels: {
|
||||
capsule: 'Capsule',
|
||||
pill: 'Tablet',
|
||||
tablet: 'Tablet',
|
||||
injection: 'Injection',
|
||||
spray: 'Spray',
|
||||
drop: 'Drops',
|
||||
syrup: 'Syrup',
|
||||
other: 'Other',
|
||||
ointment: 'Ointment',
|
||||
},
|
||||
frequency: {
|
||||
daily: 'Daily',
|
||||
weekly: 'Weekly',
|
||||
custom: 'Custom',
|
||||
},
|
||||
cardMeta: 'Started {{date}} | Reminder: {{reminder}}',
|
||||
reminderNotSet: 'Not set',
|
||||
unknownDate: 'Unknown date',
|
||||
},
|
||||
// Medication Detail Page
|
||||
detail: {
|
||||
title: 'Medication Details',
|
||||
notFound: {
|
||||
title: 'Medication information not found',
|
||||
subtitle: 'Please re-enter this page from the medication list.',
|
||||
},
|
||||
loading: 'Loading...',
|
||||
error: {
|
||||
title: 'Unable to retrieve medication information at this time, please try again later.',
|
||||
subtitle: 'Please check your network and try again, or return to the previous page.',
|
||||
},
|
||||
sections: {
|
||||
plan: 'Medication Plan',
|
||||
dosage: 'Dosage & Form',
|
||||
note: 'Notes',
|
||||
overview: 'Medication Overview',
|
||||
aiAnalysis: 'AI Medication Analysis',
|
||||
},
|
||||
plan: {
|
||||
period: 'Medication Period',
|
||||
time: 'Medication Time',
|
||||
frequency: 'Frequency',
|
||||
expiryDate: 'Expiry Date',
|
||||
longTerm: 'Long-term',
|
||||
periodMessage: 'Start date: {{startDate}}\n{{endDateInfo}}',
|
||||
longTermPlan: 'Medication plan: Long-term medication',
|
||||
timeMessage: 'Set times: {{times}}',
|
||||
dateFormat: 'MMM D, YYYY',
|
||||
periodRange: 'From {{startDate}} to {{endDate}}',
|
||||
periodLongTerm: 'From {{startDate}} until indefinitely',
|
||||
expiryStatus: {
|
||||
notSet: 'Not set',
|
||||
expired: 'Expired',
|
||||
expiresToday: 'Expires today',
|
||||
expiresInDays: 'Expires in {{days}} days',
|
||||
},
|
||||
},
|
||||
dosage: {
|
||||
label: 'Dosage per administration',
|
||||
form: 'Form',
|
||||
selectDosage: 'Select Dosage',
|
||||
selectForm: 'Select Form',
|
||||
dosageValue: 'Dosage Value',
|
||||
unit: 'Unit',
|
||||
},
|
||||
note: {
|
||||
label: 'Medication Notes',
|
||||
placeholder: 'Record precautions, doctor instructions or custom reminders',
|
||||
edit: 'Edit Notes',
|
||||
noNote: 'No notes',
|
||||
voiceNotSupported: 'Voice-to-text is not supported on this device, you can type notes directly',
|
||||
save: 'Save',
|
||||
saveError: {
|
||||
title: 'Save Failed',
|
||||
message: 'An error occurred while submitting notes, please try again later.',
|
||||
},
|
||||
},
|
||||
overview: {
|
||||
calculating: 'Calculating...',
|
||||
takenCount: 'Taken {{count}} times in total',
|
||||
calculatingDays: 'Calculating adherence days',
|
||||
startedDays: 'Adhered for {{days}} days',
|
||||
startDate: 'Started {{date}}',
|
||||
noStartDate: 'No start date',
|
||||
},
|
||||
aiAnalysis: {
|
||||
analyzing: 'Analyzing medication information...',
|
||||
analyzingButton: 'Analyzing...',
|
||||
reanalyzeButton: 'Reanalyze',
|
||||
getAnalysisButton: 'Get AI Analysis',
|
||||
button: 'AI Analysis',
|
||||
status: {
|
||||
generated: 'Generated',
|
||||
memberExclusive: 'Member Exclusive',
|
||||
pending: 'Pending',
|
||||
},
|
||||
title: 'Analysis Results',
|
||||
recommendation: 'AI Recommended',
|
||||
placeholder: 'Get AI analysis to quickly understand suitable populations, ingredient safety, and usage recommendations.',
|
||||
categories: {
|
||||
suitableFor: 'Suitable For',
|
||||
unsuitableFor: 'Unsuitable For',
|
||||
sideEffects: 'Possible Side Effects',
|
||||
storageAdvice: 'Storage Advice',
|
||||
healthAdvice: 'Health/Usage Advice',
|
||||
},
|
||||
membershipCard: {
|
||||
title: 'Member Exclusive AI In-depth Analysis',
|
||||
subtitle: 'Unlock complete medication analysis and unlimited usage',
|
||||
},
|
||||
error: {
|
||||
title: 'Analysis Failed',
|
||||
message: 'AI analysis failed, please try again later',
|
||||
networkError: 'Failed to initiate analysis request, please check network connection',
|
||||
unauthorized: 'Please log in first',
|
||||
forbidden: 'No access to this medication',
|
||||
notFound: 'Medication not found',
|
||||
},
|
||||
},
|
||||
aiDraft: {
|
||||
reshoot: 'Reshoot',
|
||||
saveAndCreate: 'Save & Create',
|
||||
saveError: {
|
||||
title: 'Save Failed',
|
||||
message: 'An error occurred while creating medication, please try again later',
|
||||
},
|
||||
},
|
||||
status: {
|
||||
enabled: 'Reminders Enabled',
|
||||
disabled: 'Reminders Disabled',
|
||||
},
|
||||
delete: {
|
||||
title: 'Delete {{name}}?',
|
||||
description: 'After deletion, reminders and history related to this medication will be cleared and cannot be recovered.',
|
||||
confirm: 'Delete',
|
||||
cancel: 'Cancel',
|
||||
error: {
|
||||
title: 'Delete Failed',
|
||||
message: 'An error occurred while removing this medication, please try again later.',
|
||||
},
|
||||
},
|
||||
deactivate: {
|
||||
title: 'Deactivate {{name}}?',
|
||||
description: 'After deactivation, medication plans generated for the day will be deleted and cannot be recovered.',
|
||||
confirm: 'Confirm Deactivation',
|
||||
cancel: 'Cancel',
|
||||
error: {
|
||||
title: 'Operation Failed',
|
||||
message: 'An error occurred while deactivating medication, please try again later.',
|
||||
},
|
||||
},
|
||||
toggleError: {
|
||||
title: 'Operation Failed',
|
||||
message: 'An error occurred while toggling reminder status, please try again later.',
|
||||
},
|
||||
updateErrors: {
|
||||
dosage: 'Update Failed',
|
||||
dosageMessage: 'An error occurred while updating dosage, please try again later.',
|
||||
form: 'Update Failed',
|
||||
formMessage: 'An error occurred while updating form, please try again later.',
|
||||
expiryDate: 'Update Failed',
|
||||
expiryDateMessage: 'Failed to update expiry date, please try again later.',
|
||||
},
|
||||
imageViewer: {
|
||||
close: 'Close',
|
||||
},
|
||||
pickers: {
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm',
|
||||
},
|
||||
},
|
||||
// Edit Frequency Page
|
||||
editFrequency: {
|
||||
title: 'Edit Medication Frequency',
|
||||
missingParams: 'Missing required parameters',
|
||||
medicationName: 'Editing: {{name}}',
|
||||
sections: {
|
||||
frequency: 'Medication Frequency',
|
||||
frequencyDescription: 'Set daily medication frequency',
|
||||
time: 'Daily Reminder Times',
|
||||
timeDescription: 'Add and manage daily reminder times',
|
||||
},
|
||||
frequency: {
|
||||
repeatPattern: 'Repeat Pattern',
|
||||
timesPerDay: 'Times Per Day',
|
||||
daily: 'Daily',
|
||||
weekly: 'Weekly',
|
||||
custom: 'Custom',
|
||||
timesLabel: '{{count}} times',
|
||||
summary: '{{pattern}} {{count}} times',
|
||||
},
|
||||
time: {
|
||||
addTime: 'Add Time',
|
||||
editTime: 'Edit Reminder Time',
|
||||
addTimeButton: 'Add Time',
|
||||
},
|
||||
actions: {
|
||||
save: 'Save Changes',
|
||||
},
|
||||
error: {
|
||||
title: 'Update Failed',
|
||||
message: 'An error occurred while updating medication frequency, please try again later.',
|
||||
},
|
||||
pickers: {
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm',
|
||||
},
|
||||
},
|
||||
aiProgress: {
|
||||
title: 'Analyzing',
|
||||
steps: {
|
||||
analyzing_product: 'Analyzing product...',
|
||||
analyzing_suitability: 'Checking suitability...',
|
||||
analyzing_ingredients: 'Evaluating ingredients...',
|
||||
analyzing_effects: 'Generating safety advice...',
|
||||
completed: 'Completed, loading details...',
|
||||
},
|
||||
errors: {
|
||||
default: 'Recognition failed, please retake photo',
|
||||
queryFailed: 'Query failed, please try again later',
|
||||
},
|
||||
modal: {
|
||||
title: 'Retake Required',
|
||||
retry: 'Retake Photo',
|
||||
},
|
||||
},
|
||||
aiCamera: {
|
||||
title: 'AI Scan',
|
||||
steps: {
|
||||
front: {
|
||||
title: 'Front',
|
||||
subtitle: 'Ensure medication name is clearly visible',
|
||||
},
|
||||
side: {
|
||||
title: 'Back',
|
||||
subtitle: 'Include specs and ingredients info',
|
||||
},
|
||||
aux: {
|
||||
title: 'Side',
|
||||
subtitle: 'Add more details to improve accuracy',
|
||||
},
|
||||
stepProgress: 'Step {{current}} / {{total}}',
|
||||
optional: '(Optional)',
|
||||
notTaken: 'Empty',
|
||||
},
|
||||
buttons: {
|
||||
flip: 'Flip',
|
||||
capture: 'Snap',
|
||||
complete: 'Done',
|
||||
album: 'Album',
|
||||
},
|
||||
permission: {
|
||||
title: 'Camera Permission Required',
|
||||
description: 'Allow access to capture medication packaging for automatic recognition',
|
||||
button: 'Allow Camera Access',
|
||||
},
|
||||
alerts: {
|
||||
pickFailed: {
|
||||
title: 'Selection Failed',
|
||||
message: 'Please try again or choose another image',
|
||||
},
|
||||
captureFailed: {
|
||||
title: 'Capture Failed',
|
||||
message: 'Please try again',
|
||||
},
|
||||
insufficientPhotos: {
|
||||
title: 'Photos Missing',
|
||||
message: 'Please capture at least front and back sides',
|
||||
},
|
||||
taskFailed: {
|
||||
title: 'Task Creation Failed',
|
||||
defaultMessage: 'Please check network and try again',
|
||||
},
|
||||
},
|
||||
guideModal: {
|
||||
badge: 'Guide',
|
||||
title: 'Keep Photos Clear',
|
||||
description1: 'Please capture the product name and description on the front/back of the medication.',
|
||||
description2: 'Ensure good lighting, avoid glare, and keep text legible. Photo clarity affects recognition accuracy.',
|
||||
button: 'Got it!',
|
||||
},
|
||||
},
|
||||
aiSummary: {
|
||||
title: 'AI Medication Summary',
|
||||
headerBadge: 'AI Insight',
|
||||
subtitle: 'Adherence and safety overview',
|
||||
overviewTitle: 'Adherence snapshot',
|
||||
keyInsights: 'AI key insight',
|
||||
refresh: 'DeepSeek is analyzing, please wait...',
|
||||
stats: {
|
||||
activePlans: 'Active plans',
|
||||
plannedDoses: 'Planned doses',
|
||||
takenDoses: 'Taken doses',
|
||||
completion: 'Overall completion',
|
||||
avgCompletion: 'Avg adherence',
|
||||
activeDays: 'Planned days',
|
||||
},
|
||||
badges: {
|
||||
adherence: 'Adherence',
|
||||
safety: 'Monitoring',
|
||||
},
|
||||
doseSummary: 'Completed {{taken}} / {{planned}}',
|
||||
daysLabel: '{{days}} day plan • {{times}} times/day',
|
||||
completionLabel: '{{value}}% completed',
|
||||
emptyTitle: 'No active medication plans',
|
||||
emptyDescription: 'Activate or add a plan to generate the AI summary.',
|
||||
error403: 'Free AI quota is used up, please upgrade to continue.',
|
||||
genericError: 'Unable to load AI summary, please try again later.',
|
||||
keyInsightPlaceholder: 'No AI insight available yet.',
|
||||
listTitle: 'Plan breakdown',
|
||||
updatedAt: 'Updated {{time}}',
|
||||
pillChip: 'Professional advice',
|
||||
retry: 'Retry',
|
||||
infoModal: {
|
||||
badge: 'Info',
|
||||
title: 'Refresh & Adherence',
|
||||
point1: '• Daily Generation: Based on active medication plans and actual check-in data, generated daily.',
|
||||
point2: '• Refresh Effect: Retrieves the latest plan vs. actual completion and AI analysis, no extra quota used.',
|
||||
point3: '• Adherence: Degree of following the plan (completion rate). Higher means better compliance and lower risk.',
|
||||
point4: '• Statistics: Only counts plans with isActive=true and not deleted; completion only counts records with status "taken".',
|
||||
button: 'Got it',
|
||||
},
|
||||
completionInfoModal: {
|
||||
badge: 'Calculation',
|
||||
title: 'Completion Calculation Logic',
|
||||
point1: '• Overall completion = (Total actual doses taken ÷ Total planned doses) × 100%',
|
||||
point2: '• Actual doses taken: Number of medication records marked as "taken"',
|
||||
point3: '• Planned doses: Total doses calculated from the plan start date to current date based on daily frequency',
|
||||
point4: '• Detailed calculation: (Current date - Start date + 1) × Daily doses, e.g.: Day 5 with 2 daily doses = 10 total planned doses',
|
||||
point5: '• Individual plan completion = (Actual doses taken for that plan ÷ Planned doses for that plan) × 100%',
|
||||
button: 'Understood',
|
||||
},
|
||||
},
|
||||
aiSummaryInfo: {
|
||||
title: 'AI Medication Summary',
|
||||
placeholderImage: 'Intro Image',
|
||||
viewImage: 'View Full Image',
|
||||
features: {
|
||||
intelligent: {
|
||||
title: 'Intelligent Analysis',
|
||||
description: 'AI deeply analyzes your medication records to provide personalized health recommendations',
|
||||
},
|
||||
tracking: {
|
||||
title: 'Trend Tracking',
|
||||
description: 'Long-term tracking of medication effects to help optimize treatment plans',
|
||||
},
|
||||
professional: {
|
||||
title: 'Professional & Reliable',
|
||||
description: 'Based on medical knowledge base, providing safe and reliable health analysis',
|
||||
},
|
||||
},
|
||||
confirmButton: 'Subscribe Now',
|
||||
},
|
||||
};
|
||||
95
i18n/en/mood.ts
Normal file
95
i18n/en/mood.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
export const mood = {
|
||||
calendar: {
|
||||
title: 'Mood Calendar',
|
||||
weekDays: {
|
||||
monday: 'Mon',
|
||||
tuesday: 'Tue',
|
||||
wednesday: 'Wed',
|
||||
thursday: 'Thu',
|
||||
friday: 'Fri',
|
||||
saturday: 'Sat',
|
||||
sunday: 'Sun',
|
||||
},
|
||||
months: {
|
||||
january: 'Jan',
|
||||
february: 'Feb',
|
||||
march: 'Mar',
|
||||
april: 'Apr',
|
||||
may: 'May',
|
||||
june: 'Jun',
|
||||
july: 'Jul',
|
||||
august: 'Aug',
|
||||
september: 'Sep',
|
||||
october: 'Oct',
|
||||
november: 'Nov',
|
||||
december: 'Dec',
|
||||
},
|
||||
selectedDate: {
|
||||
selectDate: 'Please select a date',
|
||||
record: 'Record',
|
||||
noRecord: 'No mood records',
|
||||
noRecordHint: 'Click the "Record" button in the top right to add mood',
|
||||
noDateSelected: 'Please select a date first',
|
||||
noDateSelectedHint: 'Click a date in the calendar, then click the "Record" button to add mood',
|
||||
intensity: 'Intensity',
|
||||
dateFormat: 'MMMM D, YYYY',
|
||||
},
|
||||
errors: {
|
||||
loadMonthDataFailed: 'Failed to load monthly mood data',
|
||||
loadDailyDataFailed: 'Failed to load mood records',
|
||||
},
|
||||
},
|
||||
types: {
|
||||
happy: 'Happy',
|
||||
excited: 'Excited',
|
||||
thrilled: 'Thrilled',
|
||||
calm: 'Calm',
|
||||
anxious: 'Anxious',
|
||||
sad: 'Sad',
|
||||
lonely: 'Lonely',
|
||||
wronged: 'Wronged',
|
||||
angry: 'Angry',
|
||||
tired: 'Tired',
|
||||
},
|
||||
edit: {
|
||||
title: 'Record Mood',
|
||||
editTitle: 'Edit Mood',
|
||||
selectMood: 'Select Mood',
|
||||
intensity: 'Mood Intensity',
|
||||
intensityLow: 'Low',
|
||||
intensityHigh: 'High',
|
||||
diary: 'Mood Diary',
|
||||
diarySubtitle: 'Record your feelings and cherish beautiful memories',
|
||||
placeholder: `How are you feeling today?
|
||||
|
||||
Did you experience anything special?
|
||||
What made you happy?
|
||||
Or, what's bothering you?
|
||||
|
||||
Write down your feelings and let these moments become your precious memories...`,
|
||||
save: 'Save Mood',
|
||||
update: 'Update Mood',
|
||||
saving: 'Saving...',
|
||||
dateFormat: 'MMMM D, YYYY',
|
||||
alerts: {
|
||||
selectMood: 'Please select a mood',
|
||||
saveSuccess: 'Mood record saved',
|
||||
updateSuccess: 'Mood record updated',
|
||||
deleteSuccess: 'Mood record deleted',
|
||||
saveError: 'Failed to save mood, please try again',
|
||||
deleteError: 'Failed to delete mood, please try again',
|
||||
confirmDelete: 'Are you sure you want to delete this mood record?',
|
||||
confirmDeleteTitle: 'Confirm Delete',
|
||||
},
|
||||
},
|
||||
history: {
|
||||
title: 'Mood Records',
|
||||
noRecords: 'No mood records',
|
||||
totalRecords: 'Total Records',
|
||||
averageIntensity: 'Average Intensity',
|
||||
mostFrequent: 'Most Frequent',
|
||||
recentRecords: 'Recent Records',
|
||||
intensity: 'Intensity',
|
||||
dateTimeFormat: 'MM/DD HH:mm',
|
||||
},
|
||||
};
|
||||
428
i18n/en/personal.ts
Normal file
428
i18n/en/personal.ts
Normal file
@@ -0,0 +1,428 @@
|
||||
export const personal = {
|
||||
edit: 'Edit',
|
||||
login: 'Log in',
|
||||
memberNumber: 'Member ID: {{number}}',
|
||||
aiUsage: 'Free AI credits: {{value}}',
|
||||
aiUsageUnlimited: 'Unlimited',
|
||||
fishRecord: 'Energy log',
|
||||
badgesPreview: {
|
||||
title: 'My badges',
|
||||
subtitle: 'Celebrate every milestone',
|
||||
cta: 'View all',
|
||||
loading: 'Syncing your badges…',
|
||||
empty: 'Complete sleep or challenge tasks to unlock your first badge.',
|
||||
lockedHint: 'Keep building the habit to unlock more.',
|
||||
},
|
||||
stats: {
|
||||
height: 'Height',
|
||||
weight: 'Weight',
|
||||
age: 'Age',
|
||||
ageSuffix: ' yrs',
|
||||
},
|
||||
membership: {
|
||||
badge: 'Premium member',
|
||||
planFallback: 'VIP Membership',
|
||||
expiryLabel: 'Valid until',
|
||||
changeButton: 'Change plan',
|
||||
validForever: 'No expiry',
|
||||
dateFormat: 'YYYY-MM-DD',
|
||||
},
|
||||
sections: {
|
||||
notifications: 'Notifications',
|
||||
developer: 'Developer',
|
||||
other: 'Other',
|
||||
account: 'Account & Security',
|
||||
language: 'Language',
|
||||
healthData: 'Health data permissions',
|
||||
medicalSources: 'Medical Advice Sources',
|
||||
customization: 'Customization',
|
||||
},
|
||||
versionCheck: {
|
||||
sectionTitle: 'Updates',
|
||||
menuTitle: 'Check for updates',
|
||||
checking: 'Checking for updates...',
|
||||
upToDate: 'You are on the latest version',
|
||||
updateBadge: 'v{{version}} available',
|
||||
failed: 'Update check failed, please try again later',
|
||||
updateFound: 'New version v{{version}}',
|
||||
modalTitle: 'Update available',
|
||||
modalTag: 'New',
|
||||
currentVersion: 'Current',
|
||||
latestVersion: 'Latest',
|
||||
releaseNotesTitle: "What's new",
|
||||
fallbackNotes: 'Performance improvements and fixes to keep things smooth.',
|
||||
later: 'Remind me later',
|
||||
updateNow: 'Update now',
|
||||
missingUrl: 'Store link is not ready yet',
|
||||
openStoreFailed: 'Could not open the store, please try again',
|
||||
},
|
||||
menu: {
|
||||
notificationSettings: 'Notification settings',
|
||||
developerOptions: 'Developer options',
|
||||
pushSettings: 'Push notification settings',
|
||||
privacyPolicy: 'Privacy policy',
|
||||
feedback: 'Feedback',
|
||||
userAgreement: 'User agreement',
|
||||
logout: 'Log out',
|
||||
deleteAccount: 'Delete account',
|
||||
healthDataPermissions: 'Health data disclosure',
|
||||
whoSource: 'World Health Organization (WHO)',
|
||||
tabBarConfig: 'Tab Bar Settings',
|
||||
},
|
||||
language: {
|
||||
title: 'Language',
|
||||
menuTitle: 'Display language',
|
||||
modalTitle: 'Choose language',
|
||||
modalSubtitle: 'Your selection applies immediately',
|
||||
cancel: 'Cancel',
|
||||
options: {
|
||||
zh: {
|
||||
label: 'Chinese',
|
||||
description: 'Use the Chinese interface',
|
||||
},
|
||||
en: {
|
||||
label: 'English',
|
||||
description: 'Use the app in English',
|
||||
},
|
||||
},
|
||||
},
|
||||
tabBarConfig: {
|
||||
title: 'Tab Bar Settings',
|
||||
subtitle: 'Customize your bottom navigation',
|
||||
description: 'Use toggles to show or hide tabs',
|
||||
resetButton: 'Reset',
|
||||
cannotDisable: 'Cannot be disabled',
|
||||
vipOnly: 'VIP members only',
|
||||
resetConfirm: {
|
||||
title: 'Reset to Default?',
|
||||
message: 'This will reset all tab bar settings and visibility',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm',
|
||||
},
|
||||
resetSuccess: 'Settings reset to default',
|
||||
},
|
||||
};
|
||||
|
||||
export const editProfile = {
|
||||
title: 'Edit Profile',
|
||||
fields: {
|
||||
name: 'Nickname',
|
||||
gender: 'Gender',
|
||||
height: 'Height',
|
||||
weight: 'Weight',
|
||||
activityLevel: 'Activity Level',
|
||||
birthDate: 'Birth Date',
|
||||
maxHeartRate: 'Max Heart Rate',
|
||||
},
|
||||
gender: {
|
||||
male: 'Male',
|
||||
female: 'Female',
|
||||
notSet: 'Not set',
|
||||
},
|
||||
height: {
|
||||
unit: 'cm',
|
||||
placeholder: '170cm',
|
||||
},
|
||||
weight: {
|
||||
unit: 'kg',
|
||||
placeholder: '55kg',
|
||||
},
|
||||
activityLevels: {
|
||||
1: 'Sedentary',
|
||||
2: 'Lightly active',
|
||||
3: 'Moderately active',
|
||||
4: 'Very active',
|
||||
descriptions: {
|
||||
1: 'Rarely exercise',
|
||||
2: 'Exercise 1-3 times per week',
|
||||
3: 'Exercise 3-5 times per week',
|
||||
4: 'Exercise 6-7 times per week',
|
||||
},
|
||||
},
|
||||
birthDate: {
|
||||
placeholder: 'January 1, 1995',
|
||||
format: '{{month}} {{day}}, {{year}}',
|
||||
},
|
||||
maxHeartRate: {
|
||||
unit: 'bpm',
|
||||
notAvailable: 'Not available',
|
||||
alert: {
|
||||
title: 'Notice',
|
||||
message: 'Max heart rate data is automatically retrieved from Health app',
|
||||
},
|
||||
},
|
||||
alerts: {
|
||||
notLoggedIn: {
|
||||
title: 'Not logged in',
|
||||
message: 'Please log in before trying to save',
|
||||
},
|
||||
saveFailed: {
|
||||
title: 'Save failed',
|
||||
message: 'Please try again later',
|
||||
},
|
||||
avatarPermissions: {
|
||||
title: 'Insufficient permissions',
|
||||
message: 'Photo album permission is required to select avatar',
|
||||
},
|
||||
avatarUploadFailed: {
|
||||
title: 'Upload failed',
|
||||
message: 'Avatar upload failed, please try again',
|
||||
},
|
||||
avatarError: {
|
||||
title: 'Error occurred',
|
||||
message: 'Failed to select avatar, please try again',
|
||||
},
|
||||
avatarSuccess: {
|
||||
title: 'Success',
|
||||
message: 'Avatar updated successfully',
|
||||
},
|
||||
},
|
||||
modals: {
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm',
|
||||
save: 'Save',
|
||||
input: {
|
||||
namePlaceholder: 'Enter nickname',
|
||||
weightPlaceholder: 'Enter weight',
|
||||
weightUnit: 'kg',
|
||||
},
|
||||
selectHeight: 'Select Height',
|
||||
selectGender: 'Select Gender',
|
||||
selectActivityLevel: 'Select Activity Level',
|
||||
female: 'Female',
|
||||
male: 'Male',
|
||||
},
|
||||
defaultValues: {
|
||||
name: 'TonightEatMeat',
|
||||
height: 170,
|
||||
weight: 55,
|
||||
birthDate: '1995-01-01',
|
||||
activityLevel: 1,
|
||||
},
|
||||
};
|
||||
|
||||
export const login = {
|
||||
title: 'Log In',
|
||||
subtitle: 'Healthy living, freedom through self-discipline',
|
||||
appleLogin: 'Sign in with Apple',
|
||||
loggingIn: 'Logging in...',
|
||||
agreement: {
|
||||
readAndAgree: 'I have read and agree to ',
|
||||
privacyPolicy: 'Privacy Policy',
|
||||
and: ' and ',
|
||||
userAgreement: 'User Agreement',
|
||||
alert: {
|
||||
title: 'Please read and agree',
|
||||
message: 'Please read and check the "Privacy Policy" and "User Agreement" before continuing. Clicking "Agree and Continue" will automatically check the box and proceed.',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Agree and Continue',
|
||||
},
|
||||
},
|
||||
errors: {
|
||||
appleIdentityTokenMissing: 'Failed to get Apple identity token',
|
||||
loginFailed: 'Login failed, please try again later',
|
||||
loginFailedTitle: 'Login Failed',
|
||||
},
|
||||
success: {
|
||||
loginSuccess: 'Login Successful',
|
||||
},
|
||||
};
|
||||
|
||||
export const authGuard = {
|
||||
logout: {
|
||||
error: 'Logout Failed',
|
||||
errorMessage: 'Failed to logout, please try again later',
|
||||
},
|
||||
confirmLogout: {
|
||||
title: 'Confirm Logout',
|
||||
message: 'Are you sure you want to logout of your current account?',
|
||||
cancelButton: 'Cancel',
|
||||
confirmButton: 'Confirm',
|
||||
},
|
||||
deleteAccount: {
|
||||
successTitle: 'Account Deleted',
|
||||
successMessage: 'Your account has been successfully deleted',
|
||||
confirmButton: 'OK',
|
||||
errorTitle: 'Deletion Failed',
|
||||
errorMessage: 'Failed to delete account, please try again later',
|
||||
},
|
||||
confirmDeleteAccount: {
|
||||
title: 'Confirm Account Deletion',
|
||||
message: 'This action cannot be undone. Your account and all related data will be permanently deleted. Are you sure you want to continue?',
|
||||
cancelButton: 'Cancel',
|
||||
confirmButton: 'Confirm Deletion',
|
||||
},
|
||||
};
|
||||
|
||||
export const membershipModal = {
|
||||
plans: {
|
||||
lifetime: {
|
||||
title: 'Lifetime',
|
||||
subtitle: 'Lifetime companion, witnessing every health transformation',
|
||||
},
|
||||
quarterly: {
|
||||
title: 'Quarterly',
|
||||
subtitle: '3-month scientific plan, making health a habit',
|
||||
},
|
||||
weekly: {
|
||||
title: 'Weekly',
|
||||
subtitle: '7-day trial, experience the power of professional guidance',
|
||||
},
|
||||
unknown: 'Unknown Plan',
|
||||
tag: 'Best Value',
|
||||
},
|
||||
benefits: {
|
||||
title: 'Benefits Comparison',
|
||||
subtitle: 'Core benefits at a glance, choose with confidence',
|
||||
table: {
|
||||
benefit: 'Benefit',
|
||||
vip: 'VIP',
|
||||
regular: 'Regular',
|
||||
},
|
||||
items: {
|
||||
aiCalories: {
|
||||
title: 'AI Calorie Tracking',
|
||||
description: 'Photo recognition for automatic calorie tracking',
|
||||
},
|
||||
aiNutrition: {
|
||||
title: 'AI Nutrition Label',
|
||||
description: 'Identify nutrition facts from food packaging',
|
||||
},
|
||||
healthReminder: {
|
||||
title: 'Daily Health Reminder',
|
||||
description: 'Personalized health reminders based on goals',
|
||||
},
|
||||
aiMedication: {
|
||||
title: 'AI Medication Manager',
|
||||
description: 'Deep analysis of interactions & personalized schedules',
|
||||
},
|
||||
customChallenge: {
|
||||
title: 'Unlimited Custom Challenges',
|
||||
description: 'Create exclusive challenges & invite friends to join the journey',
|
||||
},
|
||||
},
|
||||
permissions: {
|
||||
unlimited: 'Unlimited',
|
||||
limited: 'Limited',
|
||||
dailyLimit: '{{count}} times/day',
|
||||
fullSupport: 'Full Support',
|
||||
basicSupport: 'Basic',
|
||||
smartReminder: 'Smart',
|
||||
fullAnalysis: 'Deep Analysis',
|
||||
createUnlimited: 'Unlimited',
|
||||
notSupported: 'Not Supported',
|
||||
},
|
||||
},
|
||||
sectionTitle: {
|
||||
plans: 'Membership Plans',
|
||||
plansSubtitle: 'Flexible choices, improve at your own pace',
|
||||
},
|
||||
actions: {
|
||||
subscribe: 'Subscribe Now',
|
||||
processing: 'Processing...',
|
||||
restore: 'Restore Purchase',
|
||||
restoring: 'Restoring...',
|
||||
back: 'Back',
|
||||
close: 'Close membership modal',
|
||||
selectPlan: 'Select {{plan}} plan',
|
||||
purchaseHint: 'Click to purchase {{plan}} membership',
|
||||
},
|
||||
agreements: {
|
||||
prefix: 'By subscribing, you agree to',
|
||||
userAgreement: 'User Agreement',
|
||||
membershipAgreement: 'Membership Agreement',
|
||||
autoRenewalAgreement: 'Auto-Renewal Agreement',
|
||||
alert: {
|
||||
title: 'Please read and agree',
|
||||
message: 'Please agree to User Agreement, Membership Agreement and Auto-Renewal Agreement before purchasing',
|
||||
confirm: 'OK',
|
||||
},
|
||||
},
|
||||
errors: {
|
||||
noProducts: 'No membership products found. Please configure iOS products in RevenueCat and sync to current Offering.',
|
||||
purchaseCancelled: 'Purchase cancelled',
|
||||
alreadyPurchased: 'You already own this item',
|
||||
networkError: 'Network connection failed',
|
||||
paymentPending: 'Payment is processing',
|
||||
invalidCredentials: 'Account verification failed',
|
||||
purchaseFailed: 'Purchase failed',
|
||||
restoreSuccess: 'Restore successful',
|
||||
restoreFailed: 'Restore failed',
|
||||
restoreCancelled: 'Restore cancelled',
|
||||
restorePartialFailed: 'Restore partially failed',
|
||||
noPurchasesFound: 'No purchase records found',
|
||||
selectPlan: 'Please select a plan',
|
||||
},
|
||||
loading: {
|
||||
products: 'Loading membership plans, please wait',
|
||||
purchase: 'Purchase in progress, please wait',
|
||||
},
|
||||
success: {
|
||||
purchase: 'Membership activated successfully',
|
||||
},
|
||||
};
|
||||
|
||||
export const notificationSettings = {
|
||||
title: 'Notification Settings',
|
||||
loading: 'Loading...',
|
||||
sections: {
|
||||
notifications: 'Notification Settings',
|
||||
medicationReminder: 'Medication Reminder',
|
||||
nutritionReminder: 'Nutrition Reminder',
|
||||
moodReminder: 'Mood Reminder',
|
||||
description: 'Description',
|
||||
},
|
||||
items: {
|
||||
pushNotifications: {
|
||||
title: 'Push Notifications',
|
||||
description: 'Receive app notifications when enabled',
|
||||
},
|
||||
medicationReminder: {
|
||||
title: 'Medication Reminder',
|
||||
description: 'Receive reminder notifications at medication time',
|
||||
},
|
||||
nutritionReminder: {
|
||||
title: 'Nutrition Record Reminder',
|
||||
description: 'Receive nutrition record reminders at meal times',
|
||||
},
|
||||
moodReminder: {
|
||||
title: 'Mood Record Reminder',
|
||||
description: 'Receive mood record reminders in the evening',
|
||||
},
|
||||
},
|
||||
description: {
|
||||
text: '• Push notifications is the master switch for all notifications\n• Various reminders require push notifications to be enabled\n• You can manage notification permissions in system settings\n• Disabling push notifications will stop all app notifications',
|
||||
},
|
||||
alerts: {
|
||||
permissionDenied: {
|
||||
title: 'Permission Denied',
|
||||
message: 'Please enable notification permission in system settings, then try to enable push notifications',
|
||||
cancel: 'Cancel',
|
||||
goToSettings: 'Go to Settings',
|
||||
},
|
||||
error: {
|
||||
title: 'Error',
|
||||
message: 'Failed to request notification permission',
|
||||
saveFailed: 'Failed to save settings',
|
||||
medicationReminderFailed: 'Failed to set medication reminder',
|
||||
nutritionReminderFailed: 'Failed to set nutrition reminder',
|
||||
moodReminderFailed: 'Failed to set mood reminder',
|
||||
},
|
||||
notificationsEnabled: {
|
||||
title: 'Notifications Enabled',
|
||||
body: 'You will receive app notifications and reminders',
|
||||
},
|
||||
medicationReminderEnabled: {
|
||||
title: 'Medication Reminder Enabled',
|
||||
body: 'You will receive reminder notifications at medication time',
|
||||
},
|
||||
nutritionReminderEnabled: {
|
||||
title: 'Nutrition Reminder Enabled',
|
||||
body: 'You will receive nutrition record reminders at meal times',
|
||||
},
|
||||
moodReminderEnabled: {
|
||||
title: 'Mood Reminder Enabled',
|
||||
body: 'You will receive mood record reminders in the evening',
|
||||
},
|
||||
},
|
||||
};
|
||||
31
i18n/en/weight.ts
Normal file
31
i18n/en/weight.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
export const weightRecords = {
|
||||
title: 'Weight Records',
|
||||
pageSubtitle: 'Track your weight progress and trends',
|
||||
loadingHistory: 'Failed to load weight history',
|
||||
history: 'Records',
|
||||
historyMonthFormat: '{{year}}.{{month}}',
|
||||
stats: {
|
||||
currentWeight: 'Current Weight',
|
||||
initialWeight: 'Starting Weight',
|
||||
targetWeight: 'Target Weight',
|
||||
},
|
||||
empty: {
|
||||
title: 'No weight records',
|
||||
subtitle: 'Tap the + button to add your first record.',
|
||||
},
|
||||
modal: {
|
||||
recordWeight: 'Record Weight',
|
||||
editInitialWeight: 'Edit Starting Weight',
|
||||
editTargetWeight: 'Edit Target Weight',
|
||||
editRecord: 'Edit Record',
|
||||
inputPlaceholder: 'Enter weight',
|
||||
unit: 'kg',
|
||||
quickSelection: 'Quick pick',
|
||||
confirm: 'Save',
|
||||
},
|
||||
alerts: {
|
||||
deleteFailed: 'Failed to delete record',
|
||||
invalidWeight: 'Please enter a valid weight between 0 and 500 kg',
|
||||
saveFailed: 'Failed to save weight, please try again',
|
||||
},
|
||||
};
|
||||
2022
i18n/index.ts
2022
i18n/index.ts
File diff suppressed because it is too large
Load Diff
303
i18n/zh/challenge.ts
Normal file
303
i18n/zh/challenge.ts
Normal file
@@ -0,0 +1,303 @@
|
||||
export const challengeDetail = {
|
||||
title: '挑战详情',
|
||||
notFound: '未找到该挑战,稍后再试试吧。',
|
||||
loading: '加载挑战详情中…',
|
||||
retry: '重新加载',
|
||||
share: {
|
||||
generating: '正在生成分享卡片...',
|
||||
failed: '分享失败,请稍后重试',
|
||||
messageJoined: '我正在参与「{{title}}」挑战,已完成 {{completed}}/{{target}} 天!一起加入吧!',
|
||||
messageNotJoined: '发现一个很棒的挑战「{{title}}」,一起来参与吧!',
|
||||
},
|
||||
dateRange: {
|
||||
format: '{{start}} - {{end}}',
|
||||
monthDay: '{{month}}月{{day}}日',
|
||||
ongoing: '持续更新中',
|
||||
},
|
||||
participants: {
|
||||
count: '{{count}} 人正在参与',
|
||||
ongoing: '持续更新中',
|
||||
more: '更多',
|
||||
},
|
||||
detail: {
|
||||
requirement: '按日打卡自动累计',
|
||||
viewAllRanking: '查看全部',
|
||||
},
|
||||
checkIn: {
|
||||
title: '挑战打卡',
|
||||
todayChecked: '今日已打卡',
|
||||
subtitle: '每日打卡会累计进度,达成目标天数',
|
||||
subtitleChecked: '已记录今日进度,明天继续保持',
|
||||
button: {
|
||||
checkIn: '立即打卡',
|
||||
checking: '打卡中…',
|
||||
checked: '今日已打卡',
|
||||
notJoined: '加入后打卡',
|
||||
upcoming: '挑战未开始',
|
||||
expired: '挑战已结束',
|
||||
},
|
||||
toast: {
|
||||
alreadyChecked: '今日已打卡',
|
||||
notStarted: '挑战未开始,开始后再来打卡',
|
||||
expired: '挑战已结束,无法打卡',
|
||||
mustJoin: '加入挑战后才能打卡',
|
||||
success: '打卡成功,继续坚持!',
|
||||
failed: '打卡失败,请稍后再试',
|
||||
},
|
||||
},
|
||||
cta: {
|
||||
join: '立即加入挑战',
|
||||
joining: '加入中…',
|
||||
leave: '退出挑战',
|
||||
leaving: '退出中…',
|
||||
delete: '删除挑战',
|
||||
deleting: '删除中…',
|
||||
upcoming: '挑战即将开始',
|
||||
expired: '挑战已结束',
|
||||
},
|
||||
highlight: {
|
||||
join: {
|
||||
title: '立即加入挑战',
|
||||
subtitle: '邀请好友一起坚持,更容易收获成果',
|
||||
},
|
||||
leave: {
|
||||
title: '先别急着离开',
|
||||
subtitle: '再坚持一下,下一个里程碑就要出现了',
|
||||
},
|
||||
upcoming: {
|
||||
title: '挑战即将开始',
|
||||
subtitle: '{{date}} 开始,敬请期待',
|
||||
subtitleFallback: '挑战即将开启,敬请期待',
|
||||
},
|
||||
expired: {
|
||||
title: '挑战已结束',
|
||||
subtitle: '{{date}} 已截止,期待下一次挑战',
|
||||
subtitleFallback: '本轮挑战已结束,期待下一次挑战',
|
||||
},
|
||||
},
|
||||
alert: {
|
||||
leaveConfirm: {
|
||||
title: '确认退出挑战?',
|
||||
message: '退出后需要重新加入才能继续坚持。',
|
||||
cancel: '取消',
|
||||
confirm: '退出挑战',
|
||||
},
|
||||
joinFailed: '加入挑战失败',
|
||||
leaveFailed: '退出挑战失败',
|
||||
archiveConfirm: {
|
||||
title: '确认删除该挑战?',
|
||||
message: '删除后将无法恢复,参与者也将无法再访问此挑战。',
|
||||
cancel: '取消',
|
||||
confirm: '删除挑战',
|
||||
},
|
||||
archiveFailed: '删除挑战失败',
|
||||
archiveSuccess: '挑战已删除',
|
||||
},
|
||||
ranking: {
|
||||
title: '排行榜',
|
||||
description: '',
|
||||
empty: '榜单即将开启,快来抢占席位。',
|
||||
today: '今日',
|
||||
todayGoal: '今日目标',
|
||||
hour: '小时',
|
||||
},
|
||||
leaderboard: {
|
||||
title: '排行榜',
|
||||
loading: '加载榜单中…',
|
||||
notFound: '未找到该挑战。',
|
||||
loadFailed: '暂时无法加载榜单,请稍后再试。',
|
||||
empty: '榜单即将开启,快来抢占席位。',
|
||||
loadMore: '加载更多…',
|
||||
loadMoreFailed: '加载更多失败,请下拉刷新重试',
|
||||
},
|
||||
shareCard: {
|
||||
footer: 'Out Live · 超越生命',
|
||||
progress: {
|
||||
label: '我的坚持进度',
|
||||
days: '{{completed}} / {{target}} 天',
|
||||
completed: '🎉 已完成挑战!',
|
||||
remaining: '还差 {{remaining}} 天完成挑战',
|
||||
},
|
||||
info: {
|
||||
checkInDaily: '按日打卡',
|
||||
joinUs: '快来一起坚持吧',
|
||||
},
|
||||
shareCode: {
|
||||
copied: '分享码已复制',
|
||||
},
|
||||
},
|
||||
shareCode: {
|
||||
copied: '分享码已复制',
|
||||
},
|
||||
};
|
||||
|
||||
export const badges = {
|
||||
title: '勋章馆',
|
||||
subtitle: '点亮每一次坚持',
|
||||
hero: {
|
||||
highlight: '保持连续打卡即可解锁更多稀有勋章',
|
||||
earnedLabel: '已获得',
|
||||
totalLabel: '总数',
|
||||
progressLabel: '解锁进度',
|
||||
},
|
||||
categories: {
|
||||
all: '全部',
|
||||
sleep: '睡眠',
|
||||
exercise: '运动',
|
||||
diet: '饮食',
|
||||
challenge: '挑战',
|
||||
social: '社交',
|
||||
special: '特别',
|
||||
},
|
||||
rarities: {
|
||||
common: '普通',
|
||||
uncommon: '少见',
|
||||
rare: '稀有',
|
||||
epic: '史诗',
|
||||
legendary: '传说',
|
||||
},
|
||||
status: {
|
||||
earned: '已获得',
|
||||
locked: '待解锁',
|
||||
earnedAt: '{{date}} 获得',
|
||||
},
|
||||
legend: '稀有度说明',
|
||||
filterLabel: '勋章分类',
|
||||
empty: {
|
||||
title: '还没有勋章',
|
||||
description: '完成睡眠、运动、挑战等任务即可点亮你的第一枚勋章。',
|
||||
action: '去探索计划',
|
||||
},
|
||||
};
|
||||
|
||||
export const challenges = {
|
||||
title: '挑战',
|
||||
subtitle: '加入官方或自定义挑战,一起坚持',
|
||||
loading: '加载挑战中…',
|
||||
loadFailed: '暂时无法获取挑战,请稍后再试。',
|
||||
retry: '重新加载',
|
||||
empty: '暂时没有挑战,先去创建或加入一个吧。',
|
||||
customChallenges: '自定义挑战',
|
||||
officialChallengesTitle: '官方挑战',
|
||||
officialChallenges: '官方挑战即将上线。',
|
||||
join: '加入',
|
||||
joined: '已加入',
|
||||
invalidInviteCode: '请输入有效的分享码',
|
||||
joinSuccess: '加入挑战成功',
|
||||
joinFailed: '加入失败,请稍后再试',
|
||||
joinModal: {
|
||||
title: '输入分享码加入',
|
||||
description: '输入好友分享码即可加入挑战',
|
||||
confirm: '加入挑战',
|
||||
joining: '加入中…',
|
||||
cancel: '取消',
|
||||
placeholder: '请输入分享码',
|
||||
},
|
||||
statusLabels: {
|
||||
upcoming: '即将开始',
|
||||
ongoing: '进行中',
|
||||
expired: '已结束',
|
||||
},
|
||||
createCustom: {
|
||||
title: '创建挑战',
|
||||
editTitle: '编辑挑战',
|
||||
yourChallenge: '你的挑战',
|
||||
basicInfo: '基础信息',
|
||||
challengeSettings: '挑战设置',
|
||||
displayInteraction: '展示与互动',
|
||||
durationDays: '{{days}} 天',
|
||||
durationDaysChallenge: '{{days}} 天挑战',
|
||||
dayUnit: '天',
|
||||
defaultTitle: '自定义挑战',
|
||||
rankingDescription: '榜单每日更新',
|
||||
typeLabels: {
|
||||
water: '饮水',
|
||||
exercise: '运动',
|
||||
diet: '饮食',
|
||||
sleep: '睡眠',
|
||||
mood: '心情',
|
||||
weight: '体重',
|
||||
custom: '自定义',
|
||||
},
|
||||
fields: {
|
||||
title: '挑战名称',
|
||||
titlePlaceholder: '例如 21 天早睡',
|
||||
coverImage: '封面图',
|
||||
uploadCover: '上传封面',
|
||||
challengeDescription: '挑战简介',
|
||||
descriptionPlaceholder: '写下挑战目标和打卡方式',
|
||||
challengeType: '挑战类型',
|
||||
challengeTypeHelper: '选择最贴近目标的类型',
|
||||
timeRange: '时间范围',
|
||||
start: '开始日期',
|
||||
end: '结束日期',
|
||||
duration: '持续时间',
|
||||
periodLabel: '周期标签',
|
||||
periodLabelPlaceholder: '例如 21 天养成计划',
|
||||
dailyTargetAndUnit: '每日目标与单位',
|
||||
dailyTargetPlaceholder: '每日目标数值',
|
||||
unitPlaceholder: '单位(杯/分钟/步数等)',
|
||||
unitHelper: '选填,展示在每日目标后',
|
||||
minimumCheckInDays: '最少打卡天数',
|
||||
minimumCheckInDaysPlaceholder: '不能超过总天数',
|
||||
maxParticipants: '参与人数上限',
|
||||
noLimit: '不限制',
|
||||
isPublic: '允许他人通过分享码加入',
|
||||
publicDescription: '开启后他人可凭分享码加入;关闭则仅自己可见',
|
||||
},
|
||||
floatingCTA: {
|
||||
title: '生成分享码',
|
||||
subtitle: '创建挑战并分享给好友一起打卡',
|
||||
editTitle: '保存更改',
|
||||
editSubtitle: '更新挑战信息并同步给参与者',
|
||||
},
|
||||
buttons: {
|
||||
createAndGenerateCode: '创建并生成分享码',
|
||||
creating: '创建中…',
|
||||
updateAndSave: '保存修改',
|
||||
updating: '保存中…',
|
||||
},
|
||||
datePicker: {
|
||||
confirm: '确认',
|
||||
cancel: '取消',
|
||||
},
|
||||
alerts: {
|
||||
titleRequired: '请输入挑战名称',
|
||||
endTimeError: '结束时间需要晚于开始时间',
|
||||
targetValueError: '每日目标需在 1-1000 之间',
|
||||
minimumDaysError: '最少打卡天数需在 1-365 之间',
|
||||
minimumDaysExceedError: '最少打卡天数不能超过挑战总天数',
|
||||
participantsError: '人数需在 2-10000 之间或留空',
|
||||
createFailed: '创建挑战失败',
|
||||
createSuccess: '挑战已创建',
|
||||
updateSuccess: '挑战已更新',
|
||||
},
|
||||
imageUpload: {
|
||||
selectSource: '选择封面',
|
||||
selectMessage: '拍照或从相册选择封面',
|
||||
camera: '拍照',
|
||||
album: '相册',
|
||||
cancel: '取消',
|
||||
cameraPermission: '需要相机权限',
|
||||
cameraPermissionMessage: '请开启相机权限以拍摄封面',
|
||||
albumPermissionMessage: '请开启相册权限以选择图片',
|
||||
cameraFailed: '打开相机失败',
|
||||
cameraFailedMessage: '请重试或从相册选择',
|
||||
selectFailed: '选择失败',
|
||||
selectFailedMessage: '暂时无法选择图片,请重试',
|
||||
uploadFailed: '上传失败',
|
||||
uploadFailedMessage: '封面上传失败,请稍后重试',
|
||||
uploading: '上传中…',
|
||||
clear: '移除封面',
|
||||
helper: '推荐使用 16:9 的高清图片,大小 2MB 内',
|
||||
},
|
||||
shareModal: {
|
||||
title: '分享码已生成',
|
||||
subtitle: '分享给好友即可一起参与挑战',
|
||||
generatingCode: '生成中…',
|
||||
copyCode: '复制分享码',
|
||||
viewChallenge: '查看挑战',
|
||||
later: '稍后再说',
|
||||
},
|
||||
},
|
||||
};
|
||||
14
i18n/zh/common.ts
Normal file
14
i18n/zh/common.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
export const dateSelector = {
|
||||
backToToday: '回到今天',
|
||||
cancel: '取消',
|
||||
confirm: '确定',
|
||||
};
|
||||
|
||||
export const common = {
|
||||
alert: '提示',
|
||||
success: '成功',
|
||||
error: '错误',
|
||||
delete: '删除',
|
||||
confirm: '确定',
|
||||
cancel: '取消',
|
||||
};
|
||||
551
i18n/zh/diet.ts
Normal file
551
i18n/zh/diet.ts
Normal file
@@ -0,0 +1,551 @@
|
||||
export const nutritionRecords = {
|
||||
title: '营养记录',
|
||||
listTitle: '今日餐食',
|
||||
recordCount: '{{count}} 条记录',
|
||||
empty: {
|
||||
title: '今天还没有记录',
|
||||
action: '记一笔',
|
||||
},
|
||||
footer: {
|
||||
end: '- 已经到底啦 -',
|
||||
loadMore: '加载更多',
|
||||
},
|
||||
delete: {
|
||||
title: '确认删除',
|
||||
message: '确定要删除这条营养记录吗?此操作无法撤销。',
|
||||
cancel: '取消',
|
||||
confirm: '删除',
|
||||
},
|
||||
mealTypes: {
|
||||
breakfast: '早餐',
|
||||
lunch: '午餐',
|
||||
dinner: '晚餐',
|
||||
snack: '加餐',
|
||||
other: '其他',
|
||||
},
|
||||
nutrients: {
|
||||
protein: '蛋白质',
|
||||
fat: '脂肪',
|
||||
carbs: '碳水',
|
||||
unit: 'g',
|
||||
caloriesUnit: '千卡',
|
||||
},
|
||||
overlay: {
|
||||
title: '记录方式',
|
||||
scan: 'AI识别',
|
||||
foodLibrary: '食物库',
|
||||
voiceRecord: '一句话记录',
|
||||
},
|
||||
chart: {
|
||||
remaining: '还能吃',
|
||||
formula: '还能吃 = 代谢 + 运动 - 饮食',
|
||||
metabolism: '代谢',
|
||||
exercise: '运动',
|
||||
diet: '饮食',
|
||||
},
|
||||
};
|
||||
|
||||
export const foodCamera = {
|
||||
title: '食物拍摄',
|
||||
hint: '确保食物在取景框内',
|
||||
permission: {
|
||||
title: '需要相机权限',
|
||||
description: '为了拍摄食物并进行AI识别,需要访问您的相机',
|
||||
button: '授权访问',
|
||||
},
|
||||
guide: {
|
||||
title: '拍摄示例',
|
||||
description: '请上传或拍摄清晰的食物照片,有助于提高识别准确率',
|
||||
button: '知道了',
|
||||
good: '光线充足,主体清晰',
|
||||
bad: '模糊不清,光线昏暗',
|
||||
},
|
||||
buttons: {
|
||||
album: '相册',
|
||||
capture: '拍照',
|
||||
help: '帮助',
|
||||
},
|
||||
alerts: {
|
||||
captureFailed: {
|
||||
title: '拍照失败',
|
||||
message: '请重试',
|
||||
},
|
||||
pickFailed: {
|
||||
title: '选择失败',
|
||||
message: '请重试',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const foodRecognition = {
|
||||
title: '食物识别',
|
||||
header: {
|
||||
confirm: '确认食物',
|
||||
recognizing: 'AI 识别中',
|
||||
},
|
||||
errors: {
|
||||
noImage: '未找到图片',
|
||||
generic: '食物识别失败,请重试',
|
||||
unknown: '未知错误',
|
||||
noFoodDetected: '识别失败:未检测到食物',
|
||||
processError: '识别过程出错',
|
||||
},
|
||||
logs: {
|
||||
uploading: '📤 正在上传图片到云端...',
|
||||
uploadSuccess: '✅ 图片上传完成',
|
||||
analyzing: '🤖 AI大模型分析中...',
|
||||
analysisSuccess: '✅ AI分析完成',
|
||||
confidence: '🎯 识别置信度: {{value}}%',
|
||||
itemsFound: '🍽️ 识别到 {{count}} 种食物',
|
||||
failed: '❌ 识别失败:未检测到食物',
|
||||
error: '❌ 识别过程出错',
|
||||
},
|
||||
status: {
|
||||
idle: {
|
||||
title: '准备就绪',
|
||||
subtitle: '请稍候...',
|
||||
},
|
||||
uploading: {
|
||||
title: '上传图片',
|
||||
subtitle: '正在上传图片到云端服务器...',
|
||||
},
|
||||
recognizing: {
|
||||
title: 'AI 分析中',
|
||||
subtitle: '智能模型正在分析食物成分...',
|
||||
},
|
||||
completed: {
|
||||
title: '识别成功',
|
||||
subtitle: '即将跳转到分析结果页面',
|
||||
},
|
||||
failed: {
|
||||
title: '识别失败',
|
||||
subtitle: '请检查网络或稍后重试',
|
||||
},
|
||||
processing: {
|
||||
title: '处理中...',
|
||||
subtitle: '请稍候...',
|
||||
},
|
||||
},
|
||||
mealTypes: {
|
||||
breakfast: '早餐',
|
||||
lunch: '午餐',
|
||||
dinner: '晚餐',
|
||||
snack: '加餐',
|
||||
unknown: '未知',
|
||||
},
|
||||
info: {
|
||||
title: '智能食物识别',
|
||||
description: 'AI 将分析照片,自动识别食物种类并估算营养成分,生成详细报告。',
|
||||
},
|
||||
actions: {
|
||||
start: '开始识别',
|
||||
retry: '返回重试',
|
||||
logs: '处理日志',
|
||||
logsPlaceholder: '准备开始...',
|
||||
},
|
||||
alerts: {
|
||||
recognizing: {
|
||||
title: '正在识别中',
|
||||
message: '识别过程尚未完成,确定要返回吗?',
|
||||
continue: '继续识别',
|
||||
back: '返回',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const foodAnalysisResult = {
|
||||
title: '分析结果',
|
||||
error: {
|
||||
notFound: '未找到图片或识别结果',
|
||||
},
|
||||
placeholder: '营养记录',
|
||||
nutrients: {
|
||||
caloriesUnit: '千卡',
|
||||
protein: '蛋白质',
|
||||
fat: '脂肪',
|
||||
carbs: '碳水',
|
||||
unit: '克',
|
||||
},
|
||||
sections: {
|
||||
recognitionResult: '识别结果',
|
||||
foodIntake: '食物摄入',
|
||||
},
|
||||
nonFood: {
|
||||
title: '未识别到食物',
|
||||
suggestions: {
|
||||
title: '建议:',
|
||||
item1: '• 确保图片中包含食物',
|
||||
item2: '• 尝试更清晰的照片角度',
|
||||
item3: '• 避免过度模糊或光线不足',
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
retake: '重新拍照',
|
||||
record: '记录',
|
||||
close: '关闭',
|
||||
},
|
||||
mealSelector: {
|
||||
title: '选择餐次',
|
||||
},
|
||||
editModal: {
|
||||
title: '编辑食物信息',
|
||||
fields: {
|
||||
name: '食物名称',
|
||||
namePlaceholder: '输入食物名称',
|
||||
amount: '重量 (克)',
|
||||
amountPlaceholder: '输入重量',
|
||||
calories: '卡路里 (千卡)',
|
||||
caloriesPlaceholder: '输入卡路里',
|
||||
},
|
||||
actions: {
|
||||
cancel: '取消',
|
||||
save: '保存',
|
||||
},
|
||||
},
|
||||
confidence: '置信度: {{value}}%',
|
||||
dateFormats: {
|
||||
today: 'YYYY年M月D日',
|
||||
full: 'YYYY年M月D日 HH:mm',
|
||||
},
|
||||
};
|
||||
|
||||
export const foodLibrary = {
|
||||
title: '食物库',
|
||||
custom: '自定义',
|
||||
search: {
|
||||
placeholder: '搜索食物...',
|
||||
loading: '搜索中...',
|
||||
empty: '未找到相关食物',
|
||||
noData: '暂无食物数据',
|
||||
},
|
||||
loading: '加载食物库中...',
|
||||
retry: '重试',
|
||||
mealTypes: {
|
||||
breakfast: '早餐',
|
||||
lunch: '午餐',
|
||||
dinner: '晚餐',
|
||||
snack: '加餐',
|
||||
},
|
||||
actions: {
|
||||
record: '记录',
|
||||
selectMeal: '选择餐次',
|
||||
},
|
||||
alerts: {
|
||||
deleteFailed: {
|
||||
title: '删除失败',
|
||||
message: '删除食物时发生错误,请稍后重试',
|
||||
},
|
||||
createFailed: {
|
||||
title: '创建失败',
|
||||
message: '创建自定义食物时发生错误,请稍后重试',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const createCustomFood = {
|
||||
title: '创建自定义食物',
|
||||
save: '保存',
|
||||
preview: {
|
||||
title: '效果预览',
|
||||
defaultName: '食物名称',
|
||||
},
|
||||
basicInfo: {
|
||||
title: '基本信息',
|
||||
name: '食物名称',
|
||||
namePlaceholder: '例如,汉堡',
|
||||
defaultAmount: '默认数量',
|
||||
calories: '食物热量',
|
||||
},
|
||||
optionalInfo: {
|
||||
title: '可选信息',
|
||||
photo: '照片',
|
||||
addPhoto: '添加照片',
|
||||
protein: '蛋白质',
|
||||
fat: '脂肪',
|
||||
carbohydrate: '碳水化合物',
|
||||
},
|
||||
units: {
|
||||
kcal: '千卡',
|
||||
g: 'g',
|
||||
gram: '克',
|
||||
},
|
||||
alerts: {
|
||||
permissionDenied: {
|
||||
title: '权限不足',
|
||||
message: '需要相册权限以选择照片',
|
||||
},
|
||||
uploadFailed: {
|
||||
title: '上传失败',
|
||||
message: '照片上传失败,请重试',
|
||||
},
|
||||
error: {
|
||||
title: '发生错误',
|
||||
message: '选择照片失败,请重试',
|
||||
},
|
||||
validation: {
|
||||
title: '提示',
|
||||
nameRequired: '请输入食物名称',
|
||||
caloriesRequired: '请输入有效的热量值',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const voiceRecord = {
|
||||
title: '一句话记录',
|
||||
intro: {
|
||||
description: '通过语音描述您的饮食内容,AI将智能分析营养成分和卡路里',
|
||||
},
|
||||
status: {
|
||||
idle: '轻触麦克风开始录音',
|
||||
listening: '正在聆听中,请开始说话...',
|
||||
processing: 'AI正在处理语音内容...',
|
||||
analyzing: 'AI大模型深度分析营养成分中...',
|
||||
result: '语音识别完成,请确认结果',
|
||||
},
|
||||
hints: {
|
||||
listening: '说出您想记录的食物内容',
|
||||
},
|
||||
examples: {
|
||||
title: '记录示例:',
|
||||
items: [
|
||||
'今早吃了两个煎蛋、一片全麦面包和一杯牛奶',
|
||||
'午饭吃了红烧肉约150克、米饭一小碗、青菜一份',
|
||||
'晚饭吃了蒸蛋羹、紫菜蛋花汤、小米粥一碗',
|
||||
],
|
||||
},
|
||||
analysis: {
|
||||
progress: '分析进度: {{progress}}%',
|
||||
hint: 'AI正在深度分析您的食物描述...',
|
||||
},
|
||||
result: {
|
||||
label: '识别结果:',
|
||||
},
|
||||
actions: {
|
||||
retry: '重新录音',
|
||||
confirm: '确认使用',
|
||||
},
|
||||
alerts: {
|
||||
noVoiceInput: '没有检测到语音输入,请重试',
|
||||
networkError: '网络连接异常,请检查网络后重试',
|
||||
voiceError: '语音识别出现问题,请重试',
|
||||
noValidContent: '未识别到有效内容,请重新录音',
|
||||
pleaseRecordFirst: '请先进行语音识别',
|
||||
recordingFailed: '录音失败',
|
||||
recordingPermissionError: '无法启动语音识别,请检查麦克风权限设置',
|
||||
analysisFailed: '分析失败',
|
||||
},
|
||||
};
|
||||
|
||||
export const nutritionLabelAnalysis = {
|
||||
title: '成分表分析',
|
||||
camera: {
|
||||
permissionDenied: '权限不足',
|
||||
permissionMessage: '需要相机权限才能拍摄成分表',
|
||||
},
|
||||
actions: {
|
||||
takePhoto: '拍摄',
|
||||
selectFromAlbum: '相册',
|
||||
startAnalysis: '开始分析',
|
||||
close: '关闭',
|
||||
},
|
||||
placeholder: {
|
||||
text: '拍摄或选择成分表照片',
|
||||
},
|
||||
status: {
|
||||
uploading: '正在上传图片...',
|
||||
analyzing: '正在分析成分表...',
|
||||
},
|
||||
errors: {
|
||||
analysisFailed: {
|
||||
title: '分析失败',
|
||||
message: '分析图片时发生错误,请重试',
|
||||
defaultMessage: '分析服务暂时不可用',
|
||||
},
|
||||
cannotRecognize: '无法识别成分表,请尝试拍摄更清晰的照片',
|
||||
cameraPermissionDenied: '需要相机权限才能拍摄成分表',
|
||||
},
|
||||
results: {
|
||||
title: '营养成分详细分析',
|
||||
detailedAnalysis: '营养成分详细分析',
|
||||
},
|
||||
imageViewer: {
|
||||
close: '关闭',
|
||||
dateFormat: 'YYYY年M月D日 HH:mm',
|
||||
},
|
||||
};
|
||||
|
||||
export const nutritionAnalysisHistory = {
|
||||
title: '历史记录',
|
||||
dateFormat: 'YYYY年M月D日 HH:mm',
|
||||
recognized: '识别 {{count}} 项营养素',
|
||||
loadingMore: '加载更多...',
|
||||
loading: '加载历史记录...',
|
||||
filter: {
|
||||
all: '全部',
|
||||
},
|
||||
filters: {
|
||||
all: '全部',
|
||||
success: '成功',
|
||||
failed: '失败',
|
||||
},
|
||||
status: {
|
||||
success: '成功',
|
||||
failed: '失败',
|
||||
processing: '处理中',
|
||||
unknown: '未知',
|
||||
},
|
||||
nutrients: {
|
||||
energy: '热量',
|
||||
protein: '蛋白质',
|
||||
carbs: '碳水',
|
||||
fat: '脂肪',
|
||||
},
|
||||
delete: {
|
||||
confirmTitle: '确认删除',
|
||||
confirmMessage: '确定要删除这条记录吗?',
|
||||
cancel: '取消',
|
||||
delete: '删除',
|
||||
successTitle: '删除成功',
|
||||
successMessage: '记录已成功删除',
|
||||
},
|
||||
actions: {
|
||||
expand: '展开详情',
|
||||
collapse: '收起详情',
|
||||
expandDetails: '展开详情',
|
||||
collapseDetails: '收起详情',
|
||||
confirmDelete: '确认删除',
|
||||
delete: '删除',
|
||||
cancel: '取消',
|
||||
retry: '重试',
|
||||
},
|
||||
empty: {
|
||||
title: '暂无历史记录',
|
||||
subtitle: '开始识别营养成分表吧',
|
||||
},
|
||||
errors: {
|
||||
error: '错误',
|
||||
loadFailed: '加载失败',
|
||||
unknownError: '未知错误',
|
||||
fetchFailed: '获取历史记录失败',
|
||||
fetchFailedRetry: '获取历史记录失败,请重试',
|
||||
deleteFailed: '删除失败,请稍后重试',
|
||||
},
|
||||
loadingState: {
|
||||
records: '加载历史记录...',
|
||||
more: '加载更多...',
|
||||
},
|
||||
details: {
|
||||
title: '详细营养成分',
|
||||
nutritionDetails: '详细营养成分',
|
||||
aiModel: 'AI 模型',
|
||||
provider: '服务提供商',
|
||||
serviceProvider: '服务提供商',
|
||||
},
|
||||
records: {
|
||||
nutritionCount: '识别 {{count}} 项营养素',
|
||||
},
|
||||
imageViewer: {
|
||||
close: '关闭',
|
||||
},
|
||||
};
|
||||
|
||||
export const waterDetail = {
|
||||
title: '饮水详情',
|
||||
waterRecord: '饮水记录',
|
||||
today: '今日',
|
||||
total: '总计:',
|
||||
goal: '目标:',
|
||||
noRecords: '暂无饮水记录',
|
||||
noRecordsSubtitle: '点击"添加记录"开始记录饮水量',
|
||||
deleteConfirm: {
|
||||
title: '确认删除',
|
||||
message: '确定要删除这条饮水记录吗?此操作无法撤销。',
|
||||
cancel: '取消',
|
||||
confirm: '删除',
|
||||
},
|
||||
deleteButton: '删除',
|
||||
water: '水',
|
||||
loadingUserPreferences: '加载用户偏好设置失败',
|
||||
};
|
||||
|
||||
export const waterSettings = {
|
||||
title: '饮水设置',
|
||||
sections: {
|
||||
dailyGoal: '每日饮水目标',
|
||||
quickAdd: '快速添加默认值',
|
||||
reminder: '喝水提醒',
|
||||
},
|
||||
descriptions: {
|
||||
quickAdd: '设置点击"+"按钮时添加的默认饮水量',
|
||||
reminder: '设置定时提醒您补充水分',
|
||||
},
|
||||
labels: {
|
||||
ml: 'ml',
|
||||
disabled: '已关闭',
|
||||
},
|
||||
alerts: {
|
||||
goalSuccess: {
|
||||
title: '设置成功',
|
||||
message: '每日饮水目标已设置为 {{amount}}ml',
|
||||
},
|
||||
quickAddSuccess: {
|
||||
title: '设置成功',
|
||||
message: '快速添加默认值已设置为 {{amount}}ml',
|
||||
},
|
||||
quickAddFailed: {
|
||||
title: '设置失败',
|
||||
message: '无法保存快速添加默认值,请重试',
|
||||
},
|
||||
},
|
||||
buttons: {
|
||||
cancel: '取消',
|
||||
confirm: '确定',
|
||||
},
|
||||
status: {
|
||||
reminderEnabled: '{{startTime}}-{{endTime}}, 每{{interval}}分钟',
|
||||
},
|
||||
};
|
||||
|
||||
export const waterReminderSettings = {
|
||||
title: '喝水提醒',
|
||||
sections: {
|
||||
notifications: '推送提醒',
|
||||
timeRange: '提醒时间段',
|
||||
interval: '提醒间隔',
|
||||
},
|
||||
descriptions: {
|
||||
notifications: '开启后将在指定时间段内定期推送喝水提醒',
|
||||
timeRange: '只在指定时间段内发送提醒,避免打扰您的休息',
|
||||
interval: '选择提醒的频率,建议30-120分钟为宜',
|
||||
},
|
||||
labels: {
|
||||
startTime: '开始时间',
|
||||
endTime: '结束时间',
|
||||
interval: '提醒间隔',
|
||||
saveSettings: '保存设置',
|
||||
hours: '小时',
|
||||
timeRangePreview: '时间段预览',
|
||||
minutes: '分钟',
|
||||
},
|
||||
alerts: {
|
||||
timeValidation: {
|
||||
title: '时间设置提示',
|
||||
startTimeInvalid: '开始时间不能晚于或等于结束时间,请重新选择',
|
||||
endTimeInvalid: '结束时间不能早于或等于开始时间,请重新选择',
|
||||
},
|
||||
success: {
|
||||
enabled: '设置成功',
|
||||
enabledMessage: '喝水提醒已开启\n\n时间段:{{timeRange}}\n提醒间隔:{{interval}}\n\n我们将在指定时间段内定期提醒您喝水',
|
||||
disabled: '设置成功',
|
||||
disabledMessage: '喝水提醒已关闭',
|
||||
},
|
||||
error: {
|
||||
title: '保存失败',
|
||||
message: '无法保存喝水提醒设置,请重试',
|
||||
},
|
||||
},
|
||||
buttons: {
|
||||
confirm: '确定',
|
||||
cancel: '取消',
|
||||
},
|
||||
};
|
||||
690
i18n/zh/health.ts
Normal file
690
i18n/zh/health.ts
Normal file
@@ -0,0 +1,690 @@
|
||||
export const healthPermissions = {
|
||||
title: '健康数据授权说明',
|
||||
subtitle: '我们通过 Apple Health 的 HealthKit/CareKit 接口同步必要的数据,让训练、恢复和提醒更贴合你的身体状态。',
|
||||
cards: {
|
||||
usage: {
|
||||
title: '我们会读取 / 写入的数据',
|
||||
items: [
|
||||
'运动与活动:步数、活动能量、锻炼记录用于生成训练表现和热力图。',
|
||||
'身体指标:身高、体重、体脂率帮助制定个性化训练与营养建议。',
|
||||
'睡眠与恢复:睡眠时长与阶段用于智能提醒与恢复建议。',
|
||||
'水分摄入:读取与写入饮水记录,保持与「健康」App 一致。',
|
||||
],
|
||||
},
|
||||
purpose: {
|
||||
title: '使用这些数据的目的',
|
||||
items: [
|
||||
'提供个性化训练计划、挑战与恢复建议。',
|
||||
'在统计页展示长期趋势,帮助你理解身体变化。',
|
||||
'减少重复输入,在提醒与挑战中自动同步进度。',
|
||||
],
|
||||
},
|
||||
control: {
|
||||
title: '你的控制权',
|
||||
items: [
|
||||
'授权流程完全由 Apple Health 控制,你可随时在 iOS 设置 > 健康 > 数据访问与设备 中更改权限。',
|
||||
'未授权的数据不会被访问,撤销授权后我们会清理相关缓存。',
|
||||
'核心功能依旧可用,并提供手动输入等替代方案。',
|
||||
],
|
||||
},
|
||||
privacy: {
|
||||
title: '数据存储与隐私',
|
||||
items: [
|
||||
'健康数据仅存储在你的设备上,我们不会上传服务器或共享给第三方。',
|
||||
'只有在需要同步的功能中才会保存聚合后的匿名统计值。',
|
||||
'我们遵循 Apple 的审核要求,任何变更都会提前告知。',
|
||||
],
|
||||
},
|
||||
},
|
||||
callout: {
|
||||
title: '未授权会怎样?',
|
||||
items: [
|
||||
'相关模块会提示你授权,并提供手动记录入口。',
|
||||
'拒绝授权不会影响其它与健康数据无关的功能。',
|
||||
],
|
||||
},
|
||||
contact: {
|
||||
title: '需要更多帮助?',
|
||||
description: '如果你对 HealthKit / CareKit 的使用方式有疑问,可通过以下邮箱或在个人中心提交反馈:',
|
||||
email: 'richardwei1995@gmail.com',
|
||||
},
|
||||
};
|
||||
|
||||
export const statistics = {
|
||||
title: 'Out Live',
|
||||
aiReport: {
|
||||
button: '报告',
|
||||
generating: '正在生成健康报告,预计 10~30 秒…',
|
||||
generatingShort: '生成中',
|
||||
success: '报告已生成',
|
||||
failed: '生成报告失败,请稍后重试',
|
||||
missing: '未获取到报告图片,请稍后重试',
|
||||
permission: '需要相册权限才能保存图片',
|
||||
saved: '已保存到相册',
|
||||
saveFailed: '保存失败,请稍后重试',
|
||||
save: '保存',
|
||||
saving: '保存中…',
|
||||
share: '分享',
|
||||
sharing: '分享中…',
|
||||
shareFailed: '分享失败,请稍后重试',
|
||||
shareTitle: 'AI 健康报告',
|
||||
shareMessage: '这是我的 AI 健康报告,分享给你看看!',
|
||||
close: '收起',
|
||||
galleryTitle: 'AI 报告画廊',
|
||||
gallerySubtitle: '沉浸式浏览你的健康报告',
|
||||
bannerTitle: '今日 AI 健康报告',
|
||||
bannerDesc: '点击右上角生成,约 10~30 秒',
|
||||
loadFailed: '加载报告历史失败',
|
||||
emptyHistory: '暂无报告记录',
|
||||
emptyHistoryHint: '点击右上角生成你的第一份报告',
|
||||
generated: '生成',
|
||||
},
|
||||
sections: {
|
||||
bodyMetrics: '身体指标',
|
||||
},
|
||||
components: {
|
||||
diet: {
|
||||
title: '饮食分析',
|
||||
loading: '加载中...',
|
||||
updated: '更新: {{time}}',
|
||||
remaining: '还能吃',
|
||||
calories: '热量',
|
||||
protein: '蛋白质',
|
||||
carb: '碳水',
|
||||
fat: '脂肪',
|
||||
fiber: '纤维',
|
||||
sodium: '钠',
|
||||
basal: '基代',
|
||||
exercise: '运动',
|
||||
diet: '饮食',
|
||||
kcal: '千卡',
|
||||
aiRecognition: 'AI识别',
|
||||
foodLibrary: '食物库',
|
||||
voiceRecord: '一句话记录',
|
||||
nutritionLabel: '成分表分析',
|
||||
},
|
||||
fitness: {
|
||||
kcal: '千卡',
|
||||
minutes: '分钟',
|
||||
hours: '小时',
|
||||
},
|
||||
steps: {
|
||||
title: '步数',
|
||||
},
|
||||
mood: {
|
||||
title: '心情',
|
||||
empty: '点击记录心情',
|
||||
},
|
||||
stress: {
|
||||
title: '压力',
|
||||
unit: 'ms',
|
||||
},
|
||||
water: {
|
||||
title: '喝水',
|
||||
unit: 'ml',
|
||||
addButton: '+ {{amount}}ml',
|
||||
},
|
||||
metabolism: {
|
||||
title: '基础代谢',
|
||||
loading: '加载中...',
|
||||
unit: '千卡/日',
|
||||
status: {
|
||||
high: '高代谢',
|
||||
normal: '正常',
|
||||
low: '偏低',
|
||||
veryLow: '较低',
|
||||
unknown: '未知',
|
||||
},
|
||||
},
|
||||
sleep: {
|
||||
title: '睡眠',
|
||||
loading: '加载中...',
|
||||
},
|
||||
oxygen: {
|
||||
title: '血氧饱和度',
|
||||
},
|
||||
circumference: {
|
||||
title: '围度 (cm)',
|
||||
setTitle: '设置{{label}}',
|
||||
confirm: '确认',
|
||||
measurements: {
|
||||
chest: '胸围',
|
||||
waist: '腰围',
|
||||
hip: '上臀围',
|
||||
arm: '臂围',
|
||||
thigh: '大腿围',
|
||||
calf: '小腿围',
|
||||
},
|
||||
},
|
||||
workout: {
|
||||
title: '近期锻炼',
|
||||
minutes: '分钟',
|
||||
kcal: '千卡',
|
||||
noData: '尚无锻炼数据',
|
||||
syncing: '等待同步',
|
||||
sourceWaiting: '来源:等待同步',
|
||||
sourceUnknown: '来源:未知',
|
||||
sourceFormat: '来源:{{source}}',
|
||||
sourceFormatMultiple: '来源:{{source}} 等',
|
||||
lastWorkout: '最近锻炼',
|
||||
updated: '更新',
|
||||
},
|
||||
weight: {
|
||||
title: '体重记录',
|
||||
addButton: '记录体重',
|
||||
bmi: 'BMI',
|
||||
weight: '体重',
|
||||
days: '天',
|
||||
range: '范围',
|
||||
unit: 'kg',
|
||||
bmiModal: {
|
||||
title: 'BMI 指数说明',
|
||||
description: 'BMI(身体质量指数)是评估体重与身高关系的国际通用健康指标',
|
||||
formula: '计算公式:体重(kg) ÷ 身高²(m)',
|
||||
classificationTitle: 'BMI 分类标准',
|
||||
healthTipsTitle: '健康建议',
|
||||
tips: {
|
||||
nutrition: '保持均衡饮食,控制热量摄入',
|
||||
exercise: '每周至少150分钟中等强度运动',
|
||||
sleep: '保证7-9小时充足睡眠',
|
||||
monitoring: '定期监测体重变化,及时调整',
|
||||
},
|
||||
disclaimer: 'BMI 仅供参考,不能反映肌肉量、骨密度等指标。如有健康疑问,请咨询专业医生。',
|
||||
continueButton: '继续',
|
||||
},
|
||||
},
|
||||
fitnessRings: {
|
||||
title: '健身圆环',
|
||||
activeCalories: '活动卡路里',
|
||||
exerciseMinutes: '锻炼分钟',
|
||||
standHours: '站立小时',
|
||||
goal: '/{{goal}}',
|
||||
ringLabels: {
|
||||
active: '活动',
|
||||
exercise: '锻炼',
|
||||
stand: '站立',
|
||||
},
|
||||
},
|
||||
},
|
||||
tabs: {
|
||||
health: '健康',
|
||||
medications: '用药',
|
||||
fasting: '断食',
|
||||
challenges: '挑战',
|
||||
personal: '个人',
|
||||
},
|
||||
activityHeatMap: {
|
||||
subtitle: '最近6个月活跃 {{days}} 天',
|
||||
activeRate: '{{rate}}%',
|
||||
popover: {
|
||||
title: '能量值的积攒后续可以用来兑换 AI 相关权益',
|
||||
subtitle: '获取说明',
|
||||
rules: {
|
||||
login: '1. 每日登录获得能量值+1',
|
||||
mood: '2. 每日记录心情获得能量值+1',
|
||||
diet: '3. 记饮食获得能量值+1',
|
||||
goal: '4. 完成一次目标获得能量值+1',
|
||||
},
|
||||
},
|
||||
months: {
|
||||
1: '1月',
|
||||
2: '2月',
|
||||
3: '3月',
|
||||
4: '4月',
|
||||
5: '5月',
|
||||
6: '6月',
|
||||
7: '7月',
|
||||
8: '8月',
|
||||
9: '9月',
|
||||
10: '10月',
|
||||
11: '11月',
|
||||
12: '12月',
|
||||
},
|
||||
legend: {
|
||||
less: '少',
|
||||
more: '多',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const sleepDetail = {
|
||||
title: '睡眠详情',
|
||||
loading: '加载睡眠数据中...',
|
||||
today: '今天',
|
||||
sleepScore: '睡眠评分',
|
||||
noData: '暂无睡眠数据',
|
||||
noDataRecommendation: '请确保在真实iOS设备上运行并授权访问健康数据,或等待有睡眠数据后再查看。',
|
||||
sleepDuration: '睡眠时长',
|
||||
sleepQuality: '睡眠质量',
|
||||
sleepStages: '睡眠阶段',
|
||||
learnMore: '了解更多',
|
||||
awake: '清醒',
|
||||
rem: '快速眼动',
|
||||
core: '核心睡眠',
|
||||
deep: '深度睡眠',
|
||||
unknown: '未知',
|
||||
rawData: '原始数据',
|
||||
rawDataDescription: '包含 {{count}} 条 HealthKit 睡眠样本记录',
|
||||
infoModalTitles: {
|
||||
sleepTime: '睡眠时间',
|
||||
sleepQuality: '睡眠质量',
|
||||
},
|
||||
sleepGrades: {
|
||||
low: '低',
|
||||
normal: '正常',
|
||||
good: '良好',
|
||||
excellent: '优秀',
|
||||
poor: '较差',
|
||||
fair: '一般',
|
||||
},
|
||||
sleepTimeDescription: '睡眠最重要 - 它占据了你睡眠得分的一半以上。长时间的睡眠可以减少睡眠债务,但是规律的睡眠时间对于高质量的休息至关重要。',
|
||||
sleepQualityDescription: '睡眠质量综合评估您的睡眠效率、深度睡眠时长、REM睡眠比例等多个指标。高质量的睡眠不仅仅取决于时长,还包括睡眠的连续性和各睡眠阶段的平衡。',
|
||||
sleepStagesInfo: {
|
||||
title: '了解你的睡眠阶段',
|
||||
description: '人们对睡眠阶段和睡眠质量有许多误解。有些人可能需要更多深度睡眠,其他人则不然。科学家和医生仍在探索不同睡眠阶段的作用及其对身体的影响。通过跟踪睡眠阶段并留意每天清晨的感受,你或许能深入了解自己的睡眠。',
|
||||
awake: {
|
||||
title: '清醒时间',
|
||||
description: '一次睡眠期间,你可能会醒来几次。偶尔醒来很正常。可能你会立刻再次入睡,并不记得曾在夜间醒来。',
|
||||
},
|
||||
rem: {
|
||||
title: '快速动眼睡眠',
|
||||
description: '这一睡眠阶段可能对学习和记忆产生一定影响。在此阶段,你的肌肉最为放松,眼球也会快速左右移动。这也是你大多数梦境出现的阶段。',
|
||||
},
|
||||
core: {
|
||||
title: '核心睡眠',
|
||||
description: '这一阶段有时也称为浅睡期,与其他阶段一样重要。此阶段通常占据你每晚大部分的睡眠时间。对于认知至关重要的脑电波会在这一阶段产生。',
|
||||
},
|
||||
deep: {
|
||||
title: '深度睡眠',
|
||||
description: '因为脑电波的特征,这一阶段也称为慢波睡眠。在此阶段,身体组织得到修复,并释放重要荷尔蒙。它通常出现在睡眠的前半段,且持续时间较长。深度睡眠期间,身体非常放松,因此相较于其他阶段,你可能更难在此阶段醒来。',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const sleepQuality = {
|
||||
excellent: {
|
||||
description: '你身心愉悦并且精力充沛',
|
||||
recommendation: '恭喜你获得优质的睡眠!如果你感到精力充沛,可以考虑中等强度的运动,以维持健康的生活方式,并进一步减轻压力,以获得最佳睡眠。'
|
||||
},
|
||||
good: {
|
||||
description: '睡眠质量良好,精神状态不错',
|
||||
recommendation: '你的睡眠质量还不错,但还有改善空间。建议保持规律的睡眠时间,睡前避免使用电子设备,营造安静舒适的睡眠环境。'
|
||||
},
|
||||
fair: {
|
||||
description: '睡眠质量一般,可能影响日间表现',
|
||||
recommendation: '你的睡眠需要改善。建议制定固定的睡前例行程序,限制咖啡因摄入,确保卧室温度适宜,考虑进行轻度运动来改善睡眠质量。'
|
||||
},
|
||||
poor: {
|
||||
description: '睡眠质量较差,建议重视睡眠健康',
|
||||
recommendation: '你的睡眠质量需要严重关注。建议咨询医生或睡眠专家,检查是否有睡眠障碍,同时改善睡眠环境和习惯,避免睡前刺激性活动。'
|
||||
}
|
||||
};
|
||||
|
||||
export const stepsDetail = {
|
||||
title: '步数详情',
|
||||
loading: '加载中...',
|
||||
stats: {
|
||||
totalSteps: '总步数',
|
||||
averagePerHour: '平均每小时',
|
||||
mostActiveTime: '最活跃时段',
|
||||
},
|
||||
chart: {
|
||||
title: '每小时步数分布',
|
||||
averageLabel: '平均 {{steps}}步',
|
||||
},
|
||||
activityLevel: {
|
||||
currentActivity: '你今天的活动量处于',
|
||||
levels: {
|
||||
inactive: '不怎么动',
|
||||
light: '轻度活跃',
|
||||
moderate: '中等活跃',
|
||||
very_active: '非常活跃',
|
||||
},
|
||||
progress: {
|
||||
current: '当前',
|
||||
nextLevel: '下一级: {{level}}',
|
||||
highestLevel: '已达最高级',
|
||||
},
|
||||
},
|
||||
timeLabels: {
|
||||
midnight: '0:00',
|
||||
noon: '12:00',
|
||||
nextDay: '24:00',
|
||||
},
|
||||
};
|
||||
|
||||
export const fitnessRingsDetail = {
|
||||
title: '健身圆环详情',
|
||||
loading: '加载中...',
|
||||
weekDays: {
|
||||
monday: '周一',
|
||||
tuesday: '周二',
|
||||
wednesday: '周三',
|
||||
thursday: '周四',
|
||||
friday: '周五',
|
||||
saturday: '周六',
|
||||
sunday: '周日',
|
||||
},
|
||||
dateFormats: {
|
||||
header: 'YYYY年MM月DD日',
|
||||
},
|
||||
cards: {
|
||||
activeCalories: {
|
||||
title: '活动热量',
|
||||
unit: '千卡',
|
||||
},
|
||||
exerciseMinutes: {
|
||||
title: '锻炼分钟数',
|
||||
unit: '分钟',
|
||||
info: {
|
||||
title: '锻炼分钟数:',
|
||||
description: '进行强度不低于"快走"的运动锻炼,就会积累对应时长的锻炼分钟数。',
|
||||
recommendation: '世卫组织推荐的成年人每天至少保持30分钟以上的中高强度运动。',
|
||||
knowButton: '知道了',
|
||||
},
|
||||
},
|
||||
standHours: {
|
||||
title: '活动小时数',
|
||||
unit: '小时',
|
||||
},
|
||||
},
|
||||
stats: {
|
||||
weeklyClosedRings: '周闭环天数',
|
||||
daysUnit: '天',
|
||||
},
|
||||
datePicker: {
|
||||
cancel: '取消',
|
||||
confirm: '确定',
|
||||
},
|
||||
errors: {
|
||||
loadExerciseInfoPreference: '加载锻炼分钟说明偏好失败',
|
||||
saveExerciseInfoPreference: '保存锻炼分钟说明偏好失败',
|
||||
},
|
||||
};
|
||||
|
||||
export const circumferenceDetail = {
|
||||
title: '围度统计',
|
||||
loading: '加载中...',
|
||||
error: '加载失败',
|
||||
retry: '重试',
|
||||
noData: '暂无数据',
|
||||
noDataSelected: '请选择要显示的围度数据',
|
||||
tabs: {
|
||||
week: '按周',
|
||||
month: '按月',
|
||||
year: '按年',
|
||||
},
|
||||
measurements: {
|
||||
chest: '胸围',
|
||||
waist: '腰围',
|
||||
upperHip: '上臀围',
|
||||
arm: '臂围',
|
||||
thigh: '大腿围',
|
||||
calf: '小腿围',
|
||||
},
|
||||
modal: {
|
||||
title: '设置{{label}}',
|
||||
defaultTitle: '设置围度',
|
||||
confirm: '确认',
|
||||
},
|
||||
chart: {
|
||||
weekLabel: '第{{week}}周',
|
||||
monthLabel: '{{month}}月',
|
||||
empty: '暂无数据',
|
||||
noSelection: '请选择要显示的围度数据',
|
||||
},
|
||||
};
|
||||
|
||||
export const basalMetabolismDetail = {
|
||||
title: '基础代谢',
|
||||
currentData: {
|
||||
title: '{{date}} 基础代谢',
|
||||
unit: '千卡',
|
||||
normalRange: '正常范围: {{min}}-{{max}} 千卡',
|
||||
noData: '--',
|
||||
},
|
||||
stats: {
|
||||
title: '基础代谢统计',
|
||||
tabs: {
|
||||
week: '按周',
|
||||
month: '按月',
|
||||
},
|
||||
},
|
||||
chart: {
|
||||
loading: '加载中...',
|
||||
loadingText: '加载中...',
|
||||
error: {
|
||||
text: '加载失败: {{error}}',
|
||||
retry: '重试',
|
||||
fetchFailed: '获取数据失败',
|
||||
},
|
||||
empty: '暂无数据',
|
||||
yAxisSuffix: '千卡',
|
||||
weekLabel: '第{{week}}周',
|
||||
},
|
||||
modal: {
|
||||
title: '基础代谢',
|
||||
closeButton: '×',
|
||||
description: '基础代谢,也称基础代谢率(BMR),是指人体在完全静息状态下维持基本生命功能(心跳、呼吸、体温调节等)所需的最低能量消耗,通常以卡路里为单位。',
|
||||
sections: {
|
||||
importance: {
|
||||
title: '为什么重要?',
|
||||
content: '基础代谢占总能量消耗的60-75%,是能量平衡的基础。了解您的基础代谢有助于制定科学的营养计划、优化体重管理策略,以及评估代谢健康状态。',
|
||||
},
|
||||
normalRange: {
|
||||
title: '正常范围',
|
||||
formulas: {
|
||||
male: '男性:BMR = 10 × 体重(kg) + 6.25 × 身高(cm) - 5 × 年龄 + 5',
|
||||
female: '女性:BMR = 10 × 体重(kg) + 6.25 × 身高(cm) - 5 × 年龄 - 161',
|
||||
},
|
||||
userRange: '您的正常区间:{{min}}-{{max}}千卡/天',
|
||||
rangeNote: '(在公式基础计算值上下浮动15%都属于正常范围)',
|
||||
userInfo: '基于您的信息:{{gender}},{{age}}岁,{{height}}cm,{{weight}}kg',
|
||||
incompleteInfo: '请完善基本信息以计算您的代谢率',
|
||||
},
|
||||
strategies: {
|
||||
title: '提高代谢率的策略',
|
||||
subtitle: '科学研究支持以下方法:',
|
||||
items: [
|
||||
'1.增加肌肉量 (每周2-3次力量训练)',
|
||||
'2.高强度间歇训练 (HIIT)',
|
||||
'3.充分蛋白质摄入 (体重每公斤1.6-2.2g)',
|
||||
'4.保证充足睡眠 (7-9小时/晚)',
|
||||
'5.避免过度热量限制 (不低于BMR的80%)',
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
gender: {
|
||||
male: '男性',
|
||||
female: '女性',
|
||||
},
|
||||
comments: {
|
||||
reloadData: '重新加载数据',
|
||||
},
|
||||
};
|
||||
|
||||
export const workoutTypes = {
|
||||
americanfootball: '美式橄榄球',
|
||||
archery: '射箭',
|
||||
australianfootball: '澳式橄榄球',
|
||||
badminton: '羽毛球',
|
||||
baseball: '棒球',
|
||||
basketball: '篮球',
|
||||
bowling: '保龄球',
|
||||
boxing: '拳击',
|
||||
climbing: '攀岩',
|
||||
cricket: '板球',
|
||||
crosstraining: '交叉训练',
|
||||
curling: '冰壶',
|
||||
cycling: '骑行',
|
||||
dance: '舞蹈',
|
||||
danceinspiredtraining: '舞蹈灵感训练',
|
||||
elliptical: '椭圆机',
|
||||
equestriansports: '马术',
|
||||
fencing: '击剑',
|
||||
fishing: '钓鱼',
|
||||
functionalstrengthtraining: '功能性力量训练',
|
||||
golf: '高尔夫',
|
||||
gymnastics: '体操',
|
||||
handball: '手球',
|
||||
hiking: '徒步',
|
||||
hockey: '曲棍球',
|
||||
hunting: '打猎',
|
||||
lacrosse: '长曲棍球',
|
||||
martialarts: '武术',
|
||||
mindandbody: '身心训练',
|
||||
mixedmetaboliccardiotraining: '混合代谢有氧训练',
|
||||
paddlesports: '划桨运动',
|
||||
play: '玩乐活动',
|
||||
preparationandrecovery: '热身与恢复',
|
||||
racquetball: '回力球',
|
||||
rowing: '划船',
|
||||
rugby: '橄榄球',
|
||||
running: '跑步',
|
||||
sailing: '帆船',
|
||||
skatingsports: '滑冰运动',
|
||||
snowsports: '冰雪运动',
|
||||
soccer: '足球',
|
||||
softball: '垒球',
|
||||
squash: '壁球',
|
||||
stairclimbing: '爬楼梯',
|
||||
surfingsports: '冲浪',
|
||||
swimming: '游泳',
|
||||
tabletennis: '乒乓球',
|
||||
tennis: '网球',
|
||||
trackandfield: '田径',
|
||||
traditionalstrengthtraining: '力量训练',
|
||||
volleyball: '排球',
|
||||
walking: '步行',
|
||||
waterfitness: '水中健身',
|
||||
waterpolo: '水球',
|
||||
watersports: '水上运动',
|
||||
wrestling: '摔跤',
|
||||
yoga: '瑜伽',
|
||||
barre: '芭蕾塑形',
|
||||
coretraining: '核心训练',
|
||||
crosscountryskiing: '越野滑雪',
|
||||
downhillskiing: '高山滑雪',
|
||||
flexibility: '柔韧训练',
|
||||
highintensityintervaltraining: '高强度间歇训练',
|
||||
jumprope: '跳绳',
|
||||
kickboxing: '踢拳',
|
||||
pilates: '普拉提',
|
||||
snowboarding: '单板滑雪',
|
||||
stairs: '楼梯',
|
||||
steptraining: '踏步训练',
|
||||
wheelchairwalkpace: '轮椅慢速',
|
||||
wheelchairrunpace: '轮椅快速',
|
||||
taichi: '太极',
|
||||
mixedcardio: '混合有氧',
|
||||
handcycling: '手摇车',
|
||||
discsports: '飞盘',
|
||||
fitnessgaming: '健身游戏',
|
||||
cardiodance: '有氧舞蹈',
|
||||
socialdance: '社交舞',
|
||||
pickleball: '匹克球',
|
||||
cooldown: '整理放松',
|
||||
swimbikerun: '游泳+骑行+跑步',
|
||||
transition: '过渡',
|
||||
underwaterdiving: '潜水',
|
||||
other: '其他',
|
||||
};
|
||||
|
||||
export const workoutDetail = {
|
||||
loading: '正在加载锻炼详情...',
|
||||
retry: '重试',
|
||||
errors: {
|
||||
loadFailed: '加载锻炼详情失败',
|
||||
noHeartRateData: '暂无心率数据',
|
||||
noZoneStats: '暂无心率分区数据',
|
||||
},
|
||||
metrics: {
|
||||
duration: '时长',
|
||||
calories: '消耗',
|
||||
caloriesUnit: '千卡',
|
||||
intensity: '强度',
|
||||
averageHeartRate: '平均心率',
|
||||
heartRateUnit: '次/分',
|
||||
},
|
||||
sections: {
|
||||
heartRateRange: '心率范围',
|
||||
averageHeartRate: '平均',
|
||||
maximumHeartRate: '最高',
|
||||
minimumHeartRate: '最低',
|
||||
heartRateUnit: '次/分',
|
||||
heartRateZones: '心率区间',
|
||||
},
|
||||
chart: {
|
||||
unavailable: '暂无法展示图表',
|
||||
noData: '暂无心率曲线数据',
|
||||
},
|
||||
intensityInfo: {
|
||||
title: '关于运动强度(METs)',
|
||||
description1: 'METs(代谢当量)反映运动能量消耗,静息时为 1 MET。',
|
||||
description2: '3-6 METs 属于中等强度,高于 6 METs 为高强度。',
|
||||
description3: '数值越高每分钟消耗越多,请结合个人体能选择强度。',
|
||||
description4: '长时间高强度训练前后,请确保充分热身与放松。',
|
||||
formula: {
|
||||
title: '计算方式',
|
||||
value: 'METs = 运动摄氧量 ÷ 静息摄氧量',
|
||||
},
|
||||
legend: {
|
||||
low: '2-3 METs',
|
||||
lowLabel: '低强度',
|
||||
medium: '3-6 METs',
|
||||
mediumLabel: '中等强度',
|
||||
high: '>6 METs',
|
||||
highLabel: '高强度',
|
||||
},
|
||||
},
|
||||
zones: {
|
||||
summary: '{{minutes}} 分钟 · {{range}}',
|
||||
labels: {
|
||||
warmup: '热身放松',
|
||||
fatburn: '燃脂',
|
||||
aerobic: '有氧运动',
|
||||
anaerobic: '无氧冲刺',
|
||||
max: '身体极限',
|
||||
},
|
||||
ranges: {
|
||||
warmup: '<100次/分',
|
||||
fatburn: '100-119次/分',
|
||||
aerobic: '120-149次/分',
|
||||
anaerobic: '150-169次/分',
|
||||
max: '≥170次/分',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const workoutHistory = {
|
||||
title: '锻炼总结',
|
||||
loading: '正在加载锻炼记录...',
|
||||
error: {
|
||||
permissionDenied: '尚未授予健康数据权限',
|
||||
loadFailed: '加载锻炼记录失败,请稍后再试',
|
||||
detailLoadFailed: '加载锻炼详情失败,请稍后再试',
|
||||
},
|
||||
retry: '重试',
|
||||
monthlyStats: {
|
||||
title: '锻炼时间',
|
||||
periodText: '统计周期:1日 - {{day}}日(本月)',
|
||||
overviewWithStats: '截至{{date}},你已完成{{count}}次锻炼,累计{{duration}}。',
|
||||
overviewEmpty: '本月还没有锻炼记录,动起来收集第一条吧!',
|
||||
emptyData: '本月还没有锻炼数据',
|
||||
},
|
||||
intensity: {
|
||||
low: '低强度',
|
||||
medium: '中强度',
|
||||
high: '高强度',
|
||||
},
|
||||
historyCard: {
|
||||
calories: '{{calories}}千卡 · {{minutes}}分钟',
|
||||
activityTime: '{{activity}},{{time}}',
|
||||
},
|
||||
empty: {
|
||||
title: '暂无锻炼记录',
|
||||
subtitle: '完成一次锻炼后即可在此查看详细历史',
|
||||
},
|
||||
monthOccurrence: '这是你{{month}}的第 {{index}} 次{{activity}}。',
|
||||
};
|
||||
20
i18n/zh/index.ts
Normal file
20
i18n/zh/index.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import * as Challenge from './challenge';
|
||||
import * as Common from './common';
|
||||
import * as Diet from './diet';
|
||||
import * as Health from './health';
|
||||
import * as Medication from './medication';
|
||||
import * as Mood from './mood';
|
||||
import * as Personal from './personal';
|
||||
import * as Weight from './weight';
|
||||
|
||||
export default {
|
||||
...Personal,
|
||||
...Health,
|
||||
...Diet,
|
||||
...Medication,
|
||||
...Weight,
|
||||
...Challenge,
|
||||
...Mood,
|
||||
...Common,
|
||||
...Common.common, // 确保通用翻译被正确导出
|
||||
};
|
||||
543
i18n/zh/medication.ts
Normal file
543
i18n/zh/medication.ts
Normal file
@@ -0,0 +1,543 @@
|
||||
export const medications = {
|
||||
greeting: '你好,{{name}}',
|
||||
welcome: '欢迎来到用药助手!',
|
||||
todayMedications: '今日用药',
|
||||
filters: {
|
||||
all: '全部',
|
||||
taken: '已服用',
|
||||
missed: '未服用',
|
||||
},
|
||||
emptyState: {
|
||||
title: '今日暂无用药安排',
|
||||
subtitle: '还未添加任何用药计划,快来补充吧。',
|
||||
},
|
||||
stack: {
|
||||
completed: '已完成 ({{count}})',
|
||||
},
|
||||
dateFormats: {
|
||||
today: '今天,{{date}}',
|
||||
other: '{{date}}',
|
||||
},
|
||||
// MedicationCard 组件翻译
|
||||
card: {
|
||||
status: {
|
||||
missed: '已错过',
|
||||
timeToTake: '到服药时间',
|
||||
remaining: '剩余 {{time}}',
|
||||
},
|
||||
action: {
|
||||
takeNow: '立即服用',
|
||||
taken: '已服用',
|
||||
skipped: '已跳过',
|
||||
skip: '跳过',
|
||||
submitting: '提交中...',
|
||||
},
|
||||
skipAlert: {
|
||||
title: '确认跳过',
|
||||
message: '确定要跳过本次用药吗?\n\n跳过后将不会记录为已服用。',
|
||||
cancel: '取消',
|
||||
confirm: '确认跳过',
|
||||
},
|
||||
earlyTakeAlert: {
|
||||
title: '尚未到服药时间',
|
||||
message: '该用药计划在 {{time}},现在还早于1小时以上。\n\n是否确认已服用此药物?',
|
||||
cancel: '取消',
|
||||
confirm: '确认已服用',
|
||||
},
|
||||
takeError: {
|
||||
title: '操作失败',
|
||||
message: '记录服药时发生错误,请稍后重试',
|
||||
confirm: '确定',
|
||||
},
|
||||
skipError: {
|
||||
title: '操作失败',
|
||||
message: '跳过操作失败,请稍后重试',
|
||||
confirm: '确定',
|
||||
},
|
||||
},
|
||||
// 添加药物页面翻译
|
||||
add: {
|
||||
title: '添加药物',
|
||||
steps: {
|
||||
name: '药品名称',
|
||||
dosage: '剂型与剂量',
|
||||
frequency: '服药频率',
|
||||
time: '服药时间',
|
||||
note: '备注',
|
||||
},
|
||||
descriptions: {
|
||||
name: '为药物命名并上传包装照片,方便识别',
|
||||
dosage: '选择药片类型并填写每次的用药剂量',
|
||||
frequency: '设置用药频率以及每日次数',
|
||||
time: '添加并管理每天的提醒时间',
|
||||
note: '填写备注或医生叮嘱(可选)',
|
||||
},
|
||||
name: {
|
||||
placeholder: '输入或搜索药品名称',
|
||||
},
|
||||
photo: {
|
||||
title: '上传药品图片',
|
||||
subtitle: '拍照或从相册选择,辅助识别药品包装',
|
||||
selectTitle: '选择图片',
|
||||
selectMessage: '请选择图片来源',
|
||||
camera: '拍照',
|
||||
album: '从相册选择',
|
||||
cancel: '取消',
|
||||
retake: '重新选择',
|
||||
uploading: '上传中…',
|
||||
uploadingText: '正在上传',
|
||||
remove: '删除',
|
||||
cameraPermission: '需要相机权限以拍摄药品照片',
|
||||
albumPermission: '需要相册权限以选择药品照片',
|
||||
uploadFailed: '上传失败',
|
||||
uploadFailedMessage: '图片上传失败,请稍后重试',
|
||||
cameraFailed: '拍照失败',
|
||||
cameraFailedMessage: '无法打开相机,请稍后再试',
|
||||
selectFailed: '选择失败',
|
||||
selectFailedMessage: '无法打开相册,请稍后再试',
|
||||
},
|
||||
dosage: {
|
||||
label: '每次剂量',
|
||||
placeholder: '0.5',
|
||||
type: '类型',
|
||||
unitSelector: '选择剂量单位',
|
||||
},
|
||||
frequency: {
|
||||
label: '每日次数',
|
||||
value: '{{count}} 次/日',
|
||||
period: '用药周期',
|
||||
start: '开始',
|
||||
end: '结束',
|
||||
longTerm: '长期',
|
||||
startDateInvalid: '日期无效',
|
||||
startDateInvalidMessage: '开始日期不能早于今天',
|
||||
endDateInvalid: '日期无效',
|
||||
endDateInvalidMessage: '结束日期不能早于开始日期',
|
||||
},
|
||||
time: {
|
||||
label: '每日提醒时间',
|
||||
addTime: '添加时间',
|
||||
editTime: '修改提醒时间',
|
||||
addTimeButton: '添加时间',
|
||||
},
|
||||
note: {
|
||||
label: '备注',
|
||||
placeholder: '记录注意事项、医生叮嘱或自定义提醒',
|
||||
voiceNotSupported: '当前设备暂不支持语音转文字,可直接输入备注',
|
||||
voiceError: '语音识别不可用',
|
||||
voiceErrorMessage: '无法使用语音输入,请检查权限设置后重试',
|
||||
voiceStartError: '无法启动语音输入',
|
||||
voiceStartErrorMessage: '请检查麦克风与语音识别权限后重试',
|
||||
},
|
||||
actions: {
|
||||
previous: '上一步',
|
||||
next: '下一步',
|
||||
complete: '完成',
|
||||
},
|
||||
success: {
|
||||
title: '添加成功',
|
||||
message: '已成功添加药物"{{name}}"',
|
||||
confirm: '确定',
|
||||
},
|
||||
error: {
|
||||
title: '添加失败',
|
||||
message: '创建药物时发生错误,请稍后重试',
|
||||
confirm: '确定',
|
||||
},
|
||||
datePickers: {
|
||||
startDate: '选择开始日期',
|
||||
endDate: '选择结束日期',
|
||||
time: '选择时间',
|
||||
cancel: '取消',
|
||||
confirm: '确定',
|
||||
},
|
||||
pickers: {
|
||||
timesPerDay: '选择每日次数',
|
||||
dosageUnit: '选择剂量单位',
|
||||
cancel: '取消',
|
||||
confirm: '确定',
|
||||
},
|
||||
},
|
||||
// 药物管理页面翻译
|
||||
manage: {
|
||||
title: '药品管理',
|
||||
subtitle: '管理所有药品的状态与提醒',
|
||||
filters: {
|
||||
all: '全部',
|
||||
active: '进行中',
|
||||
inactive: '已停用',
|
||||
},
|
||||
loading: '正在载入药品信息...',
|
||||
empty: {
|
||||
title: '暂无药品',
|
||||
subtitle: '还没有相关药品记录,点击右上角添加',
|
||||
},
|
||||
deactivate: {
|
||||
title: '停用 {{name}}?',
|
||||
description: '停用后,当天已生成的用药计划会一并删除,且无法恢复。',
|
||||
confirm: '确认停用',
|
||||
cancel: '取消',
|
||||
error: {
|
||||
title: '操作失败',
|
||||
message: '停用药物时发生问题,请稍后重试。',
|
||||
},
|
||||
},
|
||||
toggleError: {
|
||||
title: '操作失败',
|
||||
message: '切换药物状态时发生问题,请稍后重试。',
|
||||
},
|
||||
formLabels: {
|
||||
capsule: '胶囊',
|
||||
pill: '药片',
|
||||
tablet: '药片',
|
||||
injection: '注射',
|
||||
spray: '喷雾',
|
||||
drop: '滴剂',
|
||||
syrup: '糖浆',
|
||||
other: '其他',
|
||||
ointment: '软膏',
|
||||
},
|
||||
frequency: {
|
||||
daily: '每日',
|
||||
weekly: '每周',
|
||||
custom: '自定义',
|
||||
},
|
||||
cardMeta: '开始于 {{date}} | 提醒:{{reminder}}',
|
||||
reminderNotSet: '尚未设置',
|
||||
unknownDate: '未知日期',
|
||||
},
|
||||
// 药物详情页面翻译
|
||||
detail: {
|
||||
title: '药品详情',
|
||||
notFound: {
|
||||
title: '未找到药品信息',
|
||||
subtitle: '请从用药列表重新进入此页面。',
|
||||
},
|
||||
loading: '正在载入...',
|
||||
error: {
|
||||
title: '暂时无法获取该药品的信息,请稍后重试。',
|
||||
subtitle: '请检查网络后重试,或返回上一页。',
|
||||
},
|
||||
sections: {
|
||||
plan: '服药计划',
|
||||
dosage: '剂量与形式',
|
||||
note: '备注',
|
||||
overview: '服药概览',
|
||||
aiAnalysis: 'AI 用药分析',
|
||||
},
|
||||
plan: {
|
||||
period: '服药周期',
|
||||
time: '用药时间',
|
||||
frequency: '频率',
|
||||
expiryDate: '药品有效期',
|
||||
longTerm: '长期',
|
||||
periodMessage: '开始服药日期:{{startDate}}\n{{endDateInfo}}',
|
||||
longTermPlan: '服药计划:长期服药',
|
||||
timeMessage: '设置的时间:{{times}}',
|
||||
dateFormat: 'YYYY年M月D日',
|
||||
periodRange: '从 {{startDate}} 至 {{endDate}}',
|
||||
periodLongTerm: '从 {{startDate}} 至长期',
|
||||
expiryStatus: {
|
||||
notSet: '未设置',
|
||||
expired: '已过期',
|
||||
expiresToday: '今天到期',
|
||||
expiresInDays: '{{days}}天后到期',
|
||||
},
|
||||
},
|
||||
dosage: {
|
||||
label: '每次剂量',
|
||||
form: '剂型',
|
||||
selectDosage: '选择剂量',
|
||||
selectForm: '选择剂型',
|
||||
dosageValue: '剂量值',
|
||||
unit: '单位',
|
||||
},
|
||||
note: {
|
||||
label: '药品备注',
|
||||
placeholder: '记录注意事项、医生叮嘱或自定义提醒',
|
||||
edit: '编辑备注',
|
||||
noNote: '暂无备注信息',
|
||||
voiceNotSupported: '当前设备暂不支持语音转文字,可直接输入备注',
|
||||
save: '保存',
|
||||
saveError: {
|
||||
title: '保存失败',
|
||||
message: '提交备注时出现问题,请稍后重试。',
|
||||
},
|
||||
},
|
||||
overview: {
|
||||
calculating: '统计中...',
|
||||
takenCount: '累计服药 {{count}} 次',
|
||||
calculatingDays: '正在计算坚持天数',
|
||||
startedDays: '已坚持 {{days}} 天',
|
||||
startDate: '开始于 {{date}}',
|
||||
noStartDate: '暂无开始日期',
|
||||
},
|
||||
aiAnalysis: {
|
||||
analyzing: '正在分析用药信息...',
|
||||
analyzingButton: '分析中...',
|
||||
reanalyzeButton: '重新分析',
|
||||
getAnalysisButton: '获取 AI 分析',
|
||||
button: 'AI 分析',
|
||||
status: {
|
||||
generated: '已生成',
|
||||
memberExclusive: '会员专享',
|
||||
pending: '待生成',
|
||||
},
|
||||
title: '分析结果',
|
||||
recommendation: 'AI 推荐',
|
||||
placeholder: '获取 AI 分析,快速了解适用人群、成分安全与使用建议。',
|
||||
categories: {
|
||||
suitableFor: '适合人群',
|
||||
unsuitableFor: '不适合人群',
|
||||
sideEffects: '可能的副作用',
|
||||
storageAdvice: '储存建议',
|
||||
healthAdvice: '健康/使用建议',
|
||||
},
|
||||
membershipCard: {
|
||||
title: '会员专享 AI 深度解读',
|
||||
subtitle: '解锁完整药品分析与无限次使用',
|
||||
},
|
||||
error: {
|
||||
title: '分析失败',
|
||||
message: 'AI 分析失败,请稍后重试',
|
||||
networkError: '发起分析请求失败,请检查网络连接',
|
||||
unauthorized: '请先登录',
|
||||
forbidden: '无权访问此药物',
|
||||
notFound: '药物不存在',
|
||||
},
|
||||
},
|
||||
aiDraft: {
|
||||
reshoot: '重新拍摄',
|
||||
saveAndCreate: '保存并创建',
|
||||
saveError: {
|
||||
title: '保存失败',
|
||||
message: '创建药物时发生错误,请稍后重试',
|
||||
},
|
||||
},
|
||||
status: {
|
||||
enabled: '提醒已开启',
|
||||
disabled: '提醒已关闭',
|
||||
},
|
||||
delete: {
|
||||
title: '删除 {{name}}?',
|
||||
description: '删除后将清除与该药品相关的提醒与历史记录,且无法恢复。',
|
||||
confirm: '删除',
|
||||
cancel: '取消',
|
||||
error: {
|
||||
title: '删除失败',
|
||||
message: '移除该药品时出现问题,请稍后再试。',
|
||||
},
|
||||
},
|
||||
deactivate: {
|
||||
title: '停用 {{name}}?',
|
||||
description: '停用后,当天已生成的用药计划会一并删除,且无法恢复。',
|
||||
confirm: '确认停用',
|
||||
cancel: '取消',
|
||||
error: {
|
||||
title: '操作失败',
|
||||
message: '停用药物时发生问题,请稍后重试。',
|
||||
},
|
||||
},
|
||||
toggleError: {
|
||||
title: '操作失败',
|
||||
message: '切换提醒状态时出现问题,请稍后重试。',
|
||||
},
|
||||
updateErrors: {
|
||||
dosage: '更新失败',
|
||||
dosageMessage: '更新剂量时出现问题,请稍后重试。',
|
||||
form: '更新失败',
|
||||
formMessage: '更新剂型时出现问题,请稍后重试。',
|
||||
expiryDate: '更新失败',
|
||||
expiryDateMessage: '有效期更新失败,请稍后重试',
|
||||
},
|
||||
imageViewer: {
|
||||
close: '关闭',
|
||||
},
|
||||
pickers: {
|
||||
cancel: '取消',
|
||||
confirm: '确定',
|
||||
},
|
||||
},
|
||||
// 编辑频率页面翻译
|
||||
editFrequency: {
|
||||
title: '编辑服药频率',
|
||||
missingParams: '缺少必要参数',
|
||||
medicationName: '正在编辑:{{name}}',
|
||||
sections: {
|
||||
frequency: '服药频率',
|
||||
frequencyDescription: '设置每日服药次数',
|
||||
time: '每日提醒时间',
|
||||
timeDescription: '添加并管理每天的提醒时间',
|
||||
},
|
||||
frequency: {
|
||||
repeatPattern: '重复模式',
|
||||
timesPerDay: '每日次数',
|
||||
daily: '每日',
|
||||
weekly: '每周',
|
||||
custom: '自定义',
|
||||
timesLabel: '{{count}} 次',
|
||||
summary: '{{pattern}} {{count}} 次',
|
||||
},
|
||||
time: {
|
||||
addTime: '添加时间',
|
||||
editTime: '修改提醒时间',
|
||||
addTimeButton: '添加时间',
|
||||
},
|
||||
actions: {
|
||||
save: '保存修改',
|
||||
},
|
||||
error: {
|
||||
title: '更新失败',
|
||||
message: '更新服药频率时出现问题,请稍后重试。',
|
||||
},
|
||||
pickers: {
|
||||
cancel: '取消',
|
||||
confirm: '确定',
|
||||
},
|
||||
},
|
||||
aiProgress: {
|
||||
title: '识别中',
|
||||
steps: {
|
||||
analyzing_product: '正在进行产品分析...',
|
||||
analyzing_suitability: '正在检测适宜人群...',
|
||||
analyzing_ingredients: '正在评估成分信息...',
|
||||
analyzing_effects: '正在生成安全建议...',
|
||||
completed: '识别完成,正在载入详情...',
|
||||
},
|
||||
errors: {
|
||||
default: '识别失败,请重新拍摄',
|
||||
queryFailed: '查询失败,请稍后再试',
|
||||
},
|
||||
modal: {
|
||||
title: '需要重新拍摄',
|
||||
retry: '重新拍摄',
|
||||
},
|
||||
},
|
||||
aiCamera: {
|
||||
title: 'AI 用药识别',
|
||||
steps: {
|
||||
front: {
|
||||
title: '正面',
|
||||
subtitle: '保证药品名称清晰可见',
|
||||
},
|
||||
side: {
|
||||
title: '背面',
|
||||
subtitle: '包含规格、成分等信息',
|
||||
},
|
||||
aux: {
|
||||
title: '侧面',
|
||||
subtitle: '补充更多细节提升准确率',
|
||||
},
|
||||
stepProgress: '步骤 {{current}} / {{total}}',
|
||||
optional: '(可选)',
|
||||
notTaken: '未拍摄',
|
||||
},
|
||||
buttons: {
|
||||
flip: '翻转',
|
||||
capture: '拍照',
|
||||
complete: '完成',
|
||||
album: '从相册',
|
||||
},
|
||||
permission: {
|
||||
title: '需要相机权限',
|
||||
description: '授权后即可快速拍摄药品包装,自动识别信息',
|
||||
button: '授权访问相机',
|
||||
},
|
||||
alerts: {
|
||||
pickFailed: {
|
||||
title: '选择失败',
|
||||
message: '请重试或更换图片',
|
||||
},
|
||||
captureFailed: {
|
||||
title: '拍摄失败',
|
||||
message: '请重试',
|
||||
},
|
||||
insufficientPhotos: {
|
||||
title: '照片不足',
|
||||
message: '请至少完成正面和背面拍摄',
|
||||
},
|
||||
taskFailed: {
|
||||
title: '创建任务失败',
|
||||
defaultMessage: '请检查网络后重试',
|
||||
},
|
||||
},
|
||||
guideModal: {
|
||||
badge: '规范',
|
||||
title: '拍摄图片清晰',
|
||||
description1: '请拍摄药品正面\\背面的产品名称\\说明部分。',
|
||||
description2: '注意拍摄时光线充分,没有反光,文字部分清晰可见。照片的清晰度会影响识别的准确率。',
|
||||
button: '知道了!',
|
||||
},
|
||||
},
|
||||
aiSummary: {
|
||||
title: 'AI 用药总结',
|
||||
headerBadge: 'AI 专业总结',
|
||||
subtitle: '依从性与安全重点',
|
||||
overviewTitle: '用药总览',
|
||||
keyInsights: 'AI 重点解读',
|
||||
refresh: 'DeepSeek 正在进行分析,请稍等',
|
||||
stats: {
|
||||
activePlans: '进行中计划',
|
||||
plannedDoses: '计划总次数',
|
||||
takenDoses: '已完成次数',
|
||||
completion: '总体完成度',
|
||||
avgCompletion: '平均依从度',
|
||||
activeDays: '计划天数',
|
||||
},
|
||||
badges: {
|
||||
adherence: '依从性',
|
||||
safety: '监测建议',
|
||||
},
|
||||
doseSummary: '已完成 {{taken}} / {{planned}} 次',
|
||||
daysLabel: '{{days}} 天计划 · 每日 {{times}} 次',
|
||||
completionLabel: '完成度 {{value}}%',
|
||||
emptyTitle: '暂无开启的用药计划',
|
||||
emptyDescription: '激活或新增计划后,将自动生成 AI 总结。',
|
||||
error403: '免费使用次数已用完,请开通会员获取更多使用次数',
|
||||
genericError: '获取AI总结失败,请稍后重试',
|
||||
keyInsightPlaceholder: '暂未生成解读',
|
||||
listTitle: '计划分解',
|
||||
updatedAt: '更新于 {{time}}',
|
||||
pillChip: '专业建议',
|
||||
retry: '重试',
|
||||
infoModal: {
|
||||
badge: '说明',
|
||||
title: '刷新规律 & 依从度',
|
||||
point1: '• 每日生成:基于当天已开启的用药计划与实际打卡数据,每天出一版总结。',
|
||||
point2: '• 刷新作用:重新获取最新的计划 vs 实际完成度和 AI 解读,不会扣额外次数。',
|
||||
point3: '• 依从度:按计划执行的程度(完成率)。越高代表越遵医嘱、风险越低。',
|
||||
point4: '• 统计口径:仅统计 isActive=true 且未删除的计划;完成次数只计状态为 taken 的记录。',
|
||||
button: '知道了',
|
||||
},
|
||||
completionInfoModal: {
|
||||
badge: '计算说明',
|
||||
title: '完成度计算逻辑',
|
||||
point1: '• 总体完成度 = 所有计划的实际服药次数总和 ÷ 所有计划的理论服药次数总和 × 100%',
|
||||
point2: '• 实际服药次数:标记为"已服用"的用药记录数量',
|
||||
point3: '• 理论服药次数:从计划开始时间到当前时间,按照每日服药频率计算的总次数',
|
||||
point4: '• 理论次数详细计算:(当前日期 - 开始日期 + 1) × 每日服药次数,例如:今天是第5天,每日2次,则理论次数为10次',
|
||||
point5: '• 单个计划完成度 = 该计划的已服药次数 ÷ 该计划的理论服药次数 × 100%',
|
||||
button: '了解了',
|
||||
},
|
||||
},
|
||||
aiSummaryInfo: {
|
||||
title: 'AI 用药总结',
|
||||
placeholderImage: '介绍图片',
|
||||
viewImage: '查看大图',
|
||||
features: {
|
||||
intelligent: {
|
||||
title: '智能分析',
|
||||
description: 'AI 深度分析您的用药记录,提供个性化健康建议',
|
||||
},
|
||||
tracking: {
|
||||
title: '趋势追踪',
|
||||
description: '长期追踪用药效果,帮助优化治疗方案',
|
||||
},
|
||||
professional: {
|
||||
title: '专业可靠',
|
||||
description: '基于医学知识库,提供安全可靠的健康分析',
|
||||
},
|
||||
},
|
||||
confirmButton: '我要订阅',
|
||||
},
|
||||
};
|
||||
95
i18n/zh/mood.ts
Normal file
95
i18n/zh/mood.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
export const mood = {
|
||||
calendar: {
|
||||
title: '心情日历',
|
||||
weekDays: {
|
||||
monday: '周一',
|
||||
tuesday: '周二',
|
||||
wednesday: '周三',
|
||||
thursday: '周四',
|
||||
friday: '周五',
|
||||
saturday: '周六',
|
||||
sunday: '周日',
|
||||
},
|
||||
months: {
|
||||
january: '1月',
|
||||
february: '2月',
|
||||
march: '3月',
|
||||
april: '4月',
|
||||
may: '5月',
|
||||
june: '6月',
|
||||
july: '7月',
|
||||
august: '8月',
|
||||
september: '9月',
|
||||
october: '10月',
|
||||
november: '11月',
|
||||
december: '12月',
|
||||
},
|
||||
selectedDate: {
|
||||
selectDate: '请选择日期',
|
||||
record: '记录',
|
||||
noRecord: '暂无心情记录',
|
||||
noRecordHint: '点击右上角"记录"按钮添加心情',
|
||||
noDateSelected: '请先选择一个日期',
|
||||
noDateSelectedHint: '点击日历中的日期,然后点击"记录"按钮添加心情',
|
||||
intensity: '强度',
|
||||
dateFormat: 'YYYY年M月D日',
|
||||
},
|
||||
errors: {
|
||||
loadMonthDataFailed: '加载月份心情数据失败',
|
||||
loadDailyDataFailed: '加载心情记录失败',
|
||||
},
|
||||
},
|
||||
types: {
|
||||
happy: '开心',
|
||||
excited: '心动',
|
||||
thrilled: '兴奋',
|
||||
calm: '平静',
|
||||
anxious: '焦虑',
|
||||
sad: '难过',
|
||||
lonely: '孤独',
|
||||
wronged: '委屈',
|
||||
angry: '生气',
|
||||
tired: '心累',
|
||||
},
|
||||
edit: {
|
||||
title: '记录心情',
|
||||
editTitle: '编辑心情',
|
||||
selectMood: '选择心情',
|
||||
intensity: '心情强度',
|
||||
intensityLow: '轻微',
|
||||
intensityHigh: '强烈',
|
||||
diary: '心情日记',
|
||||
diarySubtitle: '记录你的心情,珍藏美好回忆',
|
||||
placeholder: `今天的心情如何?
|
||||
|
||||
你经历过什么特别的事情吗?
|
||||
有什么让你开心的事?
|
||||
或者,有什么让你感到困扰?
|
||||
|
||||
写下你的感受,让这些时刻成为你珍贵的记忆...`,
|
||||
save: '保存心情',
|
||||
update: '更新心情',
|
||||
saving: '保存中...',
|
||||
dateFormat: 'YYYY年M月D日',
|
||||
alerts: {
|
||||
selectMood: '请选择心情',
|
||||
saveSuccess: '心情记录已保存',
|
||||
updateSuccess: '心情记录已更新',
|
||||
deleteSuccess: '心情记录已删除',
|
||||
saveError: '保存心情失败,请重试',
|
||||
deleteError: '删除心情失败,请重试',
|
||||
confirmDelete: '确定要删除这条心情记录吗?',
|
||||
confirmDeleteTitle: '确认删除',
|
||||
},
|
||||
},
|
||||
history: {
|
||||
title: '心情记录',
|
||||
noRecords: '暂无心情记录',
|
||||
totalRecords: '总记录',
|
||||
averageIntensity: '平均强度',
|
||||
mostFrequent: '最常见',
|
||||
recentRecords: '最近记录',
|
||||
intensity: '强度',
|
||||
dateTimeFormat: 'MM月DD日 HH:mm',
|
||||
},
|
||||
};
|
||||
432
i18n/zh/personal.ts
Normal file
432
i18n/zh/personal.ts
Normal file
@@ -0,0 +1,432 @@
|
||||
export const personal = {
|
||||
edit: '编辑',
|
||||
login: '登录',
|
||||
memberNumber: '会员编号: {{number}}',
|
||||
aiUsage: '免费AI次数: {{value}}',
|
||||
aiUsageUnlimited: '无限',
|
||||
fishRecord: '能量记录',
|
||||
badgesPreview: {
|
||||
title: '我的勋章',
|
||||
subtitle: '记录你的荣耀时刻',
|
||||
cta: '查看全部',
|
||||
loading: '正在同步勋章...',
|
||||
empty: '完成睡眠或挑战任务即可解锁首枚勋章',
|
||||
lockedHint: '坚持训练即可点亮更多勋章',
|
||||
},
|
||||
stats: {
|
||||
height: '身高',
|
||||
weight: '体重',
|
||||
age: '年龄',
|
||||
ageSuffix: '岁',
|
||||
},
|
||||
membership: {
|
||||
badge: '尊享会员',
|
||||
planFallback: 'VIP 会员',
|
||||
expiryLabel: '会员有效期',
|
||||
changeButton: '更改会员套餐',
|
||||
validForever: '长期有效',
|
||||
dateFormat: 'YYYY年MM月DD日',
|
||||
},
|
||||
sections: {
|
||||
notifications: '通知',
|
||||
developer: '开发者',
|
||||
other: '其他',
|
||||
account: '账号与安全',
|
||||
language: '语言',
|
||||
healthData: '健康数据授权',
|
||||
medicalSources: '医学建议来源',
|
||||
customization: '个性化',
|
||||
},
|
||||
versionCheck: {
|
||||
sectionTitle: '版本与更新',
|
||||
menuTitle: '检查更新',
|
||||
checking: '正在检查更新...',
|
||||
upToDate: '当前已是最新版本',
|
||||
updateBadge: 'v{{version}} 可更新',
|
||||
failed: '检查更新失败,请稍后再试',
|
||||
updateFound: '发现新版本 v{{version}}',
|
||||
modalTitle: '发现新版本',
|
||||
modalTag: 'New',
|
||||
currentVersion: '当前',
|
||||
latestVersion: '最新',
|
||||
releaseNotesTitle: '本次更新',
|
||||
fallbackNotes: '体验优化与问题修复,保持更新获得更好体验。',
|
||||
later: '稍后提醒',
|
||||
updateNow: '立即更新',
|
||||
missingUrl: '暂未获取到商店地址',
|
||||
openStoreFailed: '跳转应用商店失败,请稍后再试',
|
||||
},
|
||||
menu: {
|
||||
notificationSettings: '通知设置',
|
||||
developerOptions: '开发者选项',
|
||||
pushSettings: '推送通知设置',
|
||||
privacyPolicy: '隐私政策',
|
||||
feedback: '意见反馈',
|
||||
userAgreement: '用户协议',
|
||||
logout: '退出登录',
|
||||
deleteAccount: '注销帐号',
|
||||
healthDataPermissions: '健康数据授权说明',
|
||||
whoSource: '世界卫生组织 (WHO)',
|
||||
tabBarConfig: '底部栏配置',
|
||||
},
|
||||
language: {
|
||||
title: '语言',
|
||||
menuTitle: '界面语言',
|
||||
modalTitle: '选择语言',
|
||||
modalSubtitle: '选择后界面会立即更新',
|
||||
cancel: '取消',
|
||||
options: {
|
||||
zh: {
|
||||
label: '中文',
|
||||
description: '推荐中文用户使用',
|
||||
},
|
||||
en: {
|
||||
label: '英文',
|
||||
description: '使用英文界面',
|
||||
},
|
||||
},
|
||||
},
|
||||
tabBarConfig: {
|
||||
title: '底部栏配置',
|
||||
subtitle: '自定义你的底部导航栏',
|
||||
description: '使用开关控制标签的显示和隐藏',
|
||||
resetButton: '恢复默认',
|
||||
cannotDisable: '此标签不可关闭',
|
||||
vipOnly: '仅限VIP会员',
|
||||
resetConfirm: {
|
||||
title: '恢复默认设置?',
|
||||
message: '将重置所有底部栏配置和显示状态',
|
||||
cancel: '取消',
|
||||
confirm: '确认恢复',
|
||||
},
|
||||
resetSuccess: '已恢复默认设置',
|
||||
},
|
||||
};
|
||||
|
||||
export const editProfile = {
|
||||
title: '编辑资料',
|
||||
fields: {
|
||||
name: '昵称',
|
||||
gender: '性别',
|
||||
height: '身高',
|
||||
weight: '体重',
|
||||
activityLevel: '活动水平',
|
||||
birthDate: '出生日期',
|
||||
maxHeartRate: '最大心率',
|
||||
},
|
||||
gender: {
|
||||
male: '男',
|
||||
female: '女',
|
||||
notSet: '未设置',
|
||||
},
|
||||
height: {
|
||||
unit: '厘米',
|
||||
placeholder: '170厘米',
|
||||
},
|
||||
weight: {
|
||||
unit: '公斤',
|
||||
placeholder: '55公斤',
|
||||
},
|
||||
activityLevels: {
|
||||
1: '久坐',
|
||||
2: '轻度活跃',
|
||||
3: '中度活跃',
|
||||
4: '非常活跃',
|
||||
descriptions: {
|
||||
1: '很少运动',
|
||||
2: '每周1-3次运动',
|
||||
3: '每周3-5次运动',
|
||||
4: '每周6-7次运动',
|
||||
},
|
||||
},
|
||||
birthDate: {
|
||||
placeholder: '1995年1月1日',
|
||||
format: '{{year}}年{{month}}月{{day}}日',
|
||||
},
|
||||
maxHeartRate: {
|
||||
unit: '次/分钟',
|
||||
notAvailable: '未获取',
|
||||
alert: {
|
||||
title: '提示',
|
||||
message: '最大心率数据从健康应用自动获取',
|
||||
},
|
||||
},
|
||||
alerts: {
|
||||
notLoggedIn: {
|
||||
title: '未登录',
|
||||
message: '请先登录后再尝试保存',
|
||||
},
|
||||
saveFailed: {
|
||||
title: '保存失败',
|
||||
message: '请稍后重试',
|
||||
},
|
||||
avatarPermissions: {
|
||||
title: '权限不足',
|
||||
message: '需要相册权限以选择头像',
|
||||
},
|
||||
avatarUploadFailed: {
|
||||
title: '上传失败',
|
||||
message: '头像上传失败,请重试',
|
||||
},
|
||||
avatarError: {
|
||||
title: '发生错误',
|
||||
message: '选择头像失败,请重试',
|
||||
},
|
||||
avatarSuccess: {
|
||||
title: '成功',
|
||||
message: '头像更新成功',
|
||||
},
|
||||
},
|
||||
modals: {
|
||||
cancel: '取消',
|
||||
confirm: '确定',
|
||||
save: '保存',
|
||||
input: {
|
||||
namePlaceholder: '输入昵称',
|
||||
weightPlaceholder: '输入体重',
|
||||
weightUnit: '公斤 (kg)',
|
||||
},
|
||||
selectHeight: '选择身高',
|
||||
selectGender: '选择性别',
|
||||
selectActivityLevel: '选择活动水平',
|
||||
female: '女性',
|
||||
male: '男性',
|
||||
},
|
||||
defaultValues: {
|
||||
name: '今晚要吃肉',
|
||||
height: 170,
|
||||
weight: 55,
|
||||
birthDate: '1995-01-01',
|
||||
activityLevel: 1,
|
||||
},
|
||||
};
|
||||
|
||||
export const login = {
|
||||
title: '登录',
|
||||
subtitle: '健康生活,自律让我更自由',
|
||||
appleLogin: '使用 Apple 登录',
|
||||
loggingIn: '登录中...',
|
||||
agreement: {
|
||||
readAndAgree: '我已阅读并同意',
|
||||
privacyPolicy: '《隐私政策》',
|
||||
and: '和',
|
||||
userAgreement: '《用户协议》',
|
||||
alert: {
|
||||
title: '请先阅读并同意',
|
||||
message: '继续登录前,请阅读并勾选《隐私政策》和《用户协议》。点击“同意并继续”将默认勾选并继续登录。',
|
||||
cancel: '取消',
|
||||
confirm: '同意并继续',
|
||||
},
|
||||
},
|
||||
errors: {
|
||||
appleIdentityTokenMissing: '未获取到 Apple 身份令牌',
|
||||
loginFailed: '登录失败,请稍后再试',
|
||||
loginFailedTitle: '登录失败',
|
||||
},
|
||||
success: {
|
||||
loginSuccess: '登录成功',
|
||||
},
|
||||
};
|
||||
|
||||
export const authGuard = {
|
||||
logout: {
|
||||
error: '退出登录失败',
|
||||
errorMessage: '退出登录失败,请稍后重试',
|
||||
},
|
||||
confirmLogout: {
|
||||
title: '确认退出',
|
||||
message: '确定要退出当前账号吗?',
|
||||
cancelButton: '取消',
|
||||
confirmButton: '确定',
|
||||
},
|
||||
deleteAccount: {
|
||||
successTitle: '账号已注销',
|
||||
successMessage: '您的账号已成功注销',
|
||||
confirmButton: '确定',
|
||||
errorTitle: '注销失败',
|
||||
errorMessage: '注销失败,请稍后重试',
|
||||
},
|
||||
confirmDeleteAccount: {
|
||||
title: '确认注销账号',
|
||||
message: '此操作不可恢复,将删除您的账号及相关数据。确定继续吗?',
|
||||
cancelButton: '取消',
|
||||
confirmButton: '确认注销',
|
||||
},
|
||||
};
|
||||
|
||||
export const membershipModal = {
|
||||
plans: {
|
||||
lifetime: {
|
||||
title: '终身会员',
|
||||
subtitle: '终身陪伴,见证您的每一次健康蜕变',
|
||||
},
|
||||
quarterly: {
|
||||
title: '季度会员',
|
||||
subtitle: '3个月科学计划,让健康成为生活习惯',
|
||||
},
|
||||
weekly: {
|
||||
title: '周会员',
|
||||
subtitle: '7天体验期,感受专业健康指导的力量',
|
||||
},
|
||||
unknown: '未知套餐',
|
||||
tag: '超值推荐',
|
||||
},
|
||||
benefits: {
|
||||
title: '权益对比',
|
||||
subtitle: '核心权益一目了然,选择更安心',
|
||||
table: {
|
||||
benefit: '权益',
|
||||
vip: 'VIP',
|
||||
regular: '普通用户',
|
||||
},
|
||||
items: {
|
||||
aiCalories: {
|
||||
title: 'AI拍照记录热量',
|
||||
description: '通过拍照识别食物并自动记录热量',
|
||||
},
|
||||
aiNutrition: {
|
||||
title: 'AI拍照识别包装',
|
||||
description: '识别食品包装上的营养成分信息',
|
||||
},
|
||||
healthReminder: {
|
||||
title: '每日健康提醒',
|
||||
description: '根据个人目标提供个性化健康提醒',
|
||||
},
|
||||
aiMedication: {
|
||||
title: 'AI 智能用药管家',
|
||||
description: '深度解析用药禁忌,生成专属服药计划,科学守护健康每一刻',
|
||||
},
|
||||
customChallenge: {
|
||||
title: '解锁无限自定义挑战',
|
||||
description: '突破限制,邀请挚友同行,让坚持不再孤单,共同见证蜕变',
|
||||
},
|
||||
tabBarCustomization: {
|
||||
title: '底部栏自定义',
|
||||
description: '个性化底部导航栏,隐藏不需要的功能标签',
|
||||
},
|
||||
},
|
||||
permissions: {
|
||||
unlimited: '无限次使用',
|
||||
limited: '有限次使用',
|
||||
dailyLimit: '每日{{count}}次',
|
||||
fullSupport: '完全支持',
|
||||
basicSupport: '基础提醒',
|
||||
smartReminder: '智能提醒',
|
||||
fullAnalysis: '深度分析',
|
||||
createUnlimited: '无限创建',
|
||||
notSupported: '不支持',
|
||||
},
|
||||
},
|
||||
sectionTitle: {
|
||||
plans: '会员套餐',
|
||||
plansSubtitle: '灵活选择,跟随节奏稳步提升',
|
||||
},
|
||||
actions: {
|
||||
subscribe: '立即订阅',
|
||||
processing: '正在处理购买...',
|
||||
restore: '恢复购买',
|
||||
restoring: '恢复中...',
|
||||
back: '返回',
|
||||
close: '关闭会员购买弹窗',
|
||||
selectPlan: '选择{{plan}}套餐',
|
||||
purchaseHint: '点击购买{{plan}}会员套餐',
|
||||
},
|
||||
agreements: {
|
||||
prefix: '开通即视为同意',
|
||||
userAgreement: '《用户协议》',
|
||||
membershipAgreement: '《会员协议》',
|
||||
autoRenewalAgreement: '《自动续费协议》',
|
||||
alert: {
|
||||
title: '请阅读并同意相关协议',
|
||||
message: '购买前需要同意用户协议、会员协议和自动续费协议',
|
||||
confirm: '确定',
|
||||
},
|
||||
},
|
||||
errors: {
|
||||
noProducts: '暂未获取到会员商品,请在 RevenueCat 中配置 iOS 产品并同步到当前 Offering。',
|
||||
purchaseCancelled: '购买已取消',
|
||||
alreadyPurchased: '您已拥有此商品',
|
||||
networkError: '网络连接失败',
|
||||
paymentPending: '支付正在处理中',
|
||||
invalidCredentials: '账户验证失败',
|
||||
purchaseFailed: '购买失败',
|
||||
restoreSuccess: '恢复购买成功',
|
||||
restoreFailed: '恢复购买失败',
|
||||
restoreCancelled: '恢复购买已取消',
|
||||
restorePartialFailed: '恢复购买部分失败',
|
||||
noPurchasesFound: '没有找到购买记录',
|
||||
selectPlan: '请选择会员套餐',
|
||||
},
|
||||
loading: {
|
||||
products: '正在加载会员套餐,请稍候',
|
||||
purchase: '购买正在进行中,请稍候',
|
||||
},
|
||||
success: {
|
||||
purchase: '会员开通成功',
|
||||
},
|
||||
};
|
||||
|
||||
export const notificationSettings = {
|
||||
title: '通知设置',
|
||||
loading: '加载中...',
|
||||
sections: {
|
||||
notifications: '通知设置',
|
||||
medicationReminder: '药品提醒',
|
||||
nutritionReminder: '营养提醒',
|
||||
moodReminder: '心情提醒',
|
||||
description: '说明',
|
||||
},
|
||||
items: {
|
||||
pushNotifications: {
|
||||
title: '消息推送',
|
||||
description: '开启后将接收应用通知',
|
||||
},
|
||||
medicationReminder: {
|
||||
title: '药品通知提醒',
|
||||
description: '在用药时间接收提醒通知',
|
||||
},
|
||||
nutritionReminder: {
|
||||
title: '营养记录提醒',
|
||||
description: '在用餐时间接收营养记录提醒',
|
||||
},
|
||||
moodReminder: {
|
||||
title: '心情记录提醒',
|
||||
description: '在晚间接收心情记录提醒',
|
||||
},
|
||||
},
|
||||
description: {
|
||||
text: '• 消息推送是所有通知的总开关\n• 各类提醒需要在消息推送开启后才能使用\n• 您可以在系统设置中管理通知权限\n• 关闭消息推送将停止所有应用通知',
|
||||
},
|
||||
alerts: {
|
||||
permissionDenied: {
|
||||
title: '权限被拒绝',
|
||||
message: '请在系统设置中开启通知权限,然后再尝试开启推送功能',
|
||||
cancel: '取消',
|
||||
goToSettings: '去设置',
|
||||
},
|
||||
error: {
|
||||
title: '错误',
|
||||
message: '请求通知权限失败',
|
||||
saveFailed: '保存设置失败',
|
||||
medicationReminderFailed: '设置药品提醒失败',
|
||||
nutritionReminderFailed: '设置营养提醒失败',
|
||||
moodReminderFailed: '设置心情提醒失败',
|
||||
},
|
||||
notificationsEnabled: {
|
||||
title: '通知已开启',
|
||||
body: '您将收到应用通知和提醒',
|
||||
},
|
||||
medicationReminderEnabled: {
|
||||
title: '药品提醒已开启',
|
||||
body: '您将在用药时间收到提醒通知',
|
||||
},
|
||||
nutritionReminderEnabled: {
|
||||
title: '营养提醒已开启',
|
||||
body: '您将在用餐时间收到营养记录提醒',
|
||||
},
|
||||
moodReminderEnabled: {
|
||||
title: '心情提醒已开启',
|
||||
body: '您将在晚间收到心情记录提醒',
|
||||
},
|
||||
},
|
||||
};
|
||||
31
i18n/zh/weight.ts
Normal file
31
i18n/zh/weight.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
export const weightRecords = {
|
||||
title: '体重记录',
|
||||
pageSubtitle: '追踪体重变化与趋势',
|
||||
loadingHistory: '体重记录加载失败',
|
||||
history: '体重记录',
|
||||
historyMonthFormat: '{{year}}年{{month}}月',
|
||||
stats: {
|
||||
currentWeight: '当前体重',
|
||||
initialWeight: '初始体重',
|
||||
targetWeight: '目标体重',
|
||||
},
|
||||
empty: {
|
||||
title: '暂无体重记录',
|
||||
subtitle: '点击右上角 + 按钮添加第一条记录',
|
||||
},
|
||||
modal: {
|
||||
recordWeight: '记录体重',
|
||||
editInitialWeight: '编辑初始体重',
|
||||
editTargetWeight: '编辑目标体重',
|
||||
editRecord: '编辑记录',
|
||||
inputPlaceholder: '输入体重',
|
||||
unit: 'kg',
|
||||
quickSelection: '快速选择',
|
||||
confirm: '保存',
|
||||
},
|
||||
alerts: {
|
||||
deleteFailed: '删除记录失败',
|
||||
invalidWeight: '请输入 0-500kg 之间的有效体重',
|
||||
saveFailed: '保存体重失败,请稍后再试',
|
||||
},
|
||||
};
|
||||
@@ -27,7 +27,7 @@
|
||||
<key>CFBundlePackageType</key>
|
||||
<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
|
||||
<key>CFBundleShortVersionString</key>
|
||||
<string>1.1.1</string>
|
||||
<string>1.1.4</string>
|
||||
<key>CFBundleSignature</key>
|
||||
<string>????</string>
|
||||
<key>CFBundleURLTypes</key>
|
||||
|
||||
@@ -2288,9 +2288,9 @@ PODS:
|
||||
- ReactCommon/turbomodule/core
|
||||
- ReactNativeDependencies
|
||||
- Yoga
|
||||
- SDWebImage (5.21.3):
|
||||
- SDWebImage/Core (= 5.21.3)
|
||||
- SDWebImage/Core (5.21.3)
|
||||
- SDWebImage (5.21.4):
|
||||
- SDWebImage/Core (= 5.21.4)
|
||||
- SDWebImage/Core (5.21.4)
|
||||
- SDWebImageAVIFCoder (0.11.1):
|
||||
- libavif/core (>= 0.11.0)
|
||||
- SDWebImage (~> 5.10)
|
||||
@@ -2806,7 +2806,7 @@ SPEC CHECKSUMS:
|
||||
RNSentry: 1d7b9fdae7a01ad8f9053335b5d44e75c39a955e
|
||||
RNSVG: 31d6639663c249b7d5abc9728dde2041eb2a3c34
|
||||
RNWorklets: 54d8dffb7f645873a58484658ddfd4bd1a9a0bc1
|
||||
SDWebImage: 16309af6d214ba3f77a7c6f6fdda888cb313a50a
|
||||
SDWebImage: d0184764be51240d49c761c37f53dd017e1ccaaf
|
||||
SDWebImageAVIFCoder: afe194a084e851f70228e4be35ef651df0fc5c57
|
||||
SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
|
||||
SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
|
||||
|
||||
68
services/aiReport.ts
Normal file
68
services/aiReport.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import { api } from '@/services/api';
|
||||
|
||||
export type GenerateAiReportParams = {
|
||||
date?: string;
|
||||
};
|
||||
|
||||
export type GenerateAiReportResponse = {
|
||||
imageUrl: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* 调用后端生成 AI 健康报告图片
|
||||
*/
|
||||
export async function generateAiReport(params: GenerateAiReportParams = {}): Promise<GenerateAiReportResponse> {
|
||||
return await api.post<GenerateAiReportResponse>('/users/ai-report', params, {
|
||||
// 确保请求体使用 JSON
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 报告状态
|
||||
export type AiReportStatus = 'pending' | 'processing' | 'success' | 'failed';
|
||||
|
||||
// 单条报告记录
|
||||
export type AiReportRecord = {
|
||||
id: string;
|
||||
reportDate: string;
|
||||
imageUrl: string;
|
||||
status: AiReportStatus;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
// 历史列表请求参数
|
||||
export type GetAiReportHistoryParams = {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
status?: AiReportStatus;
|
||||
};
|
||||
|
||||
// 历史列表响应
|
||||
export type GetAiReportHistoryResponse = {
|
||||
records: AiReportRecord[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalPages: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取 AI 健康报告历史列表
|
||||
*/
|
||||
export async function getAiReportHistory(params: GetAiReportHistoryParams = {}): Promise<GetAiReportHistoryResponse> {
|
||||
const searchParams = new URLSearchParams();
|
||||
if (params.page) searchParams.set('page', String(params.page));
|
||||
if (params.pageSize) searchParams.set('pageSize', String(params.pageSize));
|
||||
if (params.startDate) searchParams.set('startDate', params.startDate);
|
||||
if (params.endDate) searchParams.set('endDate', params.endDate);
|
||||
if (params.status) searchParams.set('status', params.status);
|
||||
|
||||
const query = searchParams.toString();
|
||||
const path = `/users/ai-report/history${query ? `?${query}` : ''}`;
|
||||
|
||||
return await api.get<GetAiReportHistoryResponse>(path);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { buildApiUrl } from '@/constants/Api';
|
||||
import AsyncStorage from '@/utils/kvStore';
|
||||
import Constants from 'expo-constants';
|
||||
import { Alert } from 'react-native';
|
||||
|
||||
type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
|
||||
@@ -128,6 +129,10 @@ export type ApiResponse<T> = {
|
||||
data: T;
|
||||
};
|
||||
|
||||
function getAppVersion(): string | undefined {
|
||||
return Constants.expoConfig?.version || Constants.nativeAppVersion || undefined;
|
||||
}
|
||||
|
||||
async function doFetch<T>(path: string, options: ApiRequestOptions = {}): Promise<T> {
|
||||
const url = buildApiUrl(path);
|
||||
const headers: Record<string, string> = {
|
||||
@@ -142,6 +147,11 @@ async function doFetch<T>(path: string, options: ApiRequestOptions = {}): Promis
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
const appVersion = getAppVersion();
|
||||
|
||||
if (appVersion) {
|
||||
headers['X-App-Version'] = appVersion;
|
||||
}
|
||||
|
||||
|
||||
const response = await fetch(url, {
|
||||
@@ -224,6 +234,10 @@ export async function postTextStream(path: string, body: any, callbacks: TextStr
|
||||
if (token) {
|
||||
requestHeaders['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
const appVersion = getAppVersion();
|
||||
if (appVersion) {
|
||||
requestHeaders['X-App-Version'] = appVersion;
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
let lastReadIndex = 0;
|
||||
|
||||
@@ -39,6 +39,8 @@ export enum ChallengeType {
|
||||
MOOD = 'mood',
|
||||
SLEEP = 'sleep',
|
||||
WEIGHT = 'weight',
|
||||
STEP = 'step',
|
||||
CUSTOM = 'custom',
|
||||
}
|
||||
|
||||
|
||||
@@ -70,8 +72,6 @@ export type ChallengeListItemDto = {
|
||||
isPublic?: boolean;
|
||||
maxParticipants?: number | null;
|
||||
challengeState?: ChallengeState;
|
||||
progressUnit?: string;
|
||||
targetValue?: number;
|
||||
summary?: string | null;
|
||||
};
|
||||
|
||||
@@ -114,6 +114,17 @@ export type CreateCustomChallengePayload = {
|
||||
maxParticipants?: number | null;
|
||||
};
|
||||
|
||||
export type UpdateCustomChallengePayload = {
|
||||
title?: string;
|
||||
image?: string;
|
||||
summary?: string;
|
||||
isPublic?: boolean;
|
||||
maxParticipants?: number;
|
||||
highlightTitle?: string;
|
||||
highlightSubtitle?: string;
|
||||
ctaLabel?: string;
|
||||
};
|
||||
|
||||
export async function listChallenges(): Promise<ChallengeListItemDto[]> {
|
||||
return api.get<ChallengeListItemDto[]>('/challenges');
|
||||
}
|
||||
@@ -190,3 +201,14 @@ export async function regenerateChallengeShareCode(
|
||||
`/challenges/custom/${encodeURIComponent(id)}/regenerate-code`
|
||||
);
|
||||
}
|
||||
|
||||
export async function updateCustomChallenge(
|
||||
id: string,
|
||||
payload: UpdateCustomChallengePayload
|
||||
): Promise<ChallengeDetailDto> {
|
||||
return api.put<ChallengeDetailDto>(`/challenges/custom/${encodeURIComponent(id)}`, payload);
|
||||
}
|
||||
|
||||
export async function archiveCustomChallenge(id: string): Promise<boolean> {
|
||||
return api.delete<boolean>(`/challenges/custom/${encodeURIComponent(id)}`);
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import type {
|
||||
DailyMedicationStats,
|
||||
Medication,
|
||||
MedicationAiAnalysisV2,
|
||||
MedicationAiSummary,
|
||||
MedicationForm,
|
||||
MedicationRecognitionTask,
|
||||
MedicationRecord,
|
||||
@@ -315,6 +316,14 @@ export const getOverallStats = async (): Promise<{
|
||||
|
||||
// ==================== AI 分析相关 ====================
|
||||
|
||||
/**
|
||||
* 获取 AI 用药总结
|
||||
* @returns 当前激活用药计划的 AI 关键解读与完成度
|
||||
*/
|
||||
export const getMedicationAiSummary = async (): Promise<MedicationAiSummary> => {
|
||||
return api.get<MedicationAiSummary>('/medications/ai-summary');
|
||||
};
|
||||
|
||||
/**
|
||||
* 流式获取药品 AI 分析
|
||||
* @param medicationId 药品 ID
|
||||
|
||||
@@ -146,14 +146,26 @@ export type MoodOption = {
|
||||
};
|
||||
|
||||
// 获取心情配置
|
||||
export function getMoodConfig(moodType: MoodType) {
|
||||
return MOOD_CONFIG[moodType];
|
||||
export function getMoodConfig(moodType: MoodType, t?: (key: string) => string) {
|
||||
const config = MOOD_CONFIG[moodType];
|
||||
|
||||
// When translation function is provided, prefer localized labels.
|
||||
if (t) {
|
||||
return {
|
||||
...config,
|
||||
label: t(`mood.types.${moodType}`),
|
||||
};
|
||||
}
|
||||
|
||||
return config;
|
||||
}
|
||||
|
||||
// 获取所有心情选项
|
||||
export function getMoodOptions(): MoodOption[] {
|
||||
export function getMoodOptions(t?: (key: string) => string): MoodOption[] {
|
||||
return Object.entries(MOOD_CONFIG).map(([type, config]) => ({
|
||||
type: type as MoodType,
|
||||
...config,
|
||||
// 如果提供了翻译函数,则使用翻译后的标签,否则使用默认的中文标签
|
||||
label: t ? t(`mood.types.${type}`) : config.label,
|
||||
}));
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { ROUTES } from '@/constants/Routes';
|
||||
import { logger } from '@/utils/logger';
|
||||
import { getNotificationEnabled } from '@/utils/userPreferences';
|
||||
import * as Notifications from 'expo-notifications';
|
||||
import { router } from 'expo-router';
|
||||
@@ -188,9 +189,13 @@ export class NotificationService {
|
||||
} else if (data?.type === 'goal_achievement') {
|
||||
// 处理目标达成通知
|
||||
console.log('用户点击了目标达成通知');
|
||||
} else if (data?.type === 'mood_checkin') {
|
||||
} else if (data?.type === 'mood_checkin' || data?.type === 'mood_checkin_reminder') {
|
||||
// 处理心情打卡提醒
|
||||
console.log('用户点击了心情打卡提醒');
|
||||
router.push({
|
||||
pathname: '/mood/edit',
|
||||
params: { date: new Date().toISOString().split('T')[0] }
|
||||
} as any);
|
||||
} else if (data?.type === 'goal_reminder') {
|
||||
// 处理目标提醒通知
|
||||
console.log('用户点击了目标提醒通知', data);
|
||||
@@ -220,20 +225,42 @@ export class NotificationService {
|
||||
if (data?.url) {
|
||||
router.push(data.url as any);
|
||||
}
|
||||
} else if (data?.type === 'water_reminder' || data?.type === 'regular_water_reminder') {
|
||||
} else if (data?.type === 'water_reminder' || data?.type === 'regular_water_reminder' || data?.type === 'custom_water_reminder') {
|
||||
// 处理喝水提醒通知
|
||||
console.log('用户点击了喝水提醒通知', data);
|
||||
// 跳转到统计页面查看喝水进度
|
||||
if (data?.url) {
|
||||
router.push(data.url as any);
|
||||
}
|
||||
} else if (data?.type === 'daily_summary' || data?.type === 'daily_summary_reminder') {
|
||||
// 处理每日总结通知
|
||||
console.log('用户点击了每日总结通知', data);
|
||||
if (data?.url) {
|
||||
router.push(data.url as any);
|
||||
} else {
|
||||
router.push('/(tabs)/statistics' as any);
|
||||
}
|
||||
} else if (data?.type === NotificationTypes.FASTING_START || data?.type === NotificationTypes.FASTING_END) {
|
||||
router.push(ROUTES.TAB_FASTING as any);
|
||||
} else if (data?.type === NotificationTypes.WORKOUT_COMPLETION) {
|
||||
// 处理锻炼完成通知
|
||||
console.log('用户点击了锻炼完成通知', data);
|
||||
// 跳转到锻炼历史页面
|
||||
router.push('/workout/history' as any);
|
||||
logger.info('用户点击了锻炼完成通知', data);
|
||||
const workoutId =
|
||||
typeof data?.workoutId === 'string'
|
||||
? data.workoutId
|
||||
: data?.workoutId != null
|
||||
? String(data.workoutId)
|
||||
: null;
|
||||
|
||||
// 跳转到锻炼历史页面,并在有锻炼ID时自动打开详情
|
||||
if (workoutId) {
|
||||
router.push({
|
||||
pathname: '/workout/history',
|
||||
params: { workoutId },
|
||||
} as any);
|
||||
} else {
|
||||
router.push('/workout/history' as any);
|
||||
}
|
||||
} else if (data?.type === NotificationTypes.HRV_STRESS_ALERT) {
|
||||
console.log('用户点击了 HRV 压力通知', data);
|
||||
const targetUrl = (data?.url as string) || '/(tabs)/statistics';
|
||||
@@ -616,4 +643,3 @@ export const sendMoodCheckinReminder = (title: string, body: string, date?: Date
|
||||
return notificationService.sendImmediateNotification(notification);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -2,6 +2,9 @@ import { api } from '@/services/api';
|
||||
|
||||
export type Gender = 'male' | 'female';
|
||||
|
||||
// 用户语言设置
|
||||
export type UserLanguage = 'zh-CN' | 'en-US';
|
||||
|
||||
export type UpdateUserDto = {
|
||||
name?: string;
|
||||
avatar?: string; // base64 字符串
|
||||
@@ -21,6 +24,7 @@ export type UpdateUserDto = {
|
||||
armCircumference?: number; // 臂围
|
||||
thighCircumference?: number; // 大腿围
|
||||
calfCircumference?: number; // 小腿围
|
||||
language?: UserLanguage; // 用户语言偏好
|
||||
};
|
||||
|
||||
export async function updateUser(dto: UpdateUserDto): Promise<Record<string, any>> {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user