From c7766bee8ca25534dae01e46501958072bfa3f2f Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Fri, 20 Sep 2024 22:07:31 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=20=E5=8F=8C?=
 =?UTF-8?q?=E8=BD=B4=E5=9B=BE=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/RealTimeGroup.vue      |  2 +
 .../data-visualization/RealTimeListTree.vue   |  2 +
 .../editor-style/ChartStyleBatchSet.vue       | 44 ++++++++++++++++++-
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
index c890e5d4ea..da9bfed235 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
@@ -26,6 +26,7 @@ import bubbleMapOrigin from '@/assets/svg/bubble-map-origin.svg'
 import chartMixGroupOrigin from '@/assets/svg/chart-mix-group-origin.svg'
 import chartMixOrigin from '@/assets/svg/chart-mix-origin.svg'
 import chartMixStackOrigin from '@/assets/svg/chart-mix-stack-origin.svg'
+import chartMixDualLineOrigin from '@/assets/svg/chart-mix-dual-line-origin.svg'
 import flowMapOrigin from '@/assets/svg/flow-map-origin.svg'
 import funnelOrigin from '@/assets/svg/funnel-origin.svg'
 import gaugeOrigin from '@/assets/svg/gauge-origin.svg'
@@ -202,6 +203,7 @@ const iconMap = {
   'chart-mix-group-origin': chartMixGroupOrigin,
   'chart-mix-origin': chartMixOrigin,
   'chart-mix-stack-origin': chartMixStackOrigin,
+  'chart-mix-dual-line': chartMixDualLineOrigin,
   'flow-map-origin': flowMapOrigin,
   'funnel-origin': funnelOrigin,
   'gauge-origin': gaugeOrigin,
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
index 3cd50e05f4..5b888dbe3f 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
@@ -26,6 +26,7 @@ import bubbleMapOrigin from '@/assets/svg/bubble-map-origin.svg'
 import chartMixGroupOrigin from '@/assets/svg/chart-mix-group-origin.svg'
 import chartMixOrigin from '@/assets/svg/chart-mix-origin.svg'
 import chartMixStackOrigin from '@/assets/svg/chart-mix-stack-origin.svg'
+import chartMixDualLineOrigin from '@/assets/svg/chart-mix-dual-line-origin.svg'
 import flowMapOrigin from '@/assets/svg/flow-map-origin.svg'
 import funnelOrigin from '@/assets/svg/funnel-origin.svg'
 import gaugeOrigin from '@/assets/svg/gauge-origin.svg'
@@ -293,6 +294,7 @@ const iconMap = {
   'chart-mix-group-origin': chartMixGroupOrigin,
   'chart-mix-origin': chartMixOrigin,
   'chart-mix-stack-origin': chartMixStackOrigin,
+  'chart-mix-dual-line-origin': chartMixDualLineOrigin,
   'flow-map-origin': flowMapOrigin,
   'funnel-origin': funnelOrigin,
   'gauge-origin': gaugeOrigin,
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue
index ad5d09bbfb..d384b1755e 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="batch-opt-main view-panel-row">
+  <div class="batch-opt-main view-panel-row tab-header">
     <chart-style
       v-if="mixProperties && batchOptComponentInfo && batchOptComponentType === 'UserView'"
       class="chart-style-main"
@@ -294,4 +294,46 @@ const onStyleAttrChange = params => {
     }
   }
 }
+.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 8px !important;
+    margin-right: 12px;
+    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% - 35px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}
 </style>