feat(ui): 移动端适配

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

web/src/components/LineChart.vue

@@ -792,9 +792,34 @@ onMounted(() => {
     align-items: flex-start;
   }
 
+  .chart-wrapper {
+    flex-direction: column;
+    align-items: center;
+  }
+
   .chart-legend {
+    position: relative;
+    transform: none;
+    left: auto;
+    top: auto;
+    margin-top: 8px;
+    margin-bottom: 12px;
+    background: transparent;
+    backdrop-filter: none;
+    border: none;
+    width: 100%;
     flex-wrap: wrap;
-    gap: 16px;
+    gap: 8px;
+    justify-content: center;
+  }
+
+  .legend-item {
+    padding: 4px 10px;
+    font-size: 12px;
+    color: #333;
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    gap: 6px;
   }
 
   .chart-svg {