feat: 增强目标管理功能及相关组件

- 在 GoalsListScreen 中新增目标编辑功能，支持用户编辑现有目标 - 更新 CreateGoalModal 组件，支持编辑模式下的目标更新 - 在 NutritionRecordsScreen 中新增删除营养记录功能，允许用户删除不需要的记录 - 更新 NutritionRecordCard 组件，增加操作选项，支持删除记录 - 修改 dietRecords 服务，添加删除营养记录的 API 调用 - 优化 goalsSlice，确保目标更新逻辑与 Redux 状态管理一致
2025-08-26 22:34:03 +08:00
parent 0610f287ee
commit 0a8b20f0ec
8 changed files with 244 additions and 131 deletions
--- a/components/NutritionRecordCard.tsx
+++ b/components/NutritionRecordCard.tsx
@@ -1,14 +1,16 @@
 import { ThemedText } from '@/components/ThemedText';
+import { ActionSheet } from '@/components/ui/ActionSheet';
 import { useThemeColor } from '@/hooks/useThemeColor';
 import { DietRecord } from '@/services/dietRecords';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';

 export type NutritionRecordCardProps = {
  record: DietRecord;
  onPress?: () => void;
+  onDelete?: () => void;
  showTimeline?: boolean;
  isFirst?: boolean;
  isLast?: boolean;
@@ -41,6 +43,7 @@ const MEAL_TYPE_COLORS = {
 export function NutritionRecordCard({
  record,
  onPress,
+  onDelete,
  showTimeline = false,
  isFirst = false,
  isLast = false
@@ -50,6 +53,9 @@ export function NutritionRecordCard({
  const textSecondaryColor = useThemeColor({}, 'textSecondary');
  const primaryColor = useThemeColor({}, 'primary');

+  // ActionSheet 状态管理
+  const [showActionSheet, setShowActionSheet] = useState(false);
+
  // 营养数据统计
  const nutritionStats = useMemo(() => {
    return [
@@ -117,38 +123,36 @@ export function NutritionRecordCard({
      >
        {/* 主要内容区域 */}
        <View style={styles.mainContent}>
-          {/* 左侧：食物图片 */}
-          <View style={[styles.foodImageContainer, !record.imageUrl && styles.foodImagePlaceholder]}>
-            {record.imageUrl ? (
-              <Image source={{ uri: record.imageUrl }} style={styles.foodImage} />
-            ) : (
-              <Ionicons name="restaurant" size={32} color={textSecondaryColor} />
-            )}
-          </View>
-
-          {/* 右侧：食物信息 */}
          <View style={styles.foodInfoContainer}>
            {/* 餐次和操作按钮 */}
            <View style={styles.headerRow}>
              <View style={styles.mealTypeContainer}>
-                <View style={[styles.mealTypeBadge, { backgroundColor: `${mealTypeColor}15` }]}>
-                  <ThemedText style={[styles.mealTypeText, { color: mealTypeColor }]}>
-                    {mealTypeLabel}
-                  </ThemedText>
-                </View>
+           
                {!showTimeline && (
                  <ThemedText style={[styles.mealTime, { color: textSecondaryColor }]}>
                    {record.mealTime ? dayjs(record.mealTime).format('HH:mm') : '时间未设置'}
                  </ThemedText>
                )}
              </View>
-              <TouchableOpacity style={styles.moreButton}>
+              <TouchableOpacity 
+                style={styles.moreButton}
+                onPress={() => setShowActionSheet(true)}
+              >
                <Ionicons name="ellipsis-horizontal" size={20} color={textSecondaryColor} />
              </TouchableOpacity>
            </View>

            {/* 食物名称和分量 */}
            <View style={styles.foodNameSection}>
+                        {/* 左侧：食物图片 */}
+          <View style={[styles.foodImageContainer, !record.imageUrl && styles.foodImagePlaceholder]}>
+            {record.imageUrl ? (
+              <Image source={{ uri: record.imageUrl }} style={styles.foodImage} />
+            ) : (
+              <Ionicons name="restaurant" size={12} color={textSecondaryColor} />
+            )}
+          </View>
+
              <ThemedText style={[styles.foodName, { color: textColor }]}>
                {record.foodName}
              </ThemedText>
@@ -157,19 +161,22 @@ export function NutritionRecordCard({
                  {record.portionDescription || `${record.weightGrams}g`}
                </ThemedText>
              )}
+                   <View style={[styles.mealTypeBadge, { backgroundColor: `${mealTypeColor}15` }]}>
+                  <ThemedText style={[styles.mealTypeText, { color: mealTypeColor }]}>
+                    {mealTypeLabel}
+                  </ThemedText>
+                </View>
            </View>

-            {/* 营养信息网格 */}
-            <View style={styles.nutritionGrid}>
-              {nutritionStats.map((stat) => (
-                <View key={stat.label} style={styles.nutritionItem}>
-                  <View style={styles.nutritionItemHeader}>
-                    <Ionicons name={stat.icon} size={14} color={stat.color} />
-                    <ThemedText style={[styles.nutritionLabel, { color: textSecondaryColor }]}>
-                      {stat.label}
-                    </ThemedText>
-                  </View>
-                  <ThemedText style={[styles.nutritionValue, { color: textColor }]}>
+            {/* 营养信息 - 紧凑标签布局 */}
+            <View style={styles.nutritionContainer}>
+              {nutritionStats.map((stat, index) => (
+                <View key={stat.label} style={styles.nutritionTag}>
+                  <Ionicons name={stat.icon} size={10} color={stat.color} />
+                  <ThemedText style={[styles.nutritionText, { color: textSecondaryColor }]} numberOfLines={1}>
+                    {stat.label}
+                  </ThemedText>
+                  <ThemedText style={[styles.nutritionValue, { color: textColor }]} numberOfLines={1}>
                    {stat.value}
                  </ThemedText>
                </View>
@@ -187,6 +194,25 @@ export function NutritionRecordCard({
          </View>
        </View>
      </TouchableOpacity>
+
+      {/* ActionSheet for more options */}
+      <ActionSheet
+        visible={showActionSheet}
+        onClose={() => setShowActionSheet(false)}
+        title="选择操作"
+        options={[
+          {
+            id: 'delete',
+            title: '删除记录',
+            subtitle: '删除后无法恢复',
+            icon: 'trash-outline',
+            destructive: true,
+            onPress: () => {
+              onDelete?.();
+            }
+          }
+        ]}
+      />
    </View>
  );
 }
@@ -248,10 +274,10 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
  },
  foodImageContainer: {
-    width: 80,
-    height: 80,
+    width: 28,
+    height: 28,
    borderRadius: 16,
-    marginRight: 16,
+    marginRight: 8,
    overflow: 'hidden',
  },
  foodImage: {
@@ -271,19 +297,20 @@ const styles = StyleSheet.create({
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 8,
+    position: 'absolute',
+    top: 0,
+    right: 0,
  },
  mealTypeContainer: {
    flex: 1,
  },
  mealTypeBadge: {
-    alignSelf: 'flex-start',
-    paddingHorizontal: 8,
-    paddingVertical: 4,
+    paddingHorizontal: 4,
    borderRadius: 8,
-    marginBottom: 4,
+    marginLeft: 4,
  },
  mealTypeText: {
-    fontSize: 12,
+    fontSize: 8,
    fontWeight: '600',
  },
  mealTime: {
@@ -296,6 +323,9 @@ const styles = StyleSheet.create({
  },
  foodNameSection: {
    marginBottom: 12,
+    flexDirection: 'row',
+    gap: 4,
+    alignItems: 'center',
  },
  foodName: {
    fontSize: 18,
@@ -304,32 +334,38 @@ const styles = StyleSheet.create({
    marginBottom: 2,
  },
  portionInfo: {
-    fontSize: 14,
-    fontWeight: '500',
-  },
-  nutritionGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginBottom: 8,
-  },
-  nutritionItem: {
-    width: '50%',
-    marginBottom: 8,
-    paddingRight: 8,
-  },
-  nutritionItemHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 2,
-  },
-  nutritionLabel: {
    fontSize: 12,
    fontWeight: '500',
+  },
+  nutritionContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  nutritionTag: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(248, 249, 250, 0.8)',
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    marginBottom: 4,
+    width: '48%',
+    overflow: 'hidden',
+  },
+  nutritionText: {
+    fontSize: 9,
+    fontWeight: '500',
    marginLeft: 4,
+    marginRight: 2,
+    flexShrink: 0,
  },
  nutritionValue: {
-    fontSize: 14,
+    fontSize: 10,
    fontWeight: '700',
+    flexShrink: 1,
+    textAlign: 'right',
+    flex: 1,
  },
  notesSection: {
    marginTop: 8,
--- a/components/model/CreateGoalModal.tsx
+++ b/components/model/CreateGoalModal.tsx
@@ -1,6 +1,6 @@
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
-import { CreateGoalRequest, GoalPriority, RepeatType } from '@/types/goals';
+import { CreateGoalRequest, GoalPriority, RepeatType, UpdateGoalRequest } from '@/types/goals';
 import { Ionicons } from '@expo/vector-icons';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -24,9 +24,11 @@ interface CreateGoalModalProps {
  visible: boolean;
  onClose: () => void;
  onSubmit: (goalData: CreateGoalRequest) => void;
+  onUpdate?: (goalId: string, goalData: UpdateGoalRequest) => void;
  onSuccess?: () => void;
  loading?: boolean;
  initialData?: Partial<CreateGoalRequest>;
+  editGoalId?: string;
 }

 const REPEAT_TYPE_OPTIONS: { value: RepeatType; label: string }[] = [
@@ -41,9 +43,11 @@ export const CreateGoalModal: React.FC<CreateGoalModalProps> = ({
  visible,
  onClose,
  onSubmit,
+  onUpdate,
  onSuccess,
  loading = false,
  initialData,
+  editGoalId,
 }) => {
  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
  const colorTokens = Colors[theme];
@@ -130,28 +134,49 @@ export const CreateGoalModal: React.FC<CreateGoalModalProps> = ({
      startTime = hours * 60 + minutes;
    }

+    // 根据是否是编辑模式决定数据结构
+    if (editGoalId && onUpdate) {
+      // 更新模式：使用 UpdateGoalRequest 结构
+      const updateData: UpdateGoalRequest = {
+        title: title.trim(),
+        description: description.trim() || undefined,
+        repeatType,
+        frequency,
+        category: category.trim() || undefined,
+        priority,
+        hasReminder,
+        reminderTime: hasReminder ? reminderTime : undefined,
+        customRepeatRule: {
+          weekdays: repeatType === 'weekly' ? selectedWeekdays : [1, 2, 3, 4, 5, 6, 0],
+          dayOfMonth: repeatType === 'monthly' ? selectedMonthDays : undefined,
+        },
+        endDate: endDate || undefined,
+      };

+      console.log('updateData', updateData);
+      onUpdate(editGoalId, updateData);
+    } else {
+      // 创建模式：使用 CreateGoalRequest 结构
+      const goalData: CreateGoalRequest = {
+        title: title.trim(),
+        description: description.trim() || undefined,
+        repeatType,
+        frequency,
+        category: category.trim() || undefined,
+        priority,
+        hasReminder,
+        reminderTime: hasReminder ? reminderTime : undefined,
+        customRepeatRule: {
+          weekdays: repeatType === 'weekly' ? selectedWeekdays : [1, 2, 3, 4, 5, 6, 0],
+          dayOfMonth: repeatType === 'monthly' ? selectedMonthDays : undefined,
+        },
+        startTime,
+        endDate: endDate || undefined,
+      };

-    const goalData: CreateGoalRequest = {
-      title: title.trim(),
-      description: description.trim() || undefined,
-      repeatType,
-      frequency,
-      category: category.trim() || undefined,
-      priority,
-      hasReminder,
-      reminderTime: hasReminder ? reminderTime : undefined,
-      customRepeatRule: {
-        weekdays: repeatType === 'weekly' ? selectedWeekdays : [1, 2, 3, 4, 5, 6, 0], // 根据重复类型设置周几
-        dayOfMonth: repeatType === 'monthly' ? selectedMonthDays : undefined, // 根据重复类型设置月几
-      },
-      startTime,
-      endDate: endDate || undefined,
-    };
-
-    console.log('goalData', goalData);
-
-    onSubmit(goalData);
+      console.log('goalData', goalData);
+      onSubmit(goalData);
+    }

    // 通知父组件提交成功
    if (onSuccess) {
@@ -278,7 +303,7 @@ export const CreateGoalModal: React.FC<CreateGoalModalProps> = ({
            <Ionicons name="close" size={24} color={colorTokens.text} />
          </TouchableOpacity>
          <Text style={[styles.title, { color: colorTokens.text }]}>
-            创建新目标
+            {editGoalId ? '编辑目标' : '创建新目标'}
          </Text>
          <View style={{ width: 24 }} />
        </View>
@@ -717,7 +742,7 @@ export const CreateGoalModal: React.FC<CreateGoalModalProps> = ({
            disabled={loading || !title.trim()}
          >
            <Text style={styles.saveButtonText}>
-              {loading ? '保存中...' : '保存'}
+              {loading ? (editGoalId ? '更新中...' : '保存中...') : (editGoalId ? '更新' : '保存')}
            </Text>
          </TouchableOpacity>
        </View>