2026-01-19 10:40:43 +08:00
13 changed files with 62 additions and 250 deletions
--- a/2
+++ b/2
@ -1,4 +1,4 @@
-FROM nginx:1.27-alpine
+FROM nginx:1.27.3

 COPY ./dist /home/wwwroot/html
 COPY ./nginx-default.conf.template /etc/nginx/templates/default.conf.template
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "nazhua",
-  "version": "0.7.0",
+  "version": "0.6.6",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src/App.vue
+++ b/src/App.vue
@ -42,9 +42,10 @@ provide('currentTime', currentTime);
 */
 function refreshTime() {
  currentTime.value = Date.now();
-  window.requestAnimationFrame(refreshTime);
+  setTimeout(() => {
+    refreshTime();
+  }, 1000);
 }
-refreshTime();

 // 是否为Windows系统
 const isWindows = /windows|win32/i.test(navigator.userAgent);
--- a/src/assets/scss/variables.scss
+++ b/src/assets/scss/variables.scss
@ -16,18 +16,12 @@
  
  --world-map-point-color: #fff143;

-  --duration-color: #89c3eb;
+  --duration-color: #cbf1f5;
  --transfer-color: #f9ed69;
  --transfer-in-color: var(--transfer-color);
  --transfer-out-color: #90f2ff;
-  --net-speed-color: #90f2ff;
  --net-speed-in-color: #f5b199;
  --net-speed-out-color: #89c3eb;
-  --conn-color: #90f2ff;
-  --conn-tcp-color: #89c3eb;
-  --conn-udp-color: #2ca9e1;
-  --load-color: #90f2ff;
-  --process-color: #f5b199;

  --list-item-price-color: #eee;
  --list-item-buy-link-color: #ffc300;
--- a/src/components/charts/line.js
+++ b/src/components/charts/line.js
@ -18,13 +18,11 @@ use([
  DataZoomComponent,
 ]);

-export default (options) => {
-  const {
-    dateList,
-    valueList,
-    mode = 'dark',
-    connectNulls = true,
-  } = options || {};
+export default (
+  dateList,
+  valueList,
+  mode = 'dark',
+) => {
  const fontFamily = config.nazhua.disableSarasaTermSC === true ? undefined : 'Sarasa Term SC';
  const option = {
    darkMode: mode === 'dark',
@ -38,7 +36,7 @@ export default (options) => {
        let res = `<p style="font-weight: bold; color: #ff6;">${time}</p>`;
        if (params.length < 10) {
          params.forEach((i) => {
-            res += i.value[1] ? `${i.marker} ${i.seriesName}: ${i.value[1]}ms<br>` : '';
+            res += `${i.marker} ${i.seriesName}: ${i.value[1]}ms<br>`;
          });
        } else {
          res += '<table>';
@ -47,9 +45,7 @@ export default (options) => {
            if (index % 2 === 0) {
              res += '<tr>';
            }
-            res += i.value[1]
-              ? `<td style="padding: 0 4px;">${i.marker} ${i.seriesName}: ${i.value[1]}ms</td>`
-              : '<td style="padding: 0 4px;"></td>';
+            res += `<td style="padding: 0 4px;">${i.marker} ${i.seriesName}: ${i.value[1]}ms</td>`;
            if (index % 2 === 1) {
              res += '</tr>';
              trEnd = true;
@ -112,7 +108,7 @@ export default (options) => {
      ...i,
      type: 'line',
      smooth: true,
-      connectNulls,
+      connectNulls: true,
      legendHoverLink: false,
      symbol: 'none',
    })),
--- a/src/components/charts/line.vue
+++ b/src/components/charts/line.vue
@ -38,20 +38,15 @@ const props = defineProps({
    type: [Number, String],
    default: null,
  },
-  connectNulls: {
-    type: [Boolean, String],
-    default: true,
-  },
 });

 const chartRef = ref();
 const option = computed(() => {
  if (props.dateList && props.valueList) {
-    return lineChart({
-      dateList: props.dateList,
-      valueList: props.valueList,
-      connectNulls: props.connectNulls,
-    });
+    return lineChart(
+      props.dateList,
+      props.valueList,
+    );
  }
  return null;
 });
--- a/src/views/components/server-detail/server-monitor.vue
+++ b/src/views/components/server-detail/server-monitor.vue
@ -118,10 +118,10 @@
                    {{ cateItem.avg }}ms
                  </span>
                  <span
-                    v-if="cateItem.over !== 0"
-                    class="cate-over-rate"
+                    v-else
+                    class="cate-avg-ms"
                  >
-                    {{ cateItem.over }}%
+                    -ms
                  </span>
                </div>
              </template>
@ -131,7 +131,6 @@
            :date-list="monitorChartData.dateList"
            :value-list="[monitorChartData.valueList[index]]"
            :size="240"
-            :connect-nulls="false"
          />
        </div>
      </div>
@ -169,6 +168,12 @@
                >
                  {{ cateItem.avg }}ms
                </span>
+                <span
+                  v-else
+                  class="cate-avg-ms"
+                >
+                  -ms
+                </span>
              </div>
            </template>
          </popover>
@ -178,7 +183,6 @@
      <line-chart
        :date-list="monitorChartData.dateList"
        :value-list="monitorChartData.valueList"
-        :connect-nulls="false"
      />
    </template>
  </dot-dot-box>
@ -259,9 +263,8 @@ const monitorChartType = computed(() => {
  return config.nazhua.monitorChartType;
 });

-// 服务器时间（后面来自接口）
-const nowServerTime = computed(() => store.state.serverTime || Date.now());
-const accpetShowTime = computed(() => (Math.floor(nowServerTime.value / 60000) - minute.value) * 60000);
+const now = ref(Date.now());
+const accpetShowTime = computed(() => now.value - (minute.value * 60 * 1000));

 const minuteActiveArrowStyle = computed(() => {
  const index = minutes.findIndex((i) => i.value === minute.value);
@ -299,25 +302,13 @@ const monitorChartData = computed(() => {
      };
    }
    const showAvgDelay = [];
-    const showCreateTime = [];
-    const accpeTimeMap = {};
-    i.created_at.forEach((o, index) => {
+    const showCreateTime = i.created_at.filter((o, index) => {
      const status = o >= accpetShowTime.value;
      if (status) {
-        accpeTimeMap[o] = i.avg_delay[index];
+        showAvgDelay.push(i.avg_delay[index]);
      }
+      return status;
    });
-    const allMintues = Math.floor((Date.now() - accpetShowTime.value) / 60000);
-    for (let j = 0; j < allMintues; j += 1) {
-      const time = accpetShowTime.value + j * 60000;
-      showCreateTime.push(time);
-      const timeProp = accpeTimeMap[time];
-      if (timeProp) {
-        showAvgDelay.push(timeProp);
-      } else {
-        showAvgDelay.push(null);
-      }
-    }
    const {
      threshold,
      mean,
@ -325,21 +316,19 @@ const monitorChartData = computed(() => {
      min,
    } = peakShaving.value ? getThreshold(showAvgDelay, 2) : {};
    showCreateTime.forEach((o, index) => {
-      if (Object.prototype.hasOwnProperty.call(dateMap, o)) {
+      if (dateMap[o]) {
        return;
      }
      const avgDelay = showAvgDelay[index];
      if (peakShaving.value) {
        if (avgDelay === 0) {
-          dateMap[o] = null;
          return;
        }
        if (Math.abs(avgDelay - mean) > threshold && max / min > 2) {
-          dateMap[o] = null;
          return;
        }
      }
-      dateMap[o] = avgDelay ? (avgDelay).toFixed(2) * 1 : null;
+      dateMap[o] = (avgDelay).toFixed(2) * 1;
    });
  });
  let dateList = [];
@ -362,9 +351,9 @@ const monitorChartData = computed(() => {
        showCates.value[id] = true;
      }
      // 计算平均延迟和成功率
-      const validAvgs = avgs.filter((a) => a[1] !== 0 && a[1] !== null);
+      const validAvgs = avgs.filter((a) => a[1] !== 0);
      const avg = validAvgs.reduce((a, b) => a + b[1], 0) / validAvgs.length;
-      const over = avgs.filter((a) => a[1] !== 0 && a[1] !== null).length / avgs.length;
+      const over = avgs.filter((a) => a[1] !== 0).length / avgs.length;
      const cateItem = {
        id,
        name: i,
@ -395,7 +384,8 @@ const monitorChartData = computed(() => {
      });
    }
  });
-  dateList = dateList.sort((a, b) => a - b);
+  // 去重
+  dateList = Array.from(new Set(dateList)).sort((a, b) => a - b);
  valueList = valueList.filter((i) => showCates.value[i.id]);
  return {
    dateList,
@ -420,6 +410,7 @@ function switchChartType() {
 }

 function toggleMinute(value) {
+  now.value = store.state.serverTime || Date.now();
  minute.value = value;
 }

@ -463,6 +454,7 @@ async function loadMonitor() {
  }).catch((err) => {
    console.error(err);
  });
+  now.value = store.state.serverTime || Date.now();
 }

 let loadMonitorTimer = null;
@ -547,15 +539,8 @@ onUnmounted(() => {
      color: #fff;
    }

-    .cate-over-rate {
-      height: var(--cate-item-height);
-      line-height: calc(var(--cate-item-height) + 2px);
-      text-align: right;
-      color: #fffbd8;
-    }
-
    &.disabled {
-      filter: grayscale(1) brightness(0.8);
+      filter: grayscale(1);
      opacity: 0.5;
    }
  }
--- a/src/views/components/server-list/card/server-list-item.vue
+++ b/src/views/components/server-list/card/server-list-item.vue
@ -91,7 +91,7 @@ const platformLogoIconClassName = computed(() => hostUtils.getPlatformLogoIconCl

 const serverRealTimeListTpls = computed(() => {
  if (config.nazhua?.listServerRealTimeShowLoad) {
-    return 'D-A-T,T-A-U,L-A-P,I-A-O';
+    return 'duration,load,transfer,speeds';
  }
  return 'duration,transfer,inSpeed,outSpeed';
 });
--- a/src/views/components/server-list/row/server-list-column.vue
+++ b/src/views/components/server-list/row/server-list-column.vue
@ -23,10 +23,7 @@
        </template>
        <template v-else>
          <span class="item-text item-value">{{ value }}</span>
-          <span
-            v-if="unit"
-            class="item-text item-unit"
-          >{{ unit }}</span>
+          <span class="item-text item-unit">{{ unit }}</span>
        </template>
      </div>
    </div>
@ -187,12 +184,6 @@ const columnStyle = computed(() => {
    }
  }

-  &--speeds {
-    .item-value {
-      color: var(--net-speed-color);
-    }
-  }
-
  &--inSpeed {
    .item-value {
      color: var(--net-speed-in-color);
@ -216,23 +207,5 @@ const columnStyle = computed(() => {
      color: var(--list-item-price-color);
    }
  }
-
-  &--tcp {
-    .item-value {
-      color: var(--conn-tcp-color);
-    }
-  }
-
-  &--udp {
-    .item-value {
-      color: var(--conn-udp-color);
-    }
-  }
-
-  &--conns {
-    .item-value {
-      color: var(--conn-color);
-    }
-  }
 }
 </style>
--- a/src/views/components/server-list/row/server-list-item.vue
+++ b/src/views/components/server-list/row/server-list-item.vue
@ -41,7 +41,7 @@
    <server-list-item-real-time
      v-if="$config.nazhua.hideListItemStat !== true"
      :info="info"
-      server-real-time-list-tpls="load,conns,speeds,transfer,duration"
+      server-real-time-list-tpls="load,inSpeed,outSpeed,transfer,duration"
    />
    <server-list-item-bill
      v-if="$config.nazhua.hideListItemBill !== true"
--- a/src/views/components/server/server-real-time.vue
+++ b/src/views/components/server/server-real-time.vue
@ -22,19 +22,13 @@
            </span>
            <span class="item-content-sub-content">
              <span class="item-value">{{ subItem.show ? subItem?.value : '-' }}</span>
-              <span
-                v-if="subItem.show"
-                class="item-unit item-text"
-              >{{ subItem?.unit }}</span>
+              <span class="item-unit item-text">{{ subItem.show ? subItem?.unit : '' }}</span>
            </span>
          </span>
        </div>
        <template v-else>
          <span class="item-value">{{ item.show ? item?.value : '-' }}</span>
-          <span
-            v-if="item.show"
-            class="item-unit item-text"
-          >{{ item?.unit }}</span>
+          <span class="item-unit item-text">{{ item.show ? item?.unit : '' }}</span>
        </template>
      </div>
      <span
@ -126,14 +120,7 @@ const {
        flex: 1;
        display: flex;
        align-items: center;
-        gap: 0.2em;
-      }
-
-      --real-time-label-line-height: calc(var(--real-time-label-font-size, 14px) * 1.8);
-
-      .item-content-sub-label {
-        height: var(--real-time-label-line-height);
-        line-height: var(--real-time-label-line-height);
+        gap: 2px;
      }

      .item-content-sub-content {
@ -141,34 +128,19 @@ const {
        align-items: center;
      }

-      .item-value,
-      .item-text,
-      .item-label {
-        height: var(--real-time-label-line-height);
-        line-height: var(--real-time-label-line-height);
+      .item-value {
+        line-height: 1em;
        font-size: var(--real-time-label-font-size, 14px);
      }

-      .item-content-sub-item--L-A-P-load {
-        .item-value {
-          color: var(--load-color);
-        }
-      }
-      .item-content-sub-item--L-A-P-process {
-        .item-value {
-          color: var(--process-color);
-        }
+      .item-text {
+        line-height: 1em;
+        font-size: var(--real-time-label-font-size, 14px);
      }

-      .item-content-sub-item--D-A-T-duration {
-        .item-value {
-          color: var(--duration-color);
-        }
-      }
-      .item-content-sub-item--D-A-T-transfer {
-        .item-value {
-          color: var(--transfer-color);
-        }
+      .item-label {
+        line-height: 1em;
+        font-size: var(--real-time-label-font-size, 14px);
      }

      .item-content-sub-item--speeds-in {
@ -181,17 +153,6 @@ const {
          color: var(--net-speed-out-color);
        }
      }
-
-      .item-content-sub-item--conn-tcp {
-        .item-value {
-          color: var(--conn-tcp-color);
-        }
-      }
-      .item-content-sub-item--conn-udp {
-        .item-value {
-          color: var(--conn-udp-color);
-        }
-      }
    }
  }

--- a/src/views/composable/server-monitor.js
+++ b/src/views/composable/server-monitor.js
@ -11,15 +11,15 @@ import uniqolor from 'uniqolor';
 */
 export function getThreshold(data, tolerance = 2) {
  // 计算数据的平均值
-  const mean = data.reduce((sum, value) => sum + (value || 0), 0) / data.length;
+  const mean = data.reduce((sum, value) => sum + value, 0) / data.length;
  // 计算数据的方差
-  const variance = data.reduce((sum, value) => sum + ((value || 0) - mean) ** 2, 0) / data.length;
+  const variance = data.reduce((sum, value) => sum + (value - mean) ** 2, 0) / data.length;
  // 计算标准差
  const stdDev = Math.sqrt(variance);
  // 计算阈值
  const threshold = tolerance * stdDev;
  // 过滤掉值为0的数据
-  const filteredData = data.filter((value) => value !== 0 && value !== null);
+  const filteredData = data.filter((value) => value !== 0);
  // 计算过滤后数据的最小值
  const min = Math.min(...filteredData);
  // 计算过滤后数据的最大值
--- a/src/views/composable/server-real-time.js
+++ b/src/views/composable/server-real-time.js
@ -255,44 +255,6 @@ export default (params) => {
          show: validate.isSet(netOutSpeed.value?.value),
        };
      case 'speeds':
-        return {
-          key,
-          label: '网速',
-          value: [
-            `${netInSpeed.value?.value}${netInSpeed.value?.unit}`,
-            `${netOutSpeed.value?.value}${netOutSpeed.value?.unit}`,
-          ].join('|'),
-          show: validate.isSet(netInSpeed.value?.value) && validate.isSet(netOutSpeed.value?.value),
-        };
-      case 'load':
-        return {
-          key,
-          label: '负载',
-          value: (props.info.State?.Load1 || 0).toFixed(2),
-          show: validate.isSet(props.info.State?.Load1),
-        };
-      case 'conns':
-        return {
-          key,
-          label: '连接',
-          value: `${props.info.State?.TcpConnCount || 0}|${props.info.State?.UdpConnCount || 0}`,
-          show: true,
-        };
-      case 'tcp':
-        return {
-          key,
-          label: 'TCP',
-          value: props.info.State?.TcpConnCount || 0,
-          show: validate.isSet(props.info.State?.TcpConnCount),
-        };
-      case 'udp':
-        return {
-          key,
-          label: 'UDP',
-          value: props.info.State?.UdpConnCount || 0,
-          show: validate.isSet(props.info.State?.UdpConnCount),
-        };
-      case 'I-A-O':
        return {
          key,
          label: '网速',
@ -314,68 +276,13 @@ export default (params) => {
          ],
          show: validate.isSet(netInSpeed.value?.value) && validate.isSet(netOutSpeed.value?.value),
        };
-      case 'L-A-P':
+      case 'load':
        return {
          key,
          label: '负载',
-          values: [
-            {
-              key: 'load',
-              label: '负载',
-              value: (props.info.State?.Load1 || 0).toFixed(2),
-              show: validate.isSet(props.info.State?.Load1),
-            },
-            {
-              key: 'process',
-              label: '进程',
-              value: props.info.State?.ProcessCount || 0,
-              show: validate.isSet(props.info.State?.ProcessCount),
-            },
-          ],
-          show: validate.isSet(props.info.State?.Load1) || validate.isSet(props.info.State?.ProcessCount),
-        };
-      case 'T-A-U':
-        return {
-          key,
-          label: '连接',
-          values: [
-            {
-              key: 'tcp',
-              label: 'TCP',
-              value: (props.info.State?.TcpConnCount || 0).toString().padEnd(3, ' '),
-              show: validate.isSet(props.info.State?.TcpConnCount),
-            },
-            {
-              key: 'udp',
-              label: 'UDP',
-              value: (props.info.State?.UdpConnCount || 0).toString().padEnd(3, ' '),
-              show: validate.isSet(props.info.State?.UdpConnCount),
-            },
-          ],
-          show: validate.isSet(props.info.State?.TcpConnCount) || validate.isSet(props.info.State?.UdpConnCount),
-        };
-      case 'D-A-T':
-        return {
-          key,
-          label: '统计',
-          values: [
-            {
-              key: 'duration',
-              label: '在线',
-              value: duration.value?.value,
-              unit: duration.value?.unit,
-              show: validate.isSet(duration.value?.value),
-            },
-            {
-              key: 'transfer',
-              label: '流量',
-              title: `${transfer.value.statTypeLabel}流量`,
-              value: transfer.value?.value,
-              unit: transfer.value?.unit,
-              show: validate.isSet(transfer.value?.value),
-            },
-          ],
-          show: validate.isSet(duration.value?.value) || validate.isSet(transfer.value?.value),
+          value: (props.info.State?.Load1 || 0).toFixed(2),
+          unit: '',
+          show: validate.isSet(props.info.State?.Load1),
        };
      default:
    }