chore: add note

Author: pacexy

src/App.css

@@ -35,7 +35,12 @@
   color: var(--text1);
   outline: none;
   width: 100%;
-  margin: 20px 0;
+  margin-top: 20px;
+}
+
+#comment-search-root dialog .note {
+  color: var(--text3);
+  margin: 10px 0;
 }
 
 #comment-search-root dialog .comment-tree {

src/App.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react'
 import Highlighter from 'react-highlight-words'
-import { fetchComments } from './api'
+import { PAGE_LIMIT, fetchComments } from './api'
 import { Reply } from './types/reply'
 import { extractVideoId, formatDateTime } from './utils'
 
@@ -51,6 +51,7 @@ export default function App() {
             }
           }}
         />
+        <div className='note'>Note: 由于性能和 Rate Limit 的原因，目前仅会加载 {PAGE_LIMIT} 页评论，即 {PAGE_LIMIT} * 49 条评论，及其至多 3 条子评论。</div>
         <div className='comment-tree'>
           <CommentTree comments={comments} />
         </div>

src/api.ts

@@ -1,8 +1,9 @@
 import { CommentDetailsResponse, CommentSort, CommentType } from './types/api'
 import { Reply } from './types/reply'
+import { debug } from './utils'
 
 // for performance and rate limit, we only fetch the first 20 pages
-const PAGE_LIMIT = 20
+export const PAGE_LIMIT = 20
 const replies: Reply[] = []
 
 export async function fetchComments(videoId: string) {
@@ -22,6 +23,7 @@ export async function fetchComments(videoId: string) {
       ps: pageSize.toString(),
     })
 
+    debug(`fetch comments: page ${page}`)
     const response = await fetch(
       `https://api.bilibili.com/x/v2/reply?${params}`
     )

src/utils.ts

@@ -8,9 +8,7 @@ export function assertEl<T extends Element>(el: T | null) {
 }
 
 export function debug(message: any) {
-  if (import.meta.env.DEV) {
-    console.log(`[${name}] ${message}`)
-  }
+  console.log(`[${name}] ${message}`)
 }
 
 export function extractVideoId(url: string) {