新增评论抓取，修改更新日志

2025-12-02 21:36:59 +08:00
parent 1c058c1774
commit 73be7f6ec4
9 changed files with 567 additions and 2 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -6,7 +6,9 @@
      "Bash(find:*)",
      "WebFetch(domain:artplayer.org)",
      "WebFetch(domain:github.com)",
-      "WebFetch(domain:www.artplayer.org)"
+      "WebFetch(domain:www.artplayer.org)",
+      "WebFetch(domain:m.douban.com)",
+      "WebFetch(domain:movie.douban.com)"
    ],
    "deny": [],
    "ask": []
--- a/11
+++ b/11
@@ -1,3 +1,14 @@
+## [200.0.0] - 2025-12-02
+
+### Added
+- 新增外部播放器跳转
+- 新增视频超分
+- 新增弹幕抓取
+- 新增评论抓取
+
+### Fixed
+- 修复首页卡顿
+
 ## [100.0.0] - 2025-08-26

 ### Added
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
    "artplayer": "^5.2.5",
    "artplayer-plugin-danmuku": "^5.2.0",
    "bs58": "^6.0.0",
+    "cheerio": "^1.1.2",
    "clsx": "^2.0.0",
    "crypto-js": "^4.2.0",
    "framer-motion": "^12.18.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ importers:
      bs58:
        specifier: ^6.0.0
        version: 6.0.0
+      cheerio:
+        specifier: ^1.1.2
+        version: 1.1.2
      clsx:
        specifier: ^2.0.0
        version: 2.1.1
@@ -2221,6 +2224,13 @@ packages:
  charenc@0.0.2:
    resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}

+  cheerio-select@2.1.0:
+    resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
+
+  cheerio@1.1.2:
+    resolution: {integrity: sha512-IkxPpb5rS/d1IiLbHMgfPuS0FgiWTtFIm/Nj+2woXDLTZ7fOT2eqzgYbdMlLweqlHbsZjxEChoVK+7iph7jyQg==}
+    engines: {node: '>=20.18.1'}
+
  chokidar@3.6.0:
    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
    engines: {node: '>= 8.10.0'}
@@ -2607,6 +2617,9 @@ packages:
    resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
    engines: {node: '>= 4'}

+  encoding-sniffer@0.2.1:
+    resolution: {integrity: sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==}
+
  enhanced-resolve@5.18.3:
    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
    engines: {node: '>=10.13.0'}
@@ -2615,6 +2628,10 @@ packages:
    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
    engines: {node: '>=0.12'}

+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
  error-ex@1.3.2:
    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}

@@ -3118,6 +3135,9 @@ packages:
  html-escaper@2.0.2:
    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}

+  htmlparser2@10.0.0:
+    resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
+
  http-proxy-agent@4.0.1:
    resolution: {integrity: sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==}
    engines: {node: '>= 6'}
@@ -3139,6 +3159,10 @@ packages:
    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
    engines: {node: '>=0.10.0'}

+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
  idb@7.1.1:
    resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}

@@ -4099,9 +4123,18 @@ packages:
    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
    engines: {node: '>=8'}

+  parse5-htmlparser2-tree-adapter@7.1.0:
+    resolution: {integrity: sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==}
+
+  parse5-parser-stream@7.1.2:
+    resolution: {integrity: sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==}
+
  parse5@6.0.1:
    resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}

+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
  path-exists@4.0.0:
    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
    engines: {node: '>=8'}
@@ -5024,6 +5057,10 @@ packages:
  undici-types@7.8.0:
    resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}

+  undici@7.16.0:
+    resolution: {integrity: sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==}
+    engines: {node: '>=20.18.1'}
+
  unicode-canonical-property-names-ecmascript@2.0.1:
    resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
    engines: {node: '>=4'}
@@ -5156,9 +5193,17 @@ packages:
  whatwg-encoding@1.0.5:
    resolution: {integrity: sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==}

+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+
  whatwg-mimetype@2.3.0:
    resolution: {integrity: sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==}

+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
  whatwg-url@7.1.0:
    resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}

@@ -7752,6 +7797,29 @@ snapshots:

  charenc@0.0.2: {}

+  cheerio-select@2.1.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-select: 5.1.0
+      css-what: 6.1.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+
+  cheerio@1.1.2:
+    dependencies:
+      cheerio-select: 2.1.0
+      dom-serializer: 2.0.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      encoding-sniffer: 0.2.1
+      htmlparser2: 10.0.0
+      parse5: 7.3.0
+      parse5-htmlparser2-tree-adapter: 7.1.0
+      parse5-parser-stream: 7.1.2
+      undici: 7.16.0
+      whatwg-mimetype: 4.0.0
+
  chokidar@3.6.0:
    dependencies:
      anymatch: 3.1.3
@@ -8119,6 +8187,11 @@ snapshots:

  emojis-list@3.0.0: {}

+  encoding-sniffer@0.2.1:
+    dependencies:
+      iconv-lite: 0.6.3
+      whatwg-encoding: 3.1.1
+
  enhanced-resolve@5.18.3:
    dependencies:
      graceful-fs: 4.2.11
@@ -8126,6 +8199,8 @@ snapshots:

  entities@4.5.0: {}

+  entities@6.0.1: {}
+
  error-ex@1.3.2:
    dependencies:
      is-arrayish: 0.2.1
@@ -8796,6 +8871,13 @@ snapshots:

  html-escaper@2.0.2: {}

+  htmlparser2@10.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 6.0.1
+
  http-proxy-agent@4.0.1:
    dependencies:
      '@tootallnate/once': 1.1.2
@@ -8819,6 +8901,10 @@ snapshots:
    dependencies:
      safer-buffer: 2.1.2

+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
  idb@7.1.1: {}

  ignore@5.3.2: {}
@@ -10079,8 +10165,21 @@ snapshots:
      json-parse-even-better-errors: 2.3.1
      lines-and-columns: 1.2.4

+  parse5-htmlparser2-tree-adapter@7.1.0:
+    dependencies:
+      domhandler: 5.0.3
+      parse5: 7.3.0
+
+  parse5-parser-stream@7.1.2:
+    dependencies:
+      parse5: 7.3.0
+
  parse5@6.0.1: {}

+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
  path-exists@4.0.0: {}

  path-is-absolute@1.0.1: {}
@@ -10988,6 +11087,8 @@ snapshots:

  undici-types@7.8.0: {}

+  undici@7.16.0: {}
+
  unicode-canonical-property-names-ecmascript@2.0.1: {}

  unicode-match-property-ecmascript@2.0.0:
@@ -11168,8 +11269,14 @@ snapshots:
    dependencies:
      iconv-lite: 0.4.24

+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
  whatwg-mimetype@2.3.0: {}

+  whatwg-mimetype@4.0.0: {}
+
  whatwg-url@7.1.0:
    dependencies:
      lodash.sortby: 4.7.0
--- a/src/app/api/douban-comments/route.ts
+++ b/src/app/api/douban-comments/route.ts
@@ -0,0 +1,174 @@
+import { NextRequest, NextResponse } from 'next/server';
+import * as cheerio from 'cheerio';
+
+export const runtime = 'nodejs';
+
+interface DoubanComment {
+  id: string;
+  userName: string;
+  userAvatar: string;
+  userUrl: string;
+  rating: number | null; // 1-5 星，null 表示未评分
+  content: string;
+  time: string;
+  votes: number;
+}
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const doubanId = searchParams.get('id');
+  const start = searchParams.get('start') || '0';
+  const limit = searchParams.get('limit') || '20';
+
+  if (!doubanId) {
+    return NextResponse.json({ error: 'Missing douban ID' }, { status: 400 });
+  }
+
+  try {
+    // 请求豆瓣短评页面
+    const url = `https://movie.douban.com/subject/${doubanId}/comments?start=${start}&limit=${limit}&status=P&sort=new_score`;
+
+    const response = await fetch(url, {
+      headers: {
+        'User-Agent':
+          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+        Accept:
+          'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
+        'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8',
+        Referer: 'https://movie.douban.com/',
+      },
+    });
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch douban page' },
+        { status: response.status }
+      );
+    }
+
+    const html = await response.text();
+    const $ = cheerio.load(html);
+
+    const comments: DoubanComment[] = [];
+
+    console.log('开始解析豆瓣评论，start:', start, 'limit:', limit);
+
+    // 解析每条短评
+    $('.comment-item').each((index, element) => {
+      const $comment = $(element);
+
+      // 提取评论 ID
+      const commentId = $comment.attr('data-cid') || '';
+
+      // 提取用户信息
+      const $avatar = $comment.find('.avatar');
+      const userUrl = $avatar.find('a').attr('href') || '';
+      const userAvatar = $avatar.find('img').attr('src') || '';
+      const userName = $avatar.find('a').attr('title') || '';
+
+      // 提取评分（星级）
+      const ratingClass = $comment.find('.rating').attr('class') || '';
+      let rating: number | null = null;
+      const ratingMatch = ratingClass.match(/allstar(\d)0/);
+      if (ratingMatch) {
+        rating = parseInt(ratingMatch[1]);
+      }
+
+      // 提取短评内容
+      const $content = $comment.find('.short');
+      const content = $content.text().trim();
+
+      // 提取时间
+      const $commentInfo = $comment.find('.comment-info');
+      const time = $commentInfo.find('.comment-time').attr('title') || '';
+
+      // 提取有用数
+      const votesText = $comment.find('.votes.vote-count').text().trim();
+      const votes = parseInt(votesText) || 0;
+
+      if (commentId && content) {
+        comments.push({
+          id: commentId,
+          userName,
+          userAvatar,
+          userUrl,
+          rating,
+          content,
+          time,
+          votes,
+        });
+      }
+    });
+
+    console.log('解析到评论数:', comments.length);
+
+    // 获取总评论数 - 尝试多种方式
+    let total = 0;
+
+    // 方式1: 从标题获取 "全部 XXX 条"
+    const titleText = $('.mod-hd h2, h2, .section-title').text();
+    const titleMatch = titleText.match(/全部\s*(\d+)\s*条/);
+    if (titleMatch) {
+      total = parseInt(titleMatch[1]);
+    }
+
+    // 方式2: 从导航标签获取 "看过(XXX)"
+    if (total === 0) {
+      const navText = $('.tabs, .nav-tabs, a').text();
+      const navMatch = navText.match(/看过\s*\((\d+)\)/);
+      if (navMatch) {
+        total = parseInt(navMatch[1]);
+      }
+    }
+
+    // 方式3: 从页面所有文本查找
+    if (total === 0) {
+      const bodyText = $('body').text();
+      const bodyMatch = bodyText.match(/全部\s*(\d+)\s*条|看过\s*\((\d+)\)/);
+      if (bodyMatch) {
+        total = parseInt(bodyMatch[1] || bodyMatch[2]);
+      }
+    }
+
+    // 方式4: 如果有评论但 total 为 0，至少设置为当前评论数，并假设有更多
+    if (total === 0 && comments.length > 0) {
+      total = parseInt(start) + comments.length;
+      // 如果本次获取了完整的 limit 数量，可能还有更多
+      if (comments.length >= parseInt(limit)) {
+        total += 1; // 暂定有更多
+      }
+    }
+
+    console.log('豆瓣评论统计:', {
+      total,
+      commentsCount: comments.length,
+      start,
+      limit,
+      hasMore: parseInt(start) + comments.length < total || (total === 0 && comments.length >= parseInt(limit)),
+    });
+
+    return NextResponse.json(
+      {
+        comments,
+        total,
+        start: parseInt(start),
+        limit: parseInt(limit),
+        // 如果知道总数，就用总数判断；否则如果获取了完整页，假设还有更多
+        hasMore: total > 0
+          ? parseInt(start) + comments.length < total
+          : comments.length >= parseInt(limit),
+      },
+      {
+        headers: {
+          'Cache-Control': 'public, max-age=600, s-maxage=600',
+        },
+      }
+    );
+  } catch (error) {
+    console.error('Douban comments fetch error:', error);
+    return NextResponse.json(
+      { error: 'Failed to parse douban comments' },
+      { status: 500 }
+    );
+  }
+}
--- a/src/app/play/page.tsx
+++ b/src/app/play/page.tsx
@@ -40,6 +40,7 @@ import { getVideoResolutionFromM3u8, processImageUrl } from '@/lib/utils';

 import EpisodeSelector from '@/components/EpisodeSelector';
 import PageLayout from '@/components/PageLayout';
+import DoubanComments from '@/components/DoubanComments';

 // 扩展 HTMLVideoElement 类型以支持 hls 属性
 declare global {
@@ -3280,6 +3281,28 @@ function PlayPageClient() {
            </div>
          </div>
        </div>
+
+        {/* 豆瓣评论区域 */}
+        {videoDoubanId !== 0 && (
+          <div className='mt-6 px-4'>
+            <div className='bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl border border-gray-200/50 dark:border-gray-700/50 overflow-hidden'>
+              {/* 标题 */}
+              <div className='px-6 py-4 border-b border-gray-200 dark:border-gray-700'>
+                <h3 className='text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2'>
+                  <svg className='w-5 h-5' fill='currentColor' viewBox='0 0 24 24'>
+                    <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/>
+                  </svg>
+                  豆瓣评论
+                </h3>
+              </div>
+
+              {/* 评论内容 */}
+              <div className='p-6'>
+                <DoubanComments doubanId={videoDoubanId} />
+              </div>
+            </div>
+          </div>
+        )}
      </div>
    </PageLayout>
  );
--- a/src/components/DoubanComments.tsx
+++ b/src/components/DoubanComments.tsx
@@ -0,0 +1,232 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+
+interface DoubanComment {
+  id: string;
+  userName: string;
+  userAvatar: string;
+  userUrl: string;
+  rating: number | null;
+  content: string;
+  time: string;
+  votes: number;
+}
+
+interface DoubanCommentsProps {
+  doubanId: number;
+}
+
+export default function DoubanComments({ doubanId }: DoubanCommentsProps) {
+  const [comments, setComments] = useState<DoubanComment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [total, setTotal] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
+  const limit = 20;
+
+  const fetchComments = useCallback(async (startIndex: number) => {
+    try {
+      console.log('正在获取评论，起始位置:', startIndex);
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch(
+        `/api/douban-comments?id=${doubanId}&start=${startIndex}&limit=${limit}`
+      );
+
+      if (!response.ok) {
+        throw new Error('获取评论失败');
+      }
+
+      const data = await response.json();
+      console.log('获取到评论数据:', {
+        newComments: data.comments.length,
+        total: data.total,
+        hasMore: data.hasMore,
+        start: data.start,
+      });
+
+      if (startIndex === 0) {
+        setComments(data.comments);
+      } else {
+        setComments((prev) => {
+          console.log('追加评论，之前:', prev.length, '新增:', data.comments.length);
+          return [...prev, ...data.comments];
+        });
+      }
+
+      setTotal(data.total);
+      setHasMore(data.hasMore);
+      console.log('更新后状态 - hasMore:', data.hasMore, 'total:', data.total);
+    } catch (err) {
+      console.error('获取评论失败:', err);
+      setError(err instanceof Error ? err.message : '获取评论失败');
+    } finally {
+      setLoading(false);
+    }
+  }, [doubanId]);
+
+  useEffect(() => {
+    fetchComments(0);
+  }, [doubanId]); // 只在 doubanId 变化时重新获取
+
+  const loadMore = () => {
+    console.log('点击加载更多，当前状态:', {
+      loading,
+      hasMore,
+      commentsLength: comments.length,
+    });
+    if (!loading && hasMore) {
+      // 使用当前已加载的评论数量作为下一页的起始位置
+      fetchComments(comments.length);
+    }
+  };
+
+  // 星级渲染
+  const renderStars = (rating: number | null) => {
+    if (rating === null) return null;
+
+    return (
+      <div className='flex items-center gap-0.5'>
+        {[1, 2, 3, 4, 5].map((star) => (
+          <svg
+            key={star}
+            className='w-4 h-4'
+            fill={star <= rating ? '#f99b01' : '#e0e0e0'}
+            viewBox='0 0 24 24'
+          >
+            <path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z' />
+          </svg>
+        ))}
+      </div>
+    );
+  };
+
+  if (loading && comments.length === 0) {
+    return (
+      <div className='flex items-center justify-center py-12'>
+        <div className='animate-spin rounded-full h-8 w-8 border-b-2 border-green-500'></div>
+        <span className='ml-3 text-gray-600 dark:text-gray-400'>
+          加载评论中...
+        </span>
+      </div>
+    );
+  }
+
+  if (error && comments.length === 0) {
+    return (
+      <div className='text-center py-12'>
+        <div className='text-red-500 mb-2'>❌</div>
+        <p className='text-gray-600 dark:text-gray-400'>{error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className='space-y-4'>
+      {/* 头部统计 */}
+      {total > 0 && (
+        <div className='text-sm text-gray-600 dark:text-gray-400'>
+          {total > comments.length ? `共 ${total} 条短评` : `已加载 ${comments.length} 条短评`}
+        </div>
+      )}
+
+      {/* 评论列表 */}
+      <div className='space-y-4'>
+        {comments.map((comment) => (
+          <div
+            key={comment.id}
+            className='bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors'
+          >
+            {/* 用户信息 */}
+            <div className='flex items-start gap-3 mb-3'>
+              {/* 头像 */}
+              <a
+                href={comment.userUrl}
+                target='_blank'
+                rel='noopener noreferrer'
+                className='flex-shrink-0'
+              >
+                <img
+                  src={comment.userAvatar}
+                  alt={comment.userName}
+                  className='w-10 h-10 rounded-full'
+                  onError={(e) => {
+                    e.currentTarget.src =
+                      'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ccc"%3E%3Cpath d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/%3E%3C/svg%3E';
+                  }}
+                />
+              </a>
+
+              {/* 用户名和评分 */}
+              <div className='flex-1 min-w-0'>
+                <div className='flex items-center gap-2 flex-wrap'>
+                  <a
+                    href={comment.userUrl}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='font-medium text-gray-900 dark:text-white hover:text-green-600 dark:hover:text-green-400'
+                  >
+                    {comment.userName}
+                  </a>
+                  {renderStars(comment.rating)}
+                </div>
+
+                {/* 时间 */}
+                <div className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+                  {comment.time}
+                </div>
+              </div>
+
+              {/* 有用数 */}
+              {comment.votes > 0 && (
+                <div className='flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400'>
+                  <svg
+                    className='w-4 h-4'
+                    fill='none'
+                    stroke='currentColor'
+                    viewBox='0 0 24 24'
+                  >
+                    <path
+                      strokeLinecap='round'
+                      strokeLinejoin='round'
+                      strokeWidth='2'
+                      d='M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5'
+                    />
+                  </svg>
+                  <span>{comment.votes}</span>
+                </div>
+              )}
+            </div>
+
+            {/* 评论内容 */}
+            <div className='text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap'>
+              {comment.content}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* 加载更多按钮 */}
+      {hasMore && (
+        <div className='flex justify-center pt-4'>
+          <button
+            onClick={loadMore}
+            disabled={loading}
+            className='px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors'
+          >
+            {loading ? '加载中...' : '加载更多'}
+          </button>
+        </div>
+      )}
+
+      {/* 没有更多了 */}
+      {!hasMore && comments.length > 0 && (
+        <div className='text-center text-sm text-gray-500 dark:text-gray-400 py-4'>
+          没有更多评论了
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/lib/changelog.ts
+++ b/src/lib/changelog.ts
@@ -10,6 +10,21 @@ export interface ChangelogEntry {
 }

 export const changelog: ChangelogEntry[] = [
+	{
+    version: "200.0.0",
+    date: "2025-12-02",
+    added: [
+      "新增外部播放器跳转",
+      "新增视频超分",
+      "新增弹幕抓取",
+	  "新增评论抓取"
+    ],
+    changed: [
+    ],
+    fixed: [
+      "修复首页卡顿"
+    ]
+  },
  {
    version: "100.0.0",
    date: "2025-08-26",
--- a/src/lib/version.ts
+++ b/src/lib/version.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-console */

-const CURRENT_VERSION = '100.0.0';
+const CURRENT_VERSION = '200.0.0';

 // 导出当前版本号供其他地方使用
 export { CURRENT_VERSION };