From 90884c27306c0f66666538eadde0d18e19cb674f Mon Sep 17 00:00:00 2001
From: hi2hi <code@hi2hi.cc>
Date: Tue, 9 Dec 2025 00:08:40 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=84=20=E4=BC=98=E5=8C=96=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../server-list-by-server-status/main.vue     | 30 +++++++++++++++++--
 .../server-status.js                          |  4 +--
 .../server-list-by-server-status/table/td.vue |  4 ++-
 src/views/home.vue                            |  8 ++---
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/views/components/server-list-by-server-status/main.vue b/src/views/components/server-list-by-server-status/main.vue
index f7f997e..961368a 100644
--- a/src/views/components/server-list-by-server-status/main.vue
+++ b/src/views/components/server-list-by-server-status/main.vue
@@ -34,10 +34,11 @@
           :key="itemData.info.ID"
           class="server-status-table-body-row"
           :class="{
-            'server-status-table-body-row--offline': itemData.info?.Online === -1,
-            'server-status-table-body-row--online': itemData.info?.Online === 1,
+            'server-status-table-body-row--offline': itemData.info?.online === -1,
+            'server-status-table-body-row--online': itemData.info?.online === 1,
             [`server-item--${itemData.info?.ID}`]: true,
           }"
+          @click="openDetail(itemData.info)"
         >
           <template
             v-for="column in itemData.columnData"
@@ -73,6 +74,9 @@
 import {
   computed,
 } from 'vue';
+import {
+  useRouter,
+} from 'vue-router';
 
 import config from '@/config';
 
@@ -90,11 +94,22 @@ const props = defineProps({
   },
 });
 
+const router = useRouter();
+
 const tableData = computed(() => {
   const result = handleServerListColumn(props.serverList, config.nazhua.serverStatusColumnsTpl);
   return result;
 });
 
+function openDetail(info) {
+  router.push({
+    name: 'ServerDetail',
+    params: {
+      serverId: info.ID,
+    },
+  });
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -114,8 +129,17 @@ const tableData = computed(() => {
   border-collapse: collapse;
 
   .server-status-table-body-row {
-    &--offline {
+    @media screen and (min-width: 1025px) {
+      cursor: pointer;
+      background-color: rgba(255, 255, 255, 0);
+      transition: background-color 500ms ease-in-out;
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+    &--offline td:not(.server-status-td--status) {
       filter: grayscale(1);
+      opacity: 0.75;
     }
   }
 }
diff --git a/src/views/components/server-list-by-server-status/server-status.js b/src/views/components/server-list-by-server-status/server-status.js
index fbe60b6..f3302a0 100644
--- a/src/views/components/server-list-by-server-status/server-status.js
+++ b/src/views/components/server-list-by-server-status/server-status.js
@@ -56,7 +56,7 @@ const COLUMN_MAP = Object.freeze({
   },
   speeds: {
     label: '网速',
-    width: 112,
+    width: 120,
     align: 'center',
   },
   inSpeed: {
@@ -71,7 +71,7 @@ const COLUMN_MAP = Object.freeze({
   },
   transfer: {
     label: '流量',
-    width: 112,
+    width: 120,
     align: 'center',
   },
   inTransfer: {
diff --git a/src/views/components/server-list-by-server-status/table/td.vue b/src/views/components/server-list-by-server-status/table/td.vue
index dc7eff6..2092c94 100644
--- a/src/views/components/server-list-by-server-status/table/td.vue
+++ b/src/views/components/server-list-by-server-status/table/td.vue
@@ -64,7 +64,9 @@ const getCssLengthUnit = (value) => {
 };
 
 const columnClass = computed(() => {
-  const className = {};
+  const className = {
+    [`server-status-td--${props.column.prop}`]: true,
+  };
   if (props.column.align) {
     className[`server-status-td--align-${props.column.align}`] = true;
   }
diff --git a/src/views/home.vue b/src/views/home.vue
index b3d6e00..6a1199b 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -162,9 +162,9 @@ const showListCard = computed(() => {
 const showListByServerStatus = computed(() => {
   if (windowWidth.value > 1024) {
     if (config.nazhua.listServerItemTypeToggle) {
-      return listType.value === 'status';
+      return listType.value === 'server-status';
     }
-    return config.nazhua.listServerItemType === 'status';
+    return config.nazhua.listServerItemType === 'server-status';
   }
   return false;
 });
@@ -248,9 +248,9 @@ const listTypeOptions = computed(() => [{
   value: 'row',
   icon: 'ri-list-view',
 }, {
-  key: 'status',
+  key: 'server-status',
   label: 'ServerStatus模式',
-  value: 'status',
+  value: 'server-status',
   icon: 'ri-server-line',
 }]);