From 6e272c7047e927259419e1266ff4ca7f290f91d2 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 4 Dec 2024 09:44:35 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8DIOS=E8=AE=BE=E5=A4=87=E9=83=A8=E5=88=86css?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E4=B8=8D=E6=94=AF=E6=8C=81=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E7=9A=84=E7=BC=A9=E6=94=BE=E4=B8=8D=E4=B8=80=E8=87=B4=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/custom-component/user-view/Component.vue | 16 ++++++++++++++--
 .../src/custom-component/v-query/Component.vue   | 15 +++++++++++++--
 core/core-frontend/src/utils/utils.ts            |  4 ++++
 .../views/components/ChartComponentS2.vue        | 16 ++++++++++++++--
 4 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/core/core-frontend/src/custom-component/user-view/Component.vue b/core/core-frontend/src/custom-component/user-view/Component.vue
index b0949f5994..40460ea88d 100644
--- a/core/core-frontend/src/custom-component/user-view/Component.vue
+++ b/core/core-frontend/src/custom-component/user-view/Component.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed, toRefs, PropType } from 'vue'
+import { computed, toRefs, PropType, CSSProperties } from 'vue'
 import Chart from '@/views/chart/components/views/index.vue'
+import { isISOMobile } from '@/utils/utils'
 
 const props = defineProps({
   active: {
@@ -69,7 +70,18 @@ const props = defineProps({
 const { element, view, active, searchCount, scale } = toRefs(props)
 const autoStyle = computed(() => {
   if (element.value.innerType === 'rich-text') {
-    return { zoom: scale.value }
+    if (isISOMobile()) {
+      return {
+        position: 'absolute',
+        height: 100 / scale.value + '%!important',
+        width: 100 / scale.value + '%!important',
+        left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+        top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+        transform: 'scale(' + scale.value + ') translateZ(0)'
+      } as CSSProperties
+    } else {
+      return { zoom: scale.value }
+    }
   } else {
     return {}
   }
diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue
index 0e425128f5..1cb482c079 100644
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/core/core-frontend/src/custom-component/v-query/Component.vue
@@ -2,7 +2,7 @@
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import eventBus from '@/utils/eventBus'
-import { isMobile } from '@/utils/utils'
+import { isISOMobile, isMobile } from '@/utils/utils'
 import { ElMessage } from 'element-plus-secondary'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import QueryConditionConfiguration from './QueryConditionConfiguration.vue'
@@ -674,7 +674,18 @@ const marginRight = computed<CSSProperties>(() => {
 })
 
 const autoStyle = computed(() => {
-  return { zoom: scale.value }
+  if (isISOMobile()) {
+    return {
+      position: 'absolute',
+      height: 100 / scale.value + '%!important',
+      width: 100 / scale.value + '%!important',
+      left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+      top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+      transform: 'scale(' + scale.value + ') translateZ(0)'
+    } as CSSProperties
+  } else {
+    return { zoom: scale.value }
+  }
 })
 </script>
 
diff --git a/core/core-frontend/src/utils/utils.ts b/core/core-frontend/src/utils/utils.ts
index bbbd14f51b..e5c8c52306 100644
--- a/core/core-frontend/src/utils/utils.ts
+++ b/core/core-frontend/src/utils/utils.ts
@@ -136,6 +136,10 @@ export function isMobile() {
   )
 }
 
+export function isISOMobile() {
+  return navigator.userAgent.match(/(iPhone|iPad|iPod)/i) && !isTablet()
+}
+
 export const isDingTalk = window.navigator.userAgent.toLowerCase().includes('dingtalk')
 
 export const setTitle = (title?: string) => {
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
index 38ffa87323..80d8cfa725 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {
   computed,
+  CSSProperties,
   inject,
   nextTick,
   onBeforeUnmount,
@@ -25,7 +26,7 @@ import ChartError from '@/views/chart/components/views/components/ChartError.vue
 import { defaultsDeep, cloneDeep, debounce } from 'lodash-es'
 import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
-import { deepCopy } from '@/utils/utils'
+import { deepCopy, isISOMobile } from '@/utils/utils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { trackBarStyleCheck } from '@/utils/canvasUtils'
 import { type SpreadSheet } from '@antv/s2'
@@ -628,7 +629,18 @@ onBeforeUnmount(() => {
 })
 
 const autoStyle = computed(() => {
-  return { zoom: scale.value }
+  if (isISOMobile()) {
+    return {
+      position: 'absolute',
+      height: 100 / scale.value + '%!important',
+      width: 100 / scale.value + '%!important',
+      left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+      top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+      transform: 'scale(' + scale.value + ') translateZ(0)'
+    } as CSSProperties
+  } else {
+    return { zoom: scale.value }
+  }
 })
 
 const autoHeightStyle = computed(() => {