fix: AI身份证不脱敏+优化员工端登录页UI

- AI读取身份证改为解密明文，不再脱敏，确保生日等信息正确 - 员工端登录页优化：渐变背景、图标输入框、圆角Tab、loading动画、回车登录
2026-08-17 18:40:27 +08:00
parent c6e2dbf5b7
commit f2a8f9a97c
2 changed files with 106 additions and 47 deletions
@@ -78,15 +78,14 @@ function daysFromNow(date: Date): number {
 }

 /**
- * 脱敏身份证号：保留前6位和后4位，中间用 * 代替
- * 例：310101199001011234 → 310101********1234
+ * 解密身份证号（不脱敏，AI 需要完整身份证号来正确读取生日等信息）
 */
-function maskIdCard(encrypted: string | null): string {
+function decryptIdCard(encrypted: string | null): string {
  if (!encrypted) return '未登记'
  try {
    const plain = decrypt(encrypted)
    if (plain && plain.length >= 10) {
-      return plain.slice(0, 6) + '********' + plain.slice(-4)
+      return plain
    }
    return '未登记'
  } catch {
@@ -115,7 +114,7 @@ async function buildOrgContext(orgId: string): Promise<string> {
    if (e.isPregnant) specialStatus.push('孕期/哺乳期')
    if (e.isInMedicalPeriod) specialStatus.push('医疗期')
    if (e.isWorkInjured) specialStatus.push('工伤')
-    return `- ${e.name}（身份证:${maskIdCard(e.idCardNumber)}，${e.department}），入职${e.hireDate.toISOString().slice(0, 10)}（已工作${tenure}），${contract ? `合同:${contract.contractType}，${contract.endDate ? `到期${contract.endDate.toISOString().slice(0, 10)}（剩余${daysToExpire}天）` : '无固定期限'}` : '未签合同'}${specialStatus.length > 0 ? `，特殊状态:${specialStatus.join('/')}` : ''}`
+    return `- ${e.name}（身份证:${decryptIdCard(e.idCardNumber)}，${e.department}），入职${e.hireDate.toISOString().slice(0, 10)}（已工作${tenure}），${contract ? `合同:${contract.contractType}，${contract.endDate ? `到期${contract.endDate.toISOString().slice(0, 10)}（剩余${daysToExpire}天）` : '无固定期限'}` : '未签合同'}${specialStatus.length > 0 ? `，特殊状态:${specialStatus.join('/')}` : ''}`
  }).join('\n')

  const riskSummary = risks.map((r) => `- ${r.title}（${r.level}）：${r.description || '无详细描述'}`).join('\n')
@@ -265,17 +264,17 @@ router.get('/predict', authMiddleware, async (req: AuthRequest, res, next) => {
        orgContext = `当前日期：${new Date().toISOString().slice(0, 10)}
 员工详情：
 - 姓名：${emp.name}
- 身份证号：${maskIdCard(emp.idCardNumber)}
+- 身份证号：${decryptIdCard(emp.idCardNumber)}
 - 部门：${emp.department}
 - 入职日期：${emp.hireDate.toISOString().slice(0, 10)}（已工作${tenure}）
 - 状态：${emp.status}
 - 特殊状态：${[emp.isPregnant && '孕期/哺乳期', emp.isInMedicalPeriod && '医疗期', emp.isWorkInjured && '工伤'].filter(Boolean).join('、') || '无'}
 - 合同：${contract ? `${contract.contractType}，${contract.startDate.toISOString().slice(0, 10)}至${contract.endDate ? contract.endDate.toISOString().slice(0, 10) : '无固定期限'}${contractDaysLeft !== null ? `（距到期${contractDaysLeft}天）` : ''}` : '未签合同'}${term ? `\n- 离职/解聘记录：${typeMap[term.type] || term.type}，原因：${reasonMap[term.reason] || term.reason}，离职日期：${term.terminationDate.toISOString().slice(0, 10)}，流程状态：${statusMap[term.status] || term.status}，经济补偿金：¥${term.compensation.toFixed(2)}${term.resignationReason ? `，离职原因说明：${term.resignationReason}` : ''}${socialInsEnd}${housingFundEnd}，${handoverDone ? '工作交接已完成' : '工作交接未完成'}，${agreementSigned ? '已签署解除协议' : '未签署解除协议'}` : ''}`
-        scopeHint = `请只针对员工【${emp.name}（身份证:${maskIdCard(emp.idCardNumber)}）】进行风险预测，不要分析其他员工。以上数据中的工龄、天数等均已由系统计算，请直接使用，不要重新计算。`
+        scopeHint = `请只针对员工【${emp.name}（身份证:${decryptIdCard(emp.idCardNumber)}）】进行风险预测，不要分析其他员工。以上数据中的工龄、天数等均已由系统计算，请直接使用，不要重新计算。`
      }
    } else if (department) {
      const employees = await prisma.employee.findMany({ where: { orgId: req.user!.orgId, department, status: 'ACTIVE' }, include: { contracts: { orderBy: { createdAt: 'desc' }, take: 1 } } })
-      const empSummary = employees.map(e => `- ${e.name}（身份证:${maskIdCard(e.idCardNumber)}），入职${e.hireDate.toISOString().slice(0, 10)}，${e.contracts[0] ? e.contracts[0].contractType : '未签合同'}`).join('\n')
+      const empSummary = employees.map(e => `- ${e.name}（身份证:${decryptIdCard(e.idCardNumber)}），入职${e.hireDate.toISOString().slice(0, 10)}，${e.contracts[0] ? e.contracts[0].contractType : '未签合同'}`).join('\n')
      orgContext = `部门【${department}】员工列表（${employees.length}人）：\n${empSummary}`
      scopeHint = `请只针对【${department}】部门的员工进行风险预测，不要分析其他部门的员工。`
    }
@@ -324,17 +323,17 @@ router.get('/predict-stream', authMiddleware, async (req: AuthRequest, res, next
        orgContext = `当前日期：${new Date().toISOString().slice(0, 10)}
 员工详情：
 - 姓名：${emp.name}
- 身份证号：${maskIdCard(emp.idCardNumber)}
+- 身份证号：${decryptIdCard(emp.idCardNumber)}
 - 部门：${emp.department}
 - 入职日期：${emp.hireDate.toISOString().slice(0, 10)}（已工作${tenure}）
 - 状态：${emp.status}
 - 特殊状态：${[emp.isPregnant && '孕期/哺乳期', emp.isInMedicalPeriod && '医疗期', emp.isWorkInjured && '工伤'].filter(Boolean).join('、') || '无'}
 - 合同：${contract ? `${contract.contractType}，${contract.startDate.toISOString().slice(0, 10)}至${contract.endDate ? contract.endDate.toISOString().slice(0, 10) : '无固定期限'}${contractDaysLeft !== null ? `（距到期${contractDaysLeft}天）` : ''}` : '未签合同'}${term ? `\n- 离职/解聘记录：${typeMap[term.type] || term.type}，原因：${reasonMap[term.reason] || term.reason}，离职日期：${term.terminationDate.toISOString().slice(0, 10)}，流程状态：${statusMap[term.status] || term.status}，经济补偿金：¥${term.compensation.toFixed(2)}${term.resignationReason ? `，离职原因说明：${term.resignationReason}` : ''}${socialInsEnd}${housingFundEnd}，${handoverDone ? '工作交接已完成' : '工作交接未完成'}，${agreementSigned ? '已签署解除协议' : '未签署解除协议'}` : ''}`
-        scopeHint = `请只针对员工【${emp.name}（身份证:${maskIdCard(emp.idCardNumber)}）】进行风险预测，不要分析其他员工。以上数据中的工龄、天数等均已由系统计算，请直接使用，不要重新计算。`
+        scopeHint = `请只针对员工【${emp.name}（身份证:${decryptIdCard(emp.idCardNumber)}）】进行风险预测，不要分析其他员工。以上数据中的工龄、天数等均已由系统计算，请直接使用，不要重新计算。`
      }
    } else if (department) {
      const employees = await prisma.employee.findMany({ where: { orgId: req.user!.orgId, department, status: 'ACTIVE' }, include: { contracts: { orderBy: { createdAt: 'desc' }, take: 1 } } })
-      const empSummary = employees.map(e => `- ${e.name}（身份证:${maskIdCard(e.idCardNumber)}），入职${e.hireDate.toISOString().slice(0, 10)}，${e.contracts[0] ? e.contracts[0].contractType : '未签合同'}`).join('\n')
+      const empSummary = employees.map(e => `- ${e.name}（身份证:${decryptIdCard(e.idCardNumber)}），入职${e.hireDate.toISOString().slice(0, 10)}，${e.contracts[0] ? e.contracts[0].contractType : '未签合同'}`).join('\n')
      orgContext = `部门【${department}】员工列表（${employees.length}人）：\n${empSummary}`
      scopeHint = `请只针对【${department}】部门的员工进行风险预测，不要分析其他部门的员工。`
    }
@@ -1,9 +1,8 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { Phone, Lock, ShieldCheck, ArrowRight } from 'lucide-react'
 import Logo from '../../components/ui/Logo'
 import { portalApi } from '../../lib/api-services'
-import { Input, Label } from '../../components/ui/Input'
-import Button from '../../components/ui/Button'

 type LoginMode = 'password' | 'code'

@@ -60,69 +59,130 @@ export default function PortalLogin() {
  }

  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4 pt-safe pb-safe">
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-blue-50 via-white to-gray-50 px-4 pt-safe pb-safe">
      <div className="w-full max-w-sm">
-        <div className="flex flex-col items-center justify-center gap-2 mb-8">
-          <Logo className="w-10 h-10 object-contain" />
-          <span className="text-base font-bold text-center">安职通 — 员工端</span>
+        {/* Logo & 标题 */}
+        <div className="flex flex-col items-center justify-center gap-3 mb-8">
+          <div className="w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center">
+            <Logo className="w-10 h-10 object-contain" />
+          </div>
+          <div className="text-center">
+            <h1 className="text-xl font-bold text-gray-900">安职通</h1>
+            <p className="text-sm text-gray-500 mt-0.5">员工端</p>
+          </div>
        </div>

-        <div className="card">
-          <div className="flex border-b mb-4">
+        {/* 登录卡片 */}
+        <div className="bg-white rounded-2xl shadow-lg p-6 space-y-5">
+          {/* Tab 切换 */}
+          <div className="flex bg-gray-100 rounded-xl p-1">
            <button
              onClick={() => { setMode('password'); setError('') }}
-              className={`flex-1 py-2 text-sm font-medium border-b-2 ${mode === 'password' ? 'border-primary text-primary' : 'border-transparent text-gray-500'}`}
+              className={`flex-1 py-2.5 text-sm font-medium rounded-lg transition-all ${mode === 'password' ? 'bg-white text-primary shadow-sm' : 'text-gray-500'}`}
            >密码登录</button>
            <button
              onClick={() => { setMode('code'); setError('') }}
-              className={`flex-1 py-2 text-sm font-medium border-b-2 ${mode === 'code' ? 'border-primary text-primary' : 'border-transparent text-gray-500'}`}
+              className={`flex-1 py-2.5 text-sm font-medium rounded-lg transition-all ${mode === 'code' ? 'bg-white text-primary shadow-sm' : 'text-gray-500'}`}
            >验证码登录</button>
          </div>

-          {error && <div className="mb-4 px-3 py-2 rounded-md bg-red-50 text-red-700 text-sm">{error}</div>}
+          {error && (
+            <div className="px-3 py-2.5 rounded-lg bg-red-50 text-red-600 text-sm flex items-center gap-2">
+              <span className="w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0" />
+              {error}
+            </div>
+          )}

          {mode === 'password' ? (
            <div className="space-y-4">
-              <div>
-                <Label>手机号</Label>
-                <Input type="tel" placeholder="请输入手机号" value={phone} onChange={(e) => setPhone(e.target.value)} maxLength={11} className="h-11" />
+              <div className="relative">
+                <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <input
+                  type="tel"
+                  placeholder="请输入手机号"
+                  value={phone}
+                  onChange={(e) => setPhone(e.target.value)}
+                  maxLength={11}
+                  className="w-full h-12 pl-11 pr-4 rounded-xl border border-gray-200 bg-gray-50 text-sm focus:bg-white focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all"
+                />
              </div>
-              <div>
-                <Label>密码</Label>
-                <Input type="password" placeholder="请输入密码" value={password} onChange={(e) => setPassword(e.target.value)} className="h-11" />
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <input
+                  type="password"
+                  placeholder="请输入密码"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && handlePasswordLogin()}
+                  className="w-full h-12 pl-11 pr-4 rounded-xl border border-gray-200 bg-gray-50 text-sm focus:bg-white focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all"
+                />
              </div>
-              <Button className="w-full h-11" onClick={handlePasswordLogin} disabled={loading || !phone || !password}>
-                {loading ? '登录中...' : '登录'}
-              </Button>
+              <button
+                onClick={handlePasswordLogin}
+                disabled={loading || !phone || !password}
+                className="w-full h-12 rounded-xl bg-primary text-white font-medium text-sm flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90 active:scale-[0.98] transition-all"
+              >
+                {loading ? (
+                  <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                ) : (
+                  <>登录 <ArrowRight className="w-4 h-4" /></>
+                )}
+              </button>
            </div>
          ) : (
            <div className="space-y-4">
-              <div>
-                <Label>手机号</Label>
-                <Input type="tel" placeholder="请输入手机号" value={phone} onChange={(e) => setPhone(e.target.value)} maxLength={11} className="h-11" />
+              <div className="relative">
+                <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <input
+                  type="tel"
+                  placeholder="请输入手机号"
+                  value={phone}
+                  onChange={(e) => setPhone(e.target.value)}
+                  maxLength={11}
+                  className="w-full h-12 pl-11 pr-4 rounded-xl border border-gray-200 bg-gray-50 text-sm focus:bg-white focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all"
+                />
              </div>
-              <div className="flex gap-2">
-                <div className="flex-1">
-                  <Label>验证码</Label>
-                  <Input placeholder="6位验证码" value={code} onChange={(e) => setCode(e.target.value)} maxLength={6} className="h-11" />
-                </div>
-                <div className="flex items-end">
-                  <Button variant="secondary" onClick={handleSendCode} disabled={!phone || codeSent} className="h-11 whitespace-nowrap">
-                    {codeSent ? '已发送' : '获取验证码'}
-                  </Button>
+              <div className="flex gap-3">
+                <div className="relative flex-1">
+                  <ShieldCheck className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                  <input
+                    placeholder="6位验证码"
+                    value={code}
+                    onChange={(e) => setCode(e.target.value)}
+                    maxLength={6}
+                    onKeyDown={(e) => e.key === 'Enter' && handleCodeLogin()}
+                    className="w-full h-12 pl-11 pr-4 rounded-xl border border-gray-200 bg-gray-50 text-sm focus:bg-white focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all"
+                  />
                </div>
+                <button
+                  onClick={handleSendCode}
+                  disabled={!phone || codeSent}
+                  className="h-12 px-4 rounded-xl border border-primary text-primary text-sm font-medium whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/5 transition-all"
+                >
+                  {codeSent ? '已发送' : '获取验证码'}
+                </button>
              </div>
              {codeSent && displayedCode && (
-                <div className="px-3 py-2 rounded-md bg-blue-50 text-blue-700 text-sm">
+                <div className="px-3 py-2.5 rounded-lg bg-blue-50 text-blue-600 text-sm">
                  验证码：{displayedCode}（开发阶段直接显示，生产环境将发送短信）
                </div>
              )}
-              <Button className="w-full h-11" onClick={handleCodeLogin} disabled={loading || !phone || !code}>
-                {loading ? '登录中...' : '登录'}
-              </Button>
+              <button
+                onClick={handleCodeLogin}
+                disabled={loading || !phone || !code}
+                className="w-full h-12 rounded-xl bg-primary text-white font-medium text-sm flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90 active:scale-[0.98] transition-all"
+              >
+                {loading ? (
+                  <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                ) : (
+                  <>登录 <ArrowRight className="w-4 h-4" /></>
+                )}
+              </button>
            </div>
          )}
        </div>
+
+        <p className="text-center text-xs text-gray-400 mt-6">登录即表示同意《用户协议》和《隐私政策》</p>
      </div>
    </div>
  )