✨ 添加服务器状态渐变显示支持

public/config.js

@@ -6,6 +6,7 @@ window.$$nazhuaConfig = {
   // listServerStatusType: 'progress', // 服务器状态类型--列表
   // listServerRealTimeShowLoad: false, // 列表显示服务器实时负载
   // detailServerStatusType: 'progress', // 服务器状态类型--详情页
+  // serverStatusLinear: true, // 服务器状态渐变线性显示
   // disableSarasaTermSC: false, // 禁用Sarasa Term SC字体
   // hideWorldMap: false, // 隐藏地图
   // hideHomeWorldMap: false, // 隐藏首页地图

src/components/charts/donut.js

@@ -7,12 +7,34 @@ import {
   PolarComponent,
 } from 'echarts/components';
 
+import config from '@/config';
+
 use([
   CanvasRenderer,
   BarChart,
   PolarComponent,
 ]);
 
+function handleColor(color) {
+  if (Array.isArray(color)) {
+    return {
+      type: 'linear',
+      x: 1,
+      y: 1,
+      x2: 0,
+      y2: 0,
+      colorStops: [{
+        offset: 0,
+        color: color[0], // 0% 处的颜色
+      }, {
+        offset: 1,
+        color: color[1], // 100% 处的颜色
+      }],
+    };
+  }
+  return color;
+}
+
 export default (used, total, itemColors, size = 100) => ({
   angleAxis: {
     max: total, // 满分
@@ -56,11 +78,10 @@ export default (used, total, itemColors, size = 100) => ({
       value: used,
     }],
     itemStyle: {
-      color: typeof itemColors === 'string' ? itemColors : itemColors?.used,
+      color: typeof itemColors === 'string' ? itemColors : handleColor(itemColors?.used),
       borderRadius: 5,
-      shadowColor: 'rgba(0, 0, 0, 0.2)',
+      shadowColor: config.nazhua.serverStatusLinear ? 'rgba(0, 0, 0, 0.5)' : undefined,
       shadowBlur: 10,
-      shadowOffsetY: 2,
     },
     coordinateSystem: 'polar',
     cursor: 'default',
@@ -74,7 +95,7 @@ export default (used, total, itemColors, size = 100) => ({
       value: total,
     }],
     itemStyle: {
-      color: itemColors?.total || 'rgba(255, 255, 255, 0.2)',
+      color: handleColor(itemColors?.total) || 'rgba(255, 255, 255, 0.2)',
     },
     coordinateSystem: 'polar',
     cursor: 'default',

src/views/components/server/server-status-progress.vue

@@ -75,7 +75,11 @@ const progressStyle = computed(() => {
   style.width = `${Math.min(props.used, 100)}%`;
   const color = typeof props.colors === 'string' ? props.colors : props.colors?.used;
   if (color) {
-    style.backgroundColor = color;
+    if (Array.isArray(color)) {
+      style.background = `linear-gradient(-35deg, ${color.join(',')})`;
+    } else {
+      style.backgroundColor = color;
+    }
   }
   return style;
 });
@@ -105,7 +109,7 @@ const progressStyle = computed(() => {
     width: 100%;
     height: var(--progress-bar-height);
     background: rgba(255, 255, 255, 0.2);
-    border-radius: var(--progress-bar-height);
+    border-radius: calc(var(--progress-bar-height) / 2);
     overflow: hidden;
   }
 
@@ -115,7 +119,7 @@ const progressStyle = computed(() => {
     left: 0;
     bottom: 0;
     background-color: #08f;
-    border-radius: var(--progress-bar-height);
+    border-radius: calc(var(--progress-bar-height) / 2);
   }
 
   .progress-bar-label {

src/views/composable/server-monitor.js

@@ -38,6 +38,11 @@ export function getThreshold(data, tolerance = 2) {
  */
 const lineColorMap = {};
 const lineColors = [];
+const defaultColors = [
+  '#5470c6', '#91cc75', '#fac858',
+  '#ee6666', '#73c0de', '#3ba272',
+  '#fc8452', '#9a60b4', '#ea7ccc',
+];
 
 /**
  * 将十六进制颜色转换为 RGB 数组
@@ -99,6 +104,13 @@ export function getLineColor(name) {
   if (lineColorMap[name]) {
     return lineColorMap[name];
   }
+  // 如果默认颜色还有剩余，直接使用
+  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);

src/views/composable/server-status.js

@@ -1,6 +1,7 @@
 import {
   computed,
 } from 'vue';
+import config from '@/config';
 import validate from '@/utils/validate';
 import * as hostUtils from '@/utils/host';
 
@@ -63,12 +64,13 @@ export default (params) => {
       case 'cpu':
       {
         const CoresVal = cpuInfo.value?.cores ? `${cpuInfo.value?.cores}C` : '-';
+        const usedColor = config.nazhua.serverStatusLinear ? ['#0088FF', '#72B7FF'] : '#0088FF';
         return {
           type: 'cpu',
           used: (props.info.State?.CPU || 0).toFixed(1) * 1,
           colors: {
-            used: '#0088ff',
+            used: usedColor,
-            total: 'rgba(255, 255, 255, 0.2)',
+            total: 'rgba(255, 255, 255, 0.25)',
           },
           valText: `${(props.info.State?.CPU || 0).toFixed(1) * 1}%`,
           label: 'CPU',
@@ -92,12 +94,13 @@ export default (params) => {
         } else {
           contentVal = `${Math.ceil(useMemAndTotalMem.value.total.m)}M`;
         }
+        const usedColor = config.nazhua.serverStatusLinear ? ['#2B6939', '#0AA344'] : '#0AA344';
         return {
           type: 'mem',
           used: useMemAndTotalMem.value.usePercent,
           colors: {
-            used: '#0aa344',
+            used: usedColor,
-            total: 'rgba(255, 255, 255, 0.2)',
+            total: 'rgba(255, 255, 255, 0.25)',
           },
           valText: usedVal,
           label: '内存',
@@ -124,12 +127,13 @@ export default (params) => {
         } else {
           contentVal = `${Math.ceil(useSwapAndTotalSwap.value.total.m)}M`;
         }
+        const usedColor = config.nazhua.serverStatusLinear ? ['#FF8C00', '#F38100'] : '#FF8C00';
         return {
           type: 'swap',
           used: useSwapAndTotalSwap.value.usePercent,
           colors: {
-            used: '#ff8c00',
+            used: usedColor,
-            total: 'rgba(255, 255, 255, 0.2)',
+            total: 'rgba(255, 255, 255, 0.25)',
           },
           valText: usedVal,
           label: '交换',
@@ -147,12 +151,13 @@ export default (params) => {
         } else {
           contentValue = `${Math.ceil(useDiskAndTotalDisk.value.total.g)}G`;
         }
+        const usedColor = config.nazhua.serverStatusLinear ? ['#00848F', '#70F3FF'] : '#70F3FF';
         return {
           type: 'disk',
           used: useDiskAndTotalDisk.value.usePercent,
           colors: {
-            used: '#70f3ff',
+            used: usedColor,
-            total: 'rgba(255, 255, 255, 0.2)',
+            total: 'rgba(255, 255, 255, 0.25)',
           },
           valText: `${(useDiskAndTotalDisk.value.used.g).toFixed(1) * 1}G`,
           label: '磁盘',