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 | 6x 4x 3x 3x | import { Modal, ScrollView, TouchableOpacity } from 'react-native';
import { Card, Separator, Text, XStack, YStack } from 'tamagui';
import { Button } from '@/src/design-system/components';
import type { Additive } from '@/src/lib/supabase';
interface BaikeInfo {
title: string;
extract: string;
}
interface AdditiveDetailModalProps {
visible: boolean;
additive: Additive | null;
baikeInfo?: BaikeInfo | null;
onClose: () => void;
}
interface DetailRowProps {
label: string;
value: string;
}
function DetailRow({ label, value }: DetailRowProps) {
return (
<XStack gap="$2" marginBottom="$3" flexWrap="wrap">
<Text fontSize="$3" fontWeight="600" color="$gray11" minWidth={70} flexShrink={0}>
{label}
</Text>
<Text fontSize="$3" color="$color" flex={1} lineHeight="$1" flexShrink={1}>
{value}
</Text>
</XStack>
);
}
export function AdditiveDetailModal({
visible,
additive,
baikeInfo,
onClose,
}: AdditiveDetailModalProps) {
if (!additive && !baikeInfo) return null;
const displayName = additive?.name || baikeInfo?.title || '详细信息';
return (
<Modal
animationType="fade"
transparent
visible={visible}
onRequestClose={onClose}
statusBarTranslucent
>
<TouchableOpacity
style={{
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
}}
activeOpacity={1}
onPress={onClose}
>
<TouchableOpacity
activeOpacity={1}
style={{ width: '100%', maxWidth: 450, maxHeight: '80%' }}
>
<Card padding="$5" backgroundColor="$background" borderRadius="$5" bordered>
<ScrollView showsVerticalScrollIndicator={false}>
<YStack gap="$4">
{/* 标题 */}
<Text
fontSize="$7"
fontWeight="bold"
textAlign="center"
color="$orange10"
marginBottom="$2"
>
{displayName}
</Text>
{/* 数据库信息 */}
{additive && (
<YStack gap="$3">
<Text fontSize="$5" fontWeight="600" color="$blue10">
📊 数据库信息
</Text>
{additive.enName && <DetailRow label="英文名：" value={additive.enName} />}
<DetailRow label="类别：" value={additive.type || '未分类'} />
<DetailRow label="适用范围：" value={additive.applicableRange || '暂无说明'} />
</YStack>
)}
{/* 分隔线 */}
{additive && baikeInfo && (
<Separator marginVertical="$2" borderColor="$borderColor" />
)}
{/* 百度百科信息 */}
{baikeInfo && (
<YStack gap="$3">
<Text fontSize="$5" fontWeight="600" color="$green10">
📖 百度百科
</Text>
<Text fontSize="$3" color="$color" lineHeight="$4">
{baikeInfo.extract}
</Text>
</YStack>
)}
{/* 关闭按钮 */}
<Button
size="md"
variant="primary"
backgroundColor="$orange10"
marginTop="$2"
onPress={onClose}
pressStyle={{
backgroundColor: '$orange9',
scale: 0.98,
}}
>
关闭
</Button>
</YStack>
</ScrollView>
</Card>
</TouchableOpacity>
</TouchableOpacity>
</Modal>
);
}
|