Merge pull request #10010 from dataease/pr@dev-v2@chart-editor-style-padding

style(仪表板): 图表配置项与滚动条间距优化

core/core-frontend/src/components/collapse-switch-item/src/CollapseSwitchItem.vue

@@ -69,7 +69,7 @@ const switchValue = computed({
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-right: 8px;
+  padding-right: 10px;
   flex-grow: 1;
   :deep(.ed-switch.is-checked .ed-switch__core > .ed-switch__action) {
     left: calc(100% - 12px);

core/core-frontend/src/views/chart/components/editor/editor-style/components/QuadrantSelector.vue

@@ -142,7 +142,6 @@ onMounted(() => {
           :label="t('chart.split_line')"
           class="form-item"
           :class="'form-item-' + themes"
-          style="padding-right: 4px"
         >
           <el-color-picker
             v-model="state.quadrantForm.lineStyle.stroke"
@@ -189,12 +188,7 @@ onMounted(() => {
         </el-form-item>
       </div>
       <div style="display: flex">
-        <el-form-item
+        <el-form-item class="form-item" label="X 轴恒线" :class="'form-item-' + themes">
-          class="form-item"
-          label="X 轴恒线"
-          :class="'form-item-' + themes"
-          style="padding-left: 4px"
-        >
           <el-input-number
             controls-position="right"
             style="width: 100%"
@@ -225,7 +219,7 @@ onMounted(() => {
         </el-form-item>
       </div>
     </template>
-    <el-tabs v-model="tabActive" class="quadrant-tab-header" :class="{ dark: themes === 'dark' }">
+    <el-tabs v-model="tabActive" class="tab-header" :class="{ dark: themes === 'dark' }">
       <el-tab-pane
         :name="index + 1"
         v-for="(l, index) in state.quadrantForm.labels"
@@ -239,7 +233,6 @@ onMounted(() => {
               <el-form-item
                 class="form-item"
                 :class="'form-item-' + themes"
-                style="padding-right: 4px"
                 :label="t('chart.backgroundColor')"
               >
                 <el-color-picker
@@ -290,7 +283,6 @@ onMounted(() => {
               <el-form-item
                 class="form-item"
                 :class="'form-item-' + themes"
-                style="padding-right: 4px"
                 :label="t('chart.chart_style')"
               >
                 <el-color-picker
@@ -384,48 +376,6 @@ onMounted(() => {
       border-color: rgba(235, 235, 235, 0.15);
     }
   }
-  .quadrant-tab-header {
-    --ed-tabs-header-height: 34px;
-    --custom-tab-color: #646a73;
-
-    :deep(.ed-tabs__nav-wrap::after) {
-      background-color: unset;
-    }
-
-    &.dark {
-      --custom-tab-color: #a6a6a6;
-    }
-
-    height: 100%;
-    :deep(.ed-tabs__header) {
-      border-top: solid 1px @side-outline-border-color;
-    }
-    :deep(.ed-tabs__item) {
-      font-weight: 400;
-      font-size: 12px;
-      padding: 0 12px !important;
-      margin-right: 0 !important;
-      color: var(--custom-tab-color);
-    }
-    :deep(.is-active) {
-      font-weight: 500;
-      color: var(--ed-color-primary, #3370ff);
-    }
-
-    :deep(.ed-tabs__nav-scroll) {
-      padding-left: 0 !important;
-    }
-
-    :deep(.ed-tabs__header) {
-      margin: 0 !important;
-    }
-
-    :deep(.ed-tabs__content) {
-      height: calc(100% - 33px);
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-  }
   .padding-tab {
     padding: 0;
     height: 100%;

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -3166,7 +3166,7 @@ span {
   display: flex;
   transition: 0.5s;
   .padding-lr {
-    padding: 0 8px;
+    padding: 0 10px;
 
     &.no-top-border {
       border-top: none !important;
@@ -3217,7 +3217,7 @@ span {
     }
 
     :deep(.ed-collapse-item__content) {
-      padding: 16px 8px 0;
+      padding: 16px 10px 0;
       border: none;
       :deep(.ed-checkbox) {
         height: 20px;