From 68bc396ea5c417d4b6e3f9c872b9eb605f762263 Mon Sep 17 00:00:00 2001
From: hi2hi <code@hi2hi.cc>
Date: Wed, 18 Dec 2024 02:30:16 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=E6=9B=B4=E6=96=B0=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E5=99=A8=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F=E5=B9=B6?=
 =?UTF-8?q?=E4=B8=BA=E8=B4=AD=E4=B9=B0=E9=93=BE=E6=8E=A5=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=82=AC=E5=81=9C=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为样式中的购买链接添加了新的悬停颜色。
- 调整了服务器列表组件中各列的宽度。
- 从首页视图布局中移除了不必要的内边距。
- 修复了服务器列表项宽度属性中的拼写错误。
- 引入了字段宽度映射，以更好地控制实时项目的布局。
---
 src/assets/scss/variables.scss                           | 1 +
 .../components/server-list/row/server-list-column.vue    | 5 +----
 .../components/server-list/row/server-list-item-bill.vue | 7 ++++++-
 .../server-list/row/server-list-item-real-time.vue       | 9 +++++++++
 .../components/server-list/row/server-list-item.vue      | 3 ++-
 src/views/home.vue                                       | 1 -
 6 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
index 0e41c0b..28ff98a 100644
--- a/src/assets/scss/variables.scss
+++ b/src/assets/scss/variables.scss
@@ -25,6 +25,7 @@
 
   --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);
 
diff --git a/src/views/components/server-list/row/server-list-column.vue b/src/views/components/server-list/row/server-list-column.vue
index da7c19b..34460d9 100644
--- a/src/views/components/server-list/row/server-list-column.vue
+++ b/src/views/components/server-list/row/server-list-column.vue
@@ -79,7 +79,7 @@ const columnStyle = computed(() => {
 
 <style lang="scss" scoped>
 .list-column {
-  width: 50px;
+  width: 60px;
 
   .list-column-content {
     --list-column-label-height: 16px;
@@ -115,7 +115,6 @@ const columnStyle = computed(() => {
   }
 
   &--transfer {
-    width: 80px;
     .item-value {
       color: var(--transfer-color);
     }
@@ -146,14 +145,12 @@ const columnStyle = computed(() => {
   }
 
   &--remaining-time {
-    width: 60px;
     .value-text {
       color: #74dbef;
     }
   }
 
   &--billing {
-    width: 60px;
     .value-text {
       color: var(--list-item-price-color);
     }
diff --git a/src/views/components/server-list/row/server-list-item-bill.vue b/src/views/components/server-list/row/server-list-item-bill.vue
index 42f1340..d3afd3f 100644
--- a/src/views/components/server-list/row/server-list-item-bill.vue
+++ b/src/views/components/server-list/row/server-list-item-bill.vue
@@ -3,6 +3,7 @@
     v-if="extraFields?.remainingTime"
     prop="remaining-time"
     label="剩余"
+    :width="50"
     :value="billAndPlan?.remainingTime?.value || '-'"
   />
   <server-list-column
@@ -15,7 +16,7 @@
     v-if="extraFields?.orderLink"
     prop="order-link"
     label="链接"
-    wdith="80"
+    :wdith="80"
     :slot-content="true"
   >
     <span
@@ -76,5 +77,9 @@ function toBuy() {
 .order-link {
   color: var(--list-item-buy-link-color);
   cursor: pointer;
+
+  &:hover {
+    color: var(--list-item-buy-link-color-hover);
+  }
 }
 </style>
diff --git a/src/views/components/server-list/row/server-list-item-real-time.vue b/src/views/components/server-list/row/server-list-item-real-time.vue
index c20832d..40309b7 100644
--- a/src/views/components/server-list/row/server-list-item-real-time.vue
+++ b/src/views/components/server-list/row/server-list-item-real-time.vue
@@ -6,6 +6,7 @@
     :label="item.label"
     :value="item.show ? item?.value : '-'"
     :unit="item.show ? item?.unit : ''"
+    :width="fieldWidth[item.key]"
   />
 </template>
 
@@ -42,4 +43,12 @@ const {
   currentTime,
   serverRealTimeListTpls: props.serverRealTimeListTpls,
 });
+
+const fieldWidth = {
+  transfer: 80,
+  load: 40,
+  inSpeed: 40,
+  outSpeed: 40,
+};
+
 </script>
diff --git a/src/views/components/server-list/row/server-list-item.vue b/src/views/components/server-list/row/server-list-item.vue
index 3adee11..50d6d8f 100644
--- a/src/views/components/server-list/row/server-list-item.vue
+++ b/src/views/components/server-list/row/server-list-item.vue
@@ -31,6 +31,7 @@
         prop="server-flag"
         label="地区"
         :value="info?.Host?.CountryCode?.toUpperCase() || 'UN'"
+        :width="40"
       />
       <server-list-column
         prop="server-system"
@@ -165,7 +166,7 @@ function openDetail() {
     }
   }
   &--server-name {
-    width: 200px;
+    width: 220px;
 
     .server-name {
       height: 32px;
diff --git a/src/views/home.vue b/src/views/home.vue
index e45df8b..523e8f4 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -331,7 +331,6 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   gap: var(--list-gap-size);
-  // padding: 0 var(--list-padding);
   width: var(--list-container-width);
   margin: auto;
 }