feat: 新增任务管理功能及相关组件
- 将目标页面改为任务列表，支持任务的创建、完成和跳过功能 - 新增任务卡片和任务进度卡片组件，展示任务状态和进度 - 实现任务数据的获取和管理，集成Redux状态管理 - 更新API服务，支持任务相关的CRUD操作 - 编写任务管理功能实现文档，详细描述功能和组件架构
This commit is contained in:
richarjiang
@@ -15,7 +15,7 @@ export function BasalMetabolismCard({ value, resetToken, style }: BasalMetabolis
|
||||
if (value === null || value === 0) {
|
||||
return { text: '未知', color: '#9AA3AE' };
|
||||
}
|
||||
|
||||
|
||||
// 基于常见的基础代谢范围来判断状态
|
||||
if (value >= 1800) {
|
||||
return { text: '高代谢', color: '#10B981' };
|
||||
@@ -39,15 +39,14 @@ export function BasalMetabolismCard({ value, resetToken, style }: BasalMetabolis
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
/>
|
||||
|
||||
|
||||
{/* 装饰性圆圈 */}
|
||||
<View style={styles.decorativeCircle1} />
|
||||
<View style={styles.decorativeCircle2} />
|
||||
|
||||
|
||||
{/* 头部区域 */}
|
||||
<View style={styles.header}>
|
||||
<View style={styles.leftSection}>
|
||||
|
||||
<Text style={styles.title}>基础代谢</Text>
|
||||
</View>
|
||||
<View style={[styles.statusBadge, { backgroundColor: status.color + '20' }]}>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { CreateGoalRequest, GoalPriority, RepeatType } from '@/types/goals';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import DateTimePicker from '@react-native-community/datetimepicker';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
@@ -15,6 +17,7 @@ import {
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import WheelPickerExpo from 'react-native-wheel-picker-expo';
|
||||
|
||||
interface CreateGoalModalProps {
|
||||
visible: boolean;
|
||||
@@ -30,7 +33,7 @@ const REPEAT_TYPE_OPTIONS: { value: RepeatType; label: string }[] = [
|
||||
{ value: 'custom', label: '自定义' },
|
||||
];
|
||||
|
||||
const FREQUENCY_OPTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
const FREQUENCY_OPTIONS = Array.from({ length: 30 }, (_, i) => i + 1);
|
||||
|
||||
export const CreateGoalModal: React.FC<CreateGoalModalProps> = ({
|
||||
visible,
|
||||
@@ -47,6 +50,8 @@ export const CreateGoalModal: React.FC<CreateGoalModalProps> = ({
|
||||
const [repeatType, setRepeatType] = useState<RepeatType>('daily');
|
||||
const [frequency, setFrequency] = useState(1);
|
||||
const [hasReminder, setHasReminder] = useState(false);
|
||||
const [showFrequencyPicker, setShowFrequencyPicker] = useState(false);
|
||||
const [showRepeatTypePicker, setShowRepeatTypePicker] = useState(false);
|
||||
const [reminderTime, setReminderTime] = useState('20:00');
|
||||
const [category, setCategory] = useState('');
|
||||
const [priority, setPriority] = useState<GoalPriority>(5);
|
||||
@@ -163,12 +168,21 @@ export const CreateGoalModal: React.FC<CreateGoalModalProps> = ({
|
||||
onRequestClose={handleClose}
|
||||
>
|
||||
<View style={[styles.container, { backgroundColor: colorTokens.background }]}>
|
||||
{/* 渐变背景 */}
|
||||
<LinearGradient
|
||||
colors={['#F0F9FF', '#E0F2FE']}
|
||||
style={styles.gradientBackground}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
/>
|
||||
|
||||
{/* 装饰性圆圈 */}
|
||||
<View style={styles.decorativeCircle1} />
|
||||
<View style={styles.decorativeCircle2} />
|
||||
{/* 头部 */}
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity onPress={handleClose} disabled={loading}>
|
||||
<Text style={[styles.cancelButton, { color: colorTokens.text }]}>
|
||||
←
|
||||
</Text>
|
||||
<Ionicons name="close" size={24} color={colorTokens.text} />
|
||||
</TouchableOpacity>
|
||||
<Text style={[styles.title, { color: colorTokens.text }]}>
|
||||
创建新目标
|
||||
@@ -180,13 +194,13 @@ export const CreateGoalModal: React.FC<CreateGoalModalProps> = ({
|
||||
{/* 目标标题输入 */}
|
||||
<View style={styles.section}>
|
||||
<View style={styles.iconTitleContainer}>
|
||||
<View style={styles.iconPlaceholder}>
|
||||
{/* <View style={styles.iconPlaceholder}>
|
||||
<Text style={styles.iconText}>图标</Text>
|
||||
</View>
|
||||
</View> */}
|
||||
<TextInput
|
||||
style={[styles.titleInput, { color: colorTokens.text }]}
|
||||
placeholder="写点什么..."
|
||||
placeholderTextColor={colorTokens.textSecondary}
|
||||
// placeholderTextColor={colorTokens.textSecondary}
|
||||
value={title}
|
||||
onChangeText={setTitle}
|
||||
multiline
|
||||
@@ -201,44 +215,132 @@ export const CreateGoalModal: React.FC<CreateGoalModalProps> = ({
|
||||
|
||||
{/* 目标重复周期 */}
|
||||
<View style={[styles.optionCard, { backgroundColor: colorTokens.card }]}>
|
||||
<View style={styles.optionHeader}>
|
||||
<View style={styles.optionIcon}>
|
||||
<Text style={styles.optionIconText}>🔄</Text>
|
||||
</View>
|
||||
<Text style={[styles.optionLabel, { color: colorTokens.text }]}>
|
||||
目标重复周期
|
||||
</Text>
|
||||
<TouchableOpacity style={styles.optionValue}>
|
||||
<TouchableOpacity style={styles.optionValue} onPress={() => setShowRepeatTypePicker(true)}>
|
||||
<View style={styles.optionHeader}>
|
||||
<View style={styles.optionIcon}>
|
||||
<Text style={styles.optionIconText}>🔄</Text>
|
||||
</View>
|
||||
<Text style={[styles.optionLabel, { color: colorTokens.text }]}>
|
||||
目标重复周期
|
||||
</Text>
|
||||
<Text style={[styles.optionValueText, { color: colorTokens.textSecondary }]}>
|
||||
{REPEAT_TYPE_OPTIONS.find(opt => opt.value === repeatType)?.label}
|
||||
</Text>
|
||||
<Text style={[styles.chevron, { color: colorTokens.textSecondary }]}>
|
||||
›
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* 重复周期选择器弹窗 */}
|
||||
<Modal
|
||||
visible={showRepeatTypePicker}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setShowRepeatTypePicker(false)}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={styles.modalBackdrop}
|
||||
activeOpacity={1}
|
||||
onPress={() => setShowRepeatTypePicker(false)}
|
||||
/>
|
||||
<View style={styles.modalSheet}>
|
||||
<View style={{ height: 200 }}>
|
||||
<WheelPickerExpo
|
||||
height={200}
|
||||
width={150}
|
||||
initialSelectedIndex={REPEAT_TYPE_OPTIONS.findIndex(opt => opt.value === repeatType)}
|
||||
items={REPEAT_TYPE_OPTIONS.map(opt => ({ label: opt.label, value: opt.value }))}
|
||||
onChange={({ item }) => setRepeatType(item.value)}
|
||||
backgroundColor={colorTokens.card}
|
||||
haptics
|
||||
/>
|
||||
</View>
|
||||
{Platform.OS === 'ios' && (
|
||||
<View style={styles.modalActions}>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalBtn]}
|
||||
onPress={() => setShowRepeatTypePicker(false)}
|
||||
>
|
||||
<Text style={styles.modalBtnText}>取消</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalBtn, styles.modalBtnPrimary]}
|
||||
onPress={() => setShowRepeatTypePicker(false)}
|
||||
>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary]}>确定</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</Modal>
|
||||
|
||||
{/* 频率设置 */}
|
||||
<View style={[styles.optionCard, { backgroundColor: colorTokens.card }]}>
|
||||
<View style={styles.optionHeader}>
|
||||
<View style={styles.optionIcon}>
|
||||
<Text style={styles.optionIconText}>📊</Text>
|
||||
</View>
|
||||
<Text style={[styles.optionLabel, { color: colorTokens.text }]}>
|
||||
频率
|
||||
</Text>
|
||||
<TouchableOpacity style={styles.optionValue}>
|
||||
<TouchableOpacity style={styles.optionValue} onPress={() => setShowFrequencyPicker(true)}>
|
||||
|
||||
<View style={styles.optionHeader}>
|
||||
<View style={styles.optionIcon}>
|
||||
<Text style={styles.optionIconText}>📊</Text>
|
||||
</View>
|
||||
<Text style={[styles.optionLabel, { color: colorTokens.text }]}>
|
||||
频率
|
||||
</Text>
|
||||
<Text style={[styles.optionValueText, { color: colorTokens.textSecondary }]}>
|
||||
{frequency}
|
||||
</Text>
|
||||
<Text style={[styles.chevron, { color: colorTokens.textSecondary }]}>
|
||||
›
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* 频率选择器弹窗 */}
|
||||
<Modal
|
||||
visible={showFrequencyPicker}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setShowFrequencyPicker(false)}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={styles.modalBackdrop}
|
||||
activeOpacity={1}
|
||||
onPress={() => setShowFrequencyPicker(false)}
|
||||
/>
|
||||
<View style={styles.modalSheet}>
|
||||
<View style={{ height: 200 }}>
|
||||
<WheelPickerExpo
|
||||
height={200}
|
||||
width={150}
|
||||
initialSelectedIndex={frequency - 1}
|
||||
items={FREQUENCY_OPTIONS.map(num => ({ label: num.toString(), value: num }))}
|
||||
onChange={({ item }) => setFrequency(item.value)}
|
||||
backgroundColor={colorTokens.card}
|
||||
// selectedStyle={{ borderColor: colorTokens.primary, borderWidth: 2 }}
|
||||
haptics
|
||||
/>
|
||||
</View>
|
||||
{Platform.OS === 'ios' && (
|
||||
<View style={styles.modalActions}>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalBtn]}
|
||||
onPress={() => setShowFrequencyPicker(false)}
|
||||
>
|
||||
<Text style={styles.modalBtnText}>取消</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.modalBtn, styles.modalBtnPrimary]}
|
||||
onPress={() => setShowFrequencyPicker(false)}
|
||||
>
|
||||
<Text style={[styles.modalBtnText, styles.modalBtnTextPrimary]}>确定</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</Modal>
|
||||
|
||||
{/* 提醒设置 */}
|
||||
<View style={[styles.optionCard, { backgroundColor: colorTokens.card }]}>
|
||||
<View style={styles.optionHeader}>
|
||||
@@ -354,6 +456,34 @@ export const CreateGoalModal: React.FC<CreateGoalModalProps> = ({
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
gradientBackground: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
opacity: 0.6,
|
||||
},
|
||||
decorativeCircle1: {
|
||||
position: 'absolute',
|
||||
top: -20,
|
||||
right: -20,
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
backgroundColor: '#0EA5E9',
|
||||
opacity: 0.1,
|
||||
},
|
||||
decorativeCircle2: {
|
||||
position: 'absolute',
|
||||
bottom: -15,
|
||||
left: -15,
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#0EA5E9',
|
||||
opacity: 0.05,
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
@@ -378,15 +508,13 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
section: {
|
||||
marginBottom: 24,
|
||||
},
|
||||
iconTitleContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
marginBottom: 16,
|
||||
padding: 16,
|
||||
},
|
||||
iconPlaceholder: {
|
||||
width: 60,
|
||||
@@ -492,6 +620,8 @@ const styles = StyleSheet.create({
|
||||
bottom: 0,
|
||||
padding: 16,
|
||||
backgroundColor: '#FFFFFF',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
},
|
||||
|
||||
222
components/DateSelector.tsx
Normal file
222
components/DateSelector.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
import { getMonthDaysZh, getMonthTitleZh, getTodayIndexInMonth } from '@/utils/date';
|
||||
import dayjs from 'dayjs';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
export interface DateSelectorProps {
|
||||
/** 当前选中的日期索引 */
|
||||
selectedIndex?: number;
|
||||
/** 日期选择回调 */
|
||||
onDateSelect?: (index: number, date: Date) => void;
|
||||
/** 是否显示月份标题 */
|
||||
showMonthTitle?: boolean;
|
||||
/** 自定义月份标题 */
|
||||
monthTitle?: string;
|
||||
/** 是否禁用未来日期 */
|
||||
disableFutureDates?: boolean;
|
||||
/** 自定义样式 */
|
||||
style?: any;
|
||||
/** 容器样式 */
|
||||
containerStyle?: any;
|
||||
/** 日期项样式 */
|
||||
dayItemStyle?: any;
|
||||
/** 是否自动滚动到选中项 */
|
||||
autoScrollToSelected?: boolean;
|
||||
}
|
||||
|
||||
export const DateSelector: React.FC<DateSelectorProps> = ({
|
||||
selectedIndex: externalSelectedIndex,
|
||||
onDateSelect,
|
||||
showMonthTitle = true,
|
||||
monthTitle: externalMonthTitle,
|
||||
disableFutureDates = true,
|
||||
style,
|
||||
containerStyle,
|
||||
dayItemStyle,
|
||||
autoScrollToSelected = true,
|
||||
}) => {
|
||||
// 内部状态管理
|
||||
const [internalSelectedIndex, setInternalSelectedIndex] = useState(getTodayIndexInMonth());
|
||||
const selectedIndex = externalSelectedIndex ?? internalSelectedIndex;
|
||||
|
||||
// 获取日期数据
|
||||
const days = getMonthDaysZh();
|
||||
const monthTitle = externalMonthTitle ?? getMonthTitleZh();
|
||||
|
||||
// 滚动相关
|
||||
const daysScrollRef = useRef<ScrollView | null>(null);
|
||||
const [scrollWidth, setScrollWidth] = useState(0);
|
||||
const DAY_PILL_WIDTH = 48;
|
||||
const DAY_PILL_SPACING = 8;
|
||||
|
||||
// 滚动到指定索引
|
||||
const scrollToIndex = (index: number, animated = true) => {
|
||||
if (!daysScrollRef.current || scrollWidth === 0) return;
|
||||
|
||||
const itemWidth = DAY_PILL_WIDTH + DAY_PILL_SPACING;
|
||||
const baseOffset = index * itemWidth;
|
||||
const centerOffset = Math.max(0, baseOffset - (scrollWidth / 2 - DAY_PILL_WIDTH / 2));
|
||||
|
||||
// 确保不会滚动超出边界
|
||||
const maxScrollOffset = Math.max(0, (days.length * itemWidth) - scrollWidth);
|
||||
const finalOffset = Math.min(centerOffset, maxScrollOffset);
|
||||
|
||||
daysScrollRef.current.scrollTo({ x: finalOffset, animated });
|
||||
};
|
||||
|
||||
// 初始化时滚动到选中项
|
||||
useEffect(() => {
|
||||
if (scrollWidth > 0 && autoScrollToSelected) {
|
||||
scrollToIndex(selectedIndex, false);
|
||||
}
|
||||
}, [scrollWidth, selectedIndex, autoScrollToSelected]);
|
||||
|
||||
// 当选中索引变化时，滚动到对应位置
|
||||
useEffect(() => {
|
||||
if (scrollWidth > 0 && autoScrollToSelected) {
|
||||
scrollToIndex(selectedIndex, true);
|
||||
}
|
||||
}, [selectedIndex, autoScrollToSelected]);
|
||||
|
||||
// 处理日期选择
|
||||
const handleDateSelect = (index: number) => {
|
||||
const targetDate = days[index]?.date?.toDate();
|
||||
if (!targetDate) return;
|
||||
|
||||
// 检查是否为未来日期
|
||||
if (disableFutureDates && days[index].date.isAfter(dayjs(), 'day')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新内部状态（如果使用外部控制则不更新）
|
||||
if (externalSelectedIndex === undefined) {
|
||||
setInternalSelectedIndex(index);
|
||||
}
|
||||
|
||||
// 调用回调
|
||||
onDateSelect?.(index, targetDate);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.container, containerStyle]}>
|
||||
{showMonthTitle && (
|
||||
<Text style={styles.monthTitle}>{monthTitle}</Text>
|
||||
)}
|
||||
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.daysContainer}
|
||||
ref={daysScrollRef}
|
||||
onLayout={(e) => setScrollWidth(e.nativeEvent.layout.width)}
|
||||
style={style}
|
||||
>
|
||||
{days.map((d, i) => {
|
||||
const selected = i === selectedIndex;
|
||||
const isFutureDate = disableFutureDates && d.date.isAfter(dayjs(), 'day');
|
||||
|
||||
return (
|
||||
<View key={`${d.dayOfMonth}`} style={[styles.dayItemWrapper, dayItemStyle]}>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.dayPill,
|
||||
selected ? styles.dayPillSelected : styles.dayPillNormal,
|
||||
isFutureDate && styles.dayPillDisabled
|
||||
]}
|
||||
onPress={() => !isFutureDate && handleDateSelect(i)}
|
||||
activeOpacity={isFutureDate ? 1 : 0.8}
|
||||
disabled={isFutureDate}
|
||||
>
|
||||
<Text style={[
|
||||
styles.dayLabel,
|
||||
selected && styles.dayLabelSelected,
|
||||
isFutureDate && styles.dayLabelDisabled
|
||||
]}>
|
||||
{d.weekdayZh}
|
||||
</Text>
|
||||
<Text style={[
|
||||
styles.dayDate,
|
||||
selected && styles.dayDateSelected,
|
||||
isFutureDate && styles.dayDateDisabled
|
||||
]}>
|
||||
{d.dayOfMonth}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingVertical: 8,
|
||||
},
|
||||
monthTitle: {
|
||||
fontSize: 24,
|
||||
fontWeight: '800',
|
||||
color: '#192126',
|
||||
marginBottom: 14,
|
||||
},
|
||||
daysContainer: {
|
||||
paddingBottom: 8,
|
||||
},
|
||||
dayItemWrapper: {
|
||||
alignItems: 'center',
|
||||
width: 48,
|
||||
marginRight: 8,
|
||||
},
|
||||
dayPill: {
|
||||
width: 40,
|
||||
height: 60,
|
||||
borderRadius: 24,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
dayPillNormal: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
dayPillSelected: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
dayPillDisabled: {
|
||||
backgroundColor: 'transparent',
|
||||
opacity: 0.4,
|
||||
},
|
||||
dayLabel: {
|
||||
fontSize: 11,
|
||||
fontWeight: '700',
|
||||
color: 'gray',
|
||||
marginBottom: 2,
|
||||
},
|
||||
dayLabelSelected: {
|
||||
color: '#192126',
|
||||
},
|
||||
dayLabelDisabled: {
|
||||
color: 'gray',
|
||||
},
|
||||
dayDate: {
|
||||
fontSize: 12,
|
||||
fontWeight: '800',
|
||||
color: 'gray',
|
||||
},
|
||||
dayDateSelected: {
|
||||
color: '#192126',
|
||||
},
|
||||
dayDateDisabled: {
|
||||
color: 'gray',
|
||||
},
|
||||
});
|
||||
260
components/TaskCard.tsx
Normal file
260
components/TaskCard.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { TaskListItem } from '@/types/goals';
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
|
||||
interface TaskCardProps {
|
||||
task: TaskListItem;
|
||||
onPress?: (task: TaskListItem) => void;
|
||||
onComplete?: (task: TaskListItem) => void;
|
||||
onSkip?: (task: TaskListItem) => void;
|
||||
}
|
||||
|
||||
export const TaskCard: React.FC<TaskCardProps> = ({
|
||||
task,
|
||||
onPress,
|
||||
onComplete,
|
||||
onSkip,
|
||||
}) => {
|
||||
const theme = useColorScheme() ?? 'light';
|
||||
const colorTokens = Colors[theme];
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return '#10B981';
|
||||
case 'in_progress':
|
||||
return '#F59E0B';
|
||||
case 'overdue':
|
||||
return '#EF4444';
|
||||
case 'skipped':
|
||||
return '#6B7280';
|
||||
default:
|
||||
return '#3B82F6';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return '已完成';
|
||||
case 'in_progress':
|
||||
return '进行中';
|
||||
case 'overdue':
|
||||
return '已过期';
|
||||
case 'skipped':
|
||||
return '已跳过';
|
||||
default:
|
||||
return '待开始';
|
||||
}
|
||||
};
|
||||
|
||||
const getCategoryColor = (category?: string) => {
|
||||
if (!category) return '#6B7280';
|
||||
if (category.includes('运动') || category.includes('健身')) return '#EF4444';
|
||||
if (category.includes('工作')) return '#3B82F6';
|
||||
if (category.includes('健康')) return '#10B981';
|
||||
if (category.includes('财务')) return '#F59E0B';
|
||||
return '#6B7280';
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const today = new Date();
|
||||
const tomorrow = new Date(today);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
|
||||
if (date.toDateString() === today.toDateString()) {
|
||||
return '今天';
|
||||
} else if (date.toDateString() === tomorrow.toDateString()) {
|
||||
return '明天';
|
||||
} else {
|
||||
return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.container, { backgroundColor: colorTokens.background }]}
|
||||
onPress={() => onPress?.(task)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.header}>
|
||||
<View style={styles.titleContainer}>
|
||||
<Text style={[styles.title, { color: colorTokens.text }]} numberOfLines={2}>
|
||||
{task.title}
|
||||
</Text>
|
||||
{task.goal?.category && (
|
||||
<View style={[styles.categoryTag, { backgroundColor: getCategoryColor(task.goal.category) }]}>
|
||||
<Text style={styles.categoryText}>{task.goal?.category}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View style={[styles.statusTag, { backgroundColor: getStatusColor(task.status) }]}>
|
||||
<Text style={styles.statusText}>{getStatusText(task.status)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{task.description && (
|
||||
<Text style={[styles.description, { color: colorTokens.textSecondary }]} numberOfLines={2}>
|
||||
{task.description}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<View style={styles.progressContainer}>
|
||||
<View style={styles.progressInfo}>
|
||||
<Text style={[styles.progressText, { color: colorTokens.textSecondary }]}>
|
||||
进度: {task.currentCount}/{task.targetCount}
|
||||
</Text>
|
||||
<Text style={[styles.progressText, { color: colorTokens.textSecondary }]}>
|
||||
{task.progressPercentage}%
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.progressBar, { backgroundColor: colorTokens.border }]}>
|
||||
<View
|
||||
style={[
|
||||
styles.progressFill,
|
||||
{
|
||||
width: `${task.progressPercentage}%`,
|
||||
backgroundColor: getStatusColor(task.status),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<Text style={[styles.dateText, { color: colorTokens.textSecondary }]}>
|
||||
{formatDate(task.startDate)}
|
||||
</Text>
|
||||
|
||||
{task.status === 'pending' || task.status === 'in_progress' ? (
|
||||
<View style={styles.actionButtons}>
|
||||
<TouchableOpacity
|
||||
style={[styles.actionButton, styles.skipButton]}
|
||||
onPress={() => onSkip?.(task)}
|
||||
>
|
||||
<Text style={styles.skipButtonText}>跳过</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.actionButton, styles.completeButton]}
|
||||
onPress={() => onComplete?.(task)}
|
||||
>
|
||||
<Text style={styles.completeButtonText}>完成</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
marginBottom: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: 8,
|
||||
},
|
||||
titleContainer: {
|
||||
flex: 1,
|
||||
marginRight: 8,
|
||||
},
|
||||
title: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
marginBottom: 4,
|
||||
},
|
||||
categoryTag: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 12,
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
categoryText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
},
|
||||
statusTag: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
},
|
||||
statusText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
},
|
||||
description: {
|
||||
fontSize: 14,
|
||||
marginBottom: 12,
|
||||
lineHeight: 20,
|
||||
},
|
||||
progressContainer: {
|
||||
marginBottom: 12,
|
||||
},
|
||||
progressInfo: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 6,
|
||||
},
|
||||
progressText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
},
|
||||
progressBar: {
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
progressFill: {
|
||||
height: '100%',
|
||||
borderRadius: 3,
|
||||
},
|
||||
footer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
dateText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
},
|
||||
actionButtons: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
},
|
||||
actionButton: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 16,
|
||||
},
|
||||
skipButton: {
|
||||
backgroundColor: '#F3F4F6',
|
||||
},
|
||||
skipButtonText: {
|
||||
color: '#6B7280',
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
},
|
||||
completeButton: {
|
||||
backgroundColor: '#10B981',
|
||||
},
|
||||
completeButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
},
|
||||
});
|
||||
140
components/TaskProgressCard.tsx
Normal file
140
components/TaskProgressCard.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import { TaskListItem } from '@/types/goals';
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
interface TaskProgressCardProps {
|
||||
tasks: TaskListItem[];
|
||||
}
|
||||
|
||||
export const TaskProgressCard: React.FC<TaskProgressCardProps> = ({
|
||||
tasks,
|
||||
}) => {
|
||||
// 计算今日任务完成进度
|
||||
const todayTasks = tasks.filter(task => task.isToday);
|
||||
const completedTodayTasks = todayTasks.filter(task => task.status === 'completed');
|
||||
const progressPercentage = todayTasks.length > 0
|
||||
? Math.round((completedTodayTasks.length / todayTasks.length) * 100)
|
||||
: 0;
|
||||
|
||||
// 计算进度角度
|
||||
const progressAngle = (progressPercentage / 100) * 360;
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* 左侧内容 */}
|
||||
<View style={styles.leftContent}>
|
||||
<View style={styles.textContainer}>
|
||||
<Text style={styles.title}>今日目标</Text>
|
||||
<Text style={styles.subtitle}>加油，快完成啦!</Text>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
|
||||
{/* 右侧进度圆环 */}
|
||||
<View style={styles.progressContainer}>
|
||||
{/* 背景圆环 */}
|
||||
<View style={[styles.progressCircle, styles.progressBackground]} />
|
||||
|
||||
{/* 进度圆环 */}
|
||||
<View style={[styles.progressCircle, styles.progressFill]}>
|
||||
<View
|
||||
style={[
|
||||
styles.progressArc,
|
||||
{
|
||||
width: 68,
|
||||
height: 68,
|
||||
borderRadius: 34,
|
||||
borderWidth: 6,
|
||||
borderColor: '#8B5CF6',
|
||||
borderTopColor: progressAngle > 0 ? '#8B5CF6' : 'transparent',
|
||||
borderRightColor: progressAngle > 90 ? '#8B5CF6' : 'transparent',
|
||||
borderBottomColor: progressAngle > 180 ? '#8B5CF6' : 'transparent',
|
||||
borderLeftColor: progressAngle > 270 ? '#8B5CF6' : 'transparent',
|
||||
transform: [{ rotate: '-90deg' }],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 进度文字 */}
|
||||
<View style={styles.progressTextContainer}>
|
||||
<Text style={styles.progressText}>{progressPercentage}%</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: '#8B5CF6',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
marginHorizontal: 20,
|
||||
marginBottom: 20,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
shadowColor: '#8B5CF6',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 8,
|
||||
},
|
||||
leftContent: {
|
||||
flex: 1,
|
||||
marginRight: 20,
|
||||
},
|
||||
textContainer: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
title: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
marginBottom: 2,
|
||||
},
|
||||
subtitle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 14,
|
||||
fontWeight: '400',
|
||||
opacity: 0.9,
|
||||
},
|
||||
progressContainer: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
},
|
||||
progressCircle: {
|
||||
position: 'absolute',
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
},
|
||||
progressBackground: {
|
||||
borderWidth: 6,
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
progressFill: {
|
||||
borderWidth: 6,
|
||||
borderColor: 'transparent',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
progressArc: {
|
||||
position: 'absolute',
|
||||
},
|
||||
progressTextContainer: {
|
||||
position: 'absolute',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
progressText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
},
|
||||
});
|
||||
@@ -111,9 +111,7 @@ export function TimelineSchedule({ events, selectedDate, onEventPress }: Timelin
|
||||
height,
|
||||
left: TIME_LABEL_WIDTH + 24 + leftOffset, // 调整左偏移对齐
|
||||
width: eventWidth - 8, // 增加卡片间距
|
||||
backgroundColor: event.isCompleted
|
||||
? `${categoryColor}40`
|
||||
: `${categoryColor}80`,
|
||||
backgroundColor: '#FFFFFF', // 白色背景
|
||||
borderLeftColor: categoryColor,
|
||||
}
|
||||
]}
|
||||
@@ -121,29 +119,57 @@ export function TimelineSchedule({ events, selectedDate, onEventPress }: Timelin
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.eventContent}>
|
||||
<Text
|
||||
style={[
|
||||
styles.eventTitle,
|
||||
{
|
||||
color: event.isCompleted ? colorTokens.textMuted : colorTokens.text,
|
||||
textDecorationLine: event.isCompleted ? 'line-through' : 'none'
|
||||
}
|
||||
]}
|
||||
numberOfLines={shouldShowTimeRange ? 1 : 2} // 当显示时间时，标题只显示1行
|
||||
>
|
||||
{event.title}
|
||||
</Text>
|
||||
|
||||
{shouldShowTimeRange && (
|
||||
<Text style={[styles.eventTime, { color: colorTokens.textSecondary }]}>
|
||||
{dayjs(event.startTime).format('HH:mm')}
|
||||
{event.endTime && ` - ${dayjs(event.endTime).format('HH:mm')}`}
|
||||
{/* 顶部行：标题和分类标签 */}
|
||||
<View style={styles.eventHeader}>
|
||||
<Text
|
||||
style={[
|
||||
styles.eventTitle,
|
||||
{
|
||||
color: event.isCompleted ? colorTokens.textMuted : '#2C3E50',
|
||||
textDecorationLine: event.isCompleted ? 'line-through' : 'none',
|
||||
flex: 1,
|
||||
}
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{event.title}
|
||||
</Text>
|
||||
<View style={[styles.categoryTag, { backgroundColor: `${categoryColor}20` }]}>
|
||||
<Text style={[styles.categoryText, { color: categoryColor }]}>
|
||||
{event.category === 'workout' ? '运动' :
|
||||
event.category === 'finance' ? '财务' :
|
||||
event.category === 'personal' ? '个人' :
|
||||
event.category === 'work' ? '工作' :
|
||||
event.category === 'health' ? '健康' : '其他'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 底部行：时间和图标 */}
|
||||
{shouldShowTimeRange && (
|
||||
<View style={styles.eventFooter}>
|
||||
<View style={styles.timeContainer}>
|
||||
<Ionicons name="time-outline" size={14} color="#8E8E93" />
|
||||
<Text style={styles.eventTime}>
|
||||
{dayjs(event.startTime).format('HH:mm A')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.iconContainer}>
|
||||
{event.isCompleted ? (
|
||||
<Ionicons name="checkmark-circle" size={16} color="#34C759" />
|
||||
) : (
|
||||
<Ionicons name="star" size={16} color="#FF9500" />
|
||||
)}
|
||||
<Ionicons name="attach" size={16} color="#8E8E93" />
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{event.isCompleted && (
|
||||
{/* 完成状态指示 */}
|
||||
{event.isCompleted && !shouldShowTimeRange && (
|
||||
<View style={styles.completedIcon}>
|
||||
<Ionicons name="checkmark-circle" size={16} color={categoryColor} />
|
||||
<Ionicons name="checkmark-circle" size={16} color="#34C759" />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
@@ -301,32 +327,62 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
eventContainer: {
|
||||
position: 'absolute',
|
||||
borderRadius: 8,
|
||||
borderLeftWidth: 4,
|
||||
borderRadius: 12,
|
||||
borderLeftWidth: 0,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 6,
|
||||
elevation: 4,
|
||||
},
|
||||
eventContent: {
|
||||
flex: 1,
|
||||
padding: 8,
|
||||
padding: 12,
|
||||
justifyContent: 'space-between',
|
||||
|
||||
},
|
||||
eventHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 8,
|
||||
},
|
||||
eventTitle: {
|
||||
fontSize: 12,
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
lineHeight: 18,
|
||||
flex: 1,
|
||||
},
|
||||
categoryTag: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
},
|
||||
categoryText: {
|
||||
fontSize: 11,
|
||||
fontWeight: '600',
|
||||
lineHeight: 16,
|
||||
},
|
||||
eventFooter: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
timeContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
eventTime: {
|
||||
fontSize: 10,
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
marginTop: 2,
|
||||
marginLeft: 6,
|
||||
color: '#8E8E93',
|
||||
},
|
||||
iconContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
completedIcon: {
|
||||
position: 'absolute',
|
||||
|
||||
82
components/statistic/HealthDataCard.tsx
Normal file
82
components/statistic/HealthDataCard.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, View } from 'react-native';
|
||||
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
|
||||
|
||||
interface HealthDataCardProps {
|
||||
title: string;
|
||||
value: string;
|
||||
unit: string;
|
||||
icon: React.ReactNode;
|
||||
style?: object;
|
||||
}
|
||||
|
||||
const HealthDataCard: React.FC<HealthDataCardProps> = ({
|
||||
title,
|
||||
value,
|
||||
unit,
|
||||
icon,
|
||||
style
|
||||
}) => {
|
||||
return (
|
||||
<Animated.View
|
||||
entering={FadeIn.duration(300)}
|
||||
exiting={FadeOut.duration(300)}
|
||||
style={[styles.card, style]}
|
||||
>
|
||||
|
||||
<View style={styles.content}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
<View style={styles.valueContainer}>
|
||||
<Text style={styles.value}>{value}</Text>
|
||||
<Text style={styles.unit}>{unit}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
borderRadius: 16,
|
||||
shadowColor: '#000',
|
||||
paddingHorizontal: 16,
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 3.84,
|
||||
elevation: 5,
|
||||
marginVertical: 8,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
iconContainer: {
|
||||
marginRight: 16,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
},
|
||||
title: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
marginBottom: 4,
|
||||
},
|
||||
valueContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
value: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
},
|
||||
unit: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
marginLeft: 4,
|
||||
marginBottom: 2,
|
||||
},
|
||||
});
|
||||
|
||||
export default HealthDataCard;
|
||||
48
components/statistic/HeartRateCard.tsx
Normal file
48
components/statistic/HeartRateCard.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import HealthDataService from '../../services/healthData';
|
||||
import HealthDataCard from './HealthDataCard';
|
||||
|
||||
interface HeartRateCardProps {
|
||||
resetToken: number;
|
||||
style?: object;
|
||||
}
|
||||
|
||||
const HeartRateCard: React.FC<HeartRateCardProps> = ({
|
||||
resetToken,
|
||||
style
|
||||
}) => {
|
||||
const [heartRate, setHeartRate] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchHeartRate = async () => {
|
||||
const data = await HealthDataService.getHeartRate();
|
||||
setHeartRate(data);
|
||||
};
|
||||
|
||||
fetchHeartRate();
|
||||
}, [resetToken]);
|
||||
|
||||
const heartIcon = (
|
||||
<Ionicons name="heart" size={24} color="#EF4444" />
|
||||
);
|
||||
|
||||
return (
|
||||
<HealthDataCard
|
||||
title="心率"
|
||||
value={heartRate !== null ? heartRate.toString() : '--'}
|
||||
unit="bpm"
|
||||
icon={heartIcon}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
export default HeartRateCard;
|
||||
48
components/statistic/OxygenSaturationCard.tsx
Normal file
48
components/statistic/OxygenSaturationCard.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import HealthDataService from '../../services/healthData';
|
||||
import HealthDataCard from './HealthDataCard';
|
||||
|
||||
interface OxygenSaturationCardProps {
|
||||
resetToken: number;
|
||||
style?: object;
|
||||
}
|
||||
|
||||
const OxygenSaturationCard: React.FC<OxygenSaturationCardProps> = ({
|
||||
resetToken,
|
||||
style
|
||||
}) => {
|
||||
const [oxygenSaturation, setOxygenSaturation] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchOxygenSaturation = async () => {
|
||||
const data = await HealthDataService.getOxygenSaturation();
|
||||
setOxygenSaturation(data);
|
||||
};
|
||||
|
||||
fetchOxygenSaturation();
|
||||
}, [resetToken]);
|
||||
|
||||
const oxygenIcon = (
|
||||
<Ionicons name="water" size={24} color="#3B82F6" />
|
||||
);
|
||||
|
||||
return (
|
||||
<HealthDataCard
|
||||
title="血氧饱和度"
|
||||
value={oxygenSaturation !== null ? oxygenSaturation.toString() : '--'}
|
||||
unit="%"
|
||||
icon={oxygenIcon}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
export default OxygenSaturationCard;
|
||||
Reference in New Issue
Block a user