Refactor recent comment list.

2019-05-14 22:58:38 +08:00 · 2019-05-14 22:58:38 +08:00 · f2490e5384
parent 5aeec9832a
commit f2490e5384
6 changed files with 368 additions and 329 deletions
--- a/src/components/Tools/HeaderComment.vue
+++ b/src/components/Tools/HeaderComment.vue
@ -11,6 +11,7 @@
  >
    <template slot="content">
      <a-spin :spinning="loadding">
+        <div class="custom-tab-wrapper">
          <a-tabs>
            <a-tab-pane
              tab="文章"
@ -100,6 +101,7 @@
              </a-list>
            </a-tab-pane>
          </a-tabs>
+        </div>
      </a-spin>
    </template>
    <span
--- a/src/components/global.less
+++ b/src/components/global.less
@ -634,6 +634,15 @@ body {
  background: transparent !important;
 }

+.custom-tab-wrapper {
+  .ant-tabs-nav {
+    .ant-tabs-tab {
+      margin: 0 24px 0 0;
+      padding: 12px 0;
+    }
+  }
+}
+
 .comment-content-wrapper {
  h1 {
    font-size: 18px;
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@ -104,14 +104,11 @@
          :bodyStyle="{ padding: 0 }"
        >
          <div class="card-container">
-            <a-tabs
-              defaultActiveKey="1"
-              type="card"
+            <a-tabs type="card">
+              <a-tab-pane
+                key="1"
+                tab="最近文章"
              >
-              <a-tab-pane key="1">
-                <span slot="tab">
-                  最近文章
-                </span>
                <a-list :dataSource="postData">
                  <a-list-item
                    slot="renderItem"
@ -131,40 +128,30 @@
              </a-tab-pane>
              <a-tab-pane
                key="2"
-                forceRender
+                tab="最近评论"
              >
-                <span slot="tab">
-                  最近评论
-                </span>
-                <a-list
-                  itemLayout="horizontal"
-                  :dataSource="formmatedCommentData"
+                <div class="custom-tab-wrapper">
+                  <a-tabs>
+                    <a-tab-pane
+                      tab="文章"
+                      key="1"
                    >
-                  <a-list-item
-                    slot="renderItem"
-                    slot-scope="item, index"
-                    :key="index"
+                      <recent-comment-tab type="post"></recent-comment-tab>
+                    </a-tab-pane>
+                    <a-tab-pane
+                      tab="页面"
+                      key="2"
                    >
-                    <a-comment :avatar="'//gravatar.loli.net/avatar/'+item.gavatarMd5+'/?s=256&d=mp'">
-                      <template slot="author">
-                        {{ item.author }} 发表在 《<a
-                          href="javascript:void(0);"
-                          target="_blank"
-                        >{{ item.post.title }}</a>》
-                      </template>
-                      <template slot="actions">
-                        <span @click="handleCommentReplyClick(item)">回复</span>
-                      </template>
-                      <p class="comment-content-wrapper" slot="content" v-html="item.content"></p>
-                      <a-tooltip
-                        slot="datetime"
-                        :title="item.createTime | moment"
+                      <recent-comment-tab type="sheet"></recent-comment-tab>
+                    </a-tab-pane>
+                    <a-tab-pane
+                      tab="日志"
+                      key="3"
                    >
-                        <span>{{ item.createTime | timeAgo }}</span>
-                      </a-tooltip>
-                    </a-comment>
-                  </a-list-item>
-                </a-list>
+                      <recent-comment-tab type="journal"></recent-comment-tab>
+                    </a-tab-pane>
+                  </a-tabs>
+                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
@ -302,42 +289,16 @@
        </a-popconfirm>
      </div>
    </a-drawer>
-
-    <a-modal
-      v-if="selectComment"
-      :title="'回复给：'+selectComment.author"
-      v-model="selectCommentVisible"
-    >
-      <template slot="footer">
-        <a-button
-          key="submit"
-          type="primary"
-          @click="handleReplyComment"
-        >
-          回复
-        </a-button>
-      </template>
-      <a-form layout="vertical">
-        <a-form-item>
-          <a-input
-            type="textarea"
-            :autosize="{ minRows: 8 }"
-            v-model="replyComment.content"
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
  </page-view>
 </template>

 <script>
 import { PageView } from '@/layouts'
 import AnalysisCard from './components/AnalysisCard'
+import RecentCommentTab from './components/RecentCommentTab'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
-import marked from 'marked'

 import postApi from '@/api/post'
-import postCommentApi from '@/api/postComment'
 import logApi from '@/api/log'
 import adminApi from '@/api/admin'
 import journalApi from '@/api/journal'
@ -346,7 +307,8 @@ export default {
  mixins: [mixin, mixinDevice],
  components: {
    PageView,
-    AnalysisCard
+    AnalysisCard,
+    RecentCommentTab
  },
  data() {
    return {
@ -357,25 +319,20 @@ export default {
      countsLoading: true,
      logDrawerVisiable: false,
      postData: [],
-      commentData: [],
      logData: [],
      countsData: {},
      journal: {},
+      logs: [],
      logPagination: {
        page: 1,
        size: 50,
        sort: null
-      },
-      logs: [],
-      selectCommentVisible: false,
-      selectComment: null,
-      replyComment: {}
+      }
    }
  },
  created() {
    this.getCounts()
    this.listLatestPosts()
-    this.listLatestComments()
    this.listLatestLogs()
  },
  computed: {
@ -397,12 +354,6 @@ export default {
        log.type = this.logType[log.type].text
        return log
      })
-    },
-    formmatedCommentData() {
-      return this.commentData.map(comment => {
-        comment.content = marked(comment.content, { sanitize: true })
-        return comment
-      })
    }
  },
  methods: {
@ -412,17 +363,11 @@ export default {
        this.activityLoading = false
      })
    },
-    listLatestComments() {
-      postCommentApi.listLatest(5, 'PUBLISHED').then(response => {
-        this.commentData = response.data.data
-        this.activityLoading = false
-        this.writeLoading = false
-      })
-    },
    listLatestLogs() {
      logApi.listLatest(5).then(response => {
        this.logData = response.data.data
        this.logLoading = false
+        this.writeLoading = false
      })
    },
    getCounts() {
@ -458,21 +403,6 @@ export default {
        this.listLatestLogs()
      })
    },
-    handleCommentReplyClick(comment) {
-      this.selectComment = comment
-      this.selectCommentVisible = true
-      this.replyComment.parentId = comment.id
-      this.replyComment.postId = comment.post.id
-    },
-    handleReplyComment() {
-      postCommentApi.create(this.replyComment).then(response => {
-        this.$message.success('回复成功！')
-        this.replyComment = {}
-        this.selectComment = {}
-        this.selectCommentVisible = false
-        this.listLatestComments()
-      })
-    },
    onPaginationChange(page, pageSize) {
      this.$log.debug(`Current: ${page}, PageSize: ${pageSize}`)
      this.logPagination.page = page
--- a/src/views/dashboard/components/RecentCommentTab.vue
+++ b/src/views/dashboard/components/RecentCommentTab.vue
@ -0,0 +1,96 @@
+<template>
+  <a-list
+    itemLayout="horizontal"
+    :dataSource="formmatedCommentData"
+    :loading="loading"
+  >
+    <a-list-item
+      slot="renderItem"
+      slot-scope="item, index"
+      :key="index"
+    >
+      <a-comment :avatar="'//gravatar.loli.net/avatar/'+item.gavatarMd5+'/?s=256&d=mp'">
+        <template slot="author">
+          {{ item.author }} 发表在 《<a
+            href="javascript:void(0);"
+            target="_blank"
+          >{{ item.post.title }}</a>》
+        </template>
+        <template slot="actions">
+          <span>回复</span>
+        </template>
+        <p
+          class="comment-content-wrapper"
+          slot="content"
+          v-html="item.content"
+        ></p>
+        <a-tooltip
+          slot="datetime"
+          :title="item.createTime | moment"
+        >
+          <span>{{ item.createTime | timeAgo }}</span>
+        </a-tooltip>
+      </a-comment>
+    </a-list-item>
+  </a-list>
+</template>
+
+<script>
+import commentApi from '@/api/comment'
+import marked from 'marked'
+export default {
+  name: 'RecentCommentTab',
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: 'post',
+      validator: function(value) {
+        return ['post', 'sheet', 'journal'].indexOf(value) !== -1
+      }
+    }
+  },
+  data() {
+    return {
+      comments: [],
+      loading: false
+    }
+  },
+  computed: {
+    formmatedCommentData() {
+      return this.comments.map(comment => {
+        comment.content = marked(comment.content, { sanitize: true })
+        return comment
+      })
+    }
+  },
+  created() {
+    this.loadComments()
+  },
+  methods: {
+    loadComments() {
+      this.loading = true
+      switch (this.type) {
+        case 'post':
+          commentApi.latestPostComment(5, 'PUBLISHED').then(response => {
+            this.comments = response.data.data
+            this.loading = false
+          })
+          break
+        case 'sheet':
+          commentApi.latestSheetComment(5, 'PUBLISHED').then(response => {
+            this.comments = response.data.data
+            this.loading = false
+          })
+          break
+        case 'journal':
+          commentApi.latestJournalComment(5, 'PUBLISHED').then(response => {
+            this.comments = response.data.data
+            this.loading = false
+          })
+          break
+      }
+    }
+  }
+}
+</script>
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@ -110,9 +110,7 @@
                :src="themeProperty.screenshots"
                slot="cover"
              >
-              <a-card-meta
-                :description="themeProperty.description"
-              >
+              <a-card-meta :description="themeProperty.description">
                <template slot="title">
                  <a
                    :href="themeProperty.author.website"
@ -256,7 +254,8 @@
      :footer="null"
      :bodyStyle="{ padding: '0 24px 24px' }"
    >
-      <a-tabs defaultActiveKey="1">
+      <div class="custom-tab-wrapper">
+        <a-tabs>
          <a-tab-pane
            tab="本地上传"
            key="1"
@ -293,6 +292,7 @@
            </a-form>
          </a-tab-pane>
        </a-tabs>
+      </div>
    </a-modal>
  </div>
 </template>
--- a/src/views/system/OptionForm.vue
+++ b/src/views/system/OptionForm.vue
@ -415,7 +415,8 @@
              <span slot="tab">
                <a-icon type="mail" />SMTP 服务
              </span>
-              <a-tabs defaultActiveKey="1">
+              <div class="custom-tab-wrapper">
+                <a-tabs>
                  <a-tab-pane
                    tab="发信设置"
                    key="1"
@ -513,6 +514,7 @@
                    </a-form>
                  </a-tab-pane>
                </a-tabs>
+              </div>
            </a-tab-pane>
            <a-tab-pane key="other">
              <span slot="tab">