feat: comment management page adds a list of comments to the journal (#480)

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/components/Comment/TargetCommentTreeNode.vue

@@ -12,7 +12,7 @@
     </template>
 
     <template #content>
-      <p v-html="$options.filters.markdownRender(comment.content)"></p>
+      <div class="comment-modal-content" v-html="$options.filters.markdownRender(comment.content)"></div>
     </template>
 
     <template #datetime>

src/styles/global.less

@@ -627,7 +627,7 @@ body {
   }
 
   img {
-    width: 100%;
+    width: 50%;
   }
 
   margin-bottom: 0;
@@ -773,9 +773,9 @@ body {
 }
 
 .journal-list-content,
-.comment-drawer-content {
+.comment-modal-content {
   img {
-    width: 50%;
+    width: 50% !important;
   }
 }
 

src/views/comment/CommentList.vue

@@ -2,12 +2,15 @@
   <page-view>
     <div class="card-container">
       <a-tabs type="card">
-        <a-tab-pane key="1" tab="文章">
+        <a-tab-pane key="post" tab="文章">
           <comment-tab target="post"></comment-tab>
         </a-tab-pane>
-        <a-tab-pane key="2" tab="页面">
+        <a-tab-pane key="sheet" tab="页面">
           <comment-tab target="sheet"></comment-tab>
         </a-tab-pane>
+        <a-tab-pane key="journal" tab="日志">
+          <comment-tab target="journal"></comment-tab>
+        </a-tab-pane>
       </a-tabs>
     </div>
   </page-view>

src/views/comment/components/CommentTab.vue

@@ -144,12 +144,15 @@
               <a-list-item-meta>
                 <template #description>
                   发表在
-                  <a v-if="targetName === 'posts'" :href="item.post.fullPath" target="_blank"
+                  <a v-if="targetName === 'posts'" :href="item.post.fullPath" target="_blank">
-                    >《{{ item.post.title }}》</a
+                    《{{ item.post.title }}》
-                  >
+                  </a>
-                  <a v-if="targetName === 'sheets'" :href="item.sheet.fullPath" target="_blank"
+                  <a v-if="targetName === 'sheets'" :href="item.sheet.fullPath" target="_blank">
-                    >《{{ item.sheet.title }}》</a
+                    《{{ item.sheet.title }}》
-                  >
+                  </a>
+                  <a v-if="targetName === 'journals'" href="javascript:void(0);">
+                    《{{ item.journal.createTime | moment }}》
+                  </a>
                 </template>
 
                 <template #avatar>
@@ -169,7 +172,7 @@
                   </div>
                 </template>
               </a-list-item-meta>
-              <p v-html="$options.filters.markdownRender(item.content)"></p>
+              <div class="comment-content-wrapper" v-html="$options.filters.markdownRender(item.content)"></div>
             </a-list-item>
           </template>
         </a-list>
@@ -195,7 +198,7 @@
           </template>
 
           <template #content="content">
-            <p class="comment-content-wrapper" v-html="$options.filters.markdownRender(content)"></p>
+            <div class="comment-content-wrapper" v-html="$options.filters.markdownRender(content)"></div>
           </template>
 
           <template #status="status">
@@ -214,6 +217,10 @@
             </a>
           </template>
 
+          <template v-if="targetName === 'journals'" #journal="journal">
+            <p class="comment-content-wrapper" v-html="journal.content"></p>
+          </template>
+
           <template #createTime="createTime">
             <a-tooltip placement="top">
               <template #title>
@@ -391,6 +398,46 @@ const sheetColumns = [
   }
 ]
 
+const journalColumns = [
+  {
+    title: '昵称',
+    dataIndex: 'author',
+    width: '150px',
+    ellipsis: true,
+    scopedSlots: { customRender: 'author' }
+  },
+  {
+    title: '内容',
+    dataIndex: 'content',
+    scopedSlots: { customRender: 'content' }
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: '100px',
+    scopedSlots: { customRender: 'status' }
+  },
+  {
+    title: '评论日志',
+    dataIndex: 'journal',
+    width: '400px',
+    ellipsis: true,
+    scopedSlots: { customRender: 'journal' }
+  },
+  {
+    title: '日期',
+    dataIndex: 'createTime',
+    width: '170px',
+    scopedSlots: { customRender: 'createTime' }
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: '180px',
+    scopedSlots: { customRender: 'action' }
+  }
+]
+
 export default {
   name: 'CommentTab',
   components: { CommentReplyModal },
@@ -441,7 +488,10 @@ export default {
       }
     },
     columns() {
-      return this.targetName === 'posts' ? postColumns : sheetColumns
+      if (this.targetName === 'posts') return postColumns
+      if (this.targetName === 'sheets') return sheetColumns
+      if (this.targetName === 'journals') return journalColumns
+      return {}
     },
     targetName() {
       return `${this.target}s`
@@ -456,6 +506,9 @@ export default {
       if (this.targetName === 'sheets') {
         return this.selectedComment.sheet.id
       }
+      if (this.targetName === 'journals') {
+        return this.selectedComment.journal.id
+      }
       return 0
     }
   },

src/views/sheet/independent/JournalList.vue

@@ -70,7 +70,7 @@
 
                 <a-list-item-meta>
                   <template slot="description">
-                    <p class="journal-list-content" v-html="item.content"></p>
+                    <div class="journal-list-content" v-html="item.content"></div>
                   </template>
                   <span slot="title">{{ item.createTime | moment }}</span>
                   <a-avatar slot="avatar" :src="user.avatar" size="large" />