✨ 更新服务器信息框，调整CPU和GPU显示逻辑，优化套餐信息展示

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

@@ -1,41 +1,8 @@
 <template>
   <div class="server-info-box">
-    <div
-      v-if="billPlanData.length"
-      class="server-info-group server-info--biil-plan"
-    >
-      <div class="server-info-label">
-        套餐
-      </div>
-      <div class="server-info-content">
-        <span class="server-info-item-group">
-          <span
-            v-for="item in billPlanData"
-            :key="item.label"
-            class="server-info-item"
-          >
-            <span
-              v-if="item.label"
-              class="server-info-item-label"
-            >{{ item.label }}</span>
-            <span class="server-info-item-value">{{ item.value }}</span>
-          </span>
-          <div
-            v-if="showBuyBtn"
-            class="buy-btn"
-            @click.stop="toBuy"
-          >
-            <span class="icon">
-              <span class="ri-shopping-bag-3-line" />
-            </span>
-            <span class="text">{{ buyBtnText }}</span>
-          </div>
-        </span>
-      </div>
-    </div>
     <div class="server-info-group server-info--cpu">
       <div class="server-info-label">
-        平台
+        CPU
       </div>
       <div class="server-info-content">
         <span
@@ -46,6 +13,22 @@
         </span>
       </div>
     </div>
+    <div
+      v-if="info?.Host?.GPU?.[0]"
+      class="server-info-group server-info--gpu"
+    >
+      <div class="server-info-label">
+        GPU
+      </div>
+      <div class="server-info-content">
+        <span
+          class="cpu-info"
+          :title="info?.Host?.GPU?.[0]"
+        >
+          <span>{{ info?.Host?.GPU?.[0] }}</span>
+        </span>
+      </div>
+    </div>
     <div class="server-info-group server-info--system-os">
       <div class="server-info-label">
         系统
@@ -154,6 +137,39 @@
         </div>
       </div>
     </div>
+    <div
+      v-if="billPlanData.length"
+      class="server-info-group server-info--biil-plan"
+    >
+      <div class="server-info-label">
+        套餐
+      </div>
+      <div class="server-info-content">
+        <span class="server-info-item-group">
+          <span
+            v-for="item in billPlanData"
+            :key="item.label"
+            class="server-info-item"
+          >
+            <span
+              v-if="item.label"
+              class="server-info-item-label"
+            >{{ item.label }}</span>
+            <span class="server-info-item-value">{{ item.value }}</span>
+          </span>
+          <div
+            v-if="showBuyBtn"
+            class="buy-btn"
+            @click.stop="toBuy"
+          >
+            <span class="icon">
+              <span class="ri-shopping-bag-3-line" />
+            </span>
+            <span class="text">{{ buyBtnText }}</span>
+          </div>
+        </span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -293,6 +309,8 @@ const processCount = computed(() => props.info?.State?.ProcessCount);
     font-size: 14px;
 
     .server-info-label {
+      width: 2.4em;
+      text-align: center;
       line-height: var(--server-info-item-size);
       color: #ccc;
     }