168 lines
4.0 KiB
TypeScript
168 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, TouchableOpacity, Alert } from 'react-native';
|
|
import { router } from 'expo-router';
|
|
|
|
import { ThemedView } from '@/components/themed-view';
|
|
import { ThemedText } from '@/components/themed-text';
|
|
import { useThemeColor } from '@/hooks/use-theme-color';
|
|
import { IconSymbol, type IconSymbolName } from '@/components/ui/icon-symbol';
|
|
|
|
interface SettingsListProps {
|
|
onLogout: () => void;
|
|
}
|
|
|
|
interface SettingItem {
|
|
id: string;
|
|
title: string;
|
|
icon: IconSymbolName;
|
|
onPress?: () => void;
|
|
destructive?: boolean;
|
|
}
|
|
|
|
export function SettingsList({ onLogout }: SettingsListProps) {
|
|
const tintColor = useThemeColor({}, 'tint');
|
|
const textColor = useThemeColor({}, 'text');
|
|
const destructiveColor = '#FF3B30';
|
|
|
|
const settings: SettingItem[] = [
|
|
{
|
|
id: 'account',
|
|
title: '账户设置',
|
|
icon: 'person.circle',
|
|
onPress: () => router.push('/settings/account'),
|
|
},
|
|
{
|
|
id: 'notification',
|
|
title: '通知设置',
|
|
icon: 'bell',
|
|
onPress: () => router.push('/settings/notification'),
|
|
},
|
|
{
|
|
id: 'privacy',
|
|
title: '隐私设置',
|
|
icon: 'lock',
|
|
onPress: () =>
|
|
Alert.alert('敬请期待', '隐私设置即将上线，敬请期待。'),
|
|
},
|
|
{
|
|
id: 'about',
|
|
title: '关于我们',
|
|
icon: 'info.circle',
|
|
onPress: () => router.push('/settings/about'),
|
|
},
|
|
{
|
|
id: 'feedback',
|
|
title: '意见反馈',
|
|
icon: 'exclamationmark.bubble',
|
|
onPress: () =>
|
|
Alert.alert('感谢反馈', '请通过 support@bowong.cc 与我们联系。'),
|
|
},
|
|
{
|
|
id: 'logout',
|
|
title: '退出登录',
|
|
icon: 'arrow.right.square',
|
|
onPress: onLogout,
|
|
destructive: true,
|
|
},
|
|
];
|
|
|
|
const handleSettingPress = (item: SettingItem) => {
|
|
if (item.onPress) {
|
|
if (item.destructive) {
|
|
Alert.alert(
|
|
'退出登录',
|
|
'确定要退出登录吗？',
|
|
[
|
|
{ text: '取消', style: 'cancel' },
|
|
{
|
|
text: '确定',
|
|
style: 'destructive',
|
|
onPress: item.onPress,
|
|
}
|
|
]
|
|
);
|
|
} else {
|
|
item.onPress();
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ThemedView style={styles.container}>
|
|
<ThemedView style={styles.header}>
|
|
<IconSymbol name="gearshape" size={20} color={tintColor} />
|
|
<ThemedText style={styles.title}>设置</ThemedText>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.settingsList}>
|
|
{settings.map((item) => (
|
|
<TouchableOpacity
|
|
key={item.id}
|
|
style={styles.settingItem}
|
|
onPress={() => handleSettingPress(item)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<ThemedView style={styles.settingLeft}>
|
|
<IconSymbol
|
|
name={item.icon}
|
|
size={20}
|
|
color={item.destructive ? destructiveColor : tintColor}
|
|
/>
|
|
<ThemedText
|
|
style={[
|
|
styles.settingTitle,
|
|
{ color: item.destructive ? destructiveColor : textColor }
|
|
]}
|
|
>
|
|
{item.title}
|
|
</ThemedText>
|
|
</ThemedView>
|
|
<IconSymbol
|
|
name="chevron.right"
|
|
size={16}
|
|
color="#ccc"
|
|
/>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ThemedView>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
marginBottom: 16,
|
|
},
|
|
title: {
|
|
fontSize: 18,
|
|
fontWeight: '600',
|
|
},
|
|
settingsList: {
|
|
borderRadius: 8,
|
|
overflow: 'hidden',
|
|
},
|
|
settingItem: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingVertical: 16,
|
|
paddingHorizontal: 4,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#f0f0f0',
|
|
},
|
|
settingLeft: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
},
|
|
settingTitle: {
|
|
fontSize: 16,
|
|
},
|
|
});
|