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

client/src/pages/ForgotPasswordPage.tsx

@@ -3,6 +3,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { forgotPassword, resetPassword } from "../api/auth";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { isApiError } from "../api/types";
+import { AuthPanel } from "../components/auth/AuthPanel";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
@@ -93,13 +94,17 @@ export function ForgotPasswordPage() {
   }
 
   return (
-    <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6" data-testid="forgot-password-page">
-      <div>
-        <h1 className="text-xl font-semibold text-slate-900">找回密码</h1>
-        <p className="mt-1 text-sm leading-6 text-slate-500">使用账号邮箱接收验证码，设置新密码后重新登录。</p>
-      </div>
-
-      <form className="mt-6 space-y-4" onSubmit={handleRequestCode}>
+    <AuthPanel
+      title="找回密码"
+      subtitle="使用账号邮箱接收验证码"
+      data-testid="forgot-password-page"
+      footer={(
+        <Link className="font-medium text-primary hover:underline" to="/login">
+          返回登录
+        </Link>
+      )}
+    >
+      <form className="space-y-4" onSubmit={handleRequestCode}>
         <div className="space-y-2">
           <Label htmlFor="forgot-password-email">邮箱</Label>
           <Input
@@ -181,12 +186,6 @@ export function ForgotPasswordPage() {
           {error}
         </div>
       ) : null}
-
-      <div className="mt-5 text-center text-sm">
-        <Link className="font-medium text-primary hover:underline" to="/login">
-          返回登录
-        </Link>
-      </div>
-    </div>
+    </AuthPanel>
   );
 }