Add mobile H5 QA experience

hy_qa_asset_backend/frontend/components/h5/MockAuthPanel.tsx

@@ -0,0 +1,79 @@
+"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>
+  );
+}