web优化

.trae/documents/修复DNS请求趋势图表展开后影响主页面图表的问题.md

@@ -0,0 +1,18 @@
+## 问题分析
+当前实现中，详细图表（浮窗）的时间范围切换会影响到主页面的图表显示，这是因为它们共享了全局变量`currentTimeRange`和`isMixedView`。当用户在浮窗内切换时间范围时，这些全局变量会被修改，导致主页面的图表也随之改变。
+
+## 解决方案
+1. 为详细图表创建独立的变量，用于存储其时间范围和混合视图状态
+2. 修改`initDetailedTimeRangeToggle`函数，使其使用这些独立的变量，而不是全局变量
+3. 修改`drawDetailedDNSRequestsChart`函数，使用独立的变量来控制图表显示
+4. 确保主图表默认显示混合视图
+
+## 修复步骤
+1. 在`dashboard.js`文件中添加详细图表专用的全局变量
+2. 修改`initDetailedTimeRangeToggle`函数，使用详细图表专用变量
+3. 修改`drawDetailedDNSRequestsChart`函数，使用详细图表专用变量
+4. 确保主图表默认显示混合视图
+5. 测试修复效果，确保浮窗内的时间范围切换不会影响主页面图表
+
+## 预期效果
+修复后，DNS请求趋势图表默认显示混合内容视图不变，当用户点击展开按钮查看详细数据时，浮窗内的时间范围切换不会影响到主页面的图表内容，提供更好的用户体验。

.trae/documents/修复DNS请求趋势图表展开后的响应式问题.md

@@ -0,0 +1,15 @@
+## 问题分析
+DNS请求趋势图表展开后不能随页面放大缩小自动调整大小。通过代码分析，发现`window.addEventListener('resize')`事件监听器只处理了侧边栏的显示/隐藏，没有处理图表的调整大小。
+
+## 解决方案
+1. 修改`window.addEventListener('resize')`事件监听器，添加对所有图表（包括详细图表）的更新调用
+2. 确保在模态框显示时，图表能够正确响应窗口大小变化
+
+## 修复步骤
+1. 打开`/root/dns/static/js/dashboard.js`文件
+2. 找到`window.addEventListener('resize')`事件监听器
+3. 修改该事件监听器，添加对`dnsRequestsChart`和`detailedDnsRequestsChart`的更新调用
+4. 确保图表实例存在时才调用update方法
+
+## 预期效果
+修复后，当用户展开DNS请求趋势图表并调整浏览器窗口大小时，图表会自动调整大小以适应新的窗口尺寸。

.trae/documents/修复DNS请求趋势图表展开后超出显示范围的问题.md

@@ -0,0 +1,21 @@
+## 问题分析
+展开图表超出了显示范围，没有按照展开浮窗大小显示内容。通过代码分析，发现以下问题：
+
+1. 图表容器使用了固定高度 `h-[600px]`，这可能导致在某些屏幕尺寸下图表超出显示范围
+2. 浮窗容器设置了 `max-h-[90vh]`，但图表容器的固定高度可能超过这个限制
+3. 当图表初始化时，可能没有正确计算容器的实际可用空间
+
+## 解决方案
+1. 修改图表容器的高度设置，使其更灵活，能够适应不同屏幕尺寸
+2. 确保图表容器的高度不超过浮窗的最大高度限制
+3. 在图表显示时，确保正确计算容器大小并更新图表
+
+## 修复步骤
+1. 打开 `index.html` 文件，修改图表容器的高度设置
+2. 将固定高度 `h-[600px]` 改为相对高度或最大高度
+3. 确保图表容器的高度能够适应浮窗的可用空间
+4. 在 `drawDetailedDNSRequestsChart` 函数中，添加对图表容器大小的检查和调整
+5. 确保在图表显示时，正确计算容器大小并更新图表
+
+## 预期效果
+修复后，当用户展开DNS请求趋势图表时，图表会根据浮窗的可用空间自动调整大小，不会超出显示范围，提供更好的用户体验。

.trae/documents/调整DNS趋势图表默认显示和浮窗独立性.md

@@ -0,0 +1,44 @@
+# 调整DNS趋势图表默认显示和浮窗独立性
+
+## 问题分析
+1. **DNS趋势图表默认显示**：当前代码中`isMixedView`变量默认设置为`true`，但在`initTimeRangeToggle`函数中，默认选中第一个按钮后会将`isMixedView`设置为`false`，导致实际默认显示的是24小时视图而非混合视图。
+2. **浮窗图表独立性**：当前代码中详细图表（浮窗）已有独立变量`detailedCurrentTimeRange`和`detailedIsMixedView`，但需要确保初始化时正确设置，避免与主图表冲突。
+
+## 实现计划
+
+### 1. 修改DNS趋势图表默认显示为混合内容
+- **文件**：`/root/dns/static/js/dashboard.js`
+- **函数**：`initTimeRangeToggle`
+- **修改点**：
+  - 在函数末尾，默认选中第一个按钮后，将`isMixedView`设置为`true`
+  - 将`currentTimeRange`设置为`'mixed'`
+  - 更新按钮样式，添加混合视图标记
+
+### 2. 确保浮窗图表初始化正确
+- **文件**：`/root/dns/static/js/dashboard.js`
+- **函数**：`initDetailedTimeRangeToggle`
+- **修改点**：
+  - 确保初始化时`detailedIsMixedView`默认值与主图表保持一致
+  - 确保点击浮窗中的时间范围按钮时，只修改详细图表的变量，不影响主图表
+
+### 3. 验证功能完整性
+- 检查`drawDNSRequestsChart`函数，确保它使用主图表变量
+- 检查`drawDetailedDNSRequestsChart`函数，确保它使用详细图表变量
+- 确保两个函数的实现逻辑一致，但使用不同的变量
+
+## 预期效果
+1. DNS趋势图表默认显示混合内容（24小时、7天、30天数据同时显示）
+2. 展开浮窗后，切换浮窗中的时间范围或视图模式，不会影响主页图表的显示
+3. 主页图表和浮窗图表可以独立显示不同的时间范围和视图模式
+
+## 实现步骤
+1. 修改`initTimeRangeToggle`函数，设置默认混合视图
+2. 优化`initDetailedTimeRangeToggle`函数，确保浮窗图表初始化正确
+3. 验证两个图表函数的变量使用是否正确
+4. 测试功能完整性
+
+## 代码修改点
+1. **第1250-1256行**：修改默认按钮选中逻辑，添加混合视图设置
+2. **第1475-1507行**：优化浮窗图表时间范围切换逻辑
+3. **第1716-1912行**：确保主图表函数使用正确变量
+4. **第1509-1714行**：确保浮窗图表函数使用正确变量