fix: 修正登录输入后色调状态

src/global.less

@@ -44,44 +44,65 @@ a {
 }
 
 .login-page {
-  --rc-login-field-background: rgb(158 27 27 / 5%);
-  --rc-login-field-background-hover: rgb(158 27 27 / 7%);
-  --rc-login-field-border: rgb(158 27 27 / 12%);
+  --rc-login-field-filled-background: rgb(158 27 27 / 5%);
+  --rc-login-field-filled-background-hover: rgb(158 27 27 / 7%);
+  --rc-login-field-autofill-background: rgb(158 27 27 / 6%);
   --rc-login-field-border-hover: rgb(158 27 27 / 24%);
   --rc-login-field-focus-ring: rgb(158 27 27 / 16%);
 }
 
-.login-form :where(.input, [data-slot='input-wrapper'], [data-slot='control']) {
-  border-color: var(--rc-login-field-border) !important;
-  background: var(--rc-login-field-background) !important;
-  box-shadow: var(--field-shadow, 0 1px 2px rgb(15 23 42 / 4%)) !important;
+.login-form
+  .login-field[data-has-value='true']
+  :where(.input, [data-slot='input-wrapper'], [data-slot='control']) {
+  background: var(--rc-login-field-filled-background) !important;
 }
 
 .login-form
+  .login-field[data-has-value='true']
   :where(.input, [data-slot='input-wrapper'], [data-slot='control']):hover,
 .login-form
+  .login-field[data-has-value='true']
   :where(
     .input,
     [data-slot='input-wrapper'],
     [data-slot='control']
   )[data-hovered='true'] {
   border-color: var(--rc-login-field-border-hover) !important;
-  background: var(--rc-login-field-background-hover) !important;
+  background: var(--rc-login-field-filled-background-hover) !important;
 }
 
 .login-form
+  .login-field[data-has-value='true']
   :where(.input, [data-slot='input-wrapper'], [data-slot='control']):focus-within {
   border-color: var(--rc-field-border-focus) !important;
-  background: var(--rc-login-field-background) !important;
+  background: var(--rc-login-field-filled-background) !important;
   box-shadow:
     var(--field-shadow, 0 1px 2px rgb(15 23 42 / 4%)),
     0 0 0 2px var(--rc-login-field-focus-ring) !important;
 }
 
+.login-form
+  :where(.input, [data-slot='input-wrapper'], [data-slot='control']):has(
+    input:-webkit-autofill
+  ),
+.login-form
+  :where(.input, [data-slot='input-wrapper'], [data-slot='control']):has(
+    input:autofill
+  ) {
+  background: var(--rc-login-field-autofill-background) !important;
+}
+
+.login-form input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--rc-login-field-autofill-background)
+    inset !important;
+  -webkit-text-fill-color: var(--rc-text-primary) !important;
+  caret-color: var(--rc-text-primary);
+}
+
 .dark .login-page {
-  --rc-login-field-background: rgb(158 27 27 / 14%);
-  --rc-login-field-background-hover: rgb(158 27 27 / 18%);
-  --rc-login-field-border: rgb(184 58 58 / 28%);
+  --rc-login-field-filled-background: rgb(158 27 27 / 14%);
+  --rc-login-field-filled-background-hover: rgb(158 27 27 / 18%);
+  --rc-login-field-autofill-background: rgb(158 27 27 / 16%);
   --rc-login-field-border-hover: rgb(184 58 58 / 42%);
   --rc-login-field-focus-ring: rgb(184 58 58 / 22%);
 }

src/pages/Login.jsx

@@ -92,6 +92,8 @@ export default function LoginPage() {
           <Card.Content>
             <form className="login-form" onSubmit={handleSubmit}>
               <TextField
+                className="login-field"
+                data-has-value={identity ? 'true' : undefined}
                 fullWidth
                 isDisabled={loading}
                 isRequired
@@ -108,6 +110,8 @@ export default function LoginPage() {
               </TextField>
 
               <TextField
+                className="login-field"
+                data-has-value={password ? 'true' : undefined}
                 fullWidth
                 isDisabled={loading}
                 isRequired
@@ -127,7 +131,8 @@ export default function LoginPage() {
                 <Label>验证码</Label>
                 <div className="flex gap-3">
                   <TextField
-                    className="min-w-0 flex-1"
+                    className="login-field min-w-0 flex-1"
+                    data-has-value={captchaCode ? 'true' : undefined}
                     isDisabled={loading}
                     isRequired
                     value={captchaCode}