feat(用药管理): 集成AI智能分析功能，提供用药依从性深度洞察和专业健康建议

components/StepsCard.tsx

@@ -1,14 +1,17 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  Animated,
-  InteractionManager,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  ViewStyle
+    Animated,
+    InteractionManager,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View,
+    ViewStyle
 } from 'react-native';
 
+import { useAppDispatch, useAppSelector } from '@/hooks/redux';
+import { ChallengeType } from '@/services/challengesApi';
+import { reportChallengeProgress, selectChallengeList } from '@/store/challengesSlice';
 import { fetchHourlyStepSamples, fetchStepCount, HourlyStepData } from '@/utils/health';
 import { logger } from '@/utils/logger';
 import dayjs from 'dayjs';
@@ -20,8 +23,8 @@ import { AnimatedNumber } from './AnimatedNumber';
 // import Svg, { Rect } from 'react-native-svg';
 
 interface StepsCardProps {
-  curDate: Date
-  stepGoal: number;
+  curDate: Date;
+  stepGoal?: number;
   style?: ViewStyle;
 }
 
@@ -31,9 +34,20 @@ const StepsCard: React.FC<StepsCardProps> = ({
 }) => {
   const { t } = useTranslation();
   const router = useRouter();
+  const dispatch = useAppDispatch();
+  const challenges = useAppSelector(selectChallengeList);
 
-  const [stepCount, setStepCount] = useState(0)
-  const [hourlySteps, setHourSteps] = useState<HourlyStepData[]>([])
+  const [stepCount, setStepCount] = useState(0);
+  const [hourlySteps, setHourSteps] = useState<HourlyStepData[]>([]);
+  
+  // 过滤出已参加的步数挑战
+  const joinedStepsChallenges = useMemo(
+    () => challenges.filter((challenge) => challenge.type === ChallengeType.STEP && challenge.isJoined && challenge.status === 'ongoing'),
+    [challenges]
+  );
+  
+  // 跟踪上次上报的记录，避免重复上报
+  const lastReportedRef = useRef<{ date: string; value: number } | null>(null);
 
 
   const getStepData = useCallback(async (date: Date) => {
@@ -59,6 +73,42 @@ const StepsCard: React.FC<StepsCardProps> = ({
     }
   }, [curDate]);
 
+  // 步数挑战进度上报逻辑
+  useEffect(() => {
+    if (!curDate || !stepCount || !joinedStepsChallenges.length) {
+      return;
+    }
+
+    // 如果当前日期不是今天，不上报
+    if (!dayjs(curDate).isSame(dayjs(), 'day')) {
+      return;
+    }
+
+    const dateKey = dayjs(curDate).format('YYYY-MM-DD');
+    const lastReport = lastReportedRef.current;
+
+    if (lastReport && lastReport.date === dateKey && lastReport.value === stepCount) {
+      return;
+    }
+
+    const reportProgress = async () => {
+      const stepsChallenge = joinedStepsChallenges.find((c) => c.type === ChallengeType.STEP);
+      if (!stepsChallenge) {
+        return;
+      }
+
+      try {
+        await dispatch(reportChallengeProgress({ id: stepsChallenge.id, value: stepCount })).unwrap();
+      } catch (error) {
+        logger.warn('StepsCard: Challenge progress report failed', { error, challengeId: stepsChallenge.id });
+      }
+
+      lastReportedRef.current = { date: dateKey, value: stepCount };
+    };
+
+    reportProgress();
+  }, [dispatch, joinedStepsChallenges, curDate, stepCount]);
+
   // 优化：减少动画值数量，只为有数据的小时创建动画
   const animatedValues = useRef<Map<number, Animated.Value>>(new Map()).current;
 

components/StepsCardOptimized.tsx

@@ -1,323 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Animated,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-  InteractionManager
-} from 'react-native';
-
-import { fetchHourlyStepSamples, fetchStepCount, HourlyStepData } from '@/utils/health';
-import { logger } from '@/utils/logger';
-import dayjs from 'dayjs';
-import { Image } from 'expo-image';
-import { useRouter } from 'expo-router';
-import { AnimatedNumber } from './AnimatedNumber';
-
-interface StepsCardProps {
-  curDate: Date
-  stepGoal: number;
-  style?: ViewStyle;
-}
-
-const StepsCardOptimized: React.FC<StepsCardProps> = ({
-  curDate,
-  style,
-}) => {
-  const router = useRouter();
-
-  const [stepCount, setStepCount] = useState(0)
-  const [hourlySteps, setHourSteps] = useState<HourlyStepData[]>([])
-  const [isLoading, setIsLoading] = useState(false)
-
-  // 优化：使用debounce减少频繁的数据获取
-  const debounceTimer = useRef<NodeJS.Timeout | null>(null);
-
-  const getStepData = useCallback(async (date: Date) => {
-    try {
-      setIsLoading(true);
-      logger.info('获取步数数据...');
-
-      // 先获取步数，立即更新UI
-      const steps = await fetchStepCount(date);
-      setStepCount(steps);
-
-      // 清除之前的定时器
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current);
-      }
-
-      // 使用 InteractionManager 在空闲时获取更复杂的小时数据
-      InteractionManager.runAfterInteractions(async () => {
-        try {
-          const hourly = await fetchHourlyStepSamples(date);
-          setHourSteps(hourly);
-        } catch (error) {
-          logger.error('获取小时步数数据失败:', error);
-        } finally {
-          setIsLoading(false);
-        }
-      });
-
-    } catch (error) {
-      logger.error('获取步数数据失败:', error);
-      setIsLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (curDate) {
-      getStepData(curDate);
-    }
-  }, [curDate, getStepData]);
-
-  // 优化：减少动画值数量，只为有数据的小时创建动画
-  const animatedValues = useRef<Map<number, Animated.Value>>(new Map()).current;
-
-  // 优化：简化柱状图数据计算，减少计算量
-  const chartData = useMemo(() => {
-    if (!hourlySteps || hourlySteps.length === 0) {
-      return Array.from({ length: 24 }, (_, i) => ({ hour: i, steps: 0, height: 0 }));
-    }
-
-    // 优化：只计算有数据的小时的最大步数
-    const activeSteps = hourlySteps.filter(data => data.steps > 0);
-    if (activeSteps.length === 0) {
-      return Array.from({ length: 24 }, (_, i) => ({ hour: i, steps: 0, height: 0 }));
-    }
-
-    const maxSteps = Math.max(...activeSteps.map(data => data.steps));
-    const maxHeight = 20;
-
-    return hourlySteps.map(data => ({
-      ...data,
-      height: data.steps > 0 ? (data.steps / maxSteps) * maxHeight : 0
-    }));
-  }, [hourlySteps]);
-
-  // 获取当前小时
-  const currentHour = new Date().getHours();
-
-  // 优化：延迟执行动画，减少UI阻塞
-  useEffect(() => {
-    const hasData = chartData && chartData.length > 0 && chartData.some(data => data.steps > 0);
-
-    if (hasData && !isLoading) {
-      // 使用 InteractionManager 确保动画不会阻塞用户交互
-      InteractionManager.runAfterInteractions(() => {
-        // 只为有数据的小时创建和执行动画
-        const animations = chartData
-          .map((data, index) => {
-            if (data.steps > 0) {
-              // 懒创建动画值
-              if (!animatedValues.has(index)) {
-                animatedValues.set(index, new Animated.Value(0));
-              }
-
-              const animValue = animatedValues.get(index)!;
-              animValue.setValue(0);
-
-              // 使用更高性能的timing动画替代spring
-              return Animated.timing(animValue, {
-                toValue: 1,
-                duration: 200, // 减少动画时长
-                useNativeDriver: false,
-              });
-            }
-            return null;
-          })
-          .filter(Boolean) as Animated.CompositeAnimation[];
-
-        // 批量执行动画，提高性能
-        if (animations.length > 0) {
-          Animated.stagger(50, animations).start();
-        }
-      });
-    }
-  }, [chartData, animatedValues, isLoading]);
-
-  // 优化：使用React.memo包装复杂的渲染组件
-  const ChartBars = useMemo(() => {
-    return chartData.map((data, index) => {
-      // 判断是否是当前小时或者有活动的小时
-      const isActive = data.steps > 0;
-      const isCurrent = index <= currentHour;
-
-      // 优化：只为有数据的柱体创建动画插值
-      const animValue = animatedValues.get(index);
-      let animatedScale: Animated.AnimatedInterpolation<number> | undefined;
-      let animatedOpacity: Animated.AnimatedInterpolation<number> | undefined;
-
-      if (animValue && isActive) {
-        animatedScale = animValue.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 1],
-        });
-
-        animatedOpacity = animValue.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 1],
-        });
-      }
-
-      return (
-        <View key={`bar-container-${index}`} style={styles.barContainer}>
-          {/* 背景柱体 - 始终显示，使用相似色系的淡色 */}
-          <View
-            style={[
-              styles.chartBar,
-              {
-                height: 20, // 背景柱体占满整个高度
-                backgroundColor: isCurrent ? '#FFF4E6' : '#FFF8F0', // 更淡的相似色系
-              }
-            ]}
-          />
-
-          {/* 数据柱体 - 只有当有数据时才显示并执行动画 */}
-          {isActive && (
-            <Animated.View
-              style={[
-                styles.chartBar,
-                {
-                  height: data.height,
-                  backgroundColor: isCurrent ? '#FFC365' : '#FFEBCB',
-                  transform: animatedScale ? [{ scaleY: animatedScale }] : undefined,
-                  opacity: animatedOpacity || 1,
-                }
-              ]}
-            />
-          )}
-        </View>
-      );
-    });
-  }, [chartData, currentHour, animatedValues]);
-
-  const CardContent = () => (
-    <>
-      {/* 标题和步数显示 */}
-      <View style={styles.header}>
-        <Image
-          source={require('@/assets/images/icons/icon-step.png')}
-          style={styles.titleIcon}
-        />
-        <Text style={styles.title}>步数</Text>
-        {isLoading && <Text style={styles.loadingText}>加载中...</Text>}
-      </View>
-
-      {/* 柱状图 */}
-      <View style={styles.chartContainer}>
-        <View style={styles.chartWrapper}>
-          <View style={styles.chartArea}>
-            {ChartBars}
-          </View>
-        </View>
-      </View>
-
-      {/* 步数和目标显示 */}
-      <View style={styles.statsContainer}>
-        <AnimatedNumber
-          value={stepCount || 0}
-          style={styles.stepCount}
-          format={(v) => stepCount !== null ? `${Math.round(v)}` : '——'}
-          resetToken={stepCount}
-        />
-      </View>
-    </>
-  );
-
-  return (
-    <TouchableOpacity
-      style={[styles.container, style]}
-      onPress={() => {
-        // 传递当前日期参数到详情页
-        const dateParam = dayjs(curDate).format('YYYY-MM-DD');
-        router.push(`/steps/detail?date=${dateParam}`);
-      }}
-      activeOpacity={0.8}
-    >
-      <CardContent />
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-between',
-    borderRadius: 20,
-    padding: 16,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    shadowOpacity: 0.08,
-    shadowRadius: 20,
-    elevation: 8,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  titleIcon: {
-    width: 16,
-    height: 16,
-    marginRight: 6,
-    resizeMode: 'contain',
-  },
-  title: {
-    fontSize: 14,
-    color: '#192126',
-    fontWeight: '600'
-  },
-  loadingText: {
-    fontSize: 10,
-    color: '#666',
-    marginLeft: 8,
-  },
-  chartContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    marginTop: 6
-  },
-  chartWrapper: {
-    width: '100%',
-    alignItems: 'center',
-  },
-  chartArea: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    height: 20,
-    width: '100%',
-    maxWidth: 240,
-    justifyContent: 'space-between',
-    paddingHorizontal: 4,
-  },
-  barContainer: {
-    width: 4,
-    height: 20,
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    position: 'relative',
-  },
-  chartBar: {
-    width: 4,
-    borderRadius: 1,
-    position: 'absolute',
-    bottom: 0,
-  },
-  statsContainer: {
-    alignItems: 'flex-start',
-    marginTop: 6
-  },
-  stepCount: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#192126',
-  },
-});
-
-export default StepsCardOptimized;

components/ui/IconSymbol.tsx

@@ -30,6 +30,9 @@ const MAPPING = {
   'info.circle': 'info',
   'magnifyingglass': 'search',
   'xmark': 'close',
+  'chevron.left': 'chevron-left',
+  'sparkles': 'auto-awesome',
+  'arrow.clockwise': 'refresh',
 } as IconMapping;
 
 /**

components/ui/MedicationAiSummaryInfoSheet.tsx

@@ -0,0 +1,454 @@
+import { Ionicons } from '@expo/vector-icons';
+import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
+import * as Haptics from 'expo-haptics';
+import { Image } from 'expo-image';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  BackHandler,
+  Dimensions,
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View
+} from 'react-native';
+import ImageViewing from 'react-native-image-viewing';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useI18n } from '../../hooks/useI18n';
+import { triggerLightHaptic } from '../../utils/haptics';
+
+const { height: screenHeight } = Dimensions.get('window');
+
+interface MedicationAiSummaryInfoSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  loading?: boolean;
+}
+
+/**
+ * AI 用药总结介绍弹窗组件
+ * 用于展示 AI 用药总结功能的介绍和说明
+ */
+export function MedicationAiSummaryInfoSheet({
+  visible,
+  onClose,
+  onConfirm,
+  loading = false,
+}: MedicationAiSummaryInfoSheetProps) {
+  const { t } = useI18n();
+  const insets = useSafeAreaInsets();
+  const translateY = useRef(new Animated.Value(screenHeight)).current;
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const [showImagePreview, setShowImagePreview] = useState(false);
+  
+  // 预览图片 - 直接使用 require 资源
+  const imageSource = require('@/assets/images/medicine/medicine-ai-summary.png');
+
+  useEffect(() => {
+    if (visible) {
+      translateY.setValue(screenHeight);
+      backdropOpacity.setValue(0);
+
+      Animated.parallel([
+        Animated.timing(backdropOpacity, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+        Animated.spring(translateY, {
+          toValue: 0,
+          useNativeDriver: true,
+          bounciness: 6,
+          speed: 12,
+        }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(backdropOpacity, {
+          toValue: 0,
+          duration: 150,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: screenHeight,
+          duration: 240,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        translateY.setValue(screenHeight);
+        backdropOpacity.setValue(0);
+      });
+    }
+  }, [visible, backdropOpacity, translateY]);
+
+  // 处理Android返回键关闭图片预览
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+      if (showImagePreview) {
+        setShowImagePreview(false);
+        return true; // 阻止默认返回行为
+      }
+      return false;
+    });
+
+    return () => backHandler.remove();
+  }, [showImagePreview]);
+
+  // 处理图片预览
+  const handleImagePreview = useCallback(() => {
+    triggerLightHaptic();
+    setShowImagePreview(true);
+  }, []);
+
+  const handleClose = () => {
+    // 安全地执行触觉反馈，避免因触觉反馈失败导致页面卡顿
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch((error) => {
+      console.warn('[AI_SUMMARY] Haptic feedback failed:', error);
+    });
+    onClose();
+  };
+
+  const handleConfirm = () => {
+    if (loading) return;
+    // 安全地执行触觉反馈，避免因触觉反馈失败导致页面卡顿
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success).catch((error) => {
+      console.warn('[AI_SUMMARY] Haptic feedback failed:', error);
+    });
+    onConfirm();
+  };
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+      onRequestClose={handleClose}
+      statusBarTranslucent
+    >
+      <View style={styles.overlay}>
+        <Animated.View
+          style={[
+            styles.backdrop,
+            {
+              opacity: backdropOpacity,
+            },
+          ]}
+        >
+          <TouchableOpacity style={StyleSheet.absoluteFillObject} activeOpacity={1} onPress={handleClose} />
+        </Animated.View>
+
+        <Animated.View
+          style={[
+            styles.sheet,
+            {
+              transform: [{ translateY }],
+              paddingBottom: Math.max(insets.bottom, 20),
+            },
+          ]}
+        >
+          <View style={styles.handle} />
+          
+          {/* 图标和标题 */}
+          <View style={styles.header}>
+            <View style={styles.iconContainer}>
+              <Ionicons name="sparkles" size={24} color="#8B5CF6" />
+            </View>
+            <Text style={styles.title}>{t('medications.aiSummaryInfo.title')}</Text>
+          </View>
+
+          {/* 介绍图片区域 */}
+          <View style={styles.imageContainer}>
+            <Image
+              source={require('@/assets/images/medicine/medicine-ai-summary.png')}
+              style={styles.introImage}
+              contentFit='contain'
+            />
+            {/* 右上角查看大图提示按钮 */}
+            <TouchableOpacity
+              style={styles.viewImageButton}
+              onPress={handleImagePreview}
+              activeOpacity={0.8}
+            >
+              {isLiquidGlassAvailable() ? (
+                <GlassView
+                  style={styles.glassViewButton}
+                  glassEffectStyle="clear"
+                  tintColor="rgba(255, 255, 255, 0.3)"
+                  isInteractive={true}
+                >
+                  <Ionicons name="expand-outline" size={16} color="#333" />
+                </GlassView>
+              ) : (
+                <View style={[styles.glassViewButton, styles.fallbackViewButton]}>
+                  <Ionicons name="expand-outline" size={16} color="#333" />
+                </View>
+              )}
+            </TouchableOpacity>
+          </View>
+
+          {/* 功能介绍内容 */}
+          <View style={styles.contentContainer}>
+            <View style={styles.featureItem}>
+              <View style={styles.featureIcon}>
+                <Ionicons name="analytics" size={20} color="#8B5CF6" />
+              </View>
+              <View style={styles.featureContent}>
+                <Text style={styles.featureTitle}>{t('medications.aiSummaryInfo.features.intelligent.title')}</Text>
+                <Text style={styles.featureDescription}>
+                  {t('medications.aiSummaryInfo.features.intelligent.description')}
+                </Text>
+              </View>
+            </View>
+
+            <View style={styles.featureItem}>
+              <View style={styles.featureIcon}>
+                <Ionicons name="time" size={20} color="#8B5CF6" />
+              </View>
+              <View style={styles.featureContent}>
+                <Text style={styles.featureTitle}>{t('medications.aiSummaryInfo.features.tracking.title')}</Text>
+                <Text style={styles.featureDescription}>
+                  {t('medications.aiSummaryInfo.features.tracking.description')}
+                </Text>
+              </View>
+            </View>
+
+            <View style={styles.featureItem}>
+              <View style={styles.featureIcon}>
+                <Ionicons name="shield-checkmark" size={20} color="#8B5CF6" />
+              </View>
+              <View style={styles.featureContent}>
+                <Text style={styles.featureTitle}>{t('medications.aiSummaryInfo.features.professional.title')}</Text>
+                <Text style={styles.featureDescription}>
+                  {t('medications.aiSummaryInfo.features.professional.description')}
+                </Text>
+              </View>
+            </View>
+          </View>
+
+          {/* 确认按钮 - 支持 Liquid Glass */}
+          <View style={styles.actions}>
+            <TouchableOpacity
+              activeOpacity={0.9}
+              onPress={handleConfirm}
+              disabled={loading}
+            >
+              {isLiquidGlassAvailable() ? (
+                <GlassView
+                  style={styles.confirmButton}
+                  glassEffectStyle="regular"
+                  tintColor="rgba(139, 92, 246, 0.8)"
+                  isInteractive={true}
+                >
+                  {loading ? (
+                    <ActivityIndicator size="small" color="#fff" />
+                  ) : (
+                    <>
+                      <Ionicons name="arrow-forward" size={20} color="#fff" />
+                      <Text style={styles.confirmText}>{t('medications.aiSummaryInfo.confirmButton')}</Text>
+                    </>
+                  )}
+                </GlassView>
+              ) : (
+                <View style={[styles.confirmButton, styles.fallbackButton]}>
+                  {loading ? (
+                    <ActivityIndicator size="small" color="#fff" />
+                  ) : (
+                    <>
+                      <Ionicons name="arrow-forward" size={20} color="#fff" />
+                      <Text style={styles.confirmText}>{t('medications.aiSummaryInfo.confirmButton')}</Text>
+                    </>
+                  )}
+                </View>
+              )}
+            </TouchableOpacity>
+          </View>
+        </Animated.View>
+      </View>
+      
+      {/* 图片预览 */}
+      <ImageViewing
+        images={[imageSource]}
+        imageIndex={0}
+        visible={showImagePreview}
+        onRequestClose={() => setShowImagePreview(false)}
+        swipeToCloseEnabled={true}
+        doubleTapToZoomEnabled={true}
+        FooterComponent={() => (
+          <View style={styles.imageViewerFooter}>
+            <TouchableOpacity
+              style={styles.imageViewerFooterButton}
+              onPress={() => setShowImagePreview(false)}
+            >
+              <Text style={styles.imageViewerFooterButtonText}>{t('medications.detail.imageViewer.close')}</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      />
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'transparent',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(15, 23, 42, 0.45)',
+  },
+  sheet: {
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 28,
+    borderTopRightRadius: 28,
+    paddingHorizontal: 24,
+    paddingTop: 16,
+    shadowColor: '#000',
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: -4 },
+    elevation: 16,
+    gap: 20,
+  },
+  handle: {
+    width: 50,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#E5E7EB',
+    alignSelf: 'center',
+    marginBottom: 8,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#F3E8FF',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#111827',
+  },
+  imageContainer: {
+    width: '100%',
+    height: 380,
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: '#F9FAFB',
+  },
+  introImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 16,
+  },
+  contentContainer: {
+    gap: 16,
+    paddingVertical: 8,
+  },
+  featureItem: {
+    flexDirection: 'row',
+    gap: 12,
+    alignItems: 'flex-start',
+  },
+  featureIcon: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: '#F3E8FF',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  featureContent: {
+    flex: 1,
+  },
+  featureTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#111827',
+    marginBottom: 4,
+  },
+  featureDescription: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: '#6B7280',
+  },
+  actions: {
+    marginTop: 8,
+  },
+  confirmButton: {
+    height: 56,
+    borderRadius: 18,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    overflow: 'hidden', // 保证玻璃边界圆角效果
+  },
+  fallbackButton: {
+    backgroundColor: '#8B5CF6',
+    shadowColor: 'rgba(139, 92, 246, 0.45)',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 1,
+    shadowRadius: 20,
+    elevation: 6,
+  },
+  confirmText: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#fff',
+  },
+  // 图片预览相关样式
+  viewImageButton: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    zIndex: 1,
+  },
+  glassViewButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  fallbackViewButton: {
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.1)',
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+  },
+  imageViewerFooter: {
+    position: 'absolute',
+    bottom: 60,
+    left: 20,
+    right: 20,
+    alignItems: 'center',
+    zIndex: 1,
+  },
+  imageViewerFooterButton: {
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 20,
+  },
+  imageViewerFooterButtonText: {
+    color: '#FFF',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});