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

1157 lines
39 KiB

import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect, useRouter } from 'expo-router';
import { useCallback, useState } from 'react';
import {
ActivityIndicator,
Alert,
Modal,
Pressable,
ScrollView,
StyleSheet,
Text,
TextInput,
View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useResume } from '../src/hooks';
import { RESUME_EVAL_MAX_LENGTH, UNSET_LABEL } from '../src/constants';
import {colors, spacing} from '../src/theme';
import type { Resume as ResumeType, ResumeExperience, ResumeOptimizePoint, ResumeProject } from '../src/types';
import { formatDateTime } from '../src/utils';
/* ===================== 子组件:顶部导航 ===================== */
/**
* 顶部导航。`onSave` 可选:加载中 / 加载失败时简历尚未就绪,此时按钮置灰而不是给一个
* 点了没反应的入口(同 `app/resume/export.tsx` 的处理)。
*/
function Header({
onBack,
onSave,
onExport,
}: {
onBack: () => void;
/** 传 undefined = 简历未就绪,按钮置灰 */
onSave?: () => void;
onExport: () => void;
}) {
const saveDisabled = onSave === undefined;
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}>AI简历优化</Text>
<View style={styles.headerActions}>
<Pressable
style={styles.headerActionBtn}
onPress={onSave}
disabled={saveDisabled}
hitSlop={8}
accessibilityLabel="保存简历到本机"
>
<Ionicons
name="save-outline"
size={20}
color={saveDisabled ? colors.textDisabled : colors.textPrimary}
/>
</Pressable>
<Pressable
style={styles.headerActionBtn}
onPress={onExport}
hitSlop={8}
accessibilityLabel="导出简历"
>
<Ionicons name="download-outline" size={20} color={colors.textPrimary} />
</Pressable>
</View>
</View>
);
}
/* ===================== 子组件:评分卡 ===================== */
function ScoreCard({
score,
maxScore,
onOptimize,
optimizing,
}: {
score: number;
maxScore: number;
onOptimize: () => void;
optimizing: boolean;
}) {
const pct = Math.round((score / maxScore) * 100);
return (
<View style={styles.scoreCard}>
<View style={styles.scoreRow}>
<View>
<Text style={styles.scoreLabel}>简历评分</Text>
<View style={styles.scoreValueRow}>
<Text style={styles.scoreValue}>{score}</Text>
<Text style={styles.scoreUnit}>分</Text>
</View>
</View>
<View style={styles.scoreBarWrap}>
<View style={styles.scoreTrack}>
<View style={[styles.scoreFill, { width: `${pct}%` }]} />
</View>
<Pressable
style={[styles.optimizeBtn, optimizing && styles.optimizeBtnDisabled]}
onPress={onOptimize}
disabled={optimizing}
>
{optimizing ? (
<ActivityIndicator size="small" color={colors.white} />
) : (
<Text style={styles.optimizeBtnText}>优化简历</Text>
)}
</Pressable>
</View>
</View>
</View>
);
}
/* ===================== 子组件:优化点列表 ===================== */
function OptimizeCard({
points,
onOptimizeAll,
optimizing,
}: {
points: ResumeOptimizePoint[];
onOptimizeAll: () => void;
optimizing: boolean;
}) {
return (
<View style={styles.card}>
<View style={styles.cardHeader}>
<Ionicons name="sparkles" size={18} color={colors.info} />
<Text style={styles.cardHeaderTitle}>AI 检测到 {points.length} 项可优化内容</Text>
</View>
{points.map((p) => (
<View key={p.id} style={styles.optRow}>
<Ionicons
name={p.optimized ? 'checkmark-circle' : 'ellipse'}
size={14}
color={p.optimized ? colors.success : colors.textHint}
/>
<Text style={[styles.optTitle, p.optimized && styles.optTitleDone]}>{p.title}</Text>
<Text style={[styles.optScore, p.optimized && styles.optScoreDone]}>+{p.score}分</Text>
</View>
))}
<Pressable
style={[styles.optAllBtn, optimizing && styles.optAllBtnDisabled]}
onPress={onOptimizeAll}
disabled={optimizing}
>
<Text style={styles.optAllText}>{optimizing ? '优化中…' : '一键全部优化'}</Text>
</Pressable>
</View>
);
}
/* ===================== 子组件:基本信息 ===================== */
function BasicInfoCard({ info, onEdit }: { info: ResumeType['basicInfo']; onEdit: () => void }) {
// 引导未强制填姓名(P6/P16 可跳过直接进入),头像字取展示姓名的首字,保持一致
const name = info.name || UNSET_LABEL;
const rows = [
{ key: 'phone', icon: 'call-outline' as const, value: info.phone },
{ key: 'email', icon: 'mail-outline' as const, value: info.email },
{ key: 'location', icon: 'location-outline' as const, value: info.location },
].filter((row) => row.value !== '');
return (
<View style={styles.card}>
<View style={styles.sectionTitleRow}>
<Text style={styles.sectionTitle}>基本信息</Text>
<Pressable onPress={onEdit} hitSlop={6}>
<Text style={styles.editLink}>编辑基本信息 &gt;</Text>
</Pressable>
</View>
<View style={styles.basicRow}>
<View style={styles.avatar}>
<Text style={styles.avatarText}>{name.slice(0, 1)}</Text>
</View>
<View style={styles.basicBody}>
<View style={styles.nameRow}>
<Text style={styles.name}>{name}</Text>
<Ionicons name="pencil" size={14} color={colors.primary} />
</View>
{/* 空值不渲染空行:手机号 / 邮箱引导未采集,画一行空白比不画更让人困惑 */}
{rows.map((row) => (
<View key={row.key} style={styles.contactRow}>
<Ionicons name={row.icon} size={14} color={colors.textHint} />
<Text style={styles.contactText}>{row.value}</Text>
</View>
))}
</View>
</View>
</View>
);
}
/* ===================== 子组件:求职意向 ===================== */
function JobIntentionCard({ intention }: { intention: ResumeType['jobIntention'] }) {
const router = useRouter();
return (
<View style={styles.card}>
<View style={styles.sectionTitleRow}>
<Text style={styles.sectionTitle}>求职意向</Text>
{/* 指向已存在的求职意向编辑页(此前是无 onPress 的死按钮) */}
<Pressable onPress={() => router.push('/job-preference')} hitSlop={6}>
<Text style={styles.editLink}>编辑 &gt;</Text>
</Pressable>
</View>
<View style={styles.intentionGrid}>
<IntentionItem label="目标职位" value={intention.position} />
<IntentionItem label="期望薪资" value={intention.salary} />
<IntentionItem label="期望城市" value={intention.city} />
<IntentionItem
label="求职状态"
value={intention.statusLabel}
// 无状态文案时不打「积极求职中」的彩色标签:颜色本身也是一句话
tag={intention.status === 'active' && intention.statusLabel !== ''}
/>
</View>
</View>
);
}
function IntentionItem({
label,
value,
tag,
}: {
label: string;
value: string;
tag?: boolean;
}) {
const text = value || UNSET_LABEL;
return (
<View style={styles.intentionItem}>
<Text style={styles.intentionLabel}>{label}</Text>
{tag ? (
<View style={styles.intentionTag}>
<Text style={styles.intentionTagText}>{text}</Text>
</View>
) : (
<Text style={styles.intentionValue}>{text}</Text>
)}
</View>
);
}
/* ===================== 子组件:教育背景 ===================== */
function EducationCard({
education,
onAdd,
onEdit,
onItem,
}: {
education: ResumeType['education'];
onAdd: () => void;
onEdit: () => void;
onItem: (id: string) => void;
}) {
return (
<View style={styles.card}>
<View style={styles.sectionTitleRow}>
<Text style={styles.sectionTitle}>教育背景</Text>
<View style={styles.sectionActions}>
<Pressable onPress={onEdit} hitSlop={6}>
<Text style={styles.editLink}>编辑 &gt;</Text>
</Pressable>
<Pressable style={styles.addBtn} onPress={onAdd} hitSlop={6}>
<Ionicons name="add" size={18} color={colors.primary} />
<Text style={styles.addText}>添加教育经历</Text>
</Pressable>
</View>
</View>
{education.length === 0 && <Text style={styles.emptyText}>未填写教育背景</Text>}
{education.map((edu) => {
// 专业 / 年份引导未采集时为空串,拼出来会剩一个孤零零的「· 本科」或「-」
const majorDegree = [edu.major, edu.degree].filter(Boolean).join(' · ');
const years = [edu.startYear, edu.endYear].filter(Boolean).join('-');
return (
<Pressable key={edu.id} style={styles.eduRow} onPress={() => onItem(edu.id)}>
<View>
<Text style={styles.eduSchool}>{edu.school}</Text>
{majorDegree !== '' && <Text style={styles.eduMajor}>{majorDegree}</Text>}
</View>
{years !== '' && <Text style={styles.eduYear}>{years}</Text>}
</Pressable>
);
})}
</View>
);
}
/* ===================== 子组件:工作经历 ===================== */
function ExperienceCard({
experiences,
onAdd,
onEdit,
onItem,
onOptimize,
aiBusy,
}: {
experiences: ResumeExperience[];
onAdd: () => void;
onEdit: () => void;
onItem: (id: string) => void;
onOptimize: (id: string) => void;
/** AI 请求进行中:按钮禁用,避免连点堆起多个请求 */
aiBusy: boolean;
}) {
return (
<View style={styles.card}>
<View style={styles.sectionTitleRow}>
<Text style={styles.sectionTitle}>工作经历</Text>
<View style={styles.sectionActions}>
<Pressable onPress={onEdit} hitSlop={6}>
<Text style={styles.editLink}>编辑 &gt;</Text>
</Pressable>
<Pressable style={styles.addBtn} onPress={onAdd} hitSlop={6}>
<Ionicons name="add" size={18} color={colors.primary} />
<Text style={styles.addText}>添加工作经历</Text>
</Pressable>
</View>
</View>
{experiences.length === 0 && <Text style={styles.emptyText}>未填写工作经历</Text>}
{experiences.map((exp) => (
<Pressable key={exp.id} style={styles.expRow} onPress={() => onItem(exp.id)}>
<View style={styles.expHeader}>
<Text style={styles.expCompany}>{exp.company}</Text>
{/* 离职时结束时间未采集(留空),只展示已采集到的那一端,不补「-」 */}
{[exp.startDate, exp.endDate].filter(Boolean).length > 0 && (
<Text style={styles.expDate}>
{[exp.startDate, exp.endDate].filter(Boolean).join(' - ')}
</Text>
)}
</View>
{exp.position !== '' && <Text style={styles.expPosition}>{exp.position}</Text>}
{exp.description !== '' && <Text style={styles.expDesc}>{exp.description}</Text>}
{!exp.aiOptimized && (
<View style={styles.aiTip}>
<Ionicons name="sparkles" size={14} color={colors.info} />
<Text style={styles.aiTipText}>AI 建议优化</Text>
<Pressable
style={styles.aiOptimizeMiniBtn}
onPress={() => onOptimize(exp.id)}
disabled={aiBusy}
accessibilityLabel={`AI 优化 ${exp.company} 的工作内容`}
>
<Text style={styles.aiOptimizeMiniText}>AI 优化</Text>
</Pressable>
</View>
)}
</Pressable>
))}
</View>
);
}
/* ===================== 子组件:项目经历 ===================== */
function ProjectCard({
projects,
onAdd,
onEdit,
onItem,
}: {
projects: ResumeProject[];
onAdd: () => void;
onEdit: () => void;
onItem: (id: string) => void;
}) {
return (
<View style={styles.card}>
<View style={styles.sectionTitleRow}>
<Text style={styles.sectionTitle}>项目经历</Text>
<View style={styles.sectionActions}>
<Pressable onPress={onEdit} hitSlop={6}>
<Text style={styles.editLink}>编辑 &gt;</Text>
</Pressable>
<Pressable style={styles.addBtn} onPress={onAdd} hitSlop={6}>
<Ionicons name="add" size={18} color={colors.primary} />
<Text style={styles.addText}>添加项目经历</Text>
</Pressable>
</View>
</View>
{projects.length === 0 && <Text style={styles.emptyText}>未填写项目经历</Text>}
{projects.map((proj) => (
<Pressable key={proj.id} style={styles.projRow} onPress={() => onItem(proj.id)}>
<View style={styles.expHeader}>
<Text style={styles.expCompany}>{proj.name}</Text>
<Text style={styles.expPosition}>{proj.role}</Text>
</View>
<Text style={styles.expDesc}>{proj.description}</Text>
{proj.aiOptimized && (
<View style={styles.optimizedTag}>
<Ionicons name="checkmark-circle" size={14} color={colors.success} />
<Text style={styles.optimizedText}>已量化</Text>
</View>
)}
</Pressable>
))}
</View>
);
}
/* ===================== 子组件:技能特长 ===================== */
function SkillsCard({ skills, onEdit }: { skills: ResumeType['skills']; onEdit: () => void }) {
return (
<View style={styles.card}>
<View style={styles.sectionTitleRow}>
<Text style={styles.sectionTitle}>技能特长</Text>
<Pressable style={styles.addBtn} onPress={onEdit} hitSlop={6}>
<Ionicons name="add" size={18} color={colors.primary} />
<Text style={styles.addText}>添加技能</Text>
</Pressable>
</View>
<View style={styles.skillsWrap}>
{skills.length === 0 && <Text style={styles.emptyText}>未填写技能特长</Text>}
{skills.map((skill) => (
<View key={skill.name} style={styles.skillTag}>
<Text style={styles.skillText}>{skill.name}</Text>
</View>
))}
</View>
</View>
);
}
/* ===================== 子组件:技能编辑弹窗 ===================== */
/*
* 技能只有「名词」一个字段,为它单开一个路由不划算,就地弹层编辑:
* 已添加的标签点 × 即时删除,输入框 +「添加」追加。
* 去重的权威规则在 API 层(`saveResumeSkills`),这里只做即时门槛让按钮状态诚实。
*/
function SkillsModal({
visible,
skills,
draft,
onDraftChange,
onClose,
onAdd,
onRemove,
saving,
}: {
visible: boolean;
skills: ResumeType['skills'];
/** 草稿由页面持有(与 `SaveSheet` 同款):关掉再打开时页面已经把它清掉了,弹层不必自己同步 */
draft: string;
onDraftChange: (v: string) => void;
onClose: () => void;
onAdd: (name: string) => void;
onRemove: (name: string) => void;
saving: boolean;
}) {
const name = draft.trim();
const duplicated = name !== '' && skills.some((s) => s.name === name);
const canAdd = name !== '' && !duplicated && !saving;
return (
<Modal transparent visible={visible} animationType="slide" onRequestClose={onClose}>
{/* 内层 Pressable 吞掉冒泡:点内容区不该关闭弹层 */}
<Pressable style={styles.modalMask} onPress={onClose}>
{/* affordance-ok:吞冒泡,点弹层内容区不关闭 */}
<Pressable style={styles.modalSheet} onPress={() => {}}>
<View style={styles.modalHeader}>
<Text style={styles.modalTitle}>编辑技能</Text>
<Pressable onPress={onClose} hitSlop={8} accessibilityLabel="关闭">
<Ionicons name="close" size={22} color={colors.textSecondary} />
</Pressable>
</View>
<ScrollView style={styles.modalBody} showsVerticalScrollIndicator={false}>
<Text style={styles.modalLabel}>已添加(点 × 删除)</Text>
{skills.length === 0 ? (
<Text style={styles.emptyText}>还没有添加技能</Text>
) : (
<View style={styles.skillsWrap}>
{skills.map((skill) => (
<Pressable
key={skill.name}
style={[styles.skillTag, styles.skillTagEditable]}
onPress={() => onRemove(skill.name)}
disabled={saving}
accessibilityLabel={`删除技能 ${skill.name}`}
>
<Text style={styles.skillText}>{skill.name}</Text>
<Ionicons name="close" size={14} color={colors.textSecondary} />
</Pressable>
))}
</View>
)}
</ScrollView>
<View style={styles.modalInputRow}>
<TextInput
style={styles.modalInput}
value={draft}
onChangeText={onDraftChange}
placeholder="如:TypeScript"
placeholderTextColor={colors.textHint}
maxLength={20}
onSubmitEditing={() => canAdd && onAdd(name)}
returnKeyType="done"
/>
<Pressable
style={[styles.modalAddBtn, !canAdd && styles.modalAddBtnDisabled]}
onPress={() => onAdd(name)}
disabled={!canAdd}
>
<Text style={styles.modalAddText}>添加</Text>
</Pressable>
</View>
{duplicated && <Text style={styles.modalError}>已添加过该技能</Text>}
</Pressable>
</Pressable>
</Modal>
);
}
/* ===================== 子组件:自我评价编辑弹窗 ===================== */
function EvaluationModal({
visible,
draft,
onDraftChange,
onClose,
onSave,
saving,
}: {
visible: boolean;
draft: string;
onDraftChange: (v: string) => void;
onClose: () => void;
onSave: () => void;
saving: boolean;
}) {
return (
<Modal transparent visible={visible} animationType="slide" onRequestClose={onClose}>
<Pressable style={styles.modalMask} onPress={onClose}>
{/* affordance-ok:吞冒泡,点弹层内容区不关闭 */}
<Pressable style={styles.modalSheet} onPress={() => {}}>
<View style={styles.modalHeader}>
<Text style={styles.modalTitle}>编辑自我评价</Text>
<Pressable onPress={onClose} hitSlop={8} accessibilityLabel="关闭">
<Ionicons name="close" size={22} color={colors.textSecondary} />
</Pressable>
</View>
<TextInput
style={styles.evalInput}
value={draft}
onChangeText={onDraftChange}
placeholder="用几句话说明你的经验、优势与求职期望"
placeholderTextColor={colors.textHint}
multiline
maxLength={RESUME_EVAL_MAX_LENGTH}
autoFocus
/>
<Text style={styles.evalCounter}>
{draft.length}/{RESUME_EVAL_MAX_LENGTH}
</Text>
<View style={styles.modalFooter}>
<Pressable style={styles.modalCancelBtn} onPress={onClose} hitSlop={6}>
<Text style={styles.modalCancelText}>取消</Text>
</Pressable>
<Pressable
style={[styles.modalSaveBtn, saving && styles.modalSaveBtnDisabled]}
onPress={onSave}
disabled={saving}
>
<Text style={styles.modalSaveText}>{saving ? '保存中…' : '保存'}</Text>
</Pressable>
</View>
</Pressable>
</Pressable>
</Modal>
);
}
/* ===================== 子组件:自我评价 ===================== */
function EvaluationCard({
content,
onEdit,
onPolish,
polishing,
}: {
content: string;
onEdit: () => void;
onPolish: () => void;
polishing: boolean;
}) {
return (
<View style={styles.card}>
<View style={styles.sectionTitleRow}>
<Text style={styles.sectionTitle}>自我评价</Text>
<View style={styles.sectionActions}>
<Pressable onPress={onEdit} hitSlop={6}>
<Text style={styles.editLink}>{content === '' ? '去填写' : '编辑'} &gt;</Text>
</Pressable>
<Pressable
style={styles.aiOptimizeMiniBtn}
onPress={onPolish}
disabled={polishing}
accessibilityLabel="AI 润色自我评价"
>
<Text style={styles.aiOptimizeMiniText}>AI 润色</Text>
</Pressable>
</View>
</View>
{content === '' ? (
<Text style={styles.emptyText}>未填写自我评价</Text>
) : (
<Text style={styles.evalText}>{content}</Text>
)}
</View>
);
}
/* ===================== 子组件:四态 ===================== */
function Loading() {
return (
<View style={styles.center}>
<ActivityIndicator size="large" color={colors.primary} />
<Text style={styles.tip}>正在加载简历…</Text>
</View>
);
}
function ErrorState({ onRetry }: { onRetry: () => void }) {
return (
<View style={styles.center}>
<Ionicons name="document-text-outline" size={40} color={colors.textHint} />
<Text style={styles.tip}>简历加载失败</Text>
<Pressable style={styles.retryBtn} onPress={onRetry} hitSlop={6}>
<Text style={styles.retryText}>点击重试</Text>
</Pressable>
</View>
);
}
/* ===================== 页面 ===================== */
export default function ResumeScreen() {
const router = useRouter();
const {
resume,
savedAt,
loading,
error,
refresh,
saving,
optimize,
save,
saveSelfEvaluation,
saveSkills,
optimizeExperience,
polishSelfEvaluation,
} = useResume();
/**
* 「AI 一键优化」只留下评分——它返回的正文与当前简历一致(mock 阶段不改写用户内容,
* 见 `optimizeResume`),把整份结果塞进 state 会让此后每一次编辑都显示旧数据。
*/
const [optimizedScore, setOptimizedScore] = useState<ResumeType['score'] | null>(null);
const [optimizing, setOptimizing] = useState(false);
/** AI 单点动作进行中:按钮禁用,避免连点堆请求 */
const [aiBusy, setAiBusy] = useState(false);
const [skillsModal, setSkillsModal] = useState(false);
const [skillDraft, setSkillDraft] = useState('');
const [evalModal, setEvalModal] = useState(false);
const [evalDraft, setEvalDraft] = useState('');
// 简历永远取自 storage(唯一真相源),会话内的优化只覆盖评分那一块
const displayResume = resume === null ? null : { ...resume, score: optimizedScore ?? resume.score };
// 从编辑页返回时重新取数:各编辑页写入的是覆盖层,不刷新就显示旧值
// (useAsyncData 只在挂载时取数)
useFocusEffect(
useCallback(() => {
refresh();
}, [refresh]),
);
const handleOptimize = async () => {
if (optimizing) return;
setOptimizing(true);
try {
const optimized = await optimize();
setOptimizedScore(optimized.score);
} finally {
setOptimizing(false);
}
};
const handleSave = async () => {
if (displayResume === null || saving) return;
try {
const { savedAt: at } = await save(displayResume);
Alert.alert('已保存到本机', `保存时间 ${formatDateTime(at)}`);
} catch {
Alert.alert('保存失败', '请稍后重试');
}
};
/* ---------- AI 动作:能力未接入时只如实说明,不动简历 ---------- */
const runAIAction = async (action: () => Promise<{ message: string }>) => {
if (aiBusy) return;
setAiBusy(true);
try {
const result = await action();
Alert.alert('暂未开放', result.message);
} finally {
setAiBusy(false);
}
};
/* ---------- 技能:删除即时落盘,添加是一次写入 ---------- */
const skills = displayResume?.skills ?? [];
const handleAddSkill = async (name: string) => {
if (saving) return;
await saveSkills([...skills, { name }]);
setSkillDraft('');
};
const handleRemoveSkill = (name: string) => {
if (saving) return;
void saveSkills(skills.filter((s) => s.name !== name));
};
/* ---------- 自我评价 ---------- */
const openEvalModal = () => {
setEvalDraft(displayResume?.selfEvaluation.content ?? '');
setEvalModal(true);
};
const handleSaveEvaluation = async () => {
if (saving) return;
await saveSelfEvaluation(evalDraft);
setEvalModal(false);
};
/*
* 只在「还没有任何数据」时显示加载态。
* 本页每次获得焦点都会 refresh(编辑页可能写过覆盖层),
* 若按 `loading` 直接渲染骨架屏,从编辑页返回时会整页白闪一次 —— 刚改完的内容,
* 用户看到的却是一次全屏加载。
*/
if (loading && displayResume === null) {
return (
<SafeAreaView style={styles.container} edges={['top']}>
<Header onBack={() => router.back()} onExport={() => router.push('/resume/export')} />
<Loading />
</SafeAreaView>
);
}
if (error !== null || displayResume === null) {
return (
<SafeAreaView style={styles.container} edges={['top']}>
<Header onBack={() => router.back()} onExport={() => router.push('/resume/export')} />
<ErrorState onRetry={refresh} />
</SafeAreaView>
);
}
return (
<SafeAreaView style={styles.container} edges={['top']}>
<Header
onBack={() => router.back()}
onSave={handleSave}
onExport={() => router.push('/resume/export')}
/>
<ScrollView contentContainerStyle={styles.body} showsVerticalScrollIndicator={false}>
<ScoreCard
score={displayResume.score.score}
maxScore={displayResume.score.maxScore}
onOptimize={handleOptimize}
optimizing={optimizing}
/>
{/* 「保存」不是装饰:这里要如实显示存到了什么时候,否则用户不知道头部那个图标干了什么 */}
{savedAt !== '' && <Text style={styles.savedAt}>上次保存:{formatDateTime(savedAt)}</Text>}
<OptimizeCard
points={displayResume.score.optimizePoints}
onOptimizeAll={handleOptimize}
optimizing={optimizing}
/>
<BasicInfoCard info={displayResume.basicInfo} onEdit={() => router.push('/resume/basic')} />
<JobIntentionCard intention={displayResume.jobIntention} />
<EducationCard
education={displayResume.education}
onAdd={() => router.push('/resume/education?new=1')}
onEdit={() => router.push('/resume/education')}
onItem={(id) => router.push('/resume/education?id=' + id)}
/>
<ExperienceCard
experiences={displayResume.experience}
onAdd={() => router.push('/resume/experience?new=1')}
onEdit={() => router.push('/resume/experience')}
onItem={(id) => router.push('/resume/experience?id=' + id)}
onOptimize={(id) => void runAIAction(() => optimizeExperience(id))}
aiBusy={aiBusy}
/>
<ProjectCard
projects={displayResume.projects}
onAdd={() => router.push('/resume/project?new=1')}
onEdit={() => router.push('/resume/project')}
onItem={(id) => router.push('/resume/project?id=' + id)}
/>
<SkillsCard skills={displayResume.skills} onEdit={() => setSkillsModal(true)} />
<EvaluationCard
content={displayResume.selfEvaluation.content}
onEdit={openEvalModal}
onPolish={() => void runAIAction(() => polishSelfEvaluation(displayResume.selfEvaluation.content))}
polishing={aiBusy}
/>
</ScrollView>
<View style={styles.footer}>
<Pressable
style={styles.previewBtn}
onPress={() => router.push('/resume/preview')}
hitSlop={6}
>
<Text style={styles.previewBtnText}>预览</Text>
</Pressable>
<Pressable
style={[styles.optimizeFooterBtn, optimizing && styles.optimizeBtnDisabled]}
onPress={handleOptimize}
disabled={optimizing}
>
{optimizing ? (
<ActivityIndicator size="small" color={colors.white} />
) : (
<Text style={styles.optimizeFooterBtnText}>AI 一键优化</Text>
)}
</Pressable>
</View>
<SkillsModal
visible={skillsModal}
skills={displayResume.skills}
draft={skillDraft}
onDraftChange={setSkillDraft}
onClose={() => {
setSkillDraft('');
setSkillsModal(false);
}}
onAdd={(name) => void handleAddSkill(name)}
onRemove={handleRemoveSkill}
saving={saving}
/>
<EvaluationModal
visible={evalModal}
draft={evalDraft}
onDraftChange={setEvalDraft}
onClose={() => setEvalModal(false)}
onSave={() => void handleSaveEvaluation()}
saving={saving}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: colors.pageBg },
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 12,
paddingVertical: 12,
backgroundColor: colors.white,
},
headerBtn: { width: 40, alignItems: 'center' },
headerTitle: { fontSize: 17, fontWeight: '700', color: colors.textPrimary },
headerActions: { flexDirection: 'row', gap: 4 },
headerActionBtn: { width: 36, alignItems: 'center' },
body: { padding: 8, paddingBottom: 100 },
center: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 40, gap: 12 },
tip: { fontSize: 14, color: colors.textSecondary },
retryBtn: { paddingHorizontal: 18, paddingVertical: 8, borderRadius: 16, backgroundColor: colors.primaryLight },
retryText: { fontSize: 13, fontWeight: '600', color: colors.primaryText },
card: {
backgroundColor: colors.white,
borderRadius: 8,
padding: 8,
marginBottom: 8,
borderWidth: 1,
borderColor: colors.borderLight,
},
scoreCard: {
backgroundColor: colors.white,
borderRadius: 8,
padding: 8,
marginBottom: 8,
borderWidth: 1,
borderColor: colors.borderLight,
},
scoreRow: { flexDirection: 'row', alignItems: 'center' },
scoreLabel: { fontSize: 13, color: colors.textSecondary },
scoreValueRow: { flexDirection: 'row', alignItems: 'baseline', marginTop: 6 },
scoreValue: { fontSize: 42, fontWeight: '800', color: colors.textPrimary },
scoreUnit: { fontSize: 14, color: colors.textSecondary, marginLeft: 4 },
scoreBarWrap: { flex: 1, marginLeft: 20 },
scoreTrack: {
height: 10,
borderRadius: 5,
backgroundColor: colors.borderLight,
overflow: 'hidden',
},
scoreFill: { height: 10, borderRadius: 5, backgroundColor: colors.primary },
optimizeBtn: {
marginTop: 12,
alignSelf: 'flex-end',
backgroundColor: colors.primaryBtn,
borderRadius: 16,
paddingHorizontal: 18,
paddingVertical: 8,
},
optimizeBtnDisabled: { backgroundColor: colors.textDisabled },
optimizeBtnText: { fontSize: 14, fontWeight: '700', color: colors.white },
cardHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
cardHeaderTitle: { fontSize: 15, fontWeight: '700', color: colors.textPrimary, marginLeft: 8 },
optRow: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 10,
borderTopWidth: 1,
borderTopColor: colors.borderLight,
},
optTitle: { flex: 1, fontSize: 14, color: colors.textPrimary, marginLeft: 10 },
optTitleDone: { textDecorationLine: 'line-through', color: colors.textHint },
optScore: { fontSize: 13, color: colors.successText, fontWeight: '600' },
optScoreDone: { color: colors.textHint },
optAllBtn: {
marginTop: 12,
backgroundColor: colors.primaryLight,
borderRadius: 12,
paddingVertical: 12,
alignItems: 'center',
},
optAllText: { fontSize: 14, fontWeight: '700', color: colors.primaryText },
optAllBtnDisabled: { opacity: 0.7 },
sectionTitleRow: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 14,
},
sectionTitle: { fontSize: 16, fontWeight: '700', color: colors.textPrimary },
sectionActions: { flexDirection: 'row', alignItems: 'center', gap: 14 },
editLink: { fontSize: 13, color: colors.primary },
/** 「上次保存」那行:只在真的保存过之后出现 */
savedAt: { fontSize: 12, color: colors.textHint, marginBottom: 12, marginTop: -4 },
basicRow: { flexDirection: 'row', alignItems: 'center' },
avatar: {
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: colors.primary,
alignItems: 'center',
justifyContent: 'center',
},
avatarText: { fontSize: 24, fontWeight: '700', color: colors.white },
basicBody: { marginLeft: 14, flex: 1 },
nameRow: { flexDirection: 'row', alignItems: 'center' },
name: { fontSize: 18, fontWeight: '700', color: colors.textPrimary },
contactRow: { flexDirection: 'row', alignItems: 'center', marginTop: 6 },
contactText: { fontSize: 13, color: colors.textSecondary, marginLeft: 6 },
intentionGrid: { flexDirection: 'row', flexWrap: 'wrap' },
intentionItem: { width: '50%', marginBottom: 14 },
intentionLabel: { fontSize: 12, color: colors.textHint, marginBottom: 4 },
intentionValue: { fontSize: 14, fontWeight: '700', color: colors.textPrimary },
intentionTag: {
alignSelf: 'flex-start',
backgroundColor: colors.successLight,
borderRadius: 10,
paddingHorizontal: 8,
paddingVertical: 2,
},
intentionTagText: { fontSize: 12, color: colors.successText, fontWeight: '600' },
addBtn: { flexDirection: 'row', alignItems: 'center' },
addText: { fontSize: 13, color: colors.primary, marginLeft: 2 },
eduRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 10,
borderTopWidth: 1,
borderTopColor: colors.borderLight,
},
eduSchool: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
eduMajor: { fontSize: 13, color: colors.textSecondary, marginTop: 2 },
eduYear: { fontSize: 13, color: colors.textHint },
expRow: { paddingVertical: 12, borderTopWidth: 1, borderTopColor: colors.borderLight },
expHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
expCompany: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
expDate: { fontSize: 12, color: colors.textHint },
expPosition: { fontSize: 13, color: colors.textSecondary, marginTop: 2 },
expDesc: { fontSize: 13, color: colors.textSecondary, marginTop: 8, lineHeight: 20 },
aiTip: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 8,
backgroundColor: colors.infoLight,
borderRadius: 8,
paddingHorizontal: 8,
paddingVertical: 8,
},
aiTipText: { flex: 1, fontSize: 12, color: colors.infoText, marginLeft: 6 },
aiOptimizeMiniBtn: {
backgroundColor: colors.info,
borderRadius: 10,
paddingHorizontal: 10,
paddingVertical: 4,
},
aiOptimizeMiniText: { fontSize: 12, fontWeight: '600', color: colors.white },
optimizedTag: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'flex-start',
marginTop: 8,
backgroundColor: colors.successLight,
borderRadius: 10,
paddingHorizontal: 8,
paddingVertical: 2,
},
optimizedText: { fontSize: 12, color: colors.successText, marginLeft: 4 },
projRow: { paddingVertical: 12, borderTopWidth: 1, borderTopColor: colors.borderLight },
skillsWrap: { flexDirection: 'row', flexWrap: 'wrap', gap: 10 },
skillTag: {
backgroundColor: colors.pageBg,
borderRadius: 12,
paddingHorizontal: 12,
paddingVertical: 6,
},
/** 弹层里的标签可点删除:补一个 × 图标,光靠「可点击」没有视觉线索 */
skillTagEditable: { flexDirection: 'row', alignItems: 'center', gap: 6 },
skillText: { fontSize: 13, color: colors.textPrimary },
evalText: { fontSize: 13, color: colors.textSecondary, lineHeight: 22 },
/** 引导未采集该板块时的空态文案(不伪装成已填写) */
emptyText: { fontSize: 13, color: colors.textHint, marginTop: 4 },
footer: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
flexDirection: 'row',
paddingHorizontal: spacing.framework,
paddingVertical: 12,
backgroundColor: colors.white,
borderTopWidth: 1,
borderTopColor: colors.borderLight,
},
previewBtn: {
flex: 1,
backgroundColor: colors.white,
borderRadius: 24,
paddingVertical: 14,
alignItems: 'center',
borderWidth: 1,
borderColor: colors.border,
marginRight: 12,
},
previewBtnText: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
optimizeFooterBtn: {
flex: 2,
backgroundColor: colors.primaryBtn,
borderRadius: 24,
paddingVertical: 14,
alignItems: 'center',
},
optimizeFooterBtnText: { fontSize: 15, fontWeight: '700', color: colors.white },
/* ---------- 技能 / 自我评价弹层 ---------- */
modalMask: { flex: 1, justifyContent: 'flex-end', backgroundColor: colors.scrim },
modalSheet: {
backgroundColor: colors.white,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
paddingHorizontal: 20,
paddingTop: 16,
paddingBottom: 28,
maxHeight: '80%',
},
modalHeader: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 14,
},
modalTitle: { fontSize: 17, fontWeight: '700', color: colors.textPrimary },
modalBody: { maxHeight: 180 },
modalLabel: { fontSize: 13, color: colors.textHint, marginBottom: 10 },
modalInputRow: { flexDirection: 'row', alignItems: 'center', gap: 10, marginTop: 16 },
modalInput: {
flex: 1,
height: 46,
borderRadius: 12,
borderWidth: 1,
borderColor: colors.border,
paddingHorizontal: 14,
fontSize: 15,
color: colors.textPrimary,
},
modalAddBtn: {
backgroundColor: colors.primaryBtn,
borderRadius: 12,
paddingHorizontal: 18,
paddingVertical: 13,
},
modalAddBtnDisabled: { backgroundColor: colors.border },
modalAddText: { fontSize: 14, fontWeight: '700', color: colors.white },
modalError: { fontSize: 12, color: colors.dangerText, marginTop: 8 },
evalInput: {
height: 140,
borderRadius: 12,
borderWidth: 1,
borderColor: colors.border,
paddingHorizontal: 14,
paddingTop: 12,
fontSize: 15,
lineHeight: 22,
color: colors.textPrimary,
textAlignVertical: 'top',
},
evalCounter: { fontSize: 12, color: colors.textHint, textAlign: 'right', marginTop: 6 },
modalFooter: { flexDirection: 'row', gap: 12, marginTop: 18 },
modalCancelBtn: {
flex: 1,
borderRadius: 24,
paddingVertical: 14,
alignItems: 'center',
borderWidth: 1,
borderColor: colors.border,
},
modalCancelText: { fontSize: 15, fontWeight: '700', color: colors.textSecondary },
modalSaveBtn: {
flex: 2,
backgroundColor: colors.primaryBtn,
borderRadius: 24,
paddingVertical: 14,
alignItems: 'center',
},
modalSaveBtnDisabled: { backgroundColor: colors.textDisabled },
modalSaveText: { fontSize: 15, fontWeight: '700', color: colors.white },
});