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.
357 lines
9.0 KiB
357 lines
9.0 KiB
import { useState } from 'react';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useRouter } from 'expo-router';
|
|
import {
|
|
ActivityIndicator,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
Pressable,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
} from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { useKeywordBlock } 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 KeywordChip({
|
|
text,
|
|
onRemove,
|
|
}: {
|
|
text: string;
|
|
onRemove: () => void;
|
|
}) {
|
|
return (
|
|
<View style={styles.chip}>
|
|
<Text style={styles.chipText}>{text}</Text>
|
|
<Pressable hitSlop={6} onPress={onRemove}>
|
|
<Ionicons name="close-circle" size={16} color={colors.textHint} />
|
|
</Pressable>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 页面 ===================== */
|
|
|
|
export default function KeywordBlockScreen() {
|
|
const router = useRouter();
|
|
const { setting, loading, error, refresh, addKeyword, removeKeyword } = useKeywordBlock();
|
|
const [text, setText] = useState('');
|
|
|
|
const handleAdd = async () => {
|
|
const value = text.trim();
|
|
if (!value) return;
|
|
await addKeyword(value);
|
|
setText('');
|
|
};
|
|
|
|
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 || !setting) {
|
|
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>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top', 'bottom']}>
|
|
<Header onBack={() => router.back()} />
|
|
<KeyboardAvoidingView
|
|
style={styles.flex}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
|
>
|
|
<ScrollView
|
|
style={styles.scroll}
|
|
contentContainerStyle={styles.content}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<View style={[styles.statCard, { backgroundColor: colors.dangerLight }]}>
|
|
<Text style={[styles.statValue, { color: colors.dangerText }]}>{setting.blockedCount}</Text>
|
|
<Text style={styles.statLabel}>累计拦截的招聘信息条数</Text>
|
|
</View>
|
|
|
|
<View style={styles.card}>
|
|
<Text style={styles.cardTitle}>已屏蔽关键词</Text>
|
|
{setting.keywords.length === 0 ? (
|
|
<Text style={styles.emptyText}>暂无屏蔽词，添加后相关岗位与消息将被过滤</Text>
|
|
) : (
|
|
<View style={styles.chipWrap}>
|
|
{setting.keywords.map((word) => (
|
|
<KeywordChip
|
|
key={word}
|
|
text={word}
|
|
onRemove={() => removeKeyword(word)}
|
|
/>
|
|
))}
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{setting.suggestions.length > 0 ? (
|
|
<View style={styles.card}>
|
|
<Text style={styles.cardTitle}>系统建议屏蔽</Text>
|
|
<Text style={styles.cardHint}>点击即可快速添加高频骚扰词</Text>
|
|
<View style={styles.chipWrap}>
|
|
{setting.suggestions.map((word) => (
|
|
<Pressable
|
|
key={word}
|
|
style={styles.suggestChip}
|
|
onPress={() => addKeyword(word)}
|
|
>
|
|
<Ionicons name="add" size={14} color={colors.primary} />
|
|
<Text style={styles.suggestText}>{word}</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
</View>
|
|
) : null}
|
|
|
|
<View style={styles.noteCard}>
|
|
<Ionicons name="information-circle-outline" size={18} color={colors.info} />
|
|
<Text style={styles.noteText}>
|
|
屏蔽关键词后，标题或详情包含该词的职位推荐与沟通消息将被隐藏，不影响你已投递的岗位。
|
|
</Text>
|
|
</View>
|
|
</ScrollView>
|
|
|
|
<View style={styles.inputBar}>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={text}
|
|
onChangeText={setText}
|
|
placeholder="输入要屏蔽的关键词"
|
|
placeholderTextColor={colors.textHint}
|
|
returnKeyType="done"
|
|
onSubmitEditing={handleAdd}
|
|
/>
|
|
<Pressable
|
|
style={[styles.addBtn, !text.trim() && styles.addBtnDisabled]}
|
|
disabled={!text.trim()}
|
|
onPress={handleAdd}
|
|
>
|
|
<Text style={styles.addBtnText}>添加</Text>
|
|
</Pressable>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safeArea: {
|
|
flex: 1,
|
|
backgroundColor: colors.pageBg,
|
|
},
|
|
flex: {
|
|
flex: 1,
|
|
},
|
|
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: 12,
|
|
paddingBottom: 16,
|
|
},
|
|
stateBox: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 12,
|
|
},
|
|
stateText: {
|
|
marginTop: 12,
|
|
fontSize: 14,
|
|
color: colors.textSecondary,
|
|
},
|
|
retryBtn: {
|
|
marginTop: 16,
|
|
paddingHorizontal: 24,
|
|
paddingVertical: 8,
|
|
borderRadius: 18,
|
|
backgroundColor: colors.primaryBtn,
|
|
},
|
|
retryText: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: colors.white,
|
|
},
|
|
statCard: {
|
|
borderRadius: 8,
|
|
padding: 20,
|
|
alignItems: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
statValue: {
|
|
fontSize: 32,
|
|
fontWeight: '800',
|
|
},
|
|
statLabel: {
|
|
marginTop: 4,
|
|
fontSize: 13,
|
|
color: colors.textSecondary,
|
|
},
|
|
card: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 8,
|
|
padding: 16,
|
|
marginBottom: 16,
|
|
},
|
|
cardTitle: {
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
marginBottom: 4,
|
|
},
|
|
cardHint: {
|
|
fontSize: 12,
|
|
color: colors.textSecondary,
|
|
marginBottom: 12,
|
|
},
|
|
emptyText: {
|
|
fontSize: 13,
|
|
lineHeight: 19,
|
|
color: colors.textSecondary,
|
|
},
|
|
chipWrap: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 8,
|
|
marginTop: 12,
|
|
},
|
|
chip: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: colors.dangerLight,
|
|
borderRadius: 16,
|
|
paddingVertical: 6,
|
|
paddingHorizontal: 10,
|
|
gap: 4,
|
|
},
|
|
chipText: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: colors.dangerText,
|
|
},
|
|
suggestChip: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: colors.primaryLight,
|
|
borderRadius: 16,
|
|
paddingVertical: 6,
|
|
paddingHorizontal: 10,
|
|
gap: 2,
|
|
},
|
|
suggestText: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: colors.primary,
|
|
},
|
|
noteCard: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
backgroundColor: colors.white,
|
|
borderRadius: 8,
|
|
padding: 14,
|
|
gap: 8,
|
|
},
|
|
noteText: {
|
|
flex: 1,
|
|
fontSize: 12,
|
|
lineHeight: 18,
|
|
color: colors.textSecondary,
|
|
},
|
|
inputBar: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 10,
|
|
backgroundColor: colors.white,
|
|
borderTopWidth: 1,
|
|
borderTopColor: colors.borderLight,
|
|
},
|
|
input: {
|
|
flex: 1,
|
|
height: 40,
|
|
borderRadius: 20,
|
|
backgroundColor: colors.pageBg,
|
|
paddingHorizontal: 16,
|
|
fontSize: 14,
|
|
color: colors.textPrimary,
|
|
},
|
|
addBtn: {
|
|
height: 40,
|
|
paddingHorizontal: 20,
|
|
borderRadius: 20,
|
|
backgroundColor: colors.primaryBtn,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
addBtnDisabled: {
|
|
backgroundColor: colors.border,
|
|
},
|
|
addBtnText: {
|
|
fontSize: 14,
|
|
fontWeight: '700',
|
|
color: colors.white,
|
|
},
|
|
});
|
|
|