完成主机信息卡片基本样式

itbaima-monitor-frontend/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-frontend/itbaima-monitor-frontend.iml

@@ -5,5 +5,6 @@
     <content url="file://$MODULE_DIR$" />
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="all" level="application" />
   </component>
 </module>

itbaima-monitor-frontend/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"
       },
@@ -1071,6 +1072,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-frontend/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-frontend/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-frontend/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-frontend/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-frontend/src/views/IndexView.vue

@@ -6,7 +6,7 @@
       <div class="tabs">
         <tab-item v-for="item in tabs"
                   :name="item.name" :active="item.id === tab"
-                  @click="changePage(item.id)"/>
+                  @click="changePage(item)"/>
       </div>
       <el-switch style="margin: 0 20px"
           v-model="dark" active-color="#424242"
@@ -26,7 +26,11 @@
       </el-dropdown>
     </el-header>
     <el-main class="main-content">
-
+      <router-view v-slot="{ Component }">
+        <transition name="el-fade-in-linear" mode="out-in">
+          <component :is="Component"/>
+        </transition>
+      </router-view>
     </el-main>
   </el-container>
 </template>
@@ -36,7 +40,7 @@ import { logout } from '@/net'
 import router from "@/router";
 import {ref} from "vue";
 import TabItem from "@/component/TabItem.vue";
-import {Back, Hide, Moon, Sunny, View} from "@element-plus/icons-vue";
+import {Back, Moon, Sunny} from "@element-plus/icons-vue";
 import {useDark} from "@vueuse/core";
 
 function userLogout() {
@@ -49,8 +53,9 @@ const tabs = [
   {id: 1, name: '管理', route: 'manage'},
   {id: 2, name: '安全', route: 'security'}
 ]
-function changePage(id) {
+function changePage(item) {
-  tab.value = id
+  tab.value = item.id
+  router.push({name: item.route})
 }
 </script>
 
@@ -82,7 +87,11 @@ function changePage(id) {
 
   .main-content {
     height: 100%;
-    background-color: var(--el-bg-color-overlay);
+    background-color: #f5f5f5;
   }
 }
+
+.dark .main-content {
+  background-color: #232323;
+}
 </style>

itbaima-monitor-frontend/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-frontend/src/views/main/Security.vue

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