Browse Source
- api: 新增 resume-versions 全链路 9 个端点（对齐 /profile/me/resume-versions 与 /resume-export-tasks） mock 以模块级可变数组模拟持久态；真实路径含 multipart 上传占位说明 - hook: useResumeVersions 覆盖列表/创建/设默认/删除/导出轮询 - 页面：app/resume-versions.tsx 版本卡（默认徽标/设默认/导出/删除）+ 新建弹窗，四态齐全 - 入口：简历页头部加「版本」入口；路由在 _layout 注册 - 主题：补充 scrimLight 遮罩 token（亮/暗双模式）master
doublex001
4 weeks ago
10 changed files with 909 additions and 1 deletions
@ -0,0 +1,464 @@ |
|||
import { Ionicons } from '@expo/vector-icons'; |
|||
import { useRouter } from 'expo-router'; |
|||
import { useCallback, 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 { useResumeVersions } from '../src/hooks'; |
|||
import { colors, spacing } from '../src/theme'; |
|||
import type { ResumeVersion } from '../src/types'; |
|||
import { formatBytes, formatDateTime } from '../src/utils'; |
|||
|
|||
/* ===================== 子组件：顶部导航 ===================== */ |
|||
|
|||
function Header({ |
|||
onBack, |
|||
onNew, |
|||
}: { |
|||
onBack: () => void; |
|||
onNew: () => void; |
|||
}) { |
|||
return ( |
|||
<View style={styles.header}> |
|||
<Pressable style={styles.headerBtn} onPress={onBack} hitSlop={8}> |
|||
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} /> |
|||
</Pressable> |
|||
<Text style={styles.headerTitle}>简历版本</Text> |
|||
<Pressable style={styles.headerActionBtn} onPress={onNew} hitSlop={8}> |
|||
<Ionicons name="add" size={22} color={colors.primary} /> |
|||
</Pressable> |
|||
</View> |
|||
); |
|||
} |
|||
|
|||
/* ===================== 子组件：版本卡 ===================== */ |
|||
|
|||
function VersionCard({ |
|||
version, |
|||
onSetDefault, |
|||
onExport, |
|||
onDelete, |
|||
}: { |
|||
version: ResumeVersion; |
|||
onSetDefault: () => void; |
|||
onExport: () => void; |
|||
onDelete: () => void; |
|||
}) { |
|||
return ( |
|||
<View style={[styles.card, version.isDefault && styles.cardDefault]}> |
|||
<View style={styles.cardTop}> |
|||
<View style={styles.cardTitleWrap}> |
|||
<Text style={styles.cardTitle} numberOfLines={1}> |
|||
{version.name} |
|||
</Text> |
|||
{version.isDefault && ( |
|||
<View style={styles.defaultBadge}> |
|||
<Text style={styles.defaultBadgeText}>默认</Text> |
|||
</View> |
|||
)} |
|||
</View> |
|||
<Text style={styles.cardVersion}>v{version.versionNo}</Text> |
|||
</View> |
|||
|
|||
<Text style={styles.cardMeta}> |
|||
{version.fileName} · {formatBytes(version.fileSize)} |
|||
</Text> |
|||
<Text style={styles.cardTime}> |
|||
更新于 {formatDateTime(version.updatedAt)} |
|||
</Text> |
|||
|
|||
<View style={styles.cardActions}> |
|||
{!version.isDefault && ( |
|||
<Pressable style={styles.actionBtn} onPress={onSetDefault}> |
|||
<Ionicons name="star-outline" size={16} color={colors.primary} /> |
|||
<Text style={[styles.actionText, { color: colors.primary }]}>设为默认</Text> |
|||
</Pressable> |
|||
)} |
|||
<Pressable style={styles.actionBtn} onPress={onExport}> |
|||
<Ionicons name="download-outline" size={16} color={colors.textSecondary} /> |
|||
<Text style={styles.actionText}>导出</Text> |
|||
</Pressable> |
|||
{!version.isDefault && ( |
|||
<Pressable style={styles.actionBtn} onPress={onDelete}> |
|||
<Ionicons name="trash-outline" size={16} color={colors.danger} /> |
|||
<Text style={[styles.actionText, { color: colors.danger }]}>删除</Text> |
|||
</Pressable> |
|||
)} |
|||
</View> |
|||
</View> |
|||
); |
|||
} |
|||
|
|||
/* ===================== 子组件：新建版本弹窗 ===================== */ |
|||
|
|||
function NewVersionModal({ |
|||
visible, |
|||
onClose, |
|||
onCreate, |
|||
}: { |
|||
visible: boolean; |
|||
onClose: () => void; |
|||
onCreate: (name: string) => void; |
|||
}) { |
|||
const [name, setName] = useState(''); |
|||
|
|||
const handleConfirm = () => { |
|||
onCreate(name.trim()); |
|||
setName(''); |
|||
}; |
|||
|
|||
return ( |
|||
<Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}> |
|||
<View style={styles.modalMask}> |
|||
<KeyboardAvoidingView |
|||
style={styles.modalSheet} |
|||
behavior={Platform.OS === 'ios' ? 'padding' : undefined} |
|||
> |
|||
<Text style={styles.modalTitle}>新建简历版本</Text> |
|||
<TextInput |
|||
style={styles.modalInput} |
|||
placeholder="版本名（可空，默认按序号命名）" |
|||
placeholderTextColor={colors.textHint} |
|||
value={name} |
|||
onChangeText={setName} |
|||
maxLength={30} |
|||
/> |
|||
{/* affordance-pending-backend：真实文件上传需后端 multipart 接口，当前以占位文件创建 */} |
|||
<Text style={styles.modalHint}>文件上传需后端支持，当前以占位文件创建版本</Text> |
|||
<View style={styles.modalActions}> |
|||
<Pressable style={styles.modalCancel} onPress={onClose}> |
|||
<Text style={styles.modalCancelText}>取消</Text> |
|||
</Pressable> |
|||
<Pressable style={styles.modalConfirm} onPress={handleConfirm}> |
|||
<Text style={styles.modalConfirmText}>创建</Text> |
|||
</Pressable> |
|||
</View> |
|||
</KeyboardAvoidingView> |
|||
</View> |
|||
</Modal> |
|||
); |
|||
} |
|||
|
|||
/* ===================== 页面 ===================== */ |
|||
|
|||
export default function ResumeVersionsScreen() { |
|||
const router = useRouter(); |
|||
const { versions, loading, error, refresh, busy, create, setDefault, remove, exportAndPoll } = |
|||
useResumeVersions(); |
|||
const [newVisible, setNewVisible] = useState(false); |
|||
|
|||
const handleNew = useCallback( |
|||
(name: string) => { |
|||
setNewVisible(false); |
|||
void create({ |
|||
name: name || undefined, |
|||
fileName: `${name || '简历'}版本.pdf`, |
|||
fileSize: 200_000, |
|||
}); |
|||
}, |
|||
[create], |
|||
); |
|||
|
|||
const handleSetDefault = useCallback( |
|||
(id: string, name: string) => { |
|||
Alert.alert('设为默认', `将「${name}」设为默认简历？`, [ |
|||
{ text: '取消', style: 'cancel' }, |
|||
{ text: '设为默认', onPress: () => void setDefault(id) }, |
|||
]); |
|||
}, |
|||
[setDefault], |
|||
); |
|||
|
|||
const handleDelete = useCallback( |
|||
(id: string, name: string) => { |
|||
Alert.alert('删除版本', `确定删除「${name}」吗？默认版本需先设其他版本为默认。`, [ |
|||
{ text: '取消', style: 'cancel' }, |
|||
{ text: '删除', style: 'destructive', onPress: () => void remove(id) }, |
|||
]); |
|||
}, |
|||
[remove], |
|||
); |
|||
|
|||
const handleExport = useCallback( |
|||
async (id: string, name: string) => { |
|||
const task = await exportAndPoll(id); |
|||
if (!task) { |
|||
Alert.alert('导出失败', '导出任务异常，请稍后重试'); |
|||
return; |
|||
} |
|||
if (task.status === 'SUCCESS') { |
|||
Alert.alert('导出完成', `「${name}」已导出${task.outputUrl ? `：${task.outputUrl}` : ''}`); |
|||
} else if (task.status === 'FAILED') { |
|||
Alert.alert('导出失败', task.error || '导出任务失败'); |
|||
} else { |
|||
Alert.alert('导出中', '任务仍在处理，请稍后到导出记录查看'); |
|||
} |
|||
}, |
|||
[exportAndPoll], |
|||
); |
|||
|
|||
return ( |
|||
<SafeAreaView style={styles.safeArea} edges={['top']}> |
|||
<Header onBack={() => router.back()} onNew={() => setNewVisible(true)} /> |
|||
|
|||
{loading ? ( |
|||
<View style={styles.stateBox}> |
|||
<ActivityIndicator size="large" color={colors.primary} /> |
|||
</View> |
|||
) : error ? ( |
|||
<View style={styles.stateBox}> |
|||
<Text style={styles.stateText}>加载失败</Text> |
|||
<Pressable style={styles.retryBtn} onPress={refresh}> |
|||
<Text style={styles.retryText}>重试</Text> |
|||
</Pressable> |
|||
</View> |
|||
) : versions.length === 0 ? ( |
|||
<View style={styles.stateBox}> |
|||
<Ionicons name="document-outline" size={48} color={colors.textHint} /> |
|||
<Text style={styles.stateText}>还没有简历版本</Text> |
|||
<Pressable style={styles.retryBtn} onPress={() => setNewVisible(true)}> |
|||
<Text style={styles.retryText}>新建版本</Text> |
|||
</Pressable> |
|||
</View> |
|||
) : ( |
|||
<ScrollView |
|||
style={styles.scroll} |
|||
contentContainerStyle={styles.scrollContent} |
|||
showsVerticalScrollIndicator={false} |
|||
> |
|||
{versions.map((v) => ( |
|||
<VersionCard |
|||
key={v.id} |
|||
version={v} |
|||
onSetDefault={() => handleSetDefault(v.id, v.name)} |
|||
onExport={() => void handleExport(v.id, v.name)} |
|||
onDelete={() => handleDelete(v.id, v.name)} |
|||
/> |
|||
))} |
|||
</ScrollView> |
|||
)} |
|||
|
|||
{busy && ( |
|||
<View style={styles.busyMask}> |
|||
<ActivityIndicator size="small" color={colors.primary} /> |
|||
</View> |
|||
)} |
|||
|
|||
<NewVersionModal |
|||
visible={newVisible} |
|||
onClose={() => setNewVisible(false)} |
|||
onCreate={handleNew} |
|||
/> |
|||
</SafeAreaView> |
|||
); |
|||
} |
|||
|
|||
const styles = StyleSheet.create({ |
|||
safeArea: { |
|||
flex: 1, |
|||
backgroundColor: colors.pageBg, |
|||
}, |
|||
header: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
justifyContent: 'space-between', |
|||
paddingHorizontal: spacing.card, |
|||
height: 52, |
|||
backgroundColor: colors.white, |
|||
borderBottomWidth: 1, |
|||
borderBottomColor: colors.borderLight, |
|||
}, |
|||
headerBtn: { |
|||
width: 40, |
|||
height: 40, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
}, |
|||
headerTitle: { |
|||
fontSize: 17, |
|||
fontWeight: '700', |
|||
color: colors.textPrimary, |
|||
}, |
|||
headerActionBtn: { |
|||
width: 40, |
|||
height: 40, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
}, |
|||
scroll: { |
|||
flex: 1, |
|||
}, |
|||
scrollContent: { |
|||
padding: spacing.card, |
|||
paddingBottom: 24, |
|||
}, |
|||
card: { |
|||
backgroundColor: colors.white, |
|||
borderRadius: spacing.card, |
|||
padding: spacing.card, |
|||
marginBottom: spacing.card, |
|||
}, |
|||
cardDefault: { |
|||
borderWidth: 1, |
|||
borderColor: colors.primary, |
|||
}, |
|||
cardTop: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
justifyContent: 'space-between', |
|||
}, |
|||
cardTitleWrap: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
flex: 1, |
|||
marginRight: 8, |
|||
}, |
|||
cardTitle: { |
|||
fontSize: 15, |
|||
fontWeight: '700', |
|||
color: colors.textPrimary, |
|||
}, |
|||
defaultBadge: { |
|||
marginLeft: 8, |
|||
paddingHorizontal: 6, |
|||
paddingVertical: 2, |
|||
borderRadius: 4, |
|||
backgroundColor: colors.primaryLight, |
|||
}, |
|||
defaultBadgeText: { |
|||
fontSize: 11, |
|||
fontWeight: '700', |
|||
color: colors.primary, |
|||
}, |
|||
cardVersion: { |
|||
fontSize: 13, |
|||
color: colors.textSecondary, |
|||
}, |
|||
cardMeta: { |
|||
marginTop: 6, |
|||
fontSize: 13, |
|||
color: colors.textSecondary, |
|||
}, |
|||
cardTime: { |
|||
marginTop: 2, |
|||
fontSize: 12, |
|||
color: colors.textHint, |
|||
}, |
|||
cardActions: { |
|||
flexDirection: 'row', |
|||
marginTop: 12, |
|||
paddingTop: 12, |
|||
borderTopWidth: 1, |
|||
borderTopColor: colors.borderLight, |
|||
}, |
|||
actionBtn: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
marginRight: 20, |
|||
}, |
|||
actionText: { |
|||
marginLeft: 4, |
|||
fontSize: 13, |
|||
color: colors.textSecondary, |
|||
}, |
|||
stateBox: { |
|||
flex: 1, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
}, |
|||
stateText: { |
|||
marginTop: 12, |
|||
fontSize: 14, |
|||
color: colors.textSecondary, |
|||
}, |
|||
retryBtn: { |
|||
marginTop: 16, |
|||
paddingHorizontal: 24, |
|||
paddingVertical: spacing.card, |
|||
borderRadius: 18, |
|||
backgroundColor: colors.primaryBtn, |
|||
}, |
|||
retryText: { |
|||
fontSize: 13, |
|||
fontWeight: '600', |
|||
color: colors.white, |
|||
}, |
|||
busyMask: { |
|||
...StyleSheet.absoluteFill, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
backgroundColor: colors.scrimLight, |
|||
}, |
|||
modalMask: { |
|||
flex: 1, |
|||
backgroundColor: colors.scrim, |
|||
justifyContent: 'flex-end', |
|||
}, |
|||
modalSheet: { |
|||
backgroundColor: colors.white, |
|||
borderTopLeftRadius: 16, |
|||
borderTopRightRadius: 16, |
|||
padding: spacing.card, |
|||
paddingBottom: 24, |
|||
}, |
|||
modalTitle: { |
|||
fontSize: 16, |
|||
fontWeight: '700', |
|||
color: colors.textPrimary, |
|||
marginBottom: 12, |
|||
}, |
|||
modalInput: { |
|||
borderWidth: 1, |
|||
borderColor: colors.borderLight, |
|||
borderRadius: spacing.card, |
|||
paddingHorizontal: 12, |
|||
paddingVertical: 10, |
|||
fontSize: 14, |
|||
color: colors.textPrimary, |
|||
}, |
|||
modalHint: { |
|||
marginTop: 8, |
|||
fontSize: 12, |
|||
color: colors.textHint, |
|||
}, |
|||
modalActions: { |
|||
flexDirection: 'row', |
|||
marginTop: 16, |
|||
}, |
|||
modalCancel: { |
|||
flex: 1, |
|||
alignItems: 'center', |
|||
paddingVertical: 12, |
|||
marginRight: 8, |
|||
borderRadius: spacing.card, |
|||
backgroundColor: colors.pageBg, |
|||
}, |
|||
modalCancelText: { |
|||
fontSize: 14, |
|||
color: colors.textSecondary, |
|||
}, |
|||
modalConfirm: { |
|||
flex: 1, |
|||
alignItems: 'center', |
|||
paddingVertical: 12, |
|||
marginLeft: 8, |
|||
borderRadius: spacing.card, |
|||
backgroundColor: colors.primaryBtn, |
|||
}, |
|||
modalConfirmText: { |
|||
fontSize: 14, |
|||
fontWeight: '700', |
|||
color: colors.white, |
|||
}, |
|||
}); |
|||
@ -0,0 +1,118 @@ |
|||
/** |
|||
* 简历版本管理 hook：列表 + 创建 / 设默认 / 删除 / 导出任务。 |
|||
* 操作后自动刷新列表；导出任务轮询到终态后返回，供页面提示结果。 |
|||
*/ |
|||
import { useCallback, useState } from 'react'; |
|||
import { |
|||
createResumeExportTask, |
|||
createResumeVersion, |
|||
deleteResumeVersion, |
|||
fetchResumeExportTask, |
|||
fetchResumeVersions, |
|||
setDefaultResumeVersion, |
|||
} from '../api'; |
|||
import type { ResumeExportTask, ResumeVersion } from '../types'; |
|||
import { useAsyncData } from './useAsyncData'; |
|||
|
|||
export interface ResumeVersionsState { |
|||
/** 版本列表（versionNo 倒序） */ |
|||
versions: ResumeVersion[]; |
|||
/** 是否加载中 */ |
|||
loading: boolean; |
|||
/** 错误对象 */ |
|||
error: Error | null; |
|||
/** 刷新列表 */ |
|||
refresh: () => void; |
|||
/** 操作进行中（创建/设默认/删除/导出任一进行） */ |
|||
busy: boolean; |
|||
/** 创建版本（占位元数据；真实后端走 multipart 上传） */ |
|||
create: (input: { |
|||
name?: string; |
|||
fileName: string; |
|||
fileSize: number; |
|||
}) => Promise<void>; |
|||
/** 设为默认 */ |
|||
setDefault: (id: string) => Promise<void>; |
|||
/** 删除版本 */ |
|||
remove: (id: string) => Promise<void>; |
|||
/** 创建导出任务并轮询到终态，返回最终任务（或异常时 null） */ |
|||
exportAndPoll: (id: string) => Promise<ResumeExportTask | null>; |
|||
} |
|||
|
|||
export function useResumeVersions(): ResumeVersionsState { |
|||
const [busy, setBusy] = useState(false); |
|||
|
|||
const fetcher = useCallback(() => fetchResumeVersions(), []); |
|||
const { data, loading, error, refresh } = useAsyncData(fetcher); |
|||
|
|||
const create = useCallback( |
|||
async (input: { name?: string; fileName: string; fileSize: number }) => { |
|||
setBusy(true); |
|||
try { |
|||
await createResumeVersion(input); |
|||
refresh(); |
|||
} finally { |
|||
setBusy(false); |
|||
} |
|||
}, |
|||
[refresh], |
|||
); |
|||
|
|||
const setDefault = useCallback( |
|||
async (id: string) => { |
|||
setBusy(true); |
|||
try { |
|||
await setDefaultResumeVersion(id); |
|||
refresh(); |
|||
} finally { |
|||
setBusy(false); |
|||
} |
|||
}, |
|||
[refresh], |
|||
); |
|||
|
|||
const remove = useCallback( |
|||
async (id: string) => { |
|||
setBusy(true); |
|||
try { |
|||
await deleteResumeVersion(id); |
|||
refresh(); |
|||
} finally { |
|||
setBusy(false); |
|||
} |
|||
}, |
|||
[refresh], |
|||
); |
|||
|
|||
const exportAndPoll = useCallback(async (id: string) => { |
|||
setBusy(true); |
|||
try { |
|||
const task = await createResumeExportTask(id); |
|||
// 轮询到终态（最多 6 次，2s 间隔）；mock 直接 SUCCESS
|
|||
let current = task; |
|||
for ( |
|||
let i = 0; |
|||
i < 6 && (current.status === 'PENDING' || current.status === 'RUNNING'); |
|||
i++ |
|||
) { |
|||
await new Promise((r) => setTimeout(r, 2000)); |
|||
current = await fetchResumeExportTask(current.id); |
|||
} |
|||
return current; |
|||
} finally { |
|||
setBusy(false); |
|||
} |
|||
}, []); |
|||
|
|||
return { |
|||
versions: data ?? [], |
|||
loading, |
|||
error, |
|||
refresh, |
|||
busy, |
|||
create, |
|||
setDefault, |
|||
remove, |
|||
exportAndPoll, |
|||
}; |
|||
} |
|||
Loading…
Reference in new issue