NEZ-2751 fix： 优化页面http请求时的加载动画

nezha-fronted/package-lock.json

@@ -4919,6 +4919,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "charm": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/charm/-/charm-0.1.2.tgz",
+      "integrity": "sha512-syedaZ9cPe7r3hoQA9twWYKu5AIyCswN5+szkmPBe9ccdLrj4bYaCnLVPTLd2kgVRc7+zoX4tyPgRnFKCj5YjQ=="
+    },
     "check-types": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-7.4.0.tgz",
@@ -14335,7 +14340,7 @@
     },
     "node-sass": {
       "version": "4.14.1",
-      "resolved": "https://registry.npmmirror.com/node-sass/-/node-sass-4.14.1.tgz",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
       "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
       "dev": true,
       "requires": {
@@ -14836,6 +14841,19 @@
       "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
       "dev": true
     },
+    "pace": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/pace/-/pace-0.0.4.tgz",
+      "integrity": "sha512-B1tKMCrHnTmMxaZTzK5+4HRisYaeH8WHMjeg21dbBXB9eFnrZ5uw9+grRnLmLzTcL4R4A8v/XDCnP2Qf+37rPw==",
+      "requires": {
+        "charm": "~0.1.0"
+      }
+    },
+    "pace-js": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/pace-js/-/pace-js-1.2.4.tgz",
+      "integrity": "sha512-qnCxtvUoY9yHId0AwMQCVmWltb698GiuVArmDbQzonTu9QCo0SgWUVnX9jB9mi+/FUSWvQULBPxUAAo/kLrh1A=="
+    },
     "pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@@ -17215,7 +17233,7 @@
     },
     "sass-loader": {
       "version": "8.0.2",
-      "resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-8.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
       "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
       "dev": true,
       "requires": {
@@ -17641,7 +17659,7 @@
     },
     "showdown": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/showdown/-/showdown-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/showdown/-/showdown-2.1.0.tgz",
       "integrity": "sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==",
       "requires": {
         "commander": "^9.0.0"
@@ -17649,7 +17667,7 @@
       "dependencies": {
         "commander": {
           "version": "9.5.0",
-          "resolved": "https://registry.npmmirror.com/commander/-/commander-9.5.0.tgz",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
           "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="
         }
       }
@@ -20709,7 +20727,7 @@
     },
     "webpack-bundle-analyzer": {
       "version": "2.13.1",
-      "resolved": "https://registry.npmmirror.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz",
       "integrity": "sha512-rwxyfecTAxoarCC9VlHlIpfQCmmJ/qWD5bpbjkof+7HrNhTNZIwZITxN6CdlYL2axGmwNUQ+tFgcSOiNXMf/sQ==",
       "dev": true,
       "requires": {

nezha-fronted/package.json

@@ -66,6 +66,8 @@
     "mini-css-extract-plugin": "^1.6.0",
     "moment-timezone": "^0.5.33",
     "mqtt": "4.2.6",
+    "pace": "0.0.4",
+    "pace-js": "^1.2.4",
     "pl-table": "^2.5.8",
     "preload": "^0.1.0",
     "qrcodejs2": "0.0.2",

nezha-fronted/src/assets/css/index.scss

@@ -46,3 +46,26 @@ html {
   @import './components/introjs/introjs.scss';
   @import './components/introjs/introjs-dark.scss';
 }
+/* pace*/
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.pace-inactive {
+  display: none;
+}
+
+.pace .pace-progress {
+  background: #fa901c;
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  right: 100%;
+  width: 100%;
+  height: 2px;
+}

nezha-fronted/src/components/chart/chart/chartAutotopology.vue

@@ -2,7 +2,7 @@
   <div v-my-loading="topologyLoading" class="overview">
     <transition name = "el-zoom-in-center">
       <div v-if="allProject&&allProject.length>0" style="width: 100%;height: 100%;position: relative">
-        <el-carousel :interval="5000" :trigger="'click'" :autoplay="false" arrow="hover">
+        <el-carousel :interval="5000" :trigger="'click'" :autoplay="true" arrow="hover">
           <el-carousel-item v-for="(item,index) in allProject" :key="index" style="min-height: 10px;min-width: 10px">
             <div class="maskLayer" @click="toProject(item)"></div>
 <!--            <span class="project-name">{{item.name}}</span>-->

nezha-fronted/src/entrance/app/main.js

@@ -5,6 +5,7 @@ import '@/assets/css/main.scss'
 import '@/assets/css/animate.css'
 import '@/assets/css/font/iconfont.js'
 import 'intro.js/introjs.css'
+import Pace from 'pace-js'
 import ElementUI from 'element-ui'
 import i18n from '@/components/common/i18n'
 import VueIntro from 'vue-introjs'
@@ -48,12 +49,24 @@ import VMdPreview from '@kangc/v-md-editor/lib/preview'
 import '@kangc/v-md-editor/lib/style/preview.css'
 import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
 import '@kangc/v-md-editor/lib/theme/style/github.css'
+// Pace.on("done", function() {
+//   $self.isShowAuth = false;
+//   Pace.off("done");
+// })
 // highlightjs
 import hljs from 'highlight.js'
+
+// Pace.start();
 VMdPreview.use(githubTheme, {
   Hljs: hljs
 })
+Pace.options = {
+  minTime: 0.1,
+  ghostTime: 0.1,
+  restartOnRequestAfter: 0.1
+}
 Vue.use(VMdPreview)
+Vue.use(Pace)
 
 Vue.use(VueIntro)
 Vue.use(htmlToPdf)