support comments pagination.

web/src/components/compose-reply.vue

@@ -4,39 +4,26 @@
             <span class="time-item">
                 {{ formatPrettyTime(comment.created_on) }}
             </span>
-            <div
-                v-if="!store.state.userLogined"
-                class="action-item"
-            >
+            <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"
-            >
+                <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"
-            >
+                <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"
-            >
+                <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" />
@@ -49,29 +36,16 @@
                     取消
                 </span>
             </div>
+        </div>
 
         <div class="reply-input-wrap" v-if="showReply">
             <n-input-group>
-                <n-input
-                    ref="inputInstRef"
-                    size="small"
-                    :placeholder="
+                <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"
-                >
+                " 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>
@@ -188,43 +162,62 @@ 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;
+            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;

web/src/components/reply-item.vue

@@ -2,41 +2,29 @@
     <div class="reply-item">
         <div class="header-wrap">
             <div class="username">
-                <router-link
-                    class="user-link"
-                    :to="{
+                <router-link class="user-link" :to="{
                     name: 'user',
                     query: { username: props.reply.user.username },
-                    }"
-                >
+                }">
                     {{ props.reply.user.username }}
                 </router-link>
                 <span class="reply-name">
                     {{ props.reply.at_user_id > 0 ? '回复' : ':' }}
                 </span>
 
-                <router-link
-                    class="user-link"
-                    :to="{
+                <router-link class="user-link" :to="{
                     name: 'user',
                     query: { username: props.reply.at_user.username },
-                    }"
-                    v-if="props.reply.at_user_id > 0"
-                >
+                }" v-if="props.reply.at_user_id > 0">
                     {{ props.reply.at_user.username }}
                 </router-link>
             </div>
             <div class="timestamp">
                 {{ props.reply.ip_loc }}
-                <n-popconfirm
-                    v-if="
+                <n-popconfirm v-if="
                     store.state.userInfo.is_admin ||
                     store.state.userInfo.id === props.reply.user.id
-                    "
-                    negative-text="取消"
-                    positive-text="确认"
-                    @positive-click="execDelAction"
-                >
+                " negative-text="取消" positive-text="确认" @positive-click="execDelAction">
                     <template #trigger>
                         <n-button quaternary circle size="tiny" class="del-btn">
                             <template #icon>
@@ -57,40 +45,27 @@
                 <span class="time-item">
                     {{ formatPrettyTime(props.reply.created_on) }}
                 </span>
-                <div
-                    v-if="!store.state.userLogined"
-                    class="action-item"
-                    @click.stop=""
-                >
+
+                <div class="actions">
+                    <div v-if="!store.state.userLogined" class="action-item" @click.stop="">
                         <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"
-                >
+                    <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"
-            >
+                    <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"
-            >
+                    <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" />
@@ -100,6 +75,7 @@
                 </div>
             </div>
         </div>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -201,16 +177,19 @@ const execDelAction = () => {
         display: flex;
         align-items: center;
         justify-content: space-between;
+
         .username {
             max-width: 50%;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+
             .reply-name {
                 margin: 0 3px;
                 opacity: 0.75;
             }
         }
+
         .timestamp {
             opacity: 0.75;
             text-align: right;
@@ -220,8 +199,10 @@ const execDelAction = () => {
             white-space: nowrap;
         }
     }
+
     .base-wrap {
         display: block;
+
         .content {
             width: calc(100% - 40px);
             margin-top: 4px;
@@ -229,36 +210,54 @@ const execDelAction = () => {
             text-align: justify;
             line-height: 2;
         }
+
         .reply-switch {
             display: flex;
             align-items: center;
+            justify-content: space-between;
             font-size: 12px;
             margin: 10px 0 0;
+
+            .actions {
+                display: flex;
+                align-items: center;
+                text-align: right;
+                font-size: 12px;
+                margin: 10px 0;
+            }
+
             .time-item {
                 font-size: 12px;
                 opacity: 0.75;
                 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;
+                margin-left: 18px;
             }
+
             .show {
                 color: #18a058;
                 cursor: pointer;
             }
+
             .hide {
                 opacity: 0.75;
                 cursor: pointer;
@@ -266,6 +265,7 @@ const execDelAction = () => {
         }
     }
 }
+
 .dark {
     .reply-item {
         border-bottom: 1px solid #262628;

web/src/types/NetParams.d.ts

@@ -173,6 +173,8 @@ declare module NetParams {
   interface PostGetPostComments {
     id: number;
     sort_strategy: "default" | "newest";
+    page?: number;
+    page_size?: number;
   }
 
   interface GetContacts { }

web/src/views/Post.vue

@@ -23,11 +23,7 @@
                 </n-tabs>
             </div>
             <n-list-item v-if="post.id > 0">
-                <compose-comment
-                    :lock="post.is_lock"
-                    :post-id="post.id"
-                    @post-success="loadComments(true)"
-                />
+                <compose-comment :lock="post.is_lock" :post-id="post.id" @post-success="loadComments(true)" />
             </n-list-item>
 
             <div v-if="post.id > 0">
@@ -36,26 +32,24 @@
                 </div>
                 <div v-else>
                     <div class="empty-wrap" v-if="comments.length === 0">
-                        <n-empty
-                            size="large"
-                            description="暂无评论，快来抢沙发"
-                        />
+                        <n-empty size="large" description="暂无评论，快来抢沙发" />
                     </div>
 
                     <n-list-item v-for="comment in comments" :key="comment.id">
-                        <comment-item
-                            :comment="comment"
-                            @reload="loadComments"
-                        />
+                        <comment-item :comment="comment" @reload="loadComments" />
                     </n-list-item>
                 </div>
             </div>
+
+            <div class="load-more-ele" v-if="!noMore" ref="bottomElement">
+                加载更多...
+            </div>
         </n-list>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, computed, Ref } from 'vue';
+import { ref, watch, onMounted, onUnmounted, computed, Ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { getPost, getPostComments } from '@/api/post';
 
@@ -66,6 +60,9 @@ const commentLoading = ref(false);
 const comments = ref<Item.CommentProps[]>([]);
 const postId = computed(() => +(route.query.id as string));
 const sortStrategy = ref<"default" | "newest">('default');
+const bottomElement = ref<HTMLElement | null>(null);
+const page = ref<number>(1);
+const noMore = ref(false);
 
 const commentTab = (tab: "default" | "newest") => {
     sortStrategy.value = tab;
@@ -98,9 +95,19 @@ const loadComments = (scrollToBottom: boolean = false) => {
     getPostComments({
         id: post.value.id as number,
         sort_strategy: sortStrategy.value,
+        page: page.value,
+        page_size: 20
     })
         .then((res) => {
+            if (res.list.length === 0) {
+                noMore.value = true
+            }
+
+            if (page.value === 1) {
                 comments.value = res.list;
+            } else {
+                comments.value = comments.value.concat(res.list);
+            }
             commentLoading.value = false;
 
             if (scrollToBottom) {
@@ -113,9 +120,38 @@ const loadComments = (scrollToBottom: boolean = false) => {
             commentLoading.value = false;
         });
 };
+
+const loadMoreComments = () => {
+    if (!commentLoading.value && comments.value.length > 0) {
+        page.value = page.value + 1;
+        loadComments();
+    }
+};
+
+const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            loadMoreComments();
+        }
+    });
+}, {
+    root: null,
+    rootMargin: '0px',
+    threshold: 1
+});
+
 onMounted(() => {
+    if (bottomElement.value) {
+        observer.observe(bottomElement.value);
+    }
+
     loadPost();
 });
+
+onUnmounted(() => {
+    observer.disconnect()
+});
+
 watch(postId, () => {
     if (postId.value > 0 && route.name === 'post') {
         loadPost();
@@ -127,19 +163,32 @@ watch(postId, () => {
 .detail-wrap {
     min-height: 100px;
 }
+
 .comment-opts-wrap {
     padding-top: 6px;
     padding-left: 16px;
     padding-right: 16px;
     opacity: 0.75;
+
     .comment-title-item {
         padding-top: 4px;
         font-size: 16px;
         text-align: center;
     }
 }
+
+.load-more-ele {
+    font-size: 12px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .dark {
-    .main-content-wrap, .skeleton-wrap {
+
+    .main-content-wrap,
+    .skeleton-wrap {
         background-color: rgba(16, 16, 20, 0.75);
     }
 }