feat: 系统优化Phase2 - 面包屑导航/侧边栏间距/制度公示阅读签收/模板变量中文化/通知类型补全

- 面包屑导航组件，集成至TopNav header
- 侧边栏菜单分组间距增大，分组间分隔线
- 制度公示员工阅读签收：PolicyReadRecord模型、portal路由、管理端阅读统计
- 修复Policies.tsx民主程序推进bug（字段名/API路径/参数）
- 用工文本模板变量名英文转中文显示
- 通知类型TYPE_LABELS补全(RISK_ALERT/SOCIAL_INS/OVERTIME_ALERT/PAYSLIP_READY)
- 通知示例数据补充
- h2标题统一为text-sm font-medium
- 新增run.md

frontend/src/pages/roster/BasicInfo.tsx

@@ -0,0 +1,395 @@
+import { QRCodeSVG } from "qrcode.react"
+import { useUnsavedChanges } from "../../hooks/useUnsavedChanges"
+import { useState, useRef } from "react"
+import { toast } from "sonner"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import api from "../../lib/api"
+import Card from "../../components/ui/Card"
+import Button from "../../components/ui/Button"
+import { Input, Label, Select } from "../../components/ui/Input"
+import Modal from "../../components/ui/Modal"
+import { Users, FileText, AlertTriangle, Calendar, GraduationCap, TrendingUp, Scale, X, Plus, Paperclip, Trash2, Printer, Calculator, Shield, Info, Check, Eye, Download, UserX, UserPlus, Briefcase, FileSignature, DollarSign, Building2, RotateCcw, History } from "lucide-react"
+import { fmt } from "./shared"
+
+export default function BasicInfo({ profile, employeeId, attachments }: { profile: any; employeeId: string; attachments: any[] }) {
+  const queryClient = useQueryClient()
+  const [editing, setEditing] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [fileType, setFileType] = useState<'ID_CARD' | 'BANK_CARD' | 'EDUCATION' | 'OTHER'>('ID_CARD')
+
+  const addAttachmentMutation = useMutation({
+    mutationFn: (data: any) => api.post('/attachments', data),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['roster-profile', employeeId] }),
+  })
+
+  const deleteAttachmentMutation = useMutation({
+    mutationFn: (id: string) => api.delete(`/attachments/${id}`),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['roster-profile', employeeId] }),
+  })
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png', 'image/heic']
+    const allowedExts = ['.pdf', '.jpg', '.jpeg', '.png', '.heic']
+    const ext = file.name.toLowerCase().substring(file.name.lastIndexOf('.'))
+    if (!allowedTypes.includes(file.type) && !allowedExts.includes(ext)) {
+      toast.error('不支持的文件格式，请上传 PDF、JPG、PNG 或 HEIC 格式')
+      return
+    }
+    if (file.size > 10 * 1024 * 1024) {
+      toast.error('文件过大，请上传小于 10MB 的文件')
+      return
+    }
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      const fileUrl = event.target?.result as string
+      addAttachmentMutation.mutate({ employeeId, fileName: file.name, fileType, fileUrl, fileSize: file.size })
+    }
+    reader.readAsDataURL(file)
+  }
+
+  const fileTypeLabels: Record<string, string> = { ID_CARD: '身份证', BANK_CARD: '银行卡', EDUCATION: '学历证书', OTHER: '其他' }
+  const fileTypeColors: Record<string, string> = { ID_CARD: 'bg-blue-50 text-blue-600', BANK_CARD: 'bg-green-50 text-safe', EDUCATION: 'bg-amber-50 text-amber-600', OTHER: 'bg-gray-100 text-gray-500' }
+  const formatSize = (bytes: number) => {
+    if (!bytes) return '-'
+    if (bytes < 1024) return `${bytes}B`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`
+    return `${(bytes / 1024 / 1024).toFixed(1)}MB`
+  }
+
+  const [form, setForm] = useState({
+    department: profile.department || '',
+    gender: profile.gender || '男',
+    femaleWorkerType: profile.femaleWorkerType || '',
+    phone: profile.phone || '',
+    hireDate: profile.hireDate?.toString().slice(0, 10) || '',
+    monthlySalary: profile.monthlySalary || '',
+    emergencyContact: profile.emergencyContact || '',
+    emergencyPhone: profile.emergencyPhone || '',
+    address: profile.address || '',
+    bankName: profile.bankName || '',
+    bankAccount: profile.bankAccount || '',
+    isPregnant: profile.isPregnant || false,
+    isInMedicalPeriod: profile.isInMedicalPeriod || false,
+    isWorkInjured: profile.isWorkInjured || false,
+    socialInsBase: profile.socialInsBase ?? '',
+    housingFundBase: profile.housingFundBase ?? '',
+    specialDeduction: profile.specialDeduction ?? 0,
+    city: profile.city || '',
+    cityChangeReason: '',
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: (data: any) => api.put(`/employees/${profile.id}`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['roster-profile'] })
+      queryClient.invalidateQueries({ queryKey: ['roster'] })
+      setEditing(false)
+    },
+  })
+
+  const handleSave = () => {
+    if (form.city !== (profile.city || '') && !form.cityChangeReason.trim()) {
+      toast.error('参保城市变更必须填写变更原因')
+      return
+    }
+    const data: any = {
+      department: form.department,
+      gender: form.gender,
+      femaleWorkerType: form.femaleWorkerType || undefined,
+      phone: form.phone || undefined,
+      hireDate: new Date(form.hireDate).toISOString(),
+      monthlySalary: String(form.monthlySalary),
+      emergencyContact: form.emergencyContact || undefined,
+      emergencyPhone: form.emergencyPhone || undefined,
+      address: form.address || undefined,
+      bankName: form.bankName || undefined,
+      bankAccount: form.bankAccount || undefined,
+      isPregnant: form.isPregnant,
+      isInMedicalPeriod: form.isInMedicalPeriod,
+      isWorkInjured: form.isWorkInjured,
+      socialInsBase: form.socialInsBase === '' ? null : Number(form.socialInsBase),
+      housingFundBase: form.housingFundBase === '' ? null : Number(form.housingFundBase),
+      specialDeduction: Number(form.specialDeduction) || 0,
+      city: form.city || undefined,
+      cityChangeReason: form.city !== profile.city ? form.cityChangeReason || undefined : undefined,
+    }
+    updateMutation.mutate(data)
+  }
+
+  const personalFields = [
+    { label: '姓名', value: profile.name },
+    { label: '部门', value: profile.department },
+    { label: '性别', value: profile.gender || '未填写' },
+    ...(profile.gender === '女'
+      ? [{ label: '女性岗位', value: profile.femaleWorkerType === 'CADRE' ? '干部/管理岗' : profile.femaleWorkerType === 'WORKER' ? '工人/操作岗' : '未填写' }]
+      : []),
+    { label: '身份证号', value: profile.idCardNumber || '未填写' },
+    { label: '手机号', value: profile.phone || '未填写' },
+    { label: '入职日期', value: profile.hireDate?.toString().slice(0, 10) },
+    { label: '状态', value: profile.status === 'ACTIVE' ? '在职' : '离职' },
+    ...(profile.retirementDaysLeft != null
+      ? (() => {
+          if (profile.retirementDaysLeft <= 0) return [{ label: '距退休', value: '已到退休年龄' }]
+          if (profile.birthDate) {
+            const bd = new Date(profile.birthDate)
+            const gender = profile.gender || '男'
+            const fwt = profile.femaleWorkerType || null
+            const baseAge = gender === '男' ? 60 : (fwt === 'WORKER' ? 50 : 55)
+            const delayInterval = gender === '男' ? 4 : (fwt === 'WORKER' ? 2 : 4)
+            const maxDelay = gender === '男' ? 36 : (fwt === 'WORKER' ? 60 : 36)
+            const baseRetireDate = new Date(bd)
+            baseRetireDate.setFullYear(baseRetireDate.getFullYear() + baseAge)
+            const reformStart = new Date(2025, 0, 1)
+            const monthsSince = Math.max(0, (baseRetireDate.getFullYear() - reformStart.getFullYear()) * 12 + (baseRetireDate.getMonth() - reformStart.getMonth()))
+            const delayMonths = Math.min(maxDelay, Math.floor(monthsSince / delayInterval))
+            const retireDate = new Date(baseRetireDate)
+            retireDate.setMonth(retireDate.getMonth() + delayMonths)
+            return [{ label: '退休日期', value: `${retireDate.getFullYear()}年${retireDate.getMonth() + 1}月${retireDate.getDate()}日` }]
+          }
+          return [{ label: '距退休', value: `${profile.retirementDaysLeft}天` }]
+      })()
+      : []),
+    ...(profile.status !== 'ACTIVE' && profile.terminations && profile.terminations.length > 0
+      ? [{ label: '离职日期', value: profile.terminations
+          .map((t: any) => t.terminationDate?.toString().slice(0, 10))
+          .filter(Boolean)
+          .sort()
+          .reverse()[0] || '未记录' }]
+      : []),
+  ]
+  const salaryFields = [
+    { label: '月工资', value: `¥${fmt(profile.monthlySalary)}` },
+    { label: '紧急联系人', value: profile.emergencyContact || '未填写' },
+    { label: '紧急联系电话', value: profile.emergencyPhone || '未填写' },
+    { label: '住址', value: profile.address || '未填写' },
+    { label: '开户行', value: profile.bankName || '未填写' },
+    { label: '银行账号', value: profile.bankAccount || '未填写' },
+  ]
+  const special = [
+    { label: '孕期', value: profile.isPregnant },
+    { label: '医疗期', value: profile.isInMedicalPeriod },
+    { label: '工伤', value: profile.isWorkInjured },
+  ]
+  return (
+    <Card>
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-xs font-medium">基本信息</h2>
+        {!editing ? (
+          <Button size="sm" variant="secondary" onClick={() => setEditing(true)}>编辑</Button>
+        ) : (
+          <div className="flex gap-2">
+            <Button size="sm" onClick={handleSave} disabled={updateMutation.isPending}>
+              {updateMutation.isPending ? '保存中...' : '保存'}
+            </Button>
+            <Button size="sm" variant="secondary" onClick={() => setEditing(false)}>取消</Button>
+          </div>
+        )}
+      </div>
+      {!editing ? (
+        <div className="space-y-4">
+          <div>
+            <h3 className="text-xs font-medium text-gray-600 mb-2">个人信息</h3>
+            <div className="grid md:grid-cols-3 gap-x-6 gap-y-3">
+              {personalFields.map((f) => (
+                <div key={f.label} className="flex justify-between border-b pb-1.5 text-xs">
+                  <span className="text-gray-500 shrink-0">{f.label}</span>
+                  <span className="font-medium text-right truncate ml-2">{f.value}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="pt-3 border-t">
+            <h3 className="text-xs font-medium text-gray-600 mb-2">薪酬与银行</h3>
+            <div className="grid md:grid-cols-3 gap-x-6 gap-y-3">
+              {salaryFields.map((f) => (
+                <div key={f.label} className="flex justify-between border-b pb-1.5 text-xs">
+                  <span className="text-gray-500 shrink-0">{f.label}</span>
+                  <span className="font-medium text-right truncate ml-2">{f.value}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="grid md:grid-cols-2 gap-3">
+          <div><Label>姓名（不可编辑）</Label><Input value={profile.name} disabled /></div>
+          <div><Label>身份证号（不可编辑）</Label><Input value={profile.idCardNumber || ''} disabled /></div>
+          <div><Label>部门</Label><Input value={form.department} onChange={(e) => setForm({ ...form, department: e.target.value })} /></div>
+          <div><Label>性别</Label><Select value={form.gender} onChange={(e) => setForm({ ...form, gender: e.target.value as '男' | '女' })}><option value="男">男</option><option value="女">女</option></Select></div>
+          {form.gender === '女' && (
+            <div><Label>女性岗位类型</Label><Select value={form.femaleWorkerType} onChange={(e) => setForm({ ...form, femaleWorkerType: e.target.value as '' | 'CADRE' | 'WORKER' })}><option value="">未选择</option><option value="CADRE">干部/管理岗</option><option value="WORKER">工人/操作岗</option></Select></div>
+          )}
+          <div><Label>手机号</Label><Input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="选填" maxLength={11} /></div>
+          <div><Label>入职日期</Label><Input type="date" value={form.hireDate} onChange={(e) => setForm({ ...form, hireDate: e.target.value })} /></div>
+          <div><Label>月工资</Label><Input type="number" value={form.monthlySalary} onChange={(e) => setForm({ ...form, monthlySalary: Number(e.target.value) })} /></div>
+          <div><Label>紧急联系人</Label><Input value={form.emergencyContact} onChange={(e) => setForm({ ...form, emergencyContact: e.target.value })} placeholder="选填" /></div>
+          <div><Label>紧急联系电话</Label><Input value={form.emergencyPhone} onChange={(e) => setForm({ ...form, emergencyPhone: e.target.value })} placeholder="选填" /></div>
+          <div className="md:col-span-2"><Label>住址</Label><Input value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} placeholder="选填" /></div>
+          <div><Label>开户行</Label><Input value={form.bankName} onChange={(e) => setForm({ ...form, bankName: e.target.value })} placeholder="选填" /></div>
+          <div><Label>银行账号</Label><Input value={form.bankAccount} onChange={(e) => setForm({ ...form, bankAccount: e.target.value })} placeholder="选填" /></div>
+        </div>
+      )}
+
+      {/* 薪税信息 */}
+      <div className="mt-4 pt-4 border-t">
+        <h3 className="text-xs font-medium text-gray-600 mb-3">薪税信息</h3>
+        {!editing ? (
+          <div className="grid md:grid-cols-4 gap-4">
+            <div className="flex justify-between border-b pb-2 text-xs">
+              <span className="text-gray-500">参保城市</span>
+              <span className="font-medium">{profile.city || '未设置'}</span>
+            </div>
+            <div className="flex justify-between border-b pb-2 text-xs">
+              <span className="text-gray-500">社保缴费基数</span>
+              <span className="font-medium">{profile.socialInsBase ? `¥${fmt(profile.socialInsBase)}` : '未设置'}</span>
+            </div>
+            <div className="flex justify-between border-b pb-2 text-xs">
+              <span className="text-gray-500">公积金缴费基数</span>
+              <span className="font-medium">{profile.housingFundBase ? `¥${fmt(profile.housingFundBase)}` : '未设置'}</span>
+            </div>
+            <div className="flex justify-between border-b pb-2 text-xs">
+              <span className="text-gray-500">专项附加扣除</span>
+              <span className="font-medium">{profile.specialDeduction ? `¥${fmt(profile.specialDeduction)}/月` : '¥0.00/月'}</span>
+            </div>
+          </div>
+        ) : (
+          <div className="grid md:grid-cols-4 gap-4">
+            <div>
+              <Label>参保城市</Label>
+              <Input placeholder="如 北京" value={form.city || ''} onChange={(e) => setForm({ ...form, city: e.target.value })} />
+            </div>
+            <div>
+              <Label>社保缴费基数</Label>
+              <Input type="number" placeholder="按人核定" value={form.socialInsBase} onChange={(e) => setForm({ ...form, socialInsBase: e.target.value })} />
+            </div>
+            <div>
+              <Label>公积金缴费基数</Label>
+              <Input type="number" placeholder="按人核定" value={form.housingFundBase} onChange={(e) => setForm({ ...form, housingFundBase: e.target.value })} />
+            </div>
+            <div>
+              <Label>专项附加扣除（元/月）</Label>
+              <Input type="number" placeholder="子女教育、赡养老人等" value={form.specialDeduction} onChange={(e) => setForm({ ...form, specialDeduction: Number(e.target.value) || 0 })} />
+            </div>
+            {form.city !== (profile.city || '') && (
+              <div className="md:col-span-4">
+                <Label>参保城市变更原因（必填）</Label>
+                <Input placeholder="如：员工从北京调往上海工作" value={form.cityChangeReason} onChange={(e) => setForm({ ...form, cityChangeReason: e.target.value })} />
+              </div>
+            )}
+          </div>
+        )}
+        <p className="text-xs text-gray-400 mt-2">社保/公积金基数按上年度月均工资核定，每年7月调整。专项附加扣除由员工在portal端填报，无则为0。</p>
+      </div>
+
+      {/* 特殊状态 */}
+      <div className="mt-4 pt-4 border-t">
+        <h3 className="text-xs font-medium text-gray-600 mb-3">特殊状态</h3>
+        {!editing ? (
+          <div className="flex gap-4">
+            {special.map((s) => (
+              <span key={s.label} className={`px-3 py-1 rounded text-xs ${s.value ? 'bg-red-50 text-danger' : 'bg-gray-50 text-gray-400'}`}>
+                {s.label}：{s.value ? '是' : '否'}
+              </span>
+            ))}
+          </div>
+        ) : (
+          <div className="flex gap-4">
+            <label className="flex items-center gap-1.5 text-xs">
+              <input type="checkbox" checked={form.isPregnant} onChange={(e) => setForm({ ...form, isPregnant: e.target.checked })} />
+              孕期/哺乳期
+            </label>
+            <label className="flex items-center gap-1.5 text-xs">
+              <input type="checkbox" checked={form.isInMedicalPeriod} onChange={(e) => setForm({ ...form, isInMedicalPeriod: e.target.checked })} />
+              医疗期
+            </label>
+            <label className="flex items-center gap-1.5 text-xs">
+              <input type="checkbox" checked={form.isWorkInjured} onChange={(e) => setForm({ ...form, isWorkInjured: e.target.checked })} />
+              工伤
+            </label>
+          </div>
+        )}
+        {(profile.isPregnant || profile.isInMedicalPeriod || profile.isWorkInjured) && !editing && (
+          <p className="text-xs text-amber-600 mt-2">⚠️ 该员工处于特殊保护期，解聘操作将触发法律风险预警</p>
+        )}
+      </div>
+
+      {/* 员工端二维码 */}
+      {!editing && profile.phone && (
+        <div className="mt-4 pt-4 border-t">
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="text-xs font-medium text-gray-600">员工端入口</h3>
+            <Button size="sm" variant="secondary" onClick={() => {
+              const url = `${window.location.origin}/portal/login`
+              navigator.clipboard?.writeText(url)
+            }}>
+              复制链接
+            </Button>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="bg-white p-3 rounded-lg border">
+              <QRCodeSVG
+                value={`${window.location.origin}/portal/login`}
+                size={120}
+                level="M"
+              />
+            </div>
+            <div className="text-xs text-gray-500 space-y-1">
+              <p>员工扫码进入员工端，使用手机号登录</p>
+              <p>可查看工资条、合同信息、确认签署</p>
+              <p className="text-gray-400">链接：{window.location.origin}/portal/login</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 附件管理 */}
+      <div className="mt-4 pt-4 border-t">
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="text-xs font-medium text-gray-600">附件管理（{attachments?.length || 0}个）</h3>
+          {!editing && (
+            <div className="flex gap-2 items-center">
+              <Select value={fileType} onChange={(e) => setFileType(e.target.value as any)} className="text-xs !w-28">
+                <option value="ID_CARD">身份证</option><option value="BANK_CARD">银行卡</option><option value="EDUCATION">学历证书</option><option value="OTHER">其他</option>
+              </Select>
+              <input ref={fileInputRef} type="file" className="hidden" onChange={handleFileUpload} />
+              <Button size="sm" variant="secondary" onClick={() => fileInputRef.current?.click()} disabled={addAttachmentMutation.isPending} className="shrink-0 whitespace-nowrap">
+                {addAttachmentMutation.isPending ? '上传中...' : '上传附件'}
+              </Button>
+            </div>
+          )}
+        </div>
+        {!editing && attachments?.length ? (
+          <div className="space-y-1.5">
+            {attachments.map((att) => (
+              <div key={att.id} className="flex items-center justify-between bg-gray-50 rounded p-2 text-xs hover:bg-gray-100">
+                <div className="flex items-center gap-2 min-w-0">
+                  <Paperclip className="w-3.5 h-3.5 text-gray-400 shrink-0" />
+                  <div className="min-w-0">
+                    <div className="truncate font-medium text-gray-700">{att.fileName}</div>
+                    <div className="flex items-center gap-2 mt-0.5">
+                      <span className={`px-1.5 py-0.5 rounded text-xs ${fileTypeColors[att.fileType] || 'bg-gray-100 text-gray-500'}`}>{fileTypeLabels[att.fileType] || att.fileType}</span>
+                      <span className="text-gray-400">{formatSize(att.fileSize)}</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-1.5 shrink-0 ml-2">
+                  <button onClick={() => window.open(att.fileUrl, '_blank')} className="text-gray-400 hover:text-blue-600" title="查看">
+                    <Eye className="w-3.5 h-3.5" />
+                  </button>
+                  <a href={att.fileUrl} download={att.fileName} className="text-gray-400 hover:text-blue-600" title="下载">
+                    <Download className="w-3.5 h-3.5" />
+                  </a>
+                  <button onClick={() => deleteAttachmentMutation.mutate(att.id)} className="text-gray-300 hover:text-danger" title="删除">
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : !editing ? <div className="text-gray-400 text-xs text-center py-3">暂无附件</div> : null}
+      </div>
+    </Card>
+  )
+}