From 8365f69de606b045335ccb35e0fdce6a54a2ec2a Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Sun, 19 Jun 2022 02:05:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=85=A8=E5=B1=80=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/App.vue                   |  8 +++----
 .../assets/js/components/FloatSpinner.vue     | 18 ++++++++++++++
 resources/assets/js/components/Spinner.vue    | 11 ---------
 resources/assets/js/functions/web.js          | 22 -----------------
 resources/assets/js/store/actions.js          | 24 +++++++++++++++++--
 resources/assets/js/store/state.js            |  1 +
 resources/assets/sass/components/_.scss       |  2 +-
 .../assets/sass/components/float-spinner.scss | 17 +++++++++++++
 resources/assets/sass/components/spinner.scss | 20 ----------------
 9 files changed, 63 insertions(+), 60 deletions(-)
 create mode 100644 resources/assets/js/components/FloatSpinner.vue
 delete mode 100644 resources/assets/js/components/Spinner.vue
 create mode 100644 resources/assets/sass/components/float-spinner.scss
 delete mode 100644 resources/assets/sass/components/spinner.scss

diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue
index 5f0172fee..da6080ff3 100755
--- a/resources/assets/js/App.vue
+++ b/resources/assets/js/App.vue
@@ -7,8 +7,8 @@
         <!--任务操作-->
         <TaskOperation/>
 
-        <!--右下角加载提示-->
-        <Spinner/>
+        <!--全局浮窗加载器-->
+        <FloatSpinner/>
 
         <!--右下角客户端-->
         <RightBottom/>
@@ -37,7 +37,7 @@
 }
 </style>
 <script>
-import Spinner from "./components/Spinner";
+import FloatSpinner from "./components/FloatSpinner";
 import RightBottom from "./components/RightBottom";
 import PreviewImageState from "./components/PreviewImage/state";
 import NetworkException from "./components/NetworkException";
@@ -46,7 +46,7 @@ import TaskOperation from "./pages/manage/components/TaskOperation";
 import {mapState} from "vuex";
 
 export default {
-    components: {TaskOperation, AudioManager, NetworkException, PreviewImageState, RightBottom, Spinner},
+    components: {TaskOperation, AudioManager, NetworkException, PreviewImageState, RightBottom, FloatSpinner},
 
     data() {
         return {
diff --git a/resources/assets/js/components/FloatSpinner.vue b/resources/assets/js/components/FloatSpinner.vue
new file mode 100644
index 000000000..9a1519853
--- /dev/null
+++ b/resources/assets/js/components/FloatSpinner.vue
@@ -0,0 +1,18 @@
+<template>
+    <transition name="fade">
+        <div v-if="floatSpinnerLoad > 0" class="common-float-spinner">
+            <Loading class="common-float-circular"></Loading>
+        </div>
+    </transition>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+    name: 'FloatSpinner',
+    computed: {
+        ...mapState(['floatSpinnerLoad'])
+    }
+}
+</script>
diff --git a/resources/assets/js/components/Spinner.vue b/resources/assets/js/components/Spinner.vue
deleted file mode 100644
index 67c9593bc..000000000
--- a/resources/assets/js/components/Spinner.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-    <div id="common-spinner" class="common-spinner">
-        <Loading class="common-circular"></Loading>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: 'Spinner',
-    }
-</script>
diff --git a/resources/assets/js/functions/web.js b/resources/assets/js/functions/web.js
index f6ac35db9..345c8984d 100755
--- a/resources/assets/js/functions/web.js
+++ b/resources/assets/js/functions/web.js
@@ -412,28 +412,6 @@
      * =============================================================================
      */
     $.extend({
-        // 加载器
-        spinnerShow() {
-            $A.spinnerLoadNum++
-            if ($A.spinnerLoadNum > 0) {
-                const spinner = document.getElementById("common-spinner");
-                if (spinner) {
-                    spinner.style.display = "block"
-                }
-            }
-        },
-
-        spinnerHide() {
-            $A.spinnerLoadNum--
-            if ($A.spinnerLoadNum <= 0) {
-                const spinner = document.getElementById("common-spinner");
-                if (spinner) {
-                    spinner.style.display = "none"
-                }
-            }
-        },
-        spinnerLoadNum: 0,
-
         // 弹窗
         modalConfig(config) {
             if (typeof config === "undefined") {
diff --git a/resources/assets/js/store/actions.js b/resources/assets/js/store/actions.js
index 2248a145c..812e474ad 100644
--- a/resources/assets/js/store/actions.js
+++ b/resources/assets/js/store/actions.js
@@ -29,12 +29,15 @@ export default {
         const cloneParams = $A.cloneJSON(params);
         return new Promise(function (resolve, reject) {
             if (params.spinner === true) {
+                const {before, complete, spinnerDelay} = params;
                 params.before = () => {
-                    $A.spinnerShow();
+                    dispatch("showSpinner", spinnerDelay)
+                    typeof before === "function" && before()
                 };
                 //
                 params.complete = () => {
-                    $A.spinnerHide();
+                    dispatch("hiddenSpinner")
+                    typeof complete === "function" && complete()
                 };
             }
             //
@@ -2317,6 +2320,23 @@ export default {
         }
     },
 
+    /**
+     * 显示全局浮窗加载器
+     * @param state
+     * @param delay
+     */
+    showSpinner({state}, delay) {
+        setTimeout(_ => state.floatSpinnerLoad++, typeof delay === "number" ? delay : 0)
+    },
+
+    /**
+     * 隐藏全局浮窗加载器
+     * @param state
+     */
+    hiddenSpinner({state}) {
+        state.floatSpinnerLoad--
+    },
+
     /** *****************************************************************************************/
     /** *********************************** websocket *******************************************/
     /** *****************************************************************************************/
diff --git a/resources/assets/js/store/state.js b/resources/assets/js/store/state.js
index f5786c4dc..c4ea6a630 100644
--- a/resources/assets/js/store/state.js
+++ b/resources/assets/js/store/state.js
@@ -24,6 +24,7 @@ const stateData = {
     loadUserBasic: false,
     loadProjects: 0,
     loadDialogs: 0,
+    floatSpinnerLoad: 0,
     touchBackInProgress: false,
 
     // User
diff --git a/resources/assets/sass/components/_.scss b/resources/assets/sass/components/_.scss
index a7a5bf069..6a532a70a 100644
--- a/resources/assets/sass/components/_.scss
+++ b/resources/assets/sass/components/_.scss
@@ -1,12 +1,12 @@
 @import "auto-tip";
 @import "circle";
 @import "drawer-overlay";
+@import "float-spinner";
 @import "gantt-view";
 @import "img-update";
 @import "loading";
 @import "mobile";
 @import "scroller-y";
-@import "spinner";
 @import "t-editor";
 @import "quick-edit";
 @import "tag-input";
diff --git a/resources/assets/sass/components/float-spinner.scss b/resources/assets/sass/components/float-spinner.scss
new file mode 100644
index 000000000..dabc15f64
--- /dev/null
+++ b/resources/assets/sass/components/float-spinner.scss
@@ -0,0 +1,17 @@
+.common-float-spinner {
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, 0.6);
+
+    .common-float-circular {
+        width: 30px;
+        height: 30px;
+    }
+}
diff --git a/resources/assets/sass/components/spinner.scss b/resources/assets/sass/components/spinner.scss
deleted file mode 100644
index 8238a0ed2..000000000
--- a/resources/assets/sass/components/spinner.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.common-spinner {
-    display: none;
-    position: fixed;
-    z-index: 9999;
-    bottom: 20px;
-    right: 20px;
-    margin: 0 auto;
-    width: 30px;
-    height: 30px;
-
-    .common-circular {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: 100%;
-    }
-}