Refactor recent comment list.

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

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;

src/views/dashboard/Dashboard.vue

@@ -104,14 +104,11 @@
           :bodyStyle="{ padding: 0 }"
         >
           <div class="card-container">
-            <a-tabs
+            <a-tabs type="card">
-              defaultActiveKey="1"
+              <a-tab-pane
-              type="card"
+                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">
+                <div class="custom-tab-wrapper">
-                  最近评论
+                  <a-tabs>
-                </span>
+                    <a-tab-pane
-                <a-list
+                      tab="文章"
-                  itemLayout="horizontal"
+                      key="1"
-                  :dataSource="formmatedCommentData"
                     >
-                  <a-list-item
+                      <recent-comment-tab type="post"></recent-comment-tab>
-                    slot="renderItem"
+                    </a-tab-pane>
-                    slot-scope="item, index"
+                    <a-tab-pane
-                    :key="index"
+                      tab="页面"
+                      key="2"
                     >
-                    <a-comment :avatar="'//gravatar.loli.net/avatar/'+item.gavatarMd5+'/?s=256&d=mp'">
+                      <recent-comment-tab type="sheet"></recent-comment-tab>
-                      <template slot="author">
+                    </a-tab-pane>
-                        {{ item.author }} 发表在 《<a
+                    <a-tab-pane
-                          href="javascript:void(0);"
+                      tab="日志"
-                          target="_blank"
+                      key="3"
-                        >{{ 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"
                     >
-                        <span>{{ item.createTime | timeAgo }}</span>
+                      <recent-comment-tab type="journal"></recent-comment-tab>
-                      </a-tooltip>
+                    </a-tab-pane>
-                    </a-comment>
+                  </a-tabs>
-                  </a-list-item>
+                </div>
-                </a-list>
               </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

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>

src/views/interface/ThemeList.vue

@@ -110,9 +110,7 @@
                 :src="themeProperty.screenshots"
                 slot="cover"
               >
-              <a-card-meta
+              <a-card-meta :description="themeProperty.description">
-                :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>

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">