feat: 实现API请求重试并改进UI/UX

主要变更：

1.  **API 请求重试机制:**
    *   在配置 (`.env.example`, `config.py`, `constants.py`) 中添加 `MAX_RETRIES` 设置，用于控制 API 请求失败后的最大重试次数 (默认为 3)。
    *   更新 `RetryHandler` (`retry_handler.py`) 以使用此配置。
    *   将 `RetryHandler` 应用于 Gemini 和 OpenAI 的内容生成路由 (`gemini_routes.py`, `openai_routes.py`)，使其能够根据配置进行重试。
    *   在配置编辑器页面 (`config_editor.html`) 添加 `MAX_RETRIES` 的输入字段。

2.  **密钥状态页面 (Keys Status) UI/UX 改进:**
    *   默认隐藏 API 密钥的完整内容，仅显示部分字符 (`keys_status.html`)，提高安全性。
    *   添加了切换按钮和相应的 JavaScript (`keys_status.js`) 及 CSS (`keys_status.css`)，允许用户点击查看或隐藏完整的密钥。
    *   更新了“复制密钥”功能 (`keys_status.js`)，确保复制的是完整的密钥而非掩码后的部分。

3.  **错误日志页面 (Error Logs) 重构与改进:**
    *   重构了 HTML 结构 (`error_logs.html`)，使用更一致和语义化的 class（如 `config-section`, `controls-container`, `styled-table`, `status-indicator`），并移除了 Bootstrap 依赖。
    *   更新了 CSS (`error_logs.css`) 以匹配新的 HTML 结构，改进了页面布局和视觉样式。
    *   改进了 JavaScript (`error_logs.js`)，优化了加载、无数据、错误状态的显示逻辑，改进了分页功能，并添加了通用的通知显示函数 (`showNotification`)。
    *   在错误日志表格和详情弹窗中添加了“错误类型”列/字段。

4.  **其他:**
    *   对聊天服务 (`gemini_chat_service.py`, `openai_chat_service.py`) 和密钥管理器 (`key_manager.py`) 进行了相关更新

.env.example

@@ -10,6 +10,7 @@ SHOW_SEARCH_LINK=true
 SHOW_THINKING_PROCESS=true
 BASE_URL=https://generativelanguage.googleapis.com/v1beta
 MAX_FAILURES=10
+MAX_RETRIES=3
 # 请求超时时间（秒）
 TIME_OUT=300
 #########################image_generate 相关配置###########################

app/config/config.py

@@ -9,7 +9,7 @@ from pydantic import ValidationError
 from pydantic_settings import BaseSettings
 from sqlalchemy import insert, update, select
 
-from app.core.constants import API_VERSION, DEFAULT_CREATE_IMAGE_MODEL, DEFAULT_FILTER_MODELS, DEFAULT_MODEL, DEFAULT_STREAM_CHUNK_SIZE, DEFAULT_STREAM_LONG_TEXT_THRESHOLD, DEFAULT_STREAM_MAX_DELAY, DEFAULT_STREAM_MIN_DELAY, DEFAULT_STREAM_SHORT_TEXT_THRESHOLD, DEFAULT_TIMEOUT
+from app.core.constants import API_VERSION, DEFAULT_CREATE_IMAGE_MODEL, DEFAULT_FILTER_MODELS, DEFAULT_MODEL, DEFAULT_STREAM_CHUNK_SIZE, DEFAULT_STREAM_LONG_TEXT_THRESHOLD, DEFAULT_STREAM_MAX_DELAY, DEFAULT_STREAM_MIN_DELAY, DEFAULT_STREAM_SHORT_TEXT_THRESHOLD, DEFAULT_TIMEOUT, MAX_RETRIES
 from app.log.logger import get_config_logger
 # 延迟导入以避免循环依赖，仅在 sync_initial_settings 中使用
 # from app.database.connection import database
@@ -36,6 +36,7 @@ class Settings(BaseSettings):
     MAX_FAILURES: int = 3
     TEST_MODEL: str = DEFAULT_MODEL
     TIME_OUT: int = DEFAULT_TIMEOUT
+    MAX_RETRIES: int = MAX_RETRIES
     
     # 模型相关配置
     SEARCH_MODELS: List[str] = ["gemini-2.0-flash-exp"]

app/core/constants.py

@@ -5,6 +5,7 @@
 # API相关常量
 API_VERSION = "v1beta"
 DEFAULT_TIMEOUT = 300  # 秒
+MAX_RETRIES = 3  # 最大重试次数
 
 # 模型相关常量
 SUPPORTED_ROLES = ["user", "model", "system"]

app/handler/retry_handler.py

@@ -3,6 +3,7 @@
 from functools import wraps
 from typing import Callable, TypeVar
 
+from app.core.constants import MAX_RETRIES
 from app.log.logger import get_retry_logger
 
 T = TypeVar("T")
@@ -12,7 +13,7 @@ logger = get_retry_logger()
 class RetryHandler:
     """重试处理装饰器"""
 
-    def __init__(self, max_retries: int = 3, key_arg: str = "api_key"):
+    def __init__(self, max_retries: int = MAX_RETRIES, key_arg: str = "api_key"):
         self.max_retries = max_retries
         self.key_arg = key_arg
 

app/router/gemini_routes.py

@@ -87,7 +87,7 @@ async def list_models(
 
 @router.post("/models/{model_name}:generateContent")
 @router_v1beta.post("/models/{model_name}:generateContent")
-@RetryHandler(max_retries=3, key_arg="api_key")
+@RetryHandler(max_retries=settings.MAX_RETRIES, key_arg="api_key")
 async def generate_content(
     model_name: str,
     request: GeminiRequest,
@@ -118,7 +118,7 @@ async def generate_content(
 
 @router.post("/models/{model_name}:streamGenerateContent")
 @router_v1beta.post("/models/{model_name}:streamGenerateContent")
-@RetryHandler(max_retries=3, key_arg="api_key")
+@RetryHandler(max_retries=settings.MAX_RETRIES, key_arg="api_key")
 async def stream_generate_content(
     model_name: str,
     request: GeminiRequest,

app/router/openai_routes.py

@@ -62,7 +62,7 @@ async def list_models(
 
 @router.post("/v1/chat/completions")
 @router.post("/hf/v1/chat/completions")
-@RetryHandler(max_retries=3, key_arg="api_key")
+@RetryHandler(max_retries=settings.MAX_RETRIES, key_arg="api_key")
 async def chat_completion(
     request: ChatRequest,
     _=Depends(security_service.verify_authorization),

app/service/chat/gemini_chat_service.py

@@ -174,7 +174,7 @@ class GeminiChatService:
     ) -> AsyncGenerator[str, None]:
         """流式生成内容"""
         retries = 0
-        max_retries = 3
+        max_retries = settings.MAX_RETRIES
         payload = _build_payload(model, request)
         while retries < max_retries:
             try:
@@ -225,8 +225,9 @@ class GeminiChatService:
                 )
                 
                 # 尝试切换 API Key
-                api_key = await self.key_manager.handle_api_failure(api_key)
+                api_key = await self.key_manager.handle_api_failure(api_key,retries)
-                logger.info(f"Switched to new API key: {api_key}")
+                if api_key:
+                    logger.info(f"Switched to new API key: {api_key}")
                 if retries >= max_retries:
                     logger.error(
                         f"Max retries ({max_retries}) reached for streaming. Raising error"

app/service/chat/openai_chat_service.py

@@ -219,7 +219,7 @@ class OpenAIChatService:
     ) -> AsyncGenerator[str, None]:
         """处理流式聊天完成，添加重试逻辑"""
         retries = 0
-        max_retries = 3
+        max_retries = settings.MAX_RETRIES
         while retries < max_retries:
             try:
                 tool_call_flag = False
@@ -281,8 +281,9 @@ class OpenAIChatService:
                 )
                 
                 # 尝试切换 API Key
-                api_key = await self.key_manager.handle_api_failure(api_key)
+                api_key = await self.key_manager.handle_api_failure(api_key,retries)
-                logger.info(f"Switched to new API key: {api_key}")
+                if api_key:
+                    logger.info(f"Switched to new API key: {api_key}")
                 if retries >= max_retries:
                     logger.error(
                         f"Max retries ({max_retries}) reached for streaming. Raising error"

app/service/key/key_manager.py

@@ -52,7 +52,7 @@ class KeyManager:
                 # await self.reset_failure_counts() 取消重置
                 return current_key
 
-    async def handle_api_failure(self, api_key: str) -> str:
+    async def handle_api_failure(self, api_key: str,retries: int) -> str:
         """处理API调用失败"""
         async with self.failure_count_lock:
             self.key_failure_counts[api_key] += 1
@@ -60,8 +60,10 @@ class KeyManager:
                 logger.warning(
                     f"API key {api_key} has failed {self.MAX_FAILURES} times"
                 )
-
+        if retries < settings.MAX_RETRIES:
-        return await self.get_next_working_key()
+            return await self.get_next_working_key()
+        else: 
+            return ""
 
     def get_fail_count(self, key: str) -> int:
         """获取指定密钥的失败次数"""

app/static/css/error_logs.css

@@ -1,271 +1,331 @@
-/* 错误日志页面样式 */
+/* error_logs.css - Styles specific to the error logs page, complementing config_editor.css */
 
-/* 全局样式 */
+/* Inherit body, container, h1, nav-tabs, config-section, scroll-buttons, refresh-btn, copyright from config_editor.css */
-body {
+
-    font-family: 'Roboto', sans-serif;
+/* Style the controls container */
-    background-color: #f8f9fa;
+.controls-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 8px;
+    border: 1px solid rgba(0,0,0,0.05);
+    flex-wrap: wrap; /* Allow wrapping on smaller screens */
+    gap: 15px; /* Add gap between items */
+}
+
+.page-size-selector {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.page-size-selector label {
+    font-weight: bold;
+    color: #2c3e50;
+    margin-bottom: 0; /* Override default label margin */
+}
+
+.page-size-selector select {
+    padding: 8px 12px;
+    border: 1px solid rgba(0,0,0,0.1);
+    border-radius: 6px;
+    background-color: white;
+    font-size: 14px;
+    min-width: 70px; /* Ensure select has some width */
+}
+
+.page-size-selector span {
+    color: #2c3e50;
+}
+
+/* Style the action button (refresh) */
+.action-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 25px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: bold;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+}
+
+.action-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 15px rgba(118, 75, 162, 0.2);
+}
+
+.action-btn i {
+    font-size: 1em;
+}
+
+/* Table container and styled table */
+.table-container {
+    overflow-x: auto; /* Allow horizontal scrolling for table */
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    border: 1px solid rgba(0,0,0,0.05);
+}
+
+.styled-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
     color: #333;
 }
 
-.container {
+.styled-table thead tr {
-    max-width: 1200px;
+    background-color: #f8f9fa; /* Light grey header */
-    margin: 0 auto;
+    text-align: left;
-    padding: 20px;
+    font-weight: bold;
+    color: #2c3e50;
+    border-bottom: 2px solid #dee2e6;
 }
 
-h1 {
+.styled-table th,
-    color: #764ba2;
+.styled-table td {
-    font-weight: 700;
+    padding: 12px 15px;
-    margin-bottom: 0;
+    border-bottom: 1px solid #eee; /* Lighter border for rows */
+    vertical-align: middle;
 }
 
-/* 导航栏样式 */
+.styled-table tbody tr {
-.nav-tabs {
+    transition: background-color 0.2s ease;
-    display: flex;
-    margin-bottom: 20px;
-    border-bottom: none;
 }
 
-.tab-link {
+.styled-table tbody tr:hover {
-    padding: 10px 20px;
+    background-color: #f1f1f1; /* Subtle hover effect */
-    margin-right: 5px;
-    color: #555;
-    text-decoration: none;
-    border-radius: 5px;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
 }
 
-.tab-link i {
+.styled-table tbody tr:last-of-type {
-    margin-right: 5px;
+    border-bottom: none; /* Remove border from last row */
 }
 
-.tab-link:hover {
+/* Error log content truncation */
-    background-color: #f0f0f0;
-    color: #764ba2;
-}
-
-.tab-link.active {
-    background-color: #764ba2;
-    color: white;
-}
-
-/* 卡片样式 */
-.card {
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    margin-bottom: 20px;
-    border: none;
-}
-
-.card-header {
-    background-color: #f8f9fa;
-    border-bottom: 1px solid #eee;
-    padding: 15px 20px;
-    border-radius: 10px 10px 0 0 !important;
-}
-
-.card-body {
-    padding: 20px;
-}
-
-.card-footer {
-    background-color: #f8f9fa;
-    border-top: 1px solid #eee;
-    padding: 15px 20px;
-    border-radius: 0 0 10px 10px !important;
-}
-
-/* 表格样式 */
-.table {
-    font-size: 0.9rem;
-}
-
-.table th {
-    background-color: #f8f9fa;
-    font-weight: 600;
-}
-
-/* 错误日志内容截断 */
 .error-log-content {
-    max-width: 300px;
+    max-width: 250px; /* Adjust as needed */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    cursor: help; /* Indicate it's expandable/clickable */
 }
 
-/* 模态框样式 */
+/* Style for the 'View Details' button */
-.modal-dialog {
+.btn-view-details {
-    max-width: 800px;
+    background-color: #667eea;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: background-color 0.3s ease;
 }
 
-pre {
+.btn-view-details:hover {
-    white-space: pre-wrap;
+    background-color: #5a6fd0;
-    word-wrap: break-word;
-    max-height: 300px;
-    overflow-y: auto;
 }
 
-/* 分页样式 */
+/* Status Indicators (Loading, No Data, Error) */
-.pagination .page-item.active .page-link {
+.status-indicator {
-    background-color: #0d6efd;
+    text-align: center;
-    border-color: #0d6efd;
+    padding: 30px 15px;
+    margin: 20px 0;
+    border-radius: 8px;
+    display: none; /* Hidden by default */
+    color: #555;
+}
+
+.status-indicator.loading {
+    background-color: rgba(240, 240, 240, 0.7);
+}
+
+.status-indicator.no-data {
+     background-color: rgba(240, 240, 240, 0.7);
+}
+
+.status-indicator.error {
+    background-color: rgba(231, 76, 60, 0.1); /* Light red background */
+    color: #c0392b; /* Darker red text */
+    font-weight: bold;
+}
+
+.status-indicator p {
+    margin-top: 10px;
+    margin-bottom: 0;
+    font-size: 1.1em;
+}
+
+/* Basic spinner animation */
+.spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border-left-color: #667eea;
+    animation: spin 1s ease infinite;
+    margin: 0 auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Pagination Styles */
+.pagination-container {
+    display: flex;
+    justify-content: center;
+    padding: 20px 0;
+    margin-top: 20px;
+    border-top: 1px solid rgba(0,0,0,0.1);
+}
+
+.pagination {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    gap: 5px;
+}
+
+.pagination .page-item {
+    margin: 0;
 }
 
 .pagination .page-link {
-    color: #0d6efd;
+    display: block;
-}
+    padding: 8px 12px;
-
+    color: #667eea;
-/* 按钮样式 */
+    background-color: white;
-.btn-view-details {
+    border: 1px solid #ddd;
-    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
-    font-size: 0.8rem;
-}
-
-/* 加载指示器样式 */
-#loadingIndicator .spinner-border {
-    width: 3rem;
-    height: 3rem;
-}
-
-/* 刷新按钮样式 */
-.refresh-btn {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: #764ba2;
-    color: white;
-    border: none;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    z-index: 1000;
-    transition: all 0.3s ease;
-}
-
-.refresh-btn:hover {
-    background-color: #5d3b82;
-    transform: scale(1.1);
-}
-
-.refresh-btn i {
-    font-size: 18px;
-}
-
-.rotating {
-    animation: rotate 1s linear infinite;
-}
-
-@keyframes rotate {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-}
-
-/* 滚动按钮样式 */
-.scroll-buttons {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    z-index: 1000;
-}
-
-.scroll-btn {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: #764ba2;
-    color: white;
-    border: none;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.scroll-btn:hover {
-    background-color: #5d3b82;
-    transform: scale(1.1);
-}
-
-/* 版权信息样式 */
-.copyright {
-    text-align: center;
-    margin-top: 30px;
-    padding: 20px 0;
-    color: #666;
-    font-size: 0.9rem;
-    border-top: 1px solid #eee;
-}
-
-.copyright a {
-    color: #764ba2;
     text-decoration: none;
+    transition: all 0.3s ease;
+    font-size: 14px;
 }
 
-.copyright a:hover {
+.pagination .page-link:hover {
-    text-decoration: underline;
+    background-color: #f0f0f0;
+    border-color: #ccc;
 }
 
-.copyright img {
+.pagination .page-item.active .page-link {
-    width: 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    height: 20px;
-    border-radius: 50%;
-    vertical-align: middle;
-    margin-right: 5px;
-}
-
-/* 复制状态提示 */
-#copyStatus {
-    position: fixed;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: rgba(0, 0, 0, 0.7);
     color: white;
-    padding: 10px 20px;
+    border-color: #667eea;
-    border-radius: 5px;
+    font-weight: bold;
-    z-index: 1000;
-    opacity: 0;
-    transition: opacity 0.3s ease;
 }
 
-#copyStatus.show {
+.pagination .page-item.disabled .page-link {
-    opacity: 1;
+    color: #aaa;
+    pointer-events: none;
+    background-color: #f9f9f9;
+    border-color: #ddd;
 }
 
-/* 响应式调整 */
+/* Modal Styles (Inherit base from config_editor.css, add specifics) */
+#logDetailModal .modal-content {
+    max-width: 800px; /* Wider modal for logs */
+}
+
+#logDetailModal h2 {
+    font-size: 1.5em;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+}
+
+.modal-body-content {
+    max-height: 60vh; /* Limit height and allow scrolling */
+    overflow-y: auto;
+    padding-right: 15px; /* Space for scrollbar */
+}
+
+.detail-item {
+    margin-bottom: 15px;
+}
+
+.detail-item h6 {
+    font-weight: bold;
+    color: #2c3e50;
+    margin-bottom: 5px;
+}
+
+.detail-item p,
+.detail-item pre {
+    background-color: #f8f9fa;
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    font-size: 14px;
+    color: #333;
+    margin: 0;
+    white-space: pre-wrap; /* Ensure pre content wraps */
+    word-wrap: break-word;
+}
+
+.detail-item pre {
+     max-height: 200px; /* Limit height of individual pre blocks */
+     overflow-y: auto;
+}
+
+/* Notification Style (Inherited from config_editor.css) */
+#copyStatus {
+    /* Uses .notification styles from config_editor.css */
+    background-color: rgba(39, 174, 96, 0.9); /* Green for success */
+}
+
+/* Responsive Adjustments */
 @media (max-width: 768px) {
-    .d-flex.justify-content-between {
+    .controls-container {
         flex-direction: column;
-        align-items: flex-start !important;
+        align-items: stretch; /* Stretch items to full width */
     }
-    
+
-    .d-flex.justify-content-between > div {
+    .page-size-selector {
-        margin-top: 1rem;
+        justify-content: center; /* Center page size selector */
-        width: 100%;
     }
-    
+
-    .card-header .d-flex {
+    .action-btn {
-        flex-direction: column;
+        width: 100%; /* Full width button */
+        justify-content: center;
     }
-    
+
-    .card-header .input-group {
+    .styled-table {
-        margin-bottom: 0.5rem;
+        font-size: 13px;
-        margin-right: 0 !important;
     }
-    
+
-    #refreshBtn {
+    .styled-table th,
-        width: 100%;
+    .styled-table td {
+        padding: 10px 8px;
+    }
+
+    .error-log-content {
+        max-width: 150px;
+    }
+
+    #logDetailModal .modal-content {
+        width: 95%;
+        padding: 20px;
+    }
+}
+
+@media (max-width: 480px) {
+     .styled-table {
+        font-size: 12px;
+    }
+     .btn-view-details {
+        padding: 4px 8px;
+        font-size: 11px;
     }
 }

app/static/css/keys_status.css

@@ -186,12 +186,16 @@ li:hover {
     display: flex;
     align-items: center;
     gap: 15px;
-    flex: 1;
+    flex: 1; /* Allow key-info to take up available space */
+    min-width: 0; /* Prevent flex item from overflowing */
 }
 
 .key-text {
     font-family: 'Roboto Mono', monospace;
     color: #2c3e50;
+    word-break: break-all; /* Ensure long keys wrap */
+    flex-shrink: 1; /* Allow key text to shrink if needed */
+    margin-right: 10px; /* Add space between key text and toggle button */
 }
 
 .fail-count {
@@ -443,6 +447,27 @@ li:hover {
     to { transform: rotate(360deg); }
 }
 
+/* Toggle Visibility Button Styles */
+.toggle-vis-btn {
+    background: none;
+    border: none;
+    color: #7f8c8d; /* Subtle color */
+    cursor: pointer;
+    padding: 5px;
+    font-size: 16px;
+    transition: color 0.3s ease;
+    margin-left: 5px; /* Space from key text */
+    flex-shrink: 0; /* Prevent button from shrinking */
+}
+
+.toggle-vis-btn:hover {
+    color: #34495e; /* Darker color on hover */
+}
+
+.toggle-vis-btn i {
+    vertical-align: middle;
+}
+
 @media (max-width: 768px) {
     .container {
         width: 100%;
@@ -478,6 +503,7 @@ li:hover {
         flex-direction: column;
         align-items: flex-start;
         gap: 8px;
+        width: 100%; /* Ensure key-info takes full width */
     }
     li {
         flex-direction: column;
@@ -493,7 +519,8 @@ li:hover {
         justify-content: center;
     }
     .key-text {
-        word-break: break-all;
+        /* word-break: break-all; */ /* Already applied above */
+        margin-right: 0; /* Remove right margin on smaller screens */
     }
     .scroll-buttons {
         right: 10px;

app/static/js/error_logs.js

@@ -1,258 +1,397 @@
-// 错误日志页面JavaScript
+// 错误日志页面JavaScript (Updated for new structure, no Bootstrap)
 
 // 页面滚动功能
 function scrollToTop() {
-    window.scrollTo({
+    window.scrollTo({ top: 0, behavior: 'smooth' });
-        top: 0,
-        behavior: 'smooth'
-    });
 }
 
 function scrollToBottom() {
-    window.scrollTo({
+    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        top: document.body.scrollHeight,
-        behavior: 'smooth'
-    });
 }
 
 // 刷新页面功能
 function refreshPage(button) {
     if (button) {
-        button.classList.add('rotating');
+        // Use 'loading' class consistent with config_editor.css animation
+        button.classList.add('loading');
+        // Disable button while refreshing
+        button.disabled = true;
     }
-    
+
-    setTimeout(() => {
+    // Fetch new data instead of full reload for a smoother experience
-        window.location.reload();
+    loadErrorLogs().finally(() => {
-    }, 500);
+        if (button) {
+            // Remove loading class and re-enable button after fetch completes
+            button.classList.remove('loading');
+            button.disabled = false;
+        }
+    });
+    // Optional: Keep reload as fallback or if preferred
+    // setTimeout(() => {
+    //     window.location.reload();
+    // }, 500);
 }
 
 // 全局变量
 let currentPage = 1;
 let pageSize = 20;
-let totalPages = 1;
+// let totalPages = 1; // totalPages will be calculated dynamically based on API response if available, or based on fetched data length
-let errorLogs = [];
+let errorLogs = []; // Store fetched logs for details view
+
+// DOM Elements Cache
+let pageSizeSelector;
+let refreshBtn;
+let tableBody;
+let paginationElement;
+let loadingIndicator;
+let noDataMessage;
+let errorMessage;
+let logDetailModal;
+let modalCloseBtns; // Collection of close buttons for the modal
 
 // 页面加载完成后执行
 document.addEventListener('DOMContentLoaded', function() {
-    // 初始化页面大小选择器
+    // Cache DOM elements
-    const pageSizeSelector = document.getElementById('pageSize');
+    pageSizeSelector = document.getElementById('pageSize');
-    pageSizeSelector.value = pageSize;
+    refreshBtn = document.getElementById('refreshBtn');
-    pageSizeSelector.addEventListener('change', function() {
+    tableBody = document.getElementById('errorLogsTable');
-        pageSize = parseInt(this.value);
+    paginationElement = document.getElementById('pagination');
-        currentPage = 1; // 重置到第一页
+    loadingIndicator = document.getElementById('loadingIndicator');
-        loadErrorLogs();
+    noDataMessage = document.getElementById('noDataMessage');
-    });
+    errorMessage = document.getElementById('errorMessage');
-    
+    logDetailModal = document.getElementById('logDetailModal');
-    // 初始化刷新按钮
+    // Get all elements that should close the modal
-    document.getElementById('refreshBtn').addEventListener('click', function() {
+    modalCloseBtns = document.querySelectorAll('#closeLogDetailModalBtn, #closeModalFooterBtn');
-        loadErrorLogs();
+
-    });
+    // Initialize page size selector
-    
+    if (pageSizeSelector) {
-    // 加载错误日志数据
+        pageSizeSelector.value = pageSize;
+        pageSizeSelector.addEventListener('change', function() {
+            pageSize = parseInt(this.value);
+            currentPage = 1; // Reset to first page
+            loadErrorLogs();
+        });
+    }
+
+    // Initialize refresh button (using the one inside the controls container)
+    if (refreshBtn) {
+        refreshBtn.addEventListener('click', function() {
+            // Add loading state to the button itself
+            this.classList.add('loading');
+            this.disabled = true;
+            loadErrorLogs().finally(() => {
+                 this.classList.remove('loading');
+                 this.disabled = false;
+            });
+        });
+    }
+
+    // Initialize modal close buttons
+    if (logDetailModal && modalCloseBtns) {
+        modalCloseBtns.forEach(btn => {
+            btn.addEventListener('click', closeLogDetailModal);
+        });
+        // Optional: Close modal if clicking outside the content
+        logDetailModal.addEventListener('click', function(event) {
+            if (event.target === logDetailModal) {
+                closeLogDetailModal();
+            }
+        });
+    }
+
+    // Initial load of error logs
     loadErrorLogs();
 });
 
 // 加载错误日志数据
-function loadErrorLogs() {
+async function loadErrorLogs() {
     showLoading(true);
     showError(false);
     showNoData(false);
-    
+
     const offset = (currentPage - 1) * pageSize;
-    
+
-    fetch(`/api/logs/errors?limit=${pageSize}&offset=${offset}`)
+    try {
-        .then(response => {
+        const response = await fetch(`/api/logs/errors?limit=${pageSize}&offset=${offset}`);
-            if (!response.ok) {
+        if (!response.ok) {
-                throw new Error('网络响应异常');
+            // Try to get error message from response body
+            let errorData;
+            try {
+                errorData = await response.json();
+            } catch (e) {
+                // Ignore if response is not JSON
             }
-            return response.json();
+            throw new Error(errorData?.detail || `网络响应异常: ${response.statusText}`);
-        })
+        }
-        .then(data => {
+        const data = await response.json();
+        // Assuming the API returns an object like { logs: [], total: count }
+        // If it only returns an array, we can't get the total count accurately for pagination
+        if (Array.isArray(data)) {
             errorLogs = data;
-            renderErrorLogs();
+            renderErrorLogs(errorLogs); // Pass data directly
-            showLoading(false);
+            updatePagination(errorLogs.length, -1); // Indicate unknown total
-            
+        } else if (data && Array.isArray(data.logs)) {
-            if (errorLogs.length === 0) {
+            errorLogs = data.logs;
-                showNoData(true);
+            renderErrorLogs(errorLogs); // Pass logs array
-            }
+            updatePagination(errorLogs.length, data.total || -1); // Pass total count if available
-        })
+        } else {
-        .catch(error => {
+             throw new Error('无法识别的API响应格式');
-            console.error('获取错误日志失败:', error);
+        }
-            showLoading(false);
+
-            showError(true);
+
-        });
+        showLoading(false);
+
+        if (errorLogs.length === 0) {
+            showNoData(true);
+        }
+    } catch (error) {
+        console.error('获取错误日志失败:', error);
+        showLoading(false);
+        showError(true, error.message); // Show specific error message
+    }
 }
 
+
 // 渲染错误日志表格
-function renderErrorLogs() {
+function renderErrorLogs(logs) {
-    const tableBody = document.getElementById('errorLogsTable');
+    if (!tableBody) return;
-    tableBody.innerHTML = '';
+    tableBody.innerHTML = ''; // Clear previous entries
-    
+
-    errorLogs.forEach(log => {
+    if (!logs || logs.length === 0) {
+        // Handled by showNoData
+        return;
+    }
+
+    logs.forEach(log => {
         const row = document.createElement('tr');
-        
+
-        // 格式化日期
+        // Format date
-        const requestTime = new Date(log.request_time);
+        let formattedTime = 'N/A';
-        const formattedTime = requestTime.toLocaleString('zh-CN', {
+        try {
-            year: 'numeric',
+            const requestTime = new Date(log.request_time);
-            month: '2-digit',
+            if (!isNaN(requestTime)) {
-            day: '2-digit',
+                 formattedTime = requestTime.toLocaleString('zh-CN', {
-            hour: '2-digit',
+                    year: 'numeric', month: '2-digit', day: '2-digit',
-            minute: '2-digit',
+                    hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
-            second: '2-digit'
+                });
-        });
+            }
-        
+        } catch (e) { console.error("Error formatting date:", e); }
-        // 截断错误日志内容
+
+
+        // Truncate error log content for display
         const errorLogContent = log.error_log ? log.error_log.substring(0, 100) + (log.error_log.length > 100 ? '...' : '') : '无';
-        
+
         row.innerHTML = `
             <td>${log.id}</td>
             <td>${log.gemini_key || '无'}</td>
-            <td class="error-log-content">${errorLogContent}</td>
+            <td>${log.error_type || '未知'}</td>
+            <td class="error-log-content" title="${log.error_log || ''}">${errorLogContent}</td>
             <td>${log.model_name || '未知'}</td>
             <td>${formattedTime}</td>
             <td>
-                <button class="btn btn-sm btn-primary btn-view-details" data-log-id="${log.id}">
+                <button class="btn-view-details" data-log-id="${log.id}">
                     查看详情
                 </button>
             </td>
         `;
-        
+
         tableBody.appendChild(row);
     });
-    
+
-    // 添加详情按钮事件监听
+    // Add event listeners to new 'View Details' buttons
     document.querySelectorAll('.btn-view-details').forEach(button => {
         button.addEventListener('click', function() {
             const logId = parseInt(this.getAttribute('data-log-id'));
             showLogDetails(logId);
         });
     });
-    
-    // 更新分页
-    updatePagination();
 }
 
-// 显示错误日志详情
+// 显示错误日志详情 (Custom Modal Logic)
 function showLogDetails(logId) {
-    const log = errorLogs.find(log => log.id === logId);
+    const log = errorLogs.find(l => l.id === logId);
-    if (!log) return;
+    if (!log || !logDetailModal) return;
-    
+
-    // 格式化日期
+    // Format date
-    const requestTime = new Date(log.request_time);
+     let formattedTime = 'N/A';
-    const formattedTime = requestTime.toLocaleString('zh-CN', {
+     try {
-        year: 'numeric',
+         const requestTime = new Date(log.request_time);
-        month: '2-digit',
+         if (!isNaN(requestTime)) {
-        day: '2-digit',
+              formattedTime = requestTime.toLocaleString('zh-CN', {
-        hour: '2-digit',
+                 year: 'numeric', month: '2-digit', day: '2-digit',
-        minute: '2-digit',
+                 hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
-        second: '2-digit'
+             });
-    });
+         }
-    
+     } catch (e) { console.error("Error formatting date:", e); }
-    // 格式化请求消息
+
-    let formattedRequestMsg = '';
+
+    // Format request message (handle potential JSON)
+    let formattedRequestMsg = '无';
     if (log.request_msg) {
         try {
-            if (typeof log.request_msg === 'string') {
+            // Check if it's already an object/array
-                formattedRequestMsg = log.request_msg;
+            if (typeof log.request_msg === 'object' && log.request_msg !== null) {
-            } else {
+                 formattedRequestMsg = JSON.stringify(log.request_msg, null, 2);
-                formattedRequestMsg = JSON.stringify(log.request_msg, null, 2);
+            }
+            // Check if it's a JSON string
+            else if (typeof log.request_msg === 'string' && log.request_msg.trim().startsWith('{') || log.request_msg.trim().startsWith('[')) {
+                formattedRequestMsg = JSON.stringify(JSON.parse(log.request_msg), null, 2);
+            }
+             else {
+                formattedRequestMsg = String(log.request_msg);
             }
         } catch (e) {
-            formattedRequestMsg = String(log.request_msg);
+            formattedRequestMsg = String(log.request_msg); // Fallback to string
+            console.warn("Could not parse request_msg as JSON:", e);
         }
-    } else {
-        formattedRequestMsg = '无';
     }
-    
+
-    // 填充模态框内容
+    // Populate modal content
     document.getElementById('modalGeminiKey').textContent = log.gemini_key || '无';
+    document.getElementById('modalErrorType').textContent = log.error_type || '未知';
     document.getElementById('modalErrorLog').textContent = log.error_log || '无';
     document.getElementById('modalRequestMsg').textContent = formattedRequestMsg;
-    // Add model name display logic here - assuming an element with id 'modalModelName' exists
     document.getElementById('modalModelName').textContent = log.model_name || '未知';
     document.getElementById('modalRequestTime').textContent = formattedTime;
-    
+
-    // 显示模态框
+    // Show the modal
-    const modal = new bootstrap.Modal(document.getElementById('logDetailModal'));
+    logDetailModal.classList.add('show');
-    modal.show();
+    // Optional: Prevent body scrolling when modal is open
+    document.body.style.overflow = 'hidden';
 }
 
+// Close Log Detail Modal
+function closeLogDetailModal() {
+     if (logDetailModal) {
+        logDetailModal.classList.remove('show');
+        // Optional: Restore body scrolling
+        document.body.style.overflow = '';
+     }
+}
+
+
 // 更新分页控件
-function updatePagination() {
+function updatePagination(currentItemCount, totalItems) {
-    const paginationElement = document.getElementById('pagination');
+    if (!paginationElement) return;
-    paginationElement.innerHTML = '';
+    paginationElement.innerHTML = ''; // Clear existing pagination
-    
+
-    // 计算总页数
+    // Calculate total pages only if totalItems is known and valid
-    const totalCount = errorLogs.length;
+    let totalPages = 1;
-    totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+    if (totalItems >= 0) {
-    
+        totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
-    // 上一页按钮
+    } else if (currentItemCount < pageSize && currentPage === 1) {
-    const prevItem = document.createElement('li');
+        // If less items than page size fetched on page 1, assume it's the only page
-    prevItem.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
+        totalPages = 1;
-    prevItem.innerHTML = `<a class="page-link" href="#" aria-label="上一页"><span aria-hidden="true">&laquo;</span></a>`;
+    } else {
-    prevItem.addEventListener('click', function(e) {
+        // If total is unknown and more items might exist, we can't build full pagination
-        e.preventDefault();
+        // We can show Prev/Next based on current page and if items were returned
-        if (currentPage > 1) {
+        console.warn("Total item count unknown, pagination will be limited.");
-            currentPage--;
+        // Basic Prev/Next for unknown total
-            loadErrorLogs();
+        addPaginationLink(paginationElement, '&laquo;', currentPage > 1, () => { currentPage--; loadErrorLogs(); });
+        addPaginationLink(paginationElement, currentPage.toString(), true, null, true); // Current page number (non-clickable)
+        addPaginationLink(paginationElement, '&raquo;', currentItemCount === pageSize, () => { currentPage++; loadErrorLogs(); }); // Next enabled if full page was returned
+        return; // Exit here for limited pagination
+    }
+
+
+    const maxPagesToShow = 5; // Max number of page links to show
+    let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
+    let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+
+    // Adjust startPage if endPage reaches the limit first
+     if (endPage === totalPages) {
+        startPage = Math.max(1, endPage - maxPagesToShow + 1);
+    }
+
+
+    // Previous Button
+    addPaginationLink(paginationElement, '&laquo;', currentPage > 1, () => { currentPage--; loadErrorLogs(); });
+
+    // First Page Button
+    if (startPage > 1) {
+        addPaginationLink(paginationElement, '1', true, () => { currentPage = 1; loadErrorLogs(); });
+        if (startPage > 2) {
+            addPaginationLink(paginationElement, '...', false); // Ellipsis
         }
-    });
+    }
-    paginationElement.appendChild(prevItem);
+
-    
+    // Page Number Buttons
-    // 页码按钮
+    for (let i = startPage; i <= endPage; i++) {
-    for (let i = 1; i <= totalPages; i++) {
+        addPaginationLink(paginationElement, i.toString(), true, () => { currentPage = i; loadErrorLogs(); }, i === currentPage);
-        const pageItem = document.createElement('li');
+    }
-        pageItem.className = `page-item ${i === currentPage ? 'active' : ''}`;
+
-        pageItem.innerHTML = `<a class="page-link" href="#">${i}</a>`;
+     // Last Page Button
-        pageItem.addEventListener('click', function(e) {
+    if (endPage < totalPages) {
+        if (endPage < totalPages - 1) {
+             addPaginationLink(paginationElement, '...', false); // Ellipsis
+        }
+        addPaginationLink(paginationElement, totalPages.toString(), true, () => { currentPage = totalPages; loadErrorLogs(); });
+    }
+
+
+    // Next Button
+    addPaginationLink(paginationElement, '&raquo;', currentPage < totalPages, () => { currentPage++; loadErrorLogs(); });
+}
+
+// Helper function to add pagination links
+function addPaginationLink(parentElement, text, enabled, clickHandler, isActive = false) {
+    const pageItem = document.createElement('li');
+    pageItem.className = `page-item ${!enabled ? 'disabled' : ''} ${isActive ? 'active' : ''}`;
+
+    const pageLink = document.createElement('a');
+    pageLink.className = 'page-link';
+    pageLink.href = '#'; // Prevent page jump
+    pageLink.innerHTML = text;
+
+    if (enabled && clickHandler) {
+        pageLink.addEventListener('click', function(e) {
             e.preventDefault();
-            currentPage = i;
+            clickHandler();
-            loadErrorLogs();
         });
-        paginationElement.appendChild(pageItem);
+    } else if (!enabled) {
+         pageLink.addEventListener('click', e => e.preventDefault()); // Prevent click on disabled
     }
-    
+
-    // 下一页按钮
+
-    const nextItem = document.createElement('li');
+    pageItem.appendChild(pageLink);
-    nextItem.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
+    parentElement.appendChild(pageItem);
-    nextItem.innerHTML = `<a class="page-link" href="#" aria-label="下一页"><span aria-hidden="true">&raquo;</span></a>`;
-    nextItem.addEventListener('click', function(e) {
-        e.preventDefault();
-        if (currentPage < totalPages) {
-            currentPage++;
-            loadErrorLogs();
-        }
-    });
-    paginationElement.appendChild(nextItem);
 }
 
-// 显示/隐藏加载指示器
+
+// 显示/隐藏状态指示器 (using 'active' class)
 function showLoading(show) {
-    const loadingIndicator = document.getElementById('loadingIndicator');
+    if (loadingIndicator) loadingIndicator.style.display = show ? 'block' : 'none';
-    if (show) {
-        loadingIndicator.classList.remove('d-none');
-    } else {
-        loadingIndicator.classList.add('d-none');
-    }
 }
 
-// 显示/隐藏错误消息
-function showError(show) {
-    const errorMessage = document.getElementById('errorMessage');
-    if (show) {
-        errorMessage.classList.remove('d-none');
-    } else {
-        errorMessage.classList.add('d-none');
-    }
-}
-
-// 显示/隐藏无数据消息
 function showNoData(show) {
-    const noDataMessage = document.getElementById('noDataMessage');
+     if (noDataMessage) noDataMessage.style.display = show ? 'block' : 'none';
-    if (show) {
+}
-        noDataMessage.classList.remove('d-none');
+
-    } else {
+function showError(show, message = '加载错误日志失败，请稍后重试。') {
-        noDataMessage.classList.add('d-none');
+    if (errorMessage) {
+        errorMessage.style.display = show ? 'block' : 'none';
+        if (show) {
+            // Update the error message content
+            const p = errorMessage.querySelector('p');
+            if (p) p.textContent = message;
+        }
     }
 }
+
+// Function to show temporary status notifications (like copy success)
+function showNotification(message, type = 'success', duration = 3000) {
+    const notificationElement = document.getElementById('copyStatus'); // Or a more generic ID if needed
+    if (!notificationElement) return;
+
+    notificationElement.textContent = message;
+    notificationElement.className = `notification ${type} show`; // Add 'show' class
+
+    // Hide after duration
+    setTimeout(() => {
+        notificationElement.classList.remove('show');
+    }, duration);
+}
+
+// Example Usage (if copy functionality is added later):
+// showNotification('密钥已复制!', 'success');
+// showNotification('复制失败!', 'error');

app/static/js/keys_status.js

@@ -26,7 +26,7 @@ function copyToClipboard(text) {
 }
 
 function copyKeys(type) {
-    const keys = Array.from(document.querySelectorAll(`#${type}Keys .key-text`)).map(span => span.textContent.trim());
+    const keys = Array.from(document.querySelectorAll(`#${type}Keys .key-text`)).map(span => span.dataset.fullKey);
     const jsonKeys = JSON.stringify(keys);
     
     copyToClipboard(jsonKeys)
@@ -173,3 +173,22 @@ if ('serviceWorker' in navigator) {
             });
     });
 }
+function toggleKeyVisibility(button) {
+    const keyInfoDiv = button.closest('.key-info');
+    const keyTextSpan = keyInfoDiv.querySelector('.key-text');
+    const eyeIcon = button.querySelector('i');
+    const fullKey = keyTextSpan.dataset.fullKey;
+    const maskedKey = fullKey.substring(0, 4) + '...' + fullKey.substring(fullKey.length - 4);
+
+    if (keyTextSpan.textContent === maskedKey) {
+        keyTextSpan.textContent = fullKey;
+        eyeIcon.classList.remove('fa-eye');
+        eyeIcon.classList.add('fa-eye-slash');
+        button.title = '隐藏密钥';
+    } else {
+        keyTextSpan.textContent = maskedKey;
+        eyeIcon.classList.remove('fa-eye-slash');
+        eyeIcon.classList.add('fa-eye');
+        button.title = '显示密钥';
+    }
+}

app/templates/config_editor.html

@@ -101,6 +101,12 @@
                     <input type="number" id="TIME_OUT" name="TIME_OUT" min="1" max="600">
                     <small class="help-text">API请求的超时时间</small>
                 </div>
+                
+                <div class="config-item">
+                    <label for="MAX_RETRIES">最大重试次数</label>
+                    <input type="number" id="MAX_RETRIES" name="MAX_RETRIES" min="0" max="10">
+                    <small class="help-text">API请求失败后的最大重试次数</small>
+                </div>
             </div>
             
             <!-- 模型相关配置 -->

app/templates/error_logs.html

@@ -12,7 +12,9 @@
     <link rel="icon" href="/static/icons/icon-192x192.png">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+    <!-- Use config_editor.css for base styles -->
+    <link rel="stylesheet" href="{{ url_for('static', path='/css/config_editor.css') }}">
+    <!-- Keep error_logs.css for specific styles -->
     <link rel="stylesheet" href="{{ url_for('static', path='/css/error_logs.css') }}">
 </head>
 <body>
@@ -20,84 +22,74 @@
         <button class="refresh-btn" onclick="refreshPage(this)">
             <i class="fas fa-sync-alt"></i>
         </button>
-        <div class="row">
+        <h1>Gemini Balance</h1>
-            <div class="col-12">
+        <div class="nav-tabs">
-                <div class="d-flex justify-content-between align-items-center mb-4">
+            <a href="/config" class="tab-link">
-                    <h1>Gemini Balance</h1>
+                <i class="fas fa-cog"></i> 配置编辑
-                    <div class="nav-tabs">
+            </a>
-                        <a href="/config" class="tab-link">
+            <a href="/keys" class="tab-link">
-                            <i class="fas fa-cog"></i> 配置编辑
+                <i class="fas fa-key"></i> 密钥管理
-                        </a>
+            </a>
-                        <a href="/keys" class="tab-link">
+            <a href="/logs" class="tab-link active">
-                            <i class="fas fa-key"></i> 密钥管理
+                <i class="fas fa-exclamation-triangle"></i> 错误日志
-                        </a>
+            </a>
-                        <a href="/logs" class="tab-link active">
+        </div>
-                            <i class="fas fa-exclamation-triangle"></i> 错误日志
+
-                        </a>
+        <div class="config-section active"> <!-- Use config-section for consistent layout -->
-                    </div>
+            <h2><i class="fas fa-bug"></i> 错误日志列表</h2>
-                </div>
+
-                
+            <div class="controls-container"> <!-- New container for controls -->
-                <div class="card">
+                <div class="page-size-selector">
-                    <div class="card-header d-flex justify-content-between align-items-center">
+                    <label for="pageSize">每页显示:</label>
-                        <h5 class="mb-0">错误日志列表</h5>
+                    <select id="pageSize">
-                        <div class="d-flex">
+                        <option value="10">10</option>
-                            <div class="input-group me-2">
+                        <option value="20" selected>20</option>
-                                <span class="input-group-text">每页显示</span>
+                        <option value="50">50</option>
-                                <select id="pageSize" class="form-select">
+                        <option value="100">100</option>
-                                    <option value="10">10</option>
+                    </select>
-                                    <option value="20" selected>20</option>
+                    <span>条</span>
-                                    <option value="50">50</option>
-                                    <option value="100">100</option>
-                                </select>
-                                <span class="input-group-text">条</span>
-                            </div>
-                            <button id="refreshBtn" class="btn btn-primary">
-                                <i class="bi bi-arrow-clockwise"></i> 刷新
-                            </button>
-                        </div>
-                    </div>
-                    <div class="card-body">
-                        <div class="table-responsive">
-                            <table class="table table-striped table-hover">
-                                <thead>
-                                    <tr>
-                                        <th>ID</th>
-                                        <th>Gemini密钥</th>
-                                        <th>错误日志</th>
-                                        <th>模型名称</th>
-                                        <th>请求时间</th>
-                                        <th>操作</th>
-                                    </tr>
-                                </thead>
-                                <tbody id="errorLogsTable">
-                                    <!-- 错误日志数据将通过JavaScript动态加载 -->
-                                </tbody>
-                            </table>
-                        </div>
-                        
-                        <div id="loadingIndicator" class="text-center my-4 d-none">
-                            <div class="spinner-border text-primary" role="status">
-                                <span class="visually-hidden">加载中...</span>
-                            </div>
-                            <p class="mt-2">加载中，请稍候...</p>
-                        </div>
-                        
-                        <div id="noDataMessage" class="text-center my-4 d-none">
-                            <p class="text-muted">暂无错误日志数据</p>
-                        </div>
-                        
-                        <div id="errorMessage" class="alert alert-danger my-4 d-none">
-                            加载错误日志失败，请稍后重试。
-                        </div>
-                    </div>
-                    <div class="card-footer">
-                        <nav aria-label="错误日志分页">
-                            <ul class="pagination justify-content-center mb-0" id="pagination">
-                                <!-- 分页控件将通过JavaScript动态加载 -->
-                            </ul>
-                        </nav>
-                    </div>
                 </div>
+                <button id="refreshBtn" class="action-btn"> <!-- Use a consistent button class -->
+                    <i class="fas fa-sync-alt"></i> 刷新
+                </button>
+            </div>
+
+            <div class="table-container"> <!-- New container for table -->
+                <table class="styled-table"> <!-- Use a custom table class -->
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Gemini密钥</th>
+                            <th>错误类型</th>
+                            <th>错误日志</th>
+                            <th>模型名称</th>
+                            <th>请求时间</th>
+                            <th>操作</th>
+                        </tr>
+                    </thead>
+                    <tbody id="errorLogsTable">
+                        <!-- 错误日志数据将通过JavaScript动态加载 -->
+                    </tbody>
+                </table>
+            </div>
+
+            <div id="loadingIndicator" class="status-indicator loading"> <!-- Custom loading indicator -->
+                <div class="spinner"></div>
+                <p>加载中，请稍候...</p>
+            </div>
+
+            <div id="noDataMessage" class="status-indicator no-data"> <!-- Custom no-data message -->
+                <p>暂无错误日志数据</p>
+            </div>
+
+            <div id="errorMessage" class="status-indicator error"> <!-- Custom error message -->
+                <p>加载错误日志失败，请稍后重试。</p>
+            </div>
+
+            <div class="pagination-container"> <!-- Custom pagination container -->
+                <ul class="pagination" id="pagination">
+                    <!-- 分页控件将通过JavaScript动态加载 -->
+                </ul>
             </div>
         </div>
     </div>
@@ -111,51 +103,51 @@
         </button>
     </div>
 
-    <div id="copyStatus"></div>
+    <div id="copyStatus" class="notification"></div> <!-- Use notification class -->
 
     <div class="copyright">
-        © <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> | 
+        © <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>
-    
+
-    <!-- 错误日志详情模态框 -->
+    <!-- Custom Modal for Log Details -->
-    <div class="modal fade" id="logDetailModal" tabindex="-1" aria-labelledby="logDetailModalLabel" aria-hidden="true">
+    <div id="logDetailModal" class="modal">
-        <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content">
-            <div class="modal-content">
+            <span class="close-btn" id="closeLogDetailModalBtn">&times;</span>
-                <div class="modal-header">
+            <h2>错误日志详情</h2>
-                    <h5 class="modal-title" id="logDetailModalLabel">错误日志详情</h5>
+            <div class="modal-body-content"> <!-- Added wrapper for consistent padding/styling -->
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
+                <div class="detail-item">
+                    <h6>Gemini密钥:</h6>
+                    <pre id="modalGeminiKey"></pre>
                 </div>
-                <div class="modal-body">
+                <div class="detail-item">
-                    <div class="mb-3">
+                    <h6>错误类型:</h6>
-                        <h6>Gemini密钥:</h6>
+                    <p id="modalErrorType"></p>
-                        <pre id="modalGeminiKey" class="bg-light p-2 rounded"></pre>
-                    </div>
-                    <div class="mb-3">
-                        <h6>错误日志:</h6>
-                        <pre id="modalErrorLog" class="bg-light p-2 rounded"></pre>
-                    </div>
-                    <div class="mb-3">
-                        <h6>请求消息:</h6>
-                        <pre id="modalRequestMsg" class="bg-light p-2 rounded"></pre>
-                    </div>
-                    <div class="mb-3">
-                        <h6>模型名称:</h6>
-                        <p id="modalModelName"></p>
-                    </div>
-                    <div>
-                        <h6>请求时间:</h6>
-                        <p id="modalRequestTime"></p>
-                    </div>
                 </div>
-                <div class="modal-footer">
+                <div class="detail-item">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
+                    <h6>错误日志:</h6>
+                    <pre id="modalErrorLog"></pre>
                 </div>
+                <div class="detail-item">
+                    <h6>请求消息:</h6>
+                    <pre id="modalRequestMsg"></pre>
+                </div>
+                <div class="detail-item">
+                    <h6>模型名称:</h6>
+                    <p id="modalModelName"></p>
+                </div>
+                <div class="detail-item">
+                    <h6>请求时间:</h6>
+                    <p id="modalRequestTime"></p>
+                </div>
+            </div>
+            <div class="modal-actions">
+                 <button type="button" id="closeModalFooterBtn" class="reset-btn">关闭</button> <!-- Use consistent button style -->
             </div>
         </div>
     </div>
-    
+
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Keep custom JS, remove Bootstrap JS -->
     <script src="{{ url_for('static', path='/js/error_logs.js') }}"></script>
 </body>
 </html>

app/templates/keys_status.html

@@ -51,7 +51,10 @@
                             <span class="status-badge status-valid">
                                 <i class="fas fa-check"></i> 有效
                             </span>
-                            <span class="key-text">{{ key }}</span>
+                            <span class="key-text" data-full-key="{{ key }}">{{ key[:4] + '...' + key[-4:] }}</span>
+                            <button class="toggle-vis-btn" onclick="toggleKeyVisibility(this)">
+                                <i class="fas fa-eye"></i>
+                            </button>
                             <span class="fail-count">
                                 <i class="fas fa-exclamation-triangle"></i>
                                 失败: {{ fail_count }}
@@ -92,7 +95,10 @@
                             <span class="status-badge status-invalid">
                                 <i class="fas fa-times"></i> 无效
                             </span>
-                            <span class="key-text">{{ key }}</span>
+                            <span class="key-text" data-full-key="{{ key }}">{{ key[:4] + '...' + key[-4:] }}</span>
+                            <button class="toggle-vis-btn" onclick="toggleKeyVisibility(this)">
+                                <i class="fas fa-eye"></i>
+                            </button>
                             <span class="fail-count">
                                 <i class="fas fa-exclamation-triangle"></i>
                                 失败: {{ fail_count }}