From 997bb47ceabe16ac3516428b9a5006a81d529e30 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 10 Apr 2022 20:09:05 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=9B=BE=E8=A1=A8=E9=A2=84=E7=BD=AE?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=85=8D=E8=89=B2=E5=8F=AF=E9=80=89=E9=95=BF?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChartStylePanel/index.vue                 | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index d0bd9103..6e6e3c05 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -100,8 +100,17 @@
       <Popover trigger="click" v-model:visible="presetThemesVisible">
         <template #content>
           <div class="preset-themes">
-            <div class="preset-theme" v-for="(item, index) in presetChartThemes" :key="index" @click="applyPresetTheme(item)">
-              <div class="preset-theme-color" v-for="color in item" :key="color" :style="{ backgroundColor: color }"></div>
+            <div class="preset-theme" v-for="(item, index) in presetChartThemes" :key="index">
+              <div 
+                class="preset-theme-color" 
+                :class="{ 'select': presetThemeColorHoverIndex[0] === index && itemIndex <= presetThemeColorHoverIndex[1] }"
+                v-for="(color, itemIndex) in item" 
+                :key="color" 
+                :style="{ backgroundColor: color }" 
+                @click="applyPresetTheme(item, itemIndex)"
+                @mouseenter="presetThemeColorHoverIndex = [index, itemIndex]"
+                @mouseleave="presetThemeColorHoverIndex = [-1, -1]"
+              ></div>
             </div>
           </div>
         </template>
@@ -181,6 +190,7 @@ export default defineComponent({
 
     const chartDataEditorVisible = ref(false)
     const presetThemesVisible = ref(false)
+    const presetThemeColorHoverIndex = ref<[number, number]>([-1, -1])
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
@@ -262,8 +272,9 @@ export default defineComponent({
     }
 
     // 使用预置主题配色
-    const applyPresetTheme = (colors: string[]) => {
-      updateElement({ themeColor: colors })
+    const applyPresetTheme = (colors: string[], index: number) => {
+      const themeColor = colors.slice(0, index + 1)
+      updateElement({ themeColor })
       presetThemesVisible.value = false
     }
 
@@ -295,6 +306,7 @@ export default defineComponent({
     return {
       chartDataEditorVisible,
       presetThemesVisible,
+      presetThemeColorHoverIndex,
       handleElement,
       updateData,
       fill,
@@ -364,5 +376,10 @@ export default defineComponent({
 .preset-theme-color {
   width: 20px;
   height: 20px;
+
+  &.select {
+    transform: scale(1.2);
+    transition: transform $transitionDelayFast;
+  }
 }
 </style>
\ No newline at end of file