feat:nodes map and info card

src/components/dashboard/Map.vue

@@ -5,20 +5,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import VChart from 'vue-echarts';
-import china from "../../../public/china.json"
+import china from "@/assets/china.json"
 import * as echarts from 'echarts';
-echarts.registerMap('china',china as any);
+echarts.registerMap('china', china as any);
 
 const data = [
-      { name: '北京', value: 85 },
+  { name: '北京', value: 85 },
-      { name: '上海', value: 92 },
+  { name: '上海', value: 92 },
-      { name: '广东', value: 9 },
+  { name: '广东', value: 9 },
-      { name: '浙江', value: 65 },
+  { name: '浙江', value: 65 },
-      { name: '江苏', value: 58 },
+  { name: '江苏', value: 58 },
-      // 更多数据...
+  // 更多数据...
-    ]
+]
 
 const option = ref<echarts.EChartsOption>({
   tooltip: {
@@ -29,38 +29,38 @@ const option = ref<echarts.EChartsOption>({
     type: 'piecewise',
     min: 0,
     max: 50,
-    pieces:[
+    pieces: [
       {
-        max:5,
+        max: 5,
-        label:'少',
+        label: '少',
-        color:'#ff4d4d'
+        color: '#ff4d4d'
       },
       {
-        min:5,
+        min: 5,
-        max:15,
+        max: 15,
-        label:'中',
+        label: '中',
-        color:'#ffa64d'
+        color: '#ffa64d'
       },
       {
-        min:15,
+        min: 15,
-        max:20,
+        max: 20,
-        label:'多',
+        label: '多',
-        color:'#ffcc00'
+        color: '#ffcc00'
       },
       {
-        min:20,
+        min: 20,
-        max:30,
+        max: 30,
-        label:'非常多',
+        label: '非常多',
-        color:'#99cc33'
+        color: '#99cc33'
       },
       {
-        min:30,
+        min: 30,
-        label:'数据中心',
+        label: '数据中心',
-        color:'#33cc33'
+        color: '#33cc33'
       }
     ],
-    textStyle:{
+    textStyle: {
-      color:'#fff'
+      color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#fff' : '#000'
     }
   },
   series: [{
@@ -75,18 +75,21 @@ const option = ref<echarts.EChartsOption>({
       label: {
         show: true,
       },
-      itemStyle:{
+      itemStyle: {
-        areaColor:'#FFDE59'
+        areaColor: '#FFDE59'
       }
     },
     data
   }]
 });
+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'
+    }
+  })
+})
 </script>
-
-<style scoped>
-.chart {
-  height: 600px;
-  width: 30%;
-}
-</style>

src/views/HomeView.vue

@@ -1,8 +1,44 @@
 <template>
   <section style="padding:2rem; text-align:center;">
-    <h2>欢迎来到 EasyTierMC Uptime</h2>
+    <h2 class="text-2xl font-bold mb-2">欢迎来到 EasyTierMC Uptime</h2>
     <p>使用上方导航查看节点监控或提交新的节点。</p>
-    <Map />
+    <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="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-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-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-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-body">
+            <h2 class="card-title font-bold">总负载</h2>
+            <p class="text-3xl font-bold">114%</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-center items-center">
+      <Map class="w-1/2 h-96" />
+    </div>
   </section>
 </template>