支持半星显示
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user