feat: V21 Auth 页面样式对齐 (#29)

apps/web/src/pages/auth/ResetPassword.tsx

@@ -1,8 +1,8 @@
 /**
- * 重置密码页面
+ * 重置密码页面 - V21 完全对标
  */
 import React from 'react';
-import { Form, Input, Button, Card, message, Result } from 'antd';
+import { Form, Input, Button, Result, message } from 'antd';
 import { LockOutlined } from '@ant-design/icons';
 import { Link, useSearchParams, useNavigate } from 'react-router-dom';
 import { useMutation } from '@tanstack/react-query';
@@ -32,8 +32,8 @@ const ResetPassword: React.FC = () => {
 
   if (!token) {
     return (
-      <div className="reset-password-container">
-        <Card className="reset-password-card">
+      <div className="xx-result-page">
+        <div className="xx-result-card">
           <Result
             status="error"
             title="无效的重置链接"
@@ -44,15 +44,15 @@ const ResetPassword: React.FC = () => {
               </Link>,
             ]}
           />
-        </Card>
+        </div>
       </div>
     );
   }
 
   if (resetMutation.isSuccess) {
     return (
-      <div className="reset-password-container">
-        <Card className="reset-password-card">
+      <div className="xx-result-page">
+        <div className="xx-result-card">
           <Result
             status="success"
             title="密码重置成功"
@@ -63,17 +63,24 @@ const ResetPassword: React.FC = () => {
               </Link>,
             ]}
           />
-        </Card>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="reset-password-container">
-      <Card className="reset-password-card" title="设置新密码">
-        <Form form={form} name="reset-password" onFinish={onFinish} size="large">
+    <div className="xx-auth-page">
+      <div className="xx-auth-card">
+        <div className="xx-auth-header">
+          <div className="xx-logo-big">🦐</div>
+          <h1>小虾自动剪辑</h1>
+          <p>设置新密码</p>
+        </div>
+
+        <Form form={form} name="reset-password" onFinish={onFinish} layout="vertical">
           <Form.Item
             name="password"
+            label="新密码"
             rules={[
               { required: true, message: '请输入新密码' },
               { min: 8, message: '密码至少 8 个字符' },
@@ -83,11 +90,16 @@ const ResetPassword: React.FC = () => {
               },
             ]}
           >
-            <Input.Password prefix={<LockOutlined />} placeholder="新密码" />
+            <Input.Password
+              prefix={<LockOutlined />}
+              placeholder="•••••••••"
+              size="large"
+            />
           </Form.Item>
 
           <Form.Item
             name="confirmPassword"
+            label="确认新密码"
             dependencies={['password']}
             rules={[
               { required: true, message: '请确认新密码' },
@@ -101,25 +113,29 @@ const ResetPassword: React.FC = () => {
               }),
             ]}
           >
-            <Input.Password prefix={<LockOutlined />} placeholder="确认新密码" />
+            <Input.Password
+              prefix={<LockOutlined />}
+              placeholder="•••••••••"
+              size="large"
+            />
           </Form.Item>
 
           <Form.Item>
-            <Button
-              type="primary"
-              htmlType="submit"
-              loading={resetMutation.isPending}
-              block
+            <button
+              type="submit"
+              className="btn primary"
+              style={{ width: '100%' }}
+              disabled={resetMutation.isPending}
             >
-              重置密码
-            </Button>
+              {resetMutation.isPending ? '重置中...' : '重置密码'}
+            </button>
           </Form.Item>
 
-          <div style={{ textAlign: 'center' }}>
+          <div className="xx-auth-footer">
             <Link to="/login">返回登录</Link>
           </div>
         </Form>
-      </Card>
+      </div>
     </div>
   );
 };