Merge pull request #8542 from dataease/pr@dev-v2_mobile_public

feat(仪表板): 仪表板的公共链接可以在移动端打开

core/core-frontend/src/permission.ts

@@ -27,11 +27,14 @@ const whiteList = ['/login', '/de-link', '/chart-view'] // 不重定向白名单
 router.beforeEach(async (to, from, next) => {
   start()
   loadStart()
-
-  if (isMobile() && to.name !== 'link') {
+  if (isMobile()) {
     done()
     loadDone()
-    window.location.href = window.origin + '/mobile.html#/index'
+    if (to.name === 'link') {
+      window.location.href = window.origin + '/mobile.html#' + to.path
+    } else {
+      window.location.href = window.origin + '/mobile.html#/index'
+    }
   }
   let isDesktop = wsCache.get('app.desktop')
   if (isDesktop === null) {

core/core-frontend/src/permissionMobile.ts

@@ -39,7 +39,7 @@ router.beforeEach(async (to, _, next) => {
       next()
     }
   } else {
-    if (whiteList.includes(to.path)) {
+    if (whiteList.includes(to.path) || to.path.includes('/de-link')) {
       next()
     } else {
       next('/login') // 否则全部重定向到登录页

core/core-frontend/src/router/mobile.ts

@@ -31,6 +31,13 @@ export const routes: AppRouteRecordRaw[] = [
     meta: {},
     component: () => import('@/views/mobile/panel/index.vue')
   },
+  {
+    path: '/de-link/:uuid',
+    name: 'link',
+    hidden: true,
+    meta: {},
+    component: () => import('@/views/share/link/mobile.vue')
+  },
   {
     path: '/panel/mobile',
     name: 'mobile',

core/core-frontend/src/views/share/link/mobile.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="mobile-link-container" v-loading="loading">
+    <LinkError v-if="!loading && !linkExist" />
+    <Exp v-else-if="!loading && linkExp" />
+    <PwdTips v-else-if="!loading && !pwdValid" />
+    <de-preview
+      ref="dashboardPreview"
+      v-if="state.canvasStylePreview && dataInitState"
+      :component-data="state.canvasDataPreview"
+      :canvas-style-data="state.canvasStylePreview"
+      :canvas-view-info="state.canvasViewInfoPreview"
+      :dv-info="state.dvInfo"
+      :cur-gap="state.curPreviewGap"
+    ></de-preview>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, nextTick, ref, reactive } from 'vue'
+import { initCanvasDataMobile } from '@/utils/canvasUtils'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
+import { ProxyInfo, shareProxy } from './ShareProxy'
+import Exp from './exp.vue'
+import LinkError from './error.vue'
+import PwdTips from './pwd.vue'
+const linkExist = ref(false)
+const loading = ref(true)
+const linkExp = ref(false)
+const pwdValid = ref(false)
+const dvMainStore = dvMainStoreWithOut()
+const state = reactive({
+  canvasDataPreview: null,
+  canvasStylePreview: null,
+  canvasViewInfoPreview: null,
+  dvInfo: {
+    name: ''
+  },
+  curPreviewGap: 0
+})
+const dataInitState = ref(true)
+const dashboardPreview = ref(null)
+const loadCanvasData = (dvId, weight?) => {
+  dataInitState.value = false
+  initCanvasDataMobile(
+    dvId,
+    'dashboard',
+    function ({
+      canvasDataResult,
+      canvasStyleResult,
+      dvInfo,
+      canvasViewInfoPreview,
+      curPreviewGap
+    }) {
+      dvInfo['weight'] = weight
+      state.canvasDataPreview = canvasDataResult
+      state.canvasStylePreview = canvasStyleResult
+      state.canvasViewInfoPreview = canvasViewInfoPreview
+      state.dvInfo = dvInfo
+      state.curPreviewGap = curPreviewGap
+      dataInitState.value = true
+      nextTick(() => {
+        document.title = dvInfo.name
+        dashboardPreview.value.restore()
+      })
+    }
+  )
+}
+onMounted(async () => {
+  dvMainStore.setMobileInPc(true)
+  const proxyInfo = (await shareProxy.loadProxy()) as ProxyInfo
+  if (!proxyInfo?.resourceId) {
+    loading.value = false
+    return
+  }
+  linkExist.value = true
+  linkExp.value = !!proxyInfo.exp
+  pwdValid.value = !!proxyInfo.pwdValid
+  nextTick(() => {
+    loadCanvasData(proxyInfo.resourceId, proxyInfo.type)
+    dvMainStore.setPublicLinkStatus(true)
+    loading.value = false
+  })
+})
+</script>
+<style lang="less" scoped>
+.mobile-link-container {
+  width: 100vw;
+  height: 100vh;
+  overflow-y: auto;
+  position: relative;
+}
+</style>