🚀 0.4.19

package.json

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

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/assets/scss/variables.scss

@@ -25,8 +25,7 @@
 
   --list-item-price-color: #eee;
   --list-item-buy-link-color: #ffc300;
-  --public-note-tag-color: #ccc;
+  --public-note-tag-color: #ddd;
-  // --public-note-tag-bg: #6a7efc;
   --public-note-tag-bg: linear-gradient(125deg, #8f94fb, #4e54c8);
 
   // 针对1440px以下的屏幕

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,
+      shadowBlur: config.nazhua.serverStatusLinear ? 10 : undefined,
-      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/components/world-map/world-map.vue

@@ -190,7 +190,7 @@ const tipsContentStyle = computed(() => {
     style.left = `${activeTipsXY.value.x}px`;
     style.transform = 'translate(-50%, 20px)';
   } else {
-    style.bottom = '10px';
+    style.bottom = '4px';
     style.left = '50%';
     style.transform = 'translate(-50%, 0)';
   }
@@ -232,11 +232,11 @@ function handlePointTap(e) {
     padding: 5px 10px;
     border-radius: 5px;
     line-height: 20px;
+    white-space: pre;
     color: #eee;
     background: rgba(#000, 0.8);
     box-shadow: 1px 4px 8px rgba(#303841, 0.4);
     z-index: 100;
-    white-space: pre;
 
     // 向上的尖角
     &::before {
@@ -250,6 +250,15 @@ function handlePointTap(e) {
       border-bottom-color: rgba(#000, 0.8);
       transform: translateX(-50%);
     }
+
+    @media screen and (max-width: 500px) {
+      line-height: 16px;
+      font-size: 12px;
+
+      &::before {
+        display: none;
+      }
+    }
   }
 }
 

src/data/code-maps.js

@@ -120,8 +120,8 @@ const codeMaps = {
     country: '美国',
   },
   MIA: {
-    x: 243,
+    x: 237,
-    y: 244,
+    y: 249,
     name: '迈阿密',
     country: '美国',
   },
@@ -137,12 +137,48 @@ const codeMaps = {
     name: '纽约',
     country: '美国',
   },
+  DFW: {
+    x: 172,
+    y: 211,
+    name: '达拉斯',
+    country: '美国',
+  },
+  ATL: {
+    x: 225,
+    y: 205,
+    name: '亚特兰大',
+    country: '美国',
+  },
+  HNL: {
+    x: 28,
+    y: 270,
+    name: '檀香山',
+    country: '美国',
+  },
   YYZ: {
     x: 267,
     y: 161,
     name: '多伦多',
     country: '加拿大',
   },
+  MEX: {
+    x: 158,
+    y: 280,
+    name: '墨西哥城',
+    country: '墨西哥',
+  },
+  SCQ: {
+    x: 289,
+    y: 513,
+    name: '圣地亚哥',
+    country: '智利',
+  },
+  GRU: {
+    x: 370,
+    y: 473,
+    name: '圣保罗',
+    country: '巴西',
+  },
   SYD: {
     x: 1167,
     y: 519,
@@ -167,6 +203,12 @@ const codeMaps = {
     name: '法兰克福',
     country: '德国',
   },
+  BER: {
+    x: 620,
+    y: 130,
+    name: '柏林',
+    country: '德国',
+  },
   LUX: {
     x: 591,
     y: 140,
@@ -179,6 +221,24 @@ const codeMaps = {
     name: '巴黎',
     country: '法国',
   },
+  WAW: {
+    name: '华沙',
+    country: '波兰',
+    x: 649,
+    y: 123,
+  },
+  MAD: {
+    name: '马德里',
+    country: '西班牙',
+    x: 554,
+    y: 180,
+  },
+  MXP: {
+    name: '米兰',
+    country: '意大利',
+    x: 604,
+    y: 153,
+  },
   SVO: {
     x: 704,
     y: 115,
@@ -235,6 +295,13 @@ export const countryCodeMapping = {
   GB: 'LON',
   AU: 'SYD',
   US: 'LAX',
+  CA: 'YYZ',
+  MX: 'MEX',
+  CL: 'SCQ',
+  BR: 'GRU',
+  IT: 'MXP',
+  ES: 'MAD',
+  PL: 'WAW',
 };
 
 export default codeMaps;

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

@@ -427,7 +427,7 @@ onUnmounted(() => {
 
         .switch-dot {
           left: 16px;
-          box-shadow: 1px 1px 2px #000;
+          box-shadow: 1px 1px 2px rgba(#000, 0.4);
         }
       }
     }
@@ -497,7 +497,7 @@ onUnmounted(() => {
 
       &.active {
         color: #fff;
-        text-shadow: 1px 1px 2px #000;
+        text-shadow: 1px 1px 2px rgba(#000, 0.6);
       }
     }
 

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: '磁盘',