refactor: Tab组件优化 #9449

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 = () => {
           >
             <media-group></media-group>
           </component-group>
+          <component-group is-label :base-width="115" icon-name="dv-tab" title="Tab">
+            <tabs-group :dv-model="dvModel"></tabs-group>
+          </component-group>
           <component-group is-label :base-width="215" icon-name="dv-more-com" title="更多">
             <more-com-group></more-com-group>
           </component-group>

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

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 &&

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

@@ -2,7 +2,7 @@
   <div
     v-if="state.tabShow"
     style="width: 100%; height: 100%"
-    :class="headClass"
+    :class="[headClass, `ed-tabs-${curThemes}`]"
     class="custom-tabs-head"
     ref="tabComponentRef"
   >
@@ -26,6 +26,7 @@
             <span :style="titleStyle(tabItem.name)">{{ tabItem.title }}</span>
             <el-dropdown
               v-if="isEditMode"
+              :effect="curThemes"
               style="line-height: 4 !important"
               trigger="click"
               @command="handleCommand"
@@ -180,7 +181,7 @@ const noBorderColor = ref('none')
 let currentInstance
 
 const isEditMode = computed(() => 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) {
+.ed-tabs-dark {
-  margin-right: 25px;
+  :deep(.ed-tabs__new-tab) {
-  background-color: #fff;
+    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%;

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
+  if (isMainCanvas(canvasId)) {
-  let colorRGBA = dvMainStore.dvInfo.type === 'dashboard' ? '#f5f6f7' : '#1a1a1a'
+    // 仪表板默认色#f5f6f7 大屏默认配色 #1a1a1a
-  if (backgroundColorSelect && backgroundColor) {
+    let colorRGBA = dvMainStore.dvInfo.type === 'dashboard' ? '#f5f6f7' : '#1a1a1a'
-    colorRGBA = backgroundColor
+    if (backgroundColorSelect && backgroundColor) {
-  }
+      colorRGBA = backgroundColor
-  if (backgroundImageEnable) {
+    }
-    style['background'] = `url(${imgUrlTrans(background)}) no-repeat ${colorRGBA}`
+    if (backgroundImageEnable) {
-  } else {
+      style['background'] = `url(${imgUrlTrans(background)}) no-repeat ${colorRGBA}`
-    style['background-color'] = colorRGBA
+    } else {
-  }
+      style['background-color'] = colorRGBA
+    }
 
-  if (dvMainStore.mobileInPc && mobileSetting?.customSetting) {
+    if (dvMainStore.mobileInPc && mobileSetting?.customSetting) {
-    const { backgroundColorSelect, color, backgroundImageEnable, background } = mobileSetting
+      const { backgroundColorSelect, color, backgroundImageEnable, background } = mobileSetting
-    if (backgroundColorSelect && backgroundImageEnable && typeof background === 'string') {
+      if (backgroundColorSelect && backgroundImageEnable && typeof background === 'string') {
-      style['background'] = `url(${imgUrlTrans(background)}) no-repeat ${color}`
+        style['background'] = `url(${imgUrlTrans(background)}) no-repeat ${color}`
-    } else if (backgroundColorSelect) {
+      } else if (backgroundColorSelect) {
-      style['background-color'] = color
+        style['background-color'] = color
-    } else if (backgroundImageEnable) {
+      } else if (backgroundImageEnable) {
-      style['background'] = `url(${imgUrlTrans(background)}) no-repeat`
+        style['background'] = `url(${imgUrlTrans(background)}) no-repeat`
+      }
     }
   }
+
   return style
 }