freedak/TurboHR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 统一页面布局与字体样式

Browse Source
This commit is contained in:
selfrelease
2026-07-24 17:30:36 +08:00
parent 4ae24990a7
commit a28b065ab8
25 changed files with 2032 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/SocialInsurance.tsx
+37 -31
View File
@@ -232,7 +232,13 @@ export default function SocialInsurance() {
return (
<div className="space-y-3">
<div className="flex items-center justify-between">
<h1 className="text-xs font-medium">社保公积金</h1>
<div className="flex items-center gap-2">
<Calculator className="h-5 w-5 text-primary" />
<div>
<h1 className="text-base font-semibold">社保公积金</h1>
<p className="mt-1 text-sm text-gray-500">维护社保与公积金缴费基数、版本及月度记录</p>
</div>
</div>
<div className="flex gap-2">
{tab !== 'monthly' && (
<>
@@ -253,7 +259,7 @@ export default function SocialInsurance() {
{(['social', 'housing', 'monthly'] as const).map((t) => (
<button
key={t}
className={`px-4 py-2 text-xs font-medium border-b-2 transition-colors ${
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
tab === t ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'
}`}
onClick={() => { setTab(t); setShowVersions(false); setShowNewVersion(false); setShowAdjust(false); setAdjustData(null); setEditItems({}); setEditingId(null) }}
@@ -262,9 +268,9 @@ export default function SocialInsurance() {
</button>
))}
<div className="flex items-center gap-2 ml-auto">
<label className="text-xs text-gray-500">城市:</label>
<label className="text-sm text-gray-500">城市:</label>
<select
className="text-xs border rounded px-2 py-1.5"
className="h-9 rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-700 shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
value={city}
onChange={(e) => setCity(e.target.value)}
>
@@ -286,8 +292,8 @@ export default function SocialInsurance() {
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<span className="px-2 py-0.5 rounded text-xs bg-green-50 text-safe">当前生效</span>
<span className="text-xs text-gray-500">生效月份：{activeConfig.effectiveFrom}</span>
<span className="text-xs text-gray-500">· {activeConfig.city}</span>
<span className="text-sm text-gray-500">生效月份：{activeConfig.effectiveFrom}</span>
<span className="text-sm text-gray-500">· {activeConfig.city}</span>
{activeConfig.adjustmentDone && (
<span className="px-2 py-0.5 rounded text-xs bg-gray-100 text-gray-500">已调整员工基数</span>
)}
@@ -320,14 +326,14 @@ export default function SocialInsurance() {
</div>
</div>
{isHousing ? (
<div className="grid md:grid-cols-4 gap-3 text-xs">
<div className="grid md:grid-cols-4 gap-3 text-sm">
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">缴费基数下限</span><span className="font-medium">¥{fmt(activeConfig.baseMin)}</span></div>
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">缴费基数上限</span><span className="font-medium">¥{fmt(activeConfig.baseMax)}</span></div>
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">公积金(企业)</span><span className="font-medium">{activeConfig.housingOrg}%</span></div>
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">公积金(个人)</span><span className="font-medium">{activeConfig.housingEmp}%</span></div>
</div>
) : (
<div className="grid md:grid-cols-4 gap-3 text-xs">
<div className="grid md:grid-cols-4 gap-3 text-sm">
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">缴费基数下限</span><span className="font-medium">¥{fmt(activeConfig.baseMin)}</span></div>
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">缴费基数上限</span><span className="font-medium">¥{fmt(activeConfig.baseMax)}</span></div>
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">养老(企业/个人)</span><span className="font-medium">{activeConfig.pensionOrg}% / {activeConfig.pensionEmp}%</span></div>
@@ -346,7 +352,7 @@ export default function SocialInsurance() {
{/* 调整预览 */}
{tab !== 'monthly' && showAdjust && adjustData && (
<Card>
<h3 className="text-xs font-medium mb-3 flex items-center gap-2">
<h3 className="text-sm font-medium mb-3 flex items-center gap-2">
<SettingsIcon className="w-4 h-4" />员工{isHousing ? '公积金' : '社保'}基数调整
</h3>
<div className="bg-blue-50 text-blue-700 text-xs px-3 py-2 rounded-md flex items-start gap-2 mb-3">
@@ -374,9 +380,9 @@ export default function SocialInsurance() {
<span className="text-xs text-gray-400">共 {adjustData.total} 名员工</span>
</div>
<div className="overflow-x-auto mb-4">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">姓名</th>
<th className="py-2 text-left">部门</th>
<th className="py-2 text-right">上年月均</th>
@@ -437,9 +443,9 @@ export default function SocialInsurance() {
<div className="text-center py-4 text-gray-400 text-xs">暂无版本记录</div>
) : (
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">生效月份</th>
<th className="py-2 text-left">失效月份</th>
<th className="py-2 text-left">城市</th>
@@ -530,7 +536,7 @@ export default function SocialInsurance() {
{tab !== 'monthly' && (
<div className="grid md:grid-cols-2 gap-4">
<Card>
<h2 className="text-xs font-medium mb-3">{isHousing ? '公积金' : '社保'}试算</h2>
<h2 className="text-sm font-medium mb-3">{isHousing ? '公积金' : '社保'}试算</h2>
<div className="space-y-3">
<div>
<Label>缴费基数（月工资）</Label>
@@ -541,7 +547,7 @@ export default function SocialInsurance() {
{(isHousing ? housingCalcPending : isPending) ? '计算中...' : '开始计算'}
</Button>
{activeConfig && (
<div className="text-xs text-gray-400">
<div className="text-sm text-gray-400">
当前配置：{activeConfig.city} | 基数范围 {fmt(activeConfig.baseMin)}~{fmt(activeConfig.baseMax)}
</div>
)}
@@ -549,22 +555,22 @@ export default function SocialInsurance() {
</Card>
<Card>
<h2 className="text-xs font-medium mb-3 flex items-center gap-2"><Calculator className="w-4 h-4" />计算结果</h2>
<h2 className="text-sm font-medium mb-3 flex items-center gap-2"><Calculator className="w-4 h-4" />计算结果</h2>
{(() => {
const r = isHousing ? housingResult : result
if (!r) return <div className="text-gray-400 text-xs">点击「开始计算」查看结果</div>
if (!r) return <div className="text-gray-400 text-sm">点击「开始计算」查看结果</div>
return (
<div className="space-y-3">
<div className="text-xs text-gray-500">
<div className="text-sm text-gray-500">
缴费基数：<span className="text-gray-900 font-medium">¥{fmt(r.actualBase)}</span>
{r.capped && <span className="text-warning ml-2">（已封顶）</span>}
{r.floored && <span className="text-warning ml-2">（已保底）</span>}
{r.configVersion && <span className="text-gray-400 ml-2">| 配置版本：{r.configVersion}</span>}
</div>
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-left text-gray-500">
<tr className="border-b text-left text-xs text-gray-500">
<th className="py-1.5">险种</th>
<th className="py-1.5 text-right">企业%</th>
<th className="py-1.5 text-right">个人%</th>
@@ -612,7 +618,7 @@ export default function SocialInsurance() {
{tab === 'monthly' && (
<Card>
<div className="flex items-center justify-between mb-3">
<h2 className="text-xs font-medium">月度办理</h2>
<h2 className="text-sm font-medium">月度办理</h2>
<div className="flex items-center gap-2">
<Input type="month" value={monthlyMonth} onChange={(e) => setMonthlyMonth(e.target.value)} className="!w-32" />
<Button variant="secondary" size="sm" onClick={() => monthlyChanges && handleExportCSV('social', monthlyChanges.social)}>
@@ -623,11 +629,11 @@ export default function SocialInsurance() {
</Button>
</div>
</div>
<div className="bg-blue-50 text-blue-700 text-xs px-3 py-2 rounded-md mb-3">
<div className="bg-blue-50 text-blue-700 text-sm px-3 py-2 rounded-md mb-3">
展示当月社保/公积金新增（入职/重新入职）、减少（离职/解聘）及正常在保人员列表，用于经办机构申报。
</div>
{(() => {
if (!monthlyChanges) return <div className="text-center py-4 text-gray-400 text-xs">加载中...</div>
if (!monthlyChanges) return <div className="text-center py-4 text-gray-400 text-sm">加载中...</div>
const sAdd = monthlyChanges.social?.additions || []
const sSub = monthlyChanges.social?.subtractions || []
const sNormal = monthlyChanges.socialActive?.items || []
@@ -635,17 +641,17 @@ export default function SocialInsurance() {
const hSub = monthlyChanges.housing?.subtractions || []
const hNormal = monthlyChanges.housingActive?.items || []
if (sAdd.length === 0 && sSub.length === 0 && hAdd.length === 0 && hSub.length === 0 && sNormal.length === 0 && hNormal.length === 0) {
return <div className="text-center py-4 text-gray-400 text-xs">{monthlyMonth} 无办理记录</div>
return <div className="text-center py-4 text-gray-400 text-sm">{monthlyMonth} 无办理记录</div>
}
return (
<div className="space-y-4">
{/* 社保 */}
<div>
<h3 className="text-xs font-medium mb-2">社保</h3>
<h3 className="text-sm font-medium mb-2">社保</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">姓名</th>
<th className="py-2 text-left">部门</th>
<th className="py-2 text-left">类型</th>
@@ -691,11 +697,11 @@ export default function SocialInsurance() {
</div>
{/* 公积金 */}
<div>
<h3 className="text-xs font-medium mb-2">公积金</h3>
<h3 className="text-sm font-medium mb-2">公积金</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">姓名</th>
<th className="py-2 text-left">部门</th>
<th className="py-2 text-left">类型</th>
@@ -745,7 +751,7 @@ export default function SocialInsurance() {
</Card>
)}
<p className="text-xs text-gray-400">
<p className="text-sm text-gray-400">
社保/公积金基数按上年度月均工资核定，每人不同，在员工基本信息中设置。比例和基数上下限按版本管理，通常每年7月调整。
发薪批次计算时按批次月份自动匹配对应版本配置。
</p>