fbe0c92f0f
- 新增 i18n 翻译资源，覆盖睡眠、饮水、体重、锻炼、用药 AI 识别、步数、健身圆环、基础代谢及设置等核心模块 - 重构相关页面及组件（如 SleepDetail, WaterDetail, WorkoutHistory 等）使用 `useI18n` 钩子替换硬编码文本 - 升级 `utils/date` 工具库与 `DateSelector` 组件，支持基于语言环境的日期格式化与显示 - 完善登录页、注销流程及权限申请弹窗的双语提示信息 - 优化部分页面的 UI 细节与字体样式以适配多语言显示
845 lines
25 KiB
TypeScript
845 lines
25 KiB
TypeScript
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 { getLocalizedDateFormat, getMonthDays, getTodayIndexInMonth } from '@/utils/date';
|
||
import { fetchBasalEnergyBurned } from '@/utils/health';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import dayjs from 'dayjs';
|
||
import weekOfYear from 'dayjs/plugin/weekOfYear';
|
||
import { LinearGradient } from 'expo-linear-gradient';
|
||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||
import { ActivityIndicator, Dimensions, Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||
import { BarChart } from 'react-native-chart-kit';
|
||
|
||
dayjs.extend(weekOfYear);
|
||
|
||
type TabType = 'week' | 'month';
|
||
|
||
type BasalMetabolismData = {
|
||
date: Date;
|
||
value: number | null;
|
||
};
|
||
|
||
export default function BasalMetabolismDetailScreen() {
|
||
const { t, i18n } = useI18n();
|
||
const userProfile = useAppSelector(selectUserProfile);
|
||
const userAge = useAppSelector(selectUserAge);
|
||
const safeAreaTop = useSafeAreaTop()
|
||
|
||
// 日期相关状态
|
||
const [selectedIndex, setSelectedIndex] = useState(getTodayIndexInMonth());
|
||
const [activeTab, setActiveTab] = useState<TabType>('week');
|
||
|
||
// 说明弹窗状态
|
||
const [infoModalVisible, setInfoModalVisible] = useState(false);
|
||
|
||
// 数据状态
|
||
const [chartData, setChartData] = useState<BasalMetabolismData[]>([]);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
// 缓存和防抖相关，参照BasalMetabolismCard
|
||
const [cacheRef] = useState(() => new Map<string, { data: BasalMetabolismData[]; timestamp: number }>());
|
||
const [loadingRef] = useState(() => new Map<string, Promise<BasalMetabolismData[]>>());
|
||
const CACHE_DURATION = 5 * 60 * 1000; // 5分钟缓存
|
||
|
||
console.log('basal metabolism chartData', chartData);
|
||
|
||
// 生成日期范围的函数
|
||
const generateDateRange = useCallback((tab: TabType): Date[] => {
|
||
const today = new Date();
|
||
const dates: Date[] = [];
|
||
|
||
switch (tab) {
|
||
case 'week':
|
||
// 获取最近7天
|
||
for (let i = 6; i >= 0; i--) {
|
||
const date = dayjs(today).subtract(i, 'day').toDate();
|
||
dates.push(date);
|
||
}
|
||
break;
|
||
case 'month':
|
||
// 获取最近30天，按周分组
|
||
for (let i = 3; i >= 0; i--) {
|
||
const date = dayjs(today).subtract(i * 7, 'day').toDate();
|
||
dates.push(date);
|
||
}
|
||
break;
|
||
}
|
||
|
||
return dates;
|
||
}, []);
|
||
|
||
// 优化的数据获取函数，包含缓存和去重复请求
|
||
const fetchBasalMetabolismData = useCallback(async (tab: TabType): Promise<BasalMetabolismData[]> => {
|
||
const cacheKey = `${tab}-${dayjs().format('YYYY-MM-DD')}`;
|
||
const now = Date.now();
|
||
|
||
// 检查缓存
|
||
const cached = cacheRef.get(cacheKey);
|
||
if (cached && (now - cached.timestamp) < CACHE_DURATION) {
|
||
return cached.data;
|
||
}
|
||
|
||
// 检查是否已经在请求中（防止重复请求）
|
||
const existingRequest = loadingRef.get(cacheKey);
|
||
if (existingRequest) {
|
||
return existingRequest;
|
||
}
|
||
|
||
// 创建新的请求
|
||
const request = (async () => {
|
||
try {
|
||
const dates = generateDateRange(tab);
|
||
const results: BasalMetabolismData[] = [];
|
||
|
||
// 并行获取所有日期的数据
|
||
const promises = dates.map(async (date) => {
|
||
try {
|
||
const options = {
|
||
startDate: dayjs(date).startOf('day').toDate().toISOString(),
|
||
endDate: dayjs(date).endOf('day').toDate().toISOString()
|
||
};
|
||
const basalEnergy = await fetchBasalEnergyBurned(options);
|
||
return {
|
||
date,
|
||
value: basalEnergy || null
|
||
};
|
||
} catch (error) {
|
||
console.error('获取单日基础代谢数据失败:', error);
|
||
return {
|
||
date,
|
||
value: null
|
||
};
|
||
}
|
||
});
|
||
|
||
const data = await Promise.all(promises);
|
||
results.push(...data);
|
||
|
||
// 更新缓存
|
||
cacheRef.set(cacheKey, { data: results, timestamp: now });
|
||
|
||
return results;
|
||
} catch (error) {
|
||
console.error('获取基础代谢数据失败:', error);
|
||
return [];
|
||
} finally {
|
||
// 清理请求记录
|
||
loadingRef.delete(cacheKey);
|
||
}
|
||
})();
|
||
|
||
// 记录请求
|
||
loadingRef.set(cacheKey, request);
|
||
|
||
return request;
|
||
}, [generateDateRange, cacheRef, loadingRef, CACHE_DURATION]);
|
||
|
||
// 获取当前选中日期
|
||
const currentSelectedDate = useMemo(() => {
|
||
const days = getMonthDays(undefined, i18n.language as 'zh' | 'en');
|
||
return days[selectedIndex]?.date?.toDate() ?? new Date();
|
||
}, [selectedIndex, i18n.language]);
|
||
|
||
|
||
// 计算BMR范围
|
||
const bmrRange = useMemo(() => {
|
||
const { gender, weight, height } = userProfile;
|
||
|
||
// 检查是否有足够的信息来计算BMR
|
||
if (!gender || !weight || !height || !userAge) {
|
||
return null;
|
||
}
|
||
|
||
// 将体重和身高转换为数字
|
||
const weightNum = parseFloat(weight);
|
||
const heightNum = parseFloat(height);
|
||
|
||
if (isNaN(weightNum) || isNaN(heightNum) || weightNum <= 0 || heightNum <= 0 || userAge <= 0) {
|
||
return null;
|
||
}
|
||
|
||
// 使用Mifflin-St Jeor公式计算BMR
|
||
let bmr: number;
|
||
if (gender === 'male') {
|
||
bmr = 10 * weightNum + 6.25 * heightNum - 5 * userAge + 5;
|
||
} else {
|
||
bmr = 10 * weightNum + 6.25 * heightNum - 5 * userAge - 161;
|
||
}
|
||
|
||
// 计算正常范围（±15%）
|
||
const minBMR = Math.round(bmr * 0.85);
|
||
const maxBMR = Math.round(bmr * 1.15);
|
||
|
||
return { min: minBMR, max: maxBMR, base: Math.round(bmr) };
|
||
}, [userProfile.gender, userProfile.weight, userProfile.height, userAge]);
|
||
|
||
// 获取单个日期的代谢数据
|
||
const fetchSingleDateData = useCallback(async (date: Date): Promise<BasalMetabolismData> => {
|
||
try {
|
||
const options = {
|
||
startDate: dayjs(date).startOf('day').toDate().toISOString(),
|
||
endDate: dayjs(date).endOf('day').toDate().toISOString()
|
||
};
|
||
const basalEnergy = await fetchBasalEnergyBurned(options);
|
||
return {
|
||
date,
|
||
value: basalEnergy || null
|
||
};
|
||
} catch (error) {
|
||
console.error('获取单日基础代谢数据失败:', error);
|
||
return {
|
||
date,
|
||
value: null
|
||
};
|
||
}
|
||
}, []);
|
||
|
||
// 日期选择回调
|
||
const onSelectDate = useCallback(async (index: number) => {
|
||
setSelectedIndex(index);
|
||
|
||
// 获取选中日期
|
||
const days = getMonthDays(undefined, i18n.language as 'zh' | 'en');
|
||
const selectedDate = days[index]?.date?.toDate();
|
||
|
||
if (selectedDate) {
|
||
// 检查是否已经有该日期的数据
|
||
const existingData = chartData.find(item =>
|
||
dayjs(item.date).isSame(selectedDate, 'day')
|
||
);
|
||
|
||
// 如果没有数据，则获取该日期的数据
|
||
if (!existingData) {
|
||
try {
|
||
const newData = await fetchSingleDateData(selectedDate);
|
||
// 更新chartData，添加新数据并按日期排序
|
||
setChartData(prevData => {
|
||
const updatedData = [...prevData, newData];
|
||
return updatedData.sort((a, b) => a.date.getTime() - b.date.getTime());
|
||
});
|
||
} catch (error) {
|
||
console.error('获取选中日期数据失败:', error);
|
||
}
|
||
}
|
||
}
|
||
}, [chartData, fetchSingleDateData]);
|
||
|
||
// Tab切换
|
||
const handleTabPress = useCallback((tab: TabType) => {
|
||
setActiveTab(tab);
|
||
}, []);
|
||
|
||
// 初始化和Tab切换时加载数据
|
||
useEffect(() => {
|
||
let isCancelled = false;
|
||
|
||
const loadData = async () => {
|
||
setIsLoading(true);
|
||
setError(null);
|
||
try {
|
||
const data = await fetchBasalMetabolismData(activeTab);
|
||
if (!isCancelled) {
|
||
setChartData(data);
|
||
}
|
||
} catch (err) {
|
||
if (!isCancelled) {
|
||
setError(err instanceof Error ? err.message : t('basalMetabolismDetail.chart.error.fetchFailed'));
|
||
}
|
||
} finally {
|
||
if (!isCancelled) {
|
||
setIsLoading(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
loadData();
|
||
|
||
// 清理函数，防止组件卸载后的状态更新
|
||
return () => {
|
||
isCancelled = true;
|
||
};
|
||
}, [activeTab, fetchBasalMetabolismData]);
|
||
|
||
// 处理图表数据
|
||
const processedChartData = useMemo(() => {
|
||
if (!chartData || chartData.length === 0) {
|
||
return { labels: [], datasets: [] };
|
||
}
|
||
|
||
// 根据activeTab生成标签和数据
|
||
const labels = chartData.map(item => {
|
||
switch (activeTab) {
|
||
case 'week':
|
||
// 显示星期几
|
||
return dayjs(item.date).format('dd');
|
||
case 'month':
|
||
// 显示周数
|
||
const weekOfYear = dayjs(item.date).week();
|
||
const firstWeekOfYear = dayjs(item.date).startOf('year').week();
|
||
const weekNumber = weekOfYear - firstWeekOfYear + 1;
|
||
return t('basalMetabolismDetail.chart.weekLabel', { week: weekNumber });
|
||
default:
|
||
return dayjs(item.date).format('MM-DD');
|
||
}
|
||
});
|
||
|
||
// 生成基础代谢数据集
|
||
const data = chartData.map(item => {
|
||
const value = item.value;
|
||
if (value === null || value === undefined) {
|
||
return 0; // 明确处理null/undefined值
|
||
}
|
||
// 对于非常小的正值，保证至少显示1，但对于0值保持为0
|
||
const roundedValue = Math.round(value);
|
||
return value > 0 && roundedValue === 0 ? 1 : roundedValue;
|
||
});
|
||
|
||
console.log('processedChartData:', { labels, data, originalValues: chartData.map(item => item.value) });
|
||
|
||
return {
|
||
labels,
|
||
datasets: [{
|
||
data
|
||
}]
|
||
};
|
||
}, [chartData, activeTab]);
|
||
|
||
return (
|
||
<View style={styles.container}>
|
||
{/* 背景渐变 */}
|
||
<LinearGradient
|
||
colors={['#f5e5fbff', '#e5fcfeff', '#eefdffff', '#e6f6fcff']}
|
||
style={styles.gradientBackground}
|
||
start={{ x: 0, y: 0 }}
|
||
end={{ x: 0, y: 1 }}
|
||
/>
|
||
|
||
{/* 头部导航 */}
|
||
<HeaderBar
|
||
title={t('basalMetabolismDetail.title')}
|
||
transparent
|
||
right={
|
||
<TouchableOpacity
|
||
onPress={() => setInfoModalVisible(true)}
|
||
style={styles.infoButton}
|
||
>
|
||
<Ionicons name="information-circle-outline" size={24} color="#666" />
|
||
</TouchableOpacity>
|
||
}
|
||
/>
|
||
|
||
|
||
|
||
<ScrollView
|
||
style={styles.scrollView}
|
||
contentContainerStyle={{
|
||
paddingBottom: 60,
|
||
paddingHorizontal: 20,
|
||
paddingTop: safeAreaTop
|
||
}}
|
||
showsVerticalScrollIndicator={false}
|
||
>
|
||
{/* 日期选择器 */}
|
||
<View style={styles.dateContainer}>
|
||
<DateSelector
|
||
selectedIndex={selectedIndex}
|
||
onDateSelect={onSelectDate}
|
||
showMonthTitle={false}
|
||
disableFutureDates={true}
|
||
/>
|
||
</View>
|
||
|
||
{/* 当前日期基础代谢显示 */}
|
||
<View style={styles.currentDataCard}>
|
||
<Text style={styles.currentDataTitle}>
|
||
{t('basalMetabolismDetail.currentData.title', {
|
||
date: getLocalizedDateFormat(dayjs(currentSelectedDate), i18n.language as 'zh' | 'en')
|
||
})}
|
||
</Text>
|
||
<View style={styles.currentValueContainer}>
|
||
<Text style={styles.currentValue}>
|
||
{(() => {
|
||
const selectedDateData = chartData.find(item =>
|
||
dayjs(item.date).isSame(currentSelectedDate, 'day')
|
||
);
|
||
if (selectedDateData?.value) {
|
||
return Math.round(selectedDateData.value).toString();
|
||
}
|
||
return t('basalMetabolismDetail.currentData.noData');
|
||
})()}
|
||
</Text>
|
||
<Text style={styles.currentUnit}>{t('basalMetabolismDetail.currentData.unit')}</Text>
|
||
</View>
|
||
{bmrRange && (
|
||
<Text style={styles.rangeText}>
|
||
{t('basalMetabolismDetail.currentData.normalRange', {
|
||
min: bmrRange.min,
|
||
max: bmrRange.max
|
||
})}
|
||
</Text>
|
||
)}
|
||
</View>
|
||
|
||
{/* 基础代谢统计 */}
|
||
<View style={styles.statsCard}>
|
||
<Text style={styles.statsTitle}>{t('basalMetabolismDetail.stats.title')}</Text>
|
||
|
||
{/* Tab 切换 */}
|
||
<View style={styles.tabContainer}>
|
||
<TouchableOpacity
|
||
style={[styles.tab, activeTab === 'week' && styles.activeTab]}
|
||
onPress={() => handleTabPress('week')}
|
||
activeOpacity={0.7}
|
||
>
|
||
<Text style={[styles.tabText, activeTab === 'week' && styles.activeTabText]}>
|
||
{t('basalMetabolismDetail.stats.tabs.week')}
|
||
</Text>
|
||
</TouchableOpacity>
|
||
<TouchableOpacity
|
||
style={[styles.tab, activeTab === 'month' && styles.activeTab]}
|
||
onPress={() => handleTabPress('month')}
|
||
activeOpacity={0.7}
|
||
>
|
||
<Text style={[styles.tabText, activeTab === 'month' && styles.activeTabText]}>
|
||
{t('basalMetabolismDetail.stats.tabs.month')}
|
||
</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
{/* 柱状图 */}
|
||
{isLoading ? (
|
||
<View style={styles.loadingChart}>
|
||
<ActivityIndicator size="large" color="#4ECDC4" />
|
||
<Text style={styles.loadingText}>{t('basalMetabolismDetail.chart.loadingText')}</Text>
|
||
</View>
|
||
) : error ? (
|
||
<View style={styles.errorChart}>
|
||
<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 : t('basalMetabolismDetail.chart.error.fetchFailed'));
|
||
setIsLoading(false);
|
||
});
|
||
}}
|
||
activeOpacity={0.7}
|
||
>
|
||
<Text style={styles.retryText}>{t('basalMetabolismDetail.chart.error.retry')}</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
) : processedChartData.datasets.length > 0 && processedChartData.datasets[0].data.length > 0 ? (
|
||
<BarChart
|
||
data={{
|
||
labels: processedChartData.labels,
|
||
datasets: processedChartData.datasets,
|
||
}}
|
||
width={Dimensions.get('window').width - 80}
|
||
height={220}
|
||
yAxisLabel=""
|
||
yAxisSuffix={t('basalMetabolismDetail.chart.yAxisSuffix')}
|
||
chartConfig={{
|
||
backgroundColor: '#ffffff',
|
||
backgroundGradientFrom: '#ffffff',
|
||
backgroundGradientTo: '#ffffff',
|
||
decimalPlaces: 0,
|
||
color: (opacity = 1) => `${Colors.light.primary}${Math.round(opacity * 255).toString(16).padStart(2, '0')}`, // 使用主题紫色
|
||
labelColor: (opacity = 1) => `${Colors.light.text}${Math.round(opacity * 255).toString(16).padStart(2, '0')}`, // 使用主题文字颜色
|
||
style: {
|
||
borderRadius: 16,
|
||
},
|
||
barPercentage: 0.7, // 增加柱体宽度
|
||
propsForBackgroundLines: {
|
||
strokeDasharray: "2,2",
|
||
stroke: Colors.light.border, // 使用主题边框颜色
|
||
strokeWidth: 1
|
||
},
|
||
propsForLabels: {
|
||
fontSize: 12,
|
||
fontWeight: '500',
|
||
},
|
||
}}
|
||
style={styles.chart}
|
||
showValuesOnTopOfBars={true}
|
||
fromZero={false}
|
||
segments={4}
|
||
/>
|
||
) : (
|
||
<View style={styles.emptyChart}>
|
||
<Text style={styles.emptyChartText}>{t('basalMetabolismDetail.chart.empty')}</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</ScrollView>
|
||
|
||
{/* 基础代谢说明弹窗 */}
|
||
<Modal
|
||
animationType="fade"
|
||
transparent={true}
|
||
visible={infoModalVisible}
|
||
onRequestClose={() => setInfoModalVisible(false)}
|
||
>
|
||
<View style={styles.modalOverlay}>
|
||
<View style={styles.modalContent}>
|
||
{/* 关闭按钮 */}
|
||
<TouchableOpacity
|
||
style={styles.closeButton}
|
||
onPress={() => setInfoModalVisible(false)}
|
||
>
|
||
<Text style={styles.closeButtonText}>{t('basalMetabolismDetail.modal.closeButton')}</Text>
|
||
</TouchableOpacity>
|
||
|
||
{/* 标题 */}
|
||
<Text style={styles.modalTitle}>{t('basalMetabolismDetail.modal.title')}</Text>
|
||
|
||
{/* 基础代谢定义 */}
|
||
<Text style={styles.modalDescription}>
|
||
{t('basalMetabolismDetail.modal.description')}
|
||
</Text>
|
||
|
||
{/* 为什么重要 */}
|
||
<Text style={styles.sectionTitle}>{t('basalMetabolismDetail.modal.sections.importance.title')}</Text>
|
||
<Text style={styles.sectionContent}>
|
||
{t('basalMetabolismDetail.modal.sections.importance.content')}
|
||
</Text>
|
||
|
||
{/* 正常范围 */}
|
||
<Text style={styles.sectionTitle}>{t('basalMetabolismDetail.modal.sections.normalRange.title')}</Text>
|
||
<Text style={styles.formulaText}>
|
||
- {t('basalMetabolismDetail.modal.sections.normalRange.formulas.male')}
|
||
</Text>
|
||
<Text style={styles.formulaText}>
|
||
- {t('basalMetabolismDetail.modal.sections.normalRange.formulas.female')}
|
||
</Text>
|
||
|
||
{bmrRange ? (
|
||
<>
|
||
<Text style={styles.rangeText}>
|
||
{t('basalMetabolismDetail.modal.sections.normalRange.userRange', {
|
||
min: bmrRange.min,
|
||
max: bmrRange.max
|
||
})}
|
||
</Text>
|
||
<Text style={styles.rangeNote}>
|
||
{t('basalMetabolismDetail.modal.sections.normalRange.rangeNote')}
|
||
</Text>
|
||
<Text style={styles.userInfoText}>
|
||
{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}>
|
||
{t('basalMetabolismDetail.modal.sections.normalRange.incompleteInfo')}
|
||
</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}>
|
||
{(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>
|
||
</Modal>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: '#FFFFFF',
|
||
},
|
||
gradientBackground: {
|
||
position: 'absolute',
|
||
left: 0,
|
||
right: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
},
|
||
scrollView: {
|
||
flex: 1,
|
||
},
|
||
infoButton: {
|
||
padding: 4,
|
||
},
|
||
dateContainer: {
|
||
marginTop: 16,
|
||
marginBottom: 20,
|
||
},
|
||
currentDataCard: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 16,
|
||
padding: 20,
|
||
marginBottom: 20,
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 4,
|
||
},
|
||
shadowOpacity: 0.12,
|
||
shadowRadius: 12,
|
||
elevation: 6,
|
||
alignItems: 'center',
|
||
},
|
||
currentDataTitle: {
|
||
fontSize: 16,
|
||
fontWeight: '700',
|
||
color: '#192126',
|
||
marginBottom: 16,
|
||
textAlign: 'center',
|
||
},
|
||
currentValueContainer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'baseline',
|
||
marginBottom: 8,
|
||
},
|
||
currentValue: {
|
||
fontSize: 36,
|
||
fontWeight: '700',
|
||
color: '#4ECDC4',
|
||
},
|
||
currentUnit: {
|
||
fontSize: 16,
|
||
color: '#666',
|
||
marginLeft: 8,
|
||
},
|
||
rangeText: {
|
||
fontSize: 14,
|
||
color: '#059669',
|
||
textAlign: 'center',
|
||
},
|
||
statsCard: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 16,
|
||
padding: 20,
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 4,
|
||
},
|
||
shadowOpacity: 0.12,
|
||
shadowRadius: 12,
|
||
elevation: 6,
|
||
},
|
||
statsTitle: {
|
||
fontSize: 16,
|
||
fontWeight: '700',
|
||
color: '#192126',
|
||
marginBottom: 16,
|
||
},
|
||
tabContainer: {
|
||
flexDirection: 'row',
|
||
backgroundColor: '#F5F5F7',
|
||
borderRadius: 12,
|
||
padding: 4,
|
||
marginBottom: 20,
|
||
},
|
||
tab: {
|
||
flex: 1,
|
||
paddingVertical: 8,
|
||
paddingHorizontal: 16,
|
||
borderRadius: 8,
|
||
alignItems: 'center',
|
||
},
|
||
activeTab: {
|
||
backgroundColor: '#FFFFFF',
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 1,
|
||
},
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 2,
|
||
elevation: 2,
|
||
},
|
||
tabText: {
|
||
fontSize: 14,
|
||
fontWeight: '600',
|
||
color: '#888',
|
||
},
|
||
activeTabText: {
|
||
color: '#192126',
|
||
},
|
||
chart: {
|
||
marginVertical: 8,
|
||
borderRadius: 16,
|
||
},
|
||
emptyChart: {
|
||
height: 220,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: '#F8F9FA',
|
||
borderRadius: 16,
|
||
marginVertical: 8,
|
||
},
|
||
emptyChartText: {
|
||
fontSize: 14,
|
||
color: '#999',
|
||
fontWeight: '500',
|
||
},
|
||
loadingChart: {
|
||
height: 220,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: '#F8F9FA',
|
||
borderRadius: 16,
|
||
marginVertical: 8,
|
||
},
|
||
loadingText: {
|
||
fontSize: 14,
|
||
color: '#666',
|
||
marginTop: 8,
|
||
fontWeight: '500',
|
||
},
|
||
errorChart: {
|
||
height: 220,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: '#FFF5F5',
|
||
borderRadius: 16,
|
||
marginVertical: 8,
|
||
padding: 20,
|
||
},
|
||
errorText: {
|
||
fontSize: 14,
|
||
color: '#E53E3E',
|
||
textAlign: 'center',
|
||
marginBottom: 12,
|
||
},
|
||
retryButton: {
|
||
backgroundColor: '#4ECDC4',
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 8,
|
||
borderRadius: 8,
|
||
},
|
||
retryText: {
|
||
color: '#FFFFFF',
|
||
fontSize: 14,
|
||
fontWeight: '600',
|
||
},
|
||
// Modal styles
|
||
modalOverlay: {
|
||
flex: 1,
|
||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||
justifyContent: 'flex-end',
|
||
},
|
||
modalContent: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderTopLeftRadius: 20,
|
||
borderTopRightRadius: 20,
|
||
padding: 24,
|
||
maxHeight: '90%',
|
||
width: '100%',
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: -5,
|
||
},
|
||
shadowOpacity: 0.25,
|
||
shadowRadius: 20,
|
||
elevation: 10,
|
||
},
|
||
closeButton: {
|
||
position: 'absolute',
|
||
top: 16,
|
||
right: 16,
|
||
width: 32,
|
||
height: 32,
|
||
borderRadius: 16,
|
||
backgroundColor: '#F1F5F9',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
zIndex: 1,
|
||
},
|
||
closeButtonText: {
|
||
fontSize: 20,
|
||
color: '#64748B',
|
||
fontWeight: '600',
|
||
},
|
||
modalTitle: {
|
||
fontSize: 24,
|
||
fontWeight: '700',
|
||
color: '#0F172A',
|
||
marginBottom: 16,
|
||
textAlign: 'center',
|
||
},
|
||
modalDescription: {
|
||
fontSize: 15,
|
||
color: '#475569',
|
||
lineHeight: 22,
|
||
marginBottom: 24,
|
||
},
|
||
sectionTitle: {
|
||
fontSize: 18,
|
||
fontWeight: '700',
|
||
color: '#0F172A',
|
||
marginBottom: 12,
|
||
marginTop: 8,
|
||
},
|
||
sectionContent: {
|
||
fontSize: 15,
|
||
color: '#475569',
|
||
lineHeight: 22,
|
||
marginBottom: 20,
|
||
},
|
||
formulaText: {
|
||
fontSize: 14,
|
||
color: '#64748B',
|
||
fontFamily: 'monospace',
|
||
marginBottom: 4,
|
||
paddingLeft: 8,
|
||
},
|
||
rangeNote: {
|
||
fontSize: 12,
|
||
color: '#9CA3AF',
|
||
textAlign: 'center',
|
||
marginBottom: 20,
|
||
},
|
||
userInfoText: {
|
||
fontSize: 13,
|
||
color: '#6B7280',
|
||
textAlign: 'center',
|
||
marginTop: 8,
|
||
marginBottom: 16,
|
||
fontStyle: 'italic',
|
||
},
|
||
strategyText: {
|
||
fontSize: 15,
|
||
color: '#475569',
|
||
marginBottom: 12,
|
||
},
|
||
strategyList: {
|
||
marginBottom: 20,
|
||
},
|
||
strategyItem: {
|
||
fontSize: 14,
|
||
color: '#64748B',
|
||
lineHeight: 20,
|
||
marginBottom: 8,
|
||
paddingLeft: 8,
|
||
},
|
||
}); |