✨ 新增简单色系模式

public/config.js

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

src/assets/scss/variables.scss

@@ -26,8 +26,15 @@
   --list-item-price-color: #eee;
   --list-item-buy-link-color: #ffc300;
   --list-item-buy-link-color-hover: #ff9900;
-  --public-note-tag-color: #ddd;
-  --public-note-tag-bg: linear-gradient(125deg, #8f94fb, #4e54c8);
+  --public-note-tag-color: #ccc;
+  --public-note-tag-bg: linear-gradient(125deg, #676ef7, #41459c);
+
+  --option-high-color: #ff7500;
+  --option-high-color-active: rgba(255, 177, 0, 0.75);
+
+  --server-status-value-color: #a1eafb;
+  --server-status-label-color: #ddd;
+  --server-status-content-color: #eee;
 
   // 针对1440px以下的屏幕
   @media screen and (max-width: 1440px) {
@@ -54,3 +61,27 @@
     --detail-container-width: 100vw;
   }
 }
+
+body.simple-color-mode {
+
+  --world-map-point-color: #cbf1f5;
+  
+  --simple-color: #ccc;
+  --duration-color: var(--simple-color);
+  --transfer-color: var(--simple-color);
+  --transfer-in-color: var(--transfer-color);
+  --transfer-out-color: var(--simple-color);
+  --net-speed-in-color: var(--simple-color);
+  --net-speed-out-color: var(--simple-color);
+
+  --list-item-price-color: #eee;
+  --list-item-buy-link-color: var(--simple-color);
+  --list-item-buy-link-color-hover: draken(#cbf1f5, 10%);
+  --public-note-tag-color: #eee;
+  --public-note-tag-bg: transparent;
+
+  --option-high-color: rgb(93, 122, 126);
+  --option-high-color-active: rgba(93, 122, 126, 0.75);
+
+  --server-status-value-color: var(--simple-color);
+}

src/components/charts/donut.js

@@ -35,80 +35,86 @@ function handleColor(color) {
   return color;
 }
 
-export default (used, total, itemColors, size = 100) => ({
-  angleAxis: {
-    max: total, // 满分
-    // 隐藏刻度线
-    axisLine: {
-      show: false,
+export default (used, total, itemColors, size = 100) => {
+  const isLinear = (
+    (config.nazhua.serverStatusLinear || config.nazhua.lightBackground)
+    && !config.nazhua.simpleColorMode
+  );
+  return {
+    angleAxis: {
+      max: total, // 满分
+      // 隐藏刻度线
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
     },
-    axisTick: {
-      show: false,
+    radiusAxis: {
+      type: 'category',
+      // 隐藏刻度线
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
     },
-    axisLabel: {
-      show: false,
+    polar: {
+      center: ['50%', '50%'],
+      radius: ['50%', '100%'],
     },
-    splitLine: {
-      show: false,
-    },
-  },
-  radiusAxis: {
-    type: 'category',
-    // 隐藏刻度线
-    axisLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLabel: {
-      show: false,
-    },
-    splitLine: {
-      show: false,
-    },
-  },
-  polar: {
-    center: ['50%', '50%'],
-    radius: ['50%', '100%'],
-  },
-  series: [{
-    type: 'bar',
-    data: [{
-      value: used,
+    series: [{
+      type: 'bar',
+      data: [{
+        value: used,
+      }],
+      itemStyle: {
+        color: typeof itemColors === 'string' ? itemColors : handleColor(itemColors?.used),
+        borderRadius: 5,
+        shadowColor: (() => {
+          if (config.nazhua.serverStatusLinear) {
+            return 'rgba(0, 0, 0, 0.5)';
+          }
+          if (config.nazhua.lightBackground) {
+            return 'rgba(0, 0, 0, 0.2)';
+          }
+          return undefined;
+        })(),
+        shadowBlur: isLinear ? 10 : undefined,
+      },
+      coordinateSystem: 'polar',
+      cursor: 'default',
+      roundCap: true,
+      barWidth: Math.ceil((size / 100) * 10),
+      barGap: '-100%', // 两环重叠
+      z: 10,
+    }, {
+      type: 'bar',
+      data: [{
+        value: total,
+      }],
+      itemStyle: {
+        color: handleColor(itemColors?.total) || 'rgba(255, 255, 255, 0.2)',
+      },
+      coordinateSystem: 'polar',
+      cursor: 'default',
+      barWidth: Math.ceil((size / 100) * 10),
+      barGap: '-100%', // 两环重叠
+      z: 5,
     }],
-    itemStyle: {
-      color: typeof itemColors === 'string' ? itemColors : handleColor(itemColors?.used),
-      borderRadius: 5,
-      shadowColor: (() => {
-        if (config.nazhua.serverStatusLinear) {
-          return 'rgba(0, 0, 0, 0.5)';
-        }
-        if (config.nazhua.lightBackground) {
-          return 'rgba(0, 0, 0, 0.2)';
-        }
-        return undefined;
-      })(),
-      shadowBlur: (config.nazhua.serverStatusLinear || config.nazhua.lightBackground) ? 10 : undefined,
-    },
-    coordinateSystem: 'polar',
-    cursor: 'default',
-    roundCap: true,
-    barWidth: Math.ceil((size / 100) * 10),
-    barGap: '-100%', // 两环重叠
-    z: 10,
-  }, {
-    type: 'bar',
-    data: [{
-      value: total,
-    }],
-    itemStyle: {
-      color: handleColor(itemColors?.total) || 'rgba(255, 255, 255, 0.2)',
-    },
-    coordinateSystem: 'polar',
-    cursor: 'default',
-    barWidth: Math.ceil((size / 100) * 10),
-    barGap: '-100%', // 两环重叠
-    z: 5,
-  }],
-});
+  };
+};

src/config/index.js

@@ -33,6 +33,15 @@ if (config.nazhua.nezhaVersion) {
   config.init = true;
 }
 
+function setColorMode() {
+  if (config.nazhua.simpleColorMode) {
+    document.body.classList.add('simple-color-mode');
+  } else {
+    document.body.classList.remove('simple-color-mode');
+  }
+}
+setColorMode();
+
 /**
  * 替换网站图标
  */
@@ -54,6 +63,7 @@ export function mergeNazhuaConfig(customConfig) {
     config.nazhua[key] = customConfig[key];
   });
   replaceFavicon();
+  setColorMode();
 }
 // 暴露合并配置方法
 window.$mergeNazhuaConfig = mergeNazhuaConfig;

src/views/components/server-list/server-option-box.vue

@@ -3,6 +3,7 @@
     class="server-option-box"
     :class="{
       'server-option-box--light-background': lightBackground,
+      'server-option-box--mobile-hide': !mobileShow,
     }"
   >
     <div
@@ -52,6 +53,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  mobileShow: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const emits = defineEmits([
@@ -85,6 +90,12 @@ function toggleModelValue(item) {
   padding: 0 var(--list-padding);
   gap: 8px;
 
+  @media screen and (max-width: 768px) {
+    &--mobile-hide {
+      display: none;
+    }
+  }
+
   .server-option-item {
     display: flex;
     align-items: center;
@@ -122,13 +133,13 @@ function toggleModelValue(item) {
     @media screen and (min-width: 768px) {
       &:hover {
         .option-label {
-          color: #ff7500;
+          color: var(--option-high-color);
         }
       }
     }
 
     &.active {
-      background: rgba(#ff7500, 0.75);
+      background: var(--option-high-color-active);
 
       .option-label {
         color: #fff;
@@ -146,7 +157,7 @@ function toggleModelValue(item) {
         }
 
         &.active {
-          background: rgba(#ff7500, 0.75);
+          background: var(--option-high-color-active);
         }
       }
     }

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

@@ -114,18 +114,18 @@ defineProps({
   .server-status-val-text {
     line-height: 1.2em;
     font-size: var(--server-status-val-text-font-size, 14px);
-    color: #a1eafb;
+    color: var(--server-status-value-color);
   }
   .server-status-label {
     line-height: 1.1em;
     font-size: var(--server-status-label-font-size, 12px);
-    color: #ddd;
+    color: var(--server-status-label-color);
   }
 
   .server-status-content {
     line-height: 1.2em;
     font-size: var(--server-status-content-font-size, 14px);
-    color: #eee;
+    color: var(--server-status-content-color);
 
     .default-mobile {
       display: none;

src/views/composable/server-status.js

@@ -5,6 +5,32 @@ import config from '@/config';
 import validate from '@/utils/validate';
 import * as hostUtils from '@/utils/host';
 
+function getColor(type, mode) {
+  const colors = {
+    cpu: {
+      linear: ['#0088FF', '#72B7FF'],
+      default: '#0088FF',
+      simple: '#007B43',
+    },
+    mem: {
+      linear: ['#2B6939', '#0AA344'],
+      default: '#0AA344',
+      simple: '#007B43',
+    },
+    swap: {
+      linear: ['#FF8C00', '#F38100'],
+      default: '#FF8C00',
+      simple: '#007B43',
+    },
+    disk: {
+      linear: ['#00848F', '#70F3FF'],
+      default: '#70F3FF',
+      simple: '#007B43',
+    },
+  };
+  return colors[type][mode];
+}
+
 export default (params) => {
   const {
     props,
@@ -15,7 +41,15 @@ export default (params) => {
   }
 
   const lightBackground = computed(() => config.nazhua.lightBackground);
-  const serverStatusLinear = computed(() => config.nazhua.serverStatusLinear || lightBackground.value);
+  const serverStatusColorMode = computed(() => {
+    if (config.nazhua.simpleColorMode) {
+      return 'simple';
+    }
+    if (config.nazhua.serverStatusLinear || lightBackground.value) {
+      return 'linear';
+    }
+    return 'default';
+  });
 
   const cpuInfo = computed(() => {
     if (props.info?.Host?.CPU?.[0]) {
@@ -69,7 +103,7 @@ export default (params) => {
       case 'cpu':
       {
         const CoresVal = cpuInfo.value?.cores ? `${cpuInfo.value?.cores}C` : '-';
-        const usedColor = serverStatusLinear.value ? ['#0088FF', '#72B7FF'] : '#0088FF';
+        const usedColor = getColor('cpu', serverStatusColorMode.value);
         const valPercent = `${(props.info.State?.CPU || 0).toFixed(1) * 1}%`;
         const valText = valPercent;
         return {
@@ -102,7 +136,7 @@ export default (params) => {
         } else {
           contentVal = `${Math.ceil(useMemAndTotalMem.value.total.m)}M`;
         }
-        const usedColor = serverStatusLinear.value ? ['#2B6939', '#0AA344'] : '#0AA344';
+        const usedColor = getColor('mem', serverStatusColorMode.value);
         return {
           type: 'mem',
           used: useMemAndTotalMem.value.usePercent,
@@ -136,7 +170,7 @@ export default (params) => {
         } else {
           contentVal = `${Math.ceil(useSwapAndTotalSwap.value.total.m)}M`;
         }
-        const usedColor = serverStatusLinear.value ? ['#FF8C00', '#F38100'] : '#FF8C00';
+        const usedColor = getColor('swap', serverStatusColorMode.value);
         return {
           type: 'swap',
           used: useSwapAndTotalSwap.value.usePercent,
@@ -167,7 +201,7 @@ export default (params) => {
         } else {
           contentValue = `${Math.ceil(useDiskAndTotalDisk.value.total.g)}G`;
         }
-        const usedColor = serverStatusLinear.value ? ['#00848F', '#70F3FF'] : '#70F3FF';
+        const usedColor = getColor('disk', serverStatusColorMode.value);
         return {
           type: 'disk',
           used: useDiskAndTotalDisk.value.usePercent,

src/views/home.vue

@@ -36,6 +36,7 @@
             v-model="listType"
             :options="listTypeOptions"
             :accpet-empty="false"
+            :mobile-show="false"
           />
         </div>
       </div>