From 026e4809c82fc64da420cfce4c977188ec3c630d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Wed, 18 Dec 2024 09:01:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/VChartThemeColor/index.vue     | 45 +++++++++----------
 1 file changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/VChartThemeColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/VChartThemeColor/index.vue
index 7c013e18..d4b45986 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/VChartThemeColor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/VChartThemeColor/index.vue
@@ -7,17 +7,15 @@
         size="small"
         @click="selectThemeHandle(item)"
       >
-        <div class="go-flex-items-center">
-          <n-ellipsis style="text-align: left; width: 72px">{{ item.name }} </n-ellipsis>
-          <n-space :wrap-item="false" :size="2">
-            <span
-              class="theme-color-item"
-              v-for="colorItem in item.colors"
-              :key="colorItem"
-              :style="{ backgroundColor: colorItem }"
-            ></span>
-          </n-space>
-        </div>
+        <n-ellipsis class="go-mr-1" style="text-align: left">{{ item.name }} </n-ellipsis>
+        <n-space :wrap="false" :wrap-item="false" :size="2">
+          <span
+            class="theme-color-item"
+            v-for="colorItem in item.colors"
+            :key="colorItem"
+            :style="{ backgroundColor: colorItem }"
+          ></span>
+        </n-space>
       </div>
     </n-gi>
   </n-grid>
@@ -30,17 +28,15 @@
         size="small"
         @click="selectThemeHandle(item)"
       >
-        <div class="go-flex-items-center">
-          <n-ellipsis style="text-align: left; width: 72px">{{ item.name }} </n-ellipsis>
-          <n-space :wrap-item="false" :size="2">
-            <span
-              class="theme-color-item"
-              v-for="colorItem in item.colors"
-              :key="colorItem"
-              :style="{ backgroundColor: colorItem }"
-            ></span>
-          </n-space>
-        </div>
+        <n-ellipsis class="go-mr-2" style="text-align: left">{{ item.name }} </n-ellipsis>
+        <n-space :wrap="false" :wrap-item="false" :size="2">
+          <span
+            class="theme-color-item"
+            v-for="colorItem in item.colors"
+            :key="colorItem"
+            :style="{ backgroundColor: colorItem }"
+          ></span>
+        </n-space>
       </div>
     </n-gi>
   </n-grid>
@@ -227,17 +223,16 @@ $radius: 6px;
 $itemRadius: 2px;
 .theme-item {
   display: flex;
+  justify-content: space-between;
   align-items: center;
   height: 34px;
-  padding: 0 16px;
+  padding: 0 8px;
   overflow: hidden;
   cursor: pointer;
   font-size: 13px;
   border-radius: $radius;
   @include fetch-bg-color('background-color4-shallow');
   &.active {
-    /* border: 1px solid v-bind('themeColor'); */
-    /* border-bottom: 1px solid rgba(0, 0, 0, 0); */
     color: v-bind('themeColor');
   }
   .theme-color-item {