From e2d7445caa61d932ad42441022b05eca35e7b7cb Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 14 Aug 2024 16:20:13 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20Tab=E7=BB=84=E4=BB=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96=20#9449?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/DvToolbar.vue | 4 ++ .../data-visualization/canvas/CanvasCore.vue | 2 +- .../data-visualization/canvas/Shape.vue | 2 +- .../custom-component/de-tabs/Component.vue | 22 +++++++--- core/core-frontend/src/utils/style.ts | 42 ++++++++++--------- 5 files changed, 46 insertions(+), 26 deletions(-) diff --git a/core/core-frontend/src/components/data-visualization/DvToolbar.vue b/core/core-frontend/src/components/data-visualization/DvToolbar.vue index c594b1ad20..7bbbba187c 100644 --- a/core/core-frontend/src/components/data-visualization/DvToolbar.vue +++ b/core/core-frontend/src/components/data-visualization/DvToolbar.vue @@ -28,6 +28,7 @@ import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue' import DeAppApply from '@/views/common/DeAppApply.vue' import { useEmitt } from '@/hooks/web/useEmitt' import { useUserStoreWithOut } from '@/store/modules/user' +import TabsGroup from '@/custom-component/component-group/TabsGroup.vue' let nameEdit = ref(false) let inputName = ref('') let nameInput = ref(null) @@ -332,6 +333,9 @@ const fullScreenPreview = () => { > + + + diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue index 51e56d9970..bd402be76a 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue @@ -576,7 +576,7 @@ const editStyle = computed(() => { } } else { const result = { - ...getCanvasStyle(canvasStyleData.value), + ...getCanvasStyle(canvasStyleData.value, canvasId.value), width: changeStyleWithScale(canvasStyleData.value.width) + 'px', height: changeStyleWithScale(canvasStyleData.value.height) + 'px' } 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 ebbcd7115f..f63d1656f3 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue @@ -530,7 +530,7 @@ const handleMouseDownOnShape = e => { contentDisplay.value = true } // 仪表板进行Tab碰撞检查 - dashboardActive.value && tabMoveInCheck() + tabMoveInCheck() // 仪表板模式 会造成移动现象 当检测组件正在碰撞有效区内或者移入有效区内 则周边组件不进行移动 if ( dashboardActive.value && 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 7d9a1d425a..22b5523ee9 100644 --- a/core/core-frontend/src/custom-component/de-tabs/Component.vue +++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue @@ -2,7 +2,7 @@
@@ -26,6 +26,7 @@ {{ tabItem.title }} editMode.value === 'edit' && isEdit.value && !mobileInPc.value) - +const curThemes = isDashboard() ? 'light' : 'dark' const calcTabLength = () => { setTimeout(() => { if (element.value.propValue.length > 1) { @@ -456,9 +457,20 @@ onBeforeMount(() => { :deep(.ed-tabs__content) { height: calc(100% - 46px) !important; } -:deep(.ed-tabs__new-tab) { - margin-right: 25px; - background-color: #fff; +.ed-tabs-dark { + :deep(.ed-tabs__new-tab) { + margin-right: 25px; + color: #fff; + } + :deep(.el-dropdown-link) { + color: #fff; + } +} +.ed-tabs-light { + :deep(.ed-tabs__new-tab) { + margin-right: 25px; + background-color: #fff; + } } .el-tab-pane-custom { width: 100%; diff --git a/core/core-frontend/src/utils/style.ts b/core/core-frontend/src/utils/style.ts index 9480be52e2..c311ed2de1 100644 --- a/core/core-frontend/src/utils/style.ts +++ b/core/core-frontend/src/utils/style.ts @@ -2,6 +2,7 @@ import { sin, cos } from '@/utils/translate' import { imgUrlTrans } from '@/utils/imgUtils' import { hexColorToRGBA } from '@/views/chart/components/js/util' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' +import { isMainCanvas } from '@/utils/canvasUtils' const dvMainStore = dvMainStoreWithOut() export function getShapeStyle(style) { const result = {} @@ -181,7 +182,7 @@ export function getComponentRotatedStyle(style) { return style } -export function getCanvasStyle(canvasStyleData) { +export function getCanvasStyle(canvasStyleData, canvasId = 'canvasMain') { const { backgroundColorSelect, background, @@ -191,27 +192,30 @@ export function getCanvasStyle(canvasStyleData) { mobileSetting } = canvasStyleData const style = { fontSize: fontSize + 'px', color: canvasStyleData.color } - // 仪表板默认色#f5f6f7 大屏默认配色 #1a1a1a - let colorRGBA = dvMainStore.dvInfo.type === 'dashboard' ? '#f5f6f7' : '#1a1a1a' - if (backgroundColorSelect && backgroundColor) { - colorRGBA = backgroundColor - } - if (backgroundImageEnable) { - style['background'] = `url(${imgUrlTrans(background)}) no-repeat ${colorRGBA}` - } else { - style['background-color'] = colorRGBA - } + if (isMainCanvas(canvasId)) { + // 仪表板默认色#f5f6f7 大屏默认配色 #1a1a1a + let colorRGBA = dvMainStore.dvInfo.type === 'dashboard' ? '#f5f6f7' : '#1a1a1a' + if (backgroundColorSelect && backgroundColor) { + colorRGBA = backgroundColor + } + if (backgroundImageEnable) { + style['background'] = `url(${imgUrlTrans(background)}) no-repeat ${colorRGBA}` + } else { + style['background-color'] = colorRGBA + } - if (dvMainStore.mobileInPc && mobileSetting?.customSetting) { - const { backgroundColorSelect, color, backgroundImageEnable, background } = mobileSetting - if (backgroundColorSelect && backgroundImageEnable && typeof background === 'string') { - style['background'] = `url(${imgUrlTrans(background)}) no-repeat ${color}` - } else if (backgroundColorSelect) { - style['background-color'] = color - } else if (backgroundImageEnable) { - style['background'] = `url(${imgUrlTrans(background)}) no-repeat` + if (dvMainStore.mobileInPc && mobileSetting?.customSetting) { + const { backgroundColorSelect, color, backgroundImageEnable, background } = mobileSetting + if (backgroundColorSelect && backgroundImageEnable && typeof background === 'string') { + style['background'] = `url(${imgUrlTrans(background)}) no-repeat ${color}` + } else if (backgroundColorSelect) { + style['background-color'] = color + } else if (backgroundImageEnable) { + style['background'] = `url(${imgUrlTrans(background)}) no-repeat` + } } } + return style }