From 4f978eed09e98b7f33731540031f46669b2ab95b Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 17 Feb 2025 18:21:21 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96Tab=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E8=83=8C=E6=99=AF=E6=98=BE=E7=A4=BA=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BackgroundOverallCommon.vue               | 57 ++++++++++---------
 .../de-tabs/TabBackgroundOverall.vue          |  2 +
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
index 31e7001a19..b81cd453a0 100644
--- a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
@@ -52,34 +52,35 @@
           </el-form-item>
         </el-col>
       </el-row>
-
-      <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
-        <el-checkbox
-          size="small"
-          :effect="themes"
-          v-model="state.commonBackground.backdropFilterEnable"
-          @change="onBackgroundChange"
-        >
-          {{ $t('chart.backdrop_blur') }}
-        </el-checkbox>
-      </el-form-item>
-      <div class="indented-container">
-        <div class="indented-item">
-          <el-form-item class="form-item" :class="'form-item-' + themes">
-            <el-input-number
-              style="width: 100%"
-              :effect="themes"
-              controls-position="right"
-              size="middle"
-              :min="0"
-              :max="30"
-              :disabled="!state.commonBackground.backdropFilterEnable"
-              v-model="state.commonBackground.backdropFilter"
-              @change="onBackgroundChange"
-            />
-          </el-form-item>
+      <template v-if="editPosition === 'canvas'">
+        <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
+          <el-checkbox
+            size="small"
+            :effect="themes"
+            v-model="state.commonBackground.backdropFilterEnable"
+            @change="onBackgroundChange"
+          >
+            {{ $t('chart.backdrop_blur') }}
+          </el-checkbox>
+        </el-form-item>
+        <div class="indented-container">
+          <div class="indented-item">
+            <el-form-item class="form-item" :class="'form-item-' + themes">
+              <el-input-number
+                style="width: 100%"
+                :effect="themes"
+                controls-position="right"
+                size="middle"
+                :min="0"
+                :max="30"
+                :disabled="!state.commonBackground.backdropFilterEnable"
+                v-model="state.commonBackground.backdropFilter"
+                @change="onBackgroundChange"
+              />
+            </el-form-item>
+          </div>
         </div>
-      </div>
+      </template>
 
       <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
         <el-checkbox
@@ -268,6 +269,7 @@ const maxImageSize = 15000000
 const props = withDefaults(
   defineProps<{
     componentPosition?: string
+    editPosition?: string
     themes?: EditorTheme
     commonBackgroundPop: any
     backgroundColorPickerWidth?: number
@@ -276,6 +278,7 @@ const props = withDefaults(
   {
     themes: 'dark',
     componentPosition: 'dashboard',
+    editPosition: 'canvas',
     backgroundColorPickerWidth: 50,
     backgroundBorderSelectWidth: 108
   }
diff --git a/core/core-frontend/src/custom-component/de-tabs/TabBackgroundOverall.vue b/core/core-frontend/src/custom-component/de-tabs/TabBackgroundOverall.vue
index 08ddaa767b..ddcbcd2f4e 100644
--- a/core/core-frontend/src/custom-component/de-tabs/TabBackgroundOverall.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/TabBackgroundOverall.vue
@@ -34,6 +34,7 @@ const onTitleBackgroundChange = (params, paramsName) => {
       <el-tab-pane :label="t('visualization.active_title_background')" name="activeBackground">
         <background-overall-common
           :themes="themes"
+          edit-position="tab"
           :common-background-pop="element.titleBackground.active"
           component-position="component"
           @onBackgroundChange="onTitleBackgroundChange($event, 'active')"
@@ -57,6 +58,7 @@ const onTitleBackgroundChange = (params, paramsName) => {
         <background-overall-common
           v-show="!element.titleBackground.multiply"
           :themes="themes"
+          edit-position="tab"
           :common-background-pop="element.titleBackground.inActive"
           component-position="component"
           @onBackgroundChange="onTitleBackgroundChange($event, 'inActive')"