修复移动设备视图

static/css/style.css

@@ -132,26 +132,7 @@ header p {
 
 /* 响应式布局 - 移动设备 */
 @media (max-width: 768px) {
-    .sidebar {
-        position: fixed;
-        left: -var(--sidebar-width);
-        top: var(--header-height);
-        z-index: 99;
-        height: calc(100vh - var(--header-height));
-    }
-    
-    .sidebar.open {
-        left: 0;
-        width: var(--sidebar-width);
-    }
-    
-    .sidebar.open .nav-item span {
-        display: block;
-    }
-    
-    .sidebar.open .nav-item i {
-        margin-right: 1rem;
-    }
+    /* 这些样式已经通过Tailwind CSS类在HTML中实现，这里移除避免冲突 */
 }
 
 .nav-menu {

static/index.html

@@ -268,7 +268,7 @@
                     <li>
                         <a href="#query" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md transition-all">
                             <i class="fa fa-search mr-3 text-lg"></i>
-                            <span>DNS查询</span>
+                            <span>DNS屏蔽查询</span>
                         </a>
                     </li>
                     <li>
@@ -295,7 +295,7 @@
             <!-- 顶部导航栏 -->
             <header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6">
                 <div class="flex items-center">
-                    <button id="toggle-sidebar" class="md:block lg:hidden text-gray-500 hover:text-gray-700 focus:outline-none">
+                    <button id="toggle-sidebar" class="block md:hidden text-gray-500 hover:text-gray-700 focus:outline-none">
                         <i class="fa fa-bars text-xl"></i>
                     </button>
                     <h2 class="ml-4 text-xl font-semibold" id="page-title">仪表盘</h2>

static/js/main.js

@@ -40,40 +40,52 @@ function setupNavigation() {
     
     // 打开侧边栏函数
     function openSidebar() {
+        console.log('Opening sidebar...');
         if (sidebar) {
             sidebar.classList.remove('-translate-x-full');
+            sidebar.classList.add('translate-x-0');
         }
         if (sidebarOverlay) {
             sidebarOverlay.classList.remove('hidden');
+            sidebarOverlay.classList.add('block');
         }
         // 防止页面滚动
         document.body.style.overflow = 'hidden';
+        console.log('Sidebar opened successfully');
     }
     
     // 关闭侧边栏函数
     function closeSidebar() {
+        console.log('Closing sidebar...');
         if (sidebar) {
             sidebar.classList.add('-translate-x-full');
+            sidebar.classList.remove('translate-x-0');
         }
         if (sidebarOverlay) {
             sidebarOverlay.classList.add('hidden');
+            sidebarOverlay.classList.remove('block');
         }
         // 恢复页面滚动
         document.body.style.overflow = '';
+        console.log('Sidebar closed successfully');
     }
     
     // 切换侧边栏函数
     function toggleSidebarVisibility() {
+        console.log('Toggling sidebar visibility...');
+        console.log('Current sidebar classes:', sidebar ? sidebar.className : 'sidebar not found');
         if (sidebar && sidebar.classList.contains('-translate-x-full')) {
+            console.log('Sidebar is hidden, opening...');
             openSidebar();
         } else {
+            console.log('Sidebar is visible, closing...');
             closeSidebar();
         }
     }
     
     // 绑定切换按钮事件
     if (toggleSidebar) {
-        toggleSidebar.addEventListener('click', openSidebar);
+        toggleSidebar.addEventListener('click', toggleSidebarVisibility);
     }
     
     // 绑定关闭按钮事件