support comments pagination.

rocboss · Apr 25, 2023 · 60b217b · 60b217b
1 parent 8ed21b5
commit 60b217b
Show file tree

Hide file tree

Showing 4 changed files with 241 additions and 197 deletions.
diff --git a/web/src/components/compose-reply.vue b/web/src/components/compose-reply.vue
@@ -4,74 +4,48 @@
             <span class="time-item">
                 {{ formatPrettyTime(comment.created_on) }}
             </span>
-            <div
-                v-if="!store.state.userLogined"
-                class="action-item"
-            >
-                <n-icon size="medium">
-                    <thumb-up-outlined/>
-                </n-icon>
-                <span class="upvote-count">{{ thumbsUpCount }}</span>
-            </div>
-            <div
-                v-if="store.state.userLogined"
-                class="action-item hover"
-                @click.stop="handleThumbsUp"
-            >
-                <n-icon size="medium">
-                    <thumb-up-outlined v-if="!hasThumbsUp" />
-                    <thumb-up-twotone v-if="hasThumbsUp" class="show" />
-                </n-icon>
-                <span class="upvote-count">{{ thumbsUpCount }}</span>
-            </div>
-            <div
-                v-if="!store.state.userLogined"
-                class="action-item"
-            >
-                <n-icon size="medium">
-                    <thumb-down-outlined />
-                </n-icon>
-            </div>
-            <div
-                v-if="store.state.userLogined"
-                class="action-item hover"
-                @click.stop="handleThumbsDown"
-            >
-                <n-icon size="medium">
-                    <thumb-down-outlined v-if="!hasThumbsDown" />
-                    <thumb-down-twotone v-if="hasThumbsDown" class="show" />
-                </n-icon>
+            <div class="actions">
+                <div v-if="!store.state.userLogined" class="action-item">
+                    <n-icon size="medium">
+                        <thumb-up-outlined />
+                    </n-icon>
+                    <span class="upvote-count">{{ thumbsUpCount }}</span>
+                </div>
+                <div v-if="store.state.userLogined" class="action-item hover" @click.stop="handleThumbsUp">
+                    <n-icon size="medium">
+                        <thumb-up-outlined v-if="!hasThumbsUp" />
+                        <thumb-up-twotone v-if="hasThumbsUp" class="show" />
+                    </n-icon>
+                    <span class="upvote-count">{{ thumbsUpCount }}</span>
+                </div>
+                <div v-if="!store.state.userLogined" class="action-item">
+                    <n-icon size="medium">
+                        <thumb-down-outlined />
+                    </n-icon>
+                </div>
+                <div v-if="store.state.userLogined" class="action-item hover" @click.stop="handleThumbsDown">
+                    <n-icon size="medium">
+                        <thumb-down-outlined v-if="!hasThumbsDown" />
+                        <thumb-down-twotone v-if="hasThumbsDown" class="show" />
+                    </n-icon>
+                </div>
+                <span class="show opacity-item" v-if="store.state.userLogined && !showReply" @click="switchReply(true)">
+                    回复
+                </span>
+                <span class="hide" v-if="store.state.userLogined && showReply" @click="switchReply(false)">
+                    取消
+                </span>
             </div>
-            <span class="show opacity-item" v-if="store.state.userLogined && !showReply" @click="switchReply(true)">
-                回复
-            </span>
-            <span class="hide" v-if="store.state.userLogined && showReply" @click="switchReply(false)">
-                取消
-            </span>
         </div>
 
         <div class="reply-input-wrap" v-if="showReply">
             <n-input-group>
-                <n-input
-                    ref="inputInstRef"
-                    size="small"
-                    :placeholder="
-                        props.atUsername
-                            ? '@' + props.atUsername
-                            : '请输入回复内容..'
-                    "
-                    maxlength="100"
-                    v-model:value="replyContent"
-                    show-count
-                    clearable
-                />
-                <n-button
-                    type="primary"
-                    size="small"
-                    ghost
-                    :loading="submitting"
-                    @click="submitReply"
-                >
+                <n-input ref="inputInstRef" size="small" :placeholder="
+                    props.atUsername
+                        ? '@' + props.atUsername
+                        : '请输入回复内容..'
+                " maxlength="100" v-model:value="replyContent" show-count clearable />
+                <n-button type="primary" size="small" ghost :loading="submitting" @click="submitReply">
                     回复
                 </n-button>
             </n-input-group>
@@ -120,36 +94,36 @@ const handleThumbsUp = () => {
         tweet_id: props.comment.post_id,
         comment_id: props.comment.id,
     })
-    .then((_res) => {
-        hasThumbsUp.value = !hasThumbsUp.value
-        if (hasThumbsUp.value) {
-            thumbsUpCount.value++
-            hasThumbsDown.value = false
-        } else {
-            thumbsUpCount.value--
-        }
-    })
-    .catch((err) => {
-        console.log(err);
-    }); 
+        .then((_res) => {
+            hasThumbsUp.value = !hasThumbsUp.value
+            if (hasThumbsUp.value) {
+                thumbsUpCount.value++
+                hasThumbsDown.value = false
+            } else {
+                thumbsUpCount.value--
+            }
+        })
+        .catch((err) => {
+            console.log(err);
+        });
 };
 const handleThumbsDown = () => {
     thumbsDownTweetComment({
         tweet_id: props.comment.post_id,
         comment_id: props.comment.id,
     })
-    .then((_res) => {
-        hasThumbsDown.value = !hasThumbsDown.value
-        if ( hasThumbsDown.value) {
-            if ( hasThumbsUp.value) {
-                thumbsUpCount.value--
-                hasThumbsUp.value = false
+        .then((_res) => {
+            hasThumbsDown.value = !hasThumbsDown.value
+            if (hasThumbsDown.value) {
+                if (hasThumbsUp.value) {
+                    thumbsUpCount.value--
+                    hasThumbsUp.value = false
+                }
             }
-        }
-    })
-    .catch((err) => {
-        console.log(err);
-    }); 
+        })
+        .catch((err) => {
+            console.log(err);
+        });
 };
 const switchReply = (status: boolean) => {
     showReply.value = status;
@@ -188,47 +162,66 @@ defineExpose({ switchReply });
     .reply-switch {
         display: flex;
         align-items: center;
+        justify-content: space-between;
         text-align: right;
         font-size: 12px;
         margin: 10px 0;
+
+        .actions {
+            display: flex;
+            align-items: center;
+            text-align: right;
+            font-size: 12px;
+            margin: 10px 0;
+        }
+
         .time-item {
             font-size: 12px;
             opacity: 0.65;
             margin-right: 18px;
         }
+
         .action-item {
             display: flex;
             align-items: center;
-            margin-right: 18px;
+            margin-left: 18px;
             opacity: 0.65;
+
             .upvote-count {
                 margin-left: 4px;
                 font-size: 12px;
             }
+
             &.hover {
                 cursor: pointer;
             }
         }
+
         .opacity-item {
-                opacity: 0.75;
-            }
+            opacity: 0.75;
+            margin-left: 18px;
+        }
+
         .show {
             color: #18a058;
             cursor: pointer;
         }
+
         .hide {
             opacity: 0.75;
             cursor: pointer;
         }
     }
 }
+
 .dark {
     .reply-compose-wrap {
         background-color: rgba(16, 16, 20, 0.75);
+
         .reply-switch {
             .show {
                 color: #63e2b7;
-             }
+            }
         }
     }
 }