package.json

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

src/assets/scss/variables.scss

@@ -25,9 +25,8 @@
 
   --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: #6a7efc;
-  --public-note-tag-bg: linear-gradient(125deg, #8f94fb, #4e54c8);
 
   // 针对1440px以下的屏幕
   @media screen and (max-width: 1440px) {

src/components/charts/line.js

@@ -78,7 +78,7 @@ export default (
       id: 'dataZoomX',
       type: 'slider',
       xAxisIndex: [0],
-      filterMode: 'filter',
+      filterMode: 'none',
     }],
     yAxis: {
       type: 'value',

src/router/index.js

@@ -4,7 +4,6 @@ import {
   createWebHashHistory,
 } from 'vue-router';
 import config from '@/config';
-import pageTitle from '@/utils/page-title';
 
 const constantRoutes = [{
   name: 'Home',
@@ -36,7 +35,7 @@ const routerOptions = {
 const router = createRouter(routerOptions);
 
 router.beforeResolve((to, from, next) => {
-  pageTitle(to?.meta?.title);
+  document.title = [to?.meta?.title, config.nazhua.title].filter((i) => i).join(' - ');
   next();
 });
 

src/store/index.js

@@ -18,7 +18,6 @@ import {
 
 const defaultState = () => ({
   init: false,
-  serverTime: 0,
   serverGroup: [],
   serverList: [],
   serverCount: {
@@ -51,9 +50,6 @@ let firstSetServers = true;
 const store = createStore({
   state: defaultState(),
   mutations: {
-    SET_SERVER_TIME(state, time) {
-      state.serverTime = time;
-    },
     SET_SERVER_GROUP(state, serverGroup) {
       state.serverGroup = serverGroup;
     },
@@ -157,9 +153,6 @@ const store = createStore({
     }) {
       msg.on('servers', (res) => {
         if (res) {
-          if (res.now) {
-            commit('SET_SERVER_TIME', res.now);
-          }
           const servers = res.servers?.map?.((i) => {
             const item = {
               ...i,

src/utils/page-title.js

@@ -1,5 +0,0 @@
-import config from '@/config';
-
-export default (...args) => {
-  document.title = [...args, config.nazhua.title].filter((i) => i).join(' - ');
-};

src/views/components/server-detail/server-info-box.vue

@@ -595,8 +595,7 @@ const processCount = computed(() => props.info?.State?.ProcessCount);
       line-height: 20px;
       font-size: 12px;
       color: var(--public-note-tag-color);
-      background: var(--public-note-tag-bg);
+      background-color: var(--public-note-tag-bg);
-      text-shadow: 1px 1px 2px rgba(#000, 0.2);
       border-radius: 4px;
     }
   }

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

@@ -16,7 +16,6 @@
           title="是否自动刷新"
           @click="switchRefresh"
         >
-          <span class="label-text">刷新</span>
           <div
             class="switch-box"
             :class="{
@@ -25,13 +24,13 @@
           >
             <span class="switch-dot" />
           </div>
+          <span class="label-text">刷新</span>
         </div>
         <div
           class="peak-shaving-group"
           title="过滤太高或太低的数据"
           @click="switchPeakShaving"
         >
-          <span class="label-text">削峰</span>
           <div
             class="switch-box"
             :class="{
@@ -40,28 +39,7 @@
           >
             <span class="switch-dot" />
           </div>
-        </div>
+          <span class="label-text">削峰</span>
-        <div class="last-update-time-group">
-          <span class="last-update-time-label">
-            最近
-          </span>
-          <div class="minutes">
-            <div
-              v-for="minuteItem in minutes"
-              :key="minuteItem.value"
-              class="minute-item"
-              :class="{
-                active: minuteItem.value === minute,
-              }"
-              @click="toggleMinute(minuteItem.value)"
-            >
-              <span>{{ minuteItem.label }}</span>
-            </div>
-            <div
-              class="active-arrow"
-              :style="minuteActiveArrowStyle"
-            />
-          </div>
         </div>
       </div>
     </div>
@@ -119,7 +97,6 @@ import {
   onMounted,
   onUnmounted,
 } from 'vue';
-import { useStore } from 'vuex';
 import config from '@/config';
 import request from '@/utils/request';
 import validate from '@/utils/validate';
@@ -138,46 +115,12 @@ const props = defineProps({
   },
 });
 
-const store = useStore();
-
-const minute = ref(1440);
-const minutes = [{
-  label: '30分钟',
-  value: 30,
-}, {
-  label: '1小时',
-  value: 60,
-}, {
-  label: '3小时',
-  value: 180,
-}, {
-  label: '6小时',
-  value: 360,
-}, {
-  label: '12小时',
-  value: 720,
-}, {
-  label: '24小时',
-  value: 1440,
-}];
 const refreshData = ref(true);
 const peakShaving = ref(false);
 const showCates = ref({});
 
 const monitorData = ref([]);
 
-const accpetShowTime = computed(() => {
-  const now = store.state.serverTime || Date.now();
-  return now - (minute.value * 60 * 1000);
-});
-
-const minuteActiveArrowStyle = computed(() => {
-  const index = minutes.findIndex((i) => i.value === minute.value);
-  return {
-    left: `calc(${index} * var(--minute-item-width))`,
-  };
-});
-
 const monitorChartData = computed(() => {
   /**
    * 处理监控数据以生成分类的平均延迟随时间变化的列表。
@@ -206,25 +149,17 @@ const monitorChartData = computed(() => {
         avgs: [],
       };
     }
-    const showAvgDelay = [];
-    const showCreateTime = i.created_at.filter((o, index) => {
-      const status = o >= accpetShowTime.value;
-      if (status) {
-        showAvgDelay.push(i.avg_delay[index]);
-      }
-      return status;
-    });
     const {
       threshold,
       mean,
       max,
       min,
-    } = peakShaving.value ? getThreshold(showAvgDelay, 2) : {};
+    } = peakShaving.value ? getThreshold(i.avg_delay, 2) : {};
-    showCreateTime.forEach((o, index) => {
+    i.created_at.forEach((o, index) => {
       if (dateMap[o]) {
         return;
       }
-      const avgDelay = showAvgDelay[index];
+      const avgDelay = i.avg_delay[index];
       if (peakShaving.value) {
         if (avgDelay === 0) {
           return;
@@ -255,26 +190,22 @@ const monitorChartData = computed(() => {
       if (!validate.hasOwn(showCates.value, id)) {
         showCates.value[id] = true;
       }
-      // 计算平均延迟和成功率
-      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).length / avgs.length;
       const cateItem = {
         id,
         name: i,
         color,
-        avg: avg.toFixed(2) * 1,
+        avg: (avgs.reduce((a, b) => a + b[1], 0) / avgs.length).toFixed(2) * 1,
-        over: (over * 100).toFixed(2) * 1,
+        over: ((avgs.filter((o) => o[1] > 0).length / avgs.length) * 100).toFixed(2) * 1,
       };
       if (Number.isNaN(cateItem.avg)) {
         cateItem.avg = 0;
       }
       const titles = [
         cateItem.name,
-        cateItem.avg === 0 ? '' : `平均延迟：${cateItem.avg}ms`,
+        `平均延迟：${cateItem.avg}ms`,
-        `成功率：${cateItem.over}%`,
+        `执行成功：${cateItem.over}%`,
       ];
-      cateItem.title = titles.filter((s) => s).join('\n');
+      cateItem.title = titles.join('\n');
       cateList.push(cateItem);
       valueList.push({
         id,
@@ -307,10 +238,6 @@ function switchRefresh() {
   refreshData.value = !refreshData.value;
 }
 
-function toggleMinute(value) {
-  minute.value = value;
-}
-
 function toggleShowCate(id) {
   showCates.value[id] = !showCates.value[id];
 }
@@ -372,14 +299,12 @@ onUnmounted(() => {
 
 .module-head-group {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
+  height: 30px;
 
   .module-title {
-    width: max-content;
-    height: 30px;
     line-height: 30px;
     font-size: 16px;
     color: #eee;
@@ -387,16 +312,15 @@ onUnmounted(() => {
 
   .right-box {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    gap: 12px;
+    gap: 10px;
   }
 
   .peak-shaving-group,
   .refresh-data-group {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 6px;
     cursor: pointer;
 
     @media screen and (max-width: 1024px) {
@@ -427,7 +351,6 @@ onUnmounted(() => {
 
         .switch-dot {
           left: 16px;
-          box-shadow: 1px 1px 2px #000;
         }
       }
     }
@@ -437,83 +360,6 @@ onUnmounted(() => {
       font-size: 12px;
     }
   }
-
-  .last-update-time-group {
-    --minute-item-width: 50px;
-    --minute-item-height: 20px;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    .last-update-time-label {
-      color: #ddd;
-      height: var(--minute-item-height);
-      line-height: var(--minute-item-height);
-      font-size: 12px;
-    }
-
-    @media screen and (max-width: 660px) {
-      --minute-item-width: 46px;
-    }
-
-    @media screen and (max-width: 600px) {
-      --minute-item-width: 46px;
-    }
-
-    @media screen and (max-width: 400px) {
-      .last-update-time-label {
-        display: none;
-      }
-    }
-
-    @media screen and (max-width: 330px) {
-      margin-left: -12px;
-    }
-
-    @media screen and (max-width: 320px) {
-      margin-left: -18px;
-    }
-  }
-  .minutes {
-    position: relative;
-    display: flex;
-    align-items: center;
-    // padding: 0 10px;
-    height: var(--minute-item-height);
-    background: rgba(#fff, 0.2);
-    border-radius: calc(var(--minute-item-height) / 2);
-
-    .minute-item {
-      position: relative;
-      z-index: 10;
-      width: var(--minute-item-width);
-      height: var(--minute-item-height);
-      line-height: var(--minute-item-height);
-      font-size: 12px;
-      text-align: center;
-      cursor: pointer;
-      color: #aaa;
-      transition: color 0.3s;
-
-      &.active {
-        color: #fff;
-        text-shadow: 1px 1px 2px #000;
-      }
-    }
-
-    .active-arrow {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: var(--minute-item-width);
-      height: var(--minute-item-height);
-      border-radius: calc(var(--minute-item-height) / 2);
-      background: #4caf50;
-      // opacity: 0.5;
-      transition: left 0.3s;
-      z-index: 1;
-    }
-  }
 }
 
 .monitor-cate-group {

src/views/components/server-list/server-list-item-bill.vue

@@ -109,8 +109,7 @@ const tagList = computed(() => {
   if (props?.info?.PublicNote?.planDataMod?.extra) {
     list.push(...props.info.PublicNote.planDataMod.extra.split(','));
   }
-  // 列表最多显示5个标签
+  return list;
-  return list.slice(0, 5);
 });
 
 const show = computed(() => {
@@ -187,8 +186,7 @@ const show = computed(() => {
       line-height: 20px;
       font-size: 12px;
       color: var(--public-note-tag-color);
-      background: var(--public-note-tag-bg);
+      background-color: var(--public-note-tag-bg);
-      text-shadow: 1px 1px 2px rgba(#000, 0.2);
       border-radius: 4px;
     }
   }

src/views/composable/server-monitor.js

@@ -33,74 +33,19 @@ export function getThreshold(data, tolerance = 2) {
   };
 }
 
-/**
+const lineNameColorMap = {};
- * - 处理相对固定折线的颜色
+const lineColorNameMap = {};
- */
-const lineColorMap = {};
-const lineColors = [];
 
-/**
+export function getLineColor(name) {
- * 将十六进制颜色转换为 RGB 数组
+  if (lineNameColorMap[name]) {
- * @param {string} hex - 十六进制颜色字符串
+    return lineNameColorMap[name];
- * @returns {number[]} 返回包含 RGB 数组的对象
- */
-function hexToRgb(hex) {
-  // 去掉可能的前缀 "#"
-  hex = hex.replace(/^#/, '');
-  // 将字符串拆分为 r, g, b 三个部分
-  const bigint = parseInt(hex, 16);
-  const r = Math.floor(bigint / (256 * 256)) % 256;
-  const g = Math.floor(bigint / 256) % 256;
-  const b = bigint % 256;
-  return [r, g, b];
   }
-
-/**
- * 计算两个 RGB 颜色之间的距离
- * @param {number[]} color1 - 第一个颜色的 RGB 数组
- * @param {number[]} color2 - 第二个颜色的 RGB 数组
- * @returns {number} 返回两个颜色之间的距离
- */
-function rgbDistance(color1, color2) {
-  const [r1, g1, b1] = color1;
-  const [r2, g2, b2] = color2;
-  return Math.abs(r1 - r2) + Math.abs(g1 - g2) + Math.abs(b1 - b2);
-}
-
-/**
- * 获取一个随机颜色
- * @returns {string} 返回一个随机颜色的字符串
- */
-function getColor() {
   const { color } = uniqolor.random({
     saturation: [75, 90],
     lightness: [65, 70],
     differencePoint: 100,
   });
-  if (lineColors.includes(color)) {
+  lineNameColorMap[name] = color;
-    return getColor();
+  lineColorNameMap[color] = name;
-  }
-  if (lineColors.some((i) => rgbDistance(
-    hexToRgb(i),
-    hexToRgb(color),
-  ) < 80)) {
-    return getColor();
-  }
-  return color;
-}
-
-/**
- * 获取线的颜色
- * @param {string} name - 线的名称
- * @returns {string} 返回线的颜色
- */
-export function getLineColor(name) {
-  // 如果已经有了对应的颜色，直接返回
-  if (lineColorMap[name]) {
-    return lineColorMap[name];
-  }
-  const color = getColor();
-  lineColorMap[name] = color;
-  lineColors.push(color);
   return color;
 }

src/views/detail.vue

@@ -54,7 +54,6 @@ import {
   alias2code,
   locationCode2Info,
 } from '@/utils/world-map';
-import pageTitle from '@/utils/page-title';
 
 import WorldMap from '@/components/world-map/world-map.vue';
 import ServerName from './components/server-detail/server-name.vue';
@@ -132,7 +131,6 @@ function handleWorldMapWidth() {
 
 watch(() => info.value, () => {
   if (info.value) {
-    pageTitle(info.value?.Name, '节点详情');
     handleWorldMapWidth();
   }
 });
@@ -147,7 +145,6 @@ watch(() => dataInit.value, () => {
 
 onMounted(() => {
   if (info.value) {
-    pageTitle(info.value?.Name, '节点详情');
     handleWorldMapWidth();
   }
   window.addEventListener('resize', handleWorldMapWidth);