轻松聘
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.
 
 
 

743 lines
21 KiB

import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import {
ActivityIndicator,
Alert,
Pressable,
ScrollView,
StyleSheet,
Text,
View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useProfileData } from '../../src/hooks';
import { useRole } from '../../src/context/RoleContext';
import { colors, headerGradientSolid } from '../../src/theme';
import type { Badge, DimensionScore, EnterpriseEntry, JobPreference, MenuItem, UserStats } from '../../src/types';
/* ===================== 展示层映射(全部使用主题令牌) ===================== */
/** 维度等级 → 展示配置(优秀=品牌蓝,良好=灰色) */
const DIMENSION_LEVEL: Record<
DimensionScore['level'],
{ label: string; bar: string; bg: string; text: string }
> = {
excellent: { label: '优秀', bar: colors.primary, bg: colors.primaryLight, text: colors.primaryDark },
good: { label: '良好', bar: colors.textHint, bg: colors.pageBg, text: colors.textSecondary },
};
/** 求职偏好字段 → 展示标签 */
const PREF_ITEMS: { key: keyof JobPreference; label: string }[] = [
{ key: 'position', label: '期望职位' },
{ key: 'city', label: '期望城市' },
{ key: 'salary', label: '期望薪资' },
{ key: 'workType', label: '工作类型' },
{ key: 'status', label: '求职状态' },
];
/** 功能菜单 → 图标底色(浅)与图标色(深),区分不同菜单避免单调 */
const MENU_ICON_THEME: Record<string, { bg: string; color: string }> = {
resume: { bg: colors.primaryLight, color: colors.primaryDark },
favorites: { bg: colors.actionLight, color: colors.actionText },
history: { bg: colors.infoLight, color: colors.infoText },
compare: { bg: colors.primaryLight, color: colors.primaryBtn },
'offer-compare': { bg: colors.actionLight, color: colors.actionText },
assessment: { bg: colors.successLight, color: colors.successText },
interview: { bg: colors.infoLight, color: colors.infoText },
rank: { bg: colors.primaryLight, color: colors.primaryText },
'hr-evaluation': { bg: colors.actionLight, color: colors.actionText },
onboarding: { bg: colors.successLight, color: colors.successText },
'skill-cloud': { bg: colors.successLight, color: colors.successText },
salary: { bg: colors.primaryLight, color: colors.primaryBtn },
progress: { bg: colors.infoLight, color: colors.infoText },
game: { bg: colors.successLight, color: colors.successText },
legal: { bg: colors.primaryLight, color: colors.primaryDark },
'job-publish': { bg: colors.actionLight, color: colors.actionText },
'job-evaluations': { bg: colors.successLight, color: colors.successText },
'candidate-detail': { bg: colors.infoLight, color: colors.infoText },
'interview-score': { bg: colors.actionLight, color: colors.actionText },
'job-management': { bg: colors.primaryLight, color: colors.primary },
'talent-recommendation': { bg: colors.infoLight, color: colors.infoText },
'enterprise-chat': { bg: colors.successLight, color: colors.successText },
'operation-rules': { bg: colors.primaryLight, color: colors.primaryText },
'audit-report': { bg: colors.infoLight, color: colors.infoText },
'enterprise-certification': { bg: colors.primaryLight, color: colors.primary },
};
function getMenuIconBg(id: string): string {
return MENU_ICON_THEME[id]?.bg ?? colors.primaryLight;
}
function getMenuIconColor(id: string): string {
return MENU_ICON_THEME[id]?.color ?? colors.primaryDark;
}
/* ===================== 子组件 ===================== */
/** 单个维度评分行(横向评分条) */
function DimensionRow({ dimension }: { dimension: DimensionScore }) {
const theme = DIMENSION_LEVEL[dimension.level];
return (
<View style={styles.dimRow}>
<Text style={styles.dimName}>{dimension.name}</Text>
<View style={styles.dimTrack}>
<View style={[styles.dimFill, { width: `${dimension.score}%`, backgroundColor: theme.bar }]} />
</View>
<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>
);
}
/** 单个勋章卡片(已获得=彩色,未获得=灰色+进度条) */
function BadgeCard({ badge }: { badge: Badge }) {
return (
<View style={styles.badgeCard}>
<Text style={[styles.badgeIcon, !badge.obtained && styles.badgeIconLocked]}>
{badge.icon}
</Text>
<Text style={[styles.badgeTitle, !badge.obtained && styles.badgeTitleLocked]}>
{badge.title}
</Text>
<Text style={styles.badgeDesc}>{badge.description}</Text>
{badge.obtained ? (
<View style={styles.badgeObtainedTag}>
<Text style={styles.badgeObtainedText}>已获得</Text>
</View>
) : (
<>
<View style={styles.badgeProgressTrack}>
<View
style={[
styles.badgeProgressFill,
{ width: `${((badge.progress ?? 0) / (badge.target ?? 1)) * 100}%` },
]}
/>
</View>
<Text style={styles.badgeProgressText}>
{badge.progress}/{badge.target}
</Text>
</>
)}
</View>
);
}
/** 用户统计数据行 */
function StatsRow({ stats }: { stats: UserStats }) {
const items: { key: keyof UserStats; label: string }[] = [
{ key: 'deliveries', label: '投递' },
{ key: 'favorites', label: '收藏' },
{ key: 'chats', label: '沟通' },
{ key: 'offers', label: 'Offer' },
];
return (
<View style={styles.statsCard}>
{items.map((item, index) => {
const isLast = index === items.length - 1;
return (
<View key={item.key} style={[styles.statItem, isLast && styles.statItemLast]}>
<Text style={styles.statValue}>{stats[item.key]}</Text>
<Text style={styles.statLabel}>{item.label}</Text>
</View>
);
})}
</View>
);
}
/** 切换到企业端卡片 */
function EnterpriseEntryCard({ entry }: { entry: EnterpriseEntry }) {
const router = useRouter();
const { setRole } = useRole();
return (
<Pressable
style={styles.enterpriseCard}
onPress={() => {
setRole('enterprise');
router.push('/enterprise-overview');
}}
hitSlop={4}
>
<View style={styles.enterpriseIconWrap}>
<Ionicons name="business-outline" size={22} color={colors.primary} />
</View>
<View style={styles.enterpriseText}>
<Text style={styles.enterpriseTitle}>{entry.title}</Text>
<Text style={styles.enterpriseDesc}>{entry.description}</Text>
</View>
<Text style={styles.enterpriseAction}>{entry.action}</Text>
</Pressable>
);
}
/**
* 我的页
*/
export default function ProfileScreen() {
const { role } = useRole();
const {
profile,
userStats,
overallScore,
dimensions,
preference,
badges,
menuItems,
enterpriseEntry,
loading,
error,
refresh,
} = useProfileData(role ?? 'candidate');
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 || !userStats || !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.scrollContent}
showsVerticalScrollIndicator={false}
>
{/* 顶部渐变头部:标题 + 用户信息(随页面滚动) */}
<LinearGradient
colors={headerGradientSolid}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.headerGradient}
>
<View style={styles.headerRow}>
<Text style={styles.headerTitle}>我的</Text>
<Pressable onPress={() => router.push('/settings')} hitSlop={8}>
<Ionicons name="settings-outline" size={22} color={colors.textInverse} />
</Pressable>
</View>
<View style={styles.profileRow}>
<View style={styles.avatar}>
<Text style={styles.avatarText}>{profile.avatar}</Text>
</View>
<View style={styles.profileInfo}>
<Text style={styles.userName}>{profile.name}</Text>
<Text style={styles.bio}>{profile.bio}</Text>
</View>
</View>
</LinearGradient>
{/* 内容区 */}
<View style={styles.content}>
{/* 切换到企业端 */}
{enterpriseEntry ? <EnterpriseEntryCard entry={enterpriseEntry} /> : null}
{/* 用户统计 */}
<StatsRow stats={userStats} />
{/* 综合评分卡片 */}
<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>
<Text style={styles.scoreRank}>{overallScore.rank}</Text>
</View>
{/* 八大维度评分 */}
<View style={styles.sectionHeader}>
<View style={styles.sectionBar} />
<Text style={[styles.sectionTitle, styles.sectionTitleGrow]}>八大维度评分</Text>
<Pressable onPress={() => Alert.alert('评分申诉', '评分申诉功能开发中,敬请期待')} hitSlop={6}>
<Text style={styles.sectionLink}>评分申诉</Text>
</Pressable>
</View>
<View style={styles.dimCard}>
{dimensions.map((dimension) => (
<DimensionRow key={dimension.id} dimension={dimension} />
))}
</View>
{/* 求职偏好 */}
<View style={styles.sectionHeader}>
<View style={styles.sectionBar} />
<Text style={[styles.sectionTitle, styles.sectionTitleGrow]}>求职偏好</Text>
<Pressable onPress={() => router.push('/job-preference')} hitSlop={6}>
<Text style={styles.sectionLink}>编辑</Text>
</Pressable>
</View>
<View style={styles.prefCard}>
{PREF_ITEMS.map(({ key, label }, index) => {
const value = preference[key];
const isLast = index === PREF_ITEMS.length - 1;
const isStatus = key === 'status';
return (
<Pressable
key={key}
style={[styles.prefRow, isLast && styles.prefRowLast]}
onPress={() => router.push('/job-preference')}
>
<Text style={styles.prefLabel}>{label}</Text>
{isStatus ? (
<View style={styles.prefStatus}>
<View style={styles.prefStatusDot} />
<Text style={styles.prefStatusText}>{value}</Text>
</View>
) : (
<Text style={styles.prefValue}>{value}</Text>
)}
</Pressable>
);
})}
</View>
{/* 全部勋章 */}
<View style={styles.sectionHeader}>
<View style={styles.sectionBar} />
<Text style={[styles.sectionTitle, styles.sectionTitleGrow]}>全部勋章</Text>
</View>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
style={styles.hScroll}
contentContainerStyle={styles.hScrollContent}
>
{badges.map((badge) => (
<BadgeCard key={badge.id} badge={badge} />
))}
</ScrollView>
{/* 功能菜单(简历 / 收藏 / 历史 / 岗位对比 / 测评 / 竞争力排名) */}
<View style={styles.sectionHeader}>
<View style={styles.sectionBar} />
<Text style={[styles.sectionTitle, styles.sectionTitleGrow]}>功能菜单</Text>
</View>
<View style={styles.menuCard}>
{menuItems.map((item: MenuItem, idx: number) => {
const isLast = idx === menuItems.length - 1;
return (
<Pressable
key={item.id}
style={[styles.menuRow, isLast && styles.menuRowLast]}
onPress={() => {
if (item.route) router.push(item.route);
}}
hitSlop={4}
>
<View style={[styles.menuIconWrap, { backgroundColor: getMenuIconBg(item.id) }]}>
<Ionicons name={item.icon as any} size={18} color={getMenuIconColor(item.id)} />
</View>
<Text style={styles.menuTitle}>{item.title}</Text>
<Ionicons name="chevron-forward" size={16} color={colors.textHint} />
</Pressable>
);
})}
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
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,
},
/* ---- 顶部渐变头部 ---- */
headerGradient: {
paddingHorizontal: 8,
paddingTop: 8,
paddingBottom: 24,
borderBottomLeftRadius: 24,
borderBottomRightRadius: 24,
},
headerRow: {
height: 40,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
headerTitle: {
fontSize: 17,
fontWeight: '700',
color: colors.textInverse,
},
profileRow: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 8,
},
avatar: {
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: colors.white,
alignItems: 'center',
justifyContent: 'center',
},
avatarText: {
fontSize: 26,
fontWeight: '700',
color: colors.primary,
},
profileInfo: {
marginLeft: 14,
},
userName: {
fontSize: 20,
fontWeight: '700',
color: colors.textInverse,
},
bio: {
marginTop: 6,
fontSize: 13,
color: colors.textInverse,
opacity: 0.85,
},
/* ---- 内容区 ---- */
scroll: {
flex: 1,
},
scrollContent: {
paddingBottom: 24,
},
content: {
paddingHorizontal: 8,
paddingTop: 16,
},
/* ---- 综合评分卡片 ---- */
scoreCard: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: colors.white,
borderRadius: 8,
paddingHorizontal: 16,
paddingVertical: 16,
},
scoreValue: {
fontSize: 40,
fontWeight: '700',
color: colors.primaryDark,
},
scoreUnit: {
fontSize: 16,
fontWeight: '600',
color: colors.primaryDark,
},
scoreTag: {
marginLeft: 12,
backgroundColor: colors.primaryLight,
paddingHorizontal: 10,
paddingVertical: 4,
borderRadius: 12,
},
scoreTagText: {
fontSize: 13,
fontWeight: '600',
color: colors.primaryDark,
},
scoreRank: {
flex: 1,
textAlign: 'right',
marginLeft: 12,
fontSize: 13,
color: colors.textSecondary,
},
/* ---- 分区标题 ---- */
sectionHeader: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 24,
marginBottom: 12,
},
sectionBar: {
width: 4,
height: 16,
borderRadius: 2,
backgroundColor: colors.primary,
marginRight: 8,
},
sectionTitle: {
fontSize: 18,
fontWeight: '700',
color: colors.textPrimary,
},
sectionTitleGrow: {
flex: 1,
},
sectionLink: {
fontSize: 13,
color: colors.primary,
},
/* ---- 八大维度(横向评分条) ---- */
dimCard: {
backgroundColor: colors.white,
borderRadius: 8,
paddingHorizontal: 16,
paddingVertical: 6,
},
dimRow: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 12,
},
dimName: {
width: 78,
fontSize: 13,
color: colors.textSecondary,
},
dimTrack: {
flex: 1,
height: 6,
borderRadius: 3,
backgroundColor: colors.border,
marginHorizontal: 12,
},
dimFill: {
height: 6,
borderRadius: 3,
},
dimScore: {
width: 28,
textAlign: 'right',
fontSize: 14,
fontWeight: '700',
color: colors.textPrimary,
},
levelTag: {
marginLeft: 10,
paddingHorizontal: 8,
paddingVertical: 2,
borderRadius: 10,
},
levelTagText: {
fontSize: 11,
fontWeight: '600',
},
/* ---- 求职偏好 ---- */
prefCard: {
backgroundColor: colors.white,
borderRadius: 8,
paddingHorizontal: 16,
paddingVertical: 6,
},
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,
},
prefStatus: {
flexDirection: 'row',
alignItems: 'center',
},
prefStatusDot: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: colors.success,
marginRight: 6,
},
prefStatusText: {
fontSize: 14,
fontWeight: '600',
color: colors.successText,
},
/* ---- 全部勋章 ---- */
hScroll: {
flexGrow: 0,
marginHorizontal: -8,
},
hScrollContent: {
paddingHorizontal: 8,
gap: 12,
},
badgeCard: {
width: 140,
backgroundColor: colors.white,
borderRadius: 8,
padding: 16,
alignItems: 'center',
},
badgeIcon: {
fontSize: 32,
},
badgeIconLocked: {
opacity: 0.35,
},
badgeTitle: {
marginTop: 10,
fontSize: 14,
fontWeight: '700',
color: colors.textPrimary,
},
badgeTitleLocked: {
color: colors.textHint,
},
badgeDesc: {
marginTop: 4,
fontSize: 12,
color: colors.textSecondary,
textAlign: 'center',
},
badgeObtainedTag: {
marginTop: 10,
backgroundColor: colors.successLight,
paddingHorizontal: 10,
paddingVertical: 3,
borderRadius: 10,
},
badgeObtainedText: {
fontSize: 11,
fontWeight: '600',
color: colors.successText,
},
badgeProgressTrack: {
width: '100%',
height: 4,
borderRadius: 2,
backgroundColor: colors.border,
marginTop: 12,
},
badgeProgressFill: {
height: 4,
borderRadius: 2,
backgroundColor: colors.primary,
},
badgeProgressText: {
marginTop: 6,
fontSize: 11,
color: colors.textHint,
},
/* ---- 用户统计 ---- */
statsCard: {
flexDirection: 'row',
backgroundColor: colors.white,
borderRadius: 12,
paddingVertical: 16,
marginBottom: 12,
},
statItem: {
flex: 1,
alignItems: 'center',
borderRightWidth: StyleSheet.hairlineWidth,
borderRightColor: colors.borderLight,
},
statItemLast: { borderRightWidth: 0 },
statValue: { fontSize: 18, fontWeight: '800', color: colors.textPrimary },
statLabel: { fontSize: 12, color: colors.textSecondary, marginTop: 4 },
/* ---- 切换到企业端 ---- */
enterpriseCard: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: colors.white,
borderRadius: 12,
paddingHorizontal: 16,
paddingVertical: 16,
marginBottom: 12,
},
enterpriseIconWrap: {
width: 44,
height: 44,
borderRadius: 12,
backgroundColor: colors.primaryLight,
alignItems: 'center',
justifyContent: 'center',
},
enterpriseText: { flex: 1, marginLeft: 12 },
enterpriseTitle: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
enterpriseDesc: { fontSize: 12, color: colors.textSecondary, marginTop: 3 },
enterpriseAction: { fontSize: 13, fontWeight: '600', color: colors.primaryDark },
/* ---- 功能菜单 ---- */
menuCard: {
backgroundColor: colors.white,
borderRadius: 8,
paddingHorizontal: 16,
},
menuRow: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 14,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: colors.borderLight,
},
menuRowLast: {
borderBottomWidth: 0,
},
menuIconWrap: {
width: 32,
height: 32,
borderRadius: 8,
alignItems: 'center',
justifyContent: 'center',
marginRight: 12,
},
menuTitle: {
flex: 1,
fontSize: 14,
fontWeight: '500',
color: colors.textPrimary,
},
});