137 lines
3.1 KiB
TypeScript
137 lines
3.1 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { Modal, View, Text, ScrollView, Pressable, StyleSheet } from 'react-native'
|
|
|
|
import { USER_AGREEMENT_MARKDOWN } from '@/lib/userAgreement'
|
|
import { theme } from '@/constants/theme'
|
|
|
|
function renderAgreementBody(md: string) {
|
|
const lines = md.split('\n')
|
|
const out: ReactNode[] = []
|
|
lines.forEach((line, i) => {
|
|
if (line.startsWith('# ')) {
|
|
out.push(
|
|
<Text key={i} style={styles.h1}>
|
|
{line.slice(2)}
|
|
</Text>
|
|
)
|
|
return
|
|
}
|
|
if (line.startsWith('## ')) {
|
|
out.push(
|
|
<Text key={i} style={styles.h2}>
|
|
{line.slice(3)}
|
|
</Text>
|
|
)
|
|
return
|
|
}
|
|
if (line.startsWith('* ')) {
|
|
out.push(
|
|
<Text key={i} style={styles.li}>
|
|
• {line.slice(2)}
|
|
</Text>
|
|
)
|
|
return
|
|
}
|
|
if (line.trim() === '') {
|
|
out.push(<View key={i} style={styles.gap} />)
|
|
return
|
|
}
|
|
out.push(
|
|
<Text key={i} style={styles.p}>
|
|
{line}
|
|
</Text>
|
|
)
|
|
})
|
|
return out
|
|
}
|
|
|
|
type Props = {
|
|
visible: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
const AGREEMENT_BODY = USER_AGREEMENT_MARKDOWN.replace(/^# 用户使用协议\n+/, '')
|
|
|
|
export function UserAgreementModal({ visible, onClose }: Props) {
|
|
return (
|
|
<Modal visible={visible} animationType="slide" transparent onRequestClose={onClose}>
|
|
<View style={styles.backdrop}>
|
|
<View style={styles.sheet}>
|
|
<Text style={styles.sheetTitle}>用户使用协议</Text>
|
|
<ScrollView style={styles.scroll} contentContainerStyle={styles.scrollInner}>
|
|
{renderAgreementBody(AGREEMENT_BODY)}
|
|
</ScrollView>
|
|
<Pressable style={styles.closeBtn} onPress={onClose}>
|
|
<Text style={styles.closeBtnText}>关闭</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
backdrop: {
|
|
flex: 1,
|
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
|
justifyContent: 'center',
|
|
padding: 16,
|
|
},
|
|
sheet: {
|
|
maxHeight: '88%',
|
|
borderRadius: 14,
|
|
backgroundColor: theme.bgCard,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(124,92,255,0.22)',
|
|
paddingTop: 14,
|
|
paddingHorizontal: 14,
|
|
paddingBottom: 12,
|
|
},
|
|
sheetTitle: {
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: theme.text,
|
|
marginBottom: 10,
|
|
textAlign: 'center',
|
|
},
|
|
scroll: { flexGrow: 0 },
|
|
scrollInner: { paddingBottom: 8 },
|
|
h1: {
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: theme.text,
|
|
marginBottom: 8,
|
|
},
|
|
h2: {
|
|
fontSize: 15,
|
|
fontWeight: '600',
|
|
color: theme.text,
|
|
marginTop: 10,
|
|
marginBottom: 6,
|
|
},
|
|
p: {
|
|
fontSize: 13,
|
|
color: theme.muted,
|
|
lineHeight: 21,
|
|
marginBottom: 4,
|
|
},
|
|
li: {
|
|
fontSize: 13,
|
|
color: theme.muted,
|
|
lineHeight: 21,
|
|
marginBottom: 4,
|
|
paddingLeft: 4,
|
|
},
|
|
gap: { height: 6 },
|
|
closeBtn: {
|
|
marginTop: 10,
|
|
paddingVertical: 12,
|
|
borderRadius: 10,
|
|
backgroundColor: theme.bgElevated,
|
|
alignItems: 'center',
|
|
borderWidth: 1,
|
|
borderColor: theme.border,
|
|
},
|
|
closeBtnText: { fontSize: 15, fontWeight: '600', color: theme.accent },
|
|
})
|