perf: 播放器样式优化

src/plugins/iconPark.ts

@@ -100,6 +100,7 @@ import {
   Click,
   Theme,
   Symbol,
+  ArrowCircleLeft,
 } from '@icon-park/vue-next'
 
 export default {
@@ -233,5 +234,6 @@ export default {
     app.component('IconTransform', Transform)
     app.component('IconClick', Click)
     app.component('IconTheme', Theme)
+    app.component('IconArrowCircleLeft', ArrowCircleLeft)
   }
 }

src/views/Screen/SlideThumbnails.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="slide-thumbnails">
-    <div 
-      class="thumbnail"
-      :class="{ 'active': index === slideIndex }"
-      v-for="(slide, index) in slides" 
-      :key="slide.id"
-      @click="turnSlideToIndex(index)"
-    >
-      <ThumbnailSlide :slide="slide" :size="150" />
+    <div class="return-button">
+      <IconArrowCircleLeft class="icon" @click="close()" />
+    </div>
+    <div class="slide-thumbnails-content">
+      <div 
+        class="thumbnail"
+        :class="{ 'active': index === slideIndex }"
+        v-for="(slide, index) in slides" 
+        :key="slide.id"
+        @click="turnSlideToIndex(index)"
+      >
+        <ThumbnailSlide :slide="slide" :size="150" />
+      </div>
     </div>
   </div>
 </template>
@@ -28,14 +33,17 @@ export default defineComponent({
       type: Function as PropType<(index: number) => void>,
     },
   },
-  setup() {
+  setup(props, { emit }) {
     const store = useStore()
     const slides = computed(() => store.state.slides)
     const slideIndex = computed(() => store.state.slideIndex)
 
+    const close = () => emit('close')
+
     return {
       slides,
       slideIndex,
+      close,
     }
   },
 })
@@ -43,8 +51,31 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .slide-thumbnails {
-  height: 600px;
-  padding: 5px 10px;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: #1a1a1a;
+  z-index: 99;
+}
+.return-button {
+  height: 60px;
+  padding: 20px 30px 0;
+
+  .icon {
+    color: #fff;
+    font-size: 36px;
+    cursor: pointer;
+
+    &:hover {
+      color: $themeColor;
+    }
+  }
+}
+.slide-thumbnails-content {
+  height: calc(100% - 100px);
+  padding: 20px 30px 30px 30px;
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
@@ -52,15 +83,17 @@ export default defineComponent({
 
   .thumbnail {
     width: 150px;
+    outline: 2px solid #aaa;
+    margin-right: 12px;
     margin-bottom: 12px;
-    outline: 1px solid rgba($color: $themeColor, $alpha: .1);
 
-    &.active {
+    &:hover {
       outline-color: $themeColor;
     }
 
-    &:not(:nth-child(6n)) {
-      margin-right: 12px;
+    &.active {
+      outline-width: 3px;
+      outline-color: $themeColor;
     }
   }
 }

src/views/Screen/index.vue

@@ -35,15 +35,11 @@
       </div>
     </div>
 
-    <Modal
-      v-model:visible="slideThumbnailModelVisible" 
-      :footer="null" 
-      centered
-      :width="1020"
-      :bodyStyle="{ padding: '50px 20px 20px 20px' }"
-    >
-      <SlideThumbnails :turnSlideToIndex="turnSlideToIndex" />
-    </Modal>
+    <SlideThumbnails 
+      v-if="slideThumbnailModelVisible" 
+      :turnSlideToIndex="turnSlideToIndex" 
+      @close="slideThumbnailModelVisible = false"
+    />
 
     <div class="tools">
       <IconLeftC class="tool-btn" @click="execPrev()" />
@@ -207,15 +203,23 @@ export default defineComponent({
     const contextmenus = (): ContextmenuItem[] => {
       return [
         {
-          text: '上一页',
+          text: '上一张',
+          subText: '↑、←',
           disable: slideIndex.value <= 0,
           handler: () => turnPrevSlide(),
         },
         {
-          text: '下一页',
+          text: '下一张',
+          subText: '↓、→',
           disable: slideIndex.value >= slides.value.length - 1,
           handler: () => turnNextSlide(),
         },
+        { divider: true },
+        {
+          text: '查看所有幻灯片',
+          handler: () => slideThumbnailModelVisible.value = true,
+        },
+        { divider: true },
         {
           text: '结束放映',
           subText: 'ESC',