perf: 优化页面切换时缩略图的表现

src/utils/element.ts

@@ -226,3 +226,18 @@ export const getLineElementPath = (element: PPTLineElement) => {
   }
   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
+  )
+}

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 {