HouYunFei
e319481976
- 统一调整 admin.ts 文件中的接口定义缩进格式 - 优化 animated-theme-toggler.tsx 组件的代码结构和缩进 - 规范 app-config-modal.tsx 中 JSX 元素的嵌套格式 - 整理 app-providers.tsx 中的组件层级缩进 - 标准化 app-theme.ts 中的对象属性缩进格式
75 lines
3.4 KiB
TypeScript
75 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import { LockOutlined, UserOutlined } from "@ant-design/icons";
|
||
import { App, Button, Form, Input } from "antd";
|
||
import { useRouter, useSearchParams } from "next/navigation";
|
||
import { Suspense } from "react";
|
||
|
||
import { useUserStore } from "@/stores/use-user-store";
|
||
|
||
type LoginFormValues = {
|
||
username: string;
|
||
password: string;
|
||
confirmPassword?: string;
|
||
};
|
||
|
||
export default function LoginPage() {
|
||
return (
|
||
<Suspense fallback={null}>
|
||
<LoginContent />
|
||
</Suspense>
|
||
);
|
||
}
|
||
|
||
function LoginContent() {
|
||
const { message } = App.useApp();
|
||
const router = useRouter();
|
||
const searchParams = useSearchParams();
|
||
const login = useUserStore((state) => state.login);
|
||
const isLoading = useUserStore((state) => state.isLoading);
|
||
const redirect = searchParams.get("redirect") || "/";
|
||
|
||
const submit = async (values: LoginFormValues) => {
|
||
try {
|
||
const user = await login({ username: values.username, password: values.password });
|
||
message.success("登录成功");
|
||
router.replace(redirect.startsWith("/") ? redirect : "/");
|
||
router.refresh();
|
||
if (user.role !== "admin") router.replace("/");
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : "登录失败");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<main className="flex h-full min-h-0 items-center justify-center overflow-y-auto bg-background bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] px-6 py-10 [background-size:16px_16px] dark:bg-[radial-gradient(rgba(245,245,244,.16)_1px,transparent_1px)]">
|
||
<section className="w-full max-w-[420px]">
|
||
<div className="mb-7 text-center">
|
||
<span
|
||
className="mx-auto mb-4 block size-12 bg-stone-950 dark:bg-stone-100"
|
||
style={{
|
||
mask: "url(/logo.svg) center / contain no-repeat",
|
||
WebkitMask: "url(/logo.svg) center / contain no-repeat",
|
||
}}
|
||
aria-label="无限画布"
|
||
/>
|
||
<h1 className="text-3xl font-semibold tracking-normal text-stone-950 dark:text-stone-100">管理员登录</h1>
|
||
<p className="mt-3 text-base leading-7 text-stone-500 dark:text-stone-400">当前暂时关闭注册，仅允许管理员账号登录。</p>
|
||
</div>
|
||
|
||
<Form<LoginFormValues> layout="vertical" size="large" requiredMark={false} onFinish={submit}>
|
||
<Form.Item name="username" label={<span className="font-medium text-stone-800 dark:text-stone-200">用户名</span>} rules={[{ required: true, message: "请输入用户名" }]}>
|
||
<Input prefix={<UserOutlined />} autoComplete="username" />
|
||
</Form.Item>
|
||
<Form.Item name="password" label={<span className="font-medium text-stone-800 dark:text-stone-200">密码</span>} rules={[{ required: true, message: "请输入密码" }]}>
|
||
<Input.Password prefix={<LockOutlined />} autoComplete="current-password" />
|
||
</Form.Item>
|
||
<Button block type="primary" htmlType="submit" loading={isLoading}>
|
||
登录
|
||
</Button>
|
||
</Form>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|