's'

2026-03-26 00:48:14 -05:00
parent f16a8a9255
commit aba40c8cb7
9 changed files with 1496 additions and 60 deletions
--- a/components/UserAgreementModal.tsx
+++ b/components/UserAgreementModal.tsx
@@ -0,0 +1,136 @@
+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 },
+})