From 6a021e8705f58c937c25430fea581063c3ad7624 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 19 Jan 2025 10:11:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B8=90=E5=8F=98=E5=8F=96=E8=89=B2?=
 =?UTF-8?q?=E5=99=A8=E5=88=9D=E5=A7=8B=E5=8C=96=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GradientBar.vue                | 35 +++++++++----------
 .../ElementStylePanel/ShapeStylePanel.vue     |  5 +++
 src/views/Editor/Toolbar/SlideDesignPanel.vue |  9 +++--
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/components/GradientBar.vue b/src/components/GradientBar.vue
index 48185cb4..3b465c2f 100644
--- a/src/components/GradientBar.vue
+++ b/src/components/GradientBar.vue
@@ -2,25 +2,26 @@
   <div class="gradient-bar">
     <div class="bar" ref="barRef" :style="{ backgroundImage: gradientStyle }" @click="$event => addPoint($event)"></div>
     <div class="point" 
-      :class="{ 'active': activeIndex === index }"
-      v-for="(item, index) in points" 
-      :key="item.pos + '-' + index" 
+      :class="{ 'active': index === i }"
+      v-for="(item, i) in points" 
+      :key="item.pos + '-' + i" 
       :style="{
         backgroundColor: item.color,
         left: `calc(${item.pos}% - 5px)`,
       }"
-      @mousedown.left="movePoint(index)"
-      @click.right="removePoint(index)"
+      @mousedown.left="movePoint(i)"
+      @click.right="removePoint(i)"
     ></div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { GradientColor } from '@/types/slides'
-import { ref, computed, watchEffect, watch } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
 
 const props = defineProps<{
   value: GradientColor[]
+  index: number
 }>()
 
 const emit = defineEmits<{
@@ -31,15 +32,10 @@ const emit = defineEmits<{
 const points = ref<GradientColor[]>([])
 
 const barRef = ref<HTMLElement>()
-const activeIndex = ref(0)
 
 watchEffect(() => {
   points.value = props.value
-  if (activeIndex.value > props.value.length - 1) activeIndex.value = 0
-})
-
-watch(activeIndex, () => {
-  emit('update:index', activeIndex.value)
+  if (props.index > props.value.length - 1) emit('update:index', 0)
 })
 
 const gradientStyle = computed(() => {
@@ -50,14 +46,17 @@ const gradientStyle = computed(() => {
 const removePoint = (index: number) => {
   if (props.value.length <= 2) return
 
-  if (index === activeIndex.value) {
-    activeIndex.value = (index - 1 < 0) ? 0 : index - 1
+  let targetIndex = 0
+
+  if (index === props.index) {
+    targetIndex = (index - 1 < 0) ? 0 : index - 1
   }
-  else if (activeIndex.value === props.value.length - 1) {
-    activeIndex.value = props.value.length - 2
+  else if (props.index === props.value.length - 1) {
+    targetIndex = props.value.length - 2
   }
 
   const values = props.value.filter((item, _index) => _index !== index)
+  emit('update:index', targetIndex)
   emit('update:value', values)
 }
 
@@ -89,9 +88,9 @@ const movePoint = (index: number) => {
       if (point.pos > _points[i].pos) targetIndex = i + 1
     }
 
-    activeIndex.value = targetIndex
     _points.splice(targetIndex, 0, point)
 
+    emit('update:index', targetIndex)
     emit('update:value', _points)
     
     document.onmousemove = null
@@ -111,7 +110,7 @@ const addPoint = (e: MouseEvent) => {
   const color = props.value[targetIndex - 1] ? props.value[targetIndex - 1].color : props.value[targetIndex].color
   const values = [...props.value]
   values.splice(targetIndex, 0, { pos, color })
-  activeIndex.value = targetIndex
+  emit('update:index', targetIndex)
   emit('update:value', values)
 }
 </script>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index 4677f35b..365de384 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
@@ -54,6 +54,7 @@
       <div class="row">
         <GradientBar
           :value="gradient.colors"
+          :index="currentGradientIndex"
           @update:value="value => updateGradient({ colors: value })"
           @update:index="index => currentGradientIndex = index"
         />
@@ -182,6 +183,10 @@ watch(handleElement, () => {
   textAlign.value = handleElement.value?.text?.align || 'middle'
 }, { deep: true, immediate: true })
 
+watch(handleElementId, () => {
+  currentGradientIndex.value = 0
+})
+
 const { addHistorySnapshot } = useHistorySnapshot()
 const { toggleShapeFormatPainter } = useShapeFormatPainter()
 
diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue
index ae8d986b..eafaa4e6 100644
--- a/src/views/Editor/Toolbar/SlideDesignPanel.vue
+++ b/src/views/Editor/Toolbar/SlideDesignPanel.vue
@@ -62,6 +62,7 @@
       <div class="row">
         <GradientBar
           :value="background.gradient?.colors || []"
+          :index="currentGradientIndex"
           @update:value="value => updateGradientBackground({ colors: value })"
           @update:index="index => currentGradientIndex = index"
         />
@@ -298,7 +299,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import type { 
@@ -333,7 +334,7 @@ import Modal from '@/components/Modal.vue'
 import GradientBar from '@/components/GradientBar.vue'
 
 const slidesStore = useSlidesStore()
-const { slides, currentSlide, viewportRatio, theme } = storeToRefs(slidesStore)
+const { slides, currentSlide, slideIndex, viewportRatio, theme } = storeToRefs(slidesStore)
 
 const moreThemeConfigsVisible = ref(false)
 const themeStylesExtractVisible = ref(false)
@@ -357,6 +358,10 @@ const {
   applyThemeToAllSlides,
 } = useSlideTheme()
 
+watch(slideIndex, () => {
+  currentGradientIndex.value = 0
+})
+
 // 设置背景模式：纯色、图片、渐变色
 const updateBackgroundType = (type: SlideBackgroundType) => {
   if (type === 'solid') {