收口认证表单输入组件

迁移登录、重置密码、绑定手机号、邀请码和账号安全表单到 PlatformTextField 与 PlatformFieldLabel

补充认证表单公共输入断言和绑定手机号独立测试

更新 PlatformUiKit 文档和 Hermes 决策记录

src/components/auth/LoginScreen.tsx

@@ -16,10 +16,12 @@ import {
   readStoredLegalConsent,
 } from '../common/legalDocuments';
 import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
 import { PlatformModalCloseButton } from '../common/PlatformModalCloseButton';
 import { PlatformSegmentedTabs } from '../common/PlatformSegmentedTabs';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformSubpanel } from '../common/PlatformSubpanel';
+import { PlatformTextField } from '../common/PlatformTextField';
 import { CaptchaChallengeField } from './CaptchaChallengeField';
 
 type SmsScene = 'login' | 'reset_password';
@@ -273,10 +275,11 @@ export function LoginScreen({
                     void onPasswordSubmit(phone, password);
                   }}
                 >
-                  <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
-                    <span>手机号</span>
-                    <input
-                      className="platform-input"
+                  <label className="grid gap-2">
+                    <PlatformFieldLabel variant="form" className="mb-0">
+                      手机号
+                    </PlatformFieldLabel>
+                    <PlatformTextField
                       autoComplete="tel"
                       inputMode="numeric"
                       value={phone}
@@ -284,10 +287,11 @@ export function LoginScreen({
                       placeholder="13800000000"
                     />
                   </label>
-                  <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
-                    <span>密码</span>
-                    <input
-                      className="platform-input"
+                  <label className="grid gap-2">
+                    <PlatformFieldLabel variant="form" className="mb-0">
+                      密码
+                    </PlatformFieldLabel>
+                    <PlatformTextField
                       autoComplete="current-password"
                       type="password"
                       value={password}
@@ -516,10 +520,11 @@ function PhoneCodeForm({
       }}
     >
       {showPhoneField ? (
-        <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
-          <span>手机号</span>
-          <input
-            className="platform-input"
+        <label className="grid gap-2">
+          <PlatformFieldLabel variant="form" className="mb-0">
+            手机号
+          </PlatformFieldLabel>
+          <PlatformTextField
             autoComplete="tel"
             inputMode="numeric"
             value={phone}
@@ -529,11 +534,13 @@ function PhoneCodeForm({
         </label>
       ) : null}
 
-      <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
-        <span>验证码</span>
+      <label className="grid gap-2">
+        <PlatformFieldLabel variant="form" className="mb-0">
+          验证码
+        </PlatformFieldLabel>
         <div className="flex gap-3">
-          <input
-            className="platform-input min-w-0 flex-1"
+          <PlatformTextField
+            className="min-w-0 flex-1"
             inputMode="numeric"
             value={code}
             onChange={(event) => onCodeChange(event.target.value)}
@@ -609,10 +616,11 @@ function PasswordResetPanel({
         void onSubmit();
       }}
     >
-      <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
-        <span>手机号</span>
-        <input
-          className="platform-input"
+      <label className="grid gap-2">
+        <PlatformFieldLabel variant="form" className="mb-0">
+          手机号
+        </PlatformFieldLabel>
+        <PlatformTextField
           autoComplete="tel"
           inputMode="numeric"
           value={phone}
@@ -620,11 +628,13 @@ function PasswordResetPanel({
           placeholder="13800000000"
         />
       </label>
-      <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
-        <span>验证码</span>
+      <label className="grid gap-2">
+        <PlatformFieldLabel variant="form" className="mb-0">
+          验证码
+        </PlatformFieldLabel>
         <div className="flex gap-3">
-          <input
-            className="platform-input min-w-0 flex-1"
+          <PlatformTextField
+            className="min-w-0 flex-1"
             inputMode="numeric"
             value={code}
             onChange={(event) => onCodeChange(event.target.value)}
@@ -645,10 +655,11 @@ function PasswordResetPanel({
           </PlatformActionButton>
         </div>
       </label>
-      <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
-        <span>新密码</span>
-        <input
-          className="platform-input"
+      <label className="grid gap-2">
+        <PlatformFieldLabel variant="form" className="mb-0">
+          新密码
+        </PlatformFieldLabel>
+        <PlatformTextField
           autoComplete="new-password"
           type="password"
           value={password}