主机状态页，目前图表还未导入

README.md

@@ -15,4 +15,6 @@
 * 如果有例如错误码状态码的东西，请严格遵循规范。
 ### 五、注意事项
 * 该项目为整个大项目的前端部分。
-* 项目采用vue3+element-ui为主题骨架
+* 项目采用vue3+element-ui为主题骨架
+### 六、截图
+![image-20230629162758968](https://pic-go2897.oss-cn-chengdu.aliyuncs.com/ftebox/image-20230629162758968.png)

package-lock.json

@@ -12,6 +12,7 @@
         "@fortawesome/fontawesome-svg-core": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/vue-fontawesome": "^3.0.0-5",
+        "echarts": "^5.4.2",
         "element-plus": "^2.3.7",
         "vue": "^3.2.47"
       },
@@ -682,6 +683,15 @@
       "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.8.tgz",
       "integrity": "sha512-LcgxzFoWMEPO7ggRv1Y2N31hUf2R0Vj7fuy/m+Bg1K8rr+KAs1AEy4y9jd5DXe8pbHgX+srkHNS7TH6Q6ZhYeQ=="
     },
+    "node_modules/echarts": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
+      "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.3"
+      }
+    },
     "node_modules/element-plus": {
       "version": "2.3.7",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.7.tgz",
@@ -862,6 +872,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/vite": {
       "version": "4.3.9",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-4.3.9.tgz",
@@ -921,6 +936,14 @@
         "@vue/server-renderer": "3.3.4",
         "@vue/shared": "3.3.4"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
+      "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

package.json

@@ -13,6 +13,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
+    "echarts": "^5.4.2",
     "element-plus": "^2.3.7",
     "vue": "^3.2.47"
   },

public/nginx.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688022841386" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2299" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 0L68.48 256v512l443.52 256 443.52-256V256z m256 707.84c0 30.08-27.552 55.04-65.248 55.04-26.912 0-57.632-10.88-76.832-34.56l-256-304.672v284.16c0 30.752-24.32 55.04-54.368 55.04h-3.232c-30.752 0-55.04-25.6-55.04-55.04V316.16c0-30.08 26.88-55.04 64-55.04 27.552 0 58.88 10.88 78.08 34.56L654.08 600.352V316.16c0-30.752 25.6-55.04 55.04-55.04h3.2c30.72 0 55.04 25.6 55.04 55.04v391.68z" fill="#269539" p-id="2300"></path></svg>

src/components/Main.vue

@@ -1,11 +1,10 @@
 <template>
-  <div class="common-layout">
-    <el-container>
-      <el-aside class="aside">
+  <el-container class="container">
+    <el-aside class="aside">
+      <el-scrollbar>
         <el-menu
             active-text-color="#ffd04b"
             background-color="#545c64"
-            class="menu"
             default-active="1"
             text-color="#fff"
             :collapse="isCollapse"
@@ -13,78 +12,83 @@
             @close="">
           <el-menu-item class="logo" @click="change">
             <font-awesome-icon :icon="['fas', 'box']" style="margin: 0 5px 0 2px"/>
-            <span>MokiBox</span></el-menu-item>
+            <span>MokiBox</span>
+          </el-menu-item>
           <el-menu-item index="1" style="text-align: center">
+            <font-awesome-icon class="ico" :icon="['fas', 'gauge']"/>
+            <span style="margin-right: 10px">主机状态</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="text-align: center">
             <font-awesome-icon class="ico" :icon="['fas', 'passport']"/>
             <span style="margin-right: 10px">代理机器</span>
           </el-menu-item>
-          <el-menu-item index="2">
+          <el-menu-item index="3">
             <font-awesome-icon class="ico" :icon="['fas', 'globe']"/>
             <span style="margin-right: 10px">网站管理</span>
           </el-menu-item>
-          <el-sub-menu index="3">
+          <el-sub-menu index="4">
             <template #title>
               <font-awesome-icon class="ico" :icon="['fas', 'signs-post']"/>
               <span style="margin-right: 10px">端口映射</span>
             </template>
-            <el-menu-item index="3-1">TCP端口</el-menu-item>
-            <el-menu-item index="3-2">UDP端口</el-menu-item>
+            <el-menu-item index="4-1">TCP端口</el-menu-item>
+            <el-menu-item index="4-2">UDP端口</el-menu-item>
           </el-sub-menu>
-          <el-sub-menu index="4">
+          <el-sub-menu index="5">
             <template #title>
               <font-awesome-icon class="ico" :icon="['fas', 'minimize']"/>
               <span style="margin-right: 10px">主机管理</span>
             </template>
-            <el-menu-item index="4-1">文件管理</el-menu-item>
-            <el-menu-item index="4-2">防火墙</el-menu-item>
-            <el-menu-item index="4-3">终端窗口</el-menu-item>
+            <el-menu-item index="5-1">文件管理</el-menu-item>
+            <el-menu-item index="5-2">防火墙</el-menu-item>
+            <el-menu-item index="5-3">终端窗口</el-menu-item>
           </el-sub-menu>
-          <el-sub-menu index="5">
+          <el-sub-menu index="6">
             <template #title>
               <font-awesome-icon class="ico" :icon="['fas', 'screwdriver-wrench']"/>
               <span style="margin-right: 10px">软件设置</span>
             </template>
-            <el-menu-item index="5-1">nps设置</el-menu-item>
-            <el-menu-item index="5-2">nginx设置</el-menu-item>
-            <el-menu-item index="5-3">mysql设置</el-menu-item>
+            <el-menu-item index="6-1">nps设置</el-menu-item>
+            <el-menu-item index="6-2">nginx设置</el-menu-item>
+            <el-menu-item index="6-3">mysql设置</el-menu-item>
           </el-sub-menu>
-          <el-menu-item index="6">
+          <el-menu-item index="7">
             <font-awesome-icon class="ico" :icon="['fas', 'sliders']"/>
             <span style="margin-right: 10px">面板设置</span>
           </el-menu-item>
-          <el-menu-item index="7">
+          <el-menu-item index="8">
             <font-awesome-icon class="ico" :icon="['fas', 'right-from-bracket']"/>
             <span style="margin-right: 10px">退出登录</span>
           </el-menu-item>
         </el-menu>
-      </el-aside>
-      <el-main>Main</el-main>
-    </el-container>
-  </div>
+      </el-scrollbar>
+    </el-aside>
+    <el-main class="main">
+      <State/>
+    </el-main>
+  </el-container>
 </template>
 
 <style scoped>
-.common-layout {
-  height: 100%;
-}
-
 .ico {
   margin-left: 3px;
   margin-right: 8px;
 }
 
-.menu {
-//width: 10%; height: 100%; //min-width: 150px; //width: 150px;
+.container {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
 }
 
 .aside {
-  height: 100vh;
   width: auto;
+  background: #545c64;
 }
 
 .logo {
   background: gray;
-  min-height: 50px;
+  height: 70px;
   text-align: center;
   color: white;
   font-size: 20px;
@@ -92,17 +96,22 @@
 }
 
 .logo span {
-
   display: inline-block;
-//margin-top: 10px;
+}
+
+.main {
+  padding: 0;
+  background: #eeeeee;
 }
 </style>
 <script setup>
 import {ref} from "vue";
+import State from "./State.vue";
 
 const isCollapse = ref(false)
 
 const change = () => {
   isCollapse.value = !isCollapse.value;
 }
+
 </script>

src/components/State.vue

@@ -0,0 +1,297 @@
+<script setup>
+import {onMounted, ref} from "vue";
+
+const windowHeight = ref("height:" + (window.innerHeight - 131) + "px")
+
+const softWare = [
+  {
+    ico: '/nginx.svg',
+    name: 'NGINX',
+    notes: '一款开源的http反向代理软件，具有较高的性能，可代理tcp和udp。'
+  },
+  {
+    ico: '/mysql.svg',
+    name: 'MYSQL',
+    notes: 'MySQL是一款流行的开源关系型数据库管理系统，用于存储和管理数据。'
+  },
+  {
+    ico: '/nps.svg',
+    name: 'NPS',
+    notes: 'nps是一款轻量级、高性能、功能强大的内网穿透代理服务器。'
+  },
+  {
+    ico: '/java.svg',
+    name: 'JAVA',
+    notes: 'Java是一种面向对象的编程语言，广泛应用于软件开发和企业级应用程序的构建。'
+  },
+  {
+    ico: '/docker.svg',
+    name: 'DOCKER',
+    notes: 'Docker是一种开源的容器化平台，用于快速构建、部署和运行应用程序。'
+  }
+]
+
+window.addEventListener('resize', function () {
+  windowHeight.value = "height:" + (window.innerHeight - 131) + "px";
+  console.log('窗口高度变化为: ' + windowHeight.value);
+});
+</script>
+
+<template>
+  <el-header class="header">
+    <div class="title">
+      <font-awesome-icon class="ico" :icon="['fas', 'gauge']"/>
+      <span>主机状态</span></div>
+    <div class="user">
+      <el-avatar :size="40"/>
+      <el-dropdown>
+        <span style="margin-left: 10px;font-size: 16px">一半山川湖海</span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item>账号设置</el-dropdown-item>
+            <el-dropdown-item>密码修改</el-dropdown-item>
+            <el-dropdown-item>退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </el-header>
+  <el-main :style="windowHeight" style="margin: 0;padding: 0;">
+    <el-scrollbar>
+      <el-row class="e-body" :gutter="20">
+        <el-col :span="16" style="margin-bottom: 20px">
+          <el-card
+              style="margin-bottom: 20px"
+              shadow="hover"
+              :body-style="{display: 'flex', padding: '30px 10px',justifyContent: 'space-around',alignItems: 'center',flexWrap: 'wrap'}">
+            <template #header>
+              <span style="font-size: 16px">服务器概览</span>
+            </template>
+            <div class="card-in">
+              <span class="sp1">在线</span>
+              <span class="sp2">2</span>
+            </div>
+            <div class="card-in">
+              <span class="sp1">网站</span>
+              <span class="sp2">16</span>
+            </div>
+            <div class="card-in">
+              <span class="sp1">端口</span>
+              <span class="sp2">2</span>
+            </div>
+            <div class="card-in">
+              <span class="sp1">连接</span>
+              <span class="sp2">234</span>
+            </div>
+          </el-card>
+          <el-card
+              style="margin-bottom: 20px"
+              shadow="hover"
+              :body-style="{display: 'flex', padding: '30px 10px',justifyContent: 'space-around',alignItems: 'center',flexWrap: 'wrap'}">
+            <template #header>
+              <span style="font-size: 16px">服务器状态</span>
+            </template>
+            <el-progress type="dashboard" :percentage="40" width="130" stroke-width="10">
+              <template #default="{ percentage }">
+                <span class="percentage-value">{{ percentage }}%</span>
+                <span class="percentage-label">处理器</span>
+              </template>
+            </el-progress>
+            <el-progress type="dashboard" :percentage="35" width="130" stroke-width="10">
+              <template #default="{ percentage }">
+                <span class="percentage-value">{{ percentage }}%</span>
+                <span class="percentage-label">内存</span>
+              </template>
+            </el-progress>
+            <el-progress type="dashboard" :percentage="10" width="130" stroke-width="10">
+              <template #default="{ percentage }">
+                <span class="percentage-value">{{ percentage }}%</span>
+                <span class="percentage-label">硬盘</span>
+              </template>
+            </el-progress>
+            <el-progress type="dashboard" :percentage="20" width="130" stroke-width="10">
+              <template #default="{ percentage }">
+                <span class="percentage-value">{{ percentage }}%</span>
+                <span class="percentage-label">负载</span>
+              </template>
+            </el-progress>
+          </el-card>
+          <el-card
+              shadow="hover"
+              :body-style="{display: 'flex', padding: '30px 10px',justifyContent: 'space-around',alignItems: 'center',flexWrap: 'wrap'}">
+            <template #header>
+              <span style="font-size: 16px">服务器监控</span>
+            </template>
+          </el-card>
+        </el-col>
+        <el-col :span="8" style="margin-bottom: 20px">
+          <el-card
+              style="margin-bottom: 20px"
+              shadow="hover"
+              :body-style="{display: 'flex', padding: '30px 10px',justifyContent: 'space-around',alignItems: 'center',flexWrap: 'wrap'}">
+            <template #header>
+              <span style="font-size: 16px">系统信息</span>
+            </template>
+            <div class="sys-box">
+              <span class="sp1"><font-awesome-icon class="ico" :icon="['fas', 'layer-group']"/>主机名称：</span><span
+                class="sp2">MokiBox</span>
+            </div>
+            <div class="sys-box">
+              <span class="sp1"><font-awesome-icon class="ico" :icon="['fas', 'circle-info']"/>系统版本：</span><span
+                class="sp2">ubuntu-22.04</span>
+            </div>
+            <div class="sys-box">
+              <span class="sp1"><font-awesome-icon class="ico" :icon="['fas', 'brain']"/>内核版本：</span>
+              <span class="sp2">5.15.0-71</span>
+            </div>
+            <div class="sys-box">
+              <span class="sp1"><font-awesome-icon class="ico" :icon="['fas', 'inbox']"/>系统类型：</span>
+              <span class="sp2">linux-x86_64</span>
+            </div>
+            <div class="sys-box">
+              <span class="sp1"><font-awesome-icon class="ico" :icon="['fas', 'circle-play']"/>启动时间：</span>
+              <span class="sp2">2023-06-29 10:53:22</span></div>
+            <div class="sys-box">
+              <span class="sp1"><font-awesome-icon class="ico" :icon="['fas', 'clock']"/>运行时间：</span>
+              <span class="sp2">1天&nbsp;13时&nbsp;03分</span>
+            </div>
+          </el-card>
+          <el-card
+              style="margin-bottom: 20px"
+              shadow="hover"
+              :body-style="{display: 'flex', padding: '20px',justifyContent: 'space-around',alignItems: 'center',flexWrap: 'wrap'}">
+            <template #header>
+              <span style="font-size: 16px">软件信息</span>
+            </template>
+            <div class="soft-box" v-for="item in softWare">
+              <div
+                  style="box-shadow: #ececec 0 0 6px 1px;width: 60px;height:60px;border-radius: 8px;display: flex;align-items: center;justify-content: center">
+                <el-image style="width: 80%;height: 80%" :src="item.ico"/>
+              </div>
+              <div style="width: 60%;height: 60px; padding: 0 20px">
+                <span style="display: block;">{{ item.name }}</span>
+                <span
+                    style="display: block;font-size: 14px;color: gray">{{ item.notes }}</span>
+              </div>
+              <el-button>安装</el-button>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-scrollbar>
+  </el-main>
+  <el-footer class="e-footer">
+    <div>
+      <span style="font-size: 14px;color: #858585">Copyright © 2018-2023 POWER 帕沃信息</span>
+    </div>
+    <div>
+      <span style="font-size: 14px;color: #858585">面板当前版本：v1.1.0 （检查更新）</span>
+    </div>
+  </el-footer>
+</template>
+
+<style scoped>
+body {
+  background: aqua;
+}
+
+.header {
+  height: 70px;
+  box-shadow: 0 5px 5px #eaeaea;
+  background: white;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ico {
+  margin-right: 5px;
+}
+
+.title {
+  font-size: 18px;
+  margin-left: 10px;
+  padding: 4px;
+  border-bottom: 2px dotted #cccccc;
+}
+
+.user {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+}
+
+.e-body {
+  margin: 0 !important;
+  font-size: 14px;
+  padding: 20px 10px;
+}
+
+.percentage-value {
+  display: block;
+  margin-top: 10px;
+  font-size: 28px;
+}
+
+.percentage-label {
+  display: block;
+  margin-top: 15px;
+  font-size: 14px;
+}
+
+.card-in {
+  float: left;
+  width: 80px;
+  text-align: center;
+}
+
+.card-in > span {
+  display: block;
+}
+
+.card-in > .sp1 {
+  font-size: 18px
+}
+
+.card-in > .sp2 {
+  margin-top: 5px;
+  font-size: 24px
+}
+
+.sys-box {
+  width: 100%;
+  padding: 10px 20px;
+}
+
+.e-footer {
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  box-shadow: 0 -5px 5px #eaeaea;
+}
+
+.ico {
+  margin-right: 5px;
+}
+
+.sys-box > .sp1 {
+  margin-right: 20px;
+}
+
+.soft-box {
+  width: 100%;
+  padding: 10px;
+  height: 80px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.soft-box:hover {
+  background: rgba(224, 223, 223, 0.99);
+}
+</style>

src/main.js

@@ -5,6 +5,7 @@ import './style.css'
 import App from './App.vue'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import {library} from '@fortawesome/fontawesome-svg-core'
+// 引入图标
 import {
     faServer,
     faGlobe,
@@ -14,15 +15,27 @@ import {
     faPassport,
     faMinimize,
     faSliders,
-    faBox
+    faBox,
+    faGauge,
+    faLayerGroup,
+    faCircleInfo,
+    faBrain,
+    faInbox,
+    faCirclePlay,
+    faClock
 } from '@fortawesome/free-solid-svg-icons'
+// 引入fontAwesome对于vue3的支持组件
 import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
+import * as echarts from 'echarts'
 
 const app = createApp(App);
-library.add(faServer, faGlobe, faSignsPost, faScrewdriverWrench, faRightFromBracket, faPassport, faMinimize, faSliders,faBox)
 
-app.component('font-awesome-icon', FontAwesomeIcon);
+// 添加图标
+library.add(faServer, faGlobe, faSignsPost, faScrewdriverWrench, faRightFromBracket, faPassport, faMinimize, faSliders, faBox, faGauge, faLayerGroup, faCircleInfo, faBrain, faInbox, faCirclePlay, faClock)
 
+// 注册图标组件
+app.component('font-awesome-icon', FontAwesomeIcon);
+// 批量注册element图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }