refactor:homeview and map adaptive

src/components/dashboard/Map.vue

@@ -21,75 +21,51 @@ const data = [
 ]
 
 const option = ref<echarts.EChartsOption>({
-  tooltip: {
-    show: true,
-    formatter: '{b}: {c}个节点'
-  },
+  tooltip: { show: true, formatter: '{b}: {c}个节点' },
   visualMap: {
     type: 'piecewise',
     min: 0,
     max: 50,
     pieces: [
-      {
-        max: 5,
-        label: '少',
-        color: '#ff4d4d'
-      },
-      {
-        min: 5,
-        max: 15,
-        label: '中',
-        color: '#ffa64d'
-      },
-      {
-        min: 15,
-        max: 20,
-        label: '多',
-        color: '#ffcc00'
-      },
-      {
-        min: 20,
-        max: 30,
-        label: '非常多',
-        color: '#99cc33'
-      },
-      {
-        min: 30,
-        label: '数据中心',
-        color: '#33cc33'
-      }
+      { max: 3, label: '少(0-3)', color: '#ff4d4d' },
+      { min: 3, max: 10, label: '中(3-10)', color: '#ffa64d' },
+      { min: 10, max: 15, label: '多(10-15)', color: '#ffcc00' },
+      { min: 15, max: 25, label: '非常多(15-25)', color: '#99cc33' },
+      { min: 30, label: '数据中心(30+)', color: '#33cc33' }
     ],
-    textStyle: {
-      color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#fff' : '#000'
-    }
+    textStyle: { color: undefined }
   },
   series: [{
     name: '服务器节点',
     type: 'map',
     map: 'china',
     roam: false,
-    select: {
-      disabled: true     // 禁用选择状态
-    },
-    emphasis: {
-      label: {
-        show: true,
-      },
-      itemStyle: {
-        areaColor: '#FFDE59'
-      }
-    },
+    select: { disabled: true },
+    emphasis: { label: { show: true }, itemStyle: { areaColor: '#FFDE59' } },
     data
   }]
 });
+
+const updateTheme = (e: MediaQueryListEvent | boolean) => {
+  const isDark = typeof e === 'boolean' ? e : e.matches;
+  const color = option.value.visualMap as { textStyle: { color: string } };
+  color.textStyle.color = isDark ? '#fff' : '#000';
+};
+
 onMounted(() => {
-  matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
-    const color = option.value.visualMap as { textStyle: { color: string } };
-    if (e.matches) {
-      color.textStyle.color = '#000'
-    } else {
-      color.textStyle.color = '#fff'
-    }
-  })
-})
+  const chart = echarts.getInstanceByDom(document.querySelector('.chart') as HTMLElement);
+  const resizeObserver = new ResizeObserver(() => {
+    chart?.resize();
+  });
+  resizeObserver.observe(document.querySelector('.chart') as HTMLElement);
+
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  updateTheme(mediaQuery.matches);
+  mediaQuery.addEventListener('change', updateTheme);
+
+  return () => {
+    resizeObserver.disconnect();
+    mediaQuery.removeEventListener('change', updateTheme);
+  };
+});
 </script>

src/views/HomeView.vue

@@ -3,32 +3,32 @@
     <h2 class="text-2xl font-bold mb-2">欢迎来到 EasyTierMC Uptime</h2>
     <p>使用上方导航查看节点监控或提交新的节点。</p>
     <div>
-      <div class="flex gap-2 grid-cols-[200px_minmax(900px,1fr)_100px] justify-center-safe">
-        <div class="card w-96 bg-base-100 card-sm shadow-sm">
+      <div class="flex flex-wrap gap-2 justify-center-safe sm:flex-row md:flex-row lg:flex-row">
+        <div class="card w-full sm:w-96 bg-base-100 card-sm shadow-sm">
           <div class="card-body">
             <h2 class="card-title font-bold">总节点数</h2>
             <p class="text-3xl font-bold">211</p>
           </div>
         </div>
-        <div class="card w-96 bg-base-100 card-sm shadow-sm">
+        <div class="card w-full sm:w-96 bg-base-100 card-sm shadow-sm">
           <div class="card-body">
             <h2 class="card-title font-bold">在线节点数</h2>
             <p class="text-3xl font-bold">205</p>
           </div>
         </div>
-        <div class="card w-96 bg-base-100 card-sm shadow-sm">
+        <div class="card w-full sm:w-96 bg-base-100 card-sm shadow-sm">
           <div class="card-body">
             <h2 class="card-title font-bold">调配节点数</h2>
             <p class="text-3xl font-bold">42</p>
           </div>
         </div>
-        <div class="card w-96 bg-base-100 card-sm shadow-sm">
+        <div class="card w-full sm:w-96 bg-base-100 card-sm shadow-sm">
           <div class="card-body">
             <h2 class="card-title font-bold">当前连接数/可连接数</h2>
             <p class="text-3xl font-bold">211/114</p>
           </div>
         </div>
-        <div class="card w-96 bg-base-100 card-sm shadow-sm">
+        <div class="card w-full sm:w-96 bg-base-100 card-sm shadow-sm">
           <div class="card-body">
             <h2 class="card-title font-bold">总负载</h2>
             <p class="text-3xl font-bold">114%</p>
@@ -37,7 +37,7 @@
       </div>
     </div>
     <div class="flex justify-center items-center">
-      <Map class="w-1/2 h-96" />
+      <Map class="w-full sm:w-1/2 h-auto sm:h-96" />
     </div>
   </section>
 </template>