支持半星显示
This commit is contained in:
@@ -3887,20 +3887,53 @@ function PlayPageClient() {
|
||||
{/* 星级显示 */}
|
||||
<div className='flex items-center gap-1'>
|
||||
{[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 (
|
||||
<svg
|
||||
key={star}
|
||||
className={`w-5 h-5 ${
|
||||
filled
|
||||
? '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'
|
||||
>
|
||||
<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 key={star} className='relative w-5 h-5'>
|
||||
{isFullStar ? (
|
||||
// 全星
|
||||
<svg
|
||||
className='w-5 h-5 text-yellow-400 fill-yellow-400'
|
||||
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>
|
||||
) : isHalfStar ? (
|
||||
// 半星
|
||||
<>
|
||||
{/* 空星背景 */}
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user