feat(ui): 添加底部标签栏自定义配置功能和药物堆叠展示

- 新增底部标签栏配置页面,支持切换标签显示/隐藏和恢复默认设置
- 实现已服用药物的堆叠卡片展示,优化药物列表视觉层次
- 集成Redux状态管理底部标签栏配置,支持本地持久化
- 优化个人中心页面背景渐变效果,移除装饰性圆圈元素
- 更新启动页和应用图标为新的品牌视觉
- 药物详情页AI分析加载动画替换为Lottie动画
- 调整药物卡片圆角半径提升视觉一致性
- 新增多语言支持(中英文)用于标签栏配置界面

主要改进:
1. 用户可以自定义底部导航栏显示内容
2. 已完成的药物以堆叠形式展示,节省空间
3. 配置数据通过AsyncStorage持久化保存
4. 支持默认配置恢复功能
This commit is contained in:
richarjiang
2025-11-20 17:55:17 +08:00
parent 84abfa2506
commit 29942feee9
25 changed files with 906 additions and 86 deletions

View File

@@ -34,6 +34,7 @@ import { Image } from 'expo-image';
import * as ImagePicker from 'expo-image-picker';
import { LinearGradient } from 'expo-linear-gradient';
import { useLocalSearchParams, useRouter } from 'expo-router';
import LottieView from 'lottie-react-native';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
ActivityIndicator,
@@ -1299,8 +1300,13 @@ export default function MedicationDetailScreen() {
</View>
{aiAnalysisLoading && (
<View style={styles.aiLoadingRow}>
<ActivityIndicator color={colors.primary} size="small" />
<View style={styles.aiLoadingContainer}>
<LottieView
source={require('@/assets/lottie/loading-blue.json')}
autoPlay
loop
style={styles.aiLoadingAnimation}
/>
<Text style={[styles.aiLoadingText, { color: colors.textSecondary }]}>
{t('medications.detail.aiAnalysis.analyzing')}
</Text>
@@ -2276,13 +2282,19 @@ const styles = StyleSheet.create({
fontSize: 12,
fontWeight: '700',
},
aiLoadingRow: {
flexDirection: 'row',
aiLoadingContainer: {
alignItems: 'center',
gap: 8,
justifyContent: 'center',
paddingVertical: 24,
gap: 12,
},
aiLoadingAnimation: {
width: 120,
height: 120,
},
aiLoadingText: {
fontSize: 13,
fontSize: 14,
fontWeight: '500',
},
aiHeroRow: {
flexDirection: 'row',