ai评论生成
This commit is contained in:
mtvpls
275
src/components/AIComments.tsx
Normal file
275
src/components/AIComments.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
interface AIComment {
|
||||
id: string;
|
||||
userName: string;
|
||||
userAvatar: string;
|
||||
rating: number | null;
|
||||
content: string;
|
||||
time: string;
|
||||
votes: number;
|
||||
isAiGenerated: true;
|
||||
}
|
||||
|
||||
interface AICommentsProps {
|
||||
movieName: string;
|
||||
movieInfo?: string;
|
||||
}
|
||||
|
||||
export default function AIComments({ movieName, movieInfo }: AICommentsProps) {
|
||||
const [comments, setComments] = useState<AIComment[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [hasStartedLoading, setHasStartedLoading] = useState(false);
|
||||
|
||||
const fetchComments = useCallback(async () => {
|
||||
try {
|
||||
console.log('正在生成AI评论...');
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const params = new URLSearchParams({
|
||||
name: movieName,
|
||||
count: '10',
|
||||
});
|
||||
|
||||
if (movieInfo) {
|
||||
params.append('info', movieInfo);
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/ai-comments?${params.toString()}`);
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || '生成AI评论失败');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('AI评论生成成功:', data.comments.length);
|
||||
|
||||
setComments(data.comments);
|
||||
} catch (err) {
|
||||
console.error('生成AI评论失败:', err);
|
||||
setError(err instanceof Error ? err.message : '生成AI评论失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [movieName, movieInfo]);
|
||||
|
||||
useEffect(() => {
|
||||
// 重置状态当 movieName 变化时
|
||||
setHasStartedLoading(false);
|
||||
setComments([]);
|
||||
setLoading(false);
|
||||
setError(null);
|
||||
}, [movieName]);
|
||||
|
||||
const startLoading = () => {
|
||||
console.log('开始生成AI评论');
|
||||
setHasStartedLoading(true);
|
||||
fetchComments();
|
||||
};
|
||||
|
||||
const regenerate = () => {
|
||||
console.log('重新生成AI评论');
|
||||
fetchComments();
|
||||
};
|
||||
|
||||
// 星级渲染
|
||||
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 ? '#3b82f6' : '#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 (!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='M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'
|
||||
/>
|
||||
</svg>
|
||||
<p className='text-center'>点击生成AI评论</p>
|
||||
<p className='text-xs text-center mt-2 text-gray-400'>
|
||||
基于影片信息和网络资料生成
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={startLoading}
|
||||
className='px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-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='M13 10V3L4 14h7v7l9-11h-7z'
|
||||
/>
|
||||
</svg>
|
||||
生成AI评论
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading && comments.length === 0) {
|
||||
return (
|
||||
<div className='flex flex-col items-center justify-center py-12'>
|
||||
<div className='animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-3'></div>
|
||||
<span className='text-gray-600 dark:text-gray-400'>AI正在生成评论...</span>
|
||||
<span className='text-xs text-gray-500 dark:text-gray-500 mt-2'>
|
||||
这可能需要几秒钟
|
||||
</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 mb-1'>{error}</p>
|
||||
<p className='text-xs text-gray-500 dark:text-gray-500 mb-4'>
|
||||
请检查管理面板的AI配置是否正确
|
||||
</p>
|
||||
<button
|
||||
onClick={startLoading}
|
||||
className='px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors'
|
||||
>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='space-y-4'>
|
||||
{/* 头部统计和操作 */}
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='text-sm text-gray-600 dark:text-gray-400'>
|
||||
已生成 {comments.length} 条AI评论
|
||||
</div>
|
||||
<button
|
||||
onClick={regenerate}
|
||||
disabled={loading}
|
||||
className='text-sm px-3 py-1 bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1'
|
||||
>
|
||||
<svg
|
||||
className='w-4 h-4'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
viewBox='0 0 24 24'
|
||||
>
|
||||
<path
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
strokeWidth={2}
|
||||
d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'
|
||||
/>
|
||||
</svg>
|
||||
{loading ? '生成中...' : '重新生成'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 评论列表 */}
|
||||
<div className='space-y-4'>
|
||||
{comments.map((comment) => (
|
||||
<div
|
||||
key={comment.id}
|
||||
className='bg-blue-50/50 dark:bg-blue-900/10 rounded-lg p-4 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors border border-blue-100 dark:border-blue-900/30'
|
||||
>
|
||||
{/* 用户信息 */}
|
||||
<div className='flex items-start gap-3 mb-3'>
|
||||
{/* 头像 */}
|
||||
<div className='flex-shrink-0'>
|
||||
<img
|
||||
src={comment.userAvatar}
|
||||
alt={comment.userName}
|
||||
className='w-10 h-10 rounded-full'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 用户名和评分 */}
|
||||
<div className='flex-1 min-w-0'>
|
||||
<div className='flex items-center gap-2 flex-wrap'>
|
||||
<span className='font-medium text-gray-900 dark:text-white'>
|
||||
{comment.userName}
|
||||
</span>
|
||||
{renderStars(comment.rating)}
|
||||
{/* AI标识 */}
|
||||
<span className='inline-flex items-center gap-1 px-2 py-0.5 bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 text-xs rounded-full'>
|
||||
<svg className='w-3 h-3' fill='currentColor' viewBox='0 0 24 24'>
|
||||
<path d='M13 10V3L4 14h7v7l9-11h-7z' />
|
||||
</svg>
|
||||
AI生成
|
||||
</span>
|
||||
</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>
|
||||
|
||||
{/* 提示信息 */}
|
||||
<div className='text-center text-xs text-gray-500 dark:text-gray-400 py-2 border-t border-gray-200 dark:border-gray-700'>
|
||||
以上评论由AI基于影片信息和网络资料生成，仅供参考
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user