Commit 38503ee7 by DaiJiezhang

fix(login): preserve password autofill compatibility

parent d2443c67
...@@ -68,7 +68,9 @@ export default { ...@@ -68,7 +68,9 @@ export default {
<el-input v-model="form.username" class="login-form__input" placeholder="请输入账号" autocomplete="username" aria-label="账号" /> <el-input v-model="form.username" class="login-form__input" placeholder="请输入账号" autocomplete="username" aria-label="账号" />
</el-form-item> </el-form-item>
<el-form-item class="login-form__item"> <el-form-item class="login-form__item">
<div class="login-password-field">
<el-input v-model="form.password" class="login-form__input" placeholder="请输入密码" type="password" show-password autocomplete="current-password" aria-label="密码" @keyup.enter="submit" /> <el-input v-model="form.password" class="login-form__input" placeholder="请输入密码" type="password" show-password autocomplete="current-password" aria-label="密码" @keyup.enter="submit" />
</div>
</el-form-item> </el-form-item>
<el-checkbox v-model="rememberUsername" class="login-form__remember" @change="syncRememberedUsername">记住我的账号</el-checkbox> <el-checkbox v-model="rememberUsername" class="login-form__remember" @change="syncRememberedUsername">记住我的账号</el-checkbox>
<el-button type="primary" native-type="submit" :loading="submitting" class="login-submit">{{ submitting ? '正在登录' : '登录' }}</el-button> <el-button type="primary" native-type="submit" :loading="submitting" class="login-submit">{{ submitting ? '正在登录' : '登录' }}</el-button>
......
...@@ -510,23 +510,29 @@ body { margin: 0; } ...@@ -510,23 +510,29 @@ body { margin: 0; }
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
/* Chrome/Edge 自动填充会延后重绘浅色背景;禁用延迟并裁剪背景,保持外层玻璃输入框可见。 */ /* Chrome/Edge 自动填充时不在原生 input 内容区绘制背景,避免内阴影的矩形边缘形成横线。 */
.login-form__input .el-input__inner:-webkit-autofill, .login-form__input .el-input__inner:-webkit-autofill,
.login-form__input .el-input__inner:-webkit-autofill:hover, .login-form__input .el-input__inner:-webkit-autofill:hover,
.login-form__input .el-input__inner:-webkit-autofill:focus, .login-form__input .el-input__inner:-webkit-autofill:focus,
.login-form__input .el-input__inner:-webkit-autofill:active { .login-form__input .el-input__inner:-webkit-autofill:active {
-webkit-text-fill-color: var(--login-text-primary) !important; -webkit-text-fill-color: var(--login-text-primary) !important;
caret-color: var(--login-text-primary); caret-color: var(--login-text-primary);
background: #091120 !important; background: transparent !important;
background-color: #091120 !important; background-color: transparent !important;
background-image: none !important; -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
-webkit-background-clip: border-box; box-shadow: 0 0 0 1000px transparent inset !important;
background-clip: border-box;
-webkit-box-shadow: 0 0 0 1000px #091120 inset !important;
box-shadow: 0 0 0 1000px #091120 inset !important;
transition: none !important; transition: none !important;
} }
/* 代码作用(白话):让密码框外层占满 Element Plus 表单项的可用宽度,保持它与账号框同宽。关联文件:LoginView.js、login-experience.spec.js。关联逻辑(调用链/数据流):登录表单渲染 -> 密码外层宽度 -> 原生密码 input 宽度 -> 页面视觉一致。 */
.login-password-field {
width: 100%;
}
.login-password-field .el-input__inner[type="password"]::placeholder {
-webkit-text-fill-color: rgba(187, 204, 232, .54) !important;
}
@media (max-width: 1200px) { @media (max-width: 1200px) {
.login-panel { .login-panel {
left: clamp(48px, 8vw, 96px); left: clamp(48px, 8vw, 96px);
......
...@@ -125,3 +125,10 @@ test('renders the login page with its Vite-resolved black-hole background', asyn ...@@ -125,3 +125,10 @@ test('renders the login page with its Vite-resolved black-hole background', asyn
expect(backgroundImage).toContain('url('); expect(backgroundImage).toContain('url(');
expect(backgroundImage).toContain('black_hole'); expect(backgroundImage).toContain('black_hole');
}); });
/** Plain purpose: keep the password input inside the browser-autofill compatibility container used by the working 5173 login page. Related files: LoginView.js, app.css. Flow: password autofill -> compatibility container/style -> user submits the real login form. */
test('keeps the password input inside its autofill compatibility wrapper', async ({ page }) => {
await mockUnauthenticatedSession(page);
await page.goto('/asset/#/login');
await expect(page.locator('.login-password-field input[aria-label="密码"]')).toBeVisible();
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment