From ecd2d779923d7150aded58a341e12aa4769ad0b7 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 5 Jun 2024 11:05:15 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=BF=AB=E9=80=9F=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E5=9B=BE=E6=A0=87=E5=AF=BC=E8=87=B4=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E4=B8=8D=E6=AD=A3=E7=A1=AE=EF=BC=8C=E4=B8=94=E9=80=80=E5=87=BA?=
 =?UTF-8?q?=E4=B8=8D=E4=BF=9D=E5=AD=98=E5=9C=A8=E6=AD=A4=E6=9F=A5=E7=9C=8B?=
 =?UTF-8?q?=E4=BE=9D=E7=84=B6=E4=BF=9D=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/utils/canvasUtils.ts   | 42 +++++++++++++++++
 .../src/views/dashboard/MobileConfigPanel.vue |  7 ++-
 .../src/views/share/link/mobile.vue           | 47 ++++++++++++++++---
 3 files changed, 89 insertions(+), 7 deletions(-)

diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index d21ae7b72e..c1b41bddeb 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -174,6 +174,48 @@ export async function initCanvasData(dvId, busiFlag, callBack) {
   )
 }
 
+export async function backCanvasData(dvId, busiFlag, callBack) {
+  initCanvasDataPrepare(dvId, busiFlag, function ({ canvasDataResult, canvasStyleResult }) {
+    const componentDataCopy = canvasDataResult.filter(ele => !!ele.inMobile)
+    const componentDataId = componentDataCopy.map(ele => ele.id)
+    componentData.value.forEach(ele => {
+      ele.inMobile = componentDataId.includes(ele.id)
+      if (ele.inMobile) {
+        const { mx, my, mSizeX, mSizeY } = componentDataCopy.find(itx => itx.id === ele.id)
+        ele.mx = mx
+        ele.my = my
+        ele.mSizeX = mSizeX
+        ele.mSizeY = mSizeY
+        if (ele.component === 'DeTabs') {
+          ele.propValue.forEach(tabItem => {
+            tabItem.componentData.forEach(tabComponent => {
+              tabComponent.mx = tabComponent.mx
+              tabComponent.my = tabComponent.my
+              tabComponent.mSizeX = tabComponent.mSizeX
+              tabComponent.mSizeY = tabComponent.mSizeY
+            })
+          })
+        }
+      }
+    })
+    dvMainStore.setComponentData(componentData.value)
+    const canvasStyleDataCopy = cloneDeep(canvasStyleData.value)
+    if (!canvasStyleDataCopy.mobileSetting) {
+      canvasStyleDataCopy.mobileSetting = {
+        backgroundColorSelect: false,
+        background: '',
+        color: '#ffffff',
+        backgroundImageEnable: false,
+        customSetting: false
+      }
+    } else {
+      canvasStyleDataCopy.mobileSetting = canvasStyleResult.mobileSetting
+    }
+    dvMainStore.setCanvasStyle(canvasStyleDataCopy)
+    callBack()
+  })
+}
+
 export function initCanvasDataMobile(dvId, busiFlag, callBack) {
   initCanvasDataPrepare(
     dvId,
diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
index a34c45b8f8..b971fb7471 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -8,6 +8,7 @@ import { useEmbedded } from '@/store/modules/embedded'
 import { canvasSave } from '@/utils/canvasUtils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { backCanvasData } from '@/utils/canvasUtils'
 import { storeToRefs } from 'pinia'
 import { debounce } from 'lodash-es'
 import mobileHeader from '@/assets/img/mobile-header.png'
@@ -175,6 +176,7 @@ onBeforeUnmount(() => {
 })
 
 const addToMobile = com => {
+  if (mobileLoading.value) return
   com.inMobile = true
   changeTimes.value++
   mobileStatusChange('addToMobile', JSON.parse(JSON.stringify(unref(com))))
@@ -194,7 +196,10 @@ const handleBack = () => {
     showClose: false
   }).then(() => {
     setTimeout(() => {
-      mobileStatusChange('mobilePatch', undefined)
+      backCanvasData(dvInfo.value.id, 'dashboard', () => {
+        changeTimes.value = 0
+        emits('pcMode')
+      })
     }, 100)
   })
 }
diff --git a/core/core-frontend/src/views/share/link/mobile.vue b/core/core-frontend/src/views/share/link/mobile.vue
index d039fcbb3b..d30cfde54e 100644
--- a/core/core-frontend/src/views/share/link/mobile.vue
+++ b/core/core-frontend/src/views/share/link/mobile.vue
@@ -1,23 +1,33 @@
 <template>
-  <div class="mobile-link-container" v-loading="loading">
+  <div
+    :class="curType === 'dashboard' ? 'mobile-link-container' : '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-else-if="state.canvasStylePreview && dataInitState"
+      v-else-if="state.canvasStylePreview && dataInitState && curType === 'dashboard'"
       :component-data="state.canvasDataPreview"
       :canvas-style-data="state.canvasStylePreview"
       :canvas-view-info="state.canvasViewInfoPreview"
       :dv-info="state.dvInfo"
       :cur-gap="state.curPreviewGap"
     ></de-preview>
+    <PreviewCanvas
+      v-else-if="curType !== 'dashboard'"
+      :class="{ 'hidden-link': loading }"
+      ref="pcanvas"
+      public-link-status="true"
+    />
   </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 PreviewCanvas from '@/views/data-visualization/PreviewCanvas.vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import { ProxyInfo, shareProxy } from './ShareProxy'
 import Exp from './exp.vue'
@@ -71,9 +81,14 @@ const loadCanvasData = (dvId, weight?) => {
     }
   )
 }
+
+const curType = ref('')
+const pcanvas = ref(null)
+
 onMounted(async () => {
-  dvMainStore.setMobileInPc(true)
   const proxyInfo = (await shareProxy.loadProxy()) as ProxyInfo
+  curType.value = proxyInfo.type || 'dashboard'
+  dvMainStore.setMobileInPc(curType.value === 'dashboard')
   if (!proxyInfo?.resourceId) {
     loading.value = false
     return
@@ -82,9 +97,17 @@ onMounted(async () => {
   linkExp.value = !!proxyInfo.exp
   pwdValid.value = !!proxyInfo.pwdValid
   nextTick(() => {
-    loadCanvasData(proxyInfo.resourceId, proxyInfo.type)
-    dvMainStore.setPublicLinkStatus(true)
-    loading.value = false
+    if (curType.value === 'dashboard') {
+      loadCanvasData(proxyInfo.resourceId, proxyInfo.type)
+      dvMainStore.setPublicLinkStatus(true)
+      loading.value = false
+    } else {
+      const method = pcanvas?.value?.loadCanvasDataAsync
+      if (method) {
+        method(proxyInfo.resourceId, proxyInfo.type, null)
+      }
+      loading.value = false
+    }
   })
 })
 </script>
@@ -96,3 +119,15 @@ onMounted(async () => {
   position: relative;
 }
 </style>
+<style lang="less" scoped>
+.link-container {
+  position: absolute !important;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.hidden-link {
+  display: none !important;
+}
+</style>