From a7df4fedfcaf372badb6486a8aa6f8561b0f9b84 Mon Sep 17 00:00:00 2001 From: freedakgmail Date: Tue, 18 Aug 2026 21:50:55 +0800 Subject: [PATCH] =?UTF-8?q?ui:=20=E4=BC=98=E5=8C=96=E7=89=B9=E6=AE=8A?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=8F=B0=E8=B4=A6=E9=A1=B5=E9=9D=A2UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 统计卡片：添加图标、圆角xl、左图标右数据布局 - 列表卡片：类型图标背景色、hover显示操作按钮、分隔线分区 - 日期字段：改用Field组件双列网格布局，关键日期accent高亮 - 提醒区域：圆点指示器+过期动画pulse+今天到期文案 - 员工信息：独立分区带底部分隔线 --- frontend/src/pages/SpecialStatus.tsx | 198 ++++++++++++++++----------- 1 file changed, 121 insertions(+), 77 deletions(-) diff --git a/frontend/src/pages/SpecialStatus.tsx b/frontend/src/pages/SpecialStatus.tsx index d25efd8..37c267b 100644 --- a/frontend/src/pages/SpecialStatus.tsx +++ b/frontend/src/pages/SpecialStatus.tsx @@ -84,10 +84,17 @@ const STATUS_COLORS: Record = { RESOLVED: 'bg-gray-100 text-gray-500', } -const ALERT_STYLES: Record = { - red: { border: 'border-l-4 border-l-red-500', badge: 'bg-red-100 text-red-700', text: 'text-red-600' }, - yellow: { border: 'border-l-4 border-l-amber-500', badge: 'bg-amber-100 text-amber-700', text: 'text-amber-600' }, - green: { border: 'border-l-4 border-l-emerald-500', badge: 'bg-emerald-100 text-emerald-700', text: 'text-emerald-600' }, +const ALERT_STYLES: Record = { + red: { border: 'border-l-4 border-l-red-500', badge: 'bg-red-100 text-red-700', text: 'text-red-600', bg: 'bg-red-50', dot: 'bg-red-500' }, + yellow: { border: 'border-l-4 border-l-amber-500', badge: 'bg-amber-100 text-amber-700', text: 'text-amber-600', bg: 'bg-amber-50', dot: 'bg-amber-500' }, + green: { border: 'border-l-4 border-l-emerald-500', badge: 'bg-emerald-100 text-emerald-700', text: 'text-emerald-600', bg: 'bg-emerald-50', dot: 'bg-emerald-500' }, +} + +const TYPE_ICON_BG: Record = { + PREGNANCY: 'bg-pink-100 text-pink-600', + WORK_INJURY: 'bg-red-100 text-red-600', + MEDICAL_PERIOD: 'bg-orange-100 text-orange-600', + OTHER: 'bg-gray-100 text-gray-600', } function formatDate(d: string | null): string { @@ -260,32 +267,59 @@ export default function SpecialStatus() { {/* 统计卡片 */} {stats && ( -
-
-
总记录
-
{stats.total}
+
+
+
+ +
+
+
总记录
+
{stats.total}
+
-
-
进行中
-
{stats.active}
+
+
+ +
+
+
进行中
+
{stats.active}
+
-
-
待处理
-
{stats.pending}
+
+
+ +
+
+
待处理
+
{stats.pending}
+
-
-
紧急提醒
-
{stats.redAlert}
+
+
+ +
+
+
紧急提醒
+
{stats.redAlert}
+
-
-
即将到期
-
{stats.yellowAlert}
+
+
+ +
+
+
即将到期
+
{stats.yellowAlert}
+
-
-
类型分布
-
+
+
类型分布
+
{stats.byType.map((t) => ( - {t.label}: {t.count} + + {t.label}{t.count} + ))}
@@ -338,85 +372,94 @@ export default function SpecialStatus() { const Icon = TYPE_ICONS[item.type] || AlertTriangle const alert = ALERT_STYLES[item.alertLevel] || ALERT_STYLES.green const reminderDays = daysUntil(item.reminderDate) + const isOverdue = reminderDays !== null && reminderDays < 0 return ( -
- {/* 头部 */} +
+ {/* 头部：类型图标 + 状态 + 操作 */}
-
- - - {TYPE_LABELS[item.type] || item.type} - - - {STATUS_LABELS[item.status] || item.status} - +
+
+ +
+
+ + {TYPE_LABELS[item.type] || item.type} + + + {STATUS_LABELS[item.status] || item.status} + +
-
- +
+ - -
{/* 员工信息 */} -
- {item.employee.name} - {item.employee.idCardNumber && {item.employee.idCardNumber}} - {item.employee.department} - {item.employee.status === 'RESIGNED' && ( - 已离职 - )} +
+
+ {item.employee.name} + {item.employee.idCardNumber && {item.employee.idCardNumber}} + {item.employee.status === 'RESIGNED' && ( + 已离职 + )} +
+
{item.employee.department}
{/* 关键日期 */} -
+
{item.type === 'PREGNANCY' && ( - <> - {item.expectedDueDate && } - {item.maternityLeaveStart && } - {item.maternityLeaveEnd && } - {item.nursingEndDate && } - +
+ {item.expectedDueDate && } + {item.maternityLeaveStart && } + {item.maternityLeaveEnd && } + {item.nursingEndDate && } +
)} {item.type === 'WORK_INJURY' && ( - <> - {item.injuryDate && } - {item.injuryDescription && } +
+ {item.injuryDate && } + {item.injuryDescription && } {item.certificationDate ? ( - + ) : ( - + )} - {item.assessmentDate && } - {item.disabilityLevel && } - +
+ {item.assessmentDate && } + {item.disabilityLevel && } +
+
)} {item.type === 'MEDICAL_PERIOD' && ( - <> - {item.startDate && } - {item.medicalMonths && } - {item.medicalPeriodEnd && } - +
+ {item.startDate && } + {item.medicalMonths && } + {item.medicalPeriodEnd && } +
)} {item.type === 'OTHER' && ( - <> - {item.startDate && } - {item.endDate && } - +
+ {item.startDate && } + {item.endDate && } +
)}
{/* 提醒 */} {item.status === 'ACTIVE' && reminderDays !== null && ( -
- - {reminderDays < 0 ? `已过期 ${Math.abs(reminderDays)} 天` : `距提醒日还有 ${reminderDays} 天`} +
+
+ {isOverdue ? `已过期 ${Math.abs(reminderDays)} 天` : reminderDays === 0 ? '今天到期' : `距提醒日还有 ${reminderDays} 天`}
)} {item.description && ( @@ -634,12 +677,13 @@ export default function SpecialStatus() { ) } -/** 信息行组件 */ -function Row({ label, value, valueClass }: { label: string; value: string; valueClass?: string }) { +/** 信息字段组件 */ +function Field({ label, value, valueClass, accent, fullWidth }: { label: string; value: string; valueClass?: string; accent?: 'pink' | 'red' | 'orange'; fullWidth?: boolean }) { + const accentColor = accent === 'pink' ? 'text-pink-600' : accent === 'red' ? 'text-red-600' : accent === 'orange' ? 'text-orange-600' : 'text-gray-400' return ( -
- {label} - {value} +
+
{label}
+
{value}
) }