From 81e1cd0f72118a27bf446238793016441dab45e5 Mon Sep 17 00:00:00 2001
From: selfrelease <freedak.ipad@gmail.com>
Date: Sat, 15 Aug 2026 15:14:13 +0800
Subject: [PATCH] =?UTF-8?q?ux:=20=E8=8A=B1=E5=90=8D=E5=86=8C=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E4=B8=A4=E8=A1=8C=E8=AE=B0=E5=BD=95=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 姓名列：姓名加粗深色 + 证件号码淡灰小字，紧凑行间距
- 社保缴费列：个人/企业改为右对齐标签式，字号区分主次
- 操作列：两行按钮间增加分隔线，按钮间距收紧
- 全行 padding 从 py-3 调整为 py-2.5，行高更紧凑
- 行间分隔线变淡（gray-100 → gray-50），hover 效果加 group

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 frontend/src/pages/Roster.tsx | 66 ++++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/frontend/src/pages/Roster.tsx b/frontend/src/pages/Roster.tsx
index 97e5439..0bf5d40 100644
--- a/frontend/src/pages/Roster.tsx
+++ b/frontend/src/pages/Roster.tsx
@@ -674,23 +674,25 @@ export default function Roster() {
                 {employees.map((e: any) => (
                   <tr
                     key={e.id}
-                    className="border-b border-gray-100 last:border-0 cursor-pointer transition-colors hover:bg-primary/[0.03]"
+                    className="border-b border-gray-50 last:border-0 cursor-pointer transition-colors hover:bg-primary/[0.03] group"
                     onClick={() => setSelectedId(e.id)}
                   >
-                    <td className="px-4 py-3" onClick={(ev) => ev.stopPropagation()}>
+                    <td className="px-4 py-2.5" onClick={(ev) => ev.stopPropagation()}>
                       <input type="checkbox" checked={selectedIds.has(e.id)} onChange={() => toggleSelect(e.id)} />
                     </td>
-                    <td className="px-4 py-3 font-medium">
-                      <div>{e.name}</div>
-                      <div className="text-gray-400 text-xs font-mono cursor-pointer hover:text-primary transition-colors" title="点击复制完整证件号码" onClick={(ev) => {
-                        ev.stopPropagation()
-                        if (e.idCardNumber) {
-                          copyToClipboard(e.idCardNumber, '已复制证件号码')
-                        }
-                      }}>{e.idCardMasked || '—'}</div>
+                    <td className="px-4 py-2.5">
+                      <div className="flex flex-col gap-0.5">
+                        <span className="font-medium text-gray-900 text-sm leading-tight">{e.name}</span>
+                        <span className="text-gray-400 text-[11px] font-mono cursor-pointer hover:text-primary transition-colors leading-tight" title="点击复制完整证件号码" onClick={(ev) => {
+                          ev.stopPropagation()
+                          if (e.idCardNumber) {
+                            copyToClipboard(e.idCardNumber, '已复制证件号码')
+                          }
+                        }}>{e.idCardMasked || '—'}</span>
+                      </div>
                     </td>
-                    {colVisible('department') && <td className="px-4 py-3 text-gray-500">{e.department}</td>}
-                    {colVisible('status') && <td className="px-4 py-3">
+                    {colVisible('department') && <td className="px-4 py-2.5 text-gray-500">{e.department}</td>}
+                    {colVisible('status') && <td className="px-4 py-2.5">
                       <span className={`px-2 py-0.5 rounded text-xs ${
                         e.status === 'ACTIVE' ? 'bg-green-50 text-safe'
                         : e.status === 'PRE_HIRE' ? 'bg-blue-50 text-blue-600'
@@ -708,8 +710,8 @@ export default function Roster() {
                         </span>
                       )}
                     </td>}
-                    {colVisible('hireDate') && <td className="px-4 py-3 text-gray-500">{e.hireDate?.toString().slice(0, 10)}</td>}
-                    <td className="hidden px-4 py-3 text-gray-500">
+                    {colVisible('hireDate') && <td className="px-4 py-2.5 text-gray-500">{e.hireDate?.toString().slice(0, 10)}</td>}
+                    <td className="hidden px-4 py-2.5 text-gray-500">
                       {e.hasTermination && e.latestTerminationDate && e.latestTerminationStatus !== 'CANCELLED' && e.latestTerminationStatus !== 'COMPLETED' ? (
                         <span className={e.status === 'RESIGNED' ? 'text-gray-500' : 'text-amber-600'}>
                           {e.latestTerminationDate.toString().slice(0, 10)}
@@ -719,10 +721,10 @@ export default function Roster() {
                         <span className="text-gray-300">—</span>
                       )}
                     </td>
-                    {colVisible('position') && <td className="px-4 py-3 text-gray-500">{e.position || '—'}</td>}
-                    {colVisible('phone') && <td className="px-4 py-3 text-gray-500">{e.phone || '—'}</td>}
-                    {colVisible('gender') && <td className="px-4 py-3 text-center text-gray-500">{e.gender || '—'}</td>}
-                    {colVisible('contractType') && <td className="px-4 py-3">
+                    {colVisible('position') && <td className="px-4 py-2.5 text-gray-500">{e.position || '—'}</td>}
+                    {colVisible('phone') && <td className="px-4 py-2.5 text-gray-500">{e.phone || '—'}</td>}
+                    {colVisible('gender') && <td className="px-4 py-2.5 text-center text-gray-500">{e.gender || '—'}</td>}
+                    {colVisible('contractType') && <td className="px-4 py-2.5">
                       {(() => {
                         const typeConfig: Record<string, { label: string; style: string }> = {
                           FIXED: { label: '劳动合同-固定期', style: 'bg-blue-50 text-blue-700 border border-blue-200' },
@@ -739,7 +741,7 @@ export default function Roster() {
                         return <span className={`px-2 py-0.5 rounded text-xs ${cfg.style}`}>{cfg.label}</span>
                       })()}
                     </td>}
-                    {colVisible('contractStatus') && <td className="px-4 py-3">
+                    {colVisible('contractStatus') && <td className="px-4 py-2.5">
                       {(() => {
                         const tagStyles: Record<string, string> = {
                           expired: 'bg-red-50 text-danger',
@@ -764,7 +766,7 @@ export default function Roster() {
                         return <span className={`px-2 py-0.5 rounded text-xs ${style}`}>{text}</span>
                       })()}
                     </td>}
-                    {colVisible('contractExpiry') && <td className="px-4 py-3 text-gray-500">
+                    {colVisible('contractExpiry') && <td className="px-4 py-2.5 text-gray-500">
                       {(() => {
                         const endDate = e.latestContract?.endDate
                         if (!endDate) {
@@ -784,7 +786,7 @@ export default function Roster() {
                         return <span className="text-xs">{dateStr}</span>
                       })()}
                     </td>}
-                    {colVisible('socialStatus') && <td className="px-4 py-3">
+                    {colVisible('socialStatus') && <td className="px-4 py-2.5">
                       {(() => {
                         const status = e.socialInsuranceStatus
                         if (!status) return <span className="text-gray-300 text-xs">—</span>
@@ -798,12 +800,12 @@ export default function Roster() {
                         return <span className={`px-2 py-0.5 rounded text-xs ${c.style}`}>{c.label}</span>
                       })()}
                     </td>}
-                    {colVisible('socialInsBase') && <td className="px-4 py-3 text-right text-xs">
+                    {colVisible('socialInsBase') && <td className="px-4 py-2.5 text-right text-xs">
                       {e.socialInsBase ? e.socialInsBase.toLocaleString() : <span className="text-gray-300">—</span>}
                     </td>}
-                    {colVisible('socialInsAmount') && <td className="px-4 py-3 text-right text-xs">
+                    {colVisible('socialInsAmount') && <td className="px-4 py-2.5 text-right">
                       {(() => {
-                        if (!e.socialInsCalc && !e.housingFundCalc) return <span className="text-gray-300">—</span>
+                        if (!e.socialInsCalc && !e.housingFundCalc) return <span className="text-gray-300 text-xs">—</span>
                         const socialEmp = e.socialInsCalc?.socialEmp || 0
                         const socialOrg = e.socialInsCalc?.socialOrg || 0
                         const housingEmp = e.housingFundCalc?.housingEmp || 0
@@ -811,14 +813,14 @@ export default function Roster() {
                         const totalEmp = socialEmp + housingEmp
                         const totalOrg = socialOrg + housingOrg
                         return (
-                          <div className="flex flex-col">
-                            <span>个人: {totalEmp.toFixed(2)}</span>
-                            <span className="text-gray-400">企业: {totalOrg.toFixed(2)}</span>
+                          <div className="flex flex-col gap-0.5 items-end">
+                            <span className="text-xs text-gray-700 leading-tight">个人 {totalEmp.toFixed(2)}</span>
+                            <span className="text-[11px] text-gray-400 leading-tight">企业 {totalOrg.toFixed(2)}</span>
                           </div>
                         )
                       })()}
                     </td>}
-                    {colVisible('records') && <td className="px-4 py-3 text-center">
+                    {colVisible('records') && <td className="px-4 py-2.5 text-center">
                       <div className="flex items-center justify-center gap-1 flex-wrap">
                         {(() => {
                           const items = [
@@ -839,10 +841,10 @@ export default function Roster() {
                         })()}
                       </div>
                     </td>}
-                    <td className="px-4 py-3 text-center">
+                    <td className="px-3 py-2 text-center">
                       {e.status === 'ACTIVE' && (!e.hasTermination || e.latestTerminationStatus === 'CANCELLED' || e.latestTerminationStatus === 'COMPLETED') && (
-                        <div className="flex flex-col items-center gap-1">
-                          <div className="flex items-center justify-center gap-1">
+                        <div className="flex flex-col items-center gap-1.5">
+                          <div className="flex items-center justify-center gap-0.5">
                             <button
                               type="button"
                               title="调薪"
@@ -886,7 +888,7 @@ export default function Roster() {
                               <Building2 className="h-4 w-4" />
                             </button>
                           </div>
-                          <div className="flex items-center justify-center gap-1">
+                          <div className="flex items-center justify-center gap-0.5 border-t border-gray-100 pt-1.5">
                             <button
                               type="button"
                               title="开具证明"