feat: 进入输入模式的时候提示禁用方向键

src/animations/FadeTransition.vue

@@ -0,0 +1,20 @@
+<template>
+  <transition name="fade" mode="in-out">
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'FadeTransition'
+}
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .2s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/PDF/Pdf.vue

@@ -2,6 +2,9 @@
   <div class="pdf">
     <canvas class="pdf pdf-canvas" id="pdf-canvas" :class="classList"></canvas>
     <div v-if="loading" class="loading">加载中...</div>
+    <fade-transition>
+      <div v-if="focus" class="focus-mask">禁用方向键中...<br>按 ESC 键退出</div>
+    </fade-transition>
   </div>
 </template>
 
@@ -10,8 +13,10 @@ import pdfjs from '@/utils/pdf'
 import downloadFile from '@/utils/download-base64'
 import { mapState } from 'vuex'
 import { SET_TOTAL_PAGES } from '@/store/types/pdf-types'
+import FadeTransition from '@/animations/FadeTransition'
 
 export default {
+  components: { FadeTransition },
   data () {
     return {
       loading: true
@@ -40,7 +45,8 @@ export default {
       src: state => state.pdf.src,
       showDiscussion: state => state.pdf.showDiscussion,
       currentPage: state => state.pdf.currentPage,
-      screenShot: state => state.pdf.screenShot
+      screenShot: state => state.pdf.screenShot,
+      focus: state => state.pdf.focus
     }),
     classList () {
       return {
@@ -94,7 +100,7 @@ export default {
   z-index: -1;
   position: relative;
 }
-.loading {
+.loading, .focus-mask {
   position: absolute;
   display: flex;
   align-items: center;
@@ -107,6 +113,13 @@ export default {
   font-size: 40px;
 }
 
+.focus-mask {
+  background: rgba(202, 218, 234, 0.3);
+  box-shadow: 0 0 0 1000px rgba(202, 218, 234, 0.2);
+  color: rgba(90, 106, 122, 0.5);
+  text-shadow: 2px 2px 4px rgba(90, 106, 122, 0.2);
+}
+
 .pdf-canvas {
   z-index: 0;
   outline: none;

src/views/teacher/components/TeacherCourseDetail.vue

@@ -27,9 +27,8 @@
         <c-button icon="lightbulb_outline" theme="green" block>设置课程知识点</c-button>
       </router-link>
       <router-link :to="{ name: 'teacher-course-slides' }">
-
+        <c-button icon="list" theme="blue" block :left="12" no-bold>课件列表</c-button>
       </router-link>
-      <c-button icon="list" theme="blue" block :left="12" no-bold>课件列表</c-button>
     </div>
     <div class="mt-32 mb-12">修改选课码</div>
     <div class="change-wrapper mb-24">