feat: 添加食物分析结果页面的图片预览功能，优化记录栏显示逻辑

app/food/analysis-result.tsx

@@ -6,11 +6,13 @@ import { useAppSelector } from '@/hooks/redux';
 import { addDietRecord, type CreateDietRecordDto, type MealType } from '@/services/dietRecords';
 import { selectFoodRecognitionResult } from '@/store/foodRecognitionSlice';
 import { Ionicons } from '@expo/vector-icons';
+import dayjs from 'dayjs';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useEffect, useState } from 'react';
 import {
   ActivityIndicator,
+  BackHandler,
   Image,
   Modal,
   ScrollView,
@@ -19,7 +21,7 @@ import {
   TouchableOpacity,
   View
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import ImageViewing from 'react-native-image-viewing';
 
 
 // 模拟食物摄入列表数据
@@ -73,17 +75,36 @@ export default function FoodAnalysisResultScreen() {
     imageUri?: string;
     mealType?: string;
     recognitionId?: string;
+    hideRecordBar?: string;
   }>();
 
   const [foodItems, setFoodItems] = useState(mockFoodItems);
   const [currentMealType, setCurrentMealType] = useState<MealType>((params.mealType as MealType) || 'breakfast');
   const [showMealSelector, setShowMealSelector] = useState(false);
   const [isRecording, setIsRecording] = useState(false);
-  const { imageUri, recognitionId } = params;
+  const [showImagePreview, setShowImagePreview] = useState(false);
+  const [animationTrigger, setAnimationTrigger] = useState(0);
+  const { imageUri, recognitionId, hideRecordBar } = params;
+
+  // 判断是否隐藏记录栏（默认显示）
+  const shouldHideRecordBar = hideRecordBar === 'true';
 
   // 从 Redux 获取识别结果
   const recognitionResult = useAppSelector(recognitionId ? selectFoodRecognitionResult(recognitionId) : () => null);
 
+  // 处理Android返回键关闭图片预览
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+      if (showImagePreview) {
+        setShowImagePreview(false);
+        return true; // 阻止默认返回行为
+      }
+      return false;
+    });
+
+    return () => backHandler.remove();
+  }, [showImagePreview]);
+
   // 处理识别结果数据
   useEffect(() => {
     if (recognitionResult) {
@@ -116,9 +137,19 @@ export default function FoodAnalysisResultScreen() {
           setCurrentMealType(mealTypeFromApi);
         }
       }
+
+      // 触发营养圆环动画
+      setAnimationTrigger(prev => prev + 1);
     }
   }, [recognitionResult]);
 
+  // 当食物项发生变化时也触发动画
+  useEffect(() => {
+    if (foodItems.length > 0) {
+      setAnimationTrigger(prev => prev + 1);
+    }
+  }, [foodItems]);
+
   const handleSaveToDiary = async () => {
     if (isRecording || foodItems.length === 0) return;
 
@@ -188,17 +219,17 @@ export default function FoodAnalysisResultScreen() {
     { key: 'snack' as const, label: '加餐', color: '#FF9800' },
   ];
 
-  if (!imageUri) {
+  if (!imageUri && !recognitionResult) {
     return (
-      <SafeAreaView style={styles.container}>
+      <View style={styles.container}>
         <HeaderBar
           title="分析结果"
           onBack={() => router.back()}
         />
         <View style={styles.errorContainer}>
-          <Text style={styles.errorText}>未找到图片</Text>
+          <Text style={styles.errorText}>未找到图片或识别结果</Text>
         </View>
-      </SafeAreaView>
+      </View>
     );
   }
 
@@ -206,17 +237,12 @@ export default function FoodAnalysisResultScreen() {
     <View style={styles.container}>
       {/* 背景渐变 */}
       <LinearGradient
-        colors={['#f5e5fbff', '#e5fcfeff', '#eefdffff', '#e6f6fcff']}
+        colors={['#f5e5fbff', '#e5fcfeff', '#eefdffff', '#ffffffff']}
         style={styles.gradientBackground}
         start={{ x: 0, y: 0 }}
         end={{ x: 0, y: 1 }}
       />
 
-      {/* 装饰性圆圈 */}
-      <View style={styles.decorativeCircle1} />
-      <View style={styles.decorativeCircle2} />
-      <View style={styles.decorativeCircle3} />
-
       <HeaderBar
         title="分析结果"
         onBack={() => router.back()}
@@ -226,18 +252,36 @@ export default function FoodAnalysisResultScreen() {
       <ScrollView style={styles.scrollContainer} showsVerticalScrollIndicator={false}>
         {/* 食物主图 */}
         <View style={styles.imageContainer}>
-          <Image
+          {imageUri ? (
-            source={{ uri: imageUri }}
+            <TouchableOpacity
-            style={styles.foodImage}
+              onPress={() => setShowImagePreview(true)}
-            resizeMode="cover"
+              activeOpacity={0.9}
-          />
+            >
+              <Image
+                source={{ uri: imageUri }}
+                style={styles.foodImage}
+                resizeMode="cover"
+              />
+              {/* 预览提示图标 */}
+              <View style={styles.previewHint}>
+                <Ionicons name="expand-outline" size={20} color="#FFF" />
+              </View>
+            </TouchableOpacity>
+          ) : (
+            <View style={styles.placeholderContainer}>
+              <View style={styles.placeholderContent}>
+                <Ionicons name="restaurant-outline" size={48} color="#666" />
+                <Text style={styles.placeholderText}>营养记录</Text>
+              </View>
+            </View>
+          )}
 
           {/* 识别信息气泡 */}
           <View style={styles.descriptionBubble}>
             <Text style={styles.descriptionText}>
               {recognitionResult ?
                 `置信度: ${recognitionResult.confidence}%` :
-                '2025年9月4日'
+                dayjs().format('YYYY年M月D日')
               }
             </Text>
           </View>
@@ -259,6 +303,7 @@ export default function FoodAnalysisResultScreen() {
               unit="克"
               percentage={Math.min(100, proteinPercentage)}
               color="#4CAF50"
+              resetToken={animationTrigger}
             />
             <NutritionRing
               label="脂肪"
@@ -266,6 +311,7 @@ export default function FoodAnalysisResultScreen() {
               unit="克"
               percentage={Math.min(100, fatPercentage)}
               color="#FF9800"
+              resetToken={animationTrigger}
             />
             <NutritionRing
               label="碳水"
@@ -273,6 +319,7 @@ export default function FoodAnalysisResultScreen() {
               unit="克"
               percentage={Math.min(100, carbohydratePercentage)}
               color="#2196F3"
+              resetToken={animationTrigger}
             />
           </View>
 
@@ -320,15 +367,15 @@ export default function FoodAnalysisResultScreen() {
 
                 <View style={styles.foodIntakeCalories}>
                   <Text style={styles.foodIntakeCaloriesValue}>{item.calories}千卡</Text>
-                  <TouchableOpacity style={styles.editButton}>
+                  {shouldHideRecordBar ? null : <TouchableOpacity style={styles.editButton}>
                     <Ionicons name="create-outline" size={16} color="#666" />
-                  </TouchableOpacity>
+                  </TouchableOpacity>}
-                  <TouchableOpacity
+                  {shouldHideRecordBar ? null : <TouchableOpacity
                     style={styles.deleteButton}
                     onPress={() => handleRemoveFood(item.id)}
                   >
                     <Ionicons name="trash-outline" size={16} color="#666" />
-                  </TouchableOpacity>
+                  </TouchableOpacity>}
                 </View>
               </View>
             ))}
@@ -337,48 +384,50 @@ export default function FoodAnalysisResultScreen() {
       </ScrollView>
 
       {/* 底部餐次选择和记录按钮 */}
-      {recognitionResult && !recognitionResult.isFoodDetected ? (
+      {!shouldHideRecordBar && (
-        // 非食物检测情况显示重新拍照按钮
+        recognitionResult && !recognitionResult.isFoodDetected ? (
-        <View style={styles.bottomContainer}>
+          // 非食物检测情况显示重新拍照按钮
-          <TouchableOpacity
+          <View style={styles.bottomContainer}>
-            style={styles.retakePhotoButton}
+            <TouchableOpacity
-            onPress={() => router.back()}
+              style={styles.retakePhotoButton}
-            activeOpacity={0.8}
+              onPress={() => router.back()}
-          >
+              activeOpacity={0.8}
-            <Ionicons name="camera-outline" size={20} color={Colors.light.onPrimary} style={{ marginRight: 8 }} />
+            >
-            <Text style={styles.retakePhotoButtonText}>重新拍照</Text>
+              <Ionicons name="camera-outline" size={20} color={Colors.light.onPrimary} style={{ marginRight: 8 }} />
-          </TouchableOpacity>
+              <Text style={styles.retakePhotoButtonText}>重新拍照</Text>
-        </View>
+            </TouchableOpacity>
-      ) : (
+          </View>
-        // 正常食物识别情况
+        ) : (
-        <View style={styles.bottomContainer}>
+          // 正常食物识别情况
-          <TouchableOpacity
+          <View style={styles.bottomContainer}>
-            style={styles.mealSelector}
+            <TouchableOpacity
-            onPress={() => setShowMealSelector(true)}
+              style={styles.mealSelector}
-          >
+              onPress={() => setShowMealSelector(true)}
-            <View style={[
+            >
-              styles.mealIndicator,
+              <View style={[
-              { backgroundColor: mealOptions.find(option => option.key === currentMealType)?.color || '#FF6B35' }
+                styles.mealIndicator,
-            ]} />
+                { backgroundColor: mealOptions.find(option => option.key === currentMealType)?.color || '#FF6B35' }
-            <Text style={styles.mealText}>{MEAL_TYPE_MAP[currentMealType as keyof typeof MEAL_TYPE_MAP]}</Text>
+              ]} />
-            <Ionicons name="chevron-down" size={16} color="#333" />
+              <Text style={styles.mealText}>{MEAL_TYPE_MAP[currentMealType as keyof typeof MEAL_TYPE_MAP]}</Text>
-          </TouchableOpacity>
+              <Ionicons name="chevron-down" size={16} color="#333" />
+            </TouchableOpacity>
 
-          <TouchableOpacity
+            <TouchableOpacity
-            style={[
+              style={[
-              styles.recordButton,
+                styles.recordButton,
-              (isRecording || foodItems.length === 0) && styles.recordButtonDisabled
+                (isRecording || foodItems.length === 0) && styles.recordButtonDisabled
-            ]}
+              ]}
-            disabled={isRecording || foodItems.length === 0}
+              disabled={isRecording || foodItems.length === 0}
-            onPress={handleSaveToDiary}
+              onPress={handleSaveToDiary}
-          >
+            >
-            {isRecording ? (
+              {isRecording ? (
-              <ActivityIndicator size="small" color="#FFF" />
+                <ActivityIndicator size="small" color="#FFF" />
-            ) : (
+              ) : (
-              <Text style={styles.recordButtonText}>记录</Text>
+                <Text style={styles.recordButtonText}>记录</Text>
-            )}
+              )}
-          </TouchableOpacity>
+            </TouchableOpacity>
-        </View>
+          </View>
+        )
       )}
 
       {/* 餐次选择弹窗 */}
@@ -426,6 +475,39 @@ export default function FoodAnalysisResultScreen() {
           </View>
         </View>
       </Modal>
+
+      {/* 图片预览 */}
+      <ImageViewing
+        images={imageUri ? [{ uri: imageUri }] : []}
+        imageIndex={0}
+        visible={showImagePreview}
+        onRequestClose={() => {
+          console.log('ImageViewing onRequestClose called');
+          setShowImagePreview(false);
+        }}
+        swipeToCloseEnabled={true}
+        doubleTapToZoomEnabled={true}
+        HeaderComponent={() => (
+          <View style={styles.imageViewerHeader}>
+            <Text style={styles.imageViewerHeaderText}>
+              {recognitionResult ?
+                `置信度: ${recognitionResult.confidence}%` :
+                dayjs().format('YYYY年M月D日 HH:mm')
+              }
+            </Text>
+          </View>
+        )}
+        FooterComponent={() => (
+          <View style={styles.imageViewerFooter}>
+            <TouchableOpacity
+              style={styles.imageViewerFooterButton}
+              onPress={() => setShowImagePreview(false)}
+            >
+              <Text style={styles.imageViewerFooterButtonText}>关闭</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      />
     </View>
   );
 }
@@ -436,24 +518,28 @@ function NutritionRing({
   value,
   unit,
   percentage,
-  color
+  color,
+  resetToken
 }: {
   label: string;
   value: string | number;
   unit?: string;
   percentage: number;
   color: string;
+  resetToken?: unknown;
 }) {
   return (
     <View style={styles.nutritionRingContainer}>
       <View style={styles.ringWrapper}>
         <CircularRing
           size={60}
-          strokeWidth={4}
+          strokeWidth={6}
           trackColor="#E2E8F0"
           progressColor={color}
           progress={percentage / 100}
           showCenterText={false}
+          resetToken={resetToken}
+          durationMs={1200}
         />
         <View style={styles.ringCenter}>
           <Text style={styles.ringCenterText}>{percentage}%</Text>
@@ -547,7 +633,8 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.light.background,
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
-    marginTop: -60,
+    height: '100%',
+    marginTop: -24,
     paddingTop: 24,
     paddingHorizontal: 20,
     paddingBottom: 40,
@@ -882,4 +969,74 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     letterSpacing: 0.5,
   },
+  placeholderContainer: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#F5F5F5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  placeholderContent: {
+    alignItems: 'center',
+  },
+  placeholderText: {
+    fontSize: 16,
+    color: '#666',
+    fontWeight: '500',
+    marginTop: 8,
+  },
+  // 预览提示图标样式
+  previewHint: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    borderRadius: 20,
+    padding: 8,
+  },
+  // ImageViewing 组件样式
+  imageViewerHeader: {
+    position: 'absolute',
+    top: 60,
+    left: 20,
+    right: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    zIndex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  imageViewerCloseButton: {
+    padding: 4,
+  },
+  imageViewerHeaderText: {
+    color: '#FFF',
+    fontSize: 14,
+    fontWeight: '500',
+    flex: 1,
+    textAlign: 'center',
+    marginLeft: -28, // 补偿关闭按钮的宽度，保持文字居中
+  },
+  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',
+  },
 });

app/food/camera.tsx

@@ -159,21 +159,23 @@ export default function FoodCameraScreen() {
         <View style={styles.cameraFrameContainer}>
           <Text style={styles.hintText}>确保食物在取景框内</Text>
 
-          {/* 相机取景框 */}
+          {/* 相机取景框包装器 */}
-          <View style={styles.cameraFrame}>
+          <View style={styles.cameraWrapper}>
-            <CameraView
+            {/* 相机取景框 */}
-              ref={cameraRef}
+            <View style={styles.cameraFrame}>
-              style={styles.cameraView}
+              <CameraView
-              facing={facing}
+                ref={cameraRef}
-            >
+                style={styles.cameraView}
-              {/* 取景框装饰 */}
+                facing={facing}
-              <View style={styles.viewfinderOverlay}>
+              />
-                <View style={[styles.corner, styles.topLeft]} />
+            </View>
-                <View style={[styles.corner, styles.topRight]} />
+            {/* 取景框装饰 - 放在外层避免被截断 */}
-                <View style={[styles.corner, styles.bottomLeft]} />
+            <View style={styles.viewfinderOverlay}>
-                <View style={[styles.corner, styles.bottomRight]} />
+              <View style={[styles.corner, styles.topLeft]} />
-              </View>
+              <View style={[styles.corner, styles.topRight]} />
-            </CameraView>
+              <View style={[styles.corner, styles.bottomLeft]} />
+              <View style={[styles.corner, styles.bottomRight]} />
+            </View>
           </View>
         </View>
 
@@ -294,21 +296,29 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 20,
   },
+  cameraWrapper: {
+    width: 300,
+    height: 300,
+    position: 'relative',
+  },
   cameraFrame: {
     width: 300,
     height: 300,
     borderRadius: 20,
     overflow: 'hidden',
-    borderWidth: 3,
-    borderColor: '#FFF',
     backgroundColor: '#000',
   },
   cameraView: {
     flex: 1,
   },
   viewfinderOverlay: {
-    flex: 1,
+    position: 'absolute',
-    position: 'relative',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 1,
+    pointerEvents: 'none',
   },
   camera: {
     flex: 1,

app/nutrition/records.tsx

@@ -1,11 +1,14 @@
 import { CalorieRingChart } from '@/components/CalorieRingChart';
 import { DateSelector } from '@/components/DateSelector';
+import { FloatingFoodOverlay } from '@/components/FloatingFoodOverlay';
 import { NutritionRecordCard } from '@/components/NutritionRecordCard';
 import { HeaderBar } from '@/components/ui/HeaderBar';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { DietRecord } from '@/services/dietRecords';
+import { type FoodRecognitionResponse } from '@/services/foodRecognition';
+import { saveRecognitionResult } from '@/store/foodRecognitionSlice';
 import { selectHealthDataByDate } from '@/store/healthSlice';
 import {
   deleteNutritionRecord,
@@ -70,6 +73,9 @@ export default function NutritionRecordsScreen() {
   const [hasMoreData, setHasMoreData] = useState(true);
   const [page, setPage] = useState(1);
 
+  // 食物添加弹窗状态
+  const [showFoodOverlay, setShowFoodOverlay] = useState(false);
+
   // 根据视图模式选择使用的数据
   const displayRecords = viewMode === 'daily' ? nutritionRecords : allRecords;
   const loading = viewMode === 'daily' ? nutritionLoading.records : allRecordsLoading;
@@ -249,6 +255,51 @@ export default function NutritionRecordsScreen() {
     }
   };
 
+  // 处理营养记录卡片点击
+  const handleRecordPress = (record: DietRecord) => {
+    // 将 DietRecord 转换为 FoodRecognitionResponse 格式
+    const recognitionResult: FoodRecognitionResponse = {
+      items: [{
+        id: record.id.toString(),
+        label: record.foodName,
+        foodName: record.foodName,
+        portion: record.portionDescription || `${record.estimatedCalories || 0}g`,
+        calories: record.estimatedCalories || 0,
+        mealType: record.mealType,
+        nutritionData: {
+          proteinGrams: record.proteinGrams || 0,
+          carbohydrateGrams: record.carbohydrateGrams || 0,
+          fatGrams: record.fatGrams || 0,
+          fiberGrams: 0, // DietRecord 中没有纤维数据，设为0
+        }
+      }],
+      analysisText: record.foodDescription || `${record.foodName} - ${record.portionDescription}`,
+      confidence: 95, // 设置一个默认置信度
+      isFoodDetected: true,
+      nonFoodMessage: undefined
+    };
+
+    // 生成唯一的识别ID
+    const recognitionId = `record-${record.id}-${Date.now()}`;
+
+    // 保存到 Redux
+    dispatch(saveRecognitionResult({
+      id: recognitionId,
+      result: recognitionResult
+    }));
+
+    // 跳转到分析结果页面
+    router.push({
+      pathname: '/food/analysis-result',
+      params: {
+        imageUri: record.imageUrl || '',
+        mealType: record.mealType,
+        recognitionId: recognitionId,
+        hideRecordBar: 'true'
+      }
+    });
+  };
+
   // 渲染视图模式切换器
   const renderViewModeToggle = () => (
     <View style={[styles.viewModeContainer, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
@@ -294,8 +345,12 @@ export default function NutritionRecordsScreen() {
       <DateSelector
         selectedIndex={selectedIndex}
         onDateSelect={(index, date) => setSelectedIndex(index)}
-        showMonthTitle={false}
+        showMonthTitle={true}
         disableFutureDates={true}
+        showCalendarIcon={true}
+        containerStyle={{
+          paddingHorizontal: 16
+        }}
       />
     );
   };
@@ -317,6 +372,7 @@ export default function NutritionRecordsScreen() {
   const renderRecord = ({ item, index }: { item: DietRecord; index: number }) => (
     <NutritionRecordCard
       record={item}
+      onPress={() => handleRecordPress(item)}
       onDelete={() => handleDeleteRecord(item.id)}
     />
   );
@@ -362,8 +418,7 @@ export default function NutritionRecordsScreen() {
 
   // 添加食物的处理函数
   const handleAddFood = () => {
-    const mealType = getCurrentMealType();
+    setShowFoodOverlay(true);
-    router.push(`/food-library?mealType=${mealType}`);
   };
 
   // 渲染右侧添加按钮
@@ -385,7 +440,7 @@ export default function NutritionRecordsScreen() {
         right={renderRightButton()}
       />
 
-      {renderViewModeToggle()}
+      {/* {renderViewModeToggle()} */}
       {renderDateSelector()}
 
       {/* Calorie Ring Chart */}
@@ -425,6 +480,13 @@ export default function NutritionRecordsScreen() {
           onEndReachedThreshold={0.1}
         />
       )}
+
+      {/* 食物添加悬浮窗 */}
+      <FloatingFoodOverlay
+        visible={showFoodOverlay}
+        onClose={() => setShowFoodOverlay(false)}
+        mealType={getCurrentMealType()}
+      />
     </View>
   );
 }

components/CalorieRingChart.tsx

@@ -115,9 +115,6 @@ export function CalorieRingChart({
             <ThemedText style={[styles.centerValue, { color: textColor }]}>
               {Math.round(canEat)}千卡
             </ThemedText>
-            <ThemedText style={[styles.centerPercentage, { color: textSecondaryColor }]}>
-              {Math.round(progressPercentage)}%
-            </ThemedText>
           </View>
         </View>
 
@@ -187,7 +184,7 @@ const styles = StyleSheet.create({
     borderRadius: 16,
     padding: 16,
     marginHorizontal: 16,
-    marginBottom: 16,
+    marginBottom: 8,
     shadowColor: '#000000',
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.04,

components/DateSelector.tsx

@@ -1,7 +1,12 @@
 import { getMonthDaysZh, getMonthTitleZh, getTodayIndexInMonth } from '@/utils/date';
+import { Ionicons } from '@expo/vector-icons';
+import DateTimePicker from '@react-native-community/datetimepicker';
 import dayjs from 'dayjs';
 import React, { useEffect, useRef, useState } from 'react';
 import {
+  Modal,
+  Platform,
+  Pressable,
   ScrollView,
   StyleSheet,
   Text,
@@ -28,6 +33,8 @@ export interface DateSelectorProps {
   dayItemStyle?: any;
   /** 是否自动滚动到选中项 */
   autoScrollToSelected?: boolean;
+  /** 是否显示日历图标 */
+  showCalendarIcon?: boolean;
 }
 
 export const DateSelector: React.FC<DateSelectorProps> = ({
@@ -40,14 +47,16 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
   containerStyle,
   dayItemStyle,
   autoScrollToSelected = true,
+  showCalendarIcon = true,
 }) => {
   // 内部状态管理
   const [internalSelectedIndex, setInternalSelectedIndex] = useState(getTodayIndexInMonth());
+  const [currentMonth, setCurrentMonth] = useState(dayjs()); // 当前显示的月份
   const selectedIndex = externalSelectedIndex ?? internalSelectedIndex;
 
   // 获取日期数据
-  const days = getMonthDaysZh();
+  const days = getMonthDaysZh(currentMonth);
-  const monthTitle = externalMonthTitle ?? getMonthTitleZh();
+  const monthTitle = externalMonthTitle ?? getMonthTitleZh(currentMonth);
 
   // 滚动相关
   const daysScrollRef = useRef<ScrollView | null>(null);
@@ -55,6 +64,10 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
   const DAY_PILL_WIDTH = 48;
   const DAY_PILL_SPACING = 8;
 
+  // 日历弹窗相关
+  const [datePickerVisible, setDatePickerVisible] = useState(false);
+  const [pickerDate, setPickerDate] = useState<Date>(new Date());
+
   // 滚动到指定索引
   const scrollToIndex = (index: number, animated = true) => {
     if (!daysScrollRef.current || scrollWidth === 0) return;
@@ -103,6 +116,17 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
     }
   }, [selectedIndex, autoScrollToSelected]);
 
+  // 当月份变化时，重新滚动到选中位置
+  useEffect(() => {
+    if (scrollWidth > 0 && autoScrollToSelected) {
+      const timer = setTimeout(() => {
+        scrollToIndex(selectedIndex, true);
+      }, 100);
+
+      return () => clearTimeout(timer);
+    }
+  }, [currentMonth, scrollWidth, autoScrollToSelected]);
+
   // 处理日期选择
   const handleDateSelect = (index: number) => {
     const targetDate = days[index]?.date?.toDate();
@@ -127,10 +151,61 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
     onDateSelect?.(index, targetDate);
   };
 
+  // 日历弹窗相关函数
+  const openDatePicker = () => {
+    const currentSelectedDate = days[selectedIndex]?.date?.toDate() || new Date();
+    setPickerDate(currentSelectedDate);
+    setDatePickerVisible(true);
+  };
+
+  const closeDatePicker = () => setDatePickerVisible(false);
+
+  const onConfirmDate = (date: Date) => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const picked = new Date(date);
+    picked.setHours(0, 0, 0, 0);
+
+    // 如果禁用未来日期，则限制选择
+    const finalDate = (disableFutureDates && picked > today) ? today : picked;
+
+    closeDatePicker();
+
+    // 更新当前月份为选中日期的月份
+    const selectedMonth = dayjs(finalDate);
+    setCurrentMonth(selectedMonth);
+
+    // 计算选中日期在新月份中的索引
+    const newMonthDays = getMonthDaysZh(selectedMonth);
+    const selectedDay = selectedMonth.date();
+    const newSelectedIndex = newMonthDays.findIndex(day => day.dayOfMonth === selectedDay);
+
+    // 更新内部状态（如果使用外部控制则不更新）
+    if (externalSelectedIndex === undefined && newSelectedIndex !== -1) {
+      setInternalSelectedIndex(newSelectedIndex);
+    }
+
+    // 调用统一的日期选择回调
+    if (newSelectedIndex !== -1) {
+      onDateSelect?.(newSelectedIndex, finalDate);
+    }
+  };
+
   return (
     <View style={[styles.container, containerStyle]}>
       {showMonthTitle && (
-        <Text style={styles.monthTitle}>{monthTitle}</Text>
+        <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>
       )}
 
       <ScrollView
@@ -176,6 +251,49 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
           );
         })}
       </ScrollView>
+
+      {/* 日历选择弹窗 */}
+      <Modal
+        visible={datePickerVisible}
+        transparent
+        animationType="fade"
+        onRequestClose={closeDatePicker}
+      >
+        <Pressable style={styles.modalBackdrop} onPress={closeDatePicker} />
+        <View style={styles.modalSheet}>
+          <DateTimePicker
+            value={pickerDate}
+            mode="date"
+            display={Platform.OS === 'ios' ? 'inline' : 'calendar'}
+            minimumDate={dayjs().subtract(6, 'month').toDate()}
+            maximumDate={disableFutureDates ? new Date() : undefined}
+            {...(Platform.OS === 'ios' ? { locale: 'zh-CN' } : {})}
+            onChange={(event, date) => {
+              if (Platform.OS === 'ios') {
+                if (date) setPickerDate(date);
+              } else {
+                if (event.type === 'set' && date) {
+                  onConfirmDate(date);
+                } else {
+                  closeDatePicker();
+                }
+              }
+            }}
+          />
+          {Platform.OS === 'ios' && (
+            <View style={styles.modalActions}>
+              <Pressable onPress={closeDatePicker} style={[styles.modalBtn]}>
+                <Text style={styles.modalBtnText}>取消</Text>
+              </Pressable>
+              <Pressable onPress={() => {
+                onConfirmDate(pickerDate);
+              }} style={[styles.modalBtn, styles.modalBtnPrimary]}>
+                <Text style={[styles.modalBtnText, styles.modalBtnTextPrimary]}>确定</Text>
+              </Pressable>
+            </View>
+          )}
+        </View>
+      </Modal>
     </View>
   );
 };
@@ -183,12 +301,22 @@ export const DateSelector: React.FC<DateSelectorProps> = ({
 const styles = StyleSheet.create({
   container: {
 
+  },
+  monthTitleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    marginBottom: 8,
   },
   monthTitle: {
-    fontSize: 18,
+    fontSize: 20,
     fontWeight: '800',
     color: '#192126',
-    marginBottom: 14,
+  },
+  calendarIconButton: {
+    padding: 4,
+    borderRadius: 6,
+    marginLeft: 4
   },
   daysContainer: {
     paddingBottom: 8,
@@ -243,4 +371,41 @@ const styles = StyleSheet.create({
   dayDateDisabled: {
     color: 'gray',
   },
+  modalBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+  modalSheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    padding: 16,
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  modalActions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 8,
+    gap: 12,
+  },
+  modalBtn: {
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 10,
+    backgroundColor: '#F1F5F9',
+  },
+  modalBtnPrimary: {
+    backgroundColor: '#7a5af8',
+  },
+  modalBtnText: {
+    color: '#334155',
+    fontWeight: '700',
+  },
+  modalBtnTextPrimary: {
+    color: '#FFFFFF',
+    fontWeight: '700',
+  },
 });

components/NutritionRadarCard.tsx

@@ -5,9 +5,10 @@ import { NutritionSummary } from '@/services/dietRecords';
 import { NutritionGoals, calculateRemainingCalories } from '@/utils/nutrition';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
+import * as Haptics from 'expo-haptics';
 import { router } from 'expo-router';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Animated, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
@@ -137,6 +138,10 @@ export function NutritionRadarCard({
   });
 
   const handleNavigateToRecords = () => {
+    // ios 下震动反馈
+    if (Platform.OS === 'ios') {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    }
     router.push(ROUTES.NUTRITION_RECORDS);
   };