🪄 优化表格的显示

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;
     }
   }
 }

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: {

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;
   }

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',
 }]);