refactor(仪表板): 仪表板预览显示，文案等优化

core/core-frontend/src/components/dashboard/DashboardHiddenComponent.vue

@@ -5,6 +5,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import dvHidden from '@/assets/svg/dv-hidden.svg'
 import { computed } from 'vue'
 import Icon from '../icon-custom/src/Icon.vue'
+import EmptyBackground from '../empty-background/src/EmptyBackground.vue'
 const dvMainStore = dvMainStoreWithOut()
 const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore)
 const emit = defineEmits(['cancelHidden'])
@@ -21,32 +22,42 @@ const addToDashboard = item => {
 
 <template>
   <div class="config-hidden">
-    <div
-      :style="{ height: '180px', width: '260px' }"
-      class="wrapper-inner-adaptor"
-      v-for="item in componentsHidden"
-      :key="item.id"
-    >
-      <div class="component-outer">
-        <ComponentWrapper
-          canvas-id="canvas-main"
-          :canvas-style-data="canvasStyleData"
-          :dv-info="dvInfo"
-          :canvas-view-info="canvasViewInfo"
-          :view-info="canvasViewInfo[item.id]"
-          :config="item"
-          class="wrapper-design"
-          show-position="viewDialog"
-          :search-count="0"
-          :scale="65"
-        />
+    <template v-if="componentsHidden?.length > 0">
+      <div
+        :style="{ height: '180px', width: '260px' }"
+        class="wrapper-inner-adaptor"
+        v-for="item in componentsHidden"
+        :key="item.id"
+      >
+        <div class="component-outer">
+          <ComponentWrapper
+            canvas-id="canvas-main"
+            :canvas-style-data="canvasStyleData"
+            :dv-info="dvInfo"
+            :canvas-view-info="canvasViewInfo"
+            :view-info="canvasViewInfo[item.id]"
+            :config="item"
+            class="wrapper-design"
+            show-position="viewDialog"
+            :search-count="0"
+            :scale="65"
+          />
+        </div>
+        <div class="select-to-dashboard" @click="addToDashboard(item)">
+          <el-tooltip effect="dark" :content="$t('visualization.cancel_hidden')" placement="bottom">
+            <el-icon style="font-size: 16px">
+              <Icon name="dvHidden"><dvHidden class="svg-icon" /></Icon>
+            </el-icon>
+          </el-tooltip>
+        </div>
       </div>
-      <div class="select-to-dashboard" @click="addToDashboard(item)">
-        <el-icon style="font-size: 16px">
-          <Icon name="dvHidden"><dvHidden class="svg-icon" /></Icon>
-        </el-icon>
-      </div>
-    </div>
+    </template>
+    <template v-else>
+      <empty-background
+        :description="$t('visualization.no_hidden_components')"
+        img-type="noneWhite"
+      />
+    </template>
   </div>
 </template>
 

core/core-frontend/src/components/data-visualization/canvas/DePreview.vue

@@ -21,6 +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'
 import { isDesktop } from '@/utils/ModelUtil'
+import { isMobile } from '@/utils/utils'
 const dvMainStore = dvMainStoreWithOut()
 const { pcMatrixCount, curComponent, mobileInPc, canvasState, inMobile } = storeToRefs(dvMainStore)
 const openHandler = ref(null)
@@ -144,13 +145,19 @@ const isReport = computed(() => {
 
 const popComponentData = computed(() =>
   componentData.value.filter(
-    ele => ele.category && ele.category === 'hidden' && !ele?.dashboardHidden
+    ele =>
+      ele.category &&
+      ele.category === 'hidden' &&
+      (!ele?.dashboardHidden || (ele?.dashboardHidden && isMobile()))
   )
 )
 
 const baseComponentData = computed(() =>
   componentData.value.filter(
-    ele => ele?.category !== 'hidden' && ele.component !== 'GroupArea' && !ele?.dashboardHidden
+    ele =>
+      ele?.category !== 'hidden' &&
+      ele.component !== 'GroupArea' &&
+      (!ele?.dashboardHidden || (ele?.dashboardHidden && isMobile()))
   )
 )
 const canvasStyle = computed(() => {

core/core-frontend/src/components/visualization/ComponentEditBar.vue

@@ -507,6 +507,7 @@ const hiddenComponent = () => {
   if (curComponent.value) {
     curComponent.value.dashboardHidden = true
     eventBus.emit('removeMatrixItemPosition-' + canvasId.value, curComponent.value)
+    dvMainStore.setHiddenListStatus(true)
   }
   snapshotStore.recordSnapshotCache('hide')
 }

core/core-frontend/src/locales/en.ts

@@ -2814,6 +2814,7 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     column_name: 'Field name'
   },
   visualization: {
+    no_hidden_components: 'No Hidden Components',
     hidden_components: 'Hidden Components',
     dashboard_adaptor: 'Zoom Mode',
     scale_keep_height_and_width: 'Canvas Ratio',

core/core-frontend/src/locales/tw.ts

@@ -2742,6 +2742,7 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    no_hidden_components: '當前無隱藏組件',
     hidden_components: '已隱藏的組件',
     dashboard_adaptor: '縮放模式',
     scale_keep_height_and_width: '按畫布比例縮放',

core/core-frontend/src/locales/zh-CN.ts

@@ -2744,6 +2744,7 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    no_hidden_components: '当前无隐藏组件',
     hidden_components: '已隐藏的组件',
     dashboard_adaptor: '缩放模式',
     scale_keep_height_and_width: '按画布比例缩放',