feat(ui): 移动端适配

主要变化包括：
  - 实现了响应式主布局，带有可折叠的汉堡菜单，用于移动导航。
  - 调整了仪表板、密钥管理和信息卡中的网格布局，使其在较小的屏幕上垂直堆叠内容。
  - 使图表和数据表可水平滚动或使其元素换行，以防止溢出并保持可用性。
  - 添加了 `@vueuse/core` 库，用于动态检测屏幕尺寸以实现响应式逻辑。
  - 改进了各种组件（如按钮、字体和间距）的样式，以改善移动设备上的视觉层次结构。

web/src/components/logs/LogTable.vue

@@ -431,19 +431,32 @@ function changePageSize(size: number) {
   margin-left: auto;
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 768px) {
   .filter-row {
-    gap: 16px;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
   }
 
   .filter-group {
-    min-width: auto;
+    width: 100%;
+  }
+
+  .filter-group > * {
+    width: 100% !important;
   }
 
   .filter-actions {
-    margin-left: 0;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .pagination-container {
+    flex-direction: column;
+    gap: 12px;
   }
 }
+
 .table-main {
   background: white;
   border-radius: 8px;
@@ -453,7 +466,7 @@ function changePageSize(size: number) {
   /* background: white;
   border-radius: 8px; */
   flex: 1;
-  overflow: hidden;
+  overflow: auto;
   position: relative;
 }
 .empty-container {