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`) 进行了相关更新

app/static/css/error_logs.css

@@ -1,271 +1,331 @@
-/* 错误日志页面样式 */
+/* error_logs.css - Styles specific to the error logs page, complementing config_editor.css */
 
-/* 全局样式 */
-body {
-    font-family: 'Roboto', sans-serif;
-    background-color: #f8f9fa;
+/* Inherit body, container, h1, nav-tabs, config-section, scroll-buttons, refresh-btn, copyright from config_editor.css */
+
+/* Style the controls container */
+.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 {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
+.styled-table thead tr {
+    background-color: #f8f9fa; /* Light grey header */
+    text-align: left;
+    font-weight: bold;
+    color: #2c3e50;
+    border-bottom: 2px solid #dee2e6;
 }
 
-h1 {
-    color: #764ba2;
-    font-weight: 700;
-    margin-bottom: 0;
+.styled-table th,
+.styled-table td {
+    padding: 12px 15px;
+    border-bottom: 1px solid #eee; /* Lighter border for rows */
+    vertical-align: middle;
 }
 
-/* 导航栏样式 */
-.nav-tabs {
-    display: flex;
-    margin-bottom: 20px;
-    border-bottom: none;
+.styled-table tbody tr {
+    transition: background-color 0.2s ease;
 }
 
-.tab-link {
-    padding: 10px 20px;
-    margin-right: 5px;
-    color: #555;
-    text-decoration: none;
-    border-radius: 5px;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
+.styled-table tbody tr:hover {
+    background-color: #f1f1f1; /* Subtle hover effect */
 }
 
-.tab-link i {
-    margin-right: 5px;
+.styled-table tbody tr:last-of-type {
+    border-bottom: none; /* Remove border from last row */
 }
 
-.tab-link:hover {
-    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 truncation */
 .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 */
 }
 
-/* 模态框样式 */
-.modal-dialog {
-    max-width: 800px;
+/* Style for the 'View Details' button */
+.btn-view-details {
+    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 {
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    max-height: 300px;
-    overflow-y: auto;
+.btn-view-details:hover {
+    background-color: #5a6fd0;
 }
 
-/* 分页样式 */
-.pagination .page-item.active .page-link {
-    background-color: #0d6efd;
-    border-color: #0d6efd;
+/* Status Indicators (Loading, No Data, Error) */
+.status-indicator {
+    text-align: center;
+    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;
-}
-
-/* 按钮样式 */
-.btn-view-details {
-    padding: 0.25rem 0.5rem;
-    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;
+    display: block;
+    padding: 8px 12px;
+    color: #667eea;
+    background-color: white;
+    border: 1px solid #ddd;
+    border-radius: 4px;
     text-decoration: none;
+    transition: all 0.3s ease;
+    font-size: 14px;
 }
 
-.copyright a:hover {
-    text-decoration: underline;
+.pagination .page-link:hover {
+    background-color: #f0f0f0;
+    border-color: #ccc;
 }
 
-.copyright img {
-    width: 20px;
-    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);
+.pagination .page-item.active .page-link {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
-    padding: 10px 20px;
-    border-radius: 5px;
-    z-index: 1000;
-    opacity: 0;
-    transition: opacity 0.3s ease;
+    border-color: #667eea;
+    font-weight: bold;
 }
 
-#copyStatus.show {
-    opacity: 1;
+.pagination .page-item.disabled .page-link {
+    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 {
-        margin-top: 1rem;
-        width: 100%;
+
+    .page-size-selector {
+        justify-content: center; /* Center page size selector */
     }
-    
-    .card-header .d-flex {
-        flex-direction: column;
+
+    .action-btn {
+        width: 100%; /* Full width button */
+        justify-content: center;
     }
-    
-    .card-header .input-group {
-        margin-bottom: 0.5rem;
-        margin-right: 0 !important;
+
+    .styled-table {
+        font-size: 13px;
     }
-    
-    #refreshBtn {
-        width: 100%;
+
+    .styled-table th,
+    .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({
-        top: 0,
-        behavior: 'smooth'
-    });
+    window.scrollTo({ top: 0, behavior: 'smooth' });
 }
 
 function scrollToBottom() {
-    window.scrollTo({
-        top: document.body.scrollHeight,
-        behavior: 'smooth'
-    });
+    window.scrollTo({ 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(() => {
-        window.location.reload();
-    }, 500);
+
+    // Fetch new data instead of full reload for a smoother experience
+    loadErrorLogs().finally(() => {
+        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 errorLogs = [];
+// let totalPages = 1; // totalPages will be calculated dynamically based on API response if available, or based on fetched data length
+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() {
-    // 初始化页面大小选择器
-    const pageSizeSelector = document.getElementById('pageSize');
-    pageSizeSelector.value = pageSize;
-    pageSizeSelector.addEventListener('change', function() {
-        pageSize = parseInt(this.value);
-        currentPage = 1; // 重置到第一页
-        loadErrorLogs();
-    });
-    
-    // 初始化刷新按钮
-    document.getElementById('refreshBtn').addEventListener('click', function() {
-        loadErrorLogs();
-    });
-    
-    // 加载错误日志数据
+    // Cache DOM elements
+    pageSizeSelector = document.getElementById('pageSize');
+    refreshBtn = document.getElementById('refreshBtn');
+    tableBody = document.getElementById('errorLogsTable');
+    paginationElement = document.getElementById('pagination');
+    loadingIndicator = document.getElementById('loadingIndicator');
+    noDataMessage = document.getElementById('noDataMessage');
+    errorMessage = document.getElementById('errorMessage');
+    logDetailModal = document.getElementById('logDetailModal');
+    // Get all elements that should close the modal
+    modalCloseBtns = document.querySelectorAll('#closeLogDetailModalBtn, #closeModalFooterBtn');
+
+    // 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}`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error('网络响应异常');
+
+    try {
+        const response = await fetch(`/api/logs/errors?limit=${pageSize}&offset=${offset}`);
+        if (!response.ok) {
+            // 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();
-        })
-        .then(data => {
+            throw new Error(errorData?.detail || `网络响应异常: ${response.statusText}`);
+        }
+        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();
-            showLoading(false);
-            
-            if (errorLogs.length === 0) {
-                showNoData(true);
-            }
-        })
-        .catch(error => {
-            console.error('获取错误日志失败:', error);
-            showLoading(false);
-            showError(true);
-        });
+            renderErrorLogs(errorLogs); // Pass data directly
+            updatePagination(errorLogs.length, -1); // Indicate unknown total
+        } else if (data && Array.isArray(data.logs)) {
+            errorLogs = data.logs;
+            renderErrorLogs(errorLogs); // Pass logs array
+            updatePagination(errorLogs.length, data.total || -1); // Pass total count if available
+        } else {
+             throw new Error('无法识别的API响应格式');
+        }
+
+
+        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() {
-    const tableBody = document.getElementById('errorLogsTable');
-    tableBody.innerHTML = '';
-    
-    errorLogs.forEach(log => {
+function renderErrorLogs(logs) {
+    if (!tableBody) return;
+    tableBody.innerHTML = ''; // Clear previous entries
+
+    if (!logs || logs.length === 0) {
+        // Handled by showNoData
+        return;
+    }
+
+    logs.forEach(log => {
         const row = document.createElement('tr');
-        
-        // 格式化日期
-        const requestTime = new Date(log.request_time);
-        const formattedTime = requestTime.toLocaleString('zh-CN', {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-            second: '2-digit'
-        });
-        
-        // 截断错误日志内容
+
+        // Format date
+        let formattedTime = 'N/A';
+        try {
+            const requestTime = new Date(log.request_time);
+            if (!isNaN(requestTime)) {
+                 formattedTime = requestTime.toLocaleString('zh-CN', {
+                    year: 'numeric', month: '2-digit', day: '2-digit',
+                    hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
+                });
+            }
+        } 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);
-    if (!log) return;
-    
-    // 格式化日期
-    const requestTime = new Date(log.request_time);
-    const formattedTime = requestTime.toLocaleString('zh-CN', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit'
-    });
-    
-    // 格式化请求消息
-    let formattedRequestMsg = '';
+    const log = errorLogs.find(l => l.id === logId);
+    if (!log || !logDetailModal) return;
+
+    // Format date
+     let formattedTime = 'N/A';
+     try {
+         const requestTime = new Date(log.request_time);
+         if (!isNaN(requestTime)) {
+              formattedTime = requestTime.toLocaleString('zh-CN', {
+                 year: 'numeric', month: '2-digit', day: '2-digit',
+                 hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
+             });
+         }
+     } catch (e) { console.error("Error formatting date:", e); }
+
+
+    // Format request message (handle potential JSON)
+    let formattedRequestMsg = '无';
     if (log.request_msg) {
         try {
-            if (typeof log.request_msg === 'string') {
-                formattedRequestMsg = log.request_msg;
-            } else {
-                formattedRequestMsg = JSON.stringify(log.request_msg, null, 2);
+            // Check if it's already an object/array
+            if (typeof log.request_msg === 'object' && log.request_msg !== null) {
+                 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;
-    
-    // 显示模态框
-    const modal = new bootstrap.Modal(document.getElementById('logDetailModal'));
-    modal.show();
+
+    // Show the modal
+    logDetailModal.classList.add('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() {
-    const paginationElement = document.getElementById('pagination');
-    paginationElement.innerHTML = '';
-    
-    // 计算总页数
-    const totalCount = errorLogs.length;
-    totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
-    
-    // 上一页按钮
-    const prevItem = document.createElement('li');
-    prevItem.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
-    prevItem.innerHTML = `<a class="page-link" href="#" aria-label="上一页"><span aria-hidden="true">&laquo;</span></a>`;
-    prevItem.addEventListener('click', function(e) {
-        e.preventDefault();
-        if (currentPage > 1) {
-            currentPage--;
-            loadErrorLogs();
+function updatePagination(currentItemCount, totalItems) {
+    if (!paginationElement) return;
+    paginationElement.innerHTML = ''; // Clear existing pagination
+
+    // Calculate total pages only if totalItems is known and valid
+    let totalPages = 1;
+    if (totalItems >= 0) {
+        totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+    } else if (currentItemCount < pageSize && currentPage === 1) {
+        // If less items than page size fetched on page 1, assume it's the only page
+        totalPages = 1;
+    } else {
+        // If total is unknown and more items might exist, we can't build full pagination
+        // We can show Prev/Next based on current page and if items were returned
+        console.warn("Total item count unknown, pagination will be limited.");
+        // Basic Prev/Next for unknown total
+        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);
-    
-    // 页码按钮
-    for (let i = 1; i <= totalPages; i++) {
-        const pageItem = document.createElement('li');
-        pageItem.className = `page-item ${i === currentPage ? 'active' : ''}`;
-        pageItem.innerHTML = `<a class="page-link" href="#">${i}</a>`;
-        pageItem.addEventListener('click', function(e) {
+    }
+
+    // Page Number Buttons
+    for (let i = startPage; i <= endPage; i++) {
+        addPaginationLink(paginationElement, i.toString(), true, () => { currentPage = i; loadErrorLogs(); }, i === currentPage);
+    }
+
+     // Last Page Button
+    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;
-            loadErrorLogs();
+            clickHandler();
         });
-        paginationElement.appendChild(pageItem);
+    } else if (!enabled) {
+         pageLink.addEventListener('click', e => e.preventDefault()); // Prevent click on disabled
     }
-    
-    // 下一页按钮
-    const nextItem = document.createElement('li');
-    nextItem.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
-    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);
+
+
+    pageItem.appendChild(pageLink);
+    parentElement.appendChild(pageItem);
 }
 
-// 显示/隐藏加载指示器
+
+// 显示/隐藏状态指示器 (using 'active' class)
 function showLoading(show) {
-    const loadingIndicator = document.getElementById('loadingIndicator');
-    if (show) {
-        loadingIndicator.classList.remove('d-none');
-    } else {
-        loadingIndicator.classList.add('d-none');
-    }
+    if (loadingIndicator) loadingIndicator.style.display = show ? 'block' : '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 (show) {
-        noDataMessage.classList.remove('d-none');
-    } else {
-        noDataMessage.classList.add('d-none');
+     if (noDataMessage) noDataMessage.style.display = show ? 'block' : 'none';
+}
+
+function showError(show, message = '加载错误日志失败，请稍后重试。') {
+    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 = '显示密钥';
+    }
+}