fix(移动端): 添加骨架屏

core/core-frontend/src/hooks/web/useLoading.ts

@@ -1,9 +1,13 @@
 import { ElLoading } from 'element-plus-secondary'
 let loadingInstance = null
 
-export const useLoading = () => {
+export const useLoading = (customClass = '', text = '') => {
   const open = () => {
-    loadingInstance = ElLoading.service({ fullscreen: true })
+    loadingInstance = ElLoading.service({
+      fullscreen: true,
+      customClass,
+      text
+    })
   }
 
   const close = () => {

core/core-frontend/src/permissionMobile.ts

@@ -8,13 +8,51 @@ import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 import { useLinkStoreWithOut } from '@/store/modules/link'
+import { useLoading } from '@/hooks/web/useLoading'
+import { h } from 'vue'
 
 const appearanceStore = useAppearanceStoreWithOut()
 const permissionStore = usePermissionStoreWithOut()
 const { wsCache } = useCache()
 const userStore = useUserStoreWithOut()
 const linkStore = useLinkStoreWithOut()
+// 简化版骨架屏
+const skeletonContent = h(
+  'div',
+  {
+    style: {
+      padding: '10px',
+      width: '100%',
+      height: '100%'
+    }
+  },
+  [
+    h(
+      'style',
+      {},
+      `
+    @keyframes shimmer {
+      0% { background-position: -200% 0; }
+      100% { background-position: 200% 0; }
+    }
+    .skeleton-bar {
+      height: 16px;
+      margin-bottom: 12px;
+      border-radius: 4px;
+      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+    }
+  `
+    ),
+    h('div', { class: 'skeleton-bar', style: { width: '100%', height: '24%' } }),
+    h('div', { class: 'skeleton-bar', style: { width: '100%', height: '24%' } }),
+    h('div', { class: 'skeleton-bar', style: { width: '100%', height: '24%' } }),
+    h('div', { class: 'skeleton-bar', style: { width: '100%', height: '24%' } })
+  ]
+)
 
+const { open } = useLoading('skeleton-loading', skeletonContent as any)
 const { start, done } = useNProgress()
 const interactiveStore = interactiveStoreWithOut()
 
@@ -22,6 +60,9 @@ const { loadStart, loadDone } = usePageLoading()
 const whiteList = ['/login', '/panel', '/DashboardEmpty', '/preview'] // 不重定向白名单
 
 router.beforeEach(async (to, _, next) => {
+  if (to.path.startsWith('/de-link/')) {
+    open()
+  }
   start()
   loadStart()
   await appearanceStore.setAppearance()

core/core-frontend/src/style/index.less

@@ -772,3 +772,22 @@ strong {
     transform: translate(46px, 0px) !important;
   }
 }
+
+.skeleton-loading {
+  .ed-loading-spinner {
+    margin-top: 0 !important;
+    top: 0;
+    height: 100% !important;
+    width: 100%;
+  }
+  .ed-loading-text {
+    display: flex;
+    height: 100% !important;
+    width: 100%;
+    align-items: center;
+    flex-direction: column;
+  }
+  .circular {
+    display: none !important;
+  }
+}

core/core-frontend/src/views/data-visualization/PreviewCanvasMobile.vue

@@ -18,10 +18,12 @@ import { filterEnumMapSync } from '@/utils/componentUtils'
 import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { downloadCanvas2 } from '@/utils/imgUtils'
+import { useLoading } from '@/hooks/web/useLoading'
 
 const dvMainStore = dvMainStoreWithOut()
 const { t } = useI18n()
 const embeddedStore = useEmbedded()
+const { close } = useLoading()
 
 const previewCanvasContainer = ref(null)
 const downloadStatus = ref(false)
@@ -93,6 +95,7 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
       dvMainStore.setNowPanelOuterParamsInfoV2(rsp.data, dvId)
     })
   } catch (error) {
+    close()
     router.push('/login')
     return
   }
@@ -125,6 +128,8 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
       canvasViewInfoPreview,
       curPreviewGap
     }) {
+      close()
+
       if (!dvInfo.mobileLayout && dvType === 'dashboard') {
         await router.push('/DashboardEmpty')
         return
@@ -155,9 +160,7 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
       }
       initBrowserTimer()
     }
-  ).catch(err => {
-    console.log(err)
-  })
+  )
 }
 
 let p = null