<ul class="divide-y divide-gray-100">
    @forelse($users as $index => $user)
        @php
            // 前三名前景色
            $rankBg = 'bg-gray-100 text-gray-500';
            $rowBg = 'hover:bg-gray-50';
            if ($index === 0) {
                $rankBg = 'bg-yellow-400 text-yellow-900 shadow-md transform scale-110';
                $rowBg = 'bg-yellow-50 hover:bg-yellow-100 border-l-4 border-yellow-400';
            } elseif ($index === 1) {
                $rankBg = 'bg-gray-300 text-gray-800 shadow-sm transform scale-105';
                $rowBg = 'bg-gray-50 hover:bg-gray-100 border-l-4 border-gray-300';
            } elseif ($index === 2) {
                $rankBg = 'bg-orange-300 text-orange-900 shadow-sm';
                $rowBg = 'bg-orange-50 hover:bg-orange-100 border-l-4 border-orange-300';
            }
        @endphp
        @if ($user)
            <li class="p-3 flex items-center justify-between transition-colors duration-150 {{ $rowBg }}">
                <!-- 左侧：名次与头像/名字 -->
                <div class="flex items-center space-x-3 overflow-hidden">
                    <div
                        class="w-6 h-6 shrink-0 {{ $rankBg }} rounded-full flex items-center justify-center font-bold text-xs">
                        {{ $index + 1 }}
                    </div>
                    <div class="flex items-center space-x-2 truncate">
                        <img class="w-8 h-8 rounded border object-cover shrink-0"
                            src="{{ $user->headface_url }}" alt="">
                        <div class="flex flex-col truncate">
                            <span class="text-sm font-bold text-gray-800 truncate" title="{{ $user->username }}">
                                {{ $user->username }}
                                @if ($user->sex == '女')
                                    <span class="text-pink-500 text-xs ml-0.5">♀</span>
                                @elseif($user->sex == '男')
                                    <span class="text-blue-500 text-xs ml-0.5">♂</span>
                                @endif
                            </span>
                            <span class="text-[10px] text-gray-500 truncate">暂无个性签名</span>
                        </div>
                    </div>
                </div>

                <!-- 右侧：数值 -->
                <div class="flex flex-col items-end shrink-0 ml-2">
                    <span class="text-sm font-black {{ $index < 3 ? $color : 'text-gray-600' }}">
                        {{ number_format($user->$valueField) }}
                        <span
                            class="text-[10px] font-normal {{ $index < 3 ? $color : 'text-gray-400' }} ml-0.5">{{ $unit }}</span>
                    </span>
                </div>
            </li>
        @endif
    @empty
        <li class="p-8 text-center text-sm text-gray-400 font-bold">
            暂无数据登榜
        </li>
    @endforelse
</ul>
