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/DietOptionsCard.tsx
+++ b/components/coach/DietOptionsCard.tsx
@@ -0,0 +1,123 @@
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+interface DietOption {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+  action: () => void;
+}
+
+interface DietOptionsCardProps {
+  cardId: string;
+  onSelectOption: (cardId: string, optionId: string) => void;
+}
+
+const DietOptionsCard: React.FC<DietOptionsCardProps> = ({
+  cardId,
+  onSelectOption
+}) => {
+  const colorScheme = useColorScheme();
+  const theme = Colors[colorScheme ?? 'light'];
+
+  const dietOptions: DietOption[] = [
+    {
+      id: 'photo',
+      title: '拍照记录',
+      description: '拍摄食物照片，AI自动识别',
+      icon: 'camera',
+      action: () => onSelectOption(cardId, 'photo')
+    },
+    {
+      id: 'text',
+      title: '文字描述',
+      description: '用文字描述你吃了什么',
+      icon: 'create',
+      action: () => onSelectOption(cardId, 'text')
+    }
+  ];
+
+  return (
+    <View style={[styles.bubble, { backgroundColor: theme.surface }]}>
+      <Text style={[styles.title, { color: theme.text }]}>选择记录方式</Text>
+      <View style={styles.dietOptionsContainer}>
+        {dietOptions.map((option) => (
+          <TouchableOpacity
+            key={option.id}
+            style={[styles.dietOptionBtn, {
+              backgroundColor: theme.background,
+              borderColor: `${theme.primary}4d`
+            }]}
+            onPress={option.action}
+          >
+            <View style={[styles.dietOptionIconContainer, {
+              backgroundColor: `${theme.primary}33`
+            }]}>
+              <Ionicons name={option.icon as any} size={20} color={theme.primary} />
+            </View>
+            <View style={styles.dietOptionTextContainer}>
+              <Text style={[styles.dietOptionTitle, { color: theme.text }]}>
+                {option.title}
+              </Text>
+              <Text style={[styles.dietOptionDesc, { color: theme.textMuted }]}>
+                {option.description}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bubble: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 16,
+    maxWidth: '85%',
+    alignSelf: 'flex-start',
+    gap: 12,
+    minWidth: 300
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  dietOptionsContainer: {
+    gap: 8,
+  },
+  dietOptionBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  dietOptionIconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  dietOptionTextContainer: {
+    flex: 1,
+  },
+  dietOptionTitle: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  dietOptionDesc: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+});
+
+export default DietOptionsCard;