From ca7c8ceeff93105f88cc3084c646c1cebf2f5699 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Fri, 15 Mar 2024 16:29:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BB=AA?=
 =?UTF-8?q?=E8=A1=A8=E6=9D=BF=E7=9A=84=E5=85=AC=E5=85=B1=E9=93=BE=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E5=9C=A8=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=89=93?=
 =?UTF-8?q?=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/permission.ts          |  9 +-
 core/core-frontend/src/permissionMobile.ts    |  2 +-
 core/core-frontend/src/router/mobile.ts       |  7 ++
 .../src/views/share/link/mobile.vue           | 92 +++++++++++++++++++
 4 files changed, 106 insertions(+), 4 deletions(-)
 create mode 100644 core/core-frontend/src/views/share/link/mobile.vue

diff --git a/core/core-frontend/src/permission.ts b/core/core-frontend/src/permission.ts
index c514b93ac5..fbc17be658 100644
--- a/core/core-frontend/src/permission.ts
+++ b/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) {
diff --git a/core/core-frontend/src/permissionMobile.ts b/core/core-frontend/src/permissionMobile.ts
index 23c3b718f6..eae649f924 100644
--- a/core/core-frontend/src/permissionMobile.ts
+++ b/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') // 否则全部重定向到登录页
diff --git a/core/core-frontend/src/router/mobile.ts b/core/core-frontend/src/router/mobile.ts
index 29ded300f0..7d2e5981a1 100644
--- a/core/core-frontend/src/router/mobile.ts
+++ b/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',
diff --git a/core/core-frontend/src/views/share/link/mobile.vue b/core/core-frontend/src/views/share/link/mobile.vue
new file mode 100644
index 0000000000..7a95efecd1
--- /dev/null
+++ b/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>