登录1
This commit is contained in:
@@ -0,0 +1,231 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { User, Lock, Building2, LogIn, AlertCircle, Loader2 } from 'lucide-react';
|
||||
import StarBackground from '@/shared/components/StarBackground';
|
||||
import { iamLogin, saveSession } from '@/shared/services/iamAuth';
|
||||
import { useTheme } from '@/shared/context/ThemeContext';
|
||||
|
||||
const inputStyle = (isDark: boolean): React.CSSProperties => ({
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: '12px 14px 12px 42px',
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${isDark ? 'rgba(0,212,255,0.25)' : 'rgba(0,0,0,0.12)'}`,
|
||||
background: isDark ? 'rgba(0,212,255,0.06)' : '#fff',
|
||||
color: isDark ? '#e8f4ff' : '#1e293b',
|
||||
fontSize: 14,
|
||||
outline: 'none',
|
||||
transition: 'border-color 0.2s, box-shadow 0.2s',
|
||||
});
|
||||
|
||||
const iconStyle = (isDark: boolean): React.CSSProperties => ({
|
||||
position: 'absolute',
|
||||
left: 14,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
color: isDark ? 'rgba(0,212,255,0.6)' : '#94a3b8',
|
||||
});
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === 'dark';
|
||||
|
||||
const [userId, setUserId] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [tenantId, setTenantId] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = 'auto';
|
||||
return () => { document.body.style.overflow = ''; };
|
||||
}, []);
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!userId.trim() || !password) {
|
||||
setError('请输入账号和密码');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const result = await iamLogin({ userId: userId.trim(), password, tenantId: tenantId.trim() || undefined });
|
||||
saveSession(result.token, {
|
||||
userId: result.userId,
|
||||
tenantId: result.tenantId,
|
||||
loginTime: new Date().toLocaleString('zh-CN'),
|
||||
});
|
||||
navigate('/', { replace: true });
|
||||
} catch (ex) {
|
||||
setError(ex instanceof Error ? ex.message : '登录失败，请稍后重试');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
width: '100vw',
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
boxSizing: 'border-box',
|
||||
fontFamily: "-apple-system, 'SF Pro Display', 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif",
|
||||
color: isDark ? '#a8d8ff' : '#1e3a6e',
|
||||
}}>
|
||||
{isDark ? <StarBackground theme="dark" /> : (
|
||||
<div style={{
|
||||
position: 'fixed', top: 0, left: 0, width: '100%', height: '100%',
|
||||
background: 'linear-gradient(160deg, #f8f8fb 0%, #f2f3f7 50%, #eef1f7 100%)',
|
||||
zIndex: 0,
|
||||
}} />
|
||||
)}
|
||||
|
||||
<div style={{
|
||||
position: 'relative', zIndex: 1,
|
||||
width: 400, maxWidth: '92vw',
|
||||
padding: '40px 36px 32px',
|
||||
borderRadius: 20,
|
||||
background: isDark ? 'rgba(10,22,40,0.75)' : 'rgba(255,255,255,0.9)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
border: `1px solid ${isDark ? 'rgba(0,212,255,0.2)' : 'rgba(0,0,0,0.06)'}`,
|
||||
boxShadow: isDark ? '0 24px 64px rgba(0,0,0,0.5), 0 0 48px rgba(0,212,255,0.08)' : '0 24px 64px rgba(30,58,110,0.12)',
|
||||
}}>
|
||||
{/* 品牌区 */}
|
||||
<div style={{ textAlign: 'center', marginBottom: 32 }}>
|
||||
<img
|
||||
src="/digiwin.svg"
|
||||
alt="Digiwin"
|
||||
style={{ height: 36, objectFit: 'contain', filter: isDark ? 'drop-shadow(0 0 8px rgba(0,212,255,0.4))' : 'none' }}
|
||||
/>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, marginTop: 14 }}>
|
||||
<h1 style={{
|
||||
fontSize: 26, fontWeight: 800, letterSpacing: '0.04em', margin: 0,
|
||||
...(isDark
|
||||
? { color: '#e8f4ff', textShadow: '0 0 16px rgba(0,212,255,0.5)' }
|
||||
: { color: '#111827' }),
|
||||
}}>
|
||||
EIOSpace
|
||||
</h1>
|
||||
</div>
|
||||
<p style={{ fontSize: 13, marginTop: 6, ...(isDark ? { color: 'rgba(168,216,255,0.6)' } : { color: '#6b7280' }) }}>
|
||||
企业智能 · 数据驱动 · 产业赋能
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 登录表单 */}
|
||||
<form onSubmit={handleLogin}>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<label style={{ display: 'block', fontSize: 13, marginBottom: 6, color: isDark ? 'rgba(168,216,255,0.8)' : '#475569' }}>
|
||||
账号（用户ID / 手机号 / 邮箱）
|
||||
</label>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<User size={16} style={iconStyle(isDark)} />
|
||||
<input
|
||||
type="text"
|
||||
value={userId}
|
||||
onChange={(e) => setUserId(e.target.value)}
|
||||
placeholder="请输入账号"
|
||||
autoComplete="username"
|
||||
style={inputStyle(isDark)}
|
||||
onFocus={(e) => { e.currentTarget.style.borderColor = '#00d4ff'; }}
|
||||
onBlur={(e) => { e.currentTarget.style.borderColor = isDark ? 'rgba(0,212,255,0.25)' : 'rgba(0,0,0,0.12)'; }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<label style={{ display: 'block', fontSize: 13, marginBottom: 6, color: isDark ? 'rgba(168,216,255,0.8)' : '#475569' }}>
|
||||
密码
|
||||
</label>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<Lock size={16} style={iconStyle(isDark)} />
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
autoComplete="current-password"
|
||||
style={inputStyle(isDark)}
|
||||
onFocus={(e) => { e.currentTarget.style.borderColor = '#00d4ff'; }}
|
||||
onBlur={(e) => { e.currentTarget.style.borderColor = isDark ? 'rgba(0,212,255,0.25)' : 'rgba(0,0,0,0.12)'; }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<label style={{ display: 'block', fontSize: 13, marginBottom: 6, color: isDark ? 'rgba(168,216,255,0.8)' : '#475569' }}>
|
||||
租户 ID（可选）
|
||||
</label>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<Building2 size={16} style={iconStyle(isDark)} />
|
||||
<input
|
||||
type="text"
|
||||
value={tenantId}
|
||||
onChange={(e) => setTenantId(e.target.value)}
|
||||
placeholder="不填则自动匹配已授权租户"
|
||||
style={inputStyle(isDark)}
|
||||
onFocus={(e) => { e.currentTarget.style.borderColor = '#00d4ff'; }}
|
||||
onBlur={(e) => { e.currentTarget.style.borderColor = isDark ? 'rgba(0,212,255,0.25)' : 'rgba(0,0,0,0.12)'; }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8,
|
||||
padding: '10px 12px', marginBottom: 16,
|
||||
borderRadius: 8, fontSize: 13,
|
||||
background: 'rgba(239,68,68,0.12)',
|
||||
border: '1px solid rgba(239,68,68,0.4)',
|
||||
color: '#fca5a5',
|
||||
}}>
|
||||
<AlertCircle size={15} style={{ flexShrink: 0 }} />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '13px 0',
|
||||
borderRadius: 10,
|
||||
border: 'none',
|
||||
cursor: loading ? 'wait' : 'pointer',
|
||||
fontSize: 15,
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.08em',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
color: '#04121f',
|
||||
background: 'linear-gradient(90deg, #00d4ff, #4f9eff)',
|
||||
boxShadow: '0 8px 24px rgba(0,212,255,0.35)',
|
||||
transition: 'transform 0.15s, box-shadow 0.15s, opacity 0.15s',
|
||||
opacity: loading ? 0.7 : 1,
|
||||
}}
|
||||
onMouseEnter={(e) => { if (!loading) e.currentTarget.style.transform = 'translateY(-1px)'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; }}
|
||||
>
|
||||
{loading ? <Loader2 size={17} style={{ animation: 'spin 1s linear infinite' }} /> : <LogIn size={17} />}
|
||||
{loading ? '登录中...' : '登 录'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p style={{
|
||||
textAlign: 'center', fontSize: 12, marginTop: 24,
|
||||
...(isDark ? { color: 'rgba(168,216,255,0.45)' } : { color: '#94a3b8' }),
|
||||
}}>
|
||||
鼎捷云统一身份认证 · IAM
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user