From ac1c8f0764cb554d2ac883283141fd973683cd1d Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 25 Nov 2024 13:42:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF=E3=80=81?=
=?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20Tab=E6=A0=87=E9=A2=98?=
=?UTF-8?q?=E9=9A=90=E8=97=8F=E7=AD=89=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../data-visualization/canvas/Shape.vue | 14 +++++++++-
.../custom-component/common/CommonAttr.vue | 25 ++++++++++++++++-
.../common/CommonStyleSet.vue | 12 ---------
.../src/custom-component/component-list.ts | 3 ++-
.../custom-component/de-tabs/Component.vue | 19 +++++--------
core/core-frontend/src/utils/canvasUtils.ts | 2 +-
core/core-frontend/src/utils/style.ts | 27 ++++++++++++++++---
.../src/views/common/DeResourceTree.vue | 3 ---
8 files changed, 71 insertions(+), 34 deletions(-)
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 eb8e840b42..cebb5d13e4 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/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 &&
diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index 2016d359df..c4bc31860d 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/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(() => {
/>
+
+
+
(() => 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: '背景模糊',
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 748b692b4a..73e5a4491d 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/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
}
},
{
diff --git a/core/core-frontend/src/custom-component/de-tabs/Component.vue b/core/core-frontend/src/custom-component/de-tabs/Component.vue
index 1fd447001b..8f60470351 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/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"
>
{
- 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
}
})
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index 61bee74eff..02fd8433dc 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/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
diff --git a/core/core-frontend/src/utils/style.ts b/core/core-frontend/src/utils/style.ts
index e5ac8589fa..7d1b7d6ad5 100644
--- a/core/core-frontend/src/utils/style.ts
+++ b/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)
}
diff --git a/core/core-frontend/src/views/common/DeResourceTree.vue b/core/core-frontend/src/views/common/DeResourceTree.vue
index 71ae493611..e95360fa89 100644
--- a/core/core-frontend/src/views/common/DeResourceTree.vue
+++ b/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) {