feat: 组件背景统一到仪表板层面设置

Co-authored-by: wangjiahao <1522128093@qq.com>
2026-05-21 04:08:10 +08:00 · 2022-03-28 21:18:56 +08:00
parent b0fc9ac436
commit d3e8fd2da7
12 changed files with 181 additions and 100 deletions
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -20,19 +20,20 @@
    @mouseenter="enter"
    @mouseleave="leave"
  >
+    <edit-bar v-if="editBarShow" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" @boardSet="boardSet" />
+    <mobile-check-bar v-if="mobileCheckBarShow" :element="element" @amRemoveItem="amRemoveItem" />
+    <div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
    <div
      :class="[
        {
          ['de-drag-active-inner']:enabled,
          [classNameMouseOn]: mouseOn || active
        },
-        className
+        className,
+        'main-background'
      ]"
      :style="mainSlotStyle"
    >
-      <edit-bar v-if="editBarShow" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" @boardSet="boardSet" />
-      <mobile-check-bar v-if="mobileCheckBarShow" :element="element" @amRemoveItem="amRemoveItem" />
-      <div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
      <div
        v-for="(handlei, indexi) in actualHandles"
        :key="indexi"
@@ -59,6 +60,7 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
 import EditBar from '@/components/canvas/components/Editor/EditBar'
 import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
+import { hexColorToRGBA } from '@/views/chart/chart/util'

 export default {
  replace: true,
@@ -531,13 +533,18 @@ export default {
        width: this.computedMainSlotWidth,
        height: this.computedMainSlotHeight
      }
-      if (this.element.commonBackground && this.element.commonBackground.enable) {
-        if (this.element.commonBackground.backgroundType === 'innerImage') {
-          style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat`
-        } else if (this.element.commonBackground.backgroundType === 'outerImage') {
-          style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat`
+      if (this.element.commonBackground) {
+        style['padding'] = (this.element.commonBackground.innerPadding || 0) + 'px'
+        style['border-radius'] = (this.element.commonBackground.borderRadius || 0) + 'px'
+        if (this.element.commonBackground.enable) {
+          if (this.element.commonBackground.backgroundType === 'innerImage') {
+            style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat`
+          } else if (this.element.commonBackground.backgroundType === 'outerImage') {
+            style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat`
+          } else if (this.element.commonBackground.backgroundType === 'color') {
+            style['background-color'] = hexColorToRGBA(this.element.commonBackground.color, this.element.commonBackground.alpha)
+          }
        }
-        style['background-size'] = `100% 100%`
      }
      return style
    },
@@ -1857,4 +1864,7 @@ export default {
 .de-drag-active-inner{
  outline: 1px solid #70c0ff;
 }
+  .main-background{
+    background-size: 100% 100% !important;
+  }
 </style>
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -49,6 +49,7 @@ import DeOutWidget from '@/components/dataease/DeOutWidget'
 import EditBar from '@/components/canvas/components/Editor/EditBar'
 import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
 import CloseBar from '@/components/canvas/components/Editor/CloseBar'
+import { hexColorToRGBA } from '@/views/chart/chart/util'

 export default {
  components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
@@ -94,13 +95,20 @@ export default {
        width: '100%',
        height: '100%'
      }
-      if (this.config.commonBackground && this.config.commonBackground.enable) {
-        if (this.config.commonBackground.backgroundType === 'innerImage') {
-          style['background'] = `url(${this.config.commonBackground.innerImage}) no-repeat`
-        } else if (this.config.commonBackground.backgroundType === 'outerImage') {
-          style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat`
+      if (this.config.commonBackground) {
+        style['padding'] = (this.config.commonBackground.innerPadding || 0) + 'px'
+        style['border-radius'] = (this.config.commonBackground.borderRadius || 0) + 'px'
+        if (this.config.commonBackground.enable) {
+          if (this.config.commonBackground.backgroundType === 'innerImage') {
+            style['background'] = `url(${this.config.commonBackground.innerImage}) no-repeat`
+          } else if (this.config.commonBackground.backgroundType === 'outerImage') {
+            style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat`
+          } else if (this.config.commonBackground.backgroundType === 'color') {
+            style['background-color'] = hexColorToRGBA(this.config.commonBackground.color, this.config.commonBackground.alpha)
+          }
        }
        style['background-size'] = `100% 100%`
+        style['overflow'] = 'hidden'
      }
      return style
    },
--- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
@@ -14,7 +14,7 @@
          <el-dropdown-item v-if="'view'===curComponent.type" icon="el-icon-link" @click.native="linkageSetting">{{ $t('panel.linkage_setting') }}</el-dropdown-item>
          <el-dropdown-item v-if="'de-tabs'===curComponent.type" icon="el-icon-link" @click.native="addTab">{{ $t('panel.add_tab') }}</el-dropdown-item>
          <el-dropdown-item v-if="'view'===curComponent.type" icon="el-icon-connection" @click.native="linkJumpSet">{{ $t('panel.setting_jump') }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-full-screen" @click.native="boardSet">{{ $t('panel.setting_background') }}</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-magic-stick" @click.native="boardSet">{{ $t('panel.component_style') }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -1033,6 +1033,7 @@ export default {
  },
  methods: {
    boardSet(item) {
+      this.$emit('boardSet', item)
      this.boardSetVisible = true
    },
    changeStyleWithScale,
--- a/frontend/src/components/canvas/custom-component/DeFrame.vue
+++ b/frontend/src/components/canvas/custom-component/DeFrame.vue
@@ -57,16 +57,8 @@ export default {
  created() {
  },
  mounted() {
-    this.init()
  },
  methods: {
-    init() {
-      const iframe = document.getElementById('iframe')
-      NProgress.start()
-      iframe.onload = function() {
-        NProgress.done()
-      }
-    }

  }
 }
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -263,6 +263,9 @@ export default {
    resultCount() {
      return this.canvasStyleData.panel.resultCount
    },
+    innerPadding() {
+      return this.element.commonBackground.innerPadding || 0
+    },
    ...mapState([
      'canvasStyleData',
      'nowPanelTrackInfo',
@@ -276,7 +279,12 @@ export default {
  },

  watch: {
-
+    'innerPadding': {
+      handler: function(val1, val2) {
+        this.resizeChart()
+      },
+      deep: true
+    },
    'cfilters': {
      handler: function(val1, val2) {
        if (isChange(val1, val2) && !this.isFirstLoad) {
@@ -303,9 +311,7 @@ export default {
        }
        // 如果gap有变化刷新
        if (this.preCanvasPanel && this.preCanvasPanel.gap !== newVal.panel.gap) {
-          this.chart.isPlugin
-            ? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
-            : this.$refs[this.element.propValue.id].chartResize()
+          this.resizeChart()
        }
        this.preCanvasPanel = deepCopy(newVal.panel)
      },
@@ -315,15 +321,7 @@ export default {
    'hw': {
      handler(newVal, oldVla) {
        if (newVal !== oldVla && this.$refs[this.element.propValue.id]) {
-          if (this.chart.type === 'map') {
-            this.destroyTimeMachine()
-            this.changeIndex++
-            this.chartResize(this.changeIndex)
-          } else {
-            this.chart.isPlugin
-              ? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
-              : this.$refs[this.element.propValue.id].chartResize()
-          }
+          this.resizeChart()
        }
      },
      deep: true
@@ -369,6 +367,17 @@ export default {
    }
  },
  methods: {
+    resizeChart() {
+      if (this.chart.type === 'map') {
+        this.destroyTimeMachine()
+        this.changeIndex++
+        this.chartResize(this.changeIndex)
+      } else {
+        this.chart.isPlugin
+          ? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
+          : this.$refs[this.element.propValue.id].chartResize()
+      }
+    },
    bindPluginEvent() {
      bus.$on('plugin-chart-click', param => {
        param.viewId && param.viewId === this.element.propValue.viewId && this.chartClick(param)
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@@ -16,7 +16,7 @@ export const BASE_MOBILE_STYLE = {
  auxiliaryMatrix: true
 }

-// 公共背景
+// 组件仪表板样式
 export const COMMON_BACKGROUND = {
  enable: false,
  backgroundType: 'innerImage',
@@ -24,7 +24,8 @@ export const COMMON_BACKGROUND = {
  innerImage: null,
  outerImage: null,
  alpha: 100,
-  borderRadius: 5
+  borderRadius: 5,
+  innerPadding: 0
 }

 // 公共样式