✨ 新配色

src/App.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 // import Nav from './components/Nav.vue'
 console.log('App.vue')
+const year = new Date().getFullYear()
 </script>
 
 <template>
+  <h1 style="text-align: center">Server Status</h1>
   <router-view/>
+  <footer>
+    © Copyright 2024-{{year}} <a href="https://sfkm.me" target="_blank">snowykami</a> All Rights Reserved
+  </footer>
 </template>
 
 <style scoped>
@@ -20,4 +25,9 @@ console.log('App.vue')
 .logo.vue:hover {
   filter: drop-shadow(0 0 2em #42b883aa);
 }
+footer {
+  text-align: center;
+  padding: 1em;
+  color: #666;
+}
 </style>

src/api/utils.ts

@@ -25,8 +25,8 @@ export function formatSizeByUnit(bytes: number, unit: string | null = null, suff
     if( bytes == 0 ){
         return '0'
     }
-    if (unit && bytes < 1024) {
+    if (bytes < 1024) {
-        return bytes.toFixed(0) + unit
+        return bytes.toFixed(0) + (suffix ? suffix : '')
     }
     const units = ['', 'K', 'M', 'G', 'T', 'P', 'E']
     let i = unit ? units.indexOf(unit) : Math.floor(Math.log2(bytes) / 10)
@@ -50,3 +50,10 @@ export function format2Size(num1: number, num2: number, suffix: string | null =
     const n1 = formatSizeByUnit(num1, r2.unit)
     return `${n1}/${r2.num.toFixed(1)}${r2.unit}${suffix}`
 }
+
+export function formatDate(timestamp: number, timeOnly: boolean = false){
+    const d = new Date(timestamp * 1000)
+    const date = d.toLocaleDateString()
+    const time = d.toLocaleTimeString()
+    return timeOnly ? time : `${date} ${time}`
+}

src/components/Host.vue

@@ -2,7 +2,7 @@
 import {Status} from "../api";
 import {computed, onMounted, ref, watch} from "vue";
 import * as echarts from "echarts";
-import {format2Size, formatSizeByUnit, getLinuxReleaseIcon} from "../api/utils.ts";
+import {format2Size, formatDate, formatSizeByUnit, getLinuxReleaseIcon} from "../api/utils.ts";
 
 const props = defineProps<{
   status: Status
@@ -54,7 +54,11 @@ function onMountedFunc() {
   function update() {
     const timeDiff = (Date.now()) / 1000 - status.value.meta.observed_at
     deltaTime.value = timeDiff.toFixed(1)
-    netStats.push([status.value.meta.observed_at, status.value.hardware.net.up, status.value.hardware.net.down])
+    // 判断该时间与上一个时间不同才push
+    if (netStats.length === 0 || netStats[netStats.length - 1][0] !== status.value.meta.observed_at){
+      netStats.push([status.value.meta.observed_at, status.value.hardware.net.up, status.value.hardware.net.down])
+    }
+
     if (netStats.length > 20) {
       netStats.shift()
     }
@@ -206,7 +210,12 @@ function onMountedFunc() {
             {
               type: 'category',
               boundaryGap: false,
-              data: netStats.map(item => item[0])
+              data: netStats.map(item => item[0]),
+              axisLabel: {
+                formatter: function (value: number) {
+                  return formatDate(value, true)
+                }
+              }
             }
           ],
           yAxis: [
@@ -295,7 +304,7 @@ onMounted(
       <div class="cpu-info hw-info">
         <div class="chart" ref="cpuChartRef"></div>
         <div class="hw-title">CPU</div>
-        <div class="hw-detail">{{ status.hardware.cpu.cores }}c{{ status.hardware.cpu.logics }}t</div>
+        <div class="hw-detail">{{ status.hardware.cpu.cores }}C {{ status.hardware.cpu.logics }}T</div>
       </div>
       <div class="memory-info hw-info">
         <div class="chart" ref="memoryChartRef"></div>