From 6f4e967b4950cef72844ac1d49416ff5bb8014bf 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: Mon, 27 Feb 2023 12:46:36 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E9=A2=9C=E8=89=B2=E7=BB=84=E4=BB=B6=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CanvasPage/components/CreateColor/index.vue      |  8 ++++----
 .../components/CreateColorRender/index.vue           | 12 +++++++++++-
 .../chart/ContentEdit/components/EditRange/index.vue |  2 +-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue
index 5edac24a..4186750c 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue
@@ -56,7 +56,7 @@
               <n-a @click="createColor">立即创建</n-a>
             </n-text>
             <!-- 列表 -->
-            <div class="color-card-box" v-for="(item, index) in colorList" :key="item.id">
+            <div class="color-card-box" v-for="(item, index) in colorList" :key="index">
               <n-card
                 class="color-card"
                 :class="{ selected: item.id === selectColorId }"
@@ -69,8 +69,8 @@
                   <n-ellipsis style="text-align: left; width: 70px">{{ item.name }} </n-ellipsis>
                   <span
                     class="theme-color-item"
-                    v-for="colorItem in item.color"
-                    :key="colorItem"
+                    v-for="(colorItem, index) in item.color"
+                    :key="index"
                     :style="{ backgroundColor: colorItem }"
                   ></span>
                 </div>
@@ -127,7 +127,7 @@ type ColorType = {
 const defaultColor: ColorType = {
   id: getUUID(),
   name: '未命名',
-  color: ['#6ae5bb', '#69e3de', '#5ac4ee', '#5ac4ee', '#4498ec', '#3c7ddf']
+  color: ['#6ae5bb', '#69e3de', '#5ac5ee', '#5ac4ee', '#4498ec', '#3c7ddf']
 }
 const chartEditStore = useChartEditStore()
 const modelShowRef = ref(false)
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue
index 7a842200..a3f6c441 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue
@@ -27,6 +27,7 @@
                 :show-preview="true"
                 :modes="['hex']"
                 @complete="completeHandle($event, index)"
+                @update:show="selectHandle(item, index)"
               />
               <div v-show="index > 5">
                 <n-tooltip trigger="hover">
@@ -183,7 +184,13 @@ const getRenderBackgroundColor = (color?: string) => {
   }
 }
 
-// 顶部选择颜色
+// 点击颜色
+const selectHandle = (color: string, index: number) => {
+  targetColor.color = color
+  targetColor.index = index
+}
+
+// 顶部改变颜色
 const completeHandle = (color?: string, index?: number) => {
   color && (targetColor.color = color)
   index && (targetColor.index = index)
@@ -205,6 +212,9 @@ const selectExpandColor = (color: string, isHexa: boolean) => {
 const addColor = () => {
   const lastData = editColor.value?.color[editColor.value?.color.length - 1] || '#2c2c31'
   editColor.value?.color.push(lastData)
+  nextTick(() => {
+    emit('updateColor', editColor.value)
+  })
 }
 
 // 删除颜色
diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue
index d9a7bcc9..d3be9d95 100644
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@@ -55,7 +55,7 @@ const rangeModelStyle = computed(() => {
   position: relative;
   transform-origin: left top;
   background-size: cover;
-  border-radius: 20px;
+  border-radius: 10px;
   overflow: hidden;
   @include fetch-border-color('hover-border-color');
   @include fetch-bg-color('background-color2');