From c968853092a8b8e72e4fffdf54510616a6e76b90 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Wed, 16 Feb 2022 15:54:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/tips/loadingSvg.svg        | 19 +++++++++++++++++++
 src/components/LoadingComponent/Skeleton.vue |  1 +
 src/components/LoadingComponent/index.vue    | 15 ++++++++++++---
 src/views/chart/ContentDetails/index.vue     | 10 +++++-----
 4 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/images/tips/loadingSvg.svg

diff --git a/src/assets/images/tips/loadingSvg.svg b/src/assets/images/tips/loadingSvg.svg
new file mode 100644
index 00000000..fb2f0e55
--- /dev/null
+++ b/src/assets/images/tips/loadingSvg.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="84" cy="50" r="10" fill="#d4ecc9">
+    <animate attributeName="r" repeatCount="indefinite" dur="0.25s" calcMode="spline" keyTimes="0;1" values="10;0" keySplines="0 0.5 0.5 1" begin="0s"></animate>
+    <animate attributeName="fill" repeatCount="indefinite" dur="1s" calcMode="discrete" keyTimes="0;0.25;0.5;0.75;1" values="#d4ecc9;#82d5ab;#51d6a9;#95d8b4;#d4ecc9" begin="0s"></animate>
+</circle><circle cx="16" cy="50" r="10" fill="#d4ecc9">
+  <animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
+  <animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
+</circle><circle cx="50" cy="50" r="10" fill="#95d8b4">
+  <animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.25s"></animate>
+  <animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.25s"></animate>
+</circle><circle cx="84" cy="50" r="10" fill="#51d6a9">
+  <animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5s"></animate>
+  <animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5s"></animate>
+</circle><circle cx="16" cy="50" r="10" fill="#82d5ab">
+  <animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.75s"></animate>
+  <animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.75s"></animate>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>
\ No newline at end of file
diff --git a/src/components/LoadingComponent/Skeleton.vue b/src/components/LoadingComponent/Skeleton.vue
index dfe881b8..85fc20bb 100644
--- a/src/components/LoadingComponent/Skeleton.vue
+++ b/src/components/LoadingComponent/Skeleton.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <!-- 骨架图 -->
      <Skeleton :repeat="3" :show="true"/>
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/LoadingComponent/index.vue b/src/components/LoadingComponent/index.vue
index 67ddc9fb..09306e7f 100644
--- a/src/components/LoadingComponent/index.vue
+++ b/src/components/LoadingComponent/index.vue
@@ -1,5 +1,14 @@
 <template>
-  <div>
-     <n-spin size="medium" />
+  <!-- svg加载图 -->
+  <div class="go-loading-svg go-flex-center">
+    <img src="~@/assets/images/tips/loadingSvg.svg" alt="" />
   </div>
-</template>
\ No newline at end of file
+</template>
+<style lang="scss" scoped>
+@include go('loading-svg') {
+  width: 100%;
+  img {
+    height: 50px;
+  }
+}
+</style>
diff --git a/src/views/chart/ContentDetails/index.vue b/src/views/chart/ContentDetails/index.vue
index e82d9945..3bf7d02d 100644
--- a/src/views/chart/ContentDetails/index.vue
+++ b/src/views/chart/ContentDetails/index.vue
@@ -76,9 +76,9 @@
 </template>
 
 <script setup lang="ts">
-import { shallowRef, ref, toRefs, watch, computed, reactive } from 'vue'
+import { ref, toRefs, watch, computed } from 'vue'
 import { icon } from '@/plugins'
-import { loadAsyncComponent, loadSkeletonAsyncComponent } from '@/utils'
+import { loadAsyncComponent } from '@/utils'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
@@ -91,9 +91,9 @@ const chartEditStoreStore = useChartEditStoreStore()
 const { ConstructIcon, FlashIcon, DesktopOutlineIcon } = icon.ionicons5
 
 const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
-const CanvasPage = loadSkeletonAsyncComponent(() =>import('./components/CanvasPage/index.vue'))
-const ChartSetting = loadSkeletonAsyncComponent(() =>import('./components/ChartSetting/index.vue'))
-const ChartBehind = loadSkeletonAsyncComponent(() => import('./components/ChartBehind/index.vue'))
+const CanvasPage = loadAsyncComponent(() =>import('./components/CanvasPage/index.vue'))
+const ChartSetting = loadAsyncComponent(() =>import('./components/ChartSetting/index.vue'))
+const ChartBehind = loadAsyncComponent(() => import('./components/ChartBehind/index.vue'))
 
 const collapsed = ref<boolean>(getDetails.value)