新增评论抓取，修改更新日志
This commit is contained in:
mtvpls
174
src/app/api/douban-comments/route.ts
Normal file
174
src/app/api/douban-comments/route.ts
Normal file
@@ -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 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
232
src/components/DoubanComments.tsx
Normal file
232
src/components/DoubanComments.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* eslint-disable no-console */
|
||||
|
||||
const CURRENT_VERSION = '100.0.0';
|
||||
const CURRENT_VERSION = '200.0.0';
|
||||
|
||||
// 导出当前版本号供其他地方使用
|
||||
export { CURRENT_VERSION };
|
||||
|
||||
Reference in New Issue
Block a user