feat: 放映模式鼠标触底展开缩略图导航

README.md

@@ -146,8 +146,9 @@ Browser access: http://127.0.0.1:5173/
 - Color settings
 - Formula line thickness settings
 ### Slide Show
-- Preview all slides
 - Brush tools (pen/shape/arrow/highlighter annotation, eraser, blackboard mode)
+- Preview all slides
+- Bottom thumbnails navigation
 - Timer tool
 - Laser pointer
 - Auto play

README_zh.md

@@ -140,8 +140,9 @@ npm run dev
 - 颜色设置
 - 公式线条粗细设置
 ### 幻灯片放映
-- 全部幻灯片预览
 - 画笔工具（画笔/形状/箭头/荧光笔标注、橡皮擦除、黑板模式）
+- 全部幻灯片预览
+- 触底显示缩略图导航
 - 计时器工具
 - 激光笔
 - 自动放映

src/views/Screen/BaseView.vue

@@ -51,6 +51,8 @@
         <IconPower class="tool-btn" v-tooltip="'结束放映'" @click="exitScreening()" />
       </div>
     </div>
+
+    <BottomThumbnails v-if="bottomThumbnailsVisible" />
   </div>
 </template>
 
@@ -69,6 +71,7 @@ import ScreenSlideList from './ScreenSlideList.vue'
 import SlideThumbnails from './SlideThumbnails.vue'
 import WritingBoardTool from './WritingBoardTool.vue'
 import CountdownTimer from './CountdownTimer.vue'
+import BottomThumbnails from './BottomThumbnails.vue'
 
 const props = defineProps<{
   changeViewMode: (mode: 'base' | 'presenter') => void
@@ -104,6 +107,7 @@ const rightToolsVisible = ref(false)
 const writingBoardToolVisible = ref(false)
 const timerlVisible = ref(false)
 const slideThumbnailModelVisible = ref(false)
+const bottomThumbnailsVisible = ref(false)
 const laserPen = ref(false)
 
 const contextmenus = (): ContextmenuItem[] => {
@@ -171,6 +175,11 @@ const contextmenus = (): ContextmenuItem[] => {
       text: '查看所有幻灯片',
       handler: () => slideThumbnailModelVisible.value = true,
     },
+    {
+      text: '触底显示缩略图',
+      subText: bottomThumbnailsVisible.value ? '√' : '',
+      handler: () => bottomThumbnailsVisible.value = !bottomThumbnailsVisible.value,
+    },
     {
       text: '画笔工具',
       handler: () => writingBoardToolVisible.value = true,

src/views/Screen/BottomThumbnails.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="bottom-thumbnails">
+    <div class="thumbnails"
+      ref="thumbnailsRef"
+      @wheel.prevent="$event => handleMousewheelThumbnails($event)"
+    >
+      <div 
+        class="thumbnail"
+        :class="{ 'active': index === slideIndex }"
+        v-for="(slide, index) in slides" 
+        :key="slide.id"
+        @click="turnSlideToIndex(index)"
+      >
+        <ThumbnailSlide :slide="slide" :size="100 / viewportRatio" :visible="index < slidesLoadLimit" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useSlidesStore } from '@/store'
+import useLoadSlides from '@/hooks/useLoadSlides'
+import useExecPlay from './hooks/useExecPlay'
+
+import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
+
+const { slides, slideIndex, viewportRatio } = storeToRefs(useSlidesStore())
+
+const thumbnailsRef = ref<HTMLElement>()
+
+const { turnSlideToIndex } = useExecPlay()
+const { slidesLoadLimit } = useLoadSlides()
+
+const handleMousewheelThumbnails = (e: WheelEvent) => {
+  if (!thumbnailsRef.value) return
+  thumbnailsRef.value.scrollBy(e.deltaY, 0)
+}
+
+watch(slideIndex, () => {
+  nextTick(() => {
+    if (!thumbnailsRef.value) return
+
+    const activeThumbnailRef: HTMLElement | null = thumbnailsRef.value.querySelector('.thumbnail.active')
+    if (!activeThumbnailRef) return
+
+    const width = thumbnailsRef.value.offsetWidth
+    const offsetLeft = activeThumbnailRef.offsetLeft + activeThumbnailRef.clientWidth / 2
+    thumbnailsRef.value.scrollTo({ left: offsetLeft - width / 2, behavior: 'smooth' })
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.bottom-thumbnails {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  bottom: -120px;
+  z-index: 4;
+  transition: bottom $transitionDelay;
+
+  &::after {
+    content: '';
+    width: 100%;
+    height: 3px;
+    position: absolute;
+    left: 0;
+    top: -3px;
+  }
+
+  &:hover {
+    bottom: 0;
+    z-index: 20;
+  }
+}
+.thumbnails {
+  height: 120px;
+  padding: 10px;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background-color: rgba($color: #000, $alpha: .75);
+  position: relative;
+}
+.thumbnail {
+  display: inline-block;
+  outline: 2px solid #aaa;
+
+  & + .thumbnail {
+    margin-left: 10px;
+  }
+
+  &:hover {
+    outline-color: $themeColor;
+  }
+
+  &.active {
+    outline-width: 3px;
+    outline-color: $themeColor;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+</style>

src/views/Screen/PresenterView.vue

@@ -147,7 +147,7 @@ watch(slideIndex, () => {
     if (!activeThumbnailRef) return
 
     const width = thumbnailsRef.value.offsetWidth
-    const offsetLeft = activeThumbnailRef.offsetLeft
+    const offsetLeft = activeThumbnailRef.offsetLeft + activeThumbnailRef.clientWidth / 2
     thumbnailsRef.value.scrollTo({ left: offsetLeft - width / 2, behavior: 'smooth' })
   })
 })
@@ -257,6 +257,7 @@ const contextmenus = (): ContextmenuItem[] => {
   overflow-x: auto;
   overflow-y: hidden;
   border-top: solid 1px #3a3a3a;
+  position: relative;
 }
 .thumbnail {
   display: inline-block;