AMAZEHOME/dns-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加暗色模式切换

Browse Source
This commit is contained in:
Alex Yang
2026-01-28 11:16:58 +08:00
parent bf845c52a5
commit f54afee80b
10 changed files with 6491 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

400
static/css/style.css
View File

@@ -1,3 +1,184 @@
/* 主题CSS变量定义 */
:root {
/* 主题颜色变量 */
--bg-primary: #f5f7fa;
--bg-secondary: #ffffff;
--bg-tertiary: #f8f9fa;
--text-primary: #333333;
--text-secondary: #555555;
--text-muted: #7f8c8d;
--border-color: #e9ecef;
--primary-color: #3498db;
--primary-hover: #2980b9;
--success-color: #2ecc71;
--danger-color: #e74c3c;
--warning-color: #f39c12;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
/* 基础响应式变量 */
--sidebar-width: 250px;
--sidebar-mobile-width: 70px;
--header-height: 130px;
--content-padding: 1rem;
--card-min-width: 300px;
}
.dark {
/* 深色主题颜色变量 */
--bg-primary: #1a1a1a;
--bg-secondary: #2d2d2d;
--bg-tertiary: #3a3a3a;
--text-primary: #e2e8f0;
--text-secondary: #a0aec0;
--text-muted: #718096;
--border-color: #4a5568;
--primary-color: #4299e1;
--primary-hover: #3182ce;
--success-color: #48bb78;
--danger-color: #f56565;
--warning-color: #ed8936;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* 深色主题下的Tailwind CSS类覆盖 */
.dark .bg-white {
background-color: var(--bg-secondary);
}
.dark .bg-gray-50 {
background-color: var(--bg-tertiary);
}
.dark .bg-blue-50 {
background-color: rgba(66, 153, 225, 0.1);
}
.dark .bg-green-50 {
background-color: rgba(72, 187, 120, 0.1);
}
.dark .bg-purple-50 {
background-color: rgba(159, 122, 234, 0.1);
}
.dark .bg-yellow-50 {
background-color: rgba(237, 153, 54, 0.1);
}
.dark .bg-red-50 {
background-color: rgba(245, 101, 101, 0.1);
}
.dark .bg-indigo-50 {
background-color: rgba(99, 102, 241, 0.1);
}
.dark .text-gray-500 {
color: var(--text-muted);
}
.dark .text-gray-700 {
color: var(--text-secondary);
}
.dark .text-dark {
color: var(--text-primary);
}
.dark .border-gray-200 {
border-color: var(--border-color);
}
.dark .border-gray-300 {
border-color: var(--border-color);
}
.dark .card-shadow {
box-shadow: var(--shadow);
}
/* 确保表格在深色模式下正确显示 */
.dark table {
background-color: var(--bg-secondary);
}
.dark th {
background-color: var(--bg-tertiary);
color: var(--text-primary);
border-bottom-color: var(--border-color);
}
.dark td {
color: var(--text-primary);
border-bottom-color: var(--border-color);
}
.dark tr:hover {
background-color: var(--bg-tertiary);
}
/* 确保输入框在深色模式下正确显示 */
.dark input[type="text"],
.dark input[type="password"],
.dark input[type="number"],
.dark select,
.dark textarea {
background-color: var(--bg-tertiary);
color: var(--text-primary);
border-color: var(--border-color);
}
.dark input[type="text"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark select:focus,
.dark textarea:focus {
border-color: var(--primary-color);
}
/* 确保按钮在深色模式下正确显示 */
.dark .btn {
transition: all 0.3s ease;
}
/* 确保卡片在深色模式下正确显示 */
.dark .stat-card,
.dark .chart-card,
.dark .table-card {
background-color: var(--bg-secondary);
box-shadow: var(--shadow);
}
.dark .stat-card i {
color: var(--primary-color);
}
.dark .stat-value {
color: var(--text-primary);
}
.dark .stat-label {
color: var(--text-muted);
}
.dark .chart-card h3 {
color: var(--text-primary);
}
.dark .table-card h3 {
color: var(--text-primary);
}
/* 确保面板在深色模式下正确显示 */
.dark .panel {
background-color: var(--bg-secondary);
box-shadow: var(--shadow);
}
.dark .panel-header h2 {
color: var(--text-primary);
}
/* 全局样式重置 */
* {
margin: 0;
@@ -7,27 +188,19 @@
html, body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f7fa;
color: #333;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
width: 100%;
height: 100%;
overflow-x: hidden;
transition: background-color 0.3s ease, color 0.3s ease;
}
body {
position: relative;
}
/* 基础响应式变量 */
:root {
--sidebar-width: 250px;
--sidebar-mobile-width: 70px;
--header-height: 130px;
--content-padding: 1rem;
--card-min-width: 300px;
}
/* 主容器样式 */
.container {
display: flex;
@@ -35,8 +208,9 @@ body {
min-height: 100vh;
width: 100%;
max-width: 100%;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
background-color: var(--bg-secondary);
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
/* 头部样式 */
@@ -85,14 +259,15 @@ header p {
/* 侧边栏样式 */
.sidebar {
width: var(--sidebar-width);
background-color: #2c3e50;
color: white;
background-color: var(--bg-secondary);
color: var(--text-primary);
padding: 1rem 0;
flex-shrink: 0;
overflow-y: auto;
height: calc(100vh - var(--header-height)); /* 减去header的高度 */
transition: width 0.3s ease;
transition: width 0.3s ease, background-color 0.3s ease, color 0.3s ease;
position: relative;
border-right: 1px solid var(--border-color);
}
/* 移动设备侧边栏切换按钮 */
@@ -101,14 +276,15 @@ header p {
top: calc(var(--header-height) + 10px);
left: 10px;
z-index: 100;
background-color: #2c3e50;
color: white;
border: none;
background-color: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 8px 12px;
cursor: pointer;
display: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
/* 响应式布局 - 平板设备 */
@@ -148,13 +324,14 @@ header p {
}
.nav-item:hover {
background-color: #34495e;
background-color: var(--bg-tertiary);
padding-left: 1.75rem;
}
.nav-item.active {
background-color: #3498db;
border-left: 4px solid #fff;
background-color: var(--primary-color);
border-left: 4px solid var(--bg-primary);
color: white;
}
.nav-item i {
@@ -168,10 +345,10 @@ header p {
flex: 1;
padding: var(--content-padding);
overflow-y: auto;
background-color: #f8f9fa;
background-color: var(--bg-primary);
min-width: 0; /* 防止flex子元素溢出 */
height: calc(100vh - var(--header-height)); /* 减去header的高度 */
transition: padding-left 0.3s ease;
transition: padding-left 0.3s ease, background-color 0.3s ease;
}
/* Tooltip趋势信息颜色类 - 替代内联style */
@@ -238,12 +415,13 @@ header p {
/* 面板样式 */
.panel {
display: none;
background-color: white;
background-color: var(--bg-secondary);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
box-shadow: var(--shadow);
box-sizing: border-box;
overflow: hidden;
transition: all 0.3s ease;
}
.panel.active {
@@ -256,12 +434,13 @@ header p {
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e9ecef;
border-bottom: 1px solid var(--border-color);
}
.panel-header h2 {
font-size: 1.5rem;
color: #2c3e50;
color: var(--text-primary);
transition: color 0.3s ease;
}
/* 状态指示器 */
@@ -316,48 +495,51 @@ header p {
}
.btn-primary {
background-color: #3498db;
background-color: var(--primary-color);
color: white;
}
.btn-primary:hover {
background-color: #2980b9;
background-color: var(--primary-hover);
}
.btn-secondary {
background-color: #7f8c8d;
background-color: var(--text-muted);
color: white;
}
.btn-secondary:hover {
background-color: #6c757d;
background-color: var(--text-secondary);
}
.btn-success {
background-color: #2ecc71;
background-color: var(--success-color);
color: white;
}
.btn-success:hover {
background-color: #27ae60;
background-color: var(--success-color);
opacity: 0.9;
}
.btn-danger {
background-color: #e74c3c;
background-color: var(--danger-color);
color: white;
}
.btn-danger:hover {
background-color: #c0392b;
background-color: var(--danger-color);
opacity: 0.9;
}
.btn-warning {
background-color: #f39c12;
background-color: var(--warning-color);
color: white;
}
.btn-warning:hover {
background-color: #e67e22;
background-color: var(--warning-color);
opacity: 0.9;
}
.btn-sm {
@@ -386,12 +568,12 @@ header p {
}
.stat-card {
background-color: white;
background-color: var(--bg-secondary);
border-radius: 8px;
padding: clamp(1rem, 3vw, 1.5rem); /* 根据屏幕宽度动态调整内边距 */
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: var(--shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
min-width: 0; /* 防止内容溢出 */
display: flex;
flex-direction: column;
@@ -400,7 +582,7 @@ header p {
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
/* 卡片布局的响应式优化 */
@@ -449,21 +631,24 @@ header p {
.stat-card i {
font-size: 2rem;
margin-bottom: 1rem;
color: #3498db;
color: var(--primary-color);
transition: color 0.3s ease;
}
.stat-value {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #2c3e50;
color: var(--text-primary);
transition: color 0.3s ease;
}
.stat-label {
font-size: 0.9rem;
color: #7f8c8d;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
transition: color 0.3s ease;
}
/* 图表容器 */
@@ -475,16 +660,18 @@ header p {
}
.chart-card {
background-color: white;
background-color: var(--bg-secondary);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.chart-card h3 {
margin-bottom: 1rem;
font-size: 1.2rem;
color: #2c3e50;
color: var(--text-primary);
transition: color 0.3s ease;
}
/* 表格容器 */
@@ -546,27 +733,30 @@ header p {
}
.table-card {
background-color: white;
background-color: var(--bg-secondary);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.table-card h3 {
margin-bottom: 1rem;
font-size: 1.2rem;
color: #2c3e50;
color: var(--text-primary);
transition: color 0.3s ease;
}
/* 表格样式 */
.table-wrapper {
overflow-x: auto;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: var(--bg-secondary);
box-shadow: var(--shadow);
margin-bottom: 16px;
display: block;
width: 100%;
-webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
transition: all 0.3s ease;
}
/* 列宽调节样式 */
@@ -580,16 +770,17 @@ header p {
.resizable-table th {
position: relative;
padding: 0.75rem 1rem;
background-color: #f8f9fa;
background-color: var(--bg-tertiary);
font-weight: 600;
color: #2c3e50;
border-bottom: 1px solid #e9ecef;
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
cursor: pointer;
user-select: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 50px;
transition: all 0.3s ease;
}
.resizable-table th::after {
@@ -620,12 +811,14 @@ header p {
.resizable-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid #e9ecef;
border-bottom: 1px solid var(--border-color);
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 50px;
color: var(--text-primary);
transition: all 0.3s ease;
}
/* 确保表格容器正确显示 */
@@ -718,7 +911,8 @@ td.loading {
}
tr:hover {
background-color: #f8f9fa;
background-color: var(--bg-tertiary);
transition: background-color 0.3s ease;
}
/* 百分比条样式 */
@@ -762,20 +956,22 @@ tr:hover {
/* 分页控件样式 */
.pagination-controls {
background-color: #ffffff;
background-color: var(--bg-secondary);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow);
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
transition: all 0.3s ease;
}
.pagination-info {
font-size: 14px;
color: #666;
color: var(--text-muted);
transition: color 0.3s ease;
}
.pagination-buttons {
@@ -794,11 +990,13 @@ tr:hover {
.items-per-page select {
padding: 6px 12px;
border: 1px solid #ddd;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: #fff;
background-color: var(--bg-secondary);
color: var(--text-primary);
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.nav-buttons {
@@ -833,23 +1031,26 @@ tr:hover {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #2c3e50;
color: var(--text-primary);
transition: color 0.3s ease;
}
.form-group input,
.form-group select {
width: 100%;
padding: 0.75rem;
border: 1px solid #ced4da;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.3s ease;
background-color: var(--bg-secondary);
color: var(--text-primary);
transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #3498db;
border-color: var(--primary-color);
}
.form-row {
@@ -891,9 +1092,10 @@ tr:hover {
}
#query-result-container {
background-color: #f8f9fa;
background-color: var(--bg-tertiary);
border-radius: 8px;
padding: 1.5rem;
transition: all 0.3s ease;
}
#query-result-container.hidden {
@@ -926,16 +1128,18 @@ tr:hover {
}
.config-section {
background-color: #f8f9fa;
background-color: var(--bg-tertiary);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
}
.config-section h3 {
margin-bottom: 1.5rem;
font-size: 1.2rem;
color: #2c3e50;
color: var(--text-primary);
transition: color 0.3s ease;
}
.config-actions {
@@ -1292,4 +1496,58 @@ tr:hover {
/* 优化滚动行为 */
* {
scroll-behavior: smooth;
}
/* 暗色模式下排行榜列表项悬停文字颜色 */
.dark #top-blocked-table .hover\:bg-gray-50:hover .font-medium {
color: var(--danger-color);
}
.dark #top-domains-table .hover\:bg-gray-50:hover .font-medium {
color: var(--success-color);
}
.dark #top-clients-table .hover\:bg-gray-50:hover .font-medium {
color: var(--primary-color);
}
/* 暗色模式下DNS查询历史记录域名颜色 */
.dark #query-history .flex.items-center .font-medium {
color: var(--success-color);
}
.dark #query-history .flex.items-center .text-danger {
color: var(--danger-color);
}
.dark #query-history .flex.items-center .text-success {
color: var(--success-color);
}
/* 根据状态颜色设置域名颜色 */
.dark #query-history .flex.items-center:has(.text-danger) .font-medium {
color: var(--danger-color);
}
.dark #query-history .flex.items-center:has(.text-success) .font-medium {
color: var(--success-color);
}
/* 深色模式下Chart.js图例文字颜色 */
.dark .chartjs-legend {
color: var(--text-primary) !important;
}
.dark .chartjs-legend-item text {
fill: var(--text-primary) !important;
}
/* 强制设置Canvas中文本颜色 */
.dark canvas {
--chart-legend-color: var(--text-primary) !important;
}
/* 为Chart.js图例添加特定样式 */
.dark .chart-card {
--chart-legend-color: var(--text-primary) !important;
}

7
static/index.html
View File

@@ -17,7 +17,7 @@
<!-- 自定义工具类 -->
<style type="text/tailwindcss" src="css/index.css"></style>
</head>
<body class="bg-gray-50 text-dark font-sans">
<body class="font-sans">
<div class="flex h-screen overflow-hidden">
<!-- 侧边栏 -->
<aside id="sidebar" class="fixed inset-y-0 left-0 w-64 bg-white border-r border-gray-200 flex flex-col transition-transform duration-300 z-50 hidden md:flex">
@@ -169,6 +169,11 @@
<div class="flex items-center space-x-2 sm:space-x-4">
<!-- 主题切换按钮 -->
<button id="theme-toggle" class="p-1.5 sm:p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100 transition-all">
<i class="fa fa-moon-o text-sm sm:text-lg"></i>
</button>
<button class="p-1.5 sm:p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100 transition-all">
<i class="fa fa-bell text-sm sm:text-lg"></i>
</button>

251
static/js/dashboard.js
View File

@@ -600,33 +600,79 @@ function updateStatsCards(stats) {
// 存储正在进行的动画状态，避免动画重叠
const animationInProgress = {};
// 解析格式化的数字字符串（如"1.2K"）为实际数值
function parseFormattedNumber(str) {
if (!str || typeof str !== 'string') return 0;
// 移除逗号
str = str.replace(/,/g, '');
// 检查是否是数字字符串
const num = parseFloat(str);
if (!isNaN(num)) {
// 检查是否有K或M后缀
if (str.includes('K') || str.includes('k')) {
return num * 1000;
} else if (str.includes('M') || str.includes('m')) {
return num * 1000000;
}
return num;
}
return 0;
}
// 为数字元素添加翻页滚动特效
function animateValue(elementId, newValue) {
const element = document.getElementById(elementId);
if (!element) return;
const formattedNewValue = formatNumber(newValue);
const currentValue = element.textContent;
// 解析当前值和目标值
const currentText = element.textContent;
const currentValue = parseFormattedNumber(currentText);
const targetValue = parseFloat(newValue) || 0;
// 如果值没有变化，不执行任何操作
if (currentValue === formattedNewValue) {
if (currentValue === targetValue) {
return;
}
// 简化动画：使用CSS opacity过渡实现平滑更新
element.style.transition = 'opacity 0.3s ease-in-out';
element.style.opacity = '0';
// 检查是否有正在进行的动画
if (animationInProgress[elementId]) {
return;
}
// 使用requestAnimationFrame确保平滑过渡
requestAnimationFrame(() => {
element.textContent = formattedNewValue;
element.style.opacity = '1';
// 标记动画正在进行
animationInProgress[elementId] = true;
// 动画配置
const duration = Math.min(800, Math.abs(targetValue - currentValue) * 2); // 根据数值变化大小调整动画持续时间
const startTime = performance.now();
const startValue = currentValue;
// 翻页滚动动画函数
function animate(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
// 移除transition样式，避免影响后续更新
setTimeout(() => {
element.style.transition = '';
}, 300);
});
// 线性插值计算当前值
const currentAnimatedValue = startValue + (targetValue - startValue) * progress;
// 更新显示，使用Math.round确保整数显示
element.textContent = formatNumber(Math.round(currentAnimatedValue));
// 继续动画或结束
if (progress < 1) {
requestAnimationFrame(animate);
} else {
// 确保最终值正确
element.textContent = formatNumber(targetValue);
// 标记动画完成
delete animationInProgress[elementId];
}
}
// 开始动画
requestAnimationFrame(animate);
}
// 更新百分比元素的函数
@@ -726,17 +772,10 @@ function updateStatsCards(stats) {
dnssecStatusElement.className = `text-sm flex items-center ${dnssecEnabled ? 'text-success' : 'text-danger'}`;
}
if (dnssecSuccessElement) {
dnssecSuccessElement.textContent = formatNumber(dnssecSuccess);
}
if (dnssecFailedElement) {
dnssecFailedElement.textContent = formatNumber(dnssecFailed);
}
if (dnssecQueriesElement) {
dnssecQueriesElement.textContent = formatNumber(dnssecQueries);
}
// 使用翻页滚动特效更新DNSSEC相关统计卡片
animateValue('dnssec-success', dnssecSuccess);
animateValue('dnssec-failed', dnssecFailed);
animateValue('dnssec-queries', dnssecQueries);
// 直接更新文本和百分比，移除动画效果
const topQueryTypeElement = document.getElementById('top-query-type');
@@ -1535,6 +1574,11 @@ function initTimeRangeToggle() {
// 初始化图表
function initCharts() {
// 检测当前是否处于深色模式
const isDarkMode = document.documentElement.classList.contains('dark');
// 根据主题模式设置不同的图例文字颜色
const legendTextColor = isDarkMode ? '#e2e8f0' : '#4B5563';
// 初始化比例图表
const ratioChartElement = document.getElementById('ratio-chart');
if (!ratioChartElement) {
@@ -1549,10 +1593,9 @@ function initCharts() {
datasets: [{
data: [0, 0, 0],
backgroundColor: ['#34D399', '#EF4444', '#F59E0B'], // 优化的现代化配色
borderWidth: 3, // 增加边框宽度，增强区块分隔
borderColor: '#FFFFFF', // 白色边框，使各个扇区更清晰
borderWidth: 0, // 移除边框宽度
hoverOffset: 15, // 增加悬停偏移效果，增强交互体验
hoverBorderWidth: 4, // 悬停时增加边框宽度
hoverBorderWidth: 0, // 移除悬停时的边框宽度
hoverBackgroundColor: ['#10B981', '#DC2626', '#D97706'], // 悬停时的深色效果
borderRadius: 10, // 添加圆角效果，增强现代感
borderSkipped: false // 显示所有边框
@@ -1583,26 +1626,7 @@ function initCharts() {
lineHeight: 1.5, // 调整行高
usePointStyle: true, // 使用点样式代替方形图例，节省空间
pointStyle: 'circle', // 使用圆形点样式
color: '#4B5563', // 图例文本颜色
generateLabels: function(chart) {
// 自定义图例生成，添加更多样式控制
const data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map((label, i) => {
const dataset = data.datasets[0];
return {
text: label,
fillStyle: dataset.backgroundColor[i],
strokeStyle: dataset.borderColor,
lineWidth: dataset.borderWidth,
pointStyle: 'circle',
hidden: !chart.isDatasetVisible(0),
index: i
};
});
}
return [];
}
color: legendTextColor // 根据主题设置图例文本颜色
}
},
tooltip: {
@@ -1641,7 +1665,7 @@ function initCharts() {
display: false // 不显示标题，由HTML标题代替
}
},
cutout: '70%', // 调整中心空白区域比例，增强现代感
cutout: '50%', // 调整中心空白区域比例，使环更粗
// 增强元素配置
elements: {
arc: {
@@ -1687,10 +1711,9 @@ function initCharts() {
datasets: [{
data: [1],
backgroundColor: [queryTypeColors[0]],
borderWidth: 3, // 增加边框宽度，增强区块分隔
borderColor: '#fff', // 白色边框，使各个扇区更清晰
borderWidth: 0, // 移除边框宽度
hoverOffset: 15, // 增加悬停偏移效果，增强交互体验
hoverBorderWidth: 4, // 悬停时增加边框宽度
hoverBorderWidth: 0, // 移除悬停时的边框宽度
hoverBackgroundColor: queryTypeColors.map(color => {
// 生成悬停时的深色效果
const hex = color.replace('#', '');
@@ -1728,26 +1751,7 @@ function initCharts() {
lineHeight: 1.5, // 调整行高
usePointStyle: true, // 使用点样式代替方形图例，节省空间
pointStyle: 'circle', // 使用圆形点样式
color: '#4B5563', // 图例文本颜色
generateLabels: function(chart) {
// 自定义图例生成，添加更多样式控制
const data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map((label, i) => {
const dataset = data.datasets[0];
return {
text: label,
fillStyle: dataset.backgroundColor[i],
strokeStyle: dataset.borderColor,
lineWidth: dataset.borderWidth,
pointStyle: 'circle',
hidden: !chart.isDatasetVisible(0),
index: i
};
});
}
return [];
},
color: legendTextColor, // 根据主题设置图例文本颜色
// 启用图例点击交互
onClick: function(event, legendItem, legend) {
// 切换对应数据的显示
@@ -1757,7 +1761,7 @@ function initCharts() {
ci.update();
},
// 图例悬停样式
fontColor: '#4B5563',
fontColor: legendTextColor,
usePointStyle: true,
pointStyle: 'circle'
}
@@ -1798,7 +1802,7 @@ function initCharts() {
display: false // 不显示标题，由HTML标题代替
}
},
cutout: '70%', // 调整中心空白区域比例，增强现代感
cutout: '50%', // 调整中心空白区域比例，使环更粗
// 增强元素配置
elements: {
arc: {
@@ -3251,3 +3255,100 @@ async function loadDashboardData() {
// 静默失败，不显示通知以免打扰用户
}
}
// 主题切换功能
function initThemeToggle() {
const themeToggleBtn = document.getElementById('theme-toggle');
if (!themeToggleBtn) return;
// 初始化主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.documentElement.classList.add('dark');
updateThemeIcon(true);
}
// 添加主题切换事件监听器
themeToggleBtn.addEventListener('click', toggleTheme);
}
// 切换主题
function toggleTheme() {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
updateThemeIcon(isDark);
// 更新图表图例文字颜色
updateChartLegendColors(isDark);
}
// 更新图表图例文字颜色
function updateChartLegendColors(isDark) {
const legendTextColor = isDark ? '#e2e8f0' : '#4B5563';
// 更新比例图表图例文字颜色
if (ratioChart) {
ratioChart.options.plugins.legend.labels.color = legendTextColor;
ratioChart.options.plugins.legend.labels.fontColor = legendTextColor;
// 平滑更新图表
ratioChart.update({
duration: 300,
easing: 'easeInOutQuart'
});
}
// 更新解析类型统计饼图图例文字颜色
if (queryTypeChart) {
queryTypeChart.options.plugins.legend.labels.color = legendTextColor;
queryTypeChart.options.plugins.legend.labels.fontColor = legendTextColor;
// 平滑更新图表
queryTypeChart.update({
duration: 300,
easing: 'easeInOutQuart'
});
}
// 更新DNS请求统计图表图例文字颜色
if (dnsRequestsChart) {
if (dnsRequestsChart.options.plugins.legend) {
dnsRequestsChart.options.plugins.legend.labels.color = legendTextColor;
dnsRequestsChart.options.plugins.legend.labels.fontColor = legendTextColor;
// 平滑更新图表
dnsRequestsChart.update({
duration: 300,
easing: 'easeInOutQuart'
});
}
}
// 更新详细DNS请求统计图表图例文字颜色
if (detailedDnsRequestsChart) {
if (detailedDnsRequestsChart.options.plugins.legend) {
detailedDnsRequestsChart.options.plugins.legend.labels.color = legendTextColor;
detailedDnsRequestsChart.options.plugins.legend.labels.fontColor = legendTextColor;
// 平滑更新图表
detailedDnsRequestsChart.update({
duration: 300,
easing: 'easeInOutQuart'
});
}
}
}
// 更新主题图标
function updateThemeIcon(isDark) {
const themeToggleBtn = document.getElementById('theme-toggle');
if (!themeToggleBtn) return;
const icon = themeToggleBtn.querySelector('i');
if (isDark) {
icon.classList.remove('fa-moon-o');
icon.classList.add('fa-sun-o');
} else {
icon.classList.remove('fa-sun-o');
icon.classList.add('fa-moon-o');
}
}
// 页面加载完成后初始化主题切换
window.addEventListener('DOMContentLoaded', initThemeToggle);

39
static/js/main.js
View File

@@ -371,6 +371,42 @@ function setupNavigation() {
});
}
// 主题切换功能
function setupThemeToggle() {
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
if (!themeToggle) return;
// 从localStorage加载主题偏好
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
body.classList.toggle('dark', savedTheme === 'dark');
updateThemeIcon(themeToggle, savedTheme === 'dark');
}
// 添加点击事件监听器
themeToggle.addEventListener('click', () => {
const isDark = body.classList.toggle('dark');
updateThemeIcon(themeToggle, isDark);
// 保存主题偏好到localStorage
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
}
// 更新主题图标
function updateThemeIcon(toggleElement, isDark) {
const icon = toggleElement.querySelector('i');
if (icon) {
if (isDark) {
icon.className = 'fa fa-sun-o text-sm sm:text-lg';
} else {
icon.className = 'fa fa-moon-o text-sm sm:text-lg';
}
}
}
// 初始化函数
function init() {
// 设置导航
@@ -379,6 +415,9 @@ function init() {
// 设置账户功能
setupAccountFeatures();
// 设置主题切换
setupThemeToggle();
// 初始化页面
initPageByHash();

229
static/login.html
View File

@@ -4,7 +4,38 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DNS服务器控制台 - 登录</title>
<!-- Font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<style>
/* CSS变量定义 */
:root {
--bg-primary: #f5f7fa;
--bg-secondary: #ffffff;
--text-primary: #333333;
--text-secondary: #555555;
--text-muted: #7f8c8d;
--border-color: #e1e5e9;
--primary-color: #3498db;
--primary-hover: #2980b9;
--error-bg: #fee;
--error-text: #c00;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dark {
--bg-primary: #1a1a1a;
--bg-secondary: #2d2d2d;
--text-primary: #e2e8f0;
--text-secondary: #a0aec0;
--text-muted: #718096;
--border-color: #4a5568;
--primary-color: #4299e1;
--primary-hover: #3182ce;
--error-bg: #742a2a;
--error-text: #fed7d7;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
@@ -13,21 +44,47 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: #f5f7fa;
background-color: var(--bg-primary);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
color: var(--text-primary);
transition: background-color 0.3s ease, color 0.3s ease;
}
/* 主题切换按钮 */
#theme-toggle {
position: absolute;
top: 20px;
right: 20px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-primary);
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
#theme-toggle:hover {
background: var(--primary-color);
color: white;
}
.login-container {
background-color: white;
background-color: var(--bg-secondary);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow);
padding: 40px;
width: 100%;
max-width: 400px;
transition: all 0.3s ease;
}
.login-header {
@@ -37,12 +94,12 @@
.login-header h1 {
font-size: 24px;
color: #2c3e50;
color: var(--text-primary);
margin-bottom: 8px;
}
.login-header p {
color: #7f8c8d;
color: var(--text-muted);
font-size: 14px;
}
@@ -54,28 +111,30 @@
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #555;
color: var(--text-secondary);
}
.form-group input {
width: 100%;
padding: 12px;
border: 1px solid #e1e5e9;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 16px;
background-color: var(--bg-secondary);
color: var(--text-primary);
transition: border-color 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
}
.btn {
width: 100%;
padding: 12px;
background-color: #3498db;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 4px;
@@ -86,7 +145,7 @@
}
.btn:hover {
background-color: #2980b9;
background-color: var(--primary-hover);
}
.btn:active {
@@ -94,8 +153,8 @@
}
.error-message {
background-color: #fee;
color: #c00;
background-color: var(--error-bg);
color: var(--error-text);
padding: 12px;
border-radius: 4px;
margin-bottom: 20px;
@@ -111,6 +170,11 @@
</style>
</head>
<body>
<!-- 主题切换按钮 -->
<button id="theme-toggle" class="theme-toggle-btn">
<i class="fa fa-moon-o"></i>
</button>
<div class="login-container">
<div class="login-header">
<h1>DNS服务器控制台</h1>
@@ -135,59 +199,106 @@
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
// 主题切换功能
function initThemeToggle() {
const themeToggleBtn = document.getElementById('theme-toggle');
if (!themeToggleBtn) return;
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const loginBtn = document.getElementById('loginBtn');
const errorMessage = document.getElementById('errorMessage');
// 初始化主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.documentElement.classList.add('dark');
updateThemeIcon(true);
}
// 显示加载状态
loginBtn.textContent = '登录中...';
loginBtn.classList.add('loading');
errorMessage.style.display = 'none';
// 添加主题切换事件监听器
themeToggleBtn.addEventListener('click', toggleTheme);
}
// 切换主题
function toggleTheme() {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
updateThemeIcon(isDark);
}
// 更新主题图标
function updateThemeIcon(isDark) {
const themeToggleBtn = document.getElementById('theme-toggle');
if (!themeToggleBtn) return;
// 发送登录请求
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: username,
password: password
const icon = themeToggleBtn.querySelector('i');
if (isDark) {
icon.classList.remove('fa-moon-o');
icon.classList.add('fa-sun-o');
} else {
icon.classList.remove('fa-sun-o');
icon.classList.add('fa-moon-o');
}
}
// 初始化登录表单
function initLoginForm() {
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const loginBtn = document.getElementById('loginBtn');
const errorMessage = document.getElementById('errorMessage');
// 显示加载状态
loginBtn.textContent = '登录中...';
loginBtn.classList.add('loading');
errorMessage.style.display = 'none';
// 发送登录请求
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: username,
password: password
})
})
})
.then(response => {
if (!response.ok) {
if (response.status === 401) {
throw new Error('未知用户名或密码');
} else {
throw new Error('登录失败');
.then(response => {
if (!response.ok) {
if (response.status === 401) {
throw new Error('未知用户名或密码');
} else {
throw new Error('登录失败');
}
}
}
return response.json();
})
.then(data => {
if (data.status === 'success') {
// 登录成功，重定向到主页
window.location.href = '/';
} else {
if (data.error === '用户名或密码错误') {
throw new Error('未知用户名或密码');
return response.json();
})
.then(data => {
if (data.status === 'success') {
// 登录成功，重定向到主页
window.location.href = '/';
} else {
throw new Error(data.error || '登录失败');
if (data.error === '用户名或密码错误') {
throw new Error('未知用户名或密码');
} else {
throw new Error(data.error || '登录失败');
}
}
}
})
.catch(error => {
// 显示错误信息
errorMessage.textContent = error.message;
errorMessage.style.display = 'block';
loginBtn.textContent = '登录';
loginBtn.classList.remove('loading');
})
.catch(error => {
// 显示错误信息
errorMessage.textContent = error.message;
errorMessage.style.display = 'block';
loginBtn.textContent = '登录';
loginBtn.classList.remove('loading');
});
});
}
// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', function() {
initThemeToggle();
initLoginForm();
});
</script>
</body>