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

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>
+  );
+}