DNS/dns-server
1
0
Fork 0
Code Pull Requests Activity

web优化

Browse Source
This commit is contained in:
Alex Yang
2025-11-27 15:51:55 +08:00
parent 7970a4f093
commit 8ee1d94471
6 changed files with 132 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/index.html
View File

@@ -518,7 +518,7 @@
</div>
</div>
<div class="p-6">
<div class="h-[600px]">
<div class="h-full max-h-[calc(90vh-120px)]">
<canvas id="detailed-dns-requests-chart"></canvas>
</div>
</div>

255
static/js/dashboard.js
View File

@@ -1106,9 +1106,13 @@ function updateTopDomainsTable(domains) {
// 当前选中的时间范围
let currentTimeRange = '24h'; // 默认为24小时
let isMixedView = false; // 是否为混合视图
let isMixedView = true; // 是否为混合视图 - 默认显示混合视图
let lastSelectedIndex = 0; // 最后选中的按钮索引
// 详细图表专用变量
let detailedCurrentTimeRange = '24h'; // 详细图表当前时间范围
let detailedIsMixedView = false; // 详细图表是否为混合视图
// 初始化时间范围切换
function initTimeRangeToggle() {
console.log('初始化时间范围切换');
@@ -1252,218 +1256,7 @@ function initTimeRangeToggle() {
}
}
// 初始化展开按钮功能
function initExpandButton() {
const expandBtn = document.getElementById('expand-chart-btn');
const chartModal = document.getElementById('chart-modal');
const closeBtn = document.getElementById('close-modal-btn');
if (!expandBtn || !chartModal || !closeBtn) {
console.error('未找到展开按钮或浮窗元素');
return;
}
// 展开按钮点击事件
expandBtn.addEventListener('click', () => {
console.log('展开按钮被点击');
chartModal.classList.remove('hidden');
// 初始化详细图表
drawDetailedDNSRequestsChart();
});
// 关闭按钮点击事件
closeBtn.addEventListener('click', () => {
console.log('关闭浮窗');
chartModal.classList.add('hidden');
});
// 点击浮窗外部关闭
chartModal.addEventListener('click', (event) => {
if (event.target === chartModal) {
chartModal.classList.add('hidden');
}
});
// 初始化详细图表的时间范围切换
initDetailedTimeRangeToggle();
}
// 初始化详细图表的时间范围切换
function initDetailedTimeRangeToggle() {
const timeRangeBtns = document.querySelectorAll('.time-range-btn[data-range]');
if (!timeRangeBtns.length) {
console.warn('未找到详细图表的时间范围按钮');
return;
}
// 详细图表的当前时间范围
let detailedCurrentTimeRange = '24h';
let detailedIsMixedView = false;
// 为所有时间范围按钮添加点击事件
timeRangeBtns.forEach(btn => {
btn.addEventListener('click', () => {
const range = btn.getAttribute('data-range');
if (range === 'mixed') {
detailedIsMixedView = !detailedIsMixedView;
} else {
detailedCurrentTimeRange = range;
detailedIsMixedView = false;
}
// 更新按钮样式
updateTimeRangeButtonStyles(timeRangeBtns, range, detailedIsMixedView);
// 重新绘制详细图表
drawDetailedDNSRequestsChart(detailedCurrentTimeRange, detailedIsMixedView);
});
});
}
// 更新时间范围按钮样式
function updateTimeRangeButtonStyles(buttons, activeRange, isMixedView) {
buttons.forEach(btn => {
const btnRange = btn.getAttribute('data-range');
if (btnRange === activeRange && (btnRange !== 'mixed' || isMixedView)) {
btn.classList.add('bg-primary', 'text-white');
btn.classList.remove('bg-gray-200', 'text-gray-700');
} else {
btn.classList.remove('bg-primary', 'text-white');
btn.classList.add('bg-gray-200', 'text-gray-700');
}
});
}
// 绘制详细DNS请求图表
function drawDetailedDNSRequestsChart(timeRange = '24h', isMixedView = false) {
const chartElement = document.getElementById('detailed-dns-requests-chart');
if (!chartElement) {
console.error('未找到详细DNS请求图表元素');
return;
}
const chartContext = chartElement.getContext('2d');
// 这里可以复用或修改现有的drawDNSRequestsChart函数的逻辑
// 为详细图表使用与原始图表相同的数据获取逻辑
let apiFunction;
let count;
if (isMixedView) {
// 混合视图 - 不同时间范围的数据
apiFunction = () => Promise.resolve({
labels: ['0h', '6h', '12h', '18h', '24h', '48h', '72h', '96h', '120h', '144h', '168h'],
data: generateMockData(11, 1000, 5000)
});
} else {
// 普通视图 - 基于时间范围
if (timeRange === '24h') {
count = 24;
apiFunction = () => Promise.resolve({
labels: generateTimeLabels(count),
data: generateMockData(count, 100, 500)
});
} else if (timeRange === '7d') {
count = 7;
apiFunction = () => Promise.resolve({
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
data: generateMockData(count, 1000, 5000)
});
} else if (timeRange === '30d') {
count = 30;
apiFunction = () => Promise.resolve({
labels: Array(count).fill(''),
data: generateMockData(count, 10000, 50000)
});
}
}
// 获取数据并绘制图表
if (apiFunction) {
apiFunction().then(data => {
// 创建或更新图表
if (detailedDnsRequestsChart) {
detailedDnsRequestsChart.data.labels = data.labels;
detailedDnsRequestsChart.data.datasets = [{
label: 'DNS请求数量',
data: data.data,
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.4,
fill: true
}];
detailedDnsRequestsChart.options.plugins.legend.display = false;
// 使用平滑过渡动画更新图表
detailedDnsRequestsChart.update({
duration: 800,
easing: 'easeInOutQuart'
});
} else {
detailedDnsRequestsChart = new Chart(chartContext, {
type: 'line',
data: {
labels: data.labels,
datasets: [{
label: 'DNS请求数量',
data: data.data,
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 800,
easing: 'easeInOutQuart'
},
plugins: {
legend: {
display: false
},
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(0, 0, 0, 0.1)'
}
},
x: {
grid: {
display: false
}
}
}
}
});
}
}).catch(error => {
console.error('绘制详细DNS请求图表失败:', error);
// 错误处理：使用空数据
const count = timeRange === '24h' ? 24 : (timeRange === '7d' ? 7 : 30);
const emptyData = {
labels: Array(count).fill(''),
data: Array(count).fill(0)
};
if (detailedDnsRequestsChart) {
detailedDnsRequestsChart.data.labels = emptyData.labels;
detailedDnsRequestsChart.data.datasets[0].data = emptyData.data;
detailedDnsRequestsChart.update();
}
});
}
}
// 注意：这个函数已被后面的实现覆盖，请使用后面的drawDetailedDNSRequestsChart函数
// 初始化图表
function initCharts() {
@@ -1642,6 +1435,13 @@ function initExpandButton() {
// 初始化浮窗中的时间范围切换
initDetailedTimeRangeToggle();
// 延迟更新图表大小，确保容器大小已计算
setTimeout(() => {
if (detailedDnsRequestsChart) {
detailedDnsRequestsChart.resize();
}
}, 100);
});
// 关闭按钮点击事件
@@ -1673,7 +1473,9 @@ function initExpandButton() {
// 初始化详细图表的时间范围切换
function initDetailedTimeRangeToggle() {
const detailedTimeRangeButtons = document.querySelectorAll('.time-range-btn');
// 只选择图表模态框内的时间范围按钮，避免与主视图冲突
const chartModal = document.getElementById('chart-modal');
const detailedTimeRangeButtons = chartModal ? chartModal.querySelectorAll('.time-range-btn') : [];
console.log('初始化详细图表时间范围切换，找到按钮数量:', detailedTimeRangeButtons.length);
@@ -1696,9 +1498,9 @@ function initDetailedTimeRangeToggle() {
}
});
// 更新详细图表
currentTimeRange = timeRange;
isMixedView = isMixedMode;
// 更新详细图表专用变量
detailedCurrentTimeRange = timeRange;
detailedIsMixedView = isMixedMode;
drawDetailedDNSRequestsChart();
});
});
@@ -1706,7 +1508,7 @@ function initDetailedTimeRangeToggle() {
// 绘制详细的DNS请求趋势图表
function drawDetailedDNSRequestsChart() {
console.log('绘制详细DNS请求趋势图表，时间范围:', currentTimeRange, '混合视图:', isMixedView);
console.log('绘制详细DNS请求趋势图表，时间范围:', detailedCurrentTimeRange, '混合视图:', detailedIsMixedView);
const ctx = document.getElementById('detailed-dns-requests-chart');
if (!ctx) {
@@ -1724,7 +1526,7 @@ function drawDetailedDNSRequestsChart() {
];
// 检查是否为混合视图
if (isMixedView || currentTimeRange === 'mixed') {
if (detailedIsMixedView || detailedCurrentTimeRange === 'mixed') {
console.log('渲染混合视图详细图表');
// 显示图例
@@ -1808,9 +1610,9 @@ function drawDetailedDNSRequestsChart() {
});
} else {
// 普通视图
// 根据当前时间范围选择API函数
// 根据详细视图时间范围选择API函数
let apiFunction;
switch (currentTimeRange) {
switch (detailedCurrentTimeRange) {
case '7d':
apiFunction = (api && api.getDailyStats) || (() => Promise.resolve({ labels: [], data: [] }));
break;
@@ -1896,7 +1698,7 @@ function drawDetailedDNSRequestsChart() {
}).catch(error => {
console.error('绘制详细DNS请求图表失败:', error);
// 错误处理：使用空数据
const count = currentTimeRange === '24h' ? 24 : (currentTimeRange === '7d' ? 7 : 30);
const count = detailedCurrentTimeRange === '24h' ? 24 : (detailedCurrentTimeRange === '7d' ? 7 : 30);
const emptyData = {
labels: Array(count).fill(''),
data: Array(count).fill(0)
@@ -2731,6 +2533,15 @@ function handleResponsive() {
if (window.innerWidth >= 1024) {
sidebar.classList.remove('-translate-x-full');
}
// 更新图表大小
if (dnsRequestsChart) {
dnsRequestsChart.update();
}
if (detailedDnsRequestsChart) {
detailedDnsRequestsChart.update();
}
});
}