🪄 重建组件路径

src/assets/scss/variables.scss

@@ -28,6 +28,10 @@
   --conn-udp-color: #2ca9e1;
   --load-color: #90f2ff;
   --process-color: #f5b199;
+  --cpu-text-color: #89c3eb;
+  --mem-text-color: #2ca9e1;
+  --disk-text-color: #90f2ff;
+  --swap-text-color: #f5b199;
 
   --list-item-price-color: #eee;
   --list-item-buy-link-color: #ffc300;

src/config/index.js

@@ -32,6 +32,9 @@ const config = reactive({
 if (config.nazhua.nezhaVersion) {
   config.init = true;
 }
+if (window.$$serverStatus) {
+  config.nazhua.listServerItemType = 'server-status';
+}
 
 function setColorMode() {
   if (config.nazhua.simpleColorMode) {
@@ -64,6 +67,9 @@ export function mergeNazhuaConfig(customConfig) {
   });
   replaceFavicon();
   setColorMode();
+  if (window.$$serverStatus) {
+    config.nazhua.listServerItemType = 'server-status';
+  }
 }
 // 暴露合并配置方法
 window.$mergeNazhuaConfig = mergeNazhuaConfig;

src/views/components/server-list/server-status/main.vue

@@ -1,6 +1,7 @@
 <template>
   <dot-dot-box
     v-if="tableData"
+    border-radius="6px"
     class="server-status"
   >
     <table class="server-status-table">
@@ -118,11 +119,6 @@ function openDetail(info) {
   --server-status-td-height: 32px;
 
   --progress-bar-height: 18px;
-
-  @media screen and (max-width: 350px) {
-    --progress-bar-height: 16px;
-    padding: 0 15px;
-  }
 }
 .server-status-table {
   width: 100%;

src/views/components/server-list/server-status/server-info/conns.vue

@@ -61,7 +61,7 @@ const udpConnCount = computed(() => {
   }
 
   .split-line {
-    width: 4px;
+    width: 6px;
     text-align: center;
   }
 }

src/views/components/server-list/server-status/server-info/net-speed.vue

@@ -67,7 +67,7 @@ const outSpeed = computed(() => {
   }
 
   .split-line {
-    width: 4px;
+    width: 6px;
     text-align: center;
   }
 }

src/views/components/server-list/server-status/server-info/transfer.vue

@@ -67,7 +67,7 @@ const transferOut = computed(() => {
   }
 
   .split-line {
-    width: 4px;
+    width: 6px;
     text-align: center;
   }
 }

src/views/components/server-list/server-status/server-status.js

@@ -12,12 +12,12 @@ import handleServerRealTime from '@/views/composable/server-real-time';
 import handleServerBillAndPlan from '@/views/composable/server-bill-and-plan';
 
 import ServerStatusProgress from '@/views/components/server/server-status-progress.vue';
-import StatusIcon from '@/views/components/server-list-by-server-status/server-info/status-icon.vue';
+import StatusIcon from '@/views/components/server-list/server-status/server-info/status-icon.vue';
-import SystemOS from '@/views/components/server-list-by-server-status/server-info/system-os.vue';
+import SystemOS from '@/views/components/server-list/server-status/server-info/system-os.vue';
-import Country from '@/views/components/server-list-by-server-status/server-info/country.vue';
+import Country from '@/views/components/server-list/server-status/server-info/country.vue';
-import NetSpeed from '@/views/components/server-list-by-server-status/server-info/net-speed.vue';
+import NetSpeed from '@/views/components/server-list/server-status/server-info/net-speed.vue';
-import Transfer from '@/views/components/server-list-by-server-status/server-info/transfer.vue';
+import Transfer from '@/views/components/server-list/server-status/server-info/transfer.vue';
-import Conns from '@/views/components/server-list-by-server-status/server-info/conns.vue';
+import Conns from '@/views/components/server-list/server-status/server-info/conns.vue';
 
 const COLUMN_MAP = Object.freeze({
   status: {
@@ -145,7 +145,7 @@ const COLUMN_MAP = Object.freeze({
   },
   billing: {
     label: '价格',
-    width: 110,
+    width: 100,
     align: 'right',
   },
   remainingTime: {
@@ -294,9 +294,8 @@ export const handleServerItemData = (params) => {
       };
     }
     case 'billing':
-    case 'remainingTime':
     {
-      const item = billAndPlan?.value?.[column.prop];
+      const item = billAndPlan?.value?.billing;
       const texts = [];
       if (item?.value) {
         texts.push(item.value || '-');
@@ -307,7 +306,17 @@ export const handleServerItemData = (params) => {
       return {
         prop: column.prop,
         type: 'text',
-        text: texts.join('/'),
+        text: texts.length ? texts.join('/') : '-',
+        originalData: params,
+      };
+    }
+    case 'remainingTime':
+    {
+      const item = billAndPlan?.value?.remainingTime;
+      return {
+        prop: column.prop,
+        type: 'text',
+        text: item?.value || '-',
         originalData: params,
       };
     }
@@ -400,7 +409,6 @@ export const handleServerListColumn = (serverList, columnTpls = DEFAULT_COLUMNS)
         showBilling = true;
       }
       if (billAndPlan?.value?.remainingTime) {
-        console.log('remainingTime', billAndPlan.value.remainingTime);
         showRemainingTime = true;
       }
     }

src/views/components/server-list/server-status/table/td.vue

@@ -160,29 +160,37 @@ function isSet(value) {
       }
     }
 
-    &--cpu {
+    &--cpuText {
       .text--value {
         color: var(--cpu-text-color);
       }
     }
 
-    &--mem {
+    &--memText {
       .text--value {
         color: var(--mem-text-color);
       }
     }
 
-    &--swap {
+    &--swapText {
       .text--value {
         color: var(--swap-text-color);
       }
     }
 
-    &--disk {
+    &--diskText {
       .text--value {
         color: var(--disk-text-color);
       }
     }
+
+    &--billing {
+      font-size: 12px;
+    }
+
+    &--remainingTime {
+      font-size: 12px;
+    }
   }
 }
 </style>

src/views/composable/server-real-time.js

@@ -128,7 +128,13 @@ export default (params) => {
       value: 0,
       unit: '',
     };
-    if (inStats.g > 1) {
+    if (inStats.p > 1) {
+      result.value = (inStats.p).toFixed(1) * 1;
+      result.unit = 'P';
+    } else if (inStats.t > 1) {
+      result.value = (inStats.t).toFixed(1) * 1;
+      result.unit = 'T';
+    } else if (inStats.g > 1) {
       result.value = (inStats.g).toFixed(1) * 1;
       result.unit = 'G';
     } else if (inStats.m > 1) {
@@ -147,7 +153,13 @@ export default (params) => {
       value: 0,
       unit: '',
     };
-    if (outStats.g > 1) {
+    if (outStats.p > 1) {
+      result.value = (outStats.p).toFixed(1) * 1;
+      result.unit = 'P';
+    } else if (outStats.t > 1) {
+      result.value = (outStats.t).toFixed(1) * 1;
+      result.unit = 'T';
+    } else if (outStats.g > 1) {
       result.value = (outStats.g).toFixed(1) * 1;
       result.unit = 'G';
     } else if (outStats.m > 1) {

src/views/home.vue

@@ -14,8 +14,9 @@
         v-if="showFilter"
         class="fitler-group"
         :class="{
-          'list-is-row': showListRow,
+          'list-is--row': showListRow,
-          'list-is-card': showListCard,
+          'list-is--card': showListCard,
+          'list-is--server-status': showListRowByServerStatus,
         }"
       >
         <div class="left-box">
@@ -54,11 +55,11 @@
       </server-list-warp>
       <!-- ServerStatus模式 -->
       <server-list-warp
-        v-if="showListByServerStatus"
+        v-if="showListRowByServerStatus"
         :show-transition="showTransition"
-        :show-list-by-server-status="showListByServerStatus"
+        :show-list-by-server-status="showListRowByServerStatus"
       >
-        <server-list-by-server-status
+        <server-status-main
           :server-list="filterServerList.list"
         />
       </server-list-warp>
@@ -121,7 +122,7 @@ import ServerOptionBox from './components/server-list/server-option-box.vue';
 import ServerListWarp from './components/server-list/server-list-warp.vue';
 import ServerCardItem from './components/server-list/card/server-list-item.vue';
 import ServerRowItem from './components/server-list/row/server-list-item.vue';
-import ServerListByServerStatus from './components/server-list-by-server-status/main.vue';
+import ServerStatusMain from './components/server-list/server-status/main.vue';
 
 const store = useStore();
 const worldMapWidth = ref();
@@ -150,6 +151,15 @@ const showListRow = computed(() => {
   }
   return false;
 });
+const showListRowByServerStatus = computed(() => {
+  if (windowWidth.value > 1024) {
+    if (config.nazhua.listServerItemTypeToggle) {
+      return listType.value === 'server-status';
+    }
+    return config.nazhua.listServerItemType === 'server-status';
+  }
+  return false;
+});
 const showListCard = computed(() => {
   if (windowWidth.value > 1024) {
     if (config.nazhua.listServerItemTypeToggle) {
@@ -159,15 +169,6 @@ const showListCard = computed(() => {
   }
   return true;
 });
-const showListByServerStatus = computed(() => {
-  if (windowWidth.value > 1024) {
-    if (config.nazhua.listServerItemTypeToggle) {
-      return listType.value === 'server-status';
-    }
-    return config.nazhua.listServerItemType === 'server-status';
-  }
-  return false;
-});
 
 const showFilter = computed(() => config.nazhua.hideFilter !== true);
 const filterFormData = ref({