评论抓取修改为懒加载

.next

@@ -0,0 +1 @@
+/.next

src/components/DoubanComments.tsx

@@ -19,10 +19,11 @@ interface DoubanCommentsProps {
 
 export default function DoubanComments({ doubanId }: DoubanCommentsProps) {
   const [comments, setComments] = useState<DoubanComment[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [total, setTotal] = useState(0);
   const [hasMore, setHasMore] = useState(false);
+  const [hasStartedLoading, setHasStartedLoading] = useState(false);
   const limit = 20;
 
   const fetchComments = useCallback(async (startIndex: number) => {
@@ -68,9 +69,21 @@ export default function DoubanComments({ doubanId }: DoubanCommentsProps) {
   }, [doubanId]);
 
   useEffect(() => {
-    fetchComments(0);
+    // 重置状态当 doubanId 变化时
+    setHasStartedLoading(false);
+    setComments([]);
+    setLoading(false);
+    setError(null);
+    setTotal(0);
+    setHasMore(false);
   }, [doubanId]); // 只在 doubanId 变化时重新获取
 
+  const startLoading = () => {
+    console.log('开始加载评论');
+    setHasStartedLoading(true);
+    fetchComments(0);
+  };
+
   const loadMore = () => {
     console.log('点击加载更多，当前状态:', {
       loading,
@@ -103,6 +116,30 @@ export default function DoubanComments({ doubanId }: DoubanCommentsProps) {
     );
   };
 
+  // 初始状态：显示查看评论按钮
+  if (!hasStartedLoading) {
+    return (
+      <div className='flex flex-col items-center justify-center py-12'>
+        <div className='text-gray-500 dark:text-gray-400 mb-4'>
+          <svg className='w-16 h-16 mx-auto mb-4 opacity-50' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+            <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.5} d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' />
+          </svg>
+          <p className='text-center'>点击查看豆瓣评论</p>
+        </div>
+        <button
+          onClick={startLoading}
+          className='px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors flex items-center gap-2'
+        >
+          <svg className='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+            <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M15 12a3 3 0 11-6 0 3 3 0 016 0z' />
+            <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z' />
+          </svg>
+          查看评论
+        </button>
+      </div>
+    );
+  }
+
   if (loading && comments.length === 0) {
     return (
       <div className='flex items-center justify-center py-12'>
@@ -119,6 +156,12 @@ export default function DoubanComments({ doubanId }: DoubanCommentsProps) {
       <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>
+        <button
+          onClick={startLoading}
+          className='mt-4 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors'
+        >
+          重试
+        </button>
       </div>
     );
   }