feat: 添加多GPU的显示，支持GPU过滤；匹配更多的CPU产品型号；

public/config.js

@@ -1,7 +1,7 @@
 window.$$nazhuaConfig = {
   // title: '哪吒监控', // 网站标题
   // freeAmount: '白嫖', // 免费服务的费用名称
-  // infinityCycle: '无限', // 无限周期名称
+  // infinityCycle: '长期有效', // 无限周期名称
   // buyBtnText: '购买', // 购买按钮文案
   // listServerStatusType: 'progress', // 服务器状态类型--列表
   // detailServerStatusType: 'progress', // 服务器状态类型--详情页
@@ -18,6 +18,8 @@ window.$$nazhuaConfig = {
   // hideTag: false, // 隐藏标签
   // hideDotBG: true, // 隐藏框框里面的点点背景
   // monitorRefreshTime: 10, // 监控刷新时间间隔，单位s（秒）, 0为不刷新，为保证不频繁请求源站，最低生效值为10s
+  // filterWeirdGPU: true, // 过滤奇怪的GPU
+  // filterGPUKeywords: ['Virtual Display'], // 如果GPU名称中包含这些关键字，则过滤掉
   // customCodeMap: {}, // 自定义的地图点信息
   // nezhaVersion: 'v1', // 哪吒版本
   // apiMonitorPath: '/api/v1/monitor/{id}',

src/utils/host.js

@@ -45,11 +45,27 @@ export function getCPUInfo(text = '') {
   if (modelMatch) {
     [cpuInfo.model] = modelMatch;
   }
+  if (text.includes('Ryzen')) {
+    // 5900X 5950X 7900X 7950X 9900X 9950X
+    const modelNumReg = /Ryzen.*(\d{4}X)/;
+    const modelNumMatch = text.match(modelNumReg);
+    if (modelNumMatch) {
+      [, cpuInfo.modelNum] = modelNumMatch;
+    }
+  }
+  if (text.includes('EPYC')) {
+    // 7B13 7B13 9654...
+    const modelNumReg = /EPYC (\w{4})/;
+    const modelNumMatch = text.match(modelNumReg);
+    if (modelNumMatch) {
+      [, cpuInfo.modelNum] = modelNumMatch;
+    }
+  }
   // 匹配特定的CPU型号编号
   if (text.includes('Xeon')) {
-    if (text.includes('E-')) {
+    if (text.includes(' E')) {
       // Xeon型号
-      const modelNumReg = /(E\d-\S+)/;
+      const modelNumReg = /(E\d-\w+)/;
       const modelNumMatch = text.match(modelNumReg);
       if (modelNumMatch) {
         [, cpuInfo.modelNum] = modelNumMatch;
@@ -64,17 +80,29 @@ export function getCPUInfo(text = '') {
       }
     }
   }
-  if (text.includes('Ryzen')) {
+  if (text.includes('Core(TM)')) {
-    // 5900X 5950X 7900X 7950X 9900X 9950X
+    const modelNumReg = /Core\(TM\) (\w+-\w+)/;
-    const modelNumReg = /Ryzen.*(\d{4}X)/;
     const modelNumMatch = text.match(modelNumReg);
     if (modelNumMatch) {
       [, cpuInfo.modelNum] = modelNumMatch;
     }
   }
-  if (text.includes('EPYC')) {
+  if (text.includes('Celeron(R)')) {
-    // 7B13 7B13 9654...
+    const modelNumReg = /Celeron\(R\) (\w+)/;
-    const modelNumReg = /EPYC (\w{4})/;
+    const modelNumMatch = text.match(modelNumReg);
+    if (modelNumMatch) {
+      [, cpuInfo.modelNum] = modelNumMatch;
+    }
+  }
+  if (text.includes('Pentium(R)')) {
+    const modelNumReg = /Pentium\(R\) (\w+)/;
+    const modelNumMatch = text.match(modelNumReg);
+    if (modelNumMatch) {
+      [, cpuInfo.modelNum] = modelNumMatch;
+    }
+  }
+  if (text.includes('Intel(R) N')) {
+    const modelNumReg = /Intel\(R\) (N\d+)/;
     const modelNumMatch = text.match(modelNumReg);
     if (modelNumMatch) {
       [, cpuInfo.modelNum] = modelNumMatch;

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

@@ -5,28 +5,58 @@
         CPU
       </div>
       <div class="server-info-content">
-        <span
+        <template v-if="info?.Host?.CPU?.length === 1">
-          class="cpu-info"
+          <span
-          :title="info?.Host?.CPU?.[0]"
+            class="cpu-info"
+            :title="info.Host.CPU[0]"
+          >
+            <span>{{ info.Host.CPU[0] }}</span>
+          </span>
+        </template>
+        <div
+          v-else
+          class="server-info-item-group"
         >
-          <span>{{ info?.Host?.CPU?.[0] }}</span>
+          <span
-        </span>
+            v-for="(cpuItem, cpuIndex) in info.Host.CPU"
+            :key="`${info.ID}_cpu_${cpuIndex}`"
+            class="server-info-item"
+          >
+            <span class="server-info-item-label">CPU.{{ cpuIndex + 1 }}</span>
+            <span class="server-info-item-value">{{ cpuItem }}</span>
+          </span>
+        </div>
       </div>
     </div>
     <div
-      v-if="info?.Host?.GPU?.[0]"
+      v-if="gpuList.length"
       class="server-info-group server-info--gpu"
     >
       <div class="server-info-label">
         GPU
       </div>
       <div class="server-info-content">
-        <span
+        <template v-if="gpuList.length === 1">
-          class="cpu-info"
+          <span
-          :title="info?.Host?.GPU?.[0]"
+            class="gpu-info"
+            :title="gpuList[0]"
+          >
+            <span>{{ gpuList[0] }}</span>
+          </span>
+        </template>
+        <div
+          v-else
+          class="server-info-item-group"
         >
-          <span>{{ info?.Host?.GPU?.[0] }}</span>
+          <span
-        </span>
+            v-for="(gpuItem, gpuIndex) in gpuList"
+            :key="`${info.ID}_gpu_${gpuIndex}`"
+            class="server-info-item"
+          >
+            <span class="server-info-item-label">GPU.{{ gpuIndex + 1 }}</span>
+            <span class="server-info-item-value">{{ gpuItem }}</span>
+          </span>
+        </div>
       </div>
     </div>
     <div class="server-info-group server-info--system-os">
@@ -50,7 +80,7 @@
         占用
       </div>
       <div class="server-info-content">
-        <span class="server-info-item-group">
+        <div class="server-info-item-group">
           <span class="server-info-item process-count">
             <span class="server-info-item-label">进程数</span>
             <span class="server-info-item-value">{{ processCount }}</span>
@@ -58,10 +88,10 @@
           <span class="server-info-item load">
             <span class="server-info-item-label">负载</span>
             <span class="server-info-item-value">
-              {{ info?.State?.Load1 }},{{ info?.State?.Load5 }},{{ info?.State?.Load15 }}
+              {{ sysLoadInfo }}
             </span>
           </span>
-        </span>
+        </div>
       </div>
     </div>
     <div class="server-info-group server-info--transfer">
@@ -69,7 +99,7 @@
         流量
       </div>
       <div class="server-info-content">
-        <span class="server-info-item-group">
+        <div class="server-info-item-group">
           <span class="server-info-item transfer--in">
             <span class="server-info-item-label">入网</span>
             <span class="server-info-item-value">
@@ -84,7 +114,7 @@
               <span class="text-unit">{{ transfer?.out?.unit }}</span>
             </span>
           </span>
-        </span>
+        </div>
       </div>
     </div>
     <div class="server-info-group server-info--conn">
@@ -92,7 +122,7 @@
         连接
       </div>
       <div class="server-info-content">
-        <span class="server-info-item-group">
+        <div class="server-info-item-group">
           <span class="server-info-item conn--tcp">
             <span class="server-info-item-label">TCP</span>
             <span class="server-info-item-value">{{ tcpConnCount }}</span>
@@ -101,7 +131,7 @@
             <span class="server-info-item-label">UDP</span>
             <span class="server-info-item-value">{{ udpConnCount }}</span>
           </span>
-        </span>
+        </div>
       </div>
     </div>
     <div class="server-info-group server-info--boottime">
@@ -132,7 +162,7 @@
         套餐
       </div>
       <div class="server-info-content">
-        <span class="server-info-item-group">
+        <div class="server-info-item-group">
           <span
             v-for="item in billPlanData"
             :key="item.label"
@@ -144,7 +174,7 @@
             >{{ item.label }}</span>
             <span class="server-info-item-value">{{ item.value }}</span>
           </span>
-        </span>
+        </div>
       </div>
     </div>
     <div
@@ -213,6 +243,37 @@ function toBuy() {
   window.open(decodeUrl, '_blank');
 }
 
+/**
+ * GPU列表
+ */
+const gpuList = computed(() => {
+  const gpus = props.info?.Host?.GPU || [];
+  if (config.nazhua?.filterGPUKeywords?.length) {
+    // 过滤奇怪的GPU，可以考虑过滤掉 Virtual Display
+    const keywors = Array.isArray(config.nazhua.filterGPUKeywords)
+      ? config.nazhua.filterGPUKeywords
+      : [config.nazhua.filterGPUKeywords];
+    return gpus.filter((i) => {
+      if (keywors.length) {
+        return !keywors.some((k) => i.toLowerCase().includes(k.toLowerCase()));
+      }
+      return true;
+    });
+  }
+  return gpus;
+});
+
+const sysLoadInfo = computed(() => {
+  if (props.info?.State?.Load1) {
+    return [
+      props.info.State?.Load1,
+      props.info.State?.Load5,
+      props.info.State?.Load15,
+    ].filter((i) => i !== undefined).map((i) => (i).toFixed(2) * 1).join(',');
+  }
+  return '-';
+});
+
 const {
   billAndPlan,
 } = handleServerBillAndPlan({

src/views/composable/server-bill-and-plan.js

@@ -94,8 +94,8 @@ export default (params) => {
         const endTime = dayjs(endDate).valueOf();
         if (endDate.indexOf('0000-00-00') === 0) {
           obj.remainingTime = {
-            label: '有效期',
+            label: '剩余',
-            value: config.nazhua.infinityCycle || '无限',
+            value: config.nazhua.infinityCycle || '长期有效',
             type: 'infinity',
           };
         } else if (autoRenewal === '1') {

src/views/detail.vue

@@ -12,19 +12,19 @@
       :locations="locations"
     />
     <server-name
-      :key="info.ID"
+      :key="`${info.ID}_name`"
       :info="info"
     />
     <server-status-box
-      :key="info.ID"
+      :key="`${info.ID}_status`"
       :info="info"
     />
     <server-info-box
-      :key="info.ID"
+      :key="`${info.ID}_info`"
       :info="info"
     />
     <server-monitor
-      :key="info.ID"
+      :key="`${info.ID}_monitor`"
       :info="info"
     />
   </div>