✨ ServerStatus风格的表格模式

public/config.js

@@ -11,7 +11,8 @@ window.$$nazhuaConfig = {
   // showLantern: true, // 是否显示灯笼
   enableInnerSearch: true, // 启用内部搜索
   // listServerItemTypeToggle: true, // 服务器列表项类型切换
-  // listServerItemType: 'row', // 服务器列表项类型 card/row row列表模式移动端自动切换至card
+  listServerItemType: 'row', // 服务器列表项类型 card/row/status row列表模式移动端自动切换至card
+  // serverStatusColumnsTpl: null, // 服务器状态列配置模板
   // listServerStatusType: 'progress', // 服务器状态类型--列表
   // listServerRealTimeShowLoad: true, // 列表显示服务器实时负载
   // detailServerStatusType: 'progress', // 服务器状态类型--详情页

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

@@ -0,0 +1,122 @@
+<template>
+  <dot-dot-box
+    v-if="tableData"
+    class="server-status"
+  >
+    <table class="server-status-table">
+      <thead class="server-status-table-header">
+        <tr class="server-status-table-header-row">
+          <template
+            v-for="column in tableData.columnProps"
+            :key="`th_${column.prop}`"
+          >
+            <template v-if="['billing', 'remainingTime'].includes(column.prop)">
+              <server-status-th
+                v-if="tableData.showBilling && column.prop === 'billing'"
+                :column="column"
+              />
+              <server-status-th
+                v-if="tableData.showRemainingTime && column.prop === 'remainingTime'"
+                :column="column"
+              />
+            </template>
+            <template v-else>
+              <server-status-th
+                :column="column"
+              />
+            </template>
+          </template>
+        </tr>
+      </thead>
+      <tbody class="server-status-table-body">
+        <tr
+          v-for="itemData in tableData.list"
+          :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-item--${itemData.info?.ID}`]: true,
+          }"
+        >
+          <template
+            v-for="column in itemData.columnData"
+            :key="`td_${itemData.info?.ID}_${column.prop}`"
+          >
+            <template v-if="['billing', 'remainingTime'].includes(column.prop)">
+              <server-status-td
+                v-if="tableData.showBilling && column.prop === 'billing'"
+                :column="column"
+              />
+              <server-status-td
+                v-if="tableData.showRemainingTime && column.prop === 'remainingTime'"
+                :column="column"
+              />
+            </template>
+            <template v-else>
+              <server-status-td
+                :column="column"
+              />
+            </template>
+          </template>
+        </tr>
+      </tbody>
+    </table>
+  </dot-dot-box>
+</template>
+
+<script setup>
+/**
+ * ServerStatus风格的列表
+ */
+
+import {
+  computed,
+} from 'vue';
+
+import config from '@/config';
+
+import {
+  handleServerListColumn,
+} from './server-status';
+
+import ServerStatusTh from './table/th.vue';
+import ServerStatusTd from './table/td.vue';
+
+const props = defineProps({
+  serverList: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const tableData = computed(() => {
+  const result = handleServerListColumn(props.serverList, config.nazhua.serverStatusColumnsTpl);
+  return result;
+});
+
+</script>
+
+<style lang="scss" scoped>
+.server-status {
+  --server-status-cell-padding: 0 5px;
+  --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%;
+  border-collapse: collapse;
+
+  .server-status-table-body-row {
+    &--offline {
+      filter: grayscale(1);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="conn-group">
+    <div class="conn--tcp">
+      {{ tcpConnCount }}
+    </div>
+    <div class="split-line">
+      |
+    </div>
+    <div class="conn--udp">
+      {{ udpConnCount }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 连接信息
+ */
+
+import {
+  computed,
+} from 'vue';
+
+const props = defineProps({
+  realTimeData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const tcpConnCount = computed(() => {
+  const { item } = props.realTimeData?.conns || {};
+  const { value } = item?.data?.tcp || {};
+  return value || '-';
+});
+const udpConnCount = computed(() => {
+  const { item } = props.realTimeData?.conns || {};
+  const { value } = item?.data?.udp || {};
+  return value || '-';
+});
+
+</script>
+
+<style lang="scss" scoped>
+.conn-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 5px;
+  width: 100%;
+  .conn--tcp {
+    flex: 1;
+    text-align: right;
+    color: var(--conn-tcp-color);
+  }
+
+  .conn--udp {
+    flex: 1;
+    text-align: left;
+    color: var(--conn-udp-color);
+  }
+
+  .split-line {
+    width: 4px;
+    text-align: center;
+  }
+}
+</style>

src/views/components/server-list-by-server-status/server-info/country.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="country-content">
+    <server-flag :info="info" />
+    <span class="country-label">
+      {{ countryLabel }}
+    </span>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 地区信息
+ */
+
+import {
+  computed,
+} from 'vue';
+
+const props = defineProps({
+  info: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const countryLabel = computed(() => props.info?.Host?.CountryCode?.toUpperCase() || 'UN');
+</script>
+
+<style lang="scss" scoped>
+.country-content {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+  <div class="net-speed-group">
+    <div class="net-speed--in">
+      {{ inSpeed }}
+    </div>
+    <div class="split-line">
+      |
+    </div>
+    <div class="net-speed--out">
+      {{ outSpeed }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 网速信息
+ */
+
+import {
+  computed,
+} from 'vue';
+
+const props = defineProps({
+  realTimeData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const inSpeed = computed(() => {
+  const { item } = props.realTimeData?.speeds || {};
+  if (item?.data?.in) {
+    const { value, unit } = item.data.in;
+    return `${value}${unit}`;
+  }
+  return '-';
+});
+const outSpeed = computed(() => {
+  const { item } = props.realTimeData?.speeds || {};
+  if (item?.data?.out) {
+    const { value, unit } = item.data.out;
+    return `${value}${unit}`;
+  }
+  return '-';
+});
+
+</script>
+
+<style lang="scss" scoped>
+.net-speed-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 5px;
+  width: 100%;
+  .net-speed--in {
+    flex: 1;
+    text-align: right;
+    color: var(--net-speed-in-color);
+  }
+
+  .net-speed--out {
+    flex: 1;
+    text-align: left;
+    color: var(--net-speed-out-color);
+  }
+
+  .split-line {
+    width: 4px;
+    text-align: center;
+  }
+}
+</style>

src/views/components/server-list-by-server-status/server-info/status-icon.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="status-icon-box">
+    <div
+      class="status-icon"
+      :class="{
+        online: info.online === 1,
+        offline: info.online === -1,
+      }"
+    />
+  </div>
+</template>
+
+<script setup>
+/**
+ * 状态图标
+ */
+defineProps({
+  info: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.status-icon-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-icon {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.status-icon.online {
+  background-image: linear-gradient(rgba(77, 133, 58, 1) 0, rgba(54, 126, 54, 1) 100%);
+}
+
+.status-icon.offline {
+  background-image: linear-gradient(rgba(155, 37, 34, 1) 0, rgba(161, 38, 35, 1) 100%);
+}
+</style>

src/views/components/server-list-by-server-status/server-info/system-os.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="system-os-content">
+    <span class="system-icon">
+      <span :class="platformLogoIconClassName" />
+    </span>
+    <span class="system-label">
+      {{ systemOSLabel }}
+    </span>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 系统信息
+ */
+
+import {
+  computed,
+} from 'vue';
+import * as hostUtils from '@/utils/host';
+
+const props = defineProps({
+  info: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const platformLogoIconClassName = computed(() => hostUtils.getPlatformLogoIconClassName(props.info?.Host?.Platform));
+const systemOSLabel = computed(() => hostUtils.getSystemOSLabel(props.info?.Host?.Platform, true));
+</script>
+
+<style lang="scss" scoped>
+.system-os-content {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+  <div class="transfer-group">
+    <div class="transfer--in">
+      {{ transferIn }}
+    </div>
+    <div class="split-line">
+      |
+    </div>
+    <div class="transfer--out">
+      {{ transferOut }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 流量信息
+ */
+
+import {
+  computed,
+} from 'vue';
+
+const props = defineProps({
+  realTimeData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const transferIn = computed(() => {
+  const { item } = props.realTimeData?.transfer || {};
+  if (item?.data?.in) {
+    const { value, unit } = item.data.in;
+    return `${value}${unit}`;
+  }
+  return '-';
+});
+const transferOut = computed(() => {
+  const { item } = props.realTimeData?.transfer || {};
+  if (item?.data?.out) {
+    const { value, unit } = item.data.out;
+    return `${value}${unit}`;
+  }
+  return '-';
+});
+
+</script>
+
+<style lang="scss" scoped>
+.transfer-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 5px;
+  width: 100%;
+  .transfer--in {
+    flex: 1;
+    text-align: right;
+    color: var(--transfer-in-color);
+  }
+
+  .transfer--out {
+    flex: 1;
+    text-align: left;
+    color: var(--transfer-out-color);
+  }
+
+  .split-line {
+    width: 4px;
+    text-align: center;
+  }
+}
+</style>

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

@@ -0,0 +1,438 @@
+/**
+ * ServerStatus风格的列表列配置
+ */
+import {
+  h,
+} from 'vue';
+
+// import * as hostUtils from '@/utils/host';
+import handleServerStatus from '@/views/composable/server-status';
+import handleServerInfo from '@/views/composable/server-info';
+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 SystemOS from '@/views/components/server-list-by-server-status/server-info/system-os.vue';
+import Country from '@/views/components/server-list-by-server-status/server-info/country.vue';
+import NetSpeed from '@/views/components/server-list-by-server-status/server-info/net-speed.vue';
+import Transfer from '@/views/components/server-list-by-server-status/server-info/transfer.vue';
+import Conns from '@/views/components/server-list-by-server-status/server-info/conns.vue';
+
+const COLUMN_MAP = Object.freeze({
+  status: {
+    label: '状态',
+    width: 40,
+  },
+  name: {
+    label: '名称',
+    minWidth: 100,
+    align: 'left',
+  },
+  config: {
+    label: '规格',
+    width: 80,
+    align: 'left',
+  },
+  system: {
+    label: '系统',
+    width: 90,
+    align: 'left',
+  },
+  country: {
+    label: '地区',
+    width: 60,
+    align: 'left',
+  },
+  duration: {
+    label: '在线',
+    width: 60,
+    align: 'left',
+  },
+  load: {
+    label: '负载',
+    width: 45,
+    align: 'center',
+  },
+  speeds: {
+    label: '网速',
+    width: 112,
+    align: 'center',
+  },
+  inSpeed: {
+    label: '入网',
+    width: 60,
+    align: 'left',
+  },
+  outSpeed: {
+    label: '出网',
+    width: 60,
+    align: 'left',
+  },
+  transfer: {
+    label: '流量',
+    width: 112,
+    align: 'center',
+  },
+  inTransfer: {
+    label: '入网流量',
+    width: 60,
+    align: 'left',
+  },
+  outTransfer: {
+    label: '出网流量',
+    width: 60,
+    align: 'left',
+  },
+  conns: {
+    label: '连接',
+    width: 72,
+    align: 'center',
+  },
+  tcp: {
+    label: 'TCP',
+    width: 40,
+    align: 'left',
+  },
+  udp: {
+    label: 'UDP',
+    width: 40,
+    align: 'left',
+  },
+  cpu: {
+    label: 'CPU',
+    width: 80,
+    align: 'center',
+  },
+  cpuText: {
+    valProp: 'cpu',
+    label: 'CPU',
+    width: 40,
+    align: 'center',
+  },
+  mem: {
+    label: '内存',
+    width: 80,
+    align: 'center',
+  },
+  memText: {
+    valProp: 'mem',
+    label: '内存',
+    width: 40,
+    align: 'center',
+  },
+  swap: {
+    label: '交换',
+    width: 80,
+    align: 'center',
+  },
+  swapText: {
+    valProp: 'swap',
+    label: '交换',
+    width: 40,
+    align: 'center',
+  },
+  disk: {
+    label: '硬盘',
+    width: 80,
+    align: 'center',
+  },
+  diskText: {
+    valProp: 'disk',
+    label: '硬盘',
+    width: 40,
+    align: 'center',
+  },
+  billing: {
+    label: '价格',
+    width: 110,
+    align: 'right',
+  },
+  remainingTime: {
+    label: '剩余',
+    width: 70,
+    align: 'right',
+  },
+});
+
+/**
+ * 默认列配置
+ */
+// eslint-disable-next-line max-len, vue/max-len
+const DEFAULT_COLUMNS = 'status,name,country,system,config,duration,speeds,transfer,conns,load,cpuText,memText,diskText,billing,remainingTime';
+
+/**
+ * 需要实时更新的数据
+ */
+const RELD_TIME_DATA = [
+  'speeds', 'inSpeed', 'outSpeed',
+  'transfer', 'inTransfer', 'outTransfer',
+  'conns', 'tcp', 'udp',
+  'duration', 'load',
+];
+
+/**
+ * 获取列配置
+ * @param {string} columnsTpls 列配置模板
+ * @returns {Object} 列配置
+ * @property {Array} columns 列配置
+ */
+export const getColumnPropsConfig = (tpls = DEFAULT_COLUMNS) => {
+  const tplList = tpls.split(',');
+  const columnList = [];
+  tplList.forEach((tpl) => {
+    if (COLUMN_MAP[tpl]) {
+      columnList.push({
+        prop: tpl,
+        ...COLUMN_MAP[tpl],
+      });
+    }
+  });
+  return columnList;
+};
+
+/**
+ * 将服务器数据转换为表格数据
+ * @param {Object} server 服务器数据
+ * @returns {Object} 表格数据
+ */
+export const handleServerItemData = (params) => {
+  const {
+    column,
+    server,
+    realTimeData,
+    progressData,
+    billAndPlan,
+  } = params || {};
+  switch (column.prop) {
+    case 'status':
+      return {
+        type: 'component',
+        component: h(StatusIcon, { info: server }),
+        originalData: params,
+      };
+    case 'name':
+      return {
+        type: 'text',
+        value: server.Name,
+        originalData: params,
+      };
+    case 'config':
+    {
+      const { cpuAndMemAndDisk } = handleServerInfo({
+        props: {
+          info: server,
+        },
+        originalData: params,
+      });
+      return {
+        type: 'text',
+        value: cpuAndMemAndDisk,
+        originalData: params,
+      };
+    }
+    case 'system':
+      return {
+        type: 'component',
+        component: h(SystemOS, { info: server }),
+        originalData: params,
+      };
+    case 'country':
+      return {
+        type: 'component',
+        component: h(Country, { info: server }),
+        originalData: params,
+      };
+    case 'speeds':
+      return {
+        type: 'component',
+        component: h(NetSpeed, { realTimeData }),
+        originalData: params,
+      };
+    case 'transfer':
+      return {
+        type: 'component',
+        component: h(Transfer, { realTimeData }),
+        originalData: params,
+      };
+    case 'conns':
+      return {
+        type: 'component',
+        component: h(Conns, { realTimeData }),
+        originalData: params,
+      };
+    case 'cpu':
+    case 'mem':
+    case 'disk':
+    case 'swap':
+    {
+      const progressItem = progressData[column.prop];
+      return {
+        type: 'component',
+        component: h(ServerStatusProgress, {
+          type: column.prop,
+          used: progressItem?.used || 0,
+          colors: progressItem?.colors || {},
+          valText: progressItem?.valPercent || '',
+        }),
+        originalData: params,
+      };
+    }
+    case 'cpuText':
+    case 'memText':
+    case 'diskText':
+    case 'swapText':
+    {
+      const progressItem = progressData[column.valProp];
+      return {
+        prop: column.prop,
+        type: 'text',
+        value: parseFloat(progressItem?.used || 0).toFixed(1),
+        unit: '%',
+        text: progressItem?.valPercent || '',
+        originalData: params,
+      };
+    }
+    case 'billing':
+    case 'remainingTime':
+    {
+      const item = billAndPlan?.value?.[column.prop];
+      const texts = [];
+      if (item?.value) {
+        texts.push(item.value || '-');
+      }
+      if (item?.cycleLabel) {
+        texts.push(item.cycleLabel);
+      }
+      return {
+        prop: column.prop,
+        type: 'text',
+        text: texts.join('/'),
+        originalData: params,
+      };
+    }
+    default: {
+      if (RELD_TIME_DATA.includes(column.prop) && realTimeData[column.prop]) {
+        const item = realTimeData[column.prop];
+        return {
+          prop: column.prop,
+          type: 'text',
+          text: item?.text,
+          value: item?.value,
+          unit: item?.unit,
+          originalData: params,
+        };
+      }
+      return {
+        prop: column.prop,
+        type: 'text',
+        value: '-',
+        originalData: params,
+      };
+    }
+  }
+};
+
+/**
+ * 将服务器数据转换为表格数据
+ * @param {Object} server 服务器数据
+ * @param {Array} columns 列配置
+ * @returns {Array} 表格数据
+ */
+export const handleServerListColumn = (serverList, columnTpls = DEFAULT_COLUMNS) => {
+  const columnProps = getColumnPropsConfig(columnTpls);
+  const tpls = columnProps.map((column) => column.valProp || column.prop).join(',');
+  const hasBilling = columnTpls.includes('billing');
+  const hasRemainingTime = columnTpls.includes('remainingTime');
+  let showBilling = false;
+  let showRemainingTime = false;
+  const list = serverList.map((server) => {
+    // 负载\网速\流量\在线等
+    const realTimeResult = handleServerRealTime({
+      props: {
+        info: server,
+      },
+      serverRealTimeListTpls: tpls,
+    });
+    const realTimeData = {};
+    realTimeResult?.serverRealTimeList?.value?.forEach?.((item) => {
+      if (item.show) {
+        const text = [item.value];
+        if (item.unit) {
+          text.push(item.unit);
+        }
+        realTimeData[item.key] = {
+          value: item.value,
+          unit: item.unit,
+          text: text.join(''),
+          item,
+        };
+      } else {
+        realTimeData[item.key] = {
+          text: '-',
+          item,
+        };
+      }
+    });
+    // CPU\内存\硬盘\交换 进度条
+    const {
+      serverStatusList,
+    } = handleServerStatus({
+      props: {
+        info: server,
+      },
+      statusListTpl: tpls,
+      statusListItemContent: false,
+    });
+    const progressData = {};
+    serverStatusList.value?.forEach?.((item) => {
+      progressData[item.type] = item;
+    });
+    let billAndPlan = null;
+    if (hasBilling || hasRemainingTime) {
+      const result = handleServerBillAndPlan({
+        props: {
+          info: server,
+        },
+      });
+      billAndPlan = result.billAndPlan;
+      if (billAndPlan?.value?.billing) {
+        showBilling = true;
+      }
+      if (billAndPlan?.value?.remainingTime) {
+        console.log('remainingTime', billAndPlan.value.remainingTime);
+        showRemainingTime = true;
+      }
+    }
+
+    const columnData = [];
+    columnProps.forEach((columnItem) => {
+      columnData.push({
+        ...columnItem,
+        data: handleServerItemData({
+          column: columnItem,
+          server,
+          realTimeData,
+          progressData,
+          billAndPlan,
+        }),
+      });
+    });
+
+    return {
+      info: server,
+      columnData,
+      computedData: {
+        realTimeData,
+        progressData,
+        billAndPlan,
+      },
+    };
+  });
+  return {
+    list,
+    columnProps,
+    showBilling,
+    showRemainingTime,
+  };
+};

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

@@ -0,0 +1,186 @@
+<template>
+  <td
+    class="server-status-td server-status-body-td"
+    :class="columnClass"
+    :style="columnStyle"
+  >
+    <div
+      class="server-status-td-content"
+      :class="'server-status-td-content--' + tdContent.prop"
+    >
+      <template
+        v-if="tdContent.type === 'text'"
+      >
+        <span
+          v-if="isSet(tdContent.value)"
+          class="text--value"
+        >
+          {{ tdContent.value }}
+        </span>
+        <span
+          v-if="isSet(tdContent.unit)"
+          class="text--unit"
+        >
+          {{ tdContent.unit }}
+        </span>
+        <span
+          v-if="!isSet(tdContent.value) && isSet(tdContent.text)"
+          class="text"
+        >
+          {{ tdContent.text }}
+        </span>
+      </template>
+      <template
+        v-if="tdContent.type === 'component'"
+      >
+        <component :is="tdContent.component" />
+      </template>
+    </div>
+  </td>
+</template>
+
+<script setup>
+/**
+ * 自定义TD组件
+ */
+
+import {
+  computed,
+} from 'vue';
+
+const props = defineProps({
+  column: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+// 计算css的长度单位
+const getCssLengthUnit = (value) => {
+  if (typeof value === 'number') {
+    return `${value}px`;
+  }
+  return value;
+};
+
+const columnClass = computed(() => {
+  const className = {};
+  if (props.column.align) {
+    className[`server-status-td--align-${props.column.align}`] = true;
+  }
+  return className;
+});
+
+const columnStyle = computed(() => {
+  const style = {};
+  if (props.column.width) {
+    style.width = getCssLengthUnit(props.column.width);
+  }
+  if (props.column.minWidth) {
+    style.minWidth = getCssLengthUnit(props.column.minWidth);
+  }
+  return style;
+});
+
+const tdContent = computed(() => {
+  if (['text', 'component'].includes(props.column.data.type)) {
+    return props.column.data;
+  }
+  return '';
+});
+
+function isSet(value) {
+  return value !== undefined && value !== null && value !== '';
+}
+</script>
+
+<style lang="scss" scoped>
+.server-status-td {
+  height: var(--server-status-td-height);
+  padding: var(--server-status-cell-padding);
+
+  --td-content-justify-content: center;
+
+  &--align-center {
+    --td-content-justify-content: center;
+  }
+  &--align-right {
+    --td-content-justify-content: flex-end;
+  }
+  &--align-left {
+    --td-content-justify-content: flex-start;
+  }
+
+  .server-status-td-content {
+    display: flex;
+    align-items: center;
+    justify-content: var(--td-content-justify-content);
+    width: 100%;
+
+    &--transfer {
+      .text--value {
+        color: var(--transfer-color);
+      }
+    }
+
+    &--inTransfer {
+      .text--value {
+        color: var(--transfer-in-color);
+      }
+    }
+    &--outTransfer {
+      .text--value {
+        color: var(--transfer-out-color);
+      }
+    }
+
+    &--inSpeed {
+      .text--value {
+        color: var(--net-speed-in-color);
+      }
+    }
+
+    &--outSpeed {
+      .text--value {
+        color: var(--net-speed-out-color);
+      }
+    }
+
+    &--load {
+      .text--value {
+        color: var(--load-color);
+      }
+    }
+
+    &--duration {
+      .text--value {
+        color: var(--duration-color);
+      }
+    }
+
+    &--cpu {
+      .text--value {
+        color: var(--cpu-text-color);
+      }
+    }
+
+    &--mem {
+      .text--value {
+        color: var(--mem-text-color);
+      }
+    }
+
+    &--swap {
+      .text--value {
+        color: var(--swap-text-color);
+      }
+    }
+
+    &--disk {
+      .text--value {
+        color: var(--disk-text-color);
+      }
+    }
+  }
+}
+</style>

src/views/components/server-list-by-server-status/table/th.vue

@@ -0,0 +1,72 @@
+<template>
+  <th
+    class="server-status-th"
+    :class="columnClass"
+    :style="columnStyle"
+  >
+    {{ column.label }}
+  </th>
+</template>
+
+<script setup>
+/**
+ * 自定义TH组件
+ */
+
+import {
+  computed,
+} from 'vue';
+
+const props = defineProps({
+  column: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+// 计算css的长度单位
+const getCssLengthUnit = (value) => {
+  if (typeof value === 'number') {
+    return `${value}px`;
+  }
+  return value;
+};
+
+const columnClass = computed(() => {
+  const className = {};
+  if (props.column.align) {
+    className[`server-status-th--align-${props.column.align}`] = true;
+  }
+  return className;
+});
+
+const columnStyle = computed(() => {
+  const style = {};
+  if (props.column.width) {
+    style.width = getCssLengthUnit(props.column.width);
+  }
+  if (props.column.minWidth) {
+    style.minWidth = getCssLengthUnit(props.column.minWidth);
+  }
+  return style;
+});
+
+</script>
+
+<style lang="scss" scoped>
+.server-status-th {
+  padding: var(--server-status-cell-padding);
+
+  text-align: center;
+
+  &--align-center {
+    text-align: center;
+  }
+  &--align-right {
+    text-align: right;
+  }
+  &--align-left {
+    text-align: left;
+  }
+}
+</style>

src/views/components/server-list/server-list-warp.vue

@@ -7,6 +7,7 @@
     :class="{
       'server-list--row': showListRow,
       'server-list--card': showListCard,
+      'server-list--status': showListByServerStatus,
     }"
   >
     <slot />
@@ -17,6 +18,7 @@
     :class="{
       'server-list--row': showListRow,
       'server-list--card': showListCard,
+      'server-list--status': showListByServerStatus,
     }"
   >
     <slot />
@@ -41,6 +43,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  showListByServerStatus: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
@@ -94,6 +100,18 @@ defineProps({
   margin: auto;
 }
 
+.server-list-container.server-list--status {
+  --list-padding: 20px;
+  --list-gap-size: 12px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--list-gap-size);
+  width: var(--list-container-width);
+  padding: 0 var(--list-padding);
+  margin: auto;
+}
+
 .list-move,
 .list-enter-active,
 .list-leave-active {

src/views/components/server/server-status-progress.vue

@@ -12,7 +12,10 @@
         class="progress-bar-label"
         :title="label + '使用' + used + '%'"
       >
-        <span class="server-status-label">
+        <span
+          v-if="label"
+          class="server-status-label"
+        >
           {{ label }}:
         </span>
         <span class="server-status-val-text">

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

@@ -221,6 +221,18 @@ export default (params) => {
           value: transfer.value?.value,
           unit: transfer.value?.unit,
           show: validate.isSet(transfer.value?.value),
+          data: {
+            in: {
+              value: inTransfer.value?.value,
+              unit: inTransfer.value?.unit,
+              show: validate.isSet(inTransfer.value?.value),
+            },
+            out: {
+              value: outTransfer.value?.value,
+              unit: outTransfer.value?.unit,
+              show: validate.isSet(outTransfer.value?.value),
+            },
+          },
         };
       case 'inTransfer':
         return {
@@ -263,6 +275,18 @@ export default (params) => {
             `${netOutSpeed.value?.value}${netOutSpeed.value?.unit}`,
           ].join('|'),
           show: validate.isSet(netInSpeed.value?.value) && validate.isSet(netOutSpeed.value?.value),
+          data: {
+            in: {
+              value: netInSpeed.value?.value,
+              unit: netInSpeed.value?.unit,
+              show: validate.isSet(netInSpeed.value?.value),
+            },
+            out: {
+              value: netOutSpeed.value?.value,
+              unit: netOutSpeed.value?.unit,
+              show: validate.isSet(netOutSpeed.value?.value),
+            },
+          },
         };
       case 'load':
         return {
@@ -271,12 +295,49 @@ export default (params) => {
           value: (props.info.State?.Load1 || 0).toFixed(2),
           show: validate.isSet(props.info.State?.Load1),
         };
+      case 'loads':
+      {
+        const loads = [];
+        loads.push((props.info.State?.Load1 || 0).toFixed(2));
+        loads.push((props.info.State?.Load5 || 0).toFixed(2));
+        loads.push((props.info.State?.Load15 || 0).toFixed(2));
+        return {
+          key,
+          label: '负载',
+          value: loads.join(','),
+          show: loads.some((load) => validate.isSet(load)),
+          data: {
+            load1: {
+              value: (props.info.State?.Load1 || 0).toFixed(2),
+              show: validate.isSet(props.info.State?.Load1),
+            },
+            load5: {
+              value: (props.info.State?.Load5 || 0).toFixed(2),
+              show: validate.isSet(props.info.State?.Load5),
+            },
+            load15: {
+              value: (props.info.State?.Load15 || 0).toFixed(2),
+              show: validate.isSet(props.info.State?.Load15),
+            },
+          },
+        };
+      }
       case 'conns':
         return {
           key,
           label: '连接',
           value: `${props.info.State?.TcpConnCount || 0}|${props.info.State?.UdpConnCount || 0}`,
           show: true,
+          data: {
+            tcp: {
+              value: props.info.State?.TcpConnCount || 0,
+              show: validate.isSet(props.info.State?.TcpConnCount),
+            },
+            udp: {
+              value: props.info.State?.UdpConnCount || 0,
+              show: validate.isSet(props.info.State?.UdpConnCount),
+            },
+          },
         };
       case 'tcp':
         return {
@@ -292,6 +353,7 @@ export default (params) => {
           value: props.info.State?.UdpConnCount || 0,
           show: validate.isSet(props.info.State?.UdpConnCount),
         };
+      // 入网和出网
       case 'I-A-O':
         return {
           key,
@@ -314,6 +376,7 @@ export default (params) => {
           ],
           show: validate.isSet(netInSpeed.value?.value) && validate.isSet(netOutSpeed.value?.value),
         };
+      // 负载和进程
       case 'L-A-P':
         return {
           key,
@@ -334,6 +397,7 @@ export default (params) => {
           ],
           show: validate.isSet(props.info.State?.Load1) || validate.isSet(props.info.State?.ProcessCount),
         };
+      // 连接 TCP和UDP
       case 'T-A-U':
         return {
           key,
@@ -354,6 +418,7 @@ export default (params) => {
           ],
           show: validate.isSet(props.info.State?.TcpConnCount) || validate.isSet(props.info.State?.UdpConnCount),
         };
+      // 在线和流量
       case 'D-A-T':
         return {
           key,

src/views/home.vue

@@ -40,6 +40,7 @@
           />
         </div>
       </div>
+      <!-- 列表模式 -->
       <server-list-warp
         v-if="showListRow"
         :show-transition="showTransition"
@@ -51,6 +52,17 @@
           :info="item"
         />
       </server-list-warp>
+      <!-- ServerStatus模式 -->
+      <server-list-warp
+        v-if="showListByServerStatus"
+        :show-transition="showTransition"
+        :show-list-by-server-status="showListByServerStatus"
+      >
+        <server-list-by-server-status
+          :server-list="filterServerList.list"
+        />
+      </server-list-warp>
+      <!-- 卡片模式 -->
       <server-list-warp
         v-if="showListCard"
         :show-transition="showTransition"
@@ -109,6 +121,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';
 
 const store = useStore();
 const worldMapWidth = ref();
@@ -140,12 +153,21 @@ const showListRow = computed(() => {
 const showListCard = computed(() => {
   if (windowWidth.value > 1024) {
     if (config.nazhua.listServerItemTypeToggle) {
-      return listType.value !== 'row';
+      return listType.value === 'card';
     }
-    return config.nazhua.listServerItemType !== 'row';
+    return config.nazhua.listServerItemType === 'card';
   }
   return true;
 });
+const showListByServerStatus = computed(() => {
+  if (windowWidth.value > 1024) {
+    if (config.nazhua.listServerItemTypeToggle) {
+      return listType.value === 'status';
+    }
+    return config.nazhua.listServerItemType === 'status';
+  }
+  return false;
+});
 
 const showFilter = computed(() => config.nazhua.hideFilter !== true);
 const filterFormData = ref({
@@ -217,14 +239,19 @@ watch(() => serverCount.value, () => {
 
 const listTypeOptions = computed(() => [{
   key: 'card',
-  label: '卡片',
+  label: '卡片模式',
   value: 'card',
   icon: 'ri-gallery-view-2',
 }, {
   key: 'row',
-  label: '列表',
+  label: '列表模式',
   value: 'row',
   icon: 'ri-list-view',
+}, {
+  key: 'status',
+  label: 'ServerStatus模式',
+  value: 'status',
+  icon: 'ri-server-line',
 }]);
 
 const filterServerList = computed(() => {