refactor(仪表板、数据大屏): Tab标题隐藏等优化

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

@@ -131,7 +131,12 @@ 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 { groupSizeStyleAdaptor, groupStyleRevert, groupStyleRevertBatch } from '@/utils/style'
+import {
+  groupSizeStyleAdaptor,
+  groupStyleRevert,
+  groupStyleRevertBatch,
+  tabInnerStyleRevert
+} from '@/utils/style'
 import { isDashboard, isGroupCanvas, isMainCanvas, isTabCanvas } from '@/utils/canvasUtils'
 import Board from '@/components/de-board/Board.vue'
 import { activeWatermarkCheckUser, removeActiveWatermark } from '@/components/watermark/watermark'
@@ -789,6 +794,12 @@ const handleMouseDownOnPoint = (point, e) => {
   }
 
   const up = () => {
+    // 如果内部组件保持尺寸时，这里在鼠标抬起时，重新计算一下内部组件占比
+    if (['DeTabs'].includes(element.value.component) && element.value.resizeInnerKeep) {
+      console.log('===test3==')
+      tabInnerStyleRevert(element.value)
+    }
+
     dashboardActive.value && emit('onMouseUp')
     element.value['resizing'] = false
     document.removeEventListener('mousemove', move)
@@ -982,6 +993,7 @@ const tabMoveInCheck = async () => {
     for (const item of nodes) {
       if (
         item.className !== undefined &&
+        typeof item.className === 'string' &&
         item.className.split(' ').includes('shape') &&
         item.getAttribute('component-id') !== domId.value && // 去掉当前
         item.getAttribute('tab-is-check') !== null &&

core/core-frontend/src/custom-component/common/CommonAttr.vue

@@ -89,6 +89,14 @@ const backgroundCustomShow = computed(() => {
       !['CanvasBoard', 'CanvasIcon', 'CircleShape', 'RectShape'].includes(element.value.component))
   )
 })
+const tabTitleShow = computed(() => {
+  return element.value && element.value.style && element.value.component === 'DeTabs'
+})
+
+const styleShow = computed(() => {
+  return element.value && element.value.style && element.value.component !== 'DeTabs'
+})
+
 onMounted(() => {
   const erd = elementResizeDetectorMaker()
   containerWidth.value = containerRef.value?.offsetWidth
@@ -122,8 +130,23 @@ onMounted(() => {
         />
       </el-collapse-item>
       <slot></slot>
+      <collapse-switch-item
+        v-if="tabTitleShow"
+        v-model="element.style.showTabTitle"
+        @modelChange="val => onStyleAttrChange({ key: 'showTabTitle', value: val })"
+        :themes="themes"
+        title="Tab标签"
+        name="tabTitle"
+        class="common-style-area"
+      >
+        <common-style-set
+          @onStyleAttrChange="onStyleAttrChange"
+          :themes="themes"
+          :element="element"
+        ></common-style-set>
+      </collapse-switch-item>
       <el-collapse-item
-        v-if="element && element.style"
+        v-if="styleShow"
         :effect="themes"
         title="样式"
         name="style"

core/core-frontend/src/custom-component/common/CommonStyleSet.vue

@@ -407,11 +407,6 @@ const backdropBlurList = [
   { name: '30', value: 'blur(30px)' }
 ]
 
-const titleHideList = [
-  { name: '隐藏', value: true },
-  { name: '显示', value: false }
-]
-
 const styleForm = computed<any>(() => element.value.style)
 const state = reactive({
   fontSize: [],
@@ -508,13 +503,6 @@ const styleOptionKeyArray = [
     width: '90px',
     icon: dvStyleOpacity
   },
-  {
-    value: 'titleHide',
-    label: '标题样式',
-    customOption: titleHideList,
-    width: '90px',
-    icon: dvStyleTabHead
-  },
   {
     value: 'backdropFilter',
     label: '背景模糊',

core/core-frontend/src/custom-component/component-list.ts

@@ -554,7 +554,8 @@ const list = [
       headHorizontalPosition: 'left',
       headFontColor: '#000000',
       headFontActiveColor: '#000000',
-      titleHide: false
+      titleHide: false,
+      showTabTitle: true
     }
   },
   {

core/core-frontend/src/custom-component/de-tabs/Component.vue

@@ -5,8 +5,8 @@
     :class="[
       headClass,
       `ed-tabs-${curThemes}`,
-      { 'title-hidde-tab': hideTitle },
-      { 'title-show-tab': !hideTitle }
+      { 'title-hidde-tab': !showTabTitleFlag },
+      { 'title-show-tab': showTabTitleFlag }
     ]"
     class="custom-tabs-head"
     ref="tabComponentRef"
@@ -19,7 +19,7 @@
       :active-color="activeColor"
       :border-color="noBorderColor"
       :border-active-color="borderActiveColor"
-      :hide-title="hideTitle"
+      :hide-title="!showTabTitleFlag"
     >
       <template :key="tabItem.name" v-for="tabItem in element.propValue">
         <el-tab-pane
@@ -225,16 +225,11 @@ const editableTabsValue = ref(null)
 const noBorderColor = ref('none')
 let currentInstance
 
-const hideTitle = computed(() => {
-  if (
-    element.value &&
-    element.value.style &&
-    element.value.style.titleHide &&
-    typeof element.value.style.titleHide === 'boolean'
-  ) {
-    return element.value.style.titleHide
-  } else {
+const showTabTitleFlag = computed(() => {
+  if (element.value && element.value.style && element.value.style?.showTabTitle === false) {
     return false
+  } else {
+    return element.value.style?.showTabTitle
   }
 })
 

core/core-frontend/src/utils/canvasUtils.ts

@@ -150,7 +150,7 @@ export function historyItemAdaptor(
   }
 
   if (componentItem.component === 'DeTabs') {
-    componentItem.style['titleHide'] = componentItem.style['titleHide'] || false
+    componentItem.style['showTabTitle'] = componentItem.style['showTabTitle'] || true
   }
 
   componentItem['expand'] = componentItem['expand'] || false

core/core-frontend/src/utils/style.ts

@@ -251,16 +251,17 @@ export function createGroupStyle(groupComponent) {
 
 function dataVTabSizeStyleAdaptor(tabComponent) {
   const parentStyleAdaptor = { ...tabComponent.style }
+  const offset = parentStyleAdaptor.showTabTitle ? 46 : 0
   const domId =
     dvMainStore.editMode === 'edit'
       ? 'component' + tabComponent.id
       : 'enlarge-inner-content' + tabComponent.id
   const tabDom = document.getElementById(domId)
   if (tabDom) {
-    parentStyleAdaptor.height = tabDom.clientHeight - 46
+    parentStyleAdaptor.height = tabDom.clientHeight - offset
     parentStyleAdaptor.width = tabDom.clientWidth
   } else {
-    parentStyleAdaptor.height = parentStyleAdaptor.height - 46
+    parentStyleAdaptor.height = parentStyleAdaptor.height - offset
   }
 
   tabComponent.propValue.forEach(tabItem => {
@@ -290,6 +291,26 @@ export function groupStyleRevertBatch(groupComponent, parentStyle) {
   }
 }
 
+export function tabInnerStyleRevert(tabOuterComponent) {
+  const parentStyle = {
+    width: tabOuterComponent.style.width,
+    height: tabOuterComponent.style.height - tabOuterComponent.style.showTabTitle ? 46 : 0
+  }
+  tabOuterComponent.propValue.forEach(tabItem => {
+    tabItem.componentData.forEach(tabComponent => {
+      console.log(
+        '====test===inner-width---' +
+          tabComponent.style.width +
+          '---height---' +
+          tabComponent.style.height +
+          '---' +
+          JSON.stringify(parentStyle)
+      )
+      groupStyleRevert(tabComponent, parentStyle)
+    })
+  })
+}
+
 export function groupStyleRevert(innerComponent, parentStyle) {
   const innerStyle = { ...innerComponent.style }
   innerComponent.groupStyle.left = innerStyle.left / parentStyle.width
@@ -315,6 +336,6 @@ export function dataVTabComponentAdd(innerComponent, parentComponent) {
   innerComponent.style.left = 0
   const parentStyleAdaptor = { ...parentComponent.style }
   // 去掉tab头部高度
-  parentStyleAdaptor.height = parentStyleAdaptor.height - 48
+  parentStyleAdaptor.height = parentStyleAdaptor.height - parentComponent.showTabTitle ? 46 : 0
   groupStyleRevert(innerComponent, parentStyleAdaptor)
 }

core/core-frontend/src/views/common/DeResourceTree.vue

@@ -190,11 +190,9 @@ const infoId = wsCache.get(curCanvasType.value === 'dashboard' ? 'db-info-id' :
 const routerDvId = router.currentRoute.value.query.dvId
 const dvId = embeddedStore.dvId || infoId || routerDvId
 wsCache.delete(curCanvasType.value === 'dashboard' ? 'db-info-id' : 'dv-info-id')
-console.log('==test===0' + selectedNodeKey.value)
 if (dvId && showPosition.value === 'preview') {
   selectedNodeKey.value = dvId
   returnMounted.value = true
-  console.log('==test==1=' + selectedNodeKey.value)
 }
 const nodeExpand = data => {
   if (data.id) {
@@ -274,7 +272,6 @@ const afterTreeInit = () => {
     returnMounted.value = false
   }
   nextTick(() => {
-    console.log('==test==2=' + selectedNodeKey.value)
     resourceListTree.value.setCurrentKey(selectedNodeKey.value)
     nextTick(() => {
       if (selectedNodeKey.value) {