feat(medications): 添加用药管理功能
- 新增用药标签页,包含完整的用药记录界面 - 实现用药卡片组件,支持状态显示(已服用/未服用/已错过) - 增强日期选择器,添加"回到今天"快捷功能 - 添加用药相关的图标支持(pills.fill, plus) - 集成用药路由配置,支持标签页导航 该功能为用户提供完整的用药管理体验,包括用药记录、状态跟踪和日期筛选等核心功能。
This commit is contained in:
@@ -58,6 +58,17 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
|
||||
const days = getMonthDaysZh(currentMonth);
|
||||
const monthTitle = externalMonthTitle ?? getMonthTitleZh(currentMonth);
|
||||
|
||||
// 判断当前选中的日期是否是今天
|
||||
const isSelectedDateToday = () => {
|
||||
const today = dayjs();
|
||||
const selectedDate = days[selectedIndex]?.date;
|
||||
|
||||
if (!selectedDate) return false;
|
||||
|
||||
// 检查是否是同一天且在同一个月
|
||||
return selectedDate.isSame(today, 'day') && currentMonth.isSame(today, 'month');
|
||||
};
|
||||
|
||||
// 滚动相关
|
||||
const daysScrollRef = useRef<ScrollView | null>(null);
|
||||
const [scrollWidth, setScrollWidth] = useState(0);
|
||||
@@ -191,20 +202,47 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const handleGoToday = () => {
|
||||
const today = dayjs();
|
||||
setCurrentMonth(today);
|
||||
const todayDays = getMonthDaysZh(today);
|
||||
const newSelectedIndex = todayDays.findIndex(day => day.dayOfMonth === today.date());
|
||||
|
||||
if (newSelectedIndex !== -1) {
|
||||
if (externalSelectedIndex === undefined) {
|
||||
setInternalSelectedIndex(newSelectedIndex);
|
||||
}
|
||||
const todayDate = today.toDate();
|
||||
setPickerDate(todayDate);
|
||||
onDateSelect?.(newSelectedIndex, todayDate);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.container, containerStyle]}>
|
||||
{showMonthTitle && (
|
||||
<View style={styles.monthTitleContainer}>
|
||||
<Text style={styles.monthTitle}>{monthTitle}</Text>
|
||||
{showCalendarIcon && (
|
||||
<TouchableOpacity
|
||||
onPress={openDatePicker}
|
||||
style={styles.calendarIconButton}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Ionicons name="calendar-outline" size={14} color="#666666" />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
<View style={styles.monthActions}>
|
||||
{!isSelectedDateToday() && (
|
||||
<TouchableOpacity
|
||||
onPress={handleGoToday}
|
||||
style={styles.todayButton}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={styles.todayButtonText}>回到今天</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{showCalendarIcon && (
|
||||
<TouchableOpacity
|
||||
onPress={openDatePicker}
|
||||
style={styles.calendarIconButton}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Ionicons name="calendar-outline" size={14} color="#666666" />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
@@ -305,9 +343,13 @@ const styles = StyleSheet.create({
|
||||
monthTitleContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 8,
|
||||
},
|
||||
monthActions: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
monthTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: '800',
|
||||
@@ -318,6 +360,18 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 6,
|
||||
marginLeft: 4
|
||||
},
|
||||
todayButton: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#EEF2FF',
|
||||
marginRight: 8,
|
||||
},
|
||||
todayButtonText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
color: '#4C1D95',
|
||||
},
|
||||
daysContainer: {
|
||||
paddingBottom: 8,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user