103 lines
3.9 KiB
TypeScript
103 lines
3.9 KiB
TypeScript
"use client";
|
||
|
||
import { LogIn, MessageCircle, ShieldCheck, UserPlus, X } from "lucide-react";
|
||
import { buildWechatOAuthUrl, getWechatAuthConfig, isWechatBrowser } from "@/lib/wechatAuth";
|
||
|
||
export type MockUser = {
|
||
name: string;
|
||
phone: string;
|
||
mode: "login" | "register" | "wechat";
|
||
};
|
||
|
||
export default function MockAuthPanel({
|
||
open,
|
||
user,
|
||
onClose,
|
||
onMockLogin,
|
||
onWechatMockLogin,
|
||
onLogout
|
||
}: {
|
||
open: boolean;
|
||
user: MockUser | null;
|
||
onClose: () => void;
|
||
onMockLogin: (mode: MockUser["mode"]) => void;
|
||
onWechatMockLogin: () => void;
|
||
onLogout: () => void;
|
||
}) {
|
||
if (!open) return null;
|
||
|
||
const wechatConfig = getWechatAuthConfig();
|
||
const inWechat = typeof navigator !== "undefined" && isWechatBrowser(navigator.userAgent);
|
||
|
||
function startWechatAuth() {
|
||
if (wechatConfig) {
|
||
window.location.href = buildWechatOAuthUrl(wechatConfig);
|
||
return;
|
||
}
|
||
onWechatMockLogin();
|
||
}
|
||
|
||
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">优先预留微信授权；没有配置时使用演示账号。</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={startWechatAuth}
|
||
className="flex h-11 items-center justify-center gap-2 rounded-md bg-jade text-sm font-medium text-white hover:bg-teal-800"
|
||
>
|
||
<MessageCircle className="h-4 w-4" aria-hidden />
|
||
{wechatConfig ? "微信授权登录" : "微信授权演示"}
|
||
</button>
|
||
<button
|
||
onClick={() => onMockLogin("login")}
|
||
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"
|
||
>
|
||
<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">
|
||
{wechatConfig
|
||
? `已配置微信 OAuth${inWechat ? "，当前在微信内置浏览器中。" : "。如果不在微信内打开，授权页可能无法完成。"}`
|
||
: "尚未配置 NEXT_PUBLIC_WECHAT_APP_ID，当前按钮只模拟微信授权，不写入后端。"}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|