refactor(coach): 重构教练组件，统一导入并简化UI实现与类型定义
This commit is contained in:
richarjiang
@@ -1,25 +1,20 @@
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useLocalSearchParams } from 'expo-router';
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
FlatList,
|
||||
Keyboard,
|
||||
Modal,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View
|
||||
} from 'react-native';
|
||||
import Markdown from 'react-native-markdown-display';
|
||||
import Animated, { FadeInDown, FadeInUp, Layout } from 'react-native-reanimated';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
@@ -38,86 +33,29 @@ import { Image } from 'expo-image';
|
||||
import { HistoryModal } from '../../components/model/HistoryModal';
|
||||
import { ActionSheet } from '../../components/ui/ActionSheet';
|
||||
|
||||
type Role = 'user' | 'assistant';
|
||||
|
||||
// 附件类型枚举
|
||||
type AttachmentType = 'image' | 'video' | 'file';
|
||||
|
||||
// 附件数据结构
|
||||
type MessageAttachment = {
|
||||
id: string;
|
||||
type: AttachmentType;
|
||||
url: string;
|
||||
localUri?: string; // 本地URI，用于上传中的显示
|
||||
filename?: string;
|
||||
size?: number;
|
||||
duration?: number; // 视频时长（秒）
|
||||
thumbnail?: string; // 视频缩略图
|
||||
width?: number;
|
||||
height?: number;
|
||||
uploadProgress?: number; // 上传进度 0-1
|
||||
uploadError?: string; // 上传错误信息
|
||||
};
|
||||
|
||||
// AI选择选项数据结构
|
||||
type AiChoiceOption = {
|
||||
id: string;
|
||||
label: string;
|
||||
value: any;
|
||||
recommended?: boolean;
|
||||
emoji?: string;
|
||||
};
|
||||
|
||||
// 餐次类型
|
||||
type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';
|
||||
|
||||
// 食物确认选项数据结构（暂未使用，预留给未来功能扩展）
|
||||
// type FoodConfirmationOption = {
|
||||
// id: string;
|
||||
// label: string;
|
||||
// foodName: string;
|
||||
// portion: string;
|
||||
// calories: number;
|
||||
// mealType: MealType;
|
||||
// nutritionData: {
|
||||
// proteinGrams?: number;
|
||||
// carbohydrateGrams?: number;
|
||||
// fatGrams?: number;
|
||||
// fiberGrams?: number;
|
||||
// };
|
||||
// };
|
||||
// 导入新的 coach 组件
|
||||
import {
|
||||
CardType,
|
||||
ChatComposer,
|
||||
ChatMessage as ChatMessageComponent,
|
||||
DietInputCard,
|
||||
DietOptionsCard,
|
||||
DietPlanCard,
|
||||
WeightInputCard,
|
||||
type QuickChip,
|
||||
type SelectedImage
|
||||
} from '@/components/coach';
|
||||
import { AiChoiceOption, AttachmentType, ChatMessage, Role } from '@/components/coach/types';
|
||||
|
||||
// AI响应数据结构
|
||||
type AiResponseData = {
|
||||
content: string;
|
||||
choices?: AiChoiceOption[];
|
||||
choices?: any[];
|
||||
interactionType?: 'text' | 'food_confirmation' | 'selection';
|
||||
pendingData?: any;
|
||||
context?: any;
|
||||
};
|
||||
|
||||
// 重构后的消息数据结构
|
||||
type ChatMessage = {
|
||||
id: string;
|
||||
role: Role;
|
||||
content: string; // 文本内容
|
||||
attachments?: MessageAttachment[]; // 附件列表
|
||||
choices?: AiChoiceOption[]; // 选择选项（仅用于assistant消息）
|
||||
interactionType?: string; // 交互类型
|
||||
pendingData?: any; // 待确认数据
|
||||
context?: any; // 上下文信息
|
||||
};
|
||||
|
||||
// 卡片类型常量定义
|
||||
const CardType = {
|
||||
WEIGHT_INPUT: '__WEIGHT_INPUT_CARD__',
|
||||
DIET_INPUT: '__DIET_INPUT_CARD__',
|
||||
DIET_TEXT_INPUT: '__DIET_TEXT_INPUT__',
|
||||
DIET_PLAN: '__DIET_PLAN_CARD__',
|
||||
} as const;
|
||||
|
||||
type CardType = typeof CardType[keyof typeof CardType];
|
||||
|
||||
|
||||
// 定义路由参数类型
|
||||
type CoachScreenParams = {
|
||||
@@ -136,7 +74,6 @@ export default function CoachScreen() {
|
||||
// 为了让页面更贴近品牌主题与更亮的观感，这里使用亮色系配色
|
||||
const colorScheme = useColorScheme();
|
||||
const theme = Colors[colorScheme ?? 'light'];
|
||||
const botName = (params?.name || 'Seal').toString();
|
||||
const [input, setInput] = useState('');
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const [isStreaming, setIsStreaming] = useState(false);
|
||||
@@ -158,16 +95,7 @@ export default function CoachScreen() {
|
||||
const [keyboardOffset, setKeyboardOffset] = useState(0);
|
||||
const [headerHeight, setHeaderHeight] = useState<number>(60);
|
||||
const pendingAssistantIdRef = useRef<string | null>(null);
|
||||
const [selectedImages, setSelectedImages] = useState<{
|
||||
id: string;
|
||||
localUri: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
progress: number;
|
||||
uploadedKey?: string;
|
||||
uploadedUrl?: string;
|
||||
error?: string;
|
||||
}[]>([]);
|
||||
const [selectedImages, setSelectedImages] = useState<SelectedImage[]>([]);
|
||||
const [previewImageUri, setPreviewImageUri] = useState<string | null>(null);
|
||||
const [dietTextInputs, setDietTextInputs] = useState<Record<string, string>>({});
|
||||
const [weightInputs, setWeightInputs] = useState<Record<string, string>>({});
|
||||
@@ -195,23 +123,23 @@ export default function CoachScreen() {
|
||||
pilatesPurposes: userProfile.pilatesPurposes
|
||||
} : undefined;
|
||||
|
||||
const chips = useMemo(() => [
|
||||
const chips: QuickChip[] = useMemo(() => [
|
||||
// { key: 'posture', label: '体态评估', action: () => router.push('/ai-posture-assessment') },
|
||||
// { key: 'plan', label: 'AI制定训练计划', action: () => handleQuickPlan() },
|
||||
// { key: 'analyze', label: '分析运动记录', action: () => handleAnalyzeRecords() },
|
||||
{ key: 'weight', label: '#记体重', action: () => insertWeightInputCard() },
|
||||
{ key: 'diet', label: '#记饮食', action: () => insertDietInputCard() },
|
||||
{ key: 'dietPlan', label: '#饮食方案', action: () => insertDietPlanCard() },
|
||||
{
|
||||
key: 'mood',
|
||||
label: '#记心情',
|
||||
action: () => {
|
||||
if (Platform.OS === 'ios') {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||||
}
|
||||
pushIfAuthedElseLogin('/mood/calendar');
|
||||
}
|
||||
},
|
||||
// {
|
||||
// key: 'mood',
|
||||
// label: '#记心情',
|
||||
// action: () => {
|
||||
// if (Platform.OS === 'ios') {
|
||||
// Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||||
// }
|
||||
// pushIfAuthedElseLogin('/mood/calendar');
|
||||
// }
|
||||
// },
|
||||
], [planDraft, checkin]);
|
||||
|
||||
const scrollToEnd = useCallback(() => {
|
||||
@@ -1082,132 +1010,12 @@ export default function CoachScreen() {
|
||||
setSelectedImages((prev) => prev.filter((it) => it.id !== id));
|
||||
}, []);
|
||||
|
||||
// 渲染单个附件
|
||||
function renderAttachment(attachment: MessageAttachment, isUser: boolean) {
|
||||
const { type, url, localUri, uploadProgress, uploadError, width, height, filename } = attachment;
|
||||
|
||||
if (type === 'image') {
|
||||
const imageUri = url || localUri;
|
||||
if (!imageUri) return null;
|
||||
|
||||
return (
|
||||
<View key={attachment.id} style={styles.attachmentContainer}>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="imagebutton"
|
||||
onPress={() => setPreviewImageUri(imageUri)}
|
||||
style={styles.imageAttachment}
|
||||
>
|
||||
<Image
|
||||
source={{ uri: imageUri }}
|
||||
style={[
|
||||
styles.attachmentImage,
|
||||
width && height ? { aspectRatio: width / height } : {}
|
||||
]}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
{uploadProgress !== undefined && uploadProgress < 1 && (
|
||||
<View style={styles.attachmentProgressOverlay}>
|
||||
<Text style={styles.attachmentProgressText}>
|
||||
{Math.round(uploadProgress * 100)}%
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{uploadError && (
|
||||
<View style={styles.attachmentErrorOverlay}>
|
||||
<Text style={styles.attachmentErrorText}>上传失败</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'video') {
|
||||
// 视频附件的实现
|
||||
return (
|
||||
<View key={attachment.id} style={styles.attachmentContainer}>
|
||||
<TouchableOpacity style={styles.videoAttachment}>
|
||||
<View style={styles.videoPlaceholder}>
|
||||
<Ionicons name="play-circle" size={48} color="rgba(255,255,255,0.9)" />
|
||||
<Text style={styles.videoFilename}>{filename || '视频文件'}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'file') {
|
||||
// 文件附件的实现
|
||||
return (
|
||||
<View key={attachment.id} style={styles.attachmentContainer}>
|
||||
<TouchableOpacity style={styles.fileAttachment}>
|
||||
<Ionicons name="document-outline" size={24} color="#687076" />
|
||||
<Text style={styles.fileFilename} numberOfLines={1}>
|
||||
{filename || 'unknown_file'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// 渲染所有附件
|
||||
function renderAttachments(attachments: MessageAttachment[], isUser: boolean) {
|
||||
if (!attachments || attachments.length === 0) return null;
|
||||
|
||||
return (
|
||||
<View style={styles.attachmentsContainer}>
|
||||
{attachments.map(attachment => renderAttachment(attachment, isUser))}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function renderItem({ item }: { item: ChatMessage }) {
|
||||
const isUser = item.role === 'user';
|
||||
return (
|
||||
<Animated.View
|
||||
entering={isUser ? FadeInUp.springify().damping(18) : FadeInDown.springify().damping(18)}
|
||||
layout={Layout.springify().damping(18)}
|
||||
style={[styles.row, { justifyContent: isUser ? 'flex-end' : 'flex-start' }]}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.bubble,
|
||||
{
|
||||
backgroundColor: theme.card, // 16% opacity
|
||||
borderTopLeftRadius: isUser ? 16 : 6,
|
||||
borderTopRightRadius: isUser ? 6 : 16,
|
||||
maxWidth: isUser ? '82%' : '90%',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{renderBubbleContent(item)}
|
||||
{renderAttachments(item.attachments || [], isUser)}
|
||||
</View>
|
||||
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
function renderBubbleContent(item: ChatMessage) {
|
||||
if (!item.content?.trim() && isStreaming && pendingAssistantIdRef.current === item.id) {
|
||||
return (
|
||||
<View style={styles.streamingContainer}>
|
||||
<Text style={[styles.bubbleText, { color: '#687076' }]}>正在思考…</Text>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
onPress={cancelCurrentRequest}
|
||||
style={styles.cancelStreamBtn}
|
||||
>
|
||||
<Ionicons name="stop-circle" size={20} color="#FF4444" />
|
||||
<Text style={styles.cancelStreamText}>取消</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// 处理特殊卡片类型
|
||||
if (item.content?.startsWith(CardType.WEIGHT_INPUT)) {
|
||||
const cardId = item.id;
|
||||
const preset = (() => {
|
||||
@@ -1220,377 +1028,109 @@ export default function CoachScreen() {
|
||||
}
|
||||
})();
|
||||
|
||||
// 初始化输入值（如果还没有的话）
|
||||
const currentValue = weightInputs[cardId] ?? preset;
|
||||
|
||||
return (
|
||||
<View style={{ gap: 8 }}>
|
||||
<Text style={[styles.bubbleText, { color: '#192126', fontWeight: '700' }]}>记录今日体重</Text>
|
||||
<View style={styles.weightRow}>
|
||||
<TextInput
|
||||
placeholder="例如 60.5"
|
||||
keyboardType="decimal-pad"
|
||||
value={currentValue}
|
||||
placeholderTextColor={'#687076'}
|
||||
style={styles.weightInput}
|
||||
onChangeText={(text) => setWeightInputs(prev => ({ ...prev, [cardId]: text }))}
|
||||
onSubmitEditing={(e) => handleSubmitWeight(e.nativeEvent.text, cardId)}
|
||||
returnKeyType="done"
|
||||
submitBehavior="blurAndSubmit"
|
||||
/>
|
||||
<Text style={styles.weightUnit}>kg</Text>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
style={styles.weightSaveBtn}
|
||||
onPress={() => handleSubmitWeight(currentValue, cardId)}
|
||||
<Animated.View
|
||||
entering={FadeInDown.springify().damping(18)}
|
||||
layout={Layout.springify().damping(18)}
|
||||
style={[styles.row, { justifyContent: 'flex-start' }]}
|
||||
>
|
||||
<Text style={{ color: '#192126', fontWeight: '700' }}>记录</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<Text style={{ color: '#687076', fontSize: 12 }}>按回车或点击保存，即可将该体重同步到账户并发送到对话。</Text>
|
||||
</View>
|
||||
<WeightInputCard
|
||||
cardId={cardId}
|
||||
weightInputs={weightInputs}
|
||||
onWeightInputChange={(id, value) => setWeightInputs(prev => ({ ...prev, [id]: value }))}
|
||||
onSaveWeight={(id) => handleSubmitWeight(weightInputs[id], id)}
|
||||
/>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
if (item.content?.startsWith(CardType.DIET_INPUT)) {
|
||||
return (
|
||||
<View style={{ gap: 12 }}>
|
||||
<Text style={[styles.bubbleText, { color: '#192126', fontWeight: '700' }]}>记录今日饮食</Text>
|
||||
<Text style={{ color: '#687076', fontSize: 14 }}>请选择记录方式：</Text>
|
||||
|
||||
<View style={styles.dietOptionsContainer}>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
style={styles.dietOptionBtn}
|
||||
onPress={() => handleDietTextInput(item.id)}
|
||||
<Animated.View
|
||||
entering={FadeInDown.springify().damping(18)}
|
||||
layout={Layout.springify().damping(18)}
|
||||
style={[styles.row, { justifyContent: 'flex-start' }]}
|
||||
>
|
||||
<View style={styles.dietOptionIconContainer}>
|
||||
<Ionicons name="create-outline" size={20} color="#192126" />
|
||||
</View>
|
||||
<View style={styles.dietOptionTextContainer}>
|
||||
<Text style={styles.dietOptionTitle}>文字记录</Text>
|
||||
<Text style={styles.dietOptionDesc}>输入吃了什么、大概多少克</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
style={styles.dietOptionBtn}
|
||||
onPress={() => handleDietPhotoInput(item.id)}
|
||||
>
|
||||
<View style={styles.dietOptionIconContainer}>
|
||||
<Ionicons name="camera-outline" size={20} color="#192126" />
|
||||
</View>
|
||||
<View style={styles.dietOptionTextContainer}>
|
||||
<Text style={styles.dietOptionTitle}>拍照识别</Text>
|
||||
<Text style={styles.dietOptionDesc}>拍摄食物照片进行AI分析</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<Text style={{ color: '#687076', fontSize: 12 }}>选择合适的方式记录您的饮食，Seal会根据您的饮食情况给出专业的营养建议。</Text>
|
||||
</View>
|
||||
<DietOptionsCard
|
||||
cardId={item.id}
|
||||
onSelectOption={(cardId, optionId) => {
|
||||
if (optionId === 'text') {
|
||||
handleDietTextInput(cardId);
|
||||
} else if (optionId === 'photo') {
|
||||
handleDietPhotoInput(cardId);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
if (item.content?.startsWith(CardType.DIET_TEXT_INPUT)) {
|
||||
const cardId = item.content.split('\n')?.[1] || '';
|
||||
const currentText = dietTextInputs[cardId] || '';
|
||||
|
||||
return (
|
||||
<View style={{ gap: 8 }}>
|
||||
<View style={styles.dietInputHeader}>
|
||||
<Text style={[styles.bubbleText, { color: '#192126', fontWeight: '700' }]}>文字记录饮食</Text>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
onPress={() => handleBackToDietOptions(cardId)}
|
||||
style={styles.dietBackBtn}
|
||||
<Animated.View
|
||||
entering={FadeInDown.springify().damping(18)}
|
||||
layout={Layout.springify().damping(18)}
|
||||
style={[styles.row, { justifyContent: 'flex-start' }]}
|
||||
>
|
||||
<Ionicons name="arrow-back" size={16} color="#687076" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<TextInput
|
||||
placeholder="例如：午餐吃了一碗米饭(150g)、红烧肉(100g)、青菜(80g)"
|
||||
placeholderTextColor={'#687076'}
|
||||
style={styles.dietTextInput}
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
value={currentText}
|
||||
onChangeText={(text) => setDietTextInputs(prev => ({ ...prev, [cardId]: text }))}
|
||||
returnKeyType="done"
|
||||
<DietInputCard
|
||||
cardId={cardId}
|
||||
dietTextInputs={dietTextInputs}
|
||||
onDietTextInputChange={(id, value) => setDietTextInputs(prev => ({ ...prev, [id]: value }))}
|
||||
onSubmitDietText={(id) => handleSubmitDietText(dietTextInputs[id], id)}
|
||||
onBackToDietOptions={handleBackToDietOptions}
|
||||
onShowDietPhotoActionSheet={(id) => {
|
||||
setCurrentCardId(id);
|
||||
setShowDietPhotoActionSheet(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
style={[styles.dietSubmitBtn, { opacity: currentText.trim() ? 1 : 0.5 }]}
|
||||
disabled={!currentText.trim()}
|
||||
onPress={() => handleSubmitDietText(currentText, cardId)}
|
||||
>
|
||||
<Text style={{ color: '#192126', fontWeight: '700' }}>发送记录</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={{ color: '#687076', fontSize: 12 }}>详细描述您的饮食内容和分量，有助于Seal给出更精准的营养分析和建议。</Text>
|
||||
</View>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
if (item.content?.startsWith(CardType.DIET_PLAN)) {
|
||||
const cardId = item.content.split('\n')?.[1] || '';
|
||||
|
||||
// 获取用户数据
|
||||
const weight = userProfile?.weight ? Number(userProfile.weight) : 58;
|
||||
const height = userProfile?.height ? Number(userProfile.height) : 160;
|
||||
|
||||
// 计算年龄
|
||||
const calculateAge = (birthday?: string): number => {
|
||||
if (!birthday) return 25; // 默认年龄
|
||||
try {
|
||||
const birthDate = new Date(birthday);
|
||||
const today = new Date();
|
||||
let age = today.getFullYear() - birthDate.getFullYear();
|
||||
const monthDiff = today.getMonth() - birthDate.getMonth();
|
||||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
|
||||
age--;
|
||||
}
|
||||
return age > 0 ? age : 25;
|
||||
} catch {
|
||||
return 25;
|
||||
}
|
||||
};
|
||||
|
||||
const age = calculateAge(userProfile?.birthDate);
|
||||
const gender = userProfile?.gender || 'female';
|
||||
const name = userProfile?.name || '用户';
|
||||
|
||||
// 计算相关数据
|
||||
const bmi = calculateBMI(weight, height);
|
||||
const bmiStatus = getBMIStatus(bmi);
|
||||
const dailyCalories = calculateDailyCalories(weight, height, age, gender);
|
||||
const nutrition = calculateNutritionDistribution(dailyCalories);
|
||||
|
||||
return (
|
||||
<View style={styles.dietPlanContainer}>
|
||||
{/* 标题部分 */}
|
||||
<View style={styles.dietPlanHeader}>
|
||||
<View style={styles.dietPlanTitleContainer}>
|
||||
<Ionicons name="restaurant-outline" size={20} color={theme.success} />
|
||||
<Text style={styles.dietPlanTitle}>我的饮食方案</Text>
|
||||
</View>
|
||||
<Text style={styles.dietPlanSubtitle}>MY DIET PLAN</Text>
|
||||
</View>
|
||||
|
||||
{/* 我的档案数据 */}
|
||||
<View style={styles.profileSection}>
|
||||
<Text style={styles.sectionTitle}>我的档案数据</Text>
|
||||
<View style={styles.profileDataRow}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<View style={styles.avatar}>
|
||||
<Text style={styles.avatarText}>{name.charAt(0)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.profileStats}>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{age}</Text>
|
||||
<Text style={styles.statLabel}>年龄/岁</Text>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{height.toFixed(1)}</Text>
|
||||
<Text style={styles.statLabel}>身高/CM</Text>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{weight.toFixed(1)}</Text>
|
||||
<Text style={styles.statLabel}>体重/KG</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* BMI部分 */}
|
||||
<View style={styles.bmiSection}>
|
||||
<View style={styles.bmiHeader}>
|
||||
<Text style={styles.sectionTitle}>当前BMI</Text>
|
||||
<View style={[styles.bmiStatusBadge, { backgroundColor: bmiStatus.color }]}>
|
||||
<Text style={styles.bmiStatusText}>{bmiStatus.status}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={styles.bmiValue}>{bmi.toFixed(1)}</Text>
|
||||
<View style={styles.bmiScale}>
|
||||
<View style={[styles.bmiBar, { backgroundColor: '#87CEEB' }]} />
|
||||
<View style={[styles.bmiBar, { backgroundColor: '#90EE90' }]} />
|
||||
<View style={[styles.bmiBar, { backgroundColor: '#FFD700' }]} />
|
||||
<View style={[styles.bmiBar, { backgroundColor: '#FFA07A' }]} />
|
||||
</View>
|
||||
<View style={styles.bmiLabels}>
|
||||
<Text style={styles.bmiLabel}>偏瘦</Text>
|
||||
<Text style={styles.bmiLabel}>正常</Text>
|
||||
<Text style={styles.bmiLabel}>偏胖</Text>
|
||||
<Text style={styles.bmiLabel}>肥胖</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 饮食目标 */}
|
||||
<View style={styles.collapsibleSection}>
|
||||
<View style={styles.collapsibleHeader}>
|
||||
<Text style={styles.sectionTitle}>饮食目标</Text>
|
||||
<Ionicons name="chevron-down" size={16} color="#687076" />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 目标体重 */}
|
||||
<View style={styles.collapsibleSection}>
|
||||
<View style={styles.collapsibleHeader}>
|
||||
<Text style={styles.sectionTitle}>目标体重</Text>
|
||||
<Ionicons name="chevron-down" size={16} color="#687076" />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 每日推荐摄入 */}
|
||||
<View style={styles.caloriesSection}>
|
||||
<View style={styles.caloriesHeader}>
|
||||
<Text style={styles.sectionTitle}>每日推荐摄入</Text>
|
||||
<Text style={styles.caloriesValue}>{dailyCalories}千卡</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.nutritionGrid}>
|
||||
<View style={styles.nutritionItem}>
|
||||
<Text style={styles.nutritionValue}>{nutrition.carbs}g</Text>
|
||||
<View style={styles.nutritionLabelRow}>
|
||||
<Ionicons name="nutrition-outline" size={16} color="#687076" />
|
||||
<Text style={styles.nutritionLabel}>碳水</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nutritionItem}>
|
||||
<Text style={styles.nutritionValue}>{nutrition.protein}g</Text>
|
||||
<View style={styles.nutritionLabelRow}>
|
||||
<Ionicons name="fitness-outline" size={16} color="#687076" />
|
||||
<Text style={styles.nutritionLabel}>蛋白质</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nutritionItem}>
|
||||
<Text style={styles.nutritionValue}>{nutrition.fat}g</Text>
|
||||
<View style={styles.nutritionLabelRow}>
|
||||
<Ionicons name="water-outline" size={16} color="#687076" />
|
||||
<Text style={styles.nutritionLabel}>脂肪</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={styles.nutritionNote}>
|
||||
根据您的基础代谢率，这到理想体重所需要的热量缺口计算得出每日的热量推荐值。
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 底部按钮 */}
|
||||
<TouchableOpacity
|
||||
style={styles.dietPlanButton}
|
||||
onPress={() => {
|
||||
// 这里可以添加跳转到详细饮食方案页面的逻辑
|
||||
<Animated.View
|
||||
entering={FadeInDown.springify().damping(18)}
|
||||
layout={Layout.springify().damping(18)}
|
||||
style={[styles.row, { justifyContent: 'flex-start' }]}
|
||||
>
|
||||
<DietPlanCard
|
||||
onGeneratePlan={() => {
|
||||
console.log('跳转到饮食方案详情');
|
||||
}}
|
||||
>
|
||||
<Ionicons name="restaurant" size={16} color="#FFFFFF" />
|
||||
<Text style={styles.dietPlanButtonText}>饮食方案</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
/>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
// 在流式回复过程中显示取消按钮
|
||||
if (isStreaming && pendingAssistantIdRef.current === item.id && item.content?.trim()) {
|
||||
// 普通消息使用 ChatMessageComponent
|
||||
return (
|
||||
<View style={{ gap: 8 }}>
|
||||
<Markdown style={markdownStyles} mergeStyle>
|
||||
{item.content}
|
||||
</Markdown>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
onPress={cancelCurrentRequest}
|
||||
style={styles.cancelStreamBtn}
|
||||
<Animated.View
|
||||
entering={isUser ? FadeInUp.springify().damping(18) : FadeInDown.springify().damping(18)}
|
||||
layout={Layout.springify().damping(18)}
|
||||
>
|
||||
<Ionicons name="stop-circle" size={16} color="#FF4444" />
|
||||
<Text style={styles.cancelStreamText}>停止生成</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// 检查是否有选择选项需要显示
|
||||
if (item.choices && item.choices.length > 0 && (item.interactionType === 'food_confirmation' || item.interactionType === 'selection')) {
|
||||
return (
|
||||
<View style={{ gap: 12, width: '100%' }}>
|
||||
<Markdown style={markdownStyles} mergeStyle>
|
||||
{item.content || ''}
|
||||
</Markdown>
|
||||
<View style={styles.choicesContainer}>
|
||||
{item.choices.map((choice) => {
|
||||
const isSelected = selectedChoices[item.id] === choice.id;
|
||||
const isAnySelected = selectedChoices[item.id] != null;
|
||||
const isPending = pendingChoiceConfirmation[item.id];
|
||||
const isDisabled = isAnySelected && !isSelected;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={choice.id}
|
||||
accessibilityRole="button"
|
||||
disabled={isDisabled || isPending}
|
||||
style={[
|
||||
styles.choiceButton,
|
||||
choice.recommended && styles.choiceButtonRecommended,
|
||||
isSelected && styles.choiceButtonSelected,
|
||||
isDisabled && styles.choiceButtonDisabled,
|
||||
]}
|
||||
onPress={() => {
|
||||
if (!isDisabled && !isPending) {
|
||||
Haptics.selectionAsync();
|
||||
<ChatMessageComponent
|
||||
message={item}
|
||||
onPreviewImage={setPreviewImageUri}
|
||||
onChoiceSelect={(messageId, choiceId) => {
|
||||
const choice = item.choices?.find(c => c.id === choiceId);
|
||||
if (choice) {
|
||||
handleChoiceSelection(choice, item);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<View style={styles.choiceContent}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, flex: 1 }}>
|
||||
{choice.emoji && (
|
||||
<Text style={{ fontSize: 16 }}>{choice.emoji}</Text>
|
||||
)}
|
||||
<Text style={[
|
||||
styles.choiceLabel,
|
||||
choice.recommended && styles.choiceLabelRecommended,
|
||||
isSelected && styles.choiceLabelSelected,
|
||||
isDisabled && styles.choiceLabelDisabled,
|
||||
]}>
|
||||
{choice.label}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.choiceStatusContainer}>
|
||||
{choice.recommended && !isSelected && (
|
||||
<View style={styles.recommendedBadge}>
|
||||
<Text style={styles.recommendedText}>推荐</Text>
|
||||
</View>
|
||||
)}
|
||||
{isSelected && isPending && (
|
||||
<ActivityIndicator size="small" color={theme.success} />
|
||||
)}
|
||||
{isSelected && !isPending && (
|
||||
<View style={styles.selectedBadge}>
|
||||
<Text style={styles.selectedText}>已选择</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
selectedChoices={selectedChoices}
|
||||
pendingChoiceConfirmation={pendingChoiceConfirmation}
|
||||
isStreaming={isStreaming && pendingAssistantIdRef.current === item.id}
|
||||
onCancelStream={cancelCurrentRequest}
|
||||
/>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Markdown style={markdownStyles} mergeStyle>
|
||||
{item.content || ''}
|
||||
</Markdown>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function insertWeightInputCard() {
|
||||
const id = `wcard_${Date.now()}`;
|
||||
@@ -1970,122 +1510,33 @@ export default function CoachScreen() {
|
||||
/>
|
||||
</View>
|
||||
|
||||
<BlurView
|
||||
intensity={18}
|
||||
tint={'light'}
|
||||
style={[styles.composerWrap, { paddingBottom: getTabBarBottomPadding() + 10, bottom: keyboardOffset }]}
|
||||
<View
|
||||
style={[{
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: keyboardOffset,
|
||||
paddingBottom: getTabBarBottomPadding() + 10
|
||||
}]}
|
||||
onLayout={(e) => {
|
||||
const h = e.nativeEvent.layout.height;
|
||||
if (h && Math.abs(h - composerHeight) > 0.5) setComposerHeight(h);
|
||||
}}
|
||||
>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
decelerationRate="fast"
|
||||
snapToAlignment="start"
|
||||
style={styles.chipsRowScroll}
|
||||
contentContainerStyle={{ paddingHorizontal: 6, gap: 8 }}
|
||||
>
|
||||
{chips.map((c) => (
|
||||
<TouchableOpacity
|
||||
key={c.key}
|
||||
style={[
|
||||
styles.chip,
|
||||
{
|
||||
borderColor: c.key === 'mood' ? `${theme.success}40` : `${theme.primary}40`,
|
||||
backgroundColor: c.key === 'mood' ? `${theme.success}15` : `${theme.primary}15`
|
||||
}
|
||||
]}
|
||||
onPress={c.action}
|
||||
>
|
||||
<Text style={[styles.chipText, { color: c.key === 'mood' ? theme.success : theme.text }]}>{c.label}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
{!!selectedImages.length && (
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
style={styles.imagesRow}
|
||||
contentContainerStyle={{ paddingHorizontal: 6, gap: 8 }}
|
||||
>
|
||||
{selectedImages.map((img) => (
|
||||
<View key={img.id} style={styles.imageThumbWrap}>
|
||||
<TouchableOpacity accessibilityRole="imagebutton" onPress={() => setPreviewImageUri(img.uploadedUrl || img.localUri)}>
|
||||
<Image source={{ uri: img.uploadedUrl || img.localUri }} style={styles.imageThumb} />
|
||||
</TouchableOpacity>
|
||||
{!!(img.progress > 0 && img.progress < 1) && (
|
||||
<View style={styles.imageProgressOverlay}>
|
||||
<Text style={styles.imageProgressText}>{Math.round((img.progress || 0) * 100)}%</Text>
|
||||
</View>
|
||||
)}
|
||||
{img.error && (
|
||||
<View style={styles.imageErrorOverlay}>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
onPress={() => uploadImage(img)}
|
||||
style={styles.imageRetryBtn}
|
||||
>
|
||||
<Ionicons name="refresh" size={12} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
<TouchableOpacity accessibilityRole="button" onPress={() => removeSelectedImage(img.id)} style={styles.imageRemoveBtn}>
|
||||
<Ionicons name="close" size={12} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
<View style={[styles.inputRow]}>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
onPress={pickImages}
|
||||
style={[styles.mediaBtn, { backgroundColor: `${theme.primary}20` }]}
|
||||
>
|
||||
<Ionicons name="image-outline" size={18} color={theme.text} />
|
||||
</TouchableOpacity>
|
||||
<TextInput
|
||||
placeholder="问我任何健康相关的问题，如营养、健身、生活管理等..."
|
||||
placeholderTextColor={theme.textMuted}
|
||||
style={[styles.input, { color: theme.text }]}
|
||||
value={input}
|
||||
onChangeText={setInput}
|
||||
multiline
|
||||
onSubmitEditing={() => send(input)}
|
||||
submitBehavior="blurAndSubmit"
|
||||
<ChatComposer
|
||||
input={input}
|
||||
onInputChange={setInput}
|
||||
onSend={() => send(input)}
|
||||
onPickImages={pickImages}
|
||||
onCancelRequest={cancelCurrentRequest}
|
||||
selectedImages={selectedImages}
|
||||
onRemoveImage={removeSelectedImage}
|
||||
onPreviewImage={setPreviewImageUri}
|
||||
isSending={isSending}
|
||||
isStreaming={isStreaming}
|
||||
chips={chips}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
disabled={(!input.trim() && selectedImages.length === 0) && !isSending}
|
||||
onPress={() => {
|
||||
if (isSending || isStreaming) {
|
||||
cancelCurrentRequest();
|
||||
} else {
|
||||
send(input);
|
||||
}
|
||||
}}
|
||||
style={[
|
||||
styles.sendBtn,
|
||||
{
|
||||
backgroundColor: (isSending || isStreaming) ? theme.danger : theme.primary,
|
||||
opacity: ((input.trim() || selectedImages.length > 0) || (isSending || isStreaming)) ? 1 : 0.5
|
||||
}
|
||||
]}
|
||||
>
|
||||
{isSending ? (
|
||||
<Ionicons name="stop" size={18} color="#fff" />
|
||||
) : isStreaming ? (
|
||||
<Ionicons name="stop" size={18} color="#fff" />
|
||||
) : (
|
||||
<Ionicons name="arrow-up" size={18} color={theme.onPrimary} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</BlurView>
|
||||
|
||||
{!isAtBottom && (
|
||||
<TouchableOpacity
|
||||
|
||||
@@ -1,31 +1,33 @@
|
||||
import NumberKeyboard from '@/components/NumberKeyboard';
|
||||
import { WeightRecordCard } from '@/components/weight/WeightRecordCard';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { getTabBarBottomPadding } from '@/constants/TabBar';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { fetchWeightHistory, updateUserProfile, WeightHistoryItem } from '@/store/userSlice';
|
||||
import { deleteWeightRecord, fetchWeightHistory, updateUserProfile, updateWeightRecord, WeightHistoryItem } from '@/store/userSlice';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import dayjs from 'dayjs';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { router } from 'expo-router';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
Modal,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View
|
||||
} from 'react-native';
|
||||
|
||||
|
||||
export default function WeightRecordsPage() {
|
||||
const dispatch = useAppDispatch();
|
||||
const userProfile = useAppSelector((s) => s.user.profile);
|
||||
const weightHistory = useAppSelector((s) => s.user.weightHistory);
|
||||
const [showWeightPicker, setShowWeightPicker] = useState(false);
|
||||
const [pickerType, setPickerType] = useState<'current' | 'initial' | 'target'>('current');
|
||||
const [pickerType, setPickerType] = useState<'current' | 'initial' | 'target' | 'edit'>('current');
|
||||
const [inputWeight, setInputWeight] = useState('');
|
||||
const [editingRecord, setEditingRecord] = useState<WeightHistoryItem | null>(null);
|
||||
|
||||
const colorScheme = useColorScheme();
|
||||
const themeColors = Colors[colorScheme ?? 'light'];
|
||||
@@ -74,6 +76,23 @@ export default function WeightRecordsPage() {
|
||||
setShowWeightPicker(true);
|
||||
};
|
||||
|
||||
const handleEditWeightRecord = (record: WeightHistoryItem) => {
|
||||
setPickerType('edit');
|
||||
setEditingRecord(record);
|
||||
initializeInput(parseFloat(record.weight));
|
||||
setShowWeightPicker(true);
|
||||
};
|
||||
|
||||
const handleDeleteWeightRecord = async (id: string) => {
|
||||
try {
|
||||
await dispatch(deleteWeightRecord(id) as any);
|
||||
await loadWeightHistory();
|
||||
} catch (error) {
|
||||
console.error('删除体重记录失败:', error);
|
||||
Alert.alert('错误', '删除体重记录失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
const handleWeightSave = async () => {
|
||||
const weight = parseFloat(inputWeight);
|
||||
if (isNaN(weight) || weight <= 0 || weight > 500) {
|
||||
@@ -88,20 +107,45 @@ export default function WeightRecordsPage() {
|
||||
} else if (pickerType === 'initial') {
|
||||
// Update initial weight in profile
|
||||
console.log('更新初始体重');
|
||||
|
||||
await dispatch(updateUserProfile({ initialWeight: weight }) as any);
|
||||
} else if (pickerType === 'target') {
|
||||
// Update target weight in profile
|
||||
await dispatch(updateUserProfile({ targetWeight: weight }) as any);
|
||||
} else if (pickerType === 'edit' && editingRecord) {
|
||||
await dispatch(updateWeightRecord({ id: editingRecord.id, weight }) as any);
|
||||
}
|
||||
setShowWeightPicker(false);
|
||||
setInputWeight('');
|
||||
setEditingRecord(null);
|
||||
await loadWeightHistory();
|
||||
} catch (error) {
|
||||
console.error('保存体重失败:', error);
|
||||
Alert.alert('错误', '保存体重失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
const handleNumberPress = (number: string) => {
|
||||
setInputWeight(prev => {
|
||||
// 防止输入多个0开头
|
||||
if (prev === '0' && number === '0') return prev;
|
||||
// 如果当前是0，输入非0数字时替换
|
||||
if (prev === '0' && number !== '0') return number;
|
||||
return prev + number;
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeletePress = () => {
|
||||
setInputWeight(prev => prev.slice(0, -1));
|
||||
};
|
||||
|
||||
const handleDecimalPress = () => {
|
||||
setInputWeight(prev => {
|
||||
if (prev.includes('.')) return prev;
|
||||
// 如果没有输入任何数字，自动添加0
|
||||
if (!prev) return '0.';
|
||||
return prev + '.';
|
||||
});
|
||||
};
|
||||
|
||||
// Process weight history data
|
||||
const sortedHistory = [...weightHistory]
|
||||
@@ -210,38 +254,13 @@ export default function WeightRecordsPage() {
|
||||
parseFloat(record.weight) - parseFloat(prevRecord.weight) : 0;
|
||||
|
||||
return (
|
||||
<View key={`${record.createdAt}-${recordIndex}`} style={styles.recordCard}>
|
||||
<View style={styles.recordHeader}>
|
||||
<Text style={styles.recordDateTime}>
|
||||
{dayjs(record.createdAt).format('MM月DD日 HH:mm')}
|
||||
</Text>
|
||||
{/* <TouchableOpacity style={styles.recordEditButton}>
|
||||
<Ionicons name="create-outline" size={16} color="#FF9500" />
|
||||
</TouchableOpacity> */}
|
||||
</View>
|
||||
<View style={styles.recordContent}>
|
||||
<Text style={styles.recordWeightLabel}>体重：</Text>
|
||||
<Text style={styles.recordWeightValue}>{record.weight}kg</Text>
|
||||
{Math.abs(weightChange) > 0 && (
|
||||
<View style={[
|
||||
styles.weightChangeTag,
|
||||
{ backgroundColor: weightChange < 0 ? '#E8F5E8' : '#FFF2E8' }
|
||||
]}>
|
||||
<Ionicons
|
||||
name={weightChange < 0 ? "arrow-down" : "arrow-up"}
|
||||
size={12}
|
||||
color={weightChange < 0 ? Colors.light.accentGreen : '#FF9500'}
|
||||
<WeightRecordCard
|
||||
key={`${record.createdAt}-${recordIndex}`}
|
||||
record={record}
|
||||
onPress={handleEditWeightRecord}
|
||||
onDelete={handleDeleteWeightRecord}
|
||||
weightChange={weightChange}
|
||||
/>
|
||||
<Text style={[
|
||||
styles.weightChangeText,
|
||||
{ color: weightChange < 0 ? Colors.light.accentGreen : '#FF9500' }
|
||||
]}>
|
||||
{Math.abs(weightChange).toFixed(1)}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
@@ -263,6 +282,7 @@ export default function WeightRecordsPage() {
|
||||
transparent
|
||||
onRequestClose={() => setShowWeightPicker(false)}
|
||||
>
|
||||
<View style={styles.modalContainer}>
|
||||
<TouchableOpacity
|
||||
style={styles.modalBackdrop}
|
||||
activeOpacity={1}
|
||||
@@ -278,28 +298,25 @@ export default function WeightRecordsPage() {
|
||||
{pickerType === 'current' && '记录体重'}
|
||||
{pickerType === 'initial' && '编辑初始体重'}
|
||||
{pickerType === 'target' && '编辑目标体重'}
|
||||
{pickerType === 'edit' && '编辑体重记录'}
|
||||
</Text>
|
||||
<View style={{ width: 24 }} />
|
||||
</View>
|
||||
|
||||
<View style={styles.modalContent}>
|
||||
{/* Weight Input Section */}
|
||||
<ScrollView
|
||||
style={styles.modalContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Weight Display Section */}
|
||||
<View style={styles.inputSection}>
|
||||
<View style={styles.weightInputContainer}>
|
||||
<View style={styles.weightIcon}>
|
||||
<Ionicons name="scale-outline" size={20} color="#6366F1" />
|
||||
</View>
|
||||
<View style={styles.inputWrapper}>
|
||||
<TextInput
|
||||
style={[styles.weightInput, { color: themeColors.text }]}
|
||||
placeholder="输入体重"
|
||||
placeholderTextColor={themeColors.textSecondary}
|
||||
value={inputWeight}
|
||||
onChangeText={setInputWeight}
|
||||
keyboardType="decimal-pad"
|
||||
autoFocus={true}
|
||||
selectTextOnFocus={true}
|
||||
/>
|
||||
<Text style={[styles.weightDisplay, { color: inputWeight ? themeColors.text : themeColors.textSecondary }]}>
|
||||
{inputWeight || '输入体重'}
|
||||
</Text>
|
||||
<Text style={[styles.unitLabel, { color: themeColors.textSecondary }]}>kg</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -333,7 +350,17 @@ export default function WeightRecordsPage() {
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* Custom Number Keyboard */}
|
||||
<NumberKeyboard
|
||||
onNumberPress={handleNumberPress}
|
||||
onDeletePress={handleDeletePress}
|
||||
onDecimalPress={handleDecimalPress}
|
||||
hasDecimal={inputWeight.includes('.')}
|
||||
maxLength={6}
|
||||
currentValue={inputWeight}
|
||||
/>
|
||||
|
||||
{/* Save Button */}
|
||||
<View style={styles.modalFooter}>
|
||||
@@ -349,6 +376,7 @@ export default function WeightRecordsPage() {
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
@@ -486,62 +514,7 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '700',
|
||||
color: '#192126',
|
||||
},
|
||||
recordCard: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
marginBottom: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.06,
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
},
|
||||
recordHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
recordDateTime: {
|
||||
fontSize: 14,
|
||||
color: '#687076',
|
||||
fontWeight: '500',
|
||||
},
|
||||
recordEditButton: {
|
||||
padding: 6,
|
||||
borderRadius: 8,
|
||||
backgroundColor: 'rgba(255, 149, 0, 0.1)',
|
||||
},
|
||||
recordContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
recordWeightLabel: {
|
||||
fontSize: 16,
|
||||
color: '#687076',
|
||||
fontWeight: '500',
|
||||
},
|
||||
recordWeightValue: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#192126',
|
||||
marginLeft: 4,
|
||||
flex: 1,
|
||||
},
|
||||
weightChangeTag: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
marginLeft: 12,
|
||||
},
|
||||
weightChangeText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginLeft: 2,
|
||||
},
|
||||
|
||||
emptyContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
@@ -562,6 +535,9 @@ const styles = StyleSheet.create({
|
||||
color: '#687076',
|
||||
},
|
||||
// Modal Styles
|
||||
modalContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
modalBackdrop: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
@@ -573,7 +549,8 @@ const styles = StyleSheet.create({
|
||||
bottom: 0,
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
maxHeight: '80%',
|
||||
maxHeight: '85%',
|
||||
minHeight: 500,
|
||||
},
|
||||
modalHeader: {
|
||||
flexDirection: 'row',
|
||||
@@ -588,8 +565,8 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '600',
|
||||
},
|
||||
modalContent: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
inputSection: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
@@ -619,11 +596,12 @@ const styles = StyleSheet.create({
|
||||
borderBottomColor: '#E5E7EB',
|
||||
paddingBottom: 6,
|
||||
},
|
||||
weightInput: {
|
||||
weightDisplay: {
|
||||
flex: 1,
|
||||
fontSize: 24,
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
paddingVertical: 4,
|
||||
},
|
||||
unitLabel: {
|
||||
fontSize: 18,
|
||||
@@ -637,7 +615,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
quickSelectionSection: {
|
||||
paddingHorizontal: 4,
|
||||
marginBottom: 8,
|
||||
marginBottom: 20,
|
||||
},
|
||||
quickSelectionTitle: {
|
||||
fontSize: 16,
|
||||
@@ -675,7 +653,8 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '600',
|
||||
},
|
||||
modalFooter: {
|
||||
padding: 20,
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 16,
|
||||
paddingBottom: 25,
|
||||
},
|
||||
saveButton: {
|
||||
|
||||
147
components/NumberKeyboard.tsx
Normal file
147
components/NumberKeyboard.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import React from 'react';
|
||||
import {
|
||||
Dimensions,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
interface NumberKeyboardProps {
|
||||
onNumberPress: (number: string) => void;
|
||||
onDeletePress: () => void;
|
||||
onDecimalPress: () => void;
|
||||
hasDecimal?: boolean;
|
||||
maxLength?: number;
|
||||
currentValue?: string;
|
||||
}
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
const keyWidth = (width - 80) / 3; // 减去左右边距和间隙
|
||||
|
||||
export default function NumberKeyboard({
|
||||
onNumberPress,
|
||||
onDeletePress,
|
||||
onDecimalPress,
|
||||
hasDecimal = false,
|
||||
maxLength = 6,
|
||||
currentValue = '',
|
||||
}: NumberKeyboardProps) {
|
||||
const handleNumberPress = (number: string) => {
|
||||
if (currentValue.length >= maxLength) return;
|
||||
// 防止输入多个0开头
|
||||
if (currentValue === '0' && number === '0') return;
|
||||
// 如果当前是0，输入非0数字时替换
|
||||
if (currentValue === '0' && number !== '0') {
|
||||
// 这里不需要replace，直接传递number即可
|
||||
return;
|
||||
}
|
||||
onNumberPress(number);
|
||||
};
|
||||
|
||||
const handleDecimalPress = () => {
|
||||
if (hasDecimal || currentValue.includes('.')) return;
|
||||
onDecimalPress();
|
||||
};
|
||||
|
||||
const renderKey = (
|
||||
value: string,
|
||||
onPress: () => void,
|
||||
style?: any,
|
||||
textStyle?: any,
|
||||
disabled?: boolean
|
||||
) => (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.key,
|
||||
{ width: keyWidth },
|
||||
style,
|
||||
disabled && styles.keyDisabled
|
||||
]}
|
||||
onPress={onPress}
|
||||
disabled={disabled}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
{value === 'delete' ? (
|
||||
<Ionicons name="backspace-outline" size={24} color="#374151" />
|
||||
) : (
|
||||
<Text style={[styles.keyText, textStyle, disabled && styles.keyTextDisabled]}>
|
||||
{value}
|
||||
</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.row}>
|
||||
{renderKey('1', () => handleNumberPress('1'))}
|
||||
{renderKey('2', () => handleNumberPress('2'))}
|
||||
{renderKey('3', () => handleNumberPress('3'))}
|
||||
</View>
|
||||
<View style={styles.row}>
|
||||
{renderKey('4', () => handleNumberPress('4'))}
|
||||
{renderKey('5', () => handleNumberPress('5'))}
|
||||
{renderKey('6', () => handleNumberPress('6'))}
|
||||
</View>
|
||||
<View style={styles.row}>
|
||||
{renderKey('7', () => handleNumberPress('7'))}
|
||||
{renderKey('8', () => handleNumberPress('8'))}
|
||||
{renderKey('9', () => handleNumberPress('9'))}
|
||||
</View>
|
||||
<View style={styles.row}>
|
||||
{renderKey(
|
||||
'.',
|
||||
handleDecimalPress,
|
||||
undefined,
|
||||
undefined,
|
||||
hasDecimal || currentValue.includes('.')
|
||||
)}
|
||||
{renderKey('0', () => handleNumberPress('0'))}
|
||||
{renderKey('delete', onDeletePress)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: '#F9FAFB',
|
||||
paddingVertical: 20,
|
||||
paddingHorizontal: 20,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#E5E7EB',
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 12,
|
||||
},
|
||||
key: {
|
||||
height: 50,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
elevation: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
},
|
||||
keyDisabled: {
|
||||
backgroundColor: '#F3F4F6',
|
||||
opacity: 0.5,
|
||||
},
|
||||
keyText: {
|
||||
fontSize: 20,
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
},
|
||||
keyTextDisabled: {
|
||||
color: '#9CA3AF',
|
||||
},
|
||||
});
|
||||
246
components/coach/ChatComposer.tsx
Normal file
246
components/coach/ChatComposer.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { Image } from 'expo-image';
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
|
||||
import QuickChips from './QuickChips';
|
||||
import { QuickChip, SelectedImage } from './types';
|
||||
|
||||
interface ChatComposerProps {
|
||||
input: string;
|
||||
onInputChange: (text: string) => void;
|
||||
onSend: () => void;
|
||||
onPickImages: () => void;
|
||||
onCancelRequest: () => void;
|
||||
selectedImages: SelectedImage[];
|
||||
onRemoveImage: (id: string) => void;
|
||||
onPreviewImage: (uri: string) => void;
|
||||
isSending: boolean;
|
||||
isStreaming: boolean;
|
||||
chips: QuickChip[];
|
||||
}
|
||||
|
||||
const ChatComposer: React.FC<ChatComposerProps> = ({
|
||||
input,
|
||||
onInputChange,
|
||||
onSend,
|
||||
onPickImages,
|
||||
onCancelRequest,
|
||||
selectedImages,
|
||||
onRemoveImage,
|
||||
onPreviewImage,
|
||||
isSending,
|
||||
isStreaming,
|
||||
chips
|
||||
}) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const theme = Colors[colorScheme ?? 'light'];
|
||||
|
||||
const hasContent = input.trim() || selectedImages.length > 0;
|
||||
const isActive = isSending || isStreaming;
|
||||
|
||||
return (
|
||||
<BlurView intensity={95} tint={colorScheme} style={styles.composerWrap}>
|
||||
{/* 快捷操作按钮 */}
|
||||
<QuickChips chips={chips} />
|
||||
|
||||
{/* 选中的图片预览 */}
|
||||
{selectedImages.length > 0 && (
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
style={styles.imagesRow}
|
||||
contentContainerStyle={styles.imagesRowContent}
|
||||
>
|
||||
{selectedImages.map((img) => (
|
||||
<View key={img.id} style={styles.imageThumbWrap}>
|
||||
<TouchableOpacity
|
||||
onPress={() => onPreviewImage(img.localUri)}
|
||||
style={styles.imageThumb}
|
||||
>
|
||||
<Image
|
||||
source={{ uri: img.localUri }}
|
||||
style={styles.imageThumb}
|
||||
contentFit="cover"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* 上传进度 */}
|
||||
{img.progress > 0 && img.progress < 1 && (
|
||||
<View style={styles.imageProgressOverlay}>
|
||||
<Text style={styles.imageProgressText}>
|
||||
{Math.round(img.progress * 100)}%
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 上传错误 */}
|
||||
{img.error && (
|
||||
<View style={styles.imageErrorOverlay}>
|
||||
<TouchableOpacity
|
||||
onPress={() => {/* 重试上传逻辑 */ }}
|
||||
style={styles.imageRetryBtn}
|
||||
>
|
||||
<Ionicons name="refresh" size={12} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 删除按钮 */}
|
||||
<TouchableOpacity
|
||||
onPress={() => onRemoveImage(img.id)}
|
||||
style={styles.imageRemoveBtn}
|
||||
>
|
||||
<Ionicons name="close" size={12} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
{/* 输入区域 */}
|
||||
<View style={styles.inputRow}>
|
||||
<TouchableOpacity
|
||||
onPress={onPickImages}
|
||||
style={[styles.mediaBtn, { backgroundColor: `${theme.primary}20` }]}
|
||||
>
|
||||
<Ionicons name="image-outline" size={18} color={theme.text} />
|
||||
</TouchableOpacity>
|
||||
|
||||
<TextInput
|
||||
placeholder="问我任何健康相关的问题，如营养、健身、生活管理等..."
|
||||
placeholderTextColor={theme.textMuted}
|
||||
style={[styles.input, { color: theme.text }]}
|
||||
value={input}
|
||||
onChangeText={onInputChange}
|
||||
multiline
|
||||
onSubmitEditing={onSend}
|
||||
submitBehavior="blurAndSubmit"
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
disabled={!hasContent && !isActive}
|
||||
onPress={isActive ? onCancelRequest : onSend}
|
||||
style={[
|
||||
styles.sendBtn,
|
||||
{
|
||||
backgroundColor: isActive ? theme.danger : theme.primary,
|
||||
opacity: (hasContent || isActive) ? 1 : 0.5
|
||||
}
|
||||
]}
|
||||
>
|
||||
{isActive ? (
|
||||
<Ionicons name="stop" size={18} color="#fff" />
|
||||
) : (
|
||||
<Ionicons name="arrow-up" size={18} color={theme.onPrimary} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</BlurView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
composerWrap: {
|
||||
paddingTop: 8,
|
||||
paddingHorizontal: 10,
|
||||
borderTopWidth: 0,
|
||||
},
|
||||
imagesRow: {
|
||||
maxHeight: 92,
|
||||
marginBottom: 8,
|
||||
},
|
||||
imagesRowContent: {
|
||||
gap: 8,
|
||||
paddingHorizontal: 6,
|
||||
},
|
||||
imageThumbWrap: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
backgroundColor: 'rgba(122,90,248,0.08)',
|
||||
},
|
||||
imageThumb: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
imageRemoveBtn: {
|
||||
position: 'absolute',
|
||||
right: 4,
|
||||
top: 4,
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.45)',
|
||||
},
|
||||
imageProgressOverlay: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
imageProgressText: {
|
||||
color: '#fff',
|
||||
fontWeight: '700',
|
||||
fontSize: 12,
|
||||
},
|
||||
imageErrorOverlay: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(255,0,0,0.35)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
imageRetryBtn: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
},
|
||||
inputRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 8,
|
||||
},
|
||||
mediaBtn: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 6,
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
fontSize: 15,
|
||||
maxHeight: 120,
|
||||
minHeight: 40,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 6,
|
||||
textAlignVertical: 'center',
|
||||
},
|
||||
sendBtn: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
export default ChatComposer;
|
||||
450
components/coach/ChatMessage.tsx
Normal file
450
components/coach/ChatMessage.tsx
Normal file
@@ -0,0 +1,450 @@
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { Image } from 'expo-image';
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import Markdown from 'react-native-markdown-display';
|
||||
import { ChatMessage, MessageAttachment } from './types';
|
||||
|
||||
interface MessageAttachmentComponentProps {
|
||||
attachment: MessageAttachment;
|
||||
onPreview?: (uri: string) => void;
|
||||
}
|
||||
|
||||
const MessageAttachmentComponent: React.FC<MessageAttachmentComponentProps> = ({
|
||||
attachment,
|
||||
onPreview
|
||||
}) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const theme = Colors[colorScheme ?? 'light'];
|
||||
|
||||
if (attachment.type === 'image') {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={styles.imageAttachment}
|
||||
onPress={() => onPreview?.(attachment.url)}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Image
|
||||
source={{ uri: attachment.url }}
|
||||
style={styles.attachmentImage}
|
||||
contentFit="cover"
|
||||
/>
|
||||
{attachment.uploadProgress !== undefined && attachment.uploadProgress < 1 && (
|
||||
<View style={styles.attachmentProgressOverlay}>
|
||||
<Text style={styles.attachmentProgressText}>
|
||||
{Math.round(attachment.uploadProgress * 100)}%
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{attachment.uploadError && (
|
||||
<View style={styles.attachmentErrorOverlay}>
|
||||
<Text style={styles.attachmentErrorText}>上传失败</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
if (attachment.type === 'video') {
|
||||
return (
|
||||
<View style={styles.videoAttachment}>
|
||||
<View style={styles.videoPlaceholder}>
|
||||
<Ionicons name="play-circle" size={32} color="#fff" />
|
||||
{attachment.filename && (
|
||||
<Text style={styles.videoFilename}>{attachment.filename}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (attachment.type === 'file') {
|
||||
return (
|
||||
<View style={styles.fileAttachment}>
|
||||
<Ionicons name="document" size={20} color={theme.text} />
|
||||
<Text style={[styles.fileFilename, { color: theme.text }]}>
|
||||
{attachment.filename || '未知文件'}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
interface ChatMessageComponentProps {
|
||||
message: ChatMessage;
|
||||
onPreviewImage?: (uri: string) => void;
|
||||
onChoiceSelect?: (messageId: string, choiceId: string) => void;
|
||||
selectedChoices?: Record<string, string>;
|
||||
pendingChoiceConfirmation?: Record<string, boolean>;
|
||||
isStreaming?: boolean;
|
||||
onCancelStream?: () => void;
|
||||
}
|
||||
|
||||
const ChatMessageComponent: React.FC<ChatMessageComponentProps> = ({
|
||||
message,
|
||||
onPreviewImage,
|
||||
onChoiceSelect,
|
||||
selectedChoices,
|
||||
pendingChoiceConfirmation,
|
||||
isStreaming,
|
||||
onCancelStream
|
||||
}) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const theme = Colors[colorScheme ?? 'light'];
|
||||
|
||||
const isUser = message.role === 'user';
|
||||
const isAssistant = message.role === 'assistant';
|
||||
|
||||
return (
|
||||
<View style={[styles.row, isUser && styles.userRow]}>
|
||||
{isAssistant && (
|
||||
<View style={[styles.avatar, { backgroundColor: theme.primary }]}>
|
||||
<Text style={styles.avatarText}>AI</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={[
|
||||
styles.bubble,
|
||||
{
|
||||
backgroundColor: isUser ? theme.primary : theme.surface,
|
||||
alignSelf: isUser ? 'flex-end' : 'flex-start',
|
||||
maxWidth: '85%',
|
||||
}
|
||||
]}>
|
||||
{/* 文本内容 */}
|
||||
{message.content ? (
|
||||
isUser ? (
|
||||
<Text style={[styles.bubbleText, { color: theme.onPrimary }]}>
|
||||
{message.content}
|
||||
</Text>
|
||||
) : (
|
||||
<Markdown
|
||||
style={{
|
||||
body: { color: theme.text, fontSize: 15, lineHeight: 22 },
|
||||
paragraph: { marginTop: 2, marginBottom: 2 },
|
||||
bullet_list: { marginVertical: 4 },
|
||||
ordered_list: { marginVertical: 4 },
|
||||
list_item: { flexDirection: 'row' },
|
||||
code_inline: {
|
||||
backgroundColor: 'rgba(0,0,0,0.06)',
|
||||
borderRadius: 4,
|
||||
paddingHorizontal: 4,
|
||||
paddingVertical: 2,
|
||||
},
|
||||
code_block: {
|
||||
backgroundColor: 'rgba(0,0,0,0.06)',
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
fence: {
|
||||
backgroundColor: 'rgba(0,0,0,0.06)',
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
heading1: { fontSize: 20, fontWeight: '800', marginVertical: 6 },
|
||||
heading2: { fontSize: 18, fontWeight: '800', marginVertical: 6 },
|
||||
heading3: { fontSize: 16, fontWeight: '800', marginVertical: 6 },
|
||||
link: { color: '#246BFD' },
|
||||
}}
|
||||
>
|
||||
{message.content}
|
||||
</Markdown>
|
||||
)
|
||||
) : null}
|
||||
|
||||
{/* 附件 */}
|
||||
{message.attachments && message.attachments.length > 0 && (
|
||||
<View style={styles.attachmentsContainer}>
|
||||
{message.attachments.map((attachment) => (
|
||||
<MessageAttachmentComponent
|
||||
key={attachment.id}
|
||||
attachment={attachment}
|
||||
onPreview={onPreviewImage}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 选择选项 */}
|
||||
{message.choices && message.choices.length > 0 && (
|
||||
<View style={styles.choicesContainer}>
|
||||
{message.choices.map((choice) => {
|
||||
const isSelected = selectedChoices?.[message.id] === choice.id;
|
||||
const isLoading = pendingChoiceConfirmation?.[message.id];
|
||||
const isDisabled = isLoading || (selectedChoices?.[message.id] && !isSelected) || false;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={choice.id}
|
||||
style={[
|
||||
styles.choiceButton,
|
||||
!!choice.recommended && styles.choiceButtonRecommended,
|
||||
isSelected && styles.choiceButtonSelected,
|
||||
isDisabled && styles.choiceButtonDisabled,
|
||||
]}
|
||||
onPress={() => onChoiceSelect?.(message.id, choice.id)}
|
||||
disabled={isDisabled}
|
||||
>
|
||||
<View style={styles.choiceContent}>
|
||||
<Text style={[
|
||||
styles.choiceLabel,
|
||||
!!choice.recommended && styles.choiceLabelRecommended,
|
||||
isSelected && styles.choiceLabelSelected,
|
||||
isDisabled && styles.choiceLabelDisabled,
|
||||
]}>
|
||||
{choice.emoji ? `${choice.emoji} ` : ''}{choice.label}
|
||||
</Text>
|
||||
|
||||
<View style={styles.choiceStatusContainer}>
|
||||
{!!choice.recommended && !isSelected && (
|
||||
<View style={styles.recommendedBadge}>
|
||||
<Text style={styles.recommendedText}>推荐</Text>
|
||||
</View>
|
||||
)}
|
||||
{isSelected && (
|
||||
<View style={styles.selectedBadge}>
|
||||
<Text style={styles.selectedText}>已选择</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 流式回复控制 */}
|
||||
{isAssistant && isStreaming && !message.content && (
|
||||
<View style={styles.streamingContainer}>
|
||||
<Text style={[styles.bubbleText, { color: theme.text }]}>正在思考...</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.cancelStreamBtn}
|
||||
onPress={onCancelStream}
|
||||
>
|
||||
<Ionicons name="stop" size={12} color="#FF4444" />
|
||||
<Text style={styles.cancelStreamText}>停止</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
gap: 8,
|
||||
marginVertical: 6,
|
||||
},
|
||||
userRow: {
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
avatar: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
avatarText: {
|
||||
color: '#192126',
|
||||
fontSize: 12,
|
||||
fontWeight: '800',
|
||||
},
|
||||
bubble: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 16,
|
||||
},
|
||||
bubbleText: {
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
},
|
||||
attachmentsContainer: {
|
||||
marginTop: 8,
|
||||
gap: 6,
|
||||
},
|
||||
imageAttachment: {
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
},
|
||||
attachmentImage: {
|
||||
width: '100%',
|
||||
minHeight: 120,
|
||||
maxHeight: 200,
|
||||
borderRadius: 12,
|
||||
},
|
||||
attachmentProgressOverlay: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 12,
|
||||
},
|
||||
attachmentProgressText: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
},
|
||||
attachmentErrorOverlay: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(255,0,0,0.4)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 12,
|
||||
},
|
||||
attachmentErrorText: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
},
|
||||
videoAttachment: {
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'rgba(0,0,0,0.1)',
|
||||
},
|
||||
videoPlaceholder: {
|
||||
height: 120,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
},
|
||||
videoFilename: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
marginTop: 4,
|
||||
textAlign: 'center',
|
||||
},
|
||||
fileAttachment: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 12,
|
||||
backgroundColor: 'rgba(0,0,0,0.06)',
|
||||
borderRadius: 8,
|
||||
gap: 8,
|
||||
},
|
||||
fileFilename: {
|
||||
flex: 1,
|
||||
fontSize: 14,
|
||||
},
|
||||
choicesContainer: {
|
||||
gap: 8,
|
||||
width: '100%',
|
||||
marginTop: 8,
|
||||
},
|
||||
choiceButton: {
|
||||
backgroundColor: 'rgba(255,255,255,0.9)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#7a5af84d',
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
width: '100%',
|
||||
minWidth: 0,
|
||||
},
|
||||
choiceButtonRecommended: {
|
||||
borderColor: '#7a5af899',
|
||||
backgroundColor: '#7a5af81a',
|
||||
},
|
||||
choiceButtonSelected: {
|
||||
borderColor: '#19b36e',
|
||||
backgroundColor: '#19b36e33',
|
||||
borderWidth: 2,
|
||||
},
|
||||
choiceButtonDisabled: {
|
||||
backgroundColor: 'rgba(0,0,0,0.05)',
|
||||
borderColor: 'rgba(0,0,0,0.1)',
|
||||
opacity: 0.5,
|
||||
},
|
||||
choiceContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
},
|
||||
choiceLabel: {
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
color: '#192126',
|
||||
flex: 1,
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
choiceLabelRecommended: {
|
||||
color: '#19b36e',
|
||||
},
|
||||
choiceLabelSelected: {
|
||||
color: '#19b36e',
|
||||
fontWeight: '700',
|
||||
},
|
||||
choiceLabelDisabled: {
|
||||
color: '#687076',
|
||||
},
|
||||
choiceStatusContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
recommendedBadge: {
|
||||
backgroundColor: '#7a5af8cc',
|
||||
borderRadius: 6,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 2,
|
||||
},
|
||||
recommendedText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
color: '#19b36e',
|
||||
},
|
||||
selectedBadge: {
|
||||
backgroundColor: '#19b36e',
|
||||
borderRadius: 6,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 2,
|
||||
},
|
||||
selectedText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
streamingContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 12,
|
||||
},
|
||||
cancelStreamBtn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
backgroundColor: 'rgba(255,68,68,0.1)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,68,68,0.3)',
|
||||
},
|
||||
cancelStreamText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
color: '#FF4444',
|
||||
},
|
||||
});
|
||||
|
||||
export default ChatMessageComponent;
|
||||
128
components/coach/DietInputCard.tsx
Normal file
128
components/coach/DietInputCard.tsx
Normal file
@@ -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;
|
||||
123
components/coach/DietOptionsCard.tsx
Normal file
123
components/coach/DietOptionsCard.tsx
Normal file
@@ -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;
|
||||
425
components/coach/DietPlanCard.tsx
Normal file
425
components/coach/DietPlanCard.tsx
Normal file
@@ -0,0 +1,425 @@
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useAppSelector } from '@/hooks/redux';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { selectUserAge } from '@/store/userSlice';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import React, { useState } from 'react';
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
|
||||
interface DietPlanCardProps {
|
||||
onGeneratePlan: () => void;
|
||||
}
|
||||
|
||||
const DietPlanCard: React.FC<DietPlanCardProps> = ({ onGeneratePlan }) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const theme = Colors[colorScheme ?? 'light'];
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
|
||||
const userProfile = useAppSelector((s) => s.user?.profile);
|
||||
const userAge = useAppSelector(selectUserAge);
|
||||
|
||||
// 计算BMI
|
||||
const calculateBMI = () => {
|
||||
if (!userProfile?.weight || !userProfile?.height) return null;
|
||||
const weight = Number(userProfile.weight);
|
||||
const height = Number(userProfile.height) / 100; // 转换为米
|
||||
return weight / (height * height);
|
||||
};
|
||||
|
||||
const bmi = calculateBMI();
|
||||
|
||||
// 获取BMI状态
|
||||
const getBMIStatus = (bmi: number) => {
|
||||
if (bmi < 18.5) return { text: '偏瘦', color: '#3B82F6' };
|
||||
if (bmi < 24) return { text: '正常', color: '#10B981' };
|
||||
if (bmi < 28) return { text: '超重', color: '#F59E0B' };
|
||||
return { text: '肥胖', color: '#EF4444' };
|
||||
};
|
||||
|
||||
const bmiStatus = bmi ? getBMIStatus(bmi) : null;
|
||||
|
||||
// 估算基础代谢率 (BMR)
|
||||
const calculateBMR = () => {
|
||||
if (!userProfile?.weight || !userProfile?.height || userAge === null) return null;
|
||||
|
||||
const weight = Number(userProfile.weight);
|
||||
const height = Number(userProfile.height);
|
||||
const age = userAge;
|
||||
const gender = userProfile.gender;
|
||||
|
||||
// 使用 Mifflin-St Jeor 公式
|
||||
if (gender === 'male') {
|
||||
return Math.round(10 * weight + 6.25 * height - 5 * age + 5);
|
||||
} else {
|
||||
return Math.round(10 * weight + 6.25 * height - 5 * age - 161);
|
||||
}
|
||||
};
|
||||
|
||||
const bmr = calculateBMR();
|
||||
const dailyCalories = bmr ? Math.round(bmr * 1.4) : null; // 轻度活动系数
|
||||
|
||||
return (
|
||||
<View style={[styles.dietPlanContainer, {
|
||||
backgroundColor: theme.surface,
|
||||
borderColor: `${theme.primary}33`
|
||||
}]}>
|
||||
{/* 头部 */}
|
||||
<View style={styles.dietPlanHeader}>
|
||||
<View style={styles.dietPlanTitleContainer}>
|
||||
<Ionicons name="nutrition" size={24} color={theme.primary} />
|
||||
<Text style={[styles.dietPlanTitle, { color: theme.text }]}>个性化饮食方案</Text>
|
||||
</View>
|
||||
<Text style={[styles.dietPlanSubtitle, { color: theme.textMuted }]}>
|
||||
基于你的身体数据定制
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 用户资料概览 */}
|
||||
{userProfile && (
|
||||
<View style={styles.profileSection}>
|
||||
<Text style={[styles.sectionTitle, { color: theme.text }]}>个人资料</Text>
|
||||
<View style={styles.profileDataRow}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<View style={[styles.avatar, { backgroundColor: theme.primary }]}>
|
||||
<Text style={styles.avatarText}>
|
||||
{userProfile.name?.charAt(0) || 'U'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.profileStats}>
|
||||
{userProfile.weight && (
|
||||
<View style={styles.statItem}>
|
||||
<Text style={[styles.statValue, { color: theme.text }]}>
|
||||
{userProfile.weight}
|
||||
</Text>
|
||||
<Text style={[styles.statLabel, { color: theme.textMuted }]}>kg</Text>
|
||||
</View>
|
||||
)}
|
||||
{userProfile.height && (
|
||||
<View style={styles.statItem}>
|
||||
<Text style={[styles.statValue, { color: theme.text }]}>
|
||||
{userProfile.height}
|
||||
</Text>
|
||||
<Text style={[styles.statLabel, { color: theme.textMuted }]}>cm</Text>
|
||||
</View>
|
||||
)}
|
||||
{userAge !== null && (
|
||||
<View style={styles.statItem}>
|
||||
<Text style={[styles.statValue, { color: theme.text }]}>
|
||||
{userAge}
|
||||
</Text>
|
||||
<Text style={[styles.statLabel, { color: theme.textMuted }]}>岁</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* BMI 部分 */}
|
||||
{bmi && bmiStatus && (
|
||||
<View style={styles.bmiSection}>
|
||||
<View style={styles.bmiHeader}>
|
||||
<Text style={[styles.sectionTitle, { color: theme.text }]}>BMI 指数</Text>
|
||||
<View style={[styles.bmiStatusBadge, { backgroundColor: bmiStatus.color }]}>
|
||||
<Text style={styles.bmiStatusText}>{bmiStatus.text}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.bmiValue, { color: theme.text }]}>
|
||||
{bmi.toFixed(1)}
|
||||
</Text>
|
||||
|
||||
{/* BMI 刻度条 */}
|
||||
<View style={styles.bmiScale}>
|
||||
<View style={[styles.bmiBar, { backgroundColor: '#3B82F6' }]} />
|
||||
<View style={[styles.bmiBar, { backgroundColor: '#10B981' }]} />
|
||||
<View style={[styles.bmiBar, { backgroundColor: '#F59E0B' }]} />
|
||||
<View style={[styles.bmiBar, { backgroundColor: '#EF4444' }]} />
|
||||
</View>
|
||||
<View style={styles.bmiLabels}>
|
||||
<Text style={[styles.bmiLabel, { color: theme.textMuted }]}>偏瘦</Text>
|
||||
<Text style={[styles.bmiLabel, { color: theme.textMuted }]}>正常</Text>
|
||||
<Text style={[styles.bmiLabel, { color: theme.textMuted }]}>超重</Text>
|
||||
<Text style={[styles.bmiLabel, { color: theme.textMuted }]}>肥胖</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 可折叠的详细信息 */}
|
||||
<TouchableOpacity
|
||||
style={styles.collapsibleSection}
|
||||
onPress={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
<View style={styles.collapsibleHeader}>
|
||||
<Text style={[styles.sectionTitle, { color: theme.text }]}>营养需求分析</Text>
|
||||
<Ionicons
|
||||
name={isExpanded ? 'chevron-up' : 'chevron-down'}
|
||||
size={20}
|
||||
color={theme.text}
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{isExpanded && (
|
||||
<>
|
||||
{/* 卡路里需求 */}
|
||||
{dailyCalories && (
|
||||
<View style={styles.caloriesSection}>
|
||||
<View style={styles.caloriesHeader}>
|
||||
<Text style={[styles.sectionTitle, { color: theme.text }]}>每日卡路里需求</Text>
|
||||
<Text style={[styles.caloriesValue, { color: '#10B981' }]}>
|
||||
{dailyCalories} kcal
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 营养素分配 */}
|
||||
<View style={styles.nutritionGrid}>
|
||||
<View style={styles.nutritionItem}>
|
||||
<Text style={[styles.nutritionValue, { color: theme.text }]}>55%</Text>
|
||||
<View style={styles.nutritionLabelRow}>
|
||||
<View style={[styles.nutritionDot, { backgroundColor: '#3B82F6' }]} />
|
||||
<Text style={[styles.nutritionLabel, { color: theme.textMuted }]}>碳水</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nutritionItem}>
|
||||
<Text style={[styles.nutritionValue, { color: theme.text }]}>20%</Text>
|
||||
<View style={styles.nutritionLabelRow}>
|
||||
<View style={[styles.nutritionDot, { backgroundColor: '#10B981' }]} />
|
||||
<Text style={[styles.nutritionLabel, { color: theme.textMuted }]}>蛋白质</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.nutritionItem}>
|
||||
<Text style={[styles.nutritionValue, { color: theme.text }]}>25%</Text>
|
||||
<View style={styles.nutritionLabelRow}>
|
||||
<View style={[styles.nutritionDot, { backgroundColor: '#F59E0B' }]} />
|
||||
<Text style={[styles.nutritionLabel, { color: theme.textMuted }]}>脂肪</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={[styles.nutritionNote, { color: theme.textMuted }]}>
|
||||
* 营养素比例基于一般健康成人推荐标准，具体需求因人而异
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 生成方案按钮 */}
|
||||
<TouchableOpacity
|
||||
style={[styles.dietPlanButton, { backgroundColor: '#10B981' }]}
|
||||
onPress={onGeneratePlan}
|
||||
>
|
||||
<Ionicons name="sparkles" size={16} color="#FFFFFF" />
|
||||
<Text style={styles.dietPlanButtonText}>生成个性化饮食方案</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* 使用次数提示 */}
|
||||
<View style={styles.usageCountContainer}>
|
||||
<Ionicons name="information-circle" size={16} color={theme.primary} />
|
||||
<Text style={[styles.usageText, { color: theme.primary }]}>
|
||||
AI 将根据你的身体数据和健康目标制定专属方案
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
dietPlanContainer: {
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
gap: 16,
|
||||
borderWidth: 1,
|
||||
maxWidth: '85%',
|
||||
alignSelf: 'flex-start',
|
||||
minWidth: 300
|
||||
},
|
||||
dietPlanHeader: {
|
||||
gap: 4,
|
||||
},
|
||||
dietPlanTitleContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
dietPlanTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
},
|
||||
dietPlanSubtitle: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
letterSpacing: 1,
|
||||
},
|
||||
profileSection: {
|
||||
gap: 12,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
},
|
||||
profileDataRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 16,
|
||||
},
|
||||
avatarContainer: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
avatar: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
avatarText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
},
|
||||
profileStats: {
|
||||
flexDirection: 'row',
|
||||
flex: 1,
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
statItem: {
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
statValue: {
|
||||
fontSize: 20,
|
||||
fontWeight: '800',
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 12,
|
||||
},
|
||||
bmiSection: {
|
||||
gap: 12,
|
||||
},
|
||||
bmiHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
bmiStatusBadge: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
},
|
||||
bmiStatusText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
bmiValue: {
|
||||
fontSize: 32,
|
||||
fontWeight: '800',
|
||||
textAlign: 'center',
|
||||
},
|
||||
bmiScale: {
|
||||
flexDirection: 'row',
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
overflow: 'hidden',
|
||||
gap: 1,
|
||||
},
|
||||
bmiBar: {
|
||||
flex: 1,
|
||||
height: '100%',
|
||||
},
|
||||
bmiLabels: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
bmiLabel: {
|
||||
fontSize: 11,
|
||||
},
|
||||
collapsibleSection: {
|
||||
paddingVertical: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: 'rgba(0,0,0,0.06)',
|
||||
},
|
||||
collapsibleHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
caloriesSection: {
|
||||
gap: 12,
|
||||
},
|
||||
caloriesHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
caloriesValue: {
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
},
|
||||
nutritionGrid: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
gap: 16,
|
||||
},
|
||||
nutritionItem: {
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
nutritionValue: {
|
||||
fontSize: 24,
|
||||
fontWeight: '800',
|
||||
},
|
||||
nutritionLabelRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
nutritionDot: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
},
|
||||
nutritionLabel: {
|
||||
fontSize: 12,
|
||||
},
|
||||
nutritionNote: {
|
||||
fontSize: 12,
|
||||
lineHeight: 16,
|
||||
textAlign: 'center',
|
||||
marginTop: 8,
|
||||
},
|
||||
dietPlanButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 12,
|
||||
marginTop: 8,
|
||||
},
|
||||
dietPlanButtonText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
usageCountContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
backgroundColor: 'rgba(122,90,248,0.08)',
|
||||
},
|
||||
usageText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
export default DietPlanCard;
|
||||
66
components/coach/QuickChips.tsx
Normal file
66
components/coach/QuickChips.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, Text, TouchableOpacity } from 'react-native';
|
||||
import { QuickChip } from './types';
|
||||
|
||||
interface QuickChipsProps {
|
||||
chips: QuickChip[];
|
||||
}
|
||||
|
||||
const QuickChips: React.FC<QuickChipsProps> = ({ chips }) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const theme = Colors[colorScheme ?? 'light'];
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
style={styles.chipsRowScroll}
|
||||
contentContainerStyle={styles.chipsRow}
|
||||
>
|
||||
{chips.map((chip) => (
|
||||
<TouchableOpacity
|
||||
key={chip.key}
|
||||
style={[
|
||||
styles.chip,
|
||||
{
|
||||
borderColor: theme.primary,
|
||||
backgroundColor: 'transparent',
|
||||
}
|
||||
]}
|
||||
onPress={chip.action}
|
||||
>
|
||||
<Text style={[styles.chipText, { color: theme.primary }]}>
|
||||
{chip.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
chipsRowScroll: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
chipsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
paddingHorizontal: 6,
|
||||
},
|
||||
chip: {
|
||||
paddingHorizontal: 10,
|
||||
height: 34,
|
||||
borderRadius: 18,
|
||||
borderWidth: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
chipText: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
|
||||
export default QuickChips;
|
||||
83
components/coach/WeightInputCard.tsx
Normal file
83
components/coach/WeightInputCard.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
|
||||
|
||||
interface WeightInputCardProps {
|
||||
cardId: string;
|
||||
weightInputs: Record<string, string>;
|
||||
onWeightInputChange: (cardId: string, value: string) => void;
|
||||
onSaveWeight: (cardId: string) => void;
|
||||
}
|
||||
|
||||
const WeightInputCard: React.FC<WeightInputCardProps> = ({
|
||||
cardId,
|
||||
weightInputs,
|
||||
onWeightInputChange,
|
||||
onSaveWeight
|
||||
}) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const theme = Colors[colorScheme ?? 'light'];
|
||||
|
||||
return (
|
||||
<View style={[styles.bubble, { backgroundColor: theme.surface }]}>
|
||||
<View style={styles.weightRow}>
|
||||
<TextInput
|
||||
style={[styles.weightInput, { color: theme.text, borderColor: theme.border }]}
|
||||
placeholder="输入体重"
|
||||
placeholderTextColor={theme.textMuted}
|
||||
value={weightInputs[cardId] || ''}
|
||||
onChangeText={(text) => onWeightInputChange(cardId, text)}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
<Text style={[styles.weightUnit, { color: theme.text }]}>kg</Text>
|
||||
<TouchableOpacity
|
||||
style={[styles.weightSaveBtn, { backgroundColor: theme.primary }]}
|
||||
onPress={() => onSaveWeight(cardId)}
|
||||
>
|
||||
<Text style={[styles.saveButtonText, { color: theme.onPrimary }]}>保存</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
bubble: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 16,
|
||||
maxWidth: '85%',
|
||||
alignSelf: 'flex-start',
|
||||
minWidth: 250
|
||||
},
|
||||
weightRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
weightInput: {
|
||||
flex: 1,
|
||||
height: 36,
|
||||
borderWidth: 1,
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 10,
|
||||
backgroundColor: 'rgba(255,255,255,0.9)',
|
||||
},
|
||||
weightUnit: {
|
||||
fontWeight: '700',
|
||||
},
|
||||
weightSaveBtn: {
|
||||
height: 36,
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
saveButtonText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
|
||||
export default WeightInputCard;
|
||||
11
components/coach/index.ts
Normal file
11
components/coach/index.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
// Coach 组件导出
|
||||
export { default as ChatComposer } from './ChatComposer';
|
||||
export { default as ChatMessage } from './ChatMessage';
|
||||
export { default as DietInputCard } from './DietInputCard';
|
||||
export { default as DietOptionsCard } from './DietOptionsCard';
|
||||
export { default as DietPlanCard } from './DietPlanCard';
|
||||
export { default as QuickChips } from './QuickChips';
|
||||
export { default as WeightInputCard } from './WeightInputCard';
|
||||
|
||||
// 类型导出
|
||||
export * from './types';
|
||||
88
components/coach/types.ts
Normal file
88
components/coach/types.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
export type Role = 'user' | 'assistant';
|
||||
|
||||
// 附件类型枚举
|
||||
export type AttachmentType = 'image' | 'video' | 'file';
|
||||
|
||||
// 附件数据结构
|
||||
export type MessageAttachment = {
|
||||
id: string;
|
||||
type: AttachmentType;
|
||||
url: string;
|
||||
localUri?: string; // 本地URI，用于上传中的显示
|
||||
filename?: string;
|
||||
size?: number;
|
||||
duration?: number; // 视频时长（秒）
|
||||
thumbnail?: string; // 视频缩略图
|
||||
width?: number;
|
||||
height?: number;
|
||||
uploadProgress?: number; // 上传进度 0-1
|
||||
uploadError?: string; // 上传错误信息
|
||||
};
|
||||
|
||||
// AI选择选项数据结构
|
||||
export type AiChoiceOption = {
|
||||
id: string;
|
||||
label: string;
|
||||
value: any;
|
||||
recommended?: boolean;
|
||||
emoji?: string;
|
||||
};
|
||||
|
||||
// AI响应数据结构
|
||||
export type AiResponseData = {
|
||||
content: string;
|
||||
choices?: AiChoiceOption[];
|
||||
interactionType?: 'text' | 'food_confirmation' | 'selection';
|
||||
pendingData?: any;
|
||||
context?: any;
|
||||
};
|
||||
|
||||
// 重构后的消息数据结构
|
||||
export type ChatMessage = {
|
||||
id: string;
|
||||
role: Role;
|
||||
content: string; // 文本内容
|
||||
attachments?: MessageAttachment[]; // 附件列表
|
||||
choices?: AiChoiceOption[]; // 选择选项（仅用于assistant消息）
|
||||
interactionType?: string; // 交互类型
|
||||
pendingData?: any; // 待确认数据
|
||||
context?: any; // 上下文信息
|
||||
};
|
||||
|
||||
// 卡片类型常量定义
|
||||
export const CardType = {
|
||||
WEIGHT_INPUT: '__WEIGHT_INPUT_CARD__',
|
||||
DIET_INPUT: '__DIET_INPUT_CARD__',
|
||||
DIET_TEXT_INPUT: '__DIET_TEXT_INPUT__',
|
||||
DIET_PLAN: '__DIET_PLAN_CARD__',
|
||||
} as const;
|
||||
|
||||
export type CardType = typeof CardType[keyof typeof CardType];
|
||||
|
||||
// 定义路由参数类型
|
||||
export type CoachScreenParams = {
|
||||
name?: string;
|
||||
action?: 'diet' | 'weight' | 'mood' | 'workout';
|
||||
subAction?: 'record' | 'photo' | 'text' | 'card';
|
||||
meal?: 'breakfast' | 'lunch' | 'dinner' | 'snack';
|
||||
message?: string;
|
||||
};
|
||||
|
||||
// 快捷操作按钮类型
|
||||
export type QuickChip = {
|
||||
key: string;
|
||||
label: string;
|
||||
action: () => void;
|
||||
};
|
||||
|
||||
// 选中的图片类型
|
||||
export type SelectedImage = {
|
||||
id: string;
|
||||
localUri: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
progress: number;
|
||||
uploadedKey?: string;
|
||||
uploadedUrl?: string;
|
||||
error?: string;
|
||||
};
|
||||
@@ -327,16 +327,6 @@ export function WeightHistoryCard() {
|
||||
color={Colors.light.primary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={styles.addButton}
|
||||
onPress={(e) => {
|
||||
e.stopPropagation();
|
||||
navigateToCoach();
|
||||
}}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Ionicons name="add" size={16} color={Colors.light.primary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
183
components/weight/WeightRecordCard.tsx
Normal file
183
components/weight/WeightRecordCard.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { WeightHistoryItem } from '@/store/userSlice';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import dayjs from 'dayjs';
|
||||
import React, { useRef } from 'react';
|
||||
import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { Swipeable } from 'react-native-gesture-handler';
|
||||
|
||||
interface WeightRecordCardProps {
|
||||
record: WeightHistoryItem;
|
||||
onPress?: (record: WeightHistoryItem) => void;
|
||||
onDelete?: (recordId: string) => void;
|
||||
weightChange?: number;
|
||||
}
|
||||
|
||||
export const WeightRecordCard: React.FC<WeightRecordCardProps> = ({
|
||||
record,
|
||||
onPress,
|
||||
onDelete,
|
||||
weightChange = 0
|
||||
}) => {
|
||||
const swipeableRef = useRef<Swipeable>(null);
|
||||
|
||||
// 处理删除操作
|
||||
const handleDelete = () => {
|
||||
Alert.alert(
|
||||
'确认删除',
|
||||
`确定要删除这条体重记录吗？此操作无法撤销。`,
|
||||
[
|
||||
{
|
||||
text: '取消',
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
const recordId = record.id || record.createdAt;
|
||||
onDelete?.(recordId);
|
||||
swipeableRef.current?.close();
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染删除按钮
|
||||
const renderRightActions = () => {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={styles.deleteButton}
|
||||
onPress={handleDelete}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Ionicons name="trash" size={20} color="#FFFFFF" />
|
||||
<Text style={styles.deleteButtonText}>删除</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Swipeable
|
||||
ref={swipeableRef}
|
||||
renderRightActions={renderRightActions}
|
||||
rightThreshold={40}
|
||||
overshootRight={false}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={styles.recordCard}
|
||||
onPress={() => onPress?.(record)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.recordHeader}>
|
||||
<Text style={styles.recordDateTime}>
|
||||
{dayjs(record.createdAt).format('MM月DD日 HH:mm')}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.recordEditButton}
|
||||
onPress={() => onPress?.(record)}
|
||||
>
|
||||
<Ionicons name="create-outline" size={16} color="#FF9500" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.recordContent}>
|
||||
<Text style={styles.recordWeightLabel}>体重：</Text>
|
||||
<Text style={styles.recordWeightValue}>{record.weight}kg</Text>
|
||||
{Math.abs(weightChange) > 0 && (
|
||||
<View style={[
|
||||
styles.weightChangeTag,
|
||||
{ backgroundColor: weightChange < 0 ? '#E8F5E8' : '#FFF2E8' }
|
||||
]}>
|
||||
<Ionicons
|
||||
name={weightChange < 0 ? "arrow-down" : "arrow-up"}
|
||||
size={12}
|
||||
color={weightChange < 0 ? Colors.light.accentGreen : '#FF9500'}
|
||||
/>
|
||||
<Text style={[
|
||||
styles.weightChangeText,
|
||||
{ color: weightChange < 0 ? Colors.light.accentGreen : '#FF9500' }
|
||||
]}>
|
||||
{Math.abs(weightChange).toFixed(1)}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</Swipeable>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
recordCard: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
marginBottom: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.06,
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
},
|
||||
recordHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
recordDateTime: {
|
||||
fontSize: 14,
|
||||
color: '#687076',
|
||||
fontWeight: '500',
|
||||
},
|
||||
recordEditButton: {
|
||||
padding: 6,
|
||||
borderRadius: 8,
|
||||
backgroundColor: 'rgba(255, 149, 0, 0.1)',
|
||||
},
|
||||
recordContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
recordWeightLabel: {
|
||||
fontSize: 16,
|
||||
color: '#687076',
|
||||
fontWeight: '500',
|
||||
},
|
||||
recordWeightValue: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#192126',
|
||||
marginLeft: 4,
|
||||
flex: 1,
|
||||
},
|
||||
weightChangeTag: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
marginLeft: 12,
|
||||
},
|
||||
weightChangeText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginLeft: 2,
|
||||
},
|
||||
deleteButton: {
|
||||
backgroundColor: '#EF4444',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: 80,
|
||||
borderRadius: 16,
|
||||
marginBottom: 12,
|
||||
marginLeft: 8,
|
||||
},
|
||||
deleteButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginTop: 4,
|
||||
},
|
||||
});
|
||||
75
docs/weight-records-edit-delete.md
Normal file
75
docs/weight-records-edit-delete.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# 体重记录编辑和删除功能
|
||||
|
||||
## 功能概述
|
||||
|
||||
为体重记录页面添加了编辑和删除功能，用户可以：
|
||||
|
||||
1. **点击体重记录卡片**：唤出编辑弹窗，修改体重值
|
||||
2. **左滑体重记录卡片**：显示删除按钮，支持删除记录
|
||||
|
||||
## 实现细节
|
||||
|
||||
### 1. 新增 Redux 操作
|
||||
|
||||
在 `store/userSlice.ts` 中添加了：
|
||||
|
||||
- `deleteWeightRecord`: 删除体重记录
|
||||
- `updateWeightRecord`: 更新体重记录
|
||||
- 为 `WeightHistoryItem` 类型添加了可选的 `id` 字段
|
||||
|
||||
### 2. 新增组件
|
||||
|
||||
创建了 `components/WeightRecordCard.tsx` 组件：
|
||||
|
||||
- 使用 `react-native-gesture-handler` 的 `Swipeable` 实现左滑删除
|
||||
- 支持点击编辑功能
|
||||
- 显示体重变化趋势（上升/下降箭头）
|
||||
- 参考 `GoalCard` 的交互设计
|
||||
|
||||
### 3. 更新体重记录页面
|
||||
|
||||
在 `app/weight-records.tsx` 中：
|
||||
|
||||
- 集成新的 `WeightRecordCard` 组件
|
||||
- 添加编辑体重记录的处理逻辑
|
||||
- 添加删除体重记录的处理逻辑
|
||||
- 扩展弹窗支持编辑现有记录
|
||||
|
||||
## 用户交互流程
|
||||
|
||||
### 编辑体重记录
|
||||
|
||||
1. 用户点击任意体重记录卡片
|
||||
2. 弹出编辑弹窗，标题显示"编辑体重记录"
|
||||
3. 输入框预填充当前体重值
|
||||
4. 用户修改体重值并确认
|
||||
5. 调用 API 更新记录，刷新列表
|
||||
|
||||
### 删除体重记录
|
||||
|
||||
1. 用户左滑体重记录卡片
|
||||
2. 显示红色删除按钮
|
||||
3. 点击删除按钮，弹出确认对话框
|
||||
4. 用户确认后调用 API 删除记录
|
||||
5. 从列表中移除该记录
|
||||
|
||||
## API 接口
|
||||
|
||||
需要后端支持以下接口：
|
||||
|
||||
```
|
||||
DELETE /api/users/weight-history/:recordId
|
||||
PUT /api/users/weight-history/:recordId
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 由于原始数据结构中没有 `id` 字段，目前使用 `createdAt` 作为备用标识符
|
||||
2. 建议后端返回的体重记录包含唯一的 `id` 字段
|
||||
3. 删除和编辑操作都会重新加载体重历史数据以确保数据一致性
|
||||
|
||||
## 依赖
|
||||
|
||||
- `react-native-gesture-handler`: 已安装，用于左滑手势
|
||||
- 现有的 Redux 状态管理
|
||||
- 现有的 API 服务层
|
||||
@@ -18,16 +18,32 @@
|
||||
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
|
||||
<subviews>
|
||||
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" misplaced="YES" image="SplashScreenLogo" translatesAutoresizingMaskIntoConstraints="NO" id="EXPO-SplashScreen" userLabel="SplashScreenLogo">
|
||||
<rect key="frame" x="90" y="295" width="260" height="367"/>
|
||||
<rect key="frame" x="155" y="340" width="130" height="209"/>
|
||||
<constraints>
|
||||
<constraint firstAttribute="height" secondItem="EXPO-SplashScreen" secondAttribute="width" id="logo-height-constraint"/>
|
||||
</constraints>
|
||||
</imageView>
|
||||
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="海豹健康" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="EXPO-AppName" userLabel="AppName">
|
||||
<rect key="frame" x="127" y="525" width="186" height="62"/>
|
||||
<fontDescription key="fontDescription" type="boldSystem" pointSize="32"/>
|
||||
<color key="textColor" red="0.20000000000000001" green="0.20000000000000001" blue="0.20000000000000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
|
||||
<nil key="highlightedColor"/>
|
||||
</label>
|
||||
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="你的 AI 健康帮手" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="EXPO-Subtitle" userLabel="Subtitle">
|
||||
<rect key="frame" x="127" y="595" width="186" height="30"/>
|
||||
<fontDescription key="fontDescription" type="system" pointSize="18"/>
|
||||
<color key="textColor" red="0.50000000000000000" green="0.50000000000000000" blue="0.50000000000000000" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
|
||||
<nil key="highlightedColor"/>
|
||||
</label>
|
||||
</subviews>
|
||||
<viewLayoutGuide key="safeArea" id="Rmq-lb-GrQ"/>
|
||||
<color key="backgroundColor" name="SplashScreenBackground"/>
|
||||
<constraints>
|
||||
<constraint firstItem="EXPO-SplashScreen" firstAttribute="centerY" secondItem="EXPO-ContainerView" secondAttribute="centerY" id="1a145271b085b6ce89b1405a310f5b1bb7656595"/>
|
||||
<constraint firstItem="EXPO-SplashScreen" firstAttribute="centerY" secondItem="EXPO-ContainerView" secondAttribute="centerY" constant="-50" id="1a145271b085b6ce89b1405a310f5b1bb7656595"/>
|
||||
<constraint firstItem="EXPO-AppName" firstAttribute="centerX" secondItem="EXPO-ContainerView" secondAttribute="centerX" id="app-name-center-x"/>
|
||||
<constraint firstItem="EXPO-AppName" firstAttribute="top" secondItem="EXPO-SplashScreen" secondAttribute="bottom" constant="30" id="app-name-top-spacing"/>
|
||||
<constraint firstItem="EXPO-Subtitle" firstAttribute="centerX" secondItem="EXPO-ContainerView" secondAttribute="centerX" id="subtitle-center-x"/>
|
||||
<constraint firstItem="EXPO-Subtitle" firstAttribute="top" secondItem="EXPO-AppName" secondAttribute="bottom" constant="10" id="subtitle-top-spacing"/>
|
||||
<constraint firstItem="EXPO-SplashScreen" firstAttribute="centerX" secondItem="EXPO-ContainerView" secondAttribute="centerX" id="cad2ab56f97c5429bf29decf850647a4216861d4"/>
|
||||
<constraint firstItem="EXPO-SplashScreen" firstAttribute="width" secondItem="EXPO-ContainerView" secondAttribute="width" multiplier="0.6" id="logo-width-constraint"/>
|
||||
</constraints>
|
||||
@@ -35,13 +51,13 @@
|
||||
</viewController>
|
||||
<placeholder placeholderIdentifier="IBFirstResponder" id="EXPO-PLACEHOLDER-1" userLabel="First Responder" sceneMemberID="firstResponder"/>
|
||||
</objects>
|
||||
<point key="canvasLocation" x="-0.76335877862595414" y="0.0"/>
|
||||
<point key="canvasLocation" x="-1.3636363636363638" y="0.0"/>
|
||||
</scene>
|
||||
</scenes>
|
||||
<resources>
|
||||
<image name="SplashScreenLogo" width="682.66668701171875" height="682.66668701171875"/>
|
||||
<namedColor name="SplashScreenBackground">
|
||||
<color red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
|
||||
<color red="0.96" green="0.96" blue="0.96" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
|
||||
</namedColor>
|
||||
</resources>
|
||||
</document>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { api, loadPersistedToken, setAuthToken, STORAGE_KEYS } from '@/services/api';
|
||||
import { updateUser, UpdateUserDto } from '@/services/users';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
import { createAsyncThunk, createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
export type Gender = 'male' | 'female' | '';
|
||||
|
||||
@@ -24,6 +25,7 @@ export type UserProfile = {
|
||||
};
|
||||
|
||||
export type WeightHistoryItem = {
|
||||
id: string; // 添加 id 字段用于删除和更新操作
|
||||
weight: string;
|
||||
source: string;
|
||||
createdAt: string;
|
||||
@@ -211,6 +213,32 @@ export const updateUserProfile = createAsyncThunk(
|
||||
}
|
||||
);
|
||||
|
||||
// 删除体重记录
|
||||
export const deleteWeightRecord = createAsyncThunk(
|
||||
'user/deleteWeightRecord',
|
||||
async (recordId: string, { rejectWithValue }) => {
|
||||
try {
|
||||
await api.delete(`/api/users/weight-records/${recordId}`);
|
||||
return recordId;
|
||||
} catch (err: any) {
|
||||
return rejectWithValue(err?.message ?? '删除体重记录失败');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 更新体重记录
|
||||
export const updateWeightRecord = createAsyncThunk(
|
||||
'user/updateWeightRecord',
|
||||
async ({ id, weight }: { id: string; weight: number }, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await api.put<WeightHistoryItem>(`/api/users/weight-records/${id}`, { weight });
|
||||
return data;
|
||||
} catch (err: any) {
|
||||
return rejectWithValue(err?.message ?? '更新体重记录失败');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const userSlice = createSlice({
|
||||
name: 'user',
|
||||
initialState,
|
||||
@@ -286,9 +314,54 @@ const userSlice = createSlice({
|
||||
})
|
||||
.addCase(updateUserProfile.rejected, (state, action) => {
|
||||
state.error = (action.payload as string) ?? '更新用户资料失败';
|
||||
})
|
||||
.addCase(deleteWeightRecord.fulfilled, (state, action) => {
|
||||
state.weightHistory = state.weightHistory.filter(record =>
|
||||
record.id !== action.payload && record.createdAt !== action.payload
|
||||
);
|
||||
})
|
||||
.addCase(deleteWeightRecord.rejected, (state, action) => {
|
||||
state.error = (action.payload as string) ?? '删除体重记录失败';
|
||||
})
|
||||
.addCase(updateWeightRecord.fulfilled, (state, action) => {
|
||||
const index = state.weightHistory.findIndex(record =>
|
||||
record.id === action.payload.id || record.createdAt === action.payload.id
|
||||
);
|
||||
if (index !== -1) {
|
||||
state.weightHistory[index] = { ...state.weightHistory[index], ...action.payload };
|
||||
}
|
||||
})
|
||||
.addCase(updateWeightRecord.rejected, (state, action) => {
|
||||
state.error = (action.payload as string) ?? '更新体重记录失败';
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const { updateProfile, setDailyStepsGoal, setDailyCaloriesGoal, setPilatesPurposes } = userSlice.actions;
|
||||
|
||||
// Selectors
|
||||
export const selectUserProfile = (state: { user: UserState }) => state.user.profile;
|
||||
|
||||
// 计算用户年龄的 selector
|
||||
export const selectUserAge = createSelector(
|
||||
[selectUserProfile],
|
||||
(profile) => {
|
||||
if (!profile?.birthDate) return null;
|
||||
|
||||
const birthDate = dayjs(profile.birthDate);
|
||||
const today = dayjs();
|
||||
|
||||
// 计算精确年龄（考虑月份和日期）
|
||||
let age = today.year() - birthDate.year();
|
||||
|
||||
// 如果今年的生日还没到，年龄减1
|
||||
if (today.month() < birthDate.month() ||
|
||||
(today.month() === birthDate.month() && today.date() < birthDate.date())) {
|
||||
age--;
|
||||
}
|
||||
|
||||
return age;
|
||||
}
|
||||
);
|
||||
|
||||
export default userSlice.reducer;
|
||||
Reference in New Issue
Block a user