feat: 添加放映时 显示 / 隐藏 页码

src/plugins/iconPark.ts

@@ -5,7 +5,6 @@ import {
   PlayOne,
   Lock,
   Unlock,
-  Search,
   Ppt,
   Format,
   Picture,
@@ -158,7 +157,6 @@ export default {
 
     // 其他
     app.component('IconPlayOne', PlayOne)
-    app.component('IconSearch', Search)
     app.component('IconPpt', Ppt)
     app.component('IconHelpcenter', Helpcenter)
     app.component('IconGithub', Github)

src/views/Screen/index.vue

@@ -44,7 +44,6 @@
     <div class="tools">
       <IconLeftC class="tool-btn" @click="execPrev()" />
       <IconRightC class="tool-btn" @click="execNext()" />
-      <IconSearch class="tool-btn" @click="slideThumbnailModelVisible = true" />
       <Popover trigger="click" v-model:visible="writingBoardToolVisible">
         <template #content>
           <WritingBoardTool @close="writingBoardToolVisible = false" />
@@ -52,6 +51,10 @@
         <IconWrite class="tool-btn" />
       </Popover>
     </div>
+
+    <div class="page-number" @click="slideThumbnailModelVisible = true" v-if="showPageNumber">
+      {{slideIndex + 1}} / {{slides.length}}
+    </div>
   </div>
 </template>
 
@@ -89,6 +92,8 @@ export default defineComponent({
 
     const scale = computed(() => slideWidth.value / VIEWPORT_SIZE)
 
+    const showPageNumber = ref(false)
+
     const slideThumbnailModelVisible = ref(false)
 
     const writingBoardToolVisible = ref(false)
@@ -233,6 +238,11 @@ export default defineComponent({
           handler: () => turnNextSlide(),
         },
         { divider: true },
+        {
+          text: '显示页码',
+          subText: showPageNumber.value ? '√' : '',
+          handler: () => showPageNumber.value = !showPageNumber.value,
+        },
         {
           text: '查看所有幻灯片',
           handler: () => slideThumbnailModelVisible.value = true,
@@ -263,6 +273,7 @@ export default defineComponent({
       slideThumbnailModelVisible,
       turnSlideToIndex,
       writingBoardToolVisible,
+      showPageNumber,
     }
   },
 })
@@ -358,10 +369,22 @@ export default defineComponent({
   opacity: .35;
 
   &:hover {
-    opacity: .7;
+    opacity: .9;
   }
   & + .tool-btn {
     margin-left: 8px;
   }
 }
+.page-number {
+  position: fixed;
+  bottom: 8px;
+  right: 8px;
+  padding: 8px 12px;
+  color: #666;
+  background-color: rgba($color: #f2f4f6, $alpha: .7);
+  box-shadow: 0 2px 12px 0 rgba($color: #333, $alpha: .2);
+  border-radius: $borderRadius;
+  z-index: 10;
+  cursor: pointer;
+}
 </style>