fix(admin): 修复后台登录页输入框白底浅字导致输入内容不可见

- 根因:styles/admin.css 的全局表单增强规则带 !important,把 .el-input__wrapper 底色固定为白色
  (background-color: #ffffff !important),登录页原有的深色输入框样式被整体覆盖;
  而输入文字色仍是 #f1f5f9(近白),于是形成"白底浅字",输入内容与光标都看不见
- 影响范围:登录页用户名/密码/验证码三个输入框。用户名与密码被浏览器自动填充
  (浅底 + 深色文字)掩盖了问题,验证码框永远不会被自动填充,因此最先暴露
- 修复:登录页统一按浅色输入框配色,输入文字改为 #0f172a(白底对比度由 1.05:1 提升到 17.6:1),
  清理已被全局规则覆盖失效的深色 wrapper 声明,并补充说明注释避免再次误写
- 验证:headless Chrome + CDP 真实加载 /admin/login 并逐字输入,取计算样式确认
  文字色由 rgb(241,245,249) 变为 rgb(15,23,42),对照截图确认验证码清晰可见;
  前端门禁 npm run check / test:coverage / build 全部通过
This commit is contained in:
yml2213
2026-10-11 17:22:56 +08:00
parent cb8aceb433
commit d21ddd9e96
@@ -285,26 +285,16 @@ async function handleLogin() {
padding-bottom: 6px;
}
/* 注意:styles/admin.css 里的全局增强规则带 !important,把输入框底色固定成白色
(.el-input__wrapper { background-color: #ffffff !important }),本页原设计的深色输入框
无法生效;若仍把文字设成浅色就是"白底浅字",输入内容与光标都看不见
(验证码框不会被浏览器自动填充,因此最先暴露该问题)。
这里统一按浅色输入框配色:深色文字 + 中灰占位符;白底、边框与蓝色焦点环由该全局规则提供。 */
.admin-form :deep(.el-input__wrapper) {
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
border-radius: 10px;
padding: 0 12px;
transition:
box-shadow 0.2s,
background 0.2s;
}
.admin-form :deep(.el-input__wrapper:hover) {
background: rgba(255, 255, 255, 0.06);
}
.admin-form :deep(.el-input__wrapper.is-focus) {
background: rgba(255, 255, 255, 0.06);
box-shadow:
0 0 0 1px rgba(20, 119, 255, 0.45) inset,
0 0 0 3px rgba(20, 119, 255, 0.08);
}
.admin-form :deep(.el-input__inner) {
color: #f1f5f9;
color: #0f172a;
font-size: 14px;
height: 44px;
}