Refactor HeaderComment.

src/api/comment.js

@@ -0,0 +1,92 @@
+import service from '@/utils/service'
+
+const baseUrl = '/api/admin'
+
+const commentApi = {}
+
+/**
+ * Lists comment.
+ * @param {String} target
+ * @param {Object} view
+ */
+function latestComment(target, top, status) {
+  return service({
+    url: `${baseUrl}/${target}/comments/latest`,
+    params: {
+      top: top,
+      status: status
+    },
+    method: 'get'
+  })
+}
+
+/**
+ * Creates a comment.
+ * @param {String} target
+ * @param {Object} comment
+ */
+function createComment(target, comment) {
+  return service({
+    url: `${baseUrl}/${target}/comments`,
+    method: 'post',
+    data: comment
+  })
+}
+
+// List latest comment
+
+commentApi.latestPostComment = (top, status) => {
+  return latestComment('posts', top, status)
+}
+commentApi.latestSheetComment = (top, status) => {
+  return latestComment('sheets', top, status)
+}
+commentApi.latestJournalComment = (top, status) => {
+  return latestComment('journals', top, status)
+}
+
+// Creation api
+
+commentApi.createPostComment = comment => {
+  return createComment('posts', comment)
+}
+
+commentApi.createSheetComment = comment => {
+  return createComment('sheets', comment)
+}
+
+commentApi.createJournalComment = comment => {
+  return createComment('journals', comment)
+}
+
+commentApi.createComment = (comment, type) => {
+  if (type === 'sheet') {
+    return commentApi.createSheetComment(comment)
+  }
+
+  if (type === 'journal') {
+    return commentApi.createJournalComment(comment)
+  }
+
+  return commentApi.createPostComment(comment)
+}
+
+commentApi.commentStatus = {
+  PUBLISHED: {
+    color: 'green',
+    status: 'success',
+    text: '已发布'
+  },
+  AUDITING: {
+    color: 'yellow',
+    status: 'warning',
+    text: '待审核'
+  },
+  RECYCLE: {
+    color: 'red',
+    status: 'error',
+    text: '回收站'
+  }
+}
+
+export default commentApi

src/api/postComment.js

@@ -2,9 +2,9 @@ import service from '@/utils/service'
 
 const baseUrl = '/api/admin/posts/comments'
 
-const commentApi = {}
+const postCommentApi = {}
 
-commentApi.listLatest = (top, status) => {
+postCommentApi.listLatest = (top, status) => {
   return service({
     url: `${baseUrl}/latest`,
     params: {
@@ -15,7 +15,7 @@ commentApi.listLatest = (top, status) => {
   })
 }
 
-commentApi.query = params => {
+postCommentApi.query = params => {
   return service({
     url: baseUrl,
     params: params,
@@ -23,21 +23,21 @@ commentApi.query = params => {
   })
 }
 
-commentApi.updateStatus = (commentId, status) => {
+postCommentApi.updateStatus = (commentId, status) => {
   return service({
     url: `${baseUrl}/${commentId}/status/${status}`,
     method: 'put'
   })
 }
 
-commentApi.delete = commentId => {
+postCommentApi.delete = commentId => {
   return service({
     url: `${baseUrl}/${commentId}`,
     method: 'delete'
   })
 }
 
-commentApi.create = comment => {
+postCommentApi.create = comment => {
   return service({
     url: baseUrl,
     data: comment,
@@ -45,7 +45,7 @@ commentApi.create = comment => {
   })
 }
 
-commentApi.commentStatus = {
+postCommentApi.commentStatus = {
   PUBLISHED: {
     color: 'green',
     status: 'success',
@@ -63,4 +63,4 @@ commentApi.commentStatus = {
   }
 }
 
-export default commentApi
+export default postCommentApi

src/components/Tools/HeaderComment.vue

@@ -11,30 +11,95 @@
   >
     <template slot="content">
       <a-spin :spinning="loadding">
-        <a-list :dataSource="converttedComments">
+        <a-tabs>
-          <a-list-item
+          <a-tab-pane
-            slot="renderItem"
+            tab="文章"
-            slot-scope="item"
+            key="1"
           >
-            <a-list-item-meta>
+            <a-list :dataSource="converttedPostComments">
-              <a-avatar
+              <a-list-item
-                style="background-color: white"
+                slot="renderItem"
-                slot="avatar"
+                slot-scope="item"
-                :src="'https://gravatar.loli.net/avatar/' + item.gavatarMd5 + '&d=mm'"
+              >
-                size="large"
+                <a-list-item-meta>
-              />
+                  <a-avatar
-              <template slot="title">
+                    style="background-color: white"
-                <a
+                    slot="avatar"
-                  :href="item.authorUrl"
+                    :src="'https://gravatar.loli.net/avatar/' + item.gavatarMd5 + '&d=mm'"
-                  target="_blank"
+                    size="large"
-                >{{ item.author }}</a>：<span v-html="item.content"></span>
+                  />
-              </template>
+                  <template slot="title">
-              <template slot="description">
+                    <a
-                {{ item.createTime | timeAgo }}
+                      :href="item.authorUrl"
-              </template>
+                      target="_blank"
-            </a-list-item-meta>
+                    >{{ item.author }}</a>：<span v-html="item.content"></span>
-          </a-list-item>
+                  </template>
-        </a-list>
+                  <template slot="description">
+                    {{ item.createTime | timeAgo }}
+                  </template>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </a-tab-pane>
+          <a-tab-pane
+            tab="页面"
+            key="2"
+          >
+            <a-list :dataSource="converttedSheetComments">
+              <a-list-item
+                slot="renderItem"
+                slot-scope="item"
+              >
+                <a-list-item-meta>
+                  <a-avatar
+                    style="background-color: white"
+                    slot="avatar"
+                    :src="'https://gravatar.loli.net/avatar/' + item.gavatarMd5 + '&d=mm'"
+                    size="large"
+                  />
+                  <template slot="title">
+                    <a
+                      :href="item.authorUrl"
+                      target="_blank"
+                    >{{ item.author }}</a>：<span v-html="item.content"></span>
+                  </template>
+                  <template slot="description">
+                    {{ item.createTime | timeAgo }}
+                  </template>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </a-tab-pane>
+          <a-tab-pane
+            tab="日志"
+            key="3"
+          >
+            <a-list :dataSource="converttedJournalComments">
+              <a-list-item
+                slot="renderItem"
+                slot-scope="item"
+              >
+                <a-list-item-meta>
+                  <a-avatar
+                    style="background-color: white"
+                    slot="avatar"
+                    :src="'https://gravatar.loli.net/avatar/' + item.gavatarMd5 + '&d=mm'"
+                    size="large"
+                  />
+                  <template slot="title">
+                    <a
+                      :href="item.authorUrl"
+                      target="_blank"
+                    >{{ item.author }}</a>：<span v-html="item.content"></span>
+                  </template>
+                  <template slot="description">
+                    {{ item.createTime | timeAgo }}
+                  </template>
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </a-tab-pane>
+        </a-tabs>
       </a-spin>
     </template>
     <span
@@ -43,7 +108,7 @@
     >
       <a-badge
         dot
-        v-if="comments.length > 0"
+        v-if="postComments.length > 0"
       >
         <a-icon type="bell" />
       </a-badge>
@@ -55,7 +120,7 @@
 </template>
 
 <script>
-import commentApi from '@/api/postComment'
+import commentApi from '@/api/comment'
 import marked from 'marked'
 
 export default {
@@ -64,15 +129,29 @@ export default {
     return {
       loadding: false,
       visible: false,
-      comments: []
+      postComments: [],
+      sheetComments: [],
+      journalComments: []
     }
   },
   created() {
     this.getComment()
   },
   computed: {
-    converttedComments() {
+    converttedPostComments() {
-      return this.comments.map(comment => {
+      return this.postComments.map(comment => {
+        comment.content = marked(comment.content, { sanitize: true })
+        return comment
+      })
+    },
+    converttedSheetComments() {
+      return this.sheetComments.map(comment => {
+        comment.content = marked(comment.content, { sanitize: true })
+        return comment
+      })
+    },
+    converttedJournalComments() {
+      return this.journalComments.map(comment => {
         comment.content = marked(comment.content, { sanitize: true })
         return comment
       })
@@ -89,8 +168,16 @@ export default {
       this.visible = !this.visible
     },
     getComment() {
-      commentApi.listLatest(5, 'AUDITING').then(response => {
+      commentApi.latestPostComment(5, 'AUDITING').then(response => {
-        this.comments = response.data.data
+        this.postComments = response.data.data
+        this.loadding = false
+      })
+      commentApi.latestSheetComment(5, 'AUDITING').then(response => {
+        this.sheetComments = response.data.data
+        this.loadding = false
+      })
+      commentApi.latestJournalComment(5, 'AUDITING').then(response => {
+        this.journalComments = response.data.data
         this.loadding = false
       })
     }

src/views/comment/CommentList.vue

@@ -240,7 +240,7 @@
 
 <script>
 import { PageView } from '@/layouts'
-import commentApi from '@/api/postComment'
+import postCommentApi from '@/api/postComment'
 import optionApi from '@/api/option'
 import marked from 'marked'
 
@@ -304,7 +304,7 @@ export default {
       selectComment: {},
       replyComment: {},
       commentsLoading: false,
-      commentStatus: commentApi.commentStatus,
+      commentStatus: postCommentApi.commentStatus,
       options: [],
       keys: ['blog_url']
     }
@@ -332,7 +332,7 @@ export default {
       if (isSearch) {
         this.queryParam.page = 0
       }
-      commentApi.query(this.queryParam).then(response => {
+      postCommentApi.query(this.queryParam).then(response => {
         this.comments = response.data.data.content
         this.pagination.total = response.data.data.total
         this.commentsLoading = false
@@ -347,13 +347,13 @@ export default {
       this.$message.success('编辑')
     },
     handleEditStatusClick(commentId, status) {
-      commentApi.updateStatus(commentId, status).then(response => {
+      postCommentApi.updateStatus(commentId, status).then(response => {
         this.$message.success('操作成功！')
         this.loadComments()
       })
     },
     handleDeleteClick(commentId) {
-      commentApi.delete(commentId).then(response => {
+      postCommentApi.delete(commentId).then(response => {
         this.$message.success('删除成功！')
         this.loadComments()
       })
@@ -369,7 +369,7 @@ export default {
       this.replyComment.postId = comment.post.id
     },
     handleCreateClick() {
-      commentApi.create(this.replyComment).then(response => {
+      postCommentApi.create(this.replyComment).then(response => {
         this.$message.success('回复成功！')
         this.replyComment = {}
         this.selectComment = {}
@@ -394,7 +394,7 @@ export default {
       }
       for (let index = 0; index < this.selectedRowKeys.length; index++) {
         const element = this.selectedRowKeys[index]
-        commentApi.updateStatus(element, 'PUBLISHED').then(response => {
+        postCommentApi.updateStatus(element, 'PUBLISHED').then(response => {
           this.$log.debug(`commentId: ${element}, status: PUBLISHED`)
         })
       }
@@ -406,7 +406,7 @@ export default {
       }
       for (let index = 0; index < this.selectedRowKeys.length; index++) {
         const element = this.selectedRowKeys[index]
-        commentApi.updateStatus(element, 'RECYCLE').then(response => {
+        postCommentApi.updateStatus(element, 'RECYCLE').then(response => {
           this.$log.debug(`commentId: ${element}, status: RECYCLE`)
         })
       }
@@ -418,7 +418,7 @@ export default {
       }
       for (let index = 0; index < this.selectedRowKeys.length; index++) {
         const element = this.selectedRowKeys[index]
-        commentApi.delete(element).then(response => {
+        postCommentApi.delete(element).then(response => {
           this.$log.debug(`delete: ${element}`)
         })
       }

src/views/dashboard/Dashboard.vue

@@ -337,7 +337,7 @@ import { mixin, mixinDevice } from '@/utils/mixin.js'
 import marked from 'marked'
 
 import postApi from '@/api/post'
-import commentApi from '@/api/postComment'
+import postCommentApi from '@/api/postComment'
 import logApi from '@/api/log'
 import adminApi from '@/api/admin'
 import journalApi from '@/api/journal'
@@ -413,7 +413,7 @@ export default {
       })
     },
     listLatestComments() {
-      commentApi.listLatest(5, 'PUBLISHED').then(response => {
+      postCommentApi.listLatest(5, 'PUBLISHED').then(response => {
         this.commentData = response.data.data
         this.activityLoading = false
         this.writeLoading = false
@@ -465,7 +465,7 @@ export default {
       this.replyComment.postId = comment.post.id
     },
     handleReplyComment() {
-      commentApi.create(this.replyComment).then(response => {
+      postCommentApi.create(this.replyComment).then(response => {
         this.$message.success('回复成功！')
         this.replyComment = {}
         this.selectComment = {}