Files
gemini-balance/app/templates/error_logs.html
snaily f05d67939f 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`) 进行了相关更新
2025-04-10 18:32:21 +08:00

154 lines
6.6 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>错误日志管理</title>
<link rel="manifest" href="/static/manifest.json">
<meta name="theme-color" content="#764ba2">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="GBalance">
<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">
<!-- 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>
<div class="container">
<button class="refresh-btn" onclick="refreshPage(this)">
<i class="fas fa-sync-alt"></i>
</button>
<h1>Gemini Balance</h1>
<div class="nav-tabs">
<a href="/config" class="tab-link">
<i class="fas fa-cog"></i> 配置编辑
</a>
<a href="/keys" class="tab-link">
<i class="fas fa-key"></i> 密钥管理
</a>
<a href="/logs" class="tab-link active">
<i class="fas fa-exclamation-triangle"></i> 错误日志
</a>
</div>
<div class="config-section active"> <!-- Use config-section for consistent layout -->
<h2><i class="fas fa-bug"></i> 错误日志列表</h2>
<div class="controls-container"> <!-- New container for controls -->
<div class="page-size-selector">
<label for="pageSize">每页显示:</label>
<select id="pageSize">
<option value="10">10</option>
<option value="20" selected>20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span></span>
</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>
<div class="scroll-buttons">
<button class="scroll-btn" onclick="scrollToTop()" title="回到顶部">
<i class="fas fa-chevron-up"></i>
</button>
<button class="scroll-btn" onclick="scrollToBottom()" title="滚动到底部">
<i class="fas fa-chevron-down"></i>
</button>
</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> |
<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 id="logDetailModal" class="modal">
<div class="modal-content">
<span class="close-btn" id="closeLogDetailModalBtn">&times;</span>
<h2>错误日志详情</h2>
<div class="modal-body-content"> <!-- Added wrapper for consistent padding/styling -->
<div class="detail-item">
<h6>Gemini密钥:</h6>
<pre id="modalGeminiKey"></pre>
</div>
<div class="detail-item">
<h6>错误类型:</h6>
<p id="modalErrorType"></p>
</div>
<div class="detail-item">
<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>
<!-- Keep custom JS, remove Bootstrap JS -->
<script src="{{ url_for('static', path='/js/error_logs.js') }}"></script>
</body>
</html>