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.
468 lines
12 KiB
468 lines
12 KiB
import { Ionicons } from '@expo/vector-icons';
|
|
import { useRouter } from 'expo-router';
|
|
import {
|
|
ActivityIndicator,
|
|
Pressable,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
} from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { useProfileData } from '../../src/hooks';
|
|
import { colors } from '../../src/theme';
|
|
import type { Badge, DimensionScore, JobPreference } from '../../src/types';
|
|
|
|
/* ===================== 展示层映射（全部使用主题令牌） ===================== */
|
|
|
|
/** 维度等级 → 展示配置（标签文案 + 配色） */
|
|
const DIMENSION_LEVEL: Record<
|
|
DimensionScore['level'],
|
|
{ label: string; bg: string; text: string }
|
|
> = {
|
|
excellent: { label: '优秀', bg: colors.successLight, text: colors.successText },
|
|
good: { label: '良好', bg: colors.primaryLight, text: colors.primaryText },
|
|
};
|
|
|
|
/** 求职偏好字段 → 展示标签 */
|
|
const PREF_ITEMS: { key: keyof JobPreference; label: string }[] = [
|
|
{ key: 'position', label: '期望职位' },
|
|
{ key: 'city', label: '期望城市' },
|
|
{ key: 'salary', label: '期望薪资' },
|
|
{ key: 'workType', label: '工作类型' },
|
|
{ key: 'status', label: '求职状态' },
|
|
];
|
|
|
|
/* ===================== 子组件 ===================== */
|
|
|
|
/** 单个维度评分项 */
|
|
function DimensionItem({ dimension }: { dimension: DimensionScore }) {
|
|
const theme = DIMENSION_LEVEL[dimension.level];
|
|
return (
|
|
<View style={styles.dimItem}>
|
|
<Text style={styles.dimName}>{dimension.name}</Text>
|
|
<View style={styles.dimScoreRow}>
|
|
<Text style={styles.dimScore}>{dimension.score}</Text>
|
|
<View style={[styles.levelTag, { backgroundColor: theme.bg }]}>
|
|
<Text style={[styles.levelTagText, { color: theme.text }]}>{theme.label}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/** 单个勋章卡片 */
|
|
function BadgeCard({ badge }: { badge: Badge }) {
|
|
return (
|
|
<View style={styles.badgeCard}>
|
|
<Text style={styles.badgeIcon}>{badge.icon}</Text>
|
|
<Text style={styles.badgeTitle}>{badge.title}</Text>
|
|
<Text style={styles.badgeDesc}>{badge.description}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 我的页
|
|
*/
|
|
export default function ProfileScreen() {
|
|
const { profile, overallScore, dimensions, preference, badges, loading, error, refresh } =
|
|
useProfileData();
|
|
const router = useRouter();
|
|
|
|
// 错误态
|
|
if (error) {
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<View style={styles.stateWrap}>
|
|
<Text style={styles.stateText}>加载失败，请重试</Text>
|
|
<Pressable style={styles.retryBtn} onPress={refresh}>
|
|
<Text style={styles.retryText}>重试</Text>
|
|
</Pressable>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
// 加载态
|
|
if (loading || !profile || !overallScore || !preference) {
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<View style={styles.stateWrap}>
|
|
<ActivityIndicator size="large" color={colors.primary} />
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<ScrollView
|
|
style={styles.scroll}
|
|
contentContainerStyle={styles.content}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* 1. 顶部导航 */}
|
|
<View style={styles.header}>
|
|
<Text style={styles.headerTitle}>我的</Text>
|
|
<Pressable style={styles.headerAction} onPress={() => router.push('/settings')}>
|
|
<Ionicons name="settings-outline" size={22} color={colors.textPrimary} />
|
|
</Pressable>
|
|
</View>
|
|
|
|
{/* 2. 用户信息 */}
|
|
<View style={styles.profileCard}>
|
|
<View style={styles.profileTop}>
|
|
<View style={styles.avatar}>
|
|
<Text style={styles.avatarText}>{profile.avatar}</Text>
|
|
</View>
|
|
<Text style={styles.userName}>{profile.name}</Text>
|
|
</View>
|
|
<Text style={styles.bio}>{profile.bio}</Text>
|
|
</View>
|
|
|
|
{/* 3. 综合评分卡片 */}
|
|
<View style={styles.scoreCard}>
|
|
<Text style={styles.scoreValue}>
|
|
{overallScore.score}
|
|
<Text style={styles.scoreUnit}>分</Text>
|
|
</Text>
|
|
<View style={styles.scoreTag}>
|
|
<Text style={styles.scoreTagText}>{overallScore.level}</Text>
|
|
</View>
|
|
<View style={styles.scoreRight}>
|
|
<Text style={styles.scoreRank}>{overallScore.rank}</Text>
|
|
<Pressable onPress={() => console.log('评分申诉')}>
|
|
<Text style={styles.scoreAppeal}>评分申诉</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 4. 八大维度评分 */}
|
|
<Text style={[styles.sectionTitle, styles.sectionGap]}>八大维度评分</Text>
|
|
<View style={styles.dimGrid}>
|
|
{dimensions.map((dimension) => (
|
|
<DimensionItem key={dimension.id} dimension={dimension} />
|
|
))}
|
|
</View>
|
|
|
|
{/* 5. 求职偏好 */}
|
|
<Text style={[styles.sectionTitle, styles.sectionGap]}>求职偏好</Text>
|
|
<View style={styles.prefCard}>
|
|
{PREF_ITEMS.map(({ key, label }, index) => {
|
|
const value = preference[key];
|
|
const isLast = index === PREF_ITEMS.length - 1;
|
|
return (
|
|
<View key={key} style={[styles.prefRow, isLast && styles.prefRowLast]}>
|
|
<Text style={styles.prefLabel}>{label}</Text>
|
|
{key === 'status' ? (
|
|
<View style={styles.prefStatusTag}>
|
|
<Text style={styles.prefStatusText}>{value}</Text>
|
|
</View>
|
|
) : (
|
|
<Text style={styles.prefValue}>{value}</Text>
|
|
)}
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
|
|
{/* 6. 全部勋章 */}
|
|
<View style={styles.sectionHeader}>
|
|
<Text style={styles.sectionTitle}>全部勋章</Text>
|
|
<Pressable onPress={() => console.log('查看全部勋章')}>
|
|
<Text style={styles.sectionMore}>></Text>
|
|
</Pressable>
|
|
</View>
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
style={styles.hScroll}
|
|
contentContainerStyle={styles.hScrollContent}
|
|
>
|
|
{badges.map((badge) => (
|
|
<BadgeCard key={badge.id} badge={badge} />
|
|
))}
|
|
</ScrollView>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
// 跨平台阴影
|
|
const shadow = {
|
|
shadowColor: colors.textPrimary,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 8,
|
|
elevation: 3,
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
safeArea: {
|
|
flex: 1,
|
|
backgroundColor: colors.pageBg,
|
|
},
|
|
stateWrap: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
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,
|
|
},
|
|
scroll: {
|
|
flex: 1,
|
|
},
|
|
content: {
|
|
paddingHorizontal: 20,
|
|
paddingBottom: 24,
|
|
},
|
|
/* ---- 顶部导航 ---- */
|
|
header: {
|
|
height: 48,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
headerTitle: {
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
},
|
|
headerAction: {
|
|
position: 'absolute',
|
|
right: 0,
|
|
width: 40,
|
|
height: 40,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
/* ---- 用户信息 ---- */
|
|
profileCard: {
|
|
marginTop: 8,
|
|
backgroundColor: colors.white,
|
|
borderRadius: 16,
|
|
padding: 20,
|
|
...shadow,
|
|
},
|
|
profileTop: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
avatar: {
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: 28,
|
|
backgroundColor: colors.primary,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
avatarText: {
|
|
fontSize: 24,
|
|
fontWeight: '700',
|
|
color: colors.white,
|
|
},
|
|
userName: {
|
|
marginLeft: 14,
|
|
fontSize: 20,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
},
|
|
bio: {
|
|
marginTop: 14,
|
|
fontSize: 13,
|
|
color: colors.textSecondary,
|
|
},
|
|
/* ---- 综合评分卡片 ---- */
|
|
scoreCard: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginTop: 12,
|
|
backgroundColor: colors.white,
|
|
borderRadius: 16,
|
|
padding: 20,
|
|
...shadow,
|
|
},
|
|
scoreValue: {
|
|
fontSize: 40,
|
|
fontWeight: '700',
|
|
color: colors.primary,
|
|
},
|
|
scoreUnit: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: colors.primary,
|
|
},
|
|
scoreTag: {
|
|
marginLeft: 12,
|
|
backgroundColor: colors.successLight,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 4,
|
|
borderRadius: 12,
|
|
},
|
|
scoreTagText: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: colors.successText,
|
|
},
|
|
scoreRight: {
|
|
flex: 1,
|
|
alignItems: 'flex-end',
|
|
marginLeft: 12,
|
|
},
|
|
scoreRank: {
|
|
fontSize: 13,
|
|
color: colors.textSecondary,
|
|
},
|
|
scoreAppeal: {
|
|
marginTop: 8,
|
|
fontSize: 13,
|
|
color: colors.primary,
|
|
},
|
|
/* ---- 分区标题 ---- */
|
|
sectionTitle: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
},
|
|
sectionGap: {
|
|
marginTop: 24,
|
|
marginBottom: 12,
|
|
},
|
|
sectionHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginTop: 24,
|
|
marginBottom: 12,
|
|
},
|
|
sectionMore: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
color: colors.textSecondary,
|
|
},
|
|
/* ---- 八大维度 ---- */
|
|
dimGrid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
},
|
|
dimItem: {
|
|
width: '48.5%',
|
|
backgroundColor: colors.white,
|
|
borderRadius: 16,
|
|
padding: 16,
|
|
marginBottom: 12,
|
|
...shadow,
|
|
},
|
|
dimName: {
|
|
fontSize: 13,
|
|
color: colors.textSecondary,
|
|
},
|
|
dimScoreRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginTop: 8,
|
|
},
|
|
dimScore: {
|
|
fontSize: 24,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
},
|
|
levelTag: {
|
|
marginLeft: 8,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 3,
|
|
borderRadius: 10,
|
|
},
|
|
levelTagText: {
|
|
fontSize: 12,
|
|
fontWeight: '600',
|
|
},
|
|
/* ---- 求职偏好 ---- */
|
|
prefCard: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 16,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 6,
|
|
...shadow,
|
|
},
|
|
prefRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 12,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.borderLight,
|
|
},
|
|
prefRowLast: {
|
|
borderBottomWidth: 0,
|
|
},
|
|
prefLabel: {
|
|
fontSize: 14,
|
|
color: colors.textSecondary,
|
|
},
|
|
prefValue: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: colors.textPrimary,
|
|
},
|
|
prefStatusTag: {
|
|
backgroundColor: colors.successLight,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 4,
|
|
borderRadius: 12,
|
|
},
|
|
prefStatusText: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: colors.successText,
|
|
},
|
|
/* ---- 全部勋章 ---- */
|
|
hScroll: {
|
|
flexGrow: 0,
|
|
marginHorizontal: -20,
|
|
},
|
|
hScrollContent: {
|
|
paddingHorizontal: 20,
|
|
gap: 12,
|
|
},
|
|
badgeCard: {
|
|
width: 140,
|
|
backgroundColor: colors.white,
|
|
borderRadius: 16,
|
|
padding: 16,
|
|
alignItems: 'center',
|
|
...shadow,
|
|
},
|
|
badgeIcon: {
|
|
fontSize: 32,
|
|
},
|
|
badgeTitle: {
|
|
marginTop: 10,
|
|
fontSize: 14,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
},
|
|
badgeDesc: {
|
|
marginTop: 4,
|
|
fontSize: 12,
|
|
color: colors.textSecondary,
|
|
textAlign: 'center',
|
|
},
|
|
});
|
|
|