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.
91 lines
2.8 KiB
91 lines
2.8 KiB
import { useState } from 'react';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { colors, spacing } from '../../../src/theme';
|
|
import { useOnboarding } from '../../../src/hooks';
|
|
import { ScreenShell } from '../ui/ScreenShell';
|
|
import { Avatar } from '../ui/Avatar';
|
|
import { PrimaryButton } from '../ui/PrimaryButton';
|
|
|
|
const SAMPLES = [
|
|
{
|
|
name: '资深 UI 设计师',
|
|
items: [
|
|
'1、负责移动端 Android / iOS 的 UI 设计',
|
|
'2、制定 App 界面实现标准',
|
|
'3、负责版本迭代与用户体验优化',
|
|
],
|
|
},
|
|
{
|
|
name: '高级前端工程师',
|
|
items: [
|
|
'1、负责核心业务前端架构设计',
|
|
'2、推动组件化与工程化落地',
|
|
'3、主导性能优化与疑难问题攻关',
|
|
],
|
|
},
|
|
{
|
|
name: '产品经理',
|
|
items: [
|
|
'1、负责求职模块需求规划与原型设计',
|
|
'2、推进版本迭代与数据分析',
|
|
'3、协调研发、设计、运营达成目标',
|
|
],
|
|
},
|
|
];
|
|
|
|
export function P17Reference() {
|
|
const { setData, back, navigate } = useOnboarding();
|
|
const [idx, setIdx] = useState(0);
|
|
const sample = SAMPLES[idx];
|
|
|
|
const useIt = () => {
|
|
setData({ workContent: sample.items.join('\n') });
|
|
navigate('P16');
|
|
};
|
|
|
|
return (
|
|
<ScreenShell title="参考案例" showBack onBack={back}>
|
|
<View style={styles.head}>
|
|
<Avatar name="avatarDesigner" size={56} />
|
|
<View style={styles.headText}>
|
|
<Text style={styles.name}>{sample.name}</Text>
|
|
<Pressable style={styles.swap} onPress={() => setIdx((i) => (i + 1) % SAMPLES.length)}>
|
|
<Ionicons name="refresh" size={14} color={colors.primary} />
|
|
<Text style={styles.swapText}>换一个</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.card}>
|
|
{sample.items.map((it) => (
|
|
<Text key={it} style={styles.item}>
|
|
{it}
|
|
</Text>
|
|
))}
|
|
</View>
|
|
|
|
<View style={styles.footer}>
|
|
<PrimaryButton label="采用并填写" active onPress={useIt} />
|
|
</View>
|
|
</ScreenShell>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
head: { flexDirection: 'row', alignItems: 'center', gap: spacing.block, marginBottom: spacing.block },
|
|
headText: { gap: 8 },
|
|
name: { fontSize: 16, fontWeight: '700', color: colors.textPrimary },
|
|
swap: { flexDirection: 'row', alignItems: 'center', gap: 4 },
|
|
swapText: { fontSize: 13, color: colors.primary, fontWeight: '600' },
|
|
card: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 8,
|
|
padding: 8,
|
|
gap: spacing.block,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
},
|
|
item: { fontSize: 14, color: colors.textSecondary, lineHeight: 22 },
|
|
footer: { marginTop: 24 },
|
|
});
|
|
|