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

client/src/pages/ChangePasswordPage.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { useAuth } from "../auth/AuthContext";
+import { AuthPanel } from "../components/auth/AuthPanel";
 import { Button } from "../components/ui/button";
 import { Label } from "../components/ui/label";
 import { PasswordInput } from "../components/ui/password-input";
@@ -50,17 +51,9 @@ export function ChangePasswordPage() {
   }
 
   return (
-    <div className="card-std space-y-6 border-primary-100 p-6">
-      <div className="mb-6 space-y-2">
-        <p className="text-xs font-semibold uppercase tracking-wide text-primary">hyb-oa</p>
-        <h1 className="text-2xl font-bold text-zinc-900">修改密码</h1>
-        <p className="text-sm text-secondary">
-          为了账号安全，请先修改初始密码后再进入系统。
-        </p>
-      </div>
-
+    <AuthPanel title="修改密码" subtitle="为了账号安全，请先修改初始密码">
       <form className="space-y-4" onSubmit={handleSubmit}>
-        <div className="space-y-1">
+        <div className="space-y-2">
           <Label htmlFor="oldPassword">旧密码</Label>
           <PasswordInput
             autoComplete="current-password"
@@ -72,7 +65,7 @@ export function ChangePasswordPage() {
           />
         </div>
 
-        <div className="space-y-1">
+        <div className="space-y-2">
           <Label htmlFor="newPassword">新密码</Label>
           <PasswordInput
             autoComplete="new-password"
@@ -85,16 +78,7 @@ export function ChangePasswordPage() {
           <p className="text-xs text-zinc-500">密码要求：{PASSWORD_REQUIREMENTS.join("；")}。</p>
         </div>
 
-        <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs text-zinc-600">
-          <p className="font-medium text-zinc-700">建议的新密码规则</p>
-          <ul className="mt-1 list-disc space-y-1 pl-4">
-            {PASSWORD_REQUIREMENTS.map((item) => (
-              <li key={item}>{item}</li>
-            ))}
-          </ul>
-        </div>
-
-        <div className="space-y-1">
+        <div className="space-y-2">
           <Label htmlFor="confirmPassword">确认新密码</Label>
           <PasswordInput
             autoComplete="new-password"
@@ -123,6 +107,6 @@ export function ChangePasswordPage() {
           {submitting ? "提交中..." : "确认修改"}
         </Button>
       </form>
-    </div>
+    </AuthPanel>
   );
 }