🚀 0.4.20

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nazhua",
-  "version": "0.4.19",
+  "version": "0.4.20",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/charts/line.js

@@ -36,10 +36,29 @@ export default (
       },
       formatter: (params) => {
         const time = dayjs(parseInt(params[0].axisValue, 10)).format('YYYY.MM.DD HH:mm');
-        let res = `${time}<br>`;
+        let res = `<p style="font-weight: bold; color: #ff6;">${time}</p>`;
-        params.forEach((i) => {
+        if (params.length < 10) {
-          res += `${i.marker} ${i.seriesName}: ${i.value[1]}ms<br>`;
+          params.forEach((i) => {
-        });
+            res += `${i.marker} ${i.seriesName}: ${i.value[1]}ms<br>`;
+          });
+        } else {
+          res += '<table>';
+          let trEnd = false;
+          params.forEach((i, index) => {
+            if (index % 2 === 0) {
+              res += '<tr>';
+            }
+            res += `<td style="padding: 0 4px;">${i.marker} ${i.seriesName}: ${i.value[1]}ms</td>`;
+            if (index % 2 === 1) {
+              res += '</tr>';
+              trEnd = true;
+            }
+          });
+          if (!trEnd) {
+            res += '</tr>';
+          }
+          res += '</table>';
+        }
         return res;
       },
       backgroundColor: mode === 'dark' ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)',

src/views/components/server-detail/server-monitor.vue

@@ -166,10 +166,8 @@ const showCates = ref({});
 
 const monitorData = ref([]);
 
-const accpetShowTime = computed(() => {
+const now = ref(Date.now());
-  const now = store.state.serverTime || Date.now();
+const accpetShowTime = computed(() => now.value - (minute.value * 60 * 1000));
-  return now - (minute.value * 60 * 1000);
-});
 
 const minuteActiveArrowStyle = computed(() => {
   const index = minutes.findIndex((i) => i.value === minute.value);
@@ -308,6 +306,7 @@ function switchRefresh() {
 }
 
 function toggleMinute(value) {
+  now.value = store.state.serverTime || Date.now();
   minute.value = value;
 }
 
@@ -328,6 +327,7 @@ async function loadMonitor() {
   }).catch((err) => {
     console.error(err);
   });
+  now.value = store.state.serverTime || Date.now();
 }
 
 let loadMonitorTimer = null;

src/views/composable/server-monitor.js

@@ -39,9 +39,11 @@ export function getThreshold(data, tolerance = 2) {
 const lineColorMap = {};
 const lineColors = [];
 const defaultColors = [
-  '#5470c6', '#91cc75', '#fac858',
+  '#5470C6', '#91CC75', '#FAC858', '#EE6666',
-  '#ee6666', '#73c0de', '#3ba272',
+  '#73C0DE', '#3BA272', '#FC8452', '#9A60B4',
-  '#fc8452', '#9a60b4', '#ea7ccc',
+  '#EA7CCC', '#C23531', '#2F4554', '#61A0A8',
+  '#D48265', '#91C7AE', '#749F83', '#CA8622',
+  '#BDA29A', '#6E7074', '#546570', '#C4CCD3',
 ];
 
 /**
@@ -76,20 +78,24 @@ function rgbDistance(color1, color2) {
  * 获取一个随机颜色
  * @returns {string} 返回一个随机颜色的字符串
  */
-function getColor() {
+function getColor(count = 0, len = 0) {
+  // 如果尝试次数超过 3 次，返回固定颜色组里面的颜色
+  if (count > 3) {
+    return defaultColors[len % defaultColors.length];
+  }
   const { color } = uniqolor.random({
     saturation: [75, 90],
     lightness: [65, 70],
     differencePoint: 100,
   });
   if (lineColors.includes(color)) {
-    return getColor();
+    return getColor(count + 1, len);
   }
   if (lineColors.some((i) => rgbDistance(
     hexToRgb(i),
     hexToRgb(color),
-  ) < 80)) {
+  ) < 50)) {
-    return getColor();
+    return getColor(count + 1, len);
   }
   return color;
 }
@@ -104,14 +110,7 @@ export function getLineColor(name) {
   if (lineColorMap[name]) {
     return lineColorMap[name];
   }
-  // 如果默认颜色还有剩余，直接使用
+  const color = getColor(0, lineColors.length);
-  if (defaultColors.length > 0) {
-    const color = defaultColors.shift();
-    lineColorMap[name] = color;
-    lineColors.push(color);
-    return color;
-  }
-  const color = getColor();
   lineColorMap[name] = color;
   lineColors.push(color);
   return color;