diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts index 158a7b25..24b8f946 100644 --- a/src/locales/en-US.ts +++ b/src/locales/en-US.ts @@ -285,6 +285,8 @@ export default { copyright: '© {year} MoviePilot', username: 'Username', password: 'Password', + showPassword: 'Show password', + hidePassword: 'Hide password', otpCode: 'Verification Code', stayLoggedIn: 'Stay Logged In', login: 'Login', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 82a306aa..beb473b7 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -282,6 +282,8 @@ export default { copyright: '© {year} MoviePilot', username: '用户名', password: '密码', + showPassword: '显示密码', + hidePassword: '隐藏密码', otpCode: '验证码', stayLoggedIn: '保持登录', login: '登录', diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts index ecc4227b..aa9d9485 100644 --- a/src/locales/zh-TW.ts +++ b/src/locales/zh-TW.ts @@ -282,6 +282,8 @@ export default { copyright: '© {year} MoviePilot', username: '用戶名', password: '密碼', + showPassword: '顯示密碼', + hidePassword: '隱藏密碼', otpCode: '驗證碼', stayLoggedIn: '保持登錄', login: '登錄', diff --git a/src/pages/login.vue b/src/pages/login.vue index a04fde25..21024070 100644 --- a/src/pages/login.vue +++ b/src/pages/login.vue @@ -1,9 +1,7 @@ @@ -777,48 +748,59 @@ onUnmounted(() => { - + @@ -1167,24 +1149,92 @@ onUnmounted(() => { padding-block: 8px !important; } -/* 输入框增强样式 */ -:deep(.login-input .v-field) { +/* 原生登录输入框:保留标准 input DOM,便于密码管理器识别。 */ +.native-login-field { + position: relative; + display: flex; + align-items: center; + border: 1px solid rgba(var(--v-border-color), 0.38); + min-block-size: 56px; border-radius: 12px; + background: transparent; transition: - box-shadow 200ms ease, - border-color 200ms ease; + border-color 150ms ease, + box-shadow 150ms ease; } -/* 输入框聚焦时增加主色光晕 */ -:deep(.login-body .v-field.v-field--focused) { - box-shadow: - 0 0 0 3px rgba(var(--v-theme-primary), 0.12), - 0 4px 12px rgba(var(--v-theme-primary), 0.08); +.native-login-field:focus-within { + border-color: rgb(var(--v-theme-primary)); + box-shadow: inset 0 0 0 1px rgb(var(--v-theme-primary)); } -/* 输入框悬停 */ -:deep(.login-input .v-field:hover:not(.v-field--focused)) { - border-color: rgba(var(--v-theme-primary), 0.4); +.native-login-field__icon { + position: absolute; + z-index: 1; + color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); + inset-block-start: 16px; + inset-inline-start: 16px; + pointer-events: none; +} + +.native-login-field__input { + display: block; + border: 0; + appearance: none; + background: transparent; + block-size: 54px; + color: rgb(var(--v-theme-on-surface)); + font: inherit; + inline-size: 100%; + line-height: 1.5; + outline: none; + padding-block: 0; + padding-inline: 48px 16px; +} + +.native-login-field__input::placeholder { + color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); + opacity: 1; +} + +.native-login-field--password .native-login-field__input { + padding-inline-end: 48px; +} + +.native-login-field__input:-webkit-autofill, +.native-login-field__input:-webkit-autofill:hover, +.native-login-field__input:-webkit-autofill:focus { + -webkit-text-fill-color: rgb(var(--v-theme-on-surface)); + caret-color: rgb(var(--v-theme-on-surface)); + transition: background-color 9999s ease-in-out 0s; +} + +.native-login-field__toggle { + position: absolute; + z-index: 2; + display: inline-flex; + align-items: center; + justify-content: center; + border: 0; + border-radius: 50%; + background: transparent; + block-size: 40px; + color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); + cursor: pointer; + inline-size: 40px; + inset-block-start: 8px; + inset-inline-end: 8px; + padding: 0; + transition: + background 150ms ease, + color 150ms ease; +} + +.native-login-field__toggle:hover, +.native-login-field__toggle:focus-visible { + background: rgba(var(--v-theme-on-surface), 0.08); + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); + outline: none; } /* Remember me 复选框样式优化 */