feat: 添加icon按钮的动画效果，同时修正讨论区按钮不显示状态的问题

src/components/Icon.vue

@@ -1,9 +1,15 @@
 <template>
-  <div class="icon" :title="title ? title : ''"><span>{{unicode}}</span></div>
+  <div class="icon" :title="title ? title : ''">
+    <span>{{unicode}}</span>
+    <ripple></ripple>
+  </div>
 </template>
 
 <script>
+import Ripple from '@/components/Ripple'
+
 export default {
+  components: { Ripple },
   props: ['unicode', 'title']
 }
 </script>
@@ -12,6 +18,7 @@ export default {
 @import '~@/style/theme.scss';
 
 .icon {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -29,6 +36,7 @@ export default {
   font-size: 0;
   color: $icon-normal-color;
   transition: box-shadow 0.25s, all 0.2s;
+  overflow: hidden;
 
   & > span {
     font-size: 24px;
@@ -42,7 +50,6 @@ export default {
 
   &:active {
     color: darken($icon-hover-color, 10);
-    background: lighten($icon-hover-color, 27);
     box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
   }
 }

src/components/PDF/Pdf.vue

@@ -46,7 +46,7 @@ export default {
   methods: {
     showPage () {
       this._pdf && this._pdf.getPage(this.currentPage || 1).then(page => {
-        const scale = 2
+        const scale = 2.5
         const viewport = page.getViewport({ scale: scale })
 
         this._canvas.height = viewport.height

src/components/PDF/PdfController.vue

@@ -16,16 +16,21 @@
 import Icon from '@/components/Icon'
 import iconMap from '@/utils/icon-map'
 import { NEXT_PAGE, PREVIOUS_PAGE, SET_SCREEN_SHOT, TOGGLE_SHOW_DISCUSSION } from '@/store/types/pdf-types'
+import { mapState } from 'vuex'
 
 export default {
   components: { Icon },
   data () {
     return {
       iconMap: iconMap,
-      pageMarked: false,
-      showDiscussion: false
+      pageMarked: false
     }
   },
+  computed: {
+    ...mapState({
+      showDiscussion: state => state.pdf.showDiscussion
+    })
+  },
   methods: {
     handleMarkButtonClicked () {
       this.pageMarked = !this.pageMarked

src/components/Ripple.vue

@@ -0,0 +1,66 @@
+<template>
+  <div @click="handleRipple" :class="className" :style="size ? `width: ${size}px; height: ${size}px;` : ''">
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['size'],
+  data () {
+    return {
+      className: 'hide'
+    }
+  },
+  methods: {
+    handleRipple () {
+      this.className = ''
+      this.$nextTick(() => {
+        this.className = 'show'
+        setTimeout(() => {
+          this.className = ''
+        }, 400)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/style/theme.scss';
+
+$opacity: .15;
+div {
+  opacity: 0;
+  width: 100px;
+  height: 100px;
+  z-index: 2;
+  position: absolute;
+  background-color: $icon-hover-color;
+  border-radius: 100000px;
+  transform-origin: center;
+}
+
+.show {
+  opacity: $opacity;
+  animation: ripple .4s forwards cubic-bezier(0, .5, .5, 1);
+}
+
+@keyframes ripple {
+  0% {
+    opacity: $opacity;
+    transform: scale(0.00001, 0.0001);
+  }
+  80% {
+    opacity: $opacity;
+    transform: scale(1, 1);
+  }
+  90% {
+    opacity: $opacity;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+  }
+
+}
+</style>