优化web逻辑

http/server.go

@@ -86,8 +86,16 @@ func (s *Server) Start() error {
 		mux.HandleFunc("/ws/stats", s.handleWebSocketStats)
 	}
 
-	// 静态文件服务（可后续添加前端界面）
+	// 自定义静态文件服务处理器，用于禁用浏览器缓存
-	mux.Handle("/", http.FileServer(http.Dir("./static")))
+	fileServer := http.FileServer(http.Dir("./static"))
+	mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		// 添加Cache-Control头，禁用浏览器缓存
+		w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
+		w.Header().Set("Pragma", "no-cache")
+		w.Header().Set("Expires", "Thu, 01 Jan 1970 00:00:00 GMT")
+		// 使用StripPrefix处理路径
+		http.StripPrefix("/", fileServer).ServeHTTP(w, r)
+	})
 
 	s.server = &http.Server{
 		Addr:         fmt.Sprintf("%s:%d", s.config.Host, s.config.Port),

main.go

@@ -31,7 +31,7 @@ func createDefaultConfig(configFile string) error {
     "saveInterval": 300
   },
   "http": {
-    "port": 8080,
+    "port": 8081,
     "host": "0.0.0.0",
     "enableAPI": true
   },

static/index.html

@@ -240,7 +240,7 @@
                 
                 <div class="flex items-center space-x-4">
                     <!-- 服务器状态组件 -->
-                    <div class="relative bg-white rounded-lg shadow-md px-3 py-2 flex items-center space-x-2 server-status-widget" id="server-status-widget">
+                    <div class="relative bg-white rounded-lg shadow-md px-3 py-2 flex items-center space-x-2 server-status-widget md:min-w-[300px] sm:min-w-[250px] min-w-[180px]" id="server-status-widget">
                         <div class="flex flex-col">
                             <div class="flex items-center">
                                 <span class="text-xs font-medium text-gray-500">CPU</span>
@@ -261,7 +261,7 @@
                             </div>
                         </div>
                         <!-- 额外指标区域 - 初始隐藏，只在非首页显示 -->
-                        <div id="server-additional-stats" class="hidden flex items-center">
+                        <div id="server-additional-stats" class="hidden md:flex items-center">
                             <div class="w-1 h-8 bg-gray-200 rounded-full mx-1"></div>
                             <div class="flex flex-col">
                                 <div class="flex items-center">
@@ -304,7 +304,7 @@
                 <!-- 仪表盘部分 -->
                 <div id="dashboard-content" class="space-y-6">
                     <!-- 统计卡片 -->
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-6">
             <!-- 查询总量卡片 -->
             <div class="bg-blue-50 rounded-lg p-4 card-shadow relative overflow-hidden">
                 <!-- 颜色蒙版 -->
@@ -468,7 +468,7 @@
                     </div>
                     
                     <!-- 图表和数据表格 -->
-                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                         <!-- 三个图表在同一行显示 -->
                         <div class="bg-white rounded-lg p-6 card-shadow lg:col-span-1 md:col-span-1">
                             <h3 class="text-lg font-semibold mb-6">解析与屏蔽比例</h3>
@@ -681,7 +681,7 @@
                             <!-- DNS配置 -->
                             <div class="mb-8">
                                 <h4 class="text-md font-medium mb-4">DNS服务器配置</h4>
-                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-6">
                                     <div>
                                         <label for="dns-port" class="block text-sm font-medium text-gray-700 mb-1">端口</label>
                                         <input type="number" id="dns-port" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="53">
@@ -708,7 +708,7 @@
                             <!-- HTTP配置 -->
                             <div class="mb-8">
                                 <h4 class="text-md font-medium mb-4">HTTP服务器配置</h4>
-                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-6">
                                     <div>
                                         <label for="http-port" class="block text-sm font-medium text-gray-700 mb-1">端口</label>
                                         <input type="number" id="http-port" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="8080">
@@ -719,7 +719,7 @@
                             <!-- 屏蔽配置 -->
                             <div class="mb-8">
                                 <h4 class="text-md font-medium mb-4">屏蔽配置</h4>
-                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-6">
                                     <div>
                                         <label for="shield-local-rules-file" class="block text-sm font-medium text-gray-700 mb-1">本地规则文件</label>
                                         <input type="text" id="shield-local-rules-file" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="./rules.txt">

static/js/dashboard.js

@@ -2722,30 +2722,69 @@ function toggleSidebar() {
 // 响应式处理
 function handleResponsive() {
     const toggleBtn = document.getElementById('toggle-sidebar');
+    const sidebar = document.getElementById('sidebar');
     
     toggleBtn.addEventListener('click', toggleSidebar);
     
     // 初始状态处理
+    function updateSidebarState() {
         if (window.innerWidth < 1024) {
-        document.getElementById('sidebar').classList.add('-translate-x-full');
+            sidebar.classList.add('-translate-x-full');
+        } else {
+            sidebar.classList.remove('-translate-x-full');
         }
+    }
+    
+    updateSidebarState();
     
     // 窗口大小改变时处理
     window.addEventListener('resize', () => {
-        const sidebar = document.getElementById('sidebar');
+        updateSidebarState();
-        if (window.innerWidth >= 1024) {
-            sidebar.classList.remove('-translate-x-full');
-        }
         
-        // 更新图表大小
+        // 更新所有图表大小
         if (dnsRequestsChart) {
             dnsRequestsChart.update();
         }
-        
+        if (ratioChart) {
+            ratioChart.update();
+        }
+        if (queryTypeChart) {
+            queryTypeChart.update();
+        }
         if (detailedDnsRequestsChart) {
             detailedDnsRequestsChart.update();
         }
+        // 更新统计卡片图表
+        Object.values(statCardCharts).forEach(chart => {
+            if (chart) {
+                chart.update();
+            }
         });
+    });
+    
+    // 添加触摸事件支持，用于移动端
+    let touchStartX = 0;
+    let touchEndX = 0;
+    
+    document.addEventListener('touchstart', (e) => {
+        touchStartX = e.changedTouches[0].screenX;
+    }, false);
+    
+    document.addEventListener('touchend', (e) => {
+        touchEndX = e.changedTouches[0].screenX;
+        handleSwipe();
+    }, false);
+    
+    function handleSwipe() {
+        // 从左向右滑动，打开侧边栏
+        if (touchEndX - touchStartX > 50 && window.innerWidth < 1024) {
+            sidebar.classList.remove('-translate-x-full');
+        }
+        // 从右向左滑动，关闭侧边栏
+        if (touchStartX - touchEndX > 50 && window.innerWidth < 1024) {
+            sidebar.classList.add('-translate-x-full');
+        }
+    }
 }
 
 // 添加重试功能