From cebc6a590e1a19af7380a55aed43b23af274df0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Fri, 23 Jul 2021 09:33:14 +0800
Subject: [PATCH] fix(login): fix `auto fill` style in dark-theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复黑暗主题下的自动填充表单域样式
---
 src/views/sys/login/Login.vue        |  6 ++++++
 src/views/sys/login/LoginForm.vue    |  7 ++++++-
 src/views/sys/login/MobileForm.vue   |  8 +++++++-
 src/views/sys/login/RegisterForm.vue | 11 +++++++++--
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/views/sys/login/Login.vue b/src/views/sys/login/Login.vue
index ab5b157c..4a925c6c 100644
--- a/src/views/sys/login/Login.vue
+++ b/src/views/sys/login/Login.vue
@@ -140,6 +140,12 @@
         color: #fff;
       }
     }
+
+    input.fix-auto-fill,
+    .fix-auto-fill input {
+      -webkit-text-fill-color: #c9d1d9 !important;
+      box-shadow: inherit !important;
+    }
   }
 
   .@{prefix-cls} {
diff --git a/src/views/sys/login/LoginForm.vue b/src/views/sys/login/LoginForm.vue
index 697592ca..244bd14b 100644
--- a/src/views/sys/login/LoginForm.vue
+++ b/src/views/sys/login/LoginForm.vue
@@ -9,7 +9,12 @@
     @keypress.enter="handleLogin"
   >
     <FormItem name="account" class="enter-x">
-      <Input size="large" v-model:value="formData.account" :placeholder="t('sys.login.userName')" />
+      <Input
+        size="large"
+        v-model:value="formData.account"
+        :placeholder="t('sys.login.userName')"
+        class="fix-auto-fill"
+      />
     </FormItem>
     <FormItem name="password" class="enter-x">
       <InputPassword
diff --git a/src/views/sys/login/MobileForm.vue b/src/views/sys/login/MobileForm.vue
index e3b218a2..1baa69db 100644
--- a/src/views/sys/login/MobileForm.vue
+++ b/src/views/sys/login/MobileForm.vue
@@ -3,11 +3,17 @@
     <LoginFormTitle class="enter-x" />
     <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
       <FormItem name="mobile" class="enter-x">
-        <Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" />
+        <Input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+          class="fix-auto-fill"
+        />
       </FormItem>
       <FormItem name="sms" class="enter-x">
         <CountdownInput
           size="large"
+          class="fix-auto-fill"
           v-model:value="formData.sms"
           :placeholder="t('sys.login.smsCode')"
         />
diff --git a/src/views/sys/login/RegisterForm.vue b/src/views/sys/login/RegisterForm.vue
index b80c17b5..07eed0b5 100644
--- a/src/views/sys/login/RegisterForm.vue
+++ b/src/views/sys/login/RegisterForm.vue
@@ -4,17 +4,24 @@
     <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
       <FormItem name="account" class="enter-x">
         <Input
+          class="fix-auto-fill"
           size="large"
           v-model:value="formData.account"
           :placeholder="t('sys.login.userName')"
         />
       </FormItem>
       <FormItem name="mobile" class="enter-x">
-        <Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" />
+        <Input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+          class="fix-auto-fill"
+        />
       </FormItem>
       <FormItem name="sms" class="enter-x">
         <CountdownInput
           size="large"
+          class="fix-auto-fill"
           v-model:value="formData.sms"
           :placeholder="t('sys.login.smsCode')"
         />
@@ -52,7 +59,7 @@
       >
         {{ t('sys.login.registerButton') }}
       </Button>
-      <Button size="large" block class="enter-x mt-4" @click="handleBackLogin">
+      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
         {{ t('sys.login.backSignIn') }}
       </Button>
     </Form>