feat:重构模块

src/components/Server/ServerCard.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="server-card card-item">
+    <div class="sever__head">
+      <div class="basic">
+        <span class="name">火山引擎</span>
+        <span class="info">{{ props.serverMonitor.systemInfo }}</span>
+        <span class="ip">{{ props.serverIp }}</span>
+      </div>
+
+      <div class="status">
+        <span class="dot"
+              :style="{ 'background-color': props.isOnline ? '#4CAF50' : '#FF3030'}">
+        </span>
+        <span>{{ props.isOnline ? '在线' : '离线' }}</span>
+      </div>
+    </div>
+
+    <div class="server__basic">
+      <div class="item">
+        <i class="fa-solid fa-microchip" style="color: #3498db;"></i>
+        <span>{{ props.serverMonitor.cpuCores }} 核</span>
+      </div>
+
+      <div class="item">
+        <i class="fa-solid fa-memory" style="color: #2ecc71;"></i>
+        <span>{{ props.serverMonitor.totalMemory }} G</span>
+      </div>
+
+      <div class="item">
+        <i class="fa-solid fa-hard-drive" style="color: #9b59b6;"></i>
+        <span>{{ props.serverMonitor.totalDisk }} G</span>
+      </div>
+
+      <div class="item">
+        <i class="fa-solid fa-power-off" style="color: #1abc9c;"></i>
+        <span>{{ props.serverMonitor.uptime }} 天</span>
+      </div>
+    </div>
+
+    <div class="server__usage">
+      <div class="item">
+        <span class="name">CPU</span>
+        <el-progress type="circle" :width="60"
+                     :percentage="props.serverMonitor.cpuUsage"
+                     :color="parseUsageColor(props.serverMonitor.cpuUsage)" />
+      </div>
+
+      <div class="item">
+        <span class="name">内存</span>
+        <el-progress type="circle" :width="60"
+                     :percentage="props.serverMonitor.memoryUsage"
+                     :color="parseUsageColor(props.serverMonitor.memoryUsage)"/>
+      </div>
+
+      <div class="item">
+        <span class="name">磁盘</span>
+        <el-progress type="circle" :width="60"
+                     :percentage="props.serverMonitor.diskUsage"
+                     :color="parseUsageColor(props.serverMonitor.diskUsage)"/>
+      </div>
+
+      <div class="item">
+        <span class="name">网络</span>
+        <div class="network">
+          <span>上行 {{ props.serverMonitor.networkSpeed.tx }} KB/s</span>
+          <span>下行 {{ props.serverMonitor.networkSpeed.rx }} KB/s</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, PropType } from 'vue'
+import { IServerMonitor } from '@/types/server.ts'
+
+const props = defineProps({
+  isOnline: {
+    required: true,
+    type: Boolean
+  },
+  serverIp: {
+    required: true,
+    type: String
+  },
+  serverMonitor: {
+    required: true,
+    type: Object as PropType<IServerMonitor>
+  }
+})
+
+const parseUsageColor = (usage: number) => {
+  if (usage < 25) return '#66BB6A'
+  if (usage < 50) return '#42A5F5'
+  if (usage < 75) return '#FFA726'
+  return '#EF5350'
+}
+</script>
+
+<style lang="scss">
+.server-card {
+  width: 100%;
+  padding: 10px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .sever__head {
+    display: flex;
+    justify-content: space-between;
+
+    .basic {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .status {
+      display: flex;
+      align-items: center;
+
+      .dot {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .server__basic {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    padding-bottom: 3px;
+    border-bottom: 1px solid lightgrey;
+    color: gray;
+    font-size: small;
+
+    .item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 5px;
+    }
+  }
+
+  .server__usage {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr) 120px;
+
+    .item {
+      display: grid;
+      grid-template-rows: 25px 1fr;
+      justify-items: center;
+      align-items: center;
+      gap: 5px;
+
+      .name {
+        color: #9C9C9C;
+      }
+
+      .el-progress {
+        .el-progress__text {
+          span {
+            font-size: 1rem;
+          }
+        }
+      }
+
+      .network {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+    }
+  }
+}
+</style>

src/components/Server/ServerProgress.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="server-progress">
+    <el-table :data="props.serverMonitor.topProcesses"
+              :header-cell-style="{ background:'var(--el-color-primary)', color:'#FFFFFF' }"
+              :cell-style="{ fontSize: '0.9rem' }"
+              border>
+      <el-table-column prop="pid" label="pid" align="center" width="70"/>
+      <el-table-column prop="name" label="名称" align="center" width="120"/>
+      <el-table-column prop="cpu" label="cpu(%)" align="center" width="80"/>
+      <el-table-column prop="mem" label="内存(%)" align="center" width="80"/>
+      <el-table-column prop="user" label="使用者" align="center" width="80"/>
+      <el-table-column prop="command" label="启动命令" align="center" width="150"/>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, PropType } from 'vue'
+import { IServerMonitor } from '@/types/server.ts'
+
+const props = defineProps({
+  serverMonitor: {
+    required: true,
+    type: Object as PropType<IServerMonitor>
+  }
+})
+</script>
+
+
+<style lang="scss">
+.server-progress {
+  .el-table {
+    border-radius: 10px;
+  }
+}
+</style>