优化积分流水筛选与用户管理样式

resources/views/admin/currency-logs/index.blade.php

@@ -3,6 +3,10 @@
 @section('title', '金币/积分流水查询')
 
 @section('content')
+    @php
+        $selectedSourceCount = count($selectedSources ?? []);
+    @endphp
+
     <!-- 筛选面板 -->
     <div class="bg-white p-5 rounded-xl border border-gray-100 shadow-sm mb-6">
         <form action="{{ route('admin.currency-logs.index') }}" method="GET" class="flex flex-wrap items-end gap-4">
@@ -39,17 +43,37 @@
             </div>
 
             <!-- 来源途径 -->
-            <div class="flex-1 min-w-[140px]">
-                <label for="source" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">来源途径</label>
-                <select name="source" id="source"
-                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
-                    <option value="">全部来源</option>
-                    @foreach ($allSources as $src)
-                        <option value="{{ $src->value }}" {{ request('source') == $src->value ? 'selected' : '' }}>
-                            {{ $src->label() }}
-                        </option>
-                    @endforeach
-                </select>
+            <div class="flex-1 min-w-[180px]">
+                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">来源途径</label>
+                <details class="relative" data-admin-source-filter>
+                    <summary
+                        class="flex w-full cursor-pointer list-none items-center justify-between rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 shadow-sm transition hover:border-indigo-400">
+                        <span class="truncate">{{ $selectedSourceCount > 0 ? '已选 '.$selectedSourceCount.' 项' : '全部来源' }}</span>
+                        <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                        </svg>
+                    </summary>
+
+                    <div class="absolute left-0 z-20 mt-2 flex w-full min-w-[220px] max-w-sm flex-col rounded-lg border border-gray-200 bg-white shadow-lg">
+                        <div class="grid max-h-64 gap-1 overflow-y-auto p-3">
+                            @foreach ($allSources as $src)
+                                <label class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-50">
+                                    <input type="checkbox" name="sources[]" value="{{ $src->value }}"
+                                        class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                                        @checked(in_array($src->value, $selectedSources ?? [], true))>
+                                    <span class="truncate" title="{{ $src->label() }}">{{ $src->label() }}</span>
+                                </label>
+                            @endforeach
+                        </div>
+
+                        <div class="sticky bottom-0 flex items-center justify-between border-t border-gray-100 bg-white px-3 py-3">
+                            <a href="{{ route('admin.currency-logs.index', request()->except('sources')) }}"
+                                class="text-xs text-gray-400 hover:text-gray-600">清空来源</a>
+                            <span class="text-xs text-gray-400">勾选后点查询生效</span>
+                        </div>
+                    </div>
+                </details>
             </div>
 
             <!-- 备注关键词 -->
@@ -176,4 +200,26 @@
             </div>
         @endif
     </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const sourceFilter = document.querySelector('[data-admin-source-filter]');
+
+            if (!sourceFilter) {
+                return;
+            }
+
+            document.addEventListener('click', function (event) {
+                if (!sourceFilter.open) {
+                    return;
+                }
+
+                if (sourceFilter.contains(event.target)) {
+                    return;
+                }
+
+                sourceFilter.removeAttribute('open');
+            });
+        });
+    </script>
 @endsection