From a71c9ffbd3dc8bd62c0f98bf0398f3b7dc1de5c9 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 5 Nov 2023 16:36:09 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=97=B6=E7=BC=A9=E7=95=A5=E5=9B=BE=E7=9A=84?=
 =?UTF-8?q?=E8=A1=A8=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/element.ts                  | 15 +++++++++++++++
 src/views/Editor/Thumbnails/index.vue | 27 ++++++++++++++++++++++++---
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/utils/element.ts b/src/utils/element.ts
index 5bd42248..c797101e 100644
--- a/src/utils/element.ts
+++ b/src/utils/element.ts
@@ -225,4 +225,19 @@ export const getLineElementPath = (element: PPTLineElement) => {
     return `M${start} C${p1} ${p2} ${end}`
   }
   return `M${start} L${end}`
+}
+
+/**
+ * 判断一个元素是否在可视范围内
+ * @param element 元素
+ * @param parent 父元素
+ */
+export const isElementInViewport = (element: HTMLElement, parent: HTMLElement): boolean => {
+  const elementRect = element.getBoundingClientRect()
+  const parentRect = parent.getBoundingClientRect()
+
+  return (
+    elementRect.top >= parentRect.top &&
+    elementRect.bottom <= parentRect.bottom
+  )
 }
\ No newline at end of file
diff --git a/src/views/Editor/Thumbnails/index.vue b/src/views/Editor/Thumbnails/index.vue
index 48f1ea33..baae51a9 100644
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@@ -17,6 +17,7 @@
 
     <Draggable 
       class="thumbnail-list"
+      ref="thumbnailsRef"
       :modelValue="slides"
       :animation="200"
       :scroll="true"
@@ -46,10 +47,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
 import { fillDigit } from '@/utils/common'
+import { isElementInViewport } from '@/utils/element'
 import type { ContextmenuItem } from '@/components/Contextmenu/types'
 import useSlideHandler from '@/hooks/useSlideHandler'
 import useScreening from '@/hooks/useScreening'
@@ -85,6 +87,26 @@ const {
   sortSlides,
 } = useSlideHandler()
 
+// 页面被切换时
+const thumbnailsRef = ref<InstanceType<typeof Draggable>>()
+watch(() => slideIndex.value, () => {
+
+  // 清除多选状态的幻灯片
+  if (selectedSlidesIndex.value.length) {
+    mainStore.updateSelectedSlidesIndex([])
+  }
+
+  // 检查当前页缩略图是否在可视范围，不在的话需要滚动到对应的位置
+  nextTick(() => {
+    const activeThumbnailRef: HTMLElement = thumbnailsRef.value?.$el?.querySelector('.thumbnail-item.active')
+    if (thumbnailsRef.value && activeThumbnailRef && !isElementInViewport(activeThumbnailRef, thumbnailsRef.value.$el)) {
+      setTimeout(() => {
+        activeThumbnailRef.scrollIntoView({ behavior: 'smooth' })
+      }, 100)
+    }
+  })
+})
+
 // 切换页面
 const changeSlideIndex = (index: number) => {
   mainStore.setActiveElementIdList([])
@@ -100,6 +122,7 @@ const handleClickSlideThumbnail = (e: MouseEvent, index: number) => {
   if (isMultiSelected && selectedSlidesIndex.value.includes(index) && e.button !== 0) return
 
   // 按住Ctrl键，点选幻灯片，再次点击已选中的页面则取消选中
+  // 如果被取消选中的页面刚好是当前激活页面，则需要从其他被选中的页面中选择第一个作为当前激活页面
   if (ctrlKeyState.value) {
     if (slideIndex.value === index) {
       if (!isMultiSelected) return
@@ -116,7 +139,6 @@ const handleClickSlideThumbnail = (e: MouseEvent, index: number) => {
       else {
         const newSelectedSlidesIndex = [...selectedSlidesIndex.value, index]
         mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
-        changeSlideIndex(index)
       }
     }
   }
@@ -135,7 +157,6 @@ const handleClickSlideThumbnail = (e: MouseEvent, index: number) => {
     const newSelectedSlidesIndex = []
     for (let i = minIndex; i <= maxIndex; i++) newSelectedSlidesIndex.push(i)
     mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
-    changeSlideIndex(index)
   }
   // 正常切换页面
   else {