Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 | /**
* 宠物体重记录列表组件
*/
import { useState, useEffect } from 'react';
import { Alert, ScrollView } from 'react-native';
import { YStack, XStack, Text, Card } from 'tamagui';
import { Plus, Edit3, Trash2, Activity } from '@tamagui/lucide-icons';
import { Button } from '@/src/design-system/components';
import { supabasePetHealthService } from '@/src/lib/supabase';
import type { PetWeightRecord } from '@/src/types/petHealth';
import { AddWeightRecordModal } from './AddWeightRecordModal';
interface Props {
petId: number;
petName: string;
onRefresh?: () => void; // 通知父组件刷新
}
export function PetWeightRecords({ petId, petName, onRefresh }: Props) {
const [records, setRecords] = useState<PetWeightRecord[]>([]);
const [loading, setLoading] = useState(true);
const [showAddModal, setShowAddModal] = useState(false);
const [editingRecord, setEditingRecord] = useState<PetWeightRecord | undefined>(undefined);
useEffect(() => {
loadRecords();
}, [petId]);
const loadRecords = async () => {
setLoading(true);
const { data } = await supabasePetHealthService.getPetWeightRecords(petId);
setRecords(data || []);
setLoading(false);
};
const handleSuccess = async () => {
await loadRecords();
setEditingRecord(undefined); // 清除编辑状态
onRefresh?.(); // 通知父组件刷新图表
};
const handleEdit = (record: PetWeightRecord) => {
setEditingRecord(record);
setShowAddModal(true);
};
const handleCloseModal = () => {
setShowAddModal(false);
setEditingRecord(undefined);
};
const handleDelete = (id: number) => {
Alert.alert('删除记录', '确定要删除这条体重记录吗？', [
{ text: '取消', style: 'cancel' },
{
text: '删除',
style: 'destructive',
onPress: async () => {
await supabasePetHealthService.deleteWeightRecord(id);
await loadRecords();
onRefresh?.(); // 通知父组件刷新图表
},
},
]);
};
const formatDate = (dateStr: string) => {
return new Date(dateStr).toLocaleDateString('zh-CN');
};
const getMoodEmoji = (mood?: string | null) => {
switch (mood) {
case 'active':
return '😊';
case 'normal':
return '😐';
case 'lethargic':
return '😔';
default:
return '';
}
};
return (
<YStack flex={1} gap="$3">
{/* 标题栏 */}
<XStack justifyContent="space-between" alignItems="center">
<XStack alignItems="center" gap="$2">
<Activity size={20} />
<Text fontSize="$6" fontWeight="600">
历史记录
</Text>
</XStack>
<Button
size="sm"
variant="primary"
leftIcon={<Plus size={16} />}
onPress={() => setShowAddModal(true)}
>
添加记录
</Button>
</XStack>
{/* 记录列表 */}
<YStack gap="$2">
<ScrollView showsVerticalScrollIndicator={false}>
<YStack gap="$2">
{loading ? (
<Text textAlign="center" color="$gray10">
加载中...
</Text>
) : records.length === 0 ? (
<Card padding="$4" alignItems="center">
<Text color="$gray10">暂无记录</Text>
</Card>
) : (
records.map((record) => (
<Card key={record.id} padding="$3">
<XStack justifyContent="space-between" alignItems="center">
<YStack flex={1} gap="$1">
<XStack alignItems="center" gap="$2">
<Text fontSize="$6" fontWeight="600">
{record.weight} {record.unit}
</Text>
{record.mood && <Text fontSize="$5">{getMoodEmoji(record.mood)}</Text>}
</XStack>
<Text fontSize="$3" color="$gray11">
{formatDate(record.record_date)}
</Text>
{record.notes && (
<Text fontSize="$3" color="$gray10">
{record.notes}
</Text>
)}
{record.body_condition_score && (
<Text fontSize="$2" color="$blue10">
体况评分: {record.body_condition_score}/9
</Text>
)}
</YStack>
<XStack gap="$2">
<YStack
padding="$2"
borderRadius="$2"
pressStyle={{ opacity: 0.7, backgroundColor: '$gray3' }}
cursor="pointer"
onPress={() => handleEdit(record)}
>
<Edit3 size={18} color="$gray11" />
</YStack>
<YStack
padding="$2"
borderRadius="$2"
pressStyle={{ opacity: 0.7, backgroundColor: '$red3' }}
cursor="pointer"
onPress={() => handleDelete(record.id)}
>
<Trash2 size={18} color="$red10" />
</YStack>
</XStack>
</XStack>
</Card>
))
)}
</YStack>
</ScrollView>
</YStack>
{/* 添加/编辑记录模态框 */}
<AddWeightRecordModal
petId={petId}
petName={petName}
open={showAddModal}
onOpenChange={handleCloseModal}
onSuccess={handleSuccess}
editRecord={editingRecord}
/>
</YStack>
);
}
|