GithubBackup/gemini-balance
1
0
Fork 0
mirror of https://github.com/snailyp/gemini-balance.git synced 2026-05-26 18:59:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: 优化配置编辑器模态框样式与结构

Browse Source 
- 调整模态框 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 结构。
This commit is contained in:
snaily
2025-04-05 23:14:37 +08:00
parent 5fc59a00d0
commit d0cc48ad63
2 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/static/css/config_editor.css
View File

@@ -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 {

54
app/templates/config_editor.html
View File

@@ -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>