From b522f6ba045ae863078f83532a17171c2bc92c8a Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Sun, 3 Nov 2024 20:29:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E8=BF=87=E6=BB=A4=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=90=8C=E6=AD=A5PC=E7=AB=AF=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/DePreview.vue   |  6 ++-
 .../data-visualization/canvas/Shape.vue       | 39 ++++++++++++++++---
 .../rich-text/DeRichTextView.vue              |  5 ++-
 .../modules/data-visualization/snapshot.ts    | 10 +++--
 core/core-frontend/src/utils/canvasUtils.ts   | 10 +++--
 .../src/views/dashboard/MobileConfigPanel.vue | 36 +++++++++++------
 .../src/views/mobile/panel/index.vue          | 18 +++++++--
 7 files changed, 93 insertions(+), 31 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index 6f0302c5da..d36476acc2 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -21,7 +21,7 @@ import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
 import EmptyBackground from '../../empty-background/src/EmptyBackground.vue'
 import LinkOptBar from '@/components/data-visualization/canvas/LinkOptBar.vue'
 const dvMainStore = dvMainStoreWithOut()
-const { pcMatrixCount, curComponent, mobileInPc, canvasState } = storeToRefs(dvMainStore)
+const { pcMatrixCount, curComponent, mobileInPc, canvasState, inMobile } = storeToRefs(dvMainStore)
 const openHandler = ref(null)
 const customDatasetParamsRef = ref(null)
 const emits = defineEmits(['onResetLayout'])
@@ -396,7 +396,9 @@ const dataVPreview = computed(
 )
 
 const linkOptBarShow = computed(() => {
-  return Boolean(canvasStyleData.value.suspensionButtonAvailable)
+  return Boolean(
+    canvasStyleData.value.suspensionButtonAvailable && !inMobile.value && !mobileInPc.value
+  )
 })
 
 const downloadAsPDF = () => {
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index 6c1eab82a4..360bda280c 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -9,7 +9,21 @@
     element-loading-background="rgba(255, 255, 255, 1)"
     @dblclick="handleDbClick"
   >
-    <div v-if="showCheck" class="del-from-mobile" @click="delFromMobile">
+    <div
+      title="同步PC设计"
+      v-if="showCheck && ['VQuery'].includes(element.component)"
+      class="refresh-from-pc"
+      @click="updateFromMobile($event, 'syncPcDesign')"
+    >
+      <el-icon>
+        <Icon name="icon_replace_outlined"><replaceOutlined class="svg-icon" /></Icon>
+      </el-icon>
+    </div>
+    <div
+      v-if="showCheck"
+      class="del-from-mobile"
+      @click="updateFromMobile($event, 'delFromMobile')"
+    >
       <el-icon>
         <Icon name="mobile-checkbox"><mobileCheckbox class="svg-icon" /></Icon>
       </el-icon>
@@ -98,6 +112,7 @@
 
 <script setup lang="ts">
 import mobileCheckbox from '@/assets/svg/mobile-checkbox.svg'
+import replaceOutlined from '@/assets/svg/icon_replace_outlined.svg'
 import dvLock from '@/assets/svg/dv-lock.svg'
 import eventBus from '@/utils/eventBus'
 import calculateComponentPositionAndSize, {
@@ -282,9 +297,14 @@ const showCheck = computed(() => {
   return mobileInPc.value && element.value.canvasId === 'canvas-main'
 })
 
-const delFromMobile = () => {
+const updateFromMobile = (e, type) => {
+  console.log('====updateFromMobile===' + type)
+  if (type === 'syncPcDesign') {
+    e.preventDefault()
+    e.stopPropagation()
+  }
   useEmitt().emitter.emit('onMobileStatusChange', {
-    type: 'delFromMobile',
+    type: type,
     value: element.value.id
   })
 }
@@ -865,9 +885,7 @@ const componentBackgroundStyle = computed(() => {
       innerPadding,
       borderRadius
     } = element.value.commonBackground
-    const innerPaddingTarget = ['Group', 'DeTabs'].includes(element.value.component)
-      ? 0
-      : innerPadding
+    const innerPaddingTarget = ['Group'].includes(element.value.component) ? 0 : innerPadding
     const style = {
       padding: innerPaddingTarget * scale.value + 'px',
       borderRadius: borderRadius + 'px'
@@ -1080,6 +1098,15 @@ onMounted(() => {
 <style lang="less" scoped>
 .shape {
   position: absolute;
+  .refresh-from-pc {
+    position: absolute;
+    right: 38px;
+    top: 12px;
+    z-index: 2;
+    font-size: 16px;
+    cursor: pointer;
+    color: var(--ed-color-primary);
+  }
   .del-from-mobile {
     position: absolute;
     right: 12px;
diff --git a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
index 9be59568f5..c354d0b3c7 100644
--- a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
+++ b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
@@ -67,7 +67,7 @@ import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 const snapshotStore = snapshotStoreWithOut()
 const errMsg = ref('')
 const dvMainStore = dvMainStoreWithOut()
-const { canvasViewInfo } = storeToRefs(dvMainStore)
+const { canvasViewInfo, mobileInPc } = storeToRefs(dvMainStore)
 const isError = ref(false)
 const appearanceStore = useAppearanceStoreWithOut()
 
@@ -459,7 +459,8 @@ const computedCanEdit = computed<boolean>(() => {
     editStatus.value &&
     canEdit.value === false &&
     !isError.value &&
-    !disabled.value
+    !disabled.value &&
+    !mobileInPc.value
   )
 })
 
diff --git a/core/core-frontend/src/store/modules/data-visualization/snapshot.ts b/core/core-frontend/src/store/modules/data-visualization/snapshot.ts
index 16f0d85bec..1f4912f744 100644
--- a/core/core-frontend/src/store/modules/data-visualization/snapshot.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/snapshot.ts
@@ -54,12 +54,16 @@ export const snapshotStore = defineStore('snapshot', {
         this.recordSnapshot('snapshotCatchToStore')
       }
     },
-    recordSnapshotCacheToMobile(type) {
-      if (mobileInPc.value && curComponent.value) {
+    recordSnapshotCacheToMobile(type, component = curComponent.value, otherComponent = null) {
+      if (mobileInPc.value && component) {
         //移动端设计
         useEmitt().emitter.emit('onMobileStatusChange', {
           type: 'componentStyleChange',
-          value: { type: type, component: JSON.parse(JSON.stringify(curComponent.value)) }
+          value: {
+            type: type,
+            component: JSON.parse(JSON.stringify(component)),
+            otherComponent: otherComponent
+          }
         })
       }
       this.recordSnapshotCache(type)
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index c79d46e6d3..dcdcd80f76 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -270,7 +270,7 @@ export function refreshOtherComponent(dvId, busiFlag) {
         const component = componentData.value[i]
         if (refreshIdList.includes(component.id) && canvasDataResultMap[component.id]) {
           if (inMobile.value) {
-            componentData.value[i].propValue = canvasDataResultMap[component.id].mPropValue
+            componentData.value[i].propValue = canvasDataResultMap[component.id].propValue
           } else {
             const { top, left, height, width, fontSize } = componentData.value[i].style
             canvasDataResultMap[component.id].style.top = top
@@ -382,9 +382,11 @@ export async function backCanvasData(dvId, mobileViewInfo, busiFlag, callBack) {
           ele.my = my
           ele.mSizeX = mSizeX
           ele.mSizeY = mSizeY
-          ele.mPropValue = mPropValue
           ele.mEvents = mEvents
           ele.mCommonBackground = mCommonBackground
+          if (ele.component === 'VQuery') {
+            ele.mPropValue = mPropValue
+          }
           if (ele.component === 'DeTabs') {
             ele.propValue.forEach(tabItem => {
               tabItem.componentData.forEach(tabComponent => {
@@ -392,9 +394,11 @@ export async function backCanvasData(dvId, mobileViewInfo, busiFlag, callBack) {
                 tabComponent.my = tabComponent.my
                 tabComponent.mSizeX = tabComponent.mSizeX
                 tabComponent.mSizeY = tabComponent.mSizeY
-                tabComponent.mPropValue = tPropValue
                 tabComponent.mEvents = tEvents
                 tabComponent.mCommonBackground = tCommonBackground
+                if (tabComponent.component === 'VQuery') {
+                  tabComponent.mPropValue = tPropValue
+                }
               })
             })
           }
diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
index d6dfd959c1..6260875fc6 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -7,7 +7,7 @@ import MobileBackgroundSelector from './MobileBackgroundSelector.vue'
 import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { useEmbedded } from '@/store/modules/embedded'
-import { canvasSave } from '@/utils/canvasUtils'
+import { canvasSave, findComponentById } from '@/utils/canvasUtils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { backCanvasData } from '@/utils/canvasUtils'
@@ -25,14 +25,6 @@ const emits = defineEmits(['pcMode'])
 const snapshotStore = snapshotStoreWithOut()
 const canvasViewInfoMobile = ref({})
 
-const getComponentStyleDefault = () => {
-  return {
-    top: 0,
-    left: 0,
-    width: 'calc(100% -8px)',
-    height: 'calc(100% -8px)'
-  }
-}
 const mobileStatusChange = (type, value) => {
   if (type === 'componentStyleChange') {
     changeTimes.value++
@@ -127,6 +119,22 @@ const hanedleMessage = event => {
     })
   }
 
+  if (event.data.type === 'syncPcDesign') {
+    const targetComponent = findComponentById(event.data.value)
+    if (targetComponent) {
+      changeTimes.value++
+      let targetViewInfo
+      const sourceViewInfo = canvasViewInfo.value[targetComponent.id]
+      if (sourceViewInfo) {
+        targetViewInfo = deepCopy(sourceViewInfo)
+        targetViewInfo.customStyleMobile = null
+        targetViewInfo.customAttrMobile = null
+        canvasViewInfoMobile[targetComponent.id] = targetViewInfo
+      }
+      snapshotStore.recordSnapshotCacheToMobile('syncPcDesign', targetComponent, targetViewInfo)
+    }
+  }
+
   if (['mobileSaveFromMobile', 'mobilePatchFromMobile'].includes(event.data.type)) {
     componentData.value.forEach(ele => {
       const com = event.data.value[ele.id]
@@ -137,9 +145,11 @@ const hanedleMessage = event => {
         ele.mSizeX = sizeX
         ele.mSizeY = sizeY
         ele.mStyle = style
-        ele.mPropValue = propValue
         ele.mEvents = events
         ele.mCommonBackground = commonBackground
+        if (ele.component === 'VQuery') {
+          ele.mPropValue = propValue
+        }
         if (ele.component === 'DeTabs') {
           ele.propValue.forEach(tabItem => {
             tabItem.componentData.forEach(tabComponent => {
@@ -158,9 +168,11 @@ const hanedleMessage = event => {
               tabComponent.mSizeX = tSizeX
               tabComponent.mSizeY = tSizeY
               tabComponent.mStyle = tStyle
-              tabComponent.mPropValue = tPropValue
               tabComponent.mEvents = tEvents
               tabComponent.mCommonBackground = tCommonBackground
+              if (tabComponent.component === 'VQuery') {
+                tabComponent.mPropValue = tPropValue
+              }
             })
           })
         }
@@ -344,7 +356,7 @@ const save = () => {
                 class="wrapper-design"
                 show-position="preview"
                 :search-count="0"
-                :scale="80"
+                :scale="65"
               />
             </div>
             <div class="mobile-com-mask" @click="addToMobile(item)">
diff --git a/core/core-frontend/src/views/mobile/panel/index.vue b/core/core-frontend/src/views/mobile/panel/index.vue
index b114f4c735..79f525ca93 100644
--- a/core/core-frontend/src/views/mobile/panel/index.vue
+++ b/core/core-frontend/src/views/mobile/panel/index.vue
@@ -31,7 +31,9 @@ const hanedleMessage = event => {
       ele.style = deepCopy(mStyle || ele.style)
       ele.commonBackground = deepCopy(mCommonBackground || ele.commonBackground)
       ele.events = deepCopy(mEvents || ele.events)
-      ele.propValue = deepCopy(mPropValue || ele.propValue)
+      if (ele.component === 'VQuery') {
+        ele.propValue = deepCopy(mPropValue || ele.propValue)
+      }
 
       if (ele.component === 'DeTabs') {
         ele.propValue.forEach(tabItem => {
@@ -56,7 +58,9 @@ const hanedleMessage = event => {
                 tCommonBackground || tabComponent.commonBackground
               )
               tabComponent.events = deepCopy(tEvents || tabComponent.events)
-              tabComponent.propValue = deepCopy(tPropValue || tabComponent.propValue)
+              if (tabComponent.component === 'VQuery') {
+                tabComponent.propValue = deepCopy(tPropValue || tabComponent.propValue)
+              }
             }
           })
         })
@@ -73,7 +77,7 @@ const hanedleMessage = event => {
   }
   // 进行内部组件渲染 type render 渲染 calcData 计算  主组件渲染
   if (event.data.type === 'componentStyleChange') {
-    const { type, component } = event.data.value
+    const { type, component, otherComponent } = event.data.value
     if (type === 'renderChart') {
       mobileViewStyleSwitch(component)
       useEmitt().emitter.emit('renderChart-' + component.id, component)
@@ -86,6 +90,14 @@ const hanedleMessage = event => {
     } else if (['style', 'commonBackground', 'events', 'propValue'].includes(type)) {
       const mobileComponent = findComponentById(component.id)
       mobileComponent[type] = component[type]
+    } else if (['syncPcDesign'].includes(type)) {
+      const mobileComponent = findComponentById(component.id)
+      mobileComponent['style'] = component['style']
+      mobileComponent['commonBackground'] = component['commonBackground']
+      mobileComponent['events'] = component['events']
+      mobileComponent['propValue'] = component['propValue']
+      mobileViewStyleSwitch(otherComponent)
+      useEmitt().emitter.emit('renderChart-' + component.id, otherComponent)
     }
   }