feat: 查看自己所有评论的界面

src/components/Discussion/CComment.vue

@@ -14,26 +14,39 @@
             </c-icon>
             {{comment.title}}
           </div>
-          <div class="comment-content">{{comment.content}}</div>
+          <div class="comment-content">
+            <pre>{{comment.content}}</pre>
+          </div>
           <div class="comment-author">{{ createTime }} | 作者：{{comment.userName}}
             <c-tag :theme="comment.userRole === userType.teacher ? 'red' : 'blue'">{{userTypeNaming[comment.userRole]}}
             </c-tag>
           </div>
         </div>
-        <icon-button :left="12" :size="40" @click="showActions = !showActions" class="more-button">
-          {{showActions ? 'expand_less' : 'expand_more'}}
-        </icon-button>
+        <div>
+          <icon-button :left="12" :size="40" @click="showActions = !showActions" class="more-button" theme="blue">
+            {{showActions ? 'expand_less' : 'expand_more'}}
+          </icon-button>
+          <router-link v-if="toPdfButton"
+                       :to="{name: 'pdf-reader', params: { slideId: comment.slideId, page: comment.pageNumber }}"
+          >
+            <icon-button :left="4" :size="40" title="前往幻灯片对应的页面查看该评论" theme="green">
+              arrow_forward
+            </icon-button>
+          </router-link>
+        </div>
       </div>
       <show-transition-small>
         <comment-tool-bar
           v-if="showActions"
           :top-number="comment.topNumber || ''"
-          :user-id="comment.userId" :has-reply="comment.reply || ''"
+          :user-id="comment.userId" :reply="comment.reply || ''"
+          :personal="!comment.show"
           @reply="handleReply"
           @delete-reply="handleDeleteReply"
           @delete-comment="handleDeleteComment"
           @to-top="handleToTop"
           @cancel-to-top="handleCancelToTop"
+          @change-show="handleChangeShow"
         />
       </show-transition-small>
       <div v-if="comment.reply" class="comment-reply">
@@ -47,7 +60,7 @@
 <script>
 import { mapState } from 'vuex'
 import { createReply, removeReply } from '@/server/reply'
-import { removeComment, topComment, unTopComment } from '@/server/comment'
+import { modifyCommentShow, 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'
@@ -61,7 +74,8 @@ export default {
   props: {
     comment: Object,
     isNew: Boolean,
-    personal: Boolean
+    personal: Boolean,
+    toPdfButton: Boolean
   },
   data () {
     return {
@@ -129,6 +143,14 @@ export default {
       }).catch(err => {
         this.$setErrorMessage(err.response.data.msg)
       })
+    },
+    handleChangeShow () {
+      modifyCommentShow({ commentId: this.comment.id.toString(), show: !this.comment.show })
+        .then(_ => {
+          this.$setSuccessMessage('修改成功！')
+          this.$emit('need-refresh')
+        })
+        .catch(err => this.$setErrorMessage(err.response.data.msg))
     }
   }
 }
@@ -185,4 +207,10 @@ export default {
     font-weight: normal;
   }
 }
+
+pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+}
 </style>

src/components/Discussion/CommentToolBar.vue

@@ -3,13 +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 v-if="isOwn" @click="handleChangeShow" theme="orange" text :icon="personal ? 'lock_open' : 'lock'">
+        {{personal ? '公开' : '设为私有'}}
+      </c-button>
+      <c-button v-if="isTeacher && !reply" @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>
+      <c-button v-if="isTeacher && reply" @click="handleDeleteReply" theme="blue" text icon="cancel">删除回复</c-button>
+      <c-button v-if="isOwn" @click="handleDeleteComment" theme="red" text icon="delete">删除留言</c-button>
     </div>
     <show-transition-small>
-      <div v-if="replyInputShow && !hasReply" class="reply-input-wrapper vertical-center">
+      <div v-if="replyInputShow && !reply" 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>
@@ -25,7 +29,12 @@ import CButton from '@/components/Basic/CButton'
 import ShowTransitionSmall from '@/animations/ShowTransitionSmall'
 
 export default {
-  props: ['userId', 'hasReply', 'topNumber'],
+  props: {
+    userId: String,
+    reply: String,
+    topNumber: Number,
+    personal: Boolean
+  },
   components: { ShowTransitionSmall, CButton, CInput, IconButton },
   data () {
     return {
@@ -37,7 +46,7 @@ export default {
     ...mapState({
       userInfo: state => state.main.userInfo
     }),
-    canDelete () {
+    isOwn () {
       return this.userId === this.userInfo.id
     },
     isTeacher () {
@@ -65,6 +74,9 @@ export default {
     },
     handleCancelToTop () {
       this.$emit('cancel-to-top')
+    },
+    handleChangeShow () {
+      this.$emit('change-show')
     }
   }
 }

src/components/Discussion/DiscussionArea.vue

@@ -227,7 +227,7 @@ export default {
     width: 100%;
     position: absolute;
     left: 0;
-    top: 6px;
+    top: 10px;
     border-bottom: 1px solid #aabaca;
   }
 }

src/components/Discussion/WriteNewComment.vue

@@ -63,12 +63,14 @@ export default {
       }
       if (e.shiftKey && !e.isComposing && e.key === 'Enter') {
         e.preventDefault()
+        e.stopPropagation()
         this.handleSubmitComment()
       }
     },
     handleContentKey (e) {
       if (e.shiftKey && !e.isComposing && e.key === 'Enter') {
         e.preventDefault()
+        e.stopPropagation()
         this.handleSubmitComment()
       }
     }

src/router/main.js

@@ -16,4 +16,8 @@
 //   component: () => import(/* webpackChunkName: "main" */ '@/views/forget-password/ForgetPassword.vue')
 // }]
 
-export default []
+export default [{
+  path: '/notes',
+  name: 'notes',
+  component: () => import(/* webpackChunkName: "common" */ '@/views/shared/Notes.vue')
+}]

src/server/comment.js

@@ -20,7 +20,6 @@ export function createComment ({ slideId, pageNumber, title, content, show = tru
 export function removeComment ({ commentId }) {
   return axios
     .delete(useCommentServer('/' + commentId))
-    .then(res => {})
 }
 
 // 教师置顶评论
@@ -83,10 +82,10 @@ export function modifyCommentShow ({ commentId, show }) {
 }
 
 // 获取自己所有的评论
-export function getSelfComments ({ key, page, size, sort }) {
+export function getSelfComments ({ key = '', page = 1, size = 10, sort = '' }) {
   const params = generateSearchParams({ key, page, size, sort })
 
   return axios
-    .get(useCommentServer('self'), { params })
-    .then(res => res)
+    .get(useCommentServer('/self'), { params })
+    .then(res => res.data)
 }

src/views/quiz/DoRecommendQuestion.vue

@@ -187,7 +187,7 @@ export default {
 }
 
 .do-quiz-question-card:nth-child(2n) {
-  background-color: #f7f7f7;
+  background-color: #f9f9f9;
 }
 
 .do-quiz-question-card:nth-child(2n + 1) {

src/views/shared/Notes.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="notes">
+    <back-title>
+      讨论和笔记
+    </back-title>
+    <search-bar v-model="key"></search-bar>
+    <pagination class="mb-24 mt-16" @change="handlePageChange" v-show="comments && comments.length > 0" :page="page"
+                :size="size" :total-elements="totalElements"></pagination>
+    <template v-for="comment of comments">
+      <c-comment :comment="comment" :personal="!comment.show" :key="comment.id"
+                 @need-refresh="updateComments" to-pdf-button
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import BackTitle from '@/components/Basic/BackTitle'
+import SearchBar from '@/components/Basic/SearchBar'
+import { getSelfComments } from '@/server/comment'
+import Pagination from '@/components/Pagination'
+import CComment from '@/components/Discussion/CComment'
+import debounce from '@/utils/debounce'
+
+export default {
+  components: { CComment, Pagination, SearchBar, BackTitle },
+  data () {
+    return {
+      page: 1,
+      size: 6,
+      key: '',
+      totalElements: 0,
+      comments: [],
+      debounceSearch: debounce(() => {
+        this.getComments()
+      }, 500)
+    }
+  },
+  mounted () {
+    this.getComments()
+  },
+  watch: {
+    key () {
+      this.debounceSearch()
+    }
+  },
+  methods: {
+    getComments () {
+      getSelfComments({
+        page: this.page, key: this.key, size: this.size, sort: ['createAt,desc']
+      })
+        .then(res => {
+          this.totalElements = res.page.totalElements
+          this.comments = res.data
+        })
+        .catch(err => this.$setErrorMessage(err.response.data.msg))
+    },
+    handlePageChange ({ page }) {
+      this.page = page
+      this.getComments()
+    },
+    updateComments () {
+      this.getComments()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.notes {
+  padding: 64px 24px;
+  margin: 0 auto;
+  max-width: 720px;
+  background-color: #fafafa;
+  box-shadow: 0 0 0 1000px #fafafa;
+}
+
+.c-comment {
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.c-comment:nth-child(2n-1) {
+  background-color: #f7f7f7;
+}
+
+.c-comment:nth-child(2n) {
+  background-color: white;
+}
+</style>

src/views/student/tabs/StudentExplore.vue

@@ -12,6 +12,14 @@
           {{showMore ? '收起' : '展开'}}详情
         </c-button>
       </tab-actions>
+      <section class="mb-24">
+        <router-link :to="{ name: 'student-question-table' }">
+          <c-button icon="assignment" :right="12" theme="green">题库</c-button>
+        </router-link>
+        <router-link :to="{ name: 'notes' }">
+          <c-button icon="notes" theme="blue">我的讨论和笔记</c-button>
+        </router-link>
+      </section>
       <section>
         <h1 class="sub-title mb-12">按课程浏览课件</h1>
         <div class="no-content-warning" v-if="courses === null">

src/views/teacher/tabs/TeacherExplore.vue

@@ -12,8 +12,7 @@
           {{showMore ? '收起' : '展开'}}详情
         </c-button>
       </tab-actions>
-      <!--      <search-bar></search-bar>-->
-      <section class="mb-24">
+      <section class="mb-12">
         <h1 class="sub-title">课堂测试</h1>
         <router-link :to="{ name: 'all-quiz'}">
           <c-button theme="green" icon="edit">所有测试</c-button>
@@ -22,7 +21,7 @@
           <c-button :left="8" theme="blue" icon="assignment">题库设置</c-button>
         </router-link>
       </section>
-      <section class="mb-24">
+      <section class="mb-12 ">
         <h1 class="sub-title">最近编辑</h1>
         <div class="no-content-warning" v-if="slides === null">
           <div class="no-content-warning-tip">加载中...</div>
@@ -51,6 +50,9 @@
                        :clickHandler="handleCourseCardClick"></course-card>
         </template>
       </section>
+      <router-link :to="{ name: 'notes' }">
+        <c-button block icon="notes" theme="blue">我的讨论和笔记</c-button>
+      </router-link>
     </div>
     <slide-in-different-transition>
       <router-view/>