Revert "revert: UI库升级"

This reverts commit 348f1dced6.
2026-05-15 13:32:18 +08:00 · 2025-05-08 10:22:43 +08:00
parent 6185963059
commit 9e9f0ae1bb
42 changed files with 82 additions and 187 deletions
--- 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",
--- 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" />
--- 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;
  }
 }

--- 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">
--- 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"
--- 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"
--- 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')"
          />
--- 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 {
--- 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),
--- 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"
--- 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"
--- 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;
--- 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">
--- 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"
--- 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"
--- 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
--- 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 {
--- 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;
--- 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;
  }
--- 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 {
--- 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;
 }
--- 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);
--- 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"
--- 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 {
--- 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%;
    }
  }
--- 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 {
--- 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%;
    }
  }
--- 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"
--- 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"
--- 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
--- 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">
--- 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
--- 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"
--- 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
--- 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">
--- 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>
--- 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')"
--- 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"
--- 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="
--- 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"
--- 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;
--- 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"