Browse Source
- 薪资计算器：新增城市社保/公积金基数上下限表，选城市后 clamp 社保基数并计入计算（断点②） - 文书模板：新增模板正文与预览页 /legal/template，正文 selectable 长按可复制（断点③） - 分层：types/constants/api/页面；tsc --noEmit 0 错误、eslint 0 警告、路由审计 0 死链master
doublex001
2 months ago
8 changed files with 383 additions and 14 deletions
@ -0,0 +1,145 @@ |
|||||
|
import { Ionicons } from '@expo/vector-icons'; |
||||
|
import { useRouter, useLocalSearchParams } from 'expo-router'; |
||||
|
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'; |
||||
|
import { SafeAreaView } from 'react-native-safe-area-context'; |
||||
|
import { useLegalData } from '../../src/hooks'; |
||||
|
import { LoadingState, ErrorState, EmptyState } from '../../src/components/StateView'; |
||||
|
import { colors } from '../../src/theme'; |
||||
|
|
||||
|
/* ===================== 顶部导航 ===================== */ |
||||
|
|
||||
|
function Header({ onBack }: { onBack: () => 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> |
||||
|
<View style={styles.headerBtn} /> |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/* ===================== 页面 ===================== */ |
||||
|
|
||||
|
export default function LegalTemplateScreen() { |
||||
|
const router = useRouter(); |
||||
|
const { id } = useLocalSearchParams(); |
||||
|
const { templates, loading, error, refresh } = useLegalData(); |
||||
|
|
||||
|
const templateId = Array.isArray(id) ? id[0] : id; |
||||
|
const template = templateId ? templates.find((t) => t.id === templateId) : undefined; |
||||
|
|
||||
|
return ( |
||||
|
<SafeAreaView style={styles.safeArea} edges={['top']}> |
||||
|
<Header onBack={() => router.back()} /> |
||||
|
{loading ? ( |
||||
|
<LoadingState text="加载模板中…" /> |
||||
|
) : error ? ( |
||||
|
<ErrorState message="加载失败，请重试" onRetry={refresh} /> |
||||
|
) : !template ? ( |
||||
|
<EmptyState icon="document-text-outline" title="未找到该模板" subtitle="请返回重新选择" /> |
||||
|
) : ( |
||||
|
<ScrollView |
||||
|
style={styles.scroll} |
||||
|
contentContainerStyle={styles.content} |
||||
|
showsVerticalScrollIndicator={false} |
||||
|
> |
||||
|
<View style={styles.headCard}> |
||||
|
<Ionicons name={template.icon as never} size={28} color={colors.primary} /> |
||||
|
<View style={styles.headBody}> |
||||
|
<Text style={styles.name}>{template.name}</Text> |
||||
|
<Text style={styles.desc}>{template.description}</Text> |
||||
|
</View> |
||||
|
</View> |
||||
|
|
||||
|
<View style={styles.contentCard}> |
||||
|
{/* selectable：长按正文即可复制，无需额外原生模块（mock 阶段） */} |
||||
|
<Text style={styles.contentText} selectable> |
||||
|
{template.content} |
||||
|
</Text> |
||||
|
</View> |
||||
|
|
||||
|
<Text style={styles.tip}> |
||||
|
长按正文即可复制；正式下载 / 导出为 Word·PDF 需后端文件支持，当前为内容预览。 |
||||
|
</Text> |
||||
|
</ScrollView> |
||||
|
)} |
||||
|
</SafeAreaView> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const styles = StyleSheet.create({ |
||||
|
safeArea: { |
||||
|
flex: 1, |
||||
|
backgroundColor: colors.pageBg, |
||||
|
}, |
||||
|
header: { |
||||
|
flexDirection: 'row', |
||||
|
alignItems: 'center', |
||||
|
justifyContent: 'space-between', |
||||
|
paddingHorizontal: 8, |
||||
|
height: 48, |
||||
|
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, |
||||
|
}, |
||||
|
scroll: { |
||||
|
flex: 1, |
||||
|
}, |
||||
|
content: { |
||||
|
padding: 12, |
||||
|
paddingBottom: 24, |
||||
|
}, |
||||
|
headCard: { |
||||
|
flexDirection: 'row', |
||||
|
alignItems: 'center', |
||||
|
padding: 16, |
||||
|
borderRadius: 12, |
||||
|
backgroundColor: colors.white, |
||||
|
marginBottom: 12, |
||||
|
}, |
||||
|
headBody: { |
||||
|
flex: 1, |
||||
|
marginLeft: 12, |
||||
|
}, |
||||
|
name: { |
||||
|
fontSize: 16, |
||||
|
fontWeight: '700', |
||||
|
color: colors.textPrimary, |
||||
|
}, |
||||
|
desc: { |
||||
|
marginTop: 2, |
||||
|
fontSize: 12, |
||||
|
color: colors.textSecondary, |
||||
|
}, |
||||
|
contentCard: { |
||||
|
padding: 16, |
||||
|
borderRadius: 12, |
||||
|
backgroundColor: colors.white, |
||||
|
borderWidth: 1, |
||||
|
borderColor: colors.borderLight, |
||||
|
}, |
||||
|
contentText: { |
||||
|
fontSize: 14, |
||||
|
lineHeight: 22, |
||||
|
color: colors.textPrimary, |
||||
|
}, |
||||
|
tip: { |
||||
|
marginTop: 12, |
||||
|
fontSize: 12, |
||||
|
color: colors.textHint, |
||||
|
lineHeight: 18, |
||||
|
}, |
||||
|
}); |
||||
Loading…
Reference in new issue