You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
339 lines
9.6 KiB
339 lines
9.6 KiB
import { Ionicons } from '@expo/vector-icons';
|
|
import { useRouter } from 'expo-router';
|
|
import { Alert, Pressable, ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { usePrivacyCenter } from '../../src/hooks';
|
|
import { buildPrivacySummaryText } from '../../src/api';
|
|
import { shareText } from '../../src/lib/shareFile';
|
|
import { ErrorState, LoadingState } from '../../src/components/StateView';
|
|
import { colors } from '../../src/theme';
|
|
import type { PrivacyLevelInfo, PrivacySettingItem, PrivacySection } from '../../src/types';
|
|
|
|
/* ===================== 子组件：顶部导航 ===================== */
|
|
|
|
function Header({ onBack }: { onBack: () => void }) {
|
|
return (
|
|
<View style={styles.header}>
|
|
<Pressable style={styles.headerBtn} onPress={onBack} hitSlop={8}>
|
|
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
|
</Pressable>
|
|
<Text style={styles.headerTitle}>隐私设置</Text>
|
|
<View style={styles.headerBtn} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：隐私等级卡 ===================== */
|
|
|
|
function PrivacyLevelCard({ level, onExport }: { level: PrivacyLevelInfo; onExport: () => void }) {
|
|
const theme = {
|
|
high: { bg: colors.successLight, text: colors.successText, icon: 'shield-checkmark' },
|
|
medium: { bg: colors.actionLight, text: colors.actionText, icon: 'shield' },
|
|
low: { bg: colors.infoLight, text: colors.infoText, icon: 'shield-outline' },
|
|
}[level.level];
|
|
|
|
return (
|
|
<View style={[styles.levelCard, { backgroundColor: theme.bg }]}>
|
|
<View style={styles.levelRow}>
|
|
<Ionicons name={theme.icon as keyof typeof Ionicons.glyphMap} size={24} color={theme.text} />
|
|
<View style={styles.levelText}>
|
|
<Text style={[styles.levelLabel, { color: theme.text }]}>
|
|
当前隐私等级：{level.label}
|
|
</Text>
|
|
<Text style={styles.levelDesc}>{level.description}</Text>
|
|
</View>
|
|
</View>
|
|
{/* 这里原先叫「查看隐私报告」并弹「功能开发中」。语义上「隐私报告」= 谁访问了我的数据，
|
|
需要后端访问日志，本机给不出；能如实做到的是导出「我的隐私设置现状」，故改名并真实现。 */}
|
|
<Pressable style={styles.levelBtn} onPress={onExport}>
|
|
<Text style={[styles.levelBtnText, { color: theme.text }]}>导出隐私设置摘要</Text>
|
|
<Ionicons name="share-outline" size={14} color={theme.text} />
|
|
</Pressable>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：设置项行 ===================== */
|
|
|
|
function SettingRow({
|
|
item,
|
|
isLast,
|
|
onToggle,
|
|
}: {
|
|
item: PrivacySettingItem;
|
|
isLast: boolean;
|
|
onToggle?: (id: string, enabled: boolean) => void;
|
|
}) {
|
|
const router = useRouter();
|
|
const isDanger = item.type === 'danger-link';
|
|
const titleColor = isDanger ? colors.dangerText : colors.textPrimary;
|
|
|
|
const handlePress = () => {
|
|
if (item.route) router.push(item.route);
|
|
};
|
|
|
|
const rowBody = (
|
|
<View style={styles.rowBody}>
|
|
<Text style={styles.rowTitle}>{item.title}</Text>
|
|
{item.description ? <Text style={styles.rowDesc}>{item.description}</Text> : null}
|
|
</View>
|
|
);
|
|
|
|
// 开关型条目：带 route 的（如「勿扰模式」「真实姓名可见性」）点击左侧文字区进详情页，
|
|
// 右侧 Switch 保持独立可切换，两者互不干扰。
|
|
if (item.type === 'switch') {
|
|
return (
|
|
<View style={[styles.row, !isLast && styles.rowBorder]}>
|
|
{item.route ? (
|
|
<Pressable style={styles.rowTapArea} onPress={handlePress} hitSlop={4}>
|
|
{rowBody}
|
|
<Ionicons name="chevron-forward" size={18} color={colors.textHint} />
|
|
</Pressable>
|
|
) : (
|
|
rowBody
|
|
)}
|
|
<Switch
|
|
value={item.enabled}
|
|
onValueChange={(next) => onToggle?.(item.id, next)}
|
|
trackColor={{ false: colors.border, true: colors.primaryBorder }}
|
|
thumbColor={item.enabled ? colors.primary : colors.white}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Pressable style={[styles.row, !isLast && styles.rowBorder]} onPress={handlePress}>
|
|
<View style={styles.rowBody}>
|
|
<Text style={[styles.rowTitle, { color: titleColor }]}>{item.title}</Text>
|
|
{item.description ? <Text style={styles.rowDesc}>{item.description}</Text> : null}
|
|
</View>
|
|
<View style={styles.rowRight}>
|
|
{item.value ? <Text style={styles.rowValue}>{item.value}</Text> : null}
|
|
<Ionicons
|
|
name="chevron-forward"
|
|
size={18}
|
|
color={isDanger ? colors.dangerText : colors.textHint}
|
|
/>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：设置分组 ===================== */
|
|
|
|
function Section({ section, onToggle }: { section: PrivacySection; onToggle?: (id: string, enabled: boolean) => void }) {
|
|
return (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>{section.title}</Text>
|
|
<View style={styles.card}>
|
|
{section.items.map((item, index) => (
|
|
<SettingRow
|
|
key={item.id}
|
|
item={item}
|
|
isLast={index === section.items.length - 1}
|
|
onToggle={onToggle}
|
|
/>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 页面 ===================== */
|
|
|
|
export default function PrivacyCenterScreen() {
|
|
const router = useRouter();
|
|
const { privacyCenter, loading, error, refresh, toggle } = usePrivacyCenter();
|
|
|
|
/**
|
|
* 导出隐私设置摘要：拼成文本经系统分享面板发出。
|
|
* `ok` 只代表面板已拉起，不能据此提示「导出成功」，只在失败时说明原因（见 lib/shareFile）。
|
|
*/
|
|
const handleExport = async () => {
|
|
if (!privacyCenter) return;
|
|
const outcome = await shareText(buildPrivacySummaryText(privacyCenter), '我的隐私设置摘要');
|
|
if (!outcome.ok) Alert.alert('无法导出', outcome.message);
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<Header onBack={() => router.back()} />
|
|
<LoadingState />
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
if (error || !privacyCenter) {
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<Header onBack={() => router.back()} />
|
|
<ErrorState message="加载失败，请重试" onRetry={refresh} />
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top', 'bottom']}>
|
|
<Header onBack={() => router.back()} />
|
|
<ScrollView
|
|
style={styles.scroll}
|
|
contentContainerStyle={styles.content}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<PrivacyLevelCard level={privacyCenter.privacyLevel} onExport={handleExport} />
|
|
|
|
{privacyCenter.sections.map((section) => (
|
|
<Section key={section.id} section={section} onToggle={toggle} />
|
|
))}
|
|
|
|
<View style={styles.explanationCard}>
|
|
<Text style={styles.explanationTitle}>权限说明</Text>
|
|
<Text style={styles.explanationText}>{privacyCenter.explanation}</Text>
|
|
</View>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safeArea: {
|
|
flex: 1,
|
|
backgroundColor: colors.pageBg,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 8,
|
|
height: 48,
|
|
backgroundColor: colors.white,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.borderLight,
|
|
},
|
|
headerBtn: {
|
|
width: 40,
|
|
height: 40,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
headerTitle: {
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
},
|
|
scroll: {
|
|
flex: 1,
|
|
},
|
|
content: {
|
|
padding: 12,
|
|
paddingBottom: 24,
|
|
},
|
|
levelCard: {
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
marginBottom: 16,
|
|
},
|
|
levelRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
},
|
|
levelText: {
|
|
flex: 1,
|
|
marginLeft: 12,
|
|
},
|
|
levelLabel: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
marginBottom: 4,
|
|
},
|
|
levelDesc: {
|
|
fontSize: 13,
|
|
lineHeight: 18,
|
|
color: colors.textSecondary,
|
|
},
|
|
levelBtn: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
alignSelf: 'flex-start',
|
|
marginTop: 12,
|
|
paddingVertical: 4,
|
|
},
|
|
levelBtnText: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
marginRight: 2,
|
|
},
|
|
section: {
|
|
marginBottom: 16,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 14,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
marginBottom: 10,
|
|
},
|
|
card: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 12,
|
|
overflow: 'hidden',
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 14,
|
|
},
|
|
rowBorder: {
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.borderLight,
|
|
},
|
|
rowBody: {
|
|
flex: 1,
|
|
marginRight: 12,
|
|
},
|
|
rowTapArea: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
rowTitle: {
|
|
fontSize: 15,
|
|
fontWeight: '600',
|
|
color: colors.textPrimary,
|
|
},
|
|
rowDesc: {
|
|
marginTop: 3,
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
color: colors.textSecondary,
|
|
},
|
|
rowRight: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
rowValue: {
|
|
fontSize: 13,
|
|
color: colors.textHint,
|
|
marginRight: 4,
|
|
},
|
|
explanationCard: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
marginBottom: 8,
|
|
},
|
|
explanationTitle: {
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
marginBottom: 8,
|
|
},
|
|
explanationText: {
|
|
fontSize: 13,
|
|
lineHeight: 20,
|
|
color: colors.textSecondary,
|
|
},
|
|
});
|
|
|