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 184 185 186 187 188 189 | 3x 3x 3x 3x 3x 3x 2x 2x 2x 2x 2x 1x 1x 4x 4x 3x 1x 1x 1x 1x 1x 1x 1x 3x 2x 2x 1x 1x | /**
* AI 报告收藏列表项 - 展示收藏的分析报告
*/
import { Card, Separator, Text, XStack, YStack } from 'tamagui';
import { Button } from '@/src/design-system/components';
import { IconSymbol } from '@/src/components/ui/IconSymbol';
import type { FavoriteReport } from '@/src/services/api';
import {
primaryScale,
successScale,
infoScale,
warningScale,
neutralScale,
} from '@/src/design-system/tokens';
interface ReportCollectItemProps {
favoriteReport: FavoriteReport;
onDelete?: (favoriteId: number) => void;
onPress?: () => void;
}
// 格式化日期为相对时间
function formatDate(dateString: string) {
const date = new Date(dateString);
const now = new Date();
const diffTime = Math.abs(now.getTime() - date.getTime());
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
Iif (diffDays === 0) return '今天';
if (diffDays === 1) return '昨天';
Iif (diffDays < 7) return `${diffDays} 天前`;
Iif (diffDays < 30) return `${Math.floor(diffDays / 7)} 周前`;
Iif (diffDays < 365) return `${Math.floor(diffDays / 30)} 月前`;
return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
}
// 根据标签内容返回对应颜色
function getTagColor(tag: string): string {
if (tag.includes('高蛋白') || tag.includes('优质')) return successScale.success9;
Iif (tag.includes('低碳水') || tag.includes('健康')) return infoScale.info9;
Eif (tag.includes('天然') || tag.includes('无添加')) return '#8b5cf6';
return warningScale.warning9;
}
export default function ReportCollectItem({
favoriteReport,
onDelete,
onPress,
}: ReportCollectItemProps) {
const { report } = favoriteReport;
if (!report) return null;
// 提取营养摘要
const getNutrientSummary = () => {
const { percent_data } = report;
Iif (!percent_data) return '暂无营养数据';
const summary = [];
Eif (percent_data.crude_protein != null) summary.push(`蛋白质 ${percent_data.crude_protein}%`);
Eif (percent_data.crude_fat != null) summary.push(`脂肪 ${percent_data.crude_fat}%`);
Eif (percent_data.carbohydrates != null) summary.push(`碳水 ${percent_data.carbohydrates}%`);
return summary.length > 0 ? summary.slice(0, 3).join(' · ') : '暂无营养数据';
};
return (
<Card
size="$4"
bordered
borderColor={neutralScale.neutral3}
backgroundColor="white"
pressStyle={{ scale: 0.98, opacity: 0.95 }}
animation="quick"
onPress={onPress}
>
<Card.Header padding="$4">
<YStack gap="$3">
{/* 头部：名称和时间 */}
<XStack justifyContent="space-between" alignItems="flex-start">
<YStack flex={1} gap="$1.5">
<Text fontSize={18} fontWeight="700" color="$foreground" numberOfLines={2}>
{report.catfood_name}
</Text>
<XStack alignItems="center" gap="$1">
<IconSymbol name="clock" size={14} color={neutralScale.neutral7} />
<Text fontSize={12} color={neutralScale.neutral7}>
收藏于 {formatDate(favoriteReport.createdAt)}
</Text>
</XStack>
</YStack>
{/* 报告图标 */}
<YStack
backgroundColor={primaryScale.primary2}
padding="$2.5"
borderRadius="$4"
borderWidth={2}
borderColor={primaryScale.primary4}
>
<IconSymbol name="doc.text.fill" size={24} color={primaryScale.primary7} />
</YStack>
</XStack>
{/* 标签 */}
{report.tags && report.tags.length > 0 && (
<XStack gap="$2" flexWrap="wrap">
{report.tags.slice(0, 4).map((tag: string, index: number) => {
const tagColor = getTagColor(tag);
return (
<YStack
key={index}
backgroundColor={(tagColor + '15') as any}
paddingHorizontal="$2.5"
paddingVertical="$1"
borderRadius="$2"
borderWidth={1}
borderColor={(tagColor + '40') as any}
>
<Text fontSize={12} fontWeight="600" color={tagColor as any}>
{tag}
</Text>
</YStack>
);
})}
</XStack>
)}
{/* 营养摘要 */}
{report.percentage && (
<XStack
backgroundColor={neutralScale.neutral1}
padding="$2.5"
borderRadius="$3"
alignItems="center"
gap="$2"
>
<IconSymbol name="chart.bar.fill" size={16} color={neutralScale.neutral9} />
<Text fontSize={13} color={neutralScale.neutral9} flex={1}>
{getNutrientSummary()}
</Text>
</XStack>
)}
{/* 安全性摘要 */}
{report.safety && (
<YStack gap="$1">
<Text fontSize={13} fontWeight="600" color="$foreground">
安全性分析
</Text>
<Text fontSize={13} color={neutralScale.neutral9} numberOfLines={2}>
{report.safety}
</Text>
</YStack>
)}
</YStack>
</Card.Header>
{onDelete && (
<>
<Separator borderColor={neutralScale.neutral2} />
<Card.Footer padding="$3" paddingTop="$2">
<XStack justifyContent="space-between" width="100%" alignItems="center">
<XStack alignItems="center" gap="$1.5">
<IconSymbol name="doc.text.viewfinder" size={14} color={neutralScale.neutral7} />
<Text fontSize={12} color={neutralScale.neutral7}>
ID: {report.id}
</Text>
</XStack>
<Button
size="$3"
chromeless
color={neutralScale.neutral8}
icon={<IconSymbol name="heart.slash" size={16} color={neutralScale.neutral8} />}
onPress={(e) => {
e.stopPropagation();
onDelete(favoriteReport.id);
}}
pressStyle={{ scale: 0.95, opacity: 0.7 }}
>
取消收藏
</Button>
</XStack>
</Card.Footer>
</>
)}
</Card>
);
}
|