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.
464 lines
16 KiB
464 lines
16 KiB
import { Ionicons } from '@expo/vector-icons';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import { useRouter } from 'expo-router';
|
|
import { useState } from 'react';
|
|
import {
|
|
Pressable,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
} from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { useSalaryCalculator } from '../../src/hooks';
|
|
import { colors, headerGradientShort } from '../../src/theme';
|
|
import type { SalaryCalcInput, SalaryToolLink } from '../../src/types';
|
|
import { formatCurrency } from '../../src/utils';
|
|
|
|
|
|
/* ===================== 子组件：顶部导航 ===================== */
|
|
|
|
function Header({ onBack, onHistory }: { onBack: () => void; onHistory: () => 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.headerBtn} onPress={onHistory} hitSlop={8}>
|
|
<Text style={styles.headerAction}>历史记录</Text>
|
|
</Pressable>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：数字输入行 ===================== */
|
|
|
|
function NumberInput({
|
|
label,
|
|
value,
|
|
suffix,
|
|
onChange,
|
|
placeholder,
|
|
}: {
|
|
label: string;
|
|
value: number;
|
|
suffix: string;
|
|
onChange: (v: number) => void;
|
|
placeholder?: string;
|
|
}) {
|
|
const [text, setText] = useState(String(value));
|
|
return (
|
|
<View style={styles.inputRow}>
|
|
<Text style={styles.inputLabel}>{label}</Text>
|
|
<View style={styles.inputBox}>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={text}
|
|
onChangeText={(t) => {
|
|
setText(t);
|
|
const n = parseFloat(t);
|
|
if (!Number.isNaN(n)) onChange(n);
|
|
}}
|
|
keyboardType="numeric"
|
|
placeholder={placeholder}
|
|
placeholderTextColor={colors.textHint}
|
|
/>
|
|
<Text style={styles.inputSuffix}>{suffix}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function SelectRow({
|
|
label,
|
|
value,
|
|
onPress,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
onPress: () => void;
|
|
}) {
|
|
return (
|
|
<Pressable style={styles.inputRow} onPress={onPress}>
|
|
<Text style={styles.inputLabel}>{label}</Text>
|
|
<View style={styles.selectBox}>
|
|
<Text style={styles.selectValue}>{value}</Text>
|
|
<Ionicons name="chevron-forward" size={18} color={colors.textHint} />
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：五险一金明细 ===================== */
|
|
|
|
function InsuranceCard({ result }: { result: import('../../src/types').SalaryCalcResult }) {
|
|
return (
|
|
<View style={styles.card}>
|
|
<Text style={styles.cardTitle}>五险一金明细</Text>
|
|
<View style={styles.cardSubTitleRow}>
|
|
<Text style={styles.cardSubTitle}>个人缴纳</Text>
|
|
<Text style={styles.cardSubTitle}>缴纳比例</Text>
|
|
</View>
|
|
{result.insuranceItems.map((item) => (
|
|
<View key={item.label} style={styles.insuranceRow}>
|
|
<Text style={styles.insuranceLabel}>{item.label}</Text>
|
|
<Text style={styles.insuranceAmount}>{formatCurrency(item.amount)}</Text>
|
|
<Text style={styles.insuranceRate}>{(item.rate * 100).toFixed(1)}%</Text>
|
|
</View>
|
|
))}
|
|
<View style={styles.divider} />
|
|
<View style={styles.totalRow}>
|
|
<Text style={styles.totalLabel}>合计个人缴纳</Text>
|
|
<Text style={styles.totalAmount}>{formatCurrency(result.monthlySocial)}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：个人所得税明细 ===================== */
|
|
|
|
function TaxCard({ result }: { result: import('../../src/types').SalaryCalcResult }) {
|
|
const taxItems = result.taxItems;
|
|
const monthlyTax = taxItems.find((t) => t.label === '月度个税')?.amount ?? 0;
|
|
const annualTax = taxItems.find((t) => t.label === '年度个税')?.amount ?? 0;
|
|
const taxable = taxItems.find((t) => t.label === '应纳税所得额')?.amount ?? 0;
|
|
const rate = taxItems.find((t) => t.label === '适用税率')?.amount ?? 0;
|
|
|
|
return (
|
|
<View style={styles.card}>
|
|
<Text style={styles.cardTitle}>个人所得税明细</Text>
|
|
<View style={styles.taxGrid}>
|
|
<View style={styles.taxItem}>
|
|
<Text style={styles.taxItemLabel}>应纳税所得额</Text>
|
|
<Text style={styles.taxItemValue}>{formatCurrency(taxable)}</Text>
|
|
</View>
|
|
<View style={styles.taxItem}>
|
|
<Text style={styles.taxItemLabel}>适用税率</Text>
|
|
<Text style={styles.taxItemValue}>{(rate * 100).toFixed(0)}%</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.divider} />
|
|
<View style={styles.taxRow}>
|
|
<Text style={styles.taxRowLabel}>月度个税</Text>
|
|
<Text style={styles.taxRowValue}>{formatCurrency(monthlyTax)}/月</Text>
|
|
</View>
|
|
<View style={styles.taxRow}>
|
|
<Text style={styles.taxRowLabel}>年度个税</Text>
|
|
<Text style={styles.taxRowValue}>{formatCurrency(annualTax)}/年</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：薪资结构 ===================== */
|
|
|
|
function StructureCard({ result }: { result: import('../../src/types').SalaryCalcResult }) {
|
|
const items = result.structure.filter((s) => s.label !== '税前工资');
|
|
const themeColors: Record<string, string> = {
|
|
primary: colors.primary,
|
|
info: colors.info,
|
|
action: colors.action,
|
|
success: colors.success,
|
|
};
|
|
return (
|
|
<View style={styles.card}>
|
|
<Text style={styles.cardTitle}>薪资结构</Text>
|
|
<View style={styles.structureChart}>
|
|
<View style={styles.pie}>
|
|
{items.map((item, index) => {
|
|
const start = items.slice(0, index).reduce((sum, i) => sum + i.percent, 0);
|
|
return (
|
|
<View
|
|
key={item.label}
|
|
style={[
|
|
styles.pieSlice,
|
|
{
|
|
backgroundColor: themeColors[item.color] ?? colors.primary,
|
|
transform: [{ rotate: `${(start / 100) * 360}deg` }],
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
})}
|
|
</View>
|
|
<View style={styles.structureLegend}>
|
|
{items.map((item) => (
|
|
<View key={item.label} style={styles.legendRow}>
|
|
<View
|
|
style={[
|
|
styles.legendDot,
|
|
{ backgroundColor: themeColors[item.color] ?? colors.primary },
|
|
]}
|
|
/>
|
|
<Text style={styles.legendLabel}>{item.label}</Text>
|
|
<Text style={styles.legendValue}>{formatCurrency(item.value / 1000, 0)}K</Text>
|
|
<Text style={styles.legendPercent}>{item.percent}%</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 子组件：更多工具 ===================== */
|
|
|
|
function ToolLink({ tool }: { tool: SalaryToolLink }) {
|
|
return (
|
|
<Pressable style={styles.toolRow}>
|
|
<View style={[styles.toolIcon, { backgroundColor: colors.primaryLight }]}>
|
|
<Ionicons name={tool.icon as keyof typeof Ionicons.glyphMap} size={20} color={colors.primary} />
|
|
</View>
|
|
<View style={styles.toolBody}>
|
|
<Text style={styles.toolTitle}>{tool.title}</Text>
|
|
<Text style={styles.toolDesc}>{tool.desc}</Text>
|
|
</View>
|
|
<Ionicons name="chevron-forward" size={18} color={colors.textHint} />
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
/* ===================== 页面 ===================== */
|
|
|
|
export default function SalaryCalculatorScreen() {
|
|
const router = useRouter();
|
|
const { inputs, setInputs, result } = useSalaryCalculator();
|
|
|
|
const update = <K extends keyof SalaryCalcInput>(key: K, value: SalaryCalcInput[K]) => {
|
|
setInputs({ ...inputs, [key]: value });
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top']}>
|
|
<Header onBack={() => router.back()} onHistory={() => {}} />
|
|
<ScrollView contentContainerStyle={styles.body} showsVerticalScrollIndicator={false}>
|
|
{/* 输入卡片 */}
|
|
<View style={styles.card}>
|
|
<Text style={styles.cardTitle}>收入参数</Text>
|
|
<NumberInput
|
|
label="税前月薪"
|
|
value={inputs.monthlyGross}
|
|
suffix="元"
|
|
onChange={(v) => update('monthlyGross', Math.max(0, v))}
|
|
/>
|
|
<SelectRow label="所在城市" value={inputs.city} onPress={() => {}} />
|
|
<NumberInput
|
|
label="社保基数"
|
|
value={inputs.socialBase}
|
|
suffix="元"
|
|
onChange={(v) => update('socialBase', Math.max(0, v))}
|
|
/>
|
|
<NumberInput
|
|
label="公积金比例"
|
|
value={inputs.providentFundRate * 100}
|
|
suffix="%"
|
|
onChange={(v) => update('providentFundRate', Math.max(0, Math.min(100, v)) / 100)}
|
|
/>
|
|
<NumberInput
|
|
label="专项附加扣除"
|
|
value={inputs.specialDeduction}
|
|
suffix="元/月"
|
|
onChange={(v) => update('specialDeduction', Math.max(0, v))}
|
|
/>
|
|
</View>
|
|
|
|
{/* 结果卡片 */}
|
|
<LinearGradient
|
|
colors={headerGradientShort}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={styles.resultCard}
|
|
>
|
|
<Text style={styles.resultLabel}>税后月工资</Text>
|
|
<Text style={styles.resultValue}>{formatCurrency(result.monthlyNet)}</Text>
|
|
<Text style={styles.resultUnit}>/月</Text>
|
|
</LinearGradient>
|
|
|
|
{/* 五险一金 */}
|
|
<InsuranceCard result={result} />
|
|
|
|
{/* 个税 */}
|
|
<TaxCard result={result} />
|
|
|
|
{/* 薪资结构 */}
|
|
<StructureCard result={result} />
|
|
|
|
{/* 更多工具 */}
|
|
<View style={styles.card}>
|
|
<Text style={styles.cardTitle}>更多工具</Text>
|
|
{[
|
|
{
|
|
id: 'year-end',
|
|
title: '年终奖个税计算',
|
|
desc: '单独计税 / 并入综合所得对比',
|
|
icon: 'gift-outline',
|
|
route: '/tools/salary-calculator',
|
|
},
|
|
{
|
|
id: 'severance',
|
|
title: '离职补偿金计算',
|
|
desc: 'N+1 补偿金与个税估算',
|
|
icon: 'cash-outline',
|
|
route: '/tools/salary-calculator',
|
|
},
|
|
{
|
|
id: 'proof',
|
|
title: '公积金/社保证明',
|
|
desc: '一键查询缴纳记录',
|
|
icon: 'document-text-outline',
|
|
route: '/tools/salary-calculator',
|
|
},
|
|
].map((tool) => (
|
|
<ToolLink key={tool.id} tool={tool} />
|
|
))}
|
|
</View>
|
|
|
|
<Pressable style={styles.saveBtn} onPress={() => {}}>
|
|
<Text style={styles.saveBtnText}>保存计算记录</Text>
|
|
</Pressable>
|
|
</ScrollView>
|
|
</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: 60, justifyContent: 'center' },
|
|
headerTitle: { fontSize: 17, fontWeight: '700', color: colors.textPrimary },
|
|
headerAction: { fontSize: 14, color: colors.primary, textAlign: 'right' },
|
|
body: { padding: 16, paddingBottom: 32 },
|
|
card: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 14,
|
|
padding: 16,
|
|
marginBottom: 12,
|
|
borderWidth: 1,
|
|
borderColor: colors.borderLight,
|
|
},
|
|
cardTitle: { fontSize: 15, fontWeight: '700', color: colors.textPrimary, marginBottom: 14 },
|
|
inputRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 12,
|
|
borderTopWidth: 1,
|
|
borderTopColor: colors.borderLight,
|
|
},
|
|
inputLabel: { fontSize: 14, color: colors.textPrimary },
|
|
inputBox: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: colors.pageBg,
|
|
borderRadius: 10,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 8,
|
|
},
|
|
input: {
|
|
minWidth: 80,
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
textAlign: 'right',
|
|
},
|
|
inputSuffix: { fontSize: 13, color: colors.textSecondary, marginLeft: 4 },
|
|
selectBox: { flexDirection: 'row', alignItems: 'center' },
|
|
selectValue: { fontSize: 15, fontWeight: '600', color: colors.textPrimary, marginRight: 4 },
|
|
resultCard: {
|
|
borderRadius: 16,
|
|
padding: 24,
|
|
alignItems: 'center',
|
|
marginBottom: 12,
|
|
},
|
|
resultLabel: { fontSize: 14, color: colors.textInverse, opacity: 0.9 },
|
|
resultValue: { fontSize: 42, fontWeight: '800', color: colors.textInverse, marginTop: 8 },
|
|
resultUnit: { fontSize: 14, color: colors.textInverse, opacity: 0.9, marginTop: 2 },
|
|
cardSubTitleRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
marginBottom: 10,
|
|
},
|
|
cardSubTitle: { fontSize: 12, color: colors.textHint },
|
|
insuranceRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 10,
|
|
},
|
|
insuranceLabel: { flex: 1, fontSize: 14, color: colors.textPrimary },
|
|
insuranceAmount: { width: 80, fontSize: 14, fontWeight: '700', color: colors.textPrimary, textAlign: 'right' },
|
|
insuranceRate: { width: 60, fontSize: 13, color: colors.textSecondary, textAlign: 'right' },
|
|
divider: { height: 1, backgroundColor: colors.borderLight, marginVertical: 10 },
|
|
totalRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
|
totalLabel: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
|
|
totalAmount: { fontSize: 18, fontWeight: '800', color: colors.primary },
|
|
taxGrid: { flexDirection: 'row', gap: 12, marginBottom: 10 },
|
|
taxItem: {
|
|
flex: 1,
|
|
backgroundColor: colors.pageBg,
|
|
borderRadius: 10,
|
|
padding: 12,
|
|
},
|
|
taxItemLabel: { fontSize: 12, color: colors.textSecondary, marginBottom: 6 },
|
|
taxItemValue: { fontSize: 18, fontWeight: '800', color: colors.textPrimary },
|
|
taxRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 8,
|
|
},
|
|
taxRowLabel: { fontSize: 14, color: colors.textPrimary },
|
|
taxRowValue: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
|
|
structureChart: { flexDirection: 'row', alignItems: 'center' },
|
|
pie: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 50,
|
|
backgroundColor: colors.borderLight,
|
|
overflow: 'hidden',
|
|
},
|
|
pieSlice: {
|
|
position: 'absolute',
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 50,
|
|
},
|
|
structureLegend: { flex: 1, marginLeft: 20 },
|
|
legendRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 10 },
|
|
legendDot: { width: 10, height: 10, borderRadius: 5 },
|
|
legendLabel: { flex: 1, fontSize: 13, color: colors.textPrimary, marginLeft: 8 },
|
|
legendValue: { fontSize: 13, fontWeight: '700', color: colors.textPrimary, marginRight: 8 },
|
|
legendPercent: { width: 40, fontSize: 12, color: colors.textSecondary, textAlign: 'right' },
|
|
toolRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 12,
|
|
borderTopWidth: 1,
|
|
borderTopColor: colors.borderLight,
|
|
},
|
|
toolIcon: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 18,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
toolBody: { flex: 1, marginLeft: 12 },
|
|
toolTitle: { fontSize: 14, fontWeight: '700', color: colors.textPrimary },
|
|
toolDesc: { fontSize: 12, color: colors.textSecondary, marginTop: 2 },
|
|
saveBtn: {
|
|
backgroundColor: colors.primaryBtn,
|
|
borderRadius: 24,
|
|
paddingVertical: 14,
|
|
alignItems: 'center',
|
|
marginTop: 8,
|
|
},
|
|
saveBtnText: { fontSize: 16, fontWeight: '700', color: colors.white },
|
|
});
|
|
|