增加暗色模式切换

CHANGELOG.md

@@ -1,6 +1,18 @@
 # Changelog
 
 所有对本项目的显著更改都将记录在此文件中。
+## [2.0.2] - 2026-01-28
+### 修复
+- 修复暗色模式下统计图表图例文字颜色不随主题变化的问题
+- 优化主题切换时图表图例文字颜色的平滑过渡效果
+- 调整环形图的粗细，使其显示更加突出
+
+## [2.0.1] - 2026-01-27
+### 新增
+- 增加暗色模式支持
+- 添加主题切换按钮，支持在亮色和暗色模式之间切换
+- 实现主题偏好的本地存储，保持用户的主题选择
+
 ## [2.0.0] - 2026-01-18
 ### 重大重构
 - **核心查询逻辑重构**：移除了所有响应合并相关代码，简化了DNS查询处理流程

build-windows.sh

@@ -0,0 +1,5 @@
+CGO_ENABLED=1 \
+GOOS=windows \
+GOARCH=amd64 \
+CC=gcc \
+go build  -o dns-server.exe main.go

config.json

@@ -53,7 +53,7 @@
     "cacheFilePath": "data/cache.json"
   },
   "http": {
-    "port": 8080,
+    "port": 8081,
     "host": "0.0.0.0",
     "enableAPI": true,
     "username": "admin",
@@ -150,8 +150,8 @@
     "statsSaveInterval": 60
   },
   "gfwList": {
-    "ip": "127.0.0.1",
+    "ip": "10.35.10.200",
-    "content": "",
+    "content": "/root/dns/data/gfwlist.txt",
     "enabled": false
   },
   "log": {

static/css/style.css

@@ -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;
+    background-color: var(--bg-primary);
-    color: #333;
+    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;
+    background-color: var(--bg-secondary);
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--shadow);
+    transition: all 0.3s ease;
 }
 
 /* 头部样式 */
@@ -85,14 +259,15 @@ header p {
 /* 侧边栏样式 */
 .sidebar {
     width: var(--sidebar-width);
-    background-color: #2c3e50;
+    background-color: var(--bg-secondary);
-    color: white;
+    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;
+    background-color: var(--bg-secondary);
-    color: white;
+    color: var(--text-primary);
-    border: none;
+    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;
+    background-color: var(--primary-color);
-    border-left: 4px solid #fff;
+    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);
+    box-shadow: var(--shadow);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    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;
+    background-color: var(--bg-secondary);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    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;
+    color: var(--text-primary);
-    border-bottom: 1px solid #e9ecef;
+    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 {
@@ -1293,3 +1497,57 @@ 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;
+}

static/index.html

@@ -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>

static/js/dashboard.js

@@ -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';
+        if (animationInProgress[elementId]) {
-        element.style.opacity = '0';
+            return;
+        }
         
-        // 使用requestAnimationFrame确保平滑过渡
+        // 标记动画正在进行
-        requestAnimationFrame(() => {
+        animationInProgress[elementId] = true;
-            element.textContent = formattedNewValue;
-            element.style.opacity = '1';
         
-            // 移除transition样式，避免影响后续更新
+        // 动画配置
-            setTimeout(() => {
+        const duration = Math.min(800, Math.abs(targetValue - currentValue) * 2); // 根据数值变化大小调整动画持续时间
-                element.style.transition = '';
+        const startTime = performance.now();
-            }, 300);
+        const startValue = currentValue;
-        });
+        
+        // 翻页滚动动画函数
+        function animate(currentTime) {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            
+            // 线性插值计算当前值
+            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) {
+    // 使用翻页滚动特效更新DNSSEC相关统计卡片
-        dnssecSuccessElement.textContent = formatNumber(dnssecSuccess);
+    animateValue('dnssec-success', dnssecSuccess);
-    }
+    animateValue('dnssec-failed', dnssecFailed);
-    
+    animateValue('dnssec-queries', dnssecQueries);
-    if (dnssecFailedElement) {
-        dnssecFailedElement.textContent = formatNumber(dnssecFailed);
-    }
-    
-    if (dnssecQueriesElement) {
-        dnssecQueriesElement.textContent = formatNumber(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, // 增加边框宽度，增强区块分隔
+                borderWidth: 0, // 移除边框宽度
-                borderColor: '#FFFFFF', // 白色边框，使各个扇区更清晰
                 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', // 图例文本颜色
+                        color: legendTextColor // 根据主题设置图例文本颜色
-                        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 [];
-                        }
                     }
                 },
                 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, // 增加边框宽度，增强区块分隔
+                    borderWidth: 0, // 移除边框宽度
-                    borderColor: '#fff', // 白色边框，使各个扇区更清晰
                     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', // 图例文本颜色
+                            color: legendTextColor, // 根据主题设置图例文本颜色
-                            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 [];
-                            },
                             // 启用图例点击交互
                             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);

static/js/main.js

@@ -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();
     

static/login.html

@@ -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;
+            border-color: var(--primary-color);
-            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
+            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;
+            background-color: var(--error-bg);
-            color: #c00;
+            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 savedTheme = localStorage.getItem('theme');
-            const loginBtn = document.getElementById('loginBtn');
+            if (savedTheme === 'dark') {
-            const errorMessage = document.getElementById('errorMessage');
+                document.documentElement.classList.add('dark');
+                updateThemeIcon(true);
+            }
             
-            // 显示加载状态
+            // 添加主题切换事件监听器
-            loginBtn.textContent = '登录中...';
+            themeToggleBtn.addEventListener('click', toggleTheme);
-            loginBtn.classList.add('loading');
+        }
-            errorMessage.style.display = 'none';
 
-            // 发送登录请求
+        // 切换主题
-            fetch('/api/login', {
+        function toggleTheme() {
-                method: 'POST',
+            const isDark = document.documentElement.classList.toggle('dark');
-                headers: {
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
-                    'Content-Type': 'application/json'
+            updateThemeIcon(isDark);
-                },
+        }
-                body: JSON.stringify({
+
-                    username: username,
+        // 更新主题图标
-                    password: password
+        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');
+            }
+        }
+
+        // 初始化登录表单
+        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 => {
-            .then(response => {
+                    if (!response.ok) {
-                if (!response.ok) {
+                        if (response.status === 401) {
-                    if (response.status === 401) {
+                            throw new Error('未知用户名或密码');
-                        throw new Error('未知用户名或密码');
+                        } else {
-                    } else {
+                            throw new Error('登录失败');
-                        throw new Error('登录失败');
+                        }
                     }
-                }
+                    return response.json();
-                return response.json();
+                })
-            })
+                .then(data => {
-            .then(data => {
+                    if (data.status === 'success') {
-                if (data.status === 'success') {
+                        // 登录成功，重定向到主页
-                    // 登录成功，重定向到主页
+                        window.location.href = '/';
-                    window.location.href = '/';
-                } else {
-                    if (data.error === '用户名或密码错误') {
-                        throw new Error('未知用户名或密码');
                     } else {
-                        throw new Error(data.error || '登录失败');
+                        if (data.error === '用户名或密码错误') {
+                            throw new Error('未知用户名或密码');
+                        } else {
+                            throw new Error(data.error || '登录失败');
+                        }
                     }
-                }
+                })
-            })
+                .catch(error => {
-            .catch(error => {
+                    // 显示错误信息
-                // 显示错误信息
+                    errorMessage.textContent = error.message;
-                errorMessage.textContent = error.message;
+                    errorMessage.style.display = 'block';
-                errorMessage.style.display = 'block';
+                    loginBtn.textContent = '登录';
-                loginBtn.textContent = '登录';
+                    loginBtn.classList.remove('loading');
-                loginBtn.classList.remove('loading');
+                });
             });
+        }
+
+        // 页面加载完成后初始化
+        window.addEventListener('DOMContentLoaded', function() {
+            initThemeToggle();
+            initLoginForm();
         });
     </script>
 </body>