支持半星显示

This commit is contained in:
mtvpls
2025-12-09 15:33:21 +08:00
parent 8a5f7bf291
commit 6fdfa3dda4

View File

@@ -3887,20 +3887,53 @@ function PlayPageClient() {
{/* 星级显示 */} {/* 星级显示 */}
<div className='flex items-center gap-1'> <div className='flex items-center gap-1'>
{[1, 2, 3, 4, 5].map((star) => { {[1, 2, 3, 4, 5].map((star) => {
const filled = star <= Math.round(doubanRating.value / 2); const starValue = doubanRating.value / 2; // 转换为5星制
const isFullStar = star <= Math.floor(starValue);
const isHalfStar = !isFullStar && star <= Math.ceil(starValue) && starValue % 1 >= 0.25;
return ( return (
<svg <div key={star} className='relative w-5 h-5'>
key={star} {isFullStar ? (
className={`w-5 h-5 ${ // 全星
filled <svg
? 'text-yellow-400 fill-yellow-400' className='w-5 h-5 text-yellow-400 fill-yellow-400'
: 'text-gray-300 dark:text-gray-600 fill-gray-300 dark:fill-gray-600' viewBox='0 0 24 24'
}`} xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 24 24' >
xmlns='http://www.w3.org/2000/svg' <path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' />
> </svg>
<path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' /> ) : isHalfStar ? (
</svg> // 半星
<>
{/* 空星背景 */}
<svg
className='absolute w-5 h-5 text-gray-300 dark:text-gray-600 fill-gray-300 dark:fill-gray-600'
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' />
</svg>
{/* 半星遮罩 */}
<svg
className='absolute w-5 h-5 text-yellow-400 fill-yellow-400'
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
style={{ clipPath: 'inset(0 50% 0 0)' }}
>
<path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' />
</svg>
</>
) : (
// 空星
<svg
className='w-5 h-5 text-gray-300 dark:text-gray-600 fill-gray-300 dark:fill-gray-600'
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' />
</svg>
)}
</div>
); );
})} })}
</div> </div>