Browse Source
后端有、前端完全没有的整条企业投递链路（含 4 个候选人反馈端点）：
- api: fetchCompanyApplications（GET /company/candidates，筛岗位/状态/关键词/分页）、
fetchCompanyApplicationDetail（GET /company/candidates/{applicationId}）、
updateApplicationStatus（PATCH /applications/{id}/status）、
fetchCandidateFeedback / createCandidateFeedback / updateCandidateFeedback / deleteCandidateFeedback
- 状态 token 跨边界转换：后端大写 SUBMITTED/VIEWED/INTERVIEW/HIRED… ↔ 前端小写联合类型，
双向都过 toApplicationStatus / toBackendApplicationStatus，页面不拼大写串
- http: HttpMethod 补 PATCH（契约里投递状态、意愿分、适合度分都是 PATCH，原先只能绕开统一请求层）
- types: CompanyApplicationItem / CompanyCandidateDetail / CompanyApplicationQuery /
CandidateFeedback / CandidateFeedbackInput；ApplicationStatus 补 'hired'（此前漏了「已录用」）
- constants: APPLICATION_STATUS_LABELS / COMPANY_APPLICATION_FILTERS /
APPLICATION_STATUS_TRANSITIONS（禁止状态倒退）/ CANDIDATE_FEEDBACK_TAG_SUGGESTIONS
- theme: applicationStatusColors 九态徽标色板，全部走 token
- 页面: app/enterprise-applications.tsx 投递工作台（筛选条计数独立于筛选、关键词、四态、返回即刷新）；
app/application-detail.tsx 详情（状态流转 + 二次确认、时间线、反馈读/写/改/删）
- 入口: 企业端「我的」快捷入口与菜单各加「收到的投递」；两页路由注册（headerShown:false，避免叠 header）
- 组件: 抽出 components/RatingStars.tsx，岗位评价页与本页共用一份星级，删掉页面内的重复实现
- 测试: 新增 enterprise-applications.test.ts 14 例（token 双向、筛选、持久化、反馈单条约束、真实路径）；
全量 514 例通过
master
doublex001
4 weeks ago
16 changed files with 2448 additions and 82 deletions
@ -0,0 +1,945 @@ |
|||
/** |
|||
* 企业端 · 投递详情 |
|||
* |
|||
* 这是企业侧投递链路的第二层：在这一页完成两件**会改变数据**的事 —— |
|||
* ① 推进投递状态（后端只接受正向流转） |
|||
* ② 写 / 改 / 删候选人反馈（一条投递最多一条反馈） |
|||
* |
|||
* 页面本身不做业务判断：下一步能做什么由 constants 的 APPLICATION_STATUS_TRANSITIONS 决定， |
|||
* 「已有反馈该走 PUT 还是 POST」由 hook 决定。页面只负责渲染与二次确认。 |
|||
*/ |
|||
import { Ionicons } from '@expo/vector-icons'; |
|||
import { useLocalSearchParams, useRouter } from 'expo-router'; |
|||
import { useState } from 'react'; |
|||
import { |
|||
ActivityIndicator, |
|||
Alert, |
|||
KeyboardAvoidingView, |
|||
Modal, |
|||
Platform, |
|||
Pressable, |
|||
ScrollView, |
|||
StyleSheet, |
|||
Text, |
|||
TextInput, |
|||
View, |
|||
} from 'react-native'; |
|||
import { SafeAreaView } from 'react-native-safe-area-context'; |
|||
import { RatingStars, STAR_COLOR } from '../components/RatingStars'; |
|||
import { ErrorState, LoadingState } from '../src/components/StateView'; |
|||
import { |
|||
APPLICATION_STATUS_LABELS, |
|||
APPLICATION_STATUS_TRANSITIONS, |
|||
CANDIDATE_FEEDBACK_TAG_SUGGESTIONS, |
|||
} from '../src/constants'; |
|||
import { useCompanyApplicationDetail } from '../src/hooks'; |
|||
import { applicationStatusColors, colors, spacing } from '../src/theme'; |
|||
import type { |
|||
ApplicationStatus, |
|||
CandidateFeedback, |
|||
CandidateFeedbackInput, |
|||
CompanyCandidateDetail, |
|||
} from '../src/types'; |
|||
|
|||
/** 反馈编辑器初值；编辑已有反馈时回填 */ |
|||
const EMPTY_FEEDBACK: CandidateFeedbackInput = { rating: 0, content: '', tags: [] }; |
|||
|
|||
function formatDateTime(iso?: string): string { |
|||
if (!iso) return '—'; |
|||
const date = new Date(iso); |
|||
if (Number.isNaN(date.getTime())) return '—'; |
|||
const pad = (n: number) => n.toString().padStart(2, '0'); |
|||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad( |
|||
date.getHours(), |
|||
)}:${pad(date.getMinutes())}`;
|
|||
} |
|||
|
|||
/* ===================== 子组件 ===================== */ |
|||
|
|||
function StatusBadge({ status }: { status: ApplicationStatus }) { |
|||
const tone = applicationStatusColors[status]; |
|||
return ( |
|||
<View style={[styles.badge, { backgroundColor: tone.bg }]}> |
|||
<Text style={[styles.badgeText, { color: tone.color }]}> |
|||
{APPLICATION_STATUS_LABELS[status]} |
|||
</Text> |
|||
</View> |
|||
); |
|||
} |
|||
|
|||
function SectionTitle({ title }: { title: string }) { |
|||
return <Text style={styles.sectionTitle}>{title}</Text>; |
|||
} |
|||
|
|||
/** 候选人 + 岗位信息 */ |
|||
function ProfileCard({ detail }: { detail: CompanyCandidateDetail }) { |
|||
const meta = [ |
|||
detail.candidateSchool, |
|||
detail.candidateEducation, |
|||
detail.candidateGraduationYear ? `${detail.candidateGraduationYear} 届` : undefined, |
|||
detail.candidateLocation, |
|||
] |
|||
.filter(Boolean) |
|||
.join(' · '); |
|||
|
|||
return ( |
|||
<View style={styles.card}> |
|||
<View style={styles.profileTop}> |
|||
<View style={styles.avatar}> |
|||
<Text style={styles.avatarText}>{detail.candidateName.slice(0, 1)}</Text> |
|||
</View> |
|||
<View style={styles.profileMain}> |
|||
<View style={styles.profileNameRow}> |
|||
<Text style={styles.name}>{detail.candidateName}</Text> |
|||
<StatusBadge status={detail.status} /> |
|||
</View> |
|||
<Text style={styles.meta}>{meta || '学历信息未公开'}</Text> |
|||
</View> |
|||
</View> |
|||
|
|||
{detail.candidateBio ? ( |
|||
<Text style={styles.bio}>{detail.candidateBio}</Text> |
|||
) : null} |
|||
|
|||
{detail.candidateSkills && detail.candidateSkills.length > 0 ? ( |
|||
<View style={styles.chips}> |
|||
{detail.candidateSkills.map((skill) => ( |
|||
<View key={skill} style={styles.chip}> |
|||
<Text style={styles.chipText}>{skill}</Text> |
|||
</View> |
|||
))} |
|||
</View> |
|||
) : null} |
|||
|
|||
<View style={styles.divider} /> |
|||
|
|||
<View style={styles.kvRow}> |
|||
<Text style={styles.kvLabel}>应聘岗位</Text> |
|||
<Text style={styles.kvValue}>{detail.jobTitle}</Text> |
|||
</View> |
|||
<View style={styles.kvRow}> |
|||
<Text style={styles.kvLabel}>用工类型</Text> |
|||
<Text style={styles.kvValue}> |
|||
{[detail.jobEmploymentType, detail.jobCity].filter(Boolean).join(' · ') || '—'} |
|||
</Text> |
|||
</View> |
|||
<View style={styles.kvRow}> |
|||
<Text style={styles.kvLabel}>投递时间</Text> |
|||
<Text style={styles.kvValue}>{formatDateTime(detail.createdAt)}</Text> |
|||
</View> |
|||
<View style={styles.kvRow}> |
|||
<Text style={styles.kvLabel}>最近更新</Text> |
|||
<Text style={styles.kvValue}>{formatDateTime(detail.updatedAt)}</Text> |
|||
</View> |
|||
</View> |
|||
); |
|||
} |
|||
|
|||
/** 状态流转：只渲染允许的下一步，终态给出明确说明而不是留白 */ |
|||
function StatusActionCard({ |
|||
status, |
|||
updating, |
|||
onChange, |
|||
}: { |
|||
status: ApplicationStatus; |
|||
updating: boolean; |
|||
onChange: (next: ApplicationStatus) => void; |
|||
}) { |
|||
const nextOptions = APPLICATION_STATUS_TRANSITIONS[status]; |
|||
return ( |
|||
<View style={styles.card}> |
|||
<View style={styles.statusRow}> |
|||
<Text style={styles.statusLabel}>当前状态</Text> |
|||
<StatusBadge status={status} /> |
|||
</View> |
|||
{nextOptions.length === 0 ? ( |
|||
<Text style={styles.terminalHint}> |
|||
{status === 'hired' |
|||
? '该候选人已录用，投递流程结束。' |
|||
: status === 'rejected' |
|||
? '该投递已拒绝，流程结束。' |
|||
: '该投递已结束，无法再变更状态。'} |
|||
</Text> |
|||
) : ( |
|||
<> |
|||
<Text style={styles.actionHint}>推进到：</Text> |
|||
<View style={styles.actionRow}> |
|||
{nextOptions.map((next) => { |
|||
const tone = applicationStatusColors[next]; |
|||
const isReject = next === 'rejected'; |
|||
return ( |
|||
<Pressable |
|||
key={next} |
|||
style={[ |
|||
styles.actionBtn, |
|||
{ backgroundColor: tone.bg }, |
|||
updating && styles.actionBtnDisabled, |
|||
]} |
|||
disabled={updating} |
|||
onPress={() => onChange(next)} |
|||
> |
|||
{updating ? ( |
|||
<ActivityIndicator size="small" color={tone.color} /> |
|||
) : ( |
|||
<Text |
|||
style={[ |
|||
styles.actionText, |
|||
{ color: tone.color }, |
|||
isReject && styles.actionTextDanger, |
|||
]} |
|||
> |
|||
{APPLICATION_STATUS_LABELS[next]} |
|||
</Text> |
|||
)} |
|||
</Pressable> |
|||
); |
|||
})} |
|||
</View> |
|||
</> |
|||
)} |
|||
</View> |
|||
); |
|||
} |
|||
|
|||
/** 候选人反馈区：已有反馈可改可删，没有则引导去写 */ |
|||
function FeedbackCard({ |
|||
feedback, |
|||
onEdit, |
|||
onDelete, |
|||
busy, |
|||
}: { |
|||
feedback: CandidateFeedback | null; |
|||
onEdit: () => void; |
|||
onDelete: () => void; |
|||
busy: boolean; |
|||
}) { |
|||
if (!feedback) { |
|||
return ( |
|||
<View style={styles.card}> |
|||
<View style={styles.feedbackEmpty}> |
|||
<Ionicons name="chatbox-ellipses-outline" size={28} color={colors.textHint} /> |
|||
<Text style={styles.feedbackEmptyTitle}>还没有写反馈</Text> |
|||
<Text style={styles.feedbackEmptyHint}> |
|||
记录这位候选人的面试表现，后续 Offer 决策时可回溯 |
|||
</Text> |
|||
<Pressable style={styles.primaryBtn} onPress={onEdit}> |
|||
<Text style={styles.primaryBtnText}>写反馈</Text> |
|||
</Pressable> |
|||
</View> |
|||
</View> |
|||
); |
|||
} |
|||
|
|||
return ( |
|||
<View style={styles.card}> |
|||
<View style={styles.feedbackTop}> |
|||
<RatingStars value={feedback.rating} size={15} /> |
|||
<Text style={styles.feedbackRating}>{feedback.rating}.0</Text> |
|||
</View> |
|||
<Text style={styles.feedbackContent}>{feedback.content}</Text> |
|||
{feedback.tags.length > 0 ? ( |
|||
<View style={styles.chips}> |
|||
{feedback.tags.map((tag) => ( |
|||
<View key={tag} style={styles.chip}> |
|||
<Text style={styles.chipText}>{tag}</Text> |
|||
</View> |
|||
))} |
|||
</View> |
|||
) : null} |
|||
<Text style={styles.feedbackTime}>最后更新 {formatDateTime(feedback.updatedAt)}</Text> |
|||
<View style={styles.feedbackActions}> |
|||
<Pressable style={styles.linkBtn} onPress={onEdit} disabled={busy}> |
|||
<Ionicons name="create-outline" size={14} color={colors.primaryText} /> |
|||
<Text style={styles.linkText}>修改</Text> |
|||
</Pressable> |
|||
<Pressable style={styles.linkBtn} onPress={onDelete} disabled={busy}> |
|||
{busy ? ( |
|||
<ActivityIndicator size="small" color={colors.dangerText} /> |
|||
) : ( |
|||
<> |
|||
<Ionicons name="trash-outline" size={14} color={colors.dangerText} /> |
|||
<Text style={[styles.linkText, styles.linkTextDanger]}>删除</Text> |
|||
</> |
|||
)} |
|||
</Pressable> |
|||
</View> |
|||
</View> |
|||
); |
|||
} |
|||
|
|||
/** 反馈编辑器（新建 / 修改共用） */ |
|||
function FeedbackEditorModal({ |
|||
visible, |
|||
initial, |
|||
submitting, |
|||
onClose, |
|||
onSubmit, |
|||
}: { |
|||
visible: boolean; |
|||
initial: CandidateFeedback | null; |
|||
submitting: boolean; |
|||
onClose: () => void; |
|||
onSubmit: (input: CandidateFeedbackInput) => void; |
|||
}) { |
|||
const [draft, setDraft] = useState<CandidateFeedbackInput>(EMPTY_FEEDBACK); |
|||
const [seededFor, setSeededFor] = useState<string | null>(null); |
|||
|
|||
// 打开时按 initial 播种一次：用「是否已播种过这条反馈」判断，避免每次父组件重渲染都覆盖用户正在输入的内容
|
|||
const seedKey = visible ? (initial?.id ?? 'new') : null; |
|||
if (seedKey !== seededFor) { |
|||
setSeededFor(seedKey); |
|||
setDraft( |
|||
initial |
|||
? { rating: initial.rating, content: initial.content, tags: [...initial.tags] } |
|||
: EMPTY_FEEDBACK, |
|||
); |
|||
} |
|||
|
|||
const toggleTag = (tag: string) => { |
|||
setDraft((prev) => ({ |
|||
...prev, |
|||
tags: prev.tags.includes(tag) ? prev.tags.filter((t) => t !== tag) : [...prev.tags, tag], |
|||
})); |
|||
}; |
|||
|
|||
const handleSubmit = () => { |
|||
if (draft.rating <= 0) { |
|||
Alert.alert('提示', '请先给候选人一个评分'); |
|||
return; |
|||
} |
|||
if (!draft.content.trim()) { |
|||
Alert.alert('提示', '请填写反馈内容'); |
|||
return; |
|||
} |
|||
onSubmit({ ...draft, content: draft.content.trim() }); |
|||
}; |
|||
|
|||
return ( |
|||
<Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}> |
|||
<KeyboardAvoidingView |
|||
style={styles.modalMask} |
|||
behavior={Platform.OS === 'ios' ? 'padding' : undefined} |
|||
> |
|||
<View style={styles.modalSheet}> |
|||
<View style={styles.modalHeader}> |
|||
<Text style={styles.modalTitle}>{initial ? '修改反馈' : '写反馈'}</Text> |
|||
<Pressable onPress={onClose} hitSlop={8} accessibilityLabel="关闭"> |
|||
<Ionicons name="close" size={22} color={colors.textSecondary} /> |
|||
</Pressable> |
|||
</View> |
|||
<ScrollView style={styles.modalBody} keyboardShouldPersistTaps="handled"> |
|||
<Text style={styles.fieldLabel}>评分</Text> |
|||
<View style={styles.ratingRow}> |
|||
<RatingStars |
|||
value={draft.rating} |
|||
size={26} |
|||
onChange={(next) => setDraft((prev) => ({ ...prev, rating: next }))} |
|||
/> |
|||
<Text style={styles.ratingHint}> |
|||
{draft.rating > 0 ? `${draft.rating} 分` : '点击星星评分'} |
|||
</Text> |
|||
</View> |
|||
|
|||
<Text style={styles.fieldLabel}>标签（选填，可多选）</Text> |
|||
<View style={styles.tagPicker}> |
|||
{CANDIDATE_FEEDBACK_TAG_SUGGESTIONS.map((tag) => { |
|||
const active = draft.tags.includes(tag); |
|||
return ( |
|||
<Pressable |
|||
key={tag} |
|||
style={[styles.tagChip, active && styles.tagChipActive]} |
|||
onPress={() => toggleTag(tag)} |
|||
> |
|||
<Text style={[styles.tagChipText, active && styles.tagChipTextActive]}> |
|||
{tag} |
|||
</Text> |
|||
</Pressable> |
|||
); |
|||
})} |
|||
</View> |
|||
|
|||
<Text style={styles.fieldLabel}>反馈内容</Text> |
|||
<TextInput |
|||
style={styles.modalInput} |
|||
placeholder="记录面试表现、亮点与顾虑，供后续决策回溯..." |
|||
placeholderTextColor={colors.textHint} |
|||
value={draft.content} |
|||
onChangeText={(text) => setDraft((prev) => ({ ...prev, content: text }))} |
|||
multiline |
|||
maxLength={500} |
|||
/> |
|||
<Text style={styles.counterText}>{draft.content.length}/500</Text> |
|||
</ScrollView> |
|||
|
|||
<View style={styles.modalFooter}> |
|||
<Pressable |
|||
style={[styles.submitBtn, submitting && styles.submitBtnDisabled]} |
|||
onPress={handleSubmit} |
|||
disabled={submitting} |
|||
> |
|||
{submitting ? ( |
|||
<ActivityIndicator size="small" color={colors.white} /> |
|||
) : ( |
|||
<Text style={styles.submitText}>{initial ? '保存修改' : '提交反馈'}</Text> |
|||
)} |
|||
</Pressable> |
|||
</View> |
|||
</View> |
|||
</KeyboardAvoidingView> |
|||
</Modal> |
|||
); |
|||
} |
|||
|
|||
/* ===================== 页面 ===================== */ |
|||
|
|||
export default function ApplicationDetailScreen() { |
|||
const router = useRouter(); |
|||
const { id } = useLocalSearchParams<{ id: string }>(); |
|||
const applicationId = id ?? ''; |
|||
|
|||
const { |
|||
detail, |
|||
timeline, |
|||
feedback, |
|||
loading, |
|||
error, |
|||
refresh, |
|||
updating, |
|||
savingFeedback, |
|||
changeStatus, |
|||
saveFeedback, |
|||
removeFeedback, |
|||
} = useCompanyApplicationDetail(applicationId); |
|||
|
|||
const [editorOpen, setEditorOpen] = useState(false); |
|||
|
|||
const handleChangeStatus = (next: ApplicationStatus) => { |
|||
Alert.alert( |
|||
'确认变更状态', |
|||
`将投递状态改为「${APPLICATION_STATUS_LABELS[next]}」？该操作会同步给学生端。`, |
|||
[ |
|||
{ text: '取消', style: 'cancel' }, |
|||
{ |
|||
text: '确认变更', |
|||
style: next === 'rejected' ? 'destructive' : 'default', |
|||
onPress: async () => { |
|||
try { |
|||
await changeStatus(next); |
|||
} catch (e) { |
|||
Alert.alert('变更失败', (e as Error).message || '请稍后重试'); |
|||
} |
|||
}, |
|||
}, |
|||
], |
|||
); |
|||
}; |
|||
|
|||
const handleSubmitFeedback = async (input: CandidateFeedbackInput) => { |
|||
try { |
|||
await saveFeedback(input, feedback); |
|||
setEditorOpen(false); |
|||
} catch (e) { |
|||
Alert.alert('保存失败', (e as Error).message || '请稍后重试'); |
|||
} |
|||
}; |
|||
|
|||
const handleDeleteFeedback = () => { |
|||
Alert.alert('删除反馈', '删除后无法恢复，确定要删除这条反馈吗？', [ |
|||
{ text: '取消', style: 'cancel' }, |
|||
{ |
|||
text: '删除', |
|||
style: 'destructive', |
|||
onPress: async () => { |
|||
try { |
|||
await removeFeedback(); |
|||
} catch (e) { |
|||
Alert.alert('删除失败', (e as Error).message || '请稍后重试'); |
|||
} |
|||
}, |
|||
}, |
|||
]); |
|||
}; |
|||
|
|||
return ( |
|||
<SafeAreaView style={styles.safeArea} edges={['top', 'bottom']}> |
|||
<View style={styles.header}> |
|||
<Pressable style={styles.headerBtn} onPress={() => router.back()} hitSlop={8}> |
|||
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} /> |
|||
</Pressable> |
|||
<Text style={styles.headerTitle}>投递详情</Text> |
|||
<View style={styles.headerBtn} /> |
|||
</View> |
|||
|
|||
{loading ? ( |
|||
<LoadingState text="正在加载投递详情…" /> |
|||
) : error || !detail ? ( |
|||
<ErrorState message="投递详情加载失败" onRetry={refresh} /> |
|||
) : ( |
|||
<ScrollView |
|||
style={styles.scroll} |
|||
contentContainerStyle={styles.content} |
|||
showsVerticalScrollIndicator={false} |
|||
> |
|||
<ProfileCard detail={detail} /> |
|||
|
|||
<SectionTitle title="投递状态" /> |
|||
<StatusActionCard |
|||
status={detail.status} |
|||
updating={updating} |
|||
onChange={handleChangeStatus} |
|||
/> |
|||
|
|||
{detail.coverLetter ? ( |
|||
<> |
|||
<SectionTitle title="求职信" /> |
|||
<View style={styles.card}> |
|||
<Text style={styles.coverLetter}>{detail.coverLetter}</Text> |
|||
</View> |
|||
</> |
|||
) : null} |
|||
|
|||
<SectionTitle title="状态时间线" /> |
|||
{timeline.length === 0 ? ( |
|||
<View style={styles.card}> |
|||
<Text style={styles.timelineEmpty}>暂无状态变更记录</Text> |
|||
</View> |
|||
) : ( |
|||
<View style={styles.card}> |
|||
{timeline.map((event, index) => ( |
|||
<View key={`${event.status}-${index}`} style={styles.timelineRow}> |
|||
<View style={styles.timelineDot} /> |
|||
<View style={styles.timelineMain}> |
|||
<Text style={styles.timelineStatus}> |
|||
{APPLICATION_STATUS_LABELS[event.status] ?? event.status} |
|||
</Text> |
|||
{event.note ? ( |
|||
<Text style={styles.timelineNote}>{event.note}</Text> |
|||
) : null} |
|||
</View> |
|||
<Text style={styles.timelineTime}>{formatDateTime(event.time)}</Text> |
|||
</View> |
|||
))} |
|||
</View> |
|||
)} |
|||
|
|||
<SectionTitle title="候选人反馈" /> |
|||
<FeedbackCard |
|||
feedback={feedback} |
|||
busy={savingFeedback} |
|||
onEdit={() => setEditorOpen(true)} |
|||
onDelete={handleDeleteFeedback} |
|||
/> |
|||
</ScrollView> |
|||
)} |
|||
|
|||
<FeedbackEditorModal |
|||
visible={editorOpen} |
|||
initial={feedback} |
|||
submitting={savingFeedback} |
|||
onClose={() => setEditorOpen(false)} |
|||
onSubmit={handleSubmitFeedback} |
|||
/> |
|||
</SafeAreaView> |
|||
); |
|||
} |
|||
|
|||
const styles = StyleSheet.create({ |
|||
safeArea: { |
|||
flex: 1, |
|||
backgroundColor: colors.pageBg, |
|||
}, |
|||
header: { |
|||
height: 48, |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
}, |
|||
headerBtn: { |
|||
width: 48, |
|||
height: 48, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
}, |
|||
headerTitle: { |
|||
flex: 1, |
|||
textAlign: 'center', |
|||
fontSize: 17, |
|||
fontWeight: '700', |
|||
color: colors.textPrimary, |
|||
}, |
|||
scroll: { |
|||
flex: 1, |
|||
}, |
|||
content: { |
|||
paddingHorizontal: spacing.framework, |
|||
paddingBottom: 24, |
|||
}, |
|||
sectionTitle: { |
|||
marginTop: spacing.card, |
|||
marginBottom: spacing.card, |
|||
fontSize: 15, |
|||
fontWeight: '700', |
|||
color: colors.textPrimary, |
|||
}, |
|||
/* ---- 卡片 ---- */ |
|||
card: { |
|||
backgroundColor: colors.white, |
|||
borderRadius: spacing.card, |
|||
padding: spacing.card + 4, |
|||
marginBottom: spacing.card, |
|||
}, |
|||
badge: { |
|||
paddingHorizontal: 8, |
|||
paddingVertical: 2, |
|||
borderRadius: spacing.card, |
|||
}, |
|||
badgeText: { |
|||
fontSize: 11, |
|||
fontWeight: '600', |
|||
}, |
|||
/* ---- 候选人 / 岗位 ---- */ |
|||
profileTop: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
gap: spacing.card, |
|||
}, |
|||
avatar: { |
|||
width: 48, |
|||
height: 48, |
|||
borderRadius: 24, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
backgroundColor: colors.primaryLight, |
|||
}, |
|||
avatarText: { |
|||
fontSize: 20, |
|||
fontWeight: '700', |
|||
color: colors.primaryText, |
|||
}, |
|||
profileMain: { |
|||
flex: 1, |
|||
}, |
|||
profileNameRow: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
gap: spacing.card, |
|||
}, |
|||
name: { |
|||
fontSize: 17, |
|||
fontWeight: '700', |
|||
color: colors.textPrimary, |
|||
}, |
|||
meta: { |
|||
marginTop: 4, |
|||
fontSize: 12, |
|||
color: colors.textSecondary, |
|||
}, |
|||
bio: { |
|||
marginTop: spacing.card + 4, |
|||
fontSize: 13, |
|||
lineHeight: 20, |
|||
color: colors.textPrimary, |
|||
}, |
|||
chips: { |
|||
flexDirection: 'row', |
|||
flexWrap: 'wrap', |
|||
marginTop: spacing.card + 2, |
|||
gap: spacing.card, |
|||
}, |
|||
chip: { |
|||
paddingHorizontal: 8, |
|||
paddingVertical: 3, |
|||
borderRadius: spacing.card, |
|||
backgroundColor: colors.pageBg, |
|||
}, |
|||
chipText: { |
|||
fontSize: 11, |
|||
color: colors.textSecondary, |
|||
}, |
|||
divider: { |
|||
height: 1, |
|||
marginVertical: spacing.card + 4, |
|||
backgroundColor: colors.borderLight, |
|||
}, |
|||
kvRow: { |
|||
flexDirection: 'row', |
|||
justifyContent: 'space-between', |
|||
paddingVertical: 4, |
|||
}, |
|||
kvLabel: { |
|||
fontSize: 12, |
|||
color: colors.textHint, |
|||
}, |
|||
kvValue: { |
|||
flexShrink: 1, |
|||
textAlign: 'right', |
|||
fontSize: 12, |
|||
color: colors.textPrimary, |
|||
}, |
|||
/* ---- 状态流转 ---- */ |
|||
statusRow: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
justifyContent: 'space-between', |
|||
}, |
|||
statusLabel: { |
|||
fontSize: 13, |
|||
color: colors.textSecondary, |
|||
}, |
|||
terminalHint: { |
|||
marginTop: spacing.card + 4, |
|||
fontSize: 12, |
|||
color: colors.textHint, |
|||
}, |
|||
actionHint: { |
|||
marginTop: spacing.card + 4, |
|||
marginBottom: spacing.card, |
|||
fontSize: 12, |
|||
color: colors.textHint, |
|||
}, |
|||
actionRow: { |
|||
flexDirection: 'row', |
|||
flexWrap: 'wrap', |
|||
gap: spacing.card, |
|||
}, |
|||
actionBtn: { |
|||
minWidth: 84, |
|||
height: 34, |
|||
paddingHorizontal: 12, |
|||
borderRadius: spacing.card, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
}, |
|||
actionBtnDisabled: { |
|||
opacity: 0.6, |
|||
}, |
|||
actionText: { |
|||
fontSize: 13, |
|||
fontWeight: '600', |
|||
}, |
|||
actionTextDanger: { |
|||
fontWeight: '700', |
|||
}, |
|||
/* ---- 求职信 / 时间线 ---- */ |
|||
coverLetter: { |
|||
fontSize: 13, |
|||
lineHeight: 20, |
|||
color: colors.textPrimary, |
|||
}, |
|||
timelineEmpty: { |
|||
fontSize: 12, |
|||
color: colors.textHint, |
|||
}, |
|||
timelineRow: { |
|||
flexDirection: 'row', |
|||
alignItems: 'flex-start', |
|||
paddingVertical: 5, |
|||
}, |
|||
timelineDot: { |
|||
width: 8, |
|||
height: 8, |
|||
borderRadius: 4, |
|||
marginTop: 5, |
|||
marginRight: spacing.card, |
|||
backgroundColor: colors.primary, |
|||
}, |
|||
timelineMain: { |
|||
flex: 1, |
|||
}, |
|||
timelineStatus: { |
|||
fontSize: 13, |
|||
fontWeight: '600', |
|||
color: colors.textPrimary, |
|||
}, |
|||
timelineNote: { |
|||
marginTop: 2, |
|||
fontSize: 11, |
|||
color: colors.textSecondary, |
|||
}, |
|||
timelineTime: { |
|||
fontSize: 11, |
|||
color: colors.textHint, |
|||
}, |
|||
/* ---- 反馈 ---- */ |
|||
feedbackEmpty: { |
|||
alignItems: 'center', |
|||
gap: 6, |
|||
paddingVertical: spacing.card, |
|||
}, |
|||
feedbackEmptyTitle: { |
|||
fontSize: 14, |
|||
fontWeight: '600', |
|||
color: colors.textSecondary, |
|||
}, |
|||
feedbackEmptyHint: { |
|||
fontSize: 12, |
|||
color: colors.textHint, |
|||
textAlign: 'center', |
|||
}, |
|||
primaryBtn: { |
|||
marginTop: spacing.card, |
|||
paddingHorizontal: 24, |
|||
height: 36, |
|||
borderRadius: spacing.card, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
backgroundColor: colors.primaryBtn, |
|||
}, |
|||
primaryBtnText: { |
|||
fontSize: 13, |
|||
fontWeight: '600', |
|||
color: colors.white, |
|||
}, |
|||
feedbackTop: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
gap: 6, |
|||
}, |
|||
feedbackRating: { |
|||
fontSize: 13, |
|||
fontWeight: '700', |
|||
color: STAR_COLOR, |
|||
}, |
|||
feedbackContent: { |
|||
marginTop: spacing.card, |
|||
fontSize: 13, |
|||
lineHeight: 20, |
|||
color: colors.textPrimary, |
|||
}, |
|||
feedbackTime: { |
|||
marginTop: spacing.card, |
|||
fontSize: 11, |
|||
color: colors.textHint, |
|||
}, |
|||
feedbackActions: { |
|||
flexDirection: 'row', |
|||
justifyContent: 'flex-end', |
|||
marginTop: spacing.card, |
|||
paddingTop: spacing.card, |
|||
borderTopWidth: 1, |
|||
borderTopColor: colors.borderLight, |
|||
gap: 16, |
|||
}, |
|||
linkBtn: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
gap: 4, |
|||
}, |
|||
linkText: { |
|||
fontSize: 12, |
|||
fontWeight: '600', |
|||
color: colors.primaryText, |
|||
}, |
|||
linkTextDanger: { |
|||
color: colors.dangerText, |
|||
}, |
|||
/* ---- 编辑器弹窗 ---- */ |
|||
modalMask: { |
|||
flex: 1, |
|||
backgroundColor: colors.scrim, |
|||
justifyContent: 'flex-end', |
|||
}, |
|||
modalSheet: { |
|||
maxHeight: '86%', |
|||
backgroundColor: colors.white, |
|||
borderTopLeftRadius: spacing.framework, |
|||
borderTopRightRadius: spacing.framework, |
|||
}, |
|||
modalHeader: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
justifyContent: 'space-between', |
|||
paddingHorizontal: spacing.framework, |
|||
paddingVertical: 14, |
|||
borderBottomWidth: 1, |
|||
borderBottomColor: colors.borderLight, |
|||
}, |
|||
modalTitle: { |
|||
fontSize: 16, |
|||
fontWeight: '700', |
|||
color: colors.textPrimary, |
|||
}, |
|||
modalBody: { |
|||
paddingHorizontal: spacing.framework, |
|||
paddingTop: 12, |
|||
}, |
|||
fieldLabel: { |
|||
marginTop: 14, |
|||
marginBottom: 8, |
|||
fontSize: 13, |
|||
fontWeight: '600', |
|||
color: colors.textPrimary, |
|||
}, |
|||
ratingRow: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
gap: 12, |
|||
}, |
|||
ratingHint: { |
|||
fontSize: 13, |
|||
color: colors.textSecondary, |
|||
}, |
|||
tagPicker: { |
|||
flexDirection: 'row', |
|||
flexWrap: 'wrap', |
|||
gap: spacing.card, |
|||
}, |
|||
tagChip: { |
|||
paddingHorizontal: 10, |
|||
paddingVertical: 5, |
|||
borderRadius: spacing.card, |
|||
borderWidth: 1, |
|||
borderColor: colors.border, |
|||
backgroundColor: colors.white, |
|||
}, |
|||
tagChipActive: { |
|||
borderColor: colors.primary, |
|||
backgroundColor: colors.primaryLight, |
|||
}, |
|||
tagChipText: { |
|||
fontSize: 12, |
|||
color: colors.textSecondary, |
|||
}, |
|||
tagChipTextActive: { |
|||
color: colors.primaryText, |
|||
fontWeight: '600', |
|||
}, |
|||
modalInput: { |
|||
minHeight: 96, |
|||
borderRadius: spacing.card, |
|||
borderWidth: 1, |
|||
borderColor: colors.border, |
|||
backgroundColor: colors.pageBg, |
|||
paddingHorizontal: spacing.card, |
|||
paddingVertical: spacing.card, |
|||
fontSize: 13, |
|||
lineHeight: 20, |
|||
color: colors.textPrimary, |
|||
textAlignVertical: 'top', |
|||
}, |
|||
counterText: { |
|||
marginTop: 6, |
|||
textAlign: 'right', |
|||
fontSize: 11, |
|||
color: colors.textHint, |
|||
}, |
|||
modalFooter: { |
|||
paddingHorizontal: spacing.framework, |
|||
paddingTop: 10, |
|||
paddingBottom: 24, |
|||
}, |
|||
submitBtn: { |
|||
height: 44, |
|||
borderRadius: 22, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
backgroundColor: colors.primaryBtn, |
|||
}, |
|||
submitBtnDisabled: { |
|||
opacity: 0.6, |
|||
}, |
|||
submitText: { |
|||
fontSize: 15, |
|||
fontWeight: '700', |
|||
color: colors.white, |
|||
}, |
|||
}); |
|||
@ -0,0 +1,389 @@ |
|||
/** |
|||
* 企业端 · 收到的投递（工作台列表） |
|||
* |
|||
* 这是企业侧投递链路的第一层：一行一个**投递**（不是候选人）， |
|||
* 展示状态、岗位、时间与下一步动作。状态变更与候选人反馈都从详情页发起。 |
|||
* |
|||
* 设计取舍： |
|||
* - 筛选条上的计数来自**独立于筛选的**计数口，切到「面试中」不会让其他状态计数归零 |
|||
* - 用 useFocusEffect 在返回时刷新：详情页改完状态后回到列表，徽标必须已经跟着变， |
|||
* 否则用户会以为刚才那次操作没生效 |
|||
*/ |
|||
import { Ionicons } from '@expo/vector-icons'; |
|||
import { useFocusEffect, useRouter } from 'expo-router'; |
|||
import { useCallback, useRef, useState } from 'react'; |
|||
import { |
|||
Pressable, |
|||
ScrollView, |
|||
StyleSheet, |
|||
Text, |
|||
TextInput, |
|||
View, |
|||
} from 'react-native'; |
|||
import { SafeAreaView } from 'react-native-safe-area-context'; |
|||
import { EmptyState, ErrorState, LoadingState } from '../src/components/StateView'; |
|||
import { |
|||
APPLICATION_STATUS_LABELS, |
|||
COMPANY_APPLICATION_FILTERS, |
|||
ENTERPRISE_DISPLAY_NAME, |
|||
} from '../src/constants'; |
|||
import { useCompanyApplications } from '../src/hooks'; |
|||
import { applicationStatusColors, colors, spacing } from '../src/theme'; |
|||
import type { ApplicationStatus, CompanyApplicationItem } from '../src/types'; |
|||
|
|||
/** 把 ISO 时间压成「9-28 10:12」这种一眼能排序的相对短格式 */ |
|||
function formatAppliedAt(iso?: string): string { |
|||
if (!iso) return ''; |
|||
const date = new Date(iso); |
|||
if (Number.isNaN(date.getTime())) return ''; |
|||
const mm = date.getMonth() + 1; |
|||
const dd = date.getDate(); |
|||
const hh = date.getHours().toString().padStart(2, '0'); |
|||
const mi = date.getMinutes().toString().padStart(2, '0'); |
|||
return `${mm}-${dd} ${hh}:${mi}`; |
|||
} |
|||
|
|||
/* ===================== 子组件 ===================== */ |
|||
|
|||
function StatusBadge({ status }: { status: ApplicationStatus }) { |
|||
const tone = applicationStatusColors[status]; |
|||
return ( |
|||
<View style={[styles.badge, { backgroundColor: tone.bg }]}> |
|||
<Text style={[styles.badgeText, { color: tone.color }]}> |
|||
{APPLICATION_STATUS_LABELS[status]} |
|||
</Text> |
|||
</View> |
|||
); |
|||
} |
|||
|
|||
/** 单行投递。整行可点 → 进详情做状态流转与反馈 */ |
|||
function ApplicationRow({ |
|||
item, |
|||
onPress, |
|||
}: { |
|||
item: CompanyApplicationItem; |
|||
onPress: () => void; |
|||
}) { |
|||
return ( |
|||
<Pressable style={styles.row} onPress={onPress}> |
|||
<View style={styles.avatar}> |
|||
<Text style={styles.avatarText}>{item.candidateName.slice(0, 1)}</Text> |
|||
</View> |
|||
<View style={styles.rowMain}> |
|||
<View style={styles.rowTop}> |
|||
<Text style={styles.name} numberOfLines={1}> |
|||
{item.candidateName} |
|||
</Text> |
|||
<StatusBadge status={item.status} /> |
|||
</View> |
|||
<Text style={styles.rowMeta} numberOfLines={1}> |
|||
{[item.candidateSchool, item.candidateEducation, item.candidateGraduationYear |
|||
? `${item.candidateGraduationYear} 届` |
|||
: undefined] |
|||
.filter(Boolean) |
|||
.join(' · ') || '学历信息未公开'} |
|||
</Text> |
|||
<View style={styles.rowBottom}> |
|||
<View style={styles.jobChip}> |
|||
<Ionicons name="briefcase-outline" size={11} color={colors.textSecondary} /> |
|||
<Text style={styles.jobChipText} numberOfLines={1}> |
|||
{item.jobTitle} |
|||
</Text> |
|||
</View> |
|||
<Text style={styles.time}>{formatAppliedAt(item.createdAt)}</Text> |
|||
</View> |
|||
</View> |
|||
<Ionicons name="chevron-forward" size={18} color={colors.textHint} /> |
|||
</Pressable> |
|||
); |
|||
} |
|||
|
|||
/* ===================== 页面 ===================== */ |
|||
|
|||
export default function EnterpriseApplicationsScreen() { |
|||
const router = useRouter(); |
|||
const [status, setStatus] = useState<ApplicationStatus | null>(null); |
|||
const [keyword, setKeyword] = useState(''); |
|||
|
|||
const { applications, total, counts, loading, error, refresh, isEmpty } = |
|||
useCompanyApplications({ status, keyword }); |
|||
|
|||
/** |
|||
* 从详情页返回时刷新：状态改了、反馈写了，列表上的数字与徽标都要跟着变。 |
|||
* |
|||
* refresh 的引用会随筛选条件（keyword）变化，直接写进 useCallback 依赖的话， |
|||
* 每敲一个字都会重跑一次 focus effect。故用 ref 取最新值，effect 依赖留空。 |
|||
*/ |
|||
const refreshRef = useRef(refresh); |
|||
refreshRef.current = refresh; |
|||
useFocusEffect( |
|||
useCallback(() => { |
|||
refreshRef.current(); |
|||
}, []), |
|||
); |
|||
|
|||
const allCount = Object.values(counts).reduce((sum, n) => sum + n, 0); |
|||
|
|||
return ( |
|||
<SafeAreaView style={styles.safeArea} edges={['top', 'bottom']}> |
|||
{/* 顶部导航 */} |
|||
<View style={styles.header}> |
|||
<Pressable style={styles.headerBtn} onPress={() => router.back()} hitSlop={8}> |
|||
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} /> |
|||
</Pressable> |
|||
<View style={styles.headerCenter}> |
|||
<Text style={styles.headerCompany}>{ENTERPRISE_DISPLAY_NAME}</Text> |
|||
<Text style={styles.headerTitle}>收到的投递</Text> |
|||
</View> |
|||
<View style={styles.headerBtn} /> |
|||
</View> |
|||
|
|||
{/* 关键词搜索 */} |
|||
<View style={styles.searchWrap}> |
|||
<Ionicons name="search-outline" size={16} color={colors.textHint} /> |
|||
<TextInput |
|||
style={styles.searchInput} |
|||
placeholder="搜索候选人姓名 / 学校 / 岗位" |
|||
placeholderTextColor={colors.textHint} |
|||
value={keyword} |
|||
onChangeText={setKeyword} |
|||
returnKeyType="search" |
|||
/> |
|||
{keyword.length > 0 ? ( |
|||
<Pressable onPress={() => setKeyword('')} hitSlop={8} accessibilityLabel="清空搜索"> |
|||
<Ionicons name="close-circle" size={16} color={colors.textHint} /> |
|||
</Pressable> |
|||
) : null} |
|||
</View> |
|||
|
|||
{/* 状态筛选：计数来自独立计数口，不随当前筛选变化 */} |
|||
<ScrollView |
|||
horizontal |
|||
showsHorizontalScrollIndicator={false} |
|||
contentContainerStyle={styles.filterRow} |
|||
> |
|||
{COMPANY_APPLICATION_FILTERS.map((filter) => { |
|||
const active = filter.value === status; |
|||
const count = filter.value === null ? allCount : counts[filter.value] ?? 0; |
|||
return ( |
|||
<Pressable |
|||
key={filter.label} |
|||
style={[styles.filterChip, active && styles.filterChipActive]} |
|||
onPress={() => setStatus(filter.value)} |
|||
> |
|||
<Text style={[styles.filterText, active && styles.filterTextActive]}> |
|||
{filter.label} {count} |
|||
</Text> |
|||
</Pressable> |
|||
); |
|||
})} |
|||
</ScrollView> |
|||
|
|||
{/* 列表区：四态齐全 */} |
|||
{loading && applications.length === 0 ? ( |
|||
<LoadingState text="正在加载投递…" /> |
|||
) : error ? ( |
|||
<ErrorState message="投递列表加载失败" onRetry={refresh} /> |
|||
) : isEmpty ? ( |
|||
<EmptyState |
|||
icon="file-tray-outline" |
|||
title={keyword || status ? '没有符合条件的投递' : '还没有收到投递'} |
|||
subtitle={ |
|||
keyword || status |
|||
? '换个筛选条件或清空搜索词再试' |
|||
: '岗位发布后，收到的投递会在这里汇总' |
|||
} |
|||
actionLabel={keyword || status ? '清空筛选' : undefined} |
|||
onAction={ |
|||
keyword || status |
|||
? () => { |
|||
setKeyword(''); |
|||
setStatus(null); |
|||
} |
|||
: undefined |
|||
} |
|||
/> |
|||
) : ( |
|||
<ScrollView |
|||
style={styles.list} |
|||
contentContainerStyle={styles.listContent} |
|||
showsVerticalScrollIndicator={false} |
|||
> |
|||
<Text style={styles.summary}> |
|||
共 {total} 条投递 |
|||
{status ? ` · 已按「${APPLICATION_STATUS_LABELS[status]}」筛选` : ''} |
|||
</Text> |
|||
{applications.map((item) => ( |
|||
<ApplicationRow |
|||
key={item.applicationId} |
|||
item={item} |
|||
onPress={() => router.push(`/application-detail?id=${item.applicationId}`)} |
|||
/> |
|||
))} |
|||
</ScrollView> |
|||
)} |
|||
</SafeAreaView> |
|||
); |
|||
} |
|||
|
|||
const styles = StyleSheet.create({ |
|||
safeArea: { |
|||
flex: 1, |
|||
backgroundColor: colors.pageBg, |
|||
}, |
|||
/* ---- 顶部导航 ---- */ |
|||
header: { |
|||
height: 48, |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
}, |
|||
headerBtn: { |
|||
width: 48, |
|||
height: 48, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
}, |
|||
headerCenter: { |
|||
flex: 1, |
|||
alignItems: 'center', |
|||
}, |
|||
headerCompany: { |
|||
fontSize: 11, |
|||
color: colors.textHint, |
|||
}, |
|||
headerTitle: { |
|||
fontSize: 17, |
|||
fontWeight: '700', |
|||
color: colors.textPrimary, |
|||
}, |
|||
/* ---- 搜索 ---- */ |
|||
searchWrap: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
gap: 6, |
|||
height: 36, |
|||
marginHorizontal: spacing.framework, |
|||
paddingHorizontal: spacing.card, |
|||
borderRadius: spacing.card, |
|||
backgroundColor: colors.white, |
|||
borderWidth: 1, |
|||
borderColor: colors.border, |
|||
}, |
|||
searchInput: { |
|||
flex: 1, |
|||
fontSize: 13, |
|||
color: colors.textPrimary, |
|||
padding: 0, |
|||
}, |
|||
/* ---- 筛选 ---- */ |
|||
filterRow: { |
|||
paddingHorizontal: spacing.framework, |
|||
paddingVertical: spacing.card, |
|||
gap: spacing.card, |
|||
}, |
|||
filterChip: { |
|||
paddingHorizontal: 12, |
|||
height: 30, |
|||
borderRadius: 15, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
backgroundColor: colors.white, |
|||
borderWidth: 1, |
|||
borderColor: colors.border, |
|||
}, |
|||
filterChipActive: { |
|||
backgroundColor: colors.primaryLight, |
|||
borderColor: colors.primary, |
|||
}, |
|||
filterText: { |
|||
fontSize: 12, |
|||
color: colors.textSecondary, |
|||
}, |
|||
filterTextActive: { |
|||
color: colors.primaryText, |
|||
fontWeight: '600', |
|||
}, |
|||
/* ---- 列表 ---- */ |
|||
list: { |
|||
flex: 1, |
|||
}, |
|||
listContent: { |
|||
paddingHorizontal: spacing.framework, |
|||
paddingBottom: 24, |
|||
}, |
|||
summary: { |
|||
marginBottom: spacing.card, |
|||
fontSize: 12, |
|||
color: colors.textHint, |
|||
}, |
|||
row: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
gap: spacing.card, |
|||
backgroundColor: colors.white, |
|||
borderRadius: spacing.card, |
|||
padding: spacing.card + 4, |
|||
marginBottom: spacing.card, |
|||
}, |
|||
avatar: { |
|||
width: 40, |
|||
height: 40, |
|||
borderRadius: 20, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
backgroundColor: colors.primaryLight, |
|||
}, |
|||
avatarText: { |
|||
fontSize: 16, |
|||
fontWeight: '700', |
|||
color: colors.primaryText, |
|||
}, |
|||
rowMain: { |
|||
flex: 1, |
|||
}, |
|||
rowTop: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
gap: spacing.card, |
|||
}, |
|||
name: { |
|||
flexShrink: 1, |
|||
fontSize: 15, |
|||
fontWeight: '700', |
|||
color: colors.textPrimary, |
|||
}, |
|||
badge: { |
|||
paddingHorizontal: 8, |
|||
paddingVertical: 2, |
|||
borderRadius: spacing.card, |
|||
}, |
|||
badgeText: { |
|||
fontSize: 11, |
|||
fontWeight: '600', |
|||
}, |
|||
rowMeta: { |
|||
marginTop: 4, |
|||
fontSize: 12, |
|||
color: colors.textSecondary, |
|||
}, |
|||
rowBottom: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
justifyContent: 'space-between', |
|||
marginTop: 6, |
|||
}, |
|||
jobChip: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
gap: 4, |
|||
flexShrink: 1, |
|||
}, |
|||
jobChipText: { |
|||
fontSize: 11, |
|||
color: colors.textSecondary, |
|||
}, |
|||
time: { |
|||
fontSize: 11, |
|||
color: colors.textHint, |
|||
}, |
|||
}); |
|||
@ -0,0 +1,78 @@ |
|||
/** |
|||
* 星级打分 / 星级展示组件。 |
|||
* |
|||
* 岗位评价（app/jobs/[id].tsx）与候选人反馈（app/application-detail.tsx）都要用， |
|||
* 所以提到 components 层只留一份 —— 两处各写一份的话，改星色或改最大星数时必然漏改一处。 |
|||
* |
|||
* 只读态用「实心 / 描边」区分而不只靠颜色：色觉障碍用户也要能读出分数（WCAG 1.4.1）。 |
|||
*/ |
|||
import { Ionicons } from '@expo/vector-icons'; |
|||
import { Pressable, StyleSheet, View } from 'react-native'; |
|||
import { colors } from '../src/theme'; |
|||
|
|||
/** |
|||
* 星色。候选项详情、岗位评价页此前都用 compareOrange 画星， |
|||
* 这里沿用同一语义色，不新造 token。 |
|||
*/ |
|||
export const STAR_COLOR = colors.compareOrange; |
|||
|
|||
export function RatingStars({ |
|||
value, |
|||
max = 5, |
|||
size = 14, |
|||
onChange, |
|||
}: { |
|||
/** 当前分值，0 表示未评分 */ |
|||
value: number; |
|||
/** 满星数，默认 5 */ |
|||
max?: number; |
|||
size?: number; |
|||
/** 传了就是可点打分（编辑器内用），不传即只读展示 */ |
|||
onChange?: (next: number) => void; |
|||
}) { |
|||
const readonly = !onChange; |
|||
return ( |
|||
<View style={styles.row}> |
|||
{Array.from({ length: max }, (_, i) => { |
|||
const starValue = i + 1; |
|||
const filled = starValue <= value; |
|||
const star = ( |
|||
<Ionicons |
|||
name={filled ? 'star' : 'star-outline'} |
|||
size={size} |
|||
color={filled ? STAR_COLOR : colors.borderStrong} |
|||
/> |
|||
); |
|||
if (readonly) { |
|||
return ( |
|||
<View key={starValue} style={styles.cell}> |
|||
{star} |
|||
</View> |
|||
); |
|||
} |
|||
return ( |
|||
<Pressable |
|||
key={starValue} |
|||
style={styles.cell} |
|||
hitSlop={6} |
|||
onPress={() => onChange(starValue)} |
|||
accessibilityRole="button" |
|||
accessibilityLabel={`打 ${starValue} 分`} |
|||
> |
|||
{star} |
|||
</Pressable> |
|||
); |
|||
})} |
|||
</View> |
|||
); |
|||
} |
|||
|
|||
const styles = StyleSheet.create({ |
|||
row: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
}, |
|||
cell: { |
|||
paddingHorizontal: 1, |
|||
}, |
|||
}); |
|||
@ -0,0 +1,230 @@ |
|||
/** |
|||
* 企业端投递 / 候选人反馈域测试 |
|||
* |
|||
* 重点覆盖三类容易出错的地方： |
|||
* 1. **状态 token 跨边界**：前端小写联合类型 ↔ 后端大写 token，错一个方向筛选就永远空 |
|||
* 2. **mock 持久化**：企业改过的状态、写过的反馈，刷新后必须还在（否则「标记已查看」是假的） |
|||
* 3. **反馈单条约束**：同一投递重复创建必须被拒（后端语义如此），而不是默默产生第二条 |
|||
*/ |
|||
jest.mock('expo-constants', () => ({ expoConfig: { extra: {} } })); |
|||
|
|||
jest.mock('../lib/token-store', () => { |
|||
let mem: { accessToken: string; refreshToken: string; expiresAt?: number } | null = null; |
|||
return { |
|||
getAccessToken: jest.fn(() => mem?.accessToken ?? null), |
|||
getTokens: jest.fn(() => mem), |
|||
setTokens: jest.fn((a: string, r: string, e?: number) => { |
|||
mem = { accessToken: a, refreshToken: r, expiresAt: e }; |
|||
}), |
|||
clearTokens: jest.fn(() => { |
|||
mem = null; |
|||
}), |
|||
hydrateTokens: jest.fn(async () => undefined), |
|||
}; |
|||
}); |
|||
|
|||
/** 内存存储：跨调用保持，才测得出「刷新后状态还在」 */ |
|||
jest.mock('../lib/storage', () => { |
|||
const m = new Map<string, string>(); |
|||
return { |
|||
storageGet: jest.fn(async (k: string) => m.get(k) ?? null), |
|||
storageSet: jest.fn(async (k: string, v: string) => { |
|||
m.set(k, v); |
|||
}), |
|||
storageRemove: jest.fn(async (k: string) => { |
|||
m.delete(k); |
|||
}), |
|||
__clear: () => m.clear(), |
|||
}; |
|||
}); |
|||
|
|||
import { |
|||
createCandidateFeedback, |
|||
deleteCandidateFeedback, |
|||
fetchCandidateFeedback, |
|||
fetchCompanyApplicationDetail, |
|||
fetchCompanyApplications, |
|||
toBackendApplicationStatus, |
|||
updateApplicationStatus, |
|||
updateCandidateFeedback, |
|||
} from '../api/api'; |
|||
import { setMockMode, API_BASE_URL } from '../api/http'; |
|||
|
|||
interface MockResponseSpec { |
|||
status: number; |
|||
body: unknown; |
|||
} |
|||
type Responder = (url: string, init: RequestInit) => MockResponseSpec; |
|||
|
|||
let responder: Responder | null = null; |
|||
let fetchCalls: Array<{ url: string; init: RequestInit }> = []; |
|||
|
|||
function installFetch(): void { |
|||
(global as unknown as { fetch: jest.Mock }).fetch = jest.fn( |
|||
async (url: string, init: RequestInit) => { |
|||
fetchCalls.push({ url, init }); |
|||
const spec = responder |
|||
? responder(url, init) |
|||
: { status: 200, body: { code: 200, message: 'ok', data: null, requestId: 'r', timestamp: 't' } }; |
|||
return { |
|||
status: spec.status, |
|||
ok: spec.status >= 200 && spec.status < 300, |
|||
headers: { get: () => 'r' }, |
|||
text: async () => JSON.stringify(spec.body), |
|||
} as unknown as Response; |
|||
}, |
|||
); |
|||
} |
|||
|
|||
function okData(data: unknown): MockResponseSpec { |
|||
return { status: 200, body: { code: 200, message: 'ok', data, requestId: 'r', timestamp: 't' } }; |
|||
} |
|||
|
|||
beforeEach(() => { |
|||
fetchCalls = []; |
|||
responder = null; |
|||
installFetch(); |
|||
setMockMode(true); |
|||
}); |
|||
|
|||
describe('投递状态 token 转换', () => { |
|||
it('前端状态映射为后端大写 token', () => { |
|||
expect(toBackendApplicationStatus('submitted')).toBe('SUBMITTED'); |
|||
expect(toBackendApplicationStatus('interview')).toBe('INTERVIEW'); |
|||
expect(toBackendApplicationStatus('hired')).toBe('HIRED'); |
|||
expect(toBackendApplicationStatus('withdrawn')).toBe('WITHDRAWN'); |
|||
}); |
|||
}); |
|||
|
|||
describe('企业端投递列表（mock）', () => { |
|||
it('返回种子投递，状态已由后端 token 转为前端联合类型', async () => { |
|||
const page = await fetchCompanyApplications(); |
|||
expect(fetchCalls.length).toBe(0); |
|||
expect(page.items.length).toBeGreaterThan(0); |
|||
// 若没做转换，这里会是 'SUBMITTED' 之类的大写串，徽标取色会拿到 undefined
|
|||
expect(page.items.every((i) => i.status === i.status.toLowerCase())).toBe(true); |
|||
}); |
|||
|
|||
it('按状态筛选只返回该状态的投递', async () => { |
|||
const page = await fetchCompanyApplications({ status: 'hired' }); |
|||
expect(page.items.length).toBeGreaterThan(0); |
|||
expect(page.items.every((i) => i.status === 'hired')).toBe(true); |
|||
}); |
|||
|
|||
it('关键词可匹配候选人姓名', async () => { |
|||
const page = await fetchCompanyApplications({ keyword: '张明远' }); |
|||
expect(page.items.length).toBe(1); |
|||
expect(page.items[0].candidateName).toBe('张明远'); |
|||
}); |
|||
|
|||
it('改过的状态跨刷新保留（不是只改内存里那一份）', async () => { |
|||
await updateApplicationStatus('app-1002', 'interview'); |
|||
|
|||
const page = await fetchCompanyApplications({ status: 'interview' }); |
|||
const target = page.items.find((i) => i.applicationId === 'app-1002'); |
|||
expect(target).toBeDefined(); |
|||
expect(target?.status).toBe('interview'); |
|||
}); |
|||
|
|||
it('详情缺 id 时抛 404，而不是回落成第一条（避免看错人）', async () => { |
|||
await expect(fetchCompanyApplicationDetail('not-exist')).rejects.toThrow('投递不存在'); |
|||
}); |
|||
}); |
|||
|
|||
describe('候选人反馈（mock）', () => { |
|||
it('未反馈时返回 null，不是错误', async () => { |
|||
expect(await fetchCandidateFeedback('app-1001')).toBeNull(); |
|||
}); |
|||
|
|||
it('创建后能读回；修改后内容与时间都更新', async () => { |
|||
const created = await createCandidateFeedback('app-1001', { |
|||
rating: 4, |
|||
content: '沟通顺畅', |
|||
tags: ['沟通顺畅'], |
|||
}); |
|||
expect(created.applicationId).toBe('app-1001'); |
|||
|
|||
const fetched = await fetchCandidateFeedback('app-1001'); |
|||
expect(fetched?.content).toBe('沟通顺畅'); |
|||
|
|||
const updated = await updateCandidateFeedback('app-1001', { |
|||
rating: 5, |
|||
content: '沟通顺畅，专业扎实', |
|||
tags: ['沟通顺畅', '专业扎实'], |
|||
}); |
|||
expect(updated.rating).toBe(5); |
|||
expect(updated.id).toBe(created.id); |
|||
|
|||
const reread = await fetchCandidateFeedback('app-1001'); |
|||
expect(reread?.content).toBe('沟通顺畅，专业扎实'); |
|||
expect(reread?.tags).toEqual(['沟通顺畅', '专业扎实']); |
|||
}); |
|||
|
|||
it('同一投递重复创建被拒（后端约束一条投递一条反馈）', async () => { |
|||
await createCandidateFeedback('app-1003', { rating: 3, content: '待定', tags: [] }); |
|||
await expect( |
|||
createCandidateFeedback('app-1003', { rating: 4, content: '再来一条', tags: [] }), |
|||
).rejects.toThrow('已反馈过'); |
|||
}); |
|||
|
|||
it('没有反馈时修改抛 404；删除后回到 null', async () => { |
|||
await expect( |
|||
updateCandidateFeedback('app-1004', { rating: 5, content: 'x', tags: [] }), |
|||
).rejects.toThrow('反馈不存在'); |
|||
|
|||
await createCandidateFeedback('app-1004', { rating: 5, content: '可录用', tags: [] }); |
|||
await deleteCandidateFeedback('app-1004'); |
|||
expect(await fetchCandidateFeedback('app-1004')).toBeNull(); |
|||
|
|||
await expect(deleteCandidateFeedback('app-1004')).rejects.toThrow('反馈不存在'); |
|||
}); |
|||
}); |
|||
|
|||
describe('企业端投递 / 反馈（真实模式）', () => { |
|||
it('列表打 /company/candidates，status 以大写 token 下发', async () => { |
|||
setMockMode(false); |
|||
responder = (url, init) => { |
|||
expect(url).toContain('/company/candidates'); |
|||
expect(url).toContain('status=HIRED'); |
|||
expect(init.method).toBe('GET'); |
|||
return okData({ items: [], total: 0, size: 20, page: 1, totalPages: 0 }); |
|||
}; |
|||
await fetchCompanyApplications({ status: 'hired' }); |
|||
}); |
|||
|
|||
it('详情打 /company/candidates/{applicationId} 并回写状态为联合类型', async () => { |
|||
setMockMode(false); |
|||
responder = (url) => { |
|||
expect(url).toBe(`${API_BASE_URL}/company/candidates/app-1001`); |
|||
return okData({ applicationId: 1001, jobId: 1, jobTitle: '前端', status: 'INTERVIEW' }); |
|||
}; |
|||
const detail = await fetchCompanyApplicationDetail('app-1001'); |
|||
expect(detail.applicationId).toBe('1001'); |
|||
expect(detail.status).toBe('interview'); |
|||
}); |
|||
|
|||
it('状态变更走 PATCH /applications/{id}/status', async () => { |
|||
setMockMode(false); |
|||
responder = (url, init) => { |
|||
expect(url).toBe(`${API_BASE_URL}/applications/app-1001/status`); |
|||
expect(init.method).toBe('PATCH'); |
|||
expect(JSON.parse(String(init.body))).toEqual({ status: 'VIEWED' }); |
|||
return okData(null); |
|||
}; |
|||
await updateApplicationStatus('app-1001', 'viewed'); |
|||
}); |
|||
|
|||
it('反馈新建 POST、修改 PUT，路径同一处', async () => { |
|||
setMockMode(false); |
|||
let seenMethod = ''; |
|||
responder = (url, init) => { |
|||
expect(url).toBe(`${API_BASE_URL}/applications/app-1001/feedback`); |
|||
seenMethod = String(init.method); |
|||
return okData({ id: 1, applicationId: 1001, rating: 5, content: '好', tags: [] }); |
|||
}; |
|||
await createCandidateFeedback('app-1001', { rating: 5, content: '好', tags: [] }); |
|||
expect(seenMethod).toBe('POST'); |
|||
await updateCandidateFeedback('app-1001', { rating: 4, content: '改', tags: [] }); |
|||
expect(seenMethod).toBe('PUT'); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,170 @@ |
|||
/** |
|||
* 企业端「收到的投递」hook。 |
|||
* |
|||
* 拆成两个取数口是刻意的： |
|||
* - 列表口跟随筛选条件变化（状态 / 关键词 / 分页） |
|||
* - 计数口**只跟岗位变化**，不受筛选影响 |
|||
* |
|||
* 合成一个的话，筛选到「面试中」时其余状态的计数会一起归零， |
|||
* 筛选条上「全部 42」会跳成「全部 5」——筛选条的数字就不再是各状态的总量了。 |
|||
*/ |
|||
import { useCallback, useMemo, useState } from 'react'; |
|||
import { |
|||
createCandidateFeedback, |
|||
deleteCandidateFeedback, |
|||
fetchCandidateFeedback, |
|||
fetchCompanyApplicationDetail, |
|||
fetchCompanyApplications, |
|||
fetchApplicationTimeline, |
|||
updateApplicationStatus, |
|||
updateCandidateFeedback, |
|||
} from '../api'; |
|||
import type { |
|||
ApplicationStatus, |
|||
ApplicationTimelineEvent, |
|||
CandidateFeedback, |
|||
CandidateFeedbackInput, |
|||
CompanyApplicationItem, |
|||
CompanyCandidateDetail, |
|||
PageResult, |
|||
} from '../types'; |
|||
import { useAsyncData } from './useAsyncData'; |
|||
|
|||
/** 列表筛选项：状态为 null 表示不筛 */ |
|||
export interface CompanyApplicationFilters { |
|||
jobId?: string; |
|||
status: ApplicationStatus | null; |
|||
keyword: string; |
|||
} |
|||
|
|||
/** 列表页聚合数据（列表 + 各状态总量） */ |
|||
interface CompanyApplicationData { |
|||
page: PageResult<CompanyApplicationItem>; |
|||
counts: Record<string, number>; |
|||
} |
|||
|
|||
export function useCompanyApplications(filters: CompanyApplicationFilters) { |
|||
const { jobId, status, keyword } = filters; |
|||
|
|||
const fetcher = useCallback(async (): Promise<CompanyApplicationData> => { |
|||
// 计数口不带 status/keyword：它回答的是「各状态各有多少」，与当前筛选无关
|
|||
const [page, all] = await Promise.all([ |
|||
fetchCompanyApplications({ |
|||
jobId, |
|||
status: status ?? undefined, |
|||
keyword: keyword.trim() || undefined, |
|||
page: 1, |
|||
size: 50, |
|||
}), |
|||
fetchCompanyApplications({ jobId, page: 1, size: 5000 }), |
|||
]); |
|||
const counts: Record<string, number> = {}; |
|||
all.items.forEach((item) => { |
|||
counts[item.status] = (counts[item.status] ?? 0) + 1; |
|||
}); |
|||
return { page, counts }; |
|||
}, [jobId, status, keyword]); |
|||
|
|||
const { data, loading, error, refresh } = useAsyncData<CompanyApplicationData>(fetcher); |
|||
|
|||
const applications = data?.page.items ?? []; |
|||
const total = data?.page.total ?? 0; |
|||
const counts = data?.counts ?? {}; |
|||
|
|||
return { |
|||
applications, |
|||
total, |
|||
counts, |
|||
loading, |
|||
error, |
|||
refresh, |
|||
isEmpty: !loading && !error && applications.length === 0, |
|||
}; |
|||
} |
|||
|
|||
/** 详情页聚合数据 */ |
|||
interface ApplicationDetailData { |
|||
detail: CompanyCandidateDetail; |
|||
timeline: ApplicationTimelineEvent[]; |
|||
feedback: CandidateFeedback | null; |
|||
} |
|||
|
|||
export function useCompanyApplicationDetail(applicationId: string) { |
|||
const fetcher = useCallback(async (): Promise<ApplicationDetailData> => { |
|||
const [detail, timeline, feedback] = await Promise.all([ |
|||
fetchCompanyApplicationDetail(applicationId), |
|||
fetchApplicationTimeline(applicationId), |
|||
fetchCandidateFeedback(applicationId), |
|||
]); |
|||
return { detail, timeline, feedback }; |
|||
}, [applicationId]); |
|||
|
|||
const { data, loading, error, refresh } = useAsyncData<ApplicationDetailData>(fetcher); |
|||
|
|||
/** 状态流转中：按钮据此置灰，避免连点造成状态乱跳 */ |
|||
const [updating, setUpdating] = useState(false); |
|||
/** 反馈保存中 */ |
|||
const [savingFeedback, setSavingFeedback] = useState(false); |
|||
|
|||
const changeStatus = useCallback( |
|||
async (next: ApplicationStatus) => { |
|||
setUpdating(true); |
|||
try { |
|||
await updateApplicationStatus(applicationId, next); |
|||
refresh(); |
|||
return true; |
|||
} finally { |
|||
setUpdating(false); |
|||
} |
|||
}, |
|||
[applicationId, refresh], |
|||
); |
|||
|
|||
/** |
|||
* 保存反馈：**已有反馈走 PUT、没有走 POST**。 |
|||
* 这个分支必须留在 hook 里 —— 页面拿到的是「有没有反馈」这个事实， |
|||
* 不该由 UI 去决定调哪个接口（否则后端把 POST 改成 upsert 时页面要跟着改）。 |
|||
*/ |
|||
const saveFeedback = useCallback( |
|||
async (input: CandidateFeedbackInput, existing: CandidateFeedback | null) => { |
|||
setSavingFeedback(true); |
|||
try { |
|||
const saved = existing |
|||
? await updateCandidateFeedback(applicationId, input) |
|||
: await createCandidateFeedback(applicationId, input); |
|||
refresh(); |
|||
return saved; |
|||
} finally { |
|||
setSavingFeedback(false); |
|||
} |
|||
}, |
|||
[applicationId, refresh], |
|||
); |
|||
|
|||
const removeFeedback = useCallback(async () => { |
|||
setSavingFeedback(true); |
|||
try { |
|||
await deleteCandidateFeedback(applicationId); |
|||
refresh(); |
|||
} finally { |
|||
setSavingFeedback(false); |
|||
} |
|||
}, [applicationId, refresh]); |
|||
|
|||
// 稳定引用：时间线数组每次渲染新建会让下游依赖它的 memo/effect 反复触发
|
|||
const timeline = useMemo(() => data?.timeline ?? [], [data]); |
|||
|
|||
return { |
|||
detail: data?.detail ?? null, |
|||
timeline, |
|||
feedback: data?.feedback ?? null, |
|||
loading, |
|||
error, |
|||
refresh, |
|||
updating, |
|||
savingFeedback, |
|||
changeStatus, |
|||
saveFeedback, |
|||
removeFeedback, |
|||
}; |
|||
} |
|||
Loading…
Reference in new issue