From c891b244b3eead5b5ea6dc89135e14d45cb7a1e4 Mon Sep 17 00:00:00 2001
From: rohow <rohow@foxmail.com>
Date: Mon, 31 Mar 2025 15:25:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(captcha):=20=E9=AA=8C=E8=AF=81=E7=A0=81?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/infra/net/nginx/captcha.html        | 57 ++++++++++++++++++------
 apps/infra/net/nginx/configmap-html.yaml | 57 ++++++++++++++++++------
 2 files changed, 88 insertions(+), 26 deletions(-)

diff --git a/apps/infra/net/nginx/captcha.html b/apps/infra/net/nginx/captcha.html
index e34958a..f010b3c 100644
--- a/apps/infra/net/nginx/captcha.html
+++ b/apps/infra/net/nginx/captcha.html
@@ -189,10 +189,6 @@
                 box-shadow: 0 0 0 0 #000, 0 0 0 2px #1cfafe
             }
 
-            .error-social {
-                margin-top: 35px
-            }
-
             .error-social > a {
                 width: 40px;
                 height: 40px;
@@ -208,21 +204,57 @@
             }
 
             #captcha-form {
-                margin: 0 auto;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                min-height: 100px;
-                margin-bottom: 30px;
+                position: relative;
+                width: 300px;
+                height: 65px;
+                overflow: hidden;
+                margin: 0 auto 30px;
                 background-color: #fff;
                 -webkit-box-shadow: 0 0 0 2px #000, 2px 2px 0 2px #1cfafe;
                 box-shadow: 0 0 0 2px #000, 2px 2px 0 2px #1cfafe;
             }
 
+            .loading {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 100%;
+                height: 65px;
+                gap: 10px;
+            }
+
             .loading:has(+ *) {
                 display: none;
             }
 
+            .loading::before {
+                content: "";
+                width: 20px;
+                height: 20px;
+                border: 2px solid #000;
+                border-right-color: #1cfafe;
+                border-radius: 50%;
+                animation: spin 1s linear infinite;
+            }
+
+            #captcha {
+                position: relative;
+                z-index: 2;
+            }
+
+            @keyframes spin {
+                from {
+                    transform: rotate(0deg);
+                }
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
             @media only screen and (max-width: 480px) {
                 .error .error-code {
                     height: 122px;
@@ -254,9 +286,8 @@
             <h2>请完成验证</h2>
             <p>请完成下面验证, 页面将会自动跳转到访问页面。</p>
             <form id="captcha-form" method="POST">
-                <div id="captcha" class="{{captcha_frontend_key}}" data-sitekey="{{captcha_site_key}}" data-callback="captchaCallback" data-size="flexible">
-                    <div class="loading">请稍等...</div>
-                </div>
+                <div id="captcha" class="{{captcha_frontend_key}}" data-sitekey="{{captcha_site_key}}" data-callback="captchaCallback" data-size="flexible"></div>
+                <div class="loading">验证码加载中, 请稍等...</div>
             </form>
             <a href="mailto:admin@dev.cm">联系我们</a>
         </div>
diff --git a/apps/infra/net/nginx/configmap-html.yaml b/apps/infra/net/nginx/configmap-html.yaml
index 818804f..770541d 100644
--- a/apps/infra/net/nginx/configmap-html.yaml
+++ b/apps/infra/net/nginx/configmap-html.yaml
@@ -196,10 +196,6 @@ data:
                 box-shadow: 0 0 0 0 #000, 0 0 0 2px #1cfafe
             }
 
-            .error-social {
-                margin-top: 35px
-            }
-
             .error-social > a {
                 width: 40px;
                 height: 40px;
@@ -215,21 +211,57 @@ data:
             }
 
             #captcha-form {
-                margin: 0 auto;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                min-height: 100px;
-                margin-bottom: 30px;
+                position: relative;
+                width: 300px;
+                height: 65px;
+                overflow: hidden;
+                margin: 0 auto 30px;
                 background-color: #fff;
                 -webkit-box-shadow: 0 0 0 2px #000, 2px 2px 0 2px #1cfafe;
                 box-shadow: 0 0 0 2px #000, 2px 2px 0 2px #1cfafe;
             }
 
+            .loading {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 100%;
+                height: 65px;
+                gap: 10px;
+            }
+
             .loading:has(+ *) {
                 display: none;
             }
 
+            .loading::before {
+                content: "";
+                width: 20px;
+                height: 20px;
+                border: 2px solid #000;
+                border-right-color: #1cfafe;
+                border-radius: 50%;
+                animation: spin 1s linear infinite;
+            }
+
+            #captcha {
+                position: relative;
+                z-index: 2;
+            }
+
+            @keyframes spin {
+                from {
+                    transform: rotate(0deg);
+                }
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
             @media only screen and (max-width: 480px) {
                 .error .error-code {
                     height: 122px;
@@ -261,9 +293,8 @@ data:
             <h2>请完成验证</h2>
             <p>请完成下面验证, 页面将会自动跳转到访问页面。</p>
             <form id="captcha-form" method="POST">
-                <div id="captcha" class="{{captcha_frontend_key}}" data-sitekey="{{captcha_site_key}}" data-callback="captchaCallback" data-size="flexible">
-                    <div class="loading">请稍等...</div>
-                </div>
+                <div id="captcha" class="{{captcha_frontend_key}}" data-sitekey="{{captcha_site_key}}" data-callback="captchaCallback" data-size="flexible"></div>
+                <div class="loading">验证码加载中, 请稍等...</div>
             </form>
             <a href="mailto:admin@dev.cm">联系我们</a>
         </div>