refactor(仪表板): 过滤组件支持移动端同步PC端样式，样式调整

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 = () => {

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;