shangfangjian
f71f29b4cb
P0(4): 假数据清除(avg_latency_ms:2400→null,无端点字段改null)、假进度条改诚实的不确定态、 公共页不再反向依赖 admin(api/public.ts)、PredictProgress 重写 P1(6): 23处 any 归零(对齐后端 Pydantic 契约新增 PredictionMatchRef/HealthProbe 等)、 a11y(aria-live 0→4,htmlFor 1→17,aria-describedby/invalid 补齐)、App.tsx 抽 SiteLayout、 路由级 lazy+代码分割(首屏 315KB→238KB)、index.html 补 SEO/favicon/OG、死代码清理(AdminIcon 抽出) P2(7): Login/index.css 裸色值令牌化、groupByDate useMemo、滚动监听统一、原生控件基元化、 useLeagues 静默失败补告警、路由级 ErrorBoundary 另修复审计未列问题: - Monitoring todos 过滤器 t!==false 放行 null 导致整页崩溃 → Boolean(t) 真值过滤 - Collection 渲染期 Date.now()(react-hooks/purity 捕获)→ 计时器 effect - bg-press-wash/60 透明度修饰符静默失效 → RGB 三元组 + 构建期令牌守卫(下个提交接入) 工程化:数据层 dal/api/types(1047行)git mv 至 src/api/,admin 留 @deprecated 兼容壳, 21 个引用方直指新路径;tsconfig 开启 noUnusedLocals/noUnusedParameters(清理9处存量)
103 lines
3.6 KiB
TypeScript
103 lines
3.6 KiB
TypeScript
/**
|
|
* Admin 后台 - 登录页(报刊风)
|
|
*
|
|
* 密码验证通过后由服务端写入 HttpOnly 会话 Cookie。
|
|
*/
|
|
|
|
import { useState } from 'react'
|
|
import { ApiError, login } from '../api/api'
|
|
import { Button, Input } from '../components/ui'
|
|
|
|
export default function Login({ onSuccess }: { onSuccess: () => void }) {
|
|
const [password, setPassword] = useState('')
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
if (!password || submitting) return
|
|
setSubmitting(true)
|
|
setError('')
|
|
try {
|
|
await login(password)
|
|
onSuccess()
|
|
} catch (err) {
|
|
setError(
|
|
err instanceof ApiError
|
|
? err.message.split('\n')[0]
|
|
: '登录失败,请检查网络连接',
|
|
)
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col bg-paper-50 text-ink-800">
|
|
<header className="masthead-rule">
|
|
<div className="mx-auto w-full max-w-md px-5 pt-12 sm:pt-16">
|
|
<div className="border-b border-ink-900 py-5 text-center">
|
|
<h1 className="font-serif text-3xl font-bold tracking-widest text-ink-900">
|
|
先知
|
|
<span className="ml-3 align-baseline font-serif text-sm font-normal italic tracking-normal text-ink-500">
|
|
Profeto
|
|
</span>
|
|
</h1>
|
|
<p className="mt-2 text-2xs tracking-[0.4em] text-ink-500">管理后台 · 管理员登录</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex flex-1 items-start justify-center px-5 py-10">
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="w-full max-w-sm border border-ink-300 bg-paper-50 p-6 shadow-print"
|
|
>
|
|
<label htmlFor="admin-password" className="block text-xs font-medium tracking-wide text-ink-700">
|
|
管理密码
|
|
</label>
|
|
<Input
|
|
id="admin-password"
|
|
type="password"
|
|
value={password}
|
|
onChange={e => setPassword(e.target.value)}
|
|
placeholder="输入服务器 .env 中的 ADMIN_PASSWORD"
|
|
autoFocus
|
|
autoComplete="current-password"
|
|
/* 错误时把输入框标记为无效并关联错误文本,
|
|
屏幕阅读器才能知道「密码错了」以及错在哪 */
|
|
aria-invalid={error ? true : undefined}
|
|
aria-describedby={error ? 'admin-password-error' : undefined}
|
|
className="mt-2 w-full"
|
|
/>
|
|
|
|
{error && (
|
|
<p
|
|
id="admin-password-error"
|
|
/* role=alert 让错误出现时立即被朗读(aria-live 的 assertive 语义) */
|
|
role="alert"
|
|
className="mt-3 border-l-2 border-press bg-press-wash/40 px-3 py-2 text-2xs leading-relaxed text-press-dark"
|
|
>
|
|
{error}
|
|
</p>
|
|
)}
|
|
|
|
<Button variant="solid" className="mt-5 w-full justify-center" type="submit" disabled={!password || submitting}>
|
|
{submitting ? '验证中…' : '登 录'}
|
|
</Button>
|
|
|
|
<p className="mt-4 border-t border-ink-200 pt-3 text-center text-2xs leading-relaxed text-ink-400">
|
|
密码初始来自服务器 .env,可登录后在「系统配置」页修改;连续输错 5 次将锁定 10 分钟。
|
|
</p>
|
|
</form>
|
|
</main>
|
|
|
|
<footer className="pb-8 text-center text-2xs text-ink-400">
|
|
<a href="/" className="transition-colors hover:text-press">
|
|
← 返回前台版面
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|