feat: 讨论区页面跳转至特定幻灯片页面

src/components/Discussion/DiscussionArea.vue

@@ -3,11 +3,12 @@
     <h1 class="sub-title vertical-center">
       讨论区
       <c-button theme="green" :left="12" :icon="focus ? 'unfold_less' : 'edit'" text @click="handleFocusButtonClick">
-        {{focus ? '隐藏编辑器' : '发帖'}}
+        {{focus ? '隐藏编辑器' : '讨论｜笔记'}}
       </c-button>
-      <c-button v-if="focus" :no-bold="personal" text :theme="personal ? 'blue' : ''"
+      <c-button :no-bold="personal" text :theme="personal ? 'blue' : ''"
                 :icon="personal ? 'check_box' : 'check_box_outline_blank'"
-                @click="handleSetPersonal">私人笔记
+                title="如果设置为私人笔记，则这条讨论仅自己可见"
+                @click="handleSetPersonal">笔记模式
       </c-button>
     </h1>
     <div class="discussion-area-content">
@@ -124,14 +125,17 @@ export default {
       })
     },
     getNote (size) {
-      this.notes = []
       return getSelfCommentsBySlide({
         slideId: this.slideId,
         pageNumber: this.currentPage,
         show: false,
-        size: 1000
+        size: 1000,
+        sort: ['createAt,desc']
       })
-        .then(res => (this.notes = res.data))
+        .then(res => {
+          this.notes = []
+          this.notes = res.data
+        })
         .catch(err => this.$setErrorMessage(err.response.data.msg))
     },
     handleCommentSubmit (comment) {
@@ -144,6 +148,9 @@ export default {
       }).then(res => {
         this.$refs.writeComment.resetContent()
         this.$setSuccessMessage('您的讨论帖发表成功')
+        if (this.personal) {
+          this.getNote(1000)
+        }
       }).catch(err => {
         this.$setErrorMessage(err.response.data.msg)
       })
@@ -210,7 +217,7 @@ export default {
     color: #5a6a7a;
     display: inline-block;
     background-color: white;
-    padding: 0 12px;
+    padding: 4px 12px;
     line-height: 12px;
   }
 

src/components/Discussion/WriteNewComment.vue

@@ -13,6 +13,7 @@
 <script>
 import IconButton from '@/components/Basic/IconButton'
 import { mapState } from 'vuex'
+import { USE_FOCUS } from '@/store/types/pdf-types'
 
 export default {
   props: {
@@ -50,6 +51,12 @@ export default {
       this.content = ''
     },
     handleTitleKey (e) {
+      if (!this.title && !e.isComposing && e.key === 'Enter') {
+        this.$store.commit(USE_FOCUS)
+        e.preventDefault()
+        e.stopPropagation()
+        return
+      }
       if (this.title && !e.isComposing && e.key === 'Enter') {
         this.$refs.content.focus()
         e.preventDefault()

src/components/DiscussionTab/CMessage.vue

@@ -63,7 +63,8 @@ export default {
           } else if (this.message.type === messageType.noticeNew) {
             this.$router.push({ name: 'student-course-slides', params: { courseId: this.message.refId } })
           } else {
-            this.$router.push({ name: 'pdf-reader', params: { slideId: this.message.refId } })
+            const page = this.message.content.match(/第([1-9]+)页/)[1]
+            this.$router.push({ name: 'pdf-reader', params: { slideId: this.message.refId, page: page ?? '1' } })
           }
         }
 

src/components/PDF/Pdf.vue

@@ -10,7 +10,6 @@
 
 <script>
 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'
@@ -85,10 +84,6 @@ export default {
       }).catch(() => {
         this.$setInfoMessage('PDF 当前页解析错误')
       })
-    },
-    getScreenShot () {
-      const img = this._canvas.toDataURL('image/png')
-      downloadFile(img, '课程课件截图.png')
     }
   }
 }
@@ -96,10 +91,12 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
+
 .pdf {
   z-index: -1;
   position: relative;
 }
+
 .loading, .focus-mask {
   position: absolute;
   display: flex;
@@ -114,11 +111,12 @@ export default {
 }
 
 .focus-mask {
+  box-sizing: border-box;
+  padding-top: 60vh;
   font-size: 24px;
   background: rgba(255, 255, 255, 0.5);
   box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.5);
   color: #3a4a5a;
-  top: 30vh;
   text-shadow: 2px 2px 6px rgba(255, 255, 255, 1);
 }
 

src/components/PDF/PointerCanvas.vue

@@ -1,10 +1,11 @@
 <template>
-  <canvas :width="width" :height="height" class="pointer-canvas" ref="pointerCanvas">
+  <canvas :width="width" :height="height" class="pointer-canvas" ref="pointerCanvas" @click="handleFocus">
   </canvas>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import { USE_FOCUS } from '@/store/types/pdf-types'
 
 export default {
   name: 'PointerCanvas',
@@ -17,7 +18,7 @@ export default {
       points: [],
       disablePointer: false,
       width: window.innerWidth,
-      height: window.innerHeight,
+      height: document.documentElement.clientHeight,
       rects: [],
       drawingRect: {},
       // 为了突破30fps限制（应该与chrome优化机制有关），往数组中多放入冗余数字，以让动画更流畅
@@ -59,7 +60,7 @@ export default {
   methods: {
     handleResize () {
       this.width = window.innerWidth
-      this.height = window.innerHeight
+      this.height = document.documentElement.clientHeight
       this.renderer()
     },
     handleMouseMove (e) {
@@ -149,6 +150,9 @@ export default {
         }
       })
       this._ctx.closePath()
+    },
+    handleFocus () {
+      this.$store.commit(USE_FOCUS)
     }
   }
 }

src/router/pdf.js

@@ -1,7 +1,7 @@
 export default [
   {
     meta: { roles: ['teacher', 'student'] },
-    path: '/pdf-reader/:slideId',
+    path: '/pdf-reader/:slideId/:page',
     name: 'pdf-reader',
     component: () => import(/* webpackChunkName: "pdf-reader" */ '@/views/reader/PdfReader.vue')
   }

src/views/reader/PdfReader.vue

@@ -23,7 +23,7 @@ import {
   FOCUS_ON_INPUT,
   NEXT_PAGE,
   PREVIOUS_PAGE,
-  RESET,
+  RESET, SET_CURRENT_PAGE,
   SET_SRC,
   TOGGLE_SHOW_DISCUSSION,
   USE_FOCUS
@@ -50,6 +50,10 @@ export default {
   },
   mounted () {
     this.$store.commit(RESET)
+    let { page } = this.$route.params
+    if (page) {
+      this.$store.commit(SET_CURRENT_PAGE, { currentPage: parseInt(page) })
+    }
     const _slideId = this.$route.params.slideId
     getSlideInfo({ slideId: _slideId }).then(res => {
       this.slide = res

src/views/student/components/StudentSlideDetail.vue

@@ -59,7 +59,7 @@ export default {
   },
   methods: {
     handleReadSlide () {
-      this.$router.push({ name: 'pdf-reader', params: { slideId: this.slide.id } })
+      this.$router.push({ name: 'pdf-reader', params: { slideId: this.slide.id, page: '1' } })
     },
     handleToQuiz () {
       this.$router.push({ name: 'student-quiz-list', params: { slideId: this.slide.id } })

src/views/teacher/components/TeacherSlideDetail.vue

@@ -110,7 +110,7 @@ export default {
   },
   methods: {
     handleReadSlide () {
-      this.$router.push({ name: 'pdf-reader', params: { slideId: this.slide.id } })
+      this.$router.push({ name: 'pdf-reader', params: { slideId: this.slide.id, page: '1' } })
     },
     handleQuizSetting () {
       this.$router.push({ name: 'teacher-quiz-setting', params: { slideId: this.slide.id } })