feat(medications): 添加用药管理功能

- 新增用药标签页,包含完整的用药记录界面
- 实现用药卡片组件,支持状态显示(已服用/未服用/已错过)
- 增强日期选择器,添加"回到今天"快捷功能
- 添加用药相关的图标支持(pills.fill, plus)
- 集成用药路由配置,支持标签页导航

该功能为用户提供完整的用药管理体验,包括用药记录、状态跟踪和日期筛选等核心功能。
This commit is contained in:
richarjiang
2025-11-06 17:51:06 +08:00
parent a228280ca4
commit 3aafc50702
6 changed files with 798 additions and 10 deletions

View File

@@ -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,
},