fix(0.2.6): 评论分页等 (#37)

* 新增 评论分页
* 修改 “查看更多...”的样式，避免深色模式下的“手电筒”
* 完善文档

Author: imaegoo

docs/.vuepress/theme/layouts/Layout.vue

@@ -3,7 +3,7 @@
     <template #page-bottom>
       <div class="page-edit">
         <div id="twikoo"></div>
-        <script src="https://cdn.jsdelivr.net/npm/twikoo@0.2.5/dist/twikoo.all.min.js" ref="twikooJs"></script>
+        <script src="https://cdn.jsdelivr.net/npm/twikoo@0.2.6/dist/twikoo.all.min.js" ref="twikooJs"></script>
       </div>
     </template>
   </ParentLayout>

docs/quick-start.md

@@ -1,5 +1,7 @@
 # 快速上手
 
+[查看视频](https://www.bilibili.com/video/BV1MZ4y1G7VB?zw)
+
 ## 环境初始化
 
 Twikoo 使用云开发作为评论后台，每个云开发用户均长期享受1个免费的标准型基础版1资源套餐。如果您已经拥有了一个免费版云开发环境，在环境配置符合要求的情况下，Twikoo 理论可以与其他项目共用一个环境。
@@ -90,7 +92,7 @@ Butterfly 目前支持 Twikoo，请查看 [Butterfly 安裝文檔(四) 主題配
 
 ``` html
 <div id="tcomment"></div>
-<script src="https://cdn.jsdelivr.net/npm/twikoo@0.2.5/dist/twikoo.all.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/twikoo@0.2.6/dist/twikoo.all.min.js"></script>
 <script>twikoo.init({ envId: '您的环境id', el: '#tcomment' })</script>
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twikoo",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "A simple comment system based on Tencent CloudBase (tcb).",
   "author": "imaegoo <hello@imaegoo.com> (https://github.com/imaegoo)",
   "license": "MIT",

src/function/twikoo/index.js

@@ -1,5 +1,5 @@
 /*!
- * Twikoo cloudbase function v0.2.5
+ * Twikoo cloudbase function v0.2.6
  * (c) 2020-2020 iMaeGoo
  * Released under the MIT License.
  */
@@ -21,7 +21,7 @@ const db = app.database()
 const _ = db.command
 
 // 常量 / constants
-const VERSION = '0.2.5'
+const VERSION = '0.2.6'
 const RES_CODE = {
   SUCCESS: 0,
   FAIL: 1000,
@@ -194,22 +194,49 @@ function getAdminTicket (credentials) {
 }
 
 // 读取评论
-// TODO: 分页
 async function commentGet (event) {
   const res = {}
-  let uid
   try {
     validate(event, ['url'])
-    uid = await auth.getEndUserInfo().userInfo.uid
-    const data = await db
+    const uid = await auth.getEndUserInfo().userInfo.uid
+    const query = {}
+    const limit = parseInt(config.COMMENT_PAGE_SIZE) || 8
+    let more = false
+    query.url = event.url
+    query.rid = _.in(['', null])
+    query.isSpam = _.neq(true)
+    // 读取总条数
+    const count = await db
+      .collection('comment')
+      .where(query)
+      .count()
+    // 读取主楼
+    if (event.before) {
+      query.created = _.lt(event.before)
+    }
+    const main = await db
+      .collection('comment')
+      .where(query)
+      .orderBy('created', 'desc')
+      // 流式分页，通过多读 1 条的方式，确认是否还有更多评论
+      .limit(limit + 1)
+      .get()
+    if (main.data.length > limit) {
+      // 还有更多评论
+      more = true
+      // 删除多读的 1 条
+      main.data.splice(limit - 1, 1)
+    }
+    // 读取回复楼
+    const reply = await db
       .collection('comment')
       .where({
-        url: event.url,
-        isSpam: _.neq(true)
+        rid: _.in(main.data.map((item) => item._id))
       })
-      .orderBy('created', 'desc')
       .get()
-    res.data = parseComment(data.data, uid)
+    res.data = parseComment([...main.data, ...reply.data], uid)
+    res.more = more
+    res.count = count.total
   } catch (e) {
     res.data = []
     res.message = e.message
@@ -310,7 +337,10 @@ async function commentSetForAdmin (event) {
     const data = await db
       .collection('comment')
       .doc(event.id)
-      .update(event.set)
+      .update({
+        ...event.set,
+        updated: new Date().getTime()
+      })
     res.code = RES_CODE.SUCCESS
     res.updated = data.updated
   } else {

src/view/App.vue

@@ -38,4 +38,20 @@ export default {
   height: 100%;
   fill: currentColor;
 }
+
+/* 全局 CSS */
+.tk-expand {
+  width: 100%;
+  cursor: pointer;
+  padding: 0.75em;
+  text-align: center;
+  background-color: #00000010;
+  transition: all 0.5s;
+}
+.tk-expand:hover {
+  background-color: #00000020;
+}
+.tk-expand:active {
+  background-color: #00000030;
+}
 </style>

src/view/components/TkAdminConfig.vue

@@ -33,7 +33,8 @@ export default {
           items: [
             { key: 'SITE_NAME', desc: '网站名称', ph: '示例：虹墨空间站', value: '' },
             { key: 'SITE_URL', desc: '网站地址', ph: '示例：https://www.imaegoo.com', value: '' },
-            { key: 'BLOGGER_EMAIL', desc: '博主的邮箱地址，用于邮件通知、博主标识。', ph: '示例：12345@qq.com', value: '' }
+            { key: 'BLOGGER_EMAIL', desc: '博主的邮箱地址，用于邮件通知、博主标识。', ph: '示例：12345@qq.com', value: '' },
+            { key: 'COMMENT_PAGE_SIZE', desc: '评论列表分页大小，默认为 8。', ph: '示例：8', value: '' }
           ]
         },
         {

src/view/components/TkComment.vue

@@ -32,14 +32,14 @@
             :comment="reply"
             @load="onLoad"
             @reply="onReplyReply" />
-        <div class="tk-expand" v-if="showExpand" @click="onExpand">查看更多...</div>
       </div>
       <!-- 回复框 -->
       <tk-submit v-if="replying"
           :reply-id="comment.id"
           :pid="pid"
           @load="onLoad"
           @cancel="onCancel" />
+      <div class="tk-expand" v-if="showExpand" @click="onExpand">查看更多...</div>
     </div>
   </div>
 </template>
@@ -242,18 +242,6 @@ export default {
 .tk-replies-expand {
   max-height: none;
 }
-.tk-expand {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100px;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
-  cursor: pointer;
-}
 .tk-submit {
   margin-top: 1rem;
 }

src/view/components/TkComments.vue

@@ -3,7 +3,7 @@
     <tk-submit @load="initComments" />
     <div class="tk-comments-container" v-loading="loading">
       <div class="tk-comments-title">
-        <span>{{ comments.length }} 条评论</span>
+        <span>{{ count }} 条评论</span>
         <span class="tk-icon" v-html="iconSetting" @click="openAdmin"></span>
       </div>
       <div class="tk-comments-no" v-if="!loading && !comments.length">没有评论</div>
@@ -13,6 +13,7 @@
         :replying="replyId === comment.id"
         @reply="onReply"
         @load="initComments" />
+      <div class="tk-expand" v-if="showExpand" @click="onExpand" v-loading="loadingMore">查看更多...</div>
     </div>
   </div>
 </template>
@@ -31,21 +32,40 @@ export default {
   data () {
     return {
       loading: true,
+      loadingMore: false,
       comments: [],
+      showExpand: true,
+      count: 0,
       replyId: '',
       iconSetting
     }
   },
   methods: {
     async initComments () {
       this.loading = true
-      const comments = await call(this.$tcb, 'COMMENT_GET', {
+      await this.getComments({
         url: window.location.pathname
       })
+      this.loading = false
+    },
+    async onExpand () {
+      this.loadingMore = true
+      const before = this.comments
+        .map((item) => item.created)
+        .sort((a, b) => a - b)[0] // 最小值
+      await this.getComments({
+        url: window.location.pathname,
+        before
+      })
+      this.loadingMore = false
+    },
+    async getComments (event) {
+      const comments = await call(this.$tcb, 'COMMENT_GET', event)
       if (comments && comments.result && comments.result.data) {
-        this.comments = comments.result.data
+        this.comments = event.before ? this.comments.concat(comments.result.data) : comments.result.data
+        this.showExpand = comments.result.more
+        this.count = comments.result.count || this.comments.length
       }
-      this.loading = false
     },
     onReply (id) {
       this.replyId = id