更改登录页样式

src/main/resources/templates/casLoginView.html

@@ -8,12 +8,12 @@
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
     <title>云海教育 · 统一身份认证平台</title>
-    <link rel="stylesheet" href="/cas/front/css/login.css?v=1.0" />
+    <link rel="stylesheet" href="/cas/front/css/login.css?v=1.1" />
     <script src="/cas/front/libs/jquery.min.js?v=2.1"></script>
     <script src="/cas/front/js/jsencrypt.min.js?v=2.1"></script>
     <script src="/cas/front/js/conf.js?v=2.3"></script>
     <script src="/cas/front/js/bschlogin.js?v=2.1"></script>
-    <script src="/cas/front/js/native-login.js?v=3.1"></script>
+    <script src="/cas/front/js/native-login.js?v=3.2"></script>
 </head>
 
 <body>
@@ -52,9 +52,13 @@
                         <input type="text" id="user_input" name="username"
                             placeholder="用户名/手机号/身份证号" autocomplete="username" />
                     </div>
-                    <div class="form-item">
+                    <div class="form-item pwd-item">
                         <input type="password" id="password_input" name="password"
                             placeholder="请输入密码" autocomplete="current-password" />
+                        <button type="button" class="eye-btn" id="eyeBtn" aria-label="显示密码">
+                            <img id="js_close_eye" src="/cas/front/image/eye-close.svg" alt="" />
+                            <img id="js_open_eye" src="/cas/front/image/eye-open.svg" alt="" />
+                        </button>
                     </div>
                     <input type="hidden" id="loginname_input" name="loginname" />
                     <input type="hidden" id="pwd_input" name="pwd" />
@@ -63,7 +67,7 @@
                     <div class="form-item" id="captchaPanel" style="display:none">
                         <div class="captcha-row">
                             <input type="text" id="captcha_input" placeholder="输入验证码" autocomplete="off" />
-                            <img id="captchaImg" title="点击刷新" />
+                            <img id="captchaImg" title="点击刷新" alt="" onclick="refreshCaptcha()" />
                         </div>
                     </div>
                     <button class="btn-submit" type="button" id="loginBtn" onclick="doLogin()">登&nbsp;&nbsp;录</button>

src/main/webapp/front/css/login.css

@@ -228,10 +228,54 @@ body {
 }
 
 .captcha-row img {
-    height: 46px;
+    flex: 0 0 120px;
+    width: 120px;
+    height: 54px;
     cursor: pointer;
     border-radius: var(--radius-input);
     border: 1px solid var(--border);
+    background: var(--input-bg);
+}
+
+/* 密码框：右侧白底眼睛按钮，明文/密文切换 */
+.pwd-item {
+    position: relative;
+}
+
+.pwd-item input {
+    padding-right: 76px;
+}
+
+.eye-btn {
+    position: absolute;
+    top: 50%;
+    right: 5px;
+    transform: translateY(-50%);
+    width: 60px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: #fff;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-input);
+    cursor: pointer;
+    transition: border-color 0.18s;
+}
+
+.eye-btn:hover {
+    border-color: var(--accent);
+}
+
+.eye-btn img {
+    width: 22px;
+    height: 22px;
+    display: block;
+}
+
+#js_open_eye {
+    display: none;
 }
 
 .btn-submit {

src/main/webapp/front/image/eye-close.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path d="M938.666667 317.866667m-29.866667 0a29.866667 29.866667 0 1 0 59.733333 0 29.866667 29.866667 0 1 0-59.733333 0Z"
+        fill="#B4B6B9" />
+    <path d="M876.8 454.4c6.4-6.4 12.8-14.933333 19.2-21.333333 8.533333-8.533333 6.4-23.466667-2.133333-29.866667-8.533333-8.533333-23.466667-6.4-29.866667 2.133333-85.333333 100.266667-209.066667 157.866667-341.333333 157.866667-166.4 0-317.866667-91.733333-394.666667-238.933333-6.4-10.666667-19.2-14.933333-27.733333-8.533334-10.666667 6.4-14.933333 19.2-8.533334 27.733334 14.933333 27.733333 32 53.333333 49.066667 76.8L64 499.2c-8.533333 8.533333-8.533333 23.466667 0 32 4.266667 4.266667 8.533333 6.4 14.933333 6.4 6.4 0 12.8-2.133333 17.066667-8.533333l72.533333-76.8c36.266667 40.533333 81.066667 72.533333 128 98.133333l-55.466666 102.4c-6.4 10.666667-2.133333 25.6 8.533333 32 2.133333 2.133333 6.4 2.133333 8.533333 2.133333 8.533333 0 17.066667-4.266667 21.333334-12.8l55.466666-104.533333c51.2 21.333333 106.666667 34.133333 162.133334 36.266667v106.666666c0 12.8 10.666667 23.466667 21.333333 23.466667 12.8 0 21.333333-10.666667 21.333333-23.466667v-106.666666c53.333333-2.133333 104.533333-12.8 151.466667-29.866667l55.466667 102.4c4.266667 8.533333 12.8 12.8 21.333333 12.8 2.133333 0 6.4 0 8.533333-2.133333 10.666667-6.4 12.8-19.2 8.533334-32l-53.333334-98.133334c40.533333-19.2 78.933333-44.8 113.066667-74.666666l74.666667 78.933333c4.266667 4.266667 10.666667 8.533333 17.066666 8.533333 4.266667 0 10.666667-2.133333 14.933334-6.4 8.533333-8.533333 8.533333-23.466667 0-32l-74.666667-78.933333z"
+        fill="#B4B6B9" />
+</svg>

src/main/webapp/front/image/eye-open.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path d="M938.666667 501.333333c0-2.133333 0-2.133333-2.133334-4.266666-91.733333-142.933333-256-232.533333-426.666666-232.533334-177.066667 0-337.066667 89.6-428.8 243.2-2.133333 2.133333-2.133333 4.266667-2.133334 6.4v8.533334c0 2.133333 0 4.266667 2.133334 6.4C174.933333 680.533333 334.933333 770.133333 512 770.133333c66.133333 0 66.133333 0 145.066667-12.8 10.666667-2.133333 19.2-12.8 17.066666-23.466666-2.133333-10.666667-12.8-19.2-23.466666-17.066667-74.666667 12.8-74.666667 12.8-136.533334 12.8-157.866667 0-300.8-78.933333-386.133333-211.2 85.333333-132.266667 228.266667-211.2 386.133333-211.2 153.6 0 302.933333 81.066667 386.133334 209.066667-23.466667 38.4-32 46.933333-70.4 87.466666-8.533333 8.533333-8.533333 21.333333 0 29.866667 4.266667 4.266667 10.666667 6.4 14.933333 6.4 6.4 0 10.666667-2.133333 14.933333-6.4 44.8-44.8 51.2-53.333333 83.2-106.666667 4.266667-8.533333 2.133333-19.2-4.266666-25.6z"
+        fill="#B4B6B9" />
+    <path d="M377.6 514.133333c0 74.666667 61.866667 136.533333 136.533333 136.533334s136.533333-61.866667 136.533334-136.533334-61.866667-136.533333-136.533334-136.533333-136.533333 61.866667-136.533333 136.533333z m232.533333 0c0 51.2-42.666667 93.866667-93.866666 93.866667-51.2 0-93.866667-42.666667-93.866667-93.866667s42.666667-93.866667 93.866667-93.866666c51.2 0 93.866667 42.666667 93.866666 93.866666z"
+        fill="#B4B6B9" />
+    <path d="M757.333333 686.933333m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#B4B6B9" />
+</svg>

src/main/webapp/front/js/native-login.js

@@ -32,10 +32,40 @@
         }
     }
 
+    var captchaRetryTimer = null;
+    var captchaRetryCount = 0;
+
     function refreshCaptcha() {
+        clearTimeout(captchaRetryTimer);
         document.getElementById("captchaImg").src = bschLogin.captchaSrc();
     }
 
+    // 验证码偶发加载失败：图片固定尺寸兜底占位，失败后自动重试 3 次，之后仍可点击手动刷新
+    function watchCaptchaImg() {
+        var img = document.getElementById("captchaImg");
+        img.addEventListener("load", function () {
+            captchaRetryCount = 0;
+        });
+        img.addEventListener("error", function () {
+            if (captchaRetryCount >= 3) return;
+            captchaRetryCount += 1;
+            captchaRetryTimer = setTimeout(refreshCaptcha, 600 * captchaRetryCount);
+        });
+    }
+
+    function bindEyeToggle() {
+        var pwd = document.getElementById("password_input");
+        var openEye = document.getElementById("js_open_eye");
+        var closeEye = document.getElementById("js_close_eye");
+        document.getElementById("eyeBtn").addEventListener("click", function () {
+            var visible = pwd.type === "password";
+            pwd.type = visible ? "text" : "password";
+            openEye.style.display = visible ? "block" : "none";
+            closeEye.style.display = visible ? "none" : "block";
+            this.setAttribute("aria-label", visible ? "隐藏密码" : "显示密码");
+        });
+    }
+
     function initLoginForm() {
         bschLogin.getPublicKey();
         bschLogin.isNeedCaptcha(setCaptcha);
@@ -142,6 +172,8 @@
     document.addEventListener("DOMContentLoaded", function () {
         bschLogin = new BschLogin(window.ssoServerHost);
 
+        watchCaptchaImg();
+        bindEyeToggle();
         document.getElementById("user_input").addEventListener("keydown", function (e) {
             if (e.key === "Enter") document.getElementById("password_input").focus();
         });