refactor(coach): 重构教练组件，统一导入并简化UI实现与类型定义

2025-08-28 09:46:14 +08:00
parent ba2d829e02
commit 5a59508b88
17 changed files with 2400 additions and 866 deletions
--- a/components/coach/DietInputCard.tsx
+++ b/components/coach/DietInputCard.tsx
@@ -0,0 +1,128 @@
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+
+interface DietInputCardProps {
+  cardId: string;
+  dietTextInputs: Record<string, string>;
+  onDietTextInputChange: (cardId: string, value: string) => void;
+  onSubmitDietText: (cardId: string) => void;
+  onBackToDietOptions: (cardId: string) => void;
+  onShowDietPhotoActionSheet: (cardId: string) => void;
+}
+
+const DietInputCard: React.FC<DietInputCardProps> = ({
+  cardId,
+  dietTextInputs,
+  onDietTextInputChange,
+  onSubmitDietText,
+  onBackToDietOptions,
+  onShowDietPhotoActionSheet
+}) => {
+  const colorScheme = useColorScheme();
+  const theme = Colors[colorScheme ?? 'light'];
+
+  return (
+    <View style={[styles.bubble, { backgroundColor: theme.surface }]}>
+      <View style={styles.dietInputHeader}>
+        <TouchableOpacity
+          style={styles.dietBackBtn}
+          onPress={() => onBackToDietOptions(cardId)}
+        >
+          <Ionicons name="arrow-back" size={16} color={theme.text} />
+        </TouchableOpacity>
+        <Text style={[styles.dietInputTitle, { color: theme.text }]}>记录饮食</Text>
+        <TouchableOpacity
+          style={[styles.photoBtn, { backgroundColor: `${theme.primary}20` }]}
+          onPress={() => onShowDietPhotoActionSheet(cardId)}
+        >
+          <Ionicons name="camera" size={16} color={theme.primary} />
+        </TouchableOpacity>
+      </View>
+
+      <TextInput
+        style={[styles.dietTextInput, {
+          color: theme.text,
+          borderColor: theme.border,
+          backgroundColor: theme.background
+        }]}
+        placeholder="描述你吃了什么，比如：早餐吃了一个苹果、一杯牛奶..."
+        placeholderTextColor={theme.textMuted}
+        value={dietTextInputs[cardId] || ''}
+        onChangeText={(text) => onDietTextInputChange(cardId, text)}
+        multiline
+        textAlignVertical="top"
+      />
+
+      <TouchableOpacity
+        style={[styles.dietSubmitBtn, { backgroundColor: theme.primary }]}
+        onPress={() => onSubmitDietText(cardId)}
+      >
+        <Text style={[styles.submitButtonText, { color: theme.onPrimary }]}>提交</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bubble: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 16,
+    maxWidth: '85%',
+    alignSelf: 'flex-start',
+    gap: 12,
+    minWidth: 300
+  },
+  dietInputHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  dietBackBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.06)',
+  },
+  dietInputTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    flex: 1,
+    textAlign: 'center',
+  },
+  photoBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dietTextInput: {
+    minHeight: 80,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    textAlignVertical: 'top',
+  },
+  dietSubmitBtn: {
+    height: 40,
+    paddingHorizontal: 16,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-end',
+  },
+  submitButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});
+
+export default DietInputCard;