Tianpao/ETMC.Web
1
0
Fork 0
mirror of https://github.com/EasyTierMC/ETMC.Web.git synced 2025-12-07 21:15:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:nodes map and info card

Browse Source
This commit is contained in:
Tianpao
2025-11-22 02:05:29 +08:00
parent 5055f2bf6d
commit 2d83037540
3 changed files with 82 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
public/china.json → src/assets/china.json
View File

23
src/components/dashboard/Map.vue
View File

@@ -5,9 +5,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { onMounted, ref } from 'vue';
import VChart from 'vue-echarts'; import VChart from 'vue-echarts';
import china from "../../../public/china.json" import china from "@/assets/china.json"
import * as echarts from 'echarts'; import * as echarts from 'echarts';
echarts.registerMap('china', china as any); echarts.registerMap('china', china as any);
@@ -60,7 +60,7 @@ const option = ref<echarts.EChartsOption>({
} }
], ],
textStyle: { textStyle: {
color:'#fff' color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#fff' : '#000'
} }
}, },
series: [{ series: [{
@@ -82,11 +82,14 @@ const option = ref<echarts.EChartsOption>({
data data
}] }]
}); });
</script> onMounted(() => {
matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
<style scoped> const color = option.value.visualMap as { textStyle: { color: string } };
.chart { if (e.matches) {
height: 600px; color.textStyle.color = '#000'
width: 30%; } else {
color.textStyle.color = '#fff'
} }
</style> })
})
</script>

40
src/views/HomeView.vue
View File

@@ -1,8 +1,44 @@
<template> <template>
<section style="padding:2rem; text-align:center;"> <section style="padding:2rem; text-align:center;">
<h2>欢迎来到 EasyTierMC Uptime</h2> <h2 class="text-2xl font-bold mb-2">欢迎来到 EasyTierMC Uptime</h2>
<p>使用上方导航查看节点监控或提交新的节点。</p> <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> </section>
</template> </template>