From 343f40476ae8a787beb2c2c10dc9d62ec525d865 Mon Sep 17 00:00:00 2001 From: yinpeng <2291314224@qq.com> Date: Wed, 12 Feb 2025 14:46:34 +0800 Subject: [PATCH] feat: Improve UI/UX for API Key Status page and add enhancements - Updated the overall design aesthetics of the authentication page. - Added `fadeIn`, `slideDown`, `slideUp`, and `shake` animations for better user interaction. - Improved error message styling with a subtle background, padding, and animation. - Enhanced "API Key Status" page: - Implemented new theme with gradient backgrounds and glassmorphism effect. - Redesigned headings with underlines and improved hierarchy. - Added FontAwesome icons to improve the visual appeal and clarity (e.g., checkmarks, warnings, keys). - Applied better spacing, padding, and hover effects to list items and buttons. - Introduced animations for key lists to create fluid transitions on page load. - Differentiated valid and invalid keys using badges with appropriate colors and icons. - Copy Key Interaction: - Improved key copying functionality: - Added animations and hover effects to "Copy" buttons. - Updated the copied key selector logic to target `.key-text` for cleaner code. - Changed copy confirmation message for better clarity. - Styled the copy success message (`#copyStatus`) to appear fixed at the bottom with a blur effect. - Key List Enhancements: - Added fail count badges for individual keys with red warning styles. - Styled buttons for batch copying to display icons alongside text, matching the overall design. - Accessibility and Readability: - Refactored text sizes, weights, and alignments for smoother readability. - Enhanced color contrast and alignment for better accessibility. Notes: - New CSS animations have been smoothly integrated with no breaking changes. - All changes prioritize maintaining current functionality while enhancing user experience. --- app/templates/auth.html | 122 ++++++++++++++++--- app/templates/keys_status.html | 214 +++++++++++++++++++++++++-------- 2 files changed, 267 insertions(+), 69 deletions(-) diff --git a/app/templates/auth.html b/app/templates/auth.html index abfcc1e..fab9768 100644 --- a/app/templates/auth.html +++ b/app/templates/auth.html @@ -5,13 +5,14 @@ 验证页面 +
-

请输入验证令牌

+ +

安全验证

- - +
+ + +
+
{% if error %}

{{ error }}

diff --git a/app/templates/keys_status.html b/app/templates/keys_status.html index 2ec0438..01bcd73 100644 --- a/app/templates/keys_status.html +++ b/app/templates/keys_status.html @@ -5,107 +5,189 @@ API密钥状态 + @@ -114,36 +196,70 @@

API密钥状态

- 有效密钥 - + + + 有效密钥 + +

- 无效密钥 - + + + 无效密钥 + +

- 总密钥数：{{ total }} + 总密钥数：{{ total }}
@@ -177,12 +293,12 @@ } function copyKeys(type) { - const keys = Array.from(document.querySelectorAll(`#${type}Keys li span:first-child`)).map(span => span.textContent.trim()); + const keys = Array.from(document.querySelectorAll(`#${type}Keys .key-text`)).map(span => span.textContent.trim()); const jsonKeys = JSON.stringify(keys); copyToClipboard(jsonKeys) .then(() => { - showCopyStatus(`已成功复制 ${type === 'valid' ? '有效' : '无效'} 密钥到剪贴板`); + showCopyStatus(`已成功复制${type === 'valid' ? '有效' : '无效'}密钥到剪贴板`); }) .catch((err) => { console.error('无法复制文本: ', err);