feat: 快捷键支持，讨论区留言样式调整

src/components/Discussion/CComment.vue

@@ -1,16 +1,17 @@
 <template>
-  <div class="comment">
+  <div class="comment c-comment">
     <div>
       <div class="comment-title" :class="isNew ? 'new-comment' : ''">
         <c-icon :left="-2" :right="4" :size="18" v-if="isNew" theme="green" title="这条评论属于实时更新的内容" bold>autorenew
         </c-icon>
         <c-icon :left="-2" :right="4" :size="20" v-if="comment.topNumber" theme="blue" title="这条评论属于置顶评论">publish
         </c-icon>
-        主题：{{comment.title}}
+        {{comment.title}}
       </div>
       <div class="comment-content">{{comment.content}}</div>
-      <div class="comment-author">{{ createTime }} | 作者：{{comment.userName}} <span
-        class="role">{{userTypeNaming[comment.userRole]}}</span></div>
+      <div class="comment-author">{{ createTime }} | 作者：{{comment.userName}}
+        <c-tag :theme="comment.userRole === userType.teacher ? 'red' : 'blue'">{{userTypeNaming[comment.userRole]}}</c-tag>
+      </div>
       <comment-tool-bar
         :top-number="comment.topNumber || ''"
         :user-id="comment.userId" :has-reply="comment.reply || ''"
@@ -36,15 +37,17 @@ import { removeComment, topComment, unTopComment } from '@/server/comment'
 import CommentToolBar from '@/components/Discussion/CommentToolBar'
 import CIcon from '@/components/Basic/CIcon'
 import momentFromNow from '@/utils/moment-from-now'
-import { userTypeNaming } from '@/enums/user-type'
+import { userTypeNaming, userType } from '@/enums/user-type'
+import CTag from '@/components/Basic/CTag'
 
 export default {
-  components: { CIcon, CommentToolBar },
+  components: { CTag, CIcon, CommentToolBar },
   props: ['comment', 'isNew'],
   data () {
     return {
       replyContent: '',
 
+      userType,
       userTypeNaming
     }
   },
@@ -114,53 +117,45 @@ export default {
 @import '~@/style/theme.scss';
 
 .comment {
-  box-sizing: border-box;
   position: relative;
   width: 100%;
-  padding: 2px 12px 6px 12px;
-  margin: 16px -8px;
-}
-
-.new-comment {
-  background: $theme-green-transparent;
+  margin: 0 -12px;
+  padding: 0 14px 8px 14px;
 }
-
 .comment-title {
-  padding: 6px;
-  margin: 6px -6px;
+  padding: 6px 6px 0 6px;
+  margin: 0 -6px 6px -6px;
+  line-height: 1.8;
   display: flex;
   align-items: center;
 }
 
 .comment-content {
   color: #6a7a8a;
+  font-weight: normal;
   font-size: 14px;
   margin-bottom: 8px;
 }
 
 .comment-author {
-  font-size: 14px;
+  font-weight: normal;
+  font-size: 12px;
   color: #7a8a9a;
-  margin-bottom: 8px;
+}
 
-  .role {
-    display: inline-block;
-    padding: 1px 4px;
-    color: $theme-blue;
-    background: $theme-blue-transparent;
-    font-size: 12px;
-    position: relative;
-    bottom: 1px;
-  }
+.c-tag {
+  transform: scale(.9);
 }
 
 .comment-reply {
   font-size: 14px;
   padding: 4px 8px;
-  background: $theme-orange-transparent;
+  background: $theme-green-transparent;
 
   &-time {
     color: #8a9aaa;
+    font-size: 12px;
+    font-weight: normal;
   }
 }
 </style>

src/components/Discussion/CommentToolBar.vue

@@ -3,14 +3,17 @@
     <div>
       <c-button v-if="isTeacher && !topNumber" @click="handleToTop" theme="green" text icon="publish">置顶</c-button>
       <c-button v-if="isTeacher && topNumber" @click="handleCancelToTop" theme="green" text icon="close">取消置顶</c-button>
-      <c-button v-if="isTeacher && !hasReply" @click="handleShowHideReplyInput" theme="blue" text icon="reply">回复</c-button>
+      <c-button v-if="isTeacher && !hasReply" @click="handleShowHideReplyInput" theme="blue" text icon="reply">回复
+      </c-button>
       <c-button v-if="isTeacher && hasReply" @click="handleDeleteReply" theme="red" text icon="cancel">删除回复</c-button>
-      <c-button v-if="canDelete" @click="handleDeleteComment" theme="red" text icon="delete">删除讨论</c-button>
-    </div>
-    <div v-show="replyInputShow && !hasReply" class="reply-input-wrapper">
-      <c-input placeholder="在此输入回复内容" v-model="replyContent"></c-input>
-      <icon-button :size="44" @click="handleReply" theme="green">send</icon-button>
+      <c-button v-if="canDelete" @click="handleDeleteComment" theme="red" text icon="delete">删除留言</c-button>
     </div>
+    <show-transition-small>
+      <div v-if="replyInputShow && !hasReply" class="reply-input-wrapper vertical-center">
+        <c-input placeholder="在此输入回复内容" v-model="replyContent"></c-input>
+        <icon-button :size="32" @click="handleReply" theme="green">send</icon-button>
+      </div>
+    </show-transition-small>
   </div>
 </template>
 
@@ -19,10 +22,11 @@ import IconButton from '@/components/Basic/IconButton'
 import { mapState } from 'vuex'
 import CInput from '@/components/Basic/CInput'
 import CButton from '@/components/Basic/CButton'
+import ShowTransitionSmall from '@/animations/ShowTransitionSmall'
 
 export default {
   props: ['userId', 'hasReply', 'topNumber'],
-  components: { CButton, CInput, IconButton },
+  components: { ShowTransitionSmall, CButton, CInput, IconButton },
   data () {
     return {
       replyInputShow: false,
@@ -68,20 +72,31 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
+
 .comment-tool-bar {
-  margin: 0 -12px;
+  margin: 0 -16px 2px -16px;
+}
+
+.c-button {
+  opacity: .5;
+  transform: scale(.9);
+  margin-right: -12px;
+
+  &:hover {
+    opacity: 1;
+  }
 }
 
 .reply-input-wrapper {
-  display: flex;
-  align-items: center;
   .c-input {
+    background-color: rgba(255, 255, 255, 0.5);
     height: 36px;
-    font-size: 14px ;
+    font-size: 14px;
     margin-left: 12px;
   }
+
   .icon-button {
-    margin: 0 12px;
+    margin: 0 12px 0 8px;
   }
 }
 </style>

src/components/Discussion/DiscussionArea.vue

@@ -1,9 +1,16 @@
 <template>
   <div class="discussion-area">
-    <h1 class="title">本页留言板</h1>
+    <h1 class="sub-title vertical-center">
+      本页留言板
+      <c-button theme="green" :left="12" :icon="showWriteTool ? 'unfold_less' : 'edit'" text @click="showWriteTool = !showWriteTool">
+        {{showWriteTool ? '隐藏编辑器' : '发帖'}}
+      </c-button>
+    </h1>
     <div class="discussion-area-content">
-      <write-new-comment ref="writeComment" class="mb-24" @comment-submit="handleCommentSubmit"
-                         :placeholder="writingAreaPlaceholder"></write-new-comment>
+      <show-transition>
+        <write-new-comment v-show="showWriteTool" class="mb-8" ref="writeComment" @comment-submit="handleCommentSubmit"
+                           :placeholder="writingAreaPlaceholder"></write-new-comment>
+      </show-transition>
       <div class="no-content-warning" v-if="comments === null">
         <div class="no-content-warning-tip">加载中...</div>
       </div>
@@ -33,14 +40,17 @@ import { mapState } from 'vuex'
 import { createComment, getComments } from '@/server/comment'
 import WebsocketPublisher from '@/server/websocket/ws'
 import { useCommentWsServer } from '@/config/server-info'
+import CButton from '@/components/Basic/CButton'
+import ShowTransition from '@/animations/ShowTransition'
 
 export default {
-  components: { WriteNewComment, CComment },
+  components: { ShowTransition, CButton, WriteNewComment, CComment },
   data () {
     return {
       comments: null,
       wsComments: [],
-      slideId: this.$route.params.slideId
+      slideId: this.$route.params.slideId,
+      showWriteTool: false
     }
   },
   mounted () {
@@ -57,7 +67,7 @@ export default {
       currentPage: state => state.pdf.currentPage
     }),
     writingAreaPlaceholder () {
-      return '写下针对本页的讨论（标题）'
+      return '主题'
     }
   },
   watch: {
@@ -120,25 +130,39 @@ export default {
 <style lang="scss" scoped>
 .discussion-area {
   max-width: 410px;
-  padding: 24px 12px;
+  padding: 12px 12px 0 12px;
   box-sizing: border-box;
 
   position: fixed;
-
+  min-width: 405px;
   max-height: calc(100vh - 76px);
   overflow: auto;
   bottom: 0;
   right: 0;
-  background-color: #ffffff66;
+  background-color: rgba(250, 250, 250, 0.8);
+  /*background-color: rgba(255, 255, 255, 0.8);*/
   backdrop-filter: saturate(150%) blur(20px);
 }
 
+.no-content-warning {
+  height: 50px;
+}
+
+.c-comment:nth-child(2n) {
+  background-color: rgba(130, 130, 130, 0.05);
+}
+
+.c-comment:nth-child(2n-1) {
+  background-color: rgba(130, 130, 130, 0.1);
+}
+
 @media (max-width: 500px) {
   .discussion-area {
     min-width: unset;
     max-width: unset;
     left: 0;
     right: 0;
+    background-color: rgba(255, 255, 255, 0.8);
   }
 }
 </style>

src/components/Discussion/WriteNewComment.vue

@@ -4,9 +4,9 @@
       <input type="text" v-model="title" :placeholder="placeholder || '讨论主题'" maxlength="100">
     </label>
     <label>
-      <textarea v-model="content" placeholder="在此填写详细内容"></textarea>
+      <textarea v-model="content" placeholder="详细内容"></textarea>
     </label>
-    <icon-button class="send-button" theme="green" @click="handleSubmitComment" :size="44">send</icon-button>
+    <icon-button class="send-button" theme="green" @click="handleSubmitComment" :size="32">send</icon-button>
   </div>
 </template>
 
@@ -46,21 +46,21 @@ export default {
 }
 
 input, textarea {
-  font-weight: bold;
   box-sizing: border-box;
-  font-size: 16px;
+  font-size: 14px;
   color: #3a4a5a;
-  background: white;
-  border-radius: 8px;
+  border-radius: 4px;
   border: none;
   outline: none;
   width: 100%;
-  height: 48px;
-  line-height: 2;
-  padding: 0 12px 0 12px;
+  height: 36px;
+  line-height: 1.6;
+  padding: 8px;
   transition: .2s;
+  background-color: transparent;
   &:hover {
-    background: $input-background-color;
+    border-color: #6a7a8a;
+    transform: translateY(-1px);
   }
   &::placeholder {
     color: #9aaaba;
@@ -68,24 +68,24 @@ input, textarea {
 }
 
 input {
-  border-radius: 8px 8px 0 0;
-  border: 1px solid #eaedef;
+  border-radius: 4px 4px 0 0;
+  border: 1px solid #bacada;
 }
 
 textarea {
-  border-radius: 0 0 8px 8px;
-  border: 1px solid #eaedef;
-  border-top: none;
+  transform: translateY(-1px);
+  border-radius: 0 0 4px 4px;
+  border: 1px solid #bacada;
   min-height: 96px;
+  padding-bottom: 32px;
   height: 100%;
-  resize: none;
-  padding-bottom: 20px;
+  resize: vertical;
 }
 
 .send-button {
   position: absolute;
-  bottom: -10%;
-  right: 16px;
+  bottom: 12px;
+  right: 12px;
   background: white;
 
   &:hover {

src/components/PDF/Pdf.vue

@@ -118,8 +118,6 @@ canvas {
   direction: ltr;
   margin: 0 auto;
   background-color: white;
-  border-top: 1px solid #eaeaea;
-  border-bottom: 1px solid #eaeaea;
 
   max-width: 100vw;
   max-height: 100vh;

src/components/PDF/PdfController.vue

@@ -98,7 +98,7 @@ export default {
   margin-right: 12px;
 
   border-radius: 12px;
-  background-color: #daeafa66;
+  background-color: rgba(218, 234, 250, 0.4);
   backdrop-filter: saturate(150%) blur(20px);
 
   transition: .2s ease-out;

src/views/reader/PdfReader.vue

@@ -14,7 +14,7 @@ import PdfViewer from '@/components/PDF/PdfViewer'
 import { mapState } from 'vuex'
 import DiscussionArea from '@/components/Discussion/DiscussionArea'
 import { getSlideInfo, getSlideUrl } from '@/server/slide'
-import { RESET, SET_SRC } from '@/store/types/pdf-types'
+import { NEXT_PAGE, PREVIOUS_PAGE, RESET, SET_SRC } from '@/store/types/pdf-types'
 import IconButton from '@/components/Basic/IconButton'
 
 export default {
@@ -43,6 +43,22 @@ export default {
     }).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>
@@ -60,11 +76,11 @@ export default {
   position: absolute;
   left: 16px;
   top: 16px;
-  background-color: #daeafa66;
+  background-color: rgba(218, 234, 250, 0.4);
   backdrop-filter: saturate(150%) blur(20px);
 
   &:hover {
-    background-color: #daeafaaa;
+    background-color: rgba(218, 234, 250, 0.67);
   }
 }