diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index cb392e68eb..2540e3bff7 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -151,8 +151,8 @@ const data = {
       mouseY: 0,
       width: 0,
       height: 0
-    }
-
+    },
+    previewVisible: false
   },
   mutations: {
     ...animation.mutations,
@@ -172,6 +172,10 @@ const data = {
       state.isClickComponent = status
     },
 
+    setPreviewVisible(state, previewVisible) {
+      state.previewVisible = previewVisible
+    },
+
     setEditMode(state, mode) {
       state.editMode = mode
     },
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index 4b0b2940b8..c55b9c80fe 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -67,6 +67,7 @@ import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
 import { compareItem } from '@/views/chart/chart/compare'
+import { mapState } from 'vuex'
 
 import clickoutside from 'element-ui/src/utils/clickoutside.js'
 import bus from '@/utils/bus'
@@ -163,7 +164,11 @@ export default {
     },
     mainActiveName() {
       return this.$store.state.panel.mainActiveName
-    }
+    },
+    ...mapState([
+      'mobileLayoutStatus',
+      'previewVisible'
+    ])
   },
   watch: {
     chart: {
@@ -444,7 +449,7 @@ export default {
       })
     },
     handleTitleEditer() {
-      if (this.mainActiveName !== 'PanelEdit') return
+      if (this.mainActiveName !== 'PanelEdit' || this.mobileLayoutStatus || this.previewVisible) return
       this.chartTitleEditer = true
       this.chartTitleUpdate = this.chart.title
       this.$nextTick(() => {
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 8ed97e0ff3..8c55c3a9ce 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -98,6 +98,7 @@ import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import clickoutside from 'element-ui/src/utils/clickoutside.js'
 import bus from '@/utils/bus'
+import { mapState } from 'vuex'
 import { compareItem } from '@/views/chart/chart/compare'
 import {
   getChartDetails
@@ -197,7 +198,11 @@ export default {
     },
     mainActiveName() {
       return this.$store.state.panel.mainActiveName
-    }
+    },
+    ...mapState([
+      'mobileLayoutStatus',
+      'previewVisible'
+    ])
   },
   watch: {
     chart: {
@@ -479,7 +484,7 @@ export default {
       })
     },
     handleTitleEditer() {
-      if (this.mainActiveName !== 'PanelEdit') return
+      if (this.mainActiveName !== 'PanelEdit' || this.mobileLayoutStatus || this.previewVisible) return
       this.chartTitleEditer = true
       this.chartTitleUpdate = this.chart.title
       this.$nextTick(() => {
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 1b0dc5b197..94544d3db5 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -778,6 +778,9 @@ export default {
     },
     mobileLayoutStatus() {
       this.restore()
+    },
+    previewVisible(val) {
+      this.$store.commit('setPreviewVisible', val)
     }
   },
   created() {