perf: 优化自定义颜色组件交互

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)

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)
+  })
 }
 
 // 删除颜色

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');