From d21ddd9e961d980d5316b2f27560330bfd444cd2 Mon Sep 17 00:00:00 2001 From: yml2213 Date: Sun, 11 Oct 2026 17:22:56 +0800 Subject: [PATCH] =?UTF-8?q?fix(admin):=20=E4=BF=AE=E5=A4=8D=E5=90=8E?= =?UTF-8?q?=E5=8F=B0=E7=99=BB=E5=BD=95=E9=A1=B5=E8=BE=93=E5=85=A5=E6=A1=86?= =?UTF-8?q?=E7=99=BD=E5=BA=95=E6=B5=85=E5=AD=97=E5=AF=BC=E8=87=B4=E8=BE=93?= =?UTF-8?q?=E5=85=A5=E5=86=85=E5=AE=B9=E4=B8=8D=E5=8F=AF=E8=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 根因：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 全部通过 --- .../features/admin/views/AdminLoginView.vue | 22 +++++-------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/frontend/src/features/admin/views/AdminLoginView.vue b/frontend/src/features/admin/views/AdminLoginView.vue index 8296558..1363aad 100644 --- a/frontend/src/features/admin/views/AdminLoginView.vue +++ b/frontend/src/features/admin/views/AdminLoginView.vue @@ -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; }