Add WeChat auth entry for H5

hy_qa_asset_backend/frontend/components/h5/MockAuthPanel.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { LogIn, ShieldCheck, UserPlus, X } from "lucide-react";
+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";
+  mode: "login" | "register" | "wechat";
 };
 
 export default function MockAuthPanel({
@@ -13,23 +14,36 @@ export default function MockAuthPanel({
   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">先用 mock 登录，后续可替换为微信授权或手机号登录。</p>
+            <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 />
@@ -54,8 +68,15 @@ export default function MockAuthPanel({
         ) : (
           <div className="grid gap-3">
             <button
-              onClick={() => onMockLogin("login")}
+              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 登录
@@ -71,7 +92,9 @@ export default function MockAuthPanel({
         )}
 
         <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>