fix: AI身份证不脱敏+优化员工端登录页UI
- AI读取身份证改为解密明文,不再脱敏,确保生日等信息正确 - 员工端登录页优化:渐变背景、图标输入框、圆角Tab、loading动画、回车登录
This commit is contained in:
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user