refactor(仪表板): 隐藏组件操作优化

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)">

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)
 }
 

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"

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

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

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