80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
"use client";
|
||
|
||
import { startTransition, useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
|
||
import { api, ApiError } from "@/lib/api";
|
||
|
||
export default function AdminLoginPage() {
|
||
const router = useRouter();
|
||
const [form, setForm] = useState({
|
||
username: "admin",
|
||
password: "Admin@123456",
|
||
});
|
||
const [error, setError] = useState("");
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||
event.preventDefault();
|
||
setLoading(true);
|
||
setError("");
|
||
try {
|
||
await api.post("/api/v1/admin/auth/login", form);
|
||
startTransition(() => router.replace("/admin/dashboard"));
|
||
} catch (err) {
|
||
setError(err instanceof ApiError ? err.message : "登录失败");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="login-grid">
|
||
<section style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
|
||
<div>
|
||
<div className="brand-kicker">Ops Console</div>
|
||
<h1 style={{ fontSize: 64, lineHeight: 0.95, margin: "12px 0", fontFamily: "var(--font-display)" }}>
|
||
管好模型、价格、奖励、订单和任务链路。
|
||
</h1>
|
||
<p className="muted" style={{ maxWidth: 580 }}>
|
||
后台聚焦两件事：配置业务规则，以及处理异常链路。默认已创建管理员账号，适合直接联调整条 MVP。
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="fullscreen-shell">
|
||
<form className="auth-card" onSubmit={handleSubmit}>
|
||
<div className="brand-kicker">AIVideo Admin</div>
|
||
<h3>管理员登录</h3>
|
||
<div className="form-stack">
|
||
<label className="field-label">
|
||
用户名
|
||
<input
|
||
value={form.username}
|
||
onChange={(event) =>
|
||
setForm((previous) => ({ ...previous, username: event.target.value }))
|
||
}
|
||
/>
|
||
</label>
|
||
<label className="field-label">
|
||
密码
|
||
<input
|
||
type="password"
|
||
value={form.password}
|
||
onChange={(event) =>
|
||
setForm((previous) => ({ ...previous, password: event.target.value }))
|
||
}
|
||
/>
|
||
</label>
|
||
{error ? <div className="muted" style={{ color: "var(--danger)" }}>{error}</div> : null}
|
||
<button className="primary-button" type="submit">
|
||
{loading ? "登录中..." : "进入后台"}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|