mirror of
https://github.com/snailyp/gemini-balance.git
synced 2026-05-10 17:43:23 +08:00
69261e98de
- 在后端 (`services.py`, `log_routes.py`) 实现按 Gemini 密钥（模糊匹配）、错误类型/内容（模糊匹配）和日期范围（开始/结束日期）过滤错误日志的逻辑。
- 添加新函数 `get_error_logs_count` 以高效获取符合过滤条件的总日志数，用于分页。
- 更新 `/api/logs/errors` API 端点以接受 `key_search`, `error_search`, `start_date`, `end_date` 查询参数。端点现在返回包含过滤后日志和总数的对象。
- 增强前端 (`error_logs.html`, `error_logs.js`, `error_logs.css`)：
- 添加用于密钥搜索、错误/日志搜索和日期范围选择的输入字段。
- 实现 JavaScript 逻辑以捕获搜索参数，使用过滤器触发 API 调用，并在新搜索时重置到第一页。
- 更新表格渲染以显示顺序行号而非数据库 ID。
- 在表格视图中遮罩 Gemini 密钥（显示前/后 4 个字符）以提高可读性，同时仍在详细信息模态框中显示完整密钥。
- 优化新搜索控件、表格外观（内边距、边框、悬停效果、斑马条纹）和按钮样式的 CSS，以提供更清晰的用户界面。
- 通过使用 `logger.exception` 包含堆栈跟踪来改进后端服务中的错误日志记录。
391 lines
9.2 KiB
CSS
391 lines
9.2 KiB
CSS
/* error_logs.css - Styles specific to the error logs page, complementing config_editor.css */
|
|
|
|
/* Inherit body, container, h1, nav-tabs, scroll-buttons, refresh-btn, copyright from config_editor.css */
|
|
|
|
/* Add padding to the main content section */
|
|
.config-section {
|
|
padding: 25px; /* Increased padding */
|
|
background-color: #fff; /* Ensure white background */
|
|
border-radius: 12px; /* Slightly larger radius */
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Softer shadow */
|
|
margin-top: 20px;
|
|
}
|
|
/* Style the controls container */
|
|
.controls-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
background-color: #f8f9fa; /* Lighter background */
|
|
border-radius: 6px; /* Slightly smaller radius */
|
|
border: 1px solid #e9ecef; /* Lighter border */
|
|
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;
|
|
}
|
|
|
|
/* Search Container Styles */
|
|
.search-container {
|
|
display: flex;
|
|
flex-wrap: wrap; /* Allow wrapping on smaller screens */
|
|
gap: 10px; /* Space between elements */
|
|
align-items: center;
|
|
padding: 15px;
|
|
background-color: #f8f9fa; /* Consistent light background */
|
|
border-radius: 6px;
|
|
border: 1px solid #e9ecef; /* Lighter border */
|
|
margin-bottom: 25px; /* Increased margin */
|
|
}
|
|
|
|
.search-container input[type="text"],
|
|
.search-container input[type="date"] {
|
|
padding: 8px 12px;
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
flex-grow: 1; /* Allow inputs to grow */
|
|
min-width: 150px; /* Minimum width for inputs */
|
|
}
|
|
|
|
.search-container input[type="date"] {
|
|
min-width: 130px; /* Slightly less width for date inputs */
|
|
flex-grow: 0; /* Don't let date inputs grow excessively */
|
|
}
|
|
|
|
|
|
.search-container span {
|
|
color: #2c3e50;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.search-container .action-btn {
|
|
padding: 8px 15px; /* Slightly smaller padding for search button */
|
|
font-size: 14px;
|
|
flex-shrink: 0; /* Prevent button from shrinking */
|
|
}
|
|
|
|
/* Table container and styled table */
|
|
.table-container {
|
|
overflow-x: auto; /* Allow horizontal scrolling for table */
|
|
background-color: #ffffff;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* Softer shadow */
|
|
border: 1px solid #e9ecef; /* Lighter border */
|
|
}
|
|
|
|
.styled-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.styled-table thead tr {
|
|
background-color: #eef2f7; /* Lighter, slightly blueish header */
|
|
text-align: left;
|
|
font-weight: 600; /* Slightly bolder */
|
|
color: #495057; /* Darker grey text */
|
|
border-bottom: 1px solid #dee2e6; /* Thinner border */
|
|
}
|
|
|
|
.styled-table th,
|
|
.styled-table td {
|
|
padding: 14px 15px; /* Increased padding */
|
|
border-bottom: 1px solid #f1f3f5; /* Very light border */
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.styled-table tbody tr {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.styled-table tbody tr:hover {
|
|
background-color: #f8f9fa; /* Lighter hover effect */
|
|
}
|
|
|
|
/* Zebra striping for table body */
|
|
.styled-table tbody tr:nth-child(even) {
|
|
background-color: #fcfdff; /* Very light blue for even rows */
|
|
}
|
|
|
|
.styled-table tbody tr:nth-child(even):hover {
|
|
background-color: #f0f4f8; /* Slightly darker hover for even rows */
|
|
}
|
|
|
|
.styled-table tbody tr:last-of-type {
|
|
border-bottom: none; /* Remove border from last row */
|
|
}
|
|
|
|
/* Error log content truncation */
|
|
.error-log-content {
|
|
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 */
|
|
.btn-view-details {
|
|
background-color: #e9ecef; /* Light grey background */
|
|
color: #495057; /* Dark grey text */
|
|
border: 1px solid #dee2e6; /* Subtle border */
|
|
padding: 4px 8px; /* Slightly smaller padding */
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-view-details:hover {
|
|
background-color: #dee2e6; /* Darker grey on hover */
|
|
border-color: #ced4da;
|
|
color: #212529;
|
|
}
|
|
|
|
/* 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 {
|
|
display: block;
|
|
padding: 8px 14px; /* Slightly wider */
|
|
color: #6c757d; /* Grey text */
|
|
background-color: white;
|
|
border: 1px solid #dee2e6; /* Lighter border */
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.pagination .page-link:hover {
|
|
background-color: #e9ecef; /* Light grey hover */
|
|
border-color: #dee2e6;
|
|
}
|
|
|
|
.pagination .page-item.active .page-link {
|
|
background: linear-gradient(135deg, #708cf3 0%, #8b60d5 100%); /* Adjusted gradient */
|
|
color: white;
|
|
border-color: #708cf3;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.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: #e9ecef; /* Lighter background for code blocks */
|
|
padding: 12px;
|
|
border-radius: 5px;
|
|
border: 1px solid #dee2e6; /* Match border color */
|
|
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) {
|
|
.controls-container {
|
|
flex-direction: column;
|
|
align-items: stretch; /* Stretch items to full width */
|
|
}
|
|
|
|
.page-size-selector {
|
|
justify-content: center; /* Center page size selector */
|
|
}
|
|
|
|
.action-btn {
|
|
width: 100%; /* Full width button */
|
|
justify-content: center;
|
|
}
|
|
|
|
.styled-table {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|