feat: 社保公积金版本管理 + 员工基数调整 + 加班费计算优化 + UI组件改进

- SocialInsuranceConfig 版本化（effectiveFrom/effectiveTo/isCurrent/adjustmentDone）
- 社保配置版本管理接口（列表/新建/按月获取/当前版本）
- 员工基数调整：预览全部在职员工、上年月均工资计算建议基数、可编辑表格、确认后批量保存
- payroll.service 按批次月份匹配对应版本社保配置
- risk.service / seed.ts 同步更新
- 前端社保tab重构为版本管理+调整+试算
- 加班费计算三步流程、CSV导入、批次导入
- UI组件、Dashboard、合同、薪酬等页面优化

frontend/src/components/ui/Button.tsx

@@ -15,9 +15,9 @@ export default function Button({ variant = 'primary', size = 'md', className, ch
           'bg-primary text-white hover:bg-primary-dark': variant === 'primary',
           'bg-gray-100 text-gray-700 hover:bg-gray-200': variant === 'secondary',
           'bg-danger text-white hover:bg-red-700': variant === 'danger',
-          'px-3 py-1.5 text-sm': size === 'sm',
-          'px-4 py-2 text-sm': size === 'md',
-          'px-6 py-3 text-base': size === 'lg',
+          'px-2.5 py-1 text-xs': size === 'sm',
+          'px-3 py-1.5 text-xs': size === 'md',
+          'px-5 py-2 text-sm': size === 'lg',
         },
         className,
       )}

frontend/src/components/ui/Card.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx'
 
 export default function Card({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={clsx('bg-white rounded-lg shadow-sm border border-gray-200 p-4', className)} {...props}>
+    <div className={clsx('bg-white rounded-lg shadow-sm border border-gray-200 p-3', className)} {...props}>
       {children}
     </div>
   )

frontend/src/components/ui/EmptyState.tsx

@@ -12,12 +12,12 @@ interface EmptyStateProps {
 
 export default function EmptyState({ icon, title, description, actionLabel, onAction }: EmptyStateProps) {
   return (
-    <div className="flex flex-col items-center justify-center py-16 text-center">
-      <div className="text-gray-300 mb-4">
-        {icon || <Inbox className="w-12 h-12" />}
+    <div className="flex flex-col items-center justify-center py-10 text-center">
+      <div className="text-gray-300 mb-3">
+        {icon || <Inbox className="w-10 h-10" />}
       </div>
-      <h3 className="text-base font-medium text-gray-900 mb-1">{title}</h3>
-      {description && <p className="text-sm text-gray-500 mb-4">{description}</p>}
+      <h3 className="text-sm font-medium text-gray-900 mb-1">{title}</h3>
+      {description && <p className="text-xs text-gray-500 mb-3">{description}</p>}
       {actionLabel && onAction && (
         <Button onClick={onAction}>{actionLabel}</Button>
       )}

frontend/src/components/ui/Input.tsx

@@ -7,7 +7,7 @@ export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputE
       <input
         ref={ref}
         className={clsx(
-          'w-full px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm',
+          'w-full px-2.5 py-1.5 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-xs',
           className,
         )}
         {...props}
@@ -22,7 +22,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectHTMLAttributes<HTMLSel
       <select
         ref={ref}
         className={clsx(
-          'w-full px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm bg-white',
+          'w-full px-2.5 py-1.5 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-xs bg-white',
           className,
         )}
         {...props}
@@ -34,5 +34,5 @@ export const Select = forwardRef<HTMLSelectElement, SelectHTMLAttributes<HTMLSel
 )
 
 export function Label({ children, className }: { children: React.ReactNode; className?: string }) {
-  return <label className={clsx('block text-sm font-medium text-gray-700 mb-1', className)}>{children}</label>
+  return <label className={clsx('block text-xs font-medium text-gray-700 mb-0.5', className)}>{children}</label>
 }

frontend/src/components/ui/Modal.tsx

@@ -29,14 +29,14 @@ export default function Modal({ open, onClose, title, children, className }: Mod
       <div className="fixed inset-0 bg-black/40" onClick={onClose} />
       <div className={clsx('relative bg-white rounded-lg shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto', className)}>
         {title && (
-          <div className="flex items-center justify-between px-5 py-3 border-b border-gray-200">
-            <h3 className="font-medium text-gray-900">{title}</h3>
+          <div className="flex items-center justify-between px-4 py-2.5 border-b border-gray-200">
+            <h3 className="font-medium text-gray-900 text-sm">{title}</h3>
             <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
-              <X className="w-5 h-5" />
+              <X className="w-4 h-4" />
             </button>
           </div>
         )}
-        <div className="p-5">{children}</div>
+        <div className="p-4">{children}</div>
       </div>
     </div>
   )