完成服务器主机预览卡片编写

itbaima-monitor-web/index.html

@@ -5,6 +5,7 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="//lib.baomitu.com/element-plus/2.2.32/index.css"/>
+    <link rel="stylesheet" href="//lib.baomitu.com/font-awesome/6.4.2/css/all.min.css">
     <title>Vite App</title>
     <style>
         body {

itbaima-monitor-web/package-lock.json

@@ -12,6 +12,7 @@
         "@vueuse/core": "^10.3.0",
         "axios": "^1.4.0",
         "element-plus": "^2.3.9",
+        "flag-icon-css": "^4.1.7",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4"
       },
@@ -1048,6 +1049,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/flag-icon-css": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmmirror.com/flag-icon-css/-/flag-icon-css-4.1.7.tgz",
+      "integrity": "sha512-AFjSU+fv98XbU0vnTQ32vcLj89UEr1MhwDFcooQv14qWJCjg9fGZzfh9BVyDhAhIOZW/pGmJmq38RqpgPaeybQ==",
+      "deprecated": "The project has been renamed to flag-icons"
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",

itbaima-monitor-web/package.json

@@ -12,6 +12,7 @@
     "@vueuse/core": "^10.3.0",
     "axios": "^1.4.0",
     "element-plus": "^2.3.9",
+    "flag-icon-css": "^4.1.7",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },

itbaima-monitor-web/src/component/PreviewCard.vue

@@ -0,0 +1,109 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="instance-card">
+    <div style="display: flex;justify-content: space-between">
+      <div>
+        <div class="title">
+          <span class="flag-icon flag-icon-cn"></span>
+          <span style="margin: 0 10px">柏码后端云服务器</span>
+          <i class="fa-solid fa-pen-to-square"></i>
+        </div>
+        <div class="os">
+          操作系统: Ubuntu 20.04
+        </div>
+      </div>
+      <div class="status">
+        <i style="color: #18cb18" class="fa-solid fa-circle-play"></i>
+        <span style="margin-left: 5px">运行中</span>
+      </div>
+    </div>
+    <el-divider style="margin: 10px 0"/>
+    <div class="network">
+      <span style="margin-right: 10px">公网IP: 192.168.0.10</span>
+      <i style="color: dodgerblue" class="fa-solid fa-copy"></i>
+    </div>
+    <div class="hardware">
+      <i class="fa-solid fa-microchip"></i>
+      <span style="margin-right: 10px"> 2 CPU</span>
+      <i class="fa-solid fa-memory"></i>
+      <span> 4 GB</span>
+    </div>
+    <el-divider style="margin: 10px 0"/>
+    <div class="progress">
+      <span>CPU: 2.5 %</span>
+      <el-progress :percentage="2.5" :stroke-width="5" :show-text="false"/>
+    </div>
+    <div class="progress" style="margin-top: 7px">
+      <span>内存: <b>1.2</b> GB</span>
+      <el-progress :percentage="1.2/4 * 100" :stroke-width="5" :show-text="false"/>
+    </div>
+    <div class="network-flow">
+      <div>网络流量</div>
+      <div>
+        <i class="fa-solid fa-arrow-up"></i>
+        <span> 52 KB/s</span>
+        <el-divider direction="vertical"/>
+        <i class="fa-solid fa-arrow-down"></i>
+        <span> 272 KB/s</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.el-progress-bar__outer) {
+  background-color: #18cb1822;
+}
+
+:deep(.el-progress-bar__inner) {
+  background-color: #18cb18;
+}
+
+.dark .instance-card { color: #d9d9d9
+}
+.instance-card {
+  width: 320px;
+  background-color: var(--el-bg-color);
+  border-radius: 5px;
+  padding: 15px;
+  box-sizing: border-box;
+  color: #6b6b6b;
+
+  .os {
+    font-size: 13px;
+    color: grey;
+  }
+
+  .status {
+    font-size: 14px;
+  }
+
+  .title {
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .network {
+    font-size: 13px;
+  }
+
+  .hardware {
+    margin-top: 5px;
+    font-size: 13px;
+  }
+
+  .progress {
+    font-size: 12px;
+  }
+
+  .network-flow {
+    margin-top: 10px;
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>

itbaima-monitor-web/src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import axios from "axios";
 
+import 'flag-icon-css/css/flag-icons.min.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 
 axios.defaults.baseURL = 'http://localhost:8080'

itbaima-monitor-web/src/router/index.js

@@ -23,6 +23,17 @@ const router = createRouter({
             path: '/index',
             name: 'index',
             component: () => import('@/views/IndexView.vue'),
+            children: [
+                {
+                    path: '',
+                    name: 'manage',
+                    component: () => import('@/views/main/Manage.vue')
+                }, {
+                    path: 'security',
+                    name: 'security',
+                    component: () => import('@/views/main/Security.vue')
+                }
+            ]
         }
     ]
 })

itbaima-monitor-web/src/views/main/Manage.vue

@@ -0,0 +1,33 @@
+<script setup>
+
+import PreviewCard from "@/component/PreviewCard.vue";
+</script>
+
+<template>
+  <div class="manage-main">
+    <div class="title"><i class="fa-solid fa-server"></i> 管理主机列表</div>
+    <div class="description">在这里管理所有已经注册的主机实例，实时监控主机运行状态，快速进行管理和操作。</div>
+    <el-divider style="margin: 10px 0"/>
+    <div style="display: flex;gap: 20px">
+      <preview-card/>
+      <preview-card/>
+      <preview-card/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.manage-main {
+  margin: 0 50px;
+
+  .title {
+    font-size: 22px;
+    font-weight: bold;
+  }
+
+  .description {
+    font-size: 15px;
+    color: grey;
+  }
+}
+</style>

itbaima-monitor-web/src/views/main/Security.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>