diff --git a/core/core-frontend/src/components/dashboard/DashboardHiddenComponent.vue b/core/core-frontend/src/components/dashboard/DashboardHiddenComponent.vue
index 9c61f41c9d..db90e2895e 100644
--- a/core/core-frontend/src/components/dashboard/DashboardHiddenComponent.vue
+++ b/core/core-frontend/src/components/dashboard/DashboardHiddenComponent.vue
@@ -39,7 +39,7 @@ const addToDashboard = item => {
             class="wrapper-design"
             show-position="viewDialog"
             :search-count="0"
-            :scale="65"
+            :scale="canvasStyleData.scale"
           />
         </div>
         <div class="select-to-dashboard" @click="addToDashboard(item)">
diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index e1428b8391..f4e67f907a 100644
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@@ -396,6 +396,7 @@ const batchOptStatusChange = value => {
     state.preBatchComponentData = []
     state.preBatchCanvasViewInfo = {}
   }
+  dvMainStore.setHiddenListStatus(false)
   dvMainStore.setBatchOptStatus(value)
 }
 
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index 05c4b2b240..4a1aeaae40 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -13,6 +13,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { activeWatermarkCheckUser, removeActiveWatermark } from '@/components/watermark/watermark'
 import { isMobile } from '@/utils/utils'
 import { isDashboard } from '@/utils/canvasUtils'
+import view from '@antv/g2/src/chart/view'
 
 const componentWrapperInnerRef = ref(null)
 const componentEditBarRef = ref(null)
@@ -369,6 +370,7 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
     element-loading-text="导出中..."
     element-loading-background="rgba(255, 255, 255, 1)"
   >
+    --- {{ viewInfo?.id }}
     <component-edit-bar
       v-if="!showPosition.includes('canvas') && !props.isSelector"
       class="wrapper-edit-bar"
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 b9f9c1c8da..7c849464bd 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -28,6 +28,13 @@
         <Icon name="mobile-checkbox"><mobileCheckbox class="svg-icon" /></Icon>
       </el-icon>
     </div>
+    <div v-if="hiddenListStatus" class="del-from-mobile" @mousedown.stop="hiddenComponent">
+      <el-tooltip :content="$t('visualization.hidden')" placement="bottom">
+        <el-icon @click.stop>
+          <Icon @click.stop name="dvHidden"><dvHidden class="svg-icon" /></Icon>
+        </el-icon>
+      </el-tooltip>
+    </div>
     <div
       class="shape-outer"
       v-show="contentDisplay"
@@ -132,6 +139,7 @@ import Icon from '@/components/icon-custom/src/Icon.vue'
 import ComponentEditBar from '@/components/visualization/ComponentEditBar.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
+import dvHidden from '@/assets/svg/dv-hidden.svg'
 import { groupSizeStyleAdaptor, groupStyleRevert, tabInnerStyleRevert } from '@/utils/style'
 import {
   checkJoinTab,
@@ -166,7 +174,8 @@ const {
   tabMoveInActiveId,
   tabMoveOutComponentId,
   mobileInPc,
-  mainScrollTop
+  mainScrollTop,
+  hiddenListStatus
 } = storeToRefs(dvMainStore)
 const { editorMap, areaData, isCtrlOrCmdDown } = storeToRefs(composeStore)
 const emit = defineEmits([
@@ -195,6 +204,16 @@ const state = reactive({
   tabMoveInXOffset: 40,
   collisionGap: 10 // 碰撞深度有效区域,
 })
+const hiddenComponent = event => {
+  event.preventDefault()
+  event.stopPropagation()
+  if (element.value) {
+    element.value.dashboardHidden = true
+    eventBus.emit('removeMatrixItemPosition-' + canvasId.value, element.value)
+    snapshotStore.recordSnapshotCache('hide')
+    dvMainStore.setLastHiddenComponent(element.value.id)
+  }
+}
 
 const contentDisplay = ref(true)
 const shapeLock = computed(() => {
diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
index 6e13ea7481..440caa4190 100644
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@@ -286,6 +286,7 @@ export const dvMainStore = defineStore('dataVisualization', {
     },
     setCurComponent({ component, index }) {
       this.setCurTabName(null)
+      this.setHiddenListStatus(false)
       if (!component && this.curComponent) {
         this.curComponent['editing'] = false
         this.curComponent['resizing'] = false
diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index 281695e05f..cb8657e135 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -77,7 +77,8 @@ const {
   canvasStyleData,
   mobileInPc,
   inMobile,
-  editMode
+  editMode,
+  hiddenListStatus
 } = storeToRefs(dvMainStore)
 
 const props = defineProps({