From 9e9f0ae1bb2ac121ff5c8046741e88c2bbf153da Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Thu, 8 May 2025 10:22:43 +0800
Subject: [PATCH] =?UTF-8?q?Revert=20"revert:=20UI=E5=BA=93=E5=8D=87?=
 =?UTF-8?q?=E7=BA=A7"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 348f1dced6b512a0cc84616c4e63a34194b2fb86.
---
 core/core-frontend/package.json               |  2 +-
 .../src/components/cron/src/Cron.vue          |  8 +--
 .../ComponentColorSelector.vue                |  3 +-
 .../FilterStyleSimpleSelector.vue             |  2 +-
 .../dashboard-style/OverallSetting.vue        |  8 +--
 .../dashboard-style/SeniorStyleSetting.vue    |  2 +
 .../dashboard-style/ViewSimpleTitle.vue       |  1 +
 .../data-visualization/CanvasAttr.vue         |  7 +-
 .../data-visualization/ComponentToolBar.vue   |  4 ++
 .../components/grid-table/src/GridTable.vue   |  1 -
 .../visualization/CanvasBaseSetting.vue       |  2 +-
 .../components/visualization/DvSidebar.vue    |  4 +-
 .../common/ComponentPosition.vue              |  2 +-
 .../BackgroundOverallCommon.vue               |  7 +-
 .../component-background/CanvasBackground.vue |  2 +-
 .../common/CommonBorderSetting.vue            |  2 +-
 .../v-query/QueryConditionConfiguration.vue   |  2 +-
 .../custom-component/v-query/TextSearch.vue   |  3 +-
 .../src/layout/components/Header.vue          | 60 ++---------------
 .../src/layout/components/HeaderMenuItem.vue  |  7 +-
 core/core-frontend/src/style/index.less       | 13 ----
 core/core-frontend/src/style/mixin.less       |  2 +-
 .../editor/editor-style/VQueryChartStyle.vue  | 19 +++++-
 .../components/BasicStyleSelector.vue         |  4 +-
 .../components/CustomColorStyleSelect.vue     |  7 +-
 .../components/DualBasicStyleSelector.vue     |  4 +-
 .../components/GradientColorSelector.vue      |  2 +-
 .../components/IndicatorNameSelector.vue      |  1 +
 .../components/IndicatorValueSelector.vue     |  1 +
 .../editor-style/components/LabelSelector.vue |  1 +
 .../components/LegendSelector.vue             |  1 +
 .../editor-style/components/MiscSelector.vue  |  2 +-
 .../components/MiscStyleSelector.vue          |  2 +-
 .../components/SummarySelector.vue            |  1 +
 .../components/SymbolicStyleSelector.vue      |  4 +-
 .../editor-style/components/TitleSelector.vue |  3 +-
 .../components/TooltipSelector.vue            |  1 +
 .../components/table/TableCellSelector.vue    |  2 +-
 .../components/table/TableHeaderSelector.vue  |  1 +
 .../components/table/TableTotalSelector.vue   |  2 +-
 .../views/chart/components/editor/index.vue   | 65 ++-----------------
 .../views/visualized/data/dataset/index.vue   |  2 -
 42 files changed, 82 insertions(+), 187 deletions(-)

diff --git a/core/core-frontend/package.json b/core/core-frontend/package.json
index 73630487c8..c52dd9c544 100644
--- a/core/core-frontend/package.json
+++ b/core/core-frontend/package.json
@@ -29,7 +29,7 @@
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.9",
     "echarts": "^5.5.1",
-    "element-plus-secondary": "^0.6.8",
+    "element-plus-secondary": "^1.0.0",
     "element-resize-detector": "^1.2.4",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
diff --git a/core/core-frontend/src/components/cron/src/Cron.vue b/core/core-frontend/src/components/cron/src/Cron.vue
index 45b9738a52..1b6799ba64 100644
--- a/core/core-frontend/src/components/cron/src/Cron.vue
+++ b/core/core-frontend/src/components/cron/src/Cron.vue
@@ -120,13 +120,7 @@ const emits = defineEmits(['update:modelValue'])
       </el-tab-pane>
     </el-tabs>
     <!-- table -->
-    <el-table
-      header-cell-class-name="header-cell"
-      :data="tableData"
-      size="mini"
-      border
-      style="width: 100%"
-    >
+    <el-table :data="tableData" size="mini" border style="width: 100%">
       <el-table-column prop="sVal" :label="t('cron.second')" width="70" />
       <el-table-column prop="mVal" :label="t('cron.minute')" width="70" />
       <el-table-column prop="hVal" :label="t('cron.hour')" width="70" />
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
index a3e650fb9a..bdef6e56c5 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
@@ -70,6 +70,7 @@
         :title="t('visualization.table_color_matching')"
         name="table_color_matching"
         class="inner-collapse"
+        effect="dark"
         :class="`inner-collapse_${themes}`"
       >
         <div style="padding: 0 8px 8px">
@@ -425,7 +426,7 @@ span {
     max-width: 192px;
   }
   :deep(.custom-color-setting-btn) {
-    margin-top: 31px;
+    margin-top: 28px;
   }
 }
 
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
index e6c8fce669..fd034dd67b 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="width: 100%">
-    <el-form label-position="top" style="width: 100%">
+    <el-form label-position="top" size="small" style="width: 100%">
       <div style="width: 100%; padding: 16px 8px 0">
         <el-row :gutter="8">
           <el-col :span="12">
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
index 576580f36a..5f6344a129 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form label-position="top">
+  <el-form size="small" label-position="top">
     <el-form-item
       class="form-item"
       :class="'form-item-' + themes"
@@ -71,7 +71,6 @@
           v-model="canvasStyleData.dashboard.gapSize"
           :effect="themes"
           controls-position="right"
-          size="middle"
           :min="0"
           :max="10"
           @change="themeChange"
@@ -112,14 +111,12 @@
         type="number"
         :min="1"
         :max="3600"
-        size="middle"
         :disabled="!canvasStyleData.refreshViewEnable"
         @change="onRefreshChange"
       >
         <template #append>
           <el-select
             v-model="canvasStyleData.refreshUnit"
-            size="middle"
             :effect="themes"
             :disabled="!canvasStyleData.refreshViewEnable"
             style="width: 90px"
@@ -162,14 +159,12 @@
         type="number"
         :min="1"
         :max="3600"
-        size="middle"
         :disabled="!canvasStyleData.refreshBrowserEnable"
         @change="onRefreshChange"
       >
         <template #append>
           <el-select
             v-model="canvasStyleData.refreshBrowserUnit"
-            size="middle"
             :effect="themes"
             :disabled="!canvasStyleData.refreshBrowserEnable"
             style="width: 90px"
@@ -232,7 +227,6 @@
         v-model="canvasStyleData.dashboard.resultCount"
         :effect="themes"
         controls-position="right"
-        size="middle"
         :min="1"
         :max="10000"
         @change="themeChange"
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
index 92f2fe3ef8..530c0e09bc 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
@@ -12,6 +12,7 @@
             >
               <el-color-picker
                 :effect="themes"
+                size="small"
                 v-model="seniorStyleSetting.linkageIconColor"
                 :trigger-width="100"
                 is-custom
@@ -31,6 +32,7 @@
                 v-model="seniorStyleSetting.drillLayerColor"
                 :effect="themes"
                 :trigger-width="100"
+                size="small"
                 is-custom
                 :predefine="state.predefineColors"
                 @change="themeChange"
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
index d6af32bf34..567c6967f0 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
@@ -11,6 +11,7 @@
             v-model="titleForm.color"
             class="color-picker-style"
             is-custom
+            size="small"
             :predefine="state.predefineColors"
             @change="changeTitleStyle('color')"
           />
diff --git a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
index 654d3ed221..009aea455f 100644
--- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
+++ b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
@@ -97,7 +97,7 @@ onMounted(() => {
               <el-form-item class="form-item form-item-dark" label="W">
                 <el-input-number
                   effect="dark"
-                  size="middle"
+                  size="small"
                   :min="600"
                   :max="50000"
                   v-model="canvasStyleData.width"
@@ -110,7 +110,7 @@ onMounted(() => {
               <el-form-item class="form-item form-item-dark" label="H">
                 <el-input-number
                   effect="dark"
-                  size="middle"
+                  size="small"
                   :min="600"
                   :max="50000"
                   v-model="canvasStyleData.height"
@@ -132,7 +132,7 @@ onMounted(() => {
                 </el-icon>
               </el-tooltip>
               <el-select
-                style="margin: 0 0 0 8px; flex: 1"
+                style="width: 139px; margin: 0 0 0 8px; flex: 1"
                 effect="dark"
                 v-model="canvasStyleData.screenAdaptor"
                 @change="onStyleChange"
@@ -401,7 +401,6 @@ onMounted(() => {
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
-  margin: 3px 0 !important;
 }
 :deep(.form-item-dark) {
   .ed-form-item__label {
diff --git a/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue b/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
index 9824050749..56316b569b 100644
--- a/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
+++ b/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
@@ -176,6 +176,10 @@ onUnmounted(() => {
   .scale-area {
     display: flex;
     align-items: center;
+
+    :deep(.ed-input-number__decrease) {
+      --ed-input-number-controls-height: 12px;
+    }
   }
 }
 :deep(.ed-input--dark .ed-input__wrapper),
diff --git a/core/core-frontend/src/components/grid-table/src/GridTable.vue b/core/core-frontend/src/components/grid-table/src/GridTable.vue
index 01f33bccbb..c3a8891a98 100644
--- a/core/core-frontend/src/components/grid-table/src/GridTable.vue
+++ b/core/core-frontend/src/components/grid-table/src/GridTable.vue
@@ -127,7 +127,6 @@ defineExpose({
 <template>
   <div class="flex-table" :class="!tableData.length && 'no-data'">
     <el-table
-      header-cell-class-name="header-cell"
       ref="table"
       :border="border"
       v-bind="state.tableAttrs"
diff --git a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
index 9d13d23808..baf01396d3 100644
--- a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
+++ b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="width: 100%" ref="bgForm">
-    <el-form label-position="top" style="width: 100%; margin-bottom: 16px">
+    <el-form size="small" label-position="top" style="width: 100%; margin-bottom: 16px">
       <el-form-item
         class="form-item no-margin-bottom"
         :class="'form-item-' + themes"
diff --git a/core/core-frontend/src/components/visualization/DvSidebar.vue b/core/core-frontend/src/components/visualization/DvSidebar.vue
index b3064ddae9..a0c476e8ae 100644
--- a/core/core-frontend/src/components/visualization/DvSidebar.vue
+++ b/core/core-frontend/src/components/visualization/DvSidebar.vue
@@ -290,9 +290,7 @@ const onComponentNameChange = () => {
 :deep(.ed-collapse) {
   border-top: unset;
 }
-:deep(.ed-collapse-item__header.is-active) {
-  border-bottom-color: rgba(31, 35, 41, 0.15);
-}
+
 :deep(.ed-collapse-item.ed-collapse--dark .ed-collapse-item__header) {
   border-color: rgba(255, 255, 255, 0.15);
   border-top: unset;
diff --git a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue
index 2705f4e419..5f6dbf4ca5 100644
--- a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue
+++ b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form label-position="left" :label-width="14">
+  <el-form size="small" label-position="left" :label-width="14">
     <el-row :gutter="8" v-for="(x, i) in positionKeysGroup" :key="i">
       <el-col :span="12" v-for="({ key, label, min, max, step }, j) in x" :key="j">
         <el-form-item class="form-item" :class="'form-item-' + themes" :label="label">
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 9005c9ab65..ba61f9ffdc 100644
--- a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
@@ -13,7 +13,7 @@
       "
       @change="reUpload"
     />
-    <el-form label-position="top" style="width: 100%">
+    <el-form size="small" label-position="top" style="width: 100%">
       <el-row :gutter="8">
         <el-col :span="12">
           <el-form-item
@@ -25,7 +25,6 @@
               style="width: 100%"
               :effect="themes"
               controls-position="right"
-              size="middle"
               :min="0"
               :max="100"
               v-model="state.commonBackground.innerPadding"
@@ -43,7 +42,6 @@
               style="width: 100%"
               :effect="themes"
               controls-position="right"
-              size="middle"
               :min="0"
               :max="100"
               v-model="state.commonBackground.borderRadius"
@@ -70,7 +68,6 @@
                 style="width: 100%"
                 :effect="themes"
                 controls-position="right"
-                size="middle"
                 :min="0"
                 :max="30"
                 :disabled="!state.commonBackground.backdropFilterEnable"
@@ -148,7 +145,6 @@
               :disabled="!state.commonBackground.backgroundImageEnable"
               :effect="themes"
               :title="t('visualization.border_color_setting')"
-              style="position: absolute; top: -3px; left: 60px"
               is-custom
               show-alpha
               class="color-picker-style"
@@ -164,7 +160,6 @@
             <el-select
               :style="{ width: computedBackgroundBorderSelectWidth + 'px' }"
               v-model="state.commonBackground.innerImage"
-              size="middle"
               popper-class="board-select"
               :effect="themes"
               :disabled="!state.commonBackground.backgroundImageEnable"
diff --git a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue b/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
index b1107faa94..c9146cfb13 100644
--- a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
+++ b/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
@@ -13,7 +13,7 @@
       "
       @change="reUpload"
     />
-    <el-form label-position="top" style="width: 100%; margin-bottom: 16px">
+    <el-form size="small" label-position="top" style="width: 100%; margin-bottom: 16px">
       <el-form-item class="form-item" :class="'form-item-' + themes" v-if="showWatermarkSetting">
         <el-checkbox
           size="small"
diff --git a/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue b/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
index 877241671c..b7d5bb3ee7 100644
--- a/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
+++ b/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
@@ -83,7 +83,7 @@ watch(
 
 <template>
   <el-row class="custom-row" style="padding-bottom: 8px">
-    <el-form label-position="top">
+    <el-form size="small" label-position="top">
       <template v-if="isSvgComponent">
         <el-row style="display: flex">
           <el-form-item
diff --git a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
index cfbad383bf..6fe8085beb 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@@ -3515,7 +3515,7 @@ defineExpose({
   min-width: 210px !important;
 }
 .ed-select-dropdown__header {
-  padding: 0 8px;
+  padding: 0 8px !important;
   .params-select--header {
     --ed-tabs-header-height: 32px;
     .ed-tabs__item {
diff --git a/core/core-frontend/src/custom-component/v-query/TextSearch.vue b/core/core-frontend/src/custom-component/v-query/TextSearch.vue
index 345d8e1ab4..d42ec8cb48 100644
--- a/core/core-frontend/src/custom-component/v-query/TextSearch.vue
+++ b/core/core-frontend/src/custom-component/v-query/TextSearch.vue
@@ -181,7 +181,8 @@ const handleInnerMouseDown = e => {
   .condition-type {
     display: flex;
     position: relative;
-    :deep(.ed-input__wrapper) {
+    :deep(.ed-input__wrapper),
+    :deep(.ed-select__wrapper) {
       border: none;
       border-radius: 0;
       box-shadow: none !important;
diff --git a/core/core-frontend/src/layout/components/Header.vue b/core/core-frontend/src/layout/components/Header.vue
index a36c1a68d0..5c556e1d52 100644
--- a/core/core-frontend/src/layout/components/Header.vue
+++ b/core/core-frontend/src/layout/components/Header.vue
@@ -130,17 +130,17 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-header class="header-flex" :class="{ 'header-light': navigateBg && navigateBg === 'light' }">
+  <el-header class="header-flex" :class="{ 'header-light': navigateBg === 'light' }">
     <img class="logo" v-if="navigate" :src="navigate" alt="" />
     <Icon v-else
       ><logo @click="handleIconClick" class="svg-icon logo" style="cursor: pointer"
     /></Icon>
     <el-menu
       :default-active="activeIndex"
-      class="el-menu-demo"
       mode="horizontal"
       :ellipsis="false"
       @select="handleSelect"
+      :effect="navigateBg === 'light' ? 'light' : 'dark'"
     >
       <HeaderMenuItem v-for="menu in routers" :key="menu.path" :menu="menu"></HeaderMenuItem>
     </el-menu>
@@ -277,65 +277,15 @@ onMounted(() => {
     }
   }
 
-  .ed-menu {
-    background-color: #050e21;
-    height: 56px;
-  }
-
-  .ed-menu--horizontal {
-    border: none;
-    .ed-menu-item,
-    :deep(.ed-sub-menu__title) {
-      color: rgba(255, 255, 255, 0.8);
-      line-height: 50px;
-      border-bottom: none;
-
-      &.is-active {
-        border-bottom: none;
-        color: #ffffff !important;
-        background-color: var(--ed-color-primary) !important;
-      }
-    }
-
-    > .is-active {
-      :deep(.ed-sub-menu__title) {
-        color: #ffffff !important;
-        background-color: var(--ed-color-primary);
-      }
-    }
-
-    .ed-menu-item:not(.is-disabled):hover,
-    :deep(.ed-sub-menu__title):not(.is-disabled):hover {
-      color: #ffffffcc;
-      background: #ffffff1a;
-    }
+  .ed-menu.ed-menu--horizontal {
+    border-bottom: none;
+    background: transparent;
   }
 }
 
 .header-light {
   background-color: #ffffff !important;
   box-shadow: 0px 0.5px 0px 0px #1f232926 !important;
-  .ed-menu {
-    background-color: #ffffff !important;
-  }
-  .ed-menu--horizontal {
-    .ed-menu-item {
-      color: var(--ed-color-black) !important;
-    }
-    :deep(.ed-sub-menu__title) {
-      color: var(--ed-color-black) !important;
-    }
-    .ed-menu-item:not(.is-disabled):hover,
-    :deep(.ed-sub-menu):not(.is-active) .ed-sub-menu__title:not(.is-disabled):hover {
-      color: #1f2329;
-      background: #1f23291a;
-    }
-    :deep(.ed-sub-menu).is-active .ed-sub-menu__title:not(.is-disabled):hover {
-      color: #ffffff !important;
-      background-color: var(--ed-color-primary);
-    }
-  }
-
   .logo {
     color: #3371ff !important;
   }
diff --git a/core/core-frontend/src/layout/components/HeaderMenuItem.vue b/core/core-frontend/src/layout/components/HeaderMenuItem.vue
index 36c9dc32d2..cb114a88cf 100644
--- a/core/core-frontend/src/layout/components/HeaderMenuItem.vue
+++ b/core/core-frontend/src/layout/components/HeaderMenuItem.vue
@@ -4,12 +4,13 @@ import icon_expandDown_filled from '@/assets/svg/icon_expand-down_filled.svg'
 import { ElMenuItem, ElSubMenu } from 'element-plus-secondary'
 
 const title = props => {
-  const { title } = props.menu?.meta || {}
+  const { title } = props?.menu?.meta || {}
   return [h('span', null, { default: () => title })]
 }
 
 const HeaderMenuItem = props => {
-  const { children = [], hidden, path } = props.menu
+  if (!props) return null
+  const { children = [], hidden, path } = props?.menu || {}
   if (hidden) {
     return null
   }
@@ -46,7 +47,7 @@ export default HeaderMenuItem
 .popper-class-menu {
   --active-color: #1f2329;
   &.is-light {
-    border: none;
+    border: none !important;
     margin-top: -2px;
   }
   .popper-class-menu {
diff --git a/core/core-frontend/src/style/index.less b/core/core-frontend/src/style/index.less
index baff400a21..18073e94ec 100644
--- a/core/core-frontend/src/style/index.less
+++ b/core/core-frontend/src/style/index.less
@@ -116,19 +116,6 @@ body {
   }
 }
 
-.header-cell {
-  background-color: #f5f6f7 !important;
-  border-top: 1px solid rgba(31, 35, 41, 0.15);
-}
-
-.excel-header-cell {
-  background-color: #f5f6f7 !important;
-
-  .ed-table-v2__header-cell {
-    background-color: transparent;
-  }
-}
-
 .field-icon-text {
   color: #3370ff;
 }
diff --git a/core/core-frontend/src/style/mixin.less b/core/core-frontend/src/style/mixin.less
index 9a7d557a3d..51472a66a4 100644
--- a/core/core-frontend/src/style/mixin.less
+++ b/core/core-frontend/src/style/mixin.less
@@ -4,7 +4,7 @@
     :deep(.ed-tabs__header::after)  {
       content: '';
       position: absolute;
-      bottom: 0;
+      bottom: -1px;
       width: @width;
       height: 1px;
       background-color: rgba(31, 35, 41, 0.15);
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index 3dcbb96add..ec499bd90d 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -293,7 +293,7 @@ const onTitleChange = () => {
     <el-row class="de-collapse-style">
       <el-collapse v-model="styleActiveNames" class="style-collapse">
         <el-collapse-item :effect="themes" name="basicStyle" :title="t('chart.basic_style')">
-          <el-form @keydown.stop.prevent.enter label-position="top">
+          <el-form size="small" @keydown.stop.prevent.enter label-position="top">
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox
                 :effect="themes"
@@ -360,7 +360,12 @@ const onTitleChange = () => {
           </el-form>
         </el-collapse-item>
         <el-collapse-item :effect="themes" name="addition" :title="t('v_query.query_condition')">
-          <el-form @keydown.stop.prevent.enter label-position="top" style="padding-bottom: 8px">
+          <el-form
+            size="small"
+            @keydown.stop.prevent.enter
+            label-position="top"
+            style="padding-bottom: 8px"
+          >
             <el-row :gutter="8">
               <el-col :span="12">
                 <el-form-item
@@ -428,6 +433,7 @@ const onTitleChange = () => {
                 <el-color-picker
                   :effect="themes"
                   :trigger-width="56"
+                  style="max-width: 56px; min-width: 56px"
                   is-custom
                   show-alpha
                   v-model="chart.customStyle.component.text"
@@ -504,6 +510,7 @@ const onTitleChange = () => {
             :class="!chart.customStyle.component.labelShow && 'is-disabled'"
             :disabled="!chart.customStyle.component.labelShow"
             label-position="top"
+            size="small"
             style="padding-bottom: 8px"
           >
             <el-form-item
@@ -530,6 +537,7 @@ const onTitleChange = () => {
                 :effect="themes"
                 is-custom
                 show-alpha
+                style="width: 50px"
                 v-model="chart.customStyle.component.labelColor"
                 :predefine="predefineColors"
               /><el-tooltip
@@ -608,7 +616,12 @@ const onTitleChange = () => {
           </el-form>
         </collapse-switch-item>
         <el-collapse-item :effect="themes" name="button" :title="t('commons.button')">
-          <el-form @keydown.stop.prevent.enter label-position="top" style="padding-bottom: 8px">
+          <el-form
+            size="small"
+            @keydown.stop.prevent.enter
+            label-position="top"
+            style="padding-bottom: 8px"
+          >
             <el-form-item
               :effect="themes"
               class="form-item"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
index dfaa7725f0..7e9d941456 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
@@ -367,7 +367,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <div style="width: 100%">
+  <el-form size="small" style="width: 100%">
     <template v-if="showProperty('colors')">
       <custom-color-style-select
         v-model="state"
@@ -1580,7 +1580,7 @@ onMounted(() => {
       </el-row>
     </div>
     <!-- circle-packing end -->
-  </div>
+  </el-form>
 </template>
 <style scoped lang="less">
 .color-picker-style {
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
index 8a0f71f333..a7441f41fc 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
@@ -307,7 +307,8 @@ const colorItemBorderColor = (index, state) => {
 </script>
 
 <template>
-  <div
+  <el-form
+    size="small"
     style="width: 100%"
     :style="{ 'margin-bottom': customColorExtendSettingOpened ? '16px' : 0 }"
   >
@@ -517,7 +518,7 @@ const colorItemBorderColor = (index, state) => {
         />
       </div>
     </teleport>
-  </div>
+  </el-form>
 </template>
 
 <style scoped lang="less">
@@ -530,7 +531,7 @@ const colorItemBorderColor = (index, state) => {
 .custom-color-selector {
   :deep(.ed-input__prefix) {
     width: calc(100% - 22px);
-    .ed-input__prefix-inner {
+    .ed-input__prefix {
       width: 100%;
     }
   }
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualBasicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualBasicStyleSelector.vue
index 58b4c7f4cb..45eb802c9c 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualBasicStyleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualBasicStyleSelector.vue
@@ -155,7 +155,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <div style="width: 100%">
+  <el-form size="small" style="width: 100%">
     <el-tabs v-model="activeName" id="axis-tabs" stretch>
       <el-tab-pane :label="t('chart.yAxisLeft')" name="left">
         <template v-if="showProperty('colors')">
@@ -476,7 +476,7 @@ onMounted(() => {
         </el-form-item>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </el-form>
 </template>
 <style scoped lang="less">
 .form-item {
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/GradientColorSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/GradientColorSelector.vue
index 8b1ee496ca..6f99aa7e4c 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/GradientColorSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/GradientColorSelector.vue
@@ -185,7 +185,7 @@ onMounted(() => {
 .custom-color-selector {
   :deep(.ed-input__prefix) {
     width: calc(100% - 22px);
-    .ed-input__prefix-inner {
+    .ed-input__prefix {
       width: 100%;
     }
   }
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
index 2fcb8ff4fd..c24e77248c 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
@@ -125,6 +125,7 @@ defineExpose({ getFormData })
       :disabled="!state.indicatorNameForm.show"
       :model="state.indicatorNameForm"
       label-position="top"
+      size="small"
     >
       <el-form-item
         class="form-item"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
index 46e4c08e22..7f24830545 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
@@ -131,6 +131,7 @@ defineExpose({ getFormData })
       :disabled="!state.indicatorValueForm.show"
       :model="state.indicatorValueForm"
       label-position="top"
+      size="small"
     >
       <el-form-item
         class="form-item"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
index 2a81de69ee..d4cc7c3fb5 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
@@ -502,6 +502,7 @@ const isProgressBar = computed(() => {
     :disabled="!state.labelForm.show"
     :model="state.labelForm"
     label-position="top"
+    size="small"
   >
     <el-row v-show="showEmpty" style="margin-bottom: 12px">
       {{ t('chart.no_other_configurable_properties') }}</el-row
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
index c4a0c9e5be..6068f6adb4 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
@@ -267,6 +267,7 @@ onMounted(() => {
     :disabled="!state.legendForm.show"
     :model="state.legendForm"
     label-position="top"
+    size="small"
   >
     <el-row :gutter="8">
       <el-col :span="12">
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
index 7682076d4d..2859ef6ef5 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
@@ -305,7 +305,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-form :model="state.miscForm">
+  <el-form size="small" :model="state.miscForm">
     <el-row :gutter="8">
       <el-col :span="12" v-show="showProperty('gaugeStartAngle')">
         <el-form-item
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscStyleSelector.vue
index 989a5dd461..97d2053a6b 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscStyleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscStyleSelector.vue
@@ -83,7 +83,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-form ref="miscForm" :model="state.miscForm">
+  <el-form size="small" ref="miscForm" :model="state.miscForm">
     <el-form-item
       v-if="showProperty('showName')"
       class="form-item form-item-checkbox"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/SummarySelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/SummarySelector.vue
index ed5e568a69..6da3363035 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/SummarySelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/SummarySelector.vue
@@ -123,6 +123,7 @@ onMounted(() => {
       ref="summaryForm"
       :disabled="!state.basicStyleForm.showSummary"
       :model="state.basicStyleForm"
+      size="small"
       label-position="top"
     >
       <el-form-item
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/SymbolicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/SymbolicStyleSelector.vue
index f1d15f4d20..2624455d37 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/SymbolicStyleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/SymbolicStyleSelector.vue
@@ -154,7 +154,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div style="width: 100%">
+  <el-form size="small" style="width: 100%">
     <div class="map-flow-style" v-if="showProperty('symbolicMapStyle')">
       <el-row style="flex: 1">
         <el-col>
@@ -303,7 +303,7 @@ onMounted(() => {
         </el-row>
       </div>
     </div>
-  </div>
+  </el-form>
 </template>
 
 <style scoped lang="less">
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
index 9ffa7457c4..a22ef35eee 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
@@ -132,6 +132,7 @@ watch(
       :disabled="!state.titleForm.show"
       :model="state.titleForm"
       label-position="top"
+      size="small"
     >
       <el-form-item
         :label="t('chart.title')"
@@ -210,7 +211,7 @@ watch(
             @change="changeTitleStyle('letterSpace')"
           >
             <template #prefix>
-              <el-icon>
+              <el-icon size="16">
                 <Icon name="icon_letter-spacing_outlined"
                   ><icon_letterSpacing_outlined class="svg-icon"
                 /></Icon>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
index 948177db3d..5ec39f5c68 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
@@ -472,6 +472,7 @@ onMounted(() => {
     :disabled="!state.tooltipForm.show"
     :model="state.tooltipForm"
     label-position="top"
+    size="small"
   >
     <el-form-item
       :label="t('chart.background') + t('chart.color')"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
index 9d24c0a55c..09f6f1bef9 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
@@ -99,7 +99,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-form ref="tableCellForm" :model="state.tableCellForm" label-position="top">
+  <el-form size="small" ref="tableCellForm" :model="state.tableCellForm" label-position="top">
     <el-form-item
       :label="t('chart.backgroundColor')"
       class="form-item"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
index 7c75d07aa1..93ba36ecf6 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
@@ -151,6 +151,7 @@ onMounted(() => {
     :disabled="!state.tableHeaderForm.showTableHeader"
     ref="tableHeaderForm"
     label-position="top"
+    size="small"
   >
     <el-form-item
       :label="
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableTotalSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableTotalSelector.vue
index 5df5294675..1aba7802ad 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableTotalSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableTotalSelector.vue
@@ -292,7 +292,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-form ref="tableTotalForm" :model="state.tableTotalForm" label-position="top">
+  <el-form size="small" ref="tableTotalForm" :model="state.tableTotalForm" label-position="top">
     <el-divider
       v-if="showProperty('row')"
       content-position="center"
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 5cd89adecb..9872246ab3 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -4342,63 +4342,8 @@ span {
     overflow-x: hidden;
     height: 100%;
 
-    :deep(.ed-collapse-item__header) {
-      height: 36px !important;
-      line-height: 36px !important;
-      font-size: 12px !important;
-      padding: 0 !important;
-      font-weight: 500 !important;
-      border-top: unset;
-
-      &.is-active {
-        border-bottom-color: var(--ed-collapse-border-color);
-        color: #1f2329;
-      }
-
-      .ed-collapse-item__arrow {
-        margin: 0 6px 0 8px;
-
-        &.is-active {
-          color: #646a73;
-        }
-      }
-    }
-
     :deep(.ed-collapse-item__content) {
       padding: 16px 10px 0;
-      border: none;
-      :deep(.ed-checkbox) {
-        height: 20px;
-      }
-      .ed-checkbox {
-        height: 20px;
-      }
-    }
-
-    :deep(.style-dark) {
-      .ed-collapse-item__header {
-        &.is-active {
-          color: #fff;
-        }
-
-        .ed-collapse-item__arrow {
-          &.is-active {
-            color: #a6a6a6;
-          }
-        }
-      }
-    }
-    :deep(.ed-collapse-item.ed-collapse--dark .ed-collapse-item__header) {
-      border-color: rgba(255, 255, 255, 0.15);
-
-      &.is-active {
-        color: #fff;
-      }
-      .ed-collapse-item__arrow {
-        &.is-active {
-          color: #a6a6a6;
-        }
-      }
     }
   }
 
@@ -4423,11 +4368,14 @@ span {
       font-size: 12px;
       padding: 0 8px !important;
       margin-right: 12px;
+    }
+
+    :deep(.ed-tabs__item:not(.is-active)) {
       color: var(--custom-tab-color);
     }
-    :deep(.is-active) {
+
+    :deep(.ed-tabs__item.is-active) {
       font-weight: 500;
-      color: var(--ed-color-primary, #3370ff);
     }
 
     :deep(.ed-tabs__nav-scroll) {
@@ -5186,10 +5134,11 @@ span {
 .chart-type-select {
   width: 100%;
   margin-top: 8px;
-  :deep(.ed-input__prefix-inner > div) {
+  :deep(.ed-select__prefix) {
     padding: 0;
     margin: 0;
     border: none;
+    height: 20px;
     .chart-type-select-icon {
       width: 23px;
       height: 16px;
diff --git a/core/core-frontend/src/views/visualized/data/dataset/index.vue b/core/core-frontend/src/views/visualized/data/dataset/index.vue
index a6cc513112..57d30d02cd 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -1040,7 +1040,6 @@ const proxyAllowDrop = debounce((arg1, arg2) => {
                     key="structPreview"
                     :columns="columns"
                     v-loading="dataPreviewLoading"
-                    header-class="header-cell"
                     :data="tableData"
                     :width="width"
                     :height="height"
@@ -1057,7 +1056,6 @@ const proxyAllowDrop = debounce((arg1, arg2) => {
                 <el-table
                   v-loading="dataPreviewLoading"
                   class="dataset-preview_table"
-                  header-class="header-cell"
                   :data="tableData"
                   @row-click="rowClick"
                   key="dataPreview"