oa-auth-layout-wecom-login-ux 优化认证页登录布局

client/src/components/auth/AuthPanel.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { AppBrand } from "../shell/AppBrand";
+import { cn } from "../../lib/utils";
+
+type AuthPanelProps = {
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+  "data-testid"?: string;
+};
+
+export function AuthPanel({ title, subtitle, children, footer, className, "data-testid": testId }: AuthPanelProps) {
+  return (
+    <section
+      className={cn("w-full rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8", className)}
+      data-testid={testId}
+    >
+      <div className="space-y-7">
+        <AppBrand compact />
+        <div>
+          <h1 className="text-xl font-semibold leading-7 text-slate-950">{title}</h1>
+          {subtitle ? <p className="mt-1 text-sm leading-6 text-slate-500">{subtitle}</p> : null}
+        </div>
+        <div>{children}</div>
+        {footer ? <div className="border-t border-slate-100 pt-5 text-center text-sm">{footer}</div> : null}
+      </div>
+    </section>
+  );
+}