80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
"use client";
|
||
|
||
import { LogIn, ShieldCheck, UserPlus, X } from "lucide-react";
|
||
|
||
export type MockUser = {
|
||
name: string;
|
||
phone: string;
|
||
mode: "login" | "register";
|
||
};
|
||
|
||
export default function MockAuthPanel({
|
||
open,
|
||
user,
|
||
onClose,
|
||
onMockLogin,
|
||
onLogout
|
||
}: {
|
||
open: boolean;
|
||
user: MockUser | null;
|
||
onClose: () => void;
|
||
onMockLogin: (mode: MockUser["mode"]) => void;
|
||
onLogout: () => void;
|
||
}) {
|
||
if (!open) return null;
|
||
|
||
return (
|
||
<div className="absolute inset-0 z-30 flex items-end bg-slate-950/35 px-3 pb-3">
|
||
<section className="w-full rounded-t-[18px] rounded-b-md bg-white p-4 shadow-2xl">
|
||
<div className="mb-4 flex items-center justify-between">
|
||
<div>
|
||
<h2 className="text-lg font-semibold text-ink">账号入口</h2>
|
||
<p className="mt-1 text-sm text-slate-500">先用 mock 登录，后续可替换为微信授权或手机号登录。</p>
|
||
</div>
|
||
<button onClick={onClose} className="flex h-9 w-9 items-center justify-center rounded-md hover:bg-slate-100" aria-label="关闭">
|
||
<X className="h-5 w-5" aria-hidden />
|
||
</button>
|
||
</div>
|
||
|
||
{user ? (
|
||
<div className="rounded-md border border-line bg-panel p-3">
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-md bg-jade text-white">
|
||
<ShieldCheck className="h-5 w-5" aria-hidden />
|
||
</div>
|
||
<div>
|
||
<div className="font-medium text-ink">{user.name}</div>
|
||
<div className="text-sm text-slate-500">{user.phone}</div>
|
||
</div>
|
||
</div>
|
||
<button onClick={onLogout} className="mt-3 h-10 w-full rounded-md border border-line text-sm font-medium hover:bg-white">
|
||
退出 mock 账号
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="grid gap-3">
|
||
<button
|
||
onClick={() => onMockLogin("login")}
|
||
className="flex h-11 items-center justify-center gap-2 rounded-md bg-jade text-sm font-medium text-white hover:bg-teal-800"
|
||
>
|
||
<LogIn className="h-4 w-4" aria-hidden />
|
||
mock 登录
|
||
</button>
|
||
<button
|
||
onClick={() => onMockLogin("register")}
|
||
className="flex h-11 items-center justify-center gap-2 rounded-md border border-line text-sm font-medium text-ink hover:bg-slate-50"
|
||
>
|
||
<UserPlus className="h-4 w-4" aria-hidden />
|
||
mock 注册并进入
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<div className="mt-4 rounded-md bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-800">
|
||
这里暂不写入后端，也不保存敏感信息；后续接微信小程序时可把这个面板替换成授权弹窗。
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|