From d0cc48ad63121f2560569fa77c8514b792992f84 Mon Sep 17 00:00:00 2001
From: snaily <snaily@linux.do>
Date: Sat, 5 Apr 2025 23:14:37 +0800
Subject: [PATCH] =?UTF-8?q?Refactor:=20=E4=BC=98=E5=8C=96=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=BC=96=E8=BE=91=E5=99=A8=E6=A8=A1=E6=80=81=E6=A1=86?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=B8=8E=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整模态框 CSS (`app/static/css/config_editor.css`):
    - 将 `position` 改回 `fixed` 以确保其相对于视口定位。
    - 移除 `overflow: auto`，因为模态框内容通常不需要滚动条。
    - 移除 `backdrop-filter: blur(5px)` 以简化背景效果。
    - 添加 `align-items: center` 和 `justify-content: center` 以在 flex 容器中更好地居中模态框。
- 调整模态框 HTML (`app/templates/config_editor.html`):
    - 将 `apiKeyModal` 和 `resetConfirmModal` 两个模态框的 HTML 结构从主配置表单容器中移出，放置到 `</body>` 标签之前。这有助于改善 DOM 结构，并可能解决潜在的层叠或定位问题。

这些更改旨在改进配置编辑器页面上模态框的显示效果、定位方式和 DOM 结构。
---
 app/static/css/config_editor.css |  8 +++--
 app/templates/config_editor.html | 54 ++++++++++++++++----------------
 2 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/app/static/css/config_editor.css b/app/static/css/config_editor.css
index ed0f002..87f97f8 100644
--- a/app/static/css/config_editor.css
+++ b/app/static/css/config_editor.css
@@ -616,15 +616,17 @@ input:checked + .toggle-slider:before {
 /* Modal Styles */
 .modal {
     display: none; /* Hidden by default */
-    position: fixed; /* Stay in place */
+    position: fixed; /* Change back to fixed */
     z-index: 1001; /* Sit on top */
     left: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
+    /* overflow: auto; Removed */
     background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
-    backdrop-filter: blur(5px);
+    /* backdrop-filter: blur(5px); Removed */
+    align-items: center;
+    justify-content: center;
 }
 
 .modal.show {
diff --git a/app/templates/config_editor.html b/app/templates/config_editor.html
index 7bbdfc6..fd29aca 100644
--- a/app/templates/config_editor.html
+++ b/app/templates/config_editor.html
@@ -62,33 +62,6 @@
                     <small class="help-text">Gemini API密钥列表，每行一个</small>
                 </div>
 
-                <!-- API Key Add Modal -->
-                <div id="apiKeyModal" class="modal">
-                    <div class="modal-content">
-                        <span class="close-btn" id="closeApiKeyModalBtn">&times;</span>
-                        <h2>批量添加 API 密钥</h2>
-                        <p>每行粘贴一个或多个密钥，将自动提取有效密钥并去重。</p>
-                        <textarea id="apiKeyBulkInput" rows="10" placeholder="在此处粘贴 API 密钥..."></textarea>
-                        <div class="modal-actions">
-                            <button type="button" id="confirmAddApiKeyBtn" class="save-btn">确认添加</button>
-                            <button type="button" id="cancelAddApiKeyBtn" class="reset-btn">取消</button>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Reset Confirmation Modal -->
-                <div id="resetConfirmModal" class="modal">
-                    <div class="modal-content">
-                        <span class="close-btn" id="closeResetModalBtn">&times;</span>
-                        <h2>确认重置配置</h2>
-                        <p>确定要重置所有配置吗？<br>这将恢复到默认值，此操作不可撤销。</p>
-                        <div class="modal-actions">
-                            <button type="button" id="confirmResetBtn" class="reset-btn">确认重置</button>
-                            <button type="button" id="cancelResetBtn" class="save-btn">取消</button> <!-- Using save-btn style for cancel -->
-                        </div>
-                    </div>
-                </div>
-
                 <div class="config-item array-input">
                     <label for="ALLOWED_TOKENS">允许的令牌列表</label>
                      <div class="array-container" id="ALLOWED_TOKENS_container">
@@ -321,6 +294,33 @@
         © <script>document.write(new Date().getFullYear())</script> by <a href="https://linux.do/u/snaily" target="_blank"><img src="https://linux.do/user_avatar/linux.do/snaily/288/306510_2.gif" alt="snaily">snaily</a> | 
         <a href="https://github.com/snailyp/gemini-balance" target="_blank"><i class="fab fa-github"></i> GitHub</a>
     </div>
+
+    <!-- API Key Add Modal (Moved outside container) -->
+    <div id="apiKeyModal" class="modal">
+        <div class="modal-content">
+            <span class="close-btn" id="closeApiKeyModalBtn">&times;</span>
+            <h2>批量添加 API 密钥</h2>
+            <p>每行粘贴一个或多个密钥，将自动提取有效密钥并去重。</p>
+            <textarea id="apiKeyBulkInput" rows="10" placeholder="在此处粘贴 API 密钥..."></textarea>
+            <div class="modal-actions">
+                <button type="button" id="confirmAddApiKeyBtn" class="save-btn">确认添加</button>
+                <button type="button" id="cancelAddApiKeyBtn" class="reset-btn">取消</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Reset Confirmation Modal (Moved outside container) -->
+    <div id="resetConfirmModal" class="modal">
+        <div class="modal-content">
+            <span class="close-btn" id="closeResetModalBtn">&times;</span>
+            <h2>确认重置配置</h2>
+            <p>确定要重置所有配置吗？<br>这将恢复到默认值，此操作不可撤销。</p>
+            <div class="modal-actions">
+                <button type="button" id="confirmResetBtn" class="reset-btn">确认重置</button>
+                <button type="button" id="cancelResetBtn" class="save-btn">取消</button> <!-- Using save-btn style for cancel -->
+            </div>
+        </div>
+    </div>
     
     <script src="/static/js/config_editor.js"></script>
 </body>