From 885647cedf712d038fc03d3532a6771d51878a90 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Wed, 9 Aug 2023 09:09:43 +0800
Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E4=B8=80=E4=BA=9B=E8=80=97?=
 =?UTF-8?q?=E6=97=B6=E7=9A=84=E6=93=8D=E4=BD=9C=E6=B7=BB=E5=8A=A0loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/Edit/components/BaseStyle.vue |  1 +
 web/src/pages/Edit/components/Edit.vue      | 20 ++++++++++++++++++++
 web/src/pages/Edit/components/Theme.vue     |  2 ++
 web/src/utils/loading.js                    | 17 +++++++++++++++++
 4 files changed, 40 insertions(+)
 create mode 100644 web/src/utils/loading.js

diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue
index 21571f55..b3f99296 100644
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -857,6 +857,7 @@ export default {
         this.style[key] = value
       }
       this.data.theme.config[key] = value
+      this.$bus.$emit('showLoading')
       this.mindMap.setThemeConfig(this.data.theme.config)
       storeConfig({
         theme: {
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index d79a89ba..6403b2cd 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -69,6 +69,7 @@ import Search from './Search.vue'
 import NodeIconSidebar from './NodeIconSidebar.vue'
 import NodeIconToolbar from './NodeIconToolbar.vue'
 import OutlineEdit from './OutlineEdit.vue'
+import { showLoading, hideLoading } from '@/utils/loading'
 
 // 注册插件
 MindMap
@@ -120,6 +121,7 @@ export default {
   },
   data() {
     return {
+      enableShowLoading: true,
       mindMap: null,
       mindMapData: null,
       prevImg: '',
@@ -143,6 +145,7 @@ export default {
     }
   },
   mounted() {
+    showLoading()
     // this.showNewFeatureInfo()
     this.getData()
     this.init()
@@ -162,11 +165,27 @@ export default {
     this.$bus.$on('startPainter', () => {
       this.mindMap.painter.startPainter()
     })
+    this.$bus.$on('node_tree_render_end', this.handleHideLoading)
+    this.$bus.$on('showLoading', this.handleShowLoading)
     window.addEventListener('resize', () => {
       this.mindMap.resize()
     })
   },
   methods: {
+    // 显示loading
+    handleShowLoading() {
+      this.enableShowLoading = true
+      showLoading()
+    },
+
+    // 渲染结束后关闭loading
+    handleHideLoading() {
+      if (this.enableShowLoading) {
+        this.enableShowLoading = false
+        hideLoading()
+      }
+    },
+
     /**
      * @Author: 王林
      * @Date: 2021-07-03 22:11:37
@@ -315,6 +334,7 @@ export default {
      * @Desc: 动态设置思维导图数据
      */
     setData(data) {
+      this.handleShowLoading()
       if (data.root) {
         this.mindMap.setFullData(data)
       } else {
diff --git a/web/src/pages/Edit/components/Theme.vue b/web/src/pages/Edit/components/Theme.vue
index 2e71b54a..38c1965a 100644
--- a/web/src/pages/Edit/components/Theme.vue
+++ b/web/src/pages/Edit/components/Theme.vue
@@ -136,6 +136,7 @@ export default {
     },
 
     useTheme(theme) {
+      if (theme.value === this.theme) return
       this.theme = theme.value
       this.handleDark()
       const customThemeConfig = this.mindMap.getCustomThemeConfig()
@@ -159,6 +160,7 @@ export default {
     },
 
     changeTheme(theme, config) {
+      this.$bus.$emit('showLoading')
       this.mindMap.setTheme(theme.value)
       storeConfig({
         theme: {
diff --git a/web/src/utils/loading.js b/web/src/utils/loading.js
new file mode 100644
index 00000000..b7deba6c
--- /dev/null
+++ b/web/src/utils/loading.js
@@ -0,0 +1,17 @@
+import { Loading } from 'element-ui'
+
+let loadingInstance = null
+
+export const showLoading = () => {
+  loadingInstance = Loading.service({
+    lock: true
+  })
+}
+
+export const hideLoading = () => {
+    if (loadingInstance) {
+        loadingInstance.close()
+        loadingInstance = null
+    }
+  }
+  
\ No newline at end of file