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.
373 lines
9.3 KiB
373 lines
9.3 KiB
import { useState } from 'react';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useRouter } from 'expo-router';
|
|
import {
|
|
ActivityIndicator,
|
|
Pressable,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
} from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { useDeleteAllData } from '../../src/hooks';
|
|
import { colors } from '../../src/theme';
|
|
|
|
/* ===================== 子组件：顶部导航 ===================== */
|
|
|
|
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 CheckRow({
|
|
title,
|
|
desc,
|
|
count,
|
|
checked,
|
|
onPress,
|
|
}: {
|
|
title: string;
|
|
desc?: string;
|
|
count?: string;
|
|
checked: boolean;
|
|
onPress: () => void;
|
|
}) {
|
|
return (
|
|
<Pressable style={styles.row} onPress={onPress}>
|
|
<View style={styles.rowBody}>
|
|
<Text style={styles.rowTitle}>{title}</Text>
|
|
{desc ? <Text style={styles.rowDesc}>{desc}</Text> : null}
|
|
</View>
|
|
<View style={[styles.checkbox, checked && styles.checkboxActive]}>
|
|
{checked ? <Ionicons name="checkmark" size={14} color={colors.white} /> : null}
|
|
</View>
|
|
{count ? <Text style={styles.rowCount}>{count}</Text> : null}
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
/* ===================== 页面 ===================== */
|
|
|
|
export default function DeleteAllDataScreen() {
|
|
const router = useRouter();
|
|
const { data, loading, error, refresh, submit } = useDeleteAllData();
|
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
|
const [confirmText, setConfirmText] = useState('');
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [done, setDone] = useState<{ success: boolean; message: string } | null>(null);
|
|
|
|
const toggleCat = (id: string) => {
|
|
setSelected((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id);
|
|
else next.add(id);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
setSubmitting(true);
|
|
try {
|
|
const res = await submit(Array.from(selected));
|
|
setDone(res);
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<Header onBack={() => router.back()} />
|
|
<View style={styles.stateBox}>
|
|
<ActivityIndicator size="large" color={colors.primary} />
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
if (error || !data) {
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<Header onBack={() => router.back()} />
|
|
<View style={styles.stateBox}>
|
|
<Ionicons name="alert-circle-outline" size={40} color={colors.danger} />
|
|
<Text style={styles.stateText}>加载失败，请重试</Text>
|
|
<Pressable style={styles.retryBtn} onPress={refresh}>
|
|
<Text style={styles.retryText}>重试</Text>
|
|
</Pressable>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
if (done?.success) {
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<Header onBack={() => router.back()} />
|
|
<View style={styles.stateBox}>
|
|
<Ionicons name="checkmark-circle" size={48} color={colors.success} />
|
|
<Text style={styles.stateText}>{done.message}</Text>
|
|
<Pressable style={styles.retryBtn} onPress={() => router.back()}>
|
|
<Text style={styles.retryText}>返回</Text>
|
|
</Pressable>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const canSubmit = selected.size > 0 && confirmText === '删除全部数据' && !submitting;
|
|
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top', 'bottom']}>
|
|
<Header onBack={() => router.back()} />
|
|
<ScrollView
|
|
style={styles.scroll}
|
|
contentContainerStyle={styles.content}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<View style={styles.introCard}>
|
|
<Text style={styles.introText}>{data.intro}</Text>
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>选择要删除的数据</Text>
|
|
<View style={styles.card}>
|
|
{data.categories.map((cat) => (
|
|
<CheckRow
|
|
key={cat.id}
|
|
title={cat.label}
|
|
desc={cat.description}
|
|
count={cat.count}
|
|
checked={selected.has(cat.id)}
|
|
onPress={() => toggleCat(cat.id)}
|
|
/>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
<View style={[styles.warnCard, { backgroundColor: colors.dangerLight }]}>
|
|
<Ionicons name="warning-outline" size={18} color={colors.dangerText} />
|
|
<Text style={[styles.warnText, { color: colors.dangerText }]}>{data.warning}</Text>
|
|
</View>
|
|
|
|
<View style={styles.card}>
|
|
<Text style={styles.confirmTitle}>确认删除</Text>
|
|
<Text style={styles.confirmHint}>
|
|
请输入「{data.confirmPlaceholder.replace('请输入「', '').replace('」以确认', '')}」以确认操作
|
|
</Text>
|
|
<TextInput
|
|
style={styles.confirmInput}
|
|
value={confirmText}
|
|
onChangeText={setConfirmText}
|
|
placeholder={data.confirmPlaceholder}
|
|
placeholderTextColor={colors.textHint}
|
|
/>
|
|
</View>
|
|
|
|
<Pressable
|
|
style={[styles.submitBtn, !canSubmit && styles.submitDisabled]}
|
|
disabled={!canSubmit}
|
|
onPress={handleSubmit}
|
|
>
|
|
<Text style={styles.submitText}>
|
|
{submitting ? '提交中…' : `删除选中数据（${selected.size} 项）`}
|
|
</Text>
|
|
</Pressable>
|
|
</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: {
|
|
flex: 1,
|
|
textAlign: 'center',
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
},
|
|
scroll: {
|
|
flex: 1,
|
|
},
|
|
content: {
|
|
padding: 8,
|
|
paddingBottom: 24,
|
|
},
|
|
stateBox: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 12,
|
|
},
|
|
stateText: {
|
|
marginTop: 12,
|
|
fontSize: 14,
|
|
color: colors.textSecondary,
|
|
paddingHorizontal: 32,
|
|
textAlign: 'center',
|
|
},
|
|
retryBtn: {
|
|
marginTop: 16,
|
|
paddingHorizontal: 24,
|
|
paddingVertical: 8,
|
|
borderRadius: 18,
|
|
backgroundColor: colors.primaryBtn,
|
|
},
|
|
retryText: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: colors.white,
|
|
},
|
|
introCard: {
|
|
backgroundColor: colors.infoLight,
|
|
borderRadius: 8,
|
|
padding: 8,
|
|
marginBottom: 8,
|
|
},
|
|
introText: {
|
|
fontSize: 13,
|
|
lineHeight: 19,
|
|
color: colors.textSecondary,
|
|
},
|
|
section: {
|
|
marginBottom: 16,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 14,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
marginBottom: 10,
|
|
},
|
|
card: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 8,
|
|
overflow: 'hidden',
|
|
padding: 8,
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 14,
|
|
gap: 12,
|
|
},
|
|
rowBody: {
|
|
flex: 1,
|
|
},
|
|
rowTitle: {
|
|
fontSize: 15,
|
|
fontWeight: '600',
|
|
color: colors.textPrimary,
|
|
},
|
|
rowDesc: {
|
|
marginTop: 3,
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
color: colors.textSecondary,
|
|
},
|
|
rowCount: {
|
|
fontSize: 12,
|
|
color: colors.textHint,
|
|
marginLeft: 4,
|
|
},
|
|
checkbox: {
|
|
width: 22,
|
|
height: 22,
|
|
borderRadius: 6,
|
|
borderWidth: 1.5,
|
|
borderColor: colors.border,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
checkboxActive: {
|
|
backgroundColor: colors.primary,
|
|
borderColor: colors.primary,
|
|
},
|
|
warnCard: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
gap: 8,
|
|
borderRadius: 8,
|
|
padding: 8,
|
|
marginBottom: 8,
|
|
},
|
|
warnText: {
|
|
flex: 1,
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
lineHeight: 18,
|
|
},
|
|
confirmTitle: {
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
paddingHorizontal: 14,
|
|
paddingTop: 12,
|
|
},
|
|
confirmHint: {
|
|
fontSize: 12,
|
|
color: colors.textSecondary,
|
|
paddingHorizontal: 14,
|
|
marginTop: 4,
|
|
marginBottom: 10,
|
|
},
|
|
confirmInput: {
|
|
marginHorizontal: 14,
|
|
marginBottom: 14,
|
|
height: 42,
|
|
borderRadius: 10,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
paddingHorizontal: 12,
|
|
fontSize: 14,
|
|
color: colors.textPrimary,
|
|
},
|
|
submitBtn: {
|
|
marginTop: 8,
|
|
height: 48,
|
|
borderRadius: 24,
|
|
backgroundColor: colors.danger,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
submitDisabled: {
|
|
backgroundColor: colors.border,
|
|
},
|
|
submitText: {
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
color: colors.white,
|
|
},
|
|
});
|
|
|