frontend/src/views/reader/PdfReader.vue

<template>
  <div class="pdf-reader">
    <icon-button title="返回主页面">arrow_back</icon-button>
    <pdf-viewer></pdf-viewer>
    <discussion-area
      :class="showDiscussion ? 'show-discussion' : 'hide-discussion'"
    >
    </discussion-area>
  </div>
</template>

<script>
import PdfViewer from '@/components/PDF/PdfViewer'
import { mapState } from 'vuex'
import DiscussionArea from '@/components/Discussion/DiscussionArea'
import { getSlideInfo, getSlideUrl } from '@/server/slide'
import { NEXT_PAGE, PREVIOUS_PAGE, RESET, SET_SRC } from '@/store/types/pdf-types'
import IconButton from '@/components/Basic/IconButton'

export default {
  components: { IconButton, DiscussionArea, PdfViewer },
  computed: {
    ...mapState({
      src: state => state.pdf.src,
      showDiscussion: state => state.pdf.showDiscussion
    })
  },
  data () {
    return {
      slide: {}
    }
  },
  mounted () {
    this.$store.commit(RESET)
    const _slideId = this.$route.params.slideId
    getSlideInfo({ slideId: _slideId }).then(res => {
      this.slide = res
    }).catch(err => {
      this.$setErrorMessage(err.response.data.msg)
    })
    getSlideUrl({ slideId: _slideId }).then(res => {
      this.$store.commit(SET_SRC, { src: res })
    }).catch(err => {
      this.$setErrorMessage('获取课件链接的过程中：' + err.response.data.msg)
    })
    window.addEventListener('keydown', this.handleKey)
  },
  methods: {
    handleKey (e) {
      switch (e.key) {
        case 'ArrowDown':
        case 'ArrowRight':
          console.log(1)
          this.$store.commit(NEXT_PAGE)
          break
        case 'ArrowUp':
        case 'ArrowLeft':
          this.$store.commit(PREVIOUS_PAGE)
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pdf-reader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.icon-button {
  z-index: 2;
  position: absolute;
  left: 16px;
  top: 16px;
  background-color: rgba(218, 234, 250, 0.4);
  backdrop-filter: saturate(150%) blur(20px);

  &:hover {
    background-color: rgba(218, 234, 250, 0.67);
  }
}

.show-discussion, .hide-discussion {
  transition: .2s;
}

.hide-discussion {
  transform: translateY(100%);
  opacity: 0;
}
</style>