mirror of
https://github.com/snailyp/gemini-balance.git
synced 2026-09-06 16:16:37 +08:00
refactor(ui): 优化无效密钥列表头部布局，使“全选”组件右对齐
这个消息表明了以下几点：
1. **类型 (Type)**: `refactor` - 这是一次重构，主要改进了现有用户界面元素的布局，而不是添加新功能或修复错误。
2. **范围 (Scope)**: `ui` - 表明更改影响的是用户界面部分。
3. **主题 (Subject)**:
* `优化无效密钥列表头部布局`: 指出更改的具体位置是“无效密钥列表”的头部区域，并且是对其布局的优化。
* `使“全选”组件右对齐`: 明确了主要的视觉变化是将“全选”复选框及其标签对齐到该区域的右侧。
This commit is contained in:
snaily
+317
-277
@@ -1,316 +1,356 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{% block title %}Gemini Balance{% endblock %}</title>
|
||||
<link rel="manifest" href="/static/manifest.json">
|
||||
<meta name="theme-color" content="#4F46E5">
|
||||
<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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="manifest" href="/static/manifest.json" />
|
||||
<meta name="theme-color" content="#4F46E5" />
|
||||
<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=Inter:wght@300;400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#eef2ff',
|
||||
100: '#e0e7ff',
|
||||
200: '#c7d2fe',
|
||||
300: '#a5b4fc',
|
||||
400: '#818cf8',
|
||||
500: '#6366f1',
|
||||
600: '#4f46e5',
|
||||
700: '#4338ca',
|
||||
800: '#3730a3',
|
||||
900: '#312e81',
|
||||
},
|
||||
success: {
|
||||
50: '#ecfdf5',
|
||||
500: '#10b981',
|
||||
600: '#059669'
|
||||
},
|
||||
danger: {
|
||||
50: '#fef2f2',
|
||||
500: '#ef4444',
|
||||
600: '#dc2626'
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace'],
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 0.5s ease-out',
|
||||
'slide-up': 'slideUp 0.5s ease-out',
|
||||
'slide-down': 'slideDown 0.5s ease-out',
|
||||
'shake': 'shake 0.5s ease-in-out',
|
||||
'spin': 'spin 1s linear infinite',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
slideDown: {
|
||||
'0%': { transform: 'translateY(-20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
shake: {
|
||||
'0%, 100%': { transform: 'translateX(0)' },
|
||||
'25%': { transform: 'translateX(-5px)' },
|
||||
'75%': { transform: 'translateX(5px)' },
|
||||
},
|
||||
spin: {
|
||||
'0%': { transform: 'rotate(0deg)' },
|
||||
'100%': { transform: 'rotate(360deg)' },
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: "#eef2ff",
|
||||
100: "#e0e7ff",
|
||||
200: "#c7d2fe",
|
||||
300: "#a5b4fc",
|
||||
400: "#818cf8",
|
||||
500: "#6366f1",
|
||||
600: "#4f46e5",
|
||||
700: "#4338ca",
|
||||
800: "#3730a3",
|
||||
900: "#312e81",
|
||||
},
|
||||
success: {
|
||||
50: "#ecfdf5",
|
||||
500: "#10b981",
|
||||
600: "#059669",
|
||||
},
|
||||
danger: {
|
||||
50: "#fef2f2",
|
||||
500: "#ef4444",
|
||||
600: "#dc2626",
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["Inter", "sans-serif"],
|
||||
mono: [
|
||||
"JetBrains Mono",
|
||||
"SFMono-Regular",
|
||||
"Menlo",
|
||||
"Monaco",
|
||||
"Consolas",
|
||||
"monospace",
|
||||
],
|
||||
},
|
||||
animation: {
|
||||
"fade-in": "fadeIn 0.5s ease-out",
|
||||
"slide-up": "slideUp 0.5s ease-out",
|
||||
"slide-down": "slideDown 0.5s ease-out",
|
||||
shake: "shake 0.5s ease-in-out",
|
||||
spin: "spin 1s linear infinite",
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
"0%": { opacity: "0" },
|
||||
"100%": { opacity: "1" },
|
||||
},
|
||||
slideUp: {
|
||||
"0%": { transform: "translateY(20px)", opacity: "0" },
|
||||
"100%": { transform: "translateY(0)", opacity: "1" },
|
||||
},
|
||||
slideDown: {
|
||||
"0%": { transform: "translateY(-20px)", opacity: "0" },
|
||||
"100%": { transform: "translateY(0)", opacity: "1" },
|
||||
},
|
||||
shake: {
|
||||
"0%, 100%": { transform: "translateX(0)" },
|
||||
"25%": { transform: "translateX(-5px)" },
|
||||
"75%": { transform: "translateX(5px)" },
|
||||
},
|
||||
spin: {
|
||||
"0%": { transform: "rotate(0deg)" },
|
||||
"100%": { transform: "rotate(360deg)" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.85); /* Slightly increased opacity for better readability */
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18); /* Subtle border */
|
||||
}
|
||||
.bg-gradient {
|
||||
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EC4899 100%);
|
||||
}
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(243, 244, 246, 0.8); /* bg-gray-100 with opacity */
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(79, 70, 229, 0.4); /* primary-600 with opacity */
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(79, 70, 229, 0.6); /* primary-600 with more opacity */
|
||||
}
|
||||
/* Basic modal styles */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.modal.show {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* Loading spinner */
|
||||
.loading-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
/* Notification */
|
||||
.notification {
|
||||
position: fixed;
|
||||
bottom: 5rem; /* Adjusted from bottom-20 */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 0.75rem 1.25rem; /* px-5 py-3 */
|
||||
border-radius: 0.5rem; /* rounded-lg */
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
font-weight: 500; /* font-medium */
|
||||
z-index: 1000; /* Increased z-index */
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||||
}
|
||||
.notification.show {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.notification.error {
|
||||
background-color: rgba(220, 38, 38, 0.8); /* danger-600 with opacity */
|
||||
}
|
||||
/* Scroll buttons */
|
||||
.scroll-buttons {
|
||||
position: fixed;
|
||||
right: 1.25rem; /* right-5 */
|
||||
bottom: 5rem; /* bottom-20 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem; /* gap-2 */
|
||||
z-index: 10;
|
||||
}
|
||||
.scroll-button {
|
||||
width: 2.5rem; /* w-10 */
|
||||
height: 2.5rem; /* h-10 */
|
||||
background-color: #4f46e5; /* bg-primary-600 */
|
||||
color: white;
|
||||
border-radius: 9999px; /* rounded-full */
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.scroll-button:hover {
|
||||
background-color: #4338ca; /* hover:bg-primary-700 */
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
|
||||
}
|
||||
{% block head_extra_styles %}
|
||||
{% endblock %}
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.85); /* Slightly increased opacity for better readability */
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18); /* Subtle border */
|
||||
}
|
||||
.bg-gradient {
|
||||
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EC4899 100%);
|
||||
}
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(243, 244, 246, 0.8); /* bg-gray-100 with opacity */
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(79, 70, 229, 0.4); /* primary-600 with opacity */
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(79, 70, 229, 0.6); /* primary-600 with more opacity */
|
||||
}
|
||||
/* Basic modal styles */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.modal.show {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* Loading spinner */
|
||||
.loading-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
/* Notification */
|
||||
.notification {
|
||||
position: fixed;
|
||||
bottom: 5rem; /* Adjusted from bottom-20 */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 0.75rem 1.25rem; /* px-5 py-3 */
|
||||
border-radius: 0.5rem; /* rounded-lg */
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
font-weight: 500; /* font-medium */
|
||||
z-index: 1000; /* Increased z-index */
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||||
}
|
||||
.notification.show {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.notification.error {
|
||||
background-color: rgba(220, 38, 38, 0.8); /* danger-600 with opacity */
|
||||
}
|
||||
/* Scroll buttons */
|
||||
.scroll-buttons {
|
||||
position: fixed;
|
||||
right: 1.25rem; /* right-5 */
|
||||
bottom: 5rem; /* bottom-20 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem; /* gap-2 */
|
||||
z-index: 10;
|
||||
}
|
||||
.scroll-button {
|
||||
width: 2.5rem; /* w-10 */
|
||||
height: 2.5rem; /* h-10 */
|
||||
background-color: #4f46e5; /* bg-primary-600 */
|
||||
color: white;
|
||||
border-radius: 9999px; /* rounded-full */
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.scroll-button:hover {
|
||||
background-color: #4338ca; /* hover:bg-primary-700 */
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
|
||||
}
|
||||
{% block head_extra_styles %}
|
||||
{% endblock %}
|
||||
</style>
|
||||
{% block head_extra_scripts %}{% endblock %}
|
||||
</head>
|
||||
<body class="bg-gradient min-h-screen text-gray-800 pt-6 pb-16">
|
||||
</head>
|
||||
<body class="bg-gradient min-h-screen text-gray-800 pt-6 pb-16">
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<!-- 底部版权 -->
|
||||
<div class="fixed bottom-0 left-0 w-full py-3 bg-white bg-opacity-80 backdrop-blur-md text-center text-sm text-gray-600 border-t border-gray-200">
|
||||
© <span id="copyright-year"></span> by
|
||||
<a href="https://linux.do/u/snaily" target="_blank" class="text-primary-600 hover:text-primary-800 transition duration-300">
|
||||
<img src="https://linux.do/user_avatar/linux.do/snaily/288/306510_2.gif" alt="snaily" class="inline-block w-5 h-5 rounded-full align-middle mr-1">snaily
|
||||
</a> |
|
||||
<a href="https://github.com/snailyp/gemini-balance" target="_blank" class="text-primary-600 hover:text-primary-800 transition duration-300">
|
||||
<i class="fab fa-github"></i> GitHub
|
||||
</a> |
|
||||
<a href="https://afdian.com/a/snaily" target="_blank" class="text-primary-600 hover:text-primary-800 transition duration-300">
|
||||
<i class="fas fa-drumstick-bite text-yellow-600"></i> 给作者加鸡腿
|
||||
</a>
|
||||
<span class="mx-1">|</span>
|
||||
<span class="text-xs text-yellow-600 font-semibold">
|
||||
<i class="fas fa-exclamation-triangle mr-1"></i>免费项目，谨防诈骗
|
||||
</span>
|
||||
<span id="version-info-container" class="inline-block">
|
||||
<!-- Version info will be loaded here by JavaScript -->
|
||||
</span>
|
||||
<div
|
||||
class="fixed bottom-0 left-0 w-full py-3 bg-white bg-opacity-80 backdrop-blur-md text-center text-sm text-gray-800 border-t border-gray-200"
|
||||
>
|
||||
© <span id="copyright-year"></span> by
|
||||
<a
|
||||
href="https://linux.do/u/snaily"
|
||||
target="_blank"
|
||||
class="text-primary-600 hover:text-primary-800 transition duration-300"
|
||||
>
|
||||
<img
|
||||
src="https://linux.do/user_avatar/linux.do/snaily/288/306510_2.gif"
|
||||
alt="snaily"
|
||||
class="inline-block w-5 h-5 rounded-full align-middle mr-1"
|
||||
/>snaily
|
||||
</a>
|
||||
|
|
||||
<a
|
||||
href="https://github.com/snailyp/gemini-balance"
|
||||
target="_blank"
|
||||
class="text-primary-600 hover:text-primary-800 transition duration-300"
|
||||
>
|
||||
<i class="fab fa-github"></i> GitHub
|
||||
</a>
|
||||
|
|
||||
<a
|
||||
href="https://afdian.com/a/snaily"
|
||||
target="_blank"
|
||||
class="text-primary-600 hover:text-primary-800 transition duration-300"
|
||||
>
|
||||
<i class="fas fa-drumstick-bite text-yellow-600"></i> 给作者加鸡腿
|
||||
</a>
|
||||
<span class="mx-1">|</span>
|
||||
<span class="text-xs text-yellow-600 font-semibold">
|
||||
<i class="fas fa-exclamation-triangle mr-1"></i>免费项目，谨防诈骗
|
||||
</span>
|
||||
<span id="version-info-container" class="inline-block">
|
||||
<!-- Version info will be loaded here by JavaScript -->
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 通用JS -->
|
||||
<script>
|
||||
// 设置版权年份
|
||||
document.getElementById('copyright-year').textContent = new Date().getFullYear();
|
||||
// 设置版权年份
|
||||
document.getElementById("copyright-year").textContent =
|
||||
new Date().getFullYear();
|
||||
|
||||
// 滚动到顶部/底部函数 (如果页面需要)
|
||||
function scrollToTop() {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
function scrollToBottom() {
|
||||
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
|
||||
// 滚动到顶部/底部函数 (如果页面需要)
|
||||
function scrollToTop() {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
function scrollToBottom() {
|
||||
window.scrollTo({
|
||||
top: document.body.scrollHeight,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
// 显示通知
|
||||
function showNotification(message, type = "success", duration = 3000) {
|
||||
const notification =
|
||||
document.getElementById("notification") ||
|
||||
createNotificationElement();
|
||||
if (!notification) return;
|
||||
|
||||
notification.textContent = message;
|
||||
notification.className = "notification show"; // Reset classes
|
||||
if (type === "error") {
|
||||
notification.classList.add("error");
|
||||
}
|
||||
|
||||
// 显示通知
|
||||
function showNotification(message, type = 'success', duration = 3000) {
|
||||
const notification = document.getElementById('notification') || createNotificationElement();
|
||||
if (!notification) return;
|
||||
|
||||
notification.textContent = message;
|
||||
notification.className = 'notification show'; // Reset classes
|
||||
if (type === 'error') {
|
||||
notification.classList.add('error');
|
||||
}
|
||||
|
||||
// Clear previous timeout if exists
|
||||
if (notification.timeoutId) {
|
||||
clearTimeout(notification.timeoutId);
|
||||
}
|
||||
|
||||
notification.timeoutId = setTimeout(() => {
|
||||
notification.classList.remove('show');
|
||||
// Optional: remove the element after fade out if dynamically created
|
||||
// setTimeout(() => notification.remove(), 300);
|
||||
}, duration);
|
||||
// Clear previous timeout if exists
|
||||
if (notification.timeoutId) {
|
||||
clearTimeout(notification.timeoutId);
|
||||
}
|
||||
|
||||
// Helper to create notification element if it doesn't exist
|
||||
function createNotificationElement() {
|
||||
let notification = document.getElementById('notification');
|
||||
if (!notification) {
|
||||
notification = document.createElement('div');
|
||||
notification.id = 'notification';
|
||||
notification.className = 'notification';
|
||||
document.body.appendChild(notification);
|
||||
}
|
||||
return notification;
|
||||
notification.timeoutId = setTimeout(() => {
|
||||
notification.classList.remove("show");
|
||||
// Optional: remove the element after fade out if dynamically created
|
||||
// setTimeout(() => notification.remove(), 300);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
// Helper to create notification element if it doesn't exist
|
||||
function createNotificationElement() {
|
||||
let notification = document.getElementById("notification");
|
||||
if (!notification) {
|
||||
notification = document.createElement("div");
|
||||
notification.id = "notification";
|
||||
notification.className = "notification";
|
||||
document.body.appendChild(notification);
|
||||
}
|
||||
return notification;
|
||||
}
|
||||
|
||||
// 页面刷新带加载状态
|
||||
function refreshPage(button) {
|
||||
if (button) {
|
||||
const icon = button.querySelector('i');
|
||||
if (icon) {
|
||||
icon.classList.add('loading-spin');
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 300); // Short delay to show spinner
|
||||
// 页面刷新带加载状态
|
||||
function refreshPage(button) {
|
||||
if (button) {
|
||||
const icon = button.querySelector("i");
|
||||
if (icon) {
|
||||
icon.classList.add("loading-spin");
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 300); // Short delay to show spinner
|
||||
}
|
||||
|
||||
// --- Version Check ---
|
||||
const versionInfoContainer = document.getElementById('version-info-container');
|
||||
// --- Version Check ---
|
||||
const versionInfoContainer = document.getElementById(
|
||||
"version-info-container"
|
||||
);
|
||||
|
||||
async function fetchVersionInfo() {
|
||||
if (!versionInfoContainer) return;
|
||||
versionInfoContainer.innerHTML = '<span class="mx-1">|</span><span class="text-xs text-gray-400">检查更新中...</span>'; // Initial loading state
|
||||
async function fetchVersionInfo() {
|
||||
if (!versionInfoContainer) return;
|
||||
versionInfoContainer.innerHTML =
|
||||
'<span class="mx-1">|</span><span class="text-xs text-gray-700">检查更新中...</span>'; // Initial loading state
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/version/check');
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
try {
|
||||
const response = await fetch("/api/version/check");
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
|
||||
let versionHtml = `<span class="mx-1">|</span><span class="text-xs text-gray-500">v${data.current_version}</span>`;
|
||||
if (data.update_available) {
|
||||
versionHtml += `
|
||||
let versionHtml = `<span class="mx-1">|</span><span class="text-xs text-gray-800">v${data.current_version}</span>`;
|
||||
if (data.update_available) {
|
||||
versionHtml += `
|
||||
<span class="mx-1">|</span>
|
||||
<a href="https://github.com/snailyp/gemini-balance/releases/latest" target="_blank" class="text-yellow-600 hover:text-yellow-800 transition duration-300 animate-pulse">
|
||||
<i class="fas fa-arrow-up"></i> 新版本: v${data.latest_version}
|
||||
</a>`;
|
||||
} else if (data.error_message) {
|
||||
versionHtml += `
|
||||
} else if (data.error_message) {
|
||||
versionHtml += `
|
||||
<span class="mx-1">|</span>
|
||||
<span class="text-xs text-red-500" title="${data.error_message}">更新检查失败</span>`;
|
||||
} else {
|
||||
versionHtml += `<span class="mx-1">|</span><span class="text-xs text-green-500">已是最新</span>`; // Indicate up-to-date
|
||||
}
|
||||
versionInfoContainer.innerHTML = versionHtml;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching version info:', error);
|
||||
versionInfoContainer.innerHTML = `<span class="mx-1">|</span><span class="text-xs text-red-500" title="无法连接到服务器或解析响应">更新检查失败</span>`;
|
||||
}
|
||||
} else {
|
||||
versionHtml += `<span class="mx-1">|</span><span class="text-xs text-green-500">已是最新</span>`; // Indicate up-to-date
|
||||
}
|
||||
versionInfoContainer.innerHTML = versionHtml;
|
||||
} catch (error) {
|
||||
console.error("Error fetching version info:", error);
|
||||
versionInfoContainer.innerHTML = `<span class="mx-1">|</span><span class="text-xs text-red-500" title="无法连接到服务器或解析响应">更新检查失败</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch immediately on load
|
||||
fetchVersionInfo();
|
||||
|
||||
// Fetch periodically (e.g., every hour)
|
||||
setInterval(fetchVersionInfo, 3600000); // 3600000 ms = 1 hour
|
||||
// Fetch immediately on load
|
||||
fetchVersionInfo();
|
||||
|
||||
// Fetch periodically (e.g., every hour)
|
||||
setInterval(fetchVersionInfo, 3600000); // 3600000 ms = 1 hour
|
||||
</script>
|
||||
{% block body_scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+481
-156
File diff suppressed because it is too large
Load Diff
+623
-301
@@ -1,314 +1,636 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}错误日志管理 - Gemini Balance{% endblock %}
|
||||
|
||||
{% block head_extra_styles %}
|
||||
{% extends "base.html" %} {% block title %}错误日志管理 - Gemini Balance{%
|
||||
endblock %} {% block head_extra_styles %}
|
||||
<style>
|
||||
/* error_logs.html specific styles */
|
||||
/* Table styles */
|
||||
.styled-table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #f3f4f6; /* bg-gray-100 */
|
||||
z-index: 10;
|
||||
/* error_logs.html specific styles */
|
||||
.styled-table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: rgba(80, 60, 160, 0.8); /* theming: table header bg */
|
||||
color: #ffffff !important; /* theming: table header text, ensured light */
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid rgba(120, 100, 200, 0.4);
|
||||
}
|
||||
.styled-table tbody tr:hover {
|
||||
background-color: rgba(90, 70, 170, 0.4); /* theming: table row hover */
|
||||
}
|
||||
.styled-table td {
|
||||
padding: 12px 20px;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 250px;
|
||||
color: #d1d5db; /* theming: table cell text (gray-300) */
|
||||
border-bottom: 1px solid rgba(120, 100, 200, 0.2); /* theming: cell border */
|
||||
}
|
||||
.styled-table td:nth-child(4) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-view-details {
|
||||
background-color: rgba(107, 70, 193, 0.4); /* theming */
|
||||
color: #c4b5fd; /* theming */
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border: 1px solid rgba(120, 100, 200, 0.6); /* theming */
|
||||
}
|
||||
.btn-view-details:hover {
|
||||
background-color: rgba(120, 100, 200, 0.6); /* theming */
|
||||
color: #ede9fe; /* theming */
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.search-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.styled-table tbody tr:hover {
|
||||
background-color: #f9fafb; /* bg-gray-50 */
|
||||
}
|
||||
.styled-table td {
|
||||
padding: 12px 20px;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 250px;
|
||||
}
|
||||
/* Ensure error log column does not wrap and remove max-width */
|
||||
.styled-table td:nth-child(4) { /* Assuming error log is the 4th column */
|
||||
/* max-width: none; */
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-view-details {
|
||||
background-color: #eef2ff; /* primary-50 */
|
||||
color: #4f46e5; /* primary-600 */
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border: 1px solid #c7d2fe; /* primary-200 */
|
||||
}
|
||||
.btn-view-details:hover {
|
||||
background-color: #c7d2fe; /* primary-200 */
|
||||
color: #4338ca; /* primary-700 */
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.search-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
/* Modal styles are in base.html */
|
||||
|
||||
/* 确保输入框和按钮高度一致 */
|
||||
input[type="text"], input[type="datetime-local"], select, button {
|
||||
height: 36px !important;
|
||||
}
|
||||
|
||||
/* 日期选择器样式优化 */
|
||||
.date-range-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* 确保所有输入框在小屏幕上正确显示 */
|
||||
@media (max-width: 640px) {
|
||||
input[type="datetime-local"] {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="datetime-local"],
|
||||
select,
|
||||
button {
|
||||
height: 36px !important;
|
||||
}
|
||||
.form-input-themed,
|
||||
input[type="datetime-local"],
|
||||
select#pageSize {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
border-color: rgba(120, 100, 200, 0.5) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.form-input-themed::placeholder,
|
||||
input[type="datetime-local"]::placeholder {
|
||||
color: #a0aec0 !important;
|
||||
}
|
||||
.form-input-themed:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
select#pageSize:focus {
|
||||
border-color: #a78bfa !important;
|
||||
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.4) !important;
|
||||
}
|
||||
select#pageSize {
|
||||
/* Styles from config_editor.html .form-select-themed, adapted for select#pageSize */
|
||||
background-color: rgba(60, 40, 130, 0.6) !important;
|
||||
border: 1px solid rgba(167, 139, 250, 0.7) !important;
|
||||
color: #ffffff !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23d8b4fe' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
|
||||
appearance: none !important;
|
||||
padding: 0.6rem 2.5rem 0.6rem 0.8rem !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: right 0.6rem center !important;
|
||||
background-size: 1.5em 1.5em !important;
|
||||
border-radius: 0.5rem !important;
|
||||
font-weight: 500 !important;
|
||||
height: 36px !important; /* Retain original height or use auto */
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
select#pageSize:focus {
|
||||
border-color: #d8b4fe !important; /* violet-300 */
|
||||
box-shadow: 0 0 0 3px rgba(216, 180, 254, 0.4) !important; /* ring-violet-300 */
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
select#pageSize option {
|
||||
background-color: rgba(76, 29, 149, 0.95) !important; /* 暗紫色背景 */
|
||||
color: #ffffff !important;
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
.date-range-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
input[type="datetime-local"] {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
label {
|
||||
color: #e2e8f0 !important; /* Light gray/white for labels */
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 导航链接悬停样式 (从 config_editor.html 复制) */
|
||||
.nav-link {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background-color: rgba(120, 100, 200, 0.6) !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Ensure text around pageSize select is light */
|
||||
.pagination-text {
|
||||
color: #e2e8f0 !important; /* Light gray/white for text */
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Pagination custom styles */
|
||||
.pagination li a, .pagination li span { /* Assuming 'span' might be used for non-clickable items like '...' */
|
||||
display: flex; /* For centering content if icons are used */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0.75rem; /* Adjust padding as needed */
|
||||
line-height: 1.25;
|
||||
color: #e2e8f0; /* Light gray/white text */
|
||||
background-color: rgba(107, 70, 193, 0.4); /* Consistent with other buttons */
|
||||
border: 1px solid rgba(120, 100, 200, 0.6); /* Consistent with other buttons */
|
||||
border-radius: 0.375rem; /* Tailwind's rounded-md */
|
||||
transition: all 0.2s ease-in-out;
|
||||
min-width: 36px; /* Ensure minimum width for small numbers */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination li a:hover, .pagination li span:hover:not(.disabled) { /* Avoid hover on disabled spans */
|
||||
color: #ffffff;
|
||||
background-color: rgba(120, 100, 200, 0.6); /* Consistent with other button hovers */
|
||||
border-color: rgba(167, 139, 250, 0.8);
|
||||
}
|
||||
|
||||
.pagination li.active a, .pagination li.active span { /* Assuming 'active' class for current page */
|
||||
color: #ffffff !important;
|
||||
background-color: #7c3aed !important; /* Violet-600, ensure it overrides */
|
||||
border-color: #7c3aed !important;
|
||||
font-weight: 600; /* Make active page number bolder */
|
||||
}
|
||||
|
||||
.pagination li.disabled a, .pagination li.disabled span { /* Assuming 'disabled' class */
|
||||
color: rgba(226, 232, 240, 0.6) !important;
|
||||
background-color: rgba(80, 60, 160, 0.3) !important; /* Slightly more visible than pure disabled */
|
||||
border-color: rgba(120, 100, 200, 0.4) !important;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% endblock %} {% block content %}
|
||||
<div class="container mx-auto px-4">
|
||||
<div
|
||||
class="rounded-2xl shadow-xl p-6 md:p-8"
|
||||
style="
|
||||
background-color: rgba(80, 60, 160, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(150, 130, 230, 0.3);
|
||||
"
|
||||
>
|
||||
<h1
|
||||
class="text-3xl font-extrabold text-center text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-pink-400 mb-4"
|
||||
>
|
||||
<img
|
||||
src="/static/icons/logo.png"
|
||||
alt="Gemini Balance Logo"
|
||||
class="h-9 inline-block align-middle mr-2"
|
||||
/>
|
||||
Gemini Balance - 错误日志
|
||||
</h1>
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4"> <!-- Removed max-width-7xl for wider content -->
|
||||
<div class="glass-card rounded-2xl shadow-xl p-6 md:p-8">
|
||||
<!-- Removed refresh button from top right -->
|
||||
|
||||
<h1 class="text-3xl font-extrabold text-center text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-primary-700 mb-4">
|
||||
<img src="/static/icons/logo.png" alt="Gemini Balance Logo" class="h-9 inline-block align-middle mr-2">
|
||||
Gemini Balance - 错误日志
|
||||
</h1>
|
||||
|
||||
<!-- Navigation Tabs -->
|
||||
<div class="flex justify-center mb-8 overflow-x-auto pb-2 gap-2">
|
||||
<a href="/config" class="whitespace-nowrap flex items-center justify-center gap-2 px-6 py-3 font-medium rounded-lg bg-white bg-opacity-50 hover:bg-opacity-70 text-gray-700 transition-all duration-200">
|
||||
<i class="fas fa-cog"></i> 配置编辑
|
||||
</a>
|
||||
<a href="/keys" class="whitespace-nowrap flex items-center justify-center gap-2 px-6 py-3 font-medium rounded-lg bg-white bg-opacity-50 hover:bg-opacity-70 text-gray-700 transition-all duration-200">
|
||||
<i class="fas fa-tachometer-alt"></i> 监控面板
|
||||
</a>
|
||||
<a href="/logs" class="whitespace-nowrap flex items-center justify-center gap-2 px-6 py-3 font-medium rounded-lg bg-primary-600 text-white shadow-md">
|
||||
<i class="fas fa-exclamation-triangle"></i> 错误日志
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<div class="bg-white bg-opacity-70 rounded-xl p-6 shadow-lg animate-fade-in">
|
||||
<h2 class="text-xl font-bold mb-6 pb-3 border-b border-gray-200 flex items-center gap-2">
|
||||
<i class="fas fa-bug text-primary-600"></i> 错误日志列表
|
||||
</h2>
|
||||
|
||||
<!-- 控制区域 (Refresh button removed, page size moved below) -->
|
||||
<!-- Removed the original controls div -->
|
||||
|
||||
<!-- 搜索与操作控件 -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[1fr_auto] items-center gap-4 mb-6"> <!-- 修改为items-center -->
|
||||
<!-- Left side: Search inputs and date range -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 w-full"> <!-- 修改为3列布局 -->
|
||||
<input type="text" id="keySearch" placeholder="搜索密钥 (部分)" style="height: 36px;" class="px-3 py-1 rounded-lg border border-gray-300 focus:border-primary-500 focus:ring focus:ring-primary-200 focus:ring-opacity-50">
|
||||
<input type="text" id="errorSearch" placeholder="搜索错误类型/日志" style="height: 36px;" class="px-3 py-1 rounded-lg border border-gray-300 focus:border-primary-500 focus:ring focus:ring-primary-200 focus:ring-opacity-50">
|
||||
<input type="text" id="errorCodeSearch" placeholder="搜索错误码" style="height: 36px;" class="px-3 py-1 rounded-lg border border-gray-300 focus:border-primary-500 focus:ring focus:ring-primary-200 focus:ring-opacity-50">
|
||||
<!-- 日期选择器单独一行 -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 col-span-1 sm:col-span-2 lg:col-span-3 mt-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-700 whitespace-nowrap">开始时间:</label>
|
||||
<input type="datetime-local" id="startDate" style="height: 36px;" class="px-3 py-1 rounded-lg border border-gray-300 focus:border-primary-500 focus:ring focus:ring-primary-200 focus:ring-opacity-50 text-sm w-full">
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-700 whitespace-nowrap">结束时间:</label>
|
||||
<input type="datetime-local" id="endDate" style="height: 36px;" class="px-3 py-1 rounded-lg border border-gray-300 focus:border-primary-500 focus:ring focus:ring-primary-200 focus:ring-opacity-50 text-sm w-full">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right side: Action buttons -->
|
||||
<div class="flex items-center gap-3 flex-shrink-0"> <!-- 移除上边距 -->
|
||||
<button id="searchBtn" class="flex items-center justify-center px-4 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition-all duration-200 shadow-sm hover:shadow-md whitespace-nowrap" style="height: 36px;">
|
||||
<i class="fas fa-search mr-1.5"></i>搜索
|
||||
</button>
|
||||
<button id="copySelectedKeysBtn" class="flex items-center justify-center px-4 py-1.5 bg-success-600 hover:bg-success-700 text-white rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm hover:shadow-md whitespace-nowrap" style="height: 36px;" disabled>
|
||||
<i class="far fa-copy mr-1.5"></i>复制
|
||||
</button>
|
||||
<button id="deleteSelectedBtn" class="flex items-center justify-center px-4 py-1.5 bg-danger-600 hover:bg-danger-700 text-white rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm hover:shadow-md whitespace-nowrap" style="height: 36px;" disabled>
|
||||
<i class="fas fa-trash-alt mr-1.5"></i>删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation Tabs -->
|
||||
<div class="flex justify-center mb-8 overflow-x-auto pb-2 gap-2">
|
||||
<a
|
||||
href="/config"
|
||||
class="nav-link whitespace-nowrap flex items-center justify-center gap-2 px-6 py-3 font-medium rounded-lg text-gray-200 hover:text-white transition-all duration-200"
|
||||
style="background-color: rgba(107, 70, 193, 0.4)"
|
||||
>
|
||||
<i class="fas fa-cog"></i> 配置编辑
|
||||
</a>
|
||||
<a
|
||||
href="/keys"
|
||||
class="nav-link whitespace-nowrap flex items-center justify-center gap-2 px-6 py-3 font-medium rounded-lg text-gray-200 hover:text-white transition-all duration-200"
|
||||
style="background-color: rgba(107, 70, 193, 0.4)"
|
||||
>
|
||||
<i class="fas fa-tachometer-alt"></i> 监控面板
|
||||
</a>
|
||||
<a
|
||||
href="/logs"
|
||||
class="whitespace-nowrap flex items-center justify-center gap-2 px-6 py-3 font-medium rounded-lg bg-violet-600 text-white shadow-md"
|
||||
>
|
||||
<i class="fas fa-exclamation-triangle"></i> 错误日志
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 表格容器 - Enhanced Styling -->
|
||||
<div class="overflow-x-auto rounded-lg border border-gray-200 mb-6 bg-white"> <!-- Removed shadow, added border -->
|
||||
<table class="styled-table w-full min-w-full text-sm"> <!-- Added text-sm -->
|
||||
<thead>
|
||||
<tr class="bg-primary-50 text-left text-primary-800"> <!-- Changed header background and text color -->
|
||||
<th class="px-3 py-3 font-semibold rounded-tl-lg w-12 text-center"> <!-- Adjusted padding and width -->
|
||||
<input type="checkbox" id="selectAllCheckbox" class="form-checkbox h-4 w-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500">
|
||||
</th>
|
||||
<th class="px-5 py-3 font-semibold cursor-pointer" id="sortById">
|
||||
ID <i class="fas fa-sort ml-1 text-gray-400"></i>
|
||||
</th>
|
||||
<th class="px-5 py-3 font-semibold">Gemini密钥</th>
|
||||
<th class="px-5 py-3 font-semibold">错误类型</th>
|
||||
<th class="px-5 py-3 font-semibold">错误码</th>
|
||||
<th class="px-5 py-3 font-semibold">模型名称</th>
|
||||
<th class="px-5 py-3 font-semibold">请求时间</th>
|
||||
<th class="px-5 py-3 font-semibold rounded-tr-lg text-center">操作</th> <!-- Adjusted rounding and centered -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="errorLogsTable" class="divide-y divide-gray-200">
|
||||
<!-- 错误日志数据将通过JavaScript动态加载 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 状态指示器 -->
|
||||
<div id="loadingIndicator" class="flex items-center justify-center p-8 hidden">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
|
||||
<p class="ml-4 text-lg text-gray-700 font-medium">加载中，请稍候...</p>
|
||||
</div>
|
||||
|
||||
<div id="noDataMessage" class="text-center py-12 text-gray-500 hidden">
|
||||
<i class="fas fa-inbox text-5xl mb-3"></i>
|
||||
<p class="text-lg">暂无错误日志数据</p>
|
||||
</div>
|
||||
|
||||
<div id="errorMessage" class="bg-danger-50 text-danger-600 p-4 rounded-lg font-medium text-center hidden">
|
||||
<i class="fas fa-exclamation-circle mr-2"></i>
|
||||
加载错误日志失败，请稍后重试。
|
||||
</div>
|
||||
|
||||
<!-- 分页与每页显示控件 -->
|
||||
<div class="flex flex-col sm:flex-row justify-between items-center mt-6 gap-4">
|
||||
<!-- 每页显示控件 (Moved here) -->
|
||||
<div class="flex items-center gap-2 text-sm text-gray-700">
|
||||
<label for="pageSize" class="font-medium">每页显示:</label>
|
||||
<select id="pageSize" class="rounded-md border border-gray-300 focus:ring focus:ring-primary-200 focus:border-primary-500 px-2 py-1 bg-white text-sm">
|
||||
<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>
|
||||
<!-- 分页控件 -->
|
||||
<div class="flex items-center gap-4"> <!-- Wrapper for pagination and input -->
|
||||
<ul class="pagination flex items-center gap-1" id="pagination">
|
||||
<!-- 分页控件将通过JavaScript动态加载 -->
|
||||
</ul>
|
||||
<!-- 页码输入跳转 -->
|
||||
<div class="flex items-center gap-1">
|
||||
<input type="number" id="pageInput" min="1" class="w-16 px-2 py-1 rounded-md border border-gray-300 text-sm focus:ring focus:ring-primary-200 focus:border-primary-500" placeholder="页码">
|
||||
<button id="goToPageBtn" class="px-3 py-1 bg-primary-600 hover:bg-primary-700 text-white text-sm rounded-md transition">跳转</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主内容区域 -->
|
||||
<div
|
||||
class="rounded-xl p-6 shadow-lg animate-fade-in"
|
||||
style="
|
||||
background-color: rgba(70, 50, 150, 0.5);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(120, 100, 200, 0.2);
|
||||
"
|
||||
>
|
||||
<h2
|
||||
class="text-xl font-bold mb-6 pb-3 border-b flex items-center gap-2 text-gray-100 border-violet-300 border-opacity-30"
|
||||
>
|
||||
<i class="fas fa-bug text-violet-400"></i> 错误日志列表
|
||||
</h2>
|
||||
|
||||
<!-- 搜索与操作控件 -->
|
||||
<div
|
||||
class="grid grid-cols-1 lg:grid-cols-[1fr_auto] items-center gap-4 mb-6"
|
||||
>
|
||||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 w-full"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="keySearch"
|
||||
placeholder="搜索密钥 (部分)"
|
||||
class="px-3 py-1 rounded-lg border form-input-themed"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="errorSearch"
|
||||
placeholder="搜索错误类型/日志"
|
||||
class="px-3 py-1 rounded-lg border form-input-themed"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="errorCodeSearch"
|
||||
placeholder="搜索错误码"
|
||||
class="px-3 py-1 rounded-lg border form-input-themed"
|
||||
/>
|
||||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 gap-2 col-span-1 sm:col-span-2 lg:col-span-3 mt-2"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-300 whitespace-nowrap"
|
||||
>开始时间:</label
|
||||
>
|
||||
<input
|
||||
type="datetime-local"
|
||||
id="startDate"
|
||||
class="px-3 py-1 rounded-lg border text-sm w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll buttons are now in base.html -->
|
||||
<div class="scroll-buttons">
|
||||
<button class="scroll-button" onclick="scrollToTop()" title="回到顶部">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</button>
|
||||
<button class="scroll-button" onclick="scrollToBottom()" title="滚动到底部">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Notification component is now in base.html (use id="notification") -->
|
||||
<div id="notification" class="notification"></div>
|
||||
<!-- Footer is now in base.html -->
|
||||
|
||||
<!-- 日志详情模态框 -->
|
||||
<div id="logDetailModal" class="modal">
|
||||
<div class="w-full max-w-6xl mx-auto bg-white rounded-2xl shadow-2xl overflow-hidden animate-fade-in"> <!-- Increased max-width to 6xl -->
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-center border-b border-gray-200 pb-4 mb-4">
|
||||
<h2 class="text-xl font-bold text-gray-800">错误日志详情</h2>
|
||||
<button id="closeLogDetailModalBtn" class="text-gray-400 hover:text-gray-600 text-xl">×</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 max-h-[60vh] overflow-y-auto p-1">
|
||||
<div class="bg-gray-50 p-4 rounded-lg relative group"> <!-- Added relative and group -->
|
||||
<h6 class="text-sm font-semibold text-gray-600 mb-1">Gemini密钥:</h6>
|
||||
<pre id="modalGeminiKey" class="font-mono text-sm bg-gray-100 p-3 rounded overflow-x-auto"></pre>
|
||||
<button class="copy-btn absolute top-2 right-2 bg-gray-200 hover:bg-gray-300 text-gray-600 p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity" data-target="modalGeminiKey" title="复制密钥">
|
||||
<i class="far fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-4 rounded-lg relative group"> <!-- Added relative and group -->
|
||||
<h6 class="text-sm font-semibold text-gray-600 mb-1">错误类型:</h6>
|
||||
<p id="modalErrorType" class="text-danger-600 font-medium pr-8"></p> <!-- Added padding right for button -->
|
||||
<button class="copy-btn absolute top-2 right-2 bg-gray-200 hover:bg-gray-300 text-gray-600 p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity" data-target="modalErrorType" title="复制错误类型">
|
||||
<i class="far fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-4 rounded-lg relative group">
|
||||
<h6 class="text-sm font-semibold text-gray-600 mb-1">错误日志:</h6>
|
||||
<pre id="modalErrorLog" class="font-mono text-sm bg-gray-100 p-3 rounded overflow-x-auto whitespace-pre-wrap"></pre>
|
||||
<button class="copy-btn absolute top-2 right-2 bg-gray-200 hover:bg-gray-300 text-gray-600 p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity" data-target="modalErrorLog" title="复制错误日志">
|
||||
<i class="far fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-4 rounded-lg relative group">
|
||||
<h6 class="text-sm font-semibold text-gray-600 mb-1">请求消息:</h6>
|
||||
<pre id="modalRequestMsg" class="font-mono text-sm bg-gray-100 p-3 rounded overflow-x-auto whitespace-pre-wrap"></pre>
|
||||
<button class="copy-btn absolute top-2 right-2 bg-gray-200 hover:bg-gray-300 text-gray-600 p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity" data-target="modalRequestMsg" title="复制请求消息">
|
||||
<i class="far fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-4 rounded-lg relative group"> <!-- Added relative and group -->
|
||||
<h6 class="text-sm font-semibold text-gray-600 mb-1">模型名称:</h6>
|
||||
<p id="modalModelName" class="font-medium pr-8"></p> <!-- Added padding right for button -->
|
||||
<button class="copy-btn absolute top-2 right-2 bg-gray-200 hover:bg-gray-300 text-gray-600 p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity" data-target="modalModelName" title="复制模型名称">
|
||||
<i class="far fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-4 rounded-lg relative group"> <!-- Added relative and group -->
|
||||
<h6 class="text-sm font-semibold text-gray-600 mb-1">请求时间:</h6>
|
||||
<p id="modalRequestTime" class="font-medium pr-8"></p> <!-- Added padding right for button -->
|
||||
<button class="copy-btn absolute top-2 right-2 bg-gray-200 hover:bg-gray-300 text-gray-600 p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity" data-target="modalRequestTime" title="复制请求时间">
|
||||
<i class="far fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-6">
|
||||
<button type="button" id="closeModalFooterBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded-lg font-medium transition">关闭</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-300 whitespace-nowrap"
|
||||
>结束时间:</label
|
||||
>
|
||||
<input
|
||||
type="datetime-local"
|
||||
id="endDate"
|
||||
class="px-3 py-1 rounded-lg border text-sm w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 flex-shrink-0">
|
||||
<button
|
||||
id="searchBtn"
|
||||
class="flex items-center justify-center px-4 py-1.5 bg-violet-600 hover:bg-violet-700 text-white rounded-lg font-medium transition-all duration-200 shadow-sm hover:shadow-md whitespace-nowrap"
|
||||
>
|
||||
<i class="fas fa-search mr-1.5"></i>搜索
|
||||
</button>
|
||||
<button
|
||||
id="copySelectedKeysBtn"
|
||||
class="flex items-center justify-center px-4 py-1.5 bg-sky-600 hover:bg-sky-700 text-white rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm hover:shadow-md whitespace-nowrap"
|
||||
disabled
|
||||
>
|
||||
<i class="far fa-copy mr-1.5"></i>复制
|
||||
</button>
|
||||
<button
|
||||
id="deleteSelectedBtn"
|
||||
class="flex items-center justify-center px-4 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm hover:shadow-md whitespace-nowrap"
|
||||
disabled
|
||||
>
|
||||
<i class="fas fa-trash-alt mr-1.5"></i>删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格容器 -->
|
||||
<div
|
||||
class="overflow-x-auto rounded-lg border mb-6"
|
||||
style="border-color: rgba(120, 100, 200, 0.3)"
|
||||
>
|
||||
<table class="styled-table w-full min-w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-left">
|
||||
<th
|
||||
class="px-3 py-3 font-semibold rounded-tl-lg w-12 text-center"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="selectAllCheckbox"
|
||||
class="form-checkbox h-4 w-4 text-violet-500 border-gray-500 rounded focus:ring-violet-500 bg-transparent"
|
||||
/>
|
||||
</th>
|
||||
<th class="px-5 py-3 font-semibold cursor-pointer" id="sortById">
|
||||
ID <i class="fas fa-sort ml-1"></i>
|
||||
</th>
|
||||
<th class="px-5 py-3 font-semibold">Gemini密钥</th>
|
||||
<th class="px-5 py-3 font-semibold">错误类型</th>
|
||||
<th class="px-5 py-3 font-semibold">错误码</th>
|
||||
<th class="px-5 py-3 font-semibold">模型名称</th>
|
||||
<th class="px-5 py-3 font-semibold">请求时间</th>
|
||||
<th class="px-5 py-3 font-semibold rounded-tr-lg text-center">
|
||||
操作
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
id="errorLogsTable"
|
||||
class="divide-y"
|
||||
style="border-color: rgba(120, 100, 200, 0.2)"
|
||||
>
|
||||
<!-- 错误日志数据将通过JavaScript动态加载 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 状态指示器 -->
|
||||
<div
|
||||
id="loadingIndicator"
|
||||
class="flex items-center justify-center p-8 hidden"
|
||||
>
|
||||
<div
|
||||
class="animate-spin rounded-full h-12 w-12 border-b-2 border-violet-400"
|
||||
></div>
|
||||
<p class="ml-4 text-lg text-gray-300 font-medium">加载中，请稍候...</p>
|
||||
</div>
|
||||
|
||||
<div id="noDataMessage" class="text-center py-12 text-gray-400 hidden">
|
||||
<i class="fas fa-inbox text-5xl mb-3"></i>
|
||||
<p class="text-lg">暂无错误日志数据</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="errorMessage"
|
||||
class="p-4 rounded-lg font-medium text-center hidden"
|
||||
style="background-color: rgba(220, 38, 38, 0.2); color: #fca5a5"
|
||||
>
|
||||
<i class="fas fa-exclamation-circle mr-2"></i>
|
||||
加载错误日志失败，请稍后重试。
|
||||
</div>
|
||||
|
||||
<!-- 分页与每页显示控件 -->
|
||||
<div
|
||||
class="flex flex-col sm:flex-row justify-between items-center mt-6 gap-4"
|
||||
>
|
||||
<div class="flex items-center gap-2 text-sm text-gray-300">
|
||||
<label for="pageSize" class="font-medium pagination-text"
|
||||
>每页显示:</label
|
||||
>
|
||||
<select
|
||||
id="pageSize"
|
||||
class="rounded-md border focus:ring focus:border-violet-400 px-2 py-1 text-sm"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="20" selected>20</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
<span class="pagination-text">条</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<ul class="pagination flex items-center gap-1" id="pagination">
|
||||
<!-- 分页控件将通过JavaScript动态加载 -->
|
||||
</ul>
|
||||
<div class="flex items-center gap-1">
|
||||
<input
|
||||
type="number"
|
||||
id="pageInput"
|
||||
min="1"
|
||||
class="w-16 px-2 py-1 rounded-md border text-sm focus:ring focus:border-violet-400 form-input-themed"
|
||||
placeholder="页码"
|
||||
/>
|
||||
<button
|
||||
id="goToPageBtn"
|
||||
class="px-3 py-1 bg-violet-600 hover:bg-violet-700 text-white text-sm rounded-md transition"
|
||||
>
|
||||
跳转
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll buttons are now in base.html -->
|
||||
<div class="scroll-buttons">
|
||||
<button class="scroll-button" onclick="scrollToTop()" title="回到顶部">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</button>
|
||||
<button class="scroll-button" onclick="scrollToBottom()" title="滚动到底部">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Notification component is now in base.html (use id="notification") -->
|
||||
<div id="notification" class="notification"></div>
|
||||
<!-- Footer is now in base.html -->
|
||||
|
||||
<!-- 日志详情模态框 -->
|
||||
<div id="logDetailModal" class="modal">
|
||||
<div
|
||||
class="w-full max-w-6xl mx-auto rounded-2xl shadow-2xl overflow-hidden animate-fade-in"
|
||||
style="
|
||||
background-color: rgba(70, 50, 150, 0.95);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(120, 100, 200, 0.4);
|
||||
"
|
||||
>
|
||||
<div class="p-6">
|
||||
<div
|
||||
class="flex justify-between items-center pb-4 mb-4"
|
||||
style="border-bottom: 1px solid rgba(120, 100, 200, 0.4)"
|
||||
>
|
||||
<h2 class="text-xl font-bold text-gray-100">错误日志详情</h2>
|
||||
<button
|
||||
id="closeLogDetailModalBtn"
|
||||
class="text-gray-300 hover:text-gray-100 text-xl"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 max-h-[60vh] overflow-y-auto p-1">
|
||||
<div
|
||||
class="p-4 rounded-lg relative group"
|
||||
style="background-color: rgba(80, 60, 160, 0.3)"
|
||||
>
|
||||
<h6 class="text-sm font-semibold text-violet-200 mb-1">
|
||||
Gemini密钥:
|
||||
</h6>
|
||||
<pre
|
||||
id="modalGeminiKey"
|
||||
class="font-mono text-sm p-3 rounded overflow-x-auto"
|
||||
style="background-color: rgba(0, 0, 0, 0.2); color: #e5e7eb"
|
||||
></pre>
|
||||
<button
|
||||
class="copy-btn absolute top-2 right-2 hover:bg-gray-600 text-gray-300 p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
style="background-color: rgba(0, 0, 0, 0.3)"
|
||||
data-target="modalGeminiKey"
|
||||
title="复制密钥"
|
||||
>
|
||||
<i class="far fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-4 rounded-lg relative group"
|
||||
style="background-color: rgba(80, 60, 160, 0.3)"
|
||||
>
|
||||
<h6 class="text-sm font-semibold text-violet-200 mb-1">错误类型:</h6>
|
||||
<p id="modalErrorType" class="text-red-300 font-medium pr-8"></p>
|
||||
<button
|
||||
class="copy-btn absolute top-2 right-2 hover:bg-gray-600 text-gray-300 p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
style="background-color: rgba(0, 0, 0, 0.3)"
|
||||
data-target="modalErrorType"
|
||||
title="复制错误类型"
|
||||
>
|
||||
<i class="far fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-4 rounded-lg relative group"
|
||||
style="background-color: rgba(80, 60, 160, 0.3)"
|
||||
>
|
||||
<h6 class="text-sm font-semibold text-violet-200 mb-1">错误日志:</h6>
|
||||
<pre
|
||||
id="modalErrorLog"
|
||||
class="font-mono text-sm p-3 rounded overflow-x-auto whitespace-pre-wrap"
|
||||
style="background-color: rgba(0, 0, 0, 0.2); color: #e5e7eb"
|
||||
></pre>
|
||||
<button
|
||||
class="copy-btn absolute top-2 right-2 hover:bg-gray-600 text-gray-300 p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
style="background-color: rgba(0, 0, 0, 0.3)"
|
||||
data-target="modalErrorLog"
|
||||
title="复制错误日志"
|
||||
>
|
||||
<i class="far fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-4 rounded-lg relative group"
|
||||
style="background-color: rgba(80, 60, 160, 0.3)"
|
||||
>
|
||||
<h6 class="text-sm font-semibold text-violet-200 mb-1">请求消息:</h6>
|
||||
<pre
|
||||
id="modalRequestMsg"
|
||||
class="font-mono text-sm p-3 rounded overflow-x-auto whitespace-pre-wrap"
|
||||
style="background-color: rgba(0, 0, 0, 0.2); color: #e5e7eb"
|
||||
></pre>
|
||||
<button
|
||||
class="copy-btn absolute top-2 right-2 hover:bg-gray-600 text-gray-300 p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
style="background-color: rgba(0, 0, 0, 0.3)"
|
||||
data-target="modalRequestMsg"
|
||||
title="复制请求消息"
|
||||
>
|
||||
<i class="far fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-4 rounded-lg relative group"
|
||||
style="background-color: rgba(80, 60, 160, 0.3)"
|
||||
>
|
||||
<h6 class="text-sm font-semibold text-violet-200 mb-1">模型名称:</h6>
|
||||
<p id="modalModelName" class="font-medium pr-8 text-gray-200"></p>
|
||||
<button
|
||||
class="copy-btn absolute top-2 right-2 hover:bg-gray-600 text-gray-300 p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
style="background-color: rgba(0, 0, 0, 0.3)"
|
||||
data-target="modalModelName"
|
||||
title="复制模型名称"
|
||||
>
|
||||
<i class="far fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-4 rounded-lg relative group"
|
||||
style="background-color: rgba(80, 60, 160, 0.3)"
|
||||
>
|
||||
<h6 class="text-sm font-semibold text-violet-200 mb-1">请求时间:</h6>
|
||||
<p id="modalRequestTime" class="font-medium pr-8 text-gray-200"></p>
|
||||
<button
|
||||
class="copy-btn absolute top-2 right-2 hover:bg-gray-600 text-gray-300 p-1.5 rounded opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
style="background-color: rgba(0, 0, 0, 0.3)"
|
||||
data-target="modalRequestTime"
|
||||
title="复制请求时间"
|
||||
>
|
||||
<i class="far fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-end mt-6 pt-4"
|
||||
style="border-top: 1px solid rgba(120, 100, 200, 0.4)"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
id="closeModalFooterBtn"
|
||||
class="bg-gray-500 bg-opacity-50 hover:bg-opacity-70 text-gray-200 px-6 py-2 rounded-lg font-medium transition"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 删除确认模态框 -->
|
||||
<div id="deleteConfirmModal" class="modal">
|
||||
<div class="w-full max-w-md mx-auto bg-white rounded-xl shadow-xl overflow-hidden animate-fade-in">
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-center border-b border-gray-200 pb-3 mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-800">确认删除</h2>
|
||||
<button id="closeDeleteConfirmModalBtn" class="text-gray-400 hover:text-gray-600 text-xl">×</button>
|
||||
</div>
|
||||
<p id="deleteConfirmMessage" class="text-gray-700 mb-6">你确定要删除选中的项目吗？此操作不可恢复！</p>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button id="cancelDeleteBtn" type="button" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-5 py-2 rounded-lg font-medium transition">取消</button>
|
||||
<button id="confirmDeleteBtn" type="button" class="bg-danger-600 hover:bg-danger-700 text-white px-5 py-2 rounded-lg font-medium transition">确认删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="deleteConfirmModal" class="modal">
|
||||
<div
|
||||
class="w-full max-w-md mx-auto rounded-xl shadow-xl overflow-hidden animate-fade-in"
|
||||
style="
|
||||
background-color: rgba(70, 50, 150, 0.95);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(120, 100, 200, 0.4);
|
||||
"
|
||||
>
|
||||
<div class="p-6">
|
||||
<div
|
||||
class="flex justify-between items-center pb-3 mb-4"
|
||||
style="border-bottom: 1px solid rgba(120, 100, 200, 0.4)"
|
||||
>
|
||||
<h2 class="text-lg font-semibold text-gray-100">确认删除</h2>
|
||||
<button
|
||||
id="closeDeleteConfirmModalBtn"
|
||||
class="text-gray-300 hover:text-gray-100 text-xl"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<p id="deleteConfirmMessage" class="text-gray-300 mb-6">
|
||||
你确定要删除选中的项目吗？此操作不可恢复！
|
||||
</p>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button
|
||||
id="cancelDeleteBtn"
|
||||
type="button"
|
||||
class="bg-gray-500 bg-opacity-50 hover:bg-opacity-70 text-gray-200 px-5 py-2 rounded-lg font-medium transition"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
id="confirmDeleteBtn"
|
||||
type="button"
|
||||
class="bg-red-600 hover:bg-red-700 text-white px-5 py-2 rounded-lg font-medium transition"
|
||||
>
|
||||
确认删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block body_scripts %}
|
||||
<script src="/static/js/error_logs.js"></script>
|
||||
<script>
|
||||
// error_logs.html specific JS initialization (if any)
|
||||
// e.g., initialize date pickers or other elements if needed
|
||||
// The main logic is in error_logs.js
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %} {% block body_scripts %}
|
||||
<script src="/static/js/error_logs.js"></script>
|
||||
<script>
|
||||
// error_logs.html specific JS initialization (if any)
|
||||
// e.g., initialize date pickers or other elements if needed
|
||||
// The main logic is in error_logs.js
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
+1258
-612
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user