feat: 新增加载提示

src/views/chart/ContentLoad/index.ts

@@ -0,0 +1,3 @@
+import ContentLoad from './index.vue'
+
+export { ContentLoad }

src/views/chart/ContentLoad/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <n-modal :show="showModal" :close-on-esc="false" transform-origin="center">
+    <div>
+      <span> 拼命加载中... </span>
+      <n-progress type="line" :color="themeColor" :percentage="percentage" style="width: 300px" />
+    </div>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+const chartLayoutStore = useChartLayoutStore()
+const designStore = useDesignStore()
+const showModal = ref(false)
+const percentage = ref(0)
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 监听百分比
+watch(
+  () => chartLayoutStore.getPercentage,
+  newValue => {
+    percentage.value = newValue
+    showModal.value = newValue > 0
+  }
+)
+</script>

src/views/chart/hooks/useSync.hook.ts

@@ -2,6 +2,8 @@ import { getUUID } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
 import { BaseEvent, EventLife, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
@@ -85,7 +87,7 @@ const componentMerge = (newObject: any, sources: any, notComponent = false) => {
 export const useSync = () => {
   const chartEditStore = useChartEditStore()
   const chartHistoryStore = useChartHistoryStore()
-
+  const chartLayoutStore = useChartLayoutStore()
   /**
    * * 组件动态注册
    * @param projectData 项目数据
@@ -151,7 +153,14 @@ export const useSync = () => {
     for (const key in projectData) {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
+        let loadIndex = 0
+        const listLength = projectData[key].length;
+        console.log(listLength)
         for (const comItem of projectData[key]) {
+          // 设置加载数量
+          let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
+          chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
+          // 判断类型
           if (comItem.isGroup) {
             // 创建分组
             let groupClass = new PublicGroupConfigClass()
@@ -182,6 +191,9 @@ export const useSync = () => {
         componentMerge(chartEditStore[key], projectData[key], true)
       }
     }
+
+    // 清除数量
+    chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, 0)
   }
 
   return {

src/views/chart/index.vue

@@ -32,6 +32,8 @@
     :on-clickoutside="onClickOutSide"
     @select="handleMenuSelect"
   ></n-dropdown>
+  <!-- 加载蒙层 -->
+  <content-load></content-load>
 </template>
 
 <script setup lang="ts">
@@ -53,6 +55,7 @@ const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle
 const ContentLayers = loadAsyncComponent(() => import('./ContentLayers/index.vue'))
 const ContentCharts = loadAsyncComponent(() => import('./ContentCharts/index.vue'))
 const ContentConfigurations = loadAsyncComponent(() => import('./ContentConfigurations/index.vue'))
+const ContentLoad = loadAsyncComponent(() => import('./ContentLoad/index.vue'))
 
 // 右键
 const {